/* Whisper Deals · Investorprofil (/start/)
   Übernommen aus Entwurf v7 (13.09.2026), maschinell auf den Bereich .fn begrenzt
   und von Gold und Nacht auf die Marke „Aufbruch Glas“ umgefärbt. Layout und
   Mechanik sind unverändert. Die Begründungen zu den einzelnen Regeln stehen im
   Original: archiv/2026-09-altes-modell/website/entwurf/index.html. */
.fn{
  --bg:#07130E;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085);
  --gb:rgba(255,255,255,.12); --gb2:rgba(255,255,255,.24);
  --silver:#A2B4AA; --silver-bright:#D3E3D9;
  --gold:#5FD69A; --gold-bright:#C6F36B; --gold-deep:#23A865; --gold-glow:rgba(95,214,154,.38);
  --ok:#5FD69A;
  --text:#EEF5F0; --mute:#A9BBB1; --faint:#B4C5BB;
  --card:#fff; --ct:#0E1C15; --cm:#4E5C55; --chair:#D3DED8; --gold-oncard:#0B7A4B;
  --r-lg:24px; --r-md:18px; --r-sm:12px; --pill:999px;
  --eo:cubic-bezier(.16,1,.3,1);
  --banner:96px;
  color:var(--text); font-size:17px; line-height:1.66;
}
.fn .wrap{max-width:880px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.fn h1,.fn h2,.fn h3{line-height:1.15;margin:0 0 .5em;font-weight:760;letter-spacing:-.015em}
.fn h1{font-size:clamp(1.85rem,3.8vw,2.8rem)}
.fn h2{font-size:clamp(1.36rem,2.5vw,1.88rem)}
.fn h3{font-size:1.03rem}
.fn p{margin:0 0 1em}
.fn a{color:var(--gold-bright)}
.fn strong,.fn b{font-weight:730}
.fn .trust{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.fn .trust li{display:inline-flex;align-items:center;gap:7px;background:rgba(95,214,154,.1);
  border:1px solid rgba(95,214,154,.34);border-radius:var(--pill);padding:7px 14px 7px 11px;
  font-size:.84rem;font-weight:700;color:var(--silver-bright)}
.fn .trust svg{width:15px;height:15px;flex:0 0 auto;color:var(--ok)}
@media(max-width:560px){
.fn .trust{gap:6px;margin-top:15px}
.fn .trust li{font-size:.79rem;padding:5px 11px 5px 9px;gap:6px}
.fn .trust svg{width:13px;height:13px}
}
.fn .intro{padding:clamp(18px,3vw,30px) 0 2px}
.fn .kicker{display:inline-flex;align-items:center;gap:9px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:14px}
.fn .kicker::before{content:"";width:24px;height:1px;background:var(--gold)}
.fn .lead{font-size:clamp(1.01rem,1.5vw,1.13rem);color:var(--mute)}
.fn .stage{padding:clamp(14px,2.4vw,20px) 0 clamp(34px,5vw,54px)}
.fn .card{background:var(--glass);border:1px solid var(--gb);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px -32px rgba(0,0,0,.8);
  scroll-margin-top:calc(var(--banner) + 14px)}
.fn .card[hidden]{display:none}
.fn .q{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:760;letter-spacing:-.015em;margin:0 0 7px}
.fn .why{color:var(--mute);font-size:.92rem;margin:0 0 18px}
.fn .why b{color:var(--silver-bright)}
.fn .grp{padding-top:26px;margin-top:26px;border-top:1px solid var(--gb)}
.fn .grp:first-of-type{padding-top:0;margin-top:0;border-top:0}
.fn .grp.sub{padding-top:0;margin-top:0;border-top:0;animation:rise .3s var(--eo) both}
.fn .grp.sub[hidden]{display:none}
.fn .subcount{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 16px}
.fn .grp > .lbl{font-weight:730;margin:0 0 4px;font-size:1.02rem}
.fn .grp > .sub{color:var(--faint);font-size:.88rem;margin:0 0 13px}
.fn .opts{display:grid;gap:9px}
.fn .opts.two{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.fn .opt{appearance:none;text-align:left;width:100%;cursor:pointer;font:inherit;color:var(--text);
  background:var(--glass-2);border:1px solid var(--gb);border-radius:var(--r-md);
  min-height:56px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
  transition:border-color .18s var(--eo),background .18s var(--eo),transform .18s var(--eo)}
.fn .opt:hover{border-color:var(--gb2);background:rgba(255,255,255,.105);transform:translateY(-1px)}
.fn .opt:active{transform:scale(.99)}
.fn .opt:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.fn .opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--silver);flex:0 0 auto;margin-top:3px;
  transition:background .18s,border-color .18s}
.fn .opt .k{font-weight:700;display:block}
.fn .opt .d{display:block;color:var(--faint);font-size:.86rem;font-weight:400;margin-top:2px;line-height:1.48}
.fn .opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(95,214,154,.14)}
.fn .opt[aria-pressed="true"] .dot{border-color:var(--gold-bright);background:var(--gold-bright);box-shadow:inset 0 0 0 3px #07130E}
.fn .sl{margin:0}
.fn .sl + .sl{margin-top:24px}
.fn .sl .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:3px}
.fn .sl .lab label{font-weight:730;font-size:1.02rem}
.fn .sl .val{font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:800;letter-spacing:-.02em;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.fn .sl .hint{color:var(--faint);font-size:.87rem;margin:0 0 11px}
.fn .sl .ctr{display:flex;align-items:center;gap:12px}
.fn .sl input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer}
.fn .sl input[type=range]:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:var(--pill)}
.fn .sl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold-bright) var(--p,30%),rgba(255,255,255,.1) var(--p,30%))}
.fn .sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--gold-bright);border:3px solid #07130E;box-shadow:0 3px 12px rgba(0,0,0,.6);margin-top:-12px;
  transition:transform .15s var(--eo)}
.fn .sl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
.fn .sl input[type=range]::-moz-range-track{height:6px;border-radius:var(--pill);background:rgba(255,255,255,.1)}
.fn .sl input[type=range]::-moz-range-progress{height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.fn .sl input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--gold-bright);
  border:3px solid #07130E;box-shadow:0 3px 12px rgba(0,0,0,.6)}
.fn .sl .step{appearance:none;width:44px;height:44px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--gb);color:var(--text);font:inherit;font-size:1.3rem;font-weight:700;
  line-height:1;display:grid;place-items:center;transition:border-color .18s,background .18s}
