/* AGORA OS Oberfläche – nur Werte aus /design-tokens/tokens.css */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--a-grund);
  color: var(--a-text);
  font: var(--a-gewicht-normal) var(--a-groesse-3) / var(--a-zeile) var(--a-schrift);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--a-fokus-dicke) solid var(--a-akzent); outline-offset: var(--a-fokus-dicke); }
[hidden] { display: none !important; } /* !important: hidden muss jede display-Regel schlagen */

/* ---------- Titelleiste (nur Desktop-App) ---------- */
.titelleiste {
  position: fixed; inset: 0 0 auto 0; height: var(--a-titel-hoehe); z-index: 10;
  display: flex; align-items: stretch; background: var(--a-grund); border-bottom: var(--a-linie-dicke) solid var(--a-linie);
  user-select: none;
}
.titel-marke { display: flex; align-items: center; gap: var(--a-abstand-2); padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-fett); }
.titel-flaeche { flex: 1; }
.titel-knoepfe { display: flex; }
.fenster-knopf { width: var(--a-feld-hoehe); border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--a-text-leise); }
.fenster-knopf svg { width: var(--a-abstand-3); height: var(--a-abstand-3); fill: none; stroke: currentColor; stroke-width: 1.2; }
.fenster-knopf:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.fenster-knopf.zu:hover { background: var(--a-fehler); color: var(--a-text-auf-akzent); }
body.app .wurzel { padding-top: var(--a-titel-hoehe); }

.wurzel { min-height: 100%; }
.laden { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: var(--a-abstand-3); color: var(--a-text-leise); }
.kreisel { width: var(--a-abstand-4); height: var(--a-abstand-4); border-radius: var(--a-radius-rund); border: var(--a-fokus-dicke) solid var(--a-linie); border-top-color: var(--a-akzent); animation: drehen 800ms linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kreisel { animation: none; } }

/* ---------- Anmelde-Bereich ---------- */
.tor {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--a-abstand-6) max(var(--a-abstand-4), env(safe-area-inset-left));
  gap: var(--a-abstand-5);
}
body.app .tor { min-height: calc(100vh - var(--a-titel-hoehe)); }
.tor-marke { display: flex; align-items: center; gap: var(--a-abstand-3); font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); letter-spacing: 0.02em; }
.tor-marke img { width: var(--a-abstand-6); height: var(--a-abstand-6); }
.karte {
  width: 100%; max-width: var(--a-karte-breite); background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie);
  border-radius: var(--a-radius-l); box-shadow: var(--a-schatten-2); padding: var(--a-abstand-6) var(--a-abstand-5);
  display: flex; flex-direction: column; gap: var(--a-abstand-4);
}
.karte h1 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-5) / 1.2 var(--a-schrift-anzeige); text-wrap: balance; }
.karte .unter { margin: 0; color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.feld { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.feld label { font-size: var(--a-groesse-2); color: var(--a-text-leise); font-weight: var(--a-gewicht-mittel); }
.feld .hinweis { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.eingabe {
  height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-4); border-radius: var(--a-radius-rund);
  border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche-2); color: var(--a-text);
  transition: border-color var(--a-dauer-kurz) var(--a-kurve), background var(--a-dauer-kurz) var(--a-kurve);
}
.eingabe:focus { outline: none; border-color: var(--a-akzent); background: var(--a-flaeche); }
.eingabe.code { font-family: var(--a-schrift-mono); letter-spacing: 0.3em; text-align: center; font-size: var(--a-groesse-4); }
select.eingabe { padding-right: var(--a-abstand-5); }

.knopf {
  height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-5); border-radius: var(--a-radius-rund); border: var(--a-linie-dicke) solid transparent;
  background: var(--a-text); color: var(--a-grund); font-weight: var(--a-gewicht-fett); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-abstand-2);
  transition: opacity var(--a-dauer-kurz) var(--a-kurve), transform var(--a-dauer-kurz) var(--a-kurve);
}
.knopf:hover { opacity: 0.88; }
.knopf:active { transform: scale(0.98); }
.knopf[disabled] { opacity: 0.55; cursor: default; }
.knopf.zweit { background: transparent; color: var(--a-text); border-color: var(--a-linie); }
.knopf.zweit:hover { background: var(--a-flaeche-2); opacity: 1; }
.knopf.gefahr { background: transparent; color: var(--a-fehler); border-color: var(--a-linie); }
.knopf.gefahr:hover { background: var(--a-fehler-weich); opacity: 1; }
.knopf.klein { height: calc(var(--a-feld-hoehe) - var(--a-abstand-3)); padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); }
.verweise { display: flex; justify-content: space-between; gap: var(--a-abstand-3); flex-wrap: wrap; font-size: var(--a-groesse-2); }
.verweis { background: none; border: 0; padding: 0; color: var(--a-akzent); cursor: pointer; text-decoration: none; }
.verweis:hover { text-decoration: underline; }

.meldung { border-radius: var(--a-radius-m); padding: var(--a-abstand-3) var(--a-abstand-4); font-size: var(--a-groesse-2); }
.meldung.fehler { background: var(--a-fehler-weich); color: var(--a-fehler); }
.meldung.gut { background: var(--a-gut-weich); color: var(--a-gut); }

.sprachwahl { display: flex; gap: var(--a-abstand-1); background: var(--a-flaeche-2); border-radius: var(--a-radius-rund); padding: var(--a-abstand-1); }
.sprachwahl button { border: 0; background: transparent; border-radius: var(--a-radius-rund); padding: var(--a-abstand-1) var(--a-abstand-3); font-size: var(--a-groesse-1); color: var(--a-text-leise); cursor: pointer; }
.sprachwahl button[aria-pressed="true"] { background: var(--a-flaeche); color: var(--a-text); box-shadow: var(--a-schatten-1); }


/* ---------- Einstellungs-Bausteine ---------- */
.abschnitt { background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); padding: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-4); }
.abschnitt h2 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); }
.abschnitt .unter { margin: 0; color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.reihe { display: flex; gap: var(--a-abstand-3); align-items: flex-start; flex-wrap: wrap; }
.abschnitt form > .knopf, .abschnitt form > .meldung, .abschnitt > .knopf { align-self: flex-start; }
.reihe .feld { flex: 1; min-width: var(--a-feld-min); }
.wahl { display: inline-flex; gap: var(--a-abstand-1); background: var(--a-flaeche-2); border-radius: var(--a-radius-rund); padding: var(--a-abstand-1); }
.wahl button { border: 0; background: transparent; border-radius: var(--a-radius-rund); padding: var(--a-abstand-2) var(--a-abstand-4); color: var(--a-text-leise); cursor: pointer; font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); }
.wahl button[aria-pressed="true"] { background: var(--a-flaeche); color: var(--a-text); box-shadow: var(--a-schatten-1); }
.pille { display: inline-flex; align-items: center; height: var(--a-abstand-5); padding: 0 var(--a-abstand-3); border-radius: var(--a-radius-rund); font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); background: var(--a-flaeche-2); color: var(--a-text-leise); white-space: nowrap; }
.pille.gut { background: var(--a-gut-weich); color: var(--a-gut); }
.pille.fehler { background: var(--a-fehler-weich); color: var(--a-fehler); }
.pille.akzent { background: var(--a-akzent-weich); color: var(--a-akzent); }
.pille.warn { background: var(--a-warn-weich); color: var(--a-warn); }
.liste { display: flex; flex-direction: column; }
.eintrag { display: flex; align-items: center; gap: var(--a-abstand-4); padding: var(--a-abstand-3) 0; border-top: var(--a-linie-dicke) solid var(--a-linie); flex-wrap: wrap; }
.eintrag:first-child { border-top: 0; }
.eintrag .haupt { flex: 1; min-width: var(--a-eintrag-min); }
.eintrag .titel { font-weight: var(--a-gewicht-fett); display: flex; gap: var(--a-abstand-2); align-items: center; flex-wrap: wrap; }
.eintrag .klein { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.eintrag .aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.leer { color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.geheim { font-family: var(--a-schrift-mono); background: var(--a-flaeche-2); border-radius: var(--a-radius-m); padding: var(--a-abstand-3) var(--a-abstand-4); word-break: break-all; letter-spacing: 0.08em; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a-code-min), 1fr)); gap: var(--a-abstand-2); font-family: var(--a-schrift-mono); }
.codes span { background: var(--a-flaeche-2); border-radius: var(--a-radius-s); padding: var(--a-abstand-2); text-align: center; }
.rechte { display: flex; gap: var(--a-abstand-1); flex-wrap: wrap; }
.recht-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 var(--a-abstand-1); }
/* Pool-Limit je Konto (Verwaltung) */
.pool-limit { display: flex; flex-direction: column; gap: var(--a-abstand-2); flex-basis: 100%; }
.pool-freigabe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); }
.reihe-klein { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; align-items: center; }
.eingabe.klein { height: calc(var(--a-feld-hoehe) - var(--a-abstand-3)); padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-2); }
input.eingabe.klein { width: calc(var(--a-feld-min) / 2); }
.eingabe[hidden] { display: none; }
.fehler-text { color: var(--a-fehler); }
.notaus-leiste .knopf { margin-left: var(--a-abstand-3); }
.mail { border-top: var(--a-linie-dicke) solid var(--a-linie); padding: var(--a-abstand-3) 0; font-size: var(--a-groesse-2); }
.mail:first-child { border-top: 0; }
.mail pre { margin: var(--a-abstand-1) 0 0; white-space: pre-wrap; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); color: var(--a-text-leise); }

/* Abos & Pool */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--a-code-min), 1fr)); gap: var(--a-abstand-3); }
.kennzahl { background: var(--a-flaeche-2); border-radius: var(--a-radius-m); padding: var(--a-abstand-3) var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.kennzahl.gross { background: var(--a-akzent-weich); }
.kennzahl .k-titel { font-size: var(--a-groesse-1); color: var(--a-text-leise); text-transform: uppercase; letter-spacing: 0.06em; }
.kennzahl b { font: var(--a-gewicht-fett) var(--a-groesse-5) var(--a-schrift-anzeige); font-variant-numeric: tabular-nums; }
.kennzahl .k-unter { font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }
.balken { height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--a-akzent); }
.zwischen { margin: var(--a-abstand-2) 0 0; font: var(--a-gewicht-fett) var(--a-groesse-3) var(--a-schrift-anzeige); }
.haken { display: flex; align-items: center; gap: var(--a-abstand-2); font-size: var(--a-groesse-2); cursor: pointer; }
.haken input { width: var(--a-abstand-4); height: var(--a-abstand-4); accent-color: var(--a-akzent); }
.tabelle-rahmen { overflow-x: auto; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--a-groesse-2); }
.tabelle th { text-align: left; font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); background: var(--a-flaeche-2); padding: var(--a-abstand-2) var(--a-abstand-3); white-space: nowrap; }
.tabelle td { padding: var(--a-abstand-2) var(--a-abstand-3); border-top: var(--a-linie-dicke) solid var(--a-linie); white-space: nowrap; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .plus { color: var(--a-gut); }
.tabelle .minus { color: var(--a-warn); }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: var(--a-flaeche-2); }


