/* ==========================================================================
   Optimizely Axiom Design System

   Die Werte hier sind nicht nachempfunden, sondern **abgelesen**: die Farben,
   Radien, Schriftgrade und Groessen aus `docs/axiom-tokens.json`, das
   Verhalten der einzelnen Bauteile aus dem kompilierten Komponenten-CSS von
   `@optiaxiom/react` 3.1.7. Wo eine Regel von einer Axiom-Komponente stammt,
   steht deren Name daneben -- damit nachpruefbar bleibt, was uebernommen und
   was eine eigene Entscheidung ist.

   Der Plan verlangt `@optiaxiom/react`. Hier laufen dieselben Werte durch
   handgeschriebenes CSS statt durch React-Komponenten; der Grund steht in
   `docs/adr/000-stack-abweichung.md`.

   **Korrektur zweier frueherer Aussagen an dieser Stelle:**

   1. Hier stand, Axiom habe keine Abstands-Skala. Falsch -- sie steckt nicht
      in den Theme-Tokens, sondern in der Utility-Schicht, und sie lautet
      2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80 px.
   2. Der Tabellenkopf trug hier `bg.secondary` als Flaeche. Das war
      erfunden: Axioms Kopfzelle hat gar keinen Hintergrund, sondern
      `fg.tertiary` als Schrift und einen ein Pixel hohen Schatten in
      `border.tertiary` als Trennung.

   Die Akzentfarbe ist ein kraeftiges Limettengruen und traegt IMMER dunklen
   Text (`fg.black`). Weiss darauf waere unlesbar.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- colors.bg */
  --bg: #F9FCF8;                /* bg.page */
  --panel: #FFFFFF;             /* bg.default */
  --panel-2: #EFF5EB;           /* bg.secondary */
  --row-hover: #5F931F14;       /* bg.default.hovered -- mit Alpha, absichtlich */
  --row-active: #5E8B2729;      /* bg.default.pressed */
  --pill: #D8E4CB;              /* bg.pill.default */

  --accent-bg: #ABFF44;         /* bg.accent */
  --accent-bg-hover: #99F141;   /* bg.accent.hovered */
  --accent-bg-pressed: #7DDD3D; /* bg.accent.pressed */
  --bg-error-subtle: #FFDFE8;   /* bg.error.subtle */
  --bg-success-subtle: #EEFFD9; /* bg.success.subtle */
  --bg-warning-subtle: #FEF1C6; /* bg.warning.subtle */
  --bg-information-subtle: #E2F5F5; /* bg.information.subtle */

  /* ---------------------------------------------------------- colors.fg */
  --text: #202320;              /* fg.default (wertgleich mit fg.black) */
  --muted: #484E46;             /* fg.secondary */
  --fg-tertiary: #616755;       /* fg.tertiary */
  --fg-disabled: #A1AC8D;       /* fg.disabled */
  --accent: #226B1E;            /* fg.link.default */
  --accent-hover: #123810;      /* fg.link.default.hovered */
  --visited: #6D28D9;           /* fg.link.visited */
  --success: #226B1E;           /* fg.success.strong */
  --warning: #B54707;           /* fg.warning.strong */
  --danger: #5D2E41;            /* fg.error.strong */
  --information: #036988;       /* fg.information.strong */

  /* ------------------------------------------------------ colors.border */
  --line: #D8E4CB;              /* border.default */
  --line-subtle: #E4F0DA;       /* border.secondary */
  --line-tertiary: #E4F0DA;     /* border.tertiary */
  --control: #A1AC8D;           /* border.control */
  --control-hover: #717863;     /* border.control.hovered */
  --border-disabled: #5D813121; /* border.disabled */
  --focus: #197A94;             /* border.focus */
  --focus-error: #E284A0;       /* border.focus.error */
  --border-error: #A95A77;      /* border.error */

  /* ------------------------------------------------------- borderRadius */
  --radius-sm: 6px;             /* borderRadius.sm */
  --radius: 8px;                /* borderRadius.md */
  --radius-lg: 12px;            /* borderRadius.lg */
  --radius-full: 9999px;        /* borderRadius.full */

  /* Der Randschatten der Tabelle. KEIN Token -- `DataTableBody` schreibt
     diesen Wert woertlich hin, und der Token-Satz kennt ihn nicht. Er steht
     hier trotzdem, damit die Farbe genau einmal im Stylesheet vorkommt. */
  --schatten-rand: rgb(0 0 0 / 0.1);    /* DataTableBody, woertlich */

  /* ---------------------------------------------------------- boxShadow */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* boxShadow.md -- die Anmeldekarte, wie bei rcs */

  /* ------------------------------------------------------------ fontSize
     Groesse UND Zeilenhoehe gehoeren zusammen -- eines ohne das andere
     zerreisst den vertikalen Rhythmus. */
  --text-xs: 10px;  --lh-xs: 14px;
  --text-sm: 12px;  --lh-sm: 16px;
  --text-md: 14px;  --lh-md: 20px;
  --text-lg: 16px;  --lh-lg: 24px;
  --text-xl: 20px;  --lh-xl: 28px;

  /* ---------------------------------------------------------------- size
     Element-HOEHEN, keine Abstaende. */
  --size-2xs: 16px; --size-xs: 20px; --size-sm: 24px;
  --size-md: 32px;  --size-lg: 40px;

  /* ------------------------------------------------------------ duration */
  --duration-sm: 150ms;
  --duration-md: 250ms;

  /* ------------------------------------------------------------ Abstaende
     Die Skala aus der Utility-Schicht von @optiaxiom/react. */
  --sp-1: 2px;   --sp-2: 4px;   --sp-3: 6px;   --sp-4: 8px;
  --sp-5: 10px;  --sp-6: 12px;  --sp-8: 16px;  --sp-10: 20px;
  --sp-12: 24px; --sp-16: 32px; --sp-20: 40px; --sp-24: 48px;

  /* ------------------------------------------------------------ fontFamily
     Die Grotesk B und Roboto sind lizenzpflichtig und werden nicht
     nachgeladen -- die CSP verbietet externe Quellen. Wo sie installiert
     sind, greifen sie; sonst der Ruecklauf.

     Schaltflaechen nehmen bei Axiom eine eigene Familie: `ButtonRoot` setzt
     sie fest, sie steht in keinem fontFamily-Token. */
  --font-sans: Die Grotesk B, DI Grotesk B, Roboto Variable, system-ui, sans-serif;
  --font-button: Die Grotesk B, DI Grotesk B, Roboto Condensed Variable, system-ui, sans-serif;
  --font-mono: Roboto Mono Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-synthesis: none;
}

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

