/* =============================================================================
   SELBSTGEHOSTETE FONTS (DSGVO-konform — keine Google-Server-Verbindung)
   Dateien liegen im Ordner  fonts/  neben dieser CSS-Datei.
============================================================================ */
/* Archivo — Variable Font, deckt alle Gewichte 400–900 in einer Datei ab */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/Archivo-Variable.woff2') format('woff2-variations');
}
/* JetBrains Mono — Regular (400) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
/* JetBrains Mono — Medium (500) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

/* =============================================================================
   SK DELLENTECHNIK — STYLES
   -----------------------------------------------------------------------------
   Struktur:
     0. Selbstgehostete Fonts — siehe oben (DSGVO-konform)
     1. Tokens (CSS Custom Properties)
     2. Base / Reset
     3. Utilities (.reveal, .mono, .grain)
     4. Layout (section, footer wrappers)
     5. Components
        5.1 Navigation
        5.2 Hero
        5.3 Statement Band
        5.4 Headings (h2.h, p.lead, .eyebrow)
        5.5 Buttons
        5.6 Feature Cards
        5.7 Before/After Slider
        5.8 Service Cards + Modal
        5.9 Compare
        5.10 FAQ
        5.11 About
        5.12 Location + Reviews
        5.13 Final CTA
        5.14 Footer
        5.15 FAB (Floating Action Button)
        5.16 Drawer (Side-Sheet, WhatsApp)
     6. Sub-page styles (Impressum, Smart Repair Landing, etc.)
     7. Media Queries (zentral am Ende)

   Naming:
     Komponenten-Prefix: .nav-*, .hero-*, .ba-*, .svc-*, .feat-*, .cmp-*, .about-*, .loc-*, .foot-*
     Modifier: -primary, -secondary, .open, .scrolled, .in (reveal-state)
============================================================================= */

/* Hinweis: Die selbstgehosteten Fonts (Archivo Variable + JetBrains Mono) sind
   bereits am Anfang dieser Datei aktiv deklariert — DSGVO-konform, ohne Google-Server.
   Benötigte Dateien im Ordner /fonts:
     Archivo-Variable.woff2, JetBrainsMono-Regular.woff2, JetBrainsMono-Medium.woff2  */

/* ============================================================================
   1. TOKENS
============================================================================ */
:root {
  /* Farben — Hintergründe */
  --bg:           #050505;
  --bg-card:      #0b0b0b;
  --bg-elev:      #101010;

  /* Farben — Linien (subtle separators) */
  --line:         rgba(255,255,255,.08);
  --line-2:       rgba(255,255,255,.14);

  /* Farben — Text */
  --txt:          #f5f5f5;
  --txt-mute:     #9b9b9b;
  --txt-dim:      #6b6b6b;

  /* Brand-Akzente */
  --red:          #e31e24;        /* Primary Brand Red */
  --red-bright:   #ff3d3d;        /* Hover-State */
  --red-glow:     rgba(227,30,36,.35);
  --green:        #25d366;        /* WhatsApp-Grün */
  --green-bright: #2dd96e;

  /* Spacing-Skala — 8px-Raster, eine einzige Quelle der Wahrheit.
     Ersetzt verstreute px/rem-Werte für konsistente Abstände. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  22px;   /* horizontaler Standard-Seitenrand */
  --s-6:  28px;   /* Karten-Innenpadding (vereinheitlicht) */
  --s-7:  40px;
  --s-8:  56px;   /* .tight Sektions-Abstand vertikal */
  --s-9:  72px;
  --s-10: 96px;   /* Standard Sektions-Abstand vertikal */

  /* Border-Radii */
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;

  /* Easing-Kurven */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-pop: cubic-bezier(.34,1.05,.64,1);

  /* Z-Index Skala — eine einzige Quelle der Wahrheit */
  --z-grain:     50;
  --z-nav:       1000;
  --z-modal:     2000;
  --z-drawer:    3000;
  --z-fab:       35;
}

/* ============================================================================
   2. BASE / RESET
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip ist strenger als hidden → kein subpixel-Leak von off-screen Elementen.
     Plus: blockt iOS Back-Swipe via Edge-Pan. */
  overflow-x: clip;
  overscroll-behavior-x: none;
}
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  letter-spacing: -.005em;
  padding-bottom: env(safe-area-inset-bottom);
}

::selection { background: var(--red); color: #fff; }

a       { color: inherit; text-decoration: none; }
button  { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img     { display: block; max-width: 100%; }
iframe  { border: 0; }

/* ============================================================================
   3. UTILITIES
============================================================================ */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
}

/* Grain-Overlay (texturiert das ganze UI dezent) */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: .05;
  contain: strict;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Reveal-Animation (Element fadet hoch beim Scroll-in) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* will-change nur während der Animation aktiv (per JS gesetzt/entfernt),
   damit der 4K-TV nicht dauerhaft Ebenen vorhält */
.reveal.animating { will-change: opacity, transform; }

.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }
.reveal[data-delay="6"] { transition-delay: .42s; }
.reveal[data-delay="7"] { transition-delay: .49s; }
.reveal[data-delay="8"] { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   4. LAYOUT
============================================================================ */
section {
  padding: var(--s-10) var(--s-5);
  position: relative;
}
section.tight { padding: var(--s-8) var(--s-5); }

/* Skip-link für Tastatur-Nutzer (Accessibility) */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--red); color: #fff;
  padding: 8px 16px; z-index: 9999;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ============================================================================
   5.1 NAVIGATION
============================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  padding-left: max(2rem, env(safe-area-inset-left));
  padding-right: max(2rem, env(safe-area-inset-right));
  height: 56px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow: visible;
}
.nav.scrolled {
  background: rgba(5,5,7,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 24px rgba(0,0,0,.55);
  border-bottom-color: rgba(255,255,255,.08);
}
/* Auf sehr großen Screens (TV/4K) Blur ganz weglassen — sonst wird er pro Scroll-Frame neu gerechnet */
@media (min-width: 1500px) {
  .nav.scrolled {
    background: rgba(5,5,7,.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  height: 88px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(220,30,30,.5));
  /* Logo ist größer als die 56px-Navbar und ragt kontrolliert ober-/unterhalb
     hinaus — die Bar bleibt schlank, das Logo wirkt präsent. */
  margin: -16px 0 -32px;
  position: relative;
  z-index: 1;
  /* Eingangs-Fade als Keyframe-Animation: läuft zuverlässig beim Laden ab,
     unabhängig von Cache, JS-Timing oder Reflow. transform separat, damit
     der Hover-Scale nicht kollidiert. */
  animation: logoFadeIn 1.6s cubic-bezier(.16,1,.3,1) .2s both;
  transition: transform .25s var(--ease);
}
@keyframes logoFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); filter: drop-shadow(0 4px 18px rgba(220,30,30,.5)) blur(4px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: drop-shadow(0 4px 18px rgba(220,30,30,.5)) blur(0); }
}
.brand:hover .brand-logo {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo {
    animation: none;
    opacity: 1;
  }
}

.brand-text { display: none; }
.brand-name {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  text-transform: uppercase;
}
.brand-name b { color: var(--red); }
.brand-tagline {
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}
.nav-link {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,.65);
  padding: .35rem .85rem;
  border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }

/* Lesbarkeit, solange die Navbar transparent über dem Hero schwebt */
.nav:not(.scrolled) .nav-link,
.nav:not(.scrolled) .brand-logo {
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.45));
}
.nav.scrolled .nav-link,
.nav.scrolled .brand-logo {
  text-shadow: none;
  filter: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--red);
  padding: .45rem 1.1rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 0 16px var(--red-glow);
  white-space: nowrap;
}
.nav-cta:hover {
  background: #c91a1f;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(227,30,36,.5);
}

