/* ==============================================================
   faq.css  ·  Besitzer: P10 Fragen & FAQ  ·  v4 „Passer“ (25.09.2026)
   Plan 8.6 K70 (gemeinsame FAQ-Liste) + K60 (Seite /fragen.php), 11.9.
   Nur Tokens (tokens.css), keine eigenen Farben, Radien, Schatten, Easings.
   Der v3-Altbestand (graue Kaesten, Container-Query) ist zurueckgebaut.

   Inhalt
     1 K70 FAQ-Liste (Start, Fragen, Leistungs-, Staedte-, Regionsseite)
     2 K60 /fragen.php: Hero mit Passer-Zahl
     3 K60 Themenleiste (Desktop sticky, mobil Chip-Reihe) + Suchfeld
     4 K60 Themenkapitel
   ============================================================== */

/* ---- 1 K70 FAQ-Liste --------------------------------------------
   MARKUP (fest, von allen Seiten genutzt; nichts anderes noetig):
     <dl class="faq">                         Standard: 1 Spalte, ab ~53rem
       <div class="faq-paar" id="frage-…">    Platz 2 Spalten (Raster misst
         <dt>Frage</dt>                       sich selbst, auto-fit)
         <dd>Antwort</dd>
       </div>
     </dl>
     <dl class="faq faq-kurz">                Fragen-Anreisser Start (3 Paare):
                                              ab 60rem 3 Spalten, sonst 1
   Offene Liste, Antwort zuerst, Haarlinie statt Kasten (Plan K70). Oben
   links sitzt der Fehlregister-Strich (Cyan-Platte + Magenta-Haar) auf der
   Linie - dieselbe Marke wie am Kicker. Ein Paar, das per Anker (#frage-…)
   angesprungen wird, bekommt die Wash-Flaeche.
   Funktioniert auf jeder Flaeche (.f-papier/.f-licht/.f-wash, .schild),
   weil nur Tokens der jeweiligen Buehne benutzt werden. */
.faq{
  margin:0;padding:0;
  display:grid;gap:0 clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}
/* Abstand zur Einleitung und zur Knopfreihe (Margins kollabieren mit dem
   Abstand, den die Seite selbst setzt - es gilt der groessere). */
:is(h2, .sub, p) + .faq{margin-top:clamp(1.25rem, 1rem + 1vw, 2rem)}
.faq + .cta-row{margin-top:clamp(1.25rem, 1rem + 1vw, 2rem)}
/* (0,2,0) und nach leistung.css geladen: schlaegt die Karten-Bruecke
   .l-fremd :is(.faq-paar) (Aenderungswunsch an P7, dort zu streichen). */
.faq .faq-paar{
  position:relative;min-width:0;
  margin:0;padding:1.15rem 0 1.35rem;
  background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;
  scroll-margin-top:1rem;   /* + scroll-padding-top des sticky Kopfs (kopf.css, P1) */
}
.faq .faq-paar::before{
  content:"";position:absolute;left:0;top:-2px;width:28px;height:3px;
  background:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
.faq dt{
  font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;
  font-size:clamp(1.125rem, 1.03rem + .4vw, 1.375rem);   /* 18,6 / 22 px bei 390 / 1440 */
  line-height:1.25;letter-spacing:-.005em;
  color:var(--text);margin:0 0 .45rem;max-width:44ch;
  text-wrap:balance;hyphens:manual;
}
.faq dd{
  margin:0;color:var(--muted);max-width:62ch;
  font-size:inherit;line-height:1.58;
}
.faq dd a{color:var(--accent-text)}
/* Mobil etwas dichter (Laengenbudget Plan 7): Antwort 16 px, Zeilenhoehe 1,55 -
   innerhalb der Lesbarkeits-Spanne, 31 Paare sparen so gut einen Bildschirm. */
@media (max-width:47.99rem){
  .faq .faq-paar{padding:1rem 0 1.15rem}
  .faq dd{font-size:1rem;line-height:1.55}
}
/* Angesprungenes Paar: Wash ueber die volle Breite der Spalte, ohne dass
   sich etwas verschiebt (Schatten statt Innenabstand). */
.faq .faq-paar:target{
  background:var(--wash);
  box-shadow:-.9rem 0 0 var(--wash), .9rem 0 0 var(--wash);
}
.faq .faq-paar:target::before{width:56px}
.ohne-deko .faq .faq-paar::before{display:none}

/* Anreisser auf der Startseite: drei Paare nebeneinander, erst ab 60rem
   (darunter eine Spalte - nie 2 + 1 verwaist). */
.faq.faq-kurz{grid-template-columns:minmax(0,1fr)}
@media (min-width:60rem){
  .faq.faq-kurz{grid-template-columns:repeat(3, minmax(0,1fr))}
}

/* ---- 2 K60 Hero ------------------------------------------------- */
.fr-hero{padding-block:clamp(1.25rem, .9rem + 1.6vw, 2.25rem) var(--abstand-klein)}
.fr-hero-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.25rem, .8rem + 2vw, 3rem);align-items:end}
.fr-hero-innen > *{min-width:0}
.fr-hero .brotkrumen{padding:0;margin:0 0 clamp(1.25rem, 1rem + 1.2vw, 2.25rem)}
.fr-hero h1{margin-bottom:1.1rem}
.fr-lead{margin:0 0 1.9rem}
.fr-hero .micro{margin-top:.8rem}
/* Passer-Zahl: gezaehlte Fragen, Platten kommen beim Scrollen in Deckung
   (--p aus kern.js). Mobil klein in einer Zeile, ab 60rem gross rechts. */
