/* ==========================================================================
   Optimizely Axiom -- Grundstil und Bauteile

   Die Werte hier sind **nicht nachempfunden**. Sie stammen aus zwei Quellen:

   1. `axiom-tokens.css`, erzeugt aus `@optiaxiom/globals` -- jede Farbe, jeder
      Radius, jeder Schriftgrad steht dort als `--ax-*` und wird hier nur
      benutzt. Ein Zahlenwert in dieser Datei, der eine Farbe sein koennte,
      waere ein Fehler.
   2. Das kompilierte 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 eigene Entscheidung
      ist.

   Axiom ist eine React-Bibliothek; diese Anwendung rendert HTML auf dem
   Server. Es laufen deshalb dieselben Werte durch handgeschriebenes CSS statt
   durch React-Komponenten -- derselbe Weg wie bei praeferenz und print.

   **Zwei Haltepunkte, mehr gibt es nicht:** sm = 37.5rem, md = 56.25rem
   (`--ax-screens-sm` / `--ax-screens-md`). Eine Medienabfrage kann keine
   Variable lesen, die Zahlen stehen daher ausgeschrieben -- der Test in
   `axiom.test.ts` haelt sie gegen die Tokens.

   **Die Abstands-Skala** steckt nicht in den Theme-Tokens, sondern in Axioms
   Utility-Schicht: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80 px.
   ========================================================================== */

/* --------------------------------------------------------------- Grundlage */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * `hidden` schlaegt jedes `display`.
 *
 * Die Sichtbarkeit laeuft in dieser Anwendung ueber das Attribut, nicht ueber
 * eine Klasse -- und der Browser setzt dafuer nur `[hidden] { display: none }`
 * mit der Staerke eines Attributselektors. Jede eigene Regel mit `display`
 * gewinnt dagegen: `.ax-banner { display: flex }` liess ein leeres rotes
 * Meldungsfeld auf der Einrichtungsseite stehen, obwohl `hidden` gesetzt war.
 *
 * Deshalb hier einmal zentral und mit `!important`. Es ist die eine Stelle,
 * an der das richtig ist: die Alternative waere, an jedes Bauteil mit
 * `display` ein eigenes `[hidden]` zu haengen und beim naechsten eines zu
 * vergessen.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /* **Die Wurzelgroesse gehoert dem Anwender.** `100%` ist, was im Browser
     eingestellt ist -- normalerweise 16px, bei jemandem mit schlechten Augen
     mehr. Axioms Tokens sind alle in `rem` und haengen daran; eine feste
     Pixelzahl hier nimmt dieser Einstellung ihre Wirkung.

     Metronic setzte an dieser Stelle `13px !important` und schrumpfte damit
     **jeden** Axiom-Wert auf 13/16 -- `fontSize.md` auf 11,4px statt 14px,
     einen Dialog auf 598px statt 736px. Auf dem Bildschirmfoto sah das nur
     "etwas kompakt" aus. */
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--ax-colors-bg-page);
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md);
  line-height: var(--ax-fontSize-md-lineheight);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  /* Axiom setzt fuer Ueberschriften den `heading`-Stapel -- die condensed
     Schnitte. Das ist der sichtbarste Unterschied zu Metronic. */
  font-family: var(--ax-fontFamily-heading);
  font-weight: 600;
  margin: 0;
}

h1 { font-size: var(--ax-fontSize-2xl); line-height: var(--ax-fontSize-2xl-lineheight); }
h2 { font-size: var(--ax-fontSize-xl);  line-height: var(--ax-fontSize-xl-lineheight); }
h3 { font-size: var(--ax-fontSize-lg);  line-height: var(--ax-fontSize-lg-lineheight); }
h4, h5, h6 { font-size: var(--ax-fontSize-md); line-height: var(--ax-fontSize-md-lineheight); }

p { margin: 0; }

a {
  color: var(--ax-colors-fg-link-default);
  text-decoration: none;
}
a:hover { color: var(--ax-colors-fg-link-default-hovered); text-decoration: underline; }

code, pre, .schrift-mono {
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--ax-colors-border-secondary);
  margin: 16px 0;
}

/* Ein Fokusring fuer alles -- 2px, Abstand 2px, `border.focus`.
   Abgelesen aus ButtonRoot.css. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
  z-index: 10;
}

/* Der Sprunglink: unsichtbar, bis er den Fokus bekommt. Nicht `display:none`
   -- was nicht angezeigt wird, kann auch keinen Fokus bekommen. */
.ax-sprung {
  position: absolute;
  inset-block-start: -100vh;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--ax-colors-bg-accent);
  color: var(--ax-colors-fg-black);
  border-radius: var(--ax-borderRadius-md);
  font-weight: 600;
}
/* `:focus`, nicht `:focus-visible`. Der Link soll auftauchen, sobald er den
   Fokus hat -- auch wenn ihn ein Skript setzt. `:focus-visible` haette ihn
   dabei versteckt gelassen; beim Nachmessen stand er weiter bei -720px. */
.ax-sprung:focus { inset-block-start: 8px; text-decoration: none; }

/* Das Ziel des Sprungs bekommt den Fokus, soll ihn aber nicht anzeigen --
   der Anwender sieht ja, dass er unten angekommen ist. */
.ax-inhalt:focus { outline: none; }

