/* ═══════════════════════════════════════════════════════════════════
   VIN-Checker Takata – ALPINA CLASSIC
   Farben und Typografie nach alpina-classic.com
═══════════════════════════════════════════════════════════════════ */

:root{
  --ac-bg:        #f3f1ef;   /* Seitenhintergrund */
  --ac-weiss:     #ffffff;
  --ac-hell:      #e9f3f5;   /* helle Flaeche */
  --ac-text:      #4c4c4c;
  --ac-dunkel:    #333333;   /* Ueberschriften */
  --ac-anthrazit: #3f444b;   /* Schaltflaechen, Kopfzeilen */
  --ac-gruen:     #51bc4a;   /* Akzent */
  --ac-linie:     #d9d5d1;
  /* Flaechenverlauf und Trennlinie wie auf alpina-classic.com */
  --ac-verlauf:   linear-gradient(#0d4234 0%, #04061b 55%);
  --ac-trenner:   radial-gradient(#51bc4a 11%, #0f5738 72%);
  --ac-alarm:     #b3261e;
  --ac-alarm-bg:  #fbf1f0;
  --ac-warn:      #8a6a1f;
  --ac-warn-bg:   #fbf7ee;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300; font-size:19.2px; line-height:1.55;
  color:var(--ac-text); background:var(--ac-bg);
  -webkit-font-smoothing:antialiased;
}
.inner{max-width:1000px;margin:0 auto;padding:0 24px}
a{color:var(--ac-dunkel)}

/* ── Kopf ────────────────────────────────────────────────────────── */
header{background:var(--ac-verlauf);height:160px;display:flex;align-items:center;
  justify-content:center;position:relative}
header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ac-trenner)}
.marke{display:block;line-height:0}
.marke img{height:44px;width:auto;display:block}

/* ── Einstieg ────────────────────────────────────────────────────── */
.hero{background:var(--ac-anthrazit);color:var(--ac-hell);padding:52px 0}
.hero h1{font-weight:300;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.2;color:var(--ac-hell)}
.hero .lead{margin-top:18px;max-width:62ch;font-size:1.02rem;
  color:rgba(233,243,245,.82);border-left:3px solid var(--ac-hell);padding-left:18px}

.intro{padding:44px 0 8px}
.intro p{max-width:72ch;font-size:.92rem;margin-bottom:16px}

main{padding-bottom:80px}

