/* eLearneffect Webinar – Präsentationssystem
   Bühne 1920 × 1080, skaliert auf das Fenster. Zwei Richtungen: .theme-a (Glas & Licht), .theme-b (Seide & Gold). */

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --navy-0: #040812;
  --navy-1: #071226;
  --navy-2: #0b1628;
  --navy-3: #101c31;
  --gold: #d4af37;
  --gold-hi: #f2d675;
  --gold-soft: #e7c760;
  --gold-dark: #a87918;
  --text: #f5f1e8;
  --text-2: #c9c3b5;
  --meta: #9fa7b8;
  --on-gold: #07101f;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; cursor: default; }
body.hide-cursor { cursor: none; }

#viewport { position: fixed; inset: 0; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 50% 50%;
  background: var(--navy-0);
}

/* ---------------------------------------------------------------- Hintergrund */
#bg { position: absolute; inset: 0; z-index: 0; }
#bg canvas { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.bg-glow { position: absolute; pointer-events: none; }
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

/* ---------------------------------------------------------------- Rahmen */
#chrome { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wordmark { position: absolute; left: 96px; bottom: 56px; font-family: "Figtree"; font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: var(--text-2); }
.progress { position: absolute; right: 96px; bottom: 66px; display: flex; gap: 6px; }
.progress i { display: block; width: 14px; height: 3px; border-radius: 2px; background: rgba(245, 241, 232, 0.16); transition: background 0.6s var(--ease), width 0.6s var(--ease); }
.progress i.on { background: var(--gold); width: 40px; }

/* ---------------------------------------------------------------- Szenen */
.scene { position: absolute; inset: 0; z-index: 2; visibility: hidden; }
.scene.active { visibility: visible; }
.abs { position: absolute; }

.eyebrow {
  position: absolute; left: 96px; top: 72px;
  font-family: "Inter"; font-weight: 600; font-size: 20px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meta);
}
.eyebrow b { color: var(--gold); font-weight: 700; }
.tag {
  position: absolute; right: 96px; top: 62px; height: 44px; padding: 0 22px; border-radius: 22px;
  display: flex; align-items: center; font-family: "Inter"; font-weight: 600; font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase;
}
.headline { font-family: "Figtree"; font-weight: 650; letter-spacing: -0.025em; line-height: 1.04; color: var(--text); }
.label { font-family: "Inter"; font-weight: 600; font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta); }