body {
  margin: 0;
  background: var(--bg);                /* bg.page */
  color: var(--text);                   /* fg.default */
  font-family: var(--font-sans);
  font-size: var(--text-md);            /* fontSize.md */
  line-height: var(--lh-md);
}

/* Link: Farbe, Hover mit Unterstreichung, eigener Fokusring -- alles aus der
   Axiom-Komponente `Link`, deren Ring `auto` statt `solid` ist. */
a {
  color: var(--accent);                 /* fg.link.default */
  text-decoration: none;
}
a:visited { color: var(--visited); }    /* fg.link.visited */
a:focus-visible { outline: 2px auto var(--focus); outline-offset: 1px; }

/* Ein Fokusring fuer alles, was keinen eigenen hat. Axiom setzt ihn
   durchgaengig als `2px solid border.focus` mit 2px Abstand. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { font-weight: 600; margin: 0; }
/* `Heading` rechnet die Zeilenhoehe als Verhaeltnis, nicht aus den
   fontSize-Tokens, und setzt keine eigene Schriftfamilie. */
h1 { font-size: var(--text-xl); line-height: 1.1; }
h2 { font-size: var(--text-lg); line-height: 1.3; }
h3 { font-size: var(--text-md); line-height: var(--lh-md); }

code { font-family: var(--font-mono); }

/* ==========================================================================
   Karte (Card)
   ========================================================================== */

.karte {
  background: var(--panel);             /* bg.default */
  border: 1px solid var(--line);        /* border.default */
  border-radius: var(--radius-lg);      /* Card: borderRadius.lg */
  box-shadow: var(--shadow-sm);
  padding: var(--sp-10);
  margin-bottom: var(--sp-10);
}
/* ------------------------------------------------------------------------
   Der senkrechte Rhythmus einer Karte -- **an einer Stelle**, nicht je Ansicht.

   Am 30.08.2026 ueber alle siebzehn Ansichten nachgemessen, statt zu schaetzen.
   Es kamen 26 Befunde heraus, und sie waren nicht 26 Faelle, sondern ein
   halbes Dutzend fehlender Regeln: der erklaerende Satz klebte mit 6px an
   seiner Ueberschrift, Tabellen standen 6px unter ihrem `h3`, eine Knopfreihe
   12px unter dem Absatz darueber, und an zwei Stellen beruehrten sich zwei
   Bloecke ganz (0px).

   Drei Regeln, mehr braucht es nicht:

   1. Zwischen zwei Bloecken **16px** -- der Grundrhythmus.
   2. Vor einer Zwischenueberschrift **32px** -- sie beginnt einen Abschnitt,
      und ein Abschnitt braucht mehr Luft als eine Zeile.
   3. Nach einer Ueberschrift **12px** -- weniger, als zwischen zwei
      Abschnitten liegt, denn was folgt, gehoert zu ihr.

   Die Raender kollabieren im normalen Fluss; der groessere gewinnt. Deshalb
   sind das Mindestabstaende und keine Addition. */
.karte > * + * { margin-top: var(--sp-8); }
.karte > h2 { margin-bottom: var(--sp-6); }
.karte h3 { margin: var(--sp-16) 0 var(--sp-6); }
.karte > h3 + * { margin-top: var(--sp-6); }
/* Nur der untere Rand: der obere kommt aus dem Rhythmus. Ein hart gesetztes
   `margin-top: 0` gewann sonst gegen `.karte > * + *` -- in der Regelansicht
   klebte der erklaerende Satz dadurch am Formular darueber. */
.karte > p { margin-bottom: var(--sp-6); }

/* Innerhalb einer Gruppe gilt derselbe Rhythmus. Der Schalter am Ende einer
   Gruppe („Fortschritt anzeigen“) stand sonst direkt am Feld darueber. */
fieldset.kasten-gruppe > * + * { margin-top: var(--sp-8); }
/* `label.kasten` setzt `margin: 0` und gewaenne sonst gegen die Zeile darueber
   -- im Designer stand der Schalter „Fortschritt anzeigen“ dadurch **direkt**
   am Feld darueber. */
fieldset.kasten-gruppe > * + label.kasten { margin-top: var(--sp-8); }
/* Der erklaerende Satz und das, was er erklaert: **immer 16px**, gleich wie
   tief er steckt. Vorher hing das an der Verschachtelung -- als direktes Kind
   der Karte gewann der Rhythmus mit 16px, in einem beliebigen `div` blieben
   die 12px des Absatzes stehen. Derselbe Zusammenhang sah an zwei Stellen
   verschieden aus, ohne dass es dafuer einen Grund gab. Der Kasten
   (`fieldset.kasten-gruppe > .hinweis`) hielt es schon immer so. */
.karte p.hinweis { margin-bottom: var(--sp-8); }

/* Derselbe Rhythmus in jedem Behaelter, der Bloecke stapelt -- nicht nur in
   der Karte selbst. Die erste Messung lief nur ueber `.karte > *` und sah
   verschachtelte Behaelter nie: im Formular stand die Knopfreihe mit **0px**
   am Kasten darueber, in der Vorschauspalte des Designers standen Auswahl,
   Erklaerung und Buehne mit 12px aneinander. */
form.anlegen > * + *,
.designer-vorschau > * + * { margin-top: var(--sp-8); }
/* Die Bezeichnung „Vorschau“ ist eine Ueberschrift in Kleinschrift und folgt
   deren Regel: was darunter steht, gehoert zu ihr. */
