/* OPERATOR V2 — Grundlage, Gerüst, Bauteile.
   Handy-Regeln stehen am DATEIENDE (sonst gewinnt die Desktop-Regel). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  color: var(--text);
  font: var(--f-basis)/1.5 var(--f);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                    /* nur die Arbeitsfläche scrollt */
  /* Tiefe im Grund: zwei sehr schwache Leuchten, kein Muster. Sie geben dem
     Auge einen Raum, ohne dass irgendetwas blinkt. */
  background:
    radial-gradient(ellipse 1300px 800px at 15% -10%, rgb(from var(--sys) r g b / .07), transparent 62%),
    radial-gradient(ellipse 1100px 900px at 90% 110%, rgb(from var(--brain) r g b / .06), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.weg { display: none !important; }
::selection { background: var(--sys-rand); }

/* Alle Zahlen stehen untereinander — daher kommt die Terminal-Dichte,
   nicht aus Effekten. */
.z { font-family: var(--f-zahl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Bildlauf dezent */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-hell); border-radius: 6px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ══════════════ GERÜST: Kopf · Nav · Fläche · Inspektor ══════════════ */

.huelle {
  display: grid; height: 100dvh;
  grid-template-columns: var(--nav-b) minmax(0, 1fr) 0;
  grid-template-rows: var(--kopf-h) minmax(0, 1fr);
  grid-template-areas: "kopf kopf kopf" "nav flaeche insp";
  transition: grid-template-columns var(--t);
}
.huelle[data-nav="schmal"] { grid-template-columns: var(--nav-b-schmal) minmax(0,1fr) 0; }
.huelle[data-insp="auf"]   { grid-template-columns: var(--nav-b) minmax(0,1fr) var(--insp-b); }
.huelle[data-nav="schmal"][data-insp="auf"] { grid-template-columns: var(--nav-b-schmal) minmax(0,1fr) var(--insp-b); }

/* ── Kopf ── */
.kopf {
  grid-area: kopf; display: flex; align-items: center; gap: var(--a3);
  padding: 0 var(--a3); background: var(--bg-tief);
  border-bottom: 1px solid var(--line); z-index: 30;
}
.marke { display: flex; align-items: center; gap: 9px; width: calc(var(--nav-b) - 24px); flex-shrink: 0; }
.marke b {
  font-size: 16px; font-weight: 800; letter-spacing: .18em;
  text-shadow: 0 0 20px rgb(from var(--sys) r g b / .5);
}
.marke b i {
  color: var(--sys); font-style: normal;
  text-shadow: 0 0 22px rgb(from var(--sys) r g b / .8);
}
.marke .v2 {
  font-size: 8.5px; font-weight: 800; letter-spacing: .12em; padding: 2px 5px;
  border-radius: 4px; background: var(--sys-weich); color: var(--sys); border: 1px solid var(--sys-rand);
}
/* Der Kopf trägt eine leuchtende Kante — die Kommandozentrale beginnt hier. */
.kopf {
  box-shadow: 0 1px 0 rgb(from var(--sys) r g b / .16), 0 6px 26px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #0b0518, var(--bg-tief));
}
/* Karten bekommen eine feine Oberkante — wie Panels in einem Kontrollraum. */
.karte::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(from var(--sys) r g b / .28), transparent);
}
.karte { position: relative; }
.karte.ruft::before { background: linear-gradient(90deg, transparent, rgb(from var(--wait) r g b / .45), transparent); }
.karte.lebt::before { background: linear-gradient(90deg, transparent, rgb(from var(--brain) r g b / .45), transparent); }
.kz .w { text-shadow: 0 0 22px rgb(from var(--sys) r g b / .22); }
.reaktor {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, #cdeaf8 0%, var(--sys) 38%, #16496b 74%, transparent 76%);
  box-shadow: 0 0 11px rgba(74,168,216,.5);
}
.reaktor.pulst { animation: puls 3.4s ease-in-out infinite; }
@keyframes puls { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

/* Suche */
.suche { position: relative; flex: 1; max-width: 480px; }
.suche input {
  width: 100%; height: 32px; padding: 0 var(--a3) 0 32px;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-s);
  color: var(--text); outline: 0;
}
.suche input:focus { border-color: var(--sys-rand); background: var(--s2); }
.suche input::placeholder { color: var(--dim2); }
.suche .lupe { position: absolute; left: 11px; top: 8px; color: var(--dim2); pointer-events: none; }
.suche kbd {
  position: absolute; right: 8px; top: 7px; font-size: 10.5px; padding: 2px 5px;
  border: 1px solid var(--line-hell); border-radius: 4px; color: var(--dim2); font-family: var(--f-zahl);
}

/* Systempuls im Kopf — die Messleiste einer Kommandozentrale.
   Jeder Wert steht in seinem eigenen Feld, getrennt durch eine dünne Linie. */
.puls {
  display: flex; align-items: stretch; margin-left: var(--a2);
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
  background: rgba(18,10,32,.6);
}
.puls-p {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 6px 13px; cursor: default; white-space: nowrap;
  border-right: 1px solid var(--line); position: relative;
}
.puls-p:last-child { border-right: 0; }
.puls-p:hover { background: var(--s2); }
.puls-p .k { font-size: 8.5px; letter-spacing: .13em; color: var(--dim2); text-transform: uppercase; }
.puls-p .w { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }

/* Wellenform im Kopf — gespeist aus echten Ereigniszahlen */
.kopf-welle {
  display: flex; align-items: center; gap: var(--a3); margin-left: auto; margin-right: var(--a2);
  min-width: 0;
}
.kopf-welle canvas { width: 148px; height: 26px; display: block; }
.kopf-welle-text {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--sys);
  white-space: nowrap; text-shadow: 0 0 14px rgb(from var(--sys) r g b / .55);
}
@media (max-width: 1500px) { .kopf-welle { display: none; } }
.pkt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pkt.ok { background: var(--ok); } .pkt.bad { background: var(--bad); }
.pkt.wait { background: var(--wait); } .pkt.idle { background: var(--idle); }
.pkt.sys { background: var(--sys); }
.pkt.lebt { box-shadow: 0 0 0 0 currentColor; animation: pochen 2.6s infinite; color: var(--ok); }
@keyframes pochen { 0% { box-shadow: 0 0 0 0 rgba(63,164,106,.5) } 70% { box-shadow: 0 0 0 6px rgba(63,164,106,0) } 100% { box-shadow: 0 0 0 0 rgba(63,164,106,0) } }

.kopf-knopf {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--s1);
  font-size: 12.5px; font-weight: 600; color: var(--dim); transition: var(--t-schnell);
}
.kopf-knopf:hover { color: var(--text); border-color: var(--line-hell); }
.kopf-knopf.jarvis { border-color: var(--sys-rand); color: var(--sys); background: var(--sys-weich); }
.kopf-knopf .zahl {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; background: var(--wait); color: #16100a; font-family: var(--f-zahl);
}

/* ── Navigation ── */
.nav {
  grid-area: nav; background: var(--bg-tief); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: var(--a3) 9px;
}
.nav-gruppe {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim2); padding: var(--a4) 9px var(--a2);
}
.nav-p {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 9px;
  border-radius: var(--r-s); color: var(--dim); font-weight: 500; white-space: nowrap;
  transition: var(--t-schnell); position: relative;
}
.nav-p:hover { background: var(--s1); color: var(--text); }
.nav-p.an { background: var(--sys-weich); color: var(--sys); }
.nav-p.an::before {
  content: ''; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 2px;
  background: var(--sys); border-radius: 0 2px 2px 0;
}
.nav-p .ico { width: 17px; text-align: center; flex-shrink: 0; opacity: .85; font-size: 13.5px; }
.nav-p .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-p .mrk {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; font-family: var(--f-zahl);
  background: var(--wait); color: #16100a;
}
.nav-fuss { margin-top: auto; padding: var(--a3) 9px 0; border-top: 1px solid var(--line); }
.huelle[data-nav="schmal"] .nav-p .txt,
.huelle[data-nav="schmal"] .nav-gruppe,
.huelle[data-nav="schmal"] .nav-fuss .txt { display: none; }
.huelle[data-nav="schmal"] .nav-gruppe { height: 12px; padding: 0; }
.huelle[data-nav="schmal"] .nav-p { justify-content: center; padding: 0; }
.huelle[data-nav="schmal"] .nav-p .mrk { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; font-size: 10.5px; }