/* ------------------------------------------------------------------ Schale
   Aufbau nach Axioms Sidebar-Muster: NavHeader, NavBody, NavAccountItem im
   Fuss. Die Leiste ist **hell** -- `NavItem.css` von @optiaxiom/react setzt
   `color: fg.secondary`, `bg.default.hovered` beim Ueberfahren und
   `bg.default.pressed` fuer den aktiven Punkt. Eine dunkle Leiste mit
   Akzentflaeche darauf sieht kraeftiger aus, ist aber nicht dieses
   Designsystem. */

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

.ax-leiste {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--ax-colors-bg-default);
  border-inline-end: 1px solid var(--ax-colors-border-default);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width var(--ax-duration-md) ease;
}

.ax-app[data-schmal="ja"] .ax-leiste { width: 64px; }

/* Kopf der Leiste: Kurzzeichen, Name, Umschalter. */
.ax-leiste-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--ax-colors-border-default);
  flex: none;
}

.ax-kurzzeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ax-borderRadius-md);
  background: var(--ax-colors-bg-accent);
  /* **Auf `bg.accent` immer dunkle Schrift.** Das Limettengruen ist hell;
     Weiss darauf kaeme auf 1,2:1 und waere unlesbar. */
  color: var(--ax-colors-fg-black);
  font-family: var(--ax-fontFamily-heading);
  font-weight: 700;
  font-size: var(--ax-fontSize-sm);
  letter-spacing: 0.5px;
  text-decoration: none;
}

.ax-leiste-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ax-leiste-text strong { font-size: var(--ax-fontSize-md); }
.ax-leiste-text small {
  font-size: var(--ax-fontSize-xs);
  color: var(--ax-colors-fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ax-app[data-schmal="ja"] .ax-leiste-kopf { flex-direction: column; padding: 12px 8px; gap: 8px; }
.ax-app[data-schmal="ja"] .ax-leiste-text { display: none; }

.ax-leiste-menue { flex: 1; overflow-y: auto; padding: 10px 8px; }

.ax-leiste-fuss {
  border-top: 1px solid var(--ax-colors-border-default);
  padding: 8px;
  position: relative;
  flex: none;
}

.ax-hauptteil { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Die Topbar traegt den Seitentitel -- nicht eine zweite Leiste darunter.
   Ein eigener Streifen nur fuer die Ueberschrift kostet Hoehe und sagt
   nichts, was hier nicht auch Platz haette. */
.ax-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ax-colors-border-default);
  background: var(--ax-colors-bg-default);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ax-kopf-werkzeuge { display: flex; align-items: center; gap: 8px; flex: none; }

.ax-inhalt { flex: 1; padding: 24px; min-width: 0; }

.ax-fuss {
  padding: 16px 24px;
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm);
  border-top: 1px solid var(--ax-colors-border-default);
}

/* Unter dem md-Haltepunkt wandert die Leiste heraus und kommt als Schublade
   zurueck. Zwei Haltepunkte hat Axiom, und dies ist der eine, der zaehlt. */
@media (max-width: 56.25rem) {
  .ax-leiste {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--ax-duration-md) ease;
    width: 232px;
    box-shadow: var(--ax-boxShadow-lg);
  }
  .ax-app[data-leiste="offen"] .ax-leiste { transform: none; }
  .ax-app[data-schmal="ja"] .ax-leiste { width: 232px; }
  .ax-app[data-schmal="ja"] .ax-leiste-text { display: flex; }
  .ax-app[data-schmal="ja"] .ax-leiste-kopf { flex-direction: row; padding: 14px 12px; }
  .ax-app[data-schmal="ja"] .ax-menue-titel { display: block; }
  .ax-app[data-schmal="ja"] .ax-konto-text { display: flex; }
  .ax-inhalt { padding: 16px; }
  .ax-kopf { padding: 12px 16px; }
}

/* ------------------------------------------------------------ Menue (Leiste)
   Werte aus `NavItem.css` von @optiaxiom/react. */

.ax-menue-gruppe {
  padding: 12px 10px 4px;
  font-size: var(--ax-fontSize-xs);
  line-height: var(--ax-fontSize-xs-lineheight);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ax-colors-fg-secondary);
  white-space: nowrap;
}

.ax-app[data-schmal="ja"] .ax-menue-gruppe { visibility: hidden; height: 8px; padding: 0; }

.ax-menue-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ax-borderRadius-md);
  background: none;
  color: var(--ax-colors-fg-secondary);
  font: inherit;
  font-size: var(--ax-fontSize-md);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ax-menue-link:hover {
  background: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-default);
  text-decoration: none;
}

/* **Der aktive Punkt traegt `bg.default.pressed`, nicht den Akzent.** So
   steht es in `NavItem.css`; der Akzent als Flaeche gehoert der
   Hauptschaltflaeche. Erkennbar bleibt er ueber vier Merkmale -- Flaeche,
   Schriftfarbe, Schriftstaerke und das eingefaerbte Symbol -- nicht nur
   ueber Farbe. */
.ax-menue-link[aria-current="page"] {
  background: var(--ax-colors-bg-default-pressed);
  color: var(--ax-colors-fg-default);
  font-weight: 600;
}
.ax-menue-link[aria-current="page"] .ax-symbol { color: var(--ax-colors-fg-accent-strong); }

.ax-menue-link.ist-aktiv { color: var(--ax-colors-fg-default); font-weight: 600; }

