/* Universum 2.0 — App-Shell + Komponenten v2 */

@import url('tokens.css');

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }

/* === Mobile Backdrop-Filter Workaround (iOS Safari + Chrome Android) ===
   Ohne diese Direktiven wird backdrop-filter auf vielen Mobile-Browsern stumm
   ignoriert — der Filter braucht einen eigenen Composite-Layer (will-change /
   translateZ) und entkoppeltes Stacking (isolation:isolate).
   Greift global auf alle Elemente die -webkit-backdrop-filter setzen. */
/* === Universum-Hover-Effekt: Lift + Gold-Glow + Sweep ===
   Ersetzt den alten dünnen Goldrand-Hover universumsweit (außer hervorgehobenen Cards). */
.erf-cat-card,
.cockpit__tile:not(.cockpit__tile--gold),
.merk-item,
.lit-tile,
.werk__book--row {
  position: relative;
  overflow: hidden;
}
.erf-cat-card:hover,
.cockpit__tile:not(.cockpit__tile--gold):hover,
.merk-item:hover,
.lit-tile:hover,
.werk__book--row:hover {
  border-color: var(--border-strong) !important;
  background: var(--frost-bg-hover) !important;
  box-shadow: 0 12px 32px -10px var(--gold-soft), 0 0 28px -8px var(--gold-soft) !important;
  transform: translateY(-2px) !important;
}
/* Sheen-Sweep — nutzt ::after pseudo, schimmert von links nach rechts */
.erf-cat-card::after,
.cockpit__tile::after,
.merk-item::after,
.lit-tile::after,
.werk__book--row::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(230,185,97,0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(.3,.7,.3,1);
  border-radius: inherit;
  z-index: 1;
}
.erf-cat-card:hover::after,
.cockpit__tile:not(.cockpit__tile--gold):hover::after,
.merk-item:hover::after,
.lit-tile:hover::after,
.werk__book--row:hover::after { transform: translateX(120%); }

/* GPU-Layer + Compositing-Hint für Frost-Boxen.
   WICHTIG (2026-05-11): vorher hier `[class*="cockpit__tile"]` etc. — das matched auch den
   PLURAL-Container (`.cockpit__tiles`, `.erf-cat-cards`) → isolation:isolate auf Parent
   schneidet backdrop-filter der Children vom Body-BG ab → Cards wirken nur tint, kein blur.
   Fix: exakte Klassen + isolation entfernt. translateZ(0) reicht als GPU-Hint. */
.forschen__card,
.forschen__teaser,
.labor__box,
.labor__product,
.labor__buy-choice,
.erf-cat-card,
.erf-tag,
.erf-orig-item,
.erf-einordnung__box,
.cockpit__tile,
.cockpit__stat,
.cockpit__hl-card,
.cockpit__recent-row,
.cockpit__profile-hint,
.u-btn,
.u-popup,
.u-popup--2,
.u-audio,
.u-bottomnav,
.u-topbar {
  transform: translateZ(0);
  will-change: backdrop-filter;
}
html, body { margin: 0; padding: 0; }
/* html + body overflow:hidden + height:100% + position:fixed verhindern Scroll-Drift bei HTMX-Boost-Nav.
   Sonst restaurieren Browser den Scroll-Stand vom Klick-Element und schieben die Shell nach oben. */
html { -webkit-text-size-adjust: 100%; overflow: hidden; height: 100%; }
body { overflow: hidden; height: 100%; position: fixed; inset: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  font-feature-settings: "ss01", "cv01";  /* Inter alt forms */
}
img, picture, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* === Per-Bereich Hintergrund — SCHARF, kein Blur. Desktop & Mobile getrennt. === */
.bg-img {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  filter: saturate(1.05) brightness(0.92);
  opacity: 1;
  transition: opacity 600ms ease, background-image 0s;
}
.bg-img--desktop { display: none; }
.bg-img--mobile  { display: block; }
@media (min-width: 720px) {
  .bg-img--desktop { display: block; }
  .bg-img--mobile  { display: none; }
}
/* Veil: nur Top/Bottom-Säume + dezente Side-Vignette für Lesbarkeit der Bars.
   Kein Center-Darken — Bilder bleiben scharf und brilliant. */
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,7,4,0.78) 0%, rgba(6,7,4,0.20) 80px, rgba(6,7,4,0.0) 160px),
    linear-gradient(0deg,   rgba(6,7,4,0.85) 0%, rgba(6,7,4,0.30) 140px, rgba(6,7,4,0.0) 260px),
    linear-gradient(90deg,  rgba(6,7,4,0.30) 0%, rgba(6,7,4,0.0) 14%, rgba(6,7,4,0.0) 86%, rgba(6,7,4,0.30) 100%);
}
/* === Atmospheric particles + golden pulse === */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(230,185,97,0.85) 1.2px, transparent 2px),
    radial-gradient(circle, rgba(177,194,117,0.65) 1px, transparent 2px),
    radial-gradient(circle, rgba(212,166,74,0.45) 0.8px, transparent 1.6px),
    radial-gradient(circle, rgba(126,200,200,0.3) 0.6px, transparent 1.4px);
  background-size: 200px 200px, 280px 280px, 380px 380px, 540px 540px;
  background-position: 0 0, 60px 80px, 140px 200px, 220px 320px;
  opacity: 0.45;
  animation: drift 36s linear infinite;
}
@keyframes drift {
  0%   { background-position: 0 0,             60px 80px,    140px 200px,  220px 320px; }
  100% { background-position: 360px 360px,    520px 540px,   720px 780px,  900px 1000px; }
}

/* === App-Shell — 4 Slots: AudioPlayer (oben), TopBar, Content, BottomNav.
   box-sizing+padding-top für iPhone-Notch (Safe-Area), damit Audio-Bar/Topbar nicht hinter Notch verschwinden. */
.u-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    var(--audioplayer-h)
    var(--topbar-h)
    1fr
    var(--bottomnav-h);
  height: 100vh;
  height: 100svh;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}
.u-shell > .u-audio      { grid-row: 1; position: relative; z-index: 35; }
.u-shell > .u-topbar     { grid-row: 2; }
.u-shell > .u-content    { grid-row: 3; overflow: hidden; min-height: 0; }
@media (max-width: 719px) { .u-shell > .u-content { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } }
.u-shell > .u-bottomnav  { grid-row: 4; }

/* Audio collapsed → schmaler Streifen oben */
.u-shell.audio-collapsed { grid-template-rows: 28px var(--topbar-h) 1fr var(--bottomnav-h); }

/* Audio empty (nichts geladen) → schmaler 28px-Streifen sichtbar (wie collapsed),
   damit der Toggle/Hint da ist. Erster Klick auf Toggle expandiert direkt voll. */
.u-shell:has(.u-audio--empty):not(.audio-collapsed) { grid-template-rows: 28px var(--topbar-h) 1fr var(--bottomnav-h); }
.u-audio--empty {
  grid-template-columns: 1fr auto !important;
  padding: 0 12px !important;
  gap: 8px !important;
  cursor: pointer;
}
.u-audio--empty .u-audio__cover,
.u-audio--empty .u-audio__playpause { display: none !important; }
.u-audio--empty .u-audio__inner { justify-content: center; }
.u-audio--empty .u-audio__label { display: none; }
.u-audio--empty .u-audio__wave { height: 14px; opacity: 0.5; transform: scale(0.7); }
.u-audio--empty .u-audio__actions { padding: 2px; gap: 2px; }
.u-audio--empty .u-audio__action { width: 24px; height: 24px; }

/* Globale Bar-Farben — gold + Negativ-Rot. Müssen :root sein damit Popups (außerhalb von .erf-cd) sie sehen */
:root {
  --bar-positiv-abschluss:    #b8862e;
  --bar-positiv-anwendung:    #b8862e;
  --bar-beschwerdenlindernd:  #b8862e;
  --bar-empfehlung:           #b8862e;
  --bar-negativ:              #c2384b;
}

/* === Modal-Page: smooth Übergang ohne Layout-Sprung ===
   Konkrete Pixelwerte statt `auto` — damit CSS grid-template-rows wirklich animiert
   (auto kann nicht interpoliert werden → früher Sprung-Effekt). */
/* Topbar/Bottomnav verschwinden auf Modal-Pages mit reinem Fade — KEIN Slide.
   Das User-Feedback war: 'Elemente erscheinen oben und rutschen in Position' beim Zurück
   aus Modal-Pages — Ursache war translateY(-100%/+100%). Jetzt nur opacity. */
.u-topbar, .u-bottomnav { transition: opacity var(--t-fast); }
body.is-modal-page .u-topbar,
body.is-modal-page .u-bottomnav { opacity: 0; pointer-events: none; }
.u-shell { transition: grid-template-rows var(--t-norm) cubic-bezier(.4,.0,.2,1); }
body.is-modal-page .u-shell {
  /* Audio-Höhe wie sonst auch (28px empty/collapsed, 64px expanded) — konsistent mit non-modal */
  grid-template-rows: var(--audio-h, 28px) 0 1fr 0 !important;
}
body.is-modal-page.is-audio-expanded .u-shell { grid-template-rows: 64px 0 1fr 0 !important; }
body.is-modal-page .u-content { padding: 0 !important; }

/* Content-Fade beim Modal-Wechsel — KEIN transform mehr (User-Feedback: Boxen rutschen
   sonst von oben in Position). Nur Opacity-Crossfade. */
.u-content-inner { transition: opacity 180ms ease; }
::view-transition-old(content), ::view-transition-new(content) { animation-duration: 240ms; }

/* Reader-Page: alles weg inkl. Audio-Streifen — eReader nimmt 100% Viewport */
body.is-reader-page .u-shell { grid-template-rows: 0 0 1fr 0 !important; }
body.is-reader-page .u-audio { display: none !important; }
body.is-reader-page .bg-veil, body.is-reader-page .bg-particles { display: none !important; }

/* Reise-Player-Mode: Audio + Topbar + BottomNav weg, Stage füllt 100% */
body.is-reise-mode .u-shell { grid-template-rows: 0 0 1fr 0 !important; }
body.is-reise-mode .u-audio,
body.is-reise-mode .u-topbar,
body.is-reise-mode .u-bottomnav { display: none !important; }
body.is-reise-mode .bg-veil,
body.is-reise-mode .bg-particles { display: none !important; }
body.is-reise-mode .u-content { padding: 0 !important; }

/* === Big-Player Popup (überall aufrufbar) === */
.hf-bigplayer { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 220ms ease; }
.hf-bigplayer[data-open="true"] { pointer-events: auto; opacity: 1; }
.hf-bigplayer__backdrop { position: absolute; inset: 0; background: rgba(6,7,4,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; }
.hf-bigplayer__panel {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 280ms cubic-bezier(.32,.72,0,1);
  width: min(96vw, 800px);
  max-height: 92vh;
  background: linear-gradient(165deg, rgba(28,28,20,0.96) 0%, rgba(15,15,11,0.99) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 80px -20px var(--gold-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hf-bigplayer[data-open="true"] .hf-bigplayer__panel { transform: translate(-50%, -50%) scale(1); }

.hf-bigplayer__head {
  display: grid; grid-template-columns: 36px 1fr 36px;
  align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(212,166,74,0.15);
}
.hf-bigplayer__min {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(13,14,12,0.5);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t-fast);
}
.hf-bigplayer__min:hover { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold); }
.hf-bigplayer__head-spacer { width: 36px; }
.hf-bigplayer__head .u-eyebrow { text-align: center; margin: 0; }

.hf-bigplayer__main {
  display: grid; grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px 22px 12px;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .hf-bigplayer__main { grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
}

.hf-bigplayer__cover {
  width: 100%; aspect-ratio: 1/1; max-width: 220px; margin: 0 auto;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6), 0 0 32px -8px var(--gold-soft);
}
@media (min-width: 600px) { .hf-bigplayer__cover { max-width: 200px; } }
.hf-bigplayer__cover img { width: 100%; height: 100%; object-fit: cover; }
.hf-bigplayer__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: center; }
@media (min-width: 600px) { .hf-bigplayer__info { text-align: left; } }
.hf-bigplayer__title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--gold-bright);
  margin: 0; line-height: 1.3; letter-spacing: -0.01em;
}
@media (min-width: 600px) { .hf-bigplayer__title { font-size: 22px; } }
.hf-bigplayer__work { font-size: 12px; color: var(--text-mute); margin: 0; }

.hf-bigplayer__seek-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hf-bigplayer__time { font-size: 11px; color: var(--text-mute); font-feature-settings: "tnum"; min-width: 36px; }
.hf-bigplayer__seek {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; height: 4px;
  background: rgba(255,255,255,0.12); border-radius: 2px; cursor: pointer;
  transition: height 150ms ease;
}
.hf-bigplayer__seek:hover { height: 6px; }
.hf-bigplayer__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-bright); cursor: grab; box-shadow: 0 0 0 3px rgba(212,166,74,0.2); }

.hf-bigplayer__controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.hf-bigplayer__btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(13,14,12,0.5);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t-fast);
}
.hf-bigplayer__btn:hover:not(:disabled) { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold); }
.hf-bigplayer__btn--big {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1208; border-color: transparent;
}
.hf-bigplayer__btn--big:hover { box-shadow: 0 0 24px -4px var(--gold-soft); transform: scale(1.05); }
.hf-bigplayer__btn--speed { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; }
.hf-bigplayer__btn-num { position: absolute; font-size: 9px; font-weight: 700; top: 12px; }