/* ── Arbeitsfläche ── */
.flaeche { grid-area: flaeche; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.blatt { max-width: var(--max-b); margin: 0 auto; padding: var(--a5) var(--a5) var(--a7); }

.titel-zeile { display: flex; align-items: flex-end; gap: var(--a4); margin-bottom: var(--a5); flex-wrap: wrap; }
.titel-zeile h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.titel-zeile .unter { color: var(--dim); font-size: 12.5px; margin-top: 3px; }
.titel-zeile .rechts { margin-left: auto; display: flex; gap: var(--a2); align-items: center; }

/* ── Inspektor ── */
.insp {
  grid-area: insp; background: var(--bg-tief); border-left: 1px solid var(--line);
  overflow: hidden auto; display: flex; flex-direction: column;
}
.huelle:not([data-insp="auf"]) .insp { display: none; }
.insp-kopf {
  position: sticky; top: 0; background: var(--bg-tief); border-bottom: 1px solid var(--line);
  padding: var(--a3) var(--a4); display: flex; align-items: center; gap: var(--a3); z-index: 2;
}
.insp-kopf .art { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.insp-kopf h2 { font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
.insp-koerper { padding: var(--a4); display: flex; flex-direction: column; gap: var(--a5); }
.insp-zu { margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-s); color: var(--dim); display: grid; place-items: center; }
.insp-zu:hover { background: var(--s1); color: var(--text); }

/* ══════════════ BAUTEILE ══════════════ */

.karte { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.karte > header {
  display: flex; align-items: center; gap: var(--a2); padding: 11px var(--karte-p);
  border-bottom: 1px solid var(--line); background: var(--s2);
}
.karte > header h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.karte > header .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a2); }
.karte .inhalt { padding: var(--karte-p); }
.karte .inhalt.flach { padding: 0; }

/* Kartenrang — DAS ist die Hierarchie, die V1 fehlte */
.karte.ruft { border-color: var(--wait-rand); background: linear-gradient(to bottom, var(--wait-weich), var(--s1) 90px); }
.karte.ruft > header { background: var(--wait-weich); border-bottom-color: var(--wait-rand); }
.karte.ruft > header h3 { color: var(--wait); }
.karte.lebt { border-color: var(--sys-rand); }
.karte.lebt > header h3 { color: var(--sys); }

/* `start` ist wichtig: sonst zieht das Raster alle Karten einer Zeile auf die
   Höhe der größten und reißt Löcher unter den kurzen. */
.raster { display: grid; gap: var(--a4); align-items: start; }
.r-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.r-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.r-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.r-haupt { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.spalte { display: flex; flex-direction: column; gap: var(--a4); min-width: 0; }

/* Lage: Reihenfolge per grid-area statt Quelltextreihenfolge gesetzt, damit
   Desktop (zwei Spalten) und Handy (eine Spalte, andere Reihenfolge) aus
   demselben Markup bedient werden — siehe Handy-Regeln am Dateiende.
   Wiederhergestellt 17.08.2026 (Mission #1651, Mira): Commit 5252c2a hatte diese
   Regel durch eine hochgeladene Altfassung von app.css versehentlich geloescht —
   seither hatte .lage-raster in views/lage.js keinerlei CSS-Gegenstueck, die
   sechs Bloecke der Lage-Ansicht fielen auf reine Quelltextreihenfolge zurueck,
   auf JEDER Breite (kein display:grid ohne diese Regel). Das Mission-#1183-Fix
   fuer die 390px-Reihenfolge war damit seit dem 17.08. wirkungslos, ohne dass
   es irgendwo vermerkt war. */
.lage-raster {
  display: grid; gap: var(--a4); align-items: start; margin-bottom: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "brauchtdich puls" "laeuft geld" "verlauf strom";
}

/* Kennzahl */
.kz { padding: var(--karte-p); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kz .k { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--dim2); }
.kz .w { font-size: 23px; font-weight: 640; letter-spacing: -.025em; line-height: 1.12; }
.kz .w small { font-size: 12.5px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.kz .n { font-size: 11.5px; color: var(--dim2); }
.kz.klick { cursor: pointer; transition: var(--t-schnell); }
.kz.klick:hover { background: var(--s2); }

/* Herkunftsmarke — jede Zahl sagt, woher sie kommt */
.q {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  vertical-align: 2px; margin-left: 5px; white-space: nowrap;
}
.q.live       { background: var(--ok-weich);   color: var(--ok); }
.q.berechnet  { background: var(--sys-weich);  color: var(--sys); }
.q.manuell    { background: var(--idle-weich); color: var(--dim); }
.q.demo       { background: var(--bad-weich);  color: var(--bad); }
.q.unbekannt  { background: var(--idle-weich); color: var(--dim2); }
.keine-quelle { color: var(--dim2); font-size: 12.5px; font-style: italic; }

/* Zeilen */
.zeile {
  display: flex; align-items: center; gap: var(--a3); padding: 0 var(--karte-p);
  min-height: var(--zeile); border-bottom: 1px solid var(--line); transition: var(--t-schnell);
}
.zeile:last-child { border-bottom: 0; }
.zeile.klick { cursor: pointer; }
.zeile.klick:hover { background: var(--s2); }
.zeile.gewaehlt { background: var(--sys-weich); box-shadow: inset 2px 0 0 var(--sys); }
.zeile .breit { flex: 1; min-width: 0; }
.zeile .haupt { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .neben { font-size: 11.5px; color: var(--dim2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .zeit { font-size: 11.5px; color: var(--dim2); flex-shrink: 0; font-family: var(--f-zahl); }

/* Marken */
.m {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
  background: var(--idle-weich); color: var(--dim);
}
.m.ok { background: var(--ok-weich); color: var(--ok); }
.m.wait { background: var(--wait-weich); color: var(--wait); }
.m.bad { background: var(--bad-weich); color: var(--bad); }
.m.sys { background: var(--sys-weich); color: var(--sys); }

/* Knöpfe */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--s2); font-size: 12.5px; font-weight: 600; color: var(--text);
  transition: var(--t-schnell); white-space: nowrap;
}
.b:hover { border-color: var(--line-hell); background: var(--s3); }
.b.haupt { background: var(--sys); border-color: var(--sys); color: #04121b; }
.b.haupt:hover { filter: brightness(1.1); }
.b.ruf { background: var(--wait); border-color: var(--wait); color: #17110a; }
.b.ruf:hover { filter: brightness(1.1); }
.b.gefahr { border-color: rgba(217,83,79,.4); color: var(--bad); }
.b.gefahr:hover { background: var(--bad-weich); }
.b.klein { height: 25px; padding: 0 10px; font-size: 11.5px; }
.b:disabled { opacity: .45; cursor: not-allowed; }

/* Balken */
.balken { height: 4px; background: var(--s3); border-radius: 4px; overflow: hidden; }
.balken > i { display: block; height: 100%; background: var(--sys); border-radius: 4px; transition: width var(--t); }
.balken.ok > i { background: var(--ok); } .balken.wait > i { background: var(--wait); } .balken.bad > i { background: var(--bad); }

/* Reiter */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--a4); overflow-x: auto; }
.reiter button {
  padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--dim);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: var(--t-schnell);
}
.reiter button:hover { color: var(--text); }
.reiter button.an { color: var(--sys); border-bottom-color: var(--sys); }

/* Leer- und Ladezustand — nie eine weiße Fläche, nie ein Sprung */
.leer { padding: var(--a6) var(--a4); text-align: center; color: var(--dim2); }
.leer .gross { font-size: 26px; opacity: .3; margin-bottom: var(--a3); }
.leer p { font-size: 13.5px; margin-bottom: var(--a4); }
.skel { background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%); background-size: 200% 100%; animation: schimmer 1.3s infinite; border-radius: 4px; }
@keyframes schimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.skel-z { height: 13px; margin: 11px var(--karte-p); }

/* Fehlerzustand — sagt WAS kaputt ist und WAS jetzt hilft */
.stoerung { padding: var(--a4); border: 1px solid var(--bad-weich); border-left: 2px solid var(--bad); border-radius: var(--r-s); background: var(--bad-weich); }
.stoerung b { color: var(--bad); display: block; margin-bottom: 4px; font-size: 13.5px; }
.stoerung p { color: var(--dim); font-size: 12.5px; margin-bottom: var(--a3); }

/* Meldung */
.meldung {
  position: fixed; bottom: var(--a5); left: 50%; transform: translateX(-50%);
  background: var(--s2); border: 1px solid var(--line-hell); border-radius: var(--r);
  padding: 11px var(--a4); font-size: 13.5px; z-index: 90; box-shadow: 0 8px 26px rgba(0,0,0,.55);
}

/* ══════════════ JARVIS CORE ══════════════ */

/* Der kleine Core in der Kopfzeile. Klickbar — er ist der Weg in den Kern. */
.core-klein {
  width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; border-radius: 50%;
  transition: transform var(--t);
}
.core-klein:hover { transform: scale(1.12); }

/* Die große Bühne: Kern in der Mitte, Strahlen ringsum. */
.core-buehne {
  display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: var(--a5); align-items: center; margin-bottom: var(--a5);
  padding: var(--a5); border: 1px solid var(--line); border-radius: var(--r-l);
  /* ⚠️ KEIN Farbnebel im Kasten (17.08.2026, Max: „das viereckige Farbnebel ist
   * nicht schön"). Hier lagen zwei Ellipsen-Verläufe. Ein Verlauf in einem Kasten
   * hört am Kastenrand auf — also sieht man ein Viereck, egal wie weich der Verlauf
   * ist. Das Licht kommt jetzt allein aus dem Kern, und das ist rund und fällt nach
   * außen ab. Wo Licht herkommt, soll man sehen können. */
  background: var(--s1);
  position: relative; overflow: hidden;
}
.core-halter { aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; position: relative; }
.core-halter canvas { width: 100%; height: 100%; display: block; }

/* Die acht Fähigkeiten rings um den Kern — jede ein Weg in ihren Bereich. */
.core-faehig {
  position: absolute; transform: translate(-50%, -50%); text-align: left;
  display: flex; flex-direction: column; gap: 1px; padding: 5px 9px;
  border-radius: var(--r-s); border: 1px solid transparent;
  transition: var(--t-schnell); white-space: nowrap; z-index: 2;
}
.core-faehig.links { text-align: right; align-items: flex-end; }
.core-faehig:hover {
  border-color: var(--sys-rand); background: rgba(18,10,32,.9);
  box-shadow: var(--glut-sys);
}
.core-faehig-n {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; color: var(--sys-hell);
}
.core-faehig-u { font-size: 8.5px; color: var(--dim2); }
@media (max-width: 1100px) { .core-faehig { display: none; } }

.core-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--a3); }
.core-strahl {
  padding: var(--a3); border-radius: var(--r); background: rgba(20,24,38,.55);
  border: 1px solid var(--line); position: relative; transition: var(--t-schnell);
}
.core-strahl[data-geh] { cursor: pointer; }
.core-strahl[data-geh]:hover { border-color: var(--line-hell); background: var(--s2); }
.core-strahl::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--sys); opacity: .55;
}
.core-strahl.f-brain::before { background: var(--brain); }
.core-strahl.f-wait::before  { background: var(--wait); }
.core-strahl-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim2); margin-bottom: 9px;
}
.core-paar {
  display: flex; justify-content: space-between; gap: var(--a2);
  font-size: 12.5px; padding: 3px 0; align-items: baseline;
}
.core-paar > span:first-child { color: var(--dim); }
.core-paar > span:last-child { font-weight: 600; text-align: right; }

/* ══════════════ GRAPH (Brain-Karte, Netze) ══════════════ */
.graph-rahmen {
  position: relative; height: min(72vh, 780px); min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(from var(--sys) r g b / .05), transparent 62%),
    var(--bg-tief);
}
.graph-rahmen canvas { width: 100%; height: 100%; display: block; cursor: grab; }

.graph-steuer {
  position: absolute; top: var(--a3); left: var(--a3); display: flex; gap: var(--a2);
  align-items: center; flex-wrap: wrap;
}
.graph-ebene {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: rgba(7,8,14,.82); border: 1px solid var(--line); border-radius: var(--r-s);
}
.graph-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim2); padding: 0 6px; }
.graph-ebene button {
  width: 25px; height: 22px; border-radius: 4px; font-size: 11.5px; font-weight: 650;
  color: var(--dim); transition: var(--t-schnell);
}
.graph-ebene button:hover { background: var(--s2); color: var(--text); }
.graph-ebene button.an { background: var(--sys-weich); color: var(--sys); box-shadow: inset 0 0 0 1px var(--sys-rand); }
.graph-steuer .b { background: rgba(7,8,14,.82); }

.graph-legende {
  position: absolute; top: var(--a3); right: var(--a3); display: flex; flex-direction: column;
  gap: 5px; padding: 9px 11px; background: rgba(7,8,14,.82);
  border: 1px solid var(--line); border-radius: var(--r-s); max-width: 168px;
  /* Reine Info-Chips, keine Klick-Handler — darf Klicks durchlassen. Behebt Task #566:
     bei 390px wächst .graph-steuer (Tiefe/Zur-Mitte/Neu-ordnen) durch Umbruch nach unten
     in den Bereich der Legende hinein und machte "Neu ordnen" unklickbar, obwohl der
     Button korrekt im DOM lag (bestätigt per elementFromPoint, 16.08.2026). */
  pointer-events: none;
}
.graph-l { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--dim); }
.graph-l i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.graph-zahlen {
  position: absolute; bottom: var(--a3); left: var(--a3); display: flex; gap: var(--a4);
  font-size: 11.5px; color: var(--dim); padding: 7px 11px; background: rgba(7,8,14,.82);
  border: 1px solid var(--line); border-radius: var(--r-s);
}
.graph-hinweis {
  position: absolute; bottom: var(--a3); right: var(--a3); font-size: 10.5px; color: var(--dim2);
  padding: 7px 11px; background: rgba(7,8,14,.7); border-radius: var(--r-s);
}

/* ══════════════ SCHIRM-MODUS: ein Modul, volle Fläche ══════════════ */
.huelle[data-schirm] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "flaeche" !important;
}
.huelle[data-schirm] .kopf,
.huelle[data-schirm] .nav,
.huelle[data-schirm] .leiste { display: none !important; }
.huelle[data-schirm] .blatt { max-width: none; padding: var(--a4) var(--a5) var(--a5); }
.huelle[data-schirm][data-insp="auf"] {
  grid-template-columns: minmax(0, 1fr) var(--insp-b) !important;
  grid-template-areas: "flaeche insp" !important;
}

.schirm-kopf {
  display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4);
  padding-bottom: var(--a3); border-bottom: 1px solid var(--line);
}
.schirm-kopf b { font-size: 16px; letter-spacing: -.01em; }
.schirm-marke {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 6px; border-radius: 4px;
  background: var(--sys-weich); color: var(--sys); border: 1px solid var(--sys-rand);
}

/* ══════════════ GROSSE BILDSCHIRME ══════════════
   Ab 4K darf die Fläche weiter atmen, statt in der Mitte zu verhungern. */
@media (min-width: 2100px) {
  .blatt { max-width: var(--max-b-weit); }
  .r-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .r-3 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
  .r-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .graph-rahmen { height: min(76vh, 1000px); }
  .core-buehne { grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); }
  .core-halter { max-width: 460px; }
}

/* ══════════════ MISSIONS-BAHN ══════════════ */
.bahn { display: flex; align-items: stretch; gap: 2px; padding: var(--a4); }
.bahn-stufe {
  display: flex; flex-direction: column; gap: 6px; padding: 11px 9px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--s2);
  cursor: pointer; transition: var(--t-schnell); position: relative; overflow: hidden;
}
.bahn-stufe:hover { border-color: var(--sys-rand); background: var(--s3); }
.bahn-stufe.leer { opacity: .42; }
.bahn-stufe.ruft { border-color: var(--wait-rand); background: var(--wait-weich); }
.bahn-stufe.ruft .bahn-zahl { color: var(--wait); }
.bahn-stufe.ende { border-color: rgba(61,219,143,.3); }
.bahn-stufe.ende .bahn-zahl { color: var(--ok); }
.bahn-kopf {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bahn-zahl { font-size: 21px; font-weight: 640; line-height: 1; }
.bahn-balken { height: 34px; display: flex; align-items: flex-end; }
.bahn-balken > i {
  display: block; width: 100%; background: linear-gradient(to top, var(--sys), rgba(52,224,208,.25));
  border-radius: 4px; min-height: 2px; transition: height var(--t-lang);
}
.bahn-stufe.ruft .bahn-balken > i { background: linear-gradient(to top, var(--wait), rgba(240,168,60,.25)); }
.bahn-stufe.ende .bahn-balken > i { background: linear-gradient(to top, var(--ok), rgba(61,219,143,.25)); }
.bahn-pfeil { align-self: center; color: var(--dim2); font-size: 16px; flex-shrink: 0; }

.bahn-raus {
  display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap;
  padding: 11px var(--a4); border-top: 1px solid var(--line); background: var(--bg-tief);
}
.bahn-raus-p {
  display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--dim); transition: var(--t-schnell);
}
.bahn-raus-p:hover { border-color: var(--line-hell); color: var(--text); }
.bahn-raus-p.hat { border-color: rgba(255,90,99,.32); color: var(--bad); background: var(--bad-weich); }

@media (max-width: 900px) {
  .bahn { flex-wrap: wrap; }
  .bahn-stufe { flex: 1 1 44% !important; }
  .bahn-pfeil { display: none; }
}

/* Befehlsleiste (Strg+K) */
.palette-hg { position: fixed; inset: 0; background: rgba(4,6,8,.72); z-index: 100; display: grid; place-items: start center; padding-top: 12vh; }
.palette { width: min(620px, 92vw); background: var(--s1); border: 1px solid var(--line-hell); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 22px 64px rgba(0,0,0,.6); }
.palette input { width: 100%; height: 48px; padding: 0 var(--a4); background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: 0; font-size: 16px; }
.palette .treffer { max-height: 400px; overflow-y: auto; }
.palette .t { display: flex; align-items: center; gap: var(--a3); padding: 10px var(--a4); cursor: pointer; }
.palette .t.an { background: var(--sys-weich); }
.palette .t .art { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim2); margin-left: auto; }

/* ══════════════ HANDY — eigenes Konzept, nicht dieselbe Seite schmaler.
   Steht am Dateiende, damit diese Regeln gewinnen. ══════════════ */
