/* ============================================================
   HS-AUTOAUFBEREITUNG - Komponenten
   Dunkles Automotive-Premium · München-Trudering
   Tokens in tokens.css · keine externen JS-Bibliotheken
   ============================================================ */


/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body);
  /* 400 statt 300: Archivo ist eine Grotesk, kein Geometrisch-Light.
     Bei 300 wirkte die Seite dünn statt ruhig. */
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Ziffern immer gleich breit – Preise und Kennzahlen springen sonst */
  font-variant-numeric: tabular-nums;
}

main { overflow-x: hidden; width: 100%; max-width: 100%; display: flex; flex-direction: column; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* Markierung bewusst halbtransparent.
   Ein deckendes Rot legt sich beim Ziehen über Bilder und
   übermalt sie komplett – genau das passierte am Vorher/Nachher-
   Regler, wenn man über den Bildrand hinauszog. */
::selection { background: rgba(209, 47, 47, 0.34); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }

/* ---------- 3. Film-Grain & Ambient ---------- */
.grain {
  position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- 4. Typografie ----------
   Eine Familie, Hierarchie über Gewicht und Grad. Überschriften
   laufen eng (Grotesken vertragen das und wirken dadurch
   „gefräst"), Fließtext läuft normal. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-sub);
  color: var(--ink);
  text-wrap: balance;   /* gleichmäßige Zeilenlängen statt einem Wort allein */
}

.h-display {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.h-section {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-section);
}
.h-sub {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-sub);
}

.accent { color: var(--accent); }
/* Das eine kursive Wort in der Hero-Headline. Kein zweiter Font,
   sondern der echte Kursivschnitt derselben Familie. */
.italic-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

/* ---------- Sektionsmarke ----------
   Vorher: rote Pille mit leuchtendem Punkt über JEDER Sektion.
   Zwölfmal dasselbe Signal ist kein Akzent mehr, sondern Rauschen –
   und der Hauptgrund, warum die Seite unruhig wirkte. Jetzt: eine
   Haarlinie plus ein zurückgenommenes Label. Das Rot bleibt für
   das reserviert, was wirklich klickbar ist. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0;
  border: 0;
  background: none;
}
.eyebrow::before {
  content: ""; width: 1.8rem; height: 1px; border-radius: 0;
  background: var(--accent); box-shadow: none;
  flex-shrink: 0;
}

.lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.6;
  /* 65–75 Zeichen ist die Grenze, ab der das Auge die nächste
     Zeile nicht mehr sicher findet. */
  max-width: 68ch;
  text-wrap: pretty;
}

.muted { color: var(--ink-dim); }

/* ---------- 5. Layout ---------- */
.wrap { width: min(var(--wrap), 100% - 5rem); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }

/* Sektions-Reihenfolge: Leistungen direkt nach dem Hero */
.hero { order: 0; }
#leistungen { order: 1; }
main > section:not(.hero):not(#leistungen) { order: 2; }
.section-head { max-width: 740px; margin-bottom: clamp(1.9rem, 3.6vw, 2.8rem); }
.section-head .lead { margin-top: 1.2rem; }
.center { text-align: center; margin-inline: auto; }

.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: 0.5; z-index: 0;
}
.glow-accent { background: radial-gradient(circle, var(--accent-glow), transparent 70%); }

/* ---------- 6. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  padding: 0.78rem 0.78rem 0.78rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease),
              box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn .ic {
  width: 2.1rem; height: 2.1rem; border-radius: var(--r-pill);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease);
}
.btn .ic svg { width: 1rem; height: 1rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
  box-shadow: 0 14px 38px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary .ic { background: rgba(0, 0, 0, 0.22); color: #fff; }
.btn-primary:hover { box-shadow: 0 20px 50px -12px var(--accent-glow); transform: translateY(-2px); }
.btn-primary:hover .ic { transform: translate(3px, -3px); }

.btn-ghost {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
  backdrop-filter: blur(10px);
  padding-left: 1.5rem;
}
.btn-ghost .ic { background: rgba(255, 255, 255, 0.08); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--ink-dim); transform: translateY(-2px); }
.btn-ghost:hover .ic { transform: translate(3px, -3px); }

.btn-wa {
  background: var(--whatsapp);
  color: #06301a; font-weight: 600;
  box-shadow: 0 14px 38px -16px rgba(37, 211, 102, 0.6);
}
.btn-wa .ic { background: rgba(0, 0, 0, 0.16); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -14px rgba(37, 211, 102, 0.65); }
.btn-wa:hover .ic { transform: scale(1.08); }

.btn-sm { font-size: 0.86rem; padding: 0.5rem 0.5rem 0.5rem 1.1rem; }
.btn-sm .ic { width: 1.7rem; height: 1.7rem; }

.btn-block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.92rem; color: var(--accent);
  transition: gap 0.4s var(--ease);
}
.link-arrow svg { width: 0.95rem; height: 0.95rem; transition: transform 0.4s var(--ease); }
.link-arrow:hover { gap: 0.85rem; }

/* ---------- 7. Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: center;
  padding: 1.05rem 1rem;
  transition: padding 0.5s var(--ease);
}
.nav-inner {
  display: flex; align-items: center; gap: 1.4rem;
  width: min(var(--wrap), 100%);
  padding: 0.55rem 0.6rem 0.55rem 1.35rem;
  border-radius: var(--r-pill);
  background: rgba(12, 12, 14, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.5);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.nav.scrolled { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.nav.scrolled .nav-inner {
  background: rgba(10, 10, 12, 0.86);
  border-color: var(--line-strong);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img {
  height: 30px; width: auto;
  mix-blend-mode: screen;
}
.nav-links {
  display: flex; align-items: center; gap: 0.35rem;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  font-size: 0.88rem; font-weight: 400; color: var(--ink-soft);
  padding: 0.55rem 0.8rem; border-radius: var(--r-pill);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-cta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.nav-wa {
  width: 2.55rem; height: 2.55rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--whatsapp); color: #06301a;
  transition: transform 0.4s var(--ease);
}
.nav-wa svg { width: 1.25rem; height: 1.25rem; }
.nav-wa:hover { transform: scale(1.08) rotate(-6deg); }

.burger {
  display: none;
  width: 2.7rem; height: 2.7rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.6px; background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -6px); }
.burger span:nth-child(3) { transform: translate(-50%, 6px); }
body.menu-open .burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile-Menü-Overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(26px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 2rem 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
.menu-overlay a {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  padding: 0.45rem 0; color: var(--ink-soft);
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s;
}
.menu-overlay a:hover { color: var(--accent); }
body.menu-open .menu-overlay a { opacity: 1; transform: translateY(0); }
body.menu-open .menu-overlay a:nth-child(1) { transition-delay: 0.1s; }
body.menu-open .menu-overlay a:nth-child(2) { transition-delay: 0.16s; }
body.menu-open .menu-overlay a:nth-child(3) { transition-delay: 0.22s; }
body.menu-open .menu-overlay a:nth-child(4) { transition-delay: 0.28s; }
body.menu-open .menu-overlay a:nth-child(5) { transition-delay: 0.34s; }
body.menu-open .menu-overlay a:nth-child(6) { transition-delay: 0.4s; }
.menu-overlay .menu-foot {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.95rem; color: var(--ink-dim);
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; min-height: 88svh;
  display: flex; align-items: flex-end;
  padding-top: 8rem; padding-bottom: clamp(3rem, 7vh, 6rem);
  overflow: hidden;
}
/* ---------- Hero: helle Bühne, vollflächiges Bild ----------
   Das Porsche-Foto ist eine Hellaufnahme – weißes Fahrzeug vor
   heller Wand. Zwei Versuche haben gezeigt, was daran schwierig ist:
   ein Schleier, der weiße Schrift darauf lesbar macht, löscht das
   Fahrzeug aus; und das Bild auf die rechte Hälfte zu begrenzen
   hinterlässt eine sichtbare senkrechte Kante.

   Also andersherum: das Bild läuft über die volle Breite, wird
   leicht aufgehellt statt abgedunkelt, und die Schrift ist dunkel.
   Das ist die Bildsprache der Herstellerfotos – helles Studio –
   und der Übergang ins schwarze Seitenlayout wird als bewusster
   Wechsel inszeniert statt als Fehler kaschiert. */
