/* ============================================================
   openKITTI — Arbeitsbereich, Stilblatt des Prototyps

   Baut auf stil.css auf, dem erzeugten Stilblatt des
   Webauftritts. Alles hier verwendet ausschliesslich dessen
   Rollen (--color-surface-*, --color-text-*, --color-border-*,
   --color-interactive*) und Masse (--spacing, --radius-*). In
   dieser Datei steht kein Farbwert.

   AUFBAU. Oben die Kopfzeile mit Organisation, Suche,
   Benachrichtigungen und Benutzer; links die Spalte mit den
   Arbeitsbereichen; rechts der Inhalt; unten der Fuss. Kopfzeile
   und linke Spalte tragen die Dunkelfassung (data-fassung=
   "dunkel"), Inhalt und Fuss die Hellfassung (data-fassung=
   "hell"). Beides sind dieselben Rollen des Webauftritts, nur
   je Teilbereich zugewiesen — die Kontrastpaarungen jeder
   Fassung gelten in ihrem Teil unveraendert.

   Unter 900 px klappt die linke Spalte ueber einen Schalter auf.
   ============================================================ */

/* ---------- Grundmasse -------------------------------------
   Anwendungsdichte: Grundschrift 16 px, Zeilenhoehe 1,5.
   Linksbuendig durchgehend. */
body {
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

/* ---------- Icons ------------------------------------------
   Tabler-Icons als eingebettete SVG-Daten (icons.js). Sie erben
   die Farbe ueber currentColor und tragen keinen eigenen Wert. */
.ab-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -0.25em;
}

.ab-icon svg { width: 100%; height: 100%; }

/* Die Kopfzeile klebt oben: Sprungmarken und Rollen zu einem Element
   halten den Abstand ein, damit das Ziel nicht unter ihr liegt. */
html { scroll-padding-top: calc(var(--spacing) * 16); }

/* ---------- Rahmen: vier Felder ----------------------------
   Eine Spalte unterhalb 900 px: Kopf, Spalte (eingeklappt),
   Inhalt, Fuss. Ab 900 px zwei Spalten: die linke Spalte so
   breit wie ihre Leisten (Ebene 1 15,5 rem, mit Ebene 2 30,5 rem),
   der Rest fuer den Inhalt. Kopf und Fuss laufen ueber beide.
   Der Grund des Rahmens ist der helle Inhaltsgrund, damit rechts
   vom Inhalt nichts Dunkles durchscheint. */
.ab-rahmen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-height: 100dvh;
}

@media (min-width: 900px) {
  .ab-rahmen {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .ab-kopf { grid-column: 1 / -1; }
  .ab-spalte { grid-column: 1; grid-row: 2 / 4; }
  .ab-inhalt { grid-column: 2; grid-row: 2; }
  .ab-fuss { grid-column: 2; grid-row: 3; }
}

/* ---------- Kopfzeile --------------------------------------
   Dunkelfassung. Organisation, Suche, rechts Benachrichtigungen,
   Benutzer mit Rollenwechsel, Abmelden, Entwurfshinweis. */
.ab-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
  min-height: calc(var(--spacing) * 14);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-hairline);
}

.ab-organisation {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Die Wortmarke im Kopf nimmt Schnitt, Schreibweise und Farbe aus
   der Kapsel des Webauftritts (stil.css). Zuvor stand hier die Rolle
   des Ruhezustands; die faellt in der Hellfassung auf Neutral 1000
   und liess die Marke dort anders aussehen als im Webauftritt
   (09.09.2026). --color-text-accent ist die Rolle der Wortmarke. */
.ab-wortmarke { font-weight: var(--wortmarke-leicht); text-transform: var(--wortmarke-schreibweise); }
.ab-wortmarke b { font-weight: var(--wortmarke-fett); color: var(--color-text-accent); text-transform: var(--wortmarke-schreibweise-fett); }

/* Die Marke ueber dem Anmeldefeld: gleicher Abstand nach unten,
   den zuvor die Rubrik hielt. */
.ab-anmeldung-marke { margin: 0 0 calc(var(--spacing) * 6); }

.ab-org-name { font-weight: 500; color: var(--color-text-muted); }

@media (max-width: 1299px) { .ab-org-name { display: none; } }

.ab-kopf-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  margin-left: auto;
  font-size: 0.9375rem;
}

/* ---------- Suche im Kopf ----------------------------------
   Ein Feld mit Vorschlagsliste (Muster: Kombinationsfeld mit
   Auswahlliste). Die Liste ist ein Klappfeld unter dem Feld. */
.ab-suche {
  position: relative;
  flex: 1 1 18rem;
  max-width: 34rem;
  min-width: 12rem;
}

.ab-suche > .ab-icon {
  position: absolute;
  left: calc(var(--spacing) * 3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.ab-suche input {
  width: 100%;
  font: inherit;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(var(--spacing) * 2) calc(var(--spacing) * 9);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.ab-suche input::placeholder { color: var(--color-text-muted); }

/* Taste im Suchfeld: oeffnet die Befehlsleiste. */
.ab-taste {
  position: absolute;
  right: calc(var(--spacing) * 2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ab-taste kbd,
.ab-befehle-fuss kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05em 0.35em;
  border: 1px solid var(--color-border-control);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  color: inherit;
}

.ab-suche:has(.ab-taste:not([hidden])) input { padding-right: 5.75rem; }

@media (max-width: 899px) { .ab-taste { display: none; } }

/* ---------- Klappfelder ------------------------------------
   Suchergebnisse, Benachrichtigungen, Benutzer: ein Feld, das
   sich unter seinem Ausloeser oeffnet. Es traegt die Hellfassung,
   weil es Inhalt ist, kein Rahmen. */
.ab-klappfeld {
  position: absolute;
  top: calc(100% + var(--spacing) * 2);
  z-index: 60;
  min-width: 18rem;
  max-width: min(28rem, 92vw);
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-klappfeld .rubrik { margin-bottom: calc(var(--spacing) * 3); }

.ab-klappfeld .ab-liste li { padding-block: calc(var(--spacing) * 2); }

.ab-suche-ergebnisse {
  left: 0;
  right: 0;
  max-width: none;
  padding: calc(var(--spacing) * 2);
  list-style: none;
  margin: 0;
}

.ab-suche-ergebnisse li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ab-suche-ergebnisse li[aria-selected="true"],
.ab-suche-ergebnisse li:hover { background-color: var(--color-surface-sunken); }

.ab-suche-ergebnisse .ab-icon { color: var(--color-text-muted); }

.ab-suche-ergebnisse .metazeile { display: block; margin: 0; }

.ab-suche-ergebnisse .ab-leer { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); }

/* ---------- Benachrichtigungen, Benutzer -------------------- */
.ab-glocke, .ab-benutzer { position: relative; }

.ab-kopfknopf {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve);
}

@media (hover: hover) {
  .ab-kopfknopf:hover { border-color: var(--color-border-hairline); background-color: var(--color-surface-raised); }
}

.ab-kopfknopf[aria-expanded="true"] { border-color: var(--color-border-control); background-color: var(--color-surface-raised); }

.ab-kopfknopf .ab-icon { width: 1.4em; height: 1.4em; }

/* Fassungsschalter: ein Verweis in der Gestalt der Kopfknoepfe. */
.ab-fassungsschalter { text-decoration: none; }

/* Zaehler an der Glocke und in der Spalte */
.ab-zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding-inline: 0.4em;
  border-radius: 999px;
  background-color: var(--color-interactive);
  color: var(--color-text-on-interactive);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.ab-glocke .ab-klappfeld,
.ab-benutzer .ab-klappfeld { right: 0; }

.ab-benutzer-name { font-weight: 600; }

.ab-benutzer-rolle { color: var(--color-text-muted); }

.ab-klappfeld .ab-rollen {
  display: grid;
  gap: calc(var(--spacing) * 1);
  list-style: none;
  margin: 0 0 calc(var(--spacing) * 4);
  padding: 0;
}

.ab-klappfeld .ab-rollen a {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

@media (hover: hover) {
  .ab-klappfeld .ab-rollen a:hover { background-color: var(--color-surface-sunken); }
}

.ab-klappfeld .ab-rollen a[aria-current="true"] {
  border-color: var(--color-border-brand);
  font-weight: 600;
}

.ab-klappfeld .ab-rollen a[aria-current="true"] .ab-icon { color: var(--color-interactive); }

.ab-klappfeld .ab-rollen a > span { display: grid; }

.ab-klappfeld .ab-rollen .ab-hilfe { margin: 0; font-weight: 400; }

/* Der Umschalter ist ein Mittel der Vorfuehrung; das steht dabei. */
.ab-vorfuehrung {
  margin-left: calc(var(--spacing) * 2);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.ab-menuepunkt,
.ab-abmelden {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-sm);
  color: var(--color-interactive);
  text-decoration: none;
}

.ab-menuepunkt { color: var(--color-text-primary); }

.ab-klappfeld .ab-menuepunkt { display: flex; margin-bottom: calc(var(--spacing) * 1); }

/* ---------- Entwurfshinweis --------------------------------
   Auf jedem Bildschirm sichtbar, unaufdringlich. */
.ab-entwurf {
  display: inline-block;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-notice);
  color: var(--color-text-on-notice);
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* Offene Angabe: dieselbe Flaeche, im Fliesstext. Die Variante
   fuer Fliesstext und Leiste traegt spitze Klammern im Text:
   ⟨Foerderer und Spender⟩ — der Text selbst sagt, dass die
   Stelle offen ist, nicht nur die Farbe. */
.ab-offen {
  display: inline-block;
  padding: 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-notice);
  color: var(--color-text-on-notice);
  font-size: 0.875em;
}

/* Als Verweis (07.09.2026) unterstrichen, damit die Marke als Weg zu
   "Noch nicht entschieden" auf dem Webauftritt erkennbar ist. */
a.ab-offen { text-decoration: underline; text-underline-offset: 0.15em; }

@media (hover: hover) {
  a.ab-offen:hover { text-decoration-thickness: 2px; }
}

/* ---------- Linke Spalte: zwei Ebenen ----------------------
   Dunkelfassung. Ebene 1 (15,5 rem, etwas kleinere Schrift) traegt
   die Bereiche in zwei Gruppen mit Icon und Zaehlersumme; Ebene 2
   (15 rem) oeffnet
   sich rechts daneben mit dem Namen des Bereichs als Kopf und
   seinen Eintraegen, auf der erhoehten Flaeche heller abgesetzt,
   aber Teil der Navigation. Ohne Skripte bleibt die Spalte
   offen: erst data-klappnav="an" klappt sie ein. Ab 1600 px
   stehen beide Leisten nebeneinander im Raster; zwischen 900
   und 1599 px legt sich Ebene 2 ueber den Inhalt, statt ihn zu
   quetschen — dort ist sie beim Laden zu und oeffnet sich auf
   den Bereich (Klick, Pfeil rechts). Unter 900 px stehen beide
   untereinander in der ausgeklappten Spalte. */
.ab-spalte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-hairline);
}

.ab-ebene1,
.ab-ebene2 { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2); }

