:root {
  /* Optimizely Axiom Design System. Der vollstaendige Token-Satz liegt in
     docs/axiom-tokens.json (ueber @optiaxiom/mcp abgerufen) -- die Namen in den
     Kommentaren sind die dortigen, damit nachvollziehbar bleibt, woher jeder
     Wert stammt.

     Der Plan verlangt @optiaxiom/react fuer die Oberflaechen. Hier laufen die
     Tokens durch eine handgeschriebene CSS-Datei statt durch React-Komponenten
     -- der Grund steht in docs/adr/000-stack-abweichung.md. Die Werte sind
     dieselben, das Aussehen ist es damit auch.

     Die Akzentfarbe ist ein kraeftiges Limettengruen und traegt IMMER dunklen
     Text. Weiss darauf waere unlesbar. */

  --bg: #F9FCF8;              /* bg.page */
  --panel: #FFFFFF;           /* bg.default */
  --panel-2: #EFF5EB;         /* bg.secondary */
  --line: #D8E4CB;            /* border.default */

  --text: #202320;            /* fg.default */
  --muted: #484E46;           /* fg.secondary */
  --fg-white: #FFFFFF;        /* fg.white */
  --fg-black: #202320;        /* fg.black */
  --fg-disabled: #A1AC8D;     /* fg.disabled */
  --fg-error-strong: #5D2E41; /* fg.error.strong */
  --fg-info-strong: #036988;  /* fg.information.strong */

  --bg-accent-pressed: #7DDD3D;   /* bg.accent.pressed */
  --bg-error: #A95A77;            /* bg.error */
  --bg-error-hovered: #8F4764;    /* bg.error.hovered */
  --bg-error-pressed: #5D2E41;    /* bg.error.pressed */
  --bg-error-subtlest: #FFF1F5;   /* bg.error.subtlest */
  --bg-info-subtle: #E2F5F5;      /* bg.information.subtle */
  --bg-inverse: #252825;          /* bg.default.inverse */
  --bg-tertiary: #EFF5EB;         /* bg.tertiary */

  --border-control: #A1AC8D;      /* border.control */
  --border-tertiary: #E4F0DA;     /* border.tertiary */
  --border-error: #A95A77;        /* border.error */
  --border-focus-error: #E284A0;  /* border.focus.error */

  --accent: #226B1E;          /* fg.link.default */
  --fg-link-visited: #6D28D9; /* fg.link.visited */
  --accent-bg: #ABFF44;       /* bg.accent */
  --accent-bg-hover: #99F141; /* bg.accent.hovered */
  --accent-subtle: #EEFFD9;   /* bg.accent.subtle */

  --danger: #8F4764;          /* fg.error */
  --bg-error-subtle: #FFDFE8; /* bg.error.subtle */
  --bg-warning-subtle: #FEF1C6; /* bg.warning.subtle */
  --fg-warning-strong: #B54707; /* fg.warning.strong */
  --border-warning: #F79008;    /* border.warning */
  --fg-info: #197A94;           /* fg.information */
  --bg-success: #ABFF44;        /* bg.success */
  --bg-avatar-neutral: #EFF5EB; /* bg.avatar.neutral */
  --fg-avatar-neutral: #484E46; /* fg.avatar.neutral */
  --focus: #197A94;           /* border.focus */

  --fg-tertiary: #616755;     /* fg.tertiary */
  --border-secondary: #E4F0DA;/* border.secondary */
  --bg-hovered: #5F931F14;    /* bg.default.hovered */
  --bg-pressed: #5E8B2729;    /* bg.default.pressed */

  --radius-xs: 2px;           /* borderRadius.xs */
  --radius-sm: 6px;           /* borderRadius.sm */
  --radius-full: 9999px;      /* borderRadius.full */
  --radius: 8px;              /* borderRadius.md */
  --radius-lg: 12px;          /* borderRadius.lg */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  /* Schriftgroessen als Paar aus Groesse und Zeilenhoehe -- in Axiom gehoeren
     sie zusammen, und eine Zeilenhoehe zu erfinden waere der schnellste Weg
     aus dem System heraus. */
  --font-xl: 20px;            /* fontSize.xl */
  --font-lg: 16px;            /* fontSize.lg */
  --font-md: 14px;            /* fontSize.md */
  --font-md-line: 20px;
  --font-sm: 12px;            /* fontSize.sm */
  --font-sm-line: 16px;

  --size-xs: 20px;            /* size.xs */
  --size-2xs: 16px;           /* size.2xs */
  --size-sm: 24px;            /* size.sm */
  --size-md: 32px;            /* size.md */
  --size-lg: 40px;            /* size.lg */

  --font-mono: "Roboto Mono Variable", ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Die Grotesk B und Roboto sind lizenzpflichtig und werden nicht nachgeladen
     -- die CSP verbietet externe Quellen. Wo sie installiert sind, greifen sie. */
  --font-sans: "Die Grotesk B", "DI Grotesk B", "Roboto Variable", system-ui, sans-serif;
  /* fontFamily.heading -- Axiom setzt Knoepfe in dieser Familie, nicht in
     der des Fliesstexts. */
  --font-heading: "Die Grotesk B", "DI Grotesk B", "Roboto Condensed Variable",
                  system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Axiom faerbt **besuchte Verweise im Text** eigens ein (fg.link.visited).
   Das gilt fuer die Link-Komponente, nicht fuer Navigation und
   Bedienelemente: eine Menuezeile, die nach dem ersten Besuch lila wird,
   sieht kaputt aus und sagt nichts, was man wissen will -- wo man war, zeigt
   die Markierung des aktiven Eintrags.

   Deshalb nur dort, wo wirklich Text steht. */
main p a:visited,
.hinweis a:visited { color: var(--fg-link-visited); }

/* Die alte Kopfzeile: nur noch das Wallboard benutzt sie -- dort haengt die
   Ansicht an einer Wand, und eine Navigationsleiste waere ein Fremdkoerper. */
header.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header.top h1 { font-size: 17px; margin: 0; }
header.top .spacer { flex: 1; }
header.top .wer { color: var(--muted); font-size: 13px; }

/* Der Inhaltsbereich beginnt an derselben Kante wie die Kopfzeile darueber.
   Vorher stand hier `margin: 0 auto`: die Kaesten schwammen dann mittig im
   Bereich neben der Leiste, und zwar unterschiedlich weit je nach
   Fensterbreite -- mal mittig, mal links klebend, nie in einer Flucht mit
   dem Seitentitel. Axiom fuellt den Inhaltsbereich und gibt ihm einen festen
   Innenabstand; die Hoechstbreite bleibt, damit Zeilen lesbar kurz sind. */
main {
  max-width: 1100px;
  margin-inline: 0;
  padding: 24px;
}

/* Karte: Axiom setzt borderRadius.lg. */
section.karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
}

