/* ==========================================================================
   ft-ui — Komponenten-Bausteine fuer das Web (Welle 5026)
   Gegenstueck zum Android-Modul :ftui (ftui_colors.xml in values und values-night): gleiche Marken-Farben, gleiche Idee.
   Nur NEUE, praefixierte Klassen (.ftui-*) und Variablen (--ftui-*) — bestehende Seiten aendern sich nicht.
   Symbole: assets/css/ft-icons.css + ft_icon('name') (includes/ft_icon.php).

   HELL / DUNKEL — eine Quelle der Wahrheit:
   - Massgeblich ist die Klasse der Seite: html.ft-dark-pre / body.dark-mode (setzt includes/header.php; dort ist
     „wie das System" schon eingerechnet: ohne gespeicherte Wahl entscheidet prefers-color-scheme im Kopf-Skript).
     Deshalb hier KEIN globales @media (prefers-color-scheme) auf :root — das wuerde bei „App hell, System dunkel"
     gegen die Klasse laufen (bekannte Falle der Seite).
   - [data-theme="dark|light"] wird ebenfalls beachtet.
   - Bereiche ohne Kopf-Logik (eigenstaendige Seiten): Klasse .ftui-auto folgt prefers-color-scheme.
   - .ftui-light / .ftui-dark erzwingen einen Modus fuer einen Bereich (z. B. Vorschau).
   - Bausteine setzen immer eine eigene Flaeche (nie durchsichtig auf die Browser-Leinwand), Schriftfarben >= 4.5:1.
   ========================================================================== */

/* ---------- Tokens: Masse (unabhaengig vom Modus) ---------- */
:root {
  --ftui-space-1: 4px;
  --ftui-space-2: 8px;
  --ftui-space-3: 12px;
  --ftui-space-4: 16px;
  --ftui-space-5: 24px;
  --ftui-space-6: 32px;
  --ftui-radius-sm: 8px;
  --ftui-radius: 12px;
  --ftui-radius-lg: 18px;
  --ftui-radius-pill: 999px;
  --ftui-fs-xs: .75rem;
  --ftui-fs-sm: .8125rem;
  --ftui-fs: .9375rem;
  --ftui-fs-lg: 1.0625rem;
  --ftui-fs-xl: 1.25rem;
  --ftui-touch: 44px;
  --ftui-ease: cubic-bezier(.2, .8, .2, 1);
  --ftui-dur: .16s;
  /* kraeftige Flaechen mit weisser Schrift — in beiden Modi gleich (>= 4.8:1) */
  --ftui-accent-solid: #007a99;
  --ftui-ok-solid: #0b7a5a;
  --ftui-warn-solid: #a35200;
  --ftui-bad-solid: #c42032;
  --ftui-neutral-solid: #4b5563;
}

/* ---------- Tokens: Hell (Standard) ---------- */
:root,
.ftui-light,
[data-theme="light"] {
  --ftui-scheme: light;
  --ftui-accent: #007a99;
  --ftui-accent-2: #1fc8d8;
  --ftui-on-accent: #ffffff;
  --ftui-accent-text: #007a99;
  --ftui-accent-soft: #e3f4f8;
  --ftui-bg: #f4f6f8;
  --ftui-surface: #ffffff;
  --ftui-surface-2: #f1f3f6;
  --ftui-text: #1d2233;
  --ftui-text-2: #3b4252;
  --ftui-text-muted: #5a6168;
  --ftui-line: rgba(16, 42, 67, .12);
  --ftui-line-strong: rgba(16, 42, 67, .24);
  --ftui-hover: rgba(16, 42, 67, .06);
  --ftui-press: rgba(16, 42, 67, .11);
  --ftui-ok-text: #0b6b50;
  --ftui-ok-soft: #e6f6ef;
  --ftui-warn-text: #8a4500;
  --ftui-warn-soft: #fff3e0;
  --ftui-bad-text: #b42318;
  --ftui-bad-soft: #fdecea;
  --ftui-info-text: #00607a;
  --ftui-info-soft: #e3f4f8;
  --ftui-neutral-soft: #eef0f3;
  --ftui-shadow-1: 0 1px 2px rgba(16, 42, 67, .06), 0 2px 6px rgba(16, 42, 67, .05);
  --ftui-shadow-2: 0 2px 6px rgba(16, 42, 67, .08), 0 10px 24px rgba(16, 42, 67, .10);
  --ftui-focus: 0 0 0 3px rgba(0, 122, 153, .38);
}

