/* D-ID Sales-Pitch. Designsystem D-ID (BG #090604, Akzent nur Orange #FF882E, Manrope + Libre Franklin), Radius 4 px. */
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: url(fonts/Manrope-ExtraBold.woff) format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/Manrope-Bold.woff) format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/Manrope-SemiBold.woff) format('woff'); }
@font-face { font-family: 'Libre Franklin'; font-weight: 400; font-display: swap; src: url(fonts/LibreFranklin-Regular.woff) format('woff'); }
@font-face { font-family: 'Libre Franklin'; font-weight: 600; font-display: swap; src: url(fonts/LibreFranklin-SemiBold.woff) format('woff'); }

:root {
  --bg: #090604; --card: #161210; --card2: #1f1a16; --ink: #f5f5f0; --dim: #a8a8a8; --mute: #6b6b6b;
  --rule: #2a2622; --rule2: #3a3530; --or: #ff882e; --or-soft: rgba(255, 136, 46, 0.14); --or-line: rgba(255, 136, 46, 0.35);
  --display: 'Manrope', system-ui, sans-serif; --body: 'Libre Franklin', system-ui, sans-serif;
  --top: 72px; --bottom: 84px; --pad: clamp(16px, 4vw, 64px); --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
body.booting #app { opacity: 0; }
#app { position: fixed; inset: 0; transition: opacity 0.4s; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
em { font-style: normal; color: var(--or); }
.kicker { margin: 0 0 14px; font: 700 13px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--or); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px var(--or-soft); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.04; }
h1 { font-size: clamp(36px, 5.4vw, 84px); }
h2 { font-size: clamp(30px, 4.2vw, 64px); max-width: 18ch; }
.sub { color: var(--dim); font-size: clamp(16px, 1.45vw, 21px); max-width: 46ch; margin: 18px 0 0; }
.dim { color: var(--dim); }
.label { font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 18px 0 8px; }
.w { display: inline-block; will-change: transform; }

/* Kopfzeile */
#top { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(9, 6, 4, 0.92), rgba(9, 6, 4, 0)); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.brand img { width: 40px; height: auto; display: block; }
#t-path { font: 700 13px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progress { flex: 1; display: flex; gap: 6px; list-style: none; margin: 0 12px; padding: 0; max-width: 520px; margin-inline: auto; }
#progress li { flex: 1; height: 3px; background: var(--rule2); border-radius: 2px; overflow: hidden; cursor: pointer; position: relative; }
#progress li::after { content: ''; position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
#progress li.done::after, #progress li.on::after { transform: scaleX(1); }
#progress li.on::after { background: var(--ink); }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tool { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: 4px; color: var(--dim);
  font: 600 13px/1 var(--display); transition: color 0.2s, border-color 0.2s, background 0.2s; background: rgba(9, 6, 4, 0.5); }
.tool:hover, .tool.on { color: var(--ink); border-color: var(--or-line); background: var(--or-soft); }
body.customer .sales { display: none !important; }
.langs { display: flex; border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; height: 38px; }
.langs button { padding: 0 11px; font: 700 12px/1 var(--display); letter-spacing: 0.08em; color: var(--mute); }
.langs button.on { background: var(--or); color: #120b06; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--or-line); color: var(--ink);
  font: 600 13px/1 var(--display); background: var(--or-soft); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Start: Kundentyp wählen */
#start { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--top) + 2vh) var(--pad) 24px;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 136, 46, 0.10), transparent 60%), var(--bg); }
.start-inner { max-width: 1320px; margin: 0 auto; }
#s-title { max-width: 14ch; }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 28px; }
.path { position: relative; text-align: left; border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; background: var(--card); min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; isolation: isolate; transition: border-color 0.3s, translate 0.4s var(--ease); }
.path img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; scale: 1.04; transition: scale 1.2s var(--ease); }
.path::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 6, 4, 0.1) 0%, rgba(9, 6, 4, 0.72) 55%, rgba(9, 6, 4, 0.96) 100%); }
.path:hover, .path:focus-visible { border-color: var(--or); translate: 0 -4px; outline: none; }
.path:hover img { scale: 1.12; }
.path .ico { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--or-soft); border: 1px solid var(--or-line); color: var(--or); margin-bottom: auto; }
.path .ico svg { width: 22px; height: 22px; }
.path b { font: 800 26px/1.1 var(--display); margin: 16px 0 6px; }
.path small { color: var(--dim); font-size: 14px; line-height: 1.4; }
.path .go { margin-top: 16px; display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--display); color: var(--or); }
.s-form { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 16px; }
label span { display: block; font: 700 12px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
input, textarea { width: 100%; font: 15px/1.4 var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--rule2); border-radius: 4px; padding: 11px 13px; outline: none; }
input:focus, textarea:focus { border-color: var(--or-line); }
.keys { color: var(--mute); font-size: 13px; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (hover: none) { .keys .k-tip { display: none; } }

/* Szenen */
#deck { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.scene.on { visibility: visible; }
.scene > .bg { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; opacity: 0.55; transform-origin: 60% 50%; }
.scene > .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 6, 4, 0.97) 0%, rgba(9, 6, 4, 0.86) 38%, rgba(9, 6, 4, 0.55) 70%, rgba(9, 6, 4, 0.72) 100%),
  linear-gradient(0deg, rgba(9, 6, 4, 0.92) 0%, rgba(9, 6, 4, 0) 32%); }
.scene > .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene > .inner { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--top) + 3vh) var(--pad) calc(var(--bottom) + 2vh);
  display: flex; flex-direction: column; justify-content: center; }
.wrap { width: 100%; max-width: 1400px; margin: 0 auto; }
.src { display: block; margin-top: 10px; font-size: 12px; color: var(--mute); text-decoration: none; }
.src:hover { color: var(--dim); text-decoration: underline; }

/* Einstieg mit Mia */
.hook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hook .stat { display: flex; align-items: flex-end; gap: 16px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule2); max-width: 520px; }
.hook .stat b { font: 800 clamp(48px, 5vw, 76px)/0.9 var(--display); color: var(--or); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hook .stat > span { color: var(--dim); font-size: 15px; line-height: 1.35; padding-bottom: 6px; }
.player { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule2); background: #000; aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; display: block; object-fit: cover; }
.player .badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 4px;
  background: rgba(9, 6, 4, 0.72); font: 700 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.player .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--or); animation: led 1.6s infinite; }
