/* ============================================================
   HÄUFIGE FRAGEN — „Es gibt keine dumme Frage."

   Alle Farben, Abstände, Radien und Kurven kommen aus tokens.css, das
   diese Seite selbst einbindet (wie greenfee.php). Keine neue Farbe.

   Präfix fq-, weil seite.css generische Namen belegt.
   ============================================================ */

/* Muss ganz oben stehen: Jede eigene display-Regel schlüge sonst das
   hidden-Attribut, und gefilterte Fragen blieben sichtbar. */
[hidden]{display:none !important}

/* Ohne JavaScript bleiben .reveal-Elemente sonst auf opacity:0 stehen —
   seite.js setzt die Klasse .sichtbar, und ohne Skript setzt sie niemand.
   Damit wären Kapitelköpfe, Kontaktkarten und die ehrliche Zeile schlicht
   unsichtbar. Die Regel steht hier und nicht in seite.css, weil dort nur
   sieben von 22 Seiten die js-Klasse setzen: global würde sie auf allen
   übrigen Seiten die Einblendung abschalten. (Befund vom 15.08.2026 —
   gilt für die ganze Website und gehört in einem eigenen Durchgang
   aufgeräumt.) */
html:not(.js) .reveal{opacity:1;transform:none}

/* ------------------------------------------------------------
   GEERBTER BLOCKTYP: prcta (Abschluss-CTA von den Platzregeln)
   Seine Stile liegen in platzregeln.css/platzreife.css — auf einer neuen
   Seite müssen sie mitkopiert werden, sonst steht der Abschluss ungestylt
   auf Weiß, samt Lime-Button auf hellem Grund (1,9:1 Kontrast).
   ------------------------------------------------------------ */
.prcta{background:var(--tanne);color:#fff;padding:var(--luft) var(--inset);display:flex;
  align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap}
.prcta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5vw,76px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.045em;line-height:.92;color:#fff}
.prc-text{color:rgba(255,255,255,.72);margin-top:18px;max-width:52ch}
/* Abweichung zu den anderen Seiten: hier stehen zwei Knöpfe (erst der
   Kurs, dann die Mitgliedschaft) — die liegen nebeneinander, die
   Prämienzeile darunter. */
.prc-aktion{display:flex;flex-wrap:wrap;gap:14px;align-items:center;max-width:520px}
.prc-neben{flex-basis:100%;color:rgba(255,255,255,.62);font-size:14px;line-height:1.55}
.prc-neben a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.prc-neben a:hover{color:var(--lime)}

/* ------------------------------------------------------------
   01 · SEITENKOPF — leise: kein Bild, kein Video
   ------------------------------------------------------------ */
.seitenhero-leise{background:var(--pine);min-height:var(--buehne-min)}
.seitenhero-leise::after{background:none}
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:14ch}
.seitenhero-leise .hero-unten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}

/* ------------------------------------------------------------
   02 · DIE SECHS FLÄCHEN
   Raster 3 × 2, scharfkantig (--r-flaeche). Die geöffnete Fläche wächst
   auf volle Breite — das ist eine reine Grid-Regel, kein Skript.
   ------------------------------------------------------------ */
.fq-gruende{padding-top:var(--luft);padding-bottom:var(--luft)}
.fq-raster{margin:0 var(--inset);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline)}

.fq-grund{background:var(--weiss);border-radius:var(--r-flaeche);min-width:0}
.fq-grund[open]{grid-column:1/-1;background:var(--tanne)}

/* Die Fläche selbst ist das <summary> — ein Bedienelement, das der
   Browser führt: Tastatur, aria-expanded und Aufklappen ohne eine Zeile
   JavaScript. Der Marker wird ersetzt, nicht versteckt. */
.fq-flaeche{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;min-height:190px;padding:26px 24px 22px;
  transition:background var(--t-schnell),color var(--t-schnell)}