/* ---------- Schale (S6, Richtung Grok): Seitenleiste mit Chats links, Kopf + Inhalt rechts ---------- */
.schale { display: grid; grid-template-columns: var(--cowork-links-breite, var(--a-leiste-breite)) minmax(0, 1fr); /* --cowork-links-breite: Griff in Cowork (os-100) */ height: 100vh; overflow: hidden; }
body.app .schale { height: calc(100vh - var(--a-titel-hoehe)); }
.leiste { background: var(--a-flaeche); border-right: var(--a-linie-dicke) solid var(--a-linie); min-height: 0; }
.leiste-innen { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-3); height: 100%; min-height: 0; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--a-abstand-1) var(--a-abstand-1) var(--a-abstand-2); }
.leiste .tor-marke { font-size: var(--a-groesse-3); gap: var(--a-abstand-2); }
.leiste .tor-marke img { width: var(--a-abstand-5); height: var(--a-abstand-5); }
.tor-marke span { white-space: nowrap; }
.kopf-knopf.leiste-zu, .kopf-knopf.leiste-auf { display: none; }
.chat-neu { display: flex; align-items: center; gap: var(--a-abstand-2); width: 100%; height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-4); border-radius: var(--a-radius-rund); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-grund); color: var(--a-text); font-weight: var(--a-gewicht-mittel); cursor: pointer; transition: background var(--a-dauer-kurz) var(--a-kurve); }
.chat-neu:hover { background: var(--a-flaeche-2); }
.chat-neu svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.8; }
.eingabe.suche { height: calc(var(--a-feld-hoehe) - var(--a-abstand-2)); font-size: var(--a-groesse-2); background: var(--a-flaeche-2); border-color: transparent; }
.chat-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--a-abstand-1); margin: 0 calc(-1 * var(--a-abstand-1)); padding: 0 var(--a-abstand-1); scrollbar-width: thin; }
.chat-liste .leer { padding: var(--a-abstand-2) var(--a-abstand-3); margin: 0; }
.chat-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 0; border: 0; background: transparent; border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; text-align: left; min-width: 0; width: 100%; color: var(--a-text); }
.chat-eintrag:hover { background: var(--a-flaeche-2); }
.chat-eintrag[aria-current="page"] { background: var(--a-flaeche-3); }
.chat-gruppe { margin: var(--a-abstand-3) 0 0; padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); }
.chat-gruppe:first-child { margin-top: 0; }
.chat-kopf { display: flex; align-items: baseline; gap: var(--a-abstand-2); width: 100%; min-width: 0; }
.chat-name { flex: 1; min-width: 0; font-size: var(--a-groesse-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-zeit { flex: none; font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }
.chat-unter { font-size: var(--a-groesse-1); color: var(--a-text-leise); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abo-block { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-3); border-radius: var(--a-radius-m); background: var(--a-flaeche-2); }
.abo-zeile { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.abo-name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-abstand-2); min-width: 0; font-size: var(--a-groesse-1); }
.abo-titel { flex: 1; min-width: 0; font-weight: var(--a-gewicht-mittel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abo-name .klein { flex: none; color: var(--a-text-leise); }
.abo-werte { font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.abo-balken { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--a-abstand-1); }
.abo-balken .balken { height: var(--a-abstand-1); }
.nutzer-bereich { position: relative; }
.nutzer-karte { display: flex; align-items: center; gap: var(--a-abstand-3); width: 100%; padding: var(--a-abstand-2); border: 0; background: transparent; border-radius: var(--a-radius-m); color: var(--a-text); font: inherit; text-align: left; cursor: pointer; }
.nutzer-karte:hover, .nutzer-karte[aria-expanded="true"] { background: var(--a-flaeche-2); }
.avatar { width: var(--a-abstand-6); height: var(--a-abstand-6); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); color: var(--a-text); display: grid; place-items: center; font-weight: var(--a-gewicht-fett); flex: none; }
.nutzer-karte .wer { min-width: 0; flex: 1; }
.nutzer-karte .name { font-weight: var(--a-gewicht-mittel); font-size: var(--a-groesse-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutzer-karte .rolle { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.nutzer-pfeil { color: var(--a-text-leise); font-size: var(--a-groesse-1); }
.nutzer-menue, .plus-menue { display: flex; flex-direction: column; gap: var(--a-abstand-1); padding: var(--a-abstand-2); overflow-y: auto; background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); box-shadow: var(--a-schatten-2); }
.nutzer-menue { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: var(--a-abstand-1); max-height: 70vh; z-index: 30; }
.nutzer-menue[hidden] { display: none; }
.plus-menue { position: fixed; z-index: 40; width: var(--a-leiste-breite); max-width: calc(100vw - var(--a-abstand-4)); max-height: 60vh; }
.menue-gruppe { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.menue-gruppe + .menue-gruppe { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-1); }
.menue-titel { padding: var(--a-abstand-1) var(--a-abstand-3) 0; font-size: var(--a-groesse-1); color: var(--a-text-leise); font-weight: var(--a-gewicht-mittel); }
.menue-eintrag, .menue-info { display: flex; align-items: center; gap: var(--a-abstand-3); flex: none; min-height: var(--a-abstand-6); padding: var(--a-abstand-1) var(--a-abstand-3); border: 0; background: transparent; border-radius: var(--a-radius-m); color: var(--a-text); font: inherit; font-size: var(--a-groesse-2); text-align: left; }
.menue-eintrag { cursor: pointer; }
.menue-info { color: var(--a-text-leise); }
.menue-eintrag svg { width: var(--a-abstand-4); height: var(--a-abstand-4); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--a-text-leise); }
.menue-eintrag:hover, .menue-eintrag:focus-visible { background: var(--a-flaeche-2); outline: none; }
.menue-eintrag[aria-current="page"], .menue-eintrag[aria-checked="true"] { background: var(--a-flaeche-3); }
.menue-reihe { display: flex; flex-wrap: wrap; gap: var(--a-abstand-1); }
.menue-reihe .menue-eintrag { flex: 1; justify-content: center; }
.menue-eintrag[data-abmelden]:hover, .menue-eintrag[data-abmelden]:focus-visible { color: var(--a-fehler); background: var(--a-fehler-weich); }
.menue-rechts { margin-left: auto; color: var(--a-text-leise); font-size: var(--a-groesse-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.eingabe-fuss { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; padding: 0 var(--a-abstand-1); }
.eingabe-fuss .modell-knopf { height: var(--a-abstand-5); padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-1); border-color: transparent; background: transparent; color: var(--a-text-leise); }
.eingabe-fuss .modell-knopf:hover, .eingabe-fuss .modell-knopf[aria-expanded="true"] { background: var(--a-flaeche-2); color: var(--a-text); }
.engine-stand { font-size: var(--a-groesse-1); color: var(--a-warn); }
.engine-stand[data-zustand="fehler"], .engine-stand[data-zustand="offline"] { color: var(--a-fehler); }
.abo-kopf-reihe { position: relative; display: flex; align-items: flex-start; } /* os-97: Ausblenden-Knopf liegt darüber, nimmt der Zeile keinen Platz */
.abo-aus { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: var(--a-abstand-4); height: var(--a-abstand-4); padding: 0; border: 0; background: var(--a-flaeche-2); border-radius: var(--a-radius-rund); color: var(--a-text-leise); cursor: pointer; opacity: 0; transition: opacity var(--a-dauer-kurz) var(--a-kurve); }
.abo-aus svg { width: var(--a-abstand-3); height: var(--a-abstand-3); fill: none; stroke: currentColor; stroke-width: 1.6; }
.abo-zeile:hover .abo-aus, .abo-aus:focus-visible { opacity: 1; }
.abo-aus:hover { color: var(--a-text); background: var(--a-flaeche-3); }
@media (hover: none) { .abo-zeile:focus-within .abo-aus { opacity: 1; } }
.schleier { display: none; }

main.haupt { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--a-grund); } /* nur die Haupt-Fläche, nicht .eintrag .haupt */
.haupt-kopf { display: flex; align-items: center; gap: var(--a-abstand-3); min-height: var(--a-kopf-hoehe); padding: var(--a-abstand-2) var(--a-abstand-5); }
.kopf-links { flex: 1; min-width: 0; }
.kopf-rechts { display: flex; align-items: center; gap: var(--a-abstand-3); flex: none; }
.abo-gesamt { display: flex; align-items: center; gap: var(--a-abstand-3); font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopf-knopf { width: var(--a-abstand-6); height: var(--a-abstand-6); border: 0; border-radius: var(--a-radius-rund); background: transparent; color: var(--a-text-leise); display: grid; place-items: center; cursor: pointer; flex: none; }
.kopf-knopf:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.kopf-knopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Thema-Knopf: Symbol + kurzer Text (System/Hell/Dunkel); Handy nur Symbol (Tooltip + aria-label bleiben) */
.thema-knopf { display: inline-flex; align-items: center; gap: var(--a-abstand-2); height: var(--a-abstand-6); padding: 0 var(--a-abstand-3); border: 0; border-radius: var(--a-radius-rund); background: transparent; color: var(--a-text-leise); font: inherit; font-size: var(--a-groesse-2); white-space: nowrap; cursor: pointer; flex: none; }
.thema-knopf:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.thema-knopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
@media (max-width: 600px) {
  .thema-knopf { width: var(--a-abstand-6); padding: 0; justify-content: center; }
  .thema-text { display: none; }
}
.haupt-inhalt { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.seite, .seite-einst { overflow-y: auto; padding: var(--a-abstand-5) var(--a-abstand-6) var(--a-abstand-7); display: flex; justify-content: center; }
/* os-p9: normale Seiten fuellen die Hoehe; Einstellungen (.seite-einst) nur so hoch wie der Inhalt, Scrollen innen */
.seite { flex: 1; }
.spalte { width: 100%; max-width: var(--a-inhalt-breite); display: flex; flex-direction: column; gap: var(--a-abstand-5); }
.kopf h1 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-6) / 1.15 var(--a-schrift-anzeige); text-wrap: balance; }
.kopf p { margin: var(--a-abstand-1) 0 0; color: var(--a-text-leise); }

/* ---------- Chat ---------- */
.chat-schale { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-schale > .laden.klein { min-height: 0; flex: 1; }
.chat-fehler { margin: auto; display: flex; flex-direction: column; gap: var(--a-abstand-3); align-items: center; }
.chat-wahl { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
/* Modell-Knopf: EIN Knopf mit lesbarem Namen, Liste als Klapp-Fenster (Handy: Blatt von unten) */
.modell-knopf { display: inline-flex; align-items: center; gap: var(--a-abstand-2); height: var(--a-abstand-6); border-radius: var(--a-radius-rund); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-grund); color: var(--a-text); padding: 0 var(--a-abstand-4); font: inherit; font-size: var(--a-groesse-3); font-weight: var(--a-gewicht-mittel); cursor: pointer; white-space: nowrap; }
.modell-knopf:hover, .modell-knopf[aria-expanded="true"] { background: var(--a-flaeche-2); }
.modell-knopf.aus { color: var(--a-text-leise); }
.modell-knopf-pfeil { color: var(--a-text-leise); font-size: var(--a-groesse-1); }
.modell-liste { position: fixed; z-index: 40; width: var(--a-karte-breite); max-width: calc(100vw - var(--a-abstand-4)); max-height: 70vh; display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-3); border-radius: var(--a-radius-l); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.modell-suche { flex: none; height: calc(var(--a-feld-hoehe) - var(--a-abstand-2)); }
.modell-gruppen { overflow-y: auto; display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.modell-gruppe { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.modell-gruppe-titel { font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-fett); color: var(--a-text-leise); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--a-abstand-1) var(--a-abstand-2); }
.modell-eintrag { display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-3); width: 100%; text-align: left; border: 0; border-radius: var(--a-radius-m); background: none; color: var(--a-text); font: inherit; padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; }
.modell-eintrag:hover:not(:disabled), .modell-eintrag.aktiv { background: var(--a-flaeche-2); }
.modell-eintrag:disabled { cursor: not-allowed; color: var(--a-text-leise); }
.modell-text { display: flex; flex-direction: column; min-width: 0; }
.modell-titel { font-size: var(--a-groesse-3); font-weight: var(--a-gewicht-mittel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modell-zeile { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.modell-stand { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--a-abstand-1); font-size: var(--a-groesse-1); color: var(--a-text-leise); min-width: calc(var(--a-eintrag-min) / 2); }
.modell-stand .balken { width: calc(var(--a-eintrag-min) / 2); }
.modell-stand.aus { font-style: italic; }
.modell-mehr { font-size: var(--a-groesse-1); color: var(--a-text-leise); padding: 0 var(--a-abstand-3); }
.modell-schleier { position: fixed; inset: 0; z-index: 39; background: var(--a-schleier); }
.modell-liste.blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 80vh; border-radius: var(--a-radius-xl) var(--a-radius-xl) 0 0; padding-bottom: max(var(--a-abstand-3), env(safe-area-inset-bottom)); }
.blatt-griff { align-self: center; width: var(--a-abstand-7); height: var(--a-abstand-1); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); }
.chat-titelzeile { width: 100%; max-width: var(--a-chat-spalte); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-3); padding-bottom: var(--a-abstand-2); border-bottom: var(--a-linie-dicke) solid var(--a-linie); }
.chat-titelzeile h1 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.knopf.klein svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat-verlauf { flex: 1; min-height: 0; overflow-y: auto; padding: var(--a-abstand-4) var(--a-abstand-5) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-5); }
.chat-leer { margin: auto; color: var(--a-text-leise); text-align: center; max-width: var(--a-karte-breite); }
.willkommen h1 { margin: 0 0 var(--a-abstand-2); color: var(--a-text); font: var(--a-gewicht-fett) var(--a-groesse-6) / 1.2 var(--a-schrift-anzeige); text-wrap: balance; }
.willkommen p { margin: 0; padding: 0 var(--a-abstand-4); text-wrap: balance; }
.chat-schale.willkommen-an { justify-content: center; }
.chat-schale.willkommen-an .chat-verlauf { flex: 0 0 auto; padding: 0; }
.chat-schale.willkommen-an .willkommen { margin: 0 auto var(--a-abstand-5); max-width: var(--a-chat-spalte); }
.nachricht { width: 100%; max-width: var(--a-chat-spalte); margin: 0 auto; display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.nachricht.nutzer { align-items: flex-end; }
.nachricht.nutzer .blase { background: var(--a-flaeche-2); border-radius: var(--a-radius-l); padding: var(--a-abstand-3) var(--a-abstand-4); max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht.ki[data-zustand="laeuft"] .ki-text:empty { display: none; }
.ki-fuss { display: flex; align-items: center; gap: var(--a-abstand-3); flex-wrap: wrap; }
.ki-fuss .klein { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.aktionen-ki { display: flex; gap: var(--a-abstand-1); margin-top: calc(-1 * var(--a-abstand-1)); }
.aktion { width: var(--a-abstand-6); height: var(--a-abstand-6); border: 0; border-radius: var(--a-radius-m); background: transparent; color: var(--a-text-leise); display: grid; place-items: center; cursor: pointer; }
.aktion:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.aktion.ok { color: var(--a-gut); }
.aktion svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; }
.denken { font-size: var(--a-groesse-2); color: var(--a-text-leise); }
.denken summary { cursor: pointer; width: max-content; }
.denken pre { white-space: pre-wrap; font-family: var(--a-schrift); margin: var(--a-abstand-2) 0 0; padding-left: var(--a-abstand-3); border-left: var(--a-linie-dicke) solid var(--a-linie); }
.zusammenfassung-zeile { font-size: var(--a-groesse-1); color: var(--a-text-leise); text-align: center; padding: var(--a-abstand-1) 0; }
.zusammenfassung-zeile summary { cursor: pointer; width: max-content; margin: 0 auto; }
.zusammenfassung-zeile pre { white-space: pre-wrap; text-align: left; font-family: var(--a-schrift); margin: var(--a-abstand-2) 0 0; padding-left: var(--a-abstand-3); border-left: var(--a-linie-dicke) solid var(--a-linie); }

/* Prüfvermerk unter der Antwort + hervorgehobene Prüf-Kennzeichen ⟦berichtigt: …⟧ / ⟦ohne Quelle: …⟧ im Text */
.pruef-vermerk { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
div.pruef-vermerk, .pruef-vermerk summary { display: flex; align-items: center; gap: var(--a-abstand-1); }
.pruef-vermerk summary { cursor: pointer; width: max-content; max-width: 100%; }
.pruef-vermerk summary:hover { color: var(--a-text); }
.pruef-vermerk svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: var(--a-gut); stroke-width: 1.5; flex: none; }
.pruef-berichtigt::before { content: "· "; color: var(--a-text-leise); }
.pruef-berichtigt { color: var(--a-warn); }
.pruef-vermerk[data-pruef-text-farbe] { color: var(--a-gut); }
.pruef-vermerk[data-korrigiert="1"] { color: var(--a-warn); }
.pruef-vermerk[data-korrigiert="1"] svg { stroke: var(--a-warn); }
.pruef-quellen { margin: var(--a-abstand-2) 0 0; padding-left: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); }
.pruef-quellen li { overflow-wrap: anywhere; }
.pruef-quellen a { color: var(--a-akzent); }
.pruef-quellen .klein { margin-left: var(--a-abstand-2); color: var(--a-text-leise); font-size: var(--a-groesse-1); }
.pruef-marke { color: var(--a-text); border-radius: var(--a-radius-s); padding: 0 var(--a-abstand-1); }
.pruef-marke.berichtigt { background: var(--a-warn-weich); }
.pruef-marke.belegt { background: var(--a-gut-weich); }
.pruef-marke.ohne-quelle { background: var(--a-fehler-weich); }
.pruef-marke-art { font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); margin-right: var(--a-abstand-1); }

/* Markdown in Antworten */
.md { line-height: var(--a-zeile); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .code, .md .md-tabelle { margin: 0 0 var(--a-abstand-3); }
.md h2, .md h3, .md h4, .md h5, .md h6 { margin: var(--a-abstand-4) 0 var(--a-abstand-2); font-family: var(--a-schrift-anzeige); font-weight: var(--a-gewicht-fett); line-height: 1.3; }
.md h2 { font-size: var(--a-groesse-5); } .md h3 { font-size: var(--a-groesse-4); } .md h4, .md h5, .md h6 { font-size: var(--a-groesse-3); }
.md ul, .md ol { padding-left: var(--a-abstand-5); }
.md li + li { margin-top: var(--a-abstand-1); }
.md a { color: var(--a-akzent); text-decoration: underline; text-underline-offset: 2px; }
.md code { font-family: var(--a-schrift-mono); font-size: 0.92em; background: var(--a-flaeche-2); border-radius: var(--a-radius-s); padding: 0 var(--a-abstand-1); }
.md blockquote { border-left: var(--a-fokus-dicke) solid var(--a-linie); padding-left: var(--a-abstand-3); color: var(--a-text-leise); }
.md hr { border: 0; border-top: var(--a-linie-dicke) solid var(--a-linie); margin: var(--a-abstand-4) 0; }
.code { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); overflow: hidden; background: var(--a-flaeche); }
.code-kopf { display: flex; justify-content: space-between; align-items: center; padding: var(--a-abstand-1) var(--a-abstand-3); background: var(--a-flaeche-2); font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.code-kopieren { border: 0; background: transparent; color: var(--a-text-leise); cursor: pointer; font-size: var(--a-groesse-1); padding: var(--a-abstand-1); border-radius: var(--a-radius-s); }
.code-kopieren:hover { color: var(--a-text); background: var(--a-flaeche-3); }
.code pre { margin: 0; padding: var(--a-abstand-3); overflow-x: auto; }
.code pre code { background: none; padding: 0; font-size: var(--a-groesse-2); white-space: pre; }
.md-tabelle { overflow-x: auto; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.md-tabelle table { border-collapse: collapse; font-size: var(--a-groesse-2); min-width: 100%; }
.md-tabelle th, .md-tabelle td { padding: var(--a-abstand-2) var(--a-abstand-3); text-align: left; border-top: var(--a-linie-dicke) solid var(--a-linie); }
.md-tabelle th { background: var(--a-flaeche-2); border-top: 0; font-weight: var(--a-gewicht-mittel); }

/* Eingabe als Pille */
.chat-eingabe { padding: 0 var(--a-abstand-5) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-2); align-items: center; }
.chat-eingabe > * { width: 100%; max-width: var(--a-chat-spalte); }
.eingabe-pille { background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-xl); padding: var(--a-abstand-2); display: flex; flex-direction: column; gap: var(--a-abstand-2); box-shadow: var(--a-schatten-1); transition: border-color var(--a-dauer-kurz) var(--a-kurve); }
.eingabe-pille:focus-within, .chat-eingabe.ziehen .eingabe-pille { border-color: var(--a-text-leise); }
.chat-eingabe-zeile { display: flex; align-items: flex-end; gap: var(--a-abstand-1); }
.chat-feld { flex: 1; min-height: var(--a-feld-hoehe); max-height: calc(var(--a-feld-hoehe) * 6); border: 0; background: transparent; resize: none; padding: var(--a-abstand-3) var(--a-abstand-2); line-height: var(--a-zeile); color: var(--a-text); outline: none; }
.chat-feld::placeholder { color: var(--a-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-feld { min-width: 0; }
.runder-knopf { width: var(--a-feld-hoehe); height: var(--a-feld-hoehe); border-radius: var(--a-radius-rund); border: 0; background: transparent; color: var(--a-text-leise); display: grid; place-items: center; cursor: pointer; flex: none; transition: background var(--a-dauer-kurz) var(--a-kurve), color var(--a-dauer-kurz) var(--a-kurve); }
.runder-knopf:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.runder-knopf[disabled] { opacity: 0.4; cursor: default; }
.runder-knopf svg { width: calc(var(--a-abstand-4) + var(--a-abstand-1)); height: calc(var(--a-abstand-4) + var(--a-abstand-1)); fill: none; stroke: currentColor; stroke-width: 1.7; }
.chat-senden { background: var(--a-text); color: var(--a-grund); }
.chat-senden:hover { background: var(--a-text); color: var(--a-grund); opacity: 0.85; }
.chat-senden[data-stopp] { background: var(--a-fehler); color: var(--a-text-auf-akzent); }
.runder-knopf[data-diktat].an { background: var(--a-fehler-weich); color: var(--a-fehler); }
.runder-knopf[data-gespraech="hoert"] { background: var(--a-fehler-weich); color: var(--a-fehler); }
.runder-knopf[data-gespraech="denkt"] { background: var(--a-flaeche-2); color: var(--a-text); animation: knopf-atmen calc(var(--a-dauer-mittel) * 5) var(--a-kurve) infinite; }
.runder-knopf[data-gespraech="spricht"] { background: var(--a-akzent-weich); color: var(--a-akzent); }
@keyframes knopf-atmen { 50% { opacity: 0.55; } }
.diktat-vorschau { font-size: var(--a-groesse-2); color: var(--a-text-leise); padding: 0 var(--a-abstand-3); }
.anhaenge { display: flex; flex-wrap: wrap; gap: var(--a-abstand-2); }
.nachricht.nutzer .anhaenge { justify-content: flex-end; }
.anhang { display: inline-flex; align-items: center; gap: var(--a-abstand-2); max-width: var(--a-eintrag-min); padding: var(--a-abstand-1) var(--a-abstand-2); border-radius: var(--a-radius-m); background: var(--a-flaeche-2); font-size: var(--a-groesse-1); }
.anhang img { width: var(--a-abstand-6); height: var(--a-abstand-6); object-fit: cover; border-radius: var(--a-radius-s); }
.anhang svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.anhang-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang-weg { border: 0; background: transparent; color: var(--a-text-leise); cursor: pointer; font-size: var(--a-groesse-3); line-height: 1; padding: 0 var(--a-abstand-1); }
.anhang-weg:hover { color: var(--a-fehler); }

/* Werkzeug-Karten, Freigabe, geänderte Dateien */
.werkzeuge { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.werkzeuge:empty { display: none; }
.werkzeug { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); font-size: var(--a-groesse-2); }
.werkzeug summary { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; list-style: none; min-width: 0; }
.werkzeug summary::-webkit-details-marker { display: none; }
.werkzeug-kurz { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.werkzeug pre { margin: 0; padding: var(--a-abstand-2) var(--a-abstand-3); border-top: var(--a-linie-dicke) solid var(--a-linie); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(var(--a-karte-breite) / 2); overflow-y: auto; color: var(--a-text-leise); }
.freigabe { display: flex; flex-direction: column; align-items: stretch; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); border-top: var(--a-linie-dicke) solid var(--a-linie); }
.dateien { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); overflow: hidden; }
.dateien-titel { padding: var(--a-abstand-2) var(--a-abstand-3); font-size: var(--a-groesse-1); color: var(--a-text-leise); background: var(--a-flaeche-2); }
.datei { border-top: var(--a-linie-dicke) solid var(--a-linie); }
.datei summary { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; list-style: none; font-size: var(--a-groesse-2); }
.datei summary::-webkit-details-marker { display: none; }
.datei summary svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.datei-pfad { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-zahl { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); }
.diff-zahl.plus { color: var(--a-gut); } .diff-zahl.minus { color: var(--a-fehler); }
.diff { margin: 0; padding: var(--a-abstand-2) 0; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); overflow-x: auto; max-height: calc(var(--a-karte-breite) / 1.5); }
.diff span { display: block; padding: 0 var(--a-abstand-3); white-space: pre; }
.diff-neu { background: var(--a-gut-weich); color: var(--a-gut); }
.diff-weg { background: var(--a-fehler-weich); color: var(--a-fehler); }

/* ---------- Umschalter Chat | Cowork (Kopf, gleiche Fläche wie der Kopf) ---------- */
.modus-wahl { display: inline-flex; flex: none; gap: var(--a-abstand-1); padding: var(--a-abstand-1); border-radius: var(--a-radius-rund); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-grund); }
.modus-wahl button { border: 0; background: transparent; color: var(--a-text); border-radius: var(--a-radius-rund); padding: var(--a-abstand-1) var(--a-abstand-4); font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); cursor: pointer; transition: background var(--a-dauer-kurz) var(--a-kurve); }
.modus-wahl button:hover { background: var(--a-flaeche-2); }
.modus-wahl button[aria-pressed="true"] { background: var(--a-text); color: var(--a-grund); font-weight: var(--a-gewicht-fett); }

