/* ═══════════════════════════════════════════════════════════════════════════
   Ramsaier, religiöse Bestattungsseiten: gemeinsames Design-System
   Aufbau nach ruhrfrieden.de (Pill-Nav, haftender Kopf, Sektionsrhythmus).
   Farben kommen AUSSCHLIESSLICH aus theme.css der jeweiligen Seite:
   hinduistische-bestattung.de (Safran, Kurkuma, Kumkum auf Elfenbein)
   buddhistische-bestattung.de (Ocker, Robenrot, Lotus auf Papier, Indigo).
   Keine Hexwerte in Komponenten.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.4, .64, 1);

  --wrap:         1160px;
  --wrap-narrow:  760px;
  --pad:          24px;
  --nav-h:        58px;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --line:         rgb(var(--akzent-rgb) / .15);
  --line-strong:  rgb(var(--akzent-rgb) / .28);

  /* Die Marke oben links: Symbol + zweizeilige Wortmarke. Eine Groesse
     fuehrt (--marke-h), alles andere leitet sich ab. --marke-wort ist das
     Verhaeltnis Breite zu Hoehe der Wortmarke, gemessen im Browser und in
     theme.css je Seite gesetzt (die Titel sind verschieden lang). */
  --marke-h:      clamp(30px, .95rem + 1.05vw, 40px);
  --marke-lucke:  clamp(9px, .3rem + .35vw, 13px);
  --marke-links:  clamp(16px, .4rem + 1.3vw, 34px);
  --marke-gesamt: calc(var(--marke-h) + var(--marke-lucke) + var(--marke-h) * var(--marke-wort, 5.2));
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Nicht auf body: dort wird body zum Scroll-Container und sticky versagt. */
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  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; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--akzent); 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(--akzent); 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 ─────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex; align-items: center; gap: clamp(12px, 1.1vw, 17px);
  font-size: clamp(.72rem, .68rem + .15vw, .8rem); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; flex: none; width: clamp(34px, 3vw, 54px); height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.eyebrow-light { color: rgba(255, 255, 255, .78); }
.center .eyebrow, .stmt .eyebrow { justify-content: center; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; line-height: 1.1; text-wrap: balance; }
h4 { font-family: var(--sans); }

.h-xl { font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; }
.h-lg { font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
.h-md { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.h-sm { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }

.lead { font-size: clamp(1rem, 1.25vw, 1.1rem); color: var(--muted); line-height: 1.8; max-width: 62ch; }

.prose p { color: var(--muted); line-height: 1.85; margin-bottom: 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose em { font-style: italic; }
.prose a:not(.btn) { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 1.6em 0 .5em; }
.prose h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin: 1.5em 0 .4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.3em; display: grid; gap: 10px; }
.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(--akzent);
}
.prose ol { margin: 0 0 1.3em; counter-reset: n; display: grid; gap: 11px; }
.prose ol li { position: relative; padding-left: 32px; color: var(--muted); counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .2em;
  font-size: .7rem; font-weight: 600; color: var(--akzent);
  width: 21px; height: 21px; border-radius: 50%; background: var(--akzent-soft);
  display: grid; place-items: center;
}

.sec-head { max-width: 680px; margin-bottom: clamp(30px, 3.4vw, 44px); }
.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; }
.sec-dark .sec-head p { color: rgba(255, 255, 255, .7); }

/* ── Sektions-Rhythmus: Naht 144 px Desktop, 88 px hochkant ─────────────── */

.sec       { padding: clamp(44px, 4.6vw, 72px) 0; }
.sec-tight { padding: clamp(32px, 3.4vw, 50px) 0; }
.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(--akzent-tint); }
.sec-dark  { background: var(--ink-deep); color: #fff; }
.sec-dark .lead, .sec-dark .prose p { color: rgba(255, 255, 255, .7); }
.sec-dark .eyebrow { color: var(--gold); }

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

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 27px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--sans); 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 svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.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, .42) 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(--akzent-hover) 0%, var(--akzent) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgb(var(--ink-rgb) / .34),
    0 0 0 1px rgb(var(--akzent-rgb) / .55),
    0 8px 22px -6px rgb(var(--akzent-rgb) / .5);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--akzent-hover) 0%, var(--akzent-hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgb(var(--ink-rgb) / .3),
    0 0 0 1px rgb(var(--akzent-rgb) / .5),
    0 14px 32px -8px rgb(var(--akzent-rgb) / .58);
}

.btn-outline {
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -8px rgb(var(--akzent-rgb) / .3);
}
.btn-outline:hover {
  background: linear-gradient(180deg, #fff 0%, var(--akzent-tint) 100%);
  box-shadow: inset 0 0 0 1px var(--akzent), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -10px rgb(var(--akzent-rgb) / .4);
}
/* Ausnahmeliste: JEDE dunkle Flaeche muss hier stehen, sonst steht der
   Linienknopf weiss auf weiss. (.buehne, .band, .karte-sec sind dunkel.) */
.sec-dark .btn-outline, .band .btn-outline, footer .btn-outline,
.hero .btn-outline, .subhero .btn-outline, .buehne .btn-outline, .kontakt-dunkel .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, .32), 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, .buehne .btn-outline:hover,
.kontakt-dunkel .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, .buehne .btn-outline, .kontakt-dunkel .btn-outline { background: rgba(255, 255, 255, .2); }
}

