/* =========================================================================
   Braaksma Analytics — Ausprobieren (/trial): der Leitstand
   Ein Agent bearbeitet eine Reklamation in einer erfundenen Firma.
   Gleiche Tokens wie die Startseite. Farbe gehört den Systemen und Feldern.
   ========================================================================= */

:root {
  color-scheme: dark;
  --grund: #030405;
  --fenster: #080a0f;
  --flaeche: rgb(255 255 255 / .03);
  --flaeche-2: rgb(255 255 255 / .055);
  --text: #eef1f6;
  --text-2: #a9b1be;
  --text-3: #7b8493;
  --linie: rgb(255 255 255 / .09);
  --linie-2: rgb(255 255 255 / .16);
  --bi: #ffd27a;
  --ml: #8fd3ff;
  --llm: #ff9b6a;
  --agent: #6ff0d0;
  --crm: #c9a7ff;
  --dms: #b9c1ce;
  --paul: #ffe7c2;
  --sperre: #ffcf70;
  --ok: #6ff0d0;
  --nein: #ff8a7a;
  --f: #eef1f6;
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
  --kopf-h: 64px;
}
@media (min-width: 900px) { :root { --rand: max(40px, env(safe-area-inset-left, 0px)); --rand-r: max(40px, env(safe-area-inset-right, 0px)); } }

html { background: var(--grund); scroll-padding-top: 80px; }
body { background: var(--grund); color: var(--text); overflow-x: clip; }
::selection { background: rgb(255 231 194 / .28); }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: 84rem; margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand-r); }
.kennung { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paul); }
.leise { color: #858e9c; }

.himmel { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(1px 1px at 8% 14%, #ffffffb0, transparent 60%), radial-gradient(1px 1px at 22% 62%, #ffffff70, transparent 60%),
  radial-gradient(1.4px 1.4px at 37% 28%, #ffffffc0, transparent 60%), radial-gradient(1px 1px at 51% 84%, #ffffff60, transparent 60%),
  radial-gradient(1px 1px at 64% 12%, #ffffff80, transparent 60%), radial-gradient(1.6px 1.6px at 78% 46%, #ffe7c2c0, transparent 60%),
  radial-gradient(1px 1px at 91% 72%, #ffffff70, transparent 60%), radial-gradient(1px 1px at 14% 90%, #ffffff60, transparent 60%),
  radial-gradient(1.2px 1.2px at 86% 22%, #8fd3ffa0, transparent 60%), radial-gradient(1.2px 1.2px at 6% 44%, #ffd27aa0, transparent 60%),
  radial-gradient(1.2px 1.2px at 70% 92%, #6ff0d0a0, transparent 60%),
  radial-gradient(ellipse 60% 40% at 50% 0%, #0b0f1a 0%, transparent 70%), var(--grund); }

/* --- Kopf ----------------------------------------------------------------- */

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: rgb(3 4 5 / .9); }
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20; height: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--rand-r) 0 var(--rand);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgb(3 4 5 / .86); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: .92rem; font-weight: 520; letter-spacing: .02em; padding: 8px 10px; border-radius: 10px; }
.marke-zeichen { color: var(--paul); }
.kopf-links { display: flex; gap: 24px; }
.kopf-links a { color: var(--text-2); text-decoration: none; font-size: .86rem; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: color var(--dauer-1) var(--kurve), background-size var(--dauer-2) var(--kurve); }
.kopf-links a:hover { color: var(--text); background-size: 100% 1px; }
.kopf-rechts { justify-self: end; }
.kopf-knopf { color: var(--text); text-decoration: none; font-size: .84rem; border: 1px solid var(--linie-2); border-radius: 999px; padding: 7px 14px; transition: border-color var(--dauer-1) var(--kurve), background var(--dauer-1) var(--kurve); }
.kopf-knopf:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .05); }
.kopf a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 899px) { .kopf-links a { font-size: .8rem; } .kopf-knopf { font-size: .78rem; padding: 6px 11px; } .marke { font-size: .84rem; } .marke span { display: none; } }

/* --- Knöpfe ----------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 10px; border: 1px solid var(--linie-2); background: transparent; color: var(--text);
  font-size: .92rem; font-weight: 520; text-decoration: none;
  transition: transform var(--dauer-1) var(--kurve), background var(--dauer-1) var(--kurve), border-color var(--dauer-1) var(--kurve), opacity var(--dauer-2) var(--kurve);
}
.knopf:hover { transform: translateY(-1px); background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .3); }
.knopf:active { transform: translateY(1px) scale(.985); }
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }
.knopf--hell { background: #f2f4f8; color: #05070b; border-color: transparent; }
.knopf--hell:hover { background: #fff; border-color: transparent; }
.knopf--klein { min-height: 36px; padding: 0 14px; font-size: .82rem; border-radius: 8px; }

/* --- Seite ----------------------------------------------------------------- */

main { padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + clamp(28px, 6vh, 64px)); }
.trial-kopf { display: grid; gap: 16px; max-width: 50rem; margin-bottom: clamp(24px, 4vh, 40px); }
.trial-kopf h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); font-weight: 380; letter-spacing: -.05em; line-height: 1.03; text-wrap: balance; }
.trial-kopf p:not(.kennung) { color: var(--text-2); line-height: 1.6; max-width: 40rem; font-size: 1.02rem; text-wrap: pretty; }