/* ---------- Cowork (S8): Baum links, Verlauf Mitte, Live-Stand rechts ---------- */
.punkt { display: inline-block; flex: none; width: var(--a-abstand-2); height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-text-leise); border: var(--a-linie-dicke) solid transparent; }
.punkt[data-zustand="arbeitet"] { background: var(--a-akzent); animation: pulsieren calc(var(--a-dauer-mittel) * 6) var(--a-kurve) infinite; } /* Dauer aus Token abgeleitet (kein Token für langsames Pulsieren) */
.punkt[data-zustand="wartet"] { background: var(--a-grund); border-color: var(--a-text-leise); }
.punkt[data-zustand="braucht_dich"] { background: var(--a-warn); }
.punkt[data-zustand="fehler"] { background: var(--a-fehler); }
.punkt[data-zustand="fertig"] { background: var(--a-gut); }
.punkt[data-zustand="pausiert"] { background: var(--a-flaeche-3); border-color: var(--a-text-leise); }
.punkt[data-zustand="bereit"] { background: transparent; border-color: var(--a-linie); }
@keyframes pulsieren { 50% { opacity: 0.35; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .punkt[data-zustand="arbeitet"] { animation: none; } }
.zustand-text { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.zustand-text[data-zustand="laeuft"] { color: var(--a-akzent); }
.zustand-text[data-zustand="braucht_dich"], .zustand-text[data-zustand="gestoppt"] { color: var(--a-warn); }
.zustand-text[data-zustand="fehler"] { color: var(--a-fehler); }
.zustand-text[data-zustand="fertig"] { color: var(--a-gut); }

.cowork-neu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-abstand-1); }
.cowork-neu .knopf { padding: 0 var(--a-abstand-1); white-space: nowrap; }
.cowork-baum { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--a-abstand-1); margin: 0 calc(-1 * var(--a-abstand-1)); padding: 0 var(--a-abstand-1); scrollbar-width: thin; }
.cowork-baum .leer { padding: 0 var(--a-abstand-3); margin: 0; }
.baum-titel { font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; justify-content: space-between; padding: var(--a-abstand-3) var(--a-abstand-3) var(--a-abstand-1); }
.baum-eintrag { display: flex; align-items: flex-start; gap: var(--a-abstand-2); width: 100%; border: 0; background: transparent; border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; text-align: left; color: var(--a-text); }
.baum-eintrag:hover { background: var(--a-flaeche-2); }
.baum-eintrag[aria-current="page"] { background: var(--a-flaeche-3); }
.baum-eintrag .punkt { margin-top: calc((var(--a-groesse-2) * var(--a-zeile) - var(--a-abstand-2)) / 2); }
.baum-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.baum-name { font-size: var(--a-groesse-2); overflow-wrap: anywhere; }
.baum-eintrag.manager .baum-name { font-weight: var(--a-gewicht-fett); }
.baum-unter { font-size: var(--a-groesse-1); color: var(--a-text-leise); overflow-wrap: anywhere; }
.baum-helfer { display: flex; flex-direction: column; gap: var(--a-abstand-1); margin-left: var(--a-abstand-4); padding-left: var(--a-abstand-1); border-left: var(--a-linie-dicke) solid var(--a-linie); }
.baum-symbol { display: grid; place-items: center; height: calc(var(--a-groesse-2) * var(--a-zeile)); color: var(--a-text-leise); flex: none; }
.baum-symbol svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; }

.cowork { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.notaus-leiste { margin: 0 var(--a-abstand-5) var(--a-abstand-2); padding: var(--a-abstand-3) var(--a-abstand-4); border-radius: var(--a-radius-m); background: var(--a-fehler); color: var(--a-text-auf-akzent); font-weight: var(--a-gewicht-fett); font-size: var(--a-groesse-2); }
.cowork-tabs { display: none; }
.cowork-teile { flex: 1; min-height: 0; display: flex; }
.cowork-mitte { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cowork-mitte > .chat-schale, .cowork-mitte > .seite { flex: 1; min-height: 0; }
.cowork-mitte > .laden.klein { min-height: 0; flex: 1; }
/* os-100: rechte Spalte mit Reitern Live · Dateien · Plan · Artefakte, Breite per Griff (--cowork-rechts-breite setzt app.js) */
.cowork-rechts { width: var(--cowork-rechts-breite, var(--a-leiste-breite)); flex: none; min-height: 0; overflow-y: auto; background: var(--a-flaeche); padding: var(--a-abstand-2) var(--a-abstand-3) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-2); scrollbar-width: thin; }
.cowork-rechts-teil { display: flex; flex-direction: column; gap: var(--a-abstand-2); min-width: 0; }
.cowork-rechts-teil[hidden] { display: none; }
.cowork-rechts .laden.klein { min-height: 0; }
.cowork-reiter { display: flex; gap: var(--a-abstand-1); border-bottom: var(--a-linie-dicke) solid var(--a-linie); padding-bottom: var(--a-abstand-1); }
.cowork-reiter button { border: 0; background: transparent; color: var(--a-text-leise); font: inherit; font-size: var(--a-groesse-1); padding: var(--a-abstand-1) var(--a-abstand-2); border-radius: var(--a-radius-s); cursor: pointer; }
.cowork-reiter button:hover { color: var(--a-text); background: var(--a-flaeche-2); }
.cowork-reiter button[aria-selected="true"] { color: var(--a-text); background: var(--a-flaeche-3); }
.cowork-griff { flex: none; width: var(--a-abstand-1); cursor: col-resize; background: var(--a-linie); background-clip: content-box; padding: 0 calc((var(--a-abstand-1) - var(--a-linie-dicke)) / 2); transition: background-color var(--a-dauer-kurz); }
.cowork-griff:hover, .cowork-griff:focus-visible { background-color: var(--a-akzent); outline: none; }
body.zieht { cursor: col-resize; user-select: none; }
.datei-zeile { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); color: var(--a-text); overflow-wrap: anywhere; }
.plan-balken { display: block; height: var(--a-abstand-1); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); overflow: hidden; }
.plan-balken > span { display: block; height: 100%; background: var(--a-gut); }
a.proto { color: inherit; text-decoration: none; }
.stand-titel { margin: var(--a-abstand-2) 0 0; font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); text-transform: uppercase; letter-spacing: 0.06em; }
.stand-liste { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.stand-liste .leer { margin: 0; }
.lauf { background: var(--a-grund); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); }
.lauf[data-zustand="laeuft"] { border-color: var(--a-akzent); }
.lauf[data-zustand="braucht_dich"] { border-color: var(--a-warn); }
.lauf-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
.lauf-agent { font-weight: var(--a-gewicht-fett); color: var(--a-text); overflow-wrap: anywhere; text-align: left; }
.lauf-text { overflow-wrap: anywhere; }
.lauf-live { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); color: var(--a-text-leise); overflow-wrap: anywhere; background: var(--a-flaeche-2); border-radius: var(--a-radius-s); padding: var(--a-abstand-1) var(--a-abstand-2); }
.lauf .knopf { align-self: flex-start; }
.proto { display: flex; align-items: flex-start; gap: var(--a-abstand-2); width: 100%; border: 0; background: transparent; border-radius: var(--a-radius-m); padding: var(--a-abstand-2); cursor: pointer; text-align: left; color: var(--a-text); font-size: var(--a-groesse-2); }
.proto:hover { background: var(--a-flaeche-2); }
.proto .punkt { margin-top: calc((var(--a-groesse-2) * var(--a-zeile) - var(--a-abstand-2)) / 2); }
.proto-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.proto-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-abstand-2); }
.proto-kopf b { font-weight: var(--a-gewicht-fett); overflow-wrap: anywhere; }
.proto-auftrag { color: var(--a-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-fehler { color: var(--a-fehler); font-size: var(--a-groesse-1); overflow-wrap: anywhere; }
.proto-zahlen { font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }

.agent-kopf { width: 100%; max-width: var(--a-chat-spalte); margin: 0 auto; display: flex; flex-direction: column; gap: var(--a-abstand-2); padding-bottom: var(--a-abstand-3); border-bottom: var(--a-linie-dicke) solid var(--a-linie); }
.agent-kopf-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a-abstand-3); flex-wrap: wrap; }
.agent-titel { display: flex; flex-direction: column; gap: var(--a-abstand-2); min-width: 0; flex: 1; }
.agent-kopf h1 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-5) / 1.2 var(--a-schrift-anzeige); overflow-wrap: anywhere; }
.agent-pillen { display: flex; gap: var(--a-abstand-1); flex-wrap: wrap; align-items: center; }
.agent-pillen .pille { gap: var(--a-abstand-2); }
.agent-auftrag { margin: 0; color: var(--a-text-leise); font-size: var(--a-groesse-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.stopp-knopf { background: var(--a-fehler); color: var(--a-text-auf-akzent); }
.stopp-knopf:hover { background: var(--a-fehler); color: var(--a-text-auf-akzent); opacity: 0.85; }
.aufgabe-hinweis { font-size: var(--a-groesse-1); color: var(--a-text-leise); text-align: center; }
.cowork-leer { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--a-abstand-3); max-width: var(--a-karte-breite); padding: var(--a-abstand-5); }
.cowork-leer h1 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-5) / 1.2 var(--a-schrift-anzeige); }
.cowork-leer p { margin: 0; color: var(--a-text-leise); }
.eingabe.mehrzeilig { height: auto; min-height: calc(var(--a-feld-hoehe) * 2); padding: var(--a-abstand-3) var(--a-abstand-4); border-radius: var(--a-radius-m); resize: vertical; line-height: var(--a-zeile); }
.umbrechen { overflow-wrap: anywhere; }
.hinweis-text { font-size: var(--a-groesse-2); color: var(--a-text-leise); }
.abschnitt > .aktionen { display: flex; gap: var(--a-abstand-3); align-items: center; flex-wrap: wrap; }
.pille.klickbar { border: 0; cursor: pointer; }
.git-stand { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.git-liste, .git-ausgabe { margin: 0; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.git-liste { background: var(--a-flaeche-2); border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); max-height: calc(var(--a-karte-breite) / 2); overflow-y: auto; }
.meldung .git-ausgabe { margin-top: var(--a-abstand-2); }
.meldung.fehler .git-ausgabe { margin-top: 0; }
.plan { border-left: var(--a-fokus-dicke) solid var(--a-linie); padding-left: var(--a-abstand-3); }
.plan[data-letzter="laeuft"] { border-left-color: var(--a-akzent); }
.plan[data-letzter="fertig"] { border-left-color: var(--a-gut); }
.plan[data-letzter="fehler"] { border-left-color: var(--a-fehler); }
.plan[data-letzter="gestoppt"], .plan[data-letzter="braucht_dich"] { border-left-color: var(--a-warn); }
.plan .haupt { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.plan-lauf { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; font-size: var(--a-groesse-2); }
.plan-lauf .zustand-text { font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); }
.plan-details { font-size: var(--a-groesse-2); }
.plan-details summary { cursor: pointer; color: var(--a-akzent); width: max-content; }
.plan-ergebnis { margin-top: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); background: var(--a-flaeche-2); border-radius: var(--a-radius-m); }
.plan-verlauf { display: flex; flex-direction: column; gap: var(--a-abstand-1); margin-top: var(--a-abstand-2); }
.hinweis-dialog { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); background: var(--a-flaeche); color: var(--a-text); box-shadow: var(--a-schatten-2); padding: var(--a-abstand-5); width: min(var(--a-karte-breite), calc(100vw - 2 * var(--a-abstand-4))); }
.hinweis-dialog::backdrop { background: var(--a-schleier); }
.hinweis-dialog h2 { margin: 0 0 var(--a-abstand-2); font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); }
.hinweis-dialog p { margin: 0 0 var(--a-abstand-3); }
.hinweis-dialog .unter { color: var(--a-text-leise); font-size: var(--a-groesse-2); }

