@font-face {
  font-family: 'Rethink Sans';
  src: url('/limesurvey/upload/themes/survey/aib-theme/files/RethinkSans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('/limesurvey/upload/themes/survey/aib-theme/files/PTSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.container-fluid .text-end a {
    display: none !important;
}

.btn-primary {
    border-radius: 2px;
    background: var(--schwarz, #161616);
    border-color: var(--schwarz, #161616);
    font-family: 'Rethink Sans', sans-serif;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-radius: 2px;
    background: var(--schwarz, #161616);
    border-color: var(--schwarz, #161616);
    box-shadow: none;
}

.col-xl-8 {
    width: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --bg-color: #5dbb96;
  --text-color: #1a1a1a;
  --schwarz: #161616;
  --font-body: "PT Serif", serif;
  --font-size-sm: 16px;
  --font-weight-regular: 400;
  --line-height-sm: 24px;
  --letter-spacing-default: 0;
}

body {
  font-family: var(--font-body);
}

/* Standard-Limesurvey-Elemente verstecken */
.ls-core-header,
.progress,
.ls-progress-navbar,
#limesurvey-progress {
  display: none !important;
}

/* Custom Wrapper */
.custom-survey-wrapper {

  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;

  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Zeile 1: Header */
.custom-header {
  margin-bottom: 50px;
}

.custom-header > * {
      color: black;
  }

.custom-pre-title {
    color: var(--Neutrals-Schwarz, #161616);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 14px;
    font-family: 'Rethink Sans', sans-serif;
    line-height: 18px;
    letter-spacing: 0.30px;
}

.custom-title {
    font-family: 'Rethink Sans', sans-serif;
  font-size: 3rem;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 56px;
}

.custom-description {
    color: #161616;
    font-size: 48px;
    font-family: 'PT Serif', sans-serif;
    font-style: italic;
    line-height: 56px;
}

/* Zeile 2: 50/50 Split */
.custom-content-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  align-items: center;
  flex-grow: 1;
}

@media (max-width: 768px) {
  .custom-content-split {
    grid-template-columns: 1fr;
  }
}

.custom-image-container {
  display: flex;
  align-self: baseline;
  justify-content: center;
}

.custom-image-container img {
  max-width: 324px;
}

.custom-round-image {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #ffffff;
}

.custom-main-content {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Fruity Question-Container transparent */
.question-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 30px;
}

/* Zeile 3: Navigation */
.custom-navigation {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}

.custom-submit-btn {
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s;
}

.custom-submit-btn:hover {
  opacity: 0.8;
}

/* ------------------------------------- */
/* FRAGEN-STYLING (RADIO-BUTTONS ETC.)   */
/* ------------------------------------- */

/* 2er Grid für Radio-Listen */
.list-radio .answers-list,
.list-radio-flexible .answers-list,
.question-container[class*="list-radio"] .answers-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {

  .list-radio .answers-list,
  .list-radio-flexible .answers-list,
  .question-container[class*="list-radio"] .answers-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Weiße Boxen für Radio-Items */
.list-radio .form-check,
.question-container[class*="list-radio"] .form-check,
.list-radio .answer-item,
.question-container[class*="list-radio"] .answer-item {
  background-color: #ffffff !important;
  padding: 14px 30px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
}

/* Label Anpassung innerhalb der weißen Boxen */
.list-radio .form-check-label,
.question-container[class*="list-radio"] .form-check-label,
.list-radio .answer-item label,
.question-container[class*="list-radio"] .answer-item label {
  color: var(--schwarz, #161616) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm, 16px) !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: var(--line-height-sm, 24px) !important;
  letter-spacing: var(--letter-spacing-default, 0) !important;
  padding-left: 15px !important;
  margin: 0 !important;
  cursor: pointer;
  width: 100%;
}

/* Textarea und allgemeine Text-Inputs Styling aus Figma */
.question-container input[type="text"],
.question-container textarea {
  color: var(--schwarz, #161616) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm, 16px) !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: var(--line-height-sm, 24px) !important;
  letter-spacing: var(--letter-spacing-default, 0) !important;
}

/* Radio Button Input Kreis */
.list-radio .form-check-input,
.question-container[class*="list-radio"] .form-check-input,
.list-radio .answer-item input[type="radio"],
.question-container[class*="list-radio"] .answer-item input[type="radio"] {
  margin-top: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  width: 1.5em !important;
  height: 1.5em !important;
  border-radius: 50% !important;
  background-color: #ffffff;
}

/* Störende Limesurvey-Hinweistexte (z.B. lila Validierung) und Sternchen (Pflicht) ausblenden */
.ls-questionhelp,
.question-help-container,
.question-valid-container,
.asterisk {
  display: none !important;
}

/* Fragestellung groß und fett formatieren */
.ls-question-text {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 30px;
  display: block;
}

.question-container .ls-label-question {
    color: #161616;
    font-size: 20px;
    font-family: "PT Serif", serif;
    line-height: 28px;
    margin-bottom: 32px;
    font-weight: normal;
}


.radio-item label::before {
    left: 5px;
    top: 4px;
}

.radio-item label::after {
    position: absolute;
    left: 8px;
    top: 7px;
}

.statsNumRecords.public-stats__num-records {
    display: none;
}

/*#loading-overlay::after {
    content: "";
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    display: block;
    margin-top: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}*/

header#survey-nav {
    display: none;
}

form#limesurvey {
    max-width: 1096px;
    margin: 0 auto;
}

.public-stats__content {
    display: none;
}