/* Schrift lokal eingebunden (kein Abruf bei Google Fonts) */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#faf6f1; --surface:#ffffff; --ink:#2b2622; --muted:#7a6f66; --line:#eadfd3;
  --accent:#00838a; --accent-2:#19c3c0; --accent-ink:#ffffff; --good:#1b8a3a; --bad:#c9341d; --track:#ede4d9; --soft:#f6efe7;
  --warm:#ff8a65; --warm-dark:#e8693f; --warm-soft:#ffe8dd; --sun:#ffc94d;
  --hill-1:#cdeee6; --hill-2:#a9e2d6; --road:#e9e1d7; --road-line:#ffffff;
  --car:#c9bfb4; --car-ev:#19c3c0; --car-hyb:#3b82f6; --car-ben:#e08a00; --car-die:#7a6f66; --car-own:#8e5bd8;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141110; --surface:#1f1b18; --ink:#f6efe7; --muted:#b0a59a; --line:#3a332d;
  --accent:#3dd6d0; --accent-2:#3dd6d0; --accent-ink:#00302f; --good:#34c759; --bad:#ff6b57; --track:#3a3530; --soft:#2a2521; --car:#5a524b;
  --warm:#ff8a65; --warm-dark:#e8693f; --warm-soft:#3a2620; --hill-1:#1f3a36; --hill-2:#18302c; --road:#2e2a26; --road-line:#57504a;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141110; --surface:#1f1b18; --ink:#f6efe7; --muted:#b0a59a; --line:#3a332d;
  --accent:#3dd6d0; --accent-2:#3dd6d0; --accent-ink:#00302f; --good:#34c759; --bad:#ff6b57; --track:#3a3530; --soft:#2a2521; --car:#5a524b;
  --warm:#ff8a65; --warm-dark:#e8693f; --warm-soft:#3a2620; --hill-1:#1f3a36; --hill-2:#18302c; --road:#2e2a26; --road-line:#57504a;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:600;font-size:19px;letter-spacing:-.02em;border:0;background:none;padding:0;cursor:pointer}
