/* ================= Produktseite (Vorlage, Thema ueber --acc/--hi/--lo/--alt/--t-disp) =================
   Aufbau und Bewegung nach der UNTAMED-Seite (rtsb-untamed-blocks), verallgemeinert fuer alle Libraries. */
html[data-product], html[data-product] body { background: var(--t-bg); }
html[data-product] .kick { color: rgb(var(--acc)); font-family: var(--t-ui); font-size: calc(11px * var(--t-uis, 1)); }
html[data-product] .kick::before { box-shadow: 0 0 10px rgb(var(--acc)); }
html[data-product] .hd.solid { background: color-mix(in srgb, var(--t-bg) 88%, transparent); }
html[data-product] .hd-nav a::after { background: rgb(var(--acc)); }
html[data-product] .hd-cart.has .n { background: rgb(var(--acc)); color: #050505; }
html[data-product] ::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; }
html[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)); } }
html[data-w="400"] .ph-bg { opacity: 0.95; filter: saturate(1.2); }
html[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; }
html[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); }
html[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); }
html[data-product] .btn--acc { font-family: var(--t-disp); }
html[data-product] .btn--ghost { color: rgb(var(--acc)); border-color: rgba(var(--acc), 0.45); background: rgba(var(--acc), 0.04); }
html[data-product] .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)); }
html[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); }
html[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; }
html[data-product] .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%); }
html[data-product] .pt-card.k-raw .pt-kind::before { content: ""; width: 18px; height: 0; border-top: 1px dashed currentColor; }
html[data-product] .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); }
html[data-product] .pt-card.k-mod .pt-kind { color: rgb(var(--acc)); }
html[data-product] .pt-card.k-mod .pt-kind::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }
html[data-product] .pt-card.k-mod .pt-groups li::before { top: 14px; width: 6px; height: 6px; background: none; border: 1.5px solid rgb(var(--acc)); }
html[data-product] .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); }
html[data-product] .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%); }
html[data-product] .pt-card.k-ds .pt-kind { padding: 7px 11px 7px 10px; background: rgb(var(--acc)); color: #070707; }
html[data-product] .pt-card.k-ds .pt-kind::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
html[data-product] .pt-card.k-ds h3 { color: rgb(var(--hi)); text-shadow: 0 0 24px rgba(var(--acc), 0.45); }
html[data-product] .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)); }
html[data-product] .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; }
html[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; }
html[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; }
html[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; }
  html[data-product] .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; }
  html[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 ---------- */
html[data-layout="mirror"] .ph-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
html[data-layout="mirror"] .ph-cover { order: -1; }
html[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%); }
html[data-layout="center"] .ph { text-align: center; }
html[data-layout="center"] .ph-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
html[data-layout="center"] .ph-cover { order: -1; width: min(460px, 70vw); margin-top: -10px; }
html[data-layout="center"] .ph-cover img { max-height: min(46vh, 460px); }
html[data-layout="center"] .ph-copy { display: flex; flex-direction: column; align-items: center; width: min(960px, 100%); }
html[data-layout="center"] .ph-l { margin-left: auto; margin-right: auto; }
html[data-layout="center"] .ph-buy, html[data-layout="center"] .ph-meta { justify-content: center; }
html[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%); }
html[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) { html[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; }
html[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); }
html[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; }
  html[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; }