/* == lueftungstool.com: Unterseite „Häufige Fragen“ (/fragen/; SEO-Paket 10.10.2026, Fix 93) ==========================
   Laedt nach app.css, faq.css und mobil.css und gilt nur auf der Unterseite (body.seite-fragen). Das Fragen-Markup ist
   dasselbe wie auf der Startseite (faq.css und faq.js); hier nur Kopfzeile ohne Menue-Skript, Pfad, Seitentitel, Suche,
   die Themen-Ueberschriften als h2 und ein kompakteres Verzeichnis fuer 12 Themen.
   Design 10/2026 c: nur Tokens aus app.css; #00B4D8 als Flaeche/Linie, #00778C (--brand-strong) fuer Text.
   CSP style-src 'self': keine Inline-Stile. Keine eigene Bewegung (die Uebergaenge kommen aus faq.css).
   ========================================================================================================================= */

/* -- Kopfzeile: kein app.js, also kein Menue-Knopf; Hauptnavigation ab 821 px wie auf der Startseite, darunter tragen
   Pfad und Fusszeile die Links. Die aktuelle Seite ist in der Navigation markiert. -- */
.seite-fragen .nav__links a[aria-current="page"]{color:var(--ink);background:var(--surface-2);}

/* -- Abschnitt: beginnt direkt unter der Kopfzeile -- */
.seite-fragen .fragen{padding-top:40px;}
.krumen ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:28px;font-size:14px;color:var(--dim);}
.krumen li + li::before{content:'/';margin-right:8px;color:var(--line-strong);}
.krumen a{color:var(--text);text-decoration:none;}
.krumen a:hover{color:var(--brand-strong);text-decoration:underline;text-underline-offset:3px;}
.krumen [aria-current="page"]{color:var(--ink);font-weight:500;}
.fragen .head h1{font-size:clamp(32px,4vw,46px);text-wrap:balance;}
.fragen .head h1 .u{color:var(--brand-strong);}
.fragen .head .lead{margin-top:16px;}

/* -- Suche (fragen.js blendet sie ein; ohne Skript bleibt sie verborgen und alle Fragen stehen offen da).
   Rahmen C, Nachbesserung 1 (Befund darstellung, CLS): Ihr Platz ist von Anfang an reserviert. fragen.js (defer) macht
   das Feld erst nach dem ersten Bild sichtbar; vorher schob display:none -> block Verzeichnis und Fragen am Laptop um
   136 px nach unten (CLS 0,026 bis 0,063). Jetzt wechselt nur die Sichtbarkeit. Ohne Skript (scripting:none) faellt
   der Platz weg wie bisher. „!important“ ist noetig: app.css verbirgt jedes [hidden] mit display:none!important (Regel
   aus preise-20261008); ohne den Zusatz griff die Reservierung nicht (gemessen: Feld display:none, Liste 136 px hoeher). -- */
.fs{margin-top:28px;max-width:560px;}
.fs[hidden]{display:block!important;visibility:hidden;}
@media (scripting:none){.fs[hidden]{display:none!important;}}
.fs__lab{display:block;margin-bottom:8px;font-size:14.5px;font-weight:600;color:var(--ink);}
.fs__in{display:block;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--field-line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:400 16px/1.4 var(--f-sans);box-shadow:var(--sh-1);}
.fs__in::placeholder{color:var(--dim);opacity:1;}
.fs__in:focus{outline:none;border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-tint);}
.fs__info{min-height:1.5em;margin-top:8px;font-size:14px;color:var(--dim);}
.fs__leer{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-alt);font-size:15px;
  line-height:1.55;color:var(--text);}
.fs__leer[hidden],.fq__q[hidden],.fq__g[hidden],.fq__nav li[hidden]{display:none;}
.fs__leer a{color:var(--brand-strong);}
/* Waehrend der Suche: Abstand zwischen den sichtbaren Themen wie sonst, das erste sichtbare Thema ohne Abstand oben */
.fs-aktiv .fq__g{margin-top:0;}
.fs-aktiv .fq__g:not([hidden]) ~ .fq__g:not([hidden]){margin-top:64px;}

/* -- Themen-Ueberschriften: auf der Unterseite h2 (Seitentitel ist h1), Aussehen wie h3 auf der Startseite (faq.css) -- */
.fq__kopf h2{display:flex;align-items:center;gap:12px;font-size:clamp(21px,2vw,24px);font-weight:600;line-height:1.25;
  letter-spacing:-.01em;}
.fq__kopf h2 .fq__nr{flex:none;font-size:12.5px;}

/* -- Verzeichnis mit 12 Themen: ab 1000 px kompakter, damit es neben den Fragen ganz ins Bild passt (rund 520 px hoch);
   bei niedrigen Fenstern laeuft es nicht mit, sonst waeren die unteren Themen nicht erreichbar. -- */
@media (min-width:1000px){
  .seite-fragen .fq__panel{top:88px;}
  .seite-fragen .fq__nav a{min-height:36px;padding-top:6px;padding-bottom:6px;font-size:14px;}
}
@media (min-width:1000px) and (max-height:639px){
  .seite-fragen .fq__panel{position:relative;top:auto;}
}

/* -- Abschluss: Test und Rueckweg zur Startseite -- */
.fragen__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}

@media (max-width:600px){
  .seite-fragen .fragen{padding-top:28px;}
  .krumen ol{margin-bottom:20px;}
  .fq__kopf h2{font-size:20px;gap:10px;}
  .fs{margin-top:22px;}
  .fs__leer{padding:16px var(--s-karte,20px);}
  .fs-aktiv .fq__g:not([hidden]) ~ .fq__g:not([hidden]){margin-top:52px;}
  .fragen__cta .btn{flex:1 1 100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px;}
  /* 12 Themen: auch auf 360 px zwei Spalten (faq.css schaltet dort fuer 6 Themen auf eine), sonst stuenden vor der ersten
     Frage gut 750 px Verzeichnis */
  .seite-fragen .fq__nav ol{grid-template-columns:repeat(2,minmax(0,1fr));}
  .seite-fragen .fq__nav a{min-height:50px;font-size:13.5px;gap:8px;padding:6px 8px;}
}
@media (max-width:330px){
  .seite-fragen .fq__nav ol{grid-template-columns:1fr;}
}

/* Druck: alle Fragen, auch die von der Suche ausgeblendeten; Pfad, Suche, Hinweis „keine Treffer“ und Abschluss
   nicht. „!important“ wegen [hidden]{display:none!important} in app.css (ohne den Zusatz fehlten beim Drucken nach
   einer Suche die ausgeblendeten Fragen; Rahmen C, Nachbesserung 1). */
@media print{
  .krumen,.fs,.fs[hidden],.fs__info,.fs__leer,.fragen__cta{display:none!important;}
  .fq__q[hidden],.fq__g[hidden]{display:block!important;}
}