/* Live-Dot (pulsiert, signalisiert "Online") */
.dot-live {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  animation: livePulse 1.8s ease-in-out infinite;
}
.nav-cta .dot-live { background: #fff; }
.statement .dot-live, .final .meta .dot-live {
  background: var(--green);
}
@keyframes livePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .4;  transform: scale(.7); }
}

/* Mobile Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu (slide down) */
.nav-mobile {
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0;
  z-index: 999;
  background: rgba(7,7,9,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 1.5rem 2rem;
  flex-direction: column;
  gap: .5rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-mobile.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.nav-mobile-link {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s var(--ease);
}
.nav-mobile-link:hover { color: #fff; }

.nav-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .75rem;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

/* ============================================================================
   5.2 HERO
============================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 22px 56px;
  overflow: hidden;
  isolation: isolate;
}
.hero video.hero-img,
.hero img.hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-img {
  background-size: cover; background-position: center 35%;
  transform: scale(1.05);
  will-change: transform;
}
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(227,30,36,.05), transparent 60%),
    linear-gradient(to bottom,
      rgba(5,5,5,.42) 0%,
      rgba(5,5,5,.08) 35%,
      rgba(5,5,5,.42) 65%,
      rgba(5,5,5,.9) 90%,
      var(--bg) 100%);
  opacity: .45;
  animation: heroDim 2s cubic-bezier(.16, 1, .3, 1) 1.6s forwards;
}
@keyframes heroDim { to { opacity: 1; } }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%; z-index: -1;
  background: linear-gradient(to top, var(--bg) 0%, rgba(5,5,5,.85) 30%, transparent 100%);
}

/* === LICHT-AN: sauberes Aufleuchten beim Laden (kein Flackern) === */
.hero-light {
  position: absolute; inset: 0; z-index: 1;
  background: #050505;
  pointer-events: none;
  opacity: 1;
  animation: heroLightOn 1.8s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
@keyframes heroLightOn { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-light { animation: none; opacity: 0; }
}
/* Text/Buttons immer ÜBER dem Licht-Overlay */
.hero-inner { position: relative; z-index: 2; }

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 7.5vw, 58px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
}
.hero h1 .l1, .hero h1 .l2 {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: heroFade 1.6s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero h1 .l1 { animation-delay: 1.9s;  color: #fff; }
.hero h1 .l2 { animation-delay: 2.12s; color: var(--txt-mute); font-style: italic; font-weight: 400; }
.hero h1 .l2 .accent { color: var(--red); font-style: normal; font-weight: 500; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes heroFade { to { opacity: 1; transform: translateY(0); } }

.hero-sub {
  max-width: 420px;
  margin: 22px 0 36px;
  color: var(--txt-mute);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .005em;
  opacity: 0; transform: translateY(22px);
  animation: heroFade 1.5s cubic-bezier(.16, 1, .3, 1) 2.4s forwards;
}

/* Hagel-Zeile: steht sofort da (kein Einfaden), elegant zwischen Headline und Untertitel */
.hero-hagel {
  margin: 26px 0 0;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.92);
}
.hero-hagel .accent {
  color: var(--red);
  font-weight: 500;
}

/* Google-Sterne im Hero — DEAKTIVIERT (für späteren Einsatz in Reviews-Section)
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 9px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all .3s var(--ease);
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.1s var(--ease-out) 1.05s forwards;
}
.hero-rating:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.hero-rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbc04;
}
.hero-rating-stars svg { width: 15px; height: 15px; }
.hero-rating-text {
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
.hero-rating-text b { font-weight: 700; color: #fff; }
*/

.hero-cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0; transform: translateY(22px);
  animation: heroFade 1.5s cubic-bezier(.16, 1, .3, 1) 2.65s forwards;
}

/* ============================================================================
   5.3 STATEMENT BAND
============================================================================ */
.statement {
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #070707;
}
.statement-inner { padding: 26px 22px; overflow: hidden; }
.statement-line {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #bdbdbd;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.statement-line .sep {
  color: var(--red);
  opacity: .5;
  width: 18px; height: 1px;
  background: currentColor;
  text-indent: -9999px;
  overflow: hidden;
}

/* ============================================================================
   5.4 HEADINGS
============================================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 600;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--red);
}

h2.h {
  margin: 0 0 18px;
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
h2.h .accent { color: var(--red); }
h2.h .light  { color: var(--txt-mute); font-weight: 500; }

p.lead {
  margin: 0 0 36px;
  color: var(--txt-mute);
  font-size: 15px;
  line-height: 1.65;
  max-width: 560px;
}

/* ============================================================================
   5.5 BUTTONS
============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 14px;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all .3s var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 32px -8px var(--red-glow),
              inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover {
  background: var(--red-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px var(--red-glow),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary .wa { width: 18px; height: 18px; color: #fff; }

.btn-secondary {
  background: rgba(255,255,255,.04);
  color: #fff;
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}

/* Hero-spezifische schlankere Button-Variante */
.hero .btn {
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 12.5px;
  letter-spacing: .04em;
  font-weight: 600;
  text-transform: none;
}
.hero .btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.hero .btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color: #e8e8e8;
}
.hero .btn-secondary:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.32);
}

/* ============================================================================
   5.6 FEATURE CARDS
============================================================================ */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}
.feat-card {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: transparent;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all .5s var(--ease);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.feat-card .feat-img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1s var(--ease-out), filter .5s var(--ease);
  filter: saturate(110%) brightness(.9);
}
/* Fallback wenn kein Bild gesetzt */
.feat-card .feat-img:not([style]) {
  background:
    radial-gradient(circle at 25% 30%, rgba(255,180,140,.45), transparent 38%),
    radial-gradient(circle at 75% 65%, rgba(255,140,140,.32), transparent 42%),
    linear-gradient(140deg, #2a2520 0%, #181412 40%, #0d0a09 100%);
  opacity: .7;
}
.feat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,8,8,0)   0%,
    rgba(8,8,8,.10) 40%,
    rgba(5,5,5,.55) 80%,
    rgba(5,5,5,.82) 100%);
  transition: opacity .5s var(--ease);
}
.feat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 0% 0%, rgba(227,30,36,.10), transparent 45%);
  opacity: .6;
  transition: opacity .5s var(--ease);
}
.feat-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9),
              0 0 0 1px rgba(255,255,255,.04);
}
.feat-card:hover .feat-img { transform: scale(1.08); filter: saturate(125%) brightness(1); }
.feat-card:hover::before { opacity: .7; }
.feat-card:hover::after  { opacity: 1; }

.feat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.feat-icon.red {
  color: var(--red);
  border-color: rgba(227,30,36,.2);
  background: rgba(227,30,36,.05);
}
.feat-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }

.feat-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  word-break: break-word;
  hyphens: auto;
  position: relative;
  z-index: 1;
}
.feat-card p {
  margin: 0;
  color: var(--txt-mute);
  font-size: 13px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   5.7 BEFORE / AFTER SLIDER
============================================================================ */
.ba-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}

.ba-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  box-shadow: 0 40px 100px -50px rgba(0,0,0,.9);
  position: relative;
}

.ba-frame {
  position: relative;
  height: 62vh;
  min-height: 380px;
  max-height: 580px;
  width: 100%;
  user-select: none;
  touch-action: pan-y;
  overflow: hidden;
  cursor: ew-resize;
  background: #000;
}

/* Innere Schiene: trägt beide Bilder nebeneinander, wird beim Drag verschoben.
   Reihenfolge: Nachher links, Vorher rechts. Start zeigt Vorher (rechte Hälfte). */
