:root{
  --navy:#0d1b2e;--navy-2:#13263d;--navy-3:#1b3450;
  --graphite:#283440;--slate:#4d5a67;--slate-2:#74828f;--slate-3:#9aa6b2;
  --line:#e0e5ea;--line-2:#edf0f3;--line-3:#f4f6f8;
  --bg:#ffffff;--bg-soft:#f7f9fb;--bg-soft-2:#eef2f5;--paper:#fcfdfe;
  --accent:#1d5aa0;--accent-deep:#16467d;--accent-light:#3d7cc4;--accent-soft:#e9f0f8;--accent-soft-2:#dbe7f3;
  --gold:#9a7b3f;--green:#3d6b3d;--green-soft:#e8f0e8;--amber:#a87a23;--amber-soft:#f7efdc;--red:#9a3b3b;--red-soft:#f3e3e3;
  /* Gedecktes Grün für Schlösser und Listen der Arbeitsmarktseiten und der Vergütungsanalyse.
     --pro-bright: helle Variante für Grün-Akzente auf Navy-Flächen (≥4,5:1 auf --navy). */
  --pro:#4a8465;--pro-deep:#33604a;--pro-soft:#f0f6f2;--pro-line:#d9e7dd;--pro-bright:#8fc4a8;
  /* Pro-Signatur (Jan, 16.10.2026): jede Pro-Kennzeichnung auf jeder Seite trägt dieses Grün,
     wie die Kontoübersicht. Chip --pro-sig mit Weiß (5,3:1), Rahmen 1,5 px --pro-sig-vivid mit
     3 px Ring --pro-sig-soft. .v7, .pr-signal und .pf leiten ihr --green hierher. */
  --pro-sig:#087a5b;--pro-sig-vivid:#0ea875;--pro-sig-soft:#e4f6ee;--pro-sig-line:#a3dcc5;
  --ink:#131e29;--maxw:1140px;--radius:3px;
  --shadow-xs:0 1px 2px rgba(13,27,46,.05);
  --shadow-sm:0 1px 2px rgba(13,27,46,.05),0 1px 1px rgba(13,27,46,.03);
  --shadow-md:0 2px 8px rgba(13,27,46,.06),0 10px 28px rgba(13,27,46,.06);
  --shadow-lg:0 4px 16px rgba(13,27,46,.08),0 28px 64px rgba(13,27,46,.10);
  --serif:Charter,"Bitstream Charter","Georgia Pro",Georgia,Cambria,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue","Segoe UI",Helvetica,Arial,system-ui,ui-sans-serif,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Liberation Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;font-weight:400;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
@media(max-width:640px){.wrap{padding:0 20px}}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:600;letter-spacing:-.018em;line-height:1.14;font-feature-settings:"kern" 1,"liga" 1}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.eyebrow.muted{color:var(--slate-2)}
.rule{width:46px;height:2px;background:var(--accent);margin:18px 0 0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 4px 0}
.skip-link:focus{left:0}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;background:none;border:none;cursor:pointer;padding:0}
.brand-mark{width:32px;height:32px;flex:0 0 auto;border:1.5px solid var(--navy);border-radius:3px;display:grid;place-items:center;position:relative}
.brand-mark span{display:block;width:13px;height:13px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)}
.brand-mark span::after{content:"";position:absolute;right:8px;top:8px;width:5px;height:5px;background:var(--navy);border-radius:1px}
.brand-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.brand-name b{color:var(--accent);font-weight:600}
.nav-right{display:flex;align-items:center;gap:18px}
/* Mobile: Menü und Konto bleiben sichtbar, nur kompakter */
@media(max-width:480px){.nav-acc{font-size:12.5px}.nav-right{gap:10px}.brand-name{font-size:16px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;text-decoration:none;letter-spacing:.01em;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--navy-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--slate-2);background:var(--bg-soft)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-accent:hover{background:var(--accent-deep);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
.btn-lg{padding:16px 32px;font-size:15.5px}
.minh{min-height:44px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--bg)}
/* hero background: faint topographic contour lines (two overlapping ring sets) */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;background-image:repeating-radial-gradient(circle at 26% 20%,transparent 0 32px,#d0d8df 32px 33px),repeating-radial-gradient(circle at 83% 66%,transparent 0 39px,#d0d8df 39px 40px);-webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 4%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 82% 74% at 50% 4%,#000 0%,transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 0%,var(--accent-soft) 0%,transparent 60%);opacity:.5}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;padding:84px 0 92px}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:48px;padding:56px 0 64px}}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06;margin:22px 0 0;letter-spacing:-.02em}
.hero h1 .br{color:var(--accent)}
.hero .lede{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--slate);max-width:46ch;line-height:1.62;margin-top:22px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.trust-chip{display:flex;align-items:center;gap:12px;flex:1;min-width:185px}
.trust-chip .ti-badge{width:38px;height:38px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-soft-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:transform .18s,background .18s}
.trust-chip:hover .ti-badge{transform:translateY(-2px);background:var(--accent-soft-2)}
.trust-chip .ti{width:19px;height:19px;flex:0 0 auto}
.trust-chip .tt{display:block;font-size:13.5px;color:var(--graphite);font-weight:600;line-height:1.35}
.trust-chip .td{display:block;font-size:12.5px;color:var(--slate-2);line-height:1.4}

/* hero — centered, radically reduced (B2C) */
.hero-center{position:relative;max-width:760px;margin:0 auto;text-align:center;padding:106px 0 64px}
@media(max-width:640px){.hero-center{padding:66px 0 48px}}
.hero-center .eyebrow{display:inline-block}
.hero-center h1{margin:20px auto 0;max-width:none;white-space:nowrap;font-size:clamp(1.9rem,4.3vw,3.05rem)}
.hero-center .lede{margin:20px auto 0;max-width:50ch}
.hero-center .hero-actions{justify-content:center;margin-top:34px}
@media(max-width:560px){.hero-center h1{white-space:normal}}
.hero-trust{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px;font-size:13px;color:var(--slate-2);letter-spacing:.01em}
.hero-trust .ht-sep{width:4px;height:4px;border-radius:50%;background:var(--slate-3);flex:0 0 auto}
@media(max-width:480px){.hero-trust{gap:9px;font-size:12px}}
/* ===== Live-Zähler (Hero) ===== */
.hero-stats{display:inline-flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px;padding:14px 22px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);box-shadow:var(--shadow-sm)}
.hstat{display:flex;flex-direction:column;align-items:center;gap:3px}
.hstat-num{font-family:var(--mono);font-size:25px;font-weight:600;color:var(--accent-deep);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;transition:color .3s;will-change:transform}
.hstat-label{font-size:11.5px;color:var(--slate-2);letter-spacing:.02em;white-space:nowrap}
.hstat-div{width:1px;height:32px;background:var(--line);flex:0 0 auto}
.hstat-live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2)}
.hstat-live .dot{width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 0 rgba(34,160,107,.5);animation:hstatpulse 2.2s infinite}
@keyframes hstatpulse{0%{box-shadow:0 0 0 0 rgba(34,160,107,.45)}70%{box-shadow:0 0 0 7px rgba(34,160,107,0)}100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}
.hstat-num.bump{animation:hstatbump .5s ease}
@keyframes hstatbump{0%{transform:translateY(0)}30%{transform:translateY(-3px);color:var(--accent-light)}100%{transform:translateY(0)}}
@media(max-width:560px){.hero-stats{gap:16px;padding:12px 16px}.hstat-num{font-size:21px}.hstat-div{display:none}}
@media(prefers-reduced-motion:reduce){.hstat-live .dot{animation:none}}

/* Hero: eingebettete erste Frage — klickbarer Teaser */
.hero-center.has-quiz{padding-top:72px}
@media(max-width:640px){.hero-center.has-quiz{padding-top:48px}}
.hero-quiz{max-width:540px;margin:26px auto 0}
.hq-card{display:block;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:20px 22px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .12s}
.hq-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.hq-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.hq-step{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--accent)}
.hq-topic{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);padding-left:10px;border-left:1px solid var(--line)}
.hq-q{font-family:var(--serif);font-size:1.16rem;line-height:1.34;color:var(--navy);margin-bottom:13px}
.hq-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--accent)}
.hq-go .arrow{transition:transform .15s}
.hq-card:hover .hq-go .arrow{transform:translateX(3px)}

.preview-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-lg);overflow:hidden}
.pc-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#fff,var(--bg-soft))}
.pc-head .t{font-family:var(--serif);font-size:15px;color:var(--navy);font-weight:600}
.pc-head .tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);font-weight:700;border:1px solid var(--line);padding:3px 8px;border-radius:3px}
.pc-body{padding:18px 20px 8px;display:grid;place-items:center}
.pc-foot{padding:13px 24px;background:var(--bg-soft);border-top:1px solid var(--line);font-size:11.5px;color:var(--slate-2);letter-spacing:.02em;display:flex;align-items:center;gap:8px}

/* bands */
section{position:relative}
.band{padding:84px 0}
.band-soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(1.7rem,2.8vw,2.2rem);margin:18px 0 0}
.sec-head p{color:var(--slate);font-size:1.05rem;line-height:1.62;margin-top:18px}
@media(max-width:640px){.band{padding:58px 0}}

/* dimensions: Konvergenz-Diagramm — fünf Dimensionen laufen auf die Indikation zu */
.conv{display:grid;grid-template-columns:minmax(0,1fr) 96px 300px;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.conv-rows{display:grid;grid-auto-rows:1fr}
.conv-row{display:flex;align-items:center;padding:15px 8px 15px 26px;border-bottom:1px solid var(--line-2);min-height:82px}
.conv-row:last-child{border-bottom:none}
.conv-row .idx{display:block;font-size:10.5px;color:var(--slate-2);font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}
.conv-row h3{font-size:1.02rem;line-height:1.25;margin-bottom:2px}
.conv-row p{font-size:13px;color:var(--slate);line-height:1.45}
.conv-svg{position:relative;min-height:100%}
.conv-svg svg{position:absolute;inset:0;width:100%;height:100%}
.conv-node{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px 26px 26px 22px;border-left:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.conv-node .cn-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2)}
.conv-node h3{font-family:var(--serif);font-size:1.22rem;line-height:1.2}
.conv-node p{font-size:12.5px;color:var(--slate);line-height:1.5}
.conv-verdict{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:3px;padding:5px 11px}
.conv-verdict i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.conv-mob{display:none}
@media(max-width:860px){
  .conv{grid-template-columns:1fr}
  .conv-svg{display:none}
  .conv-node{border-left:none;border-top:1px solid var(--line-2)}
  .conv-mob{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0 10px;color:var(--slate-3)}
  .conv-mob i{width:1px;height:16px;background:var(--line)}
}
.conv-foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font-size:12.5px;color:var(--slate);line-height:1.6;max-width:100%}
.conv-foot .cf-refs{font-family:var(--mono);font-size:11px;color:var(--slate-2);letter-spacing:.01em}
.conv-foot a{color:var(--accent-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft-2)}

/* methode: Ablauf als Leitlinie — Kopf links, nummerierte Schritte rechts */
.flow-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.flow-grid .sec-head{margin-bottom:0;position:sticky;top:104px}
.flow{list-style:none;position:relative}
.flow::before{content:"";position:absolute;left:17px;top:12px;bottom:34px;width:1px;background:var(--line)}
.flow-step{position:relative;display:flex;gap:22px;padding:0 0 42px}
.flow-step:last-child{padding-bottom:0}
.fnum{position:relative;z-index:1;width:35px;height:35px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--accent-deep)}
.flow-step h3{font-size:1.14rem;margin:5px 0 7px}
.flow-step .fp{font-size:14.5px;color:var(--slate);line-height:1.6;max-width:52ch}
.fchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.fchips span{font-size:11.5px;font-weight:600;color:var(--slate);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px;letter-spacing:.01em;line-height:1.4}
@media(max-width:820px){.flow-grid{grid-template-columns:1fr;gap:38px}.flow-grid .sec-head{position:static}}

/* eignung */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.fit-grid{grid-template-columns:1fr}}
.fit-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.fit-card .fh{padding:18px 24px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--navy)}
.fit-card.yes .fh{background:var(--green-soft)}
.fit-card.no .fh{background:var(--bg-soft-2)}
.fit-card .fb{padding:8px 24px 22px}
.fit-card ul{list-style:none}
.fit-card li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-3);font-size:14px;color:var(--slate);line-height:1.5}
.fit-card li:last-child{border-bottom:none}
.fit-card .ic{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.fit-card.yes .ic{color:var(--green)}
.fit-card.no .ic{color:var(--slate-2)}
.fit-icon{width:22px;height:22px}

/* funnel: kostenloser Check → Gratis-Konto → Pro-Werkzeuge */
.funnel{display:grid;gap:8px;max-width:980px;margin:0 auto}
.funnel-row.free{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}
@media(max-width:720px){.funnel-row.free{grid-template-columns:1fr}}
.node{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px 22px;box-shadow:var(--shadow-sm)}
.node .nlabel{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)}
.node h3{font-size:1.12rem;margin:10px 0 5px}
.node > p{font-size:13px;color:var(--slate);line-height:1.5}
.node.check{border-color:var(--accent-soft-2)}
.node.check .nlabel{color:var(--accent-deep)}
.node.acct .nlabel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--slate-3)}
.connector{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;color:var(--slate-2)}
.connector .cl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.connector .carrow{width:1px;height:22px;background:linear-gradient(var(--line),var(--navy))}
.connector .chevron{color:var(--slate-2);margin-top:-8px}
/* Mini-Previews: kleine, ehrliche Produktausschnitte in den Karten */
.mini{margin-top:14px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-soft);padding:11px 12px}
.mini .m-cap{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-3);margin-bottom:8px}
.mopt{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink);padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:#fff;line-height:1.3}
.mopt + .mopt{margin-top:6px}
.mopt .mdot{width:11px;height:11px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--slate-3)}
.mopt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.mopt.sel .mdot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent-soft)}
.mres-verdict{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.mres-verdict .mv{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:3px;padding:3px 8px}
.mres-verdict .msaved{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--slate-2)}
.mres-verdict .msaved svg{width:12px;height:12px;color:var(--accent-deep)}
.mfield{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:5px;background:#fff;padding:7px 10px;font-size:11.5px;color:var(--slate)}
.mfield b{font-family:var(--mono);font-size:12px;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.mdelta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--slate);line-height:1.35}
.mdelta svg{width:13px;height:13px;flex:0 0 auto;color:var(--pro)}
.mdelta b{color:var(--navy)}
.mtask{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink);padding:5px 0;line-height:1.3}
.mtask .mbox{width:13px;height:13px;flex:0 0 auto;border-radius:3.5px;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent}
.mtask.done .mbox{background:var(--pro);border-color:var(--pro);color:#fff}
.mtask.done span:last-child{color:var(--slate-2);text-decoration:line-through;text-decoration-color:var(--slate-3)}
.mstreak{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--pro-deep);background:var(--pro-soft);border:1px solid var(--pro-line);border-radius:999px;padding:3px 9px;margin-bottom:7px}
/* Runway-Rechner-Widget (Gratis-Konto-Miniatur): Rechenweg + Verlaufskurve */
.rw{margin-top:10px}
.rw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--slate);padding:6px 0;border-bottom:1px dashed var(--line)}
.rw-row b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.rw-res{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:10px}
.rw-label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:3px}
.rw-val{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--accent-deep);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.rw-val small{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--slate-2);letter-spacing:.01em}
.rw-chart{width:100px;height:32px;flex:0 1 auto;min-width:0}
/* Pro-Karten — Navy-Panel: verbindet die Pro-Stufe visuell mit dem Verdikt der
   Ergebnisseite; Grün bleibt als einziges Signal auf den Pro-Chips. */
.pro-frame{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:24px;background:var(--navy);position:relative;overflow:hidden}
.pro-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 8%,rgba(61,124,196,.22),transparent 55%);pointer-events:none}
.pro-frame > *{position:relative}
.pro-tools-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.pro-tools-head .pt-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pro-bright)}
.pro-tools-head .pt-s{font-size:12.5px;color:#9aacc1}
.pro-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:800px){.pro-tools{grid-template-columns:1fr}}
.ptool{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);padding:18px 20px}
.ptool .pro-chip{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pro-bright);background:rgba(74,132,101,.18);border:1px solid rgba(143,196,168,.35);border-radius:999px;padding:3px 9px}
.ptool h4{font-family:var(--serif);font-size:1.05rem;color:#fff;margin:11px 0 4px}
.ptool > p{font-size:12px;color:#b9c7d8;line-height:1.5}
.ptool .pt-line{margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.10);font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:#8fa6c2;font-variant-numeric:tabular-nums}

/* momentum-showcase: Copy links, Produkt-Panel rechts */
.peak-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.peak-wrap{grid-template-columns:1fr;gap:26px}}
.peak-copy .beat{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line-2)}
.peak-copy .beat:first-of-type{border-top:none}
.peak-copy .beat .bn{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--pro-deep);flex:0 0 auto;margin-top:2px}
.peak-copy .beat h4{font-family:var(--serif);font-size:1.06rem;color:var(--navy);margin-bottom:3px}
.peak-copy .beat p{font-size:13.5px;color:var(--slate);line-height:1.55}
.eyebrow.pro{color:var(--pro-deep)}
.rule.pro{background:var(--pro)}
.loop{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.loop-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.loop-top .lt-t{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--navy)}
.streak{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--pro-deep);background:var(--pro-soft);border:1px solid var(--pro-line);border-radius:999px;padding:5px 12px;letter-spacing:.02em}
.streak .sd{display:inline-flex;gap:3px}
.streak .sd i{width:5px;height:5px;border-radius:50%;background:var(--pro);opacity:.42}
.streak .sd i.on{opacity:1}
.loop-body{padding:18px 22px}
.loop-sub{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:12px}
.task{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-3)}
.task:last-child{border-bottom:none}
.tbox{width:20px;height:20px;flex:0 0 auto;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent}
.task.done .tbox{background:var(--pro);border-color:var(--pro);color:#fff}
.task .tt{font-size:14px;color:var(--ink);line-height:1.4}
.task .tt small{display:block;font-size:11px;color:var(--slate-2)}
.task.done .tt{color:var(--slate-2);text-decoration:line-through;text-decoration-color:var(--slate-3)}
.task.done .tt small{text-decoration:none}
.task .tmeta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--slate-3);flex:0 0 auto}
.roadmap{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.rm-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:14px}
.rm-line{position:absolute;top:7px;left:12%;right:12%;height:2px;background:var(--line)}
.rm-fill{position:absolute;top:7px;left:12%;width:26%;height:2px;background:var(--pro)}
.rm-stage{position:relative;text-align:center;z-index:1}
.rm-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line);margin:0 auto 9px}
.rm-stage.done .rm-dot{background:var(--pro-deep);border-color:var(--pro-deep)}
.rm-stage.now .rm-dot{border-color:var(--pro);background:#fff;box-shadow:0 0 0 4px var(--pro-soft)}
.rm-stage .rm-name{font-size:11.5px;color:var(--slate-2);line-height:1.3}
.rm-stage.now .rm-name{color:var(--pro-deep);font-weight:700}
.rm-goal{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;color:var(--slate-2)}
.rm-goal b{color:var(--navy);font-family:var(--serif);font-weight:600}
/* Konten-Vergleich-Zeile unter dem Momentum-Panel */
.compare-line{margin-top:36px;display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--slate-2);text-align:center}
.compare-line a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}

/* assessment */
.assessment{background:var(--navy);color:#cdd8e4;position:relative;overflow:hidden}
.assessment::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000,transparent 76%);mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000,transparent 76%)}
.assessment .wrap{position:relative}
.assessment .sec-head h2{color:#fff}
.assessment .sec-head p{color:#9aacc1}
.assessment .eyebrow{color:#6fa3da}
.panel{background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 34px 90px rgba(0,0,0,.38);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 32px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.pt-title{font-family:var(--serif);font-size:1.06rem;color:var(--navy);font-weight:600}
.pt-sub{font-size:12.5px;color:var(--slate-2);margin-top:2px}
.progress-shell{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.progress-track{width:170px;height:5px;background:var(--bg-soft-2);border-radius:4px;overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-light),var(--accent-deep));border-radius:4px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.progress-count{font-size:12.5px;color:var(--graphite);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;font-family:var(--mono)}
@media(max-width:640px){.progress-track{width:84px}.panel-top{padding:18px 20px}}
.panel-body{padding:42px 48px 34px;min-height:360px}
@media(max-width:640px){.panel-body{padding:26px 20px 12px}}
.q-stage,.intro-stage,.profile-stage,.results-stage{animation:fade .36s ease}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.phase-bar{display:flex;gap:6px;margin-bottom:30px}
.phase-seg{flex:1;display:flex;flex-direction:column;gap:7px}
.phase-seg .pl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--slate-3);transition:color .3s}
.phase-seg .pt{height:3px;background:var(--bg-soft-2);border-radius:2px;overflow:hidden}
.phase-seg .pt i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.4,0,.2,1)}
.phase-seg.active .pl{color:var(--accent)}
.phase-seg.done .pl{color:var(--graphite)}
@media(max-width:560px){.phase-seg .pl{font-size:9px}}
.intro-stage h3{font-size:1.5rem;margin-bottom:14px}
.intro-stage p{color:var(--slate);font-size:15px;max-width:62ch;margin-bottom:24px;line-height:1.62}
.intro-list{list-style:none;display:grid;gap:13px;margin-bottom:32px}
.intro-list li{display:flex;gap:13px;font-size:14.5px;color:var(--graphite)}
.intro-list .ck{width:21px;height:21px;flex:0 0 auto;border-radius:3px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:1px}

