/* erzeugt von build.mjs (showCss) – nicht von Hand bearbeiten */
/* ================= Produktseite (Vorlage, Thema ueber --acc/--hi/--lo/--alt/--t-disp) =================
   Aufbau und Bewegung nach der UNTAMED-Seite (rtsb-untamed-blocks), verallgemeinert fuer alle Libraries. */
.sh-s, .sh-s body { background: var(--t-bg); }
.sh-s .kick { color: rgb(var(--acc)); font-family: var(--t-ui); font-size: calc(11px * var(--t-uis, 1)); }
.sh-s .kick::before { box-shadow: 0 0 10px rgb(var(--acc)); }
.sh-s .hd.solid { background: color-mix(in srgb, var(--t-bg) 88%, transparent); }
.sh-s .hd-nav a::after { background: rgb(var(--acc)); }
.sh-s .hd-cart.has .n { background: rgb(var(--acc)); color: #050505; }
.sh-s ::selection { background: rgb(var(--acc)); color: #050505; }
.p-title { font: var(--t-w, 900) clamp(30px, 4.4vw, 58px)/1.06 var(--t-disp); letter-spacing: 0.02em; text-transform: uppercase; margin-top: 16px; }
.sh-s[data-w="400"] .p-title { font-weight: 400; letter-spacing: 0.01em; font-size: clamp(38px, 5.2vw, 72px); line-height: 0.95; }
.p-title.wide { max-width: 16em; }
.p-title em { font-style: normal; color: rgb(var(--acc)); text-shadow: 0 0 0.3em rgba(var(--acc), 0.45); }
.p-title.big { font-size: clamp(34px, 6.4vw, 84px); }

/* ---------- Schrift-Effekt je Thema ---------- */
.fxt { position: relative; display: inline-block; }
.fxt { background: linear-gradient(180deg, #fff 35%, rgb(var(--hi)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Bildstoerung: zwei versetzte Kopien blitzen kurz auf */
.ph-t .fxt::before, .ph-t .fxt::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; -webkit-text-fill-color: currentColor; }
/* Ausschnitte stehen fest (clip-path animiert lief bei jedem Bild auf dem Hauptthread, auf 21 Seiten endlos); bewegt werden nur
   Deckkraft und Versatz – das macht die GPU */
.ph-t .fxt::before { color: rgb(var(--alt)); clip-path: inset(12% 0 58% 0); animation: split 7s steps(1) 2.4s infinite; }
.ph-t .fxt::after { color: rgb(var(--hi)); clip-path: inset(56% 0 10% 0); animation: split2 7s steps(1) 2.4s infinite; }
@keyframes split { 0%, 92%, 100% { opacity: 0; transform: none } 93% { opacity: 0.85; transform: translate(-0.03em, 0) } 95% { opacity: 0.85; transform: translate(0.025em, 0) } 97% { opacity: 0.6; transform: translate(-0.015em, 0) } }
@keyframes split2 { 0%, 92%, 100% { opacity: 0; transform: none } 94% { opacity: 0.7; transform: translate(0.03em, 0) } 96% { opacity: 0.7; transform: translate(-0.02em, 0) } }

/* ---------- Hero ---------- */
.ph { position: relative; overflow: hidden; isolation: isolate; min-height: min(100svh, 980px); display: flex; align-items: center; padding: calc(var(--head-h) + clamp(30px, 6vw, 80px)) 0 clamp(70px, 9vw, 120px); }
.ph-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; opacity: 0.6; transform: scale(1.06); animation: drift 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
/* Handy und Tablet: Hintergrund steht still. Die Dauer-Animation machte ihn zur eigenen Ebene, und alles darueber (Bilder, Wand,
   Overlays) musste ebenfalls eine bekommen – zu viel Grafikspeicher, Teile fehlten beim Zeichnen (13.11.2026). Am PC bleibt sie. */
@media (pointer: coarse), (max-width: 1024px) { .ph-bg { animation: none; will-change: auto; }
  /* Glitch-Kopien des Titels (versetzte Farbstreifen) flackerten am Handy und kosteten je zwei Ebenen */
  .ph-t .fxt::before, .ph-t .fxt::after { display: none; } }
.ph-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, color-mix(in srgb, var(--t-bg) 94%, transparent) 0%, color-mix(in srgb, var(--t-bg) 62%, transparent) 50%, color-mix(in srgb, var(--t-bg) 25%, transparent) 100%),
  radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in srgb, var(--t-bg) 94%, transparent) 100%); }
/* Machina: HUD-Raster + wandernder Scanbalken */
@keyframes sweep { to { transform: translateY(calc(100vh + 240px)); } }
.sh-s[data-w="400"] .ph-bg { opacity: 0.95; filter: saturate(1.2); }
.sh-s[data-w="400"] .ph-fx { background:
  radial-gradient(45% 60% at 72% 52%, rgba(var(--acc), 0.22), transparent 70%),
  linear-gradient(90deg, color-mix(in srgb, var(--t-bg) 92%, transparent) 0%, color-mix(in srgb, var(--t-bg) 55%, transparent) 46%, transparent 100%),
  linear-gradient(0deg, var(--t-bg) 0%, transparent 30%); }
.ph-dust { --pc: var(--acc); z-index: -1; }
/* Reihenfolge beim Laden: Hintergrund blendet mit dem Cover ein (.ready), Effekte erst danach (.fx-on). Exit-Tore sind selbst die Einblendung. */
.ph .ph-bg { transition: opacity 1.4s var(--ease); }
.ph:not(.ready) .ph-bg { opacity: 0 !important; }
.ph > .st-dust, .ph > [class^="fx-"]:not(.fx-doors) { transition: opacity 1.3s var(--ease); }
.ph:not(.fx-on) > .st-dust, .ph:not(.fx-on) > [class^="fx-"]:not(.fx-doors):not(.fx-vault) { opacity: 0 !important; }
.ph-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ph-copy { container-type: inline-size; min-width: 0; }
.ph-copy .kick a { transition: color 0.2s; } .ph-copy .kick a:hover { color: #fff; }
.ph-t { margin-top: 22px; font: var(--t-w, 900) clamp(56px, 16.6cqi, 170px)/0.95 var(--t-disp); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.ph-t.long { font-size: clamp(44px, 11.5cqi, 130px); white-space: normal; }
.sh-s[data-w="400"] .ph-t { font-weight: 400; line-height: 0.88; }
.ph-s { margin-top: 0.55em; font: 700 clamp(13px, 3cqi, 22px)/1 var(--t-disp); letter-spacing: 0.62em; text-transform: uppercase; color: var(--fg); }
.sh-s[data-w="400"] .ph-s { font-family: var(--body); font-weight: 600; letter-spacing: 0.5em; }
.ph-l { margin-top: 30px; max-width: 32em; font-family: var(--t-txt); font-size: calc(clamp(16px, 1.4vw, 18px) * var(--t-ts, 1)); line-height: 1.65; color: color-mix(in srgb, var(--fg) 62%, transparent); }
.ph-l strong { color: var(--fg); font-weight: 600; }
.ph-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.ph-buy .price { margin-right: 10px; }
.ph-buy .price b { font-size: 46px; }
.ph-buy .price s, .pe-act .price s { font-size: 16px; }
.ph-buy .price .off, .pe-act .price .off { height: 25px; padding: 0 9px; font-size: 13px; }
.ph-listen { width: 54px; height: 54px; color: rgb(var(--acc)); border-color: rgba(var(--acc), 0.45); }
.ph-listen:hover, .ph-listen.is-on { background: rgb(var(--acc)); border-color: rgb(var(--acc)); color: #050505; }
.ph-listen.is-on { box-shadow: 0 0 0 6px rgba(var(--acc), 0.18), 0 0 30px rgba(var(--acc), 0.5); }
.sh-s .btn--acc { font-family: var(--t-disp); }
.sh-s .btn--ghost { color: rgb(var(--acc)); border-color: rgba(var(--acc), 0.45); background: rgba(var(--acc), 0.04); }
.sh-s .btn--ghost:hover { background: rgba(var(--acc), 0.12); border-color: rgb(var(--acc)); }
.ph-meta { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 40px; padding: 0; list-style: none; }
.ph-meta li { display: flex; align-items: center; font: 600 calc(11px * var(--t-uis, 1))/1 var(--t-ui2); letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 60%, transparent); }
.ph-meta li + li::before { content: ""; width: 6px; height: 6px; margin: 0 16px; background: rgb(var(--acc)); transform: rotate(45deg); box-shadow: 0 0 8px rgb(var(--acc)); }
.ph-cover { position: relative; perspective: 1200px; padding: 60px 80px 100px; margin: -60px -80px -100px; }
.ph-cover .tilt { transition: transform 0.5s var(--ease); }
.ph-cover .float { animation: float 7s ease-in-out infinite; }
.ph-cover img { position: relative; z-index: 1; width: auto; max-width: min(100%, 580px); max-height: min(70vh, 640px); margin: 0 auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.85)); }
.ph-cover .glow { position: absolute; left: 10%; right: 10%; bottom: -6%; height: 34%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acc), 0.55), rgba(var(--lo), 0.18) 55%, transparent); filter: blur(28px); animation: pulse 4.5s ease-in-out infinite; }
/* Cover kommt aus dem Dunkel ins Licht (brightness laeuft auf dem Compositor, die fruehere Unschaerfe nicht) */
[data-rv="cover"] { transform: translateY(40px) scale(0.94); filter: brightness(0.35); transition: opacity 0.95s var(--ease), transform 1s var(--ease-out), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 0.75ms); }
[data-rv="cover"].in { filter: none; }
html.via-vt [data-rv="cover"] { opacity: 1; transform: none; filter: none; transition: none; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-g] { opacity: 0; }
[data-g].in { animation: title-in 0.8s var(--ease-out) calc(var(--d, 0) * 1ms) both; }
/* Einblenden des Titels ruhig (vorher an/aus/an-Flackern: sah beim Laden aus, als lade die Seite mehrmals neu) */
@keyframes title-in { from { opacity: 0; transform: translate3d(0, 0.14em, 0); } to { opacity: 1; transform: none; } }
[data-g].in .fxt::before { animation: split 7s steps(1) 2.4s infinite; }
[data-g].in .fxt::after { animation: split2 7s steps(1) 2.4s infinite; }
@keyframes split-in { 0%, 100% { opacity: 0; transform: none } 8% { opacity: 0.8; transform: translate(-0.035em, 0) } 24% { opacity: 0.8; transform: translate(0.03em, 0) } 40% { opacity: 0.5; transform: translate(-0.015em, 0) } 56% { opacity: 0 } }
@keyframes split-in2 { 0%, 100% { opacity: 0; transform: none } 12% { opacity: 0.7; transform: translate(0.035em, 0) } 30% { opacity: 0.7; transform: translate(-0.025em, 0) } 48% { opacity: 0 } }

