/* ============================================================
   POLIER.BEHR — Design-System
   Basis: brand/BRAND.md (gemessene Print-/Altseiten-Werte)
   Stack: Vanilla CSS, keine Frameworks
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO) ----------
   Typo-DNA der Altseite: enfonix (Display) → Oxanium als freie Annäherung
   [KUNDE BESTÄTIGEN: enfonix-Lizenz nach Wix-Ablösung kaufen?],
   Yellowtail (Script, Original der Altseite), Basic (Body, Original). */
/* enfonix = Display-Original der Wix-Seite. [KUNDE BESTÄTIGEN: eigene Lizenz
   für die neue Domain erwerben - die Wix-Lizenz endet mit dem Abo.]
   Oxanium bleibt als Fallback im Stack. */
@font-face {
  font-family: 'Enfonix';
  src: url('../fonts/enfonix-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Enfonix';
  src: url('../fonts/enfonix-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Anton = Auszeichnungs-Original der Altseite (Adresse, Öffnungszeiten) */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-v27-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oxanium';
  src: url('../fonts/oxanium-v21-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oxanium';
  src: url('../fonts/oxanium-v21-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Yellowtail';
  src: url('../fonts/yellowtail-v25-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basic';
  src: url('../fonts/basic-v18-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Farben (gemessen, siehe BRAND.md) */
  --ink:        #06080B;   /* Dschungel-Schwarzgrün */
  --ink-deep:   #030403;
  --carbon:     #0B0D0A;
  --olive-deep: #0E110C;
  --olive:      #151912;
  --olive-mid:  #262C1C;
  --olive-soft: #4A5530;
  --olive-band: #3B4526;
  --olive-pale: #9AA673;
  --gold-deep:  #79542F;
  --gold:       #CFA749;
  --gold-bright:#EDD98A;
  /* Gold-Rahmen: liegt auf JEDEM Container (Mikes Vorgabe) */
  --line-gold:      rgba(207, 167, 73, 0.22);
  --line-gold-soft: rgba(207, 167, 73, 0.13);
  --line-gold-hot:  rgba(207, 167, 73, 0.55);
  --glow-gold:      0 0 24px rgba(207, 167, 73, 0.18);
  --paper:      #F4F3EC;
  --paper-dim:  #C2C4B8;
  --paper-faint:#8F927F;

  /* Typo */
  /* Enfonix ist eine Display-Schrift: breit, weite Punzen. Sie trägt die
     Überschriften. Für Navigation, Buttons und Labels ist sie bei 14-16 px
     schlecht lesbar - dort läuft Oxanium (gleiche technische Anmutung,
     deutlich engere Laufweite). */
  --font-display: 'Enfonix', 'Oxanium', 'Arial Narrow', sans-serif;
  --font-ui: 'Oxanium', 'Arial Narrow', sans-serif;
  --font-alt: 'Anton', 'Oxanium', Impact, sans-serif;
  --font-body: 'Basic', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Yellowtail', cursive;
  --text-display: clamp(1.85rem, 3.5vw, 3.1rem);
  --text-h2: clamp(1.45rem, 3.2vw, 2.5rem);
  --text-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;

  /* Layout — EINE Content-Breite für alles (Header, Sektionen, Footer
     fluchten auf derselben Kante; wrap-wide ist nur noch ein Alias) */
  --wrap: 1280px;
  --wrap-wide: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);
  --rail-w: 54px;
  --header-h: 74px;

  /* Form */
  --radius-card: 14px;
  --radius-media: 18px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* Schatten (ein Token-Set) */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 10px 32px rgba(207, 167, 73, 0.22);

  /* Linien */
  --line: rgba(244, 243, 236, 0.09);
  --line-strong: rgba(244, 243, 236, 0.16);
  --hairline-gold: linear-gradient(90deg, transparent, var(--gold) 24%, var(--gold) 76%, transparent);

  /* Motion (Emil-Kurven) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Panther-Kurve: traege Beschleunigung, dann sehr schneller, harter Stopp */
  --ease-pounce: cubic-bezier(0.16, 0.85, 0.2, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 130ms;
  --dur-med: 260ms;
  --dur-slow: 480ms;

  /* Z-Skala: 10 Rail · 50 Header · 80 Mobilmenü · 100 Preloader */
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: 0.005em;
}
h1 { font-size: var(--text-display); font-weight: 700; }
h2 { font-size: var(--text-h2); font-weight: 600; }
h3 { font-size: var(--text-h3); font-weight: 600; }

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

::selection { background: var(--gold); color: var(--ink); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Schmale Desktops (901–1439px): Content weicht der fixen Schnellkontakt-
   Leiste aus, damit sie NIE über Inhalten liegt (Zentrier-Luft reicht dort
   nicht; ab 1440 ist der Seitenrand breiter als die Leiste). */
@media (min-width: 768px) and (max-width: 1439px) {
  .wrap, .wrap-wide { padding-right: calc(var(--gutter) + var(--rail-w) + 10px); }
}

.section { padding-block: var(--section-pad); position: relative; }
.section-carbon { background: var(--carbon); }

/* Marken-Signaturen im Sektionshintergrund */
.section-mark, .section-splatter { overflow: hidden; }
.section-mark::before {
  content: '';
  position: absolute; top: 4%; right: -4%;
  width: clamp(280px, 30vw, 520px); aspect-ratio: 443 / 741;
  background: url('../media/img/kratzer-element.png') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.section-splatter::before {
  content: '';
  position: absolute; top: 0; left: -2%; right: -2%; height: 46%;
  background:
    url('../media/img/splatter-textur.png') 8% 12% / 52% auto no-repeat,
    url('../media/img/splatter-textur.png') 96% 70% / 44% auto no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.section-mark > *, .section-splatter > * { position: relative; }

/* Dezenter Scroll-Drift der Signaturen (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-mark::before {
      animation: markDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes markDrift {
  from { transform: translateY(6%) rotate(0.5deg); }
  to { transform: translateY(-6%) rotate(-0.5deg); }
}

/* Sektions-Auftakt: Gold-Hairline + Zeile (Signature statt Eyebrow-Inflation) */
.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head .hairline {
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  margin-bottom: 1.25rem;
}
/* Gold-Script-Kicker über Sektions-Headlines (Altseiten-Sprache) */
.kicker {
  display: block;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  color: var(--gold);
  margin-bottom: 0.35rem;
}

/* Kratzer-Riss als Sektionsübergang: 3 lange Klauen-Zacken, Farbe = Folgefläche */
.tear-divider {
  display: block; width: 100%; height: clamp(26px, 4vw, 52px);
  margin-bottom: -1px;
  color: var(--carbon);
}
.tear-divider.to-ink { color: var(--ink); }
.tear-divider svg { display: block; width: 100%; height: 100%; }
.section-head p { color: var(--paper-dim); max-width: 62ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Anker-Offset unter dem fixen Header */
[id] { scroll-margin-top: 92px; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 110;
  background: var(--gold); color: var(--ink);
  font-weight: 600; padding: 0.7rem 1.2rem; border-radius: 8px;
  transform: translateY(-260%);
  transition: transform var(--dur-fast) var(--ease-out), opacity 110ms ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* Eigenständige Hairline (auch außerhalb .section-head nutzbar) */
.hairline {
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  margin-bottom: 1.25rem;
}

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 1rem 1.9rem;
  min-height: 52px;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              box-shadow var(--dur-med) ease,
              color var(--dur-fast) ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--paper); }

@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { background: var(--gold-bright); box-shadow: var(--shadow-gold); transform: translate3d(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px), 0); }
  .btn-gold:hover:active { transform: translate3d(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px), 0) scale(0.97); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
}

/* Klauen-Schlag: kurzer physischer Ruck der ganzen Fläche */
/* Diagonale Bänder (oben-x → unten-x, Versatz -22 %); linke Kanten je 0,3 %
   überlappt, damit zwischen den Polygonen keine Haarlinien-Nähte aufscheinen */

/* Phase 2b „is-torn": Die Risse ÖFFNEN sich — Shards weichen senkrecht zur
   Risslinie auseinander, die Seite scheint durch die Spalte.
   Normale der Diagonale ≈ (0.94, 0.33). */

/* Goldene Risskanten in den Spalten */

/* Phase 3: Shards reißen in derselben Richtung komplett weg */

/* Klauen-Slashes */
/* Keyframes bewusst OHNE opacity: fill-forwards würde sonst die
   Ausblende-Transition der Riss-Phase dauerhaft überstimmen */
/* Der Gold-Schlag ist nur der Impact: sobald die Risse offen sind,
   macht er den Spalten Platz (Seite wird sichtbar, Kante glimmt) */
/* Impact-Blitz beim Aufreißen */

/* Logo + Ladeanzeige */

/* Endzustand + Kurzfassung (Session) */

@media (prefers-reduced-motion: reduce) {
        }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color var(--dur-med) ease, box-shadow var(--dur-med) ease,
              border-color var(--dur-med) ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(6, 8, 4, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(207, 167, 73, 0.28);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 76px;
}
.brand { display: inline-flex; align-items: center; position: relative; }
.brand img { height: 40px; width: auto; transition: filter var(--dur-med) ease; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover img { filter: brightness(1.25) drop-shadow(0 0 10px rgba(207, 167, 73, 0.35)); }
}

.main-nav { display: flex; align-items: center; gap: 0; }
/* Schräge Gold-Trenner zwischen den Punkten — die Trennstrich-Nav der Altseite,
   gekippt im Klauen-Winkel */
.main-nav > a:not(.btn), .main-nav .nav-mega { display: inline-flex; align-items: center; }
/* Keine Trennstriche mehr: der gleichmäßige Abstand trennt sauberer */

.main-nav > .btn { margin-left: 1.6rem; }
.main-nav > a:not(.btn), .nav-mega-trigger {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.9375rem; letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--paper-dim);
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--dur-fast) ease;
}
/* Kratzer-Unterstrich: drei Klauen-Striche statt gerader Linie */
@media (hover: hover) and (pointer: fine) {
  .main-nav > a:not(.btn):hover, .nav-mega-trigger:hover { color: var(--paper); }}
/* Scroll-Spy: aktiver Abschnitt trägt die Kratzer dauerhaft */
.main-nav > a.is-current { color: var(--paper); }
.nav-mega.is-open .nav-mega-trigger { color: var(--paper); }
.main-nav .btn, .header-cta { padding: 0.7rem 1.4rem; min-height: 44px; font-size: 0.85rem; }
/* Gold-CTA: Glanz-Sweep beim Hover */
.main-nav .btn-gold, .header-cta.btn-gold { position: relative; overflow: hidden; }
.main-nav .btn-gold::before, .header-cta.btn-gold::before {
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 34%;
  left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 600ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .main-nav .btn-gold:hover::before, .header-cta.btn-gold:hover::before { left: 130%; }
}

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--paper);
}
.nav-toggle .icon { width: 26px; height: 26px; }

/* Mobiles Menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80;
  /* deckend: bei 0.97 schien die sehr helle Hero-Typo noch durch */
  background:
    url('../media/img/splatter-textur.png') 88% 88% / 120% auto no-repeat,
    linear-gradient(170deg, #0A0D08 0%, #050703 60%, #080A06 100%);
  background-blend-mode: soft-light, normal;
  display: flex; flex-direction: column;
  padding: 1.1rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) ease, visibility 0s linear var(--dur-med);
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-med) ease;
}
.mobile-menu-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; margin-bottom: 3rem;
}
.mobile-menu-top img { height: 36px; width: auto; }
.menu-close {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--paper);
}
.menu-close .icon { width: 26px; height: 26px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-menu nav a:not(.btn) {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 1.75rem; padding: 0.65rem 0;
  color: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  opacity: 0; transform: translateY(14px);
}
.mobile-menu nav a .icon { color: var(--gold); width: 1.1em; height: 1.1em; }
.mobile-menu.is-open nav a:not(.btn) {
  animation: menuItemIn 420ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms + 80ms);
}
@keyframes menuItemIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu .btn { margin-top: 2.2rem; opacity: 0; transform: translateY(14px); }
.mobile-menu.is-open .btn {
  animation: menuItemIn 420ms var(--ease-out) forwards;
  animation-delay: 420ms;
}
.mobile-menu-contact {
  margin-top: auto; padding-top: 2rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  color: var(--paper-dim); font-size: var(--text-small);
}
.mobile-menu-contact a { display: inline-flex; align-items: center; gap: 0.6rem; padding-block: 6px; }
.mobile-menu-contact .icon { color: var(--olive-pale); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  contain: paint;
  position: relative;
  /* svh statt dvh: dvh waechst mit der einklappenden Adressleiste, das
     skaliert das Cover-Video bei JEDEM Scrollschritt neu (sichtbares
     Einzoomen + Ruckeln auf dem Handy). svh bleibt konstant. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
}
.hero-media video, .hero-media img {
  will-change: transform;
  transform: translateZ(0);
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 7, 5, 0.94) 0%, rgba(6, 7, 5, 0.45) 38%, rgba(6, 7, 5, 0.18) 62%, rgba(6, 7, 5, 0.42) 100%),
    linear-gradient(100deg, rgba(6, 7, 5, 0.82) 0%, rgba(6, 7, 5, 0.30) 46%, rgba(6, 7, 5, 0) 70%);
}
.hero-inner {
  width: 100%;
  padding-block: 8.5rem 5.5rem;
  /* über dem Dschungel-Blattwerk (z-index 2) */
  position: relative; z-index: 3;
}
/* Script-Zeile wie „Car-Detailing" auf der Altseite (Yellowtail-Original) */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--gold);
  margin-bottom: 1rem;
}
.hero-eyebrow::before {
  content: ''; width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.hero h1 { max-width: none; margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  max-width: 68ch; color: var(--paper-dim);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin-bottom: 2.2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Hero-Entrance (nach Preloader; Default sichtbar, JS fügt nur Klasse hinzu) */
.hero [data-hero-stagger] { opacity: 1; transform: none; }
body.hero-play .hero [data-hero-stagger] {
  opacity: 0; transform: translateY(26px);
  animation: heroIn 800ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 110ms + 60ms);
}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Maskierter Zeilen-Reveal der H1: Zeilen schieben sich aus der Maske */
.hero h1 .line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .hero-line { display: block; }
.hero h1 .hero-line-2 { padding-left: 0.75ch; }
body.hero-play .hero .hero-line {
  transform: translateY(114%);
  animation: heroLineUp 850ms var(--ease-out) forwards;
}
body.hero-play .hero .line-mask:nth-child(1) .hero-line { animation-delay: 80ms; }
body.hero-play .hero .line-mask:nth-child(2) .hero-line { animation-delay: 210ms; }
@keyframes heroLineUp { to { transform: translateY(0); } }

/* ============================================================
   SCHNELLEINSTIEGE — Oliv-Band (Print-DNA: Kontaktband der Visitenkarte)
   ============================================================ */
.quick-band {
  background: linear-gradient(180deg, #3B4526 0%, #333C21 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(6, 7, 5, 0.35);
  position: relative;
}
.quick-band::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../media/img/splatter-textur.png') 68% 40% / 60% auto no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.band-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; z-index: 1;
}
.band-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.5rem 1.4rem;
  text-align: left;
  color: var(--paper);
  min-width: 0;
  transition: background-color var(--dur-fast) ease;
}
.band-item + .band-item { border-left: 1px solid rgba(244, 243, 236, 0.16); }
.band-item > .icon { width: 30px; height: 30px; flex: none; color: var(--gold-bright); transition: transform var(--dur-med) var(--ease-out); }
.band-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.band-text strong {
  font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem;
  overflow-wrap: break-word; hyphens: auto;
}
.band-text span { font-size: 0.84rem; color: var(--paper); line-height: 1.35; }
.band-arrow {
  width: 19px; height: 19px; margin-left: auto; flex: none;
  color: rgba(244, 243, 236, 0.75);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) ease;
}
.band-item:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .band-item:hover { background: rgba(6, 7, 5, 0.16); }
  .band-item:hover > .icon { transform: translateY(-2px); }
  .band-item:hover .band-arrow { transform: translateX(5px); color: var(--gold-bright); }
}
.option-tile span {
  min-width: 0; max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   PPF-HERZSTÜCK
   ============================================================ */
.ppf-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  /* stretch: Das Bild läuft über die volle Höhe der Textspalte (Überschrift
     steht mit IN der Spalte) — sonst hängt es optisch nach unten versetzt */
  align-items: stretch;
}
/* Die Sektionsüberschrift sitzt in der linken Spalte, nicht darüber */
.ppf-copy .section-head { max-width: none; margin-bottom: 1.75rem; }
.ppf-copy .lead { color: var(--paper); }
.ppf-copy p { color: var(--paper-dim); }
.ppf-abgrenzung {
  margin-top: 1.6rem; padding: 1.35rem 1.5rem;
  background: var(--olive-deep);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.ppf-abgrenzung strong { font-family: var(--font-ui); font-weight: 600; display: block; margin-bottom: 0.35rem; color: var(--olive-pale); }
.ppf-abgrenzung p { font-size: 0.95rem; margin: 0; }

.ppf-media {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  /* Höhe kommt vom Grid-Stretch; aspect-ratio nur als Mindestmaß, damit
     die Kachel nie kollabiert (einspaltig unten wieder echtes Verhältnis) */
  min-height: 460px;
  background: var(--olive-deep);
}
.ppf-media video, .ppf-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Vorteile */
.ppf-benefits {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
}
.benefit {
  padding: 1.9rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit .icon { width: 28px; height: 28px; color: var(--gold); }
.benefit strong { font-family: var(--font-ui); font-weight: 600; font-size: 1.08rem; }
.benefit p { color: var(--paper-dim); font-size: 0.95rem; margin: 0; }

/* Pakete */
.ppf-packages {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  /* Das mittlere Paket bekommt mehr Raum - es ist die Empfehlung */
  display: grid; grid-template-columns: 1fr 1.18fr 1fr;
  gap: 1.25rem;
  align-items: center;
}
.package {
  display: flex; flex-direction: column;
  background: var(--olive-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.9rem 1.7rem;
  position: relative;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-fast) ease;
}
.package.is-featured {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(207, 167, 73, 0.16) 0%, transparent 58%),
    linear-gradient(170deg, #2C3520 0%, #141810 78%);
  border-color: var(--gold);
  border-width: 1.5px;
  /* größer und vorgezogen: die Empfehlung soll man zuerst sehen */
  --package-pad: 2rem;
  /* Das Fähnchen ragt 15px in die Karte hinein. Ohne diesen Zuschlag ist
     der sichtbare Abstand oben genau um diese 15px kleiner als unten. */
  --flag-overlap: 15px;
  padding-top: calc(var(--package-pad) + 1.1rem + var(--flag-overlap));
  padding-bottom: calc(var(--package-pad) + 1.1rem);
  box-shadow: 0 0 0 1px rgba(207, 167, 73, 0.18), 0 26px 60px rgba(0, 0, 0, 0.55),
              0 0 44px rgba(207, 167, 73, 0.13);
  z-index: 1;
}
.package.is-featured h3 { font-size: 1.22em; }
.package.is-featured .price { color: var(--gold-bright); font-size: 1.14em; }
.package.is-featured .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .package.is-featured { animation: paketPuls 4s ease-in-out infinite; }
  @keyframes paketPuls {
    0%, 100% { box-shadow: 0 0 0 1px rgba(207, 167, 73, 0.18), 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 44px rgba(207, 167, 73, 0.13); }
    50%      { box-shadow: 0 0 0 1px rgba(207, 167, 73, 0.3),  0 26px 60px rgba(0, 0, 0, 0.55), 0 0 64px rgba(207, 167, 73, 0.22); }
  }
}
.package-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(100deg, var(--gold), var(--gold-bright));
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(207, 167, 73, 0.3);
  white-space: nowrap;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.32rem 0.85rem; border-radius: var(--radius-pill);
}
.package h3 { margin-bottom: 0.2rem; }
.package .price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem; color: var(--gold);
  margin-bottom: 0.9rem;
}
.package .price small { font-size: 0.9rem; font-weight: 500; color: var(--paper-faint); letter-spacing: 0.02em; }
.package > p { color: var(--paper-dim); font-size: 0.95rem; }
.package ul { margin: 1rem 0 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.package li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.package li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--olive-pale); }
.package .ideal {
  font-size: 0.875rem; color: var(--paper-faint);
  border-top: 1px solid var(--line);
  padding-top: 1rem; margin-top: auto;
}
.package .btn { margin-top: 1.4rem; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .package:hover { transform: translateY(-5px); border-color: var(--olive-mid); }
  .package.is-featured:hover { border-color: var(--gold); }
}