.profile-stage .ps-tag{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:3px;display:inline-block}
.profile-stage h3{font-size:1.45rem;margin:16px 0 6px}
.profile-stage .ps-lead{font-size:14.5px;color:var(--slate);max-width:60ch;margin-bottom:28px;line-height:1.6}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
@media(max-width:620px){.field-grid{grid-template-columns:1fr;gap:22px}}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1 / -1}
.field > label{font-size:13px;font-weight:600;color:var(--graphite);letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.field > label .opt-mark{font-size:11px;font-weight:500;color:var(--slate-3)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--graphite);background:#fff;border:1px solid var(--line);padding:10px 15px;border-radius:20px;cursor:pointer;transition:.15s;white-space:nowrap;min-height:40px}
.chip:hover{border-color:var(--accent);background:var(--accent-soft)}
/* kein font-weight-Wechsel bei .sel: sonst wird der Chip breiter und die Reihe springt */
.chip.sel{border-color:var(--accent);background:var(--accent);color:#fff}
.chip.multi.sel{background:var(--accent-deep)}
select.input{font-family:var(--sans);font-size:14.5px;color:var(--graphite);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;min-height:44px;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2374828f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;transition:border-color .15s}
select.input:focus{outline:none;border-color:var(--accent)}

.q-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.q-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:3px}
.q-count{font-size:12.5px;color:var(--slate-2);letter-spacing:.03em;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.q-text{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.6rem);color:var(--navy);line-height:1.3;margin-bottom:7px}
.q-help{font-size:14px;color:var(--slate);margin-bottom:26px;max-width:58ch}
.options{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:15px;padding:16px 19px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s,transform .08s;text-align:left;width:100%;font-family:var(--sans);min-height:56px}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt:active{transform:scale(.997)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.opt .marker{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--slate-2);display:grid;place-items:center;transition:.15s}
.opt.sel .marker{border-color:var(--accent)}
.opt .marker i{width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s}
.opt.sel .marker i{transform:scale(1)}
.opt .otext{font-size:15px;color:var(--graphite);font-weight:500;line-height:1.4}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 48px;border-top:1px solid var(--line);background:var(--bg-soft)}
@media(max-width:640px){.panel-foot{padding:12px 20px}}
.foot-note{font-size:12.5px;color:var(--slate-2);display:flex;align-items:center;gap:8px}
.lock{width:13px;height:13px;flex:0 0 auto}
.nav-btns{display:flex;gap:10px;margin-left:auto}
.btn-min{background:transparent;border:1px solid var(--line);color:var(--graphite);padding:12px 19px;font-size:14px;border-radius:var(--radius);cursor:pointer;font-family:var(--sans);font-weight:600;transition:.15s;min-height:44px}
.btn-min:hover{border-color:var(--slate-2);background:#fff}
/* Inaktive Knöpfe im Fragen-Panel (Weiter, Auswertung anzeigen) sprechen eine Sprache: graue Fläche,
   Schrift --slate-2 (3,5:1 auf --bg-soft-2, bewusst unter Lesetext, als Zeichen der Inaktivität),
   kein Hub, kein Schatten, Zeiger normal (Jan, 16.10.2026). */
.btn-min:disabled,.btn-min:disabled:hover{opacity:1;background:var(--bg-soft-2);border-color:var(--line);color:var(--slate-2);cursor:default}
.btn:disabled,.btn:disabled:hover{background:var(--bg-soft-2);border-color:var(--line);color:var(--slate-2);box-shadow:none;transform:none;cursor:default}
.btn:disabled .arrow{transform:none}
/* Fragen-Stufe bis 640 px: Frage, Antworten und Weiter auf einen Bildschirm (Jan, 08.10.2026).
   app.js ankert dort an .q-meta statt am Panelkopf. Knöpfe über dem Hinweis, je halbe Breite.
   Gestrafft am 08.10.2026, damit bei 360×740 auch Zurück/Weiter im Bild stehen: engere Zeilen in
   Kopf, Frage und Hinweis, Antworten 10px statt 12px hoch gepolstert, Fuß 12px statt 16px.
   Schrift bleibt: Frage 20,8px, Antworten 15px. „Auswertung anzeigen“ nimmt die Restbreite neben
   „Zurück“ und bricht nur um, wenn sie nicht reicht. */
@media(max-width:640px){
  .q-meta{flex-wrap:wrap;gap:4px 12px;margin-bottom:10px}
  .q-tag{letter-spacing:.1em;line-height:1.4;padding:3px 10px}
  .q-count{white-space:nowrap;line-height:1.3}
  /* Keine Silbentrennung in Frage und Antworten (Jan, 08.10.2026): Wörter umbrechen ganz, keine Trennstriche. */
  .q-text{text-wrap:balance;hyphens:manual;-webkit-hyphens:manual;line-height:1.25;margin-bottom:6px}
  .q-help{line-height:1.5;margin-bottom:16px}
  .options{gap:8px}
  .opt{padding:10px 14px;gap:12px;min-height:48px}
  .opt .otext{line-height:1.35;text-wrap:pretty;hyphens:manual;-webkit-hyphens:manual}
  .panel-foot{flex-wrap:wrap;gap:8px 16px}
  .foot-note{line-height:1.4}
  .nav-btns{flex:1 0 100%;order:-1}
  .nav-btns .btn-min{flex:1;justify-content:center;white-space:nowrap;line-height:1.3}
  .nav-btns .btn{flex:1 1 auto;min-width:0;justify-content:center;font-size:14px;line-height:1.3;padding:12px 16px}
  /* Der Pfeil im Ergebnis-Knopf entfällt mobil: „Auswertung anzeigen“ bleibt so ab 390 px einzeilig neben „Zurück“. */
  .nav-btns .btn .arrow{display:none}
}

/* RESULTS */
.r-head-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.r-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.r-profile-line{display:flex;flex-wrap:wrap;gap:8px}
.r-pill{font-size:11.5px;font-weight:600;color:var(--graphite);background:var(--bg-soft-2);border:1px solid var(--line);padding:5px 11px;border-radius:20px;letter-spacing:.01em}
.r-pill b{color:var(--navy);font-weight:700}
.r-ref{font-size:11px;color:var(--slate-3);font-family:var(--mono);letter-spacing:.03em}
.r-classification{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:32px 34px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fff,var(--bg-soft));margin-bottom:14px}
@media(max-width:640px){.r-classification{grid-template-columns:1fr;gap:20px;padding:26px 22px}}
.r-badge{width:100px;height:100px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.r-badge::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(61,124,196,.4),transparent 60%)}
.r-badge .rb-num{font-family:var(--serif);font-size:3.4rem;font-weight:600;line-height:1;position:relative}
.r-badge .rb-cap{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8fa6c2;margin-top:5px;position:relative}
.r-class-text .r-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.r-class-text h3{font-size:clamp(1.5rem,2.8vw,2rem);margin:9px 0 11px;line-height:1.14}
.r-class-text p{font-size:14.5px;color:var(--slate);line-height:1.6;max-width:56ch}
.r-confidence{display:flex;align-items:center;gap:14px;padding:14px 34px;border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:var(--bg-soft);margin-bottom:30px;font-size:12.5px;color:var(--slate-2)}
@media(max-width:640px){.r-confidence{padding:14px 22px;flex-wrap:wrap}}
.conf-meter{display:flex;gap:4px}
.conf-meter i{width:22px;height:5px;border-radius:2px;background:var(--bg-soft-2)}
.conf-meter i.on{background:var(--accent)}
.r-charts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:30px}
@media(max-width:760px){.r-charts{grid-template-columns:1fr}}
.chart-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.chart-head{padding:16px 24px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.chart-head .ch-t{font-family:var(--serif);font-size:14.5px;color:var(--navy);font-weight:600}
.chart-head .ch-s{font-size:11.5px;color:var(--slate-2);margin-top:2px}
.chart-body{padding:22px 24px 24px;display:grid;place-items:center}
.scorecard{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-sm);background:#fff}
.sc-row{display:grid;grid-template-columns:1fr 230px;gap:26px;align-items:center;padding:18px 26px;border-bottom:1px solid var(--line-2)}
.sc-row:last-child{border-bottom:none}
@media(max-width:680px){.sc-row{grid-template-columns:1fr;gap:10px 14px;padding:16px 18px}.sc-row .sc-bar-cell{grid-column:1 / -1}}
.sc-label{display:flex;flex-direction:column;gap:4px;min-width:0}
.sc-label .l-name{font-size:14px;color:var(--navy);font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sc-label .l-read{font-size:12.5px;color:var(--slate);line-height:1.45}
.sc-bar-cell{display:flex;flex-direction:column;gap:8px}
.sc-bar{height:6px;background:var(--bg-soft-2);border-radius:4px;overflow:hidden;position:relative}
.sc-bar span{display:block;height:100%;width:0;border-radius:4px;background:var(--navy);transition:width 1s cubic-bezier(.22,1,.36,1)}
.sc-bar .lo,.sc-bar .mid,.sc-bar .hi{background:var(--navy)}
.sc-sig{font-size:11px;font-weight:600;letter-spacing:.01em;padding:3px 9px;border-radius:3px;white-space:nowrap;align-self:flex-start}
.sig-change{background:transparent;color:var(--accent-deep);border:1px solid var(--accent-soft-2)}
.sig-stay{background:transparent;color:var(--slate);border:1px solid var(--line)}
.sig-neutral{background:transparent;color:var(--slate-2);border:1px solid var(--line)}
.sc-status{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:3px;border:1px solid var(--line)}
.st-lo{background:#fff;color:var(--slate-2)}
.st-mid{background:var(--bg-soft);color:var(--slate)}
.st-hi{background:var(--navy);color:#fff;border-color:var(--navy)}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}.delta.zero{color:var(--slate-3)}
.tick-legend{display:inline-block;width:2px;height:11px;background:var(--slate);opacity:.6;vertical-align:middle;margin:0 2px}

/* status adjust panel */
.adjust-panel{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.adjust-head{padding:13px 22px;background:var(--bg-soft);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.adjust-head .ah-t{font-size:12.5px;font-weight:700;color:var(--graphite);letter-spacing:.02em}
.adjust-head .ah-i{width:16px;height:16px;color:var(--accent)}
.adjust-body{padding:6px 22px 14px}
.adjust-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-3);font-size:13px}
.adjust-row:last-child{border-bottom:none}
.adjust-row .ar-dim{font-weight:600;color:var(--navy);min-width:140px;font-size:12.5px}
.adjust-row .ar-reason{color:var(--slate);flex:1}
.adjust-row .ar-delta{font-family:var(--mono);font-weight:700;font-size:12.5px;min-width:42px;text-align:right}
.adjust-none{padding:14px 0;font-size:13px;color:var(--slate-2)}
@media(max-width:560px){.adjust-row{flex-wrap:wrap;gap:4px 12px}.adjust-row .ar-dim{min-width:0;flex-basis:100%}}

.r-readout{border-left:3px solid var(--accent);padding:6px 0 6px 24px;margin-bottom:34px;background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.r-readout .ro-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.r-readout p{font-size:15.5px;color:var(--graphite);line-height:1.66;font-family:var(--serif)}
.r-block{margin-bottom:34px}
.r-block-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.r-block-head .bn{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.05em}
.r-block-head h4{font-family:var(--serif);font-size:1.25rem;color:var(--navy);font-weight:600}
.r-block-head .hl{flex:1;height:1px;background:var(--line);align-self:center}
.r-block .bdesc{font-size:13.5px;color:var(--slate);margin-bottom:16px;max-width:70ch;line-height:1.6}

/* factors */
.factor-grid{display:grid;gap:12px}
.factor{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:18px 22px;border:1px solid var(--line);border-radius:7px;background:#fff}
.factor .fr-rank{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}
.factor .fr-body .fr-t{font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.factor .fr-body .fr-d{font-size:13.5px;color:var(--slate);line-height:1.55}
.factor .fr-val{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.factor{grid-template-columns:auto 1fr}.factor .fr-val{grid-column:2;font-size:.95rem}}

/* risks */
.risk-box{border:1px solid var(--line);border-left:4px solid var(--slate);background:var(--bg-soft);border-radius:0 7px 7px 0;padding:22px 26px}
.risk-box .rb-h{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);font-size:14px;margin-bottom:14px}
.risk-box .rb-h svg{width:19px;height:19px;color:var(--slate)}
.risk-box ul{list-style:none;display:grid;gap:11px}
.risk-box li{font-size:13.5px;color:var(--slate);line-height:1.55;display:flex;gap:11px}
.risk-box li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--slate-2);flex:0 0 auto;margin-top:7px}

/* next step */
.nextstep{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.nextstep .ns-h{padding:16px 24px;background:var(--accent-soft);border-bottom:1px solid var(--accent-soft-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.nextstep .ns-b{padding:22px 24px}
.nextstep .ns-t{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;margin-bottom:8px}
.nextstep .ns-d{font-size:14px;color:var(--slate);line-height:1.6}
.nextstep .ns-when{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;font-family:var(--mono);color:var(--slate-2);letter-spacing:.04em}

/* action list */
.action-list{display:grid;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.action-item{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line-2);background:#fff}
.action-item:last-child{border-bottom:none}
.action-num{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}
.action-body .ab-t{font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
.action-body .ab-d{font-size:13.5px;color:var(--slate);line-height:1.55}
.action-body .ab-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-top:8px;border:1px solid var(--line);background:var(--bg-soft);padding:3px 9px;border-radius:3px}

/* channels */
.channels{display:grid;gap:12px}
.channel{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 22px;border:1px solid var(--line);border-radius:7px;background:#fff}
.channel.locked{background:var(--bg-soft);border-style:dashed;opacity:.78}
.channel .ic{width:38px;height:38px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;background:var(--navy);color:#fff}
.channel.locked .ic{background:var(--bg-soft-2);color:var(--slate-2)}
.channel .cinfo .ct{font-size:14.5px;font-weight:600;color:var(--navy)}
.channel .cinfo .cd{font-size:13px;color:var(--slate);line-height:1.5;margin-top:3px}
.channel .cinfo .cd b{color:var(--graphite);font-weight:600}
.channel .cfit{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:20px;white-space:nowrap}
.cfit.rec{background:var(--green-soft);color:var(--green)}
.cfit.ok{background:var(--accent-soft);color:var(--accent-deep)}
.cfit.no{background:var(--bg-soft-2);color:var(--slate-2)}
@media(max-width:560px){.channel{grid-template-columns:auto 1fr;gap:12px}.channel .cfit{grid-column:2;justify-self:start}}

/* uncommon */
.uncommon{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.uncommon{grid-template-columns:1fr}}
.unc{padding:20px 22px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(180deg,#fff,var(--bg-soft));position:relative}
.unc::before{content:"";position:absolute;top:20px;left:0;width:3px;height:24px;background:var(--accent);border-radius:0 2px 2px 0}
.unc .ut{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;padding-left:6px}
.unc .ud{font-size:13px;color:var(--slate);line-height:1.55;padding-left:6px}

/* exec grid (Zeit + Fallstricke) */
.exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.exec-grid{grid-template-columns:1fr}}
.exec-col{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.exec-col-head{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--line-2);background:var(--bg-soft);flex-wrap:wrap}
.exec-col-head .ech-ic{width:30px;height:30px;flex:0 0 auto;border-radius:6px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.exec-col-head .ech-ic.warn{background:var(--bg-soft-2);color:var(--slate)}
.exec-col-head .ech-t{font-size:13.5px;font-weight:700;color:var(--navy)}
.exec-col-head .ech-s{font-size:11px;color:var(--slate-2);flex-basis:100%;padding-left:39px;margin-top:-2px}
.exec-col .timeline{padding:20px 22px 20px 46px}
.exec-col .watch-grid{padding:18px 20px}

/* timeline + watch */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-28px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.tl-item .tlh{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:3px}
.tl-item .tld{font-size:13.5px;color:var(--slate);line-height:1.55}
.tl-item .tlw{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-family:var(--mono);margin-bottom:2px}
.watch-grid{display:grid;gap:10px}
.watch{display:flex;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:7px;background:var(--bg-soft);font-size:13px;color:var(--slate);line-height:1.5}
.watch .wi{width:18px;height:18px;flex:0 0 auto;color:var(--slate);margin-top:1px}

/* PAYWALL PREVIEW */
.paywall{border:1px solid var(--accent-soft-2);border-radius:10px;overflow:hidden;margin-bottom:30px;background:#fff}
.pw-head{padding:22px 28px;background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#cdd8e4;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pw-head .pwh-t{font-family:var(--serif);font-size:1.25rem;color:#fff;font-weight:600}
.pw-head .pwh-s{font-size:12.5px;color:#9aacc1;margin-top:3px}
.pw-badge{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.3);padding:5px 12px;border-radius:20px}
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2)}
@media(max-width:680px){.pw-grid{grid-template-columns:1fr}}
.pw-feature{background:#fff;padding:22px 24px;position:relative}
.pw-feature .pf-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.pw-feature .pf-ic{width:34px;height:34px;flex:0 0 auto;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.pw-feature .pf-t{font-size:14.5px;font-weight:700;color:var(--navy)}
.pw-feature .pf-d{font-size:13px;color:var(--slate);line-height:1.55;margin-bottom:14px}
.pw-preview{position:relative;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg-soft)}
.pw-blur{filter:blur(3px);opacity:.75;pointer-events:none;user-select:none}
.pw-lock-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(252,253,254,.1),rgba(252,253,254,.65))}
.pw-lock-overlay .pl-chip{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:11.5px;font-weight:700;color:var(--graphite);box-shadow:var(--shadow-sm)}
.pw-lock-overlay svg{width:13px;height:13px;color:var(--accent)}
/* mini map preview */
.mini-map{height:130px;position:relative;background:var(--bg-soft-2)}
.mini-map svg{width:100%;height:100%}
/* mini chart preview */
.mini-chart{height:130px;padding:14px}
/* mini calc preview */
.mini-calc{padding:16px}
.mini-calc .mc-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid var(--line-3);color:var(--slate)}
.mini-calc .mc-big{font-family:var(--serif);font-size:1.6rem;color:var(--navy);font-weight:600;margin-top:8px}
.mini-list{padding:14px 16px}
.mini-list .ml-item{display:flex;gap:10px;font-size:12px;color:var(--slate);padding:5px 0}
.mini-list .ml-item .ml-n{color:var(--accent);font-weight:700;font-family:var(--mono)}

.r-restart{margin-top:26px;text-align:center}
.r-restart button{background:none;border:none;color:var(--slate-2);font-size:13px;cursor:pointer;font-family:var(--sans);text-decoration:underline;text-underline-offset:3px}
.r-restart button:hover{color:var(--graphite)}
.r-disclaimer{font-size:11.5px;color:var(--slate-3);line-height:1.55;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-2);max-width:74ch}

/* ===== Result v2 — full-bleed banded report ===== */
.panel-results .panel-top{display:none}
.check-results .sec-head{display:none}
.panel-results .panel-body{padding:0;min-height:0}
.r2-band{padding:0}
.r2-inner{max-width:760px;margin:0 auto;padding:40px 48px}
.r2-inner > *{margin-bottom:0}
.r2-inner > * + *{margin-top:20px}
.r2-inner > .da-h + *{margin-top:10px}
@media(max-width:640px){.r2-inner{padding:30px 22px}}
.r2-soft{background:var(--bg-soft)}
.r2-soft2{background:var(--bg-soft-2)}
.r2-white{background:#fff}
.r2-reco{background:var(--accent-soft)}
.r2-next{background:var(--accent-soft-2)}
.r2-foot{padding:24px 48px;background:var(--bg-soft);border-top:1px solid var(--line)}
@media(max-width:640px){.r2-foot{padding:22px}}
.r2-foot .r-disclaimer{margin:0 0 14px}
.r2-foot .r-restart{margin:0;text-align:left}

.r2-sec{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.r2-secnum{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent)}
.r2-sec h3{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-weight:600;margin:0;line-height:1.1;position:relative}
.r2-sec h3::after{content:"";position:absolute;left:0;bottom:-9px;width:40px;height:2px;background:var(--accent);border-radius:1px}
.r2-sec::after{content:"";flex:1;height:1px;background:var(--line)}
/* 2-step result layout: step dividers + collapsible "why" */
.r2-stephead{background:var(--paper);border-top:2px solid var(--accent)}
.r2-stephead .r2-inner{padding-top:30px;padding-bottom:6px}
/* Ergebnisseite: schlanker "Gratis Konto"-CTA direkt unter dem Verdict (nur anonym) */
.r2-savewrap .r2-inner{padding-top:20px;padding-bottom:4px}
.r2-savebar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:12px;padding:15px 20px}
.r2-save-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.r2-save-tx b{font-size:15.5px;color:var(--navy);font-weight:700;letter-spacing:-.01em}
.r2-save-tx span{font-size:12.5px;color:var(--slate);line-height:1.45}
.r2-save-btn{flex:0 0 auto}
@media(max-width:560px){.r2-savebar{flex-direction:column;align-items:stretch}.r2-save-btn{width:100%;justify-content:center}}
.r2-save-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.r2-save-tool{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;background:#fff;border:1px solid var(--accent-soft-2);border-radius:999px;padding:6px 12px;transition:background .18s,border-color .18s,transform .12s}
.r2-save-tool:hover{background:var(--accent-soft);border-color:var(--accent-light);transform:translateY(-1px)}
.r2-save-tool .rst-ic{display:inline-flex;align-items:center;color:var(--accent)}
.r2-save-tool .rst-ic svg{width:15px;height:15px}
.r2-stephead-2{border-top-color:var(--accent-light)}
/* Schritt-Kicker der Kette („Schritt 1 von 4“): nur noch auf den Werkzeugseiten,
   13px, 600, --accent-deep; Ziffern in der Textschrift */
.r2-step-k{font-family:var(--v7-text);font-size:13px;font-weight:600;letter-spacing:var(--v7-text-track);color:var(--accent-deep);font-variant-numeric:lining-nums tabular-nums}
.r2-stephead-2 .r2-step-k{color:var(--accent-light)}
.r2-step-t{font-family:var(--serif);font-size:1.7rem;color:var(--navy);font-weight:600;margin:6px 0 6px;line-height:1.12}
.r2-step-d{font-size:14.5px;color:var(--slate);line-height:1.55;margin:0;max-width:60ch}
.r2-why-acc{margin-top:26px;border:1px solid var(--line);border-radius:10px;background:#fff}
.r2-why-sum{cursor:pointer;padding:14px 18px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--navy);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.r2-why-sum::-webkit-details-marker{display:none}
.r2-why-sum::after{content:"▾";color:var(--accent);font-size:13px;transition:transform .2s}
.r2-why-acc[open] .r2-why-sum::after{transform:rotate(180deg)}
.r2-why-acc[open] .r2-why-sum{border-bottom:1px solid var(--line)}
.r2-why-inner{padding:16px 18px 18px}
.r-editbtn{margin-right:20px}
.r2-body{font-size:15px;color:var(--slate);line-height:1.7;max-width:64ch}
.r2-reading{font-size:13.5px;color:var(--slate);line-height:1.6;margin-bottom:18px;max-width:70ch}
.r2-reading b{color:var(--accent-deep)}
.r2-band .da-h{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;margin:26px 0 12px}

/* verdict hero (navy) */
.r2-verdict{background:var(--navy);color:#cdd8e4;position:relative;overflow:hidden}
.r2-verdict::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 8%,rgba(61,124,196,.34),transparent 56%),radial-gradient(circle at 92% 108%,rgba(29,90,160,.20),transparent 50%);pointer-events:none}
.r2-verdict .r2-inner{position:relative}
.r2-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.r2-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-deep)}
.r2-verdict .r2-eyebrow{display:inline-block;background:none;color:#8fa6c2;padding:0;letter-spacing:.16em}
.r2-ref{font-family:var(--mono);font-size:11px;color:#7e91a8}
.r2-h1{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);color:#fff;font-weight:600;line-height:1.12;margin:0 0 10px}
.r2-lead{font-size:15.5px;color:#b9c7d8;line-height:1.62;max-width:56ch;margin:0}

/* persönliche Einordnung (Fließtext) */
.r2-narrative{background:var(--paper);border-bottom:1px solid var(--line-2)}
/* Weitere Optionen & Marktzugaenge — gleicher Grund wie das Schritte-Band, Regionsgrenze als Haarlinie. */
.r2-deepen{border-top:1px solid var(--line-2)}
.nar-eyebrow{display:inline-block;color:var(--accent-deep);margin-bottom:2px}
.nar-title{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-weight:600;line-height:1.15;margin:0}
.r2-narrative .nar-eyebrow + .nar-title{margin-top:6px}
.nar-p{font-size:15.5px;line-height:1.72;color:var(--slate);max-width:70ch;margin:0}
.nar-p + .nar-p{margin-top:14px}
.nar-p b{color:var(--graphite);font-weight:600}
.nar-blocks{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.nar-block{padding:22px 24px;background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px}
.nar-block .nar-p{max-width:66ch}
.nar-ind-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nar-ind-ic{display:inline-flex;color:var(--accent)}
.nar-ind-ic svg{width:18px;height:18px}
.nar-ind-h{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;line-height:1.1}
.nar-ind-tag{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);background:#fff;border:1px solid var(--line);padding:3px 10px;border-radius:999px;white-space:nowrap}
.nar-src{margin-top:12px;font-family:var(--mono);font-size:11.5px;line-height:1.4;color:var(--slate-2);letter-spacing:.01em}
@media(max-width:560px){.nar-block{padding:18px 18px}.nar-ind-tag{display:none}}

/* takeaways */
.r2-takeaways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:680px){.r2-takeaways{grid-template-columns:1fr}}
.r2-take{display:flex;gap:12px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:8px}
.r2-take-n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);flex:0 0 auto}
.r2-take-t{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px}
.r2-take-d{font-size:12.5px;color:var(--slate);line-height:1.5}

.r2-charts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
@media(max-width:680px){.r2-charts{grid-template-columns:1fr}}

/* recommendation next-step */
.r-next-onlight{border:1px solid var(--accent-soft-2);background:#fff;border-radius:8px;padding:18px 22px;margin-bottom:18px}
.r-next-onlight .r-next-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin-bottom:6px}
.r-next-onlight .r-next-t{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;margin-bottom:6px}
.r-next-onlight .r-next-d{font-size:14px;color:var(--slate);line-height:1.6}

/* deep-questions nudge (prominent) */
.r2-nudge{border:2px solid var(--accent);background:#fff;border-radius:10px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.r2-nudge-t{font-family:var(--serif);font-size:1.3rem;color:var(--navy);font-weight:600;margin:6px 0 8px}
.r2-nudge-d{font-size:14px;color:var(--slate);line-height:1.6;max-width:62ch;margin-bottom:16px}
.rb-ic{display:grid;place-items:center;width:100%;height:100%}
.rb-ic svg{width:46px;height:46px;color:#fff}
.r2-steplead{font-size:14.5px;color:var(--slate);line-height:1.6;margin-bottom:18px;max-width:64ch}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line);padding:24px 0}
.faq h3{font-size:1.1rem;margin-bottom:9px}
.faq p{font-size:14.5px;color:var(--slate);line-height:1.6}

/* footer */
footer{background:var(--navy);color:#8a9cb2;padding:58px 0 42px}
.foot-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:42px;flex-wrap:wrap}
.foot-brand .brand-name{color:#fff}
.foot-brand p{font-size:13.5px;color:#7a8ea5;max-width:36ch;margin-top:15px;line-height:1.6}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6a7d94;margin-bottom:15px;font-family:var(--sans);font-weight:700}
.foot-col a,.foot-col button{display:block;color:#a9bbd1;font-size:14px;text-decoration:none;margin-bottom:4px;padding:7px 0;background:none;border:none;cursor:pointer;font-family:var(--sans);text-align:left;line-height:1.4}
.foot-col a:hover,.foot-col button:hover{color:#fff}
.foot-bottom{margin-top:44px;padding-top:25px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#6a7d94}

/* SUBPAGE (legal / studies) */
.subpage{display:none;padding-top:64px;padding-bottom:72px;min-height:60vh}
.subpage.active{display:block;animation:fade .3s ease}
.subpage .back-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;margin-bottom:26px;padding:0}
.subpage .back-link:hover{text-decoration:underline}
.subpage h1{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:12px}
.subpage .sp-lead{font-size:1.02rem;color:var(--slate);max-width:68ch;line-height:1.62;margin-bottom:14px}
.subpage h2{font-size:1.3rem;margin:34px 0 12px}
.subpage h3{font-size:1.08rem;margin:22px 0 8px}
.subpage p{font-size:15px;color:var(--graphite);line-height:1.68;margin-bottom:14px;max-width:74ch}
.subpage .sp-ref{font-size:12.5px;color:var(--slate-2);line-height:1.55;margin:-6px 0 20px;padding-left:14px;border-left:2px solid var(--line);max-width:74ch}
.subpage .sp-ref i{font-style:italic}
.subpage ul{margin:0 0 16px 0;padding-left:0;list-style:none;max-width:74ch}
.subpage ul li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.5px;color:var(--slate);line-height:1.55}
.subpage ul li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.subpage .placeholder{padding:16px 20px;border:1px dashed var(--slate-3);border-radius:6px;background:var(--bg-soft);font-size:13.5px;color:var(--slate-2);margin-bottom:16px;line-height:1.55}
.legal-note{padding:18px 22px;border:1px solid var(--amber);border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 7px 7px 0;font-size:13.5px;color:#6a5217;line-height:1.6;margin:20px 0;max-width:74ch}

/* Info-Seiten (Studien & Quellen, Methodik): Inhaltsverzeichnis mit Serifenziffern */
.st-index{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);margin:34px 0 8px;border-top:1px solid var(--navy);border-bottom:1px solid var(--line)}
.st-index.st-3{--cols:3}.st-index.st-4{--cols:4}
.st-index>*{display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding:20px 22px 22px 0;text-decoration:none;color:inherit}
.st-index>*+*{padding-left:22px;border-left:1px solid var(--line)}
.st-index .st-n{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--slate);letter-spacing:-.01em;transition:color .18s}
.st-index .st-t{font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--navy);line-height:1.25;margin-top:14px;text-underline-offset:3px;text-decoration-thickness:1px}
.st-index .st-s{font-size:13px;color:var(--slate);line-height:1.45;margin-top:4px}
.st-index.st-plain .st-t{margin-top:0}
.st-index.st-plain{border-top-color:var(--line);margin:22px 0 20px}
.st-index a:hover .st-n,.st-index a:focus-visible .st-n{color:var(--accent)}
.st-index a:hover .st-t,.st-index a:focus-visible .st-t{text-decoration-line:underline}
@media(max-width:760px){
  .st-index,.st-index.st-3,.st-index.st-4{grid-template-columns:1fr}
  .st-index>*,.st-index>*+*{grid-template-columns:44px 1fr;grid-template-rows:auto auto;padding:14px 0;border-left:0}
  .st-index>*+*{border-top:1px solid var(--line-2)}
  .st-index .st-n{grid-row:1 / 3;font-size:1.35rem;padding-top:2px}
  .st-index .st-t{margin-top:0}
  .st-index.st-plain>*{grid-template-columns:1fr}
}
.studies h2,.studies h3{scroll-margin-top:88px}
.studies h2{margin-top:48px}
.studies h3 .st-hn{font-family:var(--serif);color:var(--accent);margin-right:12px}
.studies .st-index .st-s{line-height:1.4}
.studies .sp-ref{color:var(--slate)}
/* Methodik: Dimensionsliste, Skala der Ergebnistypen, Schema des Gehaltsbands */
.method h2{margin-top:52px;scroll-margin-top:88px}
.method .conv-row .idx,.method .conv-node .cn-eyebrow{color:var(--slate)}
.m-scale{margin:22px 0 18px}
.m-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate);margin-bottom:10px}
.m-ends span:last-child::after{content:" \2192"}
.m-ends span:first-child::before{content:"\2190  "}
.m-types{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.m-types li{display:flex;flex-direction:column;gap:6px}
.m-types i{display:block;height:8px;border-radius:2px;background:var(--c)}
.m-types b{font-family:var(--serif);font-size:.98rem;font-weight:600;color:var(--navy);line-height:1.25;margin-top:6px}
.m-types span{font-size:12.5px;color:var(--slate);line-height:1.4}
@media(max-width:640px){
  .m-ends{display:none}
  .m-types{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-2)}
  .m-types li{display:grid;grid-template-columns:22px 1fr;gap:0 12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
  .m-types i{grid-row:1 / 3;width:6px;height:auto;min-height:34px}
  .m-types b{margin-top:0}
}
.m-band{margin:26px 0 8px;max-width:640px}
.mb-lab{position:relative;height:20px;font-size:12.5px;color:var(--slate)}
.mb-lab span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.mb-lab span.l{left:0;transform:none}.mb-lab span.r{right:0;left:auto;transform:none}
.mb-lab.top span{bottom:4px;color:var(--navy);font-weight:600}
.mb-lab.top span.you{color:var(--accent-deep)}
.mb-track{position:relative;height:10px;border-radius:5px;background:var(--line-2);margin:6px 0}
.mb-mid{position:absolute;left:25%;width:50%;top:0;bottom:0;background:var(--accent-soft-2)}
.mb-med{position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--navy)}
.mb-you{position:absolute;left:72%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.m-band figcaption{font-size:12px;color:var(--slate);margin-top:8px}
.m-pats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 22px}
.m-pat{border:1px solid var(--line);border-radius:8px;padding:18px 20px 16px;background:var(--bg)}
.subpage .m-pat-h{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 14px}
.subpage ul.m-bars{display:grid;gap:9px;margin:0;max-width:none}
.subpage ul.m-bars li{display:grid;grid-template-columns:10rem 1fr;align-items:center;gap:12px;padding:0;margin:0;font-size:13px;color:var(--slate)}
.subpage ul.m-bars li::before{content:none}
.m-bars i{position:relative;display:block;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.m-bars i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:3px;background:var(--slate)}
.m-bars li.hl span{color:var(--navy);font-weight:600}
.m-bars li.hl i::after{background:var(--accent)}
.subpage .m-res{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-2)}
.m-res i{width:10px;height:10px;border-radius:2px;background:var(--c);flex:0 0 auto}
.m-res b{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:1rem}
.m-pats figcaption,.m-nudge figcaption{grid-column:1 / -1;font-size:12px;color:var(--slate)}
@media(max-width:640px){.m-pats{grid-template-columns:1fr}.subpage ul.m-bars li{grid-template-columns:8.8rem 1fr}}
.m-nudge{margin:18px 0 8px;border-top:1px solid var(--line)}
.mn-row{display:grid;grid-template-columns:14rem 1fr 15rem;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.mn-dim{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:.98rem;line-height:1.3}
.mn-track{position:relative;height:6px;border-radius:3px;background:var(--line-2)}
.mn-track i{position:absolute;top:50%}
.mn-line{height:2px;margin-top:-1px;background:var(--accent)}
.mn-from,.mn-to{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.mn-from{border:1.5px solid var(--slate);background:var(--bg)}
.mn-to{background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.mn-why{font-size:13px;color:var(--slate);line-height:1.4}
.m-nudge figcaption{margin-top:8px}
@media(max-width:640px){.mn-row{grid-template-columns:1fr;gap:8px}.mn-track{margin:6px 6px}}
.subpage .sp-note{font-size:13px;color:var(--slate);line-height:1.6;border-top:1px solid var(--line);padding-top:16px;margin-top:44px}
/* Schlusszeile der Sonderseite „Kasse nicht verfügbar“ (/kasse-nicht-verfuegbar/): die beiden
   Rückwege als back-links in einer Zeile, abgesetzt mit der Haarlinie von .sp-note. Die Links
   sind 44 px hoch, damit sie am Daumen treffbar bleiben; die Seite hat dafür oben keinen back-link. */
.subpage .sp-wege{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:44px;padding-top:4px;border-top:1px solid var(--line)}
.subpage .sp-wege .back-link{margin:0;min-height:44px;text-decoration:none}
.subpage ul.refs{max-width:84ch}
.subpage ul.refs li{padding-left:28px;text-indent:-28px;font-size:13.5px;color:var(--graphite);margin-bottom:10px}
.subpage ul.refs li::before{content:none}
.subpage ul.refs a{overflow-wrap:anywhere}

.reveal{opacity:0;transform:translateY(15px);animation:reveal .75s cubic-bezier(.22,1,.36,1) forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.3s}.d5{animation-delay:.42s}.d6{animation-delay:.54s}
/* Scroll-Reveal: einmaliges, dezentes Einblenden beim Scrollen (app.js setzt .in) */
.sr{opacity:0;transform:translateY(14px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.sr.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .sr{transition:none;opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== Cookie consent banner ===== */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 24px rgba(13,27,46,.08);z-index:9999;animation:cb-in .3s ease-out}
#cookie-banner.cb-hide{animation:cb-out .3s ease-in forwards}
@keyframes cb-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cb-out{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}
.cb-inner{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;gap:32px;align-items:center}
@media(max-width:740px){.cb-inner{flex-direction:column;align-items:stretch;gap:18px;padding:18px 20px}}
.cb-body{flex:1}
.cb-title{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.cb-body p{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0}
.cb-body a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.cb-actions{display:flex;gap:10px;flex:0 0 auto}
@media(max-width:740px){.cb-actions{justify-content:flex-end}}
.cb-btn{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.18s}
.cb-btn:hover{border-color:var(--slate-2);background:var(--bg-soft)}
.cb-accept{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}
.cb-accept:hover{background:var(--navy);border-color:var(--navy)}

/* ===== Referral box on results page ===== */
.referral-box{margin-top:48px;padding:28px 30px;border:1px solid var(--accent-soft-2);background:var(--accent-soft);border-radius:8px}
.ref-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
.ref-title{font-family:var(--serif);font-size:1.3rem;color:var(--navy);margin:0 0 10px;font-weight:600}
.ref-body{font-size:14px;color:var(--slate);line-height:1.6;margin:0 0 18px;max-width:62ch}
.ref-link-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.ref-link-input{flex:1;min-width:220px;padding:11px 14px;font-family:var(--mono);font-size:13px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--navy)}
.ref-copy-btn{padding:11px 20px;background:var(--navy);color:#fff;border:none;border-radius:var(--radius);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.ref-copy-btn:hover{background:var(--accent-deep)}
.ref-copy-btn.copied{background:var(--success,#2a8a45)}
.ref-incentive{margin-top:14px;font-size:12.5px;color:var(--slate-2);line-height:1.5}

/* ===== Result: above-the-fold emphasis + CTA#1 + detail accordion (Punkt 3) ===== */
.r-block-primary{margin-bottom:18px;background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:20px 22px}

.cta1{margin:24px 0 10px}
.cta1-inner{background:linear-gradient(180deg,var(--accent-soft),#fff 90%);border:1px solid var(--accent-soft-2);border-radius:10px;padding:26px 28px;box-shadow:var(--shadow-sm)}
.cta1-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.cta1-title{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--navy);margin:8px 0 0;line-height:1.2}
.cta1-body{font-size:14.5px;color:var(--slate);line-height:1.6;margin:10px 0 0;max-width:60ch}
.cta1-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}
.cta1-secondary{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cta1-secondary:hover{color:var(--accent-deep)}

/* Detail-Analyse: prominente Sektion am Ende mit Vorschau-Kacheln */
.detail-section{margin:40px 0 8px;padding-top:8px;border-top:2px solid var(--navy)}
.da-previews{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 18px}
@media(max-width:860px){.da-previews{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.da-previews{grid-template-columns:1fr}}
.dp-tile{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(180deg,#fff,var(--bg-soft));box-shadow:var(--shadow-xs);transition:transform .16s,box-shadow .16s,border-color .16s}
.dp-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--accent-soft-2)}
.dp-tile .dp-ic{width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center}
.dp-tile .dp-ic svg{width:18px;height:18px}
.dp-tile .dp-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.dp-tile .dp-t{font-size:13px;font-weight:700;color:var(--navy);line-height:1.25}
.dp-tile .dp-d{font-size:12px;color:var(--slate);line-height:1.45}

.detail-accordion{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.detail-accordion[open]{box-shadow:var(--shadow-sm)}
.da-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;padding:16px 22px;background:linear-gradient(180deg,var(--accent-soft),#fff 95%);transition:background .15s;text-align:center}
.da-summary::-webkit-details-marker{display:none}
.da-summary:hover{background:var(--accent-soft-2)}
.da-cta-t{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--accent-deep);letter-spacing:.01em}
.da-chev{flex:0 0 auto;color:var(--accent-deep);transition:transform .25s;display:inline-flex}
.da-chev svg{width:20px;height:20px}
.detail-accordion[open] .da-chev{transform:rotate(180deg)}
.detail-accordion[open] .da-summary{border-bottom:1px solid var(--line)}
.da-content{padding:24px 22px 6px}
.da-content > .r-confidence:first-child{margin-top:0;border-radius:8px;border-top:1px solid var(--line)}
.da-content > .r-charts:first-child,.da-content > .r-block:first-child{margin-top:0}

@media(max-width:640px){.da-summary{padding:16px}.da-content{padding:18px 16px 4px}}
/* ===== Highlighted bottom CTA ("Ready for the check?") ===== */
#final-cta{background:linear-gradient(135deg,var(--navy),var(--navy-3));border:none}
#final-cta .sec-head{max-width:62ch;margin:0 auto;text-align:center}
#final-cta .eyebrow{color:#7fb0e6}
#final-cta .rule{background:var(--accent-light);margin-left:auto;margin-right:auto}
#final-cta h2,#final-cta p{color:#e6edf4}
#final-cta .btn-primary{background:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.30)}
#final-cta .btn-primary:hover{background:var(--accent-light)}
/* ===== Result pyramid: verdict colour, positioning quadrant, plain factors ===== */
.r-classification.type-STABIL{border-left:3px solid var(--green)}
.r-classification.type-OPTIONEN{border-left:3px solid var(--accent)}
.r-classification.type-INTERN{border-left:3px solid var(--accent-light)}
.r-classification.type-PRUEFEN{border-left:3px solid var(--amber)}
.r-classification.type-WECHSEL{border-left:3px solid var(--red)}

.r-position{border:1px solid var(--line);border-radius:10px;background:#fff;padding:20px 22px 14px;margin:0 0 24px;box-shadow:var(--shadow-sm)}
.r-position-head{margin-bottom:8px}
.r-position .rp-t{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy)}
.r-position .rp-s{font-size:12.5px;color:var(--slate-2)}
.r-position .rp-body{display:flex;justify-content:center}

.r-factors-block .factor{grid-template-columns:auto 1fr;border-left:3px solid var(--line)}
.r-factors-block .factor.st-hi{border-left-color:var(--slate-2)}
.r-factors-block .factor.st-mid{border-left-color:var(--slate-3)}
.r-factors-block .factor.st-lo{border-left-color:var(--line)}

.r-charts-single{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
/* ===== Hero sample-verdict card (catchy, animated) ===== */
.verdict-card .vc-verdict{display:flex;align-items:center;gap:14px;padding:20px 22px 4px}
.verdict-card .vc-badge{width:46px;height:46px;flex:0 0 auto;border-radius:10px;background:linear-gradient(145deg,var(--accent-light),var(--accent-deep));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.15rem;font-weight:600;box-shadow:0 6px 16px rgba(29,90,160,.32)}
.verdict-card .vc-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.verdict-card .vc-label{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--navy);line-height:1.25}
.verdict-card .vc-sub{font-size:12px;color:var(--slate-2);line-height:1.4}
.verdict-card .vc-gauge{flex:0 0 auto;display:flex;align-items:baseline;gap:1px;padding:6px 12px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-soft-2)}
.verdict-card .vc-gauge .vg-num{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--accent-deep);line-height:1;font-variant-numeric:tabular-nums}
.verdict-card .vc-gauge .vg-unit{font-size:10px;color:var(--slate-2);font-weight:600}
.verdict-card .vc-bars{display:flex;flex-direction:column;gap:13px;padding:20px 22px 6px}
.vc-bar{display:grid;grid-template-columns:1fr 84px auto;align-items:center;gap:12px}
.vc-bar .vb-l{font-size:12.5px;color:var(--graphite);font-weight:500;line-height:1.3}
.vc-bar .vb-track{height:7px;border-radius:5px;background:var(--bg-soft-2);overflow:hidden}
.vc-bar .vb-track i{display:block;height:100%;width:0;border-radius:5px;animation:vbgrow 1.1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:.5s}
.vc-bar.change .vb-track i{background:linear-gradient(90deg,var(--accent-light),var(--accent-deep))}
.vc-bar.stay .vb-track i{background:linear-gradient(90deg,var(--slate-3),var(--slate))}
.vc-bar .vb-v{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;min-width:20px;text-align:right}
@keyframes vbgrow{from{width:0}to{width:var(--w)}}
@media(prefers-reduced-motion:reduce){.vc-bar .vb-track i{animation:none;width:var(--w)}}
.verdict-card .vc-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 22px 0;font-size:10.5px;color:var(--slate-2);letter-spacing:.01em}
.verdict-card .vc-legend .vl-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-left:6px}
.verdict-card .vc-legend .vl-dot:first-child{margin-left:0}
.verdict-card .vc-legend .vl-dot.change{background:var(--accent-deep)}
.verdict-card .vc-legend .vl-dot.stay{background:var(--slate)}
.verdict-card .vc-takeaway{margin:14px 22px 0;padding:13px 16px;border-radius:8px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:13px;color:var(--graphite);font-style:italic;line-height:1.55}
.verdict-card .pc-foot{margin-top:18px}
/* ===== Account & tools page ===== */
.account-root{margin-top:24px}
/* Konto: Höhe reservieren + zentrierter Spinner gegen den Lade-Flash/Sprung */
.account-root{min-height:60vh}
.acc-loading{min-height:56vh;display:flex;align-items:center;justify-content:center;color:var(--slate-2);font-size:14px}
.acc-loading::before{content:"";width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:accspin .8s linear infinite}
@keyframes accspin{to{transform:rotate(360deg)}}
.acc-card{max-width:420px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.acc-tabs{display:flex;border-bottom:1px solid var(--line)}
.acc-tab{flex:1;padding:14px;background:var(--bg-soft);border:none;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--slate-2)}
.acc-tab.on{background:#fff;color:var(--navy);box-shadow:inset 0 -2px 0 var(--accent)}
.acc-form{display:flex;flex-direction:column;gap:14px;padding:22px}
.acc-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--graphite)}
.acc-form input{font-family:var(--sans);font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.acc-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.acc-form .btn{margin-top:4px;justify-content:center}
.acc-msg{font-size:13px;color:var(--red);min-height:1em;line-height:1.4}
.acc-link{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:0;text-align:left;font-family:var(--sans)}
.acc-fine{font-size:12px;color:var(--slate-2);line-height:1.5}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);flex-wrap:wrap}
.acc-hello{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:700}
.acc-email{font-family:var(--serif);font-size:1.05rem;color:var(--navy);font-weight:600}
.acc-tools-title{font-size:1.2rem;margin:32px 0 14px}
.tool-list{display:grid;gap:12px}
.tool-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:#fff}
.tool-row.is-locked{background:var(--bg-soft)}
.tool-info{min-width:0}
.tool-name{font-size:14.5px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.tool-desc{font-size:13px;color:var(--slate);line-height:1.5}
.tool-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:20px;border:1px solid transparent;line-height:1.45;white-space:nowrap}
.tool-badge.unlocked{background:#e6f4ec;color:#2e7d52}
.tool-badge.unlocked::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.tool-badge.locked{background:var(--accent-soft);color:var(--accent-deep)}
.tool-badge.soon{background:var(--bg-soft);color:var(--slate-2);border-color:var(--line)}
.tc-sample{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none}
.tc-sample:hover{color:var(--accent-deep);text-decoration:underline}
.tool-interest.is-on{opacity:.72;cursor:default}
.acc-referral.is-top{margin:0 0 26px;border-color:var(--accent-soft-2);background:var(--accent-soft)}
.acc-sample-cta{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.acc-sample-cta:hover{color:var(--accent-deep);text-decoration:underline}
.tool-buy{flex:0 0 auto;padding:9px 18px;font-size:13.5px}
.acc-danger{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.acc-delete{background:none;border:none;color:var(--red);font-size:13px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;font-family:var(--sans)}
.acc-danger .acc-fine{display:block;margin-top:6px}
/* Numbers-driven Dashboard (nd-*): große Zahlen statt Fließtext */
.nd-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);margin:2px 0 9px}
.nd-funnel{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.nd-fstep{padding:13px 12px;background:var(--bg);border-left:1px solid var(--line-2)}
.nd-fstep:first-child{border-left:0}
.nd-fstep .nd-n{font-size:29px;font-weight:800;line-height:1;color:var(--navy);letter-spacing:-.02em}
.nd-fstep.nd-win .nd-n{color:#1c7a4d}
.nd-fstep .nd-l{font-size:11px;color:var(--slate-2);margin-top:5px;font-weight:600}
.nd-fstep .nd-r{margin-top:7px;font-size:11px;font-weight:700;color:var(--accent-deep)}
.nd-fstep .nd-r i{font-style:normal;color:var(--slate-3);font-weight:600}
.nd-fstep .nd-dd{margin-top:6px;min-height:16px}
.nd-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nd-sc{border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:var(--bg)}
.nd-sc.nd-warn{border-color:#e7c1a6;background:#fdf7f0}
.nd-sc-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:11px}
.nd-ic{display:inline-flex;color:var(--slate)}
.nd-ic svg{width:16px;height:16px;display:block}
.nd-share{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--slate-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.nd-mini{display:flex;align-items:flex-end;gap:6px}
.nd-cell{flex:1}
.nd-cell .nd-n2{font-size:19px;font-weight:800;color:var(--navy);line-height:1}
.nd-cell .nd-l2{font-size:10px;color:var(--slate-2);margin-top:3px;font-weight:600}
.nd-arw{color:var(--slate-3);font-size:13px;padding-bottom:14px}
.nd-key{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:8px}
.nd-key-n{font-size:25px;font-weight:800;line-height:1}
.nd-key.nd-good .nd-key-n{color:#1c7a4d}
.nd-key.nd-bad .nd-key-n{color:#b4402f}
.nd-key-l{font-size:11px;color:var(--slate-2);font-weight:600}
.nd-rates{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.nd-rate{border:1px solid var(--line);border-radius:9px;padding:11px 10px;background:var(--bg)}
.nd-rate .nd-n{font-size:22px;font-weight:800;color:var(--navy);line-height:1}
.nd-rate .nd-l{font-size:10px;color:var(--slate-2);margin-top:5px;font-weight:600;line-height:1.25}
.nd-rate .nd-dd{margin-top:6px;min-height:14px}
/* Nutzung im Verlauf — Small Multiples (je Metrik eigene Skala) */
.nd-sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.nd-sm{border:1px solid var(--line);border-radius:9px;padding:10px 11px 8px;background:var(--bg)}
.nd-sm-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.nd-sm-l{font-size:11px;font-weight:600;color:var(--slate-2)}
.nd-sm-v{font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:baseline;gap:5px}
.nd-sm-svg{width:100%;height:48px;display:block}
.nd-sm-area{fill:var(--accent-soft)}
.nd-sm-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.nd-sm-dot{fill:var(--accent)}
.nd-sm-x{display:flex;justify-content:space-between;margin-top:4px;font-family:var(--mono);font-size:9px;color:var(--slate-3)}
@media(max-width:640px){
  .nd-funnel{grid-template-columns:1fr 1fr}
  .nd-fstep:nth-child(3){border-left:0}
  .nd-rates{grid-template-columns:repeat(2,1fr)}
  .nd-split{grid-template-columns:1fr}
}
/* header account link */
.nav-acc{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--slate-2);text-decoration:none;font-family:var(--sans)}
.nav-acc:hover{color:var(--accent-deep)}
/* .nav-acc (Konto) bleibt auf Mobile sichtbar — Größe via Regel oben */
/* tighter spacing on the check intro */
.assessment{padding-top:50px}
.assessment .sec-head{margin-bottom:28px}
/* auth: divider + google button */
.acc-divider{display:flex;align-items:center;gap:10px;color:var(--slate-3);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin:2px 0}
.acc-divider::before,.acc-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.acc-google{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:46px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:#3c4043;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;box-shadow:var(--shadow-xs);transition:box-shadow .18s,border-color .18s,background .18s}
.acc-google:hover{border-color:var(--slate-3);box-shadow:var(--shadow-sm);background:var(--bg-soft)}
.acc-google:active{background:var(--bg-soft-2)}
.acc-google .g-logo{flex:0 0 auto}
/* confidence bar when shown inside the detail accordion */
.da-content .r-confidence{border-radius:8px;border-top:1px solid var(--line);margin-bottom:24px}
/* account: pricing note, paid banner, referral box */
.acc-paid{padding:14px 18px;border:1px solid var(--green);border-left:4px solid var(--green);background:var(--green-soft);border-radius:0 7px 7px 0;font-size:13.5px;color:#2f5230;line-height:1.5;margin-bottom:20px}
.acc-pricing-note{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0 0 16px;max-width:64ch}
.acc-pricing-note b{color:var(--navy)}
.acc-referral{margin-top:24px;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.acc-referral.is-done{background:var(--green-soft);border-color:transparent}
.ref-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ref-label{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--navy)}
.ref-prog{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:20px;padding:2px 12px}
.ref-hint{font-size:13px;color:var(--slate);line-height:1.5;margin:8px 0 14px}
.ref-link-row{display:flex;gap:8px;flex-wrap:wrap}
.ref-link-input{flex:1 1 220px;min-width:0;font-family:var(--mono);font-size:12.5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--graphite)}
.ref-copy-btn{flex:0 0 auto;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 16px;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:var(--radius);cursor:pointer;transition:.15s}
.ref-copy-btn:hover{background:var(--navy-2)}
/* tool actions: buy + redeem */
.tool-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.tool-redeem{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:1px dashed var(--accent-light);border-radius:var(--radius);padding:8px 12px;cursor:pointer;white-space:nowrap}
.tool-redeem:hover{background:var(--accent-soft)}
.tool-redeem:disabled{opacity:.6;cursor:default}
/* tools: gate, intro, note */
.tool-root{margin-top:22px}
.tool-gate{max-width:480px;padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);text-align:center}
.tool-gate h2{font-size:1.2rem;margin-bottom:8px}
.tool-gate p{font-size:14px;color:var(--slate);margin-bottom:18px}
.tool-open{padding:9px 18px;font-size:13.5px}
.tool-intro{font-size:14px;color:var(--slate);line-height:1.6;max-width:64ch;margin-bottom:22px}
.tool-note{font-size:12px;color:var(--slate-2);margin-top:16px;max-width:620px;line-height:1.5}
.tool-pending{font-size:12.5px;color:var(--slate-2);white-space:nowrap}

/* ===== Konto: Tool-Kacheln mit Counter, Preview & Readiness ===== */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.tool-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 18px 16px;box-shadow:var(--shadow-xs);transition:box-shadow .18s,border-color .18s}
.tool-card:hover{box-shadow:var(--shadow-sm)}
.tool-card.is-locked{background:linear-gradient(180deg,#fff,var(--bg-soft))}
.tool-card.is-unlocked{border-color:var(--accent-soft-2)}
.tc-top{display:flex;align-items:center;gap:12px}
.tc-ic{width:40px;height:40px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-soft-2)}
.tool-card.is-unlocked .tc-ic{background:var(--navy);color:#fff;border-color:var(--navy)}
.tc-headline{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tc-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--navy);line-height:1.2}
.tc-counter{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:0;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--slate-2);background:var(--bg-soft-2);border:1px solid var(--line);border-radius:20px;padding:4px 11px;line-height:1}
.tc-counter .tc-c-now{color:var(--navy);font-size:15px}
.tc-counter .tc-c-of{font-size:11px;color:var(--slate-3)}
.tc-counter.ready{background:var(--green-soft);border-color:transparent;color:var(--green)}
.tc-counter.ready .tc-c-now{color:var(--green)}
.tc-desc{font-size:13px;color:var(--slate);line-height:1.55;margin:13px 0 0}
.tc-preview{margin:14px 0 0;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:var(--bg-soft);min-height:118px}
.tc-preview .mini-calc{padding:14px 16px}
.tc-preview .mc-big{font-size:1.15rem;margin-top:8px}
.tc-preview .mini-list{padding:13px 15px}
.mini-bench{padding:18px 16px 16px}
.mini-bench .mb-scale{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-3);margin-bottom:8px}
.mini-bench .bm-bar{max-width:none;margin:0 0 12px}
.mini-bench .mb-note{font-size:12px;color:var(--slate);line-height:1.45}
.tc-ready{margin:14px 0 0}
.tcr-bar{height:6px;border-radius:4px;background:var(--bg-soft-2);overflow:hidden}
.tcr-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--accent-light),var(--accent-deep));transition:width .5s cubic-bezier(.22,1,.36,1)}
.tcr-note{font-size:11.5px;color:var(--slate-2);line-height:1.5;margin-top:8px}
.tcr-note b{color:var(--accent-deep)}
.tcr-done{color:var(--green)!important}
.tcr-why{display:block;color:var(--slate-3);margin-top:2px}
.tc-foot{margin-top:15px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.tc-foot .tool-actions{margin:0}
.tc-foot .tool-buy{flex:0 0 auto}
.tc-foot .tool-open,.tc-foot .tool-download{padding:9px 18px;font-size:13.5px}
.tc-unlock-hint{font-size:12px;color:var(--slate-2)}

/* ===== Konto: Redesign — 2-Spalten-Login, Plan-Hero, kompakte Tools ===== */
.acc-auth{display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:start;max-width:900px;margin:6px auto 0}
.acc-auth-aside{padding:6px 4px 0}
.acc-auth-aside .eyebrow{margin-bottom:12px;display:block}
.aa-h{font-family:var(--serif);font-size:1.55rem;line-height:1.2;color:var(--navy);font-weight:600;margin:0 0 22px;max-width:17ch}
.aa-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:13px}
.aa-list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--slate);line-height:1.5}
.aa-list li b{color:var(--navy)}
.aa-list li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.aa-note{font-size:13px;color:var(--slate-2);line-height:1.5;margin:0;padding-top:16px;border-top:1px solid var(--line)}
.acc-auth .acc-card{max-width:none;width:100%}
/* Untertitel neben dem Anmeldeformular. */
.aa-sub{font-size:14px;color:var(--slate);line-height:1.6;margin:-10px 0 20px;max-width:40ch}
@media(max-width:720px){.aa-sub{margin-top:-6px}}
@media(max-width:720px){.acc-auth{grid-template-columns:1fr;gap:22px;max-width:440px}.acc-auth-aside{padding:0}.aa-h{font-size:1.35rem;margin-bottom:16px}}

.pp-cap{font-size:12px;color:var(--slate-2);text-align:center;line-height:1.4}

/* Schlanker Referral-Streifen (statt großem Balken) */
.acc-referral-slim{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.acc-referral-slim.is-done{background:var(--green-soft);border-color:transparent}
.ars-tx{flex:1 1 240px;font-size:13px;color:var(--slate);line-height:1.5}
.ars-label{font-weight:700;color:var(--navy)}
.ars-prog{flex:0 0 auto;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.ars-linkrow{flex:1 1 260px;display:flex;gap:8px;min-width:0}
.acc-referral-slim .ref-link-input{flex:1 1 auto;min-width:0}
@media(max-width:560px){.ars-linkrow{flex-basis:100%}}



/* ============================================================
   Results v3 — lean layout, single accent, structure-first
   ============================================================ */
/* 1) Verdict */
.r-verdict{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:26px 28px;border:1px solid var(--line);border-left-width:3px;border-radius:10px;background:#fff;margin-bottom:16px}
@media(max-width:640px){.r-verdict{grid-template-columns:1fr;gap:16px;padding:22px}}
.r-verdict-tx .r-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.r-verdict-tx h3{font-size:clamp(1.45rem,2.7vw,1.95rem);margin:8px 0 10px;line-height:1.14}
.r-verdict-sum{font-size:15px;color:var(--slate);line-height:1.6;max-width:60ch}
.r-verdict.type-STABIL{border-left-color:var(--green)}
.r-verdict.type-OPTIONEN{border-left-color:var(--accent)}
.r-verdict.type-INTERN{border-left-color:var(--accent-light)}
.r-verdict.type-PRUEFEN{border-left-color:var(--amber)}
.r-verdict.type-WECHSEL{border-left-color:var(--red)}

/* 2) Warum (kompakt) */
.r-why{margin-bottom:16px;padding:20px 24px;border:1px solid var(--line);border-radius:10px;background:#fff}
.r-why-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-bottom:13px}
.r-why-list{list-style:none;display:grid;gap:11px}
.r-why-list li{display:flex;flex-direction:column;gap:2px;padding-left:17px;position:relative}
.r-why-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rw-name{font-size:14px;font-weight:600;color:var(--navy)}
.rw-txt{font-size:13px;color:var(--slate);line-height:1.5}

/* 3) Nächster Schritt */
.r-next{margin-bottom:20px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fff}
.r-next-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px;font-family:var(--mono)}
.r-next-t{font-family:var(--serif);font-size:1.2rem;color:var(--navy);font-weight:600;margin-bottom:7px}
.r-next-d{font-size:14px;color:var(--slate);line-height:1.6;max-width:66ch}

/* 4) Eine CTA */
.r2-cta{background:#fff;border:2px solid var(--accent);border-radius:12px;padding:26px 28px;box-shadow:var(--shadow-sm)}
.r2-cta .r2-eyebrow{color:var(--accent-deep)}
.r2-cta-t{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-weight:600;line-height:1.18;margin:8px 0 0;max-width:30ch}
.r2-cta-d{font-size:14.5px;color:var(--slate);line-height:1.6;max-width:64ch;margin:10px 0 0}
.cta-tools{margin:18px 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-tool{display:flex;gap:11px;padding:13px 15px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
.ct-ic{flex:0 0 auto;display:inline-flex;color:var(--accent);margin-top:1px}
.ct-ic svg{width:20px;height:20px}
.ct-name{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.25}
.ct-desc{font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:3px}
.r2-cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.r2-cta-note{font-size:12px;color:var(--slate-2);line-height:1.5;margin:0;max-width:64ch}
@media(max-width:640px){.cta-tools{grid-template-columns:1fr}.r2-cta{padding:22px 20px}.r2-cta-act{align-items:stretch}.r2-cta-act .btn{justify-content:center}}
.r-cta-lean{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.rcl-tx{flex:1 1 320px;min-width:0}
.rcl-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.rcl-title{font-family:var(--serif);font-size:1.18rem;color:var(--navy);font-weight:600;margin:6px 0 0}
.rcl-body{font-size:13.5px;color:var(--slate);line-height:1.55;margin:8px 0 0;max-width:58ch}
.rcl-teaser{font-size:12px;color:var(--slate-2);margin-top:10px}
.rcl-actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:0 0 auto}
.rcl-sec{font-size:13px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rcl-sec:hover{color:var(--accent-deep)}
@media(max-width:640px){.r-cta-lean{flex-direction:column;align-items:stretch}.rcl-actions{align-items:stretch}.rcl-actions .btn{justify-content:center}}

/* 5) Detailanalyse ganz unten, eingeklappt, mit Tabs */
#detailAnalysis{margin-top:28px}
.da-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.da-tab{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--slate-2);background:none;border:none;border-bottom:2px solid transparent;padding:10px 15px;cursor:pointer;margin-bottom:-1px}
.da-tab:hover{color:var(--graphite)}
.da-tab.on{color:var(--accent-deep);border-bottom-color:var(--accent)}
.da-panel{display:none;animation:fade .25s ease}
.da-panel.on{display:block}
.da-h{font-family:var(--serif);font-size:1.05rem;color:var(--navy);font-weight:600;margin:22px 0 12px}
.da-panel > .da-h:first-child{margin-top:0}
.da-panel .r-block{margin-bottom:0}
.da-panel .scorecard{margin-bottom:14px}

/* Ruhe: Verläufe & Statusfarben flach/neutral */
.da-summary{background:var(--bg-soft)}
.da-summary:hover{background:var(--bg-soft-2)}
.r-readout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:16px 20px;margin:18px 0 0}
.r-readout p{font-size:14.5px}
.r-cta{background:var(--navy)}
.r-confidence .conf-lbl{font-weight:600;color:var(--graphite)}
.r-confidence{border-radius:8px;border:1px solid var(--line);margin-bottom:18px}
/* Scorecard im Tab: Statusfarben neutralisieren (nur Verdict trägt Farbe) */
.da-panel .sc-status.st-hi{background:var(--graphite);border-color:var(--graphite)}
.da-panel .sc-sig.sig-change{color:var(--accent-deep)}

/* ===== Konto: Ergebnis-Karte ===== */
.acc-result{margin:18px 0 4px;padding:22px 24px;border:1px solid var(--line);border-left-width:3px;border-radius:10px;background:#fff}
.acc-result.type-STABIL{border-left-color:var(--green)}
.acc-result.type-OPTIONEN{border-left-color:var(--accent)}
.acc-result.type-INTERN{border-left-color:var(--accent-light)}
.acc-result.type-PRUEFEN{border-left-color:var(--amber)}
.acc-result.type-WECHSEL{border-left-color:var(--red)}
.acc-result-empty{border-left-color:var(--line);background:var(--bg-soft)}
.acc-result-empty .ar-sum{margin-bottom:0}
.ar-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ar-badge{width:40px;height:40px;flex:0 0 auto;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;font-weight:600}
.ar-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);font-weight:700}
.ar-title{font-family:var(--serif);font-size:1.2rem;color:var(--navy);font-weight:600;margin-top:3px}
.ar-sum{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0 0 14px;max-width:68ch}
.ar-next{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:8px;background:var(--bg-soft);border-left:3px solid var(--accent);margin-bottom:14px}
.ar-next-h{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);font-family:var(--mono)}
.ar-next-t{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.4}
.ar-view{padding:9px 16px;font-size:13.5px}


/* ===== Employer tool: PLZ search + radar ===== */
.em-search{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;max-width:700px;margin-bottom:14px}
.em-search label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--graphite)}
.em-search input,.em-search select{font-family:var(--sans);font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;min-height:44px}
.em-search input{min-width:150px}
.em-search input:focus,.em-search select:focus{outline:2px solid var(--accent);outline-offset:1px}
.em-search .btn{min-height:44px}
.em-result{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;margin-top:10px}
@media(max-width:760px){.em-result{grid-template-columns:1fr}}
.em-radar-wrap{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px 16px;position:sticky;top:86px;box-shadow:var(--shadow-xs)}
@media(max-width:760px){.em-radar-wrap{position:static}}
.em-radar-head{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
.em-radar-legend{font-size:11px;color:var(--slate-2);margin-top:4px;text-align:center}
.em-list-head{font-size:12.5px;color:var(--slate-2);margin-bottom:12px;font-weight:600}
.em-prefill-note{font-size:13px;color:var(--slate);background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:6px;padding:10px 14px;margin-bottom:16px}
.em-prefill-note b{color:var(--navy)}
.em-map-wrap{margin:6px 0 26px}
.em-map{position:relative;z-index:0;height:440px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft);box-shadow:var(--shadow-xs)}
@media(max-width:640px){.em-map{height:340px}}
.em-map-legend{font-size:11px;color:var(--slate-2);margin-top:6px}
.em-map-fallback{display:grid;place-items:center;height:100%;padding:24px;text-align:center;font-size:13px;color:var(--slate-2)}
.em-jobs{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.em-job{font-size:12.5px;color:var(--accent);text-decoration:none;line-height:1.4}
.em-job:hover{text-decoration:underline;color:var(--accent-deep)}
.leaflet-popup-content{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink)}
.leaflet-popup-content b{color:var(--navy)}
.leaflet-popup-content a{color:var(--accent)}

/* --- Ergebnis-PDF-Versand (Lead-Capture, Ende der Ergebnisseite) --- */
.r2-pdf{background:var(--bg-soft)}
.r2-pdf .r2-inner{max-width:720px}
.r2-pdf-h{font-family:var(--serif);font-size:1.3rem;color:var(--navy);letter-spacing:-.018em;margin:.4rem 0 0}
.r2-pdf-d{color:var(--slate);margin:.5rem 0 1.1rem;max-width:52ch}
.r2-pdf-form{display:flex;flex-direction:column;gap:.7rem}
.r2-pdf-row{display:flex;gap:.6rem;flex-wrap:wrap}
.r2-pdf-input{flex:1 1 240px;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem}
.r2-pdf-input::placeholder{color:var(--slate-3)}
.r2-pdf-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.r2-pdf-btn{white-space:nowrap;flex:0 0 auto}
.r2-pdf-consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--slate);line-height:1.5;cursor:pointer}
.r2-pdf-consent input{margin-top:.2rem;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.r2-pdf-note{font-size:.78rem;color:var(--slate-2);margin:.1rem 0 0}
.r2-pdf-msg{font-size:.9rem;margin:.2rem 0 0;min-height:1.2em}
.r2-pdf-msg.ok{color:var(--green)}
.r2-pdf-msg.err{color:var(--red)}
@media (max-width:560px){.r2-pdf-btn{width:100%}}

/* ===== Vergütungsanalyse „Deine Marktposition" (Tool) ===== */
.va-form{max-width:940px;margin:18px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px}
.va-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin-bottom:20px}
@media(max-width:620px){.va-form-grid{grid-template-columns:1fr}}
.va-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.va-form-grid input,.va-form-grid select{font-family:var(--sans);font-size:16px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}
.va-form-grid input:focus,.va-form-grid select:focus{outline:2px solid var(--accent);outline-offset:1px}
.va-check-inline{flex-direction:row!important;align-items:center;gap:9px!important;align-self:end;padding-bottom:11px}
.va-check-inline input{width:18px;height:18px;accent-color:var(--accent)}
.va-result{margin-top:26px}
.vd-wrap{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 34px;font-variant-numeric:tabular-nums;line-height:1.5}
@media(max-width:560px){.vd-wrap{padding:22px 18px}}
.vd-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 9px;display:flex;align-items:center;gap:8px}
.vd-eyebrow .rule{width:26px;height:2px;background:var(--accent);margin:0}
.vd-h1{font-family:var(--serif);font-size:31px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin:0}
.vd-h1s{font-size:13px;color:var(--slate);margin:9px 0 0;max-width:64ch;line-height:1.5}
.vd-sec-t{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.01em;margin:0 0 2px}
.vd-sec-src{font-size:10.5px;color:var(--slate-3);margin:0 0 14px}
.vd-block{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.vd-two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.vd-concl{margin-top:13px;font-size:12.5px;color:var(--ink);line-height:1.5}
.vd-concl b{color:var(--accent-deep)}
.vd-concl a{color:var(--accent)}
/* Marktband (Schritt 1): Leitzahl, Band mit mittlerer Hälfte, drei Kacheln.
   Abstände im 8er-Rhythmus: 32 trennt die Gruppen (Leitzahl | Band | Kacheln),
   24 bindet die Kacheln ans Band, 8 und 4 halten eine Gruppe zusammen.
   Die Beschriftungen liegen oberhalb (Median) und unterhalb (Du) der Spur,
   nie auf der Füllung. Am Rand hängt das Du-Label nach innen (edge-l/-r). */
.vd-strip{margin-top:32px}
.vd-lead{margin-bottom:32px}
.vd-lead-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.vd-lead-n{font-family:var(--mono);font-size:clamp(2.5rem,4vw + 1rem,3.5rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--navy);margin-top:4px;font-variant-numeric:tabular-nums}
.vd-lead-s{font-size:15px;color:var(--ink);margin:8px 0 0;max-width:44ch;line-height:1.5}
.vd-strip-lab{font-size:11px;color:var(--slate);margin-bottom:12px}
.vd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.vd-tile{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.vd-tile-l{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-2);line-height:1.4}
.vd-tile-l i{flex:0 0 auto;width:10px;height:10px;border-radius:2px;background:var(--accent-soft-2);border:1px solid var(--line)}
.vd-tile-n{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--navy);margin-top:8px;line-height:1.3;font-variant-numeric:tabular-nums}
.vd-tile-s{font-size:12px;color:var(--slate);margin-top:4px;line-height:1.4}
.vd-basis{font-size:12.5px;color:var(--slate);margin:16px 0 0;max-width:60ch;line-height:1.5}
.vd-basis+.vd-basis{margin-top:8px}
@media(max-width:780px){.vd-tiles{grid-template-columns:1fr;gap:8px}.vd-tile{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:12px 16px}.vd-tile-n{grid-column:2;grid-row:1/3;margin-top:0;text-align:right}.vd-tile-s{margin-top:2px}}
.vd-lead-cap{font-size:13.5px;color:var(--ink);margin-top:14px;max-width:70ch;line-height:1.5}
.vd-lead-cap b{color:var(--accent-deep)}
.vd-preis{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:linear-gradient(135deg,#f4f8fc,#eaf1f8);border:1px solid var(--accent-soft-2);border-radius:12px;padding:22px 26px}
.vd-preis-hero .vd-n{font-family:var(--serif);font-size:48px;font-weight:600;color:var(--accent-deep);line-height:1}
.vd-preis-hero .vd-n small{font-size:22px;color:var(--slate-3)}
.vd-preis-hero .vd-l{font-size:12.5px;color:var(--slate);margin-top:6px;max-width:22ch}
.vd-preis-hero .vd-l b{color:#a06a1c}
.vd-pr-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:4px 0;color:var(--slate);border-bottom:1px solid rgba(13,27,46,.06)}
.vd-pr-row span:last-child{font-family:var(--mono);font-weight:700;color:var(--navy)}
.vd-pr-time{display:flex;gap:20px;margin-top:10px;font-size:11.5px;color:var(--slate-2);flex-wrap:wrap}
.vd-pr-time b{font-family:var(--mono);color:var(--navy);font-size:13px}
.vd-pr-qz{margin-top:10px;font-size:11.5px;color:var(--navy-3);line-height:1.5}
.vd-pr-qz .tag{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--accent-deep);background:#fff;border:1px solid var(--accent-soft-2);border-radius:4px;padding:1px 6px;margin-right:5px}
.vd-lad{display:flex;flex-direction:column-reverse;gap:3px}
.vd-lad-r{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 8px;border-radius:5px}
.vd-lad-r .eg{flex:0 0 76px;font-family:var(--mono);font-weight:700;color:var(--slate-2)}
.vd-lad-r .mo{flex:0 0 82px;font-family:var(--mono);color:var(--slate);font-size:11.5px}
.vd-lad-r .pa{flex:1;font-family:var(--mono);color:var(--navy);font-weight:700}
.vd-lad-r .pa small{color:var(--slate-3);font-weight:400}
.vd-lad-r.you{background:var(--navy)}
.vd-lad-r.you .eg,.vd-lad-r.you .mo,.vd-lad-r.you .pa{color:#fff}
.vd-lad-r.you .pa small{color:#b8c1ca}
.vd-lad-r.next{border:1.5px dashed var(--accent);background:var(--accent-soft)}
.vd-hb{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:12.5px}
.vd-hb-l{flex:0 0 150px;color:var(--slate)}
.vd-hb-t{flex:1;height:14px;background:var(--bg-soft);border-radius:3px}
.vd-hb-f{height:100%;border-radius:3px;background:var(--accent)}
.vd-hb-v{flex:0 0 100px;text-align:right;font-family:var(--mono);font-weight:700;color:#357a4c;font-size:12px}
.vd-opp-grp{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-2);margin:14px 0 4px}
.vd-opp{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12px}
.vd-opp-l{flex:0 0 150px;color:var(--slate)}
.vd-opp-l.me{color:var(--navy);font-weight:700}
.vd-opp-t{flex:1;position:relative;height:16px}
.vd-opp-ax{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.vd-opp-z{position:absolute;top:0;bottom:0;left:50%;width:1.5px;background:var(--slate-3)}
.vd-opp-b{position:absolute;top:50%;transform:translateY(-50%);height:9px;border-radius:5px}
.vd-opp-b.up{background:#357a4c}
.vd-opp-b.dn{background:#a06a1c}
.vd-opp-d{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--navy);border:2px solid #fff}
.vd-opp-v{flex:0 0 118px;text-align:right;font-family:var(--mono);font-weight:700;font-size:11.5px;white-space:nowrap}
.vd-opp-v.up{color:#357a4c}
.vd-opp-v.dn{color:#a06a1c}
.vd-opp-v.n{color:var(--slate-2)}
.vd-wf{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vd-wf-c{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--paper)}
.vd-wf-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:10px}
.vd-wf-h .p{font-size:14px;font-weight:700;color:var(--navy)}
.vd-wf-h .p small{font-weight:400;color:var(--slate-3);font-size:10.5px}
.vd-wf-h .u{font-family:var(--mono);font-size:11px;color:var(--slate-2);white-space:nowrap}
.vd-wf-r{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:4px 0;color:var(--slate)}
.vd-wf-r span:last-child{font-family:var(--mono);font-weight:700;color:var(--navy)}
.vd-wf-r.minus span:last-child{color:#a06a1c}
.vd-wf-r.plus span:last-child{color:#357a4c}
.vd-wf-r.tot{border-top:1.5px solid var(--line);margin-top:5px;padding-top:8px;font-weight:700;color:var(--navy);font-size:12.5px}
.vd-wf-bars{margin-top:12px}
.vd-wf-bar{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:11px}
.vd-wf-bar .bl{flex:0 0 44px;color:var(--slate-2)}
.vd-wf-bar .bt{flex:1;height:14px;background:var(--bg-soft);border-radius:3px}
.vd-wf-bar .bf{height:100%;border-radius:3px}
.vd-wf-bar .bf.h{background:var(--slate-3)}
.vd-wf-bar .bf.r{background:var(--accent)}
.vd-wf-bar .bv{flex:0 0 82px;text-align:right;font-family:var(--mono);font-weight:700;color:var(--navy);font-size:11px}
.vd-wf-net{margin-top:10px;text-align:center;font-size:12.5px;color:#357a4c;font-weight:700}
.vd-wf-hot{margin-top:8px;font-size:11px;color:var(--accent-deep);line-height:1.5}
.vd-wf-hot b{font-weight:700}
.vd-summ{margin-top:28px;background:var(--navy);border-radius:12px;padding:24px 26px;color:#eaf0f6}
.vd-summ-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);margin-bottom:10px}
.vd-summ-t{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.45;color:#fff;margin-bottom:13px}
.vd-summ-t b{color:#9ec3e0}
.vd-summ-p{font-size:12.5px;color:#c4d0dc;line-height:1.6}
.vd-summ-p b{color:#fff}
.vd-summ-p a{color:#9ec3e0}
.vd-summ-chg{margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#aab8c6}
.vd-summ-chg b{color:#9ec3e0}
.vd-src{font-size:11px;color:var(--slate-3);margin-top:18px;line-height:1.5}
.vd-src b{color:var(--slate-2)}
@media(max-width:780px){.vd-two,.vd-wf,.vd-preis{grid-template-columns:1fr}}

/* Ausland: eingeklappte Länder (nur Netto-Delta, Details auf Klick) */
.vd-wf-morewrap{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.vd-wf-morehead{font-size:11px;color:var(--slate-2);margin-bottom:2px}
.vd-wf-more{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.vd-wf-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13px}
.vd-wf-more>summary::-webkit-details-marker{display:none}
.vd-wf-more>summary::after{content:"\25B8";color:var(--slate-3);font-size:11px;transition:transform .18s}
.vd-wf-more[open]>summary::after{transform:rotate(90deg)}
.vd-wf-more>summary:hover{background:var(--bg-soft)}
.wm-name{font-weight:600;color:var(--navy)}
.wm-name small{font-weight:400;color:var(--slate-3);font-size:10.5px}
.wm-net{font-family:var(--mono);font-weight:700;font-size:12.5px;margin-left:auto}
.wm-net.up{color:#357a4c}
.wm-net.dn{color:#a06a1c}
.vd-wf-more .wm-body{border:none;border-radius:0;border-top:1px solid var(--line-2);background:transparent}

/* USA/Schweiz granular: Metro-/Kanton-Tabelle */
.vd-gcard{background:linear-gradient(180deg,#fff,var(--bg-soft))}
.vd-gtab{margin:6px 0 4px}
.vd-gtab-h,.vd-gtab-r{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:8px;align-items:baseline}
.vd-gtab-h{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-3);padding:2px 0 4px;border-bottom:1px solid var(--line-2)}
.vd-gtab-h span:not(:first-child){text-align:right}
.vd-gtab-r{font-size:11.5px;padding:4px 0;border-bottom:1px solid var(--line-3)}
.vd-gtab-r:last-child{border-bottom:none}
.vd-gtab-r .m{color:var(--navy);font-weight:600}
.vd-gtab-r .g,.vd-gtab-r .rl,.vd-gtab-r .nt{font-family:var(--mono);text-align:right}
.vd-gtab-r .g{color:var(--slate-2)}
.vd-gtab-r .rl{color:var(--navy);font-weight:700}
.vd-gtab-r .nt{font-weight:700}
.vd-gtab-r .nt.up{color:#357a4c}
.vd-gtab-r .nt.dn{color:#a06a1c}

/* ===== Preise-Seite ===== */
/* Konto & Preise (/preise/ · /pricing/). Wiederverwendet: .wrap, .hero, .hero-center,
   .eyebrow, .rule, .lede, .sec-head, .btn/.btn-accent/.btn-ghost, .arrow.
   Wegen Kollision mit Landing-Klassen umbenannt: .faq → .pp-faq (Sektion),
   .faq-grid → .pp-faq-grid, .faq-item → .pp-faq-item. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn-block{width:100%;justify-content:center}

/* Hero-lite */
.pp-hero .hero-center{padding:74px 0 58px}
@media(max-width:640px){.pp-hero .hero-center{padding:50px 0 42px}}
.pp-hero .rule{margin:16px auto 0}
.pp-hero h1{font-size:clamp(1.9rem,4.2vw,2.6rem);margin:18px auto 0;max-width:22ch}
.pp-hero .lede{margin:18px auto 0;max-width:50ch}

/* Tarif-Karten + gemeinsamer Monat/Jahr-Umschalter (CSS-only, gilt für Pro & Pro+) */
.tiers{padding:56px 0 24px}
.seg-row{display:flex;justify-content:center;margin:0 0 30px}
.seg{display:inline-flex;padding:3px;background:var(--bg-soft-2);border:1px solid var(--line);border-radius:var(--radius)}
.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:2px;font-size:13.5px;font-weight:600;color:var(--slate-2);cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}
.seg label:hover{color:var(--navy)}
.seg label .save{font-size:11px;font-weight:700;color:var(--pro-deep);margin-left:6px}
.seg input:checked+label{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(13,27,46,.12)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:1px}
.p-year{display:none}
.tiers:has(#bill-year:checked) .p-month{display:none}
.tiers:has(#bill-year:checked) .p-year{display:block}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
@media(max-width:920px){.tier-grid{grid-template-columns:1fr;max-width:480px}}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm);padding:30px 28px 28px}
.tier.pro{border-color:var(--pro-line);box-shadow:var(--shadow-md)}
.tier.pro::before{content:"";position:absolute;top:-1px;left:14px;right:14px;height:2px;background:var(--pro);border-radius:1px}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.tier-tag{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2)}
.tier.pro .tier-tag{color:var(--pro-deep)}
.tier.proplus .tier-tag{color:var(--navy)}
.badge-rec{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pro-deep);background:var(--pro-soft);border:1px solid var(--pro-line);border-radius:999px;padding:3px 10px;line-height:1.4}
.badge-plus{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--slate);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px;line-height:1.4;white-space:nowrap}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.price-unit{font-size:15px;color:var(--slate-2);font-weight:500}
.price-sub{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--slate-2);margin-top:8px;min-height:1.3em}
.tier hr.sep{border:0;border-top:1px solid var(--line-2);margin:22px 0 20px}
.benefits{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.benefits li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.benefits .ck{flex:0 0 15px;width:15px;height:15px;margin-top:4px;color:var(--accent)}
.tier.pro .benefits .ck,.tier.proplus .benefits .ck{color:var(--pro)}
.benefits .plus{color:var(--slate-2)}
.cta-note{margin-top:12px;margin-bottom:0;text-align:center;font-size:12.5px;color:var(--slate-2)}
.tiers-foot{text-align:center;font-size:14px;color:var(--slate);margin:34px auto 0;max-width:880px}

/* Funktions-Vergleich (semantische Tabelle) */
.compare{padding:64px 0 8px}
.compare .sec-head,.pp-faq .sec-head{max-width:880px;margin:0 auto 30px}
.table-wrap{max-width:880px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:var(--shadow-sm)}
table.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
table.cmp caption{caption-side:top;text-align:left;padding:16px 20px 0;font-size:12.5px;color:var(--slate-2)}
table.cmp th,table.cmp td{padding:12px 20px;text-align:left;border-top:1px solid var(--line-2);font-family:var(--sans)}
table.cmp thead th{border-top:0;padding-top:14px;padding-bottom:12px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);border-bottom:1px solid var(--line)}
table.cmp th[scope="col"].c,table.cmp td.c{text-align:center;width:100px}
table.cmp thead th.pro-col{color:var(--pro-deep)}
table.cmp thead th.proplus-col{color:var(--pro-deep);background:var(--pro-soft)}
table.cmp tr.group th{background:var(--bg-soft);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);padding-top:10px;padding-bottom:10px;border-top:1px solid var(--line)}
table.cmp th[scope="row"]{font-weight:400}
table.cmp td,table.cmp th[scope="row"]{color:var(--ink)}
table.cmp .ck{width:15px;height:15px;vertical-align:-2px}
table.cmp .ck.free{color:var(--accent)}
table.cmp .ck.pro{color:var(--pro)}
table.cmp .dash{color:var(--slate-3)}
@media(max-width:560px){table.cmp th,table.cmp td{padding:11px 14px}table.cmp th[scope="col"].c,table.cmp td.c{width:74px}}

/* FAQ (pp-Präfix: .faq/.faq-grid sind auf der Landing bereits belegt) */
.pp-faq{padding:64px 0 84px}
.pp-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin:0 auto}
@media(max-width:720px){.pp-faq-grid{grid-template-columns:1fr;max-width:560px}}
.pp-faq-item{background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:22px 24px}
.pp-faq-item h3{font-size:1.06rem;line-height:1.35;margin-bottom:9px}
.pp-faq-item p{font-size:14.5px;line-height:1.65;color:var(--slate)}

/* ===== Header-Konto-Status ===== */
/* Angemeldet tauscht analytics.js den "Konto"-Textlink gegen einen 34px-Avatar
   mit Initialen (localStorage-Spiegel "sig-acct", gepflegt von account.js).
   Pro-Abo trägt einen kleinen PRO-Stempel oben rechts. Abgemeldet: Textlink.
   Der Stempel steht im Grün der Pro-Signatur (--pro-sig aus :root, Weiß darauf 5,3:1). */
.nav-acc.nav-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;flex:0 0 auto;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-soft-2);color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.nav-acc.nav-avatar:hover{background:var(--accent-soft-2);border-color:var(--accent-light);color:var(--accent-deep)}
.nav-avatar-stamp{position:absolute;top:-5px;right:-6px;display:block;padding:2.5px 4px 2px;background:var(--pro-sig);color:var(--on-navy);font-size:8px;font-weight:700;letter-spacing:.07em;line-height:1;border-radius:3px;border:1.5px solid var(--bg);pointer-events:none}

/* Kacheln: Sparkline buendig am Kachelboden, unabhaengig von der Textmenge darueber. */
.nd-funnel .nd-fstep{display:flex;flex-direction:column}
@keyframes acGrowX{from{transform:scaleX(0)}}

/* ===== Konto-Polish ===== */
/* Plan badges: Pro vs. Pro+ (quiet, reuses the muted pro green) */
.pp2-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pro-deep);background:var(--pro-soft);border:1px solid var(--pro-line);border-radius:999px;padding:4px 11px;line-height:1.4;white-space:nowrap}
.pp2-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pro);flex:0 0 auto}
.pp2-badge.is-plus{border-color:var(--pro)}
.pp2-badge.is-plus::before{content:none}
.pp2-badge-mark{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:4px;background:var(--pro);color:#fff;font-size:10px;font-weight:800;line-height:1;flex:0 0 auto}
.pp2-planline{font-size:12.5px;color:var(--slate-2);white-space:nowrap}
.pp2-planline b{color:var(--navy);font-weight:700}
.pp2-upsell{font-size:12.5px;color:var(--slate-2);line-height:1.5;margin:-6px 0 16px;padding:0 4px}
.pp2-upsell a{color:var(--accent-deep);font-weight:600;text-decoration:none}
.pp2-upsell a:hover{text-decoration:underline}
/* Admin dashboard: chart cards + the two-size chart typography system
   (11px labels/axis/legend in slate, 12px bold values in navy — nothing else) */
.pp2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.pp2-c2{grid-column:span 2}
.pp2-c3{grid-column:1/-1}
@media(max-width:900px){.pp2-grid{grid-template-columns:minmax(0,1fr)}.pp2-c2,.pp2-c3{grid-column:auto}}
.pp2-card{min-width:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.pp2-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.pp2-ct{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-2);line-height:1.4}
.pp2-take{flex:0 1 auto;min-width:0;font-size:11px;font-weight:600;color:var(--slate);font-variant-numeric:tabular-nums;line-height:1.4;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.pp2-card{padding:14px}.pp2-take{white-space:normal}}
/* Compact funnel inside the 1/3 card */
.pp2-funnel{display:flex;flex-direction:column;justify-content:space-between;gap:12px;flex:1}
.pp2-fstep{min-width:0}
.pp2-frow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pp2-fl{font-family:var(--sans);font-size:11px;color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp2-fv{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp2-fv i{font-style:normal;font-size:11px;font-weight:600;color:var(--slate-2);margin-left:6px}
.pp2-fbar{height:10px;border-radius:2px;background:var(--bg-soft);margin-top:5px;overflow:hidden}
.pp2-fbar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.pp2-fbar i{transform-origin:left;animation:acGrowX .8s cubic-bezier(.22,1,.36,1)}}

/* ===== Ergebnis-v2 ===== */
/* Verdict (peak): visible top-driver line under the lead */
.r2-meta{display:flex;align-items:center;gap:14px 36px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.r2-meta-seg{display:flex;align-items:center;gap:10px;min-width:0}
.r2-kf-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9aacc1}
.r2-kf-v{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:#fff;line-height:1.2}
.r2-meta-word{font-size:12.5px;color:#9aacc1}
.r2-verdict .conf-meter i{background:rgba(255,255,255,.16)}
.r2-verdict .conf-meter i.on{background:var(--accent-light)}
/* Evidence region: scorecard is primary, charts are secondary cards below */
.r2-evidence .scorecard{margin-bottom:0}
.r2-evidence .r2-charts{margin-bottom:0}
/* Kaskade (ruhiges Ende der Ergebnisseite): eine Karte, eine Handlung.
   Das leere Marktband zeichnet dieselbe Funktion wie Schritt 1
   (Charts.marktbandSVG mit ghost) — es gibt genau eine Bandimplementierung.
   Ohne Werte: der Mensch hat sein Profil hier noch nicht eingegeben.
   Abstände: 24 bindet das Band an den Treibersatz, 16 die Bildunterschrift
   ans Band, 32 trennt die Handlung; 8 hält Merkmale, Knopf und
   Vertrauenszeile zusammen. */
.casc-card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px 26px}
@media(max-width:560px){.casc-card{padding:22px 18px}}
.casc-t{font-family:var(--serif);font-size:1.3rem;color:var(--navy);font-weight:600;margin:0 0 6px;line-height:1.15}
.casc-d{font-size:13.5px;color:var(--slate);line-height:1.6;max-width:54ch;margin:0}
.casc-main .vd-strip{margin-top:24px}
.casc-cap{margin-top:16px}
.casc-act{margin-top:32px}
.casc-act > * + *{margin-top:8px}
.casc-facts{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;font-family:var(--mono);font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums;line-height:1.5}
.casc-facts li + li::before{content:"\00b7";margin-right:16px;color:var(--slate-3)}
.casc-facts b{color:var(--navy);font-weight:600}
.casc-trust{font-size:12.5px;color:var(--slate);line-height:1.5;max-width:54ch;margin:0}
@media(max-width:560px){.casc-act .btn{width:100%;justify-content:center;padding-left:16px;padding-right:16px}}
/* Foot: reference code moved out of the verdict band */
.r2-foot-ref{font-family:var(--mono);font-size:11px;color:var(--slate-3);letter-spacing:.03em;margin:0 0 14px}
.r2-foot .r-disclaimer{margin-bottom:10px}

/* momentum-tool */
.mo-head{margin:6px 0 4px}
.mo-streak-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.streak.mo-streak-zero{color:var(--slate-2);background:var(--bg-soft);border-color:var(--line)}
.streak.mo-streak-zero .sd i{background:var(--slate-3);opacity:.4}
.mo-grace{font-size:12px;color:var(--pro-deep)}
.mo-sec-t{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--navy);margin:30px 0 4px}
.mo-sec-t .mo-count{font-family:var(--mono);font-size:.82em;font-weight:600;color:var(--pro-deep);font-variant-numeric:tabular-nums}
.mo-sec-s{font-size:12.5px;color:var(--slate-2);line-height:1.5;margin:0 0 6px;max-width:64ch}
.mo-tasks{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-width:720px}
.mo-task{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;transition:border-color .18s,background .25s,box-shadow .18s}
.mo-task:hover{border-color:var(--pro);box-shadow:var(--shadow-sm)}
.mo-box{width:22px;height:22px;flex:0 0 auto;margin-top:1px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s,color .2s}
.mo-task.done{background:var(--pro-soft);border-color:var(--pro-line)}
.mo-task.done .mo-box{background:var(--pro);border-color:var(--pro);color:#fff}
.mo-task-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mo-task-t{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.35;transition:color .2s}
.mo-task-d{font-size:12.5px;color:var(--slate);line-height:1.5}
.mo-task.done .mo-task-t{color:var(--slate-2);text-decoration:line-through;text-decoration-color:var(--slate-3)}
.mo-task.done .mo-task-d{color:var(--slate-2)}
.mo-task-min{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--slate-3);font-variant-numeric:tabular-nums;padding-top:3px}
.mo-tl{margin-top:14px;max-width:640px}
.mo-tl .tl-item.mo-now::before{border-color:var(--pro);box-shadow:0 0 0 4px var(--pro-soft)}
.mo-tl .tl-item.mo-past::before{background:var(--pro-deep);border-color:var(--pro-deep)}
.mo-tl .tl-item.mo-now .tlw{color:var(--pro-deep)}
.mo-here{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pro-deep);background:var(--pro-soft);border:1px solid var(--pro-line);border-radius:999px;padding:2px 8px;vertical-align:middle}
.mo-journal{margin:30px 0 8px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);font-size:13px;color:var(--slate);max-width:720px}
.mo-journal-n{font-family:var(--mono);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.mo-journal-hint{display:block;margin-top:3px;font-size:11.5px;color:var(--slate-2)}


/* ================================================================
   LESEPLAN + LINIENLEISTE (Ergebnisseite)
   Der Leseplan liegt als helle Karte auf dem dunklen Band unter dem
   Verdikt und nennt die fünf Stationen der Seite. Dieselbe Liste läuft
   als Linienleiste mit: ab 1200px links neben dem Satzspiegel, darunter
   als schmaler Streifen am unteren Rand.
   ================================================================ */

/* --- Der Plan unter dem Verdikt ------------------------------------ */
.r2-leseplan{background:var(--navy)}
.r2-leseplan .r2-inner{padding-top:20px;padding-bottom:40px;padding-left:20px;padding-right:20px}
@media(max-width:640px){.r2-leseplan .r2-inner{padding-left:4px;padding-right:4px}}
.lp-card{background:#fff;border-radius:6px;padding:26px 28px;box-shadow:var(--shadow-md)}
@media(max-width:640px){.lp-card{padding:20px 18px}}
.lp-title{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);margin:0 0 8px;line-height:1.2}
.lp-lead{font-size:13.5px;color:var(--slate);line-height:1.6;margin:0 0 20px;max-width:56ch}
.lp-list{list-style:none;display:flex;flex-direction:column;gap:2px}

.lp-link{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;column-gap:14px;
  padding:12px 10px;margin:0 -10px;border-radius:5px;text-decoration:none;color:inherit;
  border-top:1px solid var(--line-2);transition:background .14s ease}
.lp-item:first-child .lp-link{border-top:0}
.lp-link:hover{background:var(--line-3)}
.lp-link.is-hier{background:var(--accent-soft)}

.lp-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--slate-3);font-variant-numeric:tabular-nums}
.lp-link.is-hier .lp-num{color:var(--accent)}
.lp-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.lp-lab{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.3}
.lp-desc{font-size:12.5px;color:var(--slate-2);line-height:1.45;max-width:52ch}
.lp-min{font-family:var(--mono);font-size:11px;color:var(--slate-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Die letzte Station verlangt als einzige etwas vom Leser. Deshalb ist sie
   die einzige gefüllte Zeile. */
.lp-akt .lp-link{background:var(--navy);border-top:0;margin-top:8px}
.lp-akt .lp-link:hover{background:var(--navy-2)}
.lp-akt .lp-lab{color:#fff}
.lp-akt .lp-desc{color:#b6c4d4}
.lp-akt .lp-num,.lp-akt .lp-min{color:#8fa3ba}
.lp-akt .lp-link.is-hier{background:var(--navy-2)}

/* Der Seitenkopf klebt oben. Ohne diesen Abstand landet ein Sprungziel
   unter ihm und die Ueberschrift des Abschnitts ist verdeckt. */
.r2-band[id]{scroll-margin-top:86px}

/* --- Die Linienleiste ------------------------------------------------
   Dauerhaft am linken Rand, nach dem Vorbild von reactbits.dev/components/
   line-sidebar: Im Ruhezustand nur Nummer und kurzer Marker. Kommt der
   Zeiger näher, wächst der Marker auf die volle Länge, der Eintrag rückt
   nach rechts und der Name blendet ein.

   Es gibt keine Fassung für schmale Bildschirme. Der Inhaltsblock ist
   1068px breit; darunter liegt links kein Platz, ohne auf ihm zu liegen.
   Unter 1320px trägt der Leseplan oben die Orientierung allein. */
.lp-rail{position:fixed;z-index:55;display:none;--tick:.42;
  left:20px;top:50%;transform:translateY(-50%);width:58px}
.lp-rail[hidden]{display:none}

@media (min-width:1320px){
  .lp-rail:not([hidden]){display:block}
}

.lp-rail-list{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lp-rail-item{display:block}

.lp-rail-link{--p:0;position:relative;display:flex;align-items:center;gap:0;padding:4px 0;
  text-decoration:none;color:#7f92a8;white-space:nowrap;
  transform:translateX(calc(var(--p) * 10px));
  transition:transform .12s linear,color .12s linear}

.lp-rail-num{font-family:var(--mono);font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;flex:0 0 18px;opacity:.75}

/* Ruhelänge ist der kurze Strich, bei Näherung wächst er auf die volle
   Markerlänge. Beide Werte kommen aus derselben Variablen. */
.lp-rail-mark{display:block;flex:0 0 auto;height:1.5px;border-radius:1px;
  background:currentColor;opacity:.6;
  width:calc((var(--tick) + (1 - var(--tick)) * var(--p)) * 40px);
  transition:width .12s linear,opacity .12s linear,background-color .12s linear}

/* Der Name gehört zur Näherung: im Ruhezustand ist er weg, damit die Leiste
   den Inhaltsblock nie berührt. */
.lp-rail-lab{position:absolute;left:100%;top:50%;padding-left:12px;
  max-width:104px;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;line-height:1.3;
  opacity:var(--p);transform:translateY(-50%) translateX(calc((1 - var(--p)) * -6px));
  transition:opacity .12s linear,transform .12s linear}

.lp-rail-link.is-hier{color:#fff}
.lp-rail-link.is-hier .lp-rail-num{opacity:1}
.lp-rail-link.is-hier .lp-rail-mark{background:#9dbde0;opacity:1}
.lp-rail-link:focus-visible .lp-rail-lab{opacity:1;transform:translateY(-50%)}

/* Ab dieser Breite ist links genug Platz, um den Namen der aktuellen
   Station dauerhaft zu zeigen, ohne den Inhaltsblock zu berühren. */
@media (min-width:1620px){
  .lp-rail-link.is-hier .lp-rail-lab{opacity:1;transform:translateY(-50%);font-weight:600}
}

.lp-rail-rest{font-family:var(--mono);font-size:10.5px;color:#7f92a8;
  font-variant-numeric:tabular-nums;margin-top:14px;padding-left:18px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .lp-rail-link,.lp-rail-mark,.lp-rail-lab{transition:none}
  .lp-rail-link{transform:none}
}

/* ================================================================
   SCHRITTZÄHLER DER KETTE (Werkzeugseiten und Check-Start)
   Nimmt die Sprache der Linienleiste auf: Ziffer in der Überschriften-
   schrift (wie im Check, --v7-display), kurzer Strich, Name in der
   Textschrift. Der aktuelle Schritt trägt den vollen Strich in Akzentfarbe,
   die geplanten den kurzen und das Wort „geplant" — Farbe allein trägt
   den Stand nicht. Keine Links: für die geplanten Schritte gibt es keine
   Seite, und der aktuelle ist diese. Unter 560px als Spalte, die native
   Form der Leiste.
   ================================================================ */
.kette-head{margin:0 0 6px}
.kette{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 24px;padding:0}
.kette-schritt{display:flex;align-items:center;gap:8px;color:var(--slate);font-size:13px;line-height:1.3}
.kette-num{font-family:var(--v7-display);font-size:15px;font-weight:var(--v7-display-wght);line-height:1;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;flex:0 0 auto}
.kette-mark{flex:0 0 auto;width:16px;height:1.5px;border-radius:1px;background:currentColor;opacity:.6}
.kette-lab{white-space:nowrap}
.kette-stand{font-family:var(--v7-text);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.kette-schritt.is-hier{color:var(--navy)}
.kette-schritt.is-hier .kette-num{color:var(--accent-deep)}
.kette-schritt.is-hier .kette-lab{font-weight:600}
.kette-schritt.is-hier .kette-mark{width:40px;background:var(--accent);opacity:1}
@media(max-width:560px){.kette{flex-direction:column;gap:6px}}
/* Seitenende: der nächste Schritt, beim Namen genannt, ohne Link. */
.kette-next{max-width:940px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.kette-next .kette-next-t{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;margin:4px 0;line-height:1.2;max-width:none}
.kette-next .kette-next-d{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0;max-width:54ch}

/* ================================================================
   Der Weg nach dem Check (Startseite, #weg). Wiederverwendet .timeline /
   .tl-item aus dem Ergebnis; die Karte trägt das Vokabular der übrigen
   Landing-Karten (Haarlinie --line, Radius 10, shadow-sm). Abstände:
   24 Karteninnenraum, 20 zwischen den Gliedern (Bauteil), 24 trennt die
   Momentum-Zeile von der Karte. .is-plan dämpft geplante Glieder: Knoten
   hohl in --line, Text in --slate.
   ================================================================ */
.weg{max-width:760px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--bg);box-shadow:var(--shadow-sm)}
.weg .tlh{font-size:1.08rem;font-weight:600;margin-bottom:4px}
.weg .tld{font-size:14.5px;line-height:1.6;max-width:52ch}
.weg .tld+.tld{margin-top:4px}
.tl-item.is-plan::before{border-color:var(--line)}
.tl-item.is-plan .tlw,.tl-item.is-plan .tlh{color:var(--slate)}
.weg-neben{max-width:60ch;margin-top:24px;font-size:13.5px;color:var(--slate);line-height:1.6}
@media(max-width:640px){.weg{padding:16px}}
/* Fundierung als Einzeiler unter der Sektionsüberschrift von #methode. */
.sec-fund{margin-top:24px;font-size:13.5px;color:var(--slate);line-height:1.6;max-width:52ch}
.sec-fund a{color:var(--accent-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft-2)}
/* #methode ohne Nummerierung: die senkrechte Linie entfällt mit den Kreisen. */
.flow.flow-plain::before{display:none}
/* Verdichtungs-Diagramm (.conv) auf /methodik/: die .subpage-Regeln für h3
   und p greifen sonst in die Karte hinein. */
.subpage .conv{max-width:820px;margin:0 0 24px}
.subpage .conv-row h3{font-size:1.02rem;margin:0 0 2px}
.subpage .conv-row p{font-size:13px;color:var(--slate);margin:0;max-width:none}
.subpage .conv-node h3{font-size:1.22rem;margin:0}
.subpage .conv-node p{font-size:12.5px;color:var(--slate);margin:0;max-width:none}

/* Marktdiagramm (Schritt 1 und die Vorschau am Ergebnisende). Die SVG
   kommt aus charts.js im Maßstab 1:1 — width und height stehen dort in px,
   deshalb hier keine Skalierung. display:block nimmt die Grundlinienlücke,
   die ein Inline-SVG sonst darunter erzeugt. */
.vd-chart{margin-top:4px}
.vd-chart svg{display:block;max-width:100%}
.vd-chart text{font-variant-numeric:tabular-nums}
/* Die eigene Marke tritt einmal ein, sonst bewegt sich nichts. */
@media(prefers-reduced-motion:no-preference){
  .vd-chart .mb-you{transform-origin:center bottom;animation:mbIn .5s cubic-bezier(.22,1,.36,1)}
}
@keyframes mbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   ERGEBNISSEITE v7
   Sieben Abschnitte: Antwort · Plan · Wege · Gehalt · Markt ·
   Herleitung · Behalten. Alles unter dem Präfix `v7-`, damit
   nichts mit den Klassen der übrigen Seiten kollidiert.
   Die Ergebnisseite wird in `.panel-body` gerendert; ihre Bänder
   laufen über die volle Breite des Panels.
   ============================================================ */

/* ---------- Schriften ----------
   Die ersten Webfonts der Site. Selbst gehostet, kein CDN, kein externer
   Host — der Grund steht in DESIGN.md („zero network cost, no layout
   shift"). `swap` und eine echte Fallback-Kette sorgen dafür, dass der
   Text vom ersten Frame an lesbar ist; die Fallbacks sind dieselben
   Stacks, die die übrige Site benutzt. Geladen wird beides nur dort, wo
   eine Ergebnisseite steht: außerhalb von `.v7` verwendet keine Regel
   diese Familien. */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/assets/fonts/newsreader-var.woff2") format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/assets/fonts/schibsted-grotesk-var.woff2") format("woff2");
}

:root{
  /* Schrift der Ergebnisseite: Newsreader trägt die Aussagen, Schibsted
     Grotesk den Fließtext. Fallback ist jeweils die Kette der übrigen Site. */
  --v7-display:"Newsreader",var(--serif);
  --v7-text:"Schibsted Grotesk",var(--sans);
  --v7-display-wght:560;
  --v7-display-track:-.018em;
  --v7-text-track:-.004em;
  /* Farben auf Navy */
  --on-navy:#ffffff;--on-navy-2:rgba(255,255,255,.80);--on-navy-3:rgba(255,255,255,.62);
  --navy-hair:rgba(255,255,255,.14);--navy-hair-2:rgba(255,255,255,.26);--amber-on-navy:#e6bd6a;
  /* Ordinalstufen Bleiben → Gehen */
  --v7-ord-1:#dbe7f3;--v7-ord-2:#b3cbe6;--v7-ord-3:#86a9d3;--v7-ord-4:#4f82be;--v7-ord-5:#1d5aa0;
  --line-strong:#cfd8e0;--green-line:#c5d8c5;--amber-ink:#7a5816;
  --v7-glass:rgba(255,255,255,.62);
  --r-card:10px;--ease:cubic-bezier(.22,1,.36,1);
  /* Breite der Ergebnisseite (Übergabe F1): ab 1240 px 1320 px für Leiste
     und Inhalt, die Linienleiste nimmt davon 220 px. */
  --v7-maxw:1140px;--v7-rail:220px;
}
@media(min-width:1240px){:root{--v7-maxw:1320px}}
/* Kopfzeile: Markup und Gestaltung wie überall, nur die Breite folgt auf der
   Ergebnisseite ab 1240 px dem Inhalt, damit das Logo an dessen Kante steht.
   Die Klasse setzt app.js, solange das Ergebnis zu sehen ist. */
@media(min-width:1240px){html.v7-seite header .wrap{max-width:var(--v7-maxw)}}

/* Signalfarben der Ergebnisseite v14, frischer als site-weit und nur hier
   (Übergabe F3). Grün Machen / gut für Sie, Gelb Optional / Vorsicht,
   Rot Lassen / schlecht für Sie. -vivid für Flächen und Symbole, die
   Grundtöne für Schrift.
   Die Preisseite übernimmt dieselben Werte über .pr-signal (#tarife, #vergleich):
   Pro-Signatur wie die Kontoübersicht (.pf in profil.css). Die Grüntöne kommen
   aus --pro-sig* in :root, damit das Pro-Grün an einer Stelle steht. */
.pr-signal,
.v7{
  --green:var(--pro-sig);--green-vivid:var(--pro-sig-vivid);--green-soft:var(--pro-sig-soft);--green-line:var(--pro-sig-line);
  --amber:#f2c45a;--amber-ink:#8a5700;--amber-soft:#fdf6e4;--amber-line:#efdcaa;
  --red:#c8323a;--red-vivid:#e5484d;--red-soft:#fdecec;
}

/* Das Ergebnis steht über die ganze Breite: Band, Rahmen und Panel des
   Checks treten zurück, die Abschnitte tragen ihre Flächen selbst.
   overflow:clip, weil hidden einen Scroll-Container öffnet und Pillen wie
   Linienleiste dann nicht kleben (vorher klebten die Pillen deshalb nicht). */
.check-results.assessment{padding:0;background:var(--bg);overflow:clip}
.check-results.assessment::before{display:none}
.check-results.assessment>.wrap{max-width:none;padding:0}
.panel.panel-results{border:0;border-radius:0;box-shadow:none;background:none}

/* Die Abschnittsleiste klebt unter dem Seitenkopf. Dafür darf das Panel
   keinen Scroll-Container aufmachen: `clip` schneidet wie `hidden`,
   erzeugt aber keinen — nur so funktioniert `position:sticky` darin. */
.panel-results{overflow:clip}

.v7{font-family:var(--v7-text);letter-spacing:var(--v7-text-track);color:var(--ink);text-align:left}
.v7 :where(h2,h3,h4,h5){font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);color:var(--navy);line-height:1.15;text-wrap:balance}
.v7 :where(button,input){font:inherit;color:inherit;letter-spacing:inherit}
.v7 :where(p){margin:0}
.v7 :where(ul,ol){margin:0;padding:0}
.v7-wrap{max-width:var(--v7-maxw);margin-inline:auto;padding-inline:36px}
@media(max-width:640px){.v7-wrap{padding-inline:20px}}
.v7-tnum{font-variant-numeric:tabular-nums lining-nums}
.v7-label{font-size:14px;font-weight:600;color:var(--graphite);line-height:1.4}
.v7-note{font-size:13px;color:var(--slate);line-height:1.5}
.v7-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;line-height:1.4;border-radius:20px;padding:4px 8px;white-space:nowrap}
.v7-chip-accent{background:var(--accent-soft);color:var(--accent-deep)}
.v7-chip-neutral{background:var(--bg-soft-2);color:var(--slate)}
.v7-go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;min-height:40px;margin-top:auto}
.v7-go .arrow{transition:transform .2s var(--ease)}
.v7-go:hover .arrow{transform:translateY(2px)}
.v7 .btn-accent{color:var(--on-navy)}
.v7-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
@media(max-width:640px){.v7-card{padding:16px}}

/* ---------- Abschnittsnavigation ---------- */
.v7-snav{position:sticky;top:70px;z-index:35;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.v7-snav-scroll{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:-6px;padding-inline:6px}
.v7-snav-scroll::-webkit-scrollbar{display:none}
.v7-snav-rel{position:relative;width:max-content}
@media(max-width:640px){.v7-snav-scroll{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}}
.v7-snav-list{list-style:none;display:flex;gap:4px;padding-block:8px}
.v7-snav-list li{flex:none;scroll-snap-align:start}
.v7-snav-list a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:500;color:var(--slate);text-decoration:none;transition:color .25s}
.v7-snav-list a[aria-current="true"]{color:var(--on-navy)}
.v7-snav-ind{position:absolute;z-index:0;top:8px;height:36px;border-radius:20px;background:var(--navy);width:0;left:0;transform-origin:left center}
/* Sprungziele landen knapp unter der Kopfleiste, die die Agenda misst
   (Pillen: Unterkante + 12 px), damit der angesprungene Eintrag aktiv wird.
   Ab 1240 px gibt es keine Pillen; die Kante ist der Seitenkopf. */
.v7 section[id]{scroll-margin-top:128px}
.v7 [id^="v7h"]{scroll-margin-top:128px}
@media(max-width:640px){
  .v7-snav-list a{min-height:44px}.v7-snav-ind{height:44px}
  .v7 section[id],.v7 [id^="v7h"]{scroll-margin-top:136px}
  .v7-wi-tabs button,.v7 .v7-wi-tabs button{min-height:44px}
}
@media(min-width:1240px){.v7 section[id],.v7 [id^="v7h"]{scroll-margin-top:80px}}

/* ---------- 1 · Antwort ---------- */
.v7-hero{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden;padding-block:48px 40px}
.v7-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--navy-hair) 1px,transparent 1px),linear-gradient(90deg,var(--navy-hair) 1px,transparent 1px);background-size:48px 48px;opacity:.3;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 90% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 90% 0%,#000,transparent 70%)}
.v7-hero .v7-wrap{position:relative}
.v7-hero-q{font-size:15px;color:var(--on-navy-3)}
.v7-hero-q b{color:var(--on-navy-2);font-weight:500}
.v7-hero-a{color:var(--on-navy);font-size:clamp(2.05rem,1.35rem + 3.1vw,3.5rem);line-height:1.07;margin-top:8px;max-width:19ch}
.v7-hero-a .w{display:inline-block}
.v7-hero-type{margin-top:16px;font-size:15.5px;color:var(--on-navy-2);display:flex;flex-wrap:wrap;gap:4px 16px}
.v7-hero-type b{color:var(--on-navy);font-weight:600}

.v7-spec{margin-top:24px;max-width:720px}
.v7-spec-ends{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--on-navy-3);margin-bottom:8px}
.v7-spec-rel{position:relative}
.v7-spec-track{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.v7-spec-seg{display:flex;flex-direction:column;gap:8px;min-width:0}
.v7-spec-bar{position:relative;overflow:hidden;height:6px;border-radius:3px;background:var(--navy-hair)}
.v7-spec-fill{position:absolute;inset:0;transform-origin:left center}
.v7-spec-seg.is-past .v7-spec-fill{background:var(--navy-hair-2)}
.v7-spec-seg.is-on .v7-spec-fill{background:var(--accent-light)}
.v7-spec-lab{font-size:12.5px;line-height:1.3;color:var(--on-navy-3);padding-right:4px}
.v7-spec-seg.is-on .v7-spec-lab{color:var(--on-navy);font-weight:600}
.v7-spec-lab .s{display:none}
.v7-spec-marker{position:absolute;top:3px;left:0;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--on-navy);box-shadow:0 0 0 4px rgba(61,124,196,.4)}
@media(max-width:560px){.v7-spec-lab .l{display:none}.v7-spec-lab .s{display:inline}}

/* Resonanz-Frage (JAN-80): eine ruhige Zeile zwischen Skala und Karten.
   24 bindet sie ans Verdikt wie die Skala; die Karten folgen mit ihren 32.
   Knöpfe als Umriss auf Navy: Rand --on-navy-3 (7,2:1), Text --on-navy,
   keine Füllung, 44px Klickfläche. Der Fokusring ist weiß: der globale
   Akzentring läge auf Navy bei 2,5:1. Nach der Antwort steht der Dank an
   derselben Stelle; min-height hält die Zeile, nichts darunter springt. */
.v7-res{margin-top:16px;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.v7-res + .v7-hero-type{margin-top:24px}
.v7-res-done:focus{outline:none}
.v7-res-q,.v7-res-done{font-size:15px;color:var(--on-navy-2)}
.v7-res-btns{display:flex;flex-wrap:wrap;gap:8px}
.v7-res-btn{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:inherit;color:var(--on-navy);background:transparent;border:1px solid var(--on-navy-3);border-radius:var(--radius);padding:0 16px;min-height:44px;cursor:pointer;transition:border-color .15s,background .15s}
.v7-res-btn:hover{border-color:var(--on-navy-2);background:var(--navy-hair)}
.v7-res-btn:focus-visible{outline-color:var(--on-navy)}

/* Letzter Check: eine Zeile unter der Einordnung, nur nach einem früheren Ergebnis. */
.v7-hero-prev{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14.5px;color:var(--on-navy-2);max-width:64ch}
.v7-hero-prev svg{flex:none;margin-top:3px;color:var(--on-navy-3)}
.v7-hero-prev b{color:var(--on-navy);font-weight:600}

/* Kopf unten (v14): Kurzfassung links, „Warum diese Antwort“ rechts, 7 : 5
   mit senkrechter Haarlinie. Darunter die ersten Schritte über die volle
   Breite, ab 861 px als Reihe nummerierter Kreise mit Verbindungslinie,
   schmal als Liste. Keine Karten, keine Kästchen. */
.v7-hx{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:36px;border-top:1px solid var(--navy-hair)}
.v7-hx-k{font-family:var(--v7-text);font-size:14px;font-weight:600;letter-spacing:0;color:var(--sky)}
.v7-hx-sum{padding:28px 40px 28px 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.v7-hx-sum p{font-size:17px;line-height:1.62;color:var(--on-navy-2);max-width:62ch}
.v7-hx-sum b{color:var(--on-navy);font-weight:600}
.v7-hx-sum .nw{white-space:nowrap}
.v7-hx-lead{color:var(--on-navy);font-weight:500}
.v7-hx-why{padding:28px 0 28px 40px;border-left:1px solid var(--navy-hair);display:flex;flex-direction:column;gap:14px;min-width:0}
.v7-hx-rs{list-style:none;display:grid;gap:14px}
.v7-hx-r{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:center}
.v7-hx-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--navy-hair-2);color:var(--sky)}
.v7-hx-r.is-top .v7-hx-ic{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.v7-hx-rt{font-size:16px;line-height:1.4;color:var(--on-navy)}
.v7-hx-rt small{display:block;font-size:12.5px;font-weight:600;color:var(--sky);margin-bottom:1px}
.v7-hx-go{align-self:flex-start;margin-top:auto;color:var(--on-navy);text-decoration:underline;text-underline-offset:3px}
.v7-hx-go .arrow{color:var(--sky)}
.v7-hx-go:focus-visible{outline-color:var(--on-navy)}
.v7-hx-first{grid-column:1/-1;padding:28px 0 4px;border-top:1px solid var(--navy-hair);display:flex;flex-direction:column;gap:10px;min-width:0}
.v7-hx-fk{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.v7-hx-win{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--navy);background:var(--sky);border-radius:20px;padding:3px 11px 3px 9px;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.v7-hx-todo{list-style:none;display:grid;gap:0}
.v7-hx-todo li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--navy-hair)}
.v7-hx-todo li:first-child{border-top:0}
.v7-hx-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;line-height:1;color:var(--sky);border:1px solid var(--navy-hair-2);text-align:center}
.v7-hx-tt{font-size:16px;line-height:1.35;color:var(--on-navy)}
@media(min-width:861px){
  .v7-hx-first .v7-hx-fk{justify-content:flex-start;gap:14px}
  .v7-hx-todo{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 24px;margin:6px 0}
  .v7-hx-todo li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0;border-top:0}
  .v7-hx-todo li::after{content:"";position:absolute;left:36px;right:-14px;top:13px;height:1px;background:var(--navy-hair-2)}
  .v7-hx-todo li:last-child::after{display:none}
  .v7-hx-tt{font-size:15.5px;line-height:1.42;max-width:24ch}
}
@media(max-width:860px){
  .v7-hx{grid-template-columns:minmax(0,1fr)}
  .v7-hx-sum{padding:24px 0 20px}
  .v7-hx-why{padding:24px 0;border-left:0;border-top:1px solid var(--navy-hair)}
  .v7-hx-first{padding-top:24px}
}

/* ---------- Agenda ab 1240 px: Linienleiste links ----------
   Unter 1240 px stehen die Pillen oben (.v7-snav). Ab 1240 px weichen sie
   der Leiste: sie klebt unter dem Seitenkopf (70 px), hat keine Höhe und
   schiebt nichts; der Inhalt rückt um ihre Breite nach rechts. Die Striche
   wachsen in der Nähe des Zeigers über den Wert --e (app.js). */
.v7-body{position:relative}
.v7-rail-host{display:none}
@media(min-width:1240px){
  .v7-snav{display:none}
  .v7-rail-host{display:block;position:sticky;top:70px;height:0;z-index:30}
  .v7-body .v7-wrap{padding-left:calc(36px + var(--v7-rail))}
  .v7-body .v7-rail-host .v7-wrap{padding-left:36px}
}
.v7-ls{position:absolute;top:96px;width:calc(var(--v7-rail) - 28px);--ls-len:26px;--ls-gap:16px;--ls-shift:10px}
.v7-ls-list{list-style:none;display:flex;flex-direction:column;gap:var(--ls-gap);padding-left:calc(var(--ls-len) + 12px)}
.v7-ls-item{position:relative}
.v7-ls-item a{position:relative;display:inline-flex;align-items:baseline;gap:9px;font-size:14.5px;line-height:1.25;text-decoration:none;
  color:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--slate));
  transform:translateX(calc(var(--e,0) * var(--ls-shift)))}
.v7-ls-item a::before{content:"";position:absolute;inset:-7px -24px -7px -52px}
.v7-ls-item.is-on a{font-weight:600}
.v7-ls-item.is-done a{color:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--graphite))}
.v7-ls-idx{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;opacity:calc(.55 + var(--e,0) * .45)}
.v7-ls-mark{position:absolute;top:50%;left:calc(-1 * var(--ls-len) - 12px);height:1.5px;width:var(--ls-len);border-radius:1px;
  background:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--line-strong));
  transform-origin:left center;transform:translateY(-50%) scaleX(calc(.7 + var(--e,0) * .5))}
.v7-ls-item.is-done .v7-ls-mark{background:color-mix(in srgb,var(--accent) calc(45% + var(--e,0) * 55%),var(--line-strong))}
.v7-ls-item:not(:last-child)::after{content:"";position:absolute;top:calc(100% + var(--ls-gap) / 2);left:calc(-1 * var(--ls-len) - 12px);height:1px;width:calc(var(--ls-len) * .5);background:var(--line-strong);opacity:.7}
.v7-ls-status{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin-top:22px;padding-left:2px}
.v7-ls-bar{display:block;width:3px;height:30px;border-radius:2px;background:var(--line-2);overflow:hidden}
.v7-ls-bar span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:center top;transform:scaleY(0)}
.v7-ls-status p{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- Abschnitte ---------- */
.v7-sec{padding-block:72px;border-top:1px solid var(--line)}
.v7-sec-soft{background:var(--bg-soft)}
.v7-sechead{display:grid;gap:8px;margin-bottom:32px;max-width:68ch}
.v7-sechead h3{font-size:clamp(1.65rem,1.25rem + 1.5vw,2.2rem)}
.v7-sechead p{color:var(--slate);font-size:17px;line-height:1.55}
.v7-sechead p b{color:var(--graphite);font-weight:600}
@media(max-width:640px){.v7-sec{padding-block:48px}.v7-sechead{margin-bottom:24px}.v7-sechead p{font-size:16px}}

/* ---------- 2 · Plan als Fahrplan ---------- */
.v7-plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:32px}
.v7-plan-head .v7-sechead{margin-bottom:0}
.v7-road{position:relative;--g:24px}
.v7-road-track{position:absolute;left:8px;right:0;top:8px;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.v7-road-fill{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
.v7-road-phases{list-style:none;display:grid;grid-template-columns:repeat(var(--ph),minmax(0,1fr));gap:var(--g);position:relative}
.v7-ph{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.v7-ph-head{position:relative;padding-top:32px;display:grid;gap:4px}
.v7-ph-node{position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--bg);border:2.5px solid var(--accent-soft-2);transition:background .3s,border-color .3s}
.v7-ph-node.is-on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.v7-ph-now{position:absolute;left:28px;top:-4px;font-size:12.5px;font-weight:600;color:var(--on-navy);background:var(--navy);border-radius:20px;padding:4px 8px;line-height:1.3}
.v7-ph-when{display:flex;align-items:baseline;gap:8px;color:var(--navy)}
.v7-ph-num{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:clamp(2rem,1.6rem + 1.2vw,2.6rem);line-height:1.05;font-variant-numeric:lining-nums}
.v7-ph-num.v7-ph-wort{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.v7-ph-unit{font-size:16px;font-weight:600;color:var(--slate)}
.v7-ph-title{font-family:var(--v7-text);letter-spacing:0;font-size:15.5px;font-weight:600;color:var(--graphite);line-height:1.4}
.v7-ph-steps{list-style:none;display:grid;gap:16px}
.v7-stp{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:16px}
.v7-stp-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font-family:var(--v7-display);font-weight:600;font-size:15px;line-height:1;margin-top:1px}
.v7-stp-body{display:grid;gap:4px;min-width:0}
.v7-stp h5{font-size:18px;line-height:1.3}
.v7-stp p{font-size:15px;color:var(--slate);line-height:1.55}
.v7-stp .v7-chip{justify-self:start;margin-top:4px}
/* Stolperstein i an Phase i (Übergabe 4, WATCH). */
.v7-ph-warn{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;padding:0 4px;font-size:14.5px;line-height:1.45;color:var(--graphite)}
.v7-ph-warn svg{color:var(--amber-ink);margin-top:1px}
.v7-ph-warn small{display:block;font-size:12.5px;font-weight:600;color:var(--amber-ink)}
@media(max-width:900px){
  .v7-road-track{left:8px;right:auto;top:8px;bottom:0;width:3px;height:auto}
  .v7-road-fill{transform-origin:center top;transform:scaleY(0)}
  .v7-road-phases{grid-template-columns:minmax(0,1fr);gap:32px}
  .v7-ph{padding-left:40px}
  .v7-ph-head{padding-top:0}
  .v7-ph-node{top:8px;left:-40px}
  .v7-ph-now{position:static;justify-self:start;margin-bottom:8px;order:-1}
  .v7-ph[data-ph="0"] .v7-ph-node{top:40px}
}

/* ---------- 3 · Wege ---------- */
/* Gruppen nach Urteil (Entwurf v14.css, zuletzt gültige Regeln aus v11 und
   v12), je Kanal eine Zeile. Symbole im Kopf: Weiß auf --green-vivid 3,0 : 1,
   Navy auf --amber 10,6 : 1, Weiß auf --red-vivid 3,9 : 1 (Nicht-Text 3 : 1).
   Abstände auf 8er-Raster. */
.v7-kg{background:var(--bg);border:1px solid var(--line);border-top-width:3px;border-radius:var(--r-card);overflow:hidden}
.v7-kg+.v7-kg{margin-top:16px}
.v7-kg-h{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line)}
.v7-kg-h h4{font-size:22px;line-height:1.1}
.v7-kg-n{margin-left:auto;font-size:13.5px;color:var(--slate)}
.v7-kg-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--on-navy)}
.v7-kg-rec{border-color:var(--green-line);border-top-color:var(--green-vivid)}
.v7-kg-rec .v7-kg-h{background:var(--green-soft);border-color:var(--green-line)}
.v7-kg-rec .v7-kg-h h4,.v7-kg-rec .v7-kg-n{color:var(--green)}
.v7-kg-rec .v7-kg-ic{background:var(--green-vivid)}
.v7-kg-ok{border-color:var(--amber-line);border-top-color:var(--amber)}
.v7-kg-ok .v7-kg-h{background:var(--amber-soft);border-color:var(--amber-line)}
.v7-kg-ok .v7-kg-h h4,.v7-kg-ok .v7-kg-n{color:var(--amber-ink)}
.v7-kg-ok .v7-kg-ic{background:var(--amber);color:var(--navy)}
.v7-kg-no{background:var(--bg-soft);border-style:dashed;border-color:var(--line-strong);border-top-width:1px}
.v7-kg-no .v7-kg-h{border-bottom:0;padding-bottom:8px}
.v7-kg-no .v7-kg-h h4{color:var(--red)}
.v7-kg-no .v7-kg-ic{background:var(--red-vivid)}
.v7-kl{list-style:none}
.v7-kr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.35fr);gap:24px;padding:24px;align-items:start}
.v7-kr+.v7-kr{border-top:1px solid var(--line-2)}
.v7-kr-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.v7-kr-ic{width:44px;height:44px;border-radius:50%;background:var(--bg-soft-2);color:var(--navy);display:grid;place-items:center;flex:none}
.v7-kr-main h5{font-size:20px;line-height:1.2}
.v7-kr-tag{display:inline-block;margin-left:8px;vertical-align:3px;font-family:var(--v7-text);font-size:12px;font-weight:600;letter-spacing:0;color:var(--amber-ink);background:var(--amber-soft);border-radius:20px;padding:0 8px}
.v7-kr-main p{font-size:14px;color:var(--slate);margin-top:4px}
.v7-kr-k{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:8px}
.v7-kr-do p{font-size:15px;line-height:1.45;color:var(--graphite)}
.v7-kr-do b{color:var(--navy);font-weight:600}
.v7-kr-do small{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--slate);margin-top:4px}
.v7-kr-links ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.v7-kr-links a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;overflow-wrap:anywhere}
.v7-kr-links a:hover{text-decoration:underline;text-underline-offset:3px}
.v7-kr-links a svg{color:var(--accent);flex:none}
.v7-kr-nw{white-space:nowrap}
.v7-kr-nw svg{margin-left:8px;vertical-align:-1px}
.v7-kn{list-style:none;padding:4px 24px 16px;display:grid;gap:8px}
.v7-kn li{display:grid;grid-template-columns:32px auto minmax(0,1fr);gap:12px;align-items:center;font-size:14.5px;color:var(--slate)}
.v7-kn .v7-kr-ic{width:32px;height:32px;color:var(--slate)}
.v7-kn b{color:var(--graphite);font-weight:600}
@media(max-width:1100px){.v7-kr{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.v7-kr-main{grid-column:1/-1}}
@media(max-width:640px){
  .v7-kr{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
  .v7-kg-h{padding:12px 16px}.v7-kg-h h4{font-size:20px}
  .v7-kn{padding:4px 16px 16px}.v7-kn li{grid-template-columns:32px minmax(0,1fr);row-gap:0}.v7-kn li span:last-child{grid-column:2}
  .v7-kr-links a{min-height:44px}
}
.v7-alts-h{font-size:20px;margin:40px 0 16px}
.v7-wege-note{margin:-8px 0 16px;font-size:15px}
/* Weitere Wege: Symbol und Text, so viele Spalten wie Einträge. */
.v7-alts2{list-style:none;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px}
.v7-alts2 li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.v7-alt-ic{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center}
.v7-alts2 h5{font-size:17px;line-height:1.3}
.v7-alts2 p{font-size:14.5px;color:var(--slate);line-height:1.5;margin-top:4px}
@media(max-width:980px){.v7-alts2{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4 · Gehalt ---------- */
.v7-pay{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}
.v7-band-card{display:flex;flex-direction:column;gap:16px}
.v7-band{padding-top:32px}
.v7-band-track{position:relative;height:28px;border-radius:6px;background:var(--line-2)}
.v7-band-track::before,.v7-band-track::after{content:"";position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--slate-3)}
.v7-band-track::before{left:0}.v7-band-track::after{right:0}
.v7-band-iqr{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--accent-soft-2);transform-origin:center center}
.v7-band-med{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--navy);border-radius:2px;transform-origin:center center}
.v7-band-you{position:absolute;top:-32px;bottom:-4px;width:0}
.v7-band-you::before{content:"";position:absolute;left:-1px;top:24px;bottom:0;width:2px;background:var(--accent)}
.v7-band-you span{position:absolute;left:0;top:0;transform:translateX(-50%);background:var(--accent);color:var(--on-navy);font-size:12.5px;font-weight:600;border-radius:20px;padding:2px 8px;white-space:nowrap}
.v7-band-you[hidden]{display:block!important;opacity:0}
/* Skala: die Medianspalte nimmt ihre Breite vom Inhalt, die Ränder teilen den
   Rest zu gleichen Teilen — so bleibt der Median unter der 50%-Marke, und der
   größte Betrag des Modells (HUF, acht Stellen, 98,7px bei 19px) frisst bei
   390px nicht die 8px zu den Nachbarn (Zelle 86px). Gemessen 05.10.2026. */
.v7-band-scale{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);margin-top:16px;gap:8px}
.v7-band-scale div{display:grid;gap:1px}
.v7-band-scale div:nth-child(2){text-align:center}
.v7-band-scale div:nth-child(3){text-align:right}
.v7-band-scale b{font-size:17px;font-weight:600;color:var(--navy)}
.v7-band-scale span{font-size:12.5px;color:var(--slate)}
.v7-band-scale .is-med b{font-family:var(--v7-display);font-size:22px}
.v7-pay-card{display:flex;flex-direction:column;gap:16px}
.v7-pay-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.v7-pay-res div{background:var(--bg-soft);border-radius:8px;padding:16px}
.v7-pay-res dt{font-size:13px;color:var(--slate)}
.v7-pay-res dd{font-family:var(--v7-display);font-size:24px;font-weight:var(--v7-display-wght);color:var(--navy);line-height:1.2;margin:4px 0 0}
.v7-pay-res dd small{display:block;font-family:var(--v7-text);font-size:13px;font-weight:500;color:var(--slate)}
.v7-pay-sentence{font-size:15px;color:var(--graphite);line-height:1.5}
/* Karte „Ihre Position im Band“ (Pro): drei Zustände wie in ergPayKarte.
   Pro-Chip im Pro-Grün wie auf der Kontoübersicht (Jan, 16.10.2026). */
.v7-chip-pro{background:var(--pro-sig);color:var(--on-navy);font-weight:700}
.v7-chip-pro svg{margin-left:-2px}
.v7-chip-dash{border:1px dashed var(--slate-3);color:var(--slate);font-weight:500}
.v7-pay-k{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.v7-pay-k h4{font-family:var(--v7-text);font-size:16px;font-weight:600;letter-spacing:0;color:var(--graphite)}
.v7-pay-src{font-size:13.5px;line-height:1.5;color:var(--slate)}
.v7-pay-src .v7-fein-link{font-size:13.5px;padding:0}
.v7-pay-res.is-blur dd{filter:blur(7px);user-select:none}
.v7-pay-lock{font-size:15px;line-height:1.5;color:var(--graphite)}
.v7-pay-cta{display:grid;gap:8px;justify-items:start}
.v7-pay-cta .v7-note a{color:var(--accent)}
/* Knopf als <button>: .v7 setzt font:inherit, hier wieder die Schrift von .btn. */
.v7-pay-cta button.btn{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em}
.v7-pay-card.is-locked,.v7-pay-card.is-fehlt{background:linear-gradient(180deg,var(--bg),var(--bg-soft))}
@media(max-width:900px){.v7-pay{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.v7-band-scale b{font-size:15px}.v7-band-scale .is-med b{font-size:19px}.v7-pay-res dd{font-size:21px}}

/* Hebel „Was wäre, wenn Sie …“ (Entwurf v14.css, je Komponente die zuletzt
   gültige Regel aus v8 bis v13). Navy-Fläche mit Raster, rechts die Karte. */
.v7-wi{margin-top:24px;position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);border-radius:16px;padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:44px;align-items:center}
.v7-wi::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--navy-hair) 1px,transparent 1px),linear-gradient(90deg,var(--navy-hair) 1px,transparent 1px);background-size:48px 48px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 8% 10%,black,transparent 70%);mask-image:radial-gradient(ellipse 55% 75% at 8% 10%,black,transparent 70%)}
.v7-wi>*{position:relative}
.v7-wi-copy{display:grid;gap:20px;min-width:0}
.v7 .v7-wi-h{color:var(--on-navy);font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);line-height:1.05;letter-spacing:-.022em}
.v7-wi-l1{display:block}
.v7-wi-rot{display:grid}
.v7-wi-rot>span{grid-area:1/1;color:var(--sky);font-style:italic;font-weight:500;text-wrap:pretty}
.v7-wi-rot>span:not(.is-on){opacity:0}
.v7-wi-lede{font-size:16.5px;line-height:1.55;color:var(--on-navy-2);max-width:46ch}
.v7-wi-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.v7-wi-note{flex-basis:100%;font-size:13.5px;color:var(--on-navy-3)}
.v7-btn-light{background:var(--on-navy);color:var(--navy)}
.v7-btn-light:hover{background:var(--bg-soft-2);transform:translateY(-1px)}
.v7-btn-light:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.v7-wi-pv{background:var(--bg);color:var(--ink);border-radius:14px;padding:22px 24px 20px;box-shadow:var(--shadow-lg);display:grid;gap:16px;min-width:0}
.v7-wi-pv-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.v7-wi-pv-t{font-size:14.5px;font-weight:600;color:var(--graphite)}
.v7-wi-prof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v7-wi-prof li{display:grid;gap:1px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-width:0;transition:background .3s,border-color .3s}
.v7-wi-prof small{font-size:12px;color:var(--slate);line-height:1.3}
.v7-wi-prof b{font-size:14px;font-weight:600;color:var(--graphite);line-height:1.35;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.v7-wi-prof li.is-changed{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.v7-wi-prof li.is-changed b{color:var(--accent-deep)}
.v7-swap{display:grid}
.v7-swap>span{grid-area:1/1}
.v7-swap>span:not(.is-on){visibility:hidden}
.v7-wi-tabs{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;background:var(--bg-soft-2);border-radius:10px;padding:3px}
.v7-wi-tabs button{position:relative;z-index:1;min-height:40px;padding:6px 8px;border:0;background:none;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.25;transition:color .25s}
.v7-wi-tabs button[aria-selected="true"]{color:var(--navy)}
.v7-wi-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.v7-wi-tabs.is-single{display:none}
.v7-wi-ind{position:absolute;z-index:0;top:3px;left:3px;border-radius:8px;background:var(--bg);box-shadow:var(--shadow-sm)}
.v7-wi-panel{display:grid;gap:14px}
.v7-wi-label{font-size:13.5px;font-weight:600;color:var(--graphite);display:flex;flex-wrap:wrap;gap:2px 6px}
.v7-wi-label .v7-swap{font-weight:500;color:var(--slate)}
.v7-wi-band{padding-top:30px}
.v7-wi-track{position:relative;height:26px;border-radius:6px;background:var(--line-2)}
.v7-wi-track::before,.v7-wi-track::after{content:"";position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--slate-3)}
.v7-wi-track::before{left:0}.v7-wi-track::after{right:0}
.v7-wi-iqr{position:absolute;top:0;bottom:0;left:18.75%;width:62.5%;border-radius:6px;background:var(--accent-soft-2);transform-origin:center}
.v7-wi-med{position:absolute;top:-8px;bottom:-8px;left:50%;width:3px;margin-left:-1.5px;background:var(--navy);border-radius:2px;transform-origin:center}
.v7-wi-gap{position:absolute;top:9px;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--accent-light) 0 6px,transparent 6px 10px);opacity:.8}
.v7-wi-you{position:absolute;top:-28px;bottom:-4px;width:0}
.v7-wi-you::before{content:"";position:absolute;left:-1px;top:22px;bottom:0;width:2px;background:var(--accent)}
.v7-wi-you span{position:absolute;left:0;top:0;transform:translateX(-50%);background:var(--accent);color:var(--on-navy);font-size:12px;font-weight:600;border-radius:20px;padding:1px 9px;white-space:nowrap;line-height:1.5}
.v7-wi-you.at-min span{transform:translateX(-6px)}
.v7-wi-you.at-max span{transform:translateX(calc(-100% + 6px))}
.v7-wi-now{position:absolute;top:-4px;bottom:-24px;width:0}
.v7-wi-now::before{content:"";position:absolute;left:-1px;top:0;height:34px;border-left:2px dashed var(--slate-2)}
.v7-wi-now>span{position:absolute;left:0;bottom:0;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap;line-height:1.3}
.v7-wi-now.at-min>span{transform:translateX(-4px)}
.v7-wi-now.at-max>span{transform:translateX(calc(-100% + 4px))}
/* Skala wie das Band darüber: Median nach Inhalt, Ränder teilen den Rest. */
.v7-wi-scale{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;margin-top:34px;padding-top:10px;border-top:1px solid var(--line-2)}
.v7-wi-scale div{display:grid;gap:1px}
.v7-wi-scale div:nth-child(2){text-align:center}
.v7-wi-scale div:nth-child(3){text-align:right}
.v7-wi-scale b{font-family:var(--v7-display);font-size:15px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.v7-wi-scale .is-med b{font-size:19px}
.v7-wi-scale div>span{font-size:12px;color:var(--slate)}
/* Ergebniszeile: Beschriftungen oben, Beträge auf einer Höhe (subgrid).
   Die Beträge links und rechts bestimmen ihre Spalte selbst, der
   Szenario-Name bekommt den Rest; schmal steht der Unterschied darunter. */
.v7-wi-res{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px;margin:0}
.v7-wi-res>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:3px;align-content:start;background:var(--bg-soft);border-radius:8px;padding:10px;min-width:0}
.v7-wi-res dt{font-size:12.5px;color:var(--slate);line-height:1.35;align-self:start}
.v7-wi-res dd{font-family:var(--v7-display);font-size:21px;font-weight:var(--v7-display-wght);color:var(--navy);line-height:1.16;margin:0;font-variant-numeric:lining-nums;white-space:nowrap;align-self:start}
.v7-wi-res dd small{display:block;font-family:var(--v7-text);font-size:12px;font-weight:500}
.v7-wi-thereL{display:block}
.v7-wi-thereL>span:not(.is-on){display:none}
.v7-wi-res .v7-wi-delta{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
.v7-wi-delta dt,.v7-wi-delta dd{color:var(--green)}
.v7-wi-pnote{font-size:12.5px;color:var(--slate);line-height:1.5}
.v7-wi-oben{margin-top:24px;display:grid;gap:12px;justify-items:start}
.v7-wi-oben .v7-note{font-size:15px}
@media(max-width:1000px){.v7-wi{grid-template-columns:minmax(0,1fr);padding:32px 28px;gap:28px}}
@media(max-width:560px){
  .v7-wi{padding:26px 16px 18px;border-radius:12px}.v7 .v7-wi-h{font-size:1.7rem}.v7-wi-pv{padding:18px 14px}
  .v7-wi-res{grid-template-columns:auto minmax(0,1fr)}.v7-wi-res .v7-wi-delta{grid-column:1/-1}
  .v7-wi-tabs button{font-size:12.5px;padding:6px 4px}.v7-wi-res dd{font-size:19px}
}
@media(max-width:420px){
  .v7-wi-tabs{grid-template-columns:minmax(0,1fr)!important}
  .v7-wi-tabs button{min-height:38px;text-align:left;padding:6px 12px;font-size:13.5px}
  .v7-band-scale b,.v7-wi-scale b{font-size:14px}
  .v7-band-scale .is-med b,.v7-wi-scale .is-med b{font-size:16.5px}
  .v7-band-scale div>span,.v7-wi-scale div>span{font-size:11.5px}
  .v7-wi-res dd{font-size:18px}
}
@media(max-width:360px){.v7-wi-res>div{padding:9px 8px}.v7-wi-res dd{font-size:17px}.v7-wi{padding-inline:12px}.v7-wi-pv{padding-inline:12px}.v7-band-scale,.v7-wi-scale{gap:4px}.v7-band-scale b,.v7-wi-scale b{font-size:13px}.v7-band-scale .is-med b,.v7-wi-scale .is-med b{font-size:15.5px}.v7-wi-scale b{font-size:12px}.v7-wi-scale .is-med b{font-size:14px}}

/* ---------- 3 · Markt (Entwurf v14.css, je Komponente die zuletzt
   gültige Regel; Abstände auf den 4/8-px-Rhythmus gerundet) ---------- */
.v7-mk-intro{max-width:76ch;display:grid;gap:16px;margin:-8px 0 32px}
.v7-mk-wx{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v7-wx{display:inline-flex;align-items:center;gap:8px;font-size:14px;border-radius:20px;padding:4px 12px 4px 8px;line-height:1.4}
.v7-wx b{font-weight:600}
.v7-wx svg,.v7-wx-chip svg{flex:none}
.v7-wx-gegen{background:var(--red-soft);color:var(--red)}
.v7-wx-gemischt{background:var(--amber-soft);color:var(--amber-ink)}
.v7-wx-mit{background:var(--green-soft);color:var(--green)}
.v7-mk-lede{font-family:var(--v7-display);font-size:clamp(1.15rem,1rem + .5vw,1.38rem);line-height:1.5;color:var(--navy);letter-spacing:-.006em}
.v7-mk-lede b{font-weight:600}
.v7-mk-folge{max-width:62ch;font-size:16px;line-height:1.5;color:var(--graphite);border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.v7-mks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.v7-mk{display:flex;flex-direction:column;gap:16px}
.v7-mk-h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:center}
.v7-mk-h>div{min-width:0}
.v7-mk-h .k{display:block;font-size:13px;color:var(--slate)}
.v7-mk-h h4{font-size:21px;line-height:1.2}
.v7-mk-h .v7-wx-chip{grid-column:2;justify-self:start;white-space:normal}
.v7-mk-hic{grid-row:span 2;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft-2);color:var(--navy)}
.v7-mk-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;container-type:inline-size}
.v7-mk-fig{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;row-gap:4px;align-items:center;align-content:start;padding:12px;border-radius:8px;background:var(--bg-soft);cursor:help}
.v7-mk-sig{width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.v7-mk-sig svg{width:12px;height:12px}
/* Signal gut: Symbol in --green, weil --green-vivid auf
   --green-soft nur 2,7 : 1 erreicht (Nicht-Text braucht 3 : 1). */
.v7-mk-gut .v7-mk-sig{background:var(--green-soft);color:var(--green)}
.v7-mk-schlecht .v7-mk-sig{background:var(--red-soft);color:var(--red-vivid)}
.v7-mk-neutral .v7-mk-sig{background:var(--bg-soft-2);color:var(--slate)}
/* Kennzahl: im Entwurf abgeschnitten (nowrap, ellipsis), sobald zwei Karten
   nebeneinander schmal werden (1024 bis 1440 px). Hier bricht der Wert an
   Leerzeichen um, und die Schrift folgt der Breite der Kennzahlenreihe:
   22 px ab rund 457 px Reihe, darunter kleiner, so dass der längste Wert ohne
   Leerzeichen (+187.000) in sein Kästchen passt. */
.v7-mk-fig-v{display:block;font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:clamp(17px,7.8cqi - 13.6px,22px);line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums lining-nums;text-wrap:balance;overflow-wrap:anywhere}
.v7-mk-fig-l{grid-column:1/-1;font-size:13px;line-height:1.3;color:var(--slate);hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
.v7-mk-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v7-mk-cols h5{display:flex;align-items:center;gap:4px;font-family:var(--v7-text);font-size:13.5px;font-weight:600;letter-spacing:0;margin-bottom:8px}
.v7-mk-cols .up h5{color:var(--green)}
.v7-mk-cols .dn h5{color:var(--red)}
.v7-mk-cols .up h5 svg{color:var(--green-vivid)}
.v7-mk-cols .dn h5 svg{color:var(--red-vivid)}
.v7-mk-cols ul{list-style:none;display:grid;gap:4px}
.v7-mk-cols li{font-size:14px;color:var(--graphite);line-height:1.35;padding-left:12px;position:relative;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
.v7-mk-cols li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--slate-3)}
.v7-mk-srcs{max-width:62ch;margin-top:16px;font-size:13px;color:var(--slate)}
.v7-mk-srcs summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--slate);list-style:none}
.v7-mk-srcs summary::-webkit-details-marker{display:none}
.v7-mk-srcs summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.v7-mk-srcs[open] summary::before{transform:rotate(45deg)}
.v7-mk-srcs p{line-height:1.55;margin-top:4px}
.v7-mk-srcs b{color:var(--graphite);font-weight:600}
/* Ganze Analyse: Links auf die Arbeitsmarktseiten der Branche und Funktion
   (app.js, Abschnitt Markt). Gestaltung wie .mk-link in markt.css. */