/* ---------- Tokens: Dunkel (Klasse der Seite / data-theme / erzwungen) ---------- */
html.ft-dark-pre,
body.dark-mode,
body.dark-theme,
[data-theme="dark"],
.ftui-dark {
  --ftui-scheme: dark;
  --ftui-accent: #007a99;
  --ftui-accent-2: #1fc8d8;
  --ftui-on-accent: #ffffff;
  --ftui-accent-text: #5fd0ea;
  --ftui-accent-soft: #233f42;
  --ftui-bg: #18191a;
  --ftui-surface: #242526;
  --ftui-surface-2: #2f3031;
  --ftui-text: #e4e6eb;
  --ftui-text-2: #c9ccd1;
  --ftui-text-muted: #b0b3b8;
  --ftui-line: rgba(255, 255, 255, .12);
  --ftui-line-strong: rgba(255, 255, 255, .24);
  --ftui-hover: rgba(255, 255, 255, .07);
  --ftui-press: rgba(255, 255, 255, .12);
  --ftui-ok-text: #6ee7b7;
  --ftui-ok-soft: #213d35;
  --ftui-warn-text: #fbbf62;
  --ftui-warn-soft: #453822;
  --ftui-bad-text: #ff9b94;
  --ftui-bad-soft: #442a2b;
  --ftui-info-text: #5fd0ea;
  --ftui-info-soft: #233f42;
  --ftui-neutral-soft: #363738;
  --ftui-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --ftui-shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --ftui-focus: 0 0 0 3px rgba(95, 208, 234, .45);
}
/* Bereiche ohne Kopf-Logik: dem System folgen (nur mit .ftui-auto, nie global) */
@media (prefers-color-scheme: dark) {
  .ftui-auto:not(.ftui-light):not([data-theme="light"]) {
    --ftui-scheme: dark;
    --ftui-accent-text: #5fd0ea;
    --ftui-accent-soft: #233f42;
    --ftui-bg: #18191a;
    --ftui-surface: #242526;
    --ftui-surface-2: #2f3031;
    --ftui-text: #e4e6eb;
    --ftui-text-2: #c9ccd1;
    --ftui-text-muted: #b0b3b8;
    --ftui-line: rgba(255, 255, 255, .12);
    --ftui-line-strong: rgba(255, 255, 255, .24);
    --ftui-hover: rgba(255, 255, 255, .07);
    --ftui-press: rgba(255, 255, 255, .12);
    --ftui-ok-text: #6ee7b7;
    --ftui-ok-soft: #213d35;
    --ftui-warn-text: #fbbf62;
    --ftui-warn-soft: #453822;
    --ftui-bad-text: #ff9b94;
    --ftui-bad-soft: #442a2b;
    --ftui-info-text: #5fd0ea;
    --ftui-info-soft: #233f42;
    --ftui-neutral-soft: #363738;
    --ftui-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --ftui-shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
    --ftui-focus: 0 0 0 3px rgba(95, 208, 234, .45);
  }
}
/* Bereichs-Klassen bekommen ihre Flaeche + Schrift gleich mit (Vorschau, eingebettete Bereiche) */
.ftui-light,
.ftui-dark,
.ftui-auto {
  background-color: var(--ftui-bg);
  color: var(--ftui-text);
  color-scheme: var(--ftui-scheme);
}

/* ---------- Hilfsklasse ---------- */
.ftui-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Knoepfe  .ftui-btn  (+ --primary --tonal --outline --ghost --danger | --sm --lg --block --icon)
   ========================================================================== */