.hero-bg {
  position: absolute; inset: 0;
  z-index: var(--z-base);
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 52%;
  will-change: transform;
}
.hero-wrap { position: relative; z-index: var(--z-raised); width: 100%; }
.hero-content { max-width: min(100%, 36rem); }
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  margin: 1.5rem 0 1.6rem;
  max-width: 13ch;
}
.hero .lead { font-size: var(--step-1); max-width: 40ch; }

/* --- Dunkles Motiv, helle Schrift (beide Seiten) ---
   Ein diagonaler Schleier, der links kräftig genug für weiße Schrift
   ist und nach rechts hin schnell aufmacht, damit das Fahrzeug seine
   Farbe behält. Bewusst nirgends deckend: die Neonbeleuchtung an der
   Wand soll auch links noch durchscheinen.

   Gemessen bei 1440 px: im Textbereich (linke 45 %) liegt der
   Kontrast zwischen 9:1 und 18:1, weit über den geforderten 4,5:1. */
.hero-bg img { filter: brightness(0.86) contrast(1.06) saturate(1.05); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(98deg,
      rgba(8,8,10,0.88)  0%,
      rgba(8,8,10,0.80) 22%,
      rgba(8,8,10,0.58) 40%,
      rgba(8,8,10,0.30) 58%,
      rgba(8,8,10,0.12) 78%,
      rgba(8,8,10,0.24) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0.42) 10%, transparent 30%),
    linear-gradient(180deg, rgba(10,10,11,0.55) 0%, transparent 18%);
}

/* Schmale Viewports: der Text steht über dem Fahrzeug statt daneben,
   der Schleier deckt deshalb senkrecht ab statt diagonal. */
@media (max-width: 900px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(8,8,10,0.74)  0%,
        rgba(8,8,10,0.66) 26%,
        rgba(8,8,10,0.60) 46%,
        rgba(8,8,10,0.76) 74%,
        rgba(8,8,10,0.93) 100%),
      linear-gradient(0deg, var(--bg) 0%, transparent 14%);
  }
  .hero-content { max-width: 34rem; }
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }

.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.6rem; margin-top: 2.6rem;
  padding-top: 1.8rem; border-top: 1px solid var(--line);
  max-width: 720px;
}
.trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--ink-soft); }
.trust-item strong { color: var(--ink); font-weight: 600; }
.stars { display: inline-flex; gap: 1px; color: var(--accent); }
.stars svg { width: 0.95rem; height: 0.95rem; }

.scroll-cue {
  position: absolute; bottom: 1.7rem; left: 50%;
  transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.scroll-cue .rail {
  width: 1.5px; height: 46px; background: var(--line-strong);
  position: relative; overflow: hidden; border-radius: 2px;
}
.scroll-cue .rail::after {
  content: ""; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%; background: var(--accent);
  animation: railDrop 2.1s var(--ease) infinite;
}
@keyframes railDrop { 0% { top: -55%; } 60%, 100% { top: 105%; } }

/* ---------- 9. Marquee (Laufband) ---------- */
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex; gap: 3.4rem; width: max-content;
  animation: scrollX 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

.partner-strip { padding-block: clamp(2.4rem, 5vw, 3.6rem); border-block: 1px solid var(--line); }
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  height: 46px; flex-shrink: 0;
}
.partner-logo img {
  height: 100%; width: auto; object-fit: contain;
  opacity: 0.5; filter: grayscale(1) brightness(1.7);
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
.partner-logo:hover img { opacity: 1; filter: grayscale(0) brightness(1); }

/* ---------- 10. Vorher / Nachher ---------- */
.ba {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--r-lg); overflow: hidden;
  cursor: ew-resize; user-select: none;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.9);
}
.ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.ba-after { z-index: 1; }
.ba-before-wrap {
  position: absolute; inset: 0; z-index: 2; width: 50%;
  overflow: hidden;
}
.ba-before-wrap img {
  width: 100vw; max-width: none;
  filter: grayscale(0.55) brightness(0.6) contrast(0.92);
}
.ba-before-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(120,120,130,0.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 7px, transparent 7px 15px);
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
  width: 2px; background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 22px var(--accent-glow);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3.3rem; height: 3.3rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.ba-knob svg { width: 1.35rem; height: 1.35rem; }
.ba-tag {
  position: absolute; top: 1rem; z-index: 5;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem; border-radius: var(--r-pill);
  background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
}
.ba-tag.before { left: 1rem; color: var(--ink-dim); }
.ba-tag.after { right: 1rem; color: var(--accent); z-index: 3; }

.ba-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* ---------- 11. Leistungswelten ----------
   Umgebaut: vorher lag der komplette Text in einer umrandeten Box
   über dem Foto – Schrift auf Arbeitskleidung und Autositzen, mit
   einem harten schwarzen Verlauf dagegen. Das war schlecht lesbar
   und sah nach Baukasten aus.

   Jetzt trägt das Foto sich selbst und die Information steht
   darunter auf dem Seitengrund: Klasse, Name, ein Satz, dann ein
   Datenblatt mit Haarlinien. Das ist die Sprache eines Fahrzeug-
   prospekts – und sie kommt ohne Kasten, Rahmen und Pillen aus. */
.worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3rem);
}
.tilt { perspective: 1400px; }

.world-link {
  display: flex; flex-direction: column;
  height: 100%;
}

/* Ohne Ausrichtung starten die Datenblätter je nach Textlänge auf
   unterschiedlicher Höhe – nebeneinander sieht das nach Zufall aus.
   Subgrid koppelt die Zeilen aller drei Spalten aneinander: Titel
   an Titel, erste Datenzeile an erste Datenzeile. */
