/* Assistent — HUD im Iron-Man-Stil.
   Durchsichtige Scheiben mit leuchtenden Rahmen, Eckwinkel, laufende
   Scanlinie. Cyan als Leitfarbe des Systems, Terrakotta als Akzent —
   damit bleibt unsere Handschrift erhalten. */
:root {
  /* Die Werte kommen aus des Nutzers Spezifikation fuer das Kern-Fenster vom
     11.08.2026: Grund #00050d, HUD-Blau #00a8ff, Statusgruen #00ffcc,
     Trennlinien #003366, Rahmenschein rgba(0,168,255,.6). */
  --bg: #00050d;
  --bg-2: #02101f;

  --hud: #00a8ff;
  --hud-dim: rgba(0, 168, 255, .48);
  --hud-faint: rgba(0, 168, 255, .10);
  --hud-glow: rgba(0, 168, 255, .40);
  /* Der Schein des aeusseren Rahmens - innen UND aussen, wie gefordert. */
  --hud-schein: inset 0 0 15px rgba(0, 168, 255, .6),
                      0 0 15px rgba(0, 168, 255, .6);

  --accent: #4fd4ff;
  --accent-dim: rgba(79, 212, 255, .5);
  --accent-tint: rgba(79, 212, 255, .12);
  --accent-tint-2: rgba(79, 212, 255, .26);

  --hud-hell: #b6ecff;

  --text: #cfe6ff;
  --text-2: #8fb6dc;
  --muted: #5b83ab;
  --muted-2: #3d5a78;

  /* #003366 ist die Trennlinie aus der Spezifikation. */
  --line: #003366;
  --line-strong: rgba(0, 168, 255, .45);
  --surface: rgba(2, 18, 38, .58);

  --up: #00ffcc;
  --down: #ff5b5b;

  --radius: 4px;
  --radius-pill: 999px;
  --bar-h: 52px;

  /* Dieselbe schmale Technikschrift wie in der Kommandozentrale. */
  font-family: "Bahnschrift", "DIN Alternate", "Roboto Condensed",
               "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Spalte, damit die Leiste oben so hoch sein darf wie sie braucht und der
   Rest den ubrigen Platz nimmt. Die beiden Schmuckebenen liegen fest
   positioniert und zaehlen hier nicht mit. */
body {
  display: flex;
  flex-direction: column;
}

/* Hintergrund wie ein technischer Plan: feines Gitter, darueber ein grobes,
   dazu zwei Lichtscheine. Im Original liegen hinter allem Konstruktions-
   zeichnungen - das grobe Gitter deutet sie an, ohne unruhig zu werden. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 78%, rgba(111,208,255,.05), transparent 52%),
    radial-gradient(ellipse at 72% 18%, rgba(47, 156, 244,.09), transparent 55%),
    linear-gradient(rgba(47, 156, 244,.05) 1px, transparent 1px) 0 0 / 100% 132px,
    linear-gradient(90deg, rgba(47, 156, 244,.05) 1px, transparent 1px) 0 0 / 132px 100%,
    linear-gradient(var(--hud-faint) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--hud-faint) 1px, transparent 1px) 0 0 / 44px 100%;
  opacity: .55;
  z-index: 0;
}

/* Zwei grosse, sehr blasse Ringe hinter allem - die Andeutung des Kerns,
   der im Film ueber die ganze Werkstattscheibe laeuft. */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 55%;
  width: 150vmin;
  height: 150vmin;
  margin: -75vmin 0 0 -75vmin;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(47, 156, 244, .05);
  box-shadow:
    0 0 0 1px rgba(47, 156, 244, .03),
    inset 0 0 0 14vmin rgba(47, 156, 244, .012),
    inset 0 0 0 14.2vmin rgba(47, 156, 244, .05);
}

/* --- Kopfleiste --------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 2;
  /* Frueher feste Hoehe plus overflow-x: auto - dadurch verschwanden auf dem
     Hochkantmonitor die Knoepfe rechts der Wetteranzeige in einem Querlauf,
     dessen Bildlaufleiste ausgeblendet ist. Man sah sie nicht und kam nicht
     an sie heran. Jetzt bricht die Leiste um und wird nach unten hoeher. */
  min-height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-top: calc(.3rem + env(safe-area-inset-top));
  padding-bottom: .3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  row-gap: .35rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(47, 156, 244,.06), transparent);
}

/* Auf schmalen Bildschirmen - des Nutzers Hochkantmonitor ist 720 breit - darf der
   Name die Zeile nicht mehr aufspreizen. Sonst schiebt "margin-right: auto"
   alles nach rechts und jede Zeile bleibt halb leer; "Handy" landete dadurch
   allein in einer dritten Zeile. */
@media (max-width: 980px) {
  .brand { margin-right: 0; }
  .topbar { justify-content: flex-start; }
  .wetter-strip { order: 9; }
  /* Erzwingt den Umbruch an derselben Stelle wie auf der Vorlage. Auf
     breiten Bildschirmen ist das Ding null Pixel breit und faellt nicht
     auf; hier zwingt es die Schalter in die zweite Zeile. */
  .zeilenbruch { flex: 1 0 100%; height: 0; margin: 0; }
}
.zeilenbruch { display: block; width: 0; height: 0; }

.brand {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  white-space: nowrap;
  color: var(--hud);
  text-shadow: 0 0 14px var(--hud-glow);
}

.brand-dot { color: var(--accent); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-dim);
  animation: herzschlag 2.6s ease-in-out infinite;
}

@keyframes herzschlag {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.82); }
}

