/* ============ Intro + Journey design system ============
   Near-black, thin technical grid, one acid signal colour, spaced uppercase
   display type with a decode animation, mono data captions. Editorial hairline
   layouts instead of cards. Scoped under .intro so the workspace keeps its own
   light theme. */

.intro {
  --i-bg: #f4f4ed;
  --i-bg-2: #ebebe2;
  --i-panel: rgba(17, 18, 20, 0.035);
  --i-line: rgba(17, 18, 20, 0.12);
  --i-line-strong: rgba(17, 18, 20, 0.45);
  --i-text: #111214;
  --i-dim: #6d6f6a;
  --i-accent: #c8ff00;
  --i-accent-2: #e4ff7a;
  --i-hot: #c8ff00;
  --i-risk: #e0261a;
  --i-chance: #1d8a4e;
  --i-skeptic: #e0261a;
  --i-cfo: #1d8a4e;
  --i-market: #1c5fd8;
  --i-forecaster: #7a3fe0;
  --i-macro: #0d7c86;
  --i-font: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --i-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  position: relative;
  flex: 0 0 auto;            /* #app is a 100vh flex column */
  min-height: 100vh;
  background: var(--i-bg);
  color: var(--i-text);
  font-family: var(--i-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body:has(.intro) { overflow-x: hidden; background: #f4f4ed; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.intro *, .intro *::before, .intro *::after { box-sizing: border-box; }
.intro ::selection { background: var(--i-accent); color: #111214; }
.intro .mono { font-family: var(--i-mono); }
.intro .signal { color: var(--i-text); background: var(--i-accent); box-shadow: 0 0 0 0.04em var(--i-accent); }

/* Background: contour lines (drawn once on a canvas) + grain */
.intro-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.intro-grid canvas { width: 100%; height: 100%; display: block; }
.intro-vignette { display: none; }
.intro-grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Preloader gate */
.intro-loader {
  position: fixed; inset: 0; z-index: 40; background: var(--i-bg); color: var(--i-text);
  display: grid; grid-template-rows: auto 1fr auto; padding: 28px 32px;
}
.intro-loader .lw { font-weight: 600; font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; }
.intro-loader .lmid { align-self: center; justify-self: center; text-align: center; }
.intro-loader .lmid .decode { font-size: clamp(22px, 3vw, 40px); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; }
.intro-loader .lbot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.intro-loader .ln { font-family: var(--i-mono); font-size: clamp(60px, 12vw, 180px); line-height: 0.85; letter-spacing: -0.06em; font-weight: 500; font-variant-numeric: tabular-nums; display: flex; }
.intro-loader .lbar { flex: 1; height: 2px; background: var(--i-line); margin-bottom: 14px; }
.intro-loader .lbar i { display: block; height: 100%; width: 0; background: var(--i-text); }

@property --lnum { syntax: "<integer>"; initial-value: 0; inherits: false; }
.intro-loader .ln em, .intro-loader .ln b { font-style: normal; font-weight: inherit; }
.intro-loader .ln b { counter-reset: ln var(--lnum); }
.intro-loader .ln b::after { content: counter(ln, decimal-leading-zero); }
.intro-loader.run .ln b { animation: l-num 2.6s cubic-bezier(.16, .72, .24, 1) forwards; }
.intro-loader.run .lbar i { animation: l-bar 2.6s cubic-bezier(.16, .72, .24, 1) forwards; }
.intro-loader.fin .ln b { animation: l-num-fin .42s linear forwards; }
.intro-loader.fin .lbar i { animation: l-bar-fin .42s linear forwards; }
.intro-loader.fin .ln em { opacity: 0; transition: opacity .16s .26s; }
@keyframes l-num { from { --lnum: 0 } to { --lnum: 96 } }
@keyframes l-num-fin { from { --lnum: 96 } to { --lnum: 100 } }
@keyframes l-bar { from { width: 0 } to { width: 96% } }
@keyframes l-bar-fin { from { width: 96% } to { width: 100% } }
/* Browsers without registered custom properties keep the old JS counter. */
.intro-loader .ln span.js { display: none; }
.intro-loader.nocss .ln em, .intro-loader.nocss .ln b { display: none; }
.intro-loader.nocss .ln span.js { display: block; }

/* Top bar */
.intro-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; }
.intro-brand { font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; font-size: 14px; color: var(--i-text); text-decoration: none; display: flex; gap: 12px; align-items: center; }
.intro-brand i { width: 8px; height: 8px; background: var(--i-accent); display: inline-block; }
.intro-top-actions { display: flex; gap: 6px; align-items: center; }
.intro-link { color: var(--i-dim); text-decoration: none; font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 14px; }
.intro-link:hover { color: var(--i-text); }

/* Buttons: the Orano-style bar */
.i-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-width: 220px; padding: 16px 20px; font-family: var(--i-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1;
  color: #111214; background: var(--i-accent); position: relative; isolation: isolate; overflow: hidden;
  transition: color .25s ease, transform .25s ease;
}
.i-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--i-text); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.76, 0, .24, 1); }
.i-btn:hover { color: var(--i-bg); }
.i-btn:hover::before { transform: scaleX(1); }
.i-btn .arr { display: inline-block; transition: transform .35s cubic-bezier(.76, 0, .24, 1); }
.i-btn:hover .arr { transform: translateX(6px); }
.i-btn.ghost { color: var(--i-text); background: transparent; box-shadow: inset 0 0 0 1px var(--i-line-strong); }
.i-btn.ghost::before { background: var(--i-accent); }
.i-btn.ghost:hover { color: #111214; }
.i-btn.big { padding: 22px 26px; font-size: 13px; min-width: 300px; }
.i-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.i-btn:disabled::before { display: none; }
.i-btn small { opacity: .7; letter-spacing: 0.1em; }

/* Progress rail */
.intro-rail { position: fixed; left: 32px; bottom: 30px; z-index: 10; display: flex; gap: 14px; align-items: center; }
.intro-rail button { all: unset; cursor: pointer; font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); display: flex; align-items: center; gap: 8px; }
.intro-rail button i { width: 14px; height: 1px; background: var(--i-line-strong); transition: width .3s, background .3s; }
.intro-rail button.active { color: var(--i-text); }
.intro-rail button.active i { width: 36px; background: var(--i-accent); }
.intro-rail button span { display: none; }
.intro-rail button.active span { display: inline; }

/* Scenes */
.scene { position: relative; z-index: 2; min-height: 100vh; padding: 14vh 5vw 12vh; max-width: 1560px; margin: 0 auto; }
.scene-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: start; }
.c-1-5 { grid-column: 1 / 6; } .c-1-6 { grid-column: 1 / 7; } .c-1-7 { grid-column: 1 / 8; } .c-1-13 { grid-column: 1 / -1; }
.c-7-13 { grid-column: 7 / -1; } .c-8-13 { grid-column: 8 / -1; } .c-6-13 { grid-column: 6 / -1; } .c-2-12 { grid-column: 2 / 12; }
.index { font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--i-dim); display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.index::before { content: ""; width: 34px; height: 1px; background: var(--i-accent); }
.index b { color: var(--i-text); font-weight: 700; }
.hairline { border-top: 1px solid var(--i-line-strong); }
.h-xl { font-size: clamp(36px, 6.6vw, 116px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700; margin: 0; }
.h-l { font-size: clamp(30px, 4.4vw, 74px); line-height: 1.0; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700; margin: 0 0 28px; }
.h-m { font-size: clamp(20px, 2vw, 30px); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin: 0 0 16px; }
.decode { font-variant-ligatures: none; }
.decode .wd { display: inline-block; white-space: nowrap; }
.decode .ch { display: inline-block; min-width: 0.5em; text-align: center; }
.decode .ch.rnd { color: var(--i-dim); }
.lead { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--i-dim); max-width: 34em; margin: 0 0 20px; font-weight: 400; }
.lead strong { color: var(--i-text); font-weight: 600; }
.mask { display: block; overflow: hidden; }
.mask > .ln { display: block; transform: translateY(112%); will-change: transform; }
.fade { opacity: 0; }

/* Hero */
.hero { min-height: 100vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; padding-top: 18vh; padding-bottom: 9vh; }
.hero-copy { grid-column: 1 / 7; position: relative; z-index: 2; }
/* the map carries the story, so the copy stays narrow and sits on a soft paper wash */
.hero-copy::before { content: ""; position: absolute; inset: -40px -80px -40px -6vw; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(244,244,237,0.9) 0%, rgba(244,244,237,0.76) 46%, rgba(244,244,237,0) 92%); }
.hero h1 { font-size: clamp(30px, 4.6vw, 82px); }
/* breaks out of the 1560px scene container so the map runs edge to edge on wide screens */
.hero-map { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 1; pointer-events: auto; cursor: none; }
.hero-copy { pointer-events: none; }
.hero-copy button, .hero-copy a { pointer-events: auto; }
.hero-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero h1 { margin-bottom: 26px; }
.hero h1 .scribble { position: relative; display: inline-block; white-space: nowrap; }
.hero h1 .scribble svg { position: absolute; left: -4%; top: -14%; width: 108%; height: 132%; overflow: visible; pointer-events: none; }
.hero h1 .scribble path { fill: none; stroke: var(--i-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.hero-meta { display: flex; gap: 40px; flex-wrap: wrap; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); margin-top: 34px; }
.hero-meta b { display: block; color: var(--i-text); font-weight: 500; margin-bottom: 4px; }
.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-legend { grid-column: 9 / -1; justify-self: end; align-self: end; z-index: 2; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); display: grid; gap: 8px; text-align: right; }
.hero-legend i { display: inline-block; width: 8px; height: 8px; background: var(--i-accent); margin-left: 10px; vertical-align: middle; }
.hero-legend i.ink { background: var(--i-line-strong); }
.scroll-hint { position: absolute; right: 5vw; bottom: 30px; z-index: 2; font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--i-dim); display: flex; align-items: center; gap: 10px; }
.scroll-hint i { width: 44px; height: 1px; background: var(--i-line); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: var(--i-accent); transform: translateX(-100%); animation: intro-slide 1.8s cubic-bezier(.76,0,.24,1) infinite; }