.btn-white {
  background: linear-gradient(180deg, #fff 0%, var(--akzent-tint) 100%);
  color: var(--akzent-deep); font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(var(--akzent-rgb) / .14), 0 0 0 1px rgb(var(--ink-rgb) / .12), 0 8px 24px -8px rgb(var(--ink-rgb) / .5);
}
.btn-white:hover { background: #fff; }

.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, .42), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgb(var(--ink-rgb) / .2), 0 8px 22px -10px rgb(var(--ink-rgb) / .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: rgb(var(--ink-rgb) / .62); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row, .btn-row.center { justify-content: center; }

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

/* ── Navigation: Marke oben links, Pille mittig ─────────────────────────── */

/* Zwei Zustaende ueber body.over-hero: ueber dem Kopfbild helle Marke ohne
   Kapsel und dunkles Glas in der Pille; ueber Inhalt deckende Kapsel und
   deckende helle Pille. Der Wechsel haengt an der Kante der naechsten
   Sektion, nicht am Scrollweg (main.js §1b). */
.nav-corner {
  position: fixed; top: 15px; left: var(--marke-links); z-index: 210;
  display: flex; align-items: center; height: var(--nav-h);
  color: var(--ink);
  transition: top .35s var(--ease-out), opacity .25s;
}
.nav-corner:hover { opacity: .85; }
.nav-corner-inner { position: relative; display: flex; align-items: center; gap: var(--marke-lucke); }
.nav-corner-inner::before {
  content: ""; position: absolute; inset: -9px -18px -9px -12px; border-radius: 999px; 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 rgb(var(--ink-rgb) / .14);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
body.over-hero .nav-corner-inner::before { opacity: 0; transform: scale(.94); }
body.over-hero .nav-corner { color: #fff; }
body.over-hero .nav-corner-inner { filter: drop-shadow(0 2px 10px rgb(var(--ink-rgb) / .5)); }

.nav-corner .mark { flex: none; width: var(--marke-h); height: var(--marke-h); color: var(--akzent); transition: color .45s var(--ease-out); }
.nav-corner .mark svg { width: 100%; height: 100%; }
body.over-hero .nav-corner .mark { color: var(--gold); }
.nav-corner .word {
  display: flex; flex-direction: column; justify-content: center; flex: none;
  width: calc(var(--marke-h) * var(--marke-wort, 5.2));
  line-height: 1; white-space: nowrap;
}
.nav-corner .word b {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.005em;
  font-size: calc(var(--marke-h) * .56);
}
.nav-corner .word small {
  font-size: calc(var(--marke-h) * .235); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  margin-top: calc(var(--marke-h) * .1); opacity: .72;
}

.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;
  max-width: calc(100vw - 2 * (var(--marke-links) + var(--marke-gesamt) + 22px));
  border-radius: 999px;
  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 rgb(var(--ink-rgb) / .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)),
    rgb(var(--ink-rgb) / .34);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -14px 26px -14px rgba(255, 255, 255, .2), 0 16px 44px rgb(var(--ink-rgb) / .34);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.over-hero .nav { background: rgb(var(--ink-rgb) / .88); }
}
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 rgb(var(--ink-rgb) / .14);
}
body.over-hero.nav-open .nav-burger { color: var(--ink); }
body.over-hero.nav-open .nav-corner { color: var(--ink); }
body.over-hero.nav-open .nav-corner .mark { color: var(--akzent); }
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-phone { color: #fff; background: var(--akzent); }

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 {
  position: relative; z-index: 2; display: flex; align-items: center;
  padding: 0 clamp(9px, .18rem + .55vw, 15px); height: 100%;
  font-size: clamp(.74rem, .67rem + .19vw, .82rem); font-weight: 400; letter-spacing: .012em;
  color: var(--ink); opacity: .76; white-space: nowrap;
  transition: opacity .2s, color .35s var(--ease-out);
}
.nav-links > li > a:hover { opacity: 1; color: var(--akzent); }
.nav-links > li > a[aria-current="page"] { opacity: 1; color: var(--akzent); font-weight: 500; }
body.over-hero .nav-links > li > a { color: #fff; opacity: .84; }
body.over-hero .nav-links > li > a:hover, body.over-hero .nav-links > li > a[aria-current="page"] { color: #fff; opacity: 1; }
body.over-hero .nav-burger { color: #fff; }

.nav-indicator {
  position: absolute; z-index: 1; top: 50%; left: 0; height: 36px; width: 0;
  transform: translateY(-50%) scale(.84); opacity: 0; border-radius: 999px;
  background: var(--akzent-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-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: 999px;
  background: var(--akzent); box-shadow: 0 4px 14px rgb(var(--akzent-rgb) / .32);
  transition: transform .18s, background .25s; white-space: nowrap;
}
.nav-phone:hover { transform: translateY(-1px); background: var(--akzent-hover); }
.nav-phone svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.over-hero .nav-phone {
  color: var(--akzent-deep);
  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 rgb(var(--ink-rgb) / .28);
}

.nav-burger { display: none; flex: none; width: 44px; height: 44px; 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); }

/* Stufen: erst verliert die Telefonnummer ihren Text, dann uebernimmt der
   Burger. Werte per Sweep 500 bis 2560 px geprueft (Luecke >= 40 px). */
@media (max-width: 1320px) {
  .nav-phone span { display: none; }
  .nav-phone { padding: 9px 11px; }
  .nav-phone svg { width: 15px; height: 15px; }
}
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-wrap { justify-content: flex-end; }
  .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: 640px) {
  :root { --marke-gesamt: var(--marke-h); }
  .nav-corner .word { display: none; }
  .nav-corner-inner::before { inset: -9px; }
  .nav-phone { padding: 9px 14px; font-size: .74rem; }
}
@media (max-width: 360px) { .nav-phone span { display: none; } .nav-phone { padding: 9px 11px; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 199; background: var(--paper);
  padding: calc(var(--nav-h) + 44px) 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 {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 1.55rem; font-weight: 500; padding: 13px 0;
  border-bottom: .5px solid var(--line);
}
.mobile-nav > a::after { content: "→"; font-family: var(--sans); font-size: 1rem; color: var(--akzent); }
.mn-foot { margin-top: 30px; font-size: .9rem; color: var(--muted); line-height: 1.9; }
.mn-foot a { color: var(--akzent); font-weight: 500; }

/* ── Kopfbereich Startseite ─────────────────────────────────────────────── */

.hero {
  /* Waechst mit dem Inhalt (320 x 640 px). Ein hoher Kopf rastet
     unterkantenbuendig ein, --kopf-h misst main.js. */
  position: sticky; top: min(0px, calc(100svh - var(--kopf-h, 100svh))); z-index: 0; overflow: hidden;
  min-height: max(100svh, 560px);
  display: flex; align-items: flex-end;
  background-color: var(--ink-deep);
}
/* Hochkant und niedrig haftet der Kopf nicht, sonst ist sein unterer
   Teil unerreichbar (Designstandards §3). */
@media (max-height: 599px) { .hero, .subhero { position: relative; } }

main > section, main > .band { position: relative; z-index: 1; background-color: var(--paper); }
/* Footer und dunkle Flaechen tragen ihre eigene Farbe (Nav-Messung, §5). */
main > .band, main > .buehne { background-color: var(--ink-deep); }
.hero + *, .subhero + * {
  border-radius: 30px 30px 0 0; margin-top: -30px;
  box-shadow: 0 -24px 60px rgb(var(--ink-rgb) / .2);
}
@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-Schleier, asymmetrisch: traegt die Textspalte links unten,
   oeffnet sich nach rechts oben. Aussen >= .6, Mitte >= .18. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgb(var(--ink-rgb) / .2), rgb(var(--ink-rgb) / .2)),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .5) 0%, rgb(var(--ink-rgb) / .12) 30%, rgb(var(--ink-rgb) / .6) 74%, rgb(var(--ink-rgb) / .88) 100%),
    linear-gradient(90deg, rgb(var(--ink-rgb) / .62) 0%, rgb(var(--ink-rgb) / .2) 55%, transparent 100%);
}
.hero-inner {
  position: relative; z-index: 3; width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 150px var(--pad) clamp(96px, 9vw, 120px);
  display: flex; flex-direction: column;
  will-change: opacity;
}
.hero-inner > * { will-change: transform; }
.hero h1 { color: #fff; font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -.02em; max-width: 15ch; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero-p { color: rgba(255, 255, 255, .86); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.8; max-width: 50ch; margin-top: 22px; }
.hero .btn-row { margin-top: 30px; }
.hero-vertrauen {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.hero-vertrauen span { display: inline-flex; align-items: center; gap: 8px; }
.hero-vertrauen span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
@media (max-width: 700px) {
  .hero-inner { padding-bottom: 72px; min-height: 100%; justify-content: flex-end; }
  .hero-vertrauen { font-size: .68rem; }
}

/* Aura-Kopf (ohne Film): Foto sehr gedaempft plus driftende Farbwolken */
.hero-aura .hero-bg { opacity: .55; }
.aura { position: absolute; inset: -18%; z-index: 1; filter: blur(94px); opacity: .7; mix-blend-mode: screen; pointer-events: none; }
.aura i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.aura i:nth-child(1) { width: 52vw; height: 52vw; left: -8%; top: 8%; background: var(--aura-1); animation: aura1 9s ease-in-out infinite; }
.aura i:nth-child(2) { width: 40vw; height: 40vw; right: -2%; top: -6%; background: var(--aura-2); animation: aura2 10.5s ease-in-out infinite; }
.aura i:nth-child(3) { width: 44vw; height: 44vw; left: 30%; bottom: -16%; background: var(--aura-3); animation: aura3 8.5s ease-in-out infinite; }
@keyframes aura1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, 6%) scale(1.14); } }
@keyframes aura2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, 9%) scale(1.2); } }
@keyframes aura3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -9%) scale(.9); } }