.v7-mk-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.v7-mk-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none}
.v7-mk-link::after{content:"→";transition:transform .2s}
.v7-mk-link:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.v7-mk-link::after{transition:none}}
/* Verteilung der anderen Teilnehmenden: wandert in den Vergleich (L7). */
.v7-peerbar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px}
.v7-peerbar i{display:block;height:100%;transform-origin:left center}
.v7-peerbar i.is-you{box-shadow:inset 0 0 0 2px var(--navy)}
.v7-peer-leg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--slate)}
.v7-peer-leg span{display:inline-flex;align-items:center;gap:4px}
.v7-peer-leg i{width:10px;height:10px;border-radius:2px;display:inline-block}
.v7-peer-leg .is-you{color:var(--navy);font-weight:600}
/* Anonymer Vergleich (Pro): große Zahl links, zwei Balken rechts. Die Balken
   sind .v7-peerbar in hoch, mit Anteil im Segment; ohne Pro unscharf unter
   dem Schloss (.v7-vg-lock). */
.v7-vg{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:32px}
.v7-vg.is-fehlt{display:block;padding:24px}
.v7-vg-big{display:grid;gap:8px}
.v7-vg-num{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:clamp(3rem,2.2rem + 3vw,4.4rem);line-height:1;color:var(--navy);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.v7-vg-big p{font-size:16px;line-height:1.45;color:var(--graphite)}
.v7-vg-bars{display:grid;gap:24px;min-width:0}
.v7-vg-row .v7-peer-leg{margin-top:8px;font-variant-numeric:tabular-nums}
.v7-vg-lab{margin-bottom:8px}
.v7-vg-lab b{font-size:14.5px;font-weight:600;color:var(--graphite)}
.v7-vg .v7-peer-leg{font-size:13px;gap:4px 16px}
.v7-vg .v7-peer-leg span{gap:8px}
.v7-peerbar.v7-vg-bar{height:34px;border-radius:7px}
.v7-vg-bar i{position:relative;display:flex;align-items:center;justify-content:center;min-width:3px}
.v7-vg-bar i span{font-style:normal;font-size:12.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.v7-vg-bar i:nth-child(5) span{color:var(--on-navy)}
/* Auf --v7-ord-4 erreichen weder Weiß (3,99 : 1) noch Navy (4,34 : 1) 4,5 : 1;
   die Zahl steht dort auf einem hellen Schild (Navy auf Weiß). */
.v7-vg-bar i:nth-child(4) span{background:var(--bg);border-radius:4px;padding:0 4px;line-height:1.5}
.v7-vg-bar i.is-you{box-shadow:inset 0 0 0 2.5px var(--navy)}
.v7-vg.is-locked .v7-vg-big,.v7-vg.is-locked .v7-vg-bars{filter:blur(7px);user-select:none;pointer-events:none}
.v7-vg-lock{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;background:var(--v7-glass);border-radius:inherit;padding:24px}
.v7-vg-plate{display:grid;justify-items:center;gap:16px;padding:24px;border-radius:12px;background:color-mix(in srgb,var(--bg) 90%,transparent)}
.v7 .v7-vg-lock p{font-size:16.5px;font-weight:600;color:var(--navy);max-width:32ch;line-height:1.4}
@media(max-width:860px){.v7-vg{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}}
@media(max-width:560px){.v7-vg-bar i.is-small span{display:none}.v7-vg-lock{padding:16px}.v7-vg-plate{padding:16px}}
@media(max-width:900px){.v7-mks{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){
  .v7-mk-figs{grid-template-columns:minmax(0,1fr);gap:6px}
  .v7-mk-fig{grid-template-columns:20px auto minmax(0,1fr);column-gap:12px;padding:10px 12px}
  .v7-mk-fig-v{font-size:20px}
  .v7-mk-fig-l{grid-column:auto}
  .v7-mk-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:360px){.v7-mk-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- 2 · Begründung (Entwurf v14.css, je Komponente die zuletzt
   gültige Regel) ----------
   Abweichung vom Entwurf: Schrift in --slate-2 (3,9 : 1) steht hier in
   --slate, damit jede Beschriftung 4,5 : 1 erreicht (Übergabe 5). */
.v7-klar{max-width:74ch;display:grid;gap:14px;margin-bottom:28px}
.v7-klar-prof{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0}
.v7-klar-prof li{font-size:13.5px;font-weight:500;color:var(--graphite);background:var(--bg-soft-2);border-radius:20px;padding:4px 12px}
.v7-klar p{font-family:var(--v7-display);font-size:clamp(1.15rem,1rem + .55vw,1.42rem);line-height:1.45;color:var(--navy);font-weight:400;letter-spacing:-.006em}
.v7-charts{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:16px}
.v7-chart{display:flex;flex-direction:column;gap:10px;padding:24px 24px 18px}
.v7-chart-h h4{font-size:19px;line-height:1.25}
.v7-chart-b svg{display:block;width:100%;height:auto;max-height:400px;margin-inline:auto;overflow:visible}
.v7-chart-read{font-size:15px;color:var(--graphite);line-height:1.5;border-top:1px solid var(--line-2);padding-top:12px;margin-top:auto}
.v7-chart-read b{color:var(--accent-deep);font-weight:600}
.v7-chart-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--slate);border-top:1px solid var(--line-2);padding-top:12px;margin-top:auto}
.v7-chart-leg span{display:inline-flex;align-items:center;gap:7px}
.v7-chart-leg i{display:inline-block;flex:none}
.v7-lg-on{width:11px;height:11px;border-radius:50%;background:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft-2)}
.v7-lg-off{width:8px;height:8px;border-radius:50%;background:var(--slate-3)}
.v7-lg-zone{width:16px;height:10px;border-radius:2px;background:var(--accent-soft);border:1px solid var(--accent-soft-2)}
.v7-rd-z3{fill:var(--accent-soft);stroke:var(--accent-soft-2);stroke-width:1}
.v7-rd-z2{fill:var(--bg-soft);stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4}
.v7-rd-z1{fill:var(--bg);stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4}
.v7-rd-axis{stroke:var(--line-strong);stroke-width:1}
.v7-rd-g1{stop-color:var(--accent);stop-opacity:.34}
.v7-rd-g2{stop-color:var(--accent-light);stop-opacity:.12}
.v7-rd-area{fill:url(#v7RdGrad);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.v7-rd-dot{fill:var(--slate-2);stroke:var(--bg);stroke-width:2;transform-box:fill-box;transform-origin:center}
.v7-rd-dot.is-on{fill:var(--accent-deep);stroke-width:2.5}
.v7-rd-halo{fill:var(--accent);opacity:.18;transform-box:fill-box;transform-origin:center}
.v7-rd-ic circle{fill:var(--bg);stroke:var(--line-strong);transform-box:fill-box;transform-origin:center}
.v7-rd-ic g{stroke:var(--slate-2)}
.v7-rd-ic.is-on circle{fill:var(--navy);stroke:var(--navy)}
.v7-rd-ic.is-on g{stroke:var(--on-navy)}
.v7-rd-lab{font-family:var(--v7-text);fill:var(--slate)}
.v7-rd-lab-n{font-size:13px;font-weight:500}
.v7-rd-lab-v{font-family:var(--v7-display);font-size:19px;font-weight:600;fill:var(--slate);font-variant-numeric:tabular-nums lining-nums}
.v7-rd-lab.is-on .v7-rd-lab-n{fill:var(--graphite);font-weight:600}
.v7-rd-lab.is-on .v7-rd-lab-v{fill:var(--navy)}
.v7-rd-tick{font-family:var(--v7-text);font-size:10px;fill:var(--slate)}
.v7-rd-list{display:none}
.v7-mx-q{fill:transparent}
.v7-mx-q.is-on{fill:var(--accent-soft)}
.v7-mx-frame{fill:none;stroke:var(--line-strong)}
.v7-mx-grid{stroke:var(--line-2)}
.v7-mx-mid{stroke:var(--line-strong);stroke-dasharray:3 4}
.v7-mx-ql{font-family:var(--v7-text);font-size:13px;font-weight:600;fill:var(--slate);transition:fill .4s}
.v7-mx-ql.is-on{fill:var(--accent-deep)}
.v7-mx-axic{stroke:var(--slate)}
.v7-mx-ax{font-family:var(--v7-text);font-size:13px;font-weight:600;fill:var(--slate)}
.v7-mx-tk{font-family:var(--v7-text);font-size:10.5px;fill:var(--slate)}
.v7-mx-halo{fill:var(--accent);opacity:.16;transform-box:fill-box;transform-origin:center}
.v7-mx-dot{fill:var(--accent-deep);stroke:var(--bg);stroke-width:2.5}
.v7-mx-tag rect{fill:var(--navy)}
.v7-mx-tag text{font-family:var(--v7-text);font-size:12px;font-weight:700;fill:var(--on-navy)}
.v7-gg{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.v7-gg-h{display:flex;align-items:center;gap:10px;font-family:var(--v7-text);font-size:16px;font-weight:600;letter-spacing:0;color:var(--graphite);margin-bottom:18px}
.v7-gg-h svg{color:var(--amber-ink);flex:none}
.v7-gg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0}
.v7-gg-i{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:0 22px}
.v7-gg-i:first-child{padding-left:0}
.v7-gg-i:last-child{padding-right:0}
.v7-gg-i+.v7-gg-i{border-left:1px solid var(--line-2)}
.v7-gg-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--amber-ink);background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-line)}
.v7-gg-i.is-ok .v7-gg-ic{color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
.v7-gg-i div{display:grid;gap:3px;padding-top:2px}
.v7-gg-i b{font-size:15.5px;font-weight:600;color:var(--navy);line-height:1.3}
.v7-gg-i div span{font-size:14.5px;color:var(--slate);line-height:1.5}
@media(max-width:980px){.v7-charts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.v7-gg-list{grid-template-columns:minmax(0,1fr);gap:16px}.v7-gg-i{padding:0}.v7-gg-i+.v7-gg-i{border-left:0;border-top:1px solid var(--line-2);padding-top:16px}}
@media(max-width:640px){.v7-chart{padding:18px 14px 14px}.v7-gg{padding:18px}}
/* Unter 560 px stehen Werte und Namen als Leiste unter dem Diagramm. */
@media(max-width:560px){
  .v7-rd-lab{display:none}
  .v7-rd-tick{font-size:12px}
  .v7-rd-list{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:-4px 0 0;padding:0}
  .v7-rd-list li{display:grid;justify-items:center;gap:2px;text-align:center;min-width:0}
  .v7-rd-li-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--slate-2)}
  .v7-rd-list li.is-on .v7-rd-li-ic{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
  .v7-rd-list b{font-family:var(--v7-display);font-size:19px;font-weight:600;line-height:1.1;color:var(--slate);font-variant-numeric:tabular-nums lining-nums}
  .v7-rd-list li.is-on b{color:var(--navy)}
  .v7-rd-list span:last-child{font-size:12px;color:var(--slate);line-height:1.2}
  .v7-mx-ql{font-size:19px}.v7-mx-ax{font-size:17px}.v7-mx-tag text{font-size:15px}.v7-mx-tk{font-size:15px}
}
/* Unter 420 px ist nur das eigene Feld der Matrix beschriftet. */
@media(max-width:420px){.v7-mx-ql:not(.is-on){display:none}.v7-mx-ql.is-on{font-size:23px}.v7-mx-ax{font-size:18px}}