.ax-menue-link .ax-symbol { color: var(--ax-colors-fg-tertiary); flex: none; }
.ax-menue-link:hover .ax-symbol { color: var(--ax-colors-fg-default); }

.ax-menue-titel { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.ax-app[data-schmal="ja"] .ax-menue-titel,
.ax-app[data-schmal="ja"] .ax-menue-pfeil { display: none; }
.ax-app[data-schmal="ja"] .ax-menue-link { justify-content: center; padding-inline: 0; }

.ax-menue-pfeil { transition: transform var(--ax-duration-sm) ease; flex: none; display: flex; }
.ax-menue-eintrag[data-offen="ja"] > .ax-menue-link .ax-menue-pfeil { transform: rotate(90deg); }

.ax-menue-unter { display: none; padding-inline-start: 14px; }
.ax-menue-eintrag[data-offen="ja"] > .ax-menue-unter { display: block; }
.ax-app[data-schmal="ja"] .ax-menue-unter { display: none; }

/* ------------------------------------------------------- Konto in der Leiste
   Axioms `NavAccountItem` sitzt im Fuss der Navigation, nicht im Kopf der
   Seite -- dort sucht man es auch. */

.ax-konto-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--ax-borderRadius-md);
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: var(--ax-colors-fg-default);
}
.ax-konto-knopf:hover { background: var(--ax-colors-bg-default-hovered); }

.ax-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ax-borderRadius-full);
  background: var(--ax-colors-bg-avatar-neutral);
  color: var(--ax-colors-fg-avatar-neutral);
  font-size: var(--ax-fontSize-sm);
  font-weight: 600;
}

.ax-konto-text { display: flex; flex-direction: column; min-width: 0; }
.ax-konto-text strong { font-size: var(--ax-fontSize-md); overflow: hidden; text-overflow: ellipsis; }
.ax-konto-text small {
  font-size: var(--ax-fontSize-xs);
  color: var(--ax-colors-fg-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax-app[data-schmal="ja"] .ax-konto-text { display: none; }
.ax-app[data-schmal="ja"] .ax-konto-knopf { justify-content: center; }

/* Das Menue klappt nach oben auf -- unten ist kein Platz mehr. */
.ax-leiste-fuss .ax-aufklapp-inhalt {
  inset-block-end: calc(100% + 4px);
  top: auto;
  inset-inline: 8px auto;
  min-width: 200px;
}


/* ---------------------------------------------------------- Werkzeugleiste */

/* Der Titelblock links in der Topbar. */
.ax-seitentitel {
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-xl);
  line-height: var(--ax-fontSize-xl-lineheight);
  font-weight: 600;
  margin: 0;
}

.ax-brotkrumen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  font-size: var(--ax-fontSize-sm);
  color: var(--ax-colors-fg-secondary);
}

.ax-brotkrumen li { display: flex; align-items: center; gap: 8px; }
.ax-brotkrumen li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--ax-borderRadius-full);
  background: var(--ax-colors-fg-disabled);
}
.ax-brotkrumen a { color: var(--ax-colors-fg-secondary); }
.ax-brotkrumen a:hover { color: var(--ax-colors-fg-link-default-hovered); }

.ax-werkzeuge { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ Symbol */

.ax-symbol {
  display: inline-block;
  width: var(--ax-size-xs);
  height: var(--ax-size-xs);
  fill: currentColor;
  flex: none;
  vertical-align: -0.25em;
}
.ax-symbol-sm { width: var(--ax-size-2xs); height: var(--ax-size-2xs); }
.ax-symbol-md { width: var(--ax-size-sm); height: var(--ax-size-sm); }

/* --------------------------------------------------------------- Schaltflaeche
   Aus ButtonRoot.css: Radius `md`, der `heading`-Schriftstapel, 2px-Fokusring
   mit 2px Abstand, und `cursor: not-allowed` statt eines ausgegrauten Klicks.
   Die Innenabstaende dort sind 6/8/10px je Groesse -- hier sm/md/lg. */

.ax-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-md);
  line-height: var(--ax-fontSize-md-lineheight);
  font-weight: 600;
  padding: 8px 16px;
  /* `size.lg` = 2.5rem. Axioms Knopf hat zwar auch kleinere Stufen, aber die
     Hauptgroesse einer Verwaltungsoberflaeche soll bequem zu treffen sein --
     rcs haelt es ebenso. */
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
  border-color: var(--ax-colors-border-default);
}

.ax-knopf:hover { background: var(--ax-colors-bg-default-hovered); text-decoration: none; }
.ax-knopf:active { background: var(--ax-colors-bg-default-pressed); }
.ax-knopf[disabled], .ax-knopf[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--ax-colors-fg-disabled);
  border-color: var(--ax-colors-border-disabled);
  background: var(--ax-colors-bg-default);
}

/* Die Hauptschaltflaeche traegt den Akzent -- und **dunkle** Schrift.
   `bg.accent` ist Limettengruen; `fg.black` ist die einzige lesbare Wahl. */
.ax-knopf-haupt {
  background: var(--ax-colors-bg-accent);
  color: var(--ax-colors-fg-black);
  border-color: transparent;
}
.ax-knopf-haupt:hover { background: var(--ax-colors-bg-accent-hovered); }
.ax-knopf-haupt:active { background: var(--ax-colors-bg-accent-pressed); }

