@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
/* Vertriebswege – Stylesheet. Farben aus dem Design System „Vertriebswege". */
:root{
  --warmweiss:#F7F6F2; --surface:#FFFFFF; --navy:#172B3A; --navy-2:#26404F; --ink-muted:#526270;
  --orange:#EA7045; --accent-ink:#B8461F; --orange-soft:#FBE3D9; --hellgrau:#E6E8E5; --line-strong:#7C878F;
  --orange-hover:#F08259; --door-dark:#0E1C27; --line-quiet:#9AA5AE; --typ-rot:#A8323E; --typ-gelb:#E2B23A; --typ-gruen:#2F7A54; --typ-blau:#2E6A9E; --error:#B3261E;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--warmweiss);color:var(--navy);font-family:var(--font);font-size:17px;line-height:28px;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}a:hover{color:var(--accent-ink)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
html,body{overflow-x:clip}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}
.muted{color:var(--ink-muted)}
.small{font-size:14px;line-height:22px}
.xs{font-size:13px;line-height:18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Typo */
.display{margin:0;font-size:clamp(52px,8vw,104px);line-height:1;text-wrap:balance;font-weight:900;font-stretch:70%;letter-spacing:-.01em;text-transform:uppercase}
.h2{margin:0;font-size:clamp(40px,5vw,56px);line-height:1;text-wrap:balance;font-weight:900;font-stretch:70%;text-transform:uppercase}
.h3{margin:0;font-size:24px;line-height:30px;font-weight:800}
.lead{font-size:21px;line-height:32px;margin:0}
.num{font-weight:900;font-stretch:70%;line-height:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:4px;border:2px solid transparent;font:inherit;font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn-primary{background:var(--navy);color:var(--warmweiss)}
.btn-primary:hover{background:var(--navy-2);color:var(--warmweiss)}
.btn-accent{background:var(--orange);color:var(--navy)}
.btn-accent:hover{background:var(--orange-hover);color:var(--navy)}
.btn-ghost{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--warmweiss)}
.btn[disabled]{background:var(--hellgrau);color:var(--ink-muted);border-color:var(--hellgrau);cursor:not-allowed}
.link{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--warmweiss);border-bottom:2px solid var(--navy)}
.site-header .wrap{display:flex;align-items:center;gap:12px 28px;min-height:68px;position:relative}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:22px;font-stretch:100%;letter-spacing:-.01em}
.nav{display:flex;gap:4px 24px;margin-left:auto;flex-wrap:wrap;font-size:15px;font-weight:600}
.nav a{text-decoration:none;padding:6px 0}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);transform-origin:left;transform:scaleX(0)}

.header-cta{min-height:44px;padding:0 18px;font-size:15px;gap:8px;white-space:nowrap}
.header-cta[aria-current]{box-shadow:inset 0 0 0 2px var(--navy)}
.menu-btn{display:none;width:44px;height:44px;border:2px solid var(--navy);border-radius:999px;background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:transform .2s,background .2s}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
.menu-icon::before{top:-6px}.menu-icon::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-icon{background:transparent}
.menu-btn[aria-expanded="true"] .menu-icon::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1120px){
  .site-header .wrap{gap:10px}
  .logo{margin-right:auto}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:8px 20px 20px;flex-direction:column;gap:0;background:var(--warmweiss);border-bottom:2px solid var(--navy);box-shadow:0 18px 30px rgba(23,43,58,.12);font-size:20px;font-weight:800}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--hellgrau)}
  .nav a:last-child{border-bottom:0}
}
@media (max-width:480px){.logo{font-size:18px;gap:8px}.logo img{width:28px;height:28px}.header-cta{padding:0 14px;font-size:14px;min-height:40px}.menu-btn{width:40px;height:40px}.site-header .wrap{gap:8px}}

/* Footer */
.site-footer{border-top:1px solid var(--hellgrau);margin-top:0}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;padding-top:32px;padding-bottom:40px;font-size:14px;line-height:22px;color:var(--ink-muted)}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* Views */
[data-view]{display:none}
[data-view].is-active{display:block}