/* ---------- 7 · Behalten, Fuß ---------- */
/* Zwei Karten: Konto und PDF. Die Anmeldung aus anmelden.js liegt nach dem
   Klick in der Kontokarte; .v7 setzt font:inherit, die Regeln für .v7-keep-auth
   stellen Schrift und Farbe der Knöpfe wieder her. */
#behalten .v7-sechead{margin-bottom:24px}
.v7-keep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.v7-keep .v7-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.v7-keep-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep)}
.v7-keep-konto{border-color:var(--accent-soft-2);box-shadow:var(--shadow-sm)}
.v7-keep-body{display:grid;gap:4px;min-width:0;justify-items:start}
.v7-keep h4{font-size:19px;line-height:1.3}
.v7-keep p{font-size:15px;color:var(--slate);line-height:1.55;margin-bottom:8px}
.v7-keep .btn{text-align:left;min-height:44px;padding:10px 18px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em}
.v7-keep .v7-btn-min{margin-top:0}
.v7-keep p.v7-keep-ok{display:flex;align-items:flex-start;gap:8px;font-size:15px;font-weight:600;color:var(--green);line-height:1.5}
.v7-keep-ok svg{flex:none;margin-top:4px}
.v7-keep-ok a{color:var(--accent);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.v7-keep-ok:focus{outline:none}
.v7 .v7-keep p.v7-keep-msg{font-size:14px;color:var(--red);margin:8px 0 0}
.v7-keep-auth{grid-column:1/-1;min-width:0}
.v7-keep-auth .acc-auth{display:block;max-width:none;margin:0}
.v7-keep-auth .acc-card{max-width:none;width:100%;box-shadow:none}
.v7-keep-auth .acc-form{padding:16px;gap:12px}
.v7-keep-auth .acc-form input{font-family:inherit}
.v7-keep-auth .acc-form .btn{margin-top:0;min-height:46px}
.v7-keep-auth .acc-form .btn-primary{background:var(--accent);color:var(--on-navy)}
.v7-keep-auth .acc-form .btn-primary:hover{background:var(--accent-deep)}
.v7-keep-auth .acc-tab{font-size:14px;font-weight:600;color:var(--slate-2)}
.v7-keep-auth .acc-tab.on{color:var(--navy)}
.v7-keep-auth .acc-google{font-size:14.5px;font-weight:600;color:var(--graphite)}
.v7-keep-auth .acc-link{font-size:13px;font-weight:600;color:var(--accent)}
.v7-keep-auth .acc-fine{margin:0}
@media(max-width:700px){.v7-keep{grid-template-columns:minmax(0,1fr)}}
.v7-btn-min{align-self:flex-start;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--accent);border:1px solid var(--line-strong);border-radius:var(--radius);padding:8px 16px;min-height:44px;background:var(--bg);margin-top:8px;text-decoration:none;cursor:pointer}
.v7-btn-min:hover{border-color:var(--accent)}
.v7-btn-min:disabled{color:var(--slate-3);cursor:default}
.v7-foot{padding-block:32px 0;margin-top:32px;border-top:1px solid var(--line)}
.v7-foot p{font-size:13px;color:var(--slate);max-width:72ch;line-height:1.55}
.v7-foot .v7-ref{font-family:var(--mono);font-size:12px;margin-top:8px}
.v7-foot-acts{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:16px}
.v7-foot-acts button{font-size:14.5px;color:var(--slate);text-decoration:underline;text-underline-offset:3px;min-height:44px;background:none;border:0;cursor:pointer}
.v7-foot-acts button:hover,.v7-foot-acts a:hover{color:var(--graphite)}
.v7-foot-acts a{font-size:14.5px;color:var(--slate);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

/* ---------- Zusammenfassung als Blatt ---------- */
.v7-ov{position:fixed;inset:0;z-index:70;background:rgba(13,27,46,.55);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:32px 16px}
.v7-ov[hidden]{display:none}
.v7-sheet{width:min(640px,100%);background:var(--bg);border-radius:8px;box-shadow:var(--shadow-lg);padding:40px;display:grid;gap:16px}
.v7-sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:12px}
.v7-sheet-brand{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:15px;color:var(--navy)}
.v7-sheet-brand b{color:var(--accent);font-weight:inherit}
.v7-sheet-top .v7-ref{font-family:var(--mono);font-size:11px;color:var(--slate)}
.v7-sheet h3{font-size:28px}
.v7-sheet .v7-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.v7-sheet .v7-kv div{font-size:14px;color:var(--graphite);line-height:1.5}
.v7-sheet .v7-kv b{display:block;font-size:13px;color:var(--slate);font-weight:600;margin-bottom:4px}
.v7-sheet ul{padding-left:18px;font-size:14px;color:var(--graphite);line-height:1.55}
.v7-sheet-sum{font-size:14.5px;line-height:1.6;color:var(--slate)}
.v7-sheet-sum b,.v7-sheet-sum .v7-hx-lead{color:var(--navy);font-weight:600}
.v7-sheet-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:560px){.v7-sheet{padding:24px 20px}.v7-sheet .v7-kv{grid-template-columns:minmax(0,1fr)}}