.ax-knopf-gefahr {
  background: var(--ax-colors-bg-error);
  color: var(--ax-colors-fg-white);
  border-color: transparent;
}
.ax-knopf-gefahr:hover { background: var(--ax-colors-bg-error-hovered); }
.ax-knopf-gefahr:active { background: var(--ax-colors-bg-error-pressed); }

/* Flach: kein Rahmen, keine Flaeche -- fuer Symbolknoepfe im Kopf. */
.ax-knopf-flach {
  background: none;
  border-color: transparent;
  color: var(--ax-colors-fg-secondary);
}
.ax-knopf-flach:hover { background: var(--ax-colors-bg-default-hovered); color: var(--ax-colors-fg-default); }

.ax-knopf-sm { padding: 4px 12px; min-height: 32px; font-size: var(--ax-fontSize-sm); }
.ax-knopf-lg { padding: 12px 20px; min-height: 48px; font-size: var(--ax-fontSize-lg); }

.ax-knopf-symbol { padding: 0; width: 40px; min-height: 40px; }
.ax-knopf-breit { width: 100%; }
.ax-knopf-symbol.ax-knopf-sm { width: 32px; min-height: 32px; }

/* Auf der dunklen Leiste. */
.ax-leiste .ax-knopf-flach { color: var(--ax-colors-fg-default-inverse); }
.ax-leiste .ax-knopf-flach:hover {
  background: var(--ax-colors-bg-default-inverse-hovered);
  color: var(--ax-colors-fg-white);
}

/* ------------------------------------------------------- Knopf, der laedt
   Metronic loeste das ueber `data-kt-indicator` und zwei Spans, die sein
   Stylesheet tauschte. Dieselbe Idee, eigene Namen -- und der Knopf ist
   waehrenddessen `disabled`, damit ein zweiter Klick nicht ein zweites Mal
   absendet. */

.ax-knopf-laedt { display: none; align-items: center; gap: 8px; }
.ax-knopf[data-laedt="ja"] .ax-knopf-text { display: none; }
.ax-knopf[data-laedt="ja"] .ax-knopf-laedt { display: inline-flex; }

.ax-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--ax-borderRadius-full);
  animation: ax-dreht 700ms linear infinite;
}

@keyframes ax-dreht { to { transform: rotate(360deg); } }

/* Wer Bewegung nicht sehen will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .ax-spinner { animation-duration: 3s; }
}

/* ------------------------------------------------------------------- Karte
   Aus Card.css: Radius `lg`. Rahmen und Flaeche kommen von Paper/Box. */

.ax-karte {
  background: var(--ax-colors-bg-default);
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-lg);
  box-shadow: var(--ax-boxShadow-sm);
}

.ax-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
}

.ax-karte-titel {
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-lg);
  font-weight: 600;
}

.ax-karte-rumpf { padding: 20px; }
.ax-karte-fuss {
  padding: 16px 20px;
  border-top: 1px solid var(--ax-colors-border-secondary);
}

/* ---------------------------------------------------------------- Tabelle
   Aus DataTableHeaderCell.css: die Kopfzelle hat **keine Flaeche**, sondern
   `fg.tertiary` als Schrift und eine duenne Linie als Trennung. Ein grauer
   Kopfbalken waere Metronic, nicht Axiom.

   Und: **Zahlen werden am Anfang ausgerichtet.** Das DataTable-Beispiel von
   Axiom laesst seine Betragsspalte links stehen. */

.ax-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ax-fontSize-md);
}

.ax-tabelle th {
  text-align: start;
  font-weight: 600;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm);
  padding: 8px 12px;
  border-bottom: 1px solid var(--ax-colors-border-tertiary);
  white-space: nowrap;
}

.ax-tabelle td {
  padding: 12px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  vertical-align: middle;
}

.ax-tabelle tbody tr:hover { background: var(--ax-colors-bg-default-hovered); }
.ax-tabelle tbody tr:last-child td { border-bottom: 0; }

.ax-tabelle-huelle { overflow-x: auto; }

/* --------------------------------------------------------------- Formulare */

.ax-feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }

.ax-etikett {
  font-size: var(--ax-fontSize-sm);
  font-weight: 600;
  color: var(--ax-colors-fg-secondary);
}

.ax-eingabe,
.ax-auswahl,
.ax-textfeld {
  width: 100%;
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md);
  line-height: var(--ax-fontSize-md-lineheight);
  color: var(--ax-colors-fg-default);
  background: var(--ax-colors-bg-default);
  /* **`border.default`, nicht `border.control`.** So steht es in
     `InputRoot.css` von @optiaxiom/react; `border.control` ist dort die
     Farbe, auf die der Rahmen beim Fokus wechselt. */
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  padding: 8px 12px;
  min-height: 40px;
}

.ax-eingabe:hover,
.ax-auswahl:hover,
.ax-textfeld:hover { border-color: var(--ax-colors-border-control-hovered); }

.ax-eingabe:focus-visible,
.ax-auswahl:focus-visible,
.ax-textfeld:focus-visible { border-color: var(--ax-colors-border-control); }

.ax-eingabe::placeholder,
.ax-textfeld::placeholder { color: var(--ax-colors-fg-tertiary); }

.ax-textfeld { min-height: 76px; resize: vertical; }

.ax-eingabe[disabled],
.ax-auswahl[disabled],
.ax-textfeld[disabled] {
  color: var(--ax-colors-fg-disabled);
  border-color: var(--ax-colors-border-disabled);
  cursor: not-allowed;
}

