/* ==========================================================================
   DJ Pepe · Wedding & Event DJ — Designsystem „Starlit Gold“
   Stil: Reflect-Prinzip (sternenklarer Violett-Kosmos, Rim-Light statt Schatten,
   ruhige Schrift im Gewicht 500) mit EINER Akzentfarbe: Gold aus dem Logo.
   Farben, Radien und Abstände ganz oben unter :root anpassen.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("static/fonts/figtree-500.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Flächen */
  --void: #030014;          /* Seitenhintergrund – Schwarz mit violettem Unterton */
  --midnight: #060317;      /* Karten, Navigation */
  --indigo: #10093a;        /* höchste Ebene, Buttons auf dunklem Grund */
  --indigo-hi: #170f50;
  /* Text */
  --lilac: #f4f0ff;         /* Überschriften, wichtiger Text */
  --ash: #a8a6b7;           /* Fließtext */
  --fog: #918ea0;           /* Nebentext, Metadaten */
  --dusk: #72707b;
  --steel: #54525f;
  /* Akzente */
  --gold: #d8b46a;          /* einzige Akzentfarbe: Links, aktive Zustände, Icons, CTA */
  --gold-hi: #f1d9a0;
  --gold-ink: #1d1405;      /* Text auf Gold */
  --iris: #5046e4;          /* nur dekorativ (Badges, Lichtsäume) */
  --gold-text: linear-gradient(90deg, #f7e5b8 0%, #e5c582 42%, #cc9e55 100%);
  --aurora-x: linear-gradient(90deg, rgba(133, 98, 255, 0) 0%, rgba(183, 164, 251, .75) 50%, rgba(133, 98, 255, 0) 100%);
  --aurora-y: linear-gradient(180deg, rgba(183, 164, 251, 0) 0%, rgba(183, 164, 251, .55) 50%, rgba(133, 98, 255, 0) 100%);
  /* Linien & Licht */
  --line: rgba(255, 255, 255, .06);
  --edge: inset 0 0 0 1px rgba(255, 255, 255, .06);
  --rim: inset 0 0 24px rgba(255, 255, 255, .04);
  --rim-2: inset 0 0 24px rgba(255, 255, 255, .06);
  --rim-violet: inset 0 -7px 11px rgba(164, 143, 255, .12);
  /* Radien – bewusst nur diese Werte */
  --r-btn: 5px;
  --r-card: 16px;
  --r-block: 24px;
  --r-badge: 32px;
  --r-pill: 999px;
  /* Schrift */
  --font-head: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Layout */
  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --sec: clamp(52px, 6vw, 68px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--void);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "calt" 0, "cv10", "liga" 0, "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(216, 180, 106, .85); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--gold); color: var(--gold-ink); font-weight: 500; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }

main, .site-footer { position: relative; z-index: 1; }

/* ---------- Sternenhimmel ---------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky i { position: absolute; left: 0; top: 0; border-radius: 50%; }
.sky i:nth-child(2) { animation: twinkle 7s ease-in-out infinite alternate; }
.sky i:nth-child(3) { animation: twinkle 11s ease-in-out -4s infinite alternate; }
.sky i:nth-child(4) { animation: twinkle 5s ease-in-out -2s infinite alternate; }
body:has(.nav-wrap.is-scrolled) .sky i { animation-play-state: paused; }   /* Funkeln nur ganz oben */
@keyframes twinkle { 0% { opacity: 1; } 100% { opacity: .35; } }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--lilac); }
.display {
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.5rem);
  line-height: 1.11;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.17;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.lead { margin: 0; font-size: 1.125rem; line-height: 1.56; color: var(--ash); text-wrap: pretty; }
.text-gold {
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (forced-colors: active) { .text-gold { background: none; color: CanvasText; } }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--r-btn);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .15s;
}
.btn .ico { width: 16px; height: 16px; stroke-width: 1.75; transition: transform .25s var(--ease); }
@media (hover: hover) { .btn:hover .ico { transform: translateX(2px); } }
.btn:active { transform: translateY(1px); }
:is(a, button, summary):active { scale: .97; }   /* sofortige Rückmeldung beim Drücken/Antippen */
:is(a, button, summary) { -webkit-tap-highlight-color: transparent; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn--gold {
  color: var(--gold-ink);
  background: linear-gradient(180deg, #edd39a 0%, #d8b46a 58%, #caa258 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 10px rgba(120, 80, 20, .24);
}
@media (hover: hover) { .btn--gold:hover { background: linear-gradient(180deg, #f4ddab 0%, #e1c07b 58%, #d2ac63 100%); } }
.btn--ghost {
  color: var(--lilac);
  background: var(--indigo);
  box-shadow: var(--rim-2), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (hover: hover) { .btn--ghost:hover { background: var(--indigo-hi); box-shadow: var(--rim-2), inset 0 0 0 1px rgba(216, 180, 106, .4); } }
.btn--text { padding-inline: 8px; color: var(--fog); background: transparent; }
@media (hover: hover) { .btn--text:hover { color: var(--lilac); } }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); font-size: 15px; font-weight: 500; text-decoration: none;
  border-radius: 8px; transition: color .2s;
}
.link .ico { width: 16px; height: 16px; stroke-width: 1.75; transition: transform .25s var(--ease); }
@media (hover: hover) { .link:hover { color: var(--lilac); } }
@media (hover: hover) { .link:hover .ico { transform: translateX(3px); } }

.linklike {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; text-decoration: none;
}
@media (hover: hover) { .linklike:hover { color: var(--lilac); } }

/* ---------- Badge (Pill über Überschriften) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px; padding: 6px 14px 6px 11px;
  border: 1px solid rgba(80, 70, 228, .85); border-radius: var(--r-badge);
  background: var(--midnight);
  box-shadow: var(--rim-violet);
  color: var(--lilac); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: .005em;
}
.badge .ico { width: 15px; height: 15px; color: var(--gold); stroke-width: 1.6; }
h1.badge { font-family: var(--font-body); }   /* Unterseiten: die Pille oben ist die Seitenüberschrift (h1), sieht aus wie jede Pille */

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .55); }
.sec-head {
  display: flex; flex-direction: column; align-items: center;
  max-width: 780px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center;
}
.sec-head .lead { max-width: 640px; margin-top: 20px; color: var(--fog); }

.aurora {
  position: relative; z-index: 1;
  width: min(var(--maxw), calc(100% - 2 * var(--pad))); height: 1px; margin: 0 auto;
  background: var(--aurora-x); opacity: .75;
}
.aurora::after {
  content: ""; position: absolute; left: 25%; right: 25%; top: -8px; height: 17px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(133, 98, 255, .32), transparent 100%);
  filter: blur(6px);
}

/* Karten & Feature-Blöcke */
.card {
  border-radius: var(--r-card);
  background: var(--midnight);
  box-shadow: var(--rim), var(--edge);
  padding: 24px;
}
.block {
  position: relative; isolation: isolate;
  margin: 0; overflow: hidden;
  border-radius: var(--r-block);
  background: var(--midnight);
}
.block::before { /* Lichtsaum über dem Bild */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--rim-2);
}
.block > img, .block > video, .block > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.block > picture { display: contents; }
.block--photo { margin-top: clamp(48px, 6vw, 72px); aspect-ratio: 16 / 7; }
.block--photo > img { object-position: 50% 30%; }
.block--wide { aspect-ratio: 21 / 8; }
.block--wide > img { object-position: 50% 55%; }
.block--portrait { aspect-ratio: 2 / 3; }
.block--tall { aspect-ratio: 2 / 3; }
.block--land { aspect-ratio: 3 / 2; }
.block--photo::after, .block--portrait::after, .block--land::after, .block--reel::after, .block--wide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 0, 20, 0) 40%, rgba(3, 0, 20, .62) 68%, rgba(3, 0, 20, .92) 100%);
}
.block-cap {
  position: absolute; left: clamp(18px, 3vw, 28px); right: clamp(18px, 3vw, 28px); bottom: clamp(16px, 2.6vw, 24px); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  color: #d4d0e2; font-size: 14px; text-shadow: 0 1px 3px rgba(3, 0, 20, .9);
}
.block-cap strong { color: var(--lilac); font-family: var(--font-head); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.25; }
.block--surface {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(80, 70, 228, .22), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(216, 180, 106, .06), transparent 60%),
    var(--midnight);
}
.block:is([data-lightbox], .weg) > :is(img, .weg-morph) { transition: transform .9s var(--ease); }
@media (hover: hover) { .block:is([data-lightbox], .weg):hover > :is(img, .weg-morph) { transform: scale(1.03); } }

/* ---------- Unterseiten (seit 27.10.2026): erster Abschnitt mit Platz für die schwebende Leiste ---------- */
main > .section:first-child { padding-top: clamp(124px, 13vw, 156px); }

/* ---------- Wegweiser der Startseite: 5 Bild-Kacheln zu den Unterseiten ----------
   PC 5 nebeneinander · Tablet 3 + 2 (breiter) · Handy 2 + 2 + 1 (breit). Fotos zoomen beim Drüberfahren wie die Galerie. */
.wege { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.weg { display: block; height: 100%; aspect-ratio: 3 / 4; color: inherit; text-decoration: none; }
.weg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 0, 20, 0) 35%, rgba(3, 0, 20, .62) 66%, rgba(3, 0, 20, .92) 100%);
}
.weg .block-cap { left: 18px; right: 18px; bottom: 16px; flex-direction: column; align-items: flex-start; gap: 2px; text-wrap: balance; } /* ausgeglichene Zeilen: „Pepe’s Smile Station“ bleibt am PC beisammen */
/* Zweites Foto zerfließt herein (Runde 30, „Wegweiser“ in script.js): die WebGL-Leinwand liegt pixelgenau über dem Foto,
   unsichtbar, solange sie nur Foto 1 zeigen würde; Lichtsaum, Verlauf und Beschriftung bleiben darüber. */
