/* Neuer Hintergrund der Landingpage (AUFTRAG-HINTERGRUND-VORSCHAU.md, 11.11.2026).
   Nur aktiv mit Klasse .hg-neu an .n-seite (Schalter config/produkt.json → "hintergrund": "neu", Vorschau ?hg=neu).
   Kopf (Kopfleiste, Hero, Handy-Story) und Vorher/Nachher bleiben unverändert auf dem Grundgrau.
   Farbfolge ab „Schmerz“: Rosa/Lavendel → Weiß → Creme → TIEF (Vorlagen) → Lavendel → Weiß (Website + 360°) → Creme (Preise)
   → Rosa (Fragen) → TIEF (Schluss + Fuß). Jede Fläche beginnt mit einer geschwungenen Kante (SVG-Welle als Maske, drei
   Formen im Wechsel wie eine sich windende Straße) und reicht unten um die Wellenhöhe unter den nächsten Abschnitt.
   Feine Körnung (kleine PNG-Kachel hg-korn.png, etwa 4 bis 5 %) liegt als Hintergrundschicht auf allen Flächen, nie über Text oder Bildern.
   Tiefe Flächen: weiche Farbnebel + lange Lichtstreifen (.hg-deko), hg.js verschiebt sie beim Scrollen (nur transform).
   Bei prefers-reduced-motion bleibt alles statisch. */