@media (max-width: 900px) {
  .huelle,
  .huelle[data-nav="schmal"],
  .huelle[data-insp="auf"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--kopf-h) minmax(0, 1fr) auto;
    grid-template-areas: "kopf" "flaeche" "leiste";
  }
  .nav { display: none; }
  /* Der Kopf muss am Handy schrumpfen dürfen, sonst schiebt die feste
     Markenbreite die Seite 7 px über den Rand — genau so gemessen. */
  .kopf { gap: var(--a2); padding: 0 var(--a2); overflow: hidden; }
  .marke { width: auto; flex-shrink: 1; min-width: 0; }
  .marke b { font-size: 13.5px; letter-spacing: .12em; }
  .marke .v2, .suche kbd, .kopf-welle { display: none; }
  .suche { min-width: 0; flex: 1 1 60px; }
  .suche input { min-width: 0; }
  .kopf-knopf { flex-shrink: 0; padding: 0 8px; }
  .puls { display: none; }
  .blatt { padding: var(--a4) var(--a3) 84px; }
  .r-haupt { grid-template-columns: minmax(0, 1fr); }
  .titel-zeile h1 { font-size: 16px; }

  /* Lage am Handy: eigene Reihenfolge nach den fünf Fragen aus dem
     Dateikopf von views/lage.js (braucht mich → läuft → System → passiert →
     Firma) statt der Desktop-Spaltenreihenfolge, und ein Kasten weniger:
     der Ereignis-Strom doppelt „Verlauf" und ist über die Nav-Ansicht
     „Verlauf" ohnehin vollständig erreichbar (Vorgabe 34: eigene Reihenfolge,
     weniger Inhalt statt derselben Seite in einer Spalte).
     Wiederhergestellt 17.08.2026 (Mission #1651, Mira), siehe Begründung bei
     der Desktop-Regel oben. */
  .lage-raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brauchtdich" "laeuft" "puls" "verlauf" "geld";
  }
  .lage-strom { display: none; }

  /* Inspektor wird zum Blatt von unten */
  .huelle[data-insp="auf"] .insp {
    display: flex; position: fixed; inset: 15dvh 0 0; z-index: 60;
    border-left: 0; border-top: 1px solid var(--line-hell); border-radius: var(--r-l) var(--r-l) 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.6);
  }

  /* Untere Leiste: fünf Wege, mehr braucht niemand am Handy */
  .leiste {
    grid-area: leiste; display: flex; background: var(--bg-tief); border-top: 1px solid var(--line);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); z-index: 40;
  }
  .leiste button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 2px; border-radius: var(--r-s); color: var(--dim2); font-size: 10.5px; font-weight: 600;
    position: relative;
  }
  .leiste button .ico { font-size: 16px; line-height: 1; }
  .leiste button.an { color: var(--sys); }
  .leiste button .mrk {
    position: absolute; top: 1px; right: 22%; min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 10px; background: var(--wait); color: #16100a; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; font-family: var(--f-zahl);
  }
  /* Jarvis in der Mitte — der eine große Knopf */
  .leiste button.jarvis .ico {
    width: 38px; height: 38px; margin-top: -14px; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #cdeaf8 0%, var(--sys) 40%, #114563 76%);
    display: grid; place-items: center; font-size: 16px; color: #04121b;
    box-shadow: 0 0 15px rgba(74,168,216,.45); border: 2px solid var(--bg-tief);
  }
  /* Tabellen werden zu Karten, nicht zu gequetschten Spalten */
  .zeile { flex-wrap: wrap; padding: 9px var(--karte-p); min-height: 0; }
  .zeile .zeit { width: 100%; }

  /* Rasterzeilen (Team, Missionen) brechen am Handy in eine Karte um, statt
     acht Spalten auf 390 px zu quetschen. */
  .zeile[style*="grid-template-columns"] {
    display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 5px;
  }
  .zeile[style*="grid-template-columns"] > div { width: 100%; text-align: left !important; }

  /* Technische Hinweise: am Handy nur die Überschrift, keine Fehlersuche unterwegs */
  .streit-lang { display: none; }
  .streit-kurz { display: block !important; }

  /* Graph-Legende (Brain): bei 390px wächst .graph-steuer durch Zeilenumbruch
     nach unten und lag optisch unter der Legende (Task #566). pointer-events:none
     oben macht den Button wieder klickbar, hier zusätzlich die Legende schmaler
     und flacher machen, damit sie am Handy gar nicht erst so weit hinunterreicht. */
  .graph-legende { max-width: 120px; max-height: 84px; overflow-y: auto; font-size: 10.5px; }
}
.leiste { display: none; }
@media (max-width: 900px) { .leiste { display: flex; } }

/* ══════════════ ANSICHTS-UMSCHALTER ══════════════
   Beide Oberflächen bleiben benutzbar. Die Wahl wird gemerkt, damit die
   Startseite beim nächsten Mal gleich die richtige öffnet. */
.ansicht-schalter { display:flex; align-items:center; gap:2px; padding:3px; flex-shrink:0;
  border:1px solid var(--line); border-radius:var(--r-s); background:rgba(18,10,32,.6); }
.ansicht-schalter b { font-size:8.5px; font-weight:700; letter-spacing:.13em; color:var(--dim2); padding:0 7px; }
.ansicht-schalter button, .ansicht-schalter a { padding:5px 10px; border-radius:4px; font-size:11.5px;
  font-weight:650; color:var(--dim); transition:var(--t-schnell); white-space:nowrap; }
.ansicht-schalter a:hover { background:var(--s3); color:var(--text); }
.ansicht-schalter .an { background:var(--sys-weich); color:var(--sys); box-shadow:inset 0 0 0 1px var(--sys-rand); }
@media (max-width:1240px){ .ansicht-schalter b { display:none; } }
@media (max-width:900px) { .ansicht-schalter { display:none; } }

/* ══ Farbwelt-Menü (15.08.2026) ══════════════════════════════════════════════
 * Haengt am ◐-Knopf im Kopf. Bewusst ohne eigene Farben: es benutzt dieselben
 * Tokens wie alles andere und faerbt sich deshalb selbst mit um, sobald man waehlt. */
#farbwelt-menue {
  position: fixed; top: calc(var(--kopf-h) + 6px); right: 14px; z-index: 260;
  min-width: 208px; padding: 8px;
  background: var(--s1); border: 1px solid var(--line-hell); border-radius: var(--r-l);
  box-shadow: var(--tiefe-2);
  display: flex; flex-direction: column; gap: 2px;
}
#farbwelt-menue > b {
  font-size: 10.5px; letter-spacing: .16em; color: var(--dim2);
  padding: 4px 8px 7px; font-weight: 600;
}
#farbwelt-menue .fw {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left; transition: background var(--t-schnell);
}
#farbwelt-menue .fw:hover  { background: var(--s3); }
#farbwelt-menue .fw.ist    { background: var(--sys-weich); color: var(--sys-hell); }
#farbwelt-menue .fw i {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line-hell);
}
#farbwelt-menue .fw span { flex: 1 1 auto; }
#farbwelt-menue .fw em   { font-style: normal; color: var(--sys); font-size: 12.5px; }

/* Handy: das Menue haengt sich unten an, statt am Kopf zu kleben.
 * Muss ans DATEIENDE — sonst gewinnt die Regel oben. */
@media (max-width: 720px) {
  #farbwelt-menue {
    top: auto; bottom: 12px; left: 12px; right: 12px; min-width: 0;
    max-height: 62vh; overflow-y: auto;
  }
}

/* ══ Handy-Nachtrag 15.08.2026 — gemessen, nicht geschaetzt ═════════════════
 * Bei 390 px war die Startseite (Jarvis Core) unbenutzbar: die Kennzahlen-Karten
 * standen als senkrechte Streifen mit angeschnittenen Buchstaben am rechten Rand,
 * und ueber dem Kern klaffte ein leeres Feld.
 *
 * Ursache: .core-buehne ist ein Zweispalter mit `minmax(300px, 440px)` als erster
 * Spalte und wurde im Handy-Block nie angefasst. Bei 390 px Seitenbreite bleiben
 * fuer die zweite Spalte rund 30 px — und `overflow: hidden` schneidet den Rest ab.
 *
 * Warum das kein Pruefer gefunden hat: Der uebliche Test misst, ob die SEITE
 * waagerecht schiebt oder ob ein Kind ueber seinen Kasten laeuft. Beides war
 * sauber. Abgeschnittener Inhalt ist ein dritter Fall — er faellt nur auf, wenn
 * man die sichtbare Breite gegen die Inhaltsbreite haelt (siehe
 * werkzeuge/schau-operator.js, Abschnitt "abgeschnitten").
 *
 * Steht am DATEIENDE, damit diese Regeln die frueheren schlagen. */
@media (max-width: 900px) {
  /* Untereinander statt nebeneinander: erst der Kern, dann die Zahlen. */
  .core-buehne {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--a4);
    padding: var(--a4);
    overflow: visible;          /* nichts mehr abschneiden */
  }
  .core-halter { max-width: 260px; }
  .core-buehne > * { min-width: 0; }
}

/* Unter 480 px hat der Markenname keinen Platz mehr neben Suche und vier Knoepfen.
 * Dann gilt: Funktion vor Name. Das Emblem bleibt — es ist dasselbe Zeichen wie das
 * App-Icon und traegt die Marke allein. */
@media (max-width: 480px) {
  .marke b { display: none; }
  .core-halter { max-width: 220px; }
  .kopf { gap: 6px; }
}

/* Farbwelt-Menü: Gruppen wie im X-Sale-Erscheinungsbild (16.08.2026).
 * Zwei Spalten, damit zwanzig Einträge in ein Menü passen, ohne dass man scrollen muss. */
#farbwelt-menue { min-width: 268px; max-height: 78vh; overflow-y: auto; }
#farbwelt-menue > b:not(:first-child) { margin-top: 8px; }
#farbwelt-menue .fw-reihe {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
#farbwelt-menue .fw { padding: 6px 8px; font-size: 12.5px; gap: 8px; }
#farbwelt-menue .fw i { width: 15px; height: 15px; }
#farbwelt-menue .fw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Handy: eine Spalte, sonst wird jeder Name abgeschnitten.
 * Ans DATEIENDE — sonst gewinnt die Regel oben. */
@media (max-width: 720px) {
  #farbwelt-menue .fw-reihe { grid-template-columns: minmax(0, 1fr); }
}

/* Breite Tabellen am Handy wischbar machen (16.08.2026).
 *
 * Gefunden bei einer eigenen Messung bei 390 px: In "Missionen" und "Team" ragten
 * Elemente bis 865 px hinaus — bei 390 px Fensterbreite. Die Seite scrollte aber NICHT
 * (390/390), weil .flaeche auf overflow-x:hidden steht. Das ist schlimmer als Scrollen:
 * der Inhalt war nicht abgeschnitten dargestellt, sondern gar nicht erreichbar. Die
 * halbe Tabelle existierte am Handy schlicht nicht.
 *
 * Die Tabellen haben feste Spaltenbreiten (zusammen rund 1000 px) — das ist am grossen
 * Bildschirm richtig und laesst sich nicht sinnvoll auf 390 px quetschen, ohne dass
 * Zahlen unlesbar werden. Also darf die TABELLE seitlich scrollen, nicht die Seite.
 *
 * Ans DATEIENDE, sonst gewinnt eine frühere Regel. */
@media (max-width: 720px) {
  .karte.breite-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .karte.breite-tabelle > div { min-width: 940px; }

  /* QA-Nachpruefung (Task #566, 16.08.2026): scrollbar zu sein reicht nicht — ohne
     sichtbares Zeichen merkt niemand, dass rechts noch Spalten warten. Ein rechter
     Verlauf + Pfeil, klickt nicht mit (pointer-events:none), verschwindet nicht von
     selbst (Handy-Wischen ist hier kein "einmal gesehen, weiss ich"-Fall). */
  .karte.breite-tabelle::after {
    content: '›'; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 4px;
    font-size: 16px; font-weight: 700; color: var(--dim2); pointer-events: none;
    background: linear-gradient(to right, transparent, var(--s1) 65%);
  }
}

/* Reiter (Tab-Leisten) am Handy: gleicher Wisch-Hinweis wie breite Tabellen (Nachtrag
 * zu Task #566, QA-Pruefung Mission #813, 16.08.2026). .reiter scrollt technisch schon
 * lange seitlich (overflow-x:auto, Zeile ~308), aber ohne sichtbares Zeichen sieht das
 * wie eine abgeschnittene Leiste aus statt wie eine wischbare. Traf bei 390px auf Brain,
 * Team, Sicherheit und Verlauf zu (gefunden mit tools/pruefe-mobile-390.js — Regel dort
 * verlangt seit dem Task-#566-Fix ein sichtbares ::after-Zeichen bei scrollbaren Kaesten).
 * Ans DATEIENDE, sonst gewinnt eine frühere Regel. */
@media (max-width: 720px) {
  .reiter { position: relative; }
  .reiter::after {
    content: '›'; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 2px;
    font-size: 13.5px; font-weight: 700; color: var(--dim2); pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg) 70%);
  }
}

/* Lage am Handy (Task #566): "Läuft gerade" mit den Knöpfen Live-Verlauf/Mission
 * öffnen lag bei 390 px oft genau am Fußleisten-Rand (.leiste beginnt bei
 * clientHeight ~725 px) — gemessen per Playwright: die Knöpfe waren erst nach
 * ~60 px Scrollen antippbar, vorher lagen sie im geclippten Bereich von .flaeche.
 * Kein Stapel-/z-index-Fehler wie bei Brain, sondern schlicht zu viel Höhe vor der
 * Karte (Aufmerksamkeits-Banner + Titelzeile). Am Handy verdichtet, damit die
 * Knöpfe ohne Scrollen im ersten Bildschirm landen.
 * Ans DATEIENDE, sonst gewinnt eine frühere Regel. */
@media (max-width: 900px) {
  .karte.aufmerk { margin-bottom: 10px !important; }
  .karte.aufmerk .inhalt { padding: 9px 12px !important; }
  [data-karte="laeuft"] .inhalt.flach > div:first-child { padding: 10px 14px !important; }
  [data-karte="laeuft"] .inhalt.flach > div:first-child > div:nth-child(2) { margin-bottom: 8px !important; }
  [data-karte="laeuft"] .inhalt.flach > div[style*="border-top"] { padding: 7px 14px !important; }
}