/* Startseite */
.hero{padding:56px 0 80px}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:48px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.door-scene{position:relative;width:100%;max-width:420px;justify-self:center;aspect-ratio:5/8;perspective:1800px;perspective-origin:50% 40%}
.door-frame{position:absolute;inset:0;background:var(--navy);border-radius:6px 6px 0 0}
.door-inside{position:absolute;inset:18px 18px 0 18px;background:var(--door-dark);overflow:hidden}
.door-light{position:absolute;inset:0;background:var(--orange)}
.door-floor{position:absolute;left:0;right:0;bottom:0;height:28%;background:var(--warmweiss);opacity:.18}
.door-person{position:absolute;left:50%;bottom:0;width:22%;height:46%;transform:translateX(-50%);background:var(--navy);border-radius:999px 999px 0 0}
.door{position:absolute;inset:18px 18px 0 18px;background:var(--navy-2);box-shadow:inset 0 0 0 2px var(--navy);transform-origin:left center;backface-visibility:hidden}
.door .panel{position:absolute;left:12%;right:12%;border:2px solid var(--navy);border-radius:4px}
.door .plate-unused{position:absolute;left:50%;top:18%;transform:translateX(-50%);padding:6px 14px;background:var(--warmweiss);color:var(--navy);font-weight:900;font-stretch:70%;font-size:28px;line-height:1;border-radius:2px}
.door .knob{position:absolute;right:9%;top:47%;width:18px;height:18px;border-radius:999px;background:var(--orange)}
.door-step{position:absolute;left:-24px;right:-24px;bottom:-14px;height:14px;background:var(--navy)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:2px solid var(--navy);border-bottom:1px solid var(--hellgrau)}
.stat{padding:28px 24px;display:flex;flex-direction:column;gap:8px}
.stat+.stat{border-left:1px solid var(--hellgrau)}
.stat:first-child{padding-left:0}
.stat .num{font-size:64px}
.mask{display:block;overflow:hidden}.mask>span{display:block}
@media (max-width:560px){.stat+.stat{border-left:0;border-top:1px solid var(--hellgrau)}.stat{padding-left:0}}

.wege{margin-top:96px}
.stage{display:flex;flex-direction:column;justify-content:center;gap:40px;overflow-x:auto;padding-bottom:24px}
.stage-head{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:end;justify-content:space-between}
.wege-meter{flex:0 1 320px;height:2px;background:var(--hellgrau);position:relative}
.wege-bar{position:absolute;inset:0;background:var(--orange);transform-origin:left}
.rail{display:flex;gap:24px;width:max-content;padding:0 32px}
.weg-card{flex:0 0 400px;height:480px;padding:32px;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.weg-card h3{margin:0;font-size:40px;line-height:1;font-weight:900;font-stretch:70%;text-transform:uppercase}
.weg-card p{margin:8px 0 0}
.weg-card .obj{display:block;width:calc(100% + 32px);max-width:none;height:auto;align-self:center;margin:0 -16px}
.weg-card.dark{background:var(--navy);color:var(--warmweiss)}.weg-card.dark p{color:var(--hellgrau)}
.weg-card.accent{background:var(--orange);color:var(--navy)}
.weg-card.light{background:var(--surface);color:var(--navy);border:2px solid var(--navy)}.weg-card.light p{color:var(--ink-muted)}
.weg-card.grey{background:var(--hellgrau);color:var(--navy)}.weg-card.grey p{color:var(--ink-muted)}
@media (max-width:640px){.weg-card{flex-basis:300px;height:420px}.weg-card h3{font-size:34px}}

.display,.h2,.article h1{overflow-wrap:break-word}
@media (max-width:640px){.split,.cta-end{padding-top:80px;padding-bottom:80px}}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px;align-items:start;padding-top:120px;padding-bottom:120px}
.sticky-col{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.track{position:relative;margin:0;padding:0 0 0 32px;list-style:none;display:flex;flex-direction:column;gap:72px}
.track::before,.track::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.track::before{background:var(--hellgrau)}
.track::after{background:var(--orange);transform-origin:top}
.step{display:flex;flex-direction:column;gap:8px}
.step .num{font-size:40px;font-variant-numeric:tabular-nums}
.step p{margin:0;font-size:20px;line-height:30px}
.sticky-col{gap:24px}
.tally{margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy)}
.tally div{padding:16px 16px 0 0;display:flex;flex-direction:column-reverse;gap:6px}
.tally div+div{padding-left:16px;border-left:1px solid var(--hellgrau)}
.tally dt{font-size:14px;line-height:20px;color:var(--ink-muted)}
.tally dd{margin:0;font-size:clamp(32px,4vw,48px);line-height:1;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--navy)}
.tally div:last-child dd{color:var(--accent-ink)}
@media (max-width:760px){.sticky-col{position:static}}

.team-stage{position:relative;height:720px}
.team-frame{position:relative;height:100%;overflow:hidden;background:var(--navy)}
.team-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.team-scrim{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(23,43,58,.92),rgba(23,43,58,0))}
.badge-symbol{position:absolute;top:20px;right:24px;padding:4px 10px;background:rgba(23,43,58,.72);color:var(--warmweiss);font-size:12px;line-height:18px;font-weight:600;border-radius:4px}
.callouts{position:absolute;left:48px;right:48px;bottom:48px;color:var(--warmweiss);display:flex;flex-direction:column;gap:20px}
.callout p:first-child{margin:0;font-size:clamp(32px,4vw,48px);line-height:1;font-weight:900;font-stretch:70%;text-transform:uppercase}
.callout p+p{margin:10px 0 0}
@media (max-width:759px){.team-stage{height:auto}.team-frame{height:auto}.team-img{position:relative;display:block;height:auto;aspect-ratio:4/3}.team-scrim{display:none}.callouts{position:static;padding:32px 20px 40px;gap:28px}.callout{opacity:1!important;transform:none!important}}