.ax-eingabe[aria-invalid="true"],
.ax-textfeld[aria-invalid="true"] { border-color: var(--ax-colors-border-error); }
.ax-eingabe[aria-invalid="true"]:focus-visible { outline-color: var(--ax-colors-border-focus-error); }

.ax-hinweis { font-size: var(--ax-fontSize-sm); color: var(--ax-colors-fg-secondary); }

/* Ein Pflichtfeld traegt einen Stern. Nicht nur farbig -- Farbe allein ist
   keine Auskunft fuer jeden. */
.ax-etikett[data-pflicht]::after {
  content: " *";
  color: var(--ax-colors-fg-error-strong);
}

/* Ein Formular, das die volle Breite einer Karte nutzt, aber nicht mehr:
   eine Eingabezeile ueber 1200 Pixel liest sich schlecht. `maxSize.lg` ist
   Axioms groesster dieser Werte. */
.ax-formular { max-width: var(--ax-maxSize-lg); }

.ax-formular-breit { max-width: none; }

/* Ankreuzfelder und Auswahlknoepfe in einer Reihe mit ihrem Text. */
.ax-wahl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.ax-wahl input,
.ax-kreuz {
  accent-color: var(--ax-colors-bg-accent);
  width: 16px;
  height: 16px;
  margin: 0;
}
.ax-fehlertext { font-size: var(--ax-fontSize-sm); color: var(--ax-colors-fg-error-strong); }

/* ------------------------------------------------------------- Marke (Pill)
   Aus Badge.css: die farbigen Varianten setzen jeweils `bg.*.subtle` als
   Flaeche und `fg.*.strong` als Schrift. */

.ax-marke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ax-borderRadius-full);
  font-size: var(--ax-fontSize-sm);
  line-height: var(--ax-fontSize-sm-lineheight);
  font-weight: 600;
  background: var(--ax-colors-bg-pill-default);
  color: var(--ax-colors-fg-default);
  white-space: nowrap;
}

.ax-marke-erfolg  { background: var(--ax-colors-bg-success-subtle);     color: var(--ax-colors-fg-success-strong); }
.ax-marke-warnung { background: var(--ax-colors-bg-warning-subtle);     color: var(--ax-colors-fg-warning-strong); }
.ax-marke-fehler  { background: var(--ax-colors-bg-error-subtle);       color: var(--ax-colors-fg-error-strong); }
.ax-marke-info    { background: var(--ax-colors-bg-information-subtle); color: var(--ax-colors-fg-information-strong); }

/* Der Zaehler an der Glocke -- rund, klein, immer lesbar. */
.ax-zaehler {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--ax-borderRadius-full);
  background: var(--ax-colors-bg-error);
  color: var(--ax-colors-fg-white);
  font-size: var(--ax-fontSize-xs);
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

/* --------------------------------------------------------- Leise Varianten
   Metronics `btn-light-danger` war ein Knopf mit zarter Flaeche und kraeftiger
   Schrift. Axiom kennt dieselbe Paarung von seinen Badges her:
   `bg.*.subtle` als Flaeche, `fg.*.strong` als Schrift. */

.ax-knopf-leise-gefahr {
  background: var(--ax-colors-bg-error-subtle);
  color: var(--ax-colors-fg-error-strong);
  border-color: transparent;
}
.ax-knopf-leise-gefahr:hover { background: var(--ax-colors-bg-error-light); }

.ax-knopf-leise-akzent {
  background: var(--ax-colors-bg-accent-subtle);
  color: var(--ax-colors-fg-accent-strong);
  border-color: transparent;
}
.ax-knopf-leise-akzent:hover { background: var(--ax-colors-bg-accent-light); }

.ax-knopf-leise-warnung {
  background: var(--ax-colors-bg-warning-subtle);
  color: var(--ax-colors-fg-warning-strong);
  border-color: transparent;
}
.ax-knopf-leise-warnung:hover { background: var(--ax-colors-bg-warning-light); }

/* -------------------------------------------------------------- Suchfeld
   Das Lupensymbol sitzt im Feld. `padding-inline-start` macht ihm Platz --
   nicht ein absolut gesetztes Icon ueber dem Text, das beim Tippen ueberdeckt
   wird. */

.ax-suche { position: relative; display: inline-flex; align-items: center; }
.ax-suche .ax-symbol {
  position: absolute;
  inset-inline-start: 10px;
  color: var(--ax-colors-fg-tertiary);
  pointer-events: none;
}
.ax-suche .ax-eingabe { padding-inline-start: 36px; width: 260px; }

@media (max-width: 37.5rem) {
  .ax-suche, .ax-suche .ax-eingabe { width: 100%; }
}

/* ------------------------------------------------------------- Blaettern */

.ax-blaettern {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ax-blaettern button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  background: none;
  color: var(--ax-colors-fg-default);
  font: inherit;
  cursor: pointer;
}
.ax-blaettern button:hover:not([disabled]) { background: var(--ax-colors-bg-default-hovered); }
.ax-blaettern [aria-current="page"] button {
  background: var(--ax-colors-bg-accent);
  color: var(--ax-colors-fg-black);
  font-weight: 600;
}
.ax-blaettern button[disabled] { color: var(--ax-colors-fg-disabled); cursor: not-allowed; }