/* Profi-Argumente */
.ppf-pro {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 2.5rem;
}
.ppf-pro li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--paper-dim); font-size: 0.98rem; }
.ppf-pro .icon { width: 19px; height: 19px; margin-top: 4px; color: var(--gold); }

/* ============================================================
   LEISTUNGEN (Bento)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.service-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--olive-deep);
  border: 1px solid var(--line);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-fast) ease;
}
.service-card.is-wide { grid-column: span 3; min-height: 360px; }
.service-card.is-std { grid-column: span 2; }
.service-media { position: absolute; inset: 0; }
.service-media img, .service-media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
/* Grafik-Karte (Kratzer-Element statt Foto) */
.service-card.is-graphic { background: linear-gradient(160deg, #20271A 0%, var(--olive-deep) 70%); }
.service-media-graphic { display: flex; align-items: center; justify-content: flex-end; padding-right: 8%; }
.service-media-graphic img {
  width: auto; height: 82%; object-fit: contain;
  opacity: 0.5; transform: rotate(8deg);
  transition: transform 700ms var(--ease-out), opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-card.is-graphic:hover .service-media-graphic img { transform: rotate(8deg) scale(1.06); opacity: 0.65; }
}
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  /* Text liegt auf dem Foto: der Verlauf muss früh und satt greifen,
     sonst ist die Beschreibung auf hellen Bildstellen unlesbar. */
  background: linear-gradient(to top,
    rgba(4, 6, 3, 0.97) 0%,
    rgba(4, 6, 3, 0.94) 28%,
    rgba(4, 6, 3, 0.74) 52%,
    rgba(4, 6, 3, 0.34) 74%,
    rgba(4, 6, 3, 0.06) 100%);
}
.service-body {
  position: relative; z-index: 1;
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.service-body h3 { margin: 0; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.service-body .price-tag {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.9rem; color: var(--gold);
  letter-spacing: 0.03em;
}
.service-body p { color: var(--paper-dim); font-size: 0.93rem; margin: 0; max-width: 52ch; }
.service-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--olive-pale);
  margin-top: 0.5rem;
  transition: color var(--dur-fast) ease;
}
.service-link .icon { width: 17px; height: 17px; transition: transform var(--dur-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-4px); border-color: var(--olive-mid); }
  .service-card:hover .service-media img { transform: scale(1.05); }
  .service-card:hover .service-link { color: var(--gold); }
  .service-card:hover .service-link .icon { transform: translateX(4px); }
}