.weg-morph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.weg .block-cap strong { font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); }
.weg:focus-visible .block-cap strong { color: var(--gold-hi); }
@media (hover: hover) { .weg:hover .block-cap strong { color: var(--gold-hi); } }
@media (max-width: 980px) {
  .wege { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wege > li { grid-column: span 2; }
  .wege > li:nth-child(n+4) { grid-column: span 3; }
  .wege > li:nth-child(n+4) .weg { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wege > li, .wege > li:nth-child(n+4) { grid-column: span 1; }
  .wege > li:nth-child(n+4) .weg { aspect-ratio: 3 / 4; }
  .wege > li:last-child { grid-column: 1 / -1; }
  .wege > li:last-child .weg { aspect-ratio: 2 / 1; }
  .weg .block-cap { left: 14px; right: 14px; bottom: 12px; }
}
.zoom-btn { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; background: transparent; cursor: zoom-in; border-radius: inherit; }
.zoom-btn:focus-visible { outline-offset: -4px; }

/* Pills */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pills li {
  padding: 7px 14px; border-radius: var(--r-badge);
  background: var(--midnight);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -7px 11px rgba(164, 143, 255, .06);
  color: var(--ash); font-size: 14px; line-height: 1.3;
}
.pills .pill--gold { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .5), inset 0 -7px 11px rgba(216, 180, 106, .08); }
.pills--center { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* Sanftes Einblenden im Hero ohne JavaScript (Text bleibt für LCP sofort sichtbar) */
.hero-in { animation: hero-in 1s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Scroll-Einblendung */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: calc(var(--d, 0ms) / 4); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Navigation – schwebende Pille
   ========================================================================== */
.nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; padding-inline: 14px; pointer-events: none; }
.nav {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  max-width: 1000px; height: 56px; margin: 0 auto; padding: 0 8px 0 16px;
}
.nav > * { position: relative; }                 /* Inhalt liegt über der Pille (::before) */
.nav::before {                                   /* die Pille selbst – schrumpft beim Scrollen auf das Logo */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  border-radius: var(--r-pill);
  background: rgba(6, 3, 23, .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, .08);
  clip-path: inset(0 round var(--r-pill));           /* Schrumpfen nur über clip-path: keine Layout-Neuberechnung */
  transition: background-color .3s, clip-path .5s var(--ease), box-shadow .3s;
}
.nav::after {                                    /* Goldrand der kleinen Pille */
  content: ""; position: absolute; top: 3px; bottom: 3px; left: calc(50% - var(--klein-b, 132px) / 2); width: var(--klein-b, 132px);
  border-radius: var(--r-pill); box-shadow: var(--rim), inset 0 0 0 1px rgba(216, 180, 106, .28);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.nav-wrap.is-klein:not(.is-offen) .nav::after { opacity: 1; transition: opacity .3s .3s; }
.nav-wrap.is-scrolled .nav::before { background: rgba(6, 3, 23, .88); }
.nav-brand { display: flex; align-items: center; gap: 7px; height: 44px; margin-right: auto; border-radius: var(--r-pill); text-decoration: none; transition: transform .5s var(--ease); }
.nav-links, .nav-actions { transition: opacity .3s ease .12s, visibility 0s linear 0s, transform .45s var(--ease); }

/* Nach unten gescrollt: kleine Pille in der Mitte mit Logo und „Termin anfragen“ (Handy: + Menü-Knopf).
   Maus drauf, antippen oder mit der Tab-Taste hinein → die ganze Leiste klappt wieder auf (.is-offen, script.js). */
.nav-wrap.is-klein:not(.is-offen) .nav { pointer-events: none; }
.nav-wrap.is-klein:not(.is-offen) .nav::before {
  clip-path: inset(3px calc(50% - var(--klein-b, 132px) / 2) round var(--r-pill));
  background: rgba(6, 3, 23, .86);
}
.nav-wrap.is-klein:not(.is-offen) .nav-brand { transform: translateX(var(--marke-x, 0px)); pointer-events: auto; cursor: pointer; }
.nav-wrap.is-klein:not(.is-offen) .nav-actions { transform: translateX(var(--aktion-x, 0px)); }   /* „Termin anfragen“ (Handy: + Menü) rückt neben das Logo */
.nav-wrap.is-klein:not(.is-offen) .nav-actions > :is(.btn--gold, .nav-toggle) { pointer-events: auto; }
.nav-wrap.is-klein:not(.is-offen) :is(.nav-links, .nav-actions > :not(.btn--gold, .nav-toggle)) {
  opacity: 0; visibility: hidden; transform: scale(.94);
  transition: opacity .2s ease, visibility 0s linear .2s, transform .3s var(--ease);
}
.nav-brand::after { content: ""; position: absolute; inset: -6px -18px; }   /* größere Fläche zum Drüberfahren/Antippen */
.nav-brand img { width: 32px; height: auto; transition: transform .25s var(--ease); }
.nav-brand .nav-script { width: 58px; }
.nav-links { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--lilac); font-size: 15px; text-decoration: none;
  transition: color .2s, background-color .2s, transform .25s var(--ease);
}
.nav-links a[aria-current="page"], .nav-menu ul a[aria-current="page"] { color: var(--gold); }   /* „Wo bin ich?“ – die aktuelle Seite */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {   /* Maus drauf: Kopfhörer, „Pepe“ und Menüpunkte werden etwas größer (Pepes Wunsch 22.10.2026) */
  .nav-brand:is(:hover, :focus-visible) img { transform: scale(1.1); }
  .nav-links a:is(:hover, :focus-visible) { transform: scale(1.08); }
}

/* ---------- Glas-Blase in Kopf- und Fußleiste (Vorlage „Liquid Glass Navbar“, Pepes Wunsch 27.10.2026: dezent) ----------
   Eine Glasperle hinter der aktuellen Seite: leicht aufgehellt, oben eine Lichtkante, feiner Schimmer-Rand (Lavendel,
   Himmelblau, Rosé, Gold). Mit Maus oder Tab-Taste gleitet sie zum Menüpunkt; die vordere Kante ist schneller, so zieht
   sie sich unterwegs kurz in die Länge wie ein Tropfen. script.js setzt --gl/--gr (Abstand links/rechts) und .is-glas;
   ohne JavaScript bleibt die goldene Schrift der aktuellen Seite. */
[data-glas] { position: relative; isolation: isolate; }
[data-glas]::before, [data-glas]::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--gl, 0px); right: var(--gr, 0px);
  border-radius: var(--r-pill); pointer-events: none; opacity: 0;
  transition: left .5s var(--ease), right .5s var(--ease), opacity .3s ease;
}
[data-glas]::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
  -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 4px 14px rgba(3, 0, 20, .45);
}
[data-glas]::after {
  padding: 1px;
  background: conic-gradient(from 210deg, #b7a4fb, #9ec5ff, #f2b8e6, #f1d9a0, #b7a4fb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-glas].is-glas::before { opacity: 1; }
[data-glas].is-glas::after { opacity: .5; }
[data-glas].nach-rechts::before, [data-glas].nach-rechts::after { transition-duration: .55s, .32s, .3s; }
[data-glas].nach-links::before, [data-glas].nach-links::after { transition-duration: .32s, .55s, .3s; }
[data-glas].ohne-weg::before, [data-glas].ohne-weg::after { transition-duration: 0s, 0s, .3s; }
@media (forced-colors: active) { [data-glas]::before, [data-glas]::after { display: none; } }
.nav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: var(--r-pill); color: var(--fog); font-size: 15px; text-decoration: none;
  transition: color .2s;
}
.nav-tel .ico { width: 16px; height: 16px; }
@media (hover: hover) { .nav-tel:hover { color: var(--lilac); } }
/* Instagram oben und ganz unten (Pepes Wunsch 21./22.10.2026): nur Symbol, vergrößert sich beim Drüberfahren */
.nav-insta { padding: 4px; transition: color .2s, transform .25s var(--ease); }
.nav-insta:focus-visible { color: var(--gold); transform: scale(1.18); }
@media (hover: hover) { .nav-insta:hover { color: var(--gold); transform: scale(1.18); } }
.nav .btn--sm { height: 40px; }
.nav-toggle {
  display: none; place-items: center;
  width: 40px; height: 40px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--lilac); cursor: pointer;
}
.nav-toggle .ico { width: 20px; height: 20px; }
.nav-toggle .ico--close { display: none; }
.nav-toggle[aria-expanded="true"] .ico--menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico--close { display: block; }
.nav-menu {
  pointer-events: auto;
  max-width: 1000px; margin: 8px auto 0; padding: 10px;
  border-radius: var(--r-card);
  background: rgba(6, 3, 23, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--rim-2), inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: calc(100% - 24px) 0;   /* wächst aus dem Menü-Knopf */
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-menu.is-open { opacity: 1; transform: none; }
.nav-menu ul { margin: 0; padding: 0; list-style: none; display: grid; }
.nav-menu ul a {
  display: block; padding: 12px 14px; border-radius: var(--r-btn);
  color: var(--lilac); font-family: var(--font-head); font-size: 18px; text-decoration: none;
}
@media (hover: hover) { .nav-menu ul a:hover { background: rgba(255, 255, 255, .04); } }
.nav-menu-foot { display: grid; gap: 8px; margin-top: 8px; padding: 12px 4px 4px; border-top: 1px solid var(--line); }
.nav-menu-foot .btn { height: 46px; }
.nav-menu-foot .btn .ico { width: 16px; height: 16px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow-x: clip; padding: clamp(112px, 12vw, 146px) 0 clamp(40px, 5vw, 64px); }
.hero-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 980px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56% 48% at 50% 0%, rgba(80, 70, 228, .42) 0%, rgba(80, 70, 228, .14) 45%, rgba(80, 70, 228, 0) 78%),
    radial-gradient(30% 26% at 50% 6%, rgba(216, 180, 106, .10), rgba(216, 180, 106, 0) 70%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.hero-grid > .hallo { grid-column: 2; grid-row: 1; }
.hero-grid > .hero-copy { grid-column: 1; grid-row: 1; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hero-copy .display { max-width: 640px; }
/* Die Pille über der Überschrift gehört zur h1 (Stichwort „Hochzeits-DJ bei Passau“ für Google), sieht aber aus wie vorher */
.hero-h1 { display: flex; flex-direction: column; align-items: inherit; }
.hero-h1 .badge { font-family: var(--font-body); }
.hero-h1 .display { display: block; font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); }   /* drei Sätze (Pepes Text 30.10.2026) – etwas kleiner als .display */
.hero-h1 .satz { display: inline-block; }   /* jeder Satz beginnt in einer neuen Zeile, bricht nur um, wenn er allein nicht passt */
.hero-lead { max-width: 560px; margin-top: 22px; }
.hero .cta-row { justify-content: flex-start; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero-note { margin: 18px 0 0; color: var(--fog); font-size: 13px; text-wrap: balance; }   /* schmale Handys: kein „mir“ allein in der zweiten Zeile */

/* ---------- Begrüßung: 3D-Porträt, der Kopf folgt der Maus ---------- */
.hallo { position: relative; margin: 0; }
.hallo-stage { position: relative; }
.hallo-stage::before {               /* Licht hinter dem Porträt */
  content: ""; position: absolute; inset: -12% -4% -8% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 48% at 58% 42%, rgba(216, 180, 106, .24), rgba(80, 70, 228, .18) 55%, rgba(3, 0, 20, 0) 76%);
}
.hallo-card {
  position: relative; width: min(100%, 470px); aspect-ratio: 4 / 5; margin-left: auto;
  overflow: hidden; border-radius: var(--r-block); background: var(--midnight);
}
.hallo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) { .hallo-card:hover .hallo-img { transform: scale(1.03); } }   /* wie bei den anderen Fotos */
.hallo-shade {                        /* Lichtkante + sanfter Übergang ins Dunkel */
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(3, 0, 20, 0) 58%, rgba(3, 0, 20, .5) 100%),
              radial-gradient(120% 90% at 50% 38%, rgba(3, 0, 20, 0) 62%, rgba(3, 0, 20, .32) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* ---------- Pepes Original-Logo baut sich auf (Ebenen aus tools/logo_teile.py) ----------
   Ablauf: Ohrmuscheln ploppen auf → Bügel wächst von beiden Seiten nach oben (Funke, wenn er sich schließt)
   → Kragen klappt auf → Knopf → „Pepe“ schreibt sich → Zeile, Goldlinie, Web-Adresse
   → danach „spielt“ der Kopfhörer: Takt (125 BPM) mit Schallwellen und kleinen Noten. */
@property --logo-z { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pepe-logo {
  --lw: clamp(176px, 16.5vw, 236px);
  --t: 600ms;                                   /* Start des Aufbaus (das Foto ist dann schon da) */
  --tempo: .7;                                  /* Tempo des Aufbaus: 1 = alt, kleiner = schneller (Pepe 23.10.2026) */
  --takt: 480ms;                                /* ein Schlag bei 125 BPM */
  --beat: calc(var(--t) + 3300ms * var(--tempo));              /* ab hier pulsiert der Kopfhörer */
  position: absolute; z-index: 2; bottom: -30px; right: calc(min(100%, 470px) - var(--lw) * .56);
  width: var(--lw); aspect-ratio: var(--seite); pointer-events: none;
}
.logo-teil { position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none; height: auto; }
.logo-kh { position: absolute; inset: 0; transform-origin: var(--bx) var(--by); }
.logo-glanz {                                   /* dunkler Hof: das Logo bleibt auch über dem Foto gut lesbar */
  position: absolute; inset: -12% -24% -10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 0, 20, .8), rgba(3, 0, 20, .6) 52%, rgba(3, 0, 20, 0));
}
.logo-kh::before {                              /* warmes Licht hinter dem Kopfhörer, schlägt im Takt mit */
  content: ""; position: absolute; left: 6%; right: 6%; top: -4%; height: 50%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(241, 217, 160, .34), rgba(216, 180, 106, .1) 60%, rgba(216, 180, 106, 0));
}
/* Schallwellen wie beim Lautsprecher-Symbol: drei Bögen rund um jede Ohrmuschel, die im Takt nacheinander aufleuchten */
.logo-wellen { position: absolute; inset: 0; opacity: 0; }
.logo-wellen--l { --cx: var(--lx); }
.logo-wellen--r { --cx: var(--rx); }
.logo-wellen i {
  --d: .3; position: absolute; width: calc(var(--lw) * var(--d)); aspect-ratio: 1;
  left: calc(var(--cx) - var(--lw) * var(--d) / 2); top: calc(var(--my) - var(--lw) * var(--d) / 2);
  border: 2px solid transparent; border-radius: 50%; opacity: .18;
}
.logo-wellen i:nth-child(2) { --d: .42; }
.logo-wellen i:nth-child(3) { --d: .54; }
.logo-wellen--l i { border-left-color: var(--gold-hi); }
.logo-wellen--r i { border-right-color: var(--gold-hi); }
.logo-wellen b {                                /* kleine Noten, die aus den Muscheln steigen */
  --note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M4.6 1.2 11 0v10.6a2.6 2.1 0 1 1-1.4-1.8V3.1L6 3.8v8.7a2.6 2.1 0 1 1-1.4-1.8z'/%3E%3C/svg%3E");
  position: absolute; top: calc(var(--my) - 15%); width: 6%; aspect-ratio: 3 / 4; opacity: 0;
  background: var(--gold-hi);
  -webkit-mask: var(--note) center / contain no-repeat; mask: var(--note) center / contain no-repeat;
}
.logo-wellen--l b { left: calc(var(--cx) - 17%); }
.logo-wellen--r b { left: calc(var(--cx) + 11%); }
.logo-wellen b + b { top: calc(var(--my) - 3%); }
.logo-funke {                                   /* Funke, wenn sich der Bügel oben schließt */
  position: absolute; left: var(--bx); top: 1.6%; width: 22%; aspect-ratio: 1; opacity: 0;
  transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(241, 217, 160, .45) 35%, rgba(241, 217, 160, 0));
}
@media (prefers-reduced-motion: no-preference) {
  .logo-glanz { animation: logo-ein calc(.9s * var(--tempo)) ease-out var(--t) both; }
  .logo-muschel-l, .logo-muschel-r { transform-origin: 50% 0; animation: logo-muschel calc(.62s * var(--tempo)) cubic-bezier(.3, 1.15, .5, 1) var(--t) both; }
  .logo-muschel-r { animation-delay: calc(var(--t) + 110ms * var(--tempo)); }
  .logo-buegel {
    -webkit-mask-image: conic-gradient(from 0deg at var(--bmx) var(--bmy), transparent var(--logo-z), #000 0 calc(360deg - var(--logo-z)), transparent 0);
    mask-image: conic-gradient(from 0deg at var(--bmx) var(--bmy), transparent var(--logo-z), #000 0 calc(360deg - var(--logo-z)), transparent 0);
    animation: logo-buegel calc(.78s * var(--tempo)) cubic-bezier(.5, 0, .3, 1) calc(var(--t) + 520ms * var(--tempo)) both;
  }
  .logo-funke { animation: logo-funke calc(.7s * var(--tempo)) ease-out calc(var(--t) + 1180ms * var(--tempo)) both; }
  .logo-kragen { transform-origin: 50% 92%; animation: logo-kragen calc(.6s * var(--tempo)) cubic-bezier(.3, 1.2, .5, 1) calc(var(--t) + 1300ms * var(--tempo)) both; }
  .logo-knopf { animation: logo-knopf calc(.5s * var(--tempo)) cubic-bezier(.3, 1.3, .5, 1) calc(var(--t) + 1720ms * var(--tempo)) both; }
  .logo-schrift {
    -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: logo-schreiben calc(1.15s * var(--tempo)) cubic-bezier(.45, .05, .35, 1) calc(var(--t) + 1880ms * var(--tempo)) both;
  }
  .logo-zeile { animation: logo-zeile calc(.65s * var(--tempo)) var(--ease) calc(var(--t) + 2650ms * var(--tempo)) both; }
  .logo-linie { animation: logo-linie calc(.55s * var(--tempo)) var(--ease) calc(var(--t) + 2950ms * var(--tempo)) both; }
  .logo-web { animation: logo-web calc(.6s * var(--tempo)) var(--ease) calc(var(--t) + 3150ms * var(--tempo)) both; }
  /* danach: Musik! */
  /* Takt: 8 Schläge, dann Ruhe (Apple: Zurückhaltung); Maus drauf → spielt wieder */
  .logo-kh { animation: logo-takt var(--takt) cubic-bezier(.25, 0, .35, 1) var(--beat) 8 forwards; }
  .logo-kh::before { animation: logo-glut var(--takt) ease-out var(--beat) 8 forwards; }
  .logo-wellen { animation: logo-ein .9s ease-out var(--beat) both; }
  .logo-wellen i { animation: logo-welle var(--takt) cubic-bezier(.2, .7, .3, 1) var(--beat) 8 forwards; }
  .logo-wellen i:nth-child(2) { animation-delay: calc(var(--beat) + 60ms); }
  .logo-wellen i:nth-child(3) { animation-delay: calc(var(--beat) + 120ms); }
  .logo-wellen--l b { animation: logo-note-l calc(var(--takt) * 8) ease-out calc(var(--beat) + var(--takt) * 2) 1 forwards; }
  .logo-wellen--r b { animation: logo-note-r calc(var(--takt) * 8) ease-out calc(var(--beat) + var(--takt) * 6) 1 forwards; }
  .logo-wellen b + b { animation-delay: calc(var(--beat) + var(--takt) * 10); }
  .logo-wellen--r b + b { animation-delay: calc(var(--beat) + var(--takt) * 14); }
  @media (hover: hover) {
    .pepe-logo:hover :is(.logo-kh, .logo-wellen i, .logo-wellen b), .pepe-logo:hover .logo-kh::before,
    .block:hover .pepe-logo :is(.logo-kh, .logo-wellen i, .logo-wellen b), .block:hover .pepe-logo .logo-kh::before { animation-iteration-count: infinite; }
  }
  .pepe-logo.is-pause .logo-kh, .pepe-logo.is-pause .logo-kh::before,
  .pepe-logo.is-pause .logo-wellen i, .pepe-logo.is-pause .logo-wellen b { animation-play-state: paused; }
}
/* Mit JavaScript wartet der Aufbau, bis alle Teile geladen sind (script.js setzt dann .is-los) */
.js .pepe-logo:not(.is-los) :is(.logo-glanz, .logo-teil, .logo-kh, .logo-funke, .logo-wellen, .logo-wellen i, .logo-wellen b),
.js .pepe-logo:not(.is-los) .logo-kh::before { animation-play-state: paused; }
@media (min-width: 860px) and (max-width: 1279px) {   /* schmalere Spalten: Logo rückt weiter aufs Foto, damit es den Text nicht berührt */
  .pepe-logo { --lw: clamp(168px, 17vw, 220px); right: calc(min(100%, 470px) - var(--lw) * .86); }
}
@keyframes logo-muschel { from { opacity: 0; transform: translateY(-14%) scale(.55); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes logo-buegel { from { --logo-z: 100deg; } to { --logo-z: 0deg; } }
@keyframes logo-funke { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes logo-kragen { from { opacity: 0; transform: scale(.2) rotate(-8deg); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes logo-knopf { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes logo-schreiben { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes logo-zeile { from { opacity: 0; clip-path: inset(0 50%); transform: scaleX(1.06); } to { opacity: 1; clip-path: inset(0 0); transform: none; } }
@keyframes logo-linie { from { transform: scaleX(0); } to { transform: none; } }
@keyframes logo-web { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes logo-takt { 0% { transform: none; } 16% { transform: scale(1.04); } 45% { transform: scale(.996); } 70%, 100% { transform: none; } }
@keyframes logo-glut { 0% { opacity: .35; } 16% { opacity: 1; } 100% { opacity: .35; } }
@keyframes logo-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes logo-welle { 0% { opacity: .18; transform: none; } 14% { opacity: 1; transform: scale(1.05); } 70%, 100% { opacity: .18; transform: none; } }
@keyframes logo-note-l { 0% { opacity: 0; transform: translate(40%, 30%) scale(.5) rotate(-12deg); } 8% { opacity: .9; } 30%, 100% { opacity: 0; transform: translate(-60%, -160%) scale(1) rotate(-18deg); } }
@keyframes logo-note-r { 0% { opacity: 0; transform: translate(-40%, 30%) scale(.5) rotate(12deg); } 8% { opacity: .9; } 30%, 100% { opacity: 0; transform: translate(60%, -160%) scale(1) rotate(18deg); } }
@media (max-width: 859px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > .hallo, .hero-grid > .hero-copy { grid-column: 1; grid-row: auto; }
  .hallo-stage::before {                          /* Licht mittig hinter dem Porträt, innerhalb der Seite */
    inset: -8% 0 -4%;
    background: radial-gradient(40% 46% at 50% 42%, rgba(216, 180, 106, .22), rgba(80, 70, 228, .16) 55%, rgba(3, 0, 20, 0) 76%);
  }
  .hallo-card { width: min(74vw, 360px); margin: 0 auto; }
  .hallo { margin-bottom: 30px; }                 /* Platz für das Logo, das unten über das Foto hinausragt */
  .pepe-logo { --lw: clamp(112px, 34vw, 168px); right: auto; left: calc(50% - min(37vw, 180px) - var(--lw) * .2); bottom: -34px; }
  .hero-copy { align-items: center; text-align: center; }
  .hero .cta-row { justify-content: center; }
}

/* ---------- Pepes Logo im Foto „Live gemixt“ (Hochzeit) – Pepes Wunsch 21.10.2026 ----------
   Dieselben Ebenen wie in der Begrüßung (Block LOGO-FOTO aus tools/logo_teile.py), aber ohne Aufbau: Das Logo steht sofort
   ganz da, der Takt (Pulsieren, Schallwellen, Noten) läuft, sobald das Foto zu sehen ist. Es sitzt rechts neben Pepe auf der
   Wand und wirkt wie von einem Gobo-Projektor: „screen“ mischt es als Licht ins Foto, die Wand scheint durch.
   Die Ebene zoomt beim Drüberfahren mit dem Foto mit, damit das Logo auf der Wand bleibt. */
.foto-logo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  container-type: inline-size; mix-blend-mode: screen;
  transition: transform .9s var(--ease);
}
@media (hover: hover) { .block[data-lightbox]:hover > .foto-logo { transform: scale(1.03); } }
.pepe-logo.pepe-logo--foto {
  --lw: 16cqw; --beat: 0ms;
  top: 8%; left: 64.5%; right: auto; bottom: auto;
  opacity: .92;
  filter: drop-shadow(0 0 .45cqw rgba(241, 217, 160, .45));   /* leichter Lichthof wie beim Projektor */
}
.pepe-logo--foto :is(.logo-muschel-l, .logo-muschel-r, .logo-buegel, .logo-kragen, .logo-knopf, .logo-schrift, .logo-zeile, .logo-linie, .logo-web) {
  animation: none; -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 560px) {                       /* Foto im Format 4:3 – Logo bleibt auf der Wand neben Pepe */
  .pepe-logo.pepe-logo--foto { --lw: 19cqw; top: 13%; left: 65.5%; }
}

/* ---------- Leuchtpunkt (Karte „Basis Pocking“) ---------- */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(216, 180, 106, .18);
}

/* ---------- Fakten-Leiste ---------- */
.facts { position: relative; padding: 8px 0 clamp(48px, 6vw, 80px); }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.facts-row li { position: relative; padding: 6px 20px; text-align: center; }
.facts-row li + li::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: var(--aurora-y); }
.facts-row strong { display: block; color: var(--lilac); font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.facts-row span { display: block; margin-top: 6px; color: var(--fog); font-size: 14px; }
.facts-link { display: block; margin: -6px -8px; padding: 6px 8px; border-radius: var(--r-card); color: inherit; text-decoration: none; transition: background-color .2s; }
@media (hover: hover) { .facts-link:hover { background: rgba(216, 180, 106, .06); } }
.facts-link:focus-visible span { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .facts-link:hover span { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; } }
.facts-row .facts-stars { display: flex; justify-content: center; align-items: center; gap: 4px; height: 1.2em; color: var(--gold); }
.facts-stars .ico { width: .82em; height: .82em; fill: currentColor; stroke: none; }

/* ==========================================================================
   Inhaltsbereiche
   ========================================================================== */

/* ---------- Feature-Raster (ohne Kartenfläche, wie im Original) ---------- */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(36px, 4vw, 48px); }
.feature { position: relative; isolation: isolate; padding: 16px; border-radius: var(--r-card); }
.feature .ico { margin-bottom: 16px; color: var(--lilac); overflow: visible; transform-origin: 0 100%; transition: color .25s, transform .45s var(--ease); }
@media (hover: hover) { .feature:hover .ico { color: var(--gold); } }
.feature h3 { margin: 0 0 8px; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.005em; transition: transform .3s var(--ease); }
.feature p { margin: 0; color: var(--fog); font-size: 15px; line-height: 1.55; transition: transform .3s var(--ease), color .3s ease; }

/* ---------- Leistungs-Kacheln in Bewegung (Pepes Wunsch vom 09.10.2026) ----------
   script.js setzt .is-an (Maus: kurz darüber verweilen; Handy: antippen). Zuerst bewegt sich das Symbol
   passend zum Motiv (Sektgläser stoßen an, Herz schlägt, Discokugel schwingt …), danach tritt der Text mit
   goldenem Rahmen hervor; der Rahmen pulsiert wie ein leichter Herzschlag. Ruhepose = altes Symbol. */
.feature::before, .feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
}
.feature::before {                                   /* Fläche + Goldrahmen */
  background: rgba(16, 9, 58, .45);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55), var(--rim);
  transition: opacity .3s ease;
}
.feature::after {                                    /* Herzschlag: der Rahmen leuchtet kurz auf */
  box-shadow: inset 0 0 0 1px rgba(241, 217, 160, .95), 0 0 20px rgba(216, 180, 106, .22);
}
.feature.is-an .ico { color: var(--gold); transform: scale(1.15); }
.feature.is-an::before { opacity: 1; transition: opacity .5s ease .8s; }
.feature.is-an::after { animation: herzschlag 1.3s ease-in-out 1.1s infinite; }
.feature.is-an h3, .feature.is-an p { transform: translateY(-2px); transition: transform .5s var(--ease) .8s, color .5s ease .8s; }
.feature.is-an p { color: var(--ash); }
@keyframes herzschlag {                              /* „bumm-bumm“ … Pause */
  0%        { opacity: 0;   transform: scale(1); }
  11%       { opacity: 1;   transform: scale(1.012); }
  22%       { opacity: .35; transform: scale(1.004); }
  33%       { opacity: .85; transform: scale(1.01); }
  58%, 100% { opacity: 0;   transform: scale(1); }
}
@keyframes zeile { from { transform: scaleX(0); } to { transform: none; } }      /* Strich wird geschrieben */

/* Sektgläser: werden größer und stoßen an */
.ico-sekt .glas-l { transform-origin: 8.5px 20.5px; }
.ico-sekt .glas-r { transform-origin: 17.9px 20.4px; }
.ico-sekt .funken { transform-origin: 12.1px 4.2px; opacity: 0; }
.is-an .ico-sekt .glas-l { animation: sekt-l 1s .12s both; }
.is-an .ico-sekt .glas-r { animation: sekt-r 1s .12s both; }
.is-an .ico-sekt .funken { animation: funken .65s ease-out .42s both; }
@keyframes sekt-l {
  0%   { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  30%  { transform: rotate(4deg); animation-timing-function: ease-out; }
  42%  { transform: rotate(1.6deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes sekt-r {
  0%   { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  30%  { transform: rotate(-4deg); animation-timing-function: ease-out; }
  42%  { transform: rotate(-1.6deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes funken { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
/* Mikrofon: Schall geht nach beiden Seiten weg */
.ico-mikro .schall { opacity: 0; }
.is-an .ico-mikro .schall-l { animation: schall-l .55s ease-out .12s 2 both; }
.is-an .ico-mikro .schall-r { animation: schall-r .55s ease-out .12s 2 both; }
@keyframes schall-l { 0% { opacity: 0; transform: translateX(1.2px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-1.6px); } }
@keyframes schall-r { 0% { opacity: 0; transform: translateX(-1.2px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(1.6px); } }
/* Herz: schlägt zweimal und füllt sich leicht golden */
.ico-herz .herz { transform-origin: 12px 13.5px; transition: fill .4s ease; }
.is-an .ico-herz .herz { fill: rgba(216, 180, 106, .28); animation: herz-ico 1s ease-in-out .12s both; }
@keyframes herz-ico { 0%, 62%, 100% { transform: none; } 14% { transform: scale(1.2); } 28% { transform: scale(.97); } 42% { transform: scale(1.12); } }
/* Discokugel: schwingt an der Aufhängung, Lichtpunkte blitzen */
.ico-disco .kugel { transform-origin: 12px 1.5px; }
.ico-disco .glanz { opacity: 0; }
.ico-disco .glanz-1 { transform-origin: 20.6px 5.2px; }
.ico-disco .glanz-2 { transform-origin: 3.2px 7.6px; }
.ico-disco .glanz-3 { transform-origin: 20.4px 19.8px; }
.is-an .ico-disco .kugel { animation: disco 1.15s ease-in-out .12s both; }
.is-an .ico-disco .glanz-1 { animation: glanz .6s ease-out .3s both; }
.is-an .ico-disco .glanz-2 { animation: glanz .6s ease-out .55s both; }
.is-an .ico-disco .glanz-3 { animation: glanz .6s ease-out .78s both; }
@keyframes disco { 0%, 100% { transform: none; } 20% { transform: rotate(9deg); } 44% { transform: rotate(-6.5deg); } 64% { transform: rotate(3.5deg); } 82% { transform: rotate(-1.5deg); } }
@keyframes glanz { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(.5) rotate(90deg); } }
/* Checkliste: Häkchen werden der Reihe nach gesetzt */
.ico-liste .brett { transform-origin: 12px 21.5px; }
.ico-liste .zeile-1 { transform-origin: 15px 10px; }
.ico-liste .zeile-2 { transform-origin: 15px 16px; }
.is-an .ico-liste .brett { animation: brett .95s ease-in-out .1s both; }
.is-an .ico-liste .haken-1 { animation: haken .32s ease-out .2s both; }
.is-an .ico-liste .zeile-1 { animation: zeile .22s ease-out .48s both; }
.is-an .ico-liste .haken-2 { animation: haken .32s ease-out .6s both; }
.is-an .ico-liste .zeile-2 { animation: zeile .22s ease-out .88s both; }
@keyframes brett { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(-4deg) translateY(-.4px); } }
@keyframes haken { from { stroke-dasharray: 6.5; stroke-dashoffset: 6.5; } to { stroke-dasharray: 6.5; stroke-dashoffset: 0; } }
/* Moderation: Mikrofon hebt sich, Schallwellen pulsieren */
.ico-moderation .handmikro { transform-origin: 9.5px 21.5px; }
.is-an .ico-moderation .handmikro { animation: handmikro 1s ease-in-out .1s both; }
.is-an .ico-moderation .welle-1 { animation: welle-puls .5s ease-out .15s 2 both; }
.is-an .ico-moderation .welle-2 { animation: welle-puls .5s ease-out .27s 2 both; }
@keyframes handmikro { 0%, 100% { transform: none; } 25%, 70% { transform: rotate(7deg); } }
@keyframes welle-puls { 0% { opacity: .15; transform: translateX(-1.2px); } 55% { opacity: 1; transform: translateX(.7px); } 100% { opacity: 1; transform: none; } }
/* Handschlag: kurzes Schütteln */
.ico-hand .haende { transform-origin: 12px 13px; }
.is-an .ico-hand .haende { animation: haendedruck .95s ease-in-out .1s both; }
@keyframes haendedruck {
  0%, 100% { transform: none; }
  18% { transform: translateY(-1.3px) rotate(-3deg); }
  38% { transform: translateY(1.1px) rotate(2deg); }
  58% { transform: translateY(-.9px) rotate(-1.5deg); }
  78% { transform: translateY(.5px) rotate(.8deg); }
}
/* Schraubenschlüssel: zieht zweimal an */
.ico-werkzeug .schluessel { transform-origin: 15.6px 8.4px; }
.is-an .ico-werkzeug .schluessel { animation: schrauben 1.05s ease-in-out .1s both; }
@keyframes schrauben { 0%, 100% { transform: none; } 24% { transform: rotate(24deg); } 42% { transform: rotate(4deg); } 66% { transform: rotate(24deg); } 84% { transform: rotate(2deg); } }
/* Live gemixt: Pegel tanzen wie ein Equalizer */
.ico-welle .balken { transform-origin: 12px 12px; }
.is-an .ico-welle .b1 { animation: eq-1 1s ease-in-out .1s both; }
.is-an .ico-welle .b2 { animation: eq-2 1s ease-in-out .1s both; }
.is-an .ico-welle .b3 { animation: eq-3 1s ease-in-out .1s both; }
.is-an .ico-welle .b4 { animation: eq-4 1s ease-in-out .1s both; }
@keyframes eq-1 { 0%, 100% { transform: none; } 25% { transform: scaleY(1.45); } 50% { transform: scaleY(.6); } 75% { transform: scaleY(1.25); } }
@keyframes eq-2 { 0%, 100% { transform: none; } 25% { transform: scaleY(.55); } 50% { transform: scaleY(1.08); } 75% { transform: scaleY(.7); } }
@keyframes eq-3 { 0%, 100% { transform: none; } 25% { transform: scaleY(1.3); } 50% { transform: scaleY(.55); } 75% { transform: scaleY(1.15); } }
@keyframes eq-4 { 0%, 100% { transform: none; } 25% { transform: scaleY(2.3); } 50% { transform: scaleY(1.2); } 75% { transform: scaleY(2); } }
/* Uhr: der Minutenzeiger dreht eine Runde, der Stundenzeiger rückt eine Stunde weiter */
.ico-uhr .zeiger-m, .ico-uhr .zeiger-h { transform-origin: 12px 12px; }
.ico-uhr .zeiger-h { transition: transform .5s var(--ease); }
.is-an .ico-uhr .zeiger-m { animation: zeiger-m 1.1s cubic-bezier(.55, 0, .25, 1) .1s both; }
.is-an .ico-uhr .zeiger-h { transform: rotate(30deg); transition: transform 1.1s cubic-bezier(.55, 0, .25, 1) .1s; }
@keyframes zeiger-m { from { transform: none; } to { transform: rotate(360deg); } }
/* Sprechblase: ploppt auf, jemand tippt einen Wunsch */
.ico-chat .blase { transform-origin: 3.5px 20.5px; }
.ico-chat .punkte circle { fill: currentColor; stroke: none; opacity: 0; }
.is-an .ico-chat .blase { animation: blase .55s var(--ease) .1s both; }
.is-an .ico-chat .punkte circle { animation: tippen 1s ease-in-out .2s both; }
.is-an .ico-chat .punkte circle:nth-child(2) { animation-delay: .32s; }
.is-an .ico-chat .punkte circle:nth-child(3) { animation-delay: .44s; }
@keyframes blase { 0%, 100% { transform: none; } 45% { transform: scale(1.08); } }
@keyframes tippen {
  0% { opacity: 0; transform: none; } 15% { opacity: 1; } 30% { transform: translateY(-1.3px); } 50% { transform: none; }
  70% { transform: translateY(-1.3px); } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; }
}
/* Firmengebäude: die Fenster gehen nacheinander an */
.ico-gebaeude .f1 { transform-origin: 8.5px 8.5px; }
.ico-gebaeude .f2 { transform-origin: 15.5px 8.5px; }
.ico-gebaeude .f3 { transform-origin: 8.5px 12.5px; }
.ico-gebaeude .f4 { transform-origin: 15.5px 12.5px; }
.is-an .ico-gebaeude .fenster { stroke: var(--gold-hi); animation: fenster .4s ease-out .15s both; }
.is-an .ico-gebaeude .f2 { animation-delay: .3s; }
.is-an .ico-gebaeude .f3 { animation-delay: .45s; }
.is-an .ico-gebaeude .f4 { animation-delay: .6s; }
@keyframes fenster { 0% { opacity: .15; transform: none; } 50% { opacity: 1; transform: scale(1.9, 1.5); } 100% { opacity: 1; transform: none; } }
/* Programm: Ringe wippen, die Zeilen werden geschrieben */
.ico-agenda .ring { transform-origin: 12px 4.5px; }
.ico-agenda .zeile-1 { transform-origin: 7.5px 13.5px; }
.ico-agenda .zeile-2 { transform-origin: 7.5px 17px; }
.is-an .ico-agenda .ring { animation: ring .5s ease-out .1s both; }
.is-an .ico-agenda .ring-2 { animation-delay: .18s; }
.is-an .ico-agenda .zeile-1 { animation: zeile .3s ease-out .35s both; }
.is-an .ico-agenda .zeile-2 { animation: zeile .38s ease-out .6s both; }
@keyframes ring { 0%, 100% { transform: none; } 40% { transform: translateY(-1.4px); } 70% { transform: translateY(.3px); } }
/* Farbpalette: kippt leicht, die Farbtupfer leuchten in Lavendel, Violett und Gold auf */
.ico-palette .brett { transform-origin: 12px 20px; }
.ico-palette .farbe-1 { --f: #b7a4fb; transform-origin: 7.5px 11px; }
.ico-palette .farbe-2 { --f: #7f76f2; transform-origin: 10px 7px; }
.ico-palette .farbe-3 { --f: var(--gold); transform-origin: 14.5px 7px; }
.is-an .ico-palette .brett { animation: palette .9s ease-in-out .1s both; }
.is-an .ico-palette .farbe { animation: farbe .45s ease-out .2s both; }
.is-an .ico-palette .farbe-2 { animation-delay: .38s; }
.is-an .ico-palette .farbe-3 { animation-delay: .56s; }
@keyframes palette { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(3deg); } }
@keyframes farbe {
  0%   { stroke: currentColor; fill: transparent; transform: none; }
  50%  { stroke: var(--f); fill: var(--f); transform: scale(1.7); }
  100% { stroke: var(--f); fill: var(--f); transform: none; }
}
/* Rechnung: der Beleg hebt sich, die Zeilen werden gedruckt */
.ico-rechnung .beleg { transform-origin: 12px 21px; }
.ico-rechnung .zeile-1 { transform-origin: 9px 8px; }
.ico-rechnung .zeile-2 { transform-origin: 9px 12px; }
.ico-rechnung .zeile-3 { transform-origin: 9px 16px; }
.is-an .ico-rechnung .beleg { animation: beleg .9s ease-in-out .1s both; }
.is-an .ico-rechnung .zeile-1 { animation: zeile .25s ease-out .25s both; }
.is-an .ico-rechnung .zeile-2 { animation: zeile .25s ease-out .45s both; }
.is-an .ico-rechnung .zeile-3 { animation: zeile .2s ease-out .65s both; }
@keyframes beleg { 0%, 100% { transform: none; } 30% { transform: translateY(-1.2px) rotate(-3deg); } 70% { transform: translateY(-.6px) rotate(-1deg); } }
@media (hover: none) { .feature, .spec { cursor: pointer; -webkit-tap-highlight-color: transparent; } }   /* Handy: antippen */
@media (prefers-reduced-motion: reduce) {
  .feature.is-an .ico, .feature.is-an h3, .feature.is-an p,
  .spec.is-an .ico, .spec.is-an h3, .spec.is-an p { transform: none; }
  .feature.is-an::before, .spec.is-an::before { transition-delay: 0s; }
  .feature.is-an::after { animation: none; }
}

/* ---------- Über mich ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.about .block--portrait { max-width: 470px; }
/* Porträt auf „Über mich“ mit goldenem Knopf (Pepe, 06.11.2026 – Idee von Michaels Seite, eigene Umsetzung in Pepes Farben) */
.portraet { position: relative; max-width: 470px; }
.portraet .block--portrait::after { background: linear-gradient(180deg, rgba(3, 0, 20, 0) 64%, rgba(3, 0, 20, .5) 100%); }
.seit-knopf {
  position: absolute; right: -22px; bottom: -22px; z-index: 4; margin: 0;
  display: grid; place-content: center; justify-items: center;
  width: 136px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--gold-hi), var(--gold) 52%, #b98f4c);
  box-shadow: 0 0 0 6px rgba(216, 180, 106, .16), 0 16px 44px rgba(216, 180, 106, .3), inset 0 0 0 1px rgba(255, 255, 255, .35);
  color: var(--gold-ink); font-family: var(--font-head); line-height: 1.1; text-align: center;
}
.seit-knopf::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 20, 5, .22); }   /* Ring wie ein Plattenetikett */
.seit-knopf span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.seit-knopf b { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.01em; margin: 2px 0 4px; }
.about-copy .prose { margin-top: 4px; }
.about-copy .h2, .biz-copy .h2, .regions-copy .h2, .anfrage-info .h2, .booth-copy .h2, .musik-copy .h2 { margin-bottom: 20px; }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose .lead { color: var(--lilac); }
.card--note { display: grid; grid-template-columns: 24px 1fr; gap: 16px; margin-top: 28px; }
.card--note .ico { color: var(--gold); }
.card--note h3 { margin: 0 0 6px; font-size: 17px; }
.card--note p { margin: 0; color: var(--fog); font-size: 15px; }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.sign img { width: 104px; }
.sign span { color: var(--fog); font-size: 13px; }
.about-copy .link, .musik-copy .link { margin-top: 22px; }
/* Startseite „Servus, ich bin Pepe!“ + „Meine Musik“ (Marken-Plan 30.10.2026) – nur vorhandene Bausteine:
   .about (Foto + Text), .review (Bewertungs-Kachel als Zitat), .pills, Video-Block mit Pause-Knopf wie bei der Technik */
.musik-start { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 104px); align-items: stretch; }
.musik-copy .pills { justify-content: flex-start; margin-top: 24px; }
.nobr { white-space: nowrap; }   /* Pille oben: am schmalen Handy sauber in zwei Zeilen „Hochzeits- & Event-DJ“ / „bei Passau · seit 2006“ */   /* schmale Handys: zwei gleich lange Zeilen statt „2006“ allein */
.review.zitat { max-width: 560px; margin-top: 28px; }   /* .review setzt margin: 0 – deshalb beide Klassen */
.zitat .stichwort { color: var(--gold-hi); background-size: 100% .42em; }   /* Goldmarker steht fest – die Kachel läuft hier nicht */

/* ---------- Momente: die Fotos als Vorhang (seit 27.10.2026, Vorlage „Curtain Split Hero“) ----------
   Die 6 Fotos liegen zuerst als Stapel in der Mitte und teilen sich beim Hineinscrollen nach links und rechts
   (je 3 im Bogen), in der Mitte erscheinen Überschrift und Text. script.js setzt nur --p (0 = Stapel, 1 = offen)
   und mit der Maus --mx/--my (−1 … 1, leichtes Mitgehen); alle Lagen rechnet dieses CSS (Formeln wie die Vorlage).
   Ohne JavaScript und bei „Bewegung reduzieren“ steht der Vorhang offen. Den Stapel antippen öffnet ihn sofort. */
@property --h { syntax: "<number>"; inherits: false; initial-value: 0; }   /* Maus über einem Foto: 0 → 1 (weich) */
.vorhang {
  --p: 1;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  height: clamp(540px, 44vw, 620px);
  border-radius: var(--r-block);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--rim-2);
  container: vorhang / size;
}
.js .vorhang { --p: 0; }
.vorhang.is-zu { cursor: pointer; }
/* Funken beim Öffnen (script.js „Feuerwerk“): eigene Leinwand über der Seite, damit die Funken über den Rand der
   Bühne hinausfliegen können; liegt unter Menüleiste und Knöpfen, fängt keine Klicks ab. Hintergrund der Bühne ohne
   Punktraster, schlicht wie die übrigen Flächen (Pepe 28.10.2026). */
.funken { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
.vorhang > * { --kh: 34cqh; --kb: calc(var(--kh) * .8); }   /* Fotokarte 4 : 5 */
.vorhang-text {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: min(560px, calc(68cqw - var(--kb) - 48px));
  opacity: clamp(0, (var(--p) - .3) * 2, 1);
  translate: 0 calc((1 - clamp(0, (var(--p) - .25) / .6, 1)) * 30px);
}
.vorhang-text .badge { margin-bottom: 18px; }
.vorhang-text .h2 { font-size: clamp(1.625rem, 4.2cqw, 3rem); }
.vorhang-linie { width: 64px; height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); scale: clamp(0, (var(--p) - .35) * 2, 1) 1; }
.vorhang-text .lead { color: var(--fog); font-size: clamp(.9375rem, 1.5cqw, 1.0625rem); }
.vorhang > figure {
  /* s = Seite (−1 links, 1 rechts) · w = Reihe 0–2 · n = Höhe −.5 … .5 · k = 1: mittlere Reihe, weiter außen (Bogen) */
  --s: -1; --w: 0; --n: -.5; --k: 0;
  --e: calc(1 - (1 - var(--p)) * (1 - var(--p)) * (1 - var(--p)));   /* weich auslaufend */
  --x0: calc(var(--s) * var(--w) * 4px); --y0: calc(var(--n) * 10px); --r0: calc(var(--s) * var(--w) * 2deg);
  --x1: calc(var(--s) * (34cqw + var(--k) * 2.5cqw)); --y1: calc(var(--n) * 58cqh); --r1: calc(var(--s) * var(--n) * 18deg);
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--kb); height: var(--kh); border-radius: var(--r-card);
  box-shadow: 0 18px 36px -14px rgba(3, 0, 20, .9);
  translate: calc(-50% + var(--x0) + (var(--x1) - var(--x0)) * var(--e) + var(--s) * var(--mx, 0) * 16px * var(--e))
             calc(-50% + var(--y0) + (var(--y1) - var(--y0)) * var(--e) + var(--my, 0) * 14px * var(--e));
  rotate: calc((var(--r0) + (var(--s) * 14deg - var(--r0)) * clamp(0, var(--p) / .45, 1) + (var(--r1) - var(--s) * 14deg) * clamp(0, (var(--p) - .45) / .55, 1)) * (1 - var(--h, 0)));
  scale: calc(1 - .08 * var(--p) + (.08 * var(--p) + .08) * var(--h, 0));
  transition: --h .45s var(--ease);
}
.vorhang > figure:nth-of-type(even) { --s: 1; }
.vorhang > figure:nth-of-type(n+3) { --w: 1; --n: 0; --k: 1; z-index: 3; }
.vorhang > figure:nth-of-type(n+5) { --w: 2; --n: .5; --k: 0; }
.vorhang > figure:is(:nth-of-type(2), :nth-of-type(5)) { z-index: 5; }
.vorhang > figure:nth-of-type(6) { z-index: 1; }
.vorhang:not(.is-zu) > figure:has(:focus-visible) { --h: 1; z-index: 50; }
@media (hover: hover) { .vorhang:not(.is-zu) > figure:hover { --h: 1; z-index: 50; } }   /* Tastatur: wie Maus */
@media (hover: hover) { .vorhang:not(.is-zu) > figure:hover > img { transform: scale(1.1); } }
@media (hover: hover) { .vorhang:not(.is-zu) > figure:hover::before { box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .6), var(--rim-2); } }
.vorhang.is-zu .zoom-btn { pointer-events: none; }   /* zu: der ganze Stapel ist eine Schaltfläche (öffnet), Tastatur erreicht die Fotos weiter */
@container vorhang (max-width: 599px) {   /* Handy: Karten an den Rand, damit der Text in der Mitte Platz hat */
  .vorhang > * { --kb: 22cqw; --kh: calc(var(--kb) * 1.5); }   /* schmal und hoch (2 : 3) */
  .vorhang > figure { --x1: calc(var(--s) * (50cqw - var(--kb) / 2 - 6px - (1 - var(--k)) * 2.5cqw)); --y1: calc(var(--n) * 70cqh); }
  .vorhang-text { max-width: calc(100cqw - 2 * var(--kb) - 28px); }
  .vorhang-text .badge { margin-bottom: 12px; }
  .vorhang-text .h2 { font-size: clamp(1.25rem, 6.8cqw, 1.75rem); }
  .vorhang-linie { margin: 12px 0; }
  .vorhang-text .lead { font-size: clamp(.8125rem, 3.8cqw, .9375rem); line-height: 1.5; }
  .vorhang .ki-chip { top: auto; bottom: 3px; left: 3px; right: 3px; padding: 2px; font-size: 10px; line-height: 1.2; letter-spacing: 0; white-space: normal; text-align: center; }   /* unten, damit der Hinweis bei zwei Zeilen keine Gesichter verdeckt */
}
@media (max-width: 640px) { .vorhang { height: 620px; } }
/* Hinweis an Fotos mit KI-nachgestellten Personen (echtes Paar wollte nicht gezeigt werden) – auf allen Geräten sichtbar */
.ki-chip {
  position: absolute; top: 10px; right: 10px; z-index: 3; pointer-events: none;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(3, 0, 20, .64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--lilac); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: .01em;
}

/* ---------- Mein Motto (Pepes Wunsch 21.10.2026) – zwischen Galerie „Momente“ und Musik ----------
   „Man muss das Leben tanzen.“ – bewusst ohne Autor, als Pepes Motto (Begründung: CLAUDE.md, Regel 20).
   Beim Hineinscrollen tanzen die Buchstaben von „tanzen“ einmal; mit der Maus darauf wiegen sie sich im Takt (125 BPM).
   Bei „Bewegung reduzieren“ steht alles ruhig. Screenreader lesen das Wort normal (die Einzelbuchstaben sind versteckt). */
.motto { position: relative; padding-block: clamp(40px, 5.5vw, 72px); text-align: center; }
.motto::before {                                   /* warmes Licht hinter dem Satz */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 72% at 50% 58%, rgba(216, 180, 106, .1), rgba(80, 70, 228, .07) 55%, rgba(3, 0, 20, 0) 76%);
}
.motto .badge { margin-bottom: 18px; }
.motto-zitat { max-width: 920px; margin: 0 auto; }
.motto-zitat p {
  margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--lilac);
  font-size: clamp(2.1rem, 1.25rem + 3.4vw, 3.8rem); line-height: 1.14; letter-spacing: -.016em; text-wrap: balance;
}
.motto-tanz { white-space: nowrap; }
.motto-buchstaben { -webkit-user-select: none; user-select: none; }     /* beim Kopieren zählt nur das unsichtbare Wort */
.motto-buchstaben > span {
  display: inline-block; transform-origin: 50% 85%;
  background: var(--gold-text); background-size: 600% 100%; background-position: calc(var(--n) * 20%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motto-buchstaben > span:nth-child(odd) { --r: -6deg; }
.motto-buchstaben > span:nth-child(even) { --r: 6deg; }
@media (forced-colors: active) { .motto-buchstaben > span { background: none; color: CanvasText; } }
@media (prefers-reduced-motion: no-preference) {
  .js .motto-zitat.is-in .motto-buchstaben > span { animation: motto-tanz 1.15s cubic-bezier(.35, .1, .3, 1) calc(650ms + var(--n) * 85ms) both; }
  @media (hover: hover) {
    .js .motto-zitat.is-in:hover .motto-buchstaben > span {
      animation: motto-tanz 1.15s cubic-bezier(.35, .1, .3, 1) calc(650ms + var(--n) * 85ms) both,
                 motto-wiegen 480ms ease-in-out calc(var(--n) * 60ms) infinite;
    }
  }
}
@keyframes motto-tanz { 0%, 100% { transform: none; } 22% { transform: translateY(-.24em) rotate(-9deg); } 48% { transform: translateY(.03em) rotate(7deg); } 72% { transform: translateY(-.08em) rotate(-3deg); } }
@keyframes motto-wiegen { 0%, 100% { transform: none; } 50% { transform: translateY(-.09em) rotate(var(--r)); } }

/* ---------- Musik ---------- */
.music { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; margin-bottom: clamp(40px, 5vw, 64px); }
.player {
  display: flex; flex-direction: column; min-width: 0;
  overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(180deg, #0b0728 0%, var(--midnight) 36%);
  box-shadow: inset 0 0 0 1px rgba(145, 142, 160, .16), inset 0 1px 0 rgba(255, 255, 255, .07), var(--rim);
}
.player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.player-title { display: flex; align-items: center; gap: 8px; color: var(--lilac); font-weight: 500; }
.player-title .ico { width: 18px; height: 18px; color: var(--gold); }
.player-meta { color: var(--fog); font-size: 13px; text-align: right; }
.player-tabs { display: flex; gap: 4px; padding: 12px 14px 0; overflow-x: auto; scrollbar-width: none; }
.player-tabs::-webkit-scrollbar { display: none; }
.player-tabs button {
  flex: none; height: 34px; padding: 0 14px;
  border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--fog); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color .2s, background-color .2s;
}
@media (hover: hover) { .player-tabs button:hover { color: var(--lilac); } }
.player-tabs button[aria-selected="true"] { background: var(--indigo); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -2px 0 var(--gold); color: var(--lilac); }
.player-panel { flex: 1; padding: 8px 8px 12px; }
.tracks { margin: 0; padding: 0; list-style: none; }
.tracks li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-btn); transition: background-color .3s; }
.tracks li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.t-n { color: var(--fog); font-size: 13px; font-variant-numeric: tabular-nums; }
.t-t strong { display: block; color: var(--lilac); font-size: 15px; font-weight: 500; line-height: 1.35; }
.t-t span { display: block; color: var(--fog); font-size: 13px; }
.tracks li.is-playing { background: rgba(216, 180, 106, .07); }
.tracks li.is-playing .t-n { color: var(--gold); }
.player-now { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--fog); font-size: 13px; }
.player-now b { color: var(--lilac); font-weight: 500; }
.player-now-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar { flex: 1; min-width: 48px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.player-bar i { display: block; width: 0; height: 100%; background: var(--gold); }
.player.is-running .player-bar i { animation: progress 3.6s linear infinite; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.eq i { width: 3px; height: 30%; border-radius: 1px; background: var(--gold); }
.player.is-running .eq i { animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s !important; }
.eq i:nth-child(3) { animation-delay: -.6s !important; }
.eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.music .block--tall { aspect-ratio: auto; min-height: 380px; }
.music .block--tall > img { position: absolute; inset: 0; object-position: 50% 20%; }

/* ---------- Pakete ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan {
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: var(--r-block);
  background: var(--midnight); box-shadow: var(--rim), var(--edge);
}
.plan-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; }
.plan-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 3, 23, 0) 45%, var(--midnight) 100%); }
.plan-body { display: flex; flex: 1; flex-direction: column; padding: 0 28px 28px; }
.plan-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  margin: -14px 0 14px; padding: 5px 11px 5px 9px;
  position: relative; z-index: 1;
  border-radius: var(--r-badge);
  background: rgba(16, 9, 58, .92); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .45);
  color: var(--gold); font-size: 12px; font-weight: 500;
}
.plan-tag .ico { width: 14px; height: 14px; }
.plan-name { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1.2; letter-spacing: -.01em; }
.plan-time { margin: 6px 0 0; color: var(--gold); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-desc { margin: 12px 0 0; color: var(--fog); font-size: 15px; }
.checks { display: grid; gap: 10px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ash); font-size: 15px; line-height: 1.45; }
.checks .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--gold); stroke-width: 2; }
.plan-setup { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--fog); font-size: 13px; }
.plan-setup .ico { width: 15px; height: 15px; }
.plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 24px; }
.plan-price { margin: 0; color: var(--lilac); font-family: var(--font-head); font-size: 18px; font-weight: 500; }

/* ---------- Preise-Seite (seit 27.10.2026; Vorlage beats-per-micha.de/preise.html – nicht 1 : 1, in Pepes Worten) ----------
   Zwei Richtwert-Karten (nutzen die Klassen der Paket-Karten), Fakten-Reihe wie auf der Startseite, Hochzeitsrechner,
   „Was den Preis ausmacht“ in den Kacheln des Ablaufs. Regler und Auswahl sind echte Formularfelder (accent-color: Gold). */
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.preis { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-block); }
.preis .plan-tag { margin-top: 0; }
.preis-betrag { margin: 16px 0 0; font-family: var(--font-head); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.preise-fuss { max-width: 680px; margin: 20px auto 0; color: var(--fog); font-size: 13px; text-align: center; }
.preise-fakten { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; }
.rechner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); max-width: 980px; margin: 0 auto; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-block); }
.rechner-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rechner-label { margin: 0; color: var(--lilac); font-size: 15px; font-weight: 500; }
.rechner-zeile output { color: var(--gold); font-family: var(--font-head); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rechner input[type="range"] { display: block; width: 100%; margin: 14px 0 26px; accent-color: var(--gold); cursor: pointer; }
.rechner-stile { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rechner-stile legend { margin-bottom: 12px; padding: 0; }
.stil {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px;
  border-radius: var(--r-card); background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer; transition: box-shadow .2s, background-color .2s;
}
.stil input { grid-row: span 2; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--gold); }
.stil strong { color: var(--lilac); font-size: 15px; font-weight: 500; }
.stil span { color: var(--fog); font-size: 13px; line-height: 1.45; }
@media (hover: hover) { .stil:hover { box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); } }
.stil:has(:checked) { background: rgba(216, 180, 106, .06); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .7); }
.rechner-ergebnis {
  display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
  background: radial-gradient(80% 90% at 100% 0%, rgba(80, 70, 228, .18), transparent 60%), rgba(255, 255, 255, .02);
}
.rechner-spanne { display: block; margin-top: 6px; font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); text-wrap: balance; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.rechner-dj { margin: 16px 0 0; color: var(--ash); font-size: 15px; }
.rechner-dj strong { color: var(--gold); font-weight: 500; }
.rechner-hinweis { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--fog); font-size: 12.5px; line-height: 1.5; }
.rechner-hinweis a { color: inherit; text-underline-offset: 2px; }
@media (hover: hover) { .rechner-hinweis a:hover { color: var(--lilac); } }
.preise-schluss { margin-bottom: 0; }
.preise-schluss > .link { margin-top: 28px; }
@media (max-width: 860px) { .preise, .rechner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pakete fliegen ein (Pepes Wunsch vom 09.10.2026) ----------
   Beim Herunterscrollen fliegt das große Paket von links, das kompakte von rechts in die Mitte (leicht
   gedreht, mit Bewegungsunschärfe, kurzer Goldblitz bei der Landung). Inhalt, Preis und Knopf
   stehen sofort da (seit 23.10.2026 – nur die Karten fliegen). script.js setzt .einflug, dann je Karte .is-da (Flug).
   Ohne JavaScript und bei
   „Bewegung reduzieren“ steht alles sofort da. Zeiten: --t0 = Versatz der rechten Karte. */
#pakete { overflow-x: clip; }                 /* fliegende Karten erzeugen kein Querscrollen */
.plans { position: relative; }               /* Bezug für die Messung in script.js */
.plan { position: relative; }
.plan::after {                                /* Goldblitz bei der Landung */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(241, 217, 160, .9), inset 0 0 48px rgba(216, 180, 106, .16);
}
/* Ausgangslage schon beim ersten Bild (Klasse .js setzt der Kopf der Seite) – sonst würden sichtbare Karten
   erst wegfliegen. script.js fügt .is-da hinzu. */
@media (prefers-reduced-motion: no-preference) {
  .js .plan[data-einflug] {
    --t0: 0ms;
    opacity: 0; filter: blur(6px);
    transform: translateX(calc(-100% - 14vw)) rotate(-9deg) scale(.88);
    transition: transform 1.25s cubic-bezier(.25, .95, .3, 1) var(--t0), opacity .5s ease var(--t0), filter .9s ease var(--t0);
  }
  .js .plan[data-einflug="rechts"] { --t0: 160ms; transform: translateX(calc(100% + 14vw)) rotate(9deg) scale(.88); }
  .js .plan[data-einflug].is-da { opacity: 1; filter: blur(0); transform: none; }
  .js .plan[data-einflug].sofort, .js .plan[data-einflug].sofort *, .js .plan[data-einflug].sofort *::before, .js .plan[data-einflug].sofort *::after {
    transition-delay: 0s !important; animation-delay: 0s !important;    /* Tastatur-Fokus: ohne Warten */
  }
  .js .plan[data-einflug].is-da::after { animation: landung 1.2s ease-out calc(var(--t0) + 780ms) both; }
}
/* Handy/Tablet (Karten untereinander, Pepe 28.10.2026: „das Kompakte Paket slidet nicht rein wie das erste“): Die zweite
   Karte fliegt erst beim Wischen – dann muss man den Flug sehen. Deshalb hier ohne Unschärfe (ein Blur-Übergang auf
   so großer Fläche ruckelt am iPhone, die Karte „springt“ dann nur), ohne Versatz der rechten Karte und mit kurzem
   Einblenden (0,3 s statt 0,5 s), damit die Karte schon während der Bewegung zu sehen ist. Nur transform + opacity. */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .js .plan[data-einflug] { filter: none; transition: transform 1.25s cubic-bezier(.25, .95, .3, 1), opacity .3s ease; }
  .js .plan[data-einflug="rechts"] { --t0: 0ms; }
}
@keyframes landung { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aufbau { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes zeile { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes haken { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes glanz { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(330%) skewX(-20deg); } }
@media print { .js .plan[data-einflug], .js .plan[data-einflug] * { opacity: 1 !important; transform: none !important; filter: none !important; -webkit-mask: none !important; mask: none !important; } }
.included { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; padding: 20px 28px; }
.included-head { margin: 0; color: var(--lilac); font-family: var(--font-head); font-size: 16px; font-weight: 500; white-space: nowrap; }
.included-list { display: flex; flex: 1; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.included-list li { display: flex; align-items: center; gap: 8px; color: var(--ash); font-size: 14px; }
.included-list .ico { width: 18px; height: 18px; color: var(--gold); }
.fineprint { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; max-width: 1000px; margin: 32px auto 0; text-align: center; }   /* mittig unter den Paketen */
.fineprint div { flex: 0 1 272px; padding: 0 4px; }
.fineprint dt { margin-bottom: 4px; color: var(--lilac); font-size: 13px; font-weight: 500; }
.fineprint dd { margin: 0; color: var(--fog); font-size: 13px; line-height: 1.5; }
.fineprint a, .qa-a a, .prose a, .kapitel-text a, .beitrag-text p a, .beitrag-blick .quelle a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(216, 180, 106, .4); text-underline-offset: 3px; }
@media (hover: hover) { .fineprint a:hover, .qa-a a:hover, .prose a:hover, .kapitel-text a:hover, .beitrag-text p a:hover, .beitrag-blick .quelle a:hover { color: var(--lilac); } }

/* ---------- Technik ---------- */
.tech { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.block--reel { aspect-ratio: auto; min-height: 520px; }
.block--reel > video { position: absolute; inset: 0; }
.video-btn {
  position: absolute; right: 16px; top: 16px; z-index: 5;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(6, 3, 23, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--lilac); cursor: pointer;
}
.video-btn .ico { width: 16px; height: 16px; }
.video-btn .ico--play { fill: currentColor; stroke: none; }
.video-btn .ico--pause { display: none; stroke-width: 2.4; }
.video-btn.is-playing .ico--play { display: none; }
.video-btn.is-playing .ico--pause { display: block; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.spec {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px;
  padding: 20px; border-radius: var(--r-card);
  background: var(--midnight); box-shadow: var(--rim), var(--edge);
}
.spec .ico { color: var(--lilac); overflow: visible; transition: color .25s, transform .45s var(--ease); }
@media (hover: hover) { .spec:hover .ico { color: var(--gold); } }
.spec h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; transition: transform .3s var(--ease); }
.spec p { margin: 0; color: var(--fog); font-size: 14px; line-height: 1.5; transition: transform .3s var(--ease), color .3s ease; }

/* ---------- Technik-Karten in Bewegung (Pepes Wunsch vom 09.10.2026) ----------
   Wie bei den Leistungs-Kacheln: erst bewegt sich das Symbol, dann tritt der Text hervor und der Rand
   wird golden – hier ruhig, ohne Herzschlag. script.js setzt .is-an (Maus / Antippen). */
.spec { position: relative; isolation: isolate; }
.spec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: rgba(16, 9, 58, .5);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .6), inset 0 0 22px rgba(216, 180, 106, .06);
  transition: opacity .3s ease;
}
.spec.is-an .ico { color: var(--gold); transform: scale(1.15); }
.spec.is-an::before { opacity: 1; transition: opacity .5s ease .8s; }
.spec.is-an h3, .spec.is-an p { transform: translateY(-2px); transition: transform .5s var(--ease) .8s, color .5s ease .8s; }
.spec.is-an p { color: var(--ash); }

/* ---------- Lichtkegel auf den Karten (Pepes Wunsch vom 27.10.2026, Vorlage „Glow Card“) ----------
   Nur mit Maus: script.js gibt allen Karten mit Fläche (Liste dort; nicht Fotos, Videos, Laufband, Formular)
   .mit-kegel samt <span class="lichtkegel"> und setzt --kegel-x/-y = Mausposition relativ zur Karte. Wo die Maus
   ist, leuchtet der Rand golden – auch bei der Nachbarkarte – und die Fläche hellt leicht auf (.mit-schein, nur
   bei Karten ohne eigenes Hintergrundbild). Gezeichnet wird nur bei Karten in Mausnähe (.is-kegel) und nur im
   Kreis um die Maus (clip-path) – der Schein ist ein weicher Schatten (box-shadow) statt eines teuren Filters,
   eine runde Maske lässt ihn zur Seite hin auslaufen. Handy/Tablet: nichts davon. */
.mit-kegel { position: relative; }
.is-kegel.mit-schein { background-image: radial-gradient(260px circle at var(--kegel-x, -999px) var(--kegel-y, -999px), rgba(241, 217, 160, .1), transparent); }
.lichtkegel {                                        /* Hülle, ringsum 24 px größer als die Karte: Platz für den Schein */
  --kx: calc(var(--kegel-x, -999px) + 24px); --ky: calc(var(--kegel-y, -999px) + 24px);
  display: none; position: absolute; inset: -24px; border-radius: inherit; pointer-events: none;
  clip-path: circle(230px at var(--kx) var(--ky));
  -webkit-mask: radial-gradient(200px circle at var(--kx) var(--ky), #000 35%, transparent);
          mask: radial-gradient(200px circle at var(--kx) var(--ky), #000 35%, transparent);
}
.lichtkegel::before, .lichtkegel::after { content: ""; position: absolute; inset: 24px; border-radius: inherit; }
.lichtkegel::before {                                /* der Rand: an der Maus warmweiß, daneben gold – die Maske lässt die Mitte frei */
  padding: 1.5px;
  background: radial-gradient(130px circle at var(--kegel-x, -999px) var(--kegel-y, -999px), #fff7e2, var(--gold-hi) 40%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lichtkegel::after { box-shadow: 0 0 14px rgba(216, 180, 106, .55), inset 0 0 12px rgba(216, 180, 106, .16); }   /* Schein nach außen, ein wenig nach innen */
.is-kegel .lichtkegel { display: block; }
/* Lautsprecher (Electro-Voice): Membran pumpt im Bass, Schall geht zur Seite */
.ico-box .membran { transform-origin: 12px 15px; }
.ico-box .hochton { transform-origin: 12px 7.2px; }
.ico-box .bass { opacity: 0; }
.is-an .ico-box .membran { animation: membran .5s ease-out .12s 2 both; }
.is-an .ico-box .hochton { animation: hochton .25s ease-out .12s 4 both; }
.is-an .ico-box .bass-l { animation: schall-l .5s ease-out .14s 2 both; }
.is-an .ico-box .bass-r { animation: schall-r .5s ease-out .14s 2 both; }
@keyframes membran { 0%, 100% { transform: none; } 18% { transform: scale(1.2); } 45% { transform: scale(.93); } 70% { transform: scale(1.04); } }
@keyframes hochton { 0%, 100% { transform: none; } 40% { transform: scale(1.25); } }
/* Controller (Pioneer DDJ-1000): linkes Jogwheel scratcht, rechtes dreht eine Runde */
.ico-pult .jog-l { transform-origin: 7.5px 12px; }
.ico-pult .jog-r { transform-origin: 16.5px 12px; }
.ico-pult .marke { fill: currentColor; stroke: none; opacity: 0; }
.is-an .ico-pult .jog-l { animation: scratch 1.1s ease-in-out .12s both; }
.is-an .ico-pult .jog-r { animation: jog-dreh 1.1s cubic-bezier(.45, 0, .25, 1) .12s both; }
.is-an .ico-pult .marke { animation: marke 1.1s ease .12s both; }
@keyframes scratch { 0%, 100% { transform: none; } 22% { transform: rotate(-70deg); } 44% { transform: rotate(25deg); } 66% { transform: rotate(-50deg); } 85% { transform: rotate(10deg); } }
@keyframes jog-dreh { from { transform: none; } to { transform: rotate(360deg); } }
@keyframes marke { 0%, 100% { opacity: 0; } 12%, 85% { opacity: 1; } }
/* Laptop (Apple & VirtualDJ): Bildschirm wippt auf, eine Wellenform läuft ein */
.ico-laptop .deckel { transform-origin: 12px 15px; }
.ico-laptop .wellenform { opacity: 0; stroke-width: 1.1; }
.is-an .ico-laptop .deckel { animation: deckel .6s var(--ease) .1s both; }
.is-an .ico-laptop .wellenform { animation: wellenform .7s ease-out .35s both; }
@keyframes deckel { 0%, 100% { transform: none; } 35% { transform: scaleY(.84); } }
@keyframes wellenform { from { opacity: 1; stroke-dasharray: 30; stroke-dashoffset: 30; } to { opacity: 1; stroke-dasharray: 30; stroke-dashoffset: 0; } }
/* Lichteffekt: Lichtkegel schwenkt wie ein Moving Head und leuchtet auf */
.ico-strahler .kegel { transform-origin: 12px 7px; }
.ico-strahler .licht { transition: fill .4s ease; }
.is-an .ico-strahler .kegel { animation: schwenk 1.1s ease-in-out .12s both; }
.is-an .ico-strahler .licht { fill: rgba(216, 180, 106, .16); }
@keyframes schwenk { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 60% { transform: rotate(12deg); } 85% { transform: rotate(-4deg); } }
/* LED-Röhre (ApeLabs): leuchtet in wechselnden Farben, die Strahlen gehen nacheinander an */
.is-an .ico-led .roehre { animation: led-farbe 1.2s linear .1s both; }
@keyframes led-farbe { 0% { fill: transparent; } 25% { fill: rgba(183, 164, 251, .55); } 55% { fill: rgba(127, 118, 242, .55); } 85%, 100% { fill: rgba(216, 180, 106, .4); } }
.is-an .ico-led .strahl-l { animation: strahl-l .45s ease-out .15s both; }
.is-an .ico-led .strahl-r { animation: strahl-r .45s ease-out .15s both; }
.is-an .ico-led .s2, .is-an .ico-led .s5 { animation-delay: .3s; }
.is-an .ico-led .s3, .is-an .ico-led .s6 { animation-delay: .45s; }
@keyframes strahl-l { 0% { opacity: .15; transform: translateX(.8px); } 60% { opacity: 1; transform: translateX(-.6px); } 100% { opacity: 1; transform: none; } }
@keyframes strahl-r { 0% { opacity: .15; transform: translateX(-.8px); } 60% { opacity: 1; transform: translateX(.6px); } 100% { opacity: 1; transform: none; } }
/* Akku (Bose): lädt sich Strich für Strich voll */
.ico-akku .ladung { transform-origin: 12px 12px; }
.ico-akku .l3, .ico-akku .l4 { opacity: 0; }
.is-an .ico-akku .ladung { animation: laden .3s ease-out .15s both; }
.is-an .ico-akku .l2 { animation-delay: .35s; }
.is-an .ico-akku .l3 { animation-delay: .55s; }
.is-an .ico-akku .l4 { animation-delay: .75s; }
@keyframes laden { 0% { opacity: 0; transform: scaleY(.2); } 100% { opacity: 1; transform: none; } }
#technik .block--wide { margin-top: 24px; }

/* ---------- Smile Station ---------- */
.booth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; padding: clamp(28px, 5vw, 64px); }
.booth .lead { color: var(--fog); }
.booth-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.booth-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; color: var(--fog); font-size: 15px; }
.booth-list .ico { width: 22px; height: 22px; color: var(--gold); }
.booth-list strong { display: block; color: var(--lilac); font-weight: 500; }
.booth-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
.muted-note { color: var(--fog); font-size: 13px; }
.booth-photos { position: relative; padding: 0 20% 17% 0; }
.booth-photo--main { aspect-ratio: 2 / 3; }
.booth-photo--main > img { object-position: 40% 50%; }
.booth-photo--ring {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 56%; aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  box-shadow: 0 0 0 6px #08051c;
  transform: rotate(3deg);
}
/* ---------- Firmen ---------- */
.biz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: center; margin-bottom: clamp(48px, 6vw, 72px); }
.biz-copy .lead { margin-top: 0; color: var(--fog); }
.biz-copy .btn { margin-top: 32px; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.step { padding: 28px 24px; }
.step-num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55), inset 0 -7px 11px rgba(216, 180, 106, .1);
  color: var(--gold); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.step h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.step p { margin: 0; color: var(--fog); font-size: 15px; }

/* ---------- Ablauf: Ziffer blitzt beim Drüberfahren (Pepes Wunsch vom 09.10.2026; schwebende Liste seit 21.10.2026 raus) ---------- */
.step { --i: 0; }
.step:nth-child(2) { --i: 1; }
.step:nth-child(3) { --i: 2; }
.step:nth-child(4) { --i: 3; }
.step-num { position: relative; }
.step-num::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px var(--gold-hi), 0 0 16px 2px rgba(241, 217, 160, .5);
}
.step.is-blitz .step-num { animation: blitz .7s ease-out; }
@media (hover: hover) { .step:hover .step-num { animation: blitz .7s ease-out; } }
.step.is-blitz .step-num::after { animation: blitz-ring .7s ease-out; }
@media (hover: hover) { .step:hover .step-num::after { animation: blitz-ring .7s ease-out; } }
@keyframes blitz {
  0%, 100% { background-color: transparent; color: var(--gold); }
  15%      { background-color: var(--gold-hi); color: var(--gold-ink); }
  40%      { background-color: rgba(216, 180, 106, .3); color: var(--lilac); }
}
@keyframes blitz-ring { 0% { opacity: 0; transform: none; } 15% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.9); } }
/* ---------- Ablauf: Stimmungsbild im Hintergrund (Pepes Wunsch 21.10.2026) ----------
   Jede Kachel hat ein eigenes Bild (mit KI erzeugt, siehe Bildnachweis). Es liegt unsichtbar unter dem Text und
   blendet beim Drüberfahren mit der Maus weich ein – auch in der schwebenden Liste. Bild leicht abgedunkelt plus
   Schleier, der Text wird heller: so bleibt er überall gut lesbar (gemessen: Kontrast mindestens 4,5 : 1, auch
   über dem hellen Briefumschlag). Ohne Maus (Handy, Tablet) zeigt die Kachel, die gerade durch die
   Bildschirmmitte läuft, ihr Bild; das schaltet script.js mit .is-bild. */