@supports (grid-template-rows: subgrid) {
  .worlds { grid-template-rows: auto; align-items: stretch; }
  .tilt { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .world-link {
    display: grid; grid-row: span 5; grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* --- Das Bild --- */
.world-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
  /* Kein transform-style: preserve-3d. Mit overflow:hidden erzwingt
     die Spezifikation ohnehin `flat`, die Angabe wäre also wirkungslos
     gewesen – und gebraucht wird sie nicht: im Rahmen liegt nichts,
     was räumlich versetzt sein müsste. */
  transition: transform 0.65s var(--ease), box-shadow 0.65s var(--ease);
}
.world-figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 44%;
  filter: brightness(0.88) saturate(1.04);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.world-link:hover .world-figure { box-shadow: var(--shadow-lg); }
.world-link:hover .world-figure img { transform: scale(1.055); filter: brightness(1) saturate(1.1); }

/* Streiflicht über der Bildkante – lässt die Fläche gewölbt wirken,
   statt wie ein flaches Rechteck. */
.world-figure::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(200deg, rgba(255,255,255,0.10) 0%, transparent 34%),
    linear-gradient(to top, rgba(8,8,10,0.42) 0%, transparent 38%);
  pointer-events: none;
}

.world-kicker {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink);
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(10, 10, 12, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
}

/* --- Der Text darunter --- */
.world-title {
  padding-top: 1.35rem;
  font-size: var(--step-2); font-weight: 700;
  letter-spacing: var(--track-sub);
  transition: color 0.35s var(--ease);
}
.world-link:hover .world-title { color: var(--accent-bright); }
.world-desc {
  margin-top: 0.55rem;
  font-size: var(--step-0); line-height: 1.6;
  color: var(--ink-soft); max-width: 42ch;
}

/* Datenblatt: Bezeichnung links, Wert rechts, Haarlinie dazwischen.
   Ersetzt die drei generischen Tag-Pillen durch echte Angaben. */
.world-spec {
  margin-top: 1.3rem;
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.world-spec > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
}
.world-spec dt {
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  /* --ink-faint käme nur auf 3,0:1 gegen den Seitengrund und
     verfehlt damit die 4,5:1 für Fließtextgrößen. */
  color: var(--ink-dim);
  white-space: nowrap;
}
.world-spec dd {
  font-size: var(--step-0); font-weight: 500;
  color: var(--ink); text-align: right;
}

.world-go {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 1.2rem;
  font-size: var(--step-0); font-weight: 600; color: var(--accent-bright);
  transition: gap 0.4s var(--ease);
}
.world-go svg { width: 0.9rem; height: 0.9rem; }
.world-link:hover .world-go { gap: 0.85rem; }

/* ---------- 12. Bento / Warum ---------- */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense; gap: var(--gap);
}
.cell {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.cell:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cell-c4 { grid-column: span 4; }
.cell-c5 { grid-column: span 5; }
.cell-c6 { grid-column: span 6; }
.cell-c7 { grid-column: span 7; }
.cell-c8 { grid-column: span 8; }
.cell-r2 { grid-row: span 2; }

.cell-icon {
  width: 3.1rem; height: 3.1rem; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: rgba(209, 47, 47, 0.1);
  border: 1px solid rgba(209, 47, 47, 0.22);
  color: var(--accent);
}
.cell-icon svg { width: 1.5rem; height: 1.5rem; }
.cell h3 { font-size: 1.32rem; margin-bottom: 0.6rem; }
.cell p { font-size: 0.92rem; color: var(--ink-soft); }

.cell-feature { padding: 0; min-height: 320px; }
.cell-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.cell-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,10,0.95), transparent 70%); }
.cell-feature .cell-feature-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.5rem, 2.6vw, 2.3rem); }
.cell-feature .stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.8rem); color: var(--ink); line-height: 1;
}
.cell-feature .stat-num .accent { display: inline; }

.cell-dark { background: linear-gradient(150deg, #1b1b20, #0e0e10); }

/* Quote-Zelle */
.cell-quote { display: flex; flex-direction: column; justify-content: space-between; }
.cell-quote .q {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.3;
  letter-spacing: -0.02em;
}
.cell-quote .q::before { content: "\201E"; color: var(--accent); }

/* ---------- 13. Stats-Reihe ---------- */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.stat {
  text-align: center; padding: clamp(1.4rem, 2.6vw, 2.2rem) 1rem;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.stat .n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 4vw, 3.3rem); line-height: 1;
  color: var(--ink);
}
.stat .n .suf { color: var(--accent); }
.stat .l { font-size: 0.84rem; color: var(--ink-dim); margin-top: 0.55rem; }

/* ---------- 14. Ablauf / Prozess ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.step {
  position: relative; padding: 2rem 1.6rem;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.step:hover { transform: translateY(-7px); border-color: rgba(209,47,47,0.4); background: var(--surface-2); }
.step .step-n {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2.7rem; color: rgba(255,255,255,0.07);
  line-height: 1; margin-bottom: 0.8rem;
  transition: color 0.45s var(--ease);
}
.step:hover .step-n { color: var(--accent); }
.step h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.88rem; color: var(--ink-soft); }
.step-icon { color: var(--accent); margin-bottom: 1.1rem; }
.step-icon svg { width: 1.5rem; height: 1.5rem; }

/* ---------- 15. Referenzen-Galerie ---------- */
.ref-rail {
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem; padding-inline: max((100% - var(--wrap)) / 2, 2.5rem);
  scrollbar-width: none;
}
.ref-rail::-webkit-scrollbar { display: none; }
.ref-card {
  position: relative; flex: 0 0 clamp(260px, 30vw, 380px);
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  scroll-snap-align: center; border: 1px solid var(--line);
}
.ref-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.ref-card:hover img { transform: scale(1.06); filter: brightness(1); }
.ref-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,8,10,0.9), transparent 55%);
}
.ref-meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.4rem; }
.ref-meta .cls { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ref-meta h3 { font-size: 1.3rem; margin-top: 0.25rem; }
.ref-meta p { font-size: 0.82rem; color: var(--ink-dim); }

.rail-controls { display: flex; gap: 0.6rem; }
.rail-btn {
  width: 3rem; height: 3rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  display: grid; place-items: center; color: var(--ink);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), color 0.35s;
}
.rail-btn:hover { background: var(--accent); color: #fff; transform: scale(1.06); }
.rail-btn svg { width: 1.1rem; height: 1.1rem; }

/* ---------- 16. Testimonials ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.review {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.review:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.review .stars svg { width: 1rem; height: 1rem; }
.review p { font-size: 0.95rem; color: var(--ink-soft); flex-grow: 1; }
.review-by { display: flex; align-items: center; gap: 0.8rem; }
.avatar {
  width: 2.8rem; height: 2.8rem; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  background: linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
}
.review-by .who { font-weight: 500; font-size: 0.92rem; color: var(--ink); }
.review-by .where { font-size: 0.78rem; color: var(--ink-dim); }

.google-badge {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 1.3rem 0.7rem 0.8rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
}
.google-badge .g {
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.google-badge .g span { background: linear-gradient(135deg,#4285F4,#EA4335 55%,#FBBC05); -webkit-background-clip: text; background-clip: text; color: transparent; }
.google-badge .rate { font-weight: 600; color: var(--ink); }

/* ---------- 17. Shop-Teaser ---------- */
.shop-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.product {
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-2); padding: 1.3rem; text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.product:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.product-img {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: #fff; margin-bottom: 0.9rem;
}
.product-img img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.product .pname { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; min-height: 2.4em; }
.product .pprice { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-top: 0.5rem; }

/* ---------- 18. CTA-Block & Anfrage ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(209,47,47,0.25);
  background: linear-gradient(150deg, #1c0a0a, #0d0d0f 70%);
  padding: clamp(2.5rem, 6vw, 5rem);
}
.cta-band .glow { top: -40%; right: -10%; width: 460px; height: 460px; }

.anfrage-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); }

.form-card {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); padding: clamp(1.6rem, 3vw, 2.6rem);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--ink-soft); margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.92rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-2);
}
.field textarea { resize: vertical; min-height: 92px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

/* Auswahl-Chips (Fahrzeugtyp) */
.chip-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.9rem 0.6rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--bg);
  font-size: 0.82rem; color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.chip svg { width: 1.5rem; height: 1.5rem; color: var(--ink-dim); transition: color 0.3s; }
