/* verwaltung.css · Verwaltung (Tenant-Rahmen), Design B "Morgenlicht" (GL-06). Werte nur über Tokens (marke.css, basis.css).
 * Keine Hex, Serif, Pillen, Dekor-Animationen; Karte = Haarlinie + Schatten 1; Zeilenzustand = getönte Fläche. Teile: partner*.css. */

/* --- Rahmen --- */
body { background: var(--tenant-grund); }

.rahmen { width: min(100%, var(--tenant-flaeche)); margin-inline: auto; }

/* --- Kopfzeile (kompakt, eine Haarlinie) --- */
.topbar {
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--marke-grund);
  border-bottom: var(--haarlinie);
}
.topbar .wortmarke { display: inline-flex; align-items: center; gap: var(--space-2); }
.wortmarke-zeichen { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; }
.topbar .wortmarke-text { display: block; overflow-wrap: anywhere; }
/* Gate B (Integrator): „Verwaltung“ unter dem Namen. Die Regel stand bisher in styles.css (`.wortmarke small`); GL-08 hat sie dort mit dem Einrichtungs-Kopf
   entfernt, die Verwaltung hing unbemerkt daran (Kopf: Name und Zusatz nebeneinander, Statuszeile überlagert, KOPF-Probe rot). Jetzt gehört sie dieser Datei. */
.wortmarke small { display: block; font-weight: 550; font-size: var(--text-caption); color: var(--marke-etikett); letter-spacing: 0; }   /* gleiche Spezifität wie die Telefon-Regel unten, die später steht und gewinnt */
@media (max-width: 34rem) {
  .wortmarke-zeichen { display: none; }   /* Kopf kompakt am Telefon (KOPF-Probe: Überschrift unter 220 px) */
}
.topbar .wortmarke { min-width: 0; max-width: 100%; }
@media (max-width: 12rem) { .topbar-rechts .status-chip { white-space: normal; } }
/* Lesebereich: höchstens 75 Zeichen je Zeile. */
.tafel p, .tafel li { max-width: min(100%, 46ch); }
/* Anmeldung: Klickzielgröße auch für den leisen Zweitweg. */
.tafel.einstieg .knopf { min-height: var(--klickziel); }

.popup-x-zeichen { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
.topbar-rechts { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.rahmen > .meldung { margin: var(--space-4) var(--space-5) 0; max-width: var(--satz); }

.rahmen > .systemzustand { margin: var(--space-3) var(--space-5) 0; }

/* --- Rahmenkörper: Seitenleiste + Arbeitsfläche --- */
.rahmen-koerper {
  display: grid;
  grid-template-columns: var(--tenant-leiste) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5) var(--space-12);
  align-items: start;
}
/* Vor der Anmeldung gibt es keine Bereiche und damit keine Leiste. */
.rahmen-koerper.ohne-leiste { grid-template-columns: minmax(0, 1fr); }

/* --- Seitenleiste --- */
.seitenleiste { position: sticky; top: var(--space-4); min-width: 0; }
.seitenleiste { --fokusring: var(--kohle); }
.leiste-liste { display: grid; gap: 2px; }

/* WELLE 12 / D22 §2.E5 — DREI GRUPPEN: Vertrieb · Inhalt · Betrieb. */
.leiste-gruppe { display: grid; gap: 2px; }
.leiste-gruppe + .leiste-gruppe { margin-top: var(--space-4); }
.leiste-gruppe-titel { margin: 0 0 var(--space-1); padding-inline: var(--space-3); }
/* Gruppentitel in Satzschreibung: hebt C-03 für diese Seite auf (281b-R1, APPLE-5, 317 D3b; Eintrag im ENTSCHEIDUNGS-LOG). */
.seitenleiste .leiste-gruppe-titel { text-transform: none; letter-spacing: normal; }

.reiter-zahl { color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 750; font-variant-numeric: tabular-nums; }
.reiter[aria-selected="true"] .reiter-zahl { color: var(--marke-aktion); }

.leiste-fuss {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-3) 0;
  border-top: var(--haarlinie);
  color: var(--marke-etikett); font-size: var(--text-caption);
}
.leiste-fuss:empty { display: none; }

/* --- Arbeitsfläche und Tafel --- */
.flaeche { min-width: 0; }
.tafel {
  container: tafel / inline-size;
  padding: var(--space-6) var(--space-6) var(--space-8);
  background: var(--marke-grund); border-radius: var(--r-2);
  /* Nachlauf C (A11 A-5, Punkt 10): die Tafel trägt keinen eigenen Rahmen mehr; ihre Karten und Kästen sind sonst Rahmen um Rahmen (gemessen: 5 in der Partner-Ansicht).
     Auf dem Handy war die Tafel schon randlos (Regel unten), jetzt gilt das in jeder Breite. */
  border: 0; box-shadow: none;
}
.tafel:focus-visible { outline-offset: -3px; }
.tafel > h1 { margin-top: 0; }
.tafel.einstieg { max-width: var(--satz); padding-block: var(--space-8) var(--space-10); }

.tafel-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}
.tafel-kopf > div:first-child { min-width: 0; flex: 1 1 24rem; }
.tafel-kopf h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--tenant-titel); line-height: 1.2; letter-spacing: -.02em;
}
.tafel-kopf .fuehrung { max-width: var(--satz); margin: 0; color: var(--marke-etikett); font-size: var(--text-control); }
.ton-stark { color: var(--marke-tinte); font-weight: 700; }
.tafel-kopf .knopfreihe { margin-top: 0; }

.tafel > .meldung, .tafel > .leerzustand, .tafel > .hinweiszeile, .tafel > form,
.tafel > .fuehrung, .tafel > .hilfe { max-width: var(--satz); }
.tafel > .abschnitt { max-width: var(--satz); }

/* --- Kennzahlenleiste --- */
.kennzahlen {
  margin: var(--space-6) 0 0; padding: var(--space-4) 0;
  border-top: var(--haarlinie); border-bottom: var(--haarlinie);
  display: flex; flex-wrap: wrap; gap: var(--space-4) 0;
}
.kennzahl { flex: 1 1 9rem; min-width: 0; padding-inline: var(--space-5); }
.kennzahl:first-child { padding-left: 0; }
.kennzahl + .kennzahl { border-left: 1px solid var(--trennlinie-fein); }
.kennzahl dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-kennzahl); font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kennzahl dd small { display: block; font-size: var(--text-caption); font-weight: 650; letter-spacing: 0; color: var(--marke-etikett); }

.kennzahlen[data-zustand="laedt"] .kennzahl dd {
  color: transparent; background: var(--marke-flaeche-stark); border-radius: var(--r-1);
  width: 3.5rem; max-width: 60%;
}
.kennzahlen[data-zustand="laedt"] .kennzahl dd small { visibility: hidden; }
.kennzahlen[data-zustand="leer"] .kennzahl dd,
.kennzahlen[data-zustand="fehler"] .kennzahl dd { color: var(--marke-etikett); }

/* --- Filterzeile (unmittelbar über der Liste) --- */
.filterzeile {
  margin: var(--space-5) 0 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4);
}
.filterzeile .feld { margin-bottom: 0; flex: 1 1 17rem; min-width: min(100%, 17rem); }
.filterzeile .feld { max-width: 22rem; }
.filterzeile .feld.schmal { flex: 0 1 13rem; min-width: 0; }
.filterzeile .knopfreihe { margin-top: 0; }
.filterzeile .treffer { margin: 0 0 var(--space-3); margin-left: auto; color: var(--marke-etikett); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }

/* --- Arbeitsfläche: Liste links, Schublade rechts --- */
.arbeitsflaeche {
  margin-top: var(--space-5);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--tenant-schublade);
  gap: var(--space-6); align-items: start;
}
.arbeitsflaeche.ohne-schublade { grid-template-columns: minmax(0, 1fr); }
.tabellenfeld { min-width: 0; overflow-x: auto; }