.designer-vorschau > .vorschau-titel { margin-bottom: var(--sp-6); }
.designer-vorschau > .vorschau-titel + * { margin-top: var(--sp-6); }

/* Aufzaehlungen: zwei Punkte duerfen sich nicht beruehren, brauchen aber
   weniger Luft als zwei Bloecke -- sie gehoeren zusammen. */
.karte li + li { margin-top: var(--sp-3); }

/* ==========================================================================
   Schaltflaechen (ButtonRoot)

   Axiom polstert waagerecht aus einer eigenen Groesse (`--_1q29bce`: 8px bei
   md, 6px bei sm) und zieht die Randbreite davon ab, damit Elemente mit und
   ohne Rand gleich breit bleiben. Die Hoehe kommt aus `size`, nicht aus einer
   senkrechten Polsterung.
   ========================================================================== */

button {
  font-family: var(--font-button);      /* ButtonRoot */
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 600;
  border-radius: var(--radius);         /* borderRadius.md */
  padding: 0 calc(var(--sp-4) - 1px);   /* ButtonRoot md, abzueglich Rand */
  min-height: var(--size-md);           /* size.md */
  cursor: pointer;
  /* Gefuellt in Akzent: dunkler Text (fg.black), Rand in border.disabled --
     so steht es in der Variante `solid/accent`. */
  background: var(--accent-bg);         /* bg.accent */
  border: 1px solid var(--border-disabled);
  color: var(--text);                   /* fg.black */
  transition: background var(--duration-sm) ease;
}
button:active:not(:disabled) { background: var(--accent-bg-pressed); }
button:focus-visible {
  outline: 2px solid var(--focus);      /* border.focus */
  outline-offset: 2px;
  z-index: 10;
}
button:disabled {
  background: var(--panel-2);           /* bg.secondary */
  border-color: transparent;
  color: var(--fg-disabled);            /* fg.disabled */
  cursor: not-allowed;
}

/* Schlicht: heller Grund mit Rand, fuer alles ausser der Hauptaktion --
   Axioms Variante `default/neutral`. */
button.leise {
  background: var(--panel);             /* bg.default */
  border-color: var(--line);            /* border.default */
  color: var(--text);                   /* fg.default */
  font-weight: 500;
}
button.leise:active:not(:disabled) {
  background: var(--row-active);        /* bg.default.pressed */
  border-color: var(--control-hover);   /* border.control.hovered */
}
/* `background` steht in .leise erneut und ist gleich spezifisch wie
   `button:disabled` -- ohne diese Zeile bliebe der gesperrte Knopf weiss
   statt bg.secondary. */
button.leise:disabled { background: var(--panel-2); border-color: transparent; }

/* Axiom haengt JEDEN Hover in `@media (hover: hover)` und schliesst den
   gedrueckten Zustand aus. Ohne die Abfrage bliebe auf einem Tablet die
   Hover-Farbe nach dem Antippen stehen. */
@media (hover: hover) {
  a:hover { color: var(--accent-hover); text-decoration: underline; }
  button:hover:not(:active, :disabled) { background: var(--accent-bg-hover); }
  button.leise:hover:not(:active, :disabled) {
    background: var(--row-hover);       /* bg.default.hovered */
    border-color: var(--control-hover); /* border.control.hovered */
  }
  input[type="file"]::file-selector-button:hover {
    background: var(--row-hover);       /* bg.default.hovered */
    border-color: var(--control-hover); /* border.control.hovered */
  }
}

/* ==========================================================================
   Eingaben (InputRoot / InputControl)
   ========================================================================== */

label {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: var(--text-sm);            /* fontSize.sm */
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--muted);                  /* fg.secondary */
}

input, select, textarea {
  display: block;
  width: 100%;
  /* 6px zwischen Beschriftung und Feld. Bei 4px klebte die Beschriftung am
     Rahmen und las sich wie ein Teil davon. */
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: inherit;
  /* InputControl: 16px als Grundwert. Kleiner waere hier falsch -- unter
     16px zoomt iOS beim Hineintippen die ganze Seite heran. Erst ab 600px
     Breite geht Axiom auf 14px herunter. */
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text);                   /* fg.default */
  background: var(--panel);             /* InputRoot: bg.default */
  border: 1px solid var(--line);        /* InputRoot: border.default */
  border-radius: var(--radius);         /* InputRoot: borderRadius.md */
  min-height: var(--size-md);
}
@media screen and (min-width: 37.5rem) {
  input, select, textarea { font-size: var(--text-md); line-height: var(--lh-md); }
}
input::placeholder, textarea::placeholder {
  color: var(--fg-tertiary);            /* InputControl: fg.tertiary */
}
input:disabled::placeholder, textarea:disabled::placeholder {
  color: var(--fg-disabled);            /* InputControl [data-disabled] */
}
/* InputRoot: beim Fokus wechselt die Randfarbe UND der Ring erscheint. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--control);         /* border.control */
  outline: 2px solid var(--focus);      /* border.focus */
  outline-offset: 2px;
  z-index: 10;
}
/* Ungueltig: roter Rand, und der Fokusring wechselt mit.
 
   `:user-invalid`, nicht `:invalid`. Axiom setzt `[data-invalid]` erst, wenn
   der Benutzer etwas versucht hat; `:invalid` allein greift schon beim
   Aufbau der Seite. Genau das ist hier passiert: das leere Pflichtfeld
   "E-Mail" auf der Anmeldeseite stand rot umrandet da, bevor jemand
   hineingetippt hatte. Der erste Versuch, das mit
   `:not(:placeholder-shown)` abzufangen, half nicht -- ohne
   placeholder-Attribut trifft dieser Selektor nie zu. */