/* Marquee */
.ticker { position: relative; z-index: 2; border-top: 1px solid var(--i-line-strong); border-bottom: 1px solid var(--i-line-strong); background: var(--i-bg); overflow: hidden; white-space: nowrap; padding: 12px 0; font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-dim); }
.ticker div { display: inline-flex; animation: intro-ticker 46s linear infinite; }
.ticker span { padding: 0 28px; }
.ticker span::after { content: "■"; color: var(--i-accent); margin-left: 28px; font-size: 7px; vertical-align: middle; }

/* Decision (scene 2) */
.doc { border-top: 1px solid var(--i-line-strong); }
.doc-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--i-line); align-items: baseline; }
.doc-row .k { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.doc-row .v { font-size: 16px; color: var(--i-text); }
.doc-row .v.big { font-family: var(--i-mono); font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -0.03em; font-weight: 500; }
.doc-row .v.big.signal { color: var(--i-text); background: var(--i-accent); display: inline-block; padding: 0 8px; }
.dates-xl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.dates-xl > div { border-top: 1px solid var(--i-line-strong); padding-top: 14px; }
.dates-xl b { display: block; font-family: var(--i-mono); font-weight: 500; font-size: clamp(26px, 3.6vw, 58px); letter-spacing: -0.05em; line-height: 1; }
.dates-xl span { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); display: block; margin-top: 8px; }
.dates-xl .live b { background: var(--i-accent); display: inline-block; padding: 0 6px; }

/* Impact (scene 3) */
.impact-map { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.impact-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.impact-list { border-top: 1px solid var(--i-line-strong); }
.impact-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--i-line); align-items: start; }
.impact-item .n { font-family: var(--i-mono); font-size: 12px; color: var(--i-dim); padding-top: 6px; }
.impact-item .t { font-size: clamp(16px, 1.4vw, 22px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; }
.impact-item .s { color: var(--i-dim); font-size: 14px; margin-top: 6px; max-width: 40em; }
.impact-item .kind { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border: 1px solid; }
.impact-item .kind.risiko { color: var(--i-risk); border-color: var(--i-risk); }
.impact-item .kind.chance { color: var(--i-chance); border-color: var(--i-chance); }
/* Ein Wirkungsweg ist nicht von sich aus Risiko oder Chance, das entscheidet die
   Lage der Firma. Deshalb traegt die Marke beide Farben statt einer. */
.impact-item .kind.both { color: var(--i-dim); border-color: var(--i-line-strong); }

/* Numbers (scene 4) */
.fan { width: 100%; height: auto; overflow: visible; }
.fan .grid { stroke: var(--i-line); stroke-width: 1; }
.fan .axis { font-family: var(--i-mono); font-size: 11px; fill: var(--i-dim); letter-spacing: 0.08em; }
.fan .band-outer { fill: rgba(200, 255, 0, 0.22); }
.fan .band-inner { fill: rgba(200, 255, 0, 0.5); }
.fan .p50 { fill: none; stroke: var(--i-text); stroke-width: 2.2; }
.fan .p-label { font-family: var(--i-mono); font-size: 12px; fill: var(--i-text); font-weight: 500; }
.fan .p-label.dim { fill: var(--i-dim); }
.fan .zero { stroke: var(--i-line-strong); stroke-dasharray: 2 6; }
.big-num { font-family: var(--i-mono); font-size: clamp(70px, 11vw, 190px); line-height: 0.85; letter-spacing: -0.06em; color: var(--i-text); font-variant-numeric: tabular-nums; font-weight: 500; }
.big-num small { display: block; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); margin-top: 18px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--i-line-strong); margin-top: 26px; }
.kpis > div { padding: 16px 16px 16px 0; border-right: 1px solid var(--i-line); }
.kpis > div:last-child { border-right: 0; }
.kpis b { display: block; font-family: var(--i-mono); font-weight: 500; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -0.04em; }
.kpis span { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); }
.sens { margin-top: 26px; border-top: 1px solid var(--i-line-strong); }
.sens-row { display: grid; grid-template-columns: 1fr 200px 50px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--i-line); font-size: 14px; }
.sens-row span:last-child { font-family: var(--i-mono); font-size: 12px; text-align: right; }
.sens-bar { height: 2px; background: var(--i-line); }
.sens-bar i { display: block; height: 100%; width: 0; background: var(--i-accent); }
.fine { font-family: var(--i-mono); font-size: 11px; color: var(--i-dim); letter-spacing: 0.04em; line-height: 1.7; }

/* Debate (scene 5) */
.quotes { display: grid; gap: 8vh; }
.quote { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.quote:nth-child(even) { grid-template-columns: 1fr 180px; }
.quote:nth-child(even) .who { order: 2; text-align: right; }
.quote:nth-child(even) .q { order: 1; }
.quote .who { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 12px; color: var(--i-dim); }
.quote .who i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; }
.quote .q { font-size: clamp(22px, 2.6vw, 44px); line-height: 1.12; letter-spacing: 0.01em; font-weight: 500; text-wrap: balance; }
.quote.skeptic .who i { background: var(--i-skeptic); } .quote.cfo .who i { background: var(--i-cfo); }
.quote.market .who i { background: var(--i-market); } .quote.forecaster .who i { background: var(--i-forecaster); }
.quote.macro .who i { background: var(--i-macro); }
.quote .q .w { display: inline-block; margin-right: 0.26em; opacity: 0; transform: translateY(0.4em); }
.verdict { margin-top: 6vh; border-top: 1px solid var(--i-line-strong); padding-top: 22px; display: grid; grid-template-columns: 180px 1fr; gap: 24px; }
.verdict .k { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-text); }
.verdict .v { font-size: 17px; max-width: 40em; color: var(--i-text); }

/* Counter-steer (scene 6): pinned horizontal timeline */
.tl-pin { position: relative; overflow: hidden; }
.tl-track { display: flex; will-change: transform; padding: 6vh 0 4vh; }
.tl-station { flex: 0 0 min(70vw, 620px); border-left: 1px solid var(--i-line-strong); padding: 0 40px 0 24px; position: relative; }
.tl-station::before { content: ""; position: absolute; left: -5px; top: 0; width: 9px; height: 9px; background: var(--i-text); }
.tl-station.hot::before { background: var(--i-accent); box-shadow: 0 0 0 6px rgba(200,255,0,0.35); }
.tl-station .d { font-family: var(--i-mono); font-weight: 500; font-size: clamp(26px, 3.2vw, 50px); letter-spacing: -0.05em; line-height: 1; margin-bottom: 14px; }
.tl-station .t { font-size: clamp(16px, 1.4vw, 22px); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 8px; }
.tl-station .s { color: var(--i-dim); font-size: 14px; }
.tl-station .tag { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-text); background: var(--i-accent); display: inline-block; padding: 3px 6px; margin-top: 14px; }
.tl-line { position: absolute; left: 5vw; right: 5vw; top: calc(6vh + 4px); height: 1px; background: var(--i-line-strong); }
.measures { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--i-line-strong); margin-top: 4vh; }
.measure { padding: 22px 24px 22px 0; border-right: 1px solid var(--i-line); }
.measure:last-child { border-right: 0; }
.measure .n { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--i-dim); margin-bottom: 12px; }
.measure b { display: block; font-size: 17px; letter-spacing: 0.02em; margin-bottom: 8px; line-height: 1.25; font-weight: 600; }
.measure span { font-size: 14px; color: var(--i-dim); }

/* Horizon (scene 7) */
.cal { border-top: 1px solid var(--i-line-strong); }
.cal-row { display: grid; grid-template-columns: 210px 1fr 120px; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--i-line); align-items: baseline; }
.cal-row .d { font-family: var(--i-mono); font-weight: 500; font-size: clamp(17px, 1.7vw, 25px); letter-spacing: -0.04em; }
.cal-row .d small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); font-weight: 400; margin-top: 4px; }
.cal-row.soon .d { background: var(--i-accent); display: inline-block; padding: 0 4px; }
.cal-row .t { font-size: 16px; }
.cal-row .t span { display: block; font-size: 13px; color: var(--i-dim); margin-top: 3px; }
.cal-row .k { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; justify-self: end; }
.cal-row .k.risk { color: var(--i-risk); } .cal-row .k.chance { color: var(--i-chance); }