/* ── Unterseiten-Kopf ───────────────────────────────────────────────────── */

.subhero {
  position: sticky; top: min(0px, calc(100svh - var(--kopf-h, 100svh))); z-index: 0;
  overflow: clip; background-color: var(--ink-deep);
  min-height: min(76svh, 680px); display: flex; align-items: flex-end;
}
.subhero-media { position: absolute; inset: 0; }
.subhero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; 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; z-index: 1;
  background:
    radial-gradient(ellipse 85% 75% at 8% 108%, rgb(var(--akzent-rgb) / .5), transparent 68%),
    linear-gradient(100deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .58) 52%, rgb(var(--ink-rgb) / .28) 100%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .55) 0%, transparent 26%, rgb(var(--ink-rgb) / .38) 100%);
}
.subhero .aura { z-index: 1; opacity: .5; }
.subhero-inner {
  position: relative; z-index: 3; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(56px, 7vw, 104px)) var(--pad) clamp(92px, 9vw, 128px);
  will-change: opacity;
}
.subhero h1 { color: #fff; font-size: clamp(2.5rem, 5.2vw, 4.4rem); max-width: 17ch; }
.subhero p { color: rgba(255, 255, 255, .84); margin-top: 22px; max-width: 58ch; line-height: 1.8; }
.subhero .btn-row { margin-top: 30px; }
.subhero-compact { min-height: auto; }
.subhero-compact .subhero-inner { padding-bottom: clamp(70px, 6vw, 90px); }
.subhero .eyebrow { color: var(--gold); }
.subhero .eyebrow::before { transform-origin: left; animation: lineIn 1s var(--ease-out) both; }
@keyframes lineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.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; } }