/* Leasing-Zeile unter dem Leistungs-Grid */
.leasing-row {
  margin-top: 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  background: var(--olive-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.9rem;
}
.leasing-row h3 { margin-bottom: 0.4rem; }
.leasing-row p { color: var(--paper-dim); font-size: 0.95rem; max-width: 62ch; margin: 0; }
.leasing-row .btn { flex: none; }

/* ============================================================
   ÜBER STEVEN
   ============================================================ */
.about-split {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.about-media {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 5;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.about-quote {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
  color: var(--olive-pale);
  margin: 1.6rem 0;
}
.about-quote::before {
  content: '';
  display: block;
  width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  margin-bottom: 0.9rem;
}
.about-copy p { color: var(--paper-dim); }
.about-sign { display: flex; align-items: center; gap: 1.75rem; margin-top: 2rem; flex-wrap: wrap; }
.about-sign img.sign { height: 74px; width: auto; opacity: 0.95; }
.about-partner { display: flex; flex-direction: column; gap: 0.4rem; }
.about-partner small { color: var(--paper-faint); font-size: 0.8rem; letter-spacing: 0.05em; }
.about-partner img { height: 36px; width: auto; }

/* ============================================================
   GALERIE
   ============================================================ */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
/* 5 Motive, lückenlose 3×3-Komposition:
   [1 groß 2×2][2 hoch 1×2] / Reihe 3: [3][4][5] */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 265px;
  gap: 0.9rem;
}
.gallery-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--olive-deep);
}
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-row: span 2; }
.gallery-item img, .gallery-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;
  font-size: 0.85rem; color: var(--paper-dim);
  background: linear-gradient(to top, rgba(6, 7, 5, 0.85), transparent);
  opacity: 0;
  transition: opacity var(--dur-med) ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.06); }
  .gallery-item:hover figcaption { opacity: 1; }
}

/* ============================================================
   ANFRAGE-FUNNEL
   ============================================================ */
.funnel-shell {
  /* volle Content-Breite statt schmaler Karte (Mikes Vorgabe) */
  width: 100%; margin-inline: auto;
  background: var(--olive-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.funnel-progress .funnel-progress .p-seg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.funnel-progress .p-seg.is-done::after,
.funnel-progress .p-seg.is-active::after { transform: scaleX(1); }
.funnel-steps { position: relative; }
.funnel-step { padding: 1.9rem; display: none; }
.funnel-step.is-active { display: block; animation: stepIn 380ms var(--ease-out); }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.funnel-step.is-back { animation-name: stepInBack; }
@keyframes stepInBack {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.funnel-step h3 { margin-bottom: 0.35rem; }
.funnel-step .step-hint { color: var(--paper-faint); font-size: 0.92rem; margin-bottom: 1.5rem; }

.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.option-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.65rem; text-align: center;
  padding: 1.35rem 0.9rem;
  min-height: 108px;
  min-width: 0;
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--paper);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.option-tile .icon { width: 28px; height: 28px; color: var(--olive-pale); transition: color var(--dur-fast) ease; }
.option-tile span { font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.option-tile:active { transform: scale(0.97); }
.option-tile.is-selected {
  background: var(--olive);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.option-tile.is-selected .icon { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .option-tile:hover { border-color: var(--olive-mid); background: var(--olive); }
}

/* Formular Schritt 4 */
.funnel-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.is-full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 500; color: var(--paper-dim); }
.field label .req { color: var(--gold); }
.field input, .field textarea {
  font: inherit; color: var(--paper);
  background: var(--carbon);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-input);
  padding: 0.85rem 1rem;
  min-height: 50px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--paper-faint); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(207, 167, 73, 0.18);
}
.field .field-error { display: none; font-size: 0.85rem; color: #E8A08A; }
.field.has-error input, .field.has-error textarea { border-color: #C4614A; }
.field.has-error .field-error { display: block; }

.consent { grid-column: 1 / -1; display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.9rem; color: var(--paper-dim); }
.consent input {
  appearance: none;
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--carbon);
  display: grid; place-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.consent input::before {
  content: '';
  width: 12px; height: 12px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--ink);
  transform: scale(0.4);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.consent input:checked { background: var(--gold); border-color: var(--gold); }
.consent input:checked::before { transform: scale(1); opacity: 1; }
.consent a { color: var(--olive-pale); text-decoration: underline; text-underline-offset: 3px; }

/* Auswahl-Chips + Navigation */
.funnel-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.83rem; font-weight: 500;
  color: var(--olive-pale);
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
}
.chip .icon { width: 15px; height: 15px; color: var(--gold); }
.funnel-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0 1.9rem 1.9rem;
}
.funnel-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem;
  color: var(--paper-faint);
  min-height: 48px; padding: 0.5rem 0.8rem;
  border-radius: 10px;
  transition: color var(--dur-fast) ease;
  visibility: hidden;
}
.funnel-back.is-visible { visibility: visible; }
@media (hover: hover) and (pointer: fine) { .funnel-back:hover { color: var(--paper); } }
.funnel-status { min-height: 1.4em; font-size: 0.92rem; }
.funnel-status.is-error { color: #E8A08A; }
.funnel-status.is-ok { color: var(--olive-pale); }

/* Erfolgs-Panel */
.funnel-success {
  display: none;
  padding: 3.5rem 2rem;
  text-align: center;
}
.funnel-success.is-active { display: block; animation: stepIn 380ms var(--ease-out); }
.funnel-success .icon { width: 52px; height: 52px; color: var(--gold); margin-inline: auto; margin-bottom: 1.2rem; }
.funnel-success p { color: var(--paper-dim); max-width: 46ch; margin-inline: auto; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: stretch;
}
.contact-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.contact-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-item .icon { width: 24px; height: 24px; color: var(--gold); margin-top: 3px; }
.contact-item strong { font-family: var(--font-ui); font-weight: 600; display: block; margin-bottom: 0.15rem; }
.contact-item p, .contact-item a { color: var(--paper-dim); font-size: 0.98rem; }
.contact-item a { transition: color var(--dur-fast) ease; display: inline-block; padding-block: 4px; }
@media (hover: hover) and (pointer: fine) { .contact-item a:hover { color: var(--gold); } }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.5rem; font-size: 0.98rem; color: var(--paper-dim); }
.hours dt { font-weight: 500; color: var(--paper); }
.hours dd { margin: 0; }
.contact-socials { display: flex; gap: 0.7rem; margin-top: 2.2rem; }
.social-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 12px;
  color: var(--paper-dim);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.social-btn .icon { width: 22px; height: 22px; }
