/* ==========================================================================
   FAQ-AUFKLAPPER - EIN Bauteil fuer alle Seiten mit Fragen und Antworten
   Am 29.08.2026 aus pages/faq.css hierher gezogen, weil die Ausbildungsseite
   dieselben Aufklapper braucht. Dritte Auslagerung dieser Art im Projekt nach
   knopf.css und stellenliste.css - immer aus demselben Grund: eine Bauform,
   die auf einer zweiten Seite gebraucht wird, gehoert nicht in eine
   Seitendatei. Wer hier etwas aendert, aendert /faq/ UND
   /karriere/ausbildung/.

   HIER STEHT NUR DAS BAUTEIL. Seitenkopf .fkopf, Themengruppen .faqg und
   Abschluss .faqhilfe sind seitenspezifisch und bleiben in pages/faq.css.
   ========================================================================== */

/* --- Aufklapper --------------------------------------------------------- */
/* Die Liste laeuft ueber Haarlinien, nicht ueber Karten: einundzwanzig Karten
   mit Schatten waeren ein Kachelfeld, und der Blick muesste bei jeder Frage
   neu ansetzen. Eine Linie je Zeile fuehrt den Blick nach unten. */
.faqliste {
  max-width: 46rem;
  border-top: 1px solid var(--line);
}
.faqf { border-bottom: 1px solid var(--line); }

.faqf__frage {
  position: relative;
  display: block;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) 0;
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
  cursor: pointer;
  /* Beides noetig: der eigene Marker sitzt in Safari und Chrome an
     verschiedenen Stellen im Baum. */
  list-style: none;
  transition: color var(--dur-hover) var(--ease-hover);
}
.faqf__frage::-webkit-details-marker { display: none; }
.faqf__frage:hover { color: var(--toem-gold); }

/* Das Zeichen rechts: zwei Balken als Plus, beim Aufklappen dreht der
   senkrechte Balken in den waagerechten und es wird ein Minus. Eine
   Vierteldrehung statt zweier Zustaende - dadurch braucht es keine zweite
   Farbe und keinen Austausch von Grafik.

   MARKENBLAU, nicht Gold. Das Zeichen ist ein Bedienelement und faellt damit
   unter die Drei-zu-eins-Schwelle fuer Nichttext (WCAG 1.4.11). Reines Gold
   auf hellem Grund haelt gemessen 1.79:1 - als Flaeche und als Zierde
   getragen, als Bedienzeichen nicht. Gold bleibt der Hover-Zustand. */
.faqf__frage::before,
.faqf__frage::after {
  content: "";
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  width: 0.875rem;
  height: 0.125rem;
  background: currentColor;
  transform: translateY(-50%);
}
.faqf__frage::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.faqf[open] > .faqf__frage::after { transform: translateY(-50%) rotate(0deg); }
/* KEIN GOLD FUER DIE OFFENE FRAGE. Erste Fassung faerbte sie golden - gemessen
   1.79:1 bei 18 px und Gewicht 600, also klar unter der Schwelle, und anders
   als beim Gold in Zierde und Flaechen ist das ein Dauerzustand von Text.
   Der offene Zustand braucht die Farbe auch nicht: das Zeichen steht auf
   Minus und die Antwort ist sichtbar. Gold bleibt dem Hover vorbehalten, der
   vorbeigeht und nie der einzige Hinweis ist. */

/* Das Zeilenmass sitzt an den ABSAETZEN, nicht am Behaelter. Vorher trug der
   Behaelter max-width: 42rem - dann lief die Linie ueber dem Verweis bis 42rem
   und die Haarlinie der Zeile bis 46rem, zwei Kanten kurz hintereinander, die
   nach Versehen aussehen. So spannt der Behaelter die Zeilenbreite und nur der
   Text ist begrenzt.
   36rem statt 42rem: bei 42rem lief die Zeile auf 82 Zeichen, gemessen an der
   ersten Antwort. Lesbar ist 65 bis 75. */
.faqf__antwort {
  /* Kein rechtes Polster: das Plusminus-Zeichen sitzt in der Fragezeile, nicht
     hier. Mit sp-7 endete der Behaelter 48 px vor der Haarlinie der Zeile, und
     die Linie ueber dem Verweis damit auch. */
  padding: 0 0 var(--sp-5);
}
.faqf__antwort p,
.faqf__antwort ul {
  /* 34rem sind gemessen 544 px und damit rund 72 Zeichen. 36rem lief auf 77. */
  max-width: 34rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.faqf__antwort > :last-child { margin-bottom: 0; }
.faqf__antwort ul {
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.faqf__antwort strong { color: var(--text-body); font-weight: 600; }
/* Keine Unterstriche, siehe Projektregel vom 28.08.2026. */
.faqf__antwort a {
  color: var(--toem-blau);
  font-weight: 600;
  transition: color var(--dur-hover) var(--ease-hover);
}
.faqf__antwort a:hover,
.faqf__antwort a:focus-visible { color: var(--toem-gold); }

/* Der Verweis auf eine andere Frage. Er steht abgesetzt unter der Antwort,
   damit er nicht als Teil des Sachtextes gelesen wird. */
.faqf__weiter a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--toem-blau);
  font-weight: 600;
  transition: color var(--dur-hover) var(--ease-hover);
}
.faqf__weiter a:hover,
.faqf__weiter a:focus-visible { color: var(--toem-gold); }
.faqf__weiter svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; }
/* Der Verweis ist selbst ein <p> in der Antwort und wuerde deshalb das
   Zeilenmass von oben erben. Seine Linie soll aber die Zeile spannen und mit
   der Haarlinie darunter auf derselben Kante enden - eine Kante statt zwei. */
.faqf__antwort .faqf__weiter {
  /* Zwei Klassen, damit die Regel gegen .faqf__antwort p gewinnt: eine
     Klasse plus ein Element schlaegt eine Klasse allein. Mit dem bloßen
     .faqf__weiter blieb das Zeilenmass von oben stehen, gemessen 544 statt
     736 px. */
  max-width: none;
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-200);
  color: var(--text-muted);
}