.step { position: relative; isolation: isolate; overflow: hidden; }
.step-bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  filter: brightness(.78);
  opacity: 0; transform: scale(1.08);
  transition: opacity .6s var(--ease), transform 1.6s var(--ease);
  pointer-events: none;
}
.step::after {                         /* Schleier + feiner Goldsaum über dem Bild */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: rgba(6, 3, 23, .57);
  box-shadow: var(--rim-2), inset 0 0 0 1px rgba(216, 180, 106, .32);
  opacity: 0; transition: opacity .6s var(--ease);
}
.step h3, .step p { transition: color .4s ease, text-shadow .4s ease; }
.step.is-bild .step-bild { opacity: 1; transform: none; }
@media (hover: hover) { .step:hover .step-bild { opacity: 1; transform: none; } }
.step.is-bild::after { opacity: 1; }
@media (hover: hover) { .step:hover::after { opacity: 1; } }
.step.is-bild :is(h3, p) { text-shadow: 0 1px 10px rgba(3, 0, 20, .85); }
@media (hover: hover) { .step:hover :is(h3, p) { text-shadow: 0 1px 10px rgba(3, 0, 20, .85); } }
.step.is-bild p { color: #dcd8e8; }
@media (hover: hover) { .step:hover p { color: #dcd8e8; } }               /* helles Lila-Grau: Text auf Bild */
.step-ki { opacity: 0; transition: opacity .6s var(--ease); }        /* KI-Bild kennzeichnen (Art. 50 KI-VO), sobald es sichtbar ist */
.step.is-bild .step-ki { opacity: 1; }
@media (hover: hover) { .step:hover .step-ki { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .step-bild { transform: none; transition: opacity .3s ease; }
}
@media (forced-colors: active) {
  .step-bild, .step::after, .step-ki { display: none; }
}
@media print {
  .step-bild, .step::after, .step-ki { display: none; }
}
.center-cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Stimmen: Google-Bewertungen als ruhiges Laufband (zwischen Musik und Reels) ---------- */
.section--stimmen { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 80px); }
.stimmen-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.stimmen-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--lilac); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.3; letter-spacing: -.01em; }
.stimmen-stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stimmen-stars .ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.stimmen-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; }
.stimmen-link { font-size: 14px; }
.stimmen-hinweis { color: var(--fog); font-size: 13px; font-weight: 400; }
@media (hover: hover) { .stimmen-hinweis:hover { color: var(--lilac); } }
.stimmen-link .ico { width: 14px; height: 14px; }
.marquee {
  --lauf: 70s;                               /* Dauer einer Runde (alle Bewertungen einmal) – größer = langsamer */
  --kachel: 340px;                           /* Breite einer Kachel */
  --luecke: 16px;                            /* Abstand zwischen den Kacheln */
  position: relative;
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee:focus-visible { outline-offset: -3px; -webkit-mask-image: none; mask-image: none; }   /* Tastatur-Fokus: Rahmen ganz sichtbar */
/* Ohne JavaScript: reines CSS-Laufband (Liste + Kopie), hält beim Drüberfahren an */
.marquee-track { display: flex; width: max-content; animation: marquee var(--lauf) linear infinite; }
.marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track, .marquee.is-offscreen .marquee-track { animation-play-state: paused; }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-list { display: flex; gap: var(--luecke); margin: 0; padding: 6px var(--luecke) 6px 0; list-style: none; }
.marquee-list > li { display: flex; flex: none; width: var(--kachel); }
@media (hover: hover) { .marquee-list > li:hover .review { box-shadow: var(--rim-2), inset 0 0 0 1px rgba(216, 180, 106, .4); } }
/* Mit JavaScript: script.js setzt jede Kachel einzeln (.marquee-band). Die Kachel unter der Maus tritt hervor
   und bleibt stehen, die anderen laufen dahinter weiter. Die Original-Liste bleibt für Screenreader im Quelltext. */
.marquee.is-js { padding-block: 18px; margin-block: -12px; }
.marquee.is-js .marquee-track {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; animation: none;
}
.marquee-band { display: grid; grid-template-columns: var(--kachel); touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }   /* Handy: waagrecht zieht das Band (script.js), senkrecht scrollt die Seite, Zoomen mit zwei Fingern bleibt erlaubt */
.marquee-tile { grid-area: 1 / 1; display: flex; width: var(--kachel); will-change: transform; transition: opacity .45s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .marquee-tile { cursor: pointer; } }   /* iOS: Antippen auslösbar machen */
.marquee-tile[data-park] { visibility: hidden; }
.marquee-tile.is-landing { z-index: 2; }
.marquee-tile.is-held { z-index: 3; }
.marquee.has-held .marquee-tile:not(.is-held):not(.is-landing) { opacity: .42; }
.review {
  display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0;
  padding: 20px 22px 18px; border-radius: var(--r-card);
  background: var(--midnight); box-shadow: var(--rim), var(--edge);
  transition: transform .4s var(--ease), background-color .4s ease, box-shadow .4s ease;
}
.marquee-tile.is-held .review {
  transform: scale(1.06);
  background-color: #0b0727;
  box-shadow: var(--rim-2), inset 0 0 0 1px rgba(216, 180, 106, .5), 0 14px 34px -16px rgba(0, 0, 0, .9), 0 0 26px rgba(216, 180, 106, .12);
}
.review .stars { display: flex; gap: 3px; color: var(--gold); }
.review .stars .ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.review blockquote { flex: 1; margin: 0; }
.review blockquote p { margin: 0; color: var(--ash); font-size: 15px; line-height: 1.6; }
.review figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.review cite { color: var(--lilac); font-size: 14px; font-style: normal; font-weight: 500; }
.review figcaption span { color: var(--fog); font-size: 12px; }
/* Schlagwörter (Pepes Wunsch 11.10.2026): im Lauf dezent golden; tritt die Kachel hervor, werden sie heller
   und ein zarter Goldmarker zieht sich darunter auf – so sieht man sofort, was die Paare besonders gelobt haben.
   Nur Hervorhebung – der Text der Bewertung bleibt wörtlich. */
.review .stichwort {
  font-weight: 500; color: #d3c29c;
  background: linear-gradient(rgba(216, 180, 106, .2), rgba(216, 180, 106, .2)) no-repeat 0 88% / 0 .42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color .45s ease, background-size .55s var(--ease);
}
.marquee-tile.is-held .review .stichwort { color: var(--gold-hi); background-size: 100% .42em; }
@media (hover: hover) { .marquee-list > li:hover .review .stichwort { color: var(--gold-hi); background-size: 100% .42em; } }
.marquee-tile.is-held .review .stichwort:nth-of-type(2) { transition-delay: .12s; }
@media (hover: hover) { .marquee-list > li:hover .review .stichwort:nth-of-type(2) { transition-delay: .12s; } }
.marquee-tile.is-held .review .stichwort:nth-of-type(3) { transition-delay: .24s; }
@media (hover: hover) { .marquee-list > li:hover .review .stichwort:nth-of-type(3) { transition-delay: .24s; } }
.stimmen-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; }
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 0;
  border: 0; background: none; color: var(--fog); font-size: 13px; cursor: pointer; transition: color .2s;
}
.marquee-toggle .ico { width: 13px; height: 13px; }
.marquee-toggle:focus-visible { color: var(--gold); }
@media (hover: hover) { .marquee-toggle:hover { color: var(--gold); } }
html:not(.js) .marquee-toggle { display: none; }      /* der Knopf braucht JavaScript */
@media (prefers-reduced-motion: reduce) {
  /* ohne Bewegung: Kacheln einfach seitlich wischen (script.js baut dann kein bewegtes Band) */
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2)); }
  .marquee-list[aria-hidden="true"] { display: none; }
  .marquee-list > li { scroll-snap-align: start; }
  .marquee-toggle { display: none; }
  .review { transition: none; }
}

