/* OUTPLAY · Shop „DROP 01“. Marketing-Flächen eckig, Formular und Overlays im gleichen Raster.
   Grundlayout ohne JavaScript; html.fx schaltet Einflug, Sonar und Neigung frei. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- A · Einflug DROP 01 ---------- */
.drop-pin { position: relative; height: 100svh; overflow: hidden; background: #171314; color: #FFF5EF; }
.drop-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.drop-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-fill { fill: #171314; }
.dm-text { fill: #000; font-family: var(--op-font-display); font-weight: 900; letter-spacing: -0.02em; }
.drop-eyebrow { position: absolute; left: var(--gutter); top: calc(var(--leiste-h) + 18px); color: #CDBBB5; z-index: 3; }
.drop-count { position: absolute; left: var(--gutter); bottom: var(--gutter); z-index: 3; font: 900 clamp(1.6rem, 3.4vw, 3.2rem)/1 var(--op-font-display); letter-spacing: -0.01em; text-transform: uppercase; color: #FFF5EF; }
.drop-tapes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.drop-tape { position: absolute; left: -20%; width: 140%; overflow: hidden; background: var(--op-brand); color: #FFF8F3; font: 900 clamp(1.1rem, 2vw, 1.8rem)/1 var(--op-font-display); letter-spacing: .02em; white-space: nowrap; padding: .45em 0; }
.drop-tape > span { display: inline-block; animation: tape-run 18s linear infinite; }
.drop-tape--a { top: 28%; transform: rotate(-9deg); }
.drop-tape--b { top: 62%; transform: rotate(7deg); }
.drop-tape--b > span { animation-direction: reverse; animation-duration: 22s; }
@keyframes tape-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- B · Shop-Wand ---------- */
.shop-wall { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(80px, 10vw, 140px); }
.shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px 48px; margin-bottom: clamp(32px, 5vw, 64px); }
.shop-headline { display: grid; gap: 18px; }
.shop-title { font: 900 var(--fs-h1)/0.84 var(--op-font-display); letter-spacing: -0.025em; text-transform: uppercase; color: var(--op-brand-display); }
.shop-tools { display: grid; gap: 14px; justify-items: end; }
.shop-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-c); font: 600 .78rem/1 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s, color .2s, border-color .2s; }
.chip-btn:hover { border-color: currentColor; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.shop-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(16px, 2.2vw, 32px); perspective: 1400px; }
.sonar { position: absolute; inset: -12% -6%; width: 112%; height: 124%; pointer-events: none; z-index: 6; }
.karte { position: relative; display: grid; gap: 14px; transform-style: preserve-3d; will-change: transform; }
.karte[hidden] { display: none; }
.karte-link { display: block; text-decoration: none; color: inherit; }
.karte-bild { position: relative; display: block; aspect-ratio: 960 / 1192; overflow: hidden; background-color: var(--op-line); background-size: cover; background-position: center; }
.karte[data-id="powerbank"] .karte-bild { aspect-ratio: 960 / 1192; }
.kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kb-a { opacity: 0; transition: opacity .5s ease, transform .9s var(--ease-out); }
.kb-a.is-loaded { opacity: 1; }
.kb-b { clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .7s var(--ease-out); }
.karte.is-flip .kb-b { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.karte-link:hover .kb-a { transform: scale(1.03); }
/* Ladezustand: Radar-Sweep bis das Bild da ist */
.karte-bild::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0 82%, color-mix(in srgb, var(--op-brand) 30%, transparent) 96%, transparent 100%); animation: radar 1.4s linear infinite; pointer-events: none; }
.karte-bild.is-loaded::after { opacity: 0; animation: none; transition: opacity .3s; }
@keyframes radar { to { transform: rotate(1turn); } }
.karte-tape { position: absolute; left: -12%; width: 124%; bottom: 16%; transform: rotate(-6deg); background: var(--op-brand); color: #FFF8F3; overflow: hidden; white-space: nowrap; font: 900 clamp(.95rem, 1.4vw, 1.2rem)/1 var(--op-font-display); letter-spacing: .03em; padding: .5em 0; z-index: 2; transition: transform .5s var(--ease-out); }
.karte-tape > span { display: inline-block; animation: tape-run 14s linear infinite; }
.karte:nth-child(even) .karte-tape > span { animation-direction: reverse; }
.karte-link:hover .karte-tape { transform: rotate(-6deg) translateY(12px); }
.karte-stempel { position: absolute; top: 16px; left: 16px; z-index: 3; padding: 6px 12px 5px; border: 3px solid var(--op-brand); background: color-mix(in srgb, #FFFFFF 88%, transparent); color: var(--op-brand); font: 900 clamp(1.2rem, 1.9vw, 1.7rem)/1 var(--op-font-display); letter-spacing: .01em; text-transform: uppercase; transform: rotate(-8deg); transform-origin: 0 0; }
.karte-info { display: grid; gap: 8px; }
.karte-name { font: 900 clamp(1.8rem, 2.6vw, 2.6rem)/0.9 var(--op-font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.karte-tag { color: var(--fg-muted); }
.karte-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 2px; }
.karte-status { font: 600 .74rem/1.3 var(--op-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--op-brand-ink); }
.karte-swatches { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-c); transition: box-shadow .2s, transform .25s var(--op-ease-spring); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.swatch:hover { transform: scale(1.12); }
.karte-ping { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; margin-top: 4px; background: var(--ink); color: var(--paper); font: 600 1rem/1 var(--op-font-body); text-align: left; overflow: hidden; transition: background-color .2s; }
.karte-ping:hover { background: var(--op-brand); color: #fff; }
.kp-ping { width: 12px; height: 12px; display: grid; place-items: center; }
.kp-ping .op-ping { width: 10px; height: 10px; color: currentColor; }
.kp-done { display: none; }
.karte.is-pinged .kp-txt { display: none; }
.karte.is-pinged .kp-done { display: inline; }
.karte.is-pinged .karte-ping { background: var(--op-brand); color: #fff; }
/* Powerbank: Akku */
.akku { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #171314; color: #FFF5EF; font: 600 .72rem/1 var(--op-font-mono); }
.akku-bar { position: relative; width: 38px; height: 16px; border: 2px solid currentColor; border-radius: 3px; }
.akku-bar::after { content: ""; position: absolute; right: -5px; top: 3px; width: 3px; height: 6px; background: currentColor; }
.akku-bar i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: calc((100% - 2px) * var(--lvl, 0)); background: var(--op-brand); }
.akku.is-full .akku-bar i { background: #FFF5EF; }
/* Jogger: Lupe */
.karte-lupe { position: absolute; z-index: 4; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; border: 2px solid var(--op-brand); background-repeat: no-repeat; background-color: var(--op-line); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--op-ease-spring); }
.karte.is-lupe .karte-lupe { opacity: 1; transform: scale(1); }

/* ---------- D · Produktseite ---------- */
.produkt { position: fixed; inset: 0; z-index: 150; background: var(--paper); color: var(--ink); }
.produkt[hidden] { display: none; }
.pd-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
.pd-galerie { display: grid; gap: 4px; padding-left: 76px; }
.pd-fig { position: relative; margin: 0; overflow: hidden; background-color: var(--op-line); background-size: cover; background-position: center; cursor: zoom-in; }
.pd-fig img { display: block; width: 100%; height: auto; transform: scale(1.08) translateY(var(--py, 0px)); opacity: 0; transition: opacity .5s ease; will-change: transform; }
.pd-fig img.is-loaded { opacity: 1; }
.pd-fig::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0 82%, color-mix(in srgb, var(--op-brand) 30%, transparent) 96%, transparent 100%); animation: radar 1.4s linear infinite; pointer-events: none; }
.pd-fig.is-loaded::after { opacity: 0; animation: none; }
.pd-fig--hero .pd-swap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); clip-path: circle(0% at var(--sx, 50%) var(--sy, 50%)); opacity: 1; }
.pd-flip { position: relative; height: 280vh; }
.pd-flip-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--op-line); }
.pd-flip-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: none; }
.pd-flip-inner img.is-on { opacity: 1; }
.pd-flip-cap { position: absolute; left: 24px; bottom: 24px; z-index: 2; font: 900 clamp(2rem, 4vw, 4rem)/0.9 var(--op-font-display); text-transform: uppercase; letter-spacing: -0.02em; color: #FFF5EF; mix-blend-mode: normal; text-shadow: none; background: var(--op-brand); padding: .15em .3em .1em; }
.pd-flip-steps { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 6px; }
.pd-flip-steps i { width: 28px; height: 4px; background: rgba(255,255,255,.5); }
.pd-flip-steps i.is-on { background: var(--op-brand); }
.pd-info { position: sticky; top: 0; align-self: start; min-height: 100vh; padding: calc(var(--gutter) + 6px) var(--gutter) var(--gutter) clamp(24px, 3vw, 48px); display: grid; align-content: start; gap: 18px; }
.pd-top { display: flex; justify-content: space-between; align-items: center; }
.pd-close { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-c); font: 400 30px/1 var(--op-font-body); transition: background-color .2s, transform .3s var(--op-ease-spring); }
.pd-close:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); }
.pd-name { font: 900 clamp(3rem, 5.6vw, 6.4rem)/0.84 var(--op-font-display); text-transform: uppercase; letter-spacing: -0.03em; }
.pd-tag { font: 650 var(--fs-lead)/1.3 var(--op-font-body); }
.pd-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); }
.pd-soldout { font: 900 clamp(2.4rem, 4vw, 3.8rem)/0.9 var(--op-font-display); text-transform: uppercase; color: var(--op-brand-display); }
.pd-preis { font: 600 .78rem/1.2 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--op-muted); }
.pd-varianten { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-var { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 10px; border: 1px solid var(--line-c); font: 600 .9rem/1 var(--op-font-body); }
.pd-var .swatch { width: 22px; height: 22px; pointer-events: none; }
.pd-var[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pd-sizes { display: grid; gap: 8px; }
.pd-size-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-size { min-width: 52px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line-c); color: var(--op-muted); font: 600 .85rem/1 var(--op-font-mono); position: relative; overflow: hidden; }
.pd-size::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 1.5px; background: var(--op-brand); transform: rotate(-24deg) scaleX(var(--strike, 1)); transform-origin: 0 50%; }
.pd-sizes .eyebrow { color: var(--op-muted); }
.pd-text { color: var(--fg-muted, var(--op-muted)); max-width: 52ch; }
.pd-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-c); }
.pd-navbtn { width: 52px; height: 52px; border: 1px solid var(--line-c); font: 600 20px/1 var(--op-font-body); transition: background-color .2s; }
.pd-navbtn:hover { background: var(--ink); color: var(--paper); }
.pd-pos { font: 600 .8rem/1 var(--op-font-mono); letter-spacing: .1em; }
.pd-film { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: 6px; max-height: 80vh; overflow: hidden; }
.pd-film button { width: 44px; height: 55px; padding: 0; background-size: cover; background-position: center; border: 2px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
.pd-film button.is-on { opacity: 1; border-color: var(--op-brand); }
.pd-zoom { position: fixed; inset: 0; z-index: 3; background: #171314; overflow: hidden; cursor: zoom-out; }
.pd-zoom[hidden] { display: none; }
.pd-zoom-img { position: absolute; left: 50%; top: 50%; width: auto; height: 180vh; max-width: none; transform: translate(-50%, -50%); }
.pd-zoom-close { position: absolute; top: 16px; right: 16px; color: #FFF5EF; border-color: rgba(255,255,255,.3); }

/* Übergang Karte → Produktseite */
::view-transition-group(pd-hero) { animation-duration: .62s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- Sheets: Schnell-Ping und Ping-Liste ---------- */
.sheet { position: fixed; inset: 0; z-index: 160; }
.sheet[hidden] { display: none; }
.sheet-back { position: absolute; inset: 0; background: rgb(23 19 20 / .55); }
.sheet-panel { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); max-height: 92svh; overflow-y: auto; transform: translateX(-50%); background: var(--paper); color: var(--ink); padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 18px; border-top: 4px solid var(--op-brand); }
.sheet--side .sheet-panel { left: auto; right: 0; top: 0; bottom: 0; width: min(420px, 100%); max-height: none; transform: none; border-top: 0; border-left: 4px solid var(--op-brand); align-content: start; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-prod { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.sheet-img { width: 96px; height: auto; aspect-ratio: 960 / 1192; object-fit: cover; background: var(--op-line); }
.sheet-title { font: 900 clamp(1.8rem, 3vw, 2.4rem)/0.9 var(--op-font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.sheet-tag { color: var(--op-muted); margin-top: 6px; }
.pl-title { font: 900 2.2rem/0.9 var(--op-font-display); text-transform: uppercase; }
.pl-list { display: grid; gap: 10px; }
.pl-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-c); }
.pl-item img { width: 64px; height: 80px; object-fit: cover; background: var(--op-line); }
.pl-item a { font: 900 1.4rem/0.95 var(--op-font-display); text-transform: uppercase; text-decoration: none; }
.pl-item button { font: 600 .7rem/1 var(--op-font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px; border: 1px solid var(--line-c); }
.pl-empty, .pl-note { color: var(--op-muted); font-size: .92rem; }
.pl-note { font: 600 .7rem/1.4 var(--op-font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- E · Formular „Ping mich“ ---------- */
.notify { position: relative; display: grid; gap: 16px; padding: 22px; background: var(--op-surface); color: var(--op-ink); border: 1px solid var(--line-c); }
.notify-title { font: 900 clamp(1.7rem, 2.6vw, 2.3rem)/0.92 var(--op-font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.notify-preview { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 10px; border: 1px dashed var(--op-brand-ink); color: var(--op-brand-ink); font: 600 .68rem/1.2 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.notify-preview[hidden] { display: none; }
.np-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nf-field { position: relative; display: grid; gap: 6px; }
.nf-label { font: 600 .7rem/1 var(--op-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--op-muted); }
.nf-email { width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 2px solid var(--op-line); background: transparent; color: inherit; font: 500 1.2rem/1.2 var(--op-font-body); outline: none; border-radius: 0; }
.nf-email::placeholder { color: color-mix(in srgb, var(--op-muted) 70%, transparent); }
.nf-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--op-brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.nf-email:focus ~ .nf-line, .nf-field.is-valid .nf-line { transform: scaleX(1); }
.nf-field.is-valid .nf-line { background: var(--ink); }
.nf-field.is-bad .nf-line { transform: scaleX(1); background: var(--op-danger); }
.nf-sizes { display: grid; gap: 8px; }
.nf-sizes[hidden] { display: none; }
.nf-size-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-size { min-width: 46px; min-height: 40px; padding: 0 10px; border: 1px solid var(--op-line); font: 600 .78rem/1 var(--op-font-mono); }
.nf-size[aria-checked="true"] { background: var(--op-ink); color: var(--op-surface); border-color: var(--op-ink); }
.nf-consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .9rem; line-height: 1.45; color: var(--op-muted); cursor: pointer; }
.nf-check { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.nf-box { width: 24px; height: 24px; border: 2px solid var(--op-ink); display: grid; place-items: center; transition: background-color .2s; }
.nf-check:checked + .nf-box { background: var(--op-brand); border-color: var(--op-brand); }
.nf-check:checked + .nf-box::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.nf-check:focus-visible + .nf-box { outline: 3px solid var(--op-brand); outline-offset: 2px; }
.nf-consent.is-bad .nf-box { border-color: var(--op-danger); }
.nf-privacy { text-decoration: underline; text-underline-offset: 3px; }
.nf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nf-msg { min-height: 1.3em; font-size: .9rem; color: var(--op-danger); }
.nf-btn { position: relative; justify-self: start; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 0 22px; background: var(--op-brand); color: #fff; font: 600 17px/1 var(--op-font-body); overflow: hidden; transition: width .45s var(--ease-out), border-radius .45s var(--ease-out), background-color .2s; }
.nf-btn:hover { background: #A52420; }
.nf-btn-ping { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.nf-btn-ping .op-ping { color: #fff; width: 12px; height: 12px; }
.notify[data-state="loading"] .nf-btn { width: 58px; border-radius: 50%; pointer-events: none; }
.notify[data-state="loading"] .nf-btn-txt { opacity: 0; }
.notify[data-state="loading"] .nf-btn-ping { opacity: 1; }
.nf-ok { display: none; justify-items: start; gap: 10px; }
.nf-ok-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
.nfr-zone { fill: none; stroke: var(--op-brand); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); }
.nfr-dot { fill: var(--op-brand); transform-origin: 60px 60px; transform: scale(0); transition: transform .5s var(--op-ease-spring) .5s; }
.nf-ok-title { font: 900 2.4rem/0.9 var(--op-font-display); letter-spacing: -0.02em; color: var(--op-brand-display); }
.nf-ok-text { color: var(--op-muted); }
.notify[data-state="ok"] > :not(.nf-ok):not(.notify-preview) { display: none; }
.notify[data-state="ok"] .nf-ok { display: grid; }
.notify[data-state="ok"].is-drawn .nfr-zone { stroke-dashoffset: 0; }
.notify[data-state="ok"].is-drawn .nfr-dot { transform: scale(1); }

/* ---------- Leiste: Ping-Liste ---------- */
.ctrl-pings { gap: 6px; }
.cp-icon { width: 12px; height: 12px; display: grid; place-items: center; }
.cp-icon .op-ping { width: 9px; height: 9px; color: var(--op-brand); }
[data-tone="red"] .cp-icon .op-ping { color: var(--on-red); }
.cp-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--op-brand); color: #fff; font: 700 .72rem/20px var(--op-font-mono); text-align: center; }
[data-tone="red"] .cp-count { background: var(--on-red); color: var(--op-brand); }
.leiste.no-timer .lr-timer { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 1099px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .pd-scroll { display: block; }
  .pd-galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-left: 0; gap: 0; }
  .pd-fig { flex: 0 0 88%; scroll-snap-align: start; }
  .pd-flip { flex: 0 0 88%; height: auto; scroll-snap-align: start; }
  .pd-flip-inner { position: relative; height: 100%; aspect-ratio: 960 / 1192; }
  .pd-film { display: none; }
  .pd-info { position: relative; min-height: 0; padding-top: 22px; }
  .pd-close { position: relative; }
  .produkt .pd-top { position: sticky; top: 0; }
  .shop-tools { justify-items: start; }
  .leiste .ctrl-theme { display: none; }
}
@media (max-width: 599px) { .shop-grid { grid-template-columns: 1fr; } }

/* ---------- Bewegung reduzieren ---------- */
html.rm .drop-tape > span, html.rm .karte-tape > span, html.rm .karte-bild::after, html.rm .pd-fig::after { animation: none !important; }
html.rm .kb-b, html.rm .nf-btn, html.rm .nfr-zone, html.rm .nfr-dot { transition: none !important; }
html.rm .pd-fig img { transform: none; }

/* Leiste über dem immer dunklen Einflug */
[data-tone="night"] { --bg: #171314; --fg: #FFF5EF; --fg-muted: rgb(255 245 239 / .72); --accent: #FF6B5E; --line-c: rgb(255 245 239 / .18); }
.leiste.no-timer .lr-mode, .leiste.no-timer .lr-sep { display: none; }

@media (max-width: 899px) { .pd-name { font-size: clamp(2.4rem, 12vw, 4.2rem); overflow-wrap: anywhere; } .sheet-title { overflow-wrap: anywhere; } }

/* ---------- Header: Shop-Link und Menü-Knopf ---------- */
.ctrl-shop { gap: 8px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; font: 650 .78rem/1 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-brand); }
[data-tone="red"] .cs-dot { background: var(--on-red); }
.ctrl-shop:hover { background: var(--op-brand); border-color: var(--op-brand); color: #fff; }
.ctrl-shop:hover .cs-dot { background: #fff; }
.ctrl-shop.is-here { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ctrl-menu { gap: 10px; padding: 0 14px; font: 650 .78rem/1 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.cm-lines { position: relative; width: 22px; height: 12px; display: block; }
.cm-lines i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s var(--ease-out); }
.cm-lines i:first-child { top: 0; } .cm-lines i:last-child { bottom: 0; right: 6px; }
.ctrl-menu:hover .cm-lines i:last-child { right: 0; }

/* ---------- Vollbild-Menü ---------- */
.menu { position: fixed; inset: 0; z-index: 170; background: #171314; color: #FFF5EF; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu-inner { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 18px clamp(24px, 4vw, 72px); padding: calc(var(--gutter) * .6) var(--gutter) var(--gutter); }
.menu-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.menu-eyebrow { color: #CDBBB5; }
.menu-x { color: #FFF5EF; border-color: rgb(255 245 239 / .3); }
.menu-x:hover { background: #FFF5EF; color: #171314; }
.menu-nav { align-self: center; }
.menu-list { display: grid; }
.menu-link { position: relative; display: grid; grid-template-columns: 3.4ch minmax(0, auto) 1fr; align-items: baseline; gap: 0 18px; padding: .12em 0; color: inherit; text-decoration: none; border-bottom: 1px solid rgb(255 245 239 / .1); overflow: hidden; }
.menu-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--op-brand); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease-out); z-index: 0; }
.menu-link > * { position: relative; z-index: 1; }
.ml-num { font: 600 .8rem/1 var(--op-font-mono); letter-spacing: .1em; color: #CDBBB5; transition: color .2s; }
.ml-name { font: 900 clamp(2.6rem, 6.4vw, 6.6rem)/0.92 var(--op-font-display); letter-spacing: -0.025em; text-transform: uppercase; transition: transform .45s var(--ease-out); }
.menu-link:hover::before, .menu-link:focus-visible::before { transform: scaleY(1); }
.menu-link:hover .ml-name, .menu-link:focus-visible .ml-name { transform: translateX(18px); }
.menu-link:hover .ml-num, .menu-link:focus-visible .ml-num { color: #FFF5EF; }
.menu-link:focus-visible { outline-color: #FFF5EF; }
.ml-chip { justify-self: start; align-self: center; padding: 6px 10px; border: 2px solid var(--op-brand); color: #FFF5EF; background: var(--op-brand); font: 900 1rem/1 var(--op-font-display); letter-spacing: .02em; transform: rotate(-4deg); }
.menu-link--shop:hover .ml-chip { background: #171314; border-color: #171314; }
.ml-here { display: none; justify-self: end; align-self: center; align-items: center; gap: 8px; font: 600 .66rem/1 var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; color: #CDBBB5; }
.ml-here .op-ping { width: 8px; height: 8px; color: var(--op-brand); }
.menu-link.is-here .ml-here { display: inline-flex; }
.menu-link--shop .ml-here { grid-column: 3; }
.menu-side { align-self: center; justify-self: end; width: min(100%, 360px); }
.menu-preview { position: relative; aspect-ratio: 800 / 1100; overflow: hidden; background: #261F20; }
.menu-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.menu-preview .mp-b { clip-path: circle(0% at 50% 50%); }
.menu-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-foot .fuss-btn { color: #FFF5EF; border-color: rgb(255 245 239 / .25); }
.menu-foot .fuss-btn:hover { border-color: #FFF5EF; }
.menu-foot .cp-icon .op-ping { color: var(--op-brand); }
@media (max-width: 899px) {
  .menu-inner { grid-template-columns: 1fr; }
  .menu-side { display: none; }
  .ml-name { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .menu-link { grid-template-columns: 3ch 1fr; }
  .ml-chip, .ml-here { grid-column: 2; justify-self: start; margin: 4px 0 8px; }
  .leiste .ctrl-lang { display: none; }
  .ctrl-menu .cm-txt { display: none; }
  .ctrl-shop { padding: 0 10px; }
}
html.rm .menu-link::before, html.rm .ml-name { transition: none; }

@media (max-width: 899px) {
  .leiste:not(.is-runde) .leiste-runde { display: none; }
  .leiste:not(.is-runde) { grid-template-columns: auto 1fr; }
  .leiste-ctrl { gap: 2px; }
  .ctrl-shop { padding: 0 9px; gap: 6px; }
  .ctrl-pings { padding: 0 6px; }
}

.menu-inner { grid-template-columns: 1fr; }