.ba-track {
  position: absolute; inset: 0;
  display: flex;
  width: 200%;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}
.ba-track.snap { transition: transform .55s cubic-bezier(.22,1,.36,1); }

.ba-pane {
  position: relative;
  width: 50%; height: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #0a0a0a;
  overflow: hidden;
}
.ba-pane-after-inner {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.ba-pane::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55));
  pointer-events: none;
}

/* Tags — "Vorher" (rot, rechts) / "Nachher" (grün, links) */
.ba-tag {
  position: absolute;
  top: 16px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 3;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.ba-tag.l { left: 16px;  /* Nachher */
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.45);
  color: #4ade80;
}
.ba-tag.r { right: 16px; /* Vorher */
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.45);
  color: #f87171;
}
.ba-tag .d {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
.ba-tag.l .d { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.ba-tag.r .d { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

/* Hint Pill unten — verschwindet nach erster Interaktion */
.ba-hint {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
  animation: baHintPulse 3s ease-in-out infinite;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ba-hint svg { width: 14px; height: 14px; opacity: .85; }
.ba-frame.touched .ba-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  animation: none;
}
@keyframes baHintPulse {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}

/* Progress-Bar oben (füllt von rechts nach links) */
.ba-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 2;
}
.ba-progress-fill {
  position: absolute; inset: 0 0 0 auto;
  width: 0%;
  background: linear-gradient(270deg, var(--red), #fff);
  box-shadow: 0 0 12px var(--red-glow);
  transition: width .08s linear;
}

/* Subtiler Glow am Rand wenn am Ende einer Seite */
.ba-edge-glow {
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.ba-edge-glow.left  { left: 0;  background: linear-gradient(to right, rgba(37,211,102,.25), transparent); }
.ba-edge-glow.right { right: 0; background: linear-gradient(to left,  var(--red-glow), transparent); }

/* Case-Label unter Slider */
.ba-case-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 0;
  color: var(--txt-mute);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}
.ba-case-label .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--txt-dim);
  font-size: 11px;
  letter-spacing: .08em;
}
.ba-case-label .name { color: var(--txt); }

/* Reveal speziell für Before/After Cards */
.ba-reveal {
  opacity: 0;
  transform: translateY(60px) scale(.96);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: opacity, transform;
}
.ba-reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ba-reveal[data-delay="1"] { transition-delay: .12s; }
.ba-reveal[data-delay="2"] { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  .ba-hint { animation: none; }
  .ba-track.snap { transition: none; }
  .hero h1 .l1, .hero h1 .l2,
  .hero-sub, .hero-cta-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero::before { animation: none; opacity: 1; }
}

/* ============================================================================
   5.8 SERVICE CARDS + MODAL
============================================================================ */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 1rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.svc-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;       /* etwas weniger breit als 16:10 → mehr vom Motiv sichtbar auf Mobile */
  background: #111;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.svc-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 36px rgba(0,0,0,.65);
}
.svc-card:active { transform: scale(.98); }

.svc-card-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .45s var(--ease);
}
.svc-card:hover .svc-card-img { transform: scale(1.05); }

/* Overlay: Title zentriert. Gradient lässt das Bild in der Mitte durchscheinen. */
.svc-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.15) 35%,
    rgba(0,0,0,.15) 65%,
    rgba(0,0,0,.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 1.1rem;
  gap: 8px;
}
.svc-card-overlay h4 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.svc-card-tap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.svc-tap-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.svc-card:hover .svc-tap-icon { transform: translateX(3px); }

/* --- Service Modal --- */
.svc-modal-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.svc-modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.svc-modal {
  background: #111113;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  transform: translateY(100%);
  transition: transform .4s var(--ease-pop);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  will-change: transform;
}
.svc-modal-backdrop.open .svc-modal { transform: translateY(0); }
.svc-modal-backdrop.closing .svc-modal {
  transform: translateY(100%);
  transition: transform .3s ease-in;
}

/* Drag handle pill */
.svc-modal-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  pointer-events: none;
}
.svc-modal-handle span {
  display: block;
  width: 40px; height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 99px;
}

/* Image-Area: dient als Drag-Handle für die Geste */
.svc-modal-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1c;
  position: relative;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.svc-modal-img:active { cursor: grabbing; }

.svc-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 10;
  background: rgba(0,0,0,.6);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(12px);
  transition: background .2s var(--ease), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.svc-modal-close:hover  { background: rgba(0,0,0,.85); transform: scale(1.08); }
.svc-modal-close:active { transform: scale(.93); }
.svc-modal-close svg { width: 18px; height: 18px; }

.svc-modal-body { padding: 1.5rem 1.5rem 2.5rem; }
.svc-modal-body h3 {
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  margin: 0 0 .75rem;
}
.svc-modal-body p {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(255,255,255,.65);
  margin: 0 0 1.5rem;
}
.svc-modal-cta {
  width: 100%;
  justify-content: center;
  gap: 8px;
  display: flex;
  align-items: center;
  font-size: .95rem;
  padding: .85rem 1.5rem;
}

/* ============================================================================
   5.9 COMPARE (Klassisch vs SK)
============================================================================ */
.compare {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cmp {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.cmp.bad  { opacity: .55; }
.cmp.good {
  border-color: rgba(227,30,36,.18);
  background: linear-gradient(180deg, rgba(227,30,36,.04), var(--bg-card));
}
.cmp h5 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp.good h5 { color: var(--red); }
.cmp ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmp li {
  font-size: 13.5px;
  color: #e0e0e0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.cmp.bad li { color: var(--txt-mute); }
.cmp li svg {
  width: 14px; height: 14px;
  flex: 0 0 14px;
  margin-top: 3px;
}

/* ============================================================================
   5.9b REVIEWS (Google-Bewertungen-Cards)
============================================================================ */
.rv-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.rv-card {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.rv-card:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}
.rv-stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbc04;
}
.rv-stars svg { width: 16px; height: 16px; }
.rv-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  letter-spacing: -.005em;
  flex: 1;
}
.rv-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rv-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #c91a1f);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.rv-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.005em;
}
.rv-context {
  font-size: 12px;
  color: var(--txt-mute);
  letter-spacing: .01em;
}
.rv-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 36px auto 0;
  padding: 14px 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
  width: fit-content;
}
.rv-cta:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.rv-cta-g { width: 18px; height: 18px; flex-shrink: 0; }
#reviews { padding-top: 0; }
@media (max-width: 600px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-card { padding: 22px 20px; }
  .rv-quote { font-size: 14.5px; }
}

/* ============================================================================
   5.9c PARTNER
============================================================================ */
.partners {
  text-align: center;
  padding: 72px 22px 8px;
  max-width: 1100px;
  margin: 0 auto;
}
.partners-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 12px;
}
.partners-h {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
}
.partners-lead {
  margin: 14px auto 0;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--txt-mute);
}
.partners-grid {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 280px;
  height: 160px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  text-decoration: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.partner-card:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transform: translateY(-3px);
}
.partner-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}
.partner-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--txt-mute);
}
.partner-logo {
  max-height: 60px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: transform .3s var(--ease);
}
.partner-card:hover .partner-logo {
  transform: scale(1.04);
}
.partner-logo--lg {
  max-height: 88px;
  max-width: 240px;
}

/* ============================================================================
   5.10 FAQ
============================================================================ */
.faq {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q {
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.q[open] { border-color: var(--line-2); }
.q summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 50px 18px 20px;
  font-size: 14.5px;
  font-weight: 600;
  position: relative;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "+";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--txt-mute);
  font-weight: 300;
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.q[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--red);
}
.q-body {
  padding: 0 20px 20px;
  color: var(--txt-mute);
  font-size: 14px;
  line-height: 1.65;
}

