/* ============================================================
   BravexOS-Hub — Betriebs-Cockpit.
   Setzt tokens.css + bravex.css voraus (in dieser Reihenfolge geladen).
   Hier stehen nur Dinge, die es allein im Hub gibt: Leiste, Kachel-Raster,
   Kundenakte, Bibliothek, Aufnahme-Ablauf.

   Dichte statt Farbe: der Hub ist enger gesetzt als die Kundenanzeige,
   die Unterscheidung tragen Gewicht, Größe und Abstand.
   ============================================================ */

body { background: var(--surface-1); }

.breite {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* ------------------------------------------------------------
   Kopfleiste
   ------------------------------------------------------------ */
.leiste {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.leiste-innen {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  min-height: var(--nav-height);
}

.marke { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.marke-wort {
  font-family: var(--font-sans);
  font-size: var(--type-lead);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text);
}
.marke-wort em { font-style: normal; font-weight: var(--weight-light); }

.reiter { display: flex; gap: var(--space-6); flex: 0 0 auto; }
.reiter button {
  position: relative;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  color: var(--text-mute);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}
.reiter button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease);
}
.reiter button:hover { color: var(--text-dim); }
.reiter button.aktiv { color: var(--text); }
.reiter button.aktiv::after { transform: scaleX(1); }

.leiste-rechts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
#plus-knopf { white-space: nowrap; }