/* =========================================================================
   Das Fenster
   ========================================================================= */

.leitstand {
  --sys-b: 252px; --ablauf-b: 214px;
  position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  height: clamp(600px, calc(100svh - var(--kopf-h) - 40px), 840px);
  border: 1px solid var(--linie-2); border-radius: 18px; background: var(--fenster); overflow: hidden;
  box-shadow: 0 40px 120px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .02) inset;
}

/* Titelleiste */
.ls-leiste { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--linie); background: rgb(255 255 255 / .02); min-width: 0; }
.ls-punkte { display: flex; gap: 6px; flex: none; }
.ls-punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.ls-titel { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: .86rem; }
.ls-titel b { font-weight: 560; white-space: nowrap; }
.ls-titel span { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.ls-uhr { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--text-2); letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-regler { display: flex; gap: 6px; flex: none; }
.ls-regler button {
  min-height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--linie); background: transparent; color: var(--text-2);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--dauer-1) var(--kurve), border-color var(--dauer-1) var(--kurve), background var(--dauer-1) var(--kurve);
}
.ls-regler button:hover { color: var(--text); border-color: var(--linie-2); }
.ls-regler button[aria-pressed="true"] { color: var(--text); border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .06); }
.ls-regler button:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }

/* Statuszeile: aktueller Schritt und Zähler */
.ls-status { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--linie); font-size: .78rem; min-width: 0; }
.ls-schritt { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-2); }
.ls-schritt b { color: var(--text); font-weight: 540; white-space: nowrap; }
.ls-lampe { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.leitstand[data-zustand="laeuft"] .ls-lampe { background: var(--agent); box-shadow: 0 0 10px var(--agent); animation: lampe 1.4s ease-in-out infinite; }
.leitstand[data-zustand="wartet"] .ls-lampe { background: var(--sperre); box-shadow: 0 0 10px var(--sperre); }
.leitstand[data-zustand="fertig"] .ls-lampe { background: var(--ok); }
@keyframes lampe { 50% { opacity: .35 } }
.ls-punktreihe { display: none; gap: 4px; }
.ls-punktreihe i { width: 14px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .12); transition: background var(--dauer-2) var(--kurve); }
.ls-punktreihe i[data-z="aktiv"] { background: var(--agent); }
.ls-punktreihe i[data-z="wartet"] { background: var(--sperre); }
.ls-punktreihe i[data-z="fertig"] { background: rgb(111 240 208 / .45); }
.ls-zahlen { margin-left: auto; display: flex; gap: 14px; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }
.ls-zahlen b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.ls-zahlen i { font-style: normal; }
.ls-zahlen .kurz { display: none; }

/* Körper: Systeme | Strom | Ablauf */
.ls-koerper { display: grid; grid-template-columns: var(--sys-b) minmax(0, 1fr) var(--ablauf-b); min-height: 0; }
.ls-rail-titel { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }

/* --- Systeme (MCP-Server) --- */
.ls-systeme { border-right: 1px solid var(--linie); padding: 14px 12px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.sys-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.sys {
  --c: var(--dms);
  border: 1px solid var(--linie); border-radius: 10px; padding: 8px 9px 7px; background: rgb(255 255 255 / .015);
  transition: border-color var(--dauer-2) var(--kurve), background var(--dauer-2) var(--kurve), box-shadow var(--dauer-2) var(--kurve), opacity var(--dauer-2) var(--kurve);
}
.sys[data-z="aus"] { opacity: .45; }
.sys[data-z="aktiv"] { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 0 24px color-mix(in srgb, var(--c) 18%, transparent); }
.sys-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sys { min-width: 0; }
.sys-zeichen { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-family: var(--mono); font-size: .62rem; font-weight: 600; }
.sys-name { font-size: .82rem; font-weight: 540; }
.sys-server { margin-left: auto; font-family: var(--mono); font-size: .58rem; color: var(--text-3); letter-spacing: .04em; }
.sys[data-z="aus"] .sys-server::after { content: " · aus"; }
.sys-tools { list-style: none; margin: 6px 0 0; padding: 0 0 0 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.sys-tools li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: .62rem; color: var(--text-3); padding: 2px 4px; border-radius: 4px; transition: color var(--dauer-1) var(--kurve), background var(--dauer-1) var(--kurve); }
.sys-tools li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sys-tools li[data-aktiv] { color: var(--text); background: color-mix(in srgb, var(--c) 18%, transparent); }
.sys-tools li[data-benutzt] span:first-child::before { content: "· "; color: var(--c); }
.recht { flex: none; font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--linie); color: var(--text-3); }
.recht--intern { color: var(--ml); border-color: rgb(143 211 255 / .3); }
.recht--freigabe { color: var(--sperre); border-color: rgb(255 207 112 / .35); }
.recht--freigabe::before { content: ""; display: inline-block; width: 6px; height: 5px; margin-right: 3px; vertical-align: 0; border: 1px solid currentColor; border-radius: 1px; box-shadow: 0 -2px 0 -1px currentColor; }
.ls-legende { margin-top: auto; padding-top: 12px; display: grid; gap: 5px; font-size: .68rem; color: var(--text-3); }
.ls-legende p { display: flex; gap: 8px; align-items: center; }

/* --- Ablauf (Graph) --- */
.ls-ablauf { border-left: 1px solid var(--linie); padding: 14px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.knoten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.knoten li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 0 0 14px; font-size: .8rem; color: var(--text-3); transition: color var(--dauer-2) var(--kurve); }
.knoten li:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 17px; bottom: 1px; width: 1px; background: var(--linie-2); }
.knoten li::before { content: ""; width: 11px; height: 11px; margin: 3px 0 0 3px; border-radius: 50%; border: 1px solid var(--linie-2); background: var(--fenster); position: relative; z-index: 1; box-sizing: border-box; transition: all var(--dauer-2) var(--kurve); }
.knoten li > span { min-width: 0; }
.knoten li small { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; color: var(--text-3); margin-top: 1px; }
.knoten li[data-z="aktiv"] { color: var(--text); }
.knoten li[data-z="aktiv"]::before { border-color: var(--agent); background: var(--agent); box-shadow: 0 0 12px var(--agent); }
.knoten li[data-z="fertig"] { color: var(--text-2); }
.knoten li[data-z="fertig"]::before { border-color: rgb(111 240 208 / .5); background: rgb(111 240 208 / .25); }
.knoten li[data-z="wartet"] { color: var(--sperre); }
.knoten li[data-z="wartet"]::before { border-color: var(--sperre); background: var(--sperre); box-shadow: 0 0 12px var(--sperre); }
.knoten li[data-z="gestoppt"] { color: var(--nein); }
.knoten li[data-z="gestoppt"]::before { border-color: var(--nein); background: transparent; }
.ls-ablauf-hinweis { font-size: .72rem; line-height: 1.5; color: var(--text-3); }

/* --- Strom: was der Agent tut --- */
.ls-strom { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 18px clamp(14px, 2vw, 26px) 28px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .15) transparent; }
.k { position: relative; border-radius: 12px; animation: k-ein 380ms var(--kurve-aus) both; min-width: 0; }
@keyframes k-ein { from { opacity: 0; transform: translateY(8px) } }
.k-titel { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.k-feld { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--fc); letter-spacing: .1em; }
.k-feld::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 8px var(--fc); }

