/* ═══════════════════════════════════════════════════════════════
   zquady.com v104 (16.10.2026) – „mit WOW“
   Aus dem Mockup https://claude.ai/artifact/E3B5iq4fc5jLMiiuaC68y8, gewaehlt:
   1 Vorhang auf · 2 Wort-Walze · 4 Leiste wird Insel · 5 Ueberschriften
   steigen auf · 6 Bilder oeffnen sich · 8 Blaetter statt Abschnitte ·
   10 Zahlen rollen · 12 Nadeln regnen · 14 Magnetische Knoepfe ·
   15 Hoehenlinien atmen · 16 QR baut sich auf. Nicht gewaehlt (nicht wieder
   einbauen ohne den User): 7 Hell wird Nacht, 9 Riesenwoerter, 13 Woerter
   zum Werfen. v106 wieder raus: 3 Ins Telefon eintauchen, 11 Aus Fremden
   wird ein Zquad (User 16.10.2026).
   Logik: assets/wow.js (+ wow-vorab.js im <head>). Bewegung nur mit
   html.wow-bewegt (wow-vorab.js setzt es nicht bei „Bewegung reduzieren“).
   Ausnahme von der Edel-Regel „nie als Schleife“: 15 laeuft, solange es zu
   sehen ist (User-Wahl 16.10.2026).
   Farben nur aus den Token (basis.css) und den Toenen der App.
   v105: leichter am PC (Vorhang transform, keine filter-Animationen im Kopf,
   .wow-weicht/.wow-maske-aus, html.wow-spar ohne Grafikkarte).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1 · Vorhang auf ═════════════════════════════════════════════ */