.portfolio { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-left: auto; }
.zaehler { display: flex; align-items: baseline; gap: var(--space-2); }
.zaehler b {
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.zaehler span {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ------------------------------------------------------------
   Seitengerüst
   ------------------------------------------------------------ */
main { padding-top: var(--space-10); padding-bottom: var(--space-22); }

.bereich-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.bereich-kopf .tag { margin-bottom: var(--space-4); }
.bereich-kopf h2 {
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
}
.bereich-kopf p { max-width: 56ch; margin-top: var(--space-2); color: var(--text-dim); font-size: var(--type-small); }

.leer {
  padding: var(--space-12) 0;
  color: var(--text-mute);
  font-size: var(--type-body);
  text-align: center;
}

/* ------------------------------------------------------------
   Kachel-Raster
   ------------------------------------------------------------ */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

.kachel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.kachel-name {
  font-size: var(--type-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* Zwei Zeilen, immer — dadurch fluchten Balken und Kennzahlen über alle Kacheln. */
.kachel-kennung { margin-top: var(--space-2); }
.kachel-kennung span { display: block; overflow-wrap: anywhere; }
.kachel-phase { color: var(--text); font-weight: var(--weight-semibold); }

.puls { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; padding-top: 3px; }
.puls span:last-child {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.deckel { display: flex; flex-direction: column; gap: var(--space-3); }
.deckel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.deckel-kopf .tag { margin: 0; }
.deckel-wert { font-size: var(--type-small); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.deckel-fuss { font-size: var(--type-small); color: var(--text-dim); font-variant-numeric: tabular-nums; }

.stat-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.stat-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wert-zeile { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.wert-zahl {
  font-size: var(--type-lead);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--text);
}
.wert-zahl--klein { font-size: var(--type-body); }
.einheit {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.merker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* ------------------------------------------------------------
   Kundenakte (Detail)
   ------------------------------------------------------------ */
.zurueck-zeile { margin-bottom: var(--space-6); }

/* Eine Lesespur, keine Kachelwand: Die Seite zeigt EINEN Kunden. Karten trennen Dinge
   voneinander — hier gehoert alles zusammen, und acht Rahmen waren acht Trennungen zu viel.
   Getrennt wird mit Weissraum und einer Haarlinie.

   Die Spur ist begrenzt, weil eine Zeile ueber 1500 px niemand mehr liest: Das Auge findet
   den Zeilenanfang nicht wieder. */
#bereich-detail { max-width: 1120px; }
.akte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-strong);
}
.akte-name {
  font-size: 2rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.akte-kennung {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--text-dim);
  margin-top: var(--space-3);
}
.akte-merker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.akte-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.akte-zugang {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--text-mute);
}
.akte-zugang a { color: var(--text-dim); }
.akte-zugang .zeiger-fehlt { opacity: 0.55; font-style: italic; }

/* Kennzahlen: gleiche Schrift, gleiche Ziffernbreite, damit man sie vergleichen kann. */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}
.kennzahl-name {
  display: block;
  font-size: var(--type-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.kennzahl-wert {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 6px;
}
.kennzahl-zusatz {
  display: block;
  font-size: var(--type-small);
  color: var(--text-dim);
  margin-top: 2px;
}

.akte-abschnitt { padding: var(--space-8) 0; border-bottom: 1px solid var(--border); }
.akte-abschnitt:last-child { border-bottom: 0; }
.akte-titel {
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
}
.akte-untertitel {
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}
.akte-untertitel + .namensliste { margin-bottom: var(--space-5); }
.akte-abschnitt .leer { text-align: left; font-size: var(--type-small); padding: 0; }

.namensliste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--text-dim);
  max-width: 76ch;
}
/* Ein Werkzeugname wird nie getrennt: `mail.ordner-anlegen` als "mail.ordner-" plus
   "anlegen" liest sich wie zwei Freigaben, die es nicht gibt. */
.namensliste > span, .namensliste > s { white-space: nowrap; }
.namensliste--gesperrt s { text-decoration-thickness: 1px; color: var(--text-mute); }

/* Ein ganzer Satz gehoert in die Textschrift. Monospace ist fuer Kennungen da — Namen,
   Versionen, Zahlen —, nicht fuer Prosa. */
.hinweis {
  font-size: var(--type-small);
  color: var(--text-dim);
  margin-top: var(--space-4);
  max-width: 68ch;
}
.akte-abschnitt .tabelle { max-width: 760px; }
.akte-abschnitt .rollt { max-width: 100%; }

/* Pipelines: KI und CODE müssen auf einen Blick auseinanderfallen. */
.pipeline + .pipeline { margin-top: var(--space-6); }
.pipeline-kopf { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pipeline-name { font-size: var(--type-body); font-weight: var(--weight-semibold); }

.schritt {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 1px solid var(--border);   /* CODE: Hairline */
}
.schritt + .schritt { margin-top: 2px; }
.schritt--ki { border-left: 3px solid var(--text); }  /* KI: kräftige Führung */

.schritt-nr {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--text-mute);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.art {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  flex: 0 0 auto;
}
.art--ki { background: var(--accent); color: var(--accent-inverse); border-color: var(--accent); }
.schritt-text { flex: 1 1 180px; min-width: 0; }
.schritt-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--type-small);
  font-weight: var(--weight-regular);
  color: var(--text);
}
.schritt--ki .schritt-name { font-weight: var(--weight-semibold); }
.schritt-meta { margin-top: 2px; }

.ergebnis { display: inline-flex; align-items: center; gap: var(--space-2); }
.ergebnis--laut { font-weight: var(--weight-bold); color: var(--text); }
.ergebnis--laut::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
}
.chip-wolke { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-wolke s { text-decoration-thickness: 1px; }

.phasen-zeile { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.phasen-zeile input { flex: 1 1 260px; }
.phasen-form .meta:empty, .phasen-form .fehler:empty { display: none; }

/* Das Freigabe-Tor traegt die Aussage im Wort, nicht in einer zweiten Pille. */
.tor {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 2px solid var(--text);
  padding-bottom: 1px;
  flex: 0 0 auto;
}

.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-5); align-items: baseline; }
.kv dt { font-size: var(--type-small); color: var(--text-dim); }
.kv dd {
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}
.kv-linie { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------
   Aufnahme: erst Angaben, dann Trockenlauf, dann PR
   ------------------------------------------------------------ */
.stufen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.stufen li { display: flex; align-items: center; gap: var(--space-3); }
.stufen-nr {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.stufen-name { font-size: var(--type-small); font-weight: var(--weight-regular); color: var(--text-mute); }
.stufen li.aktiv .stufen-name { font-weight: var(--weight-bold); color: var(--text); }
.stufen li.aktiv .stufen-nr { color: var(--text); }
.stufen li.fertig .stufen-name { color: var(--text-dim); }

.formraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.formraster .feld-block--weit { grid-column: 1 / -1; }
.feld-block { min-width: 0; }
.feld-hinweis { display: block; margin-top: var(--space-2); font-size: var(--type-small); color: var(--text-dim); }

/* Bausteine als gestapelte Auswahlkarten: eine je Zeile, Haken links, Titel und
   Erklaerung darunter. Der ausgewaehlte Zustand hebt die Karte sichtbar hervor. */
.baustein-liste { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.baustein-karte {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-3); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.baustein-karte:hover { border-color: var(--border-strong); }
.baustein-karte:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.baustein-karte input { margin: 0.15em 0 0; width: 1.1em; height: 1.1em; flex: none; accent-color: var(--text); cursor: pointer; }
.baustein-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.baustein-titel { font-weight: 600; font-size: var(--type-body); }
.baustein-info { font-size: var(--type-small); color: var(--text-dim); line-height: 1.4; }

.startprompt { width: 100%; margin-top: var(--space-4); padding: var(--space-4);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--type-small);
  line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-3); color: var(--text); resize: vertical; }
.startprompt + .knopf { margin-top: var(--space-3); }

.vorschau { margin-top: var(--space-8); scroll-margin-top: var(--space-22); }
.vorschau > .tag { margin-bottom: var(--space-4); }
.vorschau .klappe { border-top: 1px solid var(--border); }
.vorschau .klappe:last-of-type { border-bottom: 1px solid var(--border); }
.vorschau pre { margin-bottom: var(--space-4); }

/* ------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------ */
/* Schmal bricht die Leiste in zwei Zeilen: oben Marke und Aktionen,
   darunter die Reiter mit der Portfolio-Zählung. */
@media (max-width: 900px) {
  .leiste-innen { flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-2); }
  .marke { order: -2; flex: 1 1 auto; }
  .leiste-rechts { order: -1; }
  .reiter { order: 1; }
  .portfolio { order: 2; margin-left: auto; gap: var(--space-4); align-items: center; }
  .akte-rechts, .akte-zugang { align-items: flex-start; }
}

@media (max-width: 640px) {
  .breite { padding-left: var(--space-4); padding-right: var(--space-4); }
  main { padding-top: var(--space-8); }
  .raster { grid-template-columns: 1fr; gap: var(--space-4); }
  .formraster { grid-template-columns: 1fr; }
  .stat-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
  .bereich-kopf { align-items: flex-start; }
  .marke-wort { font-size: var(--type-body); }
  .reiter { gap: var(--space-5); }
  .stufen { gap: var(--space-4); }
}

/* Einstellungen: ein Feld je Zeile, Stand des Geheimnisses daneben. */
.einstellung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.einstellung-stand { font-family: var(--font-mono); font-size: var(--type-small); color: var(--text-dim); white-space: nowrap; padding-bottom: 10px; }
.einstellung-stand.gesetzt { color: var(--ok, #2f7d4a); }
.einstellung-stand.fehlt { color: var(--warn, #b3261e); }
.einstellung-aktionen { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.vorschau-text { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--type-small); max-height: 24em; overflow: auto; }

/* ============================================================
   Kundenseite (neu, 2026-08-24): groesser, klarer, zwei Spalten.
   Geld zuerst, dann das, woran gearbeitet wird, rechts das, was
   von aussen kommt (Aufgaben, Traces, Dokumente, Betrieb).
   ============================================================ */
.akte { font-size: 1.0625rem; line-height: 1.55; }
.akte .akte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); padding: var(--space-8) 0 var(--space-6); border-bottom: 0; }
.akte .akte-name { font-size: var(--type-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); }
.akte-status { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.akte-orte { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--type-body); }
.verweis { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; }
.verweis:hover { border-bottom-color: var(--text); }
.verweis--fehlt { color: var(--text-mute); border-bottom-style: dashed; }
.akte .akte-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }

.kpi-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-6) 0 var(--space-8); }
.kpi { background: var(--surface-2, var(--surface-3)); border: 1px solid var(--border); border-radius: var(--radius-xl, 16px); padding: var(--space-6); min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); }
.kpi--warn { border-color: var(--warn, #b3261e); }
.kpi-name { font-size: var(--type-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); font-weight: var(--weight-semibold); }
.kpi-wert { font-family: var(--font-mono); font-size: 2.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--text); }
.kpi-zusatz { font-size: var(--type-small); color: var(--text-dim); }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
.spalte { min-width: 0; }
.block { padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--border); }
.block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.block-titel { font-size: var(--type-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.block-meta { font-size: var(--type-small); color: var(--text-mute); }
.akte .leer { font-size: var(--type-body); }

.skill-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.skill-karte { text-align: left; background: var(--surface-2, var(--surface-3)); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: var(--space-4) var(--space-5); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1); font: inherit; color: inherit; }
.skill-karte:hover { border-color: var(--text); }
.skill-name { font-weight: var(--weight-semibold); }
.skill-meta { font-size: var(--type-small); color: var(--text-dim); }

.aufgaben, .dateien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aufgabe { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.aufgabe--dringend .aufgabe-titel::before { content: "● "; color: var(--warn, #b3261e); }
.aufgabe-titel { color: var(--text); text-decoration: none; font-weight: var(--weight-medium); }
.aufgabe-titel:hover { text-decoration: underline; }
.aufgabe-meta { font-size: var(--type-small); color: var(--text-dim); }
.datei { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: var(--space-3) 0; cursor: pointer; display: grid; grid-template-columns: 1.25em minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; font: inherit; color: inherit; }
.datei:hover .datei-name { text-decoration: underline; }
.datei-art { color: var(--text-mute); }
.datei-name { overflow-wrap: anywhere; }
.datei-meta { font-size: var(--type-small); color: var(--text-dim); text-align: right; }
.lauf { font-weight: var(--weight-semibold); }
.lauf--ok::before { content: "● "; color: var(--ok, #2f7d4a); }
.lauf--warn::before { content: "● "; color: var(--warn, #b3261e); }
.lauf-meta { font-size: var(--type-small); color: var(--text-dim); font-family: var(--font-mono); }

.popup { position: fixed; inset: 0; margin: auto; width: min(1040px, 94vw); height: min(88vh, 900px); max-width: 94vw; max-height: 88vh; border: 1px solid var(--border); border-radius: var(--radius-2xl, 20px); padding: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.popup:not([open]) { display: none; }
.popup::backdrop { background: rgba(0, 0, 0, 0.45); }
.popup-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border); }
.popup-kopf h2 { font-size: var(--type-h3); font-weight: var(--weight-semibold); }
.popup-untertitel { font-size: var(--type-small); color: var(--text-dim); margin-top: 2px; }
.popup-inhalt { flex: 1; overflow: auto; padding: var(--space-8); font-size: 1.0625rem; line-height: 1.65; }
.popup-inhalt--rahmen { padding: 0; }
.popup-inhalt iframe { width: 100%; height: 100%; border: 0; }
.doku h2 { font-size: var(--type-h3); margin: var(--space-6) 0 var(--space-3); }
.doku h2:first-child { margin-top: 0; }
.doku h3 { font-size: var(--type-lead); margin: var(--space-5) 0 var(--space-2); }
.doku p { margin: 0 0 var(--space-3); max-width: 72ch; }
.doku ul { margin: 0 0 var(--space-3) 1.25em; }
.doku blockquote { border-left: 3px solid var(--border-strong); padding-left: var(--space-4); color: var(--text-dim); margin: 0 0 var(--space-3); }
.doku code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 1100px) {
  .kpi-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Ergaenzungen 2026-08-24 (zweite Runde): aufklappbare Pipelines, klickbare Zeilen,
   Rollbereiche, Wertepaare im Pop-up, Kachel mit zwei Kennzahl-Reihen. */
.pipeline > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--space-4); }
.pipeline > summary::-webkit-details-marker { display: none; }
.pipeline > summary::before { content: "▸"; color: var(--text-mute); transition: transform 0.15s; }
.pipeline[open] > summary::before { transform: rotate(90deg); }
.pipeline-anzahl { font-size: var(--type-small); color: var(--text-mute); margin-left: auto; }
.skill-verweis { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); cursor: pointer; }
.skill-verweis:hover { text-decoration-color: var(--text); }
.zeile-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.zeile-knopf:hover { text-decoration: underline; }
.aufgabe-titel { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; font-weight: var(--weight-medium); }
.rollbereich { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 0 var(--space-3); }
.rollbereich .tabelle thead th { position: sticky; top: 0; background: var(--bg); }
.paare { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-5); }
.paare dt { color: var(--text-mute); font-size: var(--type-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); align-self: baseline; }
.paare dd { margin: 0; overflow-wrap: anywhere; }
.rohtext { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5; background: var(--surface-3); border-radius: var(--radius-lg, 12px); padding: var(--space-4); max-height: 360px; overflow: auto; margin: 0 0 var(--space-4); }
.stat-reihe--zweite { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* ============================================================
   Politur, dritte Runde (2026-08-24): ein Rhythmus fuer die ganze
   Kundenseite. Alles sitzt auf einem 8-px-Raster, Ueberschriften sind
   ruhige Versalien mit Zaehler, Zahlen sind tabellarisch, Zeilen haben
   eine feste Hoehe, Texte werden nie abgeschnitten, nichts steht in
   Monospace ausser Zahlen und Kennungen.
   ============================================================ */
.akte { font-size: 1.0625rem; line-height: 1.5; animation: einblenden 0.25s ease-out; }
@keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.akte .akte-kopf { padding: var(--space-10) 0 var(--space-6); align-items: center; }
.akte-titelzeile { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.akte .akte-name { font-size: 2.75rem; letter-spacing: -0.03em; line-height: 1.05; }
.phase-wahl { font: inherit; font-size: var(--type-body); font-weight: var(--weight-semibold); padding: 8px 36px 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.phase-wahl:hover { border-color: var(--text); }
.akte-orte { margin-top: var(--space-4); gap: var(--space-6); }
.verweis { font-size: var(--type-body); color: var(--text-dim); border-bottom: 0; }
.verweis:hover { color: var(--text); }

.kpi-raster { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-xl, 16px); overflow: hidden; padding: 0; margin: var(--space-2) 0 var(--space-10); }
.kpi { border: 0; border-radius: 0; border-right: 1px solid var(--border); background: var(--bg); padding: var(--space-6) var(--space-6) var(--space-5); min-height: 0; gap: var(--space-4); }
.kpi:last-child { border-right: 0; }
.kpi--warn { box-shadow: inset 0 3px 0 var(--warn, #b3261e); }
.kpi-name { font-size: 0.75rem; }
.kpi-wert { font-size: 2rem; }

.block { padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.block-kopf { margin-bottom: var(--space-5); }
.block-titel { font-size: 0.8125rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); font-weight: var(--weight-semibold); }
.block-meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zwei-spalten { gap: var(--space-16); }

.pipeline + .pipeline { margin-top: 0; }
.pipeline { border-bottom: 1px solid var(--border); }
.pipeline > summary { padding: var(--space-4) 0; margin: 0; gap: var(--space-4); align-items: center; }
.pipeline > summary::before { font-size: 0.8em; width: 1em; }
.pipeline-name { font-size: 1.0625rem; }
.pipeline-meta { display: flex; gap: var(--space-4); align-items: center; margin-left: auto; font-size: var(--type-small); color: var(--text-dim); font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.pipeline-autonomie { border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; }
.pipeline-anzahl { margin-left: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pipeline-koerper { padding: 0 0 var(--space-5) var(--space-6); }
.schritt-meta { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: var(--type-small); color: var(--text-dim); }

.skill-raster { gap: var(--space-3); }
.skill-karte { border-radius: var(--radius-lg, 12px); padding: var(--space-5); background: var(--bg); transition: border-color 0.15s, transform 0.15s; }
.skill-karte:hover { transform: translateY(-1px); }
.skill-name { font-size: 1.0625rem; overflow-wrap: anywhere; }

.aufgabe { padding: var(--space-4) 0; }
.aufgabe-titel { font-size: 1.0625rem; overflow-wrap: anywhere; }
.aufgabe-meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rollbereich { border: 0; border-radius: 0; padding: 0; max-height: 440px; }
.rollbereich .tabelle th { font-size: 0.6875rem; }
.rollbereich .tabelle td { padding-top: 12px; padding-bottom: 12px; overflow-wrap: anywhere; }
.datei { padding: var(--space-4) 0; grid-template-columns: 1em minmax(0, 1fr) auto; }
.datei-name { font-size: 1.0625rem; }
.lauf { font-size: 1.0625rem; }

.kachel-name { overflow-wrap: anywhere; }
.stat-reihe .stat-name { overflow-wrap: anywhere; }

@media (max-width: 1100px) { .kpi { border-right: 0; border-bottom: 1px solid var(--border); } }

/* Vierte Runde (2026-08-24): Traces mit fixierter Kopfzeile und Innenabstand, Ticket-Pop-up
   mit Layout, Ordnerwechsel im Dokumente-Block. */
.rollbereich { border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 0; background: var(--bg); }
.rollbereich .tabelle { border-collapse: separate; border-spacing: 0; }
.rollbereich .tabelle thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-3); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rollbereich .tabelle thead th:first-child { border-top-left-radius: var(--radius-lg, 12px); }
.rollbereich .tabelle thead th:last-child { border-top-right-radius: var(--radius-lg, 12px); }
.rollbereich .tabelle td { padding: 14px 16px; }
.rollbereich .tabelle tbody tr:last-child td { border-bottom: 0; }

.pillen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pille { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--type-small); color: var(--text-dim); }
.pille--status { background: var(--text); color: var(--bg); border-color: var(--text); }
.pille--warn { border-color: var(--warn, #b3261e); color: var(--warn, #b3261e); }
.ticket-kopf { margin-bottom: var(--space-6); }
.ticket-raster { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-10); align-items: start; }
.ticket-text { min-width: 0; }
.ticket-fakten { position: sticky; top: 0; background: var(--surface-3); border-radius: var(--radius-lg, 12px); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.ticket-fakten .paare { margin: 0; grid-template-columns: 1fr; gap: var(--space-3); }
.ticket-fakten .paare dt { font-size: 0.6875rem; }
.ticket-fakten .knopf { text-align: center; text-decoration: none; }
@media (max-width: 800px) { .ticket-raster { grid-template-columns: minmax(0, 1fr); } }

.krumen { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.krumen-pfad { font-size: var(--type-small); color: var(--text-dim); overflow-wrap: anywhere; }
.rohtext--voll { max-height: none; }

/* Fuenfte Runde (2026-08-24): Markdown vollstaendig, Trace-Pop-up mit Kennzahlen, Schritten
   und Nachrichten-Bloecken. */
.doku h4 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-semibold); }
.doku ol { margin: 0 0 var(--space-3) 1.5em; }
.doku li { margin: 2px 0; }
.doku li ul, .doku li ol { margin-top: 2px; margin-bottom: 0; }
.doku hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.doku a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); }
.doku em { font-style: italic; }
.doku .rollt { margin: 0 0 var(--space-4); }
.tabelle--doku { width: 100%; font-size: 0.95em; }
.tabelle--doku th, .tabelle--doku td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabelle--doku th { background: var(--surface-3); font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; font-size: 0.9em; }
.doku pre.rohtext { margin: 0 0 var(--space-4); }

.trace-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); overflow: hidden; margin-bottom: var(--space-6); }
.trace-kpi { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.trace-kpi:last-child { border-right: 0; }
.trace-kpi-wert { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.125rem; overflow-wrap: anywhere; }
.trace h2 { font-size: 0.8125rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); font-weight: var(--weight-semibold); margin: var(--space-8) 0 var(--space-4); }
.trace h3 { font-size: 0.75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); margin: var(--space-4) 0 var(--space-2); }
.trace .paare { margin-bottom: var(--space-4); }
.schritt-karte { border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); margin-bottom: var(--space-3); background: var(--bg); }
.schritt-karte-kopf { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 2px var(--space-3); padding: var(--space-4) var(--space-5); align-items: baseline; }
.schritt-karte-kopf::-webkit-details-marker { display: none; }
.schritt-karte-kopf .schritt-nr { grid-row: span 2; }
.schritt-karte-name { font-weight: var(--weight-semibold); }
.schritt-karte-meta { font-size: var(--type-small); color: var(--text-dim); font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.schritt-karte-koerper { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border); }
.nachrichten { display: flex; flex-direction: column; gap: var(--space-3); }
.nachricht { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.nachricht-rolle { font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); padding-top: 12px; }
.nachricht--assistant .nachricht-rolle, .nachricht--reasoning .nachricht-rolle { color: var(--text); }
.nachricht .rohtext { margin: 0; max-height: 320px; }

/* Kundenportal-Link im Kopf der Kundenseite (2026-08-24). */
.portal-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); font-size: var(--type-body); }
.portal-zeile-name { font-size: 0.75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); font-weight: var(--weight-semibold); }
.portal-zeile .verweis { font-family: var(--font-mono); font-size: var(--type-small); overflow-wrap: anywhere; }
.portal-zeile-wer { flex-basis: 100%; font-size: var(--type-small); color: var(--text-dim); }