.social-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
}

/* 2-Klick-Maps */
.map-consent {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(112, 128, 71, 0.16), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(244, 243, 236, 0.03) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(244, 243, 236, 0.03) 46px 47px),
    var(--carbon);
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.map-consent-inner { text-align: center; padding: 2rem; max-width: 40ch; }
.map-consent-inner .icon { width: 40px; height: 40px; color: var(--gold); margin-inline: auto; margin-bottom: 1rem; }
.map-consent-inner p { font-size: 0.92rem; color: var(--paper-dim); margin-bottom: 1.4rem; }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.02); }

/* ============================================================
   SCHNELLKONTAKT-LEISTE
   ============================================================ */
.quick-rail {
  position: fixed; right: 0; top: 50%; z-index: 10;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 0;
  /* Ein zusammenhängender Block: Rahmen, Glas und Rundung liegen auf der
     Leiste, nicht auf den einzelnen Knöpfen. KEIN overflow:hidden - die
     Label-Pillen fahren links heraus. */
  /* gleiches Glas wie die Navigations-Pille - beide sind schwebende
     Bedienelemente und müssen als eine Familie lesen */
  background: rgba(11, 15, 8, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-gold);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.rail-btn:first-child { border-radius: 13px 0 0 0; }
.rail-btn:last-child { border-radius: 0 0 0 13px; }
.rail-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: none;
  color: var(--paper);
  width: var(--rail-w); height: 54px;
  transition: background-color var(--dur-fast) ease;
}
.rail-btn .rail-ico {
  width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail-btn .icon { width: 23px; height: 23px; color: var(--olive-pale); transition: color var(--dur-fast) ease; }
/* Label als eigenständige Pille, fährt per transform links aus dem Button —
   ändert NIE die Button-Geometrie (kein Layout-Shift, kein Hover-Flattern) */
.rail-btn .rail-label {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translate(10px, -50%);
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.84rem; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  background: rgba(18, 21, 14, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  box-shadow: var(--shadow-1);
  transition: transform 280ms var(--ease-out), opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover { background: var(--olive); }
  .rail-btn:hover .icon { color: var(--gold); }
  .rail-btn:hover .rail-label { transform: translate(0, -50%); opacity: 1; }
}
.rail-btn:focus-visible .rail-label { transform: translate(0, -50%); opacity: 1; }

/* Mobil: Leiste unten */
@media (max-width: 767px) {
  .quick-rail {
    top: auto; bottom: 0; right: 0; left: 0;
    transform: none;
    flex-direction: row;
    border: 0;
    border-top: 1px solid var(--line-gold);
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(8, 11, 6, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    filter: none;
  }
  .rail-btn:first-child, .rail-btn:last-child { border-radius: 0; }
  /* Trennstrich zwischen den Feldern, sonst kein Rahmen und kein Padding */
  .rail-btn + .rail-btn { border-left: 1px solid rgba(207, 167, 73, 0.22); }
  .rail-btn { flex: 1; width: auto; height: 58px; flex-direction: column; gap: 2px; justify-content: center; background: transparent; }
  .rail-btn .rail-ico { width: auto; height: auto; }
  .rail-btn .icon { width: 22px; height: 22px; }
  .rail-btn .rail-label {
    position: static; transform: none; opacity: 1;
    pointer-events: auto;
    background: none; border: 0; box-shadow: none;
    padding: 0;
    font-size: 0.62rem; letter-spacing: 0.04em;
    color: var(--paper-faint);
  }
  body { padding-bottom: 58px; }
  footer.site-footer { padding-bottom: 1rem; }
}

/* ============================================================
   MARKEN-SCHLUSSZEILE (Flyer-Band)
   ============================================================ */
.fahrt-band {
  background: linear-gradient(180deg, #3B4526 0%, #333C21 100%);
  border-top: 2px solid var(--gold);
  padding-block: clamp(2.6rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.fahrt-band::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../media/img/splatter-textur.png') 22% 55% / 55% auto no-repeat;
  opacity: 0.09;
  pointer-events: none;
}
.fahrt-band p {
  position: relative; z-index: 1;
  margin: 0;
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.35rem);
  line-height: 1.25;
  color: var(--paper);
  text-align: center;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fahrt-band em {
  font-style: normal; color: var(--gold-bright);
  font-family: var(--font-script); font-weight: 400;
  font-size: 1.3em; padding-inline: 0.12em;
  text-shadow: 0 0 26px rgba(237, 217, 138, 0.35);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 2.5rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.footer-brand img { height: 44px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--paper-faint); font-size: 0.92rem; max-width: 36ch; }
.footer-col h4 {
  font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--olive-pale);
  margin: 0 0 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: var(--paper-dim); font-size: 0.95rem; transition: color var(--dur-fast) ease; display: inline-block; padding-block: 4px; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--gold); } }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2rem;
}
.footer-bottom small { color: var(--paper-faint); font-size: 0.85rem; }

/* InGlory-Badge (Agentur-CI, bewusst eigenständig) */
.credit-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #0A0807; color: #F4EFE6;
  border: 1px solid rgba(244, 239, 230, 0.14);
  border-radius: 10px;
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem; letter-spacing: 0.02em;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.credit-badge svg { width: 17px; height: 16px; color: #F4EFE6; }
.credit-badge b { font-weight: 600; color: #C8E96B; }
@media (hover: hover) and (pointer: fine) {
  .credit-badge:hover { border-color: #C8E96B; transform: translateY(-2px); }
}

/* ============================================================
   SCROLL-REVEALS (Default sichtbar; .js-reveal aktiviert nur mit JS)
   ============================================================ */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: translateY(0);
  /* schnell heran, harter Stopp - Raubtier-Bewegung statt sanftem Schweben */
  transition: opacity 420ms ease, transform 560ms var(--ease-pounce);
  transition-delay: calc(var(--d, 0) * 55ms);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card.is-wide, .service-card.is-std { grid-column: span 1; min-height: 300px; }
  .ppf-pro { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .band-inner { grid-template-columns: 1fr 1fr; }
  .band-item { padding: 1.15rem 1.05rem; justify-content: center; text-align: center; }
  .band-item + .band-item { border-left: 0; }
  .band-item:nth-child(even) { border-left: 1px solid rgba(244, 243, 236, 0.16); }
  .band-item:nth-child(n+3) { border-top: 1px solid rgba(244, 243, 236, 0.16); }
  .band-arrow { display: none; }
  .ppf-split, .about-split, .contact-grid { grid-template-columns: 1fr; }
  /* Einspaltig gibt es keine Nachbarspalte zum Strecken → echtes Bildformat */
  .ppf-media { aspect-ratio: 4 / 5; min-height: 0; }
  .ppf-media { aspect-ratio: 4 / 5; max-width: 480px; }
  .about-media { max-width: 480px; }
  /* Einspaltig verpuffen die Trennlinien optisch (gemessen: 1px bei 9 %
     Deckkraft). Die drei Vorteile werden zu eigenen Karten mit Rand auf
     allen vier Seiten und goldener Kante links. */
  .ppf-benefits { grid-template-columns: 1fr; border: 0; gap: 0.9rem; }
  /* Zwei Selektoren, weil das Gold-Rahmen-System weiter unten sonst
     die linke Kante der ersten Karte wieder auf 1px zurücksetzt. */
  .ppf-benefits .benefit {
    background: var(--olive-deep);
    border: 1px solid var(--line-gold-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.4rem;
  }
  .ppf-packages { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  /* Mobil: [1 breit] / [2][3] / [4][5] — lückenlos */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(2) { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .funnel-form { grid-template-columns: 1fr; }
  .hero-media video, .hero-media img {
  will-change: transform;
  transform: translateZ(0); object-position: 55% center; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card.is-wide, .service-card.is-std { min-height: 280px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .band-item { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.05rem 0.95rem; }
  .band-text { align-items: center; text-align: center; }
  .band-item > .icon { width: 26px; height: 26px; }
  .band-text strong { font-size: 0.94rem; }
  .band-text span { font-size: 0.78rem; }
  .hero-ctas .btn { width: 100%; }
  .btn { width: 100%; }
  .package .btn, .map-consent .btn { width: auto; }
  .hero-inner { padding-block: 7.5rem 4rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .gallery-item:nth-child(1) { grid-column: span 2; }
  .funnel-step { padding: 1.4rem 1.2rem; }
  .funnel-nav { padding: 0 1.2rem 1.4rem; }
    .option-tile { min-height: 96px; }
}

/* Touch: Bilder blockieren Scroll nie */
.hero, .service-media, .gallery-item, .ppf-media, .about-media { touch-action: pan-y; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  body.hero-play .hero [data-hero-stagger] { opacity: 1; transform: none; animation: none; }
  body.hero-play .hero .hero-line { transform: none; animation: none; }
  .section-mark::before { animation: none; }
  /* Preloader-Ausnahme: sanfter Fade bleibt wahrnehmbar */
  }

/* ============================================================
   V3 — DSCHUNGEL-AUSBAU (aggressiv, mystisch, Marken-DNA)
   ============================================================ */

/* ---------- Dschungel-Layer (mix-blend screen: Schwarz verschwindet) ---------- */
.jungle-layer {
  contain: paint;
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Bewusst unscharfe, fast schwarze Assets: düstere Tiefe, KEINE erkennbaren
   Blätter (Mikes Vorgabe: dunkler Dschungel als Stimmung, nicht als Motiv) */
.jungle-layer::before, .jungle-layer::after {
  content: '';
  position: absolute; top: -4%; bottom: -4%;
  width: min(46vw, 640px);
  background: url('../media/img/jungle-links.webp') center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.72;
  /* Innenkante weich auslaufen lassen — sonst endet die Screen-Aufhellung
     als sichtbare vertikale „Fragment-Kante" im Hero */
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 35%, transparent 96%);
}
.jungle-layer::before { left: -6%; background-position: left center; }
.jungle-layer::after { right: -6%; background-position: right center; transform: scaleX(-1); }
.hero .jungle-layer { z-index: 2; }
.hero .jungle-layer::before, .hero .jungle-layer::after { opacity: 0.65; }

/* Einseitiger Layer für Sektionen */
.jungle-side {
  contain: paint;
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(38vw, 560px);
  background: url('../media/img/jungle-rechts.webp') right center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(270deg, #000 30%, transparent 95%);
}

/* Dezenter Scroll-Drift des Blattwerks */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jungle-side, .section-mark::before {
      animation: jungleDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes jungleDrift {
  from { transform: translateY(4%); }
  to { transform: translateY(-4%); }
}

/* ---------- Mega-Menü „Leistungen" ---------- */
.nav-mega { position: relative; }
.nav-mega-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--paper-dim);
  padding: 0.4rem 0;
  transition: color var(--dur-fast) ease;
}
.nav-mega-trigger .icon { -webkit-text-fill-color: initial; color: var(--paper-dim); width: 14px; height: 14px; transition: transform var(--dur-med) var(--ease-out); }
.nav-mega-trigger:hover, .nav-mega-trigger[aria-expanded="true"] { color: var(--paper); }
.nav-mega-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

.mega-panel {
  position: fixed; left: 50%; top: calc(var(--header-h, 72px) + 8px);
  transform: translate(-50%, 10px);
  width: min(880px, calc(100vw - 4rem));
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 0;
  background: linear-gradient(165deg, rgba(13, 18, 9, 0.98), rgba(6, 9, 4, 0.99));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(207, 167, 73, 0.22);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
  overflow: hidden;
  z-index: 60;
}
.mega-panel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    url('../media/img/kratzer-element.png') 104% 118% / 300px auto no-repeat,
    url('../media/img/splatter-textur.png') 6% 94% / 70% auto no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.nav-mega.is-open .mega-panel {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
}
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem; padding: 1.1rem; position: relative; }
.mega-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-btn);
  transition: background-color var(--dur-fast) ease;
}
.mega-item .icon { width: 22px; height: 22px; flex: none; color: var(--gold); align-self: center; }
.mega-item strong {
  display: block;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem;
  color: var(--paper);
}
.mega-item span { display: block; font-size: 0.8rem; color: var(--paper-dim); line-height: 1.4; margin-top: 2px; }
.mega-item:hover { background: rgba(207, 167, 73, 0.09); }
.mega-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 1.4rem;
  border-left: 1px solid rgba(207, 167, 73, 0.18);
  isolation: isolate;
}
.mega-feature img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
  transition: transform 700ms var(--ease-out);
}
.mega-feature::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 6, 3, 0.1) 30%, rgba(4, 6, 3, 0.92) 100%);
}
.mega-feature strong {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem;
  color: var(--paper);
}
.mega-feature span { font-size: 0.85rem; color: var(--paper-dim); margin-top: 0.3rem; }
.mega-feature .mega-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.8rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
}
.mega-feature .mega-cta .icon { width: 16px; height: 16px; transition: transform var(--dur-med) var(--ease-out); }
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature:hover .mega-cta .icon { transform: translateX(4px); }

/* ---------- Kratzer-Flash auf Karten-Hover (Raubtier-Moment) ---------- */
.service-media::after, .gallery-item .claw-flash {
  content: '';
  position: absolute; inset: 0;
  background: url('../media/img/kratzer-element.png') 82% 30% / 180px auto no-repeat;
  opacity: 0;
  transform: translate3d(12px, -10px, 0) rotate(4deg);
  transition: opacity 300ms ease, transform 420ms var(--ease-out);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-media::after, .gallery-item:hover .claw-flash {
    opacity: 0.16;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* ---------- Signatur-Wipe (wird „geschrieben") ---------- */
.sig-wipe { overflow: hidden; }
html.js .sig-wipe img { clip-path: inset(0 100% 0 0); }
html.js .sig-wipe.is-in img {
  clip-path: inset(0 -8% 0 0);
  transition: clip-path 1100ms var(--ease-in-out) 250ms;
}

/* ---------- Funnel: Klauen-Wipe beim Step-Wechsel ---------- */
html.js .funnel-step.is-active { animation: clawStepIn 420ms var(--ease-out); }
@keyframes clawStepIn {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 12% 0, 4% 100%, 0 100%);
    transform: translateX(14px);
  }
  55% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 160% 0, 152% 100%, 0 100%);
    transform: translateX(0);
  }
}

