/* RTSB · Grundsystem: neutral schwarz/weiss, ein Markenakzent (Rot). Farbe kommt aus den Bildern. */
:root {
  --bg: #08080a;
  --bg-2: #0d0d10;
  --panel: #121215;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --fg: #f3f1ec;
  --fg-2: #c9c6bf;
  --mute: #8a877f;
  --red: 219, 55, 49;   /* 3 Stufen dunkler als zuvor (222, 58, 52): weisse Schrift darauf 4,56:1 statt 4,41:1 (WCAG AA 4,5) */
  --acc: 243, 241, 236;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --disp: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Montserrat', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --head-h: 76px;
  --gut: clamp(16px, 4vw, 56px);
  --max: 1400px;
  color-scheme: dark;
}
/* ---------- Seitenuebergaenge (Art in html[data-vt], gesetzt von vt-head.js) ----------
   Nur Deckkraft und transform: beides laeuft auf dem Compositor. Keine Unschaerfe/Abdunklung per filter und keine clip-path-Kreise
   ueber ganze Bildschirmbilder (das ruckelte). Abgedunkelt wird ueber den dunklen Grund hinter den ueberblendeten Seiten. */
@view-transition { navigation: auto; }
::view-transition { background: #050506; }
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.22, 0.9, 0.24, 1); }
::view-transition-old(root) { animation: vt-out 0.4s cubic-bezier(0.4, 0, 0.6, 1) both; }
::view-transition-new(root) { animation: vt-in 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.05s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* zwischen den Hauptseiten: die alte gleitet in Richtung des Menues weg, die neue kommt von der anderen Seite */
html[data-vt="fwd"]::view-transition-old(root) { animation: vt-out-l 0.45s cubic-bezier(0.55, 0, 0.35, 1) both; }
html[data-vt="fwd"]::view-transition-new(root) { animation: vt-in-r 0.65s cubic-bezier(0.2, 0.85, 0.25, 1) 0.06s both; }
html[data-vt="back"]::view-transition-old(root) { animation: vt-out-r 0.45s cubic-bezier(0.55, 0, 0.35, 1) both; }
html[data-vt="back"]::view-transition-new(root) { animation: vt-in-l 0.65s cubic-bezier(0.2, 0.85, 0.25, 1) 0.06s both; }
@keyframes vt-out-l { to { opacity: 0; transform: translate3d(-6%, 0, 0) scale(0.97); } }
@keyframes vt-out-r { to { opacity: 0; transform: translate3d(6%, 0, 0) scale(0.97); } }
@keyframes vt-in-r { from { opacity: 0; transform: translate3d(7%, 0, 0); } }
@keyframes vt-in-l { from { opacity: 0; transform: translate3d(-7%, 0, 0); } }
/* Karte -> Produkt: die alte Seite tritt zur Karte hin zurueck, die neue waechst aus der Karte; Flaeche und Box fliegen dazu als eigene Ebenen */
html[data-vt="to-product"]::view-transition-old(root) { transform-origin: var(--vtx, 50%) var(--vty, 40%); animation: vt-recede 0.5s cubic-bezier(0.4, 0, 0.6, 1) both; }
html[data-vt="to-product"]::view-transition-new(root) { transform-origin: var(--vtx, 50%) var(--vty, 40%); animation: vt-grow 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) 0.08s both; }
@keyframes vt-recede { to { opacity: 0; transform: scale(0.94); } }
@keyframes vt-grow { from { opacity: 0; transform: scale(0.88); } }
/* Produkt -> Karte: rueckwaerts; die Produktseite ist schnell weg (auch die Schrift), die Seite mit der Karte kommt ruhig dazu */
html[data-vt="from-product"]::view-transition-old(root) { transform-origin: var(--vtx, 50%) var(--vty, 40%); animation: vt-shrink 0.38s cubic-bezier(0.4, 0, 0.7, 1) both; }
html[data-vt="from-product"]::view-transition-new(root) { animation: vt-settle 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.04s both; }
@keyframes vt-shrink { to { opacity: 0; transform: scale(0.9); } }
@keyframes vt-settle { from { opacity: 0; transform: scale(1.03); } }
::view-transition-group(vt-bg) { animation-duration: 0.72s; animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
/* Karte klappt auf (mit Kartenflaeche): die alte Seite bleibt gedimmt stehen, nur die Flaeche waechst mit runden Ecken zum Hero;
   der Rest der neuen Seite kommt erst, wenn die Flaeche den Bildschirm fuellt – nicht sofort vollflaechig */
html.vt-card[data-vt="to-product"]::view-transition-old(root) { animation: vt-dim 0.82s cubic-bezier(0.4, 0, 0.6, 1) both; }
html.vt-card[data-vt="to-product"]::view-transition-new(root) { animation: vt-late 0.82s linear both; }
html.vt-card[data-vt="to-product"]::view-transition-group(vt-bg) { animation-duration: 0.82s; }
/* kein border-radius-Verlauf am Bildpaar: der liefe auf dem Hauptthread und stockte, waehrend die neue Seite laedt */
@keyframes vt-dim { to { opacity: 0.32; transform: scale(0.975); } }
@keyframes vt-late { 0%, 72% { opacity: 0; } 100% { opacity: 1; } }
/* zur Vault: die alte Seite zoomt in die geschlossenen Tresortueren der neuen Seite hinein (die oeffnen sich dann, the-vault.css) */
html[data-vt="to-vault"]::view-transition-old(root) { animation: vt-into 0.5s cubic-bezier(0.5, 0, 0.75, 0) both; }
html[data-vt="to-vault"]::view-transition-new(root) { animation: vt-in 0.28s ease 0.12s both; }
@keyframes vt-into { to { opacity: 0; transform: scale(1.1); } }
/* derselbe Eindruck ohne Seitenuebergang (Browser hat ihn verworfen): der Hero klappt aus dem Kartenrechteck auf (vt-head.js) */
/* Nur transform (laeuft auf der GPU weiter, auch wenn die neue Seite gerade rechnet): der Hero waechst aus der Karte, zwei Vorhaenge in
   Seitenfarbe halten seitlich das Kartenfenster und gleiten mit der Fensterkante hinaus (Keyframes rechnet vt-head.js). */
html.vt-unfold main > .ph { transform-origin: 0 0; will-change: transform; animation: vt-unfold 0.82s cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes vt-unfold { from { transform: translate3d(var(--u-tx), var(--u-ty), 0) scale(var(--u-s)); } to { transform: none; } }
html.vt-unfold::before, html.vt-unfold::after { content: ""; position: fixed; top: 0; left: 0; z-index: 55; width: 100vw; height: 100vh; background: var(--t-bg, var(--bg, #070708)); pointer-events: none; will-change: transform; }
html.vt-unfold::before { transform: translate3d(calc(var(--u-l) - 100vw), 0, 0); }
html.vt-unfold::after { transform: translate3d(var(--u-r), 0, 0); }
html.vt-unfold main > :not(.ph), html.vt-unfold .ft { animation: vt-late 1s linear both; }
::view-transition-old(vt-bg), ::view-transition-new(vt-bg) { height: 100%; object-fit: cover; }
/* Ankunft aus einer Karte: das Hero-Bild steht sofort (es ist Teil der wachsenden Flaeche), kein Nachblenden danach */
html.vt-morph main > .ph .ph-bg { transition: none !important; }
::view-transition-group(vt-box) { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.55, 0, 0.15, 1); }
::view-transition-image-pair(vt-box) { animation: vt-lift 0.8s cubic-bezier(0.3, 0, 0.2, 1) both; }
::view-transition-old(vt-box), ::view-transition-new(vt-box) { height: 100%; object-fit: contain; animation-duration: 0.4s; }
@keyframes vt-lift { 45% { transform: scale(1.1) rotate(-2.5deg) translateY(-3%); } }
/* der Anzeiger unter dem aktiven Hauptpunkt gleitet zum neuen Punkt */
::view-transition-group(hd-ind) { animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1.2); }

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; }   /* kein blauer Kasten beim Antippen (Android/Chrome); Tastatur-Fokus bleibt (:focus-visible) */
/* Mac (Maus/Trackpad): oben nicht nachfedern – in der Luecke zeigte Safari eine glatte Flaeche, der Hero-Hintergrund begann dann sichtbar
   unter der Kopfzeile (12.11.). Am Handy bleibt das Ziehen zum Aktualisieren. */
@media (hover: hover) and (pointer: fine) { html { overscroll-behavior-y: none; } }
body { background: var(--bg); color: var(--fg); font: 400 15px/1.6 var(--body); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
::selection { background: rgba(var(--red), 0.9); color: #fff; }
:focus-visible { outline: 2px solid rgba(var(--acc), 0.9); outline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gut))); margin: 0 auto; }
.disp { font-family: var(--disp); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Filmkorn: bewegt, damit Flaechen nie tot wirken */

/* Kicker: Strich + Sperrschrift, wie auf der UNTAMED-Seite */
.kick { display: inline-flex; align-items: center; gap: 12px; font: 600 11px/1 var(--body); letter-spacing: 0.34em; text-transform: uppercase; color: rgb(var(--acc)); }
.kick::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.kick.no-line::before { display: none; }

/* ---------- Knoepfe ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  font: 700 12px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.35s, border-color 0.3s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-156%) skewX(-20deg); transition: transform 0.75s var(--ease); }
.btn:hover::after { transform: translateX(300%) skewX(-20deg); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--light { background: var(--fg); color: #0a0a0a; box-shadow: 0 12px 40px -12px rgba(255, 255, 255, 0.35); }
.btn--acc { background: rgb(var(--acc)); color: #050505; box-shadow: 0 0 0 1px rgb(var(--acc)), 0 10px 36px -8px rgba(var(--acc), 0.6); }
.btn--acc:hover { box-shadow: 0 0 0 1px rgb(var(--acc)), 0 16px 50px -6px rgba(var(--acc), 0.85); }
.btn--ghost { border: 1px solid var(--line-2); background: rgba(8, 8, 10, 0.55); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.btn--ghost.is-on { border-color: rgba(var(--acc), 0.7); color: rgb(var(--acc)); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 11px; }
.btn.in-cart { background: transparent; color: rgb(var(--acc)); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.6); }
.btn .pr { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; padding-left: 12px; border-left: 1px solid currentColor; opacity: 0.85; }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(8, 8, 10, 0.58); transition: transform 0.3s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s; }
.icon-btn svg { width: 17px; height: 17px; }
.pi { display: grid; place-items: center; width: 100%; height: 100%; line-height: 0; }
.pi svg { display: block; }
.icon-btn:hover { transform: scale(1.08); background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
.icon-btn.is-on { background: rgb(var(--acc)); color: #050505; border-color: transparent; }

/* ---------- Preis: immer Betrag, darunter/daneben der alte Preis ---------- */
.price { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.price b { font: 400 30px/1 var(--disp); letter-spacing: 0.01em; }
.price b i { font-style: normal; font-size: 0.56em; vertical-align: 0.4em; margin-right: 2px; opacity: 0.75; }
.price s { font: 500 14px/1 var(--mono); color: var(--fg-2); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.6); text-decoration-thickness: 1.5px; }
/* Reduziert: ueberall gleich – grosser Preis, rechts daneben gestapelt das rote Schild (wie viel gespart) ueber dem alten Preis.
   Der alte Preis steht mittig unter dem Schild (linksbuendig sah es schief aus, 12.11.). Ohne Schild steht er mittig neben dem Preis. */
.price .was { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1; }
.price .sale-nm { font: 700 9px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--red)); white-space: nowrap; }
.price .off, .sale { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; background: rgb(var(--red)); color: #fff; font: 800 11.5px/1 var(--body); font-style: normal; letter-spacing: 0.02em; box-shadow: 0 8px 20px -8px rgba(var(--red), 0.9); }
.sale[hidden] { display: none; }
/* Produkt im Admin deaktiviert: der Server setzt hidden an jede Karte mit data-card (server/lib/live.js renderLive) */
[data-card][hidden] { display: none !important; }
[data-new][hidden] { display: none !important; }   /* "New"-Schild aus, Schalter im Admin (live.js) */
.price .free { font: 400 26px/1 var(--disp); letter-spacing: 0.04em; }

/* ---------- Kopfzeile ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--head-h); transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--ease); border-bottom: 1px solid transparent; view-transition-name: site-head; }
.hd::before { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.75), transparent); transition: opacity 0.4s; }
.hd.solid { background: rgba(9, 9, 11, 0.95); border-color: var(--line); }
.hd.solid::before { opacity: 0; }
.hd .wrap { height: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.hd-logo img { height: 34px; width: auto; transition: transform 0.4s var(--ease); }
.hd-logo:hover img { transform: scale(1.04); }
.hd-nav { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.hd-nav a { position: relative; padding: 8px 0; font: 600 11px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); transition: color 0.25s; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--red)); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.hd-nav a:hover, .hd-nav a.on { color: #fff; }
.hd-nav { position: relative; }
.hd-ind { position: absolute; left: 0; bottom: calc(50% - 14px); width: var(--iw, 0px); height: 2px; border-radius: 2px; background: rgb(var(--red)); box-shadow: 0 0 12px rgba(var(--red), 0.7);
  transform: translate3d(var(--ix, 0px), 0, 0); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.5, 0, 0.2, 1.2), width 0.45s cubic-bezier(0.5, 0, 0.2, 1.2), opacity 0.3s; }
.hd-ind.on { opacity: 1; view-transition-name: hd-ind; }
.hd-nav a.on::after { opacity: 0; }
/* frisch geladen (nicht per Seitenuebergang): Kopfzeile faehrt ein, Logo, Punkte und Knoepfe nacheinander */
html:not(.via-vt):not(.hd-seen) .hd { animation: hd-in 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.05s both; }   /* nur erster Aufruf der Sitzung: beim Wechseln steht die Kopfzeile, sonst wirkt jeder Wechsel wie neu Laden */
/* Kopfzeile faehrt nur beim ersten Seitenaufruf der Sitzung ein (vt-head.js setzt sonst .hd-seen), nicht bei jedem Neuladen */
html:not(.via-vt):not(.hd-seen) .hd-logo, html:not(.via-vt):not(.hd-seen) .hd-nav > a, html:not(.via-vt):not(.hd-seen) .hd-r > * { animation: hd-item 0.75s cubic-bezier(0.2, 0.85, 0.25, 1) both; animation-delay: calc(0.25s + var(--hi, 0) * 0.06s); }
@keyframes hd-in { from { transform: translateY(-100%); opacity: 0; } }
@keyframes hd-item { from { opacity: 0; transform: translateY(-10px); } }
.hd-nav a:hover::after, .hd-nav a.on::after { transform: scaleX(1); transform-origin: left; }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hd-btn { height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font: 600 11px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; transition: background-color 0.25s, border-color 0.25s; }
.hd-btn svg { width: 18px; height: 18px; }
.hd-btn:hover { background: rgba(255, 255, 255, 0.08); }
.hd-cart { border: 1px solid var(--line-2); }
/* Warenkorb: schwebender Knopf unten rechts statt in der Kopfzeile (war ueberladen). Weicht Mini-Player, Trailer und der Kaufleiste
   (Handy) aus, verschwindet, solange der Warenkorb offen ist; Zahl nur, wenn etwas drin liegt */
.hd-cart.cart-fab { position: fixed; z-index: 85; right: var(--gut); bottom: 20px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #131316; color: var(--fg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); transition: transform 0.45s var(--ease-out), opacity 0.3s, background-color 0.25s, border-color 0.25s; view-transition-name: cart-fab; }
.cart-fab svg { width: 22px; height: 22px; }
.cart-fab .n { position: absolute; top: -5px; right: -5px; z-index: 2; }   /* immer vor dem Ring */
.cart-fab:not(.has) .n { display: none; }
@media (hover: hover) { .cart-fab:hover { background: #1c1c21; border-color: rgba(255, 255, 255, 0.3); } }
body:has(.mp.on) .cart-fab { transform: translateY(-100px); }
body:has(.vp.on:not(.big)) .cart-fab { transform: translateY(calc(-1 * (min(400px, 100vw - 2 * var(--gut)) * 9 / 16 + 76px))); }
body:has(.cart.on) .cart-fab, body:has(.vp.big) .cart-fab, body:has(.cc.on) .cart-fab { opacity: 0; pointer-events: none; }   /* auch solange das Cookie-Banner offen ist – sonst verdeckt er dessen Knoepfe */
@media (max-width: 720px) { .hd-cart.cart-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } body:has(.buybar.on) .cart-fab { transform: translateY(-84px); } }
.hd-cart .n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); font: 600 11px/1 var(--mono); letter-spacing: 0; transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease); }
.hd-cart.has .n { background: rgb(var(--red)); color: #fff; }
/* ---------- Untermenue: die Kopfzeile waechst unter dem Menuepunkt nach unten, mit gerundeten Ecken und Hohlkehlen am Ansatz.
   Zwischen den Punkten gleitet und verformt sich dieselbe Flaeche, statt dass einzelne Fenster aufgehen. ---------- */
:root { --mm-bg: rgba(12, 12, 15, 0.95); --mm-e: cubic-bezier(0.22, 0.9, 0.24, 1); }
/* waehrend das Menue offen ist, steht die Seite darunter still: das Glas weichzeichnet dann ein ruhendes Bild (guenstig) */
html.mm-open main *, html.mm-open main *::before, html.mm-open main *::after, html.qs-open main *, html.qs-open main *::before, html.qs-open main *::after { animation-play-state: paused !important; }
/* Glaskarte unter der Kopfzeile: schiebt sich darunter hervor nach unten, gleitet und verformt sich zwischen den Punkten */
.mm { --x: 0px; --w: 640px; --h: 0px; position: fixed; z-index: 59; top: calc(var(--head-h) + 8px); left: 0; width: var(--w); height: var(--h); opacity: 0; transform: translate3d(var(--x), -16px, 0); visibility: hidden; pointer-events: none;
  transition: transform 0.5s var(--mm-e), width 0.5s var(--mm-e), height 0.4s var(--mm-e), opacity 0.25s ease, visibility 0s linear 0.4s; }
.mm.on { opacity: 1; transform: translate3d(var(--x), 0, 0); visibility: visible; pointer-events: auto; transition: transform 0.5s var(--mm-e), width 0.5s var(--mm-e), height 0.5s var(--mm-e), opacity 0.3s ease, visibility 0s; }
.mm.jump, .mm.jump * { transition: none !important; }
.mm-bg, .qs-bg { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(160deg, rgba(78, 78, 92, 0.5), rgba(38, 38, 46, 0.62) 60%, rgba(30, 30, 37, 0.68));
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 44px 80px -32px rgba(0, 0, 0, 0.9); }
.mm-in { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; }
.mm-p { position: absolute; top: 0; left: 0; width: max-content; padding: 20px 24px 18px; opacity: 0; transform: translate3d(var(--dx, 18px), 0, 0); pointer-events: none; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.4s var(--mm-e), visibility 0s linear 0.4s; }
.mm-p.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.35s ease 0.08s, transform 0.55s var(--mm-e) 0.03s, visibility 0s; }
.mm-dim { position: fixed; inset: var(--head-h) 0 0; z-index: 58; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
html.mm-open .mm-dim { opacity: 1; }
/* Eintraege */
.mm-i { --pc: 255, 255, 255; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 12px; transition: background-color 0.25s; }
.mm-i:hover, .mm-i:focus-visible { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.35); }
.mm-th { width: 44px; height: 44px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.mm-th img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); transition: transform 0.35s var(--mm-e); }
.mm-th.tile { border-radius: 11px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.7); }
.mm-th.tile img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.mm-i:hover .mm-th img { transform: translateY(-2px) scale(1.08); }
.mm-tx { min-width: 0; display: grid; gap: 4px; }
.mm-tx b { display: flex; align-items: center; gap: 8px; font: 400 17px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.01em; color: #f3f1ec; white-space: nowrap; transition: color 0.25s; }
.mm-i:hover .mm-tx b { color: rgb(var(--pc)); }
.mm-tx b em { font: 700 8px/1 var(--body); font-style: normal; letter-spacing: 0.18em; padding: 3px 5px 2px; border-radius: 3px; background: var(--fg); color: #0a0a0a; }
.mm-tx small { font: 600 9px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }   /* darf umbrechen: Untertitel immer ganz lesbar */
.mm-libs { display: grid; grid-template-columns: auto 230px; gap: 18px; }
.mm-grid { display: grid; grid-template-columns: repeat(3, 210px); gap: 2px 6px; }
.mm-feat { --pc: 255, 255, 255; position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; display: flex; align-items: flex-end; padding: 16px; min-height: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.mm-fbg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6) saturate(1.05); transform: scale(1.06); transition: transform 0.9s var(--mm-e), filter 0.5s; }
.mm-feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 7, 9, 0.95) 8%, rgba(7, 7, 9, 0) 55%); }
.mm-fbox { position: absolute; z-index: -1; left: 50%; top: 10%; width: 64%; transform: translateX(-50%); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.8)); transition: transform 0.6s var(--mm-e); }
.mm-feat:hover .mm-fbg { transform: none; filter: brightness(0.75) saturate(1.15); }
.mm-feat:hover .mm-fbox { transform: translate(-50%, -4%) scale(1.04); }
.mm-ft { display: grid; gap: 6px; }
.mm-ft em, .mm-vt em { font: 600 9px/1 var(--body); font-style: normal; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--pc)); }
.mm-ft b { font: 400 30px/0.9 var(--disp); text-transform: uppercase; }
.mm-ft small { font: 600 9px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); }
.mm-cols { display: grid; grid-template-columns: repeat(2, 300px); gap: 2px 8px; }
.mm-cols--1 { grid-template-columns: 340px; }
.mm-pr .price b { font-size: 18px; } .mm-pr .price s, .mm-pr .price .off { display: none; }
.mm-free { font: 600 9px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--pc)); }
.mm-vault { --pc: 235, 195, 100; display: grid; grid-template-columns: 300px 230px; align-items: center; gap: 22px; padding: 6px; border-radius: 16px; transition: background-color 0.3s; }
.mm-vault:hover { background: rgba(235, 195, 100, 0.06); }
.mm-vault img { width: 100%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.75)); transition: transform 0.6s var(--mm-e); }
.mm-vault:hover img { transform: translateY(-3px) scale(1.03); }
.mm-vt { display: grid; gap: 8px; }
.mm-vt b { font: 900 44px/0.85 'Big Shoulders Stencil Display', var(--disp); text-transform: uppercase; background: linear-gradient(180deg, #fff4cf, #e2b85a 60%, #8d6420); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mm-vt small { font: 600 10px/1.5 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.mm-vp .price b { font-size: 26px; }
.mm-team { display: grid; grid-template-columns: repeat(2, 230px); gap: 4px 8px; }
.mm-m { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 12px; transition: background-color 0.25s; }
.mm-m:hover { background: rgba(255, 255, 255, 0.06); }
.mm-mo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--disp); color: #fff; background: radial-gradient(circle at 30% 25%, rgba(var(--red), 0.6), rgba(var(--red), 0.12) 70%); box-shadow: inset 0 0 0 1px rgba(var(--red), 0.5); }
.mm-links { display: flex; gap: 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-links a { font: 600 10px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); transition: color 0.2s; }
.mm-links a:hover { color: #fff; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font: 500 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.mm-go { display: inline-flex; align-items: center; gap: 8px; font: 700 10px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.mm-go svg { width: 14px; height: 14px; transition: transform 0.3s var(--mm-e); } .mm-go:hover svg { transform: translateX(4px); }
.hd-nav a[aria-expanded="true"] { color: #fff; }
.hd-nav a[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Suche: Lupe in der Kopfzeile, Glaskarte wie die Untermenues; die Hoehe folgt weich den Treffern ---------- */
/* Newsletter: Knopf in der Kopfzeile (jede Seite) laesst die Kopfzeile nach unten aufwachsen (kein Fenster, kein Abdunkeln).
   Die Leiste gleitet aus der Unterkante der Kopfzeile heraus (nur transform); schmal nur das Symbol */
.hd-nl[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.hd.nl-open { background: #09090b; border-color: transparent; }
.hd.nl-open::before { opacity: 0; }
.nlp { position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; padding-bottom: 60px; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.45s; }
.nlp.on { visibility: visible; transition: visibility 0s; }
.nlp-c { position: relative; pointer-events: auto; background: #09090b; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  transform: translate3d(0, -100%, 0); transition: transform 0.45s var(--ease-out); }
.nlp.on .nlp-c { transform: none; }
.nlp-c .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) 38px; align-items: center; gap: clamp(20px, 4vw, 60px); padding: 26px 0 30px; }
.nlp-c > .wrap > * { opacity: 0; transition: opacity 0.2s ease; }
.nlp.on .nlp-c > .wrap > * { opacity: 1; transition: opacity 0.35s ease 0.12s; }
.nlp-h { display: grid; gap: 10px; }
.nlp-c h2 { font: 400 clamp(30px, 3.6vw, 44px)/0.95 var(--disp); text-transform: uppercase; }
.nlp-c .kick { --acc: var(--red); }
.nlp-c .nl { gap: 10px; }
.nlp-c .ff-t { font-size: 13.5px; }
.nlp-c .ff-msg:empty { display: none; }
.nlp-x { grid-row: 1; grid-column: -2 / -1; align-self: start; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-2); }
.nlp-x svg { width: 16px; height: 16px; }
.nlp-x:hover { background: var(--fg); color: #0a0a0a; }
.nlp-legal { font-size: 12px; color: var(--mute); }
.nlp-legal a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
/* Menue fuer schmale Fenster (Kopfzeile ohne Hauptpunkte): der Knopf laesst die Kopfzeile nach unten aufwachsen wie beim Newsletter */
.hd-menu { display: none; width: 42px; padding: 0; justify-content: center; }
.hd-menu path { transition: transform 0.35s var(--ease-out), opacity 0.2s; transform-origin: 12px 12px; }
.hd-menu[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.hd-menu[aria-expanded="true"] .m1 { transform: translateY(5px) rotate(45deg); }
.hd-menu[aria-expanded="true"] .m2 { opacity: 0; }
.hd-menu[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); }
.hd.mn-open { background: #09090b; border-color: transparent; }
.hd.mn-open::before { opacity: 0; }
.mnav { position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; padding-bottom: 60px; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.45s; }
.mnav.on { visibility: visible; transition: visibility 0s; }
.mnav-c { pointer-events: auto; background: #09090b; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); transform: translate3d(0, -100%, 0); transition: transform 0.45s var(--ease-out); }
.mnav.on .mnav-c { transform: none; }
.mnav-c .wrap { display: grid; padding: 6px 0 14px; }
.mnav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 clamp(26px, 7vw, 34px)/1 var(--disp); text-transform: uppercase; color: #f3f1ec; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 0.2s ease, transform 0.3s var(--ease-out), color 0.2s; }
.mnav a:last-child { border-bottom: 0; }
.mnav a svg { width: 20px; height: 20px; color: rgb(var(--red)); }
.mnav a.nav-vault { color: #e8c66a; }
.mnav a.on { color: rgb(var(--red)); }
.mnav.on a { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-out), color 0.2s; }
.mnav.on a:nth-child(2) { transition-delay: 0.04s; } .mnav.on a:nth-child(3) { transition-delay: 0.08s; } .mnav.on a:nth-child(4) { transition-delay: 0.12s; } .mnav.on a:nth-child(5) { transition-delay: 0.16s; }
@media (max-width: 980px) { .hd-menu { display: inline-flex; } .hd-login { width: 42px; padding: 0; justify-content: center; } .hd-logo { flex: none; } }
@media (max-width: 380px) { .hd .wrap { gap: 8px; } .hd-r { gap: 2px; } }   /* kleine Handys: Logo und vier Knoepfe passen ohne Stauchen */
@media (max-width: 1240px) { .hd-nl .lbl { display: none; } .hd-nl { width: 42px; padding: 0; justify-content: center; } }
@media (max-width: 860px) { .nlp-c .wrap { grid-template-columns: minmax(0, 1fr) 38px; gap: 14px 16px; padding: 18px 0 22px; } .nlp-c .nl { grid-column: 1 / -1; } }
@media (max-width: 560px) { .nlp .ff-row { flex-direction: column; } .nlp .ff-row input { width: 100%; flex: none; } }
.hd-search { position: relative; width: 42px; padding: 0; justify-content: center; }
.hd-search .lbl { display: none; }
.hd-search kbd { position: absolute; right: -2px; bottom: 3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 4px; display: grid; place-items: center; font: 600 9px/1 var(--mono); color: var(--mute); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.hd-search:hover kbd, .hd-search:focus-visible kbd { opacity: 1; }
.hd-search[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.qs { --x: 0px; --w: 720px; --h: 70px; position: fixed; z-index: 59; top: calc(var(--head-h) + 8px); left: 0; width: var(--w); height: var(--h); opacity: 0; transform: translate3d(var(--x), -16px, 0); visibility: hidden; pointer-events: none;
  transition: transform 0.45s var(--mm-e), height 0.4s var(--mm-e), opacity 0.22s ease, visibility 0s linear 0.4s; }
.qs.on { opacity: 1; transform: translate3d(var(--x), 0, 0); visibility: visible; pointer-events: auto; transition: transform 0.5s var(--mm-e), height 0.45s var(--mm-e), opacity 0.3s ease, visibility 0s; }
.qs.jump, .qs.jump * { transition: none !important; }
.qs-in { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; }
.qs-f { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.qs-f > svg { flex: none; width: 20px; height: 20px; color: var(--fg-2); }
.qs-f input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; color: #fff; font: 500 17px/1.2 var(--body); letter-spacing: 0.01em; }
.qs-f input::placeholder { color: rgba(255, 255, 255, 0.4); }
.qs-f input::-webkit-search-cancel-button { display: none; }
.qs-x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-2); transition: background-color 0.2s, color 0.2s; }
.qs-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.qs-x svg { width: 16px; height: 16px; }
.qs-sc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.qs-body { padding: 6px 12px 14px; }
.qs-h { margin: 12px 8px 8px; font: 600 9px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.qs-note, .qs-none { margin: 16px 8px 10px; font: 500 13px/1.5 var(--body); color: var(--fg-2); }
.qs-none b { color: #fff; font-weight: 600; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.qs-chip { height: 30px; padding: 0 13px; border-radius: 999px; font: 600 10px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.qs-chip:hover, .qs-chip:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); }
.qs-chip.on { color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--red), 0.7); background: rgba(var(--red), 0.16); }
.qs-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.qs-list li { list-style: none; }
.qs-list li { animation: qs-in 0.34s var(--mm-e) both; animation-delay: calc(var(--k, 0) * 24ms); }
@keyframes qs-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.qs-i { --pc: 255, 255, 255; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 7px 14px 7px 7px; border-radius: 12px; transition: background-color 0.2s, box-shadow 0.2s; }
.qs-i.sel { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.4); }
.qs-th { width: 48px; height: 48px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }   /* feste Spur, sonst waechst die Zeile mit hohen Covern */
.qs-th img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); transition: transform 0.3s var(--mm-e); }
.qs-th.tile { border-radius: 11px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.7); }
.qs-th.tile img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.qs-i.sel .qs-th img { transform: translateY(-2px) scale(1.07); }
.qs-tx { min-width: 0; display: grid; gap: 5px; }
.qs-tx b { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 18px/1.05 var(--disp); text-transform: uppercase; letter-spacing: 0.01em; color: #f3f1ec; transition: color 0.2s; }
.qs-i.sel .qs-tx b { color: rgb(var(--pc)); }
.qs-tx b em { flex: none; font: 700 8px/1 var(--body); font-style: normal; letter-spacing: 0.18em; padding: 3px 5px 2px; border-radius: 3px; background: var(--fg); color: #0a0a0a; }
.qs-tx small { font: 600 9px/1.3 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.qs-why { max-width: 220px; padding: 5px 9px 4px; border-radius: 6px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.04em; color: rgba(var(--pc), 0.95); background: rgba(var(--pc), 0.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-i.up .qs-why { color: #e9c56e; background: rgba(233, 197, 110, 0.12); }
.qs-pr { min-width: 46px; text-align: right; font: 600 13px/1 var(--mono); color: var(--fg); }
.qs-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 8px 2px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.qs-nav a { font: 600 10px/1.6 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); transition: color 0.2s; }
.qs-nav a:hover { color: #fff; }
.qs-dim { position: fixed; inset: var(--head-h) 0 0; z-index: 58; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
html.qs-open .qs-dim { opacity: 1; pointer-events: auto; }
@media (max-width: 640px) {
  .qs { top: calc(var(--head-h) + 4px); }
  .qs-i { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding-right: 10px; }
  .qs-th { width: 44px; height: 44px; }
  .qs-why { grid-column: 2 / 4; grid-row: 2; justify-self: start; max-width: 100%; margin-top: -2px; }
  .qs-pr { grid-row: 1; grid-column: 3; }
  .qs-k { display: none; }
}

/* ---------- Abschnittskoepfe ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-title { margin-top: 16px; font: 400 clamp(36px, 4.6vw, 70px)/0.92 var(--disp); text-transform: uppercase; letter-spacing: 0.005em; }
/* ================= Kopf der Unterseiten: Titel links, eigenes Motiv rechts (Faecher, Beute, Wand) bzw. ruhig bewegt (Recht, Shop) ================= */
.pgh { --pc: 255, 255, 255; position: relative; overflow: hidden; isolation: isolate; min-height: min(76vh, 680px); display: flex; align-items: center;
  padding: calc(var(--head-h) + clamp(30px, 5vw, 70px)) 0 clamp(40px, 5vw, 70px); }
.pgh--legal, .pgh--shop { min-height: 0; padding-bottom: clamp(30px, 4vw, 50px); }
.pgh-bg { position: absolute; inset: 0; z-index: -3; background: radial-gradient(55% 85% at 76% 48%, rgba(var(--pc), 0.13), transparent 70%), radial-gradient(60% 120% at 12% 0%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(180deg, #08080a, var(--bg) 92%); }
.pgh-in { position: relative; z-index: 3; }
.pgh-copy { max-width: min(46%, 640px); }
.pgh--legal .pgh-copy, .pgh--shop .pgh-copy { max-width: none; }
.pgh .pgh-t { margin-top: 18px; white-space: nowrap; }
.pgh-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 30px 0 0; padding: 0; list-style: none; }
.pgh-stats b { display: block; font: 400 clamp(30px, 3vw, 46px)/1 var(--disp); }
.pgh-stats li > span { font: 600 10px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.pgh-dust { z-index: 1; }
.pgh-art { position: absolute; z-index: 0; pointer-events: none; }
.pgh-pool { position: absolute; left: 12%; right: 12%; bottom: 0; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pc), 0.32), transparent 72%); filter: blur(10px); opacity: 0; }
.pgh.in .pgh-pool { animation: pgh-glow 2s var(--ease-out) 0.9s both; }
@keyframes pgh-glow { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: none; } }
/* Sources: alle Collections als Faecher, dahinter eine Wellenform mit laufendem Lichtpunkt */
.pgh--sources { --pc: 236, 214, 170; }
.pgh-fan { right: max(2vw, calc((100vw - 1480px) / 2)); top: 52%; width: min(50vw, 740px); aspect-ratio: 1.5; transform: translateY(-50%); }
.pgh-fb { position: absolute; left: 37%; bottom: 16%; width: 26%; z-index: var(--z); opacity: 0; transform-origin: 50% 240%; transform: rotate(var(--r)); filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.75)); transition: rotate 0.8s var(--ease-out); }
.pgh.in .pgh-fb { opacity: 1; animation: pgh-fan-in 1.3s var(--ease-out) calc(250ms + var(--i) * 85ms) backwards, pgh-bob 6.5s ease-in-out calc(1.8s + var(--i) * 0.45s) infinite; }
.pgh:hover .pgh-fb { rotate: var(--sp); }
@keyframes pgh-fan-in { from { opacity: 0; transform: translateY(26%) rotate(0deg) scale(0.86); } }
@keyframes pgh-bob { 50% { translate: 0 -7px; } }
.pgh-wave { position: absolute; left: -38%; width: 150%; bottom: 6%; height: 30%; }
.pgh-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pgh-wave > svg path { fill: none; stroke: rgba(236, 214, 170, 0.24); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.pgh.in .pgh-wave > svg path { animation: pgh-draw 2.4s var(--ease-io, ease-in-out) 0.2s forwards; }
@keyframes pgh-draw { to { stroke-dashoffset: 0; } }
/* Lichtpunkt: ein schmales Fenster wandert nach rechts, die helle Welle darin gegenlaeufig nach links und bleibt so deckungsgleich
   mit der ruhigen Welle; beides transform (vorher stroke-dashoffset, das jedes Bild neu gezeichnet wurde) */
.pgh-hlw { position: absolute; top: -10%; bottom: -10%; left: 0; width: 5%; overflow: hidden; opacity: 0; transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.pgh-hli { position: absolute; top: 8.333%; bottom: 8.333%; left: 0; width: 2000%; transform: translateX(5%); }
.pgh-hli svg { filter: drop-shadow(0 0 6px rgba(255, 220, 160, 0.9)); }
.pgh-hli .hl { fill: none; stroke: rgba(255, 244, 220, 0.95); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pgh.in .pgh-hlw { animation: pgh-win 7s linear 2.2s infinite; }
.pgh.in .pgh-hli { animation: pgh-win-in 7s linear 2.2s infinite; }
@keyframes pgh-win { 0% { transform: translateX(-100%); opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(2000%); opacity: 0; } }
@keyframes pgh-win-in { 0% { transform: translateX(5%); } 100% { transform: translateX(-100%); } }
/* Free: die Freebies als Beute ueber einem grossen €0, rotes Licht von unten, langsam kreisende Lichtstrahlen */
.pgh--free { --pc: var(--red); }
.pgh-loot { right: max(3vw, calc((100vw - 1480px) / 2)); top: 52%; width: min(46vw, 640px); aspect-ratio: 1.3; transform: translateY(-50%); }
.pgh-zero { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(200px, 27vw, 400px)/0.8 var(--disp); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--red), 0.4); opacity: 0; transform: translateY(-6%) scale(0.92); }
.pgh.in .pgh-zero { animation: pgh-zero 1.6s var(--ease-out) 0.15s forwards; }
@keyframes pgh-zero { 0% { opacity: 0; transform: translateY(-6%) scale(0.92); } 100% { opacity: 1; transform: translateY(-6%); } }
.pgh-lb { position: absolute; width: 48%; bottom: 14%; opacity: 0; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(var(--pc), 0.25)); }
.pgh-lb:nth-of-type(1) { left: 6%; transform: rotate(-9deg); }
.pgh-lb:nth-of-type(2) { right: 4%; transform: rotate(7deg) translateY(-8%); }
.pgh.in .pgh-lb { opacity: 1; animation: pgh-drop 1.25s cubic-bezier(0.2, 1.3, 0.35, 1) calc(500ms + var(--i) * 220ms) backwards, pgh-bob 5.5s ease-in-out calc(2s + var(--i) * 0.9s) infinite; }
@keyframes pgh-drop { from { opacity: 0; transform: translateY(-70%) rotate(calc(var(--i) * 30deg - 15deg)) scale(0.9); } 40% { opacity: 1; } }
.pgh-beam { position: absolute; left: 50%; top: -40%; width: 140%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); opacity: 0; animation: pgh-spin 60s linear infinite;
  background: radial-gradient(closest-side, transparent 20%, var(--bg) 70%), repeating-conic-gradient(from 0deg, rgba(var(--red), 0.07) 0 6deg, transparent 6deg 20deg); }
.pgh.in .pgh-beam { opacity: 1; transition: opacity 2s ease 0.6s; }
@keyframes pgh-spin { to { transform: translateX(-50%) rotate(360deg); } }
/* Team: schraege Wand aus allen Covern, Reihen ziehen gegeneinander */
.pgh-wall { top: -8%; bottom: -8%; right: -6%; left: 34%; perspective: 1100px; }
.pgh-plane { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(12px, 1.4vw, 20px); transform: rotateY(-24deg) rotateX(10deg) rotateZ(-3deg); transform-origin: 30% 50%; opacity: 0; }
.pgh.in .pgh-plane { animation: pgh-wall 1.8s var(--ease-out) 0.15s forwards; }
@keyframes pgh-wall { from { opacity: 0; transform: rotateY(-40deg) rotateX(10deg) rotateZ(-3deg) translateZ(-260px); } to { opacity: 1; } }
.pgh-row { overflow: visible; }
.pgh-tr { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; animation: pgh-marq calc(70s + var(--r) * 16s) linear infinite; }
.pgh-row:nth-child(2) .pgh-tr { animation-direction: reverse; }
.pgh-tr img { height: clamp(96px, 10vw, 150px); width: auto; filter: brightness(0.72) saturate(0.9) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.7)); }
@keyframes pgh-marq { to { transform: translateX(-50%); } }
.pgh--team .pgh-bg { background: linear-gradient(90deg, #08080a 30%, rgba(8, 8, 10, 0.4) 60%, rgba(8, 8, 10, 0.7)), radial-gradient(60% 120% at 12% 0%, rgba(var(--red), 0.12), transparent 70%), #08080a; }
.pgh--team .pgh-in, .pgh--team .pgh-copy { position: relative; }
/* Raender der Wand ueber eine ruhende Verlaufsebene statt einer Maske auf den laufenden Reihen (Masken ueber Bewegung bremsen Safari) */
.pgh--team::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #08080a 18%, rgba(8, 8, 10, 0.7) 42%, transparent 70%, transparent 86%, #08080a), linear-gradient(0deg, var(--bg), transparent 30%), linear-gradient(180deg, #08080a, transparent 18%); }
/* Recht und Shop: feines Raster, eine Lichtlinie zieht langsam durch */
.pgh-calm { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 100% at 72% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 100% at 72% 30%, #000, transparent 75%); opacity: 0; }
.pgh.in .pgh-calm { opacity: 1; transition: opacity 1.4s ease; }
.pgh-scan { position: absolute; left: 0; right: 0; top: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--red), 0.75), transparent); box-shadow: 0 0 18px rgba(var(--red), 0.6); animation: pgh-scan 9s ease-in-out infinite; }
@keyframes pgh-scan { 0%, 100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(160px); opacity: 1; } }
@media (max-width: 860px) {
  .pgh { min-height: 0; align-items: flex-end; }
  .pgh-copy { max-width: none; }
  .pgh .pgh-t { white-space: normal; }
  .pgh-fan, .pgh-loot { top: calc(var(--head-h) + 10px); right: -14%; width: 92vw; transform: none; opacity: 0.4; }
  .pgh--sources, .pgh--free { padding-top: calc(var(--head-h) + 46vw); }
  .pgh-wall { left: -20%; opacity: 0.45; }
}
/* Ueberschriften in einer Zeile: die Teile stehen nebeneinander, jeder faehrt einzeln hoch */
.sec-title.lines .ln, .loot h2.lines .ln { display: inline-block; vertical-align: top; }
.sec-title.lines .ln + .ln, .loot h2.lines .ln + .ln { margin-left: 0.24em; }
.sec-title .o { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); }
.sec-meta { font: 500 12px/1.6 var(--mono); color: var(--mute); letter-spacing: 0.06em; }

/* spaet ankommende Bilder: unsichtbar bis geladen, dann weich auf (core.js) */
img.lz { opacity: 0 !important; }
img.lz-in { transition: opacity 0.5s ease !important; }
/* ---------- Einblendungen (IntersectionObserver setzt .in) ---------- */
/* Tempo: Einblendungen knapp ein Viertel schneller als zuvor, Verzoegerungen im selben Verhaeltnis (Reihenfolge bleibt) */
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.85s var(--ease-out); transition-delay: calc(var(--d, 0) * 0.75ms); }
[data-rv="fade"] { transform: none; }
[data-rv="scale"] { transform: translateY(30px) scale(0.95); }
[data-rv="left"] { transform: translateX(-40px); }
[data-rv="right"] { transform: translateX(40px); }
[data-rv="clip"] { transform: none; clip-path: inset(0 99.4% 0 0); transition: clip-path 0.95s var(--ease-io), opacity 0.35s; transition-delay: calc(var(--d, 0) * 0.75ms); }
[data-rv].in { opacity: 1; transform: none; }
/* Bausteine mit eigener Hover-Bewegung (transform + eigene transition): Einblendung ueber translate/scale, ihre transition-Liste
   fuehrt opacity/translate/scale mit (siehe jeweilige CSS), sonst sprangen sie beim Erscheinen auf */
:is(.wc, .el-c, .sp6, .hr-s, .cl-t, .cb-r, .ev, .vwd-c)[data-rv] { transform: none; translate: 0 28px; }
:is(.wc, .el-c, .sp6, .hr-s, .cl-t, .cb-r, .ev, .vwd-c)[data-rv="scale"] { translate: 0 30px; scale: 0.95; }
:is(.wc, .el-c, .sp6, .hr-s, .cl-t, .cb-r, .ev, .vwd-c)[data-rv="left"] { translate: -40px 0; }
:is(.wc, .el-c, .sp6, .hr-s, .cl-t, .cb-r, .ev, .vwd-c)[data-rv].in { translate: none; scale: none; }
/* einheitliche Einblendung (core.js setzt data-auto): Animation statt Uebergang, damit eigene transition/transform bleiben */
/* Abschnitte ausserhalb des Bildes: laufende Animationen anhalten (core.js setzt .anim-off), spart Stil- und Zeichenarbeit je Bild */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* sofort stehen lassen (Ankunft per Seitenuebergang, siehe core.js) */
.rv-now, .rv-now.lines .ln > span { transition: none !important; animation: none !important; }
[data-auto]:not(.in) { opacity: 0; }
[data-auto].in { animation: auto-in 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) var(--ad, 0ms) backwards; }
/* Handy: kuerzer, kleinerer Weg, kaum Versatz – beim schnellen Wischen sonst sichtbar nachlaufend */
@media (max-width: 720px) {
  [data-rv] { transform: translateY(14px); transition-duration: 0.5s, 0.6s; transition-delay: min(calc(var(--d, 0) * 0.3ms), 150ms); }
  :is(.wc, .el-c, .sp6, .hr-s, .cl-t, .cb-r, .ev, .vwd-c)[data-rv] { translate: 0 14px; }
  [data-auto].in { animation-duration: 0.5s; animation-delay: min(var(--ad, 0ms), 120ms); }
}
@keyframes auto-in { from { opacity: 0; translate: 0 22px; } }
[data-rv="clip"].in { clip-path: inset(-60% -4% -60% -4%); }
/* Ueberschriften: Zeilen steigen aus einer Maske */
.lines .ln { display: block; overflow: hidden; padding: 0.08em 0 0.02em; margin-top: -0.08em; }
.lines .ln > span { display: inline-block; transform: translateY(115%); transition: transform 0.85s var(--ease-out); transition-delay: calc(var(--d, 0) * 0.75ms + var(--l, 0) * 70ms); }
.lines.in .ln > span { transform: none; }

/* ---------- Laufband ---------- */
.marq { overflow: hidden; }
.marq-row { display: flex; width: max-content; will-change: transform; animation: marq var(--dur, 50s) linear infinite; }
.marq-row.rev { animation-direction: reverse; }
.marq.off .marq-row { animation-play-state: paused; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Warenkorb ---------- */
.dim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.68); opacity: 0; pointer-events: none; transition: opacity 0.45s; }
.dim.on { opacity: 1; pointer-events: auto; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(460px, 100vw); display: flex; flex-direction: column; background: #0e0e11; border-left: 1px solid var(--line-2); transform: translateX(calc(100% + 160px)); transition: transform 0.6s var(--ease-out); box-shadow: -40px 0 100px rgba(0, 0, 0, 0.6); }
.cart.on { transform: none; }
.cart-h { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.cart-h h2 { font: 400 34px/1 var(--disp); text-transform: uppercase; }
.cart-h h2 small { font: 500 12px var(--mono); color: var(--mute); margin-left: 10px; vertical-align: middle; letter-spacing: 0.06em; text-transform: none; }
.cart-x { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: transform 0.4s var(--ease), background-color 0.25s; }
.cart-x:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.08); }
.cart-x svg { width: 15px; height: 15px; }
.cart-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 26px; overscroll-behavior: contain; }   /* Zeilen gleiten seitlich rein/raus: kein Querbalken */
.ci { --pc: 200, 200, 200; display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); animation: ci-in 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ci.out { animation: ci-out 0.4s var(--ease) forwards; }
@keyframes ci-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes ci-out { to { opacity: 0; transform: translateX(60px); } }
.ci-th { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: radial-gradient(closest-side, rgba(var(--pc), 0.28), transparent), #18181c; }
.ci-th img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.ci-t { min-width: 0; }
.ci-t b { display: block; font: 400 21px/1.05 var(--disp); text-transform: uppercase; }
.ci-t span { display: block; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--mute); }
.ci-t button { margin-top: 8px; font: 600 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); transition: color 0.2s; }
.ci-t button:hover { color: rgb(var(--red)); }
/* Lizenzen je Posten: Minus, Anzahl, Plus (Warenkorb und Kasse) */
.ci-lic, .co-lic { display: flex; align-items: center; gap: 6px; }
.ci-lic button, .co-lic button { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); transition: background-color 0.2s, color 0.2s; }
.ci-lic button svg, .co-lic button svg { display: block; width: 11px; height: 11px; }
.ci-lic button:hover:not(:disabled), .co-lic button:hover:not(:disabled) { background: var(--fg); color: #0a0a0a; }
.ci-lic button:disabled, .co-lic button:disabled { opacity: 0.35; cursor: default; }
.ci-lic output, .co-lic output { min-width: 20px; text-align: center; font: 600 13px/24px var(--mono); color: #fff; }
.ci-lic small, .co-lic small { margin-left: 2px; font: 500 10.5px/24px var(--mono); color: var(--mute); }
/* Warenkorb-Zeile: Name und Angaben nebeneinander, darunter Lizenzen und Entfernen in einer Zeile */
.ci-t .ci-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ci-t .ci-h span { margin-top: 0; }
.ci-act { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.ci-t .ci-act button[data-rm] { margin-top: 0; }
.co-lic { margin-top: 8px; }
.ci-dup { display: block; margin-top: 6px; font: 600 10.5px/1.3 var(--body); font-style: normal; letter-spacing: 0.06em; color: rgb(var(--red)); }   /* steckt schon in einem Bundle im Warenkorb */
.ci .price { gap: 8px; }
.ci .price b { font-size: 24px; }
.ci .price s { font-size: 12px; } .ci .price .off { height: 19px; font-size: 10.5px; padding: 0 6px; }
/* Rabattcode im Warenkorb */
.cart-code { display: flex; gap: 8px; margin-bottom: 14px; }
.cart-code[hidden] { display: none; }
.cart-code input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: #fff; font: 600 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cart-code input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }
.cart-code button { height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); font: 700 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); transition: background-color 0.2s; }
.cart-code button:hover { background: rgba(255, 255, 255, 0.08); }
.cart-disc { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font: 500 12px/1.4 var(--body); }
.cart-disc[hidden] { display: none; }
.cart-disc.ok { background: rgba(var(--red), 0.12); border: 1px solid rgba(var(--red), 0.45); }
.cart-disc.ok b { color: #fff; font-family: var(--mono); letter-spacing: 0.06em; }
.cart-disc.ok > span:nth-child(2) { margin-left: auto; font: 700 14px/1 var(--mono); color: #fff; }
.cart-disc.bad { background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line-2); color: var(--fg-2); }
.cart-disc.bad > span { flex: 1; }
.cart-disc button { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--mute); } .cart-disc button svg { width: 14px; height: 14px; }
.cart-disc button:hover { color: #fff; }
/* Hinweis Testbetrieb */
.testbadge { position: fixed; z-index: 90; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 8px; background: #f3f1ec; color: #0a0a0a; font: 700 10px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); pointer-events: none; }
.hd-admin { border: 1px solid rgba(var(--red), 0.6); color: #fff; }
@media (max-width: 720px) { .testbadge { left: 6px; bottom: 6px; padding: 4px 6px; font-size: 0; opacity: 0.85; } .testbadge::before { content: 'Test'; font-size: 8px; letter-spacing: 0.14em; } }
.cart-empty { display: grid; place-items: center; text-align: center; gap: 14px; padding: 80px 10px; color: var(--mute); }
.cart-empty svg { width: 54px; height: 54px; opacity: 0.35; animation: float 5s ease-in-out infinite; }
.cart:not(.on) .cart-empty svg { animation-play-state: paused; }   /* zu: steht ausserhalb des Bildes, Chrome rechnet sie dann jedes Bild im Hauptthread */
.cart-empty b { font: 400 30px/1 var(--disp); text-transform: uppercase; color: var(--fg); }
.cart-f { padding: 22px 26px 26px; border-top: 1px solid var(--line); background: #0b0b0d; }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; }
.cart-sum span { font: 600 11px var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); }
.cart-sum .price b { font-size: 40px; }
.cart-sum .v { transition: opacity 0.2s; }
.cart-sum.busy .v, .cart-sum.busy ~ .cart-save { opacity: 0.45; }   /* neue Summe vom Server unterwegs (core.js cartQuote) */
.cart-save { min-height: 18px; margin-top: 4px; text-align: right; font: 500 12px var(--mono); color: rgb(var(--red)); }
.cart-note { margin: 12px 0 18px; font: 400 12px/1.5 var(--body); color: var(--mute); }
.cart-f .btn { width: 100%; }
.cart-f .btn[disabled] { opacity: 0.3; pointer-events: none; }
.cart-sec { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font: 500 11px var(--body); color: var(--mute); }
.cart-sec svg { width: 13px; height: 13px; }
.fly { --fc: 232, 48, 40; position: fixed; z-index: 110; pointer-events: none; object-fit: contain; transform-origin: 50% 50%; will-change: transform, opacity;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(var(--fc), 0.45)); }
/* Ankunft am Warenkorb: Ring laeuft im Uhrzeigersinn einmal herum, ist er geschlossen, leuchtet er und der Knopf kurz auf */
.hd-cart { --rc: 232, 48, 40; position: relative; }
.hd-ring { position: absolute; z-index: 1; pointer-events: none; overflow: visible; animation: ring-glow 1.6s ease forwards; }
.hd-ring path { fill: none; stroke: rgb(var(--rc)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: ring-draw 1.6s forwards; }
@keyframes ring-draw { 0% { stroke-dashoffset: 100; stroke-width: 2; animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 1); } 38% { stroke-dashoffset: 0; stroke-width: 2; } 48% { stroke-dashoffset: 0; stroke-width: 3; } 100% { stroke-dashoffset: 0; stroke-width: 1.5; } }
@keyframes ring-glow { 0%, 36% { opacity: 1; filter: drop-shadow(0 0 3px rgba(var(--rc), 0.8)); } 48% { opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--rc), 1)) brightness(1.5); } 100% { opacity: 0; filter: drop-shadow(0 0 2px rgba(var(--rc), 0)); } }
.hd-cart.ringing { animation: cart-glow 1.1s ease 0.58s; }
/* neue Zahl: waehrend der Ring laeuft weg, ploppt auf, sobald er sich schliesst (0,6 s) */
.hd-cart .n.pop { animation: badge-pop 0.5s var(--ease-out) 0.55s backwards; }
@keyframes badge-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cart-glow { 0% { box-shadow: 0 0 0 0 rgba(var(--rc), 0); } 22% { background: rgba(var(--rc), 0.16); border-color: rgba(var(--rc), 0.9); box-shadow: 0 0 0 3px rgba(var(--rc), 0.22), 0 0 34px 4px rgba(var(--rc), 0.6); } 100% { box-shadow: 0 0 0 0 rgba(var(--rc), 0); } }