/* Ueberschriften: Groesse aus fontSize, Zeilenhoehe und Laufweite so, wie
   Axiom sie in der Heading-Komponente festlegt -- eng gesetzt und mit
   leichter Sperrung, sonst wirkt die Grotesk gedraengt. */
h1 {
  font-family: var(--font-heading);
  font-size: var(--font-xl);
  line-height: 1.1;
  letter-spacing: 1%;
  margin: 0;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--font-lg);
  line-height: 1.3;
  letter-spacing: 2%;
  margin: 0 0 12px;
}
h3 {
  font-family: var(--font-heading);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  letter-spacing: 3%;
  margin: 20px 0 8px;
}
section.karte > h2:first-child { margin-block-start: 0; }

/* ------------------------------------------------------------- Tabellen
   Uebernommen aus dem Axiom Design System -- die Regeln stammen aus den
   Komponenten Table, TableRow, TableCell und TableHeaderCell im Paket
   @optiaxiom/react (3.1.7), abgeglichen ueber den Axiom-MCP-Server.

   Drei Dinge waren vorher anders und sind es jetzt nicht mehr:
   * Der Inhalt einer Zelle steht **oben**, nicht mittig. Bei mehrzeiligen
     Zellen laufen die Spalten sonst auseinander.
   * Die Trennlinie sitzt **oben an der Folgezeile**, nicht unten an jeder.
     Damit gibt es weder eine Linie nach der letzten Zeile noch eine doppelte
     unter dem Kopf.
   * Der Kopf trennt mit einem Schatten in border.tertiary, nicht mit einem
     Rahmen -- und die Tabelle selbst traegt keinen eigenen Rahmen. Den
     Rahmen gibt die Karte, in der sie steht.

   Abstaende folgen dem Vierer-Raster, das Axiom in seinen Komponenten
   benutzt (4, 8, 12, 16, 24 px); Groessen und Farben kommen aus
   docs/axiom-tokens.json. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  /* Ziffern gleicher Breite: in einer Preis- oder Mengenspalte stehen die
     Stellen sonst nicht untereinander. */
  font-variant-numeric: tabular-nums;
  /* Eigener Stapelkontext, damit ein Fokusring einer Zeile nicht unter der
     naechsten verschwindet. */
  isolation: isolate;
}

th,
td {
  text-align: start;
  padding-inline: var(--size-2xs);
  padding-block: 12px;
  /* Axiom: der Inhalt einer Zelle steht oben. */
  vertical-align: top;
  /* Eine lange Kennung ohne Leerzeichen sprengt sonst die Spalte. */
  word-break: break-word;
}

thead th {
  background: var(--panel-2);
  color: var(--fg-tertiary);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  font-weight: 600;
  padding-block: 8px;
  white-space: nowrap;
  /* Trennung als Schatten, nicht als Rahmen -- so bleibt sie auch dann eine
     Haarlinie, wenn die Zeile scrollt. */
  box-shadow: 0 1px 0 var(--border-tertiary);
}

/* Die Linie gehoert an den Anfang der Folgezeile. */
tbody tr:not(:first-child) td { border-top: 1px solid var(--border-secondary); }

/* Zeilen, die etwas tun koennen, zeigen es beim Ueberfahren. */
tbody tr:hover { background: var(--bg-hovered); }
tbody tr[aria-selected="true"] { background: var(--accent-subtle); }

/* Der Fokusring liegt auf der Zeile, nicht auf einer Zelle. */
tbody tr:focus-visible {
  outline: none;
  position: relative;
}
tbody tr:focus-visible::before {
  content: "";
  position: absolute;
  inset: 1px 0 0;
  border: 2px solid var(--focus);
  border-radius: var(--radius);
  pointer-events: none;
}

/* Eine Zelle, die einen Knopf traegt, soll ihn nicht auseinanderziehen. */
td:has(> button:only-child),
td:has(> .zellen-knoepfe) { width: 1%; white-space: nowrap; }

tfoot th,
tfoot td {
  background: var(--panel-2);
  font-weight: 600;
  border-top: 1px solid var(--line);
}

/* Zahlen enden buendig: nur so stehen die Stellen untereinander und zwei
   Betraege lassen sich mit einem Blick vergleichen. */
td.zahl, th.zahl { text-align: end; }

/* Kennungen, Betraege, Adressen: Festbreite haelt sie lesbar. */
td code,
td .mono { font-family: var(--font-mono); font-size: var(--font-sm); }

/* Eine Tabelle ohne Inhalt sagt das, statt leer dazustehen. */
td.leerzeile {
  color: var(--fg-tertiary);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  text-align: center;
}

/* Eine Tabelle mit vielen Spalten rollt waagerecht, statt ihre Spalten so
   schmal zu quetschen, dass Adressen mitten im Wort brechen. */
.tabelle-rollbar { overflow-x: auto; }
.tabelle-rollbar table { min-width: 760px; }
/* In einer rollenden Tabelle bleiben Ziele am Stueck. */
.tabelle-rollbar td { word-break: normal; }
/* ---------------------------------------------------------- Ende Tabellen */

/* ------------------------------------------------------------- Elemente
   Uebernommen aus dem Optimizely Axiom Design System. Die Regeln stammen aus
   dem veroeffentlichten Paket @optiaxiom/react (3.1.7), nachgelesen in
   dessen gebauten Stylesheets -- nicht nachempfunden.
   Was Axiom dort festlegt und hier steht:

   Knopf     borderRadius.md, Rahmen 1px (2px bei den flaechigen Formen),
             Innenabstand waagerecht 8px abzueglich Rahmenbreite, Schrift in
             fontFamily.heading, cursor pointer, keine Textauswahl.
   Fokus     outline 2px solid border.focus, Abstand 2px -- bei Verweisen
             2px auto mit Abstand 1px.
   Feld      bg.default auf border.default, borderRadius.md; im Fokus faerbt
             sich der Rahmen border.control; ungueltig border.error mit
             border.focus.error; nur-lesbar und gesperrt auf bg.page.
   Karte     borderRadius.lg.
   Hinweis   Mindesthoehe size.sm.
   Pille     Mindestbreite size.xs, Farben je Bedeutung.

   Der Rest -- Schriftgroessen, Farben, Radien -- kommt wie ueberall aus
   docs/axiom-tokens.json. */