/* ---------- Netzwerk-Teaser ----------
   Mit Foto (Pepes Wunsch 21.10.2026): Brautpaar mit Freunden, in Abendstimmung bearbeitet (tools/netzwerk_foto.py).
   Computer: das Foto füllt die rechte Hälfte der Kachel und läuft nach links weich ins Dunkel aus (Maske), der Text
   steht links daneben. Handy/Tablet: Foto oben über die ganze Breite, unten weich in den Text übergehend. */
.net-teaser {
  --np: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 24px 48px; align-content: center; align-items: start;
  padding: var(--np);
}
.net-teaser > :not(.net-foto, .lichtkegel) { position: relative; z-index: 1; grid-column: 1; }
.net-teaser .h3 { margin-bottom: 12px; }
.net-teaser p { margin: 0; color: var(--fog); }
.net-teaser .pills { justify-content: flex-start; }
.net-teaser .btn { justify-self: start; }
.net-teaser > .net-foto {             /* > statt nur Klasse: schlägt „.block > img“ (100 % breit) */
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: 55%; height: 100%; object-fit: cover; object-position: 0% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 13%, #000 27%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 13%, #000 27%);
  transform-origin: 60% 60%;
  transition: transform 1.2s var(--ease);
  pointer-events: none;
}
@media (hover: hover) { .net-teaser:hover > .net-foto { transform: scale(1.03); } }
@media (max-width: 1279px) and (min-width: 981px) {
  .net-teaser > .net-foto { width: 60%; object-position: 8% 60%; }
}
@media (max-width: 980px) {
  .net-teaser > .net-foto {
    position: relative; top: auto; right: auto; bottom: auto; grid-row: 1;
    width: calc(100% + 2 * var(--np)); max-width: none; height: auto; aspect-ratio: 3 / 2; object-position: 50% 60%;
    margin: calc(-1 * var(--np)) calc(-1 * var(--np)) -16%;      /* bis an den Kartenrand; Text rückt ins Auslaufen */
    -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  }
}
@media (max-width: 980px) and (min-width: 561px) {
  .net-teaser > .net-foto { aspect-ratio: 16 / 9; }      /* Tablet: etwas flacher, die Gruppe bleibt ganz im Bild */
}
@media (prefers-reduced-motion: reduce) {
  .net-teaser > .net-foto { transition: none; }
  @media (hover: hover) { .net-teaser:hover > .net-foto { transform: none; } }
}