/* ---------- Handy / schmal: Seitenleiste wird Schublade ---------- */
@media (max-width: 760px) { /* Breakpoint = --a-inhalt-breite (Variablen gehen in Media-Queries nicht) */
  .schale, body.app .schale { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: fixed; top: 0; bottom: 0; left: 0; right: auto; margin: 0; width: min(85vw, var(--a-schublade-breite)); max-width: 100vw; overflow-x: hidden; z-index: 20; transform: translateX(-100%); visibility: hidden; transition: transform var(--a-dauer-mittel) var(--a-kurve), visibility 0s linear var(--a-dauer-mittel); padding-top: env(safe-area-inset-top); }
  .schale.leiste-offen .leiste { transform: none; visibility: visible; transition: transform var(--a-dauer-mittel) var(--a-kurve); box-shadow: var(--a-schatten-2); }
  .leiste-innen { padding: var(--a-abstand-3) var(--a-abstand-4) max(var(--a-abstand-3), env(safe-area-inset-bottom)); }
  .schale.leiste-offen .schleier { display: block; position: fixed; inset: 0; background: var(--a-schleier); z-index: 15; }
  .kopf-knopf.leiste-zu, .kopf-knopf.leiste-auf { display: grid; }
  .haupt-kopf { padding: max(var(--a-abstand-2), env(safe-area-inset-top)) var(--a-abstand-3) var(--a-abstand-2); }
  .abo-gesamt { display: none; }
  .chat-wahl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .modell-knopf { flex: none; }
  .chat-verlauf { padding: var(--a-abstand-3) var(--a-abstand-4) var(--a-abstand-4); }
  .chat-eingabe { padding: 0 var(--a-abstand-3) max(var(--a-abstand-3), env(safe-area-inset-bottom)); }
  .seite, .seite-einst { padding: var(--a-abstand-4) var(--a-abstand-4) var(--a-abstand-6); }
  .kopf h1 { font-size: var(--a-groesse-5); }
  .willkommen h1 { font-size: var(--a-groesse-5); }
  .karte { padding: var(--a-abstand-5) var(--a-abstand-4); }
  /* Cowork: Agent und Live-Stand umschaltbar statt nebeneinander */
  .modus-wahl button { padding: var(--a-abstand-1) var(--a-abstand-3); }
  .cowork-tabs { display: inline-flex; align-self: flex-start; margin: 0 var(--a-abstand-3) var(--a-abstand-2); }
  .notaus-leiste { margin: 0 var(--a-abstand-3) var(--a-abstand-2); }
  .cowork-rechts { width: auto; flex: 1; background: var(--a-grund); padding: 0 var(--a-abstand-3) var(--a-abstand-5); }
  .cowork-griff { display: none; }
  .cowork[data-handy="mitte"] .cowork-rechts, .cowork[data-handy="stand"] .cowork-mitte { display: none; }
}
body.app .leiste .tor-marke { display: none; } /* os-101: in der App steht AGORA OS nur in der Titelleiste */
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

/* Update-Hinweis (S7): eine Leiste unten mittig, für Oberfläche und Hülle */
.update-leiste { position: fixed; left: 50%; bottom: var(--a-abstand-5); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: var(--a-abstand-3);
  background: var(--a-flaeche-3); color: var(--a-text); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-rund); box-shadow: var(--a-schatten-2);
  padding: var(--a-abstand-2) var(--a-abstand-2) var(--a-abstand-2) var(--a-abstand-5); font-size: var(--a-groesse-2); max-width: calc(100vw - 2 * var(--a-abstand-4)); }
.update-leiste[data-update=fehler] { color: var(--a-fehler); }
.update-leiste .knopf { white-space: nowrap; flex: none; }
.update-leiste > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Handy: Leiste über die ganze Breite unten, Text links (1–2 Zeilen), Knopf rechts */
@media (max-width: 600px) {
  .update-leiste { left: var(--a-abstand-4); right: var(--a-abstand-4); transform: none; max-width: none; justify-content: space-between; border-radius: var(--a-radius-m);
    bottom: calc(var(--a-abstand-4) + env(safe-area-inset-bottom, 0px)); padding: var(--a-abstand-3) var(--a-abstand-3) var(--a-abstand-3) var(--a-abstand-4); }
  .update-leiste > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.update-leiste[data-update=laedt], .update-leiste[data-update=neustart], .update-leiste[data-update=app]:not(:has(button)) { padding-right: var(--a-abstand-5); }

/* Anmelde-Fenster für ein Abo (eigene Seite abo-anmeldung.html) */
.abo-anmeldung { max-width: var(--a-karte-breite); margin: 0 auto; padding: var(--a-abstand-8) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-4); align-items: flex-start; }
.abo-anmeldung h1 { font-size: var(--a-groesse-7); font-weight: var(--a-gewicht-fett); margin: 0; }
.abo-anmeldung p { margin: 0; color: var(--a-text-leise); }
.abo-anmeldung .knopf { text-decoration: none; }
.abo-code { display: flex; flex-direction: column; gap: var(--a-abstand-2); width: 100%; }
.abo-code[hidden] { display: none; }
.abo-code label { font-size: var(--a-groesse-2); color: var(--a-text-leise); }