/* ── Formular ────────────────────────────────────────────────────── */
/* Kasten mit Kopfzeile – gleiche Bauform wie der Ergebniskasten */
.karte{background:var(--ac-weiss);border:1px solid var(--ac-linie);margin-top:34px}
.feld{margin-bottom:30px}
label{display:block;font-weight:600;font-size:1rem;color:var(--ac-dunkel);margin-bottom:6px}
.hinweis{font-size:.84rem;margin-bottom:12px;max-width:60ch}
select,input[type=text]{
  width:100%;padding:13px 14px;font-family:inherit;font-size:.95rem;font-weight:300;
  color:var(--ac-text);background:var(--ac-bg);
  border:1px solid var(--ac-linie);border-radius:3px;
  transition:border-color .25s,background .25s;
}
select:focus,input[type=text]:focus{outline:none;border-color:var(--ac-anthrazit);background:var(--ac-weiss)}
input[type=text]{text-transform:uppercase;letter-spacing:.06em}
input[type=text]::placeholder{text-transform:none;letter-spacing:normal;color:#a5a5a5}

button,.knopf{
  display:inline-block;padding:14px 26px;border:none;border-radius:3px;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;text-align:center;
  color:var(--ac-hell);background:var(--ac-anthrazit);transition:background .25s;
}
button{width:100%}
button:hover,.knopf:hover{background:#2c3037}
.knopf-leer{background:transparent;color:var(--ac-dunkel);border:1px solid var(--ac-linie)}
.knopf-leer:hover{background:var(--ac-hell)}

/* ── Ergebnis ────────────────────────────────────────────────────── */
.ergebnis{margin-top:30px;background:var(--ac-weiss);border:1px solid var(--ac-linie)}
.erg-kopf{background:var(--ac-anthrazit);color:var(--ac-hell);padding:16px 30px;
  font-weight:600;font-size:.88rem;letter-spacing:.13em;text-transform:uppercase}
.erg-körper{padding:28px 30px}

.fahrzeug{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;font-size:.9rem}
.fahrzeug dt{color:#7a7a7a}
.fahrzeug dd{font-weight:600;color:var(--ac-dunkel)}

.balken{margin-top:24px;padding:14px 18px;font-size:.9rem;border-left:3px solid;border-radius:2px}
.balken-info{background:var(--ac-warn-bg);border-color:var(--ac-alarm);color:#5f5324}
.balken-neutral{background:var(--ac-bg);border-color:var(--ac-linie);color:var(--ac-text)}
.balken a{color:var(--ac-dunkel)}

.verdikt{margin-top:26px;text-align:center;font-weight:600;font-size:1rem;line-height:1.45}
.verdikt.ist-stop{color:var(--ac-alarm)}
.verdikt.ist-frei{color:var(--ac-warn)}

/* Tabelle */
.tabelle{margin-top:20px}
table{width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
col.c1{width:14%} col.c2{width:16%} col.c3{width:17%} col.c4{width:12%}
th,td{border:1px solid var(--ac-linie);padding:11px 10px;text-align:center;
  vertical-align:middle;hyphens:none;overflow-wrap:normal}
th{background:var(--ac-bg);font-weight:600;color:var(--ac-dunkel);font-size:.76rem;line-height:1.35}
td.ist-stop{color:var(--ac-alarm)}
td.bez{text-align:left;line-height:1.5}
td.nr{white-space:nowrap}

/* Hinweisfenster am Verweis zum Lenkradtest */
.tipp{position:relative;display:inline}
.tipp-marke{
  width:17px;height:17px;margin-left:6px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;
  font-family:inherit;font-size:11px;font-weight:600;line-height:1;
  cursor:pointer;vertical-align:middle;position:relative;top:-1px;
}
.tipp-marke:hover,.tipp-marke:focus-visible{
  background:var(--ac-anthrazit);border-color:var(--ac-anthrazit);color:var(--ac-weiss)}
.tipp-text{
  display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:30;
  width:min(330px,76vw);padding:14px 16px;
  font-size:.8rem;font-weight:300;line-height:1.55;text-align:left;
  color:var(--ac-hell);background:var(--ac-anthrazit);
  border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.tipp-text::before{content:'';position:absolute;left:16px;top:-6px;
  border:6px solid transparent;border-top:0;border-bottom-color:var(--ac-anthrazit)}
.tipp:hover .tipp-text,.tipp:focus-within .tipp-text,.tipp.offen .tipp-text{display:block}
td.bez .tipp-text,.block .bez .tipp-text{color:var(--ac-hell)}

/* Mobile Bloecke */
.bloecke{display:none}
.block{border:1px solid var(--ac-linie);border-radius:2px;padding:15px 17px;margin-bottom:11px}
.block.ist-stop{border-left:3px solid var(--ac-alarm)}
.block dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:.84rem}
.block dt{color:#7a7a7a}
.block dd{font-weight:600;color:var(--ac-dunkel)}
.block .bez{margin-top:11px;padding-top:11px;border-top:1px solid var(--ac-linie);font-size:.86rem}
.block.ist-stop .bez{color:var(--ac-alarm)}

/* Naechster Schritt */
.kontakt{margin-top:26px;padding:22px 24px;background:var(--ac-anthrazit);border-radius:2px}
.kontakt h2{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#f0a3a3;margin-bottom:9px}
.kontakt p{font-size:.9rem;color:rgba(233,243,245,.88);max-width:66ch}
.kontakt a{color:#f0c9c9}

.erg-aktionen{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.erg-aktionen .knopf{padding:12px 24px;font-size:.9rem}

/* ── Fuss ────────────────────────────────────────────────────────── */
footer{background:var(--ac-verlauf);color:var(--ac-bg);font-size:.84rem;
  padding:0 0 46px;position:relative}
footer::before{content:'';display:block;height:1px;background:var(--ac-trenner);
  margin-bottom:40px}
.fuss-links{margin-bottom:34px}
.fuss-links a{color:var(--ac-hell);text-decoration:none;margin-right:26px;font-size:.86rem}
.fuss-links a:hover{text-decoration:underline}
.fuss-mitte{text-align:center;line-height:1.9}
.fuss-tag{color:var(--ac-bg)}
.fuss-copy{color:var(--ac-bg)}
.fuss-adresse{color:var(--ac-bg)}
.fuss-adresse a{color:var(--ac-bg)}
@media(max-width:600px){
  .fuss-adresse{line-height:2.1}
  .fuss-links a{display:inline-block;margin:0 20px 8px 0}
}

/* ── Schmale Anzeigen ────────────────────────────────────────────── */
@media(max-width:820px){
  .tabelle{display:none}
  .bloecke{display:block;margin-top:20px}
}
@media(max-width:600px){
  body{font-size:17px}
  .hero{padding:40px 0}
  .hero .lead{padding-left:14px}
  .erg-kopf{padding:14px 20px}
  .erg-körper{padding:24px 20px}
  .fahrzeug{grid-template-columns:1fr;gap:2px}
  .fahrzeug dd{margin-bottom:10px}
  .erg-aktionen{flex-direction:column}
  .erg-aktionen .knopf{width:100%}

}