.ab-ebene2 {
  background-color: var(--color-surface-raised);
  border-top: 1px solid var(--color-border-hairline);
}

.ab-ebene2-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin: 0 calc(var(--spacing) * 1) calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}

.ab-ebene2-titel {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.ab-ebene2-titel .ab-icon { color: var(--color-interactive); flex: 0 0 auto; }

.ab-ebene2-zu {
  display: inline-grid;
  place-items: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ab-ebene2-zu .ab-icon { width: 1.25em; height: 1.25em; }

@media (hover: hover) {
  .ab-ebene2-zu:hover { color: var(--color-text-primary); background-color: var(--color-surface-sunken); }
}

@media (min-width: 900px) {
  .ab-spalte {
    position: sticky;
    top: calc(var(--spacing) * 14);
    align-self: start;
    grid-template-columns: 15.5rem;
    max-height: calc(100dvh - var(--spacing) * 14);
    border-bottom: 0;
    border-right: 1px solid var(--color-border-hairline);
  }

  .ab-ebene1,
  .ab-ebene2 { max-height: calc(100dvh - var(--spacing) * 14); overflow-y: auto; }

  .ab-ebene2 { border-top: 0; border-left: 1px solid var(--color-border-hairline); }

  .ab-klapp { display: none; }
}

/* Zwischen 900 und 1599 px: Ebene 2 liegt ueber dem Inhalt. */
@media (min-width: 900px) and (max-width: 1599px) {
  .ab-spalte { overflow: visible; }

  .ab-ebene2 {
    position: absolute;
    top: 0;
    left: 100%;
    width: 15rem;
    z-index: 5;
    box-shadow: var(--shadow-3);
  }
}

@media (min-width: 1600px) {
  .ab-spalte[data-ebene2-offen] { grid-template-columns: 15.5rem 15rem; }
}

@media (max-width: 899px) {
  :root[data-klappnav="an"] .ab-spalte { display: none; }
  :root[data-klappnav="an"] .ab-rahmen[data-offen] .ab-spalte { display: grid; }
}

.ab-klapp { flex: 0 0 auto; }

.ab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-nav-rubrik {
  margin: calc(var(--spacing) * 4) calc(var(--spacing) * 3) calc(var(--spacing) * 1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ab-nav-rubrik:first-child { margin-top: 0; }

.ab-nav a {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background-color var(--dauer-zustand) var(--kurve);
}

.ab-nav a .ab-icon { color: var(--color-text-muted); }

.ab-nav a > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.ab-nav a .ab-nav-pfeil { width: 0.85em; height: 0.85em; }

/* Offener Eintrag in der Leiste: die Marke laeuft mit dem Text um,
   ein einzelnes Wort bleibt ganz. */
.ab-nav a .ab-offen {
  display: inline;
  font-size: 0.75rem;
  overflow-wrap: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ab-ebene2 .ab-nav a { padding-inline: calc(var(--spacing) * 2); }

.ab-ebene1 .ab-nav a { font-size: 0.875rem; }

@media (hover: hover) {
  .ab-nav a:hover { background-color: var(--color-surface-raised); }
}

/* Der aktive Eintrag: Balken in border-brand, Flaeche, Textfarbe
   (Mint auf der vertieften Flaeche traegt in der Hellfassung
   nicht — hier ist es zwar dunkel, die Regel gilt fuer beide).
   aria-current="page" ist die Seite selbst, "true" der Bereich
   oder Eintrag, zu dem eine Unterseite gehoert. */
.ab-nav a[aria-current="page"],
.ab-nav a[aria-current="true"] {
  border-left-color: var(--color-border-brand);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-weight: 600;
}

.ab-ebene2 .ab-nav a[aria-current="page"],
.ab-ebene2 .ab-nav a[aria-current="true"] { background-color: var(--color-surface-sunken); }

.ab-nav a[aria-current="page"] .ab-icon,
.ab-nav a[aria-current="true"] .ab-icon { color: var(--color-interactive); }

.ab-nav .ab-lesend {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ---------- Inhalt -----------------------------------------
   Hellfassung. Die Flaeche fuellt ihre Spalte; der Inhalt selbst
   ist auf 1400 px begrenzt. */
.ab-inhalt {
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6) calc(var(--spacing) * 16);
  /* Unten bleibt Platz, damit die schwebende Assistenz-Schaltflaeche die
     letzte Zeile einer Liste nicht verdeckt. */
}

@media (min-width: 1400px) {
  .ab-inhalt { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 8); }
}

.ab-inhalt-innen { max-width: 1400px; }

.ab-seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 5);
}

.ab-seitenkopf > div { min-width: 0; }

.ab-seitenkopf .titel-mittel { margin-bottom: calc(var(--spacing) * 1); }

.ab-seitenkopf .metazeile { margin-bottom: calc(var(--spacing) * 1); }

/* Bausteinzeile: welches Programm dahinterliegt. */
.ab-baustein {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

.ab-baustein b { font-weight: 600; color: var(--color-text-primary); }

/* ---------- Schaltflaechen mit Icon ------------------------- */
.knopf .ab-icon { width: 1.2em; height: 1.2em; }

.ab-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 5) 0 0;
}

.ab-seitenkopf .ab-reihe { margin: 0; }

/* ---------- Werkzeugleiste ueber Listen ---------------------
   Suche, Filter als Chips, Zaehler. Muster: Filterleiste. */
.ab-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 4);
}

.ab-werkzeuge .ab-feld { margin: 0; flex: 1 1 14rem; max-width: 24rem; }

.ab-werkzeuge .chipreihe { margin: 0; }

.ab-werkzeuge .ab-anzahl {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---------- Drei Fragen ------------------------------------
   Eine Spalte, ab 1100 px drei. */
.ab-fragen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 7);
}

@media (min-width: 1100px) {
  .ab-fragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ab-frage {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-frage .rubrik {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 3);
}

.ab-frage .rubrik .ab-icon { color: var(--color-interactive); }

.ab-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-liste li {
  padding: calc(var(--spacing) * 1.5) 0;
  border-top: 1px solid var(--color-border-hairline);
}

.ab-liste li:first-child { border-top: 0; padding-top: 0; }

.ab-liste .metazeile { margin: 0; }

.ab-leer {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-hairline);
  border-radius: var(--radius-md);
}
.ab-leer .ab-icon { flex: 0 0 auto; margin-top: 0.15em; }
.ab-suche-ergebnisse .ab-leer,
.ab-befehle-liste .ab-leer { border: 0; }

.ab-frist-naechste {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 calc(var(--spacing) * 1);
}

/* ---------- Fuge -------------------------------------------
   Das Motiv des Arbeitsbereichs: Bloecke mit sichtbaren
   Naehten. Nur im Kachelraster der Uebersicht, bei den Vorhaben
   und in der Bausteinuebersicht. Eine Spalte, ab 640 px zwei,
   ab 1100 px drei. Keine Rundung an den Bloecken: sonst schiene
   die Naht an den Ecken durch.

   Ueberarbeitet am 07.09.2026. Vorher: 2 px Naht am Block und
   2 px Abstand dazwischen — zwischen zwei Kacheln standen damit
   zwei Linien mit einer Lücke, und in der Hellfassung trug die
   Naht den Grundton. Jetzt liegt die Naht ohne Abstand an, so
   dass die Naht der folgenden Kachel die der vorigen verdeckt:
   eine Linie von 1 px, ueberall gleich. Die Farbe ist eine
   eigene Rolle (border-seam): Mint in der Dunkelfassung, eine
   Haarlinie in der Hellfassung. */
.ab-fuge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 1px;
  list-style: none;
  margin: 0;
}