/* ---------- Einsatzgebiet ---------- */
.regions { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.regions .prose { margin-top: 4px; color: var(--fog); }
.regions-cta { margin-top: 28px; }
.block--map { aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, #0c0830, var(--midnight) 70%); }
.map-bar { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; color: var(--fog); font-size: 12px; }
.map-bar span { display: inline-flex; align-items: center; gap: 8px; }
.radar { width: 100%; height: 100%; }
.radar-rings circle { fill: none; stroke: rgba(147, 130, 255, .32); stroke-width: 1; stroke-dasharray: 2 5; }
.radar-rings path { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.radar-ring-labels text { fill: var(--fog); font-family: var(--font-body); font-size: 13px; }
.radar-rivers polyline { fill: none; stroke: rgba(147, 130, 255, .45); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.radar-river-labels text { fill: rgba(183, 164, 251, .75); font-family: var(--font-body); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.radar-regions text { fill: rgba(244, 240, 255, .3); font-family: var(--font-body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.radar-regions .radar-country { fill: rgba(216, 180, 106, .55); font-size: 13px; }
.radar-places circle { fill: var(--lilac); }
.radar-places text { fill: var(--ash); font-family: var(--font-body); font-size: 13px; }
.radar-home-dot { fill: var(--gold); }
.radar-home text { fill: var(--lilac); font-family: var(--font-head); font-size: 15px; font-weight: 500; }
.radar-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.is-in .radar-pulse { animation: pulse 3.2s var(--ease) 3; }   /* drei Pulse, sobald die Karte im Bild ist */
.is-in .radar-pulse--2 { animation-delay: 1.6s; }
@media (min-width: 981px) and (max-width: 1279px) {   /* Karte in der schmalen Spalte: Beschriftung bleibt lesbar (Apple-Check) */
  .radar-places text { font-size: 17px; }
  .radar-home text { font-size: 19px; }
  .radar-regions text { font-size: 16px; letter-spacing: .1em; }
  .radar-regions .radar-country, .radar-ring-labels text, .radar-river-labels text { font-size: 16px; }
}
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 8px; max-width: 820px; margin: 0 auto; }
.qa { position: relative; border-radius: var(--r-card); background: var(--midnight); box-shadow: var(--edge), inset 0 0 24px rgba(255, 255, 255, .03); transition: box-shadow .3s ease, transform .35s var(--ease), background-color .3s ease; }
.qa[open] { box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .3), var(--rim); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-radius: var(--r-card);
  color: var(--lilac); font-family: var(--font-head); font-size: 17px; font-weight: 500; line-height: 1.4;
  list-style: none; cursor: pointer; transition: color .3s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: -2px; }
.qa-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .3s ease; }
.qa-icon::before, .qa-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; border-radius: 1px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.qa-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa-a { padding: 0 22px 20px; }
.qa-a p { margin: 0; color: var(--fog); font-size: 15px; line-height: 1.65; }

/* ---------- FAQ-Kacheln treten hervor (Pepes Wunsch vom 09.10.2026) ----------
   Wie bei Leistungen und Technik: Maus über eine Frage → die Kachel hebt sich leicht nach vorn, der Rand
   wird golden (ruhig, ohne Puls), das Plus leuchtet. Gilt auf der Startseite und auf faq.html.
   Handy/Tablet: kein Hover – Antippen klappt die Antwort auf. */
@media (hover: hover) and (pointer: fine) {
  .qa:hover {
    z-index: 1; transform: translateY(-3px) scale(1.015); background-color: #0b0628;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .62), inset 0 0 22px rgba(216, 180, 106, .06),
      0 16px 32px -20px rgba(0, 0, 0, .9), 0 0 26px -8px rgba(216, 180, 106, .25);
  }
  .qa:hover summary { color: #fff; }
  .qa:hover .qa-icon { box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .65), 0 0 14px rgba(216, 180, 106, .35); }
}
@media (prefers-reduced-motion: reduce) { @media (hover: hover) { .qa:hover { transform: none; } } }

/* ---------- FAQ-Seite: Pepe steht hinter den Fragen (Pepes Wunsch vom 09.10.2026) ----------
   Wie Micha hinter seinem Plattenspieler: Das freigestellte Foto steht über der Fragen-Karte („Pult“),
   die Karte verdeckt seinen unteren Teil. Beim Laden taucht er sanft hinter dem Pult auf.
   --pw = Breite des Fotos (richtet sich auch nach der Fensterhöhe, damit die Oberkante des Pults
   schon beim Laden zu sehen ist); das Pult überdeckt 0,34 × --pw (≈ 24 % der Fotohöhe) – die Oberkante liegt knapp unter
   den zeigenden Händen, Pepe schaut also über die Karte (Runde 48, Idee von Michaels Seite). */
.page-head.page-head--faq { z-index: 1; padding-top: clamp(116px, 12vw, 140px); padding-bottom: clamp(18px, 3vw, 30px); }
.faq-seite { padding-bottom: var(--sec); }
.faq-buehne { --pw: clamp(220px, min(26vw, 36vh), 330px); position: relative; isolation: isolate; max-width: 880px; margin: 0 auto; }
.faq-buehne::before {                                    /* warmes Licht hinter Pepe */
  content: ""; position: absolute; z-index: -2; left: 50%; top: calc(var(--pw) * -.25);
  width: min(calc(var(--pw) * 2.3), 100vw); height: calc(var(--pw) * 1.75); transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(216, 180, 106, .27), rgba(216, 180, 106, .08) 45%, rgba(80, 70, 228, .08) 70%, rgba(80, 70, 228, 0) 100%);
}
.faq-pepe { position: relative; z-index: -1; display: block; width: var(--pw); height: auto; margin: 0 auto calc(var(--pw) * -.34); }
.faq-pult {
  position: relative; padding: clamp(10px, 2.2vw, 22px); border-radius: var(--r-block);
  background: linear-gradient(180deg, #130c3c 0, #0a0626 96px, #070420 100%);
  box-shadow: inset 0 1px 0 rgba(241, 217, 160, .55), inset 0 0 0 1px rgba(216, 180, 106, .14),
    0 -16px 40px -28px rgba(216, 180, 106, .5), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.faq-pult .faq-list { max-width: none; }
.faq-fuss { display: flex; flex-direction: column; align-items: center; margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.faq-fuss .lead { max-width: 560px; color: var(--fog); }
.faq-fuss .cta-row { margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-pepe { animation: auftauchen 1.1s var(--ease) .2s both; }
}
@keyframes auftauchen { from { transform: translateY(18%); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) {
  .faq-buehne { --pw: min(230px, 60vw); }
}

/* ==========================================================================
   Anfrage + Formular von Hochzeit.Management
   ========================================================================== */
.section--anfrage { overflow: hidden; overflow: clip; }
.anfrage-glow {
  position: absolute; left: 0; right: 0; top: 8%; height: 84%; pointer-events: none;
  background:
    radial-gradient(45% 50% at 22% 40%, rgba(80, 70, 228, .24), rgba(80, 70, 228, 0) 70%),
    radial-gradient(35% 40% at 85% 75%, rgba(216, 180, 106, .07), rgba(216, 180, 106, 0) 70%);
}
.anfrage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.anfrage-info { position: sticky; top: 104px; }
.anfrage-info .lead { margin-top: 0; }
.contact-list { display: grid; gap: 4px; margin: 28px 0 0; padding: 0; list-style: none; }
.contact-list a { display: flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--lilac); font-size: 15px; text-decoration: none; transition: color .2s; }
@media (hover: hover) { .contact-list a:hover { color: var(--gold); } }
.contact-list .ico {
  width: 40px; height: 40px; padding: 10px;
  border-radius: var(--r-btn);
  background: var(--indigo); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--rim);
  color: var(--gold);
}
.contact-list small { display: block; color: var(--fog); font-size: 12px; }
.anfrage-tip {
  display: flex; gap: 12px; margin: 24px 0 0; padding: 16px 18px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .02); box-shadow: var(--edge);
  color: var(--fog); font-size: 14px;
}
.anfrage-tip .ico { width: 20px; height: 20px; color: var(--gold); }
.anfrage-form { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-block); }
.form-legal { margin: 16px 0 0; color: var(--fog); font-size: 12px; line-height: 1.55; }
.form-legal a { color: var(--ash); }
@media (hover: hover) { .form-legal a:hover { color: var(--gold); } }

.hm-shell { position: relative; min-height: 600px; }
.hm-shell.is-ready, .hm-shell.is-failed { min-height: 0; }
.hm-skeleton { display: grid; gap: 14px; }
.hm-skeleton span {
  display: block; height: 46px; border-radius: var(--r-btn);
  background: linear-gradient(90deg, rgba(255, 255, 255, .025) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .025) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.hm-skeleton .is-short { width: 42%; }
.hm-skeleton p { margin: 4px 0 0; color: var(--fog); font-size: 13px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.hm-shell.is-ready .hm-skeleton, .hm-shell.is-failed .hm-skeleton { display: none; }
.hm-fallback { display: grid; justify-items: start; gap: 14px; }
.hm-fallback > .ico { width: 28px; height: 28px; color: var(--gold); }
.hm-fallback p { margin: 0; color: var(--ash); font-size: 15px; }
.hm-fallback strong { display: block; color: var(--lilac); font-weight: 500; }
.hm-fallback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-noscript { margin: 0; color: var(--ash); }
.hm-noscript a { color: var(--gold); }

/* Das Formular wird von app.kreativ.management geladen und bringt eigenes CSS mit.
   Diese Regeln passen es an das Designsystem an (Schrift, Farben, Radien).
   Die versteckten Spam-Schutzfelder (kreativ-management-hp-*) werden bewusst NICHT angefasst. */
.hm-shell .hm-contact-form-container,
.hm-shell .hm-contact-form-container * { font-family: var(--font-body) !important; letter-spacing: normal !important; }
.hm-shell .hm-contact-form-container { color: var(--ash) !important; font-size: 15px !important; }
.hm-shell .hm-contact-form { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; }
.hm-shell .hm-contact-form-attribute { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; width: 100% !important; padding: 0 0 16px !important; }
.hm-shell .hm-contact-form-label {
  display: block !important; flex: 0 0 100% !important; order: 1;
  width: 100% !important; margin: 0 0 6px !important; padding: 0 !important; overflow: visible !important;
  color: var(--ash) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; white-space: normal !important;
}
.hm-shell .required-icon { margin-left: 2px; color: var(--gold) !important; }
.hm-shell .hm-contact-form-dropdown,
.hm-shell .hm-calendar-container,
.hm-shell .hm-contact-form-textbox,
.hm-shell .hm-contact-form-textarea { order: 2; flex: 1 1 100% !important; width: 100% !important; }
.hm-shell .hm-contact-form-validation-container { order: 3; flex: 0 0 100% !important; width: 100% !important; color: var(--gold-hi) !important; font-size: 13px !important; line-height: 1.45 !important; }
.hm-shell .hm-contact-form-validation-container:not(:empty) { margin-top: 6px !important; }
.hm-shell .hm-contact-form-validation-container * { color: var(--gold-hi) !important; font-size: 13px !important; background: transparent !important; }
.hm-shell .hm-contact-form-textbox,
.hm-shell .hm-contact-form-datepicker,
.hm-shell .hm-contact-form-textarea,
.hm-shell .hm-dropdown {
  height: 46px !important; margin: 0 !important; padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: var(--r-btn) !important;
  background-color: var(--void) !important;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .025) !important;
  color: var(--lilac) !important; font-size: 15px !important; line-height: 1.4 !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.hm-shell .hm-contact-form-datepicker {
  width: 100% !important; cursor: pointer !important; padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b46a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important;
}
.hm-shell .hm-contact-form-textarea { height: auto !important; min-height: 116px !important; padding: 12px 14px !important; resize: vertical !important; }
.hm-shell .hm-contact-form-textbox::placeholder,
.hm-shell .hm-contact-form-datepicker::placeholder,
.hm-shell .hm-contact-form-textarea::placeholder { color: var(--fog) !important; opacity: 1 !important; }
@media (hover: hover) { .hm-shell .hm-contact-form-textbox:hover, .hm-shell .hm-contact-form-datepicker:hover, .hm-shell .hm-contact-form-textarea:hover, .hm-shell .hm-dropdown:hover { border-color: rgba(255, 255, 255, .18) !important; } }
.hm-shell .hm-contact-form-textbox:focus,
.hm-shell .hm-contact-form-datepicker:focus,
.hm-shell .hm-contact-form-textarea:focus,
.hm-shell .hm-dropdown.hm-dropdown-popup-open {
  outline: none !important;
  border-color: rgba(216, 180, 106, .75) !important;
  box-shadow: 0 0 0 3px rgba(216, 180, 106, .18), inset 0 0 18px rgba(255, 255, 255, .025) !important;
}
/* Auswahlfeld „Art der Feier“ */
.hm-shell .hm-dropdown { position: relative !important; padding: 0 !important; cursor: pointer; }
.hm-shell .hm-dropdown-display { height: 44px !important; padding: 0 44px 0 14px !important; align-items: center !important; color: var(--lilac) !important; font-size: 15px !important; opacity: 1 !important; }
.hm-shell .hm-dropdown-display.placeholder { color: var(--fog) !important; }
.hm-shell .hm-dropdown-arrow { left: auto !important; right: 16px !important; top: 0 !important; height: 44px !important; align-items: center !important; }
.hm-shell .hm-dropdown-arrow::before { border-color: var(--gold) !important; }
.hm-shell .hm-dropdown-popup-container { left: -1px !important; right: -1px !important; width: auto !important; top: 50px !important; z-index: 120 !important; }
.hm-shell .hm-dropdown-popup {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: var(--r-btn) !important;
  background: var(--indigo) !important; box-shadow: var(--rim-2) !important;
  color: var(--lilac) !important;
}
.hm-shell .hm-dropdown-option { height: auto !important; padding: 11px 14px !important; background: transparent !important; color: var(--ash) !important; font-size: 15px !important; opacity: 1 !important; }
.hm-shell .hm-dropdown-option.selected { background: rgba(216, 180, 106, .12) !important; color: var(--lilac) !important; }
@media (hover: hover) { .hm-shell .hm-dropdown-option:hover { background: rgba(216, 180, 106, .12) !important; color: var(--lilac) !important; } }
.hm-shell .hm-dropdown-option.placeholder { color: var(--fog) !important; opacity: .7 !important; }
/* Kalender */
.hm-shell .hm-calendar-popup-container { width: 100% !important; max-width: 380px !important; margin: 0 !important; }
.hm-shell .hm-calendar-popup-container.hm-open { margin-top: 8px !important; }
.hm-shell .hm-calendar {
  margin: 0 !important; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: var(--r-card) !important;
  background: var(--indigo) !important; box-shadow: var(--rim-2) !important;
  color: var(--lilac) !important;
}
.hm-shell .hm-calendar-header { background: transparent !important; border: 0 !important; }
.hm-shell .hm-calendar-btn, .hm-shell .hm-calendar-header-label {
  border: 0 !important; border-radius: var(--r-btn) !important; background: transparent !important;
  color: var(--lilac) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer;
}
@media (hover: hover) { .hm-shell .hm-calendar-btn:hover, .hm-shell .hm-calendar-header-label:hover { color: var(--gold) !important; } }
.hm-shell .hm-calendar-week, .hm-shell .hm-calendar-week span { background: transparent !important; color: var(--fog) !important; font-size: 12px !important; }
.hm-shell .hm-calendar-popup-container.hm-open { height: auto !important; }
.hm-shell .hm-calendar-body { padding: 2px 6px 8px !important; background: transparent !important; }
.hm-shell .hm-calendar-date { border: 0 !important; border-radius: var(--r-btn) !important; background: transparent !important; color: var(--dusk) !important; font-size: 14px !important; }
.hm-shell .hm-calendar-date span { color: inherit !important; background: transparent !important; }
.hm-shell .hm-calendar-date.active { color: var(--lilac) !important; cursor: pointer; }
@media (hover: hover) { .hm-shell .hm-calendar-date.active:hover { background: rgba(216, 180, 106, .12) !important; } }
.hm-shell .hm-calendar-date.today { box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55) !important; color: var(--gold) !important; }
.hm-shell .hm-calendar-date.selected { background: var(--gold) !important; color: var(--gold-ink) !important; }
/* Hinweis-Bubble am Feld „Pepe's Smile Station“ (Anfrage-Formular) */
.hm-shell .hm-contact-form-tooltip { border-radius: var(--r-btn) !important; background: var(--indigo) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; color: var(--lilac) !important; font-size: 13px !important; }
.hm-shell .hm-contact-form-tooltip::before { border-bottom-color: rgba(255, 255, 255, .12) !important; }
.hm-shell .hm-contact-form-tooltip::after { border-bottom-color: var(--indigo) !important; }
/* Einwilligungs-Checkbox */
.hm-shell .hm-checkbox-container { flex-wrap: wrap !important; }
.hm-shell .hm-contact-form-checkbox { order: 2; flex: none !important; width: 22px !important; height: 22px !important; margin: 2px 0 0 !important; padding: 0 0 0 22px !important; cursor: pointer; }
.hm-shell .hm-contact-form-checkbox span { top: 0 !important; left: 0 !important; width: 22px !important; height: 22px !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: var(--r-btn) !important; background: var(--void) !important; }
.hm-shell .hm-contact-form-checkbox span::after { left: 7px !important; top: 3px !important; width: 6px !important; height: 11px !important; border-color: var(--gold-ink) !important; }
.hm-shell .hm-contact-form-checkbox input:checked + span { border-color: var(--gold) !important; background: var(--gold) !important; }
.hm-shell .hm-contact-form-checkbox input:focus-visible + span { box-shadow: 0 0 0 3px rgba(216, 180, 106, .3) !important; }
.hm-shell .hm-checkbox-placeholder { order: 2; flex: 1 1 0 !important; width: auto !important; padding: 2px 0 0 12px !important; color: var(--fog) !important; font-size: 13px !important; line-height: 1.5 !important; }
/* Absenden */
.hm-shell .hm-action-container { padding-top: 6px !important; }
.hm-shell .hm-contact-form-button-container, .hm-shell .hm-pull-right { float: none !important; width: 100% !important; }
.hm-shell .hm-contact-form-button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 48px !important; padding: 0 22px !important;
  border: 0 !important; border-radius: var(--r-btn) !important;
  background: linear-gradient(180deg, #edd39a 0%, #d8b46a 58%, #caa258 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 10px rgba(120, 80, 20, .24) !important;
  color: var(--gold-ink) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important;
}
@media (hover: hover) { .hm-shell .hm-contact-form-button:hover { background: linear-gradient(180deg, #f4ddab 0%, #e1c07b 58%, #d2ac63 100%) !important; } }
.hm-shell .hm-contact-form-button:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 3px !important; }
/* Lade-Overlay beim Absenden */
.hm-shell .hm-loading-cirlce { border-radius: var(--r-card) !important; background: rgba(3, 0, 20, .72) !important; box-shadow: none !important; }
/* Formular in Schritten (script.js → initHmSteps) */
.hm-steps { margin: 0 0 22px; }
.hm-steps-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hm-steps-title { margin: 0; color: var(--lilac); font-family: var(--font-head); font-size: 19px; font-weight: 500; line-height: 1.3; }
.hm-steps-title span { display: block; margin-bottom: 3px; color: var(--gold); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.hm-steps-title:focus { outline: none; }
.hm-steps-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.hm-steps-back { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 2px; border: 0; background: none; color: var(--fog); font-size: 14px; cursor: pointer; transition: color .2s; }
.hm-steps-back[hidden] { display: none; }
.hm-steps-back .ico { width: 14px; height: 14px; transform: rotate(180deg); }
.hm-steps-back:focus-visible { color: var(--gold); }
@media (hover: hover) { .hm-steps-back:hover { color: var(--gold); } }
.hm-steps-bar { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hm-steps-bar li { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); transition: background-color .3s; }
.hm-steps-bar li.is-done { background: rgba(216, 180, 106, .45); }
.hm-steps-bar li.is-current { background: var(--gold); }
.hm-shell.is-stepped .hm-contact-form-attribute.hm-step-off { display: none !important; }
.hm-shell.is-stepped:not(.is-last-step) .hm-action-container { display: none !important; }
.hm-steps-nav { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.hm-shell.is-last-step .hm-steps-nav { display: none; }
.hm-steps-hint { margin: 0; color: var(--gold-hi); font-size: 13px; }
.hm-steps-hint:empty { display: none; }
.hm-steps-next {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r-btn);
  background: linear-gradient(180deg, #edd39a 0%, #d8b46a 58%, #caa258 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 10px rgba(120, 80, 20, .24);
  color: var(--gold-ink); font-size: 16px; font-weight: 500; cursor: pointer;
}
.hm-steps-next .ico { width: 16px; height: 16px; }
@media (hover: hover) { .hm-steps-next:hover { background: linear-gradient(180deg, #f4ddab 0%, #e1c07b 58%, #d2ac63 100%); } }
.hm-steps-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hm-shell .hm-contact-form-attribute.is-missing .hm-contact-form-textbox,
.hm-shell .hm-contact-form-attribute.is-missing .hm-contact-form-datepicker,
.hm-shell .hm-contact-form-attribute.is-missing .hm-contact-form-textarea,
.hm-shell .hm-contact-form-attribute.is-missing .hm-dropdown { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(216, 180, 106, .2) !important; }
.hm-shell .hm-contact-form-attribute.is-missing .hm-contact-form-checkbox span { border-color: var(--gold) !important; }

/* ==========================================================================
   Footer, Einwilligung, Lightbox
   ========================================================================== */
.site-footer { padding: 0 0 32px; }
.site-footer > .aurora { margin-bottom: clamp(48px, 6vw, 72px); }
/* Glas-Leiste oben in der Fußzeile: die 5 Seiten mit Symbol, aktuelle Seite in der Glas-Blase (Handy: Symbol über dem Wort) */
.glas-leiste {
  width: fit-content; max-width: calc(100% - 2 * var(--pad)); margin: 0 auto clamp(40px, 5vw, 56px); padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(6, 3, 23, .55);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.glas-leiste ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.glas-leiste a {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill);
  color: var(--fog); font-size: 14px; line-height: 1.3; text-decoration: none; transition: color .2s;
}
.glas-leiste a:focus-visible { color: var(--lilac); }
@media (hover: hover) { .glas-leiste a:hover { color: var(--lilac); } }
.glas-leiste a[aria-current="page"] { color: var(--gold); }
.glas-leiste .ico { width: 17px; height: 17px; stroke-width: 1.6; }
@media (max-width: 640px) {
  .glas-leiste { width: auto; max-width: none; margin-inline: max(10px, calc(var(--pad) - 8px)); padding: 4px; }
  .glas-leiste li { flex: 1 1 0; min-width: 0; }
  .glas-leiste a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; white-space: nowrap; }   /* 11 px wie Apples Tab-Leiste (10 pt) – 12 px passt bei 320–360 px nicht */
}
@media (max-width: 340px) { .glas-leiste ul { gap: 0; } .glas-leiste li { flex-basis: auto; min-width: 44px; } }   /* 320 px (iPhone SE 1. Gen.): gleich breite Spalten zu schmal für „Über mich“ → Breite nach Inhalt, aber mind. 44 px */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-brand img { width: 116px; }
.footer-brand p { max-width: 330px; margin: 18px 0 0; color: var(--fog); font-size: 14px; }
.footer-col h2 { margin: 0 0 14px; color: var(--lilac); font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--fog); font-size: 14px; text-decoration: none; transition: color .2s; }
@media (hover: hover) { .footer-col a:hover { color: var(--lilac); } }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fog); font-size: 13px; }
.footer-bar p { margin: 0; }
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.footer-bar a, .footer-bar .linklike { color: var(--fog); font-size: 13px; text-decoration: none; transition: color .2s; }
@media (hover: hover) { .footer-bar a:hover, .footer-bar .linklike:hover { color: var(--lilac); } }
.footer-bar .footer-insta { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); font-size: 14px; }  /* unten mit Aufforderung (Meta-Regel, Pepes Wunsch 22.10.) */
.footer-bar .footer-insta:focus-visible { color: var(--gold-hi); }
@media (hover: hover) { .footer-bar .footer-insta:hover { color: var(--gold-hi); } }
.ig-kreis { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .45); transition: transform .25s var(--ease), box-shadow .2s; }
.footer-insta:focus-visible .ig-kreis { box-shadow: inset 0 0 0 1px var(--gold), 0 0 16px rgba(216, 180, 106, .35); transform: scale(1.15); }
@media (hover: hover) { .footer-insta:hover .ig-kreis { box-shadow: inset 0 0 0 1px var(--gold), 0 0 16px rgba(216, 180, 106, .35); transform: scale(1.15); } }
/* Original-Instagram-Zeichen (offizielle Dateien von Meta, unverändert): weiß, beim Drüberfahren farbig */
.nav-insta, .ig-kreis { position: relative; }
.ig { display: block; width: 30px; height: 30px; }  /* Meta: nie kleiner als 29 × 29 px; ringsum frei: halbe Zeichengröße (15 px) */
.ig-farbe { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity .25s; }
:is(.nav-insta, .footer-insta):focus-visible .ig-farbe { opacity: 1; }
@media (hover: hover) { :is(.nav-insta, .footer-insta):hover .ig-farbe { opacity: 1; } }
.btn .ig { margin-right: 7px; }  /* + 8 px Abstand des Knopfs = 15 px bis zur Schrift */
@media (max-width: 388px) { .nav-brand .nav-script { display: none; } }  /* schmale Handys: Schriftzug weg, damit das Instagram-Zeichen seinen Freiraum behält */
@media (prefers-reduced-motion: reduce) { .nav-insta:focus-visible, .footer-insta:focus-visible .ig-kreis { transform: none; }
@media (hover: hover) { .nav-insta:hover, .footer-insta:hover .ig-kreis { transform: none; } } }

.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  width: min(420px, calc(100% - 32px)); padding: 20px;
  border-radius: var(--r-card);
  background: rgba(11, 7, 38, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--rim-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.consent.is-open { opacity: 1; transform: none; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid rgba(216, 180, 106, .85); outline-offset: 3px; }
.consent-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--lilac); font-family: var(--font-head); font-size: 16px; font-weight: 500; }
.consent-title .ico { width: 18px; height: 18px; color: var(--gold); }
.consent-text { margin: 0; color: var(--fog); font-size: 13px; line-height: 1.55; }
.consent-text a { color: var(--gold); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

.lightbox { max-width: min(1400px, 94vw); max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-card); background: var(--void); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.lightbox::backdrop { background: rgba(3, 0, 20, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { max-width: min(1400px, 94vw); max-height: 92vh; object-fit: contain; }
.lightbox-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(6, 3, 23, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--lilac); cursor: pointer; }
.lightbox-close .ico { width: 18px; height: 18px; }
.lightbox-hinweis { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgba(6, 3, 23, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--lilac); font-size: 12px; line-height: 1.45; }

/* ==========================================================================
   Unterseiten: Rechtliches, Netzwerk, 404
   ========================================================================== */
.page-head { position: relative; padding: clamp(132px, 15vw, 168px) 0 clamp(36px, 5vw, 56px); text-align: center; }
.page-head .container { display: flex; flex-direction: column; align-items: center; }
.page-head .h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.5rem); line-height: 1.14; letter-spacing: -.016em; text-wrap: balance; }
.page-head .lead { max-width: 640px; margin-top: 18px; color: var(--fog); }
.legal { padding-bottom: var(--sec); }
.legal-body { max-width: 780px; margin: 0 auto; }
.legal-body h2 { margin: 52px 0 12px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.005em; scroll-margin-top: 104px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: 28px 0 8px; font-size: 1.0625rem; line-height: 1.35; }
.legal-body p, .legal-body li { color: var(--ash); font-size: 16px; line-height: 1.7; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--gold); }
.legal-body a:not(.btn) { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(216, 180, 106, .4); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { .legal-body a:not(.btn):hover { color: var(--lilac); } }
.legal-body strong { color: var(--lilac); font-weight: 500; }
.legal-card { margin: 0 0 20px; }
.legal-card p:last-of-type { margin-bottom: 0; }   /* of-type: der Lichtkegel hängt ein <span> an */
.toc { margin: 0 0 48px; }
.toc p { margin: 0 0 10px !important; color: var(--lilac) !important; font-weight: 500; }
.toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 0; padding-left: 20px; }
.toc li { margin: 0; font-size: 15px; }
.toc a { text-decoration: none; }
.stand { margin-top: 48px !important; color: var(--fog) !important; font-size: 14px !important; }
.back-link { margin-top: 32px; }

/* ---------- Netzwerk-Seite (neu am 09.10.2026, Pepes Wunsch: mehr Ausstrahlung, aber seriös) ----------
   Erzeugt von tools/pages.py. Sternbild als Übersicht (9 Stationen um „Euer Tag“), Kapitel 01–08 mit
   Strichzeichnung, Einleitung, Tipp und Partner-Karten; 09 „Die Party“ mit Pepe. */
.netz-kopf { padding-bottom: 0; }
.netz-kopf .lead { max-width: 700px; }
.netz-hinweis { margin: 28px 0 0; color: var(--fog); font-size: 13px; letter-spacing: .02em; }
.sternbild { position: relative; width: min(100%, 980px); aspect-ratio: 1000 / 440; margin: 18px auto 56px; }
.sternbild::before {                                   /* sanftes Licht hinter der Mitte */
  content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(216, 180, 106, .16), rgba(80, 70, 228, .07) 60%, transparent); pointer-events: none;
}
.sternbild ol { margin: 0; padding: 0; list-style: none; }
.sternbild-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sternbild-linien .weg { fill: none; stroke: rgba(216, 180, 106, .5); stroke-width: 1.3; stroke-linejoin: round; }
.sternbild-linien .speiche { stroke: rgba(183, 164, 251, .22); stroke-width: 1; stroke-dasharray: 2 7; transition: stroke .3s ease; }
.sternbild-linien .speiche.is-hell { stroke: rgba(241, 217, 160, .75); }
.sternbild-linien--schmal { display: none; }
.stern {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  display: flex; flex-direction: column; align-items: center; width: 150px; margin: -28px 0 0 -75px;
  color: var(--lilac); text-align: center; text-decoration: none; border-radius: 12px;
}
.stern-punkt {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1d1454, #0a0626 72%); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .5), 0 0 0 6px rgba(216, 180, 106, .05), 0 0 26px rgba(216, 180, 106, .16);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.stern-punkt .ico { width: 24px; height: 24px; stroke-width: 1.5; }
.stern-name { margin-top: 10px; font-family: var(--font-head); font-size: 15px; font-weight: 500; line-height: 1.25; transition: color .25s; }
.stern-zahl { margin-top: 2px; color: var(--fog); font-size: 12.5px; }
.stern-name, .stern-zahl { text-shadow: 0 0 4px var(--void), 0 0 8px var(--void), 0 0 14px var(--void); }   /* Linien laufen hinter der Schrift */
/* Wo ein Weg mitten durch die Beschriftung läuft, deckt ein dunkles Feld die Linie ab (ohne die Breite zu ändern) */
.stern:is([data-k="planung"], [data-k="foto"]) :is(.stern-name, .stern-zahl) { border-radius: 4px; background: rgba(4, 1, 21, .94); box-shadow: 0 0 0 3px rgba(4, 1, 21, .94); }
.stern:focus-visible .stern-punkt {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 1.5px rgba(241, 217, 160, .95), 0 0 0 9px rgba(216, 180, 106, .09), 0 0 38px rgba(216, 180, 106, .42);
}
@media (hover: hover) { .stern:hover .stern-punkt {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 1.5px rgba(241, 217, 160, .95), 0 0 0 9px rgba(216, 180, 106, .09), 0 0 38px rgba(216, 180, 106, .42);
} }
.stern:focus-visible .stern-name { color: var(--gold-hi); }
@media (hover: hover) { .stern:hover .stern-name { color: var(--gold-hi); } }
.stern-mitte { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: 140px; margin: -42px 0 0 -70px; pointer-events: none; }
.stern-mitte .stern-punkt { width: 84px; height: 84px; background: radial-gradient(circle at 50% 30%, #2a1d63, #0d0830 72%); box-shadow: inset 0 0 0 1.5px rgba(241, 217, 160, .7), 0 0 0 10px rgba(216, 180, 106, .07), 0 0 50px rgba(216, 180, 106, .3); }
.stern-mitte .stern-punkt .ico { width: 34px; height: 34px; }
.stern-mitte .stern-name { color: var(--gold); font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .js .sternbild .stern, .js .stern-mitte { animation: stern-auf .7s cubic-bezier(.3, 1.4, .5, 1) calc(.15s + var(--i, 0) * .09s) both; }
  .js .stern-mitte { --i: -1; }
  .js .sternbild-linien .weg { stroke-dasharray: 1; stroke-dashoffset: 1; animation: weg-zieht 2.4s var(--ease) .45s forwards; }
  .js .sternbild-linien .speiche { opacity: 0; animation: einblenden 1s ease calc(.7s + var(--i, 0) * .09s) forwards; }
}
@keyframes stern-auf { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes weg-zieht { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: 1; } }

/* ---------- Brautpaar im Sternbild (Pepes Wunsch vom 11.10.2026) ----------
   Gezeichnetes Paar in den Farben der Website. script.js setzt die Lage (Füße = Punkt auf dem Weg),
   .is-laufen (Beine, Rock, Arme, Schleier), .is-links (läuft nach links), .is-jubeln (Arme hoch, Sprünge).
   Standplatz: neben jedem Stern zur Mitte hin (Symbol und Beschriftung bleiben frei); gelaufen wird von Platz zu Platz. */
.netz-hinweis .hinweis-maus { display: none; }
@media (hover: hover) and (pointer: fine) {
  .netz-hinweis .hinweis-maus { display: inline; }
  .netz-hinweis .hinweis-touch { display: none; }
}
.paar { display: none; position: absolute; left: 0; top: 0; z-index: 2; width: 52px; height: 65px; margin: -63px 0 0 -26px; pointer-events: none; will-change: transform; }
.js .paar { display: block; }
.paar-dreh { width: 100%; height: 100%; transition: transform .22s ease; }
.paar.is-links .paar-dreh { transform: scaleX(-1); }
.paar-figur { display: block; width: 100%; height: 100%; overflow: visible; }
.paar-schatten { fill: rgba(0, 0, 0, .5); }
.paar .bein path { stroke: #2a2077; stroke-width: 3.4; stroke-linecap: round; }
.paar .bein-1 { transform-origin: 31.4px 40.5px; }
.paar .bein-2 { transform-origin: 35.2px 40.5px; }
.paar .jacke { fill: #231a66; stroke: var(--gold); stroke-width: .8; stroke-linejoin: round; }
.paar .hemd { fill: var(--lilac); }
.paar .fliege { fill: var(--gold); }
.paar .arm path { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.paar .braeutigam .arm path { stroke: #2f2588; }
.paar .braut .arm path { stroke: var(--gold-hi); stroke-width: 1.9; }
.paar .arm-aussen-r { transform-origin: 38.9px 24.6px; }
.paar .arm-innen-r { transform-origin: 27.8px 24.6px; }
.paar .arm-innen-l { transform-origin: 19.6px 23.4px; }
.paar .arm-aussen-l { transform-origin: 13px 23.4px; }
.paar .kopf { fill: var(--gold-hi); }
.paar .haar-r { fill: #2a2077; }
.paar .haar-l, .paar .dutt { fill: var(--gold); }
.paar .auge { fill: #3a2a1e; }
.paar .mund { fill: none; stroke: #8a4a2c; stroke-width: .6; stroke-linecap: round; }
.paar .mund-jubel { fill: #8a3b2a; opacity: 0; }
.paar .schleier { fill: rgba(244, 240, 255, .3); stroke: rgba(244, 240, 255, .75); stroke-width: .8; stroke-linecap: round; transform-origin: 12.6px 12.4px; }
.paar .rock { transform-origin: 16px 29.6px; }
.paar .rock path:first-child { fill: var(--lilac); stroke: var(--gold); stroke-width: .8; stroke-linejoin: round; }
.paar .rock .falte { fill: none; stroke: rgba(216, 180, 106, .45); stroke-width: .6; stroke-linecap: round; }
.paar .mieder { fill: var(--lilac); stroke: var(--gold); stroke-width: .8; }
.paar .schaerpe { stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.paar .blume { fill: var(--gold); }
.paar .b2 { fill: #8e86ff; }
.paar .b3 { fill: var(--lilac); }
.paar .blatt { stroke: #6fbf8c; stroke-width: .8; stroke-linecap: round; }
.paar .haende { fill: var(--gold-hi); }
.paar .arm, .paar .haende { transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease; }
/* Laufen */
.paar.is-laufen .bein-1 { animation: paar-bein-a .44s ease-in-out infinite alternate; }
.paar.is-laufen .bein-2 { animation: paar-bein-b .44s ease-in-out infinite alternate; }
.paar.is-laufen .rock { animation: paar-rock .44s ease-in-out infinite alternate; }
.paar.is-laufen .arm-aussen-r { animation: paar-arm .44s ease-in-out infinite alternate; }
.paar.is-laufen .arm-aussen-l { animation: paar-arm .44s ease-in-out infinite alternate-reverse; }
.paar.is-laufen .schleier { animation: paar-schleier .66s ease-in-out infinite alternate; }
.paar.is-laufen .paar-figur { animation: paar-wippen .22s ease-in-out infinite alternate; }
@keyframes paar-bein-a { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } }
@keyframes paar-bein-b { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes paar-rock { from { transform: skewX(5deg); } to { transform: skewX(-5deg); } }
@keyframes paar-arm { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes paar-schleier { from { transform: rotate(4deg); } to { transform: rotate(-6deg); } }
@keyframes paar-wippen { to { transform: translateY(-1.3px); } }
/* Jubeln bei „Musik & Party“ */
.paar.is-jubeln .arm-aussen-r { transform: rotate(-150deg); }
.paar.is-jubeln .arm-innen-r { transform: rotate(158deg); }
.paar.is-jubeln .arm-innen-l { transform: rotate(-158deg); }
.paar.is-jubeln .arm-aussen-l { transform: rotate(132deg); }
.paar.is-jubeln .haende, .paar.is-jubeln .mund { opacity: 0; }
.paar.is-jubeln .mund-jubel { opacity: 1; }
.paar.is-jubeln .paar-figur { animation: paar-sprung .56s cubic-bezier(.3, .6, .4, 1) 3; }
@keyframes paar-sprung { 0%, 100% { transform: none; } 45% { transform: translateY(-9px); } }
.stern.is-besucht .stern-punkt { animation: stern-besucht .8s ease; }
@keyframes stern-besucht {
  35% { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px rgba(241, 217, 160, .95), 0 0 0 9px rgba(216, 180, 106, .12), 0 0 40px rgba(216, 180, 106, .5); }
}
.paar-konfetti { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.paar-konfetti i {
  position: absolute; left: -3.5px; top: -2.5px; width: 7px; height: 5px; border-radius: 1px; background: var(--f, var(--gold));
  opacity: 0; animation: paar-konfetti 1.5s cubic-bezier(.2, .7, .3, 1) forwards;
}
.paar-konfetti b {
  position: absolute; left: -6px; top: -12px; color: var(--gold); font: 500 17px/1 var(--font-head);
  text-shadow: 0 0 8px rgba(216, 180, 106, .6); opacity: 0; animation: paar-note 1.9s ease-out forwards;
}
@keyframes paar-konfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .6)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 46px)) rotate(var(--r)); }
}
@keyframes paar-note {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -58px) rotate(-12deg) scale(1.1); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .paar { opacity: 0; animation: paar-auf .7s ease 1.4s forwards; }
  .js .paar:not(.is-laufen):not(.is-jubeln):not(.ist-gelaufen) .arm-aussen-l { animation: paar-winken 2.2s ease-in-out 2.4s; }
}
@keyframes paar-auf { from { opacity: 0; } to { opacity: 1; } }   /* nur Deckkraft – die Lage setzt script.js per transform */
@keyframes paar-winken {
  0%, 100% { transform: none; }
  18% { transform: rotate(140deg); } 34% { transform: rotate(116deg); } 50% { transform: rotate(150deg); } 66% { transform: rotate(118deg); } 82% { transform: rotate(140deg); }
}
@media (max-width: 640px) {
  .paar { width: 44px; height: 55px; margin: -53.5px 0 0 -22px; }
}
@media (max-width: 380px) {
  .paar { width: 40px; height: 50px; margin: -48.7px 0 0 -20px; }
}

/* Kapitel: links der Kopf (bleibt beim Scrollen stehen), rechts die Partner */
.netz { padding-bottom: var(--sec); }
.kapitel {
  position: relative; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 32px 64px;
  padding: clamp(52px, 7vw, 92px) 0; scroll-margin-top: 80px;
}
.kapitel::before {                                     /* feine Lichtlinie zwischen den Kapiteln */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(133, 98, 255, 0), rgba(183, 164, 251, .35) 30%, rgba(216, 180, 106, .45) 50%, rgba(183, 164, 251, .35) 70%, rgba(133, 98, 255, 0));
}
.kapitel-kopf { position: sticky; top: 112px; align-self: start; }
.kapitel-nr {
  margin: 0; font-family: var(--font-head); font-size: 68px; font-weight: 500; line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(216, 180, 106, .6);
}
.kapitel-bild { color: var(--gold); }
.kapitel-bild svg { display: block; width: 176px; height: auto; margin: 6px 0 2px -8px; }
.kapitel-kopf h2 { margin: 4px 0 6px; font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); line-height: 1.15; letter-spacing: -.012em; }
.kapitel-zeile { margin: 0 0 14px; color: var(--gold); font-size: 15px; font-weight: 500; }
.kapitel-text { margin: 0; color: var(--ash); font-size: 15.5px; line-height: 1.62; }
.kapitel-tipp {
  display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-card);
  background: rgba(16, 9, 58, .55); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .2);
  color: var(--fog); font-size: 14px; line-height: 1.55;
}
.kapitel-tipp .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold); }
.kapitel-tipp strong { color: var(--lilac); font-weight: 500; }
.kapitel-hoch { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--fog); font-size: 13px; text-decoration: none; transition: color .2s; }
.kapitel-hoch .ico { width: 14px; height: 14px; }
@media (hover: hover) { .kapitel-hoch:hover { color: var(--gold); } }
.kapitel-gruppe + .kapitel-gruppe { margin-top: 36px; }
.kapitel-gruppe h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  color: var(--ash); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.kapitel-gruppe h3 span { color: var(--gold); letter-spacing: 0; }
.kapitel-gruppe h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216, 180, 106, .35), rgba(216, 180, 106, 0)); }
.kapitel.is-ziel .kapitel-nr { animation: ziel-blitz 1.6s ease; }
@keyframes ziel-blitz { 0%, 100% { color: transparent; } 30% { color: rgba(216, 180, 106, .85); } }
@media (prefers-reduced-motion: no-preference) {
  .js .kapitel-bild svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) .3s; }
  .js .kapitel-kopf.is-in .kapitel-bild svg > * { stroke-dashoffset: 0; }
}