.chip:hover { border-color: var(--ink-dim); }
.chip.active { border-color: var(--accent); background: rgba(209,47,47,0.1); color: var(--ink); }
.chip.active svg { color: var(--accent); }

.routing-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.8rem; color: var(--ink-dim);
  padding: 0.9rem 1rem; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.routing-note svg { width: 1.05rem; height: 1.05rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* Kontakt-Infozeilen */
.contact-list { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-line { display: flex; align-items: center; gap: 1rem; }
.contact-line .ci {
  width: 2.9rem; height: 2.9rem; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent);
}
.contact-line .ci svg { width: 1.2rem; height: 1.2rem; }
.contact-line .cl { font-size: 0.76rem; color: var(--ink-dim); }
.contact-line .cv { font-weight: 500; color: var(--ink); }

.map-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); margin-top: 1.4rem;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 60% 40%, rgba(209,47,47,0.14), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 46px),
    var(--bg-2);
  display: grid; place-items: center;
}
.map-pin {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--ink-soft); font-size: 0.82rem;
}
.map-pin .dot {
  width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 6px rgba(209,47,47,0.2), 0 0 22px var(--accent);
  animation: pinPulse 2.4s var(--ease) infinite;
}
@keyframes pinPulse { 50% { box-shadow: 0 0 0 12px rgba(209,47,47,0.05), 0 0 22px var(--accent); } }

/* ---------- 19. Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem,6vw,5rem) 2.5rem; background: var(--bg-2); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.4rem; }
.footer-logo img { height: 36px; mix-blend-mode: screen; margin-bottom: 1.1rem; }
.footer p.about { font-size: 0.88rem; color: var(--ink-dim); max-width: 32ch; }
.footer h4 {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 1.1rem;
}
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; color: var(--ink-soft); padding: 0.32rem 0; transition: color 0.3s; }
.footer-col a:hover { color: var(--accent); }
.socials { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.socials a {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--ink-soft); transition: all 0.3s var(--ease);
}
.socials a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.socials svg { width: 1.05rem; height: 1.05rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem; color: var(--ink-faint);
}
.footer-bottom a:hover { color: var(--accent); }

/* ---------- 20. Floating Widgets ---------- */
.dock {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 1100;
  display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-end;
}
.dock-btn {
  width: 3.6rem; height: 3.6rem; border-radius: var(--r-pill);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.7);
  transition: transform 0.4s var(--ease);
}
.dock-btn:hover { transform: scale(1.08); }
.dock-btn svg { width: 1.7rem; height: 1.7rem; }
.dock-wa { background: var(--whatsapp); color: #fff; }
.dock-ai {
  background: linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
}
.dock-btn .ping {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid currentColor; opacity: 0;
  animation: ping 3s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 70%,100% { transform: scale(1.5); opacity: 0; } }
.dock-tip {
  position: absolute; right: calc(100% + 0.8rem); top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap; font-size: 0.8rem; font-weight: 500;
  padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--ink);
  opacity: 0; pointer-events: none; transition: all 0.35s var(--ease);
}
.dock-btn:hover .dock-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* KI-Assistent-Panel */
.assistant {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 1200;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 2.6rem));
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: rgba(15, 15, 18, 0.96);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(20px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease), visibility 0.4s;
}
.assistant.open { opacity: 1; visibility: visible; transform: none; }
.as-head {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(140deg, #1d0a0a, #121214);
  border-bottom: 1px solid var(--line);
}
.as-ava {
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
}
.as-ava svg { width: 1.35rem; height: 1.35rem; }
.as-head .as-name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.as-head .as-status { font-size: 0.74rem; color: var(--whatsapp); display: flex; align-items: center; gap: 0.35rem; }
.as-head .as-status::before { content:""; width: 6px; height: 6px; border-radius: 999px; background: var(--whatsapp); }
.as-close { margin-left: auto; width: 2rem; height: 2rem; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-dim); }
.as-close:hover { background: var(--surface-2); color: var(--ink); }
.as-body {
  flex-grow: 1; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.msg { max-width: 84%; font-size: 0.87rem; line-height: 1.55; padding: 0.7rem 0.95rem; border-radius: 14px; }
.msg-bot { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-soft); }
.msg-user { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 400; }
.msg-typing { display: flex; gap: 4px; padding: 0.85rem 0.95rem; }
.msg-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-dim); animation: blink 1.3s infinite; }
.msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,60%,100% { opacity: 0.25; } 30% { opacity: 1; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.4rem 1.1rem; }
.as-chip {
  font-size: 0.78rem; color: var(--ink-soft);
  padding: 0.45rem 0.8rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: all 0.3s var(--ease);
}
.as-chip:hover { border-color: var(--accent); color: var(--ink); }
.as-foot { display: flex; gap: 0.5rem; padding: 0.8rem 1.1rem 1rem; border-top: 1px solid var(--line); }
.as-foot input {
  flex-grow: 1; font-family: var(--font-body); font-size: 0.86rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 0.6rem 1rem;
}
.as-foot input:focus { outline: none; border-color: var(--accent); }
.as-send {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); flex-shrink: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  transition: transform 0.3s var(--ease);
}
.as-send:hover { transform: scale(1.08); }
.as-send svg { width: 1.05rem; height: 1.05rem; }
.as-disclaimer { font-size: 0.68rem; color: var(--ink-faint); text-align: center; padding: 0 1.1rem 0.7rem; }