/* Abnahme-Seite (abnahme.html): schlicht wie das Anmelde-Fenster */
.abnahme { max-width: var(--a-inhalt-breite); margin: 0 auto; padding: var(--a-abstand-8) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-4); }
.abnahme h1 { font-size: var(--a-groesse-6); font-weight: var(--a-gewicht-fett); margin: 0; }
.abnahme p { margin: 0; color: var(--a-text-leise); }
.abnahme [data-inhalt] { display: flex; flex-direction: column; gap: var(--a-abstand-4); }
.abnahme-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--a-karte-breite) / 2), 1fr)); gap: var(--a-abstand-4); }
.abnahme-bilder a { display: flex; flex-direction: column; gap: var(--a-abstand-2); text-decoration: none; color: inherit; }
.abnahme-bilder img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--a-radius-m); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche-2); }
.abnahme-gross { width: 100%; height: auto; border-radius: var(--a-radius-m); border: var(--a-linie-dicke) solid var(--a-linie); }
.abnahme .aktionen { display: flex; gap: var(--a-abstand-3); }
.abnahme textarea.eingabe { min-height: calc(var(--a-feld-hoehe) * 3); padding: var(--a-abstand-3) var(--a-abstand-4); border-radius: var(--a-radius-m); resize: vertical; }
.abnahme .knopf[data-senden] { align-self: flex-start; }
.abnahme-blaettern { align-items: center; justify-content: space-between; }
.abnahme-unterschrift { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.abnahme-unterschrift strong { font-size: var(--a-groesse-5); font-weight: var(--a-gewicht-fett); color: var(--a-text); }
.abnahme-unterschrift [data-was] { color: var(--a-text); }
.abnahme-unterschrift .klein { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.cowork-stopp { width: 100%; }

/* ---------- S10 P1: Freigabe-Karte, Plan-Karte, Zurückspulen, Rechte, Hooks ---------- */
.freigabe-frage { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
.freigabe-knoepfe { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
.freigabe-knoepfe input.eingabe.klein { flex: 1; width: auto; min-width: var(--a-eintrag-min); }
.werkzeug[data-zustand="wartet"] { border-color: var(--a-warn); }
.werkzeug-grund { padding: 0 var(--a-abstand-3) var(--a-abstand-2); font-size: var(--a-groesse-1); color: var(--a-fehler); overflow-wrap: anywhere; }
.werkzeug-grund.hook { color: var(--a-warn); font-weight: var(--a-gewicht-mittel); }
.baum-eintrag[data-zustand="braucht_dich"] { box-shadow: inset var(--a-fokus-dicke) 0 0 var(--a-warn); }
.baum-eintrag[data-zustand="braucht_dich"] .baum-name { color: var(--a-warn); }
/* os-62: wer gerade arbeitet, ist hervorgehoben; pausierte Agenten sichtbar grau */
.baum-eintrag[data-zustand="arbeitet"], .baum-eintrag[data-zustand="laeuft"] { box-shadow: inset var(--a-fokus-dicke) 0 0 var(--a-akzent); }
.baum-eintrag[data-pausiert] .baum-name, .baum-eintrag[data-pausiert] .baum-unter { color: var(--a-text-leise); }
.baum-braucht { margin-left: auto; flex: none; }
.plan-schalter[aria-pressed="true"] { border-color: var(--a-akzent); color: var(--a-akzent); background: var(--a-akzent-weich); }
.chat-titelzeile .plan-schalter { margin-left: auto; flex: none; }
.plan-karte { border: var(--a-linie-dicke) solid var(--a-akzent); border-radius: var(--a-radius-m); background: var(--a-flaeche); padding: var(--a-abstand-3); display: flex; flex-direction: column; gap: var(--a-abstand-2); font-size: var(--a-groesse-2); }
.plan-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); }
.plan-kopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: var(--a-akzent); stroke-width: 1.5; }
.plan-schritte { margin: 0; padding-left: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.plan-dateien { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; align-items: center; }
.plan-dateien code, .regel-muster, .hook-kopf code, .hook-befehl { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); background: var(--a-flaeche-2); border-radius: var(--a-radius-s); padding: 0 var(--a-abstand-1); overflow-wrap: anywhere; }
.plan-knoepfe { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; align-items: center; }
.aktionen-nutzer { display: flex; justify-content: flex-end; }
.dialog { width: min(100% - var(--a-abstand-5), var(--a-chat-breite)); max-height: calc(100vh - var(--a-abstand-7)); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); background: var(--a-flaeche); color: var(--a-text); box-shadow: var(--a-schatten-2); padding: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-3); overflow-y: auto; }
.dialog:not([open]) { display: none; }
.dialog::backdrop { background: var(--a-schleier); }
.dialog h2 { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); }
.dialog .unter { margin: 0; color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.dialog-inhalt { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.dialog-inhalt .dateien { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); overflow: hidden; }
.dialog-inhalt .datei:first-child { border-top: 0; }
.dialog-knoepfe { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.regel-liste, .hook-liste { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.regel { display: flex; align-items: center; gap: var(--a-abstand-3); flex-wrap: wrap; padding: var(--a-abstand-2) var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.regel-muster { flex: 1; min-width: var(--a-eintrag-min); }
.regel-bereich { color: var(--a-text-leise); }
.hook { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.hook[data-an="0"] { border-style: dashed; color: var(--a-text-leise); }
.hook-kopf { display: flex; gap: var(--a-abstand-2); align-items: center; flex-wrap: wrap; }
.hook .aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.hook-test { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.hook-test-kopf { display: flex; gap: var(--a-abstand-2); align-items: center; flex-wrap: wrap; }
.hook pre { margin: 0; padding: var(--a-abstand-2) var(--a-abstand-3); background: var(--a-flaeche-2); border-radius: var(--a-radius-s); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(var(--a-karte-breite) / 2); overflow-y: auto; }
.hook-protokoll summary { cursor: pointer; font-size: var(--a-groesse-2); color: var(--a-text-leise); }
.hook-proto-liste { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding-top: var(--a-abstand-2); }
.hook-proto { display: flex; gap: var(--a-abstand-2); align-items: center; flex-wrap: wrap; }
.hook-proto pre { flex-basis: 100%; }

/* S10 P2 Agenten-Automatik: Workflow-Kette mit Zustandsfarben (nur Tokens) */
.meldung.warn { background: var(--a-flaeche-2); color: var(--a-warn); }
.wf-lauf { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.wf-lauf-kopf { gap: var(--a-abstand-2); }
.wf-kette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-abstand-3); counter-reset: none; }
.wf-schritt { position: relative; border: var(--a-linie-dicke) solid var(--a-linie); border-left-width: var(--a-abstand-1); border-radius: var(--a-radius-m); padding: var(--a-abstand-3); background: var(--a-flaeche); display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.wf-schritt + .wf-schritt::before { content: ""; position: absolute; left: var(--a-abstand-5); top: calc(-1 * var(--a-abstand-3) - var(--a-linie-dicke)); height: var(--a-abstand-3); border-left: var(--a-fokus-dicke) solid var(--a-linie); }
.wf-schritt[data-zustand="arbeitet"] { border-left-color: var(--a-akzent); }
.wf-schritt[data-zustand="wartet"] { border-left-color: var(--a-linie); }
.wf-schritt[data-zustand="braucht_dich"] { border-left-color: var(--a-warn); }
.wf-schritt[data-zustand="gestoppt"] { border-left-color: var(--a-flaeche-3); }
.wf-schritt[data-zustand="fertig"] { border-left-color: var(--a-gut); }
.wf-schritt[data-zustand="fehler"] { border-left-color: var(--a-fehler); }
.wf-schritt[data-zustand="uebersprungen"] { border-left-style: dashed; color: var(--a-text-leise); }
.wf-schritt-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
.wf-nr { display: inline-flex; align-items: center; justify-content: center; width: var(--a-abstand-5); height: var(--a-abstand-5); border-radius: var(--a-radius-rund); background: var(--a-flaeche-2); color: var(--a-text-leise); font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-fett); flex: none; }
.wf-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wf-name .klein, .wf-schritt-zahlen, .wf-agent .klein { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.zustand-text[data-zustand="arbeitet"] { color: var(--a-akzent); }
.zustand-text[data-zustand="uebersprungen"], .zustand-text[data-zustand="wartet"] { color: var(--a-text-leise); }
.wf-agenten { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.wf-agent { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-2); display: flex; flex-direction: column; gap: var(--a-abstand-1); min-width: 0; }
.wf-agent-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; font-size: var(--a-groesse-2); }
.wf-agent-kopf .knopf { margin-left: auto; }
.wf-agent[data-zustand="braucht_dich"] .wf-agent-kopf b { color: var(--a-warn); }
.wf-freigabe { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; font-size: var(--a-groesse-2); color: var(--a-warn); }
.wf-protokoll { display: flex; flex-direction: column; gap: var(--a-abstand-2); margin-top: var(--a-abstand-2); min-width: 0; }
.wf-start { flex-wrap: nowrap; }
.wf-start .eingabe { flex: 1; min-width: 0; height: calc(var(--a-feld-hoehe) - var(--a-abstand-3)); font-size: var(--a-groesse-2); }
.wf-haken { display: flex; align-items: center; gap: var(--a-abstand-2); font-size: var(--a-groesse-1); color: var(--a-text-leise); min-width: 0; }
.wf-haken code { font-family: var(--a-schrift-mono); min-width: 0; }
.wf-text { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); min-height: calc(var(--a-feld-hoehe) * 8); white-space: pre; overflow-x: auto; }
.wf-zweig { display: flex; flex-direction: column; gap: var(--a-abstand-2); width: 100%; min-width: 0; }
.wf-diff .plus { color: var(--a-gut); }
.wf-diff .minus { color: var(--a-fehler); }
.eintrag.wf .reihe-klein { margin-top: var(--a-abstand-1); }

/* ===== S10 P3 Erweiterungen (MCP, Skills, Plugins, VS Code) + Code-Review ===== */
.erw-reiter { display: flex; }
.erw-liste { gap: var(--a-abstand-3); }
.erw-karte .aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.erw-werkzeuge { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.erw-werkzeug { display: flex; gap: var(--a-abstand-2); align-items: center; padding: var(--a-abstand-1) var(--a-abstand-2); border-radius: var(--a-radius-s); background: var(--a-flaeche-2); cursor: pointer; }
.erw-werkzeug[data-an="0"] { color: var(--a-text-leise); background: transparent; border: var(--a-linie-dicke) dashed var(--a-linie); }
.erw-werkzeug-text { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.erw-werkzeug-text code { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-2); }
.erw-fehler-text { color: var(--a-fehler); overflow-wrap: anywhere; }
.erw-umgebung { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.erw-schalter { display: inline-flex; gap: var(--a-abstand-2); align-items: center; font-size: var(--a-groesse-2); cursor: pointer; }
.erw-zeile { flex-wrap: nowrap; }
.erw-zeile .eingabe { flex: 1; min-width: 0; }
.erw-rechte { display: flex; flex-direction: column; gap: var(--a-abstand-2); font-size: var(--a-groesse-2); }
.erw-recht ul { margin: var(--a-abstand-1) 0 0; padding-left: var(--a-abstand-5); overflow-wrap: anywhere; }
.erw-vorschau { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-akzent); border-radius: var(--a-radius-m); }
.erw-vorschau .aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.erw-schritte { margin: 0; padding-left: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); }
.erw-vscode { display: flex; flex-direction: column; gap: var(--a-abstand-3); align-items: flex-start; }
.erw-code { font: var(--a-gewicht-fett) var(--a-groesse-6) var(--a-schrift-mono); letter-spacing: var(--a-abstand-1); padding: var(--a-abstand-3) var(--a-abstand-4); background: var(--a-flaeche-2); border-radius: var(--a-radius-m); align-self: flex-start; }
.review { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.review-eintrag { width: 100%; background: transparent; border: 0; border-top: var(--a-linie-dicke) solid var(--a-linie); color: var(--a-text); font: inherit; text-align: left; cursor: pointer; padding: var(--a-abstand-2) var(--a-abstand-2); border-radius: var(--a-radius-s); }
.review-eintrag[aria-current="true"] { background: var(--a-akzent-weich); }
.review-eintrag .haupt { display: flex; flex-direction: column; }
.review-detail { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.review-datei { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); overflow: hidden; }
.review-datei-kopf { display: flex; gap: var(--a-abstand-2); align-items: center; padding: var(--a-abstand-2) var(--a-abstand-3); background: var(--a-flaeche-2); font: var(--a-gewicht-mittel) var(--a-groesse-2) var(--a-schrift-mono); }
.review-datei-kopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; }
.review-diff { overflow-x: auto; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); }
.review-zeile { display: flex; gap: var(--a-abstand-3); padding: 0 var(--a-abstand-3); white-space: pre; min-width: max-content; }
.review-zeile.plus { background: var(--a-gut-weich); }
.review-zeile.minus { background: var(--a-fehler-weich); }
.review-zeile.kopf { color: var(--a-text-leise); }
.review-nr { color: var(--a-text-leise); min-width: var(--a-abstand-6); text-align: right; user-select: none; }
.review-kommentar { margin: var(--a-abstand-2) var(--a-abstand-3); padding: var(--a-abstand-3); border-radius: var(--a-radius-m); border: var(--a-linie-dicke) solid var(--a-linie); border-left: var(--a-abstand-1) solid var(--a-linie); background: var(--a-flaeche); display: flex; flex-direction: column; gap: var(--a-abstand-2); font-family: var(--a-schrift); font-size: var(--a-groesse-2); white-space: normal; }
.review-kommentar[data-stufe="hoch"] { border-left-color: var(--a-fehler); }
.review-kommentar[data-stufe="mittel"] { border-left-color: var(--a-warn); }
.review-kommentar[data-ignoriert="1"] { color: var(--a-text-leise); border-style: dashed; }
.review-kommentar .aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.review-text { font-weight: var(--a-gewicht-mittel); }

/* ---------- S10 P4: Recherche, Konnektoren, Computer bedienen (nur Tokens) ---------- */
.link-knopf { background: none; border: 0; padding: 0; color: var(--a-text); font: inherit; font-weight: var(--a-gewicht-mittel); text-align: left; cursor: pointer; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.link-knopf:hover, .link-knopf:focus-visible { color: var(--a-akzent); }
[data-rech-eintrag][data-aktiv="1"] { border-color: var(--a-akzent); }
.rech-kette { display: flex; flex-wrap: wrap; gap: var(--a-abstand-2); list-style: none; margin: 0; padding: 0; }
.rech-glied { display: inline-flex; align-items: center; gap: var(--a-abstand-1); height: var(--a-abstand-5); padding: 0 var(--a-abstand-3); border-radius: var(--a-radius-rund); font-size: var(--a-groesse-1); border: var(--a-linie-dicke) solid var(--a-linie); color: var(--a-text-leise); }
.rech-glied[data-stand="fertig"] { background: var(--a-gut-weich); color: var(--a-gut); border-color: transparent; }
.rech-glied[data-stand="arbeitet"] { background: var(--a-akzent-weich); color: var(--a-akzent); border-color: var(--a-akzent); }
.rech-teil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-2) 0; border-top: var(--a-linie-dicke) solid var(--a-linie); }
.rech-teil-frage { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rech-quellen { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.rech-quellen a { color: var(--a-akzent); overflow-wrap: anywhere; }
.rech-url { overflow-wrap: anywhere; }
.rech-bericht { padding: var(--a-abstand-3); border-radius: var(--a-radius-m); background: var(--a-flaeche-2); overflow-wrap: anywhere; }
.rech-h { font-size: var(--a-groesse-3); margin: var(--a-abstand-2) 0 0; }
.kon-token { flex: 1; min-width: 0; }
.kon-app { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-2); }
.kon-app summary { cursor: pointer; }
.bed-schritte { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.bed-schritt { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-2); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.bed-bild { max-width: min(100%, var(--a-karte-breite)); border-radius: var(--a-radius-s); border: var(--a-linie-dicke) solid var(--a-linie); }

/* ---------- S10 P5 Büroarbeit: Ordner-Chip, Vorschau rechts, Dateien-Seite, Export-Menü, Aufräumen ---------- */
.ordner-chip { gap: var(--a-abstand-1); border: var(--a-linie-dicke) solid var(--a-linie); cursor: pointer; max-width: var(--a-eintrag-min); overflow: hidden; text-overflow: ellipsis; flex: none; }
.ordner-chip span { overflow: hidden; text-overflow: ellipsis; }
.ordner-chip[disabled] { cursor: default; }
.ordner-chip:not([disabled]):hover { background: var(--a-akzent-weich); color: var(--a-akzent); }
.ordner-chip svg, .ordner-eintrag svg, .datei-name svg, .knopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.ordner-gewaehlt { display: flex; flex-wrap: wrap; gap: var(--a-abstand-2); }
.ordner-gewaehlt .ordner-chip { max-width: 100%; cursor: default; }
.ordner-pfad { display: flex; align-items: center; gap: var(--a-abstand-2); font-size: var(--a-groesse-2); min-width: 0; }
.ordner-pfad code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text-leise); }
.ordner-liste { display: flex; flex-direction: column; max-height: calc(var(--a-karte-breite) - var(--a-abstand-7)); overflow-y: auto; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.ordner-eintrag, .datei-name { display: flex; align-items: center; gap: var(--a-abstand-2); border: 0; background: transparent; color: var(--a-text); font: inherit; font-size: var(--a-groesse-2); text-align: left; padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; min-width: 0; }
.ordner-eintrag { border-top: var(--a-linie-dicke) solid var(--a-linie); }
.ordner-eintrag:first-child { border-top: 0; }
.ordner-eintrag:hover, .datei-name:hover { background: var(--a-flaeche-2); }
.ordner-eintrag span, .datei-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knopf { gap: var(--a-abstand-2); }
.datei summary .datei-oeffnen { margin-left: auto; }
.haupt-inhalt.mit-vorschau { flex-direction: row; }
.haupt-inhalt.mit-vorschau > .chat-schale, .haupt-inhalt.mit-vorschau > .seite { flex: 1; min-width: 0; }
.vorschau { display: flex; flex-direction: column; min-height: 0; background: var(--a-flaeche); border-left: var(--a-linie-dicke) solid var(--a-linie); }
.haupt-inhalt > .vorschau { flex: 0 0 calc(var(--a-karte-breite) + var(--a-abstand-7)); }
.vorschau.eingebettet { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); margin-top: var(--a-abstand-4); }
.vorschau.eingebettet .vorschau-koerper { flex: none; max-height: calc(100vh - var(--a-kopf-hoehe) - var(--a-abstand-8)); }
.vorschau.eingebettet[hidden] { display: none; }
.vorschau-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-3) var(--a-abstand-4); border-bottom: var(--a-linie-dicke) solid var(--a-linie); }
.vorschau-kopf > svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.vorschau-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--a-groesse-2); }
.vorschau > .meldung { margin: var(--a-abstand-3) var(--a-abstand-4) 0; }
.vorschau-koerper { flex: 1; min-height: 0; overflow: auto; padding: var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.tabelle-rahmen { overflow: auto; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-grund); }
.vorschau-tabelle { border-collapse: collapse; font-size: var(--a-groesse-2); width: max-content; min-width: 100%; }
.vorschau-tabelle th, .vorschau-tabelle td { border: var(--a-linie-dicke) solid var(--a-linie); padding: var(--a-abstand-1) var(--a-abstand-2); text-align: left; white-space: nowrap; }
.vorschau-tabelle th { background: var(--a-flaeche-2); color: var(--a-text-leise); font-weight: var(--a-gewicht-mittel); }
.vorschau-tabelle td[contenteditable="true"] { cursor: text; }
.vorschau-tabelle td[contenteditable="true"]:focus { outline: var(--a-fokus-dicke) solid var(--a-akzent); outline-offset: calc(-1 * var(--a-fokus-dicke)); }
.vorschau-tabelle td.geaendert { background: var(--a-akzent-weich); }
.vorschau-tabelle td.formel { color: var(--a-akzent); }
.vorschau-text { min-height: var(--a-karte-breite); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-2); resize: vertical; }
.vorschau-md { font-size: var(--a-groesse-2); }
.vorschau-bild { max-width: 100%; border-radius: var(--a-radius-m); }
.folie, .seite-karte { position: relative; background: var(--a-grund); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); padding: var(--a-abstand-4); box-shadow: var(--a-schatten-1); }
.folie { aspect-ratio: 16 / 9; overflow: hidden; border-top: var(--a-abstand-1) solid var(--a-akzent); }
.folie h3 { margin: 0 0 var(--a-abstand-2); font: var(--a-gewicht-fett) var(--a-groesse-4) var(--a-schrift-anzeige); }
.folie ul { margin: 0; padding-left: var(--a-abstand-4); font-size: var(--a-groesse-2); }
.folie-nr { display: inline-block; margin-bottom: var(--a-abstand-2); font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.seite-karte pre { margin: 0; white-space: pre-wrap; font: var(--a-groesse-2) / var(--a-zeile) var(--a-schrift); }
.seite-karte dl { display: grid; grid-template-columns: auto 1fr; gap: var(--a-abstand-1) var(--a-abstand-3); margin: var(--a-abstand-2) 0 0; font-size: var(--a-groesse-2); }
.seite-karte dt { color: var(--a-text-leise); }
.seite-karte dd { margin: 0; }
.export-menue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-1); padding: var(--a-abstand-2); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); box-shadow: var(--a-schatten-1); }
.export-eintrag { border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-grund); color: var(--a-text); border-radius: var(--a-radius-rund); padding: var(--a-abstand-1) var(--a-abstand-3); font: inherit; font-size: var(--a-groesse-2); cursor: pointer; }
.export-eintrag:hover { background: var(--a-akzent-weich); color: var(--a-akzent); }
.export-eintrag[disabled] { opacity: 0.55; cursor: default; }
.export-menue [data-export-status] { flex-basis: 100%; word-break: break-all; }
.export-menue [data-export-status]:empty { display: none; }
.gut-text { color: var(--a-gut); }
.dateien-liste { display: flex; flex-direction: column; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); overflow: hidden; }
.datei-zeile { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--a-abstand-2); padding-right: var(--a-abstand-2); border-top: var(--a-linie-dicke) solid var(--a-linie); }
.datei-zeile:first-child { border-top: 0; }
.datei-zeile .klein { color: var(--a-text-leise); font-size: var(--a-groesse-1); }
.dateien-liste > .leer { padding: var(--a-abstand-4); margin: 0; }
.aufraeumen-liste { max-height: var(--a-karte-breite); }
.vorschau .aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-abstand-3); }
.vorschau .aktionen .klein { font-size: var(--a-groesse-1); color: var(--a-text-leise); flex: 1; min-width: var(--a-code-min); }
@media (max-width: 760px) { /* Breakpoint = --a-inhalt-breite: Vorschau als ganze Fläche */
  .haupt-inhalt > .vorschau { position: fixed; inset: 0; z-index: 30; border: 0; }
  .ordner-chip { max-width: var(--a-code-min); }
}
/* ---------- Live-Paket: Abo-Gesamt je Anbieter, Kontextmenü der Chat-Liste, Prüf-Hinweis ---------- */
.abo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--a-abstand-2); width: 100%; min-width: 0; font-size: var(--a-groesse-1); text-align: left; color: var(--a-text); }
button.abo-kopf { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: var(--a-groesse-1); }
button.abo-kopf:hover .abo-titel { color: var(--a-akzent); }
/* os-97: eine Zeile – [Logo] Name …… Werte rechts */
.abo-summe .abo-kopf, .abo-kompakt { flex-wrap: wrap; align-items: center; } /* passt es nicht, rutschen die Werte in die nächste Zeile (schmale Handy-Schublade) */
.abo-summe .abo-titel, .abo-kompakt .abo-titel { flex: none; display: inline-flex; align-items: center; gap: var(--a-abstand-2); }
.abo-summe .abo-werte, .abo-kompakt .abo-werte { flex: 1 1 auto; min-width: 0; text-align: right; } /* os-97: ganz lesbar, nie abgeschnitten – lieber umbrechen */
.abo-logo { flex: none; display: inline-grid; place-items: center; width: var(--a-abstand-4); height: var(--a-abstand-4); color: var(--a-text-leise); }
.abo-logo svg { width: 100%; height: 100%; }
.abo-wert.abo-kompakt { display: inline-flex; gap: var(--a-abstand-1); }
.abo-zeile.leise .abo-titel, .abo-werte.leise { color: var(--a-text-leise); }
.abo-werte.gut { color: var(--a-gut); }
button.abo-kopf[aria-expanded="true"] .abo-titel { color: var(--a-akzent); } /* os-97: aufgeklappt = Titel in Akzent statt Pfeil */
.abo-einzeln { display: flex; flex-direction: column; gap: var(--a-abstand-2); margin-top: var(--a-abstand-1); padding-left: var(--a-abstand-3); border-left: var(--a-linie-dicke) solid var(--a-linie); }
.abo-einzeln[hidden] { display: none; }
.chat-zeile { position: relative; }
.chat-zeile .chat-eintrag { padding-right: var(--a-abstand-6); }
.chat-mehr { position: absolute; top: var(--a-abstand-1); right: var(--a-abstand-1); display: grid; place-items: center; width: var(--a-abstand-5); height: var(--a-abstand-5); border: 0; border-radius: var(--a-radius-s); background: transparent; color: var(--a-text-leise); cursor: pointer; opacity: 0; transition: opacity var(--a-dauer-kurz) var(--a-kurve); }
.chat-mehr svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: currentColor; stroke: currentColor; stroke-width: 1; }
.chat-zeile:hover .chat-mehr, .chat-mehr:focus-visible, .chat-zeile:focus-within .chat-mehr { opacity: 1; }
.chat-mehr:hover { background: var(--a-flaeche-3); color: var(--a-text); }
@media (hover: none) { .chat-mehr { display: none; } .chat-zeile .chat-eintrag { padding-right: var(--a-abstand-3); } } /* Touch: langer Druck öffnet das Menü */
.chat-zeile .chat-zeit { margin-right: 0; }
.chat-zeile:hover .chat-zeit { visibility: hidden; }
@media (hover: none) { .chat-zeile:hover .chat-zeit { visibility: visible; } }
.chat-nadel { flex: none; display: inline-grid; color: var(--a-akzent); }
.chat-nadel svg { width: var(--a-abstand-3); height: var(--a-abstand-3); fill: none; stroke: currentColor; stroke-width: 1.6; }
.chat-eintrag.umbenennen { cursor: default; }
.chat-eintrag.umbenennen:hover { background: transparent; }
.chat-umbenennen, input.eingabe.klein.chat-umbenennen { width: 100%; }
.kontext-menue { position: fixed; z-index: 60; min-width: var(--a-eintrag-min); max-width: calc(100vw - var(--a-abstand-4)); display: flex; flex-direction: column; gap: var(--a-abstand-1); padding: var(--a-abstand-1); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.menue-punkt { display: flex; align-items: center; gap: var(--a-abstand-2); width: 100%; height: var(--a-abstand-6); padding: 0 var(--a-abstand-3); border: 0; border-radius: var(--a-radius-s); background: transparent; color: var(--a-text); font: inherit; font-size: var(--a-groesse-2); text-align: left; cursor: pointer; }
.menue-punkt svg { flex: none; width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; }
.menue-punkt:hover, .menue-punkt:focus-visible { background: var(--a-flaeche-2); outline: none; }
.menue-punkt.gefahr { color: var(--a-fehler); }
.menue-punkt.gefahr:hover, .menue-punkt.gefahr:focus-visible { background: var(--a-fehler-weich); }
.menue-frage { display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); font-size: var(--a-groesse-2); }
.menue-knoepfe { display: flex; gap: var(--a-abstand-2); justify-content: flex-end; }
.chat-hinweis { flex: none; margin: 0 0 var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); font-size: var(--a-groesse-1); }
.loesch-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-2); background: var(--a-flaeche-3); color: var(--a-text); }
.pruef-vermerk.prueft { color: var(--a-text-leise); }
.klein-kreisel { width: var(--a-abstand-3); height: var(--a-abstand-3); flex: none; }
/* S13 Vorschau = Live-Demo: echte App des Projekts, bedienbar (Sandbox-iframe) */
.live-vorschau { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.live-vorschau-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); }
.live-vorschau-leiste .pille { margin-right: auto; }
.live-vorschau-rahmen { width: 100%; height: 60vh; min-height: calc(var(--a-feld-hoehe) * 8); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-grund); display: block; }
.live-vorschau-laedt { display: flex; align-items: center; gap: var(--a-abstand-3); color: var(--a-text-leise); }
.live-vorschau-protokoll { max-height: calc(var(--a-feld-hoehe) * 5); overflow: auto; margin: 0; }
@media (max-width: 600px) { .live-vorschau-rahmen { height: 70vh; } }
.live-vorschau-was { color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.live-vorschau-leiste a.knopf { text-decoration: none; display: inline-flex; align-items: center; }
/* ---------- S10 P6 Design: Leinwand, Design-System, Bilder im Chat ---------- */
.spalte.breit { max-width: none; }
.ds { display: flex; flex-direction: column; gap: var(--a-abstand-4); }
.ds-inhalt { display: flex; flex-direction: column; gap: var(--a-abstand-4); }
.ds-titel { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-5) / 1.2 var(--a-schrift-anzeige); }
.ds-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a-eintrag-min), 1fr)); gap: var(--a-abstand-3); }
.eingabe.farbe { padding: var(--a-abstand-1); cursor: pointer; }
.ds-farben { display: flex; flex-wrap: wrap; gap: var(--a-abstand-3); }
.ds-farbe { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.ds-feld { display: block; width: var(--a-abstand-8); height: var(--a-abstand-7); border-radius: var(--a-radius-m); border: var(--a-linie-dicke) solid var(--a-linie); }
.ds-schrift { margin: 0; font-size: var(--a-groesse-5); }
.ds-abstaende { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.ds-abstand-zeile { display: flex; align-items: center; gap: var(--a-abstand-3); }
.ds-abstand-zeile .klein { min-width: var(--a-code-min); }
.ds-balken { display: block; height: var(--a-abstand-3); background: var(--a-akzent); border-radius: var(--a-radius-s); }
.ds-galerie { width: 100%; height: var(--a-karte-breite); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-grund); }
.ds-varianten { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a-feld-min), 1fr)); gap: var(--a-abstand-4); }
.ds-variante { display: flex; flex-direction: column; gap: var(--a-abstand-3); background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); padding: var(--a-abstand-4); }
.ds-variante .knopf { align-self: flex-start; }
.ds-vorschau-rahmen { height: var(--a-feld-min); overflow: hidden; border-radius: var(--a-radius-m); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-grund); }
.ds-vorschau { width: var(--a-geraet-desktop-b); height: var(--a-geraet-desktop-h); border: 0; transform: scale(0.25); transform-origin: 0 0; pointer-events: none; }
.ds-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); }
.ds-zoom { min-width: var(--a-abstand-7); text-align: center; }
.ds-trenner { flex: 1; }
.ds-arbeit { display: grid; grid-template-columns: minmax(0, 1fr) var(--a-schublade-breite); gap: var(--a-abstand-4); align-items: start; }
.ds-leinwand { position: relative; overflow: hidden; height: calc(100vh - var(--a-kopf-hoehe) * 4); min-height: var(--a-karte-breite); background: var(--a-flaeche-2); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); cursor: grab; touch-action: none; }
.ds-leinwand[data-zieht] { cursor: grabbing; }
.ds-ebene { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: var(--a-abstand-8); transform-origin: 0 0; }
.ds-bildschirm { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.ds-bildschirm-kopf { display: flex; align-items: center; gap: var(--a-abstand-3); font-size: var(--a-groesse-6); }
.ds-bildschirm-kopf .eingabe.klein { font-size: var(--a-groesse-5); height: auto; }
.ds-rahmen { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); background: var(--a-grund); box-shadow: var(--a-schatten-2); }
.ds-bildschirm[data-aktiv] .ds-rahmen { outline: calc(var(--a-fokus-dicke) * 4) solid var(--a-akzent); }
.ds-rahmen.geraet-desktop { width: var(--a-geraet-desktop-b); height: var(--a-geraet-desktop-h); }
.ds-rahmen.geraet-tablet { width: var(--a-geraet-tablet-b); height: var(--a-geraet-tablet-h); }
.ds-rahmen.geraet-handy { width: var(--a-geraet-handy-b); height: var(--a-geraet-handy-h); }
.ds-leinwand[data-modus="kommentieren"] .ds-rahmen { box-shadow: 0 0 0 calc(var(--a-fokus-dicke) * 3) var(--a-warn); }
.ds-seite { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.ds-seite .abschnitt { padding: var(--a-abstand-4); gap: var(--a-abstand-3); }
.ds-regler-zeile input[type="range"] { flex: 1; accent-color: var(--a-akzent); }
.ds-kommentare, .ds-uebergaben { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.ds-kommentar, .ds-uebergabe { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-2); display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); }
.ds-zuordnung { margin: 0; padding-left: var(--a-abstand-4); color: var(--a-text-leise); }
.ds-abgleich { display: flex; flex-direction: column; gap: var(--a-abstand-2); align-items: flex-start; }
.ds-abgleich-bild { width: 100%; border-radius: var(--a-radius-s); border: var(--a-linie-dicke) solid var(--a-linie); }
.chat-bild { display: block; padding: 0; margin: var(--a-abstand-2) 0; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); cursor: zoom-in; overflow: hidden; max-width: var(--a-feld-min); }
.chat-bild img { display: block; width: 100%; }
.bild-gross { position: fixed; inset: 0; z-index: 50; background: var(--a-schleier); display: flex; align-items: center; justify-content: center; padding: var(--a-abstand-4); }
.bild-gross-karte { background: var(--a-grund); border-radius: var(--a-radius-l); box-shadow: var(--a-schatten-2); padding: var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-3); max-width: var(--a-inhalt-breite); width: 100%; max-height: 100%; overflow-y: auto; }
.bild-gross-bild { width: 100%; max-height: var(--a-karte-breite); object-fit: contain; background: var(--a-flaeche); border-radius: var(--a-radius-m); }
.bild-mini { padding: 0; border: var(--a-fokus-dicke) solid transparent; border-radius: var(--a-radius-s); background: none; cursor: pointer; }
.bild-mini[aria-pressed="true"] { border-color: var(--a-akzent); }
.bild-mini img { display: block; width: var(--a-abstand-7); height: var(--a-abstand-7); object-fit: cover; border-radius: var(--a-radius-s); }
@media (max-width: 760px) { /* Breakpoint = --a-inhalt-breite (Variablen gehen in Media-Queries nicht) */
  .ds-arbeit { grid-template-columns: 1fr; }
  .ds-leinwand { height: var(--a-karte-breite); }
}
@media (max-width: 720px) { .menue-eintrag { min-height: var(--a-feld-hoehe); } }