/* Final */
.final { display: grid; place-items: center; text-align: center; min-height: 90vh; }
.final .h-xl { margin-bottom: 30px; }
.final .cta-wrap { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.final .fine { margin-top: 50px; max-width: 62em; }
.intro-foot { position: relative; z-index: 2; padding: 26px 5vw 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--i-line-strong); color: var(--i-dim); font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.intro-foot a { color: var(--i-text); text-decoration: none; margin-left: 18px; }
.intro-foot a:hover { color: var(--i-accent); }

@keyframes intro-ticker { to { transform: translateX(-50%); } }
@keyframes intro-slide { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes intro-pulse { 0% { box-shadow: 0 0 0 0 rgba(17,18,20,0.35); } 100% { box-shadow: 0 0 0 12px rgba(17,18,20,0); } }
@keyframes intro-caret { 50% { opacity: 0; } }

@media (max-width: 960px) {
  .scene { padding: 12vh 6vw 10vh; }
  /* the header used to push the layout wider than the phone screen */
  .intro-top { padding: 14px 14px; gap: 10px; }
  .intro-top .i-btn { min-width: 0; gap: 10px; padding: 11px 12px; font-size: 10px; letter-spacing: 0.08em; }
  .intro-brand { font-size: 12px; letter-spacing: 0.2em; gap: 8px; }
  .scene-grid > * { grid-column: 1 / -1 !important; }
  .hero { grid-template-columns: 1fr; padding-top: 16vh; }
  .hero-copy { grid-column: 1; }
  /* on a phone the copy is compact and sits at the bottom, the map keeps the upper half */
  .hero { padding-top: 10vh; padding-bottom: 12vh; }
  .hero h1 { font-size: clamp(28px, 8.4vw, 46px); margin-bottom: 18px; }
  .hero-meta { display: none; }
  .hero-copy::before { inset: -24px -6vw -70px -6vw;
    background: linear-gradient(180deg, rgba(244,244,237,0) 0, rgba(244,244,237,0.72) 40px, rgba(244,244,237,0.95) 34%, rgba(244,244,237,0.96) 100%); }
  .hero-legend { display: none; }
  .intro-rail { display: none; }
  .quote, .quote:nth-child(even) { grid-template-columns: 1fr; }
  .quote:nth-child(even) .who { order: 0; text-align: left; }
  .measures, .kpis, .dates-xl { grid-template-columns: 1fr; }
  .measure, .kpis > div { border-right: 0; border-bottom: 1px solid var(--i-line); }
  .cal-row { grid-template-columns: 1fr; gap: 6px; }
  .cal-row .k { justify-self: start; }
  .doc-row { grid-template-columns: 1fr; gap: 6px; }
  .verdict { grid-template-columns: 1fr; }
  .tl-station { flex-basis: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .intro .mask > .ln, .intro .fade, .intro .quote .q .w { transform: none; opacity: 1; }
  .intro-loader { display: none; }
  .ticker div, .scroll-hint i::after { animation: none; }
}

/* ============ Journey (guided first run, on top of the workspace) ============ */
.journey { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; min-height: 0; flex: none; }
.journey .intro-grid, .journey .intro-vignette { position: absolute; }
.j-burst { position: fixed; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; z-index: 70; border-radius: 50%; background: var(--i-accent); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.j-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 32px; background: linear-gradient(180deg, var(--i-bg) 55%, rgba(244,244,237,0)); }
.j-steps { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; justify-self: center; }
.j-steps li { display: flex; align-items: center; gap: 10px; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.j-steps li b { width: 26px; height: 26px; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--i-line-strong); color: var(--i-dim); font-weight: 500; transition: all .3s; }
.j-steps li.active { color: var(--i-text); }
.j-steps li.active b { border-color: var(--i-text); color: var(--i-bg); background: var(--i-text); }
.j-steps li.done b { border-color: var(--i-chance); color: var(--i-chance); }
.j-close { all: unset; cursor: pointer; justify-self: end; width: 38px; height: 38px; display: grid; place-items: center; color: var(--i-text); font-size: 22px; border: 1px solid var(--i-line-strong); transition: all .2s; }
.j-close:hover { background: var(--i-text); color: var(--i-bg); border-color: var(--i-text); }
.j-error { position: relative; z-index: 2; margin: 8px auto 0; max-width: 1200px; padding: 12px 16px; border-left: 3px solid var(--i-risk); background: rgba(224,38,26,0.07); color: var(--i-risk); font-size: 14px; }
.j-link { all: unset; cursor: pointer; color: var(--i-text); font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-left: 8px; }
.j-scene { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 40px 5vw 80px; min-height: calc(100vh - 74px); }
.j-center { display: grid; align-content: center; justify-items: start; gap: 6px; max-width: 1000px; }
.j-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 5vw; align-items: center; }
.j-col { min-width: 0; }
.j-stage { display: grid; place-items: center; min-height: 420px; }
.j-h1 { font-size: clamp(34px, 5.6vw, 92px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700; margin: 0 0 24px; }
.j-h2 { font-size: clamp(26px, 3.4vw, 54px); line-height: 1.0; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
.j-h1 .hl, .j-h2 .hl { background: var(--i-accent); box-shadow: 0 0 0 0.04em var(--i-accent); }
.journey .lead { font-size: clamp(14px, 1.1vw, 17px); color: var(--i-dim); max-width: 36em; margin: 0 0 22px; }
.j-pop { opacity: 0; }
.j-three { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--i-line-strong); margin: 14px 0 30px; width: 100%; }
.j-three > div { padding: 18px 18px 18px 0; border-right: 1px solid var(--i-line); display: grid; gap: 4px; }
.j-three > div:last-child { border-right: 0; }
.j-three b { font-family: var(--i-mono); color: var(--i-text); font-size: 11px; letter-spacing: 0.16em; font-weight: 500; }
.j-three span { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; }
.j-three small { color: var(--i-dim); font-size: 12.5px; }
.j-form { display: grid; gap: 12px; max-width: 580px; }
.j-input { width: 100%; font: inherit; font-size: 22px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--i-line-strong); background: transparent; color: var(--i-text); outline: none; border-radius: 0; transition: border-color .2s; }
.j-input::placeholder { color: rgba(138,143,156,0.55); }
.j-input:focus { border-bottom-color: var(--i-accent); }
.j-input.small { font-size: 15px; padding: 12px 0; }
.j-input.area { font-size: 15px; line-height: 1.5; resize: vertical; padding: 14px 16px; border: 1px solid var(--i-line-strong); }
.j-input.area:focus { border-color: var(--i-accent); }
.j-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.j-summary { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--i-line-strong); border-bottom: 1px solid var(--i-line); font-size: 13px; color: var(--i-dim); }
.j-summary b { color: var(--i-text); font-size: 16px; }
.j-status { padding: 18px 0; border-top: 1px solid var(--i-line-strong); max-width: 560px; }
.j-status-head { display: flex; align-items: center; gap: 10px; font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--i-text); margin-bottom: 14px; }
.j-status-head small { color: var(--i-dim); margin-left: auto; font-size: 10.5px; }
.j-status-inline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--i-mono); font-size: 11.5px; color: var(--i-dim); }
.j-dot { width: 9px; height: 9px; background: var(--i-dim); display: inline-block; flex: none; }
.j-dot.live { background: var(--i-accent); animation: intro-pulse 1.4s ease-out infinite; }
.j-dot.ok { background: var(--i-chance); }
.j-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.j-log li { font-size: 14px; color: var(--i-dim); padding-left: 22px; position: relative; animation: j-line .5s ease-out both; }
.j-log li::before { content: "\2713"; position: absolute; left: 0; color: var(--i-chance); font-size: 12px; top: 2px; }
.j-log li.cur { color: var(--i-text); }
.j-log li.cur::before { content: "\25B8"; color: var(--i-text); animation: intro-caret 1s steps(1) infinite; }
.j-log.small li { font-size: 13px; }
.j-slow { margin: 12px 0 0; font-size: 13px; color: var(--i-risk); }
.j-muted { color: var(--i-dim); font-size: 13px; }
@keyframes j-line { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.j-cands { display: grid; max-width: 640px; border-top: 1px solid var(--i-line-strong); }
.j-cand { all: unset; cursor: pointer; display: grid; gap: 3px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--i-line); position: relative; transition: padding-left .25s cubic-bezier(.76,0,.24,1); }
.j-cand:hover { padding-left: 14px; }
.j-cand::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--i-accent); transition: width .25s; }
.j-cand:hover::before { width: 3px; }
.j-cand b { font-size: 17px; letter-spacing: 0.01em; padding-right: 80px; color: var(--i-text); }
.j-cand-sub { font-size: 13px; color: var(--i-dim); }
.j-cand-hint { font-size: 13px; color: var(--i-dim); margin-top: 4px; }
.j-cand-src { font-family: var(--i-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-dim); margin-top: 6px; }
.j-cand-kind { position: absolute; right: 0; top: 16px; font-family: var(--i-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--i-line-strong); color: var(--i-dim); }
.j-cand-kind.registry { color: var(--i-chance); border-color: var(--i-chance); }
.j-cand.ghost b { color: var(--i-dim); }
.j-profile { width: min(100%, 540px); border-top: 1px solid var(--i-line-strong); display: grid; }
.j-profile-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; padding: 16px 0; border-bottom: 1px solid var(--i-line); }
.j-profile-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; font-size: 14px; padding: 12px 0; border-bottom: 1px solid var(--i-line); }
.j-profile-row .k { font-family: var(--i-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--i-dim); padding-top: 4px; }
.j-profile-row .v { line-height: 1.45; color: var(--i-text); }
.j-profile-row.skel .v i { display: block; height: 10px; width: 70%; background: rgba(17,18,20,0.1); }
.j-profile-row.skel:nth-child(3) .v i { width: 90%; } .j-profile-row.skel:nth-child(5) .v i { width: 55%; }
.j-skel-card.live .j-profile-row.skel .v i { background: linear-gradient(90deg, rgba(17,18,20,0.08) 20%, rgba(200,255,0,0.9) 50%, rgba(17,18,20,0.08) 80%); background-size: 200% 100%; animation: j-shimmer 1.6s linear infinite; }
@keyframes j-shimmer { to { background-position: -200% 0; } }
.radar-wrap { position: relative; aspect-ratio: 1; width: min(46vw, 620px); justify-self: center; }
.radar { width: 100%; height: 100%; overflow: visible; }
.radar .ring { fill: none; stroke: var(--i-line); stroke-width: 1; }
.radar .ring.major { stroke: var(--i-line-strong); }
.radar .cross { stroke: var(--i-line); stroke-width: 1; }
.radar .sweep { transform-origin: 260px 260px; animation: intro-spin 6s linear infinite; }
.radar .blip { fill: var(--i-text); }
.radar .blip-ring { fill: none; stroke: var(--i-text); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.radar .blip.hot { fill: var(--i-accent); }
.radar .blip-ring.hot { stroke: var(--i-accent); }
.radar .blip-label { font-family: var(--i-mono); font-size: 11px; fill: var(--i-dim); letter-spacing: 0.08em; }
.radar .blip-label.hot { fill: var(--i-accent); }
.radar-glow { display: none; }
@keyframes intro-spin { to { transform: rotate(360deg); } }
.j-radar { width: min(40vw, 520px); }
.j-blip { opacity: 0.35; transition: opacity .4s; }
.j-blip.active, .j-blip.done, .j-blip.hot { opacity: 1; }
.j-blip.active .blip { fill: var(--i-accent); }
.j-blip.active .blip-label { fill: var(--i-accent); }
.j-blip.active .blip-ring { opacity: 1; stroke: var(--i-accent); animation: j-ring 1.2s ease-out infinite; }
.j-blip.done .blip { fill: var(--i-chance); }
@keyframes j-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
.j-item circle { animation: j-item 2.4s ease-out both; }
@keyframes j-item { 0% { r: 0; opacity: 0; } 15% { r: 4; opacity: 1; } 100% { r: 2; opacity: .35; } }
.j-anchors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 18px; max-width: 560px; }
.j-anchors small { width: 100%; font-family: var(--i-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--i-dim); margin-bottom: 2px; }
.j-chip { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 5px 10px; border: 1px solid var(--i-line-strong); color: var(--i-text); }
.j-chip.risiko { color: var(--i-risk); border-color: var(--i-risk); }
.j-chip.chance { color: var(--i-chance); border-color: var(--i-chance); }
.j-chip.dim { color: var(--i-dim); border-color: var(--i-line); }
.j-counters { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--i-line-strong); margin: 6px 0 22px; max-width: 640px; }
.j-counters > div { padding: 14px 16px 14px 0; border-right: 1px solid var(--i-line); }
.j-counters > div:last-child { border-right: 0; }
.j-counters b { display: block; font-family: var(--i-mono); font-weight: 500; font-size: 34px; letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
.j-counters b.hot { background: var(--i-accent); display: inline-block; padding: 0 6px; }
.j-counters span { font-family: var(--i-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-dim); }
.j-matches { display: grid; max-width: 660px; margin-bottom: 24px; border-top: 1px solid var(--i-line-strong); }
.j-match { all: unset; cursor: pointer; display: grid; grid-template-columns: 14px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--i-line); position: relative; transition: padding-left .25s cubic-bezier(.76,0,.24,1); }
.j-match:hover, .j-match.sel { padding-left: 14px; }
.j-match::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--i-accent); transition: width .25s; }
.j-match.sel::before { width: 3px; }
.j-light { width: 12px; height: 12px; margin-top: 5px; background: var(--i-chance); }
.j-match.amber .j-light { background: var(--i-accent); }
.j-match.red .j-light { background: var(--i-risk); }
.j-match-body { display: grid; gap: 6px; min-width: 0; }
.j-match-body b { font-size: 16px; letter-spacing: 0.01em; line-height: 1.3; color: var(--i-text); }
.j-match-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.j-match-why { font-size: 13.5px; color: var(--i-dim); line-height: 1.45; }
.j-hz { max-width: 660px; margin-bottom: 24px; }
.j-hz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.j-hz-head b { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.j-hz-list { display: grid; border-top: 1px solid var(--i-line-strong); }
.j-hz-row { all: unset; cursor: pointer; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; position: relative; padding: 12px 0; border-bottom: 1px solid var(--i-line); transition: padding-left .25s cubic-bezier(.76,0,.24,1); }
.j-hz-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--i-accent); transition: width .25s; }
.j-hz-row:hover, .j-hz-row.sel { padding-left: 14px; }
.j-hz-row.sel::before { width: 3px; }
.j-hz-row .d { font-family: var(--i-mono); font-size: 13px; display: grid; color: var(--i-text); }
.j-hz-row.risiko .d { color: var(--i-risk); } .j-hz-row.chance .d { color: var(--i-chance); }
.j-hz-row .d small { color: var(--i-dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.j-hz-row .t { font-size: 14px; display: grid; gap: 2px; color: var(--i-text); }
.j-hz-row .t small { color: var(--i-dim); font-size: 12px; }
.j-picks { display: grid; max-width: 640px; margin-bottom: 18px; border-top: 1px solid var(--i-line-strong); }
.j-pick { all: unset; cursor: pointer; display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--i-line); position: relative; transition: padding-left .25s cubic-bezier(.76,0,.24,1); }
.j-pick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--i-accent); transition: width .25s; }
.j-pick:hover, .j-pick.sel { padding-left: 14px; }
.j-pick.sel::before { width: 3px; }
.j-pick small { font-family: var(--i-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-dim); }
.j-pick b { font-size: 15px; color: var(--i-text); }
.j-pipeline { display: grid; width: min(100%, 400px); border-top: 1px solid var(--i-line-strong); }
.j-pipe { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--i-line); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; animation: j-pipe 3.5s ease-in-out infinite; }
.j-pipe b { width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--i-mono); font-size: 11px; border: 1px solid var(--i-line-strong); color: var(--i-text); font-weight: 500; }
@keyframes j-pipe { 0%, 100% { color: var(--i-text); } 20% { color: var(--i-accent); } 40% { color: var(--i-text); } }
@media (max-width: 960px) {
  .j-grid { grid-template-columns: 1fr; gap: 30px; }
  .j-stage { order: -1; min-height: 0; }
  .j-radar { width: min(70vw, 360px); }
  .j-three, .j-counters { grid-template-columns: 1fr; }
  .j-head { grid-template-columns: 1fr auto; }
  .j-steps { display: none; }
}