/* ============================================================================
   5.11 ABOUT
============================================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}
.about-portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0a0a;
  aspect-ratio: 4 / 5;
  min-height: 340px;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(.9);
}
/* Atmosphärisches Fallback wenn kein Foto */
.about-portrait .ap-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 25%,  rgba(255,255,255,.10), transparent 60%),
    radial-gradient(80% 70% at 50% 110%, rgba(227,30,36,.18),   transparent 65%),
    linear-gradient(180deg, #141414 0%, #0a0a0a 60%, #050505 100%);
}
.about-portrait .ap-name {
  position: absolute;
  left: 22px; top: 22px;
  right: 22px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  z-index: 2;
  /* Lesbarkeit auf hellen Werkstatt-Bildern: weicher Schatten + Top-Vignette */
  text-shadow: 0 2px 14px rgba(0,0,0,.8), 0 0 32px rgba(0,0,0,.6);
}
/* Sanfter dunkler Verlauf hinter dem Namen — fängt das Bild ab, ohne es zu verdecken */
.about-portrait::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.about-portrait .ap-name small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.about-portrait .ap-mono {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  z-index: 2;
}
.about-portrait .ap-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .16em;
  font-weight: 600;
}
.about-portrait .ap-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}
.about-portrait::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
}

.about-text {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-kicker {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--red);
}
.about-text h3 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.about-text p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #cfcfcf;
  margin: 0;
}
.about-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.about-sign-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  border: 1px solid var(--line-2);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  letter-spacing: .02em;
}
.about-sign-name { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: .01em; }
.about-sign-role { font-size: 11px;   color: var(--txt-mute); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

.about-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.about-badge {
  padding: 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-badge-k {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.about-badge-v {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

/* ============================================================================
   5.12 LOCATION + REVIEWS
============================================================================ */
.loc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
.loc-reviews {
  display: block;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.loc-reviews:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,.9);
}
.loc-rev-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.loc-rev-num {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 8px;
}
.loc-rev-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
  color: #ffc94d;
}
.loc-rev-stars svg { width: 13px; height: 13px; }
.loc-rev-count {
  font-size: 11.5px;
  color: var(--txt-mute);
  letter-spacing: .04em;
}
.loc-rev-g {
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-top: 6px;
  opacity: .85;
}
.loc-rev-cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #e8e8e8;
  transition: color .25s var(--ease);
}
.loc-reviews:hover .loc-rev-cta { color: var(--red); }

/* Verbundene Standort-Karte: Öffnungszeiten + Adresse oben, Karte unten */
.loc-card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.loc-card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.loc-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loc-hours-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.loc-hours-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.loc-hours-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(46,213,115,.1);
  border: 1px solid rgba(46,213,115,.25);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .01em;
  color: #2ed573;
  font-weight: 600;
}
.loc-hours-status .dot-live { background: #2ed573; }
.loc-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.loc-hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.loc-hours-list li:last-child { border-bottom: 0; }
.loc-hours-day {
  color: var(--txt-mute);
  letter-spacing: -.005em;
}
.loc-hours-time {
  color: #fff;
  font-size: 14px;
  letter-spacing: -.005em;
  font-weight: 600;
}
.loc-hours-closed {
  color: rgba(255,255,255,.35);
  font-style: italic;
  font-weight: 400;
}
.loc-addr {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.loc-addr-k {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 700;
  margin-bottom: 6px;
}
.loc-addr-v {
  font-size: 14.5px;
  color: #e8e8e8;
  line-height: 1.45;
}
.loc-hours-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.loc-hours-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -.005em;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);
}
.loc-hours-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.loc-hours-link:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.loc-hours-link-wa {
  background: rgba(37,211,102,.08);
  border-color: rgba(37,211,102,.25);
  color: #fff;
}
.loc-hours-link-wa svg { color: #25d366; }
.loc-hours-link-wa:hover {
  background: rgba(37,211,102,.14);
  border-color: rgba(37,211,102,.4);
}

.loc-card-map {
  position: relative;
  border-top: 1px solid var(--line);
  background: #1a1a1a;
}
.loc-card-map iframe {
  display: block;
  width: 100%; height: 280px;
  filter: saturate(.4) contrast(.95);
  border: 0;
}
.loc-route {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 700;
  text-transform: uppercase;
  transition: all .25s var(--ease);
}
.loc-route:hover {
  background: rgba(20,20,20,.92);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.loc-route svg { width: 15px; height: 15px; color: var(--red); }

/* ============================================================================
   5.12b ABLAUF (So einfach geht's — 3-Schritte)
============================================================================ */
.ablauf-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}
.ablauf-step {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.ablauf-step:hover {
  border-color: rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.ablauf-step:hover .ablauf-img { transform: scale(1.05); }
.ablauf-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s var(--ease);
}
.ablauf-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,11,.35) 0%, rgba(11,11,11,.55) 45%, rgba(11,11,11,.92) 100%);
}
.ablauf-num {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #fff;
  font-weight: 600;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 9px;
  border-radius: 6px;
}
.ablauf-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(227,30,36,.15);
  border: 1px solid rgba(227,30,36,.3);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.6);
}
.ablauf-icon svg { width: 22px; height: 22px; }
.ablauf-step h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ablauf-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  letter-spacing: -.005em;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.ablauf-line {
  align-self: center;
  width: 36px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  position: relative;
}
.ablauf-line::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px; height: 6px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
@media (max-width: 860px) {
  .ablauf-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ablauf-line {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--line), transparent);
    justify-self: center;
  }
  .ablauf-line::after {
    right: 50%;
    top: auto;
    bottom: -3px;
    transform: translateX(50%) rotate(135deg);
  }
}

/* ============================================================================
   5.13 FINAL CTA
============================================================================ */
.final {
  position: relative;
  padding: 72px 22px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final .mobil-cta { font-size: 15px; padding: 17px 32px; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(227,30,36,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
.final h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.final h2 .accent { color: var(--red); }
.final p {
  color: var(--txt-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 36px;
}
.final .btn {
  width: 100%;
  max-width: 380px;
}
.final .meta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--txt-mute);
  letter-spacing: .04em;
}

/* ============================================================================
   5.14 FOOTER
============================================================================ */
footer.site-footer {
  padding: 60px 22px;
  border-top: 1px solid var(--line);
  background: #040404;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.foot-brand .b-name {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e8e8e8;
  font-weight: 700;
}
.foot-brand p {
  margin: 0;
  color: var(--txt-mute);
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
}
.foot-logo {
  width: 140px;
  height: auto;
  margin-bottom: 4px;
  display: block;
  animation: logoFadeIn .8s var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .foot-logo { animation: none; opacity: 1; }
}

/* Social Icons im Footer-Brand */
.foot-socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.foot-social {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  color: #e8e8e8;
  transition: all .25s var(--ease);
}
.foot-social:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--red-glow);
}
.foot-social svg {
  width: 17px; height: 17px;
}

.foot-col h5 {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 700;
}
.foot-col a, .foot-col p {
  display: block;
  color: #d8d8d8;
  font-size: 13.5px;
  margin: 0 0 8px;
  transition: color .2s var(--ease);
}
.foot-col a:hover { color: var(--red); }
.foot-col p { color: var(--txt-mute); }

.foot-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: var(--txt-dim);
  letter-spacing: .02em;
}
.foot-bottom .legal {
  display: flex;
  gap: 18px;
}
.foot-bottom .legal a {
  color: var(--txt-dim);
  transition: color .2s var(--ease);
}
.foot-bottom .legal a:hover { color: #e8e8e8; }

/* ============================================================================
   5.15 FAB (Floating WhatsApp Button)
============================================================================ */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  width: 56px; height: 56px;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px -8px var(--red-glow),
              inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .3s var(--ease);
}
.fab:hover { transform: scale(1.06); }
.fab svg { width: 26px; height: 26px; }
.fab-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