.fq-flaeche::-webkit-details-marker{display:none}
.fq-flaeche:hover{background:var(--mint)}
.fq-flaeche:focus-visible{outline:3px solid var(--gruen);outline-offset:-3px}
.fq-einwand{display:block;color:var(--tinte);font-size:clamp(20px,2vw,27px);max-width:16ch}
.fq-flaeche-fuss{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.fq-anzahl{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.fq-auf{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen)}

/* Geöffnet: die Fläche wird zur schmalen Kopfleiste — der Einwand steht
   darunter noch einmal, durchgestrichen, er soll nicht zweimal groß da
   stehen. */
.fq-grund[open] .fq-flaeche{flex-direction:row;align-items:center;justify-content:space-between;
  min-height:0;padding:18px 24px;border-bottom:1px solid var(--hairline-dunkel);background:none}
.fq-grund[open] .fq-flaeche:hover{background:rgba(255,255,255,.06)}
.fq-grund[open] .fq-einwand{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.6);max-width:none}
.fq-grund[open] .fq-anzahl{color:rgba(255,255,255,.5)}
.fq-grund[open] .fq-auf{color:var(--lime)}
.fq-auf-offen{display:none}
.fq-grund[open] .fq-auf-zu{display:none}
.fq-grund[open] .fq-auf-offen{display:inline}

/* ------------------------------------------------------------
   03 · DER GEÖFFNETE GRUND
   ------------------------------------------------------------ */
.fq-offen{padding:34px 24px 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:0 46px;align-items:start;color:#fff}
.fq-offen-kopf{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;
  align-items:end;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--hairline-dunkel)}
.fq-widerlegt{min-width:0}
/* Der Strich ist eine eigene Linie: text-decoration lässt sich nicht
   animieren, eine skalierte Linie schon. Der Einwand bleibt dabei über
   der Kontrastgrenze lesbar — auch durchgestrichen. */
.fq-durch{position:relative;display:inline-block}
.fq-durch-text{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;font-size:clamp(22px,2.6vw,34px);color:rgba(255,255,255,.72)}
.fq-durch-text:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.fq-strich{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--t-lang) var(--ease)}
.fq-grund[open] .fq-strich{transform:scaleX(1)}
.fq-kurz{margin-top:14px;color:rgba(255,255,255,.76);max-width:52ch}
.fq-gegenzahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px;flex:none}
.fq-zahl{font-size:clamp(52px,7vw,92px);line-height:.86;color:var(--lime)}
.fq-gegenzahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);max-width:22ch}

.fq-offen-fragen{min-width:0}
.fq-beleg{align-self:end;margin:0}
.fq-beleg img{display:block;width:100%;height:auto;border-radius:var(--r-flaeche)}
.fq-plakette{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;
  border:1px solid var(--hairline-dunkel)}
.fq-plakette span{font-family:'Space Grotesk',sans-serif;font-size:64px;font-weight:700;
  letter-spacing:-.05em;color:rgba(255,255,255,.14)}

/* ------------------------------------------------------------
   FRAGEN (beide Orte: im geöffneten Grund und im Nachschlageteil)
   ------------------------------------------------------------ */
.fq-frage{border-top:1px solid var(--hairline)}
.fq-frage summary{list-style:none;cursor:pointer;position:relative;padding:18px 44px 18px 0;
  font-family:'Space Grotesk',sans-serif;font-size:clamp(15px,1.5vw,18px);font-weight:700;
  letter-spacing:-.01em;color:var(--tinte);transition:color var(--t-schnell)}
.fq-frage summary::-webkit-details-marker{display:none}
.fq-frage summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;
  margin-top:-7px;border:2px solid var(--gruen);border-top:0;border-left:0;transform:rotate(45deg);
  transition:transform var(--t-mittel) var(--ease)}
.fq-frage[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.fq-frage summary:hover{color:var(--gruen)}
.fq-frage summary:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
.fq-antwort{padding:0 44px 22px 0;max-width:78ch}
.fq-antwort p{color:var(--text)}
.fq-weiter{margin-top:12px}
.fq-weiter a{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gruen);border-bottom:1px solid currentColor;padding-bottom:2px}
.fq-weiter a:hover{color:var(--tanne)}