label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--muted);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font-family: inherit;
  /* Axiom: 16px im Feld, ab 600px 14px. Unter 16px zoomt iOS beim
     Hineintippen die ganze Seite -- deshalb erst auf dem grossen Schirm. */
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input::placeholder,
textarea::placeholder { color: var(--fg-tertiary); }

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  /* Der Rahmen wird im Fokus dunkler -- so bleibt das Feld auch dann
     erkennbar, wenn der Fokusring am Bildrand abgeschnitten ist. */
  border-color: var(--border-control);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--border-error); }
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus { outline-color: var(--border-focus-error); }

input[readonly],
textarea[readonly] { background: var(--bg); border-color: var(--border-tertiary); }
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg);
  border-color: var(--line);
  color: var(--border-control);
  cursor: not-allowed;
}
input:disabled::placeholder { color: var(--fg-disabled); }

@media (min-width: 600px) {
  input, select, textarea { font-size: var(--font-md); line-height: var(--font-md-line); }
}

button {
  font-family: var(--font-heading);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  /* ButtonRoot setzt 500 -- bis zum 12.09.2026 stand hier 600. */
  font-weight: 500;
  /* Axiom rechnet den Rahmen aus dem Innenabstand heraus, damit die Schrift
     unabhaengig von der Rahmenbreite an derselben Stelle steht. */
  padding-inline: calc(8px - 1px);
  padding-block: calc((var(--size-md) - var(--font-md-line)) / 2 - 1px);
  color: var(--fg-black);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bg);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
button:hover:not(:disabled) { background: var(--accent-bg-hover); }
button:active:not(:disabled) { background: var(--bg-accent-pressed); }

/* Die zurueckhaltende Form: Flaeche in bg.default, Rahmen border.default. */
button.leise {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  font-weight: 500;
}
button.leise:hover:not(:disabled) { background: var(--bg-hovered); }
button.leise:active:not(:disabled) { background: var(--bg-pressed); }

/* Die warnende Form -- fuer Handlungen, die etwas fortnehmen. */
button.gefahr {
  background: var(--panel);
  border-color: var(--border-error);
  color: var(--danger);
}
button.gefahr:hover:not(:disabled) { background: var(--bg-error-subtlest); }
button.gefahr:active:not(:disabled) { background: var(--bg-error-subtle); }

/* Ein deaktivierter Knopf muss auch aussehen wie einer -- sonst klickt man
   dagegen und haelt die Anwendung fuer kaputt. */
button:disabled,
button:disabled:hover {
  background: var(--panel-2);
  border-color: transparent;
  color: var(--fg-disabled);
  cursor: not-allowed;
}

/* Fokus gilt fuer alles Bedienbare gleich. */
button:focus-visible,
[role="tab"]:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  z-index: 10;
}
a:focus-visible {
  outline: 2px auto var(--focus);
  outline-offset: 1px;
}

/* Hinweise und Meldungen: Mindesthoehe size.sm, Farbe nach Bedeutung. */
.meldung {
  display: flex;
  align-items: center;
  min-height: var(--size-sm);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: var(--font-md);
  line-height: var(--font-md-line);
}
.meldung.fehler { background: var(--bg-error-subtle); color: var(--danger); }
.meldung.gut { background: var(--accent-subtle); color: var(--accent); }
.meldung.hinweisend { background: var(--bg-info-subtle); color: var(--fg-info-strong); }

/* Pille: Mindestbreite size.xs, Radius voll, Farbe nach Bedeutung. */
.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-xs);
  padding-inline: 8px;
  border-radius: var(--radius-full);
  background: var(--panel-2);
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  font-weight: 600;
}
.pille.fehler { background: var(--bg-error-subtle); color: var(--fg-error-strong); }
.pille.hinweisend { background: var(--bg-info-subtle); color: var(--fg-info-strong); }
.pille.gut { background: var(--accent-subtle); color: var(--accent); }
.pille.warnung { background: var(--bg-warning-subtle); color: var(--fg-warning-strong); }
/* Der Bot hat ueberall dieselbe Farbe: in der Liste, im Verlauf, in der Legende. */
.pille.bot { background: var(--bg-info-subtle); color: var(--fg-info-strong); }

.anmeldung {
  max-width: 380px;
  margin: 12vh auto;
}

/* ---- Anmeldeseite, nach dem Muster von rcs.hikel.de ---------------------
   Eine Karte in der Mitte, Kurzzeichen und Titel oben, ein Formular, darunter
   der Nebenweg ("Passwort vergessen?"). Dieselben Masse wie dort, damit sich
   beide Anwendungen gleich anfuehlen. */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
}
.auth-karte {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  box-sizing: border-box;
}
.auth-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-marke h1 { font-size: var(--font-lg); line-height: var(--font-md-line); margin: 0; }
.logo {
  background: var(--accent-bg);
  color: var(--fg-black);
  font-family: var(--font-heading);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: var(--radius);
  letter-spacing: 1px;
}
.sub { margin: 0; font-size: var(--font-sm); line-height: var(--font-sm-line); color: var(--muted); }
.auth-karte form .hinweis { margin: 0 0 12px; }
.auth-knopf { width: 100%; margin-top: 6px; }
.auth-fehler,
.auth-erfolg {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: var(--font-sm);
  line-height: 1.4;
}
.auth-fehler { background: var(--bg-error-subtle); color: var(--danger); }
.auth-erfolg { border: 1px solid var(--accent); background: var(--accent-subtle); color: var(--text); }
.auth-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
button.auth-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
button.auth-link:hover:not(:disabled),
button.auth-link:active:not(:disabled) { background: none; color: var(--text); }

/* Der Augen-Schalter sitzt im Passwortfeld, nicht daneben -- daneben rutschte
   er im schmalen Fenster in die naechste Zeile. */
.pw-huelle { position: relative; display: block; width: 100%; margin-top: 4px; }
.pw-huelle input { margin-top: 0; padding-right: 40px; }
button.pw-auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
}
button.pw-auge:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
button.pw-auge:active:not(:disabled) { background: var(--bg-pressed); }
button.pw-auge:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Eine Reihe traegt den Abstand, den sonst die Beschriftung traegt -- ohne
   ihn klebt eine Reihe aus Ankreuzfeldern an der naechsten Zeile. */
.reihe {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.reihe:last-child { margin-bottom: 0; }
.reihe label { flex: 1 1 160px; margin-bottom: 0; }
form.anlegen { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.hinweis {
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
}
code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--font-sm);
}

/* ------------------------------------------------ Posteingang (Block 3) */

/* Nur fuer Screenreader: die Beschriftung soll da sein, aber nicht im Weg. */
.nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