/* ============================================================================
   5.16 DRAWER (Side-Sheet, slides in from right)
============================================================================ */
.drawer-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(420px, 96vw);
  background: #111113;
  border-radius: 24px 0 0 24px;
  border-left: 1px solid rgba(255,255,255,.07);
  box-shadow: -8px 0 40px rgba(0,0,0,.6);
  transform: translateX(105%);
  transition: transform .4s var(--ease-pop),
              visibility 0s linear .4s;
  overflow-y: auto;
  visibility: hidden;
  /* Allow vertical scroll but JS hijacks horizontal for drag-to-close */
  touch-action: pan-y;
  padding: 22px;
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .4s var(--ease-pop),
              visibility 0s linear 0s;
}
/* Links/Buttons innerhalb des Drawers sind klickbar (kein Drag) */
.drawer a, .drawer button { touch-action: auto; }

/* Scroll-Hinweis: weicher Verlauf am unteren Drawer-Rand, solange noch
   Inhalt unter der Sichtkante liegt. Wird per .at-bottom (JS) ausgeblendet. */
.drawer-scrollcue {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  height: 56px;
  margin: 0 -22px -22px;       /* bis an die Drawer-Ränder */
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  background: linear-gradient(to top, #111113 28%, rgba(17,17,19,0));
  opacity: 1;
  transition: opacity .3s var(--ease);
  z-index: 3;
}
.drawer.at-bottom .drawer-scrollcue { opacity: 0; }
.drawer-scrollcue .cue-chev {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--txt-mute);
  animation: cueBounce 1.6s var(--ease) infinite;
}
.drawer-scrollcue .cue-chev svg { width: 15px; height: 15px; }
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-scrollcue .cue-chev { animation: none; }
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  /* Bleibt beim Scrollen oben kleben, damit der Inhalt klar darunter durchläuft */
  position: sticky;
  top: -22px;                 /* gleicht das padding-top des Drawers aus */
  margin: -22px -22px 0;      /* zieht den Header über das Drawer-Padding bis an die Ränder */
  padding: 22px 22px 16px;
  background: #111113;
  z-index: 3;
}
.wa-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  flex: 0 0 46px;
  box-shadow: 0 6px 18px rgba(37,211,102,.25);
}
.wa-avatar svg { width: 22px; height: 22px; }
.wa-avatar .live {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid #0e0e0e;
  animation: livePulse 2s infinite;
}
.wa-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.wa-status {
  font-size: 11.5px;
  color: var(--txt-mute);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.wa-status .gd {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.drawer-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: #fff;
  flex: 0 0 32px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.drawer-close:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--line-2);
}
.drawer-close svg { width: 14px; height: 14px; }

/* Sofort-Hilfe / Notausgang im Header — kompakter grüner Kreis,
   immer erreichbar (in jedem Wizard-Schritt). Passt in den schmalen Drawer. */
.drawer-direct {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  color: var(--green);
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.3);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.drawer-direct svg { width: 16px; height: 16px; }
.drawer-direct span { display: none; }   /* Label nur für Screenreader nötig, visuell Icon */
.drawer-direct:hover {
  background: rgba(37,211,102,.2);
  border-color: rgba(37,211,102,.55);
  transform: translateY(-1px);
}
.drawer-direct:active { transform: translateY(0); }

/* Selbsterklärender "Direkt schreiben"-Link unter der Begrüßung —
   der eigentliche Notausgang für Ungeduldige. */
.wa-direct-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 2px 0 4px;
}
.wa-direct-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #25d366;
  text-decoration: none;
  background: rgba(37,211,102,.1);
  border: 1px solid rgba(37,211,102,.28);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.wa-direct-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.wa-direct-link:hover { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.45); }
.wa-call-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt);
  text-decoration: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.wa-call-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.wa-call-link:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.wa-direct-link b { color: var(--green); font-weight: 600; }
.wa-direct-link svg { width: 12px; height: 12px; color: var(--green); transition: transform .2s var(--ease); }
.wa-direct-link:hover {
  background: rgba(37,211,102,.14);
  border-color: rgba(37,211,102,.4);
  color: #d8d8d8;
}
.wa-direct-link:hover svg { transform: translateX(2px); }

.wa-chat {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-bubble {
  align-self: flex-start;
  max-width: 80%;
  background: #1f2c34;
  color: #fff;
  padding: 12px 14px;
  border-radius: 0 14px 14px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.wa-bubble .ts {
  display: block;
  font-size: 10px;
  color: #a0c0b0;
  margin-top: 6px;
  letter-spacing: .02em;
}
.wa-typing {
  align-self: flex-start;
  font-size: 11.5px;
  color: var(--txt-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 0 4px;
}
.wa-typing .dots {
  display: inline-flex;
  gap: 3px;
}
.wa-typing .dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--txt-mute);
  animation: typing 1.4s infinite;
}
.wa-typing .dots i:nth-child(2) { animation-delay: .2s; }
.wa-typing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.drawer h3 {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.drawer .sub {
  margin: 0 0 18px;
  color: var(--txt-mute);
  font-size: 13.5px;
  line-height: 1.55;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.drawer-actions .btn {
  width: 100%;
  justify-content: flex-start;
  padding: 16px 18px;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 14.5px;
  font-weight: 600;
}
.drawer-actions .btn .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.1);
  margin-right: 4px;
}
.drawer-actions .btn .ic svg { width: 16px; height: 16px; }
.drawer-actions .btn .ar { margin-left: auto; opacity: .7; }

.drawer-actions .wa-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(37,211,102,.4);
}
.drawer-actions .wa-green:hover {
  background: var(--green-bright);
  transform: translateY(-1px);
}
.drawer-actions .wa-green .ic { background: rgba(255,255,255,.18); }

.drawer-contact {
  padding: 18px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.dc-row .lbl {
  color: var(--txt-dim);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}
.dc-row a {
  color: #e8e8e8;
  transition: color .2s var(--ease);
}
.dc-row a:hover { color: var(--red); }

/* ============================================================================
   UTILITY: Touch vs. Mouse Texte (responsive Sprache)
============================================================================ */
.show-touch { display: none; }
.show-mouse { display: inline; }
@media (hover: none) and (pointer: coarse) {
  .show-touch { display: inline; }
  .show-mouse { display: none; }
}

/* ============================================================================
   6. SUB-PAGE STYLES (Impressum, Smart Repair Landing Pages)
============================================================================ */
.page-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 140px 24px 120px;
}

.page-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--txt-mute);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 24px;
}

.page-title {
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 20px;
}

.page-lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--txt-mute);
  line-height: 1.55;
  max-width: 64ch;
  margin-bottom: 48px;
}

.back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: all .3s var(--ease);
  margin-bottom: 32px;
}
.back-home:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--txt-mute);
  transform: translateX(-2px);
}
.back-home svg { width: 14px; height: 14px; }

.article-section {
  scroll-margin-top: 100px;
  margin-bottom: 56px;
}
.article-section h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 18px;
}
.article-section h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 10px;
}
.article-section p,
.article-section li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--txt-mute);
  margin-bottom: 14px;
}
.article-section a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-section ul {
  padding-left: 22px;
  margin-bottom: 18px;
}
.article-section strong {
  color: var(--txt);
  font-weight: 600;
}

/* Daten-Karte (Impressum-Adresse, etc.) */
.data-card {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 24px 28px;
  margin: 24px 0 32px;
}
.data-card dt {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 600;
  margin-top: 14px;
}
.data-card dt:first-child { margin-top: 0; }
.data-card dd {
  font-size: 15.5px;
  color: var(--txt);
  margin: 4px 0 0;
  line-height: 1.55;
}