select, .ghost, .send, .mic {
  background: rgba(47, 156, 244, .06);
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .34rem .75rem;
  font: inherit;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.ghost:hover, select:hover {
  border-color: var(--hud);
  color: var(--hud);
  box-shadow: 0 0 12px var(--hud-glow) inset;
}

.badge {
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(47, 156, 244, .05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .24rem .55rem;
  white-space: nowrap;
}

/* Die Fassungsnummer neben dem Namen. Bewusst unauffaellig - sie soll
   dasein, wenn man sie sucht, und sonst nicht stoeren. Gibt es etwas
   Neueres, faerbt sie sich ein. */
.badge.fassung {
  text-transform: none;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  padding: .24rem .45rem;
}
.badge.fassung.neuer {
  color: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
}
.badge.fassung.neuer:hover {
  background: var(--accent);
  color: #04070b;
}

.badge.wake.listening {
  color: #04070b;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-dim);
  animation: pulse 1.1s infinite;
}

.toggle {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.toggle input { accent-color: var(--hud); }

/* --- Vier Scheiben ------------------------------------------------------ */

.dash {
  position: relative;
  z-index: 1;
  /* Nicht mehr fest rechnen: die Leiste oben kann jetzt umbrechen. */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
  gap: .9rem;
  padding: .9rem;
  padding-bottom: max(.9rem, env(safe-area-inset-bottom));
}

/* Einzelansicht: ein Fenster zeigt genau eine Scheibe, formatfüllend.
   Damit wird aus einem Browserfenster ein eigenständiger Bildschirm. */
body[data-ansicht] .dash {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "eins";
  padding: .6rem;
}
body[data-ansicht] .dash > .tile { display: none; }
body[data-ansicht] .dash > .tile.sichtbar { display: block; grid-area: eins; }

.tile[data-area="tl"] { grid-area: tl; }
.tile[data-area="tr"] { grid-area: tr; }
.tile[data-area="bl"] { grid-area: bl; }
.tile[data-area="br"] { grid-area: br; }

/* --- Die vier Scheiben ---------------------------------------------------
   Aufbau wie in der Werkstatt-Vorlage: eine geschnittene Glasscherbe mit
   hauchdünner Leuchtkante. Technisch zwei Ebenen mit derselben Schnittform —
   aussen die Leuchtfarbe, 1px darin das dunkle Glas. Das ergibt eine
   randscharfe Kontur, die auch an den Schrägen sauber bleibt; ein normaler
   border kann das bei clip-path nicht. */

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 1px;                       /* das ist die Randstärke */
  background: linear-gradient(150deg, var(--hud), var(--hud-dim) 45%, rgba(47, 156, 244,.16));
  clip-path: var(--schnitt);
  filter: drop-shadow(0 0 14px rgba(47, 156, 244, .16));
}

/* Die Ecke, die zur Mitte zeigt, ist stark angeschnitten — dadurch ordnen
   sich die vier Scheiben strahlenförmig um den Kern, wie im Original. */
.tile[data-area="tl"] {
  --schnitt: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 34px),
                     calc(100% - 34px) 100%, 0 100%);
}
.tile[data-area="tr"] {
  --schnitt: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%,
                     34px 100%, 0 calc(100% - 34px));
}
.tile[data-area="bl"] {
  --schnitt: polygon(0 0, calc(100% - 34px) 0, 100% 34px,
                     100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.tile[data-area="br"] {
  --schnitt: polygon(34px 0, 100% 0, 100% 100%, 14px 100%,
                     0 calc(100% - 14px), 0 34px);
}

.tile-glas {
  position: relative;
  height: 100%;
  min-height: 0;
  clip-path: var(--schnitt);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem 1rem .9rem;
  overflow: hidden;
  /* Deckend, nicht durchscheinend: darunter liegt die Leuchtebene, die den
     Rand bildet — die würde sonst flächig durchschlagen und alles aufhellen. */
  background:
    /* feines Punktraster wie auf den Scheiben in der Vorlage */
    radial-gradient(rgba(47, 156, 244,.06) 1px, transparent 1.2px) 0 0 / 20px 20px,
    /* Lichtschein aus der Ecke, die zum Kern zeigt */
    radial-gradient(120% 90% at var(--schein, 100% 100%), rgba(47, 156, 244,.09), transparent 62%),
    linear-gradient(160deg, rgba(47, 156, 244,.04), rgba(0,0,0,0) 55%),
    linear-gradient(#070d14, #050a10);
  box-shadow: inset 0 0 60px rgba(47, 156, 244, .045);
}

.tile[data-area="tl"] .tile-glas { --schein: 100% 100%; }
.tile[data-area="tr"] .tile-glas { --schein: 0% 100%; }
.tile[data-area="bl"] .tile-glas { --schein: 100% 0%; }
.tile[data-area="br"] .tile-glas { --schein: 0% 0%; }

/* Tick-Bogen in der äusseren Ecke — die Skalen aus der Vorlage */
.tickbogen {
  position: absolute;
  width: 116px;
  height: 116px;
  opacity: .5;
  pointer-events: none;
  z-index: 2;
  color: var(--hud);
  animation: bogendrehen 48s linear infinite;
}

.tile[data-area="tl"] .tickbogen { top: -52px;    left: -52px; }
.tile[data-area="tr"] .tickbogen { top: -52px;    right: -52px; }
.tile[data-area="bl"] .tickbogen { bottom: -52px; left: -52px; }
.tile[data-area="br"] .tickbogen { bottom: -52px; right: -52px; }

@keyframes bogendrehen {
  to { transform: rotate(360deg); }
}

/* Kopfzeile jeder Scheibe: Statuspunkt, Titel, Kennung */
.tile-kopf {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}

.tile-kopf .tile-label { flex: 1; }

.statuspunkt {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 8px var(--up);
  animation: punktpuls 2.6s ease-in-out infinite;
}

@keyframes punktpuls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Punkt für eine Kachel, die noch nicht verbunden ist */
.statuspunkt.aus {
  background: var(--muted-2);
  box-shadow: none;
  animation: none;
}

/* Hinweis in einer Kachel, die noch eingerichtet werden muss */
.offen {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: .4rem 0;
}
.offen-text {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.offen-schritt {
  margin: 0;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 34ch;
}

.verlauf-trenner {
  text-align: center;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .55;
  margin: .4rem 0;
}

.tile-code {
  /* Auf der Vorlage steht "ARC-00" gut lesbar in der oberen Ecke. Mit
     der alten Farbe war es kaum vom Hintergrund zu unterscheiden. */
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--hud-hell);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.tile-unterlabel {
  margin: .35rem 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--line);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hud);
  opacity: .8;
  flex: 0 0 auto;
}

.verborgen { display: none; }

/* Laufende Scanlinie über das ganze Feld */
.scanlinie {
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(47, 156, 244,.05), transparent);
  animation: scannen 7s linear infinite;
  z-index: 3;
}

@keyframes scannen {
  0%   { transform: translateY(-90px); }
  100% { transform: translateY(100vh); }
}

.tile-half {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
  /* basis auto, nicht 0: sonst trägt der Inhalt in Reihen mit Höhe "auto"
     nichts zur Höhe bei und die Hälfte wird auf 0 zusammengedrückt. */
  flex: 1 1 auto;
}

.tile-half-bottom {
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}

.tile-label {
  margin: 0;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--hud);
  text-shadow: 0 0 10px var(--hud-glow);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Leuchtender Strich hinter jeder Überschrift */
.tile-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-dim), transparent);
}

.tile-body { flex: 1 1 auto; min-height: 0; overflow: auto; width: 100%; }

.skeleton {
  color: var(--muted-2);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tile-error { color: var(--down); font-size: .76rem; line-height: 1.5; }

/* Wetter — schmale Anzeige in der Kopfleiste */
.wetter-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: 0 .8rem;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.wetter-strip:empty { display: none; }
.wx-icon { font-size: 1.25rem; line-height: 1; filter: drop-shadow(0 0 8px var(--hud-glow)); }
.wx-meta {
  font-size: .58rem;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: .05em;
}
.wx-temp {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--hud);
  text-shadow: 0 0 16px var(--hud-glow);
  font-variant-numeric: tabular-nums;
}
.wx-city {
  color: var(--text-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}

/* Märkte */
.mk { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mk td { padding: .34rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk tr:last-child td { border-bottom: 0; }
.mk .mk-name {
  color: var(--muted);
  text-align: left;
  width: 100%;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
}
.mk .mk-price {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding-left: .6rem;
  text-align: right;
}
.mk .mk-chg { font-variant-numeric: tabular-nums; padding-left: .6rem; text-align: right; }
.mk .up { color: var(--up); text-shadow: 0 0 10px rgba(79,224,168,.4); }
.mk .down { color: var(--down); text-shadow: 0 0 10px rgba(255,107,94,.4); }

/* Aufgaben */
.todo { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.todo li {
  padding: .28rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.todo li:last-child { border-bottom: 0; }
.todo li::before { content: "▸"; color: var(--accent); margin-right: .45rem; }
.tile-note { margin: .5rem 0 0; font-size: .72rem; color: var(--muted); letter-spacing: .04em; }

/* Postfächer */
.mailliste { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.mailliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .26rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.mailliste li:last-child { border-bottom: 0; }
.mailliste .konto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .08em; text-transform: uppercase; font-size: .72rem;
}
.mailliste .zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: .06rem .45rem;
  white-space: nowrap;
  font-size: .72rem;
}
.mailliste .zahl.leer { color: var(--muted-2); border-color: var(--line); font-weight: 400; }
.mailliste .zahl.fehler { color: var(--down); border-color: rgba(255,107,94,.4); font-weight: 400; }

/* System — Ringanzeigen statt Balken */
/* Postfächer */
.mailliste { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.mailliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .26rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.mailliste li:last-child { border-bottom: 0; }
.mailliste .konto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .08em; text-transform: uppercase; font-size: .72rem;
}
.mailliste .zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: .06rem .45rem;
  white-space: nowrap;
  font-size: .72rem;
}
.mailliste .zahl.leer { color: var(--muted-2); border-color: var(--line); font-weight: 400; }
.mailliste .zahl.fehler { color: var(--down); border-color: rgba(255,107,94,.4); font-weight: 400; }

/* System — Ringanzeigen statt Balken */
.ringe { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

.ring { position: relative; width: 62px; height: 62px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .spur { stroke: var(--hud-faint); }
.ring .wert { stroke: var(--hud); filter: drop-shadow(0 0 5px var(--hud-glow)); transition: stroke-dashoffset .6s; }
.ring .wert.warn { stroke: var(--accent); filter: drop-shadow(0 0 5px var(--accent-dim)); }

.ring-zahl {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.ring-name {
  text-align: center;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .25rem;
}

/* --- Die Kugel ---------------------------------------------------------- */

.orb-pane {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,122,69,.10), transparent 62%),
    var(--surface);
}

#orbCanvas { width: 100%; height: 100%; display: block; }

/* Pflicht: display:flex schlaegt das hidden-Attribut. Ohne diese Zeile blieb
   die Kugel stehen, wenn der Globus eingeschaltet wurde, und schob ihn aus
   dem Bild. */

/* --- Auftragsliste über der Kugel ----------------------------------------

   Bewusst schmal und ruhig: Sie soll nicht mit der Kugel konkurrieren,
   sondern danebenstehen wie ein Notizzettel. Ist nichts offen, ist von der
   Liste nichts zu sehen - nur das Eingabefeld, und auch das gedämpft.

   Warum es sie gibt: Fällt das Mikrofon aus oder arbeitet Assistent gerade an
   etwas Langem, konnte man vorher nur warten. Jetzt tippt man hinein, auch
   mehreres, und geht weg. */
.auftraege {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
  padding-left: .9rem;
}

.auftrag-titel {
  margin: 0;
  /* Wie auf der Vorlage: eine richtige Ueberschrift, nicht eine
     Kleingedrucktes-Zeile. */
  font-size: .88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hud-hell);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.auftrag-zahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  letter-spacing: .08em;
}
.auftrag-leer {
  margin: .2rem 0 0;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--muted-2);
}
.auftrag-leer[hidden] { display: none; }

.auftrag-eingabe {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.auftrag-eingabe input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(47, 156, 244, .05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  padding: .45rem .7rem;
  transition: border-color .15s, background .15s;
}
.auftrag-eingabe input::placeholder { color: var(--muted-2); }
.auftrag-eingabe input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(111, 208, 255, .07);
}
.auftrag-eingabe button {
  flex: none;
  width: 2rem; height: 2rem;
  background: rgba(47, 156, 244, .06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.auftrag-eingabe button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.auftrag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.auftrag-liste:empty { display: none; }
.auftrag-liste li {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  font-size: .76rem;
  color: var(--text-2);
  padding: .28rem .5rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(47, 156, 244, .03);
}
.auftrag-liste li .nr {
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  font-size: .68rem;
}
.auftrag-liste li .was {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auftrag-liste li .weg {
  background: none; border: 0; cursor: pointer;
  color: var(--muted-2); font-size: .8rem; line-height: 1;
  padding: 0 .1rem;
}
.auftrag-liste li .weg:hover { color: var(--down); }

/* Was gerade abgearbeitet wird, leuchtet und pulst leise. */
.auftrag-liste li.laeuft {
  border-left-color: var(--accent);
  background: rgba(111, 208, 255, .08);
}
.auftrag-liste li.laeuft .was { color: var(--text); }
.auftrag-liste li.laeuft .nr::after {
  content: "▸";
  color: var(--accent);
}
.auftrag-liste li.wartet { border-left-color: var(--line-strong); }

@media (prefers-reduced-motion: reduce) {
  .auftrag-liste li.laeuft { animation: none; }
}

.orb-zone[hidden] { display: none; }

.orb-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: .4rem;
}

/* Die Zeichenflaeche muss den Knopf ausfuellen. Ohne diese Regel nimmt
   ein <canvas> seine Standardgroesse von 300x150 an - dadurch war die
   Kugel winzig, egal wie gross der Knopf war. Die Regel hiess frueher
   #orbCanvas und wurde beim Umbenennen auf netzCanvas verwaist. */
#netzCanvas, #orbCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.orb {
  position: relative;
  /* War min(88%, 56vh). Mit der Auftragsliste daneben ist das zu breit -
     die Kugel schob die Liste aus dem Fenster. */
  width: min(82%, 46vh);
  aspect-ratio: 1;
  border: 0; padding: 0; background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 1 auto;
  min-height: 0;
}

/* Einzelansicht: der Kern bekommt ein eigenes Fenster - dann darf er die
   Flaeche auch ausfuellen statt in der Mitte zu schweben. */
body[data-ansicht="kern"] .orb-hint { font-size: .74rem; }

/* Weltkarte im Kern-Fenster */
.globus-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: .4rem;
}
.globus-zone[hidden] { display: none; }

#globusCanvas {
  width: min(96%, 78vh);
  aspect-ratio: 1;
  flex: 0 1 auto;
  min-height: 0;
}

.globus-zaehler {
  margin: 0;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hud);
  text-shadow: 0 0 10px var(--hud-glow);
}