/* ── Wasserzeichen: religioeses Symbol im Hintergrund ───────────────────── */

/* Das Symbol liegt als SVG in currentColor sehr blass hinter dem Inhalt,
   dreht sich extrem langsam (ein Umlauf in 2 bis 4 Minuten) und bekommt per
   data-parallax eine leichte Verschiebung. Es ist rein dekorativ. */
.hat-wz { position: relative; overflow: clip; }
.hat-wz > *:not(.wz) { position: relative; z-index: 1; }
.wz {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--wz-g, clamp(320px, 42vw, 620px)); aspect-ratio: 1;
  color: var(--akzent); opacity: var(--wz-o, .07);
}
.wz svg { width: 100%; height: 100%; }
.wz.dreht svg { animation: wzDreh var(--wz-t, 180s) linear infinite; }
.wz.rechts { right: calc(var(--wz-g, clamp(320px, 42vw, 620px)) * -.28); top: 50%; margin-top: calc(var(--wz-g, clamp(320px, 42vw, 620px)) * -.5); }
.wz.links { left: calc(var(--wz-g, clamp(320px, 42vw, 620px)) * -.3); top: 8%; }
.wz.mitte { left: 50%; top: 50%; margin-left: calc(var(--wz-g, clamp(320px, 42vw, 620px)) * -.5); margin-top: calc(var(--wz-g, clamp(320px, 42vw, 620px)) * -.5); }
.sec-dark .wz, .buehne .wz, footer .wz { color: var(--gold); --wz-o: .06; }
@keyframes wzDreh { to { transform: rotate(360deg); } }

/* ── Schnellzugriff ─────────────────────────────────────────────────────── */

.quick { overflow: clip; 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; }
.qi + .qi::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--qi-luft) * -1); width: 1px; background: var(--line); }
.qi::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--qi-luft) * -1); background: var(--akzent-tint); opacity: 0; transition: opacity .18s; }
.qi:hover::after { opacity: 1; }
.qi-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--akzent-soft); display: grid; place-items: center; transition: transform .3s var(--ease-spring); }
.qi:hover .qi-ico { transform: scale(1.07); }
.qi-ico svg { width: 21px; height: 21px; stroke: var(--akzent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qi.urgent .qi-ico { background: var(--akzent); }
.qi.urgent .qi-ico svg { stroke: #fff; }
.qi-txt { min-width: 0; }
.qi-txt h2 { font-family: var(--sans); font-size: .93rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.qi-txt p { font-size: .8rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.qi-ch { flex: none; margin-left: auto; padding-left: 12px; color: var(--akzent); font-size: 1.15rem; transition: transform .22s var(--ease-out); }
.qi:hover .qi-ch { transform: translateX(3px); }
@media (max-width: 800px) {
  .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: 920px; margin: 0 auto; padding: 0 var(--pad); }
.stmt h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.1; max-width: 20ch; margin: 0 auto; }
.stmt h2 em { font-style: italic; color: var(--akzent); }
.stmt p { color: var(--muted); line-height: 1.85; max-width: 60ch; margin: 24px auto 0; }
.stmt .sig { display: block; margin-top: 20px; font-size: .78rem; color: var(--muted-2); letter-spacing: .16em; text-transform: uppercase; }

/* Wortwelle: Woerter faerben sich nach Lesefortschritt (main.js §9) */
.wortwelle .w { color: var(--muted-2); opacity: .55; transition: color .5s var(--ease-out), opacity .5s var(--ease-out), text-shadow .5s; }
.wortwelle .w.hot { color: var(--ink); opacity: 1; }
.wortwelle .w.hot.farbe { color: var(--akzent); text-shadow: 0 0 22px rgb(var(--akzent-rgb) / .22); }

/* ── Split ──────────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; border-radius: 26px; overflow: clip; background: var(--bg-2); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.split-media.tall img { aspect-ratio: 4 / 5; }
.split-media:hover img { transform: scale(1.035); }
.split-media figcaption {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  font-size: .74rem; color: #fff; padding: 8px 13px; border-radius: 12px; width: fit-content;
  background: rgb(var(--ink-rgb) / .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .split-media figcaption { background: rgb(var(--ink-rgb) / .85); } }
.split-body .prose, .split-body h2 + p { margin-top: 18px; }
.split + .split { margin-top: clamp(48px, 6vw, 84px); }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

.ticks { margin-top: 24px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--muted); line-height: 1.6; }
.ticks svg { flex: none; width: 18px; height: 18px; margin-top: 3px; stroke: var(--akzent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticks b { color: var(--ink); font-weight: 500; }

/* ── Karten und Kacheln ─────────────────────────────────────────────────── */

.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: 1000px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: minmax(0, 1fr); } }

.tile {
  position: relative; overflow: hidden;
  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;
}
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--akzent-soft); display: grid; place-items: center; margin-bottom: 18px; color: var(--akzent); }
.tile-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-no { display: block; font-family: var(--serif); font-size: 2.6rem; font-weight: 500; line-height: 1; color: rgb(var(--akzent-rgb) / .3); margin-bottom: 14px; }
.tile h3 { font-size: 1.45rem; }
.tile .sub { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin-top: 6px; font-weight: 500; }
.tile p { color: var(--muted); font-size: .9rem; line-height: 1.72; margin-top: 10px; }
.tile .link-arrow { margin-top: 14px; }
.sec-bg .tile { background: var(--paper); }