/* Journey: 3D stage for the radar step */
.j-stage-gl { position: relative; align-self: stretch; min-height: min(70vh, 640px); }
.j-gl { position: absolute; inset: 0; }
.j-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-stage-gl .j-radar { position: relative; z-index: 1; }
.j-gl-legend { position: absolute; left: 0; bottom: 0; display: flex; gap: 18px; font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.j-gl-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; background: var(--i-line-strong); }
.j-gl-legend i.hit { background: var(--i-accent); }
.j-gl-legend i.co { background: var(--i-accent); border-radius: 50%; box-shadow: 0 0 0 2px var(--i-text); }
@media (max-width: 960px) { .j-stage-gl { min-height: 52vw; } }
.j-gl-legend i.pin { background: var(--i-text); transform: rotate(45deg); }
.j-stage-gl .j-profile { position: relative; z-index: 1; align-self: end; margin-top: 44%; background: rgba(244,244,237,0.9); padding: 14px 18px; border: 1px solid var(--i-line); backdrop-filter: blur(4px); font-size: 13px; }

/* X-ray lens under the mouse (ring drawn in DOM, content in the shader) */
/* names on the two places the hero is about, positioned from the 3D scene */
.gl-tag { position: absolute; transform: translate(-50%, 30px); z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 3px 8px; background: var(--i-bg);
  font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-text);
  box-shadow: inset 0 0 0 1px var(--i-line-strong); }
.gl-tag i { width: 6px; height: 6px; background: var(--i-text); display: inline-block; }
.gl-tag.acc { color: #111214; background: var(--i-accent); box-shadow: none; font-weight: 700; }
.gl-tag.acc i { background: #111214; }
.gl-tag::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 18px; background: var(--i-line-strong); }
.gl-tag.acc::after { background: var(--i-text); }
.gl-tag.above { transform: translate(-50%, -100%) translateY(-30px); }
.gl-tag.above::after { bottom: auto; top: 100%; }
.gl-tag.on { opacity: 1; }
.gl-lens { position: absolute; width: 186px; height: 186px; margin: -93px 0 0 -93px; border-radius: 50%; border: 1.5px solid var(--i-text); pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 4; }
.gl-lens::after { content: attr(data-label); position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--i-text); background: var(--i-bg); padding: 2px 6px; }
.gl-lens.on { opacity: 1; }
.hero-map, .impact-map, .j-gl { cursor: none; }
.impact-map .gl-lens { width: 166px; height: 166px; margin: -83px 0 0 -83px; }
.j-gl .gl-lens { width: 176px; height: 176px; margin: -88px 0 0 -88px; }
.shield-note { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); margin-top: 8px; }