/* Start */
.k-start { display: grid; gap: 14px; padding: 4px 0 6px; }
.k-start-kopf { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--text-2); }
.k-start-kopf b { color: var(--text); font-weight: 540; }
.k-start-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.k-start-knoepfe span { font-size: .78rem; color: var(--text-3); }

/* Mail */
.k-mail { border: 1px solid var(--linie-2); background: rgb(255 255 255 / .025); padding: 14px 16px 16px; display: grid; gap: 10px; }
.mail-kopf { display: grid; gap: 3px; font-size: .78rem; color: var(--text-2); padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.mail-kopf b { color: var(--text); font-weight: 540; }
.mail-kopf .mail-betreff { color: var(--text); font-size: .92rem; font-weight: 540; margin-top: 4px; }
.mail-text { font-size: .9rem; line-height: 1.62; color: var(--text); white-space: pre-line; }
.mail-text mark { background: transparent; color: inherit; border-radius: 3px; transition: background var(--dauer-3) var(--kurve), box-shadow var(--dauer-3) var(--kurve); }
.mail-text mark[data-an] { background: rgb(255 155 106 / .16); box-shadow: 0 1px 0 0 var(--llm); }
.mail-text mark[data-an]::after { content: attr(data-etikett); font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--llm); vertical-align: super; margin-left: 3px; }

/* Überlegung */
.k-gedanke { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 2px 4px 2px 2px; }
.k-gedanke::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, var(--agent) 0 2.5px, transparent 3px), conic-gradient(from 0deg, rgb(111 240 208 / .5), transparent 70%); }
.k-gedanke p { font-size: .88rem; line-height: 1.55; color: var(--text-2); }
.k-gedanke p b { color: var(--text); font-weight: 540; }
.k-gedanke .k-titel { margin-bottom: 2px; }