input:user-invalid { border-color: var(--border-error); }
input:user-invalid:focus-visible {
  border-color: var(--border-error);
  outline-color: var(--focus-error);    /* border.focus.error */
}
/* InputRoot [data-disabled]: die Schrift wird `border.control`, nicht
   `fg.disabled` -- so steht es dort. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg);                /* bg.page */
  border-color: var(--line);            /* border.default */
  color: var(--control);                /* border.control */
  cursor: not-allowed;
}
input[readonly] {
  background: var(--bg);                /* bg.page */
  border-color: var(--line-tertiary);   /* border.tertiary */
  cursor: default;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  width: var(--size-2xs);
  height: var(--size-2xs);
  min-height: 0;
  margin-top: 0;
}
input[type="color"] { padding: var(--sp-1); min-height: var(--size-lg); cursor: pointer; }
/* Die Schaltflaeche im Dateifeld gehoert dem Browser und kommt sonst im
   Systemlook daher -- mitten in einer Axiom-Oberflaeche der einzige Knopf,
   der aussieht wie von 1998. Sie bekommt dieselben Werte wie `button.leise`. */
input[type="file"] { border: none; padding-left: 0; background: transparent; }
input[type="file"]::file-selector-button {
  font-family: var(--font-button);      /* ButtonRoot */
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 500;
  min-height: var(--size-md);           /* size.md */
  padding: 0 calc(var(--sp-4) - 1px);
  margin-right: var(--sp-5);
  border: 1px solid var(--line);        /* border.default */
  border-radius: var(--radius);         /* borderRadius.md */
  background: var(--panel);             /* bg.default */
  color: var(--text);                   /* fg.default */
  cursor: pointer;
}
textarea { resize: vertical; }

@media (hover: hover) {
  /* InputRoot: der Rand reagiert schon vor dem Hineinklicken. */
  input:hover:not(:disabled, [readonly]),
  select:hover:not(:disabled),
  textarea:hover:not(:disabled) { border-color: var(--control); }
}

/* ==========================================================================
   Tabellen (Table / TableHeaderCell / TableCell / TableRow)

   Abgelesen, nicht erfunden -- siehe die Korrektur im Kopfkommentar. Die
   Kopfzelle traegt keinen Hintergrund, sondern `fg.tertiary` als Schrift und
   `box-shadow: 0 1px 0 border.tertiary` als Trennung.

   Die Zeilentrennung sitzt bei Axiom als `border-top` an den Zellen jeder
   Zeile ausser der ersten -- nicht als `border-bottom`. Das sieht gleich aus,
   aber die letzte Zeile braucht keine Sonderregel.
   ========================================================================== */

/* Der Rahmen traegt Radius und Ueberlauf: `border-radius` auf <table> greift
   bei `border-collapse: collapse` nicht.

   Die Verlaeufe an den Raendern stammen aus `DataTableBody`: laeuft die
   Tabelle seitlich ueber, steht dort ein Schatten und sagt, dass rechts oder
   links noch etwas kommt. Ohne ihn sieht eine abgeschnittene Spalte aus wie
   das Ende der Tabelle.

   Vier Ebenen, und der Kniff steckt in `background-attachment`: die beiden
   Deckel liegen `local` und wandern mit dem Inhalt, die beiden Schatten
   liegen `scroll` und bleiben am Rand stehen. Am Anfang deckt der Deckel den
   Schatten zu; sobald etwas hinausgerollt ist, wandert er weg und gibt ihn
   frei. Passt die Tabelle ganz hinein, decken beide Deckel dauerhaft -- es
   braucht also kein Skript, das die Breite nachmisst.

   Der erste Versuch lief ueber `animation-timeline: scroll()`. Der Schatten
   stand danach auf beiden Seiten dauerhaft sichtbar da, auch bei einer
   Tabelle, die vollstaendig hineinpasste -- schlimmer als gar keiner, denn er
   behauptete Inhalt, den es nicht gab. */
.tabelle {
  border: 1px solid var(--line);        /* border.default */
  border-radius: var(--radius);         /* borderRadius.md */
  overflow-x: auto;
  background-color: var(--panel);       /* bg.default */
  background-image:
    linear-gradient(to right, var(--panel) 40%, transparent),
    linear-gradient(to left, var(--panel) 40%, transparent),
    linear-gradient(to right, var(--schatten-rand), transparent),
    linear-gradient(to left, var(--schatten-rand), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;  /* DataTableBody: 16px */
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);            /* fontSize.md */
  line-height: var(--lh-md);
}

thead th {
  color: var(--fg-tertiary);            /* TableHeaderCell: fg.tertiary */
  text-align: start;                    /* TableHeaderCell */
  font-size: var(--text-sm);            /* fontSize.sm */
  line-height: var(--lh-sm);
  font-weight: 600;
  white-space: nowrap;
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 1px 0 var(--line-tertiary);   /* TableHeaderCell */
}

tbody td {
  padding: var(--sp-5) var(--sp-6);
  text-align: start;
  vertical-align: top;                  /* TableCell */
  /* TableCell schreibt `word-break: break-word`. Das ist der abgekuendigte
     Aliasname fuer `overflow-wrap: anywhere` -- und der zieht die
     Mindestbreite einer Spalte unter ihr laengstes Wort. In einer Tabelle mit
     sechs Spalten trennt der Browser dann mitten in "Redaktion", obwohl
     Platz da waere. Hier steht die heutige Schreibweise derselben Absicht:
     ein Wort umbrechen, wenn es wirklich nicht passt, sonst die Spalte breit
     genug lassen. Einzige Abweichung von TableCell, und eine bewusste. */
  overflow-wrap: break-word;
}
/* TableCell: die Trennlinie sitzt oben, ab der zweiten Zeile. */
tbody tr:not(:first-child) td { border-top: 1px solid var(--line-subtle); }

tbody tr { transition: background var(--duration-sm) ease; }
@media (hover: hover) {
  tbody tr:hover { background: var(--row-hover); }  /* TableRow: bg.default.hovered */
}

/* Der Einbettungs-Schnipsel zum Kopieren. Als <pre>, damit die Umbrueche
   bleiben -- ein Schnipsel in einer Zeile kopiert sich schlecht. */
.snippet-code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  overflow-x: auto;
  white-space: pre;
  /* Nur unten ein eigener Rand -- oben gilt der Rhythmus der Karte. Mit
     `margin: var(--sp-4) 0` stand der Schnipsel 8px unter dem Formular. */
  margin-bottom: var(--sp-8);
}