.dark-band{background:var(--navy);color:var(--warmweiss)}
.table-wrap{overflow-x:auto}
table.earn{width:100%;min-width:780px;border-collapse:collapse;font-size:16px;line-height:24px}
table.earn th,table.earn td{padding:18px 16px;text-align:left;vertical-align:top}
table.earn th:first-child,table.earn td:first-child{padding-left:0}
table.earn thead th{font-size:14px;border-bottom:2px solid var(--warmweiss);padding-top:12px;padding-bottom:12px}
table.earn tbody tr{border-bottom:1px solid var(--ink-muted)}
table.earn tbody tr:last-child{border-bottom:0}
table.earn tbody th{font-weight:800}

.warn-list{margin:0;padding:0;list-style:none}
.warn-list li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:20px 0;border-top:1px solid var(--hellgrau)}
.warn-list li:first-child{border-top-color:var(--navy)}
.warn-list li:last-child{border-bottom:1px solid var(--hellgrau)}
.warn-list .num{font-size:32px;color:var(--accent-ink)}
.warn-list span+span{font-size:20px;line-height:30px}

.cta-end{display:flex;flex-wrap:wrap;gap:40px;align-items:end;justify-content:space-between;padding-top:120px;padding-bottom:120px}
.mini-door-wrap{position:relative;width:96px;height:150px;perspective:900px;flex:0 0 auto}
.mini-door-wrap .bg{position:absolute;inset:0;background:var(--orange)}
.mini-door{position:absolute;inset:0;background:var(--navy);transform-origin:left center}
.mini-door .knob{position:absolute;right:12px;top:72px;width:10px;height:10px;border-radius:999px;background:var(--orange)}

/* Test */
.test-shell{max-width:880px;margin:0 auto;padding:40px 32px 80px}
@media (max-width:640px){.test-shell{padding:28px 20px 64px}}
.test-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;line-height:16px;font-weight:700;color:var(--ink-muted)}
.bar{height:12px;border-radius:6px;background:var(--hellgrau);overflow:hidden;margin-top:10px}
.bar>span{display:block;height:100%;background:var(--orange);border-radius:6px}
.q-title{margin:28px 0 8px;font-size:clamp(26px,3.4vw,34px);line-height:1.15;font-weight:800}
.q-hint{margin:0 0 24px;color:var(--ink-muted)}
.card{background:var(--surface);border-radius:12px;box-shadow:0 1px 2px rgba(23,43,58,.06),0 8px 24px rgba(23,43,58,.06)}
.block-table{padding:8px 24px}
.block-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hellgrau)}
.block-row:last-child{border-bottom:0}
.block-row.head{font-size:13px;line-height:16px;font-weight:700;color:var(--ink-muted);padding:12px 0}
.block-row.head span:not(:first-child){text-align:center}
.block-row .stmt{font-size:17px;line-height:25px;font-weight:600}
.pick{justify-self:center;width:52px;height:52px;border-radius:999px;border:2px solid var(--line-strong);background:var(--surface);color:var(--navy);font:inherit;font-size:24px;font-weight:900;cursor:pointer}
.pick[aria-pressed="true"].most{background:var(--navy);border-color:var(--navy);color:var(--warmweiss)}
.pick[aria-pressed="true"].least{background:var(--orange-soft);border-color:var(--navy)}
@media (max-width:560px){.block-row{grid-template-columns:minmax(0,1fr) 60px 60px}.pick{width:46px;height:46px}.block-table{padding:4px 14px}}
.options{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:16px 18px;border-radius:12px;border:2px solid var(--hellgrau);background:var(--surface);color:var(--navy);font:inherit;font-size:17px;line-height:25px;cursor:pointer}
.opt:hover{border-color:var(--line-strong)}
.opt[aria-checked="true"]{border-color:var(--navy);background:var(--orange-soft)}
.opt .dot{flex:0 0 22px;height:22px;margin-top:2px;border-radius:999px;border:2px solid var(--line-strong);background:var(--surface)}
.opt[aria-checked="true"] .dot{border:7px solid var(--navy)}
.opt.multi .dot{border-radius:5px}
.opt.multi[aria-checked="true"] .dot{border:2px solid var(--navy);background:var(--navy)}
.likert{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.likert button{min-height:56px;border-radius:10px;border:2px solid var(--hellgrau);background:var(--surface);font:inherit;font-weight:800;font-size:18px;color:var(--navy);cursor:pointer}
.likert button[aria-checked="true"]{background:var(--navy);border-color:var(--navy);color:var(--warmweiss)}
.likert-legend{display:flex;justify-content:space-between;font-size:13px;line-height:18px;color:var(--ink-muted);margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:16px;font-weight:700}
.input{height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--hellgrau);color:var(--navy);font:inherit;font-size:17px;font-weight:400}
.input:focus{outline:2px solid var(--navy);outline-offset:2px}
.test-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.test-nav .hint{font-size:14px;color:var(--ink-muted)}
.intro-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.intro-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--hellgrau)}
.intro-list .num{font-size:28px;color:var(--accent-ink)}

