/* THE VAULT · Stahl und Gold, Tresortuer hinter der Box-Pyramide */
html[data-theme] .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 */
html[data-theme] .in > .fxt { animation: vgold 6s ease-in-out 1.2s; }
@keyframes vgold { 50% { background-position: 100% 0; } }
html[data-theme] .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 */
html[data-theme] .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) { html[data-theme] .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 */
html[data-theme] .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); }
html[data-theme] .ph-plate b { color: #fff; font-weight: 800; }
@media (max-width: 560px) { html[data-theme] .ph-plate { font-size: 10.5px; letter-spacing: 0.14em; padding: 0.7em 0.9em 0.66em 1.04em; } }
html[data-theme] .ph-bg { opacity: 0.32; filter: saturate(0.7) brightness(0.7); }
html[data-theme] .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 */
html[data-theme] .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; }
html[data-theme] .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; }
html[data-theme] .ph.ready > .fx-vault { opacity: 0.9; transform: translateX(-50%); }
html[data-theme] .fx-vault svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[data-theme] .fx-vault .vl { position: absolute; inset: 0; will-change: transform; }
html[data-theme] .fx-vault .vr { fill: rgba(16, 16, 19, 0.55); stroke: rgba(235, 195, 100, 0.45); stroke-width: 1.5; }
html[data-theme] .fx-vault .r1 { stroke-width: 3; stroke-dasharray: 4 10; }
html[data-theme] .fx-vault .vl-r1 { animation: vspin 60s linear infinite; }
html[data-theme] .fx-vault .r3 { stroke: rgba(90, 220, 255, 0.45); filter: drop-shadow(0 0 10px rgba(90, 220, 255, 0.5)); }
html[data-theme] .fx-vault .bolt { fill: #24242a; stroke: rgba(235, 195, 100, 0.6); }
html[data-theme] .fx-vault .bolt.on { fill: #6b5520; }
html[data-theme] .fx-vault .vl-glow { opacity: 0; will-change: opacity; animation: vbolt 3s ease-in-out infinite; }
@keyframes vbolt { 50% { opacity: 1; } }
html[data-theme] .fx-vault .dial line { stroke: rgba(235, 195, 100, 0.7); stroke-width: 2; }
html[data-theme] .fx-vault .vl-dial { animation: vdial 8s cubic-bezier(0.6, 0, 0.3, 1) infinite alternate; }
html[data-theme] .fx-vault .vl-wheel { animation: vspin 30s linear infinite reverse; }
html[data-theme] .fx-vault .wheel rect, html[data-theme] .fx-vault .wheel circle { fill: rgba(40, 40, 46, 0.8); stroke: rgba(235, 195, 100, 0.6); stroke-width: 2; }
@keyframes vspin { to { transform: rotate(360deg); } }
@keyframes vdial { 0% { transform: rotate(0); } 30% { transform: rotate(140deg); } 60% { transform: rotate(40deg); } 100% { transform: rotate(250deg); } }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(235, 195, 100, 0.5), rgba(150, 110, 40, 0.18) 55%, transparent); }
html[data-theme] .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); }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { background: linear-gradient(135deg, #fff1c4, #b8862f); box-shadow: 0 0 10px rgba(235, 195, 100, 0.8); }
html[data-theme] .pd .num { background: linear-gradient(180deg, #fff4cf, #e2b85a 60%, #8d6420); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme] .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. */
html[data-theme] .vw-cover { width: min(740px, 94vw, var(--vw-max, calc(min(54vh, 500px) / 0.62))); opacity: 1; transform: none; filter: none !important; transition: none; }
html[data-theme] .vw-cover .tilt, html[data-theme] .vw-cover .float, html[data-theme] .vw-cover a { transform-style: preserve-3d; }
html[data-theme] .vw { position: relative; width: 100%; aspect-ratio: 1 / 0.62; transform-style: preserve-3d; will-change: transform; }
html[data-theme] .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. */
html[data-theme] .vw-r { position: absolute; inset: 0; transform-style: flat; perspective: 1400px; transform: translateZ(calc(var(--r) * 30px)); pointer-events: none; }
html[data-theme] .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 */
html[data-theme] .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. */
html[data-theme] .vw-b img { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: 50% 100%; }
html[data-theme] .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) */
html[data-theme] .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%); }
html[data-theme] .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); }
html[data-theme] .ph.ready .vw::before { animation: vwbeam 2.6s ease 0.05s both; }
html[data-theme] .ph.ready .vw-b.ok { opacity: 1; animation: vwin 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--late, var(--dl)) backwards; }
html[data-theme] .ph.ready .vw-sh:not(.vw-fl)::before { animation: 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) */
html[data-theme] .vw-fl { background: rgb(255, 238, 190); opacity: 0; }
html[data-theme] .ph.ready .vw-b.ok .vw-fl { animation: vwflash 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--late, var(--dl)) + 0.3s) both; }
@keyframes 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. */
html[data-theme] .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 */
html[data-theme] .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)); }
html[data-theme] .ph.ready .vw-b.ok .vw-bl { animation: vwbloom 1.9s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--late, var(--dl)) + 0.25s) both; }
@keyframes vwbloom { 0% { opacity: 0; } 30% { opacity: 0.75; } 100% { opacity: 0; } }
.sh-s.now .vw-bl { animation-name: none !important; }
html[data-theme] .ph.ready .vw-floor { animation: vwfloor 2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both; }
@keyframes vwbeam { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes 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 vwsheen { 0% { transform: translate3d(-34%, 0, 0); } 13%, 100% { transform: translate3d(34%, 0, 0); } }
@keyframes vwfloor { 0% { opacity: 0; transform: translateZ(-2px) scaleX(0.3); } 40% { opacity: 1; } 100% { opacity: 0.8; transform: translateZ(-2px); } }
@media (max-width: 860px) { html[data-theme] .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) {
  html[data-theme] .ph { --u: min(calc(100svh / 900), calc(100vw / 1440)); }
  html[data-theme] .vw-cover { width: calc(var(--vw-k, 740) * var(--u)); }
  html[data-theme] .ph-t { font-size: calc(172 * var(--u)); }
  html[data-theme] .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); }
  html[data-theme] .ph.ready > .fx-vault { transform: translate(-50%, -50%); }
  /* Raumtiefe mitskalieren (feste Pixel liessen die Wand auf grossen Schirmen anders kippen als auf dem Laptop) */
  html[data-theme] .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)); }
  html[data-theme] .ph-grid.wrap { width: min(calc(1400 * var(--u)), calc(100% - 2 * var(--gut))); }
  html[data-theme] .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 */
  html[data-theme] .ph-copy { width: min(calc(960 * var(--u)), 100%); }
}
@media (min-width: 2200px) and (min-height: 1250px) { html[data-theme] .ph-s, html[data-theme] .ph-plate, html[data-theme] .ph-buy, html[data-theme] .ph-meta { zoom: 1.35; } }
@media (min-width: 3000px) and (min-height: 1700px) { html[data-theme] .ph-s, html[data-theme] .ph-plate, html[data-theme] .ph-buy, html[data-theme] .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: vxe-in 0.45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes 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: vxd-in 0.5s var(--ease-out) both; }
@keyframes 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: vxd-box 0.75s var(--ease-out) 0.05s both; }
@keyframes 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: 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: 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 vst-spin { to { transform: rotate(360deg); } }
@keyframes 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: 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: 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: vd-open-r 1.15s cubic-bezier(0.78, 0, 0.2, 1) 0.42s both; }
@keyframes vd-open-l { to { transform: translate3d(-102%, 0, 0); } }
@keyframes 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: 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 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: 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 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: vd-bolt 0.34s cubic-bezier(0.6, 0, 0.8, 0.3) calc(0.1s + var(--i) * 0.018s) both; }
@keyframes 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: 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: vst-spin 6s linear infinite; }
@keyframes vd-burst { 0% { opacity: 0; transform: scale(0.15); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes 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: 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: vtt-run var(--t, 9s) linear both; }
@keyframes 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) {
  html[data-theme] .vw-sh, html[data-theme] .vw-fl, html[data-theme] .vw-bl { display: none; }
  html[data-theme] .vw-w { will-change: auto; }
  html[data-theme] .vw { will-change: auto; }
  html[data-theme] .in > .fxt { animation: none; }
}