.ftui-btn {
  --_bg: var(--ftui-surface-2);
  --_fg: var(--ftui-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--ftui-touch);
  padding: 0 1.1em;
  border: 1px solid var(--_bd);
  border-radius: var(--ftui-radius-pill);
  background-color: var(--_bg);
  color: var(--_fg);
  color-scheme: var(--ftui-scheme);
  font: inherit;
  font-size: var(--ftui-fs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ftui-dur) var(--ftui-ease), border-color var(--ftui-dur) var(--ftui-ease),
              box-shadow var(--ftui-dur) var(--ftui-ease), transform .1s var(--ftui-ease);
}
.ftui-btn:hover { color: var(--_fg); text-decoration: none; background-image: linear-gradient(var(--ftui-hover), var(--ftui-hover)); }
.ftui-btn:active { background-image: linear-gradient(var(--ftui-press), var(--ftui-press)); transform: scale(.98); }
.ftui-btn:focus-visible { outline: none; box-shadow: var(--ftui-focus); }
.ftui-btn:disabled,
.ftui-btn[aria-disabled="true"],
.ftui-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
.ftui-btn .fti { --fticon-size: 1.15em; }
.ftui-btn--primary { --_bg: var(--ftui-accent-solid); --_fg: #ffffff; }
.ftui-btn--primary:hover,
.ftui-btn--danger:hover { background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)); }
.ftui-btn--tonal   { --_bg: var(--ftui-accent-soft); --_fg: var(--ftui-accent-text); }
.ftui-btn--outline { --_bg: var(--ftui-surface); --_fg: var(--ftui-text); --_bd: var(--ftui-line-strong); }
.ftui-btn--ghost   { --_bg: transparent; --_fg: var(--ftui-accent-text); }
.ftui-btn--danger  { --_bg: var(--ftui-bad-solid); --_fg: #ffffff; }
.ftui-btn--sm { min-height: 36px; padding: 0 .85em; font-size: var(--ftui-fs-sm); }
.ftui-btn--lg { min-height: 52px; padding: 0 1.4em; font-size: var(--ftui-fs-lg); }
.ftui-btn--block { display: flex; width: 100%; }
.ftui-btn--icon { width: var(--ftui-touch); padding: 0; }
.ftui-btn--icon.ftui-btn--sm { width: 36px; }
.ftui-btn--icon.ftui-btn--lg { width: 52px; }

/* ==========================================================================
   Chips  .ftui-chips > .ftui-chip  (+ is-selected / aria-pressed / aria-selected, --ok --warn --bad --info)
   ========================================================================== */
.ftui-chips { display: flex; flex-wrap: wrap; gap: var(--ftui-space-2); }
.ftui-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.ftui-chips--scroll::-webkit-scrollbar { display: none; }
.ftui-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 36px;
  padding: 0 .9em;
  border: 1px solid var(--ftui-line-strong);
  border-radius: var(--ftui-radius-pill);
  background-color: var(--ftui-surface);
  color: var(--ftui-text-2);
  color-scheme: var(--ftui-scheme);
  font: inherit;
  font-size: var(--ftui-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ftui-dur) var(--ftui-ease), border-color var(--ftui-dur) var(--ftui-ease), color var(--ftui-dur) var(--ftui-ease);
}
a.ftui-chip, button.ftui-chip, label.ftui-chip { cursor: pointer; }
a.ftui-chip:hover, button.ftui-chip:hover, label.ftui-chip:hover { color: var(--ftui-text); text-decoration: none; background-image: linear-gradient(var(--ftui-hover), var(--ftui-hover)); }
.ftui-chip:focus-visible, input:focus-visible + .ftui-chip { outline: none; box-shadow: var(--ftui-focus); }
.ftui-chip .fti { --fticon-size: 1.1em; }
.ftui-chip.is-selected,
.ftui-chip[aria-pressed="true"],
.ftui-chip[aria-selected="true"],
input:checked + .ftui-chip {
  background-color: var(--ftui-accent-soft);
  border-color: var(--ftui-accent-text);
  color: var(--ftui-accent-text);
}
.ftui-chip--ok   { background-color: var(--ftui-ok-soft);   color: var(--ftui-ok-text);   border-color: transparent; }
.ftui-chip--warn { background-color: var(--ftui-warn-soft); color: var(--ftui-warn-text); border-color: transparent; }
.ftui-chip--bad  { background-color: var(--ftui-bad-soft);  color: var(--ftui-bad-text);  border-color: transparent; }
.ftui-chip--info { background-color: var(--ftui-info-soft); color: var(--ftui-info-text); border-color: transparent; }
.ftui-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-inline-end: -.4em; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.ftui-chip__x:hover { background-color: var(--ftui-hover); }
.ftui-chip__x:focus-visible { outline: none; box-shadow: var(--ftui-focus); }

/* ==========================================================================
   Abzeichen  .ftui-badge  (+ --accent --ok --warn --bad --info | --solid | --count | --dot)
   ========================================================================== */
.ftui-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 1.5em;
  padding: .1em .6em;
  border-radius: var(--ftui-radius-pill);
  background-color: var(--ftui-neutral-soft);
  color: var(--ftui-text-2);
  font-size: var(--ftui-fs-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}