/* --- Datentabelle --- */
.datentabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-control); }
.datentabelle th, .datentabelle td { padding: .75rem .5rem; text-align: left; vertical-align: top; }
.datentabelle thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--marke-grund);
  border-bottom: 1px solid var(--marke-steuerung);
  color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 750; white-space: nowrap;
}
.datentabelle tbody td, .datentabelle tbody th { border-bottom: 1px solid var(--trennlinie-fein); }
.datentabelle tbody tr:hover { background: var(--marke-flaeche); }
.datentabelle .zahl { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.datentabelle .spalte-zustand { width: 9rem; }
.datentabelle .rang { width: 3.5rem; color: var(--marke-etikett); font-variant-numeric: tabular-nums; }
.datentabelle .spalte-name { width: 46%; }
.datentabelle .aktionen { width: 8rem; white-space: nowrap; }
.datentabelle .aktionen .zeilenaktionen { flex-wrap: nowrap; }
.datentabelle .name { font-weight: 750; }
.datentabelle .zweitzeile {
  margin: var(--space-1) 0 0; max-width: none; color: var(--marke-etikett); font-size: var(--text-caption);
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* Die Zeile, die gerade in der Schublade liegt. */
.datentabelle tr[data-bearbeitet="true"] > td { background: var(--glasur-hauch); }

.zeilenaktionen { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }
.rang-inhalt { display: grid; justify-items: center; gap: 2px; }
.reihenfolge-knoepfe { display: flex; gap: 2px; }
.rang .reihenfolge-knoepfe { flex-direction: column; }
/* B5: Hausgröße 32 px für Zeichenknöpfe. */
.knopf.ikon { flex: 0 0 auto; min-height: 32px; width: 32px; padding: 0; }
.knopf.ikon svg { width: 12px; height: 12px; fill: currentColor; }
.rang .knopf.ikon { min-height: 22px; width: 22px; }
.rang .knopf.ikon svg { width: 9px; height: 9px; }

/* --- Schublade --- */
.schublade {
  position: sticky; top: var(--space-4);
  padding: var(--space-5);
  background: var(--marke-flaeche); border-radius: var(--r-2);
  border: var(--haarlinie); box-shadow: var(--schatten-1);
}
.schublade { --fokusring: var(--kohle); }
.schublade-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.schublade-kopf h2 { margin: 0; }
.schublade-kopf .kontext { margin-bottom: 0; font-size: var(--text-control); }
.schublade-kopf .zeilenbezug { margin: var(--space-1) 0 0; color: var(--marke-etikett); font-size: var(--text-caption); }
.schublade form { margin-top: var(--space-5); }
.schublade .knopfreihe { margin-top: var(--space-5); }
.schublade .knopfreihe .luecke { margin-left: auto; }
.schublade details.rohfelder { background: var(--marke-grund); }
.schublade textarea.prompttext { min-height: 17.5rem; }

textarea.prompttext {
  min-height: 10rem;
  font-family: var(--schrift); font-size: var(--text-prose); line-height: 1.65;
}

.feld .hilfe.vor-feld { margin: 0 0 var(--space-2); }

details.rohfelder > summary { display: list-item; list-style-position: inside; align-items: initial; }
details.rohfelder > summary { list-style: none; }
details.rohfelder > summary::before { margin-inline-end: var(--space-2); }

.zaehlerzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.zeichenzaehler {
  color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.zeichenzaehler[data-zustand="knapp"] { color: var(--marke-warnung); }
.zeichenzaehler[data-zustand="ueber"] { color: var(--marke-fehler); font-weight: 800; }

/* G4: die Einbaustelle im Systemprompt, auf Abruf. */
.promptprobe {
  margin: 0; max-width: none; padding: var(--space-3) var(--space-4);
  border: var(--haarlinie); border-radius: var(--r-1); background: var(--marke-grund);
  font-family: var(--marke-schrift-mono);
  font-size: var(--text-caption); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.promptprobe .eingesetzt { background: var(--marke-warnung-flaeche); color: var(--marke-warnung); font-weight: 700; }
.leiser-hinweis { margin: var(--space-2) 0 0; max-width: none; color: var(--marke-etikett); font-size: var(--text-caption); }

.diff-ansicht { margin-top: var(--space-4); }
.diff-ansicht h4 { margin: 0 0 var(--space-2); font-size: var(--text-control); }
.diff-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (max-width: 640px) { .diff-spalten { grid-template-columns: 1fr; } }
.diff-spaltentitel { margin: 0 0 var(--space-1); color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700; }
.diff-block {
  margin: 0; max-width: none; padding: var(--space-3) var(--space-4);
  border: var(--haarlinie); border-radius: var(--r-1); background: var(--marke-grund);
  font-family: var(--marke-schrift-mono); font-size: var(--text-caption); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow-y: auto;
}
.diff-zeile-entfernt { display: block; background: var(--marke-fehler-flaeche); color: var(--marke-fehler); text-decoration: line-through; }
.diff-zeile-hinzugefuegt { display: block; background: var(--marke-erfolg-flaeche); color: var(--marke-erfolg); }
.diff-zeile-gleich { display: block; }

#systemprompts-tabelle .name {
  display: block; overflow: visible; white-space: normal; max-width: 100%;
  overflow-wrap: break-word; hyphens: manual;
}
#systemprompts-tabelle .zweitzeile { white-space: normal; overflow-wrap: break-word; text-overflow: clip; }
#systemprompts-tabelle .spalte-name { width: auto; }
#systemprompts-tabelle th:nth-child(2), #systemprompts-tabelle td:nth-child(2) { width: 13%; }
#systemprompts-tabelle th:nth-child(3), #systemprompts-tabelle td:nth-child(3) { width: 16%; }
#systemprompts-tabelle th:nth-child(5), #systemprompts-tabelle td:nth-child(5) { width: 14%; }
@container tafel (min-width: 64rem) {
  #systemprompts-tabelle th:nth-child(2), #systemprompts-tabelle td:nth-child(2) { width: 8rem; }
  #systemprompts-tabelle th:nth-child(3), #systemprompts-tabelle td:nth-child(3) { width: 10rem; }
  #systemprompts-tabelle th:nth-child(5), #systemprompts-tabelle td:nth-child(5) { width: 12rem; }
}

/* --- Hinweiszeile unter einer Liste --- */
.hinweiszeile { margin: var(--space-4) 0 0; color: var(--marke-etikett); font-size: var(--text-caption); }
/* NACHZUG W2b: der Ausgleich stand hier als literale `.78rem`. */
.hinweiszeile code { font-weight: 600; }   /* NC-6 (A11 Punkt 8): Normalschrift; Schreibmaschinenschrift nur an den benannten Stellen der Muster-Checkliste */

/* --- Zeichen in Meldungen --- */
.zeichen { flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.12em; margin-right: var(--space-2); }

/* --- Rückmeldung (Toast) --- */
.toast {
  position: fixed; z-index: 20;
  left: var(--space-5); bottom: var(--space-5);
  width: min(24rem, calc(100% - var(--space-8)));
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--marke-tinte); color: var(--marke-knopf-schrift); border-radius: var(--r-1);
  font-size: var(--text-control);
  box-shadow: var(--schatten-1);
}
.toast p { margin: 0; max-width: none; }
.toast strong { display: block; font-weight: 750; }
.toast .toast-text { flex: 1 1 auto; min-width: 0; }
.toast .knopf.leise { color: var(--marke-knopf-schrift); border-color: color-mix(in srgb, var(--marke-knopf-schrift) 35%, transparent); }
.toast .knopf.leise:hover { background: color-mix(in srgb, var(--marke-knopf-schrift) 15%, transparent); color: var(--marke-knopf-schrift); }
.toast { --fokusring: var(--marke-knopf-schrift); }

/* --- Bestätigungsdialog --- */
dialog.bestaetigung {
  width: min(30rem, calc(100% - var(--space-8))); padding: var(--space-5);
  border-radius: var(--r-3); color: var(--marke-tinte);   /* NZ-01: Glas, Rand und Schatten aus `dialog` (styles.css) */
}
dialog.bestaetigung h2 { margin-bottom: var(--space-2); }
dialog.bestaetigung p { margin: 0; color: var(--marke-etikett); font-size: var(--text-control); }
dialog.bestaetigung .knopfreihe { margin-top: var(--space-5); }

.rohfelder-inhalt > .feldfehler {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--marke-fehler); font-size: var(--text-caption); font-weight: 700;
}

/* --- Standleiste (Kennzahlen und Zustände) --- */
.standleiste {
  margin: var(--space-4) 0 var(--space-6); padding: var(--space-4) 0 0;
  border-top: var(--haarlinie);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
}
.standleiste > div { min-width: 0; }
.standleiste dt {
  color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.standleiste dd { margin: var(--space-1) 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#deckel-verbraucht, #deckel-wert, #deckel-rest, .deckel-aufbau-liste dd { white-space: nowrap; overflow-wrap: normal; }

.kontrollkaestchen-zeile { display: inline-flex; align-items: center; gap: var(--space-2); }

.zeile-aktionen { display: inline-flex; align-items: center; gap: var(--space-2); }
.mehr-huelle { position: relative; display: inline-flex; flex: 0 0 auto; }
.zeile-titel, .zeile-unter { max-width: none; }

/* --- Kartenliste (Partner-Admins, Guthaben-Anfragen) --- */
.kartenliste { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.karte {
  padding: var(--space-4) var(--space-5);
  border: var(--haarlinie); border-radius: var(--r-2); background: var(--marke-flaeche);
  box-shadow: var(--schatten-1);
}
.karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.karte-name { font-weight: 750; }
.karte-zeile { margin: var(--space-1) 0 0; color: var(--marke-etikett); font-size: var(--text-control); overflow-wrap: anywhere; }
.karte .knopfreihe { margin-top: var(--space-3); gap: var(--space-2); }

.knopf.gefahr { color: var(--marke-fehler); }
.knopf.gefahr:hover:not(:disabled) { background: var(--marke-fehler-flaeche); border-color: var(--marke-fehler); }
.knopf.gefahr[data-bestaetigt="true"] { background: var(--marke-fehler-flaeche); border-color: var(--marke-fehler); color: var(--marke-fehler); }

/* --- Zeilenliste (Richtung B) --- */
.zeilenliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.zeilenliste > .zeilenblock { min-width: 0; padding: var(--zeile-py) 0; border-top: 1px solid var(--trennlinie-fein); }
.zeilenliste > .zeilenblock:first-child { border-top: 0; }
.zeile-titel .status-chip { margin-left: var(--space-2); }
.zeilenliste .unterliste {
  min-width: 0; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-4);
  border-left: var(--haarlinie);
}
.zeilenliste .adminblock { min-width: 0; padding: var(--space-2) 0; }
.zeilenliste .adminblock + .adminblock { border-top: 1px solid var(--trennlinie-fein); }
.zeilenliste .adminblock .zeile-titel { font-size: var(--text-control); font-weight: 700; }
.zeilenliste .knopfreihe { margin-top: var(--space-2); gap: var(--space-2); }

/* --- Demo-Sicht (F-02) --- */
.demo-zeile {
  margin: var(--space-4) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  color: var(--marke-etikett); font-size: var(--text-caption);
}
.demo-zeile .trenner { color: var(--marke-steuerung); }
.demo-zeile .trenner { display: none; }

/* --- Kleine Flächen in einer Partnerkarte --- */
.karte > .markenfeld, .karte .anfragefeld { margin: var(--space-3) 0 0; }
.karte > .markenfeld .knopfreihe, .karte .anfragefeld .knopfreihe { margin-top: var(--space-2); }

/* --- Partnervereinbarung und Armwechsel --- */
.vereinbarungstext {
  margin: 0; max-width: var(--satz);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-control);
}
.armwechsel {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: var(--haarlinie);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
}

/* --- Codeanzeige --- */
/* Der Einladungscode wird abgetippt und am Telefon vorgelesen. */
.codeblock {
  margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--marke-erfolg-flaeche); border-radius: var(--r-2);
  background: var(--marke-erfolg-flaeche);
}
.codeblock .marke { display: block; color: var(--marke-erfolg); font-size: var(--text-caption); font-weight: 800; }
.code {
  display: block; margin: var(--space-2) 0 0;
  font-family: var(--marke-schrift-mono);
  font-size: var(--text-code); font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.codeblock .link { display: block; margin: var(--space-2) 0 0; font-size: var(--text-caption); overflow-wrap: anywhere; }

/* --- Protokoll --- */
.protokollliste { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.protokollliste li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--trennlinie-fein); }
.protokollliste li:first-child { border-top: 0; }
.protokollliste .zeit { flex: 0 0 11rem; color: var(--marke-etikett); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.protokollliste .was { flex: 1 1 14rem; font-weight: 650; }
.protokollliste .detail { flex: 1 1 100%; color: var(--marke-etikett); font-size: var(--text-caption); overflow-wrap: anywhere; }
.protokollliste .was { min-width: 0; overflow-wrap: anywhere; }
.protokollliste .rohcode { flex: 1 1 100%; min-width: 0; color: var(--marke-etikett); font-size: var(--text-caption); }
.protokollliste .rohcode summary { cursor: pointer; width: fit-content; }
.protokollliste .rohcode code { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; }

.kontext { font-family: var(--marke-schrift-text); font-weight: 500; line-height: 1.4; }
.tafel.einstieg .kontext { margin: 0 0 var(--space-2); font-size: var(--text-control); }
.tafel.einstieg > h1 {
  font-family: var(--schrift); font-size: 1.75rem; font-weight: 600; line-height: 1.12;
  letter-spacing: -0.018em; text-wrap: balance;
}
@media (min-width: 48rem) {
  .tafel.einstieg > h1 { font-size: 2.125rem; }
}

/* --- Leerzustand --- */
.leerzustand {
  margin: var(--space-5) 0 0; padding: var(--space-5);
  border: 1px dashed var(--marke-steuerung); border-radius: var(--r-2);
  background: var(--marke-flaeche); color: var(--marke-etikett);
}
.leerzustand p { max-width: none; }

/* --- Textfelder und Dialog --- */
textarea {
  width: 100%; min-height: 5rem; padding: var(--space-3);
  border: 1px solid var(--marke-steuerung); border-radius: var(--r-2);
  background: var(--marke-grund); resize: vertical;
}
textarea:focus { border-color: var(--kohle); }
textarea[aria-invalid="true"] { border-color: var(--marke-fehler); }
#text-dialog-text {
  min-height: 18rem;
  font-family: var(--schrift);   /* NC-6 (A11 Punkt 8): Mailtext, kein Code */
  font-size: var(--text-prose); line-height: 1.65;
}

.nur-fuer-lesegeraete {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Partner (Welle 6, LE-108) --- */
.schrittleiste.fortschritt {
  list-style: none; margin: var(--space-8) auto var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
}
.schrittleiste.fortschritt li {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700;
}
.schrittleiste.fortschritt .nummer {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  border: var(--haarlinie); border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-caption); font-weight: 800;
}
.schrittleiste.fortschritt li[data-zustand="erledigt"] { color: var(--marke-erfolg); }
.schrittleiste.fortschritt li[data-zustand="erledigt"] .nummer {
  background: var(--marke-erfolg-flaeche); border-color: var(--marke-erfolg-flaeche); color: var(--marke-erfolg);
}
.schublade .schrittleiste.fortschritt {
  margin: var(--space-3) 0 0;
  gap: var(--space-1) var(--space-4);
}
.schrittleiste.fortschritt li { align-items: baseline; }
.schrittleiste.fortschritt .schritt-titel { font-weight: 700; }
.schrittleiste.fortschritt .schritt-am { color: var(--marke-etikett); font-weight: 550; font-variant-numeric: tabular-nums; }
.schrittleiste.fortschritt li[data-zustand="offen"] { color: var(--marke-etikett); }
.schrittleiste.fortschritt li[data-zustand="offen"] .nummer { border-style: dashed; }

.guthabenblock { margin-top: var(--space-3); }
.guthaben-balken {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; max-width: 28rem; height: 10px; border: 0;
  border-radius: var(--r-pille); background: var(--marke-flaeche-stark); color: var(--marke-aktion);
}
.guthaben-balken::-webkit-progress-bar { background: var(--marke-flaeche-stark); border-radius: var(--r-pille); }
.guthaben-balken::-webkit-progress-value { background: var(--marke-aktion); border-radius: var(--r-pille); }
.guthaben-balken::-moz-progress-bar { background: var(--marke-aktion); border-radius: var(--r-pille); }
.guthaben-balken[data-tone="warning"] { color: var(--marke-warnung); }
.guthaben-balken[data-tone="warning"]::-webkit-progress-value { background: var(--marke-warnung); }
.guthaben-balken[data-tone="warning"]::-moz-progress-bar { background: var(--marke-warnung); }
.guthaben-balken[data-tone="danger"] { color: var(--marke-fehler); }
.guthaben-balken[data-tone="danger"]::-webkit-progress-value { background: var(--marke-fehler); }
.guthaben-balken[data-tone="danger"]::-moz-progress-bar { background: var(--marke-fehler); }
.guthaben-zeile { font-variant-numeric: tabular-nums; }

.partner-raster {
  margin-top: var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6); align-items: start;
}
.partner-listenspalte { min-width: 0; container: partnerliste / inline-size; }
/* Die Schublade läuft neben der Liste mit (sticky), ohne eigenen Deckel. */
.partner-raster > .schublade { position: sticky; top: var(--space-4); max-width: none; }
.partner-raster > .schublade .kontext { margin-bottom: 0; font-size: var(--text-control); }
#partner-schublade-felder { margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
#partner-schublade-felder dt { color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700; }
#partner-schublade-felder dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
#partner-schublade-zustand { margin: var(--space-3) 0 0; }
#partner-schublade-koerper > .knopfreihe { margin-top: var(--space-5); }