/* Ergebnis */
.result-head{overflow:hidden}
.type-band{display:flex;height:8px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.all-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.all-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 52px;gap:16px;align-items:center;font-size:16px;line-height:22px}
.all-track{display:block;height:10px;border-radius:5px;background:var(--hellgrau);overflow:hidden}
.all-track span{display:block;height:100%;border-radius:5px}
.all-pct{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:560px){.all-row{grid-template-columns:1fr 52px}.all-track{grid-column:1/-1;grid-row:2}}
.colorbar{display:grid;grid-template-columns:64px minmax(0,1fr) 36px;gap:12px;align-items:center;font-size:14px;line-height:20px}
.colorbar .track-x{height:12px;border-radius:6px;background:var(--hellgrau);overflow:hidden}
.colorbar .track-x span{display:block;height:100%;border-radius:6px}
.chip{display:inline-block;padding:4px 12px;border-radius:6px;font-size:13px;line-height:20px;font-weight:800}
.box{background:var(--surface);border:1px solid var(--hellgrau);border-radius:12px;padding:28px}
.box h3{margin:0 0 10px;font-size:20px;line-height:28px;font-weight:800}
.box ul{margin:0;padding-left:20px}
.path{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;background:var(--surface);border:1px solid var(--hellgrau);border-radius:12px;padding:24px 28px}
.path.top{border:2px solid var(--navy)}
.path .pct{flex:0 0 104px;display:flex;flex-direction:column}
.path .pct b{font-size:42px;line-height:1;font-weight:900;font-stretch:70%;color:var(--accent-ink)}
.path .body{flex:1 1 360px;min-width:0}
.path h3{margin:0 0 4px;font-size:22px;line-height:30px;font-weight:800}
.path p{margin:0;color:var(--ink-muted)}
.note{background:var(--orange-soft);border-radius:12px;padding:24px 28px}
.note h3{margin:0 0 8px;font-size:20px;line-height:28px}
.note ul{margin:0;padding-left:20px}
.lead-box{background:var(--navy);color:var(--warmweiss);border-radius:12px;padding:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px}
.lead-box .field{color:var(--warmweiss)}
.consent{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:10px;background:var(--warmweiss);color:var(--navy);font-size:14px;line-height:22px;cursor:pointer}
.consent input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--navy)}
@media (max-width:640px){.lead-box{padding:28px 20px}}

