/* ─────────────────────────────────────────────────────────────
   Der Große Autoatlas – Stilvorlage für die Unterseiten
   Gleiche Grundlage wie index.html, nur ohne Karte.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#111827;--ink2:#374151;--muted:#6b7280;--border:#e5e7eb;
  --surface:#f9fafb;--white:#fff;--accent:#16a34a;--navy:#0f2448;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--surface);color:var(--ink);
  overflow-x:hidden;line-height:1.65;}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── ICONS (Lucide, ISC) ── */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-.14em;}

/* ── KOPF ── */
header{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;gap:22px;
  height:96px;padding:0 24px;overflow:visible;
  background:#0f2448;
  background-image:
    radial-gradient(760px 240px at 10% -70%, rgba(59,130,246,.42), transparent 62%),
    radial-gradient(620px 220px at 88% 170%, rgba(22,163,74,.26), transparent 62%),
    linear-gradient(92deg,#0b1c39 0%,#14305e 52%,#0e2245 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 26px rgba(9,20,40,.22);
}
header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#f5c518 0%,#f5c518 18%,#16a34a 42%,rgba(22,163,74,0) 78%);
}
.h-brand{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.h-brand a{display:flex;align-items:center;gap:16px;}
.h-logo{position:relative;width:94px;height:96px;flex-shrink:0;display:block;z-index:3;}
.h-logo::before{content:"";position:absolute;left:-14%;top:2%;width:128%;height:104%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),rgba(255,255,255,0) 72%);
  pointer-events:none;z-index:-1;}
#logo-img{
  /* cover.png ist die randlose Titelgrafik. Leichte Drehung für Bewegung. */
  position:absolute;left:0;top:20px;height:138px;width:auto;
  border-radius:3px;
  transform:rotate(-3.5deg);transform-origin:50% 50%;
  box-shadow:0 14px 28px rgba(9,20,40,.5), 0 3px 8px rgba(9,20,40,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.h-brand a:hover #logo-img{
  transform:rotate(-3.5deg) translateY(-4px) scale(1.015);
  box-shadow:0 20px 36px rgba(9,20,40,.55), 0 3px 8px rgba(9,20,40,.35);
}
.h-word{display:flex;flex-direction:column;gap:7px;}
.h-word-m{font-size:34px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px;
  white-space:nowrap;text-shadow:0 3px 18px rgba(0,0,0,.4);}
.h-word-m em{font-style:normal;color:#f5c518;}
.h-mcm{font-size:12.5px;color:rgba(255,255,255,.58);font-weight:600;white-space:nowrap;}
nav{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto;}
nav a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8);padding:9px 13px;
  border-radius:9px;transition:background .15s,color .15s;white-space:nowrap;}
nav a:hover{background:rgba(255,255,255,.1);color:#fff;}
nav a.aktiv{background:rgba(255,255,255,.14);color:#fff;}
nav a.nav-cta{background:linear-gradient(135deg,#f5c518 0%,#e5a80c 100%);
  color:#0f2448;font-weight:800;box-shadow:0 3px 12px rgba(245,197,24,.28);}
nav a.nav-cta:hover{background:linear-gradient(135deg,#ffd230 0%,#f0b514 100%);color:#0f2448;}

/* ── BROTKRUME ── */
.krume{background:#f8fafc;border-bottom:1px solid var(--border);
  padding:10px 24px 10px 134px;font-size:12.5px;color:var(--muted);font-weight:600;}
.krume a:hover{color:var(--ink);}
.krume span{color:var(--ink2);}

/* ── INHALT ── */
main{max-width:1000px;margin:0 auto;padding:38px 24px 60px;}
.seiten-titel{font-size:34px;font-weight:900;letter-spacing:-.8px;margin-bottom:6px;}
.seiten-lead{font-size:15px;color:var(--muted);margin-bottom:28px;}
.karte{background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:26px 30px;margin-bottom:16px;box-shadow:0 1px 3px rgba(9,20,40,.05);}
.karte h2{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border);}
.karte h3{font-size:14.5px;font-weight:800;color:var(--ink);margin:20px 0 6px;}
.karte h3:first-of-type{margin-top:0;}
.karte p{font-size:14px;color:var(--ink2);margin-bottom:10px;}
.karte p:last-child{margin-bottom:0;}
.karte a{color:#1d4ed8;}
.karte a:hover{text-decoration:underline;}
.karte ul{margin:0 0 12px 20px;}
.karte li{font-size:14px;color:var(--ink2);margin-bottom:5px;}
.klein{font-size:12.5px;color:var(--muted);}

/* Zweispaltig, ab 760 px */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:760px){ .zwei{grid-template-columns:1fr;} }

/* Adressblock */
.adresse{font-size:14px;color:var(--ink2);}
.adresse dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin-top:12px;}
.adresse dt:first-child{margin-top:0;}
.adresse dd{margin:2px 0 0;}

/* Kontaktkachel */
.person{display:flex;gap:14px;align-items:flex-start;}
.person-ic{width:44px;height:44px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--ink2);flex-shrink:0;}
.person-ic .ic{width:21px;height:21px;}
.person-rolle{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);}
.person-name{font-size:16px;font-weight:800;margin:1px 0 8px;}
.zeile{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);margin-bottom:3px;}
.zeile .ic{width:15px;height:15px;color:#9ca3af;}

/* Diensteliste in der Datenschutzerklärung */
.dienste{width:100%;border-collapse:collapse;font-size:13.5px;}
.dienste th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--border);}
.dienste td{padding:11px 12px 11px 0;border-bottom:1px solid #f3f4f6;
  color:var(--ink2);vertical-align:top;}