#partner-tabellenfeld { position: relative; }
#partnertabelle .spalte-stand { width: 11rem; }
@container partnerliste (min-width: 44rem) { #partnertabelle .spalte-stand { width: 13rem; } }
@container partnerliste (min-width: 70rem) { #partnertabelle .spalte-stand { width: 18rem; } }
#partnertabelle .spalte-name { width: auto; } /* hebt die 46 % der Bestandsregel `.datentabelle .spalte-name` auf */
#partnertabelle .zahl { width: 6rem; }
#partnertabelle .spalte-postfach { width: 6.5rem; }
#partnertabelle .aktionen { width: 6rem; text-align: right; }
#partnertabelle tbody th[scope="row"] { font-weight: 750; }
/* Hoechstens zwei Zeilen Name. */
#partnertabelle .name-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
#partnertabelle .status-chip { white-space: normal; padding-inline: var(--space-2); }
#partnertabelle td .knopf { padding-inline: var(--space-2); }
#partnertabelle tbody tr { cursor: pointer; }
#partnertabelle tbody tr[aria-selected="true"] > * { background: var(--glasur-hauch); }
#partnertabelle tbody tr[aria-selected="true"] > :first-child { font-weight: 800; }
.standzelle { display: flex; flex-wrap: wrap; gap: var(--space-1); }

@container partnerliste (max-width: 48rem) {
  #partnertabelle .spalte-postfach { display: none; }
}

.schublade > .markenfeld, .schublade .anfragefeld { margin: var(--space-4) 0 0; }
.schublade > .markenfeld .knopfreihe, .schublade .anfragefeld .knopfreihe { margin-top: var(--space-2); }

/* --- Guthabendialog --- */
.betragswahl { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.betragswahl legend { padding: 0; font-size: var(--text-control); font-weight: 750; }
.betragswahl .knopfreihe { margin-top: var(--space-2); }
.betragswahl .feld { margin-top: var(--space-3); margin-bottom: 0; }
.betragswahl input[type="number"] { max-width: 12rem; }
#formular-guthaben .feldfehler { margin: var(--space-1) 0 0; color: var(--marke-fehler); font-size: var(--text-caption); font-weight: 700; }
#guthaben-dialog textarea { min-height: 5rem; }

/* --- Umbruch 1: die Schublade rutscht unter die Liste (Tafel ≤ 54rem) --- */
@container tafel (max-width: 54rem) {
  .arbeitsflaeche, .partner-raster { grid-template-columns: minmax(0, 1fr); }
  .schublade, .partner-raster > .schublade { position: static; max-width: var(--satz); }
}

/* WELLE B / B1b (Bericht 346, Bauplan 331 §2 B1b, APPLE-6 aus 284a) — NACHFOLGE DES SCROLLSTREIFENS: feste Reiterleiste, nichts rollt. */
/* --- Umbruch 2: die Seitenleiste wird Reiterleiste AM UNTEREN RAND (≤ 34rem, `--umschalt-schmal`) --- */
@media (max-width: 34rem) {
  html { --leiste-unten: calc(3 * var(--klickziel) + 2 * 2px + 2 * var(--space-1) + 2px + var(--space-2)); }
  html:not(:has(#bereichsleiste[data-gedreht="true"])) { --leiste-unten: calc(3.25rem + 2 * var(--space-1) + 2px + var(--space-2)); }
  html:has(#bereichsleiste[hidden]) { --leiste-unten: 0px; }
  html { scroll-padding-bottom: calc(var(--leiste-unten) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .rahmen-koerper {
    grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-inline: var(--space-4);
    padding-bottom: calc(var(--leiste-unten) + var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
  .rahmen > .meldung { margin-inline: var(--space-4); }
  .seitenleiste { position: static; }
  .leiste-fuss { margin: 0; padding: 0 var(--space-1); border-top: 0; }
  .tafel { padding: var(--space-5) var(--space-4) var(--space-6); }

  .leiste-buehne {
    position: fixed; inset-inline: max(var(--space-2), env(safe-area-inset-left, 0px)); top: auto; bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-nav);
    padding: var(--space-1) var(--space-3); border: var(--haarlinie); border-radius: var(--r-pille); box-shadow: var(--schatten-2);
    background: var(--leinen);   /* NZ-01: Insel (8 px zum Rand), deckend, kein Glas (3o I-17) */
    overflow-x: clip;
  }
  #bereichsleiste[data-gedreht="true"] .leiste-buehne { border-radius: var(--r-3); }
  #bereichsleiste-liste {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr); gap: 0;
  }
  @media (max-width: 22rem) { html #bereichsleiste-liste .reiter, html #bereichsleiste-liste .reiter .wort { font-size: .75rem; } }
  /* WELLE 12 / D22 §2.E5: als Leiste gibt es KEINE Gruppen. */
  .leiste-gruppe { display: contents; }
  .leiste-gruppe-titel { display: none; }
  #bereichsleiste-liste .reiter {
    position: relative;
    flex-direction: column; justify-content: center; gap: 2px;
    width: 100%; min-height: 3.25rem; padding: var(--space-1) 1px;
    font-size: var(--text-caption); font-weight: 500; line-height: 1.15; text-align: center; letter-spacing: -.005em;
  }
  #bereichsleiste-liste .reiter[aria-selected="true"] { font-weight: 600; }
  #bereichsleiste-liste .reiter .ikon { width: 1.375rem; height: 1.375rem; }
  #bereichsleiste-liste .reiter .wort {
    flex: none; max-width: 100%; -webkit-hyphens: none; hyphens: none; overflow-wrap: normal;
  }
  #bereichsleiste-liste .reiter .reiter-kurz { display: block; }
  #bereichsleiste-liste .reiter { padding-inline: 3px; border-radius: var(--r-pille); }
  #bereichsleiste-liste .reiter .wort { letter-spacing: -.04em; }
  #bereichsleiste-liste .reiter:has(.reiter-kurz) .reiter-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    font-size: 0; line-height: 0;  }
  #bereichsleiste-liste .reiter-zahl { display: none; }
}

/* --- Umbruch 3: die Tabelle verliert ihre Spalten (≤ 52rem) --- */
@media (max-width: 52rem) {
  .kennzahl { flex: 1 1 100%; padding-inline: 0; }
  .kennzahl + .kennzahl { border-left: 0; border-top: var(--haarlinie); padding-top: var(--space-3); }
  .filterzeile .feld, .filterzeile .feld.schmal { flex: 1 1 100%; }
  .filterzeile .treffer { margin-left: 0; }
  .tabellenfeld { overflow-x: visible; }
  .datentabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .datentabelle tbody tr {
    display: block; margin-bottom: var(--space-3); padding: var(--space-3) 0 var(--space-2);
    border-bottom: var(--haarlinie);
  }
  .datentabelle tbody tr:hover { background: transparent; }
  .datentabelle tbody td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 0; }
  .datentabelle tbody td::before {
    content: attr(data-spalte);
    color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700;
  }
  .datentabelle .zahl, .datentabelle .rang { text-align: left; width: auto; }
  .datentabelle .aktionen { width: auto; white-space: normal; }
  .datentabelle .aktionen .zeilenaktionen { flex-wrap: wrap; }
  .rang-inhalt { display: flex; align-items: center; gap: var(--space-3); }
  .rang .reihenfolge-knoepfe { flex-direction: row; gap: var(--space-2); }
  .rang .knopf.ikon { min-height: 40px; width: 40px; }
  .datentabelle tr[data-bearbeitet="true"] > td { background: transparent; }
  .datentabelle tr[data-bearbeitet="true"] { background: var(--glasur-hauch); padding-inline: var(--space-3); border-radius: var(--r-1); }
  .zeilenaktionen { justify-content: flex-start; }
  .zeilenaktionen .knopf { flex: 0 0 auto; }
  .toast { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); width: auto; }
  .schublade { padding: var(--space-4); }
  .schublade .knopfreihe .knopf { flex: 1 1 100%; }
  .schublade .knopfreihe .luecke { margin-left: 0; }
  .schublade .knopfreihe .knopf.ikon { flex: 0 0 auto; }
  /* D3a (B2): die Partnertabelle folgt derselben Blockform. */
  .datentabelle tbody th[scope="row"] { display: block; padding: var(--space-1) 0; border-bottom: 0; }
  #partnertabelle .spalte-stand, #partnertabelle .zahl, #partnertabelle .spalte-postfach, #partnertabelle .aktionen { width: auto; }
  #partnertabelle td.aktionen { display: block; text-align: left; padding-top: var(--space-2); }
  #partnertabelle td.aktionen::before { content: none; }
  #partnertabelle tbody tr[aria-selected="true"] { background: var(--glasur-hauch); padding-inline: var(--space-3); border-radius: var(--r-1); }
  #partnertabelle tbody tr[aria-selected="true"] > * { background: transparent; }
}

/* --- Schmales Fenster (Mobil, 375 px) --- */
@media (max-width: 34rem) {
  .topbar { padding-inline: var(--space-4); }
  .standleiste { gap: var(--space-3); }
  .standleiste > div { flex: 1 1 100%; }
  .karte .knopfreihe .knopf { width: 100%; }
  .protokollliste .zeit { flex: 1 1 100%; }
  .code { letter-spacing: .08em; }
  .filterzeile .knopfreihe .knopf { width: 100%; }
  .schrittleiste.fortschritt li { flex: 1 1 100%; }
  .betragswahl input[type="number"] { max-width: none; }
  .knopfreihe .knopf.ikon { width: 32px; }
  .schublade-kopf .knopf.ikon { width: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reiter {
    transition: background-color var(--dauer-hover) var(--kurve-ein),
                color var(--dauer-hover) var(--kurve-ein);
  }
}

/* Die Leiste traegt im Einrichtungsweg `--space-8` nach oben. */
.abschnitt > .schrittleiste.fortschritt {
  margin: var(--space-3) 0 var(--space-4);
  gap: var(--space-1) var(--space-4);
}

/* Die sechs Schritte der Anleitung. */
.anleitungsschritte {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-control);
}
.anleitungsschritte li { padding-left: var(--space-1); }

.telegram-schritt3 {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--haarlinie);
}
.telegram-schritt3 h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-control);
  font-weight: 700;
}
.telegram-schritt3 .knopfreihe { margin-top: var(--space-3); }

.telegram-warten {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--marke-flaeche);
  border-radius: var(--r-2);
  font-size: var(--text-control);
}
.telegram-warten > p { margin: 0; }
.telegram-warten > .hilfe { margin-top: var(--space-2); font-variant-numeric: tabular-nums; }

.telegram-fund {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--marke-erfolg-flaeche);
  border-radius: var(--r-2);
  font-size: var(--text-control);
}
.telegram-fund > p { margin: 0; font-weight: 650; }
.telegram-fund .knopfreihe { margin-top: var(--space-3); }