/* Check-List für SEO-Landing-Pages */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--txt);
  font-size: 15.5px;
  line-height: 1.55;
}
.check-list li:last-child { border-bottom: none; }
.check-list li svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--red);
}

/* SEO-Page Hero (für Landing Pages wie hagelschaden-*, parkdellen-*) */
.seo-hero {
  padding: 140px 24px 64px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.seo-hero .page-eyebrow { margin-bottom: 24px; }
.seo-hero .page-title   { margin-bottom: 18px; }
.seo-hero .page-lead    { margin: 0 auto 36px; }
.seo-hero .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.seo-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}
.seo-section h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.seo-section .lead {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--txt-mute);
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 36px;
}

/* Service-Grid (3 Spalten Übersicht auf Sub-Pages) */
.svc-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
.svc-grid .svc-block {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 24px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.svc-grid .svc-block:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.svc-grid .svc-block h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.svc-grid .svc-block p {
  font-size: 14px;
  color: var(--txt-mute);
  line-height: 1.6;
  margin: 0;
}

/* Inhaltsverzeichnis für lange Rechtstext-Seiten.
   Bewusst NICHT sticky: Bei einspaltigem Layout würde eine klebende TOC
   über dem durchscrollenden Text liegen. Sie scrollt daher normal mit. */
.toc {
  position: static;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 48px;
}
.toc h6 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.toc ol {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: toc-item;
}
.toc li {
  counter-increment: toc-item;
  margin: 2px 0;
}
.toc a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--txt);
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.toc a::before {
  content: counter(toc-item, decimal-leading-zero);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--txt-dim);
  min-width: 24px;
}
.toc a:hover {
  color: var(--red);
  border-bottom-color: var(--line-2);
}

/* Article Section Nummerierung (für Impressum / Datenschutz) */
.article-section {
  /* Sprungziel landet unter der fixierten Navbar statt dahinter */
  scroll-margin-top: 100px;
}
.article-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.article-section h2 .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--red);
  font-weight: 500;
  letter-spacing: .08em;
}

/* Platzhalter-Markierung (rote gestrichelte Box) — sollte vor Live-Gang weg sein */
.placeholder {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(227,30,36,.12);
  border: 1px dashed var(--red);
  color: #ff8a8a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85em;
  font-weight: 500;
}

/* FAQ-Style speziell für Sub-Pages (anders als die Index-Variante) */
.seo-section .faq {
  margin-top: 32px;
}
.seo-section .faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  border-radius: 0;
  background: transparent;
}
.seo-section .faq details[open] summary { color: var(--red); border: none; }
.seo-section .faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  transition: color .25s var(--ease);
}
.seo-section .faq summary::-webkit-details-marker { display: none; }
.seo-section .faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-mute);
  transition: transform .3s var(--ease);
  position: static;
  transform: none;
  top: auto; right: auto;
}
.seo-section .faq details[open] summary::after {
  transform: rotate(45deg);
}
.seo-section .faq .faq-body {
  padding: 12px 0 4px;
  color: var(--txt-mute);
  font-size: 15px;
  line-height: 1.7;
}

/* Tablet+ adjustments für seo-section */
@media (min-width: 768px) {
  .seo-hero    { padding: 180px 32px 88px; }
  .seo-section { padding: 72px 32px; }
  .svc-grid    { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ============================================================================
   7. MEDIA QUERIES (zentral am Ende, damit Overrides sauber bleiben)
============================================================================ */

/* --- ≥ 500px: Service Cards 2-spaltig wieder erlauben --- */
@media (max-width: 500px) {
  .svc-cards { grid-template-columns: 1fr; }
}

/* --- ≥ 720px: Statement-Band horizontal --- */
@media (min-width: 720px) {
  .statement-line {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }
  .statement-line .sep { width: 14px; }
}

/* --- ≥ 760px: Tablet+ --- */
@media (min-width: 760px) {
  section { padding: 120px 40px; }
  .hero   { padding: 140px 40px 80px; }
  .features  { grid-template-columns: 1fr 1fr; gap: 18px; }
  .loc-grid  { grid-template-columns: 1fr; gap: 18px; }
  .loc-card-map iframe { height: 380px; }
  .about-grid { grid-template-columns: 1fr 1.2fr; gap: 22px; }
  .about-text { padding: 34px; }
  .about-text h3 { font-size: 30px; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .fab { bottom: 32px; right: 32px; }
  .hero h1 { font-size: clamp(64px, 7vw, 108px); }
  .ba-frame { height: min(60vh, 580px); aspect-ratio: auto; min-height: 380px; max-height: 580px; }
  .ba-stack { gap: 40px; }
}

/* --- ≥ 768px: Mobile-Menu raus, Desktop-Nav rein. Sub-Page padding aufdrehen --- */
@media (max-width: 768px) {
  .nav         { gap: 1rem; padding-left: max(1.1rem, env(safe-area-inset-left)); padding-right: max(1.1rem, env(safe-area-inset-right)); }
  .nav-links  { display: none; }
  .nav-cta    { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile { display: flex; }
  .brand-tagline { display: none; }
  .brand-name { font-size: .82rem; }
  .brand-logo { height: 60px; margin: -2px 0 -18px; }
}
@media (min-width: 768px) {
  .page-wrap { padding: 160px 32px 160px; }
}

/* --- ≥ 1100px: Container max-width --- */
@media (min-width: 1100px) {
  section            { max-width: 1240px; margin: 0 auto; }
  .hero              { max-width: none; }
  .hero-inner        { max-width: 1240px; margin: 0 auto; width: 100%; }
  footer.site-footer { padding: 80px 40px 60px; }
  .foot-grid         { max-width: 1240px; margin: 0 auto; }
  .foot-bottom       { max-width: 1240px; margin: 40px auto 0; }
}

/* =============================================================================
   DRAWER WIZARD — Erweiterung für app.js / style.css
   -----------------------------------------------------------------------------
   Mehrstufiger Anfrage-Flow im bestehenden WhatsApp-Drawer:
     Start →  [Du kommst zu uns]  oder  [Wir kommen zu dir]
       zu-uns:   Schaden → Marke → Modell → Bauteil → WhatsApp
       zu-dir:   Hinweis → Garage? → (PLZ-Check) → Schaden → … → WhatsApp

   Nutzt vorhandene Tokens: --green, --red, --line, --txt-mute, --ease, --r-md …
   Alles im Dark-Look des restlichen Drawers gehalten.
============================================================================ */

/* Wizard-Container: nimmt den Platz unter dem Chat-Header ein.
   Steps werden per .active ein-/ausgeblendet (kein Layout-Sprung). */
.wz {
  position: relative;
  margin-top: 4px;
}

/* Zurück-Leiste oben im Wizard (Fortschritt + Back-Button) */
.wz-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  min-height: 30px;
}
.wz-back {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.wz-back:hover { background: rgba(255,255,255,.10); border-color: var(--line-2); }
.wz-back svg { width: 14px; height: 14px; }
.wz-back[hidden] { display: none; }

.wz-progress {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.wz-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  transition: width .4s var(--ease);
}
.wz-step-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 600;
  white-space: nowrap;
}

/* Einzelner Step — nur einer ist sichtbar */
.wz-step { display: none; }
.wz-step.active {
  display: block;
  animation: wzIn .35s var(--ease-out);
}
@keyframes wzIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.wz-step h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.wz-step .wz-sub {
  margin: 0 0 18px;
  color: var(--txt-mute);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Auswahl-Karten (groß, 2 Optionen nebeneinander – z.B. der Start-Split) */
.wz-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.wz-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.wz-card:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.wz-card .wz-card-ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(37,211,102,.12);
  color: var(--green);
}
.wz-card .wz-card-ic svg { width: 24px; height: 24px; }
.wz-card .wz-card-t { font-size: 14px; font-weight: 700; }
.wz-card .wz-card-d { font-size: 11.5px; color: var(--txt-mute); line-height: 1.4; }

/* Listen-Optionen (Schaden, Marke, Modell, Bauteil …) — vertikale Pills */
.wz-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.wz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.wz-opt:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--line-2);
  transform: translateX(2px);
}
.wz-opt.selected {
  border-color: var(--green);
  background: rgba(37,211,102,.10);
}
.wz-opt .wz-opt-ic {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: var(--txt-mute);
}
.wz-opt .wz-opt-ic svg { width: 17px; height: 17px; }
.wz-opt .wz-opt-ar {
  margin-left: auto;
  opacity: .4;
  color: var(--txt-mute);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.wz-opt:hover .wz-opt-ar { opacity: .8; transform: translateX(2px); }
.wz-opt .wz-opt-ar svg { width: 15px; height: 15px; }

/* Such-/Filterfeld (für lange Marken-/Modell-Listen) */
.wz-search {
  position: relative;
  margin-bottom: 12px;
}
.wz-search input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.wz-search input:focus { border-color: var(--green); background: rgba(255,255,255,.06); }
.wz-search input::placeholder { color: var(--txt-dim); }
.wz-search .wz-search-ic {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--txt-dim);
  pointer-events: none;
}
.wz-list-scroll {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  margin: 0 -4px 4px 0;
}
.wz-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--txt-dim);
  font-size: 13px;
}

