/* ═══ ATS Landingpage 2.0 — Hybrid-System v2 ═══════════════════════════════
   Struktur zu 100 % aus dem Conversion-Plan (Kap. 4 + 5).

   v2-Änderungen gegenüber v1:
   · Der Teal-Stapel ist raus. Die Bühne läuft jetzt auf dem Logo-Blau
     #12182f — exakt der Ton aus icons/logo-blau.png. Damit gibt es keine
     zweite Markenfarbe mehr, nur noch Helligkeitsstufen desselben Blaus.
   · Weiß trägt die Seite. Frost setzt nur noch ab, dunkel ist die Ausnahme.
   · Neu: Drift-Bänder — Vollbild-Aufnahme, darüber Textzeilen, die beim
     Scrollen gegenläufig durchs Bild ziehen.

   Regel: DUNKEL = Bühne für Material und die Schluss-Entscheidung.
          HELL   = überall dort, wo gelesen und entschieden wird.
   Akzent: genau EINER (das Logo-Blau). Auf der Bühne invertiert er zu
           Weiß — dieselbe CTA, keine zweite Farbe. (Plan 4.1)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Leseebene ──
     Die Neutralen sind minimal zum Akzent hin verschoben (Blaustich statt
     reinem Grau), damit Weiß und Blau als ein System lesen. */
  --paper: #ffffff;
  --frost: #f5f6f8;
  --carbon: #16181f;
  --graphite: #414552;
  --ash: #6b7080;
  --hairline: #d9dbe2;

  /* ── Bühne: eine Farbe, vier Helligkeiten ── */
  --navy: #12182f;        /* Logo-Blau — Canvas der dunklen Bänder */
  --navy-deep: #0a0e1c;   /* versenkt: Utility, Footer, Platzhalter */
  --navy-lift: #1b2340;   /* angehoben: Karten auf der Bühne */
  --navy-hover: #232c4e;
  --mist: #eef1f8;        /* betonter Text auf dunkel */
  --silver: #a8b0c4;      /* sekundärer Text auf dunkel */

  /* ── Signalfarben (nur Status, nie Deko) ── */
  --success: #2fb45c;
  --warn: #d08a20;
  --danger: #d84339;

  /* ── Form-Vokabular: nur zwei Radien ── */
  --r-card: 1rem;
  --r-btn: .375rem;

  /* ── Linien ──
     Eine durchgehende graue Haarlinie ist korrekt und langweilig. Diese
     hier startet im Logo-Blau und löst sich nach rechts auf: sie zeigt
     dadurch eine Leserichtung an, statt nur zu trennen. Wird als
     background-image gesetzt (nicht als border), weil border-image für
     einen simplen Strich unnötig sperrig ist. */
  --rule: linear-gradient(90deg,
            #12182f 0%,
            rgba(18,24,47,.42) 22%,
            #d9dbe2 58%,
            rgba(217,219,226,0) 100%);
  --rule-strong: linear-gradient(90deg,
            #16181f 0%,
            #16181f 18%,
            rgba(22,24,31,.35) 52%,
            rgba(22,24,31,0) 100%);
  /* Auf dunklem Grund dieselbe Idee, nur invertiert. */
  --rule-dark: linear-gradient(90deg,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.14) 46%,
            rgba(255,255,255,0) 100%);

  /* ── Raster + Rhythmus (Plan 4.1) ── */
  --page: 80rem;
  --measure: 43.75rem;
  --band-pad: 6rem;
  --head-gap: 3rem;
  --grid-gap: 1.5rem;
  --card-pad: 2rem;

  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 860px) {
  :root { --band-pad: 4rem; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Der Versatz entspricht der fixen Kopfleiste (Utility + Nav), sonst
   verschwindet jedes Sprungziel darunter. */
/* Alle Maße in rem: bis Full-HD bleibt 1rem = 16px (bzw. die Schriftgröße
   des Browsers). Auf größeren Bildschirmen (QHD, 4K) wächst die Basis mit,
   gemessen an 1920 x 1080 — Breite und Höhe, damit Ultrawide nicht ausufert.
   4K bei 100 % Skalierung: ~30px. Breakpoints bleiben in px. */
html { font-size: max(100%, min(.8333vw, 1.4815vh)); scroll-behavior: smooth; scroll-padding-top: 7.25rem; }
body {
  font-family: var(--font);
  font-weight: 450;
  background: var(--paper);
  color: var(--carbon);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: .125rem solid var(--navy); outline-offset: .1875rem; border-radius: .1875rem; }
.band--stage :focus-visible, .footer :focus-visible { outline-color: #fff; }

/* ═══ Bänder: die zwei Zonen ═══════════════════════════════════════════ */

.band { padding: var(--band-pad) 0; position: relative; }
.band--paper { background: var(--paper); }
/* Grau ist als Fläche raus. Weiß, dann Grau, dann Blau waren drei Ebenen
   für eine Aussage — das las sich unruhig und billig. Alle Leseflächen
   sind jetzt weiß; Kontrast kommt ausschließlich von den dunklen Bändern,
   den Bildstreifen und den blauen Angebotsflächen. Die Klasse bleibt im
   Markup, damit der Rhythmus später ohne Umbau wieder anders gesetzt
   werden kann. */
.band--light { background: var(--paper); }

/* Ohne Farbwechsel brauchen zwei helle Bänder eine Kante. Statt der grauen
   Haarlinie derselbe Verlaufsstrich wie überall sonst auf der Seite.
   Nach einem dunklen Band entfällt er — dort trennt die Farbe. */
.band:not(.band--stage) + .band:not(.band--stage) {
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}

/* Die Bühne. Kein Schatten — Tiefe entsteht über den Flächenstapel. */
.band--stage { background: var(--navy); color: var(--silver); }
.band--stage h1, .band--stage h2, .band--stage h3 { color: #fff; }
.band--stage .lead { color: var(--mist); }
.band--stage .eyebrow { color: var(--silver); }

.inner { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* Impressum und Datenschutz: Fließtext statt Bühne. */
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 .625rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
.legal p, .legal li { line-height: 1.65; }
.legal p { margin: 0 0 .75rem; }
.legal ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.legal a { text-decoration: underline; text-underline-offset: .125rem; }

/* ═══ Typografie ═══════════════════════════════════════════════════════ */

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 1.125rem;
}

h1, .h1 {
  font-size: clamp(2.375rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h2, .h2 {
  font-size: clamp(1.8125rem, 3.4vw, 2.625rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3, .h3 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ash);
  margin-top: 1.125rem;
}

.band-head { margin-bottom: var(--head-gap); }
.band-head.center { text-align: center; }
/* Der Vorspann behält seinen Abstand zur Überschrift; zentriert wird nur
   horizontal. (Ein margin-top:0 an dieser Stelle ließ beides zusammenkleben.) */
.band-head.center .measure-center { margin-top: 1.125rem; }

.fine { font-size: .875rem; color: var(--ash); line-height: 1.5; }
.band--stage .fine { color: var(--silver); }

/* Sternchen-Marker für unbestätigte Angaben */
.unconfirmed { cursor: help; border-bottom: 1px dotted currentColor; }

/* ═══ Linien ═══════════════════════════════════════════════════════════
   Alle tragenden Trennlinien der Seite laufen über denselben Verlauf,
   damit sie als System lesen und nicht als vier verschiedene Striche.
   background-image statt border: nur so kann ein Strich einen Verlauf
   haben. Die Stärke steuert background-size, die Lage -position. */

.work-step,
.split-list li,
.figure {
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.faq-item {
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
/* Abschluss einer Reihe: Strich oben UND unten, sonst hängt die letzte
   Zeile in der Luft. */
.work-step:last-child,
.split-list li:last-child,
.figure:last-child,
.faq-item:first-child {
  background-image: var(--rule), var(--rule);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 100%;
}
/* Die Ablauf-Schritte tragen bewusst einen kräftigeren Strich — er ist
   dort Nummernbalken, nicht nur Trennung. */
.flow-step {
  background-image: var(--rule-strong);
  background-repeat: no-repeat;
  background-size: 100% .125rem;
  background-position: 0 0;
}

/* ═══ Buttons — eine Form, zwei Kontraste ══════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  padding: .875rem 1.5rem;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
  text-align: center;
}
.btn-sm { font-size: .875rem; padding: .5625rem 1rem; }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-hover); }

.btn-secondary { border: 1px solid var(--hairline); color: var(--carbon); background: var(--paper); }
.btn-secondary:hover { border-color: var(--carbon); }

/* Primär auf der Bühne — gefüllt weiß. Outline-Buttons konvertieren
   als Haupt-CTA schlecht, deshalb hier ausdrücklich gefüllt. */
.band--stage .btn-primary,
.hero .btn-primary,
.btn-onstage { background: #fff; color: var(--navy); }
.band--stage .btn-primary:hover,
.hero .btn-primary:hover,
.btn-onstage:hover { background: var(--mist); }

.band--stage .btn-secondary,
.hero .btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
.band--stage .btn-secondary:hover,
.hero .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.band-head.center .btn-row { justify-content: center; }

.textlink { color: var(--navy); font-weight: 650; border-bottom: 1px solid currentColor; }
.band--stage .textlink, .hero .textlink { color: #fff; }
.textlink:hover { opacity: .7; }

/* ═══ 0 · Utility-Bar + Header ═════════════════════════════════════════ */

/* Utility + Nav sitzen in einer fixen Leiste. Über dem Hero ist sie komplett
   durchsichtig — das Bild läuft bis unter die Bildschirmkante. Ab ~80 px
   Scroll setzt hybrid.js .is-solid und der Balken bekommt seinen Grund. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
/* Seiten ohne Hero: die Leiste ist dort dauerhaft gedeckt und deckt sonst
   den Anfang des ersten Bandes zu. 116px ist dieselbe Leistenhoehe, mit
   der oben schon scroll-padding-top rechnet. */
body.no-hero { padding-top: 7.25rem; }

.topbar.is-solid {
  background: rgba(18, 24, 47, .92);
  backdrop-filter: blur(1.125rem);
  border-bottom-color: rgba(255,255,255,.08);
}

.utility {
  color: var(--silver);
  font-size: .8125rem;
  font-weight: 550;
  letter-spacing: 0;
}
.utility-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: .5625rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.utility-right { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.utility a:hover { color: #fff; }
.utility-sep { color: rgba(255,255,255,.22); }

/* Kleiner Waschbox-Status-Link — nur Utility, nie Hauptnavigation (Plan 5.1) */
.status-dot {
  display: inline-block;
  width: .4375rem; height: .4375rem;
  border-radius: 50%;
  background: var(--silver);
  margin-right: .4375rem;
  vertical-align: baseline;
}
.status-dot[data-state="free"] { background: var(--success); }
.status-dot[data-state="busy"] { background: var(--warn); }
.status-dot[data-state="down"] { background: var(--danger); }

/* Drei kleine Live-Punkte oben — ein Punkt je Waschplatz, klein gehalten,
   kein eigener Block (Tahir, 23.08.): nur Service-Liveinfo in der Leiste. */
#utility-status { display: inline-flex; align-items: center; gap: .5rem; }
.utility-boxes { display: inline-flex; align-items: center; gap: .625rem; }
.utility-box { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.utility-box .status-dot { margin-right: .25rem; }
/* Schmale Leiste = Zwei-Ton-Ampel: belegt zeigt hier rot statt bernstein.
   Ein-Blick-Aussage „frei oder nicht"; die Nuance (Belegt/Außer Betrieb)
   steht in der Box-Liste unten und im title je Punkt. Geschlossen und
   „Status nicht verfügbar" bleiben bewusst neutral grau — nie grün, nie rot. */
.utility-boxes .status-dot[data-state="busy"] { background: var(--danger); }
/* Ueberfaellige Meldung: grau wie der Grundzustand. Bewusst weder gruen
   noch rot — wir wissen es schlicht nicht. */
.status-dot[data-state="stale"] { background: var(--silver); }
/* Ausserhalb der Öffnungszeiten: ebenfalls neutral. Kein Ampelfarbton fuer
   einen Zustand, der nichts ueber die Belegung aussagt. */
.status-dot[data-state="closed"] { background: var(--silver); }

.nav { position: relative; }
.nav-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: .875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-logo { height: 3.5rem; width: auto; }
/* Logo in der GESAMTEN Sticky-Leiste zentrieren, nicht nur in der Nav-Zeile:
   die Utility-Zeile (~36px) sitzt darüber und drückt es sonst nach unten
   ("zu tief", Tahir 23.08.). Versatz = halbe Utility-Höhe; nur sichtbar
   verschoben (kein Reflow), Klickfläche wandert mit. */
.nav-brand { position: relative; top: -1.125rem; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { font-size: .8125rem; font-weight: 600; color: var(--silver); letter-spacing: -0.005em; }
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"] { color: #fff; }
.nav-toggle { display: none; color: #fff; padding: .375rem; margin-left: auto; }

.nav-sheet {
  display: none;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem 1.5rem 1.25rem;
}
.nav-sheet.open { display: block; }
/* :not(.btn) — sonst überschreibt die helle Linkfarbe die des weißen
   Menü-Buttons (.btn-onstage), die Schrift stand hell auf Weiß. */
.nav-sheet a:not(.btn) { display: block; padding: .75rem 0; color: var(--mist); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-sheet .btn { display: flex; margin-top: 1rem; width: 100%; }

/* ═══ 1 · Hero ═════════════════════════════════════════════════════════ */

/* Vollformat: das Bild trägt den ganzen Bildschirm, der Text steht darin.
   100svh statt 100vh — mobile Browser rechnen die Adressleiste in vh mit
   ein, der Hero würde beim ersten Scroll um ~60 px springen. */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy-deep);
  color: var(--mist);
}
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--silver); }
.hero .lead { color: var(--mist); }

.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero-media video.ready { opacity: 1; }

/* Drei gerichtete Verläufe statt einer Deckfläche. Das Motiv hat links
   ein helles Gegenlicht — genau dort steht der Text. Ohne diesen Schleier
   ist der Vorspann schlicht nicht lesbar. Der Verlauf arbeitet deshalb
   von links und von unten; die rechte Bildhälfte mit den Tropfen bleibt
   unberührt. */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,14,28,.62) 0%, rgba(10,14,28,0) 22%),
    linear-gradient(to right,  rgba(8,11,22,.90) 0%, rgba(8,11,22,.62) 30%, rgba(8,11,22,0) 66%),
    linear-gradient(to top,    rgba(8,11,22,.88) 0%, rgba(8,11,22,.34) 38%, rgba(8,11,22,0) 64%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 8vh, 5.5rem);
}
.hero-copy { max-width: 48.75rem; }
/* Die Umbrüche stehen im Markup, weil der Rhythmus der drei Sätze gewollt
   ist — text-wrap:balance würde ihn wieder auflösen. */
.hero-copy h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.375rem, 5.4vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: normal;
}
.hero-copy .lead { max-width: 52ch; }

/* Kompakter Einstieg der Unterseiten: dieselbe Bühne wie der Hero, aber
   ohne ein zweites Vollbild. So ist das Thema sofort klar und der Inhalt
   beginnt deutlich früher als auf der Startseite. */
.page-hero {
  padding: clamp(4.75rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(circle at 78% 20%, rgba(91,122,196,.28), transparent 34%),
    linear-gradient(145deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--silver);
}
.page-hero h1 {
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.625rem, 6.2vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.page-hero .lead { color: var(--mist); max-width: 62ch; }

/* Vertrauensebene der Startseite. Die ausführliche Arbeitsweise steht auf
   Ablauf & ATS; hier tragen sechs große Aussagen den persönlichen Eindruck. */
.offers-breath + .home-trust { background-image: none; }
.home-trust .band-head {
  max-width: 65rem;
  margin-left: auto;
  margin-right: auto;
}
.trust-slider {
  max-width: 70rem;
  margin: 0 auto;
  outline: none;
}
.trust-slider:focus-visible { outline: .125rem solid #fff; outline-offset: .75rem; }
.trust-slides { overflow: hidden; }
.trust-slide {
  min-height: 20.625rem;
  padding: 2.125rem 0 1.375rem;
  background-image: var(--rule-dark);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
  animation: trust-in .58s cubic-bezier(.16,1,.3,1) both;
}
.trust-slide[hidden] { display: none; }
.trust-count {
  margin-bottom: 1.625rem;
  color: var(--silver);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.trust-slide blockquote {
  position: relative;
  max-width: 19ch;
  padding-left: clamp(2rem, 5vw, 4.5rem);
  color: #fff;
  font-size: clamp(2.375rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.trust-slide blockquote::before {
  content: "“";
  position: absolute;
  top: -.15em;
  left: 0;
  color: rgba(255,255,255,.25);
  font-size: 1.35em;
  line-height: 1;
}
.trust-copy {
  max-width: 58ch;
  margin: 1.625rem 0 0 clamp(2rem, 5vw, 4.5rem);
  color: var(--mist);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
}
.trust-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.375rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.trust-arrows { display: flex; gap: .625rem; }
.trust-arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  color: #fff;
  font-size: 1.375rem;
  transition: background .2s ease, border-color .2s ease;
}
.trust-arrow:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.trust-dots { display: flex; gap: .5rem; }
.trust-dot {
  width: 1.75rem;
  height: .1875rem;
  background: rgba(255,255,255,.22);
  transition: width .25s ease, background .25s ease;
}
.trust-dot.is-active { width: 3.375rem; background: #fff; }
@keyframes trust-in {
  from { opacity: 0; transform: translateX(6rem); }
  to { opacity: 1; transform: translateX(0); }
}
.flow-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.375rem;
  margin-top: 2.125rem;
  font-size: .875rem;
  color: var(--silver);
}
.hero-trust li { list-style: none; display: flex; align-items: center; gap: .5rem; }
.hero-trust li::before {
  content: "";
  width: .25rem; height: .25rem;
  border-radius: 50%;
  background: var(--mist);
  flex: none;
}

/* Poster-first: das Standbild trägt, das Video ist die Zugabe (Plan 1.2) */
.stage-media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--navy-lift);
  aspect-ratio: 4 / 3;
}
.stage-media img,
.stage-media video { width: 100%; height: 100%; object-fit: cover; }
.stage-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.stage-media video.ready { opacity: 1; }

.media-pause {
  position: absolute;
  right: .75rem; bottom: .75rem;
  background: rgba(10,14,28,.72);
  color: #fff;
  border-radius: var(--r-btn);
  padding: .4375rem .75rem;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(.375rem);
  z-index: 2;
}

/* ═══ Glanz-Bühne — scrollgebundene Typografie ═════════════════════════
   Zwei übergroße Zeilen im ATS-Blauverlauf bewegen sich auf Weiß beim
   Scrollen gegeneinander. Ohne JS bleiben beide vollständig lesbar. */

.drift {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(5rem, 9vh, 8rem) 0;
  background: var(--paper);
  color: var(--navy);
}
.drift-lines {
  position: relative;
  width: min(100%, 93.5rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
}
.drift-kicker {
  margin-bottom: clamp(1.125rem, 2.5vw, 1.75rem);
  color: var(--ash);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.drift-line {
  --x: 0px;
  white-space: nowrap;
  font-size: clamp(5.25rem, 13vw, 15rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.065em;
  transform: translate3d(var(--x), 0, 0);
  will-change: transform;
  color: var(--navy);
}
.drift-line--outline { text-align: right; }
.drift-line + .drift-line {
  margin-top: -.18em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .drift-line {
    background-image: linear-gradient(96deg, #12182f 0%, #24366f 34%, #5878bd 66%, #b3c5ec 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .drift-line--outline {
    background-image: linear-gradient(96deg, #b3c5ec 0%, #6685c7 34%, #2d417e 66%, #12182f 100%);
  }
}
@supports (-webkit-text-stroke: 1px #12182f) {
  .drift-line--outline {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: transparent;
    -webkit-text-stroke: .125rem #2d417e;
  }
}
.drift-caption {
  max-width: 38ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 auto;
  padding-left: 1.375rem;
  border-left: 1px solid rgba(18,24,47,.32);
  color: var(--graphite);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
}

/* ═══ 1b · Leistungen — Bildkacheln ════════════════════════════════════
   Acht Motive in einem begrenzten Seitenraster: am Monitor 4 × 2 Quadrate,
   am Tablet zwei, am Handy eine Spalte. Text liegt direkt im Motiv, nicht
   auf blauen Karten. */
.offers {
  overflow-x: clip;
  padding-bottom: 0;
}
.offers-breath {
  width: 100%;
  height: clamp(4.5rem, 5vw, 6rem);
  background: #fff;
}
.offer-grid {
  position: relative;
  display: flex;
  gap: .75rem;
  /* Sieben Karten behalten exakt die Breite der früheren Sechser-Reihe.
     Die Bühne wächst deshalb um eine vollständige Karte plus Fuge. */
  width: min(calc(100% - 3rem), 93.5rem);
  margin: 0 auto;
  background: transparent;
}
.offer {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(35rem, 44vw, 42.5rem);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-card);
  color: #fff;
  background: var(--navy-deep);
  transition: flex-grow .68s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}

/* Die Position wird direkt aus dem Scrollfortschritt gesetzt: Beim
   Herunterscrollen sammeln sich die Karten, beim Zurueckscrollen gehen sie
   wieder auseinander. Keine zeitgesteuerte Einblendung. */
.offer-grid.is-scroll-gathering .offer {
  opacity: var(--gather-opacity, 1);
  transform: translate3d(var(--gather-offset, 0px), 0, 0) scale(var(--gather-scale, 1));
  will-change: transform, opacity;
  transition: flex-grow .68s cubic-bezier(.16,1,.3,1);
}
.offer-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy-deep);
}
.offer-img,
.offer-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(.72);
  transform: scale(1.03);
  transition: filter .45s ease, transform .68s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.offer-media video { z-index: 1; opacity: 0; }
.offer-media video.ready { opacity: 1; }
.offer.is-active .offer-img,
.offer.is-active .offer-media video {
  filter: none;
  transform: scale(1.07);
}
/* Weisser Transporter vor offenem Tor: ganz ohne Filter stuende die weisse
   Schrift auf weissem Lack. Aktiv bleibt der Clip farbig, nur dunkler.
   Gleiche Filterliste wie im Ruhezustand, damit der Uebergang weich bleibt. */
.offer.is-active .offer-media--bright .offer-img,
.offer.is-active .offer-media--bright video {
  filter: grayscale(0) contrast(1) brightness(.56);
}
.offer-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .625rem;
  padding: clamp(1.25rem, 1.35vw, 1.625rem);
  background: linear-gradient(
    to top,
    rgba(18, 24, 47, .98) 0%,
    rgba(18, 24, 47, .78) 30%,
    rgba(27, 35, 64, .30) 52%,
    rgba(5, 8, 17, .05) 72%,
    transparent 100%
  );
  transition: opacity .35s ease;
}
.offer-tag {
  display: flex;
  align-items: flex-end;
  height: 3.1em;
  overflow: hidden;
  font-size: .6875rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.offer h3 {
  height: 2.5em;
  overflow: visible;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(1.125rem, 1.3vw, 1.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  transition: font-size .4s ease;
}
.offer-text,
.offer-go {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .35s ease, transform .45s ease, max-height .55s ease;
}
.offer-text {
  max-width: 38ch;
  color: rgba(255,255,255,.9);
  font-size: 1rem;
  line-height: 1.55;
}
.offer-go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-top: .5rem;
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
}
.offer-go svg { width: 1.0625rem; height: 1.0625rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.offer.is-active .offer-go svg { transform: translateX(.25rem); }

/* Monitor: acht quadratische Kacheln, vier oben, vier unten. Der Text steht
   immer; Hover oder Fokus färbt die Kachel ein und startet ihr Video. */
@media (min-width: 1081px) {
  .offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .offer { height: auto; aspect-ratio: 1; }
  .offer-text,
  .offer-go { max-height: 10rem; opacity: 1; transform: none; }
  .offer h3 { font-size: clamp(1.375rem, 1.6vw, 1.75rem); }
  /* Feste Texthöhe (vier Zeilen): Überschriften einer Reihe stehen auf einer Linie. */
  .offer-text { height: 6.2em; font-size: .9375rem; }
}

/* ═══ 1c · Aussage in der Mitte ════════════════════════════════════════ */

.statement {
  background: var(--paper);
  min-height: 76svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vh, 9.25rem) 1.5rem;
}
.statement p {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(2rem, 5vw, 4.625rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--carbon);
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--navy); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .statement em {
    background-image: linear-gradient(96deg, #12182f 0%, #2b3a6b 45%, #5b7ac4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Höhere Spezifität als .statement p — sonst erbt die Unterzeile die
   22ch der Aussage und steht als schmale Säule darunter. */
.statement .fine {
  max-width: 46ch;
  margin-top: 1.75rem;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ash);
  letter-spacing: 0;
}

/* ═══ 1d · ATS in Zahlen ═══════════════════════════════════════════════
   Kein Kachelraster mit 60-px-Ziffern — das las sich wie ein Dashboard.
   Maßstab wie im Drift-Band: die Zahl ist selbst das Bild. Getrennt
   werden die Zeilen vom Verlaufsstrich, nicht von Kartenrahmen. */

.figure-list { margin-top: clamp(1.5rem, 4vw, 3rem); list-style: none; }
/* Steht ein zentrierter Kopf darüber, bringt der schon seinen eigenen
   Abstand mit — beide zusammen rissen ein Loch von über 100 px. */
.band-head + .figure-list { margin-top: 0; }
.figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  align-items: end;
  gap: .25rem clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1rem, 2.6vw, 2rem) 0 clamp(.875rem, 2.2vw, 1.75rem);
}
.figure-num {
  font-size: clamp(4.125rem, 13.5vw, 13rem);
  font-weight: 750;
  line-height: .82;
  letter-spacing: -0.055em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Derselbe Verlauf wie im Drift-Band — es ist dieselbe Stimme. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .figure-num {
    background-image: linear-gradient(96deg, #12182f 0%, #222e5c 30%, #41589f 62%, #7f9bd8 88%, #b9cbee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Plus und Einheit hängen an der Zahl, sollen sie aber nicht dominieren. */
.figure-num small {
  font-size: .38em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: .08em;
  vertical-align: baseline;
}
.figure-label {
  font-size: clamp(.9375rem, 1.35vw, 1.125rem);
  line-height: 1.45;
  color: var(--graphite);
  padding-bottom: clamp(.5rem, 1.4vw, 1.375rem);
}
.figure-label strong { color: var(--carbon); font-weight: 700; }

/* Platzhalter für Bewertungen, solange die öffentliche Quelle nicht antwortet. */
.slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  text-align: center;
  padding: var(--card-pad);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 .75rem, transparent .75rem 1.5rem),
    var(--navy-deep);
  color: var(--silver);
}
.slot-tag {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-btn);
  padding: .3125rem .6875rem;
}
.slot p { font-size: .8125rem; max-width: 30ch; line-height: 1.45; }

/* ═══ 4 · So arbeitet ATS ══════════════════════════════════════════════ */

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.work-steps { display: flex; flex-direction: column; gap: .25rem; }
.work-step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1.125rem;
  padding: 1.5rem 0;
}
.work-step-no {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ash);
  padding-top: .1875rem;
}
.work-step p { font-size: .9375rem; color: var(--ash); margin-top: .375rem; }
.work-media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 4 / 5;
  position: relative;
}
.work-media img, .work-media video { width: 100%; height: 100%; object-fit: cover; }
.work-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.work-media video.ready { opacity: 1; }

/* Auf der Buehne (navy): Ziffern, Fliesstext und Ablauf-Striche hell,
   damit "So arbeiten wir" auf dunklem Blau lesbar bleibt. */
.band--stage .work-step-no,
.band--stage .work-step p { color: var(--silver); }
.band--stage .work-step { background-image: var(--rule-dark); }
.band--stage .work-step:last-child {
  background-image: var(--rule-dark), var(--rule-dark);
}

/* ═══ Anlässe ══════════════════════════════════════════════════════════
   Vier Situationen, in denen Aufbereitung konkret ansteht. Bild trägt,
   Text erklärt — deshalb Bild oben, kein Overlay. */

.anlass-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.anlass {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.anlass:hover { border-color: var(--carbon); transform: translateY(-.125rem); }
.anlass-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--frost); }
.anlass-img img { width: 100%; height: 100%; object-fit: cover; }
.anlass-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.anlass-body p { font-size: .9375rem; color: var(--ash); flex: 1; }
.anlass-body .textlink { align-self: flex-start; font-size: .9375rem; margin-top: .25rem; }

/* ═══ Detailarbeiten — Medienraster ════════════════════════════════════
   Auf Weiß und in 300-px-Karten hatten die Aufnahmen kein Gewicht. Sie
   laufen jetzt über die volle Breite auf dunklem Grund, ohne Radius, und
   werden nur durch eine 1-px-Fuge getrennt. Ruhezustand ist Graustufe;
   Farbe und Bewegung kommen erst bei Hover — dann führt der Zeiger, statt
   dass 23 Kacheln gleichzeitig um Aufmerksamkeit konkurrieren. */

.media-strip {
  padding: 0;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* Der eigentliche Leistungsbereich endet direkt unter den Karten. Die klar
   definierte weisse Auslaufzone liegt danach als .offers-breath im Dokument,
   damit sie nicht von spaeteren Band-Regeln ueberschrieben werden kann. */
#angebote { padding-bottom: 0; }
#angebote .media-strip { margin-bottom: 0; }
/* Leistungen im Ueberblick: kraeftigere Fugen zwischen den Kacheln. */
#angebote .tile-grid { gap: .375rem; }
/* Gewerbe: Karten und XXL-Hinweis sitzen sonst direkt auf den Kacheln. */
#gewerbe .media-strip { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

/* "So arbeiten wir": Navy nicht flach, sondern Verlauf in ein tieferes Blau
   nach unten - gibt der Buehne Tiefe statt einer Plakatflaeche. Oben bleibt
   es beim Navy, damit die Naht zu den Kacheln darueber ruhig bleibt. */
#ueber {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-top: .375rem solid #fff;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Die Fuge zeigt den Grund des Rasters, nicht den der Strip-Fläche —
     deshalb hier hell: eine dunkle Fuge zwischen dunklen Bildern wäre
     keine Linie, sondern nur ein Loch. */
  gap: 1px;
  background: rgba(255,255,255,.16);
}
/* Die Spaltenzahl richtet sich nach der Kachelzahl, damit jede Reihe voll
   wird: 3 Kacheln → 3 Spalten, 4 → 2, 8 → 4. Vorher stand hier eine doppelt
   breite Kachel, die nur den Rest einer Achterreihe im Dreierraster
   auffüllte — sie sah nach Hierarchie aus, wo keine war. Gleiche Größe für
   alle ist die ehrlichere Aussage: kein Arbeitsschritt ist wichtiger. */
.tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Die 240 px Mindesthöhe sind für das Dreierraster gedacht. Im Viererraster
   würden sie das Seitenverhältnis überstimmen und die Kacheln fast quadratisch
   machen — dann hätten zwei Bildstreifen auf derselben Seite unterschiedliche
   Formate. */
.tile-grid--4 .tile { min-height: 0; }

.tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 10;
  min-height: 15rem;
}
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.tile video.ready { opacity: 1; }

/* Ruhig: reines Schwarzweiß. Erst Hover oder Tastaturfokus zeigen die
   Originalfarbe und starten den jeweiligen Clip. */
.tile img, .tile video {
  filter: grayscale(1) contrast(1.12) brightness(.78);
  transition: filter .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.tile:hover img, .tile:hover video,
.tile:focus-visible img, .tile:focus-visible video {
  filter: none;
  transform: scale(1.04);
}
.tile:hover img, .tile:hover video { transition-duration: .3s; }

/* z-index ist hier keine Kosmetik: hybrid.js hängt das Video per
   appendChild HINTER die figcaption. Beide sind positioniert, ohne
   z-index gewinnt die Dokumentreihenfolge — das Video deckte die
   Beschreibung zu, sobald die Maus einmal über der Kachel war. */
.tile-cap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.5rem 1.375rem;
  background: linear-gradient(to top, rgba(8,11,22,.92) 0%, rgba(8,11,22,.55) 48%, transparent 100%);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.014em;
  pointer-events: none;
}
.tile-cap span { display: block; font-size: .8125rem; font-weight: 400; color: var(--silver); margin-top: .3125rem; letter-spacing: 0; }

/* Textkachel: Fahrzeugarten ohne eigenes Filmmaterial. Kein Ersatzbild,
   sondern die Bühnenfarbe in ihren Helligkeiten — im Zweierraster ergibt
   das mit den Filmkacheln ein Schachbrett. Keine Hover-Bewegung: es gibt
   nichts zu zeigen, also tut die Kachel auch nicht so. */
.tile--text { background: linear-gradient(155deg, var(--navy-hover) 0%, var(--navy-lift) 42%, var(--navy) 100%); }
.tile--text .tile-cap { background: none; padding: 1.5rem 1.5rem 1.375rem; font-size: 1.5rem; }
.tile--text .tile-cap::before { content: ''; display: block; height: 1px; margin-bottom: 1.125rem; background-image: var(--rule-dark); }
.tile--text .tile-cap span { font-size: .9375rem; margin-top: .5rem; }

/* Clips, deren Motiv links der Mitte steht (Trecker: Mitarbeiter links,
   Maschine rechts). Quadratische und hochkante Ausschnitte nehmen sonst die
   Bildmitte und schneiden den Menschen weg. Gilt für Angebotsreihe und Kachel. */
.focus-left img, .focus-left video { object-position: 25% 50%; }

/* ═══ 5 · Leistungen & Preise ══════════════════════════════════════════ */

.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.svc {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: .875rem;
  scroll-margin-top: 7.5rem;
}
.svc .svc-result { flex: 0 0 auto; font-size: .9375rem; font-weight: 650; color: var(--carbon); }
.svc p { font-size: .9375rem; color: var(--ash); flex: 1; }
.svc .svc-price { flex: 0 0 auto; font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; color: var(--carbon); }
.svc .svc-price span { font-size: .9375rem; font-weight: 400; color: var(--ash); }
.svc .btn { align-self: flex-start; }
.svc-extra {
  margin-top: 1.75rem;
  padding: var(--card-pad);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  font-size: .9375rem;
  color: var(--ash);
}
.svc-extra h3 { color: var(--carbon); margin-bottom: .75rem; }
.extra-list { list-style: none; margin: 0; padding: 0; }
.extra-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .75rem 0; border-top: 1px solid var(--hairline);
}
.extra-list li:first-child { border-top: 0; padding-top: 0; }
.extra-list strong { display: block; color: var(--carbon); font-weight: 650; }
.extra-list b { color: var(--carbon); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .extra-list li { flex-direction: column; gap: .25rem; }
}
.price-note { margin-top: 1.25rem; }
/* Bandende mit Kachelstreifen und nur einer Hinweiszeile darunter (Lack,
   Innenraum): sonst stehen Streifen-Abstand und volles Band-Padding
   uebereinander - rund 165 px Weiss um eine Zeile. */
.band--strip-end { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.band--strip-end .media-strip { margin-bottom: 0; }
.band--strip-end .price-note { margin-top: 1rem; }

/* ═══ 6 · Ablauf ═══════════════════════════════════════════════════════ */

.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.flow-step { padding-top: var(--grid-gap); }
.flow-no { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--ash); margin-bottom: .625rem; }
.flow-step p { font-size: .9375rem; color: var(--ash); margin-top: .5rem; }

/* Große Prozessbühne: Nicht sechs kleine Kästen, sondern ein einzelnes,
   wertiges Modul. Bild, Erklärung, Beweis und Handlung bleiben gemeinsam
   sichtbar; die Navigation tauscht jeweils nur den aktiven Schritt aus. */
.process-stage {
  overflow: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(1.75rem, 4vh, 3.5rem) 0;
  background:
    radial-gradient(circle at 78% 56%, rgba(65,88,159,.24) 0%, rgba(35,44,78,.1) 26%, transparent 54%),
    var(--navy-deep);
  color: #fff;
}
.process-inner {
  width: min(calc(100% - 3rem), 93.5rem);
  margin: 0 auto;
}
.process-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16.25rem, .4fr);
  align-items: end;
  gap: clamp(3rem, 7vw, 7.5rem);
  padding: 0 0 clamp(1.5rem, 3vh, 2.5rem);
}
.process-intro .eyebrow { color: var(--silver); }
.process-intro h2 {
  max-width: none;
  margin-top: 0;
  color: #fff;
  font-size: clamp(3.125rem, 5.1vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.07em;
}
.process-intro h2 span {
  display: block;
  white-space: nowrap;
}
.process-intro-copy {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255,255,255,.18);
}
.process-intro-copy span {
  display: block;
  margin-bottom: .875rem;
  color: #fff;
  font-size: clamp(2.125rem, 3vw, 3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.05em;
}
.process-intro-copy p {
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.65;
}
.process-board {
  display: grid;
  grid-template-columns: minmax(21.25rem, .86fr) minmax(0, 1.74fr);
  gap: .25rem;
  height: clamp(26.25rem, calc(100svh - 18.75rem), 41.25rem);
  height: clamp(26.25rem, calc(100dvh - 18.75rem), 41.25rem);
  outline: none;
}
.process-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #05070d;
}
.process-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,7,13,.9) 0%, rgba(5,7,13,.12) 48%, rgba(5,7,13,.2) 100%);
  pointer-events: none;
}
.process-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06);
  transform: scale(1.015);
  transition: opacity .28s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.process-board.is-switching .process-media img { opacity: .22; transform: scale(1.055); }
