/* ═══════════════════════════════════════════════════════════════════════════
   RUHRFRIEDEN Vorsorge & Bestattungen — Design-System
   Aufbau und Typografie nach Entwurf „Apple × Pill-Nav"; Akzent Petrol #004a51
   aus der Wort-Bild-Marke. Alle Farben nur als :root-Token, keine Hex-Werte
   in Komponenten.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Flächen */
  --paper:        #ffffff;
  --bg:           #f2f6f6;
  --bg-2:         #e7eeee;
  --ink:          #17201f;
  --ink-deep:     #0d1615;
  --muted:        #5d6a68;
  --muted-2:      #8a9694;

  /* Marke — Petrol #004a51 ist die einzige Akzentfarbe der Seite.
     Alles Farbige (Knopf, Pille, Feld-Fokus, Aufzaehlungspunkt, Icon-Kachel,
     Zahl, Chip) kommt aus dieser Reihe. Rot dient allein der Fehlermeldung. */
  --petrol:       #004a51;
  --petrol-hover: #016670;
  --petrol-deep:  #00343a;
  --petrol-soft:  #e3eded;
  --petrol-tint:  #f1f7f7;
  --petrol-mid:   #4d878c;

  /* Linien & Schatten */
  --line:         rgba(0, 74, 81, 0.13);
  --line-strong:  rgba(0, 74, 81, 0.24);
  --shadow-sm:    0 2px 10px rgba(13, 22, 21, 0.05);
  --shadow-md:    0 12px 34px rgba(13, 22, 21, 0.08);
  --shadow-lg:    0 26px 60px rgba(13, 22, 21, 0.12);

  /* Bewegung */
  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.4, .64, 1);

  /* Maße */
  --wrap:         1120px;
  --wrap-narrow:  760px;
  --pad:          24px;
  --nav-h:        58px;

  /* Kopfzeile waechst und schrumpft mit der Breite, statt an festen Stufen
     zu springen. --marke-gesamt ist die Breite, die die Marke links belegt:
     Bildmarke + Abstand + Wortmarke. Die Pille rechnet damit ihren Platz
     aus, deshalb muss der Wert stimmen, wenn hier etwas geaendert wird. */
  --marke-h:      clamp(27px, .95rem + 1.05vw, 36px);
  --marke-lucke:  clamp(8px, .3rem + .35vw, 12px);
  --marke-links:  clamp(16px, .4rem + 1.3vw, 34px);
  --marke-gesamt: calc(var(--marke-h) * 1.088 + var(--marke-lucke) + var(--marke-h) * .44 * 13.554);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Nicht auf den body legen: dort macht overflow-x den body zum Scroll-Container
     und position:sticky im Hero funktioniert nicht mehr. */
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
/* height:auto ist Pflicht: die width/height-Attribute im Markup (gegen CLS) wirken
   sonst als Presentational Hint und schlagen jedes CSS-aspect-ratio. */
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; }

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

section { scroll-margin-top: calc(var(--nav-h) + 34px); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--pad); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--petrol); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
  font-size: .9rem;
}
.skip-link:focus { left: 0; }

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

/* ── Typografie ─────────────────────────────────────────────────────────── */

/* Jede Dachzeile bekommt einen langen Gedankenstrich davor. Der Strich ist
   gezeichnet und kein Schriftzeichen: nur so bleiben Laenge und Staerke vom
   Font unabhaengig. currentColor sorgt dafuer, dass er die Farbe der Zeile
   mitnimmt, also Petrol auf hellem und Weiss auf dunklem Grund. */
.eyebrow {
  display: flex; align-items: center;
  gap: clamp(12px, 1.1vw, 17px);
  font-size: clamp(.78rem, .72rem + .18vw, .87rem); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; flex: none;
  width: clamp(40px, 3.6vw, 62px); height: 2px;
  background: currentColor; border-radius: 1px;
}
.eyebrow-light { color: rgba(255, 255, 255, .74); }
/* mittig gesetzte Dachzeilen (Statement-Block) */
.stmt .eyebrow, .sec-head.center .eyebrow { justify-content: center; }

h1, h2, h3, h4 { font-weight: 300; letter-spacing: -.015em; line-height: 1.14; text-wrap: balance; }

.h-xl  { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.06; letter-spacing: -.025em; }
.h-lg  { font-size: clamp(1.95rem, 4.2vw, 3.3rem); }
.h-md  { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.h-sm  { font-size: clamp(1.15rem, 2vw, 1.42rem); font-weight: 400; letter-spacing: -.01em; }

.lead {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--muted);
  line-height: 1.8;
  max-width: 60ch;
}
.prose p { color: var(--muted); line-height: 1.85; margin-bottom: 1.1em; font-size: 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a:not(.btn) { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--petrol-hover); }
.prose h2 { margin: 1.7em 0 .6em; }
.prose h3 { margin: 1.45em 0 .45em; font-size: 1.22rem; font-weight: 400; }
.prose ul { margin: 0 0 1.3em; display: grid; gap: 11px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--muted); line-height: 1.75; }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--petrol);
}
.prose ol { margin: 0 0 1.3em; counter-reset: n; display: grid; gap: 11px; }
.prose ol li { position: relative; padding-left: 30px; color: var(--muted); counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .18em;
  font-size: .7rem; font-weight: 600; color: var(--petrol);
  width: 20px; height: 20px; border-radius: 50%; background: var(--petrol-soft);
  display: grid; place-items: center;
}