/* Info-/Warnbox (z.B. der Garagen-/Temperatur-Hinweis) */
.wz-note {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(227,30,36,.06);
  border: 1px solid rgba(227,30,36,.22);
  font-size: 13px;
  line-height: 1.6;
  color: #e8d6d6;
  margin-bottom: 18px;
}
.wz-note b { color: #fff; }
.wz-note .wz-note-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #ff8a8a;
  margin-bottom: 8px;
}
.wz-note .wz-note-h svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* PLZ-Eingabe */
.wz-plz-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.wz-plz-row input {
  flex: 1;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 16px;          /* >=16px → kein iOS-Zoom */
  letter-spacing: .12em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.wz-plz-row input:focus { border-color: var(--green); background: rgba(255,255,255,.06); }
.wz-plz-row input::placeholder { color: var(--txt-dim); letter-spacing: .12em; }
.wz-plz-check {
  flex: 0 0 auto;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.wz-plz-check:hover { background: var(--green-bright); }
.wz-plz-check:disabled { opacity: .4; cursor: not-allowed; }

/* PLZ-Ergebnis */
.wz-plz-result {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.55;
  display: none;
}
.wz-plz-result.show { display: block; animation: wzIn .3s var(--ease-out); }
.wz-plz-result.ok {
  background: rgba(37,211,102,.08);
  border: 1px solid rgba(37,211,102,.30);
  color: #d4f5e0;
}
.wz-plz-result.far {
  background: rgba(255,180,60,.07);
  border: 1px solid rgba(255,180,60,.28);
  color: #f3e2c4;
}
.wz-plz-result.err {
  background: rgba(227,30,36,.07);
  border: 1px solid rgba(227,30,36,.26);
  color: #f0d4d4;
}
.wz-plz-result .wz-plz-km {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: #fff;
}
.wz-plz-result-h {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.wz-plz-result.ok .wz-plz-result-h  { color: var(--green-bright); }
.wz-plz-result.far .wz-plz-result-h { color: #ffc864; }
.wz-plz-result.err .wz-plz-result-h { color: #ff8a8a; }
.wz-plz-result-h svg { width: 18px; height: 18px; flex: 0 0 18px; }
.wz-plz-result .wz-plz-cta {
  margin-top: 14px;
  width: 100%;
}

/* Zusammenfassung vor dem WhatsApp-Versand */
.wz-summary {
  border-radius: var(--r-md);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  padding: 6px 18px;
  margin-bottom: 18px;
}
.wz-summary .wz-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.wz-summary .wz-sum-row:last-child { border-bottom: none; }
.wz-summary .wz-sum-l {
  color: var(--txt-dim);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  flex: 0 0 auto;
}
.wz-summary .wz-sum-v {
  color: #fff;
  font-weight: 600;
  text-align: right;
}

/* Foto-Hinweis vor dem Absprung */
.wz-photo-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(37,211,102,.06);
  border: 1px solid rgba(37,211,102,.20);
  font-size: 12.5px;
  line-height: 1.55;
  color: #d4f5e0;
  margin-bottom: 18px;
}
.wz-photo-hint svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--green); margin-top: 1px; }

/* Großer WhatsApp-Senden-Button am Ende (nutzt vorhandenen .wa-green Look) */
.wz-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 18px;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 24px -8px rgba(37,211,102,.45);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.wz-send:hover { background: var(--green-bright); transform: translateY(-1px); }
.wz-send svg { width: 20px; height: 20px; }

/* Scrollbar dezent im Drawer */
.wz-list-scroll::-webkit-scrollbar { width: 6px; }
.wz-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }

/* ============================================================================
   BAUJAHR WHEEL-PICKER (iOS-Wecker-Stil)
============================================================================ */
.wz-picker {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 220px;          /* = 5 sichtbare Items à 44px */
  margin: 8px 0 6px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  overflow: hidden;
  touch-action: pan-y;    /* nur vertikal — verhindert horizontales Wackeln */
  /* sanfte Verblassung oben/unten wie bei iOS */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}
/* Mittiger Auswahl-Balken */
.wz-picker-highlight {
  position: absolute;
  top: 50%;
  left: 10px; right: 10px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  pointer-events: none;
  z-index: 1;
}
.wz-reel {
  flex: 0 0 92px;
  width: 92px;            /* feste Breite — kein Layout-Shift */
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;
  text-align: center;
  position: relative;
  z-index: 2;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* kein Durchscrollen auf den Drawer */
  will-change: scroll-position;
}
.wz-reel::-webkit-scrollbar { display: none; }
/* Padding oben/unten, damit erstes/letztes Item in die Mitte scrollen kann
   (220px Höhe − 44px Item) / 2 = 88px */
.wz-reel-pad { height: 88px; }
.wz-reel-item {
  height: 44px;
  line-height: 44px;
  scroll-snap-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 600;
  color: var(--txt-dim);
  opacity: .45;
  /* KEIN transform/scale → kein horizontales Tanzen; nur Farbe/Opacity faden */
  transition: color .18s var(--ease), opacity .18s var(--ease);
  cursor: pointer;
  user-select: none;
}
.wz-reel-item.active {
  color: #fff;
  opacity: 1;
}

/* Live-Vorschau des gewählten Jahres */
.wz-year-preview {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--green-bright);
  font-weight: 600;
  margin-top: 4px;
}

/* ============================================================================
   INDEX-ABSCHNITT: "Wir kommen zu dir" Erklärung
============================================================================ */
.mobil {
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
}
.mobil .mobil-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.mobil-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }

/* Zwei Wege nebeneinander */
.mobil-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  margin-bottom: 36px;
  align-items: start;
}
.mobil-way-head { margin-bottom: 18px; }
.mobil-way-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 12px;
}
.mobil-way-tag.come { background: rgba(227,30,36,.12); color: var(--red-bright); }
.mobil-way-tag.shop { background: rgba(227,30,36,.12); color: var(--red-bright); }
.mobil-way-head h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
}

