/* ============================================================
   cd_faq — Fragen und Antworten
   ============================================================
   Zwei Spalten im Verhaeltnis 9 : 16 (im Entwurf .72fr : 1.28fr).
   Links bleibt der Kopf beim Blaettern stehen, rechts laeuft das
   Akkordeon durch.

   Das Akkordeon selbst kommt aus komponenten.css
   (.cd-akkordeon__*). Hier steht nur, was diese Bahn zusaetzlich
   braucht — vor allem der Umstand, dass die Fragen <details> und
   <summary> sind und nicht ein <button> mit aria-expanded. Ein
   <summary> traegt in den Browsern eine eigene Listenmarke; die
   muss weg, sonst steht ein zweites Zeichen neben dem Plus.
   ============================================================ */

/* Weisser Grund wie im Entwurf. Die Bahn stand vorher auf der
   getoenten Flaeche; damit trug sie eine Betonung, die ihr im
   Seitenaufbau nicht zusteht — sie ist der ruhige Abschluss vor dem
   Abschlussband, nicht dessen Vorstufe. Die Haarlinie oben bleibt:
   ohne sie liefe sie in die vorhergehende Bahn hinein. */
.cd-faq {
  background: var(--cd-weiss);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-faq__raster {
  display: grid;
  /* minmax(0, …) statt blossem fr: 1fr meint minmax(auto, 1fr)
     und waechst mit einer langen Frage ueber die Spalte hinaus. */
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  gap: var(--cd-a8);
  align-items: start;
}

/* ------------------------------------------------------------
   Linke Spalte
   ------------------------------------------------------------ */
.cd-faq__seite {
  position: sticky;
  /* Abstand zur festen Kopfleiste — sonst schiebt sich der Titel
     darunter (WCAG 2.4.11). */
  inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}

/* :not(.cd-nurlesen), damit der Abstand die Regeln des visuell
   versteckten Titels nicht anfasst. Bahnen werden nach
   basis.css geladen und wuerden dessen margin sonst ueberschreiben. */
.cd-faq__titel:not(.cd-nurlesen) {
  margin-block-end: var(--cd-a5);
}

.cd-faq__beitext {
  color: var(--cd-text-2);
  font-size: var(--cd-gr-gross);
  margin-block-end: var(--cd-a6);
}
.cd-faq__beitext p + p { margin-block-start: var(--cd-a3); }

/* ------------------------------------------------------------
   Rechte Spalte — das Akkordeon
   ------------------------------------------------------------ */
.cd-faq__liste {
  border-block-start: 1px solid var(--cd-linie-2);
}

/* Die Marke des <summary> abraeumen: einmal ueber list-style
   (Firefox und Chrome ab 121) und einmal ueber das alte
   WebKit-Pseudoelement fuer Safari. */
.cd-faq__frage {
  list-style: none;
  transition: color var(--cd-zeit) ease;
}
.cd-faq__frage::-webkit-details-marker { display: none; }
.cd-faq__frage:hover { color: var(--cd-rot); }

/* Der Titel darf umbrechen, das Zeichen nicht mitwandern. */
.cd-faq__frageText { min-inline-size: 0; }

.cd-faq__antwort {
  padding-inline-end: var(--cd-a8);
}
.cd-faq__antwort p + p { margin-block-start: var(--cd-a3); }
.cd-faq__antwort ul {
  display: grid;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a3);
  padding: 0;
  list-style: none;
}
.cd-faq__antwort li { padding-inline-start: var(--cd-a4); position: relative; }
.cd-faq__antwort li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 6px;
  block-size: 1px;
  background: var(--cd-rot);
}

/* ============================================================
   Bis 1100 px — der Kopfbereich ist nur noch eine Zeile
   ============================================================ */
@media (max-width: 1100px) {
  .cd-faq__seite {
    /* dieselben 96 px wie das scroll-padding in basis.css */
    inset-block-start: calc(96px + var(--cd-a5));
  }
  .cd-faq__raster { gap: var(--cd-a7); }
}

/* ============================================================
   Bis 900 px — einspaltig
   ============================================================ */
@media (max-width: 900px) {
  .cd-faq__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
  }
  /* Stehenbleiben ergibt einspaltig keinen Sinn — der Kopf wuerde
     ueber den Fragen kleben. */
  .cd-faq__seite { position: static; }
  .cd-faq__antwort { padding-inline-end: 0; }
}


/* ------------------------------------------------------------
   Marken unter der Antwort
   ------------------------------------------------------------
   Kurze Angaben, im Entwurf die Preisspannen unter der
   Budgetfrage. Umrandet und in der Schreibmaschinenschrift wie die
   Schlagworte im Kartenraster — sie sind Angaben und keine Knoepfe,
   deshalb ohne Flaeche und ohne Zeigerhand.
   ------------------------------------------------------------ */
/* Zwei Klassen im Selektor, und das mit Absicht: die Regeln fuer
   Aufzaehlungen im Antworttext stehen weiter oben als
   ".cd-faq__antwort ul" und ".cd-faq__antwort li". Die wiegen
   schwerer als eine einzelne Klasse — mit ".cd-faq__marken" allein
   blieb die Liste ein Raster und jede Marke behielt ihren roten
   Strich. */
.cd-faq__antwort .cd-faq__marken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  margin-block: var(--cd-a4) 0;
  padding-inline-start: 0;
  list-style: none;
}

.cd-faq__antwort .cd-faq__marke {
  padding: 10px 16px;
  border: 1px solid var(--cd-linie-2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  white-space: nowrap;
}

/* Der Strich gehoert zur Aufzaehlung im Fliesstext, nicht hierher. */
.cd-faq__antwort .cd-faq__marke {
  padding-inline-start: 16px;
  position: static;
}
.cd-faq__antwort .cd-faq__marke::before { content: none; }


/* Der Nachsatz unter den Marken
   ------------------------------------------------------------
   Zwei Klassen aus demselben Grund wie bei den Marken darueber:
   `.cd-faq__antwort p + p` setzt einen Absatzabstand, der hier
   nicht gemeint ist — der Nachsatz haengt an der Markenreihe und
   nicht am Fliesstext.

   --cd-text-3 und nicht --cd-text-schwach: Letzteres traegt auf
   hellem Grund keinen Text (3,07 : 1 auf Weiss). */
.cd-faq__antwort .cd-faq__nachsatz {
  margin-block-start: var(--cd-a3);
  font-size: var(--cd-gr-klein);
  line-height: 1.6;
  color: var(--cd-text-3);
}