.ftui-badge .fti { --fticon-size: 1.1em; }
.ftui-badge--accent { background-color: var(--ftui-accent-soft); color: var(--ftui-accent-text); }
.ftui-badge--ok     { background-color: var(--ftui-ok-soft);     color: var(--ftui-ok-text); }
.ftui-badge--warn   { background-color: var(--ftui-warn-soft);   color: var(--ftui-warn-text); }
.ftui-badge--bad    { background-color: var(--ftui-bad-soft);    color: var(--ftui-bad-text); }
.ftui-badge--info   { background-color: var(--ftui-info-soft);   color: var(--ftui-info-text); }
.ftui-badge--solid                     { background-color: var(--ftui-neutral-solid); color: #ffffff; }
.ftui-badge--solid.ftui-badge--accent,
.ftui-badge--solid.ftui-badge--info    { background-color: var(--ftui-accent-solid); color: #ffffff; }
.ftui-badge--solid.ftui-badge--ok      { background-color: var(--ftui-ok-solid);     color: #ffffff; }
.ftui-badge--solid.ftui-badge--warn    { background-color: var(--ftui-warn-solid);   color: #ffffff; }
.ftui-badge--solid.ftui-badge--bad     { background-color: var(--ftui-bad-solid);    color: #ffffff; }
.ftui-badge--count {
  min-width: 1.6em; justify-content: center; padding: 0 .4em;
  background-color: var(--ftui-bad-solid); color: #ffffff; font-variant-numeric: tabular-nums;
}
.ftui-badge--dot { width: .55rem; height: .55rem; min-height: 0; padding: 0; background-color: var(--ftui-bad-solid); }

/* ==========================================================================
   Tab-Leiste  .ftui-tabs > .ftui-tab  (aktiv: .is-active / aria-selected / aria-current; Variante --pill)
   ========================================================================== */
.ftui-tabs {
  display: flex;
  gap: var(--ftui-space-1);
  padding: 0 var(--ftui-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background-color: var(--ftui-surface);
  border-bottom: 1px solid var(--ftui-line);
  color-scheme: var(--ftui-scheme);
}
.ftui-tabs::-webkit-scrollbar { display: none; }
.ftui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 var(--ftui-space-3);
  border: 0;
  border-radius: var(--ftui-radius-sm) var(--ftui-radius-sm) 0 0;
  background: transparent;
  color: var(--ftui-text-muted);
  font: inherit;
  font-size: var(--ftui-fs);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ftui-dur) var(--ftui-ease), background-color var(--ftui-dur) var(--ftui-ease);
}
.ftui-tab:hover { color: var(--ftui-text); text-decoration: none; background-color: var(--ftui-hover); }
.ftui-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ftui-accent-text); }
.ftui-tab .fti { --fticon-size: 1.15em; }
.ftui-tab.is-active,
.ftui-tab[aria-selected="true"],
.ftui-tab[aria-current="page"] { color: var(--ftui-accent-text); }
.ftui-tab.is-active::after,
.ftui-tab[aria-selected="true"]::after,
.ftui-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--ftui-space-3);
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--ftui-accent-text);
}
/* Variante: Segment-Schalter */
.ftui-tabs--pill {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  gap: 2px;
  border: 0;
  border-radius: var(--ftui-radius-pill);
  background-color: var(--ftui-surface-2);
}
.ftui-tabs--pill .ftui-tab { min-height: 36px; padding: 0 var(--ftui-space-4); border-radius: var(--ftui-radius-pill); font-size: var(--ftui-fs-sm); }
.ftui-tabs--pill .ftui-tab:focus-visible { box-shadow: var(--ftui-focus); }
.ftui-tabs--pill .ftui-tab.is-active,
.ftui-tabs--pill .ftui-tab[aria-selected="true"],
.ftui-tabs--pill .ftui-tab[aria-current="page"] { background-color: var(--ftui-surface); color: var(--ftui-text); box-shadow: var(--ftui-shadow-1); }
.ftui-tabs--pill .ftui-tab::after { content: none; }

/* ==========================================================================
   Symbol-Feld  .ftui-ic  (fuer Listen, Karten, Leerzustaende; + --ok --warn --bad --info --neutral | --round --lg --xl)
   ========================================================================== */
