/* =========================================================
   QUIZ WRAPPER
   - Zentriert das Quiz
   - Begrenzt die maximale Breite
   ========================================================= */
.cqs-quiz{
  max-width: 70rem;
  margin: 0 auto;
}


/* =========================================================
   QUIZ PANEL (Card-Look für den gesamten Step)
   - Weißer Hintergrund
   - Abgerundete Ecken
   - Schatten für visuelle Trennung
   ========================================================= */
.cqs-quiz .cqs-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 1.875rem;          /* 30px */
  box-shadow: 0 0.875rem 2.5rem rgba(0,0,0,.10);
  padding: 3rem 3rem 2.5rem;
}


/* =========================================================
   FRAGE (h3)
   - Typografie laut CI
   - Linksbündig
   - Barrierefrei (rem)
   ========================================================= */
.cqs-quiz h3.cqs-question{
  font-family:"FF DIN Pro Bold", sans-serif;
  color:#0019b0;
  font-size:2.5rem;                 /* 40px */
  line-height:2.875rem;
  margin:0 0 1.875rem;
  text-align:left;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  overflow-wrap:break-word;
  word-break:normal;
}


/* =========================================================
   PFLICHTSTERN
   - Im Quiz ausgeblendet
   ========================================================= */
.cqs-quiz .cqs-req{
  display:none;
}


/* =========================================================
   ANTWORT-GRID
   - Desktop & Tablet: 3 Spalten
   ========================================================= */
.cqs-quiz .cqs-options{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.25rem;                      /* 20px */
}


/* =========================================================
   ANTWORT-CARD (Label)
   - Klickfläche für Radio
   - Linksbündiger Inhalt
   ========================================================= */
.cqs-quiz .cqs-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.875rem;                     /* 14px */
  padding:1.375rem 1.5rem;          /* 22px 24px */
  border:2px solid rgba(0,25,176,.25);
  border-radius:1.875rem;           /* 30px */
  cursor:pointer;
  text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}


/* =========================================================
   RADIO INPUT (barrierefrei versteckt)
   - Nicht sichtbar
   - Aber fokussierbar & lesbar für Screenreader
   ========================================================= */
.cqs-quiz .cqs-card input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}


/* =========================================================
   ANTWORTTEXT
   - Typografie laut CI
   ========================================================= */
.cqs-quiz p.cqs-card-text{
  font-family:"FF DIN Pro Regular", sans-serif;
  color:#0019b0;
  font-size:1.25rem;                /* 20px */
  line-height:1.4;
  margin:0;
}


/* =========================================================
   HOVER-STATE
   - Visuelles Feedback bei Maus-Nutzung
   ========================================================= */
.cqs-quiz .cqs-card:hover{
  border-color:#0019b0;
  box-shadow:0 0 0 3px rgba(0,25,176,.12);
}


/* =========================================================
   SELECTED-STATE (Radio checked)
   - Wird per JS gesetzt (.is-selected)
   ========================================================= */
.cqs-quiz .cqs-card.is-selected{
  border-color:#0019b0;
  box-shadow:0 0 0 4px rgba(0,25,176,.18);
}


/* =========================================================
   KEYBOARD-FOCUS (WCAG)
   - Sichtbarer Fokus beim Tabben
   ========================================================= */
.cqs-quiz .cqs-card:focus-within{
  outline:none;
  border-color:#0019b0;
  box-shadow:0 0 0 0.25rem rgba(0,25,176,.22);
}


/* =========================================================
   MOBILE
   - 1 Spalte
   - Angepasste Schriftgrößen
   ========================================================= */
@media (max-width: 900px){

  .cqs-quiz h3.cqs-question{
    font-size:2.063rem;
    line-height:2.375rem;
  }

  .cqs-quiz p.cqs-card-text{
    font-size:1.25rem;
    line-height:1.682rem;
  }

  .cqs-quiz .cqs-options{
    grid-template-columns:1fr;
  }
}