/* ---------- Mini-Player (Hoerproben) ---------- */
.mp { --pc: 255, 255, 255; position: fixed; right: var(--gut); bottom: 20px; z-index: 70; width: min(360px, calc(100vw - 2 * var(--gut))); display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 16px;
  background: rgba(14, 14, 17, 0.97); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(var(--pc), 0.12);
  transform: translateY(140%); opacity: 0; transition: transform 0.7s var(--ease-out), opacity 0.4s; }
.mp.on { transform: none; opacity: 1; }
/* Geschlossene Ebenen gar nicht zeichnen (13.11.2026, gemessen auf einem Android-Handy, DPR 3,25): Dimmer, Warenkorb und Player lagen
   unsichtbar (Deckkraft 0 bzw. aus dem Bild geschoben) als bildschirmgrosse Ebenen im Grafikspeicher. Mit allen anderen zusammen
   (171 Ebenen, ~476 MB) reichte der Speicher nicht, Chrome liess Teile weg: Vault-Schriftzug und einzelne Boxen verschwanden kurz.
   visibility schaltet erst nach dem Ausblenden ab, beim Oeffnen sofort an. */
.qs-dim { visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
html.qs-open .qs-dim { visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.dim { visibility: hidden; transition: opacity 0.45s, visibility 0s linear 0.45s; }
.dim.on { visibility: visible; transition: opacity 0.45s, visibility 0s; }
.cart { visibility: hidden; transition: transform 0.6s var(--ease-out), visibility 0s linear 0.6s; }
.cart.on { visibility: visible; transition: transform 0.6s var(--ease-out), visibility 0s; }
.mp { visibility: hidden; transition: transform 0.7s var(--ease-out), opacity 0.4s, visibility 0s linear 0.7s; }
.mp.on { visibility: visible; transition: transform 0.7s var(--ease-out), opacity 0.4s, visibility 0s; }
.mp-th { width: 56px; height: 56px; border-radius: 10px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: radial-gradient(closest-side, rgba(var(--pc), 0.3), transparent), #18181c; }
.mp-th img { width: 86%; height: 86%; object-fit: contain; }
.mp-t { min-width: 0; }
.mp-t b { display: block; font: 400 18px/1.1 var(--disp); text-transform: uppercase; }
.mp-t span { font: 500 10px/1 var(--mono); color: var(--mute); letter-spacing: 0.08em; }
.mp canvas { display: block; width: 100%; height: 26px; margin-top: 6px; }
.mp-c { display: flex; gap: 6px; }
.mp-c button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: background-color 0.2s, transform 0.3s var(--ease); }
.mp-c button:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.06); }
.mp-c button.main { background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
.mp-c svg { width: 14px; height: 14px; }
.mp-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.mp-bar i { position: absolute; inset: 0; background: rgb(var(--pc)); transform-origin: left; transform: scaleX(0); }

/* Equalizer-Balken (laeuft, solange ein Titel spielt) */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 2px; height: 100%; background: currentColor; transform-origin: bottom; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; } .eq i:nth-child(3) { animation-delay: -0.6s; } .eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

