/* BerlinZulassung24.de  Stylesheet
   Neubau 2026-09  Design nach der Vorlage berlinzulassung24-version2
   Bewusst ohne Google Fonts: Einbindung von fremden Schriftservern ist auf
   einer deutschen Seite ein bekanntes Abmahnrisiko (LG Muenchen I, 2022).
   Systemschriften sind schneller und rechtlich unproblematisch. */

:root{
  --ink:#161616;
  --ink-70:rgba(22,22,22,.70);
  --ink-45:rgba(22,22,22,.45);
  --ink-07:rgba(22,22,22,.07);
  --rot:#d40000;
  --rot-dunkel:#a80000;
  --zart:#f8eeee;
  --grau:#f2f2f2;
  --weiss:#fff;
  --radius:8px;
  --breit:1320px;
  --schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schatten:0 1px 2px rgba(22,22,22,.06),0 8px 24px rgba(22,22,22,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;font-family:var(--schrift);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(1.85rem,3.6vw,2.85rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}

.hgrund{max-width:var(--breit);margin-inline:auto;padding-inline:20px}
.abschnitt{padding:clamp(48px,7vw,88px) 0}
.abschnitt--grau{background:var(--grau)}
.abschnitt--dunkel{background:var(--ink);color:var(--weiss)}

.augenbraue{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rot);margin-bottom:.9rem;
}
.abschnitt--dunkel .augenbraue,.auftakt .augenbraue{color:#ff5a5a}
.rot{color:var(--rot)}

/* Sprungmarke fuer Tastaturbedienung */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--radius) var(--radius);z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--rot);outline-offset:2px}

/* Kontaktleiste */
.leiste{background:var(--ink);color:rgba(255,255,255,.92);font-size:.9rem}
.leiste__inhalt{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  padding-block:9px;justify-content:flex-end}
.leiste a{text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.leiste a:hover{color:#fff;text-decoration:underline}
.leiste b{color:#fff}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--ink-07)}
.kopf__inhalt{display:flex;align-items:center;gap:24px;padding-block:14px}
.marke{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.marke span{color:var(--rot)}
.nav{margin-left:auto}
.nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:9px 13px;border-radius:var(--radius);
  text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink-70)}
.nav a:hover{background:var(--ink-07);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--ink-07)}

/* Schaltflaechen */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:var(--radius);font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,background-color .12s ease}
.knopf:hover{transform:translateY(-1px)}
.knopf--rot{background:var(--rot);color:#fff}
.knopf--rot:hover{background:var(--rot-dunkel)}
.knopf--dunkel{background:var(--ink);color:#fff}
.knopf--hell{background:#fff;color:var(--ink);border-color:var(--ink-07)}
.knopf--rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.knopf--rand:hover{background:rgba(255,255,255,.1)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}

/* Auftakt */
/* Auftakt mit Berlin am Tag, Fernsehturm (Magnific-Stock 105534513). Der Turm
   steht in der Bildmitte und faellt so in die Luecke zwischen Foto und Text.
   Das Bild ist hell, deshalb dunkelt der Verlauf rechts hinter dem Text kraeftig ab. */
.auftakt{position:relative;isolation:isolate;color:#fff;padding:clamp(40px,6vw,72px) 0;
  background:#0b1424 url("img/berlin-tag.jpg") center 85%/cover no-repeat}
/* Ausschnitt 85 %: auf breiten, flachen Bildschirmen bleibt die Skyline im Bild (Baris, 2000 px) */
.auftakt::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,12,26,.28) 0%,rgba(6,12,26,.40) 32%,rgba(6,12,26,.70) 54%,rgba(6,12,26,.84) 76%,rgba(6,12,26,.86) 100%)}
@media (max-width:1180px){
  .auftakt{background-image:url("img/berlin-tag-1200.jpg");background-position:center 40%}
  .auftakt::before{background:linear-gradient(180deg,rgba(6,12,26,.30) 0%,rgba(6,12,26,.82) 42%,rgba(6,12,26,.90) 100%)}
}
.auftakt__gitter{display:grid;grid-template-columns:var(--spalten,1fr 1fr);gap:clamp(28px,5vw,64px);align-items:center}
.auftakt__bild{border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.auftakt h1{color:#fff}
.vorteile{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:11px}
.vorteile li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.9)}
.vorteile li::before{content:"";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.bewertung{display:flex;align-items:center;gap:10px;margin-top:1.5rem;font-weight:600}
.sterne{color:#ffc107;letter-spacing:2px}

/* Fotos neben Text fuellen die volle Hoehe der Textspalte, statt in ihrem
   eigenen Seitenverhaeltnis klein daneben zu stehen. Ausschnitt ueber --fokus. */
.bildrahmen{position:relative;align-self:stretch;min-height:340px;border-radius:14px;overflow:hidden;background:var(--grau)}
.bildrahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 50%)}

/* Kennzahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.zahlen .wert{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;color:var(--rot);line-height:1}
.zahlen .bez{font-size:.9rem;color:var(--ink-70);margin-top:6px}

/* Karten */
.karten{display:grid;gap:20px}
.karten--3{grid-template-columns:var(--spalten,repeat(3,1fr))}
.karte{background:#fff;border:1px solid var(--ink-07);border-radius:12px;padding:26px}
.karte--gehoben{box-shadow:var(--schatten)}
/* Kartenbilder einheitlich, sonst stehen die Ueberschriften nebeneinander nicht buendig */
.karte > img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karte ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-70)}
.karte li{margin-bottom:.35rem}