/* Reiter nach Axiom TabsList/TabsTrigger: eine Linie unter der Leiste, der
   aktive Reiter unterstrichen in fg.default -- keine Flaeche, kein Gruen.
   Abstand zwischen den Reitern 24 px, innen 4 + 6 px. */
.tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border-tertiary);
}
button.tab {
  white-space: nowrap;
  margin-bottom: -1px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  font-weight: 500;
  color: var(--fg-tertiary);
}
button.tab:hover:not(:disabled),
button.tab:active:not(:disabled) { background: transparent; border-bottom-color: var(--line); color: var(--muted); }
/* Die aktive Ansicht traegt Linie UND Schriftfarbe -- nie nur eine Farbe. */
button.tab.aktiv,
button.tab.aktiv:hover:not(:disabled) { border-bottom-color: var(--text); color: var(--text); }
button.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.presence { margin-bottom: 0; font-size: 12px; }
.presence select { width: auto; margin-top: 2px; padding: 4px 8px; }
.leise-link { font-size: 13px; }

/* ---- Posteingang ---------------------------------------------------------
   Nach Axiom, wo Axiom etwas vorgibt (Card, Badge, Avatar, Tabs, Heading,
   DetailsPanel, LayoutContent), und nach dem Posteingang von rcs.hikel.de,
   wo nicht (Gespraechsliste, Sprechblasen). Abstaende nur aus der Skala
   4, 6, 8, 12, 16, 24, 32. */
main.inbox {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  max-width: none;
  /* LayoutContent: px 32, py 24. */
  padding: 24px 32px;
  align-items: start;
}
/*
 * Die Meldung ist ein Kind des Gitters -- sichtbar belegt sie sonst die erste
 * Zelle, die Liste rutscht in die zweite und das Gespraech faellt in die
 * naechste Zeile nach links. Genau das passierte beim Annehmen: eine Meldung
 * erschien, und das offene Gespraech sprang unter die Liste.
 */
main.inbox > .meldung { grid-column: 1 / -1; margin-bottom: 0; }

/* Axiom kennt zwei Haltepunkte: 600 und 900 px. */
@media (max-width: 900px) { main.inbox { grid-template-columns: 1fr; padding: 16px; } }

/* Card: bg.default, border.tertiary, borderRadius.lg, p 16, gap 8. */
.spalte-links,
.spalte-rechts {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
}

/* Die Liste bleibt stehen, waehrend rechts gescrollt wird. */
.spalte-links {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 104px);
  padding: 16px;
}
@media (max-width: 900px) { .spalte-links { position: static; max-height: none; } }

.suchzeile { display: flex; gap: 8px; margin: 0; }
.suchzeile input { margin-top: 0; }
.listen-kopf {
  margin: 0;
  min-height: var(--font-sm-line);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--fg-tertiary);
}

/* Die Zeilen nach rcs: ohne eigenen Rahmen in der Karte, Flaeche nur beim
   Ueberfahren und fuer die offene Zeile. */
.liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  margin: 0 -8px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.eintrag { margin: 0; }
button.eintrag-knopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
button.eintrag-knopf:hover:not(:disabled) { background: var(--bg-hovered); }
button.eintrag-knopf:active:not(:disabled) { background: var(--bg-pressed); }
/* Die offene Zeile bleibt sichtbar -- sonst sucht man beim Zurueckkommen. */
button.eintrag-knopf.aktiv,
button.eintrag-knopf.aktiv:hover:not(:disabled) {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

/* Avatar: rund, bg/fg.avatar.neutral, Gewicht 500; md 32 px, lg 40 px. */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-md);
  height: var(--size-md);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-avatar-neutral);
  color: var(--fg-avatar-neutral);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  font-weight: 500;
  text-transform: uppercase;
  user-select: none;
}
.avatar.gross { width: var(--size-lg); height: var(--size-lg); font-size: var(--font-lg); line-height: 24px; }

.eintrag-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eintrag-oben { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eintrag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.eintrag-zeit { flex: none; margin-left: auto; font-size: var(--font-sm); line-height: var(--font-sm-line); color: var(--fg-tertiary); }
.eintrag-vorschau {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--muted);
}
.vorschau-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschau-wer { font-weight: 500; }
/* Metadaten sind Text, keine Marken: Axiom-Badges tragen Zustand oder Zahl. */
.eintrag-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--fg-tertiary);
}
.leer { color: var(--muted); font-size: var(--font-md); line-height: var(--font-md-line); padding: 8px; margin: 0; }

/*
 * Badge nach Axiom: Monospace, sm, Gewicht 400, Grossbuchstaben, px 8 py 2,
 * rund. variant "subtle" (Vorgabe): Flaeche X.subtle, Schrift X.strong.
 * Die Zahl an einer Zeile ist wie beim Indicator ein Badge mit px 4.
 */
.badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: var(--size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.badge.information { background: var(--bg-info-subtle); color: var(--fg-info-strong); }
.badge.success { background: var(--accent-subtle); color: var(--accent); }
.badge.warning { background: var(--bg-warning-subtle); color: var(--fg-warning-strong); }
.badge.danger { background: var(--bg-error-subtle); color: var(--fg-error-strong); }
.badge.strong.success { background: var(--bg-success); color: var(--fg-black); }
.badge.zahl { min-width: var(--size-2xs); padding: 0 4px; }

/* ---- Das offene Gespraech ---- */
.keine-auswahl { padding: 24px; }
.keine-auswahl h2 { margin: 0 0 4px; font-family: var(--font-heading); font-size: var(--font-lg); line-height: 1.3; font-weight: 600; }
.keine-auswahl .hinweis { margin: 0; }
.spalte-rechts { overflow: hidden; }
/* Kopf wie CardHeader/DetailsPanelHeader: p 16, gap 12, Titel als Heading
   Stufe 4, Beschreibung sm in fg.secondary. */
.detail-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-secondary);
}
.detail-kopf .spacer { flex: 1; }
.detail-wer { min-width: 0; }
.detail-titelzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.detail-kopf h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 3%;
}
.detail-meta {
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--muted);
}
.detail-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