#telegram-bot-beleg { margin-top: var(--space-2); }

.partner-raster:has(> #partner-schublade[hidden]) { grid-template-columns: minmax(0, 1fr); }
.partner-raster:has(> #partner-schublade[hidden]) > #partner-schublade-leer {
  position: static; padding: 0; background: none;
  color: var(--marke-etikett); font-size: var(--text-control);
}
.partner-raster:has(> #partner-schublade[hidden]) > #partner-schublade-leer > .kontext { display: none; }
.partner-raster:has(> #partner-schublade[hidden]) > #partner-schublade-leer > p { margin: 0; }

/* --- B-32: die Schublade in Gruppen, die Gefahrenzone abgesetzt --- */
.schublade-gruppe {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--trennlinie-fein);
}
/* `h3` ist im Hausstil ein Versal-Etikett in Grau. */
.schublade-gruppe > h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body); font-weight: 650; letter-spacing: -.005em;
  text-transform: none; color: var(--marke-tinte);
}
.schublade-gruppe .knopfreihe { margin-top: var(--space-3); gap: var(--space-2); }
.schublade-gruppe .knopfreihe .knopf { flex: 1 1 11rem; }
.schublade-gruppe .feld { margin: var(--space-4) 0 0; }
.schublade-gruppe .feld:first-of-type { margin-top: 0; }
.schublade-gruppe > .feld + .knopfreihe { margin-top: var(--space-2); }
.schublade-gruppe .markenfeld .knopfreihe,
.schublade-gruppe .chatdeckelfeld .knopfreihe { margin-top: var(--space-2); }
.chatdeckelfeld input[type="number"] { max-width: 12rem; font-variant-numeric: tabular-nums; }
.schublade-gruppe.gefahrenzone {
  margin-top: var(--space-10); padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--marke-fehler) 55%, transparent);
  border-radius: var(--r-1);
}
.schublade-gruppe.gefahrenzone > h3 { color: var(--marke-fehler); }
.schublade-gruppe.gefahrenzone > .hilfe { margin: 0; color: var(--marke-etikett); font-size: var(--text-caption); }