/* Eine leere Zelle sieht sonst aus wie ein Fehler. */
td:empty::after { content: "—"; color: var(--fg-disabled); }

/* Bedienelemente in einer Zeile duerfen sie nicht hoeher machen: die kleine
   Groesse polstert mit 6px statt 8px und ist size.sm hoch. */
/* In einer Zelle steht eine Reihe von Knoepfen -- dort gilt die
   Group-Vorgabe `center`, denn es gibt keine Beschriftungen, die
   unterschiedlich hoch werden koennten. */
td .reihe { gap: var(--sp-3); flex-wrap: nowrap; align-items: center; }
td button.leise {
  padding: 0 calc(var(--sp-3) - 1px);   /* ButtonRoot sm */
  min-height: var(--size-sm);           /* size.sm */
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  white-space: nowrap;
}

/* ==========================================================================
   Marken (Badge)

   Axiom faerbt die zurueckhaltende Auspraegung als `bg.<art>.subtle` mit
   `fg.<art>.strong`. Neutral ist `bg.secondary` auf `fg.secondary` -- nicht
   die Pillenfarbe, die hier vorher stand.
   ========================================================================== */

/* Badge: `min-width` gilt nur `:not(:empty)` -- eine leere Marke soll nichts
   sein, kein 20 Pixel breiter Fleck. Und Badge richtet seinen Text nicht
   mittig aus; das stand hier und war eine Zutat von mir. */
.marke {
  display: inline-block;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-align: start;
  /* Eine Marke ist bei Axiom ein kurzes Zeichen. Bricht sie um, steht der
     Satz mittig und liest sich schlechter als eine gewoehnliche Zeile --
     laenger Text gehoert daneben, nicht hinein. */
  white-space: nowrap;
  background: var(--panel-2);           /* Badge neutral: bg.secondary */
  color: var(--muted);                  /* Badge neutral: fg.secondary */
  user-select: none;
}
.marke:not(:empty) { min-width: var(--size-xs); }   /* Badge: size.xs */

.marke.gut { background: var(--bg-success-subtle); color: var(--success); }
.marke.warnung { background: var(--bg-warning-subtle); color: var(--warning); }
.marke.fehler { background: var(--bg-error-subtle); color: var(--danger); }

/* ==========================================================================
   Meldungen (Alert)
   ========================================================================== */

.meldung {
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius);
  margin-bottom: var(--sp-8);
  min-height: var(--size-sm);           /* Alert: size.sm */
  font-size: var(--text-md);
  line-height: var(--lh-md);
}
.meldung.fehler { background: var(--bg-error-subtle); color: var(--danger); }
.meldung.gut { background: var(--bg-success-subtle); color: var(--success); }

/* Ein Hinweis, der eine Entscheidung verlangt -- Wort UND Farbe, nie Farbe
   allein. */
.kontrast-warnung {
  background: var(--bg-warning-subtle); /* bg.warning.subtle */
  color: var(--warning);                /* fg.warning.strong */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-8);
  font-size: var(--text-md);
  line-height: var(--lh-md);
}
.kontrast-warnung p { margin: 0; }
.kontrast-warnung ul { margin: var(--sp-4) 0 0; padding-left: var(--sp-10); }

.hinweis {
  color: var(--muted);                  /* fg.secondary */
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

/* ==========================================================================
   Anordnung
   ========================================================================== */

/* Die Zeile ist Axioms `Group`: eine Flex-Reihe mit einem Abstand aus der
   Skala. Zwei Abweichungen, beide bewusst:

   - `end` statt der Group-Vorgabe `center`. In einer Reihe beschrifteter
     Felder darf eine zweizeilige Beschriftung ihr Eingabefeld nicht gegen
     die der Nachbarn verschieben; die Felder muessen unten auf einer Linie
     stehen. `Field` loest dasselbe in React ueber gleich hohe Bloecke.
   - Die Schreibweise ist `end`, nicht `flex-end`: Axioms `alignItems` kennt
     nur `stretch | center | end | start | normal`. */
/* Die Zeile ist Axioms `Group`. Zwei Abstaende, nicht einer:
   **quer** 16px, damit vier Felder nebeneinander nicht zusammenkleben, und
   **hoch** 12px fuer den Fall, dass sie umbrechen.

   Gemessen am 30.08.2026: zwischen zwei Feldzeilen standen **null Pixel**.
   `label` bringt zwar unten 12px mit, aber `.reihe label` nahm sie weg -- und
   die Zeile selbst hatte keinen Ersatz. Das Formular war dadurch eine
   ununterbrochene Wand aus Eingabefeldern. */
.reihe { display: flex; gap: var(--sp-6) var(--sp-8); align-items: end; flex-wrap: wrap; }
.reihe label { flex: 1 1 200px; margin-bottom: 0; }
.reihe + .reihe { margin-top: var(--sp-8); }

form.anlegen {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);    /* Separator */
}

label.kasten {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 400;
  color: var(--text);
  flex: 0 0 auto;
  cursor: pointer;
}
label.kasten input { width: auto; margin-top: 0; }
@media (hover: hover) {
  label.kasten:hover { background: var(--row-hover); }
}

/* Eine Gruppe ist ein Abschnitt, kein Rahmen um Felder: sie braucht Luft
   innen und deutlich Abstand zur naechsten, sonst verschwimmen die Abschnitte
   zu einem einzigen langen Formular. */
fieldset.kasten-gruppe {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-10) var(--sp-10);
  margin: var(--sp-12) 0 0;
}
fieldset.kasten-gruppe legend {
  padding: 0 var(--sp-4);
  /* Die Ueberschrift des Abschnitts -- in Textfarbe und etwas groesser als
     eine Feldbeschriftung. Vorher war sie kleiner als die Felder darunter und
     ging zwischen ihnen unter. */
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 600;
  color: var(--text);
}
/* Der erklaerende Satz gehoert zur Gruppe, nicht an das erste Feld. */
fieldset.kasten-gruppe > .hinweis { margin: 0 0 var(--sp-8); }
fieldset.kasten-gruppe > .reihe + .reihe { margin-top: var(--sp-8); }

