/* =============================================================================
   smzh Finanz-Check v4.0
   Forest ist die Systemfarbe. Pink markiert Handlung, Achtung markiert
   Annahmen und Fristen. Alle Textfarben sind gemessen, mindestens 4,5:1.
   Bewegungen 180 bis 280 ms. Reflow ab 320 Pixeln. Bedienflächen 44 Pixel.
   ========================================================================== */
:root{
  --forest:#115c3f; --forest-2:#28714f; --forest-deep:#0c3e2b;
  --pink:#e5358a; --pink-ink:#b51d68; --pink-text:#9c1259; --pink-bg:#fbe9f2;
  --achtung:#8a5300; --achtung-bg:#fdf6ea;
  --paper:#f4f1e9; --paper-2:#ece7da; --ink:#10231b; --stone:#635d52;
  --line:rgba(17,92,63,.18); --line-2:#d9d3c6; --hell:#c9d8d0; --white:#fff;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --gut:clamp(18px,5vw,64px); --maxw:1280px; --ease:cubic-bezier(.22,1,.36,1);
  --tap:44px; --sp1:180ms; --sp2:220ms; --sp3:280ms;
  --spalten:repeat(4,minmax(0,1fr));
}
@media (min-width:1000px){ :root{ --spalten:repeat(12,minmax(0,1fr)); } }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--white);color:var(--ink);font-size:17px;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body[data-screen="kontext"],body[data-screen="pruefen"]{background:var(--paper)}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:left}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
:focus-visible{outline:3px solid var(--forest);outline-offset:2px}

.lab{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--forest)}
.lab--hell{color:var(--paper)}
.lab--signal{display:flex;align-items:center;gap:10px}
.lab--signal::before{content:"";width:26px;height:4px;background:var(--pink);flex:none}
.link{color:var(--forest);text-decoration:underline;text-underline-offset:3px;font-size:15px;
  min-height:var(--tap);display:inline-flex;align-items:center}
.link--hell{color:var(--paper)}
.zahl{font-size:14px;color:var(--stone)}

.btn{min-height:var(--tap);padding:13px 20px;display:inline-flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:500;font-size:16px;
  transition:background var(--sp2) var(--ease),border-color var(--sp2)}
.btn--primary{background:var(--forest);color:#fff;border:1px solid var(--forest)}
.btn--primary:hover{background:var(--forest-deep)}
.btn--pink{background:var(--pink-ink);color:#fff;border:1px solid var(--pink-ink)}
.btn--pink:hover{background:var(--pink-text)}
.btn--ghost{background:none;color:var(--forest);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--paper)}
.btn--hell{color:var(--paper);border-color:rgba(244,241,233,.4)}
.btn--hell:hover{background:rgba(244,241,233,.12)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* Herkunftsmarken */
.mk{display:inline-block;font-size:11.5px;letter-spacing:.03em;word-spacing:-.08em;
  padding:3px 8px;border:1px solid currentColor;justify-self:start;white-space:nowrap}
.mk--angabe{color:var(--forest)}
.mk--berechnet{color:var(--ink)}
.mk--annahme{color:var(--achtung)}
.mk--offen{color:var(--pink-text)}
.mk--allgemein{color:var(--stone)}
.qref{font-size:11.5px;letter-spacing:.04em;color:var(--stone);border-bottom:1px dotted currentColor;
  min-height:24px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------------ Kopf - */
.bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:12px var(--gut)}
.bar__brand{min-height:var(--tap);display:flex;align-items:center}
.bar__mid{font-size:14px;color:var(--stone)}
.bar__note{font-size:13px;color:var(--stone);display:flex;align-items:center;gap:7px;justify-self:end}
.bar__note span{width:7px;height:7px;background:var(--forest);border-radius:50%}
.etappen{display:flex;gap:6px;font-size:12.5px;color:var(--stone);flex-wrap:wrap}
.etappen li{padding:4px 10px;border:1px solid var(--line-2)}
.etappen li.is-jetzt{background:var(--forest);color:#fff;border-color:var(--forest);font-weight:500}
.etappen li.is-fertig{color:var(--forest);border-color:var(--forest)}
@media (max-width:719px){ .bar__note{display:none} .bar{grid-template-columns:auto 1fr} }

/* ------------------------------------------------------------------ Hero - */
.hero{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,6vw,64px) var(--gut) clamp(24px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.hero h1{font-size:clamp(2.3rem,6.4vw,4rem);letter-spacing:-.045em;max-width:16ch;margin:16px 0 0}
.hero__lead{font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.3;max-width:26ch;
  margin-top:14px;color:var(--forest);font-weight:500}
.hero__start{font-size:16px;color:var(--stone);max-width:52ch;margin-top:16px}
.hero__proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);max-width:620px;margin-top:22px}
.hero__proof li{background:var(--white);padding:12px 14px;display:grid;gap:4px}
.hero__proof b{width:26px;height:26px;background:var(--pink-ink);color:#fff;display:grid;
  place-items:center;font-size:13px;border-radius:50%}
.hero__proof span{font-size:14px;font-weight:500;color:var(--ink)}
.hero__do{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.hero__meta{font-size:14px;color:var(--stone);margin-top:14px}

/* ---------------------------------------------------------------- Karten - */
.grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(32px,5vw,60px)}
.grid__h h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:20px}
.karten{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-bottom:16px}
.karte{background:var(--white);padding:20px;display:grid;grid-template-rows:auto auto 1fr auto;
  gap:9px;min-height:196px;transition:background var(--sp3) var(--ease)}
.karte:hover,.karte:focus-visible{background:var(--paper)}
.karte__e{font-size:11px;letter-spacing:.14em;color:var(--stone);font-weight:700}
.karte__f{font-size:1.1rem;font-weight:500;letter-spacing:-.025em;line-height:1.22}
.karte__n{font-size:14px;color:var(--stone);line-height:1.42}
.karte__go{font-size:15px;color:var(--forest);font-weight:500;display:flex;justify-content:space-between;
  align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line);min-height:40px}
.karte__go b{transition:transform var(--sp1) var(--ease)}
.karte:hover .karte__go b{transform:translateX(4px)}
/* Drei Golden Paths tragen die Seite. Die übrigen fünf stehen darunter,
   kompakter und in einem Raster ohne leere Flächen. */