/* Lichtschein am Zeiger */
.tile::after, .schritt::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, rgb(var(--akzent-rgb) / .16), transparent 68%);
  filter: blur(16px); opacity: 0; transition: opacity .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .tile:hover::after, .schritt:hover::after { opacity: 1; } }
.tile > *, .schritt > * { position: relative; z-index: 1; }

/* ── Erste Schritte (Zeitleiste, die sich zeichnet) ─────────────────────── */

.schritte { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.schritte-linie { position: absolute; left: 12%; right: 12%; top: 52px; height: 2px; pointer-events: none; }
.schritte-linie svg { width: 100%; height: 2px; overflow: visible; }
.schritte-linie path { stroke: var(--akzent-mid); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.schritte.an .schritte-linie path { stroke-dashoffset: 0; }
.schritt {
  position: relative; overflow: hidden; background: var(--paper); border-radius: 22px; padding: 24px 22px 26px;
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), box-shadow .3s;
  transition-delay: calc(var(--d, 0) * 1ms);
}
.schritte.an .schritt { opacity: 1; transform: none; }
.schritt-no {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--akzent);
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--akzent-mid), 0 0 0 8px var(--paper);
  margin-bottom: 18px;
}
.schritt h3 { font-size: 1.35rem; }
.schritt p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin-top: 8px; }
.schritt a { color: var(--akzent); font-weight: 500; }
.sec-bg .schritt { background: var(--paper); }
@media (max-width: 1000px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schritte-linie { display: none; } }
@media (max-width: 580px) { .schritte { grid-template-columns: minmax(0, 1fr); } }

/* ── Szenen-Buehne (Scrollytelling, Designstandards §13b) ───────────────── */

.buehne { background-color: var(--ink-deep); color: #fff; position: relative; overflow: clip; }
.buehne > *:not(.aura):not(.wz):not(.bluetenregen):not(.rauch) { position: relative; z-index: 2; }
.buehne .aura { opacity: .42; filter: blur(110px); }
.buehne .eyebrow { color: var(--gold); }
.buehne .sec-head p { color: rgba(255, 255, 255, .74); }
.buehne-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.buehne-bild {
  position: sticky; top: calc(50svh - min(21vw, 230px)); height: min(42vw, 460px);
  display: grid; place-items: center;
}
.buehne-bild .szene {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(.96); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
}
.buehne-bild .szene.aktiv { opacity: 1; transform: none; }
.buehne-bild svg { width: min(100%, 460px); height: 100%; overflow: visible; }
.buehne-bild .ring-hg { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--gold-rgb) / .13), transparent 66%); }
.buehne-schritte { padding: 10vh 0 18vh; }
.buehne-schritt {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .28; transition: opacity .6s var(--ease-out);
}
.buehne-schritt.aktiv { opacity: 1; }
.buehne-schritt .nr { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.buehne-schritt h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 10px; }
.buehne-schritt h3 small { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 400; letter-spacing: .06em; color: rgba(255, 255, 255, .62); margin-top: 8px; }
.buehne-schritt p { color: rgba(255, 255, 255, .74); line-height: 1.85; margin-top: 16px; max-width: 48ch; }
@media (max-width: 880px) {
  .buehne-grid { grid-template-columns: minmax(0, 1fr); }
  /* Hochkant haftet die Grafik oben auf deckendem Grund, die Schritte
     laufen darunter durch und verschwinden hinter ihr. */
  .buehne-bild { top: calc(var(--nav-h) + 18px); height: min(36vh, 300px); z-index: 3; }
  .buehne-bild::before {
    content: ""; position: absolute; z-index: -1; left: calc(var(--pad) * -1 - 2px); right: calc(var(--pad) * -1 - 2px);
    top: calc(-1 * (var(--nav-h) + 30px)); bottom: -46px;
    background: linear-gradient(180deg, var(--ink-deep) 82%, rgb(var(--ink-rgb) / 0));
  }
  .buehne-bild .ring-hg { inset: 0 12%; }
  .buehne-schritte { padding: 4vh 0 10vh; }
  .buehne-schritt { min-height: 56vh; }
}
/* Szenen-Grafiken: alles haengt an .aktiv der Szene. Nur transform,
   opacity und stroke-dashoffset. */