/* ============ Auth pages inside the intro design ============ */
.auth-shell { min-height: 100vh; display: grid; place-items: center; }
.auth-shell .auth-page { min-height: 0; background: transparent; padding: 96px 24px 60px; width: 100%; display: grid; place-items: center; }
.auth-shell .auth-card { max-width: 480px; width: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.auth-shell .auth-brand { font-family: var(--i-font); font-size: clamp(34px, 4.6vw, 64px); letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700; line-height: 1; color: var(--i-text); margin: 0 0 10px; }
.auth-shell .auth-sub { font-size: 16px; color: var(--i-dim); margin: 0 0 30px; }
.auth-shell .auth-hint { font-size: 14px; color: var(--i-dim); }
.auth-shell .auth-field { display: block; margin-bottom: 18px; }
.auth-shell .auth-field > span { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); margin-bottom: 6px; display: block; }
.auth-shell .auth-field input { width: 100%; font: inherit; font-size: 18px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--i-line-strong); background: transparent; color: var(--i-text); border-radius: 0; outline: none; }
.auth-shell .auth-field input:focus { border-bottom-color: var(--i-text); }
.auth-shell .btn.auth-btn, .auth-shell .btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 240px; padding: 16px 20px; font-family: var(--i-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #111214; background: var(--i-accent); margin-top: 8px; transition: background .25s, color .25s; }
.auth-shell .btn:hover { background: var(--i-text); color: var(--i-bg); }
.auth-shell .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.auth-shell .auth-links { display: grid; gap: 8px; margin-top: 26px; font-size: 14px; }
.auth-shell .auth-links a, .auth-shell a { color: var(--i-text); text-decoration: underline; text-underline-offset: 4px; }
.auth-shell .auth-error { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--i-risk); background: rgba(224,38,26,0.07); color: var(--i-risk); font-size: 14px; }
.auth-shell .auth-success { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--i-chance); background: rgba(29,138,78,0.08); color: var(--i-chance); font-size: 14px; }
.auth-shell .pw-wrap, .auth-shell .auth-field > div { position: relative; }
.auth-shell .pwd-toggle { all: unset; cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--i-dim); font-size: 14px; }
.hero-legend .attrib { font-size: 9px; letter-spacing: 0.06em; text-transform: none; opacity: 0.7; margin-top: 6px; }

/* ---------------- Probelauf (free trial, no account) ---------------- */
.trial-shell { min-height: 100vh; }
.trial-scene { max-width: 980px; padding-top: 16vh; padding-bottom: 14vh; }
.trial-scene .h-l { margin-bottom: 22px; }
.trial-fields { display: grid; gap: 18px; max-width: 520px; margin: 34px 0 30px; }
.trial-fields .auth-field span { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.trial-fields .auth-field input { width: 100%; padding: 14px 16px; font: inherit; color: var(--i-text);
  background: var(--i-bg); border: 0; box-shadow: inset 0 0 0 1px var(--i-line-strong); border-radius: 0; }
.trial-fields .auth-field input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--i-accent); }
.trial-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.trial-terms li { display: flex; align-items: center; gap: 10px; }
.trial-terms li::before { content: ""; width: 16px; height: 1px; background: var(--i-line-strong); flex: none; }

.trial-head { margin-bottom: 34px; }
.trial-facts { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 16px;
  font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.trial-facts b { display: block; color: var(--i-text); font-weight: 500; margin-bottom: 4px; }

.trial-phases { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--i-line); }
.trial-phases .tp { border-bottom: 1px solid var(--i-line);
  font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); }
.trial-phases .tp-head { display: grid; grid-template-columns: 42px 1fr 180px 16px; align-items: center; gap: 16px;
  padding: 13px 0; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.trial-phases .tp-head:hover { color: var(--i-text); }
.trial-phases .tp-head:hover .tp-caret::before, .trial-phases .tp-head:hover .tp-caret::after { background: var(--i-text); }
/* A phase that has not run has nothing to replay, so its row is dead until the
   pipeline reaches it: no pointer, no hover, no plus sign. */
.trial-phases .tp-head:disabled { cursor: default; }
.trial-phases .tp-head:disabled:hover { color: inherit; }
.trial-phases .tp-head:disabled .tp-caret { opacity: 0; }
/* a plus that becomes a minus: a row stays openable once its phase has run */
.trial-phases .tp-caret { position: relative; width: 11px; height: 11px; justify-self: end; }
.trial-phases .tp-caret::before, .trial-phases .tp-caret::after { content: ""; position: absolute; background: var(--i-line-strong);
  transition: transform .35s cubic-bezier(.76, 0, .24, 1), background .2s; }
.trial-phases .tp-caret::before { left: 0; right: 0; top: 5px; height: 1px; }
.trial-phases .tp-caret::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.trial-phases .tp.open .tp-caret::after { transform: scaleY(0); }
.trial-phases .tp.open .tp-caret::before { background: var(--i-accent); }
.trial-phases .tp em { font-style: normal; opacity: .5; }
.trial-phases .tp.active, .trial-phases .tp.done { color: var(--i-text); }
/* Phase 7 does not run inside the pipeline, it waits for a question. */
.trial-phases .tp.ready { color: var(--i-text); }
.trial-phases .tp.ready em { opacity: 1; color: var(--i-dim); }
.trial-phases .tp-state { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--i-dim); text-align: right; }
.trial-phases .tp.open { background: var(--i-panel); }
.trial-phases .tp.open .tp-head { padding-left: 12px; padding-right: 12px; }
.trial-phases .tp-bar { height: 2px; background: var(--i-line); }
.trial-phases .tp-bar i { display: block; height: 100%; width: 0; background: var(--i-text); transition: width .4s ease; }
.trial-phases .tp.active .tp-bar i { background: var(--i-accent); }

/* The running phase opens and shows what it is doing right now. */
.trial-phases .tp-body { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .55s cubic-bezier(.76, 0, .24, 1), opacity .4s ease; }
.trial-phases .tp.open .tp-body { grid-template-rows: 1fr; opacity: 1; }
.trial-phases .tp-inner { overflow: hidden; min-height: 0; }
/* Big enough to carry a map of the country, not a strip of decoration. */
.trial-phases .tp-stage { height: 460px; margin: 0 12px; border-top: 1px solid var(--i-line); position: relative; }
.trial-phases .tp-stage canvas { display: block; width: 100%; height: 100%; }
.trial-phases .tp-note { padding: 0 12px 16px; color: var(--i-dim); letter-spacing: 0.12em; text-transform: none; }
.trial-phases .tp-note::before { content: "› "; color: var(--i-accent); }
.trial-ticker { font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--i-dim); margin-bottom: 44px; }
.trial-ticker::before { content: "› "; color: var(--i-accent); }

.trial-answer, .trial-section { margin: 0 0 40px; max-width: 46em; }
.trial-section .h-m { margin-bottom: 14px; }
.trial-scene .md { line-height: 1.65; color: var(--i-text); }
.trial-scene .md h1, .trial-scene .md h2, .trial-scene .md h3 { letter-spacing: 0.02em; }
.trial-scene .md table { width: 100%; border-collapse: collapse; }
.trial-scene .md td, .trial-scene .md th { border-bottom: 1px solid var(--i-line); padding: 8px 10px; text-align: left; }

.trial-save { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  margin-top: 50px; padding: 28px 30px; box-shadow: inset 0 0 0 1px var(--i-line-strong); }
.trial-save strong { display: block; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.trial-save .lead { margin: 0; font-size: 14px; }

@media (max-width: 760px) {
  .trial-scene { padding-top: 20vh; }
  .trial-phases .tp-head { grid-template-columns: 34px 1fr 16px; }
  .trial-phases .tp-bar { grid-column: 1 / -1; }
  .trial-phases .tp-stage { height: 320px; }
  .trial-save { flex-direction: column; align-items: flex-start; }
}
.trial-wait { display: flex; align-items: center; gap: 10px; font-family: var(--i-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.trial-wait em { font-style: normal; color: var(--i-text); font-variant-numeric: tabular-nums; }
.trial-wait .tw-dot { width: 7px; height: 7px; background: var(--i-accent); flex: none; animation: twpulse 1.1s ease-in-out infinite; }
@keyframes twpulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.auth-hint.trial-carry { margin-bottom: 18px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--i-line-strong); font-size: 13px; }

/* Probelauf: quant ranges and the debate, the two things that make the run believable */
.trial-quant, .trial-debate { max-width: 52em; }
.tq-decision { font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-text); margin-bottom: 6px; }
.tq-ground { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); margin-bottom: 22px; }
.tq-opt { padding: 16px 0; border-top: 1px solid var(--i-line); }
.tq-name { font-weight: 600; margin-bottom: 6px; }
.tq-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 8px; }
.tq-range > div { display: flex; flex-direction: column; gap: 2px; }
.tq-range b { font-family: var(--i-mono); font-size: 15px; font-weight: 500; color: var(--i-dim); letter-spacing: -0.01em; }
.tq-range .mid b { color: var(--i-text); font-size: 19px; font-weight: 600; }
.tq-range span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.tq-range .mid span { color: var(--i-text); }
.tq-band { font-size: 12.5px; color: var(--i-dim); margin-bottom: 6px; }
.tq-range strong { color: var(--i-text); font-weight: 600; }
.tq-range .sep { opacity: .4; }
.tq-bar { position: relative; height: 2px; background: var(--i-line); margin: 12px 0 10px; }
.tq-bar i { position: absolute; top: -4px; width: 2px; height: 10px; background: var(--i-accent); transform: translateX(-50%); }
.tq-why { font-size: 14px; line-height: 1.6; color: var(--i-dim); }