.grid__h--2{margin-top:34px}
.grid__h--2 h3{font-size:1.2rem}
.grid__s{font-size:15px;color:var(--stone);margin-top:8px;max-width:60ch}
.grid__s b{color:var(--forest);font-weight:500}
.karte--gold{min-height:212px;padding:22px;border-left:4px solid var(--forest)}
.karte--gold .karte__f{font-size:1.22rem}
.karte--weiter{min-height:150px;padding:16px 18px;gap:7px}
.karte--weiter .karte__f{font-size:1rem}
.karte--weiter .karte__n{font-size:13.5px}
.karte--weiter .karte__go{font-size:14px;padding-top:10px}
@media (min-width:720px){
  .karten--gold{grid-template-columns:repeat(3,1fr)}
  .karten--weitere{grid-template-columns:repeat(6,1fr)}
  .karten--weitere .karte{grid-column:span 3}
  .karten--weitere .karte:nth-child(1),
  .karten--weitere .karte:nth-child(2),
  .karten--weitere .karte:nth-child(3){grid-column:span 2}
}

.versprechen{background:var(--forest);color:var(--paper);padding:clamp(32px,5vw,60px) var(--gut);
  display:grid;gap:28px}
.versprechen h2{font-size:clamp(1.7rem,4vw,2.5rem);margin:14px 0 12px}
.versprechen p{color:var(--hell);max-width:48ch;font-size:16px}
.versprechen__l{display:grid;gap:1px;background:rgba(244,241,233,.24);border-top:1px solid rgba(244,241,233,.24)}
.versprechen__l li{background:var(--forest);padding:14px 0;display:grid;gap:4px}
.versprechen__l b{font-weight:500;font-size:16px}
.versprechen__l span{font-size:14px;color:var(--hell)}
@media (min-width:1000px){ .versprechen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start} }

/* --------------------------------------------------------------- Angaben - */
.stufe{max-width:960px;margin:0 auto;padding:clamp(24px,5vw,52px) var(--gut) 52px;display:grid;gap:26px}
.stufe__k h1{font-size:clamp(1.7rem,4.6vw,2.7rem);margin:14px 0 12px;max-width:22ch}
.stufe__l{font-size:16px;color:var(--stone);max-width:56ch}
.erwartung{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:20px}
.erwartung li{background:var(--white);padding:12px 14px;display:grid;gap:3px}
.erwartung b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.erwartung span{font-size:14.5px;color:var(--stone);line-height:1.45}
@media (min-width:720px){ .erwartung{grid-template-columns:repeat(2,1fr)} }

.felder{border:1px solid var(--line-2);background:var(--paper)}
.felder__h{padding:18px 18px 4px}
.felder__h h2{font-size:1.3rem}
.felder__h p{font-size:14.5px;color:var(--stone);margin-top:6px}
.fd{padding:14px 18px;border-top:1px solid var(--line-2);display:grid;gap:7px}
.fd:first-of-type{border-top:0}
.fd__k{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fd__k label{font-size:15.5px;font-weight:500}
.fd__e{display:flex;align-items:stretch;border:1px solid var(--line-2);background:var(--white);
  max-width:340px;transition:border-color var(--sp2)}
.fd__e:focus-within{border-color:var(--forest);box-shadow:0 0 0 2px rgba(17,92,63,.14)}
.fd__u{display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--stone);
  background:var(--paper-2);white-space:nowrap}