/* ---------------------------------------------------------------------------
   SYSTEMPULS: ENG WERDEN, NICHT ABSCHNEIDEN (16.08.2026)

   Gemessen: Die Leiste braucht 657 px. Bei 1600 px Fenster bekam sie 596, bei
   1280 nur 545 — und schnitt hinten still ab. Erst fehlte "Kontingent", bei
   1280 auch "Abgebucht". Ursache ist `.puls { overflow:hidden }`: damit darf
   ein Flex-Kind unter seinen Inhalt schrumpfen, statt Platz zu fordern.

   Statt einer festen Breite: enger schreiben, und wenn es trotzdem nicht
   reicht, die Kacheln ausblenden, die anderswo ohnehin stehen (Agenten und
   Missionen stehen in der Mannschafts- und Live-Ansicht, ausführlicher als
   hier). Was zum PLANEN gebraucht wird — Zustand, Server, Automatik,
   Kontingent — bleibt bis zuletzt stehen. Eine Kachel, die man nicht lesen
   kann, ist keine Kachel. */
.puls-p { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1560px) { .puls-p[data-p="agenten"] { display: none; } }
@media (max-width: 1400px) { .puls-p[data-p="missionen"] { display: none; } }
@media (max-width: 1240px) { .puls-p[data-p="abgebucht"] { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   OPERATOR-UPGRADE 16.08.2026 — Sprache, Chat, Agentenseite, Missionsseite,
   Diff, Mehrfachauswahl, Filterleiste.

   Drei Regeln, die hier durchgehalten werden (Vorgabe 24):
     · gleiche Kartenradien var(--r), gleiche Innenabstaende var(--a3)/var(--a4)
     · gleiche Knopfhoehen: .b = 30, .b.klein = 25, .b.winzig = 22
     · nie ein nacktes 1fr im Raster — immer minmax(0,1fr), sonst sprengt ein
       langer Dateiname die Spalte (das ist hier schon zweimal passiert)
   Die Handy-Regeln stehen am DATEIENDE, damit sie nichts ueberschreibt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kleinteile, die ueberall gebraucht werden ── */
.b.winzig { height: 22px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }
.b .anzahl { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px;
  background: var(--sys); color: #fff; font-size: 10.5px; font-weight: 700; }
.b.an { border-color: var(--sys); color: var(--sys); background: var(--sys-weich); }
.hinweis-klein { font-size: 11.5px; color: var(--dim2); line-height: 1.5; }
.dim { color: var(--dim2); }
.min0 { min-width: 0; overflow: hidden; }
.rechtsbuendig { text-align: right; }
.verweis {
  display: inline-flex; align-items: center; max-width: 100%; padding: 1px 6px;
  border-radius: 6px; background: var(--s2); border: 1px solid var(--line);
  color: var(--text); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: var(--t-schnell);
}
.verweis:hover { border-color: var(--sys); color: var(--sys); }
.titel-arg { font-size: 13.5px; color: var(--dim2); font-weight: 500; }
.knopf-paar { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Haekchen und Stapelleiste ── */
.kast { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kast input { position: absolute; opacity: 0; width: 0; height: 0; }
.kast span {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-hell);
  background: var(--s2); display: block; position: relative; transition: var(--t-schnell);
}
.kast input:checked + span { background: var(--sys); border-color: var(--sys); }
.kast input:checked + span::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; color: #fff; font-weight: 700;
}
.kast input:indeterminate + span { background: var(--sys-weich); border-color: var(--sys); }
.kast input:indeterminate + span::after {
  content: "\2013"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; color: var(--sys); font-weight: 700;
}
.zeile.markiert, .karte.markiert { background: var(--sys-weich); }

.stapel-leiste {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
  padding: 9px var(--a3); margin-bottom: var(--a3);
  background: var(--sys-weich); border: 1px solid var(--sys-rand); border-radius: var(--r);
  position: sticky; top: 0; z-index: 6;
}
.stapel-zahl { font-size: 12.5px; font-weight: 650; color: var(--sys); }
.stapel-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Werkzeugleiste ueber Listen ── */
.werkzeugleiste {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
  margin-bottom: var(--a3);
}
.werkzeugleiste .suchfeld {
  flex: 1 1 220px; min-width: 0; height: 30px; padding: 0 11px;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-s);
  color: var(--text); outline: 0; font-size: 12.5px;
}
.werkzeugleiste .suchfeld:focus { border-color: var(--sys); }
.sortier { display: flex; gap: 4px; align-items: center; }
.sortier select {
  height: 30px; padding: 0 8px; background: var(--s1); border: 1px solid var(--line);
  border-radius: var(--r-s); color: var(--text); font-size: 12.5px;
}
.ansichten { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Zaehler ── */
.zaehler-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--a2); margin-bottom: var(--a3);
}
.zaehler {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px var(--a3); background: var(--s1); border: 1px solid var(--line);
  border-radius: var(--r); text-align: left; transition: var(--t-schnell);
}
.zaehler:hover { border-color: var(--line-hell); background: var(--s2); }
.zaehler.an { border-color: var(--sys); background: var(--sys-weich); }
.zaehler.ruft { border-color: var(--wait); }
.zaehler.lebt { border-color: var(--ok); }
.zaehler .z-w { font-size: 23px; font-weight: 620; line-height: 1; }
.zaehler .z-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim2); }

/* ── Filterfeld ── */
.filterfeld {
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--a3); margin-bottom: var(--a3);
  display: flex; flex-direction: column; gap: var(--a3);
}
.ff-gruppe { display: flex; gap: var(--a3); align-items: flex-start; flex-wrap: wrap; }
.ff-k {
  min-width: 82px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim2); padding-top: 6px;
}
.ff-knoepfe { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.ff-b {
  height: 25px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--s2); font-size: 11.5px; color: var(--dim); transition: var(--t-schnell);
}
.ff-b:hover { border-color: var(--line-hell); color: var(--text); }
.ff-b.an { background: var(--sys-weich); border-color: var(--sys); color: var(--sys); }
.ff-b .anzahl { color: var(--dim2); font-size: 10.5px; margin-left: 2px; }
.ff-b.an .anzahl { color: var(--sys); }
.ff-reihe { display: flex; gap: var(--a3); flex-wrap: wrap; align-items: flex-end;
  border-top: 1px solid var(--line); padding-top: var(--a3); }
.ff-wahl { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--dim2); }
.ff-wahl select, .ff-eigen input {
  height: 28px; padding: 0 8px; background: var(--s2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font-size: 12.5px; min-width: 150px;
}
.ff-eigen { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--dim); }
.ff-eigen input { min-width: 130px; }

/* ── Tabellen: eine Bauart fuer alle ── */
.tab-zeile { display: grid; gap: 12px; align-items: center; padding: 9px var(--a3); }
.tab-titel {
  background: var(--s2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.tab-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim2); padding: 0; width: 100%; text-align: left;
}
.tab-kopf.an { color: var(--sys); }
.tab-fuss { padding: 11px var(--a3); color: var(--dim2); font-size: 12.5px; text-align: center; }
.zeilen-steuer { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Gespraech: die Sprachbedienung ── */
.gespr {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.gespr-kopf {
  display: flex; align-items: center; gap: var(--a3); padding: var(--a3);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.gespr-reaktor {
  width: 46px; height: 46px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: var(--s2); border: 1px solid var(--line-hell); transition: var(--t);
}
.gespr-reaktor .gr-kern {
  position: absolute; inset: 12px; border-radius: 50%; background: var(--dim2); transition: var(--t);
}
.gespr-reaktor .gr-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; }
.gespr-reaktor:hover { border-color: var(--sys); }
.gespr[data-zustand="hoert"]    .gr-kern { background: var(--ok); box-shadow: 0 0 18px var(--ok); }
.gespr[data-zustand="hoert"]    .gr-ring { border-color: var(--ok); animation: gr-puls 1.5s ease-in-out infinite; }
.gespr[data-zustand="denkt"]    .gr-kern { background: var(--brain); box-shadow: 0 0 18px var(--brain); }
.gespr[data-zustand="denkt"]    .gr-ring { border-color: var(--brain); animation: gr-puls 1s linear infinite; }
.gespr[data-zustand="arbeitet"] .gr-kern { background: var(--sys); box-shadow: 0 0 18px var(--sys); }
.gespr[data-zustand="arbeitet"] .gr-ring { border-color: var(--sys); animation: gr-dreh 1.4s linear infinite; }
.gespr[data-zustand="spricht"]  .gr-kern { background: var(--wait); box-shadow: 0 0 22px var(--wait); }
.gespr[data-zustand="spricht"]  .gr-ring { border-color: var(--wait); animation: gr-puls .6s ease-in-out infinite; }
@keyframes gr-puls { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.14); opacity: .35 } }
@keyframes gr-dreh { to { transform: rotate(360deg) } }
.gespr-zustand { flex: 1 1 150px; min-width: 0; }
.gz-titel { font-size: 13.5px; font-weight: 620; }
.gz-unter { font-size: 11.5px; color: var(--dim2); }
.gespr-knoepfe { display: flex; gap: 5px; flex-wrap: wrap; }