@media (min-width: 640px) { .ab-fuge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-fuge { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Die Spur der Kachel ist nie breiter als der Platz, und lange
   Woerter der Eintraege duerfen brechen (07.09.2026): bei 200 %
   Textgroesse ragte die dritte Kachel sonst aus dem Fenster. */
.ab-fuge > li { display: grid; grid-template-columns: minmax(0, 1fr); box-shadow: 0 0 0 1px var(--color-border-seam); }

.ab-block-eintraege { overflow-wrap: anywhere; }

.ab-block {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 28);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--dauer-zustand) var(--kurve);
}

@media (hover: hover) {
  a.ab-block:hover { background-color: var(--color-surface-sunken); }
}

.ab-block-titel {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text-primary);
}

.ab-block-titel .ab-icon { color: var(--color-interactive); }

a.ab-block:hover .ab-block-titel,
a.ab-block:focus-visible .ab-block-titel { color: var(--color-interactive-hover); }

.ab-block .fliesstext { margin: 0; }

.ab-block .ab-baustein { margin-top: auto; padding-top: calc(var(--spacing) * 2); }

.ab-block-offen { background-color: var(--color-surface-sunken); }

/* Vorhaben (aufgaben.html): breitere Kacheln, so viele wie passen. */
.ab-fuge.ab-vorhaben { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

.ab-block-titel > span,
.ab-block-titel > a { min-width: 0; overflow-wrap: anywhere; }

/* Kachel: der Titel ist ein Verweis; die Eintraege der zweiten Ebene
   stehen als Zeile darunter, offene mit der Marke (AP 2). */
.ab-block-verweis { color: inherit; text-decoration: none; }

.ab-block-verweis:hover,
.ab-block-verweis:focus-visible { color: var(--color-interactive-hover); text-decoration: underline; }

.ab-block-eintraege {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.ab-block-eintraege .textlink { font-weight: 500; }

.ab-block-eintraege .ab-offen { font-size: 0.75rem; }

/* ---------- Abschnitte einer Ansicht ------------------------ */
.ab-abschnitt { margin-bottom: calc(var(--spacing) * 8); }

/* Rubriken tragen im Arbeitsbereich ueberall denselben Abstand; das
   Stilblatt des Webauftritts gibt ihnen 36 px, was Abschnitte ohne
   Rahmen (Uebersicht, Formulargruppen, KI-Ansichten) auseinanderzog. */
.ab-inhalt .rubrik,
.ab-abschnitt > .rubrik { margin-bottom: calc(var(--spacing) * 3); }

.ab-abschnitt > .fliesstext { margin-top: 0; }

/* ---------- Reiter (Verwaltung) ----------------------------
   Muster: Reiterleiste. Der gewaehlte Reiter traegt einen
   Balken in border-brand; der Reiter steht in der Adresse
   (tab=), damit ein Verweis auf einen Abschnitt moeglich bleibt. */
.ab-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1);
  margin: 0 0 calc(var(--spacing) * 6);
  padding: 0;
  border-bottom: 1px solid var(--color-border-divider);
}

.ab-reiter [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .ab-reiter [role="tab"]:hover { color: var(--color-text-primary); }
}

@media (max-width: 1399px) {
  .ab-reiter [role="tab"] { padding-inline: calc(var(--spacing) * 2); font-size: 0.9375rem; }
}

.ab-reiter [role="tab"][aria-selected="true"] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-brand);
}

.ab-reiter [role="tab"][aria-selected="true"] .ab-icon { color: var(--color-interactive); }

/* ---------- Hinweiskasten ---------------------------------- */
.ab-hinweis {
  display: flex;
  gap: calc(var(--spacing) * 3);
  align-items: flex-start;
  margin: 0 0 calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-notice);
  color: var(--color-text-on-notice);
}

.ab-hinweis .ab-icon { margin-top: 0.15em; }

/* ---------- Tabellen ---------------------------------------- */
.ab-tabelle-rahmen {
  overflow-x: auto;
  margin-bottom: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.ab-tabelle { margin-bottom: 0; font-size: 0.9375rem; }

.ab-tabelle caption { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) 0; }

.ab-tabelle th,
.ab-tabelle td {
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-border-hairline);
  vertical-align: top;
}

.ab-tabelle thead th {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ab-tabelle tbody tr:last-child th,
.ab-tabelle tbody tr:last-child td { border-bottom: 0; }

/* Ganze Zeile klickbar, wenn der Zeilenkopf einen Verweis traegt. */
.ab-tabelle tbody tr[data-klickbar] { cursor: pointer; }
.ab-tabelle tbody tr[data-klickbar]:focus-within th,
.ab-tabelle tbody tr[data-klickbar]:focus-within td { background-color: var(--color-surface-sunken); }

@media (hover: hover) {
  .ab-tabelle tbody tr:hover th,
  .ab-tabelle tbody tr:hover td { background-color: var(--color-surface-sunken); }
}

.ab-tabelle th[scope="row"] { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.ab-tabelle th[scope="row"] .ab-hilfe { font-weight: 400; white-space: normal; }
/* Listen mit langen Bezeichnungen im Zeilenkopf (KI-Einsatzorte) duerfen dort umbrechen. */
.ab-umbruch .ab-tabelle th[scope="row"] { white-space: normal; }

.ab-tabelle tr[data-hervor] th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--color-border-brand);
}

.ab-tabelle .abzeichen { white-space: nowrap; }

.ab-tabelle td[data-fest] { white-space: nowrap; }
.ab-tabelle .knopf { white-space: nowrap; } /* Schaltflaechen in Zellen bleiben einzeilig, die Spalte gibt nach */
.ab-tabelle-rahmen[data-karten] .knopf { white-space: normal; } /* in der Kartenform duerfen sie umbrechen */

/* Matrix der Verfuegbarkeiten: Kopfzellen mit Datum und Titel in zwei Zeilen. */
.ab-matrix .ab-tabelle thead th { white-space: pre-line; vertical-align: bottom; }

/* Sortierbare Spaltenkoepfe: der Kopf ist ein Schalter. */
.ab-sortier {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ab-sortier .ab-icon { width: 1em; height: 1em; }

th[aria-sort="ascending"] .ab-sortier,
th[aria-sort="descending"] .ab-sortier { color: var(--color-text-primary); }

/* Verweise in Tabellen brechen bei jeder Breite um; eine fruehere Regel
   hielt sie ab 1400 px einzeilig und machte jede Liste breiter als bei 1280 px. */

@media (max-width: 1399px) {
  .ab-tabelle { font-size: 0.875rem; }
}

/* ---------- Stationen des Vorgangs -------------------------- */
.ab-stationen {
  list-style: none;
  counter-reset: station;
  margin: 0 0 calc(var(--spacing) * 5);
  padding: 0;
}

.ab-stationen li {
  position: relative;
  counter-increment: station;
  padding: calc(var(--spacing) * 1.5) 0 calc(var(--spacing) * 3.5) calc(var(--spacing) * 11);
  border-left: 2px solid var(--color-border-hairline);
  margin-left: calc(var(--spacing) * 4);
}

.ab-stationen li:last-child { border-left-color: transparent; }

.ab-stationen li::before {
  content: counter(station);
  position: absolute;
  left: calc(var(--spacing) * -4 - 1px);
  top: calc(var(--spacing) * 0.5);
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-border-hairline);
  background-color: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
}

.ab-stationen li[data-stand="erledigt"]::before {
  background-color: var(--color-interactive);
  border-color: var(--color-interactive);
  color: var(--color-text-on-interactive);
}

.ab-stationen li[data-stand="erledigt"] { border-left-color: var(--color-border-brand); }

.ab-stationen li[data-stand="aktuell"]::before {
  border-color: var(--color-border-brand);
  color: var(--color-text-primary);
}

.ab-stationen li[data-stand="angefragt"]::before {
  background-color: var(--color-surface-notice);
  border-color: var(--color-surface-notice);
  color: var(--color-text-on-notice);
}

.ab-station-titel { margin: 0; font-weight: 700; }

.ab-stationen .metazeile { margin: 0; }

/* ---------- Vorschlag der Assistenz ------------------------- */
.ab-vorschlag {
  max-width: 44rem;
  padding: calc(var(--spacing) * 5);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.ab-vorschlag .rubrik { margin-bottom: calc(var(--spacing) * 3); }

.ab-vorschlag-herkunft { margin: 0 0 calc(var(--spacing) * 3); }

.ab-vorschlag .ab-hilfe { margin-top: calc(var(--spacing) * 4); }

/* ---------- Ergebnis: Begriff und Wert ----------------------- */
.ab-ergebnis { max-width: 44rem; margin-bottom: calc(var(--spacing) * 5); }

.ab-ergebnis dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  margin: 0;
}

.ab-ergebnis dt { color: var(--color-text-muted); }

.ab-ergebnis dd { margin: 0; }

/* ---------- Formulare -------------------------------------- */
.ab-feld { display: grid; gap: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 4); }

.ab-feld label { font-weight: 600; font-size: 0.9375rem; }

.ab-feld-schmal { max-width: 24rem; }

/* Radiochips: eine Auswahl aus wenigen Werten als Chips mit Kreis. */
fieldset.ab-feld { border: 0; padding: 0; min-width: 0; }