@keyframes led { 50% { opacity: 0.3; } }
.player .snd { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 4px;
  background: var(--or); color: #120b06; font: 700 13px/1 var(--display); }
.player .snd.ghost { background: rgba(9, 6, 4, 0.72); color: var(--ink); border: 1px solid var(--rule2); }
.caption { margin: 14px 2px 0; font-size: 15px; line-height: 1.5; color: var(--mute); min-height: 3em; }
.caption .cw { transition: color 0.25s; }
.caption .cw.said { color: var(--ink); }

/* Insights */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.tile { position: relative; background: rgba(22, 18, 16, 0.82); border: 1px solid var(--rule2); border-radius: 4px; padding: 26px 24px 22px; backdrop-filter: blur(6px); }
.tile .ring { width: 92px; height: 92px; margin-bottom: 18px; }
.tile .ring circle { fill: none; stroke-width: 6; }
.tile .ring .track { stroke: var(--rule2); }
.tile .ring .fill { stroke: var(--or); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.tile b { display: block; font: 800 clamp(40px, 4vw, 60px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile p { margin: 10px 0 0; color: var(--dim); font-size: 15px; line-height: 1.45; }

/* Schritte */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.steps svg.line { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: 4px; overflow: visible; pointer-events: none; }
.steps svg.line path { stroke: var(--or-line); stroke-width: 2; stroke-dasharray: 6 8; }
.step { position: relative; background: rgba(22, 18, 16, 0.86); border: 1px solid var(--rule2); border-radius: 4px; padding: 22px 22px 24px; }
.step .n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--or); color: var(--or);
  font: 800 16px/1 var(--display); margin-bottom: 18px; position: relative; z-index: 1; }
.step b { display: block; font: 800 22px/1.15 var(--display); margin-bottom: 8px; }
.step p { margin: 0; color: var(--dim); font-size: 15px; }

/* Karten (Use Cases) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.card { background: var(--card); border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.card .img { aspect-ratio: 16 / 10; overflow: hidden; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
.card .txt { padding: 18px 18px 20px; }
.card b { display: block; font: 800 20px/1.2 var(--display); margin-bottom: 8px; }
.card p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* Plattform */
.platform { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 30px; }
.orbit { position: relative; aspect-ratio: 1; max-width: 400px; width: 100%; margin: 0 auto; }
.orbit .ring { position: absolute; inset: 9%; border: 1px dashed var(--or-line); border-radius: 50%; }
.orbit .ring.r2 { inset: 26%; border-style: solid; border-color: var(--rule2); }
.orbit .spin { position: absolute; inset: 0; }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #2a1d12, var(--bg) 70%); border: 1px solid var(--or); }
.orbit .core img { width: 46%; }
.orbit .dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 6px var(--or-soft); }
.plist { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.prod { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 16px; background: rgba(22, 18, 16, 0.86); border: 1px solid var(--rule2); border-radius: 4px; }
.prod i { font: 800 13px/34px var(--display); color: var(--or); text-align: center; border: 1px solid var(--or-line); border-radius: 4px; font-style: normal; height: 34px; }
.prod b { display: block; font: 800 17px/1.2 var(--display); }
.prod span { color: var(--dim); font-size: 14px; }

/* Sicherheit */
.secure { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; margin-top: 36px; }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cert { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(22, 18, 16, 0.88); border: 1px solid var(--rule2); border-radius: 4px; font: 700 15px/1.2 var(--display); }
.cert svg { color: var(--or); width: 22px; height: 22px; }
.secure .side { display: grid; gap: 10px; align-content: start; }
.secure .tile b { font-size: clamp(34px, 3.2vw, 48px); }
.secure .tile { padding: 18px 20px; }
.secure .tile .ring { display: none; }
.secure .note { color: var(--dim); font-size: 15px; margin: 18px 0 0; max-width: 70ch; }
.secure .note.small { font-size: 13px; color: var(--mute); }

/* Belege */
.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 36px; }
.ref { background: rgba(22, 18, 16, 0.9); border: 1px solid var(--rule2); border-radius: 4px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.ref .ind { font: 700 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.ref b { font: 800 20px/1.2 var(--display); }
.ref .m { font: 800 44px/1 var(--display); color: var(--or); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ref .ml { color: var(--dim); font-size: 13px; margin-top: -4px; }
.ref p { margin: 0; color: var(--dim); font-size: 14.5px; }
.ref a { margin-top: auto; font: 700 13px/1 var(--display); color: var(--or); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.ref a:hover { text-decoration: underline; }
.kpis { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 12px 34px; align-items: end; margin-top: 22px; }
.kpis > div:not(.awards) { display: flex; align-items: baseline; gap: 10px; }
.kpis b { font: 800 34px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpis > div > span { color: var(--dim); font-size: 13.5px; max-width: 16ch; line-height: 1.3; }
.kpis .awards { display: grid; gap: 6px; justify-items: end; text-align: right; }
.kpis .awards span { display: inline-flex; align-items: center; gap: 8px; max-width: none; color: var(--ink); font: 600 13px/1.3 var(--display); }
.kpis .awards svg { color: var(--or); width: 16px; height: 16px; }
.kpis .awards .src { margin-top: 0; }
.trusted { margin-top: 18px; display: flex; align-items: center; gap: 22px; overflow: hidden; border-top: 1px solid var(--rule2); padding-top: 18px; }
.trusted > span { font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee div { display: flex; gap: 44px; width: max-content; animation: marquee 26s linear infinite; }
.marquee b { font: 800 22px/1 var(--display); color: var(--dim); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sprachen */
.langgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; max-width: 1040px; }
.lt { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule2); aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.lt video, .lt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt .lbl { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 4px; background: rgba(9, 6, 4, 0.78); font: 700 14px/1 var(--display); }
.lt .lbl svg { width: 14px; height: 14px; color: var(--or); }
.lt.playing { border-color: var(--or); }
.lt.playing .lbl { background: var(--or); color: #120b06; }
.lt.playing .lbl svg { color: #120b06; }

/* Code */
.codewrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; margin-top: 36px; align-items: start; }
.code { background: #0f0b08; border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; }
.code .bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.code .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule2); }
.code .bar span { margin-left: 10px; font: 600 12px/10px var(--display); color: var(--mute); }
.code pre { margin: 0; padding: 18px 20px 22px; font: 14px/1.7 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ink); overflow-x: auto; }
.code .ln { display: block; white-space: pre; min-height: 1.7em; }
.code .k { color: var(--or); } .code .s { color: #f2c38f; } .code .c { color: var(--mute); } .code .f { color: #ffd2ab; }
.points { display: grid; gap: 10px; }

/* Live-Demos */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.demo { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; text-decoration: none; transition: border-color 0.3s, translate 0.4s var(--ease); }
.demo:hover { border-color: var(--or); translate: 0 -4px; }
.demo .img { aspect-ratio: 16 / 9; overflow: hidden; }
.demo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.2s var(--ease); }
.demo:hover img { scale: 1.08; }
.demo .txt { padding: 18px; }
.demo b { display: block; font: 800 20px/1.2 var(--display); margin-bottom: 6px; }
.demo p { margin: 0 0 14px; color: var(--dim); font-size: 14.5px; }
.demo .go { font: 700 13px/1 var(--display); color: var(--or); display: inline-flex; align-items: center; gap: 6px; }

/* Abschluss */
.cta h2 { font-size: clamp(40px, 6vw, 96px); max-width: 14ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 4px; border: 1px solid var(--rule2); background: rgba(22, 18, 16, 0.86);
  font: 700 15px/1 var(--display); text-decoration: none; color: var(--ink); transition: border-color 0.2s, background 0.2s, translate 0.3s var(--ease); white-space: nowrap; }
.btn:hover { border-color: var(--or-line); translate: 0 -2px; }
.btn.primary { background: var(--or); border-color: var(--or); color: #120b06; }
.btn.primary:hover { background: #ff9a4d; }
.cta .meta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; color: var(--mute); font-size: 14px; }

/* Navigation unten */
#nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--bottom); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad) env(safe-area-inset-bottom); background: linear-gradient(0deg, rgba(9, 6, 4, 0.94), rgba(9, 6, 4, 0)); }
.navbtn { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--rule2); background: rgba(9, 6, 4, 0.6);
  font: 700 14px/1 var(--display); color: var(--dim); transition: color 0.2s, border-color 0.2s; }
.navbtn:hover { color: var(--ink); border-color: var(--or-line); }
.navbtn.primary { background: var(--or); border-color: var(--or); color: #120b06; }
.navbtn:disabled { opacity: 0.35; pointer-events: none; }
.count { display: flex; align-items: baseline; gap: 6px; font: 700 13px/1 var(--display); color: var(--mute); min-width: 0; }
.count b { color: var(--ink); font-size: 15px; }
.count i { font-style: normal; }
.count em { margin-left: 12px; color: var(--mute); font-style: normal; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* Notizen (Sales) */
.drawer { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: rgba(16, 12, 10, 0.97); border-left: 1px solid var(--rule2);
  transform: translateX(102%); transition: transform 0.45s var(--ease); display: flex; flex-direction: column; backdrop-filter: blur(10px); }
.drawer.open { transform: none; }
.drawer-head, .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rule); font: 800 16px/1 var(--display); }
.x { font-size: 26px; line-height: 1; color: var(--dim); width: 36px; height: 36px; border-radius: 4px; }
.x:hover { color: var(--ink); background: var(--card2); }
#notes-body { overflow-y: auto; padding: 8px 20px 28px; }
.nb { margin-top: 18px; }
.nb h4 { margin: 0 0 8px; font: 700 11px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); }
.nb ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 14.5px; }
.nb li { margin: 6px 0; }
.nb .qa { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--rule2); border-radius: 4px; background: var(--card); font-size: 14px; }
.nb .qa b { display: block; font-family: var(--display); margin-bottom: 4px; }
.nb .qa span { color: var(--dim); }
.nb.path { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 24px; }

/* Modale */
.modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 2, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.sheet { width: min(1080px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: #120e0b; border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden;
  transform: translateY(18px) scale(0.98); transition: transform 0.45s var(--ease); }
.modal.open .sheet { transform: none; }
.sheet.small { width: min(620px, 100%); padding-bottom: 20px; }
.sheet.small > :not(.sheet-head) { margin-left: 20px; margin-right: 20px; }
.tabs { display: flex; gap: 4px; }
.tabs button { padding: 9px 14px; border-radius: 4px; font: 700 14px/1 var(--display); color: var(--mute); }
.tabs button.on { background: var(--or-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--or-line); }
.lib-tools { padding: 14px 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border-radius: 15px; border: 1px solid var(--rule2); font: 600 13px/1 var(--display); color: var(--dim); }
.chip.on { border-color: var(--or); color: var(--ink); background: var(--or-soft); }
.lib-list { overflow-y: auto; padding: 16px 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; }
.li { border: 1px solid var(--rule2); border-radius: 4px; background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.li .ind { font: 700 11px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.li b { font: 800 18px/1.2 var(--display); }
.li .big { font: 800 34px/1 var(--display); color: var(--or); }
.li p { margin: 0; color: var(--dim); font-size: 14px; }
.li .row { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.li .row button, .li .row a { height: 34px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--rule2); font: 700 12.5px/34px var(--display); color: var(--dim); text-decoration: none; }
.li .row button:hover, .li .row a:hover { color: var(--ink); border-color: var(--or-line); }
.empty { color: var(--mute); padding: 20px 0; }
.sh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sh-link { display: flex; gap: 8px; margin-top: 16px; }
.sh-link input { flex: 1; font-size: 13px; }
.sh-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
textarea { resize: none; font-size: 13.5px; }

#disclosure { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); bottom: 6px; margin: 0; font-size: 11px; line-height: 1.3; color: var(--mute); pointer-events: none; white-space: nowrap; }
body.at-start #disclosure { display: none; }
body.at-start.scrolled #top { background: rgba(9, 6, 4, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
#toast { position: fixed; z-index: 50; left: 50%; bottom: 100px; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 4px; background: var(--or); color: #120b06;
  font: 700 14px/1 var(--display); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.4s var(--ease); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Tablet und Handy */
@media (max-width: 1100px) {
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr; }
  .tile { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: center; }
  .tile .ring { grid-row: span 3; margin: 0; width: 76px; height: 76px; }
  .secure, .codewrap, .platform { grid-template-columns: 1fr; }
  .plist { grid-template-columns: 1fr; }
  .orbit { max-width: 360px; }
  .kpis { grid-template-columns: repeat(3, auto); }
  .kpis .awards { grid-column: 1 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 820px) {
  :root { --top: 60px; --bottom: 74px; }
  .tool span { display: none; }
  .tool { padding: 0 10px; }
  #progress { display: none; }
  .hook { grid-template-columns: 1fr; }
  .hook .stat { margin-top: 22px; }
  .scene > .inner { justify-content: flex-start; }
  .scene > .shade { background: linear-gradient(180deg, rgba(9, 6, 4, 0.9), rgba(9, 6, 4, 0.8)); }
  .steps, .demos { grid-template-columns: 1fr; }
  .steps svg.line { display: none; }
  .langgrid { grid-template-columns: repeat(2, 1fr); }
  .count em { display: none; }
  .navbtn span { display: none; }
  #disclosure { display: none; }
  .pill { display: none; }
  .s-form, .sh-form { grid-template-columns: 1fr; }
  .orbit { display: none; }
  .kpis { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .path-grid { grid-template-columns: 1fr; }
  .path { min-height: 220px; }
  .brand img { width: 34px; }
  #t-path { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee div { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Motion-Bausteine ---------- */
.kicker { --dot: 1; }
.kicker::before { transform: scale(var(--dot)); }
.t em { --mk: 100%; }
.tl-line { padding-bottom: 0.04em; }
.hook .stat { border-top: 0; position: relative; --rule: 100%; }
.hook .stat::before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: var(--rule); background: var(--rule2); }
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.odo-col { display: flex; flex-direction: column; will-change: transform; }
.odo-col i, .odo-ch { font-style: normal; display: block; height: 1em; line-height: 1; }
.odo-ch { display: inline-block; white-space: pre; vertical-align: top; }
.hook .stat b, .ref .m, .kpis b { line-height: 1; display: inline-flex; align-items: flex-start; }
.tile b { line-height: 1; display: flex; align-items: flex-start; }
.ref .m { display: flex; }
#sweep { position: fixed; z-index: 12; top: 0; bottom: 0; left: 0; width: 18vw; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 136, 46, 0) 0%, rgba(255, 136, 46, 0.16) 45%, rgba(255, 196, 140, 0.22) 50%, rgba(255, 136, 46, 0.16) 55%, rgba(255, 136, 46, 0) 100%); filter: blur(8px); }

/* Studio-Beispiele */
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.ex { text-align: left; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; padding: 0; transition: border-color 0.3s; }
.ex:hover { border-color: var(--or); }
.ex .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.ex .media img, .ex .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.ex:hover .media video, .ex:hover .media img { scale: 1.05; }
.ex .tag { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 4px; background: rgba(9, 6, 4, 0.76); color: #f5f5f0; font: 700 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.ex .play { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: #120b06; }
.ex .play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.ex .txt { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ex b { font: 800 19px/1.2 var(--display); }
.ex p { margin: 0; color: var(--dim); font-size: 14.5px; }
.ex .go { margin-top: auto; padding-top: 6px; font: 700 13px/1 var(--display); color: var(--or); display: inline-flex; gap: 6px; align-items: center; }
.lightbox { position: fixed; z-index: 45; inset: 0; display: none; place-items: center; padding: 16px; }
.lightbox.open { display: grid; }
.lb-box { position: relative; width: min(1100px, 100%); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; background: var(--card); border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; }
.lb-media { aspect-ratio: 16 / 9; background: #000; }
.lb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-txt { padding: 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.lb-ind { font: 700 11px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.lb-title { font: 800 26px/1.15 var(--display); }
.lb-desc { margin: 0; color: var(--dim); font-size: 15px; }
.lb-go { align-self: flex-start; margin-top: 8px; }
.lb-box .x { position: absolute; top: 10px; right: 10px; background: rgba(9, 6, 4, 0.6); color: #f5f5f0; }
@media (max-width: 1100px) { .examples { grid-template-columns: 1fr 1fr; } .lb-box { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .examples { grid-template-columns: 1fr; } }

/* ---------- Helles Design (Daylight): Papierkarten mit echten Schatten, Orange nur als Füllung, Tinte auf Orange ---------- */
[data-theme="light"] {
  --bg: #f4efe8; --card: #ffffff; --card2: #faf7f3; --ink: #14100d; --dim: #4d4640; --mute: #8c847d;
  --rule: rgba(20, 16, 13, 0.08); --rule2: rgba(20, 16, 13, 0.12); --or-soft: #ffe6d2; --or-line: rgba(255, 136, 46, 0.5); --or-text: #c2550a;
  --sh1: 0 1px 2px rgba(20, 16, 13, 0.05), 0 3px 10px rgba(20, 16, 13, 0.05);
  --sh2: 0 2px 4px rgba(20, 16, 13, 0.05), 0 12px 32px rgba(20, 16, 13, 0.09);
  --sh3: 0 4px 10px rgba(20, 16, 13, 0.07), 0 26px 60px rgba(20, 16, 13, 0.15);
  color-scheme: light;
}
[data-theme="light"] em, [data-theme="light"] .kicker { color: var(--or-text); }
[data-theme="light"] .kicker::before { background: var(--or); box-shadow: none; }
[data-theme="light"] .t em { background: linear-gradient(rgba(255, 136, 46, 0.42), rgba(255, 136, 46, 0.42)) no-repeat 0 88% / var(--mk) 34%; color: var(--ink); }
[data-theme="light"] #top { background: linear-gradient(180deg, rgba(244, 239, 232, 0.95), rgba(244, 239, 232, 0)); }
[data-theme="light"] body.at-start.scrolled #top { background: rgba(244, 239, 232, 0.88); }
[data-theme="light"] #nav { background: linear-gradient(0deg, rgba(244, 239, 232, 0.96), rgba(244, 239, 232, 0)); }
[data-theme="light"] .scene > .bg { filter: blur(16px) saturate(0.85) brightness(1.3); }
[data-theme="light"] .scene > .shade { background: linear-gradient(90deg, rgba(244, 239, 232, 0.96) 0%, rgba(244, 239, 232, 0.86) 42%, rgba(244, 239, 232, 0.7) 100%),
  linear-gradient(0deg, rgba(244, 239, 232, 0.95) 0%, rgba(244, 239, 232, 0) 32%); }
[data-theme="light"] .tile, [data-theme="light"] .step, [data-theme="light"] .card, [data-theme="light"] .prod, [data-theme="light"] .cert,
[data-theme="light"] .ref, [data-theme="light"] .demo, [data-theme="light"] .ex, [data-theme="light"] .li, [data-theme="light"] .qa {
  background: var(--card); border-color: rgba(20, 16, 13, 0.06); box-shadow: var(--sh2); backdrop-filter: none; border-radius: 14px; }
[data-theme="light"] .card .img, [data-theme="light"] .demo .img { border-radius: 14px 14px 0 0; }
[data-theme="light"] .player { border-radius: 14px; border: 1px solid rgba(20, 16, 13, 0.06); box-shadow: var(--sh3); }
[data-theme="light"] .lt { border-radius: 12px; box-shadow: var(--sh2); border-color: rgba(20, 16, 13, 0.06); }
[data-theme="light"] .code { box-shadow: var(--sh3); border-radius: 14px; }
[data-theme="light"] .step .n { background: var(--card); }
[data-theme="light"] .hook .stat b, [data-theme="light"] .ref .m, [data-theme="light"] .li .big, [data-theme="light"] .ref a, [data-theme="light"] .demo .go,
[data-theme="light"] .ex .go, [data-theme="light"] .path .go { color: var(--or-text); }
[data-theme="light"] .tile .ring .track { stroke: rgba(20, 16, 13, 0.08); }
[data-theme="light"] .orbit .core { background: radial-gradient(circle at 40% 35%, #ffffff, #faf7f3 70%); box-shadow: var(--sh2); }
[data-theme="light"] .orbit .dot { box-shadow: 0 0 0 6px rgba(255, 136, 46, 0.18); }
[data-theme="light"] .btn { background: var(--card); border-color: rgba(20, 16, 13, 0.1); box-shadow: var(--sh1); color: var(--ink); }
[data-theme="light"] .btn.primary, [data-theme="light"] .navbtn.primary { background: var(--or); border-color: var(--or); color: #14100d; }
[data-theme="light"] .tool, [data-theme="light"] .navbtn { background: rgba(255, 255, 255, 0.75); border-color: rgba(20, 16, 13, 0.1); color: var(--dim); }
[data-theme="light"] .tool:hover, [data-theme="light"] .tool.on { color: var(--ink); background: #fff; border-color: var(--or-line); }
[data-theme="light"] .langs { border-color: rgba(20, 16, 13, 0.1); background: rgba(255, 255, 255, 0.75); }
[data-theme="light"] .pill { background: var(--or-soft); border-color: var(--or-line); color: var(--ink); }
[data-theme="light"] .marquee b { color: var(--dim); }
[data-theme="light"] .drawer { background: rgba(250, 247, 243, 0.98); }
[data-theme="light"] .sheet, [data-theme="light"] .lb-box { background: var(--card2); }
[data-theme="light"] .modal { background: rgba(20, 16, 13, 0.35); }
[data-theme="light"] .x:hover { background: var(--well, #f1ece6); }
[data-theme="light"] input, [data-theme="light"] textarea { background: #fff; border-color: rgba(20, 16, 13, 0.12); }
[data-theme="light"] .chip.on, [data-theme="light"] .tabs button.on { background: var(--or-soft); color: var(--ink); }
[data-theme="light"] #start { background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 136, 46, 0.12), transparent 60%), var(--bg); }
[data-theme="light"] .path { background: #fff; border-color: rgba(20, 16, 13, 0.06); box-shadow: var(--sh2); border-radius: 16px; }
[data-theme="light"] .path::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.97) 78%); }
[data-theme="light"] .path b { color: var(--ink); }
[data-theme="light"] .path .ico { background: #fff; box-shadow: var(--sh1); color: var(--or-text); }
[data-theme="light"] #progress li { background: rgba(20, 16, 13, 0.12); }
[data-theme="light"] #progress li.on::after { background: var(--ink); }
[data-theme="light"] #sweep { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); }
[data-theme="light"] .caption .cw.said { color: var(--ink); }

/* =====================================================================================================================
   Sales-Mia (23.10.2026): Mia live neben den Folien. Kein Chatfenster: Untertitel, kurze Einblendungen, eine Steuerleiste.
   Größe und Platz von Mia hängen an --mia-h; die Szenen halten rechts so viel Platz frei, wie Mia braucht.
   ===================================================================================================================== */
/* Abgeleitete Größen am body deklarieren: Eigene Eigenschaften werden dort berechnet, wo sie stehen. Am :root würde
   --mia-w die am body überschriebene Höhe nie sehen (Mia würde verzerrt). */
:root { --dock-b: 40px; --glass: rgba(22, 18, 16, 0.8); }
body { --mia-h: min(70vh, 760px); --mia-w: calc(var(--mia-h) * 1.0667); --mia-r: calc(var(--mia-w) * -0.05); --stage-r: calc(var(--mia-w) * 0.62 + var(--mia-r)); }
body.at-start { --mia-h: min(88vh, 940px); --mia-r: calc(var(--mia-w) * -0.02); }
body[data-kind="proof"], body[data-kind="cards"], body[data-kind="platform"], body[data-kind="examples"], body[data-kind="live"],
body[data-kind="security"], body[data-kind="code"], body[data-kind="welcome"] { --mia-h: min(54vh, 580px); }
/* --stage-r: Platz, den Mia rechts belegt; Leiste, Untertitel und Datenschutzzeile stehen mittig in der Fläche links davon */
body.panel-open { --mia-h: min(64vh, 700px); }
#nav, #notes, #lib, #share { display: none !important; }

/* Mia */
#mia { position: fixed; z-index: 8; right: var(--mia-r); bottom: 0; width: var(--mia-w); height: var(--mia-h); pointer-events: none; transform-origin: 0 0;
  transition: width 0.9s var(--ease), height 0.9s var(--ease), right 0.9s var(--ease), bottom 0.9s var(--ease), filter 0.9s var(--ease); }
#mia canvas { width: 100%; height: 100%; display: block; }
#mia video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
body.no-webgl #mia-live { left: auto; top: auto; right: 10%; bottom: 6%; width: 80%; height: auto; opacity: 1; border-radius: 12px; }

/* Start: Mia rechts, Einladung links */
/* Sicher zentriert: Ist der Inhalt höher als das Fenster, beginnt er unter der Kopfzeile statt darunter zu rutschen
   (Lukas 25.10.2026: Kicker „D-ID · Live with Mia“ lag in kurzen Fenstern über dem Kopfzeilen-Text) */
#start { display: flex; align-items: flex-start; padding: calc(var(--top) + 2vh) var(--pad) 48px; background: var(--bg); isolation: isolate; }
#start::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(media/bg-overview.webp) center / cover; opacity: 0.22; }
#start::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, rgba(9, 6, 4, 0.9) 42%, rgba(9, 6, 4, 0.35) 100%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero { position: relative; z-index: 9; max-width: 620px; margin: auto 0; }
/* Auf der Startseite steht „Live with Mia“ schon im Kicker darunter: in der Kopfzeile nicht doppelt zeigen */
body.at-start #t-path { visibility: hidden; }
@media (max-height: 860px) and (min-width: 821px) {
  .hero h1 { font-size: clamp(36px, 4.6vw, 70px); }
  .hero .sub { margin-top: 14px; }
  .hero-cta { margin-top: 26px; }
  .hero-tours { margin-top: 22px; }
  .hero .privacy { margin-top: 18px; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .hero h1 { font-size: clamp(32px, 3.8vw, 56px); }
  .hero .hint { display: none; }
}
.hero h1 { font-size: clamp(40px, 5.4vw, 86px); max-width: 12ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn.big { height: 62px; padding: 0 30px; font-size: 17px; border-radius: 31px; }
.btn.big svg { width: 22px; height: 22px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.hero .hint { color: var(--mute); font-size: 13px; margin: 12px 0 0; }
.hero-tours { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.hero-tours > span { font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
#h-paths { display: flex; flex-wrap: wrap; gap: 8px; }
.hchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 1px solid var(--rule2); border-radius: 20px; background: rgba(22, 18, 16, 0.7);
  font: 600 14px/1 var(--display); color: var(--ink); transition: border-color 0.2s, background 0.2s, translate 0.3s var(--ease); }
.hchip svg { width: 16px; height: 16px; color: var(--or); }
.hchip:hover, .hchip.on { border-color: var(--or); background: var(--or-soft); translate: 0 -2px; }
.privacy { color: var(--mute); font-size: 12px; line-height: 1.5; margin: 26px 0 0; max-width: 62ch; }
.privacy a, #privacy-line a { color: inherit; }

/* Szenen machen Mia Platz */
body.live .scene > .inner { padding-bottom: calc(var(--dock-b) + 150px); }
@media (min-width: 821px) {
  body.live .scene > .inner { padding-right: calc(var(--mia-w) * 0.8 + var(--mia-r) + 8px); transition: padding-right 0.9s var(--ease); }
}
body.live .scene > .inner { justify-content: flex-start; }
body.live .scene .wrap { margin-top: auto; margin-bottom: auto; }
body.live .scene h2 { font-size: clamp(28px, 3.3vw, 54px); }
body.live .scene .sub { font-size: clamp(15px, 1.2vw, 19px); margin-top: 12px; }
body.live .stats, body.live .steps, body.live .cards, body.live .refs, body.live .secure, body.live .codewrap, body.live .examples, body.live .demos { margin-top: 24px; }
body.live .tile { padding: 18px 18px 16px; }
body.live .tile .ring { width: 64px; height: 64px; margin-bottom: 10px; }
body.live .tile b { font-size: clamp(34px, 3vw, 48px); }
body.live .tile p { font-size: 14px; }
body.live .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.live .ref { padding: 14px 16px; gap: 6px; }
body.live .ref b { font-size: 17px; }
body.live .ref .m { font-size: 30px; }
body.live .ref p { font-size: 13px; line-height: 1.4; }
body.live .kpis { grid-template-columns: repeat(3, auto); gap: 10px 26px; margin-top: 16px; }
body.live .kpis b { font-size: 26px; }
body.live .kpis .awards { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 4px 18px; }
body.live .ref .m ~ p { display: none; }
body.live .ref .ind { font-size: 10px; }
body.live .trusted { margin-top: 12px; padding-top: 12px; }
body.live .platform { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
body.live .platform .orbit { display: none; }
body.live .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.live .prod { padding: 12px 14px; gap: 10px; grid-template-columns: 30px 1fr; }
body.live .prod i { height: 30px; line-height: 30px; }
body.live .prod b { font-size: 15.5px; }
body.live .prod span { font-size: 13px; line-height: 1.4; }
body.live .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
body.live .card .img { aspect-ratio: 16 / 8; }
body.live .card .txt { padding: 12px 14px 14px; }
body.live .card b { font-size: 16.5px; margin-bottom: 4px; }
body.live .card p { font-size: 13px; line-height: 1.4; }
body.live .ex .txt p, body.live .demo .txt p { font-size: 13px; }
body.live .cert { padding: 12px 14px; font-size: 14px; }
body.live .secure .note { font-size: 14px; margin-top: 12px; }
body.live .step { padding: 18px 18px 20px; }
body.live .step b { font-size: 19px; }
body.live .langgrid { max-width: 820px; }
.hook { grid-template-columns: minmax(0, 1fr); }
.hook h1 { max-width: 15ch; }

/* Begrüßungsszene: vier Touren */
.welcome h1 { font-size: clamp(34px, 4vw, 62px); }
.welcome .tours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 900px; }
.tour { position: relative; text-align: left; min-height: 142px; border: 1px solid var(--rule2); border-radius: 6px; overflow: hidden; background: var(--card);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; isolation: isolate; transition: border-color 0.3s, translate 0.4s var(--ease); }
.tour img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; scale: 1.04; transition: scale 1.2s var(--ease); }
.tour::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 6, 4, 0.2) 0%, rgba(9, 6, 4, 0.8) 60%, rgba(9, 6, 4, 0.96) 100%); }
.tour:hover, .tour:focus-visible { border-color: var(--or); translate: 0 -3px; outline: none; }
.tour:hover img { scale: 1.12; }
.tour .ico { width: 38px; height: 38px; border-radius: 4px; display: grid; place-items: center; background: var(--or-soft); border: 1px solid var(--or-line); color: var(--or); margin-bottom: auto; }
.tour b { font: 800 22px/1.1 var(--display); margin: 12px 0 4px; }
.tour small { color: var(--dim); font-size: 13px; line-height: 1.35; }
.tour .go { margin-top: 10px; display: flex; align-items: center; gap: 6px; font: 700 13px/1.2 var(--display); color: var(--or); }

/* Logos „Trusted by“ (d-id.com) */
.marquee.logos div { gap: 54px; align-items: center; }
.marquee.logos img { height: 26px; width: auto; opacity: 0.75; display: block; }

/* Mia zeigt auf etwas */
.spot { outline: 2px solid var(--or); outline-offset: 4px; animation: spot 1.3s var(--ease) 3; }
@keyframes spot { 0% { box-shadow: 0 0 0 0 rgba(255, 136, 46, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(255, 136, 46, 0); } }

/* Untertitel und Besucherzeile */
#talk { position: fixed; z-index: 23; left: var(--pad); right: calc(var(--stage-r) + 12px); bottom: calc(var(--dock-b) + 80px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; transition: right 0.9s var(--ease); }
#you, #cap { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.45s var(--ease); max-width: min(64ch, 100%); }
#you.on, #cap.on { opacity: 1; transform: none; }
#you { font-size: 14px; line-height: 1.4; color: var(--dim); background: rgba(9, 6, 4, 0.86); padding: 6px 12px; border-radius: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#you b { color: var(--or); font-family: var(--display); margin-right: 8px; }
#cap { display: flex; align-items: flex-end; gap: 10px; }
#cap-text { font: 600 clamp(16px, 1.3vw, 20px)/1.45 var(--body); color: var(--ink); background: rgba(9, 6, 4, 0.84); padding: 10px 16px; border-radius: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; text-wrap: balance; }
#cap-text:empty { display: none; }
#cap .stop { pointer-events: auto; display: none; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--rule2); background: rgba(9, 6, 4, 0.7);
  font: 700 12px/1 var(--display); color: var(--dim); white-space: nowrap; }
body.mia-talking #cap .stop { display: inline-block; }
#cap .stop:hover { color: var(--ink); border-color: var(--or-line); }
body:not(.live) #talk { display: none; }

/* Einblendung (Beispiel, Referenz, Demo) */
#pop { position: fixed; z-index: 22; right: var(--pad); top: calc(var(--top) + 70px); width: min(400px, calc(100vw - 2 * var(--pad))); display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--or-line); border-radius: 12px; padding: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-14px) scale(0.96); pointer-events: none; transition: opacity 0.35s, transform 0.5s var(--ease); }
#pop.on { opacity: 1; transform: none; pointer-events: auto; }
#pop .pimg { flex: none; width: 112px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #000; }
#pop .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pop .ptxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#pop .pk { font: 700 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
#pop b { font: 800 17px/1.2 var(--display); }
#pop p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.4; }
#pop .btn { height: 36px; padding: 0 14px; font-size: 13px; align-self: flex-start; margin-top: 6px; }
#pop .x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; font-size: 20px; }

/* Steuerleiste */
#dock { position: fixed; z-index: 24; left: calc((100vw - var(--stage-r)) / 2); bottom: var(--dock-b); transform: translateX(-50%); transition: left 0.9s var(--ease); display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 40px; background: var(--glass); border: 1px solid var(--rule2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.dbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); transition: background 0.2s, color 0.2s; }
.dbtn:hover { color: var(--ink); background: var(--card2); }
body.typing #d-kbd { color: var(--or); }
.mic { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card2); color: var(--dim); border: 1px solid var(--rule2); flex: none; }
.mic.on { background: var(--or); color: #120b06; border-color: var(--or); }
.mic svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.mic .lvl { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--or); opacity: calc(var(--lvl, 0) * 1.4); transform: scale(calc(1 + var(--lvl, 0) * 0.4)); }
#dock[data-mode="listen"] .mic.on::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--or); animation: listen 2.2s ease-out infinite; }
@keyframes listen { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.5); opacity: 0; } }
#d-state { min-width: 178px; padding: 0 12px 0 8px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
#d-state b { font: 700 14px/1.15 var(--display); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#d-state span { font-size: 12px; color: var(--mute); white-space: nowrap; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; background: var(--or); border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; } .eq i:nth-child(3) { animation-delay: -0.6s; } .eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--or); animation: dots 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
#d-form { display: none; align-items: center; gap: 6px; }
body.typing #d-form { display: flex; }
body.typing #d-state { display: none; }
#d-q { width: min(40vw, 400px); height: 44px; border-radius: 22px; padding: 0 16px; background: var(--card); }
#d-send { height: 44px; padding: 0 18px; border-radius: 22px; background: var(--or); color: #120b06; font: 700 14px/1 var(--display); }
#d-resume { height: 44px; border-radius: 22px; }
#dock[data-mode="paused"] > :not(#d-resume):not(#d-state) { display: none; }
#privacy-line { position: fixed; z-index: 21; left: calc((100vw - var(--stage-r)) / 2); transform: translateX(-50%); bottom: 4px; width: min(900px, calc(100vw - var(--stage-r) - 2 * var(--pad))); margin: 0;
  font-size: 11px; line-height: 1.35; color: var(--mute); text-align: center; }
body:not(.live) #privacy-line { display: none; }
body.live #disclosure { display: none; }

/* Plan: Pille, Fallkarte, Liste */
.planpill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 19px; border: 1px solid var(--or-line); background: var(--or-soft);
  color: var(--ink); font: 700 13px/1 var(--display); white-space: nowrap; transition: background 0.3s, color 0.3s; }
.planpill .pring { width: 26px; height: 26px; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 3.4; }
.pring .track { stroke: var(--rule2); }
.pring .fill { stroke: var(--or); transition: stroke-dashoffset 0.9s var(--ease); }
.planpill .pl-n { color: var(--or); font-variant-numeric: tabular-nums; }
.planpill.ready { background: var(--or); color: #120b06; border-color: var(--or); }
.planpill.ready .pl-n { color: #120b06; } .planpill.ready .pring .fill { stroke: #120b06; } .planpill.ready .pring .track { stroke: rgba(0, 0, 0, 0.18); }
.plandrop { position: fixed; z-index: 30; top: calc(var(--top) + 4px); left: var(--x, auto); width: 320px; padding: 14px 16px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--or-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); display: none; flex-direction: column; gap: 4px; pointer-events: none; }
.plandrop.on { display: flex; }
.pd-k { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.pd-k svg { width: 16px; height: 16px; stroke-width: 2.6; }
.pd-f { font-size: 12px; color: var(--mute); margin-top: 6px; }
.pd-v { font: 800 20px/1.2 var(--display); min-height: 24px; }
.spark { position: fixed; z-index: 40; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--or); pointer-events: none; }
.plancard { position: fixed; z-index: 31; top: calc(var(--top) + 4px); right: var(--pad); width: 340px; background: var(--card); border: 1px solid var(--rule2); border-radius: 12px; padding: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); display: none; }
.plancard.open { display: block; }
.pc-head b { display: block; font: 800 18px/1.2 var(--display); }
.pc-head small { color: var(--mute); font-size: 12.5px; }
.plancard ul { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 8px; }
.plancard li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; font-size: 14px; line-height: 1.3; }
.plancard li span { color: var(--mute); }
.plancard li b { font-weight: 600; }
.plancard li b i { color: var(--mute); font-style: normal; font-weight: 400; }
.plancard .btn { width: 100%; justify-content: center; height: 44px; }

/* Panels links neben Mia: Pilotplan und Buchung */
.panel { position: fixed; z-index: 14; left: var(--pad); top: calc(var(--top) + 8px); bottom: calc(var(--dock-b) + 150px); width: min(860px, calc(100vw - var(--stage-r) - var(--pad) * 2));
  overflow-y: auto; padding: 24px 28px; border-radius: 14px; background: rgba(22, 18, 16, 0.95); border: 1px solid var(--rule2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); display: none; }
.panel.open { display: block; }
body.panel-open .scene.current .inner { opacity: 0.12; filter: blur(4px); transition: opacity 0.5s, filter 0.5s; }
body.panel-open #pop { opacity: 0; pointer-events: none; }
.panel > .x { position: absolute; top: 12px; right: 12px; }
.panel h2 { font-size: clamp(28px, 3vw, 46px); max-width: 20ch; }
.panel .sub { font-size: 15px; margin-top: 10px; }
.pilot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.pg-col h4 { font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--rule2); background: var(--card); }
.fact span { display: block; font: 700 10.5px/1.2 var(--display); color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; }
.fact b { display: block; margin-top: 4px; font: 700 15px/1.25 var(--display); overflow-wrap: anywhere; }
.fact b i { font-style: normal; color: var(--mute); font-weight: 400; }
.fact.on { border-color: var(--or-line); background: linear-gradient(180deg, var(--or-soft), transparent 140%); }
.recs { display: grid; gap: 8px; margin-bottom: 18px; }
.rec { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule2); }
.rec i { font: 800 12px/34px var(--display); font-style: normal; text-align: center; width: 34px; height: 34px; border-radius: 50%; background: var(--or-soft); color: var(--or); }
.rec b { display: block; font: 700 15px/1.2 var(--display); }
.rec span { color: var(--dim); font-size: 13px; line-height: 1.38; }
.psteps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.psteps li::marker { color: var(--or); font-weight: 800; }
.pilot-cta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule2); }
.pilot-cta p { margin: 0 0 14px; color: var(--dim); font-size: 14px; }
.pilot-cta p b { color: var(--ink); }
.panel .row { display: flex; flex-wrap: wrap; gap: 10px; }
.b-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 14px 0 0; max-width: 200px; }
.b-steps li { flex: 1; height: 3px; border-radius: 2px; background: var(--rule2); transition: background 0.4s; }
.b-steps li.done, .b-steps li.on { background: var(--or); }
.b-body h3 { font: 800 24px/1.2 var(--display); margin: 20px 0 14px; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic { text-align: left; padding: 14px 16px; border: 1px solid var(--rule2); border-radius: 10px; background: var(--card); font: 600 15px/1.3 var(--display); transition: border-color 0.2s, background 0.2s; }
.topic:hover, .topic.on { border-color: var(--or); background: var(--or-soft); }
.days { display: flex; gap: 6px; align-items: stretch; }
.day { flex: 1; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--rule2); background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--dim); }
.day b { font: 800 20px/1 var(--display); color: var(--ink); }
.day.on { border-color: var(--or); background: var(--or-soft); }
.dnav { flex: none; width: 34px; border-radius: 8px; border: 1px solid var(--rule2); color: var(--dim); font-size: 20px; }
.dnav:disabled { opacity: 0.3; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; margin-top: 12px; max-height: 214px; overflow-y: auto; }
.slot { height: 38px; border-radius: 8px; border: 1px solid var(--rule2); background: var(--card); font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.slot:hover { border-color: var(--or-line); }
.slot.on { background: var(--or); color: #120b06; border-color: var(--or); }
.tz { color: var(--mute); font-size: 12px; margin: 10px 0 0; }
.b-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-form .wide { grid-column: 1 / -1; }
#book .privacy { margin-top: 14px; }
.b-status { color: #ff9a7a; font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.b-done { text-align: center; padding: 34px 0 10px; }
.b-done .tick { width: 66px; height: 66px; border-radius: 50%; background: var(--or); color: #120b06; display: grid; place-items: center; margin: 0 auto 12px; }
.b-done .tick svg { width: 32px; height: 32px; stroke-width: 2.6; }
.b-done p { color: var(--dim); }

/* Kino: Top-Film links neben Mia, Mia steht still daneben; Untertitel und Folie treten zurück */
.theater { position: fixed; z-index: 16; left: var(--pad); top: calc(var(--top) + 8px); bottom: calc(var(--dock-b) + 74px); width: calc(100vw - var(--stage-r) - var(--pad) * 2);
  display: none; align-items: center; justify-content: center; }
.theater.open { display: flex; }
.th-box { position: relative; width: min(100%, calc((100vh - var(--top) - var(--dock-b) - 210px) * 16 / 9)); background: var(--card); border: 1px solid var(--rule2);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.th-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.th-media video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.th-sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px;
  border-radius: 26px; background: var(--or); color: #120b06; font: 700 15px/1 var(--display); }
.th-sound svg { width: 22px; height: 22px; }
.th-txt { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 14px 18px 16px; align-items: baseline; }
.th-ind { grid-column: 1 / -1; font: 700 11px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.th-title { font: 800 20px/1.2 var(--display); }
.th-note { font-size: 12px; color: var(--mute); white-space: nowrap; }
.th-desc { grid-column: 1 / -1; margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 1.45; }
/* Live-Fassung eines Films (Augenschutz): öffnet einen neuen Tab, die Sales-Mia pausiert so lange */
.th-live { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
/* Platz für die Knopfzeile: das Video wird etwas schmaler, damit der Kasten nicht hinter die Steuerleiste rutscht */
.theater.has-live .th-box { width: min(100%, calc((100vh - var(--top) - var(--dock-b) - 276px) * 16 / 9)); }
.th-box > .x { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(9, 6, 4, 0.65); color: #f5f5f0; }
body.film-open .scene.current .inner { opacity: 0.1; filter: blur(5px); transition: opacity 0.5s, filter 0.5s; }
body.film-open #talk, body.film-open #pop { opacity: 0; pointer-events: none; }
.examples.films .go { color: var(--or); }
[data-theme="light"] .th-box { box-shadow: var(--sh3); border-color: rgba(20, 16, 13, 0.08); }
[data-theme="light"] .th-ind { color: var(--or-text); }
@media (max-width: 820px) {
  .theater { left: 8px; right: 8px; width: auto; top: calc(var(--top) + 4px); bottom: auto; z-index: 26; }
  .th-box { width: 100%; }
  .th-txt { grid-template-columns: 1fr; }
  .th-title { font-size: 17px; }
  .th-desc { display: none; }
}

/* Hell */
[data-theme="light"] { --glass: rgba(255, 255, 255, 0.82); }
[data-theme="light"] #start::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(244, 239, 232, 0.92) 42%, rgba(244, 239, 232, 0.4) 100%), linear-gradient(0deg, var(--bg), transparent 30%); }
[data-theme="light"] .hchip { background: rgba(255, 255, 255, 0.8); }
[data-theme="light"] .tour::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.86) 58%, #fff 100%); }
[data-theme="light"] .tour { box-shadow: var(--sh2); border-color: rgba(20, 16, 13, 0.06); border-radius: 14px; }
[data-theme="light"] .tour .go, [data-theme="light"] .tour .ico { color: var(--or-text); }
[data-theme="light"] .marquee.logos img { filter: invert(1) brightness(0.3); opacity: 0.7; }
[data-theme="light"] #you { background: rgba(255, 255, 255, 0.92); }
[data-theme="light"] #cap-text { background: rgba(255, 255, 255, 0.93); box-shadow: var(--sh1); }
[data-theme="light"] #cap .stop { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] #dock { box-shadow: var(--sh3); border-color: rgba(20, 16, 13, 0.08); }
[data-theme="light"] .mic { background: #fff; }
[data-theme="light"] .mic.on { background: var(--or); color: #14100d; }
[data-theme="light"] .panel { background: rgba(250, 247, 243, 0.97); box-shadow: var(--sh3); border-color: rgba(20, 16, 13, 0.08); }
[data-theme="light"] .plancard, [data-theme="light"] .plandrop, [data-theme="light"] #pop { box-shadow: var(--sh3); }
[data-theme="light"] .pd-k, [data-theme="light"] #pop .pk, [data-theme="light"] .planpill .pl-n, [data-theme="light"] .rec i { color: var(--or-text); }
[data-theme="light"] .planpill.ready .pl-n { color: #14100d; }
[data-theme="light"] .b-status { color: #b3361b; }

/* Tablet und Handy: Mia unten rechts, Untertitel über der Leiste, Panels über die ganze Breite */
@media (max-width: 1100px) and (min-width: 821px) {
  body { --mia-h: min(56vh, 560px); }
  body[data-kind] { --mia-h: min(48vh, 480px); }
  .welcome .tours { grid-template-columns: 1fr; }
  .tour { min-height: 120px; }
}
@media (max-width: 820px) {
  :root { --dock-b: 20px; }
  body { --mia-h: min(27vh, 240px); --mia-r: calc(var(--mia-w) * -0.12); }
  body[data-kind] { --mia-h: min(27vh, 240px); }
  body.live:not(.at-start) #mia { bottom: calc(var(--dock-b) + 62px); }
  body.live .refs, body.live .plist, body.live .kpis { grid-template-columns: 1fr; }
  body.typing #d-prev, body.typing #d-next { display: none; }
  body.at-start { --mia-h: min(42vh, 380px); --mia-r: calc(50vw - var(--mia-w) / 2); }
  body.at-start #mia { bottom: calc(100vh - var(--top) - var(--mia-h) - 8px); bottom: calc(100dvh - var(--top) - var(--mia-h) - 8px); }
  #start { align-items: flex-start; padding-top: calc(var(--top) + var(--mia-h) + 8px); }
  #start::after { background: linear-gradient(180deg, rgba(9, 6, 4, 0.2) 0%, var(--bg) 52%); }
  [data-theme="light"] #start::after { background: linear-gradient(180deg, rgba(244, 239, 232, 0.2) 0%, var(--bg) 52%); }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 15px; margin-top: 12px; }
  .hero-cta { margin-top: 22px; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .hero .hint { display: none; }
  .hero-tours { margin-top: 20px; }
  body.live .scene > .inner { padding-bottom: calc(var(--mia-h) + var(--dock-b) + 80px); }
  body, body.at-start, body[data-kind] { --stage-r: 0px; }
  #talk { left: 12px; right: 12px; bottom: calc(var(--dock-b) + 72px); }
  #cap-text { font-size: 15px; padding: 8px 12px; }
  #dock { left: 10px; right: 10px; transform: none; justify-content: space-between; }
  #d-state { min-width: 0; flex: 1; padding: 0 4px; }
  #d-state span { display: none; }
  body.typing #d-form { flex: 1; min-width: 0; }
  #d-q { width: 100%; min-width: 0; }
  #d-prev, #d-next { width: 38px; }
  #privacy-line { left: 10px; right: 10px; width: auto; transform: none; bottom: 2px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #privacy-line.open { white-space: normal; z-index: 40; background: var(--card); color: var(--dim); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule2); bottom: 8px; }
  .panel { left: 8px; right: 8px; width: auto; top: calc(var(--top) + 4px); bottom: calc(var(--dock-b) + 72px); padding: 22px 18px; z-index: 25; }
  .pilot-grid, .facts, .topics, .b-form { grid-template-columns: 1fr; }
  .welcome .tours { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tour { min-height: 116px; padding: 12px; }
  .tour small, .tour .go { display: none; }
  .tour b { font-size: 17px; }
  #pop { left: 10px; right: 10px; top: calc(var(--top) + 6px); width: auto; }
  .planpill .pl-t { display: none; }
  .plancard { left: 10px; right: 10px; width: auto; }
  .plandrop { left: 10px !important; right: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #mia { transition: none; }
  .mic .lvl, .eq i, .dots i, #dock[data-mode="listen"] .mic.on::after { animation: none; }
}

/* =====================================================================================================================
   Keynote-Intro (26.10.2026, nur erster Besuch): Halle als Video, Mia (echter V4-Take) und D-ID-Logo auf der verfolgten
   LED-Wand, Untertitel, danach bleibt die unscharfe Halle als Hintergrund der Startseite. Logik: src/intro.mjs
   ===================================================================================================================== */
#intro-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #090604; pointer-events: none;
  --blur: 0px; --dim: 1; filter: blur(var(--blur)) brightness(var(--dim)); transform-origin: 62% 42%; }
#intro-stage .hall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro-stage .logo { position: absolute; left: 0; top: 0; width: auto; opacity: 0; will-change: transform;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 34px rgba(255, 180, 120, 0.35)); }
#intro-stage .veil { position: absolute; inset: 0; background: #090604; opacity: 0.55; }
body.intro-bg #start { background: transparent; }
body.intro-bg #start::before { display: none; }
/* Während der Keynote keine Verlaufsebene über der Halle; danach dunkelt sie links für die Einladung ab */
#start::after { transition: opacity 0.9s var(--ease); }
body.intro #start::after { opacity: 0; }
#top, .hero { transition: opacity 0.7s var(--ease); }
body.intro #top, body.intro .hero { opacity: 0; pointer-events: none; }
/* Auf der LED-Wand leuchtet Mia wie ein Bildschirm; beim Heraustreten fällt der Look weg (Übergang am #mia-filter) */
#mia.on-wall { filter: brightness(1.07) contrast(1.06) saturate(1.08) drop-shadow(0 0 14px rgba(255, 150, 90, 0.32)); }
#intro-ui { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
#intro-ui .cue { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); width: max-content; max-width: min(880px, 88vw); margin: 0;
  text-align: center; font: 700 clamp(19px, 2vw, 30px)/1.3 var(--display); letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9); opacity: 0; transition: opacity 0.35s var(--ease); }
#intro-ui .cue.on { opacity: 1; }
#intro-ui .ai { position: absolute; top: calc(env(safe-area-inset-top) + 20px); left: var(--pad); font: 700 11px/1 var(--display); letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
#intro-ui button { pointer-events: auto; position: absolute; bottom: calc(env(safe-area-inset-bottom) + 26px); height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(12, 9, 7, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: 700 13px/1 var(--display); letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
#intro-ui button:hover { background: rgba(255, 136, 46, 0.22); border-color: rgba(255, 136, 46, 0.6); }
#intro-ui .skip { right: var(--pad); }
#intro-ui .sound { left: var(--pad); }
#intro-ui .sound.on { border-color: rgba(255, 136, 46, 0.7); }
@media (max-width: 820px) {
  #intro-ui .cue { bottom: calc(env(safe-area-inset-bottom) + 86px); font-size: 18px; }
  #intro-ui button { height: 36px; padding: 0 14px; font-size: 12px; bottom: calc(env(safe-area-inset-bottom) + 22px); }
}