/* ---------- 21. Mobile Sticky-Bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: rgba(10, 10, 12, 0.96);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-strong);
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.65rem 0.4rem 0.8rem;
  font-size: 0.7rem; color: var(--ink-soft);
}
.mobile-bar a svg { width: 1.25rem; height: 1.25rem; }
.mobile-bar a.mb-wa { color: var(--whatsapp); }
.mobile-bar a.mb-cta { color: var(--accent); }
.mobile-bar a + a { border-left: 1px solid var(--line); }

/* ---------- 22. Reveal-Animationen ----------
   Wichtig: der unsichtbare Ausgangszustand hängt an html.js, das
   main.js als Erstes setzt. Ohne JavaScript – und in Rendern, die
   Transitions nie auslösen (Screenshot-Tools, Reader, Suchmaschinen-
   Vorschau) – bleibt der Inhalt sichtbar, statt leer auszuliefern. */
html.js .reveal {
  opacity: 0; transform: translateY(34px); filter: blur(6px);
  transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft), filter 0.85s var(--ease-soft);
  transition-delay: var(--d, 0s);
}
html.js .reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 23. Breadcrumb ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-size: 0.8rem; color: var(--ink-dim);
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--ink-faint); }
.breadcrumb .current { color: var(--ink-soft); }

/* ---------- 24. Leistungsseite: Vorteile ---------- */
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.benefit {
  display: flex; gap: 1.1rem;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.benefit:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.benefit .bi {
  width: 2.7rem; height: 2.7rem; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(209,47,47,0.1); border: 1px solid rgba(209,47,47,0.22);
  color: var(--accent);
}
.benefit .bi svg { width: 1.3rem; height: 1.3rem; }
.benefit h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.benefit p { font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- 25. Preise / Pakete ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.price-card:hover { transform: translateY(-8px); border-color: var(--line-strong); }
.price-card.featured {
  border-color: rgba(209,47,47,0.45);
  background: linear-gradient(165deg, rgba(209,47,47,0.09), var(--surface) 55%);
}
.price-badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
}
.price-card .tier { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.price-card .tier-desc { font-size: 0.82rem; color: var(--ink-dim); margin: 0.3rem 0 1.3rem; }
.price-card .amount { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 1.4rem; }
.price-card .amount .ab { font-size: 0.78rem; color: var(--ink-dim); }
.price-card .amount .val { font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; color: var(--ink); line-height: 1; }
.price-card .amount .cur { font-size: 1.1rem; color: var(--ink-soft); }
.price-feats { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.7rem; flex-grow: 1; }
.price-feats li { display: flex; gap: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); }
.price-feats li svg { width: 1.05rem; height: 1.05rem; color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.platzhalter-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.8rem; color: var(--ink-dim);
  padding: 0.95rem 1.15rem; border-radius: var(--r-sm);
  background: rgba(209,47,47,0.06); border: 1px dashed rgba(209,47,47,0.3);
}
.platzhalter-note svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- 26. FAQ-Akkordeon ---------- */
.faq { display: flex; flex-direction: column; gap: 0.7rem; max-width: 820px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
  transition: border-color 0.35s var(--ease);
}
.faq-item.open { border-color: rgba(209,47,47,0.4); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
}
.faq-q .fq-ic {
  margin-left: auto; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--accent); transition: transform 0.4s var(--ease), background 0.3s;
}
.faq-item.open .fq-ic { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-q .fq-ic svg { width: 1rem; height: 1rem; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-a p { padding: 0 1.4rem 1.3rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- 27. Info-Hinweis (Entwurf) ---------- */
.draft-flag {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1095;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: var(--ink-dim);
  padding: 0.5rem 0.85rem; border-radius: var(--r-pill);
  background: rgba(12,12,14,0.85); border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.draft-flag::before { content:""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }

/* ---------- 28. Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
/* Navigation: eigener Umbruchpunkt, unabhängig vom Rest des Layouts.
   Logo + Bereichswechsel + fünf Links + WhatsApp + CTA passen bis
   etwa 1100 px nebeneinander. Darunter wandern die Abschnittslinks
   ins Menü, der Bereichswechsel bleibt – er ist die wichtigere
   Navigation. Unter 760 px geht auch der ins Menü (Regel weiter unten). */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-cta .btn span.lbl { display: none; }
  .nav-cta .btn { padding: 0.55rem; }
  .nav-cta .btn .ic { margin: 0; }
  /* Den Rechtsschub übernehmen: bisher kam er von .nav-links,
     das hier ausgeblendet ist – sonst klebt die CTA in der Mitte. */
  .nav-cta { margin-left: auto; }
}
@media (max-width: 880px) {
  .worlds { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .ba-layout { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .cell-c4, .cell-c5, .cell-c6, .cell-c7, .cell-c8 { grid-column: 1 / -1; }
  .cell-r2 { grid-row: auto; }
  .shop-teaser { grid-template-columns: 1fr; }
  .anfrage-grid { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .price-card.featured { order: -1; }
  .mobile-bar { display: grid; }
  .dock { bottom: 5.2rem; }
  .assistant { bottom: 5.2rem; height: min(540px, calc(100vh - 7rem)); }
  body { padding-bottom: 4rem; }
  .draft-flag { bottom: 5.2rem; }
}
/* Unter 760 px passen Bereichswechsel, WhatsApp, CTA und Burger
   nicht mehr nebeneinander – der Termin-Button wurde rechts
   abgeschnitten. Der Bereichswechsel wandert deshalb ins Menü,
   wo er als erster Eintrag steht. */
@media (max-width: 760px) {
  /* Zwei Klassen, damit die Regel gegen `.seg { display: inline-flex }`
     aus Abschnitt 29 gewinnt – die steht weiter unten im Stylesheet. */
  .nav .nav-seg { display: none; }
  .nav-inner { gap: 0.8rem; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 560px) {
  :root { --section: clamp(2.6rem, 9vw, 4rem); }
  .wrap { width: min(var(--wrap), 100% - 3.2rem); }
  .steps { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .h-display { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}

/* ============================================================
   HS-Erweiterungen (neu ggü. dem übernommenen eigenen System)
   ============================================================ */

/* ---------- 29. Segment-Toggle (Bereichswechsel) ---------- */
.seg {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.28rem; border-radius: var(--r-pill);
  background: var(--bg-3); border: 1px solid var(--line);
}
.seg a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 500; color: var(--ink-dim);
  padding: 0.5rem 1.05rem; border-radius: var(--r-pill);
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.seg a .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.6; }
.seg a:hover { color: var(--ink-soft); }
.seg a.active { color: var(--on-accent); }
.seg a.active .dot { background: var(--on-accent); opacity: 1; }
/* gleitender Pillen-Hintergrund */
.seg { position: relative; }
.seg .seg-pill {
  position: absolute; z-index: 0; top: 0.28rem; bottom: 0.28rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 10px 26px -12px var(--accent-glow);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}

/* ---------- 30. Buchungs-Embed ---------- */
.booking {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden;
  position: relative; min-height: 540px;
}
.booking iframe { width: 100%; min-height: 540px; border: 0; display: block; }
/* Platzhalter solange kein Embed-Link gesetzt ist */
.booking-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 2rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(209,47,47,0.10), transparent 60%),
    var(--bg-2);
}
.booking-ph .bp-inner { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.booking-ph .bp-ic {
  width: 3.6rem; height: 3.6rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(209,47,47,0.1); border: 1px solid rgba(209,47,47,0.24); color: var(--accent);
}
.booking-ph .bp-ic svg { width: 1.7rem; height: 1.7rem; }
.booking-ph h3 { font-size: 1.4rem; }
.booking-ph p { font-size: 0.92rem; color: var(--ink-soft); max-width: 42ch; }
.booking-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 0.4rem; }

/* ---------- 31. Service-Liste (Sonderleistungen) ---------- */
.act-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  margin-bottom: calc(var(--gap) * 1.6);
}
.act-strip figure {
  position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--surface);
}
.act-strip img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82) saturate(1.02);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.act-strip figure:hover img { transform: scale(1.06); filter: brightness(1) saturate(1.1); }
.act-strip figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 0.95rem 0.75rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
}
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.svc {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.svc:hover { border-color: rgba(209,47,47,0.4); background: var(--surface-2); transform: translateY(-3px); }
.svc .svc-name { font-weight: 400; color: var(--ink-soft); }
.svc .svc-name small { display: block; font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.2rem; }
.svc .svc-price {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); white-space: nowrap;
}
.svc .svc-price .ab { font-size: 0.72rem; color: var(--ink-dim); font-family: var(--font-body); font-weight: 400; }

/* ---------- 32. Hobbywerkstatt-Platzhalter ---------- */
.ph-slot {
  position: relative; border-radius: var(--r-lg);
  border: 1px dashed rgba(209,47,47,0.32);
  background: rgba(209,47,47,0.05);
  display: grid; place-items: center; text-align: center;
  padding: clamp(2.2rem, 5vw, 4rem); min-height: 220px;
}
.ph-slot .ph-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.7rem;
}
.ph-slot p { font-size: 0.92rem; color: var(--ink-soft); max-width: 44ch; }
.ph-slot .ph-hint { font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.5rem; }

/* ---------- 33. Mini-Galerie (Werkstatt) ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.gallery a {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 3 / 4; border: 1px solid var(--line); display: block;
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82) saturate(1.02);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.gallery a:hover img { transform: scale(1.06); filter: brightness(1) saturate(1.1); }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }

@media (max-width: 880px) {
  .svc-grid { grid-template-columns: 1fr; }
  .act-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery a:first-child { grid-column: span 2; aspect-ratio: 16 / 10; grid-row: auto; }
}

/* ---------- 34. Nav-Toggle & Responsive-Feinschliff ---------- */
.nav-seg { margin-right: 0.3rem; flex-shrink: 0; }
.nav-inner { gap: 1rem; }
.nav-links { gap: 0.2rem; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .burger { display: block; }
}
@media (max-width: 880px) {
  .nav .nav-wa { display: none; }
  .nav-cta .btn span.lbl { display: none; }
  .nav-cta .btn { padding: 0.55rem; }
  .nav-cta .btn .ic { margin: 0; }
  .firma-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .nav-seg a { font-size: 0.74rem; padding: 0.45rem 0.7rem; gap: 0.35rem; }
  .nav-seg a .dot { width: 5px; height: 5px; }
  .nav-logo img { height: 26px; }
}
@media (max-width: 400px) {
  .nav-seg a { font-size: 0.68rem; padding: 0.4rem 0.55rem; }
}

/* ---------- 35. Rechtstexte (Impressum / Datenschutz) ---------- */
.legal-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.5rem, 5vw, 3rem);
  background: rgba(10,10,12,0.86); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.legal-nav img { height: 28px; mix-blend-mode: screen; }