/* ---------- Hoeren ---------- */
.pl { padding-top: clamp(40px, 6vw, 80px); }
.pl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; }
.pl-note { font: 500 12px var(--mono); color: var(--mute); }
.pl-box { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 40px); border: 1px solid rgba(var(--acc), 0.22); background: linear-gradient(160deg, rgba(var(--acc), 0.07), transparent 50%), rgba(0, 0, 0, 0.35); }
.pl-box::before { content: ""; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border: solid rgb(var(--acc)); border-width: 2px 0 0 2px; }
.pl-box::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 22px; height: 22px; border: solid rgb(var(--acc)); border-width: 0 2px 2px 0; }
.pl-btn { position: relative; width: clamp(72px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--acc)); color: #050505; box-shadow: 0 0 40px rgba(var(--acc), 0.5); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.pl-btn:hover { transform: scale(1.06); box-shadow: 0 0 70px rgba(var(--acc), 0.8); }
.pl-btn svg { width: 34%; height: 34%; }
.pl-btn::before, .pl-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--acc)); animation: ring 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
.pl-btn::after { animation-delay: 1.2s; }
.pl-btn.is-on::before, .pl-btn.is-on::after { animation-duration: 1.2s; }
.pl-wave { position: relative; height: clamp(110px, 12vw, 160px); cursor: pointer; }
.pl-peaks { display: block; width: 100%; height: 100%; }
.pl-hover { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.pl-wave:hover .pl-hover { opacity: 1; }
.pl-time { position: absolute; right: 0; top: -22px; font-size: 12px; color: var(--mute); }
.pl-time b { color: rgb(var(--acc)); font-weight: 500; }
.pl-spec { grid-column: 1 / -1; display: block; width: 100%; height: 56px; margin-top: 22px; opacity: 0.85; }
@keyframes ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- Zahlen ---------- */
.pd { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 9vw, 130px) 0; }
.pd--grid { text-align: center; }
.pd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgba(var(--acc), 0.08), transparent 70%); }
.pd--grid .p-title { margin-bottom: clamp(36px, 5vw, 64px); }
.pd-frame { position: relative; clip-path: inset(0 50% 0 50%); transition: clip-path 1.2s var(--ease-io) 0.2s; }
.pd.in .pd-frame { clip-path: inset(-20px -20px -20px -20px); }
.pd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; list-style: none; border-top: 1px solid rgba(var(--acc), 0.16); border-bottom: 1px solid rgba(var(--acc), 0.16); }
.pd-grid li { position: relative; padding: clamp(28px, 4vw, 52px) 12px; border-left: 1px solid rgba(var(--acc), 0.16); }
.pd-grid li:first-child { border-left: 0; }
.pd-grid li::before, .pd-grid li::after { content: ""; position: absolute; width: 10px; height: 10px; border: solid rgb(var(--acc)); opacity: 0.7; }
.pd-grid li::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .pd-grid li::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pd .lab { display: block; margin-bottom: 14px; font: 700 calc(clamp(12px, 1.2vw, 15px) * var(--t-uis, 1))/1 var(--t-ui2); letter-spacing: 0.42em; text-transform: uppercase; color: var(--mute); }
.pd .num { display: inline-block; font: var(--t-w, 900) clamp(40px, 6.4vw, 92px)/1 var(--t-disp); letter-spacing: 0.02em; color: rgb(var(--acc)); font-variant-numeric: tabular-nums; white-space: nowrap; filter: drop-shadow(0 0 0.1em rgba(var(--acc), 0.5)); }
.sh-s[data-w="400"] .pd .num { font-weight: 400; color: var(--fg); filter: none; }
.pd .unit { display: block; margin-top: 12px; font: 500 calc(12px * var(--t-uis, 1))/1.4 var(--t-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.pd-beam { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(var(--acc), 0.16), transparent); mix-blend-mode: screen; }
.pd.in .pd-beam { animation: beam 2.2s cubic-bezier(0.5, 0, 0.3, 1) 0.6s 1 both; }
@keyframes beam { 0% { opacity: 0; transform: translateX(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(560%); } }

/* ---------- Toolsets ---------- */
.pt { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 9vw, 130px) 0; }
.pt-photo { position: absolute; left: 0; right: 0; top: -10%; height: 120%; z-index: -3; background-size: cover; background-position: 70% 30%; filter: saturate(0.9) contrast(1.08); will-change: transform; }
.pt-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 45% at 62% 38%, rgba(var(--acc), 0.16), transparent 70%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.pt-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(90deg, color-mix(in srgb, var(--t-bg) 96%, transparent) 0%, color-mix(in srgb, var(--t-bg) 72%, transparent) 38%, color-mix(in srgb, var(--t-bg) 35%, transparent) 70%, color-mix(in srgb, var(--t-bg) 55%, transparent) 100%),
  linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 88%, transparent) 0%, color-mix(in srgb, var(--t-bg) 10%, transparent) 28%, color-mix(in srgb, var(--t-bg) 55%, transparent) 60%, color-mix(in srgb, var(--t-bg) 97%, transparent) 100%); }
.pt-axis { display: flex; align-items: center; gap: 16px; margin: clamp(36px, 5vw, 56px) 0 24px; font: 700 11px/1 var(--t-disp); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }
.pt-axis i { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(var(--acc)), rgb(var(--alt))); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-io) 0.3s; }
.pt-axis.in i { transform: none; }
.pt-axis i::after { content: ""; position: absolute; top: -3px; left: 0; width: 100%; height: 7px; background: radial-gradient(circle at 3.5px 50%, rgb(var(--hi)) 3px, transparent 3.6px); animation: run 4s ease-in-out infinite alternate; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(calc(100% - 7px)); } }
/* Pakete: jede Karte belegt fuenf Zeilen (Kopf, Claim, Text, Kategorien, Fakten) eines gemeinsamen Rasters -> alles auf einer Hoehe */
.pt-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px clamp(28px, 5vw, 80px); align-items: end; }
.pt-about { display: grid; gap: 14px; max-width: 38em; font-family: var(--t-txt); font-size: calc(15.5px * var(--t-ts, 1)); line-height: 1.75; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.pt-grid { display: grid; column-gap: clamp(16px, 2vw, 28px); row-gap: 0; margin-top: clamp(30px, 4vw, 48px); }
.pt-axis + .pt-grid { margin-top: 0; }
.pt-grid.n1 { grid-template-columns: minmax(0, 860px); }
.pt-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-cell { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.pt-card { position: relative; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: start; overflow: hidden; isolation: isolate; padding: clamp(28px, 3vw, 46px); background: linear-gradient(160deg, rgba(var(--acc), 0.08), transparent 45%), color-mix(in srgb, var(--t-bg) 86%, transparent); border: 1px solid rgba(var(--acc), 0.16); transition: border-color 0.4s, box-shadow 0.4s, transform 0.5s var(--ease); }
.pt-card > * + * { margin-top: 20px; }
.pt-card > .pt-claim:empty { margin-top: 0; }
.pt-card > :is(.pt-claim, .pt-text, .pt-groups, .pt-facts, .pt-h) { position: relative; }
.pt-card:hover { border-color: rgba(var(--acc), 0.5); box-shadow: 0 0 0 1px rgba(var(--acc), 0.2), 0 30px 60px -30px rgba(var(--acc), 0.35); transform: translateY(-4px); }
.pt-card .br { position: absolute; width: 18px; height: 18px; border: solid rgb(var(--acc)); transition: width 0.4s, height 0.4s; }
.pt-card .br.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .pt-card .br.bb { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pt-card:hover .br { width: 44px; height: 44px; }
.pt-tag { position: absolute; right: 0.12em; top: 0.08em; font: var(--t-w, 900) clamp(110px, 12vw, 210px)/0.8 var(--t-disp); color: transparent; -webkit-text-stroke: 1px rgba(var(--acc), 0.16); pointer-events: none; transition: -webkit-text-stroke-color 0.4s; }
.pt-grid.n3 .pt-tag { font-size: clamp(90px, 9vw, 160px); }
.pt-card:hover .pt-tag { -webkit-text-stroke-color: rgba(var(--acc), 0.34); }
.sh-s[data-w="400"] .pt-card h3 { font-weight: 400; letter-spacing: 0.02em; font-size: clamp(24px, 2.2vw, 32px); }
.pt-kind { display: inline-flex; align-items: center; gap: 10px; font: 700 calc(10.5px * var(--t-uis, 1))/1 var(--t-ui2); letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); }
.pt-card h3 { position: relative; margin-top: 14px; font: var(--t-w, 900) clamp(22px, 2vw, 30px)/1.1 var(--t-disp); letter-spacing: 0.05em; text-transform: uppercase; }
.pt-h > h3:first-child { margin-top: 0; }
.pt-n { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font: 500 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--fg-2); }
.pt-n b { margin-right: 7px; font: 600 19px/1 var(--mono); letter-spacing: 0; color: var(--fg); }
.pt-claim { font: 700 calc(11px * var(--t-uis, 1))/1.5 var(--t-ui2); letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--alt)); }
.pt-text { max-width: 34em; font-family: var(--t-txt); font-size: calc(15.5px * var(--t-ts, 1)); line-height: 1.7; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.pt-groups { display: grid; align-content: start; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(var(--acc), 0.18); }
.pt-groups li { position: relative; display: grid; gap: 4px; padding: 11px 0 11px 20px; border-bottom: 1px solid rgba(var(--acc), 0.12); opacity: 0; transform: translateX(-10px); transition: opacity 0.6s, transform 0.7s var(--ease); transition-delay: calc(0.25s + var(--rk, 0) * 55ms); }
.pt-groups li b { font: 700 calc(12px * var(--t-uis, 1))/1.3 var(--t-ui2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }
.pt-groups li span { font: 400 13.5px/1.5 var(--body); color: color-mix(in srgb, var(--fg) 62%, transparent); }
.pt-groups li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 1px; background: color-mix(in srgb, var(--fg) 55%, transparent); }
.pt-grid:is(.n1, .n2) .pt-groups:not(.chips):has(li:nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.pt-groups.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.pt-groups.chips li { padding: 10px 14px; border: 1px solid rgba(var(--acc), 0.28); background: rgba(var(--acc), 0.04); }
.pt-groups.chips li::before { display: none; }
.pt-cell.in .pt-groups li.in { opacity: 1; transform: none; }
.pt-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font: 500 11.5px/1.5 var(--mono); color: var(--mute); }
.pt-facts li::before { content: "+ "; color: rgb(var(--acc)); }
.pt-inside { margin-top: 28px; padding: 22px clamp(20px, 2.5vw, 34px) 24px; border: 1px solid rgba(var(--acc), 0.2); background: color-mix(in srgb, var(--t-bg) 78%, transparent); }
.pt-inside ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 26px; margin: 16px 0 0; padding: 0; list-style: none; }
.pt-inside li { display: grid; gap: 3px; font: 400 13.5px/1.5 var(--body); color: color-mix(in srgb, var(--fg) 62%, transparent); }
.pt-inside li b { font: 700 calc(13px * var(--t-uis, 1))/1.3 var(--t-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.pt-inside ul.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-inside ul.chips li { padding: 10px 14px; border: 1px solid rgba(var(--acc), 0.28); background: rgba(var(--acc), 0.04); }
.pt-inside .pt-more { margin-top: 30px; }

/* Stufen: roh -> modular -> fertig. Die Themen gestalten die Karte, die Stufe legt sich darueber. */
.pt-card:is(.k-raw, .k-mod, .k-ds)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sh-s .pt-card.k-raw::after { background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 24px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.sh-s .pt-card.k-raw .pt-kind::before { content: ""; width: 18px; height: 0; border-top: 1px dashed currentColor; }
.sh-s .pt-card.k-mod::after { inset: 0 0 auto 0; height: 5px; background: repeating-linear-gradient(90deg, rgba(var(--acc), 0.7) 0 28px, transparent 28px 34px); }
.sh-s .pt-card.k-mod .pt-kind { color: rgb(var(--acc)); }
.sh-s .pt-card.k-mod .pt-kind::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }
.sh-s .pt-card.k-mod .pt-groups li::before { top: 14px; width: 6px; height: 6px; background: none; border: 1.5px solid rgb(var(--acc)); }
.sh-s .pt-card.k-ds { border-color: rgba(var(--acc), 0.55); box-shadow: 0 0 0 1px rgba(var(--acc), 0.18), 0 40px 90px -50px rgba(var(--acc), 0.75); }
.sh-s .pt-card.k-ds::after { background: radial-gradient(110% 55% at 50% 0%, rgba(var(--acc), 0.24), transparent 72%), linear-gradient(180deg, rgba(var(--acc), 0.07), transparent 40%); }
.sh-s .pt-card.k-ds .pt-kind { padding: 7px 11px 7px 10px; background: rgb(var(--acc)); color: #070707; }
.sh-s .pt-card.k-ds .pt-kind::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.sh-s .pt-card.k-ds h3 { color: rgb(var(--hi)); text-shadow: 0 0 24px rgba(var(--acc), 0.45); }
.sh-s .pt-card.k-ds .pt-groups li::before { top: 14px; width: 7px; height: 7px; background: rgb(var(--acc)); transform: rotate(45deg); box-shadow: 0 0 8px rgb(var(--acc)); }
.sh-s .pt-card.k-ds .pt-tag { -webkit-text-stroke-color: rgba(var(--acc), 0.3); }

/* ---------- Aufnahme / Highlights ---------- */
.pc { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0; }
.pc-big { position: absolute; right: -0.04em; bottom: -0.18em; z-index: -1; font: var(--t-w, 900) clamp(120px, 26vw, 360px)/1 var(--t-disp); letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(var(--acc), 0.08); pointer-events: none; white-space: nowrap; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.pc-text { margin-top: 26px; max-width: 30em; font-family: var(--t-txt); font-size: calc(16px * var(--t-ts, 1)); line-height: 1.75; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.pc-rate { position: relative; display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; padding: 16px 22px; border: 1px solid rgba(var(--acc), 0.4); background: rgba(var(--acc), 0.04); }
.pc-rate::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border: solid rgb(var(--acc)); border-width: 2px 0 0 2px; }
.pc-rate b { font: var(--t-w, 900) 30px/1 var(--t-disp); color: rgb(var(--acc)); text-shadow: 0 0 0.3em rgba(var(--acc), 0.5); }
.pc-rate span { font: 700 10px/1.5 var(--t-disp); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.pc-chain { position: relative; padding-left: 34px; }
.pc-chain ol { margin: 0; padding: 0; list-style: none; }
.pc-wire { position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: rgba(var(--acc), 0.14); overflow: hidden; }
.pc-wire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--hi)), rgb(var(--acc)) 60%, rgb(var(--alt))); box-shadow: 0 0 10px rgb(var(--acc)); transform-origin: top; transform: scaleY(0); transition: transform 1.6s var(--ease-io) 0.35s; }
.pc.in .pc-wire::after { transform: none; }
/* Lichtpunkt laeuft die Leitung herunter: Traeger so hoch wie die Leitung, der Punkt sitzt oben, bewegt wird der Traeger (transform) */
.pc-wire i { position: absolute; left: -2px; top: 0; width: 6px; height: 100%; animation: wire 3.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.pc-wire i::before { content: ""; position: absolute; left: 0; top: -40px; width: 6px; height: 40px; border-radius: 3px; background: linear-gradient(180deg, transparent, #fff, transparent); }
@keyframes wire { from { transform: translateY(0); } to { transform: translateY(calc(100% + 40px)); } }
.pc-layer { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(var(--acc), 0.16); opacity: 0; transform: translateX(24px); transition: opacity 0.8s, transform 1s var(--ease); transition-delay: calc(200ms + var(--rk, 0) * 150ms); }
.pc-layer:first-child { border-top: 1px solid rgba(var(--acc), 0.16); }
.pc.in .pc-layer.in { opacity: 1; transform: none; }
.pc-layer::before { content: ""; position: absolute; left: -33px; top: 30px; width: 12px; height: 12px; background: var(--t-bg); border: 2px solid rgb(var(--acc)); transform: rotate(45deg); box-shadow: 0 0 10px rgba(var(--acc), 0.6); }
.pc-type { font: 700 calc(11px * var(--t-uis, 1))/1.5 var(--t-ui2); letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--acc)); counter-increment: pcl; }
.pc-chain ol { counter-reset: pcl; }
.pc-type::before { content: counter(pcl, decimal-leading-zero); display: block; margin-bottom: 6px; color: rgb(var(--alt)); font-weight: 900; letter-spacing: 0.1em; }
.pc-items { margin: 0; padding: 0; list-style: none; }
.pc-items li { margin-bottom: 4px; font: 600 17px/1.4 var(--body); }
.pc-role { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--mute); }

/* ---------- Metadaten ---------- */
.pm { padding: clamp(80px, 9vw, 130px) 0; }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.pm-text { margin-top: 26px; max-width: 30em; font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.pm-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding: 0; list-style: none; }
.pm-apps li { padding: 11px 18px; border: 1px solid rgba(var(--acc), 0.3); border-radius: 999px; font: 700 11px/1 var(--t-disp); letter-spacing: 0.18em; text-transform: uppercase; }
.pm-apps li:first-child { background: rgb(var(--acc)); border-color: rgb(var(--acc)); color: #050505; box-shadow: 0 0 22px -4px rgba(var(--acc), 0.7); }
.pm-term { position: relative; margin: 0; background: color-mix(in srgb, var(--t-bg) 60%, #000); border: 1px solid rgba(var(--acc), 0.3); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 40px 80px -40px rgba(var(--acc), 0.3); }
.pm-term::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(var(--acc), 0.035) 0 1px, transparent 1px 3px); }
.pm-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(var(--acc), 0.16); }
.pm-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--acc), 0.18); }
.pm-bar i:first-child { background: rgb(var(--acc)); box-shadow: 0 0 8px rgb(var(--acc)); }
.pm-bar span { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--mute); }
.pm-term dl { margin: 0; padding: 10px 20px 22px; }
.pm-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px dashed rgba(var(--acc), 0.1); opacity: 0; transition: opacity 0.15s steps(2); transition-delay: calc(300ms + var(--rk, 0) * 200ms); }
.pm-row:last-child { border-bottom: 0; }
.pm.in .pm-row.in { opacity: 1; }
.pm-row dt { font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--lo)); }
.pm-row dd { margin: 0; font: 500 14px/1.55 var(--mono); }
.pm-row dd b { color: rgb(var(--acc)); }
.pm-kw { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-kw span { padding: 5px 9px; background: rgba(var(--acc), 0.1); border: 1px solid rgba(var(--acc), 0.22); font: 500 12px/1 var(--mono); color: rgb(var(--hi)); opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); transition-delay: calc(2000ms + var(--k) * 90ms); }
.pm.in .pm-kw span { opacity: 1; transform: none; }
.pm-kw .cursor { background: rgb(var(--acc)); }