.fn .sl .step:hover{border-color:var(--gb2);background:rgba(255,255,255,.11)}
.fn .sl .step:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.fn .sl .ends{display:flex;justify-content:space-between;font-size:.79rem;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.fn .row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:30px}
.fn .btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;border-radius:var(--pill);min-height:58px;
  font-size:1.03rem;letter-spacing:-.005em;
  padding:16px 34px;border:1px solid transparent;transition:transform .18s var(--eo),box-shadow .18s}
@media(max-width:620px){
.fn .row{flex-direction:column;align-items:stretch}
.fn .btn{width:100%;justify-content:center;text-align:center}
}
.fn .btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.fn .btn--gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#06120D;
  box-shadow:0 10px 28px -14px var(--gold-glow)}
.fn .btn--gold:hover{transform:translateY(-1px)}
.fn .btn--gold:active{transform:scale(.985)}
.fn .btn--flat{background:var(--glass-2);border-color:var(--gb2);color:var(--text)}
.fn .btn--flat:hover{background:rgba(255,255,255,.13);border-color:var(--silver)}
.fn .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.fn .gate{font-size:.86rem;color:var(--faint);margin:9px 0 0;text-align:center}
.fn .gate[hidden]{display:none}
.fn .pzeilen .z{display:flex;justify-content:space-between;gap:14px;padding:10px 16px;
  background:rgba(7,19,14,.5);font-size:.93rem;align-items:baseline}