/* rechnung-1..4 Rechnungen */
.rg-tabelle td { white-space: normal; vertical-align: top; }
.rg-tabelle .eingabe { min-width: var(--a-code-min); }
.rg-tabelle .rg-zahl, .rg-tabelle .rg-einheit { min-width: 0; width: calc(var(--a-abstand-8) + var(--a-abstand-5)); }
.rg-tabelle .rg-zahl { text-align: right; }
.rg-preis { display: flex; flex-direction: column; gap: var(--a-abstand-1); align-items: flex-start; }
.rg-punkte { margin: var(--a-abstand-1) 0 0; padding-left: var(--a-abstand-5); }
.rg-aktionen { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; align-items: center; }
.rg-regeln { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.rg-regel { display: flex; gap: var(--a-abstand-3); align-items: center; flex-wrap: wrap; padding: var(--a-abstand-2) var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.rg-regel > span:first-child { flex: 1; min-width: var(--a-feld-min); }
.rg-ersatz { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); }
.rg-druck, .rg-nur-handy { display: none; }
@media (max-width: 600px) { /* Handy: jede Zeile als Karte, Felder untereinander */
  .rg-tabelle thead { display: none; }
  .rg-nur-handy { display: inline; }
  .rg-tabelle, .rg-tabelle tbody { display: block; }
  .rg-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-abstand-2); padding: var(--a-abstand-3); border-top: var(--a-linie-dicke) solid var(--a-linie); }
  .rg-tabelle tr:first-child { border-top: none; }
  .rg-tabelle td { padding: 0; border: none; }
  .rg-tabelle td:first-child, .rg-tabelle td:nth-child(5) { grid-column: 1 / -1; }
  .rg-tabelle .eingabe, .rg-tabelle .rg-zahl, .rg-tabelle .rg-einheit { width: 100%; min-width: 0; }
}
@media print {
  body * { visibility: hidden; }
  .rg-druck, .rg-druck * { visibility: visible; }
  .rg-druck { display: flex; flex-direction: column; gap: var(--a-abstand-5); position: fixed; inset: 0; padding: var(--a-abstand-6); background: var(--a-grund); color: var(--a-text); }
  .rg-druck-kopf { text-align: right; }
}

/* os-91: Einstellungen = eine Seite mit Reitern; Menü „Mehr“ zugeklappt */
.einst-kopf { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.einst-titel { margin: 0; font: var(--a-gewicht-fett) var(--a-groesse-5) / 1.2 var(--a-schrift-anzeige); }
.einst-reiter { display: flex; flex-wrap: wrap; gap: var(--a-abstand-1); border-bottom: var(--a-linie-dicke) solid var(--a-linie); }
.einst-reiter button { border: 0; background: transparent; color: var(--a-text-leise); font: inherit; font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); padding: var(--a-abstand-2) var(--a-abstand-3); border-bottom: var(--a-fokus-dicke) solid transparent; margin-bottom: calc(-1 * var(--a-linie-dicke)); cursor: pointer; }
.einst-reiter button:hover { color: var(--a-text); }
.einst-reiter button[aria-selected="true"] { color: var(--a-text); border-bottom-color: var(--a-akzent); }
.einst-kopf + .kopf h1, .einst-kopf + .kopf h2 { margin: 0; font-size: var(--a-groesse-4); }
.menue-eintrag[data-menue-mehr] { color: var(--a-text-leise); }
.menue-mehr { display: flex; flex-direction: column; padding-left: var(--a-abstand-2); }