.sec-head { max-width: 660px; margin-bottom: 34px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { color: var(--muted); line-height: 1.8; margin-top: 16px; }

/* ── Sektions-Rhythmus ──────────────────────────────────────────────────── */

/* Gemessen wird die Naht, nicht der Einzelwert: an jeder Kante stehen der
   untere Innenabstand der einen und der obere der naechsten Sektion. Mit
   86 px je Seite waren das 173 px Leere zwischen zwei Abschnitten. Jetzt
   72 px je Seite, also 144 px auf dem Desktop und 88 px hochkant.
   Wer diese Werte anfasst, rechnet vorher mal zwei. */
.sec        { padding: clamp(44px, 4.6vw, 72px) 0; }
.sec-tight  { padding: clamp(32px, 3.4vw, 50px) 0; }

/* Zwei gleiche Flaechen hintereinander lesen sich als ein einziges Loch:
   die Kante fehlt, die das Auge sonst teilt. Dort noch einmal enger. */
.sec-paper + .sec-paper,
.sec-bg    + .sec-bg { padding-top: clamp(38px, 3.6vw, 56px); }
.sec-paper  { background: var(--paper); }
.sec-bg     { background: var(--bg); }
.sec-tint   { background: var(--petrol-tint); }
.sec-dark   { background: var(--ink-deep); color: #fff; }
.sec-dark .lead, .sec-dark .prose p { color: rgba(255, 255, 255, .66); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* Der Unterschied zum Standardknopf sind die vier Schattenlagen: innerer
   Lichtsaum oben, innere Kante unten, 1px-Ring, weicher Abwurf. Dazu ein
   Verlauf statt einer Flaechenfarbe und ein Lichtstreifen beim Ueberfahren.
   Angehoben wird ueber --lift, verschoben ueber --mag-x/--mag-y: beide
   liegen im selben transform und wuerden sich sonst gegenseitig loeschen. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 980px; border: 0; cursor: pointer;
  font-size: .86rem; font-weight: 500; letter-spacing: .015em;
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) translateY(var(--lift, 0px));
  transition:
    transform .5s var(--ease-out), background .32s var(--ease-out),
    box-shadow .38s var(--ease-out), color .3s;
  text-align: center; white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .4) 50%, transparent 66%);
  transform: translateX(-115%); opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --lift: -2px; }
  .btn:hover::before { animation: btnGlanz .9s var(--ease-out) forwards; }
}
.btn:active { --lift: 0px; transition-duration: .09s; }
@keyframes btnGlanz {
  0%   { transform: translateX(-115%); opacity: 0; }
  16%  { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

.btn-primary {
  background: linear-gradient(180deg, var(--petrol-hover) 0%, var(--petrol) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 28, 31, .38),
    0 0 0 1px rgba(0, 52, 58, .5),
    0 8px 22px -6px rgba(0, 74, 81, .5);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #01767f 0%, #015a62 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(0, 28, 31, .32),
    0 0 0 1px rgba(0, 52, 58, .44),
    0 14px 32px -8px rgba(0, 74, 81, .58);
}
.btn-primary:active {
  box-shadow: inset 0 2px 6px rgba(0, 28, 31, .4), 0 0 0 1px rgba(0, 52, 58, .5);
}

/* Linienknopf: auf hellem Grund traegt er eine weisse Flaeche, sonst
   verschwindet er neben dem Vollknopf. */
.btn-outline {
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  color: var(--petrol);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 6px 16px -8px rgba(0, 74, 81, .3);
}
.btn-outline:hover {
  background: linear-gradient(180deg, #fff 0%, var(--petrol-tint) 100%);
  box-shadow:
    inset 0 0 0 1px var(--petrol),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 24px -10px rgba(0, 74, 81, .4);
}
/* Ausnahmeliste: JEDE dunkle Flaeche muss hier stehen. Fehlt sie, steht der
   Knopf weiss auf weiss und ist unsichtbar. Aktuell nutzt keine dunkle
   Sektion den Linienknopf, die Regel haelt den Fall trotzdem ab. */
.sec-dark .btn-outline,
.band .btn-outline,
footer .btn-outline,
.hero .btn-outline,
.subhero .btn-outline {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.sec-dark .btn-outline:hover,
.band .btn-outline:hover,
footer .btn-outline:hover,
.hero .btn-outline:hover,
.subhero .btn-outline:hover { background: rgba(255, 255, 255, .22); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sec-dark .btn-outline, .band .btn-outline, footer .btn-outline,
  .hero .btn-outline, .subhero .btn-outline { background: rgba(255, 255, 255, .2); }
}

.btn-white {
  background: linear-gradient(180deg, #fff 0%, #eef4f4 100%);
  color: var(--petrol); font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 74, 81, .12),
    0 0 0 1px rgba(0, 24, 26, .12),
    0 8px 24px -8px rgba(0, 20, 22, .45);
}
.btn-white:hover {
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 74, 81, .1),
    0 0 0 1px rgba(0, 24, 26, .1),
    0 14px 34px -10px rgba(0, 20, 22, .55);
}

.btn-glass {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .4),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(0, 20, 22, .18),
    0 8px 22px -10px rgba(0, 20, 22, .5);
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-glass { background: rgba(20, 40, 40, .62); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--petrol); font-size: .84rem; font-weight: 500;
  transition: gap .22s var(--ease-out);
}
.link-arrow::after { content: "→"; transition: transform .22s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ── Navigation: Marke oben links, Pille getrennt daneben ───────────────── */

/* Die Wort-Bild-Marke steht frei in der oberen linken Ecke, die
   Navigationspille schwebt davon getrennt in der Mitte. Beide kennen
   dieselben zwei Zustaende, gesteuert ueber body.over-hero:
   1. ueber dem Hero-Medium: helle Marke ohne Kapsel, Pille als dunkles
      Liquid Glass mit heller Schrift
   2. ueber Inhalten: farbige Marke auf deckender Kapsel, deckende helle
      Pille mit dunkler Schrift
   Der Wechsel haengt am Hero, nicht an einer festen Scrollhoehe. Solange
   das Video zu sehen ist, bleibt das Glas. */

/* ── Marke, frei oben links ─────────────────────────────────────────────── */

.nav-corner {
  position: fixed; top: 15px; left: var(--marke-links); z-index: 210;
  display: flex; align-items: center; height: var(--nav-h);
  transition: top .35s var(--ease-out), opacity .25s;
}
.nav-corner:hover { opacity: .82; }
.nav-corner-inner { position: relative; display: flex; align-items: center; gap: var(--marke-lucke); }

/* Kapsel hinter der Marke. Ueber dem Hero liegt die Marke auf dem
   abgedunkelten Bild und traegt sich selbst. Sobald sie ueber den Inhalt
   wandert, steht sie sonst schnell auf Fliesstext oder auf einer dunklen
   Sektion. Ab da bekommt sie dieselbe Flaeche wie die Pille daneben.
   Die Kapsel ist ein ::before mit negativem inset, kein Innenabstand am
   Element: so bleibt die Marke beim Einblenden an ihrem Platz. */
.nav-corner-inner::before {
  content: ""; position: absolute; inset: -11px -16px; border-radius: 980px; z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95));
  box-shadow: inset 0 0 0 .5px var(--line), 0 10px 30px rgba(13, 22, 21, .14);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
body.over-hero .nav-corner-inner::before { opacity: 0; transform: scale(.94); }

/* Beide Fassungen jeder Marke liegen uebereinander, hell ueber dunkel.
   Absolut positionierte Kinder geben der Huelle keine Groesse, deshalb
   rechnet sie aus --marke-h. Die Faktoren stammen aus den Dateien:
   Bildmarke 1008.8 zu 927.2 (Breite = Hoehe x 1.088), Wortmarke
   2493.8 zu 184 (Breite = Hoehe x 13.554), und die Wortmarke steht auf
   44 Prozent der Bildmarkenhoehe. Wer --marke-h aendert, aendert alles
   andere mit; einzelne Pixelwerte gibt es hier nicht mehr. */
.nav-corner .mark {
  position: relative; flex: none;
  height: var(--marke-h); width: calc(var(--marke-h) * 1.088);
}
.nav-corner .mark img { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .45s var(--ease-out); }
.nav-corner .word {
  position: relative; display: block; flex: none;
  height: calc(var(--marke-h) * .44); width: calc(var(--marke-h) * .44 * 13.554);
}
.nav-corner .word img { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .45s var(--ease-out); }
.nav-corner .on-dark { opacity: 0; }
body.over-hero .nav-corner .on-dark { opacity: 1; }
body.over-hero .nav-corner .on-light { opacity: 0; }
/* Freistehend auf Foto braucht die Marke eine eigene Kante */
body.over-hero .nav-corner-inner { filter: drop-shadow(0 2px 10px rgba(0, 20, 22, .45)); }

/* ── Pille ──────────────────────────────────────────────────────────────── */

.nav-wrap {
  position: fixed; top: 15px; inset-inline: 0; z-index: 200;
  display: flex; justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
  transition: top .35s var(--ease-out);
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  height: var(--nav-h); padding: 0 8px;
  /* Riegel gegen die Marke: die mittig stehende Pille darf hoechstens so
     breit werden, wie zu beiden Seiten neben der Marke Platz ist. Ohne den
     Riegel waechst sie in die Marke hinein, sobald ein Menuepunkt dazukommt. */
  max-width: calc(100vw - 2 * (var(--marke-links) + var(--marke-gesamt) + 22px));
  border-radius: 980px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95));
  box-shadow: inset 0 0 0 .5px var(--line), 0 10px 30px rgba(13, 22, 21, .14);
  transition:
    background .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    height .3s var(--ease-out);
}