/* Auf Dunkel (im geöffneten Grund) dreht sich die Farbwelt. */
.fq-offen .fq-frage{border-top-color:var(--hairline-dunkel)}
.fq-offen .fq-frage summary{color:#fff}
.fq-offen .fq-frage summary::after{border-color:var(--lime)}
.fq-offen .fq-frage summary:hover{color:var(--lime)}
.fq-offen .fq-frage summary:focus-visible{outline-color:var(--lime)}
.fq-offen .fq-antwort p{color:rgba(255,255,255,.78)}
.fq-offen .fq-weiter a{color:var(--lime)}
.fq-offen .fq-weiter a:hover{color:#fff}

/* ------------------------------------------------------------
   FACHBEGRIFFE IN DEN ANTWORTEN
   Ohne Skript ein Sprung nach Abschnitt 04, mit Skript öffnet die
   Erklärung an Ort und Stelle. Der Erklärtext steht nur einmal auf der
   Seite (im Glossar), nicht 48-mal in den Antworten.
   ------------------------------------------------------------ */
.fq-fach{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--gruen);
  text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:help}
.fq-fach:hover{text-decoration-style:solid;color:var(--gruen)}
.fq-offen .fq-fach{text-decoration-color:var(--lime)}
.fq-offen .fq-fach:hover{color:var(--lime)}
.fq-fach:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
/* Die aufgeklappte Erklärung: grid-template-rows 0fr → 1fr, damit der
   Absatz weich wächst und die Zeile mit dem Begriff nicht springt. */
.fq-fach-auf{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mittel) var(--ease)}
.fq-fach-auf[data-offen="1"]{grid-template-rows:1fr}
.fq-fach-auf>span{overflow:hidden}
.fq-fach-auf i{display:block;font-style:normal;margin:10px 0 4px;padding:12px 16px;background:var(--mint);
  color:var(--tinte);font-size:14.5px;line-height:1.55;border-left:2px solid var(--gruen)}
.fq-offen .fq-fach-auf i{background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);border-left-color:var(--lime)}

/* ------------------------------------------------------------
   04 · SCHARNIER + 05 · SUCHFELD
   Bahn und Feld sind dasselbe Element in zwei Zuständen. faq.js misst
   beide Rechtecke einmal und faltet die Bahn beim Scrollen über transform
   in das Feld; am Ende fällt die Transformation weg und das Feld nimmt
   seine echte Geometrie an (FLIP). Ohne Skript stehen beide einfach
   untereinander da.
   ------------------------------------------------------------ */
/* Nach der Faltung folgt gleich die Fragenliste — der volle Kapitelabstand
   verdoppelte hier die weiße Fläche, die ohnehin schon aus der Haltestrecke
   kommt. */
.fq-scharnier{padding:0 var(--inset) calc(var(--luft) * .45);scroll-margin-top:88px}
.fq-spur{position:relative}
/* Die Haltestrecke ist nur so lang wie die Faltung dauert. Vorher standen
   hier 96vh: Das Feld war lange fertig gefaltet, und darunter blieb fast
   eine halbe Bildschirmhöhe weiß stehen — auf einem stehenden Screenshot
   sah die Seite an dieser Stelle aus, als fehle etwas. Der Wert hängt mit
   dem Faktor in faq.js zusammen (dort: Höhe − 0,10 × Fensterhöhe): Die
   Differenz ist der Scrollweg der Faltung, hier also 35vh. Gemessen bei
   813 px Fensterhöhe bleiben damit rund 125 px leere Fläche unter der Bahn
   statt der 540 px von vorher. */
.js .fq-spur{min-height:45vh}
.fq-morph{background:var(--mint);padding:26px var(--inset);margin:0 calc(var(--inset) * -1);
  transform-origin:50% 0;will-change:transform}
.js .fq-morph{position:sticky;top:194px;
  transform:scaleX(var(--fq-sx,1)) scaleY(var(--fq-sy,1))}
.fq-morph-innen{transform:scaleX(var(--fq-ix,1)) scaleY(var(--fq-iy,1));transform-origin:50% 0}
/* Mit Skript liegen Bahnzeile und Feld ÜBEREINANDER, nicht untereinander:
   Die Bahn tauscht ihre Beschriftung gegen das Feld, sie schiebt es nicht
   vor sich her. Ohne Skript stehen beide im normalen Fluss untereinander
   und sind beide sichtbar. */
