@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}
:root{--bg:#071210;--panel:#0c1d19;--panel2:#102722;--line:#244238;--green:#3e8926;--green2:#68c843;--cyan:#6fbcb1;--text:#f2f6f3;--muted:#a8b7b1;--white:#fff;--diesel:#d4a351;--danger:#d87162;--radius:22px}
.purchase-box{margin-top:22px;padding:18px;border:1px solid rgba(104,200,67,.48);border-radius:14px;background:rgba(62,137,38,.06)}.purchase-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.purchase-heading strong,.purchase-heading span{display:block}.purchase-heading span,.purchase-heading small{color:var(--muted);font-size:12px}.purchase-box label{display:block;max-width:560px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,rgba(62,137,38,.16),transparent 32%),var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;line-height:1.55}button,input{font:inherit}a{color:inherit}.site-head{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,5vw,72px);border-bottom:1px solid var(--line);background:rgba(7,18,16,.9)}.brand img{display:block;width:230px;max-width:52vw;height:auto}.draft-badge{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 12px}.hero{max-width:1280px;margin:auto;padding:clamp(54px,8vw,110px) clamp(20px,5vw,72px) 46px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:52px;align-items:center}.eyebrow{display:block;color:var(--green2);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}.hero h1{font-size:clamp(38px,5.8vw,76px);line-height:1.04;max-width:950px;margin:0 0 22px;letter-spacing:-.035em}.lead{font-size:clamp(17px,2vw,22px);color:var(--muted);max-width:900px;margin:0}.hero-mark{width:220px;height:220px;border:18px solid var(--green);border-radius:50%;display:grid;place-items:center;position:relative;color:var(--green2);font-weight:800;font-size:72px;opacity:.82}.hero-mark i{position:absolute;width:88px;height:18px;background:var(--green);right:-62px;bottom:10px;transform:rotate(45deg);border-radius:12px}.calculator{max-width:1280px;margin:0 auto 70px;padding:0 clamp(20px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:22px}.inputs-panel,.results-panel,.explain{border:1px solid var(--line);border-radius:var(--radius)}.inputs-panel{padding:clamp(24px,4vw,42px);background:rgba(12,29,25,.88)}.results-panel{padding:clamp(24px,3vw,34px);background:linear-gradient(155deg,#123228,#0b1b17);position:sticky;top:18px;align-self:start}.section-title{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}.section-title h2{font-size:clamp(25px,3vw,36px);line-height:1.1;margin:0 0 5px}.section-title p{margin:0;color:var(--muted)}.step{color:var(--green2);font-weight:800;font-size:13px;letter-spacing:.1em;padding-top:6px}.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:30px}label>span{display:block;font-size:13px;color:var(--muted);margin:0 0 7px}.field{display:flex;align-items:center;border:1px solid var(--line);background:#081511;border-radius:10px;overflow:hidden}.field:focus-within{border-color:var(--green2);box-shadow:0 0 0 3px rgba(104,200,67,.12)}.field input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:18px;font-weight:650;padding:12px}.field em{font-style:normal;font-size:12px;color:var(--muted);padding:0 11px;white-space:nowrap}.comparison-head{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}.comparison-head span{font-weight:750}.comparison-head span:last-child{color:var(--green2)}.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vehicle-card{padding:17px;border:1px solid var(--line);border-radius:14px}.vehicle-card.electric{border-color:rgba(104,200,67,.48);background:rgba(62,137,38,.06)}.vehicle-card label+label{display:block;margin-top:14px}.advanced{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}.advanced summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--green2);font-weight:750}.advanced summary::-webkit-details-marker{display:none}.advanced summary small{color:var(--muted);font-weight:400}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.advanced-grid .wide{grid-column:1/-1}.advanced-grid label small{display:block;color:var(--muted);font-size:11px;margin-top:6px}.result-hero{padding:22px;border:1px solid rgba(104,200,67,.45);border-radius:16px;background:rgba(104,200,67,.06);margin-bottom:18px}.result-hero span,.result-hero small{display:block;color:var(--muted)}.result-hero strong{display:block;color:var(--green2);font-size:clamp(42px,5vw,66px);line-height:1;margin:10px 0}.result-hero.negative strong{color:var(--danger)}.result-list>div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}.result-list span{color:var(--muted)}.result-list b{text-align:right}.bar-box{margin:22px 0}.bar-label{display:flex;justify-content:space-between;gap:20px;font-size:13px;margin-bottom:10px}.bars{display:grid;gap:6px}.bars i{display:block;height:8px;border-radius:999px;transition:width .25s ease}.bars i:first-child{background:var(--diesel)}.bars i:last-child{background:var(--green2)}.bar-legend{display:flex;gap:18px;color:var(--muted);font-size:11px;margin-top:8px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.diesel-dot{background:var(--diesel)}.electric-dot{background:var(--green2)}.pdf-button{width:100%;border:0;border-radius:10px;background:var(--green2);color:#071210;font-weight:800;padding:14px 18px;cursor:pointer}.pdf-button:hover,.pdf-button:focus-visible{background:#7adb53}.micro{font-size:11px;color:var(--muted);margin:10px 0 0;text-align:center}.explain{max-width:calc(1280px - clamp(40px,10vw,144px));margin:0 auto 70px;padding:clamp(24px,4vw,42px);background:rgba(12,29,25,.6)}.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.explain-grid article{border:1px solid var(--line);border-radius:14px;padding:20px}.explain-grid b{color:var(--green2);font-size:18px}.explain-grid p{color:var(--muted);margin:8px 0 0}.disclaimer{margin-top:22px;border-left:4px solid var(--green);background:#091713;padding:18px 20px}.disclaimer p{margin:5px 0 0;color:var(--muted);font-size:13px}footer{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:28px;padding:30px clamp(20px,5vw,72px);border-top:1px solid var(--line);color:var(--muted);font-size:13px}footer img{width:210px}footer p{margin:0}footer div{display:flex;gap:18px}dialog{width:min(620px,calc(100% - 30px));border:1px solid var(--line);border-radius:20px;padding:0;background:#0d201b;color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.65)}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}dialog form{padding:32px;position:relative}dialog h2{font-size:32px;margin:0 0 8px}dialog p{color:var(--muted)}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:var(--muted);font-size:30px;cursor:pointer}.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.lead-grid .wide{grid-column:1/-1}.lead-grid input{width:100%;border:1px solid var(--line);border-radius:9px;background:#071511;color:var(--text);padding:12px;outline:0}.lead-grid input:focus{border-color:var(--green2)}.consent{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px}.consent input{margin-top:4px}.consent span{font-size:12px;margin:0}.consent a{color:var(--green2)}.honeypot{position:absolute!important;left:-9999px!important}.form-status{font-size:12px;margin:10px 0 0;min-height:18px}.form-status.error{color:#ff9585}
.quick-slider{display:block;width:100%;height:20px;margin:7px 0 2px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.quick-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--green2) var(--range-progress,50%),var(--line) var(--range-progress,50%))}.quick-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:2px solid #dff6d5;background:var(--green2);box-shadow:0 0 0 3px rgba(104,200,67,.14)}.quick-slider::-moz-range-track{height:4px;border-radius:999px;background:var(--line)}.quick-slider::-moz-range-progress{height:4px;border-radius:999px;background:var(--green2)}.quick-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:2px solid #dff6d5;background:var(--green2)}.toll-box{margin:0 0 28px;padding:18px;border:1px solid rgba(212,163,81,.48);border-radius:14px;background:rgba(212,163,81,.055)}.toll-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:15px}.toll-heading strong{display:block;color:var(--diesel)}.toll-heading span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.toll-heading a{flex:none;color:var(--diesel);font-size:12px}.toll-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.toll-box>small{display:block;color:var(--muted);font-size:11px;margin-top:10px}.scope-warning{margin:-3px 0 14px;padding:13px 14px;border:1px solid rgba(212,163,81,.62);border-radius:11px;background:rgba(212,163,81,.09)}.scope-warning strong,.scope-warning span{display:block}.scope-warning strong{color:#f0c77d;font-size:13px}.scope-warning span{color:var(--muted);font-size:11px;margin-top:3px}
body,button,input{font-family:"Montserrat",Arial,sans-serif}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-mark{display:none}.calculator{grid-template-columns:1fr}.results-panel{position:static}.explain-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr}footer div{justify-content:flex-start}}
@media(max-width:620px){.site-head{min-height:64px}.brand img{width:180px}.draft-badge{display:none}.hero{padding-top:44px}.field-grid,.duo-grid,.advanced-grid,.lead-grid,.toll-grid{grid-template-columns:1fr}.advanced-grid .wide,.lead-grid .wide{grid-column:auto}.advanced summary{display:block}.advanced summary small{display:block;margin-top:5px}.comparison-head{display:none}.vehicle-card:before{display:block;font-weight:800;margin-bottom:12px}.vehicle-card.diesel:before{content:"Diesel-Lkw"}.vehicle-card.electric:before{content:"Elektro-Lkw";color:var(--green2)}.result-list>div{align-items:flex-start}.toll-heading{display:block}.toll-heading a{display:inline-block;margin-top:8px}.explain{margin-left:20px;margin-right:20px}.site-head,.hero,.calculator,footer{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:620px){.purchase-heading{display:block}.purchase-heading small{display:block;margin-top:8px}}
.draft-badge{text-decoration:none;transition:.2s}.draft-badge:hover,.draft-badge:focus-visible{color:var(--green2);border-color:var(--green2)}

/* Hochwertiges Lupenmotiv statt der bisherigen CSS-Illustration */
.hero{grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:clamp(34px,5vw,70px)}
.hero-mark{width:100%;height:auto;aspect-ratio:1.24/1;margin:0;border:1px solid rgba(104,200,67,.42);border-radius:28px;display:block;overflow:hidden;opacity:1;box-shadow:0 28px 70px rgba(0,0,0,.38),0 0 0 8px rgba(62,137,38,.05)}
.hero-mark img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-mark i,.hero-mark span{display:none}

/* Große Geldbeträge bleiben auch in schmalen Ergebnisboxen vollständig sichtbar */
.results-panel{container-type:inline-size}
.result-hero strong{max-width:100%;font-size:clamp(30px,8.5cqw,56px);line-height:1.04;letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}

@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-mark{display:block;width:min(100%,620px);aspect-ratio:16/10}}
@media(max-width:620px){.hero-mark{display:block;width:100%;aspect-ratio:4/3;border-radius:20px}.result-hero strong{font-size:clamp(30px,10cqw,44px)}}

/* Einheitliche Oberkante für Beschriftung, Eingabefeld und Schieberegler */
.primary-fields>label{display:flex;min-width:0;flex-direction:column}
.primary-fields>label>span{display:flex;align-items:flex-end;min-height:3.1em;line-height:1.45}
.primary-fields>label>.field{width:100%}
.primary-fields>label>.quick-slider{margin-top:7px}
@media(max-width:620px){.primary-fields>label>span{min-height:0}}