body.over-hero .nav {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, .13)),
    rgba(3, 30, 32, .32);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .38),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -14px 26px -14px rgba(255, 255, 255, .22),
    0 16px 44px rgba(0, 20, 22, .34);
}
/* Ohne backdrop-filter deckend fuellen, sonst wird die Schrift unlesbar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.over-hero .nav { background: rgba(3, 30, 32, .88); }
}

/* Offenes Mobilmenue: Pille und Marke stehen auf weisser Flaeche, also
   zurueck in den hellen Zustand. Sonst waere der Burger weiss auf weiss. */
body.over-hero.nav-open .nav {
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 .5px var(--line), 0 10px 30px rgba(13, 22, 21, .14);
}
body.over-hero.nav-open .nav-burger { color: var(--ink); }
body.over-hero.nav-open .nav-corner-inner { filter: none; }
body.over-hero.nav-open .nav-corner-inner::before { opacity: 1; transform: none; }
body.over-hero.nav-open .nav-corner .on-dark { opacity: 0; }
body.over-hero.nav-open .nav-corner .on-light { opacity: 1; }
body.over-hero.nav-open .nav-phone {
  color: #fff; background: var(--petrol);
  box-shadow: 0 4px 14px rgba(0, 74, 81, .3);
}

/* Beim Scrollen ruecken Marke und Pille leicht hoch, die Pille schrumpft */
body.is-scrolled .nav-wrap,
body.is-scrolled .nav-corner { top: 10px; }
body.is-scrolled .nav { height: 52px; }

.nav-links { position: relative; display: flex; height: 100%; }
.nav-links > li { display: flex; }
.nav-links > li > a, .nav-links > li > button {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 0 clamp(9px, .18rem + .55vw, 15px); height: 100%;
  background: none; border: 0; cursor: pointer;
  font-size: clamp(.74rem, .67rem + .19vw, .82rem); font-weight: 400; letter-spacing: .012em;
  color: var(--ink); opacity: .74;
  white-space: nowrap;
  transition: opacity .2s, color .35s var(--ease-out);
}
.nav-links > li > a:hover, .nav-links > li > button:hover,
.nav-links > li.open > button { opacity: 1; color: var(--petrol); }
.nav-links > li > a[aria-current="page"] { opacity: 1; color: var(--petrol); font-weight: 500; }

body.over-hero .nav-links > li > a,
body.over-hero .nav-links > li > button { color: #fff; opacity: .8; }
body.over-hero .nav-links > li > a:hover,
body.over-hero .nav-links > li > button:hover,
body.over-hero .nav-links > li.open > button { color: #fff; opacity: 1; }
body.over-hero .nav-links > li > a[aria-current="page"] { color: #fff; opacity: 1; }
body.over-hero .nav-burger { color: #fff; }

/* gleitende Pille unter dem Hover */
.nav-indicator {
  position: absolute; z-index: 1; top: 50%; left: 0; height: 36px; width: 0;
  transform: translateY(-50%) scale(.84); opacity: 0;
  border-radius: 980px;
  background: var(--petrol-soft);
  transition:
    left .4s var(--ease-spring), width .4s var(--ease-spring),
    opacity .26s ease, transform .3s var(--ease-spring), background .35s var(--ease-out);
}
.nav-links:hover .nav-indicator { opacity: 1; transform: translateY(-50%) scale(1); }
body.over-hero .nav-indicator {
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .16));
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.nav-caret { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .25s var(--ease-out); }
.nav-links > li.open .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.nav-drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(620px, calc(100vw - 40px));
  padding: 14px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: 22px;
  /* Ein Klappmenue schwebt ueber dem Inhalt, es ist keine Karte in der
     Flaeche. Hier traegt der Schatten die Ebene, nicht die Optik. */
  box-shadow: inset 0 0 0 1px var(--line), 0 26px 60px -18px rgba(0, 24, 26, .28);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease-out), transform .28s var(--ease-out), visibility .24s;
}
/* Das Menue der Bestattungsarten traegt zwoelf Punkte. Zweispaltig waere die
   Liste sechs Zeilen hoch und reichte auf einem 13-Zoll-Bildschirm bis unter
   die Faltkante. Drei Spalten halten sie bei vier Zeilen. Die Breite folgt
   den Spalten: 3 * 260px Textbreite plus Innenabstand. */
.nav-drop.nav-drop-3 {
  width: min(880px, calc(100vw - 40px));
  grid-template-columns: 1fr 1fr 1fr;
}
.nav-links > li.open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop a { display: block; padding: 11px 14px; border-radius: 14px; transition: background .18s; }
.nav-drop a:hover { background: var(--petrol-tint); }
.nav-drop b { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); }
.nav-drop span { display: block; font-size: .73rem; color: var(--muted-2); line-height: 1.5; margin-top: 2px; }