.glass { position: absolute; border-radius: 32px; }
.gold-text {
  background: linear-gradient(176deg, #fff3c4 0%, #f2d675 22%, #d4af37 55%, #a87918 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Theme B – Seide & Gold (nah an elearneffect.com) ------------------------ */
.theme-b #stage { background: #03060e; }
.theme-b .glass {
  background: linear-gradient(160deg, rgba(30, 44, 70, 0.62) 0%, rgba(11, 22, 40, 0.5) 60%, rgba(7, 18, 38, 0.6) 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(242, 214, 117, 0.14);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}
.theme-b .glass.hot {
  background: linear-gradient(150deg, rgba(242, 214, 117, 0.26) 0%, rgba(212, 175, 55, 0.12) 50%, rgba(168, 121, 24, 0.14) 100%);
  border-color: rgba(242, 214, 117, 0.7);
  box-shadow: 0 30px 120px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 240, 190, 0.4);
}
.theme-b .tag { color: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.45); background: rgba(212, 175, 55, 0.06); }
.theme-b .headline { text-shadow: 0 0 40px rgba(0, 0, 0, 0.4); }
.theme-b .accent-line { background: linear-gradient(90deg, rgba(212, 175, 55, 0), #d4af37, #f2d675); }

/* Hinweis-Overlay (nur sichtbar mit Taste H) */
#help {
  position: fixed; left: 24px; bottom: 24px; z-index: 50; padding: 16px 20px; border-radius: 14px;
  background: rgba(10, 16, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-2);
  font: 500 13px/1.6 "Inter"; display: none;
}
#help.show { display: block; }
#help kbd { font: 600 12px "Inter"; color: var(--text); background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 4px; }

/* ---------------------------------------------------------------- Bausteine */
.center { text-align: center; }
.soft { color: var(--text-2); }
.gold-soft { color: var(--gold-soft); }
.meta { font-family: "Inter"; font-weight: 500; font-size: 24px; letter-spacing: 0.02em; color: var(--meta); }
.meta.small { font-size: 18px; }
.label.strong { color: var(--text-2); font-size: 22px; }

.pill {
  height: 48px; padding: 0 28px; border-radius: 24px; display: flex; align-items: center; white-space: nowrap;
  font-family: "Inter"; font-weight: 600; font-size: 17px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.45); background: rgba(212, 175, 55, 0.07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-num { text-align: center; font-family: "Figtree"; font-weight: 720; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.hero-num .n { font-size: 380px; font-variant-numeric: tabular-nums; }
.hero-num .u { font-size: 230px; margin-left: 24px; }
.hero-num:not(.shine) { filter: drop-shadow(0 0 70px rgba(212, 175, 55, 0.28)); }
.hero-num.shine span {
  color: transparent; background-image: linear-gradient(100deg, transparent 42%, rgba(255, 250, 228, 0.95) 50%, transparent 58%);
  background-size: 260% 100%; background-position: inherit; -webkit-background-clip: text; background-clip: text;
}
.big-num { font-family: "Figtree"; font-weight: 720; font-size: 150px; line-height: 1; letter-spacing: -0.04em; filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.3)); }

/* Zeitleiste */
.bar-outline { border: 1.5px solid rgba(201, 195, 181, 0.55); border-radius: 8px; }
.bar-track { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
.bar-fill { background: linear-gradient(90deg, #a87918, #d4af37 60%, #f2d675); border-radius: 8px; box-shadow: 0 0 24px rgba(242, 214, 117, 0.55); }
.seg { overflow: hidden; display: flex; align-items: center; white-space: nowrap; }
.seg .gold { position: absolute; inset: 0; background: linear-gradient(180deg, #f6dd86 0%, #d4af37 55%, #b8891f 100%); opacity: 0; }
.seg .txt { position: relative; padding-left: 26px; font-family: "Inter"; font-weight: 650; font-size: 21px; letter-spacing: 0.01em; }
.seg.a { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-2); }
.seg.a .txt { letter-spacing: 0.16em; text-transform: uppercase; font-size: 19px; }
.seg.b { border: 1.5px solid rgba(212, 175, 55, 0.6); color: var(--gold-soft); }
.seg.b .txt { letter-spacing: 0.16em; text-transform: uppercase; font-size: 19px; }
.theme-b .seg.gap { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(201, 195, 181, 0.18); color: var(--text-2); }
.axis-line { height: 1.5px; background: rgba(201, 195, 181, 0.35); }
.axis-tick { width: 2px; height: 18px; background: rgba(201, 195, 181, 0.35); }
.bracket-line { height: 2px; background: var(--text-2); }
.bracket-tick { width: 2px; height: 18px; background: var(--text-2); }
.bracket-label { font-family: "Inter"; font-weight: 600; font-size: 23px; color: var(--text); white-space: nowrap; }

/* System-Karten */
.card { border-radius: 30px; transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); }
.slider-track { height: 2px; background: rgba(245, 241, 232, 0.16); border-radius: 1px; }
.slider-fill { height: 2px; background: var(--gold); border-radius: 1px; }
.slider-dot { width: 14px; height: 14px; border-radius: 7px; background: var(--gold-hi); box-shadow: 0 0 16px rgba(242, 214, 117, 0.8); }
.card-n { font-family: "Inter"; font-weight: 600; font-size: 22px; letter-spacing: 0.12em; color: var(--meta); }
.card-title { font-family: "Figtree"; font-weight: 640; font-size: 46px; line-height: 1.06; letter-spacing: -0.02em; color: var(--text); }
.card-text { font-family: "Inter"; font-weight: 500; font-size: 24px; color: var(--text-2); white-space: nowrap; }
.card.hot .card-n, .card.hot .card-text { color: var(--text); }
.rail { stroke: rgba(201, 195, 181, 0.45); stroke-width: 1.6; }
.rail.dim { stroke: rgba(201, 195, 181, 0.28); }
.runner { width: 14px; height: 14px; border-radius: 7px; background: #fff7dc; box-shadow: 0 0 14px 4px rgba(242, 214, 117, 0.9), 0 0 60px 18px rgba(212, 175, 55, 0.35); }
.statement span { display: inline-block; margin: 0 18px; }
.result-chip { height: 80px; padding: 0 40px; border-radius: 40px !important; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.chip-num { font-family: "Figtree"; font-weight: 720; font-size: 44px; letter-spacing: -0.02em; }
.chip-txt { font-family: "Figtree"; font-weight: 500; font-size: 30px; color: var(--text); }

/* ---------------------------------------------------------------- Szenen 02–16 */
.subline { font-family: "Figtree"; font-weight: 500; font-size: 34px; color: var(--text-2); }
.accent-line { background: linear-gradient(90deg, rgba(212, 175, 55, 0), #d4af37, #f2d675); transform-origin: 50% 50%; }
.shimmer {
  background-image: linear-gradient(100deg, #e2bf55 0%, #e2bf55 40%, #fff6d2 50%, #e2bf55 60%, #e2bf55 100%);
  background-size: 300% 100%; background-position: 0% 0;
}
.glow-text { filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.25)); }

/* 02 Ziel & Ergebnis */
.kpi-value { font-family: "Figtree"; font-weight: 700; font-size: 170px; line-height: 1; letter-spacing: -0.04em; }
.kpi-hero { font-family: "Figtree"; font-weight: 720; font-size: 300px; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; filter: drop-shadow(0 0 60px rgba(212, 175, 55, 0.3)); font-variant-numeric: tabular-nums; }
.kpi-hero .plus { font-size: 210px; margin-right: 8px; }
.kpi-hero .unit { font-size: 190px; margin-left: 24px; }
.scale-track { height: 2px; background: rgba(245, 241, 232, 0.2); border-radius: 1px; }
.scale-mark { width: 2px; height: 70px; background: rgba(201, 195, 181, 0.7); }
.scale-num { font-family: "Inter"; font-weight: 600; font-size: 22px; color: var(--meta); }
.scale-beam { height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(168, 121, 24, 0.4), #d4af37 60%, #f2d675); box-shadow: 0 0 26px rgba(242, 214, 117, 0.55); }
.scale-head { width: 18px; height: 18px; border-radius: 9px; background: #fff3c4; box-shadow: 0 0 14px 4px rgba(242, 214, 117, 0.9), 0 0 50px 14px rgba(212, 175, 55, 0.35); }
.context { font-family: "Inter"; font-weight: 500; font-size: 26px; color: var(--text-2); }
.chip { height: 62px; padding: 0 28px; border-radius: 31px !important; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.chip-dot { width: 9px; height: 9px; border-radius: 5px; background: var(--gold-hi); box-shadow: 0 0 12px rgba(242, 214, 117, 0.8); }
.chip-label { font-family: "Inter"; font-weight: 500; font-size: 22px; color: var(--text); }
.chip-kicker { font-family: "Inter"; font-weight: 650; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }

/* 05 Kennzahl */
.eq { color: var(--text-2); }
.frac-bar { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(168, 121, 24, 0.5), #d4af37 30%, #f2d675 50%, #d4af37 70%, rgba(168, 121, 24, 0.5)); box-shadow: 0 0 24px rgba(242, 214, 117, 0.5); }
.info-card { border-radius: 28px; }
.card-big { font-family: "Figtree"; font-weight: 620; font-size: 44px; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }

/* 06 Definition */
.role-chip { height: 84px; border-radius: 42px !important; display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 600; font-size: 32px; color: var(--text); }
.conn { stroke: rgba(212, 175, 55, 0.55); stroke-width: 2; }
.center-panel { border-radius: 32px; }
.center-formula { font-family: "Figtree"; font-weight: 650; font-size: 36px; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }
.runner.small { width: 10px; height: 10px; }

/* 07 Workshop */
.progress-track { height: 2px; background: rgba(245, 241, 232, 0.14); border-radius: 1px; }
.progress-fill { height: 2px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.3), #f2d675); box-shadow: 0 0 16px rgba(242, 214, 117, 0.6); }
.step-card { border-radius: 30px; }
.step-num { font-family: "Figtree"; font-weight: 720; font-size: 116px; line-height: 1; letter-spacing: -0.04em; }
.step-num.small { font-size: 52px; }
.step-q { font-family: "Figtree"; font-weight: 600; font-size: 40px; line-height: 1.16; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }

/* 08 Situationen */
.sit-panel { border-radius: 30px; }
.meter-label { font-family: "Inter"; font-weight: 600; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); }
.meter-track { height: 30px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); }
.meter-bar { height: 30px; border-radius: 15px; }
.meter-bar.input { background: linear-gradient(90deg, rgba(201, 195, 181, 0.35), rgba(201, 195, 181, 0.75)); }
.meter-bar.output { background: linear-gradient(90deg, #a87918, #d4af37 60%, #f2d675); box-shadow: 0 0 20px rgba(242, 214, 117, 0.35); }
.meter-need { height: 30px; border-radius: 15px; border: 2px dashed rgba(231, 199, 96, 0.8); box-sizing: border-box; }
.meter-delta { font-family: "Inter"; font-weight: 700; font-size: 22px; color: var(--text-2); }
.meter-q { font-family: "Figtree"; font-weight: 700; font-size: 44px; line-height: 1; }
.sit-text { font-family: "Figtree"; font-weight: 600; font-size: 34px; line-height: 1.2; color: var(--text); white-space: nowrap; }

/* 09 Verhalten */
.chain-word { font-family: "Inter"; font-weight: 650; font-size: 30px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.chain-rail { height: 2px; background: rgba(245, 241, 232, 0.14); }
.chain-fill { height: 2px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), #f2d675); box-shadow: 0 0 14px rgba(242, 214, 117, 0.55); }

/* 10 Personal */
.area-panel { border-radius: 30px; }
.plant-frame { border: 2px solid rgba(212, 175, 55, 0.7); border-radius: 44px; box-shadow: 0 0 80px rgba(212, 175, 55, 0.18), inset 0 0 60px rgba(212, 175, 55, 0.06); }
.token { border-radius: 26px; border: 2px solid rgba(201, 195, 181, 0.45); background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--text-2); overflow: hidden; }
.token .fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(170deg, #f6dd86, #d4af37 55%, #b8891f); opacity: 0; }
.token svg { position: relative; }
.token.work { color: var(--on-gold); border-color: transparent; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2); }
.token.work .fill { opacity: 1; }
.token-slot { border-radius: 26px; border: 2px dashed rgba(201, 195, 181, 0.5); }
.area-border { width: 0; border-left: 2px dashed rgba(201, 195, 181, 0.45); }
.bridge { height: 3px; background: linear-gradient(90deg, #d4af37, #f2d675, #d4af37); box-shadow: 0 0 18px rgba(242, 214, 117, 0.7); }
.bridge-dot { width: 14px; height: 14px; border-radius: 7px; background: var(--gold-hi); box-shadow: 0 0 16px rgba(242, 214, 117, 0.9); }

/* 11 Dokumentation */
.table-panel { border-radius: 30px; }
.trow { display: flex; }
.tcell { font-family: "Figtree"; font-weight: 500; font-size: 32px; color: var(--text); height: 76px; line-height: 76px; border-bottom: 1px solid rgba(245, 241, 232, 0.1); white-space: nowrap; }
.tcell.strong { font-weight: 700; }
.thead .tcell { font-family: "Inter"; font-weight: 600; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); height: 52px; line-height: 52px; border-bottom: 1px solid rgba(212, 175, 55, 0.45); }
.stat-panel { border-radius: 30px; }
.stat-value { font-family: "Figtree"; font-weight: 720; font-size: 72px; line-height: 1; letter-spacing: -0.035em; filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.3)); }
.flow-node { width: 18px; height: 18px; border-radius: 9px; background: var(--navy-1); border: 2px solid var(--gold-hi); box-shadow: 0 0 16px rgba(242, 214, 117, 0.6); }
.flow-label { font-family: "Figtree"; font-weight: 550; font-size: 30px; color: var(--text); }

/* 12 Verschwendung */
.seg.work { border: 0; }
.seg.work .gold { opacity: 1; }
.seg.work .txt, .seg .txt.center { color: inherit; }
.seg.work { color: var(--on-gold); }
.seg .txt.center { padding-left: 0; text-align: center; }
.loss-mark { height: 3px; border-radius: 2px; background: rgba(245, 241, 232, 0.6); }
.freed { border: 2px dashed rgba(231, 199, 96, 0.85); border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.06); }
.freed-txt { font-family: "Inter"; font-weight: 650; font-size: 22px; line-height: 1.2; color: var(--gold-soft); text-align: center; }
.out-card { border-radius: 28px; }
.out-title { font-family: "Figtree"; font-weight: 600; font-size: 34px; line-height: 1.18; color: var(--text); white-space: nowrap; }
.mini { height: 22px; border-radius: 5px; }
.mini.work { background: linear-gradient(180deg, #f2d675, #c9a032); }
.mini.loss { background: rgba(201, 195, 181, 0.35); }
.mini.ghost { border: 1.5px dashed rgba(201, 195, 181, 0.55); box-sizing: border-box; }
.mini-end { width: 3px; height: 42px; border-radius: 2px; background: var(--gold-hi); box-shadow: 0 0 12px rgba(242, 214, 117, 0.8); }

/* 15 Fragen */
.q-line { height: 1px; background: rgba(245, 241, 232, 0.14); }
.q-ring { width: 100px; height: 100px; border-radius: 50px; border: 1.5px solid rgba(212, 175, 55, 0.7); display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 650; font-size: 34px; color: var(--gold-soft); box-shadow: 0 0 30px rgba(212, 175, 55, 0.15); }
.q-text { font-family: "Figtree"; font-weight: 600; font-size: 46px; line-height: 1.2; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }

/* 16 Abschluss */
.recap { display: flex; gap: 14px; }
.recap-pill { height: 46px; padding: 0 24px; border-radius: 23px; display: flex; align-items: center; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.05); font-family: "Inter"; font-weight: 600; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; }
.cta { height: 84px; padding: 0 44px; border-radius: 42px; display: flex; align-items: center; background: linear-gradient(170deg, #f6dd86, #d4af37 55%, #b8891f); color: var(--on-gold); font-family: "Figtree"; font-weight: 700; font-size: 34px; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 20px 60px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 245, 210, 0.7); }
.url { font-family: "Inter"; font-weight: 500; font-size: 30px; color: var(--text-2); }
.qr-card { border-radius: 32px; }
a.cta, a.url, a.qr-card { text-decoration: none; cursor: pointer; transition: filter 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
a.cta:hover { filter: brightness(1.08); box-shadow: 0 24px 80px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 245, 210, 0.7); }
a.url:hover { color: var(--gold-soft); }
a.qr-card:hover { border-color: rgba(242, 214, 117, 0.7); }
.qr-code { border-radius: 20px; overflow: hidden; }