.hf-bigplayer__chapters {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 22px 20px;
  border-top: 1px solid rgba(212,166,74,0.15);
  min-height: 0;
  flex: 1 1 auto;
}
.hf-bigplayer__chapters .u-eyebrow { margin: 0 0 6px; }
.hf-bigplayer__chapters-scroll {
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 4px;
}
.hf-bp-chapter {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  background: var(--frost-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: left; color: var(--text);
  cursor: pointer; transition: all var(--t-fast);
  font-family: inherit;
}
.hf-bp-chapter:hover:not(:disabled) { border-color: var(--gold); background: rgba(212,166,74,0.08); }
.hf-bp-chapter.is-current { border-color: var(--gold); background: linear-gradient(90deg, rgba(212,166,74,0.18), rgba(212,166,74,0.04)); }
.hf-bp-chapter.is-locked { opacity: 0.55; cursor: not-allowed; }
.hf-bp-chapter-num { font-size: 11px; color: var(--text-mute); font-feature-settings: "tnum"; text-align: center; }
.hf-bp-chapter-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hf-bp-chapter-title { font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-bp-chapter-dur { font-size: 10px; color: var(--text-mute); font-feature-settings: "tnum"; }
.hf-bigplayer__empty { color: var(--text-mute); font-size: 12px; text-align: center; padding: 14px; }

/* === Trailer-Popup (Video) === */
.hf-trailer { position: fixed; inset: 0; z-index: 220; pointer-events: none; opacity: 0; transition: opacity 220ms ease; }
.hf-trailer[data-open="true"] { pointer-events: auto; opacity: 1; }
.hf-trailer__backdrop { position: absolute; inset: 0; background: rgba(4,5,3,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; }
.hf-trailer__panel {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 280ms cubic-bezier(.32,.72,0,1);
  width: min(96vw, 720px);
  max-height: 92vh;
  background: linear-gradient(165deg, rgba(28,28,20,0.96), rgba(15,15,11,0.99));
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 80px -20px var(--gold-soft);
  padding: 14px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
}
.hf-trailer[data-open="true"] .hf-trailer__panel { transform: translate(-50%, -50%) scale(1); }
.hf-trailer__close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(13,14,12,0.7); border: 1px solid var(--border); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t-fast);
  z-index: 2;
}
.hf-trailer__close:hover { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold); }
.hf-trailer__title { font-family: var(--font-display); font-size: 14px; color: var(--gold-bright); margin: 0 0 4px; line-height: 1.3; align-self: flex-start; padding-right: 44px; }
.hf-trailer__video { width: 100%; max-width: min(80vh, 100%); max-height: 75vh; border-radius: var(--r-md); background: #000; object-fit: contain; }

@media (max-width: 599px) {
  .hf-trailer__panel {
    width: 100vw; width: 100dvw;
    height: 100vh; height: 100dvh;
    max-height: 100dvh; border-radius: 0;
    padding: calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));
    justify-content: center;
  }
  .hf-trailer__video { max-height: 75vh; }
}

@media (max-width: 599px) {
  .hf-bigplayer__panel {
    width: 100vw; width: 100dvw;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
    /* Notch + Home-Indicator absichern */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hf-bigplayer__head { padding: 10px 14px; }
  .hf-bigplayer__main { padding: 12px 14px 6px; gap: 12px; }
  .hf-bigplayer__cover { max-width: 160px; }
  .hf-bigplayer__title { font-size: 16px; }
  .hf-bigplayer__btn { width: 36px; height: 36px; }
  .hf-bigplayer__btn--big { width: 50px; height: 50px; }
  .hf-bigplayer__chapters { padding: 10px 14px 14px; }
  .hf-bigplayer__chapters-scroll { max-height: none; flex: 1 1 auto; }
}

/* === BottomNav — V1-Flair: PNG-Icons, Cyan-Glow, Uppercase-Tracking === */
.u-bottomnav {
  z-index: 30;
  position: relative;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(8,10,8,0.78) 0%, rgba(8,10,8,0.97) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid var(--border);
}
.u-bottomnav__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  margin: 0 auto;
  height: 100%;
}
.u-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  position: relative;
  transition: color 220ms ease, transform 220ms ease;
  border-radius: 12px;
  margin: 4px 4px;
  overflow: hidden;
  z-index: 1;
}
/* Glow-Halo Background-Layer (über ::before, frost-cyan, opacity 0 → hover/active) */
.u-bottomnav__item::before {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 60%, rgba(126,200,200,0.22) 0%, rgba(126,200,200,0.08) 45%, transparent 75%);
  opacity: 0;
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: -1;
  transform: scale(0.85);
}
/* Sweep-Sheen-Linie über aktiven Tab — animiert beim Wechsel */
.u-bottomnav__item::after {
  content: "";
  position: absolute; left: 50%; bottom: 6px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-bright) 30%, var(--cyan-bright) 70%, transparent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 320ms cubic-bezier(.32,.72,0,1);
  box-shadow: 0 0 10px var(--cyan-bright);
  pointer-events: none;
}

.u-bottomnav__icon {
  width: 30px;
  height: 30px;
  display: block;
  transition: filter 280ms ease, transform 280ms cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 4px rgba(177,194,117,0.0));
}
.u-bottomnav__label { line-height: 1; transition: color 220ms ease; font-weight: 500; }

/* Hover (subtil) */
.u-bottomnav__item:hover {
  color: var(--text-soft);
  transform: translateY(-1px);
}
.u-bottomnav__item:hover::before { opacity: 0.55; transform: scale(1); }
.u-bottomnav__item:hover .u-bottomnav__icon {
  filter: drop-shadow(0 0 7px var(--cyan-soft));
  transform: scale(1.06);
}

/* Active — deutlich stärker: voller Halo + Underline + Lift + Bold-Label */
.u-bottomnav__item.is-active {
  color: var(--cyan-bright);
}
.u-bottomnav__item.is-active::before {
  opacity: 1;
  transform: scale(1);
  background: radial-gradient(ellipse at 50% 60%, rgba(126,200,200,0.32) 0%, rgba(126,200,200,0.14) 50%, transparent 78%);
}
.u-bottomnav__item.is-active::after { width: 60%; }
.u-bottomnav__item.is-active .u-bottomnav__icon {
  filter: drop-shadow(0 0 14px rgba(126,200,200,0.7));
  transform: translateY(-3px) scale(1.1);
}
.u-bottomnav__item.is-active .u-bottomnav__label {
  font-weight: 700;
  text-shadow: 0 0 10px rgba(126,200,200,0.45);
}
/* Pulse-Ring auf Active (sanft, infinit) */
@keyframes hf-nav-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126,200,200,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(126,200,200,0.10); }
}
.u-bottomnav__item.is-active { animation: hf-nav-pulse 2.6s ease-in-out infinite; }

/* Tap-Feedback (mobile) */
.u-bottomnav__item:active { transform: translateY(0px) scale(0.96); transition-duration: 120ms; }

/* === TopBar — vollständig transparent. Nur Logo + Sub-Tabs (Pille) + Zahnrad. === */
.u-topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 30;
  position: relative;
  /* Auf Content-Area-Breite begrenzen — Detail-Pages haben max-width 1100px,
     Topbar soll nicht weiter rauslaufen als der Content darunter. */
  max-width: 1128px; /* 1100 + 14*2 padding */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.u-topbar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.u-topbar__logo img {
  width: 36px;
  height: 36px;
  max-width: none;     /* überschreibt globalen img max-width:100% */
  display: block;
  filter: drop-shadow(0 0 8px rgba(212,166,74,0.4));
  transition: filter var(--t-fast);
}
.u-topbar__logo:hover img { filter: drop-shadow(0 0 12px rgba(212,166,74,0.6)); }

.u-topbar__tabs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  background: rgba(20,21,15,0.55);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  padding: 4px;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.u-topbar__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  min-height: 36px;
}
.u-topbar__tab:hover:not(:disabled) { color: var(--text); }
.u-topbar__tab.is-active {
  background: linear-gradient(135deg, rgba(212,166,74,0.18), rgba(212,166,74,0.08));
  color: var(--gold-bright);
  box-shadow: 0 0 12px -2px var(--gold-soft), inset 0 0 0 1px var(--border-strong);
  /* Keine Pulse-Animation mehr beim Tab-Wechsel — verursachte sichtbare Layout-Sprünge,
     weil scale(1.04) im View-Transition-Snapshot die Topbar zucken ließ.
     Sanftes Glow + smoother Background-Übergang reichen visuell. */
  transition: background 220ms var(--ease-out), color 180ms ease, box-shadow 220ms var(--ease-out);
}
.u-topbar__tab svg { flex-shrink: 0; }
.u-topbar__tab:disabled,
.u-topbar__tab[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.u-topbar__settings {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-soft);
  flex-shrink: 0;
  transition: all var(--t-fast);
  z-index: 1;  /* unter Audio (z-index 50) */
}
.u-topbar__settings:hover { background: var(--gold-tint); color: var(--gold-bright); }

/* Mobile-Tab-Adjustments — Logo bleibt fix 32px, Tabs füllen Pille */
@media (max-width: 720px) {
  .u-topbar { padding: 0 8px; gap: 6px; }
  .u-topbar__logo,
  .u-topbar__logo img { width: 32px; height: 32px; }
  .u-topbar__tabs { padding: 3px; gap: 2px; }
  .u-topbar__tab { padding: 6px 8px; font-size: 11px; gap: 4px; }
  .u-topbar__tab svg { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  /* sehr schmal — nur Text in Tabs */
  .u-topbar__tab svg { display: none; }
  .u-topbar__tab { padding: 6px 6px; }
}

/* === Content Area === */
.u-content {
  position: relative;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
  z-index: 5;
}
@media (min-width: 1024px) { .u-content { padding: 24px 32px; } }
.u-content > * { max-height: 100%; }

/* Content-Inner = HTMX-Swap-Target */
.u-content-inner {
  display: block;
  height: 100%;
}
/* === Page-Transitions =============================================
   Native View Transitions API: Browser nimmt vor + nach dem Swap
   einen Snapshot und crossfaded GPU-beschleunigt dazwischen.
   Aktivierung über HTMX `transition:true` Flag (siehe shell.tpl.php)
   und view-transition-name unten.
   ================================================================== */
.u-content-inner { view-transition-name: u-content; }
/* Topbar-Mid (Detail-Actionbar ODER Sub-Tabs) wird per OOB-Swap instant getauscht —
   ohne eigenen view-transition-name würde DOM-Replace während Content-Crossfade als Ruckeln
   sichtbar. Beide Partials tragen id="u-topbar-mid" → ein Selector reicht. */
#u-topbar-mid { view-transition-name: u-topbar-mid; }
/* BottomNav: gleiche OOB-Swap-Mechanik (active-State wechselt) */
.u-bottomnav { view-transition-name: u-bottomnav; }

/* Group-Animationen killen: Browser würde sonst Position+Size der Snapshot-Boxen
   zwischen alter und neuer Page interpolieren — bei unterschiedlich strukturierten
   Pages (Hörbuch vs. Liste) wirkt das wie „Elemente rutschen von oben in Position". */
::view-transition-group(u-content),
::view-transition-group(u-topbar-mid),
::view-transition-group(u-bottomnav) { animation: none !important; }
::view-transition-image-pair(u-content),
::view-transition-image-pair(u-topbar-mid),
::view-transition-image-pair(u-bottomnav) { isolation: auto; }

/* Content-Bereich: reiner Opacity-Crossfade — KEIN Slide. */
::view-transition-old(u-content) {
  animation: vtFadeOut 200ms ease-out forwards;
  mix-blend-mode: normal;
}
::view-transition-new(u-content) {
  animation: vtFadeIn 240ms ease-out forwards;
  mix-blend-mode: normal;
}
/* Topbar-Mid + BottomNav: KEIN Fade. Der DOM dieser Bereiche wird nicht ausgetauscht
   (sie liegen außerhalb #u-content-inner). Die optimistic-toggle-Logik in app.js
   schaltet die is-active Klasse synchron vor dem Snapshot — beide Snapshots sind
   identisch, ein Fade würde nur als "Tabs hüpfen ins Bild und zurück" sichtbar werden. */
::view-transition-old(u-topbar-mid),
::view-transition-new(u-topbar-mid),
::view-transition-old(u-bottomnav),
::view-transition-new(u-bottomnav) {
  animation: none !important;
  mix-blend-mode: normal;
}
/* ROOT Snapshot enthält body+shell+bg minus oben benannte → soll auch NICHT faden,
   sonst flackert die ganze Page beim Tab-/Filter-Wechsel mit. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
}
@keyframes vtFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vtFadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* === Audio-Player Slot (TOP) — z-index garantiert ÜBER Topbar === */
.u-audio {
  background: linear-gradient(180deg, rgba(8,9,7,0.94) 0%, rgba(13,14,12,0.78) 100%);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.5), 0 1px 0 0 rgba(212,166,74,0.12);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 50;
  position: relative;
  cursor: default;
}
/* Eingeklappte Leiste = ganze Fläche klickbar (öffnet) */
.audio-collapsed .u-audio { cursor: pointer; }

/* Plus-Button (links) — öffnet Big-View. Nur sichtbar wenn ausgeklappt. */
.u-audio__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold-tint);
  border: 1px solid var(--border-strong);
  color: var(--gold-bright);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.u-audio__expand:hover { background: var(--gold); color: #1a1208; transform: scale(1.06); }

/* Cover (klick → Big-View) */
.u-audio__cover {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: all var(--t-fast);
  padding: 0;
}
.u-audio__cover:hover { border-color: var(--gold); transform: scale(1.05); color: var(--gold-bright); box-shadow: 0 0 12px -2px var(--gold-soft); }
.u-audio__cover img, .u-audio__cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-audio__cover-fallback { display: inline-flex; align-items: center; justify-content: center; }

/* Play/Pause-Button in Mini-Bar — breiter & besser greifbar */
.u-audio__playpause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border: none;
  color: #1a1208;
  cursor: pointer; flex-shrink: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.u-audio__playpause:hover { transform: scale(1.06); box-shadow: 0 0 18px -2px var(--gold-soft), 0 0 0 1px rgba(255,255,255,0.12) inset; }
.u-audio__playpause:active { transform: scale(0.96); }

/* Action-Group rechts (Settings + Toggle) — visuell zusammenhängend, gemeinsame Pille */
.u-audio__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--divider);
  border-radius: 999px;
  flex-shrink: 0;
  z-index: 1;
}
.u-audio__action {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
}
.u-audio__action:hover { color: var(--gold-bright); background: var(--gold-tint); }
.u-audio__action:active { transform: scale(0.94); }
.u-audio__settings { color: var(--gold); }
.u-audio__settings:hover { color: var(--gold-bright); background: var(--gold-tint); }