.nav-phone {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  margin-left: 6px;
  font-size: clamp(.73rem, .66rem + .19vw, .8rem); font-weight: 500; letter-spacing: .015em;
  color: #fff; padding: 9px clamp(12px, .2rem + .75vw, 18px); border-radius: 980px;
  background: var(--petrol);
  box-shadow: 0 4px 14px rgba(0, 74, 81, .3);
  transition: transform .18s, background .25s;
  white-space: nowrap;
}
.nav-phone:hover { transform: translateY(-1px); background: var(--petrol-hover); }
.nav-phone svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.over-hero .nav-phone {
  color: var(--petrol);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 20px rgba(0, 20, 22, .28);
}
body.over-hero .nav-phone:hover { background: #fff; }

.nav-burger {
  display: none; flex: none;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}
.nav-burger span { position: relative; display: block; width: 18px; height: 1.5px; background: currentColor; }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease-out);
}
.nav-burger span::before { transform: translateY(-6px); }
.nav-burger span::after  { transform: translateY(6px); }
body.nav-open .nav-burger span { background: transparent; }
body.nav-open .nav-burger span::before { transform: rotate(45deg); }
body.nav-open .nav-burger span::after  { transform: rotate(-45deg); }

/* Die Marke braucht die linke Seite fuer sich. Sobald die mittige Pille mit
   allen Punkten dort anstossen wuerde, uebernimmt der Burger und die Pille
   rueckt nach rechts. */
/* Zwischen 1240 und 1380 wuerde die mittige Pille mit voller Telefonnummer
   an die Marke stossen. Dort bleibt vom Knopf das Zeichen. */
@media (max-width: 1380px) {
  .nav-phone span { display: none; }
  .nav-phone { padding: 9px 11px; }
  .nav-phone svg { width: 15px; height: 15px; }
}
/* Darunter reicht der Platz fuer die Punkte nicht mehr: der Burger uebernimmt,
   die Pille rueckt nach rechts und die Marke behaelt die linke Seite. */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-wrap { justify-content: flex-end; }
  /* Der Riegel gilt nur fuer die mittig stehende Pille. Rechts angeschlagen
     kann sie die Marke nicht mehr erreichen, dort wuerde er sie nur unnoetig
     einschnueren. */
  .nav { padding: 0 6px; max-width: none; }
  .nav-phone span { display: inline; }
  .nav-phone { padding: 9px 17px; }
  .nav-phone svg { width: 13px; height: 13px; }
}
@media (max-width: 620px) {
  /* Ohne Wortmarke belegt die Marke nur noch die Bildmarke. Bliebe
     --marke-gesamt beim vollen Wert, reservierte der Riegel Platz fuer
     etwas, das gar nicht mehr da ist. */
  :root { --marke-gesamt: calc(var(--marke-h) * 1.088); }
  .nav-corner .word { display: none; }
  .nav-corner-inner::before { inset: -10px -13px; }
  .nav-phone { padding: 9px 13px; font-size: .74rem; }
}


/* Mobile-Menü: deckende Vollfläche */
.mobile-nav {
  position: fixed; inset: 0; z-index: 199;
  background: var(--paper);
  padding: calc(var(--nav-h) + 40px) var(--pad) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.mobile-nav > a, .mobile-nav details > summary {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.25rem; font-weight: 300; padding: 15px 0;
  border-bottom: .5px solid var(--line);
  cursor: pointer; list-style: none;
}
.mobile-nav details > summary::-webkit-details-marker { display: none; }
.mobile-nav details > summary::after { content: "+"; font-size: 1.3rem; color: var(--petrol); }
.mobile-nav details[open] > summary::after { content: "–"; }
.mobile-nav details ul { padding: 6px 0 14px; display: grid; gap: 2px; }
.mobile-nav details ul a { display: block; padding: 9px 0 9px 14px; font-size: .96rem; color: var(--muted); border-left: 1.5px solid var(--line); }
.mobile-nav details ul a:hover { color: var(--petrol); border-color: var(--petrol); }
.mn-foot { margin-top: 30px; font-size: .88rem; color: var(--muted); line-height: 1.8; }
.mn-foot a { color: var(--petrol); font-weight: 500; }

/* ── Hero: Startseite (Video) ───────────────────────────────────────────── */

/* Hero bleibt stehen, der Inhalt schiebt sich darüber. Die Sektionen bekommen
   dafür eine eigene Ebene (z-index 1) und einen deckenden Hintergrund. */
.hero {
  position: sticky; top: 0; z-index: 0;
  overflow: hidden;
  height: 100svh; min-height: 600px;
  display: flex; align-items: flex-end;
}
main > section, main > .band, main > footer { position: relative; z-index: 1; background: var(--paper); }
.hero + *, .subhero + * {
  border-radius: 30px 30px 0 0;
  margin-top: -30px;
  box-shadow: 0 -26px 60px rgba(0, 20, 22, .28);
}
@media (max-width: 700px) {
  .hero + *, .subhero + * { border-radius: 22px 22px 0 0; margin-top: -22px; }
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pflicht-Scrim: der Krokus-Clip ist sehr hell — ohne Abdunklung kein Kontrast.
   Oberste Ebene ist ein leichter Petrol-Schleier: er faerbt das Video in die
   Akzentfarbe und hebt zugleich den Kontrast zur weissen Schrift. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 74, 81, .22), rgba(0, 74, 81, .22)),
    linear-gradient(180deg, rgba(6, 28, 30, .34) 0%, rgba(6, 28, 30, .12) 32%, rgba(6, 28, 30, .58) 74%, rgba(6, 28, 30, .84) 100%),
    radial-gradient(ellipse 130% 90% at 30% 90%, rgba(1, 30, 32, .5), transparent 62%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 150px var(--pad) 104px;
  will-change: opacity;
}
/* Beim Scrollen hebt main.js jede Ebene einzeln an (Wegflug). */
.hero-inner > * { will-change: transform; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.03em; max-width: 16ch; }
.hero h1 em { font-style: normal; color: #fff; opacity: .78; }
.hero-p { color: rgba(255, 255, 255, .82); font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.8; max-width: 48ch; margin-top: 22px; }
.hero .btn-row { margin-top: 30px; }
.hero-super { color: rgba(255, 255, 255, .7); }

@media (max-width: 700px) { .hero-inner { padding-bottom: 70px; } }

/* ── Hero: Unterseiten ──────────────────────────────────────────────────── */

/* Unterseiten-Hero: klebt wie das Video-Hero, das Foto zoomt langsam heran,
   der Inhalt läuft gestaffelt ein. */
.subhero {
  position: sticky; top: 0; z-index: 0;
  overflow: hidden;
  background: var(--ink-deep);
  min-height: min(82svh, 720px);
  display: flex; align-items: flex-end;
}
.subhero-media { position: absolute; inset: 0; }
.subhero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .66;
  animation: subheroZoom 20s var(--ease-out) both;
}
@keyframes subheroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.subhero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 8% 108%, rgba(0, 74, 81, .68), transparent 68%),
    radial-gradient(ellipse 60% 50% at 92% -10%, rgba(0, 74, 81, .34), transparent 62%),
    linear-gradient(102deg, rgba(0, 24, 26, .9) 0%, rgba(0, 24, 26, .58) 52%, rgba(0, 24, 26, .3) 100%),
    linear-gradient(180deg, rgba(0, 24, 26, .55) 0%, transparent 26%, rgba(0, 24, 26, .35) 100%);
}