/* ==========================================================================
   Anmeldeseite -- Aufbau und Anmutung nach rcs.hikel.de

   Eine Karte in der Mitte des leeren Schirms, darin Marke, ein Formular fuer
   alle Zustaende und darunter die Nebenwege ("Passwort vergessen?").

   Zwei bewusste Abweichungen von rcs, beide zugunsten von Axiom (dieselbe
   Regel wie am 04.09.2026 bei Feld und Knopf):
   - Die Karte ist 448px breit (maxSize.md). rcs nimmt 380px, und dafuer gibt
     es kein Token.
   - Alle Abstaende stammen aus der Skala. rcs schreibt 20px, 14px und 6px
     hin; 14px liegt zwischen zwei Stufen.
   ========================================================================== */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-12);
}
.auth-karte {
  width: 100%;
  max-width: 448px;                     /* maxSize.md */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-12);
}
.auth-marke {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}
.auth-marke h1 { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); }
.auth-marke .sub { margin: 0; }
.auth-karte label { display: block; margin-bottom: var(--sp-6); }
.hint {
  margin: 0 0 var(--sp-6);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.auth-fehler,
.auth-erfolg {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.auth-fehler { background: var(--bg-error-subtle); color: var(--danger); }
.auth-erfolg { background: var(--bg-success-subtle); color: var(--text); border: 1px solid var(--accent); }
.auth-knopf { width: 100%; margin-top: var(--sp-3); }
.auth-fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
/* Nebenwege sehen aus wie Links und sind Knoepfe: sie loesen keinen
   Seitenwechsel aus, sondern einen Zustand. Die Knopf-Grundregel wird hier
   ganz zurueckgenommen. */
button.auth-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Das Auge im Passwortfeld (passwort.js). Es liegt im Feld, nicht daneben:
   daneben rutschte es im schmalen Fenster in die naechste Zeile. */
.pw-huelle { position: relative; display: block; width: 100%; }
.pw-huelle input { width: 100%; padding-inline-end: var(--sp-20); }
label > .pw-huelle { margin: 0; }
button.pw-auge {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--sp-3);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-md);
  height: var(--size-md);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

@media (hover: hover) {
  button.auth-link:hover { color: var(--text); }
  button.pw-auge:hover { color: var(--text); background: var(--panel-2); }
}

/* Sichtbar fuer Screenreader, unsichtbar fuers Auge. Jede Tabelle bekommt
   eine Beschriftung -- WCAG 2.1 AA verlangt, dass sie sagt, was sie enthaelt.
   `display: none` waere hier falsch: dann liest sie auch der Screenreader
   nicht vor. */
.versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Der Faktor-Schluessel und die Wiederherstellungscodes werden abgetippt --
   deshalb gross, mit Abstand und in gleichbreiter Schrift. */
.mfa-geheimnis {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: var(--panel-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 2px;
}
.codeliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
}
.codeliste li {
  font-family: var(--font-mono);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-md);
}

/* ==========================================================================
   Linke Navigation (Nav / NavItem / NavAccountItem)

   Aufbau wie rcs.hikel.de, Werte aus den Axiom-Komponenten. Wichtig: der
   ausgewaehlte Eintrag traegt bei Axiom `bg.default.pressed` und sonst
   nichts -- nicht die Akzentfarbe, die hier vorher stand.
   ========================================================================== */

.app-huelle { display: flex; min-height: 100vh; }

.sidebar {
  width: 236px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--panel);             /* bg.default */
  border-right: 1px solid var(--line);  /* border.default */
  position: sticky;
  top: 0;
  height: 100vh;
  /* Nichts darf seitlich herausragen -- eingeklappt laege der Umschalter
     sonst ausserhalb der Leiste und waere nicht mehr erreichbar. */
  overflow: hidden;
  transition: width var(--duration-md) ease;  /* Nav */
}
.sidebar.eingeklappt { width: 64px; }
.sidebar.eingeklappt .nav-text,
.sidebar.eingeklappt .nav-kopf-text,
.sidebar.eingeklappt .nav-gruppe,
.sidebar.eingeklappt .konto-text { display: none; }
.sidebar.eingeklappt .nav-punkt { justify-content: center; }
.sidebar.eingeklappt .nav-kopf { flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); }
.sidebar.eingeklappt .nav-umschalter { margin-left: 0; }
.sidebar.eingeklappt .nav-konto { justify-content: center; }

.nav-kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.logo {
  width: var(--size-md); height: var(--size-md);   /* size.md */
  border-radius: var(--radius);
  background: var(--accent-bg);         /* bg.accent */
  color: var(--text);                   /* fg.black -- Weiss waere unlesbar */
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex: none;
}
.nav-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.nav-kopf-text strong { font-size: var(--text-md); line-height: var(--lh-md); }
.nav-kopf-text small {
  font-size: var(--text-xs); line-height: var(--lh-xs);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-umschalter {
  margin-left: auto;
  width: var(--size-sm); height: var(--size-sm);   /* size.sm */
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  position: relative;
  flex: none;
  padding: 0;
}
.nav-umschalter::before {
  content: "";
  position: absolute; inset: var(--sp-2) auto var(--sp-2) var(--sp-3);
  width: 2px;
  background: var(--muted);
}

.nav-koerper { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-4); }
.nav-gruppe {
  font-size: var(--text-xs);            /* fontSize.xs */
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fg-tertiary);            /* fg.tertiary */
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.nav-liste { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Separator: eine Linie oben, sonst nichts. */
.nav-trenner { border: none; border-top: 1px solid var(--line); margin: var(--sp-5) var(--sp-2); }

.nav-punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  min-height: var(--size-md);
  padding: var(--sp-4) var(--sp-5);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);                  /* NavItem: fg.secondary */
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-punkt:active {
  background: var(--row-active);        /* NavItem: bg.default.pressed */
  color: var(--text);                   /* NavItem: fg.default */
}
/* NavItem [data-state=active]: nur die Flaeche wechselt, die Schriftfarbe
   bleibt. Die Schriftstaerke ist die eine Zutat, die nicht aus Axiom kommt --
   ohne sie haenge die Markierung allein an der Farbe (WCAG 1.4.1). */