.detail-koerper { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
/* Die Kundenspalte steht nur daneben, wenn fuer das Gespraech genug Breite
   bleibt -- neben Navigation und Liste ist das erst ab 1440 px der Fall.
   Darunter steht sie unter dem Gespraech. */
@media (max-width: 1440px) {
  .detail-koerper { grid-template-columns: 1fr; }
  .kunde-spalte { border-left: 0; border-top: 1px solid var(--border-secondary); }
}
@media (max-width: 1200px) {
  main.inbox { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
  /* Die Namen stehen an jeder Blase -- die Legende ist hier entbehrlich. */
  .tabs .legende { display: none; }
}
/* Nach dem Block darueber, sonst gewaenne dessen Zweispaltigkeit auch hier. */
@media (max-width: 900px) { main.inbox { grid-template-columns: 1fr; } }
.gespraech-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; }
.gespraech-spalte .spacer { flex: 1; }

.legende {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--fg-tertiary);
}
.legende-punkt { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: var(--radius-full); }
.legende-punkt.wir { background: var(--accent-subtle); border: 1px solid var(--accent); }
.legende-punkt.bot { background: var(--bg-info-subtle); border: 1px solid var(--fg-info); }
.legende-punkt.kunde { background: var(--panel-2); border: 1px solid var(--line); }

.verlauf {
  height: clamp(320px, calc(100vh - 420px), 720px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius);
}
.verlauf-leer { margin: auto; }

/*
 * Sprechblasen nach rcs.hikel.de: Radius 16 px, die Ecke zum Absender 4 px.
 * **Unsere links, die des Kunden rechts** -- wie dort. Der Bot steht bei uns,
 * mit Linie und Flaeche in information, damit eine Maschinenantwort nie fuer
 * die einer Kollegin gehalten wird.
 */
.blase {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(78%, 560px);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: var(--font-md);
  line-height: var(--font-md-line);
}
.blase .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.blase .absender {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--fg-tertiary);
}
.absender-name { font-weight: 500; color: var(--muted); }
.blase.wir {
  align-self: flex-start;
  background: var(--accent-subtle);
  border-color: var(--accent);
  border-bottom-left-radius: 4px;
}
.blase.bot {
  align-self: flex-start;
  background: var(--bg-info-subtle);
  border-color: var(--fg-info);
  border-left-width: 4px;
  border-bottom-left-radius: 4px;
}
.blase.bot .absender-name { color: var(--fg-info-strong); }
.blase.kunde {
  align-self: flex-end;
  background: var(--panel-2);
  border-bottom-right-radius: 4px;
}
.blase.kunde .absender { justify-content: flex-end; }
.blase.notiz {
  align-self: stretch;
  max-width: none;
  background: var(--bg-warning-subtle);
  border-color: var(--border-warning);
  border-radius: var(--radius);
}
.systemzeile {
  align-self: center;
  padding: 2px 12px;
  border-radius: var(--radius-full);
  background: var(--panel-2);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  color: var(--fg-tertiary);
}

.verfassen { display: flex; flex-direction: column; gap: 8px; }
.antwortzeile { display: flex; gap: 8px; margin: 0; }
.antwortzeile input { margin-top: 0; }
.notiz-hinweis { margin: 0; }

/* Button size "sm": Hoehe size.sm (24 px), fontSize sm, px 6. */
button.klein {
  padding-block: calc((var(--size-sm) - var(--font-sm-line)) / 2 - 1px);
  padding-inline: calc(6px - 1px);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
}
select.klein {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 3px 8px;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
}

/* ---- Kundenspalte, gebaut wie DetailsPanelBody: px 16, gap 16 ---- */
.kunde-spalte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-left: 1px solid var(--border-secondary);
}
.kunde-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.kunde-abschnitt + .kunde-abschnitt { padding-top: 16px; border-top: 1px solid var(--border-secondary); }
/* Wie der Titel im CardHeader: Heading, md, Gewicht 500. */
.kunde-abschnitt h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  font-weight: 500;
  color: var(--text);
}
dl.angaben {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
}
dl.angaben dt { color: var(--fg-tertiary); }
dl.angaben dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.lage { display: flex; flex-direction: column; gap: 8px; }
.lage-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lage-zeile .hinweis { margin: 0; font-size: var(--font-sm); line-height: var(--font-sm-line); color: var(--muted); }
.besuch-seite { display: flex; flex-direction: column; margin: 0; }
.besuch-seite strong { font-weight: 500; }
.besuch-seite .hinweis { margin: 0; font-size: var(--font-sm); line-height: var(--font-sm-line); color: var(--fg-tertiary); overflow-wrap: anywhere; }
.seitenpfad { margin: 0; padding-left: 16px; font-size: var(--font-sm); line-height: var(--font-sm-line); }
.seitenpfad li + li { margin-top: 4px; }
.seitenpfad li .hinweis { margin-left: 8px; color: var(--fg-tertiary); }
.frueher { margin: 0; padding: 0; list-style: none; font-size: var(--font-sm); line-height: var(--font-sm-line); }
.frueher li + li { margin-top: 4px; }

/* ------------------------------------------ Einrichtung und Wallboard */

textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

section.karte > h3 {
  margin: 20px 0 8px;
  font-size: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Ankreuzfelder und Auswahlknoepfe: Axiom faerbt den gesetzten Zustand in
   bg.accent und setzt den Haken in fg.black. Genau das macht `accent-color`
   mit dem nativen Feld -- ein nachgebautes waere mehr Code und weniger
   Tastaturbedienung. Groesse size.2xs. */
input[type="checkbox"],
input[type="radio"] {
  width: var(--size-2xs);
  height: var(--size-2xs);
  margin: 0;
  accent-color: var(--accent-bg);
  cursor: pointer;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Ankreuzfeld mit Beschriftung daneben statt darunter. */
label.kasten {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  /* Sonst zieht die Grundregel fuer Beschriftungen die Zeile auseinander. */
  margin-bottom: 0;
  white-space: nowrap;
}
/* Nicht `width: auto` fuer alles: das ueberschrieb die Groesse des
   Ankreuzfeldes und machte es 13px statt size.2xs breit. */
label.kasten input:not([type="checkbox"]):not([type="radio"]) { width: auto; }
label.kasten input { margin-top: 0; }

.farbprobe {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius);
  color: var(--fg-white);
  font-weight: 600;
}
/* Der Kontrastbefund traegt Wort UND Farbe -- nie nur Farbe (Modul 39). */
.kontrast-warnung {
  color: var(--danger);
  font-size: 13px;
  margin: 4px 0;
  font-weight: 600;
}

main.wallboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1400px;
}
.wallboard .kachel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: center;
}
.wallboard .kachel h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wallboard .zahl {
  margin: 8px 0 4px;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1;
}
.wallboard .unterzeile { margin: 0; font-size: 13px; color: var(--muted); }
/* Auffaellig, aber nicht allein durch Farbe: der Text darunter sagt es auch. */
.wallboard .kachel.achtung {
  border-color: var(--danger-border, var(--danger));
  background: var(--bg-error-subtle);
}