/* Partner-Karten */
.partner-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.partner > a, .partner > div {
  position: relative; display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 15px 44px 15px 17px;
  border-radius: var(--r-card); background: var(--midnight); box-shadow: var(--edge), inset 0 0 24px rgba(255, 255, 255, .025);
  color: var(--lilac); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s ease, background-color .3s ease;
}
.partner-name { font-family: var(--font-head); font-size: 16px; font-weight: 500; line-height: 1.3; }
.partner-info { display: flex; align-items: center; gap: 6px; color: var(--fog); font-size: 13px; line-height: 1.4; }
.partner-info .ico { flex: none; width: 13px; height: 13px; color: var(--gold); }
.partner-tel a { color: var(--fog); text-decoration: none; }
@media (hover: hover) { .partner-tel a:hover { color: var(--gold); } }
.partner-pfeil { position: absolute; top: 17px; right: 16px; width: 15px; height: 15px; color: var(--dusk); transition: transform .3s var(--ease), color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .partner > a:hover {
    transform: translateY(-2px); background-color: #0b0628;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55), inset 0 0 22px rgba(216, 180, 106, .05), 0 14px 28px -20px rgba(0, 0, 0, .9);
  }
  .partner > a:hover .partner-pfeil { color: var(--gold); transform: translate(2px, -2px); }
}
.partner > a:focus-visible { outline-offset: 2px; }