/* Druck: „Als PDF speichern" öffnet den Druckdialog mit genau diesem Blatt.
   Alles andere wird unsichtbar geschaltet, nicht ausgeblendet — so bleibt die
   Seitenstruktur erhalten und nur das Blatt steht auf dem Papier.

   Die Abschnitte der Ergebnisseite verschwinden dabei ganz aus dem Fluss.
   `visibility:hidden` allein genügt nicht: die Kästen bleiben stehen, und dem
   Blatt folgen dann so viele leere Seiten, wie die Ergebnisseite hoch ist
   (gemessen: neun A4-Seiten statt einer).

   Das Blatt selbst muss dafür zurück in den Fluss. Auf dem Schirm liegt es als
   `position:fixed` über der Seite; bliebe es im Druck absolut positioniert,
   stünde es neben einem auf null zusammengefallenen Dokument und würde nach dem
   Antwortsatz abgeschnitten (gemessen: Kopf und Antwort auf dem Papier, alles
   Weitere fehlt). Statisch positioniert bestimmt es die Seitenhöhe selbst. */
@media print{
  .v7-druckt .v7>:not(.v7-ov){display:none}
  .v7-druckt body *{visibility:hidden}
  .v7-druckt .v7-ov,.v7-druckt .v7-ov *{visibility:visible}
  .v7-druckt .v7-ov{position:static;width:100%;background:none;padding:0;overflow:visible;display:block}
  .v7-druckt .v7-sheet{width:100%;box-shadow:none;border-radius:0;padding:0}
  .v7-druckt .v7-sheet-acts{display:none}
}

