/* League Spartan (SIL Open Font License) - lokal ausgeliefert statt von Google-Servern,
   damit beim Seitenaufruf keine IP-Adressen an Google gehen (DSGVO, LG Muenchen 2022). */
@font-face{font-family:'League Spartan'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('fonts/league-spartan-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'League Spartan'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('fonts/league-spartan-latin.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;}

/* Layout: mirrors kfz-zulassung.de (Leckebusch-Markenseite) — Teaser-Pill-Hero mit Foto-Gefühl,
   3 Feature-Karten, 4er-USP-Grid, Formular-Kontaktblock, Service-Textsektion, dunkler Footer.
   Bewusst einthemig (nur hell) wie die bestehende Markenseite — kein Dark-Mode-Toggle nötig.
   Gemeinsames Stylesheet für index.html, impressum.html, datenschutz.html. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F2F2F2; --surface-2:#EDEDED;
  --fg:#2A2E37; --fg-strong:#15171C; --muted:#545A68; --line:#E1E3E8;
  --accent:#18268F; --accent-ink:#FFFFFF; --accent-dark:#1B1B1B;
  --footer-bg:#1B1B1B; --footer-fg:#FFFFFF;
  --font:'League Spartan',Arial,Helvetica,sans-serif;
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]{display:none!important;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px;}
.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;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:8px; font-weight:700; font-size:14px; transition:top .2s ease;
}
.skip-link:focus{top:12px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .feature-card{opacity:1!important; transform:none!important; transition:none!important;}
  .skip-link{transition:none;}
}
.wrap{max-width:1140px; margin:0 auto; padding-inline:20px;}
h1,h2,h3{font-family:var(--font); font-weight:800; color:var(--fg-strong); text-wrap:balance; margin:0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent); border-radius:999px;
  padding:7px 14px; margin:0 0 16px;
}
.eyebrow svg{width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:2;}
.lede{color:var(--muted); font-size:19px; line-height:1.55; max-width:50ch; margin:18px 0 0;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Header ---------- */
.nav{position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px;}
.brand{display:flex; align-items:baseline; gap:10px; font-weight:800; font-size:21px; color:var(--fg-strong);}
.brand .dot{color:var(--accent);}
.brand-tag{
  font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.04em; color:var(--muted);
  border-left:1px solid var(--line); padding-left:10px;
}
@media (max-width:560px){ .brand-tag{display:none;} }
.nav-links{display:flex; gap:30px; font-weight:600; font-size:16px; color:var(--fg);}
.nav-links a:hover{color:var(--accent);}
.nav-cta{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px;
  padding:12px 22px; font-weight:700; font-size:15.5px; white-space:nowrap;
  transition:background-color .2s ease, transform .15s ease; display:inline-block;
}
.nav-cta:hover{background:var(--accent-dark);}
.nav-cta:active{transform:scale(.97);}
@media (max-width:760px){ .nav-links{display:none;} }

/* ---------- Buttons (shared) ---------- */
.btn-primary{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px;
  padding:17px 32px; font-weight:700; font-size:17px; display:inline-flex; align-items:center; gap:8px;
  transition:background-color .2s ease, transform .15s ease;
}
.btn-primary:hover{background:var(--accent-dark);}
.btn-primary:active{transform:scale(.97);}
.btn-outline{
  background:transparent; color:var(--accent); border:2px solid var(--accent); border-radius:8px;
  padding:15px 30px; font-weight:700; font-size:17px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-outline:hover{border-color:var(--accent-dark); color:var(--accent-dark);}
.btn-outline:active{transform:scale(.97);}

/* ---------- Hero (echtes Foto, wie kfz-zulassung.de) ---------- */
.hero{
  position:relative; padding-block:118px 136px; color:#fff;
  background-image:linear-gradient(100deg, rgba(8,14,42,.93) 0%, rgba(8,14,42,.72) 40%, rgba(8,14,42,.18) 78%),
    url('images/hero-cabrio.jpg');
  background-size:cover; background-position:center 85%;
}
.hero .wrap{max-width:640px;}
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.05; color:#fff;}
.hero h1 span{color:#8FA6FF;}
.hero .eyebrow{background:rgba(255,255,255,.16); color:#fff;}
.hero-marken{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 16px;}
.hero-marken .eyebrow{margin:0;}
.powered{display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); font-size:13px; font-weight:600;
  letter-spacing:.02em; white-space:nowrap;}
.powered img{height:22px; width:auto; display:block;}
.hero .eyebrow svg{stroke:#fff;}
.hero .lede{color:rgba(255,255,255,.88);}
.hero .btn-outline{border-color:#fff; color:#fff;}
.hero .btn-outline:hover{background:#fff; color:var(--accent-dark); border-color:#fff;}
.hero-cta-row{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
@media (max-width:760px){ .hero{padding-block:84px 96px;} }

/* ---------- Feature cards ---------- */
.section{padding-block:88px 96px;}
.section-head{max-width:760px; margin-bottom:48px;}
.section-head p:not(.eyebrow){color:var(--muted); font-size:19px; margin:14px 0 0;}
.section-head h2{font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:-.01em;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.feature-card{
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;
}
.feature-card.in{opacity:1; transform:none;}
.feature-card .thumb{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.feature-card .body{padding:28px; display:flex; flex-direction:column; gap:14px; flex:1;}
.feature-card .icon{
  width:52px; height:52px; border-radius:12px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.feature-card .icon svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.8;}
.feature-card h3{font-size:22px;}
.feature-card p{color:var(--muted); font-size:17px; margin:0; flex:1;}
.feature-card a{color:var(--accent); font-weight:700; font-size:16px; display:inline-flex; align-items:center; gap:4px;}
.feature-card a:hover{color:var(--accent-dark);}

/* ---------- USP grid ---------- */
.usp{background:var(--surface-2);}
.usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.usp-item{display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:var(--radius); padding:28px 24px;}
.usp-item .icon{width:44px; height:44px; stroke:var(--accent); fill:none; stroke-width:1.8;}
.usp-item h3{font-size:20px;}
.usp-item p{color:var(--muted); font-size:16px; margin:0;}

/* ---------- Service text section ---------- */
.service .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
.service-badge{
  width:100%; aspect-ratio:4/3; max-width:360px; border-radius:20px; overflow:hidden;
  margin-inline:auto; box-shadow:0 18px 40px -16px rgba(24,38,143,.35);
}
.service-badge img{width:100%; height:100%; object-fit:cover; display:block;}
.service h2{font-size:clamp(30px,3.8vw,42px); line-height:1.1; margin-bottom:18px;}
.service p{color:var(--muted); font-size:18px;}
.service .phones{display:flex; gap:18px; margin-top:22px; flex-wrap:wrap;}
.phone-chip{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:16.5px; color:var(--fg-strong);
  background:var(--surface); border-radius:999px; padding:12px 18px;
}
.phone-chip svg{width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:2;}

/* ---------- Pricing ---------- */
.price-card{
  background:var(--surface); border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:1.35fr 1fr;
}
.price-main{padding:44px 48px;}
.price-card h3{font-size:24px;}
.price-rows{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
.price-rows li{display:flex; align-items:center; gap:14px; font-size:18px; color:var(--fg-strong); font-weight:500;}
.price-rows svg{
  width:28px; height:28px; flex-shrink:0; padding:5px; border-radius:50%;
  background:var(--accent); stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.price-note{color:var(--muted); font-size:15.5px; margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line);}
.price-side{
  background:var(--accent); color:#fff; padding:44px 40px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
}
.price-label{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.16); border-radius:999px; padding:6px 12px; margin-bottom:14px;
}
.price-side .was{
  color:rgba(255,255,255,.7); font-size:22px; font-weight:600; text-decoration:line-through;
  text-decoration-color:#FF8A80; text-decoration-thickness:2.5px;
}
/* durchgestrichener Statt-Preis neben den 99 € */
.streich{color:var(--muted); font-weight:600; text-decoration:line-through; text-decoration-color:#C0392B; text-decoration-thickness:2px; margin-right:4px; white-space:nowrap;}
.price-side .big{font-size:clamp(56px,6vw,76px); line-height:1; font-weight:800; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.price-sub{color:rgba(255,255,255,.82); font-size:16px; margin-top:8px;}
.price-side .price-cta{background:#fff; color:var(--accent); margin-top:26px; width:100%; justify-content:center;}
.price-side .price-cta:hover{background:#E6E9FF;}
@media (max-width:560px){
  .price-main{padding:30px 22px;}
  .price-side{padding:32px 22px;}
  .price-rows li{font-size:16.5px;}
}
@media (max-width:860px){ .price-side{order:-1;} }

/* ---------- FAQ ---------- */
details{border:1px solid var(--line); border-radius:14px; padding:20px 24px; background:#fff;}
details + details{margin-top:10px;}
summary{font-weight:700; font-size:18.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--accent); font-size:26px; line-height:1; flex-shrink:0; font-weight:700;}
details[open] summary::after{content:"–";}
details p{color:var(--muted); font-size:17px; margin:12px 0 0; max-width:62ch;}

/* ---------- Signup / Kontakt ---------- */
.signup{background:var(--surface-2);}
.signup-card{
  background:#fff; border-radius:var(--radius); padding:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
}
.signup h2{font-size:clamp(28px,3.6vw,40px); line-height:1.1;}
form.signup-form{display:flex; flex-direction:column; gap:12px;}
.field{display:flex; gap:10px; flex-wrap:wrap;}
.signup-form input[type=email]{
  flex:1 1 220px; min-width:0; border:1.5px solid var(--line); background:#fff; color:var(--fg);
  border-radius:8px; padding:14px 16px; font-size:15px; font-family:inherit;
}
.signup-form input[type=email]:focus{outline:2px solid var(--accent); outline-offset:1px;}
.legal{font-size:12.5px; color:var(--muted); margin:0;}
.success{
  display:none; align-items:center; gap:10px; background:var(--surface); border-radius:10px;
  padding:14px 16px; font-size:14.5px;
}
.success.show{display:flex;}
.success svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:2; flex-shrink:0;}
.error-msg{color:#C0392B; font-size:13px; min-height:16px; margin:0;}

/* ---------- Legal pages (Impressum/Datenschutz) ---------- */
.legal-page{padding-block:56px 80px;}
.legal-page .wrap{max-width:760px;}
.legal-page h1{font-size:clamp(28px,4vw,40px); margin-bottom:8px;}
.legal-page .updated{color:var(--muted); font-size:13.5px; margin:0 0 36px;}
.legal-page h2{font-size:19px; margin:36px 0 10px;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p, .legal-page li{color:var(--fg); font-size:15px; line-height:1.7;}
.legal-page ul{padding-left:20px; margin:10px 0;}
a.inline-link{color:var(--accent); font-weight:600; text-decoration:underline;}
.legal-page .fact-table{width:100%; border-collapse:collapse; margin:10px 0 24px;}
.legal-page .fact-table td{padding:6px 0; border-bottom:1px dashed var(--line); vertical-align:top;}
.legal-page .fact-table td:first-child{color:var(--muted); width:220px; padding-right:16px;}
.legal-page .note{
  background:var(--surface); border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--muted);
  margin-top:40px;
}

/* ---------- Footer ---------- */
footer{background:var(--footer-bg); color:var(--footer-fg); padding-block:44px; padding-bottom:calc(44px + env(safe-area-inset-bottom,0px));}
footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px;}
footer h4{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#A7AAAD; margin:0 0 14px; font-weight:700;}
footer .brand{color:#fff; margin-bottom:12px;}
footer p{color:#C7C9CC; font-size:15px; margin:0 0 6px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer ul a{color:#C7C9CC; font-size:15px;}
footer ul a:hover{color:#fff;}
footer ul .soon{color:#7A7D81; font-size:14px;}
.foot-bottom{
  border-top:1px solid #333; margin-top:32px; padding-top:20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; align-items:center; gap:14px; font-size:13px; color:#9A9C9F;
}
footer .foot-bottom{display:flex;} /* sonst greift das 3-Spalten-Raster von 'footer .wrap' */
.powered-by{display:inline-flex; align-items:center; gap:10px; color:#9A9C9F; font-size:13px; transition:opacity .2s ease;}
.powered-by img{height:26px; width:auto; display:block;}
.powered-by:hover{opacity:.85;}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .usp-grid{grid-template-columns:1fr 1fr;}
  .service .wrap{grid-template-columns:1fr;}
  .service-badge{order:-1;}
  .price-card{grid-template-columns:1fr;}
  .signup-card{grid-template-columns:1fr;}
  footer .wrap{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:520px){
  .feature-grid{grid-template-columns:1fr;}
  .usp-grid{grid-template-columns:1fr; gap:14px;}
  .usp-item{display:grid; grid-template-columns:44px 1fr; column-gap:16px; row-gap:4px; padding:20px;}
  .usp-item .icon{grid-row:span 2;}
}

/* ---------- Widerruf (Widerrufsfunktion nach § 356a BGB) ---------- */
footer ul a.widerruf-knopf{
  display:inline-block; margin-top:4px; padding:8px 14px; border:1.5px solid #C7C9CC; border-radius:8px;
  color:#fff; font-weight:700; font-size:14.5px;
}
footer ul a.widerruf-knopf:hover{background:#fff; color:var(--footer-bg);}
.widerruf-form{display:flex; flex-direction:column; gap:16px; margin-top:24px;}
.wf-feld{display:flex; flex-direction:column; gap:6px;}
.wf-feld label{font-weight:600; font-size:16px; color:var(--fg-strong);}
.wf-feld input, .wf-feld textarea{border:1.5px solid #D3D8E3; border-radius:10px; padding:13px 15px; font-size:17px; font-family:inherit;}
.wf-feld input[aria-invalid]{border-color:#D92D20;}
.wf-fehler{color:#B42318; font-size:14.5px; font-weight:600; margin:0;}
.widerruf-form .btn-primary{align-self:flex-start;}

/* ---------- Weitere Vorgaenge (Umschreibung, Abmeldung) ---------- */
.weitere-preise{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px;}
.wp-karte{background:var(--surface); border-radius:20px; padding:32px 36px; display:flex; flex-direction:column; justify-content:space-between; gap:22px;}
.wp-karte h3{font-size:22px;}
.wp-karte p{color:var(--muted); font-size:16px; margin:8px 0 0;}
.wp-liste{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.wp-liste li{display:flex; align-items:center; gap:12px; font-size:16px; color:var(--fg-strong);}
.wp-liste svg{width:24px; height:24px; flex-shrink:0; padding:4px; border-radius:50%; background:var(--accent); stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.wp-fuss{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line);}
.wp-preis{font-size:30px; font-weight:800; color:var(--fg-strong);}
.wp-preis .streich{font-size:18px;}
@media (max-width:860px){ .weitere-preise{grid-template-columns:1fr;} .wp-karte{padding:26px 22px;} }