fieldset.ab-feld > legend { padding: 0; margin-bottom: calc(var(--spacing) * 1); font-weight: 600; font-size: 0.9375rem; }
.fliesstext + .ab-feld { margin-top: calc(var(--spacing) * 4); }

.ab-feld .chip { cursor: pointer; gap: calc(var(--spacing) * 2); }

.ab-feld .chip:has(:checked) { border-color: var(--color-border-brand); box-shadow: inset 0 0 0 1px var(--color-border-brand); }

.ab-feld .chip input { margin: 0; }

.ab-feld input,
.ab-feld select,
.ab-feld textarea {
  font: inherit;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.ab-feld input[readonly] { color: var(--color-text-muted); }

.ab-feld input,
.ab-feld select,
.ab-feld textarea { min-width: 0; max-width: 100%; } /* auch Dateifelder halten die Spaltenbreite */

.ab-feld select { width: 100%; }

.ab-feldgruppe { min-width: 0; } /* fieldset wuerde sonst auf min-content bestehen */

.ab-hilfe { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; }

/* ---------- Auswahlliste (Export) ----------------------------- */
.ab-auswahl {
  list-style: none;
  margin: 0 0 calc(var(--spacing) * 4);
  padding: 0;
  display: grid;
  gap: calc(var(--spacing) * 2);
  max-width: 44rem;
}

.ab-auswahl label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  align-items: start;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  cursor: pointer;
}

.ab-auswahl label:has(:checked) { border-color: var(--color-border-brand); }

.ab-auswahl input { margin-top: 0.4em; }

.ab-auswahl .ab-hilfe { display: block; }

/* ---------- Formular: Beleg erfassen -------------------------
   Muster: Pruefung beim Ausfuellen, Fehlerliste mit Sprungmarken.
   Fehlertext auf Kachel ist ein nachgewiesenes Paar; darum liegen
   die Felder auf der erhobenen Flaeche. */
.ab-formular { max-width: 46rem; }

.ab-feldgruppe {
  margin: 0 0 calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-feldgruppe legend { float: left; width: 100%; margin-bottom: calc(var(--spacing) * 3); }

.ab-feldgruppe > legend.nur-vorlesen { float: none; width: 1px; margin: 0; } /* eine nur vorgelesene Beschriftung bleibt ausserhalb des Flusses */

.ab-feldgruppe > :not(legend) { clear: both; }

.ab-feldgruppe > :last-child { margin-bottom: 0; }

.ab-feld-zeile { display: grid; gap: 0 calc(var(--spacing) * 4); }

@media (min-width: 700px) { .ab-feld-zeile { grid-template-columns: 1fr 1fr; } }

.ab-feld[data-fehler] input,
.ab-feld[data-fehler] select {
  border-color: var(--color-text-error);
  box-shadow: inset 0 0 0 1px var(--color-text-error);
}

.ab-fehltext {
  display: flex;
  gap: calc(var(--spacing) * 1);
  align-items: flex-start;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-error);
}

.ab-fehltext .ab-icon { margin-top: 0.1em; }

.ab-fehlerliste {
  margin: 0 0 calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 4);
  border: 2px solid var(--color-text-error);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.ab-fehlerliste:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.ab-fehlerliste-titel {
  display: flex;
  gap: calc(var(--spacing) * 2);
  align-items: center;
  margin: 0 0 calc(var(--spacing) * 2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-error);
}

.ab-fehlerliste ul { margin: 0; padding-left: 1.25rem; }

.ab-fehlerliste a { color: var(--color-text-error); text-decoration: underline; }

.ab-feld input[type="file"] { padding: calc(var(--spacing) * 1.5); }

.ab-feld input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ---------- Befehlsleiste (Strg+K) ------------------------- */
.ab-befehle {
  margin: 12vh auto auto;
  width: min(38rem, 92vw);
  padding: 0;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-befehle::backdrop { background-color: rgb(var(--ton-schatten) / 0.6); }

.ab-befehle-feld {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-border-divider);
}

.ab-befehle-feld .ab-icon { color: var(--color-text-muted); }

.ab-befehle-feld input {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--spacing) * 1) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
}

.ab-befehle-feld input::placeholder { color: var(--color-text-muted); }

.ab-befehle-liste {
  list-style: none;
  margin: 0;
  padding: calc(var(--spacing) * 2);
  max-height: 50vh;
  overflow: auto;
}

.ab-befehle-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ab-befehle-liste li[aria-selected="true"],
.ab-befehle-liste li:hover { background-color: var(--color-surface-sunken); }

.ab-befehle-liste .ab-icon { color: var(--color-text-muted); }

.ab-befehle-liste .metazeile { display: block; margin: 0; }

.ab-befehle-liste .ab-leer { margin: 0; padding: calc(var(--spacing) * 2) 0; }

.ab-befehle-art { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }

.ab-befehle-fuss {
  margin: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-border-divider);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ab-befehle-fuss kbd + kbd { margin-left: 2px; }

/* ---------- Kalender (Termine und Raeume) -------------------
   Muster: Wochenraster ueber sieben Tage, Tagesraster je Raum.
   Stundenlinien sind Elemente, keine Verlaeufe unter Text. */
.ab-ansicht-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 5);
}

.ab-ansicht-leiste .chipreihe { margin: 0; }

.ab-ansicht .chip { gap: calc(var(--spacing) * 1.5); }

.ab-ansicht .chip[aria-current="page"] {
  background-color: var(--color-surface-inverse);
  border-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
}

.ab-kal-zeitraum { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-left: auto; }

.ab-kal-rahmen {
  overflow-x: auto;
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.ab-kal {
  display: grid;
  grid-template-columns: 3.5rem repeat(7, minmax(7rem, 1fr));
}

.ab-kal[data-spalten="5"] { grid-template-columns: 3.5rem repeat(5, minmax(9rem, 1fr)); }

.ab-kal-ecke {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
  border-bottom: 1px solid var(--color-border-divider);
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-text-muted);
}

.ab-kal-kopf {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
  border-left: 1px solid var(--color-border-hairline);
  border-bottom: 1px solid var(--color-border-divider);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ab-kal-kopf b { display: block; font-size: 1rem; color: var(--color-text-primary); }

.ab-kal-kopf[aria-current="date"] { box-shadow: inset 0 -3px 0 var(--color-border-brand); }

.ab-kal-ganztags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 2.25rem;
  padding: calc(var(--spacing) * 1);
  border-left: 1px solid var(--color-border-hairline);
  border-bottom: 1px solid var(--color-border-divider);
}

.ab-kal-zeiten { display: grid; grid-template-rows: repeat(14, 3rem); }

.ab-kal-zeiten span {
  padding-right: calc(var(--spacing) * 1);
  transform: translateY(-0.6em);
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-text-muted);
}

.ab-kal-spalte {
  position: relative;
  display: grid;
  grid-template-rows: repeat(14, 3rem);
  border-left: 1px solid var(--color-border-hairline);
}

.ab-kal-spalte[data-heute] { background-color: var(--color-surface-canvas); }

.ab-kal-slot { border-top: 1px solid var(--color-border-hairline); cursor: pointer; }

.ab-kal-slot:hover { background-color: var(--color-surface-sunken); }

.ab-kal-termin {
  position: absolute;
  top: calc(var(--von) * 3rem + 1px);
  height: calc(var(--dauer) * 3rem - 2px);
  left: calc(var(--spur) / var(--spuren) * 100% + 2px);
  width: calc(100% / var(--spuren) - 4px);
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px 6px;
  border-left: 3px solid var(--color-border-brand);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}

.ab-kal-termin b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ab-kal-termin span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ab-kal-termin:hover { background-color: var(--color-interactive-hover); }

.ab-kal-vergangen {
  border-left-color: var(--color-border-control);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

.ab-kal-vergangen:hover { background-color: var(--color-surface-sunken); }

.ab-kal-frist {
  display: block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-warning);
  color: var(--color-text-on-brand);
  font-size: 0.75rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ab-kal-gewaehlt { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

/* ---------- Belegweg in Spalten ------------------------------
   Muster: Spalten je Stand, Karten je Beleg. Eine Karte laesst
   sich eine Spalte weiterziehen; die Zielspalte zeigt es an. */
.ab-brett-rahmen { overflow-x: auto; padding-bottom: calc(var(--spacing) * 2); }

.ab-brett {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  gap: calc(var(--spacing) * 3);
  align-items: start;
}

.ab-brett-spalte {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.ab-brett-spalte[data-ziel] { border: 1px dashed var(--color-border-brand); }

.ab-brett-spalte[data-ueber] { box-shadow: 0 0 0 2px var(--color-border-brand); }

.ab-brett-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
}

.ab-brett-kopf h3 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.ab-brett-anzahl { font-size: 0.8125rem; white-space: nowrap; color: var(--color-text-muted); }

.ab-brett-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 2);
  min-height: 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-brett-leer {
  padding: calc(var(--spacing) * 4);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  text-align: center;
  color: var(--color-text-muted);
}

.ab-karte {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-left: 3px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-karte[data-meine] { border-left-color: var(--color-border-brand); }

.ab-karte[draggable="true"] { cursor: grab; }

.ab-karte-zieht { border-style: dashed; box-shadow: none; }

.ab-karte .metazeile { margin: 0 0 calc(var(--spacing) * 1); white-space: normal; }

.ab-karte-titel {
  display: block;
  margin-bottom: calc(var(--spacing) * 1);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}

.ab-karte-titel:hover { text-decoration: underline; }

.ab-karte-meta { margin: 0; font-size: 0.875rem; }

.ab-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 2) 0 0;
  font-size: 0.8125rem;
}