/* ---------- Bewegung ----------
   Die Abläufe stehen in app.js (Web Animations API). Hier nur die Bausteine,
   die Markup brauchen: Ziffernrolle und die Transform-Ursprünge. */
.v7-odo{display:inline-flex;white-space:nowrap}
.v7-odo>span{display:inline-block;height:1.16em;line-height:1.16em;vertical-align:top}
.v7-odo-d{overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.v7-odo-col{display:flex;flex-direction:column;will-change:transform}
.v7-odo-col span{display:block;height:1.16em;line-height:1.16em;text-align:center}
@media (prefers-reduced-motion:reduce){
  .v7-spec-marker,.v7-band-you,.v7-snav-ind,.v7-ph-node{transition:none!important}
}

/* ============================================================
   STARTSEITE v2
   Alles unter der Hero: Szenarioanalyse mit Gehaltsband (dunkel) ·
   Methode · Eignung · Kurz erklärt · Schluss · Fuß. Der Fahrplan „Weg nach
   dem Check“ entfiel am 14.10.2026.
   Zeichnung: docs/startseite-v2/entwurf-v2.html (freigegeben 29.09.2026).
   Alles unter dem Präfix `s2-`, damit nichts mit den Klassen der übrigen
   Seiten kollidiert (`.band` heißt dort Abschnittsrahmen, hier Gehaltsband).
   Die Wrapper-Klasse `s2` bringt Newsreader und Schibsted Grotesk — die
   @font-face-Regeln stehen im v7-Block, die Tokens `--v7-display` und
   `--v7-text` werden hier weiterverwendet. Kopf und Hero bleiben bei
   Charter und Inter; die globale body-Schrift wird nicht angefasst.
   ============================================================ */
:root{
  --sky:#9cc3ec;            /* wechselndes Satzende auf Navy (9,4:1) */
  --contour:#d6dde4;        /* Höhenlinien im Schluss */
  --shadow-deep:0 6px 20px rgba(0,0,0,.18),0 36px 80px rgba(0,0,0,.32); /* die eine Karte auf Navy */
  --s2-r-card:12px;         /* Kartenradius der Startseite; v7 behält --r-card 10px */
  /* Live-Zähler: ein eigenes Grün für „gerade jetzt", getrennt vom Passungs-Grün
     (--green). --live-ink trägt Text (5,3:1 auf Weiß), --live-soft die Fläche des +1. */
  --live:#22a06b;--live-ink:#1a7a52;--live-soft:#e3f4ec;
  --s2-lc-row:35px;         /* Zeile des Typen-Karussells: 13,5px × 1,4 + 14 Innenabstand + 2 Rand */
}
.s2{font-family:var(--v7-text);letter-spacing:var(--v7-text-track);color:var(--ink);line-height:1.6}
.s2 :where(h2,h3){font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);color:var(--navy);line-height:1.12;text-wrap:balance}
.s2 :where(p){margin:0}
.s2 :where(ul,ol){margin:0;padding:0}
.s2 :where(button){font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer}
/* Knöpfe: Maße und Farben wie überall (.btn unverändert), nur in der Schrift des Abschnitts */
.s2 .btn{font-family:inherit;letter-spacing:inherit}
.s2-btn-light{background:var(--on-navy);color:var(--navy)}
.s2-btn-light:hover{background:var(--bg-soft-2);transform:translateY(-1px)}
.s2[id]{scroll-margin-top:76px}
.s2-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1.4;border-radius:20px;padding:3px 10px;white-space:nowrap}
.s2-chip-dash{border:1px dashed var(--slate-3);color:var(--slate);font-weight:500}
.s2-chip-free{background:var(--green-soft);color:var(--green)}
.s2-chip-abo{background:var(--accent-soft);color:var(--accent-deep)}
.s2-chip-plan{border:1px dashed var(--line-strong);color:var(--slate-2);font-weight:500}
.s2-note{font-size:13.5px;color:var(--slate);line-height:1.5}