.legal { padding-block: clamp(3rem, 7vw, 6rem); max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 2rem; }
.legal h2 {
  font-size: 1.3rem; margin: 2.2rem 0 0.8rem;
  font-family: var(--font-display); color: var(--ink);
}
.legal p, .legal address {
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.75;
  margin-bottom: 0.9rem; font-style: normal; max-width: 70ch;
}
.legal a { color: var(--accent); }
.legal a:hover { color: var(--accent-bright); }
.legal strong { color: var(--ink); font-weight: 500; }

/* ---------- 36. Fix: Kontaktzeilen-Stack + echte Karte ---------- */
.contact-line .ci + span { display: flex; flex-direction: column; gap: 1px; }
.contact-line .cl { line-height: 1.3; }
.contact-line .cv { line-height: 1.35; }

.map-card {
  display: block; place-items: initial;
  aspect-ratio: 4 / 3; padding: 0; margin-top: 0;
  background: var(--bg-2);
}
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 37. Fix: Hero-Inhalt mit leichtem Seitenabstand ---------- */
/* Breiter, linksbündiger Hero-Look bleibt - nur ein kleiner Rand. */
.hero-wrap {
  width: 100%;
  padding-inline: clamp(1.25rem, 3vw, 2.25rem);
}
@media (max-width: 560px) {
  .hero-wrap { padding-inline: 1.1rem; }
}

/* ============================================================
   Eigene Fotos (Shooting 07/2026)
   ============================================================ */

/* ---------- 38. Vorher/Nachher mit echtem Bildpaar ----------
   Vorher: der Clip läuft jetzt über clip-path statt über die Breite
   des Wrappers. Dadurch bleiben beide Bilder deckungsgleich, egal wie
   breit der Container ist (vorher war das Bild an 100vw gekoppelt).
   Die künstliche Graustufen-/Kratzer-Optik entfällt, weil ein echtes
   Vorher-Foto vorliegt.                                                  */
.ba-before-wrap {
  width: 100%;
  clip-path: inset(0 calc(100% - var(--ba-split, 50%)) 0 0);
}
.ba-before-wrap img { width: 100%; filter: none; }
.ba-before-wrap::after { content: none; }
.ba:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Fehlerbild „beim Ziehen nach links wird alles rot":
   Wer über den linken Bildrand hinauszog, startete eine normale
   Textmarkierung. Die Markierungsfarbe war deckendes Markenrot und
   legte sich flächig über das Foto. Drei Riegel dagegen: gar keine
   Markierung innerhalb des Reglers, kein Bild-Ziehen, und falls der
   Browser doch etwas markiert, ist es hier unsichtbar.
   (Der Regler selbst arbeitet in main.js jetzt mit Pointer-Capture,
   damit der Zeiger den Rand überhaupt nicht mehr verlassen kann.) */
.ba, .ba * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ba img {
  -webkit-user-drag: none;
  user-drag: none;
}
.ba ::selection, .ba::selection { background: transparent; }
/* Während des Ziehens die Seite nicht mitscrollen lassen (Touch) */
.ba { touch-action: pan-y; }
.ba.is-dragging { cursor: grabbing; }

/* Hochformat-Variante für Innenraum-Aufnahmen */
.ba--portrait { aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .ba--portrait { aspect-ratio: 3 / 4; }
}

/* ---------- 39. Ergebnis-Rail (Fahrzeuge im Querformat) ----------
   Wie .ref-card, aber breit: Seitenansichten ganzer Fahrzeuge würden
   im 4/5-Hochformat der Standardkarte beschnitten werden.              */