/* Merkmalliste zweispaltig */
.leistungen{columns:2;column-gap:44px;list-style:none;margin:0;padding:0}
.leistungen li{break-inside:avoid;display:flex;gap:11px;margin-bottom:11px}
.leistungen li::before{content:"";flex:0 0 8px;height:8px;margin-top:11px;border-radius:50%;background:var(--rot)}
.leistungen--breit{columns:3;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--ink-07)}

/* Kennzeichenarten */
.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.marke-chip{background:var(--zart);color:var(--ink);border:1px solid rgba(212,0,0,.18);
  border-radius:999px;padding:6px 12px;font-weight:600;font-size:.88rem}

/* Ablauf */
.schritte{counter-reset:s;display:grid;gap:18px}
.schritt{display:flex;gap:18px;align-items:flex-start}
.schritt::before{counter-increment:s;content:counter(s);flex:0 0 42px;height:42px;
  display:grid;place-items:center;border-radius:50%;background:var(--rot);color:#fff;font-weight:800}

/* Formular */
.formular{display:grid;gap:14px;max-width:620px}
.feld{display:grid;gap:6px}
.feld label{font-weight:600;font-size:.92rem}
.feld input,.feld select,.feld textarea{
  font:inherit;padding:12px 14px;border:1px solid rgba(22,22,22,.18);
  border-radius:var(--radius);background:#fff;width:100%}
.feld textarea{min-height:130px;resize:vertical}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hinweis{font-size:.86rem;color:var(--ink-45)}
.honig{position:absolute;left:-9999px}

/* Fuss */
.fuss{background:var(--ink);color:rgba(255,255,255,.72);padding:56px 0 28px;font-size:.95rem}
.fuss a{color:rgba(255,255,255,.72);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss h3{color:#fff;font-size:1rem;margin-bottom:.9rem}
.fuss__gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.45rem}
.fuss__unten{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.88rem}

/* Klebeleiste fuer Mobilgeraete */
.ruf{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:rgba(22,22,22,.12)}
.ruf a{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
.ruf a:last-child{background:var(--rot)}

/* Unterseiten: Seitenkopf */
.seitenkopf{background:var(--ink);color:#fff;padding:clamp(34px,5vw,58px) 0 clamp(30px,4.5vw,50px)}
.seitenkopf h1{color:#fff;margin-bottom:.35em}
.seitenkopf p{color:rgba(255,255,255,.8);font-size:1.08rem;max-width:62ch;margin:0}
.brotkrumen{font-size:.86rem;color:rgba(255,255,255,.6);margin-bottom:.9rem}
.brotkrumen a{color:rgba(255,255,255,.75);text-decoration:none}
.brotkrumen a:hover{color:#fff;text-decoration:underline}

/* Sprungliste innerhalb einer Seite */
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem;list-style:none;padding:0}
.sprung a{display:inline-block;padding:7px 13px;border-radius:999px;font-size:.9rem;font-weight:600;
  text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.25)}
.sprung a:hover{background:rgba(255,255,255,.1)}

/* Vorgaenge mit Unterlagen */
.vorgaenge{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.vorgang{background:#fff;border:1px solid var(--ink-07);border-radius:12px;padding:24px 26px;scroll-margin-top:96px}
.vorgang h2{font-size:1.2rem;letter-spacing:0;margin-bottom:.8rem}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.haken li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-70)}
.haken li::before{content:"";flex:0 0 18px;height:18px;margin-top:4px;border-radius:4px;border:2px solid var(--rot)}
.dateien{display:flex;flex-direction:column;gap:8px;margin-top:1.1rem;padding-top:1rem;border-top:1px dashed rgba(22,22,22,.15)}
.datei{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:600;color:var(--ink)}
.datei::before{content:"PDF";flex:0 0 auto;font-size:.68rem;font-weight:800;letter-spacing:.06em;color:#fff;
  background:var(--rot);border-radius:4px;padding:3px 6px}
.datei:hover{color:var(--rot);text-decoration:underline}
.extern{display:inline;text-decoration:none;font-weight:700;color:var(--rot)}
.extern::after{content:"\00a0\2197";font-weight:700}
.extern:hover{text-decoration:underline}

/* Zulassungsbezirke im Umland */
.bezirke{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.bezirk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-07);border-radius:12px;padding:22px 22px 20px}
.bezirk h3{margin-bottom:.2rem}
.kuerzel{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0 1rem}
.kuerzel span{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-weight:700;font-size:.85rem;
  background:#fff;border:2px solid var(--ink);border-radius:4px;padding:1px 7px;letter-spacing:.04em}
.bezirk .dateien{margin-top:auto}
.bezirk .extern{margin-top:10px}

/* Hinweiskasten */
.kasten{background:var(--zart);border:1px solid rgba(212,0,0,.16);border-radius:12px;padding:20px 24px}
.kasten p:last-child{margin-bottom:0}

/* Rechtstexte */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:1.25rem;letter-spacing:0;margin-top:2rem}
.rechtstext h3{font-size:1.05rem;margin-top:1.4rem}
.rechtstext p,.rechtstext li{color:var(--ink-70)}
.rechtstext ul{padding-left:1.2rem}

/* Einbettungen von Partnern */
.einbettung{background:#fff;border:1px solid var(--ink-07);border-radius:12px;padding:clamp(12px,2vw,24px);overflow-x:auto}
.einbettung iframe{display:block;width:100%;border:0;min-height:900px}
.rechner-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4rem;list-style:none;padding:0}
.rechner-nav a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--grau);
  text-decoration:none;font-weight:600;font-size:.92rem}
.rechner-nav a:hover,.rechner-nav a[aria-current="page"]{background:var(--ink);color:#fff}
.anzeige{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-45)}

/* Karte erst nach Klick laden */
.karte-platz{position:relative;border-radius:14px;overflow:hidden;background:var(--grau);min-height:360px;
  display:grid;place-items:center;text-align:center;padding:24px}
.karte-platz iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-platz p{max-width:44ch;color:var(--ink-70);font-size:.92rem}

/* Haltestellen */
.halte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.halte li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.linie{font-size:.78rem;font-weight:800;background:var(--ink);color:#fff;border-radius:4px;padding:2px 6px}
.meldung{border-radius:var(--radius);padding:12px 16px;font-weight:600}
.meldung--fehler{background:#fdecec;color:#8a0000;border:1px solid rgba(212,0,0,.25)}

/* Bild und Text stapeln, bevor die Textspalte so hoch wird, dass Fotos zu stark beschnitten werden */
@media (max-width:1180px){
  .auftakt__gitter{grid-template-columns:1fr}
  .auftakt__bild{order:-1}
  .bildrahmen{min-height:0;aspect-ratio:3/2}
}
@media (max-width:980px){
  .vorgaenge{grid-template-columns:1fr}
  .bezirke{grid-template-columns:1fr 1fr}
  .auftakt__gitter{grid-template-columns:1fr}
  .auftakt__bild{order:-1}
  .karten--3{grid-template-columns:1fr}
  .bildrahmen{min-height:0;aspect-ratio:3/2}
  .leistungen--breit{columns:2}
  .fuss__gitter{grid-template-columns:1fr 1fr}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .kopf__inhalt{flex-wrap:wrap;row-gap:6px;padding-block:10px 6px}
  .marke{flex:0 0 auto}
  .marke img{width:180px;height:auto}
  .nav{width:100%;margin-left:0;order:3}
  .nav ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}
@media (max-width:640px){
  body{font-size:16px}
  .leiste__inhalt{justify-content:flex-start;gap:4px 18px;padding-block:7px;font-size:.84rem}
  .leiste__inhalt a:last-child{display:none}
  .leistungen{columns:1}
  .bezirke{grid-template-columns:1fr}
  .zwei{grid-template-columns:1fr}
  .fuss__gitter{grid-template-columns:1fr}
  .ruf{display:grid}
  body{padding-bottom:56px}
}