/* JARVIS: links der Kern (dunkel, Blau und Orange), rechts das Lageblatt.
   Das Blatt ist eine durchgehende Fläche: Trennlinien und Abstand gliedern, keine Karten, keine Kacheln, keine Pillen.
   Orange ist der eine Akzent (wo bin ich, was tut JARVIS). Blau sind Verweise und die Haupthandlung.
   Grün, Gelb und Rot stehen nur für einen Zustand (Einordnung, Priorität, Fehler). */
:root {
  --grund: #05080f; --blatt: #0a0f1a; --feld: #070b13; --linie: #18223a; --linie-hell: #2a3854;
  --text: #e8eefb; --text-2: #a5b4d0; --text-3: #7d8cab;
  --blau: #6aa9ff; --orange: #ff8a3d; --orange-schein: rgba(255, 138, 61, .16);
  --gruen: #4fd1a1; --gelb: #f2c261; --rot: #ff7a85;
  --leiste-h: 56px; --rand: clamp(18px, 3vw, 48px);
  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --titel: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--grund); }
body { margin: 0; font: 15px/1.6 var(--schrift); color: var(--text); min-height: 100vh; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1 { font: 600 clamp(26px, 2.5vw, 38px)/1.14 var(--titel); letter-spacing: -.018em; text-wrap: balance; max-width: 24ch; }
h2 { font-size: 15px; font-weight: 600; color: var(--text-2); }
h3 { font-size: 17px; line-height: 1.32; font-weight: 600; text-wrap: balance; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }

/* ---------- Bühne ---------- */
.buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.kern { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 42%, rgba(47, 111, 224, .2), transparent 70%), radial-gradient(40% 34% at 72% 26%, rgba(255, 138, 61, .1), transparent 70%), #03050a; }
.kern-flaeche { all: unset; display: block; min-height: 0; cursor: pointer; position: relative; }
.kern-flaeche:focus-visible { outline: 2px solid var(--blau); outline-offset: -6px; }
#kern-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kern-fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 var(--rand) 14px; justify-items: center; text-align: center; }
.kern-fuss > * { min-width: 0; max-width: 100%; }
.kern-zustand { font-size: 12px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); }
body[data-zustand="hoert"] .kern-zustand, body[data-zustand="denkt"] .kern-zustand { color: var(--orange); }
.kern-text { max-width: 54ch; color: var(--text-2); display: grid; gap: 6px; max-height: 11.5em; overflow-y: auto; }
.kern-text:empty { display: none; }
.kern-text span:last-child:not(.kern-du) { color: var(--text); font-size: 16px; }
.kern-du { color: var(--text-3); font-size: 13.5px; }
.weck-stand { font-size: 13px; color: var(--text-3); max-width: 52ch; }
.weck-stand.fehler { color: #ffc0a0; }
.kern-bedienung { display: grid; gap: 12px; justify-items: center; width: 100%; }
.kern-bedienung[hidden] { display: none; }
.kern-frage { display: flex; gap: 8px; width: min(100%, 560px); }
.kern-frage input { min-width: 0; flex: 1 1 0; }
.kern-wahl { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; width: min(100%, 560px); }
.kern-wahl select { padding: 6px 10px; max-width: 240px; }
.kern-wahl input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; }
.bedienung-knopf { all: unset; cursor: pointer; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px; border-radius: 8px; opacity: .6; transition: opacity .15s ease; }
.bedienung-knopf:hover, .bedienung-knopf:focus-visible, .bedienung-knopf[aria-expanded="true"] { opacity: 1; color: var(--text-2); }
.bedienung-knopf:focus-visible { outline: 2px solid var(--blau); }

/* ---------- Blatt ---------- */
.blatt { min-width: 0; min-height: 100svh; background: var(--blatt); border-left: 1px solid var(--linie); }
.leiste { position: sticky; top: 0; z-index: 20; height: var(--leiste-h); display: flex; align-items: stretch; gap: 20px; padding: 0 var(--rand); background: var(--blatt); border-bottom: 1px solid var(--linie); }
.reiter { display: flex; gap: clamp(14px, 2vw, 28px); min-width: 0; }
.reiter a { display: flex; align-items: center; color: var(--text-3); font-weight: 550; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease; }
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--orange); }
.leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.datum { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.textknopf { all: unset; cursor: pointer; color: var(--blau); font-weight: 550; font-size: 13.5px; }
.textknopf:hover { text-decoration: underline; text-underline-offset: 3px; }
.textknopf:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.textknopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }

main { padding: clamp(26px, 3.4vw, 52px) var(--rand) 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 880px; }
.blattkopf { display: grid; gap: 14px; }
.einleitung { color: var(--text-2); max-width: 62ch; font-size: 16.5px; line-height: 1.55; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.meta > * + *::before { content: "·"; margin-right: 14px; color: var(--linie-hell); }
.lage { color: var(--text-2); max-width: 66ch; }
.lage strong { color: var(--text); font-variant-numeric: tabular-nums; }
.abschnitt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 22px; border-top: 1px solid var(--linie); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.empfehlung { font: 500 19px/1.42 var(--titel); max-width: 44ch; text-wrap: pretty; }
.gedaempft { color: var(--text-2); }
.klein { font-size: 13px; color: var(--text-3); }
.stapel { display: grid; gap: 10px; }
.reihe { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.zwei > .abschnitt { align-content: start; margin-bottom: 30px; }

/* Einordnung und Priorität: ein Punkt und ein Wort, kein Etikett */
.einordnung::before, .punkt { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); margin-right: 7px; vertical-align: 1px; }
.art-bestaetigt::before, .punkt-ok { background: var(--gruen); }
.art-studie::before { background: var(--blau); }
.art-meinung::before, .art-hypothese::before { background: var(--gelb); }
.punkt-fehler { background: var(--rot); }
.prio { font-weight: 650; color: var(--text-2); }
.prio-P1 { color: var(--rot); } .prio-P2 { color: var(--gelb); }
.status-genehmigt { color: var(--gruen); } .status-zurueckgestellt { color: var(--gelb); }

/* Listen: Zeilen mit Trennlinie */
.liste { display: grid; }
.eintrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; border-top: 1px solid var(--linie); }
.liste > .eintrag:first-child, .eintrag.erster { border-top: 0; padding-top: 0; }
.eintrag.nummer { grid-template-columns: 2.2ch minmax(0, 1fr); column-gap: 14px; }
.eintrag.nummer > * { grid-column: 2; }
.eintrag.nummer > .zaehler { grid-column: 1; grid-row: 1 / span 4; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 3px; }
.eintrag p { max-width: 68ch; }
.eintrag.kurz .gedaempft { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.eintrag.kurz { padding: 14px 0; gap: 6px; }
.quellen { font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.beispiele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.beispiele button { all: unset; cursor: pointer; padding: 11px 0; border-top: 1px solid var(--linie); color: var(--text); display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.beispiele button:nth-child(-n+2) { border-top: 0; }
.beispiele button span { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.beispiele button:hover { color: var(--blau); }
.beispiele button:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.beispiele button:active { transform: scale(.985); }

/* Bedienelemente */
.knopf { font: inherit; font-weight: 600; color: #04101f; background: var(--blau); border: 0; border-radius: 8px; padding: 8px 15px; cursor: pointer; white-space: nowrap; transition: transform .15s ease-out, background .15s ease; }
.knopf:hover { background: #8cbdff; } .knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.knopf-leise { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-hell); }
.knopf-leise:hover { background: rgba(255, 255, 255, .05); }
.knopf-rot { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 1px rgba(255, 122, 133, .45); }
.knopf-rot:hover { background: rgba(255, 122, 133, .1); }
.knopf-warm { background: var(--orange); color: #1c0d02; }
.knopf-warm:hover { background: #ffa264; }
input[type="search"], input[type="number"], input[type="text"], input[type="password"], select { font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--linie-hell); border-radius: 8px; padding: 8px 12px; min-width: 0; }
input[type="search"], input[type="text"] { flex: 1 1 240px; }
input[type="password"] { flex: 1 1 280px; }
input[type="number"] { width: 5.5em; }
label.wahl { display: inline-flex; gap: 8px; align-items: center; color: var(--text-2); font-size: 13.5px; }
input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; }

.diff { font: 12.5px/1.5 var(--mono); background: var(--feld); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 0; overflow-x: auto; max-height: 360px; margin: 0; }
.diff span { display: block; padding: 0 14px; white-space: pre; }
.diff .plus { background: rgba(79, 209, 161, .1); color: #a7ecd0; } .diff .minus { background: rgba(255, 122, 133, .1); color: #ffc0c6; } .diff .kopfz { color: var(--text-3); }
details > summary { cursor: pointer; color: var(--blau); font-weight: 550; list-style: none; width: fit-content; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: " +"; color: var(--text-3); }
details[open] > summary::after { content: " −"; }
details[open] > summary { margin-bottom: 10px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th { text-align: left; color: var(--text-3); font-weight: 550; padding: 0 12px 8px 0; border-bottom: 1px solid var(--linie-hell); white-space: nowrap; }
.tabelle td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle-huelle { overflow-x: auto; }
.protokoll { font: 12.5px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; margin: 0; }
.leer { padding: 40px 0; color: var(--text-2); display: grid; gap: 12px; justify-items: start; }
.lexikon { display: grid; gap: 8px; }
.lexikon-zeile { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; font-size: 14px; }
.angaben dt { color: var(--text-3); } .angaben dd { margin: 0; overflow-wrap: anywhere; }

/* Spieler (in der eingeklappten Bedienung links) */
.spieler { display: flex; align-items: center; gap: 14px; width: min(100%, 560px); padding: 12px 14px; border: 1px solid var(--linie-hell); border-radius: 12px; background: rgba(13, 20, 34, .7); text-align: left; }
.spieler[hidden] { display: none; }
.spiel-knopf { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--blau); display: grid; place-items: center; transition: transform .15s ease-out; }
.spiel-knopf:active { transform: scale(.97); }
.sp-symbol { width: 0; height: 0; border-left: 14px solid #04101f; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.spielt .sp-symbol { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, #04101f 0 36%, transparent 36% 64%, #04101f 64%); }
.spieler-mitte { flex: 1; min-width: 0; display: grid; gap: 6px; }
.spieler-zeile { display: flex; gap: 10px; align-items: center; }
.spieler-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-hinweis { font-size: 11px; color: var(--text-3); flex: none; }
.spieler-zeit { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.kapitel-leiste { display: flex; gap: 4px; }
.kapitel-leiste button { flex: 1; height: 5px; padding: 0; border: 0; border-radius: 99px; background: var(--linie-hell); cursor: pointer; position: relative; }
.kapitel-leiste button::after { content: ""; position: absolute; inset: -9px 0; }
.kapitel-leiste button.fertig { background: #2f6fe0; } .kapitel-leiste button.aktiv { background: var(--blau); }
.spieler-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.spieler-rechts .knopf { padding: 7px 11px; min-width: 38px; }
.laut { width: 70px; accent-color: var(--blau); }

.meldung { position: fixed; left: 75%; transform: translateX(-50%); bottom: 22px; z-index: 40; background: #121b2d; border: 1px solid var(--linie-hell); border-radius: 10px; padding: 10px 16px; max-width: min(92vw, 520px); box-shadow: 0 18px 50px -20px #000; }
.meldung.fehler { border-color: rgba(255, 122, 133, .6); color: #ffd3d7; }

/* Breitbild: das Blatt nutzt die Breite mit zwei Spalten in den Listen der Übersicht */
@media (min-width: 2100px) { main { max-width: 1180px; } }

@media (max-width: 1100px) {
  .buehne { grid-template-columns: minmax(0, 1fr); }
  .kern { position: relative; height: auto; grid-template-rows: clamp(230px, 38svh, 340px) auto; }
  .blatt { border-left: 0; border-top: 1px solid var(--linie); min-height: 0; }
  .meldung { left: 50%; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .leiste { height: 44px; }
  .leiste-rechts { margin-left: 0; width: 100%; justify-content: space-between; }
  .reiter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; gap: 0; justify-content: space-around; padding: 0 6px env(safe-area-inset-bottom); height: calc(56px + env(safe-area-inset-bottom)); background: var(--blatt); border-top: 1px solid var(--linie); }
  .reiter a { flex: 1; justify-content: center; font-size: 13px; border-bottom: 0; border-top: 2px solid transparent; margin: -1px 0 0; }
  .reiter a[aria-current="page"] { border-top-color: var(--orange); }
  main { gap: 26px; padding-bottom: 40px; }
  h3 { font-size: 16px; }
  .empfehlung { font-size: 17px; }
  .beispiele { gap: 0 16px; }
  .beispiele button { flex-direction: column; gap: 2px; }
  .zwei { gap: 0 18px; }
  .meldung { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .laut { display: none; }
  .spieler-rechts { gap: 6px; } .spieler-rechts .knopf { padding: 7px 10px; min-width: 36px; }
  .kern-fuss { gap: 10px; }
}
@media (max-width: 520px) { .zwei { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Aufträge: laufender Zustand als ruhig pulsierender Punkt, Zahl der offenen Aufträge am Reiter */
.punkt-laeuft { background: var(--orange); animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .punkt-laeuft { animation: none; } }
.reiter .zahl { margin-left: 6px; font-size: 12px; font-weight: 650; color: var(--orange); font-variant-numeric: tabular-nums; }
.abschnitt > input[type="text"] { width: 100%; box-sizing: border-box; }
[hidden] { display: none !important; }
@media (max-width: 720px) { .reiter a { font-size: 12px; } }
.punkt-wartet { background: var(--orange); }

/* ---------- Anmeldung ---------- */
.mono { font-family: var(--mono); letter-spacing: .08em; font-size: 17px; color: var(--orange); user-select: all; }
.liste-klein { font-size: 13px; color: var(--text-3); display: grid; gap: 2px; }
.tor { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: var(--rand); background: radial-gradient(60vmax 60vmax at 50% 20%, #0c1626 0%, var(--grund) 70%); }
.tor-blatt { width: min(100%, 380px); display: grid; gap: 14px; }
.tor-blatt h1 { letter-spacing: .12em; }
.tor-marke { border-radius: 14px; }
.tor-form { display: grid; gap: 8px; margin-top: 10px; }
.tor-form label { font-size: 13px; color: var(--text-2); margin-top: 6px; display: block; }
.tor-form input { width: 100%; padding: 11px 12px; font-size: 16px; }
.tor-form #code { font-family: var(--mono); letter-spacing: .3em; }
.tor-form .knopf { margin-top: 12px; padding: 11px 15px; }
.tor-meldung { min-height: 1.6em; color: var(--rot); font-size: 14px; }