.fd__e input{flex:1;min-width:0;min-height:var(--tap);padding:10px 12px;border:0;background:none;
  font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.fd__e input:disabled{color:var(--stone);font-weight:400}
.fd__h{font-size:13.5px;color:var(--stone);line-height:1.45;max-width:62ch}
.fd__h em{font-style:normal;display:block;margin-top:2px;font-size:12.5px}
.fd__x{font-size:13px;color:var(--stone);min-height:var(--tap);display:inline-flex;align-items:center;
  border:1px dashed var(--line-2);padding:0 12px;justify-self:start}
.fd__x.is-on{background:var(--achtung-bg);color:var(--achtung);border-style:solid;border-color:var(--achtung)}
.fd__f{font-size:13px;color:var(--achtung);background:var(--achtung-bg);padding:8px 11px;line-height:1.4}
.fd.is-drin .fd__u{background:var(--forest);color:#fff}
.fd--eng{padding:10px 0;border-top:0}
.mehr{border-top:1px solid var(--line-2)}
.mehr summary{padding:14px 18px;font-size:15px;font-weight:500;color:var(--forest);cursor:pointer;
  min-height:var(--tap);display:flex;align-items:center}

.wahl{display:flex;flex-wrap:wrap;gap:6px}
.wahl__b{min-height:var(--tap);padding:9px 14px;border:1px solid var(--line-2);background:var(--white);
  font-size:14.5px;transition:background var(--sp1),border-color var(--sp1)}
.wahl__b.is-on{background:var(--forest);color:#fff;border-color:var(--forest);font-weight:500}
.wahl--4 .wahl__b{font-size:13.5px}

.obj{border-top:1px solid var(--line-2);padding:14px 18px}
.obj__k{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.obj__k h3{font-size:1rem}
.lk{display:grid;gap:1px;background:var(--line-2)}
.lk__z{background:var(--paper);padding:14px 18px;display:grid;gap:10px}
.lk__z strong{font-size:15.5px;font-weight:500}
.lk__z p{font-size:13.5px;color:var(--stone);margin-top:3px}

/* Aha-Moment */
.aha{border:2px solid var(--forest);padding:20px;display:grid;gap:6px;
  animation:auf var(--sp3) var(--ease) both}
.aha .lab{color:var(--forest)}
.aha strong{font-size:clamp(2.2rem,6.4vw,3.2rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.aha p{font-size:16px}
.aha__q{font-size:13px;color:var(--stone);line-height:1.45;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.aha--leer{border:1px dashed var(--line-2);color:var(--stone);animation:none}
.aha--leer p{font-size:15px;max-width:52ch}
.aha__deck{font-size:13px;color:var(--forest);font-weight:500}

/* Szenario */
.szenario{border:1px solid var(--line-2);padding:18px;display:grid;gap:18px;background:var(--paper)}
.szenario__h h2{font-size:1.3rem}
.szenario__h p{font-size:14px;color:var(--stone);margin-top:5px;max-width:56ch}
.sz{display:grid;gap:8px}
.sz__f{font-size:15px;font-weight:500}
.sz__r{display:flex;align-items:center;gap:10px}
.sz__b{width:var(--tap);height:var(--tap);border:1px solid var(--line-2);background:var(--white);
  display:grid;place-items:center;font-size:20px;flex:none}
.sz__b:hover{background:var(--forest);color:#fff;border-color:var(--forest)}
.sz__r input[type=range]{flex:1;min-width:0;height:var(--tap);accent-color:var(--forest)}
.sz__v{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;word-spacing:-.28em;
  min-width:9ch;text-align:right}
.sz__d{font-size:13px;color:var(--stone)}
.sz__q{font-size:12.5px;color:var(--stone);line-height:1.45}
.stufe__n{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------- Kontext */
.frage{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,52px) var(--gut) 48px}
.frage__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.frage h1{font-size:clamp(1.6rem,4.4vw,2.4rem);max-width:22ch}
.frage__h{font-size:15px;color:var(--stone);margin-top:10px;max-width:52ch}
.opt{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin:22px 0}
.o{background:var(--white);padding:14px;display:grid;grid-template-columns:28px 1fr 22px;gap:12px;
  align-items:center;min-height:var(--tap);transition:background var(--sp1)}
.o:hover{background:var(--paper)}
.o.is-on{background:var(--forest);color:#fff}
.o__k{font-size:12px;color:var(--stone);border:1px solid var(--line-2);width:26px;height:26px;
  display:grid;place-items:center}
.o.is-on .o__k{color:var(--paper);border-color:rgba(244,241,233,.5)}
.o__t{font-size:16px}
.o__m{text-align:right;color:var(--stone)}
.o.is-on .o__m{color:var(--paper)}
.frage__f{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------- Prüfübersicht */
.pruef{max-width:var(--maxw);margin:0 auto;padding:clamp(24px,5vw,52px) var(--gut) 52px;display:grid;gap:24px}
.pruef__k h1{font-size:clamp(1.7rem,4.4vw,2.5rem);margin:12px 0 10px}
.pruef__l{font-size:16px;color:var(--stone);max-width:60ch}
.pruef__g{display:grid;gap:16px}
@media (min-width:900px){ .pruef__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pk{border:1px solid var(--line-2);background:var(--white);padding:16px;align-self:start}
.pk__h{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pk__h .link{margin-left:auto}
.pk__h h2{font-size:1.1rem}
.pk ul{display:grid;gap:1px;background:var(--line-2)}
.pk li{background:var(--white);padding:10px 0;display:grid;grid-template-columns:1fr auto;
  gap:4px 12px;align-items:baseline}
.pk li b{font-weight:500;font-variant-numeric:tabular-nums;word-spacing:-.28em;text-align:right}
.pk li span{font-size:14.5px}
.pk li .mk{grid-column:1/-1;justify-self:start;margin-top:2px}
.pk li em{grid-column:1/-1;font-style:normal;font-size:13px;color:var(--achtung);line-height:1.4}
.pk li.is-offen b{color:var(--stone);font-weight:400}
.pk__f{font-size:13px;color:var(--stone);margin-top:10px;line-height:1.45}
.pruef__n{display:grid;gap:8px;justify-items:start}
.pruef__n p{font-size:13.5px;color:var(--stone)}

/* --------------------------------------------------------------- Resultat */
.res{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 0}
.skip{position:fixed;right:16px;top:70px;z-index:35;background:var(--ink);color:#fff;
  padding:10px 14px;font-size:14px;min-height:var(--tap);display:flex;align-items:center}
.bsp{background:var(--achtung);color:#fff;padding:10px 14px;font-size:14px;display:flex;
  flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.bsp .link{color:#fff}

.fold{padding:clamp(22px,4vw,44px) 0 clamp(18px,3vw,30px);display:grid;
  grid-template-columns:var(--spalten);gap:16px}
.fold>*{grid-column:1/-1}
.fold h1{font-size:clamp(1.7rem,4.8vw,2.8rem);margin:12px 0 0;max-width:22ch}
.fold__z{border:1px solid var(--line);padding:18px;display:grid;gap:5px;align-content:start}
.fold__z strong{font-size:clamp(2.1rem,6vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.fold__z p{font-size:15px;line-height:1.35}
.fold__z small{font-size:12.5px;color:var(--stone);line-height:1.4;margin-top:2px}
.fold__zt{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fold__status{font-size:11px;font-weight:700;color:var(--ink);background:var(--paper-2);padding:4px 7px}
.ton-mittel .fold__status{color:var(--achtung);background:var(--achtung-bg)}
.ton-hoch .fold__status{color:var(--pink-text);background:var(--pink-bg)}
.fold__z.ton-gut strong{color:var(--forest)}
.fold__z.ton-mittel strong{color:var(--achtung)}
.fold__z.ton-hoch strong{color:var(--pink-text)}
.fold__a{background:var(--paper);padding:18px;display:grid;gap:11px;align-content:start}
.fold__a p{font-size:14.5px;color:var(--stone);line-height:1.5}
.ab{display:grid;gap:8px}
.ab>div{display:grid;gap:2px}
.ab span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.ab b{font-size:19px;font-weight:500}
.ab em{font-style:normal;font-size:13.5px;color:var(--stone)}
.ab__x{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);font-weight:700}
.fold__o{border:1px solid var(--line);padding:18px;display:grid;gap:8px;align-content:start}
.fold__o p{font-size:14.5px;color:var(--stone);line-height:1.5}
.fold__o b{color:var(--ink);font-size:17px}
.fold__cta{display:grid;gap:9px;justify-items:start}
.fold__pulse{font-size:15px;line-height:1.42;color:var(--ink);background:var(--pink-bg);
  border-left:3px solid var(--pink-ink);padding:11px 13px;max-width:32ch}
.fold__cta small{font-size:13.5px;color:var(--stone)}
.fold__alt{font-size:13.5px;min-height:36px}
.fold__why{display:grid;gap:6px;margin-top:3px;max-width:34ch}
.fold__why li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.35;color:var(--stone)}
.fold__why li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--forest);border-radius:50%}
@media (min-width:1000px){
  .fold{align-items:start}
  .fold__k{grid-column:1/8}
  .fold__z{grid-column:8/13}
  .fold__a{grid-column:1/6}
  .fold__o{grid-column:6/9}
  .fold__cta{grid-column:9/13;align-content:start;padding-top:2px}
}

.rbild,.schritte,.rsz,.zh,.weg,.relev{padding:clamp(22px,3.5vw,40px) 0;border-top:1px solid var(--line)}
.rbild__h{display:grid;gap:7px;margin-bottom:18px}
.rbild__h h2{font-size:clamp(1.4rem,3.2vw,2rem);max-width:24ch}
.rbild__e{font-size:15px;color:var(--stone);max-width:70ch}
.schritte__h{margin-bottom:16px}
.schritte__h h2{font-size:clamp(1.4rem,3.2vw,2rem)}
.schritte ol{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
/* Die Stufe steht als Wort in der Spalte, nicht als Zahl. «Als Nächstes»
   braucht mehr Platz als «02», deshalb eine eigene Spaltenbreite statt 34px.
   Unter 560px rutscht die Stufe über den Eintrag, sonst bleibt für den Text
   auf dem Telefon nichts übrig. */
.schritte li{background:var(--white);padding:16px;display:grid;
  grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:14px}
.schritte__n{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pink-ink);align-self:start;padding-top:2px}
@media (max-width:559px){
  .schritte li{grid-template-columns:minmax(0,1fr);gap:6px}
  .schritte__n{padding-top:0}
}
.schritte__aus{margin-top:14px;font-size:14px;color:var(--stone);max-width:62ch}
.schritte h3{font-size:1.05rem;margin-bottom:5px}
.schritte p{font-size:14.5px;color:var(--stone);line-height:1.5}
.schritte__q{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.schritte__q em{font-style:normal;font-size:12.5px;color:var(--stone)}
.zh__g{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.zh__g article{background:var(--white);padding:16px;display:grid;gap:7px;align-content:start}
.zh__g span{font-size:12px;color:var(--stone)}
.zh__g h3{font-size:1rem}
.zh__g p{font-size:14px;color:var(--stone);line-height:1.5}
@media (min-width:720px){ .zh__g{grid-template-columns:repeat(3,1fr)} }

.weg summary{font-size:15px;font-weight:500;color:var(--forest);cursor:pointer;min-height:var(--tap);
  display:flex;align-items:center;gap:8px}
.weg__k{padding-top:14px;display:grid;gap:18px}
.weg__k h3{font-size:1rem;color:var(--forest)}
.weg__l{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.weg__l li{background:var(--white);padding:9px 12px;display:grid;grid-template-columns:1fr auto;gap:3px 14px}
.weg__l b{font-weight:500;font-variant-numeric:tabular-nums;word-spacing:-.28em;text-align:right}
.weg__l span{font-size:14px}
.weg__l em{grid-column:1/-1;font-style:normal;font-size:12.5px;color:var(--stone);line-height:1.45}
.weg__a li,.weg__q li{border-left:3px solid var(--line-2);padding:8px 0 8px 12px;margin-bottom:9px;
  font-size:13.5px;color:var(--stone);line-height:1.5}
.weg__a b,.weg__q b{color:var(--ink);font-weight:500}
.weg__a em,.weg__q em{display:block;font-style:normal;font-size:12.5px;margin-top:3px}
.weg__q a{color:var(--forest);font-size:13px;display:inline-flex;min-height:32px;align-items:center}
.weg__g{font-size:13.5px;color:var(--stone);line-height:1.55;max-width:80ch}

.relev{display:grid;gap:12px;justify-items:start}
.relev p{font-size:16px;font-weight:500}
.relev div[role=group]{display:flex;gap:8px;flex-wrap:wrap}
.rb{min-height:var(--tap);padding:10px 20px;border:1px solid var(--line-2);font-size:15px}
.rb.is-on{background:var(--forest);color:#fff;border-color:var(--forest)}
.relev__t{display:grid;gap:6px;width:100%;max-width:520px;font-size:14px;color:var(--stone)}
.relev__t textarea{border:1px solid var(--line-2);padding:10px;font-size:15px}

.abschluss{background:var(--forest);color:var(--paper);margin:clamp(22px,3.5vw,40px) calc(var(--gut)*-1) 0;
  padding:clamp(28px,4.5vw,52px) var(--gut);display:grid;gap:24px}
.abschluss h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:12px 0 10px;max-width:22ch}
.abschluss p{color:var(--hell);font-size:15.5px;max-width:52ch;line-height:1.5}
.abschluss__do{display:grid;gap:12px;justify-items:start;align-content:start}
@media (min-width:900px){ .abschluss{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:40px} }

.fuss{padding:22px 0 40px;display:grid;gap:12px}
.recht{font-size:12.5px;color:var(--stone);line-height:1.6;max-width:88ch}
.stempel{display:flex;gap:12px;align-items:baseline;font-size:13px;color:var(--stone)}
.stempel strong{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}

.mobile-cta{display:none}
@media (max-width:719px){
  body[data-screen="resultat"] .res{padding-bottom:112px}
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;
    grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 16px;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,35,27,.12)}
  .mobile-cta>div{display:grid;gap:1px;min-width:74px}
  .mobile-cta span{font-size:10.5px;color:var(--stone);text-transform:uppercase;font-weight:700}
  .mobile-cta strong{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
  .mobile-cta .btn{width:100%;font-size:14px;padding:10px 12px;line-height:1.25}
}
@media (max-width:390px){
  .mobile-cta{grid-template-columns:1fr}
  .mobile-cta>div{display:none}
  body[data-screen="resultat"] .res{padding-bottom:88px}
}

/* --------------------------------------------------------------- Ergänzen */
.erg{max-width:880px;margin:0 auto;padding:clamp(24px,5vw,52px) var(--gut) 52px;display:grid;gap:22px}
.erg__k h1{font-size:clamp(1.6rem,4.2vw,2.4rem);margin:12px 0 10px}
.erg__l{font-size:16px;color:var(--stone);max-width:58ch}
.erg__l2{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.erg__l2 li{background:var(--white);padding:16px;display:grid;gap:11px}
.erg__l2 li.is-fertig{background:var(--paper)}
.erg__n{font-size:12px;color:var(--stone)}
.erg__l2 strong{font-size:16px;font-weight:500}
.erg__l2 p{font-size:14px;color:var(--stone);margin-top:4px;line-height:1.45}
.erg__f{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ------------------------------------------------------------------ Modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal__bg{position:absolute;inset:0;background:rgba(16,35,27,.55);width:100%;height:100%}
.modal__k{position:relative;background:var(--white);max-width:560px;width:100%;padding:28px 24px 22px;
  max-height:92vh;overflow:auto;display:grid;gap:14px}
.modal__k h2{font-size:1.5rem}
.modal__l{font-size:15px;color:var(--stone);line-height:1.5}
.modal__x{position:absolute;right:8px;top:8px;width:var(--tap);height:var(--tap);display:grid;
  place-items:center;font-size:22px;color:var(--stone)}
.modal__k--ok{text-align:center;justify-items:center}
.tick{width:52px;height:52px;border-radius:50%;background:var(--forest);color:#fff;display:grid;
  place-items:center;font-size:24px}
.felder2{display:grid;gap:12px}
.felder2 label{display:grid;gap:5px;font-size:14px;color:var(--stone)}
.felder2 input{min-height:var(--tap);border:1px solid var(--line-2);padding:10px 12px;font-size:16px;color:var(--ink)}
.felder2 .w{grid-column:1/-1}
@media (min-width:520px){ .felder2{grid-template-columns:1fr 1fr} }
.fmt-w{border:0;display:grid;gap:8px}
.fmt{display:flex;gap:8px;flex-wrap:wrap}
.fmt label{display:flex;align-items:center;gap:7px;min-height:var(--tap);border:1px solid var(--line-2);
  padding:0 14px;font-size:15px}
.fmt__h{font-size:13px;color:var(--stone)}
.zustimmung{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:13.5px;color:var(--stone);
  line-height:1.5;align-items:start}
.zustimmung input{width:22px;height:22px;margin-top:2px}
.zustimmung a{color:var(--forest)}
.modal__keine{font-size:14px;color:var(--stone);background:var(--paper);padding:11px 13px;line-height:1.45}
.modal__proto{font-size:12.5px;color:var(--stone);line-height:1.5}
.fehler{background:var(--pink-bg);color:var(--pink-text);padding:13px;display:grid;gap:4px}
.fehler p{font-size:14.5px}
.qmeta{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.qmeta li{background:var(--white);padding:9px 12px;display:flex;justify-content:space-between;gap:14px;font-size:14px}
.qmeta span{color:var(--stone)}
.qgrenze{font-size:14px;color:var(--achtung);background:var(--achtung-bg);padding:11px 13px;line-height:1.45}

/* ------------------------------------------------------------- Hauptbild - */
.hb{display:grid;gap:14px}
.hb figcaption{font-size:13px;letter-spacing:.05em;color:var(--stone)}
.hb__t{font-size:14px;color:var(--stone);line-height:1.55;max-width:80ch}
.hs{display:grid;gap:6px}
.hs__spur{position:relative;height:42px;background:var(--paper-2)}
.hs__z{position:absolute;top:0;bottom:0;display:block}
.hs__z:nth-child(1){background:#e6ece7}
.hs__z:nth-child(2){background:#f3e9d8}
.hs__z:nth-child(3){background:#f7e4ee}
.hs__spur u{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5;text-decoration:none}
.hs__spur u em{position:absolute;top:-16px;left:4px;font-style:normal;font-size:11px;color:var(--stone);white-space:nowrap}
.hs__spur i{position:absolute;inset:0 auto 0 0;background:var(--forest);transition:width var(--sp3) var(--ease)}
.hs__spur b{position:absolute;top:50%;font-size:14px;font-weight:500;white-space:nowrap}
.hs__spur b.is-innen{transform:translate(-100%,-50%);margin-left:-10px;color:#fff}
.hs__spur b.is-aussen{transform:translateY(-50%);margin-left:10px;color:var(--ink)}
.hs__l{font-size:13px;color:var(--stone)}
.hst{display:flex;min-height:74px;border:1px solid var(--line-2);overflow:hidden}
.hst span{display:grid;align-content:center;gap:2px;padding:10px 8px;min-width:0;overflow:hidden}
.hst em{font-style:normal;font-size:11.5px;line-height:1.25}
.hst b{font-size:14px;font-weight:500}
.hst .s0{background:var(--forest);color:var(--paper)}
.hst .s1{background:var(--forest-2);color:var(--paper)}
.hst .s2{background:var(--paper-2)}
.hst .s3{background:#e3ddcd}
.hst .s4{background:#efeadd}
.hst .s5{background:var(--paper)}
.hp{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.hp div{background:var(--white);padding:11px 13px;display:grid;gap:3px}
.hp span{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--stone)}
.hp b{font-size:17px;font-weight:500}
@media (min-width:600px){ .hp{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .hp{grid-template-columns:repeat(4,1fr)} }
.hb svg{width:100%;height:auto;background:var(--paper);padding:6px}
.hb__ziel{stroke:var(--pink-ink);stroke-width:1.5;stroke-dasharray:5 4}
.hb__zt{font-size:12px;fill:var(--pink-text)}
.hb .k{fill:none;stroke-width:2.5;stroke-linejoin:round}
.hb .k--tief{stroke:#4d6f62}
.hb .k--mittel{stroke:var(--forest);stroke-width:3.5}
.hb .k--hoch{stroke:var(--forest-2)}
.hleg{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.hleg li{display:flex;align-items:center;gap:7px;color:var(--stone)}
.hleg li::before{content:"";width:16px;height:3px;background:currentColor}
.hleg .k--tief{color:#4d6f62}
.hleg .k--mittel{color:var(--forest)}
.hleg .k--hoch{color:var(--forest-2)}
.hunb{display:flex;flex-wrap:wrap;gap:8px}
.hunb li{font-size:13px;color:var(--achtung);border:1px dashed var(--achtung);padding:5px 10px;display:flex;gap:8px}
.hunb span{color:var(--stone)}
.ha{position:relative;padding:30px 0 80px;margin-top:8px}
.ha__l{position:relative;height:4px;background:var(--paper-2)}
.ha__l i{position:absolute;inset:0 auto 0 0;background:var(--forest);transition:width var(--sp3) var(--ease)}
.ha__p,.ha__jetzt{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:5px}
.ha__p b,.ha__jetzt b{width:13px;height:13px;border-radius:50%;background:var(--paper-2);
  border:2px solid var(--forest);margin-top:24px;display:block}
.ha__p.is-knapp b{background:var(--achtung);border-color:var(--achtung)}
.ha__p.is-unterschritten b{background:var(--pink-ink);border-color:var(--pink-ink)}
.ha__p span,.ha__jetzt span{font-size:11px;line-height:1.25;width:11ch;text-align:center;color:var(--stone)}
.ha__jetzt b{background:var(--forest)}
.ha__jetzt span{color:var(--forest);font-weight:500}
.hf{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.hf li{background:var(--white);padding:11px 13px;display:grid;gap:3px}
.hf b{font-size:15px;font-weight:500}
.hf span{font-size:12.5px;font-weight:700;letter-spacing:.05em}
.hf li.is-reicht span{color:var(--forest)}
.hf li.is-knapp span{color:var(--achtung)}
.hf li.is-unterschritten span{color:var(--pink-text)}
.hf em{font-style:normal;font-size:13px;color:var(--stone);line-height:1.45}
.hbb{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;margin-bottom:10px}
.hbb span{font-size:13px;color:var(--stone)}
.hbb b{font-size:15px;font-weight:500}
.hbb i{grid-column:1/-1;display:block;height:22px;background:var(--forest);transition:width var(--sp3) var(--ease)}
.hbb.is-fix i{background:var(--paper-2)}
.hph{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.hph li{background:var(--white);padding:12px 13px;display:grid;gap:3px}
.hph b{font-size:15px;font-weight:500}
.hph span{font-size:12.5px;color:var(--stone)}
.hph em{font-style:normal;font-size:13.5px;color:var(--achtung)}
.hph strong{font-size:14px;font-weight:500}
.hj{display:flex;gap:4px;align-items:flex-end;height:180px}
.hj__j{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:100%}
.hj__j i{width:100%;background:var(--forest);transition:height var(--sp3) var(--ease)}
.hj__j.is-hoch i{background:var(--pink-ink)}
.hj__j em{font-style:normal;font-size:10.5px;color:var(--stone);text-align:center;line-height:1.15}
.hj__j u{font-size:11px;color:var(--stone);text-align:center;text-decoration:none}
.ht{font-size:14px;border:1px solid var(--line-2)}
.ht caption{text-align:left;font-size:13px;color:var(--stone);padding-bottom:6px}
.ht th,.ht td{padding:9px 11px;border-bottom:1px solid var(--line-2);text-align:left}
.ht th{font-weight:500;background:var(--paper);font-size:13px}
.ht td{font-variant-numeric:tabular-nums}
.hm{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.hm__z{background:var(--white);padding:14px;display:grid;gap:5px;align-content:start;min-height:96px}
.hm__z span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--stone)}
.hm__z strong{font-size:15px;font-weight:500;line-height:1.3}
.hm__z em{font-style:normal;font-size:12.5px;color:var(--stone);line-height:1.4}
.hm__z.st-fehlt{background:var(--pink-bg)}
.hm__z.st-fehlt span{color:var(--pink-text)}
.hm__z.st-unklar span{color:var(--achtung)}
.hm__z.st-aktuell span{color:var(--forest)}
@media (min-width:720px){ .hm{grid-template-columns:repeat(3,1fr)} }

/* ------------------------------------------------ Aufbau höchstens 1,2 s - */
.res.is-aufbau .r1{animation:auf var(--sp3) var(--ease) both}
.res.is-aufbau .r2{animation:auf var(--sp3) var(--ease) 300ms both}
.res.is-aufbau .r3{animation:auf var(--sp3) var(--ease) 640ms both}
@keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}
@media (max-width:719px){
  .skip{top:auto;bottom:14px;left:12px;right:12px;justify-content:center}
  .fold__z,.fold__a,.fold__o{padding:15px}
  .hj{height:140px}
}

/* Gestapelte Balken kippen auf kleinen Geräten in eine Liste, damit keine
   Beschriftung abgeschnitten wird. */
@media (max-width:560px){
  .hst{flex-direction:column;min-height:0}
  .hst span{padding:9px 11px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .hst em{font-size:12.5px}
  .hs__spur u em{display:none}
}

/* Was nicht berechenbar ist, wird nicht gezeichnet, sondern benannt. */
.hb__leer{border:1px dashed var(--line-2);background:var(--paper);color:var(--stone);
  padding:16px;font-size:14px;line-height:1.5}

/* Plausibilitätsfehler stehen am Feld, nicht in einer Sammelmeldung. */
.fd.is-fehler .fd__e{border-color:var(--pink-ink);box-shadow:0 0 0 2px rgba(181,29,104,.14)}
.fd.is-fehler .fd__u{background:var(--pink-bg);color:var(--pink-text)}
.fd__e2{font-size:13.5px;color:var(--pink-text);background:var(--pink-bg);padding:8px 11px;line-height:1.45}
.fd__p{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);
  border:1px solid var(--line-2);padding:2px 7px}
.stufe__f{font-size:14px;color:var(--pink-text);align-self:center}

/* Datenerfassung und fachliche Bestätigung sind zwei verschiedene Dinge. */
.fold__o{gap:0}
.fold__o1{padding-bottom:12px;border-bottom:1px solid var(--line);display:grid;gap:5px}
.fold__o2{padding-top:12px;display:grid;gap:7px;justify-items:start}
.fold__o1 p{font-size:15px;color:var(--stone)}
.fold__o1 b{color:var(--forest);font-size:17px}
.fold__o2 p{font-size:14.5px;color:var(--stone);line-height:1.45}
.felder2 label em{font-style:normal;color:var(--stone);font-weight:400}

/* Kampagneneinstieg: kein Erklärblock vor der ersten Handlung. */
.stufe__k--paid h1{font-size:clamp(1.8rem,5vw,2.9rem);max-width:18ch}
.stufe__v{font-size:14px;color:var(--forest);font-weight:500;margin-top:12px}
.vorschau{border:1px dashed var(--line-2);padding:16px 18px;display:grid;gap:11px;background:var(--paper)}
.vorschau__g{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.vorschau__g div{background:var(--white);padding:11px 13px;display:grid;gap:3px}
.vorschau__g em{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.vorschau__g b{font-size:22px;font-weight:500;color:var(--line-2)}
@media (min-width:720px){ .vorschau__g{grid-template-columns:repeat(3,1fr)} }
.grenze{border-top:1px solid var(--line-2);padding:0 18px 14px}
.grenze summary{padding:14px 0;font-size:14.5px;font-weight:500;color:var(--forest);cursor:pointer;
  min-height:var(--tap);display:flex;align-items:center}
.grenze p{font-size:13.5px;color:var(--stone);line-height:1.5;margin-bottom:6px;max-width:70ch}
.grenze b{color:var(--ink);font-weight:500}
.sz--leer{opacity:.6}

/* =============================================================================
   REFLOW BEI 320 PIXELN
   Ein Eingabefeld bringt seine eigene Mindestbreite mit. In einem Raster wird
   daraus die Spaltenbreite — und die Seite läuft über. Deshalb dürfen die
   Rasterspuren nie breiter werden als ihr Behälter, und Felder tragen keine
   Eigenbreite.
   ========================================================================== */
input,textarea,select{max-width:100%}
.fd__e input{width:100%;min-width:0}
.felder2 input{width:100%;min-width:0}
.stufe,.pruef,.erg,.frage,.res{grid-template-columns:minmax(0,1fr)}
.stufe>*,.pruef>*,.erg>*,.res>*,.fold>*,.felder>*,.fd>*,.pk>*,.pruef__g>*{min-width:0}
.hst,.hb__paar,.hp,.zh__g,.karten,.opt,.erwartung,.versprechen__l,.weg__l,.qmeta{min-width:0}
.hb,.hb *{min-width:0}
.ht{display:block;overflow-x:auto}
@media (max-width:400px){
  .fd__e{max-width:none}
  .sz__v{min-width:7ch}
  .etappen{font-size:11.5px;gap:4px}
  .etappen li{padding:3px 7px}
}

/* Der Szenario-Regler: Knöpfe, Schiene und Wert dürfen zusammen nie breiter
   werden als die Spalte. Auf sehr schmalen Geräten steht der Wert darunter. */
.szenario,.rsz{min-width:0}
.szenario>*,.rsz>*,.sz>*{min-width:0}
.sz__r{flex-wrap:wrap;min-width:0}
.sz__r input[type=range]{flex:1 1 120px;min-width:0}
.sz__v{flex:0 0 auto}
@media (max-width:420px){
  .sz__r{display:grid;grid-template-columns:var(--tap) 1fr var(--tap);align-items:center;gap:8px}
  .sz__r input[type=range]{grid-column:2}
  .sz__v{grid-column:1/-1;text-align:left;min-width:0}
}

/* =============================================================================
   GEFÜHRTE STRECKE
   Eine Frage, eine Zahl, eine Folge. Die Zahl ist der Held der Ansicht, der
   Regler das Werkzeug, die Wirkungszeile die Belohnung. Kein Punktwert, keine
   Feier — die Belohnung ist, dass sofort etwas Wahres dasteht.
   ========================================================================== */
/* Nur für Hilfstechnik sichtbar. Ohne diese Regel stehen die Schrittnamen
   sichtbar übereinander — genau das ist beim ersten Aufbau passiert. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.gf{max-width:640px;margin:0 auto;padding:28px 20px 64px;display:grid;gap:26px}
.gf__k{display:grid;gap:14px}
.gf__s{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
.gf__d{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.gf__d li{width:26px;height:4px;background:var(--line-2);border-radius:2px;
  transition:background .22s ease,transform .22s ease}
.gf__d li.is-fertig{background:var(--forest)}
.gf__d li.is-jetzt{background:var(--pink);transform:scaleY(1.75)}

.gf__b{display:grid;gap:22px}
.gf__f{font-size:clamp(26px,5.6vw,38px);line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;margin:0}
.gf__u{margin:-12px 0 0;font-size:15px;line-height:1.5;color:var(--stone);max-width:46ch}

/* --- Steller: Zahl und Regler auf demselben Wert ------------------------- */
.st{display:grid;gap:14px;padding:26px 22px 20px;background:var(--paper);
  border:1px solid var(--line);border-radius:2px}
.st__w{display:flex;align-items:baseline;gap:10px;justify-content:center;min-height:64px}
.st__e{font-size:19px;font-weight:500;color:var(--stone);letter-spacing:.02em}
.st__e--n{font-size:19px}
.st__z{font-size:clamp(38px,9vw,58px);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);background:none;border:0;
  border-bottom:2px solid transparent;padding:0 2px 4px;text-align:center;
  width:min(9ch,100%);min-width:0;transition:border-color .2s ease}
.st__z::placeholder{color:var(--line-2)}
.st__z:focus{outline:none;border-bottom-color:var(--forest)}
.st__z:disabled{color:var(--stone);opacity:.55}
.st:not(.is-an) .st__e{opacity:.45}

/* Regler: dicke Spur, gefüllter Weg, grosser Griff. --f trägt den Füllstand. */
.st__r{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;
  cursor:pointer;margin:0}
.st__r:focus-visible{outline:3px solid var(--forest);outline-offset:4px;border-radius:4px}
.st__r::-webkit-slider-runnable-track{height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--forest) calc(var(--f,0)*100%),var(--line-2) calc(var(--f,0)*100%))}
.st__r::-moz-range-track{height:10px;border-radius:5px;background:var(--line-2)}
.st__r::-moz-range-progress{height:10px;border-radius:5px;background:var(--forest)}
.st__r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;
  border-radius:50%;background:var(--white);border:3px solid var(--forest);margin-top:-12px;
  box-shadow:0 2px 10px rgba(12,62,43,.22);transition:transform .16s ease,box-shadow .16s ease}
.st__r::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--white);
  border:3px solid var(--forest);box-shadow:0 2px 10px rgba(12,62,43,.22)}
.st__r:active::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 4px 16px rgba(12,62,43,.3)}
.st:not(.is-an) .st__r::-webkit-slider-thumb{border-color:var(--stone)}
.st--wahl .st__r,.st.is-unbekannt .st__r{opacity:.4;pointer-events:none}
.st__b{display:flex;justify-content:space-between;font-size:12.5px;color:var(--stone);
  font-variant-numeric:tabular-nums;margin-top:-8px}
.st__t{margin:2px 0 0;text-align:center;font-size:13.5px;color:var(--forest);font-weight:500}

/* --- Auswahl statt Eingabe ---------------------------------------------- */
.st--wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;
  background:none;border:0;padding:0}
.st__w2{display:grid;gap:3px;padding:16px 10px;background:var(--white);
  border:1px solid var(--line-2);border-radius:2px;cursor:pointer;text-align:center;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.st__w2 b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.st__w2 em{font-size:12.5px;font-style:normal;color:var(--stone);font-variant-numeric:tabular-nums}
.st__w2:hover{border-color:var(--forest)}
.st__w2.is-on{background:var(--forest);border-color:var(--forest);color:var(--white)}
.st__w2.is-on em{color:var(--hell)}

/* --- Wirkung: die Belohnung für jede Bewegung --------------------------- */
.gf__wr{min-height:58px;display:flex;align-items:center}
.gf__w{margin:0;padding:15px 18px;background:var(--white);border-left:3px solid var(--pink);
  display:grid;gap:5px;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 30px rgba(16,35,27,.08);animation:gfAuf .26s ease both}
.gf__wlabel{font-size:11px;text-transform:uppercase;font-weight:700;color:var(--pink-text)}
.gf__w strong{font-size:16px;font-weight:500}
.gf__w small{font-size:12.5px;color:var(--stone)}
@keyframes gfAuf{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.gf__q,.gf__qz{font-size:12.5px;color:var(--stone);line-height:1.45;margin:0}

.gf__x{justify-self:start;background:none;border:1px solid var(--line-2);border-radius:2px;
  padding:9px 15px;font-size:13.5px;color:var(--stone);cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.gf__x:hover{border-color:var(--forest);color:var(--forest)}
.gf__x.is-on{background:var(--forest);border-color:var(--forest);color:var(--white)}

.gf__n{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:2px}
.gf__n .btn{min-height:54px;font-size:17px;padding:0 28px}
.gf__n .btn--primary{flex:1;justify-content:center}
.btn--still{background:none;border:1px solid var(--line-2);color:var(--stone)}
.btn--still:hover{border-color:var(--forest);color:var(--forest)}
.gf__n .btn:disabled{opacity:.38;cursor:not-allowed}

.gf__h summary{font-size:14px;color:var(--forest);cursor:pointer;padding:8px 0}
.gf__h p{font-size:14px;line-height:1.55;color:var(--stone);margin:4px 0 0;max-width:52ch}
.gf__g{font-size:12.5px;color:var(--stone);text-align:center;margin:0}

@media (max-width:719px){
  .gf{padding:20px 16px 96px;gap:20px}
  .gf__b{gap:18px}
  .st{padding:22px 16px 16px}
  /* Die Navigation bleibt am Daumen. */
  .gf__n{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--white) 26%);
    padding:14px 0 10px;margin:0 -16px;padding-left:16px;padding-right:16px}
}
@media (max-width:560px){
  .hero__proof{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gf__w{animation:none}
  .gf__d li,.st__r::-webkit-slider-thumb{transition:none}
}

/* Erwartung statt Leere: der Bereich verspricht, was die erste Bewegung zeigt. */
.gf__e{margin:0;padding:15px 18px;border-left:3px solid var(--line-2);font-size:15px;
  line-height:1.45;color:var(--stone)}
.gf__u--stark{color:var(--ink);font-size:16px}
/* Ein gesperrter Weiter-Knopf sieht aus wie gesperrt, nicht wie kaputt. */
.gf__n .btn--primary:disabled{background:var(--white);color:var(--stone);
  border:1px solid var(--line-2);opacity:1}

/* Der Hook steht über der Frage, nicht an ihrer Stelle: er schafft die
   Spannung, die Frage macht sie bearbeitbar. */
.gf__hk{margin:0 0 -8px;font-size:clamp(19px,4.2vw,24px);line-height:1.22;font-weight:500;
  letter-spacing:-.015em;color:var(--forest);text-wrap:balance;max-width:22ch}
.gf__n .btn--primary[aria-disabled="true"]{background:var(--white);color:var(--stone);
  border:1px solid var(--line-2);cursor:default}
.gf__m{margin:0;font-size:14px;color:var(--pink-text);font-weight:500;
  animation:gfAuf .22s ease both}
.st__f{margin:0;min-height:20px;font-size:13.5px;color:var(--pink-text);font-weight:500;text-align:center}
.st.is-fehler{border-color:var(--pink)}

/* =============================================================================
   WIRKUNGSBILD
   Was eine Entscheidung sonst noch bewegt. Wo der Kern rechnet, steht eine
   Zahl aus den eigenen Angaben; wo nicht, bleibt der allgemeine Zusammenhang.
   Der Unterschied ist an der Herkunftsmarke ablesbar, nicht am Ton.
   ========================================================================== */
.wb{display:grid;gap:20px}
.wb__g{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:860px){.wb__g{grid-template-columns:1fr 1fr}}
.wb__z{background:var(--white);padding:20px 20px 18px;display:grid;gap:7px;align-content:start;
  border-left:3px solid var(--line-2)}
.wb__z[data-stand="gut"]{border-left-color:var(--forest)}
.wb__z[data-stand="achtung"]{border-left-color:var(--achtung)}
.wb__z[data-stand="kritisch"]{border-left-color:var(--pink)}
.wb__p{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--stone)}
.wb__p i{font-style:normal;color:var(--line-2);padding:0 2px}
.wb__v{margin:0;font-size:clamp(26px,4.4vw,34px);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.wb__z[data-stand="gut"] .wb__v{color:var(--forest)}
.wb__z[data-stand="achtung"] .wb__v{color:var(--achtung)}
.wb__z[data-stand="kritisch"] .wb__v{color:var(--pink-text)}
.wb__t{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.wb__z[data-stand="text"] .wb__t{color:var(--stone)}
.wb__m{margin:2px 0 0}

/* =============================================================================
   GEFÜHRTE STRECKE · DESKTOP
   Die 640-Pixel-Spalte war mobil richtig und auf einem 27-Zoll-Bildschirm
   falsch: ein schmaler Streifen in leerem Papier. Ab 900 Pixeln wird daraus
   eine Komposition — die Frage links als redaktioneller Teil, das Instrument
   rechts als Arbeitsfläche.
   ========================================================================== */
@media (min-width:900px){
  .gf{max-width:1080px;padding:44px 32px 72px;
    grid-template-columns:minmax(0,7fr) minmax(0,9fr);
    grid-template-areas:"kopf steller";
    column-gap:56px;align-items:start}
  .gf__k{grid-area:kopf;align-self:start}
  .gf__b{grid-area:steller;display:grid;gap:24px}
  .gf__f{font-size:clamp(34px,3.4vw,46px)}
  .gf__u{font-size:16.5px;max-width:34ch}
  .st{padding:34px 30px 24px}
  .st__z{font-size:clamp(44px,4.4vw,62px)}
  .gf__wr{min-height:66px}
  .gf__g{grid-column:1/-1;text-align:left;padding-top:8px}
}
/* Typografie, die nicht von einer bestimmten Schrift abhängt.
   Die alten Werte waren auf Circular XX abgestimmt; auf Manrope oder einem
   Systemersatz wirken sie gequetscht. */
.gf__f,.gf__hk{letter-spacing:-.018em}
.st__z,.regler__z{letter-spacing:-.02em}
.wb__v{letter-spacing:-.018em}

/* Der leere Zustand darf nicht wie ein Fehler aussehen. Ohne Wert steht das
   Feld eng bei der Einheit, damit «CHF —» als eine Einheit gelesen wird. */
.st:not(.is-an) .st__z{width:3.2ch}
.st:not(.is-an) .st__z::placeholder{color:var(--stone);opacity:.5}
.st__w{gap:12px}

@media (min-width:900px){
  /* Auf hohen Bildschirmen sitzt das Instrument in der Mitte, nicht am Rand. */
  .gf{min-height:calc(100vh - 150px);align-content:center}
  /* Ein gesperrter Knopf ist ein Hinweis, kein Hauptdarsteller. */
  .gf__n{justify-content:flex-start}
  .gf__n .btn--primary{flex:0 1 auto;min-width:220px}
  .gf__n .btn--primary[aria-disabled="true"]{border-style:dashed;color:var(--stone)}
}
/* Regler im Formular: schlanker als in der geführten Strecke, weil hier
   mehrere untereinander stehen. */
.fd__r{display:grid;gap:2px;margin-top:6px}
.fd__r .st__r{height:34px}
.fd__r .st__r::-webkit-slider-runnable-track{height:8px}
.fd__r .st__r::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px;border-width:2px}
.fd__r .st__b{font-size:11.5px;margin-top:-4px}
/* Ein Hinweis ist keine Fehlermeldung: Achtungsfarbe, kein Alarm. */
.fd__e2--h{color:var(--achtung)}
.st__f--h{color:var(--achtung)}
.st.is-hinweis{border-color:var(--achtung)}
.fd.is-hinweis{border-color:var(--achtung)}

/* -----------------------------------------------------------------------------
   Lange Zusammensetzungen · «Finanzentscheidung», «Vorsorgeausweis»
   -----------------------------------------------------------------------------
   Deutsche Komposita sind breiter als ein Telefon. Ein Rasterkind schrumpft
   von sich aus nicht unter seine kleinste Wortbreite, deshalb schob eine
   einzelne Überschrift die ganze Seite über 320px hinaus. Zwei Regeln
   verhindern das überall, nicht nur an der Stelle, wo es aufgefallen ist:
   Raster dürfen schrumpfen, Wörter dürfen trennen. lang="de-CH" steht im
   Dokument, deshalb trennt der Browser nach deutschen Regeln.
   -------------------------------------------------------------------------- */
.hero > *, .gf > *, .res > *, .fold > *, .rbild > *, .wb > * { min-width: 0 }
h1, h2, h3, .gf__f, .fold__k, .lab { hyphens: auto; overflow-wrap: break-word }
p, li, dd, dt, label, .hero__lead, .hero__start { hyphens: auto; overflow-wrap: break-word }