/* --- B-33: die Telegram-Schrittfolge als echte Schritte --- */
.abschnitt > .schrittleiste.schrittfolge {
  margin: var(--space-4) 0 var(--space-5); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
}
.schrittleiste.schrittfolge li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--r-1);
  border: var(--haarlinie);
  color: var(--marke-tinte); font-size: var(--text-control); font-weight: 400;
}
.schrittleiste.schrittfolge .nummer {
  width: 2rem; height: 2rem; font-size: var(--text-control); font-weight: 700;
  border: 1px solid var(--marke-steuerung);
}
.schrittleiste.schrittfolge .schritt-text { display: grid; min-width: 0; }
.schrittleiste.schrittfolge .schritt-titel { font-weight: 650; }
.schrittleiste.schrittfolge .schritt-stand { color: var(--marke-etikett); font-size: var(--text-caption); }
.schrittleiste.schrittfolge li[data-zustand="offen"] { color: var(--marke-etikett); }
.schrittleiste.schrittfolge li[data-zustand="offen"] .nummer { border-style: dashed; }
.schrittleiste.schrittfolge li[data-zustand="jetzt"] { border-color: var(--marke-aktion); background: var(--glasur-hauch); }
.schrittleiste.schrittfolge li[data-zustand="jetzt"] .nummer { background: var(--marke-aktion); border-color: var(--marke-aktion); color: var(--marke-knopf-schrift); }
.schrittleiste.schrittfolge li[data-zustand="jetzt"] .schritt-stand { color: var(--marke-aktion); font-weight: 650; }
.schrittleiste.schrittfolge li[data-zustand="erledigt"] { color: var(--marke-tinte); }
.schrittleiste.schrittfolge li[data-zustand="erledigt"] .schritt-stand { color: var(--marke-erfolg); font-weight: 650; }
.schritt-kopf, .telegram-schritt3 h3 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-body); font-weight: 650; text-transform: none; letter-spacing: -.005em; color: var(--marke-tinte);
}
details.technik { margin-top: var(--space-3); }
details.technik > summary { font-size: var(--text-caption); color: var(--marke-etikett); }