.dienste td:first-child{font-weight:700;color:var(--ink);white-space:nowrap;}
@media(max-width:700px){
  .dienste,.dienste tbody,.dienste tr,.dienste td{display:block;width:100%;}
  .dienste thead{display:none;}
  .dienste tr{border-bottom:1px solid var(--border);padding:10px 0;}
  .dienste td{border:none;padding:1px 0;}
}

/* Zurück-Knopf */
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:10px;
  font-size:14px;font-weight:700;border:none;transition:all .15s;}
.btn-ink{background:var(--navy);color:#fff;}
.btn-ink:hover{background:#1c3a6e;}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--ink2);}
.btn-ghost:hover{border-color:var(--ink2);}

/* ── FUSS ── */
footer{background:var(--ink);color:#9ca3af;padding:30px 24px 16px;}
.fg{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:40px;margin-bottom:22px;}
.fb p{font-size:12.5px;line-height:1.8;max-width:300px;}
.fb .marke{font-size:17px;font-weight:900;color:#fff;letter-spacing:-.4px;margin-bottom:8px;}
.fb .marke em{font-style:normal;color:#f5c518;}
.fc h5{font-size:12px;font-weight:800;color:#fff;margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.5px;}
.fc a{display:block;font-size:13px;color:#9ca3af;margin-bottom:7px;transition:color .15s;}
.fc a:hover{color:#fff;}
.fbot{max-width:1000px;margin:0 auto;border-top:1px solid #1f2937;padding-top:14px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11.5px;}

/* Mittlere Breiten: Navigation und Wortmarke etwas kleiner, sonst
   laeuft die Leiste bei sechs Eintraegen aus dem Bild */
@media(max-width:1150px){
  header{gap:16px;}
  .h-word-m{font-size:28px;}
  nav a{padding:8px 9px;font-size:12.5px;}
}
@media(max-width:900px){
  header{padding:0 14px;gap:14px;height:82px;}
  /* Ab hier passt die Leiste nicht mehr in eine Zeile, sie wird wischbar */
  nav{flex:1 1 auto;min-width:0;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-ms-overflow-style:none;}
  nav::-webkit-scrollbar{display:none;}
  nav a{padding:8px 9px;font-size:12.5px;}
  nav a.nav-cta{display:none;}
  .h-logo{width:66px;height:82px;}
  #logo-img{top:16px;height:98px;}
  .h-word-m{font-size:22px;}
  .h-mcm{font-size:11px;}
  .krume{padding-left:100px;}
  main{padding:24px 16px 44px;}
  .seiten-titel{font-size:26px;}
  .karte{padding:20px 18px;border-radius:12px;}
  .fg{grid-template-columns:1fr;gap:22px;}
}
@media(max-width:620px){
  /* Kompakter Kopf: Cover klein und ohne Überstand, Navigation scrollt seitlich */
  header{height:64px;padding:0 12px;gap:10px;}
  .h-logo{width:36px;height:64px;}
  #logo-img{position:static;height:52px;top:auto;
    box-shadow:0 6px 12px rgba(9,20,40,.5);}
  .h-word{display:none;}
  .krume{padding-left:12px;padding-right:12px;}
  nav{flex:1 1 auto;min-width:0;margin-left:auto;gap:0;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    /* Von links beginnen, sonst rutschen die ersten Eintraege aus dem Bild */
    justify-content:flex-start;}
  nav::-webkit-scrollbar{display:none;}
  nav a{padding:7px 8px;font-size:12.5px;}
}