/* ---------- Trailer ---------- */
.pv { position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 8vw, 120px) 0; text-align: center; }
.pv-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; filter: grayscale(0.3) contrast(1.15) brightness(0.55); }
.pv-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pv-scan { background: linear-gradient(0deg, var(--t-bg), transparent 30%, transparent 70%, var(--t-bg)); }
.pv-hud { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); top: clamp(16px, 3vw, 36px); display: flex; justify-content: space-between; pointer-events: none; font: 700 calc(clamp(10px, 1.1vw, 13px) * var(--t-uis, 1))/1 var(--t-ui2); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.pv-hud .rec { display: flex; align-items: center; gap: 10px; color: rgb(var(--acc)); }
.pv-hud .rec i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--acc)); box-shadow: 0 0 10px rgb(var(--acc)); animation: blink 1.2s steps(1) infinite; }
.pv-hud .tc { font-variant-numeric: tabular-nums; }
.pv .kick { justify-content: center; display: flex; }
.pv .p-title { margin: 14px auto clamp(26px, 3.6vw, 44px); max-width: 18em; }
.pv-frame { position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(var(--acc), 0.3); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 50px 100px -50px rgba(var(--acc), 0.45); }
.pv-frame .br { position: absolute; z-index: 3; width: 28px; height: 28px; border: solid rgb(var(--acc)); pointer-events: none; filter: drop-shadow(0 0 6px rgba(var(--acc), 0.7)); }
.pv-frame .br.tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; } .pv-frame .br.tr { top: -8px; right: -8px; border-width: 2px 2px 0 0; }
.pv-frame .br.bl { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; } .pv-frame .br.bb { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }
.pv-btn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.pv-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.5s, transform 1.2s var(--ease); }
.pv-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent, rgba(0, 0, 0, 0.7)), repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
.pv-btn:hover img { opacity: 0.95; transform: scale(1.03); }
.pv-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(68px, 9vw, 108px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(var(--acc)); color: #050505; box-shadow: 0 0 40px rgba(var(--acc), 0.6); display: grid; place-items: center; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.pv-play::before, .pv-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--acc)); animation: ring 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
.pv-play::after { animation-delay: 1.2s; }
.pv-play svg { display: block; width: 34%; height: 34%; }
.pv-btn:hover .pv-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 70px rgba(var(--acc), 0.85); }
.pv-label { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(14px, 3vw, 30px); font: 700 calc(clamp(10px, 1.2vw, 13px) * var(--t-uis, 1))/1 var(--t-ui2); letter-spacing: 0.4em; text-transform: uppercase; }
.pv-frame iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.pv-note { margin-top: 18px; font-size: 12px; color: var(--mute); }

/* ---------- Abschluss mit Taschenlampe ---------- */
.pe { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 150px) 0; }
.pe-photo { position: absolute; inset: -4%; z-index: -4; background-size: cover; background-position: center; filter: contrast(1.1) saturate(0.8); animation: drift2 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift2 { from { transform: scale(1.02); } to { transform: scale(1.1) translate(1.5%, -1%); } }
.pe-torchwrap { position: absolute; inset: 0; z-index: -3; pointer-events: none; transition: transform 1.2s var(--ease); will-change: transform; }
.pe-torch { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, transparent 0, color-mix(in srgb, var(--t-bg) 35%, transparent) 4%, color-mix(in srgb, var(--t-bg) 82%, transparent) 10%, color-mix(in srgb, var(--t-bg) 96%, transparent) 19%); animation: torch 16s ease-in-out infinite alternate; }
@keyframes torch { 0% { transform: translate(6%, -2%); } 25% { transform: translate(-7%, 4%); } 50% { transform: translate(3%, 6%); } 75% { transform: translate(-4%, -5%); } 100% { transform: translate(8%, 2%); } }
.pe-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 30% 60%, rgba(var(--acc), 0.14), transparent 70%), radial-gradient(120% 90% at 50% 50%, transparent 45%, color-mix(in srgb, var(--t-bg) 95%, transparent) 100%); }
.pe-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pe-cover { position: relative; margin: 0; }
.pe-cover img { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.9)); animation: ctafloat 7s ease-in-out infinite; }
.pe-cover::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acc), 0.55), transparent); filter: blur(26px); animation: pulse 4.5s ease-in-out infinite; }
@keyframes ctafloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.pe-title { margin-top: 18px; font: var(--t-w, 900) clamp(32px, 5.4vw, 74px)/1.02 var(--t-disp); letter-spacing: 0.01em; text-transform: uppercase; }
.sh-s[data-w="400"] .pe-title { font-weight: 400; line-height: 0.95; }
.pe-stats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 6px 22px; margin: 34px 0 0; }
.pe-stats dt, .pe-stats dd { margin: 0; font: var(--t-w, 900) clamp(20px, 2.4vw, 32px)/1.15 var(--t-disp); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity 0.2s steps(2); }
.pe-stats dt { color: rgb(var(--lo)); } .pe-stats dd { color: rgb(var(--acc)); text-shadow: 0 0 0.3em rgba(var(--acc), 0.5); }
.pe.in .pe-stats > * { opacity: 1; }
.pe.in .pe-stats > :nth-child(1), .pe.in .pe-stats > :nth-child(2) { transition-delay: 0.7s; }
.pe.in .pe-stats > :nth-child(3), .pe.in .pe-stats > :nth-child(4) { transition-delay: 0.95s; }
.pe.in .pe-stats > :nth-child(5), .pe.in .pe-stats > :nth-child(6) { transition-delay: 1.2s; }
.pe-tag { margin-top: 18px; max-width: 26em; font: 400 calc(18px * var(--t-ts, 1))/1.5 var(--t-txt); color: color-mix(in srgb, var(--fg) 70%, transparent); }
.pe-act { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; }
.pe-act .price b { font-size: 46px; }
.pe-act .btn { min-height: 60px; padding: 0 40px; }
.pe-act .btn::after { animation: shine 4s ease-in-out 1.5s infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-133%) skewX(-20deg); } 100% { transform: translateX(311%) skewX(-20deg); } }