.ref-card--wide {
  flex: 0 0 clamp(280px, 62vw, 620px);
  aspect-ratio: 16 / 10;
}
.ref-card--wide img { filter: brightness(0.9); }
/* Vorher lag hier ein Verlauf, der auf 10 % Höhe schon bei 97 %
   Deckung war. So ein steiler Anstieg endet als sichtbarer
   schwarzer Balken quer über der unteren Bildhälfte – genau der
   Schatten, der gestört hat. Der Scrim aus den Tokens steigt über
   sechs Stopps und bleibt dabei unsichtbar. Zusätzlich fängt ein
   weicher Halbkreis nur die Ecke ab, in der die Bildunterschrift
   steht, statt die ganze Breite abzudunkeln. */
.ref-card--wide::after {
  background:
    radial-gradient(112% 74% at 10% 100%, rgba(8,8,10,0.90) 0%, rgba(8,8,10,0.52) 34%, rgba(8,8,10,0.16) 56%, transparent 74%),
    var(--scrim-soft);
}
/* Das matte Markenrot ist als Kleinschrift über einem Foto zu dunkel. */
.ref-card--wide .ref-meta .cls { color: var(--accent-bright); }
/* Über hellem Lack und hellem Hallenboden reicht --ink-dim für die
   Bildunterschrift nicht aus (unter 4,5:1). */
.ref-card--wide .ref-meta p { color: var(--ink-soft); }

.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.9rem, 3.6vw, 2.8rem);
}
/* Umgebrochen (schmale Viewports) sollen die Pfeile rechts stehen. */
.rail-head .rail-controls { margin-left: auto; }

/* ---------- 41. Standardkarten der Referenz-Rail ----------
   Auch hier lief der Verlauf zu steil an. Gleicher Scrim wie oben. */
.ref-card::after { background: var(--scrim-soft); }

/* ---------- 42a. Sektionsmarke im Hero ----------
   Der Hero ist seit 07/2026 eine helle Bühne mit dunkler Schrift.
   Die Farben dafür stehen bei der Hero-Definition weiter oben. */

/* ---------- 42b. Hero auf schmalen Viewports ----------
   Hochkant wird das Querformat stark seitlich beschnitten. Mit 85%
   landete jeweils der Bildrand im Ausschnitt (Heck bzw. Hallenecke)
   statt des Motivs, deshalb hier näher zur Bildmitte. Zusätzlich ein
   gleichmäßiger Verlauf, damit der Text über jedem Bildbereich lesbar
   bleibt – der diagonale Desktop-Verlauf greift hochkant nicht.        */
@media (max-width: 700px) {
  /* --hero-pos-mobile wird am .hero-bg pro Seite gesetzt (Bildregie).
     Den Schleier regelt die 900-px-Regel weiter oben; hier wird nur
     noch der Bildausschnitt gesetzt. */
  .hero-bg img { object-position: var(--hero-pos-mobile, 50% 46%); }
}

/* ---------- 42. Galerie: großes Bild füllt beide Zeilen ----------
   Mit fixem 1/1-Verhältnis blieb unter der großen Kachel eine Lücke,
   weil zwei Hochkant-Kacheln höher sind als ein Quadrat.               */
@media (min-width: 881px) {
  .gallery a:first-child { aspect-ratio: auto; }
}

/* ---------- 40. Team-Band ---------- */
.team-band {
  position: relative; margin: var(--gap) 0 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 21 / 9;
  background: var(--bg-2);
}
.team-band img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 38%;
  filter: brightness(0.9);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.team-band:hover img { transform: scale(1.03); filter: brightness(1); }
.team-band::after {
  content: ""; position: absolute; inset: 0;
  background: var(--scrim-soft);
}
.team-band figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  font-size: 0.88rem; color: var(--ink-soft);
}
.team-band figcaption strong { color: var(--ink); font-weight: 500; }
@media (max-width: 700px) {
  .team-band { aspect-ratio: 3 / 2; }
  .team-band figcaption { font-size: 0.8rem; }
}

/* ============================================================
   43. Tiefe, 3D und Bewegung
   Nachgezogen 07/2026. Leitgedanke: Bewegung soll erklären,
   wohin man schaut – nicht beweisen, dass die Seite animieren
   kann. Alles hier läuft auf Compositor-Eigenschaften
   (transform / opacity / filter), damit auch auf dem Handy
   nichts ruckelt.
   ============================================================ */

/* ---------- 43a. Fortschrittsbalken ----------
   Eine 2px-Linie unter der Navigation. Sie ersetzt das Gefühl,
   in einer langen Seite die Orientierung zu verlieren. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 1);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  pointer-events: none;
  will-change: transform;
}

/* ---------- 43b. 3D-Neigung ----------
   Der Elternknoten stellt die Perspektive, das Kind kippt. Die
   Werte kommen aus main.js als Custom Properties, damit die
   Interpolation in der CSS-Transition passiert und nicht in JS. */
[data-tilt] {
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(0);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform 0.12s linear; }

/* Der Glanzfleck folgt dem Zeiger. Ohne ihn sieht eine Neigung
   aus wie ein verrutschtes Rechteck; mit ihm wie eine Fläche,
   die im Licht steht. */
[data-tilt] .tilt-glare {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(
    36% 46% at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.06) 42%,
    transparent 72%);
  mix-blend-mode: screen;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }

/* ---------- 43c. Kacheln, die beim Scrollen aufziehen ----------
   Ein sehr kleiner Maßstabssprung, an den Scroll-Fortschritt
   gekoppelt. Kaum bewusst wahrnehmbar, aber die Seite fühlt
   sich dadurch räumlich an statt wie eine Bilderliste. */
html.js [data-rise] {
  transform: translate3d(0, calc(var(--rise, 0) * -14px), 0)
             scale(calc(1 + var(--rise, 0) * 0.014));
  will-change: transform;
}
/* Trägt ein Element beides, müssen die Anteile in einer einzigen
   transform-Angabe stehen – sonst überschreibt die zuletzt
   gewinnende Regel die andere und ein Effekt fällt stumm aus. */
html.js [data-tilt][data-rise] {
  transform:
    translate3d(0, calc(var(--rise, 0) * -14px), 0)
    scale(calc(1 + var(--rise, 0) * 0.014))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
}

/* ---------- 43d. Magnetische Schaltflächen ----------
   Der Knopf wandert dem Zeiger ein paar Pixel entgegen. Das ist
   der Effekt, der eine Schaltfläche „teuer" wirken lässt; mehr
   als 8 px und es wird zum Spielzeug. */
