/* ==========================================================================
   Auto Sofort Verkauft — Design-System "Kennzeichen"
   Palette: Schildweiß / Asphalt / EU-Blau / Bargeld-Grün
   Keine externen Schriften (DSGVO + Ladezeit): reiner System-Font-Stack.
   -> Wenn Sie später eigene Schriften selbst hosten wollen, siehe
      /fonts/README.txt und aktivieren Sie die @font-face-Blöcke dort.
   ========================================================================== */
:root{
  --plate:#F4F5F0; --asphalt:#14161B; --asphalt-70:#33373F; --asphalt-55:#565B64;
  --eu-blue:#00287A; --eu-blue-light:#0039AD; --cash:#0F7A47; --cash-dark:#0A5C35;
  --wa:#128C7E; --line:#D3D6CE; --card:#FFFFFF; --radius:12px; --maxw:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shadow:0 6px 0 rgba(20,22,27,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--font);background:var(--plate);color:var(--asphalt);line-height:1.65;font-size:18px;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--eu-blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--eu-blue-light);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Skip-Link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--asphalt);padding:12px 18px;font-weight:800;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- Header ---------- */
header.site{background:var(--asphalt);color:var(--plate);position:sticky;top:0;z-index:60;border-bottom:4px solid var(--eu-blue)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px}
header.site .logo{flex:1 1 auto;min-width:0}
.head-actions{flex:0 0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--plate);font-weight:800;letter-spacing:.01em;font-size:19px;line-height:1.15;overflow:hidden}
.logo>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.logo .k{flex:none}
.logo .k{background:var(--card);color:var(--asphalt);font-family:var(--mono);font-weight:700;padding:3px 11px;border-radius:6px;border:2px solid var(--asphalt);box-shadow:inset 4px 0 0 var(--eu-blue);font-size:19px}
.logo small{display:block;font-weight:600;font-size:12.5px;color:#A9AEB7;letter-spacing:.06em;text-transform:uppercase}
.head-actions{display:flex;align-items:center;gap:10px}
.call-head{background:var(--cash);color:#fff;text-decoration:none;font-weight:800;padding:12px 20px;border-radius:var(--radius);white-space:nowrap;font-size:17px}
.call-head:hover{background:var(--cash-dark)}
.wa-head{background:var(--wa);color:#fff;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:var(--radius);white-space:nowrap;font-size:17px}
.wa-head:hover{filter:brightness(1.08)}
nav.main{background:#0E1015;border-top:1px solid #23262D}
nav.main ul{display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:0}
nav.main ul::-webkit-scrollbar{display:none}
nav.main a{display:block;color:#D2D6DD;text-decoration:none;font-weight:700;font-size:15.5px;padding:13px 15px;white-space:nowrap;border-bottom:3px solid transparent}
nav.main a:hover{color:#fff;background:#191C22}
nav.main a[aria-current="true"]{color:#fff;border-bottom-color:#7BD8A6}

/* ---------- USP-Leiste ---------- */
.usp{background:#fff;border-bottom:1.5px solid var(--line)}
.usp ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;gap:0}
.usp li{display:flex;gap:9px;align-items:center;font-weight:700;font-size:15px;padding:14px 10px;border-left:1.5px solid var(--line);color:var(--asphalt)}
.usp li:first-child{border-left:none}
.usp li b{color:var(--cash);font-size:18px;line-height:1}

/* ---------- Kennzeichen-Element ---------- */
.plate{display:inline-flex;align-items:stretch;background:#fff;border:3px solid var(--asphalt);border-radius:8px;overflow:hidden;
       font-family:var(--mono);font-weight:700;box-shadow:0 4px 0 rgba(20,22,27,.16);max-width:100%}
.plate .eu{background:var(--eu-blue);color:#FFD617;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 7px 4px;font-size:.55em;line-height:1;flex:none}
.plate .eu .stars{font-size:.9em;letter-spacing:-1px}
.plate .txt{display:flex;align-items:center;padding:6px 15px;color:var(--asphalt);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate.big{font-size:clamp(21px,4.2vw,40px)}
.plate.mid{font-size:clamp(19px,3.2vw,28px)}
.plate.small{font-size:16.5px;box-shadow:0 3px 0 rgba(20,22,27,.13)}

/* ---------- Hero ---------- */
.hero{background:var(--asphalt);color:var(--plate);padding:48px 0 60px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.hero h1{font-weight:900;font-size:clamp(29px,4.1vw,45px);line-height:1.1;margin:22px 0 16px;letter-spacing:-.01em}
.hero h1 .u{color:#7BD8A6}
.hero p.lead{font-size:clamp(17px,1.9vw,20px);color:#D3D7DE;margin-bottom:24px}
.hero .trust{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:9px 28px;margin-top:26px;font-size:15.5px;color:#C6CAD2;font-weight:600}
.hero .trust span{display:flex;gap:8px;align-items:baseline}
.hero .trust span::before{content:"✓";color:#7BD8A6;font-weight:900}
.hero .altcta{margin-top:26px;padding-top:22px;border-top:1px solid #2B2F37;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:16px;color:#AEB3BC}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:800;padding:16px 26px;border-radius:var(--radius);
     font-size:18px;min-height:56px;transition:transform .12s ease,background .12s ease;font-family:var(--font);cursor:pointer;border:none;text-align:center;line-height:1.25}
.btn:hover{transform:translateY(-2px)}
.btn.green{background:var(--cash);color:#fff}
.btn.green:hover{background:var(--cash-dark)}
.btn.wa{background:var(--wa);color:#fff}
.btn.wa:hover{filter:brightness(1.08)}
.btn.blue{background:var(--eu-blue);color:#fff}
.btn.ghost{background:transparent;color:var(--plate);border:2px solid var(--plate)}
.btn.big{font-size:19px;padding:18px 32px;min-height:62px}
.btn.wide{width:100%}

/* ---------- Sections ---------- */
section{padding:60px 0}
section.tight{padding:40px 0}
.white{background:#fff;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--eu-blue);margin-bottom:10px;font-weight:700}
h2{font-weight:900;font-size:clamp(25px,3.4vw,36px);line-height:1.15;margin-bottom:14px;letter-spacing:-.01em}
h3{font-weight:800}
.sub{color:var(--asphalt-70);max-width:680px;margin-bottom:34px;font-size:18px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.step .n{font-family:var(--mono);font-weight:700;color:#fff;background:var(--eu-blue);display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:9px;margin-bottom:14px;font-size:18px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{font-size:16.5px;color:var(--asphalt-70)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tick{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.tick b{display:block;font-size:17.5px}
.tick .ic{color:var(--cash);font-weight:900;font-size:19px;line-height:1.45;flex:none}
.tick p{font-size:16px;color:var(--asphalt-70)}
.districts{display:flex;flex-wrap:wrap;gap:12px}
.districts a{text-decoration:none}
.districts .plate .txt{padding:6px 14px}
.districts a:hover .plate{border-color:var(--eu-blue);box-shadow:0 3px 0 var(--eu-blue)}
.cardlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cardlink{background:var(--card);border:1.5px solid var(--line);border-left:6px solid var(--eu-blue);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--asphalt);display:block}
.cardlink:hover{border-left-color:var(--cash);box-shadow:var(--shadow);transform:translateY(-2px);transition:.12s}
.cardlink b{display:block;font-size:19px;margin-bottom:5px}
.cardlink span{color:var(--asphalt-70);font-size:16px}
.prose{max-width:760px}
.prose p{margin-bottom:18px}
.prose h2{margin-top:8px}
.prose h3{margin:32px 0 10px;font-size:22px}
.prose ul{margin:0 0 20px 22px}
.prose li{margin-bottom:8px}
.prose a{font-weight:700}
.facts{background:var(--card);border:1.5px solid var(--line);border-left:6px solid var(--eu-blue);border-radius:var(--radius);padding:22px 26px;margin:28px 0;font-size:16.5px}
.facts dt{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--asphalt-55);margin-top:14px}
.facts dt:first-child{margin-top:0}
.facts dd{font-weight:700}
details.faq{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:0 22px}
details.faq summary{cursor:pointer;font-weight:800;padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:17.5px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--eu-blue);font-weight:700;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq p{padding-bottom:18px;color:var(--asphalt-70);font-size:16.5px}
.band{background:var(--eu-blue);color:#fff;text-align:center;padding:56px 0}
.band h2{color:#fff}
.band p{color:#D3DDF5;margin:0 auto 26px;max-width:620px;font-size:18px}
.band .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.crumbs{font-size:15px;color:var(--asphalt-55);padding:16px 0 0}
.crumbs a{color:var(--asphalt-55)}
.crumbs span{padding:0 6px}

/* ---------- Footer ---------- */
footer{background:var(--asphalt);color:#B4B9C1;padding:46px 0 30px;font-size:16px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
footer h4{color:var(--plate);font-size:16px;margin-bottom:12px}
footer a{color:#CBCFD6;text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:#fff;text-decoration:underline}
footer .legal{border-top:1px solid #2A2D34;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14.5px}
footer .legal a{display:inline-block;margin:0}

/* ---------- Hinweisbox ---------- */
.warnbox{background:#FFF4D1;border:2px solid #D9A800;border-radius:var(--radius);padding:18px 20px;margin:22px 0;font-size:16.5px;color:#3A2E00}
.warnbox b{color:#000}
.infobox{background:#EAF1FF;border:1.5px solid #A9C1F0;border-left:6px solid var(--eu-blue);border-radius:var(--radius);padding:18px 20px;margin:22px 0;font-size:16.5px}

/* ---------- Lead-Funnel ---------- */
.funnel-wrap{background:var(--card);border:2px solid var(--asphalt);border-radius:16px;box-shadow:0 7px 0 rgba(20,22,27,.2);padding:24px 24px 22px;max-width:660px;color:var(--asphalt)}
.fnl-head{font-weight:900;font-size:20px;margin-bottom:4px;line-height:1.25}
.fnl-headsub{font-size:15.5px;color:var(--asphalt-55);margin-bottom:14px}
.fnl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:var(--mono);font-size:13.5px;color:var(--asphalt-55);font-weight:700}
.fnl-bar{height:10px;background:#E4E6E0;border-radius:99px;overflow:hidden;margin-bottom:20px}
.fnl-bar i{display:block;height:100%;width:16%;background:var(--cash);transition:width .25s ease}
.fnl-step h3{font-size:21px;margin-bottom:6px;line-height:1.3}
.fnl-step h3[tabindex]:focus{outline:none}
.fnl-step h3[tabindex]:focus-visible{outline:none}
.fnl-hint{font-size:15px;color:var(--asphalt-55);margin-bottom:14px}
.fnl-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fnl-opts button{font-family:var(--font);font-weight:700;font-size:17px;padding:16px 12px;background:var(--plate);border:2px solid var(--line);border-radius:11px;cursor:pointer;
                 transition:border-color .12s,background .12s;min-height:58px;color:var(--asphalt)}
.fnl-opts button:hover{border-color:var(--eu-blue);background:#fff}
.fnl-opts button[aria-pressed="true"]{border-color:var(--cash);background:#E8F5EE}
.fnl-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.fnl-back{background:none;border:none;color:var(--asphalt-55);cursor:pointer;font-size:16px;text-decoration:underline;font-family:var(--font);padding:8px 0;font-weight:600}
.fnl-skip{background:none;border:2px solid var(--line);color:var(--asphalt-70);cursor:pointer;font-size:16px;font-weight:700;padding:12px 18px;border-radius:10px;font-family:var(--font)}
.fnl-skip:hover{border-color:var(--asphalt-55)}
.fnl-sum{background:#E8F5EE;border:1.5px solid #A8D8BE;border-radius:11px;padding:13px 15px;margin-bottom:16px;font-size:16px}
.fnl-sum b{font-family:var(--mono)}
.fnl-field{margin-bottom:14px}
.fnl-field label{display:block;font-weight:800;font-size:15.5px;margin-bottom:5px}
.fnl-field label .opt{font-weight:600;color:var(--asphalt-55)}
.fnl-field input,.fnl-field textarea{width:100%;padding:14px 15px;font-size:17px;border:2px solid var(--line);border-radius:11px;font-family:var(--font);background:#fff;color:var(--asphalt)}
.fnl-field textarea{min-height:84px;resize:vertical}
.fnl-field input:focus,.fnl-field textarea:focus{outline:3px solid var(--eu-blue-light);outline-offset:1px;border-color:var(--eu-blue)}
.fnl-field input[aria-invalid="true"]{border-color:#B4231F;background:#FFF5F5}
.fnl-ds{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--asphalt-70);margin:16px 0;line-height:1.5}
.fnl-ds input{margin-top:4px;width:22px;height:22px;flex:none;accent-color:var(--cash)}
.fnl-submit{width:100%;font-size:19px;min-height:62px}
.fnl-msg{margin-top:12px;font-size:16px;font-weight:700;color:#8E1B17;background:#FFECEB;border:1.5px solid #F0B4B1;border-radius:10px;padding:12px 14px;display:none}
.fnl-msg.show{display:block}
.fnl-msg.ok{color:#0A5C35;background:#E8F5EE;border-color:#A8D8BE}
.fnl-wa-fallback{display:none;margin-top:12px;width:100%}
.fnl-trust-mini{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:18px;padding-top:16px;border-top:1.5px solid var(--line);font-size:14px;color:var(--asphalt-55);font-weight:600}
.fnl-trust-mini span::before{content:"✓ ";color:var(--cash);font-weight:900}
.hp{position:absolute!important;left:-9999px!important}

/* ---------- Foto-Upload ---------- */
.drop{border:3px dashed #B9BDB2;border-radius:14px;background:var(--plate);padding:26px 20px;text-align:center;cursor:pointer;transition:.14s;display:block}
.drop:hover,.drop.over{border-color:var(--cash);background:#EFF8F3}
.drop .ic{font-size:34px;line-height:1}
.drop b{display:block;font-size:17.5px;margin:8px 0 4px}
.drop span{font-size:15px;color:var(--asphalt-55)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.shot{position:relative;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover}
.shot button{position:absolute;top:5px;right:5px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(20,22,27,.82);color:#fff;font-size:17px;font-weight:800;cursor:pointer;line-height:1}
.shot em{position:absolute;left:0;right:0;bottom:0;background:rgba(20,22,27,.72);color:#fff;font-size:11.5px;font-style:normal;padding:3px 6px;font-family:var(--mono)}
.shotinfo{font-size:14.5px;color:var(--asphalt-55);margin-top:10px;font-weight:600}
.fotobullets{list-style:none;margin:14px 0 0;font-size:15px;color:var(--asphalt-70)}
.fotobullets li{padding-left:22px;position:relative;margin-bottom:5px}
.fotobullets li::before{content:"📷";position:absolute;left:0;font-size:13px}

/* ---------- Mobile Sticky-Leiste ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--asphalt);border-top:3px solid var(--eu-blue);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.mobile-bar div{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:7px}
.mobile-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#fff;font-weight:800;font-size:13.5px;padding:9px 4px;border-radius:10px;line-height:1.2;min-height:52px}
.mobile-bar a b{font-size:17px;line-height:1}
.mobile-bar .c{background:var(--cash)}
.mobile-bar .w{background:var(--wa)}
.mobile-bar .f{background:#fff;color:var(--asphalt)}

/* ---------- WhatsApp-Float (Desktop) ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;background:var(--wa);color:#fff;text-decoration:none;font-weight:800;padding:15px 22px;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.28);display:flex;gap:9px;align-items:center;font-size:16.5px}
.wa-float:hover{filter:brightness(1.08)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .cardlinks{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
  .usp ul{grid-template-columns:repeat(2,1fr)}
  .usp li:nth-child(3){border-left:none}
  .usp li:nth-child(n+3){border-top:1.5px solid var(--line)}
}
@media(max-width:760px){
  body{font-size:17.5px;padding-bottom:74px}
  .steps,.grid2,.grid3,.cardlinks{grid-template-columns:1fr}
  section{padding:44px 0}
  .hero{padding:34px 0 46px}
  .wa-float{display:none}
  .mobile-bar{display:block}
  .call-head span.lbl,.wa-head span.lbl{display:none}
  .call-head,.wa-head{padding:12px 14px}
  .logo small{display:none}
  .logo{font-size:15.5px;gap:8px}
  .logo .k{font-size:15.5px;padding:2px 8px}
  header.site .bar{gap:8px}
  .call-head,.wa-head{padding:11px 13px;font-size:16px}
  .logo>span{white-space:nowrap}
  footer .cols{grid-template-columns:1fr}
  .hero .trust{grid-template-columns:1fr}
  .funnel-wrap{padding:20px 18px}
  .shots{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .fnl-opts{grid-template-columns:1fr}
  .plate .txt{padding:6px 11px}
}
@media print{
  header.site,nav.main,.mobile-bar,.wa-float,.funnel-wrap,.band,.usp{display:none!important}
  body{background:#fff;font-size:12pt;padding:0}
  a{color:#000}
}