/* Eingeklappt: nur 28px hoher Streifen */
.audio-collapsed .u-audio {
  grid-template-columns: 1fr auto;  /* Wave nimmt mittel-platz, Toggle rechts */
  padding: 0 12px;
  gap: 8px;
}
.audio-collapsed .u-audio__cover,
.audio-collapsed .u-audio__playpause { display: none; }
.audio-collapsed .u-audio__inner { justify-content: center; }
.audio-collapsed .u-audio__label { display: none; }
.audio-collapsed .u-audio__wave { height: 14px; opacity: 0.6; transform: scale(0.7); }
.audio-collapsed .u-audio__actions { padding: 2px; gap: 2px; }
.audio-collapsed .u-audio__action { width: 24px; height: 24px; }

.u-audio__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  /* Button-Reset (Markup ist <button>, damit ganze Textzeile klickbar) */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  transition: background var(--t-fast);
}
.u-audio--loaded .u-audio__inner:hover { background: rgba(255,255,255,0.04); }
.u-audio--loaded .u-audio__inner:active { background: rgba(255,255,255,0.08); }
.u-audio--empty .u-audio__inner {
  color: var(--text-mute);
  font-size: 12px;
  cursor: default;
}
.u-audio__label {
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
/* Wave-Visualisierung — 8 Bars, animieren idle ruhig, bei aktivem Audio lebhafter */
.u-audio__wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  flex-shrink: 0;
}
.u-audio__wave i {
  display: inline-block;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 2px;
  opacity: 0.55;
  transform-origin: center;
  animation: uWaveIdle 2.4s ease-in-out infinite;
}
.u-audio__wave i:nth-child(1) { animation-delay: 0.0s; }
.u-audio__wave i:nth-child(2) { animation-delay: 0.18s; }
.u-audio__wave i:nth-child(3) { animation-delay: 0.36s; }
.u-audio__wave i:nth-child(4) { animation-delay: 0.10s; }
.u-audio__wave i:nth-child(5) { animation-delay: 0.28s; }
.u-audio__wave i:nth-child(6) { animation-delay: 0.42s; }
.u-audio__wave i:nth-child(7) { animation-delay: 0.06s; }
.u-audio__wave i:nth-child(8) { animation-delay: 0.22s; }
/* Idle: sanftes Atmen */
@keyframes uWaveIdle {
  0%,100% { transform: scaleY(0.3); opacity: 0.35; }
  50%     { transform: scaleY(0.6); opacity: 0.6; }
}
/* Aktiv: stärker pulsierend */
.u-audio:not(.u-audio--empty) .u-audio__wave i {
  animation: uWaveActive 0.9s ease-in-out infinite;
  opacity: 0.9;
}
@keyframes uWaveActive {
  0%,100% { transform: scaleY(0.25); }
  35%     { transform: scaleY(1.0); }
  60%     { transform: scaleY(0.55); }
}

/* === Tab-Indicator-Dots (Mobile only, unter Tabs) === */
.u-page-dots {
  display: none;
}
@media (max-width: 720px) {
  .u-page-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 0;
  }
  .u-page-dots__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .u-page-dots__dot.is-active {
    background: var(--gold-bright);
    transform: scale(1.3);
  }
}

/* === Universal Card-Row === */
.u-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  min-height: 60px;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-fast);
}
.u-row:hover {
  border-color: var(--border-strong);
  background: rgba(20,21,15,0.7);
  transform: translateX(2px);
  box-shadow: var(--shadow-md), 0 0 24px -4px var(--gold-soft);
}
.u-row__bg {
  position: absolute;
  inset: -4px;
  background-size: cover;
  background-position: right center;
  opacity: 0.30;
  filter: blur(10px) saturate(1.3);
  transition: opacity var(--t-norm);
  mask-image: linear-gradient(90deg, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, black 100%);
}
.u-row:hover .u-row__bg { opacity: 0.45; }
.u-row__icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold-tint), transparent);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  box-shadow: 0 0 12px -2px var(--gold-soft);
}
.u-row__cover {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-mute);
  box-shadow: 0 0 12px -4px var(--gold-soft);
}
.u-row__cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.u-row__text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.u-row__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.u-row__sub {
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.u-row__arrow {
  position: relative;
  z-index: 1;
  color: var(--text-mute);
  transition: color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.u-row:hover .u-row__arrow {
  color: var(--gold-bright);
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .u-row { padding: 10px 14px; min-height: 52px; gap: 10px; }
  .u-row__icon { width: 36px; height: 36px; }
  .u-row__cover { width: 40px; height: 40px; }
  .u-row__title { font-size: 14px; }
  .u-row__sub { font-size: 11px; }
}

/* === Compact-Tile (für 2-spaltiges Cockpit-Übersicht auf Mobile) === */
.u-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  min-height: 96px;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: all var(--t-fast);
}
.u-tile:hover {
  border-color: var(--border-strong);
  background: rgba(20,21,15,0.7);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 24px -4px var(--gold-soft);
}
.u-tile__bg {
  position: absolute;
  inset: -4px;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  filter: blur(10px) saturate(1.3);
  z-index: 0;
}
.u-tile__icon {
  position: relative;
  z-index: 1;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold-tint), transparent);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  box-shadow: 0 0 10px -2px var(--gold-soft);
}
.u-tile__title {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.u-tile__sub {
  position: relative;
  z-index: 1;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.3;
  margin: 0;
}

/* === Eyebrow / Headlines / Buttons === */
.u-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-bright);
  font-weight: 600;
}
.u-h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.5vw, 26px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.015em;
}
.u-h2 {
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* === Button-Library — Universum-weite Standard-Styles ===
   Zwei Haupt-Varianten: u-btn (gold-rahmen, default) + u-btn--gold (gold-fill, primary).
   u-btn--ghost (text-only) NUR für Schließen/Sekundär-Aktionen ohne visuelles Gewicht. */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--gold);
  background: rgba(14,14,11,0.55);  /* dunkler — besser lesbar */
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
  min-height: 40px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.u-btn:hover {
  background: rgba(212,166,74,0.22);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 16px -4px var(--gold-soft);
}
/* Mobile fallback: backdrop-filter unzuverlässig → solider, leicht dunklerer BG */
@media (max-width: 719px) {
  .u-btn { background: rgba(12,13,10,0.78); }
  .u-btn:hover { background: rgba(212,166,74,0.28); }
}
/* Soft-Gold Variante: weniger laut als --gold (Trailer/sekundäre CTA) */
.u-btn--gold-soft {
  background: linear-gradient(135deg, rgba(212,166,74,0.32), rgba(212,166,74,0.18));
  color: var(--gold-bright);
  border-color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.u-btn--gold-soft:hover {
  background: linear-gradient(135deg, rgba(212,166,74,0.50), rgba(212,166,74,0.28));
  border-color: var(--gold-bright);
}
.u-btn:active { transform: scale(0.98); }
.u-btn:disabled, .u-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Primär-Button: gold-fill, dunkler Text — Hauptaktion pro Popup/Slot */
.u-btn--gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1208;
  border-color: var(--gold-bright);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.u-btn--gold:hover {
  background: linear-gradient(135deg, #f0c873, var(--gold-bright));
  color: #1a1208;
  border-color: var(--gold-bright);
  box-shadow: 0 0 24px -4px var(--gold-soft), 0 6px 16px -4px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}

/* Ghost: nur Text, kein Rahmen — für Schließen/Cancel ohne visuelles Gewicht */
.u-btn--ghost {
  background: transparent;
  color: var(--text-soft);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 500;
}
.u-btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--divider);
  box-shadow: none;
}

/* === Pager / Chips / Progress === */
.u-pager { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-mute); }
.u-pager__btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-paper); border: 1px solid var(--divider); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; }
.u-pager__btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--gold-bright); }
.u-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.u-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.u-chips::-webkit-scrollbar { display: none; }
.u-chip { flex-shrink: 0; padding: 6px 14px; background: rgba(13,14,12,0.6); border: 1px solid var(--divider); border-radius: var(--r-pill); font-size: 12px; color: var(--text-mute); cursor: pointer; transition: all var(--t-fast); backdrop-filter: blur(6px); }
.u-chip:hover { color: var(--text); }
.u-chip.is-active { background: var(--gold-tint); border-color: var(--border-strong); color: var(--gold-bright); }

.u-progress { height: 4px; background: var(--bg-mute); border-radius: var(--r-pill); overflow: hidden; }
.u-progress__fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: inherit; transition: width var(--t-slow) var(--ease-out); }

/* === Popup — edel, mit Glanz und Tiefe === */
.u-popup-backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212,166,74,0.10), transparent 60%),
    rgba(6,7,4,0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity var(--t-norm);
}
.u-popup-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Tier-2 Popup-Backdrop liegt OBERHALB von Tier-1 */
.u-popup-backdrop--2 { z-index: 110; background: rgba(6,7,4,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.u-popup--2 { z-index: 111; }
/* Tier-1 friert ein wenn Tier-2 offen ist (kein Scroll, kein Hover) */
.u-popup.is-frozen { pointer-events: none !important; filter: brightness(0.7); }
.u-popup.is-frozen * { overflow: hidden !important; }
.u-popup {
  position: fixed; z-index: 101;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -45%) scale(0.96);
  width: min(92vw, 460px);
  max-height: 88vh;
  overflow: auto;
  padding: 28px 26px 24px;
  background:
    linear-gradient(165deg, rgba(28,28,20,0.96) 0%, rgba(15,15,11,0.98) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow:
    0 24px 64px -20px rgba(0,0,0,0.85),
    0 0 100px -30px var(--gold-tint),
    inset 0 1px 0 0 rgba(255,255,255,0.05);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-norm), transform var(--t-norm) var(--ease-spring);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  isolation: isolate;
}
/* Goldener Lichtbogen oben — gibt der Pille edles Tiefenlicht */
.u-popup::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.u-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(212,166,74,0.18), transparent 50%);
  z-index: -1;
}
.u-popup.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

/* Tier-2 Popup MUSS NACH .u-popup definiert sein, sonst überschreibt es den z-index */
.u-popup-backdrop--2 { z-index: 210 !important; }
.u-popup--2 { z-index: 211 !important; }

/* Wenn im Popup eine erf-orig-list sichtbar ist: festes Flex damit Filter-Wechsel keine Höhensprünge erzeugt */
.u-popup:has(.erf-orig-list) {
  display: flex; flex-direction: column;
  height: 86vh;          /* fixe Höhe statt max-height — kein Hüpfen bei Filter-Wechsel */
  max-height: 86vh;
  overflow: hidden;
}
.u-popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(13,14,12,0.6);
  border: 1px solid var(--divider);
}
.u-popup__close:hover { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--border-strong); }

/* Cover/Icon — größer, mit Goldring + leichter Pulsation */
.u-popup__icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-tint), rgba(13,14,12,0.5) 80%);
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  box-shadow: 0 0 32px -6px var(--gold-soft), inset 0 0 16px -4px var(--gold-soft);
}
/* Cover-Variante mit Bild */
.u-popup__cover {
  width: 96px; height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  box-shadow: 0 0 36px -8px var(--gold-soft), inset 0 0 0 4px rgba(255,255,255,0.04);
  position: relative;
}
.u-popup__cover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 60%, rgba(212,166,74,0.20));
  pointer-events: none;
}
.u-popup__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.u-popup__eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
.u-popup__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px;
  color: var(--gold-bright);
  letter-spacing: -0.018em;
  line-height: 1.18;
}
.u-popup__lead {
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.u-popup__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--divider), transparent);
  margin: 8px 0 18px;
}
.u-popup__actions { display: flex; flex-direction: column; gap: 8px; }

/* === Generisches Listen-Popup ============================================
   Pattern für Popups die eine Liste von klickbaren Items zeigen
   (Studien-PDFs, In-vitro-Befunde, etc.). Konvention identisch zu
   .erf-orig-list, aber namespace-frei und ohne Filter-Chips.
   Items können <a href> sein (Navigate) oder <button data-popup2-trigger> (Tier-2).
   ====================================================================== */
.u-popup:has(.u-list-popup) {
  display: flex; flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
}
.u-list-popup {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.u-list-popup::-webkit-scrollbar { width: 4px; }
.u-list-popup::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }
.u-list-popup__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.u-list-popup__item:hover {
  border-color: var(--gold);
  background: rgba(212,166,74,0.07);
  transform: translateX(2px);
}
.u-list-popup__item-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: rgba(212,166,74,0.18);
  border: 1px solid rgba(212,166,74,0.35);
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
}
.u-list-popup__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.u-list-popup__item-title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-list-popup__item-meta {
  font-size: 11px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-list-popup__item-arrow { color: var(--text-faint); flex-shrink: 0; }
.u-list-popup__item:hover .u-list-popup__item-arrow { color: var(--gold-bright); }
.u-popup__footer {
  display: flex; justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

/* === Reveal — reine Fade-In (kein Translate, kein Stagger), elegante Erscheinung
       nachdem Page-Crossfade die View-Transition abgeschlossen hat. */
@keyframes uReveal { from { opacity: 0; } to { opacity: 1; } }
.u-reveal { animation: uReveal var(--t-norm) var(--ease-out) both; }
.u-reveal-1,
.u-reveal-2,
.u-reveal-3,
.u-reveal-4 { animation-delay: 0ms; }

/* === Iconbutton === */
.u-iconbtn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text-soft); transition: all var(--t-fast); }
.u-iconbtn:hover { background: var(--gold-tint); color: var(--gold-bright); }
.u-iconbtn:active { transform: scale(0.94); }

/* ═══════════════════════════════════════════════════════════════
   Detail-Page Komponenten (Action-Bar, Hero, Stat-Bar, Related)
   ═══════════════════════════════════════════════════════════════ */