.process-media figcaption {
  position: absolute;
  z-index: 1;
  right: 1.75rem;
  bottom: 1.75rem;
  left: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
}
.process-media figcaption span {
  color: rgba(255,255,255,.58);
  font-size: .6875rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.process-media figcaption strong {
  max-width: 15ch;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: right;
}
.process-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.625rem;
  grid-template-rows: clamp(5.75rem, 11svh, 7.75rem) minmax(0, 1fr);
  gap: .25rem;
  min-width: 0;
}
.process-toolbar,
.process-deck,
.process-assurance {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-card);
  background: rgba(27,35,64,.54);
  backdrop-filter: blur(1.25rem);
}
.process-toolbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.75rem;
}
.process-toolbar > p {
  color: var(--mist);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 650;
}
.process-progress { display: flex; align-items: center; gap: .4375rem; }
.process-progress button {
  width: .5625rem;
  height: .5625rem;
  padding: 0;
  border: 0;
  border-radius: 6.1875rem;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: width .32s ease, background-color .32s ease;
}
.process-progress button.is-active { width: 2.375rem; background: #fff; }
.process-arrows { display: flex; gap: .5rem; }
.process-arrows button {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.625rem;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.process-arrows button:hover { background: #fff; color: var(--navy); transform: scale(1.04); }
.process-deck {
  min-width: 0;
  padding: clamp(1.625rem, 2.7vw, 3rem);
  background: rgba(27,35,64,.46);
}
.process-slide {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  animation: process-reveal .55s cubic-bezier(.16,1,.3,1) both;
}
.process-slide[hidden] { display: none; }
@keyframes process-reveal {
  from { opacity: 0; transform: translateY(1.375rem); }
  to { opacity: 1; transform: translateY(0); }
}
.process-step {
  color: var(--silver);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.process-slide h3 {
  max-width: 12ch;
  margin-top: clamp(1.25rem, 3vh, 2.125rem);
  color: #fff;
  font-size: clamp(2.375rem, 3.7vw, 3.875rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.process-slide > p:not(.process-step) {
  max-width: 42ch;
  margin-top: 1rem;
  color: var(--silver);
  font-size: clamp(.9375rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
}
.process-slide dl {
  margin-top: auto;
  padding-top: 1.5rem;
}
.process-slide dt {
  color: var(--silver);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.process-slide dd {
  margin-top: .5rem;
  color: #fff;
  font-size: clamp(1.375rem, 1.8vw, 1.875rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.process-assurance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.625rem 1.375rem;
  background: rgba(255,255,255,.09);
  color: #fff;
}
.process-assurance .eyebrow { color: var(--silver); }
.process-assurance strong {
  margin-top: auto;
  font-size: 1.5625rem;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.process-assurance span {
  margin-top: .875rem;
  color: var(--silver);
  font-size: .8125rem;
  line-height: 1.5;
}
.process-assurance .btn {
  width: 100%;
  margin-top: 1.25rem;
  background: #fff;
  color: var(--navy);
}
.process-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem 2rem;
  padding: clamp(1rem, 2vh, 1.5rem) .375rem 0;
  color: var(--silver);
  font-size: .8125rem;
  font-weight: 650;
}
.process-footer span::before {
  content: '';
  display: inline-block;
  width: .3125rem;
  height: .3125rem;
  margin: 0 .5625rem .125rem 0;
  border-radius: 50%;
  background: #fff;
}
.process-footer a { margin-left: auto; color: #fff; }

.shotlist {
  margin-top: 2.75rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.shotlist h3 { margin-bottom: 1rem; }
.shotlist ol { margin: 0 0 0 1.25rem; font-size: .9375rem; color: var(--ash); }
.shotlist li { padding: .25rem 0; }
/* Mit Erklärfilm: Liste und Knopf links, der Film rechts daneben. Schmal
   steht der Film zwischen Liste und Knopf — erst ansehen, dann buchen.
   Die 1fr-Zeilen oben und unten halten die linke Spalte mittig zum Film. */
.shotlist--film {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". film" "copy film" "cta film" ". film";
  column-gap: 3.5rem;
}
.shotlist-copy { grid-area: copy; }
.shotlist--film .media-pair { grid-area: film; align-self: center; margin-top: 0; }
.shotlist--film .btn-row { grid-area: cta; }
@media (max-width: 860px) {
  .shotlist--film {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "copy" "film" "cta";
  }
  .shotlist--film .media-pair { margin-top: 1.75rem; }
}

/* ═══ 7 · Keramik-Langzeitbeweis ═══════════════════════════════════════ */

.proof-grid { display: grid; grid-template-columns: 6fr 6fr; gap: 3.5rem; align-items: center; }
.proof-facts {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.proof-fact dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.proof-fact dd { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; color: #fff; margin-top: .375rem; }
.disclaimer {
  margin-top: 1.75rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--silver);
  border-left: .125rem solid rgba(255,255,255,.2);
  padding-left: 1.125rem;
}

/* ═══ 8 · XXL & Gewerbe ════════════════════════════════════════════════ */

.xxl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.xxl-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.xxl-card p { color: var(--ash); font-size: .9375rem; flex: 1; }
.xxl-card .btn { align-self: flex-start; margin-top: .5rem; }
.xxl-dims { display: flex; gap: 1.75rem; margin: .375rem 0 .25rem; flex-wrap: wrap; }
.xxl-dim dt { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.xxl-dim dd { font-size: 1.5rem; font-weight: 750; color: var(--carbon); letter-spacing: -0.02em; margin-top: .25rem; }
.xxl-note { margin-top: 1.75rem; font-size: .875rem; color: var(--ash); }

/* ═══ Stellplatz ═══════════════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split-media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--frost);
  aspect-ratio: 4 / 3;
  position: relative;
}
.split-media img, .split-media video { width: 100%; height: 100%; object-fit: cover; }
.split-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.split-media video.ready { opacity: 1; }
/* Haarlinie innen: Fotos mit ausgebranntem Himmel (Trecker vor der Halle)
   haben auf dem weißen Band sonst keine Oberkante, das Bild wirkt schief.
   Als Pseudo-Element, damit sie auch über dem Hover-Video liegt. */
.split-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22,24,31,.1);
  pointer-events: none;
}
.split-list { margin-top: 1.625rem; display: flex; flex-direction: column; gap: .125rem; }
.split-list li {
  list-style: none;
  padding: .875rem 0;
  font-size: .9375rem;
  color: var(--ash);
  text-wrap: pretty; /* kein einzelnes Wort allein in der letzten Zeile */
}
.split-list strong { color: var(--carbon); font-weight: 700; }

/* Zwei kleine Bilder unter dem Hauptbild — zeigt den Ort, nicht nur ein Motiv. */
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-top: var(--grid-gap); }
.media-pair .split-media { aspect-ratio: 3 / 2; }
.media-pair--single { grid-template-columns: 1fr; }
.media-pair--single .split-media { aspect-ratio: 16 / 9; }
/* Das Hallenfoto ist ein Panorama (5:2). In 16:9 bleibt die G-Klasse ganz
   im Bild, links stehen noch die abgedeckten Fahrzeuge. */
.split-media--wide { aspect-ratio: 16 / 9; }
.split-media--wide img { object-position: 84% 50%; }
/* Erklärfilm: läuft von selbst (mit Pause-Schalter). Das Poster liegt
   absolut, damit das <picture> drumherum keine Zeilenhöhe aufmacht. */
.split-media--film img { position: absolute; inset: 0; }
/* Film als erstes Element der Bildspalte: kein Abstand nach oben. */
.media-pair--top { margin-top: 0; }
/* Im Abschlussband steht der Film zwischen Text und Knopf, mittig. */
.final .media-pair--single { max-width: 48rem; margin: 2.25rem auto 0; }
/* Der Film ist selbst navy: auf der Bühne braucht er eine helle Haarlinie,
   sonst verschwimmt seine Kante mit dem Band. */
.band--stage .split-media--film::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
@media (max-width: 560px) {
  /* Quer wäre die Schrift im Film hier nicht mehr lesbar — also Hochformat,
     gedeckelt, damit er auf breiteren Telefonen nicht den Schirm füllt. */
  .media-pair--single .split-media--film {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 25rem;
    margin-inline: auto;
  }
}

/* ═══ 9 · Waschboxen ═══════════════════════════════════════════════════ */

.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: var(--grid-gap);
  margin-top: .5rem;
}
.box {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.box-name { font-size: .9375rem; font-weight: 700; }
.box-state { display: flex; align-items: center; gap: .5625rem; margin-top: .625rem; font-size: .9375rem; }
.box-time { font-size: .8125rem; color: var(--ash); margin-top: .5rem; }

/* ═══ 10 · Region ══════════════════════════════════════════════════════ */

.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.region-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.region-list li {
  list-style: none;
  font-size: .875rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  padding: .4375rem .8125rem;
  background: var(--paper);
}
.region-map {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  position: relative;
}
.region-map { display: block; }
.region-map img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.region-map:hover img { transform: scale(1.02); }

/* ═══ 11 · Bewertungen ═════════════════════════════════════════════════
   Statisch, kein Autoplay (Plan 1.2 / 3.4). */

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--grid-gap); }
.review {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.review-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--carbon);
  text-decoration: none;
}
.review-author > span:last-child { display: grid; gap: .1875rem; }
.review-author strong { font-size: .875rem; line-height: 1.2; }
.review-author small { color: var(--ash); font-size: .75rem; }
.review-avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mist);
}
.review-avatar--fallback {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  font-size: 1rem;
  font-weight: 750;
}
.stars { color: var(--carbon); font-size: .9375rem; letter-spacing: .12em; }
.review blockquote {
  min-height: 9em;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.review-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.review.is-expanded blockquote { min-height: 0; }
.review.is-expanded .review-text { display: block; }
.review-toggle-row { min-height: 1.375rem; display: flex; align-items: center; }
.review-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--carbon);
  font-size: .75rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: .1875rem;
  cursor: pointer;
}
.review-toggle[hidden] { display: none; }
.review-toggle:hover { color: var(--navy); }
.review-toggle:focus-visible { outline: .125rem solid var(--carbon); outline-offset: .25rem; }
.review-meta { font-size: .8125rem; color: var(--ash); }
.review-source-link {
  align-self: flex-start;
  color: var(--ash);
  font-size: .75rem;
  font-weight: 700;
}
.review-source-link:hover { color: var(--navy); }
.review-source-row {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 1.25rem;
  padding: 1rem .125rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--ash);
  font-size: .75rem;
}
.review-source-row[hidden] { display: none; }
.review-source-row > div { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.review-source-row a { color: var(--carbon); font-weight: 700; }
.review-grid { transition: opacity .3s ease; }
.review-grid.is-switching { opacity: 0; }
.review-controls { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.review-controls button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  color: var(--carbon);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.review-controls button:hover { border-color: var(--carbon); }
.review-controls button:focus-visible { outline: .125rem solid var(--carbon); outline-offset: .1875rem; }
.google-attribution {
  color: #5e5e5e;
  font-family: Roboto, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
}

/* ═══ 12 · FAQ ═════════════════════════════════════════════════════════ */

.faq { max-width: 53.75rem; margin: 0 auto; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.faq-q:hover { color: var(--navy); }
.faq-icon { margin-left: auto; flex: none; transition: transform .22s ease; color: var(--ash); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 3.75rem 1.625rem 0; font-size: 1rem; color: var(--ash); }
.faq-a.open { display: block; }

/* ═══ 13 · Schluss-CTA ═════════════════════════════════════════════════ */

.final { text-align: center; }
.final .lead { margin-left: auto; margin-right: auto; }
.final-alt { margin-top: 1.75rem; font-size: .9375rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

/* ═══ 14 · Footer ══════════════════════════════════════════════════════ */

.footer { background: var(--navy-deep); color: var(--silver); padding: 6rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer h4 {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer p, .footer a { font-size: .9375rem; line-height: 1.7; }
.footer a:hover { color: #fff; }
.footer-logo { height: 2.25rem; width: auto; margin-bottom: 1.125rem; }
.footer-col a { display: block; }
.footer-bottom { margin-top: 4.5rem; border-top: 1px solid rgba(255,255,255,.1); padding: 1.625rem 0; }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .8125rem;
}

/* ═══ 7b · Politur-Sequenz ═══════════════════════════════
   Die einzige Stelle der Seite, an der etwas von selbst passiert. Sie
   funktioniert in drei Stufen, und jede ist für sich vollständig:

     1. nur HTML/CSS    → das Standbild steht, die Unterschrift erklärt es
     2. + hybrid.js     → der Clip läuft einmal, sobald die Sektion ins Bild
                          kommt, und bleibt auf dem letzten Frame stehen
     3. Reduced-Motion  → zurück auf Stufe 1, aber mit dem Endbild statt dem
                          Anfangsbild — sonst zeigt eine Sektion über das
                          Polieren ausgerechnet den zerkratzten Lack        */

.polish {
  padding: 0;
  background: var(--navy-deep);
}
/* Kein Sticky-Pin mehr: der Ablauf steckt jetzt im Clip, nicht im Scrollweg.
   Damit faellt auch der Grund fuer 360svh Sektionshoehe weg. */
.polish-pin { position: relative; }
/* Das Seitenverhaeltnis kommt aus der Datei (1920x824), nicht aus einer
   runden Zahl: jede Abweichung wuerde per object-fit beschnitten, und
   beschnitten wuerde ausgerechnet die Maschine am rechten Rand. */
.polish-frame {
  position: relative;
  aspect-ratio: 1920 / 824;
  overflow: hidden;
}
.polish-poster,
.polish-frame video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Wie bei den uebrigen Clips: das Video wird erst sichtbar, wenn es
   abspielbereit ist. Scheitert das Laden, bleibt das Standbild stehen. */
.polish-frame video { opacity: 0; transition: opacity .5s ease; }
.polish-frame video.ready { opacity: 1; }

.polish-caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 8.125rem 0 2.75rem;
  background: linear-gradient(to top,
    rgba(8,11,22,.92) 0%, rgba(8,11,22,.5) 52%, transparent 100%);
  pointer-events: none;
}
.polish-caption .inner { pointer-events: auto; }
.polish-caption h2 { max-width: 20ch; margin-bottom: .875rem; }
.polish-caption .fine { max-width: var(--measure); }

/* ═══ Mobile Sticky-Leiste (Plan 4.2) ══════════════════════════════════ */

.sticky-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: rgba(10, 14, 28, .95);
  backdrop-filter: blur(1rem);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
  gap: .5rem;
}
.sticky-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1875rem;
  padding: .5rem .25rem;
  border-radius: var(--r-btn);
  font-size: .6875rem;
  letter-spacing: .02em;
  color: #fff;
}
.sticky-bar a.primary { background: #fff; color: var(--navy); }
.sticky-bar svg { width: 1.1875rem; height: 1.1875rem; }

/* ═══ Responsive ═══════════════════════════════════════════════════════ */

/* Etwas engere Fugen zwischen den Leistungskacheln. */
@media (max-width: 1440px) {
  .offer-grid { gap: .625rem; }
}

@media (max-width: 1080px) {
  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .offer { height: 32.5rem; }
  .offer-text,
  .offer-go { max-height: 10rem; opacity: 1; transform: none; }
  .offer h3 { height: 2.4em; font-size: 1.625rem; }
  .offer-text { height: 6.2em; }
  .anlass-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
  /* Vier und zwei Spalten gehen hier auf zwei zurück — bei acht bzw. vier
     Kacheln bleiben die Reihen dabei voll. */
  .tile-grid, .tile-grid--2, .tile-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Das Dreier-Raster bleibt dreispaltig: drei Kacheln auf zwei Spalten
     ergäben genau das Loch, das hier vermieden wird. Muss ausgeschrieben
     werden, weil die Zeile darüber sonst später steht und gewinnt. */
  .tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .tile, .tile-grid--4 .tile { min-height: 12.5rem; }
}

@media (max-width: 860px) {
  /* 21:9 sind auf 390 px gerade 167 px hoch. Eine Überschrift darüber zu
     legen ginge nicht aus, also steht der Text ab hier unter dem Bild —
     ohne Verlauf, weil es nichts mehr abzudunkeln gibt. */
  .polish-caption {
    position: static;
    background: none;
    padding: 1.375rem 0 .5rem;
  }
  .polish-caption h2 { max-width: none; }

  body { font-size: 1rem; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* Mobil ragte das Logo 4 px in die Waschbox-Zeile ("zu nah", Tahir 12.10.)
     — hier nur leicht hochziehen, damit ca. 8 px Luft darunter bleiben. */
  .nav-brand { top: -.375rem; }
  /* Die CTA sitzt mobil in der Sticky-Leiste und im Menü — im Kopf wäre sie
     ein dritter Anlauf auf 390 px und würde zweizeilig umbrechen. */
  .nav-inner > .btn { display: none; }
  .utility-inner { font-size: .75rem; gap: .75rem; }
  .utility-left { display: none; }
  .utility-right { margin-left: 0; width: 100%; justify-content: space-between; }
  /* Route und Anrufen stehen mobil unten in der Sticky-Leiste. Oben bleiben
     Live-Status und Nummer — mit Route bräche die Nummer bis 414 px in zwei
     Zeilen und die Leiste würde 18px höher. */
  .utility-right a[href*="maps"], .utility-sep { display: none; }
  .utility-right a[href^="tel:"] { white-space: nowrap; }

  /* Der Hero bleibt auch mobil Vollformat — nur der Text rückt näher an
     die Unterkante, damit über der Sticky-Leiste nichts eingeklemmt wird. */
  .hero-inner { padding-bottom: calc(2.5rem + 4.75rem); }
  .hero-copy h1 { font-size: clamp(2.125rem, 9vw, 2.875rem); }
  .hero-copy .lead { font-size: 1rem; }
  .hero-trust { margin-top: 1.375rem; font-size: .8125rem; gap: .375rem 1rem; }
  .stage-media { aspect-ratio: 16 / 10; }
  .page-hero { padding: 4rem 0 4.5rem; }
  .page-hero h1 { font-size: clamp(2.375rem, 11vw, 3.5rem); }
  .flow-grid--3 { grid-template-columns: 1fr; }
  .process-inner { width: min(calc(100% - 2rem), 93.5rem); }
  .process-intro {
    min-height: 76svh;
    grid-template-columns: 1fr;
    align-content: end;
    gap: 2.75rem;
    padding: 6.5rem 0 4.5rem;
  }
  .process-intro h2 { font-size: clamp(3.25rem, 8.6vw, 5.25rem); }
  .process-intro-copy { max-width: 38ch; }
  .process-board { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .process-media { aspect-ratio: 16 / 9; }
  .process-console {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .process-toolbar { grid-column: 1; }
  .process-deck { min-height: 33.75rem; }
  .process-assurance { min-height: 16.25rem; }
  .process-assurance strong { margin-top: 3.375rem; }
  .process-assurance .btn { width: auto; }
  .trust-slide { min-height: 20rem; padding-top: 1.75rem; }
  .trust-slide blockquote { padding-left: 1.75rem; font-size: clamp(2.125rem, 10vw, 3rem); }
  .trust-copy { margin-left: 1.75rem; }
  .trust-controls { align-items: flex-end; }
  .trust-dot { width: .875rem; }
  .trust-dot.is-active { width: 1.875rem; }


  .work-grid, .proof-grid, .region-grid, .split { grid-template-columns: 1fr; gap: 2rem; }
  .work-media { aspect-ratio: 16 / 10; order: -1; }
  .svc-grid, .xxl-grid { grid-template-columns: 1fr; }
  .svc, .xxl-card { padding: var(--card-pad); }
  .faq-a { padding-right: 1.25rem; }
  .faq-q { font-size: 1.0625rem; }

  /* Kacheln bleiben zweispaltig, werden aber wieder quadratisch — 16:10
     auf 190 px Breite ergäbe Briefmarken. */
  /* .tile-grid--4 .tile mit, sonst gewinnt dessen min-height 200px von oben
     und macht die Kachel über aspect-ratio 200 px breit: 6 px Overflow auf 390. */
  .tile, .tile-grid--4 .tile { aspect-ratio: 1 / 1; min-height: 0; }
  /* Drei Kacheln gehen hier nicht mehr nebeneinander und lassen sich auch
     nicht lochfrei auf zwei Spalten verteilen — sie werden zu drei
     vollbreiten Bändern. Quadratisch wären sie bildschirmfüllend. */
  .tile-grid--3 { grid-template-columns: 1fr; }
  .tile-grid--3 .tile { aspect-ratio: 16 / 9; }
  .media-strip { padding: 0; }
  .tile-cap { padding: 2.5rem .875rem .875rem; font-size: .9375rem; }
  .tile-cap span { font-size: .75rem; margin-top: .1875rem; }
  .tile--text .tile-cap { padding: .875rem; font-size: 1.0625rem; }
  .tile--text .tile-cap::before { margin-bottom: .75rem; }
  .tile--text .tile-cap span { font-size: .8125rem; margin-top: .3125rem; }

  /* Zahl über Text statt nebeneinander. */
  .figure { grid-template-columns: 1fr; align-items: start; gap: .625rem; }
  .figure-label { padding-bottom: 0; }

  .drift { min-height: 100svh; min-height: 100dvh; padding: 4.5rem 0; }
  .drift-line { font-size: clamp(3.625rem, 17vw, 6rem); letter-spacing: -.055em; }
  .drift-caption { margin-top: 1.75rem; font-size: 1.0625rem; }
  .offers-breath { height: 3.5rem; }
  .statement { min-height: 62svh; }

  .footer { padding-top: 4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* CTA-Breite mindestens 100 %, wenn zwei Buttons untereinander stehen */
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }

  .sticky-bar { display: flex; }
  body { padding-bottom: 4.75rem; }
}

@media (max-width: 520px) {
  /* 21:9 sind auf 390 px nur 167 px hoch — zu wenig, um die Maschine
     ueberhaupt zu erkennen. 16:9 gibt ein Drittel mehr Hoehe. Der
     Beschnitt sitzt bei 60 %, weil links nur die Schattenkante liegt,
     rechts aber der Kratzer und die Maschine. */
  .polish-frame { aspect-ratio: 16 / 9; }
  .polish-poster,
  .polish-frame video { object-position: 60% 50%; }

  .flow-grid, .footer-grid, .anlass-grid { grid-template-columns: 1fr; }
  .process-inner { width: calc(100% - 1.5rem); }
  .process-intro { min-height: 82svh; padding: 5.5rem 0 3.625rem; }
  .process-intro h2 { font-size: clamp(1.875rem, 10vw, 3.375rem); }
  .process-intro-copy span { font-size: 2.375rem; }
  .process-toolbar {
    grid-template-columns: 1fr auto;
    gap: 1.5rem 1rem;
    padding: 1.5rem;
  }
  .process-progress { grid-column: 1 / -1; grid-row: 2; }
  .process-arrows button { width: 3rem; height: 3rem; }
  .process-deck { min-height: 31.25rem; padding: 1.75rem 1.5rem; }
  .process-slide h3 { margin-top: 2.125rem; font-size: clamp(2.625rem, 13vw, 3.625rem); }
  .process-slide > p:not(.process-step) { font-size: 1rem; }
  .process-slide dd { font-size: 1.625rem; }
  .process-assurance { padding: 1.75rem 1.5rem; }
  .process-footer { align-items: flex-start; flex-direction: column; }
  .process-footer a { margin: .625rem 0 0; }
  .proof-facts { gap: 1.75rem; }
  .media-pair { grid-template-columns: 1fr; }
  /* Eine Fläche pro Zeile: bei zwei Spalten stünden auf 390 px nur noch
     zwei Wörter nebeneinander. */
  .offer-grid { grid-template-columns: 1fr; }
  .offer { height: 33.75rem; }
  .offer-body { padding: var(--card-pad); }
  .offer-tag,
  .offer h3,
  .offer-text { height: auto; min-height: 0; }
}

/* ═══ Reduced Motion — Poster bleibt stehen, Zeilen stehen still ═══════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .process-slide { animation: none; }
  .process-media img { transition: none; }
  .stage-media video,
  .polish-frame video,
  .hero-media video,
  .offer-media video,
  .tile video,
  .work-media video,
  .split-media video { display: none; }
  .media-pause { display: none; }
  /* Farbwechsel bleibt — das ist Information, keine Bewegung. Nur das
     Heranfahren des Bildes entfällt. */
  .offer-img, .offer:hover .offer-img { transform: none; }
  .offer-grid.is-scroll-gathering .offer { opacity: 1; transform: none; }
  /* Farbe bei Hover bleibt — sie ist Information, kein Effekt. Nur der
     Zoom entfällt. */
  .tile:hover img, .tile:hover video,
  .tile:focus-visible img, .tile:focus-visible video { transform: none; }
  /* Bei reduced-motion steht die Zeile still — dann muss sie aber auch
     ganz lesbar sein, also darf sie hier umbrechen. */
  .drift-line { transform: none !important; white-space: normal; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Kontakt-Wegweiser (kontakt.html): eine Karte je Zielgruppe ── */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--grid-gap); }
.guide-card {
  display: flex; flex-direction: column; gap: .625rem;
  padding: var(--card-pad);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-card);
  color: inherit; text-decoration: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.guide-card:hover { transform: translateY(-.1875rem); border-color: var(--navy); }
.guide-card h3, .guide-card p { margin: 0; }
.guide-card .eyebrow { margin: 0; }
.guide-card p:not(.eyebrow) { flex: 1; }
.guide-go { font-weight: 650; color: var(--navy); }
.guide-go::after { content: " →"; }
.guide-card.is-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.guide-card.is-primary h3, .guide-card.is-primary .guide-go { color: #fff; }
.guide-card.is-primary .eyebrow, .guide-card.is-primary p:not(.eyebrow) { color: var(--silver); }
.guide-card.is-primary:hover { border-color: var(--silver); }