.globus-hinweis {
  margin: 0;
  max-width: 52ch;
  text-align: center;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-2);
  min-height: 2.2em;
}

.orb-hint {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.orb-answer {
  margin: 0;
  max-width: 42ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-2);
  max-height: 5.5em;
  overflow: auto;
}

.orb-answer:empty { display: none; }

/* Laengere Antworten - Listen, Uebersichten, Tabellen. Linksbuendig und mit
   erhaltenen Zeilenumbruechen, sonst ist eine Geraeteliste nicht lesbar. */
.orb-answer.lang {
  text-align: left;
  max-width: 74ch;
  max-height: min(52vh, 26em);
  white-space: pre-wrap;
  font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--text);
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--hud);
  background: rgba(47, 156, 244, .04);
}

/* --- Anhaenge im Chat ----------------------------------------------------
   Alles, was Assistent erzeugt - Bilder, Videos, Seiten, Tonspuren, Pakete -
   erscheint hier als Karte zum Oeffnen und Speichern. */

.anhang {
  display: flex;
  align-items: center;
  gap: .7rem;
  align-self: flex-start;
  max-width: 92%;
  padding: .6rem .8rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--hud);
  background: rgba(47, 156, 244, .05);
  border-radius: var(--radius);
}

.anhang-zeichen {
  font-size: 1.3rem;
  color: var(--hud);
  text-shadow: 0 0 12px var(--hud-glow);
  line-height: 1;
}

.anhang-text { min-width: 0; flex: 1; }

.anhang-name {
  font-size: .82rem;
  color: var(--text);
  word-break: break-word;
}

.anhang-art {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .1rem;
}

.anhang-knoepfe { display: flex; gap: .35rem; flex: 0 0 auto; }
.anhang-knoepfe .ghost { padding: .22rem .55rem; font-size: .66rem; }

.anhang-bild {
  align-self: flex-start;
  max-width: 92%;
  max-height: 42vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: -.2rem;
}

.orb-results { display: flex; flex-direction: column; gap: .35rem; align-items: center; }

.result {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: .3rem .8rem;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}

.result:hover { background: var(--accent-tint); box-shadow: 0 0 14px var(--accent-tint-2); }

@keyframes pulse { 50% { opacity: .55; } }

/* --- Chat --------------------------------------------------------------- */

.chat-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--bar-h);
  background: rgba(4, 7, 11, .96);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  transform: translateY(101%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  z-index: 20;
  border-top: 1px solid var(--line-strong);
}

.chat-panel.open { transform: translateY(0); }

.chat-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.chat-head .tile-label { margin-right: auto; }

.log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.msg {
  max-width: 84%;
  padding: .7rem .95rem;
  border-radius: var(--radius);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: .9rem;
}

.msg.user {
  align-self: flex-end;
  background: var(--accent-tint);
  border: 1px solid var(--accent-dim);
  color: var(--text);
}

.msg.assistant {
  align-self: flex-start;
  background: rgba(47, 156, 244, .05);
  border: 1px solid var(--line);
  color: var(--text-2);
}

.msg.error {
  align-self: flex-start;
  background: rgba(255, 107, 94, .08);
  border: 1px solid rgba(255, 107, 94, .35);
  color: #ffab9f;
}

.tools {
  align-self: flex-start;
  font-size: .74rem;
  color: var(--muted);
  border-left: 2px solid var(--hud-dim);
  padding: .3rem 0 .3rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 84%;
  letter-spacing: .04em;
}

.tools .done { color: var(--muted-2); }

.composer {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  padding: .8rem 1.2rem 1.1rem;
  border-top: 1px solid var(--line);
  align-items: flex-end;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

textarea {
  flex: 1;
  resize: none;
  max-height: 30vh;
  background: rgba(47, 156, 244, .05);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  font: inherit;
  font-size: .9rem;
}

textarea::placeholder { color: var(--muted-2); }
textarea:focus, select:focus {
  outline: none;
  border-color: var(--hud);
  box-shadow: 0 0 14px var(--hud-glow) inset;
}

.send {
  background: var(--accent);
  border-color: var(--accent);
  color: #04070b;
  font-weight: 700;
  padding: .55rem 1.1rem;
}

.send:hover { box-shadow: 0 0 18px var(--accent-dim); }
.send:disabled { opacity: .4; cursor: default; }

.mic { font-size: .95rem; width: 2.4rem; padding: .48rem 0; text-align: center; }
.mic.recording {
  background: var(--accent);
  border-color: var(--accent);
  color: #04070b;
  animation: pulse 1.1s infinite;
}

/* --- QR-Code ------------------------------------------------------------ */

.qr-overlay {
  position: fixed; inset: 0;
  background: rgba(2, 4, 7, .9);
  display: grid; place-items: center;
  z-index: 40; padding: 1rem;
}

.qr-karte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-align: center;
  max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  box-shadow: 0 0 60px rgba(47, 156, 244, .12);
}

.qr-bild {
  width: 260px; height: 260px;
  background: #fff; padding: 10px;
  border-radius: 4px;
  image-rendering: pixelated;
}

.qr-text { margin: 0; font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.qr-klein { margin: 0; font-size: .72rem; color: var(--muted); line-height: 1.6; }
.qr-wert { color: var(--accent); font-weight: 600; }

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 900px) {
  .dash {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(240px, 42vh) auto;
    grid-template-areas: "tl" "tr" "bl" "br";
    /* Gestapelt scrollt die Seite selbst. Feste Höhe hier würde zusammen mit
       min-height:0 an den Kacheln die "auto"-Reihen auf 0 kollabieren lassen. */
    height: auto;
    min-height: 0;
  }
  .dash > .tile { min-height: min-content; }
  .dash > .tile .tile-body { overflow: visible; }
  .orb { width: min(62%, 34vh); }
  .wx-temp { font-size: 2rem; }
  .tile { padding: .75rem .85rem; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--hud-dim); }