/* ---------- FAQ ---------- */
.pf { padding-top: clamp(80px, 9vw, 120px); max-width: 940px; }
.pf .p-title { margin-bottom: clamp(32px, 4vw, 52px); }
.pf-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(var(--acc), 0.16); }
.pf-item { border-bottom: 1px solid rgba(var(--acc), 0.16); transition: background-color 0.3s; }
.pf-item.open { background: linear-gradient(90deg, rgba(var(--acc), 0.06), transparent 70%); }
.pf-q { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 8px; text-align: left; font: 700 clamp(14px, 1.6vw, 17px)/1.4 var(--t-disp); letter-spacing: 0.06em; transition: color 0.2s; }
.sh-s[data-w="400"] .pf-q { font-family: var(--body); letter-spacing: 0.02em; }
.pf-q:hover { color: rgb(var(--hi)); }
.pf-n { flex: none; width: 2.2em; font: var(--t-w, 900) 13px/1 var(--t-disp); letter-spacing: 0.1em; color: rgb(var(--acc)); }
.pf-qt { flex: 1; }
.pf-ico { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid rgba(var(--acc), 0.45); transition: transform 0.45s var(--ease), background-color 0.3s; }
.pf-ico::before, .pf-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: rgb(var(--acc)); transition: transform 0.45s var(--ease); }
.pf-ico::after { transform: rotate(90deg); }
.open .pf-ico { background: rgb(var(--acc)); transform: rotate(180deg); }
.open .pf-ico::before, .open .pf-ico::after { background: #050505; }
.open .pf-ico::after { transform: rotate(0deg); }
.pf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.open .pf-a { grid-template-rows: 1fr; }
.pf-a > div { overflow: hidden; }
.pf-a p { padding: 0 8px 24px calc(8px + 2.2em + 18px); font-family: var(--t-txt); font-size: calc(16px * var(--t-ts, 1)); line-height: 1.7; color: color-mix(in srgb, var(--fg) 70%, transparent); opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.45s var(--ease); }
.open .pf-a p { opacity: 1; transform: none; transition-delay: 0.08s; }
.pf-a strong { color: rgb(var(--acc)); font-weight: 600; }

.more { padding-top: clamp(90px, 10vw, 140px); }

/* ---------- Kaufleiste (erscheint, wenn der Hero aus dem Bild ist) ---------- */
.buybar { position: fixed; z-index: 55; left: 0; right: 0; top: var(--head-h); height: 64px; background: color-mix(in srgb, var(--t-bg) 92%, transparent); border-bottom: 1px solid rgba(var(--acc), 0.22);
  transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform 0.55s var(--ease-out), opacity 0.3s, visibility 0s linear 0.55s; pointer-events: none; }
/* zu: zusaetzlich visibility hidden – Safari zeigte die Leiste beim Laden kurz hinter der durchsichtigen Kopfzeile (trotz opacity 0) */
.buybar.on { transform: none; opacity: 1; visibility: visible; transition: transform 0.55s var(--ease-out), opacity 0.3s, visibility 0s; pointer-events: auto; }
.buybar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--acc)), transparent); opacity: 0.7; }
.buybar .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.buybar img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.bb-t { min-width: 0; margin-right: auto; }
.bb-t b { display: block; font: var(--t-w, 900) 18px/1 var(--t-disp); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-s[data-w="400"] .bb-t b { font-weight: 400; font-size: 21px; }
.bb-t span { display: block; margin-top: 4px; font: 500 calc(10px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.buybar .price b { font-size: 26px; }
.buybar .icon-btn { width: 40px; height: 40px; color: rgb(var(--acc)); border-color: rgba(var(--acc), 0.45); }
.buybar .icon-btn.is-on, .buybar .icon-btn:hover { background: rgb(var(--acc)); color: #050505; border-color: rgb(var(--acc)); }
@media (max-width: 720px) {
  .buybar { top: auto; bottom: 0; height: auto; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-bottom: 0; border-top: 1px solid rgba(var(--acc), 0.22); transform: translateY(110%); }
  .buybar::after { top: -1px; bottom: auto; }
  .bb-t span { display: none; }
  .buybar .price s { display: none; }
  .buybar .btn .lbl { display: none; }
  .buybar .btn { padding: 0 16px; }
  .sh-s .mp.on { bottom: 84px; }
  /* schmal: Name ganz lesen statt "THE V…" – Rabatt-Abzeichen und Hoerprobe weichen (beides steht im Hero), Name darf zweizeilig sein */
  .buybar .wrap { gap: 12px; }
  .buybar .price .off, .buybar .icon-btn { display: none; }
  .bb-t b { white-space: normal; overflow: visible; font-size: 17px; line-height: 0.95; }
  .sh-s[data-w="400"] .bb-t b { font-size: 18px; }
}

@media (max-width: 980px) {
  .ph-grid, .pc-grid, .pm-grid, .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-cover { order: -1; max-width: 420px; width: 78%; margin: -40px auto -48px; padding: 40px 40px 60px; box-sizing: content-box; }
  /* gleiche Boxhoehe auf jeder Produktseite (sauberer Zuschnitt, siehe heroOf) */
  html[data-theme] main > .ph .ph-cover picture img, .show .sh-s .ph-cover picture img { width: auto; max-width: 100%; height: min(40svh, 340px); max-height: none; object-fit: contain; }
  .pt-grid.n2, .pt-grid.n3 { grid-template-columns: minmax(0, 1fr); }
  .pt-cell + .pt-cell { margin-top: 18px; }
  .pt-head { grid-template-columns: minmax(0, 1fr); }
  .pe-grid { text-align: center; }
  .pe-cover { max-width: 300px; width: 70%; margin: 0 auto; }
  .pe-stats { justify-content: center; }
  .pe-act { justify-content: center; }
}
@media (max-width: 720px) {
  .pd-grid { grid-template-columns: 1fr 1fr; }
  .pd-grid li:nth-child(3) { border-left: 0; }
  .pd-grid li:nth-child(n + 3) { border-top: 1px solid rgba(var(--acc), 0.16); }
  .pd .num { font-size: clamp(34px, 11vw, 64px); }
  .pl-box { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pl-btn { justify-self: start; }
  .pl-wave { width: 100%; }
  .pc-layer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ph-buy .btn { flex: 1 1 auto; }
  .pf-q { gap: 12px; padding: 18px 4px; }
  .pf-a p { padding: 0 4px 20px; font-size: 15px; }
}

/* ---------- Layout-Varianten des Hero ---------- */
.sh-s[data-layout="mirror"] .ph-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.sh-s[data-layout="mirror"] .ph-cover { order: -1; }
.sh-s[data-layout="mirror"] .ph-fx { background:
  linear-gradient(270deg, color-mix(in srgb, var(--t-bg) 94%, transparent) 0%, color-mix(in srgb, var(--t-bg) 62%, transparent) 50%, color-mix(in srgb, var(--t-bg) 25%, transparent) 100%),
  radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in srgb, var(--t-bg) 94%, transparent) 100%); }
.sh-s[data-layout="center"] .ph { text-align: center; }
.sh-s[data-layout="center"] .ph-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
.sh-s[data-layout="center"] .ph-cover { order: -1; width: min(460px, 70vw); margin-top: -10px; }
.sh-s[data-layout="center"] .ph-cover img { max-height: min(46vh, 460px); }
.sh-s[data-layout="center"] .ph-copy { display: flex; flex-direction: column; align-items: center; width: min(960px, 100%); }
.sh-s[data-layout="center"] .ph-l { margin-left: auto; margin-right: auto; }
.sh-s[data-layout="center"] .ph-buy, .sh-s[data-layout="center"] .ph-meta { justify-content: center; }
.sh-s[data-layout="center"] .ph-fx { background: radial-gradient(70% 70% at 50% 40%, transparent 0%, color-mix(in srgb, var(--t-bg) 70%, transparent) 60%, var(--t-bg) 100%); }
.sh-s[data-layout="center"] .ph-t { white-space: normal; font-size: clamp(56px, 11cqi, 150px); }
/* Handy: die Spaltenaufteilung der Layout-Varianten gilt nur am Desktop */
@media (max-width: 980px) { .sh-s[data-layout] .ph-grid { grid-template-columns: minmax(0, 1fr); } }
/* Sonderabschnitte: gemeinsamer Rahmen */
.sx { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0; }
.sx .p-title { margin-bottom: clamp(30px, 4vw, 54px); }

/* ================= Zahlenblock: eigene Darstellung je Thema (data-specs) =================
   grid = Raster (UNTAMED, Vault) · ledger = Liste mit Punktlinie · gauge = Messringe · bars = Segmentbalken
   plate = Typenschild · tiles = Kacheln. Groessen hier mit hoeherer Spezifitaet als die Theme-Farbregeln (.pd .num). */
.pd-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.sh-s[data-layout="mirror"] .pd-split > .pd-h { order: 2; }
.pd-note { margin-top: 22px; max-width: 30em; font: 400 calc(15px * var(--t-ts, 1))/1.7 var(--t-txt); color: color-mix(in srgb, var(--fg) 62%, transparent); }
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.pd-top .pd-note { margin: 0 0 6px; }
html[data-specs]:not([data-specs="grid"]) .pd .unit, html[data-specs]:not([data-specs="grid"]) .pd .lab { margin: 0; }

/* ledger */
.pd-rows { margin: 0; border-top: 1px solid rgba(var(--acc), 0.22); }
.pd-r { display: flex; align-items: baseline; gap: 16px; padding: clamp(16px, 2vw, 22px) 4px; border-bottom: 1px solid rgba(var(--acc), 0.14); opacity: 0; transform: translateY(14px); transition: opacity 0.7s, transform 0.8s var(--ease); transition-delay: calc(150ms + var(--rk, 0) * 110ms); }
.pd.in .pd-r.in { opacity: 1; transform: none; }
.pd-r dt { font: 600 calc(12px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.pd-r > i { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(var(--acc), 0.35); transform: translateY(-5px); }
.pd-r dd { margin: 0; display: flex; align-items: baseline; gap: 12px; }
html[data-specs="ledger"] .pd .num { font-size: clamp(32px, 3.8vw, 56px); filter: none; }
.pd-r .mono { font: 500 clamp(18px, 2vw, 24px)/1 var(--mono); color: rgb(var(--acc)); }
.pd-r small { width: 9.5em; font: 500 calc(11px * var(--t-uis, 1))/1.35 var(--t-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

/* gauge */
.pd-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(16px, 2.4vw, 36px); padding: 0; list-style: none; }
.pd-gauges li { text-align: center; }
.g-d { position: relative; width: min(100%, 230px); margin: 0 auto; }
.g-d svg { display: block; width: 100%; overflow: visible; }
.g-tr, .g-fl { fill: none; stroke-width: 6; stroke-linecap: round; }
.g-tr { stroke: rgba(var(--acc), 0.12); stroke-dasharray: 75 100; }
.g-fl { stroke: rgb(var(--acc)); filter: drop-shadow(0 0 5px rgba(var(--acc), 0.55)); transition: stroke-dashoffset 1.8s var(--ease-io); transition-delay: calc(300ms + var(--i) * 160ms); }
.pd.in .g-fl { stroke-dashoffset: 0; }
.g-tk line { stroke: rgba(var(--acc), 0.4); stroke-width: 1.2; }
.g-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4%; }
html[data-specs="gauge"] .pd .num { font-size: clamp(28px, 3.1vw, 46px); }
html[data-specs="gauge"] .pd .g-v .lab { margin-top: 10px; font-size: calc(11px * var(--t-uis, 1)); letter-spacing: 0.3em; color: var(--fg-2); }
.pd-gauges .unit { margin-top: 2px !important; }
.pd-ucs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: clamp(30px, 4vw, 48px); font: 600 calc(11px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.pd-ucs b { padding: 9px 13px; border: 1px solid rgba(var(--acc), 0.4); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: rgb(var(--acc)); }

/* bars */
.pd-bars { display: grid; gap: clamp(20px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.pd-bars li { opacity: 0; transform: translateX(20px); transition: opacity 0.7s, transform 0.8s var(--ease); transition-delay: calc(150ms + var(--rk, 0) * 130ms); }
.pd.in .pd-bars li.in { opacity: 1; transform: none; }
.b-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.pd-bars .lab { font: 700 calc(12px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-2); }
html[data-specs="bars"] .pd .num { font-size: clamp(26px, 2.8vw, 42px); filter: none; }
.b-seg { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; height: 16px; }
.b-seg i { background: rgba(var(--acc), 0.1); transform: skewX(-18deg); }
.b-seg i.f { background: rgb(var(--acc)); opacity: 0.12; transition: opacity 0.25s; transition-delay: calc(500ms + var(--i) * 140ms + var(--k) * 26ms); }
.pd.in .b-seg i.f { opacity: 1; }
.pd-bars .unit { display: block; margin-top: 9px !important; font-size: calc(11px * var(--t-uis, 1)); letter-spacing: 0.12em; }
.b-ucs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 20px; border-top: 1px dashed rgba(var(--acc), 0.28); }
.b-ucs b { font: 500 17px/1 var(--mono); color: rgb(var(--acc)); }
.b-ucs .unit { margin: 0 0 0 auto !important; }

/* plate */
.pd-plate { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: 10px; rotate: -1deg;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 40%, rgba(0, 0, 0, 0.25)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px), color-mix(in srgb, var(--t-bg) 72%, #2c2c30);
  border: 1px solid rgba(var(--acc), 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.sh-s[data-layout="mirror"] .pd-plate { rotate: 1deg; }
.pd-plate .rv { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #dcdce0, #5a5a60 60%, #26262a); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.pd-plate .rv.a { top: 12px; left: 12px; } .pd-plate .rv.b { top: 12px; right: 12px; } .pd-plate .rv.c { bottom: 12px; left: 12px; } .pd-plate .rv.d { bottom: 12px; right: 12px; }
.pp-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding: 0 16px 18px; border-bottom: 2px solid rgba(var(--acc), 0.55); }
.pp-h b { font: var(--t-w, 900) clamp(28px, 3vw, 42px)/1 var(--t-disp); text-transform: uppercase; letter-spacing: 0.02em; color: rgb(var(--acc)); }
.pp-h span { font: 600 calc(11px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); }
.pp-g { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.pp-g > div { padding: 18px 16px 16px; border-bottom: 1px solid rgba(var(--acc), 0.18); }
.pp-g > div:nth-child(odd) { border-right: 1px solid rgba(var(--acc), 0.18); }
.pp-g > div:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
.pp-g dt { font: 600 calc(10px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }
.pp-g dd { margin: 10px 0 6px; }
html[data-specs="plate"] .pd .num { font-size: clamp(30px, 3.2vw, 48px); filter: none; }
.pp-g small { font: 500 calc(10px * var(--t-uis, 1))/1.3 var(--t-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.pp-f { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 16px 0; font: 600 calc(10px * var(--t-uis, 1))/1.4 var(--t-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); }
.pp-f .pp-cat { font-weight: inherit; text-transform: none; letter-spacing: 0.08em; }   /* CatID mit Gross-/Kleinschreibung (MACHMisc), sonst wirkt die Spalte zufaellig */
.pp-bc { flex: none; width: 110px; height: 28px; opacity: 0.7; background: repeating-linear-gradient(90deg, rgb(var(--hi)) 0 2px, transparent 2px 4px, rgb(var(--hi)) 4px 5px, transparent 5px 8px, rgb(var(--hi)) 8px 11px, transparent 11px 13px); }

/* tiles */
.pd-tiles { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); gap: clamp(10px, 1.2vw, 16px); }
.pd-tiles .tl { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: clamp(20px, 2.4vw, 30px); padding-top: calc(clamp(18px, 2vw, 24px) + 11px * var(--t-uis, 1) + 16px); border: 1px solid rgba(var(--acc), 0.2); background: linear-gradient(160deg, rgba(var(--acc), 0.1), transparent 55%), color-mix(in srgb, var(--t-bg) 80%, #000); }
.pd-tiles .tl.big { grid-row: span 2; border-color: rgba(var(--acc), 0.45); background: linear-gradient(160deg, rgba(var(--acc), 0.26), rgba(var(--acc), 0.04) 60%), color-mix(in srgb, var(--t-bg) 70%, #000); }
.pd-tiles .tl.wide { grid-column: span 2; }
html[data-specs] .pd-tiles .tl .lab { position: absolute; top: clamp(18px, 2vw, 24px); left: clamp(20px, 2.4vw, 30px); font: 700 calc(11px * var(--t-uis, 1))/1 var(--t-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-2); }
html[data-specs="tiles"] .pd .num { font-size: clamp(40px, 4.8vw, 72px); }
html[data-specs="tiles"] .pd .pd-tiles .tl.big .num { font-size: clamp(64px, 9vw, 150px); }
.pd-tiles .tl .unit { font-size: calc(11px * var(--t-uis, 1)); letter-spacing: 0.14em; }
.pd-tiles .tl.ucs b { font: 500 clamp(18px, 2vw, 26px)/1 var(--mono); color: rgb(var(--acc)); }

@media (max-width: 860px) {
  .pd-split, .pd-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sh-s[data-layout="mirror"] .pd-split > .pd-h { order: 0; }
  .pd-gauges { grid-template-columns: 1fr 1fr; }
  .pd-tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); }
  .pd-tiles .tl.big { grid-row: auto; grid-column: span 2; min-height: 200px; }
  .pd-r { flex-wrap: wrap; }
  .pd-r small { width: auto; }
}

/* Typenschild (Zahlenblock 'plate'): kommt ohne Wartezeit, Zahlen laufen sofort mit */
.pd-plate[data-rv] { transition-duration: 0.5s, 0.6s; }

/* Hero-Preis mit Rabatt: wie ueberall (base.css .price .was), nur groesser */
.ph-buy .price.is-sale .was, .pe-act .price.is-sale .was { gap: 5px; }

/* Grosse Bildschirme (27"-1440p mit 100 %, 4K, 21:9, 32:9): der Inhalt des Heros waechst stufenweise mit, sonst stuende er klein in der
   Mitte einer Vollbild-Buehne (Startseite: Wechsel von der grossen Vault-Folie auf eine kleine Produktfolie). zoom statt neuer Masse:
   die Groessen im Hero haben Obergrenzen in px, die wachsen so mit. The Vault skaliert stufenlos selbst (the-vault.css --u). */
@media (min-width: 2200px) and (min-height: 1250px) { .ph-grid { zoom: 1.35; } }
@media (min-width: 3000px) and (min-height: 1700px) { .ph-grid { zoom: 1.75; } }
html[data-product="the-vault"] .ph-grid, .sh-s[data-theme="the-vault"] .ph-grid { zoom: 1; }

/* the-vault */
/* THE VAULT · Stahl und Gold, Tresortuer hinter der Box-Pyramide */
.sh-s[data-theme="the-vault"] .fxt { background: linear-gradient(100deg, #fff4cf 0%, #f0cf7c 30%, #9a6c22 52%, #f7dc93 70%, #fff4cf 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 8px 30px rgba(235, 195, 100, 0.25)); }
/* Goldschimmer einmal, wenn der Titel steht: er malt jedes Bild neu (laeuft nicht auf der Grafikkarte), und solange er laeuft, rechnet
   der Browser in jedem Bild auch alle anderen Animationen der Seite durch – frueher dreimal ab dem Laden = 18 s Dauerlast */
.sh-s[data-theme="the-vault"] .in > .fxt { animation: the-vault-vgold 6s ease-in-out 1.2s; }
@keyframes the-vault-vgold { 50% { background-position: 100% 0; } }
.sh-s[data-theme="the-vault"] .ph-t { font-size: clamp(80px, 12vw, 200px); line-height: 0.82; letter-spacing: 0.02em; }
/* Unterzeile als helles Schild (vorher lose gesperrte Goldschrift ueber unruhigem Grund – kaum lesbar): fast weiss, leicht gebuerstet,
   runde Ecken, dunkle Schrift */
.sh-s[data-theme="the-vault"] .ph-s { display: inline-block; margin-top: 0.9em; padding: 0.62em 1.05em 0.56em 1.35em; border-radius: 10px; font-family: var(--body); font-weight: 800; letter-spacing: 0.34em; white-space: nowrap; color: #1f1607;
  background: repeating-linear-gradient(90deg, rgba(120, 88, 30, 0.06) 0 1px, transparent 1px 3px), radial-gradient(120% 140% at 30% 0%, #fffdf6 0%, #f8ecc9 55%, #e9d39b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(140, 100, 35, 0.28), 0 0 0 1px rgba(255, 236, 180, 0.55), 0 14px 34px -12px rgba(235, 195, 100, 0.75); }
@media (max-width: 560px) { .sh-s[data-theme="the-vault"] .ph-s { letter-spacing: 0.16em; font-size: 11px; padding: 0.6em 0.8em 0.55em 0.96em; } }
/* Startseite: statt des Fliesstexts (kaum lesbar ueber der Wand) ein zweites Schild, dunkel mit heller Schrift – das helle umgekehrt */
.sh-s[data-theme="the-vault"] .ph-plate { display: inline-block; margin-top: 18px; padding: 0.78em 1.25em 0.72em 1.4em; border-radius: 10px; font: 700 12px/1.2 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: #f3e2b4;
  background: repeating-linear-gradient(90deg, rgba(255, 220, 150, 0.05) 0 1px, transparent 1px 3px), radial-gradient(120% 140% at 30% 0%, #2c2417 0%, #16110a 60%, #0b0905 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(235, 195, 100, 0.5), 0 14px 34px -14px rgba(0, 0, 0, 0.9); }
.sh-s[data-theme="the-vault"] .ph-plate b { color: #fff; font-weight: 800; }
@media (max-width: 560px) { .sh-s[data-theme="the-vault"] .ph-plate { font-size: 10.5px; letter-spacing: 0.14em; padding: 0.7em 0.9em 0.66em 1.04em; } }
.sh-s[data-theme="the-vault"] .ph-bg { opacity: 0.32; filter: saturate(0.7) brightness(0.7); }
.sh-s[data-theme="the-vault"] .ph-fx { background: radial-gradient(60% 60% at 50% 36%, rgba(235, 195, 100, 0.18), transparent 60%), radial-gradient(80% 80% at 50% 40%, transparent 30%, var(--t-bg) 85%); }
/* Tresortuer: kommt schon mit dem Hero (nicht erst nach den Effekten) und blendet langsam und weich auf, waehrend die Wand aufsteigt */
.sh-s[data-theme="the-vault"] .fx-vault { position: absolute; z-index: -1; left: 50%; top: calc(var(--head-h) + 10px); width: min(760px, 92vw); aspect-ratio: 1; transform: translateX(-50%) scale(0.92); pointer-events: none; opacity: 0; }
.sh-s[data-theme="the-vault"] .ph > .fx-vault { transition: opacity 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.15s, transform 3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
.sh-s[data-theme="the-vault"] .ph.ready > .fx-vault { opacity: 0.9; transform: translateX(-50%); }
.sh-s[data-theme="the-vault"] .fx-vault svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sh-s[data-theme="the-vault"] .fx-vault .vl { position: absolute; inset: 0; will-change: transform; }
.sh-s[data-theme="the-vault"] .fx-vault .vr { fill: rgba(16, 16, 19, 0.55); stroke: rgba(235, 195, 100, 0.45); stroke-width: 1.5; }
.sh-s[data-theme="the-vault"] .fx-vault .r1 { stroke-width: 3; stroke-dasharray: 4 10; }
.sh-s[data-theme="the-vault"] .fx-vault .vl-r1 { animation: the-vault-vspin 60s linear infinite; }
.sh-s[data-theme="the-vault"] .fx-vault .r3 { stroke: rgba(90, 220, 255, 0.45); filter: drop-shadow(0 0 10px rgba(90, 220, 255, 0.5)); }
.sh-s[data-theme="the-vault"] .fx-vault .bolt { fill: #24242a; stroke: rgba(235, 195, 100, 0.6); }
.sh-s[data-theme="the-vault"] .fx-vault .bolt.on { fill: #6b5520; }
.sh-s[data-theme="the-vault"] .fx-vault .vl-glow { opacity: 0; will-change: opacity; animation: the-vault-vbolt 3s ease-in-out infinite; }
@keyframes the-vault-vbolt { 50% { opacity: 1; } }
.sh-s[data-theme="the-vault"] .fx-vault .dial line { stroke: rgba(235, 195, 100, 0.7); stroke-width: 2; }
.sh-s[data-theme="the-vault"] .fx-vault .vl-dial { animation: the-vault-vdial 8s cubic-bezier(0.6, 0, 0.3, 1) infinite alternate; }
.sh-s[data-theme="the-vault"] .fx-vault .vl-wheel { animation: the-vault-vspin 30s linear infinite reverse; }
.sh-s[data-theme="the-vault"] .fx-vault .wheel rect, .sh-s[data-theme="the-vault"] .fx-vault .wheel circle { fill: rgba(40, 40, 46, 0.8); stroke: rgba(235, 195, 100, 0.6); stroke-width: 2; }
@keyframes the-vault-vspin { to { transform: rotate(360deg); } }
@keyframes the-vault-vdial { 0% { transform: rotate(0); } 30% { transform: rotate(140deg); } 60% { transform: rotate(40deg); } 100% { transform: rotate(250deg); } }
.sh-s[data-theme="the-vault"] .ph-cover .glow { background: radial-gradient(closest-side, rgba(235, 195, 100, 0.5), rgba(150, 110, 40, 0.18) 55%, transparent); }
.sh-s[data-theme="the-vault"] .btn--acc { background: linear-gradient(180deg, #f6d98a, #c99a3c); color: #120d02; box-shadow: 0 0 0 1px rgba(255, 220, 140, 0.6), 0 14px 44px -10px rgba(235, 195, 100, 0.7); }
.sh-s[data-theme="the-vault"] .ph-meta li + li::before, .sh-s[data-theme="the-vault"] .pb .gem { background: linear-gradient(135deg, #fff1c4, #b8862f); box-shadow: 0 0 10px rgba(235, 195, 100, 0.8); }
.sh-s[data-theme="the-vault"] .pd .num { background: linear-gradient(180deg, #fff4cf, #e2b85a 60%, #8d6420); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sh-s[data-theme="the-vault"] .pd-grid li { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 6px); }
/* Playlist der Vault-Seite */
.pl-pick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 18px; margin-bottom: 8px; }
.pl-pick::-webkit-scrollbar { display: none; }
.pl-pick button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid rgba(235, 195, 100, 0.25); font: 600 11px var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.pl-pick button img { width: 32px; height: 32px; object-fit: contain; }
.pl-pick button:hover { border-color: rgba(var(--pc), 0.8); color: #fff; }
.pl-pick button.on { background: rgba(var(--pc), 0.16); border-color: rgb(var(--pc)); color: #fff; }
/* Inhalt der Vault */
.vx-calc { padding: clamp(80px, 9vw, 130px) 0; background: radial-gradient(60% 80% at 80% 50%, rgba(235, 195, 100, 0.08), transparent 70%); }
.vx-cg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.vx-t { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--fg-2); max-width: 30em; }
.vx-up { margin-top: 24px; padding: 18px 20px; border: 1px dashed rgba(235, 195, 100, 0.45); border-radius: 12px; font-size: 14px; color: var(--fg-2); max-width: 34em; }
.vx-up b { color: #f3e2b4; }
.vx-up a { color: #f3e2b4; text-decoration: underline; text-underline-offset: 3px; }
.vx-bars { position: relative; display: grid; gap: 22px; padding: 34px; border: 1px solid rgba(235, 195, 100, 0.2); background: rgba(0, 0, 0, 0.3); }
.vx-b { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; font: 600 11px var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); }
.vx-b i { position: relative; height: 18px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.vx-b i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); background: rgba(255, 255, 255, 0.35); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-io) 0.4s; }
.vx-b.vlt i::after { background: linear-gradient(90deg, #c99a3c, #f6dc93); box-shadow: 0 0 20px rgba(235, 195, 100, 0.6); transition-delay: 1s; }
.vx-calc.in .vx-b i::after { transform: none; }
.vx-b b { font: 900 30px/1 var(--t-disp); color: var(--fg); letter-spacing: 0.02em; }
.vx-b.vlt b { color: #f3e2b4; }
.vx-save { position: absolute; right: 14px; top: -22px; padding: 10px 16px; transform: rotate(6deg); background: linear-gradient(180deg, #f6d98a, #c99a3c); color: #120d02; font: 900 34px/1 var(--t-disp); box-shadow: 0 16px 40px -10px rgba(235, 195, 100, 0.8); }
@media (max-width: 860px) { .vx-cg { grid-template-columns: minmax(0, 1fr); } .vx-b { grid-template-columns: 1fr auto; } .vx-b i { grid-column: 1 / -1; grid-row: 2; } }
/* Vault-Wand im Hero: 22 Boxen in vier Reihen, Reihen in der Tiefe gestaffelt (Parallaxe beim Kippen).
   Einblendung: Lichtkegel, dann steigen die Reihen von hinten nach vorn aus dem Dunkel (Mitte zuerst, kurzes Aufgluehen),
   der Boden leuchtet auf, ein Goldglanz zieht einmal ueber die ganze Wand und kehrt alle paar Sekunden wieder. */
.sh-s[data-theme="the-vault"] .vw-cover { width: min(740px, 94vw, var(--vw-max, calc(min(54vh, 500px) / 0.62))); opacity: 1; transform: none; filter: none !important; transition: none; }
.sh-s[data-theme="the-vault"] .vw-cover .tilt, .sh-s[data-theme="the-vault"] .vw-cover .float, .sh-s[data-theme="the-vault"] .vw-cover a { transform-style: preserve-3d; }
.sh-s[data-theme="the-vault"] .vw { position: relative; width: 100%; aspect-ratio: 1 / 0.62; transform-style: preserve-3d; will-change: transform; }
.sh-s[data-theme="the-vault"] .vw::before { content: ""; position: absolute; left: -12%; right: -12%; top: -45%; bottom: -12%; pointer-events: none; opacity: 0; transform: translateZ(-80px);
  background: radial-gradient(46% 56% at 50% 4%, rgba(255, 236, 180, 0.2), transparent 70%), conic-gradient(from 180deg at 50% -24%, transparent 158deg, rgba(255, 230, 170, 0.1) 170deg, rgba(255, 230, 170, 0.2) 180deg, rgba(255, 230, 170, 0.1) 190deg, transparent 202deg); }
/* Jede Reihe ist flach (transform-style: flat): ihre Boxen werden in fester Reihenfolge gezeichnet (Mitte vorn), statt in 3D
   gegeneinander sortiert zu werden. Sonst schnitten sich die leicht aufgefaecherten Nachbarboxen im Raum und Safari tauschte beim
   Drehen der Wand, welche vorn liegt. Tiefe gibt es nur zwischen den Reihen; perspective haelt das Kippen der einzelnen Box raeumlich. */
.sh-s[data-theme="the-vault"] .vw-r { position: absolute; inset: 0; transform-style: flat; perspective: 1400px; transform: translateZ(calc(var(--r) * 30px)); pointer-events: none; }
.sh-s[data-theme="the-vault"] .vw-b { position: absolute; aspect-ratio: 1; opacity: 0; transform: rotateY(calc(var(--k) * -4deg)); pointer-events: none; transform-style: flat; }
/* Traeger fuer die Eigenbewegung je Box (Traegheit, Wackeln); die Einblendung laeuft auf .vw-b, damit sich beides nicht ueberschreibt */
.sh-s[data-theme="the-vault"] .vw-w { position: absolute; inset: 0; transform-origin: 50% 80%; will-change: transform; }
/* Kein Schatten an der einzelnen Box: weder als Filter noch im Bild (eingebackene Schatten/Schleier entfernt, tools/assets.py
   wall_covers) noch als eigener Fleck darunter – jeder davon kippte oder schaute beim Wackeln als Feld neben der Box hervor.
   Halt gibt das Bodenlicht unter der ganzen Wand. */
.sh-s[data-theme="the-vault"] .vw-b img { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: 50% 100%; }
.sh-s[data-theme="the-vault"] .vw-sh { position: absolute; inset: 0; pointer-events: none; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  overflow: hidden; }
/* Glanzstreifen als eigene Ebene, die per transform durchlaeuft (vorher background-position: 22 maskierte Flaechen je Bild neu gemalt) */
.sh-s[data-theme="the-vault"] .vw-sh:not(.vw-fl)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; transform: translate3d(-34%, 0, 0); background: linear-gradient(105deg, transparent 44%, rgba(255, 236, 180, 0.6) 50%, transparent 56%); }
.sh-s[data-theme="the-vault"] .vw-floor { position: absolute; left: 2%; right: 2%; bottom: -8%; height: 20%; border-radius: 50%; pointer-events: none; opacity: 0; transform: translateZ(-2px);
  background: radial-gradient(closest-side, rgba(255, 220, 140, 0.5), rgba(150, 110, 40, 0.14) 62%, transparent); filter: blur(12px); }
.sh-s[data-theme="the-vault"] .ph.ready .vw::before { animation: the-vault-vwbeam 2.6s ease 0.05s both; }
.sh-s[data-theme="the-vault"] .ph.ready .vw-b.ok { opacity: 1; animation: the-vault-vwin 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--late, var(--dl)) backwards; }
.sh-s[data-theme="the-vault"] .ph.ready .vw-sh:not(.vw-fl)::before { animation: the-vault-vwsheen 9s cubic-bezier(0.45, 0, 0.25, 1) var(--sh) infinite; }
/* Aufgluehen beim Landen: eigene, mit dem Cover maskierte Ebene, nur Deckkraft (statt filter: brightness auf allen 22 Boxen) */
.sh-s[data-theme="the-vault"] .vw-fl { background: rgb(255, 238, 190); opacity: 0; }
.sh-s[data-theme="the-vault"] .ph.ready .vw-b.ok .vw-fl { animation: the-vault-vwflash 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--late, var(--dl)) + 0.3s) both; }
@keyframes the-vault-vwflash { 0% { opacity: 0; } 28% { opacity: 0.6; } 100% { opacity: 0; } }
/* Schein beim Einfahren: weiches, warmes Leuchten um die Form jeder Box, kommt mit dem Aufgluehen und geht wieder ganz weg
   (danach liegt nichts mehr neben der Box, das beim Bewegen mitwandern koennte). Unschaerfe ruht, bewegt wird nur die Deckkraft. */
.sh-s[data-theme="the-vault"] .vw-bl { position: absolute; inset: -14%; pointer-events: none; opacity: 0; filter: blur(16px); }
/* Schein = Flaeche des Covers (wie object-fit: contain unten mittig im Quadrat, --ar = Breite/Hoehe aus build.mjs), weichgezeichnet. Frueher
   die Cover-Silhouette als Maske: Google wertete den Schein dann als Bild und als "groesstes Element", erst wenn er aufleuchtete */
.sh-s[data-theme="the-vault"] .vw-bl i { position: absolute; bottom: 10.94%; width: calc(78.12% * min(var(--ar, 0.775), 1)); height: calc(78.12% * min(1, 1 / var(--ar, 0.775))); left: calc(50% - 39.06% * min(var(--ar, 0.775), 1)); border-radius: 4%; background: radial-gradient(closest-side, rgb(255, 226, 150), rgb(235, 175, 70)); }
.sh-s[data-theme="the-vault"] .ph.ready .vw-b.ok .vw-bl { animation: the-vault-vwbloom 1.9s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--late, var(--dl)) + 0.25s) both; }
@keyframes the-vault-vwbloom { 0% { opacity: 0; } 30% { opacity: 0.75; } 100% { opacity: 0; } }
.sh-s.now .vw-bl { animation-name: none !important; }
.sh-s[data-theme="the-vault"] .ph.ready .vw-floor { animation: the-vault-vwfloor 2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both; }
@keyframes the-vault-vwbeam { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes the-vault-vwin {
  0% { opacity: 0; transform: translate3d(0, 38%, -140px) rotateX(-30deg) rotateY(calc(var(--k) * -4deg)) scale(0.8); }
  100% { opacity: 1; transform: rotateY(calc(var(--k) * -4deg)); } }

@keyframes the-vault-vwsheen { 0% { transform: translate3d(-34%, 0, 0); } 13%, 100% { transform: translate3d(34%, 0, 0); } }
@keyframes the-vault-vwfloor { 0% { opacity: 0; transform: translateZ(-2px) scaleX(0.3); } 40% { opacity: 1; } 100% { opacity: 0.8; transform: translateZ(-2px); } }
@media (max-width: 860px) { .sh-s[data-theme="the-vault"] .vw-cover { width: 94vw; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } }
/* Ab Tablet-Breite eine Einheit fuer die ganze Buehne (--u, Bezug 1440 x 900 = 1px): Wand, Rad und Titel wachsen und schrumpfen
   gemeinsam mit dem Fenster – je nachdem, ob Breite oder Hoehe knapper ist. So bleibt das Bild auf 4K, 21:9, 32:9, im Hochformat und
   in jeder Zoomstufe gleich aufgebaut (vorher: Rad mit Hoechstmass oben festgemacht, Wand nach Hoehe gedeckelt – auf grossen
   Schirmen rutschte die Wand klein unter das Rad, auf 1280 x 720 schrumpfte sie zum Streifen). Das Rad sitzt um die Wand
   (Mitte und Groesse misst core.js als --cx/--cy/--ch); Preis, Knoepfe und Schilder wachsen auf sehr grossen Schirmen stufenweise mit. */
@media (min-width: 861px) {
  .sh-s[data-theme="the-vault"] .ph { --u: min(calc(100svh / 900), calc(100vw / 1440)); }
  .sh-s[data-theme="the-vault"] .vw-cover { width: calc(var(--vw-k, 740) * var(--u)); }
  .sh-s[data-theme="the-vault"] .ph-t { font-size: calc(172 * var(--u)); }
  .sh-s[data-theme="the-vault"] .fx-vault { left: var(--cx, 50%); top: calc(var(--cy, 40%) + var(--ch, 300px) * 0.45); width: calc(760 * var(--u)); transform: translate(-50%, -50%) scale(0.92); }
  .sh-s[data-theme="the-vault"] .ph.ready > .fx-vault { transform: translate(-50%, -50%); }
  /* Raumtiefe mitskalieren (feste Pixel liessen die Wand auf grossen Schirmen anders kippen als auf dem Laptop) */
  .sh-s[data-theme="the-vault"] .vw-cover { perspective: calc(1200 * var(--u)); padding: calc(60 * var(--u)) calc(80 * var(--u)) calc(100 * var(--u)); margin: calc(-60 * var(--u)) calc(-80 * var(--u)) calc(-100 * var(--u)); }
  .sh-s[data-theme="the-vault"] .ph-grid.wrap { width: min(calc(1400 * var(--u)), calc(100% - 2 * var(--gut))); }
  .sh-s[data-theme="the-vault"] .vw-r { perspective: calc(1400 * var(--u)); transform: translateZ(calc(var(--r) * 30 * var(--u))); }
  /* Textbereich waechst mit, sonst bricht der Titel auf 4K in zwei Zeilen */
  .sh-s[data-theme="the-vault"] .ph-copy { width: min(calc(960 * var(--u)), 100%); }
}
@media (min-width: 2200px) and (min-height: 1250px) { .sh-s[data-theme="the-vault"] .ph-s, .sh-s[data-theme="the-vault"] .ph-plate, .sh-s[data-theme="the-vault"] .ph-buy, .sh-s[data-theme="the-vault"] .ph-meta { zoom: 1.35; } }
@media (min-width: 3000px) and (min-height: 1700px) { .sh-s[data-theme="the-vault"] .ph-s, .sh-s[data-theme="the-vault"] .ph-plate, .sh-s[data-theme="the-vault"] .ph-buy, .sh-s[data-theme="the-vault"] .ph-meta { zoom: 1.8; } }

/* ================= Welten: was man mit der Vault vertont ================= */
.vwd ul, .vxe ul, .vxt ul, .vxl ol, .vxd dl { list-style: none; margin: 0; padding: 0; }
.vwd li, .vxe li, .vxl li { list-style: none; }
.vwd { padding: clamp(80px, 9vw, 130px) 0; }
.vwd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(28px, 4vw, 48px); }
.vwd-lead { max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.vwd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Karte: Bild oben, darunter alles oben ausgerichtet (Ueberschriften einer Reihe auf gleicher Hoehe), kompakt */
.vwd-c { --pc: 235, 195, 100; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; display: flex; flex-direction: column; background: #0c0c0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); transition: box-shadow 0.4s, opacity 0.7s var(--ease) calc(var(--d, 0) * 0.75ms), translate 0.85s var(--ease-out) calc(var(--d, 0) * 0.75ms), scale 0.85s var(--ease-out) calc(var(--d, 0) * 0.75ms); }
.vwd-c:hover { box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.55), 0 30px 70px -30px rgba(var(--pc), 0.45); }
.vwd-bg { position: absolute; inset: 0 0 auto; z-index: -2; width: 100%; height: 72%; object-fit: cover; object-position: 50% 25%; opacity: 0.8; transform: scale(1.04); transition: transform 1.2s var(--ease-out), opacity 0.5s; }
.vwd-c:hover .vwd-bg { transform: scale(1.1); opacity: 0.95; }
.vwd-c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.4) 18%, rgba(10, 10, 12, 0.94) 40%, #0a0a0c 58%); }
.vwd-in { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: clamp(150px, 13vw, 200px) 22px 24px; }
.vwd-n { display: flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.vwd-n b { font: 900 14px/1 var(--t-disp); color: rgb(var(--pc)); letter-spacing: 0.06em; }
.vwd-c h3 { font: 900 clamp(26px, 2.4vw, 36px)/0.95 var(--t-disp); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; white-space: nowrap; }
.vwd-l { font-size: 14px; line-height: 1.55; color: var(--fg-2); min-height: 3.1em; }
.vwd-libs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.vwd-libs a { --pc: 255, 255, 255; display: grid; place-items: center; width: 52px; height: 58px; border-radius: 10px; transition: background-color 0.25s, transform 0.3s var(--ease); }
.vwd-libs a:hover, .vwd-libs a:focus-visible { background: rgba(var(--pc), 0.14); transform: translateY(-3px); }
.vwd-libs img { height: 52px; width: auto; max-width: 48px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.vwd-names { font: 600 9px/1.5 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.vwd-build { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 1100px) { .vwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vwd-grid { grid-template-columns: minmax(0, 1fr); } .vwd-in { padding-top: 140px; } .vwd-l { min-height: 0; } .vwd-c h3 { white-space: normal; } }

/* ================= Explorer: alle 22 mit Inhalt, Zahlen, Paketen, Hoerprobe ================= */
.vxe { padding: clamp(80px, 9vw, 130px) 0; }
.vxe-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 28px; }
.vxe-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.vxe-tabs button { height: 38px; padding: 0 16px; border-radius: 999px; font: 600 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); box-shadow: inset 0 0 0 1px rgba(235, 195, 100, 0.28); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.vxe-tabs button:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(235, 195, 100, 0.6); }
.vxe-tabs button.on { color: #120d02; background: linear-gradient(180deg, #f6d98a, #c99a3c); box-shadow: none; }
.vxe-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.vxe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; outline: none; }
.vxe-i { --pc: 255, 255, 255; position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); transition: background-color 0.25s, box-shadow 0.25s; }
.vxe-i[hidden] { display: none; }
.vxe-i.show { animation: the-vault-vxe-in 0.45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes the-vault-vxe-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); } }
.vxe-i img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); transition: transform 0.4s var(--ease); }
.vxe-i b { max-width: 100%; font: 400 15px/1 var(--disp); text-transform: uppercase; color: #f3f1ec; overflow-wrap: anywhere; transition: color 0.25s; }
.vxe-i small { font: 500 8.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.vxe-i:hover, .vxe-i:focus-visible { background: rgba(var(--pc), 0.07); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.4); }
.vxe-i:hover img { transform: translateY(-3px) scale(1.05); }
.vxe-i.on { background: rgba(var(--pc), 0.12); box-shadow: inset 0 0 0 1.5px rgb(var(--pc)), 0 16px 40px -20px rgba(var(--pc), 0.7); }
.vxe-i.on b { color: rgb(var(--pc)); }
.vxe-panel { position: sticky; top: calc(var(--head-h) + var(--bb-h, 0px) + 20px); transition: top 0.35s var(--ease); }
.vxd { --pc: 255, 255, 255; position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-radius: 20px; overflow: hidden; background: #0d0d10; box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.28), 0 40px 90px -40px rgba(var(--pc), 0.4); }
.vxd[hidden] { display: none; }
.vxd.on { animation: the-vault-vxd-in 0.5s var(--ease-out) both; }
@keyframes the-vault-vxd-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
.vxd-art { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 30px 18px; }
.vxd-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vxd-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 46% at 50% 58%, rgba(var(--pc), 0.4), transparent 70%), linear-gradient(90deg, rgba(13, 13, 16, 0.2) 30%, #0d0d10); }
.vxd-box { width: min(230px, 92%); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.75)); }
.vxd.on .vxd-box { animation: the-vault-vxd-box 0.75s var(--ease-out) 0.05s both; }
@keyframes the-vault-vxd-box { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.94); } }
.vxd-tx { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px 8px; }
.vxd-k { font: 600 9px/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: rgb(var(--pc)); }
.vxd-k em { font-style: normal; color: #fff; }
.vxd h3 { font: 400 clamp(34px, 3.2vw, 50px)/0.9 var(--disp); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.vxd-s { margin-top: -6px; font: 600 10px/1.3 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.vxd-tag { font: italic 500 15px/1.4 var(--body); color: #f3e2b4; }
.vxd-d { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.vxd-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.vxd-n div { padding: 10px 10px 9px; background: #131317; }
.vxd-n dt { font: 600 8px/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); }
.vxd-n dd { margin: 7px 0 0; font: 900 24px/1 var(--t-disp); color: #f3e2b4; letter-spacing: 0.02em; white-space: nowrap; }
.vxd-p { display: grid; gap: 5px; }
.vxd-p li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 3px 0 0 rgba(var(--pc), 0.85); }
.vxd-p li.k-mod { box-shadow: inset 3px 0 0 rgba(var(--pc), 0.45); }
.vxd-p li.k-ds { box-shadow: inset 3px 0 0 #f3e2b4; }
.vxd-p b { font: 600 12px/1.25 var(--body); letter-spacing: 0.03em; color: #fff; }
.vxd-p span { font: 500 10px/1.25 var(--mono); color: var(--mute); text-align: right; }
.vxd-c { display: flex; flex-wrap: wrap; gap: 5px; }
.vxd-c li { padding: 5px 9px 4px; border-radius: 6px; font: 500 10px/1.2 var(--mono); color: var(--fg-2); background: rgba(255, 255, 255, 0.05); }
.vxd-c li.more { color: rgb(var(--pc)); }
.vxd-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.vxd-play { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: rgb(var(--pc)); color: #0b0b0b; font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 10px 26px -10px rgba(var(--pc), 0.8); transition: transform 0.3s var(--ease); }
.vxd-play .pi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.16); }
.vxd-play svg { width: 12px; height: 12px; }
.vxd-play:not(.is-on) .pi svg { margin-left: 2px; }
.vxd-play:hover { transform: translateY(-1px); }
.vxd-pr { margin-left: auto; font: 600 14px/1 var(--mono); color: var(--fg); white-space: nowrap; }
.vxd-pr small { font-size: 10px; color: var(--mute); }
@media (max-width: 1100px) {
  .vxe-grid { grid-template-columns: minmax(0, 1fr); }
  .vxe-panel { position: relative; top: 0; }
  .vxe-list { display: flex; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
  .vxe-list::-webkit-scrollbar { display: none; }
  .vxe-i { flex: none; width: 116px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .vxd { grid-template-columns: minmax(0, 1fr); }
  .vxd-art { min-height: 230px; }
  .vxd-art::after { background: radial-gradient(60% 46% at 50% 58%, rgba(var(--pc), 0.4), transparent 70%), linear-gradient(180deg, rgba(13, 13, 16, 0.2) 40%, #0d0d10); }
  .vxd-tx { padding: 0 18px 20px; }
}

/* ================= Stufen: roh, modular, fertig ================= */
.vxt { padding: clamp(80px, 9vw, 130px) 0; background: radial-gradient(50% 60% at 50% 0%, rgba(235, 195, 100, 0.06), transparent 70%); }
.vxt-head { max-width: 780px; margin: 0 auto clamp(30px, 4vw, 52px); text-align: center; }
.vxt-head .kick { justify-content: center; }
.vxt-lead { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.vxt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; }
.vxt-arrow { position: relative; align-self: center; justify-self: center; width: 26px; height: 2px; background: linear-gradient(90deg, rgba(235, 195, 100, 0.2), rgba(235, 195, 100, 0.9)); }
.vxt-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border: solid rgba(235, 195, 100, 0.9); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.vxt-c { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); box-shadow: inset 0 0 0 1px rgba(235, 195, 100, 0.18); }
.vxt-c.k-ds { box-shadow: inset 0 0 0 1px rgba(235, 195, 100, 0.5), 0 30px 70px -40px rgba(235, 195, 100, 0.5); }
.vxt-i { font: 900 54px/0.9 var(--t-disp); color: transparent; -webkit-text-stroke: 1px rgba(235, 195, 100, 0.65); }
.vxt-c h3 { font: 900 30px/1 var(--t-disp); text-transform: uppercase; letter-spacing: 0.02em; color: #f3e2b4; }
.vxt-c > p { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.vxt-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font: 500 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.vxt-n b { margin-right: 5px; font: 900 24px/1 var(--t-disp); letter-spacing: 0.02em; color: #fff; }
.vxt-boxes { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; padding-top: 10px; }
.vxt-boxes a { --pc: 255, 255, 255; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; transition: background-color 0.25s, transform 0.3s var(--ease); }
.vxt-boxes a:hover, .vxt-boxes a:focus-visible { background: rgba(var(--pc), 0.16); transform: translateY(-3px); }
.vxt-boxes img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
@media (max-width: 900px) { .vxt-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .vxt-arrow { transform: rotate(90deg); margin: 18px 0; } }

/* ================= Zeitleiste ================= */
.vxl { padding: clamp(70px, 8vw, 120px) 0; }
.vxl-head { margin-bottom: clamp(30px, 4vw, 50px); }
.vxl ol.vxl-line, .vxl-line { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding-top: 36px; }
.vxl-line::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: linear-gradient(90deg, rgba(235, 195, 100, 0.08), rgba(235, 195, 100, 0.75) 60%, rgba(235, 195, 100, 0.2)); }
.vxl-line li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vxl-line li::before { content: ""; position: absolute; top: -27px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #0b0b0d; box-shadow: inset 0 0 0 2px #e9c56e, 0 0 14px rgba(235, 195, 100, 0.6); }
.vxl-y { font: 900 36px/1 var(--t-disp); letter-spacing: 0.02em; color: #f3e2b4; }
.vxl-c { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.vxl-b { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.vxl-b a { --pc: 255, 255, 255; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 6px 4px 2px; border-radius: 8px; transition: background-color 0.25s; }
.vxl-b a:hover, .vxl-b a:focus-visible { background: rgba(var(--pc), 0.13); }
.vxl-b img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.vxl-b span { min-width: 0; font: 400 13px/1.05 var(--disp); text-transform: uppercase; color: var(--fg-2); overflow-wrap: anywhere; transition: color 0.25s; }
.vxl-b a:hover span { color: rgb(var(--pc)); }
@media (max-width: 900px) {
  .vxl ol.vxl-line { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 0 0 28px; }   /* .vxl ol setzt padding sonst auf 0 */
  .vxl-line::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(235, 195, 100, 0.1), rgba(235, 195, 100, 0.75) 60%, rgba(235, 195, 100, 0.2)); }
  .vxl-line li::before { top: 10px; left: -28px; }
  .vxl-b { flex-direction: row; flex-wrap: wrap; }
  .vxl-b a { grid-template-columns: 30px auto; }
  .vxl-b img { width: 30px; height: 30px; }
}

/* Rechnung: der Einzelpreis setzt sich aus 22 farbigen Scheiben zusammen */
.vx-b i.vx-seg { display: flex; gap: 1px; background: none; overflow: visible; }
.vx-b i.vx-seg::after { display: none; }
.vx-seg em { flex: var(--w) 1 0; min-width: 2px; height: 100%; border-radius: 2px; background: rgb(var(--pc)); opacity: 0.82; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.5s var(--ease-out), opacity 0.2s; transition-delay: calc(var(--k) * 32ms); }
.vx-calc.in .vx-seg em { transform: none; }
.vx-seg em.own { opacity: 0.2; }   /* Upgrade: schon im Besitz */
.vx-seg em:hover { opacity: 1; transform: scaleY(1.35); transition-delay: 0s; }
.vx-legend { margin-top: -6px; font: 500 10px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--mute); }
/* Eintraege hoher Bausteine (Welt-Karten, Explorer, Stufen, Zeitleiste) blenden einzeln ein, wenn sie selbst ins Bild kommen
   (core.js ITEMS); per translate, damit eigene Hover-Bewegungen (transform) unberuehrt bleiben */
.vxe-i, .vwd-libs li, .vwd-build, .vxt-boxes a, .vxl-b a { opacity: 0; translate: 0 12px; }
.vxe-i.in, .vwd-libs li.in, .vwd-build.in, .vxt-boxes a.in, .vxl-b a.in { opacity: 1; translate: none; }
.vwd-libs li, .vwd-build { transition: opacity 0.5s ease, translate 0.6s var(--ease-out); transition-delay: calc(var(--rk, 0) * 45ms); }
.vxe-i { transition: opacity 0.5s ease calc(var(--rk, 0) * 35ms), translate 0.6s var(--ease-out) calc(var(--rk, 0) * 35ms), background-color 0.25s, box-shadow 0.25s; }
.vxt-boxes a { transition: opacity 0.5s ease calc(var(--rk, 0) * 30ms), translate 0.6s var(--ease-out) calc(var(--rk, 0) * 30ms), background-color 0.25s, transform 0.3s var(--ease); }
.vxl-b a { transition: opacity 0.5s ease calc(var(--rk, 0) * 40ms), translate 0.6s var(--ease-out) calc(var(--rk, 0) * 40ms), background-color 0.25s; }

/* Stichworte (Welten, Explorer): fuer Suchmaschinen im Text, aber nicht sichtbar – sichtbar waren sie zu viel */
.vwd-build, .vxd-c { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* ================= Vault-Seite: Buehne hinter der Wand (nur die eigene Seite, nicht die Startseiten-Folie) ================= */
html[data-product="the-vault"] .ph-bg { opacity: 0.5; filter: saturate(0.9) brightness(0.85); }
html[data-product="the-vault"] .vst { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
/* Lage ueber translate (die Mitte misst core.js erst nach dem Laden) – left/top wuerden als Layoutsprung zaehlen */
html[data-product="the-vault"] .vst > i { position: absolute; left: 0; top: 0; translate: var(--cx, 50vw) var(--cy, 40svh); border-radius: 50%; }
/* Strahlen: einmal gemalt, gedreht wird nur die Ebene */
html[data-product="the-vault"] .vst-rays { width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 128, 0.15) 0deg 3.2deg, transparent 3.2deg 11deg); animation: the-vault-vst-spin 110s linear infinite; transition: opacity 2.4s ease 0.4s; }
html[data-product="the-vault"] .ph.ready .vst-rays { opacity: 1; }
html[data-product="the-vault"] .vst-core { width: 78vmin; height: 78vmin; margin: -39vmin 0 0 -39vmin; background: radial-gradient(closest-side, rgba(255, 230, 160, 0.42), rgba(235, 180, 70, 0.16) 45%, transparent 72%); opacity: 0; animation: the-vault-vst-pulse 5s ease-in-out infinite alternate; transition: opacity 2s ease 0.3s; }
html[data-product="the-vault"] .ph.ready .vst-core { opacity: 1; }
html[data-product="the-vault"] .vst-vig { width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: radial-gradient(closest-side, transparent 12%, rgba(6, 6, 6, 0.55) 30%, #060606 46%); }
@keyframes the-vault-vst-spin { to { transform: rotate(360deg); } }
@keyframes the-vault-vst-pulse { from { transform: scale(0.92); } to { transform: scale(1.08); } }
html[data-product="the-vault"] .ph-dust i { background: rgb(255, 222, 140); box-shadow: 0 0 10px rgba(255, 210, 120, 0.95), 0 0 2px #fff; }

/* Ankunft: Tresortueren (ganzer Bildschirm), Riegel fahren ein, die Fluegel gleiten auf, dahinter bricht Goldlicht hervor */
html[data-product="the-vault"] .vdoor { display: none; }
html.vd-go[data-product="the-vault"] .vdoor { display: block; position: fixed; inset: 0; z-index: 95; pointer-events: none; animation: the-vault-vd-away 0.45s ease 1.55s both; }
html.vd-go[data-product="the-vault"] .hd, html.vd-go[data-product="the-vault"] .cc { animation-delay: 1.1s; }
.vd-h { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50.6%; overflow: hidden; will-change: transform;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px), linear-gradient(180deg, #19191e 0%, #0e0e11 52%, #16161a 100%); box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85); }
.vd-l { left: 0; box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85), inset -2px 0 0 rgba(235, 195, 100, 0.75); animation: the-vault-vd-open-l 1.15s cubic-bezier(0.78, 0, 0.2, 1) 0.42s both; }
.vd-r { right: 0; box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85), inset 2px 0 0 rgba(235, 195, 100, 0.75); animation: the-vault-vd-open-r 1.15s cubic-bezier(0.78, 0, 0.2, 1) 0.42s both; }
@keyframes the-vault-vd-open-l { to { transform: translate3d(-102%, 0, 0); } }
@keyframes the-vault-vd-open-r { to { transform: translate3d(102%, 0, 0); } }
/* Rad in der Fuge: dreht sich zum Entriegeln, je Fluegel eine Haelfte */
.vd-ring { position: absolute; top: 50%; width: 52vmin; height: 52vmin; margin-top: -26vmin; border-radius: 50%; animation: the-vault-vd-turn 0.5s cubic-bezier(0.6, 0, 0.3, 1) both;
  background: radial-gradient(closest-side, #101013 0 44%, rgba(235, 195, 100, 0.65) 44.6% 46%, transparent 46.6% 62%, rgba(235, 195, 100, 0.45) 62.6% 64%, transparent 64.6%), repeating-conic-gradient(rgba(235, 195, 100, 0.5) 0deg 1.6deg, transparent 1.6deg 30deg);
  box-shadow: 0 0 0 2px rgba(235, 195, 100, 0.35), 0 0 60px rgba(0, 0, 0, 0.8); }
.vd-l .vd-ring { right: -26vmin; }
.vd-r .vd-ring { left: -26vmin; }
@keyframes the-vault-vd-turn { to { transform: rotate(-60deg); } }
/* Tresorrad: erscheint, wird kurz angefasst (Gegenzug) und aufgedreht, dann gehen die Tueren auf (0,42 s) */
.vd-wheel { position: absolute; z-index: 2; top: 50%; width: 40vmin; height: 40vmin; margin-top: -20vmin; will-change: transform; animation: the-vault-vd-wheel 0.62s cubic-bezier(0.55, 0, 0.25, 1) both; }
.vd-l .vd-wheel { right: -20vmin; }
.vd-r .vd-wheel { left: -20vmin; }
.vd-wheel svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.75)); }
.vd-wheel .w-rim { fill: none; stroke: rgba(235, 195, 100, 0.55); stroke-width: 5; }
.vd-wheel .w-spk { fill: #2a2a30; stroke: rgba(235, 195, 100, 0.75); stroke-width: 2; }
.vd-wheel .w-grip { fill: #8a6424; stroke: #f6dc93; stroke-width: 2.5; }
.vd-wheel .w-hub { fill: #1c1c21; stroke: rgba(235, 195, 100, 0.85); stroke-width: 3; }
.vd-wheel .w-cap { fill: #f6dc93; }
@keyframes the-vault-vd-wheel { 0% { transform: rotate(0) scale(0.94); } 18% { transform: rotate(10deg) scale(1); } 100% { transform: rotate(-110deg) scale(1); } }
/* Nach dem Oeffnen nicht mehr im Hintergrund: Rad und Zahlenring gibt es auf der Vault-Seite nur auf der Tuer (Startseite behaelt sie) */
html[data-product="the-vault"] main > .ph > .fx-vault :is(.vl-wheel, .vl-dial) { display: none; }
/* Riegel in der Fuge: gluehen auf und fahren ein */
.vd-seam { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 0; }
.vd-seam i { position: absolute; left: -9px; top: calc(6% + var(--i) * 10.8%); width: 18px; height: 34px; border-radius: 4px; background: linear-gradient(90deg, #8a6424, #f6dc93 50%, #8a6424);
  box-shadow: 0 0 16px rgba(255, 214, 120, 0.85); animation: the-vault-vd-bolt 0.34s cubic-bezier(0.6, 0, 0.8, 0.3) calc(0.1s + var(--i) * 0.018s) both; }
@keyframes the-vault-vd-bolt { 0% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0.05); opacity: 0; } }
/* Lichtausbruch hinter den Fluegeln */
.vd-burst { position: absolute; z-index: 0; left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%; opacity: 0; animation: the-vault-vd-burst 1.7s cubic-bezier(0.2, 0.8, 0.3, 1) 0.4s both;
  background: radial-gradient(closest-side, rgba(255, 250, 230, 1) 0%, rgba(255, 224, 150, 0.85) 9%, rgba(240, 180, 70, 0.4) 24%, rgba(200, 140, 40, 0.12) 42%, transparent 62%); }
.vd-burst i { position: absolute; inset: 18%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 236, 180, 0.4) 0deg 2.5deg, transparent 2.5deg 9deg); animation: the-vault-vst-spin 6s linear infinite; }
@keyframes the-vault-vd-burst { 0% { opacity: 0; transform: scale(0.15); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes the-vault-vd-away { to { opacity: 0; visibility: hidden; } }

/* ================= Trailer-Roehre: liegendes Glasrohr, Trailer rollen wie auf einer Walze durch, die mittlere spielt ohne Ton ================= */
.vtt { position: relative; isolation: isolate; padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 6vw, 80px); overflow: hidden; }
.vtt-glow { position: absolute; z-index: -2; left: 50%; top: 56%; width: min(1500px, 140vw); height: 520px; margin: -260px 0 0 calc(min(1500px, 140vw) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.34), rgba(235, 170, 60, 0.12) 48%, transparent 72%); animation: the-vault-vst-pulse 6s ease-in-out infinite alternate; }
.vtt-dust { z-index: -1; }
.vtt-head { margin-bottom: clamp(22px, 3vw, 36px); }
.vtt-tube { --h: clamp(230px, 25vw, 380px); position: relative; height: var(--h); margin: 0 auto; width: min(1500px, calc(100% - 2 * var(--gut))); border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #0e0d0b 0%, #050505 50%, #0b0a08 100%); box-shadow: 0 0 0 1px rgba(235, 195, 100, 0.42), 0 0 0 6px rgba(235, 195, 100, 0.06), 0 30px 90px -30px rgba(235, 180, 70, 0.55), 0 0 120px -40px rgba(255, 214, 120, 0.6); }
/* flach: Kacheln einzeln perspektivisch, gemalt nach z-index – sonst schneiden sich die schraegen Nachbarn (Safari/Chrome) */
.vtt-track { position: absolute; inset: 0; transform-style: flat; perspective: 1500px; }
/* Kachel: Lage per JS (--x Verschiebung, --ry Drehung, --s Groesse, --op Deckkraft) – nur transform/opacity */
.vtt-i { --pc: 255, 255, 255; position: absolute; left: 50%; top: 50%; width: calc(var(--h) * 1.62); height: calc(var(--h) * 0.86); margin: calc(var(--h) * -0.43) 0 0 calc(var(--h) * -0.81); border-radius: 18px; overflow: hidden; background: #000;
  transform: translate3d(var(--x, 0px), 0, var(--z, 0px)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); opacity: var(--op, 1); transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.7s ease; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 18px -12px rgba(0, 0, 0, 0.9); }   /* Schatten passt in die Walze (Abstand oben/unten 7 % der Hoehe) */
.vtt-i.jump { transition: none; }
.vtt-i img, .vtt-i iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vtt-i iframe { pointer-events: none; opacity: 0; transition: opacity 0.8s ease; transform: scale(1.02); }
.vtt-i iframe.on { opacity: 1; }
.vtt-i img { transition: transform 9s linear; }
.vtt-i.on img { transform: scale(1.08); }
.vtt-i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent 45%); pointer-events: none; }
.vtt-cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 14px; display: grid; gap: 4px; text-align: left; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.vtt-i.on .vtt-cap { opacity: 1; transform: none; transition-delay: 0.35s; }
.vtt-cap b { font: 900 clamp(20px, 2vw, 30px)/0.95 var(--t-disp); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.vtt-cap small { font: 600 9px/1.2 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--pc)); }
.vtt-pl { position: absolute; z-index: 2; right: 16px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #0a0a0a; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s var(--ease); }
.vtt-pl svg { width: 15px; height: 15px; margin-left: 2px; }
.vtt-i.on .vtt-pl { opacity: 0.9; transform: none; transition-delay: 0.4s; }
.vtt-i.on:hover .vtt-pl { transform: scale(1.08); opacity: 1; }
/* Glas: Lichtkante oben, Spiegelung, dunkle Unterseite, Enden kruemmen sich weg */
.vtt-glass { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.22) 0%, rgba(255, 246, 220, 0.05) 14%, transparent 32%, transparent 66%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.25) 12%, transparent 24%, transparent 76%, rgba(5, 5, 5, 0.25) 88%, rgba(5, 5, 5, 0.96) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 240, 200, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(255, 214, 120, 0.12); }
.vtt-on { display: grid; margin-left: 8px; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px;
  background: rgba(10, 10, 10, 0.72); box-shadow: 0 0 0 1px rgba(235, 195, 100, 0.6); color: #fff; font: 700 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.vtt-on svg { grid-row: span 2; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #f3e2b4; color: #120d02; }
.vtt-on small { font: 500 9px/1 var(--mono); letter-spacing: 0.04em; text-transform: none; color: var(--mute); margin-top: 4px; }
.vtt-on[hidden] { display: none; }
.vtt-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.vtt-on:hover { box-shadow: 0 0 0 1px #f3e2b4, 0 0 30px -6px rgba(235, 195, 100, 0.6); }
.vtt-bar { position: relative; width: min(420px, 50vw); height: 3px; border-radius: 3px; background: rgba(235, 195, 100, 0.18); overflow: hidden; }
.vtt-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #c99a3c, #f6dc93); transform-origin: left; transform: scaleX(0); }
.vtt-bar i.run { animation: the-vault-vtt-run var(--t, 9s) linear both; }
@keyframes the-vault-vtt-run { to { transform: scaleX(1); } }
@media (max-width: 720px) {
  .vtt-tube { --h: 220px; width: calc(100% - 20px); border-radius: 28px; }
  .vtt-i { width: calc(100vw - 80px); height: calc((100vw - 80px) * 0.5625); margin: calc((100vw - 80px) * -0.28125) 0 0 calc((100vw - 80px) * -0.5); }
  .vtt-on { order: 5; margin: 2px 0 0; }
  .vtt { padding-bottom: 8px; }
  .vtt-bar { width: calc(100vw - 200px); }
}

/* ---------- Handy und Tablet (13.11.2026, gemessen auf einem Android-Handy, DPR 3,25): je Box Glanz, Blitz und Schein als eigene
   Ebenen = ueber 130 Ebenen, mehr als der Grafikspeicher fasst – Boxen und Schriftzug fehlten kurz. Hier nur noch das Einfliegen. ---------- */
@media (pointer: coarse), (max-width: 1024px) {
  .sh-s[data-theme="the-vault"] .vw-sh, .sh-s[data-theme="the-vault"] .vw-fl, .sh-s[data-theme="the-vault"] .vw-bl { display: none; }
  .sh-s[data-theme="the-vault"] .vw-w { will-change: auto; }
  .sh-s[data-theme="the-vault"] .vw { will-change: auto; }
  .sh-s[data-theme="the-vault"] .in > .fxt { animation: none; }
}

/* untamed */
/* UNTAMED · nach rtsb-untamed-blocks: Streifenschrift, Scanlines, Glitch */
.sh-s[data-theme="untamed"] .fxt {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 1px, rgba(0, 0, 0, 0) 1px 0.085em), repeating-linear-gradient(180deg, rgb(var(--hi)) 0 0.055em, rgb(var(--acc)) 0.055em 0.11em, rgb(var(--lo)) 0.11em 0.14em);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.09em rgba(var(--acc), 0.55)) drop-shadow(0 0 0.35em rgba(var(--acc), 0.18)); }
.sh-s[data-theme="untamed"] .ph-fx::after, .sh-s[data-theme="untamed"] .pt-shade::after, .sh-s[data-theme="untamed"] .pv-scan, .sh-s[data-theme="untamed"] .pe-fx::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.sh-s[data-theme="untamed"] .pd::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
.sh-s[data-theme="untamed"] .pd .num { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 0.085em), repeating-linear-gradient(180deg, rgb(var(--hi)) 0 0.055em, rgb(var(--acc)) 0.055em 0.11em, rgb(var(--lo)) 0.11em 0.14em); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sh-s[data-theme="untamed"] .pv-scan { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }