/* RateCar – Entwurf 09.11.2026. Nur hell: Papier und Weiß, Tinte als Text, Mint als einziger Akzent. Marke: /marke/ und MARKE.md. */
@font-face{font-family:Geist;src:url('assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Nur hell (Yaser 09.11. 20:01): weißer und Papier-Grund, Tinte als Text, Mint als Akzent, Mint dunkel für Text-Akzente */
  --ink:#ffffff;--ink-2:#f5f9f8;--tq:#2ad6a0;--tq-ink:#032016;--tq-dark:#0a7a59;--tq-soft:#e3f6ef;
  --text:#0b1414;--text-soft:#22302e;--muted:#4f6361;--placeholder:#627673;--err:#b42318;--err-line:#b42318;--err-dark:#b42318;--line:rgba(11,20,20,.12);--glass:#ffffff;
  --paper:#f5f9f8;--paper-2:#eaf2ef;--paper-ink:#0b1414;--paper-ink-2:#22302e;--paper-muted:#4f6361;--paper-line:#dbe5e3;--field-line:#7d8f8c;
  --r-xs:6px;--r-s:12px;--r:18px;--r-img:20px;--r-pill:99px;--wrap:1120px;--pad:clamp(20px,4vw,40px);--sec:clamp(64px,9vw,120px);
  --ease:cubic-bezier(.19,1,.22,1);
}
html{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Geist,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:16px;line-height:1.55;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
a{color:inherit}
img,svg{display:block}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
:focus-visible{outline:2px solid var(--tq-dark);outline-offset:3px;border-radius:var(--r-xs)}
.light :focus-visible,.mk-alt :focus-visible,.related :focus-visible{outline-color:var(--tq-dark)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:var(--r-xs);z-index:50}
.skip:focus{left:8px}

/* Kopf */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.03em}
.logo b{color:var(--tq-dark);font-weight:700}
.logo-mark{width:26px;height:19px;fill:var(--tq-dark)}
.logo-mark rect:nth-child(1){opacity:.4}.logo-mark rect:nth-child(2){opacity:.6}.logo-mark rect:nth-child(3){opacity:.8}

/* Knöpfe */
.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--r-pill);background:var(--tq);color:var(--tq-ink);font-weight:600;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(42,214,160,.28);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(42,214,160,.36)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px;box-shadow:none}
.btn-wide{width:100%;margin-top:8px}
.btn-dark{margin-top:24px}
.link{color:var(--text);font-weight:500;text-underline-offset:4px;text-decoration-color:rgba(11,20,20,.35)}
.link:hover{text-decoration-color:var(--tq-dark)}

/* Eyebrow */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tq-dark);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.eyebrow-dark{color:var(--tq-dark)}

h1{font-size:clamp(38px,6.4vw,72px);line-height:1.02;font-weight:750;letter-spacing:-.035em}
h1 span{color:var(--tq-dark)}
h2{font-size:clamp(28px,3.8vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.03em;max-width:22ch}
h3{font-size:18px;font-weight:650;letter-spacing:-.015em;margin-bottom:8px}
.lead{margin-top:20px;font-size:clamp(17px,1.5vw,19px);color:var(--text-soft);max-width:34em}
.body{margin-top:16px;font-size:17px;max-width:36em}
.muted{color:var(--muted)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,104px);
  background:radial-gradient(60% 70% at 85% 30%,rgba(42,214,160,.14),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(42,214,160,.06),transparent 70%),var(--ink)}
.hero-in{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.hero-in{grid-template-columns:1.1fr .9fr;gap:56px}}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.facts li{padding:9px 14px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--glass);font-size:14.5px;color:var(--text-soft)}
.facts strong{color:var(--paper-ink);font-weight:650;margin-right:4px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}

.card-glass{border:1px solid var(--line);background:var(--glass);border-radius:var(--r);padding:clamp(20px,3vw,28px)}

/* Ratenrechner: das „Ratenband“ */
.calc{background:#fff;border-color:var(--paper-line);box-shadow:0 24px 60px rgba(6,10,10,.08)}
.calc-title{font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:18px;max-width:none}
.calc-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.calc-price output{font-size:34px;font-weight:650;letter-spacing:-.03em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:6px 0 18px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--tq-dark) var(--p,33%),#b9c7c4 var(--p,33%))}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-xs);background:#b9c7c4}
input[type=range]::-moz-range-progress{height:6px;border-radius:var(--r-xs);background:var(--tq-dark)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:4px solid var(--tq-dark);box-shadow:0 2px 10px rgba(6,10,10,.18)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--tq-dark)}
.seg-toggle{border:0;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg-toggle legend{grid-column:1/-1;padding:0}
.seg-toggle label{position:relative}
.seg-toggle input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg-toggle span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-s);border:1px solid var(--field-line);font-weight:550;font-size:15px;transition:background .2s,border-color .2s,color .2s}
.seg-toggle input:checked+span{background:rgba(42,214,160,.12);border-color:var(--tq-dark);color:var(--paper-ink)}
.seg-toggle input:focus-visible+span{outline:2px solid var(--tq-dark);outline-offset:2px}
.band{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:34px;margin:4px 0 16px}
.band i{border-radius:3px;background:rgba(11,20,20,.07);transform-origin:bottom;transition:background .35s var(--ease),transform .5s var(--ease),opacity .3s}
.band{filter:drop-shadow(0 0 10px rgba(42,214,160,.25))}
.band i.on{background:var(--tq)}
.band i.off{opacity:.25;transform:scaleY(.35)}
.rate{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.rate-label{color:var(--muted);font-size:14px}
.rate output{font-size:clamp(40px,5vw,52px);font-weight:700;letter-spacing:-.04em;color:var(--paper-ink)}
.rate-detail{margin-top:6px;text-align:right;font-size:12.5px;color:var(--muted);min-height:1em}
.calc-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.calc-sum div{display:flex;justify-content:space-between;padding:10px 12px;border-radius:var(--r-s);background:rgba(11,20,20,.04);font-size:14px}
.calc-sum dt{color:var(--muted)}
.calc-sum dd{font-weight:600}
.calc-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* Abschnitte hell/dunkel */
.light{background:var(--paper);color:var(--paper-ink);padding:var(--sec) 0}
.light .body{color:var(--paper-muted)}
.dark{padding:var(--sec) 0;background:radial-gradient(50% 60% at 100% 0%,rgba(42,214,160,.08),transparent 70%),#fff;color:var(--text)}
.card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:24px;transition:transform .3s var(--ease)}
.steps{list-style:none;padding:0;display:grid;gap:14px;margin-top:40px}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps .card:hover{transform:translateY(-3px)}
.steps p{color:var(--paper-muted);font-size:15.5px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--tq-soft);color:var(--tq-dark);font-weight:700;margin-bottom:18px}
.grid3{display:grid;gap:14px;margin-top:40px}
@media(min-width:860px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid3 p{color:var(--text-soft);font-size:15.5px}
.split{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.checklist{counter-reset:c;list-style:none;display:grid;gap:14px}
.checklist li{counter-increment:c;display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--paper-muted)}
.checklist li::before{content:counter(c);flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(10,122,89,.1);color:var(--tq-dark);font-weight:700;font-size:14px}
.checklist b{color:var(--paper-ink)}
.factlist{display:grid;gap:0;padding:8px 24px}
.factlist div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--paper-line);font-size:15px}
.factlist div:last-child{border-bottom:0}
.factlist dt{color:var(--paper-muted)}
.factlist dd{font-weight:550}

/* Formular */
.form{margin-top:32px;display:grid;gap:8px}
.form fieldset{border:0;padding:0 0 18px;margin:0 0 6px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.form legend{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tq-dark);margin-bottom:10px;padding:0}
.form label,.form .label{font-size:14px;color:var(--text-soft);margin-top:8px}
.form i{color:var(--tq-dark);font-style:normal}
.form input:not([type=radio]):not([type=checkbox]):not([type=file]),.form select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--field-line);background:#fff;color:var(--paper-ink);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.form select option{color:#000}
.form input::placeholder{color:var(--placeholder)}
.form input:focus,.form select:focus{outline:none;border-color:var(--tq-dark);box-shadow:0 0 0 3px rgba(42,214,160,.2)}
.form .invalid{border-color:var(--err-line)!important}
.two{display:grid;gap:6px 12px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.two>div{display:grid;gap:6px}
.seg-toggle-form{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;margin:0}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--field-line);font-size:14.5px;transition:background .2s,border-color .2s}
.chips input:checked+span{background:rgba(42,214,160,.14);border-color:var(--tq-dark);color:var(--paper-ink)}
.chips input:focus-visible+span{outline:2px solid var(--tq-dark);outline-offset:2px}
.drop{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;padding:22px 16px;border-radius:var(--r-s);border:1.5px dashed var(--field-line);background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.drop:focus-within{outline:2px solid var(--tq-dark);outline-offset:3px}
.drop.over,.drop:hover{border-color:var(--tq-dark);background:rgba(42,214,160,.06)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-txt b{color:var(--tq-dark)}
.drop-hint{font-size:12.5px;color:var(--muted)}
.files{list-style:none;padding:0;display:grid;gap:6px;font-size:13.5px}
.files li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:var(--r-s);background:rgba(11,20,20,.04)}
.files li span:last-child{color:var(--muted);white-space:nowrap}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px!important;color:var(--muted)!important}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--tq-dark)}
.err{font-size:13.5px;color:var(--err)}
.form-small{font-size:12.5px;color:var(--muted);margin-top:10px}
.light .form-small{color:var(--paper-muted)}
.thanks{margin-top:32px;font-size:17px}

/* FAQ */
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--tq-dark);font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--text-soft);max-width:60ch}

.final{padding:clamp(56px,8vw,96px) 0;background:radial-gradient(60% 120% at 50% 100%,rgba(42,214,160,.16),transparent 70%),var(--ink-2);border-top:1px solid var(--line)}
.final-in{display:grid;justify-items:start;gap:24px}
@media(min-width:860px){.final-in{grid-template-columns:1fr auto;align-items:center}}
.foot{padding:28px 0 96px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}
@media(min-width:760px){.foot{padding-bottom:28px}}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}