.gespr-log {
  flex: 1 1 auto; min-height: 180px; max-height: 420px; overflow-y: auto;
  padding: var(--a3); display: flex; flex-direction: column; gap: var(--a2);
}
.gespr-leer { color: var(--dim2); font-size: 12.5px; text-align: center; padding: var(--a5) 0; }
.gespr-n { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.gespr-n.meins { align-self: flex-end; align-items: flex-end; }
.gespr-blase {
  padding: 9px 13px; border-radius: 14px; background: var(--s2);
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.gespr-n.meins .gespr-blase { background: var(--sys); color: #fff; }
.gespr-n.vorlaeufig .gespr-blase { opacity: .55; font-style: italic; }
.gespr-n.fehler .gespr-blase { background: var(--bad-weich); color: var(--bad); }
.gespr-zeit { font-size: 10.5px; color: var(--dim2); margin-top: 3px; }
.gespr-eingabe { display: flex; gap: 6px; padding: var(--a3); border-top: 1px solid var(--line); }
.gespr-eingabe input {
  flex: 1; min-width: 0; height: 32px; padding: 0 11px; background: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); outline: 0; font-size: 13.5px;
}
.gespr-eingabe input:focus { border-color: var(--sys); }
.gespr-fuss { padding: 0 var(--a3) var(--a2); font-size: 11.5px; color: var(--dim2); min-height: 15px; }

.core-oben { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: var(--a4); margin-bottom: var(--a4); align-items: start; }
.core-gespraech { min-width: 0; }

/* ── Chat-Bauteil (Agenten) ── */
.chat { display: flex; flex-direction: column; position: relative; min-height: 340px; }
.chat-log {
  flex: 1 1 auto; min-height: 200px; max-height: 46vh; overflow-y: auto;
  padding: var(--a3); display: flex; flex-direction: column; gap: var(--a2);
}
.chat-leer { color: var(--dim2); font-size: 12.5px; text-align: center; padding: var(--a5) 0; }
.chat-n { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; }
.chat-n.meins { align-self: flex-end; align-items: flex-end; }
.chat-blase {
  padding: 9px 13px; border-radius: 14px; background: var(--s2);
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.chat-n.meins .chat-blase { background: var(--sys); color: #fff; }
.chat-blase.denkt, .gespr-blase.denkt { display: flex; gap: 4px; padding: 12px 14px; }
.chat-blase.denkt span, .gespr-blase.denkt span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim2); animation: denk 1.2s infinite;
}
.chat-blase.denkt span:nth-child(2), .gespr-blase.denkt span:nth-child(2) { animation-delay: .2s; }
.chat-blase.denkt span:nth-child(3), .gespr-blase.denkt span:nth-child(3) { animation-delay: .4s; }
@keyframes denk { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }
.chat-zeit { font-size: 10.5px; color: var(--dim2); margin-top: 3px; display: flex; gap: 5px; align-items: center; }
.chat-mini { font-size: 10.5px; color: var(--sys); text-decoration: underline; }
.chat-anh { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.chat-anh img { max-width: 190px; max-height: 150px; border-radius: 10px; display: block; }
.chat-datei { display: inline-flex; padding: 4px 8px; background: var(--s3); border-radius: 6px; font-size: 11.5px; }

.chat-anhaenge { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--a2) var(--a3); border-top: 1px solid var(--line); }
.chat-anhang {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; max-width: 230px;
  background: var(--s2); border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px;
}
.chat-anhang img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }
.chat-anhang .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-anhang .g { color: var(--dim2); font-size: 10.5px; flex-shrink: 0; }
.chat-anhang button { color: var(--dim2); padding: 0 2px; }
.chat-anhang button:hover { color: var(--bad); }

.chat-eingabe { display: flex; gap: 7px; align-items: flex-end; padding: var(--a3); border-top: 1px solid var(--line); }
.chat-eingabe textarea {
  flex: 1; min-width: 0; min-height: 34px; max-height: 160px; resize: none;
  padding: 8px 11px; background: var(--s2); border: 1px solid var(--line);
  border-radius: var(--r-s); color: var(--text); outline: 0; font-size: 13.5px;
  font-family: inherit; line-height: 1.5;
}
.chat-eingabe textarea:focus { border-color: var(--sys); }
.chat-knoepfe { display: flex; gap: 5px; flex-shrink: 0; }
.chat-knoepfe .b.an { background: var(--bad); border-color: var(--bad); color: #fff; animation: gr-puls 1.2s infinite; }
.chat-fuss { padding: 0 var(--a3) var(--a2); font-size: 11.5px; color: var(--dim2); min-height: 15px; }
.chat-ziehmarke {
  position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: var(--sys-weich); border: 2px dashed var(--sys); border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; color: var(--sys); pointer-events: none;
}

/* ── Agentenseite ── */
.agent-kopf {
  display: flex; gap: var(--a4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--a4); margin-bottom: var(--a4);
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r);
}
.agent-kopf-links { display: flex; gap: var(--a3); align-items: center; flex: 1 1 260px; min-width: 0; }
.agent-avatar {
  width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--s2); border: 1px solid var(--line); border-radius: 14px;
}
.agent-kopf-text { min-width: 0; }
.agent-kopf-text h2 { font-size: 21px; font-weight: 640; margin: 0 0 2px; }
.agent-rolle { font-size: 12.5px; color: var(--dim); margin-bottom: 7px; }
.agent-marken { display: flex; gap: 5px; flex-wrap: wrap; }
.agent-kopf-rechts { display: flex; flex-direction: column; gap: var(--a2); align-items: flex-end; }
.agent-zustand {
  display: flex; gap: 9px; align-items: center; padding: 8px var(--a3);
  background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-s);
}
.agent-zustand.ok { border-color: var(--ok); }
.agent-zustand.wait { border-color: var(--wait); }
.agent-zustand.bad { border-color: var(--bad); }
.agent-zustand .zt { font-size: 12.5px; font-weight: 620; }
.agent-zustand .za { font-size: 11.5px; color: var(--dim2); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-kopf-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.agent-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--a4); align-items: start; }
.agent-links, .agent-rechts { display: flex; flex-direction: column; gap: var(--a4); min-width: 0; }
.kz-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.kz-gitter > div { background: var(--s1); }
.marken-wand { display: flex; flex-wrap: wrap; gap: 5px; padding: var(--a3); }
.werkzeug-zeile { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.werkzeug-zeile .wn { min-width: 92px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werkzeug-zeile .wb { flex: 1; min-width: 0; }
.werkzeug-zeile .wz { min-width: 90px; text-align: right; color: var(--dim2); flex-shrink: 0; }
.agent-auslastung { padding: var(--a3); border-top: 1px solid var(--line); }
.au-zeile { display: flex; justify-content: space-between; gap: var(--a3); font-size: 12.5px; margin-bottom: 5px; }
.au-zeile span:first-child { color: var(--dim2); }

.ged-liste { display: flex; flex-direction: column; }
.ged-p { padding: 10px var(--a3); border-bottom: 1px solid var(--line); }
.ged-p:last-child { border-bottom: 0; }
.ged-kopf { display: flex; gap: 7px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.ged-titel { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ged-text { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-bottom: 3px; }
.ged-punkte { display: flex; gap: 5px; flex-wrap: wrap; padding: var(--a3); border-top: 1px solid var(--line); }

/* ── Zeitleiste ── */
.zeitleiste { padding: var(--a3) var(--a3) var(--a3) 0; }
.zl-p { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 8px;
  align-items: start; padding: 5px 0; position: relative; }
.zl-zeit { font-size: 11.5px; color: var(--dim2); text-align: right; padding-top: 1px; }
.zl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--s3);
  border: 2px solid var(--line-hell); margin: 4px auto 0; position: relative; z-index: 1; }
.zl-p::after { content: ""; position: absolute; left: 59px; top: 14px; bottom: -5px;
  width: 1px; background: var(--line); }
.zl-p:last-child::after { display: none; }
.zl-p.ok .zl-punkt { background: var(--ok); border-color: var(--ok); }
.zl-p.bad .zl-punkt { background: var(--bad); border-color: var(--bad); }
.zl-p.wait .zl-punkt { background: var(--wait); border-color: var(--wait); }
.zl-p.brain .zl-punkt { background: var(--brain); border-color: var(--brain); }
.zl-text { font-size: 12.5px; line-height: 1.55; word-break: break-word; padding-right: var(--a3); }
.zl-wer { font-size: 10.5px; color: var(--dim2); margin-left: 6px; }
.zl-mission { font-size: 10.5px; color: var(--sys); margin-left: 6px; text-decoration: underline; }

/* ── Missionsseite ── */
.mission-kopf {
  display: flex; gap: var(--a4); align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: var(--a4); margin-bottom: var(--a4);
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r);
}
.mk-links { display: flex; gap: var(--a3); min-width: 0; flex: 1 1 300px; }
.mk-nr { font-size: 21px; color: var(--dim2); font-weight: 600; flex-shrink: 0; }
.mission-kopf h2 { font-size: 21px; font-weight: 630; margin: 0 0 7px; line-height: 1.3; word-break: break-word; }
.mk-marken { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.mission-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--a4); align-items: start; }
.mission-links, .mission-rechts { display: flex; flex-direction: column; gap: var(--a4); min-width: 0; }

.lesetext { font-size: 13.5px; line-height: 1.65; padding: var(--a3); word-break: break-word; }
.lesetext + .lesetext { padding-top: 0; }
.vertrag { border-top: 1px solid var(--line); background: var(--s2); }
.vertrag .k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim2); padding: var(--a3) var(--a3) 0; }
.ergebnis { max-height: 620px; overflow-y: auto; }
.ergebnis-code {
  margin: 0 var(--a3) var(--a3); padding: var(--a3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55;
  overflow-x: auto; white-space: pre;
}
.daten { padding: 4px var(--a3) var(--a3); }
.d-p { display: flex; gap: var(--a3); padding: 7px 0; border-bottom: 1px solid var(--line); }
.d-p:last-child { border-bottom: 0; }
.d-n { color: var(--dim2); min-width: 118px; font-size: 12.5px; flex-shrink: 0; }
.d-w { flex: 1; min-width: 0; font-size: 12.5px; word-break: break-word; }
.fortschritt-zahl { display: flex; align-items: baseline; gap: var(--a2); margin-bottom: 7px; flex-wrap: wrap; }
.fortschritt-zahl .z { font-size: 25px; font-weight: 640; }
.schritt-jetzt { margin-top: 9px; padding: 8px 10px; background: var(--s2); border-radius: var(--r-s);
  font-size: 12.5px; color: var(--dim); line-height: 1.5; word-break: break-word; }
.tu-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--a3); }