/* ---------- PPF: Gold-Kratzspuren ziehen beim Scrollen quer ---------- */
.ppf-scratches { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.1; }
.ppf-scratches svg { position: absolute; width: 140%; height: 100%; left: -20%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ppf-scratches svg {
      animation: scratchSweep linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }
  }
}
@keyframes scratchSweep {
  from { transform: translateX(-4%); }
  to { transform: translateX(6%); }
}

/* ---------- Footer V3: Riesen-Wortmarke + Dschungel ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer .jungle-side { opacity: 0.3; }

/* ---------- Responsive V3 ---------- */
@media (max-width: 1100px) {
  .jungle-layer::before, .jungle-layer::after { width: 52vw; }
}
@media (max-width: 900px) {
  .mega-panel { display: none; }
  .jungle-side { width: 62vw; opacity: 0.3; }
  .hero .jungle-layer::before { display: none; }
  .hero .jungle-layer::after { top: auto; height: 60%; bottom: -4%; opacity: 0.42; }
}
@media (max-width: 560px) {
  .service-media::after, .gallery-item .claw-flash { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jungle-side, .section-mark::before, .ppf-scratches svg { animation: none; }
  html.js .funnel-step.is-active { animation: none; }
  html.js .sig-wipe img, html.js .sig-wipe.is-in img { clip-path: none; transition: none; }
}


/* ============================================================
   OPENER — „Auspolieren"
   Der Ladeschirm ist eine matte, ungepflegte Lackfläche: Hologramme
   (die konzentrischen Schleifspuren, die unter der Werkstattlampe
   stehen) und vier Krallenspuren im Klarlack. Ist die Seite geladen,
   zieht der Politur-Reflex einmal quer durch und nimmt die matte
   Schicht samt Kratzern mit - dahinter liegt die fertige Seite.
   Polieren ist das Handwerk des Hauses, also ist es der Opener.
   ============================================================ */
#preloader { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
#preloader.is-done { display: none; }

.pre-lack {
  position: absolute; inset: 0;
  background: radial-gradient(122% 94% at 50% 41%, #12170E 0%, #0A0D07 46%, #050703 100%);
  /* Die Politurkante: weicher Verlauf, doppelt so breit wie der Schirm.
     Beim Öffnen wandert er per mask-position einmal komplett durch. */
  -webkit-mask-image: linear-gradient(101deg, transparent 0 25%, #000 50%, #000 100%);
          mask-image: linear-gradient(101deg, transparent 0 25%, #000 50%, #000 100%);
  -webkit-mask-size: 200vw 100%;       mask-size: 200vw 100%;
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
  -webkit-mask-position: -100vw center; mask-position: -100vw center;
}
/* Werkstattlampe: der Lichthof, um den herum die Schleifspuren stehen */
.pre-lack::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(48% 36% at 50% 41%, rgba(237, 217, 138, 0.14) 0%, rgba(237, 217, 138, 0.05) 44%, transparent 74%);
}
/* Sehr schwacher, breiter Schimmer, der langsam wandert. Nur transform -
   die Fläche lebt, ohne dass pro Frame neu gezeichnet wird. */
.pre-lack::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -34%;
  width: 58%;
  background: linear-gradient(100deg, transparent 0%, rgba(244, 243, 236, 0.018) 24%,
              rgba(244, 243, 236, 0.05) 48%, rgba(244, 243, 236, 0.055) 56%,
              rgba(244, 243, 236, 0.016) 78%, transparent 100%);
  filter: blur(14px);
  transform: skewX(-12deg);
  animation: lackAtem 5.4s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes lackAtem { to { transform: translateX(126%) skewX(-12deg); } }

/* Hologramme: konzentrische Schleifspuren, nur rund um den Lichthof */
.pre-swirl {
  position: absolute; inset: 0; z-index: 1;
  background: repeating-radial-gradient(circle at 50% 41%,
      rgba(255, 252, 238, 0) 0 8px, rgba(255, 252, 238, 0.05) 8px 9.5px);
  -webkit-mask-image: radial-gradient(44% 34% at 50% 41%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 80%);
          mask-image: radial-gradient(44% 34% at 50% 41%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 80%);
}
/* Krallenspuren im Klarlack - der Schaden, der gleich weggeht */
.pre-kratzer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.pre-kratzer path { fill: none; stroke: rgba(244, 243, 236, 0.17); stroke-width: 1.4; stroke-linecap: round; }
.pre-kratzer path.tief { stroke: rgba(255, 252, 238, 0.34); stroke-width: 2.2; }
.pre-kratzer path.fein { stroke: rgba(244, 243, 236, 0.10); stroke-width: 0.9; }

.pre-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 1.05rem;
  width: min(340px, 66vw);
  z-index: 3;
  text-align: center;
}
.pre-logo-wrap { width: 100%; }
.pre-logo { display: block; width: 100%; height: auto; }
.pre-claim {
  margin: 0;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--gold);
  letter-spacing: 0.01em;
}
.pre-bar {
  width: 66%; height: 2px;
  margin-top: 0.45rem;
  background: rgba(244, 243, 236, 0.13);
  border-radius: 2px; overflow: hidden;
}
.pre-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  transform: scaleX(0.06); transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}