/* --- B-4/B-21: der Zustand der PIN-Tür als Satz --- */
.pin-lage { margin: 0 0 var(--space-5); }

@media (max-width: 34rem) {
  .toast { bottom: calc(var(--leiste-unten, 0px) + var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .abschnitt > .schrittleiste.schrittfolge { grid-template-columns: minmax(0, 1fr); }
  .schublade-gruppe .knopfreihe .knopf { flex-basis: 100%; }
}

#tafel-einstellungen > .unterseite > .abschnitt { padding-block: var(--space-8); }
#tafel-einstellungen > .unterseite > .abschnitt > h2,
#tafel-partner > .abschnitt > h2 {
  font-size: 1.25rem; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance;
}

.reiter .reiter-kurz { display: none; }
#reiter-einstellungen:not([aria-selected="true"]) .reiter-unter { display: none; }
#reiter-einstellungen { flex-wrap: wrap; align-content: center; row-gap: 0; }
.reiter-unter {
  flex: 1 0 100%; padding: 0 0 var(--space-1) calc(1.125rem + var(--space-3)); margin-top: -.2rem;
  color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 500; line-height: 1.3;
}
.reiter[aria-selected="true"] .reiter-unter { color: var(--marke-aktion); }

.tafel > .unterseite > .abschnitt { max-width: var(--satz); }
.tafel > .unterseite > #systemprompts-abschnitt { max-width: none; }
#systemprompts-abschnitt > :not(.tabellenfeld) { max-width: var(--satz); }

@media (max-width: 34rem) {
  #reiter-einstellungen { flex-wrap: nowrap; }
  .reiter-unter {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

.nutzung-feld {
  position: relative; /* Bezug für `.nur-vorlesen` (Falle bei `.tabelle-rahmen`) */
  margin-top: var(--space-4); container: nutzung / inline-size;
}
.tafel > #nutzung-lesehilfe { margin-top: 0; }
.nutzungstabelle thead th, .nutzungstabelle thead th.zahl {
  white-space: normal; overflow-wrap: normal; hyphens: manual; vertical-align: bottom;
}
.nutzungstabelle th.zahl, .nutzungstabelle td.zahl, .nutzungstabelle .spalte-wissenki { padding-inline: var(--space-1); }
.nutzungstabelle thead th:nth-child(2), .nutzungstabelle thead th:nth-child(3),
.nutzungstabelle thead th:nth-child(5), .nutzungstabelle thead th:nth-child(7) { width: 4.5rem; }
.nutzungstabelle thead th:nth-child(4) { width: 5.5rem; }
.nutzungstabelle thead th:nth-child(6) { width: 4rem; }
.nutzungstabelle thead th:nth-child(8) { width: 5.25rem; }
.nutzungstabelle thead th:nth-child(9) { width: 5.5rem; }
.nutzungstabelle thead th:nth-child(10) { width: 5rem; }
.nutzungstabelle td.zahl .zweitzeile { display: block; }
.nutzungstabelle tbody th, .nutzungstabelle tfoot th {
  padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; font-weight: 750;
  overflow-wrap: anywhere;
}
.nutzungstabelle tbody th { border-bottom: 1px solid var(--trennlinie-fein); }
.nutzungstabelle tfoot th, .nutzungstabelle tfoot td {
  padding-block: var(--space-3); border-top: 1px solid var(--marke-steuerung);
  font-weight: 750; vertical-align: top;
}
.nutzungstabelle tfoot th { padding-inline: var(--space-2); }
.nutzungstabelle tfoot .spalte-wissenki { font-weight: 400; color: var(--marke-etikett); font-size: var(--text-caption); }
.nutzungstabelle tbody tr:has(.nutzung-name) { cursor: pointer; }
.nutzung-name {
  margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 750; color: var(--marke-tinte);
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
}
.nutzung-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.nutzung-einzelheiten { margin-top: var(--space-6); }
.nutzung-einzel-titel { margin: 0 0 var(--space-2); font-size: var(--text-lead, 1.125rem); }
.nutzung-einzel { border-bottom: var(--haarlinie); padding: var(--space-2) 0; }
.nutzung-einzel > summary { cursor: pointer; font-weight: 750; overflow-wrap: anywhere; padding: var(--space-1) 0; }
.nutzung-gruppe { margin: var(--space-3) 0 var(--space-4); }
.nutzung-gruppe h3 { margin: 0 0 var(--space-1); font-size: var(--text-body, 1rem); }
.nutzung-gruppe > .hilfe { color: var(--marke-etikett); font-size: var(--text-caption); margin: 0 0 var(--space-2); }
.nutzung-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-2) var(--space-5, 1.5rem); margin: 0; }
.nutzung-liste > div { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--trennlinie-fein); padding-bottom: var(--space-1); }
.nutzung-liste dt { color: var(--marke-etikett); }
.nutzung-liste dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.wissenkifeld.kompakt { margin: 0; }
.wissenkifeld.kompakt select { width: 100%; min-width: 0; padding: var(--space-1) var(--space-2); }
/* Die Lesehilfe ist eine Anmerkung zur Tabelle, kein Fließtext. */
.tafel > #nutzung-lesehilfe { color: var(--marke-etikett); font-size: var(--text-caption); }

@container nutzung (max-width: 53rem) {
  .nutzungstabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nutzungstabelle tbody tr, .nutzungstabelle tfoot tr {
    display: block; margin-bottom: var(--space-3); padding: var(--space-3) 0 var(--space-2);
    border-bottom: var(--haarlinie);
  }
  .nutzungstabelle tfoot tr { border-top: 1px solid var(--marke-steuerung); border-bottom: 0; }
  .nutzungstabelle tbody tr:hover { background: transparent; }
  .nutzungstabelle tbody th, .nutzungstabelle tfoot th { display: block; padding: 0 0 var(--space-1); border: 0; }
  .nutzungstabelle tfoot { display: block; }
  .nutzungstabelle tbody td, .nutzungstabelle tfoot td {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3);
    padding: var(--space-1) 0; border: 0; text-align: left; width: auto;
  }
  .nutzungstabelle tbody td::before, .nutzungstabelle tfoot td::before {
    content: attr(data-spalte); color: var(--marke-etikett); font-size: var(--text-caption); font-weight: 700;
  }
  .nutzungstabelle td.zahl .zweitzeile { display: inline; margin: 0 0 0 var(--space-2); }
  .wissenkifeld.kompakt select { width: auto; min-width: 6rem; }
}

