:root {
  --grund: #0b0e13;
  --flaeche: #121720;
  --flaeche-2: #18202b;
  --rand: #243041;
  --text: #d9e1ea;
  --text-zart: #8794a5;
  --akzent: #e8a33d;      /* Bernstein: Signal, Uhr */
  --gefahr: #ef6b5b;
  --gut: #7ccf8a;
  --claude: #d9a17f;
  --term-grund: #0d1117;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.45 var(--sans);
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
code, kbd, pre { font-family: var(--mono); }
code { background: #ffffff12; padding: 0 .3em; border-radius: 4px; font-size: .92em; color: #f3d9a4; }
kbd { border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; font-size: .85em; }
button { font: inherit; color: inherit; cursor: pointer; }

/* --- Kopf ------------------------------------------------------------------------------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--rand); background: var(--flaeche);
}
.titel { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.marke { font: 700 13px var(--mono); letter-spacing: .14em; color: var(--grund); background: var(--akzent); padding: 2px 7px; border-radius: 3px; }
.akt { font-weight: 600; }
.kapitel { color: var(--text-zart); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uhren { display: flex; gap: 22px; font-family: var(--mono); }
.uhren > div { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.uhren .label { font: 11px var(--sans); color: var(--text-zart); text-transform: uppercase; letter-spacing: .06em; }
#uhr { font-size: 20px; color: var(--akzent); font-variant-numeric: tabular-nums; }
.uhr .zone { font-size: 10px; color: var(--text-zart); }
#frist { font-size: 20px; color: var(--gefahr); font-variant-numeric: tabular-nums; }

.leiste { position: relative; height: 6px; background: var(--flaeche-2); }
.fortschritt { height: 100%; background: linear-gradient(90deg, #a8742a, var(--akzent)); width: 0; transition: width .6s ease; }
.marke-kapitel {
  position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  border: 2px solid var(--grund); background: var(--rand); padding: 0;
}
.marke-kapitel:hover, .marke-kapitel.aktiv { background: var(--akzent); }

/* --- Bühne -------------------------------------------------------------------------------- */
.buehne {
  display: grid; grid-template-columns: minmax(0, 1fr) 14px var(--seite, 380px);
  padding: 14px; min-height: 0;
}
body.ohne-seite .buehne { grid-template-columns: minmax(0, 1fr); }
body.ohne-seite .seite, body.ohne-seite .trenner-v { display: none; }

/* Trenner zum Ziehen */
.trenner { position: relative; touch-action: none; outline: none; }
.trenner[hidden] { display: none; }
.trenner::after { content: ""; position: absolute; border-radius: 3px; background: var(--rand); opacity: 0; transition: opacity .15s; }
.trenner:hover::after, .trenner:focus-visible::after, body.zieht .trenner::after { opacity: 1; background: var(--akzent); }
.trenner-v { cursor: col-resize; }
.trenner-v::after { left: 5px; width: 4px; top: 30%; bottom: 30%; }
.trenner-h { flex: none; height: 14px; cursor: row-resize; margin: -7px 0; z-index: 1; }
.trenner-h::after { top: 5px; height: 4px; left: 30%; right: 30%; }
body.zieht { user-select: none; cursor: grabbing; }
body.zieht .terminal, body.zieht canvas { pointer-events: none; }
.fenster { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fenster-kopf { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--rand); background: var(--flaeche-2); font-size: 12.5px; color: var(--text-zart); }
.ampel { display: flex; gap: 6px; }
.ampel i { width: 11px; height: 11px; border-radius: 50%; background: #3a4555; }
.ampel i:nth-child(1) { background: #c2554a; } .ampel i:nth-child(2) { background: #c9a03e; } .ampel i:nth-child(3) { background: #5c9e5f; }
.fenster-titel { flex: 1; text-align: center; font-family: var(--mono); }

/* Das Terminal ist dieselbe Konsole wie im letzten Bild des Einstiegsvideos: alle Maße in Pixeln des
   1920×1080-Videobilds mal --s. Im Spiel ist --s = 0.375 (Schrift 15 px); am Ende des Videos liegt das
   Fenster mit der Skalierung des Videos deckungsgleich darüber und schrumpft dann an seinen Platz. */
@property --s { syntax: "<number>"; inherits: true; initial-value: 0.375; }
.terminal-fenster { --s: .375; --term-text: rgb(225, 230, 235); min-height: 0; background: var(--term-grund); }
.terminal-fenster .fenster-kopf { position: relative; flex: none; height: calc(56px * var(--s)); padding: 0; border-bottom: 0; background: #24272e; }
.terminal-fenster .ampel { position: absolute; left: calc(24px * var(--s)); top: calc(16px * var(--s)); gap: calc(12px * var(--s)); }
.terminal-fenster .ampel i { width: calc(24px * var(--s)); height: calc(24px * var(--s)); }
.terminal-fenster .ampel i:nth-child(1) { background: #ff5f56; }
.terminal-fenster .ampel i:nth-child(2) { background: #ffbd2e; }
.terminal-fenster .ampel i:nth-child(3) { background: #27c93f; }
.terminal-fenster .fenster-titel { position: absolute; left: 34.375%; top: calc(14px * var(--s)); font: calc(26px * var(--s))/1 Menlo, var(--mono); color: rgb(150, 160, 170); white-space: nowrap; }
.terminal-fenster .terminal { --term-grund: #101216; position: relative; flex: 1; min-height: 0; background: var(--term-grund); cursor: text; }
.term-scroll { position: absolute; inset: 0; overflow-y: auto; padding: calc(48px * var(--s)) calc(40px * var(--s)) calc(30px * var(--s)) calc(70px * var(--s)); }
.term-ausgabe, .term-zeile { margin: 0; font: calc(40px * var(--s))/calc(58px * var(--s)) Menlo, var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--term-text); }
.term-eingabe { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; }
/* Blockcursor wie im Video: 22×44 Videopixel, 2 px eingerückt, hinter dem Zeichen */
.term-zeile { position: relative; z-index: 0; }
.cursor { position: relative; color: var(--term-grund); }
.cursor::before { content: ""; position: absolute; z-index: -1; left: calc(2px * var(--s)); top: calc(6px * var(--s)); width: calc(22px * var(--s)); height: calc(44px * var(--s)); background: var(--term-text); }
.terminal:not(.fokus) .cursor { color: inherit; }
.terminal:not(.fokus) .cursor::before { background: none; box-shadow: inset 0 0 0 1px #9aa7b7; }
.terminal.fokus .cursor, .terminal.intro .cursor { animation: blinken-zeichen 1s steps(1) infinite; }
.terminal.fokus .cursor::before, .terminal.intro .cursor::before { animation: blinken 1s steps(1) infinite; }
.terminal.intro .cursor { color: var(--term-grund); animation-delay: var(--blink, 0s); }
.terminal.intro .cursor::before { background: var(--term-text); box-shadow: none; animation-delay: var(--blink, 0s); }
.terminal[data-besitzer="claude"]:not(.intro) .cursor { color: var(--term-grund); animation: none; }
.terminal[data-besitzer="claude"]:not(.intro) .cursor::before { background: var(--claude); box-shadow: none; animation: none; }
@keyframes blinken { 50% { opacity: 0; } }
@keyframes blinken-zeichen { 50% { color: var(--term-text); } }

/* --- Einstiegsvideo ------------------------------------------------------------------------ */
.intro-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 30; }
.intro-video[hidden], .intro-rot[hidden] { display: none; }
.intro-video.zwischen { transition: opacity .35s; }
.intro-video.aus { opacity: 0; }

/* --- Textuelle Zwischensequenz (Platzhalter für Videos) --- */
.text-cutscene {
  display: flex; align-items: center; justify-content: center;
  background: #000; z-index: 35; padding: 40px; box-sizing: border-box;
}
.tc-container {
  max-width: 860px; width: 100%; border: 1px solid #333; background: #080808;
  border-radius: 12px; padding: 36px 44px; box-shadow: 0 0 40px rgba(0,0,0,0.9);
  display: flex; flex-direction: column; gap: 20px; font-family: var(--sans);
}
.tc-header { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #222; padding-bottom: 16px; }
.tc-badge { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.tc-titel { margin: 0; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.tc-body { font-size: 17px; line-height: 1.65; color: #ccc; white-space: pre-wrap; }
.tc-footer { margin-top: 12px; display: flex; justify-content: flex-end; }
.tc-weiter {
  background: var(--akzent); color: #1a1205; border: none; border-radius: 8px;
  padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s, filter .1s;
}
.tc-weiter:hover { filter: brightness(1.15); transform: translateY(-1px); }
.terminal-platz { min-height: 0; }
.terminal-fenster.vollbild { position: fixed; z-index: 20; margin: 0; border: 0; border-radius: 0; }
.terminal-fenster.landet { transition: left 1.3s, top 1.3s, width 1.3s, height 1.3s, --s 1.3s, border-radius 1.3s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }
/* roter Schein der blinkenden Notfall-Lampe, wie ihn das Video zuletzt über die Konsole legt (rechts stärker) */
.intro-rot { position: fixed; z-index: 25; pointer-events: none; transition: opacity 1.2s; }
.intro-rot.weg { opacity: 0; }
.intro-rot::before { content: ""; position: absolute; inset: 0; opacity: 0; animation: lampe .66s linear infinite; animation-delay: var(--phase, 0s);
  background: linear-gradient(90deg, #ff1e1400 0%, #ff1e1404 25%, #ff1e140e 50%, #ff1e141a 75%, #ff1e1429 100%); }
@keyframes lampe { 0% { opacity: 0; } 7.6% { opacity: 1; } 42.4% { opacity: 1; } 54.5% { opacity: 0; } 100% { opacity: 0; } }
/* Während des Videos ist vom Spiel nur das Terminal da; der Rest blendet danach ein */
.kopf, .leiste, .seite, .trenner-v { transition: opacity .9s ease .35s; }
body.intro .kopf, body.intro .leiste, body.intro .seite, body.intro .trenner-v { opacity: 0; pointer-events: none; transition: none; }

.seite { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }

/* --- Videoanruf --------------------------------------------------------------------------- */
.anruf { background: #000; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; position: relative; flex: none; display: flex; flex-direction: column; }
.anruf[hidden] { display: none; }
/* Feste Höhe statt aspect-ratio: Safari rechnet quadratische Kästen in Flex-Spalten sonst zu groß */
.anruf-bild { position: relative; flex: none; height: var(--video, 320px); background: #000; }
.anruf canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
body.ohne-notizen .anruf { flex: 1 1 auto; min-height: 0; }
body.ohne-notizen .anruf-bild { flex: 1 1 auto; height: auto; min-height: 120px; }
.anruf-cc { position: absolute; top: 10px; right: 10px; font: 700 11px var(--mono); background: #0009; color: #fff; border: 1px solid #ffffff55; border-radius: 5px; padding: 2px 6px; }
.anruf-cc[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.anruf.ohne-untertitel .anruf-untertitel { display: none; }
.anruf-live { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; font: 12px var(--mono); background: #0009; padding: 2px 8px; border-radius: 10px; }
.anruf-live .punkt { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: puls 1.6s infinite; }
@keyframes puls { 50% { opacity: .35; } }
.anruf-untertitel, .anruf-cc { display: none !important; }
.anruf-untertitel-alt { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #000b; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; }
.anruf-untertitel[hidden] { display: none; }
.anruf-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--flaeche-2); }
.anruf-name { font-weight: 600; }
.anruf-rolle { font-size: 12px; color: var(--text-zart); }
.anruf-klingeln { display: none; }
.anruf[data-zustand="klingelt"] .anruf-bild, .anruf[data-zustand="klingelt"] .anruf-kopf { display: none; }
.anruf[data-zustand="klingelt"] .anruf-klingeln {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 22px;
  background: radial-gradient(circle at 50% 30%, #23324a, #0c1118 70%);
}
.anruf-portraet { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0 #7ccf8a88; animation: klingeln 1.4s infinite; }
@keyframes klingeln { 0% { box-shadow: 0 0 0 0 #7ccf8a88; } 100% { box-shadow: 0 0 0 26px #7ccf8a00; } }
.anruf-wer { font-size: 18px; font-weight: 600; }
.anruf-hinweis { color: var(--text-zart); font-size: 13px; }
.annehmen { background: #2f9e55; border: 0; color: #fff; padding: 9px 20px; border-radius: 22px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.annehmen:hover { background: #38b463; }
.annehmen kbd { border-color: #ffffff66; }
.anruf[data-zustand="aufgelegt"] { opacity: .35; transition: opacity .8s; }

/* --- Notizblock --------------------------------------------------------------------------- */
.notizblock { flex: 1 1 auto; min-height: 120px; }
.notizblock[hidden] { display: none; }
.fenster-zu { flex: none !important; background: none; border: 0; color: var(--text-zart); font-size: 18px; padding: 0 12px; line-height: 1; }
.fenster-zu:hover { color: var(--text); }
.reiter { padding: 0; gap: 0; }
.reiter button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 8px; color: var(--text-zart); font-size: 13px; }
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }
.reiter-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.reiter-inhalt[hidden] { display: none; }
.spickzettel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.spickzettel li { border-left: 2px solid var(--rand); padding-left: 10px; font-size: 13px; }
.sz-titel { color: var(--akzent); margin-bottom: 3px; }
.sz-code { margin: 0 0 3px; font-size: 12px; white-space: pre-wrap; word-break: break-all; color: #f3d9a4; }
.sz-text { color: var(--text-zart); }
.leer { color: var(--text-zart); font-size: 13px; margin: 0; }
#meine-notizen { width: 100%; height: 100%; min-height: 140px; resize: none; background: transparent; color: var(--text); border: 0; font: 13px/1.5 var(--mono); outline: none; }

/* --- Untertitel: wie im Film unten über allem ------------------------------------------- */
.untertitel {
  position: fixed; left: 50%; bottom: 5vh; transform: translate(-50%, 6px); z-index: 15; max-width: min(82ch, calc(100% - 48px));
  padding: 8px 16px 9px; border-radius: 6px; background: #000000b8; color: #fff; font: 500 19px/1.4 var(--sans);
  text-align: center; text-shadow: 0 1px 2px #000; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s;
}
.untertitel.an { opacity: 1; transform: translate(-50%, 0); }
body.ohne-untertitel .untertitel { display: none; }
.ut-wer { font-weight: 700; margin-right: .45em; color: #8fb8f5; }
.untertitel[data-figur="brandt"] .ut-wer { color: #8fb8f5; }
.untertitel[data-figur="hannelore"] .ut-wer { color: #e7b46a; }
.untertitel[data-figur="kai"] .ut-wer { color: #8fdcb4; }
.untertitel[data-figur="cortex"] .ut-wer { color: #7ff3ff; font-family: "Orbitron", var(--sans); letter-spacing: .12em; text-shadow: 0 0 8px #7ff3ff66; }
.untertitel[data-figur="cortex"] .ut-text { color: #c8fbff; font-family: "Oxanium", var(--sans); }
.untertitel[data-figur="ich"] .ut-text { font-style: italic; color: #e9ecef; } /* Gedanken der Hauptfigur */
.untertitel code, .auftrag code { white-space: nowrap; }
.untertitel code { background: #ffffff22; color: #fff; }

/* --- Hinweis während eines Videos: Pause und Überspringen ---------------------------------- */
.film-hinweis { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 36;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px; pointer-events: none; opacity: 0; transition: opacity .35s;
  font: 600 13px var(--sans); letter-spacing: .02em; color: #e9ecef; text-shadow: 0 1px 3px #000; }
.film-hinweis.an { opacity: .92; }
.film-balken { position: relative; width: 168px; height: 4px; border-radius: 2px; background: #ffffff38; overflow: hidden; }
.film-balken i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--akzent); }
body.film .untertitel { z-index: 36; } /* Untertitel auch über dem Video */

/* --- Dialog-Auswahl: was die Hauptfigur antwortet (Spiel-Oberfläche, nicht Terminal) --------- */
.auswahl { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 16; width: min(640px, calc(100% - 32px));
  padding: 14px 14px 10px; border-radius: 12px; background: #070b12e8; border: 1px solid #ffffff1f; box-shadow: 0 20px 60px #000c;
  font-family: var(--sans); animation: auswahl-ein .22s ease; }
.auswahl[hidden] { display: none; }
@keyframes auswahl-ein { from { opacity: 0; transform: translate(-50%, 8px); } }
.auswahl-kopf { font: 700 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); margin: 0 0 8px 6px; }
.auswahl-liste { display: flex; flex-direction: column; gap: 3px; }
.auswahl-liste button { display: flex; align-items: baseline; gap: 12px; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 9px 12px; color: #d5dbe4; font: 500 17.5px/1.35 var(--sans); }
.auswahl-liste button:hover, .auswahl-liste button.markiert { background: #ffffff12; color: #fff; }
.auswahl-nr { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #ffffff14; color: var(--akzent); font: 700 13px var(--sans); }
.auswahl-liste button.markiert .auswahl-nr { background: var(--akzent); color: #1a1205; }
.auswahl-liste button.gesperrt { opacity: 0.45; cursor: not-allowed; }
.auswahl-liste button.gesperrt:hover { background: none; color: #d5dbe4; }
.auswahl-liste button.freigeschaltet { animation: unlock-glow 1.2s ease-out; }
@keyframes unlock-glow {
  0% { background: #38bdf833; box-shadow: 0 0 16px #38bdf866; }
  100% { background: none; box-shadow: none; }
}
.auswahl-liste code { white-space: nowrap; }
.auswahl-fuss { margin: 8px 6px 0; font-size: 12px; color: #7d8796; }

/* --- Auftrag-Karte in der Seitenleiste ---------------------------------------------------- */
.auftrag { flex: none; padding: 10px 14px 12px; border: 1px solid #e8a33d66; background: #1d1810; border-radius: 10px; }
.auftrag[hidden] { display: none; }
.auftrag-kopf { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 5px; }
.aufgabe-text { font-size: 14px; line-height: 1.45; }
.aufgabe-hilfe { margin-top: 6px; font-size: 12.5px; color: var(--text-zart); }
.zart { color: var(--text-zart); }

.ton-hinweis { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 16; background: #3a2a10; color: #ffd89a; border: 1px solid var(--akzent); border-radius: 20px; padding: 7px 16px; font-size: 14px; }
.ton-hinweis[hidden] { display: none; }

/* --- Spielmenü: bewusst nicht im Stil des Terminals ---------------------------------------- */
.menue-knopf { margin-left: 6px; align-self: center; background: none; border: 1px solid var(--rand); border-radius: 7px; padding: 5px 11px; color: var(--text-zart); font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.menue-knopf:hover { color: var(--text); border-color: var(--text-zart); }
.menue { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #0b1220cc, #000000ee 75%); backdrop-filter: blur(6px) saturate(.6); animation: menue-ein .2s ease; }
.menue[hidden] { display: none; }
@keyframes menue-ein { from { opacity: 0; } }
.menue-karte { width: min(440px, 100%); font-family: var(--sans); color: #f2f4f7; }
.menue-marke { font: 700 12px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--akzent); margin-bottom: 6px; }
.menue h2 { margin: 0 0 22px; font: 800 44px/1 var(--sans); letter-spacing: -.01em; text-transform: uppercase; }
.menue-seite[hidden] { display: none; }
.menue-liste { display: flex; flex-direction: column; gap: 4px; }
.menue-liste button { position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 11px 16px 11px 20px; font: 600 21px var(--sans); color: #c9d1dc; transition: background .12s, color .12s, padding .12s; }
.menue-liste button::before { content: ""; position: absolute; left: 4px; top: 22%; bottom: 22%; width: 4px; border-radius: 2px; background: var(--akzent); opacity: 0; transition: opacity .12s; }
.menue-liste button:hover, .menue-liste button:focus-visible { background: #ffffff10; color: #fff; padding-left: 26px; outline: none; }
.menue-liste button:hover::before, .menue-liste button:focus-visible::before { opacity: 1; }
.menue-liste button.aktuell { color: var(--akzent); }
.menue-liste button[hidden] { display: none; }
.menue-nr { font-size: 14px; color: #7d8796; min-width: 1.2em; }
.menue-schalter { justify-content: space-between; }
.menue-schalter span { font-size: 15px; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .06em; }
.menue-reihe { display: flex; gap: 8px; margin-top: 14px; }
.menue-klein, .menue-zurueck { background: #ffffff0d; border: 1px solid #ffffff22; border-radius: 8px; padding: 8px 14px; color: #c9d1dc; font: 600 14px var(--sans); }
.menue-klein:hover, .menue-zurueck:hover, .menue-klein:focus-visible, .menue-zurueck:focus-visible { background: #ffffff1c; color: #fff; outline: none; }
.menue-zurueck { margin-top: 18px; }
.menue-text { margin: -8px 0 18px; color: #aab3c0; font-size: 15px; line-height: 1.5; }
.menue-fuss { margin-top: 28px; font-size: 12.5px; color: #7d8796; }
.menue-fuss kbd { color: #c9d1dc; border-color: #ffffff33; }

/* --- Start und Ende ----------------------------------------------------------------------- */
.start { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 20%, #1b2533ee, #07090ccc 70%); backdrop-filter: blur(3px); z-index: 10; transition: opacity .45s; }
.start.weg { opacity: 0; pointer-events: none; }
.start-karte, .ende-karte { max-width: 560px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; padding: 28px 30px; box-shadow: 0 30px 80px #0008; }
.start-marke { display: inline-block; font: 700 12px var(--mono); letter-spacing: .16em; color: var(--grund); background: var(--akzent); padding: 2px 8px; border-radius: 3px; text-transform: uppercase; }
.start h1 { margin: 12px 0 6px; font-size: 30px; }
.start-unter { color: var(--text-zart); margin: 0 0 16px; }
.start-hinweise { padding-left: 18px; margin: 0 0 22px; font-size: 14px; display: grid; gap: 6px; }
.start-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.gross { background: var(--akzent); color: #1a1205; border: 0; border-radius: 9px; padding: 11px 22px; font-weight: 700; font-size: 16px; }
.gross:hover { filter: brightness(1.08); }
.zart { background: none; }
button.zart { border: 1px solid var(--rand); border-radius: 9px; padding: 10px 16px; color: var(--text); }
.ende-karte { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 9; width: calc(100% - 32px); }
.ende-karte[hidden] { display: none; }
.ende-karte p { margin: 12px 0 18px; }
.ladefehler { position: fixed; inset: auto 16px 16px; background: #3a1714; border: 1px solid var(--gefahr); padding: 12px 16px; border-radius: 8px; z-index: 20; }

/* --- Schmal (Handy, schmale Fenster) ------------------------------------------------------ */
@media (max-width: 860px) {
  body { overflow: auto; grid-template-rows: auto auto auto; }
  .buehne, body.ohne-seite .buehne { grid-template-columns: 1fr; padding: 10px 16px; gap: 14px; }
  .trenner { display: none !important; }
  .anruf-bild { height: auto; aspect-ratio: 1; }
  .anruf-cc { display: none; }
  .terminal-fenster, .terminal-platz { height: 58vh; }
  /* Videoanruf als kleines Bild im Bild über dem Terminal; der Text steht im Coach */
  .anruf { position: fixed; top: 112px; right: 16px; width: 136px; z-index: 6; box-shadow: 0 10px 30px #000a; }
  .anruf[data-zustand="klingelt"] { width: 230px; }
  .anruf-untertitel, .anruf-rolle, .anruf-hinweis { display: none !important; }
  .anruf-kopf { padding: 4px 8px; font-size: 12px; }
  .anruf-portraet { width: 96px; height: 96px; }
  .anruf[data-zustand="klingelt"] .anruf-klingeln { padding: 16px 10px; }
  .fenster-titel { visibility: hidden; }
  .uhren .label { font-size: 9.5px; }
  .untertitel { font-size: 16px; bottom: 3vh; }
  .menue h2 { font-size: 34px; }
  .uhren { gap: 12px; }
  #uhr, #frist { font-size: 16px; }
  .kapitel { display: none; }
}

/* --- KI-Datenbrille (js/brille.js): Blick durch die Gläser, Boot-Hologramm, HUD ------------------- */
.brille { position: fixed; inset: 0; z-index: 14; pointer-events: none; --holo: #7ff3ff; --holo-zart: #7ff3ff59; --sperre: #ff5a4f;
  --holo-schrift: "Oxanium", "Eurostile", "Bank Gothic", var(--sans); --holo-titel: "Orbitron", "Oxanium", var(--sans); }
.brille[hidden] { display: none; }
.brille-look, .brille-hud { position: absolute; inset: 0; }
/* Look wie werkzeuge des Kurses (intro/werkstatt/brillen_look.py): Petrol-Tönung, dunkle Ränder, Gestell oben, Reflex */
.brille-look { opacity: 0; transition: opacity 1.1s;
  background: radial-gradient(ellipse 72% 78% at 50% 50%, transparent 58%, #02060acc 100%), #08b4c214; mix-blend-mode: normal; }
.brille.look .brille-look { opacity: 1; }
.brille.sofort .brille-look { transition: none; }
.brille-rand { position: absolute; inset: -4% -2% auto; height: 9%; background: radial-gradient(ellipse 60% 100% at 25% 0, #000c, transparent 70%), radial-gradient(ellipse 60% 100% at 75% 0, #000c, transparent 70%); filter: blur(10px); }
.brille-reflex { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, #ffffff0d 46%, transparent 52%); }
.brille.absetzen .brille-look { opacity: 0; transform: scale(1.25); transition: opacity .9s, transform .9s ease-in; }

.brille-hud { font: 500 14px/1.4 var(--holo-schrift); letter-spacing: .04em; color: var(--holo); text-shadow: 0 0 6px var(--holo-zart), 0 0 14px #2fd4ff33; }
.brille-hud > div { position: absolute; opacity: 0; transition: opacity .35s, transform .45s; }
.brille.abschalten .brille-hud { animation: holo-aus .7s forwards; }
@keyframes holo-aus { 0% { opacity: 1; filter: none; } 30% { opacity: .4; } 45% { opacity: 1; transform: scaleY(.6); } 100% { opacity: 0; transform: scaleY(.02); filter: brightness(2); } }
@keyframes holo-flackern { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 50% { opacity: 1; } 83% { opacity: .85; } }

/* Statusleiste oben */
.brille-status { top: 18px; left: 50%; transform: translate(-50%, -10px); display: flex; gap: 24px; padding: 5px 16px; border: 1px solid var(--holo-zart); border-radius: 3px;
  background: #062a3366; font: 500 11px var(--holo-titel); letter-spacing: .12em; white-space: nowrap; }
.brille.statusleiste .brille-status { opacity: .92; transform: translate(-50%, 0); animation: holo-flackern 7s infinite; }
.brille-uhr { color: #c8fbff; }
.brille.spricht .brille-status { animation: spricht 1.1s ease-in-out infinite; }
@keyframes spricht { 50% { box-shadow: 0 0 18px #7ff3ff88, inset 0 0 12px #7ff3ff33; border-color: var(--holo); } }
.brille-status { max-width: calc(100% - 24px); overflow: hidden; }
.brille-os { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .brille-status { font-size: 10px; gap: 12px; padding: 4px 10px; } .brille-holo { gap: 14px; padding: 16px; } .brille-ringe { width: 70px; } }

/* Boot-Hologramm in der Mitte */
.brille-holo { left: 50%; top: 44%; transform: translate(-50%, -50%) perspective(800px) rotateX(8deg) scale(.6); display: flex; gap: 22px; align-items: center;
  padding: 22px 28px; min-width: min(560px, 90vw); border: 1px solid var(--holo-zart); border-radius: 6px;
  background: repeating-linear-gradient(0deg, #7ff3ff0a 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 30%, #0b4b5a88, #031a2277); box-shadow: 0 0 30px #2fd4ff22 inset, 0 0 40px #2fd4ff1a; }
.brille.boot .brille-holo { opacity: .95; transform: translate(-50%, -50%) perspective(800px) rotateX(8deg) scale(1); animation: holo-flackern 3s infinite; }
.brille.statusleiste .brille-holo { opacity: 0; transform: translate(-50%, -260%) scale(.3); transition: opacity .5s, transform .6s ease-in; }
.brille-ringe { width: 110px; flex: none; }
.brille-ringe circle, .brille-ringe path { fill: none; stroke: var(--holo); stroke-width: 1.2; filter: drop-shadow(0 0 3px var(--holo)); }
.brille-ringe .r1 { stroke-dasharray: 40 12; transform-origin: 60px 60px; }
.brille-ringe .r2 { stroke-dasharray: 8 6; stroke-width: 2; opacity: .7; transform-origin: 60px 60px; }
.brille-ringe .r3 { stroke-dasharray: 210; stroke-dashoffset: 210; }
.brille-ringe .kern { stroke-dasharray: 140; stroke-dashoffset: 140; }
.brille.boot .brille-ringe .r1 { animation: drehen 6s linear infinite; }
.brille.boot .brille-ringe .r2 { animation: drehen 3.5s linear infinite reverse; }
.brille.boot .brille-ringe .r3 { animation: zeichnen 1.2s .2s ease-out forwards; }
.brille.boot .brille-ringe .kern { animation: zeichnen 1s .7s ease-out forwards; }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.brille-holo-text { flex: 1; min-width: 0; }
.brille-logo { font: 700 21px/1.2 var(--holo-titel); letter-spacing: .28em; color: #d6fdff; margin-bottom: 10px; }
.brille-logo span { font: 500 11px var(--holo-titel); letter-spacing: .12em; color: var(--holo); }
.brille-zeilen { list-style: none; margin: 0 0 10px; padding: 0; min-height: 7.2em; }
.brille-zeilen li { display: flex; justify-content: space-between; gap: 16px; animation: zeile-rein .25s; }
.brille-zeilen li b { font-weight: normal; opacity: 0; color: #b8ffd0; }
.brille-zeilen li.ok b { opacity: 1; }
@keyframes zeile-rein { from { opacity: 0; transform: translateX(-8px); } }
.brille-balken { height: 3px; background: #7ff3ff22; }
.brille-balken i { display: block; height: 100%; width: 0; background: var(--holo); box-shadow: 0 0 8px var(--holo); transition: width .35s; }

/* Blick-Kalibrierung */
.brille-kalib { inset: 0; }
.brille.kalib .brille-kalib { opacity: 1; }
.brille-kalib i { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--holo); transform: translate(-50%, -50%); }
.brille-kalib i:nth-child(1) { left: 18%; top: 22%; } .brille-kalib i:nth-child(2) { left: 82%; top: 22%; } .brille-kalib i:nth-child(3) { left: 50%; top: 80%; }
.brille-kalib i.an { background: var(--holo); box-shadow: 0 0 10px var(--holo); }

/* Fadenkreuz des Eye-Trackings */
.brille-ziel { left: 50%; top: 50%; width: 0; height: 0; transition: left .7s cubic-bezier(.2, .8, .2, 1), top .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.brille.ziel .brille-ziel { opacity: 1; }
.brille-ziel .ring { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border: 1px solid var(--holo); border-radius: 50%; transition: transform .35s, border-color .3s;
  background: linear-gradient(var(--holo), var(--holo)) center / 1px 14px no-repeat, linear-gradient(var(--holo), var(--holo)) center / 14px 1px no-repeat; }
.brille.erfasst .brille-ziel .ring { transform: scale(.55); border-width: 2px; }
.brille-ziel-text { position: absolute; left: 34px; top: -30px; white-space: nowrap; font: 500 10px var(--holo-titel); letter-spacing: .1em; padding: 2px 8px; border-left: 1px solid var(--holo); opacity: 0; transition: opacity .3s; background: #062a3366; }
.brille.erfasst .brille-ziel-text { opacity: 1; }
.brille-ziel.links .brille-ziel-text { left: auto; right: 34px; border-left: 0; border-right: 1px solid var(--holo); }

/* Spracheingabe */
.brille-hoeren { left: 50%; bottom: calc(5vh + 110px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 4px 12px; border: 1px solid var(--holo-zart); border-radius: 20px; background: #062a3366; }
.brille.hoeren .brille-hoeren { opacity: .95; }
.brille-hoeren .welle { display: flex; gap: 2px; align-items: center; height: 16px; }
.brille-hoeren .welle i { width: 2px; height: 30%; background: var(--holo); animation: welle .6s ease-in-out infinite alternate; }
.brille-hoeren .welle i:nth-child(2n) { animation-delay: -.3s; } .brille-hoeren .welle i:nth-child(3n) { animation-delay: -.15s; }
.brille.pruefen .brille-hoeren .welle i { animation: none; height: 15%; }
@keyframes welle { to { height: 100%; } }

/* Lizenz-Sperre */
.brille-sperre { left: 50%; top: 38%; transform: translate(-50%, -50%) scale(1.15); width: min(640px, 88vw); padding: 16px 22px; border: 1px solid var(--sperre); border-radius: 4px; text-align: center;
  color: #ffd6d2; text-shadow: 0 0 8px #ff5a4f99; background: repeating-linear-gradient(-45deg, #ff5a4f14 0 10px, transparent 10px 20px), #3a0b0bcc; box-shadow: 0 0 40px #ff3b2f33, 0 0 0 100vmax #ff2a1a0d; }
.brille.sperre .brille-sperre { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: sperre-ruck .5s; }
.brille.scanner .brille-sperre { opacity: .35; transform: translate(-50%, -50%) scale(.92); }
.brille-sperre-titel { display: block; font: 700 15px/1.35 var(--holo-titel); letter-spacing: .1em; margin-bottom: 8px; color: #fff0ee; }
@keyframes sperre-ruck { 0% { transform: translate(-50%, -50%) scale(1.15); filter: hue-rotate(40deg); } 20% { transform: translate(-51%, -50%) scale(1); } 40% { transform: translate(-49%, -50%); } 60% { transform: translate(-50.5%, -50%); } }

/* Neural-Intent-Scanner */
.brille-scanner { right: 4vw; top: 70px; width: min(380px, 80vw); padding: 10px 12px; border: 1px solid var(--holo-zart); border-radius: 4px; background: #062a3377; transform: translateY(-8px); }
.brille.scanner .brille-scanner { opacity: .95; transform: none; }
.brille-scanner canvas { display: block; width: 100%; height: 70px; }
.brille-scanner-kopf { font: 500 10px var(--holo-titel); letter-spacing: .14em; margin-bottom: 4px; }
.brille-scanner-text { font-size: 12px; min-height: 1em; }
.brille.diskrepanz .brille-scanner { border-color: var(--sperre); color: #ffd6d2; text-shadow: 0 0 8px #ff5a4f99; background: #3a0b0bcc; animation: ruck .5s; }
@keyframes ruck { 0% { filter: hue-rotate(40deg); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }

/* kurzer Blick zur Seite beim Täuschungsversuch */
.brille.blick-weg .brille-hud { transform: translateX(-3vw); transition: transform .6s; }
.brille-hud { transition: transform .6s; }

@media (prefers-reduced-motion: reduce) {
  .brille *, .brille *::before { animation: none !important; transition: none !important; }
}