/* ---------- 1 · Live-Zähler in der Hero ----------
   Die Zahlen verbinden bestätigte Sockel mit getrackten Abschlüssen aus
   liveStats (app.js, Abschnitt „Live-Zähler"). Die Hero bleibt bei
   Charter und Inter, darum kein .s2-Wrapper: die Zahl in --serif, die
   Beschriftungen erben Inter. Der Block steht von Anfang an im Fluss; solange
   die erste Zählerantwort aussteht, verbirgt is-pending nur die Pille. Das
   lokale Beispielkarussell bleibt davon unabhängig sichtbar und hat eine feste
   Höhe, damit die Hero weder beim Eintreffen der Zahlen noch im Umlauf springt.
   Fällt die Abfrage aus (is-off), verschwinden „Live" und heute. */
.s2-lc{display:grid;justify-items:center;gap:16px;max-width:540px;margin:32px auto 0}
/* display:grid schlägt das UA-[hidden] — die Abhängigkeiten-Prüfung braucht daher diese explizite Regel. */
.s2-lc[hidden]{display:none}
.s2-lc.is-pending .s2-lc-pill{visibility:hidden}
.s2-lc-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:var(--bg);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px);box-shadow:var(--shadow-sm)}
/* Ring um die Pille bei einem neuen Abschluss (app.js setzt is-hit) */
.s2-lc-pill.is-hit{animation:s2lcHalo 1.1s var(--ease)}
@keyframes s2lcHalo{from{box-shadow:var(--shadow-sm),0 0 0 0 color-mix(in srgb,var(--live) 30%,transparent)}to{box-shadow:var(--shadow-sm),0 0 0 14px color-mix(in srgb,var(--live) 0%,transparent)}}
.s2-lc-live{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--live-ink)}
.s2-lc-dot{position:relative;display:inline-block;width:9px;height:9px}
.s2-lc-dot i,.s2-lc-dot::before,.s2-lc-dot::after{position:absolute;inset:0;border-radius:50%;background:var(--live)}
.s2-lc-dot i{display:block}
.s2-lc-dot::before,.s2-lc-dot::after{content:"";opacity:0;animation:s2lcPulse 2.6s var(--ease) infinite}
.s2-lc-dot::after{animation-delay:1.3s}
@keyframes s2lcPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.4);opacity:0}}
.s2-lc-burst{position:absolute;inset:0;border-radius:50%;border:2px solid var(--live);pointer-events:none}
.s2-lc-div{width:1px;height:28px;background:var(--line)}
.s2-lc-main{position:relative;display:inline-flex;align-items:center;gap:8px}
/* line-height 1.16 wie die Ziffernrolle .v7-odo (rolleZu), sonst springt die Zahl beim Rollen */
.s2-lc-num{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.16;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.s2-lc-lab{font-size:13.5px;color:var(--slate)}
.s2-lc-plus{position:absolute;right:-14px;top:-18px;font-size:12px;font-weight:700;line-height:1.5;color:var(--live-ink);background:var(--live-soft);border-radius:20px;padding:0 7px;opacity:0;pointer-events:none}
.s2-lc-today{display:inline-flex;align-items:center;gap:6px}
.s2-lc-today b{font-size:17px;line-height:1.16;font-weight:700;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums}
.s2-lc-asof{display:none;font-size:13px;color:var(--slate-2)}
/* Lokale Beispielergebnisse unter der Pille: Ergebnistyp und relative Minute.
   Drei chronologisch sortierte Zeilen stehen in einer festen Fläche; app.js
   wählt alle 30 Sekunden eine neue Gruppe aus bis zu fünf Ereignissen. */
.s2-lc-types{width:100%;max-width:470px;display:grid;gap:8px;text-align:left}
.s2-lc-head{font-size:13px;font-weight:600;line-height:1.4;color:var(--slate)}
.s2-lc-feed{list-style:none;display:grid;align-content:start;gap:8px;height:calc(3 * var(--s2-lc-row) + 2 * 8px)}
.s2-lc-feed li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:var(--s2-lc-row);font-size:13.5px;line-height:1.4;color:var(--slate);background:var(--bg);background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line-2);border-radius:10px;padding:7px 12px;transition:opacity .35s var(--ease)}
/* Punkt je Ergebnistyp in den Ordinalstufen Bleiben → Gehen, dieselben wie die Balken in .s2-types */
.s2-lc-feed li i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.s2-lc-feed li[data-type="STABIL"] i{background:var(--v7-ord-1)}
.s2-lc-feed li[data-type="OPTIONEN"] i{background:var(--v7-ord-2)}
.s2-lc-feed li[data-type="INTERN"] i{background:var(--v7-ord-3)}
.s2-lc-feed li[data-type="PRUEFEN"] i{background:var(--v7-ord-4)}
.s2-lc-feed li[data-type="WECHSEL"] i{background:var(--v7-ord-5)}
.s2-lc-feed li b{font-weight:600;color:var(--graphite)}
.s2-lc-feed time{font-size:12.5px;color:var(--slate-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.s2-lc-feed li:nth-child(2){opacity:.9}
.s2-lc-feed li:nth-child(n+3){opacity:.78}
.s2-lc.is-off .s2-lc-live,.s2-lc.is-off .s2-lc-today,.s2-lc.is-off .s2-lc-div,.s2-lc.is-off .s2-lc-plus{display:none}
.s2-lc.is-off .s2-lc-asof{display:inline}
.s2-lc.no-today .s2-lc-today,.s2-lc.no-today .s2-lc-div.t{display:none}
/* Schmal: 54px Mindesthöhe nimmt umgebrochene Typnamen auf. Beide Trennlinien
   weichen; mit Charter und Inter fehlten der ersten Pillenzeile bei 360px sonst
   2px, „Live" stand allein mit einem Strichrest in einer dritten Zeile. */
@media(max-width:480px){.s2-lc-pill{padding:10px 16px;gap:8px 14px;border-radius:18px}.s2-lc-num{font-size:24px}.s2-lc-div{display:none}.s2-lc-feed{--s2-lc-row:54px}.s2-lc-feed li{font-size:13px}}
/* Die globale Regel `*{animation:none}` greift nicht auf Pseudo-Elemente — der Puls braucht seine eigene.
   Karussell: keine Rotation (app.js), alle vorhandenen Ereignisse stehen ohne
   Maske und ohne Stufen untereinander. */
@media (prefers-reduced-motion:reduce){
  .s2-lc-dot::before,.s2-lc-dot::after{animation:none}
  .s2-lc-feed{height:auto;min-height:0;-webkit-mask-image:none;mask-image:none}
  .s2-lc-feed li:nth-child(n){opacity:1}
}
/* Gesamtzahl im Schluss, aus derselben Antwort. Ohne tabular-nums: Schibsted
   Grotesk setzt den Tausenderpunkt dann auf Ziffernbreite („1 . 284"). */
.s2-fin-cta .s2-note b{color:var(--graphite);font-weight:600}

/* ---------- 2 · Szenarioanalyse mit Gehaltsband (dunkel) ---------- */
.s2-mkt{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);padding-block:88px 92px}
.s2-mkt::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--navy-hair) 1px,transparent 1px),linear-gradient(90deg,var(--navy-hair) 1px,transparent 1px);background-size:48px 48px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 8% 10%,black,transparent 70%);mask-image:radial-gradient(ellipse 55% 75% at 8% 10%,black,transparent 70%)}
.s2-mkt .wrap{position:relative}
.s2-mkt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.s2-mkt-copy{min-width:0;display:grid;gap:22px}
/* Überschrift „Szenarioanalyse“ mittig über beiden Spalten (Jan, 15.10.2026), im Rang der übrigen
   Abschnittsköpfe (28,8 / 33,9 / 40 px bei 390 / 768 / 1440), 40 darunter wie .s2-sec-head, 28 mobil.
   Das Raster richtet oben aus (align-items:start): mit einem Kopf außerhalb des Rasters schöbe `center`
   die kürzere Textspalte zur höheren Karte in die Mitte, und unter dem Kopf entstünde ein Loch.
   Darunter die wechselnde Zeile „Was wäre, wenn Sie …“ als große Aussage des Bandes
   (34,4 / 43,9 / 55,2 px, Gestalt wie im Entwurf vom 29.09.), 22 px zur Lede. */
.s2-mkt-head{text-align:center;margin-bottom:40px}
.s2-mkt h2{color:var(--on-navy);font-size:clamp(1.8rem,1.3rem + 1.7vw,2.5rem)}
.s2-mkt-wi{font-family:var(--v7-display);font-weight:var(--v7-display-wght);color:var(--on-navy);font-size:clamp(2.15rem,1.35rem + 2.9vw,3.45rem);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.s2-mkt-l1{display:block}
.s2-mkt-rot{display:grid}
.s2-mkt-rot>span{grid-area:1/1;color:var(--sky);font-style:italic;font-weight:500;text-wrap:pretty}
.s2-mkt-rot>span:not(.is-on){opacity:0}
.s2-mkt-lede{font-size:17px;line-height:1.6;color:var(--on-navy-2);max-width:54ch}
.s2-mkt-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;border-top:1px solid var(--navy-hair);padding-top:20px}
.s2-mkt-split h3{display:flex;align-items:center;gap:8px;font-family:var(--v7-text);letter-spacing:0;font-size:15px;font-weight:600;color:var(--on-navy);line-height:1.4}
.s2-mkt-split h3 svg{color:var(--sky)}
.s2-mkt-split ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.s2-mkt-split li{font-size:15px;line-height:1.45;color:var(--on-navy-2);padding-left:16px;position:relative}
.s2-mkt-split li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--navy-hair-2)}
.s2-mkt-split .s2-free li::before{background:var(--pro-bright)}
.s2-mkt-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:4px}
.s2-mkt-cta .s2-note{color:var(--on-navy-3);flex-basis:100%}
.s2-mkt-alt{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:600;color:var(--on-navy);text-decoration:underline;text-decoration-color:var(--navy-hair-2);text-underline-offset:5px;transition:text-decoration-color .15s}
.s2-mkt-alt:hover{text-decoration-color:var(--on-navy)}
.s2-mkt-alt:focus-visible{outline-color:var(--on-navy)}
@media(max-width:980px){.s2-mkt-grid{grid-template-columns:minmax(0,1fr);gap:44px}}
@media(max-width:640px){.s2-mkt{padding-block:60px 64px}.s2-mkt-head{margin-bottom:28px}.s2-mkt-split{grid-template-columns:minmax(0,1fr)}}

/* Vorschau-Karte: Beispielrechnung */
.s2-pv{background:var(--bg);color:var(--ink);border-radius:16px;padding:24px 26px 22px;box-shadow:var(--shadow-deep);display:grid;gap:18px;min-width:0}
.s2-pv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.s2-pv-t{font-size:14.5px;font-weight:600;color:var(--graphite)}
.s2-pv-prof{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.s2-pv-prof li{display:grid;gap:1px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-width:0;transition:background .3s,border-color .3s}
.s2-pv-prof small{font-size:12px;color:var(--slate-2);line-height:1.3}
.s2-pv-prof b{font-size:14px;font-weight:600;color:var(--graphite);line-height:1.35;overflow-wrap:anywhere}
.s2-pv-prof li.is-changed{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.s2-pv-prof li.is-changed b{color:var(--accent-deep)}
.s2-pv-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--bg-soft-2);border-radius:10px;padding:3px}
.s2-pv-tabs button{position:relative;z-index:1;min-height:40px;padding:6px 8px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.25;transition:color .25s}
.s2-pv-tabs button[aria-selected="true"]{color:var(--navy)}
.s2-pv-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;border-radius:8px;background:var(--bg);box-shadow:var(--shadow-sm);width:calc((100% - 10px) / 3)}
.s2-pv-panel{display:grid;gap:16px}
.s2-pv-label{font-size:13.5px;font-weight:600;color:var(--graphite);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.s2-pv-label span{font-weight:500;color:var(--slate-2)}
.s2-band{position:relative;padding-top:30px}
.s2-band-track{position:relative;height:26px;border-radius:6px;background:var(--line-2)}
.s2-band-track::before,.s2-band-track::after{content:"";position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--slate-3)}
.s2-band-track::before{left:0}.s2-band-track::after{right:0}
.s2-band-iqr{position:absolute;top:0;bottom:0;left:18.75%;width:62.5%;border-radius:6px;background:var(--accent-soft-2);transform-origin:center}
.s2-band-med{position:absolute;top:-8px;bottom:-8px;left:50%;width:3px;margin-left:-1.5px;background:var(--navy);border-radius:2px;transform-origin:center}
.s2-band-gap{position:absolute;top:9px;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--accent-light) 0 6px,transparent 6px 10px);opacity:.75}
.s2-band-you{position:absolute;top:-28px;bottom:-4px;width:0}
.s2-band-you::before{content:"";position:absolute;left:-1px;top:22px;bottom:0;width:2px;background:var(--accent)}
.s2-band-you span{position:absolute;left:0;top:0;transform:translateX(-50%);background:var(--accent);color:var(--on-navy);font-size:12px;font-weight:600;border-radius:20px;padding:1px 9px;white-space:nowrap;line-height:1.5}
.s2-band-now{position:absolute;top:-4px;bottom:-24px;width:0}
.s2-band-now::before{content:"";position:absolute;left:-1px;top:0;height:34px;border-left:2px dashed var(--slate-2)}
.s2-band-now>span{position:absolute;left:0;bottom:0;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap;line-height:1.3}
.s2-band-now.at-min>span{transform:translateX(-4px)}
.s2-band-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:34px;padding-top:10px;border-top:1px solid var(--line-2)}
.s2-band-scale div{display:grid;gap:1px}
.s2-band-scale div:nth-child(2){text-align:center}
.s2-band-scale div:nth-child(3){text-align:right}
/* Newsreader statt der Textschrift: Schibsted Grotesk zeichnet den tabellarischen
   Punkt auf voller Ziffernbreite (9,22 px statt 4,28 px) und reisst damit Luecken in
   77.500 €. tabular-nums bleibt noetig, weil die Ziffernrolle sonst um 3,67 px
   springt, wenn der fertige Text die Odometerspalten abloest. Gemessen am 29.09.2026. */
.s2-band-scale b{font-family:var(--v7-display);font-size:14.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.s2-band-scale .s2-is-med b{font-family:var(--v7-display);font-size:19px}
/* Nur die Beschriftung unter der Zahl. Als `.s2-band-scale span` traf die Regel
   auch die Spalten der Ziffernrolle (.v7-odo … span) im b darueber: die Zahlen
   rollten in 12 px Slate und sprangen am Ende auf 14,5 bzw. 19 px Navy. */
.s2-band-scale div>span{font-size:12px;color:var(--slate)}
.s2-pv-res{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr);gap:8px}
.s2-pv-res div{background:var(--bg-soft);border-radius:8px;padding:10px 12px;min-width:0}
.s2-pv-res dt{font-size:12.5px;color:var(--slate);line-height:1.35}
/* line-height 1.16 wie die Ziffernrolle (.v7-odo), dieselbe Regel wie bei .s2-lc-num:
   mit 1.2 wuchs die Zeile waehrend der Rolle um 0,17 px und alles darunter ruckte. */
.s2-pv-res dd{font-family:var(--v7-display);font-size:21px;font-weight:var(--v7-display-wght);color:var(--navy);line-height:1.16;margin:3px 0 0;font-variant-numeric:lining-nums}
.s2-pv-res .s2-pv-delta{background:var(--green-soft)}
.s2-pv-res .s2-pv-delta dt,.s2-pv-res .s2-pv-delta dd{color:var(--green)}
.s2-pv-res dd small{display:block;font-family:var(--v7-text);font-size:12.5px;font-weight:500;color:inherit;opacity:.8}
.s2-pv-lock{list-style:none;display:grid;gap:6px;border-top:1px solid var(--line-2);padding-top:14px}
.s2-pv-lock li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--slate);line-height:1.4}
.s2-pv-lock li svg{flex:none;color:var(--slate-2)}
.s2-pv-lock li .s2-chip{margin-left:auto}
.s2-pv-note{font-size:12.5px;color:var(--slate-2);line-height:1.5}
/* Wechselnder Text mit reserviertem Platz (app.js: stapelIn / stapelUm). Alle
   Fassungen liegen in einer Grid-Zelle uebereinander wie die Satzenden in
   .s2-mkt-rot; sichtbar ist eine, die uebrigen halten den Platz der laengsten
   frei. So aendert die Karte beim Reiterwechsel ihre Hoehe nicht. */
.s2-swap{display:grid}
.s2-swap>*{grid-area:1/1}
.s2-swap>:not(.is-on){visibility:hidden}
/* Reiterbeschriftung auf schmalen Geraeten: „Metropolregion" ist ein einziges Wort
   und laeuft bei 360 px aus dem Knopf. Die Leiste selbst kann nicht ueberlaufen
   (Grid mit minmax(0,1fr)), der Text schon. `hyphens:auto` trennt es sauber, sobald
   eine Trennhilfe da ist; weil die englische Seite in manchen Browsern keine hat,
   traegt die Loesung zusaetzlich eine Schriftstufe weniger unter 400 px. Kein
   `overflow-wrap:break-word` — das brach im Englischen mitten im Wort
   („Metropolita|n area"). Gemessen bei 360 px am 29.09.2026. */
@media(max-width:640px){.s2-pv{padding:18px 16px}.s2-pv-res{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.s2-pv-res .s2-pv-delta{grid-column:1/-1}.s2-pv-tabs button{font-size:12.5px;-webkit-hyphens:auto;hyphens:auto}}
@media(max-width:400px){.s2-pv-tabs button{font-size:11.5px;padding:6px 5px}}
@media(max-width:380px){.s2-pv-prof{grid-template-columns:minmax(0,1fr)}}

/* ---------- Abschnitte auf Weiß und Hellgrau ---------- */
.s2-sec{padding-block:84px}
.s2-sec+.s2-sec{border-top:1px solid var(--line)}
.s2-sec-soft{background:var(--bg-soft)}
.s2-sec-head{display:grid;gap:12px;margin-bottom:40px;max-width:66ch}
.s2-sec-head h2{font-size:clamp(1.8rem,1.3rem + 1.7vw,2.5rem)}
.s2-sec-head p{color:var(--slate);font-size:17px;line-height:1.55}
@media(max-width:640px){.s2-sec{padding-block:56px}.s2-sec-head{margin-bottom:28px}.s2-sec-head p{font-size:16px}}
.s2-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--s2-r-card);padding:24px 26px}
@media(max-width:640px){.s2-card{padding:20px}}

/* Hinweiskasten; derzeit ohne Verwendung auf der Startseite */
.s2-mom{margin-top:36px;display:flex;gap:14px;align-items:flex-start;background:var(--bg-soft);border-radius:var(--s2-r-card);padding:18px 22px}
.s2-mom svg{flex:none;color:var(--accent);margin-top:2px}
.s2-mom p{font-size:15.5px;color:var(--graphite);line-height:1.55}
.s2-mom b{font-weight:600}

/* 3 · Methode */
.s2-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s2-st{display:flex;flex-direction:column;gap:10px}
.s2-st-n{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:44px;line-height:1;color:var(--accent-soft-2);font-variant-numeric:lining-nums}
.s2-st h3{font-size:22px}
.s2-st p{font-size:15.5px;color:var(--slate);line-height:1.55}
.s2-st-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.s2-st-chips span{font-size:12.5px;font-weight:500;color:var(--slate);background:var(--bg-soft-2);border-radius:20px;padding:3px 10px}
.s2-meth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;margin-top:16px}
.s2-dims{list-style:none;display:grid;gap:0}
.s2-dims li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-2)}
.s2-dims li:first-child{border-top:0;padding-top:4px}
.s2-k{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:lining-nums}
.s2-dims b{display:block;font-size:15.5px;font-weight:600;color:var(--graphite);line-height:1.35}
.s2-dims span{font-size:14px;color:var(--slate)}
.s2-meth h3{font-family:var(--v7-text);letter-spacing:0;font-size:15.5px;font-weight:600;color:var(--graphite);margin-bottom:14px;line-height:1.4}
.s2-types-ends{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--slate-2);margin-bottom:8px}
.s2-types{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.s2-types li{display:grid;gap:10px;min-width:0}
.s2-types i{display:block;height:8px;border-radius:4px;transform-origin:left center}
.s2-types span{font-size:13.5px;line-height:1.35;color:var(--graphite);padding-right:4px}
.s2-types li:nth-child(1) i{background:var(--v7-ord-1)}.s2-types li:nth-child(2) i{background:var(--v7-ord-2)}.s2-types li:nth-child(3) i{background:var(--v7-ord-3)}.s2-types li:nth-child(4) i{background:var(--v7-ord-4)}.s2-types li:nth-child(5) i{background:var(--v7-ord-5)}
.s2-types-note{margin-top:18px;font-size:14.5px;color:var(--slate);line-height:1.55}
.s2-types-note a{font-weight:600;text-decoration:none}
.s2-types-note a:hover{text-decoration:underline}
@media(max-width:900px){.s2-steps{grid-template-columns:minmax(0,1fr)}.s2-meth{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.s2-types{grid-template-columns:minmax(0,1fr);gap:8px}.s2-types li{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px}.s2-types-ends{display:none}}

/* 4 · Eignung */
.s2-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.s2-fit h3{display:flex;align-items:center;gap:10px;font-family:var(--v7-text);letter-spacing:0;font-size:16.5px;font-weight:600;margin-bottom:14px;line-height:1.4}
.s2-fit h3 svg{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;color:var(--on-navy)}
.s2-fit-yes h3{color:var(--green)}.s2-fit-yes h3 svg{background:var(--green)}
.s2-fit-no h3{color:var(--red)}.s2-fit-no h3 svg{background:var(--red)}
.s2-fit ul{list-style:none;display:grid;gap:10px}
.s2-fit li{font-size:15.5px;line-height:1.5;color:var(--graphite);padding-left:18px;position:relative}
.s2-fit li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%}
.s2-fit-yes li::before{background:var(--green)}
.s2-fit-no{background:var(--bg-soft);border-style:dashed;border-color:var(--line-strong)}
.s2-fit-no li::before{background:var(--slate-3)}
@media(max-width:760px){.s2-fit{grid-template-columns:minmax(0,1fr)}}

/* 5 · Kurz erklärt */
.s2-faq{max-width:760px;border-top:1px solid var(--line)}
.s2-faq details{border-bottom:1px solid var(--line)}
.s2-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 2px;font-size:18px;font-weight:600;color:var(--navy);line-height:1.4}
.s2-faq summary::-webkit-details-marker{display:none}
.s2-faq summary svg{flex:none;color:var(--slate-2);transition:transform .3s var(--ease)}
.s2-faq details[open] summary svg{transform:rotate(180deg)}
.s2-faq .s2-a{padding:0 2px 20px;font-size:16px;color:var(--slate);line-height:1.6;max-width:62ch}