/* ------------------------------------------------- Ankreuzfeld im Aufklapp */

.ax-kreuzfeld {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--ax-borderRadius-md);
  cursor: pointer;
}
.ax-kreuzfeld:hover { background: var(--ax-colors-bg-default-hovered); }
.ax-kreuzfeld input { accent-color: var(--ax-colors-bg-accent); width: 16px; height: 16px; margin: 0; }

/* ------------------------------------------------------------------ Banner
   Aus Banner.css: Flaeche `*.subtle`, Schrift `*.strong`, Radius `md`. */

.ax-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--ax-borderRadius-md);
  font-size: var(--ax-fontSize-md);
  background: var(--ax-colors-bg-information-subtle);
  color: var(--ax-colors-fg-information-strong);
  margin-bottom: 16px;
}

.ax-banner-erfolg  { background: var(--ax-colors-bg-success-subtle); color: var(--ax-colors-fg-success-strong); }
.ax-banner-warnung { background: var(--ax-colors-bg-warning-subtle); color: var(--ax-colors-fg-warning-strong); }
.ax-banner-fehler  { background: var(--ax-colors-bg-error-subtle);   color: var(--ax-colors-fg-error-strong); }

/* ----------------------------------------------------- Aufklappmenue, Schublade */

.ax-aufklapp { position: relative; }

.ax-aufklapp-inhalt {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  background: var(--ax-colors-bg-default);
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  box-shadow: var(--ax-boxShadow-lg);
  padding: 4px;
  z-index: var(--ax-zIndex-popover);
}

.ax-aufklapp-inhalt[hidden] { display: none; }

.ax-aufklapp-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  border-radius: var(--ax-borderRadius-md);
  font: inherit;
  color: var(--ax-colors-fg-default);
  text-align: start;
  cursor: pointer;
  text-decoration: none;
}
.ax-aufklapp-punkt:hover { background: var(--ax-colors-bg-default-hovered); text-decoration: none; }

.ax-trenner { height: 1px; background: var(--ax-colors-border-secondary); margin: 4px 0; }

.ax-schublade {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  background: var(--ax-colors-bg-default);
  border-left: 1px solid var(--ax-colors-border-secondary);
  box-shadow: var(--ax-boxShadow-xl);
  z-index: 70;
  display: flex;
  flex-direction: column;
}
.ax-schublade[hidden] { display: none; }

.ax-verdunkelung {
  position: fixed;
  inset: 0;
  background: var(--ax-colors-bg-overlay);
  z-index: 65;
}
.ax-verdunkelung[hidden] { display: none; }

/* ------------------------------------------------------------------ Dialog */

.ax-dialog {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}
.ax-dialog:not([hidden]) { display: flex; }

.ax-dialog-fenster {
  width: 100%;
  /* `maxSize.lg` = 32rem. Axioms maxSize-Tokens sind genau dafuer gedacht --
     Dialoge und Karten -- und gehen bewusst nicht weiter. */
  max-width: var(--ax-maxSize-lg);
  background: var(--ax-colors-bg-default);
  border-radius: var(--ax-borderRadius-lg);
  box-shadow: var(--ax-boxShadow-xl);
}
.ax-dialog-breit .ax-dialog-fenster { max-width: 46rem; }


/* Ein Eintrag in der Benachrichtigungs-Schublade. */
.ax-nachricht {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: var(--ax-borderRadius-md);
  border-inline-start: 3px solid var(--ax-colors-border-default);
  color: inherit;
  text-decoration: none;
}
a.ax-nachricht:hover { background: var(--ax-colors-bg-default-hovered); text-decoration: none; }
.ax-nachricht-neu { background: var(--ax-colors-bg-secondary); }

/* ------------------------------------------------------------------ Toasts */

.ax-toasts {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--ax-zIndex-toast);
}

.ax-toast {
  background: var(--ax-colors-bg-default-inverse);
  color: var(--ax-colors-fg-white);
  padding: 12px 16px;
  border-radius: var(--ax-borderRadius-md);
  box-shadow: var(--ax-boxShadow-lg);
  font-size: var(--ax-fontSize-md);
  max-width: 380px;
}
.ax-toast-fehler { background: var(--ax-colors-bg-error); }

/* ------------------------------------------------------------------ Raster */

.ax-raster { display: grid; gap: 16px; }
.ax-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 56.25rem) {
  .ax-raster-3, .ax-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.5rem) {
  .ax-raster-2, .ax-raster-3, .ax-raster-4 { grid-template-columns: minmax(0, 1fr); }
}

.ax-reihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-stapel { display: flex; flex-direction: column; gap: 8px; }

/* Nur die Handvoll Hilfsklassen, die die Schale selbst braucht. Axiom hat
   eine grosse Utility-Schicht; sie hier nachzubauen hiesse, eine zweite
   Sprache zu erfinden. Die Seiten sagen, was sie meinen. */
/* Nur unter dem md-Haltepunkt -- z. B. der Menueknopf im Kopf, denn darueber
   steht die Leiste ohnehin da.

   **Diese Regeln stehen bewusst am Ende der Datei.** Sie haben dieselbe
   Spezifitaet wie `.ax-knopf`, und die entscheidet dann die Reihenfolge. Beim
   ersten Anlauf standen sie weiter oben: der Knopf war auf einem 1280 Pixel
   breiten Fenster sichtbar, weil `.ax-knopf { display: inline-flex }` spaeter
   kam und gewann. Kein Test hat das gesehen -- der Browser schon. */