/* minmax(0,1fr): Ein auto-Track nimmt die max-content-Breite seines
   Inhalts an — die waagrecht wischbare Beispielzeile hätte die ganze
   Seite auf 497 px gedrückt und waagrechtes Scrollen erzeugt. */
.js .fq-morph-innen{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:104px}
.js .fq-bahn-text,.js .fq-suchbereich{grid-area:1/1}
.js .fq-suchbereich{opacity:var(--fq-feld-o,1)}
.js .fq-suchform{margin-top:0;width:100%}
.fq-bahn-text{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1;font-size:clamp(22px,3.4vw,44px);color:var(--tinte);text-align:center}
.js .fq-bahn-text{opacity:var(--fq-bahn-o,1)}
/* Ist die Faltung durch, hört das Rechnen auf: echte Geometrie, echtes
   Feld, kein transform mehr auf einem Bedienelement. Das Element bleibt
   dabei kleben — würde es hier auf position:static fallen, spränge es an
   den Anfang der Haltestrecke zurück und wäre aus dem Bild. */
.js .fq-morph.fq-gefaltet{transform:none;background:none;padding:0;margin:0}
.js .fq-morph.fq-gefaltet .fq-morph-innen{transform:none}
.js .fq-morph.fq-gefaltet .fq-bahn-text{display:none}

.fq-suchform{margin:22px auto 0;max-width:860px}
.js .fq-morph:not(.fq-gefaltet) .fq-suchbereich{pointer-events:none}
.fq-such-label{display:block;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gruen);margin-bottom:12px;text-align:center}
.fq-such-zeile{display:flex;gap:10px;align-items:stretch}
/* Kein Systemfeld: Rahmen, Fokusring, Cursorfarbe und Platzhalter sind
   gestaltet. Mindestens 16 px, damit iOS beim Tippen nicht zoomt. */
.fq-input{flex:1;min-width:0;height:64px;padding:0 22px;font-family:'Hanken Grotesk',sans-serif;
  font-size:19px;font-weight:300;color:var(--tinte);background:var(--weiss);
  border:1.5px solid var(--hairline);border-radius:var(--r-flaeche);caret-color:var(--gruen);
  transition:border-color var(--t-schnell),box-shadow var(--t-schnell);-webkit-appearance:none;appearance:none}
.fq-input::placeholder{color:var(--muted);opacity:1}
.fq-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fq-input:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(31,132,70,.22)}
.fq-los{flex:none;height:64px;padding:0 26px;border:0;border-radius:var(--r-pill);background:var(--gruen);
  color:#fff;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:background var(--t-schnell)}
.fq-los:hover{background:var(--tanne)}
.fq-los:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.fq-beispiele{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 0;padding:0;list-style:none}
.fq-beispiele a{display:inline-block;padding:9px 16px;border:1px solid var(--hairline);
  border-radius:var(--r-pill);font-size:14px;color:var(--sekundaer);background:var(--weiss);
  transition:border-color var(--t-schnell),color var(--t-schnell),background var(--t-schnell)}
.fq-beispiele a:hover{border-color:var(--gruen);color:var(--gruen);background:var(--mint)}
.fq-beispiele a:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}

.fq-zaehler{margin-top:16px;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums}

.fq-leer{max-width:640px;margin:30px auto 0;padding:30px 32px;background:var(--mint);text-align:center}
.fq-leer-titel{color:var(--tinte);font-size:clamp(19px,2vw,26px)}
.fq-leer-text{margin-top:12px;color:var(--text)}
.fq-leer-draht{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:20px}
.fq-leer-mail{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------
   06 · ALLE FRAGEN — nach Rubriken
   ------------------------------------------------------------ */
.fq-alle{padding-top:var(--luft);padding-bottom:var(--luft)}
/* Flex, damit der Sofortfilter die Reihenfolge über `order` stellen kann
   (der beste Treffer nach oben) — ohne im DOM umzuhängen. */
.fq-rubriken{margin:0 var(--inset);display:flex;flex-direction:column}
.fq-rubrik{margin-top:var(--luft-s)}
.fq-rubrik:first-child{margin-top:0}
.fq-rubrik-titel{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gruen);padding-bottom:14px;scroll-margin-top:96px}
.fq-liste{border-bottom:1px solid var(--hairline);display:flex;flex-direction:column}
.fq-eintrag{scroll-margin-top:110px}
.fq-eintrag:target{background:var(--mint)}
.fq-eintrag:target summary{padding-left:16px}
.fq-eintrag:target .fq-antwort{padding-left:16px}