/* 6 · Schluss */
.s2-fin{position:relative;overflow:hidden;background:var(--bg-soft);border-top:1px solid var(--line)}
.s2-fin::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-radial-gradient(circle at 92% 50%,transparent 0 34px,var(--contour) 34px 35px);opacity:.5;-webkit-mask-image:radial-gradient(ellipse 50% 90% at 92% 50%,black,transparent 70%);mask-image:radial-gradient(ellipse 50% 90% at 92% 50%,black,transparent 70%)}
.s2-fin .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding-block:72px}
.s2-fin h2{font-size:clamp(1.9rem,1.35rem + 1.9vw,2.7rem)}
.s2-fin p{margin-top:10px;font-size:17px;color:var(--slate);max-width:52ch}
.s2-fin-cta{display:grid;gap:10px;justify-items:start}
@media(max-width:760px){.s2-fin .wrap{grid-template-columns:minmax(0,1fr);padding-block:56px}}

/* Fuß: ersetzt auf der Startseite die dunkle foot-grid-Fassung */
footer.s2-ftr{background:var(--bg);color:var(--ink);padding:0;border-top:1px solid var(--line)}
.s2-ftr .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:28px 32px;padding-block:48px 40px}
.s2-ftr p{font-size:14.5px;color:var(--slate);margin-top:12px;max-width:40ch;line-height:1.55}
.s2-ftr h4{font-family:var(--v7-text);letter-spacing:var(--v7-text-track);font-size:14px;font-weight:600;color:var(--graphite);margin-bottom:10px;line-height:1.6}
.s2-ftr ul{list-style:none;display:grid;gap:6px}
/* Klickfläche auf Zeilenhöhe (29px) ziehen, ohne den Rhythmus der Zeichnung zu ändern */
.s2-ftr ul a{font-size:14.5px;color:var(--slate);text-decoration:none;display:inline-block;padding-block:3px;margin-block:-3px}
.s2-ftr ul a:hover{color:var(--navy)}
.s2-ftr .s2-ftr-base{grid-column:1/-1;max-width:none;margin-top:0;border-top:1px solid var(--line-2);padding-top:18px;font-size:13px;color:var(--slate-2)}
/* Vier Linkspalten (Instrument, Szenarioanalyse, Marktanalysen, Rechtliches): bis 960 px unter der Marke, bis 559 px zwei je Zeile. */
@media(max-width:960px){.s2-ftr .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}.s2-ftr .wrap>div:first-child{grid-column:1/-1}}
@media(max-width:559px){.s2-ftr .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Feinjustierung an Frage 7 und 8 (fein-modell.js) =====
   .fein: aufklappbarer Block unter den Antworten im weißen Fragen-Panel.
   .v7-fein: Karte „Ihre Zahlen“ am Ende des Abschnitts Gehalt der
   Ergebnisseite (v14, vorher im dunklen Kopf), hell wie die übrigen Karten
   dort. Die genauen Werte stehen nie im DOM; .v7-fein-sperre zeichnet
   die Schraffur an ihrer Stelle. Eingaben 16px, damit iOS nicht zoomt. */
/* .fein im Fragen-Panel: immer offen, Pro-Rahmen und Pro-Chip in der Pro-Signatur wie die Pro-Karte
   der Kontoübersicht (.pf-card-pro: 1,5 px --pro-sig-vivid, 3 px Ring --pro-sig-soft; Chip --pro-sig
   mit Weiß). Dieselbe Marke und derselbe Rahmen auf der Karte „Ihre Zahlen“ der Ergebnisseite
   (.v7-fein): ein Pro-Zeichen für beide Stellen (Jan, 16.10.2026). */
.fein{margin-top:16px;border:1.5px solid var(--pro-sig-vivid);box-shadow:0 0 0 3px var(--pro-sig-soft);border-radius:6px;background:var(--bg)}
.fein-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px 0;font-size:14.5px;line-height:1.4;color:var(--ink)}
.fein-t{font-weight:600}
.fein-pro{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.4;border-radius:20px;padding:1px 8px;background:var(--pro-sig);color:var(--on-navy);border:1px solid var(--pro-sig);white-space:nowrap}
.fein-inhalt{padding:12px 16px 16px;display:grid;gap:12px}
/* Ohne Pro (Jan, 16.10.2026): die Felder sind gesperrt und liegen hinter Milchglas, darüber mittig
   eine kleine Karte mit „Mit Pro freischalten“ (wie .mk-sperre-deck und .mk-sperre-karte der
   Arbeitsmarktseiten). Der Kopf des Blocks bleibt frei. Ohne backdrop-filter deckt die Fläche
   dichter ab. Die Eingaben behalten ihre Werte aus sig-fein, nur grau und ohne Fokus. */
.fein-zu .fein-inhalt{position:relative}
.fein-zu .fein-l{color:var(--slate-2)}
.fein-zu .fein-in{background:var(--bg-soft);border-color:var(--line)}
.fein-zu .fein-in input:disabled{color:var(--slate-2);-webkit-text-fill-color:var(--slate-2);opacity:1;cursor:default}
.fein-zu .fein-e{color:var(--slate-3)}
.fein-schloss{position:absolute;inset:0;display:grid;place-items:center;padding:16px;border-radius:0 0 4px 4px;background:var(--v7-glass);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fein-schloss{background:color-mix(in srgb,var(--bg) 88%,transparent)}}
.fein-schloss-karte{display:grid;justify-items:center;gap:8px;width:100%;max-width:320px;padding:16px;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-md)}
.fein-notiz{font-size:13px;line-height:1.5;color:var(--slate)}
.fein-vorher{font-size:13.5px;line-height:1.5;color:var(--slate);font-variant-numeric:tabular-nums}
.fein-vorher b{font-weight:600;color:var(--graphite)}
.v7-fein-felder[hidden]{display:none}
.fein-lead{font-size:14px;line-height:1.5;color:var(--slate);max-width:62ch}
.fein-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.fein-feld{display:grid;gap:6px;min-width:0;align-content:end}
.fein-l{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--graphite)}
.fein-in{display:flex;align-items:center;min-width:0;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--bg);transition:border-color .2s,box-shadow .2s}
.fein-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fein-in:has(input[aria-invalid="true"]){border-color:var(--red)}
.fein-in input{flex:1;width:0;min-width:0;border:0;background:none;padding:10px 12px;font-family:inherit;font-size:16px;font-weight:600;color:var(--navy);font-variant-numeric:lining-nums proportional-nums}
.fein-in input:focus{outline:none}
.fein-e{padding-right:12px;color:var(--slate);font-size:13.5px;font-weight:600}
.fein-fuss{font-size:13px;line-height:1.5;color:var(--slate)}
.v7-fein{margin-top:16px;border:1.5px solid var(--pro-sig-vivid);box-shadow:0 0 0 3px var(--pro-sig-soft);border-radius:var(--r-card);padding:24px;background:var(--bg);display:grid;gap:14px}
.v7-fein-k{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.v7-fein h3{display:inline-flex;align-items:center;gap:10px;font-family:var(--v7-text);font-size:16px;font-weight:600;letter-spacing:0;color:var(--graphite)}
.v7-fein-link{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:inherit;color:var(--accent);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-soft-2)}
.v7-fein-link:hover{text-decoration-color:var(--accent)}
.v7-fein-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.v7-fein-p{font-size:15px;line-height:1.55;color:var(--slate);max-width:72ch}
.v7-fein-frei{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v7-fein-frei li{font-size:15.5px;line-height:1.5;color:var(--graphite)}
.v7-fein-frei li .v7-fein-link{font-size:14.5px;margin-left:4px}
.v7-fein-frei li.v7-fein-klein{font-size:13.5px;color:var(--slate)}
.v7-fein-zu{border-top:1px solid var(--line-2);padding-top:12px;display:grid;gap:10px}
.v7-fein-zu-k{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--slate)}
.v7-fein-zu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
.v7-fein-zu li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--graphite)}
.v7-fein-sperre{flex:0 0 72px;height:12px;border-radius:3px;background:repeating-linear-gradient(135deg,var(--line-strong) 0 3px,transparent 3px 7px)}
.v7-fein-felder{display:grid;gap:16px;border-top:1px solid var(--line-2);padding-top:16px}
.v7-fein .fein-gruppe{display:grid;gap:10px}
@media(max-width:640px){.v7-fein{padding:16px}.v7-fein-zu ul{grid-template-columns:minmax(0,1fr)}}
.v7-fein-kauf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px}
.v7-fein-knopf,.fein-knopf{display:inline-flex;align-items:center;text-decoration:none;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:inherit;color:var(--on-navy);background:var(--accent);border:0;border-radius:var(--radius);padding:0 18px;min-height:44px;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s,transform .15s}
.v7-fein-knopf:hover{background:var(--accent-deep);transform:translateY(-1px)}
.v7-fein-knopf:focus-visible,.fein-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Knopf im Fragen-Panel: Pro-Grün wie der Pro-Knopf der Preisseite (.pr-tier-pro .pr-btn). */
.fein-knopf,.v7-fein-knopf,.v7 .btn-accent[data-cta="gehalt_pro"],.v7 .btn-accent[data-cta="vergleich_pro"]{background:var(--pro-sig)}
.fein-knopf:hover,.v7-fein-knopf:hover,.v7 .btn-accent[data-cta="gehalt_pro"]:hover,.v7 .btn-accent[data-cta="vergleich_pro"]:hover{background:color-mix(in srgb,var(--pro-sig) 82%,black);transform:translateY(-1px)}
.v7-fein-notiz{font-size:13.5px;color:var(--slate)}
.v7-fein-genau{border-top:1px solid var(--line-2);padding-top:12px;display:grid;gap:12px}
.v7-fein-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;margin:0}
.v7-fein-werte div{display:grid;gap:4px;min-width:0}
.v7-fein-werte dt{font-size:13.5px;font-weight:600;color:var(--slate)}
.v7-fein-werte dd{margin:0;display:grid;gap:2px}
.v7-fein-werte b{font-family:var(--v7-display);font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--navy);font-variant-numeric:lining-nums}
.v7-fein-werte small{font-size:13.5px;line-height:1.45;color:var(--slate)}
.v7-fein-rh{display:inline-flex;align-items:center;gap:8px;justify-self:start;max-width:100%;font-size:13px;font-weight:500;line-height:1.35;color:var(--slate);border:1px solid var(--line-strong);border-radius:20px;padding:4px 12px 4px 4px}
.v7-fein-rh i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg-soft-2);color:var(--navy);font-style:normal;font-family:var(--v7-display);font-size:13px;font-weight:600;line-height:1}
.v7-fein-fn{font-size:13px;line-height:1.5;color:var(--slate);max-width:80ch}
.v7-fein-meldung{font-size:14.5px;color:var(--graphite)}
@media(max-width:640px){.v7-fein-werte{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   PREISSEITE
   /preise/ und /pricing/: drei Spalten (Ohne Konto, Konto, Pro),
   darunter der Vergleich Frei / Konto / Pro als Tabelle und „Kurz
   erklärt“. Alles unter dem Präfix `pr-`. Die Seite nutzt die
   Bausteine der Startseite weiter (s2-sec, s2-sec-head, s2-card,
   s2-chip, s2-note, s2-faq, s2-ftr) und ergänzt Spalten, Preiszeile,
   Liste, Abrechnungsschalter und Vergleichstabelle.
   Der Schalter Monatlich/Jährlich kommt ohne Skript aus: die Radios
   stehen im Markup, `:has()` blendet je eine Preis-, Hinweis- und
   Knopf-Variante aus. Ab 1000px richten sich Kopf, Preis, Liste und
   Knopf der drei Karten per Subgrid auf gemeinsamen Zeilen aus.
   ============================================================ */
.nav-acc[aria-current]{color:var(--navy)}
.pr-hero .hero-center{padding:72px 0 4px}
.pr-tiers{padding-block:36px 72px}
@media(max-width:640px){.pr-hero .hero-center{padding:48px 0 0}.pr-tiers{padding-block:28px 56px}}

/* Spalten: einspaltig bis 999px, darüber drei gleich breite Karten */
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:640px}
.pr-tier{display:flex;flex-direction:column;min-width:0;padding:24px 22px 22px}
/* Pro-Karte in der Pro-Signatur der Kontoübersicht (profil.css .pf-card-pro, .pf-btn-pro); die Grüntöne
   setzt .pr-signal an #tarife und #vergleich (Block .v7). Rahmen 1,5 px in --green-vivid mit 3 px Ring in
   --green-soft, Name in --green, Knopf auf --green mit weißer Schrift (5,3:1).
   Der Innenabstand bleibt wie an den anderen Karten: Chromium rundet den 1,5-px-Rahmen auf 1 px ab
   (gemessen bei 1000 und 1440 px, DPR 1 und 2), ein Ausgleich um 0,5 px versetzte den Kopf. */
.pr-tier-pro{border:1.5px solid var(--green-vivid);box-shadow:0 0 0 3px var(--green-soft)}
.pr-tier-pro .pr-name{color:var(--green)}
.pr-tier-pro .pr-btn{background:var(--green);color:var(--on-navy)}
.pr-tier-pro .pr-btn:hover{background:color-mix(in srgb,var(--green) 82%,black)}
.pr-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;min-height:44px;margin-bottom:14px}
.pr-name{font-size:24px;line-height:1.15}

/* Preis in der Schrift der Zahlen auf der Startseite (Newsreader, Versalziffern) */
.pr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.pr-amt{font-family:var(--v7-display);font-size:46px;font-weight:var(--v7-display-wght);letter-spacing:-.022em;line-height:1.05;color:var(--navy);font-variant-numeric:lining-nums;white-space:nowrap}
.pr-unit{font-size:15px;font-weight:500;color:var(--slate)}
.pr-sub{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--slate)}

/* Liste: Haarlinien wie .s2-dims. Haken in --green = in dieser Spalte neu, Ring in --slate-3 = aus der Spalte davor.
   Der Haken ist ein gedrehtes Winkelstück (6 × 11 px, Strich 2 px), aus Rahmenlinien gebaut;
   seine Mitte liegt auf der Mitte der ersten Textzeile (11 px Innenabstand + 22,5 px Zeile / 2 ≈ 22 px). */
.pr-list{list-style:none;margin:20px 0 22px;flex:1}
.pr-list li{position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--line-2);font-size:15.5px;line-height:1.45;color:var(--graphite)}
.pr-list li::before{content:"";position:absolute;left:3px;top:15px;width:6px;height:11px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg)}
.pr-list .pr-incl{color:var(--slate)}
.pr-list .pr-incl::before{left:1px;top:19px;width:7px;height:7px;border:0;border-radius:50%;transform:none;box-shadow:inset 0 0 0 1.5px var(--slate-3)}
.pr-li-t{font-weight:600;color:var(--navy)}
.pr-li-d{color:var(--slate)}

/* Knopf unten, Hinweis darunter */
.pr-act{display:grid;gap:12px;align-content:start}
.pr-btn{display:flex;justify-content:center;width:100%;min-height:48px}
.pr-note{line-height:1.5}
.pr-fine{margin-top:20px}

/* Abrechnungsschalter (Radiogruppe), Optik wie die Reiter der Beispielrechnung */
.pr-switch{position:relative;display:inline-grid;grid-template-columns:repeat(2,auto);gap:2px;padding:3px;background:var(--bg-soft-2);border-radius:10px}
.pr-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pr-switch label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:8px;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--slate);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
.pr-switch label:hover{color:var(--navy)}
.pr-radio:checked+label{background:var(--bg);color:var(--navy);box-shadow:var(--shadow-sm)}
.pr-radio:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.pr-tier .pr-y{display:none}
.pr-tier:has(#pr-billing-year:checked) .pr-m{display:none}
.pr-tier:has(#pr-billing-year:checked) .pr-y{display:flex}

/* Vergleich Frei / Konto / Pro: eine Tabelle, je Bereich ein tbody mit Titelzeile. Der Abschnitt hängt ohne eigenen
   Abstand oben an den Karten (72 px aus .pr-tiers), zur FAQ trennen 84 px und der Flächenwechsel.
   border-collapse:separate, weil Linien an klebenden Zellen sonst stehen bleiben; die Linien liegen an den Zellen.
   Der Kopf klebt unter der Kopfzeile: .nav 70 px + Haarlinie = 71 px. Kein Vorfahre setzt overflow.
   Die Haarlinie von .s2-sec+.s2-sec entfällt: Karten und Vergleich sind eine Gruppe. */
.pr-cmp{padding-top:0}
.s2-sec+.pr-cmp{border-top:0}
.pr-tab{width:100%;max-width:880px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.45}
.pr-tab col.pr-col-s{width:88px}
.pr-tab th,.pr-tab td{padding:8px 0;border-bottom:1px solid var(--line-2);text-align:center;vertical-align:middle}
.pr-tab th[scope=row]{text-align:left;font-weight:400;color:var(--graphite);padding-right:12px}
.pr-tab th[scope=row],.pr-list li{text-wrap:pretty}
.pr-tab thead th{position:sticky;top:71px;z-index:1;background:var(--bg);padding:12px 0 8px;border-bottom:1px solid var(--line-strong);font-size:13.5px;font-weight:600;line-height:1.4;color:var(--slate)}
.pr-tab thead .pr-tab-pro{color:var(--green)}
.pr-tab th[scope=rowgroup]{text-align:left;padding:32px 0 8px;font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:19px;line-height:1.2;color:var(--navy)}
.pr-tab-sub{display:block;margin-top:4px;font-family:var(--v7-text);font-weight:400;letter-spacing:var(--v7-text-track);font-size:13.5px;line-height:1.45;color:var(--slate)}
/* Detailzeile unter genau einer Zeile („Genauer rechnen im Check“): gleiche Stufe wie die Unterzeile am Bereichstitel */
.pr-tab-det{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--slate)}
/* Zellen: Haken in --green = enthalten, Strich in --slate-2 = nicht enthalten (3,9:1 auf Weiß); der Wortlaut steht je als .sr-only in der Zelle */
.pr-ja::before,.pr-nein::before{content:"";display:inline-block;vertical-align:middle}
.pr-ja::before{width:6px;height:11px;margin-top:-5px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg)}
.pr-nein::before{width:10px;height:2px;margin-top:-2px;background:var(--slate-2)}
/* Schmal: Statusspalten 56 px (EN „Account“ misst 53,8 px bei 13,5 px/600), Textspalte 182 px, Innenabstand rechts 8 px */
@media(max-width:640px){.pr-tab col.pr-col-s{width:56px}.pr-tab th[scope=row]{padding-right:8px}}

/* Kopfzeile schmal: Abstände eine Stufe knapper; der Wortmarke bleibt bei 390 px eine Zeile (Menü + Konto brauchen 99 px). */
@media(max-width:400px){.nav-right{gap:8px}.nav .brand{gap:9px}}
@media(max-width:360px){header .wrap{padding:0 14px}.nav-right{gap:6px}}

/* Kopfzeile (Jan, 14.10.2026, dritte Fassung nach Abnahme): neben der Wortmarke das Sprachkürzel, das Menü und der
   runde Konto-Eintrag; kein Leitsatz, kein Check-Knopf in der Zeile. Das Menü ist ein natives details/summary mit eigener
   Gestaltung, es öffnet auch ohne Skript. analytics.js ergänzt aria-expanded, Escape mit Fokusrückgabe, Schließen bei
   Klick daneben, auf einen Eintrag und beim Verlassen per Tab, und blendet beim Schließen aus (.nav-menu-zu).
   Drei Felder — die getönten Karten Check starten und Szenarioanalyse, daneben die Gruppe Marktanalysen — ab 641 px
   nebeneinander, darunter gestapelt; Methodik, Studien und Preise als leiser Fuß. Bewegung nach React Bits „Card Nav“ (MIT + Commons Clause; nur die Werte
   übernommen, kein Code): Panel klappt 0,4 s mit power3.out auf, die Gruppen blenden gestaffelt um 80 ms ab 0,3 s ein,
   aus 12 px Versatz statt der 50 px des Originals. Die globale Regel für prefers-reduced-motion nimmt die Bewegung weg. */
.nav-right{position:relative}
/* Auslöser (Jan, 14.10.2026, fünfte Fassung): kein Wort, ein Symbol im selben 34-px-Kreis wie der Konto-Eintrag —
   drei Linien, die im offenen Zustand zum X werden (obere und untere drehen ±45° in die Mitte, die mittlere blendet
   aus; 0,4 s power3.out wie das Panel, nach dem Hamburger von React Bits „Card Nav“). Das Wort „Menü“ bleibt als
   .sr-only für Bildschirmleser. Das X folgt [open] per CSS; ohne Skript öffnet details nativ. Die Zielseite wird
   nicht mehr am Auslöser gespiegelt: fast jede Seite liegt im Panel, ein dauerhaft dunkler Kreis trüge keine Information. */
.nav-menu>summary{list-style:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--bg-soft);color:var(--slate);user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.nav-menu>summary:hover,.nav-menu[open]>summary{border-color:var(--slate-2);color:var(--navy)}
.nav-menu-linien{position:relative;display:block;width:16px;height:12px}
.nav-menu-linien i{position:absolute;left:0;width:16px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1)}
.nav-menu-linien i:nth-child(1){top:0}
.nav-menu-linien i:nth-child(2){top:5.25px}
.nav-menu-linien i:nth-child(3){top:10.5px}
.nav-menu[open] .nav-menu-linien i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-menu[open] .nav-menu-linien i:nth-child(2){opacity:0}
.nav-menu[open] .nav-menu-linien i:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}
/* Konto: 34-px-Kreis wie der Avatar, abgemeldet mit Personen-Symbol; ::before weitet die Trefferfläche auf 44 px.
   Angemeldet macht analytics.js daraus .nav-avatar (Regel weiter oben), deshalb gelten die Farben nur ohne diese Klasse. */
.nav-acc.nav-konto{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);transition:background .15s ease,border-color .15s ease,color .15s ease}
.nav-acc.nav-konto:not(.nav-avatar){background:var(--bg-soft);color:var(--slate)}
.nav-acc.nav-konto:not(.nav-avatar):hover{border-color:var(--slate-2);color:var(--navy)}
.nav-acc.nav-konto::before{content:"";position:absolute;inset:-5px;border-radius:50%}
/* Das Panel hängt unter der Haarlinie des Kopfs, rechts bündig mit dem Konto-Kreis: .nav-right ist 44 px hoch und in
   der 70-px-Zeile zentriert, also beginnt das Panel 13 px unter seiner Unterkante. */
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 13px);width:672px;max-width:calc(100vw - 72px);padding:8px 8px 0;background:var(--bg);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;box-shadow:var(--shadow-md);z-index:61;animation:nav-panel-auf .4s cubic-bezier(.215,.61,.355,1) both}
@keyframes nav-panel-auf{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 -48px -48px -48px)}}
/* Sprachkürzel in der Zeile (EN auf deutschen, DE auf englischen Seiten): Text, kein Chip, 44 px Trefferfläche. */
.nav-acc.nav-lang{font-size:12px;letter-spacing:.08em;padding:0 10px}
/* Drei Felder nebeneinander: zwei getönte Karten (Check starten, Szenarioanalyse) als die Werkzeuge mit Zug, daneben
   die Gruppe Marktanalysen eine Stufe ruhiger. Karten in --accent-soft, Titel in --accent-deep (8,3:1 auf der Tönung),
   Hover einen Ton kräftiger (--accent-soft-2). Gleiche Höhe über das Raster. */
.nav-menu-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.nav-menu-gruppen>*{animation:nav-gruppe-auf .4s cubic-bezier(.215,.61,.355,1) both;animation-delay:calc(.3s + var(--i,0)*.08s)}
.nav-menu-gruppen>:nth-child(2){--i:1}
.nav-menu-gruppen>:nth-child(3){--i:2}
@keyframes nav-gruppe-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nav-menu-gruppe,.nav-menu-karte{padding:8px}
.nav-menu-karte{display:block;border-radius:6px;background:var(--accent-soft);text-decoration:none;transition:background .15s}
.nav-menu-karte .nav-menu-h{color:var(--accent-deep);font-size:15px}
.nav-menu-karte .nav-menu-liste a:hover,.nav-menu-karte a.nav-menu-h:hover{background:var(--accent-soft-2);color:var(--accent-deep)}
.nav-menu-karte .nav-menu-h[aria-current]{box-shadow:inset 2px 0 0 var(--accent)}
/* Die Check-Karte (das ganze Feld ist der Link) trägt als einzige die satte Fläche: --accent-deep, Titel weiß (9,6:1),
   Unterzeile --accent-soft (8,3:1), ein stiller Pfeil rechts oben zeigt die Richtung; kompakt (align-self:start), weil die
   gefüllte Fläche in voller Spaltenhöhe als Block wirkt; Hover einen Ton heller (--accent,
   weiß 6,9:1). Fokusring hell und nach innen, damit er auf der Fläche sichtbar ist; aria-current als heller Balken. */
a.nav-menu-karte{position:relative;align-self:start;background:var(--accent-deep)}
a.nav-menu-karte:hover{background:var(--accent)}
a.nav-menu-karte:focus-visible{outline:2px solid var(--bg);outline-offset:-4px}
a.nav-menu-karte .nav-menu-h{color:var(--bg)}
a.nav-menu-karte .nav-menu-h small{color:var(--accent-soft)}
a.nav-menu-karte::after{content:"→";position:absolute;top:14px;right:16px;font-size:15px;line-height:1.35;color:var(--accent-soft);transition:transform .15s}
a.nav-menu-karte:hover::after{transform:translateX(2px)}
a.nav-menu-karte[aria-current]{box-shadow:inset 3px 0 0 var(--accent-soft)}
.nav-menu-h{display:block;min-height:44px;padding:8px 12px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border-radius:var(--radius);font-family:var(--sans);line-height:1.35;transition:background .15s,color .15s}
.nav-menu-h small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.35;color:var(--slate)}
a.nav-menu-h:hover{background:var(--bg-soft);color:var(--accent-deep)}
a.nav-menu-h[aria-current]{box-shadow:inset 2px 0 0 var(--accent)}
.nav-menu-liste{list-style:none;margin:0;padding:0}
.nav-menu-liste a,.nav-menu-aus{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;color:var(--slate);text-decoration:none;border-radius:var(--radius);font-family:var(--sans);line-height:1.35;transition:background .15s,color .15s}
.nav-menu-liste a:hover{background:var(--bg-soft);color:var(--navy)}
.nav-menu-liste a[aria-current]{color:var(--navy);box-shadow:inset 2px 0 0 var(--accent)}
/* Noch nicht gebaute Punkte (Beförderung, Branchenwechsel): kein Link, zurückgenommen, mit dem Zusatz „in Arbeit“. */
.nav-menu-aus{color:var(--slate-3);cursor:default;flex-wrap:wrap;column-gap:8px}
.nav-menu-aus small{font-size:12px;letter-spacing:.02em}
/* Fuß des Panels: Methodik, Studien und Quellen, Preise — eine leise Zeile ohne Überschrift. */
.nav-menu-meta{--i:3;display:flex;flex-wrap:wrap;gap:0 8px;margin:8px -8px 0;padding:4px 8px;border-top:1px solid var(--line-2);animation:nav-gruppe-auf .4s cubic-bezier(.215,.61,.355,1) both;animation-delay:calc(.3s + var(--i)*.08s)}
.nav-menu-meta a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:13px;font-weight:500;color:var(--slate);text-decoration:none;border-radius:var(--radius);font-family:var(--sans);transition:background .15s,color .15s}
.nav-menu-meta a:hover{background:var(--bg-soft);color:var(--accent-deep)}
.nav-menu-meta a[aria-current]{color:var(--navy);box-shadow:inset 2px 0 0 var(--accent)}
/* Schließen (per Skript): 220 ms ausblenden, dann erst details zu. */
.nav-menu-zu .nav-menu-panel{animation:nav-panel-zu .22s ease-in both}
.nav-menu-zu .nav-menu-gruppen>*,.nav-menu-zu .nav-menu-meta{animation:none}
@keyframes nav-panel-zu{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
/* Bis 640 px hängt das Panel über die ganze Inhaltsbreite unter dem Kopf (Bezug ist dann der sticky header, .wrap: 20/14 px),
   die Gruppen stehen untereinander, und das Panel scrollt, wenn der Bildschirm niedriger ist als der Inhalt. */
@media(max-width:640px){.nav-right{position:static}.nav-menu-panel{left:20px;right:20px;width:auto;max-width:none;top:100%;max-height:calc(100vh - 70px);overflow:auto}.nav-menu-gruppen{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.nav-menu-panel{left:14px;right:14px}}

@media(min-width:1000px){
  .pr-grid{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
  .pr-tier{padding:28px 28px 26px}
}
@supports (grid-template-rows:subgrid){
  @media(min-width:1000px){
    .pr-tier{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  }
}