/* ══════════════════════════════════════════
   SHARED DESIGN SYSTEM
   ══════════════════════════════════════════ */
@import url('../shared/shared.css');

html[data-language="en"][data-i18n-pending="true"] body {
  visibility: hidden;
}

/* ══════════════════════════════════════════
   SVG COLOR UTILITIES
   Presentational classes for funnel elements.
   Light-mode overrides below change these values.
   ══════════════════════════════════════════ */

/* Stroke colors */
.s-orange  { stroke: #ff5500; }
.s-neck    { stroke: var(--border-strong); }
.s-p1      { stroke: #c8ff3a; }
.s-p2      { stroke: #5ee0ff; }
.s-p3      { stroke: #ff2e7e; }
.s-gray    { stroke: #484848; }
.s-white   { stroke: white; }
.s-idea    { stroke: #a3a3a3; }

/* Fill colors */
.f-orange  { fill: #ff5500; }
.f-neck    { fill: rgba(255,255,255,0.04); }
.f-p1      { fill: #c8ff3a; }
.f-p2      { fill: #5ee0ff; }
.f-p3      { fill: #ff2e7e; }
.f-gray    { fill: #484848; }
.f-idea    { fill: #a3a3a3; }
.f-white-4 { fill: var(--glass-4); }
.f-orange-8  { fill: rgba(255,85,0,0.08); }
.f-orange-6  { fill: rgba(255,85,0,0.06); }


/* ══════════════════════════════════════════
   MISSION CLOCK LINK (header)
   ══════════════════════════════════════════ */
.mission-clock-link {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  transition: color var(--ease-default), filter var(--ease-default);
  text-decoration: none;
}
.mission-clock-link:hover {
  color: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255,85,0,0.4));
}

/* ══════════════════════════════════════════
   PERSONAL GREETING (premium feature, see app.js)
   Swaps the header subtitle to "Willkommen an Bord, {name}" when a ?name= /
   stored bwv-name exists. Scoped to the .bwv-has-name modifier — the default
   subtitle is untouched by these rules, so without a name the header is
   byte-for-byte today's behavior. nowrap + ellipsis caps the box at a fixed
   max-width regardless of name length (capped at 40 chars in app.js), so the
   header's height/layout never shifts — long names truncate instead of
   wrapping or pushing the wordmark on the right.
   ══════════════════════════════════════════ */
.bwv-header .subtitle.bwv-has-name {
  max-width: min(46vw, 380px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Guaranteed minimum breathing room before the Moderator link/wordmark —
     .bwv-header-left/.bwv-header-right (shared.css) have no gap of their own,
     they only look fine today because the default subtitle can wrap onto a
     second line on narrow screens. Forcing nowrap here removes that
     accidental safety margin, so we add an explicit one back. */
  margin-right: var(--space-2);
}
/* Narrower screens (see mobile.css breakpoint): less room overall, so cap the
   greeting tighter — it truncates with an ellipsis instead of crowding the
   Moderator link / wordmark on the right. */
@media (max-width: 768px) {
  .bwv-header .subtitle.bwv-has-name {
    max-width: 28vw;
  }
}

/* ══════════════════════════════════════════
   FUNNEL-SPECIFIC OVERRIDES
   ══════════════════════════════════════════ */
html, body {
  overflow: hidden;
}

/* ══════════════════════════════════════════
   LAYOUT - 100vh, no scroll
   ══════════════════════════════════════════ */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  padding: 12px 20px 10px;
  position: relative;
  overflow: hidden;
}

/* -- Star field -- */
.stars, .stars-medium, .stars-faint {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.stars {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 22%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 15% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 42%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 92% 48%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 8% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 45% 72%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 82%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 75% 68%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 88% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 5% 92%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 88%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 55% 95%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 78% 90%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 93% 85%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 3% 35%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 17% 62%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 42% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 87% 55%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 97% 42%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 28% 95%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 48% 58%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,0.4), transparent);
  animation: twinkle 8s ease-in-out infinite alternate;
}
.stars-medium {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 32%, rgba(180,200,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 38% 65%, rgba(180,200,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(200,180,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 58%, rgba(180,200,255,0.3), transparent),
    radial-gradient(2px 2px at 48% 85%, rgba(200,180,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 72% 35%, rgba(180,200,255,0.35), transparent),
    radial-gradient(2px 2px at 20% 60%, rgba(255,200,150,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 20%, rgba(200,180,255,0.4), transparent),
    radial-gradient(1.8px 1.8px at 6% 78%, rgba(180,200,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 52% 12%, rgba(200,180,255,0.35), transparent),
    radial-gradient(2px 2px at 95% 52%, rgba(180,200,255,0.3), transparent),
    radial-gradient(1.8px 1.8px at 28% 42%, rgba(255,200,150,0.25), transparent),
    radial-gradient(1.5px 1.5px at 65% 88%, rgba(200,180,255,0.35), transparent),
    radial-gradient(2.5px 2.5px at 15% 18%, rgba(255,220,180,0.25), transparent),
    radial-gradient(2px 2px at 78% 72%, rgba(180,200,255,0.3), transparent);
  animation: twinkle 12s ease-in-out 2s infinite alternate;
}
.stars-faint {
  background-image:
    radial-gradient(0.8px 0.8px at 5% 10%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 18% 52%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 33% 38%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 47% 15%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 62% 68%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 77% 82%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 88% 45%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 95% 70%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 42% 92%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 68% 5%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 14% 28%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.8px 0.8px at 56% 48%, rgba(255,255,255,0.14), transparent),
    radial-gradient(0.8px 0.8px at 83% 15%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 37% 75%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.8px 0.8px at 92% 62%, rgba(255,255,255,0.14), transparent),
    radial-gradient(0.8px 0.8px at 25% 5%, rgba(255,255,255,0.17), transparent),
    radial-gradient(0.8px 0.8px at 72% 42%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 8% 88%, rgba(255,255,255,0.18), transparent);
  animation: twinkle 15s ease-in-out 4s infinite alternate;
}
@keyframes twinkle {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* -- Nebula glow (subtle atmosphere) -- */
.nebula-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(255,85,0,0.04), transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(66,100,180,0.05), transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(80,40,100,0.03), transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(94,224,255,0.03), transparent 40%);
}

/* ══════════════════════════════════════════
   SHOOTING STAR — rare ambient flourish (~45–90s cadence, see app.js).
   A single fixed element, repositioned/re-angled per cycle via inline
   custom properties, animated with opacity + transform only. Off entirely
   under reduced-motion (CSS + JS both gate it); paused while the tab is
   hidden (JS toggles .is-paused).
   ══════════════════════════════════════════ */
.bwv-shooting-star {
  position: fixed;
  top: 0;
  left: 0;
  width: 130px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    var(--glass-30) 50%,
    rgba(255,255,255,0.6) 85%,
    rgba(255,255,255,0.9));
  transform: rotate(var(--bwv-star-rot, -24deg)) translateX(0);
  transform-origin: 0% 50%;
}
.bwv-shooting-star.is-active {
  animation: bwv-shooting-star-fly var(--bwv-star-dur, 1200ms) cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
.bwv-shooting-star.is-paused {
  animation-play-state: paused;
}
@keyframes bwv-shooting-star-fly {
  0%   { opacity: 0;    transform: rotate(var(--bwv-star-rot, -24deg)) translateX(0); }
  12%  { opacity: 0.75; }
  70%  { opacity: 0.3; }
  100% { opacity: 0;    transform: rotate(var(--bwv-star-rot, -24deg)) translateX(260px); }
}
/* Light mode: a white streak on a light sky is invisible, so darken it. */
[data-theme="light"] .bwv-shooting-star {
  background: linear-gradient(90deg,
    transparent,
    rgba(20,20,45,0.16) 50%,
    rgba(20,20,45,0.32) 85%,
    rgba(20,20,45,0.5));
}

/* ══════════════════════════════════════════
   PAGE-LOAD STAGGER (first visit this session only)
   Gate class `html.bwv-stagger` is added pre-paint by the inline script in
   index.html's <head> (mirrors theme-init.js's FOUC-avoidance pattern) and
   only when motion is allowed. No JS, a repeat visit this session, or
   reduced-motion => the class never appears => the page renders fully
   visible immediately (nothing here hides elements by default).
   Planets/ship fade in separately via planet/planet.js (staggerPlanetsIn) —
   their `transform` is already spoken for (fixed centering + float drift),
   so they get an opacity-only entrance instead of this transform+opacity one.
   ══════════════════════════════════════════ */
html.bwv-stagger .bwv-header {
  animation: bwv-stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.bwv-stagger .funnel-phase:not(.shine-overlay) {
  animation: bwv-stagger-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.bwv-stagger .funnel-phase[data-phase="base"] { animation-delay: 90ms; }
html.bwv-stagger .funnel-phase[data-phase="conv"] { animation-delay: 150ms; }
html.bwv-stagger .funnel-phase[data-phase="p1"]   { animation-delay: 210ms; }
html.bwv-stagger .funnel-phase[data-phase-group="p2"],
html.bwv-stagger .funnel-phase[data-phase="p2a"]  { animation-delay: 270ms; }
html.bwv-stagger .funnel-phase[data-phase="p2b"]  { animation-delay: 330ms; }
html.bwv-stagger .funnel-phase[data-phase="p3"]   { animation-delay: 390ms; }
@keyframes bwv-stagger-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════
   FUNNEL CONTAINER
   ══════════════════════════════════════════ */
.funnel-container {
  --milestone-x: var(--mx-base, 9%);
  --milestone-color: var(--orange);
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 0;
}
.funnel-container > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG click zones */
.svg-click-zone {
  cursor: pointer;
  fill: transparent;
  transition: fill var(--ease-fast), stroke var(--ease-fast);
}
.svg-click-zone:hover,
.svg-click-zone:focus-visible {
  fill: var(--glass-7);
}
/* SVG <rect> doesn't render `outline` reliably (esp. Safari) — keyboard focus
   on these role="button" zones needs a stroke ring, not the global outline. */
.svg-click-zone:focus-visible {
  outline: none;
  stroke: var(--orange);
  stroke-width: 2;
}
.svg-click-zone:active {
  fill: var(--glass-15);
  transition: fill 0.08s ease;
}

/* ══════════════════════════════════════════
   EARNED-CAPABILITY PATH
   ══════════════════════════════════════════ */
.milestone-journey {
  position: absolute;
  left: clamp(32px, 5vw, 72px);
  right: clamp(32px, 5vw, 72px);
  bottom: clamp(8px, 2.2vh, 22px);
  height: 104px;
  z-index: 2;
  pointer-events: none;
}
.milestone-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--p1), var(--p2), var(--p3));
  opacity: 0.14;
  transition: opacity var(--ease-default), box-shadow var(--ease-default);
}
.milestone-points {
  position: absolute;
  inset: 0;
}
.milestone-point {
  position: absolute;
  top: 39px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.22;
  transform: translateX(-50%);
  box-shadow: 0 0 12px currentColor;
  transition: opacity var(--ease-default);
}
.milestone-point-base { left: var(--mx-base, 9%); color: var(--orange); }
.milestone-point-conv { left: var(--mx-conv, 25%); color: var(--orange); }
.milestone-point-p1 { left: var(--mx-p1, 45%); color: var(--p1); }
.milestone-point-p2a { left: var(--mx-p2a, 70%); color: var(--p2); }
.milestone-point-p2b { left: var(--mx-p2b, 84%); color: var(--p2); }
.milestone-point-p3 { left: var(--mx-p3, 96%); color: var(--p3); }
.milestone-astronaut {
  --astro-suit: #d5dce8;
  --astro-helmet: #eef3f8;
  --astro-visor: #10131f;
  --astro-panel: var(--milestone-color);
  --astro-outline: color-mix(in srgb, var(--milestone-color), transparent 72%);
  --astro-glove: var(--astro-suit);
  --astro-boot: color-mix(in srgb, var(--astro-suit), #1b2434 34%);
  --astro-rank-color: #ffd36a;
  --astro-rank-opacity: 0;
  --astro-antenna-opacity: 0;
  --astro-pack-opacity: 0.15;
  --astro-pack-detail-opacity: 0.2;
  --astro-flag-opacity: 0;
  --astro-arm-left-rot: 14deg;
  --astro-arm-right-rot: -14deg;
  --astro-leg-left-rot: 3deg;
  --astro-leg-right-rot: -3deg;
  position: absolute;
  left: var(--milestone-x);
  top: -1px;
  width: 48px;
  height: 76px;
  opacity: 0;
  transform: translateX(-50%) scale(var(--astro-scale, 0.7));
  transform-origin: 50% 70px;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--milestone-color), transparent 48%));
  transition:
    left var(--ease-default),
    opacity var(--ease-default),
    transform var(--ease-default),
    filter var(--ease-default);
}
.astro-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.astro-suit-stop-a { stop-color: var(--astro-suit); }
.astro-suit-stop-b { stop-color: color-mix(in srgb, var(--astro-suit), #2c3446 30%); }
.astro-helmet-stop-a { stop-color: var(--astro-helmet); }
.astro-helmet-stop-b { stop-color: color-mix(in srgb, var(--astro-helmet), #4f6078 26%); }
.astro-flag-stop-a { stop-color: var(--astro-rank-color); }
.astro-flag-stop-b { stop-color: var(--p2); }
.astro-ground {
  fill: var(--milestone-color);
  opacity: 0.1;
}
.astro-float {
  animation: astro-bob 4.5s ease-in-out infinite;
}
@keyframes astro-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6px); }
}
.astro-torso,
.astro-limb {
  fill: url(#astroSuitGrad);
  stroke: var(--astro-outline);
}
.astro-collar { fill: color-mix(in srgb, var(--astro-suit), #1b2434 45%); }
.astro-dome {
  fill: url(#astroHelmetGrad);
  stroke: var(--astro-outline);
}
.astro-ear { fill: color-mix(in srgb, var(--astro-suit), #1b2434 40%); }
.astro-ear-dot { fill: var(--milestone-color); }
.astro-belt { fill: var(--milestone-color); }
.astro-chest {
  fill: color-mix(in srgb, var(--astro-panel), transparent 14%);
  stroke: rgba(255, 255, 255, 0.26);
}
.astro-chest-light-a { fill: #fff; opacity: 0.85; }
.astro-chest-light-b { fill: var(--astro-rank-color); opacity: 0.9; }
.astro-glove {
  fill: var(--astro-glove);
  stroke: var(--astro-outline);
}
.astro-boot { fill: var(--astro-boot); }
.astro-rank {
  fill: var(--astro-rank-color);
  opacity: var(--astro-rank-opacity);
  transition: opacity var(--ease-fast);
}
.astro-antenna {
  opacity: var(--astro-antenna-opacity);
  transition: opacity var(--ease-fast);
}
.astro-antenna rect { fill: var(--milestone-color); }
.astro-antenna-tip {
  fill: var(--milestone-color);
  filter: drop-shadow(0 0 4px var(--milestone-color));
}
.astro-pack {
  opacity: var(--astro-pack-opacity);
  transition: opacity var(--ease-fast);
}
.astro-pack-shell {
  fill: color-mix(in srgb, var(--milestone-color), transparent 76%);
  stroke: color-mix(in srgb, var(--milestone-color), transparent 40%);
}
.astro-pack-cell {
  fill: color-mix(in srgb, var(--milestone-color), #ffffff 35%);
  opacity: var(--astro-pack-detail-opacity);
}
.astro-visor {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--milestone-color), transparent 62%));
}
.astro-visor-glass {
  fill: var(--astro-visor);
  stroke: color-mix(in srgb, var(--milestone-color), transparent 46%);
}
.astro-arm,
.astro-leg {
  transform-box: view-box;
  transition: transform var(--ease-fast);
}
.astro-arm-left {
  transform-origin: 13.3px 30.5px;
  transform: rotate(var(--astro-arm-left-rot));
}
.astro-arm-right {
  transform-origin: 34.7px 30.5px;
  transform: rotate(var(--astro-arm-right-rot));
}
.astro-leg-left {
  transform-origin: 19px 51px;
  transform: rotate(var(--astro-leg-left-rot));
}
.astro-leg-right {
  transform-origin: 29px 51px;
  transform: rotate(var(--astro-leg-right-rot));
}
.astro-flag {
  opacity: var(--astro-flag-opacity);
  transition: opacity var(--ease-fast);
}
.astro-flag-pole { fill: var(--text-secondary); }
.astro-flag-cloth { fill: var(--milestone-color); }
.milestone-copy {
  /* caption beside the astronaut — add-on info, kept quiet on purpose */
  position: absolute;
  left: var(--milestone-x);
  top: 16px;
  width: max-content;
  max-width: 230px;
  text-align: left;
  opacity: 0;
  transform: translateX(var(--copy-side, 30px));
  transition: left var(--ease-default), opacity var(--ease-in), transform var(--ease-in);
}
.milestone-kicker {
  color: var(--milestone-color);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.milestone-title {
  margin-top: 3px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
}
.milestone-subtitle {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.35;
}
.funnel-container[data-milestone-phase] .milestone-line {
  opacity: 0.34;
  box-shadow: 0 0 18px color-mix(in srgb, var(--milestone-color), transparent 78%);
}
.funnel-container[data-milestone-phase] .milestone-point {
  opacity: 0.5;
}
.funnel-container[data-milestone-phase] .milestone-astronaut,
.funnel-container[data-milestone-phase] .milestone-copy {
  opacity: 1;
  pointer-events: auto;
  transition: left var(--ease-default), opacity var(--ease-out), transform var(--ease-out);
}
.funnel-container[data-milestone-phase="base"] {
  --milestone-x: var(--mx-base, 9%);
  --milestone-color: var(--orange);
  --astro-scale: 0.62;
}
.funnel-container[data-milestone-phase="base"] .milestone-astronaut {
  --astro-suit: #d5dce8;
  --astro-pack-opacity: 0.12;
  --astro-arm-left-rot: 8deg;
  --astro-arm-right-rot: -8deg;
}
.funnel-container[data-milestone-phase="conv"] {
  --milestone-x: var(--mx-conv, 25%);
  --milestone-color: var(--orange);
  --astro-scale: 0.68;
}
.funnel-container[data-milestone-phase="conv"] .milestone-astronaut {
  --astro-suit: #e7e0d6;
  --astro-helmet: #fff2df;
  --astro-pack-opacity: 0.16;
  --astro-arm-left-rot: 10deg;
  --astro-arm-right-rot: -14deg;
}
.funnel-container[data-milestone-phase="p1"] {
  --milestone-x: var(--mx-p1, 45%);
  --milestone-color: var(--p1);
  --astro-scale: 0.76;
}
.funnel-container[data-milestone-phase="p1"] .milestone-astronaut {
  --astro-suit: #f2eee1;
  --astro-helmet: #fff8e8;
  --astro-visor: #1d3a58;
  --astro-panel: var(--orange);
  --astro-glove: #f8f1df;
  --astro-boot: #c4b99c;
  --astro-pack-opacity: 0.18;
  --astro-pack-detail-opacity: 0.08;
  --astro-arm-left-rot: 112deg;
  --astro-arm-right-rot: -112deg;
  --astro-leg-left-rot: 5deg;
  --astro-leg-right-rot: -5deg;
}
.funnel-container[data-milestone-phase="p2a"] {
  --milestone-x: var(--mx-p2a, 70%);
  --milestone-color: var(--p2);
  --astro-scale: 0.84;
}
.funnel-container[data-milestone-phase="p2a"] .milestone-astronaut {
  --astro-suit: #c8edf7;
  --astro-helmet: #e6fbff;
  --astro-visor: #0c2940;
  --astro-panel: #44d8ff;
  --astro-glove: #eefbff;
  --astro-boot: #5ca6ba;
  --astro-antenna-opacity: 1;
  --astro-pack-opacity: 0.48;
  --astro-pack-detail-opacity: 0.55;
  --astro-flag-opacity: 0;
  --astro-arm-left-rot: 12deg;
  --astro-arm-right-rot: -130deg;
  --astro-leg-left-rot: 8deg;
  --astro-leg-right-rot: -8deg;
}
.funnel-container[data-milestone-phase="p2b"] {
  --milestone-x: var(--mx-p2b, 84%);
  --milestone-color: var(--p2);
  --astro-scale: 0.92;
  --copy-side: calc(-100% - 30px);
}
.funnel-container[data-milestone-phase="p2b"] .milestone-copy {
  text-align: right;
}
.funnel-container[data-milestone-phase="p2b"] .milestone-astronaut {
  --astro-suit: #e8ecff;
  --astro-helmet: #f8f6ff;
  --astro-visor: #182642;
  --astro-panel: #ffd36a;
  --astro-glove: #fbf6d7;
  --astro-boot: #56618b;
  --astro-rank-opacity: 1;
  --astro-pack-opacity: 0.62;
  --astro-pack-detail-opacity: 0.72;
  --astro-flag-opacity: 1;
  --astro-arm-left-rot: 18deg;
  --astro-arm-right-rot: -55deg;
  --astro-leg-left-rot: 4deg;
  --astro-leg-right-rot: -4deg;
}
.funnel-container[data-milestone-phase="p2b"] .astro-dome {
  stroke: color-mix(in srgb, var(--astro-rank-color), transparent 28%);
}
.funnel-container[data-milestone-phase="p2b"] .astro-flag-cloth {
  fill: url(#astroFlagGrad);
}
.funnel-container[data-milestone-phase="p3"] {
  --milestone-x: var(--mx-p3, 96%);
  --milestone-color: var(--p3);
  --astro-scale: 0.95;
  --copy-side: calc(-100% - 30px);
}
.funnel-container[data-milestone-phase="p3"] .milestone-copy {
  text-align: right;
}
.funnel-container[data-milestone-phase="p3"] .milestone-astronaut {
  --astro-suit: #11131c;
  --astro-helmet: #0b0d14;
  --astro-visor: #0b0d14;
  --astro-panel: var(--p3);
  --astro-outline: color-mix(in srgb, var(--p3), transparent 18%);
  --astro-glove: #151722;
  --astro-boot: #090a0f;
  --astro-rank-opacity: 1;
  --astro-antenna-opacity: 1;
  --astro-pack-opacity: 0.78;
  --astro-pack-detail-opacity: 0.86;
  --astro-arm-left-rot: 42deg;
  --astro-arm-right-rot: -42deg;
  --astro-leg-left-rot: 12deg;
  --astro-leg-right-rot: -12deg;
}
.funnel-container[data-milestone-phase="p3"] .astro-visor-glass {
  fill: url(#astroVisorNeon);
}
.funnel-container[data-milestone-phase="p3"] .astro-dome,
.funnel-container[data-milestone-phase="p3"] .astro-torso {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--p3), transparent 54%));
}
.funnel-container[data-milestone-phase="p3"] .astro-rank rect:first-child { fill: var(--p3); }
.funnel-container[data-milestone-phase="p3"] .astro-rank rect:last-child { fill: #0df2ff; }

/* ══════════════════════════════════════════
   DIMMING - inactive phases
   ══════════════════════════════════════════ */
.funnel-container.has-active .funnel-phase {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.funnel-container.has-active .funnel-phase.phase-active {
  opacity: 1;
}

/* ══════════════════════════════════════════
   SHINE - animated border on HOVER (not click)
   ══════════════════════════════════════════ */
@keyframes shineForward {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: -200; }
}
.shine-overlay {
  fill: none;
  pointer-events: none;
  stroke-dasharray: 30 170;
  stroke-dashoffset: 200;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Hover state (JS-toggled via .phase-hover) */
.funnel-phase.shine-overlay.phase-hover {
  opacity: 1;
  animation: shineForward var(--shine-dur, 2.5s) ease-in-out infinite;
}
.funnel-phase.shine-overlay.shine-b.phase-hover {
  animation-delay: 0s;
}

/* Per-phase shine durations — normalized to ~80px/s visual speed */
.shine-overlay[data-section="vorarbeit"] { --shine-dur: 2.4s; }
.shine-overlay[data-section="imkurs"]    { --shine-dur: 3.5s; }

.shine-overlay[data-phase="base"]        { --shine-dur: 2.4s; }
.shine-overlay[data-phase="p1"]          { --shine-dur: 2.1s; }
.shine-overlay[data-phase="p2a"]         { --shine-dur: 1.9s; }
.shine-overlay[data-phase="p2b"]         { --shine-dur: 2.5s; }
.shine-overlay[data-phase="p3"]          { --shine-dur: 6s; }

/* ══════════════════════════════════════════
   FLOATING IDEAS - asteroid drift
   ══════════════════════════════════════════ */
@keyframes drift1 { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(4px,-6px) rotate(-5deg); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) rotate(5deg); } 50% { transform: translate(-5px,4px) rotate(8deg); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) rotate(-3deg); } 50% { transform: translate(3px,5px) rotate(0deg); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0) rotate(7deg); } 50% { transform: translate(-4px,-3px) rotate(4deg); } }
@keyframes drift5 { 0%,100% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(5px,3px) rotate(-2deg); } }
@keyframes drift6 { 0%,100% { transform: translate(0,0) rotate(3deg); } 50% { transform: translate(-3px,-5px) rotate(6deg); } }
@keyframes drift7 { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(4px,4px) rotate(-3deg); } }
.idea-drift-1 { animation: drift1 7s ease-in-out infinite; }
.idea-drift-2 { animation: drift2 9s ease-in-out infinite; }
.idea-drift-3 { animation: drift3 8s ease-in-out infinite; }
.idea-drift-4 { animation: drift4 10s ease-in-out infinite; }
.idea-drift-5 { animation: drift5 7.5s ease-in-out infinite; }
.idea-drift-6 { animation: drift6 8.5s ease-in-out infinite; }
.idea-drift-7 { animation: drift7 9.5s ease-in-out infinite; }

/* ══════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════ */
[data-theme="light"] .stars,
[data-theme="light"] .stars-medium,
[data-theme="light"] .stars-faint,
[data-theme="light"] .nebula-glow {
  display: none;
}

/* Funnel click zones: stronger hover on light bg */
[data-theme="light"] .svg-click-zone:hover,
[data-theme="light"] .svg-click-zone:focus-visible {
  fill: rgba(0, 0, 0, 0.08);
}

/* ── Light-mode SVG color overrides ── */
[data-theme="light"] .s-orange { stroke: var(--orange); }   /* war #e65100 (Material Orange 900) — kein Markenwert */
[data-theme="light"] .s-neck   { stroke: var(--border-strong); }
[data-theme="light"] .s-p1     { stroke: #558b2f; }
[data-theme="light"] .s-p2     { stroke: #1565c0; }
[data-theme="light"] .s-p3     { stroke: #7b1fa2; }
[data-theme="light"] .s-gray   { stroke: #1a1a2e; }
[data-theme="light"] .s-white  { stroke: rgba(0,0,0,0.3); }
[data-theme="light"] .s-idea   { stroke: #5a5a7a; }

[data-theme="light"] .f-orange { fill: var(--orange); }     /* war #e65100 — s.o. */
[data-theme="light"] .f-neck   { fill: rgba(0,0,0,0.04); }
[data-theme="light"] .f-p1     { fill: #558b2f; }
[data-theme="light"] .f-p2     { fill: #1565c0; }
[data-theme="light"] .f-p3     { fill: #7b1fa2; }
[data-theme="light"] .f-gray   { fill: #2d2d44; }
[data-theme="light"] .f-idea   { fill: #3d3d5c; }
[data-theme="light"] .f-white-4  { fill: rgba(0,0,0,0.04); }
[data-theme="light"] .f-orange-8,
[data-theme="light"] .f-orange-6 { fill: rgba(230,81,0,0.10); }

[data-theme="light"] .milestone-line {
  opacity: 0.18;
}
[data-theme="light"] .funnel-container[data-milestone-phase] .milestone-line {
  opacity: 0.42;
}
[data-theme="light"] .astro-visor {
  background: #1a1a2e;
}
[data-theme="light"] .astro-flag {
  background: var(--text-muted);
}

/* Arrow marker (inside defs — can't use class) */
[data-theme="light"] #arrow polygon {
  fill: #1a1a2e;
  fill-opacity: 0.7;
}

/* Phase 3 grid pattern (inside defs — can't use class) */
[data-theme="light"] #dim-grid line {
  stroke: #7b1fa2;
  stroke-opacity: 0.12;
}

/* Kbd legend elements */
[data-theme="light"] .bwv-legend kbd {
  border-color: #5a5a7a !important;
  color: #3d3d5c !important;
}

/* Legend mini-SVG strokes */
[data-theme="light"] .bwv-legend svg line,
[data-theme="light"] .bwv-legend svg ellipse {
  opacity: 0.7;
}

/* ══════════════════════════════════════════
   REDUCED MOTION — accessibility
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .stars, .stars-medium, .stars-faint {
    animation: none;
  }
  .idea-drift-1, .idea-drift-2, .idea-drift-3,
  .idea-drift-4, .idea-drift-5, .idea-drift-6,
  .idea-drift-7 {
    animation: none;
  }
  /* Belt-and-suspenders: app.js already refuses to schedule the shooting
     star under reduced-motion, and index.html's inline gate script already
     refuses to add html.bwv-stagger — these rules just make sure neither
     effect can ever render/animate even if that JS changes later. */
  .bwv-shooting-star {
    display: none;
  }
  html.bwv-stagger .bwv-header,
  html.bwv-stagger .funnel-phase {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .shine-overlay {
    animation: none !important;
  }
  .detail-panel {
    transition-duration: 0.01s;
  }
  .milestone-line,
  .milestone-point,
  .milestone-astronaut,
  .milestone-copy,
  .milestone-subtitle,
  .astro-arm,
  .astro-leg,
  .astro-flag,
  .astro-pack,
  .astro-rank,
  .astro-antenna {
    transition: none;
  }
  .astro-float {
    animation: none;
  }
}

@media print {
  body { background: var(--bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}