/* 09 – Die Party */
.kapitel--party { display: block; }
.party-karte {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; overflow: hidden;
  border-radius: var(--r-block); background: var(--midnight);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .32), var(--rim), 0 30px 60px -36px rgba(216, 180, 106, .35);
}
.party-bild { margin: 0; min-height: 100%; }
.party-bild img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 40%; }
.party-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 52px); }
.party-text h2 { margin: 6px 0 6px; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); }
.party-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.net-note { max-width: 780px; margin: 40px auto 0; color: var(--fog); font-size: 13px; text-align: center; }

.notfound { min-height: 100vh; display: grid; align-items: center; padding: 140px 0 80px; text-align: center; }
.notfound .container { display: flex; flex-direction: column; align-items: center; }
.notfound .display { font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; }
.notfound .lead { max-width: 560px; margin-top: 20px; color: var(--fog); }

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 980px) {
  .nav-links, .nav-tel { display: none; }
  .nav-tel.nav-insta { display: inline-flex; padding: 7px; }     /* Handy: nur das Symbol */
  .nav-toggle { display: grid; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about, .music, .tech, .booth, .biz, .regions, .anfrage, .net-teaser, .musik-start { grid-template-columns: minmax(0, 1fr); }
  .about .block--portrait { max-width: 520px; width: 100%; margin-inline: auto; }
  .portraet { max-width: 520px; width: 100%; margin-inline: auto; }
  .seit-knopf { right: 14px; bottom: -18px; width: 118px; }   /* am Handy nicht über den Rand hinaus */
  .seit-knopf b { font-size: 31px; }
  .about-copy { order: -1; }                       /* eigene Seite: zuerst Überschrift und Text, dann das Foto */
  .music .block--tall { min-height: 0; aspect-ratio: 4 / 5; }   /* Hochformat-Foto am Mischpult: Kopf bis Hände im Bild */
  .block--reel { min-height: 0; aspect-ratio: 4 / 5; max-height: 640px; }
  .musik-start .block--reel { width: 100%; max-width: 440px; margin-inline: auto; }
  .about--start .about-copy { order: 0; }                  /* Startseite: erst Pepes Foto, dann „Servus“ */
  .about--start .block--portrait { aspect-ratio: 3 / 2; }   /* … und zwar das ganze Foto im Querformat */
  .booth-photos { max-width: 540px; width: 100%; margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfrage-info { position: static; }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .facts-row li:nth-child(3)::before { display: none; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .features--3 { grid-template-columns: minmax(0, 1fr); }
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .included { padding: 20px; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .feature { padding: 12px 14px; margin-inline: -10px; }   /* Text steht wie bisher, der Goldrahmen hat Luft */
  .steps { grid-template-columns: minmax(0, 1fr); }
  .facts-row li { padding: 6px 10px; }
  .facts-row span { font-size: 13px; }
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .plan-body { padding: 0 20px 22px; }
  .plan-foot { flex-direction: column; align-items: stretch; }
  .plan-foot .btn { width: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }   /* Kontakt über die ganze Breite: Nummer, Mail und Ort ohne Umbruch */
  .booth-photos { padding: 0 14% 20% 0; }
  .booth-photo--ring { width: 58%; box-shadow: 0 0 0 4px #08051c; }
  .marquee { --kachel: 280px; }
  .review { padding: 18px 18px 16px; }
  .review blockquote p { font-size: 14px; }
  .ki-chip[data-kurz] { top: 6px; right: 6px; padding: 2px 7px; font-size: 0; letter-spacing: 0; }   /* Kurzform aus data-kurz */
  .ki-chip[data-kurz]::before { content: attr(data-kurz); font-size: 11px; }
  .block--photo { aspect-ratio: 4 / 3; }
  .block--wide { aspect-ratio: 4 / 3; }
  .player-meta { display: none; }
  .radar-places text { font-size: 19px; }
  .radar-home text { font-size: 22px; }
  .radar-regions text { font-size: 17px; letter-spacing: .1em; }
  .radar-regions .radar-country { font-size: 17px; }
  .radar-ring-labels text, .radar-river-labels text { font-size: 17px; }
  .qa summary { padding: 16px 18px; font-size: 16px; }
  .qa-a { padding: 0 18px 18px; }
  .consent { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 16px; }
  .consent-text { font-size: 12.5px; }
  .consent-actions { margin-top: 12px; }
}
@media (max-width: 380px) {
  .nav { padding-left: 12px; }
  .nav .btn--sm { padding: 0 12px; font-size: 13px; }
}

/* ---------- Reels: 5 Handys im Fächer (Inhalt: tools/reels.py) ---------- */
.section--reels { overflow: hidden; overflow: clip; }
.reels {
  --pw: 212px;                       /* Breite eines Handys */
  --ph: calc(var(--pw) * 2.05);      /* Höhe – Seitenverhältnis wie ein aktuelles Smartphone */
  --sx: 166px;                       /* Abstand im Fächer */
  --ang: 7.5deg;                     /* Drehung pro Position */
  --dy: 16px;                        /* äußere Handys sitzen tiefer */
  position: relative;
}
.reels-stage { position: relative; height: calc(var(--ph) + 82px); max-width: 1100px; margin: 4px auto 0; }
.reels-stage::before {               /* Spotlight hinter dem Fächer */
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(1000px, 130%); height: 96%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(216, 180, 106, .17), rgba(80, 70, 228, .10) 58%, rgba(3, 0, 20, 0) 100%);
  pointer-events: none;
}
.reels-stage::after {                /* Lichtkante wie eine Bühne */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 22px; height: 1px;
  background: var(--aurora-x); opacity: .65; pointer-events: none;
}
.reels-fan { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.reel {
  position: absolute; left: 50%; bottom: 40px; width: var(--pw); margin-left: calc(var(--pw) / -2);
  z-index: calc(10 - var(--a) * 2);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--o) * var(--sx))) translateY(calc(var(--k) * var(--dy))) rotate(calc(var(--o) * var(--ang)));
  transition: transform 1.05s cubic-bezier(.2, .9, .24, 1.12) calc(var(--a) * 95ms + 60ms);
}
.js .reels:not(.is-open) .reel {     /* vor dem Aufklappen: eng gestapelt – jedes Handy schaut ein Stück hervor (antippbar) */
  transform: translateX(calc(var(--o) * 30px)) translateY(28px) rotate(calc(var(--o) * 1.4deg)) scale(.93);
}
.reel.is-active { z-index: 20; }

/* Das Handy: Titanrahmen, Seitentasten, schwarzer Displayrand, Kamera-Aussparung */
.phone {
  position: relative; display: block; width: var(--pw); height: var(--ph);
  padding: calc(var(--pw) * .026); border: 0; border-radius: calc(var(--pw) * .2);
  background: linear-gradient(150deg, #64616f 0%, #2b2834 17%, #121017 45%, #2d2a36 76%, #66636f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 0 0 2px rgba(0, 0, 0, .5), inset 0 2px 1px rgba(255, 255, 255, .2);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; pointer-events: none; }
.phone::before {                     /* Aktions- und Lautstärketasten */
  left: -2px; top: 18%; height: 5.5%; border-radius: 2px 0 0 2px;
  background: #47444f;
  box-shadow: 0 calc(var(--ph) * .085) 0 #47444f, 0 calc(var(--ph) * .17) 0 #47444f;
}
.phone::after {                      /* Seitentaste */
  right: -2px; top: 27%; height: 11%; border-radius: 0 2px 2px 0; background: #47444f;
}
.phone-screen {
  position: relative; display: block; height: 100%; overflow: hidden;
  border: calc(var(--pw) * .03) solid #040307; border-radius: calc(var(--pw) * .174);
  background: #08070d; isolation: isolate; transform: translateZ(0);
  transition: filter .55s var(--ease);
}
.phone-screen::before {              /* dunkler Verlauf hinter der Statusleiste */
  content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 20%;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); pointer-events: none;
}
.phone-screen::after {               /* Glasreflex */
  content: ""; position: absolute; z-index: 6; inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, 0) 44%);
  pointer-events: none;
}
.reel-poster, .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-video { opacity: 0; transition: opacity .35s ease; }
.reel.is-live .reel-video { opacity: 1; }
.reel.is-still.is-run .reel-poster { animation: reelzoom 5s linear forwards; }
@keyframes reelzoom { to { transform: scale(1.08); } }
.phone-island {
  position: absolute; z-index: 7; left: 50%; top: calc(var(--pw) * .088);
  width: 31%; height: calc(var(--pw) * .086); transform: translateX(-50%);
  border-radius: var(--r-pill); background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone-island::after {               /* Kameralinse */
  content: ""; position: absolute; right: 13%; top: 50%; width: calc(var(--pw) * .032); height: calc(var(--pw) * .032);
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #33405f 0 28%, #0b0d16 62%);
}
.phone-status {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--pw) * .055);
  display: flex; align-items: center; gap: calc(var(--pw) * .022);
  padding: 0 calc(var(--pw) * .085) 0 calc(var(--pw) * .1);
  color: #fff; font-family: var(--font-body); font-size: calc(var(--pw) * .052); font-weight: 500; line-height: 1;
}
.phone-status::before { content: attr(data-zeit); margin-right: auto; font-variant-numeric: tabular-nums; }   /* Deko-Uhrzeit (reels.py) */
.phone-status .sig {
  width: calc(var(--pw) * .068); height: calc(var(--pw) * .044);
  background: linear-gradient(90deg, #fff 0 19%, transparent 19% 27%, #fff 27% 46%, transparent 46% 54%, #fff 54% 73%, transparent 73% 81%, rgba(255, 255, 255, .45) 81%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.phone-status .bat {
  position: relative; width: calc(var(--pw) * .088); height: calc(var(--pw) * .044);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 3px; padding: 1px;
  background: linear-gradient(90deg, #fff 0 74%, rgba(255, 255, 255, 0) 74%) content-box;
}
.phone-status .bat::after {
  content: ""; position: absolute; right: -3px; top: 30%; width: 2px; height: 40%;
  border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .6);
}
.reel-bar {
  position: absolute; z-index: 3; left: 9%; right: 9%; top: calc(var(--pw) * .2); height: 2px;
  overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3);
}
.reel-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.reel.is-run .reel-bar i { animation: reelbar 5s linear forwards; }
.reels.is-paused .reel.is-run .reel-bar i, .reels.is-paused .reel.is-run .reel-poster { animation-play-state: paused; }
@keyframes reelbar { to { transform: scaleX(1); } }
.reel-meta {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: calc(var(--pw) * .04);
  padding: 34% 8% 15%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .74));
  font-size: calc(var(--pw) * .05); line-height: 1.35;
}
.reel-meta img {
  flex: none; width: calc(var(--pw) * .13); height: calc(var(--pw) * .13);
  border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.reel-meta > span { min-width: 0; }
.reel-namen::before, .reel-namen::after { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-namen::before { content: attr(data-handle); font-weight: 600; }                 /* Konto-Name wie bei Instagram (Deko) */
.reel-namen::after { content: attr(data-titel); color: rgba(255, 255, 255, .85); }   /* Titel (Deko; der Knopf nennt ihn per aria-label) */
.phone-home {
  position: absolute; z-index: 4; left: 50%; bottom: calc(var(--pw) * .03);
  width: 36%; height: 3px; transform: translateX(-50%); border-radius: 3px; background: rgba(255, 255, 255, .85);
}
/* Spotlight auf dem Handy, das gerade läuft: es wird aus dem Fächer gezogen und steht gerade */
.reel.is-active .phone {
  transform: translateY(-24px) rotate(calc(var(--o) * var(--ang) * -1)) scale(1.07);
  box-shadow: inset 0 0 0 1px rgba(241, 217, 160, .8), inset 0 0 0 2px rgba(0, 0, 0, .5), inset 0 2px 1px rgba(255, 255, 255, .25),
              0 0 0 1px rgba(216, 180, 106, .35), 0 0 48px -8px rgba(216, 180, 106, .5);
}
.reels.is-running .reel:not(.is-active) .phone-screen { filter: brightness(.55) saturate(.8); }
@media (hover: hover) {
  .reel:not(.is-active) .phone:hover { transform: translateY(-12px); }
  .reels.is-running .reel:not(.is-active) .phone:hover .phone-screen { filter: brightness(.8) saturate(.9); }
}
.phone:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.reels-ui { display: grid; justify-items: center; gap: 14px; margin-top: 10px; text-align: center; }
.reels-now {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  min-height: 28px; margin: 0;
  color: var(--lilac); font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1.35;
}
.reels-count { color: var(--gold); font-family: var(--font-body); font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.reels-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-family: var(--font-body); font-size: 14px; text-decoration: none; }
@media (hover: hover) { .reels-link:hover { color: var(--gold-hi); } }
.reels-link .ico { width: 14px; height: 14px; }
.reels-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.reels-actions .ico { width: 15px; height: 15px; }
.reels-note { max-width: 52ch; margin: 0; color: var(--fog); font-size: 13px; line-height: 1.5; }

@media (max-width: 1139px) { .reels { --pw: 170px; --sx: 118px; --ang: 6.5deg; --dy: 13px; } }
@media (max-width: 859px) {
  .reels { --pw: 140px; --sx: 78px; --ang: 5deg; --dy: 10px; }
  .reels-fan { transform: translateX(calc(var(--focus, 0) * var(--sx) * -1)); transition: transform .7s var(--ease); }  /* aktives Handy in die Mitte */
  /* Stapel-Reihenfolge vom aktiven Handy aus: Jedes Nachbar-Handy schaut mit einem gut antippbaren Streifen hervor
     (sonst lag z. B. Handy 2 fast ganz unter Handy 1 und Handy 3). --nah setzt script.js. */
  .reel { z-index: calc(10 - var(--nah, var(--a)) * 2); }
}
@media (max-width: 559px) {
  .reels { --pw: 124px; --sx: 44px; --ang: 3.5deg; --dy: 7px; }
  .reels-stage { height: calc(var(--ph) + 76px); }
  .reel { bottom: 34px; }
  .reel-namen::after { display: none; }
  .reel.is-active .phone { transform: translateY(-16px) rotate(calc(var(--o) * var(--ang) * -1)) scale(1.12); }
  .reels-now { font-size: 18px; }
}
@media (max-width: 379px) { .reels { --pw: 110px; --sx: 36px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  .stern { width: 140px; margin: -24px 0 0 -70px; }
  .stern-punkt { width: 48px; height: 48px; }
  .stern-punkt .ico { width: 21px; height: 21px; }
  .stern-name { margin-top: 8px; font-size: 13.5px; }
  .stern-zahl { display: none; }                        /* Platz: nur der Name, die Anzahl steht im Kapitel */
  .stern-mitte { margin-top: -36px; }
  .stern-mitte .stern-punkt { width: 72px; height: 72px; }
}
@media (max-width: 980px) {
  .kapitel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kapitel-kopf { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nr bild" "worte worte"; align-items: end; column-gap: 20px; }
  .kapitel-nr { grid-area: nr; }
  .kapitel-bild { grid-area: bild; }
  .kapitel-bild svg { width: 150px; margin: 0; }
  .kapitel-worte { grid-area: worte; max-width: 640px; }
}
@media (max-width: 860px) {
  .party-karte { grid-template-columns: minmax(0, 1fr); }
  .party-bild img { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .sternbild { aspect-ratio: 100 / 118; margin-bottom: 36px; }
  .sternbild::before { width: 80%; }
  .sternbild-linien--breit, .stern-mitte { display: none; }
  .sternbild-linien--schmal { display: block; }
  .stern { left: var(--mx); top: var(--my); width: 108px; margin: -24px 0 0 -54px; }
  .stern-punkt { width: 48px; height: 48px; }
  .stern-punkt .ico { width: 21px; height: 21px; }
  .stern-name { margin-top: 8px; font-size: 13px; }
  .stern-zahl { font-size: 12px; }
  .stern:is([data-k="planung"], [data-k="foto"]) :is(.stern-name, .stern-zahl) { background: none; box-shadow: none; }   /* Handy: andere Wege */
  .stern:is([data-k="trauredner"], [data-k="blumen"]) :is(.stern-name, .stern-zahl) { border-radius: 4px; background: rgba(4, 1, 21, .94); box-shadow: 0 0 0 3px rgba(4, 1, 21, .94); }
  .partner-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .partner > a, .partner > div { padding: 13px 42px 13px 15px; }
  .kapitel-nr { font-size: 54px; }
  .kapitel-bild svg { width: 120px; }
  .party-knoepfe { flex-direction: column; align-items: stretch; }
}

@media (max-width: 380px) {                             /* nach dem 640er-Block, sonst gilt der */
  .stern { width: 92px; margin-left: -46px; }
  .stern-name { font-size: 12px; line-height: 1.2; }
  .stern-zahl { font-size: 12px; }
}

/* ---------- Ruhige Variante ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  @media (hover: hover) { .block[data-lightbox]:hover > img, .block[data-lightbox]:hover > .foto-logo { transform: none; } }
  .js .vorhang { --p: 1; }                       /* Vorhang steht offen, Fotos heben sich nicht */
  .vorhang > figure { --h: 0 !important; }
  @media (hover: hover) { .vorhang:not(.is-zu) > figure:hover > img { transform: none; } }
}

/* ---------- Sternenfeld (erzeugt mit tools/stars.py) ---------- */
.sky i:nth-child(1){width:1px;height:1px;box-shadow:1133px 1117px #cbf4,2266px 1068px #cbf3,1176px 1097px #fff4,1692px 1201px #fff7,39px 306px #fff5,1536px 560px #cbf4,893px 1555px #fff4,2526px 1462px #fff7,2044px 472px #fff3,2133px 968px #fff6,2326px 659px #fff5,2500px 43px #fff6,227px 1303px #cbf5,751px 1205px #fff7,282px 365px #fff7,2340px 623px #fff4,1270px 546px #cbf7,105px 1555px #fff4,1122px 362px #cbf8,1848px 495px #fff8,1423px 617px #fff6,2458px 1332px #fff8,2354px 1171px #cbf6,451px 1382px #cbf7,1190px 588px #fff4,614px 1126px #fff6,1974px 1441px #fff6,1794px 621px #fff8,2346px 512px #fff4,1986px 554px #fff4,1037px 1515px #cbf3,795px 699px #fff7,296px 815px #fff8,1432px 1135px #fff5,162px 1025px #cbf5,1363px 1007px #fff8,1923px 128px #fff7,1952px 769px #fff4,342px 966px #fff6,2162px 784px #fff5,2270px 300px #fff6,1719px 1483px #fff6,111px 168px #fff4,1252px 1517px #fff3,1102px 789px #fff8,2036px 31px #fff4,787px 367px #fff4,815px 255px #fff6,10px 1322px #fff6,1090px 491px #fff4,1606px 22px #fff5,830px 1453px #cbf6,938px 45px #fff3,370px 903px #fff3,2196px 1020px #fff8,829px 834px #fff7,458px 1082px #cbf6,1305px 371px #fff8,1388px 1054px #cbf5,2089px 236px #fff8,2456px 206px #fff4,1081px 166px #cbf8,1240px 666px #fff7,1007px 591px #fff5,558px 437px #fff4,1108px 1352px #fff5,1330px 948px #fff5,2348px 780px #fff4,943px 939px #fff6,1236px 1546px #fff7,1724px 59px #cbf3,1633px 1489px #fff5,586px 282px #cbf7,353px 1536px #fff4,1063px 273px #fff4,1097px 96px #cbf6,1611px 14px #fff6,487px 431px #fff7,1198px 1344px #fff3,1407px 49px #fff8,845px 496px #fff6,251px 877px #cbf6,1782px 98px #fff5,2303px 1271px #fff6,2350px 779px #fff7,1368px 877px #fff7,1180px 719px #fff5,154px 442px #fff7,155px 1540px #fff8,2276px 743px #cbf4,2420px 366px #fff3,1234px 1596px #fff4,1105px 1245px #fff7,660px 1486px #fff4,774px 1208px #fff4,2249px 494px #fff3,1982px 402px #fff8,507px 738px #fff6,604px 1474px #fff7,1374px 1117px #fff7,705px 1270px #fff8,1318px 751px #cbf4,784px 1537px #fff7,2102px 295px #fff8,2518px 1435px #fff7,1420px 1290px #fff3,1478px 987px #fff7,398px 755px #fff3,1714px 1285px #cbf3,1567px 574px #fff7,2103px 548px #fff4,620px 954px #fff5,892px 334px #fff8,828px 1529px #fff5,1672px 1032px #fff4,175px 1344px #fff7,666px 437px #fff6,385px 390px #fff3,93px 163px #fff4,1580px 1037px #fff4,1242px 1333px #fff6,1279px 1453px #fff5,429px 329px #fff3,1816px 278px #fff7,1394px 1541px #fff6,246px 882px #fff6,1222px 562px #fff4,1809px 476px #fff8,1653px 124px #fff8,2006px 1440px #fff6,1825px 62px #cbf7,1609px 945px #fff6,388px 476px #cbf3,1296px 768px #fff7,1190px 490px #fff3,308px 984px #cbf7,1602px 389px #fff4,1615px 417px #cbf5,31px 1374px #fff3,1985px 779px #fff6,609px 552px #cbf6,218px 496px #fff5,762px 1076px #cbf3,426px 264px #fff8,1068px 20px #cbf4,2px 1085px #fff3,922px 353px #fff4,2286px 269px #fff6,2558px 343px #fff6,324px 541px #cbf3,2507px 10px #fff7,949px 1315px #fff5,1866px 583px #fff3,1414px 894px #fff6,1708px 1484px #fff3,1962px 826px #fff5,232px 335px #fff5,681px 1482px #fff3,1818px 379px #fff5,938px 489px #cbf8,285px 434px #fff4,941px 87px #cbf7,399px 939px #fff7,2158px 929px #fff8,1371px 782px #fff8,721px 1430px #fff3,179px 1140px #fff4,647px 136px #fff7,139px 706px #fff8,1327px 1406px #fff5,1848px 881px #fff6,2509px 1570px #fff5,104px 1597px #fff7,235px 645px #fff4,185px 1507px #fff4,577px 419px #fff7,1364px 1149px #fff7,2369px 841px #fff7,1516px 562px #fff3,2455px 991px #fff6,1930px 1317px #fff7,354px 1192px #cbf6,954px 397px #fff5,989px 789px #fff3,1204px 781px #fff7,1020px 1410px #cbf8,1632px 1159px #fff5,1139px 1339px #cbf7,1017px 1286px #fff8,5px 430px #fff7,396px 1098px #fff4,721px 916px #cbf8,36px 94px #fff3,1908px 1308px #fff3,2230px 1356px #fff7,762px 528px #fff3,1910px 394px #fff5,2007px 488px #fff3,1377px 549px #fff8,830px 228px #cbf3,1027px 744px #fff8,970px 1387px #fff4,2048px 770px #fff8,2184px 291px #fff3,1942px 788px #fff8,494px 365px #fff5,77px 714px #fff6,2197px 1317px #fff6,1069px 1274px #cbf5,1508px 979px #fff7,796px 508px #cbf3,983px 98px #fff6,1811px 7px #fff6,602px 363px #fff3,1400px 1450px #fff4,1284px 281px #fff8,365px 1119px #fff5,2339px 392px #cbf7,705px 665px #fff8,1712px 166px #cbf8,1171px 233px #cbf8,1537px 362px #fff4,1210px 1385px #fff3,792px 1345px #fff5,648px 947px #fff3,773px 1243px #fff7,2122px 1433px #cbf4,1995px 1593px #fff6,2358px 165px #fff6,808px 930px #fff8,507px 329px #fff4,1871px 243px #cbf7,2089px 646px #fff7,1122px 990px #fff6,1746px 571px #cbf4,263px 361px #fff7,473px 962px #fff3,1062px 923px #cbf4,440px 252px #fff4,1780px 202px #fff8,2329px 257px #fff8,1893px 929px #fff5,1244px 515px #fff7,664px 389px #fff3,1342px 289px #fff4,2073px 583px #fff3,1848px 1167px #fff6,344px 512px #cbf7,43px 1586px #fff3,186px 389px #fff7,341px 1025px #fff5,483px 479px #fff5,307px 810px #cbf5,2537px 134px #fff6,606px 1578px #fff4,1333px 723px #fff3,1945px 377px #cbf3,715px 1186px #fff6,2458px 1058px #fff5,1626px 861px #fff7,2527px 1599px #fff6,93px 407px #fff4,842px 1548px #fff8,347px 363px #cbf7,2460px 955px #fff6,6px 1372px #fff8,2383px 616px #fff3,258px 954px #fff6,2483px 151px #fff5,803px 95px #fff7,2429px 670px #fff6,1617px 103px #fff4,2498px 1196px #cbf8,2039px 243px #fff6,1763px 909px #fff6,2092px 972px #fff5,1232px 904px #fff8,807px 587px #cbf6,376px 561px #fff7,1114px 1466px #cbf7,892px 586px #fff6,1800px 692px #fff4,1305px 694px #fff4,465px 1234px #fff7,1305px 853px #fff6,1742px 1097px #cbf5,557px 947px #fff6,1030px 638px #fff8,1282px 311px #cbf6,1898px 464px #fff8,1348px 1549px #fff6,1033px 1200px #fff8,1833px 1552px #fff3,2411px 511px #fff4,2339px 609px #fff6,930px 1472px #fff4,2276px 1338px #fff3,2381px 1466px #fff6,332px 1562px #fff5,2473px 594px #cbf5,891px 1027px #fff5,836px 1272px #fff3,145px 182px #fff7,1377px 536px #fff4,1007px 1160px #fff4,1426px 872px #fff5,1302px 1054px #fff4,1955px 1421px #fff4,175px 215px #fff5,1406px 1043px #fff8,1989px 874px #cbf6,746px 24px #fff5,1104px 1047px #cbf7,1545px 834px #cbf6,913px 915px #cbf5,1944px 510px #cbf7,370px 76px #fff3,590px 1053px #cbf5,1399px 766px #fff8,2250px 1150px #fff7,1234px 1059px #fff4,506px 407px #fff3,868px 1058px #fff3,1119px 1552px #fff4,2254px 353px #cbf3,48px 145px #fff8,2229px 436px #fff3,933px 209px #cbf6,1242px 1228px #fff3,1233px 1593px #fff4,796px 1197px #fff3,1601px 155px #fff5,1211px 696px #cbf5,1816px 232px #fff7,1280px 1415px #fff3,2518px 549px #fff6,2491px 278px #fff6,1067px 496px #fff6,527px 440px #fff5,1579px 1158px #fff6,440px 450px #fff5,1552px 877px #fff8,450px 597px #fff3,1522px 432px #fff3,571px 1219px #fff3,1359px 622px #fff3,2012px 1249px #fff7,585px 964px #cbf5,2171px 1187px #fff5,2153px 1583px #fff6,824px 748px #fff6,206px 893px #fff6,552px 183px #fff5,128px 286px #cbf3,1678px 791px #fff4,1961px 1319px #cbf4,1949px 144px #fff7,747px 1569px #cbf4,1445px 83px #fff8,1870px 684px #fff7,1925px 70px #cbf7,1535px 814px #cbf4,2292px 1501px #cbf5,1077px 365px #fff6,1902px 578px #fff3,148px 1103px #cbf5,975px 1537px #fff7,1867px 450px #cbf5,98px 1480px #fff7,792px 1130px #fff5,761px 280px #fff7,2121px 160px #fff5,979px 1585px #cbf7,515px 184px #fff4,463px 348px #cbf7,440px 1569px #fff8,1213px 927px #fff6,2426px 986px #fff3,325px 868px #fff3,1854px 1280px #fff8,1683px 1046px #fff6,646px 1464px #fff5,2061px 3px #cbf6,65px 1492px #fff3,1419px 667px #fff3,2254px 268px #cbf3,927px 805px #cbf4,423px 1160px #fff4,999px 1290px #fff5,949px 970px #fff4,557px 920px #fff3,1130px 1162px #cbf6,776px 951px #fff8,1340px 1316px #fff4,2479px 231px #fff3,1573px 1075px #fff7,1699px 1037px #fff3,1944px 1274px #fff4,1158px 638px #fff4,1126px 472px #fff7,1471px 1153px #fff6,84px 668px #fff4,2375px 1257px #fff7,132px 234px #fff3,56px 181px #fff8,1754px 1124px #cbf6,1309px 1481px #fff5,1844px 401px #fff8,13px 683px #cbf7,396px 1368px #fff4,1295px 1516px #fff3,632px 993px #fff4,610px 1246px #fff8,397px 1023px #cbf4,881px 1174px #cbf3,79px 1152px #fff7,205px 1502px #fff6,730px 1368px #cbf4,1861px 849px #fff8,1736px 1274px #fff6,1415px 970px #fff8,350px 1097px #fff7,2332px 477px #fff8,1014px 1069px #fff7,1995px 1507px #fff5,2472px 504px #cbf3,73px 1072px #fff5,2429px 1057px #fff5,1030px 408px #fff8,155px 864px #cbf8}
.sky i:nth-child(2){width:1px;height:1px;box-shadow:749px 645px #fffd,2504px 872px #fffa,590px 874px #fff8,43px 742px #fffa,455px 831px #cbfa,1637px 789px #fffd,1488px 1461px #fffa,368px 1098px #fff7,8px 1223px #cbf7,2498px 454px #fff9,1022px 1176px #fff8,59px 837px #fffb,1388px 1007px #fd9b,1089px 1306px #fff8,33px 1550px #fffc,2445px 1177px #fffc,971px 1256px #fffb,671px 1109px #fffb,2506px 1214px #fffa,2178px 20px #fffd,810px 1011px #fffd,2086px 754px #cbf7,2219px 1344px #fff9,1270px 1402px #fffa,974px 1054px #fff8,2258px 1185px #fffb,2432px 573px #cbfa,984px 1500px #fff9,574px 904px #fffa,73px 1036px #fffa,367px 1159px #fffd,143px 543px #fff9,1481px 605px #fffb,860px 1161px #fff7,620px 968px #fffd,1637px 408px #fffc,1929px 1141px #fff8,1620px 1060px #fffc,44px 453px #fff9,2214px 1082px #fffc,1914px 265px #fffc,1170px 1342px #fffb,1444px 188px #fff9,1048px 135px #cbfb,2005px 1229px #fff9,956px 1546px #cbfd,153px 1346px #fffa,1807px 326px #cbfd,1809px 806px #fffc,556px 362px #fd97,1411px 1031px #fffa,2095px 1316px #fffd,1645px 866px #fffd,584px 979px #fd98,2416px 1454px #cbfd,78px 1278px #fff8,1591px 779px #fffc,640px 5px #fffb,612px 1370px #fff7,1015px 29px #fff9,160px 325px #fff9,733px 583px #cbf7,2412px 1171px #cbfa,2339px 1335px #cbf9,1866px 1545px #fffd,1880px 283px #fffb,1134px 581px #fff9,1950px 1509px #fffa,1060px 49px #fd9b,710px 1204px #fff8,2031px 1299px #fffa,270px 186px #fffd,2361px 653px #fffd,1644px 159px #fffa,1076px 1582px #fffa,13px 302px #fff9,1865px 1551px #fffc,2190px 1189px #fff7,1494px 22px #fff8,2240px 1251px #fffd,2328px 545px #fff8,1681px 581px #fff7,2349px 894px #fffd,1284px 1084px #cbf9,78px 575px #cbf9,1892px 1552px #cbfc,45px 1378px #fff8,229px 1591px #fffb,147px 1017px #fff8,2559px 1584px #cbf8,2295px 1320px #fff9,1619px 693px #cbfd,2239px 585px #cbf8,1015px 1518px #fffd,1626px 776px #fd9c,418px 1059px #fffc,1588px 1582px #fd9a,1415px 1081px #cbfa,740px 629px #fff8,1559px 384px #fffc,886px 441px #fffd,763px 185px #cbfd,231px 1108px #fffa,1165px 1482px #fff9,1764px 453px #cbfd,763px 160px #fffd,764px 241px #cbfb,1027px 204px #fff9,2318px 450px #fff8,706px 1326px #fffc,1986px 799px #fffa,1736px 194px #fffc,16px 321px #fffc,1182px 826px #fd9c,2521px 967px #fff9,1022px 915px #cbfd,2487px 1187px #fffc,505px 1600px #fffb,982px 471px #fffb,889px 1130px #fff9,2377px 494px #fff9,1450px 201px #cbf9,1475px 832px #fff8,224px 1089px #fd9c,2166px 1529px #fffb,1741px 439px #fffc,134px 764px #fffb,1041px 242px #fff9,647px 894px #fffc,1945px 504px #fd98,1647px 1498px #fffa,2217px 1546px #fff8,1088px 864px #cbf8,600px 967px #fff8,2391px 940px #fffa,204px 976px #cbf8,2222px 1171px #fff7,377px 1403px #fff9,2294px 622px #fff8,861px 787px #fff8,2277px 897px #fffb,1843px 1053px #fd9b,1787px 638px #fffa,411px 833px #fffd,372px 374px #fffc,1036px 6px #cbfa,2263px 1539px #cbf9,310px 1538px #fffc,695px 240px #cbf8,2435px 77px #fffa,15px 458px #fffc,1615px 584px #fffc,464px 1362px #fffb,29px 811px #fff9,962px 309px #fd99,1458px 859px #fff8,943px 1579px #fff8,63px 845px #fffd,2108px 857px #fffd,530px 687px #cbfd,406px 678px #fffd,1746px 1483px #fff9,82px 1259px #fff9,1565px 293px #fffa,1425px 966px #fffc,403px 159px #fff8,1945px 1576px #fffc,2269px 1211px #fff8,68px 1523px #fff7,135px 680px #fffb}
.sky i:nth-child(3){width:2px;height:2px;box-shadow:644px 713px #fff8,1789px 1165px #fff8,2465px 792px #fffa,713px 1268px #fff6,1395px 550px #fff6,1408px 300px #fff7,880px 743px #fd96,1821px 1403px #fff6,478px 51px #fd9a,1342px 399px #fff8,1231px 307px #fff9,518px 1080px #cbf7,1525px 971px #fff7,2069px 705px #cbfc,541px 457px #fff9,906px 498px #fd9b,492px 1261px #fff9,1599px 1385px #fff9,1723px 463px #fffa,2294px 1286px #fff8,757px 679px #cbfa,2065px 1267px #fffb,1042px 287px #fffc,2336px 228px #fffc,1391px 736px #fffa,198px 1011px #fff7,1566px 184px #fd9b,1509px 1282px #fff8,1801px 1245px #cbfa,1117px 1111px #fff9,346px 167px #fffb,1147px 8px #fff8,662px 115px #fff9,1140px 470px #cbf7,2093px 633px #fffb,1785px 1316px #fff6,249px 254px #fffb,1084px 311px #cbf9,1964px 1244px #fffb,1308px 1547px #fffb,1170px 660px #cbf7,10px 1250px #cbf6,980px 392px #cbfb,2031px 1420px #fffb,743px 290px #fffc,378px 580px #fd9a,1421px 671px #cbf8,280px 86px #cbf8,383px 1179px #fff9,1667px 508px #cbf9,1485px 1554px #cbf7,1817px 226px #fff8,77px 731px #fff8,1637px 848px #cbf7,1437px 1492px #fff9,2221px 1007px #fff6,2073px 869px #fff7,946px 1182px #fff9,2289px 163px #fd98,1936px 1126px #fff5,255px 666px #fff7,737px 1112px #fff6,1195px 1059px #fff8,1415px 543px #fff9,1744px 1401px #fff6,168px 1440px #fffa,2177px 1031px #fffa,687px 1214px #fffb,2272px 738px #fff7,1381px 749px #fffa,1840px 289px #cbf6,1276px 756px #fffb,1505px 1427px #fff6,504px 1143px #cbf5,1671px 314px #fff5,2552px 1478px #fff8,373px 758px #cbf9,1525px 1095px #fd96,1187px 1315px #fd99,664px 1407px #fff9,1539px 1215px #fd9a,1153px 257px #fff7,600px 1374px #cbf8,1514px 99px #fff7,228px 537px #fff8,2532px 389px #fffc,660px 373px #fffb,208px 533px #fff8,1021px 969px #fffc,1815px 1052px #fff9,1346px 1324px #fff7,598px 660px #fff9,888px 1163px #fff9,778px 1288px #fff6,1343px 857px #fff7}
.sky i:nth-child(4){width:2px;height:2px;box-shadow:889px 291px 2px #cbff,2328px 311px 2px #fffd,1516px 720px 2px #cbfe,1025px 1096px 2px #fffc,1734px 56px 2px #fd9e,1387px 1225px 2px #cbfc,150px 1112px 2px #fd9d,395px 218px 2px #fd9b,1855px 516px 2px #fffd,1036px 1217px 2px #cbff,1964px 510px 2px #fd9e,1680px 1134px 2px #fffe,936px 111px 2px #fffe,2446px 1189px 2px #fd9f,643px 1402px 2px #fd9c,317px 917px 2px #fffd,301px 318px 2px #ffff,743px 325px 2px #fffb,2483px 1445px 2px #fffc,1579px 835px 2px #fffe,2264px 74px 2px #fffe,719px 1041px 2px #cbfe,405px 721px 2px #fffd,657px 765px 2px #fffd,2297px 677px 2px #fd9d,2548px 1092px 2px #fffd}

/* ---------- Ergänzungen Unterseiten ---------- */
.legal-body .linklike { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(216, 180, 106, .4); text-underline-offset: 3px; }
@media (hover: hover) { .legal-body .linklike:hover { color: var(--lilac); } }
.net-note a { color: var(--gold); }
.footer-bar a[aria-current="page"], .footer-col a[aria-current="page"] { color: var(--lilac); }

/* Galerie: Bild wächst aus dem Vorschaubild in die Großansicht und zurück (View Transitions, script.js) */
::view-transition-group(lightbox) { animation-duration: .35s; animation-timing-function: var(--ease); }

/* Schwebende Knöpfe unten rechts (Pepes Wunsch 23.10.2026): „Nach oben“ erscheint nach dem Scrollen, WhatsApp immer */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; display: grid; justify-items: center; gap: 12px; }
.fab-btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s linear 0s; }
.fab-btn .ico { width: 24px; height: 24px; }
.wa-zeichen { width: 26px; height: 26px; }   /* offizielles WhatsApp-Zeichen von Meta (schwarz, unverändert); ringsum ≥ halbe Zeichengröße frei */
.fab-btn--top { width: 46px; height: 46px; color: var(--gold); background: rgba(6, 3, 23, .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fab-btn--top .ico { width: 20px; height: 20px; transform: rotate(-90deg); }
.fab-btn--wa { color: var(--gold-ink); background: linear-gradient(180deg, #edd39a 0%, #d8b46a 58%, #caa258 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 26px -12px rgba(0, 0, 0, .8); }
.fab-btn--top:not(.is-da) { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); transition: transform .25s var(--ease), opacity .2s, visibility 0s linear .25s; }
@media (hover: hover) { .fab-btn:hover { transform: scale(1.08); } }
body:has(.consent:not([hidden])) .fab { visibility: hidden; }   /* Cookie-Fenster nicht verdecken */
@media (max-width: 980px) { .site-footer { padding-bottom: 120px; } }   /* letzte Zeilen scrollen über die Knöpfe */

/* ==========================================================================
   Apple-Check (Pepe, 06.11.2026)
   ========================================================================== */
/* Tippflächen am Handy mind. 44 × 44 px (Apple: 44 pt) – unsichtbar vergrößert, die Optik bleibt.
   :where() = keine Spezifität: eigene position-/::after-Regeln einzelner Elemente gehen immer vor. */
@media (pointer: coarse) {
  :where(.btn, .link, .nav-toggle, .marquee-toggle, .nav-tel, .kapitel-hoch) { position: relative; }
  :where(.btn, .link, .nav-toggle, .video-btn, .marquee-toggle, .nav-tel, .kapitel-hoch)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .rechner input[type="range"] { height: 44px; margin: 0 0 12px; }   /* vorher 16 px hoch + 14/26 px Rand – Schieber bleibt an derselben Stelle */
}
/* „Kontrast erhöhen“ / „Transparenz reduzieren“ (iPhone, Mac, Windows, Android): Glas wird fast deckend, mit klarer Kante */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .nav::before, .glas-leiste, .video-btn, .fab-btn--top, .ki-chip {
    background: rgba(6, 3, 23, .96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;   /* Nutzereinstellung geht vor (auch vor .is-scrolled/.is-klein) */
  }
  .nav::before, .glas-leiste { box-shadow: inset 0 0 0 1px rgba(244, 240, 255, .32); }
  [data-glas]::before { background: rgba(244, 240, 255, .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ash: #cfcddc; --fog: #bdbacb; --dusk: #a3a1b0; }   /* graue Texte heller */
}

/* ---------- Blog (Runde 51): Übersicht und Location-Beiträge ---------- */
.blog-uebersicht { padding-top: 0; }
.blog-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 360px)); justify-content: center; gap: 20px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.blog-karte > a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--r-block); background: var(--midnight); box-shadow: var(--edge), inset 0 0 24px rgba(255, 255, 255, .025);
  color: var(--lilac); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .blog-karte > a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55), 0 18px 36px -24px rgba(0, 0, 0, .9); }
  .blog-karte > a:hover .link .ico { transform: translateX(3px); }
}
.blog-bild { flex: none; aspect-ratio: 3 / 2; border-radius: 0; }
.blog-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 24px; }
.blog-text .badge { margin: 0; }
.blog-titel { font-family: var(--font-head); font-size: 1.375rem; font-weight: 500; line-height: 1.3; }
.blog-teaser { color: var(--ash); font-size: 15px; line-height: 1.55; }
.blog-meta { color: var(--fog); font-size: 13px; }
.blog-text .link { margin-top: auto; padding-top: 6px; }

.beitrag-kopf .lead { max-width: 680px; }
.beitrag-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 22px 0 0; color: var(--fog); font-size: 14px; }
.beitrag-wann::before { content: "·"; margin-right: 10px; }
@media (max-width: 560px) { .beitrag-wann { flex-basis: 100%; } .beitrag-wann::before { content: none; } }   /* Handy: Datum in eigener Zeile */
.beitrag-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; box-shadow: 0 0 0 1px rgba(216, 180, 106, .55); }
.beitrag-bild { max-width: 1100px; margin: 0 auto clamp(32px, 5vw, 56px); aspect-ratio: 16 / 7; }
.beitrag-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 64px); align-items: start; max-width: 1100px; margin: 0 auto; }
.beitrag-text { grid-column: 1; grid-row: 1; min-width: 0; }
.beitrag-blick { grid-column: 2; grid-row: 1; position: sticky; top: 104px; padding: 24px; border-radius: var(--r-block); background: var(--midnight); box-shadow: var(--rim), var(--edge); }
.beitrag-blick h2 { margin: 0 0 18px; font-size: 1.125rem; }
.beitrag-blick dl { display: grid; gap: 14px; margin: 0; }
.beitrag-blick dt { display: flex; align-items: center; gap: 8px; color: var(--lilac); font-size: 14px; font-weight: 500; }
.beitrag-blick dt .ico { flex: none; width: 16px; height: 16px; color: var(--gold); }
.beitrag-blick dd { margin: 3px 0 0 24px; color: var(--ash); font-size: 14px; line-height: 1.5; }
.beitrag-blick .quelle { margin: 20px 0 0; color: var(--fog); font-size: 12px; line-height: 1.5; }
.beitrag-text h2 { margin: 48px 0 14px; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; scroll-margin-top: 104px; }
.beitrag-text h2:first-child { margin-top: 0; }
.beitrag-text p, .beitrag-text li { color: var(--ash); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.beitrag-text > p, .beitrag-text > ul { margin: 0 0 16px; }
.beitrag-text ul { padding-left: 1.2em; }
.beitrag-text li { margin-bottom: 8px; }
.beitrag-text li::marker { color: var(--gold); }
.beitrag-text strong { color: var(--lilac); font-weight: 500; }
.beitrag-text .faq-list { max-width: none; }
.beitrag-foto { margin: 28px 0 32px; }
.beitrag-foto figcaption { margin-top: 10px; color: var(--fog); font-size: 14px; line-height: 1.5; }
.beitrag-schluss { padding-bottom: 0; }
.beitrag-autor {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: center; max-width: 780px; margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 24px; border-radius: var(--r-block); background: var(--midnight); box-shadow: var(--edge);
}
.beitrag-autor img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; box-shadow: 0 0 0 2px rgba(216, 180, 106, .6); }
.beitrag-autor p { margin: 0 0 10px; color: var(--ash); line-height: 1.6; }
.beitrag-autor .beitrag-autor-name { margin-bottom: 6px; color: var(--lilac); font-family: var(--font-head); font-size: 1.25rem; }
.beitrag-zurueck { margin: 32px 0 var(--sec); text-align: center; }
@media (max-width: 980px) {
  .beitrag-raster { grid-template-columns: minmax(0, 1fr); }
  .beitrag-blick { grid-column: 1; grid-row: auto; position: static; }
  .beitrag-text { grid-row: auto; }
}
@media (max-width: 560px) {
  .beitrag-bild { aspect-ratio: 4 / 3; }
  .beitrag-autor { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
/* Entwurf, bis Pepe ergänzt (Fragen an ihn, fehlende Fotos): gestrichelter Goldrahmen – darf nicht online gehen (Audit-Test) */
p.entwurf { margin: 0 0 20px; padding: 14px 16px; border: 1px dashed rgba(216, 180, 106, .75); border-radius: var(--r-card); background: rgba(216, 180, 106, .06); }
.beitrag-text p.entwurf { color: var(--gold-hi); font-size: 15px; line-height: 1.5; }
.entwurf--foto { display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px dashed rgba(216, 180, 106, .75); color: var(--gold); font-size: 14px; }
.entwurf--foto .ico { width: 30px; height: 30px; }