/* === Action-Bar (Zurück + Eyebrow + Merken) === */
.u-actionbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px;
  flex-shrink: 0;
}
.u-actionbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.u-actionbar__back:hover {
  background: var(--gold-tint);
  color: var(--gold-bright);
  border-color: var(--border-strong);
  transform: translateX(-2px);
}
.u-actionbar__back svg { transition: transform var(--t-fast); }
.u-actionbar__back:hover svg { transform: translateX(-2px); }
.u-actionbar__eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-actionbar__bookmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.u-actionbar__bookmark:hover {
  background: var(--gold-tint);
  color: var(--gold-bright);
  border-color: var(--border-strong);
}
.u-actionbar__bookmark.is-active {
  background: linear-gradient(135deg, rgba(212,166,74,0.32), rgba(212,166,74,0.16));
  color: var(--gold-bright);
  border-color: var(--border-strong);
  box-shadow: 0 0 12px -2px var(--gold-soft);
}
.u-actionbar__bookmark svg { transition: transform var(--t-fast); }
.u-actionbar__bookmark.is-active svg { transform: scale(1.1); }

/* Mobile: Eyebrow ausblenden, mehr Platz für Buttons */
@media (max-width: 540px) {
  .u-actionbar { grid-template-columns: auto 1fr auto; gap: 6px; }
  .u-actionbar__eyebrow { display: none; }
  .u-actionbar__back, .u-actionbar__bookmark { padding: 7px 12px; font-size: 12px; }
}

/* === Detail-Hero === */
.u-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 6px 4px 14px;
  flex-shrink: 0;
}
.u-hero__cover {
  width: 84px;
  height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 0 24px -8px var(--gold-soft);
  flex-shrink: 0;
}
.u-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-hero__body { min-width: 0; }
.u-hero__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gold-bright);
  margin: 0 0 4px;
  line-height: 1.18;
}
.u-hero__subtitle {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 6px;
}
.u-hero__lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 6px 0 8px;
  /* clamp 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Tonale Chip-Varianten */
.u-chip--gold  { color: var(--gold-bright);   border-color: var(--border-strong); background: var(--gold-tint); }
.u-chip--cyan  { color: var(--cyan-bright);   border-color: rgba(126,200,200,0.3); background: var(--cyan-soft); }
.u-chip--green { color: var(--green-bright);  border-color: rgba(177,194,117,0.3); background: var(--green-soft); }
.u-chip--mute  { color: var(--text-mute); }

@media (max-width: 540px) {
  .u-hero__cover { width: 64px; height: 64px; }
  .u-hero__title { font-size: 16px; }
  .u-hero__subtitle, .u-hero__lead { font-size: 12px; }
}

/* === Stat-Bar (persistent Outcome-Stripe) === */
.u-statbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(13,14,12,0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.u-statbar__count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.u-statbar__track {
  display: flex;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--bg-mute);
}
.u-statbar__seg { display: block; transition: width var(--t-slow) var(--ease-out); }
.u-statbar__legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-mute);
}
.u-statbar__legend-item { display: inline-flex; align-items: center; gap: 4px; }
.u-statbar__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 540px) {
  .u-statbar { padding: 6px 10px; }
  .u-statbar__count { font-size: 10px; }
  .u-statbar__legend { gap: 8px; font-size: 10px; }
}

/* === Related-Grid === */
.u-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  min-height: 0;
}
@media (min-width: 720px) {
  .u-related { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.u-related__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-height: 100px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  background: rgba(13,14,12,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--t-norm);
}
.u-related__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.20;
  transition: opacity var(--t-norm);
  z-index: 0;
}
.u-related__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px var(--gold-soft);
}
.u-related__card:hover .u-related__bg { opacity: 0.42; }
.u-related__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.u-related__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.u-related__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.u-related__sub {
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Slide-Schablonen S1-S10 (Reise-Player)
   ═══════════════════════════════════════════════════════════════ */
.s-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  background-position: center;
  background-size: cover;
  border-radius: var(--r-md);
  overflow: hidden;
}
.s-slide:not(.s-title) { padding: 22px; gap: 14px; justify-content: center; }
.s-slide.s-title { padding: 0; }
.s-h { font-family: var(--font-display); margin: 0; letter-spacing: -0.015em; color: var(--gold-bright); line-height: 1.18; }
.s-h--1 { font-size: clamp(22px, 4vw, 36px); font-weight: 700; }
.s-h--2 { font-size: clamp(18px, 3vw, 24px); font-weight: 600; }

/* S1 — Title */
.s-title { background-color: var(--bg-paper); }
.s-title::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,4,0.45) 0%, rgba(6,7,4,0.85) 80%);
}
.s-title__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 100%; padding: 32px;
  text-align: center; gap: 12px;
}
.s-title__subtitle { font-size: clamp(13px, 1.6vw, 16px); color: var(--text-soft); margin: 0; max-width: 520px; }
.s-title__lead     { font-size: clamp(13px, 1.5vw, 15px); color: var(--text-mute); margin: 0; max-width: 540px; line-height: 1.6; }

/* S2/S3 — Text + Bild */
.s-textimg { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 22px; }
@media (min-width: 720px) {
  .s-textimg { grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; }
  .s-textimg--right .s-textimg__body { grid-column: 1; }
  .s-textimg--right .s-textimg__img  { grid-column: 2; }
  .s-textimg--left  .s-textimg__img  { grid-column: 1; }
  .s-textimg--left  .s-textimg__body { grid-column: 2; }
}
.s-textimg__img {
  border-radius: var(--r-md); overflow: hidden; max-height: 56vh;
  border: 1px solid var(--border); box-shadow: 0 0 24px -8px var(--gold-soft);
}
.s-textimg__img img { width: 100%; height: 100%; object-fit: cover; max-height: 56vh; }
.s-textimg__md { font-size: 14px; line-height: 1.65; color: var(--text-soft); }
.s-textimg__md p { margin: 0 0 10px; }
.s-textimg__md strong { color: var(--gold-bright); }

/* S4 — Volltext */
.s-fulltext__inner {
  max-width: 720px; margin: 0 auto; padding: 22px;
  border-left: 2px solid var(--accent, var(--gold)); border-radius: var(--r-md);
  background: rgba(13,14,12,0.45); backdrop-filter: blur(8px);
}
.s-fulltext__md { font-size: 14px; line-height: 1.7; color: var(--text-soft); }
.s-fulltext__md p { margin: 0 0 12px; }

/* S5 — Galerie */
.s-gallery__head { text-align: center; margin-bottom: 12px; }
.s-gallery__lead { color: var(--text-mute); font-size: 13px; max-width: 540px; margin: 6px auto 0; }
.s-gallery__grid {
  display: grid; gap: 10px; height: 100%;
}
.s-gallery--2 .s-gallery__grid { grid-template-columns: 1fr 1fr; }
.s-gallery--3 .s-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.s-gallery--4 .s-gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.s-gallery__item { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); position: relative; }
.s-gallery__item img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.s-gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 10px; font-size: 11px; color: var(--text-soft);
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
}

/* S6 — Zitat */
.s-quote__inner {
  max-width: 720px; margin: auto; padding: 32px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.s-quote__mark { color: var(--gold-soft); }
.s-quote__text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.4;
  color: var(--text); margin: 0;
}
.s-quote__src { font-size: 13px; color: var(--gold-bright); letter-spacing: 0.04em; }
.s-quote__foot { font-size: 12px; color: var(--text-mute); }

/* S7 — Frage */
.s-q__inner { max-width: 640px; margin: auto; padding: 22px; }
.s-q__question { font-family: var(--font-display); font-size: clamp(16px,2.2vw,20px); font-weight: 600; color: var(--gold-bright); margin: 0 0 18px; text-align: center; }
.s-q__options { display: grid; gap: 8px; }
.s-q__option {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(13,14,12,0.55); color: var(--text);
  text-align: left; font-size: 14px; cursor: pointer;
  transition: all var(--t-fast); backdrop-filter: blur(6px);
}
.s-q__option:hover { border-color: var(--border-strong); background: var(--gold-tint); }
.s-q__option.is-correct { border-color: var(--green-bright); background: var(--green-soft); color: var(--green-bright); }
.s-q__option.is-wrong { border-color: rgba(255,99,89,0.45); background: rgba(255,99,89,0.12); color: rgba(255,99,89,0.95); }
.s-q__expl { margin-top: 14px; font-size: 13px; color: var(--text-soft); padding: 12px; background: var(--bg-mute); border-radius: var(--r-md); }

/* S8 — Vergleich */
.s-vs { padding: 22px; }
.s-vs__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .s-vs__grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.s-vs__col {
  padding: 18px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: rgba(13,14,12,0.4); backdrop-filter: blur(6px);
}
.s-vs__label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; }
.s-vs__label--left  { color: var(--cyan-bright); }
.s-vs__label--right { color: var(--gold-bright); }
.s-vs__md { font-size: 13px; line-height: 1.6; color: var(--text-soft); }

/* S9 — Audio */
.s-audio__inner { max-width: 540px; margin: auto; text-align: center; padding: 22px; }
.s-audio__sub { color: var(--text-mute); font-size: 13px; margin: 4px 0 16px; }
.s-audio__play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  border: 0; color: #1a1208; font-weight: 600; font-size: 14px;
  cursor: pointer; box-shadow: var(--shadow-glow-gold); transition: transform var(--t-fast);
}
.s-audio__play:hover { transform: scale(1.04); }
.s-audio__transcript { margin-top: 16px; text-align: left; }
.s-audio__transcript summary { cursor: pointer; color: var(--text-mute); font-size: 12px; }
.s-audio__md { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin-top: 10px; }

/* S10 — Outro */
.s-outro__inner { max-width: 600px; margin: auto; text-align: center; padding: 32px 22px; }
.s-outro__head { font-family: var(--font-display); font-size: clamp(20px,3vw,28px); font-weight: 700; color: var(--gold-bright); margin: 0 0 12px; }
.s-outro__lead { color: var(--text-soft); font-size: 14px; line-height: 1.6; margin: 0 0 24px; }
.s-outro__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Error-Slide */
.s-error { display: flex; align-items: center; justify-content: center; color: var(--text-mute); padding: 40px; }

/* ═══════════════════════════════════════════════════════════════
   Orientation-Lock — App-weit erzwingen (Mobile + Tablet)
   ───────────────────────────────────────────────────────────────
   `body[data-orient]` = gewünschte Orientierung:
     "lock-portrait"   (Default für die meisten Pages)
     "lock-landscape"  (Reise-Modus)
     "free"            (eReader)
   Bei Mismatch zwischen gewünscht und Geräte-Orientierung wird `.u-rot`
   per CSS-Transform 90° gedreht (Width/Height getauscht), sodass das
   gewünschte Layout immer sichtbar bleibt. Der Browser bekommt das nicht
   mit (DOM-Scroll, Touch, Audio bleiben funktional).
   Detection: pointer:coarse = Touch-Gerät. max-width:1280 schließt
   Convertibles im Desktop-Mode aus.
   ═══════════════════════════════════════════════════════════════ */
.u-rot { display: block; }

/* Auto-Rotate-Trick (CSS-only, YouTube-Style):
   - Mobile Portrait + lock-landscape Reise → ganze App per CSS-Transform 90° drehen
   - Flatten (kein nested @media) damit ältere Safari-Versionen greifen
   - Kein pointer-Gate (iOS Safari erkennt 'pointer:coarse' inkonsistent)
   - 100dvh statt 100vh → reagiert auf Browser-Bar-Collapse */
@media (max-width: 1280px) and (orientation: landscape) {
  body[data-orient="lock-portrait"] .u-rot {
    position: fixed; inset: 0;
    width: 100dvh; height: 100dvw;
    transform-origin: 0 0;
    overflow: hidden;
    z-index: 1;
    transform: rotate(-90deg) translateX(-100%);
  }
  body[data-orient="lock-portrait"] .u-shell { width: 100%; height: 100%; }
  html[data-angle="270"] body[data-orient="lock-portrait"] .u-rot {
    transform: rotate(90deg) translateY(-100%);
  }
}
@media (max-width: 1280px) and (orientation: portrait) {
  body[data-orient="lock-landscape"] .u-rot {
    position: fixed; inset: 0;
    width: 100dvh; height: 100dvw;
    transform-origin: 0 0;
    overflow: hidden;
    z-index: 1;
    transform: rotate(90deg) translateY(-100%);
  }
  body[data-orient="lock-landscape"] .u-shell { width: 100%; height: 100%; }
  html[data-angle="180"] body[data-orient="lock-landscape"] .u-rot {
    transform: rotate(-90deg) translateX(-100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Auto-Pager
   ═══════════════════════════════════════════════════════════════ */
[data-autopager] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
[data-autopager-track] {
  flex: 1;
  min-height: 0;
  /* Horizontale Clip + vertikal Luft für Hover-Lift der ersten Card (translateY(-2px)).
     CSS-Spec-Quirk: overflow-x: hidden + overflow-y: visible coerced overflow-y zu auto
     (Scrollbalken!). Lösung: overflow-x: clip — clip triggert die Coercion nicht aus.
     `clip` ab Chrome 90 / Firefox 81 / Safari 16 — modernsupport reicht uns. */
  overflow-x: clip;
  overflow-y: visible;
}
/* Initial: alle Items visibility:hidden — Layout-Space bleibt für die Measurement,
   aber kein Paint. JS misst, macht passende visible, überzählige display:none.
   So kein Flicker (FOUC) der überzähligen Items beim Initial-Render.
   Soft fade-in auf ready: keinharte Reflow-Wahrnehmung mehr. */
[data-autopager-track] > [data-autopager-item] { visibility: hidden; opacity: 0; }
[data-autopager-track][data-autopager-ready] > [data-autopager-item] {
  visibility: visible;
  opacity: 1;
  transition: opacity 180ms var(--ease-out);
}
/* Pager-Bar = .u-arrow-pager — wiederverwendbar, edel & klar erkennbar.
   Auch ohne data-autopager direkt nutzbar. */
[data-autopager-pager],
.u-arrow-pager {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 6px;
  background: linear-gradient(135deg, rgba(20,21,15,0.78), rgba(13,14,12,0.55));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.02);
  margin: 0 auto;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
[data-autopager-pager]::before,
.u-arrow-pager::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--gold-soft), transparent 40%, transparent 60%, var(--gold-soft));
  z-index: -1;
  opacity: 0.35;
}
[data-autopager-pager] button,
.u-arrow-pager button,
.u-arrow-pager a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
[data-autopager-pager] button:hover:not([disabled]),
.u-arrow-pager button:hover:not([disabled]),
.u-arrow-pager a:hover:not(.is-disabled) {
  background: var(--gold-tint);
  color: var(--gold-bright);
  transform: scale(1.08);
}
[data-autopager-pager] button:active:not([disabled]),
.u-arrow-pager button:active:not([disabled]) {
  transform: scale(0.94);
}
[data-autopager-pager] button[disabled],
.u-arrow-pager button[disabled],
.u-arrow-pager .is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
[data-autopager-label],
.u-arrow-pager__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--gold-bright);
  white-space: nowrap;
  padding: 0 14px;
  border-left: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  min-width: 70px;
  text-align: center;
}
/* Wrapper braucht keine eigene Höhe wenn pager hidden (nur 1 Page) */
[data-autopager-pager][hidden] { display: none; }