/* Bis wow.js da ist, deckt ein Vorhang aus CSS (kein Aufblitzen). */
html.wow-vorhang-zu body::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #0D0E0C; }
html.wow-vorhang-zu .held-v .inhalt > *, html.wow-vorhang-zu .held-v .bild, html.wow-vorhang-zu .kopf { opacity: 0; }
.wow-vorhang {
  /* v105: der Vorhang faehrt als Ganzes hoch (transform) statt per clip-path -
     das rechnet der Compositor, ohne die ganze Flaeche je Bild neu zu malen.
     48 px laenger als das Fenster, damit die runden Ecken anfangs unter der Kante liegen. */
  position: fixed; inset: 0 0 -48px 0; z-index: 9999; display: grid; place-items: center; padding-bottom: 48px; background: #0D0E0C;
  border-radius: 0 0 48px 48px; pointer-events: none; will-change: transform;
}
.wow-vorhang.hoch { transform: translateY(-100%); transition: transform .95s cubic-bezier(.76,0,.24,1); }
.wow-vorhang svg { width: 92px; height: 92px; overflow: visible; transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .5s; }
.wow-vorhang.hoch svg { transform: translateY(-12vh) scale(.7); opacity: 0; }
.wow-vorhang .vh-1, .wow-vorhang .vh-2 { fill: rgba(0,0,0,0); stroke-width: 22; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wow-vorhang .vh-1 { stroke: #FBFBF9; }
.wow-vorhang .vh-2 { stroke: #A7B77A; }
.wow-vorhang .vh-3 { fill: #FBFBF9; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.wow-vorhang.zeichnet .vh-1 { animation: wow-vh-strich .8s cubic-bezier(.65,0,.35,1) forwards, wow-vh-fuell-1 .35s .72s forwards; }
.wow-vorhang.zeichnet .vh-2 { animation: wow-vh-strich .7s .18s cubic-bezier(.65,0,.35,1) forwards, wow-vh-fuell-2 .35s .78s forwards; }
.wow-vorhang.zeichnet .vh-3 { animation: wow-vh-punkt .5s .62s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes wow-vh-strich { to { stroke-dashoffset: 0; } }
@keyframes wow-vh-fuell-1 { to { fill: #FBFBF9; stroke-width: 0; } }
@keyframes wow-vh-fuell-2 { to { fill: #A7B77A; stroke-width: 0; } }
@keyframes wow-vh-punkt { to { transform: scale(1); } }

/* Der Auftritt des Kopfs, sobald der Vorhang hochgeht */
.wow-auftritt .kopf { animation: wow-von-oben .9s .35s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v h1 .zeile { animation: wow-zeile 1.05s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v h1 .zeile:nth-child(1) { animation-delay: .12s; }
.wow-auftritt .held-v h1 .zeile:nth-child(2) { animation-delay: .22s; }
.wow-auftritt .held-v h1 .zeile:nth-child(3) { animation-delay: .32s; }
.wow-auftritt .held-v .start-pille { animation: wow-hoch .9s .02s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .unter { animation: wow-hoch .9s .48s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .aktionen { animation: wow-hoch .9s .58s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .held-sozial { animation: wow-hoch .9s .68s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .kleingedrucktes { animation: wow-hoch .9s .76s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .bild { animation: wow-foto 1.9s cubic-bezier(.16,1,.3,1) both; }
.wow-auftritt .held-v .zq-schirm { animation: wow-schirm-an 1s .75s ease-out both; }
/* v105: ohne filter: blur - auf grossen Zeilen kostet das am PC jedes Bild */
@keyframes wow-zeile { from { opacity: 0; transform: translateY(.55em) rotate(2deg); transform-origin: 0 100%; } }
@keyframes wow-hoch { from { opacity: 0; transform: translateY(26px); } }
@keyframes wow-von-oben { from { opacity: 0; transform: translateY(-26px); } }
@keyframes wow-foto { from { opacity: 0; transform: scale(1.14); } 30% { opacity: 1; } }
/* v105: der Bildschirm geht per Deckkraft an (das Foto zeigt darunter ein schwarzes Display) */
@keyframes wow-schirm-an { from { opacity: 0; } }
@media (max-width: 860px) {
  @keyframes wow-foto { from { opacity: 0; transform: translateY(70px) scale(.92); } }
}
/* v105: ohne Grafikkarte (html.wow-spar, wow.js 15) steht das Foto einfach da,
   der Vorhang deckt es auf - Vergroessern oder Einblenden einer fensterbreiten
   Ebene kostet dort jedes Bild. */
.wow-spar.wow-auftritt .held-v .bild { animation: none; }

/* ═══ 2 · Wort-Walze ══════════════════════════════════════════════ */
.wow-bewegt .rotw, .wow-bewegt .rotw.war { transform: none; transition: opacity .01s; }
.wow-bewegt .rotw.war { opacity: 1; }
.wow-wort { position: relative; display: inline-block; }
.wow-wd { display: inline-block; white-space: nowrap; perspective: 420px; }
.wow-bs { display: inline-block; transform-origin: 50% 70%; }
.rotw.an.wow-los .wow-bs { animation: wow-bs-rein .7s cubic-bezier(.2,.9,.25,1.12) both; animation-delay: calc(var(--i) * 34ms + .16s); }
.rotw.war .wow-bs { animation: wow-bs-raus .3s cubic-bezier(.55,0,.75,.2) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes wow-bs-rein { from { opacity: 0; transform: translateY(.75em) rotateX(-85deg); } }
@keyframes wow-bs-raus { 60% { opacity: 0; } to { opacity: 0; transform: translateY(-.55em) rotateX(75deg); } }
.wow-strich { position: absolute; left: -.02em; right: -.02em; bottom: -.1em; width: calc(100% + .04em); height: .2em; overflow: visible; pointer-events: none; }
.wow-strich path { fill: none; stroke: var(--oliv); stroke-width: .075em; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1; opacity: 0; }
.rotw.an .wow-strich path { transition: stroke-dashoffset .75s cubic-bezier(.65,0,.35,1) var(--strich-ab, .45s), opacity .01s var(--strich-ab, .45s); stroke-dashoffset: 0; opacity: .85; }
.rotw.war .wow-strich { opacity: 0; transition: opacity .2s; }

/* ═══ 4 · Leiste wird Insel ═══════════════════════════════════════ */
.wow-insel-an .kopf .leiste {
  position: relative;
  transition: max-width .75s cubic-bezier(.65,0,.25,1), height .6s cubic-bezier(.65,0,.25,1), padding .6s cubic-bezier(.65,0,.25,1),
    background-color .45s, border-color .45s, box-shadow .45s, color .45s, -webkit-backdrop-filter .35s, backdrop-filter .35s;
}
.wow-insel-an .kopf .links, .wow-insel-an .kopf .rechts .symbolknopf, .wow-insel-an .kopf .lang-wrap, .wow-insel-an .kopf .marke span { transition: opacity .35s .25s, max-width .6s cubic-bezier(.65,0,.25,1); }
.wow-insel-an .kopf .marke { position: relative; z-index: 1; }
.wow-insel-name { position: absolute; left: 66px; right: 126px; top: 0; bottom: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.wow-insel-name span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wow-insel-name span.rollt { animation: wow-name-rollt .5s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes wow-name-rollt { from { opacity: 0; transform: translateY(70%); filter: blur(4px); } }
@media (max-width: 560px) { .wow-insel-name span { font-size: 13.5px; } }
.marke .wow-ring { position: absolute; left: -6px; top: 50%; width: 38px; height: 38px; margin-top: -19px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.wow-ring circle { fill: none; stroke-width: 2.5; }
.wow-ring .bahn-k { stroke: currentColor; opacity: .16; }
.wow-ring .lauf-k { stroke: var(--oliv); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.kopf.wow-insel:not(.wow-auf) .leiste {
  max-width: 420px; height: 54px; padding: 0 7px 0 22px; overflow: hidden; background: var(--knopf); color: var(--knopf-text); border-color: rgba(0,0,0,0);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 44px rgba(13,14,12,.22), 0 2px 6px rgba(13,14,12,.12);
  /* v115: die Insel hat den Knopf-Ton (dunkel im Hellen, hell im Dunkeln) - der
     Fokusrahmen nimmt darum die Gegenfarbe (basis.css --fokus-invers). */
  --fokus: var(--fokus-invers);
}
.kopf.wow-insel:not(.wow-auf) .marke { color: var(--knopf-text); }
.kopf.wow-insel:not(.wow-auf) .marke span,
.kopf.wow-insel:not(.wow-auf) .links,
.kopf.wow-insel:not(.wow-auf) .rechts .symbolknopf,
.kopf.wow-insel:not(.wow-auf) .lang-wrap { opacity: 0; max-width: 0; overflow: hidden; transition-delay: 0s; pointer-events: none; }
.kopf.wow-insel:not(.wow-auf) .links a { white-space: nowrap; }
.kopf.wow-insel:not(.wow-auf) .wow-insel-name { opacity: 1; transition-delay: .3s; }
.kopf.wow-insel:not(.wow-auf) .wow-ring { opacity: 1; transition-delay: .3s; }
.kopf.wow-insel:not(.wow-auf) .rechts .knopf { background: var(--oliv); color: #0D0E0C; }
.kopf.wow-insel.wow-auf .leiste { box-shadow: 0 14px 44px rgba(13,14,12,.12); }
.wow-insel-an .kopf .rechts .knopf { transition: background-color .45s, color .45s; position: relative; z-index: 1; }
/* Bewegung reduzieren: die Insel gibt es trotzdem, sie wechselt nur ohne Gleiten. */
html.wow-insel-an:not(.wow-bewegt) .kopf .leiste, html.wow-insel-an:not(.wow-bewegt) .kopf .leiste * { transition: none !important; animation: none !important; }

/* ═══ 5 · Ueberschriften steigen auf ══════════════════════════════ */
.wow-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; color: inherit; }
.wow-wi { display: inline-block; color: inherit; transform: translateY(112%) rotate(7deg); transform-origin: 0 100%; opacity: 0;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), opacity .5s ease; transition-delay: calc(var(--i) * 52ms + .05s); }
h2.wow-da .wow-wi { transform: none; opacity: 1; }
/* home.css faerbt „.start-text h2 span“ oliv (nur der Punkt ist ein span) - die Wort-Huellen nicht */
.start-text h2 .wow-w, .start-text h2 .wow-wi { color: inherit; }
.abschnitt-name.wow-kn { clip-path: inset(-10% 100% -10% 0); transition: clip-path .9s cubic-bezier(.65,0,.35,1) .05s; }
.abschnitt-name.wow-kn.wow-da { clip-path: inset(-10% -10% -10% 0); }

/* ═══ 6 · Bilder oeffnen sich ═════════════════════════════════════ */
.wow-bewegt .karte-v .bild { will-change: clip-path, transform; }
.wow-kippt { transform-origin: 50% 100%; }

/* ═══ 8 · Blaetter statt Abschnitte ═══════════════════════════════
   Die Abschnitte schieben sich wie Blaetter der App ueber den vorigen; der
   Wechsel hell/dunkel ist jetzt die Kante des Blatts (die Wellen-Baender
   aus Edel Idee 5 treten dafuer zurueck). */
.wow-blatt { border-radius: 44px 44px 0 0; margin-top: -44px; overflow: clip; background: var(--grund);
  box-shadow: 0 -30px 70px -28px rgba(13,14,12,.22); transform-origin: 50% 100%; }
.wow-blatt.nacht { background: var(--nacht); border-top: 0; }
.wow-blaetter .ed-band { display: none; }
.wow-blatt-schatten { position: absolute; inset: 0; z-index: 40; display: none; background: #000; opacity: 0; pointer-events: none; }
.wow-weicht { will-change: transform; }
.wow-weicht > .wow-blatt-schatten { display: block; will-change: opacity; }
@media (max-width: 720px) { .wow-blatt { border-radius: 30px 30px 0 0; margin-top: -30px; } }
:root[data-theme="dark"] .wow-blatt { box-shadow: 0 -30px 70px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wow-blatt { box-shadow: 0 -30px 70px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07); } }

/* ═══ 10 · Zahlen rollen ══════════════════════════════════════════ */
.wow-ziffer { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.wow-rolle { display: block; transition: transform 1.9s cubic-bezier(.12,.86,.18,1); }
.wow-rolle > b { display: block; height: 1em; font-weight: inherit; }
.start-zahl.wow-rollt { line-height: 1 !important; }
.wow-sek { margin-top: 18px !important; font-size: 17px; color: var(--nacht-tinte-2); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wow-sek .wow-sek-zahl { font: 600 26px/1 'Inter', sans-serif; letter-spacing: -.03em; color: var(--nacht-tinte); font-variant-numeric: tabular-nums; display: inline-flex; }
.wow-sek .wow-rolle { transition-duration: .55s; }
.wow-sek .wow-punkt { display: inline-block; white-space: pre; }
html:not(.wow-bewegt) .wow-rolle { transition: none !important; }

/* ═══ 12 · Nadeln regnen ══════════════════════════════════════════ */
.wow-wartet .zq-tropfen, .wow-wartet .zq-du { opacity: 0; }
.wow-regen .zq-tropfen { animation: wow-fall .78s cubic-bezier(.3,1.5,.55,1) both; animation-delay: var(--wow-v, 0ms); }
.wow-regen .zq-tropfen::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 26px; height: 9px; margin-left: -13px; border-radius: 50%;
  border: 2px solid var(--oliv); opacity: 0; animation: wow-welle .7s ease-out both; animation-delay: calc(var(--wow-v, 0ms) + 420ms); pointer-events: none; }
.wow-regen .zq-du { animation: wow-du-da .9s cubic-bezier(.3,1.6,.5,1) both; }
.wow-regen .zq-vorschau { animation: wow-vorschau .8s 1.3s cubic-bezier(.16,1,.3,1) both; }
@keyframes wow-fall { 0% { opacity: 0; transform: translateY(-230px) scale(.75); } 55% { opacity: 1; } 75% { transform: translateY(4px) scale(1.06, .9); } 100% { transform: none; } }
@keyframes wow-welle { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes wow-du-da { from { opacity: 0; transform: scale(.2); } }
@keyframes wow-vorschau { from { opacity: 0; transform: translateY(40px); } }

/* ═══ 14 · Magnetische Knoepfe (nur mit Maus) ═════════════════════ */
.wow-mag { transition: transform .6s cubic-bezier(.2,.9,.3,1.35) !important; isolation: isolate; overflow: hidden; }
.wow-mag.zieht { transition: transform .12s ease-out !important; }
.wow-mag > .wow-mag-in { display: inline-flex; align-items: center; gap: inherit; transition: transform .6s cubic-bezier(.2,.9,.3,1.35); pointer-events: none; }
.wow-mag.zieht > .wow-mag-in { transition: transform .12s ease-out; }
.wow-fuell { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: var(--fd, 300px); height: var(--fd, 300px); margin: calc(var(--fd, 300px) / -2) 0 0 calc(var(--fd, 300px) / -2);
  border-radius: 50%; z-index: -1; transform: scale(0); transition: transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.wow-mag:hover > .wow-fuell { transform: scale(1); }
.wow-mag.knopf-voll:hover { opacity: 1 !important; }
.knopf-voll > .wow-fuell { background: var(--oliv); }
.knopf-voll.wow-mag:hover { color: #0D0E0C; }
.knopf-rand > .wow-fuell, .textlink > .wow-fuell { background: var(--tinte); }
.knopf-rand.wow-mag:hover, .textlink.wow-mag:hover { color: var(--grund); }
.store-knopf > .wow-fuell { background: var(--oliv); }
.store-knopf.wow-mag:hover { color: #0D0E0C; }
.video-knopf > .wow-fuell, .pk-knopf > .wow-fuell, .ed-wuerfel > .wow-fuell, .sozial a > .wow-fuell { background: var(--oliv-glanz); }

/* ═══ 15 · Hoehenlinien atmen ═════════════════════════════════════ */
.wow-fluss { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .9s; }
.wow-fluss.an { opacity: 1; }
.wow-maske-aus { -webkit-mask-image: none !important; mask-image: none !important; }

/* ═══ 16 · QR baut sich auf ═══════════════════════════════════════ */
.wow-qr-mod { transform-box: fill-box; transform-origin: center; animation: wow-qr-mod .42s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d); }
@keyframes wow-qr-mod { from { transform: scale(0); opacity: 0; } }
.wow-qr-scan { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.wow-qr-scan::before { content: ""; position: absolute; left: -10%; right: -10%; height: 34%; top: -40%;
  background: linear-gradient(to bottom, rgba(167,183,122,0), rgba(167,183,122,.55) 70%, rgba(167,183,122,0)); }
.wow-qr-scan.laeuft::before { animation: wow-scan 1.1s cubic-bezier(.45,0,.55,1) both; }
@keyframes wow-scan { to { top: 110%; } }
.wow-qr-logo-pop { animation: wow-pop .7s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes wow-pop { from { transform: translate(-50%, -50%) scale(0) rotate(-30deg); } to { transform: translate(-50%, -50%); } }
.wow-du-hops { display: inline-block; animation: wow-du-hops 1.1s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes wow-du-hops { 0% { transform: none; } 25% { transform: translateY(-.22em) rotate(-8deg) scale(1.08); } 50% { transform: translateY(.02em) rotate(5deg); } 75% { transform: translateY(-.05em) rotate(-2deg); } 100% { transform: none; } }

/* ═══════════════════════════════════════════════════════════════
   v129 (28.10.2026) – Runde 2, aus dem Mockup
   https://claude.ai/artifact/Ki7XziD36qMJVntZHRWUZ3 (Logik: wow.js 17–21).
   Alles baut auf den Hoehenlinien auf, nicht auf Lichtkegeln (Recherche
   „nicht nach KI aussehen“: Spotlight, Kippkarten, Scramble gelten als
   Klischee - nicht nachruesten).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 17 · Lampe ueber der Wanderkarte ═══════════════════════════
   Die Schicht liegt unter dem Inhalt (z-index -1 in isolierter Karte); eine
   runde Maske um den Zeiger laesst die Linien nur dort sehen. */
.wow-lampen-karte { isolation: isolate; --wow-lampe: rgba(85,103,44,.6); }
.wow-lampen-karte.wow-dunkel { --wow-lampe: rgba(188,200,150,.85); }
:root[data-theme="dark"] .wow-lampen-karte { --wow-lampe: rgba(188,200,150,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wow-lampen-karte { --wow-lampe: rgba(188,200,150,.7); } }
.wow-lampe { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s ease; color: var(--wow-lampe); will-change: transform;
  -webkit-mask-image: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), #000 0, rgba(0,0,0,.65) 36%, transparent 100%);
  mask-image: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), #000 0, rgba(0,0,0,.65) 36%, transparent 100%); }
.wow-lampe svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.wow-lampe path { fill: none !important; stroke: currentColor !important; stroke-width: 1.5px !important; vector-effect: non-scaling-stroke; opacity: 1 !important; }
.wow-lampe-an > .wow-lampe { opacity: 1; transition-duration: .25s; }

/* ═══ 18 · Kategorien zum Wischen ════════════════════════════════
   Natives Scrollen mit Einrasten; die Reihe beginnt buendig mit der Bahn.
   Radius 16 nach den Huly-Massen (Karten 16, Flaechen 30, Pillen rund). */
.wow-kat-buehne { display: flex; flex-direction: column; gap: 44px; }
.wow-kat-kopf h2 { margin: 0; }
.wow-kat-kopf .unter { margin-top: 14px; }
.wow-kat-reihe { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - 1200px) / 2 + 24px));
  scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 8px 28px; margin-block: -8px -28px; cursor: grab; }
.wow-kat-reihe::-webkit-scrollbar { display: none; }
.wow-kat-reihe.wow-zieht { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wow-kat-reihe:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.wow-kat-band { display: flex; gap: 20px; width: max-content; padding-inline: max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.wow-kat-karte { position: relative; flex: 0 0 auto; box-sizing: border-box; width: clamp(280px, 29vw, 392px); height: 440px; padding: 24px 26px 26px; scroll-snap-align: start;
  border-radius: 16px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie), 0 1px 2px rgba(13,14,12,.04), 0 24px 60px rgba(13,14,12,.07);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; }
.wow-kat-muster { position: absolute; inset: 0 0 30% 0; z-index: -2; color: var(--oliv); opacity: .7; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.wow-kat-muster svg { width: 100%; height: 100%; display: block; }
.wow-kat-muster path { fill: none; stroke: currentColor; }
.wow-kat-zeichen { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); box-shadow: 0 0 0 1px var(--linie); }
.wow-kat-zeichen svg { width: 26px; height: 26px; fill: none; stroke: var(--tinte); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wow-kat-unten h3 { margin: 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.wow-kat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.wow-kat-tags span { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 14px; font-weight: 600; color: var(--tinte-2); }
.wow-kat-satz { margin: 14px 0 0; font-size: 16.5px; line-height: 1.5; max-width: 26ch; }
.wow-kat-ende { background: var(--knopf); color: var(--knopf-text); box-shadow: none; }
.wow-kat-ende .wow-kat-zeichen { background: var(--oliv); box-shadow: none; }
.wow-kat-ende .wow-kat-zeichen svg { stroke: #0D0E0C; }
.wow-kat-ende .wow-kat-satz { color: inherit; opacity: .72; }
.wow-kat-fuss { display: flex; align-items: center; gap: 18px; }
.wow-kat-leiste { flex: 1; height: 2px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.wow-kat-leiste i { display: block; height: 100%; background: var(--oliv-tief); transform-origin: 0 50%; transform: scaleX(.14); }
.wow-kat-zahl { font: 700 14px/1 'Sora', 'Inter', sans-serif; color: var(--tinte-2); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.wow-kat-pfeil { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--karte); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: opacity .2s, box-shadow .2s; }
.wow-kat-pfeil:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--tinte-3); }
.wow-kat-pfeil:disabled { opacity: .35; cursor: default; }
.wow-kat-pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wow-kat-pfeil.zurueck svg { transform: scaleX(-1); }
.wow-kat-pfeil.zurueck { margin-left: 4px; }
@media (max-width: 720px) {
  .wow-kat-buehne { gap: 32px; }
  .wow-kat-band { gap: 14px; padding-inline: 20px; }
  .wow-kat-reihe { scroll-padding-inline: 20px; }
  .wow-kat-karte { width: 78vw; height: 400px; padding: 20px 20px 22px; }
  .wow-kat-pfeil { display: none; }
}

/* ═══ 20 · Sonnenaufgang ueber den Linien ════════════════════════
   Ein 300 % hohes Maskenbild mit einem Lichtband in der Mitte wandert von
   unten nach oben durch; der Schein bleibt danach leise am unteren Rand. */
.wow-sonne-karte { isolation: isolate; }
.wow-sonne { position: absolute; z-index: -1; pointer-events: none; color: rgba(222,230,186,.95);
  -webkit-mask-image: linear-gradient(to top, transparent 38%, #000 46%, rgba(0,0,0,.85) 50%, transparent 60%); mask-image: linear-gradient(to top, transparent 38%, #000 46%, rgba(0,0,0,.85) 50%, transparent 60%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0%; mask-position: 0 0%; transition: -webkit-mask-position 3.8s cubic-bezier(.42,0,.3,1), mask-position 3.8s cubic-bezier(.42,0,.3,1), opacity .8s ease; }
.wow-sonne svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.wow-sonne path { fill: none !important; stroke: currentColor !important; stroke-width: 1.6px !important; vector-effect: non-scaling-stroke; opacity: 1 !important; }
.wow-sonne-lauf .wow-sonne { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.wow-sonne-ruhe .wow-sonne { opacity: 0; }
.wow-sonne-schein { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(70% 60% at 50% 105%, rgba(167,183,122,.30), rgba(167,183,122,0) 70%); }
.wow-sonne-lauf .wow-sonne-schein { opacity: 1; }
.wow-sonne-ruhe .wow-sonne-schein { opacity: .55; transition-duration: 2.4s; }

/* ═══ 22 · Berg aus Hoehenlinien in 3D (v130) ════════════════════
   Mockup https://claude.ai/artifact/9uLLm2T8ddT8oHsiMsrtsY, Idee 1. Jede
   Stufe eine Scheibe im Raum, nach oben etwas heller gefuellt, der Rand
   oliv. Der Berg liegt UNTER dem Text (z-index -1 in isolierter Karte),
   die flachen Linien der Karte treten zurueck. */
.wow-berg-karte { isolation: isolate; }
.wow-berg-karte .ed-start-muster { display: none !important; }
.wow-berg { position: absolute; inset: 0; z-index: -1; perspective: 1300px; perspective-origin: 50% 25%; pointer-events: none; overflow: hidden; border-radius: inherit; }
.wow-berg-modell { --s: .92; position: absolute; left: 40%; top: 82%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; transform-style: preserve-3d;
  transform: scale(var(--s)) rotateX(var(--rx, 66deg)) rotateZ(var(--rz, 0deg)); }
.wow-ebene { position: absolute; inset: 0; transform: translateZ(calc(var(--i) * var(--dz, 0px))); color: rgba(196, 208, 152, var(--a, .4)); }
.wow-ebene svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wow-ebene path { fill: rgb(calc(var(--h) * 1), calc(var(--h) * 1.04), calc(var(--h) * .9)); fill-opacity: .94; stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
/* Sparweg (ohne Grafikkarte): derselbe Berg flach gezeichnet, eine Ebene */
.wow-berg-flach { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .wow-berg-modell { --s: .72; top: 80%; } }
@media (max-width: 560px) { .wow-berg-modell { --s: .5; top: 84%; } }

/* ═══ 21 · Dunkle Blaetter ziehen sich auf ═══════════════════════ */
.wow-zieht-auf { transform-origin: 50% 0; will-change: scale; }

@media (prefers-reduced-motion: reduce) {
  .wow-lampe, .wow-kat-pfeil { transition: none; }
}