/* Schritt-Karten mit Bild-Bereich */
.mobil-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobil-card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.mobil-card:hover { border-color: var(--red); transform: translateY(-3px); }
.mobil-card-img {
  display: block;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1d;
  position: relative;
}
.mobil-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-card) 2%, rgba(11,11,11,.1) 60%);
}
.mobil-card-num {
  position: absolute;
  top: 12px; left: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(227,30,36,.9);
  padding: 3px 9px;
  border-radius: 7px;
  letter-spacing: .08em;
  z-index: 1;
}
.mobil-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 14px 20px 6px;
  letter-spacing: -.01em;
}
.mobil-card p {
  color: var(--txt-mute);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 20px 18px;
}

/* Karte mit Live-Video (App-Demo) — Hochkant-Recording full-bleed */
.mobil-card-img--video {
  height: 280px;
  background-color: #0d0d0f;
}
.mobil-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 760px) {
  .mobil-card-img--video { height: 340px; }
}

/* "Platz checken" Karte — Bild etwas nach unten gezogen + Unterkante heller */
.mobil-card-img--platz {
  background-position: center 25%;   /* Bild runtergezogen: zeigt mehr vom oberen Bereich */
  filter: brightness(1.1);            /* insgesamt einen Tick heller */
}
.mobil-card-img--platz::after {
  /* dunkler Verlauf flacher → untere Bildhälfte bleibt sichtbar, Naht bleibt sauber */
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 38%);
}

.mobil-radius {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  padding: 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(227,30,36,.25);
  margin-bottom: 28px;
  isolation: isolate;
}
/* Firmenfahrzeug als Hintergrund — zeigt visuell "wir kommen zu dir" */
.mobil-radius .mobil-radius-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 35%;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.mobil-radius:hover .mobil-radius-img { transform: scale(1.06); }
/* Verlauf: oben das Auto sichtbar, unten abgedunkelt für lesbaren Text */
.mobil-radius::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(10,4,5,.94) 0%,
    rgba(12,5,6,.82) 32%,
    rgba(15,6,7,.35) 62%,
    rgba(20,8,9,.12) 100%);
}
.mobil-radius .mobil-radius-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mobil-radius .mobil-radius-ic {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(227,30,36,.85);
  color: #fff;
  box-shadow: 0 4px 16px rgba(227,30,36,.4);
}
.mobil-radius .mobil-radius-ic svg { width: 24px; height: 24px; }
.mobil-radius .mobil-radius-txt {
  font-size: 14px;
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.mobil-radius .mobil-radius-txt b { color: var(--red-bright); }

.mobil-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  border: none;
  font-family: inherit;
  box-shadow: 0 8px 24px -8px rgba(227,30,36,.5);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.mobil-cta:hover { background: var(--red-bright); transform: translateY(-2px); }
.mobil-cta svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .mobil-ways { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .wz-split { grid-template-columns: 1fr; }
}
/* ===== Google-Maps Einwilligungs-Dialog ===== */
.map-consent-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal,9999);
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease);
}
.map-consent-backdrop.open{opacity:1;pointer-events:auto}
.map-consent{
  width:100%;max-width:440px;
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:28px 26px 22px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
  transform:translateY(14px) scale(.98);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.map-consent-backdrop.open .map-consent{transform:translateY(0) scale(1)}
.map-consent-title{
  font-size:19px;font-weight:700;letter-spacing:-.01em;
  color:var(--txt);margin:0 0 12px;
}
.map-consent-text{
  font-size:13.5px;line-height:1.6;color:var(--txt-mute);margin:0 0 22px;
}
.map-consent-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.map-consent-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.map-consent-btn{
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--txt);
  transition:all .25s var(--ease);
}
.map-consent-cancel:hover{background:rgba(255,255,255,.06);border-color:var(--txt-mute)}
.map-consent-confirm{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.map-consent-confirm:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ============================================================================
   GROSSE BILDSCHIRME / SMART-TVS (≥1600px)
   TV-Browser haben schwache GPUs für die riesige Fläche. Video durch das
   Poster-Standbild ersetzen und teure Effekte reduzieren → flüssige Seite.
============================================================================ */
@media (min-width: 1600px) {
  /* Hero-Video ausblenden, Standbild über den Hero-Hintergrund zeigen */
  .hero video.hero-img {
    display: none !important;
  }
  .hero {
    background-image: url("bilder/dellentechnik-werkstatt-poster.jpg");
    background-size: cover;
    background-position: center 35%;
  }
  /* Grain (Rausch-Overlay) auf großer Fläche weglassen — spart Füllrate */
  .grain { display: none; }
  /* Hero-Vergrößerung zurücknehmen (weniger Neuberechnung der Riesenfläche) */
  .hero-img { transform: none; }
}

/* ============================================================================
   WERKSTATT-ALLTAG — Karussell
============================================================================ */
.alltag {
  position: relative;
  overflow: hidden;
  padding-top: 48px;        /* Lücke zur Sektion "Der Unterschied" deutlich verkleinert */
  max-width: 1400px;        /* Karussell breiter als die anderen Sektionen (1240px) -> größer */
}
/* obere Sektion enger an den Alltag heranziehen */
#vorher-nachher { padding-bottom: 48px; }
.alltag-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--txt-mute);
  margin-bottom: 14px;
}
.alltag-eyebrow .mono { color: var(--red); }

.carousel {
  position: relative;
  margin-top: 40px;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* sauberes Radius-Clipping iOS */
  touch-action: pan-y;        /* vertikal scrollen bleibt, horizontaler Swipe gehört uns */
  cursor: grab;
}
.carousel-viewport:active { cursor: grabbing; }
.carousel-track {
  display: flex;
  transition: transform .65s var(--ease-out);
  will-change: transform;
}
.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 3 / 2;   /* höher als 16:9; zusammen mit breiterer Sektion = großes Karussell */
  overflow: hidden;
}
.carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 22px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .01em;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  display: flex; align-items: baseline; gap: 10px;
}
.carousel-slide figcaption .mono {
  color: var(--red);
  font-size: 12px;
  flex-shrink: 0;
}

/* Pfeile */
.carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-arrow:hover { background: var(--red); border-color: var(--red); }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}
.carousel-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease), transform .25s var(--ease);
}
.carousel-dots button.active {
  background: var(--red);
  width: 26px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-arrow svg { width: 18px; height: 18px; }
  .carousel-arrow.prev { left: 10px; }
  .carousel-arrow.next { right: 10px; }
  .carousel-slide { aspect-ratio: auto; height: 58vh; max-height: 560px; }
  .carousel-slide figcaption { font-size: 13px; padding: 40px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}
/* =============================================================================
   SEO-HERO MIT HINTERGRUNDBILD  (für smart-repair-heidenheim.html)
   Pendant zu style-sub.css, hier in style.css, da diese Seite style-sub nicht lädt.
============================================================================= */
.seo-hero--img{
  position:relative;
  max-width:none;             /* volle Breite, Bild läuft randlos */
  isolation:isolate;
  overflow:hidden;
  padding-top:160px;padding-bottom:96px;
}
@media (min-width:768px){
  .seo-hero--img{padding-top:220px;padding-bottom:130px}
}
.seo-hero--img .seo-hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:scale(1.04);
}
.seo-hero--img::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(5,5,7,.55), transparent 70%),
    linear-gradient(to bottom, rgba(5,5,7,.7) 0%, rgba(5,5,7,.5) 45%, rgba(5,5,7,.85) 100%);
}
.seo-hero--img .page-title{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.seo-hero--img .page-lead{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 12px rgba(0,0,0,.7);
  max-width:64ch;
}
.seo-hero--img > *:not(.seo-hero-bg){
  max-width:1100px;margin-left:auto;margin-right:auto;
}