/* jaco/edo service – Finder-Ansicht. Drei Schriftgrößen, Raster 4/8 px, keine Schatten, Verläufe, Icons.
   Global für schwebende Elemente (Navigation, Terminal, Benachrichtigungen): dunkles Glas mit Weichzeichner, runde Form. */
:root {
  --text: #000;
  --grund: #fff;
  --linie: #e5e7eb;
  --neben: #6b7280;
  --blau: #0000ff;
  --achtung: #d97706;
  --kritisch: #dc2626;
  --ok: #1a7f37;
  --ok-glas: #63d985;  /* A36: dasselbe Grün in der hellen Stufe für das dunkle Glas (Kontrast ≥ 4,5:1), statt Neon */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s24: 96px;
  --zeile: 28px;
  --leiste: 56px;
  --b1: 240px;
  --b2: 336px;
  --wort: 64px;
  --zustand: 104px;
  --skala: 72px;
  --datum: 120px;
  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --dauer: 200ms;
  --glas: rgba(16, 19, 27, 0.74);
  --glas-blau: rgba(20, 48, 158, 0.80);
  --glas-rand: rgba(255, 255, 255, 0.10);
  --glas-text: #f4f5f7;
  --glas-neben: rgba(244, 245, 247, 0.62);
  --glas-blur: blur(20px) saturate(160%);
  --laeuft: rgba(0, 0, 255, 0.10);
  --b-orte: 386px;  /* A27: die längste Domain (neue-heckinghauser-apotheke.de) ganz, gemessen mit der breiten DejaVu Sans */
  --b-inst: 280px;
  --terminal-h: min(34vh, 360px);
  --insel-band: 52px;  /* A32: eigenes Band unten für die Insel – die ruhende Pille verdeckt nie Inhalt */
  --glas-deckend: rgb(16, 19, 27);  /* wie --glas, ohne Durchscheinen: wo kein Weichzeichner greift (Popover in der Karte, A32) */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 500; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }

/* Schriftgrößen: genau drei */
.titel { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
h1, h2, h3, summary { text-wrap: balance; }
.spalte-kopf, .dok h2, .abschnitt-kopf { font-size: 16px; line-height: 24px; letter-spacing: 0; }

.neben { color: var(--neben); }
.z-neutral { color: var(--neben); }
.z-ok, .erledigt-wort { color: var(--ok); }
/* Risiko-Skala: 10 Striche auf der Grundlinie, daneben die Zahl */
.zelle.skala { display: flex; align-items: baseline; gap: var(--s1); overflow: visible; }
.skala-svg { display: block; flex: none; }
.skala-zahl { color: var(--neben); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.zeile.ausgewaehlt .skala-zahl, .zeile.ausgewaehlt .ext { color: #fff; }
.z-achtung { color: var(--achtung); }
.z-kritisch { color: var(--kritisch); }
.link { color: var(--blau); }
.link:hover { text-decoration: underline; }

.knopf {
  background: none;
  border: 0;
  color: var(--blau);
  height: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { text-decoration: underline; }
.knopf:focus-visible { outline-offset: 2px; }
/* Entscheidung (A34): die empfohlene Antwort gefüllt wie der Hauptknopf (.haupt), „nicht machen“ als grauer Textknopf daneben */
.knopf.primaer { background: var(--blau); color: #fff; height: var(--s8); padding: 0 var(--s4); border-radius: 0; }
.knopf.primaer:hover { text-decoration: none; background: #0000c8; }
.knopf.primaer:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.knopf.sekundaer { color: var(--neben); height: 28px; }
.knopf.sekundaer:hover { color: var(--text); }
/* A113: Baum in der Übersicht – Domains unter ihrem Abo, Programme unter ihrer Domain, je Stufe leicht eingerückt */
.tiefe-1 > .zelle:first-child, .tiefe-1 > .zeile-link > .zelle:first-child { padding-left: var(--s4); }
.tiefe-2 > .zelle:first-child, .tiefe-2 > .zeile-link > .zelle:first-child { padding-left: calc(2 * var(--s4)); }
/* A112 (Saitama 02.11.): Knopf mit sichtbarem Rahmen – „An den Service gegeben“ und die zwei gleichwertigen Wörter einer Entscheidung */
.knopf.rahmen { height: var(--s8); padding: 0 var(--s4); border: 1px solid var(--neben); border-radius: 0; color: var(--text); }
.knopf.rahmen:hover { text-decoration: none; border-color: var(--text); }

/* ---------- Start, Anmeldung, Einrichtung ---------- */
.start-seite { overflow-y: auto; scrollbar-gutter: stable; }
.start { width: 320px; max-width: calc(100% - 2 * var(--s4)); margin: 0 auto; padding: var(--s24) 0 var(--s12); }
.start-breit { width: 384px; }
.start .titel { margin-bottom: var(--s6); }
.formular { display: flex; flex-direction: column; gap: var(--s4); }
.feld { display: flex; flex-direction: column; gap: var(--s1); }
.feld input {
  height: var(--s8);
  padding: 0 var(--s2);
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--grund);
  appearance: none;
}
.feld input:focus-visible { outline: 2px solid var(--blau); outline-offset: -1px; }
.wert { min-height: 20px; overflow-wrap: anywhere; }
.geheimnis { letter-spacing: 0.04em; }
.uri { color: var(--neben); }
.qr-feld { align-items: flex-start; }
.qr { display: block; width: 228px; height: auto; }
.meldung { min-height: 20px; }
.haupt {
  height: var(--s8);
  padding: 0 var(--s4);
  border: 0;
  border-radius: 0;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}
.haupt:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ---------- App ---------- */
.app {
  display: grid;
  grid-template-rows: var(--leiste) minmax(0, 1fr) var(--insel-band);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* Kopf: Marke · Pille (Mitte) · Abmelden */
.kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
  height: var(--leiste);
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.marke { justify-self: start; overflow: hidden; text-overflow: ellipsis; }
.abmelden { display: flex; align-items: baseline; gap: var(--s3); justify-self: end; }
/* Datenstand (A34): grau „Stand 20:18“, orange bei abgebrochenem Live-Abgleich */
.datenstand { color: var(--neben); font-variant-numeric: tabular-nums; }
.datenstand.unterbrochen { color: var(--achtung); }
.knopf-text { background: none; border: 0; color: var(--blau); cursor: pointer; }
.knopf-text:hover { text-decoration: underline; }

/* Glas (global): Pille, Terminal, Benachrichtigungen */
.glas {
  background: var(--glas);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.pill { display: flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: 999px; }
/* Schalter Power now (klein, wie bei iOS): Spur 30 × 18, Knauf gleitet; an = Grün von jacoedo.de */
.betrieb { display: flex; }
.betrieb-schalter { display: inline-flex; align-items: center; gap: var(--s2); height: 28px; padding: 0 var(--s2) 0 var(--s3); border: 0; border-radius: 999px;
  background: none; color: var(--glas-neben); cursor: pointer; white-space: nowrap; }
.betrieb-schalter:hover { color: var(--glas-text); }
.betrieb-spur { position: relative; display: block; width: 30px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: background-color 220ms ease; }
.betrieb-knauf { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.betrieb-schalter[aria-checked="true"] { color: var(--glas-text); }
.betrieb-schalter[aria-checked="true"] .betrieb-spur { background: var(--ok-glas); }
.betrieb-schalter[aria-checked="true"] .betrieb-knauf { transform: translateX(12px); }
.betrieb[data-wartet] .betrieb-spur { animation: betrieb-puls 1.4s ease-in-out infinite; }
@keyframes betrieb-puls { 50% { opacity: 0.55; } }
.betrieb-schalter:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--glas-neben);
  cursor: pointer;
  transition: background-color var(--dauer) ease, color var(--dauer) ease;
}
.pill-link:hover { color: var(--glas-text); }
.pill-link.aktiv, .pill-link.aktiv-schalter { background: rgba(255, 255, 255, 0.14); color: var(--glas-text); }
.pill-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pill-trenner { width: 1px; height: 16px; margin: 0 var(--s1); background: var(--glas-rand); }
.pill-zahl {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #3b6bff;
  color: #fff;
  line-height: 18px;
  text-align: center;
}

/* Spalten der Übersicht (Live) */
.spalten[data-live] { display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden; }
.spalten[data-live] > .spalte { flex: none; }
.sp-orte { width: var(--b-orte); }
.sp-instanzen { width: var(--b-inst); }
.spalten[data-live] > .sp-bereiche { flex: 1 1 420px; min-width: 340px; }
.spalten[data-live] > .sp-detail { flex: 1 0 520px; min-width: 520px; }  /* Hauptlesefläche (A26): nie unter 520 px, zuerst gibt die Liste nach */
.spalten[data-live] > .sp-verlauf { flex: 1 1 auto; }
.sp-verlauf .spalte-inhalt { max-width: 1040px; }
/* Dokumente: drei feste Spalten */
.spalten:not([data-live]) { display: grid; grid-template-columns: var(--b-orte) var(--b-inst) minmax(0, 1fr); min-height: 0; }  /* A36: wie die übrigen Reiter */
.spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--linie);
}
.spalte:last-child { border-right: 0; }
.spalte-kopf {
  display: flex;
  gap: var(--s3);
  flex: none;
  height: 41px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  overflow: hidden;
}
.kopf-text { overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: none; color: var(--blau); }
.spalte-inhalt {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: var(--s1) 0 var(--s8);
}
.mit-terminal .spalte-inhalt { padding-bottom: calc(var(--terminal-h) + var(--s8)); }
.spalte.neu .spalte-inhalt { animation: einblenden var(--dauer) ease-out backwards; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Zeilen: Mindesthöhe statt fester Höhe (A21: mehrzeiliger Inhalt überdeckte sonst die nächste Zeile), gemeinsame Grundlinie
   in allen Spalten. Listen bleiben einzeilig (nowrap, Auslassungspunkte) und damit im 28-px-Raster. */
.zeile {
  position: relative;
  display: grid;
  align-items: start;
  column-gap: var(--s2);
  min-height: var(--zeile);
  padding: var(--s1) var(--s3);
  white-space: nowrap;
}
.zeile > * { position: relative; z-index: 1; }
a.zeile { cursor: default; }
a.zeile:focus-visible { outline-offset: -2px; }
.zeile.ausgewaehlt { background: var(--blau); color: #fff; }
.zeile.ausgewaehlt .neben, .zeile.ausgewaehlt .z-achtung, .zeile.ausgewaehlt .z-kritisch, .zeile.ausgewaehlt .z-neutral,
.zeile.ausgewaehlt .erledigt-wort, .zeile.ausgewaehlt .link, .zeile.ausgewaehlt .z-ok { color: #fff; }
.zeile.ausgewaehlt:focus-visible { outline-color: #fff; outline-offset: -4px; }
.zelle { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.zahl-links { font-variant-numeric: tabular-nums; }
.wort { text-align: left; }

/* Laufende Arbeit: Hinterlegung wächst mit dem Fortschritt, leichter Schimmer */
.zeile.laeuft::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: var(--f, 2%);
  background: linear-gradient(to top, var(--blau) 0 2px, var(--laeuft) 2px);
  transition: width 600ms cubic-bezier(.2, .7, .2, 1);
}
.zeile.laeuft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 255, 0.07) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%;
  animation: schimmer 1.8s linear infinite;
  pointer-events: none;
}
/* auf Blau (ausgewählt) ist die Fortschrittslinie grün (Grün von jacoedo.de) */
.zeile.ausgewaehlt.laeuft::before { background: linear-gradient(to top, var(--ok-glas) 0 2px, rgba(255, 255, 255, 0.12) 2px); }
.zeile.ausgewaehlt.laeuft::after { background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%); }
@keyframes schimmer { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* Reservierung ohne laufende Arbeit (A52, Edin 29.10.): eine Sitzung ist offen und wartet – die Linie steht still, ohne Fläche und
   Schimmer; die Blase sagt wer, was und seit wann. Ein Zeichen statt Wort plus Linie */
.zeile.laeuft.still::before { width: 100%; background: linear-gradient(to top, var(--blau) 0 2px, transparent 2px); transition: none; }
.zeile.laeuft.still::after { content: none; }
.zeile.ausgewaehlt.laeuft.still::before { background: linear-gradient(to top, var(--ok-glas) 0 2px, transparent 2px); }
.zeile.blitz { animation: blitz 1.2s ease-out; }
@keyframes blitz { from { background-color: rgba(0, 0, 255, 0.12); } to { background-color: transparent; } }
.zeile.ausgewaehlt.blitz { animation: none; }
.geist { position: absolute; z-index: 2; pointer-events: none; background: var(--grund); }
.live-box { border-bottom: 1px solid var(--linie); margin-bottom: var(--s1); }
.live-zeile .zeile-link { grid-template-columns: var(--skala) minmax(0, 1fr) auto; }
.live-zeile .bf-text { color: var(--blau); }

.gruppe { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s2); }
/* Sortier-Symbole im Abschnittskopf: Haarlinie, grau; aktiv blau mit Richtungspfeil */
.sortierer { display: flex; gap: 2px; margin-top: -1px; }
.sortier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--neben);
  cursor: pointer;
  transition: color var(--dauer) ease, background-color var(--dauer) ease;
}
.sortier:hover { color: var(--text); background: rgba(0, 0, 0, 0.05); }
.sortier[aria-pressed="true"] { color: var(--blau); }
.sortier:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; }
.sortier svg { display: block; }
.sortier .pfeil { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity var(--dauer) ease, transform var(--dauer) ease; }
.sortier[aria-pressed="true"] .pfeil { opacity: 1; }
.sortier.umgekehrt .pfeil { transform: rotate(180deg); }
.anzahl { color: var(--neben); font-variant-numeric: tabular-nums; text-align: right; }
.z1, .z2 { grid-template-columns: minmax(0, 1fr) var(--skala); align-items: baseline; }
/* Abos: Name · Zugriff bzw. kein Zugriff · Skala */
.z1.za { grid-template-columns: minmax(0, 1fr) auto var(--skala); }
.zugriff { text-align: right; }
/* Zugriff als Kettenglied (A27, A59): verbunden = geschlossenes Glied in Grün, nicht verbunden = zwei Hälften ohne Mittelsteg in Grau –
   Form UND Farbe unterscheiden die Zustände (Edin 30.10.: „warum sehen die gleich aus“) */
/* Kettenglied, Schloss und Skala stehen auf EINER Mitte, der der Textzeile (A27, Edin): die Zelle sitzt mittig in der Zeile statt auf
   der Grundlinie – sonst stünde das Bild ohne eigene Grundlinie mit seiner Unterkante darauf, 3 px über Schloss und Skala */
.zelle.zugriff { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s1); overflow: visible; align-self: center; }
.zugriff-symbol { display: inline-grid; place-items: center; width: 14px; color: var(--text); }
.zugriff.an .zugriff-symbol { color: var(--ok); }
.zugriff.neben .zugriff-symbol { color: var(--neben); }
.zugriff-svg { display: block; }
.zeile.ausgewaehlt .zugriff-symbol { color: #fff; }
.zeile.ausgewaehlt .zugriff.neben .zugriff-symbol { color: rgba(255, 255, 255, 0.6); }
/* nicht verbunden = die ganze Zeile grau wie Nebentext (Domain, Kettenglied, Zahl); die Skala behält ihre Farben, sie ist das Risiko.
   Ohne Legende erklärt sich der Zustand so, dazu Name und Blase am Symbol. Ist der Service auf dem Server angemeldet (A58), sind
   die Abos dort verbunden und dunkel wie das eigene */
.z1.za.aussen > .zeile-link { color: var(--neben); }
.z1.za.aussen.online:not(.ausgewaehlt) > .zeile-link { color: var(--text); }
.zeile.ausgewaehlt.aussen > .zeile-link { color: #fff; }
/* Lücken eines Website-Tickets (A58 Schritt 4): Skala bzw. „erledigt“, daneben Text mit Version, Quelle und Stand */
.luecken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.luecke { display: grid; grid-template-columns: var(--skala) minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.luecke-text { overflow-wrap: anywhere; }
.luecke-text a.link { white-space: nowrap; }  /* die Kennung bricht nie um, auch am Handy (Saitama 30.10.) */
.luecke.behoben .luecke-text { color: var(--neben); }
/* Haarlinie zwischen Abschnitten: Linie liegt in der 28-px-Zeile, Text bleibt auf der Grundlinie */
.gruppe.trennlinie { border-top: 1px solid var(--linie); padding-top: 3px; margin-top: var(--s2); }

/* Bereiche: Skala · Befund (bis zwei Zeilen) · Ort · Quelle; darunter der laufende Schritt */
.bz {
  grid-template-columns: minmax(0, 1fr) auto;
  height: auto;
  min-height: var(--zeile);
  white-space: normal;
}
.zeile-link {
  display: grid;
  grid-template-columns: var(--skala) minmax(0, 1fr) auto;
  column-gap: var(--s3);
  align-items: baseline;
  min-width: 0;
  cursor: default;
}
.zeile-link:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.bf-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
.st-neu .bf-text { color: var(--neben); }
.zeile.ausgewaehlt.st-neu .bf-text { color: #fff; }
.ort { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* seit wann bzw. wer bis wann (A34) – rechts in der Zeile, in schmalen Spalten unter dem Titel */
.bz-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
/* Zwischenkopf „Ort · n“: eingerückt auf die Textspalte, damit er sich vom Abschnittskopf abhebt (A34) */
.gruppe.zwischen { padding-left: calc(var(--skala) + var(--s3)); }
.ez.mehr .link { display: block; }
.ext { color: var(--blau); white-space: nowrap; align-self: baseline; }
.ext:hover { text-decoration: underline; }
.schritt { grid-column: 1 / -1; padding-left: calc(var(--skala) + var(--s3)); color: var(--blau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritt:empty { display: none; }
.zeile.ausgewaehlt .schritt { color: #fff; }

/* A24 (Saitama 27.10.): schmale Listen-Spalte – bei offenem Detail stehen bis ~1600 px vier Spalten nebeneinander, die Liste
   hat nur 370–490 px. Ort und Quelle rutschen dann unter den Titel, statt ihn auf 0 px zu drücken (Container-Abfrage je Spalte,
   gilt für jede Bereichs-Zeile mit eigener Spaltenaufteilung außer Live- und Job-Zeilen). */
.spalte-inhalt { container-type: inline-size; }
@container (max-width: 560px) {
  .bz:not(.live-zeile):not(.agz-job) { grid-template-columns: minmax(0, 1fr); }
  .bz:not(.live-zeile):not(.agz-job) > .zeile-link { grid-template-columns: var(--skala) minmax(0, 1fr); }
  .bz:not(.live-zeile):not(.agz-job) > .zeile-link > .ort { grid-column: 2; display: block; max-width: none; }
  .bz:not(.live-zeile):not(.agz-job) > .zeile-link > .bz-zeit { grid-column: 2; text-align: left; }
  .bz:not(.live-zeile):not(.agz-job) > .ext { justify-self: start; padding-left: calc(var(--skala) + var(--s3)); }
}
/* Passen die Spalten nicht nebeneinander, tritt die erste zurück, „Zurück“ in der nächsten führt wieder hin – EINE Regel für jede
   Ansicht (A26, A27): das offene Detail fällt so nie unter 520 px, und nichts scrollt waagrecht. Breiten: Server und Abos 386,
   Instanzen 280, Liste mindestens 340, Detail mindestens 520 – drei Spalten mit Detail ab 1246 px, vier ab 1600 (die erste zurück
   ab 1140), drei ohne Detail ab 1006; unter 900 px steht je Ebene eine Spalte */
@media (min-width: 900px) and (max-width: 1599px) {
  .spalten[data-live][data-anzahl="4"] > .spalte:first-child { display: none; }
  .spalten[data-live][data-anzahl="4"] > .spalte:nth-child(2) .zurueck { display: inline; }
}
@media (min-width: 900px) and (max-width: 1139px) {
  .spalten[data-live][data-anzahl="4"] > .spalte:nth-child(2) { display: none; }
  .spalten[data-live][data-anzahl="4"] > .spalte:nth-child(3) .zurueck { display: inline; }
}
@media (min-width: 900px) and (max-width: 1245px) {
  .spalten[data-live][data-anzahl="3"][data-tiefe="detail"] > .spalte:first-child { display: none; }
  .spalten[data-live][data-anzahl="3"][data-tiefe="detail"] > .spalte:nth-child(2) .zurueck { display: inline; }
}
@media (min-width: 900px) and (max-width: 1005px) {
  .spalten[data-live][data-anzahl="3"]:not([data-tiefe="detail"]) > .spalte:first-child { display: none; }
  .spalten[data-live][data-anzahl="3"]:not([data-tiefe="detail"]) > .spalte:nth-child(2) .zurueck { display: inline; }
}
/* Quellen eines Tickets: eine je Zeile, „Host · Kennung“ ganz als Link – nie mitten im Eintrag getrennt (A24, A26) */
.quellen { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; min-width: 0; white-space: normal; }
.quellen > .ext { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.quellen .kennung { white-space: nowrap; }
/* Abläufe in Spalte 1: Zeitpunkt mit Datum passt nicht in die Skala-Breite (A24) */
.z1.z1-zeit { grid-template-columns: minmax(0, 1fr) auto; }
/* System (A34): Zustand als farbiges Wort statt Skala – „gestört seit 20:15“ braucht mehr als die Skala-Breite */
.z1.z1-wort { grid-template-columns: minmax(0, 1fr) auto; }
.sys-wort { text-align: right; white-space: nowrap; }

/* Befund (Detail) */
.detail { display: block; height: auto; padding: var(--s2) 0 var(--s4); white-space: normal; }
.d-titel { padding: 0 var(--s3) var(--s2); font-size: 16px; line-height: 24px; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.detail .mz { grid-template-columns: var(--datum) minmax(0, 1fr); padding-left: var(--s3); padding-right: var(--s3); }
/* einspaltige Zeile im Detail (Skala) – per Klasse, nie per Position: sonst stapelte die erste Meta-Zeile Beschriftung und Wert */
.mz-eins { grid-template-columns: minmax(0, 1fr); }
.fliess {
  margin: 0;
  padding: var(--s1) var(--s3) var(--s2);
  max-width: 64em;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  overflow-wrap: break-word;
  widows: 2;
  orphans: 2;
}
.fliess > .neben:first-child { display: block; }
.klickweg, .liste li { overflow-wrap: anywhere; }
.liste { list-style: none; }
.liste li { padding-left: var(--s4); text-indent: calc(-1 * var(--s2)); }
.liste li::before { content: "– "; color: var(--neben); }
.d-live { display: grid; gap: var(--s1); padding: 0 var(--s3); }
.d-live:empty { display: none; }
.d-live > :nth-child(2) { color: var(--blau); }
.d-balken { display: block; height: 2px; margin: var(--s1) 0 var(--s2); background: var(--linie); overflow: hidden; }
.d-fuell { display: block; height: 100%; width: var(--f, 2%); background: var(--blau); transition: width 600ms cubic-bezier(.2, .7, .2, 1); }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: var(--s3); height: auto; min-height: var(--zeile); padding: var(--s1) var(--s3); }
/* Texte der Aktionszeile brechen um (die Zeile erbt nowrap) – am Handy ragte „Ein Ja zu root-Änderungen …“ 24 px heraus (A33) */
.aktionen-zeile .aktion-text { white-space: normal; min-width: 0; }
.aktion-text { overflow-wrap: anywhere; }
.mz { grid-template-columns: var(--datum) minmax(0, 1fr); }
.ez { grid-template-columns: minmax(0, 1fr); }
/* A24: lange Einträge (Routinen › Arbeit wartet, Offene Befunde) bis zwei Zeilen statt einzeilig gekürzt */
.ez-lang > .link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: break-word; }
/* Adressen brechen um, nie gekürzt (A24 Punkt 12) */
.wert-url { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* Abo-Verlauf: Ergebnis darf zweizeilig werden statt halb abgeschnitten (A24 Punkt 11) */
/* Abo-Verlauf: Zeit · Auftrag · Ergebnis („angenommen“); das Ergebnis nimmt nur seine Breite (höchstens 260 px), in schmalen
   Containern (offenes Ticket, Handy) steht es unter dem Text statt zu verschwinden (A27) */
.vz { grid-template-columns: var(--datum) minmax(0, 1fr) auto; }
.vz > :nth-child(3) { max-width: 260px; white-space: normal; overflow-wrap: break-word; }
@container (max-width: 560px) {
  .vz { grid-template-columns: var(--datum) minmax(0, 1fr); height: auto; }
  .vz > :nth-child(3) { grid-column: 2; max-width: none; }
}
.sp-verlauf .vz { grid-template-columns: var(--wort) 200px minmax(0, 1fr); height: auto; min-height: var(--zeile); white-space: normal; }
.sp-verlauf .vz .bf-text { -webkit-line-clamp: 3; line-clamp: 3; }
.verz { grid-template-columns: var(--s8) var(--datum) 96px minmax(0, 1fr); }
.dz { grid-template-columns: var(--s8) var(--s8) var(--s3) minmax(0, 1fr); }
.dz.gleich { color: var(--neben); }
.dz .code { font-family: var(--mono); white-space: pre; }
.zeichen { text-align: center; }
.aktionen { display: flex; gap: var(--s3); }
.aktion { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* A112: ein Bedienweg je Ticket – der Satz für den Service steht zum Mitlesen über der Aktionszeile (kopiert wird am Knopf), lange Wörter
   brechen um; Ort und Termin als Feld in der Aktionszeile, der Knopf daneben auf Höhe des Feldes; am Handy das Feld in voller Breite, 44 px hoch */
.prompt-text { overflow-wrap: anywhere; }
.feld-auftrag { flex: 1 1 240px; max-width: 420px; }
.feld-auftrag input[type="datetime-local"] { appearance: auto; }
.feld-auftrag + .knopf { align-self: flex-end; }
@media (max-width: 899px) {
  .feld-auftrag { flex-basis: 100%; max-width: none; }
  .feld-auftrag input { height: 44px; }
}
.tabs { display: flex; gap: var(--s4); }
.umschalt { color: var(--neben); }
.umschalt.aktiv { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.vergleich-form { display: flex; gap: var(--s3); }
.vergleich-form select {
  height: 20px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: var(--grund);
  appearance: none;
  padding: 0 var(--s1);
}

/* Routinen und Agenten: breite Spalte, mehrzeilige Zeilen */
.spalten[data-live] > .sp-routinen, .spalten[data-live] > .sp-agenten { flex: 1 1 auto; }
.sp-routinen .spalte-inhalt, .sp-agenten .spalte-inhalt { max-width: 1240px; }
.rz { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 92px 92px minmax(0, 1.4fr); height: auto; min-height: var(--zeile); white-space: normal; align-items: baseline; }
.rz-name { display: grid; min-width: 0; }
.rz-was { overflow-wrap: break-word; text-wrap: pretty; }
.rz-takt, .rz-erg { min-width: 0; overflow-wrap: break-word; }
.rz-zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Countdown grau, Blau nur, solange der Job läuft (A34: Blau heißt sonst Link, Auswahl, Live) */
.rz-naechster { color: var(--neben); }
.rz-naechster.laeuft-jetzt { color: var(--text); }  /* A35: Blau nur für Tippbares – auch „läuft“ nicht */
.zeile.ausgewaehlt .rz-naechster { color: #fff; }
.bez { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) var(--skala); }
.rz-version { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agz { grid-template-columns: 96px 200px minmax(0, 1fr) 180px; height: auto; min-height: var(--zeile); white-space: normal; align-items: baseline; }
.agz2 { grid-template-columns: 96px minmax(0, 1fr) 160px; }
.agz3 { grid-template-columns: 96px var(--skala) minmax(0, 1fr) 200px; height: auto; min-height: var(--zeile); white-space: normal; align-items: baseline; }
.ag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-text { min-width: 0; overflow-wrap: break-word; text-wrap: pretty; }
.ag-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabs Routinen, Agenten, Verlauf: Einträge zweizeilig, Ablauf als Zeitleiste */
.rz2 { grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: var(--zeile); white-space: normal; align-items: baseline; }
.agz-job { grid-template-columns: minmax(0, 1fr) auto; }
.agz-job .zeile-link { grid-template-columns: 96px minmax(0, 1fr) auto; }
.ablauf { padding: var(--s2) 0; }
.pz { display: grid; grid-template-columns: 48px 88px minmax(0, 1fr); column-gap: var(--s2); padding: 2px var(--s3); }
.pz-zeit { font-variant-numeric: tabular-nums; color: var(--neben); }
/* Abläufe (Ticket, Agent, Messung) laufen über Tage: Zeit immer mit Datum, Spalte breiter */
.ablauf .pz { grid-template-columns: 88px 88px minmax(0, 1fr); }
/* schmales Detail (Handy): Zeit und Wer in einer Zeile, der Text darunter in voller Breite – sonst blieben ~150 px Text (A26) */
@container (max-width: 480px) {
  .ablauf .pz { grid-template-columns: 88px minmax(0, 1fr); }
  .ablauf .pz > .pz-text { grid-column: 1 / -1; }
}
.pz-wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-text { overflow-wrap: break-word; text-wrap: pretty; }
.pz-art { color: var(--neben); }
/* Einzelheiten einer Zeile (A26): aufklappbar, Haarlinien-Pfeil statt Dreieck */
.pz-mehr > summary { display: inline-flex; align-items: baseline; gap: var(--s1); color: var(--blau); cursor: pointer; list-style: none; }
.pz-mehr > summary::-webkit-details-marker { display: none; }
.pz-mehr > summary::before { content: "›"; display: inline-block; transition: transform 160ms ease; }
.pz-mehr[open] > summary::before { transform: rotate(90deg); }
.pz-mehr > .liste { margin: 2px 0 var(--s1); padding: 0; }
.pz.t-start .pz-art { color: var(--blau); }
.pz.t-fertig .pz-art { color: var(--ok); }
.pz.t-fehler .pz-art { color: var(--kritisch); }
.pz.t-braucht .pz-art { color: var(--achtung); }
.schritte { margin: 0; padding: 0 var(--s3) var(--s2) calc(var(--s3) + 20px); }
.schritte li { padding: 2px 0; text-wrap: pretty; overflow-wrap: break-word; }
.schritte li::marker { color: var(--neben); font-variant-numeric: tabular-nums; }
.zeile.ausgewaehlt .pz-art, .zeile.ausgewaehlt .pz-zeit { color: #fff; }

/* Terminal: Protokoll aller Agenten, unten als Glas */
.terminal {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--insel-band);
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: var(--terminal-h);
  border-radius: 14px;
  overflow: hidden;
}
.terminal[hidden] { display: none; }
.terminal-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex: none;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--glas-rand);
  white-space: nowrap;
}
.terminal-status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--glas-neben); }
.terminal .knopf-text { color: var(--glas-neben); }
.terminal .knopf-text:hover { color: var(--glas-text); }
.terminal-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s2) var(--s4) var(--s3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
}
.t-zeile { display: grid; grid-template-columns: 84px 88px 184px minmax(0, 1fr); column-gap: var(--s3); color: var(--glas-neben); border-radius: 4px; }
a.t-zeile:hover { background: rgba(255, 255, 255, 0.06); }
a.t-zeile:focus-visible { outline: 1px solid #fff; outline-offset: 0; }
.t-zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-zeile .t-text { white-space: normal; overflow-wrap: anywhere; color: var(--glas-text); }
.t-start .t-text { color: #a9bfff; }
.t-fertig .t-text { color: #84e3ad; }
.t-fehler .t-text { color: #ff9a9a; }
.t-braucht .t-text { color: #ffd68a; }

/* Benachrichtigungen unten rechts (blaues Glas) */
.toasts {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--insel-band) + var(--s2));
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 344px;
  max-width: calc(100vw - 2 * var(--s4));
  pointer-events: none;
}
.mit-terminal .toasts { bottom: calc(var(--insel-band) + var(--terminal-h) + var(--s4)); }
/* Benachrichtigung im Stil der Pille: dunkles Glas, rund; Verb farbig nach Art */
.toast {
  display: grid;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  border-radius: 22px;
  background: var(--glas);
  pointer-events: auto;
}
.toast-verb { color: #a9bfff; }
.t-fertig .toast-verb { color: var(--ok-glas); }
.t-fehler .toast-verb { color: #ff9a9a; }
.t-braucht .toast-verb { color: #ffd68a; }
.toast-score { display: flex; align-items: center; gap: var(--s2); }
.toast-skala { display: block; flex: none; }
.toast-zahl { color: var(--glas-neben); font-variant-numeric: tabular-nums; }
.toast-pfeil { color: var(--glas-neben); }
.toast-kopf { display: flex; justify-content: space-between; gap: var(--s3); white-space: nowrap; }
.toast-ort { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--glas-neben); }
.toast-text { color: var(--glas-text); overflow-wrap: anywhere; text-wrap: pretty; }
.toast-link { justify-self: start; color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


/* Bearbeiten: Textbereich füllt die Spalte, keine Größenänderung */
.spalte-inhalt:has(.bearbeiten) { display: flex; flex-direction: column; }
.bearbeiten { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bearbeiten textarea {
  flex: 1 1 auto;
  min-height: 240px;
  margin: 0 var(--s3);
  padding: var(--s2);
  border: 1px solid var(--linie);
  border-radius: 0;
  resize: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  white-space: pre;
  overflow: auto;
}
.bearbeiten textarea:focus-visible { outline-offset: -1px; }

/* Dokument-Ansicht: Markdown sicher dargestellt */
.dok { padding: var(--s2) var(--s3) var(--s8); max-width: 880px; overflow-wrap: break-word; }
.dok td, .dok th { hyphens: auto; -webkit-hyphens: auto; }
.dok h1 { font-size: 22px; line-height: 30px; margin: var(--s4) 0 var(--s2); }
.dok h2 { margin: var(--s4) 0 var(--s2); }
.dok h3, .dok h4, .dok h5, .dok h6 { font-size: 13px; line-height: 20px; margin: var(--s3) 0 var(--s1); }
.dok p, .dok ul, .dok ol, .dok pre, .dok table, .dok blockquote { margin: 0 0 var(--s2); }
.dok p, .dok li { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.dok ul, .dok ol { padding-left: var(--s6); }
.dok ul ul, .dok ol ol, .dok ul ol, .dok ol ul { margin: 0; }
.dok strong { font-weight: 700; }
.dok code { font-family: var(--mono); font-size: inherit; line-height: inherit; }
.dok pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--s2) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.dok blockquote { padding-left: var(--s3); border-left: 1px solid var(--linie); color: var(--neben); }
.dok hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s4) 0; }
.dok table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.dok th, .dok td { border: 1px solid var(--linie); padding: var(--s1) var(--s2); text-align: left; vertical-align: top; }
.pruefsumme { font-family: var(--mono); }

/* ---------- schmal: eine Spalte nach der anderen ---------- */
@media (max-width: 899px) {
  .app { grid-template-rows: 88px minmax(0, 1fr) var(--insel-band); }
  .kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 28px 36px;
    row-gap: var(--s2);
    height: 88px;
    padding: var(--s2) var(--s4) 0;
    align-items: center;
  }
  .marke { grid-column: 1; grid-row: 1; color: var(--neben); }
  .abmelden { grid-column: 2; grid-row: 1; }
  .abmelden .neben { display: none; }
  .pill { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .betrieb-lang { display: none; }  /* „Power“ bleibt sichtbar – der folgenreichste Schalter, am Handy gibt es keinen Tooltip (A26) */
  .pill { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pill::-webkit-scrollbar { display: none; }
  .pill-link { flex: none; }
  .pill-link { padding: 0 var(--s2); }
  /* A24 Punkt 14: Die Navigation bricht um, statt hinter dem Rand zu verschwinden – alle Einträge und Power now bleiben sichtbar */
  .app { grid-template-rows: auto minmax(0, 1fr) var(--insel-band); }
  .kopf { height: auto; grid-template-rows: 28px auto; padding-bottom: var(--s2); }
  .pill { flex-wrap: wrap; justify-content: center; row-gap: 2px; height: auto; overflow: visible; border-radius: 18px; }
  .pill-trenner { display: none; }
  .spalten[data-live] { overflow-x: hidden; }
  .spalten[data-live] > .spalte { display: none; width: 100%; min-width: 0; flex: 1 1 auto; border-right: 0; }
  .spalten[data-tiefe="orte"] > .sp-orte, .spalten[data-tiefe="instanzen"] > .sp-instanzen, .spalten[data-tiefe="bereiche"] > .sp-bereiche,
  .spalten[data-tiefe="detail"] > .sp-detail, .spalten[data-tiefe="verlauf"] > .sp-verlauf { display: flex; }
  .spalten:not([data-live]) { grid-template-columns: minmax(0, 1fr); }
  .spalten:not([data-live]) > .spalte { display: none; border-right: 0; }
  .spalten[data-tiefe="1"] .s1, .spalten[data-tiefe="2"] .s2, .spalten[data-tiefe="3"] .s3 { display: flex; }
  .zurueck { display: inline; }
  .sp-verlauf .vz { grid-template-columns: var(--wort) minmax(0, 1fr); }
  .spalten[data-tiefe="routinen"] > .sp-routinen, .spalten[data-tiefe="agenten"] > .sp-agenten { display: flex; }
  .rz { grid-template-columns: minmax(0, 1fr) 84px; }
  .rz > .rz-takt, .rz > .rz-erg, .rz > .rz-zeit:not(.rz-naechster) { display: none; }
  .qz > .rz-zeit { display: none; }
  .agz { grid-template-columns: 72px minmax(0, 1fr); }
  .agz > .ag-ort { grid-column: 2; }
  .agz > .ag-text, .agz > .ag-zahl { grid-column: 2; text-align: left; }
  .agz2 { grid-template-columns: 72px minmax(0, 1fr); }
  .agz2 > .ag-zahl { display: none; }
  .agz3 { grid-template-columns: var(--skala) minmax(0, 1fr); }
  .agz3 > .ag-name, .agz3 > .ag-zahl { display: none; }
  .sp-verlauf .vz > .ort { display: none; }
  .ort { display: none; }
  .verz { grid-template-columns: var(--s8) var(--datum) minmax(0, 1fr); }
  .verz > :nth-child(4) { display: none; }
  :root { --terminal-h: 46vh; }
  .terminal { left: var(--s2); right: var(--s2); bottom: var(--insel-band); }
  .t-zeile { grid-template-columns: 64px minmax(0, 1fr); }
  .t-zeile .t-agent, .t-zeile .t-ort { display: none; }
  .toasts { left: var(--s2); right: var(--s2); bottom: calc(var(--insel-band) + var(--s2)); width: auto; max-width: none; }
}
@media (max-width: 380px) {
  .pill-trenner { display: none; }
}

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

/* Schloss je Domain bzw. Instanz: eigene Spalte zwischen „verbunden/getrennt“ und Skala, immer zu sehen (A51, Edin 29.10.): zu dunkel,
   offen grau wie das Glied „getrennt“ (4,8:1 auf Weiß, 3,4:1 auf der Auswahl – beide über 3:1). Der Knopf liegt außerhalb des Links
   genau über seinem Platz (.schloss-platz), immer anklickbar. */
.zeile.mit-schloss, .z1.za.mit-schloss { grid-template-columns: minmax(0, 1fr); }
.mit-schloss > .zeile-link { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr) 14px var(--skala); column-gap: var(--s2); }
.za.mit-schloss > .zeile-link { grid-template-columns: minmax(0, 1fr) auto 14px var(--skala); }
/* in Zeilen mit Schloss steht die Skala auf derselben Mitte wie Schloss und Kettenglied (A27), nicht mit den Strichen auf der Grundlinie */
.mit-schloss .zelle.skala { align-self: center; align-items: center; }
.schloss-form { display: contents; }
.schloss {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: center; position: relative; z-index: 2;
  display: grid; place-items: center; width: 14px; height: 18px; margin: 0 calc(var(--skala) + var(--s2)) 0 0; padding: 0;
  border: 0; background: none; color: var(--neben); cursor: pointer;
}
.schloss.zu { color: var(--text); }
/* A35: Trefferfläche 26 × 26 px um dieselbe Glyphe – per ::before, damit Lage und Mitte in der Zeile bleiben (A27) */
.schloss::before { content: ""; position: absolute; inset: -4px -6px; }
/* nur zwei Farben: zu dunkel, offen grau – auch beim Warten auf das Abo (zeigt schon das Ziel) und beim Überfahren */
.schloss:hover { background: rgba(0, 0, 0, 0.05); }
.zeile.ausgewaehlt .schloss { color: rgba(255, 255, 255, 0.6); }
.zeile.ausgewaehlt .schloss.zu { color: #fff; }
.schloss:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.schloss-svg { fill: none; stroke: currentColor; stroke-width: 1.2; }
/* Hinweis beim Überfahren (A51): Symbole mit data-tipp zeigen ihren Zustand sofort als Blase (app.js) – der Browser-Tooltip käme erst
   nach einer Sekunde. Fest über allem, damit keine Spalte sie abschneidet; Glas wie die Pille, nur mit Maus und Tastatur */
.tipp {
  position: fixed; z-index: 40; max-width: min(320px, calc(100vw - 2 * var(--s2))); padding: 6px 10px;
  border: 1px solid var(--glas-rand); border-radius: 8px; background: var(--glas-deckend); color: var(--glas-text);
  white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; pointer-events: none;
}
.tipp[hidden] { display: none; }


/* ---------- Auftragsbuch als Gruppenchat (Agentur 27.10.2026, A21) ----------
   Liste wie Chats, Verlauf als Blasen (Agentur rechts wie „ich“), Statuswechsel als Systemzeile in der Mitte, Eingabe fest unten im
   Fuß der Spalte (nie über dem Verlauf). Nur hier: runde Blasen wie bei iOS, Grau für fremde Blasen, Agenten als Wesen (SVG).
   Schrift: Nachricht 16/24, alles andere 13/20 – keine vierte Größe. */
:root { --blase: #f1f1f4; --karte: #fff; }

/* Wesen: arbeitet = atmet und blinzelt (ruhig), wartet = still, aus = grau mit geschlossenen Augen */
.wesen { display: block; flex: none; overflow: visible; }
.wesen .koerper, .wesen .augen, .wesen .blick { transform-box: fill-box; }
.wesen[data-zustand="arbeitet"] .koerper { transform-origin: 50% 100%; animation: atmen 3.2s ease-in-out infinite; }
.wesen[data-zustand="arbeitet"] .augen { transform-origin: 50% 50%; animation: blinzeln 5.5s ease-in-out infinite; }
.wesen[data-zustand="arbeitet"] .blick { animation: umschauen 4s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.96); } }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@keyframes umschauen { 0%, 100% { transform: translateX(-2.5px); } 50% { transform: translateX(2.5px); } }

/* Spalte 1: Agenten mit Wesen · Name und Rolle · offen/zu prüfen · Zustand; „Alle Gespräche“ mit ungelesenen Nachrichten */
.z1.agr { grid-template-columns: 20px minmax(0, 1fr) auto minmax(var(--skala), auto); align-items: start; }
/* System und Agentur als Haarlinien-Symbol (A25) */
.wesen.symbol { color: var(--neben); }
.zeile.ausgewaehlt .wesen.symbol { color: #fff; }
.cz-bild .wesen.symbol.w-hinten { background: var(--grund); border-radius: 50%; }
.zeile.ausgewaehlt .cz-bild .wesen.symbol.w-hinten { background: var(--blau); }
.z1.mit-neu { grid-template-columns: minmax(0, 1fr) auto var(--skala); }

/* Spalte 2: Chat-Liste – Wesen · Auftrag und Titel · Zeit / letzte Nachricht · ungelesen · Status (zwei Zeilen, 56 px) */
.cz { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: 20px 20px; column-gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); }
.cz-bild { grid-row: 1 / 3; grid-column: 1; width: 40px; height: 40px; }
.cz-bild .w-vorn { position: absolute; left: 0; bottom: 0; }
.cz-bild .w-hinten { position: absolute; right: 0; top: 0; }
.cz-bild .w-hinten .koerper > :first-child { stroke: var(--grund); stroke-width: 3; paint-order: stroke; }
.zeile.ausgewaehlt .cz-bild .w-hinten .koerper > :first-child { stroke: var(--blau); }
.cz-titel { grid-column: 2; grid-row: 1; }
.cz-zeit { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
.cz-vorschau { grid-column: 2; grid-row: 2; }
.cz-rechts { grid-column: 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); }

/* Status als Pille, ungelesen als blaue Zahl */
.pille { display: inline-block; padding: 0 7px; border-radius: 10px; outline: 1px solid currentColor; outline-offset: -1px; color: var(--neben); white-space: nowrap; }
.pille.fs-angenommen, .pille.fs-in_arbeit { color: var(--blau); }
.pille.fs-zu_pruefen, .pille.fs-zurueck, .pille.fs-unterbrochen { color: var(--achtung); }
.pille.fs-erledigt, .pille.fs-beantwortet { color: var(--ok); }
.pille.fs-gestoppt { color: var(--kritisch); }
.ungelesen { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--blau); color: #fff; text-align: center; }
.zeile.ausgewaehlt .pille { color: #fff; }
.zeile.ausgewaehlt .ungelesen { background: #fff; color: var(--blau); }

/* Spalte 3: Kopf des Gesprächs */
.chat-anfang { display: block; margin-bottom: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie); white-space: normal; }
.chat-anfang .d-titel { padding: 0 0 var(--s2); }
.chat-lage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.chat-beteiligte { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); }
.chat-wer { display: inline-flex; align-items: center; gap: 6px; }
.bezug { overflow-wrap: anywhere; }

/* Verlauf: Systemzeile in der Mitte, Blasen links (Agenten) bzw. rechts (Agentur) */
.chat-eintrag { display: block; padding: 0 var(--s4); white-space: normal; }
.chat-system { margin: var(--s3) 0; color: var(--neben); text-align: center; text-wrap: balance; }
.chat-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s2); margin: var(--s3) 0; padding-right: 10%; }
.chat-bild { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: 2px; }
.chat-kopf { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-width: 0; }
.chat-name { color: var(--text); }
.chat-antworten {
  display: inline-grid; place-items: center; width: 24px; height: 20px; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--neben); cursor: pointer;
}
.chat-antworten:hover { color: var(--blau); background: rgba(0, 0, 255, 0.06); }
.chat-antworten:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; }
.blase {
  grid-column: 2; grid-row: 2; justify-self: start; max-width: min(100%, 640px); margin-top: 2px; padding: 6px 12px 7px;
  border-radius: 4px 18px 18px 18px; background: var(--blase); color: var(--text); overflow-wrap: anywhere;
}
.blase-text { font-size: 16px; line-height: 24px; letter-spacing: 0; text-wrap: pretty; }
.chat-msg.ich { grid-template-columns: minmax(0, 1fr); padding-right: 0; padding-left: 15%; }
.chat-msg.ich .chat-kopf { grid-column: 1; justify-content: flex-end; }
.chat-msg.ich .blase { grid-column: 1; justify-self: end; border-radius: 18px 4px 18px 18px; background: var(--blau); color: #fff; }
.chat-msg.ich .link { color: #fff; text-decoration: underline; }
.chat-msg:target .blase { outline: 2px solid var(--blau); outline-offset: 2px; }
.chat-system:target { color: var(--text); }

/* Zitat (Antwort auf eine Nachricht), Chips für Tickets und Aufträge, Karte mit Ergebnis, Beleg, Rückweg */
.zitat {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin: 2px 0 4px; padding-left: var(--s2); border-left: 2px solid rgba(0, 0, 0, 0.22); color: var(--neben);
}
.zitat:hover { color: var(--text); }
.chat-msg.ich .zitat { border-left-color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.85); }
.chip {
  display: inline-block; padding: 0 7px; border-radius: 10px; background: rgba(0, 0, 255, 0.08); color: var(--blau);
  font-size: 13px; line-height: 20px; letter-spacing: 0.01em; white-space: nowrap; vertical-align: 1px;
}
.chip:hover { background: rgba(0, 0, 255, 0.14); }
.chat-msg.ich .chip { background: rgba(255, 255, 255, 0.2); color: #fff; }
.karte { margin: 6px -4px 2px; padding: var(--s2) 10px; border-radius: 12px; background: var(--karte); }
.karte-teil + .karte-teil { margin-top: 6px; }
.karte-text { overflow-wrap: anywhere; text-wrap: pretty; }
.blase-mehr { margin-top: var(--s1); }
.blase-mehr > summary, .chat-schritte > summary { color: var(--neben); cursor: pointer; list-style: none; }
.blase-mehr > summary::-webkit-details-marker, .chat-schritte > summary::-webkit-details-marker { display: none; }
.blase-mehr > summary::after, .chat-schritte > summary::after { content: " ▸"; }
.blase-mehr[open] > summary::after, .chat-schritte[open] > summary::after { content: " ▾"; }
.blase-mehr > p { overflow-wrap: anywhere; }
.chat-schritte { margin: var(--s3) 0; }
.chat-schritte > summary { text-align: center; }
.chat-schritte[open] { padding-bottom: var(--s2); border-bottom: 1px solid var(--linie); }

/* Eingabe fest unten (Fuß der Spalte): Bitte erklären · Stoppen klein darüber, Zitat beim Antworten, Textfeld und Senden */
.spalte-fuss { flex: none; padding: var(--s2) var(--s4) var(--s3); border-top: 1px solid var(--linie); background: var(--grund); }
.mit-terminal .spalte-fuss { margin-bottom: calc(var(--terminal-h) + var(--s4)); }
.mit-terminal .spalte:has(> .spalte-fuss) > .spalte-inhalt { padding-bottom: var(--s4); }
.chat-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.chat-knopf {
  height: 20px; padding: 0 9px; border: 0; border-radius: 10px; outline: 1px solid var(--linie); outline-offset: -1px;
  background: none; color: var(--blau); cursor: pointer; white-space: nowrap;
}
.chat-knopf:hover { outline-color: currentColor; }
.chat-knopf.stopp { color: var(--kritisch); }
.chat-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; }
.chat-hinweis { flex: 1 1 220px; }
.chat-zitat { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); padding: 0 0 0 var(--s2); border-left: 2px solid var(--blau); color: var(--neben); }
.chat-zitat[hidden] { display: none; }
.chat-zitat svg { flex: none; }
.chat-zitat-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-zitat-weg { flex: none; width: 24px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--neben); cursor: pointer; }
.chat-zitat-weg:hover { color: var(--text); background: rgba(0, 0, 0, 0.05); }
.chat-feld { display: flex; align-items: flex-end; gap: var(--s2); }
.chat-feld textarea {
  flex: 1; min-width: 0; height: 38px; min-height: 38px; max-height: 164px; padding: 6px 14px;
  border: 1px solid var(--linie); border-radius: 19px; background: var(--grund);
  font-size: 16px; line-height: 24px; letter-spacing: 0; resize: none; overflow-y: auto;
}
.chat-feld textarea:focus-visible { outline: 2px solid var(--blau); outline-offset: -1px; }
.chat-senden { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--blau); color: #fff; cursor: pointer; }
.chat-senden:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
@media (max-width: 899px) {
  .chat-eintrag, .chat-anfang, .spalte-fuss { padding-left: var(--s3); padding-right: var(--s3); }
  .chat-msg { padding-right: 0; }
  .chat-msg.ich { padding-left: 10%; }
}

/* ---------- Insel unten (A32, Edin): die KI-Agenten als Wesen ----------
   Ruhend eine Pille im Band unter den Spalten (Wesen + Stand in Worten); Klick, Enter oder Leertaste: die Karte wächst mit einer Feder
   aus der Pille. Je Wesen ein Popover beim Überfahren, Fokus bzw. Tippen. Nur transform und opacity; reduzierte Bewegung: nur Einblenden. */
.insel { grid-row: 3; justify-self: center; align-self: center; position: relative; z-index: 25; }
.insel-pille { display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s4) 0 var(--s2); border-radius: 999px; font: inherit; cursor: pointer; }
.insel-pille:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.insel-wesen { display: flex; align-items: center; gap: 4px; }
.insel-mini { display: block; }
.insel-mini.wechsel { animation: insel-wechsel 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes insel-wechsel { 40% { transform: scale(1.35); } }
.insel-stand { white-space: nowrap; }
.insel-karte {
  position: absolute; left: 50%; bottom: calc(100% + var(--s2)); width: max-content; max-width: min(560px, calc(100vw - 2 * var(--s4))); padding: var(--s3); border-radius: 18px;
  transform-origin: 50% 100%; transform: translateX(-50%) translateY(12px) scale(0.6); opacity: 0; visibility: hidden;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease-out, visibility 0s linear 250ms;
}
.insel.offen .insel-karte { transform: translateX(-50%); opacity: 1; visibility: visible; transition-delay: 0s; }
.insel-liste { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.insel-agent { position: relative; width: 120px; }
.insel-knopf { display: flex; flex-direction: column; align-items: center; gap: var(--s1); width: 100%; padding: var(--s2); border: 0; border-radius: 12px;
  background: none; color: var(--glas-text); font: inherit; cursor: pointer; }
.insel-knopf:hover, .insel-agent.auf .insel-knopf { background: rgba(255, 255, 255, 0.08); }
.insel-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.insel-wort.neben { color: var(--glas-neben); }
.insel-agent[data-zustand="arbeitet"] .insel-knopf .wesen { animation: insel-wippen 3.2s ease-in-out infinite; }
@keyframes insel-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.insel-pop {
  position: absolute; left: 50%; bottom: calc(100% + var(--s1)); z-index: 2; width: 300px; max-width: calc(100vw - 2 * var(--s4)); padding: var(--s3);
  border-radius: 12px; background: var(--glas-deckend); color: var(--glas-text); border: 1px solid var(--glas-rand);
  transform-origin: 50% 100%; transform: translateX(-50%) scale(0.85); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 150ms ease-out, opacity 150ms ease-out, visibility 0s linear 150ms;
}
.insel-agent:hover .insel-pop, .insel-agent:focus-within .insel-pop, .insel-agent.auf .insel-pop {
  transform: translateX(-50%); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
.insel-satz, .insel-schritt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; }
.insel-schritt { color: var(--glas-neben); }
.insel-link { display: inline-block; margin-top: var(--s1); color: var(--glas-text); text-decoration: underline; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 899px) {
  /* Insel am Handy: ein Blatt von unten über dem Band, die Agenten als Liste, was einer tut, steht aufgeklappt darunter */
  .insel-karte { position: fixed; left: var(--s2); right: var(--s2); bottom: var(--insel-band); width: auto; max-height: 60vh; overflow-y: auto;
    transform: translateY(24px); }
  .insel.offen .insel-karte { transform: none; }
  .insel-karte { max-width: none; }
  .insel-pille { height: 44px; }  /* Tippziel ≥ 44 px (A32) */
  .insel-link { display: inline-flex; align-items: center; min-height: 44px; }
  .insel-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .insel-agent { width: auto; }
  .insel-knopf { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 48px; }
  .insel-knopf .wesen { width: 28px; height: 28px; }
  .insel-wort { margin-left: auto; }
  .insel-pop { position: static; width: auto; max-width: none; margin: 0 0 var(--s2) calc(28px + var(--s3) + var(--s2)); padding: 0; border: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; display: none; }
  .insel-agent.auf .insel-pop { display: block; }
  .insel-agent:hover .insel-pop, .insel-agent:focus-within .insel-pop, .insel-agent.auf .insel-pop { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .insel-karte, .insel.offen .insel-karte, .insel-pop { transform: translateX(-50%) !important; transition: opacity 160ms ease-out, visibility 0s !important; }
  .insel-mini.wechsel, .insel-agent .insel-knopf .wesen { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .insel-karte, .insel.offen .insel-karte, .insel-pop { transform: none !important; }
}

/* ---------- A35 (Saitama 27.10.): aufklappbare Blöcke im Detail, Schloss-Zeile, Sprungliste, Versionen als Satz ---------- */
.betrieb.betrieb-zeile, .zeile.nur-handy, .gruppe.leer-sammel { display: none; }
.d-mehr:not(.ablauf) { padding: var(--s1) var(--s3); }
.d-mehr > summary { display: flex; align-items: center; gap: var(--s1); min-height: var(--zeile); color: var(--neben); cursor: pointer; list-style: none; }
.ablauf.d-mehr > summary { padding: 0 var(--s3); }
.d-mehr > summary::-webkit-details-marker { display: none; }
.d-mehr > summary::before { content: "›"; display: inline-block; transition: transform 160ms ease; }
.d-mehr[open] > summary::before { transform: rotate(90deg); }
.d-mehr .fliess { padding-left: 0; padding-right: 0; }
.sprungliste .liste { margin: 0; padding: 0; }
.sprungliste .liste li { padding-left: 0; text-indent: 0; }
.sprungliste .stufe-3 { padding-left: var(--s4); }
.dok pre { max-width: 100%; box-sizing: border-box; overflow-x: auto; }
.vergleich-form { align-items: center; flex-wrap: wrap; }
.dok h2[id], .dok h3[id] { scroll-margin-top: var(--s4); }

/* ---------- A35: Handy – jedes Bedienelement mindestens 44 × 44 px (die Glyphen bleiben gleich groß), nichts von Wer, Wo und Wann
   ausblenden, das Schloss nie per Fehltipp in der Liste, keine Auswahlfarbe auf Tiefe 1 ---------- */
@media (max-width: 899px) {
  :root { --zeile: 44px; }
  /* Kopf: Marke und Abmelden, Pille in zwei Reihen mit Abstand, Power als eigene Zeile mit dem Zustand in Worten */
  .kopf { grid-template-rows: 44px auto auto; row-gap: var(--s2); }
  .marke { display: inline-flex; align-items: center; min-height: 44px; }
  .knopf-text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s2); }
  .pill { row-gap: var(--s1); padding: 4px; border-radius: 26px; }
  .pill-link { height: 44px; }
  .pill .betrieb { display: none; }
  .betrieb.betrieb-zeile { display: flex; grid-column: 1 / -1; grid-row: 3; align-items: center; gap: var(--s3); min-width: 0; white-space: normal; }
  .betrieb-zeile .betrieb-schalter { flex: none; height: 44px; padding: 0 var(--s3); background: var(--glas); color: var(--glas-text); }
  .betrieb-zeile .betrieb-lang { display: inline; }
  .betrieb-satz { min-width: 0; color: var(--neben); }
  /* Spalten: Zurück, Zeilen, Links, Sortierer, Knöpfe */
  .zurueck { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .spalte-kopf { align-items: center; height: auto; min-height: 48px; padding: 2px var(--s3); overflow: visible; }  /* „Zurück“ (44 px) nie beschnitten, Titel auf einer Mitte */
  .kopf-text { min-width: 0; }  /* die Ellipse nur am Titel */
  .zeile > .zeile-link { min-height: 44px; margin: calc(-1 * var(--s1)) 0; align-content: center; }
  .sortier { width: 44px; height: 44px; }
  .bz > .ext, .detail .mz .ext, .detail .mz .link, .ez > .link, .quellen > .ext, .zitat, .chat-lage .chip, .toast-link
    { display: inline-flex; align-items: center; min-height: 44px; }
  .detail .mz .ext, .chat-lage .chip { min-width: 44px; justify-content: center; }
  .sprungliste .link { display: flex; align-items: center; min-height: 44px; }
  .detail .mz { min-height: 44px; align-items: center; }
  .quellen { row-gap: var(--s1); }
  summary { min-height: 44px; }
  .knopf, .umschalt, .chat-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .knopf.primaer, .knopf.sekundaer, .knopf.rahmen { height: 44px; padding: 0 var(--s3); }
  .chat-antworten, .chat-senden { width: 44px; height: 44px; }
  select, textarea, .chat-feld textarea { min-height: 44px; }
  select { min-width: 64px; }
  /* A51 (Edin 29.10.): das Schloss auch hier in der Liste, Tippfläche 44 × 44 px um dieselbe Glyphe; die Seite des Abos bzw. der
     Instanz sagt den Zustand zusätzlich in Worten (am Handy gibt es keinen Hinweis beim Überfahren) */
  .schloss::before { inset: -13px -15px; }
  .zeile.nur-handy { display: grid; }
  .mz > .zelle, .verz > .zelle { white-space: normal; overflow-wrap: anywhere; }
  .schloss-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; white-space: normal; border-bottom: 1px solid var(--linie); }
  .schloss-satz { display: flex; align-items: center; gap: var(--s2); white-space: normal; }
  .schloss-satz .schloss-svg { flex: none; width: 12px; height: 14px; }
  /* leere Abschnitte (außer Frei und Eingreifen) als eine Zeile am Ende */
  .gruppe.leer { display: none; }
  .gruppe.leer-sammel { display: grid; }
  /* Tiefe 1: keine Auswahlfarbe – die Liste ist die Seite */
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt { background: transparent; color: var(--text); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .neben, .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .skala-zahl { color: var(--neben); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .z-ok, .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .erledigt-wort { color: var(--ok); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .z-achtung { color: var(--achtung); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .z-kritisch { color: var(--kritisch); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .zugriff.an .zugriff-symbol { color: var(--ok); }
  .spalten[data-tiefe="orte"] > .sp-orte .zeile.ausgewaehlt .zugriff.neben .zugriff-symbol { color: var(--neben); }
  /* Tickettitel ganz, Ort und Zeiten sichtbar */
  .bf-text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .ort { display: block; }
  /* Terminal: Wer und Wo sichtbar (Zeit · Agent · Ort, darunter der Text), Bogen deckend statt Glas */
  .terminal { background: var(--glas-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .t-zeile { grid-template-columns: 44px auto minmax(0, 1fr); min-height: 44px; align-content: center; }
  .t-zeile .t-agent, .t-zeile .t-ort { display: block; }
  .t-zeile .t-text { grid-column: 1 / -1; }
  /* Ticket-Detail: Stand und Maßnahme zuerst, Quellen, Ablauf und Klickweg zugeklappt (app.js) */
  .zeile.detail { display: flex; flex-direction: column; align-items: stretch; }
  .zeile.detail > * { order: 5; }
  .zeile.detail > .d-titel { order: 0; }
  .zeile.detail > .mz-eins { order: 1; }
  .zeile.detail > .d-stand { order: 2; }
  .zeile.detail > .d-massnahme { order: 3; }
  .zeile.detail > .d-entscheidung { order: 4; }
}
/* Chatliste in schmalen Spalten und am Handy: Titel bis zwei Zeilen, Zeit, Status und Ungelesen in einer Zeile darunter (A35) */
@container (max-width: 560px) {
  .cz { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
  .cz-titel { grid-column: 2 / -1; grid-row: 1; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .cz-zeit { grid-column: 2; grid-row: 2; text-align: left; }
  .cz-rechts { grid-column: 3; grid-row: 2; }
  .cz-vorschau { display: none; }
}

/* ---------- A30: Verlauf als Zeitleiste – Uhrzeit · Wer · Satz · Ort, je Tag ein Kopf mit Haarlinie ---------- */
.vz2 { grid-template-columns: 44px 24px minmax(0, 1fr) auto; column-gap: var(--s2); align-items: baseline; height: auto; white-space: normal; }
.vz2 > .vz-wer { align-self: center; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.vz2 > .bf-text { -webkit-line-clamp: 3; line-clamp: 3; }
.vz2 > .ort { max-width: 168px; }
@media (max-width: 899px) {
  .vz2 { grid-template-columns: 44px 24px minmax(0, 1fr); }
  .vz2 > .ort { grid-column: 3; max-width: none; }
  .vz2 > .bf-text { -webkit-line-clamp: unset; line-clamp: none; display: block; }
}
/* Terminal: Tageskopf wie im Verlauf (A30), darunter die Zeilen mit hh:mm */
.t-tag { color: var(--glas-neben); padding: var(--s2) 0 2px; border-top: 1px solid var(--glas-rand); margin-top: var(--s1); }
.t-tag:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
/* A31: Speicher-Skala mit „6,4 TB frei“ daneben */
.speicher-skala .skala-zahl { white-space: nowrap; min-width: 0; }

/* ---------- A36 Feinschliff (Saitama 27.10. 20:40): ein Stil je Element ---------- */
/* Zustand überall als farbiges Wort ohne Rahmen – wie „erledigt“ in Übersicht und Verlauf (die Pille war Deko) */
.pille { padding: 0; border-radius: 0; outline: 0; }
/* ein Aufklapp-Zeichen: „›“ vorn, dreht sich beim Öffnen (wie Quellen, Klickweg, Einzelheiten) */
.blase-mehr > summary::after, .chat-schritte > summary::after, .blase-mehr[open] > summary::after, .chat-schritte[open] > summary::after { content: none; }
.blase-mehr > summary::before, .chat-schritte > summary::before { content: "›"; display: inline-block; margin-right: var(--s1); transition: transform 160ms ease; }
.blase-mehr[open] > summary::before, .chat-schritte[open] > summary::before { transform: rotate(90deg); }
/* Links in der ausgewählten Zeile bleiben als Link erkennbar */
.zeile.ausgewaehlt .ext, .zeile.ausgewaehlt .link { text-decoration: underline; text-underline-offset: 2px; }
/* zwei Knopfstile: „Bitte erklären“ und „Stoppen“ sekundär (Wort, ohne Pille), Senden primär (gefüllt, eckig wie .knopf.primaer) */
.chat-knopf { height: 28px; padding: 0; border-radius: 0; outline: 0; color: var(--neben); }
.chat-knopf:hover { color: var(--text); text-decoration: underline; outline: 0; }
.chat-knopf.stopp { color: var(--kritisch); }
.chat-senden, .chat-feld textarea { border-radius: 0; }  /* Eingabe und Senden in einer Form */
/* Quellen: Host · Kennung mit Abstand, auch als Flex-Zeile am Handy */
.quellen > .ext { column-gap: var(--s1); }
/* Terminal auch am Desktop deckend (lesbar über jeder Seite, wie am Handy) */
.terminal.glas { background: var(--glas-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Bezug eines Auftrags (Dateipfad): am Desktop offen ohne Kopf, am Handy eingeklappt (data-handy-zu) */
@media (min-width: 900px) { .d-bezug > summary { display: none; } }
.d-bezug .bezug { overflow-wrap: anywhere; }
/* Arbeitsbörse (A23): Stoppen als zweitrangiger Knopf in Rot (wie im Chat) */
.knopf.sekundaer.stopp { color: var(--kritisch); }