.hg-neu {
  --hg-w: 96px;
  /* Körnung: 128er-Kachel (9 KB), helle und dunkle Pünktchen mit 0 bis 10 % Deckkraft, im Mittel ~3 %; wirkt auf hell und tief */
  --hg-korn: url("hg-korn.png");
  --hg-korn-hell: url("hg-korn.png");
  --hg-welle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 64C180 24 380 8 620 34s440 58 640 36c90-10 140-24 180-30v60H0Z'/%3E%3C/svg%3E");
  --hg-welle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30c220 40 460 66 720 42s460-62 720-24v52H0Z'/%3E%3C/svg%3E");
  --hg-welle-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 78c260 14 420-48 700-52s460 58 740 32v42H0Z'/%3E%3C/svg%3E");
  --hg-rosa: linear-gradient(175deg, #fdedf3 0%, #f8eef8 55%, #f3eefc 100%);
  --hg-weiss: #fff;
  --hg-creme: linear-gradient(175deg, #fcf5ea 0%, #fbf1e6 100%);
  --hg-lavendel: linear-gradient(175deg, #f1edfd 0%, #ede9fb 100%);
  --hg-tief: linear-gradient(180deg, #1d1128 0%, #170f20 50%, #1b1024 100%);
  background: var(--hg-korn), var(--grund);
}

/* ---------- Flächen ---------- */
.hg-neu #n-main > .n-schmerz, .hg-neu #einfach, .hg-neu #ergebnisse, .hg-neu .n-vorlagen, .hg-neu .n-abteilung,
.hg-neu .n-hell, .hg-neu .n-preise, .hg-neu .n-band-fragen, .hg-neu .n-schluss { position: relative; isolation: isolate; }
.hg-neu #n-main > .n-schmerz::before, .hg-neu #einfach::before, .hg-neu #ergebnisse::before, .hg-neu .n-vorlagen::before, .hg-neu .n-abteilung::before,
.hg-neu .n-hell::before, .hg-neu .n-preise::before, .hg-neu .n-band-fragen::before, .hg-neu .n-schluss::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: calc(-1 * var(--hg-w)); left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: var(--hg-korn), var(--hg-farbe, transparent);
  -webkit-mask: var(--hg-welle, var(--hg-welle-a)) top / 100% var(--hg-w) no-repeat, linear-gradient(#000, #000) 0 calc(var(--hg-w) - 1px) / 100% calc(100% - var(--hg-w) + 1px) no-repeat;
  mask: var(--hg-welle, var(--hg-welle-a)) top / 100% var(--hg-w) no-repeat, linear-gradient(#000, #000) 0 calc(var(--hg-w) - 1px) / 100% calc(100% - var(--hg-w) + 1px) no-repeat;
}
.hg-neu #n-main > .n-schmerz { --hg-farbe: var(--hg-rosa); --hg-welle: var(--hg-welle-a); }
.hg-neu #einfach { --hg-farbe: var(--hg-weiss); --hg-welle: var(--hg-welle-b); }
.hg-neu #ergebnisse { --hg-farbe: var(--hg-creme); --hg-welle: var(--hg-welle-c); }
.hg-neu .n-vorlagen { --hg-farbe: var(--hg-tief); --hg-welle: var(--hg-welle-a); }
.hg-neu .n-abteilung { --hg-farbe: var(--hg-lavendel); --hg-welle: var(--hg-welle-b); }
.hg-neu .n-hell { --hg-farbe: var(--hg-weiss); --hg-welle: var(--hg-welle-c); }
.hg-neu .n-preise { --hg-farbe: var(--hg-creme); --hg-welle: var(--hg-welle-a); }
.hg-neu .n-band-fragen { --hg-farbe: var(--hg-rosa); --hg-welle: var(--hg-welle-b); }
.hg-neu .n-schluss { --hg-farbe: var(--hg-tief); --hg-welle: var(--hg-welle-c); }
.hg-neu .n-vorlagen::before, .hg-neu .n-schluss::before { background: var(--hg-korn-hell), var(--hg-farbe); }

/* Außenabstände werden Innenabstände, damit die Fläche den ganzen Zwischenraum füllt (keine Lücke, kein Layout-Sprung) */
.hg-neu .n-vorlagen { margin-top: 0; padding-top: 120px; }
.hg-neu .n-hell { margin-top: 0; padding-top: 120px; }

/* ---------- Tiefe Flächen: Karte löst sich in die randlose Fläche auf ---------- */
.hg-neu .n-tief, .hg-neu .n-schluss-karte.n-tief-karte { background: none; box-shadow: none; border-radius: 0; }
.hg-neu .n-tief { padding-top: 16px; overflow: visible; }
.hg-neu .n-tief > .n-licht, .hg-neu .n-schluss-karte > .n-licht { display: none; }
.hg-neu .n-schluss-karte { overflow: visible; }
.hg-neu .n-beispiel-tief { background: rgba(22, 15, 31, .55); }

/* Fuß auf der tiefen Fläche (Schluss läuft bis zum Seitenende weiter) */
.hg-neu .n-fuss { position: relative; isolation: isolate; margin-top: 0; padding-top: 136px; border-top: 0; color: rgba(255, 255, 255, .8); }
.hg-neu .n-fuss::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--hg-korn-hell), #1b1024; pointer-events: none; }
.hg-neu .n-fuss::after { content: ""; position: absolute; top: 72px; left: var(--rand); right: var(--rand); height: 1px; background: rgba(255, 255, 255, .14); }
.hg-neu .n-fuss .n-wortmarke, .hg-neu .n-fuss nav a:hover { color: #fff; }
.hg-neu .n-fuss :focus-visible { outline-color: #fff; }

/* ---------- Farbnebel + Lichtstreifen ---------- */
.hg-deko { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; contain: strict;
  -webkit-mask: var(--hg-welle) top / 100% var(--hg-w) no-repeat, linear-gradient(#000 calc(100% - 140px), transparent) 0 calc(var(--hg-w) - 1px) / 100% calc(100% - var(--hg-w) + 1px) no-repeat;
  mask: var(--hg-welle) top / 100% var(--hg-w) no-repeat, linear-gradient(#000 calc(100% - 140px), transparent) 0 calc(var(--hg-w) - 1px) / 100% calc(100% - var(--hg-w) + 1px) no-repeat; }
.hg-deko i { position: absolute; display: block; will-change: transform; backface-visibility: hidden; }
/* Nebel: weiche Radialverläufe statt filter: blur (am Handy viel billiger) */
.hg-nebel { border-radius: 50%; }
.hg-nebel.n1 { width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; left: -18vw; top: -8%;
  background: radial-gradient(closest-side, rgba(214, 41, 118, .46), rgba(214, 41, 118, .16) 55%, transparent);
  transform: translate3d(calc(var(--hg-p, 0) * -14vw), calc(var(--hg-p, 0) * 160px), 0); }
.hg-nebel.n2 { width: 60vw; height: 60vw; max-width: 860px; max-height: 860px; right: -16vw; top: 22%;
  background: radial-gradient(closest-side, rgba(250, 126, 30, .34), rgba(250, 126, 30, .1) 55%, transparent);
  transform: translate3d(calc(var(--hg-p, 0) * 16vw), calc(var(--hg-p, 0) * -120px), 0); }
.hg-nebel.n3 { width: 80vw; height: 50vw; max-width: 1200px; max-height: 760px; left: 18%; bottom: -12%;
  background: radial-gradient(closest-side, rgba(150, 47, 191, .5), rgba(150, 47, 191, .14) 55%, transparent);
  transform: translate3d(calc(var(--hg-p, 0) * 10vw), calc(var(--hg-p, 0) * -90px), 0); }
/* Lichtstreifen wie vorbeifahrende Scheinwerfer: sehr flache, lange Ellipse + dünner heller Kern */
.hg-streif { left: -40vw; width: 180vw; height: 90px; border-radius: 50%; opacity: var(--hg-o, .8);
  background: linear-gradient(90deg, transparent 18%, rgba(255, 236, 214, .5) 50%, transparent 82%) center / 100% 1.5px no-repeat,
              radial-gradient(50% 50% at 50% 50%, rgba(255, 196, 140, .32), rgba(255, 150, 120, .1) 45%, transparent 72%);
  transform: translate3d(calc(var(--hg-p, 0) * var(--hg-v, -60vw)), 0, 0) rotate(var(--hg-r, -7deg)); }
.hg-streif.s1 { top: calc(var(--hg-w) - 10px); --hg-r: -2deg; --hg-v: -70vw; }
.hg-streif.s2 { top: 46%; --hg-r: -9deg; --hg-v: 55vw; --hg-o: .55;
  background: linear-gradient(90deg, transparent 18%, rgba(255, 214, 236, .45) 50%, transparent 82%) center / 100% 1.5px no-repeat,
              radial-gradient(50% 50% at 50% 50%, rgba(240, 107, 176, .3), rgba(214, 41, 118, .08) 45%, transparent 72%); }
.hg-streif.s3 { top: auto; bottom: 0; --hg-r: -1.5deg; --hg-v: -45vw; --hg-o: .7; }
/* Schluss: Text steht links → Licht vor allem rechts und am Rand */
.n-schluss .hg-nebel.n1 { left: auto; right: -22vw; top: -4%; }
.n-schluss .hg-nebel.n2 { right: auto; left: -20vw; top: 40%; }
.n-schluss .hg-streif.s2 { top: 62%; }

@media (max-width: 759px) {
  .hg-neu { --hg-w: 48px; }
  .hg-neu .n-vorlagen { padding-top: 88px; }
  .hg-neu .n-hell { padding-top: 72px; }
  .hg-streif.s1 { top: 22px; }
  .hg-neu .n-tief { padding-top: 8px; }
  .hg-neu .n-fuss { padding-top: 64px; }
  .hg-neu .n-fuss::after { top: 36px; }
  .hg-nebel.n1 { width: 120vw; height: 120vw; left: -50vw; }
  .hg-nebel.n2 { width: 110vw; height: 110vw; right: -55vw; }
  .hg-nebel.n3 { width: 130vw; height: 90vw; left: -10vw; }
  .hg-streif { height: 60px; width: 260vw; left: -80vw; }
  /* Handy: Nebel und Streifen ruhiger, damit Text nie auf unruhigem Grund steht */
  .hg-streif.s2 { --hg-o: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-deko i { transform: none !important; will-change: auto; }
  .hg-streif { transform: rotate(var(--hg-r, -7deg)) !important; }
}
/* Schluss: kein Streifen quer durch die Textspalte, nur oben an der Welle und ganz unten */
.n-schluss .hg-streif.s2 { display: none; }
.n-schluss .hg-streif.s3 { bottom: 20px; }