/* Die KI-Leiste sitzt ueber dem Antwortfeld und schreibt nur hinein --
   abgeschickt wird ausschliesslich von Hand (Modul 19, ADR-003). */
.ki-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ki-uebersetzen { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ki-leiste button { white-space: nowrap; }
.ki-hinweis {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.ki-hinweis.entwurf {
  color: var(--danger);
  font-weight: 600;
}

/* Modul 24: was der Agent sieht, ist ein Abzug -- kein lebendiges Fenster.
   Der Rahmen laeuft ohne Skripte und ohne gemeinsamen Ursprung. */
/* In der Kundenspalte: untereinander, das Feld ueber die volle Breite. */
.cobrowse-leiste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.cobrowse-leiste input { margin-top: 0; }
.cobrowse-stand { font-size: 13px; color: var(--muted); }
.cobrowse-rahmen {
  margin: 0;
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  overflow: hidden;
}
.cobrowse-rahmen .hinweis { margin: 6px 10px; word-break: break-all; }
/*
 * Die Buehne zeigt den Ausschnitt, den der Kunde sieht.
 *
 * Der Rahmen bekommt die Fenstergroesse des Kunden und wird als Ganzes
 * verkleinert (`transform: scale`). Zwei Dinge haengen daran: der Umbruch ist
 * derselbe wie beim Kunden -- eine Seite, die beim Agenten anders bricht,
 * fuehrt ihn in die Irre -- und ein Klick laesst sich zurueckrechnen. Ohne
 * das waere jede Steuerung Raterei.
 */
.cobrowse-buehne {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--panel-2);
}
.cobrowse-flaeche {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: 0 0;
}
.cobrowse-flaeche iframe {
  display: block;
  border: 0;
  background: var(--panel);
}
/* Der verdeckte Rahmen liegt hinter dem sichtbaren, nicht darunter. */
.cobrowse-flaeche iframe[hidden] { display: none; }
.cobrowse-abfang {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}
/* Der Zeiger des Kunden -- damit man sieht, wovon er spricht. */
.cobrowse-zeiger {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid var(--focus);
  border-radius: var(--radius-full);
  background: rgb(25 122 148 / 0.2);
  pointer-events: none;
}
.cobrowse-steuerleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-block-start: 1px solid var(--line);
}
/* Wer steuert, soll es sehen: der Rahmen wechselt die Farbe. */
.cobrowse-rahmen.steuert { border-color: var(--accent); }
.cobrowse-rahmen.steuert .cobrowse-abfang { cursor: pointer; }

/* Der Faktor-Schluessel und die Wiederherstellungscodes werden abgetippt --
   Ziffernbreite und Abstand entscheiden hier ueber Tippfehler. */
.mfa-geheimnis {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 2px;
  user-select: all;
}
.codeliste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.codeliste li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  user-select: all;
}


/* ------------------------------------------------------ Linke Navigation
   Muster von rcs.hikel.de: Leiste links, Gruppen untereinander, einklappbar
   auf Symbolbreite. Die Einrichtung hatte zehn Reiter und der Posteingang
   sieben -- in einer Zeile nebeneinander brechen sie um und verschieben
   sich, sobald einer dazukommt. */
.mit-navigation {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-inline-end: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width .14s ease;
}
.sidebar.eingeklappt { width: 64px; }
.sidebar.eingeklappt .nav-label,
.sidebar.eingeklappt .nav-marke,
.sidebar.eingeklappt .nav-gruppe,
.sidebar.eingeklappt .nav-wer { display: none; }
.sidebar.eingeklappt .nav-item { justify-content: center; }
.sidebar.eingeklappt .nav-kopf { justify-content: center; padding: 12px 8px; }

.nav-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-block-end: 1px solid var(--line);
}
.nav-marke { display: flex; flex-direction: column; min-width: 0; }
.nav-marke strong { font-size: 14px; }
.nav-marke small {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-umschalter {
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: pointer;
  position: relative;
}
.nav-umschalter::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 6px;
  width: 2px;
  background: var(--muted);
}
.sidebar.eingeklappt .nav-umschalter { margin-inline-start: 0; }