.ftui-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--ftui-radius);
  background-color: var(--ftui-accent-soft);
  color: var(--ftui-accent-text);
}
.ftui-ic .fti { --fticon-size: 22px; }
.ftui-ic--ok      { background-color: var(--ftui-ok-soft);      color: var(--ftui-ok-text); }
.ftui-ic--warn    { background-color: var(--ftui-warn-soft);    color: var(--ftui-warn-text); }
.ftui-ic--bad     { background-color: var(--ftui-bad-soft);     color: var(--ftui-bad-text); }
.ftui-ic--info    { background-color: var(--ftui-info-soft);    color: var(--ftui-info-text); }
.ftui-ic--neutral { background-color: var(--ftui-neutral-soft); color: var(--ftui-text-2); }
.ftui-ic--round { border-radius: 50%; }
.ftui-ic--lg { width: 52px; height: 52px; }
.ftui-ic--lg .fti { --fticon-size: 28px; }
.ftui-ic--xl { width: 72px; height: 72px; border-radius: 22px; }
.ftui-ic--xl.ftui-ic--round { border-radius: 50%; }
.ftui-ic--xl .fti { --fticon-size: 36px; }

/* ==========================================================================
   Karte  .ftui-card  (__head __title __sub __body __foot | --flat --flush --link --accent)
   ========================================================================== */
.ftui-card {
  display: block;
  padding: var(--ftui-space-4);
  border: 1px solid var(--ftui-line);
  border-radius: var(--ftui-radius-lg);
  background-color: var(--ftui-surface);
  color: var(--ftui-text);
  color-scheme: var(--ftui-scheme);
  box-shadow: var(--ftui-shadow-1);
}
.ftui-card__head { display: flex; align-items: center; gap: var(--ftui-space-3); margin-bottom: var(--ftui-space-3); }
.ftui-card__head > :not(.ftui-ic):not(.ftui-badge) { min-width: 0; flex: 1 1 auto; }
.ftui-card__title { margin: 0; font-size: var(--ftui-fs-lg); font-weight: 700; line-height: 1.3; color: var(--ftui-text); }
.ftui-card__sub { margin: 2px 0 0; font-size: var(--ftui-fs-sm); line-height: 1.4; color: var(--ftui-text-muted); }
.ftui-card__body { font-size: var(--ftui-fs); line-height: 1.55; color: var(--ftui-text-2); }
.ftui-card__body > :last-child { margin-bottom: 0; }
.ftui-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ftui-space-2);
  margin-top: var(--ftui-space-4); padding-top: var(--ftui-space-3);
  border-top: 1px solid var(--ftui-line);
}
.ftui-card--flat { box-shadow: none; }
.ftui-card--flush { padding: 0; overflow: hidden; }
.ftui-card--flush > .ftui-list { border: 0; border-radius: 0; }
.ftui-card--accent { border-top: 3px solid var(--ftui-accent-text); }
a.ftui-card, .ftui-card--link {
  color: var(--ftui-text);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--ftui-dur) var(--ftui-ease), transform var(--ftui-dur) var(--ftui-ease), border-color var(--ftui-dur) var(--ftui-ease);
}
a.ftui-card:hover, .ftui-card--link:hover { color: var(--ftui-text); text-decoration: none; box-shadow: var(--ftui-shadow-2); border-color: var(--ftui-line-strong); transform: translateY(-1px); }
a.ftui-card:focus-visible, .ftui-card--link:focus-visible { outline: none; box-shadow: var(--ftui-focus); }

/* ==========================================================================
   Liste mit Symbol  .ftui-list > .ftui-list__item  (__main __title __sub __meta __chev | --plain)
   Eintraege als <li>, <a> oder <button>; <li> darf ein <a class="ftui-list__item"> enthalten.
   ========================================================================== */