/* os-98: ⚠ oben rechts, Objekt wählen (Seite abgedunkelt, Teil hell mit Rahmen), Meldungen-Liste */
.melden-knopf:hover { background: var(--a-flaeche-2); color: var(--a-warn); }
.melden-knopf svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.melden-ebene { position: fixed; inset: 0; z-index: 1000; cursor: crosshair; background: var(--a-schleier); }
.melden-ebene.hat-ziel { background: transparent; }
.melden-rahmen { position: fixed; pointer-events: none; border: var(--a-fokus-dicke) solid var(--a-fehler); border-radius: var(--a-radius-s); box-shadow: 0 0 0 100vmax var(--a-schleier); transition: all var(--a-dauer-kurz) var(--a-kurve); }
.melden-hinweis { position: fixed; z-index: 1; top: var(--a-abstand-4); left: 50%; transform: translateX(-50%); pointer-events: none; background: var(--a-flaeche); color: var(--a-text); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-rund); padding: var(--a-abstand-2) var(--a-abstand-4); font-size: var(--a-groesse-2); box-shadow: var(--a-schatten-2); white-space: nowrap; }
.melden-objekt { min-width: 0; overflow-wrap: anywhere; }
.melden-vorschau .meldung-bild, .meldung-bild { display: block; max-width: 100%; max-height: var(--a-karte-breite); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.meldung-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.meldung-bild-verweis { display: inline-block; margin-top: var(--a-abstand-2); }

/* os-91/os-100: Projekte-Übersicht */
button.projekt-karte { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.projekt-karte:hover { background: var(--a-flaeche-2); }

/* os-50: Info-Fuß (Modell, Token, Herkunft) nur bei Hover; Fehler bleiben sichtbar; Touch zeigt immer */
@media (hover: hover) {
  .nachricht.ki .ki-fuss > .klein, .nachricht.ki .ki-fuss > .pille.herkunft { opacity: 0; transition: opacity var(--a-dauer-kurz) var(--a-kurve); }
  .nachricht.ki:hover .ki-fuss > .klein, .nachricht.ki:hover .ki-fuss > .pille.herkunft, .nachricht.ki:focus-within .ki-fuss > * { opacity: 1; }
}
.aktion.an { background: var(--a-akzent-weich); color: var(--a-akzent); }
.nachricht-info { display: grid; grid-template-columns: auto 1fr; gap: var(--a-abstand-1) var(--a-abstand-3); margin: var(--a-abstand-2) 0 0; padding: var(--a-abstand-2) var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); font-size: var(--a-groesse-1); }
.nachricht-info dt { color: var(--a-text-leise); }
.nachricht-info dd { margin: 0; color: var(--a-text); }
/* os-50: Knopf „Nach unten“ über dem Eingabefeld */
.chat-schale { position: relative; }
.nach-unten { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--a-feld-hoehe) * 3); z-index: 2; width: var(--a-abstand-7); height: var(--a-abstand-7); border-radius: var(--a-radius-rund); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche-2); color: var(--a-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--a-schatten-1); }
.nach-unten[hidden] { display: none; }
.nach-unten svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.6; }
/* os-54: Kontext-Anzeige unten links, grau < 50 %, orange ab 50 %, rot ab 80 % */
.eingabe-fuss { position: relative; }
.kontext-anzeige { height: var(--a-abstand-5); padding: 0 var(--a-abstand-2); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-rund); background: transparent; font-size: var(--a-groesse-1); cursor: pointer; color: var(--a-text-leise); }
.kontext-anzeige[data-kontext-anzeige="orange"] { color: var(--a-warn); border-color: var(--a-warn); }
.kontext-anzeige[data-kontext-anzeige="rot"] { color: var(--a-fehler); border-color: var(--a-fehler); }
.kontext-belegung { position: absolute; left: 0; bottom: calc(100% + var(--a-abstand-2)); z-index: 5; min-width: min(var(--a-karte-breite), 80vw); padding: var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.kontext-balken { height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); overflow: hidden; margin: var(--a-abstand-2) 0; }
.kontext-balken span { display: block; height: 100%; background: var(--a-text-leise); }
.kontext-balken[data-kontext-anzeige="orange"] span { background: var(--a-warn); }
.kontext-balken[data-kontext-anzeige="rot"] span { background: var(--a-fehler); }
/* os-51: Auszug unter Such-Treffern */
.such-auszug { margin: 0 0 var(--a-abstand-2); padding: 0 var(--a-abstand-3); font-size: var(--a-groesse-1); color: var(--a-text-leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* os-52: /-Befehle und @-Datei-Vorschläge über dem Eingabefeld */
.eingabe-pille { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: auto; height: auto; max-height: 50vh; overflow-y: auto; bottom: calc(100% + var(--a-abstand-2)); z-index: 6; display: flex; flex-direction: column; padding: var(--a-abstand-1); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.vorschlaege[hidden] { display: none; }
.vorschlag { flex: none; height: auto; display: flex; align-items: center; gap: var(--a-abstand-2); min-height: var(--a-abstand-7); padding: 0 var(--a-abstand-3); border: 0; border-radius: var(--a-radius-m); background: transparent; color: var(--a-text); font: inherit; text-align: left; cursor: pointer; }
.vorschlag.an, .vorschlag:hover { background: var(--a-flaeche-2); }
.vorschlag svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.vorschlag-info { margin-left: auto; color: var(--a-text-leise); font-size: var(--a-groesse-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlag-name { white-space: nowrap; }
/* os-62: Manager-Zeile mit Klapp-Knopf für Unter-Agenten, Aktiv-Zahl im Titel */
.baum-zeile { display: flex; align-items: stretch; gap: var(--a-abstand-1); }
.baum-zeile > .baum-eintrag { flex: 1; min-width: 0; }
.baum-klapp { flex: none; display: flex; align-items: center; gap: var(--a-abstand-1); padding: 0 var(--a-abstand-2); border: 0; border-radius: var(--a-radius-m); background: transparent; color: var(--a-text-leise); font-size: var(--a-groesse-1); cursor: pointer; }
.baum-klapp:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.baum-klapp svg { width: var(--a-abstand-3); height: var(--a-abstand-3); fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--a-dauer-kurz) var(--a-kurve); }
.baum-klapp[aria-expanded="false"] svg { transform: rotate(-90deg); }
.baum-aktiv { color: var(--a-akzent); font-weight: var(--a-gewicht-normal); }
/* os-50: einzeilige Schritt-Karte (Zeichen, Werkzeug, Kurzfassung, Dauer, Größe) und Zweig-Pfeile 1/2 */
.werkzeug-haken { flex: none; font-weight: var(--a-gewicht-mittel); color: var(--a-text-leise); }
.werkzeug-haken[data-schritt-zeichen="fertig"] { color: var(--a-gut); }
.werkzeug-haken[data-schritt-zeichen="fehler"], .werkzeug-haken[data-schritt-zeichen="abgelehnt"] { color: var(--a-fehler); }
.werkzeug-haken[data-schritt-zeichen="wartet"] { color: var(--a-warn); }
.werkzeug-name { flex: none; font-weight: var(--a-gewicht-mittel); font-size: var(--a-groesse-1); }
.werkzeug summary .werkzeug-kurz { flex: 1 1 auto; color: var(--a-text-leise); }
.werkzeug-mass { flex: none; font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }
.zweig-pfeile { display: inline-flex; align-items: center; gap: var(--a-abstand-1); }
.zweig-pfeile .aktion[disabled] { color: var(--a-text-leise); cursor: default; }
/* os-52: Hinweis „nachgereicht" am laufenden Lauf, nur so breit wie der Text */
.nachricht [data-nachschub] { align-self: flex-start; justify-self: start; width: fit-content; }
/* os-55: Kosten-Übersicht */
.kosten-seite { display: grid; gap: var(--a-abstand-4); }
.kosten-block h3 { margin: 0 0 var(--a-abstand-2); font-size: var(--a-groesse-3); }
.kosten-gesamt { margin: 0; font-weight: var(--a-gewicht-mittel); white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.kosten-seite { min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* os-62: rechts Details zum gewählten Agenten */
.agent-detail { display: grid; gap: var(--a-abstand-3); padding-bottom: var(--a-abstand-3); border-bottom: var(--a-linie-dicke) solid var(--a-linie); margin-bottom: var(--a-abstand-3); min-width: 0; }
.agent-detail-teil { display: grid; gap: var(--a-abstand-1); min-width: 0; }
.agent-detail-prompt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--a-groesse-1); color: var(--a-text-leise); max-height: calc(var(--a-karte-breite) / 3); overflow-y: auto; }
/* os-53: Diktat in jedem Eingabefeld – schwebender Mikro-Knopf rechts im fokussierten Feld */
.diktat-feld { position: fixed; z-index: 45; transform: translateX(-100%); display: flex; align-items: center; gap: var(--a-abstand-1); }
.diktat-feld .runder-knopf.klein { width: var(--a-knopf-klein); height: var(--a-knopf-klein); }
.diktat-feld-stand { background: var(--a-flaeche-2); color: var(--a-text-leise); border-radius: var(--a-radius-m); padding: 0 var(--a-abstand-2); }
/* os-57: Freigabe-Korb (Zähler in der Kopfleiste, Popup mit Karten) und Rückfrage-Knöpfe */
.kopf-rechts { position: relative; }
.korb-knopf { gap: var(--a-abstand-1); }
.korb-zahl { min-width: var(--a-abstand-4); padding: 0 var(--a-abstand-1); border-radius: var(--a-radius-rund); background: var(--a-warn); color: var(--a-flaeche); font-weight: var(--a-gewicht-mittel); text-align: center; }
.korb-popup { position: absolute; top: 100%; right: 0; z-index: 40; width: var(--a-karte-breite); max-width: calc(100vw - var(--a-abstand-4)); max-height: 70vh; overflow-y: auto; display: grid; gap: var(--a-abstand-3); padding: var(--a-abstand-3); border-radius: var(--a-radius-l); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.korb-eintrag { display: grid; gap: var(--a-abstand-2); }
.rueckfrage .freigabe-knoepfe { flex-wrap: wrap; }
/* os-92: offene Rückfrage = gelber Rahmen + Fragezeichen (Farbregel: rot Fehler, grün Info, gelb Frage) */
.ist-frage { border: var(--a-linie-dicke) solid var(--a-warn); border-radius: var(--a-radius-m); background: var(--a-warn-weich); padding: var(--a-abstand-2) var(--a-abstand-3); }
.ist-frage > .freigabe-frage::before, .ist-frage > p:first-child::before { content: "?"; display: inline-grid; place-items: center; min-width: var(--a-abstand-4); height: var(--a-abstand-4); margin-right: var(--a-abstand-1); border-radius: var(--a-radius-rund); background: var(--a-warn); color: var(--a-flaeche); font-weight: var(--a-gewicht-mittel); }
.korb-popup { grid-template-columns: minmax(0, 1fr); }
.korb-popup .korb-eintrag { min-width: 0; max-width: none; margin: 0; padding: 0; }
.korb-popup .freigabe-knoepfe { flex-wrap: wrap; }
/* os-61: Hinweis oben (Abo-Fenster leer u. a.) */
.hinweis-oben { position: fixed; top: var(--a-abstand-4); left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - var(--a-abstand-4) * 2); box-shadow: var(--a-schatten-2); cursor: pointer; }
/* os-63: Live-Stand mit Laufzeit + Schritten, Startseite „Arbeitet gerade“ */
.lauf-schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--a-abstand-1); font-size: var(--a-groesse-1); }
.lauf-schritte li { display: flex; gap: var(--a-abstand-2); align-items: baseline; min-width: 0; }
.lauf-schritte .werkzeug-kurz { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arbeitet-gerade { display: grid; gap: var(--a-abstand-2); padding: var(--a-abstand-4); max-width: var(--a-chat-spalte); margin: 0 auto; width: 100%; }
.arbeitet-karte { display: flex; gap: var(--a-abstand-3); align-items: center; text-align: left; padding: var(--a-abstand-3); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); color: var(--a-text); cursor: pointer; min-width: 0; }
.arbeitet-karte:hover { background: var(--a-flaeche-2); }

/* af-p1: Schild Desktop / App / Web oben rechts */
.geraet-schild { font-size: var(--a-groesse-1); color: var(--a-text-leise); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-rund); padding: 0 var(--a-abstand-2); line-height: 1.6; flex: none; }

/* os-78: bekannte Konten auf der Anmelde-Seite + Passkey-Knopf */
.konten-wahl { display: flex; flex-wrap: wrap; gap: var(--a-abstand-2); margin-bottom: var(--a-abstand-3); }
.konten-wahl .pille { cursor: pointer; font: inherit; }
[data-passkey-anmelden] { width: 100%; margin-top: var(--a-abstand-3); }
.konten-wahl .pille { border: var(--a-linie-dicke) solid var(--a-linie); }

/* os-78: iPad (Touch, 700–1366 px) – eigenes Layout: Fingergroße Ziele, Safe Areas, Leiste schmaler im Hochformat */
@media (pointer: coarse) and (min-width: 700px) {
  .leiste .chat-eintrag, .leiste [data-chat], .nutzer-menue [role=menuitem], .cowork-reiter [role=tab], .modus-wahl button { min-height: var(--a-feld-hoehe); }
  .haupt-kopf { padding-top: max(var(--a-abstand-2), env(safe-area-inset-top)); padding-right: max(var(--a-abstand-4), env(safe-area-inset-right)); }
  .leiste-innen { padding-bottom: max(var(--a-abstand-3), env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) and (min-width: 700px) and (orientation: portrait) {
  .schale { grid-template-columns: var(--cowork-links-breite, var(--a-leiste-breite-ipad)) minmax(0, 1fr); }
}

/* os-53: Sprach-Assistent (schwebend unten rechts) */
.sprach-assistent { position: fixed; right: var(--a-abstand-4); bottom: var(--a-abstand-4); z-index: 40; width: min(calc(100vw - 2 * var(--a-abstand-4)), var(--a-schublade-breite)); max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: var(--a-abstand-3); padding: var(--a-abstand-4); background: var(--a-flaeche); color: var(--a-text); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); box-shadow: var(--a-schatten-2); }
.sprach-assistent .sa-wuensche { margin: 0; padding-left: var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.sprach-assistent .sa-wuensche li span { overflow-wrap: anywhere; }
.sprach-assistent [data-sa-engine] { white-space: pre-line; margin: 0; }
.sprach-assistent .sa-wuensche .verweis { margin-left: var(--a-abstand-2); }
.sprach-assistent .aktionen { display: flex; flex-wrap: wrap; gap: var(--a-abstand-2); }
.sprach-assistent [data-sa-status] { margin: 0; }

/* os-67 Aufgaben aus Web/Handy, os-68 Edit-Log */
.aufgabe-liste { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.aufgabe-zeile { padding: var(--a-abstand-2) 0; border-bottom: 1px solid var(--a-linie); }
.edit-log-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); width: 100%; padding: var(--a-abstand-2) 0; background: none; border: 0; border-bottom: 1px solid var(--a-linie); color: var(--a-text); text-align: left; cursor: pointer; font: inherit; }
.edit-log-pfad { font-family: var(--a-schrift-mono); flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* os-82 Artefakt im App-Fenster */
.artefakt-fenster { width: calc(100vw - 2 * var(--a-abstand-4)); max-width: none; height: calc(100vh - 2 * var(--a-abstand-4)); flex-direction: column; gap: var(--a-abstand-3); }
.artefakt-fenster[open] { display: flex; }
.artefakt-fenster-kopf h2 { flex: 1; margin: 0; }
.artefakt-fenster-rahmen { flex: 1; width: 100%; border: 1px solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); }
/* os-68 Editor */
.editor-feld { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); resize: vertical; min-height: calc(var(--a-abstand-7) * 4); }
.aufgabe-antwort { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
/* os-70 Vorher/Nachher, Element-Block, Matrix */
.vergleich { position: relative; }
.vergleich-vorher { position: absolute; inset: 0; pointer-events: none; }
.vergleich-schieber { flex: 1; }
.element-box { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.matrix-dialog { width: min(100% - var(--a-abstand-5), var(--a-geraet-desktop-b)); }
.matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--a-geraet-handy-b)), 1fr)); gap: var(--a-abstand-3); }
.matrix-feld { margin: 0; display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.matrix-rahmen { width: 100%; height: calc(var(--a-feld-hoehe) * 8); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-grund); }
.matrix-schmal .matrix-rahmen { max-width: var(--a-geraet-handy-b); }
.matrix-zeile { display: flex; flex-direction: column; gap: var(--a-abstand-2); margin-bottom: var(--a-abstand-4); }
/* os-80: Einstellungen passen sich dem Inhalt an (breite Tabellen machen die Spalte breiter, nie breiter als das Fenster) */
.spalte.einst { width: fit-content; min-width: min(100%, var(--a-inhalt-breite)); max-width: 100%; }
/* os-60: genutztes Abo unten links hervorgehoben */
.abo-zeile.genutzt { background: var(--a-akzent-weich); border-radius: var(--a-radius-s); outline: var(--a-linie-dicke) solid var(--a-akzent); outline-offset: var(--a-abstand-1); }
/* os-68: Dateien je Chat als Baum */
.datei-baum { list-style: none; margin: 0; padding-left: var(--a-abstand-3); }
[data-chat-dateien] > .datei-baum { padding-left: 0; }
.datei-baum summary { display: flex; align-items: center; gap: var(--a-abstand-2); cursor: pointer; font-size: var(--a-groesse-2); color: var(--a-text-leise); padding: var(--a-abstand-1) 0; }
.datei-baum svg { width: var(--a-abstand-4); height: var(--a-abstand-4); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.datei-baum-datei { display: flex; align-items: center; gap: var(--a-abstand-2); width: 100%; background: none; border: 0; color: var(--a-text); font: inherit; font-size: var(--a-groesse-2); padding: var(--a-abstand-1) var(--a-abstand-2); border-radius: var(--a-radius-s); cursor: pointer; text-align: left; }
.datei-baum-datei:hover, .datei-baum-datei:focus-visible { background: var(--a-flaeche-2); }
.datei-baum-datei .datei-pfad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei.blitz { outline: var(--a-linie-dicke) solid var(--a-akzent); transition: outline-color var(--a-dauer-mittel); }

/* ---------- os-102: Desktop-App nach Entwurf D (nur Tokens) ---------- */
.schale.d-app { display: flex; }
.d-app .leiste.d-leiste { width: var(--d-links, var(--a-d-links)); min-width: var(--a-d-links-min); flex: none; }
.d-leiste .leiste-innen { padding: var(--a-abstand-2); gap: var(--a-abstand-1); }
.d-leiste-kopf { flex: none; display: flex; flex-direction: column; gap: var(--a-abstand-2); padding-bottom: var(--a-abstand-1); }
.d-suche { height: calc(var(--a-feld-hoehe) - var(--a-abstand-3)); border-radius: var(--a-radius-rund); }
.umschalter { display: grid; grid-template-columns: 1fr 1fr; background: var(--a-flaeche-2); border-radius: var(--a-radius-rund); padding: var(--a-abstand-1); }
.umschalter button { border: 0; background: transparent; border-radius: var(--a-radius-rund); padding: var(--a-abstand-1); cursor: pointer; color: var(--a-text-leise); font: inherit; font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-mittel); }
.umschalter button[aria-pressed="true"] { background: var(--a-grund); color: var(--a-text); box-shadow: var(--a-schatten-1); }
.d-oben { flex: none; height: var(--d-oben, var(--a-chats-hoehe)); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.d-ex { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.d-ex .ex-flaeche { flex: 1; overflow: auto; min-height: 0; scrollbar-width: thin; display: flex; flex-direction: column; }
.d-app .gruppe { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-2) var(--a-abstand-1); color: var(--a-text-leise); font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-fett); }
.d-app .gruppe.ex-kopf { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-app .live { color: var(--a-gut); font-weight: var(--a-gewicht-normal); }
.d-app .baum { padding: 0 var(--a-abstand-1); font-size: var(--a-groesse-2); }
.d-app .baum .b { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-1) var(--a-abstand-2); border-radius: var(--a-radius-s); cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; color: var(--a-text); font: inherit; white-space: nowrap; flex: none; }
.d-app .baum .b:hover { background: var(--a-flaeche-2); }
.d-app .baum .b[aria-current="true"] { background: var(--a-flaeche-3); }
.d-app .baum .b .n { flex: 1 1 0; min-width: var(--a-abstand-7); overflow: hidden; text-overflow: ellipsis; } /* os-102: Name kürzt mit …, bleibt aber lesbar */
.d-app .baum .b .zaehler, .d-app .baum .b .pille { flex: none; }
.d-app .baum .b .pille { padding: 0 var(--a-abstand-2); }
.d-app .baum .b .pille + .zaehler { display: none; } /* „braucht dich“ hat Vorrang vor „n laufen“ – sonst bleibt für den Namen kein Platz */
.d-app .baum .b .art { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.d-app .zaehler { font-size: var(--a-groesse-1); color: var(--a-akzent); background: var(--a-akzent-weich); border-radius: var(--a-radius-rund); padding: 0 var(--a-abstand-2); margin-left: auto; white-space: nowrap; font-weight: var(--a-gewicht-mittel); }
.d-app .zaehler.leer-zaehler { color: var(--a-text-leise); background: var(--a-flaeche-2); }
.d-mehr { border: 0; background: transparent; color: var(--a-text-leise); cursor: pointer; border-radius: var(--a-radius-s); padding: 0 var(--a-abstand-1); font: inherit; }
.d-mehr:hover { background: var(--a-flaeche-2); color: var(--a-text); }
.zieher-h { flex: none; height: var(--a-griff); cursor: row-resize; background: var(--a-linie); border-radius: var(--a-radius-rund); }
.zieher-v { flex: none; width: var(--a-griff); cursor: col-resize; background: var(--a-linie); }
.zieher-h:hover, .zieher-v:hover { background: var(--a-akzent); }
.a1 { --d-farbe: var(--a-akzent); --d-weich: var(--a-akzent-weich); }
.a2 { --d-farbe: var(--a-warn); --d-weich: var(--a-warn-weich); }
.a3 { --d-farbe: var(--a-gut); --d-weich: var(--a-gut-weich); }
.d-app .agent { box-shadow: inset var(--a-fokus-dicke) 0 0 var(--d-farbe); }
.wer-agent { font-size: var(--a-groesse-1); padding: 0 var(--a-abstand-2); border-radius: var(--a-radius-rund); color: var(--d-farbe, var(--a-akzent)); background: var(--d-weich, var(--a-akzent-weich)); animation: d-puls calc(var(--a-dauer-mittel) * 6) ease-in-out infinite; } /* Dauer aus Token abgeleitet */
.wer-agent.gesperrt { color: var(--a-fehler); background: var(--a-fehler-weich); animation: none; }
@keyframes d-puls { 50% { opacity: 0.35; } }
.knoten { user-select: none; }
.knoten.ausgeschnitten { opacity: 0.5; }
.knoten.ziel, .ex-rest.ziel, .ex-flaeche.ziel { outline: var(--a-linie-dicke) dashed var(--a-akzent); background: var(--a-akzent-weich); }
.ex-rest { flex: 1; min-height: var(--a-abstand-7); }
.menue-trenn { border: 0; border-top: var(--a-linie-dicke) solid var(--a-linie); margin: var(--a-abstand-1) 0; width: 100%; }
.menue-punkt:disabled { color: var(--a-text-leise); cursor: default; }
.ex-dialog { width: var(--a-karte-breite); }
.ex-dialog[open] { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.ex-wahl { display: flex; gap: var(--a-abstand-2); align-items: center; padding: var(--a-abstand-1) 0; cursor: pointer; }
.ex-knoepfe { display: flex; justify-content: flex-end; gap: var(--a-abstand-2); margin-top: var(--a-abstand-2); }
/* Mitte: Chat (breiteste Spalte) */
.d-mitte { flex: none; width: var(--d-chat, var(--a-d-chat)); min-width: var(--a-d-chat-min); display: flex; flex-direction: column; min-height: 0; background: var(--a-grund); }
.d-kopf { flex: none; position: relative; display: flex; align-items: center; gap: var(--a-abstand-3); padding: var(--a-abstand-1) var(--a-abstand-4); border-bottom: var(--a-linie-dicke) solid var(--a-linie); min-height: var(--a-kopf-hoehe); }
.d-an { border: 0; background: transparent; cursor: pointer; padding: var(--a-abstand-1) 0; font: inherit; font-weight: var(--a-gewicht-fett); color: var(--a-text); font-size: var(--a-groesse-3); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.d-kopf [data-d-an-info] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { /* Breakpoint = --a-inhalt-breite: Leiste als Schublade (Knopf im Kopf), nur der Chat */
  .d-app .d-rechts, .d-app .zieher-v { display: none; }
  .d-app .d-mitte { flex: 1; width: auto; min-width: 0; }
  .d-app .leiste.d-leiste { width: min(85vw, var(--a-schublade-breite)); }
  .d-kopf { padding: var(--a-abstand-1) var(--a-abstand-3); gap: var(--a-abstand-2); }
}
.d-menue { position: absolute; left: var(--a-abstand-3); top: 100%; z-index: 30; min-width: var(--a-eintrag-min); display: flex; flex-direction: column; padding: var(--a-abstand-1); background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); box-shadow: var(--a-schatten-2); }
.d-menue[hidden] { display: none; }
.d-menue button { display: flex; align-items: center; gap: var(--a-abstand-2); border: 0; background: transparent; color: var(--a-text); text-align: left; padding: var(--a-abstand-2) var(--a-abstand-3); border-radius: var(--a-radius-s); cursor: pointer; font: inherit; }
.d-menue button:hover, .d-menue button[aria-selected="true"], .d-menue button:focus-visible { background: var(--a-flaeche-3); }
.d-mitte .plan { flex: none; border-bottom: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); }
.d-mitte .plan[hidden] { display: none; }
.d-mitte .plan-kopf { display: flex; align-items: center; gap: var(--a-abstand-3); padding: var(--a-abstand-1) var(--a-abstand-4); cursor: pointer; font-size: var(--a-groesse-2); }
.d-mitte .plan-kopf b { white-space: nowrap; }
.d-mitte .plan-kopf .ziel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-text-leise); }
.d-plan-balken { flex: none; width: var(--a-abstand-8); }
.plan-link { font-size: var(--a-groesse-1); white-space: nowrap; }
.d-mitte .plan-schritte { display: none; padding: 0 var(--a-abstand-4) var(--a-abstand-3); gap: var(--a-abstand-1); flex-direction: column; font-size: var(--a-groesse-1); max-height: var(--a-chats-hoehe); overflow-y: auto; }
.d-mitte .plan.offen .plan-schritte { display: flex; }
.d-mitte .schritt.fertig { color: var(--a-text-leise); text-decoration: line-through; }
.d-verlauf-teil { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.d-verlauf-teil > .chat-schale, .d-verlauf-teil > .seite { flex: 1; min-height: 0; }
.d-verlauf-teil .agent-kopf { display: none; } /* Kopf steht oben als „<Manager> ▾“ (Entwurf D) */
.d-fuss { flex: none; display: flex; align-items: center; gap: var(--a-abstand-3); padding: 0 var(--a-abstand-4) var(--a-abstand-2); }
.d-fuss:empty { display: none; }
.d-laeufe { display: flex; flex-direction: column; gap: var(--a-abstand-2); margin: var(--a-abstand-2) 0; }
.lauf { border: var(--a-linie-dicke) solid var(--a-linie); border-left: var(--a-fokus-dicke) solid var(--a-akzent); border-radius: var(--a-radius-s); font-size: var(--a-groesse-1); background: var(--a-flaeche); }
.lauf.wartet { border-left-color: var(--a-warn); } .lauf.fertig { border-left-color: var(--a-gut); } .lauf.pause, .lauf.gestoppt { border-left-color: var(--a-text-leise); opacity: 0.75; }
.lauf-kopf { display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-1) var(--a-abstand-2); flex-wrap: wrap; }
.lauf-auf { border: 0; background: transparent; cursor: pointer; color: var(--a-text-leise); padding: 0; font: inherit; }
.lauf-schritte { padding: 0 var(--a-abstand-3) var(--a-abstand-2) var(--a-abstand-6); font-family: var(--a-schrift-mono); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.datei-link { border: 0; background: transparent; color: var(--a-akzent); cursor: pointer; font: inherit; padding: 0; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Rechts: Editor */
.d-rechts { flex: 1; min-width: var(--a-d-code-min); display: flex; flex-direction: column; background: var(--a-flaeche); }
.d-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.d-editor .reiter { flex: none; display: flex; border-bottom: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); overflow-x: auto; scrollbar-width: thin; }
.d-editor .reiter button { border: 0; background: transparent; padding: var(--a-abstand-2) var(--a-abstand-3); cursor: pointer; color: var(--a-text-leise); border-bottom: var(--a-fokus-dicke) solid transparent; white-space: nowrap; font: inherit; font-size: var(--a-groesse-1); }
.d-editor .reiter button[aria-pressed="true"] { color: var(--a-text); border-bottom-color: var(--a-akzent); background: var(--a-grund); }
.folgen-leiste { flex: none; display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-1) var(--a-abstand-3); background: var(--d-weich, var(--a-flaeche-2)); border-bottom: var(--a-linie-dicke) solid var(--a-linie); font-size: var(--a-groesse-1); min-width: 0; }
.folgen-leiste.ruhig { background: var(--a-flaeche); }
.folgen-leiste .titel-flaeche { flex: 1; }
.d-pfad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puls { flex: none; width: var(--a-abstand-2); height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--d-farbe, var(--a-akzent)); animation: d-puls calc(var(--a-dauer-mittel) * 4) ease-in-out infinite; }
.d-editor .tafel { flex: 1; min-height: 0; overflow: auto; background: var(--a-grund); scrollbar-width: thin; position: relative; }
.d-code { margin: 0; padding: var(--a-abstand-2) 0; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); line-height: var(--a-zeile); white-space: pre; border: 0; border-radius: 0; background: transparent; }
.d-code .dz { display: block; padding-right: var(--a-abstand-3); }
.d-code .nr { display: inline-block; width: var(--a-abstand-7); padding-right: var(--a-abstand-3); text-align: right; color: var(--a-text-leise); user-select: none; }
.d-code .neu-zeile { background: var(--a-akzent-weich); }
.d-code .lese-band { background: var(--a-warn-weich); transition: background var(--a-dauer-mittel) var(--a-kurve); }
.d-code .treffer { background: var(--a-gut-weich); }
.d-code .diff-neu { color: var(--a-gut); } .d-code .diff-weg { color: var(--a-fehler); }
.d-vorschau { padding: var(--a-abstand-4); }
.d-vorschau-rahmen { width: 100%; height: 100%; border: 0; background: var(--a-grund); }
/* website-1: Website g-sv.eu – Editor links, Live-Vorschau rechts */
.w-teilung { flex: 1; min-height: 0; display: flex; }
.w-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: var(--a-linie-dicke) solid var(--a-linie); }
.w-vorschau { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--a-flaeche); }
.w-kopf { flex: none; display: flex; flex-direction: column; gap: var(--a-abstand-1); padding: var(--a-abstand-2) var(--a-abstand-3); border-bottom: var(--a-linie-dicke) solid var(--a-linie); font-size: var(--a-groesse-1); }
.w-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-abstand-2); min-width: 0; }
.w-zeile .knopf { white-space: nowrap; }
.w-adresse { color: var(--a-text); font-weight: var(--a-gewicht-mittel); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-punkt { flex: none; width: var(--a-abstand-2); height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-text-leise); }
.w-punkt[data-w-zustand="live"] { background: var(--a-gut); }
.w-punkt[data-w-zustand="fehler"] { background: var(--a-fehler); }
.w-kopf .meldung { padding: var(--a-abstand-1) var(--a-abstand-3); font-size: var(--a-groesse-1); }
.w-rahmen { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--a-grund); }
.w-bearbeiten { display: flex; flex-direction: column; height: 100%; }
.w-leiste { flex: none; display: flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-1) var(--a-abstand-3); border-bottom: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); min-width: 0; }
.w-leiste .meldung { padding: var(--a-abstand-1) var(--a-abstand-2); font-size: var(--a-groesse-1); }
.w-status[data-w-status="gut"] { color: var(--a-gut); }
.w-status[data-w-status="fehler"] { color: var(--a-fehler); }
.w-status[data-w-status="warn"] { color: var(--a-warn); }
.w-text { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; border-radius: 0; margin: 0; padding: var(--a-abstand-2) var(--a-abstand-3); background: var(--a-grund); color: var(--a-text); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); line-height: var(--a-zeile); white-space: pre; overflow: auto; tab-size: 2; }
.w-text:focus-visible { outline: var(--a-fokus-dicke) solid var(--a-akzent); outline-offset: calc(var(--a-fokus-dicke) * -1); }
.w-zeile.leise { color: var(--a-text-leise); }
.d-notaus { position: fixed; left: 50%; top: calc(var(--a-titel-hoehe) + var(--a-abstand-2)); transform: translateX(-50%); z-index: 70; }
/* Titelleiste: ⚠ Melden; im übrigen App-Kopf kein zweites ⚠ */
.titel-melden svg { stroke: var(--a-warn); }
body.app .haupt-kopf .melden-knopf { display: none; }
.d-app .baum .b svg { width: var(--a-groesse-2); height: var(--a-groesse-2); flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--a-text-leise); }
.d-pfeil { width: var(--a-abstand-2); flex: none; color: var(--a-text-leise); font-size: var(--a-groesse-1); }
.d-recht[data-d-recht="gesperrt"] svg { color: var(--a-fehler); }
.d-app .baum .b .wer-agent { margin-left: auto; min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.d-klapp { cursor: pointer; border-radius: var(--a-radius-s); text-align: center; }
.d-klapp:hover { background: var(--a-flaeche-3); color: var(--a-text); }
.d-app[data-d-app="web"] .d-mitte { flex: 1; width: auto; } /* Web: nur Chats, Chat füllt */
[data-d-an-info] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* os-103: Arbeitsstil – Karte an der Antwort (Planer → Macher → Prüfer) und Rollen-Wahl am Projekt */
.rollen-karte { border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); background: var(--a-flaeche); padding: var(--a-abstand-2) var(--a-abstand-3); font-size: var(--a-groesse-2); }
.rollen-karte > summary { cursor: pointer; list-style: none; }
.rollen-karte > summary::-webkit-details-marker { display: none; }
.rollen-ampel { display: flex; align-items: center; gap: var(--a-abstand-2); flex-wrap: wrap; }
.rollen-station { display: inline-flex; align-items: center; gap: var(--a-abstand-1); }
.rollen-pfeil { color: var(--a-text-leise); }
.rollen-liste { list-style: none; margin: var(--a-abstand-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.rollen-zeile { display: flex; gap: var(--a-abstand-2); align-items: flex-start; }
.rollen-zeile > .punkt { margin-top: var(--a-abstand-1); flex: none; }
.rollen-zeile .haupt { display: flex; flex-direction: column; gap: var(--a-abstand-1); min-width: 0; overflow-wrap: anywhere; }
.rollen-zeile .titel { font-weight: var(--a-gewicht-fett); }
.rollen-fehler { margin: 0; padding-left: var(--a-abstand-4); color: var(--a-fehler); }
.rollen-details > summary { cursor: pointer; color: var(--a-text-leise); }
.rollen-wahl { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.rollen-reihe { display: flex; flex-direction: column; gap: var(--a-abstand-1); border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-2); }
.rollen-reihe .titel { font-weight: var(--a-gewicht-fett); }
.nachricht.meldung-zeile { align-self: stretch; }
.meldung-system { display: flex; flex-direction: column; gap: var(--a-abstand-1); border-left: var(--a-linie-dicke) solid var(--a-akzent); padding: var(--a-abstand-1) var(--a-abstand-3); font-size: var(--a-groesse-2); color: var(--a-text-leise); }
.d-bearbeiten { display: flex; flex-direction: column; gap: var(--a-abstand-2); height: 100%; }
.d-bearbeiter { flex: 1; min-height: calc(var(--a-abstand-4) * 20); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); resize: vertical; }
.meldung-schritt { font-size: var(--a-groesse-1); color: var(--a-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--a-abstand-3); }
.schritt-gruppe > summary { cursor: pointer; font-size: var(--a-groesse-1); color: var(--a-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--a-abstand-3); }
.meldung-mehr > summary { cursor: pointer; color: var(--a-akzent); }

/* os-einst: Seiten (Einstellungen, Konto, Meldungen, Geräte …) öffnen als Fenster über der App-Hülle */
.d-fenster-schleier { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--a-schleier); padding: var(--a-abstand-7); }
.d-fenster { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100%; overflow: hidden; background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); box-shadow: var(--a-schatten-2); }
.d-fenster .seite, .d-fenster .seite-einst { flex: 1; min-height: 0; }
.d-fenster-zu { position: absolute; top: var(--a-abstand-3); right: var(--a-abstand-3); z-index: 1; }
@media (max-width: 720px) { .d-fenster-schleier { padding: 0; } .d-fenster { border-radius: 0; height: 100%; } }