@media(max-width:420px){.facts{gap:8px}.facts li{padding:8px 11px;font-size:13.5px}.top .btn-sm{padding:0 14px;font-size:13.5px}}
/* Handy: Knopf bleibt unten erreichbar */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:30;transform:translateY(140%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.sticky-cta.show{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
@media(min-width:760px){.sticky-cta{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  }

/* Unterseiten */
.legal{padding:56px 0 80px}
.legal h1{font-size:clamp(32px,5vw,48px);margin-bottom:24px}
.legal h2{font-size:20px;margin:32px 0 8px;max-width:none}
.legal p,.legal li{color:var(--text-soft);max-width:68ch}
.legal a{color:var(--tq-dark)}

/* ===== Überarbeitung 09.11. abends: Navigation, Autos, Ratgeber ===== */
.nav{display:none}
@media(min-width:760px){.nav{display:flex;gap:24px;margin-left:auto;margin-right:22px}.nav a{text-decoration:none;color:var(--text-soft);font-weight:500;font-size:14.5px}.nav a:hover{color:var(--paper-ink)}}
.btn .sm{display:none}
@media(max-width:420px){.btn .lg{display:none}.btn .sm{display:inline}}
.calc{scroll-margin-top:90px}
section[id],#anfrage{scroll-margin-top:72px}

.autos-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.autos-grid figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-line);aspect-ratio:1/1}
.autos-grid img{width:100%;height:100%;object-fit:cover}
.autos-grid .autos-main{grid-column:1/-1;aspect-ratio:3/2}
.autos-text{grid-column:1/-1}
.autos-text p{color:var(--text-soft);font-size:16.5px}
.autos-text .cta-row{margin-top:20px}
@media(min-width:960px){
  .autos-grid{grid-template-columns:1.5fr 1fr 1fr;gap:14px}
  .autos-grid .autos-main{grid-column:1;grid-row:1/3;aspect-ratio:auto}
  .autos-grid figure:not(.autos-main){aspect-ratio:4/3}
  .autos-text{grid-column:2/4}
}
.factlist a{color:var(--tq-dark);text-underline-offset:3px}

.teaser-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.link-dark{color:var(--paper-ink);font-weight:600;text-underline-offset:4px;text-decoration-color:rgba(10,122,89,.5)}
.cards{display:grid;gap:16px;margin-top:32px}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--paper-ink);transition:transform .3s var(--ease),box-shadow .3s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(6,10,10,.08)}
.post-img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;background:var(--paper-line)}
.post-body{display:grid;gap:6px;padding:18px 20px 22px}
.post-kat{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tq-dark)}
.post-title{font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.post-desc{font-size:14.5px;color:var(--paper-muted);line-height:1.5}

/* Ratgeber-Seiten (hell) */
main.article{background:var(--paper);color:var(--paper-ink);padding:28px 0 0}
.crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--paper-muted);margin-bottom:22px}
.crumbs a{color:var(--paper-muted);text-underline-offset:3px}
main.article h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.03em;color:var(--paper-ink);max-width:24ch}
.index-h1{max-width:20ch}
.meta{margin-top:14px;font-size:14px;color:var(--paper-muted)}
.lead-dark{margin-top:16px;font-size:18px;color:var(--paper-muted);max-width:40em}
.cards-index{padding-bottom:80px}
.article-hero{margin-top:28px;max-width:1080px}
.hero-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);background:var(--paper-line)}
@media(min-width:700px){.hero-img{aspect-ratio:21/9}}
.tldr{margin:32px 0 8px;background:#fff;border:1px solid var(--paper-line);border-left:4px solid var(--tq-dark);border-radius:var(--r);padding:20px 24px}
.tldr h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--tq-dark);margin-bottom:10px;max-width:none}
.tldr ul{margin:0;padding-left:20px;display:grid;gap:8px}
.tldr li{font-size:16px;line-height:1.55}
.prose h2{font-size:clamp(23px,2.6vw,28px);margin:44px 0 12px;max-width:none;color:var(--paper-ink)}
.prose p,.prose li{font-size:17px;line-height:1.72;color:var(--paper-ink-2)}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;margin:12px 0;display:grid;gap:8px}
.prose a{color:var(--tq-dark);font-weight:550;text-underline-offset:3px}
.prose strong{color:var(--paper-ink)}
.prose .small{font-size:13.5px;color:var(--paper-muted);margin-top:8px}
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--paper-line);border-radius:var(--r-s);background:#fff}
.prose table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--paper-line)}
.prose th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-muted);background:var(--paper-2)}
.prose tr:last-child td{border-bottom:0}
.cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin:48px 0;padding:26px;border-radius:var(--r-img);color:var(--text);border:1px solid var(--paper-line);background:radial-gradient(70% 120% at 100% 0%,rgba(42,214,160,.2),transparent 70%),#fff}
.cta-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.cta-box p:not(.cta-title){color:var(--text-soft);font-size:15px}
.faq-light{margin-top:8px;border-top:0}
.faq-light h2{font-size:clamp(23px,2.6vw,28px);margin-bottom:12px;max-width:none}
.faq-light details{border-bottom:1px solid var(--paper-line)}
.faq-light details:first-of-type{border-top:1px solid var(--paper-line)}
.faq-light summary{color:var(--paper-ink)}
.faq-light summary::after{color:var(--tq-dark)}
.faq-light p{color:var(--paper-ink-2)}
.hinweis{margin:28px 0 56px;font-size:13.5px;color:var(--paper-muted)}
.related{background:var(--paper-2);padding:56px 0 72px}
.related h2{font-size:clamp(23px,2.6vw,30px);max-width:none}
.legal-page{padding-bottom:72px}
.legal-page h1{margin-bottom:12px}
.legal-page h2{font-size:20px;margin:32px 0 8px;max-width:none}
.legal-page p,.legal-page li{color:var(--paper-ink-2);max-width:68ch;line-height:1.65}
.legal-page a{color:var(--tq-dark)}
.legal-page ul{padding-left:20px;display:grid;gap:6px}

/* Icons (Marke: 24er Raster, Linie 1,75, currentColor) */
.ico-wrap{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(42,214,160,.1);border:1px solid rgba(42,214,160,.22);color:var(--tq-dark);margin-bottom:16px}
.ico{width:22px;height:22px}
.light .ico-wrap,.ico-wrap{background:rgba(10,122,89,.08);border-color:rgba(10,122,89,.2);color:var(--tq-dark)}