/* Standalone Container (z.B. unten zentriert in Forschen) */
[data-autopager] > [data-autopager-pager] {
  align-self: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   Universal Frost-Glass-Style
   Wird mit .u-frost als Mixin verwendet, oder direkt in Card-Klassen.
   ═══════════════════════════════════════════════════════════════ */
.u-frost,
.cockpit__tile,
.cockpit__hl-card,
.cockpit__recent-row,
.cockpit__hello,
.cockpit__profile-hint,
.archiv__card,
.archiv__empty,
.forschen__card,
.labor__hero,
.labor__box,
.labor__product,
.labor__placeholder,
.labor-gate__lock,
.u-row,
.u-tile,
.u-related__card,
.u-actionbar__back,
.u-actionbar__bookmark,
.u-statbar,
.page-werk__cta,
.u-bericht-layer,
.s-fulltext__inner,
.s-vs__col,
.s-q__option {
  /* Glassy-Background mit echter Sättigung — milchig-gold-getönt */
  background:
    linear-gradient(135deg, rgba(28,28,20,0.55) 0%, rgba(13,14,12,0.42) 100%);
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  border: 1px solid var(--border);
  /* Soft inner-Highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Hover-Variante — leichter Goldsheen */
.u-frost:hover,
.cockpit__tile:hover,
.cockpit__hl-card:hover,
.cockpit__recent-row:hover,
.archiv__card:hover,
.forschen__card:hover,
.labor__box:hover,
.labor__product:hover,
.u-related__card:hover,
.u-row:hover,
.u-tile:hover,
.s-q__option:hover {
  background:
    linear-gradient(135deg, rgba(38,36,24,0.7) 0%, rgba(20,21,15,0.55) 100%);
  border-color: var(--border-strong);
}

/* Active/Stark-Variante (für aktive Tabs, gewählte Avatare etc.) */
.u-frost--active,
.cockpit__tile.is-active,
.ob__avatar.is-active,
.ob__choice.is-active,
.ob__chip.is-active {
  background:
    linear-gradient(135deg, rgba(212,166,74,0.22) 0%, rgba(212,166,74,0.08) 100%);
  border-color: var(--gold);
  box-shadow: 0 0 16px -4px var(--gold-soft), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Subtle-Variante (kleine Chips, Buttons im Frost-Look ohne Lift) */
.u-frost--subtle {
  background: rgba(13,14,12,0.45);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

/* ═══════════════════════════════════════════════════════════════
   Frost-Final v9 — Konsistenter Gradient-Glas-Look, ohne ::before-Bild.
   Erkenntnis: pixelgenaue Bild-Reproduktion pro Card auf Mobile geht
   nicht zuverlässig (Aspect-Verzerrung, fixed-attachment-Bug etc.).
   Stattdessen: einheitlicher Multi-Layer-Gradient + Backdrop-Filter wo
   verfügbar (Desktop), Noise-Pattern als Fallback. Sieht überall gleich
   gut aus, kein Verzerren, kein Flecken-Bug.
   ═══════════════════════════════════════════════════════════════ */
.u-frost,
.cockpit__tile,
.cockpit__hello,
.cockpit__hl-card,
.cockpit__recent-row,
.cockpit__profile-hint,
.cockpit__stat,
.archiv__card,
.archiv__empty,
.forschen__card,
.forschen__teaser,
.labor__hero,
.labor__box,
.labor__product,
.labor__placeholder,
.labor__buy-choice,
.labor-gate__lock,
.u-row,
.u-tile,
.u-related__card,
.u-actionbar__back,
.u-actionbar__bookmark,
.u-statbar,
.page-werk__cta,
.s-fulltext__inner,
.s-vs__col,
.s-q__option,
.ob__avatar,
.ob__choice,
.ob__chip,
.ob__summary {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(160deg, rgba(28,28,20,0.62) 0%, rgba(13,14,12,0.78) 100%) !important;
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 16px -8px rgba(0,0,0,0.45) !important;
}
.cockpit__stat,
.labor__product,
.u-pager__btn,
.ob__field input {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(160deg, rgba(20,21,15,0.58) 0%, rgba(13,14,12,0.74) 100%) !important;
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Frost-Mobile v2 (2026-05-12) — Progressive Enhancement
   Strategie: ECHTES Milchglas (backdrop-filter) auch auf Mobile
   wenn der Browser es unterstützt. Solid-Tint nur als Fallback
   via @supports not. So sieht der User auf modernen Browsern
   den echten Blur-Effekt, alte Browser bekommen lesbares Solid.
   ═══════════════════════════════════════════════════════════════ */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 600px), (hover: none) and (max-width: 900px) {
    .u-frost,
    .cockpit__tile, .cockpit__hello, .cockpit__hl-card, .cockpit__recent-row,
    .cockpit__profile-hint, .cockpit__stat,
    .archiv__card, .archiv__empty,
    .forschen__card, .forschen__teaser,
    .labor__hero, .labor__box, .labor__product, .labor__placeholder,
    .labor__buy-choice, .labor-gate__lock,
    .u-row, .u-tile, .u-related__card,
    .u-actionbar__back, .u-actionbar__bookmark, .u-statbar,
    .page-werk__cta, .s-fulltext__inner, .s-vs__col, .s-q__option,
    .ob__avatar, .ob__choice, .ob__chip, .ob__summary,
    .pp-tab, .pp-action-btn,
    .erf-cat-card, .erf-bericht__empty, .erf-orig-item, .erf-einordnung__box,
    .erf-stat, .erf-outcome__btn, .erf-bar-item,
    .merk-item, .lit-tile, .werk__book--row {
      /* Echtes Milchglas: leichter Tint + starker blur — Hintergrund
         schimmert WEICH durch, Text bleibt lesbar dank radial highlight */
      background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 42%),
        rgba(14, 15, 11, 0.58) !important;
      backdrop-filter: blur(16px) saturate(1.5) !important;
      -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    }
  }
}

/* Fallback NUR wenn backdrop-filter NICHT supported (iOS < 14, alte Android-Chrome).
   Solid + deckender Tint — Text muss lesbar bleiben. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 600px), (hover: none) and (max-width: 900px) {
    .u-frost,
    .cockpit__tile, .cockpit__hello, .cockpit__hl-card, .cockpit__recent-row,
    .cockpit__profile-hint, .cockpit__stat,
    .archiv__card, .archiv__empty,
    .forschen__card, .forschen__teaser,
    .labor__hero, .labor__box, .labor__product, .labor__placeholder,
    .labor__buy-choice, .labor-gate__lock,
    .u-row, .u-tile, .u-related__card,
    .u-actionbar__back, .u-actionbar__bookmark, .u-statbar,
    .page-werk__cta, .s-fulltext__inner, .s-vs__col, .s-q__option,
    .ob__avatar, .ob__choice, .ob__chip, .ob__summary,
    .pp-tab, .pp-action-btn,
    .erf-cat-card, .erf-bericht__empty, .erf-orig-item, .erf-einordnung__box,
    .erf-stat, .erf-outcome__btn, .erf-bar-item,
    .merk-item, .lit-tile, .werk__book--row {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%),
        var(--frost-bg-mobile-fallback) !important;
    }
  }
}
  /* Filter-Pills + kleine Chips: weniger opak, aber solid-deckend */
  .erf-tag,
  .u-frost--subtle,
  .u-chip,
  .u-pager__btn {
    background: rgba(18,18,13,0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .erf-tag.is-active {
    background: linear-gradient(135deg, rgba(212,166,74,0.36), rgba(212,166,74,0.16)) !important;
  }
  /* Active/Recommended Modifier behalten ihren Gold-Look auch mobil */
  .u-frost--active,
  .cockpit__tile.is-active,
  .ob__avatar.is-active,
  .ob__choice.is-active,
  .ob__chip.is-active,
  .forschen__card--recommended {
    background:
      linear-gradient(135deg, rgba(212,166,74,0.32) 0%, rgba(14,14,11,0.85) 100%) !important;
  }
}

/* Lesbarkeits-Versicherung: dezenter Text-Shadow auf Card-Titeln
   die über variablen Hintergrund liegen. Kein "Halo", nur 1-2px Schatten. */
.forschen__card-title,
.u-tile__title,
.u-row__title,
.cockpit__hl-card-title {
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.u-content { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   Produktseite (pp) — Geräte-Schablone (6 Tabs, Sticky-CTA)
   ───────────────────────────────────────────────────────────────
   Tab-Wechsel via View-Transitions auf .pp-stage. Inhalt füllt Viewport
   ohne Scroll — innere Container scrollen wenn nötig.
   ═══════════════════════════════════════════════════════════════ */
.page-product {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px 8px;
  box-sizing: border-box;
  min-height: 0;
  gap: 6px;
}
@media (max-width: 480px) { .page-product { padding: 0 8px 6px; gap: 4px; } }

/* Tab-Navigation oben — kompakt + milchglas */
.pp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14,14,11,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-soft);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.pp-tabs__btn:hover { background: var(--gold-tint); color: var(--gold-bright); }
.pp-tabs__btn.is-active {
  background: var(--gold);
  color: #1a1208;
  border-color: var(--gold-bright);
  font-weight: 600;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pp-tabs__num {
  font-size: 10px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.pp-tabs__btn.is-active .pp-tabs__num { opacity: 1; }
.pp-tabs__lbl { font-size: 12px; }
@media (max-width: 480px) {
  .pp-tabs__btn { padding: 5px 9px; font-size: 11px; }
  .pp-tabs__lbl { font-size: 11px; }
  .pp-tabs__num { display: none; }   /* Nummer raus auf Mobile-small */
}

/* Stage — Inner-Scroll als Notbremse erlaubt, aber Scrollbar unsichtbar (cleaner Look). */
.pp-stage {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 0;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
  view-transition-name: pp-stage;
  min-height: 0;
}
.pp-stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
::view-transition-group(pp-stage) { animation: none !important; }
::view-transition-old(pp-stage) { animation: ppFadeOut 200ms ease-out forwards; }
::view-transition-new(pp-stage) { animation: ppFadeIn  240ms ease-out forwards; }
@keyframes ppFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ppFadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Sektion-Container */
.pp-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 16px;
  min-height: 0;
}
.pp-section__head { display: flex; flex-direction: column; gap: 4px; }
.pp-section__eyebrow {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 600;
}
.pp-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--gold-bright);
  font-weight: 700;
}
.pp-section__lead {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  max-width: 720px;
}
@media (min-width: 720px) { .pp-section__title { font-size: 26px; } }

/* === Frost-Mixin (überall einheitlich) ============================ */
.pp-frost {
  background: rgba(14,14,11,0.62);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* === Tab 1: Übersicht === */
.pp-overview { gap: 10px; }
.pp-overview__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(14,14,11,0.62);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
@media (min-width: 720px) {
  .pp-overview__hero { grid-template-columns: minmax(180px, 28%) 1fr; gap: 16px; padding: 14px 18px; }
}
.pp-overview__cover {
  aspect-ratio: 16 / 10;
  max-height: 110px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--gold-soft);
  background: var(--bg-mute);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.6), 0 0 16px -8px var(--gold-soft);
}
@media (min-width: 720px) { .pp-overview__cover { aspect-ratio: 4 / 5; max-height: none; } }
.pp-overview__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-overview__intro { display: flex; flex-direction: column; gap: 4px; }
.pp-overview__eyebrow {
  margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold); font-weight: 600;
}
.pp-overview__title {
  margin: 2px 0 0; font-family: var(--font-display);
  font-size: 19px; line-height: 1.15; color: var(--gold-bright); font-weight: 700;
}
@media (min-width: 720px) { .pp-overview__title { font-size: 26px; } }
@media (min-width: 1024px) { .pp-overview__title { font-size: 30px; } }
.pp-overview__subtitle { margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.4; }
@media (min-width: 720px) { .pp-overview__subtitle { font-size: 14px; } }
.pp-overview__lead { margin: 4px 0 0; font-size: 12px; color: var(--text); line-height: 1.5; }
@media (min-width: 720px) { .pp-overview__lead { font-size: 13.5px; } }
.pp-overview__statement { display: none; }   /* zu groß, raus aus Hero — gehört in Studien-Tab */

/* === Tile-Grid (4 Kacheln) === */
.pp-tile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
  .pp-tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.pp-tile, .pp-result-tile, .pp-lab-fn {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  background: rgba(14,14,11,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 200ms ease, transform 200ms ease;
}
.pp-tile:hover, .pp-result-tile:hover, .pp-lab-fn:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.pp-tile__title, .pp-result-tile__title, .pp-lab-fn__title {
  margin: 0; font-size: 13px; color: var(--gold-bright); font-weight: 600; line-height: 1.3;
}
.pp-tile__body, .pp-result-tile__body, .pp-lab-fn__body {
  margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.45;
}

/* === Lieferumfang (im Übersicht-Tab) === */
.pp-delivery {
  padding: 12px 14px;
  background: rgba(108,214,108,0.05);
  border: 1px solid rgba(108,214,108,0.18);
  border-radius: var(--r-md);
}
.pp-delivery__head { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #6cd66c; font-weight: 700; }
.pp-delivery__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
@media (min-width: 720px) { .pp-delivery__list { grid-template-columns: repeat(3, 1fr); } }
.pp-delivery__list li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); line-height: 1.35; }
.pp-delivery__list svg { flex-shrink: 0; color: #6cd66c; opacity: 0.85; }

/* === Pills (Hersteller, In-vitro, Type) === */
.pp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  white-space: nowrap;
}
.pp-pill--invitro { background: rgba(120,180,255,0.16); color: #aac8ff; border: 1px solid rgba(120,180,255,0.3); }
.pp-pill--type    { background: var(--gold-tint); color: var(--gold-bright); border: 1px solid var(--gold-soft); }
.pp-pill--inst    { background: rgba(255,255,255,0.06); color: var(--text-mute); }

/* === Result-Tile mit Metric === */
.pp-result-tile { padding-top: 14px; }
.pp-result-tile__metric {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-bright);
  font-family: var(--font-display);
  line-height: 1;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .pp-result-tile__metric { font-size: 28px; } }

/* === Tab 2: Wissenschaft === */
.pp-science__grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pp-science__grid { grid-template-columns: 2fr 1fr; }
}
.pp-study-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--frost-bg-strong, rgba(13,14,12,0.62));
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
}
.pp-study-card__head { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-study-card__title { margin: 0; font-size: 16px; color: var(--gold-bright); font-weight: 600; line-height: 1.3; font-family: var(--font-display); }
.pp-study-card__summary { font-size: 13px; color: var(--text); line-height: 1.5; }
.pp-study-card__summary p { margin: 0 0 0.5em; }
.pp-study-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
.pp-study-card__meta { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pp-study-card__btn { font-size: 12px; padding: 6px 12px; }

.pp-cellmodels {
  padding: 12px 14px;
  background: rgba(14,14,11,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-sm);
}
.pp-cellmodels__head { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 600; }
.pp-cellmodels__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-cellmodels__list li { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.pp-cellmodels__list strong { color: var(--gold-bright); display: block; font-weight: 600; }
.pp-cellmodels__line { display: block; font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.pp-disclaimer {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  padding: 10px 14px;
  background: rgba(120,180,255,0.06);
  border-left: 2px solid rgba(120,180,255,0.4);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.pp-disclaimer__icon { color: rgba(170,200,255,0.85); font-weight: 700; flex-shrink: 0; }

/* === Tab 3: Ergebnisse — Evidence-Box === */
.pp-evidence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px;
  background: rgba(14,14,11,0.6);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
}
@media (min-width: 720px) { .pp-evidence { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.pp-evidence__col {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.3);
}
.pp-evidence__col--shows { border-left: 3px solid #6cd66c; }
.pp-evidence__col--not   { border-left: 3px solid #d66c6c; }
.pp-evidence__col--why   { border-left: 3px solid var(--gold); }
.pp-evidence__head { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); font-weight: 700; }
.pp-evidence__col p { margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

.pp-memo {
  margin: 0;
  padding: 12px 16px;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-bright);
  text-align: center;
  background: rgba(212,166,74,0.08);
  border: 1px solid rgba(212,166,74,0.25);
  border-radius: var(--r-md);
  font-family: var(--font-display);
}

/* === Tab 4: Anwendung === */
.pp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) { .pp-steps { grid-template-columns: repeat(3, 1fr); } }
.pp-step {
  padding: 14px;
  background: rgba(14,14,11,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  position: relative;
}
.pp-step__num {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-bottom: 4px;
}
.pp-step__title { margin: 0 0 4px; font-size: 14px; color: var(--gold-bright); font-weight: 600; }
.pp-step__body { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.pp-audiences { display: flex; flex-direction: column; gap: 10px; }
.pp-audiences__head { margin: 0; font-size: 13px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.pp-audiences__grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .pp-audiences__grid { grid-template-columns: repeat(4, 1fr); } }
.pp-audience { padding: 10px 12px; background: rgba(14,14,11,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r-sm); }
.pp-audience__title { margin: 0 0 4px; font-size: 12px; color: var(--gold-bright); font-weight: 600; }
.pp-audience__body { margin: 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }

/* === Tab 5: Labor === */
.pp-lab-fn { padding-top: 14px; }
.pp-lab-fn__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.pp-lab-fn__link:hover { color: var(--gold-bright); }

/* === Tab 6: Sicherheit + FAQ === */
.pp-safety-faq__grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pp-safety-faq__grid { grid-template-columns: 1fr 1.4fr; } }
.pp-safety {
  padding: 14px;
  background: rgba(214,108,108,0.08);
  border: 1px solid rgba(214,108,108,0.3);
  border-radius: var(--r-md);
}
.pp-safety__head { margin: 0 0 6px; font-size: 12px; color: #d66c6c; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.pp-safety__lead { margin: 0 0 10px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.pp-safety__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-safety__list li { font-size: 12px; color: var(--text-soft); line-height: 1.45; padding-left: 14px; position: relative; }
.pp-safety__list li::before { content: '·'; position: absolute; left: 4px; color: #d66c6c; font-weight: 700; }

.pp-faq { display: flex; flex-direction: column; gap: 6px; }
.pp-faq__head { margin: 0 0 4px; font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.pp-faq__item {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  background: rgba(14,14,11,0.45);
  overflow: hidden;
}
.pp-faq__item summary {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  list-style: none;
  position: relative;
  padding-right: 36px;
  transition: background 160ms ease;
}
.pp-faq__item summary:hover { background: rgba(255,255,255,0.04); }
.pp-faq__item summary::after {
  content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--gold); font-weight: 700; transition: transform 200ms ease;
}
.pp-faq__item[open] summary::after { content: '−'; }
.pp-faq__a {
  padding: 0 12px 12px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.pp-faq__a p { margin: 0 0 0.5em; }
.pp-faq__item summary::-webkit-details-marker { display: none; }

/* === Sticky-CTA-Bar unten — Icons links, Hauptbutton rechts === */
.pp-cta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 0;
  flex-shrink: 0;
}
.pp-cta-bar__icons { display: flex; gap: 4px; flex-shrink: 0; }
.pp-icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(14,14,11,0.62);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-soft);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pp-icon-btn:hover:not([disabled]) { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold-soft); }
.pp-icon-btn[disabled],
.pp-icon-btn.is-empty { opacity: 0.35; cursor: not-allowed; }

.pp-cta-bar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; justify-content: center;
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(14,14,11,0.62);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.pp-cta-bar__btn--primary {
  background: var(--gold);
  color: #1a1208;
  border-color: var(--gold-bright);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pp-cta-bar__btn--primary:hover:not([disabled]) { background: var(--gold-bright); transform: translateY(-1px); }
.pp-cta-bar__btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pp-cta-bar__discount {
  font-size: 10px;
  background: rgba(0,0,0,0.25);
  padding: 2px 7px;
  border-radius: 999px;
  color: #1a1208;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .pp-icon-btn { width: 34px; height: 34px; }
  .pp-cta-bar__btn { padding: 9px 12px; font-size: 12px; }
}

/* Popup Inhalts-Layouts */
.pp-popup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-popup-actions .u-btn { flex: 1 1 auto; min-width: 0; }
.pp-popup-foot { margin: 8px 0 0; font-size: 11px; color: var(--text-mute); text-align: center; }

/* Preis-Reveal Popup A */
.pp-price-now { color: var(--gold-bright); font-weight: 700; font-size: 18px; }
.pp-price-old { color: var(--text-mute); font-size: 13px; margin: 0 4px; }
.pp-price-save { color: #6cd66c; font-size: 12px; margin-left: 4px; font-weight: 600; }

/* Bestell-Form Popup B */
.pp-order-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pp-order-form__row { display: grid; gap: 10px; grid-template-columns: 1fr; }
.pp-order-form__row--two { grid-template-columns: auto 1fr; }
.pp-order-form__field { display: flex; flex-direction: column; gap: 4px; }
.pp-order-form__field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 600;
}
.pp-order-form__field--zip { max-width: 100px; }
.pp-order-form__field input,
.pp-order-form__field textarea {
  padding: 8px 10px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 160ms ease;
}
.pp-order-form__field input:focus,
.pp-order-form__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0,0,0,0.5);
}
.pp-order-form__fieldset {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-order-form__fieldset legend {
  padding: 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 600;
}
.pp-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); cursor: pointer; }
.pp-radio input { accent-color: var(--gold); }
.pp-radio:hover { color: var(--gold-bright); }

@media (max-width: 719px) {
  .pp-order-form__row--two { grid-template-columns: 1fr; }
  .pp-order-form__field--zip { max-width: none; }
}

/* === Kaufen-Tab (Form direkt in der Tab-Stage statt Popup) ============== */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.pp-tab-kaufen {
  display: flex; flex-direction: column;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  padding: 14px 4px 18px;
  position: relative;
}
/* Kaufen-Tab: eigene Lesbarkeits-Boost-Schicht hinter dem Produkt-Background-Image
   damit Text/Form ohne harten Kontrast lesbar bleibt — leichter Vignette-Verlauf */
.pp-tab-kaufen::before {
  content: "";
  position: absolute; inset: -40px -20px 0;
  background: radial-gradient(ellipse at center, rgba(8,9,7,0.78) 0%, rgba(8,9,7,0.55) 60%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.pp-tab-kaufen .pp-section__head { position: relative; z-index: 1; }
.pp-tab-kaufen .pp-section__head .pp-section__eyebrow { color: var(--gold); text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
.pp-tab-kaufen .pp-section__head .pp-section__title { color: var(--gold-bright); text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
.pp-tab-kaufen .pp-section__head .pp-section__lead { color: var(--text); text-shadow: 0 1px 4px rgba(0,0,0,0.85); }

.pp-kaufen-price {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px;
  align-self: center;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(212,166,74,0.22), rgba(212,166,74,0.06));
  border: 1px solid rgba(212,166,74,0.42);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 22px -6px var(--gold-soft), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative; z-index: 1;
}
.pp-kaufen-price__now {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.pp-kaufen-price__old { color: var(--text-soft); font-size: 14px; }
.pp-kaufen-price__save { color: #88e088; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.pp-kaufen-price--pending {
  background: rgba(13,14,12,0.7);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
}
.pp-kaufen-price__pending {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Inline-Form: mehr Luft + kontrastreiche Glas-Panels für Lesbarkeit */
.pp-order-form--inline { gap: 16px; margin-top: 4px; position: relative; z-index: 1; }
.pp-order-form__group {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, rgba(13,14,12,0.86), rgba(13,14,12,0.72));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  margin: 0;
}
.pp-order-form__group legend {
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  font-weight: 800;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.pp-order-form--inline .pp-order-form__field span {
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 600;
}
.pp-order-form--inline .pp-order-form__field input,
.pp-order-form--inline .pp-order-form__field textarea {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 11px 13px;
  font-size: 14px;
  color: var(--text);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pp-order-form--inline .pp-order-form__field input:focus,
.pp-order-form--inline .pp-order-form__field textarea:focus {
  background: rgba(0,0,0,0.7);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,166,74,0.12);
}
.pp-order-form--inline .pp-order-form__field input::placeholder,
.pp-order-form--inline .pp-order-form__field textarea::placeholder {
  color: rgba(255,255,255,0.32);
}

/* B2B/Privat-Toggle (Segmented-Pill, oben im Form) */
.pp-order-form__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(13,14,12,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.pp-toggle-opt {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
}
.pp-toggle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pp-toggle-opt svg { opacity: 0.55; transition: opacity var(--t-fast); }
.pp-toggle-opt:hover { color: var(--text); }
.pp-toggle-opt:hover svg { opacity: 0.8; }
.pp-toggle-opt.is-active {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: #1a1208;
  box-shadow: 0 4px 12px -4px var(--gold-soft);
}
.pp-toggle-opt.is-active svg { opacity: 1; color: #1a1208; }

/* Adresse: Straße + Hausnummer-Schmalfeld */
.pp-order-form__row--street { display: grid; grid-template-columns: 1fr 80px; gap: 10px; }
.pp-order-form__field--num input { text-align: center; }
@media (max-width: 480px) {
  .pp-order-form__row--street { grid-template-columns: 1fr 70px; }
}

/* Voucher-Zeile: Input + Inline-Button */
.pp-order-form__group--voucher { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
.pp-voucher-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.pp-voucher-input {
  padding: 11px 13px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pp-voucher-input::placeholder { color: rgba(255,255,255,0.32); text-transform: none; letter-spacing: 0; }
.pp-voucher-input:focus {
  outline: none;
  background: rgba(0,0,0,0.7);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,166,74,0.12);
}
.pp-voucher-btn {
  padding: 11px 18px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.pp-voucher-feedback {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.45;
}
.pp-voucher-feedback.is-success {
  background: rgba(136,224,136,0.10);
  border-left: 3px solid #88e088;
  color: #b8eab8;
}
.pp-voucher-feedback.is-error {
  background: rgba(255,120,120,0.10);
  border-left: 3px solid #ff7878;
  color: #ffb8b8;
}

/* Bei aktivem Voucher: Original-Preis als Hinweis */
[data-pp-original-price] { font-size: 11.5px; color: var(--text-mute); margin-left: 4px; }
[data-pp-final-price].is-discounted { color: #88e088; }

/* Zahlungs-Info-Box (statt Radio-Block) */
.pp-order-form__info {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.30);
  border-radius: var(--r-md);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text);
}
.pp-order-form__info svg { color: var(--gold-bright); margin-top: 2px; }
.pp-order-form__info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.pp-order-form__info span {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.pp-order-form__info span strong {
  display: inline;
  font-size: inherit;
  color: var(--text);
  margin: 0;
}
.pp-order-form__submit-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
@media (min-width: 540px) {
  .pp-order-form__submit-row { flex-direction: row; justify-content: flex-end; align-items: center; }
}
.pp-order-form__submit {
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 8px 24px -6px var(--gold-soft);
}
.pp-order-form__cancel {
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
}
.pp-order-form__cancel:hover { color: var(--gold-bright); }
.pp-order-form__note {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: rgba(13,14,12,0.45);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Auf Kaufen-Tab Swipe-Hint ausblenden (Form-Submit ist die Action) */
.page-product.is-tab-kaufen .pp-swipe-hint { display: none; }

/* Small-screen Tweaks (kompakter Inhalt für Mobile) */
@media (max-width: 719px) {
  .pp-section { gap: 6px; padding: 4px 0; }
  .pp-section__title { font-size: 16px; }
  .pp-section__lead { font-size: 12px; }
  .pp-tile, .pp-result-tile, .pp-lab-fn { padding: 8px 10px; }
  .pp-tile__title, .pp-result-tile__title, .pp-lab-fn__title { font-size: 11.5px; }
  .pp-tile__body, .pp-result-tile__body, .pp-lab-fn__body { font-size: 11px; line-height: 1.35; }
  .pp-result-tile__metric { font-size: 18px; }
}
@media (max-width: 480px) {
  .pp-cta-bar { gap: 6px; padding: 4px 0 0; }
  .pp-cta-bar__btn--primary { padding: 9px 14px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Reise-Player (rp) — Fullscreen-Querformat-Slider
   ───────────────────────────────────────────────────────────────
   Layout: Mini-Header (40px) + Stage (1fr, 16:9 Slide) + Footer-Nav (52px)
   Body.is-reise-mode versteckt App-Shell-Slots (Audio/Topbar/BottomNav).
   data-orient="lock-landscape" → CSS-Rotate ausgeschaltet (per Override unten),
   stattdessen "Bitte drehen"-Overlay wenn Phone portrait gehalten wird.
   ═══════════════════════════════════════════════════════════════ */
.rp {
  display: grid;
  grid-template-rows: 40px 1fr 52px;
  height: 100%;
  width: 100%;
  background: #050605;
  color: var(--text);
  overflow: hidden;
  position: relative;
  /* view-transition-name: rp-stage; falls wir später crossfaden zwischen Slides */
}

/* === Mini-Header === */
.rp__head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(8,9,7,0.92), rgba(8,9,7,0));
  z-index: 10;
}
.rp__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  text-decoration: none;
}
.rp__icon:hover { background: var(--gold-tint); color: var(--gold-bright); }
.rp__head-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; overflow: hidden;
}
.rp__head-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp__head-chapter {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp__head-actions { display: flex; gap: 6px; }

/* === Stage: 16:9 Slide === */
.rp__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.rp__slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rp__img,
.rp__poster,
.rp__video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Subtiler "Atmen"-Effekt beim Erscheinen — leichter Glow als Pulse */
  animation: rpFadeIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rpFadeIn {
  from { opacity: 0; transform: scale(0.985); filter: brightness(1.18); }
  to   { opacity: 1; transform: scale(1);     filter: brightness(1); }
}

/* Video-Slide: Poster + Play-Button — Video kommt beim Start als Overlay über Poster.
   !important nötig weil .rp__img/.rp__poster/.rp__video animation-fill-mode:both die
   opacity:1 vom rpFadeIn-end festhält. */
.rp__slide--video .rp__poster { transition: opacity 320ms ease, filter 320ms ease; }
.rp__slide--video .rp__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  animation: none;  /* keine rpFadeIn beim Video — sonst fight mit is-playing */
}
.rp__slide--video.is-playing .rp__poster {
  opacity: 0 !important;
  pointer-events: none;
}
.rp__slide--video.is-playing .rp__play {
  opacity: 0 !important;
  pointer-events: none;
}
.rp__slide--video.is-playing .rp__video {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.rp__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid var(--gold);
  color: var(--gold-bright);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 28px -4px rgba(0,0,0,0.7), 0 0 48px -12px var(--gold-soft);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.rp__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 36px -4px rgba(0,0,0,0.8), 0 0 64px -8px var(--gold);
}
.rp__play:active { transform: translate(-50%, -50%) scale(0.96); }
.rp__play svg { margin-left: 4px; } /* Play-Dreieck optisch zentrieren */
.rp__video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* === Footer-Nav === */
/* Nav-Cluster rechts unten (kompakt, milchglas) — verdeckt nur die rechte Ecke.
   Position absolut über stage; pointer-events nur auf den Buttons.  */
.rp__nav--corner {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(8,9,7,0.62);
  border: 1px solid rgba(212,166,74,0.20);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.7);
}
.rp__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(14,14,11,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  user-select: none;
  white-space: nowrap;
}
.rp__nav-btn:hover {
  background: var(--gold-tint);
  color: var(--gold-bright);
  border-color: var(--gold-soft);
}
.rp__nav-btn:active { transform: scale(0.96); }
/* Prev-Button als reines Icon (kompakter) */
.rp__nav-btn--prev { padding: 8px 10px; }
.rp__nav-btn--end { background: var(--gold); color: #1a1208; border-color: var(--gold-bright); }
.rp__nav-btn--end:hover { background: var(--gold-bright); color: #1a1208; }
.rp__nav-btn--rate {
  background: linear-gradient(135deg, rgba(212,166,74,0.32), rgba(212,166,74,0.14));
  color: var(--gold-bright);
  border-color: var(--gold);
}
.rp__nav-btn--rate:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: #1a1208;
}
.rp__nav-btn--disabled { opacity: 0.30; cursor: default; pointer-events: none; }

/* Position-Pille — schwebt zentriert oben, dezent */
.rp__pos {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(8,9,7,0.55);
  border: 1px solid rgba(212,166,74,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Mobile (max 540): Nav-Buttons enger, Labels kleiner */
@media (max-width: 540px) {
  .rp__nav--corner { right: 10px; bottom: 10px; padding: 4px; gap: 4px; }
  .rp__nav-btn { padding: 7px 11px; font-size: 12px; }
  .rp__nav-btn--prev { padding: 7px 9px; }
  .rp__nav-btn--rate span { display: none; }   /* nur Stern-Icon auf Mobile */
  .rp__pos { font-size: 10px; padding: 3px 10px; }
}

/* Replay-Kreis: nur sichtbar wenn .is-ended (Video durch + keine nächste Folie) */
.rp__replay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(13,14,12,0.78);
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  cursor: pointer;
  z-index: 12;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 40px -8px var(--gold-soft);
  transition: transform 160ms ease, background 160ms ease;
}
.rp__replay:hover { background: var(--gold-tint); transform: translate(-50%, -50%) scale(1.05); }
.rp__slide.is-ended .rp__replay { display: inline-flex; }
.rp__slide.is-ended .rp__video { opacity: 0.35; pointer-events: none; }

/* === SPA-Slideshow Overlay (clientseitiger Reise-Player) ============
   Wird durch [data-rp-spa] markiert. Hidden default, beim Klick auf
   "Reise öffnen" via JS toggle. Liegt position:fixed über allem,
   100dvh/100dvw — füllt Viewport. KEIN Page-Wechsel mehr während aktiv,
   damit Fullscreen-State sicher erhalten bleibt. */
.rp-spa {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #000;
  display: none;
  flex-direction: column;
  /* dvh reagiert auf Browser-Bar, falls FS nicht greift */
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;
}
.rp-spa.is-active {
  display: flex;
}
/* Auto-Rotate-Trick für die SPA-Slideshow (Mobile/Tablet portrait → landscape-Look).
   Das Overlay sitzt direkt unter <body> (raus aus .u-rot Transform-Context).
   Eigenen CSS-Rotate hier weil die App-Shell-Rotation nicht durchschlägt. */
@media (max-width: 1280px) and (orientation: portrait) {
  .rp-spa.is-active {
    /* Stage rotiert sich um 90°, Box auf getauschte Viewport-Maße */
    width: 100dvh;
    height: 100dvw;
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
  }
  html[data-angle="180"] .rp-spa.is-active {
    transform: rotate(-90deg) translateX(-100%);
  }
}
.rp-spa .rp__head {
  position: relative;
  z-index: 30;
  background: linear-gradient(180deg, rgba(8,9,7,0.82), rgba(8,9,7,0));
  flex-shrink: 0;
}
.rp-spa .rp__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.rp-spa .rp__nav--corner { position: absolute; right: 14px; bottom: 14px; z-index: 20; }

/* === Bewertungs-Popup (Reise) === */
.rp-rate-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.rp-rate-form__cats { display: flex; flex-direction: column; gap: 8px; }
.rp-rate-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(13,14,12,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-sm);
}
.rp-rate-cat__label {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.rp-rate-stars { display: inline-flex; gap: 2px; }
.rp-rate-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0; cursor: pointer;
  color: rgba(255,255,255,0.30);
  transition: color 120ms ease, transform 120ms ease;
  padding: 0;
}
.rp-rate-star:hover { transform: scale(1.1); color: var(--gold-soft); }
.rp-rate-star.is-active {
  color: var(--gold-bright);
}
.rp-rate-star.is-active svg { fill: currentColor; }
.rp-rate-form__comment { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); }
.rp-rate-form__opt { color: var(--text-mute); font-weight: 400; }
.rp-rate-form__comment textarea {
  resize: vertical;
  min-height: 48px;
  padding: 8px 10px;
  background: rgba(8,9,7,0.6);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.rp-rate-form__comment textarea:focus { outline: none; border-color: var(--gold-soft); }
.rp-rate-form__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-rate-form__actions .u-btn { flex: 1 1 auto; min-width: 0; }
.rp-rate-form__hint { font-size: 12px; color: #ff9090; margin: 0; }

.rp-rate-thanks { text-align: center; padding: 20px 12px 12px; }
.rp-rate-thanks svg { color: var(--gold-bright); margin: 0 auto 12px; display: block; }
.rp-rate-thanks h3 { font-family: var(--font-display); font-size: 18px; color: var(--gold-bright); margin: 0 0 4px; }
.rp-rate-thanks p { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.5; }

/* Mobile: kompakter */
@media (max-width: 540px) {
  .rp-rate-cat { padding: 7px 10px; gap: 8px; }
  .rp-rate-cat__label { font-size: 12px; }
  .rp-rate-star { width: 28px; height: 28px; }
  .rp-rate-star svg { width: 18px; height: 18px; }
}

/* === Drehen-Hinweis (nur Mobile portrait — Reise-Mode wünscht landscape) === */
.rp__rotate-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(5,6,5,0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 14px;
}
.rp__rotate-icon { color: var(--gold-bright); animation: rpRotateNudge 2.4s ease-in-out infinite; }
@keyframes rpRotateNudge {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}
.rp__rotate-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--gold-bright);
  margin: 0;
}
.rp__rotate-lead {
  font-size: 13px;
  color: var(--text-soft);
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}
@media (pointer: coarse) and (max-width: 1280px) and (orientation: portrait) {
  body.is-reise-mode .rp__rotate-hint { display: flex; }
}

/* CSS-Rotate-Trick übernimmt jetzt (YouTube-Style auto-landscape) — alte
   Override-Regel die das blockiert hat ist entfernt. */

/* === Slide-Übergang via View-Transitions API ===
   Subtiler Lichtimpuls + Crossfade. Keine Slide-Bewegung — wirkt billig auf Mobile. */
.rp__stage { view-transition-name: rp-stage; }
::view-transition-group(rp-stage) { animation: none !important; }
::view-transition-old(rp-stage) {
  animation: rpFadeOut 320ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(rp-stage) {
  animation: rpFadeInTransition 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rpFadeOut {
  from { opacity: 1; filter: brightness(1); }
  to   { opacity: 0; filter: brightness(1.5); }
}
@keyframes rpFadeInTransition {
  0%   { opacity: 0; filter: brightness(1.4); transform: scale(0.99); }
  60%  { opacity: 1; filter: brightness(1.08); }
  100% { opacity: 1; filter: brightness(1);    transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   Produktseite v2 — 3-Tab kompakt, no-scroll, Wisch
   ═══════════════════════════════════════════════════════════════ */
.pp-tabs--3 { justify-content: center; gap: 6px; }
.pp-tabs--3 .pp-tabs__btn { flex: 0 1 auto; padding: 7px 14px; }

/* Section füllt komplett, aber Inhalt darf bei Bedarf wachsen + scrollen.
   min-height statt height verhindert, dass Mobile-Cols Höhe 0 bekommen
   wenn Container kleiner als Inhalt ist. */
.pp-section { min-height: 100%; padding: 6px 0; gap: 10px; }

/* === Tab 1: Was ist es === */
.pp-tab-was { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }

.pp-was__row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  /* KEIN flex: 1 1 auto — sonst quetschen sich Cols zu null Höhe auf Mobile */
}
.pp-was__col {
  padding: 12px 14px;
  background: rgba(14,14,11,0.62);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  display: flex; flex-direction: column; gap: 8px;
}
.pp-was__col--delivery { background: rgba(60,80,55,0.55); border-color: rgba(108,214,108,0.25); }
.pp-was__head {
  margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold); font-weight: 700;
}
.pp-was__col--delivery .pp-was__head { color: #88e088; }
.pp-was__list, .pp-delivery__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; line-height: 1.4;
  scrollbar-width: none;
}
.pp-was__list::-webkit-scrollbar,
.pp-delivery__list::-webkit-scrollbar { display: none; }
.pp-was__list li {
  display: flex; flex-direction: column; gap: 0; padding: 3px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.pp-was__list li:last-child { border-bottom: 0; }
.pp-was__list li strong { color: var(--gold-bright); font-size: 11.5px; font-weight: 600; }
.pp-was__list li span { color: var(--text-soft); font-size: 11px; }
.pp-delivery__list li {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 0;
  color: var(--text);
}
.pp-delivery__list svg { color: #88e088; flex-shrink: 0; opacity: 0.95; }

@media (min-width: 720px) {
  .pp-tab-was { gap: 10px; }
  .pp-was__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pp-was__col { padding: 12px 14px; }
  .pp-was__list, .pp-delivery__list { font-size: 12.5px; }
}

/* === Tab 2: Studien & Wirkung — Bild-Boxen, scrollfreies Layout === */
.pp-tab-studien {
  display: flex; flex-direction: column; gap: 10px;
  /* min-height statt height: scrollfrei wenn Inhalt passt, scrollbar im pp-stage als Notbremse */
  min-height: 100%;
}
.pp-tab-studien .pp-section__head { gap: 2px; }
.pp-tab-studien .pp-section__title { font-size: 18px; }

/* Result-Tiles 2×2 mit BG-Bildern — fix Aspect-Ratio macht Layout vorhersehbar */
.pp-tile-grid--bg {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
  .pp-tile-grid--bg { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
.pp-result-tile--bg {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgba(212,166,74,0.30);
  isolation: isolate;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  min-height: 116px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.55);
}
.pp-result-tile--bg::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--pp-tile-bg);
  background-size: cover; background-position: center;
  filter: saturate(0.7) brightness(0.55);
}
.pp-result-tile--bg::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(155deg, rgba(8,9,7,0.30) 0%, rgba(8,9,7,0.78) 75%, rgba(8,9,7,0.92) 100%);
}
.pp-result-tile--bg:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px var(--gold-soft);
}
.pp-result-tile--bg .pp-pill--invitro {
  align-self: flex-start;
  font-size: 8.5px; padding: 2px 6px;
}
.pp-result-tile--bg .pp-result-tile__metric {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; line-height: 1.05;
  color: var(--gold-bright);
  margin: 2px 0 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.pp-result-tile--bg .pp-result-tile__title {
  margin: 0; font-size: 11.5px; line-height: 1.3;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-result-tile__hint {
  margin-top: auto; font-size: 10px; font-weight: 600; color: var(--gold);
  letter-spacing: 0.04em;
}
@media (min-width: 720px) {
  .pp-result-tile--bg { min-height: 140px; padding: 14px 16px; gap: 6px; }
  .pp-result-tile--bg .pp-result-tile__metric { font-size: 32px; }
  .pp-result-tile--bg .pp-result-tile__title { font-size: 13px; }
}

/* === Studien-Aktions-Schaltflächen (Schaltflächen-Pattern für List-Popup-Trigger)
   Genutzt im Studien-Tab als Replacement der alten Tile-Grids + horizontalen Scroll-Row.
   ====================================================================== */
.pp-studien-actions {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
@media (min-width: 720px) {
  .pp-studien-actions { gap: 10px; max-width: 560px; }
}
.pp-action-btn {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--frost-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
  box-shadow: var(--frost-shadow);
  transition: border-color var(--t-fast), background var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.pp-action-btn:hover {
  border-color: var(--gold);
  background: rgba(212,166,74,0.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px var(--gold-soft), var(--frost-shadow);
}
.pp-action-btn__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(212,166,74,0.18), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.30);
  color: var(--gold-bright);
  flex-shrink: 0;
}
.pp-action-btn__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-action-btn__title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.pp-action-btn__meta {
  font-size: 11.5px;
  color: var(--text-mute);
  line-height: 1.3;
}
.pp-action-btn__arrow {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform var(--t-fast), color var(--t-fast);
}
.pp-action-btn:hover .pp-action-btn__arrow {
  color: var(--gold-bright);
  transform: translateX(2px);
}

/* === Studien-Mini-Cards: horizontal scroll Mobile, Grid Desktop ============= */
.pp-studies-row { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pp-studies-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Section-Head als Zeile: Title links, Info-Icon rechts */
.pp-section__head--row {
  flex-direction: row !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.pp-section__head--row .pp-section__head-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}

/* "i"-Info-Icon (ehemals "Einordnen"-Pill) — kompakt, dezent rechts oben */
.pp-info-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(120,180,255,0.10);
  border: 1px solid rgba(120,180,255,0.30);
  color: rgba(180,210,255,0.95);
  cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  margin-top: 4px;
}
.pp-info-icon:hover {
  background: rgba(120,180,255,0.22);
  color: #e6efff;
  transform: scale(1.06);
}

/* Mobile: horizontaler Scroll-Streifen — verhindert Vertikal-Wachstum */
.pp-studies-scroll {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,166,74,0.3) transparent;
}
.pp-studies-scroll::-webkit-scrollbar { height: 4px; }
.pp-studies-scroll::-webkit-scrollbar-thumb { background: rgba(212,166,74,0.3); border-radius: 2px; }
@media (min-width: 720px) {
  .pp-studies-scroll {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0;
  }
}

.pp-study-mini {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(212,166,74,0.22);
  border-radius: var(--r-md);
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  min-height: 96px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.pp-study-mini--bg::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--pp-study-bg);
  background-size: cover; background-position: center;
  filter: saturate(0.6) brightness(0.45);
}
.pp-study-mini--bg::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,9,7,0.50) 0%, rgba(8,9,7,0.85) 100%);
}
.pp-study-mini:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px var(--gold-soft);
}
.pp-study-mini__head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pp-study-mini__date { font-size: 9.5px; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.pp-study-mini__title {
  margin: 2px 0 0; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.95); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.pp-study-mini__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--gold); font-weight: 600;
}

.pp-evidence--popup { padding: 0; background: transparent; border: 0; gap: 8px; }
.pp-evidence--popup .pp-evidence__col { padding: 10px 12px; }
@media (min-width: 720px) {
  .pp-evidence--popup { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pp-evidence--popup .pp-evidence__col { padding: 12px 14px; }
}

/* Evidence-Popup soll auf Desktop breiter sein damit 3 Spalten ohne Scroll passen.
   :has() funktioniert auf modernen Browsern — Fallback unten. */
.u-popup:has(.pp-evidence--popup) {
  width: min(94vw, 760px);
  padding: 22px 22px 18px;
}
@media (min-width: 1024px) {
  .u-popup:has(.pp-evidence--popup) { width: min(92vw, 820px); }
}
.u-popup:has(.pp-evidence--popup) .u-popup__title { font-size: 18px; margin-bottom: 6px; }
.u-popup:has(.pp-evidence--popup) .u-popup__divider { margin: 8px 0 12px; }
.u-popup:has(.pp-evidence--popup) .pp-memo {
  margin-top: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.45;
}
.u-popup:has(.pp-evidence--popup) .pp-evidence__col p { font-size: 12.5px; line-height: 1.45; }

/* === Tab 3: Pionier sein — exklusive Bild-Cards mit edler Anmutung
   Mobile: kompakt halten, Lead nur Tablet+. Cards Bild-zentriert. */
.pp-tab-pionier { display: flex; flex-direction: column; gap: 8px; min-height: 100%; justify-content: flex-start; }
.pp-tab-pionier .pp-section__head { gap: 2px; }
.pp-tab-pionier .pp-section__title { font-size: 16px; line-height: 1.18; }
.pp-tab-pionier .pp-section__eyebrow { font-size: 9.5px; letter-spacing: 0.16em; }
/* Lead Mobile + Tablet ausblenden — passt sonst nicht scrollfrei. Inhalt steckt in Cards + Popup. */
.pp-tab-pionier .pp-section__lead { display: none; }
@media (min-width: 720px) {
  .pp-tab-pionier .pp-section__title { font-size: 19px; }
}
@media (min-width: 1024px) {
  .pp-tab-pionier .pp-section__title { font-size: 21px; }
  .pp-tab-pionier .pp-section__lead {
    display: block; font-size: 13.5px; line-height: 1.5; max-width: 600px;
  }
}
.pp-section__head--center { text-align: center; align-items: center; }
.pp-section__lead--center { margin-left: auto; margin-right: auto; }

/* Pionier-Cards: Pionier-Bilder als atmosphärischer Hintergrund hinter dunkler Frost-Maske.
   Mobile 2×2 Grid → 4 Cards passen scrollfrei aufs Display.
   Desktop 4-spaltig mit großzügiger Höhe. */
.pp-pionier-grid {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;          /* Mobile DEFAULT 2 Spalten */
}
@media (min-width: 1024px) {
  .pp-pionier-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

.pp-pionier-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgba(212,166,74,0.32);
  display: flex; align-items: flex-end;
  isolation: isolate;
  /* Aspect-Ratio Mobile: breiter als hoch → Cards passen in 2×2 ohne Scroll */
  aspect-ratio: 1.25 / 1;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.6);
}
.pp-pionier-card::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--pp-pionier-bg);
  background-size: cover;
  background-position: center 22%;   /* Köpfe der Pioniere im oberen Drittel */
  filter: saturate(0.85) brightness(0.6) contrast(1.05);
  transition: transform 600ms ease;
}
.pp-pionier-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,9,7,0.10) 0%, rgba(8,9,7,0.55) 45%, rgba(8,9,7,0.92) 100%);
}
.pp-pionier-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -10px var(--gold-soft), 0 4px 18px -8px rgba(0,0,0,0.6);
}
.pp-pionier-card:hover::before { transform: scale(1.04); }
.pp-pionier-card__body { padding: 10px 12px; width: 100%; }
.pp-pionier-card__eyebrow {
  margin: 0 0 2px; font-size: 9px; font-weight: 700;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em;
}
.pp-pionier-card__title {
  margin: 0 0 3px; font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; color: var(--gold-bright); line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.pp-pionier-card__text {
  margin: 0; font-size: 10.5px; color: rgba(255,255,255,0.85); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 540px) and (max-width: 1023px) {
  /* Tablet: 2×2, Cards leicht breiter — passt scrollfrei in 1024×~720 stage */
  .pp-pionier-card { aspect-ratio: 1.4 / 1; }
  .pp-pionier-card__title { font-size: 15px; }
  .pp-pionier-card__text { font-size: 11.5px; -webkit-line-clamp: 3; }
}
@media (min-width: 1024px) {
  /* Desktop 4-spaltig — Cards Hochformat, Pionier-Portrait gut zur Geltung */
  .pp-pionier-card { aspect-ratio: 0.92 / 1; }
  .pp-pionier-card__body { padding: 14px 16px; }
  .pp-pionier-card__title { font-size: 16px; margin-bottom: 4px; }
  .pp-pionier-card__text { font-size: 12px; -webkit-line-clamp: 4; }
}
@media (min-width: 1440px) {
  .pp-pionier-card { aspect-ratio: 1 / 1; }
  .pp-pionier-card__title { font-size: 17px; }
  .pp-pionier-card__text { font-size: 12.5px; -webkit-line-clamp: 5; }
}

/* Result-Tile-Buttons (Studien-Tab) — anklickbare Boxen mit %-Werten */
.pp-result-tile--btn {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.pp-result-tile--btn:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px var(--gold-soft);
}
.pp-result-tile__hint {
  display: block; margin-top: 6px;
  font-size: 10.5px; color: var(--gold);
  font-weight: 600;
}
.pp-result-popup__metric {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 800;
  color: var(--gold-bright);
  line-height: 1; margin: 8px 0 4px;
}
.pp-result-popup__body {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--text);
}

.pp-pionier-teaser {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: rgba(14,14,11,0.62);
  border: 1px solid rgba(212,166,74,0.25);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.pp-pionier-teaser__row { display: flex; gap: 10px; align-items: flex-start; }
.pp-pionier-teaser__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(212,166,74,0.15);
  color: var(--gold-bright);
}
.pp-pionier-teaser__text h3 { margin: 0; font-family: var(--font-display); font-size: 13.5px; color: var(--gold-bright); font-weight: 700; }
.pp-pionier-teaser__text p { margin: 2px 0 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }

.pp-pionier-more {
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(14,14,11,0.62);
  border: 1px solid var(--gold-soft);
  color: var(--gold-bright);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  transition: background 160ms ease, border-color 160ms ease;
}
.pp-pionier-more:hover { background: var(--gold-tint); border-color: var(--gold); }

.pp-pionier-popup section { margin: 12px 0; }
.pp-pionier-popup section h4 { margin: 0 0 4px; font-size: 13px; color: var(--gold-bright); font-weight: 700; }
.pp-pionier-popup section p { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.55; }
.pp-pionier-popup__note { margin: 14px 0 0; padding: 10px 12px; background: rgba(212,166,74,0.08); border-left: 2px solid var(--gold); border-radius: 4px; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }

.pp-pionier__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  background: var(--frost-bg-strong, rgba(13,14,12,0.62));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
}
.pp-pionier__card--studie   { border-color: rgba(120,180,255,0.25); }
.pp-pionier__card--tagebuch { border-color: var(--gold-soft); }
.pp-pionier__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(212,166,74,0.12);
  color: var(--gold-bright);
  flex-shrink: 0;
}
.pp-pionier__card--studie .pp-pionier__icon { background: rgba(120,180,255,0.12); color: #aac8ff; }
.pp-pionier__title { margin: 0; color: var(--gold-bright); font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.pp-pionier__body { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.pp-pionier__body strong { color: var(--gold-bright); }
.pp-pionier__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: 12px; color: var(--gold);
  font-weight: 600; text-decoration: none;
}
.pp-pionier__link:hover { color: var(--gold-bright); }

.pp-pionier__actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pp-pionier__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(14,14,11,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 12px; font-weight: 500;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pp-pionier__btn:hover { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold-soft); }
.pp-pionier__btn--telegram {
  background: linear-gradient(135deg, #229ED9 0%, #1a7eb0 100%);
  color: #fff;
  border-color: #229ED9;
}
.pp-pionier__btn--telegram:hover { background: linear-gradient(135deg, #2db5ed 0%, #229ED9 100%); color: #fff; border-color: #2db5ed; }

.pp-pionier__note {
  margin: 0;
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 12px;
  background: rgba(212,166,74,0.06);
  border-left: 2px solid var(--gold-soft);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.pp-pionier__note svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* === Wisch-Hint (nur Mobile sichtbar) === */
.pp-swipe-hint {
  display: none;
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  justify-content: space-between;
  padding: 0 14px;
  pointer-events: none;
  font-size: 10px; color: var(--text-mute);
  opacity: 0.5;
}
.pp-swipe-hint__l { padding-right: 6px; }
.pp-swipe-hint__r { margin-left: auto; padding-left: 6px; }
@media (max-width: 719px) {
  .pp-swipe-hint { display: flex; }
}

/* === FAQ im Popup === */
.pp-faq--popup { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.pp-faq--popup .pp-faq__item { background: rgba(0,0,0,0.25); }