/* Der Politur-Reflex läuft exakt auf der Maskenkante mit:
   Kantenmitte -25vw → 175vw, Reflexmitte (30vw breit) -40vw+15 → 160vw+15. */
.pre-glanz {
  position: absolute; top: -18%; bottom: -18%;
  left: 0; width: 30vw; z-index: 4;
  background: linear-gradient(100deg, transparent 0%, rgba(237, 217, 138, 0.10) 26%,
              rgba(255, 252, 238, 0.55) 50%, rgba(237, 217, 138, 0.12) 74%, transparent 100%);
  filter: blur(1.5px);
  transform: translateX(-40vw) skewX(-11deg);
  opacity: 0;
  will-change: transform, opacity;
}

/* --- Auspolieren --- */
#preloader.is-out .pre-lack {
  animation: politurZug 1050ms cubic-bezier(0.5, 0, 0.22, 1) forwards;
}
@keyframes politurZug {
  from { -webkit-mask-position: -100vw center; mask-position: -100vw center; }
  to   { -webkit-mask-position:  100vw center; mask-position:  100vw center; }
}
#preloader.is-out .pre-glanz {
  animation: glanzZug 1050ms cubic-bezier(0.5, 0, 0.22, 1) forwards;
}
@keyframes glanzZug {
  0%   { opacity: 0; transform: translateX(-40vw) skewX(-11deg); }
  12%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(160vw) skewX(-11deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pre-lack::before { animation: none; }
  .pre-glanz { display: none; }
  #preloader.is-out .pre-lack {
    animation: none; opacity: 0;
    transition: opacity 380ms ease;
  }
}

/* ============================================================
   GOLD-RAHMEN — jeder Container trägt eine feine Goldkante
   (Mikes Vorgabe). Ein System, nicht handgesetzt pro Element.
   ============================================================ */
.service-card,
.gallery-item,
.package,
.ppf-media,
.ppf-abgrenzung,
.about-media,
.map-box,
.funnel-shell,
.option-tile,
.field input,
.field textarea,
.mega-panel,
.contact-block,
.benefit {
  border: 1px solid var(--line-gold);
}
/* Innenliegende Elemente etwas zurückhaltender */
.option-tile, .field input, .field textarea, .benefit {
  border-color: var(--line-gold-soft);
}
/* Hover: die Kante glüht an */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .gallery-item:hover,
  .package:hover,
  .option-tile:hover {
    border-color: var(--line-gold-hot);
    box-shadow: var(--glow-gold);
  }
}
.option-tile.is-selected,
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--line-gold-hot);
}
/* Sektions-Trennlinien in Gold statt Grau */
.footer-grid, .footer-bottom, .site-header.is-scrolled { border-color: var(--line-gold); }
.section-head .hairline { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }

/* ============================================================
   GLÜHENDER HAUPTBEGRIFF — jede Headline trägt ein Wort in
   bedrohlichem Gold, das leicht glimmt (Logo-Anmutung).
   ============================================================ */
.glow {
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(207, 167, 73, 0.42),
    0 0 46px rgba(207, 167, 73, 0.16);
}
h1 .glow, .hero h1 em.glow {
  text-shadow:
    0 0 24px rgba(207, 167, 73, 0.5),
    0 0 60px rgba(207, 167, 73, 0.2);
}
/* Beim Eintreffen der Sektion zündet das Wort kurz auf */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] .glow { opacity: 0.82; }
  html.js [data-reveal].is-in .glow {
    animation: glowIgnite 900ms var(--ease-out) 160ms forwards;
  }
  @keyframes glowIgnite {
    0%   { opacity: 0.82; text-shadow: 0 0 6px rgba(207, 167, 73, 0.15); }
    45%  { opacity: 1; text-shadow: 0 0 30px rgba(237, 217, 138, 0.75), 0 0 70px rgba(207, 167, 73, 0.35); }
    100% { opacity: 1; text-shadow: 0 0 18px rgba(207, 167, 73, 0.42), 0 0 46px rgba(207, 167, 73, 0.16); }
  }
}

/* ============================================================
   NAVIGATION — „Politur-Effekt"
   Die Links liegen matt da. Beim Hover fährt ein Glanzstreifen
   durch und lässt den Text poliert in Gold zurück - das Handwerk
   des Betriebs als Interaktion. Dazu die Klauen-Kratzer als Marker
   und eine Kratzspur, die den Scrollfortschritt zeigt.
   ============================================================ */
.main-nav > a:not(.btn), .nav-mega-trigger { position: relative; isolation: isolate; }

/* Der polierte Zwilling liegt exakt über dem matten Text */
/* Politur ohne Transparenz-Trick: solider Farbwechsel plus der Glanzstreifen,
   der beim Hover durchfährt. Der frühere background-clip-Ansatz rendert den
   Text transparent - das wirkt dünn und unsauber. */
.main-nav > a:not(.btn), .nav-mega-trigger {
  color: var(--paper-dim);
  transition: color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav > a:not(.btn):hover, .nav-mega-trigger:hover { color: var(--gold-bright); }
}
.main-nav > a.is-current, .nav-mega.is-open .nav-mega-trigger { color: var(--gold); }
/* Der Glanzstreifen, der die Politur anführt */
.main-nav > a:not(.btn)::after,
.nav-mega-trigger::after {
  content: '';
  position: absolute; top: 0.3rem; bottom: 0.3rem; width: 14px;
  left: -18px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  filter: blur(1px);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav > a:not(.btn):hover::after,
  .nav-mega-trigger:hover::after { animation: polishSweep 460ms cubic-bezier(0.16, 0.85, 0.2, 1); }
}
@keyframes polishSweep {
  0%   { opacity: 0; left: -18px; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: calc(100% + 6px); }
}
/* Aktiver Abschnitt bleibt poliert */



/* ============================================================
   INTERAKTION — Lightbox, Karten-Tilt, Cursor-Lichtpunkt
   ============================================================ */
.lightbox {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-card);
  background: rgba(4, 6, 3, 0.96);
  padding: 0;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  overflow: visible;
  color: var(--paper);
}
.lightbox::backdrop { background: rgba(2, 3, 2, 0.88); backdrop-filter: blur(6px); }
.lb-figure { margin: 0; }
.lb-figure img {
  display: block;
  max-width: min(1100px, 92vw); max-height: 90vh;
  width: auto; height: auto;
  border-radius: var(--radius-card);
}
.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(6, 8, 4, 0.92);
  border: 1px solid var(--line-gold);
  color: var(--paper);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.lb-close { top: -18px; right: -18px; }
.lb-prev { left: -20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -20px; top: 50%; transform: translateY(-50%); }
.lb-close .icon, .lb-nav .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .lb-close:hover, .lb-nav:hover { border-color: var(--line-gold-hot); }
  .lb-close:hover { transform: scale(1.08); }
}
.gallery-item { cursor: zoom-in; }