/* Eigenes Aufklapp-Menü (ersetzt nackte select in der Chat-Leiste): nur Tokens */
.auswahl-knopf { display: inline-flex; align-items: center; gap: var(--a-abstand-1); min-height: var(--a-feld-hoehe); max-width: 100%; padding: 0 var(--a-abstand-2); border: 0; border-radius: var(--a-radius-s); background: transparent; color: var(--a-text-leise); font: inherit; font-size: var(--a-groesse-1); cursor: pointer; }
.auswahl-knopf:hover, .auswahl-knopf:focus-visible, .auswahl-knopf[aria-expanded="true"] { background: var(--a-flaeche-2); color: var(--a-text); outline: none; }
.auswahl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-pfeil { flex: none; }
.auswahl-liste { position: fixed; z-index: 40; width: var(--a-karte-breite); max-width: calc(100vw - var(--a-abstand-4)); max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--a-abstand-2); padding: var(--a-abstand-2); border-radius: var(--a-radius-l); border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche); box-shadow: var(--a-schatten-2); }
.auswahl-gruppe { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.auswahl-gruppe-titel { font-size: var(--a-groesse-1); font-weight: var(--a-gewicht-fett); color: var(--a-text-leise); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--a-abstand-1) var(--a-abstand-2); }
.auswahl-eintrag { display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-3); width: 100%; min-height: var(--a-abstand-6); padding: var(--a-abstand-1) var(--a-abstand-3); border: 0; border-radius: var(--a-radius-m); background: none; color: var(--a-text); font: inherit; text-align: left; cursor: pointer; }
.auswahl-eintrag:hover:not(:disabled), .auswahl-eintrag:focus-visible { background: var(--a-flaeche-2); outline: none; }
.auswahl-eintrag.aktiv { background: var(--a-flaeche-3); }
.auswahl-eintrag:disabled { cursor: not-allowed; color: var(--a-text-leise); }
.auswahl-text { display: flex; flex-direction: column; min-width: 0; }
.auswahl-titel { font-size: var(--a-groesse-3); font-weight: var(--a-gewicht-mittel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-zeile { font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.auswahl-haken { flex: none; width: var(--a-abstand-4); text-align: center; color: var(--a-akzent); }
.auswahl-schleier { position: fixed; inset: 0; z-index: 39; background: var(--a-schleier); }
.auswahl-liste.blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 80vh; border-radius: var(--a-radius-xl) var(--a-radius-xl) 0 0; padding-bottom: max(var(--a-abstand-3), env(safe-area-inset-bottom)); }
@media (max-width: 720px) { .auswahl-eintrag { min-height: var(--a-feld-hoehe); } }