.szene .zeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-out); }
.szene.aktiv .zeichnen { stroke-dashoffset: 0; }
.szene .zeichnen.d1 { transition-delay: .25s; }
.szene .zeichnen.d2 { transition-delay: .5s; }
.szene .zeichnen.d3 { transition-delay: .75s; }
.szene .kommt { opacity: 0; transform: translateY(8px); transform-box: fill-box; transform-origin: center; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.szene.aktiv .kommt { opacity: 1; transform: none; }
.flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flackern 2.6s ease-in-out infinite; }
.flamme.b { animation-duration: 3.3s; animation-delay: -.8s; }
@keyframes flackern { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 25% { transform: scale(.94, 1.06) rotate(-1.5deg); } 55% { transform: scale(1.04, .95) rotate(1deg); } 80% { transform: scale(.97, 1.03) rotate(-.5deg); } }
.schein { transform-box: fill-box; transform-origin: center; animation: schein 3.4s ease-in-out infinite; }
@keyframes schein { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .85; } }
.welle { animation: welle 7s linear infinite; }
.welle.b { animation-duration: 10s; animation-direction: reverse; }
@keyframes welle { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.treibt { transform-box: fill-box; transform-origin: center; animation: treibt 9s ease-in-out infinite; }
@keyframes treibt { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(18px, 3px) rotate(8deg); } }
.klang { transform-box: fill-box; transform-origin: center; animation: klang 4.2s ease-out infinite; opacity: 0; }
.klang.b { animation-delay: 1.4s; }
.klang.c { animation-delay: 2.8s; }
@keyframes klang { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.dreht-langsam { transform-box: fill-box; transform-origin: center; animation: wzDreh 60s linear infinite; }
.tropfen { transform-box: fill-box; animation: tropfen 2.8s ease-in infinite; opacity: 0; }
.tropfen.b { animation-delay: .9s; }
.tropfen.c { animation-delay: 1.8s; }
@keyframes tropfen { 0% { transform: translateY(-24px); opacity: 0; } 20% { opacity: .9; } 80% { opacity: .9; } 100% { transform: translateY(46px); opacity: 0; } }

/* ── Bluetenregen (Hindu) und Rauch (Buddha) auf dunklen Flaechen ───────── */

.bluetenregen, .rauch { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bluetenregen i {
  position: absolute; top: -40px; left: var(--x, 50%);
  width: var(--g, 12px); height: calc(var(--g, 12px) * .78);
  border-radius: 60% 60% 55% 55% / 70% 70% 40% 40%;
  background: radial-gradient(circle at 40% 35%, var(--gold), var(--akzent-hover) 70%);
  opacity: .5; will-change: transform;
  animation: bluete var(--t, 22s) linear infinite; animation-delay: var(--v, 0s);
}
@keyframes bluete {
  0% { transform: translate3d(0, -5vh, 0) rotate(0deg); }
  50% { transform: translate3d(var(--dx, 40px), 55vh, 0) rotate(200deg); }
  100% { transform: translate3d(calc(var(--dx, 40px) * -.5), 120vh, 0) rotate(400deg); }
}
.rauch i {
  position: absolute; bottom: -10%; left: var(--x, 50%);
  width: var(--g, 180px); height: calc(var(--g, 180px) * 1.6); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .16), transparent 66%);
  filter: blur(18px); opacity: 0; will-change: transform, opacity;
  animation: rauch var(--t, 16s) ease-in-out infinite; animation-delay: var(--v, 0s);
}
@keyframes rauch {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  25% { opacity: .8; }
  100% { transform: translate3d(var(--dx, 40px), -95vh, 0) scale(1.5); opacity: 0; }
}

/* ── Karte: Partner bundesweit ──────────────────────────────────────────── */

.karte-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.karte-svg { position: relative; max-width: 460px; margin: 0 auto; width: 100%; }
.karte-svg svg { width: 100%; height: auto; overflow: visible; }
.karte-land { fill: var(--akzent-tint); stroke: var(--line-strong); stroke-width: 1.2; }
.karte-linie { fill: none; stroke: var(--akzent-mid); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.karte.an .karte-linie { stroke-dashoffset: 0; }
.karte-punkt { fill: var(--akzent); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--ease-spring); transition-delay: calc(var(--d, 0) * 1ms + 700ms); }
.karte.an .karte-punkt { transform: scale(1); }
.karte-hub { fill: var(--akzent-deep); }
.karte-hub-puls { fill: none; stroke: var(--akzent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: klang 3.2s ease-out infinite; }
.karte-name { font-family: var(--sans); font-size: 11px; fill: var(--muted); letter-spacing: .02em; opacity: 0; transition: opacity .8s; transition-delay: calc(var(--d, 0) * 1ms + 900ms); }
.karte-name.hub { font-size: 13px; font-weight: 600; fill: var(--akzent-deep); }
.karte.an .karte-name { opacity: 1; }
.karte-licht { fill: var(--gold); opacity: 0; }
.karte.an .karte-licht { opacity: .95; transition: opacity .6s 2.4s; }
.staedte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.staedte span { font-size: .8rem; padding: 7px 14px; border-radius: 999px; color: var(--akzent-deep); background: var(--akzent-soft); }
@media (max-width: 880px) { .karte-grid { grid-template-columns: minmax(0, 1fr); } .karte-svg { max-width: 380px; } }

/* ── Vollbild-Band mit Film ─────────────────────────────────────────────── */

.band { position: relative; overflow: hidden; background-color: var(--ink-deep); color: #fff; }
.band-media { position: absolute; inset: 0; }
.band-media video, .band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .62) 50%, rgb(var(--ink-rgb) / .3) 100%); }
.band-inner { position: relative; z-index: 2; }
.band .sec-head p, .band .lead { color: rgba(255, 255, 255, .78); }
.band .eyebrow { color: var(--gold); }
.glas {
  border-radius: 24px; padding: 26px 26px 28px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .24);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glas { background: rgb(var(--ink-rgb) / .86); } }
.glas h3 { font-size: 1.45rem; }
.glas p, .glas li { color: rgba(255, 255, 255, .78); font-size: .92rem; line-height: 1.7; }
.glas ul { display: grid; gap: 9px; margin-top: 14px; }
.glas li { position: relative; padding-left: 20px; }
.glas li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 880px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }
.laender { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.laender span { font-size: .8rem; padding: 7px 14px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ── Galerie-Teaser ─────────────────────────────────────────────────────── */

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gal-item { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-2); }
.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, rgb(var(--ink-rgb) / .02) 34%, rgb(var(--ink-rgb) / .82)); }
.gal-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.gal-cap b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.15; }
.gal-cap span { display: block; font-size: .74rem; color: rgba(255, 255, 255, .8); margin-top: 4px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gal-item { aspect-ratio: 16 / 10; } }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.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: 21px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.32rem; font-weight: 500; line-height: 1.3;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--akzent); }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 9px;
  border-right: 1.6px solid var(--akzent); border-bottom: 1.6px solid var(--akzent);
  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: .9em; }