.subhero-inner {
  position: relative; z-index: 2; width: 100%;
  will-change: opacity;
  max-width: var(--wrap); margin: 0 auto;
  /* Unterkante: die Folgesektion schiebt sich mit -30px darueber. Ohne Zuschlag
     kleben die Buttons an der abgerundeten Kante. */
  padding: calc(var(--nav-h) + 78px) var(--pad) clamp(92px, 9vw, 128px);
}
.subhero h1 { color: #fff; max-width: 19ch; letter-spacing: -.028em; }
.subhero p { color: rgba(255, 255, 255, .8); margin-top: 22px; max-width: 56ch; line-height: 1.8; }
.subhero .btn-row { margin-top: 30px; }

/* Rechtstexte brauchen kein Vollbild-Hero */
.subhero-compact { min-height: auto; }
.subhero-compact .subhero-inner { padding-bottom: clamp(70px, 6vw, 90px); }

/* dünne Akzentlinie über der Dachzeile */
.subhero .eyebrow::before {
  transform-origin: left;
  animation: lineIn 1s var(--ease-out) both;
}
@keyframes lineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* gestaffelter Einlauf; beim Scrollen hebt main.js jede Ebene einzeln an
   (Wegflug) und entfernt dafuer die Animation, sobald sie durchgelaufen ist. */
.subhero-inner > * { animation: subheroIn .9s var(--ease-out) both; will-change: transform; }
.subhero-inner > :nth-child(1) { animation-delay: .05s; }
.subhero-inner > :nth-child(2) { animation-delay: .13s; }
.subhero-inner > :nth-child(3) { animation-delay: .21s; }
.subhero-inner > :nth-child(4) { animation-delay: .29s; }
@keyframes subheroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── Schnellzugriff-Band ────────────────────────────────────────────────── */

/* Die Trennlinien liegen nicht als Rahmen an den Kacheln, sondern mittig in
   der Spalte dazwischen. Nur so haben alle drei Felder denselben Innenabstand:
   Symbol und Pfeil sitzen in jeder Kachel buendig an der Spaltenkante, aussen
   auf der Satzkante der Seite, innen mit gleichem Abstand zur Linie. */
.quick { background: var(--paper); border-bottom: .5px solid var(--line); --qi-luft: clamp(20px, 2.4vw, 34px); }
.quick-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--qi-luft) * 2);
}
.qi {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px;
  padding: 26px 0;
  min-height: 108px;
}
/* Trennlinie mittig im Zwischenraum */
.qi + .qi::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--qi-luft) * -1); width: 1px;
  background: var(--line);
}
/* Die Hover-Flaeche reicht bis zur Linie, damit sie so breit wirkt wie die
   Spalte. isolation auf .qi haelt das z-index:-1 innerhalb der Kachel. */
.qi::after {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(var(--qi-luft) * -1);
  background: var(--petrol-tint); opacity: 0; transition: opacity .18s;
}
.qi:hover::after { opacity: 1; }
.qi-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--petrol-soft); display: grid; place-items: center; transition: transform .3s var(--ease-spring); }
.qi:hover .qi-ico { transform: scale(1.07); }
.qi-ico svg { width: 20px; height: 20px; stroke: var(--petrol); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qi.urgent .qi-ico { background: var(--petrol); }
.qi.urgent .qi-ico svg { stroke: #fff; }
.qi-txt { min-width: 0; }
.qi-txt h2, .qi-txt h3 { font-size: .92rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.qi-txt p { font-size: .79rem; color: var(--muted); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.qi-ch { flex: none; margin-left: auto; padding-left: 12px; color: var(--petrol); font-size: 1.15rem; line-height: 1; transition: transform .22s var(--ease-out); }
.qi:hover .qi-ch { transform: translateX(3px); }
@media (max-width: 780px) {
  .quick-inner { grid-template-columns: 1fr; column-gap: 0; }
  .qi { padding: 18px 0; min-height: 0; }
  .qi + .qi::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .qi::after { inset: 0 calc(var(--pad) * -1); }
}

/* ── Statement ──────────────────────────────────────────────────────────── */

.stmt { text-align: center; max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }
.stmt h2 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.16; letter-spacing: -.025em; max-width: 22ch; margin: 0 auto; }
.stmt p { color: var(--muted); line-height: 1.85; max-width: 56ch; margin: 26px auto 0; }
.stmt .sig { display: block; margin-top: 18px; font-size: .92rem; color: var(--muted-2); letter-spacing: .03em; }

/* ── Split (Bild + Text) ────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 64px); align-items: center; }
.split.reverse .split-media { order: 2; }
/* Ein Foto braucht keine Kante und keinen Schatten: die Innenlinie laege
   ohnehin unter dem Bild. Radius und Beschnitt reichen. */
.split-media { border-radius: 24px; overflow: clip; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.split-media:hover img { transform: scale(1.035); }
.split-media.tall img { aspect-ratio: 3 / 4; }
.split-body > .prose, .split-body h2 + p, .split-body h3 + p { margin-top: 18px; }
.split + .split { margin-top: clamp(42px, 5vw, 68px); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}

.ticks { margin-top: 26px; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--muted); line-height: 1.6; }
.ticks svg { flex: none; width: 17px; height: 17px; margin-top: 3px; stroke: var(--petrol); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Karten-Raster ──────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards.two  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .32s var(--ease-spring), box-shadow .32s;
}
.card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.card-img { height: 186px; overflow: hidden; background: var(--bg-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.055); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.02rem; font-weight: 500; letter-spacing: -.005em; }
.card-body p { color: var(--muted); font-size: .87rem; line-height: 1.68; margin-top: 9px; }
.card-body .link-arrow { margin-top: auto; padding-top: 15px; }
.card-price { margin-top: 12px; font-size: .84rem; font-weight: 500; color: var(--petrol); }
.card-tag {
  align-self: flex-start; margin-bottom: 11px;
  font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--petrol); background: var(--petrol-soft); padding: 5px 10px; border-radius: 980px;
}

/* Kompakte Textkarte ohne Bild */
.tile {
  background: var(--paper); border-radius: 20px; padding: 26px 24px 28px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--petrol-soft); display: grid; place-items: center; margin-bottom: 16px; }
.tile-ico svg { width: 20px; height: 20px; stroke: var(--petrol); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-size: 1rem; font-weight: 500; }
.tile p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin-top: 9px; }
.tile .link-arrow { margin-top: 14px; }