.nav-punkt.aktiv { background: var(--row-active); font-weight: 600; }
.nav-punkt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; z-index: 10; }

@media (hover: hover) {
  /* NavItem: kein Hover auf dem ausgewaehlten oder gedrueckten Eintrag. */
  .nav-punkt:hover:not(.aktiv):not(:active) { background: var(--row-hover); }
  .nav-umschalter:hover { background: var(--pill); }   /* bg.pill.default */
}

.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: var(--size-xs); height: var(--size-xs);
  flex: none;
  font-size: var(--text-md);
}

.nav-fuss { border-top: 1px solid var(--line); padding: var(--sp-4); }
.nav-konto { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4); }
.konto-text { display: flex; flex-direction: column; min-width: 0; }
.konto-text strong {
  font-size: var(--text-md); line-height: var(--lh-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-text small { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); }
.avatar {
  width: var(--size-md); height: var(--size-md);
  border-radius: var(--radius-full);
  background: var(--panel-2);           /* bg.avatar.neutral */
  color: var(--muted);                  /* fg.avatar.neutral */
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex: none;
}

/* ==========================================================================
   Inhalt (Layout / LayoutContent)
   ========================================================================== */

.app-inhalt { flex: 1; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--panel);             /* bg.default */
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: var(--text-xl); line-height: 1.1; }
.topbar .sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--text-sm); line-height: var(--lh-sm);
  color: var(--muted);
}

/* Der Inhalt beginnt links und nimmt die Breite, die da ist.

   Hier stand `max-width: 1000px; margin: 0 auto`. Das schob auf einem breiten
   Schirm eine schmale Saeule in die Mitte und liess links und rechts je 300
   Pixel leer -- waehrend die Tabelle daneben ihre Spalten umbrach. Axioms
   `LayoutContent` kennt weder eine Hoechstbreite noch eine Zentrierung; die
   `maxSize`-Tokens gehen nur bis 512px und sind fuer Dialoge und Karten
   gedacht, nicht fuer eine Seite. */
main { padding: var(--sp-8); }

/* Nur die gewaehlte Ansicht steht da. */
.ansicht { display: none; }
.ansicht.sichtbar { display: block; }

/* --------------------------------------------------------------------------
   Umbrueche

   Axiom kennt genau ZWEI Haltepunkte, und beide stehen im uebersetzten CSS:
   sm = 37.5rem (600px) und md = 56.25rem (900px). Die Array-Schreibweise der
   Style-Props ist `[base, sm, md]` -- mehr gibt es nicht.

   Vorher standen hier 760px und 1000px. Beide hatte ich erfunden; sie lagen
   zwischen Axioms Haltepunkten, sodass ein Fenster von 950px die Seitenleiste
   schon als Spalte zeigte, waehrend jede Axiom-Komponente darin noch im
   schmalen Zustand war.

   Und die Regeln laufen jetzt von unten nach oben (`min-width`), wie bei
   Axiom: schmal ist der Grundzustand, breit die Zugabe.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Vorschau eines Feldes (Konzept 9.2)
   ==========================================================================

   Zwei Karten nebeneinander: so sieht die Frage im Web aus, so im Mailing.
   Bewusst in den Tokens dieser Oberflaeche und **nicht** in denen des
   Widgets -- Farben, Radius und Schrift dort stellt die einbindende Seite
   ueber CSS-Custom-Properties ein (6.3). Eine pixelgenaue Nachbildung waere
   fuer jeden Kunden mit eigenem Thema eine falsche Zusage; gezeigt werden
   Texte, Reihenfolge und Umbruch. */