.nav-koerper { flex: 1; overflow-y: auto; padding: 10px 8px; }
.nav-gruppe {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 10px 10px 4px;
}
.nav-liste { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.nav-item:hover { background: var(--panel-2); }
/* Der aktive Eintrag traegt Flaeche, Schriftschnitt UND eingefaerbtes Symbol
   -- nie nur Farbe (Modul 39). Eingeklappt bleibt das Symbol als Merkmal. */
.nav-item.aktiv { background: var(--accent-subtle); font-weight: 600; }
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.nav-item.aktiv .nav-icon { color: var(--accent); }
.nav-item:hover .nav-icon { color: var(--text); }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-fuss { border-block-start: 1px solid var(--line); padding: 8px; }
.nav-wer { display: flex; flex-direction: column; padding: 4px 10px 8px; min-width: 0; }
.nav-wer strong { font-size: 13px; }
.nav-wer small {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Bereich rechts daneben. Er scrollt fuer sich; die Leiste bleibt. */
.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt > main { flex: 1; }

header.seitenkopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--panel);
  border-block-end: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
header.seitenkopf h1 { font-size: 17px; margin: 0; }
header.seitenkopf .spacer { flex: 1; }

/* Schmale Fenster: die Leiste faellt auf Symbolbreite zurueck, statt den
   Inhalt zu verdraengen. */
@media (max-width: 800px) {
  .sidebar { width: 64px; }
  .sidebar .nav-label,
  .sidebar .nav-marke,
  .sidebar .nav-gruppe,
  .sidebar .nav-wer { display: none; }
  .sidebar .nav-item { justify-content: center; }
}

/* ---- Hilfe --------------------------------------------------------------

   Die Schublade folgt Axioms DetailsPanel: rechts angeschlagen, eigene
   Kopfleiste mit Titel und Schliessen, Inhalt darunter scrollend. Sie
   ueberdeckt den Inhalt nicht, sondern schiebt ihn zusammen -- wer nach der
   Hilfe arbeitet, soll die Maske dabei sehen.                             */

.hilfe-knopf {
  width: var(--size-sm);
  height: var(--size-sm);
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
}
.hilfe-knopf:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.hilfe-knopf[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.hilfe-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.hilfe-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.hilfe-panel[hidden] { display: none; }

/* Der Inhalt rueckt zur Seite statt sich zu verstecken. */
body.hilfe-offen .inhalt { padding-right: 380px; }

.hilfe-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.hilfe-titel {
  margin: 0;
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
  color: var(--text);
}
.hilfe-schliessen {
  width: var(--size-sm);
  height: var(--size-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--font-xl);
  line-height: 1;
  cursor: pointer;
}
.hilfe-schliessen:hover { background: var(--bg-hovered); color: var(--text); }
.hilfe-schliessen:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.hilfe-koerper {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: var(--font-md);
  line-height: var(--font-md-line);
  color: var(--text);
}
.hilfe-wozu {
  margin: 0 0 12px;
  color: var(--muted);
}
.hilfe-bild {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hilfe-abschnitt { margin-bottom: 16px; }
.hilfe-abschnitt h4 {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}
.hilfe-abschnitt ul,
.hilfe-abschnitt ol { margin: 0; padding-left: 20px; }
.hilfe-abschnitt li { margin-bottom: 6px; }
.hilfe-abschnitt code {
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: var(--font-sm);
}
.hilfe-weiter { display: flex; flex-wrap: wrap; gap: 6px; }
.hilfe-weiter h4 { width: 100%; }
.hilfe-verweis {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  cursor: pointer;
}
.hilfe-verweis:hover { background: var(--accent-subtle); border-color: var(--accent); }
.hilfe-verweis:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hilfe-leer { color: var(--muted); }

/* Feldhilfe: das kleine „i" -- absichtlich unscheinbar. */
.feldhilfe-knopf {
  width: var(--size-2xs);
  height: var(--size-2xs);
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.feldhilfe-knopf:hover { border-color: var(--accent); color: var(--accent); }
.feldhilfe-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.feldhilfe-blase {
  position: relative;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-info-subtle);
  color: var(--text);
  font-size: var(--font-sm);
  line-height: var(--font-md-line);
  font-weight: 400;
  box-shadow: var(--shadow-sm);
}
.feldhilfe-blase code {
  font-family: var(--font-mono);
  background: var(--panel);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
}

/* Leerzustaende als Hilfe: wo nichts steht, steht der erste Schritt. */
.leerzustand {
  padding: 24px 16px;
  text-align: left;
  color: var(--muted);
  font-size: var(--font-md);
  line-height: var(--font-md-line);
}
.leerzustand strong { display: block; color: var(--text); margin-bottom: 4px; }

@media (max-width: 900px) {
  .hilfe-panel { width: 100vw; }
  body.hilfe-offen .inhalt { padding-right: 0; }
}
/* ---- Ende Hilfe ---------------------------------------------------------- */

/* ---- Marken: Arbeiten links, Vorschau rechts -----------------------------

   Der Rhythmus: 24 px zwischen Abschnitten, 16 px zwischen Feldzeilen, 8 px
   innerhalb einer Zeile. Die Felder stehen in einem Gitter statt in einer
   Flexzeile -- eine Flexzeile laesst ein einzelnes Feld ueber die volle
   Breite laufen, sobald es allein umbricht, und genau das sah aus wie ein
   Versehen.

   Die Vorschau bildet das Widget nach. Die Regeln darin sind **Kopien** der
   Regeln aus src/public/widget.js -- bis auf die Positionierung: dort steht
   das Fenster `fixed` am Bildschirmrand, hier in einem Kasten. Damit die
   Kopie nicht davonlaeuft, prueft src/public/vorschau.test.ts, dass beide
   dieselben Klassennamen und dieselben Variablen benutzen.                 */

.markenliste { margin-bottom: 8px; }

.knopfzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.knopfzeile:first-child { margin-top: 0; }

/* Ein Blatt je Marke: eigene Flaeche, damit sichtbar ist, worauf sich die
   Felder beziehen. */
.markenblatt {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  min-width: 0;
}
.markenblatt > h3 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
}

.blattkopf {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.blattkopf h3 {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
  color: var(--text);
}
.blattkopf .hinweis { margin: 0; }

.markenblatt fieldset {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.markenblatt fieldset:last-of-type { margin-bottom: 0; }
.markenblatt legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}

/* Gleich breite Spalten, die erst umbrechen, wenn es wirklich eng wird. */
.feldgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
}
.feldgitter label { margin-bottom: 0; }
.markenblatt fieldset > .hinweis { margin: 8px 0 0; }
.markenblatt fieldset > label.kasten { margin-top: 12px; }
.markenblatt textarea { margin-top: 0; }

/* Der Knopf bleibt erreichbar, auch mitten im Blatt: ein langes Formular,
   dessen Absender erst nach dem Scrollen auftaucht, laesst Leute zwischendrin
   glauben, es gaebe keinen. */
.markenblatt > .knopfzeile {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* Farbwaehler und Hexfeld gehoeren zusammen -- ein Feld in zwei Teilen. */
.farbfeld {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.farbfeld input[type="color"] {
  flex: 0 0 auto;
  width: var(--size-md);
  height: var(--size-md);
  padding: 2px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  margin-top: 0;
}
/* Geerbt sieht anders aus als gesetzt -- sonst aendert jemand eine Farbe,
   die er gar nicht setzen wollte. */
.farbfeld input[type="color"].geerbt { border-style: dashed; opacity: 0.7; }
.farbfeld input[type="text"],
.farbfeld input:not([type]) { flex: 1 1 auto; margin-top: 0; min-width: 0; }
.farbe-zurueck {
  flex: 0 0 auto;
  padding: 4px 8px;
  line-height: 1;
}

/* Die Farbe in der Liste: erst der Punkt, dann der Wert. */
.farbwert { display: inline-flex; align-items: center; gap: 8px; }
.farbwert.geerbt { color: var(--fg-tertiary); }
.farbpunkt {
  width: var(--size-2xs);
  height: var(--size-2xs);
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
}

.marken-arbeit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.vorschau {
  position: sticky;
  top: 24px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.vorschau h3 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: var(--font-md);
}
.vorschau .hinweis { margin: 0 0 12px; }
.vorschau #kontrast:not(:empty) {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Die Zeile ist der Weg in die Bearbeitung. */
tr.waehlbar { cursor: pointer; }
tr.waehlbar:hover td { background: var(--bg-hovered); }
tr.waehlbar.aktiv td { background: var(--accent-subtle); }
tr.waehlbar:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* --- Nachbau des Widgets. Klassennamen wie dort. --- */
.wc-vorschau {
  /* Dieselben Werte wie die Vorgaben des Widgets -- dort stehen sie als
     Zahlen, hier als die Tokens, aus denen sie stammen. */
  --wc-primary: var(--accent);
  --wc-secondary: var(--accent-subtle);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-sans);
}
.wc-vorschau.links { align-items: flex-start; }

.wc-vorschau .wc-fenster {
  width: 100%;
  height: 340px;
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wc-vorschau .wc-kopf {
  background: var(--wc-primary);
  color: var(--fg-white);
  padding: 12px 16px;
  font-weight: 600;
  font-size: var(--font-md);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-vorschau .wc-kopf > :first-child { flex: 1; }
.wc-vorschau .wc-sprache {
  background: rgb(255 255 255 / 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  padding: 2px 4px;
}
.wc-vorschau .wc-schliessen { font-size: var(--font-xl); line-height: 1; }
.wc-vorschau .wc-status {
  padding: 6px 16px;
  font-size: var(--font-sm);
  background: var(--wc-secondary);
}
.wc-vorschau .wc-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-vorschau .wc-blase {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--font-md);
}
.wc-vorschau .wc-eigen { align-self: end; background: var(--wc-secondary); }
.wc-vorschau .wc-fremd { align-self: start; background: var(--panel-2); }
.wc-vorschau .wc-zeile {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-block-start: 1px solid var(--line);
}
.wc-vorschau .wc-zeile input {
  flex: 1;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--font-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-top: 0;
}
.wc-vorschau .wc-zeile button {
  background: var(--wc-primary);
  color: var(--fg-white);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-size: var(--font-md);
}
.wc-vorschau .wc-fuss {
  font-size: var(--font-sm);
  color: var(--fg-tertiary);
  text-align: center;
  padding: 4px;
}
.wc-vorschau .wc-knopf {
  background: var(--wc-primary);
  color: var(--fg-white);
  border-radius: var(--radius-full);
  padding: 14px 22px;
  font-family: var(--font-heading);
  font-size: var(--font-md);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1100px) {
  .marken-arbeit { grid-template-columns: minmax(0, 1fr); }
  .vorschau { position: static; }
}

/* Offene Hilfe nimmt 380 px vom Inhalt -- dann ist für zwei Spalten kein
   Platz mehr, und die Felder würden zu schmalen Streifen. */
body.hilfe-offen .marken-arbeit { grid-template-columns: minmax(0, 1fr); }
body.hilfe-offen .vorschau { position: static; }
/* ---- Ende Marken --------------------------------------------------------- */

/* ---- Rollenwahl ----------------------------------------------------------
   Mehrere Rollen sind erlaubt, also Ankreuzfelder statt einer Auswahlliste --
   und nebeneinander, solange Platz ist.                                    */
.rollenwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.rollenwahl label.kasten { margin: 0; }
/* ---- Ende Rollenwahl ----------------------------------------------------- */

/* ---- Handbuch ------------------------------------------------------------

   Dieselben Texte wie die Schublade, nur am Stück. Anders als die Anwendung
   hat diese Seite keine Navigation: sie soll sich weitergeben und ausdrucken
   lassen, und beides wird von einer Leiste nur behindert.              */

body.handbuch-seite { display: block; }
main.handbuch {
  max-width: 820px;
  margin-inline: auto;
  padding: 24px 24px 80px;
}

.handbuch-kopf { margin-bottom: 24px; }
.handbuch-kopf .hinweis { margin: 0; max-width: 62ch; }

.handbuch-inhalt {
  margin-bottom: 32px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.handbuch-inhalt h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
}
.handbuch-liste { margin: 0; padding-left: 20px; }
.handbuch-liste > li { margin-bottom: 8px; }
.handbuch-liste ul { margin: 4px 0 0; padding-left: 16px; list-style: none; }
.handbuch-liste ul li { margin-bottom: 2px; }
.handbuch-kapitelverweis { font-family: var(--font-heading); font-weight: 600; }

.handbuch-kapitel { margin-bottom: 24px; }
.handbuch-kapitel > h2 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: var(--font-xl);
}

.handbuch-abschnitt {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  /* Damit die Sprungmarke nicht unter dem Seitenkopf landet. */
  scroll-margin-top: 72px;
}
.handbuch-abschnitt:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.handbuch-abschnittskopf { display: flex; align-items: baseline; gap: 8px; }
.handbuch-abschnittskopf h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-lg);
}
/* Der Verweis auf den Abschnitt selbst -- sichtbar, wenn man ihn braucht. */
.handbuch-marke { opacity: 0; text-decoration: none; color: var(--fg-tertiary); }
.handbuch-abschnittskopf:hover .handbuch-marke,
.handbuch-marke:focus-visible { opacity: 1; }

.handbuch-wozu { margin: 8px 0 12px; color: var(--muted); }
.handbuch-bild {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.handbuch-abschnitt h4 {
  margin: 16px 0 6px;
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  line-height: var(--font-sm-line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}
.handbuch-abschnitt ul,
.handbuch-abschnitt ol { margin: 0; padding-left: 20px; }
.handbuch-abschnitt li { margin-bottom: 6px; }
.handbuch-weiter { margin-top: 12px; font-size: var(--font-sm); color: var(--muted); }

.handbuch-felder dt {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  color: var(--fg-tertiary);
}
.handbuch-felder dd { margin: 4px 0 0; }

/* Der Fuß der Schublade: der Weg vom Ausschnitt zum Ganzen. */
.hilfe-fuss {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: var(--font-sm);
}

/*
 * Gedruckt wird das Handbuch, nicht die Anwendung: Kopfzeile und Knöpfe
 * fallen weg, Kapitel beginnen auf einer neuen Seite, und ein Abschnitt wird
 * nicht mitten im Bild getrennt.
 */
@media print {
  .seitenkopf,
  .handbuch-kopf .knopfzeile,
  .hilfe-panel,
  .hilfe-knopf { display: none !important; }
  main.handbuch { max-width: none; padding: 0; }
  .handbuch-kapitel { break-before: page; border: 0; padding: 0; }
  .handbuch-kapitel:first-of-type { break-before: auto; }
  .handbuch-abschnitt { break-inside: avoid; }
  .handbuch-bild { break-inside: avoid; max-height: 12cm; object-fit: contain; }
  a { text-decoration: none; color: inherit; }
}
/* ---- Ende Handbuch ------------------------------------------------------- */

/* Modul 19: die Wissenssuche im Antwortfeld. Die Treffer koennen intern sein
   -- deshalb sichtbar abgesetzt, damit niemand sie fuer Kundentext haelt. */
.wissen-treffer {
  border: 1px solid var(--border-control);
  border-inline-start: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.wissen-treffer-punkt { padding-block: 8px; }
.wissen-treffer-punkt + .wissen-treffer-punkt { border-block-start: 1px solid var(--border-control); }
.wissen-treffer-punkt h4 { margin: 0 0 4px; font-size: 14px; }
.wissen-treffer-punkt p { margin: 0 0 6px; font-size: 13px; white-space: pre-wrap; }