/* Phasen-Leiste im Kundenportal: vier Schritte, der aktuelle hervorgehoben. */
.phasen-leiste { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); counter-reset: none; }
.phasen-schritt { border-top: 3px solid var(--border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: 2px; color: var(--text-mute); }
.phasen-schritt--fertig { border-top-color: var(--text-dim); color: var(--text-dim); }
.phasen-schritt--aktiv { border-top-color: var(--text); color: var(--text); }
.phasen-nr { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-wide); }
.phasen-name { font-weight: var(--weight-semibold); font-size: 1.0625rem; }
.phasen-erklaerung { font-size: var(--type-small); color: var(--text-dim); }
@media (max-width: 800px) { .phasen-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kundenportal pflegen (Hub, 2026-08-24): drei Spalten — Schritte, Unterlagen, vom Kunden. */
.kp-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.kp-teil { min-width: 0; }
.kp-titel { font-size: var(--type-body); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); }
.kp-liste { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.kp-zeile { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.kp-zeile:first-child { border-top: 0; padding-top: 0; }
.kp-zeile-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.kp-zeile-titel { font-weight: var(--weight-medium); flex: 1 1 auto; overflow-wrap: anywhere; }
.kp-zeile--erledigt .kp-zeile-titel { color: var(--text-mute); text-decoration: line-through; }
.kp-status { font: inherit; font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); cursor: pointer; }
.kp-zeile--erledigt .kp-status { background: var(--text); color: var(--bg); border-color: var(--text); }
.kp-weg { background: none; border: 0; font: inherit; font-size: var(--type-small); color: var(--text-mute); cursor: pointer; margin-left: auto; }
.kp-weg:hover { color: var(--warn, #b3261e); }
.kp-beschreibung { font-size: var(--type-small); color: var(--text-dim); margin: 4px 0 0; white-space: pre-wrap; }
.kp-dateien { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--type-small); }
.kp-meta { font-size: var(--type-small); color: var(--text-dim); }
.kp-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.kp-form input, .kp-form textarea { font: inherit; font-size: var(--type-body); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.kp-check { display: flex; gap: 8px; align-items: center; font-size: var(--type-small); color: var(--text-dim); }
.kp-form .knopf { align-self: flex-start; }
.kp-upload { display: block; margin-top: var(--space-3); padding: 10px; border: 1px dashed var(--border-strong); border-radius: 8px; text-align: center; font-size: var(--type-small); color: var(--text-dim); cursor: pointer; }
.kp-upload:hover { border-color: var(--text); color: var(--text); }
.kp-upload input { display: none; }
@media (max-width: 1100px) { .kp-raster { grid-template-columns: minmax(0, 1fr); } }


/* ============================================================
   Portal-Ton im Hub (2026-08-25).
   Die Kundenseite (#/t/<kunde>) traegt dasselbe Design wie das Kundenportal:
   Papier, Tinte, Fraunces fuer Titel, Manrope fuer Text, Karten mit Radius
   und weichem Schatten. Die p-*-Klassen kommen aus portal.css (geteilt mit
   dem Portal, siehe Kopf dieser Datei). Hier steht nur, was der Hub
   zusaetzlich braucht: die Farb- und Schrift-Werte fuer die uebrigen Seiten,
   die Skelette, und die Hub-Bausteine (Aufgaben, Dateien, Portal-Pflege) im
   Portal-Ton.
   ============================================================ */

/* Die uebrigen Hub-Seiten ziehen im selben Ton nach: Die Bravex-Token bekommen die
   Papier-Werte, damit Register, Bibliothek und Einstellungen nicht in einem anderen
   Weiss stehen als die Kundenseite. Nur im Hellmodus — der Dunkelmodus behaelt seine
   Werte und bekommt allein die Schriften. */
/* Auf body statt :root, damit das Portal (body.portal-body, laedt diese Datei mit)
   seine Werte behaelt und pixelgleich bleibt. */
:root:not([data-theme="dark"]) body:not(.portal-body) {
  --bg: #FFFFFF;
  --surface-1: #F6F3EE;
  --surface-2: #FFFFFF;
  --surface-3: #FBFAF7;
  --border: #E8E2D8;
  --border-strong: #D9D2C6;
  --text: #16130F;
  --text-dim: #6F675C;
  --text-mute: #A39B8F;
  --accent: #16130F;
}
body:not(.portal-body) {
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: var(--weight-regular);
}
.leiste { background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: blur(10px); }
.marke-wort { font-family: var(--font-serif); font-weight: var(--weight-semibold); }
.marke-wort em { font-weight: var(--weight-regular); color: var(--text-dim); }
.bereich-kopf h2 { font-family: var(--font-serif); font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
.kachel { border: 0; border-radius: var(--p-radius, 20px); box-shadow: var(--p-schatten, var(--shadow-md)); background: var(--surface-2); }
.kachel:hover { box-shadow: 0 1px 2px rgba(40, 30, 15, 0.04), 0 18px 40px -16px rgba(40, 30, 15, 0.26); }
.kachel-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: var(--weight-semibold); letter-spacing: -0.015em; }
.karte--gross { border-radius: var(--p-radius, 20px); box-shadow: var(--p-schatten, var(--shadow-md)); border: 0; }
body:not(.portal-body) .popup { border: 0; border-radius: 24px; }
body:not(.portal-body) .popup-kopf h2 { font-family: var(--font-serif); font-size: 1.5rem; }

/* ------------------------------------------------------------
   Skelette: graue, sanft pulsierende Flaechen in der Form dessen,
   was gleich kommt. Fuer Vorleser unsichtbar (aria-hidden), der
   Behaelter meldet aria-busy. Ohne Bewegung, wenn das System es
   so will.

   Regel (app.js): Ein Skelett wird nur mit der Form seines Ziels
   angelegt, nie generisch. Die Skelette benutzen deshalb die
   Klassen ihrer Ziele (kachel, p-karte, p-held, tabelle, p-zeit …);
   hier stehen nur die Zeilen-Formen, deren Hoehen den Schriftgraden
   der Ziele entsprechen, und die Flaechen fuer Bild, Balken, Rahmen.
   ------------------------------------------------------------ */
.skelett-flaeche, .skelett-zeile, .skelett-kreis {
  display: block;
  background: linear-gradient(90deg, var(--border) 0%, var(--surface-3) 50%, var(--border) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skelett-puls 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.skelett-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skelett-text--eng { gap: 6px; }
.skelett-text--acht { gap: 8px; }
.skelett-text--null { gap: 0; }
.skelett-pillen { display: flex; flex-wrap: wrap; gap: 12px; }
/* Zeilen-Formen. Jede Zeile ist so hoch wie die Textzeile, die sie ersetzt (Zeilenbox
   der Schrift, gemessen an den fertigen Bausteinen); sichtbar ist nur der Balken in der
   Mitte (background-clip auf den Inhalt, der Rest ist Innenabstand). So stimmen Hoehe und
   Rhythmus, ohne dass die Flaeche schwer wirkt. */
.skelett-zeile { box-sizing: border-box; background-clip: content-box; height: 26px; padding: 5px 0; width: 100%; }
.skelett-zeile--zeile { height: 26px; padding: 5px 0; }
.skelett-zeile--meta { height: 20px; padding: 4px 0; width: 40%; }
.skelett-zeile--tag { height: 18px; padding: 4px 0; width: 50%; }
.skelett-zeile--kennung { height: 18px; padding: 3px 0; }
.skelett-zeile--stat-name { height: 19px; padding: 4px 0; }
.skelett-zeile--deckel-wert { height: 22px; padding: 5px 0; }
.skelett-zeile--kopf { height: 17px; padding: 3px 0; width: 60%; }
.skelett-zeile--zelle { height: 26px; padding: 5px 0; }
.skelett-zeile--augenbraue { height: 18px; padding: 3px 0; width: 30%; margin-bottom: 12px; }
.skelett-zeile--augenbraue-eng { height: 18px; padding: 3px 0; width: 30%; }
.skelett-zeile--kartentitel { height: 37px; padding: 5px 0; width: 38%; border-radius: 6px; }
.skelett-zeile--klappe-sub { height: 21px; padding: 4px 0; }
.skelett-zeile--kp-titel { height: 27px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--kp-titel--abstand { margin-bottom: 12px; }
.skelett-zeile--h2 { height: 24px; padding: 2px 0; border-radius: 6px; margin: 24px 0 12px; }
.skelett-zeile--h3 { height: 33px; padding: 4px 0; border-radius: 6px; margin: 8px 0 16px; }
.skelett-zeile--h3-klein { height: 30px; padding: 3px 0; border-radius: 6px; }
.skelett-zeile--abstand { margin-bottom: 16px; }
.skelett-zeile--held-titel { height: 61px; padding: 6px 0; width: 60%; border-radius: 10px; margin-bottom: 16px; }
.skelett-zeile--satz { height: 28px; padding: 5px 0; }
.skelett-zeile--unter { height: 19px; padding: 4px 0; margin: 24px 0 12px; }
.skelett-zeile--kachel-name { height: 30px; padding: 3px 0; width: 65%; border-radius: 6px; }
.skelett-zeile--phase-gross { height: 29px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--phase-gross-portal { height: 47px; padding: 8px 0; border-radius: 6px; margin-bottom: 16px; }
.skelett-zeile--phase-name { height: 17px; padding: 3px 0; }
.skelett-zeile--zahl { height: 23px; padding: 2px 0; width: 60%; border-radius: 6px; }
.skelett-zeile--zahl-gross { height: 40px; padding: 5px 0; border-radius: 6px; }
.skelett-zeile--gc-summe { height: 33px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--pipeline-meta { height: 24px; padding: 6px 0; }
.skelett-zeile--zeit-titel { height: 31px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--zeit-unter { height: 23px; padding: 5px 0; }
.skelett-zeile--schrittname { height: 28px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--nr { height: 17px; padding: 3px 0; }
.skelett-zeile--baustein-name { height: 28px; padding: 4px 0; border-radius: 6px; }
.skelett-zeile--aktivitaet-zeit { height: 22px; padding: 5px 0; }
.skelett-zeile--betrieb { height: 28px; padding: 5px 0; margin-bottom: 4px; }
.skelett-zeile--stufen-nr { height: 40px; width: 40px; padding: 0; border-radius: 50%; }
.skelett-zeile--feldname { height: 22px; padding: 5px 0; margin-bottom: 8px; }
.skelett-zeile--feldname-ohne { height: 22px; padding: 5px 0; }
.skelett-zeile--feldhinweis { height: 22px; padding: 5px 0; margin-top: 8px; }
.skelett-zeile--stand { height: 22px; padding: 5px 0; margin-bottom: 10px; }
/* Pillen, Knoepfe, Felder — die Formen der Bedienelemente, ohne Innenabstand. */
.skelett-zeile--puls { height: 22px; padding: 0; width: 60px; border-radius: 999px; }
.skelett-zeile--wahl { height: 28px; padding: 0; border-radius: 8px; }
.skelett-zeile--zahnrad { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.skelett-zeile--chip { height: 27px; padding: 0; width: 128px; border-radius: 999px; }
.skelett-zeile--pille { height: 30px; padding: 0; width: 160px; border-radius: 999px; }
.skelett-zeile--zaehler { height: 26px; padding: 0; width: 58px; border-radius: 999px; }
.skelett-zeile--status { height: 25px; padding: 0; width: 82px; border-radius: 999px; }
.skelett-zeile--knopf { height: 45px; padding: 0; border-radius: 999px; }
.skelett-zeile--knopf-gross { height: 52px; padding: 0; border-radius: 999px; }
.skelett-zeile--knopf-klein { height: 44px; padding: 0; border-radius: 999px; }
.skelett-zeile--knopf-portal-klein { height: 40px; padding: 0; border-radius: 999px; }
.skelett-zeile--haken { height: 23px; padding: 0; width: 84px; margin-left: auto; }
.skelett-zeile--eingabe { height: 49px; padding: 0; border-radius: 12px; }
.skelett-zeile--eingabe-kp { height: 48px; padding: 0; border-radius: 12px; }
.skelett-zeile--eingabe-mehrzeilig { height: 128px; padding: 0; border-radius: 12px; }
.skelett-zeile--upload { height: 53px; padding: 0; border-radius: 14px; margin-top: 14px; }
.skelett-zeile--upload-kp { height: 50px; padding: 0; border-radius: 14px; margin-top: 12px; }
.skelett-zeile--upload-zeile { height: 50px; padding: 0; width: 98px; border-radius: 14px; }
.skelett-zeile--upload-klein { height: 36px; padding: 0; width: 92px; border-radius: 14px; }
/* Flaechen: Balken, Bild, PDF-Rahmen. */
.skelett-flaeche { width: 100%; height: 120px; border-radius: 14px; }
.skelett-flaeche--balken { height: 8px; border-radius: 999px; }
.skelett-flaeche--voll { height: 100%; border-radius: 0; }
.skelett-flaeche.p-phase-balken, .skelett-flaeche.p-schrittnav-balken { height: 6px; border-radius: 999px; }
.skelett-flaeche.p-datei-symbol { height: 36px; border-radius: 10px; }
.skelett-kreis.p-haken { border: 0; }
/* Im Hub-Kopf stehen die Auswahlfelder in voller Breite und damit unter dem Phasennamen. */
.skelett .p-held-aktionen { flex: 1 1 100%; }
/* Im Kachelkopf gibt sonst der Text die Breite vor; ohne ihn bekaeme der Block keine. */
.skelett .kachel-kopf > div:first-child { flex: 1 1 auto; min-width: 0; }
.skelett-kreis { width: 26px; height: 26px; border-radius: 50%; }
.skelett-kreis.p-zeit-punkt { width: 40px; height: 40px; border: 0; }
.skelett-kreis.p-diashow-knopf { width: 44px; height: 44px; border: 0; }
.skelett-zeile--diashow-zaehler { height: 18px; padding: 3px 0; }
.skelett-zeile--knopf-diashow { height: 33px; padding: 0; border-radius: 999px; }
/* Die Skelett-Kacheln liegen direkt im echten Raster (#kachel-raster ist selbst das Raster). */
.skelett-durchsichtig { display: contents; }
/* Kein Einblenden waehrend des Skeletts — nur die fertigen Karten gleiten herein. */
.skelett .p-karte, .skelett .p-held, .skelett .p-schrittnav, .skelett .p-diashow, .skelett-seite { animation: none; }
.skelett .pipeline > summary::before { visibility: hidden; }
.skelett .rollbereich { pointer-events: none; }
@keyframes skelett-puls { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skelett-flaeche, .skelett-zeile, .skelett-kreis { animation: none; background: var(--border); }
}

/* ------------------------------------------------------------
   Kundenseite im Portal-Design. Alles, was der Hub an Bausteinen
   zusaetzlich zeigt (Phasenwahl, Orte, Einstellungen-Knopf,
   Aufgaben, Traces, Portal-Pflege), sitzt in denselben Karten.
   ------------------------------------------------------------ */
#bereich-detail { max-width: 1240px; }
.akte--portal { font-family: var(--p-sans); color: var(--p-text); animation: none; }
.akte--portal .p-held { padding-top: 24px; }
.akte--portal .p-titel { overflow-wrap: anywhere; }
.akte--portal .p-held-links { min-width: 0; }
.akte--portal .p-held-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.akte--portal .p-held-zeile .verweis { color: var(--p-dim); font-size: 1rem; }
.akte--portal .p-held-zeile .verweis:hover { color: var(--p-akzent); }
.akte--portal .verweis--fehlt { color: var(--p-mute); }
.akte--portal .p-held-rechts { display: flex; flex-direction: column; gap: 14px; }
.akte--portal .p-phase-gross { margin-bottom: 4px; }
.akte--portal .p-held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.akte--portal .phase-wahl { font-family: var(--p-sans); font-size: 0.9375rem; border-color: var(--p-linie); background-color: var(--p-karte-hell); color: var(--p-tinte); }
.akte--portal .phase-wahl:hover { border-color: var(--p-tinte); }
.akte--portal .p-knopf--leise { font-family: var(--p-sans); }
.akte--portal .puls span:last-child { font-family: var(--p-sans); letter-spacing: 0.06em; font-size: 0.75rem; }
.akte--portal .chip { font-family: var(--p-sans); letter-spacing: 0.04em; border-color: var(--p-linie); }
.akte--portal .p-raster { padding-top: 8px; }
.akte--portal .p-zahlen-karte { margin-bottom: 24px; }
.akte--portal .p-zahl-wert { overflow-wrap: anywhere; font-size: 1.625rem; }

/* Karten-Bausteine: p-karte statt Haarlinien-Block. block() erzeugt beides. */
.akte--portal .block { border: 0; }
.akte--portal .block-meta { font-family: var(--p-sans); }
.akte--portal .p-leer, .akte--portal .leer { color: var(--p-dim); font-size: 1rem; padding: 0; text-align: left; font-family: var(--p-sans); }

/* Pipelines, Skills — wie im Portal (dort ueber .portal-body gesetzt). */
.akte--portal .pipeline { border-bottom-color: var(--p-linie); }
.akte--portal .pipeline-name { color: var(--p-tinte); }
.akte--portal .pipeline-meta, .akte--portal .schritt-meta { font-family: var(--p-sans); }
.akte--portal .pipeline-autonomie { border-color: var(--p-linie); }
.akte--portal .schritt { border-left-color: var(--p-linie); }
.akte--portal .schritt--ki { border-left-color: var(--p-akzent); }
.akte--portal .art { border-color: var(--p-linie); color: var(--p-dim); }
.akte--portal .art--ki { background: var(--p-akzent); border-color: var(--p-akzent); color: #fff; }
.akte--portal .tor { border-bottom-color: var(--p-akzent); color: var(--p-akzent); }
.akte--portal .skill-karte { background: var(--p-karte-hell); border-color: var(--p-linie); border-radius: 14px; }
.akte--portal .skill-karte:hover { border-color: var(--p-akzent); }
.akte--portal .skill-name { color: var(--p-tinte); }

/* Aufgaben (Linear), Dateien (Drive), Traces, Betrieb. */
.akte--portal .aufgabe { border-bottom-color: var(--p-linie); padding: 14px 0; }
.akte--portal .aufgabe:last-child { border-bottom: 0; }
.akte--portal .aufgabe-titel { color: var(--p-tinte); font-weight: 600; }
.akte--portal .aufgabe-titel:hover { color: var(--p-akzent); text-decoration: none; }
.akte--portal .aufgabe--dringend .aufgabe-titel::before { color: var(--p-warn); }
.akte--portal .aufgabe-meta { font-family: var(--p-sans); color: var(--p-dim); }
.akte--portal .datei { border-bottom-color: var(--p-linie); padding: 12px 0; }
.akte--portal .datei:last-child { border-bottom: 0; }
.akte--portal .datei-name { color: var(--p-tinte); font-weight: 600; }
.akte--portal .datei:hover .datei-name { color: var(--p-akzent); text-decoration: none; }
.akte--portal .datei-art { color: var(--p-akzent); }
.akte--portal .datei-meta, .akte--portal .krumen-pfad { color: var(--p-dim); }
.akte--portal .rollbereich { border-color: var(--p-linie); border-radius: 14px; max-height: 360px; background: var(--p-karte); }
.akte--portal .rollbereich .tabelle thead th { background: var(--p-karte-hell); border-bottom-color: var(--p-linie); font-family: var(--p-sans); letter-spacing: 0.08em; }
.akte--portal .rollbereich .tabelle td { border-bottom-color: var(--p-linie); }
.akte--portal .zeile-knopf { color: var(--p-tinte); font-weight: 600; }
.akte--portal .zeile-knopf:hover { color: var(--p-akzent); text-decoration: none; }
.akte--portal .lauf--ok::before { color: var(--p-akzent); }
.akte--portal .lauf--warn::before { color: var(--p-warn); }
.akte--portal .lauf-meta { font-family: var(--p-sans); color: var(--p-dim); }
.akte--portal .knopf--tertiaer { font-family: var(--p-sans); }

/* Kundenportal pflegen — in der Klappe, drei Teile im Portal-Ton. */
.akte--portal .portal-zeile { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--p-linie); }
.akte--portal .portal-zeile-name { font-family: var(--p-sans); color: var(--p-dim); }
.akte--portal .portal-zeile .verweis { font-family: var(--p-sans); color: var(--p-akzent); font-size: 0.9375rem; }
.akte--portal .portal-zeile-wer { color: var(--p-dim); }
.akte--portal .kp-titel { font-family: var(--p-serif); font-size: 1.125rem; color: var(--p-tinte); }
.akte--portal .kp-zeile { border-top-color: var(--p-linie); }
.akte--portal .kp-zeile-titel { color: var(--p-tinte); }
.akte--portal .kp-zeile--erledigt .kp-zeile-titel { color: var(--p-mute); }
.akte--portal .kp-status { font-family: var(--p-sans); border-color: var(--p-linie); background: var(--p-karte); color: var(--p-dim); }
.akte--portal .kp-zeile--erledigt .kp-status { background: var(--p-akzent); border-color: var(--p-akzent); color: #fff; }
.akte--portal .kp-weg { color: var(--p-mute); }
.akte--portal .kp-weg:hover { color: var(--p-warn); }
.akte--portal .kp-beschreibung, .akte--portal .kp-meta { color: var(--p-dim); }
.akte--portal .kp-form input, .akte--portal .kp-form textarea { font-family: var(--p-sans); border-color: var(--p-linie); border-radius: 12px; background: var(--p-karte-hell); color: var(--p-tinte); padding: 10px 14px; }
.akte--portal .kp-form input:focus, .akte--portal .kp-form textarea:focus { outline: 2px solid var(--p-akzent); outline-offset: 1px; border-color: transparent; }
.akte--portal .kp-form .knopf { font-family: var(--p-sans); border-radius: 999px; }
.akte--portal .kp-upload { border: 1.5px dashed var(--p-linie); border-radius: 14px; padding: 14px; color: var(--p-dim); font-weight: 600; }
.akte--portal .kp-upload:hover { border-color: var(--p-akzent); background: var(--p-akzent-weich); color: var(--p-akzent); }
.akte--portal .pille { border-color: var(--p-linie); color: var(--p-dim); font-family: var(--p-sans); }
.akte--portal .notiz { border-radius: 12px; }

/* Einstellungen je Kunde: der Kopf als Held, das Formular als Karte. */
#bereich-kunde-einstellungen { max-width: 1240px; }
.akte--portal.akte--einstellungen .p-held { padding-bottom: 8px; grid-template-columns: minmax(0, 1fr); }
.akte--portal .karte--gross h3 { font-family: var(--p-serif); font-size: 1.375rem; font-weight: 600; margin: 8px 0 16px; color: var(--p-tinte); }
.akte--portal .karte--gross h3 + .feld-block { margin-top: 0; }
.akte--portal .karte--gross .feld-block + h3 { margin-top: 32px; }
.akte--portal .feld-name { font-family: var(--p-sans); color: var(--p-dim); }
.akte--portal .karte--gross input { font-family: var(--p-sans); border-color: var(--p-linie); border-radius: 12px; background: var(--p-karte-hell); color: var(--p-tinte); }
.akte--portal .einstellung-stand { font-family: var(--p-sans); }

@media (max-width: 960px) {
  .akte--portal .p-held { grid-template-columns: minmax(0, 1fr); }
  .akte--portal .kp-raster { grid-template-columns: minmax(0, 1fr); }
  .p-klappe > summary { padding: 18px 22px; }
  .p-klappe-inhalt { padding: 18px 22px 22px; }
}

/* ------------------------------------------------------------
   Kundenseite, Ergaenzungen 2026-08-25: Zahnrad, kompakte Phasenkarte,
   Google-Cloud-Karte, Tracing-Tabelle, Kachel-Skelett im echten Raster.
   ------------------------------------------------------------ */
/* Das Zahnrad steht in der Zeile der Orte, rechts neben Linear. */
.akte--portal .zahnrad { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--p-linie); border-radius: 999px; background: var(--p-karte); color: var(--p-dim); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.akte--portal .zahnrad:hover { color: var(--p-tinte); border-color: var(--p-tinte); }
.akte--portal .zahnrad:focus-visible { outline: 2px solid var(--p-akzent); outline-offset: 2px; }

/* Phasenkarte kompakt: sie darf nicht hoeher sein als der linke Kopf. */
.akte--portal .p-held-rechts { padding: 14px 20px 16px; gap: 6px; }
.akte--portal .p-held-links .p-augenbraue { margin-bottom: 14px; }
.akte--portal .p-held-links .p-titel { margin-bottom: 18px; }
.akte--portal .p-held-links .akte-orte { margin-top: 18px; }
.akte--portal .p-held-rechts .p-augenbraue { margin-bottom: 0; }
.akte--portal .p-phasenzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.akte--portal .p-phasenzeile .p-held-aktionen { margin-left: auto; margin-top: 0; }
.akte--portal .p-phasenzeile .p-phase-gross { font-size: 1.5rem; margin: 0; line-height: 1.2; }
.akte--portal .p-phasenzeile .chip { font-family: var(--p-sans); }
.akte--portal .p-held-rechts .p-phasen { gap: 6px; }
.akte--portal .p-held-rechts .p-phase { gap: 5px; }
.akte--portal .p-held-rechts .p-phase-name { font-size: 0.6875rem; }
.akte--portal .p-held-rechts .phase-wahl { padding: 4px 28px 4px 10px; font-size: 0.8125rem; min-height: 0; line-height: 1.4; }

/* Google Cloud: Produkt · Bezeichnung mit Zustand · Einzelheiten · Kosten. */
.akte--portal .rollbereich--breit { max-height: none; overflow-x: auto; }
.akte--portal .rollbereich--breit .tabelle thead th { position: static; }
.akte--portal .rollbereich--breit .tabelle { width: 100%; table-layout: fixed; }
.akte--portal .rollbereich--breit:not(.tracing) .tabelle th:nth-child(1) { width: 22%; }
.akte--portal .rollbereich--breit:not(.tracing) .tabelle th:nth-child(2) { width: 28%; }
.akte--portal .rollbereich--breit:not(.tracing) .tabelle th:nth-child(3) { width: 32%; }
.akte--portal .rollbereich--breit:not(.tracing) .tabelle th:nth-child(4) { width: 18%; }
.akte--portal .rollbereich--breit:not(.tracing) .tabelle td { overflow-wrap: anywhere; }
.akte--portal .rollbereich--breit .tabelle td { padding: 10px 12px; font-size: 0.9375rem; vertical-align: top; }
.akte--portal .rollbereich--breit .tabelle td:nth-child(3) { color: var(--p-dim); font-size: 0.875rem; }
.akte--portal .gc-bezeichnung { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.akte--portal .gc-name { font-weight: 600; color: var(--p-tinte); overflow-wrap: anywhere; }
.akte--portal .gc-zustand { font-size: 0.75rem; color: var(--p-dim); letter-spacing: 0.04em; }
.akte--portal .gc-zustand--ok::before { content: "● "; color: var(--p-akzent); }
.akte--portal .rollbereich .tabelle td.zahl, .akte--portal .rollbereich .tabelle th.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.akte--portal .gc-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-linie); color: var(--p-dim); font-size: 0.9375rem; }
.akte--portal .gc-summe-wert { font-family: var(--p-serif); font-size: 1.375rem; font-weight: 600; color: var(--p-tinte); font-variant-numeric: tabular-nums; }
.akte--portal .notiz--leise { background: transparent; border: 0; padding: 12px 0 0; color: var(--p-dim); font-size: 0.875rem; }

/* Tracing ueber die volle Breite, wie in Langfuse: Zeilen sind Beobachtungen. */
.akte--portal .tracing-karte { margin-top: 24px; margin-bottom: 96px; }
.akte--portal .p-karte-rechts { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.akte--portal .tracing { overflow-x: auto; }
.akte--portal .tracing .tabelle { min-width: 1040px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.akte--portal .tracing .tabelle th, .akte--portal .tracing .tabelle td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte--portal .tracing .tabelle th:nth-child(1) { width: 134px; }
.akte--portal .tracing .tabelle th:nth-child(2) { width: 104px; }
.akte--portal .tracing .tabelle th:nth-child(3), .akte--portal .tracing .tabelle th:nth-child(4) { width: 124px; }
.akte--portal .tracing .tabelle th:nth-child(8) { width: 86px; }
.akte--portal .tracing .tabelle th:nth-child(9) { width: 74px; }
.akte--portal .tracing .tabelle th:nth-child(10) { width: 150px; }
.akte--portal .tracing .tabelle th, .akte--portal .tracing .tabelle td { padding-left: 10px; padding-right: 10px; }
.akte--portal .tracing .tabelle td:nth-child(1) { color: var(--p-dim); font-size: 0.875rem; }
.akte--portal .tracing .zeile-knopf { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.akte--portal .tzelle { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--p-dim); font-size: 0.875rem; font-family: var(--font-mono, ui-monospace, monospace); }
.akte--portal .tzelle--name { font-family: var(--p-sans); color: var(--p-text); }
.akte--portal .tracing-zeile { cursor: pointer; }
.akte--portal .tracing-zeile:hover td { background: var(--p-karte-hell); }
.tchip { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; border: 1px solid var(--p-linie); color: var(--p-dim); background: var(--p-karte-hell); line-height: 1.5; }
.tchip--gen { color: #4338CA; border-color: #C7D2FE; background: #EEF2FF; }
.tchip--span { color: #0F766E; border-color: #99F6E4; background: #F0FDFA; }
.tchip--tool { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.tchip--event { color: #6B7280; border-color: #E5E7EB; background: #F9FAFB; }
.tchip--stufe-default { color: var(--p-dim); }
.tchip--stufe-debug { color: var(--p-mute); }
.tchip--stufe-warning { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.tchip--stufe-error { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }
[data-theme="dark"] .tchip--gen { color: #A5B4FC; border-color: #3730A3; background: #1E1B4B; }
[data-theme="dark"] .tchip--span { color: #5EEAD4; border-color: #115E59; background: #042F2E; }
[data-theme="dark"] .tchip--tool, [data-theme="dark"] .tchip--stufe-warning { color: #FCD34D; border-color: #92400E; background: #451A03; }
[data-theme="dark"] .tchip--event { color: #9CA3AF; border-color: #374151; background: #111827; }
[data-theme="dark"] .tchip--stufe-error { color: #FCA5A5; border-color: #991B1B; background: #450A0A; }


@media (max-width: 960px) {
  .akte--portal .tracing-karte { margin-bottom: 48px; }
}

/* Onboarding (2026-08-25): Nachverfolgung in der Kundenportal-Klappe und die Pflege der
   vier Standard-Unterlagen auf der Einstellungsseite. */
.kp-onboarding { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.kp-onboarding .kp-zeile-kopf .kp-titel { margin: 0; }
.ob-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; }
.ob-name { font-weight: var(--weight-semibold); }
/* Vorschau der ersten Seite in der Klappe: klein, mit dem Seitenverhaeltnis des Bilds
   (aspect-ratio aus der API, Vorgabe 16:9), leichter Rand statt Schatten. */
.ob-vorschau { width: 96px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: #fff; display: block; flex: 0 0 auto; }
.ob-unterlagen { margin-top: var(--space-2); }
.kp-status--an { background: var(--text); color: var(--bg); border-color: var(--text); }
.kp-upload--zeile { display: inline-block; margin: 0; padding: 6px 12px; }
.ob-pflege { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.ob-pflege-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.ob-pflege-zeile:first-child { border-top: 0; padding-top: 0; }
.ob-pflege-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
.ob-pflege-felder input { font: inherit; font-size: var(--type-body); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.ob-pflege-aktionen { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.onboarding-unterlagen { margin-top: var(--space-6); }
@media (max-width: 800px) { .ob-pflege-felder { grid-template-columns: minmax(0, 1fr); } }