.ax-nur-schmal { display: none; }
@media (max-width: 56.25rem) {
  .ax-nur-schmal { display: inline-flex; }
}

.ax-gedaempft { color: var(--ax-colors-fg-secondary); }
.ax-stark { font-weight: 600; }
.ax-durchgestrichen { text-decoration: line-through; }

/* Der Punkt an einem ungelesenen Gespraech. */
.ax-punkt-neu {
  width: 8px;
  height: 8px;
  border-radius: var(--ax-borderRadius-full);
  background: var(--ax-colors-bg-accent);
  flex: none;
}
.ax-klein { font-size: var(--ax-fontSize-sm); line-height: var(--ax-fontSize-sm-lineheight); }
.ax-nur-fuer-lesegeraete {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Die Uebersicht: der Blockplan breiter als die Randspalte. Zwei Zahlen, kein
   Zwoelftel-Raster -- Axiom hat keines, und `2fr/1fr` sagt dasselbe. */
.ax-uebersicht {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 56.25rem) {
  .ax-uebersicht { grid-template-columns: minmax(0, 1fr); }
}

/* Ein Punkt mit farbigem Balken davor. */
.ax-punkt { border-inline-start: 3px solid var(--ax-colors-border-default); padding-inline-start: 12px; }
.ax-punkt-warnung { border-color: var(--ax-colors-border-warning); }
.ax-punkt-erfolg { border-color: var(--ax-colors-border-success); }
.ax-punkt-info { border-color: var(--ax-colors-border-accent); }

/* Die Kontoseite: zwei Spalten, unter dem md-Haltepunkt untereinander.
   `5fr/7fr` wie zuvor -- links die kurzen Karten, rechts die Tabellen. */
.ax-konto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 56.25rem) {
  .ax-konto { grid-template-columns: minmax(0, 1fr); }
}

/* Eine Beschreibungsliste als Wertepaare. */
.ax-daten { display: grid; gap: 4px 16px; margin: 0; }
.ax-daten dt {
  font-size: var(--ax-fontSize-sm);
  color: var(--ax-colors-fg-secondary);
  font-weight: 600;
}
.ax-daten dd { margin: 0 0 12px; }
.ax-daten dd:last-child { margin-bottom: 0; }

/* Eine Kennzahl-Kachel. */
.ax-kachel { padding: 20px; }
.ax-kachel-wert {
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-3xl);
  line-height: var(--ax-fontSize-3xl-lineheight);
  font-weight: 600;
}
.ax-kachel-titel { font-weight: 600; }

.ax-text-erfolg { color: var(--ax-colors-fg-success-strong); }
.ax-text-warnung { color: var(--ax-colors-fg-warning-strong); }
.ax-text-fehler { color: var(--ax-colors-fg-error-strong); }

/* Eine Zeile mit Beschriftung links und Wert rechts, durch eine Linie
   getrennt -- Adressen, Fristen, Berechtigungen. */
.ax-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
}
.ax-zeile:last-child { border-bottom: 0; }

.ax-liste { margin: 0 0 16px; padding-inline-start: 20px; }
.ax-liste li { margin-bottom: 8px; }
.ax-liste li:last-child { margin-bottom: 0; }

/* Ein Schritt im Ablaufbild der Kampagnen. */
.ax-schritt { display: inline-flex; align-items: center; gap: 8px; }

/* Eine waehlbare Account-Zeile beim Anbinden. */
.ax-kontozeile {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  margin-bottom: 8px;
}
.ax-kontozeile:hover { background: var(--ax-colors-bg-default-hovered); }

/* Das Regiepult: drei Felder und ein Knopf, der am unteren Rand mitlaeuft. */
.ax-regie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: end;
}
@media (max-width: 56.25rem) {
  .ax-regie { grid-template-columns: minmax(0, 1fr); }
}
.ax-regie .ax-feld { margin-bottom: 0; }

/* Der Posteingang: Gespraechsliste links, Verlauf rechts. */
.ax-postfach {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 56.25rem) {
  .ax-postfach { grid-template-columns: minmax(0, 1fr); }
}

.ax-verlauf {
  max-height: 26rem;
  overflow-y: auto;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------- Anleitung
   Eine Folge nummerierter Schritte. Bewusst schmal: eine Anleitung liest man
   Zeile fuer Zeile, und eine Textspalte ueber die volle Bildschirmbreite
   verliert man beim Zeilenwechsel. */

.ax-anleitung {
  display: grid;
  gap: 16px;
  max-width: 52rem;
}

.ax-schritt-karte { padding: 20px; }

.ax-schritt-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ax-schritt-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--ax-borderRadius-full);
  background: var(--ax-colors-bg-accent);
  /* Dunkle Schrift auf dem Limettengruen -- Weiss waere unlesbar. */
  color: var(--ax-colors-fg-black);
  font-family: var(--ax-fontFamily-heading);
  font-weight: 700;
  font-size: var(--ax-fontSize-sm);
}

.ax-schritt-rumpf { display: grid; gap: 12px; }
.ax-schritt-rumpf p { line-height: 1.6; }

/* Eine Adresse zum Abschreiben. Sie muss buchstabengenau stimmen -- in einem
   Fliesstext uebersieht man den fehlenden Schraegstrich. */