.tiefe { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tiefe > summary {
  padding: var(--a3); font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--dim); list-style: none; display: flex; align-items: center; gap: 7px;
}
.tiefe > summary::before { content: "\25B8"; color: var(--dim2); }
.tiefe[open] > summary::before { content: "\25BE"; }
.tiefe > summary::-webkit-details-marker { display: none; }
.tiefe-inhalt { border-top: 1px solid var(--line); padding: var(--a3); }
.roh { max-height: 460px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.roh-z { display: grid; grid-template-columns: 46px 62px minmax(0, 1fr); gap: 8px;
  padding: 3px 0; border-bottom: 1px solid var(--line); line-height: 1.5; word-break: break-word; }
.roh-art { color: var(--brain); }

/* ── Diff: eine Bauart, ueberall gleich (Vorgaben 17 und 18) ── */
.diff-summe {
  display: flex; gap: var(--a3); flex-wrap: wrap; padding: 10px var(--a3);
  background: var(--s2); border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.diff-summe-p { color: var(--dim); }
.diff-summe-p.plus b { color: var(--ok); }
.diff-summe-p.minus b { color: var(--bad); }
.diff-summe-p.ok { color: var(--ok); }
.diff-summe-p.bad { color: var(--bad); }
.diff-karte { margin-top: var(--a3); }
.diff-karte > header h3 { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.diff-kurz { font-size: 11.5px; color: var(--dim2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.diff-dateien { display: flex; flex-direction: column; }
.diff-datei {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 92px; gap: var(--a3);
  align-items: center; padding: 8px var(--a3); border-bottom: 1px solid var(--line);
  text-align: left; transition: var(--t-schnell); width: 100%;
}
.diff-datei:hover { background: var(--s2); }
.diff-datei .d-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text); }
.diff-datei .d-z { text-align: right; font-size: 11.5px; }
.diff-datei .d-z .plus { color: var(--ok); }
.diff-datei .d-z .minus { color: var(--bad); }
.diff-datei .d-auf { font-size: 11.5px; color: var(--sys); text-align: right; }
.diff-halter { padding: var(--a3); border-top: 1px solid var(--line); }
.diff-fuss { padding: var(--a3); border-top: 1px solid var(--line); }
.diff-laedt, .diff-leer { padding: var(--a4); text-align: center; color: var(--dim2); font-size: 12.5px; }
.diff-fenster { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.diff-fenster-kopf {
  display: flex; justify-content: space-between; gap: var(--a3); align-items: center;
  padding: 7px var(--a3); background: var(--s2); border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Feste Hoehe: ein 4000-Zeilen-Diff darf die Seite nicht auseinanderziehen. */
.diff-code {
  max-height: 460px; overflow: auto; background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
}
.diff-code .dz { padding: 0 var(--a3); white-space: pre; }
.diff-code .dz.plus  { background: rgb(from var(--ok) r g b / .10); color: var(--ok); }
.diff-code .dz.minus { background: rgb(from var(--bad) r g b / .10); color: var(--bad); }
.diff-code .dz.block { background: var(--s2); color: var(--brain); }
.diff-code .dz.kopf  { color: var(--dim2); }
.diff-abgeschnitten { padding: 9px var(--a3); background: var(--s2); font-size: 11.5px; color: var(--wait); }

/* ── Freigaben ── */
.freigabe-kopf { display: flex; gap: 10px; align-items: flex-start; padding: var(--a3) var(--a3) 0; }
.freigabe-titel { font-size: 16px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.freigabe-text { font-size: 13.5px; line-height: 1.6; color: var(--dim); padding: 9px var(--a3) var(--a3); }
.freigabe-warnung {
  margin: 0 var(--a3) var(--a3); padding: 9px 11px; font-size: 11.5px; line-height: 1.5;
  background: rgb(from var(--wait) r g b / .10); border: 1px solid rgb(from var(--wait) r g b / .35);
  border-radius: var(--r-s); color: var(--wait);
}
.freigabe-fuss {
  display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap;
  padding: var(--a3); border-top: 1px solid var(--line);
}

/* ── Jarvis-Schub ── */
#jarvis-schub {
  position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px));
  background: var(--s1); border: 1px solid var(--sys-rand); border-radius: var(--r-l);
  z-index: 80; box-shadow: 0 16px 48px rgba(0,0,0,.6);
  display: flex; flex-direction: column; max-height: min(640px, 84dvh); overflow: hidden;
}
.js-kopf { display: flex; align-items: center; gap: 9px; padding: 11px var(--a3);
  border-bottom: 1px solid var(--line); }
.js-kopf b { font-size: 13.5px; }
.js-koerper { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.js-koerper .gespr { border: 0; border-radius: 0; flex: 1; }
.js-koerper .gespr-log { max-height: none; }

/* ═══════ Tablet und Handy — bewusst ganz am Ende der Datei ═══════ */
@media (max-width: 1180px) {
  .core-oben { grid-template-columns: minmax(0, 1fr); }
  .agent-raster, .mission-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .werkzeugleiste { gap: 6px; }
  .werkzeugleiste .ansichten { order: 9; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .ff-gruppe { flex-direction: column; gap: 6px; }
  .ff-k { padding-top: 0; }
  /* Breite Tabellen scrollen IN sich, statt die Seite zu sprengen. */
  .breite-tabelle { overflow-x: auto; }
  .breite-tabelle .tab-zeile { min-width: 880px; }
}
@media (max-width: 720px) {
  .zaehler-reihe { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .zaehler .z-w { font-size: 21px; }
  .agent-kopf, .mission-kopf { padding: var(--a3); gap: var(--a3); }
  .agent-kopf-rechts { align-items: stretch; width: 100%; }
  .agent-kopf-knoepfe { justify-content: stretch; }
  .agent-kopf-knoepfe .b { flex: 1; }
  .agent-zustand .za { max-width: none; }
  .kz-gitter { grid-template-columns: minmax(0, 1fr); }
  .chat-log, .gespr-log { max-height: 52vh; }
  .diff-datei { grid-template-columns: minmax(0, 1fr) 88px; }
  .diff-datei .d-auf { display: none; }
  .d-n { min-width: 96px; }
  .zl-p { grid-template-columns: 44px 14px minmax(0, 1fr); }
  .zl-p::after { left: 50px; }
  .roh-z { grid-template-columns: 42px 54px minmax(0, 1fr); }
  #jarvis-schub { right: 8px; left: 8px; bottom: 68px; width: auto; max-height: 74dvh; }
}
@media (max-width: 480px) {
  .gespr-kopf { gap: var(--a2); }
  .gespr-reaktor { width: 40px; height: 40px; }
  .gespr-reaktor .gr-kern { inset: 10px; }
  .gespr-knoepfe { width: 100%; }
  .gespr-knoepfe .b { flex: 1; }
  .stapel-leiste { gap: 6px; }
  .stapel-knoepfe { width: 100%; }
  .stapel-knoepfe .b { flex: 1 1 auto; }
  .tu-knoepfe .b { flex: 1 1 auto; }
  .chat-anhang { max-width: 100%; }
  .werkzeugleiste .suchfeld { flex: 1 1 100%; order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NACHBESSERUNG nach der eigenen Messung (16.08.2026, tools/pruefe-operator-upgrade.js)
   Fünf Befunde, alle gemessen — keiner davon war mit blossem Hinsehen zu erkennen.
   Steht ganz am Dateiende, weil hier bewusst frühere Regeln geschlagen werden.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Befund 1: `hidden` wirkte nicht ──────────────────────────────────────
   „Ton abbrechen" stand dauerhaft im Kopf, obwohl das Element das Attribut
   `hidden` trug. Grund: `.b { display: inline-flex }` schlägt die Vorgabe
   `[hidden] { display: none }` des Browsers — eine Klasse ist stärker als eine
   Element-Vorgabe. Betraf auch die Anhang-Leiste und die Ziehmarke im Chat:
   beide hätten dauerhaft offen gestanden. */
[hidden] { display: none !important; }

/* ── Befund 2: Häkchen waren null Pixel gross ─────────────────────────────
   Das Eingabefeld lag auf `width:0; height:0` und war nur über sein Etikett
   erreichbar. Für die Maus ging das gut, für Tastatur und für jede Prüfung
   nicht — der Prüfer konnte kein einziges Häkchen setzen. Jetzt liegt ein
   echtes, durchsichtiges Feld über dem gezeichneten Kästchen. */
.kast { position: relative; width: 16px; height: 16px; }
.kast input {
  position: absolute; inset: 0; width: 16px; height: 16px;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.kast input:focus-visible + span { outline: 2px solid var(--sys); outline-offset: 2px; }

/* ── Befund 3: die Tabellen ragten heraus ─────────────────────────────────
   Bei 820 px ragte die Kopfzeile um 290 px über ihren Kasten. Die vorhandene
   Regel gab breiten Tabellen 880 bzw. 940 px Mindestbreite — die neun Spalten
   brauchen aber rund 1160. Zu wenig Mindestbreite heisst: die Spalten quetschen
   sich, statt dass die Tabelle wischbar wird. */
@media (max-width: 1100px) {
  .karte.breite-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .karte.breite-tabelle > div { min-width: 1160px; }
}

/* ── Befund 4: am Handy war die Missionsliste unlesbar ────────────────────
   Bei 390 px stand jede Zelle auf einer eigenen Zeile, ohne Beschriftung:
   Häkchen, Titel, „Läuft", „Content", „—", „hoch", „1,15 €", „vor 3 Min" —
   acht Zeilen, von denen man vier nicht deuten konnte. Ursache ist eine
   ältere Regel (`.zeile[style*="grid-template-columns"]`), die JEDE Raster-
   zeile am Handy senkrecht stapelt. Für zwei Spalten war das richtig, für
   neun ist es Unsinn.

   Statt zurück zum waagerechten Wischen: eine eigene Handy-Form. Titel über
   die volle Breite, darunter die Angaben in einer umbrechenden Zeile, darunter
   die Steuerung. Das ist dieselbe Information, nur gelesen wie eine Karte.
   Das `!important` ist nötig, weil die ältere Regel es ebenfalls benutzt. */
@media (max-width: 720px) {
  .karte.breite-tabelle > div { min-width: 0; }
  .karte.breite-tabelle::after { content: none; }   /* nichts mehr zu wischen */
  .breite-tabelle .tab-titel { display: none !important; }

  .breite-tabelle .tab-zeile {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 6px 8px !important; padding: 11px var(--a3) !important;
    min-width: 0 !important; grid-template-columns: none !important;
  }
  .breite-tabelle .tab-zeile > * { width: auto !important; text-align: left !important; }
  .breite-tabelle .tab-zeile > .kast { order: 0; flex: 0 0 16px; }
  .breite-tabelle .tab-zeile > *:nth-child(2) { order: 1; flex: 1 1 calc(100% - 26px); min-width: 0; }
  .breite-tabelle .tab-zeile > *:nth-child(n+3) { order: 2; font-size: 11.5px; }
  .breite-tabelle .tab-zeile > .zeilen-steuer {
    order: 3; flex: 1 1 100%; justify-content: flex-start; margin-top: 2px;
  }
  /* Damit die Angaben-Zeile nicht wie eine Aufzählung ohne Sinn wirkt. */
  .breite-tabelle .tab-zeile > *:nth-child(n+3):not(.zeilen-steuer) {
    color: var(--dim); white-space: nowrap;
  }
}

/* ── Befund 5: der Kern wurde von seiner eigenen Beschriftung gesprengt ───
   Die acht Fähigkeiten liegen als Beschriftung rings um den Kern und ragen
   naturgemäss über das Quadrat hinaus. Solange der Kern die volle Breite
   hatte, war das egal. Neben dem Gesprächsfenster wurde die Spalte schmal,
   und die Beschriftung lief in den Rand. Also: nebeneinander erst ab 1500 px,
   darunter untereinander — und der Kern etwas kleiner, damit die Namen Platz
   haben. */
.core-oben { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) {
  .core-oben { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
  .core-oben .core-halter { max-width: 290px; }
}
.core-oben .core-buehne { margin-bottom: 0; }

/* Ein leeres Gesprächsfenster soll nicht als hohe leere Fläche dastehen. */
.core-gespraech .gespr { min-height: 420px; }
.core-gespraech .gespr-log { min-height: 220px; }

/* ── Nachbesserung 2, wieder gemessen (tools/debug-ueberlauf.js) ───────────
   Drei Befunde, jeder mit Zahl:

   1. Missionen bei 390 px: die Titel-Zelle war 469 px breit in einer 364 px
      breiten Zeile. Ursache ist nicht die Schrift, sondern eine fehlende
      Obergrenze: eine Flex-Zelle waechst bis zu ihrem Inhalt, wenn man ihr
      nicht ausdruecklich sagt, dass sie schrumpfen darf. `min-width: 0` allein
      genuegt nicht, solange keine Hoechstbreite dagegen steht.
   2. Team bei 390 px: dasselbe, 518 px in 364 px — Name plus Rolle plus
      Zeichen in einer Zelle ohne Grenze.
   3. Agentenseite bei 390 px: einzelne Koennens-Marken waren bis 374 px breit,
      weil manche Skills lange Saetze als Namen tragen ("n8n Zeitplaene &
      Fehlerbehandlung — DRILL Stufe 2 …").

   Kein `overflow-x: auto` als Pflaster: der Inhalt soll passen, nicht wischbar
   sein. Deshalb Hoechstbreite plus Auslassungspunkte. */
@media (max-width: 720px) {
  .breite-tabelle .tab-zeile > * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .breite-tabelle .tab-zeile > *:nth-child(2) { flex: 1 1 100% !important; }
  /* Die Angaben-Zeile darf umbrechen, die einzelne Angabe nicht zerfleddern. */
  .breite-tabelle .tab-zeile > *:nth-child(n+3):not(.zeilen-steuer) {
    max-width: calc(100% - 24px) !important; text-overflow: ellipsis;
  }
  .breite-tabelle .tab-zeile .neben,
  .breite-tabelle .tab-zeile .haupt { max-width: 100%; }
  /* Team: Name + Rolle sitzen in einem eigenen Flex-Kasten. */
  .breite-tabelle .tab-zeile > div[style*="display:flex"] { min-width: 0 !important; }
}

/* Lange Skill-Namen sind eine Tatsache, keine Ausnahme — also einplanen. */
.marken-wand .m {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .marken-wand { max-width: 100%; }
  .marken-wand .m { max-width: calc(100vw - 76px); }
}

/* Die Kopfzeile der Tabelle braucht dieselbe Mindestbreite wie ihre Spalten:
   gemessen 1170 px, gesetzt waren 1160 — zehn Pixel, die als Ueberlauf zaehlen. */
@media (max-width: 1100px) {
  .karte.breite-tabelle > div { min-width: 1190px; }
}

/* ── Nachbesserung 3: der Agentenkopf am Handy ────────────────────────────
   Gemessen bei 390 px: der Kasten „Zustand" war 722 px breit in einem 338 px
   breiten Platz — 384 px davon unsichtbar. Darin stand, woran der Agent
   gerade arbeitet, und Missionstitel sind lang.

   Der Fehler war meiner: in der ersten Handy-Regel stand `max-width: none`
   fuer diese Zeile. Gemeint war „darf breiter werden als am Schreibtisch",
   bewirkt hat es „darf unendlich breit werden". Eine Zeile ohne Obergrenze in
   einem Flex-Kasten waechst bis zu ihrem Inhalt und schiebt alles andere
   hinaus. Richtig ist eine Obergrenze von 100 % — plus `min-width: 0` an den
   Kaesten darueber, denn sonst gilt die Obergrenze fuer eine Breite, die
   selbst schon zu gross ist. */
.agent-zustand { min-width: 0; }
.agent-zustand > div { min-width: 0; }

@media (max-width: 720px) {
  .agent-kopf-rechts { min-width: 0; max-width: 100%; }
  .agent-zustand { max-width: 100%; }
  /* Ueberschreibt die eigene `max-width: none` von weiter oben. */
  .agent-zustand .za { max-width: 100% !important; }
  .agent-kopf-links { min-width: 0; max-width: 100%; }
  .agent-kopf-text { min-width: 0; }
  .agent-kopf-text h2 { overflow: hidden; text-overflow: ellipsis; }
}

/* ── Nachbesserung 4: die Tabellenkopfzeile blieb am Handy stehen ─────────
   Gemessen bei 390 px: `display: flex` statt `display: none`. Beide Regeln
   trugen `!important` und hatten dieselbe Staerke (zwei Klassen) — dann
   entscheidet die Reihenfolge, und `.tab-zeile { display:flex }` steht zwei
   Zeilen spaeter als `.tab-titel { display:none }`. Ergebnis: acht
   Spaltennamen als umbrechender Wortsalat ueber jeder Liste.

   Zwei !important-Regeln gegeneinander sind immer ein Konstruktionsfehler.
   Statt sie umzusortieren (was beim naechsten Anhaengen wieder kippt), bekommt
   die Kopfzeile eine Klasse mehr im Selektor — damit gewinnt sie unabhaengig
   von der Reihenfolge. */
@media (max-width: 720px) {
  .breite-tabelle .tab-zeile.tab-titel { display: none !important; }
}

/* ── Nachbesserung 5: die Angaben standen am Handy untereinander ──────────
   Gemessen: jedes Kind der Zeile begann 25 px tiefer als das vorige — acht
   Zeilen fuer eine Mission, obwohl „Läuft · Support · hoch · gerade eben"
   zusammen 228 von 340 px brauchen und bequem nebeneinander passen.

   Ursache war nicht die Breite, sondern die Richtung: die aeltere Handy-Regel
   (`.zeile[style*="grid-template-columns"]`) setzt `flex-direction: column`,
   und meine Regel hat nur `display` und `flex-wrap` gesetzt. Eine Richtung,
   die man nicht angibt, bleibt die alte — flex-wrap wirkt dann als Umbruch
   einer Spalte und aendert gar nichts.

   Merke fuers naechste Mal: wer einen fremden Flex-Kasten uebernimmt, muss
   `flex-direction` ausdruecklich mitsetzen, sonst uebernimmt er die Haelfte. */
@media (max-width: 720px) {
  .breite-tabelle .tab-zeile {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ── Weckwort: eigener Zustand „wacht" ────────────────────────────────────
   Bewusst ruhig und langsam pulsierend, nicht in Signalfarbe: das Mikrofon ist
   offen, aber es passiert nichts. Wer das mit „hört zu" verwechselt, glaubt,
   Jarvis nehme gerade auf. */
.gespr[data-zustand="wacht"] .gr-kern {
  background: var(--brain); box-shadow: 0 0 10px var(--brain); opacity: .75;
}
.gespr[data-zustand="wacht"] .gr-ring {
  border-color: var(--brain); animation: gr-puls 3.2s ease-in-out infinite;
}

/* ── Automatik-Leiste in Mission Control (Vorgabe 12) ─────────────────────
   „Automatik arbeitet" allein ist eine Auskunft. Steuern soll man dort, wo man
   den Zustand liest — deshalb stehen die Knöpfe daneben und nicht drei Menüs
   weiter. Rot umrandet, wenn nichts mehr angestoßen wird: das ist ein Zustand,
   den man nicht versehentlich über Nacht stehen lassen will. */
.automatik-leiste {
  display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap;
  padding: 11px var(--a3); margin-bottom: var(--a4);
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r);
}
.automatik-leiste.halt { border-color: var(--wait); background: rgb(from var(--wait) r g b / .07); }
.automatik-leiste.laeuft { border-color: var(--ok-rand, var(--line)); }
.al-text { flex: 1 1 240px; min-width: 0; }
.al-text b { font-size: 13.5px; }
.al-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .al-knoepfe { width: 100%; }
  .al-knoepfe .b { flex: 1 1 auto; }
}

/* Zustands-Probe unter dem Kern (17.08.2026).
   Acht Zustände lassen sich nicht abwarten — ohne Schalter kann niemand prüfen, ob
   sie sich überhaupt unterscheiden. Bewusst schlicht: eine Reihe kleiner Knöpfe,
   die umbricht statt zu scrollen. */
.core-probe {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 10px 0 2px; padding: 0 8px;
}
.core-probe .b.an { background: var(--sys-weich); color: var(--sys-hell); border-color: var(--sys-rand); }

/* ══ FRAGEZEICHEN, ZUSTANDSLISTE, FREQUENZLEISTE (17.08.2026) ═════════════════
 * Max sah unter dem Kern elf Knöpfe und fragte, was die sollen. Genau das ist der
 * Befund: Wer sie sieht, muss raten. Ein Fragezeichen erklärt jetzt die Zustände,
 * das Ausprobieren steckt in derselben Liste, und darunter läuft die Frequenz. */
.core-hilfe {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line-hell); background: var(--s2); color: var(--dim);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--t-schnell);
}
.core-hilfe:hover { border-color: var(--sys-rand); color: var(--sys-hell); background: var(--sys-weich); }
.core-hilfe.an { border-color: var(--sys); color: var(--sys-hell); background: var(--sys-weich); }

.core-zustandsliste {
  width: 100%; max-width: 420px; margin-top: var(--a2);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--s2);
  max-height: 46vh; overflow-y: auto;
}
.cz-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a2);
  padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 12.5px;
  position: sticky; top: 0; background: var(--s2); z-index: 1;
}
.cz-zeile {
  display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  border-bottom: 1px solid var(--line);
}
.cz-zeile:last-of-type { border-bottom: 0; }
.cz-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cz-text { flex: 1; min-width: 0; }
.cz-text b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.cz-text span { display: block; font-size: 11.5px; color: var(--dim2); line-height: 1.4; }
.cz-fuss { padding: 8px 11px; font-size: 11px; color: var(--dim2); border-top: 1px solid var(--line); }
.core-zustandsliste .b.an { background: var(--sys-weich); color: var(--sys-hell); border-color: var(--sys-rand); }

/* Die Leiste steht nur da, wenn es etwas zu zeigen gibt — sie klappt nicht auf
 * und zu, sie ist entweder gemessen oder gar nicht sichtbar. */
.core-pegel { width: 100%; max-width: 420px; margin-top: var(--a2); text-align: center; }
.cp-balken {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 34px;
}
.cp-balken > i {
  display: block; width: 4px; height: 100%; border-radius: 2px;
  background: linear-gradient(to top, var(--sys), rgb(from var(--sys) r g b / .35));
  transform: scaleY(.05); transform-origin: bottom;
  transition: transform 60ms linear;
}
.core-pegel[data-quelle="mikro"] .cp-balken > i {
  background: linear-gradient(to top, var(--ok), rgb(from var(--ok) r g b / .35));
}
.core-pegel[data-quelle="keine"] .cp-balken > i { background: var(--line-hell); transition: none; }
.cp-wort {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim2); margin-top: 5px;
}
.core-pegel[data-quelle="keine"] .cp-wort { text-transform: none; letter-spacing: 0; }

/* ── Die Felder ringsum leuchten mit (17.08.2026, Max' Wunsch) ──
 * Nur das Feld, das zum laufenden Modus gehört (FELDER_JE_ZUSTAND in jarviscore.js).
 * Das Leuchten trägt die Farbe des Modus — dieselbe wie im Kern, sonst wären es
 * zwei Aussagen. Bewusst ohne Blinken: ein Kontrollsystem blinkt nicht, es leuchtet.
 * Bei „Bewegung reduzieren" bleibt das Licht, nur das Atmen hört auf. */
.core-faehig { --leucht: var(--sys); }

/* ⚠️ KEIN Kasten. Die erste Fassung gab dem leuchtenden Feld Rahmen und Füllung —
 * Max: „der Core hat dieses orangene Viereck drumherum, das sieht nicht gut aus."
 * Er hat recht, und der Grund ist mehr als Geschmack: Ein Rahmen mit Füllung ist in
 * dieser Oberfläche ein KNOPF. Ein Zustand, der aussieht wie ein Knopf, lädt zum
 * Drücken ein und behauptet damit etwas Falsches. Licht ist kein Kasten:
 * Der Name selbst glüht, ein weicher Schein liegt darunter, und ein schmaler
 * Lichtbalken zeigt zum Kern — die Herkunft des Leuchtens. */
.core-faehig.leuchtet {
  border-color: transparent;
  background: radial-gradient(ellipse at center,
              rgb(from var(--leucht) r g b / .16), transparent 72%);
  box-shadow: none;
}
.core-faehig.leuchtet .core-faehig-n {
  color: rgb(from var(--leucht) r g b);
  text-shadow: 0 0 calc(14px * var(--glut, 1)) rgb(from var(--leucht) r g b / .9);
}
.core-faehig.leuchtet .core-faehig-u { color: var(--dim); }
/* Der Lichtbalken sitzt auf der Seite, die zum Kern zeigt. */
.core-faehig.leuchtet::before {
  content: ''; position: absolute; top: 50%; left: -7px;
  width: 2px; height: 66%; transform: translateY(-50%); border-radius: 2px;
  background: rgb(from var(--leucht) r g b);
  box-shadow: 0 0 calc(9px * var(--glut, 1)) rgb(from var(--leucht) r g b);
  animation: feld-atem calc(2600ms / var(--m, 1)) ease-in-out infinite;
}
.core-faehig.links.leuchtet::before { left: auto; right: -7px; }
@keyframes feld-atem { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .core-faehig.leuchtet::before { animation: none; opacity: .8 } }

/* ── Automatik-Fenster (17.08.2026) ──
 * Die Kachel oben war eine Sackgasse: sie stand einen halben Tag auf ANGEHALTEN,
 * und man konnte nichts damit tun, nicht einmal nachsehen, wer angehalten hat. */
.puls-p.klickbar { cursor: pointer; border-radius: var(--r-s); transition: var(--t-schnell); }
.puls-p.klickbar:hover { background: var(--s2); }
.auto-fenster {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: flex-start; justify-content: center; padding: 68px 16px 16px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
}
.af-inhalt {
  width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--s1); border: 1px solid var(--line-hell); border-radius: var(--r-l);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.af-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a3); padding: var(--a4); border-bottom: 1px solid var(--line); }
.af-stand { font-size: 17px; font-weight: 680; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.af-stand.an { color: var(--ok); }
.af-stand.aus { color: var(--wait); }
.af-unter { font-size: 12.5px; color: var(--dim2); margin-top: 3px; }
.af-zeilen { padding: var(--a3) var(--a4); }
.af-z { display: flex; justify-content: space-between; gap: var(--a3); padding: 5px 0; font-size: 13px; }
.af-z > span { color: var(--dim); }
.af-z > b.warnt { color: var(--wait); }
.af-warnung {
  margin: 0 var(--a4) var(--a3); padding: 10px 12px; border-radius: var(--r-s);
  background: var(--wait-weich); border: 1px solid var(--wait-rand);
  color: var(--wait); font-size: 12.5px; line-height: 1.5;
}
.af-schalten { display: flex; gap: 8px; padding: 0 var(--a4) var(--a2); }
.af-schalten input {
  flex: 1; min-width: 0; height: 32px; padding: 0 11px; background: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); outline: 0; font-size: 13px;
}
.af-schalten input:focus { border-color: var(--sys); }
.af-fuss { padding: 0 var(--a4) var(--a3); font-size: 12px; color: var(--dim2); min-height: 16px; }
.af-fuss.schlecht { color: var(--bad); }
.af-log-kopf {
  padding: 9px var(--a4); font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim2); border-top: 1px solid var(--line);
}
.af-log-z { display: flex; align-items: center; gap: 9px; padding: 7px var(--a4); border-top: 1px solid var(--line); font-size: 12.5px; }
.af-log-z > div { flex: 1; min-width: 0; }
.af-log-z b { display: block; font-weight: 620; }
.af-log-z span { color: var(--dim2); font-size: 11.5px; }
.af-log-z time { color: var(--dim2); font-size: 11.5px; white-space: nowrap; }
.af-laedt { padding: var(--a4); color: var(--dim2); font-size: 12.5px; }

/* Der Kern ist anklickbar (Gespräch beginnen) — das muss man sehen. */
.core-halter.klickbar { cursor: pointer; }
.core-halter.klickbar canvas { transition: filter var(--t-schnell); }
.core-halter.klickbar:hover canvas { filter: brightness(1.12); }

/* ══ CORE-AUFTEILUNG — Max' Skizze vom 17.08.2026 ═══════════════════════════
 * Verlangt sind drei Spalten: LINKS die Zahlen (System + Puls), MITTE allein der
 * Reaktor, RECHTS der Chat über die volle Höhe.
 *
 * Was vorher falsch war, gemessen an der Skizze:
 *   1. Der Reaktor saß in derselben Spalte wie die Zahlen und war mit 290 px klein.
 *      Die Mitte der Seite war leer — dort standen nur die Probe-Knöpfe.
 *   2. Der Chat endete auf halber Höhe, weil `.gespr-log` bei `max-height: 420px`
 *      abgeriegelt war und `.core-oben` auf `align-items: start` stand. Darunter
 *      blieb toter Raum.
 *
 * Die Spalten stehen hier ausdrücklich als `grid-column`, nicht als Reihenfolge im
 * HTML. Grund: die HTML-Reihenfolge ist die Handy-Reihenfolge (erst der Kern), und
 * die soll das Umstellen der Spalten nicht mitziehen.
 *
 * Steht am DATEIENDE, damit es die Zweispalter-Regeln von Zeile 1004/1380 schlägt. */
.core-oben {
  display: grid; gap: var(--a4); margin-bottom: var(--a4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;                 /* der Chat soll die Zeilenhöhe füllen */
}
/* Der Reaktor-Kasten trägt jetzt nur noch den Kern — also mittig, nicht als Raster. */
.core-oben > .core-buehne {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--a3); margin-bottom: 0;
}
.core-oben > .core-daten { align-content: start; }
/* Eine Zahl darf nie umbrechen. Bei "Vom Abo getragen 1.188,60 €" ist das € in die
 * nächste Zeile gerutscht — die Zahl sah dadurch aus wie zwei. Der Name darf
 * umbrechen, der Wert nicht. */
.core-paar > span:last-child, .core-paar > b:last-child { white-space: nowrap; }
.core-oben > .core-gespraech { min-width: 0; display: flex; }
/* Der Chat wächst mit der Spalte, statt bei 420 px aufzuhören — aber er braucht eine
 * Obergrenze, sonst wächst er mit dem VERLAUF: 2589 Nachrichten ergaben gemessene
 * 4559 px Höhe auf dem Handy. Der Kasten bekommt also ein Maß, und der Verlauf rollt
 * darin. (Beim ersten Messen blieb das verborgen, weil der Prüfer keinen gültigen
 * Zugang hatte und der Verlauf deshalb leer war — 401 statt Inhalt.) */
.core-oben > .core-gespraech .gespr { flex: 1; min-height: 420px; max-height: min(78vh, 820px); }
.core-oben > .core-gespraech .gespr-log { max-height: none; min-height: 0; flex: 1 1 auto; }

@media (min-width: 1200px) {
  /* Noch keine drei Spalten möglich, aber das Wichtigste aus der Skizze geht schon:
     Reaktor und Chat nebeneinander, die Zahlen darunter über die volle Breite.
     Vorher stand der Chat über beide Zeilen — dann endete er 142 px vor dem unteren
     Rand der Zahlenspalte, also genau der tote Raum, den Max angestrichen hat.
     Nebeneinander in EINER Zeile sind beide gleich hoch, ohne Rechnerei. */
  .core-oben { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
  .core-oben > .core-buehne    { grid-column: 1; grid-row: 1; }
  .core-oben > .core-gespraech { grid-column: 2; grid-row: 1; }
  .core-oben > .core-daten     { grid-column: 1 / -1; grid-row: 2; }
  /* Muss sein: die Regel von Zeile 1382 drückt den Kern ab 1500 px auf 290 px.
     Genau die Zahl fand Max zu klein — hier ist die Spalte breit genug für mehr. */
  .core-oben .core-halter { max-width: min(520px, calc(100% - 150px)); }
}

/* Die drei Spalten der Skizze erst ab 1900 px — und das ist gemessen, nicht gewählt:
 * bei 1600 px blieben für die Mitte 464 px, davon 190 px für die Beschriftung ringsum,
 * also 224 px Kern. Das wäre KLEINER als die 290 px, die Max zu klein fand. Der
 * Zweispalter darüber gibt dem Kern in derselben Lage 340–420 px.
 * Drei Spalten, die den Kern schrumpfen, erfüllen die Skizze nur auf dem Papier. */
@media (min-width: 1900px) {
  /* Die Skizze: Zahlen · Reaktor · Chat. Die Mitte bekommt den größten Anteil,
     damit der Kern wirklich groß wird und nicht nur mittig steht. */
  .core-oben {
    grid-template-columns: minmax(280px, .85fr) minmax(440px, 1.2fr) minmax(380px, 1.3fr);
  }
  .core-oben > .core-daten     { grid-column: 1; grid-row: 1; }
  .core-oben > .core-buehne    { grid-column: 2; grid-row: 1; }
  .core-oben > .core-gespraech { grid-column: 3; grid-row: 1; }
  /* Zwei schmale Kartenspalten links statt einer breiten — wie in der Skizze. */
  .core-oben > .core-daten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* Bleibt in der letzten Reihe eine Karte allein übrig (ungerade Anzahl), nimmt sie
     die volle Breite — sonst klafft unten rechts ein Loch. Regelt sich selbst: kommt
     eine Karte dazu, greift die Regel nicht mehr. */
  .core-oben > .core-daten > .core-strahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Höhe wie beim Wissensgraphen: der Bildschirm gibt das Maß, nicht der Inhalt.
     Beim Chat ein festes `height`, kein `min-height`: sonst bestimmt der Verlauf
     die Höhe der ganzen Zeile und zieht Zahlen und Reaktor mit in die Länge. */
  .core-oben > .core-buehne { min-height: min(74vh, 780px); }
  .core-oben > .core-gespraech .gespr { height: min(74vh, 780px); max-height: none; }
  /* Der Kern nimmt, was die Spalte hergibt — aber die acht Beschriftungen ringsum
   * ragen über das Quadrat hinaus (Anker bei 52 % Radius, Text bis ~95 px darüber).
   * Ohne die 190 px Abzug schneidet `overflow: hidden` sie ab; genau daran ist die
   * Beschriftung am 16.08. schon einmal gescheitert. */
  .core-oben .core-halter { max-width: min(520px, calc(100% - 170px)); }
}

/* ── Mission #1580 (Frontend/Rosa, 17.08.2026): Klickziel zu klein auf dem Handy ──
   .b.winzig ist mit 22px hoch (Zeile 823) fuer Desktop-Dichte gedacht, traegt aber
   echte Mission-Steuerung: "Stopp" (laufenden Agenten anhalten), "Pause", "Start",
   "Weiter", "Nochmal" — auf missionen.js und fluss.js. WCAG 2.2 AA (SC 2.5.8)
   verlangt mindestens 24x24 CSS-Pixel Klickflaeche; unter 390px Breite (Handy) ist
   das keine Kuer, sondern die gesetzliche Untergrenze (EAA seit 28.06.2025 bindend
   in der EU). Steht bewusst NACH Zeile 823, damit es die Desktop-Dichte dort nicht
   antastet — nur auf Handybreite wird die Flaeche angehoben. */
@media (max-width: 480px) {
  .b.winzig { min-height: 24px; padding: 4px 10px; }
}


/* ===== Brain auf der Lage-Seite (17.08.2026) ===== */
.lage-brain-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lage-brain-buehne {
  position: relative; height: 520px; margin: 10px 0 6px;
  border-radius: 12px; overflow: hidden; touch-action: none;
}
.lage-brain-buehne > canvas { width: 100%; height: 100%; display: block; }
.lage-brain-fuss { font-size: 10.5px; color: var(--dim2); text-align: center; margin: 0 0 2px; }

@media (max-width: 820px) {
  .lage-brain-buehne { height: 380px; }
}
@media (max-width: 430px) {
  .lage-brain-buehne { height: 300px; }
  .lage-brain-fuss { font-size: 9.5px; }
}

/* ══════════ Stimmen (18.08.2026) ══════════
 * Kacheln zum Anhören. Zwei Zustände, mehr braucht es nicht:
 * normal = antippen hört, `.waehlt` = antippen vergibt die Stimme.
 * minmax(0, 1fr) statt 1fr, weil ein langer Charaktertext das Raster
 * sonst über die Seitenbreite hinausschiebt — genau die Falle, die uns
 * schon einmal die Handyansicht zerrissen hat. */
.stimm-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 8px;
  margin-top: 10px;
}
.stimm-kachel {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche2);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.stimm-kachel:hover { border-color: var(--akzent); transform: translateY(-1px); }
.stimm-kachel:disabled { opacity: .55; cursor: progress; }
.stimm-kachel .sk-name { font-weight: 640; font-size: 14px; }
.stimm-kachel .sk-art  { font-size: 11px; letter-spacing: .06em; color: var(--dim2); text-transform: uppercase; }
.stimm-kachel .sk-char { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }

/* Wartet eine Zuweisung, sind die Kacheln keine Hörproben mehr, sondern
 * Knöpfe mit Folgen — das muss man sehen, bevor man tippt. */
.stimm-raster.waehlt .stimm-kachel { border-color: var(--akzent); background: var(--flaeche3, var(--flaeche2)); }
.stimm-raster.waehlt .stimm-kachel::after { content: 'zuweisen'; font-size: 10.5px; color: var(--akzent); letter-spacing: .08em; }

.zeile.gewaehlt { outline: 1px solid var(--akzent); border-radius: 8px; background: var(--flaeche2); }

/* Handy zuletzt — die Regel gilt im ganzen Haus: was hier steht, muss
 * gewinnen, sonst schlägt die Breitansicht durch. */
@media (max-width: 640px) {
  .stimm-raster { grid-template-columns: minmax(0, 1fr); }
  .zeile [data-hoer], .zeile [data-waehle] { min-width: 40px; }
}

/* ══ Handy-Umbau 19.08.2026 — nach Max' Urteil „die Handy-Ansicht ist fuer'n Arsch"
 * Gemessen bei 390 px ueber alle 22 Ansichten (Puppeteer, echtes Chrome).
 *
 * Drei belegte Ursachen, nicht geraten:
 *  1. NAVIGATION: nav.js kannte am Handy nur fuenf feste Ziele
 *     ('lage','missionen','jarvis','freigaben','team'). Die anderen 17 Ansichten
 *     — Kosten, Bank, Brain, Koennen, Stimmen, Projekte, Kalender, Einstellungen,
 *     Infrastruktur, Kontingent, Automationen, Passkeys, Sicherheit, Live,
 *     Mission Control, Organisation — waren am Handy NICHT AUFRUFBAR.
 *     Kein Gestaltungsfehler, eine harte Grenze im Code. Jetzt: Knopf „Mehr".
 *  2. ZU KLEIN: kleinste Schrift durchgaengig 8,5 px, Median 10,5–13,5 px.
 *     Antippziele oft unter 40 px. Beides unter jeder Handy-Richtlinie.
 *  3. SCHREIBTISCH-RESTE: „Abtrennen" (zweiter Monitor) auf jeder Seite,
 *     Bedienhilfe „Rad = Zoom · Umschalt+ziehen" am Kern — auf einem Geraet
 *     ohne Maus und ohne Umschalttaste.
 *
 * Steht am DATEIENDE, damit diese Regeln die frueheren schlagen. */

@media (max-width: 720px) {

  /* ── 1. Schreibtisch-Reste, die am Handy nur Platz fressen ── */
  [data-abtrennen] { display: none !important; }   /* zweiter Monitor am Handy */
  .kopf .ansicht-schalter,
  .kopf .suche kbd,                                /* „Strg K" gibt es hier nicht */
  .kopf .kopf-welle { display: none !important; }

  /* ── 2. Kopfzeile: das Emblem wurde am linken Rand angeschnitten ──
   * Ursache: .core-klein ist ein 60x60-Canvas ohne Schrumpfsperre; im engen
   * Flex-Kopf gab es als erstes nach. Ein halbes Logo sieht aus wie ein Fehler. */
  .kopf { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .kopf .marke { flex: 0 0 auto; min-width: 0; }
  .kopf .core-klein {
    flex: 0 0 auto;
    width: 30px; height: 30px;                     /* gerechnet, nicht geraten */
  }
  .kopf .suche { flex: 1 1 auto; min-width: 0; }   /* min-width:auto sprengt sonst */
  .kopf .suche input { min-width: 0; font-size: 15px; }

  /* ── 3. Antippflaechen: Daumen statt Mauszeiger ──
   * Richtwert 44 px (Apple) bzw. 48 px (Google). Gemessen waren viele unter 40. */
  .kopf-knopf,
  .leiste button,
  .hm-p { min-height: 44px; }
  .kopf-knopf { min-width: 44px; font-size: 17px; }

  /* ── 4. Untere Leiste: fuenf Wege, davon einer ins volle Menue ── */
  .leiste button { min-width: 0; font-size: 11px; }
  .leiste button .ico { font-size: 18px; }
}

/* ── 5. Schrift: nichts unter 12 px, Fliesstext lesbar ──
 * Gemessen war die kleinste Schrift 8,5 px — auf einem Geraet, das man
 * mit ausgestrecktem Arm haelt. Diese Regel hebt nur an, sie deckelt nichts. */
@media (max-width: 430px) {
  .blatt { font-size: 15px; }
  .blatt small, .blatt .klein, .blatt .mrk,
  .blatt figcaption, .blatt .hinweis, .blatt .fuss { font-size: 12.5px !important; }
  .blatt h1 { font-size: 24px; }
  .blatt h2 { font-size: 19px; }
  .blatt h3 { font-size: 16px; }
  .blatt td, .blatt th { font-size: 13.5px; }

  /* Das Emblem traegt die Marke allein — dann aber ganz, nicht halb. */
  .kopf .core-klein { width: 28px; height: 28px; }
}

/* ══ Handy-Menue „Mehr" — alle Ansichten, gruppiert wie am Schreibtisch ══
 * Faehrt als Blatt von unten ein, weil der Daumen unten sitzt. */
#handymenue {
  position: fixed; inset: 0; z-index: 9000;
  visibility: hidden; pointer-events: none;
}
#handymenue.auf { visibility: visible; pointer-events: auto; }

#handymenue-grund {
  position: absolute; inset: 0;
  background: rgba(2, 4, 10, .72);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
#handymenue.auf #handymenue-grund { opacity: 1; }

#handymenue .hm-blatt {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86vh; display: flex; flex-direction: column;
  background: var(--flaeche, #0f1420);
  border-top: 1px solid var(--rand, #24304a);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22, .8, .3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#handymenue.auf .hm-blatt { transform: translateY(0); }

#handymenue .hm-griff {
  width: 42px; height: 4px; border-radius: 4px;
  background: var(--rand, #2b3752);
  margin: 10px auto 2px;
}
#handymenue .hm-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--rand, #1c2740);
}
#handymenue .hm-kopf b { font-size: 16px; letter-spacing: .02em; }
#handymenue .hm-kopf button {
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: inherit;
  font-size: 19px; cursor: pointer;
}
#handymenue .hm-inhalt { overflow-y: auto; padding: 6px 12px 18px; -webkit-overflow-scrolling: touch; }
#handymenue .hm-gruppe { margin-top: 12px; }
#handymenue .hm-gruppe h4 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--matt, #7f8ca8); margin: 0 4px 8px;
}
/* minmax(0,…) statt nacktem 1fr — sonst sprengt der laengste Name das Gitter. */
#handymenue .hm-gitter {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
#handymenue .hm-p {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 76px; padding: 10px 6px;
  border: 1px solid var(--rand, #223050); border-radius: 12px;
  background: var(--karte, #131a29);
  color: inherit; text-decoration: none; text-align: center;
}
#handymenue .hm-p .ico { font-size: 21px; line-height: 1; }
#handymenue .hm-p .txt {
  font-size: 12px; line-height: 1.25;
  overflow-wrap: anywhere;                          /* lange Namen brechen um */
}
#handymenue .hm-p:active { background: var(--karte-an, #1b2740); }