/* Honigtopf im Formular: für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Hero mit großem Autofoto (Yaser 10.11.: „in der ersten Sekunde klar, dass es um Autos geht“) */
.ico-auto{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.eyebrow-auto{display:inline-flex;align-items:center;gap:8px}
.facts .fact-auto{display:inline-flex;align-items:center;gap:6px;border-color:var(--tq-dark);color:var(--paper-ink)}
.facts .fact-auto .ico-auto{color:var(--tq-dark)}
.rechner-sektion .split{align-items:center}
/* Handy (Yaser 11.11. 16:39): Kicker → Überschrift → Text → AUTO → Chips → Knöpfe.
   .hero-text wird aufgelöst (display:contents), damit das Auto genau zwischen Text und Chips sitzt,
   mit gleicher Luft (--hero-luft) darüber und darunter. Desktop (ab 960px) bleibt unverändert. */
@media(max-width:959.98px){
  .hero{padding-top:28px;--hero-luft:26px}
  .hero-in{gap:0}
  .hero-text{display:contents}
  .hero-text>.eyebrow{order:1}
  .hero-text>h1{order:2}
  .hero-text>.lead{order:3}
  .hero-text>.facts{order:5;margin-top:var(--hero-luft)}
  .hero-text>.cta-row{order:6}
  .hero h1{font-size:clamp(30px,8.4vw,44px)}
}

/* „So funktioniert's“ als vertikale Timeline, mittige Spalte (Yaser 10.11. 20:38) */
.rechner-sektion+.ablauf-sektion{padding-top:0}
.ablauf-in{max-width:680px;text-align:center}
.ablauf-in .eyebrow{justify-content:center}
.timeline{list-style:none;padding:0;margin:40px auto 0;text-align:left;position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:20px;padding-bottom:30px}
.timeline li:last-child{padding-bottom:0}
.tl-punkt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--tq-dark);color:var(--tq-dark);font-weight:700;font-size:17px}
.tl-ziel .tl-punkt{background:var(--tq);border-color:var(--tq-dark);color:var(--tq-ink)}
.tl-text{padding:16px 22px;border:1px solid var(--paper-line);border-radius:var(--r);background:#fff}
.tl-text h3{display:flex;align-items:center;gap:8px;font-size:19px;margin:0 0 6px}
.tl-text h3 .ico-auto{color:var(--tq-dark)}
.tl-text p{color:var(--paper-muted);font-size:15.5px;margin:0}
.tl-text a{color:var(--tq-dark)}
@media(max-width:560px){.timeline li{grid-template-columns:36px 1fr;gap:14px;padding-bottom:22px}.tl-punkt{width:36px;height:36px;font-size:15px}.tl-text{padding:14px 16px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hero-Auto freigestellt (Yaser 10.11. 20:47: „großes Bild“). Zwei Varianten:
   .hero--neben = Auto groß neben der Überschrift, .hero--breit = Auto über die volle Breite unter dem Text. */
.hero-auto{margin:0;position:relative;display:flex;flex-direction:column;align-items:center}
.hero-auto::before{content:"";position:absolute;inset:8% -6% 4% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(42,214,160,.20),rgba(42,214,160,.06) 60%,transparent);z-index:0}
.hero-auto::after{content:"";position:absolute;left:8%;right:8%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(6,10,10,.28),transparent);filter:blur(2px);z-index:0}
.hero-auto img{position:relative;z-index:1;width:100%;height:auto;display:block}
.hero-auto figcaption{position:relative;z-index:1;margin-top:10px;font-size:12px;color:var(--muted)}
@media(min-width:960px){
  .hero--neben .hero-in{grid-template-columns:1fr 1.1fr;gap:40px}
  .hero--neben .hero-auto{margin-right:calc(-1 * var(--pad))}
  .hero--breit{padding-top:clamp(32px,4vw,56px)}
  .hero--breit .hero-in{grid-template-columns:1fr;text-align:center;justify-items:center;gap:8px}
  .hero--breit .hero-text{max-width:860px}
  .hero--breit h1{font-size:clamp(40px,4.4vw,60px)}
  .hero--breit .hero-text .eyebrow{justify-content:center}
  .hero--breit .lead{margin-left:auto;margin-right:auto;max-width:640px}
  .hero--breit .facts,.hero--breit .cta-row{justify-content:center}
  .hero--breit .hero-auto{width:min(820px,100%);margin-top:4px}
}
@media(max-width:959.98px){
  .hero-auto{order:4;margin:var(--hero-luft) calc(-.5 * var(--pad)) 0}
}

/* Anfrage: Bild links, Formular in 4 Schritten (Yaser 10.11. 23:02) */
.anfrage-in{display:grid;gap:28px;align-items:start}
.anfrage-bild{margin:0;position:relative;border-radius:var(--r-img);overflow:hidden;background:radial-gradient(80% 60% at 50% 45%,rgba(42,214,160,.22),rgba(42,214,160,.06) 60%,transparent),var(--tq-soft);display:flex;flex-direction:column;justify-content:center;padding:22px 12px}
.anfrage-bild img{width:100%;max-width:none;margin:0;height:auto;display:block;filter:drop-shadow(0 18px 18px rgba(6,10,10,.18))}
.anfrage-fakten{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.anfrage-fakten li{padding:7px 12px;border-radius:var(--r-pill);background:#fff;font-size:13.5px;color:var(--text-soft);border:1px solid var(--paper-line)}
.anfrage-fakten b{color:var(--paper-ink);margin-right:3px}
.anfrage-form-wrap .form{margin-top:18px}
.wiz-fortschritt{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:none}
.wiz-fortschritt li{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);padding-top:10px;border-top:4px solid var(--paper-line)}
.wiz-fortschritt li span{display:none}
.wiz-fortschritt li.fertig{border-top-color:var(--tq-dark);color:var(--paper-ink)}
.wiz-fortschritt li.jetzt{border-top-color:var(--tq);color:var(--paper-ink);font-weight:650}
.wiz .wiz-schritt legend{display:flex;flex-direction:column;gap:2px;font-size:20px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--paper-ink);margin-bottom:6px}
.wiz .wiz-nr{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tq-dark)}
.wiz-aktiv .wiz-schritt{border-bottom:0}
.wahl{display:grid;grid-template-columns:1fr;gap:8px;margin:4px 0 6px;border-radius:var(--r-s)}
.wahl-2{grid-template-columns:1fr 1fr}
.wahl-3{grid-template-columns:repeat(3,1fr)}
.wahl label{position:relative;margin:0}
.wahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wahl span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:8px 10px;border-radius:var(--r-s);border:1.5px solid var(--field-line);background:#fff;font-weight:600;font-size:15px;line-height:1.25;transition:background .15s,border-color .15s}
.wahl input:checked+span{background:var(--tq-soft);border-color:var(--tq-dark);box-shadow:inset 0 0 0 1px var(--tq-dark)}
.wahl input:focus-visible+span{outline:3px solid var(--tq-dark);outline-offset:2px}
.wahl.invalid{outline:2px solid var(--err);outline-offset:4px}
.wiz-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.wiz-nav .wiz-weiter,.wiz-nav .wiz-senden{margin-left:auto}
.btn-ghost{background:#fff;color:var(--paper-ink);border:1.5px solid var(--field-line);box-shadow:none}
.btn-ghost:hover{border-color:var(--tq-dark)}
.wiz-zusammenfassung{margin:0 0 6px;display:grid;gap:0;border:1px solid var(--paper-line);border-radius:var(--r-s);background:#fff;overflow:hidden}
.wiz-zusammenfassung div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 14px;border-top:1px solid var(--paper-line);font-size:14.5px}
.wiz-zusammenfassung div:first-child{border-top:0}
.wiz-zusammenfassung dt{color:var(--muted)}
.wiz-zusammenfassung dd{margin:0;color:var(--paper-ink);word-break:break-word}
@media(min-width:960px){
  .anfrage-in{grid-template-columns:.9fr 1.1fr;gap:56px}
  .anfrage-bild{position:sticky;top:96px;min-height:520px;padding:40px 24px}
  .anfrage-bild img{width:100%;margin-left:0}
}
@media(max-width:959px){
  .anfrage-bild{padding:10px 8px 14px}
  .anfrage-bild img{width:78%;margin:0 auto}
  .anfrage-fakten{margin-top:6px}
  .wahl-3{grid-template-columns:1fr 1fr 1fr}
}
.feld-hinweis{margin:2px 0 4px;font-size:13.5px;color:var(--err);font-weight:550}

/* Timeline: Farbe läuft mit runter (Yaser 10.11. 23:03). Linie von Punktmitte zu Punktmitte in drei Abschnitten,
   zusammen ein Verlauf hell-mint -> kräftiges Grün; Punkte von hell getönt bis voll grün. Mit JS füllt sich jeder
   Abschnitt beim Scrollen (--f), ohne JS bzw. bei „Bewegung reduzieren“ ist alles gefüllt.
   Die Linie ist Schmuck; die Reihenfolge tragen Nummern und Liste. */
.timeline{--tl-mitte:22px}
.timeline li{--f:1;--von:#bff0dd;--bis:#5fdcb3}
.timeline li:nth-child(2){--von:#5fdcb3;--bis:#1fae82}
.timeline li:nth-child(3){--von:#1fae82;--bis:#0a7a59}
.timeline li:not(:last-child)::before,.timeline li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--tl-mitte) - 2px);top:var(--tl-mitte);width:4px;height:100%;z-index:0}
.timeline li:not(:last-child)::before{background:#e3f6ef}
.timeline li:not(:last-child)::after{background:linear-gradient(180deg,var(--von),var(--bis));transform:scaleY(var(--f));transform-origin:top}
.timeline li:nth-child(1) .tl-punkt{background:#effaf6;border-color:#bff0dd;color:#0a6b4e}
.timeline li:nth-child(2) .tl-punkt{background:#c9f2e3;border-color:#5fdcb3;color:#06573f}
.timeline li:nth-child(3) .tl-punkt{background:#7fe4c3;border-color:#1fae82;color:#032016}
.timeline li:nth-child(4) .tl-punkt{background:#2ad6a0;border-color:#0a7a59;color:#032016}
@media(max-width:560px){.timeline{--tl-mitte:18px}}
@media(prefers-reduced-motion:reduce){.timeline li{--f:1!important}}

/* Rückmeldungen im Anfrage-Formular (11.11.2026): eine Form für Hinweis, Fehler und Erfolg */
.rueckmeldung{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--paper-line);background:#fff;font-size:14.5px;line-height:1.5;color:var(--paper-ink)}
.rueckmeldung[hidden]{display:none}
.rueckmeldung p{margin:0}
.rueckmeldung .rm-titel{font-weight:650;margin-bottom:2px}
.rueckmeldung a{color:inherit;font-weight:600}
.rm-ico{width:24px;height:24px}
.rm-hinweis{border-color:#f0c9a4;background:#fff8f1}
.rm-hinweis .rm-ico{color:#b45309}
.rm-fehler{border-color:#f3b8b2;background:#fff5f4}
.rm-fehler .rm-ico{color:var(--err)}
.rm-ok{border-color:var(--tq-dark);background:var(--tq-soft);padding:20px;font-size:15.5px}
.rm-ok .rm-ico{color:var(--tq-dark)}
.rm-ok .rm-titel{font-size:18px}
.rm-schritte{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.thanks.rueckmeldung{margin-top:24px}
.lade{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:lade .8s linear infinite;vertical-align:-3px}
@keyframes lade{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lade{animation:none;border-right-color:currentColor;opacity:.6}}
/* NumberFlow im Rechner: Ziffern tabellarisch, erbt Schrift und Farbe */
number-flow{font-variant-numeric:tabular-nums;--number-flow-char-height:1em}

/* Hero: ruhige Ladephase (Yaser 11.11. 12:08). Nur im Hero, unter 1 s, nur transform/opacity.
   Text kommt nacheinander leicht von unten, das Auto fährt kurz von rechts ein.
   Das Auto nutzt „transform“ für die Ladephase und „translate“ (per JS) fürs Scrollen, so stören sich beide nicht. */
@keyframes hero-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-auto-ein{from{transform:translateX(9%)}to{transform:none}}
@keyframes hero-hoch{from{transform:translateY(14px)}to{transform:none}}
@media(prefers-reduced-motion:no-preference){
  .hero-text>.eyebrow,.hero-text>h1,.hero-text>.lead,.hero-text>.facts,.hero-text>.cta-row{animation:hero-auf .55s var(--ease) both}
  .hero-text>h1{animation-delay:.06s}
  .hero-text>.lead{animation-delay:.12s}
  .hero-text>.facts{animation-delay:.18s}
  /* Knöpfe bleiben immer sichtbar (fokussierbar), sie gleiten nur leicht hoch */
  .hero-text>.cta-row{animation:hero-hoch .55s var(--ease) .24s both}
  .hero-auto{animation:hero-auto-ein .8s var(--ease) .05s both}
}
@media print{
  .hero-text>*,.hero-auto{animation:none!important;opacity:1!important;transform:none!important;translate:none!important}
}