.faq-a a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--nav-h) + 50px); }
@media (max-width: 880px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-grid .sec-head { position: static; } }

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

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(34px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.person-card { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); margin-top: 26px; }
.person-card .ava { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-soft); color: var(--akzent); }
.person-card .ava svg { width: 34px; height: 34px; }
.person-card b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.person-card span { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; }
.infocard { background: var(--paper); border-radius: 22px; padding: 26px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 16px; }
.infocard dl { display: grid; }
.infocard dt { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); padding-top: 13px; }
.infocard dt:first-child { padding-top: 0; }
.infocard dd { font-size: .98rem; 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(--akzent); font-weight: 500; overflow-wrap: anywhere; }

.form { background: var(--paper); border-radius: 24px; padding: clamp(24px, 3vw, 36px); box-shadow: inset 0 0 0 1px var(--line); }
.form h3 { font-size: 1.7rem; margin-bottom: 6px; }
.form > p { color: var(--muted); font-size: .9rem; margin-bottom: 22px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: .74rem; letter-spacing: .07em; 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: var(--sans); 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(--akzent); background: var(--paper); }
.form-row [aria-invalid="true"] { border-color: #b3261e; background: #fdf3f2; }
.form-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .form-two { grid-template-columns: minmax(0, 1fr); } }
.form-consent { display: flex; gap: 11px; align-items: flex-start; margin: 6px 0 20px; }
.form-consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--akzent); }
.form-consent label { font-size: .82rem; color: var(--muted); line-height: 1.6; }
.form-consent a { color: var(--akzent); 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: .9rem; line-height: 1.6; min-height: 1.4em; }
.form-status.ok { color: var(--akzent-deep); }
.form-status.error { color: #b3261e; }
.form-hint { font-size: .78rem; color: var(--muted-2); line-height: 1.6; margin-top: 14px; }
.form .btn { width: 100%; }

/* ── Ratgeber: Inhaltsverzeichnis links, Text rechts ───────────────────── */

.ratgeber-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 44px); max-height: calc(100svh - var(--nav-h) - 70px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.toc b { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; font-weight: 500; }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: .84rem; color: var(--muted); line-height: 1.4; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--akzent); }
.toc a.aktiv { color: var(--akzent-deep); border-left-color: var(--akzent); font-weight: 500; }
.ratgeber-text > section { padding-bottom: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: .5px solid var(--line); }
.ratgeber-text > section:last-child { border-bottom: 0; margin-bottom: 0; }
.ratgeber-text .eyebrow { margin-bottom: 12px; }
.begriff { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; border-top: .5px solid var(--line); }
.begriff:first-of-type { border-top: 0; }
.begriff dt { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.begriff dt small { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 500; margin-left: 10px; }
.begriff dd { color: var(--muted); line-height: 1.8; }
.hinweis {
  font-size: .9rem; color: var(--muted); line-height: 1.75; padding: 18px 22px;
  border-left: 3px solid var(--akzent); background: var(--akzent-tint); border-radius: 0 16px 16px 0; margin: 1.2em 0;
}
.hinweis strong { color: var(--ink); font-weight: 500; }
@media (max-width: 960px) {
  .ratgeber-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; background: var(--bg); border-radius: 18px; padding: 20px; }
}

/* ── Einblicke: Bildkonfigurator (Port Trauerhilfe Goeck) ───────────────── */

.ek-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.ek-kats { display: flex; flex-direction: column; gap: 8px; max-height: 36rem; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.ek-kat {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s, transform .25s var(--ease-spring);
}
.ek-kat img { width: 64px; height: 50px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ek-kat b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ek-kat small { display: block; font-size: .74rem; color: var(--muted-2); margin-top: 2px; }
.ek-kat:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ek-kat[aria-current="true"] { background: var(--akzent); box-shadow: 0 10px 26px -12px rgb(var(--akzent-rgb) / .6); }
.ek-kat[aria-current="true"] b { color: #fff; }
.ek-kat[aria-current="true"] small { color: rgba(255, 255, 255, .8); }

.ek-figure {
  position: relative; margin: 0; border-radius: 24px; overflow: hidden;
  background: var(--ink-deep); aspect-ratio: 3 / 2; cursor: zoom-in;
}
.ek-figure img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s var(--ease-out); position: relative; z-index: 1; }
.ek-figure .ek-hg { position: absolute; inset: 0; z-index: 0; object-fit: cover; transform: scale(1.15); filter: blur(28px) saturate(1.1); opacity: .55; }
.ek-figure.ek-laedt .ek-bild { opacity: 0; }
.ek-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--akzent-deep);
  box-shadow: 0 6px 18px rgb(var(--ink-rgb) / .3); transition: background .2s, color .2s;
}
.ek-pfeil:hover { background: var(--akzent); color: #fff; }
.ek-pfeil[disabled] { opacity: .35; cursor: default; }
.ek-pfeil[disabled]:hover { background: rgba(255, 255, 255, .92); color: var(--akzent-deep); }
.ek-vor { right: 14px; }
.ek-zurueck { left: 14px; }
.ek-zaehler { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgb(var(--ink-rgb) / .78); color: #fff; font-size: .75rem; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; }
.ek-lupe { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: .72rem; padding: 5px 11px; border-radius: 999px; }
.ek-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 6px; }
.ek-thumbs button { flex: 0 0 auto; width: 96px; height: 68px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
.ek-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.ek-thumbs button:hover { opacity: 1; border-color: var(--akzent-mid); }
.ek-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--akzent); }
.ek-info { margin-top: 22px; max-width: 64ch; }
.ek-info h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 8px; }
.ek-info p { color: var(--muted); line-height: 1.8; }