/* ---------- Trailer: ein Player, klein unten rechts oder gross in der Mitte (core.js gleitet per transform zwischen beiden) ---------- */
.vp { --pc: 255, 255, 255; position: fixed; z-index: 72; right: var(--gut); bottom: 20px; width: min(400px, calc(100vw - 2 * var(--gut))); border-radius: 16px; overflow: hidden; background: #0e0e11;
  border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(var(--pc), 0.14), 0 0 70px -24px rgba(var(--pc), 0.4);
  transform: translate3d(0, 30px, 0) scale(0.96); transform-origin: 100% 100%; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.55s var(--ease-out), opacity 0.3s ease, visibility 0s linear 0.55s; }
.vp.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.55s var(--ease-out), opacity 0.35s ease, visibility 0s; }
.vp.big { --bw: min(1180px, calc(100vw - 2 * var(--gut)), calc((100vh - 170px) * 16 / 9)); z-index: 130; width: var(--bw); right: calc((100vw - var(--bw)) / 2); bottom: calc((100vh - var(--bw) * 9 / 16 - 60px) / 2); border-radius: 18px; transform-origin: 50% 50%; }
.vp.jump, .vp.jump * { transition: none !important; }
.vp-f { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vp-f iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp-bar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 10px 10px 16px; }
.vp-t { flex: 1; min-width: 0; display: grid; gap: 6px; }
.vp-t b { font: 400 18px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.vp.big .vp-t b { font-size: 24px; }
.vp-t span { font: 500 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.vp-c { flex: none; display: flex; align-items: center; gap: 6px; }
.vp-go { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--fg); color: #0a0a0a; font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(var(--pc), 0.5), 0 8px 22px -10px rgba(var(--pc), 0.9); transition: transform 0.3s var(--ease); }
.vp-go[hidden] { display: none; }
.vp-go:hover { transform: translateY(-1px); }
.vp-go svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); } .vp-go:hover svg { transform: translateX(3px); }
.vp-c button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-2); border: 1px solid var(--line-2); transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease); }
.vp-c button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: scale(1.06); }
.vp-c svg { width: 15px; height: 15px; }
.vp .i-small, .vp.big .i-big { display: none; }
.vp.big .i-small { display: block; }
.vp-dim { position: fixed; inset: 0; z-index: 129; background: rgba(0, 0, 0, 0.88); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
html.vp-big .vp-dim { opacity: 1; pointer-events: auto; }
@media (max-width: 420px) { .vp-go { padding: 0 11px; letter-spacing: 0.12em; } .vp-bar { padding-left: 12px; gap: 8px; } }

/* ---------- Hinweis-Meldung ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 140; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 12px; background: #f3f1ec; color: #0a0a0a; font: 600 13px/1.4 var(--body); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: translate(-50%, 160%); transition: transform 0.6s var(--ease-out); }
.toast.on { transform: translate(-50%, 0); }

/* ---------- Intro (einmal pro Sitzung) ---------- */

@keyframes float { 50% { transform: translateY(-12px); } }

/* ---------- Fusszeile ---------- */
.ft { position: relative; overflow: hidden; margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.ft-logo { container-type: inline-size; padding: clamp(46px, 6vw, 86px) clamp(16px, 3vw, 44px) 0; text-align: center; }
/* Schriftzug ueber die volle Breite, metallisch; ein roter Lichtstreif wandert beim Scrollen hindurch (--sp aus core.js) */
/* Schriftzug: Metall, durch das beim Scrollen ein rotes Licht von links nach rechts zieht (ganz unten steht es rechts).
   Die Buchstaben gluehen auf und heben sich, wenn das Licht oder der Zeiger sie trifft; dazu ein anamorphotischer Lichtstreif. */
/* Innenabstand oben und unten (durch negativen Rand ausgeglichen), damit Buchstabenkoepfe und Leuchten nicht an der Kante
   der Maske enden: oben laeuft das Leuchten weich aus, unten blendet die Schrift aus wie bisher und das Leuchten danach */
.ft-word { --pt: 0.26em; --pb: 0.16em; position: relative; display: block; padding: var(--pt) 0 var(--pb); margin: calc(-1 * var(--pt)) 0 calc(-1 * var(--pb));
  font: 400 11.15cqi/0.84 var(--disp); letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  --m: linear-gradient(180deg, transparent 0, #000 calc(var(--pt) - 0.04em), #000 calc(var(--pt) + 0.84em * 0.62), rgba(0, 0, 0, 0.4) calc(var(--pt) + 0.84em), transparent 100%);
  -webkit-mask-image: var(--m); mask-image: var(--m); }
/* Jeder Buchstabe bekommt oben und unten 0,12em Luft: Glyphen ragen ueber die enge Zeilenhoehe hinaus, sonst wiederholt sich der Verlauf
   dort und zeichnet eine helle Haarlinie. Die Verlaufsstufen sind auf die hoehere Flaeche umgerechnet. */
.ft-word .fl { --g: 0; --w: 0; position: relative; display: inline-block; padding: 0.12em 0; margin: -0.12em 0; color: transparent; transform: translate3d(0, calc(max(var(--g), var(--w)) * -0.045em), 0);
  background: linear-gradient(180deg, #f3f1ec 11%, #a29e96 37.6%, #34333a 60.9%, #0f0f11 88.9%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ft-word .fl::after { content: attr(data-c); position: absolute; inset: 0; padding: 0.12em 0; opacity: var(--g);
  background: linear-gradient(180deg, #fff6f0 11%, rgb(255, 120, 100) 34.3%, rgb(var(--red)) 53.8%, #3a0806 88.9%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.06em rgba(var(--red), 0.9)) drop-shadow(0 0 0.22em rgba(var(--red), 0.45)); }
.ft-logo { position: relative; }
.ft-word .fl::before { content: attr(data-c); position: absolute; inset: 0; padding: 0.12em 0; opacity: var(--w);
  background: linear-gradient(180deg, #ffffff 11%, #fffaf2 40%, #e9e4da 60%, #a9a49a 88.9%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.05em rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.24em rgba(255, 244, 228, 0.55)); }
.ft-flare { position: absolute; z-index: 1; left: 0; top: var(--fy, 40%); width: 0; height: 0; font: 400 11.15cqi/1 var(--disp); pointer-events: none; transform: translate3d(var(--fx, -20vw), 0, 0); mix-blend-mode: screen; }
.ft-flare::before { content: ""; position: absolute; left: -9em; top: -0.012em; width: 18em; height: 0.024em; border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(var(--red), 0.55) 30%, rgba(255, 235, 225, 0.95) 50%, rgba(var(--red), 0.55) 70%, transparent); filter: blur(0.5px); }
.ft-flare::after { content: ""; position: absolute; left: -0.9em; top: -0.45em; width: 1.8em; height: 0.9em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 230, 0.75), rgba(var(--red), 0.35) 38%, transparent 72%); animation: ft-flick 3.2s ease-in-out infinite; }
@keyframes ft-flick { 0%, 100% { opacity: 0.85; transform: scale(1); } 40% { opacity: 1; transform: scale(1.08, 0.94); } 70% { opacity: 0.75; transform: scale(0.96, 1.04); } }
.ft-sub { display: block; margin-top: 18px; font: 500 11px var(--mono); letter-spacing: 0.42em; text-transform: uppercase; color: var(--mute); }
.ft-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 56px 0 40px; }
.ft-grid img { height: 42px; width: auto; margin-bottom: 18px; }
.ft-grid p { max-width: 30em; color: var(--mute); font-size: 14px; }
.ft-grid h4 { margin-bottom: 14px; font: 600 11px var(--body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-2); }
.ft-grid ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.ft-grid li a { color: var(--mute); font-size: 14px; transition: color 0.2s; }
.ft-grid li a:hover { color: #fff; }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 22px 0 34px; border-top: 1px solid var(--line); font: 500 11px var(--mono); color: var(--mute); letter-spacing: 0.06em; }

/* schmale Desktops/Tablets quer: Navigation bleibt einzeilig */
.hd-nav a { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1240px) {
  .hd-nav { gap: 16px; }
  .hd-nav a { letter-spacing: 0.13em; }
  .hd-login span { display: none; }
}
@media (max-width: 980px) {
  .hd-nav { display: none; }
  .hd-login span { display: none; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  :root { --head-h: 64px; }
  .hd-logo img { height: 28px; }
  .hd-cart .lbl { display: none; }
  .ft-grid { grid-template-columns: 1fr; }
  .mp { bottom: 12px; }
}

/* ---------- Freebie- und Newsletter-Formular ---------- */
.btn--red { background: rgb(var(--red)); color: #fff; box-shadow: 0 10px 34px -10px rgba(var(--red), 0.6); }
.ff, .nl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ff[hidden], .nl[hidden] { display: none; }
.ff-h { display: flex; align-items: center; gap: 14px; }
.ff-h img { width: 46px; height: auto; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); }
.ff-h span { font: 500 13px/1.3 var(--body); color: var(--fg-2); }
.ff-h b { display: block; font: 400 26px/1 var(--disp); letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); }
.ff-x { flex: none; margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-2); }
.ff-x svg { width: 15px; height: 15px; }
.ff-x:hover { background: var(--fg); color: #0a0a0a; }
.ff-t { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.nl-h { font: 700 11px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); }
.ff-row { display: flex; gap: 8px; }
.ff-row input { flex: 1; width: 0; min-width: 0; height: 54px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.55); color: #fff; font: 500 15px var(--body); }
.ff-row input:focus { outline: none; border-color: rgb(var(--acc, var(--red))); box-shadow: 0 0 0 3px rgba(var(--acc, var(--red)), 0.18); }
.ff-row .btn { min-height: 54px; flex: none; }
.ff-row .btn:disabled { opacity: 0.6; cursor: wait; }
.ff-row + .ff-row { margin-top: 8px; }
.ff-new { margin: 14px 0 0; font: 500 13.5px/1.5 var(--body); color: var(--fg-2); }
.ff-new a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.ff-g { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 2px; font: 600 13.5px var(--body); color: var(--fg); text-decoration: none; }
.ff-g:hover { text-decoration: underline; }
.ff-ok .ff-go { justify-self: start; margin-top: 6px; }
.ff-news { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
.ff-news input { width: 16px; height: 16px; accent-color: rgb(var(--acc, var(--red))); }
.ff-msg:empty { display: none; }
.mail-fix { margin: 8px 0 0; font: 500 13px/1.5 var(--body); color: var(--fg-2); }
.mail-fix button { padding: 0; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fld .mail-fix { margin: 0; }
.ff-msg { font: 500 13px/1.5 var(--body); color: var(--fg-2); }
.ff-msg.err { color: #ff8f80; }
.ff.done :is(.ff-t, .ff-row, .ff-news), .nl.done .ff-row, .nl.done .ff-t { display: none; }
.ff-ok { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid rgba(var(--acc, var(--red)), 0.5); border-radius: 14px; background: rgba(var(--acc, var(--red)), 0.1); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.ff-ok b { font-size: 15px; color: var(--fg); }
.ff-test { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-2); font: 500 12px/1.5 var(--mono); color: var(--mute); }
.ff-test a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .ff-row { flex-direction: column; } .ff-row input { flex: none; width: 100%; } .ff-row .btn { width: 100%; } }

/* ---------- Einwilligung: Cookies / Meta Pixel (Logik in track.js) ----------
   Kleine Karte unten mittig (12.11.: links wirkte sie verrutscht), im Testbetrieb direkt ueber dem Testhinweis; bei schmalem Fenster weicht der Mini-Player nach oben aus (--cc-h misst track.js).
   Unter dem Warenkorb (z 80 < .dim 90), am Handy ueber der Kaufleiste der Produktseite. */
:root { --cc-b: 14px; }
:root:has(.testbadge) { --cc-b: 48px; }
.cc { position: fixed; z-index: 80; left: 0; right: 0; margin: 0 auto; bottom: var(--cc-b); width: min(430px, calc(100vw - 28px)); padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(14, 14, 17, 0.98); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
  transform: translateY(24px); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.35s, bottom 0.45s var(--ease-out); }
.cc.on { transform: none; opacity: 1; }
.cc[hidden] { display: none; }
.cc-h { font: 600 11px/1 var(--body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg); }
.cc-t { margin-top: 10px; font: 400 13px/1.55 var(--body); color: var(--fg-2); }
.cc-t a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cc-t a:hover { color: #fff; }
.cc-now:empty { display: none; }
.cc-now { margin-top: 8px; font: 500 11px/1.4 var(--mono); color: var(--mute); }
/* Zwei gleichwertige Knoepfe: gleiche Groesse, gleiche Farbe, nichts vorausgewaehlt */
.cc-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cc-btn { padding: 0 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--fg); letter-spacing: 0.16em; }
.cc-btn:hover { background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
@media (max-width: 720px) {
  :root { --cc-b: calc(8px + env(safe-area-inset-bottom)); }
  :root:has(.testbadge) { --cc-b: calc(28px + env(safe-area-inset-bottom)); }
  :root:has(.buybar.on) { --cc-b: 84px; }
  .cc { left: 8px; right: 8px; width: auto; padding: 13px 14px 14px; border-radius: 14px; }
  .cc-t { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .cc-b { margin-top: 12px; }
}
@media (max-width: 900px) { html.cc-on body .mp.on, html.cc-on body .vp.on:not(.big) { bottom: calc(var(--cc-b) + var(--cc-h, 0px) + 10px); } }

/* Bot-Schutz (Turnstile): meist leer; braucht Cloudflare eine Bestaetigung, steht hier das Kaestchen */
.cf-box { min-height: 0; margin: 2px 0; }
.cf-box:empty { display: none; }