/* Karten: leichte Neigung + Lichtpunkt unter dem Cursor */
.service-card, .package, .gallery-item {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 420ms var(--ease-out), border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.service-card::before, .package::before, .gallery-item::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(207, 167, 73, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.service-card.is-lit::before, .package.is-lit::before, .gallery-item.is-lit::before { opacity: 1; }
/* Magnetik läuft über Variablen: so bleibt der :hover-Transform (Anheben)
   erhalten - ein inline gesetztes transform würde ihn überschreiben. */
.btn-gold, .rail-btn {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform 260ms var(--ease-out), background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

@media (max-width: 900px) {
  .lb-close { top: -14px; right: -8px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .package, .gallery-item { transform: none; }
  .service-card::before, .package::before, .gallery-item::before { display: none; }
}

/* ============================================================
   ANFRAGE-FUNNEL auf voller Content-Breite
   Auf 1280 px wirken flache, zentrierte Kästen leer: die Kacheln
   liegen daher horizontal (Icon im gerahmten Feld links, Label
   rechts). Der Schritt mit vier Optionen füllt eine Reihe.
   ============================================================ */
.option-grid { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.option-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
/* Ausnahme Zeitraum: vier lange Labels nebeneinander werden zu schmal.
   Gleiche Spezifität wie die Regel darüber, deshalb ebenfalls mit :has(). */
.option-grid-zeit:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }

.option-tile {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 1rem; text-align: left;
  padding: 1.1rem 1.25rem;
  min-height: 88px;
  background: linear-gradient(140deg, rgba(21, 25, 18, 0.9), rgba(11, 13, 10, 0.9));
  border-color: var(--line-gold-soft);
  position: relative; overflow: hidden;
}
.option-tile .icon {
  width: 44px; height: 44px; flex: none;
  padding: 10px;
  border: 1px solid var(--line-gold-soft);
  border-radius: 10px;
  color: var(--gold);
  background: rgba(6, 8, 5, 0.6);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease, transform var(--dur-med) var(--ease-out);
}
.option-tile span {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.95rem; line-height: 1.25;
  text-align: left;
}
/* Auswahl: Goldkante zündet, Lichtstreifen läuft links ein */
.option-tile::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 320ms var(--ease-pounce);
}
.option-tile.is-selected::after { transform: scaleY(1); }
.option-tile.is-selected {
  background: linear-gradient(140deg, rgba(48, 40, 18, 0.55), rgba(16, 18, 12, 0.9));
  border-color: var(--line-gold-hot);
}
.option-tile.is-selected .icon { color: var(--ink); background: var(--gold); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .option-tile:hover .icon { transform: translateY(-2px); border-color: var(--line-gold); }
}
.funnel-form { column-gap: 1.5rem; }

@media (max-width: 900px) {
  .option-grid,
  .option-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .option-grid,
  .option-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  .option-tile { min-height: 74px; padding: 0.9rem 1rem; }
  .option-tile .icon { width: 38px; height: 38px; padding: 8px; }
}

/* ============================================================
   INSTAGRAM-FEED — volle Breite, quadratisches Raster
   Bilder liegen lokal (die CDN-URLs von Instagram sind signiert
   und laufen ab). Jede Kachel verlinkt auf den Originalbeitrag.
   ============================================================ */
.section-galerie .section-head { margin-inline: 0; }


.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(6px, 0.7vw, 12px);
}
.ig-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-gold-soft);
  background: var(--olive-deep);
  isolation: isolate;
}
.ig-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease-out), filter 400ms ease;
}
/* Badge: Reel oder Foto */
.ig-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(4, 6, 3, 0.88);
  border: 1px solid var(--line-gold-soft);
  color: var(--paper);
}
.ig-badge .icon { width: 13px; height: 13px; }
.is-reel .ig-badge { color: var(--gold-bright); }
/* Hover: abdunkeln, Hinweis einblenden */
.ig-hover {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  text-align: center;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(4, 6, 3, 0.35), rgba(4, 6, 3, 0.82));
  opacity: 0;
  transition: opacity 300ms ease;
}
.ig-hover .icon { width: 20px; height: 20px; color: var(--gold-bright); }
@media (hover: hover) and (pointer: fine) {
  .ig-item:hover img { transform: scale(1.07); }
  .ig-item:hover .ig-hover { opacity: 1; }
  .ig-item:hover { border-color: var(--line-gold-hot); }
}
.ig-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Konto-Zeile unter dem Raster */
.ig-foot {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

@media (max-width: 1100px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px)  { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   NAVIGATION als schwebende Pille, zentriert
   ============================================================ */
/* Der Header selbst ist auf Desktop komplett unsichtbar - Glas und Rahmen
   trägt ausschließlich die Pille. backdrop-filter MUSS mit zurückgesetzt
   werden, sonst bleibt die Milchglasfläche stehen. */
.site-header,
.site-header.is-scrolled {
  background: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.header-inner {
  /* Die Pille IST die Header-Zeile: volle Content-Breite, Logo links darin,
     Navigation rechts. Glas und Goldrahmen trägt nur dieses eine Element. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1.5rem;
  height: auto;
  padding: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 8, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-gold);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(237, 217, 138, 0.08);
  transition: background-color var(--dur-med) ease, border-color var(--dur-med) ease,
              box-shadow var(--dur-med) ease;
  position: relative;
}
.site-header > .wrap-wide {
  /* im Ruhezustand tiefer gesetzt, beim Sticky-Zustand zurück auf den
     bisherigen Abstand */
  padding-block: 2.8rem 0.9rem;
  transition: padding-block var(--dur-med) ease;
}
.site-header.is-scrolled > .wrap-wide { padding-block: 0.9rem; }
.site-header.is-scrolled .header-inner {
  background: rgba(11, 15, 8, 0.86);
  border-color: var(--line-gold-hot);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(237, 217, 138, 0.12);
}
.header-inner .brand { position: relative; transform: none; justify-self: start; padding-left: 1rem; }
.header-inner .brand img { height: 34px; }
/* Navigation füllt den Raum zwischen Logo und CTA, Punkte gleichmäßig verteilt */
.main-nav {
  /* Gleiche LÜCKEN zwischen den Wörtern, nicht gleiche Spaltenbreiten:
     bei gleichen Spalten füllt „Steinschlagschutz" seine Spalte fast aus
     und der nächste Punkt klebt optisch daran. */
  justify-self: center;
  display: flex; align-items: center;
  gap: clamp(2.2rem, 3.8vw, 3.6rem);
}
.main-nav > a:not(.btn), .main-nav > .nav-mega { position: relative; }
.header-cta { justify-self: end; }

/* Fortschritt liegt jetzt als Bogen unter der Pille */

@media (max-width: 900px) {
  /* Auch mobil die Pille - nur kompakter. Eine flache Leiste bricht die
     Formensprache des Desktops. */
  .header-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    height: auto;
  }
  .site-header > .wrap-wide { padding-block: 0.7rem; }
  .site-header.is-scrolled > .wrap-wide { padding-block: 0.55rem; }
  .header-inner .brand img { height: 40px; }
  .site-header, .site-header.is-scrolled {
    background: none !important; border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  }

.claw-mark { display: none; }

/* ============================================================
   CTA — ruhiges Glühen und wandernder Goldrand
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .btn-gold { animation: ctaPuls 3.4s ease-in-out infinite; }
  .header-cta.btn-gold { animation-delay: 0.6s; }
  @keyframes ctaPuls {
    0%, 100% { box-shadow: 0 0 0 1px rgba(237, 217, 138, 0.34), 0 0 16px 0 rgba(207, 167, 73, 0.18), var(--shadow-1); }
    50%      { box-shadow: 0 0 0 1px rgba(237, 217, 138, 0.75), 0 0 34px 6px rgba(207, 167, 73, 0.34), var(--shadow-1); }
  }
  /* Animierter Rand: ein rotierendes Licht-Segment unter dem Button.
     Rotation läuft auf der Grafikkarte - ein animierter Farbwinkel
     (@property) müsste dagegen jedes Bild neu zeichnen und ruckelte
     über dem laufenden Hero-Video. */
  .btn-gold, .btn-ghost {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .btn-gold::before, .btn-ghost::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 220%; aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(from 0deg,
      transparent 0deg 292deg,
      rgba(237, 217, 138, 0.55) 320deg,
      rgba(255, 252, 238, 0.95) 340deg,
      rgba(237, 217, 138, 0.55) 356deg,
      transparent 360deg);
    animation: randDreh 3.6s linear infinite;
    z-index: -2;
  }
  .btn-ghost::before { animation-duration: 4.4s; animation-delay: -1.2s; }
  /* deckt die Fläche ab, sodass nur der Rand leuchtet */
  .btn-gold::after, .btn-ghost::after {
    content: '';
    position: absolute; inset: 1.5px;
    border-radius: inherit;
    z-index: -1;
  }
  .btn-gold::after { background: var(--gold); }
  .btn-ghost::after { background: var(--ink); }
  .btn-gold:hover::after { background: var(--gold-bright); }
  @keyframes randDreh { to { rotate: 360deg; } }
  .btn-gold { animation: ctaPuls 3.4s ease-in-out infinite; }
}
.btn-gold { position: relative; }

/* ============================================================
   FUNNEL — Schritt-Kacheln (anklickbar), Hinweisbox, Absenden
   ============================================================ */
.funnel-progress {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.4rem, 3vw, 2.6rem) 0;
}
.p-seg {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--radius-btn);
  background: rgba(11, 13, 10, 0.7);
  color: var(--paper-faint);
  text-align: left;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.p-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  border: 1px solid var(--line-gold-soft);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem;
}
.p-txt {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-seg.is-done { color: var(--paper-dim); border-color: var(--line-gold); cursor: pointer; }
.p-seg.is-done .p-num { background: rgba(207, 167, 73, 0.16); color: var(--gold); border-color: var(--line-gold); }
.p-seg.is-active {
  color: var(--paper);
  border-color: var(--gold);
  background: linear-gradient(140deg, rgba(48, 40, 18, 0.5), rgba(16, 18, 12, 0.9));
}
.p-seg.is-active .p-num { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.p-seg[disabled] { cursor: default; opacity: 0.55; }
@media (hover: hover) and (pointer: fine) {
  .p-seg.is-done:hover { border-color: var(--line-gold-hot); background: rgba(207, 167, 73, 0.08); }
}

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

/* Hinweisbox zur verbindlichen Terminvergabe */
.funnel-hinweis {
  display: flex; gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  background: rgba(14, 17, 12, 0.8);
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
}
.funnel-hinweis > .icon { width: 26px; height: 26px; flex: none; color: var(--gold); margin-top: 2px; }
.funnel-hinweis strong {
  display: block;
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem;
  color: var(--paper); margin-bottom: 0.35rem;
}
.funnel-hinweis p { margin: 0; font-size: 0.9rem; color: var(--paper-dim); line-height: 1.55; }

@media (max-width: 767px) {
  .funnel-progress { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; padding-inline: 1.2rem; }
  .p-seg { flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.35rem; text-align: center; }
  .p-txt { font-size: 0.7rem; }
  .funnel-hinweis { flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.2rem; }

  /* Zeitraum: die Labels sind lang ("In den nächsten 2 Wochen"). In zwei
     Spalten liefen sie silbengetrennt über vier Zeilen - deshalb mobil
     volle Zeilen, genau wie in Schritt 1 und 2. */
  .option-grid-zeit:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  /* Ein Zeitraum bricht lieber am Leerzeichen um als mitten im Wort */
  .option-grid-zeit .option-tile span { hyphens: manual; -webkit-hyphens: manual; }
}

/* Mehrfachauswahl (Schritt 1): ohne Auto-Weiter braucht der Schritt einen
   eigenen Weiter-Knopf. Er bleibt gesperrt, bis mindestens eine Leistung steht. */
.funnel-weiter { margin-top: 1.5rem; width: 100%; justify-content: center; }
.funnel-weiter[disabled] { opacity: 0.42; cursor: not-allowed; }
.funnel-weiter[disabled]::before, .funnel-weiter[disabled]::after { display: none; }
.option-tile[aria-pressed="true"] .tile-haken { opacity: 1; transform: scale(1); }
.tile-haken {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-content: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.tile-haken svg { width: 12px; height: 12px; fill: currentColor; }
.option-tile { position: relative; }

/* ============================================================
   TREFFERFLÄCHEN (WCAG 2.5.8 / BFSG)
   Textlinks und Karten-CTAs sind optisch schlank, brauchen aber
   44 px Trefferhöhe. Das Pseudo-Element vergrößert nur die
   Klickfläche - die Optik und das Layout bleiben unverändert.
   Jedes Element mit ::before-Feld braucht hier seinen Bezugsrahmen,
   sonst spannt das Feld über den nächsten positionierten Vorfahren
   (Badge: ganze Fußzeile, Kontaktkacheln: „Galerie" im Mobilmenü).
   Prüfen: qa/klickfang-fuss.mjs, Test E.
   ============================================================ */
.service-link,
.footer-col a,
.footer-legal a,
.contact-item a,
.ig-foot a,
.mega-item,
.mobile-menu-contact a,
.credit-badge {
  position: relative;
}
.service-link::before,
.footer-col li a::before,
.contact-item a::before,
.mobile-menu-contact a::before,
.contact-block a::before,
.contact-item dd a::before,
.kontakt-item a::before,
.contact-list a::before,
.kontakt-daten a::before,
.brand::before,
.credit-badge::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  min-width: 44px;
}
/* Social-Icons und Rail sind bereits groß genug, hier nichts überlagern */
.social-links a::before { content: none; }

/* Mobil: Desktop-Navigation und Header-CTA sind aus (der Hamburger übernimmt).
   Muss am Dateiende stehen, weil die Flex-Regel der Navigation später
   definiert wird als die ursprüngliche Mobil-Media-Query. */
@media (max-width: 900px) {
  .main-nav, .header-cta { display: none; }
}

/* ============================================================
   HERO MOBIL — zentriert und zurückhaltender, damit mehr vom
   Fahrzeug zu sehen bleibt
   ============================================================ */
@media (max-width: 767px) {
  .hero-inner { padding-block: 8.5rem 3.2rem; }
  .hero-inner { text-align: center; }
  .hero-eyebrow { justify-content: center; }
  /* kleiner, damit die Headline in drei Zeilen passt und mehr Fahrzeug frei bleibt */
  .hero h1 { font-size: clamp(1.6rem, 7.3vw, 2.2rem); line-height: 1.14; }
  .hero h1 .hero-line-2 { padding-left: 0; }
  .hero-sub {
    margin-inline: auto; max-width: none;
    font-size: 0.95rem; line-height: 1.55;
  }
  .hero-ctas { justify-content: center; }
  /* der Verlauf darf tiefer ansetzen, damit oben mehr Bild frei bleibt */
  .hero-scrim { background: linear-gradient(to top, rgba(4,6,3,0.96) 0%, rgba(4,6,3,0.82) 34%, rgba(4,6,3,0.28) 66%, rgba(4,6,3,0.06) 100%); }
}

/* Enfonix baut breit: auf schmalen Viewports müssen Karten-Überschriften
   umbrechen dürfen, sonst werden sie in der Karte abgeschnitten. */
/* Enfonix baut breit: Überschriften müssen auf JEDER Breite umbrechen dürfen,
   sonst schneidet der Container sie ab (gemessen bei 768 und 1440). */
/* Gilt für ALLE Überschriften, nicht nur die der Karten: auf den
   Rechtstexten steht z. B. "Kleinunternehmerregelung" in einer h2 und
   schob die Seite bei 390px um 52px nach rechts (gemessen). */
h1, h2, h3, h4,
.service-body h3, .package h3, .section-head h2 {
  overflow-wrap: anywhere; hyphens: auto;
  /* Nur echte Wortungetüme trennen. Ohne dieses Limit macht
     text-wrap:balance aus "Performance Front" ein "Perfor-/mance Front"
     (gemessen bei 390px), obwohl der Umbruch am Leerzeichen passt. */
  hyphenate-limit-chars: 14 5 5;
}
@media (max-width: 560px) {
  .service-body h3, .package h3 { font-size: 1.05rem; line-height: 1.2; }
  .section-head h2 { font-size: clamp(1.3rem, 6.2vw, 1.75rem); }
  .service-body .price-tag { font-size: 0.8rem; }
}

/* ============================================================
   Auf schmalen Viewports laufen Texte bis zur Content-Breite.
   Die ch-Begrenzungen sind für Desktop-Zeilenlängen gedacht und
   erzeugen auf dem Handy sonst willkürlich frühe Umbrüche.
   ============================================================ */
@media (max-width: 767px) {
  .section-head p,
  .hero-sub,
  .service-body p,
  .leasing-row p,
  .funnel-success p,
  .footer-brand p,
  .ppf-copy p,
  .about-copy p,
  .about-copy .about-quote,
  .map-consent-inner {
    max-width: none;
  }
}

/* Kontaktwege im Mobilmenü: nebeneinander unter dem Button */
.mobile-menu-contact {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}
.mobile-menu-contact a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 0.6rem;
  min-height: 48px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-btn);
  background: rgba(11, 15, 8, 0.7);
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.03em;
  color: var(--paper);
}
.mobile-menu-contact a .icon { width: 18px; height: 18px; color: var(--gold); }