/* Am Schreibtisch gibt es die linke Navigation — dort waere das Blatt doppelt. */
@media (min-width: 721px) { #handymenue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  #handymenue .hm-blatt, #handymenue-grund { transition: none; }
}

/* ── Nachbesserung 19.08.2026, zweite Messung ───────────────────────────────
 * Die erste Fassung sprach .klein/.hinweis/small an — Klassen, die es hier gar
 * nicht gibt. Wirkung: null. Gemessen wurde dann, WO die kleine Schrift wirklich
 * sitzt (getComputedStyle ueber alles in #blatt, nach Klasse gezaehlt):
 *
 *   span.m (Statusmarken .ok/.idle/.wait)  10,5 px  — 260× allein in „Koennen"
 *   button.verweis                         11,5 px  —  56× in „Missionen"
 *   div.neben, span.dim, span.z, b.z,
 *   div.k, span.z-k, div.bahn-kopf         10,5–11,5 px
 *   h3                                     11,5 px  — eine Ueberschrift!
 *
 * Nicht raten, welche Klasse gemeint ist — messen. Das war die Lehre. */
@media (max-width: 430px) {
  #blatt .m,
  #blatt .dim,
  #blatt .z, #blatt .z-k, #blatt .k,
  #blatt .neben,
  #blatt .bahn-kopf,
  #blatt .zeit { font-size: 12.5px !important; }

  #blatt h3 { font-size: 15px !important; }

  /* Verweise in Listen sind echte Ziele fuer den Daumen, keine Beschriftung.
   * 44 px Hoehe wuerde jede Liste sprengen — stattdessen groesser UND mehr
   * Luft nach oben/unten, damit man nicht den Nachbarn trifft. */
  #blatt button.verweis,
  #blatt a.verweis {
    font-size: 13.5px !important;
    padding-top: 7px; padding-bottom: 7px;
    min-height: 32px;
  }
}