/* Beitragstabelle — die einzige Antwort, die als Tabelle länger ist als
   ein Absatz. */
.fq-beitraege{margin-top:22px}
.fq-beitraege-titel{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fq-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fq-tabelle th,.fq-tabelle td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--hairline);
  vertical-align:top}
.fq-tabelle thead th{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--tinte);padding-top:0}
.fq-tabelle tbody th{font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;line-height:1.4;
  color:var(--tinte);padding-left:0}
.fq-tabelle tbody th sup{color:var(--gruen)}
.fq-tabelle td{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--tinte)}
.fq-num{text-align:right;white-space:nowrap}
.fq-beitraege-fuss,.fq-beitraege-stand{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);max-width:70ch}

/* ------------------------------------------------------------
   07 · AUF DEUTSCH GESAGT
   ------------------------------------------------------------ */
.fq-begriffe{background:var(--mint);padding:var(--luft) 0}
.fq-begriffe .kapitel-marke{border-top-color:rgba(20,35,27,.12)}
.fq-glossar{margin:0 var(--inset);display:grid;gap:1px;background:rgba(20,35,27,.12);
  border-top:1px solid rgba(20,35,27,.12);border-bottom:1px solid rgba(20,35,27,.12)}
.fq-glossar-paar{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;
  background:var(--mint);padding:18px 0;scroll-margin-top:110px}
.fq-glossar-paar:target{background:var(--weiss)}
.fq-glossar dt{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--tinte)}
.fq-glossar dd{margin:0;color:var(--text);max-width:64ch}

/* ------------------------------------------------------------
   08 · FRAG EINEN MENSCHEN
   ------------------------------------------------------------ */
.fq-kontakt{background:var(--tanne);color:#fff;padding:var(--luft) 0}
.fq-kontakt-raster{margin:0 var(--inset);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--hairline-dunkel);border-top:1px solid var(--hairline-dunkel);
  border-bottom:1px solid var(--hairline-dunkel)}