/* ── Listen-Layout für Leistungen ───────────────────────────────────────── */

.rows { border-top: .5px solid var(--line); }
.rows a, .rows > div {
  display: grid; grid-template-columns: 46px 1fr 130px 40px;
  align-items: center; gap: 22px;
  padding: 26px 0; border-bottom: .5px solid var(--line);
  transition: padding-left .3s var(--ease-out);
}
.rows a:hover { padding-left: 14px; }
.rows .idx { font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--petrol); }
.rows h3 { font-size: 1.16rem; font-weight: 400; letter-spacing: -.01em; }
.rows p { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-top: 4px; max-width: 62ch; }
.rows .thumb { width: 130px; height: 82px; border-radius: 12px; overflow: hidden; opacity: .62; filter: saturate(.62); transition: opacity .35s, filter .35s, transform .35s var(--ease-out); }
.rows .thumb img { width: 100%; height: 100%; object-fit: cover; }
.rows a:hover .thumb { opacity: 1; filter: none; transform: scale(1.03); }
.rows .go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s; }
.rows a:hover .go { background: var(--petrol); color: #fff; box-shadow: none; }
@media (max-width: 860px) {
  .rows a, .rows > div { grid-template-columns: 40px 1fr; gap: 6px 16px; padding: 20px 0; }
  .rows .thumb, .rows .go { display: none; }
}

/* ── Zahlenband ─────────────────────────────────────────────────────────── */

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.fig b { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 300; letter-spacing: -.03em; color: var(--petrol); line-height: 1; }
/* nur das Label, nicht der Zähler-<span> innerhalb von <b> */
.fig > span {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 11px;
  /* Lange Labels wie BESTATTUNGSFACHKRAFT sprengen sonst die Rasterspalte. */
  hyphens: auto; overflow-wrap: break-word;
}
/* minmax(0, 1fr) statt 1fr: ohne die Null nimmt die Spalte die min-content-Breite
   des laengsten Wortes an und schiebt das Raster ueber den Bildschirmrand. */
@media (max-width: 700px) {
  .figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 18px; }
}

/* ── Ablauf-Schritte mit Bewegtgrafik ───────────────────────────────────── */

.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-line {
  position: absolute; top: 118px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--petrol-mid), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease-out) .2s;
}
.steps-grid.in-view .step-line { transform: scaleX(1); }
/* .step ist bewusst auf .steps-grid gescopt: der Kostenkalkulator bringt eine
   eigene, gleichnamige Klasse mit (seine Schritte). Ohne Scoping würde diese
   Kartenoptik dort die Schritt-Überschriften am abgerundeten Rand abschneiden. */
.steps-grid .step {
  position: relative; z-index: 1;
  background: var(--paper); border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .32s var(--ease-spring), box-shadow .32s;
}
.steps-grid .step:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.step-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 22px 0; }
.step-no { font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: var(--petrol); font-weight: 500; }
.step-big { font-size: 2.4rem; font-weight: 200; line-height: .9; color: rgba(0, 74, 81, .15); }
.illu { margin: 15px 22px; height: 126px; border-radius: 16px; background: linear-gradient(180deg, var(--petrol-soft), var(--paper)); overflow: hidden; position: relative; }
.illu-form { position: absolute; inset: 20px; display: flex; flex-direction: column; gap: 9px; }
.illu-line { height: 9px; border-radius: 4px; background: rgba(0, 74, 81, .14); width: 0; animation: lineGrow 3s var(--ease-out) infinite; }
.illu-line:nth-child(1) { --w: 78%; animation-delay: 0s; }
.illu-line:nth-child(2) { --w: 58%; animation-delay: .2s; }
.illu-line:nth-child(3) { --w: 88%; animation-delay: .4s; background: rgba(0, 74, 81, .3); }
.illu-line:nth-child(4) { --w: 44%; animation-delay: .6s; }
@keyframes lineGrow { 0%, 10% { width: 0; } 45%, 80% { width: var(--w); } 96%, 100% { width: 0; } }
.illu-caret { position: absolute; left: 20px; bottom: 18px; width: 2px; height: 13px; background: var(--petrol); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.illu-ring { position: absolute; inset: 0; display: grid; place-items: center; }
.ring-c { stroke-dasharray: 264; stroke-dashoffset: 264; animation: ringDraw 3.6s ease-in-out infinite; }
@keyframes ringDraw { 0% { stroke-dashoffset: 264; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -264; } }
.ring-leaf { transform-origin: center; animation: leafBob 3.2s ease-in-out infinite; }
@keyframes leafBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } }
.illu-tl { position: absolute; inset: 22px; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.tl-row { display: flex; align-items: center; gap: 11px; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: tlIn .7s var(--ease-out) forwards; }
.tl-row:nth-child(1) { animation-delay: .15s; }
.tl-row:nth-child(2) { animation-delay: .5s; }
.tl-row:nth-child(3) { animation-delay: .85s; }
.tl-row i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); flex: none; }
.tl-row i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 13px; background: var(--line-strong); transform: translateX(-50%); }
.tl-row:last-child i::after { display: none; }
@keyframes tlIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.step-body { padding: 2px 22px 24px; }
.step-body h3 { font-size: 1.04rem; font-weight: 500; margin-bottom: 8px; }
.step-body p { color: var(--muted); font-size: .87rem; line-height: 1.7; }
.step-foot { margin-top: 16px; padding-top: 13px; border-top: .5px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.step-foot a { color: var(--petrol); font-weight: 500; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } .step-line { display: none; } }

/* ── Vollbild-Band mit Parallax ─────────────────────────────────────────── */