.ab-karte-fuss .metazeile { margin: 0; white-space: normal; }

.ab-karte-hinweis { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); color: var(--color-text-muted); }

.ab-karte-schritt { margin: calc(var(--spacing) * 2) 0 0; font-size: 0.875rem; }

.ab-karte-schritt .textlink { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); }

/* ---------- Person ------------------------------------------
   Kopf mit Initialen, Reiter mit Zaehler, Verlauf als Zeitleiste. */
.ab-person-kopf { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 4); }

.ab-person-kopf > div { min-width: 0; }

.ab-person-kopf .titel-mittel { margin-bottom: calc(var(--spacing) * 1); }

.ab-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
  border-radius: 50%;
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ab-person-abzeichen { margin: calc(var(--spacing) * 2) 0; }

.ab-reiter-zahl {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.ab-rolle-vergeben { max-width: 46rem; margin-top: calc(var(--spacing) * 5); }

.ab-rolle-vergeben .ab-feld { max-width: 32rem; }

.ab-verlauf {
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(var(--spacing) * 5);
  border-left: 2px solid var(--color-border-divider);
}

.ab-verlauf li {
  position: relative;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 3);
}

.ab-verlauf li::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing) * -5 - 6px);
  top: calc(var(--spacing) * 2 + 0.35em);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-border-brand);
}

.ab-verlauf li[data-kuenftig]::before { background-color: var(--color-surface-raised); border: 2px solid var(--color-border-control); box-sizing: border-box; }

.ab-verlauf-zeit { font-size: 0.875rem; color: var(--color-text-muted); white-space: nowrap; }

.ab-verlauf-text .metazeile { display: inline; }

@media (max-width: 699px) {
  .ab-verlauf li { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 1); }
}

/* ---------- Ablage: Baum, Inhalt, Vorschau -------------------
   Muster: Ordnerbaum links, Liste in der Mitte, Vorschau rechts. */
.ab-ablage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 5);
  align-items: start;
}

@media (min-width: 1100px) {
  .ab-ablage { grid-template-columns: 15rem minmax(0, 1fr); }
  .ab-ablage[data-tafel-offen] .ab-tafel { grid-column: 1 / -1; position: static; }
}

@media (min-width: 1400px) {
  .ab-ablage[data-tafel-offen] { grid-template-columns: 15rem minmax(0, 1fr) 22rem; }
  .ab-ablage[data-tafel-offen] .ab-tafel { grid-column: auto; position: sticky; }
}

.ab-baum-rahmen {
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  font-size: 0.9375rem;
}

.ab-baum-wurzel,
.ab-baum a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-width: 0;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

.ab-baum-wurzel { display: flex; font-weight: 600; margin-bottom: calc(var(--spacing) * 1); }

.ab-baum a span,
.ab-baum-wurzel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ab-baum a:hover,
.ab-baum-wurzel:hover { background-color: var(--color-surface-sunken); }

.ab-baum a[aria-current="page"],
.ab-baum-wurzel[aria-current="page"] { background-color: var(--color-surface-sunken); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-border-brand); }

.ab-baum a .ab-icon,
.ab-baum-wurzel .ab-icon { color: var(--color-text-muted); flex: 0 0 auto; }

.ab-baum { list-style: none; margin: 0; padding: 0; }

.ab-baum .ab-baum { padding-left: calc(var(--spacing) * 4); }

.ab-baum-zeile { display: flex; align-items: center; gap: calc(var(--spacing) * 0.5); }

.ab-baum-zeile a { flex: 1 1 auto; }

.ab-baum-klapp,
.ab-baum-platz {
  flex: 0 0 auto;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.ab-baum-klapp {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ab-baum-klapp .ab-icon { transition: transform var(--dauer-zustand) var(--kurve); }

.ab-baum-klapp[aria-expanded="true"] .ab-icon { transform: rotate(90deg); }

.ab-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * 2); font-size: 0.875rem; }

.ab-pfad [aria-current="page"] { font-weight: 600; }

.ab-pfad-trenner { color: var(--color-text-muted); }

/* Pfadzeile ueber dem Seitenkopf einer Unterseite */
.ab-pfad-seite { margin-bottom: calc(var(--spacing) * 3); }

.ab-ablage-ordner {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}

.ab-ablage-ordner:hover { text-decoration: underline; }

.ab-ablage-ordner .ab-icon,
.ab-tabelle .textlink .ab-icon { color: var(--color-text-muted); }

.ab-tabelle .textlink { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); }

.ab-vorschau {
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  font-size: 0.875rem;
}

.ab-vorschau p { margin: 0 0 calc(var(--spacing) * 2); }

.ab-vorschau p:last-child { margin-bottom: 0; }

.ab-vorschau-seite {
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-vorschau-seite .metazeile { margin-bottom: calc(var(--spacing) * 3); }

.ab-vorschau-tabelle { padding: 0; overflow-x: auto; }

.ab-vorschau-tabelle table { width: 100%; margin: 0; font-size: 0.8125rem; }

.ab-vorschau-tabelle th,
.ab-vorschau-tabelle td { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }

.ab-vorschau-tafel .titel-klein { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 1.5); }

.ab-vorschau-tafel .titel-klein .ab-icon { margin-top: 0.15em; color: var(--color-text-muted); }

.ab-vorschau-tafel .titel-klein span { overflow-wrap: anywhere; }

.ab-angaben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3); margin: 0; font-size: 0.9375rem; }

.ab-angaben dt { color: var(--color-text-muted); }

.ab-angaben dd { margin: 0; overflow-wrap: anywhere; }

.ab-verlauf-eng li { grid-template-columns: 6rem minmax(0, 1fr); padding-bottom: calc(var(--spacing) * 2); font-size: 0.9375rem; }

/* ---------- Sendung: Rundschreiben ----------------------------
   Stationen quer, Vorschau wie im Postfach, Verteiler, Balken. */
@media (min-width: 900px) {
  .ab-stationen-quer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    border-left: 0;
  }
  .ab-stationen-quer li { margin-left: 0; padding: calc(var(--spacing) * 6) calc(var(--spacing) * 2) 0 0; border-left: 0; border-top: 3px solid var(--color-border-divider); }
  .ab-stationen-quer li::before { left: 0; top: calc(var(--spacing) * -4 - 1px); }
  .ab-stationen-quer li[data-stand="erledigt"] { border-top-color: var(--color-border-brand); }
  .ab-stationen-quer li:last-child { border-top-color: var(--color-border-divider); }
  .ab-stationen-quer li[data-stand="erledigt"]:last-child { border-top-color: var(--color-border-brand); }
  .ab-stationen-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ab-sendung { align-items: start; }

.ab-brief {
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-brief-kopf {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--color-border-divider);
  background-color: var(--color-surface-sunken);
}

.ab-brief-kopf .metazeile { margin: 0 0 calc(var(--spacing) * 1); }

.ab-brief-text { padding: calc(var(--spacing) * 5); max-width: 62ch; }

.ab-brief-anrede { margin: 0 0 calc(var(--spacing) * 4); }

.ab-brief-titel { margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 1); font-size: 1.0625rem; font-weight: 700; }

.ab-brief-text p { margin: 0 0 calc(var(--spacing) * 3); }

.ab-verteiler-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); margin: 0; }

.ab-verteiler-zeile .ab-icon { color: var(--color-text-muted); }

.ab-verteiler-zahl { margin-left: auto; font-size: 0.875rem; color: var(--color-text-muted); }

.ab-balken { margin-bottom: calc(var(--spacing) * 3); }

.ab-balken-zeile { display: flex; align-items: center; gap: calc(var(--spacing) * 2); margin: 0 0 calc(var(--spacing) * 1); font-size: 0.9375rem; }

.ab-balken-zeile .ab-icon { color: var(--color-text-muted); }

.ab-balken-zeile b { margin-left: auto; }

.ab-balken-spur { height: calc(var(--spacing) * 2.5); border-radius: 999px; background-color: var(--color-surface-sunken); overflow: hidden; }

.ab-balken-wert { width: var(--anteil, 0%); height: 100%; border-radius: 999px; background-color: var(--color-surface-brand); }

/* ---------- Haushalt: Kennzahlen, Balken mit zwei Anteilen -------
   Muster: Kennzahlenreihe; Balken, dessen zweiter Anteil (im
   Belegweg) schraffiert ist — ein Muster statt einer zweiten
   Farbe. Knapp und ueberschritten faerben die Flaeche mit den
   Rollen warning und error; das Abzeichen sagt es in Worten. */
.ab-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 3);
}