@container tafel (max-width: 26rem) {
  .serverpaar { grid-template-columns: minmax(0, 1fr); }
  .standleiste > div { flex: 1 1 100%; }
  .standleiste .status-chip { white-space: normal; }
  .abschnitt > .schrittleiste.schrittfolge { grid-template-columns: minmax(0, 1fr); }
  .schrittleiste.fortschritt li { flex: 1 1 100%; }
  .rohfelder-inhalt { overflow-wrap: anywhere; }
}

dialog.popup.schublade {
  inset: 0; padding: var(--space-5);
  background: var(--marke-grund); max-width: none;
}
dialog.popup.schublade .schublade-kopf h2 { overflow-wrap: break-word; min-width: 0; }   /* Runde 1 (B-6): Wörter bleiben ganz */
#systemprompts-editor .feld { max-width: none; }
#systemprompts-editor > .abschnitt { max-width: none; }
#systemprompts-editor textarea.prompttext { min-height: 17.5rem; }
#text-dialog.popup { width: min(46rem, calc(100vw - 2 * var(--space-4))); }
dialog.bestaetigung.popup .popup-kopf h2 { margin: 0 0 var(--space-2); }
dialog.popup .dialog-kopf .popup-x { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0; }

#zugangscode-schicht h2 { margin: 0 0 var(--space-2); padding-inline-end: var(--klickziel); }
#zugangscode-schicht .hilfe { margin: 0 0 var(--space-4); }
#zugangscode-schicht .knopfreihe { margin-top: var(--space-4); }

.rahmen > .meldung[data-schwebt] { margin: 0; max-width: min(28rem, calc(100vw - 2 * var(--space-4))); }

@media (max-width: 34rem) {
  dialog.bestaetigung.popup { width: 100%; }
  .rahmen > .meldung[data-schwebt] {
    inset: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-3) auto var(--space-3); max-width: none;
  }
}

#systemprompts-tabelle .name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

.stil-variablen-titel { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-caption); color: var(--marke-etikett); font-weight: 600; }
.stil-variablen { margin: 0; }
.stil-variablen dt { margin-top: var(--space-2); }
.stil-variablen dd { margin: 0 0 0 var(--space-3); overflow-wrap: anywhere; }
.stil-variable { background: none; border: var(--haarlinie); border-radius: var(--r-1); padding: var(--space-1) var(--space-2); cursor: pointer; color: inherit; font: inherit; }
.stil-variable:focus-visible { outline: 2px solid var(--fokusring, var(--kohle)); outline-offset: 2px; }

#anmelden-bereich, #zugangscode-bereich, #mandant-dialog-bereich {
  border-color: transparent; background: transparent; padding-inline: 0; min-height: 0;
  color: var(--marke-etikett); box-shadow: none;
}
#anmelden-bereich:focus-visible, #zugangscode-bereich:focus-visible, #mandant-dialog-bereich:focus-visible {
  border-color: transparent; outline: 2px solid var(--kohle); outline-offset: 2px;
}

/* --- Durchsicht Verwaltung (D-überladen-16/17) --- */
.telegram-schritt1 .anleitung-inhalt { margin: 0; }
.telegram-schritt1 .schritt-kopf { margin-top: var(--space-4); }
.segmente { display: inline-flex; gap: 0; margin: 0 0 var(--space-4); border: var(--haarlinie); border-radius: var(--r-1); overflow: hidden; max-width: 100%; }
.segment { min-height: 44px; padding: 0 var(--space-4); border: 0; background: var(--marke-flaeche); color: var(--marke-tinte); font: inherit; font-weight: 600; cursor: pointer; }
.segment + .segment { border-left: var(--haarlinie); }
.segment[aria-pressed="true"] { background: var(--marke-aktion); color: var(--marke-knopf-schrift); }
.segment:focus-visible { outline: 2px solid var(--marke-aktion); outline-offset: -3px; }
#einladung-formular-huelle[data-leer="1"] > summary { cursor: default; list-style: none; }
#einladung-formular-huelle[data-leer="1"] > summary::marker, #einladung-formular-huelle[data-leer="1"] > summary::-webkit-details-marker { display: none; }
#einladung-formular-huelle[data-leer="1"] > summary::before { display: none; }

:root {
  --shell-max: 137.5rem;      /* 2 200 px Deckel, zentriert ab Ultrawide */
  --liste-breite: clamp(20rem, 26vw, 25rem);
  --rail-breite: clamp(18rem, 20vw, 22.5rem);
  --tab-leiste-hoehe: 3.5rem; /* untere Tab-Leiste Handy, + env(safe-area-inset-bottom) */
}

select {
  min-height: var(--klickziel);
  -webkit-appearance: none; appearance: none;
  padding-inline-end: calc(var(--space-3) + 1.5rem);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 50%, calc(100% - .8125rem) 50%;
  background-size: .3125rem .3125rem; background-repeat: no-repeat;
}
.wissenkifeld.kompakt select { min-height: var(--treffer-dicht); padding-inline-end: calc(var(--space-2) + 1.5rem); }
input[type="date"], input[type="month"], input[type="number"], input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
  min-height: var(--treffer-dicht);
}
select:not([data-x]):not([data-y]), textarea:not([data-x]):not([data-y]),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]) { font-size: 1rem; }
.tafel details > summary { min-height: var(--treffer-dicht); box-sizing: border-box; padding-block: var(--space-2); cursor: pointer; }
.nutzung-einzel > summary { padding-block: var(--space-2); }
#tafel-abrechnung .ab-zeilenknopf { min-height: var(--treffer); display: inline-flex; align-items: center; }

.leiste-mehr { display: none; }
.mehr-blatt:popover-open {
  position: fixed; inset: auto var(--space-3) calc(var(--leiste-unten, var(--tab-leiste-hoehe)) + var(--space-2) + env(safe-area-inset-bottom, 0px)) auto;
  margin: 0; min-width: 14rem; max-width: calc(100vw - 2 * var(--space-3));
  display: grid; gap: 2px; padding: var(--space-2);
  border: 0; border-radius: var(--r-3); box-shadow: var(--glas-kante), var(--schatten-2);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); color: var(--marke-tinte);
}
.mehr-eintrag {
  min-height: var(--klickziel); display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-3); border: 0; border-radius: var(--r-2); background: none; color: var(--marke-tinte);
  font: inherit; font-size: var(--text-control); font-weight: 600; text-align: left; cursor: pointer;
}
.mehr-eintrag .ikon { color: var(--marke-etikett); }
.mehr-eintrag:hover { background: var(--marke-flaeche); }
.mehr-eintrag[aria-current="true"] { background: var(--glasur-hauch); color: var(--marke-aktion); }
.mehr-eintrag[aria-current="true"] .ikon { color: var(--marke-aktion); }
@media (max-width: 34rem) {
  .leiste-mehr:not([hidden]) { display: contents; }
  #bereichsleiste-liste .reiter[data-mehr="true"] { display: none; }
  #reiter-mehr[aria-selected="true"] .ikon { color: var(--marke-aktion); }
}

@media (min-width: 34.0625rem) and (max-width: 74.99rem) {
  .rahmen-koerper:not([data-leiste-breit]) { --tenant-leiste: 7rem; gap: var(--space-4); }
  .seitenleiste:not([data-gedreht="true"]) .leiste-vorn .reiter {
    flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-1) 2px; text-align: center; position: relative;
    min-height: var(--klickziel); height: auto;
  }
  .seitenleiste:not([data-gedreht="true"]) .leiste-vorn .reiter .wort {
    flex: none; max-width: 100%; font-size: var(--text-caption); font-weight: 500; line-height: 1.15;
    -webkit-hyphens: none; hyphens: none; overflow-wrap: normal;
  }
  .seitenleiste:not([data-gedreht="true"]) .leiste-vorn .reiter[aria-selected="true"] .wort { font-weight: 600; }
  .seitenleiste:not([data-gedreht="true"]) .leiste-vorn .reiter-zahl,
  .seitenleiste:not([data-gedreht="true"]) .leiste-vorn .reiter-unter {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .seitenleiste:not([data-gedreht="true"]) .leiste-gruppe-titel,
  .seitenleiste:not([data-gedreht="true"]) .leiste-fuss { display: none; }
  .seitenleiste:not([data-gedreht="true"]) .leiste-gruppe + .leiste-gruppe { margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--haarlinie); }
}