/* Ratgeber */
.article{max-width:760px;margin:0 auto;padding:56px 32px 96px}
@media (max-width:640px){.article{padding:36px 20px 72px}}
.article h1{margin:24px 0 20px;font-size:clamp(40px,6vw,64px);line-height:1;text-wrap:balance;font-weight:900;font-stretch:70%;text-transform:uppercase}
.article h2{margin:48px 0 12px;font-size:30px;line-height:34px;font-weight:900;font-stretch:80%}
.article h3{margin:28px 0 8px;font-size:20px;line-height:28px;font-weight:800}
.article p,.article li{font-size:18px;line-height:30px}
.article ul,.article ol{padding-left:22px}
.article table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px;margin:16px 0}
.article th,.article td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--hellgrau);vertical-align:top}
.article thead th{border-bottom:2px solid var(--navy);font-size:14px}
.callout-box{border-left:0;background:var(--surface);border:1px solid var(--hellgrau);border-radius:12px;padding:20px 24px;margin:24px 0}
.sources{margin-top:56px;padding-top:20px;border-top:2px solid var(--navy);font-size:14px;line-height:22px;color:var(--ink-muted)}
.sources ol{padding-left:20px}
.sources li{font-size:14px;line-height:22px;margin-bottom:6px;word-break:break-word}
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border-top:2px solid var(--navy)}
.hub a{display:flex;flex-direction:column;gap:10px;padding:32px 24px 32px 0;text-decoration:none;border-bottom:1px solid var(--hellgrau)}
.hub a:hover h2{color:var(--accent-ink)}
.hub h2{margin:0;font-size:34px;line-height:1;font-weight:900;font-stretch:70%;text-transform:uppercase}
.hub p{margin:0;color:var(--ink-muted)}
.check{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--hellgrau);cursor:pointer;font-size:18px;line-height:28px}
.check input{width:24px;height:24px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--accent-ink)}
.check-result{position:sticky;bottom:16px;margin-top:24px;padding:20px 24px;border-radius:12px;background:var(--navy);color:var(--warmweiss);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.check-result b{font-size:40px;line-height:1;font-weight:900;font-stretch:70%;color:var(--orange)}

/* ---------- Scroll-Animationen (nur wo unterstützt) ---------- */
@supports (animation-timeline: view()) {
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}

  .hero{view-timeline-name:--hero}
  .hero-text{animation:hero-out linear both;animation-timeline:view();animation-range:exit 10% exit 70%}
  @keyframes hero-out{to{opacity:0;transform:translateY(-56px)}}
  .door{animation:door-open linear both;animation-timeline:--hero;animation-range:exit 0% exit 55%}
  @keyframes door-open{from{transform:rotateY(0)}to{transform:rotateY(-74deg)}}
  .door-light{animation:light-on linear both;animation-timeline:--hero;animation-range:exit 0% exit 55%}
  @keyframes light-on{from{opacity:.15}to{opacity:1}}
  .door-scene{animation:scene linear both;animation-timeline:--hero;animation-range:exit 0% exit 70%}
  @keyframes scene{to{transform:scale(1.08) translateY(24px)}}

  .rise{animation:rise linear both;animation-timeline:view()}
  .rise.d1{animation-range:entry 10% cover 30%}
  .rise.d2{animation-range:entry 25% cover 38%}
  .rise.d3{animation-range:entry 40% cover 46%}
  @keyframes rise{from{transform:translateY(105%)}to{transform:none}}
  .fade{animation:fade linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  @keyframes fade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  @media (min-width:760px){
    .wege{height:2600px;view-timeline-name:--wege}
    .stage{position:sticky;top:70px;height:760px;overflow:hidden;padding-bottom:0}
    .rail{animation:rail linear both;animation-timeline:--wege;animation-range:contain 0% contain 100%}
    @keyframes rail{to{transform:translateX(calc(-100% + min(100vw,1440px)))}}
    .obj{animation:obj linear both;animation-timeline:--wege;animation-range:contain 0% contain 100%}
    @keyframes obj{from{transform:translateY(18px) scale(.94)}to{transform:translateY(-8px) scale(1.04)}}
    .wege-bar{animation:barx linear both;animation-timeline:--wege;animation-range:contain 0% contain 100%}
    @keyframes barx{from{transform:scaleX(.08)}to{transform:scaleX(1)}}

    .team{height:2100px;view-timeline-name:--team}
    .team-stage{position:sticky;top:70px;height:calc(100svh - 70px);max-height:820px}
    .team-frame{animation:frame linear both;animation-timeline:--team;animation-range:contain 0% contain 30%}
    @keyframes frame{from{clip-path:inset(10% 16% round 24px)}to{clip-path:inset(0 0 round 0)}}
    .team-img{animation:zoom linear both;animation-timeline:--team;animation-range:contain 0% contain 100%}
    @keyframes zoom{from{transform:scale(1.25)}to{transform:scale(1)}}
    .callouts{display:block;bottom:56px}
    .callout{position:absolute;left:0;bottom:0;max-width:600px;opacity:0;animation:callout linear both;animation-timeline:--team}
    .callout.c1{animation-range:contain 28% contain 52%}
    .callout.c2{animation-range:contain 50% contain 74%}
    .callout.c3{animation-range:contain 72% contain 100%}
    @keyframes callout{0%{opacity:0;transform:translateY(32px)}20%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-32px)}}
  }

  .track{view-timeline-name:--abend}
  .track::after{animation:fill linear both;animation-timeline:--abend;animation-range:entry 50% exit 50%}
  @keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .step{animation:lit linear both;animation-timeline:view();animation-range:cover 10% cover 50%}
  @keyframes lit{from{opacity:.35}to{opacity:1}}

  .expand{animation:expand linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes expand{from{clip-path:inset(0 5% round 24px)}to{clip-path:inset(0 0 round 0)}}
  .row-in{animation:fade linear both;animation-timeline:view();animation-range:entry 30% cover 35%}
  .slide{animation:slide linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  @keyframes slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
  .grow-in{animation:grow-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%;transform-origin:left bottom}
  @keyframes grow-in{from{opacity:.2;transform:scale(.86)}to{opacity:1;transform:none}}
  .mini-door{animation:mini linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
  @keyframes mini{to{transform:rotateY(-60deg)}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .track::after{transform:scaleY(1)}
  .callout{position:static;opacity:1}
}

.btn-big{min-height:60px;padding:0 30px;font-size:19px;gap:10px;box-shadow:0 6px 0 var(--navy)}
.btn-big:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--navy)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;line-height:18px;font-weight:600;color:var(--navy)}
a.door-scene{display:block;text-decoration:none;container-type:inline-size;color:inherit}
.door .panel{display:flex;flex-direction:column;justify-content:center;padding:0 8%;color:var(--warmweiss)}
.door-top{flex-direction:row!important;align-items:center;justify-content:flex-start!important;gap:5cqw}
.door-top b{font-size:24cqw;line-height:.8;font-weight:900;font-stretch:75%;color:var(--orange)}
.door-top span{font-size:5cqw;line-height:1.2;font-weight:700}
.door-bottom{gap:2.5cqw}
.door-bottom span{display:grid;grid-template-columns:12cqw 1fr;align-items:center;font-size:5.2cqw;line-height:1.15;font-weight:600;color:var(--hellgrau)}
.door-bottom b{font-size:8cqw;font-weight:900;font-stretch:75%;color:var(--warmweiss)}
.door-hint{position:absolute;left:12%;bottom:3%;font-size:4.2cqw;font-weight:800;color:var(--orange);letter-spacing:.02em}
.door-reveal{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:9cqw;font-weight:900;font-stretch:75%;text-transform:uppercase;color:var(--navy)}
a.door-scene:hover .door{transform:rotateY(-14deg);transition:transform .4s}
@media (max-width:760px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-big{width:100%}
  .door-scene{max-width:340px}
}

/* Tagesablauf auf dem Handy: kompakt, Zeit links, Text rechts */
.step{position:relative}
.step::before{content:"";position:absolute;left:-39px;top:14px;width:16px;height:16px;border-radius:999px;background:var(--warmweiss);border:3px solid var(--orange)}
@media (max-width:760px){
  .split{gap:28px}
  .sticky-col{gap:14px}
  .tally{margin-top:8px}
  .tally div{padding:12px 10px 0 0}
  .tally div+div{padding-left:10px}
  .tally dd{font-size:28px}
  .tally dt{font-size:12px;line-height:16px}
  .track{gap:0;padding-left:26px}
  .step{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--hellgrau)}
  .step:last-child{border-bottom:0}
  .step::before{left:-33px;top:22px;width:12px;height:12px;border-width:3px}
  .step .num{font-size:22px;line-height:28px}
  .step p{font-size:16px;line-height:24px}
}