@media (min-width: 1100px) {
  .ab-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Betraege bleiben einzeilig; bei vier schmalen Kacheln kleiner, statt
   das Eurozeichen in die naechste Zeile zu brechen. */
.ab-kennzahl-wert { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .ab-kennzahl-wert { font-size: 1.5rem; }
}

.ab-kennzahl {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-kennzahl .rubrik { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); }

.ab-kennzahl .rubrik .ab-icon { color: var(--color-interactive); }

.ab-kennzahl-wert { margin: 0 0 calc(var(--spacing) * 1); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Kennzahl mit Text statt Zahl (Zeitraum): kleiner, damit sie in die Kachel passt. */
.ab-kennzahl-wert.ab-kennzahl-klein { font-size: 1.125rem; white-space: normal; }

.ab-kennzahl .metazeile { margin: 0; }

.ab-herkunft { display: flex; gap: calc(var(--spacing) * 2); margin: 0 0 calc(var(--spacing) * 4); }

.ab-herkunft .ab-icon { flex: 0 0 auto; }

.ab-kostenstellen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
}

@media (min-width: 1100px) {
  .ab-kostenstellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ab-kostenstelle {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.ab-kostenstelle .ab-balken-zeile { flex-wrap: wrap; }

.ab-kostenstelle .metazeile { margin: calc(var(--spacing) * 1.5) 0 0; }

.ab-haushalt-spur { display: flex; }

.ab-haushalt-spur .ab-balken-wert { border-radius: 0; }

.ab-balken-vorgemerkt {
  width: var(--anteil, 0%);
  height: 100%;
  background-image: repeating-linear-gradient(135deg, var(--color-surface-brand) 0 3px, transparent 3px 7px);
}

.ab-haushalt-spur[data-lage="knapp"] .ab-balken-wert { background-color: var(--color-surface-warning); }

.ab-haushalt-spur[data-lage="knapp"] .ab-balken-vorgemerkt { background-image: repeating-linear-gradient(135deg, var(--color-surface-warning) 0 3px, transparent 3px 7px); }

.ab-haushalt-spur[data-lage="ueber"] .ab-balken-wert { background-color: var(--color-surface-error); }

.ab-haushalt-spur[data-lage="ueber"] .ab-balken-vorgemerkt { background-image: repeating-linear-gradient(135deg, var(--color-surface-error) 0 3px, transparent 3px 7px); }

.ab-legende {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 5);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ab-legende > span { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); }

.ab-legende-muster {
  display: inline-block;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 2.5);
  border-radius: 999px;
  background-color: var(--color-surface-brand);
}

.ab-legende-muster[data-art="vorgemerkt"] {
  background-color: var(--color-surface-sunken);
  background-image: repeating-linear-gradient(135deg, var(--color-surface-brand) 0 3px, transparent 3px 7px);
}

.ab-haushalt-liste th[scope="row"] { min-width: 12rem; white-space: normal; }

.ab-haushalt-liste th[scope="row"] .metazeile { margin: calc(var(--spacing) * 0.5) 0 0; font-weight: 400; }

.ab-haushalt-liste .ab-sortier { white-space: normal; text-align: left; }

.ab-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }

.ab-mini > span:not(.abzeichen) { white-space: nowrap; }

.ab-mini .ab-balken-spur { width: 6rem; }

.ab-tafel .ab-haushalt-spur { margin-bottom: calc(var(--spacing) * 3); }

/* ---------- Ehrenamt: Einsatzkarten und Verfuegbarkeiten -------- */
.ab-einsaetze { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 4); }

@media (min-width: 1100px) { .ab-einsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ab-einsatz {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-left: 4px solid var(--color-border-brand);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-einsatz[data-offen] { border-left-color: var(--color-surface-warning); }

.ab-einsatz-kopf { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 3); }

.ab-einsatz-kopf > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.ab-einsatz-kopf .abzeichen { flex: 0 0 auto; white-space: nowrap; }

.ab-einsatz-datum {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 15);
  padding: calc(var(--spacing) * 2) 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.ab-einsatz-datum b { font-size: 1.125rem; }

.ab-einsatz-datum span { font-size: 0.75rem; color: var(--color-text-muted); }

.ab-einsatz-titel { margin: 0 0 calc(var(--spacing) * 1); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }

.ab-einsatz .fliesstext { margin: calc(var(--spacing) * 1) 0 0; font-size: 0.9375rem; }

.ab-einsatz-rubrik { margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 1); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }

.ab-personenreihe { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4); margin: 0; padding: 0; list-style: none; }

.ab-personenreihe li { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); }

.ab-avatar-klein { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); font-size: 0.6875rem; }

.ab-einsatz-zusage { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); }

.ab-einsatz-reihe { margin: calc(var(--spacing) * 4) 0 0; }

.ab-verfuegbar { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); white-space: nowrap; }

.ab-verfuegbar .ab-icon { color: var(--color-interactive); }

.ab-verfuegbar-nein .ab-icon,
.ab-verfuegbar-offen .ab-icon { color: var(--color-text-muted); }

.ab-verfuegbar-nein,
.ab-verfuegbar-offen { color: var(--color-text-muted); }

/* ---------- Assistenz: Schaltflaeche unten rechts, Chatfenster ----
   Nicht modal. Die Antworten stehen als Nachrichten, jede mit
   Herkunftszeile. */
.ab-inhalt { padding-bottom: calc(var(--spacing) * 24); }

.ab-assistenz-knopf {
  position: fixed;
  right: calc(var(--spacing) * 5);
  bottom: calc(var(--spacing) * 5);
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
  border: 0;
  border-radius: 999px;
  background-color: var(--color-interactive);
  color: var(--color-text-on-interactive);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--shadow-3);
  cursor: pointer;
}

.ab-assistenz-knopf:hover { background-color: var(--color-interactive-hover); }

.ab-assistenz-knopf[aria-expanded="true"] { background-color: var(--color-surface-inverse); color: var(--color-text-on-inverse); }

/* Nach dem Scrollen nur das Symbol; Beschriftung beim Ueberfahren oder mit Fokus. */
.ab-assistenz-knopf[data-klein]:not([aria-expanded="true"]):not(:hover):not(:focus-visible) { gap: 0; padding: calc(var(--spacing) * 3); }
.ab-assistenz-knopf[data-klein]:not([aria-expanded="true"]):not(:hover):not(:focus-visible) span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ab-assistenz {
  position: fixed;
  right: calc(var(--spacing) * 5);
  bottom: calc(var(--spacing) * 18);
  z-index: 66;
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100vw - var(--spacing) * 10));
  max-height: min(70vh, 42rem);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-assistenz[hidden] { display: none; }

/* Als Seite (assistenz.html): im Inhalt statt schwebend. */
.ab-assistenz.ab-assistenz-seite {
  position: static;
  width: min(48rem, 100%);
  max-height: none;
  min-height: 28rem;
  box-shadow: none;
}

/* Pruefliste eines Vorgangs (Aufnahme und Verabschiedung, AP 6):
   Stand als Abzeichen, dann Schritt, Datum und Hinweis. */
.ab-pruefliste {
  display: grid;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.ab-pruefliste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  align-items: start;
  padding: calc(var(--spacing) * 2) 0;
  border-top: 1px solid var(--color-border-hairline);
}

.ab-pruefliste li[data-stand="erledigt"] > span:last-child { color: var(--color-text-muted); }

.ab-pruef-stand { min-width: 5.5rem; }

.ab-pruefliste .ab-hilfe { margin: calc(var(--spacing) * 1) 0 0; }

.ab-einsatz[data-hervor] { box-shadow: 0 0 0 2px var(--color-border-brand); }

/* Kopf eines Vorgangs ohne Datumsfeld: der Text nimmt die Breite. */
.ab-vorgang-kopf > div:first-child { flex: 1 1 auto; min-width: 0; }

/* Protokoll: Abschnitte mit Nummer; der ueber die Adresse gemeinte
   Abschnitt ist hervorgehoben. */
.ab-protokoll-abschnitt {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  margin-bottom: calc(var(--spacing) * 4);
}

.ab-protokoll-abschnitt[data-hervor] { border-color: var(--color-border-brand); box-shadow: 0 0 0 2px var(--color-border-brand); }

.ab-protokoll-abschnitt .titel-klein { margin: 0 0 calc(var(--spacing) * 2); }

.ab-protokoll-abschnitt .ab-einsatz-rubrik { margin-top: calc(var(--spacing) * 3); }

.ab-assistenz-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-border-divider);
}

.ab-assistenz-kopf .titel-klein { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); margin: 0; }

.ab-assistenz-kopf .titel-klein .ab-icon { color: var(--color-interactive); }

.ab-assistenz-regeln {
  margin: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-border-divider);
  background-color: var(--color-surface-notice);
  color: var(--color-text-on-notice);
  font-size: 0.8125rem;
}

.ab-assistenz-verlauf {
  flex: 1 1 auto;
  min-height: 10rem;
  overflow: auto;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  background-color: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-divider);
}

.ab-nachricht {
  max-width: 90%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
}

.ab-nachricht p { margin: 0 0 calc(var(--spacing) * 1.5); }

.ab-nachricht p:last-child { margin-bottom: 0; }

.ab-nachricht[data-von="ich"] {
  align-self: flex-end;
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
}

.ab-nachricht[data-von="assistenz"] {
  align-self: flex-start;
  border: 1px solid var(--color-border-divider);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.ab-nachricht ul { margin: 0 0 calc(var(--spacing) * 1.5); padding-left: 1.2rem; }

.ab-nachricht li { margin-bottom: calc(var(--spacing) * 1); }

.ab-nachricht .metazeile { margin: 0; font-size: 0.75rem; }

.ab-assistenz-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1.5);
  padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 2);
}

.ab-assistenz-vorschlaege .chip { min-height: calc(var(--spacing) * 8); padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); font-size: 0.8125rem; }

.ab-assistenz-eingabe {
  display: flex;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-border-divider);
}