/* Deutscher Fließtext: lange Komposita (Lackschutzfolie, Keramikversiegelung)
   lassen sonst breite Ränder stehen. Silbentrennung füllt die Zeilen aus;
   die Limits halten sie dezent. <html lang="de"> ist Voraussetzung. */
.section-head p,
.hero-sub,
.ppf-copy p,
.service-body p,
.leasing-row p,
.about-copy p,
.benefit p,
.funnel-hinweis p,
.footer-brand p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
}

/* ============================================================
   MOBILMENÜ — Pille bleibt an Ort und Stelle, Inhalt zentriert
   ============================================================ */
@media (max-width: 900px) {
  /* Das Menü liegt UNTER dem Header, damit die Pille sichtbar bleibt
     und nicht durch eine zweite Kopfzeile ersetzt wird. */
  .mobile-menu {
    z-index: 70;
    padding-top: calc(var(--header-mob-h, 88px) + 1.4rem);
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 1.4rem);
    justify-content: center;   /* Menüinhalt vertikal mittig */
  }
  .mobile-menu.is-open ~ .site-header .header-inner,
  .site-header { z-index: 90; }
  /* Die eigene Kopfzeile des Menüs entfällt - Logo und Schließer sitzen
     in der Pille bzw. ersetzen dort den Hamburger. */
  .mobile-menu-top { display: none; }
  .mobile-menu nav { flex: 0 0 auto; }
  /* Logo in der Pille etwas kleiner */
  .header-inner .brand img { height: 30px; }
  /* Hamburger wird im offenen Zustand zum Schließer */
  .nav-toggle .icon { transition: opacity 160ms ease; }
  body.menu-offen .nav-toggle .i-list { display: none; }
}