.logo span{color:var(--muted);font-weight:400}
.flags{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:999px}
.flags button{border:0;background:transparent;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted)}
.nav-r{display:flex;gap:10px;align-items:center}
.theme{border:0;background:var(--soft);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.flags button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.btn{border:0;border-radius:999px;padding:12px 24px;font-weight:500;font-size:15px;cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.btn.plain{background:transparent;color:var(--accent);padding-left:0;padding-right:0}
.btn.small{padding:7px 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}

/* Intro */
.intro{max-width:980px;margin:0 auto;padding:12vh 22px 60px;text-align:center}
.intro h1{font-size:clamp(38px,6.4vw,72px);line-height:1.04;letter-spacing:-.04em;font-weight:600;margin:0 auto 20px;max-width:14ch}
.intro p{font-size:clamp(17px,1.8vw,22px);color:var(--muted);max-width:44ch;margin:0 auto 32px}
.intro .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.intro-cars{display:flex;justify-content:center;gap:clamp(8px,3vw,36px);margin-top:56px;flex-wrap:wrap}
.intro-cars svg{width:clamp(120px,18vw,190px);height:auto}

/* Wizard */
.wiz{max-width:640px;margin:0 auto;padding:48px 22px 140px}
.progress{display:flex;gap:6px;margin-bottom:28px}
.progress i{flex:1;height:4px;border-radius:4px;background:var(--track)}
.progress i.on{background:var(--accent-2)}
.wiz .count{color:var(--muted);font-size:14px;margin:0 0 6px}
.wiz h2{font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0 0 10px}
.wiz .lead{color:var(--muted);font-size:17px;margin:0 0 26px}
.card{background:var(--surface);border-radius:22px;padding:8px 24px}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px}
.live{margin-top:22px;text-align:center;color:var(--muted);font-size:14px}
.live strong{color:var(--ink);font-weight:600}

/* Rows */
.row{padding:16px 0;border-top:1px solid var(--line)}
.card>.row:first-child,.card>.field:first-child,.group-body>.row:first-child{border-top:0}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.row-head label{font-weight:500;font-size:15px}
.num{display:flex;align-items:center;gap:6px;background:var(--soft);border-radius:10px;padding:4px 10px}
.num input{width:84px;border:0;background:transparent;text-align:right;font-weight:600;font-size:15px;-moz-appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num span{color:var(--muted);font-size:13px;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(var(--accent-2),var(--accent-2)) 0/var(--p,50%) 100% no-repeat,var(--track)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--track)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--accent-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;margin-top:-10px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.06)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
details.help summary{cursor:pointer;color:var(--accent);font-size:13px;list-style:none;display:inline-block}
details.help summary::-webkit-details-marker{display:none}
details.help p{margin:8px 0 2px;font-size:14px;color:var(--muted);background:var(--soft);border-radius:12px;padding:12px 14px}
.field{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-top:1px solid var(--line)}
.field>label,.field>span{font-weight:500;font-size:15px}
select,input[type=text]{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;font-size:15px;width:100%}
.seg{display:flex;background:var(--soft);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 6px;font-size:14px;font-weight:500;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Results */
.res{max-width:1180px;margin:0 auto;padding:44px 22px 140px}
.summary{text-align:center;margin-bottom:30px}
.summary .kicker{color:var(--muted);font-size:16px;margin:0}
.summary .big{font-size:clamp(52px,8vw,88px);font-weight:600;letter-spacing:-.045em;line-height:1.02;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.summary .big.good{color:var(--good)}
.summary .verdict{font-size:18px;max-width:46ch;margin:0 auto;color:var(--ink)}

.cmp-wrap{background:var(--surface);border-radius:24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{display:grid;min-width:max-content}
.cmp .c{padding:12px 16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;display:flex;align-items:center}
.cmp .lab{position:sticky;left:0;background:var(--surface);z-index:1;color:var(--muted);font-size:14px}
.cmp .head{border-top:0;flex-direction:column;align-items:stretch;gap:6px;padding-top:20px;padding-bottom:16px}
.cmp .head svg{width:100%;height:auto;max-width:210px;margin:0 auto 4px;display:block}
.cmp .name{font-weight:600;font-size:15px;line-height:1.3;min-height:2.6em}
.pill{align-self:flex-start;font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--muted)}
.pill.best{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.cmp select{font-size:13px;padding:7px 9px;border-radius:10px}
.cmp .cost{font-size:26px;font-weight:600;letter-spacing:-.02em}
.cmp .best-col{background:color-mix(in srgb,var(--good) 6%,var(--surface))}
.good{color:var(--good)} .bad{color:var(--bad)}
.cmp .links{flex-direction:column;align-items:flex-start;gap:6px}
.toggle-rows{display:block;margin:14px auto 0}
.ai-out{margin-top:6px;background:var(--soft);border-radius:12px;padding:10px 12px;font-size:13px;white-space:pre-wrap;max-width:230px}

.interest{margin-top:22px}
.interest p{font-size:15px;color:var(--ink);max-width:70ch}
.interest strong{font-weight:600}
.int-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.int-item{background:var(--soft);border-radius:14px;padding:12px 14px}
.int-name{font-size:13px;color:var(--muted)}
.int-fig{font-size:20px;font-weight:600;margin:2px 0}
.int-sub{font-size:12.5px;color:var(--muted)}
.int-note{margin-top:14px!important;color:var(--muted)!important;font-size:14px!important}
.split{display:block;font-size:15px;color:var(--muted);margin-top:8px}
.split strong{color:var(--ink);font-weight:600}
.rng{font-size:12px;color:var(--muted)}
.focus-btn{border:0;background:none;color:var(--accent);font-size:13px;padding:2px 0;cursor:pointer;text-align:left}
.focus-btn.on{color:var(--muted);cursor:default}
.own-add{text-align:center;margin-top:6px}
.pay,.etfp{margin-top:22px}
.pay p,.etfp p{font-size:15px;color:var(--ink);max-width:72ch}
.pc-grid{display:grid;gap:12px;margin-top:16px;overflow-x:auto}
.pc{background:var(--soft);border-radius:16px;padding:16px 18px;border:2px solid transparent}
.pc.win{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 8%,var(--surface))}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-name{font-weight:600;font-size:17px}
.pc-big{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:8px 0 10px;font-variant-numeric:tabular-nums}
.pc-big small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0}
.pc dl{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:0;font-size:13.5px}
.pc dt{color:var(--muted)} .pc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.pc-l{font-size:12.5px;color:var(--muted);margin-top:10px}
.pc-sum{margin-top:14px!important}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.sc{background:var(--soft);border-radius:16px;padding:16px 18px}
.sc.e{background:color-mix(in srgb,var(--accent-2) 10%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent-2)}
.sc-l{font-weight:600}
.sc-n{font-size:12.5px;color:var(--muted)}
.sc-v{font-size:26px;font-weight:600;margin:8px 0 2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sc-g{font-size:13px}
.sc-note{font-size:13px!important;color:var(--muted)!important;margin-top:14px!important}
.hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.cmp .head[data-focus]{cursor:pointer;border-radius:0}
.cmp .head[data-focus]:hover{background:color-mix(in srgb,var(--accent-2) 6%,var(--surface))}
.cmp .head.sel{box-shadow:inset 0 3px 0 var(--accent-2);background:color-mix(in srgb,var(--accent-2) 9%,var(--surface))}
.focus-btn{color:var(--accent);font-size:13px}
.money{margin-top:22px}
.mb-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mb-head svg{width:150px;height:auto}
.mb-k{margin:0!important;font-size:13px!important;color:var(--muted)!important}
.mb-head h3{font-size:24px;margin:0}
.mb-s{margin:2px 0 0!important;color:var(--muted)!important;font-size:14px!important}
.mb-ctrl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 28px;margin-top:10px}
@media (max-width:700px){.mb-ctrl{grid-template-columns:1fr}}
.mb-ctrl .row{border-top:1px solid var(--line)}
.mb-t{margin-top:22px!important}
.mb-src{font-size:15px!important;color:var(--ink)!important}
.mb-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.mb-case{background:var(--soft);border-radius:16px;padding:16px 18px;border:2px solid transparent}
.mb-case.win{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 8%,var(--surface))}
.mb-ct{display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:600;font-size:15px;margin-bottom:10px}
.flow{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--track)}
.flow i{display:block;height:100%}
.f-car,.d-car{background:var(--car-die)} .f-inv,.d-inv{background:var(--accent-2)}
.flow-l{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);margin:6px 0 10px;flex-wrap:wrap}
.flow-l b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.mb-dl{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:0;font-size:13.5px}
.mb-dl dt{color:var(--muted)} .mb-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.mini{height:4px;border-radius:3px;background:var(--track);margin-top:6px;overflow:hidden}
.mini i{display:block;height:100%}
.good-b{background:var(--good)} .bad-b{background:var(--bad)}
.mb-w{font-size:13px;margin:0 0 8px}
.mb-sense{margin-top:16px!important;font-size:16px!important;color:var(--ink)!important}
.mb-case.dim{opacity:.72}
.muted{color:var(--muted)}
.mb-end{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.mb-end span{font-size:13.5px;font-weight:500;line-height:1.3}
.mb-end small{color:var(--muted);font-weight:400;font-size:12px}
.mb-end strong{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.final{margin-top:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent-2) 12%,var(--surface)),var(--surface) 60%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-2) 55%,transparent)}
.fin-grid{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:28px;align-items:center}
@media (max-width:760px){.fin-grid{grid-template-columns:1fr}}
.fin-car svg{width:100%;height:auto}
.fin-name{font-size:clamp(26px,3.4vw,36px)!important;letter-spacing:-.03em;margin:0 0 4px!important}
.fin-sub{color:var(--muted)!important;margin:0 0 16px!important}
.fin-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fin-facts div{background:var(--surface);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:0 0 0 1px var(--line)}
.fin-facts span{font-size:12.5px;color:var(--muted)}
.fin-facts strong{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.fin-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.fin-disc{font-size:12px!important;color:var(--muted)!important;margin-top:10px!important}
.reco{margin-top:22px}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.rc-base{font-size:14px;color:var(--muted)}
.rc-base strong{color:var(--ink)}
.rc-txt{font-size:16px!important;color:var(--ink)!important;max-width:78ch;line-height:1.6}
.rc-list{display:flex;flex-direction:column;gap:6px;margin-top:16px;overflow-x:auto}
.rc-row{display:grid;grid-template-columns:28px 86px minmax(150px,1.3fr) minmax(150px,1fr) 130px 120px;gap:12px;align-items:center;background:var(--soft);border:2px solid transparent;border-radius:14px;padding:10px 14px;text-align:left;cursor:pointer;min-width:700px;width:100%}
.rc-row:hover{border-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}
.rc-row.top{background:color-mix(in srgb,var(--accent-2) 10%,var(--surface));border-color:var(--accent-2)}
.rc-row.sel{box-shadow:0 0 0 2px var(--accent) inset}
.rc-row.ref{cursor:default;background:transparent;border:1px dashed var(--line)}
.rc-rank{font-weight:600;font-size:18px;color:var(--muted);text-align:center}
.rc-row.top .rc-rank{color:var(--accent)}
.rc-car svg{width:86px;height:auto;display:block}
.rc-name{font-weight:600;font-size:14.5px;line-height:1.3}
.rc-name small,.rc-num small,.rc-bar small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.rc-track{display:block;height:8px;border-radius:5px;background:var(--track);overflow:hidden;margin-bottom:4px}
.rc-track i{display:block;height:100%;border-radius:5px}
.rc-track i.pos{background:var(--accent-2)} .rc-track i.neg{background:var(--bad)}
.rc-num{text-align:right;font-variant-numeric:tabular-nums}
.rc-num strong{font-size:16px;font-weight:600}
.export{margin-top:22px}
.export p{font-size:15px;color:var(--ink);max-width:72ch}
.ex-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ex-prev summary{cursor:pointer;color:var(--accent);font-size:14px;margin-top:6px;list-style:none}
.ex-prev summary::-webkit-details-marker{display:none}
.ex-prev textarea{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft);color:var(--ink);resize:vertical}
.pill.warn{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);margin-left:4px}
.pill.est{background:color-mix(in srgb,var(--car-ben) 18%,transparent);color:#9a5b00;font-size:11px}
.pill.ok{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);font-size:11px}
:root[data-theme="dark"] .pill.est{color:#ffb84d}
.mb-warn{margin:12px 0 0;padding:12px 16px 12px 32px;background:color-mix(in srgb,var(--car-ben) 10%,var(--surface));border-radius:12px;font-size:14px;line-height:1.5}
.mb-warn li+li{margin-top:6px}
.vs{margin-top:22px}
.vs-sum{font-size:16px!important;color:var(--ink)!important;margin:6px 0 14px!important}
.vs-same{font-size:14px!important;color:var(--muted)!important}
.vs-wrap{overflow-x:auto}
.vs-grid{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(140px,1fr) minmax(140px,1fr) minmax(170px,1fr);min-width:640px;align-items:center}
.vs-grid>div{padding:10px 12px;border-top:1px solid var(--line)}
.vs-grid>div:nth-child(-n+4){border-top:0}
.vs-h{display:flex;flex-direction:column;gap:4px;align-items:flex-start;border-radius:14px 14px 0 0}
.vs-h.a{background:color-mix(in srgb,var(--accent-2) 9%,var(--surface))}
.vs-h svg{width:100%;max-width:170px;height:auto}
.vs-h strong{font-size:15px;line-height:1.3}
.vs-h small{font-size:12px;color:var(--muted)}
.vs-l{font-size:14px;color:var(--muted)}
.vs-v{font-variant-numeric:tabular-nums;font-size:15px}
.vs-v.win{font-weight:600}
.vs-grid>.vs-v:nth-child(4n+2){background:color-mix(in srgb,var(--accent-2) 5%,var(--surface))}
.vs-tag{font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:999px;display:inline-block}
.vs-tag.a{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.vs-tag.b{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.vs-eq{font-size:12.5px;color:var(--muted)}
.robust{margin-top:22px}
.rb-sum{font-size:16px!important;color:var(--ink)!important;margin:6px 0 12px!important}
.rb-wrap{overflow-x:auto}
.rb{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}
.rb th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:8px 10px;border-bottom:1px solid var(--line)}
.rb td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.rb td small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.rb tr:last-child td{border-bottom:0}
.rw-d summary{cursor:pointer;color:var(--accent);font-size:14px;margin-top:14px;list-style:none}
.rw-d summary::-webkit-details-marker{display:none}
.rw{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px;background:var(--surface);border-radius:12px}
.rw td{padding:7px 12px;border-bottom:1px solid var(--line)}
.rw td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rw tr.sub td{font-weight:600}
.rw tr.tot td{font-weight:700;border-bottom:0;font-size:15px}
.viewseg{padding:3px;border-radius:999px}
.viewseg button{padding:6px 12px;border-radius:999px;font-size:13px}
:root[data-view="simple"] .x-expert{display:none!important}
:root[data-view="expert"] .x-simple{display:none!important}
.simple-hint{text-align:center;color:var(--muted);font-size:14px;margin:14px 0 0}
.simple-hint .btn{padding:0;font-size:14px}
@media (max-width:560px){.viewseg button{padding:6px 9px;font-size:12px}.flags button{padding:6px 8px}}
.explain{background:var(--surface);padding:72px 22px 90px;margin-top:20px}
.ex-in{max-width:980px;margin:0 auto}
.ex-k{color:var(--accent);font-weight:600;font-size:15px;margin:0 0 8px}
.explain h2{font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0 0 16px;max-width:22ch}
.ex-lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:62ch;margin:0 0 36px}
.ex-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ex-card{background:var(--bg);border-radius:20px;padding:22px}
.ex-i{font-size:26px}
.ex-card h3{font-size:18px;font-weight:600;margin:10px 0 6px}
.ex-card p{margin:0;font-size:14.5px;color:var(--muted)}
.ex-demo{margin-top:36px;background:var(--bg);border-radius:22px;padding:26px}
.ex-demo h3,.ex-rule h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.ex-sub{font-size:13.5px;color:var(--muted);margin:0 0 16px}
.ex-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.ex-bar{display:grid;grid-template-columns:minmax(120px,210px) 1fr 100px;gap:14px;align-items:center}
.ex-bl{font-size:14px}
.ex-track{height:14px;border-radius:7px;background:var(--track);overflow:hidden}
.ex-track i{display:block;height:100%;border-radius:7px;background:var(--car-die)}
.ex-track i.acc{background:var(--accent-2)}
.ex-bar strong{text-align:right;font-variant-numeric:tabular-nums;font-size:16px}
@media (max-width:600px){.ex-bar{grid-template-columns:1fr 90px}.ex-bar .ex-track{grid-column:1/-1;grid-row:2}}
.ex-rule{margin-top:22px;border-left:4px solid var(--accent-2);padding:4px 0 4px 20px}
.ex-rule p{font-size:15.5px;max-width:70ch;margin:0 0 10px}
.ex-note{font-size:13.5px!important;color:var(--muted)}
.ex-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:36px}
.ex-steps div{display:flex;gap:12px;align-items:center;font-size:15px}
.ex-steps b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font-weight:600}
.ex-cta{margin-top:30px;text-align:center}
/* Desktop/Mobile Views */
@media (max-width:760px){.only-desk{display:none!important}}
@media (min-width:761px){.only-mob{display:none!important}}
.num-w{display:flex;align-items:center;gap:6px}
.stp{display:none;border:0;background:var(--soft);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
@media (pointer:coarse){.stp{display:inline-grid;place-items:center}
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-13px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}}
.cards{display:flex;flex-direction:column;gap:12px}
.mc{background:var(--surface);border-radius:20px;padding:14px 16px;border:2px solid transparent}
.mc.best{border-color:var(--accent-2)}
.mc.sel{box-shadow:0 0 0 2px var(--accent) inset}
.mc.cur{background:transparent;border:1px dashed var(--line)}
.mc-top{display:grid;grid-template-columns:24px 96px 1fr;gap:10px;align-items:center;cursor:pointer}
.mc.cur .mc-top{cursor:default}
.mc-rank{font-weight:600;color:var(--muted);text-align:center}
.mc.best .mc-rank{color:var(--accent)}
.mc-img svg{width:96px;height:auto;display:block}
.mc-name{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.mc-name strong{font-size:15px;line-height:1.25}
.mc-name small{font-size:12px;color:var(--muted)}
.mc-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mc-nums div{background:var(--soft);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column}
.mc-nums span{font-size:12px;color:var(--muted)}
.mc-nums strong{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.mc-nums small{font-size:12px;font-weight:400;color:var(--muted)}
.mc-foot{display:flex;gap:8px;margin-top:12px;align-items:center}
.mc-foot select{flex:1;min-width:0;font-size:13px;padding:9px 10px}
.mc-foot .btn{flex:none;padding:10px 16px}
details.tools,details.edit{margin-top:22px}
details.tools>summary,details.edit>summary{cursor:pointer;list-style:none;background:var(--surface);border-radius:18px;padding:18px 22px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center}
details.tools>summary::-webkit-details-marker,details.edit>summary::-webkit-details-marker{display:none}
details.tools>summary::after,details.edit>summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px}
details.tools[open]>summary::after,details.edit[open]>summary::after{content:"–"}
details.edit>p{color:var(--muted);margin:12px 4px}
details.edit[open]>summary,details.tools[open]>summary{margin-bottom:12px}
.fin-ins{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:14px;font-size:14px;color:var(--muted)}
.fin-ins a{font-weight:500}
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet-in{position:relative;background:var(--surface);border-radius:24px;padding:22px 22px 18px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;display:flex;flex-direction:column;gap:12px}
@media (max-width:760px){.sheet{align-items:flex-end}.sheet-in{width:100%;border-radius:24px 24px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));max-height:92%}}
.sheet-h{display:flex;justify-content:space-between;align-items:center}
.sheet-h h3{margin:0;font-size:21px}
.sheet-x{border:0;background:var(--soft);width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--ink)}
.sheet-sub{margin:0;color:var(--muted);font-size:14px}
.sheet-in label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.sheet-in label small{color:var(--muted);font-weight:400}
.sheet-in input[type=text],.sheet-in input[type=email],.sheet-in input[type=tel]{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;font-size:16px}
.sheet-in .chk{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13px;color:var(--muted)}
.sheet-in .chk input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.sheet-note{font-size:12px;color:var(--muted);margin:0;text-align:center}
.site-foot{border-top:1px solid var(--line);padding:22px 22px 110px;color:var(--muted);font-size:13px}
.sf-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.site-foot summary{cursor:pointer;color:var(--accent)}
.site-foot p{margin:6px 0 0;max-width:70ch}
@media (max-width:760px){
  .nav-in{padding:10px 16px}
  .nav .flags,.nav .theme,.logo span{display:none}
  .intro{padding-top:8vh}
  .res{padding:24px 14px 140px}
  .summary .big{font-size:52px}
  .summary .verdict{font-size:16px}
  .panel{padding:18px;border-radius:20px}
  .wiz{padding:28px 16px 140px}
  .card{padding:4px 16px}
  .explain{padding:48px 16px 64px}
  .fin-grid{gap:12px}
  .fin-cta .btn{flex:1;text-align:center}
  .mb-ctrl{grid-template-columns:1fr}
  .seg button{padding:10px 4px;font-size:13px}
}
/* Dezente, themenfähige Scrollleisten */
.cmp-wrap,.vs-wrap,.rb-wrap,.rc-list,.pc-grid,.sheet-in{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
.cmp-wrap::-webkit-scrollbar,.vs-wrap::-webkit-scrollbar,.rb-wrap::-webkit-scrollbar,.rc-list::-webkit-scrollbar,.pc-grid::-webkit-scrollbar,.sheet-in::-webkit-scrollbar{height:8px;width:8px}
.cmp-wrap::-webkit-scrollbar-track,.vs-wrap::-webkit-scrollbar-track,.rb-wrap::-webkit-scrollbar-track,.rc-list::-webkit-scrollbar-track,.pc-grid::-webkit-scrollbar-track,.sheet-in::-webkit-scrollbar-track{background:transparent;margin:0 18px}
.cmp-wrap::-webkit-scrollbar-thumb,.vs-wrap::-webkit-scrollbar-thumb,.rb-wrap::-webkit-scrollbar-thumb,.rc-list::-webkit-scrollbar-thumb,.pc-grid::-webkit-scrollbar-thumb,.sheet-in::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 40%,transparent);border-radius:999px;border:2px solid var(--surface)}
.cmp-wrap::-webkit-scrollbar-thumb:hover,.vs-wrap::-webkit-scrollbar-thumb:hover,.rb-wrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent-2) 70%,transparent)}
.cmp-wrap::-webkit-scrollbar-button,.vs-wrap::-webkit-scrollbar-button,.rb-wrap::-webkit-scrollbar-button,.rc-list::-webkit-scrollbar-button,.pc-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
.cmp-wrap::-webkit-scrollbar-corner{background:transparent}
.cmp-wrap{padding-bottom:6px}
.below{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
@media (max-width:860px){.below{grid-template-columns:1fr}}
.panel{background:var(--surface);border-radius:22px;padding:24px}
.panel h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.panel p{margin:0;color:var(--muted);font-size:14px}
.fig{font-size:30px;font-weight:600;margin:8px 0 4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.save-row{display:flex;gap:8px;margin-top:12px}
.save-row input{flex:1}
.saved-list{list-style:none;padding:0;margin:10px 0 0}
.saved-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.status{font-size:13px;color:var(--muted);margin-top:6px;min-height:1.2em}

.edit{margin-top:22px}
.edit>h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:34px 0 4px}
.edit>p{color:var(--muted);margin:0 0 14px}
details.group{background:var(--surface);border-radius:18px;margin-bottom:10px;padding:0 22px}
details.group>summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:16px;display:flex;justify-content:space-between}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary::after{content:"+";color:var(--muted);font-weight:400;font-size:20px;line-height:1}
details.group[open]>summary::after{content:"–"}
.group-body{padding-bottom:14px;border-top:1px solid var(--line)}
.sub{font-size:14px;font-weight:600;margin:18px 0 0;color:var(--muted)}
.small-print{font-size:12px;color:var(--muted);margin-top:26px;max-width:80ch}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.mbar .t{font-size:13px;color:var(--muted);line-height:1.3}
.mbar .v{font-size:18px;font-weight:600}
@media (min-width:861px){.mbar{display:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== Zinsen oder Bonus ===== */
.rates,.swot{margin-top:22px}
.rates p,.swot p{font-size:15px;color:var(--ink);max-width:72ch}
.rt-v{font-size:16px!important;margin:10px 0 6px!important}
.rt-chart svg{width:100%;height:auto;max-width:720px;display:block;margin:6px 0 10px}
.rt td:nth-child(n+2){font-variant-numeric:tabular-nums}

/* ===== SWOT ===== */
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:640px){.sw-grid{grid-template-columns:1fr}}
.sw{border-radius:16px;padding:14px 16px}
.sw h4{margin:0 0 6px;font-size:15px;font-weight:600}
.sw ul{margin:0;padding-left:18px;font-size:14px;line-height:1.5}
.sw li+li{margin-top:4px}
.sw.s{background:color-mix(in srgb,var(--good) 11%,var(--surface))} .sw.s h4{color:var(--good)}
.sw.w{background:color-mix(in srgb,var(--bad) 9%,var(--surface))} .sw.w h4{color:var(--bad)}
.sw.o{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface))} .sw.o h4{color:var(--accent)}
.sw.t{background:color-mix(in srgb,var(--car-ben) 13%,var(--surface))} .sw.t h4{color:#9a5b00}
:root[data-theme="dark"] .sw.t h4{color:#ffb84d}

/* ===== Bericht (nur im Druck sichtbar) ===== */
#report{display:none}
@media print{
  @page{size:A4;margin:16mm 14mm}
  body{background:#fff!important;color:#1d1d1f!important}
  body>*:not(#report){display:none!important}
  #report{display:block!important;font-family:Poppins,Arial,sans-serif;font-size:11pt;line-height:1.45;color:#1d1d1f}
  #report h1{font-size:22pt;letter-spacing:-.02em;margin:10pt 0 6pt}
  #report h2{font-size:14pt;margin:18pt 0 6pt;page-break-after:avoid}
  .rp-head{display:flex;justify-content:space-between;border-bottom:2px solid #19c3c0;padding-bottom:6pt}
  .rp-logo{font-weight:700;font-size:16pt;color:#00838a}
  .rp-sub{font-size:9pt;color:#6e6e73}
  .rp-lead{font-size:12pt}
  .rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8pt;margin:10pt 0}
  .rp-kpis div{border:1px solid #d2d2d7;border-radius:8pt;padding:8pt}
  .rp-kpis span,.rp-kpis small{display:block;font-size:8.5pt;color:#6e6e73}
  .rp-kpis b{font-size:14pt}
  .rp-t{width:100%;border-collapse:collapse;font-size:9.5pt;page-break-inside:avoid}
  .rp-t td,.rp-t th{border-bottom:1px solid #e3e3e8;padding:4pt 5pt;text-align:left;vertical-align:top}
  .rp-t td:last-child,.rp-t th:last-child{text-align:right}
  .rp-grid td:not(:first-child):not(:nth-child(2)),.rp-grid th:not(:first-child):not(:nth-child(2)){text-align:right;white-space:nowrap}
  .rp-t tr.b td{font-weight:700}
  .rp-chart svg{width:100%;height:auto}
  .rp-break{page-break-after:always}
  .rp-m{font-size:9.5pt;padding-left:14pt}
  .rp-foot{font-size:8pt;color:#6e6e73;margin-top:14pt;border-top:1px solid #e3e3e8;padding-top:6pt}
  #report .sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:8pt;page-break-inside:avoid}
  #report .sw{border-radius:8pt;padding:8pt 10pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #report .sw.s{background:#e8f5ec}#report .sw.w{background:#fbe9e6}#report .sw.o{background:#e3f7f6}#report .sw.t{background:#fdf0dc}
  #report .sw h4{font-size:11pt;margin:0 0 4pt}
  #report .sw ul{font-size:9.5pt;padding-left:12pt;margin:0}
  #report svg rect{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== klarfahren-Kompass ===== */
.kompass{margin-top:22px}
.kompass>p{font-size:15px;color:var(--ink);max-width:72ch}
.kp-v{font-size:16px!important;margin:8px 0!important}
.kp-chart{margin:4px 0 6px}
.kp-svg{width:100%;height:auto;display:block}
.kp-dot[data-focus]{cursor:pointer}
.kp-dot[data-focus]:hover circle{stroke:var(--accent);stroke-width:3}
.kp-prefs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 28px;margin-top:6px}
.kp-prefs .row{border-top:1px solid var(--line)}
.kp-how summary{cursor:pointer;color:var(--accent);font-size:14px;margin-top:12px;list-style:none}
.kp-how summary::-webkit-details-marker{display:none}
.kp-how ul{font-size:14px;padding-left:18px;margin:10px 0}
.kp-how p{font-size:13.5px;color:var(--muted)}

/* ===== Angebots-Check ===== */
.dl-cols{display:grid;gap:12px;margin:14px 0 6px}
@media (max-width:760px){.dl-cols{grid-template-columns:1fr!important}}
.dl-col{background:var(--soft);border-radius:16px;padding:12px 14px}
.dl-col h4{margin:0 0 8px;font-size:16px;font-weight:600}
.dl-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.dl-f:first-of-type{border-top:0}
.dl-i{display:flex;align-items:center;gap:6px;background:var(--surface);border-radius:10px;padding:4px 10px}
.dl-i input{width:86px;border:0;background:transparent;text-align:right;font-weight:600;font-size:15px;-moz-appearance:textfield}
.dl-i input::placeholder{color:var(--muted);font-weight:400}
.dl-i input::-webkit-outer-spin-button,.dl-i input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dl-i em{font-style:normal;color:var(--muted);font-size:12.5px;white-space:nowrap}
.dl-v{font-size:16px!important;margin:12px 0 10px!important;max-width:78ch}
.dl-t{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.dl-t th,.dl-t td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.dl-t th:first-child{text-align:left;font-weight:400;color:var(--muted)}
.dl-t thead th{font-size:15px;font-weight:600;color:var(--ink);vertical-align:bottom}
.dl-t thead th small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.dl-t td.win,.dl-t th.win{background:color-mix(in srgb,var(--accent-2) 8%,var(--surface))}
.dl-t tr.sub th{padding-left:22px}
.dl-t tr.tot th,.dl-t tr.tot td{font-size:15px;border-top:2px solid var(--line)}
.dl-t tr.grp th{padding-top:18px;font-weight:600;color:var(--ink);text-align:left}
.sum-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.kp-dot text{paint-order:stroke;stroke:var(--surface);stroke-width:3px}


/* ===== Wärmere Optik ===== */
.panel,.res .panel,.card,.cmp-wrap,.mc,details.group,details.tools>summary,details.edit>summary{border-radius:26px}
.panel,.card,.cmp-wrap{box-shadow:0 1px 2px rgba(80,50,20,.04),0 8px 24px rgba(80,50,20,.05)}
.intro h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--warm-soft) 62%);padding:0 .08em}
.explain{background:linear-gradient(180deg,var(--surface),var(--bg))}
.ex-card{background:var(--warm-soft)}
.ex-card:nth-child(2){background:color-mix(in srgb,var(--accent-2) 14%,var(--surface))}
.ex-card:nth-child(3){background:color-mix(in srgb,var(--sun) 22%,var(--surface))}
.ex-card:nth-child(4){background:color-mix(in srgb,var(--car-hyb) 12%,var(--surface))}
.btn{box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 25%,transparent);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost,.btn.plain{box-shadow:none}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--accent)}
.summary .big.good{color:var(--good)}
.progress i.on{background:linear-gradient(90deg,var(--accent-2),var(--warm))}

/* ===== Hero-Szene ===== */
.hero-scene{max-width:760px;margin:40px auto 0}
.hs-svg{width:100%;height:auto;display:block;overflow:visible}
.hs-dash{animation:hs-road 1.1s linear infinite}
@keyframes hs-road{to{stroke-dashoffset:-40}}
.hs-hills{animation:hs-hills 18s linear infinite alternate}
@keyframes hs-hills{to{transform:translateX(-40px)}}
.hs-car{animation:hs-bob .6s ease-in-out infinite alternate}
@keyframes hs-bob{from{transform:translate(150px,96px)}to{transform:translate(150px,93px)}}
.coin{opacity:0;animation:hs-coin 3.3s cubic-bezier(.3,.1,.4,1) infinite}
@keyframes hs-coin{0%{opacity:0;transform:translate(0,0) scale(.6)}10%{opacity:1;transform:translate(20px,-40px) scale(1)}55%{opacity:1;transform:translate(200px,-90px) scale(1)}85%{opacity:1;transform:translate(350px,-10px) scale(.9)}100%{opacity:0;transform:translate(350px,0) scale(.5)}}
.hs-pig{animation:hs-pig 3.3s ease-in-out infinite;transform-origin:620px 190px}
@keyframes hs-pig{0%,80%,100%{transform:translate(620px,120px)}86%{transform:translate(620px,114px)}}
.hs-count{text-align:center;color:var(--muted);font-size:16px;margin:10px 0 0}
.hs-count strong{color:var(--ink);font-size:20px}

/* ===== Coach im Wizard ===== */
.coach{display:flex;align-items:center;gap:12px;margin-top:18px;background:var(--warm-soft);border-radius:20px;padding:12px 16px;min-height:58px}
.coach-a svg{width:58px;height:auto;display:block}
.coach-t{font-size:15px;line-height:1.45}
.coach.pop{animation:coach-pop .45s ease}
@keyframes coach-pop{0%{transform:scale(.97);opacity:.4}60%{transform:scale(1.01);opacity:1}100%{transform:scale(1)}}

/* ===== Konfetti ===== */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation-name:cf-fall;animation-timing-function:cubic-bezier(.2,.6,.4,1);animation-fill-mode:forwards}
@keyframes cf-fall{to{top:105%;transform:translateX(40px) rotate(720deg);opacity:.8}}

@media (prefers-reduced-motion:reduce){.hs-dash,.hs-hills,.hs-car,.coin,.hs-pig,.coach.pop{animation:none!important}.coin{opacity:1}}
@media (max-width:760px){.hero-scene{margin-top:24px}.hs-count{font-size:14px}.hs-count strong{font-size:17px}.coach-a svg{width:46px}}

/* ===== Ansicht-Umschalter nur im Ergebnis ===== */
:root:not([data-screen="results"]) .viewseg{display:none}

/* ===== Einblenden beim Scrollen ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.ex-demo .ex-track i{width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.ex-demo.in .ex-track i{width:var(--w)}

/* ===== Antriebs-Kacheln ===== */
.pt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:860px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt-tile{border-radius:22px;padding:18px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.pt-tile:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 12px 28px rgba(80,50,20,.12)}
.pt-tile h3{margin:10px 0 4px;font-size:17px;font-weight:600}
.pt-tile p{margin:0;font-size:14px;color:var(--muted)}
.pt-tile.pt-ev{background:color-mix(in srgb,var(--car-ev) 16%,var(--surface))}
.pt-tile.pt-hyb{background:color-mix(in srgb,#2fb36b 14%,var(--surface))}
.pt-tile.pt-ben{background:color-mix(in srgb,var(--car-ben) 15%,var(--surface))}
.pt-tile.pt-die{background:color-mix(in srgb,#5b6b7a 14%,var(--surface))}
.pt-q{text-align:center;color:var(--muted);margin:16px 0 0;font-size:15px}

/* ===== Animierte Antriebs-Icons ===== */
.fi-w{display:inline-grid;place-items:center;border-radius:50%;padding:5px;flex:none}
.fi-w.pt-ev{color:#0b8f8c;background:color-mix(in srgb,var(--car-ev) 20%,transparent)}
.fi-w.pt-hyb{color:#2fb36b;background:color-mix(in srgb,#2fb36b 18%,transparent)}
.fi-w.pt-ben{color:#d07a00;background:color-mix(in srgb,var(--car-ben) 20%,transparent)}
.fi-w.pt-die{color:#5b6b7a;background:color-mix(in srgb,#5b6b7a 18%,transparent)}
.fi-ev{animation:fi-zap 2.4s ease-in-out infinite}
@keyframes fi-zap{0%,70%,100%{transform:scale(1);filter:none}75%{transform:scale(1.25) rotate(-6deg);filter:drop-shadow(0 0 4px #19c3c0)}80%{transform:scale(.95)}}
.fi-hyb .bolt{animation:fi-blink 2.6s ease-in-out infinite}
.fi-hyb .leaf{animation:fi-sway 3s ease-in-out infinite;transform-origin:5px 19px}
@keyframes fi-blink{0%,45%,100%{opacity:0}55%,90%{opacity:1}}
@keyframes fi-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.fi-ben .drop{animation:fi-drip 2.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:12px 3px}
@keyframes fi-drip{0%,60%,100%{transform:translateY(0) scaleY(1)}70%{transform:translateY(2px) scaleY(1.08)}80%{transform:translateY(-1px) scaleY(.96)}}
.fi-die .puff{animation:fi-puff 2.6s ease-out infinite;opacity:0}
.fi-die .p2{animation-delay:.6s}
@keyframes fi-puff{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:.8}100%{opacity:0;transform:translate(3px,-6px) scale(1.4)}}
.pt-row{display:flex;align-items:center;gap:6px}
.cmp .head.pt-h-ev{border-top:3px solid var(--car-ev)}
.cmp .head.pt-h-hyb{border-top:3px solid #2fb36b}
.cmp .head.pt-h-ben{border-top:3px solid var(--car-ben)}
.cmp .head.pt-h-die{border-top:3px solid #5b6b7a}
.mc.pt-b-ev{border-left:5px solid var(--car-ev)}
.mc.pt-b-hyb{border-left:5px solid #2fb36b}
.mc.pt-b-ben{border-left:5px solid var(--car-ben)}
.mc.pt-b-die{border-left:5px solid #5b6b7a}
.pt-tile:hover .fi-ev,.pt-tile:hover .fi-hyb .bolt,.pt-tile:hover .fi-ben .drop,.pt-tile:hover .fi-die .puff{animation-duration:.9s}

/* ===== Waage (Zinsen gegen Rendite) ===== */
.ex-rule{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center;border-left:0;padding:22px;background:var(--surface);border-radius:26px}
@media (max-width:700px){.ex-rule{grid-template-columns:1fr}.scale-w{max-width:240px;margin:0 auto}}
.scale{width:100%;height:auto;overflow:visible}
.scale .beam{transform-origin:130px 40px;transform:rotate(-9deg);transition:transform 1.4s cubic-bezier(.3,1.6,.5,1) .35s}
.scale .pan-l,.scale .pan-r{transition:transform 1.4s cubic-bezier(.3,1.6,.5,1) .35s}
.scale .pan-l{transform-origin:45px 40px;transform:rotate(9deg)}
.scale .pan-r{transform-origin:215px 40px;transform:rotate(9deg)}
.ex-rule.in .scale .beam{transform:rotate(8deg)}
.ex-rule.in .scale .pan-l,.ex-rule.in .scale .pan-r{transform:rotate(-8deg)}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.fi,.fi *{animation:none!important}.ex-demo .ex-track i{width:var(--w);transition:none}}

/* ===== Entdeck-Elemente neben Empfehlung und Abschluss ===== */
.anchor{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
.side{display:none;text-align:center}
@media (min-width:1200px){.anchor{grid-template-columns:minmax(0,1fr) 170px}.side{display:block}.anchor .side{order:2}}
.anchor>.panel{margin-top:22px}
.side.rv{transform:translateY(30px) scale(.92)}
.side.rv.in{transform:none}
.rail-k{font-size:13px;color:var(--muted);margin:0 0 8px;font-weight:500}
.rail-v{font-size:22px;font-weight:600;margin:6px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rail-s{font-size:12px;color:var(--muted);margin:0;line-height:1.35}
.rail-ic{margin-top:10px}
.jar{width:120px;height:auto;display:block;margin:0 auto}
#jarFill,#jarWave{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
#jarWave{animation:jar-wave 3s linear infinite}
@keyframes jar-wave{from{d:path("M0 0 q15 -6 30 0 t30 0 t30 0 t30 0 t30 0 v12 h-150z")}to{d:path("M-30 0 q15 -6 30 0 t30 0 t30 0 t30 0 t30 0 v12 h-150z")}}
#jarCoin.drop{animation:jar-coin .9s cubic-bezier(.5,0,.7,1)}
@keyframes jar-coin{0%{opacity:0;transform:translateY(-20px)}20%{opacity:1}90%{opacity:1;transform:translateY(110px)}100%{opacity:0;transform:translateY(120px)}}
.gauge{width:140px;height:auto;display:block;margin:0 auto;overflow:visible}
#gNeedle{transition:transform 1s cubic-bezier(.3,1.5,.5,1)}

/* ===== Tabelle: Kosten leuchten bei Änderung kurz auf ===== */
.cost.flash-down{animation:flash-g 1s ease}
.cost.flash-up{animation:flash-r 1s ease}
@keyframes flash-g{0%{background:color-mix(in srgb,var(--good) 25%,transparent);border-radius:8px}100%{background:transparent}}
@keyframes flash-r{0%{background:color-mix(in srgb,var(--bad) 22%,transparent);border-radius:8px}100%{background:transparent}}
@media print{.side{display:none!important}}
@media (prefers-reduced-motion:reduce){#jarFill,#jarWave,#gNeedle{transition:none}#jarWave{animation:none}.cost.flash-down,.cost.flash-up,#jarCoin.drop{animation:none}}

/* ===== Theme-Schalter auch am Handy ===== */
@media (max-width:760px){.nav .theme{display:inline-grid;place-items:center;width:32px;height:32px}}

/* ===== Bauform-Auswahl ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink)}
.chip small{color:var(--muted);font-weight:400;font-size:11px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed="true"] small{color:inherit;opacity:.8}
.chk7{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;margin-top:10px;cursor:pointer}
.chk7 input{width:18px;height:18px;accent-color:var(--accent)}
.muted{color:var(--muted);font-weight:400}

/* ===== Service-Schätzung ===== */
.svc-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--warm-soft);border-radius:16px;padding:12px 14px;margin:6px 0 12px}
.svc-hint p{margin:0;font-size:14px}
.svc-hint span{color:var(--muted);font-size:12.5px}

/* ===== Zinsgrenze über der Tabelle ===== */
.tb-ctrl{background:var(--surface);border-radius:20px;padding:4px 20px 10px;margin-bottom:14px}
.tb-ctrl .row{border-top:0}

/* ===== Einstieg: Angebot ja/nein ===== */
.oq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
@media (max-width:640px){.oq-grid{grid-template-columns:1fr}}
.oq{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:24px;padding:22px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;color:var(--ink)}
.oq:hover{transform:translateY(-3px);border-color:var(--accent-2);box-shadow:0 10px 26px rgba(80,50,20,.1)}
.oq-i{font-size:30px}
.oq b{font-size:18px}
.oq small{color:var(--muted);font-size:14px}

/* ===== Navigation: Wissen ===== */
.nav-link{color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;padding:6px 10px;border-radius:999px}
.nav-link:hover{background:var(--soft)}
.nav-r .btn.small{text-decoration:none}

/* Tabelle kompakter */
.cmp .c{padding:11px 12px}
.cmp .head svg{max-width:170px}
.cmp .cost{font-size:23px}

/* ===== Flaggen ===== */
.flag{vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.15)}

/* ===== Themen-Kacheln unter dem Hero ===== */
.topic-tiles{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;max-width:980px;margin:34px auto 0;text-align:left}
@media (max-width:800px){.topic-tiles{grid-template-columns:1fr}.tt-main{order:-1}}
.tt{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:24px;padding:20px;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 1px 2px rgba(80,50,20,.04),0 8px 24px rgba(80,50,20,.06)}
.tt:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(80,50,20,.12)}
.tt b{font-size:17px}
.tt small{color:var(--muted);font-size:14px;line-height:1.45}
.tt-i{font-size:28px}
.tt-main{background:linear-gradient(150deg,color-mix(in srgb,var(--accent-2) 22%,var(--surface)),var(--surface) 70%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-2) 55%,transparent),0 10px 28px rgba(0,131,138,.12)}
.tt-main .tt-i{animation:fi-zap 2.4s ease-in-out infinite;display:inline-block}
.tt-go{margin-top:auto;color:var(--accent);font-weight:600;font-size:14px}
.tt-ind{background:linear-gradient(150deg,color-mix(in srgb,var(--car-hyb) 12%,var(--surface)),var(--surface) 70%)}
.tt-fin{background:linear-gradient(150deg,color-mix(in srgb,var(--sun) 22%,var(--surface)),var(--surface) 70%)}

/* ===== Horizontale Filterleiste (klebt beim Scrollen) ===== */
.res{max-width:1320px}
.fbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:15;margin:22px 0 18px;background:var(--ink);color:var(--bg);border-radius:20px;padding:10px 14px;box-shadow:0 10px 26px rgba(40,25,10,.18)}
.fb-scroll{display:flex;align-items:flex-end;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fb-scroll::-webkit-scrollbar{display:none}
.fb-g{display:flex;flex-direction:column;gap:5px;flex:none}
.fb-l{font-size:11.5px;font-weight:500;opacity:.75;white-space:nowrap}
.fbar .seg{background:color-mix(in srgb,var(--bg) 14%,transparent)}
.fbar .seg button{color:var(--bg);opacity:.8;padding:6px 10px;font-size:12.5px}
.fbar .seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);opacity:1;box-shadow:none}
.fbar .chip{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent);padding:5px 10px;font-size:12.5px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.fbar .chip[aria-pressed="false"]{opacity:.55}
.fbar .chip[aria-pressed="true"]{background:color-mix(in srgb,var(--bg) 16%,transparent);border-color:transparent;color:var(--bg)}
.fbar .chip .fi-w{padding:2px;background:var(--bg)}
.fbar .fb-drop{opacity:1}
.fb-rate .pill-range{width:150px}
.fbar .pill-v{background:var(--accent-2);color:#00302f}
.fb-more{margin-left:auto}
.fb-hint{margin:6px 2px 0;font-size:12px;opacity:.8}
.fb-hint[hidden]{display:none}
/* Ansicht-Umschalter: am Handy im Ergebnis statt in der Leiste */
.viewseg-m{display:none;margin:0 auto 14px;max-width:260px}
@media (max-width:760px){
  .nav .viewseg{display:none!important}
  :root[data-screen="results"] .viewseg-m{display:flex}
  .fbar{top:calc(env(safe-area-inset-top,0px) + 53px);margin:16px -6px 14px;border-radius:16px;padding:8px 10px}
  .fb-scroll{gap:14px}
  .fb-rate .pill-range{width:120px}
  .fb-more{margin-left:0}
}
/* Rechner-Link in der Leiste */
.nav-calc{font-weight:600;color:var(--accent)}
.nl-short{display:none}
@media (max-width:760px){.nl-long{display:none}.nl-short{display:inline}.nav-link{padding:6px 7px;font-size:13px}.nav-r{gap:4px}.logo{font-size:17px}}
@media (max-width:380px){.nav-calc span[aria-hidden]{display:none}}

/* ===== Filter-Bausteine (Leiste und Filter-Fenster) ===== */
.f-h{margin:0 0 8px;font-size:18px}
.f-sec{padding:12px 0;border-top:1px solid var(--line)}
.f-sec:first-of-type{border-top:0}
.f-l{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px}
.f-sec .row{padding:6px 0;border-top:0}
.f-sec .row-head label{font-size:13px}
.f-sec .num input{width:64px;font-size:13px}
.seg-s button{padding:7px 6px;font-size:12.5px}
.chips-s{gap:6px}
.chips-s .chip{padding:5px 10px;font-size:12.5px;display:inline-flex;align-items:center;gap:4px}
.chips-s .chip .fi-w{padding:2px}
.pill-v{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;margin:0 2px}
.pill-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
.pill-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(var(--accent-2),var(--accent-2)) 0/var(--p,100%) 100% no-repeat,color-mix(in srgb,currentColor 22%,transparent)}
.pill-range::-moz-range-track{height:8px;border-radius:999px;background:color-mix(in srgb,currentColor 22%,transparent)}
.pill-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent-2)}
.pill-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pill-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.fsheet .hint{margin:6px 0 0;font-size:12px}
/* Ladekosten-Tabelle im Filter-Fenster nicht doppelt */
.fbar .pill-v{background:var(--accent-2);color:#00302f}

/* ===== Zweite Akzentfarbe: Nachtblau (Struktur), Gold nur für Geld-Momente ===== */
:root{--accent-3:#1f3b5c;--accent-3-soft:#e6ecf3;--accent-3-on:#ffffff;--fbar-bg:#eee2d1;--fbar-ink:#3b3029}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent-3:#9dbbe0;--accent-3-soft:#1e2733;--accent-3-on:#0f1d30;--fbar-bg:#34302d;--fbar-ink:#efe7de}}
:root[data-theme="dark"]{--accent-3:#9dbbe0;--accent-3-soft:#1e2733;--accent-3-on:#0f1d30;--fbar-bg:#34302d;--fbar-ink:#efe7de}
.ex-k,.wz-k,.mb-k{color:var(--accent-3)!important}
.summary .kicker{color:var(--accent-3);font-weight:500}
.sum-actions .btn.ghost{box-shadow:inset 0 0 0 1.5px var(--accent-3);color:var(--accent-3)}
.pill.best{background:color-mix(in srgb,var(--accent-3) 16%,transparent);color:var(--accent-3)}
.cmp .head.sel{box-shadow:inset 0 3px 0 var(--accent-3);background:color-mix(in srgb,var(--accent-3) 7%,var(--surface))}
.mc.sel{box-shadow:0 0 0 2px var(--accent-3) inset}
.rc-row.sel{box-shadow:0 0 0 2px var(--accent-3) inset}
.focus-btn{color:var(--accent-3)}
.tt-go{color:var(--accent-3)}
.nav-calc{color:var(--accent-3)}
.calc-ic{vertical-align:-3px}
.coach{background:var(--accent-3-soft)}
.hs-count strong{color:var(--accent-3)}
.progress i.on{background:linear-gradient(90deg,var(--accent-2),var(--accent-3))}
.final{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-3) 45%,transparent)!important;background:linear-gradient(160deg,color-mix(in srgb,var(--accent-3) 10%,var(--surface)),var(--surface) 60%)!important}

/* ===== Filterleiste sanfter: Sand (hell) bzw. Grau (dunkel) ===== */
.fbar{background:var(--fbar-bg);color:var(--fbar-ink);box-shadow:0 6px 18px rgba(80,55,30,.10)}
.fbar .seg{background:color-mix(in srgb,var(--fbar-ink) 8%,transparent)}
.fbar .seg button{color:var(--fbar-ink);opacity:.75}
.fbar .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fbar .chip{color:var(--fbar-ink);border-color:color-mix(in srgb,var(--fbar-ink) 25%,transparent)}
.fbar .chip[aria-pressed="true"]{background:var(--surface);border-color:transparent;color:var(--ink)}
.fbar .chip .fi-w{background:transparent}
.fbar .pill-v{background:var(--accent-3);color:var(--accent-3-on)}
.fbar .fb-l{opacity:.7}

/* ===== Kompass kompakter ===== */
.kp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1000px){.kp-layout{grid-template-columns:minmax(0,600px) minmax(260px,1fr)}}
.kp-chart{max-width:600px}
.kp-prefs{display:block;margin-top:0}
.kp-pt{font-weight:600;margin:6px 0 4px;font-size:15px}
.kp-prefs .row{padding:8px 0}
.kp-prefs .row-head label{font-size:14px}

/* ===== Zwei Themen-Kacheln unter dem Hero ===== */
.topic-tiles.two{grid-template-columns:1fr 1fr;max-width:820px}
@media (max-width:700px){.topic-tiles.two{grid-template-columns:1fr}}
.tt-fin{background:linear-gradient(150deg,var(--accent-3-soft),var(--surface) 70%)}

.coach{background:color-mix(in srgb,var(--accent-3) 9%,var(--surface))}
.summary .big.good{color:var(--good)}
.hs-count strong{color:var(--accent-3)}

/* ===== Logo ===== */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.logo-mark{flex:none;border-radius:9px;display:block}
.wm{font-weight:600;letter-spacing:-.03em}
.wm-a{color:var(--accent-3)}
.wm-b{color:var(--accent)}
@media (max-width:760px){.logo-mark{width:26px;height:26px}.logo{gap:7px}}
@media (max-width:360px){.wm{display:none}}
.logo .wm,.logo .wm-a,.logo .wm-b{display:inline;font-weight:600}
.logo .wm-a{color:var(--accent-3)}
.logo .wm-b{color:var(--accent)}
@media (max-width:360px){.logo .wm{display:none}}

/* ===== Einfach/Experte in Nachtblau hervorgehoben ===== */
.viewseg{background:color-mix(in srgb,var(--accent-3) 12%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-3) 35%,transparent)}
.viewseg button{color:var(--accent-3);font-weight:600}
.viewseg button[aria-pressed="true"]{background:var(--accent-3);color:var(--accent-3-on);box-shadow:0 2px 8px color-mix(in srgb,var(--accent-3) 35%,transparent)}
.view-explain{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:18px 0 6px;padding:16px 18px;border-radius:20px;background:color-mix(in srgb,var(--accent-3) 8%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-3) 25%,transparent)}
.view-explain p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.view-explain .ve-t{margin-bottom:4px;font-size:15px}
.ve-i{color:var(--accent-3)}
.ve-seg{min-width:200px}
@media (max-width:760px){.view-explain{grid-template-columns:1fr}.ve-i{display:none}.ve-seg{min-width:0}}

/* ===== Münzen im Vermögens-Glas ===== */
.jc{transform-box:fill-box}
.jc.in{animation:jc-drop .55s cubic-bezier(.3,1.35,.6,1) both;animation-delay:var(--d)}
.jc.out{animation:jc-out .35s ease-in both;animation-delay:var(--d)}
@keyframes jc-drop{0%{transform:translateY(-140px);opacity:0}15%{opacity:1}100%{transform:none;opacity:1}}
@keyframes jc-out{to{transform:translateY(-12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.jc.in,.jc.out{animation:none}}

/* ===== Wie finanziert ihr am besten? ===== */
.finsum{margin-top:18px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-3) 22%,transparent),0 8px 24px rgba(80,50,20,.05)}
.fs-lead{font-size:15px!important;color:var(--muted)!important;max-width:75ch}
.fs-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:6px}
@media (max-width:760px){.fs-ctrl{grid-template-columns:1fr}}
.fs-top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:14px 0}
.fs-top>div:not(.fs-arrow){background:var(--soft);border-radius:16px;padding:12px 14px}
.fs-top span,.fs-t span{display:block;font-size:13px;color:var(--muted)}
.fs-top b{font-size:22px;font-variant-numeric:tabular-nums}
.fs-top small,.fs-t small{display:block;font-size:12px;color:var(--muted)}
.fs-arrow{font-size:22px;color:var(--accent-3)}
.fs-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fs-t{border-radius:16px;padding:12px 14px;background:var(--soft);border:2px solid transparent}
.fs-t.win{border-color:var(--accent-3);background:color-mix(in srgb,var(--accent-3) 7%,var(--surface))}
.fs-t.dim{opacity:.6}
.fs-t b{font-size:21px;font-variant-numeric:tabular-nums}
.fs-t em{font-style:normal}
.fs-why{font-size:15.5px!important;margin:14px 0 0!important;max-width:80ch;line-height:1.55}
@media (max-width:560px){.fs-top{grid-template-columns:1fr}.fs-arrow{display:none}}

/* ===== Leasingfaktor und Anzahlungs-Check ===== */
.lf{font-weight:600}
.lf-sehr-gut,.lf-gut{color:var(--good)} .lf-in-Ordnung{color:var(--ink)} .lf-teuer{color:var(--bad)}
.dchk{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.dchk-t{margin:0 0 8px!important;font-size:15px!important}
.dchk-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dchk-g>div{background:var(--soft);border-radius:14px;padding:10px 12px;border:2px solid transparent}
.dchk-g>div.win{border-color:var(--accent-3);background:color-mix(in srgb,var(--accent-3) 7%,var(--surface))}
.dchk-g span,.dchk-g small{display:block;font-size:12.5px;color:var(--muted)}
.dchk-g b{font-size:19px;font-variant-numeric:tabular-nums}
.dchk-r{margin:10px 0 0!important;font-size:14.5px!important}

/* ===== PDF-Bericht neu ===== */
@media print{
  .rp-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #1f3b5c;padding-bottom:8pt;margin-bottom:10pt}
  .rp-brand{display:flex;align-items:center;gap:8pt;font-size:18pt;letter-spacing:-.02em}
  .rp-k1{color:#1f3b5c}.rp-k2{color:#00838a}
  .rp-meta{text-align:right;font-size:8.5pt;color:#6e6e73;line-height:1.35}
  .rp-usp{display:flex;align-items:center;gap:6pt;background:#e6ecf3;color:#1f3b5c;border-radius:8pt;padding:6pt 10pt;font-size:9.5pt;margin:4pt 0 8pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-usp i{font-style:normal;color:#00838a;font-weight:700}
  .rp-n{display:inline-grid;place-items:center;width:16pt;height:16pt;border-radius:50%;background:#1f3b5c;color:#fff;font-size:9pt;margin-right:6pt;vertical-align:2pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #report h1{color:#1f3b5c}
  #report h2{color:#1f3b5c;border-bottom:1px solid #e3e3e8;padding-bottom:3pt}
  .rp-kpis div{border-top:3px solid #00838a}
  .rp-t tr.hl td{background:#e6ecf3;font-weight:600;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-note{font-size:8.5pt;color:#6e6e73;margin:4pt 0 0}
  .rp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8pt;margin:6pt 0 8pt}
  .rp-cards div{border:1px solid #d2d2d7;border-radius:8pt;padding:8pt}
  .rp-cards div.win{border:2px solid #1f3b5c;background:#f2f5f9;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-cards span,.rp-cards small{display:block;font-size:8.5pt;color:#6e6e73}
  .rp-cards b{font-size:13pt}
  .rp-box{border:1px solid #d2d2d7;border-radius:8pt;padding:4pt 10pt;page-break-inside:avoid}
  .rp-box .dchk{border-top:0;margin-top:0}
  .rp-box .dchk-g{display:grid;grid-template-columns:1fr 1fr;gap:8pt}
  .rp-box .dchk-g>div{border:1px solid #e3e3e8;border-radius:6pt;padding:6pt}
  .rp-box .dchk-g>div.win{border:2px solid #1f3b5c}
  .rp-box span,.rp-box small{display:block;font-size:8.5pt;color:#6e6e73}
  .rp-kp svg{max-width:120mm;display:block;margin:0 auto}
  .rp-why{background:#e6ecf3;border-left:4px solid #1f3b5c;padding:8pt 10pt;font-size:10pt;margin-top:12pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-foot svg{vertical-align:-3pt}
}

.usp-line{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin:22px auto 0;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--accent-3) 9%,var(--surface));color:var(--accent-3);font-size:14px!important;max-width:none!important}
.usp-line i{font-style:normal;color:var(--accent);font-weight:700}
.usp-line b{color:var(--accent-3)}

/* ===== USP über den Kacheln ===== */
.usp-wrap{text-align:center;margin:8px 0 6px}
.usp-wrap .usp-line{margin:0}
.topic-tiles.two{margin-top:8px}

/* ===== Navigation mit mobilem Menü ===== */
.nav-links{display:flex;align-items:center;gap:2px}
.menu-btn{display:none;border:0;background:var(--soft);width:34px;height:34px;border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink)}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none;position:absolute;top:100%;right:12px;left:12px;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-radius:18px;padding:8px;box-shadow:0 14px 34px rgba(40,25,10,.18);z-index:40}
  .nav-links.open{display:flex}
  .nav-links .nav-link{padding:12px 14px;font-size:15px;border-radius:12px}
  .nav-links .nl-long{display:inline}.nav-links .nl-short{display:none}
  .nav{position:sticky}
  .nav-in{position:relative}
  .nav-cta{display:none}
}
.lf-q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--accent-3) 15%,transparent);color:var(--accent-3);font-size:11px;font-weight:700;text-decoration:none;margin-left:2px}
.lf-note{margin:12px 0 0;padding:12px 16px;border-radius:16px;background:var(--surface);font-size:14px;line-height:1.55;box-shadow:inset 0 0 0 1px var(--line)}
.lf-note a{color:var(--accent-3);font-weight:600}

/* ===== Taschenrechner (links unten, ein-/ausblendbar) ===== */
.calc-fab{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:45;width:50px;height:50px;border-radius:16px;border:0;cursor:pointer;display:grid;place-items:center;background:var(--accent-3);color:var(--accent-3-on);box-shadow:0 8px 22px rgba(20,30,50,.25);transition:transform .2s ease,background .2s ease}
.calc-fab:hover{transform:translateY(-2px)}
.calc-fab.on{background:var(--accent);color:var(--accent-ink)}
.calc-pad{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:46;width:270px;background:var(--surface);border-radius:22px;padding:12px;box-shadow:0 18px 44px rgba(20,30,50,.28);animation:cp-in .22s ease both}
.calc-pad[hidden]{display:none}
@keyframes cp-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.cp-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--muted);padding:0 4px 6px}
.cp-x{border:0;background:var(--soft);width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--ink);font-size:16px}
.cp-disp{background:var(--soft);border-radius:14px;padding:10px 12px;text-align:right;margin-bottom:10px}
.cp-expr{font-size:13px;color:var(--muted);min-height:18px;word-break:break-all}
.cp-val{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
.cp-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cp-keys button{border:0;border-radius:12px;height:46px;font-size:18px;font-weight:500;cursor:pointer;background:var(--soft);color:var(--ink);transition:transform .08s ease}
.cp-keys button:active{transform:scale(.95)}
.cp-keys button.fn{color:var(--accent-3);font-weight:600}
.cp-keys button.op{background:color-mix(in srgb,var(--accent-3) 14%,var(--surface));color:var(--accent-3);font-weight:600}
.cp-keys button.eq{background:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){
  :root[data-screen="results"] .calc-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
  :root[data-screen="results"] .calc-pad{bottom:calc(env(safe-area-inset-bottom,0px) + 144px)}
  .calc-fab{width:46px;height:46px;left:12px}
  .calc-pad{left:12px;right:12px;width:auto}
}
@media print{.calc-fab,.calc-pad{display:none!important}}
/* Theme-Schalter überall gleich */
.nav .theme{display:inline-grid;place-items:center}
/* Gruppen-Überschriften in der Vergleichstabelle (Experte) */
.cmp .c.grp{background:color-mix(in srgb,var(--accent-3) 8%,var(--surface));color:var(--accent-3);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;border-top:1px solid var(--line);position:sticky;left:0}

/* ===== Tabelle: Gruppen, Summen, Leasingfaktor hervorgehoben ===== */
.cmp .c.grp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;text-transform:none;letter-spacing:0;font-size:14px;padding:12px 14px 8px}
.cmp .c.grp span{font-weight:400;color:var(--muted);font-size:12.5px}
.cmp .c.lf-row{background:color-mix(in srgb,var(--accent-2) 11%,var(--surface))}
.cmp .c.lab.lf-row{color:var(--ink);font-weight:600}
.cmp .c.lf-row .lf{font-size:18px}
.cmp .c.tot{background:color-mix(in srgb,var(--accent-3) 6%,var(--surface));border-top:2px solid color-mix(in srgb,var(--accent-3) 30%,transparent)}
.cmp .c.lab.tot{font-weight:600;color:var(--ink)}
.cmp .c.lab.sub{padding-left:28px;font-size:13px}
.cmp .c.lab.sub2{font-weight:500}
/* Auto ausblenden */
.cmp .c.head{position:relative}
.x-out{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--soft);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;z-index:2;opacity:.75;transition:opacity .15s ease,background .15s ease,color .15s ease}
.x-out:hover{opacity:1;background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}
.mc{position:relative}
.mc .x-out{top:10px;right:10px}
.excl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.excl-row[hidden]{display:none}
.excl-row .chip{padding:5px 11px;font-size:12.5px}
/* Mehr/weniger Details direkt unter der Tabelle */
.view-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 4px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--accent-3) 8%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-3) 22%,transparent)}
.view-toggle p{margin:0;font-size:14px;flex:1 1 320px}
.vt-btn{background:var(--accent-3);color:var(--accent-3-on);box-shadow:none}
/* Angebots-Check: Laufzeit und Hilfe */
.dl-help{margin:8px 0 4px}
.dl-help ul{font-size:14px;line-height:1.55;padding-left:18px}
.dl-term{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:6px 0 4px}
@media (max-width:760px){.dl-term{grid-template-columns:1fr}}
.dl-warn{grid-column:1/-1;margin:8px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--sun) 22%,var(--surface));font-size:14px}
.dl-warn .btn{margin-left:6px}

/* ===== Bearbeitbare Zellen (Zinssatz, Anzahlung) ===== */
.cmp .c.edit{background:color-mix(in srgb,var(--accent-3) 4%,var(--surface))}
.cell-in{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border-radius:10px;padding:3px 8px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-3) 30%,transparent);transition:box-shadow .15s ease}
.cell-in:focus-within{box-shadow:inset 0 0 0 2px var(--accent-3)}
.cell-in input{width:74px;border:0;background:transparent;font:inherit;font-weight:600;font-size:15px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.cell-in input:focus{outline:none}
.cell-in em{font-style:normal;color:var(--muted);font-size:12.5px}
.mc-edit{display:flex;flex-direction:column;gap:4px}
.mc-edit>span{font-size:12px;color:var(--muted)}
/* Preise in der Filterleiste */
.fb-pin{display:flex;gap:6px}
.fb-pin label{display:flex;align-items:center;gap:4px;background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--ink)}
.fb-pin label span{color:var(--muted)}
.fb-pin input{width:44px;border:0;background:transparent;font:inherit;font-weight:600;text-align:right;color:var(--ink)}
.fb-pin input:focus{outline:none}
.fb-pin em{font-style:normal;color:var(--muted);font-size:11px}
/* Finanzierungs-Kacheln mit Kapital-Logik */
.fs-cap{font-size:14.5px!important;margin:12px 0 8px!important}
.fs-h{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:var(--ink)!important}
.fs-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:13.5px}
.fs-dl dt{color:var(--muted)}
.fs-dl dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.fs-dl dd i{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
.fs-dl .fs-sum{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;color:var(--ink);font-weight:700}

.mc-month{grid-column:1/-1;background:var(--soft);border-radius:12px;padding:8px 12px}
.mc-month>span{font-size:12px;color:var(--muted)}
.mc-month ul{list-style:none;margin:4px 0 0;padding:0;font-size:13.5px}
.mc-month li{display:flex;justify-content:space-between;padding:2px 0}
.mc-month li i{font-style:normal;color:var(--muted)}
.mc-month li.t{border-top:1px solid var(--line);margin-top:3px;padding-top:4px;font-weight:600}
.risk-chk{align-items:flex-start;line-height:1.45;margin:-4px 0 10px}
.risk-chk small{display:block}
.cell-in input[data-cell="price"]{width:96px}

/* ===== PDF: Auswahl-Dialog ===== */
.pdf-sheet .hint{margin:0 0 12px}
.pdf-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.pdf-opts{grid-template-columns:1fr}}
.pdf-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft);cursor:pointer;font-size:15px}
.pdf-opt input{width:18px;height:18px;accent-color:var(--accent-3)}
.pdf-act{display:flex;align-items:center;gap:6px;margin-top:16px}
.pdf-act span{flex:1}
@media print{
  .rp-car{display:grid;grid-template-columns:62mm 1fr;gap:8mm;align-items:center;border:2px solid #1f3b5c;border-radius:10pt;padding:10pt 12pt;margin:6pt 0 10pt;page-break-inside:avoid;background:#f6f8fb;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-car-img svg{width:100%;height:auto}
  .rp-car-k{margin:0;color:#1f3b5c;font-size:9pt;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .rp-car-n{margin:2pt 0 2pt!important;border:0!important;font-size:16pt!important;padding:0!important}
  .rp-car-s{margin:0 0 6pt;color:#6e6e73;font-size:9.5pt}
  .rp-car-f{display:grid;grid-template-columns:1fr 1fr;gap:4pt 12pt}
  .rp-car-f div{display:flex;justify-content:space-between;gap:8pt;border-bottom:1px solid #e3e3e8;padding:2pt 0;font-size:9pt}
  .rp-car-f span{color:#6e6e73}
  .rp-car-f b.good{color:#1b8a3a}.rp-car-f b.bad{color:#c9341d}
}

/* ===== Ergebnis zuerst: Zusammenfassung + gewähltes Auto nebeneinander ===== */
.res-top{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
/* gestapelt: zuerst die Ersparnis, darunter das Auto */
.final.top{margin:0}
.final.top .fin-grid{grid-template-columns:150px 1fr;gap:16px}
@media (max-width:560px){.final.top .fin-grid{grid-template-columns:1fr}.final.top .fin-car{max-width:180px}}
.final.top .fin-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.final.top .fin-ins,.final.top .fin-disc{font-size:12.5px}
.fin-more{margin:8px 0 4px}
.fin-more summary{cursor:pointer;color:var(--accent-3);font-weight:600;font-size:14px}
.fin-more .fin-facts{margin-top:8px}
/* Abschluss-Leiste unten */
.end-cta{margin-top:22px}
.end-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.end-in b{display:block;font-size:19px}
.end-in span{color:var(--muted);font-size:14px}
.end-btns{display:flex;gap:8px;flex-wrap:wrap}
/* Sortierung in der Filterleiste */
.fb-sort{border:0;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;background:var(--surface);color:var(--ink);cursor:pointer}


/* ===== Ergebnis oben: zwei kompakte, farbige Kacheln nebeneinander ===== */
.res-top{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:none;margin:0}
@media (min-width:900px){.res-top{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}}
.res-top .summary{margin:0;padding:20px 22px;border-radius:24px;text-align:left;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent-2) 20%,var(--surface)),var(--surface) 75%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-2) 40%,transparent)}
.res-top .summary .kicker{margin:0 0 2px;font-size:14px}
.res-top .summary .big{font-size:clamp(44px,5.4vw,68px);line-height:1.02;margin:2px 0 0;letter-spacing:-.03em}
.res-top .summary .big.bad{color:var(--bad)}
.res-top .summary .verdict{font-size:14.5px;margin:8px 0 0;max-width:none}
.res-top .summary .split{font-size:13px}
.res-top .sum-actions{justify-content:flex-start;margin-top:12px}
.final.top{margin:0;padding:18px 20px;border-radius:24px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent-3) 14%,var(--surface)),var(--surface) 75%)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-3) 35%,transparent)!important}
.final.top .fin-grid{grid-template-columns:110px 1fr;gap:16px;align-items:start}
.final.top .fin-car svg{width:110px;height:auto}
.final.top .mb-k{margin:0;font-size:13px}
.final.top .fin-name{font-size:19px;margin:2px 0 2px;line-height:1.25}
.final.top .fin-sub{font-size:13px;margin:0 0 10px}
.final.top .fin-key{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.final.top .fin-key div{background:var(--surface);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.final.top .fin-key span{font-size:11.5px;color:var(--muted);line-height:1.3}
.final.top .fin-key strong{font-size:15px}
.final.top .fin-cta{margin-top:10px;gap:6px}
.final.top .fin-more{margin-top:8px}
.final.top .fin-more .fin-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.final.top .fin-grid{grid-template-columns:70px 1fr}.final.top .fin-car svg{width:70px}.final.top .fin-key{grid-template-columns:1fr 1fr}}

/* ===== Münzen in der Ersparnis-Kachel ===== */
.res-top .summary{position:relative;padding-right:120px}
.sum-coins{position:absolute;right:18px;bottom:16px;width:90px;height:120px;pointer-events:none;transition:opacity .4s ease}
.sum-coins svg{width:100%;height:100%;overflow:visible}
.sum-coins.empty{opacity:.35}
.scn{animation:scn-drop .5s cubic-bezier(.3,1.35,.6,1) both}
.scn.out{animation:scn-out .3s ease-in both}
@keyframes scn-drop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes scn-out{to{opacity:0;transform:translateY(-10px)}}
@media (max-width:560px){.res-top .summary{padding-right:90px}.sum-coins{width:64px;height:86px;right:12px}}
@media (prefers-reduced-motion:reduce){.scn,.scn.out{animation:none}}
/* Hinweis: Kapital reicht nicht für Barkauf */
.cap-note{margin:14px 0 0;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--sun) 22%,var(--surface));font-size:14px;line-height:1.55}
.cap-note[hidden]{display:none}
.cap-note .btn.plain{padding:2px 6px;color:var(--accent-3);font-weight:600;text-decoration:underline}