.ab-assistenz-eingabe input {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  font: inherit;
}

.ab-assistenz-eingabe input::placeholder { color: var(--color-text-muted); }

.ab-assistenz-eingabe .knopf { padding-inline: calc(var(--spacing) * 3); }

@media (max-width: 899px) {
  .ab-assistenz { right: calc(var(--spacing) * 3); left: calc(var(--spacing) * 3); width: auto; }
  .ab-assistenz-knopf span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* nur visuell verborgen */
}

/* ---------- Bestaetigungsdialog ------------------------------ */
.ab-dialog {
  margin: auto; /* die Grundzuruecksetzung des Stilblatts nimmt dem Dialog die Mitte */
  max-width: 34rem;
  padding: calc(var(--spacing) * 6);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-dialog::backdrop { background-color: rgb(var(--ton-schatten) / 0.6); }

.ab-dialog .titel-klein { margin-top: 0; }

/* ---------- Zwei Spalten ------------------------------------ */
.ab-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 6);
}

@media (min-width: 1400px) {
  .ab-zweispaltig { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---------- Detailtafel (Person) ----------------------------
   Muster: Liste mit Detailtafel. Ab 1100 px rechts neben der
   Liste, darunter unter ihr. */
.ab-mit-tafel { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 5); align-items: start; }

@media (min-width: 1100px) {
  .ab-mit-tafel[data-tafel-offen] { grid-template-columns: minmax(0, 1fr) 24rem; }
}

.ab-tafel {
  position: sticky;
  top: calc(var(--spacing) * 18);
  padding: calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-2);
}

.ab-tafel-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 4);
}

.ab-tafel-kopf .titel-klein { margin: 0; }

.ab-tafel .rubrik { margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 2); }

.ab-tafel .rubrik:first-of-type { margin-top: 0; }

.ab-tafel .ab-ergebnis { margin-bottom: 0; }

.ab-tafel-zu {
  display: inline-grid;
  place-items: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ---------- Toast ------------------------------------------
   Muster: Rueckmeldung nach einer Handlung. Unten rechts,
   verschwindet nach einigen Sekunden oder auf Klick. */
.ab-toast {
  position: fixed;
  right: calc(var(--spacing) * 5);
  bottom: calc(var(--spacing) * 20); /* ueber der Schaltflaeche der Assistenz */
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  max-width: min(28rem, 92vw);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-toast .ab-icon { color: var(--color-interactive); margin-top: 0.15em; }

.ab-toast p { margin: 0; }

.ab-toast-zu {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* ---------- Anmeldung --------------------------------------
   Dunkle Seite, helle Karte: die Anmeldung ist der Rahmen, die
   Karte der Inhalt. */
.ab-anmeldung {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-content: center;
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
}

.ab-anmeldung-feld {
  width: min(100%, 30rem);
  padding: calc(var(--spacing) * 7);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-3);
}

.ab-anmeldung .ab-entwurf { display: table; margin-bottom: calc(var(--spacing) * 5); }

/* Der Satz unter dem Feld steht auf dem dunklen Grund, nicht im
   Feld: er gilt der Demo als ganzer, nicht der Anmeldung. Gleiche
   Breite wie das Feld. */
/* Abstand zwischen der Organisation und dem Formular: die
   Erklärsätze, die ihn bisher trugen, sind entfallen. */
.ab-anmeldung-feld form { margin-top: calc(var(--spacing) * 6); }

.ab-anmeldung-satz {
  width: min(100%, 30rem);
  margin: calc(var(--spacing) * 5) 0 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ---------- Fuss -------------------------------------------- */
.ab-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  align-items: center;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  border-top: 1px solid var(--color-border-hairline);
  background-color: var(--color-surface-canvas);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.ab-fuss p { margin: 0; }

/* ---------- Rundgang fuer die Vorfuehrung ------------------
   Stationen als nummerierte Karten mit Sprechertext und Klicks.
   Im Druck ohne Rahmen: die Karten sind die Sprecherliste. */
.ab-rundgang { max-width: 56rem; }

.ab-rundgang-regeln { margin-bottom: calc(var(--spacing) * 6); }

.ab-rundgang-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.ab-station-karte {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
}

.ab-station-kopf { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 3); }

.ab-station-nummer {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  border-radius: 50%;
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
  font-weight: 700;
}

.ab-station-name { margin: 0 0 calc(var(--spacing) * 1); font-size: 1.125rem; }

.ab-station-klicks { margin: 0; padding-left: 1.4rem; }

.ab-station-klicks li { margin-bottom: calc(var(--spacing) * 1); }

.ab-anmeldung-rundgang { margin: calc(var(--spacing) * 5) 0 0; }

.ab-anmeldung-rundgang .ab-icon { vertical-align: -0.2em; }

@media print {
  .ab-kopf, .ab-spalte, .ab-fuss, .ab-assistenz-knopf, .ab-assistenz, .ab-toast, .ab-rundgang .ab-werkzeuge, .ab-rundgang .ab-reihe, .ab-pfad-seite { display: none !important; }
  .ab-rahmen { display: block; }
  .ab-inhalt { padding: 0; }
  .ab-station-karte { break-inside: avoid; box-shadow: none; }
}

/* ---------- Schmale Breite ---------------------------------
   Unter 900 px: Kopfzeile in zwei Zeilen (Bereiche, Marke,
   Glocke, Benutzer; darunter die Suche), Belegweg untereinander,
   Tafeln vor der Liste. Unter 640 px werden Tabellen zu Karten:
   jede Zeile ein Kasten, jede Zelle mit ihrem Spaltennamen. Die
   Matrix der Verfuegbarkeiten bleibt Tabelle und rollt. */
@media (max-width: 899px) {
  .ab-kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "klapp marke rechts" "suche suche suche";
    align-items: center;
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  }
  .ab-klapp { grid-area: klapp; }
  .ab-organisation { grid-area: marke; }
  .ab-suche { grid-area: suche; max-width: none; min-width: 0; }
  .ab-kopf-rechts { grid-area: rechts; flex-wrap: nowrap; margin-left: 0; gap: calc(var(--spacing) * 1); }
  .ab-kopf .ab-entwurf { display: none; } /* steht im Fuss */
  .ab-klapp span:last-child,
  .ab-benutzer-name,
  .ab-benutzer-rolle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* nur visuell verborgen: der Name bleibt fuer Hilfstechnik */
  .ab-kopfknopf { padding: calc(var(--spacing) * 2); }
  .ab-brett { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .ab-toast { left: calc(var(--spacing) * 3); right: calc(var(--spacing) * 3); max-width: none; }
}

@media (max-width: 1099px) {
  .ab-mit-tafel[data-tafel-offen] .ab-tafel,
  .ab-ablage[data-tafel-offen] .ab-tafel { order: -1; position: static; }
}

@media (max-width: 639px) {
  .ab-tabelle-rahmen[data-karten] { overflow: visible; border: 0; background: none; }
  .ab-tabelle-rahmen[data-karten] table { display: block; }
  .ab-tabelle-rahmen[data-karten] caption { display: block; padding: 0 0 calc(var(--spacing) * 2); }
  .ab-tabelle-rahmen[data-karten] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ab-tabelle-rahmen[data-karten] tbody { display: grid; gap: calc(var(--spacing) * 3); }
  .ab-tabelle-rahmen[data-karten] tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
  }
  .ab-tabelle-rahmen[data-karten] tr[data-hervor] { box-shadow: inset 3px 0 0 var(--color-border-brand); }
  .ab-tabelle-rahmen[data-karten] tr[data-hervor] th[scope="row"] { box-shadow: none; }
  .ab-tabelle-rahmen[data-karten] th[scope="row"] { display: block; padding: 0 0 calc(var(--spacing) * 2); border: 0; font-size: 1rem; white-space: normal; }
  .ab-tabelle-rahmen[data-karten] td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: calc(var(--spacing) * 2);
    align-items: start;
    padding: calc(var(--spacing) * 1) 0;
    border: 0;
    white-space: normal;
  }
  .ab-tabelle-rahmen[data-karten] td::before { content: attr(data-spalte); font-size: 0.8125rem; color: var(--color-text-muted); }
  .ab-tabelle-rahmen[data-karten] td[data-spalte=""] { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--spacing) * 2); }
  .ab-tabelle-rahmen[data-karten] td[data-spalte=""]::before { content: none; }
  .ab-tabelle-rahmen[data-karten] tr:hover th,
  .ab-tabelle-rahmen[data-karten] tr:hover td { background: none; }
  .ab-mini .ab-balken-spur { width: 5rem; }
}

@media (max-width: 479px) {
  .ab-kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .ab-seitenkopf .ab-reihe { width: 100%; }
  .ab-seitenkopf .ab-reihe .knopf { flex: 1 1 auto; justify-content: center; }
  .ab-dialog { padding: calc(var(--spacing) * 4); }
}

/* Einstieg in den KI-Auftrag im Assistenz-Fenster */
.ab-assistenz-auftrag { margin: 0; padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 2); font-size: 0.875rem; }

.ab-assistenz-auftrag a { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); }

/* ============================================================
   Kommunikation (kanaele.html)
   Ein Kanal je Ansicht. Der Chat zeigt die Raumliste links und den
   gewaehlten Raum rechts, Nachrichten als Blasen; das Transkript
   steht als Zeilen mit Zeit, Sprecher und Text. Nur Rollen.
   ============================================================ */