.fn .pzeilen .z + .z{border-top:1px solid rgba(255,255,255,.07)}
.fn .pzeilen .z b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:730}
.fn .pzeilen .z.ab b{color:#F0B39C}
.fn .pzeilen .z small{display:block;color:var(--faint);font-size:.81rem;font-weight:400;margin-top:1px}
.fn .pfazit{margin:14px 0 0;padding:14px 16px;background:rgba(95,214,154,.1);
  border:1px solid rgba(95,214,154,.36);border-radius:var(--r-md);font-size:1rem;line-height:1.6}
.fn .pfazit b{color:#5FD69A}
.fn .pverdeckt{padding:14px 16px;background:rgba(7,19,14,.72);border-top:1px solid var(--gb);
  font-size:.88rem;color:var(--faint);display:flex;gap:9px;align-items:flex-start}
.fn .pverdeckt svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--gold)}
.fn .expo{margin:0;border:1px solid rgba(95,214,154,.45);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(7,19,14,.55)}
.fn .expo .bild{position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#13301F,#0B1F15 60%,#07130E)}
/* Musterbild: KI-generiert, Kennzeichnung ist eingebrannt (unten rechts). Bild und
   Kachel haben dasselbe Seitenverhältnis 16:9, damit object-fit nichts vom Label abschneidet.
   Kein zusätzliches KI-Badge im Markup: ein Bild trägt genau eine Kennzeichnung. */
.fn .expo .bild .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Verlauf nur links unten hinter dem Sperrhinweis, damit er das eingebrannte Label rechts nicht abdunkelt. */
.fn .expo .bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(7,19,14,.9) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 72%);mask-image:linear-gradient(90deg,#000 50%,transparent 72%)}
.fn .expo .bild .nr,.fn .expo .bild .fahne{z-index:2}
.fn .expo .bild .fahne.erfunden{background:rgba(7,19,14,.82)}
.fn .expo .bild .sperre{position:absolute;z-index:2;left:0;bottom:0;max-width:66%;text-align:left;
  padding:0 0 12px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:start}
.fn .expo .bild .sperre svg{width:16px;height:16px;color:var(--gold);margin-top:2px;grid-row:span 2}
.fn .expo .bild .sperre b{display:block;font-size:.86rem;font-weight:760;line-height:1.25}
.fn .expo .bild .sperre span{display:block;font-size:.78rem;color:#D5DFD8;line-height:1.3}
.fn .expo .nr{position:absolute;top:12px;left:12px;font-size:.7rem;letter-spacing:.1em;font-weight:800;
  text-transform:uppercase;color:var(--gold);background:rgba(7,19,14,.8);
  border:1px solid rgba(95,214,154,.4);border-radius:var(--pill);padding:5px 11px}
.fn .expo .fahne{position:absolute;top:12px;right:12px;font-size:.7rem;letter-spacing:.08em;font-weight:800;
  text-transform:uppercase;color:var(--ok);background:rgba(95,214,154,.16);
  border:1px solid rgba(95,214,154,.45);border-radius:var(--pill);padding:5px 11px}
.fn .expo .titel{padding:16px 18px 14px;border-bottom:1px solid var(--gb)}
.fn .expo .titel b{font-size:1.08rem;display:block}
.fn .expo .titel p{margin:4px 0 0;color:var(--faint);font-size:.86rem}
.fn .eck{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:rgba(255,255,255,.09);border-bottom:1px solid var(--gb)}
.fn .eck > div{background:rgba(7,19,14,.75);padding:11px 13px}
.fn .eck dt{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:0 0 3px}
.fn .eck dd{margin:0;font-weight:730;font-size:.96rem;font-variant-numeric:tabular-nums}
.fn .eck .zu dd{color:var(--faint);font-weight:500;filter:blur(3.5px);user-select:none}
.fn .eck .zu{position:relative}
.fn .eck .zu::after{content:"🔒";position:absolute;right:11px;top:50%;transform:translateY(-2px);
  font-size:.8rem;filter:none;opacity:.75}
.fn .bahn{display:grid;gap:1px;background:rgba(255,255,255,.09);border:1px solid var(--gb);
  border-radius:var(--r-md);overflow:hidden;margin:18px 0 0}
.fn .bahn > div{background:rgba(7,19,14,.72);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.fn .bahn .wann{flex:0 0 auto;width:5.4em;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-weight:800;padding-top:5px;line-height:1.35}
.fn .bahn .txt{flex:1;min-width:0}
.fn .bahn .gross{font-size:clamp(1.35rem,3.4vw,1.8rem);font-weight:850;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.fn .bahn .heute .gross{color:var(--silver-bright)}
.fn .bahn .waechst .gross{color:#5FD69A}
.fn .bahn .ende{background:linear-gradient(160deg,rgba(95,214,154,.19),rgba(95,214,154,.05))}
.fn .bahn .ende .gross{color:var(--gold-bright)}
.fn .bahn p{margin:3px 0 0;color:var(--mute);font-size:.89rem;line-height:1.55}
.fn .bahn p b{color:var(--text)}
.fn .dann{margin:14px 0 0;padding:14px 16px;background:var(--glass);border:1px solid var(--gb);
  border-radius:var(--r-md);font-size:.86rem;color:var(--faint);line-height:1.6}
.fn .hebelauf{margin:20px 0 0;border:1px solid rgba(95,214,154,.42);border-radius:var(--r-md);overflow:hidden}
.fn .hebelauf > summary{padding:15px 18px;cursor:pointer;font-weight:760;font-size:1.02rem;
  background:linear-gradient(160deg,rgba(95,214,154,.17),rgba(95,214,154,.04));list-style:none}
.fn .hebelauf > summary::-webkit-details-marker{display:none}
.fn .hebelauf > summary::before{content:"▸ ";color:var(--gold)}
.fn .hebelauf[open] > summary::before{content:"▾ "}
.fn .hebelauf > summary small{display:block;font-weight:400;font-size:.86rem;color:var(--mute);margin-top:3px}
.fn .hebelauf .innen{padding:18px}
.fn .bilanz{margin:18px 0 0;border:1px solid rgba(95,214,154,.45);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(95,214,154,.13),rgba(95,214,154,.03))}
.fn .bilanz .satz{padding:14px clamp(18px,2.6vw,24px);font-size:1.02rem;line-height:1.5;
  font-weight:600;border-bottom:1px solid var(--gb);color:var(--mute)}
.fn .bilanz .satz b{color:var(--gold-bright);font-weight:850;white-space:nowrap}
.fn .bilanz .satz .gr{color:#5FD69A}
.fn .bilanz .paar{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:1px;
  background:rgba(255,255,255,.09)}
.fn .bilanz .paar > div{background:rgba(7,19,14,.78);padding:18px}
.fn .bilanz .pfeil{display:grid;place-items:center;font-size:1.5rem;color:var(--gold);padding:0 14px;
  background:rgba(7,19,14,.78)}
.fn .bilanz .cap{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:800;margin-bottom:9px}
.fn .bilanz .p{margin:0 0 7px;font-size:.93rem;color:var(--mute);display:flex;justify-content:space-between;gap:12px}
.fn .bilanz .p:last-child{margin-bottom:0}
.fn .bilanz .p b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:760}
.fn .bilanz .rein .p b{color:#F0B39C}
.fn .bilanz .raus .p b{color:#5FD69A}
.fn .bilanz .gross{font-size:clamp(1.35rem,3.4vw,1.75rem);font-weight:850;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin:2px 0 4px}
.fn .bilanz .rein .gross{color:var(--silver-bright)}
.fn .bilanz .raus .gross{color:#5FD69A}
.fn .bilanz .klein{font-size:.84rem;color:var(--faint);margin:0}
@media(max-width:640px){
.fn .bilanz .paar{grid-template-columns:1fr}
.fn .bilanz .pfeil{padding:6px 0;transform:rotate(90deg)}
}
.fn .sprung{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:16px 0 0}
.fn .sprung > div{border-radius:var(--r-md);padding:15px;text-align:center}
.fn .sprung .kost{background:rgba(7,19,14,.6);border:1px solid var(--gb)}
.fn .sprung .krieg{background:linear-gradient(160deg,rgba(95,214,154,.2),rgba(95,214,154,.06));
  border:1px solid rgba(95,214,154,.45)}
.fn .sprung .cap{font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:800}
.fn .sprung .zahl{font-size:clamp(1.3rem,3.4vw,1.7rem);font-weight:850;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;margin:5px 0 2px;line-height:1.15}
.fn .sprung .kost .zahl{color:var(--silver-bright)}
.fn .sprung .krieg .zahl{color:#5FD69A}
.fn .sprung p{margin:0;font-size:.82rem;color:var(--mute)}
.fn .sprung[data-null="1"] .zahl{color:var(--mute)}
.fn .opt .zahl{display:inline-block;margin-top:5px;font-size:.79rem;font-weight:700;
  color:var(--faint);background:rgba(255,255,255,.06);border:1px solid var(--gb);
  border-radius:var(--pill);padding:2px 9px}
.fn .opt .zahl.viel{color:#5FD69A;background:rgba(95,214,154,.12);border-color:rgba(95,214,154,.34)}
.fn .opt .zahl.wenig{color:#F0B39C;background:rgba(196,120,96,.1);border-color:rgba(196,120,96,.34)}
.fn .rahmen{margin:26px 0 0;padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(95,214,154,.16),rgba(95,214,154,.04));
  border:1px solid rgba(95,214,154,.4)}
.fn .rahmen h3{margin:0 0 5px;font-size:clamp(1.15rem,2.6vw,1.5rem);color:#5FD69A}
.fn .rahmen p{margin:0;color:var(--mute);font-size:.95rem;line-height:1.6}
.fn .rahmen p b{color:var(--text)}
.fn .win,.fn .flash{background:linear-gradient(160deg,rgba(95,214,154,.19),rgba(95,214,154,.045));
  border:1px solid rgba(95,214,154,.42);border-radius:var(--r-lg);
  scroll-margin-top:calc(var(--banner) + 14px)}
.fn .win{padding:clamp(24px,3.4vw,38px);animation:rise .45s var(--eo) both}
.fn .win[hidden],.fn .flash[hidden]{display:none}
.fn .flash{padding:clamp(16px,2.2vw,22px);margin:0 0 clamp(20px,2.8vw,26px);
  box-shadow:0 0 0 0 rgba(198,243,107,.55)}
.fn .flash .seal{margin-bottom:11px;padding:5px 13px 5px 9px;font-size:.73rem}
.fn .flash .seal svg{width:14px;height:14px}
.fn .flash h2{font-size:clamp(1.3rem,2.8vw,1.8rem);margin:0 0 6px}
.fn .flash .say{color:var(--mute);margin:0;font-size:.93rem}
.fn .flash .checks{margin-top:12px;gap:2px}
.fn .flash .checks li{padding:5px 0;align-items:center;background:none;border:0}
.fn .flash .checks li.no{padding:9px 12px;background:rgba(7,19,14,.5);border:1px solid rgba(255,255,255,.08);
  align-items:flex-start;margin:4px 0}
.fn .flash .checks li:not(.no) span span{display:none}
.fn .flash .checks li:not(.no) b{font-size:.94rem}
.fn .flash .checks .ic{width:19px;height:19px;margin-top:0}
.fn .flash .checks .ic svg{width:11px;height:11px}
.fn .flash .note{margin-top:12px;font-size:.86rem;padding:10px 12px;line-height:1.5}
.fn .flash.feier,.fn .win.feier{animation:feier .72s var(--eo) both}
@keyframes feier{
  0%{opacity:0;transform:scale(.9) translateY(14px);box-shadow:0 0 0 0 rgba(198,243,107,.6)}
  38%{opacity:1;transform:scale(1.035) translateY(0);box-shadow:0 0 0 14px rgba(198,243,107,0)}
  54%{transform:scale(.99) rotate(-.7deg)}
  68%{transform:scale(1.012) rotate(.55deg)}
  82%{transform:scale(.997) rotate(-.3deg)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(198,243,107,0)}
}
.konfetti{position:fixed;inset:0;z-index:80;pointer-events:none}
@media (prefers-reduced-motion: reduce){
.fn .flash.feier,.fn .win.feier{animation:rise .3s var(--eo) both}
}
.fn .win .seal,.fn .flash .seal{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;border-radius:var(--pill);
  background:rgba(95,214,154,.15);border:1px solid rgba(95,214,154,.4);color:var(--ok);
  font-size:.79rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;margin-bottom:16px}
.fn .win .seal svg,.fn .flash .seal svg{width:17px;height:17px}
.fn .win h2{font-size:clamp(1.7rem,3.6vw,2.55rem);margin:0 0 12px}
.fn .win .say{color:var(--mute);margin:0 0 4px;font-size:1.02rem}
.fn .checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.fn .checks li{display:flex;gap:11px;align-items:flex-start;background:rgba(7,19,14,.5);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:13px 15px;
  opacity:0;transform:translateY(10px);animation:rise .42s var(--eo) forwards}
.fn .checks li:nth-child(1){animation-delay:.10s}
.fn .checks li:nth-child(2){animation-delay:.22s}
.fn .checks li:nth-child(3){animation-delay:.34s}
.fn .checks li:nth-child(4){animation-delay:.46s}
.fn .checks .ic{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:rgba(95,214,154,.18);color:var(--ok)}
.fn .checks .ic svg{width:13px;height:13px}
.fn .checks b{display:block;font-weight:730}
.fn .checks span{display:block;color:var(--faint);font-size:.87rem;line-height:1.5}
.fn .checks li.no .ic{background:rgba(95,214,154,.16);color:var(--gold-bright)}
.fn .bignum{margin:22px 0 0;padding:22px;background:rgba(7,19,14,.55);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);text-align:center}
.fn .bignum .cap{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:700}
.fn .bignum .big{font-size:clamp(2.1rem,6vw,3.3rem);font-weight:850;letter-spacing:-.03em;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;line-height:1.08;margin:6px 0 4px}
.fn .bignum .sub{font-size:.89rem;color:var(--mute);margin:0}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fn .facts{display:grid;gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:18px 0 0}
.fn .facts div{background:rgba(7,19,14,.72);padding:14px 16px}
.fn .facts div.wide{grid-column:1/-1}
.fn .facts dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 3px}
.fn .facts dd{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.fn .facts dd.hi{color:var(--gold-bright)}
.fn .flow{list-style:none;margin:22px 0 0;padding:0;counter-reset:f}
.fn .flow li{counter-increment:f;display:flex;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.fn .flow li:last-child{border-bottom:0}
.fn .flow li::before{content:counter(f);flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(95,214,154,.16);color:var(--gold-bright);font-weight:800;font-size:.85rem;
  display:grid;place-items:center;margin-top:2px}
.fn .flow b{display:block;font-weight:730}
.fn .flow span{color:var(--faint);font-size:.88rem}
.fn .note{font-size:.86rem;color:var(--faint);background:var(--glass);border:1px solid var(--gb);
  border-radius:var(--r-md);padding:14px 16px;margin:20px 0 0}
.fn .note b{color:var(--mute)}
.fn .fcard{background:var(--card);color:var(--ct);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);
  box-shadow:0 28px 66px -34px rgba(0,0,0,.85);margin-top:36px}
.fn .fcard h3{color:var(--ct);margin-bottom:5px;font-size:1.24rem}
.fn .fcard .sub{color:var(--cm);font-size:.94rem;margin:0 0 18px}
.fn .fcard label{display:block;font-weight:700;font-size:.88rem;margin:0 0 6px}
.fn .fcard input[type=email],.fn .fcard input[type=tel],.fn .fcard input[type=text]{width:100%;font:inherit;min-height:48px;
  padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--chair);background:#FFFFFF;color:var(--ct)}
.fn .fcard input:focus-visible{outline:2px solid var(--gold-oncard);outline-offset:1px}
.fn .fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));margin-bottom:14px}
.fn .chan{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px}
.fn .chan button{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.92rem;min-height:44px;
  padding:10px 18px;border-radius:var(--pill);border:1px solid var(--chair);background:#fff;color:var(--ct);
  transition:border-color .18s,background .18s}
.fn .chan button:hover{border-color:#9FC9B0}
.fn .chan button:focus-visible{outline:2px solid var(--gold-oncard);outline-offset:2px}
.fn .chan button[aria-pressed="true"]{border-color:var(--gold-oncard);background:#EAF8F0;
  box-shadow:inset 0 0 0 1px var(--gold-oncard)}
.fn .telbox[hidden]{display:none}
.fn .inl{font-size:.83rem;color:var(--cm);margin:5px 0 0}
.fn .cons{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--cm);line-height:1.55;
  min-height:44px}
.fn .cons input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold-oncard)}
.fn .micro{font-size:.82rem;color:var(--cm);margin:12px 0 0}
.fn .hp{position:absolute;left:-9999px}
.fn .saveline{margin:14px 0 0;font-size:.86rem;color:var(--cm)}
.fn .saveline button{appearance:none;background:none;border:0;color:var(--gold-oncard);font:inherit;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0}
.fn .bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(7,19,14,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--gb)}
.fn .bar[hidden]{display:none}
.fn .bar .wrap{padding:11px 22px 13px}
.fn .bar .track{height:5px;border-radius:var(--pill);background:var(--glass-2);overflow:hidden}
.fn .bar .fill{height:100%;width:25%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width .5s var(--eo)}
.fn .bar .txt{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:.79rem;color:var(--faint)}
.fn .bar .txt b{color:var(--silver-bright)}
.fn details{background:var(--glass);border:1px solid var(--gb);border-radius:var(--r-md);padding:14px 18px;margin-top:11px}
.fn details.tight{margin-top:12px;padding:12px 16px;background:rgba(255,255,255,.035)}
.fn summary{cursor:pointer;font-weight:700;color:var(--gold-bright);min-height:32px}
.fn details.tight summary{font-size:.9rem;min-height:28px}
.fn details p,.fn details li{color:var(--mute);font-size:.91rem}
.fn details p{margin:.7em 0 0}
.fn details ul{margin:.5em 0 0;padding-left:1.15em}
@media(max-width:560px){
.fn .facts{grid-template-columns:1fr}
.fn .st{flex:1 1 100%;padding:11px 13px}
}
@media (prefers-reduced-motion:reduce){
.fn .checks li{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fn *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .fn .checks li{opacity:1;transform:none}
}

/* ---- Ergänzungen für den neuen Rahmen ---- */
.fn{position:relative;margin:0 var(--rand);border-radius:0 0 clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px);overflow:clip;
  background:#07130E;
  background-image:radial-gradient(900px 520px at 88% 0%,rgba(28,154,94,.26),transparent 62%),
    radial-gradient(760px 480px at 4% 12%,rgba(198,243,107,.09),transparent 62%),
    radial-gradient(900px 600px at 50% 104%,rgba(95,214,154,.12),transparent 62%);
  padding:118px 0 40px}
.fn h1,.fn h2,.fn h3{color:var(--text)}
.fn .kicker{color:var(--gold)}
.fn .kicker::before{background:var(--gold)}
.fn .btn--gold{background:linear-gradient(135deg,#8EEAB8,#5FD69A 52%,#3CBD7E);color:#06120D;
  box-shadow:0 0 0 1px rgba(95,214,154,.5),0 12px 32px rgba(95,214,154,.3)}
.fn .fcard .btn--gold{box-shadow:0 10px 26px rgba(35,168,101,.28)}
.fn .trust li{color:#DCE9E1}
.fn .fahne.erfunden{color:#F0B39C;background:rgba(240,179,156,.12);border-color:rgba(240,179,156,.45)}
.fn .fcard a{color:var(--gold-oncard)}
.fn .danke h3{margin-bottom:6px}
body.hat-leiste{padding-bottom:112px}
@media(max-width:560px){ body.hat-leiste{padding-bottom:118px} .fn{padding-top:104px} }
.fn .wrap.intro,.fn .wrap.stage{padding-inline:22px}
@media(max-width:560px){.fn .wrap.intro,.fn .wrap.stage{padding-inline:16px}}

/* ---- Nach dem Critic vom 13.09. ---- */
.fn [hidden]{display:none!important}
html{scroll-padding-top:110px;scroll-padding-bottom:130px}
.fn h2[tabindex="-1"]:focus{outline:none}
.fn .schieber{display:flex;align-items:center;gap:12px}
.fn .schieber input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer}
.fn .schieber input[type=range]:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:var(--pill)}
.fn .schieber input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold-bright) var(--p,30%),rgba(255,255,255,.12) var(--p,30%))}
.fn .schieber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--gold-bright);border:3px solid #07130E;margin-top:-11px;box-shadow:0 2px 10px rgba(0,0,0,.55)}
.fn .schieber input[type=range]::-moz-range-track{height:6px;border-radius:var(--pill);background:rgba(255,255,255,.12)}
.fn .schieber input[type=range]::-moz-range-progress{height:6px;border-radius:var(--pill);background:var(--gold-bright)}
.fn .schieber input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid #07130E;border-radius:50%;background:var(--gold-bright)}
.fn .wert{font-size:clamp(1.3rem,3.2vw,1.7rem);font-weight:800;color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:5em;text-align:right}
.fn .grenze{margin:10px 0 0;font-size:.9rem;color:#F0B39C;display:flex;gap:8px;align-items:flex-start}
.fn .ek-hinweis{margin:14px 0 0;padding:12px 16px;border-radius:var(--r-md);font-size:.92rem;color:#FBD9CC;
  background:rgba(240,179,156,.1);border:1px solid rgba(240,179,156,.4)}

/* Durchklicken: auf dem Handy weicht die Überschrift, sobald es losgeht */
@media(max-width:900px){.fn.laeuft .intro{display:none}.fn.laeuft{padding-top:96px}}
.fn .nav-row{margin-top:18px}
.fn .nav-row .btn{min-height:46px;padding:10px 24px;font-size:.95rem}
@media(max-width:620px){.fn .nav-row{align-items:center}.fn .nav-row .btn{width:auto}}
.fn .sub .row{margin-top:22px}

/* Folgefragen eines Schritts ohne Überschrift und Warum-Satz, damit die Frage im Bild steht */
.fn .card.folge > .q, .fn .card.folge > .why { display:none }
@media(max-width:560px){
  .fn .card{padding:18px 16px}
  .fn .flash{padding:14px 14px 12px;margin-bottom:14px}
  .fn .flash .seal{margin-bottom:8px}
  .fn .flash h2{font-size:1.28rem;margin-bottom:4px}
  .fn .flash .say{display:none}
  .fn .flash .checks{margin-top:6px}
  .fn .flash .checks li{padding:2px 0}
  .fn .flash .checks li b{font-size:.9rem}
  .fn .flash .note{font-size:.76rem;padding:8px 10px;margin-top:8px}
  .fn .q{font-size:1.15rem}
  .fn .grp > .sub, .fn .sub > .sub{font-size:.84rem;margin-bottom:10px}
  .fn .opts{gap:7px}
  .fn .opt{min-height:50px;padding:11px 14px}
  .fn .opt .d{font-size:.82rem}
  .fn .subcount{margin-bottom:10px}
  .fn .sl .hint{margin-bottom:6px}
  .fn .sl + .sl{margin-top:16px}
  .fn .trust{margin-bottom:12px!important}
}
.fn .note .kurz{display:none}
@media(max-width:560px){
  .fn .note .lang{display:none}
  .fn .note .kurz{display:inline}
  .fn .card:not(.folge) .flash:not([hidden]) ~ .q,
  .fn .card:not(.folge) .flash:not([hidden]) ~ .why{display:none}
  .fn .flash .checks{grid-template-columns:1fr 1fr;column-gap:10px}
  .fn .flash .checks li:not(.no) b{font-size:.84rem;line-height:1.3}
  .fn .flash .checks li.no{grid-column:1/-1}
  .fn .flash h2{font-size:1.2rem}
}
/* Handy: die Belohnung bekommt einen eigenen Bildschirm, danach steht die Frage frei */
.fn .flash-weiter{display:none}
@media(max-width:560px){
  .fn .card.flash-modus .flash-weiter{display:flex;margin-top:16px}
  .fn .card.flash-modus > .sub, .fn .card.flash-modus > .subcount, .fn .card.flash-modus > .nav-row,
  .fn .card.flash-modus > .q, .fn .card.flash-modus > .why{display:none!important}
  .fn .card.flash-modus .flash .say{display:block}
  .fn #q2c details.tight{display:none}
  .fn #q2c .opt .d{display:none}
}
@media(max-width:560px){
  .fn .card > .q, .fn .card > .why{display:none}
  .fn .card#s0 > .grp > .q{display:block}
  .fn .opt{min-height:46px;padding:9px 12px;gap:10px}
  .fn .opt .k{font-size:.95rem;line-height:1.3}
  .fn .opt .d{font-size:.78rem;line-height:1.35;margin-top:1px}
  .fn .opt .zahl{margin-top:3px;font-size:.72rem}
  .fn .grp > .lbl, .fn .sub > .lbl{font-size:.98rem;margin-bottom:2px}
  .fn .subcount{font-size:.7rem;margin-bottom:8px}
  .fn .sl .val{font-size:1.45rem}
  .fn .sl .hint{font-size:.8rem}
  .fn .sub .row{margin-top:14px}
  .fn .nav-row{margin-top:10px}
  .fn .card{scroll-margin-top:96px}
}
@media(max-width:560px){
  .fn .intro .kicker, .fn .intro .lead{display:none}
  .fn .intro h1{font-size:1.5rem;line-height:1.2;margin-bottom:0}
  .fn .intro{padding-top:0;padding-bottom:12px}
  .fn .stage{padding-top:0}
  .fn #q1a .trust{gap:5px}
  .fn #q1a .trust li{font-size:.7rem;padding:3px 8px 3px 6px}
  .fn #q1a .sl .hint{display:none}
  .fn #q1a .sl .ctr{margin-top:2px}
  .fn .sl input[type=range]{height:38px}
  .fn .sl .step{width:40px;height:40px}
}
/* Die Überschrift hat nur auf dem ersten Bildschirm eine Aufgabe (Niklaas 13.09.) */
.fn.laeuft .intro{display:none}
.fn.laeuft{padding-top:110px}
@media(max-width:560px){.fn.laeuft{padding-top:96px}}
.fn .trust--klein li{font-size:.8rem;padding:5px 12px 5px 9px}
.fn .fcard .trust--hell li{color:#0E1C15;background:#EAF8F0;border-color:rgba(35,168,101,.35);font-size:.82rem}
.fn .fcard .trust--hell svg{color:#23A865}
/* Ohne Intro: die Kachel steht direkt unter der Kopfleiste */
.fn{padding-top:118px}
.fn.laeuft{padding-top:118px}
.fn .kontext{margin:0 0 14px;font-size:.95rem;color:var(--mute)}
.fn .kontext b{color:var(--text)}
.fn .q em{font-style:normal;color:#fff;background:linear-gradient(transparent 70%,rgba(198,243,107,.9) 70%,rgba(198,243,107,.9) 94%,transparent 94%);padding-inline:.04em}
@media(max-width:560px){
  .fn,.fn.laeuft{padding-top:100px}
  .fn .card:not(.folge):not(.flash-modus) > .q{display:block}
  .fn .kontext{font-size:.85rem;margin-bottom:10px}
}

/* Musterbild auf dem Handy: Fahnen und Sperrhinweis kleiner, sonst decken sie das Bild zu. */
@media(max-width:560px){
  .fn .expo .bild .nr,.fn .expo .bild .fahne{top:8px;font-size:.6rem;padding:4px 9px}
  .fn .expo .bild .nr{left:8px}.fn .expo .bild .fahne{right:8px}
  .fn .expo .bild .sperre{max-width:64%;padding:0 0 9px 10px;column-gap:6px}
  .fn .expo .bild .sperre svg{width:13px;height:13px}
  .fn .expo .bild .sperre b{font-size:.72rem}
  .fn .expo .bild .sperre span{font-size:.66rem}
}

/* ======================================================================
   HELLES GLAS (Niklaas 13.09. spät: ganzer Funnel wie der Hero der Startseite)
   Additiv über die dunkle Fassung gelegt. Wer zurück will, löscht diesen Block.
   ====================================================================== */
.fn{
  --glass:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.84);
  --gb:rgba(14,28,21,.1); --gb2:rgba(14,28,21,.24);
  --silver:#8A9A91; --silver-bright:#24352C;
  --gold:#0B7A4B; --ok:#0B7A4B; --gold-glow:rgba(35,168,101,.3);
  --text:#0E1C15; --mute:#4E5C55; --faint:#56645C;
  --hellbox:rgba(255,255,255,.78); --linie:rgba(14,28,21,.08);
  --gruen-text:#0B7A4B; --warn-text:#A9452A;
  color:var(--text);
  border:1px solid #fff;border-top:0;box-shadow:0 30px 80px rgba(14,28,21,.08);
  background:linear-gradient(160deg,rgba(198,243,107,.42),rgba(95,214,154,.2) 55%,rgba(255,255,255,.85)),#F5F9F6;
  background-image:linear-gradient(160deg,rgba(198,243,107,.42),rgba(95,214,154,.2) 55%,rgba(255,255,255,.85))}
.fn .card{background:rgba(255,255,255,.66);border:1px solid #fff;
  box-shadow:0 30px 70px rgba(14,28,21,.1),0 0 0 1px rgba(14,28,21,.04);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.fn a{color:var(--gruen-text)}
/* Marker wie in hellen Überschriften: dunkle Schrift, Limette-Unterstrich */
.fn h1 em,.fn h2 em,.fn h3 em,.fn .q em{color:var(--text);padding-inline:.06em;
  background:linear-gradient(transparent 56%,rgba(198,243,107,.95) 56%,rgba(198,243,107,.95) 92%,transparent 92%)}
/* Pills */
.fn .trust li{color:var(--text);background:rgba(255,255,255,.72);border-color:rgba(35,168,101,.3)}
.fn .trust svg{color:#23A865}
/* Auswahl */
.fn .opt{background:rgba(255,255,255,.8);border-color:rgba(14,28,21,.1)}
.fn .opt:hover{background:#fff;border-color:#23A865}
.fn .opt .dot{border-color:rgba(14,28,21,.25)}
.fn .opt[aria-pressed="true"]{border-color:#23A865;background:#EAF8F0}
.fn .opt[aria-pressed="true"] .dot{border-color:#23A865;background:#23A865;box-shadow:inset 0 0 0 3px #fff}
.fn .opt .zahl{background:rgba(14,28,21,.04)}
.fn .opt .zahl.viel{color:var(--gruen-text);background:rgba(35,168,101,.1);border-color:rgba(35,168,101,.3)}
.fn .opt .zahl.wenig{color:var(--warn-text);background:rgba(196,120,96,.08);border-color:rgba(196,120,96,.3)}
.fn .opt:focus-visible,.fn .btn:focus-visible,.fn .sl .step:focus-visible{outline-color:#0B7A4B}
/* Schieber */
.fn .sl .val,.fn .wert{color:var(--gruen-text)}
.fn .sl input[type=range]::-webkit-slider-runnable-track,.fn .schieber input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#23A865 0%,#8FD94A var(--p,30%),rgba(14,28,21,.12) var(--p,30%))}
.fn .sl input[type=range]::-webkit-slider-thumb,.fn .schieber input[type=range]::-webkit-slider-thumb{
  background:#23A865;border-color:#fff;box-shadow:0 3px 10px rgba(14,28,21,.28)}
.fn .sl input[type=range]::-moz-range-track,.fn .schieber input[type=range]::-moz-range-track{background:rgba(14,28,21,.12)}
.fn .sl input[type=range]::-moz-range-progress,.fn .schieber input[type=range]::-moz-range-progress{background:linear-gradient(90deg,#23A865,#8FD94A)}
.fn .sl input[type=range]::-moz-range-thumb,.fn .schieber input[type=range]::-moz-range-thumb{background:#23A865;border-color:#fff;box-shadow:0 3px 10px rgba(14,28,21,.28)}
.fn .sl input[type=range]:focus-visible,.fn .schieber input[type=range]:focus-visible{outline-color:#0B7A4B}
.fn .sl .step{background:rgba(255,255,255,.84);border-color:rgba(14,28,21,.12)}
.fn .sl .step:hover{background:#fff;border-color:#23A865}
.fn .btn--flat{background:rgba(255,255,255,.8);border-color:rgba(14,28,21,.14)}
.fn .btn--flat:hover{background:#fff;border-color:#23A865}
.fn .grenze{color:var(--warn-text)}
.fn .ek-hinweis{color:#7A3520;background:rgba(240,179,156,.16);border-color:rgba(196,120,96,.4)}
/* Belohnungen */
.fn .win,.fn .flash{background:linear-gradient(160deg,rgba(95,214,154,.24),rgba(255,255,255,.72));border-color:rgba(35,168,101,.35)}
.fn .win .seal,.fn .flash .seal{color:var(--gruen-text);background:rgba(255,255,255,.8);border-color:rgba(35,168,101,.35)}
.fn .checks li,.fn .flash .checks li.no{background:var(--hellbox);border-color:var(--linie)}
.fn .checks .ic,.fn .checks li.no .ic{background:rgba(35,168,101,.14);color:var(--gruen-text)}
.fn .bignum{background:var(--hellbox);border-color:var(--linie)}
.fn .bignum .big{color:var(--gruen-text)}
.fn .facts{background:var(--linie);border-color:var(--linie)}
.fn .facts div{background:var(--hellbox)}
.fn .facts dd.hi{color:var(--gruen-text)}
.fn .flow li{border-bottom-color:var(--linie)}
.fn .flow li::before{background:rgba(35,168,101,.14);color:var(--gruen-text)}
.fn .rahmen{background:linear-gradient(160deg,rgba(95,214,154,.2),rgba(255,255,255,.6));border-color:rgba(35,168,101,.35)}
.fn .rahmen h3{color:var(--gruen-text)}
/* Ergebnis: Musterobjekt, Zeitachse, Bilanz */
.fn .expo{background:rgba(255,255,255,.8);border-color:rgba(35,168,101,.35)}
.fn .expo .bild .nr{color:#5FD69A}
.fn .expo .bild .sperre b{color:#fff}
.fn .expo .bild .sperre svg{color:#C6F36B}
.fn .pzeilen .z{background:var(--hellbox)}
.fn .pzeilen .z + .z{border-top-color:var(--linie)}
.fn .pzeilen .z.ab b,.fn .bilanz .rein .p b{color:var(--warn-text)}
.fn .pfazit{background:rgba(35,168,101,.1);border-color:rgba(35,168,101,.3)}
.fn .pfazit b{color:var(--gruen-text)}
.fn .pverdeckt{background:rgba(14,28,21,.04)}
.fn .eck{background:var(--linie)}
.fn .eck > div{background:var(--hellbox)}
.fn .bahn{background:var(--linie)}
.fn .bahn > div{background:var(--hellbox)}
.fn .bahn .waechst .gross,.fn .bahn .ende .gross{color:var(--gruen-text)}
.fn .bahn .ende{background:linear-gradient(160deg,rgba(95,214,154,.24),rgba(255,255,255,.7))}
.fn .hebelauf{border-color:rgba(35,168,101,.35)}
.fn .hebelauf > summary{background:linear-gradient(160deg,rgba(95,214,154,.2),rgba(255,255,255,.6))}
.fn .bilanz{border-color:rgba(35,168,101,.35);background:linear-gradient(160deg,rgba(95,214,154,.16),rgba(255,255,255,.6))}
.fn .bilanz .satz b{color:var(--gruen-text)}
.fn .bilanz .satz .gr,.fn .bilanz .raus .p b,.fn .bilanz .raus .gross{color:var(--gruen-text)}
.fn .bilanz .paar{background:var(--linie)}
.fn .bilanz .paar > div,.fn .bilanz .pfeil{background:var(--hellbox)}
.fn .sprung .kost{background:var(--hellbox)}
.fn .sprung .krieg{background:linear-gradient(160deg,rgba(95,214,154,.22),rgba(255,255,255,.7));border-color:rgba(35,168,101,.35)}
.fn .sprung .krieg .zahl{color:var(--gruen-text)}
.fn details.tight{background:rgba(255,255,255,.5)}
.fn summary{color:var(--gruen-text)}
.fn .fcard{box-shadow:0 30px 70px rgba(14,28,21,.12),0 0 0 1px rgba(14,28,21,.05)}
/* Fortschrittsleiste */
.fn .bar{background:rgba(255,255,255,.92);border-top-color:rgba(14,28,21,.08);box-shadow:0 -10px 30px rgba(14,28,21,.06)}
.fn .bar .track{background:rgba(14,28,21,.08)}
.fn .bar .fill{background:linear-gradient(90deg,#23A865,#8FD94A)}
/* Bilanz auf dem Handy: nicht die Kachel drehen (legte einen Streifen über den Text), nur den Pfeil tauschen */
@media(max-width:640px){
  .fn .bilanz .pfeil{transform:none;font-size:0;padding:4px 0}
  .fn .bilanz .pfeil::after{content:"↓";font-size:1.4rem}
}
/* Nächste Schritte: Titel und Text untereinander neben der Nummer, nicht in drei Spalten */
.fn .flow li{display:grid;grid-template-columns:26px 1fr;column-gap:14px;align-items:start}
.fn .flow li::before{grid-row:span 2}
.fn .flow li b,.fn .flow li span{grid-column:2}
.fn .expo .bild{background:linear-gradient(160deg,#DDEFE3,#C9E6D3)}
/* Nach dem Critic 13.09. spät: Kontraste im hellen Glas (WCAG 1.4.3 und 1.4.11) */
.fn{--gruen-text:#096B42}
.fn .opt .dot{border-color:rgba(14,28,21,.55)}
.fn .opt[aria-pressed="true"]{border-color:#0B7A4B;box-shadow:inset 0 0 0 1px #0B7A4B}
.fn .opt[aria-pressed="true"] .dot{border-color:#0B7A4B;background:#0B7A4B}
.fn .sl input[type=range]::-webkit-slider-thumb,.fn .schieber input[type=range]::-webkit-slider-thumb{background:#0B7A4B}
.fn .sl input[type=range]::-moz-range-thumb,.fn .schieber input[type=range]::-moz-range-thumb{background:#0B7A4B}
.fn .expo .bild{background:linear-gradient(160deg,#13301F,#0B1F15)}
@media(max-width:560px){ .fn .expo .bild .nr,.fn .expo .bild .fahne{font-size:.68rem} }

/* Volle Feier auch bei „Bewegung reduzieren“ (Niklaas 13.09. spät): Federn und Wackeln der Belohnung,
   Häkchen laufen gestaffelt ein. Überschreibt die globale Bremse weiter oben. */
@media (prefers-reduced-motion: reduce){
  .fn .flash.feier,.fn .win.feier{animation:feier .72s cubic-bezier(.16,1,.3,1) both!important;animation-duration:.72s!important;animation-delay:0s!important}
  .fn .checks li{opacity:0;transform:translateY(10px);animation:rise .42s cubic-bezier(.16,1,.3,1) forwards!important;animation-duration:.42s!important}
  .fn .checks li:nth-child(1){animation-delay:.10s!important}
  .fn .checks li:nth-child(2){animation-delay:.22s!important}
  .fn .checks li:nth-child(3){animation-delay:.34s!important}
  .fn .checks li:nth-child(4){animation-delay:.46s!important}
}

/* Bündig mit der Kopfleiste: Kasten mit Rand und 1 px Kontur, also 15 px innen */
@media(max-width:900px){.fn .wrap.intro,.fn .wrap.stage{padding-inline:15px}}
@media(max-width:340px){.fn .wrap.intro,.fn .wrap.stage{padding-inline:9px}}
/* Postleitzahl bei „In meiner Nähe“ */
.fn .plzbox{margin-top:14px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.8);border:1px solid rgba(14,28,21,.1)}
.fn .plzbox label{display:block;font-weight:730;font-size:.95rem;margin:0 0 7px}
.fn .plzreihe{display:flex;gap:10px;align-items:stretch}
.fn .plzreihe input{flex:1;min-width:0;font:inherit;font-size:1.05rem;min-height:52px;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(14,28,21,.22);background:#fff;color:var(--text);letter-spacing:.06em}
.fn .plzreihe input:focus-visible{outline:2px solid #0B7A4B;outline-offset:1px}
.fn .plzreihe .btn{min-height:52px;padding:10px 22px;width:auto}
.fn .plzbox .hint{margin:8px 0 0;font-size:.84rem;color:var(--faint)}
.fn .plzbox .grenze{margin-top:6px}

/* Äußere Funnel-Kachel bündig mit der Schriftkante der Kopfleiste (Niklaas 13.09. nachts) */
@media(max-width:900px){ .fn{margin-inline:0;border-left:0;border-right:0} .fn,.fn.laeuft{padding-top:102px}
  .fn .wrap.intro,.fn .wrap.stage{padding-inline:calc(16px + var(--rand))} }
@media(max-width:340px){ .fn .wrap.intro,.fn .wrap.stage{padding-inline:calc(10px + var(--rand))} }

/* Steuer-Kachel im Ergebnis (13.09.2026): heller Kasten wie die Bilanz, Spanne als drei Felder */
.fn .steuerk{margin:14px 0 0;padding:16px clamp(16px,2.6vw,22px);border-radius:var(--r-md);
  border:1px solid rgba(35,168,101,.35);background:linear-gradient(160deg,rgba(95,214,154,.12),rgba(255,255,255,.66))}
.fn .steuerk .cap{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 6px}
.fn .steuerk p{margin:0 0 10px;color:var(--mute);font-size:.93rem;line-height:1.6}
.fn .steuerk p b{color:var(--text)}
.fn .steuerk .aufmacher{font-size:1.05rem;font-weight:650;color:var(--text);line-height:1.45}
.fn .steuerk .aufmacher b{color:var(--text);font-weight:850;white-space:nowrap}
.fn .steuerk .scap{font-size:.84rem;color:var(--faint);margin:0 0 6px}
.fn .steuerk .spanne{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 12px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-md);overflow:hidden}
.fn .steuerk .spanne div{background:var(--hellbox);padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.fn .steuerk .spanne span{font-size:.8rem;color:var(--faint)}
.fn .steuerk .spanne b{font-variant-numeric:tabular-nums;font-weight:780;color:var(--gruen-text)}
.fn .steuerk .klein{font-size:.84rem;color:var(--faint);margin-bottom:8px}
.fn .steuerk .klein:last-child{margin-bottom:0}
.fn .steuerk .klein b{color:var(--mute)}
@media(max-width:560px){ .fn .steuerk .spanne div{padding:9px 10px} .fn .steuerk .spanne span{font-size:.76rem;line-height:1.3} }