.fb-all{border:0;background:none;color:var(--accent-3);font-weight:600;font-size:11.5px;cursor:pointer;padding:0 2px;text-decoration:underline}

/* ===== Filter-Knopf neben dem Taschenrechner ===== */
.filter-fab{position:fixed;left:76px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:45;height:50px;padding:0 16px 0 13px;border-radius:16px;border:0;cursor:pointer;display:none;align-items:center;gap:7px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14.5px;box-shadow:0 8px 22px rgba(0,80,90,.28);transition:transform .2s ease}
.filter-fab:hover{transform:translateY(-2px)}
:root[data-screen="results"] .filter-fab{display:inline-flex}
@media (max-width:760px){
  .filter-fab{left:66px;height:46px;padding:0 13px 0 11px;font-size:13.5px}
  :root[data-screen="results"] .filter-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
}
@media print{.filter-fab{display:none!important}}
.f-sort{width:100%;padding:9px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.lnk{border:0;background:none;padding:0;color:var(--accent-3);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}

/* ===== Kopfzeile mit Vergrößern-Knopf ===== */
.pn-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pn-head h3{margin:0}
/* ===== Break-even ===== */
.breakeven{margin-top:22px}
.be-v{font-size:16px!important;margin:10px 0!important}
.be-chart{max-width:720px}
.be-svg{width:100%;height:auto;display:block}
/* ===== Vergrößerte Ansicht ===== */
.zoom{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.zoom[hidden]{display:none}
.zoom-bg{position:absolute;inset:0;background:rgba(20,15,10,.55);backdrop-filter:blur(3px)}
.zoom-in{position:relative;width:min(1200px,96vw);max-height:94vh;overflow:auto;background:var(--surface);border-radius:24px;padding:22px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:cp-in .25s ease both}
.zoom-in h3{margin:0 40px 6px 0}
.zoom-chart svg{width:100%;height:auto;display:block}
.zoom-x{position:absolute;top:14px;right:14px}

/* ===== Neu sortieren ===== */
.resort{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent-3) 9%,var(--surface));font-size:14px}
.resort[hidden]{display:none}
.resort .btn{background:var(--accent-3);color:var(--accent-3-on);box-shadow:none}
/* ===== Break-even: Autoauswahl ===== */
.be-picks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 2px;font-size:14px;color:var(--muted)}
.be-pick{display:inline-flex;align-items:center;gap:6px}
.be-pick select{border:0;border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;background:var(--soft);color:var(--ink);max-width:260px}
.be-dot{width:12px;height:12px;border-radius:50%}
.be-dot.a{background:var(--accent-3)}.be-dot.b{background:var(--accent-2)}