.kk-kanal { min-width: 0; }

/* Die Tafel kann lang werden (Transkript): sie rollt in sich, statt
   unter dem Rand zu verschwinden. */
.kk .ab-tafel { max-height: calc(100vh - var(--spacing) * 22); overflow: auto; }

/* Die Tafel steht ueber der Liste, in jeder Breite: neben einer
   Liste mit vier oder fuenf Spalten bliebe ihr kein Platz. Der Text
   darin haelt Lesebreite. */
.kk[data-tafel-offen] { grid-template-columns: minmax(0, 1fr); }

.kk[data-tafel-offen] .ab-tafel { order: -1; position: static; }

.kk .ab-tafel .kk-transkript,
.kk .ab-tafel .ab-liste,
.kk .ab-tafel .fliesstext,
.kk .ab-tafel .ab-hinweis { max-width: 72ch; }

.kk-mehr { margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 8); }

/* Chat: Raumliste und Raum. Ab 900 px nebeneinander, darunter die
   Raeume als Reihe ueber dem Gespraech. */
.kk-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 5);
  align-items: start;
}

@media (min-width: 900px) {
  .kk-chat { grid-template-columns: 16rem minmax(0, 1fr); }
}

.kk-raeume ul { display: grid; gap: calc(var(--spacing) * 1); margin: 0; padding: 0; list-style: none; }

@media (max-width: 899px) {
  .kk-raeume ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: calc(var(--spacing) * 1); }
  .kk-raeume .kk-raum-name,
  .kk-raeume .ab-hilfe { white-space: nowrap; }
}

.kk-raeume a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon name neu" "icon meta neu";
  column-gap: calc(var(--spacing) * 2);
  align-items: center;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
}

.kk-raeume a .ab-icon { grid-area: icon; color: var(--color-text-accent); }

.kk-raeume .kk-raum-name { grid-area: name; font-weight: 700; }

.kk-raeume .ab-hilfe { grid-area: meta; margin: 0; }

.kk-raeume .abzeichen { grid-area: neu; }

.kk-raeume a:hover { background-color: var(--color-surface-sunken); }

.kk-raeume a[aria-current="page"] { background-color: var(--color-surface-sunken); border-color: var(--color-border-brand); }

.kk-raeume a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.kk-raum {
  min-width: 0;
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
}

.kk-raum-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-border-hairline);
}

.kk-raum-kopf .titel-klein,
.kk-raum-kopf .metazeile { margin: 0; }

/* Der Aus-Zustand am Wirkort (15.09.2026, B4): eine ruhige Zeile
   dort, wo die Zusammenfassung erschiene. Kein Warnton — die
   Abschaltung ist eine Entscheidung, kein Fehler; darum die Flaeche
   der Vermerke und nicht die der Warnung. */
.kk-aus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  margin: 0 0 calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  font-size: 0.875rem;
}

.kk-aus-satz {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  color: var(--color-text-primary);
}

.kk-aus .ab-hilfe { margin: 0; }

.kk-nachrichten {
  display: grid;
  gap: calc(var(--spacing) * 2);
  max-height: min(34rem, 60vh);
  margin: 0 0 calc(var(--spacing) * 3);
  padding: 0;
  overflow: auto;
  list-style: none;
}

/* Blasen auf dem Seitengrund mit Haarlinie: Verweise darin sind als
   "Verweis auf Grund" gemessen; die vertiefte Flaeche truege sie nicht. */
.kk-nachricht {
  max-width: 92%;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-canvas);
}

.kk-nachricht p { margin: 0; }

.kk-nachricht p + p { margin-top: calc(var(--spacing) * 1); }

.kk-nachricht[data-von="assistenz"] { border-left: 3px solid var(--color-border-brand); }

.kk-nachricht[data-von="ich"] { justify-self: end; }

.kk-eingabe { display: flex; gap: calc(var(--spacing) * 2); }

.kk-eingabe input { flex: 1 1 auto; min-width: 0; }

.kk-transkript { display: grid; gap: calc(var(--spacing) * 3); margin: 0; padding: 0; list-style: none; }

.kk-zeile { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0 calc(var(--spacing) * 3); }

.kk-zeit { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--color-text-muted); }

.kk-sprecher { font-weight: 700; }

.kk-text { grid-column: 2; }

.ab-herkunft-liste { list-style: none; margin: 0 0 calc(var(--spacing) * 4); padding: 0; }

/* --- Dokument im Browser (Platzhalter 2): Seitenansicht, Bearbeitung --- */
.ab-dokument-seite {
  max-width: 52rem;
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 10);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-1);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ab-dokument-seite p { margin: 0 0 calc(var(--spacing) * 3); }

.ab-dokument-seite p:last-child { margin-bottom: 0; }

.ab-dokument-seite .metazeile { margin-bottom: calc(var(--spacing) * 5); }

#dok-text { min-height: 24rem; font-family: inherit; line-height: 1.6; }

.ab-dokument-tabelle { margin-top: calc(var(--spacing) * 2); }

.ab-dokument-tabelle td { padding: calc(var(--spacing) * 1); }

.ab-dokument-tabelle input { width: 100%; min-width: 9rem; }

/* --- Sitzung (sitzung.html): Buehne mit Kacheln, Schalter --------------- */
.ab-sitzung-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: calc(var(--spacing) * 3);
  margin: 0 0 calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  list-style: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
}

.ab-sitzung-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  text-align: center;
}

.ab-sitzung-ich { border-color: var(--color-border-strong); }

.knopf[aria-pressed="false"] { text-decoration: line-through; }

.ab-textknopf { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* --- KI-Ansichten: Marke, Schalter, Fusszeile ------------------------- */
.ab-ki-marke {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding: 0 calc(var(--spacing) * 2);
  border: 1px solid var(--color-border-hairline);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.ab-ki-marke .ab-icon { width: 1em; height: 1em; }

.ab-ki-marke:hover,
.ab-ki-marke:focus-visible { color: var(--color-text-primary); border-color: var(--color-border-strong); text-decoration: underline; }

.ab-ki-marke-platz { font-weight: 400; letter-spacing: 0; text-transform: none; }

.ab-fuss-ki { margin-left: auto; }

.ab-schalter {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.ab-schalter:disabled { cursor: default; color: var(--color-text-muted); }

.ab-schalter-knopf {
  position: relative;
  width: 2.5rem;
  height: 1.375rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background-color: var(--color-surface-sunken);
}

.ab-schalter-knopf::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-border-strong);
}

.ab-schalter[aria-checked="true"] .ab-schalter-knopf { background-color: var(--color-border-strong); }

.ab-schalter[aria-checked="true"] .ab-schalter-knopf::after { left: auto; right: 2px; background-color: var(--color-surface-raised); }

.ab-schalter-text { font-size: 0.875rem; font-weight: 600; }

.ab-ki-satz { margin-bottom: calc(var(--spacing) * 4); }

#ki-einsatz td[data-spalte="Funktion"],
#ki-einsatz td[data-spalte="Sieht diese Daten"] { min-width: 16rem; }

.ab-ki-beispiel {
  margin-bottom: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
}

.ab-ki-frage,
.ab-ki-antwort { display: grid; grid-template-columns: 6rem 1fr; gap: calc(var(--spacing) * 3); align-items: baseline; margin: 0; }

.ab-ki-frage { padding-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); border-bottom: 1px solid var(--color-border-hairline); font-weight: 600; }

.ab-ki-antwort .fliesstext { margin: 0 0 calc(var(--spacing) * 2); }

@media (max-width: 640px) { .ab-ki-frage, .ab-ki-antwort { grid-template-columns: 1fr; } }

.ab-ki-antwort .metazeile { grid-column: 2; }

.ab-vorschlag[data-stand="offen"] { border-color: var(--color-border-strong); }

.ab-vorschlag-rueckverweis { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 1); margin: 0 0 calc(var(--spacing) * 3); font-size: 0.875rem; color: var(--color-text-muted); }

.kk-zeile[data-hervor] { background-color: var(--color-surface-notice); }

.ab-ki-schalterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); }

.ab-ablauf-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ab-ablauf-satz {
  margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-left: 3px solid var(--color-border-strong);
  background-color: var(--color-surface-sunken);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ab-ki-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }

@media (max-width: 720px) { .ab-ablauf-felder { grid-template-columns: 1fr; } }

.ab-ki-weg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: calc(var(--spacing) * 4);
  margin: 0 0 calc(var(--spacing) * 6);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ab-ki-schritt {
  display: flex;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
}

.ab-ki-schritt .ab-einsatz-rubrik { margin-top: 0; }

.ab-ki-schritt .fliesstext { margin: 0 0 calc(var(--spacing) * 2); }

.ab-ki-schritt-nr {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-weight: 700;
  text-align: center;
  line-height: 2rem;
}

.ab-anmeldung-ki .ab-ki-marke { margin-top: calc(var(--spacing) * 1); }

/* --- Ausgebaute offene Eintraege: enge Listen in Tabellenzellen ---------- */
.ab-liste-eng { margin: 0; padding-left: 1.1em; }

.ab-liste-eng li { margin: 0 0 calc(var(--spacing) * 1); }

.ab-stationen-klein { margin-bottom: calc(var(--spacing) * 3); }

.ab-stationen-klein li { padding-bottom: calc(var(--spacing) * 2); }