/* Mitlaufender Test-Punkt unten rechts */
.fab{position:fixed;right:18px;bottom:18px;z-index:40;width:68px;height:68px;border-radius:999px;background:var(--orange);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-weight:900;font-size:13px;line-height:14px;box-shadow:0 10px 24px rgba(23,43,58,.3);transform:scale(.4);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.fab svg{position:absolute;inset:-5px;width:78px;height:78px;transform:rotate(-90deg)}
.fab .ring-bg{fill:none;stroke:rgba(23,43,58,.12);stroke-width:3}
.fab .ring{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-dasharray:232.5;stroke-dashoffset:232.5}
.fab .fab-arrow{font-size:20px;line-height:18px}
.fab:hover{background:var(--orange-hover)}
.fab:focus-visible{outline:3px solid var(--navy);outline-offset:6px}
body.show-fab .fab{transform:scale(1);opacity:1;pointer-events:auto}
@media (max-width:480px){.fab{right:14px;bottom:14px;width:62px;height:62px}.fab svg{width:72px;height:72px}}
@media (prefers-reduced-motion: reduce){.fab{transition:none}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Vollanalyse: Vorschau mit Schloss */
.voll{background:var(--navy);color:var(--warmweiss);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:24px}
.voll .kicker{color:var(--orange)}
.voll .h2{color:var(--warmweiss)}
.voll-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.voll-price{background:var(--orange);color:var(--navy);border-radius:10px;padding:14px 18px;text-align:center;display:flex;flex-direction:column}
.voll-price b{font-size:34px;line-height:1;font-weight:900}
.lock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.lock-card{background:rgba(247,246,242,.06);border:1px solid rgba(247,246,242,.14);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.lock-head{display:flex;gap:12px;align-items:flex-start}
.lock-head div{display:flex;flex-direction:column;gap:2px}
.lock-head .muted{color:var(--hellgrau)!important}
.lock-ico{flex:0 0 auto;margin-top:2px;color:var(--orange)}
.lock-blur{margin:0;font-size:14px;line-height:21px;filter:blur(4px);user-select:none;color:var(--hellgrau)}
.voll-form{display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(247,246,242,.18);padding-top:20px}
.voll-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.voll .field{color:var(--warmweiss)}
.voll .muted{color:var(--hellgrau)!important}
.voll .btn-ghost{border-color:var(--warmweiss);color:var(--warmweiss)}
.voll-done{margin:0;padding:16px;border-radius:8px;background:rgba(234,112,69,.16)}
.consent.consent-light{background:rgba(247,246,242,.08);color:var(--warmweiss)}
@media (max-width:640px){.voll{padding:24px 18px}.voll-top{grid-template-columns:1fr}.voll-price{flex-direction:row;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:center}.voll-row{grid-template-columns:1fr}}

/* Bericht */
.report{max-width:760px}
.report h1{font-size:clamp(36px,6vw,56px);line-height:1;font-weight:900;font-stretch:75%;text-transform:uppercase;margin:8px 0 12px}
.report h2{font-size:28px;line-height:1.1;font-weight:900;margin:40px 0 12px;padding-top:20px;border-top:2px solid var(--navy)}
.report h3{font-size:20px;margin:24px 0 8px}
.report p,.report li{font-size:17px;line-height:28px}
.rep-scale{margin:18px 0}
.rep-scale-head{display:flex;justify-content:space-between;margin-bottom:6px}
.rep-scale p{margin:8px 0 0}
@media print{
  .site-header,.site-footer,.fab,.test-nav,.skip{display:none!important}
  body{background:var(--surface)}
  .test-shell{padding:0!important;max-width:none}
  .report h2{break-after:avoid}
}

/* Bericht: Deckblatt und Druck */
.rep-cover{background:var(--navy);color:var(--warmweiss);border-radius:12px;overflow:hidden;margin-bottom:12px}
.rep-band{display:flex;height:12px}
.rep-cover-in{padding:28px 28px 24px}
.rep-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--hellgrau)}
.rep-cover h1{color:var(--warmweiss);margin:18px 0 6px}
.rep-sub{margin:0;color:var(--hellgrau)}
.rep-cover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;margin-top:24px}
.rep-label{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--orange)}
.rep-cbar{display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:10px;align-items:center;font-size:14px;margin:6px 0}
.rep-cbar .all-track{background:rgba(247,246,242,.15)}
.rep-cbar b{text-align:right}
.rep-top{list-style:none;margin:0;padding:0;counter-reset:t}
.rep-top li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(247,246,242,.15);font-size:15px;line-height:21px}
.rep-top li b{color:var(--orange);white-space:nowrap}
.rep-toc{margin:20px 0 0;font-size:13px;line-height:20px;color:var(--hellgrau)}
.report > h2{counter-increment:none}
.report ul li{margin:4px 0}
@media print{
  @page{size:A4;margin:16mm 14mm}
  .rep-cover,.rep-band span,.all-track span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .report{max-width:none}
  .report h2{break-after:avoid}
  .report h3,.rep-kunde,.rep-scale,.rep-box{break-inside:avoid}
  .rep-glance{break-after:page}
  .report p,.report li{font-size:11.5pt;line-height:1.5}
}
.rep-glance{margin:12px 0 0;padding:24px 28px;border:2px solid var(--navy);border-radius:12px}
.report h2.rep-glance-h{margin:0 0 12px;padding:0;border:0;font-size:22px}
.rep-glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px 28px}
.rep-glance-grid ul{margin:0;padding-left:18px}
.rep-glance-grid p{margin:0}
.rep-kunde{border-left:6px solid;padding:10px 14px;margin:12px 0;background:var(--surface);border-radius:0 8px 8px 0}
.rep-train{background:var(--orange-soft);padding:8px 12px;border-radius:6px}
.rep-box{background:var(--surface);border:1px solid var(--hellgrau);border-radius:10px;padding:16px 18px;margin:16px 0}
.rep-box p{margin:0}
.rep-box .rep-label{margin-bottom:6px;color:var(--accent-ink)}
.report .rep-label{color:var(--accent-ink)}
.rep-cover .rep-label{color:var(--orange)}
.rep-nicht{border:1px solid var(--hellgrau);border-left:6px solid var(--line-quiet);border-radius:0 10px 10px 0;padding:14px 18px;margin:14px 0;background:var(--surface);break-inside:avoid}
.rep-nicht p{margin:0 0 6px}
.rep-nicht p:last-child{margin:0}
.rep-nicht-h{font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:12px}
.rep-nicht-h span{color:var(--accent-ink)}
/* SEO-Ergänzungen: Dachzeile, Autorenzeile, Weiterlesen */
.article .byline{margin:-8px 0 24px;font-size:14px;line-height:22px;color:var(--ink-muted)}
.article .byline a{color:inherit}
.more{margin-top:56px;padding-top:20px;border-top:2px solid var(--navy)}
.more h2{margin:0 0 8px;font-size:22px;line-height:28px}
.more ul{list-style:none;margin:0;padding:0}
.more li{border-bottom:1px solid var(--hellgrau);font-size:18px;line-height:28px}
.more li a{display:block;padding:14px 0;font-weight:700;text-decoration:none}
.more li a:hover{color:var(--accent-ink)}
.more .btn{margin-top:24px}
.crumbs{margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.crumbs a{color:inherit}
/* Ergebnis teilen */
.share{margin-top:32px;padding:24px;display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center}
.share-canvas{width:150px;height:auto;aspect-ratio:9/16;border-radius:10px;display:block;background:var(--navy)}
.share-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.share-body h2{margin:0;font-size:28px;line-height:32px;font-weight:900;font-stretch:80%}
.share-body p{margin:0}
.share-actions{display:flex;flex-wrap:wrap;gap:10px}
.share-actions .btn{min-height:46px;padding:0 18px;font-size:16px}
.share-status{min-height:22px;word-break:break-word}
@media (max-width:560px){.share{grid-template-columns:1fr;justify-items:center;text-align:center}.share-canvas{width:200px}.share-actions{justify-content:center}}
@media print{.share{display:none!important}}
/* Typ-Seiten */
.typ-band{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:0 0 20px}
.typ-band span{flex:1}
.article .chip{margin-right:6px}
/* Feinschliff: Zustände und Browser-Flächen in der Palette */
.btn:active{transform:translateY(1px)}
.btn-big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--navy)}
.article>h1:first-child{margin-top:0}
.article p,.lead{text-wrap:pretty}
::selection{background:var(--orange);color:var(--navy)}
html{caret-color:var(--accent-ink);scrollbar-color:var(--line-strong) var(--warmweiss)}
/* Partner im Kontaktformular */
.partner{display:flex;gap:12px;align-items:center;margin-top:8px;padding:10px 14px;border-radius:10px;background:var(--warmweiss);color:var(--navy)}
.partner img{flex:0 0 auto;width:40px;height:auto}
.partner strong{font-size:16px;line-height:22px}
.partner p{margin:0;font-size:13px;line-height:18px}
.partner a{color:inherit;font-weight:700}
/* Brutto-Netto-Rechner */
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start;margin-bottom:24px}
.rechner-form{display:flex;flex-direction:column;gap:18px}
.rechner-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end}
.rechner-form select.input{appearance:auto}
.rechner-haken{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px}
.rechner-haken label{display:flex;gap:10px;align-items:center;cursor:pointer}
.rechner-haken input{width:20px;height:20px;margin:0;accent-color:var(--navy)}
.rechner-ergebnis{padding:28px;position:sticky;top:96px}
.rechner-netto{margin:0 0 20px;display:flex;flex-direction:column;gap:4px}
.rechner-netto b{font-size:clamp(44px,6vw,72px);line-height:1;font-weight:900;font-stretch:70%;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.rechner-netto span{font-size:15px;line-height:22px;color:var(--ink-muted)}
.rechner-tab{width:100%;border-collapse:collapse;font-size:15px;line-height:22px;font-variant-numeric:tabular-nums}
.rechner-tab th,.rechner-tab td{padding:9px 0;border-bottom:1px solid var(--hellgrau);text-align:left;font-weight:400}
.rechner-tab td,.rechner-tab thead th+th{text-align:right;white-space:nowrap;padding-left:12px}
.rechner-tab thead th{font-size:13px;color:var(--ink-muted);border-bottom:2px solid var(--navy)}
.rechner-tab th span{display:block;font-size:12px;line-height:16px;color:var(--ink-muted)}
.rechner-tab .sum th,.rechner-tab .sum td{font-weight:800;border-bottom:2px solid var(--navy)}
.rechner-tab .total th,.rechner-tab .total td{font-size:18px;border-bottom:0;padding-top:12px}
@media (max-width:820px){.rechner{grid-template-columns:minmax(0,1fr)}.rechner-ergebnis{position:static;padding:20px}}
@media (max-width:420px){.rechner-zwei{grid-template-columns:minmax(0,1fr)}}
.rechner [hidden]{display:none!important}
.rechner-wahl{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:22px}
.rechner-wahl legend{padding:0 0 6px;font-size:13px;line-height:16px;font-weight:700}
.rechner-wahl label{display:flex;gap:10px;align-items:center;cursor:pointer}
.rechner-wahl input{width:20px;height:20px;margin:0;accent-color:var(--navy)}
.rechner-hinweis{font-weight:400;color:var(--ink-muted);line-height:18px}
.rechner-tab td:nth-child(2){color:var(--ink-muted)}
.rechner-tab tbody tr:last-child th,.rechner-tab tbody tr:last-child td{font-weight:800;font-size:18px;border-bottom:0;padding-top:12px}
.rechner-tab tbody tr:last-child td:nth-child(2){font-weight:400;font-size:15px}
/* Häufige Fragen, Quellen-Links */
.faq{margin-top:48px}
.sources a{color:inherit}
.sources a:hover{color:var(--accent-ink)}