.btn { --mag-x: 0px; --mag-y: 0px; }
.btn.is-magnetic {
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: transform 0.25s var(--ease-out), background 0.4s var(--ease),
              box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.btn.is-magnetic:hover { transform: translate3d(var(--mag-x), calc(var(--mag-y) - 2px), 0); }

/* ---------- 43e. Zeilenweiser Einlauf der Hero-Headline ----------
   Die Überschrift ist das Erste, was gelesen wird – sie bekommt
   als einzige eine eigene Choreografie statt des Standard-Reveals.

   Bewusst als CSS-Animation und nicht als Transition, die JS per
   Klasse auslöst: In einem Hintergrund-Tab ruht requestAnimationFrame,
   die Klasse käme nie an und die Headline bliebe hinter ihrer Maske
   stehen – die Seite wäre ohne Überschrift. Eine Animation läuft von
   allein und endet über `both` garantiert im sichtbaren Zustand. */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
html.js .line-mask > span {
  display: block;
  animation: lineIn 1.05s var(--ease-soft) both;
  animation-delay: var(--ld, 0s);
}
@keyframes lineIn {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}

/* ---------- 43f. Ruhigere Lichtkanten auf Flächen ---------- */
.cell, .price-card, .faq-item, .benefit, .review, .booking {
  box-shadow: var(--edge-light);
}
.cell:hover, .benefit:hover, .review:hover { box-shadow: var(--edge-light), var(--shadow-md); }

/* ---------- 43g. Rückzug bei reduzierter Bewegung ----------
   Kein Kippen, kein Magnet, kein Aufziehen. Der Inhalt bleibt
   vollständig sichtbar und erreichbar – nur eben still. */
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  [data-tilt] .tilt-glare { display: none; }
  html.js [data-rise] { transform: none !important; }
  .btn.is-magnetic { transform: none !important; }
  html.js .line-mask > span { animation: none; transform: none !important; }
  .scroll-progress { display: none; }
}

/* Touch-Geräte: Kippen und Magnet sind dort sinnlos (kein Zeiger)
   und kosten nur Rechenzeit. */
@media (hover: none) {
  [data-tilt] .tilt-glare { display: none; }
}

/* ============================================================
   44. Kontrast-Korrekturen
   Nachgemessen 07/2026 gegen WCAG 2.2 AA.

   Das matte Markenrot #d12f2f erreicht auf dem schwarzen Grund
   nur 3,9:1. Für Überschriften reicht das (große Schrift, 3:1),
   für Links und Labels in Fließtextgröße nicht (4,5:1 gefordert).
   Dort steht deshalb --accent-bright (5,5:1). Das Markenrot
   bleibt dort, wo es als Fläche wirkt: Schaltflächen, Pillen,
   Linien, Punkte.
   ============================================================ */
.link-arrow,
.breadcrumb a:hover,
.mobile-bar a.mb-cta,
.ref-meta .cls,
.footer a:hover {
  color: var(--accent-bright);
}

/* Weiß auf dem Verlauf der Hauptschaltfläche liegt bei 5,1:1 –
   ausreichend, aber ohne Reserve. Ein Hauch Textschatten hält den
   Wert auch auf der hellen Kante des Verlaufs. */
.btn-primary { text-shadow: 0 1px 2px rgba(0,0,0,0.28); }

/* Tastaturfokus muss auch auf Fotos sichtbar bleiben. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(8,8,10,0.75);
}

/* ============================================================
   45. Karte mit Einwilligung (Zwei-Klick-Lösung)
   Der Google-Maps-iFrame darf erst nach ausdrücklicher Zustimmung
   geladen werden – er überträgt beim Aufruf die IP-Adresse an
   Google (§ 25 TDDDG). Solange keine Zustimmung vorliegt, zeigt
   die Fläche eine lokal ausgelieferte OSM-Vorschau.
   ============================================================ */
.map-consent { position: relative; isolation: isolate; }

.map-preview {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Der Vorhang über der Vorschau: dunkel genug für weiße Schrift,
   durchlässig genug, dass man die Straßenzüge noch erkennt. */
.map-gate {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.85rem; text-align: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  /* Nur so dunkel, dass weiße Schrift sicher darauf liegt – die
     Straßenzüge sollen erkennbar bleiben, sonst wirkt die Fläche wie
     ein Fehler statt wie eine wartende Karte. */
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(8,8,10,0.55), rgba(8,8,10,0.82));
  backdrop-filter: blur(1.5px);
}
.map-gate-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--ink);
}
.map-gate-note {
  font-size: var(--step--1); line-height: 1.55;
  color: var(--ink-soft); max-width: 34ch;
}
.map-gate-note a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.map-gate .btn { margin-top: 0.2rem; }
.map-alt {
  font-size: var(--step--1); color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.map-alt:hover { color: var(--ink); }

/* Attribution – bei OpenStreetMap-Material Pflicht, deshalb immer
   sichtbar und nicht Teil des Vorhangs. */
.map-credit {
  position: absolute; right: 0.55rem; bottom: 0.45rem; z-index: 3;
  font-size: 0.66rem; color: var(--ink-dim);
  background: rgba(8,8,10,0.6); border-radius: var(--r-sm);
  padding: 0.15rem 0.45rem;
}
.map-credit a { color: inherit; text-decoration: underline; }

/* Nach der Zustimmung: iFrame füllt die Fläche, Vorschau und
   Vorhang sind weg, die Attribution entfällt (es sind dann keine
   OSM-Daten mehr zu sehen). */
.map-consent.is-loaded .map-gate,
.map-consent.is-loaded .map-preview,
.map-consent.is-loaded .map-credit { display: none; }
.map-consent iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Widerruf: liegt unter der Karte, nicht darauf – die Einwilligung
   muss so leicht zurückzunehmen sein, wie sie zu geben war. */
.map-revoke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: var(--step--1); color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.map-revoke:hover { color: var(--ink); }

/* ---------- 46. FAQ zweispaltig ----------
   Die Akkordeon-Liste ist auf 820 px begrenzt; darüber blieb rechts
   eine große leere Fläche. Kopf und Liste stehen deshalb wie in der
   Vorher/Nachher-Sektion nebeneinander. Der Kopf bleibt beim Scrollen
   stehen, damit klar ist, wozu die Liste gehört. */
.faq-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-layout .faq { max-width: none; }
.faq-aside { position: sticky; top: 7rem; }

/* Direkter Draht neben der Liste: Wer seine Frage nicht findet,
   soll nicht zurückscrollen müssen. */
.faq-help {
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
}
.faq-help p { font-size: var(--step-0); color: var(--ink-soft); max-width: 32ch; }

@media (max-width: 980px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* ---------- 48. Vertrauensband (Google-Bewertungen) ----------
   Steht vor den Preisen. Bewusst ein ruhiges Band statt bunter
   Sterne-Kacheln: die Bewertungen selbst liegen bei Google, hier
   geht es nur darum, den Weg dorthin zu öffnen. */
.trust-band {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 3.6vw, 3rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(209,47,47,0.10), transparent 58%),
    var(--surface);
  box-shadow: var(--edge-light);
}
.trust-band-text .lead { max-width: 52ch; }
.trust-band-actions {
  display: flex; flex-direction: column; gap: 0.7rem;
  align-items: stretch;
}
.trust-band-actions .btn { justify-content: space-between; }

@media (max-width: 880px) {
  .trust-band { grid-template-columns: 1fr; align-items: start; }
}

/* Quelle unter dem Namen in den Zitatkarten */
.review-by .src {
  display: block; font-size: var(--step--1); color: var(--ink-dim);
}
.review blockquote p { font-size: var(--step-0); color: var(--ink-soft); }