/* --- Diagramme statt Ringe ----------------------------------------------- */
.diagramm {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-evenly;
  gap: .5rem; height: 100%; min-height: 62px;
  padding: .3rem .5rem 0; width: 100%;
  border-bottom: 1px solid var(--line-strong);
}
.diagramm::before {
  content: ""; position: absolute; inset: 0 0 1px 0; pointer-events: none; opacity: .45;
  background:
    linear-gradient(to top, transparent 24.6%, var(--line) 24.6% calc(24.6% + 1px), transparent calc(24.6% + 1px)),
    linear-gradient(to top, transparent 49.6%, var(--line) 49.6% calc(49.6% + 1px), transparent calc(49.6% + 1px)),
    linear-gradient(to top, transparent 74.6%, var(--line) 74.6% calc(74.6% + 1px), transparent calc(74.6% + 1px));
}
.stab { display: flex; flex-direction: column; align-items: center; gap: .3rem;
        flex: 1; min-width: 0; height: 100%; }
.stab-bahn { position: relative; width: 100%; max-width: 26px; flex: 1;
             display: flex; align-items: flex-end; }
.stab-fuell {
  width: 100%;
  background: linear-gradient(180deg, #ff8c1a, #ff6a00 55%, rgba(255,106,0,.4));
  box-shadow: 0 0 9px rgba(255,140,26,.5);
  transition: height 1.1s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.stab-fuell::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: var(--text); box-shadow: 0 0 6px var(--text);
}
.stab-fuell.warn { background: linear-gradient(180deg, #ff5a4a, rgba(224,80,60,.4)); }
.stab-fuell.gut  { background: linear-gradient(180deg, rgba(255,140,26,.5), rgba(255,106,0,.2)); }
.stab-wert { font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.stab-name { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
             color: var(--muted); text-align: center; }

.kurs { display: grid; grid-template-columns: 5.4rem minmax(0,1fr) 4.6rem 3.6rem;
        gap: .6rem; align-items: center; padding: .16rem 0; }
.kurs-name { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kurs-bahn { height: 9px; position: relative; background: rgba(47,156,244,.07);
             border: 1px solid var(--line); }
.kurs-bahn::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px;
                     width: 1px; background: var(--line-strong); }
.kurs-fuell { position: absolute; top: 0; bottom: 0; transition: width .9s cubic-bezier(.22,1,.36,1); }
.kurs-fuell.up { background: linear-gradient(90deg, rgba(255,106,0,.55), #ff8c1a); }
.kurs-fuell.down { background: linear-gradient(270deg, rgba(224,80,60,.55), #ff5a4a); }
.kurs-preis { font-size: .74rem; text-align: right; font-variant-numeric: tabular-nums; }
.kurs-diff { font-size: .7rem; text-align: right; font-variant-numeric: tabular-nums; }
.kurs-diff.up { color: #ff8c1a; } .kurs-diff.down { color: #ff5a4a; }

/* --- Globus klein oben in der System-Kachel ------------------------------ */
.globus-kopf {
  display: flex; align-items: center; gap: .9rem; flex: 0 0 auto;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line);
}
#globusCanvas { width: 112px; height: 112px; flex: 0 0 auto; border-radius: 50%;
                box-shadow: 0 0 26px rgba(47,156,244,.18); }
.globus-daten { min-width: 0; flex: 1; }
.globus-zaehler { margin: 0; font-size: .6rem; letter-spacing: .2em;
                  text-transform: uppercase; color: var(--hud); }
.globus-hinweis { margin: .3rem 0 0; font-size: .7rem; line-height: 1.35;
                  color: var(--text-2);
                  display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; overflow: hidden; }

/* Die System-Kachel hat drei Bloecke - ohne feste Aufteilung schiebt der
   erste alle anderen aus dem Bild. */
.tile[data-area="tl"] .tile-glas { gap: .35rem; overflow: hidden; }
.tile[data-area="tl"] .tile-note { flex: 0 0 auto; font-size: .62rem; margin: .15rem 0 0; }
.tile[data-area="tl"] .tile-unterlabel { flex: 0 0 auto; margin-top: .1rem; padding-top: .3rem; }

/* Die drei Bloecke teilen sich den Platz fest auf: System bekommt am
   meisten, Maerkte und Postfaecher je weniger. Ohne das schob der erste
   Block die Postfaecher unten aus dem Bild. */
.tile[data-area="tl"] #tSystem  { flex: 1.4 1 0; min-height: 0; overflow: hidden; }
.tile[data-area="tl"] #tMarkets { flex: 0 0 auto; }
.tile[data-area="tl"] #tMail    { flex: 1 1 0; min-height: 0; overflow: hidden; }

/* Saeulen nicht ueber die ganze Breite ziehen - sonst stehen drei Balken
   verloren auf 1700 Pixeln. */
.tile[data-area="tl"] .diagramm { max-width: 460px; margin: 0 auto; }
.tile[data-area="tl"] .kurs { max-width: 620px; margin: 0 auto; }

@media (max-height: 620px) {
  #globusCanvas { width: 84px; height: 84px; }
  .globus-hinweis { display: none; }
}

/* --- Stummschalter fuers Mikrofon ---------------------------------------- */
.mute { display: inline-flex; align-items: center; gap: .35rem; }
.mute-zeichen { font-size: .95rem; line-height: 1; }

/* Stumm: deutlich sichtbar, damit man es nicht uebersieht */
.mute.stumm {
  color: var(--down);
  border-color: var(--down);
  background: rgba(224, 112, 92, .10);
  box-shadow: 0 0 12px rgba(224, 112, 92, .28) inset;
}
.mute.stumm .mute-zeichen { opacity: .5; text-decoration: line-through; }

/* Einzelansicht Kern: die Kugel darf die Kachel wirklich ausfuellen.
   Diese Regel ging beim Wiederherstellen des Stylesheets verloren -
   deshalb schwebte die Kugel klein in der Mitte. */
body[data-ansicht="kern"] .orb {
  /* flex: 0 0 auto ist entscheidend - vorher stand hier 0 1 auto, dadurch
     schrumpfte die Kugel auf ein Zehntel ihrer Groesse, sobald Hinweistext
     und Antwortfeld Platz brauchten. */
  width: min(92%, 70vh);
  flex: 0 0 auto;
}
body[data-ansicht="kern"] .orb-hint { font-size: .74rem; }
body[data-ansicht="kern"] .orb-zone { gap: 1rem; }

/* --- Kern: Kugel links, Ablagenspur rechts -------------------------------
   Bewusst kein Chatverlauf. Was er sagt, hoert man; was er ABLEGT, will man
   sehen - Notizen, Bilder, Dateien, geloeschte Mails. */
/* Drei Spalten: die Kugel in der Mitte des Blicks, rechts daneben die
   Auftragsliste, ganz aussen die Ablagespur.

   Die Kugel gibt dafuer etwas Breite ab - sie war vorher so gross, dass
   daneben nichts mehr Platz hatte. Sie bleibt das Auffaelligste im
   Fenster, nur eben nicht mehr formatfuellend. */
.kern-reihe {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 24%) minmax(170px, 22%);
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ablagen {
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 0;
  border-left: 1px solid var(--line);
  padding-left: .9rem;
}

.ablagen-titel {
  margin: 0; flex: 0 0 auto;
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--hud); text-shadow: 0 0 10px var(--hud-glow);
}

.ablagen-liste {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: .45rem;
}

.ablage {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem;
  align-items: start;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
  animation: ablageRein .5s ease-out;
}
@keyframes ablageRein {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

.ablage-zeichen { color: #ff8c1a; font-size: .9rem; line-height: 1.1; }
.ablage-text { min-width: 0; }
.ablage-was {
  font-size: .68rem; color: var(--text); line-height: 1.35;
  word-break: break-word;
}
.ablage-zeit {
  font-size: .56rem; letter-spacing: .12em; color: var(--muted-2);
  margin-top: .1rem;
}
.ablage a { color: var(--accent); text-decoration: none; }
.ablage a:hover { text-decoration: underline; }

.ablagen-leer { margin: 0; font-size: .66rem; color: var(--muted-2); }

/* --- Gesprächsverlauf in der rechten Spur --------------------------------

   Er stand bisher nur hinter der Kugel, hinter der Escape-Taste. Wer
   nachlesen wollte, was vor fünf Minuten gesagt wurde, musste ihn erst
   hervorholen. Jetzt liegt er offen und lässt sich durchscrollen.

   Die Spur teilt sich die Höhe: der Verlauf bekommt den größeren Teil,
   das Abgelegte darunter reicht mit vier bis fünf Zeilen. */
.verlauf-spur {
  flex: 1 1 auto;
  min-height: 4rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-right: .2rem;
}
.verlauf-spur::-webkit-scrollbar { width: 6px; }
.verlauf-spur::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 3px;
}

.vz {
  font-size: .72rem;
  line-height: 1.45;
  padding: .3rem .45rem;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  word-break: break-word;
}
/* Was der Nutzer gesagt hat, steht gedämpft und eingerückt - er weiß es ja
   noch. Die Antwort ist das, was man nachliest. */
.vz.ich {
  color: var(--muted);
  border-left-color: var(--line-strong);
  background: rgba(47, 156, 244, .04);
  font-style: italic;
}
.vz.er {
  color: var(--text-2);
  border-left-color: var(--accent-dim);
  background: rgba(111, 208, 255, .05);
}
.vz .wann {
  display: block;
  font-size: .56rem;
  letter-spacing: .1em;
  color: var(--muted-2);
  margin-bottom: .1rem;
  font-variant-numeric: tabular-nums;
}

/* der Nutzer wollte mehr Luft zwischen den beiden Feldern und in beiden mehr
   Zeilen sichtbar. Deshalb rueckt der Trenner deutlicher auseinander,
   und das Abgelegte darf hoeher werden. */
.abgelegt-titel { margin-top: 1.1rem; padding-top: .8rem;
                  border-top: 1px solid var(--line-strong); }
.ablagen-liste { flex: 1 1 auto; min-height: 5rem; max-height: 45%;
                 overflow-y: auto; scrollbar-width: thin; }
.verlauf-spur { min-height: 7rem; }
.ablagen { gap: .35rem; }


/* Schmale Fenster - der Hochkantmonitor ist 720 breit.

   Drei Spalten passen dort nicht. Die Auftragsliste bleibt aber NEBEN der
   Kugel, so wollte der Nutzer es: zwei Spalten oben, die Ablagespur wandert
   darunter. Erst wenn es noch enger wird, kommt alles untereinander. */
@media (max-width: 900px) {
  .kern-reihe {
    grid-template-columns: 1fr minmax(150px, 40%);
    grid-template-areas: "kugel auftraege" "ablage ablage";
    grid-template-rows: 1fr auto;
  }
  .orb-zone  { grid-area: kugel; }
  .auftraege { grid-area: auftraege; }
  .ablagen   { grid-area: ablage; }
  /* Auf dem Hochkantmonitor muss alles in 1280 Punkte Hoehe passen:
     Kugel, Auftraege, Verlauf und Abgelegtes. Die Kugel war dort so
     gross, dass Verlauf und Abgelegtes aus dem Fenster fielen. */
  .orb { width: min(80%, 24vh); }
  .kern-reihe { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .orb-zone { justify-content: flex-start; padding-top: .4rem; }

  /* Der neue Aufbau bleibt auch hier zweispaltig: Gehirn links,
     Auftraege rechts. Ohne diese Zeile fiel er auf dem Hochkantmonitor
     - und genau dort steht der Kern - in eine Spalte zusammen, und die
     Auftraege lagen ueber dem Gehirn. */
  .kern-oben { grid-template-columns: 1fr minmax(150px, 40%); }
  .kern-oben .orb { width: 100% !important; }
  .ablagen { border-left: 0; border-top: 1px solid var(--line);
             padding-left: 0; padding-top: .6rem;
             min-height: 0; overflow: hidden; }
}

@media (max-width: 560px) {
  .kern-reihe {
    grid-template-columns: 1fr;
    grid-template-areas: "kugel" "auftraege" "ablage";
    grid-template-rows: 1fr auto auto;
  }
  /* Erst auf dem Handy untereinander. */
  .kern-oben { grid-template-columns: 1fr; }
  .auftraege { border-left: 0; border-top: 1px solid var(--line);
               padding-left: 0; padding-top: .6rem; max-height: 24vh; }
}


/* --- Arbeitsmodus ------------------------------------------------------
   Waehrend langer Aufgaben - Bilderserien, Videos - legt sich ein Streifen
   ueber die Oberflaeche. Das Weckwort ist dann stumm, damit Assistent sich
   nicht selbst aufnimmt. */
.arbeit-streifen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: .8rem;
  padding: .7rem 1.2rem;
  background: linear-gradient(180deg, rgba(20,90,170,.16), rgba(6,10,16,.96));
  border-top: 1px solid rgba(196,105,95,.45);
  font-size: .82rem; color: #e8d5cf;
  backdrop-filter: blur(6px);
}
.arbeit-streifen.an { display: flex; }
.arbeit-punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c4695f; box-shadow: 0 0 12px #c4695f;
  animation: arbeit-pulsen 1.4s ease-in-out infinite;
}
@keyframes arbeit-pulsen {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.arbeit-zeit {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: #b9a49d; font-size: .76rem;
}


/* ==========================================================================
   Die drei Felder aus des Nutzers Vorlage vom 11.08.2026: Sprechfeld, Verlauf
   mit Lastdiagramm, Ablage mit Speicherring.
   ========================================================================== */

/* Feste Hoehe. Vorher wuchs der Kasten mit dem Text und schob sich ueber
   den Verlauf - bei einer laengeren Antwort standen zwei Texte
   uebereinander. Jetzt bleibt er, wie er ist, und laenger Gesagtes
   laesst sich darin scrollen. */

.sf-kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.sf-punkt { width: 1.15rem; height: 1.15rem; border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #dff3ff, var(--hud));
            box-shadow: 0 0 14px var(--hud-glow); flex: 0 0 auto; }
.sf-name { font-size: 1.05rem; letter-spacing: .18em; color: var(--hud-hell); }
.sf-marke { margin-left: auto; display: flex; align-items: center; gap: .4rem;
            border: 1px solid var(--line-strong); border-radius: 999px;
            padding: .12rem .7rem; font-size: .62rem; letter-spacing: .14em;
            color: var(--text-2); }
.sf-marke i { width: .5rem; height: .5rem; border-radius: 50%;
              background: var(--up); box-shadow: 0 0 8px var(--up); }
.sf-marke.spricht i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* Text links, Balkenmesser rechts - so steht es auf der Vorlage. */
.sf-zeile { display: flex; align-items: center; gap: 1rem; min-height: 0; }
.sf-zeile .orb-answer { flex: 1 1 auto; min-width: 0; }

/* --- Pegelanzeigen aus reinem CSS ----------------------------------------
   des Nutzers Spezifikation vom 11.08.2026: "horizontale Wellenform-Animation
   (CSS-Keyframes für 'scaleY' auf mehreren kleinen Balken)" und
   "vertikale CSS-Audio-Pegelstriche" links und rechts vom Kern.

   Die Bewegung macht der Browser, nicht das Programm - das ist der Sinn
   der Sache. Die HOEHE des Ausschlags kommt aber aus --pegel, und die
   setzt app.js aus dem wirklichen Zustand. Der Takt ist Zier, der
   Ausschlag ist gemessen.

   Zwei Groessen bestimmen jeden Strich:
     --pegel  wie laut es gerade ist   (kommt aus app.js, gilt fuer alle)
     --form   wie lang DIESER Strich   (steht fest, gibt der Reihe Gestalt)

   Ohne --form waren alle Striche gleich hoch - das sah aus wie eine
   Reihe Kaestchen, nicht wie eine Stimme. */
@keyframes pegel-hoch {
  0%, 100% { transform: scaleY(calc(var(--form, 1) * (.18 + var(--pegel, .3) * .35))); }
  50%      { transform: scaleY(calc(var(--form, 1) * (.35 + var(--pegel, .3) * .65))); }
}
@keyframes pegel-breit {
  0%, 100% { transform: scaleX(calc(var(--form, 1) * (.22 + var(--pegel, .3) * .38))); }
  50%      { transform: scaleX(calc(var(--form, 1) * (.40 + var(--pegel, .3) * .60))); }
}

.sf-balken { flex: 0 0 auto; margin-left: auto;
             width: 5.5rem; height: 3.2rem;
             display: flex; align-items: flex-end; gap: .28rem; }
.sf-balken i { flex: 1 1 0; height: 100%; display: block;
               background: linear-gradient(180deg, var(--accent), var(--hud));
               transform-origin: bottom;
               animation: pegel-hoch 1.1s ease-in-out infinite; }

/* Schmale Striche mit Luft dazwischen - auf der Vorlage ist es eine
   Wellenform, kein gefuellter Balken. Mit "flex: 1 1 0" waren die
   Striche dreizehn Pixel breit und die Zwischenraeume verschwanden. */
.sf-kurve { width: 100%; height: 2.6rem; margin-top: .3rem;
            display: flex; align-items: center;
            justify-content: space-between; }
.sf-kurve i { flex: 0 0 2px; width: 2px; height: 100%; display: block;
              border-radius: 1px;
              background: var(--accent);
              box-shadow: 0 0 5px var(--hud-glow);
              transform-origin: center;
              animation: pegel-hoch 1.05s ease-in-out infinite; }

/* Die beiden senkrechten Pegelstriche neben dem Gehirn. Sie liegen quer:
   jeder Strich ist eine waagerechte Latte, die in der Breite zappelt. */
.seitenwelle { display: flex; flex-direction: column;
               justify-content: space-between; align-items: center; }
/* Die Farbe der beiden Pegelstriche.
   der Nutzer: "Das sieht nicht schoen aus, wenn das so hellblau ist auf
   dunklerem Blau." Vorher war es das helle Cyan der Akzentfarbe und
   stach heraus. Jetzt dasselbe kraeftige Blau wie das Gehirn, mit
   einem hellen Kern nur im Schein. */
.seitenwelle i { width: 100%; height: 3px; display: block; border-radius: 2px;
                 background: #2f8cff; box-shadow: 0 0 6px rgba(47,140,255,.8);
                 transform-origin: center;
                 animation: pegel-breit 1.25s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .sf-balken i, .sf-kurve i, .seitenwelle i { animation: none; }
}

/* --- Der Rahmen um die Kernscheibe --------------------------------------
   Auf des Nutzers Vorlage liegt um die ganze Flaeche ein leuchtender Rahmen mit
   vier Eckwinkeln. Er sitzt UEBER dem Glas, faengt aber keine Maus ab -
   sonst waere darunter kein Knopf mehr erreichbar. */
.hudrahmen {
  position: absolute; inset: .45rem; pointer-events: none; z-index: 4;
  /* Doppelrahmen: der aeussere ist diese Kante, der innere kommt aus dem
     ::before darunter. Der Schein liegt innen UND aussen - genau die
     Werte aus des Nutzers Spezifikation. */
  border: 1px solid var(--hud);
  border-radius: 14px;
  box-shadow: var(--hud-schein);
}
.hudrahmen::before {
  content: ""; position: absolute; inset: .3rem;
  border: 1px solid rgba(0, 168, 255, .35);
  border-radius: 10px;
}
.hudrahmen .ecke {
  position: absolute; width: 1.7rem; height: 1.7rem;
  border: 2px solid var(--hud-hell);
  box-shadow: 0 0 10px rgba(0, 168, 255, .6);
}
/* Die dekorativen Tech-Ecken an der Unterseite: je ein kurzer Steg, der
   vom Eckwinkel nach innen laeuft. Auf der Vorlage sitzt links unten
   ausserdem ein Viertelbogen - der kommt aus dem Tickbogen der Scheibe. */
.hudrahmen .lu::after, .hudrahmen .ru::after {
  content: ""; position: absolute; bottom: -2px; width: 3.2rem; height: 2px;
  background: linear-gradient(90deg, var(--hud), rgba(0,168,255,0));
  box-shadow: 0 0 8px rgba(0, 168, 255, .6);
}
.hudrahmen .lu::after { left: 1.7rem; }
.hudrahmen .ru::after { right: 1.7rem;
  background: linear-gradient(270deg, var(--hud), rgba(0,168,255,0)); }
.hudrahmen .lo { top: -1px;    left: -1px;
  border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.hudrahmen .ro { top: -1px;    right: -1px;
  border-left: 0;  border-bottom: 0; border-top-right-radius: 14px; }
.hudrahmen .lu { bottom: -1px; left: -1px;
  border-right: 0; border-top: 0;    border-bottom-left-radius: 14px; }
.hudrahmen .ru { bottom: -1px; right: -1px;
  border-left: 0;  border-top: 0;    border-bottom-right-radius: 14px; }

/* --- Gehirn mit den Wellen links und rechts ----------------------------- */
/* Die Reihe waechst NICHT mit. Sonst schiebt sie den Hinweis "Mikrofon ist
   an" ans untere Ende, statt ihn unter das Gehirn zu setzen. */
.orb-reihe {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; width: 100%; min-height: 0; flex: 0 1 auto;
}
/* Feste Hoehe in vh, keine Prozente: ein prozentualer Wert waere hier
   unbestimmt und die Flaeche damit null Pixel hoch - die linke Welle war
   deshalb gar nicht zu sehen. */
.seitenwelle { flex: 0 0 auto; width: 2.2rem; height: min(20vh, 11rem);
               display: block; opacity: .85; }
/* Im Kern-Fenster gelten eigene Masse. Die stehen ganz unten in dieser
   Datei bei ".kern-oben .orb-reihe" - dort muessen sie sein, weil die
   aeltere Regel ".kern-oben .orb" ein !important traegt. */

.verlauf-reihe { display: grid; grid-template-columns: 1fr 15rem; gap: .9rem;
                 align-items: stretch; min-height: 0; }
.lastfeld { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem;
            display: flex; flex-direction: column; gap: .3rem; }
.lastfeld canvas { width: 100%; flex: 1 1 auto; min-height: 3.4rem; display: block; }
.lastwerte { display: flex; justify-content: space-between; font-size: .62rem;
             color: var(--muted); letter-spacing: .1em; }
.lastwerte b { color: var(--hud-hell); font-weight: 400; }

.ablage-reihe { display: grid; grid-template-columns: 1fr 9.5rem; gap: .9rem;
                align-items: center; }
.ablage-spalte { min-width: 0; }
.speicherring { position: relative; width: 9rem; height: 9rem; }
.speicherring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
/* Der Speicherring nach des Nutzers Vorlage - zwei Reifen und eine Teilung.

   Aussen ein feiner Reifen, innen ein kraeftiger. Der kraeftige ist
   nicht durchgezogen, sondern in Segmente geteilt: darueber liegt ein
   dritter Kreis in Hintergrundfarbe, gestrichelt, der ihn zerschneidet.
   Das ist billiger und genauer als vierundzwanzig einzelne Striche. */
.speicherring .aussen-spur { fill: none; stroke: rgba(0,168,255,.14);
                             stroke-width: 1.8; }
.speicherring .aussen-wert { fill: none; stroke: var(--accent);
                             stroke-width: 2.2; stroke-linecap: butt;
                             filter: drop-shadow(0 0 6px var(--hud-glow));
                             transition: stroke-dasharray .8s ease; }
/* Die Spur ist DUNKEL. Vorher war sie so hell, dass der ganze Reifen
   gefuellt aussah und man den Wert nicht mehr ablesen konnte. */
.speicherring .spur { fill: none; stroke: rgba(0,30,66,.9); stroke-width: 13; }
.speicherring .wert { fill: none; stroke: var(--hud); stroke-width: 13;
                      stroke-linecap: butt;
                      filter: drop-shadow(0 0 10px var(--hud-glow));
                      transition: stroke-dasharray .8s ease; }
/* Die Teilung. Umfang bei r=34 sind rund 214 Einheiten; mit der Periode
   5,95 werden daraus sechsunddreissig Segmente - feiner als vorher, wo
   die Luecken breiter waren als die Segmente und der Ring wie ein
   Zahnrad aussah. */
.speicherring .schnitte { fill: none; stroke: var(--bg); stroke-width: 14;
                          stroke-dasharray: 1.2 4.75; }
/* Die dunkle Scheibe in der Mitte - darauf steht die Zahl, wie in der
   Vorlage. Ohne sie lag die Zahl auf dem Reifen und war schlecht zu
   lesen. */
.speicherring .innen { fill: rgba(0,10,26,.82); stroke: rgba(0,168,255,.22);
                       stroke-width: .8; }
/* Flex-Spalte, NICHT Raster.
   Mit "display: grid; place-items: center" bekam jedes der beiden Kinder
   eine eigene Zeile ueber die halbe Hoehe - die Zahl sass dadurch im
   oberen Halbkreis und die Beschriftung im unteren, statt beide zusammen
   in der Mitte. */
.sr-mitte { position: absolute; inset: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; line-height: 1.25; }
.sr-mitte b { display: block; font-size: 2.1rem; font-weight: 400; color: #fff; }
/* Heller als vorher - in der Vorlage ist die Beschriftung gut lesbar,
   bei mir verschwand sie fast im Grund. */
.sr-mitte span { font-size: .58rem; color: var(--text-2); letter-spacing: .1em; }


/* --- Sprechfeld: Hoehe begrenzen ---------------------------------------- */
.sprechfeld .orb-answer {
  max-height: 4.6em; overflow-y: auto; margin: .2rem 0 .1rem;
  line-height: 1.5; font-size: .95rem; color: var(--text);
}
.sprechfeld .orb-answer::-webkit-scrollbar { width: 4px; }
.sprechfeld .orb-answer::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* Der Verlauf darf nicht mehr unter dem Sprechfeld durchscheinen. */
.verlauf-spur { position: relative; z-index: 1; background: transparent; }
.ablagen { position: relative; z-index: 1; }

/* --- Ablagezeilen wie in der Vorlage ------------------------------------- */
.ablagen-liste li {
  display: grid; grid-template-columns: 1.3rem 1fr auto .9rem;
  gap: .5rem; align-items: center;
  padding: .38rem .2rem; border-bottom: 1px solid var(--hud-faint);
  cursor: pointer;
}
.ablagen-liste li:hover { background: rgba(47,156,244,.07); }
.ablagen-liste .wann { color: var(--muted); font-size: .74rem; }
.ablagen-liste .pfeil { color: var(--muted); }

/* --- Verlaufzeilen: Uhrzeit, Text, Haken --------------------------------- */
.verlauf-spur .vz {
  display: grid; grid-template-columns: 3.2rem 1fr 1rem;
  gap: .5rem; align-items: baseline; padding: .22rem 0;
}
.verlauf-spur .vz .uhr { color: var(--hud); font-size: .74rem; }
.verlauf-spur .vz .was { color: var(--text-2); overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
.verlauf-spur .vz .haken { color: var(--up); font-size: .8rem; }


/* --- Das Sprechfeld sitzt zwischen Gehirn und Verlauf -------------------
   der Nutzer: "Das gehoert genau in die Luecke zwischen das Gehirn und
   Verlauf." Es spannt sich ueber die ganze Breite der Kernreihe und
   waechst mit dem Fenster mit - wie alles andere auch. */
.kern-reihe { position: relative; }

.orb-hint[hidden] { display: none !important; }


/* Ablagezeilen wie in der Vorlage: Zeichen, Name, Zeitpunkt, Pfeil. */
.ablagen-liste .zeichen { color: var(--hud); display: flex; align-items: center; }
/* Das Ordnersymbol ist eine kleine Zeichnung, keine Schrift - es muss
   deshalb eine Groesse bekommen, sonst nimmt es die Standardmasse an. */
.ablagen-liste .zeichen svg { width: 1.15rem; height: 1.15rem; display: block; }
.ablagen-liste .was { overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; color: var(--text); }


/* ==========================================================================
   Der Kern nach des Nutzers Vorlage - vier Baender untereinander.
   ========================================================================== */

.kern-block {
  display: flex; flex-direction: column; gap: .7rem;
  height: 100%; min-height: 0; padding: .2rem .2rem 0;
}
.kern-oben {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem;
  flex: 1 1 auto; min-height: 0;
}
.kern-oben .orb-zone { display: flex; flex-direction: column;
                       align-items: center; justify-content: center;
                       min-height: 0; }
/* Die Flaeche des Gehirns bleibt IN ihrer Spalte.

   Vorher hat sie sich ueber die ganze Breite gelegt und die
   Auftragsspalte verdeckt: Die alte Regel gab der Schaltflaeche eine
   feste Breite in Bildschirmhoehe (46vh), und das ist auf einem
   Hochkantmonitor breiter als die halbe Kachel. */
.kern-oben { overflow: hidden; }

/* DIE URSACHE, warum Auftraege und Gehirn uebereinander lagen:
   Aus der alten Anordnung tragen .orb-zone und .auftraege noch ein
   grid-area ("kugel", "auftraege"). In diesem neuen Raster gibt es
   diese Bereiche nicht - der Browser legt daraufhin unsichtbare
   Zusatzspalten an und stellt BEIDE in dieselbe Zelle. Deshalb hier
   ausdruecklich zuruecksetzen. */
.kern-oben > .orb-zone  { grid-area: auto; grid-column: 1; }
.kern-oben > .auftraege { grid-area: auto; grid-column: 2; }

.kern-oben .orb-zone { min-width: 0; overflow: hidden; }
.kern-oben .orb {
  width: 100% !important; max-width: 100%; height: auto;
  aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.kern-oben .orb canvas { width: 100%; height: 100%; display: block; }
.kern-oben .orb-hint { margin: .2rem 0 0; letter-spacing: .18em;
                       text-transform: uppercase; font-size: .78rem;
                       color: var(--hud-hell); }

.sprechfeld {
  flex: 0 0 auto; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(8, 22, 44, .55);
  padding: .7rem .9rem .5rem;
  box-shadow: 0 0 24px rgba(47,156,244,.10) inset;
}

.kern-feld { flex: 0 0 auto; }
.kern-feld .ablagen-titel { margin: 0 0 .4rem; }
.verlauf-reihe, .ablage-reihe { min-height: 0; }
.verlauf-spur { max-height: 9rem; overflow-y: auto; }
.ablage-spalte { max-height: 11rem; overflow-y: auto; }


/* ==========================================================================
   Rahmen und Zeilen nach des Nutzers Vorlage.
   ========================================================================== */

/* Verlauf und Ablage stehen in eigenen Rahmen mit abgeschraegter Ecke -
   wie die Kacheln der Kommandozentrale, damit beide Fenster
   zusammengehoeren. */
.kern-feld {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(8, 22, 44, .38);
  padding: .55rem .8rem .7rem;
  position: relative;
}
.kern-feld + .kern-feld { margin-top: .1rem; }
.kern-feld .ablagen-titel {
  display: flex; align-items: center; gap: .5rem;
  color: var(--hud-hell); letter-spacing: .18em; font-size: .8rem;
  text-transform: uppercase; margin: 0 0 .5rem;
}
/* Das kleine Zeichen vor der Ueberschrift. */
.kern-feld .ablagen-titel::before {
  content: ""; width: .8rem; height: .8rem; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 2px;
  box-shadow: 0 0 8px var(--hud-glow) inset;
}

/* Eine Verlaufszeile: Punkt, Uhrzeit, Text, Haken. */
.verlauf-spur .vz {
  display: grid; grid-template-columns: .8rem 3.4rem 1fr 1.2rem;
  gap: .55rem; align-items: baseline; padding: .3rem 0;
}
.verlauf-spur .vz .punkt {
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--hud); box-shadow: 0 0 6px var(--hud-glow);
  align-self: center;
}
.verlauf-spur .vz .uhr { color: var(--hud); font-size: .8rem;
                         font-variant-numeric: tabular-nums; }
.verlauf-spur .vz .was { color: var(--text-2); overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap;
                         font-size: .84rem; }
.verlauf-spur .vz .haken { color: var(--up); font-size: .85rem;
                           text-align: right; }
.verlauf-spur .vz.ich .was { color: var(--text); }

/* Das Lastdiagramm bekommt denselben Rahmen wie in der Vorlage. */
.lastfeld { border: 1px solid var(--line); border-radius: 8px;
            background: rgba(4, 12, 26, .5); }


/* --- Letzter Abgleich mit der Vorlage ----------------------------------- */

/* Das Gehirn bekommt den Platz, den es in der Vorlage hat.

   Vorsicht an dieser Stelle: Ein "1fr" fuer die Zeile hat die ganze
   Reihe auf dreizehn Bildpunkte zusammenfallen lassen - das Gehirn war
   weg. Der Grund: In einer Spalte ohne feste Hoehe rechnet 1fr gegen den
   Inhalt, und der Inhalt ist eine leere Flaeche. Deshalb hier eine
   Mindesthoehe in Bildschirmhoehe statt eines Anteils. */
/* Die Hoehen sind aufeinander abgestimmt: Oben das Gehirn, darunter
   Sprechfeld, Verlauf und Ablage - alles muss in die Fensterhoehe
   passen. Mit 46vh fuer die obere Reihe fiel die Ablage unten aus dem
   Bild, und die Zeile mit dem Mikrofonzustand verschwand mit. */
.kern-oben { min-height: 38vh; }
.kern-oben .orb-zone { justify-content: center; overflow: visible; }
.kern-oben .orb { height: auto; min-height: 31vh; }
/* Die Zustandszeile braucht ihren eigenen Platz - sonst schiebt sich
   das Sprechfeld darueber und halbiert die Schrift. */
.kern-oben .orb-hint { flex: 0 0 auto; margin: .3rem 0 .2rem;
                       position: relative; z-index: 2; }
.kern-oben { padding-bottom: 1.2rem; }

/* Der Text im Sprechfeld steht links, wie in der Vorlage. */
.sprechfeld .orb-answer { text-align: left; padding-left: 3.2rem; }
.sprechfeld .sf-kopf { padding-left: 0; }

/* Die Ueberschriften bekommen ihr Zeichen: Uhr und Wuerfel. */
.kern-feld:nth-of-type(1) .ablagen-titel::before,
.kern-feld:nth-of-type(2) .ablagen-titel::before {
  border-radius: 50%;
}
.kern-feld:nth-of-type(2) .ablagen-titel::before { border-radius: 2px; }

/* --- Gehirn zwischen den beiden Wellen, im Kern-Fenster ------------------
   Muss hier unten stehen: die Regel ".kern-oben .orb" weiter oben setzt
   "width: 100% !important" - sie stammt aus der Zeit, als das Gehirn
   allein in seiner Spalte stand. Mit den Wellen daneben schob sie es aus
   dem Bild. Gleiches Gewicht schlaegt sie nur, wenn sie spaeter kommt. */
/* Die Reihe nimmt die ganze obere Flaeche ein und stellt das Gehirn in
   deren Mitte. Genau so steht es auf der Vorlage: das Gehirn schwebt
   mittig, und "Mikrofon ist stumm" sitzt unten am Rand der Flaeche. */
.kern-oben .orb-reihe {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 auto; min-height: 0;
}
/* Das Gehirn fuellt die Flaeche.
 *
 * Vorher war es quadratisch und nahm nur die Breite neben den Wellen ein
 * - darunter klaffte eine handbreite Luecke bis zur Zeile "Mikrofon ist
 * an". Auf des Nutzers Vorlage reicht die Zeichnung von oben bis fast an diese
 * Zeile heran: das Gehirn oben, der Strang darunter, unten die Ringe.
 * gehirn.js richtet sich nach der kleineren der beiden Seiten, bekommt
 * also mit der vollen Hoehe von selbst mehr Groesse. */
.kern-oben .orb-reihe .orb {
  /* Volle Breite der Spalte, Hoehe knapp darueber - das ist das
     Seitenverhaeltnis der Zeichnung selbst (Gehirn, Strang, Ringe).
     Mit "height: 100%" schob sich der untere Ring unter die Zeile
     "Mikrofon ist an" und wurde abgeschnitten. */
  /* 88 Prozent: aussen bleibt der Streifen frei, in dem die beiden
     Pegelstriche stehen - wie auf der Vorlage, wo sie neben der
     Zeichnung sitzen und nicht darauf. */
  width: 88% !important; max-width: 88%;
  /* Nachgerechnet, nicht geschaetzt: gehirn.js setzt die Mitte auf
     0,42 der Hoehe und zeichnet die Sockelringe bis 1,30 Groessen
     darunter. Damit die Ringe noch hineinpassen, muss die Hoehe
     mindestens das 2,24-fache der Groesse sein - bei Groesse = 0,53
     der Breite also rund das 1,2-fache der Breite. Mit einem fast
     quadratischen Feld lagen die Ringe unterhalb des Randes und waren
     abgeschnitten. */
  height: auto; aspect-ratio: 1 / 1.25;
  flex: 0 0 auto; min-height: 0;
}
/* Die Pegelstriche stehen NEBEN der Zeichnung, nicht in der Reihe: so
   nehmen sie dem Gehirn keine Breite weg. Genau wie auf der Vorlage, wo
   sie ganz aussen an den Raendern sitzen. */
.kern-oben .orb-reihe .seitenwelle {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: min(14vh, 9rem); width: 2.6rem;
}
.kern-oben .orb-reihe .seitenwelle.links  { left: 0; }
.kern-oben .orb-reihe .seitenwelle.rechts { right: 0; }

/* ==========================================================================
   MASSE NACH DER VORLAGE - KERN-FENSTER
   ==========================================================================
   Am 11.08.2026 habe ich meinen Stand neben des Nutzers Vorlage gelegt und Band
   fuer Band verglichen. Zwei Dinge kamen dabei heraus.

   ERSTENS war alles rund halb so gross wie auf der Vorlage.

   ZWEITENS - und das war der eigentliche Fehler - habe ich gegen die
   falsche Fenstergroesse gebaut. Der Kern laeuft nicht auf 940 Pixeln
   Breite, sondern auf des Nutzers HOCHKANT-Monitor mit 720 x 1232. Seine
   Vorlage hat 941 x 1633, also fast dasselbe Verhaeltnis, aber eine ganz
   andere Groesse.

   Deshalb steht hier kein einziges Mass in Pixeln oder in rem, sondern
   alles in vw - also in Anteilen der Fensterbreite. Ein Wert von 3,19vw
   sind auf der Vorlage 30 Pixel und auf dem Hochkant-Monitor 23 - in
   beiden Faellen derselbe Anteil, und damit dasselbe Bild.

   Die Regeln gelten NUR fuer das eigene Kern-Fenster
   (body[data-ansicht="kern"]). Die Gesamtansicht mit vier Scheiben und
   die Handy-Ansicht behalten ihre eigenen Masse.
   ========================================================================== */

body[data-ansicht="kern"] {

  /* --- Kopfleiste ------------------------------------------------------- */
  .brand { font-size: 3.19vw; letter-spacing: .22em; gap: .7vw; }
  .brand .dot { width: 1.1vw; height: 1.1vw; }

  .topbar { gap: .8vw; row-gap: .6vw; padding-left: 1.4vw; padding-right: 1.4vw; }
  .topbar .badge  { font-size: 1.55vw; padding: .75vw 1.3vw; border-radius: .5vw; }
  .topbar .ghost  { font-size: 1.55vw; padding: .8vw 1.4vw; border-radius: .5vw; }
  .topbar .toggle { font-size: 1.55vw; gap: .5vw; }
  .topbar .toggle input { width: 1.7vw; height: 1.7vw; }
  .topbar select  { font-size: 1.55vw; padding: .75vw 1.2vw; }

  /* Das Wetter steht auf der Vorlage in einer EIGENEN Zeile unter den
     Schaltern, rechtsbuendig. Vorher hing es am Ende der Schalterzeile
     und war dort zusammengequetscht. */
  .topbar .wetter-strip { flex: 1 0 100%; justify-content: flex-end;
                          border: 0; padding: .2vw 0 0; margin-left: 0; gap: .8vw; }
  .wx-icon { font-size: 3.2vw; }
  .wx-temp { font-size: 3.6vw; }
  .wx-meta { font-size: 1.5vw; line-height: 1.35; }

  /* --- Kennzeichnung der Scheibe ---------------------------------------- */
  .tile-label  { font-size: 1.85vw; letter-spacing: .24em; }
  /* Der Buchstabenabstand haengt hinter dem letzten Zeichen noch mit
     dran. Ohne den negativen Ausgleich schob er das letzte "0" von
     "ARC-00" unter den Rahmen. */
  .tile-code   { font-size: 1.85vw; letter-spacing: .28em; margin-right: -.28em; }
  .statuspunkt { width: 1.1vw; height: 1.1vw; }
  .tile-glas   { padding: 1.4vw 2.2vw 1.2vw; gap: .8vw; }

  /* --- Auftraege -------------------------------------------------------- */
  .auftrag-titel { font-size: 1.85vw; letter-spacing: .22em; }
  .auftrag-eingabe input  { font-size: 1.6vw; padding: .9vw 1.1vw; }
  .auftrag-eingabe button { font-size: 2vw; }
  .auftrag-leer  { font-size: 1.5vw; line-height: 1.5; }

  /* --- Die Zeile unter dem Gehirn --------------------------------------- */
  .kern-oben .orb-hint { font-size: 1.8vw; letter-spacing: .22em;
                         color: var(--hud-hell); margin: .2vw 0 0; }

  /* --- Sprechfeld ------------------------------------------------------- */
  .sprechfeld { border-width: .28vw; border-color: var(--hud);
                box-shadow: 0 0 1.6vw rgba(0,168,255,.35),
                            inset 0 0 2vw rgba(0,168,255,.10);
                padding: 1.2vw 1.5vw .9vw; border-radius: 1.4vw; }
  .sf-name  { font-size: 2.55vw; letter-spacing: .18em; }
  .sf-punkt { width: 2.4vw; height: 2.4vw; }
  .sf-marke { font-size: 1.5vw; padding: .35vw 1.3vw; }
  .sprechfeld .orb-answer { font-size: 2.1vw; line-height: 1.5; max-height: 4.4em;
                            padding-left: 4.4vw; }
  .sf-kurve  { height: 4.8vw; }
  .sf-balken { width: 8vw; height: 5.4vw; }

  /* --- Verlauf und Ablage ----------------------------------------------- */
  .ablagen-titel { font-size: 1.85vw; letter-spacing: .22em; }
  .kern-feld     { padding: 1vw 1.2vw; }
  .verlauf-spur .vz { padding: .35vw 0;
                      grid-template-columns: 1.2vw 5vw 1fr 2vw; gap: .8vw; }
  .verlauf-spur .vz .uhr   { font-size: 1.5vw; }
  .verlauf-spur .vz .was   { font-size: 1.6vw; }
  .verlauf-spur .vz .haken { font-size: 1.7vw; }
  .verlauf-reihe { grid-template-columns: 1fr 40%; gap: 1.2vw; }
  .lastwerte { font-size: 1.25vw; }
  .ablagen-liste li { grid-template-columns: 2.4vw 1fr auto 1.6vw;
                      gap: .8vw; padding: .55vw .3vw; }
  .ablagen-liste .was    { font-size: 1.6vw; }
  .ablagen-liste .wann   { font-size: 1.4vw; }
  .ablagen-liste .zeichen svg { width: 2.2vw; height: 2.2vw; }
  .ablage-reihe { grid-template-columns: 1fr 21vw; gap: 1.2vw; }
  /* Groesser als vorher: die Zahl und die zwei Zeilen darunter passten
     nicht in die Scheibe und standen ueber dem Reifen. */
  .speicherring { width: 20vw; height: 20vw; }
  .sr-mitte      { gap: 0; }
  .sr-mitte b    { font-size: 3.9vw; line-height: 1; }
  .sr-mitte span { font-size: 1.15vw; line-height: 1.25; margin-top: .25vw; }

  /* --- Der Rahmen ------------------------------------------------------- */
  .hudrahmen { inset: .7vw; border-width: .22vw; border-radius: 1.6vw; }
  .hudrahmen .ecke { width: 3.4vw; height: 3.4vw; border-width: .42vw; }
}