/* ── Bedienhilfe: Maus ODER Finger ─────────────────────────────────────────
 * Am Brain stand bis 19.08.2026 auf JEDEM Geraet "Rad = Zoom · Umschalt+ziehen"
 * — auf einem Handy ohne Maus und ohne Umschalttaste. Und app.css machte den
 * Satz am Handy zusaetzlich auf 9,5 px klein. Jetzt zeigt jedes Geraet die
 * Geste, die es auch kann. */
.nur-finger { display: none; }
@media (pointer: coarse), (max-width: 720px) {
  .nur-maus   { display: none; }
  .nur-finger { display: inline; }
}
@media (max-width: 430px) {
  .lage-brain-fuss { font-size: 12px !important; line-height: 1.4; }

  /* Die Puls-Leiste im Kopf trug sieben Werte (Zustand, Server, Automatik,
   * Agenten, Missionen, Abgebucht, Kontingent) bei 8,5 px nebeneinander — auf
   * 390 px nicht lesbar, nur Grau. Dieselben Zahlen stehen gross in "Lage". */
  .kopf .puls { display: none; }
}

/* ── Auswahlkaesten und Kleinstknoepfe am Handy ────────────────────────────
 * In „Missionen" gemessen: 56× label.kast + 56× input bei 16x16 px und
 * 55× button.b.winzig bei 47x24 px. Das sind keine Etiketten, sondern echte
 * Ziele — 16 px trifft man mit dem Daumen nicht, man trifft den Nachbarn.
 *
 * Der Kasten selbst waechst nur auf 22 px (sonst zerreisst er die Zeilenoptik);
 * die TREFFERFLAECHE wird per ::before auf 44 px gezogen, unsichtbar und ohne
 * Einfluss auf das Layout. Das ist der uebliche Weg, wenn Optik und Trefferflaeche
 * auseinanderfallen sollen. */
@media (max-width: 720px) {
  #blatt label.kast,
  #blatt input[type="checkbox"],
  #blatt input[type="radio"] {
    position: relative;
    width: 22px; height: 22px;
    min-width: 22px; min-height: 22px;
  }
  #blatt label.kast::before,
  #blatt input[type="checkbox"]::before,
  #blatt input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    /* nur Trefferflaeche, nichts Sichtbares */
  }

  /* Die Klasse heisst „winzig" — am Handy ist das eine Zustandsbeschreibung,
   * kein Gestaltungswunsch. 24 px Hoehe auf 32 px, damit der Daumen trifft. */
  #blatt button.b.winzig {
    min-height: 32px;
    padding-top: 5px; padding-bottom: 5px;
  }
}