/* ===== Marken-Auswahl ===== */
.brand-pop{position:fixed;z-index:60;width:270px;max-height:min(420px,70vh);display:flex;flex-direction:column;background:var(--surface);border-radius:18px;padding:12px;box-shadow:0 18px 44px rgba(20,30,50,.25);animation:cp-in .18s ease both}
.brand-pop[hidden]{display:none}
.bp-h{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px}
.bp-list{overflow:auto;display:flex;flex-direction:column;gap:2px}
.bp-list label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer;font-size:14.5px}
.bp-list label:hover{background:var(--soft)}
.bp-list input{width:17px;height:17px;accent-color:var(--accent-3)}
.bp-list span{flex:1}
.bp-list em{font-style:normal;font-size:12px;color:var(--muted)}
.bp-ok{margin-top:10px;align-self:flex-end}
.bp-note{margin:0 4px 8px;font-size:12px;color:var(--muted)}

/* ===== SEO-Inhalte auf der Startseite (nur auf dem Startbildschirm sichtbar) ===== */
.seo-faq{max-width:860px;margin:10px auto 60px;padding:0 22px}
:root:not([data-screen="intro"]) .seo-faq{display:none}
.seo-faq h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 14px;text-align:center}
.seo-faq details{background:var(--surface);border-radius:18px;padding:14px 18px;margin:8px 0;box-shadow:0 1px 2px rgba(80,50,20,.04)}
.seo-faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:" +";color:var(--accent-3)}
.seo-faq details[open] summary::after{content:" –"}
.seo-faq p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.seo-faq a{color:var(--accent-3);font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;width:100%;margin-top:10px;font-size:13px}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent-3);text-decoration:underline}
.static-intro{max-width:760px;margin:60px auto;padding:0 22px;text-align:center}
.static-intro h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.035em;line-height:1.05;margin:0 0 14px}
.static-intro p{font-size:18px;color:var(--muted)}