.ax-adresse {
  background: var(--ax-colors-bg-secondary);
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  padding: 10px 12px;
  overflow-x: auto;
}
.ax-adresse code { font-size: var(--ax-fontSize-md); white-space: nowrap; }

.ax-problem {
  padding: 12px 0;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  display: grid;
  gap: 4px;
}
.ax-problem:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ Leerzustand
   Fuer Seiten, die statt Inhalt eine Auskunft geben: kein Zugriff, nichts
   gefunden, noch nichts angelegt. */

.ax-leerzustand {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 24px;
}
.ax-leerzustand p { max-width: 40ch; }
.ax-leerzustand-symbol { color: var(--ax-colors-fg-warning-strong); }
.ax-leerzustand-symbol .ax-symbol { width: var(--ax-size-lg); height: var(--ax-size-lg); }

/* ------------------------------------------------------------ Anmeldeseite */

.ax-anmeldeseite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 16px;
  background: var(--ax-colors-bg-page);
}

/* `maxSize.lg` = 32rem. Axioms maxSize-Tokens gehen nur bis dahin und sind
   genau fuer so etwas gedacht -- Dialoge und Karten. */
.ax-anmeldekarte { width: 100%; max-width: var(--ax-maxSize-lg); }
.ax-anmeldekopf { text-align: center; margin-bottom: 24px; display: grid; gap: 4px; }


/* ===================================================== Workflow-Designer
 *
 * Eine Zeichenflaeche mit Karten und Bezier-Kanten -- Vorbild ist der
 * Designer in rcs-hikel-app. Sie scrollt: ein Workflow, der am Fensterrand
 * abgeschnitten wird, ist zur Haelfte unerreichbar.
 *
 * Alle Farben aus den Tokens; ein ausgeschriebener Wert naehme dem Design den
 * dunklen Modus (siehe axiom.test.ts).
 */
.wf-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Der feste Teil der Kampagne -- waagerecht, ausserhalb der Flaeche. */
.wf-kern {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background: var(--ax-colors-bg-default-hovered);
}

.wf-kern-karte {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--ax-borderRadius-md);
  background: var(--ax-colors-bg-default);
  font-size: 0.8125rem;
  color: var(--ax-colors-fg-secondary);
}

.wf-kern-pfeil { color: var(--ax-colors-fg-tertiary); }

.wf-flaeche {
  position: relative;
  overflow: auto;
  min-height: 420px;
  padding: 8px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background: var(--ax-colors-bg-default);
  background-image: radial-gradient(var(--ax-colors-border-secondary) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wf-kanten {
  position: absolute;
  inset: 8px auto auto 8px;
  pointer-events: none;
  overflow: visible;
}

.wf-kante {
  fill: none;
  stroke: var(--ax-colors-border-default);
  stroke-width: 2;
}

.wf-kante-griff {
  fill: var(--ax-colors-bg-default);
  stroke: var(--ax-colors-border-default);
  stroke-width: 2;
  cursor: pointer;
  pointer-events: all;
}

.wf-kante-griff:hover { fill: var(--ax-colors-bg-error-subtle); }

.wf-karte {
  position: absolute;
  padding: 10px 12px;
  background: var(--ax-colors-bg-default);
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  box-shadow: var(--ax-boxShadow-sm, 0 1px 2px color-mix(in srgb, currentColor 10%, transparent));
  cursor: grab;
  touch-action: none;
}

.wf-karte-quelle { border-color: var(--ax-colors-bg-accent); border-width: 2px; }
.wf-karte-start { background: var(--ax-colors-bg-success-subtle); }
.wf-karte-ende { background: var(--ax-colors-bg-default-pressed); }

.wf-karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf-abzeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--ax-borderRadius-md);
  background: var(--ax-colors-bg-accent-light);
  color: var(--ax-colors-fg-default);
}

.wf-abzeichen-frage { background: var(--ax-colors-bg-information-subtle); }
.wf-abzeichen-mailing { background: var(--ax-colors-bg-warning-subtle); }
.wf-abzeichen-start { background: var(--ax-colors-bg-success-subtle); }
.wf-abzeichen-ende { background: var(--ax-colors-bg-default-pressed); }

.wf-symbol { width: 18px; height: 18px; fill: currentColor; }

.wf-titel { font-weight: 600; color: var(--ax-colors-fg-default); font-size: 0.875rem; }

.wf-text {
  margin-top: 6px;
  color: var(--ax-colors-fg-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wf-zeit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--ax-colors-fg-tertiary);
  font-size: 0.75rem;
}

.wf-zeit .wf-symbol { width: 13px; height: 13px; }

/* Der Ausgang rechts an der Karte. */
.wf-port {
  position: absolute;
  right: -9px;
  top: 22px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--ax-colors-border-default);
  border-radius: 999px;
  background: var(--ax-colors-bg-default);
  cursor: crosshair;
}

.wf-port:hover { background: var(--ax-colors-bg-accent); }

.wf-karte-aktionen {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}

.wf-karte:hover .wf-karte-aktionen,
.wf-karte:focus-within .wf-karte-aktionen {
  opacity: 1;
}

.wf-mini {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-sm);
  background: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-secondary);
  cursor: pointer;
}

.wf-mini:hover { background: var(--ax-colors-bg-default-hovered); }

.wf-zeitzeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 12px;
}