.td-turn { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 10px 0 22px; }
.td-role { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.td-turn.r-skeptic .td-role { color: #111214; background: var(--i-accent); align-self: start; padding: 3px 8px; }
.td-text { font-size: 15px; line-height: 1.65; }

@media (max-width: 760px) {
  .td-turn { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------- Führungsübersicht (report brief) ---------------- */
.brief { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 46px; margin-bottom: 54px; }
.brief > * { min-width: 0; }
.brief-block { max-width: 60em; }
.bb-h { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--i-dim); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.bb-h::before { content: ""; width: 26px; height: 1px; background: var(--i-accent); flex: none; }
.bb-sub { font-size: 16px; line-height: 1.55; margin: 0 0 18px; max-width: 42em; }
.bb-note { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); margin-top: 10px; }
.bb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bb-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; }
.bb-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 2px; background: var(--i-text); }
.bb-list.acc li::before { background: var(--i-accent); height: 4px; top: 0.5em; }
.bb-list.risk li::before { background: var(--i-risk); }
.brief-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }

/* Lage: the one line that decides whether he reads on */
.brief-lage { border-top: 2px solid var(--i-text); padding-top: 18px; }
.bl-flag { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; color: var(--i-dim); margin-bottom: 12px; }
.bl-flag i { width: 10px; height: 10px; flex: none; background: var(--i-dim); }
.brief-lage.a-rot .bl-flag i { background: var(--i-risk); }
.brief-lage.a-gelb .bl-flag i { background: #d9a400; }
.brief-lage.a-gruen .bl-flag i { background: var(--i-chance); }
.bl-satz { font-size: clamp(20px, 2.3vw, 34px); line-height: 1.2; font-weight: 600; margin: 0; max-width: 22em; }
.bl-ab { font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-text); margin-top: 14px; }

/* Spread instead of a number: where the result can land */
/* The spread is a 3D stage with a labelled axis, an option card per row and a
   reading sentence underneath. Below roughly this height the cards no longer
   find free space next to their rows. */
.spread { height: clamp(560px, 72vh, 840px); }
.spread canvas { display: block; width: 100%; height: 100%; }
.spread-key { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 10px 0 0; padding: 0;
  font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.spread-key li { display: flex; align-items: center; gap: 8px; }
.spread-key li i { width: 12px; height: 8px; background: rgba(17, 18, 20, 0.12); }
.spread-key li.lead { color: var(--i-text); }
.spread-key li.lead i { background: var(--i-accent); box-shadow: inset 0 0 0 1px var(--i-text); }

/* The replayed phase pictures in the report. Same stage height as during the
   run, so a picture the reader saw live is recognisable here. */
.pstage { height: clamp(520px, 72vh, 860px); border-top: 1px solid var(--i-line); border-bottom: 1px solid var(--i-line); }
.pstage canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .pstage { height: 380px; } }

/* Timeline: every dated item sits in the lane it hits */
.tl { display: grid; gap: 0; }
.tl-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; border-top: 1px solid var(--i-line); align-items: stretch; }
.tl-lane { display: flex; align-items: center; padding: 18px 0;
  font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.tl-cards { display: grid; gap: 16px; padding: 16px 0; border-left: 1px solid var(--i-line-strong); }
.tl-item { position: relative; padding-left: 18px; }
.tl-item::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; background: var(--i-text); }
.tl-item.r-chance::before { background: var(--i-chance); }
.tl-item.r-risiko::before { background: var(--i-risk); }
.tl-date { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--i-dim); }
.tl-title { font-size: 16px; font-weight: 600; margin: 2px 0 3px; }
.tl-eff { font-size: 14px; color: var(--i-dim); }

/* Areas: the delegation table */
.areas { display: grid; gap: 0; border-top: 1px solid var(--i-line); }
.area { display: grid; grid-template-columns: 190px 1fr 1fr 90px; gap: 20px; align-items: start;
  padding: 16px 0 16px 14px; border-bottom: 1px solid var(--i-line); position: relative; }
.area::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; background: var(--i-line-strong); }
.area.s-hoch::before { background: var(--i-risk); }
.area.s-mittel::before { background: #d9a400; }
.area.s-niedrig::before { background: var(--i-line-strong); }
.ar-name { font-weight: 600; font-size: 15.5px; }
.ar-name em { display: block; font-style: normal; font-family: var(--i-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); margin-top: 4px; font-weight: 400; }
.ar-was { font-size: 15px; line-height: 1.45; }
.ar-hebel { font-size: 15px; line-height: 1.45; color: var(--i-dim); }
.ar-bis { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; }

.makro .mk-row { display: flex; gap: 34px; flex-wrap: wrap; font-family: var(--i-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-dim); }
.makro .mk-row b { display: block; color: var(--i-text); font-weight: 500; margin-bottom: 4px; }

@media (max-width: 860px) {
  .brief-cols { grid-template-columns: 1fr; gap: 34px; }
  .area { grid-template-columns: 1fr; gap: 6px; }
  .ar-bis { text-align: left; }
  .tl-row { grid-template-columns: 1fr; gap: 0; }
  .tl-lane { padding: 14px 0 4px; }
  .tl-cards { border-left: 0; padding-top: 0; }
  .tl-item { padding-left: 16px; }
}

/* The long report stays available, folded away under the overview */
.trial-more { border-top: 1px solid var(--i-line); margin: 10px 0 40px; }
.trial-more > summary { cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); }
.trial-more > summary::-webkit-details-marker { display: none; }
.trial-more > summary::before { content: "+ "; color: var(--i-accent); }
.trial-more[open] > summary::before { content: "- "; }
.trial-more > summary:hover { color: var(--i-text); }

/* Relation map: the company, its shield, and who hangs on it */
.brief-block.wide { max-width: none; }
/* Room to actually go into the map: it is zoomable, so it needs the height. */
.rmap { position: relative; height: clamp(460px, 68vh, 820px); background: var(--i-bg-2); overflow: hidden; }
.rmap canvas { display: block; width: 100%; height: 100%; }
.rm-attr { position: absolute; right: 8px; bottom: 6px; font-family: var(--i-mono); font-size: 9px;
  letter-spacing: 0.08em; color: var(--i-dim); background: var(--i-bg); padding: 2px 6px; }
/* A name tag sits directly above its pin and never grows past this width: one
   supplier described in a whole sentence used to stretch across the country. */
.rm-tag { position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  opacity: 0; transition: opacity .3s; max-width: 200px; padding: 3px 7px; background: var(--i-bg);
  box-shadow: inset 0 0 0 1px var(--i-line-strong); z-index: 2; }
.rm-tag b, .rm-tag em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the needle from the tag down to its pin, so a nudged label stays attached */
.rm-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px;
  background: var(--i-line-strong); }
.rm-tag.on { opacity: 1; }
.rm-tag b { display: block; font-size: 11px; font-weight: 600; }
.rm-tag em { display: block; font-style: normal; font-family: var(--i-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); }
.rm-tag.home { background: var(--i-accent); box-shadow: none; }
.rm-tag.home em { color: #2c3300; }

/* While an entry is being introduced its tag opens into a card that says what
   that firm actually does. Then it shrinks back so the map stays readable. */
.rm-tag .rm-what, .rm-tag .rm-eff { display: none; }
.rm-tag.card { width: 268px; max-width: 268px; padding: 9px 11px 10px;
  box-shadow: inset 0 0 0 1px var(--i-text), 6px 6px 0 rgba(17, 18, 20, 0.07); z-index: 4; }
.rm-tag.card b { font-size: 13px; margin-bottom: 2px; white-space: normal; }
.rm-tag.card .rm-what, .rm-tag.card .rm-eff { display: block; font-size: 12px; line-height: 1.4; margin-top: 6px; }
.rm-tag.card .rm-eff { color: var(--i-dim); }
.rm-tag.card .rm-eff:empty, .rm-tag.card .rm-what:empty { display: none; }

.rm-stage { position: absolute; left: 12px; top: 12px; font-family: var(--i-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--i-text); background: var(--i-bg);
  padding: 4px 9px; box-shadow: inset 0 0 0 1px var(--i-line-strong); z-index: 3; }

/* The two blocks the reader opened the report for: what follows, and what
   to do about it. They carry more weight than anything above them. */
.ks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
/* Two colours, one meaning: rot heisst es passiert, wenn nichts geschieht,
   gruen heisst es passiert, wenn gehandelt wird. Die Schwere aendert die Farbe
   nicht mehr, sie hat vorher die einzige Aussage der Spalte ueberschrieben. */
.ks { border-left: 3px solid var(--i-risk); padding: 14px 16px; background: var(--i-panel); }
.ks.act { border-left-color: var(--i-chance); }
.ks-when { font-family: var(--i-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--i-dim); margin-bottom: 6px; }
.ks-what { font-size: 16px; line-height: 1.45; }
.ls-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: l; }
.ls-list li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  border-top: 1px solid var(--i-line); padding-top: 12px; }
.ls-n { font-family: var(--i-mono); font-size: 13px; color: var(--i-dim); }
.ls-list li:first-child .ls-n { color: #111214; background: var(--i-accent); text-align: center; padding: 2px 0; }
.ls-body b { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 3px; }
.ls-eff { display: block; font-size: 14.5px; color: var(--i-dim); line-height: 1.5; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; }
.ls-meta span { font-size: 12.5px; }
.ls-meta b { display: inline; font-family: var(--i-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); margin-right: 7px; }

/* What the map is for: the reading, not the pins. */
.rm-read { margin-top: 22px; border-top: 1px solid var(--i-line); padding-top: 16px; }
.rm-read-h { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); margin-bottom: 10px; }
.rm-read ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rm-read li { font-size: 15.5px; line-height: 1.55; padding-left: 18px; position: relative; }
.rm-read li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--i-accent); }
.rm-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.rm-key li { display: grid; grid-template-columns: 12px 210px 1fr; gap: 14px; align-items: baseline; font-size: 14.5px; }
.rm-key li i { width: 9px; height: 9px; background: var(--i-line-strong); }
.rm-key li b { font-weight: 600; }
.rm-key li span { color: var(--i-dim); }
.rm-key .r-wettbewerber i { background: var(--i-risk); }
.rm-key .r-kunde i { background: var(--i-chance); }
.rm-key .r-lieferant i { background: var(--i-market); }
.rm-key .r-partner i { background: var(--i-forecaster); }
.rm-key .r-verband i { background: var(--i-macro); }
.rm-key .r-behoerde i { background: var(--i-text); }