/* ===== Hinweise: unverbindlich, Richtwerte ===== */
.disc-note{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:var(--soft);font-size:12.5px;line-height:1.5;color:var(--muted)}
.disc-note b{color:var(--ink)}
.disc-note a{color:var(--accent-3);font-weight:600}
.foot-disc{width:100%;margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.foot-disc a{color:var(--muted)}
@media print{.rp-disc{border:1px solid #c99a2e;background:#fff7e3;border-radius:8pt;padding:7pt 10pt;font-size:9pt;margin:2pt 0 10pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ===== Fußzeile: zentriert und gestapelt ===== */
.site-foot .sf-in.foot{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;max-width:900px;margin:0 auto}
.site-foot .foot-links{justify-content:center;margin:0}
.site-foot .foot-disc{max-width:640px;margin:0}
.foot-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.foot-meta details{text-align:left;max-width:560px}
.foot-meta summary{cursor:pointer;color:var(--accent-3);font-weight:500}
.foot-meta details p{font-size:12.5px;margin:6px 0 0}
.foot-legal{margin:0;font-size:12.5px;color:var(--muted)}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--accent-3);text-decoration:underline}

/* ===== Angebot einfügen ===== */
.paste-sheet textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:14px;padding:12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:vertical;margin:8px 0}
.paste-sheet textarea:focus{outline:none;border-color:var(--accent-3)}
.paste-car{display:flex;align-items:center;gap:10px;font-size:14px;margin:6px 0}
.paste-car select{border:0;border-radius:999px;padding:7px 12px;font:inherit;background:var(--soft);color:var(--ink)}
.paste-act{display:flex;justify-content:flex-end;margin-top:6px}
.paste-sum{font-size:14px;margin:12px 0 6px}
.paste-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media (max-width:560px){.paste-list{grid-template-columns:1fr}}
.paste-list label{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--soft);font-size:13.5px;cursor:pointer}
.paste-list label span{flex:1;color:var(--muted)}
.paste-list label.miss{opacity:.5;cursor:default}
.paste-list input{accent-color:var(--accent-3)}
.paste-notes{font-size:13px;color:var(--muted);padding-left:18px;margin:10px 0}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;max-width:min(560px,92vw);background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .3s ease,transform .3s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}