.vorschau {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
.vorschau-karte {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: var(--panel-2);
}
.vorschau-titel {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vorschau-gegenleistung {
  margin: 0 0 var(--sp-1);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.vorschau-frage {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
}
.vorschau-hilfe {
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.vorschau-optionen { display: flex; flex-direction: column; gap: var(--sp-2); }
.vorschau-optionen.quer { flex-direction: row; flex-wrap: wrap; }
.vorschau-option {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  font-size: var(--text-md);
  line-height: var(--lh-md);
}
/* Im Mailing ist die Antwort eine Schaltflaeche, im Web eine Zeile zum
   Antippen. Der Unterschied ist echt und gehoert deshalb in die Vorschau. */
.vorschau-option.voll { background: var(--accent-bg); color: var(--text); border-color: var(--accent-bg); }
.vorschau-eingabe {
  display: inline-block;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
.vorschau-fuss {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--muted);
}

/* ==========================================================================
   Zeilenmenue („…“)
   ==========================================================================

   In einer Liste mit acht Spalten draengen drei Schaltflaechen den Inhalt
   zusammen -- und die gefaehrlichste liegt dann neben der harmlosesten.
   Eingeklappt bleibt die Zeile lesbar. */
.menue { position: relative; display: inline-block; }
.menue-ausloeser {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
/* Hover nur dort, wo es einen Zeiger gibt -- auf einem Touchgeraet bliebe der
   Zustand sonst nach dem Antippen kleben. */
@media (hover: hover) {
  .menue-ausloeser:hover { border-color: var(--line); color: var(--text); }
}
.menue-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 20;
  min-width: 168px;
  padding: var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.menue-punkt {
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font: inherit;
  font-size: var(--text-md);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) {
  .menue-punkt:hover { background: var(--row-hover); }
}
/* Loeschen sieht anders aus als der Rest -- eine Handlung, die man nicht
   zurueckholt, soll sich nicht wie die daneben anfuehlen. */
.menue-punkt.gefaehrlich { color: var(--danger); }

/* Die Zeile selbst fuehrt in die Detailseite. Der Zeiger sagt das an; das
   Menue faengt seinen Klick vorher ab. */
tbody tr.anklickbar { cursor: pointer; }

/* ==========================================================================
   Widget-Designer (Konzept 6.3)
   ==========================================================================

   Regler links, Vorschau rechts. Die Vorschau klebt beim Scrollen oben, damit
   sie sichtbar bleibt, während man unten an den Farben dreht -- eine Vorschau,
   die man nur durch Hochscrollen sieht, wird nicht benutzt. */
.designer { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
.designer-regler { margin: 0; }
.designer-vorschau { min-width: 0; }
/* Kein eigener oberer Rand: er kaeme sonst dem Rhythmus der Karte in die
   Quere und war mit 10px kleiner als dieser. */
.designer-buehne {
  padding: var(--sp-8);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Farbfelder sollen anfassbar sein, nicht briefmarkengroß. */
.designer input[type="color"] {
  width: 100%;
  min-width: 88px;
  height: 38px;
  padding: 2px;
  cursor: pointer;
}

/* ==========================================================================
   Freigaben (Konzept 9.1)
   ========================================================================== */
.freigabe-karte {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
}
.freigabe-kopf { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.freigabe-kopf h3 { margin: 0; }
/* Begriff und Wert in zwei Spalten: der Entscheidende ueberfliegt die
   Begriffe und liest nur, was ihn stutzig macht. */
.freigabe-daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-5) 0 0;
}
.freigabe-daten dt { color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.freigabe-daten dd { margin: 0; font-size: var(--text-md); line-height: var(--lh-md); }
.freigabe-form { display: flex; align-items: end; gap: var(--sp-4); margin-top: var(--sp-6); }
.freigabe-form label { flex: 1; }

/* Grundzustand: die Leiste liegt oben und rollt waagerecht -- eine
   236px-Spalte neben 320px Inhalt waere kein Nebeneinander mehr. */
.app-huelle { flex-direction: column; }
.sidebar {
  width: 100%; height: auto; position: static;
  border-right: none; border-bottom: 1px solid var(--line);
}
.sidebar.eingeklappt { width: 100%; }
.nav-koerper { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-4); }
.nav-liste { flex-direction: row; }
.nav-gruppe, .nav-trenner, .nav-umschalter { display: none; }
.nav-punkt { white-space: nowrap; }
.tabelle { border-radius: var(--radius-sm); }

/* Ab `md` steht die Leiste seitlich. */
@media screen and (min-width: 56.25rem) {
  .app-huelle { flex-direction: row; }
  .sidebar {
    width: 236px; height: 100vh; position: sticky; top: 0;
    border-right: 1px solid var(--line); border-bottom: none;
  }
  .sidebar.eingeklappt { width: 64px; }
  .nav-koerper { display: block; overflow-x: hidden; padding: var(--sp-5) var(--sp-4); }
  .nav-liste { flex-direction: column; }
  .nav-gruppe { display: block; }
  .nav-trenner, .nav-umschalter { display: block; }
  .nav-punkt { white-space: normal; }
  main { padding: var(--sp-12); }
  .tabelle { border-radius: var(--radius); }
  /* Nebeneinander erst, wenn zwei Karten wirklich nebeneinander passen. */
  .vorschau { grid-template-columns: 1fr 1fr; }
  .designer { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .designer-vorschau { position: sticky; top: var(--sp-8); }
}

/* ==========================================================================
   Kontextbezogene Hilfe

   Uebernommen aus webchat.hikel.de, damit sich beide Anwendungen gleich
   bedienen lassen. Angepasst sind nur die Tokennamen und die Klasse des
   Inhaltsbereichs (`.app-inhalt` statt `.inhalt`).

   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.

   `--bg-success-subtle` als Flaeche des aktiven Knopfes: dieses Projekt hat
   kein `accent.subtle`, und die beiden Werte sind in Axiom dasselbe helle
   Gruen. Kommt das Token dazu, gehoert es hierher.
   ========================================================================== */
/* Der Knopf gehoert **neben** die Ueberschrift, nicht darunter. Sie ist ein
   Block und fuellt die Zeile; hier schrumpft sie auf ihren Inhalt, damit er
   danebenpasst. Nachgemessen: vorher stand er 22px tiefer als die
   Unterkante der Ueberschrift, also in einer eigenen Zeile. */
.topbar h1 { display: inline-block; vertical-align: middle; }
.topbar .hilfe-knopf { vertical-align: middle; }

.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-button);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}
.hilfe-knopf[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-success-subtle);
}
.hilfe-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.hilfe-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  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; }


.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-button);
  font-size: var(--text-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(--text-xl);
  line-height: 1;
  cursor: pointer;
}
.hilfe-schliessen:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.hilfe-koerper {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: var(--text-md);
  line-height: var(--lh-md);
  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-button);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.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-sm);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: var(--text-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-button);
  font-size: var(--text-sm);
  cursor: pointer;
}
.hilfe-verweis:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hilfe-leer { color: var(--muted); }



}
/* ---- Ende Hilfe ---------------------------------------------------------- */

/* Axiom stellt jede Hover-Regel in diese Abfrage. Auf Beruehrung bliebe
   der Zustand sonst kleben, nachdem der Finger weg ist. (Das Wort mit dem
   Doppelpunkt steht hier bewusst nicht: der Waechter liest Zeilen, nicht
   Regeln, und ein Kommentar waere ein falscher Treffer.) */
@media (hover: hover) {
  .hilfe-knopf:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-success-subtle);
  }
  .hilfe-schliessen:hover { background: var(--row-hover); color: var(--text); }
  .hilfe-verweis:hover { background: var(--bg-success-subtle); border-color: var(--accent); }
}

/* Auf schmalen Schirmen nimmt die Schublade die ganze Breite -- 380px neben
   einem 375px-Fenster waeren zwei Streifen. Als min-width geschrieben, weil
   Axiom ausschliesslich von schmal nach breit baut: die Vorgabe unten gilt
   fuer klein, die Abfrage hebt sie ab `sm` auf. */
.hilfe-panel { width: 100vw; }
body.hilfe-offen .app-inhalt { padding-right: 0; }
@media (min-width: 37.5rem) {
  .hilfe-panel { width: 380px; }
  body.hilfe-offen .app-inhalt { padding-right: 380px; }
}