@media (max-width: 760px) {
  .rm-key li { grid-template-columns: 12px 1fr; }
  .rm-key li span { grid-column: 2; }
}
.index-restart { all: unset; cursor: pointer; margin-left: auto; font-family: var(--i-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--i-dim); padding: 4px 8px;
  box-shadow: inset 0 0 0 1px var(--i-line); }
.index-restart:hover { color: var(--i-text); box-shadow: inset 0 0 0 1px var(--i-line-strong); }

/* ------------------------------------------------ Wege: was jede Option verlangt
   Die Streuung zeigt nur eine Zahlenspanne je Option. Hier steht, was dafuer
   getan werden muss, von wem und bis wann, damit der Leser die Spanne einkaufen
   kann statt sie nur zu bewundern. Die Farbe links entspricht der Kurve. */
.wg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.executive-overview .wg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.executive-overview .wg { min-width: 0; padding-top: 10px; gap: 0; }
.executive-overview .wg-head { align-items: baseline; gap: 8px; }
.executive-overview .wg-head h3 { font-size: 15px; line-height: 1.3; margin: 0; }
.executive-overview .wg p { font-size: 13px; line-height: 1.45; margin: 12px 0; }
.executive-overview .wg .bb-note { text-transform: none; letter-spacing: 0; font-size: 12px; }
.executive-overview a { color: inherit; text-underline-offset: 3px; font-size: 13px; }
@media (max-width: 760px) {
  .executive-overview .wg-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .executive-overview .wg { border-top: 1px solid rgba(17,18,20,.18); }
  .brief .area, .brief .tl-row, .brief .brief-cols { grid-template-columns: minmax(0, 1fr); }
  .brief .wg-grid { grid-template-columns: minmax(0, 1fr); }
  .brief .rm-key li { grid-template-columns: 12px minmax(0, 1fr); }
  .brief .rm-key li > :last-child { grid-column: 2; }
  .brief p, .brief li, .brief a { overflow-wrap: anywhere; }
}
.wg { border-top: 2px solid var(--i-line-strong); padding: 20px 0 0; display: grid; gap: 14px; align-content: start; }
.wg.c-1 { border-top-color: var(--i-accent); }
.wg-head { display: flex; align-items: baseline; gap: 12px; }
.wg-head i { width: 12px; height: 8px; flex: none; background: var(--i-line-strong); transform: translateY(-2px); }
.wg.c-1 .wg-head i { background: var(--i-accent); box-shadow: inset 0 0 0 1px var(--i-text); }
.wg-head h4 { font-size: 19px; line-height: 1.25; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.wg-was { font-size: 17px; line-height: 1.55; margin: 0; color: var(--i-dim); }
.wg-zahlen { display: flex; flex-wrap: wrap; gap: 20px; padding: 12px 0; border-top: 1px solid var(--i-line);
  border-bottom: 1px solid var(--i-line); font-family: var(--i-mono); }
.wg-zahlen span { display: grid; gap: 4px; font-size: 16px; color: var(--i-dim); }
.wg-zahlen span.mid { color: var(--i-text); font-weight: 600; }
.wg-zahlen b { font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--i-dim); font-weight: 500; }
.wg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: wg; }
.wg-steps li { position: relative; padding-left: 28px; counter-increment: wg; }
.wg-steps li::before { content: counter(wg); position: absolute; left: 0; top: 1px;
  font-family: var(--i-mono); font-size: 12px; color: var(--i-dim); }
.wg-do { display: block; font-size: 17px; line-height: 1.45; }
.wg-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px;
  font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.wg-meta b { font-weight: 500; color: var(--i-text); }
.wg-meta em { font-style: normal; color: var(--i-dim); }
.wg-foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--i-line); font-size: 15px; line-height: 1.5; }
.wg-foot b { display: block; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); font-weight: 500; margin-bottom: 3px; }

/* ---------------------------------------------- Lesbarkeit der Fuehrungsuebersicht
   Der Bericht wurde am Bildschirm gelesen und war zu eng und zu klein. Statt
   jede Regel oben anzufassen, steht die Vergroesserung hier an einer Stelle und
   laesst sich als Ganzes zurueckdrehen. Rund 12 Prozent auf Text, mehr Luft
   zwischen den Bloecken und in den Tabellenzeilen. */
.brief { gap: 60px; margin-bottom: 68px; }
.brief-cols { gap: 56px; }
.brief-block { max-width: 66em; }
.bb-h { font-size: 12px; margin-bottom: 18px; }
.bb-sub { font-size: 17.5px; line-height: 1.6; margin-bottom: 22px; }
.bb-note { font-size: 11.5px; }
.bb-list { gap: 15px; }
.bb-list li { font-size: 17px; line-height: 1.55; }
.bl-satz { font-size: clamp(22px, 2.5vw, 37px); }
.bl-flag { font-size: 11.5px; }
.bl-ab { font-size: 12px; }
.spread-key { font-size: 11.5px; gap: 26px; }
.tl-row { grid-template-columns: 140px 1fr; gap: 24px; }
.tl-lane { font-size: 11.5px; padding: 22px 0; }
.tl-cards { gap: 20px; padding: 20px 0; }
.tl-date { font-size: 11.5px; }
.tl-title { font-size: 17.5px; }
.tl-eff { font-size: 15.5px; line-height: 1.5; }
.area { grid-template-columns: 200px 1fr 1fr 110px; gap: 24px; padding: 20px 0 20px 16px; }
.ar-name { font-size: 17px; }
.ar-name em { font-size: 11px; }
.ar-was, .ar-hebel { font-size: 16.5px; line-height: 1.5; }
.ar-bis { font-size: 11.5px; }
.ks-when { font-size: 11.5px; }
.ks-what { font-size: 17.5px; line-height: 1.5; }
.ls-list { gap: 22px; }
.ls-n { font-size: 14px; }
.ls-body b { font-size: 18.5px; }
.ls-eff { font-size: 16px; }
.ls-meta span { font-size: 14px; }
.ls-meta b { font-size: 10.5px; }
.rm-key li { font-size: 16px; grid-template-columns: 12px 230px 1fr; }
.rm-read li { font-size: 17px; }
.rm-read-h { font-size: 11.5px; }
.makro .mk-row { font-size: 11.5px; }
.td-role { font-size: 11.5px; }
.td-text { font-size: 16.5px; line-height: 1.7; }
.tq-why { font-size: 15.5px; }
.tq-band { font-size: 14px; }

/* --------------------------------------------- Worauf sich die Runde geeinigt hat
   Das Ergebnis der Abstimmung aus Phase 5. Kein Modell schreibt diesen Block, er
   wird aus den Stimmen gezaehlt, deshalb steht neben jeder Massnahme, wer sie
   traegt und ob sie an einem Beleg haengt. */
.eg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: eg; }
.eg-list li { counter-increment: eg; position: relative; display: grid; gap: 6px;
  padding: 18px 0 18px 46px; border-top: 1px solid var(--i-line); }
.eg-list li:last-child { border-bottom: 1px solid var(--i-line); }
.eg-list li::before { content: "M" attr(data-measure-nr); position: absolute; left: 0; top: 20px;
  font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--i-dim); }
.eg-was { font-size: 18px; line-height: 1.4; font-weight: 600; }
.eg-warum { font-size: 16px; line-height: 1.5; color: var(--i-dim); }
.eg-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 4px;
  font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.eg-meta b { display: block; color: var(--i-dim); font-weight: 500; margin-bottom: 3px; }
.eg-meta span { color: var(--i-text); }
.eg-meta .weak { color: var(--i-risk); }
.eg-bed { display: grid; gap: 3px; font-size: 14.5px; color: var(--i-dim); }
.eg-out { margin-top: 26px; border-top: 1px solid var(--i-line-strong); padding-top: 14px; }
.eg-out-h { font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--i-dim); margin-bottom: 10px; }
.eg-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eg-out li { font-size: 16px; line-height: 1.5; }
.eg-out li em { display: block; font-style: normal; font-size: 14.5px; color: var(--i-dim); }

/* ------------------------------------------------------ Wie es über die Zeit läuft
   Der Verlauf über die Quartale. Vektor statt Buehne, weil er von links nach
   rechts gelesen wird und eine gestochene Linie das besser traegt. */