.fr-zahl{
  display:flex;align-items:baseline;gap:.9rem;margin:0;
}
.fr-zahl .passer-zahl{font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem);line-height:.95;letter-spacing:-.02em}
.fr-zahl-text{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
@media (min-width:60rem){
  .fr-hero-innen{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .fr-zahl{flex-direction:column;align-items:flex-start;gap:1.1rem;justify-self:end;padding-bottom:.6rem}
  .fr-zahl .passer-zahl{font-size:clamp(4.25rem, 2.4rem + 8.2vw, 10.5rem);line-height:.8;letter-spacing:-.035em}
}

/* ---- 3 K60 Themenleiste ------------------------------------------
   Mobil: Chips brechen um (kein Wisch-Scroller - der braeuchte ein
   fokussierbares Label, und fuenf Chips passen in zwei, drei Zeilen).
   Ab 80rem: sticky direkt unter dem sticky Kopf (--kopf-h aus kopf.css, P1).
   Anker: html hat scroll-padding-top = Kopf (P1); die Kapitel legen die
   Hoehe der Themenleiste als scroll-margin-top oben drauf. */
.fr-leiste{background-color:var(--flaeche-licht);border-bottom:1px solid var(--line)}
.fr-leiste-innen{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;padding-block:1.1rem}
.fr-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 34rem;min-width:0}
.fr-chips li{margin:0;min-width:0}
.fr-chip{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .8rem .45rem .65rem;
  border:1px solid var(--border-feld);border-radius:var(--r-chip);
  background-color:var(--flaeche-licht);color:var(--text);text-decoration:none;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.9375rem;line-height:1.2;letter-spacing:.02em;
  transition:background-color var(--t-kurz) var(--ease),border-color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease);
}
.fr-chip-symbol{width:1.25rem;height:1.25rem;flex:0 0 auto;color:var(--accent-text)}
/* Mobil ohne Piktogramm: so passen die fuenf Chips in drei statt fuenf Zeilen */
@media (max-width:47.99rem){
  .fr-chip{padding-inline:.7rem;gap:.4rem}
  .fr-chip-symbol{display:none}
}
.fr-anzahl{
  font-size:.875rem;color:var(--muted);
  padding-left:.5rem;border-left:1px solid var(--line-2);
}
@media (hover:hover) and (pointer:fine){
  .fr-chip:hover{background-color:var(--wash);border-color:var(--accent-text)}
}
/* Aktuelles Kapitel (fragen.js setzt aria-current beim Scrollen) */
.fr-chip[aria-current="true"]{border-color:var(--accent-text);box-shadow:3px 3px 0 var(--platte)}
.fr-chip[aria-current="true"] .fr-chip-name{color:var(--accent-text)}
.fr-chips li[hidden]{display:none}

/* Suchfeld: nur mit JS sichtbar (hidden im Markup, fragen.js gibt frei) */
.fr-filter{display:flex;flex-direction:column;gap:.35rem;flex:1 1 16rem;max-width:26rem;min-width:0}
.fr-filter[hidden]{display:none}
.fr-filter-label{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.fr-suche{
  width:100%;min-height:48px;padding:.6rem .9rem;
  font:inherit;font-size:1rem;color:var(--text);background-color:var(--flaeche-licht);
  border:1px solid var(--border-feld);border-radius:var(--r-knopf);
}
.fr-suche::placeholder{color:var(--muted);opacity:1}
.fr-suche:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}

@media (min-width:64rem){
  .fr-leiste-innen{padding-block:.75rem;gap:.75rem 1.5rem}
  .fr-chips{flex:0 1 auto;gap:.4rem}
  .fr-chip{font-size:.875rem;padding:.4rem .7rem .4rem .6rem;gap:.45rem}
  .fr-filter{flex:1 1 14rem;max-width:22rem;gap:.25rem}
}
/* Sticky erst, wenn Chips und Suchfeld in EINE Zeile passen (gemessen:
   bei 1024 px zwei Zeilen = 150 px Dauerleiste, zu viel). */
@media (min-width:80rem){
  .fr-leiste{position:sticky;top:var(--kopf-h, 0px);z-index:20}
  .fr-leiste-innen{flex-wrap:nowrap}
  .fr-filter{margin-left:auto}
}

/* ---- 4 K60 Themenkapitel ------------------------------------------ */
.fr-inhalt{padding-block:clamp(1.75rem, 1.2rem + 2vw, 3rem) var(--abstand)}
.fr-status{margin:0;color:var(--muted);font-size:1rem}
.fr-status:empty{display:none}
.fr-status:not(:empty){margin-bottom:1.25rem}
.fr-leer{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;margin:0 0 2rem}
.fr-leer[hidden]{display:none}
.fr-leer p{margin:0;font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;font-size:1.25rem}

.fr-kapitel{scroll-margin-top:1rem}
.fr-kapitel + .fr-kapitel{margin-top:var(--abstand-klein)}
.fr-kapitel[hidden]{display:none}
.fr-kapitel-kopf{display:flex;align-items:center;gap:1rem;margin:0 0 1.1rem}
.fr-kapitel-kopf h2{margin:0}
/* Piktogramm auf der versetzten Platte (Material „Passer“) */
.fr-platte{
  display:grid;place-items:center;flex:0 0 auto;
  width:2.75rem;height:2.75rem;border-radius:var(--r-bogen);
  background-color:var(--flaeche-licht);border:1px solid var(--line-2);
  box-shadow:4px 4px 0 var(--platte), -3px -3px 0 -2px var(--haar);
  color:var(--accent-text);
}
.fr-symbol{width:1.6rem;height:1.6rem}
.ohne-deko .fr-platte{box-shadow:none}
.faq-paar[hidden]{display:none}

@media (min-width:80rem){
  /* Anker springen unter die sticky Themenleiste (gemessen 95 px hoch) */
  .fr-kapitel,.fr-kapitel .faq-paar{scroll-margin-top:6.75rem}
}