.ek-box { position: fixed; inset: 0; z-index: 2000; background: rgb(var(--ink-rgb) / .95); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.ek-box.offen { display: flex; }
.ek-box img { max-width: 100%; max-height: 84vh; border-radius: 12px; object-fit: contain; }
.ek-box-zu { position: absolute; top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; transition: background .2s; }
.ek-box-zu:hover { background: rgba(255, 255, 255, .28); }
.ek-box-titel { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: rgba(255, 255, 255, .8); font-size: .86rem; padding: 0 70px; }
.ek-ohne-js { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ek-ohne-js img { width: 100%; border-radius: 14px; }
.ek-ohne-js figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 1000px) {
  .ek-layout { grid-template-columns: minmax(0, 1fr); }
  .ek-kats { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
  .ek-kat { flex: 0 0 auto; width: 15rem; }
  .ek-kat:hover { transform: none; }
}
@media (max-width: 640px) {
  .ek-figure { aspect-ratio: 4 / 5; }
  .ek-lupe { display: none; }
  .ek-thumbs button { width: 76px; height: 56px; }
  .ek-pfeil { width: 42px; height: 42px; }
  .ek-ohne-js { grid-template-columns: minmax(0, 1fr); }
}

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

footer { position: relative; z-index: 1; background-color: var(--ink-deep); color: rgba(255, 255, 255, .62); overflow: clip; }
footer > *:not(.wz) { position: relative; z-index: 1; }
.foot-top { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 5vw, 66px) var(--pad) 34px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.foot-brand .fb-titel { display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 16px; }
.foot-brand .fb-titel svg { width: 42px; height: 42px; color: var(--gold); flex: none; }
.foot-brand .fb-titel b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
.foot-brand p { font-size: .86rem; line-height: 1.8; max-width: 36ch; }
.foot-col h3 { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); margin-bottom: 15px; font-weight: 500; }
.foot-col li { margin-bottom: 9px; font-size: .88rem; }
.foot-col a { 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: minmax(0, 1fr); gap: 28px; } }

/* ── Anrufknopf unten rechts (mobil) ────────────────────────────────────── */

.ruf {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  display: none; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border-radius: 999px;
  color: #fff; font-size: .9rem; font-weight: 500;
  background: linear-gradient(180deg, var(--akzent-hover), var(--akzent));
  box-shadow: 0 12px 30px -8px rgb(var(--akzent-rgb) / .6), inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translateY(120px); transition: transform .45s var(--ease-out);
}
.ruf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.is-scrolled .ruf { transform: none; }
body.nav-open .ruf { transform: translateY(120px); }
@media (max-width: 780px) { .ruf { display: inline-flex; } }

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

.reveal { opacity: 0; transform: translateY(30px); 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 ────────────────────────────────────────────────────────── */

html.sparsam *, html.sparsam *::before, html.sparsam *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.sparsam body.over-hero .nav { background: rgb(var(--ink-rgb) / .9); }
html.sparsam .nav-corner-inner::before { background: #fff; }
html.sparsam .btn-glass { background: rgb(var(--ink-rgb) / .7); }
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, html.sparsam .buehne .btn-outline,
html.sparsam .kontakt-dunkel .btn-outline { background: rgba(255, 255, 255, .2); }
html.sparsam .glas { background: rgb(var(--ink-rgb) / .86); }
html.sparsam .split-media figcaption { background: rgb(var(--ink-rgb) / .85); }
html.sparsam .aura { filter: blur(34px); }
html.sparsam .aura i, html.sparsam .bluetenregen i, html.sparsam .rauch i { animation: none; will-change: auto; }
html.sparsam .bluetenregen, html.sparsam .rauch { display: none; }
html.sparsam .wz svg { animation: none; }
html.sparsam .tile::after, html.sparsam .schritt::after { display: none; }
html.sparsam .subhero-media img { animation: none; }

/* ── Bewegung aus, wenn so eingestellt ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .schritt { 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; }
  .schritte-linie path, .karte-linie, .szene .zeichnen { stroke-dashoffset: 0 !important; }
  .karte-punkt { transform: none !important; }
  .karte-name, .szene .kommt { opacity: 1 !important; transform: none !important; }
  .klang, .tropfen, .karte-licht, .karte-hub-puls { display: none; }
  .bluetenregen, .rauch { display: none; }
  .buehne-schritt { opacity: 1 !important; }
  [data-parallax] { transform: none !important; }
  .nav-indicator { display: none; }
  .tile::after, .schritt::after { display: none; }
  .btn { transform: none !important; }
  .btn::before { display: none; }
  .wortwelle .w { color: inherit !important; opacity: 1 !important; }
}

@media print {
  .nav-wrap, .nav-corner, .mobile-nav, .ruf, .hero-bg, .aura, .wz, .bluetenregen, .rauch { display: none !important; }
  body { background: #fff; }
  .hero, .subhero { position: static; min-height: 0; height: auto; background: #fff; }
  .hero h1, .subhero h1, .hero-p, .subhero p { color: #000; }
}