.course { display: grid; gap: 12px; }
.cv-svg { display: block; width: 100%; height: auto; }
.cv-grid line { stroke: var(--i-line); stroke-width: 1; }
.cv-grid line.zero { stroke: var(--i-line-strong); stroke-width: 1.5; stroke-dasharray: none; }
.cv-grid text { font-family: var(--i-mono); font-size: 12px; fill: var(--i-dim); }
.cv-ev line { stroke: var(--i-line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.cv-ev text { font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; fill: var(--i-text); }
.cv-ev text.weak { fill: var(--i-risk); }
.cv-band { opacity: 0.14; }
.cv-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cv-x line { stroke: var(--i-line-strong); }
.cv-x text { font-family: var(--i-mono); font-size: 12px; fill: var(--i-dim); }
.cv-note { font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--i-dim); }
.cv-key { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.cv-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px;
  align-items: baseline; font-size: 16px; border-top: 1px solid var(--i-line); padding-top: 10px; }
.cv-key li i { width: 12px; height: 3px; }
.cv-key li b { font-weight: 600; }
.cv-key li span { font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--i-dim); }
.cv-key li span.weak { color: var(--i-risk); }
@media (max-width: 760px) { .cv-key li { grid-template-columns: 14px 1fr; } .cv-key li span { grid-column: 2; } }

/* ------------------------------------------------------------- Der zweite Durchlauf
   Derselbe Zeitraum mit dem beschlossenen Paket. Die Tabelle daneben ist der
   Ehrlichkeitsteil: sie sagt, welche Groesse jede Massnahme bewegt, um wie viel
   und was sie kostet. Ohne diese Zeilen waere die zweite Kurve eine Behauptung. */
.zw-delta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 20px;
  border-top: 1px solid var(--i-line-strong); padding-top: 16px; }
.zw-delta div { display: grid; gap: 3px; }
.zw-delta b { font-family: var(--i-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); font-weight: 500; }
.zw-delta span { font-family: var(--i-mono); font-size: 26px; letter-spacing: -0.02em; }
.zw-delta em { font-style: normal; font-size: 13.5px; color: var(--i-dim); }
.zw-delta .to span { color: var(--i-text); font-weight: 600; }

.zw-tab { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15.5px; }
.zw-tab th { text-align: left; font-family: var(--i-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); font-weight: 500;
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--i-line-strong); }
.zw-tab td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--i-line); vertical-align: top; line-height: 1.45; }
.zw-tab td:nth-child(2), .zw-tab td:nth-child(3), .zw-tab td:nth-child(4), .zw-tab td:nth-child(5) {
  font-family: var(--i-mono); font-size: 13.5px; white-space: nowrap; }
.zw-tab td.weak { color: var(--i-risk); }
@media (max-width: 760px) { .zw-tab, .zw-tab tbody, .zw-tab tr, .zw-tab td { display: block; width: 100%; }
  .zw-tab thead { display: none; }
  .zw-tab tr { border-bottom: 1px solid var(--i-line); padding: 10px 0; }
  .zw-tab td { border: 0; padding: 2px 0; } }

.zw-out { margin-top: 24px; border-top: 1px solid var(--i-line-strong); padding-top: 14px; }
.zw-out-h { font-family: var(--i-mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--i-dim); margin-bottom: 10px; }
.zw-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zw-out li { font-size: 16px; line-height: 1.5; }
.zw-out li em { display: block; font-style: normal; font-size: 14px; color: var(--i-risk); }


/* --- Der Lauf als Buehne -------------------------------------------------
   Waehrend die Pipeline arbeitet, gehoert der Bildschirm ihr: eine Phase, eine
   Statuszeile, ein Balken fuer den ganzen Weg. Vorher war der Lauf eine Liste
   aufklappbarer Zeilen, und die beste Stelle des Produkts lief hinter einer
   zugeklappten Zeile ab. Fix positioniert, damit es auf dem Telefon genauso
   ganzflaechig ist wie am Rechner, und ohne eigene Scrollflaeche. */
/* Die Kopfzeile der Seite (Wortmarke, Anmelden) liegt fest oben und gehoert
   nicht zum Lauf. Sie stand nach dem Umbau auf dem Firmennamen der Buehne. Zwei
   Sicherungen: die Buehne blendet sie aus, solange sie laeuft, und die Szene
   darum bekommt einen hoeheren Stapelplatz als die Kopfzeile, weil ein fest
   positioniertes Kind seinen z-index nur innerhalb seiner Szene zaehlt. */
.trial-shell:has(.runstage) .intro-top { display: none; }
.trial-shell:has(.runstage) .trial-scene { z-index: 30; }
/* Browser ohne :has() koennen die Kopfzeile nicht bedingt ausblenden. Dort deckt
   die Buehne sie einfach zu, sie bringt ihren eigenen Hintergrund mit. */
@supports not selector(:has(*)) {
  .trial-shell .trial-scene { z-index: 30; }
}

.runstage {
  position: fixed; inset: 0; z-index: 30;
  background: var(--i-bg); color: var(--i-text);
  display: grid; grid-template-rows: auto 2px auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(14px, 3vh, 26px) clamp(16px, 4vw, 44px) clamp(14px, 2.4vh, 22px);
}
.rs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 0; }
.rs-co { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.rs-co b { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; white-space: nowrap; }
.rs-co span { font-size: 13px; color: var(--i-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-clock { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--i-dim); }

.rs-bar { background: var(--i-line); }
.rs-bar i { display: block; height: 100%; width: 0; background: var(--i-text); transition: width 0.7s cubic-bezier(.2,.7,.2,1); }

.rs-steps { display: flex; flex-wrap: nowrap; gap: clamp(10px, 2.2vw, 26px);
  list-style: none; margin: 0; padding: 0; overflow: hidden; }
.rs-step { display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); opacity: 0.4;
  transition: opacity 0.4s, color 0.4s; }
.rs-step em { font-style: normal; padding: 2px 5px; border: 1px solid var(--i-line); }
.rs-step.done { opacity: 0.75; }
.rs-step.done em { border-color: var(--i-line-strong); }
.rs-step.now { opacity: 1; color: var(--i-text); }
.rs-step.now em { background: var(--i-accent); border-color: var(--i-accent); }

/* Die Buehne selbst. Der Wechsel ist ein Ausfliegen und ein Hereinkommen,
   nicht ein Schnitt: man soll sehen, dass ein Kapitel zu Ende ist. */
.rs-stage { position: relative; min-height: 0; }
.rs-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 1; transform: none; transition: opacity 0.42s ease, transform 0.42s cubic-bezier(.4,0,.2,1); }
.runstage.swap .rs-stage canvas { opacity: 0; transform: translateY(-3vh) scale(0.985); }

.rs-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline;
  gap: clamp(10px, 2vw, 22px); border-top: 1px solid var(--i-line); padding-top: 10px; }
.rs-now { display: flex; align-items: baseline; gap: 9px; }
.rs-now em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; color: var(--i-dim); }
.rs-now b { font-size: clamp(14px, 2.2vw, 19px); letter-spacing: 0.01em; }
.rs-note { color: var(--i-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-note .rs-quiet { font-style: normal; font-variant-numeric: tabular-nums; }
.rs-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--i-dim); white-space: nowrap; }

/* Telefon: die Schrittliste passt nicht nebeneinander, also traegt der Fuss die
   Auskunft, welcher Schritt gerade laeuft, und die Liste verschwindet. */
@media (max-width: 720px) {
  .runstage { grid-template-rows: auto 2px minmax(0, 1fr) auto; }
  .rs-steps { display: none; }
  .rs-co { flex-direction: column; gap: 2px; }
  .rs-co span { font-size: 12px; }
  .rs-foot { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rs-note { grid-column: 1 / -1; white-space: normal; }
}

.rs-right { display: flex; align-items: baseline; gap: 14px; }
.rs-exit { background: none; border: 1px solid var(--i-line); color: var(--i-dim); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 10px; }
.rs-exit:hover { color: var(--i-text); border-color: var(--i-line-strong); }
/* Die Buehne sagt es, wenn nichts mehr kommt, statt weiss zu bleiben. */
.rs-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center; padding: 0 24px; }
.rs-empty b { font-size: clamp(16px, 2.4vw, 22px); }
.rs-empty span { color: var(--i-dim); font-size: 14px; max-width: 34em; }

/* Report figures: let readable text occupy space outside the 3D canvas. */
.spread-section .spread { height: 470px; }
.spread-help, .executive-context { font-size: 16px; line-height: 1.6; }
.spread-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.spread-result { min-width: 0; border-top: 4px solid #c8ff00; padding-top: 16px; }
.spread-result.sr-1 { border-color: #111214; }
.spread-result.sr-2 { border-color: #858780; }
.spread-result h4 { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.45; margin: 0 0 20px; overflow-wrap: anywhere; }
.spread-number { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; }
.spread-mid { display: grid; gap: 8px; }
.spread-mid span, .spread-range span { display: block; font-size: 14px; line-height: 1.5; }
.spread-mid strong { font-size: 30px; line-height: 1.3; overflow-wrap: anywhere; }
.spread-mid small { font-size: 16px; font-weight: 500; }
.spread-range { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.spread-range b { font-size: 21px; line-height: 1.5; }
@media (max-width: 700px) {
  .spread-results { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .spread-section .spread { height: 360px; }
}

.measure-action { font-size: 16px; line-height: 1.6; }
.measure-action p { margin: 8px 0; }
.measure-action .measure-original { font-size: 14px; color: var(--i-dim); }
.executive-overview > .bb-note { font-size: 15px; text-transform: none; letter-spacing: normal; line-height: 1.6; }