/* Werkzeugaufruf */
.k-tool { --c: var(--dms); border: 1px solid var(--linie); background: rgb(255 255 255 / .018); padding: 10px 12px; display: grid; gap: 8px; }
.k-tool[data-recht="freigabe"] { border-color: rgb(255 207 112 / .22); }
.tool-zeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tool-zeile .sys-zeichen { width: 20px; height: 20px; font-size: .58rem; }
.tool-name { font-family: var(--mono); font-size: .76rem; color: var(--text); white-space: nowrap; }
.tool-name i { font-style: normal; color: var(--c); }
.tool-args { font-family: var(--mono); font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tool-stand { margin-left: auto; flex: none; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.tool-stand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c); border-right-color: transparent; animation: dreh .7s linear infinite; }
.k-tool[data-fertig] .tool-stand::before { animation: none; border: 0; width: auto; height: auto; content: "✓"; color: var(--ok); font-size: .72rem; }
@keyframes dreh { to { transform: rotate(360deg) } }
.tool-ergebnis { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; padding-left: 30px; font-size: .8rem; line-height: 1.45; }
.tool-ergebnis dt { color: var(--text-3); }
.tool-ergebnis dd { margin: 0; color: var(--text); min-width: 0; }
.tool-ergebnis dd em { font-style: normal; color: var(--sperre); }
.tool-ergebnis dd strong { font-weight: 560; color: var(--c); }
.tool-recht { padding-left: 30px; font-size: .74rem; color: var(--text-3); display: flex; gap: 8px; align-items: center; }
.tool-recht .recht { font-size: .56rem; }
.k-json { display: none; margin-left: 30px; border-radius: 8px; background: rgb(0 0 0 / .45); border: 1px solid var(--linie); overflow-x: auto; }
.leitstand[data-technik] .k-json { display: block; }
.k-json pre { margin: 0; padding: 10px 12px; font-family: var(--mono); font-size: .66rem; line-height: 1.55; color: #c8d0dc; white-space: pre; }
.k-json pre + pre { border-top: 1px solid var(--linie); }
.k-json .j-k { color: var(--ml); }
.k-json .j-s { color: var(--bi); }
.k-json .j-n { color: var(--agent); }
.k-json .j-c { color: var(--text-3); }

/* Extrahierte Felder */
.k-felder { border: 1px solid rgb(255 155 106 / .25); background: rgb(255 155 106 / .04); padding: 12px 14px; display: grid; gap: 10px; --fc: var(--llm); }
.felder-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.felder-gitter div { display: grid; gap: 1px; min-width: 0; opacity: .25; transition: opacity var(--dauer-2) var(--kurve); }
.felder-gitter div[data-an] { opacity: 1; }
.felder-gitter dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.felder-gitter dd { margin: 0; font-size: .84rem; color: var(--text); }
.felder-gitter dd.hoch { color: var(--sperre); }

/* Diagramm */
.k-diagramm { border: 1px solid rgb(143 211 255 / .22); background: rgb(143 211 255 / .035); padding: 12px 14px 12px; display: grid; gap: 8px; --fc: var(--ml); }
.k-diagramm svg { width: 100%; height: auto; overflow: visible; }
.dg-achse { stroke: rgb(255 255 255 / .12); stroke-width: 1; }
.dg-band { fill: rgb(111 240 208 / .08); }
.dg-soll { stroke: rgb(111 240 208 / .5); stroke-dasharray: 3 4; stroke-width: 1; }
.dg-fenster { fill: rgb(255 138 122 / .12); stroke: rgb(255 138 122 / .45); stroke-dasharray: 2 3; }
.dg-linie { fill: none; stroke: var(--ml); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.dg-text { font-family: var(--mono); font-size: 9.5px; fill: var(--text-3); letter-spacing: .04em; }
.dg-text--rot { fill: var(--nein); }
.dg-text--gruen { fill: rgb(111 240 208 / .8); }
.dg-unter { font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.dg-unter b { color: var(--text); font-weight: 540; }

/* Lagebild */
.k-lage { border: 1px solid rgb(255 210 122 / .22); background: rgb(255 210 122 / .035); padding: 12px 14px; display: grid; gap: 10px; --fc: var(--bi); }
.lage-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lage-gitter div { border-radius: 8px; background: rgb(0 0 0 / .25); padding: 10px 10px 9px; display: grid; gap: 2px; align-content: start; }
.lage-gitter dt { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); order: 2; }
.lage-gitter dd { margin: 0; font-size: 1.12rem; font-weight: 520; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.lage-gitter dd small { font-size: .7rem; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.lage-gitter .warn dd { color: var(--sperre); }
.lage-gitter .gut dd { color: var(--ok); }

/* Entscheidung */
.k-wahl, .k-entwurf { border: 1px solid rgb(255 207 112 / .35); background: rgb(255 207 112 / .035); padding: 14px; display: grid; gap: 12px; --fc: var(--agent); box-shadow: 0 0 0 4px rgb(255 207 112 / .04); }
.k-wahl[data-erledigt], .k-entwurf[data-erledigt] { border-color: var(--linie); background: rgb(255 255 255 / .018); box-shadow: none; }
.wahl-frage { font-size: 1.02rem; font-weight: 540; letter-spacing: -.01em; }
.optionen { display: grid; gap: 8px; }
.option {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; text-align: left; width: 100%;
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linie); background: rgb(255 255 255 / .02); color: var(--text);
  transition: border-color var(--dauer-1) var(--kurve), background var(--dauer-1) var(--kurve), transform var(--dauer-1) var(--kurve);
}
.option:hover:not(:disabled) { border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .045); }
.option:active:not(:disabled) { transform: translateY(1px); }
.option:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }
.option:disabled { cursor: default; }
.option-buchstabe { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--linie-2); display: grid; place-items: center; font-family: var(--mono); font-size: .66rem; color: var(--text-2); }
.option b { font-weight: 540; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.option b small { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--agent); font-weight: 500; }
.option span:last-child { font-size: .8rem; line-height: 1.45; color: var(--text-2); }
.option[data-gewaehlt] { border-color: var(--agent); background: rgb(111 240 208 / .07); }
.option[data-gewaehlt] .option-buchstabe { background: var(--agent); color: #05070b; border-color: var(--agent); }
.k-wahl[data-erledigt] .option:not([data-gewaehlt]) { opacity: .4; }

/* Entwurf zur Freigabe */
.entwurf-mail { border-radius: 10px; border: 1px solid var(--linie); background: rgb(0 0 0 / .28); padding: 12px 14px; display: grid; gap: 8px; }
.entwurf-kopf { font-size: .76rem; color: var(--text-3); display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.entwurf-kopf b { color: var(--text-2); font-weight: 500; }
.entwurf-text { font-size: .86rem; line-height: 1.6; color: var(--text); white-space: pre-line; transition: opacity var(--dauer-2) var(--kurve); }
.entwurf-text[data-neu] { opacity: .2; }
.anhaenge { display: flex; flex-wrap: wrap; gap: 6px; }
.anhaenge span { font-family: var(--mono); font-size: .62rem; padding: 4px 8px; border-radius: 6px; background: rgb(255 255 255 / .05); border: 1px solid var(--linie); color: var(--text-2); }
.ton { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ton > span { font-size: .74rem; color: var(--text-3); margin-right: 2px; }
.ton button { min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--text-2); font-size: .76rem; transition: all var(--dauer-1) var(--kurve); }
.ton button:hover:not(:disabled) { color: var(--text); border-color: var(--linie-2); }
.ton button[aria-pressed="true"] { color: #05070b; background: var(--text); border-color: var(--text); }
.ton button:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }
.aktionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aktionen li label { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background var(--dauer-1) var(--kurve); }
.aktionen li label:hover { background: rgb(255 255 255 / .03); }
.aktionen input { width: 16px; height: 16px; accent-color: var(--agent); margin: 0; }
.aktionen .sys-zeichen { width: 22px; height: 22px; }
.aktion-text { display: grid; gap: 1px; min-width: 0; }
.aktion-text b { font-weight: 520; font-size: .84rem; }
.aktion-text code { font-family: var(--mono); font-size: .64rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freigabe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.freigabe-knoepfe .knopf--hell { background: var(--agent); color: #04110d; }
.freigabe-knoepfe .knopf--hell:hover { background: #8ff5dc; }
.freigabe-hinweis { font-size: .74rem; color: var(--text-3); line-height: 1.5; }
.k-entwurf[data-erledigt] .ton, .k-entwurf[data-erledigt] .freigabe-knoepfe { display: none; }

/* Protokoll */
.k-protokoll { border: 1px solid var(--linie); background: rgb(255 255 255 / .018); padding: 12px 14px; display: grid; gap: 10px; }
.protokoll { width: 100%; border-collapse: collapse; font-size: .76rem; }
.protokoll td { padding: 5px 8px 5px 0; border-top: 1px solid var(--linie); vertical-align: top; color: var(--text-2); }
.protokoll td:first-child { font-family: var(--mono); font-size: .66rem; color: var(--text-3); white-space: nowrap; width: 1%; }
.protokoll td:nth-child(2) { white-space: nowrap; width: 1%; color: var(--text); }
.protokoll td:nth-child(2)[data-wer="sie"] { color: var(--sperre); }
.protokoll-rahmen { overflow-x: auto; }

/* Bilanz */
.k-bilanz { border: 1px solid rgb(111 240 208 / .3); background: linear-gradient(180deg, rgb(111 240 208 / .07), rgb(111 240 208 / .015)); padding: 18px; display: grid; gap: 14px; }
.k-bilanz h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.bilanz-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bilanz-gitter div { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: rgb(0 0 0 / .25); }
.bilanz-gitter dt { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); order: 2; }
.bilanz-gitter dd { margin: 0; font-size: 1.25rem; font-weight: 520; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.bilanz-gitter dd small { font-size: .7rem; color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.k-bilanz p { font-size: .9rem; line-height: 1.55; color: var(--text-2); max-width: 44rem; }
.k-bilanz p b { color: var(--text); font-weight: 540; }
.bilanz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* =========================================================================
   Unter dem Fenster
   ========================================================================= */

.gebaut { display: grid; gap: 14px; margin-top: clamp(36px, 6vh, 64px); }
.gebaut-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gebaut article { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 14px; border: 1px solid var(--linie); background: rgb(255 255 255 / .02); }
.gebaut h3 { font-size: 1rem; font-weight: 540; }
.gebaut article p { font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.gebaut-zeichen { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fc); }

.anfrage { display: grid; justify-items: center; text-align: center; gap: 18px; margin-top: clamp(64px, 10vh, 120px); padding-top: clamp(48px, 8vh, 80px); border-top: 1px solid var(--linie); }
.anfrage h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 380; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; max-width: 18ch; }
.anfrage > p { color: var(--text-2); line-height: 1.6; max-width: 36rem; }
.ablaeufe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 46rem; }
.ablaeufe button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-2); background: transparent; color: var(--text-2); font-size: .86rem; transition: all var(--dauer-1) var(--kurve); }
.ablaeufe button:hover { color: var(--text); border-color: rgb(255 255 255 / .35); }
.ablaeufe button[aria-pressed="true"] { color: #04110d; background: var(--agent); border-color: var(--agent); }
.ablaeufe button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.anfrage-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.anfrage-adresse { font-family: var(--mono); font-size: .82rem; color: var(--text-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.anfrage-adresse [data-adresse] { user-select: all; }
.kopieren { background: none; border: 1px solid var(--linie); border-radius: 6px; color: var(--text-2); font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; }
.kopieren:hover { color: var(--text); border-color: var(--linie-2); }
.kopiert { color: var(--paul); }
.anfrage .hinweis { font-size: .76rem; color: var(--text-3); max-width: 34rem; line-height: 1.55; }

.fuss { margin-top: 72px; border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom, 0px); }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; padding-block: 22px; font-size: .78rem; color: var(--text-3); }
.fuss nav { display: flex; gap: 20px; }
.fuss a { color: var(--text-2); text-decoration: none; padding-block: 6px; }
.fuss a:hover { color: var(--text); }

/* =========================================================================
   Kleinere Bildschirme
   ========================================================================= */

@media (max-width: 1180px) {
  .ls-koerper { grid-template-columns: var(--sys-b) minmax(0, 1fr); }
  .ls-ablauf { display: none; }
  .ls-punktreihe { display: flex; }
}
@media (max-width: 1180px) and (min-width: 761px) { .leitstand { --sys-b: 228px; } }
@media (max-width: 760px) {
  .leitstand { height: calc(100svh - var(--kopf-h) - 24px); min-height: 560px; border-radius: 14px; }
  .ls-leiste { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .ls-punkte { display: none; }
  .ls-titel span { display: none; }
  .ls-uhr { margin-left: 0; }
  .ls-regler { width: 100%; }
  .ls-regler button { flex: 1; padding: 0 6px; }
  .ls-status { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .ls-zahlen { margin-left: 0; width: 100%; justify-content: space-between; gap: 8px; }
  .ls-zahlen .lang { display: none; }
  .ls-zahlen .kurz { display: inline; }
  .ls-koerper { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ls-systeme { border-right: 0; border-bottom: 1px solid var(--linie); padding: 8px 12px; overflow-x: auto; overflow-y: hidden; }
  .ls-systeme .ls-rail-titel, .ls-legende, .sys-tools { display: none; }
  .sys-liste { display: flex; gap: 6px; }
  .sys { flex: none; padding: 5px 8px; }
  .sys-server { display: none; }
  .sys-name { font-size: .74rem; }
  .ls-strom { padding: 14px 12px 24px; }
  .tool-ergebnis, .tool-recht { padding-left: 0; grid-template-columns: 1fr; gap: 0 10px; }
  .tool-ergebnis dt { margin-top: 4px; font-size: .7rem; }
  .k-json { margin-left: 0; }
  .tool-args { display: none; }
  .felder-gitter { grid-template-columns: minmax(0, 1fr); }
  .lage-gitter, .bilanz-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gebaut-gitter { grid-template-columns: minmax(0, 1fr); }
  .aktionen li label { grid-template-columns: 18px minmax(0, 1fr); }
  .aktionen .sys-zeichen, .aktionen .recht { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k { animation: none; }
  .leitstand[data-zustand="laeuft"] .ls-lampe, .tool-stand::before { animation: none; }
}
@media (max-width: 760px) {
  .k-wahl, .k-entwurf { padding: 12px 10px; }
  .entwurf-mail { padding: 10px; }
  .entwurf-text { font-size: .84rem; }
}
@media (max-width: 380px) { .ls-zahlen { font-size: .58rem; letter-spacing: 0; } }