.fq-kontakt-karte{background:var(--tanne);padding:28px 26px 30px}
.fq-kontakt-karte h3{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.fq-zeiten{margin-top:16px;display:grid;gap:8px}
.fq-zeiten div{display:flex;justify-content:space-between;gap:18px;padding-bottom:8px;
  border-bottom:1px solid var(--hairline-dunkel)}
.fq-zeiten div:last-child{border-bottom:0;padding-bottom:0}
.fq-zeiten dt{font-size:14.5px;color:rgba(255,255,255,.72)}
.fq-zeiten dd{margin:0;font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.fq-draht{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.fq-draht a{font-family:'Space Grotesk',sans-serif;font-size:clamp(17px,1.8vw,21px);font-weight:700;
  letter-spacing:-.02em;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
.fq-draht a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.fq-anschrift{margin-top:16px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.78)}
.fq-ehrlich{margin:var(--luft-s) var(--inset) 0;padding:22px 24px;background:rgba(255,255,255,.07);
  border-left:2px solid var(--lime);font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.82);max-width:76ch}

/* ------------------------------------------------------------
   SCHMALE BILDSCHIRME
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .fq-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fq-offen{grid-template-columns:1fr;gap:0}
  .fq-beleg{margin-top:28px;max-width:420px}
  .js .fq-morph{top:134px}
  .fq-glossar-paar{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
  .seitenhero-leise .hero-unten{grid-template-columns:1fr;gap:26px}
  .sh-zahl{align-items:flex-start;text-align:left}
  .fq-offen-kopf{grid-template-columns:1fr;gap:20px;align-items:start}
  .fq-gegenzahl{align-items:flex-start;text-align:left}
  .fq-glossar-paar{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){
  /* Die sechs Flächen liegen untereinander, volle Breite; die geöffnete
     schiebt die folgenden nach unten, statt sich in ein Raster zu setzen.
     Kein Nebeneinander, kein waagrechtes Scrollen, nirgends. */
  .fq-raster{grid-template-columns:minmax(0,1fr);margin:0}
  .fq-flaeche{min-height:0;gap:16px;padding:20px 22px}
  .fq-offen{padding:26px 22px 24px}
  .fq-rubriken,.fq-glossar,.fq-kontakt-raster,.fq-ehrlich{margin-left:var(--inset);margin-right:var(--inset)}

  /* Das Scharnier entfällt ersatzlos — die Mint-Bahn bleibt als
     Überschrift stehen. */
  .js .fq-spur{min-height:0}
  .js .fq-morph{position:static;transform:none;background:var(--mint);padding:22px var(--inset);
    margin:0 calc(var(--inset) * -1)}
  .js .fq-morph .fq-morph-innen{transform:none}
  .js .fq-morph .fq-bahn-text,.js .fq-morph .fq-suchbereich{opacity:1;display:block}
  .js .fq-morph .fq-suchbereich{pointer-events:auto}

  /* Das Feld klebt beim Scrollen im Fragenteil am oberen Rand — gesetzt
     von faq.js, sobald die Fragenliste oben ankommt (position:sticky
     reicht nicht über die Sektionsgrenze). Der Platzhalter hält die
     Höhe frei, damit beim Fixieren nichts springt. */
  /* 134 px, nicht 60: Das Wappen ragt aus der 64-px-Kopfzeile bis auf
     130 px herunter — eine Leiste darüber läge unter dem Markenzeichen. */
  .js .fq-morph.fq-oben{position:fixed;top:134px;left:0;right:0;z-index:60;margin:0;
    padding:8px var(--inset);background:var(--mint);box-shadow:0 10px 24px -18px rgba(6,26,17,.7)}
  .js .fq-morph.fq-oben .fq-bahn-text,
  .js .fq-morph.fq-oben .fq-such-label,
  .js .fq-morph.fq-oben .fq-beispiele{display:none}
  .js .fq-morph.fq-oben .fq-zaehler{margin-top:8px}
  .fq-platzhalter{display:block}
  .fq-such-label{display:none}
  .fq-input{height:44px;font-size:16px;padding:0 14px}
  .fq-los{height:44px;padding:0 16px;font-size:11px}

  /* Die Beispielsätze werden zu einer waagrecht wischbaren Zeile —
     senkrecht bleibt frei (touch-action). */
  .fq-beispiele{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none}
  .fq-beispiele::-webkit-scrollbar{display:none}
  .fq-beispiele li{flex:none;scroll-snap-align:start}

  /* Tabelle bricht in Zeilenblöcke um — kein waagrechtes Scrollen. */
  .fq-tabelle,.fq-tabelle thead,.fq-tabelle tbody,.fq-tabelle tr,.fq-tabelle th,.fq-tabelle td{display:block;width:auto}
  .fq-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .fq-tabelle tr{padding:14px 0;border-bottom:1px solid var(--hairline)}
  .fq-tabelle tbody th{padding:0 0 8px;border:0}
  .fq-tabelle td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0;
    border:0;text-align:left}
  .fq-tabelle td::before{content:attr(data-label);flex:none;font-family:'Space Grotesk',sans-serif;
    font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .fq-antwort,.fq-frage summary{padding-right:34px}
}

/* ------------------------------------------------------------
   BEWEGUNG AUS
   Alle Zustände bleiben erreichbar, nur die Interpolation entfällt:
   kein Wachsen, kein FLIP, kein Scharnier-Morph. Die Fläche öffnet sich
   sofort im Zielzustand, Zahlen stehen mit ihrem Endwert da, die Bahn
   wechselt hart in das Eingabefeld.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .fq-strich{transition:none;transform:scaleX(1)}
  .fq-fach-auf{transition:none}
  .fq-frage summary::after{transition:none}
  .js .fq-spur{min-height:0}
  .js .fq-morph{position:static;transform:none}
  .js .fq-morph .fq-morph-innen{transform:none}
  .js .fq-morph .fq-bahn-text,.js .fq-morph .fq-suchbereich{opacity:1}
  .js .fq-morph .fq-suchbereich{pointer-events:auto}
}