/* Farbe laut, Form streng: tiefes Navy als Grund, der Verlauf ist die einzige Lichtquelle, Schrift bleibt weiß, alles kantig. */
:root {
  --nacht: #060a26; --navy: #0d1650; --panel: rgba(6, 10, 38, .66); --linie: rgba(255, 255, 255, .22);
  --weiss: #ffffff; --grau: #c3c8e6; --orange: #ff6e2a; --amber: #ffb347; --magenta: #e0307f; --lila: #7a3cf0; --blau: #2f55ff;
  --verlauf: linear-gradient(95deg, #ffb347, #ff6e2a 34%, #e0307f 66%, #7a3cf0);
  --kopf: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--nacht); overflow: hidden; }
#licht { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px; transform-origin: 50% 50%; color: var(--weiss); font: 400 36px/1.35 var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; }
#linie { position: absolute; inset: 0; transition: opacity 1s ease; }
#linie text { font-family: var(--kopf); fill: #fff; }

/* Szenen */
.szene { position: absolute; inset: 0; padding: 96px 110px 110px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; display: flex; flex-direction: column; }
.szene.an { opacity: 1; visibility: visible; transition: opacity .7s ease .15s, visibility 0s; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--kopf); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: 172px; line-height: .94; }
h2 { font-size: 88px; line-height: 1; }
h2.gross { font-size: 124px; line-height: .98; }
h3 { font: 700 44px/1.15 var(--kopf); font-stretch: 112%; }
.verl { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ober { font: 700 26px/1.2 var(--kopf); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 26px; }
.leise { color: var(--grau); }
.lead { font-size: 42px; line-height: 1.28; }
.klein { font-size: 26px; color: var(--grau); }
.panel { background: var(--panel); border: 1px solid var(--linie); padding: 38px 42px; }
.reihe { display: flex; gap: 40px; }
.platz { flex: 1; min-height: 0; }

/* Schritte */
[data-s], [data-nur] { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-s]:not(.sicht), [data-nur]:not(.sicht) { opacity: 0; transform: translateY(26px); pointer-events: none; }
.ueberlagert { position: relative; }
.ueberlagert > [data-nur] { position: absolute; inset: 0; }

/* Eröffnung */
.titel-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.name { font: 800 44px/1.1 var(--kopf); font-stretch: 118%; }
.titel-unter { font-size: 48px; line-height: 1.25; max-width: 1150px; margin-top: 44px; }
.mitmachen { display: grid; grid-template-columns: 560px 1fr; gap: 80px; flex: 1; align-items: center; }
.qr { background: #fff; padding: 22px; display: block; width: 100%; }
.qr-link { font: 700 30px/1.2 var(--kopf); margin-top: 18px; word-break: break-all; }
.gross-zahl { font: 900 210px/.9 var(--kopf); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mcp-url { font: 600 34px/1.25 var(--kopf); word-break: break-all; margin: 14px 0 0; color: var(--amber); }

/* Abstimmung */
.abst { display: flex; flex-direction: column; flex: 1; gap: 36px; min-height: 0; }
.abst-kopf { display: flex; justify-content: space-between; gap: 60px; align-items: flex-start; }
.abst-kopf h2 { font-size: 66px; line-height: 1.05; }
.abst-qr { flex: none; width: 170px; background: #fff; padding: 9px; display: block; }
.balken { display: grid; gap: 22px; align-content: start; }
.b-zeile { display: grid; grid-template-columns: 420px 1fr 110px; gap: 24px; align-items: center; font-size: 32px; font-weight: 500; line-height: 1.15; }
.b-spur { position: relative; height: 54px; background: rgba(255,255,255,.08); }
.b-wert { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--verlauf); background-size: 1100px 100%; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.agent .b-wert { background: linear-gradient(95deg, #39c6ff, #2f55ff 50%, #7a3cf0); background-size: 800px 100%; }
.b-vorjahr { position: absolute; top: -6px; bottom: -6px; width: 4px; background: #fff; transition: left .8s ease, opacity .5s; }
.b-zahl { font: 800 42px/1 var(--kopf); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legende { font-size: 26px; color: var(--grau); display: flex; gap: 12px; align-items: center; }
.legende i { width: 4px; height: 28px; background: #fff; display: inline-block; }
.verdeckt .b-wert, .verdeckt .b-zahl { visibility: hidden; }
.duell { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; flex: 1; }
.duell h3 { margin-bottom: 26px; display: flex; justify-content: space-between; }
.duell .b-zeile { grid-template-columns: 1fr 130px; row-gap: 8px; }
.duell .b-name { grid-column: 1 / -1; font-size: 30px; }
.lage { font-size: 44px; line-height: 1.25; }
.rangplatz { font: 800 28px/1 var(--kopf); color: var(--grau); }

/* ADAMOS */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.kz b { display: block; font: 900 150px/.95 var(--kopf); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.kz span { font-size: 34px; color: var(--grau); }
.partner { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px 46px; font: 800 38px/1.1 var(--kopf); font-stretch: 118%; color: #fff; }
.wechsel { display: grid; grid-template-columns: 1fr 180px 1fr; gap: 30px; align-items: stretch; flex: 1; margin-top: 60px; }
.wechsel .panel { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.wechsel .jahr { font: 800 34px/1 var(--kopf); color: var(--amber); }
.wechsel svg { width: 100%; align-self: center; }
.foto { position: absolute; right: 0; top: 0; bottom: 0; width: 1180px; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.store-zahlen { position: relative; display: grid; gap: 30px; margin-top: 44px; width: 760px; }
.sz { display: grid; grid-template-columns: 370px 1fr; align-items: baseline; gap: 22px; }
.sz b { font: 900 80px/1 var(--kopf); font-stretch: 112%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz span { font-size: 32px; line-height: 1.15; color: var(--grau); }

.vollbild { position: absolute; inset: 0; }
.vollbild > div { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 60%); mask-image: linear-gradient(90deg, transparent 8%, #000 60%); }
.foto-fest { position: absolute; inset: 0; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.25); }
.ki-mark { position: absolute; right: 18px; bottom: 96px; font-size: 20px; line-height: 1; color: #fff; background: rgba(6,10,38,.7); padding: 6px 9px; z-index: 2; }
.foto-fest .ki-mark { bottom: 12px; right: 12px; }

/* Absturz */
.suche { display: grid; grid-template-columns: 720px 1fr; gap: 70px; flex: 1; margin-top: 30px; align-items: start; }
.zeile-382 { font: 900 290px/.86 var(--kopf); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kalt { display: grid; grid-template-columns: 380px 1fr 60px; gap: 18px; align-items: center; font-size: 30px; margin-bottom: 18px; }
.kalt-spur { height: 30px; }
.kalt-wert { height: 100%; background: #6d7bd8; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.sicht .kalt-wert { width: var(--w); }
.abw-kopf { font: 900 100px/.96 var(--kopf); font-stretch: 125%; text-transform: uppercase; }
.abw-liste { display: grid; gap: 12px; margin-top: 56px; font-size: 36px; color: var(--grau); }
.abw-merk { position: absolute; left: 110px; bottom: 130px; font: 800 62px/1.1 var(--kopf); font-stretch: 118%; }

/* Neuanfang */
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 70px; }
.drei .panel { min-height: 330px; }
.drei h3 { margin-bottom: 20px; }
.drei p { font-size: 32px; line-height: 1.3; color: var(--grau); }
.stern { position: absolute; right: 110px; top: 96px; display: flex; gap: 14px; align-items: center; font: 700 26px/1 var(--kopf); color: var(--amber); }
.stern svg { width: 44px; height: 44px; fill: var(--amber); }
.saeulen { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; flex: 1; margin-top: 50px; }
.saeule { display: flex; flex-direction: column; justify-content: flex-end; }
.saeule b { font: 900 170px/.95 var(--kopf); font-stretch: 125%; }
.saeule .s-bar { background: rgba(255,255,255,.75); margin: 18px 0 22px; height: var(--h); transition: height 1s cubic-bezier(.2,.7,.2,1); }
.saeule.heiss .s-bar { background: var(--verlauf); }
.saeule p { font-size: 34px; }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px; }
.vier .panel { padding: 30px; }
.vier h3 { font-size: 34px; margin-bottom: 12px; color: var(--amber); }
.vier p { font-size: 28px; line-height: 1.25; }
.medpicc { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; margin-top: 50px; }
.medpicc div { border-top: 3px solid #fff; padding-top: 16px; font-size: 25px; line-height: 1.2; }
.medpicc b { display: block; font: 900 92px/1 var(--kopf); margin-bottom: 8px; }
.logo { height: 84px; width: auto; display: block; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.zwei .panel p { color: var(--grau); margin-top: 14px; font-size: 34px; }

/* KI */
.vergleich { display: grid; grid-template-columns: 720px 1fr; gap: 90px; flex: 1; margin-top: 50px; }
.punkte { display: grid; grid-template-columns: repeat(10, 1fr); gap: 15px; width: 620px; margin: 30px 0 22px; }
.punkte i { aspect-ratio: 1; background: #fff; transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--i) * 18ms); }
.punkte.ein i:not(:first-child) { opacity: .1; transform: scale(.5); }
.projekte { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; font: 800 38px/1.1 var(--kopf); font-stretch: 106%; margin-top: 18px; white-space: nowrap; }
.enthuellung { position: absolute; left: 110px; right: 110px; bottom: 112px; font: 800 52px/1.08 var(--kopf); font-stretch: 112%; background: rgba(6,10,38,.86); }
.thesen { display: grid; grid-template-columns: 860px 1fr; gap: 70px; flex: 1; margin-top: 44px; }
.these { font: 700 46px/1.12 var(--kopf); font-stretch: 112%; color: rgba(255,255,255,.34); padding: 20px 0; border-top: 1px solid var(--linie); transition: color .5s ease; }
.these.jetzt { color: #fff; }
.these.jetzt .nr { color: var(--amber); }
.nr { font-size: 26px; display: block; margin-bottom: 6px; color: inherit; }
.bild-feld { position: relative; }
.bild-feld svg { width: 100%; height: 100%; }
.bild-feld text { font-family: var(--kopf); fill: #fff; }
.schicht { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.4); stroke-width: 2; }
.schicht.heiss { fill: url(#gv); stroke: none; }
.drei-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 60px; }
.zitat { position: absolute; left: 110px; right: 110px; bottom: 126px; font: 800 68px/1.08 var(--kopf); font-stretch: 116%; }
.markt-kette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.markt-kette .panel { padding: 28px; font-size: 30px; line-height: 1.2; min-height: 190px; }
.markt-kette b { display: block; font: 800 30px/1 var(--kopf); color: var(--amber); margin-bottom: 14px; }
.grosse-frage { font: 800 74px/1.06 var(--kopf); font-stretch: 116%; margin-top: 56px; }
.wand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-content: start; flex: 1; min-height: 0; overflow: hidden; }
.karte { background: var(--panel); border: 1px solid var(--linie); padding: 24px 28px; font-size: 32px; line-height: 1.22; animation: rein .6s cubic-bezier(.2,.7,.2,1); }
.karte small { display: block; margin-top: 10px; font-size: 23px; color: var(--grau); }
.karte.agent-k small { color: #7fd6ff; }
.karte .hoch { font: 800 34px/1 var(--kopf); color: var(--amber); float: right; margin-left: 20px; }
@keyframes rein { from { opacity: 0; transform: translateY(18px); } }
.fuenf { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.fuenf div { font: 800 76px/1.05 var(--kopf); font-stretch: 118%; text-transform: uppercase; }
.schluss { position: absolute; inset: 0; background: var(--nacht); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.schluss h1 { font-size: 146px; text-align: center; white-space: nowrap; }
.einl { display: grid; grid-template-columns: 1fr 660px; gap: 80px; flex: 1; align-items: start; margin-top: 30px; }
.rang { display: grid; gap: 8px; margin-top: 14px; font-size: 30px; }
.rang div { display: flex; justify-content: space-between; border-top: 1px solid var(--linie); padding-top: 8px; }

/* Kamera */
#kamera { position: absolute; display: none; object-fit: cover; background: #000; border: 1px solid rgba(255,255,255,.4); transition: all .8s cubic-bezier(.2,.7,.2,1); z-index: 5; }
#kamera.klein { display: block; right: 40px; bottom: 90px; width: 400px; height: 300px; }
#kamera.gross { display: block; right: 0; top: 0; width: 760px; height: 1080px; border: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }

/* Fußzeile */
#hud { position: absolute; left: 110px; right: 110px; bottom: 38px; display: flex; justify-content: space-between; align-items: center; gap: 40px; z-index: 6; }
#fortschritt { display: flex; gap: 6px; flex: 1; max-width: 900px; }
#fortschritt i { flex: 1; height: 5px; background: rgba(255,255,255,.2); transition: background .5s; }
#fortschritt i.an { background: #fff; }
#zaehler { font: 500 26px/1 var(--text); color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
#zaehler b { color: #fff; font-weight: 700; }
#zaehler i { font-style: normal; margin: 0 6px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01s !important; animation-duration: .01s !important; } }