/* Neo Fahrzeugservice GmbH, Stylesheet v2
   Markenfarben aus dem Kunden-Logo: Gelb #FFF200, Rot #E30613, Schwarz #17191D.
   Referenz fuer die Designsprache: hp-gerber.ch (Foto-Hero, gelbe Akzente,
   rote Telefon-CTAs, Fakten und echte Inhalte statt Template-Optik). */

@font-face { font-family:"Barlow"; src:url("../fonts/barlow-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("../fonts/barlow-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("../fonts/barlow-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("../fonts/barlow-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Semi Condensed"; src:url("../fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Semi Condensed"; src:url("../fonts/barlow-semi-condensed-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

:root {
  --gelb:#fff200;
  --rot:#e30613;
  --rot-dunkel:#b8050f;
  --dunkel:#17191d;
  --asphalt:#24272d;
  --nebel:#f5f5f3;
  --stein:#646a72;
  --linie:#e3e3df;
  --weiss:#ffffff;
  --radius:4px;
  --schatten:0 16px 40px rgba(23,25,29,.14);
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; font-family:var(--font); font-size:17px; line-height:1.6;
  color:var(--dunkel); background:var(--weiss); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--rot); }
h1,h2,h3,h4 { font-family:var(--font-head); line-height:1.06; margin:0 0 .5em; text-wrap:balance; }
h1 { font-weight:800; font-size:clamp(2.6rem,6.5vw,5rem); text-transform:uppercase; overflow-wrap:break-word; }
h2 { font-weight:800; font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; }
h3 { font-weight:700; font-size:1.35rem; }
p { margin:0 0 1em; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font); font-weight:700; font-size:1rem; line-height:1;
  padding:16px 28px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { width:19px; height:19px; flex:none; }
.btn-rot { background:var(--rot); color:var(--weiss); }
.btn-rot:hover { background:var(--rot-dunkel); color:var(--weiss); }
.btn-gelb { background:var(--gelb); color:var(--dunkel); }
.btn-gelb:hover { background:#e6d900; color:#000; }
.btn-dunkel { background:var(--dunkel); color:var(--weiss); }
.btn-dunkel:hover { background:#000; color:var(--weiss); }
.btn-outline-weiss { border-color:rgba(255,255,255,.9); color:var(--weiss); background:transparent; }
.btn-outline-weiss:hover { background:rgba(255,255,255,.12); color:var(--weiss); }
.btn-outline-dunkel { border-color:var(--dunkel); color:var(--dunkel); background:transparent; }
.btn-outline-dunkel:hover { border-color:var(--rot); color:var(--rot); }
.btn-gross { padding:19px 36px; font-size:1.18rem; }

/* ---------- Topbar ---------- */
.topbar { background:var(--dunkel); color:#c9ccd2; font-size:.88rem; }
.topbar-innen { display:flex; align-items:center; gap:20px; min-height:42px; padding-top:6px; padding-bottom:6px; }
.topbar-links { display:flex; gap:18px; align-items:center; }
.topbar-rechts { margin-left:auto; display:flex; gap:18px; align-items:center; }
.topbar a { color:#c9ccd2; text-decoration:none; }
.topbar a:hover { color:var(--weiss); }
.topbar .tel { color:var(--gelb); font-weight:700; }
.topbar .tel:hover { color:var(--weiss); }
.topbar svg { width:14px; height:14px; vertical-align:-2px; margin-right:5px; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--dunkel); border-bottom:1px solid #2e3138; }
.header-innen { display:flex; align-items:center; gap:26px; height:84px; }
.header-logo { display:flex; align-items:center; text-decoration:none; flex:none; }
.header-logo img { height:52px; width:auto; }
.main-nav { margin-left:auto; }
.main-nav ul { display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.main-nav a {
  display:block; padding:11px 15px; border-radius:var(--radius);
  color:#e8eaed; text-decoration:none; font-weight:600; font-size:1.02rem;
}
.main-nav a:hover { color:var(--gelb); background:rgba(255,255,255,.07); }
.main-nav a.aktiv { color:var(--gelb); }
.header-cta { display:flex; gap:10px; align-items:center; flex:none; }
.header-cta .btn { padding:14px 20px; font-size:.98rem; }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; cursor:pointer; width:46px; height:46px; padding:10px; }
.nav-toggle span { display:block; height:2.5px; background:var(--weiss); margin:6px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position:relative; color:var(--weiss); overflow:hidden; }
.hero-bild { position:absolute; inset:0; }
.hero-bild img { width:100%; height:100%; object-fit:cover; }
.hero-bild::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,.62) 100%);
}
.hero-innen {
  position:relative; z-index:1; text-align:center;
  padding:120px 24px 130px; max-width:900px; margin:0 auto;
}
.hero-eyebrow {
  display:inline-block; background:var(--gelb); color:var(--dunkel);
  font-weight:700; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; margin-bottom:26px;
}
.hero h1 { margin-bottom:20px; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.hero h1 .gelb { color:var(--gelb); }
.hero-lead { font-size:1.28rem; font-weight:500; line-height:1.5; color:rgba(255,255,255,.92); max-width:46ch; margin:0 auto 38px; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- Wegweiser (zwei Pfade) ---------- */
.wegweiser { display:grid; grid-template-columns:1fr 1fr; }
.pfad { padding:56px 48px; color:var(--weiss); }
.pfad-rot { background:var(--rot); }
.pfad-dunkel { background:var(--dunkel); }
.pfad-icon { width:46px; height:46px; margin-bottom:20px; }
.pfad-icon svg { width:46px; height:46px; }
.pfad-rot .pfad-icon { color:#ffd7d9; }
.pfad-dunkel .pfad-icon { color:var(--gelb); }
.pfad h2 { font-size:clamp(1.7rem,2.6vw,2.2rem); margin-bottom:10px; }
.pfad p { color:rgba(255,255,255,.85); font-size:1.08rem; max-width:44ch; margin-bottom:26px; }
.pfad-rot .btn { background:var(--weiss); color:var(--rot); }
.pfad-rot .btn:hover { background:var(--nebel); color:var(--rot-dunkel); }

/* ---------- Sections ---------- */
.section { padding:96px 0; }
.section-nebel { background:var(--nebel); }
.section-head { max-width:740px; margin-bottom:56px; }
.section-head.mitte { text-align:center; margin-left:auto; margin-right:auto; }
.titel-klein {
  display:block; font-weight:700; font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:14px; color:var(--stein);
}
.titel-klein::before { content:""; display:inline-block; width:14px; height:14px; background:var(--gelb); margin-right:10px; vertical-align:-2px; }
.section-head p { font-size:1.16rem; color:var(--stein); margin:0; }

/* ---------- Leistungs-Karten ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cards-2 { grid-template-columns:repeat(2,1fr); }
/* Grid-Items duerfen unter min-content schrumpfen, sonst reissen lange Worte
   die Spalten ueber den Viewport (horizontales Wischen auf Mobile). */
.cards > *, .beitrags-grid > * { min-width:0; }
.karte {
  background:var(--weiss); border:1px solid var(--linie); border-top:4px solid var(--dunkel);
  padding:28px 26px 24px; display:flex; flex-direction:column; text-decoration:none; color:var(--dunkel);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.karte:hover { transform:translateY(-4px); box-shadow:var(--schatten); border-top-color:var(--rot); }
.karte-nr { font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--rot); letter-spacing:.08em; margin-bottom:14px; }
.karte h3 { font-size:1.45rem; margin-bottom:10px; }
.karte p { color:var(--stein); font-size:.99rem; margin-bottom:22px; }
.karte-fuss { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.preis-chip {
  display:inline-block; background:var(--gelb); color:var(--dunkel);
  font-weight:700; font-size:.98rem; padding:8px 14px; border-radius:var(--radius); white-space:nowrap;
}
.pfeil-link { font-weight:700; font-size:.95rem; color:var(--rot); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pfeil-link svg { width:16px; height:16px; }

/* ---------- Ablauf ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:schritt; }
.step { background:var(--weiss); border:1px solid var(--linie); padding:30px 28px; }
.step::before {
  counter-increment:schritt; content:counter(schritt,decimal-leading-zero);
  display:inline-block; font-family:var(--font-head); font-weight:800; font-size:1.3rem;
  background:var(--gelb); color:var(--dunkel); padding:6px 12px; margin-bottom:18px;
}
.step h3 { font-size:1.25rem; margin-bottom:8px; }
.step p { color:var(--stein); font-size:.98rem; margin:0; }

/* ---------- Split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split-bild { position:relative; }
.split-bild img { border-radius:var(--radius); box-shadow:var(--schatten); }
.split-bild::before {
  content:""; position:absolute; inset:-14px auto auto -14px;
  width:96px; height:96px; background:var(--gelb); z-index:-1;
}
.split-text h2 { margin-bottom:16px; }
.split-text p { color:var(--asphalt); }
.split-text .btn { margin-top:14px; }
.fakt-liste { list-style:none; margin:22px 0 0; padding:0; }
.fakt-liste li { display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--linie); }
.fakt-liste li:last-child { border-bottom:0; }
.fakt-liste svg { width:20px; height:20px; color:var(--rot); flex:none; margin-top:3px; }

/* ---------- News / Ratgeber ---------- */
.beitrags-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.beitrag { background:var(--weiss); border:1px solid var(--linie); padding:28px 26px; display:flex; flex-direction:column; text-decoration:none; color:var(--dunkel); transition:transform .15s ease, box-shadow .15s ease; }
a.beitrag:hover { transform:translateY(-4px); box-shadow:var(--schatten); }
.beitrag .datum { font-weight:700; font-size:.85rem; color:var(--rot); letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }
.beitrag .chip { display:inline-block; align-self:flex-start; background:var(--gelb); color:var(--dunkel); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; margin-bottom:14px; }
.beitrag h3 { font-size:1.3rem; margin-bottom:8px; }
.beitrag p { color:var(--stein); font-size:.97rem; margin-bottom:18px; }
.beitrag .pfeil-link { margin-top:auto; }

/* ---------- CTA-Band ---------- */
.cta-band { position:relative; color:var(--weiss); overflow:hidden; }
.cta-band-bild { position:absolute; inset:0; }
.cta-band-bild img { width:100%; height:100%; object-fit:cover; }
.cta-band-bild::after { content:""; position:absolute; inset:0; background:rgba(10,10,12,.72); }
.cta-band-innen { position:relative; z-index:1; text-align:center; padding:96px 24px; max-width:760px; margin:0 auto; }
.cta-band h2 { margin-bottom:12px; }
.cta-band p { font-size:1.2rem; color:rgba(255,255,255,.88); margin-bottom:34px; }
.cta-band .hero-ctas { margin:0; }

/* ---------- Footer ---------- */
.site-footer { background:var(--dunkel); color:#aeb2b9; line-height:1.45; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-top:72px; padding-bottom:48px; }
.footer-logo img { height:auto; width:240px; margin-bottom:14px; }
.footer-claim { color:var(--gelb); font-family:var(--font-head); font-weight:700; font-size:1.2rem; margin-bottom:10px; }
.site-footer h4 { color:var(--gelb); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin-bottom:4px; }
.site-footer a { color:#aeb2b9; text-decoration:none; }
.site-footer a:hover { color:var(--weiss); }
.footer-kontakt p { margin:0 0 6px; }
.footer-kontakt a { color:var(--weiss); font-weight:600; }
.footer-boden { border-top:1px solid #2e3138; padding-top:22px; padding-bottom:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.9rem; }
.footer-boden a { color:#8b8f97; text-decoration:none; margin-left:20px; }
.footer-boden a:hover { color:var(--weiss); }

/* ---------- Seitenkopf Unterseiten ---------- */
.page-head { position:relative; color:var(--weiss); overflow:hidden; }
.page-head-bild { position:absolute; inset:0; }
.page-head-bild img { width:100%; height:100%; object-fit:cover; }
.page-head-bild::after { content:""; position:absolute; inset:0; background:rgba(10,10,12,.68); }
.page-head-innen { position:relative; z-index:1; padding-top:84px; padding-bottom:84px; }
.page-head h1 { font-size:clamp(2.2rem,4.5vw,3.4rem); margin-bottom:12px; }
.page-head p { color:rgba(255,255,255,.88); font-size:1.18rem; max-width:62ch; margin:0; }
.page-head .titel-klein { color:rgba(255,255,255,.75); }

/* ---------- Leistungen (Detailseite) ---------- */
.service-liste { display:grid; gap:24px; }
.service {
  display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:start;
  background:var(--weiss); border:1px solid var(--linie); border-left:4px solid var(--gelb);
  padding:34px 36px;
}
.service h2 { font-size:1.7rem; margin-bottom:10px; }
.service p { color:var(--asphalt); max-width:64ch; }
.service .fakt-liste { max-width:64ch; }
.service-preis { text-align:right; white-space:nowrap; padding-top:6px; }
.service-preis .betrag { font-family:var(--font-head); font-weight:800; font-size:1.7rem; color:var(--rot); display:block; }
.service-preis .hinweis { color:var(--stein); font-size:.88rem; }
.hinweis-box { background:var(--nebel); border-left:4px solid var(--rot); padding:18px 22px; margin-top:18px; font-size:.95rem; color:var(--asphalt); }
.hinweis-box b { display:block; margin-bottom:4px; }

/* ---------- Termin / Formular ---------- */
.form-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start; }
.formular { background:var(--weiss); border:1px solid var(--linie); border-top:4px solid var(--gelb); padding:40px; }
.feld { margin-bottom:20px; }
.feld label { display:block; font-weight:600; font-size:.95rem; margin-bottom:7px; }
.feld label .opt { color:var(--stein); font-weight:400; }
.feld input, .feld select, .feld textarea {
  width:100%; padding:13px 15px; border:1px solid var(--linie); border-radius:var(--radius);
  font-family:var(--font); font-size:1rem; color:var(--dunkel); background:var(--weiss);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline:2px solid var(--gelb); outline-offset:0; border-color:var(--dunkel); }
.feld textarea { min-height:120px; resize:vertical; }
.feld-reihe { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-hinweis { font-size:.88rem; color:var(--stein); margin-top:6px; }
.formular .btn { width:100%; margin-top:8px; }
.hp-falle { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-seite-aside h3 { margin-bottom:10px; }
.form-seite-aside .kontakt-karte { margin-bottom:16px; }

/* ---------- Kontakt ---------- */
.kontakt-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.kontakt-karte {
  background:var(--weiss); border:1px solid var(--linie); border-top:4px solid var(--dunkel);
  padding:30px 28px; text-decoration:none; color:var(--dunkel); display:block;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.kontakt-karte:hover { transform:translateY(-3px); box-shadow:var(--schatten); border-top-color:var(--rot); }
.kontakt-karte .karte-icon { width:44px; height:44px; color:var(--rot); margin-bottom:16px; }
.kontakt-karte .karte-icon svg { width:44px; height:44px; }
.kontakt-karte h3 { margin-bottom:4px; }
.kontakt-karte .wert { font-size:1.2rem; font-weight:700; color:var(--rot); }
.kontakt-karte p { color:var(--stein); font-size:.95rem; margin:8px 0 0; }
.adress-block { background:var(--dunkel); color:var(--weiss); padding:44px; }
.adress-block h3 { color:var(--weiss); }
.adress-block p { color:#c9ccd2; }
.adress-block .btn { margin-top:16px; }

/* ---------- Aktuelles / Ratgeber (Seiten) ---------- */
.beitrags-liste { display:grid; gap:22px; max-width:860px; }
.beitrag-voll { background:var(--weiss); border:1px solid var(--linie); border-left:4px solid var(--gelb); padding:30px 32px; }
.beitrag-voll .datum { font-weight:700; font-size:.85rem; color:var(--rot); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.beitrag-voll h2 { font-size:1.5rem; text-transform:none; margin-bottom:8px; }
.beitrag-voll p { color:var(--asphalt); margin:0; }
.tipp { background:var(--weiss); border:1px solid var(--linie); border-left:4px solid var(--gelb); padding:32px 34px; }
.tipp h2 { font-size:1.5rem; text-transform:none; margin-bottom:10px; }
.tipp p, .tipp li { color:var(--asphalt); }
.tipp ol { padding-left:22px; }
.tipp li { margin-bottom:6px; }

/* ---------- Rechtliches ---------- */
.prose { max-width:72ch; }
.prose h2 { font-size:1.45rem; text-transform:none; margin-top:44px; }
.prose p, .prose li { color:var(--asphalt); }

/* ---------- 404 ---------- */
.fehler { text-align:center; padding-top:110px; padding-bottom:110px; }
.fehler .code { font-family:var(--font-head); font-weight:800; font-size:5.5rem; color:var(--rot); line-height:1; }

/* ---------- Responsive ---------- */
@media (max-width:1020px) {
  .cards, .beitrags-grid { grid-template-columns:repeat(2,1fr); }
  .service { grid-template-columns:1fr; }
  .service-preis { text-align:left; padding-top:0; }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .hero-innen { padding:88px 24px 96px; }
  .wegweiser { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:44px; }
  .steps { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:36px; padding-top:56px; padding-bottom:36px; }
  .topbar-links span.verstecken-mobil { display:none; }
}
@media (max-width:860px) {
  .header-cta .btn span { display:none; }
  .header-cta .btn { padding:14px 15px; }
  .header-innen { gap:14px; }
  .header-logo img { height:46px; }
  .nav-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:84px; left:0; right:0; background:var(--dunkel); border-bottom:1px solid #2e3138; box-shadow:0 20px 30px rgba(0,0,0,.4); }
  .main-nav.offen { display:block; }
  .main-nav ul { flex-direction:column; gap:0; padding:10px 18px 18px; }
  .main-nav a { padding:14px 12px; font-size:1.08rem; border-bottom:1px solid #2e3138; }
  .main-nav li:last-child a { border-bottom:0; }
  .topbar { display:none; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .section { padding:68px 0; }
  .cards, .cards-2, .beitrags-grid { grid-template-columns:1fr; }
  .kontakt-grid { grid-template-columns:1fr; }
  .service { padding:26px 24px; }
  .formular { padding:28px 22px; }
  .feld-reihe { grid-template-columns:1fr; }
  .pfad { padding:44px 28px; }
  .hero-ctas .btn { width:100%; }
  .footer-boden { flex-direction:column; gap:8px; }
  .footer-boden a { margin-left:0; margin-right:18px; }
}

/* ---------- v3: drei Zielgruppen, Notfall-FAB, Dropdown, Checkliste ---------- */

/* Wegweiser in drei Pfaden */
.wegweiser { grid-template-columns:repeat(3,1fr); }
.pfad-gelb { background:var(--gelb); color:var(--dunkel); }
.pfad-gelb p { color:rgba(23,25,29,.78); }
.pfad-gelb .pfad-icon { color:var(--rot); }
.chip-24 {
  display:inline-block; background:rgba(255,255,255,.22); color:var(--weiss);
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius); margin-bottom:16px;
}
.pfad-gelb .chip-24 { background:var(--dunkel); color:var(--gelb); }
.pfad-dunkel .chip-24 { background:var(--gelb); color:var(--dunkel); }
.pfad .mehr-link { display:inline-block; margin-top:16px; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:4px; }

/* Sticky Notfall-Button */
.notfall-fab {
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:flex; align-items:center; gap:10px;
  background:var(--rot); color:var(--weiss); text-decoration:none;
  font-weight:700; font-size:1rem; line-height:1;
  padding:16px 22px; border-radius:50px; box-shadow:0 10px 28px rgba(227,6,19,.45);
}
.notfall-fab:hover { background:var(--rot-dunkel); color:var(--weiss); }
.notfall-fab .dot { width:10px; height:10px; border-radius:50%; background:#fff; flex:none; animation:fabpuls 1.6s ease-out infinite; }
.notfall-fab svg { width:21px; height:21px; flex:none; }
.notfall-fab .kurz { display:none; }
@keyframes fabpuls {
  0% { box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70% { box-shadow:0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion:reduce) { .notfall-fab .dot { animation:none; } }
@media (max-width:640px) {
  .notfall-fab { right:14px; bottom:14px; padding:15px 18px; }
  .notfall-fab .lang { display:none; }
  .notfall-fab .kurz { display:inline; font-size:1.05rem; }
}

/* Dropdown-Navigation */
@media (min-width:861px) {
  .hat-menue { position:relative; }
  .hat-menue > a .pfeil { display:inline-block; margin-left:5px; font-size:.7em; }
  .main-nav .untermenue {
    position:absolute; top:100%; left:0; min-width:250px;
    background:var(--weiss); border:1px solid var(--linie); border-top:3px solid var(--gelb);
    box-shadow:var(--schatten); border-radius:0 0 var(--radius) var(--radius);
    padding:8px 0; display:none; list-style:none; margin:0;
  }
  .main-nav .hat-menue:hover .untermenue, .main-nav .hat-menue:focus-within .untermenue { display:block; }
  .untermenue li { margin:0; }
  .untermenue a { display:block; padding:10px 18px; font-size:.98rem; border-radius:0; }
  .untermenue a:hover { background:var(--nebel); }
  .untermenue .trenner { border-top:1px solid var(--linie); margin:6px 0; }
}
@media (max-width:860px) {
  .hat-menue > a .pfeil { display:none; }
  .main-nav .untermenue { list-style:none; margin:0; padding:0 0 0 16px; }
  .untermenue a { font-size:.98rem; color:#c9ccd2; }
}

/* Checkliste (Panne/Unfall) */
.checkliste { background:var(--weiss); border:1px solid var(--linie); border-top:4px solid var(--rot); padding:36px 38px; }
.checkliste h2 { font-size:1.6rem; text-transform:none; }
.checkliste ol { list-style:none; counter-reset:check; margin:22px 0 0; padding:0; }
.checkliste ol li {
  counter-increment:check; position:relative; padding:14px 0 14px 52px;
  border-bottom:1px solid var(--linie); color:var(--asphalt);
}
.checkliste ol li:last-child { border-bottom:0; }
.checkliste ol li::before {
  content:counter(check); position:absolute; left:0; top:12px;
  width:30px; height:30px; background:var(--gelb); color:var(--dunkel);
  font-weight:800; font-family:var(--font-head); display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
}
.checkliste ol li b { color:var(--dunkel); }
.check-notrufe { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.check-notrufe span { background:var(--nebel); padding:8px 14px; border-radius:var(--radius); font-weight:600; font-size:.95rem; }

/* Kompetenzliste (Über uns) */
.kompetenz { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.kompetenz-karte { background:var(--weiss); border:1px solid var(--linie); border-left:4px solid var(--gelb); padding:26px 28px; }
.kompetenz-karte h3 { font-size:1.2rem; margin-bottom:6px; }
.kompetenz-karte p { color:var(--stein); font-size:.97rem; margin:0; }
.kompetenz-karte .jahre { display:inline-block; font-weight:800; font-family:var(--font-head); color:var(--rot); margin-bottom:8px; }

/* Spezifikationen (Transport) */
.spec-tabelle { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:28px 0; }
.spec { background:var(--weiss); border:1px solid var(--linie); border-top:3px solid var(--gelb); padding:20px; text-align:center; }
.spec .wert { font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--dunkel); display:block; }
.spec .einheit { color:var(--stein); font-size:.9rem; }

/* Preise kompakt (Reifen) */
.preis-tabelle { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.preis-block { background:var(--weiss); border:1px solid var(--linie); border-top:3px solid var(--gelb); padding:24px; }
.preis-block .betrag { font-family:var(--font-head); font-weight:800; font-size:1.8rem; color:var(--rot); display:block; margin-bottom:6px; }
.preis-block .was { font-weight:700; margin-bottom:4px; }
.preis-block p { color:var(--stein); font-size:.92rem; margin:0; }

/* Pannen-Arten */
.pannen-arten { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.pannen-arten span { background:var(--weiss); border:1px solid var(--linie); padding:9px 16px; border-radius:50px; font-weight:600; font-size:.95rem; }

/* Formular: bedingte Bereiche */
.form-gruppe { border:1px solid var(--linie); border-radius:var(--radius); padding:24px; margin-bottom:20px; background:var(--nebel); }
.form-gruppe legend { font-weight:700; font-size:1.05rem; padding:0 10px; }
.form-gruppe.versteckt { display:none; }

@media (max-width:900px) {
  .wegweiser { grid-template-columns:1fr; }
  .kompetenz { grid-template-columns:1fr; }
  .spec-tabelle { grid-template-columns:repeat(2,1fr); }
  .preis-tabelle { grid-template-columns:1fr; }
}