.band { position: relative; overflow: hidden; }
.band-media { position: absolute; inset: -10% 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 24, 26, .58), rgba(0, 24, 26, .8)); }
.band-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--pad); text-align: center; color: #fff; }
.band-inner h2 { font-size: clamp(1.8rem, 4vw, 3.3rem); line-height: 1.16; }
.band-inner p { color: rgba(255, 255, 255, .76); margin: 20px auto 0; max-width: 52ch; line-height: 1.8; }
.band-inner .btn-row { justify-content: center; margin-top: 30px; }

/* ── Galerie ────────────────────────────────────────────────────────────── */

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gal-item { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gal-item:hover img { transform: scale(1.06); }
.gal-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 24, 26, .04) 32%, rgba(0, 24, 26, .78)); }
.gal-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.gal-cap b { display: block; font-size: .96rem; font-weight: 500; }
.gal-cap span { display: block; font-size: .73rem; color: rgba(255, 255, 255, .76); margin-top: 2px; line-height: 1.45; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .gallery { grid-template-columns: 1fr; } .gal-item { aspect-ratio: 16 / 10; } }

/* ── Team ───────────────────────────────────────────────────────────────── */

.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.person { background: var(--paper); border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 28%; }
.person-body { padding: 26px 26px 28px; }
.person-body h3 { font-size: 1.2rem; font-weight: 400; }
.person-role { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin-top: 6px; }
.person-body p { color: var(--muted); font-size: .92rem; line-height: 1.75; margin-top: 14px; }
.person-contact { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; }
.person-contact a { color: var(--petrol); font-weight: 500; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }

/* ── FAQ (details/summary) ──────────────────────────────────────────────── */

.faq { border-top: .5px solid var(--line); }
.faq details { border-bottom: .5px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 400; letter-spacing: -.005em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--petrol); }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 8px;
  border-right: 1.6px solid var(--petrol); border-bottom: 1.6px solid var(--petrol);
  transform: rotate(45deg); transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-a { padding: 0 46px 24px 0; color: var(--muted); line-height: 1.85; font-size: .95rem; }
.faq-a p + p { margin-top: 1em; }
.faq-a a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
.faq-a ul { margin-top: .8em; display: grid; gap: 9px; }
.faq-a ul li { position: relative; padding-left: 20px; }
.faq-a ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--petrol); }

/* ── Preistabelle / Pakete ──────────────────────────────────────────────── */

.pricecard {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: 22px; padding: 28px 26px 30px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.pricecard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pricecard.featured { box-shadow: inset 0 0 0 1.5px var(--petrol); }
.pricecard h3 { font-size: 1.1rem; font-weight: 500; }
.pricecard .price { margin-top: 14px; font-size: 1.9rem; font-weight: 300; letter-spacing: -.03em; color: var(--petrol); }
.pricecard .price small { display: block; font-size: .72rem; color: var(--muted-2); letter-spacing: 0; margin-top: 4px; font-weight: 400; }
.pricecard ul { margin: 20px 0 24px; display: grid; gap: 10px; }
.pricecard ul li { position: relative; padding-left: 22px; font-size: .87rem; color: var(--muted); line-height: 1.6; }
.pricecard ul li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--petrol); }
.pricecard .btn { margin-top: auto; }

.note {
  font-size: .84rem; color: var(--muted); line-height: 1.75;
  padding: 16px 20px; border-left: 3px solid var(--line-strong);
  background: var(--bg); border-radius: 0 14px 14px 0;
}
.note strong { color: var(--ink); font-weight: 500; }

/* ── Kontakt / Formular ─────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(34px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.infocard { background: var(--paper); border-radius: 22px; padding: 28px 26px; box-shadow: inset 0 0 0 1px var(--line); }
.infocard + .infocard { margin-top: 16px; }
.infocard h3 { font-size: 1.05rem; font-weight: 500; }
.infocard .loc-tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin-bottom: 8px; }
.infocard dl { margin-top: 16px; display: grid; gap: 0; }
.infocard dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding-top: 13px; }
.infocard dd { font-size: .96rem; padding-bottom: 13px; border-bottom: .5px solid var(--line); }
.infocard dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.infocard dd a { color: var(--petrol); font-weight: 500; }

.form { background: var(--paper); border-radius: 22px; padding: clamp(24px, 3vw, 34px); box-shadow: inset 0 0 0 1px var(--line); }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 16px; font-weight: 300; color: var(--ink);
  background: var(--bg); border: 1px solid transparent; border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.form-row textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--petrol); background: var(--paper);
}
.form-row [aria-invalid="true"] { border-color: #b3261e; background: #fdf3f2; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-two { grid-template-columns: 1fr; } }
.form-consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 20px; }
.form-consent input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--petrol); }
.form-consent label { font-size: .82rem; color: var(--muted); line-height: 1.6; text-transform: none; letter-spacing: 0; margin: 0; }
.form-consent a { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }
.form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: .88rem; line-height: 1.6; min-height: 1.4em; }
.form-status.ok { color: var(--petrol); }
.form-status.error { color: #b3261e; }
.form-hint { font-size: .78rem; color: var(--muted-2); line-height: 1.6; margin-top: 14px; }

/* ── Regionen-Chips ─────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips a {
  font-size: .82rem; padding: 9px 17px; border-radius: 980px;
  color: var(--petrol); background: var(--petrol-soft);
  transition: background .2s, transform .18s;
}
.chips a:hover { background: var(--petrol); color: #fff; transform: translateY(-1px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer { position: relative; z-index: 1; background: var(--ink-deep); color: rgba(255, 255, 255, .58); }
.foot-top { max-width: var(--wrap); margin: 0 auto; padding: clamp(44px, 5vw, 62px) var(--pad) 34px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.foot-brand img { height: 46px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: .86rem; line-height: 1.8; max-width: 34ch; }
.foot-col h3 { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: 15px; font-weight: 500; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { font-size: .86rem; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
  max-width: var(--wrap); margin: 0 auto; padding: 20px var(--pad) 34px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: .78rem;
}
.foot-bottom a:hover { color: #fff; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }

/* ── Kontakt-Widget unten rechts ────────────────────────────────────────── */