.ftui-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ftui-line);
  border-radius: var(--ftui-radius-lg);
  background-color: var(--ftui-surface);
  color: var(--ftui-text);
  color-scheme: var(--ftui-scheme);
  overflow: hidden;
}
.ftui-list--plain { border: 0; border-radius: 0; }
.ftui-list > li { margin: 0; padding: 0; }
.ftui-list > * + * { border-top: 1px solid var(--ftui-line); }
.ftui-list__item {
  display: flex;
  align-items: center;
  gap: var(--ftui-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--ftui-space-2) var(--ftui-space-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
}
a.ftui-list__item, button.ftui-list__item, label.ftui-list__item { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.ftui-list__item:hover, button.ftui-list__item:hover, label.ftui-list__item:hover { color: inherit; text-decoration: none; background-color: var(--ftui-hover); }
a.ftui-list__item:active, button.ftui-list__item:active { background-color: var(--ftui-press); }
a.ftui-list__item:focus-visible, button.ftui-list__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ftui-accent-text); }
.ftui-list__main { flex: 1 1 auto; min-width: 0; }
.ftui-list__title {
  display: block;
  overflow: hidden;
  font-size: var(--ftui-fs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ftui-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ftui-list__sub { display: block; margin-top: 2px; font-size: var(--ftui-fs-sm); line-height: 1.4; color: var(--ftui-text-muted); }
.ftui-list__meta { flex: 0 0 auto; font-size: var(--ftui-fs-xs); color: var(--ftui-text-muted); text-align: end; }
.ftui-list__chev { flex: 0 0 auto; display: inline-flex; color: var(--ftui-text-muted); }

/* ==========================================================================
   Leerer Zustand  .ftui-empty  (__title __text __actions | --card)
   ========================================================================== */
.ftui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ftui-space-2);
  padding: var(--ftui-space-6) var(--ftui-space-4);
  text-align: center;
  color: var(--ftui-text-2);
}
.ftui-empty__title { margin: var(--ftui-space-2) 0 0; font-size: var(--ftui-fs-lg); font-weight: 700; line-height: 1.3; color: var(--ftui-text); }
.ftui-empty__text { margin: 0; max-width: 38ch; font-size: var(--ftui-fs); line-height: 1.5; color: var(--ftui-text-muted); }
.ftui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ftui-space-2); margin-top: var(--ftui-space-3); }
.ftui-empty--card {
  border: 1px dashed var(--ftui-line-strong);
  border-radius: var(--ftui-radius-lg);
  background-color: var(--ftui-surface);
  color-scheme: var(--ftui-scheme);
}

/* ==========================================================================
   Hinweis  .ftui-note  (--info --ok --warn --bad | __body __title __x)
   Rolle im HTML waehlen: role="status" (Info/Erfolg) bzw. role="alert" (dringend).
   ========================================================================== */
.ftui-note {
  --_tone: var(--ftui-info-text);
  --_soft: var(--ftui-info-soft);
  display: flex;
  align-items: flex-start;
  gap: var(--ftui-space-3);
  padding: var(--ftui-space-3) var(--ftui-space-4);
  border: 1px solid transparent;
  border-inline-start: 4px solid var(--_tone);
  border-radius: var(--ftui-radius);
  background-color: var(--_soft);
  color: var(--ftui-text);
  color-scheme: var(--ftui-scheme);
  font-size: var(--ftui-fs);
  line-height: 1.5;
}
.ftui-note > .fti { flex: 0 0 auto; margin-top: .15em; color: var(--_tone); }
.ftui-note__body { flex: 1 1 auto; min-width: 0; }
.ftui-note__body > :last-child { margin-bottom: 0; }
.ftui-note__title { display: block; margin-bottom: 2px; font-weight: 700; color: var(--_tone); }
.ftui-note a { color: var(--_tone); text-decoration: underline; }
.ftui-note--ok   { --_tone: var(--ftui-ok-text);   --_soft: var(--ftui-ok-soft); }
.ftui-note--warn { --_tone: var(--ftui-warn-text); --_soft: var(--ftui-warn-soft); }
.ftui-note--bad  { --_tone: var(--ftui-bad-text);  --_soft: var(--ftui-bad-soft); }
.ftui-note--info { --_tone: var(--ftui-info-text); --_soft: var(--ftui-info-soft); }
.ftui-note__x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: -4px -8px -4px 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ftui-text-muted); cursor: pointer;
}
.ftui-note__x:hover { background-color: var(--ftui-hover); color: var(--ftui-text); }
.ftui-note__x:focus-visible { outline: none; box-shadow: var(--ftui-focus); }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .ftui-btn, .ftui-chip, .ftui-tab, a.ftui-card, .ftui-card--link { transition: none; }
  .ftui-btn:active, a.ftui-card:hover, .ftui-card--link:hover { transform: none; }
}
/* ---------- Windows-Kontrastmodus: Raender sichtbar halten ---------- */
@media (forced-colors: active) {
  .ftui-btn, .ftui-chip, .ftui-badge, .ftui-card, .ftui-list, .ftui-note, .ftui-tabs--pill { border: 1px solid CanvasText; }
  .ftui-tab.is-active, .ftui-tab[aria-selected="true"], .ftui-tab[aria-current="page"] { text-decoration: underline; }
}