/* tuev-quiz · Maße folgen dem Skelett peter-at_solar_termin_2026-08.
   Eichliste: H1 22px/700 (390) bzw. 38px (1440), Quiz-Titel 20px/700,
   Frage-Titel 16px/400, Kacheln 98px, Knöpfe 16px/49px, FAQ-Frage 20px/400. */
:root{
  --blau:#0e518d; --blau-tief:#0a3d6b; --ink:#191919; --grau:#46545e;
  --hell:#eaeef3; --grund:#f8f9fb; --weiss:#fff; --gold:#fcb900;
  --gruen:#1d7a3f; --rot:#cf2e2e;
  --serif:"IBM Plex Serif",Georgia,serif;
  --body:"Poppins","Roboto",system-ui,sans-serif;
  --balken-h:92px; --kopf-h:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--klebe-h,120px) + 12px)}
#check{scroll-margin-top:calc(var(--klebe-h,120px) + 10px)}
body{margin:0;font-family:var(--body);font-weight:400;color:var(--ink);
  background:var(--weiss);font-size:16px;line-height:1.55;overflow-x:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
img{max-width:100%}
a{color:var(--blau)}

/* Entwurfs-Leiste */
.draft-bar{background:#7a4a00;color:#fff;text-align:center;padding:6px 10px;font-size:14px}

/* Zustimmung, im Seitenfluss */
.consent{background:#122f4d;color:#dce8f3;padding:10px 16px;display:flex;gap:12px;
  align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}
.consent button{border:0;border-radius:6px;padding:8px 16px;font:inherit;cursor:pointer;
  background:var(--gold);color:var(--ink);font-weight:600;min-height:36px}
.consent button.grau{background:#3a5a7d;color:#fff;font-weight:400}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* b01+b02 kleben gemeinsam */
.klebe-wickel{position:sticky;top:0;z-index:50}
.balken{background:linear-gradient(90deg,#0e518d,#0a3d6b 60%,#082f52);color:#fff;
  display:flex;align-items:center;min-height:52px;padding:8px 0}
.balken-in{display:flex;justify-content:center;align-items:center;text-align:center;width:100%}
.b-text{font-size:15px;line-height:1.35}
.b-text b{color:var(--gold);font-weight:700}

/* b02 Kopfzeile */
.kopf{height:64px;background:var(--weiss);border-bottom:1px solid var(--hell);
  display:flex;align-items:center;box-shadow:0 2px 10px rgba(10,61,107,.06)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;width:100%}
.marke{height:34px;width:auto;display:block}
.zaehler{font-size:14px;color:var(--grau);text-align:right;line-height:1.3;max-width:200px}
.zaehler b{color:var(--ink);font-variant-numeric:tabular-nums}
.pfeil-hoch{color:var(--gruen);font-weight:700}

/* b03 Hero */
.hero{padding:16px 0 0;background:var(--weiss)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.pille{display:inline-block;background:var(--hell);color:var(--blau-tief);
  border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:12px}
h1{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.3;margin:0 0 10px;max-width:22ch}
/* Google-Fassung 02.11.2026: das Suchwort AZAV-Zertifizierung bricht nie am Bindestrich, die Zeilen sind ausgewogen */
.nw{white-space:nowrap}
body[data-variante="google"] h1{text-wrap:balance}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{padding:6px 0;font-size:16px;display:flex;align-items:center;gap:12px}
.p-kreis{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--ink);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.p-kreis.gold{background:var(--gold);font-size:16px}
.punkte .geschenk{color:#b07600;font-weight:600}
.hero-bild{display:none;justify-content:center}
.hero-foto{width:100%;max-width:430px;border-radius:12px;
  box-shadow:0 10px 24px rgba(10,61,107,.14);display:block}

/* b04 Quiz */
.quiz-block{padding:18px 0 0;background:var(--weiss)}
.quiz-huelle{position:relative;padding-top:6px}
.quiz-huelle{max-width:358px;margin:0 auto}
.q-pfeil{position:absolute;top:-14px;right:4%;z-index:2}
.q-titel{font-family:var(--body);font-size:20px;font-weight:700;line-height:1.35;margin:2px 0 18px}
.quiz-kasten{background:#eef3f9;border:1px solid #c9d6e2;border-radius:12px;
  padding:20px 16px 24px;max-width:358px;margin:0 auto;box-shadow:0 10px 30px rgba(25,25,25,.10)}
.q-balken{height:3px;background:#e7e3dc;border-radius:99px;margin:6px 0 20px;overflow:hidden}
.q-balken i{display:block;height:100%;background:var(--blau);transition:width .25s}
.q-frage{font-size:17px;font-weight:400;margin:0 0 16px;line-height:1.45;text-align:center}
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kachel{height:98px;border:1px solid #d6dee7;border-radius:10px;background:var(--weiss);
  box-shadow:0 3px 10px rgba(25,25,25,.10);
  font:inherit;font-size:14px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:8px;color:var(--ink);
  transition:border-color .12s, background .12s}
.kachel:hover{border-color:var(--blau);background:#f2f7fc;transform:translateY(-2px)}
.kachel:active{transform:translateY(0)}
.kachel{transition:border-color .12s, background .12s, transform .12s}
.kachel svg{color:var(--blau)}
.felder{display:grid;gap:10px}
.felder input{font:inherit;font-size:16px;padding:12px;border:1.5px solid var(--ink);
  border-radius:8px;width:100%;background:var(--weiss)}
.felder input::placeholder{color:#9aa4ad}
.felder input:focus{outline:2px solid var(--blau);outline-offset:1px}
.felder input.bad{border-color:var(--rot)}
.feld-err{color:var(--rot);font-size:13px;display:none}
.feld-err.on{display:block}
.q-hinweis{font-size:13px;color:var(--grau);margin-top:8px}
.q-weiter{margin-top:14px;width:100%;height:49px;border:0;border-radius:8px;
  background:var(--gold);color:var(--ink);font:inherit;font-size:16px;font-weight:700;
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}
.q-weiter:hover{background:#f6d153}
.q-weiter[disabled]{opacity:.6;cursor:wait}
.q-zurueck{margin-top:12px;background:none;border:0;color:#8a949c;font:inherit;
  font-size:13px;cursor:pointer;padding:6px 2px;display:inline-block}
/* Ladebildschirm */
.laden{text-align:center;padding:18px 0 8px}
.laden .ring{width:64px;height:64px;margin:16px auto;position:relative}
.laden .ring svg{transform:rotate(-90deg)}
.laden .ring circle{fill:none;stroke-width:6}
.laden .ring .r-grund{stroke:#d7e0ea}
.laden .ring .r-voll{stroke:var(--blau);stroke-linecap:round;
  stroke-dasharray:163.4;stroke-dashoffset:163.4;
  animation:fuellen 6s linear forwards}
@keyframes fuellen{to{stroke-dashoffset:0}}
.laden .beweis{font-size:13.5px;color:var(--grau);margin-top:14px}
/* Rahmen ab Schritt 8 */
.rahmen{margin-bottom:14px}
.rahmen .ok-zeile{color:var(--gruen);font-size:14px;font-weight:600;margin-bottom:8px}
.rahmen .r-titel{font-size:16px;font-weight:600;margin-bottom:10px}
.einstufung{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:10px}
.einstufung .e-label{font-size:13px;color:var(--grau)}
.einstufung .e-wert{filter:blur(7px);user-select:none;font-weight:700;color:var(--blau);font-size:18px}
.rahmen .r-satz{font-size:13.5px;color:var(--grau);margin:0 0 4px}
.recht{font-size:12px;color:#8a949c;margin-top:10px;line-height:1.45}
.recht a{color:#6b7785}
.q-fertig{text-align:center;padding:10px 0}
.q-fertig .gross{font-size:18px;font-weight:600;margin-bottom:8px}

/* b05 Vertrauen */
.vertrauen{background:var(--weiss);padding:30px 0 0}
.vertrauen .wrap{padding-bottom:30px;display:flex;flex-direction:column;gap:20px;
  align-items:center;text-align:center}
.v-gruppe{display:flex;flex-direction:column;align-items:center}
.v-trenn{width:100%;max-width:420px;border-top:1px solid var(--hell)}
.v-titel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  margin-bottom:12px}
.v-reihe{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.v-widget{height:120px;width:auto}
.v-satz{font-size:14px;color:var(--grau);margin-top:12px}

/* b06 Prozess */
.prozess{background:linear-gradient(170deg,#0e518d,#082f52);color:#fff;padding:48px 0 60px}
.prozess h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 22px;color:#fff;text-align:center}
.schritte{max-width:640px;margin:0 auto;position:relative;padding-left:6px}
.schritte::before{content:"";position:absolute;left:23px;top:20px;bottom:26px;
  width:2px;background:rgba(255,255,255,.4)}
.schritt{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:0 0 34px;
  position:relative;align-items:start}
.schritt:last-child{padding-bottom:0}
.s-kreis{width:36px;height:36px;border-radius:50%;background:#0a2038;
  border:2px solid var(--gold);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;position:relative;z-index:1}
.s-inhalt{padding-top:4px}
.s-titel{font-size:16px;line-height:1.5;color:#eaf1f8}
.s-titel b{color:#fff}
.s-link{display:inline-block;margin-top:6px;color:var(--gold);font-size:15px;
  text-decoration:none;font-weight:600}
.s-link:hover{text-decoration:underline}
.logo-band{margin-top:40px;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.lb-titel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#9db8d2;
  text-align:center;margin-bottom:18px}
.lb-reihe{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;justify-content:center;
  max-width:900px;margin:0 auto}
.lb-reihe img{height:22px;width:auto;opacity:.85}

/* b07 Bewertungen */
.bewertung{background:var(--grund);padding:46px 0 0}
.bewertung h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 10px;text-align:center}
.sterne{color:var(--gold);font-size:30px;letter-spacing:4px;text-align:center}
.quelle-zeile{font-size:14px;color:var(--grau);margin:6px 0 26px;text-align:center}
.kundenkarte{margin:0 auto;background:var(--weiss);border-radius:12px;overflow:hidden;
  padding:0 0 22px;box-shadow:0 10px 30px rgba(10,61,107,.10);max-width:560px}
.k-foto{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
.k-text{padding:0 22px}
.k-daten{display:flex;gap:26px;border-top:1px solid var(--hell);margin-top:14px;padding-top:12px}
.k-daten span{font-size:14px}
.kd-l{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.kundenkarte blockquote{margin:18px 0 12px;font-size:17px;line-height:1.7;padding:0}
.kundenkarte figcaption{font-size:13.5px;color:var(--grau)}
.nachweise{margin-top:30px}
.n-titel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  text-align:center;margin-bottom:16px}
.n-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:14px;justify-content:center}
.n-reihe img{width:100%;border-radius:6px;border:1px solid var(--hell);
  box-shadow:0 6px 18px rgba(10,61,107,.10);background:#fff}

/* b08 Vergleich */
.vergleich{background:var(--weiss);padding:44px 0 44px}
.vergleich h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 22px;text-align:center}
.vg-tabelle{max-width:560px;margin:0 auto;position:relative}
.vg-zeile{display:grid;grid-template-columns:1fr 86px 86px;align-items:center;
  border-bottom:1px solid var(--hell);min-height:64px;font-size:15.5px;padding:8px 0}
.vg-zeile:last-child{border-bottom:0}
.vg-kopf{border-bottom:1px solid var(--hell);font-weight:700;font-size:14px}
.vg-kopf .vg-gegner{text-align:center;line-height:1.3}
.vg-logo{height:26px;width:auto;display:block;margin:0 auto}
.vg-zeile .vg-wir{display:flex;align-items:center;justify-content:center;
  align-self:stretch;background:#f4f8fc;border-left:1.5px solid var(--gold);
  border-right:1.5px solid var(--gold)}
.vg-kopf .vg-wir{border-top:1.5px solid var(--gold);border-radius:8px 8px 0 0}
.vg-zeile:last-child .vg-wir{border-bottom:1.5px solid var(--gold);border-radius:0 0 8px 8px}
.vg-zeile span:last-child{text-align:center}
.vg-zeile i{font-style:normal;display:inline-flex;width:34px;height:34px;border-radius:50%;
  align-items:center;justify-content:center;font-size:16px;font-weight:700}
.vg-zeile i.ja{background:#22a04a;color:#fff}
.vg-zeile i.nein{background:#d9564a;color:#fff}

/* b09 FAQ */
.faq{background:#101820;color:#eef2f6;padding:48px 0 0;margin-top:0}
.abschluss{background:#101820;padding:0 0 0;margin:0}
.abschluss .wrap{padding-bottom:46px}
.faq details{border-bottom:1px solid #2a3540;max-width:720px;padding:10px 0;margin:0 auto}
.faq summary{font-size:20px;font-weight:400;padding:16px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;color:#c6d2dd;font-size:15px;line-height:1.75;max-width:64ch}
.faq .wrap{padding-bottom:26px}
.knopf{display:flex;align-items:center;justify-content:center;min-height:49px;width:100%;max-width:350px;
  margin-left:auto;margin-right:auto;margin-top:0;padding:10px 24px;text-align:center;line-height:1.3;
  font-size:16px;background:var(--gold);color:var(--ink);border-radius:8px;
  text-decoration:none;font-weight:600}
.knopf:hover{background:#f6d153}

/* b11 Fuß */
.fuss{background:#0b1622;color:#aebccb;padding:56px 0 0}
.f-titel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7d8fa2;margin-bottom:8px}
.fuss-grid{display:grid;grid-template-columns:1fr;gap:34px}
.f-logo{height:34px;width:auto;margin-bottom:10px}
.f-anschrift{font-size:14px;margin:0;line-height:1.6}
.f-spalte a{display:block;color:#cfe0ef;text-decoration:none;font-size:14px;padding:7px 0}
.f-spalte a:hover{text-decoration:underline}
.f-zeichen{display:flex;gap:14px;align-items:center;opacity:.9}
.f-widget{height:64px;width:auto}
.f-unten{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid #22303e;margin-top:34px;padding:20px 16px 28px;font-size:14px;line-height:1.6}

/* Desktop */
@media(max-width:899px){
  .s-bild{display:none}
  .schritt{grid-template-columns:40px 1fr}
}
@media(min-width:900px){
  :root{--balken-h:70px}
  .b-text{font-size:16px}
  .balken-in{flex-direction:row;gap:14px;justify-content:center}
  h1{font-size:38px;max-width:30ch}
  .hero{padding:44px 0 0}
  .hero-bild{display:flex}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:40px}
  .punkte li{font-size:16px}
  .report-mock{width:240px}
  .quiz-kasten{max-width:640px;padding:26px 28px 32px;margin:0 auto}
  .quiz-huelle{max-width:640px}
  .q-titel{text-align:center}
  .kacheln{grid-template-columns:1fr 1fr 1fr}
  .prozess h2,.bewertung h2,.vergleich h2{font-size:38px}
  .schritte{max-width:720px}
  .schritt.rechts{margin-left:64px}
  .kundenkarte{display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:visible;max-width:720px}
  .k-foto{aspect-ratio:3/4;border-radius:12px 0 0 12px}
  .k-text{background:var(--weiss);border-radius:12px;box-shadow:0 10px 30px rgba(10,61,107,.12);
    padding:26px 24px;margin-left:-40px}
  .fuss-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:start}
  .n-reihe{grid-template-columns:repeat(4,170px)}
  .vertrauen .wrap{gap:24px}
}


/* Verhalten wie das Original: sanfte Einblendungen beim Scrollen */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .55s ease, transform .55s ease}
  .reveal.sichtbar{opacity:1;transform:none}
}

/* azav-quiz Ergaenzungen (04.09.2026): echte Logos weiss auf dem Blau-Band,
   Zitat-Kacheln statt Zertifikatsnachweise, Text-Kundenkarte ohne Foto */
.lb-echt img{height:26px;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.lb-echt img.chip{filter:none;opacity:1;background:#fff;border-radius:6px;padding:3px 7px;box-sizing:content-box}
.n-zitate{display:grid;grid-template-columns:1fr;gap:14px;max-width:940px;margin:0 auto}
.n-zitat{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:14px 16px;text-align:left}
.n-zitat .w-sterne{color:var(--gold);letter-spacing:2px;font-size:14px}
.n-zitat p{font-size:14.5px;line-height:1.55;margin:6px 0}
.n-zitat .w-quelle{font-size:12.5px;color:var(--grau)}
.k-foto-leer{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0e518d,#082f52);color:var(--gold);font-size:28px;letter-spacing:3px}
@media(min-width:700px){.n-zitate{grid-template-columns:1fr 1fr}.lb-echt img{height:30px;max-width:150px}}

/* ---- Fragebogen Oktober 2026 (Arta 03.10.2026): neuer Ablauf im bestehenden Kasten.
   Optik nach dem abgenommenen Klick-Entwurf (konzept-2026-10/entwurf), Farben und Kacheln
   aus diesem Bestand. Bewegung nur über transform und opacity. */
.unterzeile{font-size:16px;color:var(--grau);margin:0 0 12px;max-width:46ch;line-height:1.5}
.fq-kopf{display:flex;align-items:center;gap:10px;margin:0 0 14px;min-height:44px}
.fq-back{background:none;border:0;color:var(--blau);font:inherit;font-size:15px;min-width:44px;min-height:44px;
  cursor:pointer;padding:0 4px;text-align:left}
.fq-back[hidden]{display:block;visibility:hidden}
.fq-kopf .q-balken{flex:1;margin:0;height:4px}
.fq-balken i{width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .35s ease}
.fq-zahl{font-size:14px;color:var(--grau);min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.fq-screen{animation:fq-rein .34s cubic-bezier(.2,.7,.2,1)}
.fq-screen.back{animation-name:fq-reinback}
@keyframes fq-rein{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes fq-reinback{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes fq-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q-frage:focus,.q-frage:focus-visible{outline:none}
.fq-sub{font-size:15px;color:var(--grau);text-align:center;margin:-8px 0 16px;line-height:1.5}
.fq-sub-frage{margin:14px 0 10px;color:var(--ink)}
.fq-screen .q-weiter{white-space:normal;height:auto;min-height:49px;padding:10px 14px;text-align:center;line-height:1.3}
#fq-go[disabled]{cursor:not-allowed}
.fq-leise{background:var(--weiss);border:1.5px solid var(--blau);color:var(--blau)}
.fq-leise:hover{background:#f1f6fc}

/* Kacheln: Haken bei Auswahl, Listenform für lange Antworten */
.kachel{position:relative}
.kachel > svg{width:34px;height:34px;flex:0 0 auto}
.kachel .kl{display:block}
.kachel small{display:block;color:var(--grau);font-size:13px;margin-top:3px;line-height:1.35}
.kachel.aktiv{border-color:var(--blau);background:#f1f6fc}
.fq-haken{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--blau);
  display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.fq-haken svg{width:13px;height:13px;color:#fff}
.kachel.aktiv .fq-haken{transform:scale(1)}
.kacheln.eins{grid-template-columns:1fr}
.kacheln.eins .kachel{height:auto;min-height:60px;flex-direction:row;justify-content:flex-start;text-align:left;
  padding:12px 42px 12px 14px;gap:12px;font-size:15px;line-height:1.35}
.kacheln.eins .kachel > svg{width:28px;height:28px}
.kacheln.eins .fq-haken{top:50%;right:12px;margin-top:-11px}

/* Freitext mit Schreibhilfen */
.fq-label{display:block;font-size:14px;color:var(--grau);margin:0 0 6px}
.fq-feld{width:100%;font:inherit;font-size:16px;border:1.5px solid var(--ink);border-radius:8px;padding:12px;
  background:var(--weiss);color:var(--ink);min-height:150px;resize:vertical;line-height:1.5}
.fq-feld:focus{outline:2px solid var(--blau);outline-offset:1px}
.fq-feld-klein{min-height:100px}
/* Sprachnachricht statt Schreibhilfen (Arta 03.10.2026) */
.fq-sprache{margin:12px 0 0}
.fq-mic{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border:1.5px solid var(--blau);
  border-radius:12px;background:var(--weiss);color:var(--blau);font:inherit;font-size:16px;font-weight:600;cursor:pointer;padding:10px 14px}
.fq-mic svg{width:24px;height:24px;flex:0 0 auto}
.fq-mic:hover{background:#f1f6fc}
.fq-mic .punkt{width:10px;height:10px;border-radius:50%;background:var(--rot);display:none}
.fq-mic.laeuft{border-color:var(--rot);color:var(--rot);background:#fff5f5}
.fq-mic.laeuft .punkt{display:inline-block;animation:fq-puls 1.2s ease-in-out infinite}
.fq-mic.laeuft svg{display:none}
.fq-mic.arbeitet{opacity:.7;cursor:wait}
.fq-mic-uhr{font-weight:400;font-variant-numeric:tabular-nums}
.fq-mic-hinweis{font-size:14px;color:var(--grau);margin:6px 2px 0;line-height:1.45}
@keyframes fq-puls{0%,100%{opacity:1}50%{opacity:.3}}
.fq-meter{margin-top:12px;background:var(--weiss);border-radius:10px;padding:10px 12px;border:1px solid var(--hell)}
.fq-meter-leiste{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.fq-meter-leiste span{height:6px;border-radius:99px;background:#dfe5ec;position:relative;overflow:hidden}
.fq-meter-leiste span i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease}
.fq-meter.top .fq-meter-leiste span i{background:var(--gruen)}
.fq-meter p{margin:0;font-size:14px;color:var(--grau)}
.fq-ideen{margin-top:10px}
.fq-ideen summary{cursor:pointer;color:var(--blau);font-size:15px;min-height:44px;display:flex;align-items:center}
.fq-idee{display:block;width:100%;text-align:left;background:var(--weiss);border:1.5px dashed #d6dee7;border-radius:10px;
  padding:10px 12px;margin-top:8px;cursor:pointer;color:var(--ink);min-height:44px;font:inherit;font-size:15px}

/* So funktioniert die AZAV, Umdenken */
.fq-fluss{display:grid;gap:4px;margin:4px 0 14px}
.fq-knoten{display:flex;align-items:center;gap:12px;background:var(--weiss);border-radius:12px;padding:12px 14px;
  box-shadow:0 2px 8px rgba(25,25,25,.06);opacity:0;animation:fq-auf .4s ease forwards;font-size:15px;line-height:1.4}
.fq-knoten svg{width:30px;height:30px;color:var(--blau);flex:0 0 auto}
.fq-knoten.du{border:1.5px solid var(--gold)}
.fq-knoten.du svg{color:#e0a400}
.fq-pfeil{display:flex;align-items:center;gap:8px;padding-left:24px;color:var(--grau);font-size:14px;opacity:0;
  animation:fq-auf .4s ease forwards}
.fq-pfeil svg{width:16px;height:16px}
.fq-merke{background:var(--weiss);border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:15px;line-height:1.5}
.fq-merke b{color:var(--blau)}
.fq-nachsatz{font-size:15px;line-height:1.5;margin:0 0 10px;padding:0 4px}
.fq-bsp{display:flex;gap:10px;align-items:flex-start;background:#fff8e1;border-radius:12px;padding:12px 14px;
  font-size:15px;line-height:1.5}
.fq-bsp svg{width:22px;height:22px;flex:0 0 auto;color:#8a5c00;margin-top:2px}
.fq-absatz{font-size:15px;line-height:1.55;margin:0 0 12px}
.fq-klein{font-size:14px;color:var(--grau);margin:12px 0 0;line-height:1.5}
.fq-dauer-mini{display:flex;gap:3px;margin-top:2px}
.fq-dauer-mini i{width:9px;height:9px;border-radius:2px;background:#dfe5ec}
.fq-dauer-mini i.an{background:var(--blau)}

/* Umsatz, Investition */
.fq-gross,.fq-ertrag{border-radius:14px;padding:16px;text-align:center;margin-bottom:14px}
.fq-gross{background:var(--weiss);box-shadow:0 8px 22px rgba(14,81,141,.10)}
.fq-ertrag{background:var(--blau);color:#fff}
.fq-label-k{font-size:14px;color:var(--grau)}
.fq-ertrag .fq-label-k{color:#d8e6f3}
.fq-betrag{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--blau);line-height:1.15;
  font-variant-numeric:tabular-nums}
.fq-ertrag .fq-betrag{color:#fff}
.fq-reihen{display:grid;gap:12px;margin-bottom:10px}
.fq-kopfz{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:12px;font-size:15px;margin-bottom:5px;line-height:1.4}
.fq-kopfz span{flex:1 1 160px}
.fq-kopfz b{white-space:nowrap;font-variant-numeric:tabular-nums}
.fq-bar{height:14px;background:#dfe5ec;border-radius:99px;overflow:hidden}
.fq-bar i{display:block;height:100%;width:100%;background:var(--blau);transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fq-bar.rot i{background:var(--rot)}
.fq-bar.gold i{background:var(--gold)}
.fq-zusatz{font-size:13px;color:var(--grau);margin-top:4px}
.fq-rechnung{margin-top:6px;background:var(--weiss);border-radius:10px;padding:2px 12px}
.fq-rechnung summary{cursor:pointer;color:var(--blau);font-size:15px;min-height:44px;display:flex;align-items:center}
.fq-rechnung p{font-size:14px;color:var(--grau);margin:0 0 10px;line-height:1.5}
.fq-hinweis{font-size:14px;color:var(--grau);text-align:center;margin:10px 0 0}
.fq-plus{display:flex;gap:10px;align-items:center;background:#e9f6ee;color:#14532d;border-radius:12px;padding:12px 14px;
  margin:4px 0 0;font-weight:600;font-size:15px;line-height:1.4}
.fq-plus svg{width:24px;height:24px;flex:0 0 auto;color:var(--gruen)}
.fq-trenn{height:1px;background:#c9d6e2;margin:16px 0}

/* Maßnahme als Vorschau-Dokument */
.fq-doku{background:var(--weiss);border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(14,81,141,.12)}
.fq-doku-kopf{background:var(--blau);color:#fff;font-size:14px;padding:8px 14px;display:flex;justify-content:space-between;gap:8px}
.fq-doku-in{padding:14px 16px 16px}
.fq-doku h3{font-family:var(--serif);font-size:20px;line-height:1.3;margin:0 0 10px;color:var(--blau-tief)}
.fq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fq-chips span{background:var(--hell);color:var(--blau-tief);border-radius:99px;padding:4px 10px;font-size:13px;font-weight:600}
.fq-wer{font-size:15px;margin:0 0 10px;line-height:1.45}
.fq-bausteine{margin:0 0 4px;font-size:15px}
.fq-bausteine span{display:block;font-size:13px;color:var(--grau)}
.fq-module{list-style:none;padding:0;margin:0}
.fq-module li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--hell);opacity:0;
  animation:fq-auf .35s ease forwards;font-size:15px;line-height:1.4}
.fq-module li svg{width:20px;height:20px;color:var(--gruen);flex:0 0 auto;margin-top:1px}
.fq-zitat{font-size:14px;color:var(--grau);font-style:italic;margin:10px 0 0;line-height:1.5}
.fq-frage-unten{margin:18px 0 12px}
.fq-anders{margin-top:12px}

/* Zeitpunkt */
.fq-fakten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fq-fakt{background:var(--weiss);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;opacity:0;
  animation:fq-auf .4s ease forwards}
.fq-fakt svg{width:26px;height:26px;color:var(--blau)}
.fq-fakt b{font-size:18px;color:var(--blau-tief);line-height:1.2}
.fq-fakt span{font-size:13px;color:var(--grau);line-height:1.4}
.fq-monat{font-size:15px;line-height:1.5;margin:12px 0 0;background:#fff8e1;border-radius:12px;padding:12px 14px}

/* Laden und Kontakt-Rahmen */
.fq-status{min-height:22px;font-size:15px;color:var(--grau);margin:0}
.fq-einstufung{display:grid;gap:8px}
.fq-einstufung > div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fq-einstufung .e-wert{font-size:15px}

@media(min-width:900px){
  .kacheln.zehn{grid-template-columns:1fr 1fr}  /* Design-Council 03.10.: zehn Bereiche wie mobil in zwei Spalten, keine Sonderzeile */
  .kacheln.zehn .kachel{height:84px}
  .fq-betrag{font-size:38px}
  .fq-fakt span{font-size:14px}
}
@media(max-width:340px){.fq-fakten{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .fq-screen,.fq-knoten,.fq-pfeil,.fq-module li,.fq-fakt,.fq-mic .punkt{animation:none;opacity:1}
  .fq-bar i,.fq-balken i,.fq-meter-leiste span i,.fq-haken{transition:none}
}

/* Knopf immer sichtbar (Arta 03.10.2026: "Man muss immer wissen, wo man weiterklickt").
   Der Weiter-Knopf klebt am unteren Rand, solange der Bildschirm länger ist als das Handy. Wo die Antwort aus
   Kacheln besteht und weiter unten steht, klebt ein Hinweis, der zu den Kacheln springt. */
.fq-screen .q-weiter{position:sticky;bottom:12px;z-index:6;box-shadow:0 8px 22px rgba(25,25,25,.18)}
.fq-runter{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;
  margin:12px auto 0;min-height:44px;padding:8px 18px;border:0;border-radius:99px;background:var(--blau);color:#fff;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(14,81,141,.28);
  transition:opacity .25s ease,transform .25s ease}
.fq-runter svg{width:18px;height:18px}
.fq-runter.weg{opacity:0;transform:translateY(8px);pointer-events:none}
.fq-mitte{text-align:center;margin:-6px 0 12px}
.fq-doku-fuss{font-size:13px;color:var(--grau);margin:8px 0 0;line-height:1.45}
@media (prefers-reduced-motion:reduce){.fq-runter{transition:none}}