@media (min-width: 34.0625rem) {
  .grenzleiste { padding-block: var(--space-1); }
  .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rahmen > .topbar, .rahmen > .systemzustand { grid-area: 1 / 1; }
  .rahmen > .topbar { padding-block: var(--space-1); min-height: 0; }
  .rahmen > .systemzustand {
    z-index: 1; justify-self: start; align-self: center; margin: 0 0 0 calc(var(--space-5) + 11rem); padding: 0;
    max-width: min(46rem, calc(100% - 11rem - 12rem - 2 * var(--space-5))); min-height: var(--treffer-dicht);
    cursor: pointer; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3;
  }
  .rahmen > .systemzustand::before { display: inline-block; margin-inline-end: var(--space-2); vertical-align: middle; }
  .rahmen > .systemzustand[data-offen="true"] {
    position: absolute; inset-inline: var(--space-4); top: 100%; max-width: none; white-space: normal; line-height: 1.4;
    display: block; -webkit-line-clamp: unset; line-clamp: unset;
    padding: var(--space-2) var(--space-3); background: var(--marke-grund); border: var(--haarlinie);
    border-radius: var(--r-1); overflow: visible;
  }
  .rahmen { position: relative; }
  .rahmen-koerper { padding-top: var(--space-3); }
}
@media (min-width: 34.0625rem) and (max-height: 56rem) {
  .tafel { padding-top: var(--space-4); }
  .tafel-kopf, .tafel > .abschnitt:first-child, .tafel > .unterseite > .abschnitt:first-child { padding-top: 0; }
  #tafel-einstellungen > .unterseite > .abschnitt, #tafel-partner > .abschnitt { padding-block: var(--space-4); }
}

@media (max-width: 34rem) {
  .systemzustand {
    cursor: pointer; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; padding-block: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .systemzustand::before { display: inline-block; margin-inline-end: var(--space-2); vertical-align: middle; }
  .systemzustand[data-offen="true"] { display: block; -webkit-line-clamp: unset; line-clamp: unset; line-height: 1.4; padding-block: var(--space-1); }
  /* NZ-05: Größe und Polster der Unterreiter stehen in `basis.css` (eine rollende Zeile, 14 px). */

  .grenzleiste { padding-block: var(--space-1); line-height: 1.25; }
  .topbar { min-height: 0; padding-block: var(--space-2); }
  .wortmarke small { display: inline; margin-inline-start: var(--space-2); }
  .rahmen-koerper { padding-top: var(--space-2); gap: var(--space-2); }
  .rahmen > .meldung, .rahmen > .systemzustand { margin-block: var(--space-1) 0; }
  .rahmen-koerper > .seitenleiste { display: contents; }
  .rahmen-koerper > .seitenleiste .leiste-fuss { order: 3; margin-top: var(--space-4); }
  .rahmen-koerper > main { order: 2; }
  .tafel { padding-top: var(--space-4); border: 0; box-shadow: none; }
}
code { font-family: inherit; font-size: max(.92em, var(--text-caption)); }
pre { font-family: inherit; }   /* NC-6: kein Browser-Standard „monospace“; `.diff-block` setzt seine Schrift selbst (benannte Ausnahme) */
.hinweiszeile code { font-size: inherit; }

/* --- Ultrawide: Deckel 2 200 px, zentriert; der Rand bleibt der ruhige Grund (`--tenant-grund`) --- */
@media (min-width: 137.5rem) {
  /* W-05: ab 2200 px bleibt der Inhalt bei 1200 px, nur der Weißraum wächst. */
  .rahmen { width: min(100%, calc(var(--inhalt) + var(--tenant-leiste) + var(--space-6) + 2 * var(--space-5))); }
  .rahmen-koerper > main { width: 100%; max-width: var(--inhalt); margin-inline: auto; }
}
/* F-001: 200 % Zoom bei 320 px = 160 CSS-Pixel. */
@media (max-width: 12rem) {
  .rahmen-koerper { padding-inline: var(--space-2); }
  .tafel { padding-inline: var(--space-3); }
  .tafel h1, .tafel p, .tafel label, .tafel li, .tafel dd { overflow-wrap: anywhere; }
  .tafel input, .tafel select, .tafel textarea { min-width: 0; max-width: 100%; }
}

@media (max-width: 52rem) {
  .ab-huelle { overflow-x: visible; }
  .ab-huelle .ab-tabelle, .ab-huelle .ab-tabelle tbody, .ab-huelle .ab-tabelle tr { display: block; width: 100%; }
  .ab-huelle .ab-tabelle caption, .ab-huelle .ab-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ab-huelle .ab-tabelle tbody tr { margin-bottom: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--haarlinie); }
  .ab-huelle .ab-tabelle th, .ab-huelle .ab-tabelle td { display: block; padding: var(--space-1) 0; border-bottom: 0; text-align: start; overflow-wrap: anywhere; }
  .ab-huelle .ab-tabelle td[data-spalte] { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); }
  .ab-huelle .ab-tabelle td[data-spalte]::before { content: attr(data-spalte); color: var(--marke-etikett); font-weight: 700; }
  .ab-huelle .ab-tabelle .zahl, .ab-huelle .ab-tabelle th.zahl { text-align: start; white-space: normal; }
  .ab-huelle .ab-tabelle tbody th[scope="row"] { font-weight: 750; }
  .ab-huelle .ab-zeilenknopf { white-space: normal; overflow-wrap: anywhere; text-align: start; }
}

#inhalt > .fusszeile:not(:has(#knopf-abmelden:not([hidden]))) { display: none; }
#tafel-partner[data-laedt] > #partner-filter ~ *:not(#partner-laedt) {
  visibility: hidden;
}

.tafel > #pin-anfragen-block { max-width: none; min-width: 0; }
#pin-anfragen-tabellenfeld { max-width: 100%; }
.pin-tabelle td { overflow-wrap: anywhere; }
@media (min-width: 52.01rem) {
  .pin-tabelle { min-width: 56rem; }
  .pin-tabelle .pin-zeit { width: 8rem; }
  .pin-tabelle .pin-name { width: 11%; }
  .pin-tabelle .pin-firma { width: 12%; }
  .pin-tabelle .pin-mail { width: 20%; }
  .pin-tabelle .pin-sprache { width: 5.5rem; }
  .pin-tabelle .pin-verdacht { width: 7rem; }
  .pin-tabelle .pin-vermerk { width: 18%; }
}
.pin-tabelle .pin-vermerk input { width: 100%; min-width: 0; }
.pin-tabelle .pin-nachricht { color: var(--marke-etikett); padding-top: 0; }
#pin-anfragen-tabellenfeld[hidden] { display: none; }
#partner-laedt { min-height: 1.5em; margin-block: 0; }
#partner-laedt[hidden] { display: block; visibility: hidden; }

@media (max-width: 54rem), (pointer: coarse) {
  .tafel .knopf, .tafel summary, .tafel details > summary, .tafel .nutzung-einzel > summary, #knopf-abmelden, #tafel-abrechnung .ab-zeilenknopf, .nutzung-einzel > summary,
  .tafel select, .tafel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]) {
    min-height: var(--klickziel);
  }
  .tafel .knopf.treffer-min.dicht { min-width: var(--klickziel); min-height: var(--klickziel); height: var(--klickziel); }
}