.cw { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; }
.cw-fab {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 9px 27px 9px 9px; cursor: pointer; border: 0;
  border-radius: 980px; color: #fff; font-size: .97rem; font-weight: 500;
  background: var(--petrol);
  box-shadow: 0 10px 30px rgba(0, 74, 81, .42);
  transition: transform .2s, box-shadow .25s, background .25s;
}
.cw-fab:hover { transform: translateY(-2px); background: var(--petrol-hover); box-shadow: 0 14px 40px rgba(0, 74, 81, .5); }
.cw-ava-wrap { position: relative; flex: none; }
.cw-ava { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.cw-dot { position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2.5px solid var(--petrol); animation: cwPulse 2.4s infinite; }
@keyframes cwPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.cw-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(390px, calc(100vw - 32px));
  background: var(--paper); border-radius: 20px;
  box-shadow: inset 0 0 0 .5px var(--line), 0 26px 70px rgba(13, 22, 21, .26);
  padding: 28px 26px 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px) scale(.98); transform-origin: bottom right;
  transition: opacity .26s ease, transform .3s var(--ease-out), visibility .26s;
}
.cw.open .cw-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.cw-close {
  position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--line-strong); cursor: pointer; color: var(--ink);
  display: grid; place-items: center; transition: background .18s;
}
.cw-close:hover { background: var(--bg); }
.cw-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.cw-head { padding-right: 42px; margin-bottom: 20px; }
.cw-head h2 { font-size: 1.28rem; font-weight: 500; letter-spacing: -.01em; }
.cw-head p { font-size: .84rem; color: var(--muted); line-height: 1.6; margin-top: 11px; }
.cw-opt { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-top: .5px solid var(--line); }
.cw-opt:first-of-type { border-top: none; }
.cw-opt:hover h3 { text-decoration: underline; }
.cw-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--petrol-soft); display: grid; place-items: center; }
.cw-ico svg { width: 20px; height: 20px; stroke: var(--petrol); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cw-ico.wa svg { stroke: none; fill: var(--petrol); }
.cw-txt { flex: 1; min-width: 0; }
.cw-txt h3 { font-size: .95rem; font-weight: 500; }
.cw-txt p { font-size: .77rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.cw-chev { flex: none; color: var(--muted-2); }
.cw-chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .cw { right: 14px; bottom: 14px; } .cw-fab-txt { display: none; } .cw-fab { padding: 8px; } }

/* ── Lichtschein am Zeiger ──────────────────────────────────────────────── */

/* Karten heben sich nur noch ueber die Linie ab. Damit sie beim Ueberfahren
   trotzdem antworten, zieht ein weicher Schein dem Zeiger nach. Die Position
   setzt main.js in --mx/--my, das Bild braucht kein zusaetzliches Element:
   es liegt auf ::after hinter dem Inhalt. */
.card, .tile, .steps-grid .step, .pricecard { position: relative; overflow: hidden; }
.card::after, .tile::after, .steps-grid .step::after, .pricecard::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 300px; height: 300px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 74, 81, .16), transparent 68%);
  filter: blur(16px);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::after, .tile:hover::after,
  .steps-grid .step:hover::after, .pricecard:hover::after { opacity: 1; }
}
/* Ohne das liegt der Inhalt unter dem Schein */
.card > *, .tile > *, .steps-grid .step > *, .pricecard > * { position: relative; z-index: 1; }

/* ── Bewegter Grund auf dunkler Flaeche ─────────────────────────────────── */

/* Drei weichgezeichnete Kreise driften im screen-Modus. Das braucht einen
   dunklen Grund, auf hellem Papier passiert nichts. Farben kommen aus der
   Petrol-Reihe, es kommt keine zweite Akzentfarbe dazu. */
.sec-dark { position: relative; overflow: clip; }
/* Der Inhalt liegt ueber den Wolken, die Wolken selbst nicht. */
.sec-dark > *:not(.mesh) { position: relative; z-index: 1; }
.mesh {
  position: absolute; inset: -20%; z-index: 0;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
  pointer-events: none;
}
.mesh i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.mesh i:nth-child(1) { width: 46vw; height: 46vw; left: -6%;  top: -8%;    background: #056d75; animation: mesh1 24s ease-in-out infinite; }
.mesh i:nth-child(2) { width: 36vw; height: 36vw; right: 2%;  top: 4%;     background: #01353a; animation: mesh2 28s ease-in-out infinite; }
.mesh i:nth-child(3) { width: 42vw; height: 42vw; left: 28%;  bottom: -18%; background: #04565c; animation: mesh3 32s ease-in-out infinite; }
@keyframes mesh1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, 7%) scale(1.14); } }
@keyframes mesh2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-11%, 10%) scale(1.2); } }
@keyframes mesh3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7%, -9%) scale(.9); } }

/* ── Scroll-Reveals ─────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ── Sparbetrieb ────────────────────────────────────────────────────────── */

/* main.js setzt html.sparsam bei Datensparmodus, langsamer Verbindung, wenig
   Speicher oder wenigen Kernen. Dort faellt jeder backdrop-filter weg. Weil
   das Glas fast immer auf Pseudoelementen sitzt, muss der Selektor
   *, ::before und ::after treffen. Ohne Weichzeichner traegt Glas nichts
   mehr, also brauchen Leiste, Marke und Knoepfe eine deckende Flaeche. */
html.sparsam *,
html.sparsam *::before,
html.sparsam *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.sparsam body.over-hero .nav { background: rgba(3, 30, 32, .9); }
html.sparsam .nav-corner-inner::before { background: #fff; }
html.sparsam .nav-drop { background: #fff; }
html.sparsam .btn-glass { background: rgba(20, 40, 40, .68); }
html.sparsam .sec-dark .btn-outline,
html.sparsam .band .btn-outline,
html.sparsam footer .btn-outline,
html.sparsam .hero .btn-outline,
html.sparsam .subhero .btn-outline { background: rgba(255, 255, 255, .2); }
html.sparsam .mesh { filter: blur(30px); }
html.sparsam .mesh i { animation: none; }
html.sparsam .card::after, html.sparsam .tile::after,
html.sparsam .steps-grid .step::after, html.sparsam .pricecard::after { display: none; }
html.sparsam .subhero-media img { animation: none; }
html.sparsam .btn { will-change: auto; }

/* ── Bewegung aus, wenn der Nutzer das so eingestellt hat ───────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .subhero-inner > *, .subhero-media img, .subhero .eyebrow::before {
    opacity: 1 !important; transform: none !important;
  }
  .hero-inner, .hero-inner > * { opacity: 1 !important; transform: none !important; }
  .step-line { transform: scaleX(1) !important; }
  .illu-line { width: var(--w) !important; }
  .tl-row { opacity: 1 !important; }
  [data-parallax] { transform: none !important; }
  .nav-indicator { display: none; }
  .mesh i { animation: none !important; }
  .card::after, .tile::after, .steps-grid .step::after, .pricecard::after { display: none; }
  .btn { transform: none !important; }
  .btn::before { display: none; }
}

/* ── Druck ──────────────────────────────────────────────────────────────── */

@media print {
  .nav-wrap, .nav-corner, .mobile-nav, .cw, .hero-bg { display: none !important; }
  body { background: #fff; }
  .sec { padding: 20px 0; }
}