/* ==========================================================================
   GCloudy – Komponenten
   Reihenfolge: Aktionen · Formular · Feedback · Navigation · Daten · Muster · Animationen · Touch
   Aktionen    Fokusring, Buttons, Chips, Badge, Link, Kopieren, Split-Button, Icon-Button, Zähler, Avatar, Tooltip
   Formular    Feld, Gruppen & Raster, Zeichenzähler, Einheit, Dropdown, Vorschläge, Checkbox/Radio/Switch,
               Auswahl-Karten, Zahlenfeld, Schieberegler, Code-Eingabe, Datum, Upload
   Feedback    Hinweise, Modal, Toast, Banner, Laden, Leerer Zustand, Popover, Seitenpanel
   Navigation  Tabs & Umschalter, Menü, Kontextmenü, Brotkrumen, Seitenzahlen, Schritte, Tastenkürzel & Befehlspalette
   Daten       Suche & Filter, Liste ↔ Kacheln, Kennzahlen, Diagramme, Tabelle, Details, Verlauf, App-Logo,
               Aufklappbarer Bereich, Akkordeon, Karte
   Muster      App-Layout, Einstellungen, Gefahrenbereich, Sidebar-Breite, Fehlerseiten, Anmeldung & Einrichtung,
               App Store, Benutzerverwaltung, Webseite
   Alle Werte kommen aus css/tokens.css (var(--…)) – hier stehen keine Hex-Werte.
   ========================================================================== */

/* --- Fokusring (gemeinsam) ---------------------------------------------- */
/* 3-px-Ring direkt am Element (folgt der Rundung). Tastatur-Fokus 70 % deckend – kräftiger als der weiche Ring um Felder */
:is(.btn, .chip, .link, .card, .table-wrap, .tab, .breadcrumbs a, .th-sort, .accordion summary, .chart__plot svg, .chart__table summary, .site-header a, .site-footer a):focus-visible,
:is(.check, .choice-card) input:focus-visible,
:is(.icon-btn, .chip__remove, .segmented__btn, .page-btn, .calendar__day):focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
/* Nach Tippen oder Klicken kein Rahmen (Handys zeigen ihn sonst z. B. am X, wenn sich ein Fenster öffnet); components.js setzt
   data-input="pointer" bzw. "keyboard" am <html>. Felder behalten ihren Rahmen, dort schreibt man. */
:root[data-input="pointer"] :focus-visible:not(input, textarea, select, [contenteditable]) { outline: none; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-text); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
/* Klick = nur Farbe, keine Bewegung: gedrückt wird die Fläche einen Schritt dunkler. Offen (aria-expanded) wie gedrückt */
.btn--primary, .btn--secondary, .btn--danger { min-height: var(--input-height); padding: var(--btn-pad-y) var(--btn-pad-x); box-shadow: var(--elevation-control); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); }
.btn--primary { background-color: var(--button-bg); color: var(--button-fg); }
.btn--primary:hover:not(:disabled) { background-color: var(--button-bg-hover); }
.btn--primary:active:not(:disabled) { background-color: var(--button-bg-active); }
/* Secondary = Outline: weiße Fläche mit heller Linie (dunkel: Weiß 4,5 % mit Weiß 15 %) */
.btn--secondary { background-color: var(--outline-bg); border-color: var(--outline-border); color: var(--text-primary); }
.btn--secondary:hover:not(:disabled), .btn--secondary[aria-expanded="true"] { background-color: var(--outline-hover); }   /* offen: wie Hover, ruhiger als gedrückt */
.btn--secondary:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), var(--outline-hover)); }
.btn--danger { background-color: var(--danger-bg); color: var(--danger-fg); }
.btn--danger:hover:not(:disabled) { background-color: var(--danger-bg-hover); }
.btn--danger:active:not(:disabled) { background-color: var(--danger-bg-active); }
.btn .i { width: var(--icon-size-md); height: var(--icon-size-md); }
.btn--utility { border-radius: var(--radius-sm); background-color: var(--utility-bg); color: var(--utility-fg); padding: var(--btn-utility-pad-y) var(--btn-utility-pad-x); font-size: var(--type-button-utility-size); font-weight: var(--type-button-utility-weight); line-height: var(--type-button-utility-lh); letter-spacing: var(--type-button-utility-ls); }
.btn--utility:hover:not(:disabled) { background-color: var(--utility-bg-hover); }
.btn--utility:active:not(:disabled) { background-color: var(--utility-bg-active); }
/* Deaktiviert: Farbe bleibt, der ganze Button wird blasser */
.btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* --- Chips ------------------------------------------------------------- */
/* Chips mit Fläche (Entscheidung Gürkan): grau ohne Rahmen, gewählt leicht blau mit blauem Text und feinem blauen Rand.
   Die Fläche ist durchscheinend – auf Weiß, Grau und Karten gleich gut sichtbar. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background-color: var(--chip-bg); color: var(--text-primary);
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-sm);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  font-size: var(--type-caption-size); font-weight: var(--font-weight-medium); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.chip svg { flex: none; width: var(--icon-size-sm); height: var(--icon-size-sm); }
.chip--filter svg { display: none; }
.chip--filter[aria-pressed="true"] svg { display: block; }
.chip:hover:not(:disabled) { background-color: var(--chip-bg-hover); }
.chip:not([aria-pressed="true"]):active:not(:disabled) { background-color: var(--chip-bg-active); }
.chip[aria-pressed="true"] { background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card)); border-color: color-mix(in srgb, var(--accent) var(--chip-border-tint), transparent); color: var(--accent); }
.chip[aria-pressed="true"]:hover:not(:disabled) { background-color: color-mix(in srgb, var(--accent) calc(var(--status-tint) * 1.5), var(--bg-card)); }
/* Eingabe-Chip mit ✕ */
.chip--input { cursor: default; padding-right: var(--space-xs); }
.chip--input:hover:not(:disabled) { background-color: var(--chip-bg); }
.chip__remove {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--space-lg); height: var(--space-lg); padding: 0; border: 0; border-radius: var(--radius-xs);
  background-color: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.chip__remove:hover { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); color: var(--text-primary); }
.chip__remove:active { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.chip:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* --- Badge ------------------------------------------------------------- */
.badge {
  --tone: var(--info);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: calc(var(--space-xxs) / 2) var(--space-xs); border: var(--border-width-thin) solid transparent; border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--tone) var(--status-tint), var(--bg-card)); color: var(--tone); font-weight: var(--font-weight-medium);
}
/* Farbig ohne Punkt (Entscheidung Gürkan): getönte Fläche, Text im Statuston, kein Rahmen */
.badge--success { --tone: var(--success); }
.badge--warning { --tone: var(--warning); }
.badge--error { --tone: var(--error); }
.badge--neutral { --tone: color-mix(in srgb, var(--text-primary) var(--neutral-text-tint), transparent); background-color: var(--bg-muted); }

/* --- Link -------------------------------------------------------------- */
.link { color: var(--accent); text-decoration: none; text-underline-offset: var(--link-underline-offset); border-radius: var(--radius-xs); display: inline-block; }
.link:hover { text-decoration: underline; }
button.link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }   /* Link-Optik für Aktionen im Text */
.link[aria-disabled="true"] { color: var(--disabled-text); text-decoration: none; pointer-events: none; }

/* --- Kopieren: Wert zum Abtippen + Button mit [data-copy] (z. B. Schlüssel, Link, Token) --- */
.secret { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--input-height); padding: var(--space-xxs) 0 var(--space-xxs) var(--input-pad-x); border-radius: var(--radius-control); background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), var(--bg-card)); }
.secret code { flex: 1; min-width: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

/* Kopiert: Icon wird mit kleinem Sprung zum Haken (Erfolgsfarbe) – die einzige Rückmeldung, kein Toast */
.is-copied svg { color: var(--success); animation: copy-pop var(--motion-duration) var(--ease-out); }
.btn.is-copied span:not(.counter) { animation: fade-in var(--motion-duration) var(--ease-out); }
@keyframes copy-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.15) rotate(0); } 100% { transform: scale(1); } }

/* --- Button mit weiteren Aktionen (Split) -------------------------------- */
.btn-split, .btn-split.menu-wrap { display: inline-flex; border-radius: var(--radius-control); box-shadow: var(--elevation-control); }
.btn-split > .btn { box-shadow: none; }
.btn-split > .btn:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
/* Pfeil-Teil quadratisch, mit feiner Linie in der Textfarbe des Buttons abgesetzt */
.btn-split__toggle.btn { min-width: var(--input-height); padding-inline: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; border-left-color: color-mix(in srgb, currentColor var(--split-line-tint), transparent); }
.btn-split__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.btn-split__toggle svg { transition: transform var(--motion-duration) var(--ease-standard); }

/* --- Icon-Button (nur Icon, optional mit Rahmen) ------------------------ */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--touch-min); height: var(--touch-min); padding: 0; border: 0; border-radius: var(--radius-control);
  background-color: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
  position: relative;
}
.icon-btn svg { width: var(--icon-size-md); height: var(--icon-size-md); }
/* Ohne eigene Fläche: durchscheinend getönt, auch auf Hinweisen und Bannern eine Abdunklung. Offen (aria-expanded) wie gedrückt */
.icon-btn:hover:not(:disabled), .icon-btn[aria-expanded="true"]:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); color: var(--text-primary); }
.icon-btn:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); color: var(--text-primary); }
.icon-btn--danger:hover:not(:disabled) { color: var(--error); background-color: color-mix(in srgb, var(--error) var(--status-tint), transparent); }
.icon-btn--bordered { border: var(--border-width-thin) solid var(--outline-border); background-color: var(--outline-bg); box-shadow: var(--elevation-control); }
.icon-btn--bordered:hover:not(:disabled), .icon-btn--bordered[aria-expanded="true"]:not(:disabled) { background-color: var(--outline-hover); }
/* Löschen mit Rahmen: bei Hover Fläche und Rahmen rot getönt, wie Hinweise */
.icon-btn--bordered.icon-btn--danger:hover:not(:disabled) { color: var(--error); border-color: color-mix(in srgb, var(--error) var(--status-border-tint), transparent); background-color: color-mix(in srgb, var(--error) var(--status-tint), var(--outline-bg)); }
/* Gedrückt: Varianten einen Schritt kräftiger als ihr Hover */
.icon-btn--bordered:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), var(--outline-hover)); }
.icon-btn--danger:active:not(:disabled) { background-color: color-mix(in srgb, var(--error) calc(var(--status-tint) * 1.5), transparent); }
.icon-btn--bordered.icon-btn--danger:active:not(:disabled) { background-color: color-mix(in srgb, var(--error) calc(var(--status-tint) * 1.5), var(--outline-bg)); }
/* Deaktiviert: wie Buttons ganz blasser, ohne Hover */
:is(.icon-btn, .segmented__btn, .tab):disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* --- Zähler am Icon-Button ---------------------------------------------- */
.counter {
  position: absolute; top: calc(var(--space-xxs) * -1); right: calc(var(--space-xxs) * -1);
  display: grid; place-items: center; min-width: var(--space-lg); height: var(--space-lg); padding: 0 var(--space-xxs);
  border-radius: var(--radius-pill); background-color: var(--button-bg); color: var(--button-fg);
  font-size: var(--type-fine-print-size); font-weight: var(--font-weight-semibold); line-height: 1;
}

/* --- Avatar ------------------------------------------------------------ */
.avatar {
  --size: var(--avatar-md);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--text-primary) var(--track-tint), transparent); color: var(--text-primary);
  font-size: max(calc(var(--size) * 0.4), var(--type-fine-print-size)); font-weight: var(--font-weight-semibold); line-height: 1;
}
/* Initialen optisch mittig: Inter hat über den Großbuchstaben mehr Raum als darunter, sie säßen sonst etwa 0,09 em zu hoch (nachgemessen) */
.avatar:not(:has(> img, > svg)) { padding-top: 0.18em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }   /* absolut: im Raster löst height: 100% nicht auf, Hochformat ragte heraus */
.avatar--sm { --size: var(--avatar-sm); }
.avatar--lg { --size: var(--avatar-lg); }
.avatar--logo { background-color: var(--color-canvas); border: var(--border-width-thin) solid var(--border-hairline); }
.avatar--logo img { position: static; width: 70%; height: auto; border-radius: 0; object-fit: contain; }   /* Logo mittig im Raster, nicht wie ein Foto über den ganzen Kreis */
.avatar--square { border-radius: var(--radius-control); }   /* Bild einer Sache statt einer Person, z. B. Logo einer Mod (Gürkan, 09.11.2026) */
.avatar--square:has(> img) { background-color: var(--color-canvas); }   /* Bild einer Sache (z. B. durchsichtiges Logo) auf weißer Fläche wie in App-Kachel und Seitenleiste */
.avatar__status { position: absolute; right: 0; bottom: 0; width: calc(var(--size) * 0.3); height: calc(var(--size) * 0.3); border-radius: var(--radius-full); background-color: var(--success); border: var(--border-width-medium) solid var(--bg-canvas); }
.popover .avatar__status { border-color: var(--bg-card); }
/* Avatar als Knopf (Profil, Konto): rund, ohne graue Fläche; Hover und offen zeigen einen Ring um das Bild */
.icon-btn:has(> .avatar) { border-radius: var(--radius-full); }
.icon-btn:has(> .avatar):is(:hover, :active, [aria-expanded="true"]) { background-color: transparent; }
.icon-btn > .avatar { transition: box-shadow var(--motion-fast) var(--ease-standard); }
.icon-btn:hover > .avatar { box-shadow: 0 0 0 var(--border-width-medium) color-mix(in srgb, var(--text-primary) var(--track-tint), transparent); }
.icon-btn[aria-expanded="true"] > .avatar { box-shadow: 0 0 0 var(--border-width-medium) var(--ring-strong); }
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar { border: var(--border-width-medium) solid var(--bg-canvas); }
.avatar-group .avatar + .avatar { margin-left: calc(var(--size) * -0.3); }

/* --- Tooltip (data-tooltip="Text") ------------------------------------- */
/* Eine Ebene für alle (.tooltip, im Top Layer), components.js setzt sie: oben mittig, oben kein Platz → unten, am Fensterrand nach innen gerückt.
   So schneidet keine Tabelle und kein Dialog sie ab. Rechts nur mit data-tooltip-pos="right". */
.tooltip {
  position: fixed; inset: auto; margin: 0; z-index: var(--z-tooltip); overflow: visible;
  padding: calc(var(--space-xxs) * 1.5) var(--space-sm); border-radius: var(--radius-sm);
  background-color: var(--tooltip-bg); color: var(--tooltip-fg);
  border: var(--border-width-thin) solid var(--tooltip-border); box-shadow: var(--elevation-2);
  font-size: var(--type-caption-size); font-weight: var(--font-weight-regular); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls);
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out), display var(--motion-fast) allow-discrete, overlay var(--motion-fast) allow-discrete;
}
.tooltip:popover-open, .tooltip.is-open { opacity: 1; }
@starting-style { .tooltip:popover-open, .tooltip.is-open { opacity: 0; } }

/* --- Feld ---------------------------------------------------------------- */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-content: start; }   /* minmax: Inhalt wie die Code-Eingabe darf schrumpfen */
.input {
  width: 100%; height: var(--input-height); padding: 0 var(--input-pad-x);   /* rechts gleich viel Innenabstand wie links: sonst schiebt Bitwarden sein Icon von der Feldkante nach innen */
  background-color: var(--bg-field); color: var(--text-primary);
  border: var(--border-width-thin) solid var(--border-field); border-radius: var(--radius-control);
  font-size: var(--input-font-size); letter-spacing: var(--type-body-ls);
  box-shadow: var(--elevation-control);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.input::placeholder { color: var(--text-placeholder); opacity: 1; }
.input:hover { border-color: var(--border-field-hover); }
/* Fokus: blauer Rahmen mit schmalem, hellem Saum */
.input:focus, .dropdown__button[aria-expanded="true"] { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { border-color: var(--error); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring-error); }
/* Deaktiviert: ganzes Feld blasser, Rahmen bleibt (auch bei Hover) */
.input:disabled { opacity: var(--disabled-opacity); border-color: var(--border-field); cursor: not-allowed; }
/* Label 14 px / 500, Hilfe- und Fehlertext 14 px */
.field > label.t-caption-strong, .field > .t-caption-strong, .range-field__head > .t-caption-strong, legend.t-caption-strong {
  font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls);
}
/* Pflichtfeld: Stern hinter der Beschriftung, sobald die Eingabe required ist (oder das Feld data-required hat); Screenreader
   lesen ihn nicht (required sagen sie selbst an) (Gürkan, 09.11.2026) */
:is(.field:has(:required), .field[data-required]) > :is(label, legend, .t-caption-strong):first-child::after { content: "\00a0*" / ""; color: var(--error); }
.field__hint, .field__error { font-size: var(--type-body-size); line-height: var(--type-body-strong-lh); }
.field__hint { color: var(--text-secondary); }
.field__error { display: flex; gap: var(--space-xs); align-items: flex-start; color: var(--error); }
.field__error svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); margin-top: calc((1lh - var(--icon-size-md)) / 2); }   /* mittig zur ersten Textzeile */
/* Hinweis erfüllt (z. B. Passwort mit allen Regeln): grün mit Haken, aufgebaut wie .field__error */
.field__hint--ok { display: flex; gap: var(--space-xs); align-items: flex-start; color: var(--success); }
.field__hint--ok svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); margin-top: calc((1lh - var(--icon-size-md)) / 2); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); grid-column: 1 / -1; }
textarea.input { height: auto; min-height: calc(var(--input-height) * 3); padding: var(--input-pad-y) var(--input-pad-x); border-radius: var(--radius-control); line-height: var(--type-body-lh); resize: vertical; }

/* --- Gruppen & Raster -------------------------------------------------- */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
[data-chip-input]:focus { outline: none; }   /* Fokusziel, wenn der letzte Chip entfernt ist, ohne Ring um die Gruppe */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); gap: var(--space-xl) var(--space-lg); align-items: start; }
.field--full { grid-column: 1 / -1; }
.field--wide { grid-column: span 2; }
@media (max-width: 640px) { .field--wide { grid-column: 1 / -1; } }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--grid-gap); }

/* --- Feld: Zeichenzähler -------------------------------------------------- */
.field__foot { display: flex; align-items: flex-start; gap: var(--space-sm); }
.field__count { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field__count.is-near { color: var(--warning); }

/* --- Feld mit Einheit oder Vorsatz (€, %, https://) ------------------------ */
.input-affix {
  display: flex; align-items: center; height: var(--input-height);
  background-color: var(--bg-field); border: var(--border-width-thin) solid var(--border-field); border-radius: var(--radius-control);
  box-shadow: var(--elevation-control);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.input-affix:hover { border-color: var(--border-field-hover); }
.input-affix:focus-within { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring); }
.input-affix:has(.input[aria-invalid="true"]) { border-color: var(--error); box-shadow: 0 0 0 var(--field-ring-width) var(--ring-error); }
.input-affix .input, .input-affix .input:focus { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; box-shadow: none; }
.input-affix__text { flex: none; padding: 0 var(--input-pad-x); color: var(--text-secondary); white-space: nowrap; }
.input-affix__text:first-child { padding-right: 0; }
.input-affix__text:last-child { padding-left: 0; }
.input-affix .input:first-child { padding-right: var(--space-xs); text-align: right; }
.input-affix:has(.input:disabled) { opacity: var(--disabled-opacity); border-color: var(--border-field); }
.input-affix .input:disabled { opacity: 1; }
/* Vorsatz zum Wählen (z. B. https:// oder http://): das Dropdown des Design-Systems im Feld, feine Linie zum Feld. Verhalten über [data-url] in components.js */
.input-affix__pick { display: flex; flex: none; align-self: stretch; border-right: var(--border-width-thin) solid var(--border-hairline); }
.input-affix__pick .dropdown__button {
  height: 100%; padding: 0 var(--input-pad-x); border: 0; border-radius: var(--radius-control) 0 0 var(--radius-control);
  background: transparent; color: var(--text-secondary); font: inherit; outline: none;
}
.input-affix__pick .dropdown__button:hover, .input-affix__pick .dropdown__button[aria-expanded="true"] { color: var(--text-primary); }
/* Liste bündig mit der linken Feldkante, so breit wie nötig */
.input-affix__pick .dropdown__list { right: auto; left: calc(var(--border-width-thin) * -1); min-width: calc(100% + var(--border-width-thin)); width: max-content; top: calc(100% + var(--space-xs) + var(--border-width-thin)); }
.input-affix__pick.dropdown--up .dropdown__list { top: auto; bottom: calc(100% + var(--space-xs) + var(--border-width-thin)); }
/* Feld mit Aktion rechts IM Feld – z. B. Passwort anzeigen (Auge, eye ↔ eye-off).
   Das <input> endet vor dem Button und behält rechts den vollen Innenabstand: Bitwarden setzt sein Symbol an das
   rechte Ende des <input>, also links neben das Auge – beide haben Platz, nichts liegt übereinander. */
.input-affix--action .input:first-child { padding-right: var(--input-pad-x); text-align: left; }
/* Buttons im Feld (Passwort-Auge, Kopieren): kleiner als das Feld, rundum gleich viel Luft, Hover deutlich */
:is(.input-affix--action, .secret) > .icon-btn {
  width: calc(var(--input-height) - var(--border-width-thin) * 2 - var(--field-btn-inset) * 2); height: calc(var(--input-height) - var(--border-width-thin) * 2 - var(--field-btn-inset) * 2);
  margin-right: var(--field-btn-inset); border-radius: var(--radius-sm);
}
:is(.input-affix--action, .secret) > .icon-btn svg { width: var(--icon-size-field); height: var(--icon-size-field); }
:is(.input-affix--action, .secret) > .icon-btn:hover:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), transparent); }
:is(.input-affix--action, .secret) > .icon-btn:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint-active), transparent); }

/* --- Dropdown ---------------------------------------------------------- */
.dropdown { position: relative; }
.dropdown__button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); text-align: left; cursor: pointer; }
.dropdown__button svg { flex: none; width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--text-secondary); transition: transform var(--motion-duration) var(--ease-standard); }
.dropdown__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* nie Umbruch, zu lang endet mit … */
.dropdown__list {
  position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-dropdown);
  /* mindestens so breit wie der Knopf, breiter, wenn ein Eintrag (gewählt, mit Haken) mehr braucht; nie seitlich scrollbar */
  min-width: 100%; width: max-content; max-width: calc(100vw - var(--space-lg) * 2);
  display: grid; gap: var(--item-gap); align-content: start;
  /* bis 7 Einträge ohne Scrollen, ab 8 ist der nächste halb zu sehen; scroll-padding: Pfeiltasten lassen Abstand zum Rand */
  max-height: calc(var(--item-height) * 7.5 + var(--item-gap) * 7 + var(--space-xxs) * 2 + var(--border-width-thin) * 2);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-padding: var(--space-xxs);
  padding: var(--space-xxs);
  background-color: var(--bg-card);
  border: var(--border-width-thin) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}
.dropdown__list:focus { outline: none; }
.dropdown__list[popover] { position: fixed; inset: auto; margin: 0; }   /* gilt auch für die Suche mit Vorschlägen */   /* im Dialog in der obersten Ebene: Lage setzt components.js am Knopf */
.dropdown__list:not([hidden]) { animation: drop-in var(--motion-duration) var(--ease-out); }
.dropdown--up .dropdown__list { top: auto; bottom: calc(100% + var(--space-xs)); animation-name: drop-up; }
@keyframes drop-in { from { opacity: 0; transform: translateY(calc(var(--space-xxs) * -1)); } }
@keyframes drop-up { from { opacity: 0; transform: translateY(var(--space-xxs)); } }
.dropdown__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-width: 0; min-height: var(--item-height); padding: 0 var(--space-xs);
  border-radius: var(--radius-sm); cursor: pointer;
}
.dropdown__option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__option svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--accent); visibility: hidden; }
/* ohne Übergang: Pfeiltasten springen sofort */
.dropdown__option:hover, .dropdown__option.is-active { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.dropdown__option[aria-selected="true"] { font-weight: var(--font-weight-medium); }
.dropdown__option[aria-selected="true"] svg { visibility: visible; }

/* --- Suche mit Vorschlägen & Mehrfachauswahl ------------------------------ */
.combobox .input { cursor: text; }
.combobox__match { font-weight: var(--font-weight-semibold); }
.combobox__empty { padding: var(--space-xs) var(--space-lg); color: var(--text-secondary); }
.combobox__new { justify-content: flex-start; color: var(--accent); }   /* „„Text“ hinzufügen“ bei data-create */
.dropdown__list.is-empty { display: none; }   /* nichts zu zeigen: keine leere Leiste */
.tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs);
  height: auto; min-height: var(--input-height);
  padding: calc(var(--space-xxs) - var(--border-width-thin)) var(--input-pad-x) calc(var(--space-xxs) - var(--border-width-thin)) var(--space-xxs);
  border-radius: var(--radius-control); cursor: text;
}
.tag-input:focus-within { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring); }
.tag-input .chip { min-height: calc(var(--input-height) - var(--space-xs)); padding-block: 0; cursor: default; }
.tag-input__field { flex: 1 1 var(--stepper-input-width); min-width: var(--stepper-input-width); height: calc(var(--input-height) - var(--space-xs)); padding: 0 0 0 var(--space-xs); border: 0; background: transparent; font-size: var(--input-font-size); }
.tag-input__field:focus { outline: none; }
.tag-input__field::placeholder { color: var(--text-placeholder); opacity: 1; }

/* --- Checkbox, Radio, Switch ------------------------------------------- */
fieldset { display: grid; gap: var(--space-xxs); min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: var(--space-xs); }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-min); width: fit-content; cursor: pointer; }
:is(.check, .choice-card) input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  display: grid; place-items: center;
  width: var(--control-size); height: var(--control-size);
  background-color: var(--bg-field); border: var(--border-width-thin) solid var(--border-field); box-shadow: var(--elevation-control);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
:is(.check, .choice-card) input[type="checkbox"] { border-radius: var(--radius-xs); }
:is(.check, .choice-card) input[type="radio"] { border-radius: var(--radius-full); }
:is(.check, .choice-card) input::after { content: ""; opacity: 0; }
/* Haken als Maske statt gedrehtem Rahmen: steht auf jeder Auflösung mittig und gleich dick */
:is(.check, .choice-card) input[type="checkbox"]::after {
  width: 75%; height: 75%; background-color: var(--button-fg);
  -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat;
}
/* Radio-Punkt als Verlauf in der Fläche statt eigenem Element: ein ::after mit 40 % (5,6 px) wurde je nach Bruchteil-Position
   anders gerundet und stand nicht mittig. 4 px vom Rand, Kante so weich wie ein geglätteter Kreis. */
:is(.check, .choice-card) input[type="radio"] { --radio-dot: calc(100% - var(--space-xs) / 2); --radio-edge: var(--border-width-thin) / 4; }
:is(.check, .choice-card) input[type="radio"]::after { display: none; }
:is(.check, .choice-card) input[type="radio"]:checked { background: radial-gradient(circle closest-side, var(--button-fg) calc(var(--radio-dot) - var(--radio-edge)), var(--button-bg) calc(var(--radio-dot) + var(--radio-edge))); }
:is(.check, .choice-card) input[type="radio"]:checked:not(:disabled):hover { background: radial-gradient(circle closest-side, var(--button-fg) calc(var(--radio-dot) - var(--radio-edge)), var(--button-bg-hover) calc(var(--radio-dot) + var(--radio-edge))); }
:is(.check, .choice-card) input[type="radio"]:checked:disabled { background: radial-gradient(circle closest-side, var(--disabled-text) calc(var(--radio-dot) - var(--radio-edge)), var(--disabled-bg) calc(var(--radio-dot) + var(--radio-edge))); }
:is(.check, .choice-card) input:checked { background-color: var(--button-bg); border-color: var(--button-bg); }
:is(.check, .choice-card) input:checked::after { opacity: 1; }
:is(.check, .choice-card) input:hover:not(:disabled) { border-color: var(--border-field-hover); }
:is(.check, .choice-card) input:checked:not(:disabled):hover { background-color: var(--button-bg-hover); border-color: var(--button-bg-hover); }
:is(.check, .choice-card) input:disabled { background-color: var(--disabled-bg); border-color: var(--disabled-bg); cursor: not-allowed; }
:is(.check, .choice-card) input[type="checkbox"]:disabled::after { background-color: var(--disabled-text); }
.check:has(input:disabled) { color: var(--disabled-text); cursor: not-allowed; }

.check.switch input {
  position: relative; display: block;
  width: var(--switch-width); height: var(--switch-height);
  border: 0; border-radius: var(--radius-pill);
  background-color: var(--switch-track);
}
.check.switch input::after {
  position: absolute; top: var(--switch-gap); left: var(--switch-gap);
  width: calc(var(--switch-height) - var(--switch-gap) * 2); height: calc(var(--switch-height) - var(--switch-gap) * 2);
  border: 0; border-radius: var(--radius-full); background-color: var(--switch-thumb);
  -webkit-mask: none; mask: none;   /* Schalter ist auch ein Checkbox-Feld: Haken-Maske der Checkbox nicht erben */
  opacity: 1; transform: none;
  transition: transform var(--motion-duration) var(--ease-standard);
}
.check.switch input:checked { background-color: var(--button-bg); }
.check.switch input:checked::after { background-color: var(--color-on-primary); transform: translateX(calc(var(--switch-width) - var(--switch-height))); }
.check.switch input:hover:not(:disabled) { background-color: var(--switch-track); }
.check.switch input:checked:not(:disabled):hover { background-color: var(--button-bg-hover); }
.check.switch input:disabled { background-color: var(--disabled-bg); }
.check.switch input:disabled::after { background-color: var(--disabled-text); }

/* --- Auswahl-Karten ------------------------------------------------------ */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--choice-card-min), 1fr)); gap: var(--space-sm); }
.choice-card {
  position: relative; display: grid; align-content: start; gap: var(--space-xxs);
  padding: var(--space-lg) calc(var(--space-lg) + var(--control-size) + var(--space-sm)) var(--space-lg) var(--space-lg);
  background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg);
  cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.choice-card:hover { border-color: var(--border-interactive-hover); }
.choice-card:active { background-color: color-mix(in srgb, var(--text-primary) var(--subtle-tint), var(--bg-card)); }
.choice-card input { position: absolute; top: var(--space-lg); right: var(--space-lg); }
.choice-card:has(input:checked) { border-color: var(--button-bg); box-shadow: inset 0 0 0 var(--border-width-thin) var(--button-bg); background-color: color-mix(in srgb, var(--accent) calc(var(--status-tint) / 2), var(--bg-card)); }
.choice-card:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.choice-card:has(input:focus-visible) input { outline: none; }
.choice-card:has(input:disabled) { color: var(--disabled-text); background-color: var(--disabled-bg); border-color: var(--disabled-bg); cursor: not-allowed; }
.choice-card__text { color: var(--text-secondary); }
.choice-card__price { margin-top: var(--space-xs); font-variant-numeric: tabular-nums; }

/* --- Zahlenfeld (− Wert +) ------------------------------------------------ */
.stepper {
  display: inline-flex; align-items: center; width: fit-content; height: var(--input-height);
  background-color: var(--bg-field); border: var(--border-width-thin) solid var(--border-field); border-radius: var(--radius-control);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.stepper:hover { border-color: var(--border-field-hover); }
/* Aktiv nur, wenn die Zahl selbst den Fokus hat – Klick auf − / + markiert nicht das ganze Feld */
.stepper:has(.stepper__input:focus) { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring); }
/* − / + wie Buttons im Feld: kleiner, rund, mit Luft zum Rand, Hover deutlich */
.stepper .icon-btn {
  width: calc(var(--input-height) - var(--border-width-thin) * 2 - var(--field-btn-inset) * 2); height: calc(var(--input-height) - var(--border-width-thin) * 2 - var(--field-btn-inset) * 2);
  margin: 0 var(--field-btn-inset); border-radius: var(--radius-sm);
}
.stepper .icon-btn:hover:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), transparent); }
.stepper .icon-btn:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint-active), transparent); }
.stepper .icon-btn:disabled { opacity: 1; color: var(--disabled-text); background: transparent; cursor: not-allowed; }   /* im Feld nur graue Schrift wie Seitenzahlen, nicht doppelt blass */
.stepper__input {
  width: var(--stepper-input-width); height: 100%; padding: 0; border: 0; background: transparent;
  font-size: var(--input-font-size); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.stepper__input:focus { outline: none; }
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Schieberegler ------------------------------------------------------- */
.range-field { display: grid; gap: var(--space-xxs); }
.range-field__head { display: flex; justify-content: space-between; gap: var(--space-sm); }
.range-field__head output { font-variant-numeric: tabular-nums; }
.range-field__scale { display: flex; justify-content: space-between; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.range {
  --fill: 50%;
  --track: color-mix(in srgb, var(--text-primary) var(--track-tint), transparent);
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--touch-min); margin: 0;
  background: transparent; cursor: pointer;
}
/* harte Kante bei --fill: kein Verlauf, nur gefüllter und leerer Teil der Spur */
.range::-webkit-slider-runnable-track { height: var(--slider-track); border-radius: var(--radius-pill); background: linear-gradient(to right, var(--button-bg) var(--fill), var(--track) var(--fill)); }
.range::-moz-range-track { height: var(--slider-track); border-radius: var(--radius-pill); background-color: var(--track); }
.range::-moz-range-progress { height: var(--slider-track); border-radius: var(--radius-pill); background-color: var(--button-bg); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--control-size); height: var(--control-size);
  margin-top: calc((var(--slider-track) - var(--control-size)) / 2);
  border: 0; border-radius: var(--radius-full); background-color: var(--color-on-primary);
  box-shadow: var(--elevation-control), 0 0 0 var(--border-width-thin) var(--border-hairline);
}
.range::-moz-range-thumb { width: var(--control-size); height: var(--control-size); border: 0; border-radius: var(--radius-full); background-color: var(--color-on-primary); box-shadow: var(--elevation-control), 0 0 0 var(--border-width-thin) var(--border-hairline); }
.range:focus { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.range:focus-visible::-moz-range-thumb { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.range:disabled { cursor: not-allowed; }
.range:disabled::-webkit-slider-runnable-track { background: var(--disabled-bg); }
.range:disabled::-moz-range-progress { background-color: var(--disabled-text); }

/* --- Code-Eingabe (Zwei-Faktor) ------------------------------------------ */
/* Kästchen teilen sich die Breite, höchstens Feldhöhe plus Abstand groß; auf schmalen Handys (Touch 52 px) ragten 6 Stück sonst über den Rand */
.otp { display: flex; align-items: center; gap: var(--space-xs); width: 100%; }
.otp .input { flex: 1 1 0; min-width: 0; width: auto; max-width: calc(var(--input-height) + var(--space-xs)); height: auto; aspect-ratio: 1 / 1; padding: 0; text-align: center; font-size: var(--type-lead-size); font-variant-numeric: tabular-nums; }
.otp .otp__sep { flex: none; }
.otp__sep { width: var(--space-xs); height: var(--border-width-medium); border-radius: var(--radius-pill); background-color: var(--border-field); }

/* --- Datum: Feld & Kalender ---------------------------------------------- */
.datepicker { position: relative; }
.datepicker__button { display: flex; align-items: center; gap: var(--space-xs); text-align: left; cursor: pointer; }
.datepicker__button svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); }
.datepicker__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.datepicker__value.is-empty { color: var(--text-placeholder); }
.datepicker__button[aria-expanded="true"] { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 var(--field-ring-width) var(--ring); }
.calendar {
  position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-dropdown);
  width: calc(var(--touch-min) * 7 + var(--space-xs) * 2); padding: var(--space-xs);
  background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}
.calendar:not([hidden]) { animation: drop-in var(--motion-duration) var(--ease-out); }
.calendar--end { left: auto; right: 0; }
.calendar--flip { left: auto; right: 0; }
.calendar--end.calendar--flip { left: 0; right: auto; }
/* Fest eingebettet (z. B. als Untermenü im Filter): ohne eigene Ebene, der Rahmen kommt vom Menü */
.datepicker--inline .calendar { position: static; padding: 0; border: 0; box-shadow: none; animation: none; }
.menu--calendar { padding: var(--space-xs); }
.datepicker--up .calendar { top: auto; bottom: calc(100% + var(--space-xs)); animation-name: drop-up; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xxs); margin-bottom: var(--space-xxs); }
.calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar__grid th { height: var(--touch-min); padding: 0; color: var(--text-secondary); font-weight: var(--font-weight-regular); text-align: center; }
.calendar__grid td { padding: 0; text-align: center; }
.calendar__day {
  position: relative; display: inline-grid; place-items: center; width: var(--touch-min); height: var(--touch-min); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer;
  font-size: var(--type-body-size); font-variant-numeric: tabular-nums;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.calendar__day:hover { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.calendar__day:not(.is-selected):active { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.calendar__day.is-outside { color: var(--text-placeholder); }
.calendar__day.is-today { color: var(--accent); font-weight: var(--font-weight-semibold); }
.calendar__day.is-today::after { content: ""; position: absolute; bottom: var(--space-xxs); width: var(--space-xxs); height: var(--space-xxs); border-radius: var(--radius-full); background-color: currentColor; }
.calendar__day.is-in-range { border-radius: 0; width: 100%; background-color: color-mix(in srgb, var(--accent) var(--status-tint), transparent); }
.calendar__day.is-selected { background-color: var(--button-bg); color: var(--button-fg); font-weight: var(--font-weight-semibold); }
.calendar__day.is-selected:hover { background-color: var(--button-bg-hover); }
.calendar__day:disabled { color: var(--disabled-text); background: transparent; cursor: not-allowed; text-decoration: line-through; }
.calendar__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); margin-top: var(--space-xxs); padding: var(--space-xs) var(--space-xxs) 0; border-top: var(--border-width-thin) solid var(--border-hairline); }

/* --- Datei-Upload --------------------------------------------------------
   Standard: die ganze Fläche .upload__zone ist der Button – „Zum Hochladen klicken
   oder hierher ziehen“. Darunter jede Datei als eigene Karte mit Vorschau bzw. Typ-Kachel, Fortschritt mit Prozent,
   fertig mit Haken. Sind Dateien da, wird die Fläche flacher. Ziehen nimmt die ganze Komponente an.
   Variante .upload--grid: Kacheln mit großer Vorschau, „Hinzufügen“ ist die letzte Kachel (für Bilder). */
.upload { display: grid; gap: var(--space-xs); }
.upload__zone {
  display: grid; justify-items: center; gap: var(--space-xxs); width: 100%; padding: var(--space-xl) var(--space-lg); cursor: pointer; text-align: center;
  background-color: var(--bg-card); color: var(--text-primary); font: inherit;
  border: var(--border-width-thin) dashed var(--border-field); border-radius: var(--radius-lg);
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), padding var(--motion-duration) var(--ease-standard);
}
.upload__zone:hover { background-color: color-mix(in srgb, var(--bg-muted) var(--surface-hover-tint), var(--bg-card)); border-color: var(--border-field-hover); }
.upload__zone:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.upload__icon { display: grid; place-items: center; width: var(--file-thumb-size); height: var(--file-thumb-size); margin-bottom: var(--space-xs); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-md); background-color: var(--bg-card); box-shadow: var(--elevation-control); color: var(--text-secondary); }
.upload__cta { color: var(--accent); font-weight: var(--font-weight-medium); }
.upload__drop { display: none; font-weight: var(--font-weight-medium); }
.upload__hint { color: var(--text-secondary); }
/* Beim Ziehen: Fläche blau, Text „Zum Hochladen loslassen“ */
.upload.is-dragover .upload__zone { border-style: solid; border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card)); }
.upload.is-dragover .upload__icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) var(--status-border-tint), transparent); }
.upload.is-dragover .upload__text { display: none; }
.upload.is-dragover .upload__drop { display: block; }
/* Mit Dateien: Fläche flacher, ohne Icon */
.upload:has(.file) .upload__zone { padding-block: var(--space-lg); }
.upload:has(.file):not(.upload--grid):not(.is-dragover) .upload__icon { display: none; }

/* Liste: jede Datei als eigene Karte */
.files { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.files:empty { display: none; }
.file { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding: var(--space-sm); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); text-align: left; }
.file__thumb { position: relative; display: grid; place-items: center; width: var(--file-thumb-size); height: var(--file-thumb-size); border-radius: var(--radius-md); background-color: var(--bg-muted); color: var(--text-secondary); overflow: hidden; }
.file__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Typ-Kachel: Dateiendung als kleines Schild unten links (PDF, DOCX …) */
.file__type { position: absolute; left: calc(var(--space-xxs) / 2); bottom: calc(var(--space-xxs) / 2); padding: 0 calc(var(--space-xxs) / 2); border-radius: var(--radius-xs); background-color: var(--text-primary); color: var(--bg-canvas); font-size: var(--type-fine-print-size); font-weight: var(--font-weight-semibold); line-height: var(--type-caption-strong-lh); letter-spacing: 0; }
.file__ok { display: none; }
.file__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space-xxs) / 2); min-width: 0; }
.file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
.file__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); color: var(--text-secondary); }
.file__size { white-space: nowrap; }
.file__status:empty { display: none; }
.file__progress { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xxs); }
.file__progress .progress { flex: 1; height: var(--file-progress-height); }
.file__percent { min-width: var(--space-xxl); text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.file .icon-btn { margin: calc(var(--space-xxs) * -1) calc(var(--space-xxs) * -1) 0 0; }
/* Fertig: Fortschritt weg, „Hochgeladen“ mit Haken in Erfolgsfarbe */
.file.is-done .file__progress { display: none; }
.file.is-done .file__status { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--success); }
.file.is-done .file__status::before { content: ""; width: var(--icon-size-sm); height: var(--icon-size-sm); border-radius: var(--radius-full); background-color: currentColor;
  -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; }
/* Fehler (falsches Format, zu groß, abgebrochen): Karte rot getönt, Grund in Rot, optional „Erneut versuchen“ */
.file--error { border-color: color-mix(in srgb, var(--error) var(--status-border-tint), transparent); background-color: color-mix(in srgb, var(--error) calc(var(--status-tint) / 2), var(--bg-card)); }
.file--error .file__thumb { background-color: color-mix(in srgb, var(--error) var(--status-tint), var(--bg-card)); color: var(--error); }
.file--error .file__status { color: var(--error); }
.file--error .file__progress { display: none; }
.file__retry { font-size: inherit; font-weight: var(--font-weight-medium); }

/* --- Variante .upload--grid: Kacheln mit großer Vorschau, „Hinzufügen“ als letzte Kachel --- */
.upload--grid:has(.file) { grid-template-columns: repeat(auto-fill, minmax(var(--file-tile-min), 1fr)); gap: var(--space-sm); }
.upload--grid:has(.file) .files { display: contents; }
.upload--grid:has(.file) .upload__zone { order: 1; align-content: center; aspect-ratio: 1 / 1; padding: var(--space-xs); }
.upload--grid:has(.file) .upload__zone .upload__icon { width: var(--space-xl); height: var(--space-xl); margin: 0; border: 0; box-shadow: none; background: none; }
.upload--grid:has(.file) .upload__hint { display: none; }
/* Letzte Kachel: kurz „Hinzufügen“ statt des ganzen Satzes */
.upload__add { display: none; }
.upload--grid:has(.file):not(.is-dragover) .upload__text { display: none; }
.upload--grid:has(.file):not(.is-dragover) .upload__add { display: block; color: var(--accent); font-weight: var(--font-weight-medium); }
.upload--grid:has(.file).is-dragover .upload__drop { font-size: var(--type-caption-size); }
/* Grund auf der Kachel höchstens zwei Zeilen – voller Text im Tooltip (title) */
/* Nur eine Datei (ohne multiple, z. B. ein Bild): ist sie gewählt, fällt die Fläche zum Hinzufügen weg; Entfernen (X) bringt sie zurück (Gürkan, 09.11.2026) */
.upload:not(:has(input[multiple])):has(.file) .upload__zone { display: none; }
.upload--grid .file__status { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upload--grid .file { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-xxs); padding: 0; background: none; border: 0; border-radius: 0; }
.upload--grid .file__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); }
.upload--grid .file__thumb > .i { width: var(--space-xl); height: var(--space-xl); }
.upload--grid .file__type { left: var(--space-xs); bottom: var(--space-xs); }
.upload--grid .file__name, .upload--grid .file__meta { font-size: var(--type-caption-size); }
.upload--grid .file.is-done .file__status { display: none; }
.upload--grid .file .icon-btn { position: absolute; top: var(--space-xxs); right: var(--space-xxs); width: calc(var(--touch-min) - var(--space-xs)); height: calc(var(--touch-min) - var(--space-xs)); margin: 0; background-color: color-mix(in srgb, var(--bg-card) var(--overlay-tint), transparent); box-shadow: var(--elevation-control); }
/* Fortschritt als Ring auf der Vorschau, fertig als grüner Haken oben links */
.upload--grid .file__progress { position: absolute; inset: 0 0 auto; aspect-ratio: 1 / 1; display: grid; place-items: center; margin: 0; border-radius: var(--radius-lg); background-color: color-mix(in srgb, var(--bg-canvas) var(--scrim-tint), transparent); }
.upload--grid .file__progress .progress { display: none; }
.upload--grid .file__percent { display: grid; place-items: center; width: var(--file-ring-size); height: var(--file-ring-size); min-width: 0; border-radius: var(--radius-full); color: var(--text-primary); font-weight: var(--font-weight-semibold);
  background: radial-gradient(closest-side, var(--bg-card) 76%, transparent 78% 100%), conic-gradient(var(--accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--text-primary) var(--track-tint), transparent) 0); }   /* 76/78 %: Lochgröße des Rings */
.upload--grid .file.is-done .file__ok { position: absolute; top: var(--space-xs); left: var(--space-xs); display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full); background-color: var(--success); color: var(--color-on-primary); }
.upload--grid .file__ok .i { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: var(--icon-stroke-bold); }

/* --- Hinweise, Modal, Toast ------------------------------------------- */
.alerts { display: grid; gap: var(--space-sm); }
.alert {
  --tone: var(--info);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--tone) var(--status-tint), var(--bg-card));
}
/* Getönt ohne Rand (Entscheidung Gürkan): Fläche in der Statusfarbe, genau ein Element farbig, hier das Icon. Titel und Text neutral.
   Gleiche Regel wie beim Badge, das kein Icon hat und darum den Text färbt. */
.alert--success { --tone: var(--success); }
.alert--warning { --tone: var(--warning); }
.alert--error { --tone: var(--error); }
.alert > svg { width: var(--icon-size-md); height: var(--icon-size-md); margin-top: calc((var(--type-body-strong-lh) * var(--type-body-strong-size) - var(--icon-size-md)) / 2); color: var(--tone); }
.alert__title { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.alert p:not(.alert__title) { color: var(--text-on-tint); }
.alert .icon-btn { margin-top: calc((var(--type-body-strong-lh) * var(--type-body-strong-size) - var(--touch-min)) / 2); margin-bottom: calc((var(--type-body-strong-lh) * var(--type-body-strong-size) - var(--touch-min)) / 2); margin-right: calc(var(--space-lg) - var(--space-sm) - (var(--touch-min) - var(--icon-size-md)) / 2); }

.modal {
  width: min(calc(100% - var(--page-gutter) * 2), var(--modal-width));
  padding: var(--space-xl); margin: auto;
  border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg);
  background-color: var(--bg-card); color: var(--text-primary);
  box-shadow: var(--elevation-4);
}

/* Dialoge (Modal, Seitenpanel, Befehlspalette) blenden ein UND aus:
   geschlossen = Startzustand, [open] = Ziel; allow-discrete hält display/overlay bis die Animation fertig ist */
.modal, .drawer, .command {
  opacity: 0;
  transition: opacity var(--motion-duration) var(--ease-in), transform var(--motion-duration) var(--ease-in),
    overlay var(--motion-duration) allow-discrete, display var(--motion-duration) allow-discrete;
}
.modal, .command { transform: scale(var(--enter-scale)); }
.modal[open], .drawer[open], .command[open] { opacity: 1; transform: none; transition-timing-function: var(--ease-out); }
.modal::backdrop, .drawer::backdrop, .command::backdrop {
  background-color: var(--color-backdrop); opacity: 0;
  transition: opacity var(--motion-duration) var(--ease-in), overlay var(--motion-duration) allow-discrete, display var(--motion-duration) allow-discrete;
}
.modal[open]::backdrop, .drawer[open]::backdrop, .command[open]::backdrop { opacity: 1; }
@starting-style {
  .modal[open], .command[open] { opacity: 0; transform: scale(var(--enter-scale)); }
  .drawer[open] { opacity: 0; transform: translateX(100%); }
  .modal[open]::backdrop, .drawer[open]::backdrop, .command[open]::backdrop { opacity: 0; }
}
.modal__head { margin-bottom: var(--space-xs); padding-right: var(--space-xl); }
.modal__head .t-tagline { font-size: var(--type-lead-size); }   /* Titel 18 px */
.modal p { color: var(--text-secondary); }
.modal .field__error { color: var(--error); }       /* sonst färbt „.modal p“ sie grau */
.modal .alert__title { color: var(--text-primary); }
.modal__close { position: absolute; top: calc(var(--space-xl) + (var(--type-lead-size) * var(--type-tagline-lh) - var(--touch-min)) / 2); right: calc(var(--space-xl) - (var(--touch-min) - var(--icon-size-md)) / 2); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-xl); }
/* Phone: Buttons untereinander über die volle Breite, die Hauptaktion oben */
@media (max-width: 640px) {
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; }
}

.toasts {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-toast);
  display: grid; gap: var(--space-sm);
  width: min(calc(100% - var(--space-lg) * 2), var(--toast-width));
}
.toast { background-color: var(--bg-card); border-color: var(--border-hairline); box-shadow: var(--elevation-3); animation: slide-in var(--motion-duration) var(--ease-out); }
.toast.is-leaving { animation: slide-out var(--motion-duration) var(--ease-in) forwards; }
/* Stapel im offenen Dialog (Top Layer, components.js): sieht aus wie in der Seite; beim Schließen umgehängte Toasts erscheinen nicht neu */
.toasts[popover] { inset: auto var(--space-lg) var(--space-lg) auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.toast.is-moved:not(.is-leaving) { animation: none; }
.toast__action { justify-self: start; margin-top: var(--space-xxs); }
@keyframes pop-in { from { opacity: 0; transform: scale(var(--enter-scale)); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(var(--space-xs)); } }
@keyframes slide-out { to { opacity: 0; transform: translateY(var(--space-xs)); } }

/* --- Fenster: Formular, Felder, Schritte (Gürkan 07.11.2026) ---------------------
   Ein Formular direkt im Fenster ist ein Raster wie das Fenster selbst. .modal__fields: Abstand zwischen Text und Feldern.
   .modal-step: Fenster in Schritten (Eingabe → „Ist das richtig?“, Bild → Ausschnitt → Rückfrage, QR-Code, Codes);
   nur ein Schritt sichtbar (hidden), Wert zum Prüfen groß (.modal-step__value), zwei gleich breite Knöpfe (.modal-step__tools). */
.modal > form { display: grid; gap: var(--space-sm); }
.modal__fields { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.modal-step { display: grid; gap: var(--space-sm); }
.modal .modal-step__value { overflow-wrap: anywhere; color: var(--text-primary); }
.modal-step__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.modal .auth__qr { justify-self: center; }
/* Warten auf das Gerät (Passkey): großes Symbol und Text mittig, darunter nur „Abbrechen“ */
.passkey-wait { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-lg) 0; text-align: center; }

/* --- Profilbild im Fenster und Ausschnitt wählen ----------------------------------
   Großes Bild mittig mit Ändern und Entfernen (.photo-pick); Ausschnitt in einem Quadrat mit rundem Fenster, außen
   abgedunkelt, verschieben per Ziehen und Pfeiltasten, darunter Zoom (.crop, .crop__zoom). */
.photo-pick { display: grid; justify-items: center; padding: var(--space-lg) 0 var(--space-sm); }
.photo-pick__avatar { --size: var(--avatar-2xl); font-size: var(--type-display-md-size); }
.photo-pick__text { text-align: center; }
.photo-pick__error { justify-content: center; }
.crop { position: relative; justify-self: center; width: min(100%, calc(var(--avatar-2xl) * 2)); aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--bg-muted); cursor: grab; touch-action: none; user-select: none; }
.crop:active { cursor: grabbing; }
.crop:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.crop::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 calc(var(--avatar-2xl) * 2) color-mix(in srgb, var(--bg-canvas) var(--scrim-tint), transparent); pointer-events: none; }
.crop__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop__zoom { width: min(100%, calc(var(--avatar-2xl) * 2)); justify-self: center; }

/* --- Banner (über die ganze Breite, oberhalb der App) --------------------- */
.banner {
  --tone: var(--info);
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs) var(--space-lg);
  min-height: var(--nav-global-height); padding: var(--space-xs) calc(var(--touch-min) + var(--space-lg)) var(--space-xs) var(--space-lg);
  background-color: color-mix(in srgb, var(--tone) var(--status-tint), var(--bg-canvas));
  border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--tone) var(--status-border-tint), transparent);
  text-align: center;
}
.banner--warning { --tone: var(--warning); }
.banner--error { --tone: var(--error); }
.banner > svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--tone); }
.banner p { margin: 0; }
.banner .link { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.banner > .icon-btn { position: absolute; top: 50%; right: var(--space-xs); translate: 0 -50%; }   /* translate statt transform: kollidiert mit keiner transform-Regel */
@media (max-width: 640px) {
  .banner { justify-content: flex-start; align-items: flex-start; text-align: left; padding-block: var(--space-sm); }
  .banner > svg { margin-top: calc((var(--type-body-lh) * var(--type-body-size) - var(--icon-size-md)) / 2); }
  .banner p { flex: 1 1 0; min-width: 0; }
  .banner .link { flex: 0 0 auto; margin-left: calc(var(--icon-size-md) + var(--space-lg)); margin-right: 100%; }   /* eigene Zeile, bündig mit dem Text */
  .banner > .icon-btn { top: var(--space-xs); translate: none; }
}

/* --- Kleinteile: Knopfreihe, Symbol im Text -------------------------------------
   .icon-actions: Icon-Buttons eng nebeneinander (Umbenennen, Löschen), auch als Formular.
   Symbol mitten im Text (Anleitung „Tippe auf [Teilen]“): so groß wie die Schrift, auf der Grundlinie. */
.icon-actions { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.form-row__label .t-caption:has(> .i) { display: block; }
.t-caption > .i, .t-body > .i { display: inline-block; width: 1.15em; height: 1.15em; margin-inline: 0.1em; vertical-align: -0.2em; }

/* --- Laden: Spinner, Skeleton, Fortschritt ----------------------------- */
.spinner {
  display: inline-block; flex: none;
  width: var(--spinner-size); height: var(--spinner-size);
  border: var(--border-width-medium) solid color-mix(in srgb, currentColor var(--spinner-track-tint), transparent);
  border-top-color: currentColor; border-radius: var(--radius-full);
  animation: spin var(--spin-duration) linear infinite;
}
.spinner--lg { --spinner-size: var(--space-xl); }
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { display: block; border-radius: var(--radius-sm); background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), transparent); animation: pulse var(--pulse-duration) var(--ease-standard) infinite; }
.skeleton--text { height: var(--type-body-size); }
.skeleton--short { width: 60%; }
.skeleton--circle { --size: var(--avatar-md); flex: none; width: var(--size); height: var(--size); border-radius: var(--radius-full); }   /* Größe wie .avatar, groß: --size: var(--avatar-lg) */
@keyframes pulse { 50% { opacity: var(--dim-opacity); } }
/* Karte beim Laden: Kreis links, Zeilen rechts */
.skeleton-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); }
.skeleton-card .skeleton--circle { --size: var(--avatar-lg); }
.skeleton-card__lines { display: grid; gap: var(--space-xs); }

.progress { height: var(--progress-height); border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--text-primary) var(--track-tint), transparent); overflow: hidden; }
.progress__bar { height: 100%; width: var(--value, 0%); border-radius: inherit; background-color: var(--accent); transition: width var(--motion-slow) var(--ease-out); }
.progress-meta { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }

/* --- Leerer Zustand ------------------------------------------------------ */
.empty { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-xxl) var(--space-lg); text-align: center; background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); }
/* Graue Scheibe mit Icon: leerer Zustand und Fehlerseite */
:is(.empty__icon, .status-page__icon) { display: grid; place-items: center; width: var(--empty-icon-size); height: var(--empty-icon-size); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), transparent); color: var(--text-secondary); }
.empty__icon { margin-bottom: var(--space-xs); }
:is(.empty__icon, .status-page__icon) svg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.empty__text { max-width: var(--modal-width); color: var(--text-secondary); }
.empty .btn { margin-top: var(--space-sm); }

/* --- Popover ------------------------------------------------------------- */
.popover-wrap { position: relative; display: inline-block; }
.popover {
  position: absolute; top: calc(100% + var(--space-xxs)); left: 0; z-index: var(--z-dropdown);
  display: grid; gap: var(--space-lg); width: min(var(--popover-width), calc(100vw - var(--page-gutter) * 2)); padding: var(--space-lg);
  background-color: var(--bg-card); color: var(--text-primary); text-align: left;
  border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--elevation-2);
}
.popover:not([hidden]) { animation: drop-in var(--motion-duration) var(--ease-out); }
.popover--end { left: auto; right: 0; }
.popover--flip { left: auto; right: 0; }                 /* setzt components.js, wenn das Popover sonst seitlich aus dem Fenster ragt */
.popover--end.popover--flip { left: 0; right: auto; }
.popover--up { top: auto; bottom: calc(100% + var(--space-xxs)); animation-name: drop-up; }
.popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) calc(var(--space-xxs) * -1) 0; }
.popover__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-sm); }   /* Buttons teilen sich die volle Breite: bündig mit den Feldern darüber */
.popover__profile { display: flex; align-items: center; gap: var(--space-sm); }
.popover__profile > span:last-child { display: grid; min-width: 0; }
/* Kontaktkarte: Zeilen mit Icon, Wert und optional Kopieren */
.popover__list { display: grid; margin: calc(var(--space-xs) * -1) calc(var(--space-sm) * -1); padding: 0; list-style: none; }
.popover__list li { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-min); padding: 0 var(--space-sm); }
.popover__list li > svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); }
.popover__list li > :not(svg, .icon-btn) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover__list li > .icon-btn { margin-right: calc((var(--touch-min) - var(--icon-size-md)) / -2); }

/* --- Seitenpanel (Drawer) – auf dem Phone als Bottom Sheet ---------------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(100%, var(--drawer-width)); height: 100%; max-width: 100%; max-height: 100%;
  margin: 0 0 0 auto; padding: 0;
  background-color: var(--bg-card); color: var(--text-primary);
  border: 0; border-left: var(--border-width-thin) solid var(--border-hairline); box-shadow: var(--elevation-4);
  transform: translateX(100%);
}
.drawer, .drawer::backdrop { transition-duration: var(--motion-slow); }
.drawer { flex-direction: column; }   /* auch beim Ausblenden: [open] fällt sofort weg, display bleibt für die Animation stehen */
.drawer[open] { display: flex; }
.drawer__head { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--nav-global-height); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl); border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.drawer__head > :first-child { margin-right: auto; }
.drawer__body { --drawer-pad: var(--space-xl); flex: 1; display: grid; align-content: start; grid-auto-rows: max-content; gap: var(--space-xl); overflow-y: auto; overscroll-behavior: contain; padding: var(--drawer-pad); }
/* Abschnitt zum Lesen unter dem Formular (z. B. Verlauf): Linie über die ganze Breite, Titel links, Link rechts */
.drawer__section { display: grid; gap: var(--space-lg); margin: 0 calc(var(--drawer-pad) * -1); padding: var(--space-xl) var(--drawer-pad) 0; border-top: var(--border-width-thin) solid var(--border-hairline); }
.drawer__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.drawer__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); border-top: var(--border-width-thin) solid var(--border-hairline); }
.drawer__grab { display: none; }
@media (max-width: 640px) {
  .drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: var(--sheet-max-height); margin: auto 0 0; border-left: 0; border-top: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); }
  @starting-style { .drawer[open] { transform: translateY(100%); } }
  .drawer__grab { display: block; flex: none; width: var(--space-xxl); height: var(--space-xxs); margin: var(--space-xs) auto 0; border-radius: var(--radius-pill); background-color: var(--border-hairline); }
  .drawer__head { padding-left: var(--space-lg); }
  .drawer__body { --drawer-pad: var(--space-lg); }
  .drawer__foot { padding: var(--space-sm) var(--space-lg); }
  .drawer__foot .btn { flex: 1; }
}

/* Seitenpanel mit Person: Kopf mit großem Profilbild, Name und E-Mail (Benutzerverwaltung).
   Zeilen mit Knöpfen stehen im schmalen Panel untereinander wie am Phone (Titel, Hinweis, darunter Knöpfe);
   Zeilen mit Wert (Zeilen zum Antippen) bleiben nebeneinander. */
.table__person.drawer-person { gap: var(--space-lg); }   /* stärker als .table__person (steht weiter unten), sonst 12 statt 16 px */
.drawer-person__text { display: grid; gap: var(--space-xxs); min-width: 0; }
.drawer .form-row:not(.row-link):has(.form-row__label .t-caption) { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.drawer .form-row:not(.row-link):has(.form-row__label .t-caption) .form-row__control { justify-content: flex-start; flex-wrap: wrap; }
.drawer .form-row__control:empty { display: none; }

/* --- Tabs & Umschalter --------------------------------------------------- */
/* Tabs: graue Leiste, der gewählte Tab hebt sich als weiße Fläche ab (dunkel: mit Rahmen) */
.tabs {
  display: inline-flex; gap: var(--item-gap); max-width: 100%; padding: var(--tab-bar-pad); overflow-x: auto;
  border-radius: var(--radius-lg); background-color: var(--tab-bar-bg);
}
.tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-sm); cursor: pointer; white-space: nowrap;
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-control); background: none;
  color: var(--text-secondary); font-size: var(--type-body-size); font-weight: var(--font-weight-medium); line-height: var(--type-body-strong-lh);
}
.tab:hover:not(:disabled) { color: var(--text-primary); }
.tabs:not(.tabs--line) .tab:not([aria-selected="true"]):active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.tab[aria-selected="true"] { color: var(--text-primary); background-color: var(--tab-active-bg); border-color: var(--tab-active-border); box-shadow: var(--elevation-tab); }
.tab-panel { padding-top: var(--space-lg); }
/* Variante mit Unterstrich – für Seitenbereiche mit vielen Tabs oder direkt unter einer Kopfzeile */
.tabs--line { display: flex; gap: var(--space-lg); padding: 0; border-radius: 0; background: none; border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.tabs--line .tab { padding: var(--space-sm) 0; border: 0; border-radius: var(--radius-xs); line-height: var(--type-body-lh); }
.tabs--line .tab[aria-selected="true"] { background: none; box-shadow: none; }
.tabs--line .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tab-indicator); border-radius: var(--radius-pill); background-color: var(--accent); }

.segmented { display: inline-flex; gap: var(--item-gap); padding: var(--tab-bar-pad); border-radius: var(--radius-lg); background-color: var(--tab-bar-bg); }
/* Leiste nur so breit wie ihr Inhalt – auch als Kind eines Grids (sonst würde sie gestreckt) */
.tabs:not(.tabs--line), .segmented { justify-self: start; }
.field > .segmented { display: flex; justify-self: stretch; }   /* im Formular so breit wie die Felder, die Knöpfe teilen sich die Breite */
.field > .segmented > .segmented__btn { flex: 1 1 0; }
.segmented__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);   /* Text mittig, auch wenn der Knopf breiter ist (im Formular) */
  padding: 0 var(--space-lg); border: var(--border-width-thin) solid transparent; border-radius: var(--radius-control); background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--text-secondary); font-size: var(--type-body-size); font-weight: var(--font-weight-medium); line-height: var(--type-body-strong-lh);
}
.segmented__btn svg { width: var(--icon-size-md); height: var(--icon-size-md); }
.segmented__btn:hover:not(:disabled) { color: var(--text-primary); }
.segmented__btn:not([aria-pressed="true"]):active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.segmented__btn[aria-pressed="true"] { background-color: var(--tab-active-bg); border-color: var(--tab-active-border); color: var(--text-primary); box-shadow: var(--elevation-tab); }
/* Tabs und Umschalter gleich: Knopf füllt die Leiste auf Feldhöhe (Leiste 36 px wie Felder und Buttons) */
:is(.tab, .segmented__btn) {
  min-height: calc(var(--input-height) - var(--tab-bar-pad) * 2);
  transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

/* --- Menü (⋯) ------------------------------------------------------------ */
.menu-wrap { position: relative; display: inline-block; }
/* Richtung für alle schwebenden Ebenen (Menü, Popover, Kalender): nach unten, nur ohne Platz nach oben;
   seitlich bündig mit der Kante auf der Seite des Auslösers (linke Fensterhälfte links, rechte rechts), setzt components.js */
.menu {
  position: absolute; top: calc(100% + var(--space-xxs)); left: 0; z-index: var(--z-dropdown);
  display: grid; gap: var(--item-gap); min-width: var(--menu-min-width); width: max-content; max-width: calc(100vw - 2 * var(--space-lg));   /* so breit wie der längste Eintrag, nie Umbruch */
  padding: var(--space-xxs); margin: 0; list-style: none;
  background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}
.menu:not([hidden]) { animation: drop-in var(--motion-duration) var(--ease-out); }
.menu--up { top: auto; bottom: calc(100% + var(--space-xxs)); animation-name: drop-up; }
.menu--end { left: auto; right: 0; }
.menu--flip { left: auto; right: 0; }                   /* setzt components.js, wenn das Menü sonst seitlich aus dem Fenster ragt */
.menu--end.menu--flip { left: 0; right: auto; }
.menu__item {
  display: flex; align-items: center; gap: var(--space-xs); width: 100%;
  min-height: var(--item-height); padding: 0 var(--space-xs);
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left;
  color: var(--text-primary); font-size: var(--type-body-size); line-height: var(--type-body-lh); white-space: nowrap;
}
.menu__item svg { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); }
/* Hover und Tastatur-Fokus: graue Fläche, sie ist hier der einzige Fokus-Hinweis; ohne Übergang: Pfeiltasten springen sofort */
.menu__item:hover, .menu__item:focus-visible { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); outline: none; }
.menu__item--danger, .menu__item--danger svg { color: var(--error); }
.menu__item--danger:hover, .menu__item--danger:focus-visible { background-color: color-mix(in srgb, var(--error) var(--status-tint), transparent); }
.menu__check { margin-left: auto; visibility: hidden; }
.menu__item svg.menu__check { color: var(--accent); }
.menu__item[aria-checked="true"] .menu__check { visibility: visible; }
.menu__sep { height: var(--border-width-thin); margin: 0 calc(var(--space-xxs) * -1);   /* Abstand oben/unten kommt aus --item-gap */ background-color: var(--border-hairline); }
/* Untermenü (Eintrag mit aria-controls → .menu--sub): rechts neben dem Eintrag, in der rechten Fensterhälfte links (.menu--sub-start); passt es nicht, andere Seite */
.menu > li { position: relative; }
.menu__chev { margin-left: auto; }
.menu__item svg.menu__chev { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.menu__item[aria-expanded="true"] { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.menu--sub { top: calc((var(--space-xxs) + var(--border-width-thin)) * -1); right: auto; left: calc(100% + var(--space-xs)); min-width: calc(var(--menu-min-width) * 0.9); }
.menu--sub.menu--sub-start, .menu--sub.menu--sub-flip { left: auto; right: calc(100% + var(--space-xs)); }
.menu--sub.menu--sub-start.menu--sub-flip { right: auto; left: calc(100% + var(--space-xs)); }
.menu__foot { margin: 0 calc(var(--space-xxs) * -1); padding: var(--item-gap) var(--space-xxs) 0; border-top: var(--border-width-thin) solid var(--border-hairline); }   /* Fußzeile im Menü, z. B. „Filter zurücksetzen“ */
/* Suche oben im Menü (z. B. „Filter hinzufügen …“) mit Tastenkürzel rechts */
.menu__search { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-xxs) 0 var(--space-xs); }
.menu__search input { flex: 1; min-width: 0; height: var(--item-height); padding: 0; border: 0; background: transparent; font-size: var(--input-font-size); }
.menu__search input:focus { outline: none; }
.menu__search input::placeholder { color: var(--text-placeholder); opacity: 1; }
.menu--filter { min-width: calc(var(--menu-min-width) * 1.2); }

/* --- Kontextmenü (Rechtsklick) -------------------------------------------- */
.menu--context { position: fixed; top: 0; right: auto; left: 0; }

/* --- Breadcrumbs & Seitenzahlen ------------------------------------------ */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-secondary); }
.breadcrumbs li svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-xs); text-underline-offset: var(--link-underline-offset); }
.breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
/* Unter einer Tabelle (auch mit leerem Zustand dazwischen) Abstand wie die Toolbar darüber */
.table-wrap ~ .pagination { margin-top: var(--space-lg); }
.pagination__pages { display: flex; align-items: center; gap: var(--space-xxs); }
.page-btn {
  display: inline-grid; place-items: center; min-width: var(--touch-min); height: var(--touch-min); padding: 0 var(--space-xs);
  border: 0; border-radius: var(--radius-control); background: transparent; cursor: pointer;
  color: var(--text-primary); font-size: var(--type-body-size); font-variant-numeric: tabular-nums;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.page-btn svg { width: var(--icon-size-md); height: var(--icon-size-md); }
.page-btn:hover { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.page-btn:active { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.page-btn[aria-current="page"] { background-color: var(--button-bg); color: var(--button-fg); font-weight: var(--font-weight-semibold); }
.page-btn:disabled { color: var(--disabled-text); background: transparent; cursor: not-allowed; }

/* --- Schrittfolge -------------------------------------------------------- */
.steps { display: flex; margin: 0; padding: 0; list-style: none; }
.steps__item { position: relative; flex: 1; display: grid; justify-items: center; align-content: start; gap: var(--space-xs); text-align: center; color: var(--text-secondary); }
.steps__item::before { content: ""; position: absolute; top: calc(var(--step-size) / 2 - var(--border-width-medium) / 2); left: calc(-50% + var(--step-size) / 2 + var(--space-xs)); right: calc(50% + var(--step-size) / 2 + var(--space-xs)); height: var(--border-width-medium); border-radius: var(--radius-pill); background-color: var(--border-hairline); transition: background-color var(--motion-fast) var(--ease-standard); }
.steps__item:first-child::before { display: none; }
.steps__item.is-done::before, .steps__item[aria-current="step"]::before { background-color: var(--button-bg); }
.steps__dot {
  display: grid; place-items: center; width: var(--step-size); height: var(--step-size); border-radius: var(--radius-full);
  border: var(--border-width-thin) solid var(--border-field); background-color: var(--bg-card);
  font-size: var(--type-caption-size); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.steps__dot svg { display: none; width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: var(--icon-stroke-bold); }
.steps__item.is-done .steps__dot svg { display: block; }
.steps__item.is-done .steps__num { display: none; }
.steps__item[aria-current="step"], .steps__item.is-done { color: var(--text-primary); }
.steps__item[aria-current="step"] .steps__dot { border: var(--border-width-medium) solid var(--button-bg); color: var(--accent); }
.steps__item.is-done .steps__dot { border-color: var(--button-bg); background-color: var(--button-bg); color: var(--button-fg); }
.steps__text { display: grid; gap: var(--space-xxs); }
.steps__text .t-caption { color: var(--text-secondary); }
.steps--vertical { flex-direction: column; gap: var(--space-lg); }
.steps--vertical .steps__item { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: var(--space-sm); text-align: left; }
/* untereinander: Linie läuft vom eigenen Kreis zum nächsten, blau sobald der Schritt erledigt ist */
.steps--vertical .steps__item::before { display: block; top: calc(var(--step-size) + var(--space-xxs)); bottom: calc(var(--space-lg) * -1 + var(--space-xxs)); left: calc(var(--step-size) / 2 - var(--border-width-medium) / 2); right: auto; width: var(--border-width-medium); height: auto; }
.steps--vertical .steps__item:last-child::before { display: none; }
.steps--vertical .steps__item[aria-current="step"]::before { background-color: var(--border-hairline); }
.steps--vertical .steps__item.is-done::before { background-color: var(--button-bg); }
.steps--vertical .steps__text { padding-top: calc((var(--step-size) - var(--type-body-strong-size) * var(--type-body-strong-lh)) / 2); }
@media (max-width: 640px) { .steps:not(.steps--vertical) .steps__text .t-caption { display: none; } }

/* --- Tastenkürzel & Befehlspalette (⌘K / Strg+K) -------------------------- */
.kbd {
  display: inline-grid; place-items: center; min-width: var(--kbd-size); height: var(--kbd-size); padding: 0 var(--space-xxs);
  border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-xs);
  background-color: color-mix(in srgb, var(--text-primary) var(--subtle-tint), var(--bg-card)); color: var(--text-secondary);
  font-family: var(--font-text); font-size: var(--type-fine-print-size); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap;
}
.kbd .i { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: var(--icon-stroke-bold); }   /* Pfeile und Enter als Icon (↑ ↓ ↵ kämen aus einer Ersatzschrift) */
.kbd-group { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.command {
  width: min(calc(100% - var(--page-gutter) * 2), var(--command-width)); max-height: calc(100% - var(--command-offset-top) * 2);
  margin: var(--command-offset-top) auto auto; padding: 0; overflow: hidden;
  background-color: var(--bg-card); color: var(--text-primary);
  border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--elevation-4);
}
.command { flex-direction: column; }   /* auch beim Ausblenden, sonst rutscht der Inhalt nebeneinander */
.command[open] { display: flex; }
.command__search { display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-sm) 0 var(--space-lg); border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.command__search > svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-placeholder); }
.command__input { flex: 1; min-width: 0; height: calc(var(--nav-global-height) + var(--space-xs)); padding: 0; border: 0; background: transparent; font-size: var(--type-lead-airy-size); }
.command__input:focus { outline: none; }
.command__input::placeholder { color: var(--text-placeholder); opacity: 1; }
.command__list { display: grid; gap: var(--item-gap); align-content: start; max-height: var(--command-list-height); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-xs); scroll-padding: var(--space-xs); }   /* scroll-padding: Pfeiltasten lassen Abstand zum Rand */
.command__list > [role="group"] { display: grid; gap: var(--item-gap); }
.command__group { padding: var(--space-xxs) var(--space-sm) 0; color: var(--text-secondary); }   /* zusammen mit --item-gap wie vorher */
.command__item { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-min); padding: 0 var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; }
.command__item > svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); }
.command__item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command__item.is-active { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }   /* wie die Auswahl im Dropdown */
.command__item.is-active > svg { color: var(--text-primary); }
.command__empty { padding: var(--space-xl) var(--space-lg); text-align: center; color: var(--text-secondary); }
.command__foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding: var(--space-sm) var(--space-lg); border-top: var(--border-width-thin) solid var(--border-hairline); color: var(--text-secondary); }
.command__foot > span { display: inline-flex; align-items: center; gap: var(--space-xs); }
@media (pointer: coarse) { .command__foot { display: none; } }

/* --- Suche & Filter ------------------------------------------------------ */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.toolbar__end { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
/* Phone: Knöpfe mit .btn--shrink zeigen nur ihr Symbol (quadratisch wie ein Icon-Button), die Beschriftung bleibt für
   Screenreader; die Suche teilt sich die Zeile mit ihnen statt umzubrechen (Gürkan, 08.11.2026) */
@media (max-width: 640px) {
  .btn--shrink { aspect-ratio: 1; padding-inline: 0; gap: 0; }
  .btn--shrink > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toolbar > .search { flex-basis: 0; min-width: calc(var(--card-min) / 2); }
}
.search { position: relative; flex: 1 1 var(--card-min); max-width: var(--modal-width); }
.search > svg { position: absolute; left: var(--input-pad-x); top: 50%; transform: translateY(-50%); width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-placeholder); pointer-events: none; }
.search .input { padding-left: calc(var(--input-pad-x) + var(--icon-size-md) + var(--space-xs)); }
/* Suche ohne Rahmen in grauer Fläche – nur in Leisten, wo Icon und Platzhalter das Feld erkennbar machen */
.search--soft .input { background-color: var(--bg-muted); border-color: transparent; box-shadow: none; }
.search--soft .input:hover { border-color: var(--border-hairline); }
/* Aktiv schlicht: Fläche bleibt grau, nur ein feiner grauer Rand – kein blauer Rahmen, kein Saum */
.search--soft .input:focus { background-color: var(--bg-muted); border-color: var(--border-field-hover); box-shadow: none; }
.icon-btn--soft { background-color: var(--bg-muted); }
/* Wie .btn--secondary: neben Secondary-Buttons (z. B. Filter neben „Exportieren“), gleiche Fläche in hell und dunkel */
.icon-btn--secondary { background-color: var(--outline-bg); }
.icon-btn--secondary:hover:not(:disabled), .icon-btn--secondary[aria-expanded="true"]:not(:disabled) { background-color: var(--outline-hover); }
.icon-btn--secondary:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), var(--outline-hover)); }
.icon-btn--soft:hover:not(:disabled), .icon-btn--soft[aria-expanded="true"]:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), var(--bg-muted)); }
.icon-btn--soft:active:not(:disabled) { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), var(--bg-muted)); }

/* --- Liste ↔ Kacheln ----------------------------------------------------- */
.entries { display: grid; background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); }
.entry {
  --tone: var(--info);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center;
  padding: var(--space-lg) var(--space-lg); border-bottom: var(--border-width-thin) solid var(--border-hairline);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.entry:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.entry:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.entry:hover { background-color: color-mix(in srgb, var(--text-primary) var(--subtle-tint), transparent); }
.entry--success { --tone: var(--success); }
.entry--warning { --tone: var(--warning); }
.entry--error { --tone: var(--error); }
/* Getönte Icon-Kachel: Eintrag, Modul, Feature (nicht klickbar, auf Touch gleich groß) */
:is(.entry__icon, .module-card__icon, .feature__icon) { display: grid; place-items: center; flex: none; width: var(--icon-tile-size); height: var(--icon-tile-size); border-radius: var(--radius-md); }
.entry__icon { background-color: color-mix(in srgb, var(--tone) var(--status-tint), var(--bg-card)); color: var(--tone); }
.entry__body { display: grid; gap: var(--space-xxs); min-width: 0; }
.entry__meta { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-lg); color: var(--text-secondary); }
.entry__meta span { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.entry__meta svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.entry__side { display: flex; align-items: center; gap: var(--space-sm); }
.entries[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--grid-gap); background: none; border: 0; }
.entries[data-view="grid"] .entry { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--space-lg); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); background-color: var(--bg-card); }
.entries[data-view="grid"] .entry__side { grid-column: 1 / -1; justify-content: space-between; }
.entries-empty { margin-top: var(--space-lg); }
/* Phone: Status und Menü in eigener Zeile */
@media (max-width: 640px) {
  .entries:not([data-view="grid"]) .entry { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 0; }
  .entries:not([data-view="grid"]) .entry__side { grid-column: 2; justify-content: space-between; margin-top: calc(var(--space-xxs) * -1); }
}

/* --- Kennzahlen ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--stat-min), 1fr)); gap: var(--grid-gap); }
.stat { display: grid; align-content: start; gap: var(--space-xxs); padding: var(--space-xl); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.stat__value { font-variant-numeric: tabular-nums; }
.trend { --tone: var(--text-secondary); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs); color: var(--tone); }
.trend svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.trend--good { --tone: var(--success); }
.trend--bad { --tone: var(--error); }
@media (max-width: 640px) { .stat .trend > .muted { flex-basis: 100%; } }   /* Phone: Zusatz („ggü. Vormonat“) immer in eigener Zeile, alle Kacheln gleich */

/* --- Diagramme ------------------------------------------------------------
   Gerendert von components.js aus [data-chart] + JSON. Farben: --chart-1 … --chart-8 (tokens.css, geprüft
   auf Farbsehschwäche). Text trägt nie die Serienfarbe; Linien 2 px, Balken max. 24 px, 2 px Lücken. */
.chart { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); margin: 0; background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xxs) var(--space-lg); }
.chart__title { display: grid; gap: var(--space-xxs); }
.chart__title .t-caption { color: var(--text-secondary); }
.chart__plot { position: relative; height: var(--chart-height); }
.chart--donut .chart__plot { height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-lg) var(--space-xl); }
.chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart--donut .chart__plot svg { width: var(--donut-size); height: var(--donut-size); }
.chart__plot svg:focus-visible { border-radius: var(--radius-xs); }
.chart__grid { stroke: var(--border-hairline); stroke-width: var(--border-width-thin); }
.chart__baseline { stroke: var(--border-field); stroke-width: var(--border-width-thin); }
.chart__tick { fill: var(--text-secondary); font-size: var(--type-fine-print-size); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: var(--border-width-medium); stroke-linecap: round; stroke-linejoin: round; }
.chart__area { opacity: var(--chart-area-opacity); }
.chart__dot { stroke: var(--bg-card); stroke-width: var(--border-width-medium); }
.chart__cross { stroke: var(--text-secondary); stroke-width: var(--border-width-thin); }
.chart__bar, .chart__slice { transition: opacity var(--motion-fast) var(--ease-standard); }
.chart__slice { stroke: var(--bg-card); stroke-width: var(--border-width-medium); }
.chart__plot.is-hovering .chart__bar:not(.is-active), .chart__plot.is-hovering .chart__slice:not(.is-active) { opacity: var(--dim-opacity); }
.chart__center { fill: var(--text-primary); font-size: var(--type-display-md-size); font-weight: var(--font-weight-semibold); }
.chart__center-label { fill: var(--text-secondary); font-size: var(--type-caption-size); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-lg); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); }
.chart__legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.chart--donut .chart__legend { flex: 1 1 var(--choice-card-min); display: grid; gap: var(--space-xs); }
.chart--donut .chart__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.chart__legend .num { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__key { flex: none; width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-xs); background-color: var(--key); }
.chart__key--line { height: var(--border-width-medium); border-radius: var(--radius-pill); }
.chart__tip {
  position: absolute; top: 0; left: 0; z-index: var(--z-tooltip); display: grid; gap: var(--space-xxs); min-width: calc(var(--space-xxl) * 4);
  padding: var(--space-xs) var(--space-sm); pointer-events: none;
  background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-sm); box-shadow: var(--elevation-2);
  font-size: var(--type-caption-size);
}
.chart__tip-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); color: var(--text-secondary); }
.chart__tip-row strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.chart__table summary { width: fit-content; color: var(--accent); cursor: pointer; border-radius: var(--radius-xs); }
.chart__table .table-wrap { margin-top: var(--space-sm); }
.chart__table .table { min-width: 0; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--choice-card-min) * 1.5), 1fr)); gap: var(--grid-gap); }
.chart-grid__wide { grid-column: 1 / -1; }

/* --- Tabelle ----------------------------------------------------------- */
.table-wrap { position: relative; overflow-x: auto; background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; min-width: calc(var(--container-text) * 0.7); }
.table th, .table td { padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: var(--border-width-thin) solid var(--border-hairline); }
/* Kopf: graue Fläche, 40 px hoch, Text in Textfarbe mit 500 */
.table th { height: var(--table-head-height); padding-block: 0; background-color: var(--bg-muted); color: var(--text-primary); font-weight: var(--font-weight-medium); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--motion-fast) var(--ease-standard); }
.table tbody tr:hover { background-color: color-mix(in srgb, var(--bg-muted) var(--surface-hover-tint), transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__name { display: grid; }
.table .table__actions { width: 1%; text-align: right; }   /* Spalte nur so breit wie die Buttons, bündig am rechten Rand */
.table__actions .icon-btn + .icon-btn { margin-left: 0; }   /* Knöpfe direkt nebeneinander: Symbole näher beisammen, Trefferfläche bleibt 36 px (Gürkan, 09.11.2026) */
/* Phone/Tablet: Aktionen bleiben rechts stehen, während die Tabelle seitlich scrollt */
@media (max-width: 833px) {
  .table .table__actions, .table:has(.table__actions) thead th:last-child { position: sticky; right: 0; background-color: var(--bg-card); box-shadow: inset var(--border-width-thin) 0 0 var(--border-hairline); }
  .table:has(.table__actions) thead th:last-child { background-color: var(--bg-muted); }
}

/* --- Tabelle als Liste am Phone (.table--stack) ----------------------------
   Statt seitlich zu scrollen wird jede Zeile ein Block: erste Zelle oben (z. B. Person oder Ereignis), Aktionen rechts
   daneben, alle anderen Zellen darunter nebeneinander. td[data-label] zeigt am Phone seine Spaltenüberschrift davor
   („Letzte Anmeldung: Gestern, 18:40“), wo der Wert allein nicht klar ist. Nicht für Tabellen mit Auswahl (Gürkan, 08.11.2026). */
@media (max-width: 640px) {
  .table--stack { min-width: 0; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stack tbody { display: block; }
  .table--stack tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-sm); padding: var(--space-sm); border-bottom: var(--border-width-thin) solid var(--border-hairline); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody tr::after { content: ""; order: 2; flex-basis: 100%; margin-top: calc(var(--space-xxs) * -1); }   /* Zeilenumbruch nach erster Zelle und Aktionen (ohne doppelten Abstand) */
  .table--stack td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; order: 3; }
  .table--stack td:first-child { flex: 1 1 0; order: 0; }
  .table--stack td:first-child:last-child { flex-basis: 100%; }
  .table--stack .table__actions, .table--stack:has(.table__actions) thead th:last-child { order: 1; width: auto; position: static; background: none; box-shadow: none; }
  .table--stack td[data-label]::before { content: attr(data-label) ": "; }
  /* .table--stack-lines: jede weitere Zelle in eigener Zeile (Benutzer: E-Mail, Rolle, Status, Letzte Anmeldung untereinander);
     beginnt die Zeile mit einer Person, stehen die Zeilen unter dem Namen statt unter dem Bild (Gürkan, 08.11.2026) */
  .table--stack-lines td:not(:first-child):not(.table__actions):not(.table__inline) { flex-basis: 100%; }
  /* .table__inline: bleibt in der Zeile der Zelle davor (E-Mail und Rolle); .table__hide-phone: fällt am Phone weg (Status „Aktiv“) */
  .table--stack .table__hide-phone { display: none; }
  /* eingerückt ist die ganze Zeile, nur die erste Zelle mit dem Bild steht davor: so bleibt auch Umgebrochenes unter dem Namen */
  .table--stack-lines tr:has(> td:first-child > .table__person) { padding-left: calc(var(--space-sm) + var(--avatar-md) + var(--space-sm)); }
  .table--stack-lines tr:has(> td:first-child > .table__person) > td:first-child { margin-left: calc((var(--avatar-md) + var(--space-sm)) * -1); }
  .table--stack-lines tr:has(> td:first-child > .table__person)::after { flex-basis: 200%; }   /* Umbruch nie in der ersten Zeile, auch ohne Knöpfe (zurückgezogene Zelle ließe sonst Platz) */
}

/* --- Tabelle: Sortieren -------------------------------------------------- */
.th-sort { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-xs); }
.th-sort svg { width: var(--icon-size-sm); height: var(--icon-size-sm); opacity: var(--dim-opacity); }
.th-sort:hover { color: var(--text-primary); }
.th-sort:hover svg, th[aria-sort] .th-sort svg { opacity: 1; }
th[aria-sort] .th-sort { color: var(--text-primary); }
.num .th-sort { flex-direction: row-reverse; }

/* --- Tabelle: Auswahl, Sammelaktionen, Laden, leer ------------------------ */
.table .table__select { width: 1%; padding-right: 0; }
.table__select .check { min-height: 0; }
.table tbody tr.is-selected, .table tbody tr.is-selected:hover { background-color: color-mix(in srgb, var(--accent) var(--status-tint), transparent); }
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card));
  border: var(--border-width-thin) solid color-mix(in srgb, var(--accent) var(--status-border-tint), transparent); border-radius: var(--radius-lg);
}
.bulk-bar:not([hidden]) { animation: drop-in var(--motion-duration) var(--ease-out); }
.bulk-bar__count { margin-right: auto; font-variant-numeric: tabular-nums; }
.table td.table__empty-cell { padding: 0; white-space: normal; }
.table tbody tr:has(.table__empty-cell):hover, .table tbody[aria-busy="true"] tr:hover { background-color: transparent; }
.empty--plain { border: 0; border-radius: 0; background: none; }
/* Feste Breiten wie typischer Inhalt: Spalten stehen beim Laden wie mit Daten. Skeleton füllt dieselbe Zeilenhöhe wie der echte Text: Laden-Zeilen sind so hoch wie die Daten-Zeilen */
.table .skeleton--text { width: calc(var(--space-xxl) * 2.75); max-width: 100%; margin-block: calc((var(--type-body-lh) * var(--type-body-size) - var(--type-body-size)) / 2); }
.table .skeleton--short { width: calc(var(--space-xxl) * 1.75); }
.table .num .skeleton { width: calc(var(--space-xxl) * 2); margin-left: auto; }
.table__name .skeleton { width: calc(var(--space-xxl) * 3); max-width: 100%; }
.table__name .skeleton--text:first-child { margin-block: calc((var(--type-body-strong-lh) * var(--type-body-strong-size) - var(--type-body-size)) / 2); }
.table .skeleton--caption { height: var(--type-caption-size); margin-block: calc((var(--type-caption-lh) * var(--type-caption-size) - var(--type-caption-size)) / 2); }
.table__name .skeleton--caption { width: calc(var(--space-xxl) * 3.5); }
/* Laden: Aktionen-Spalte so breit wie zwei Icon-Buttons halten, sonst verschieben sich die Spalten beim Wechsel auf Daten */
.table [aria-busy="true"] .table__actions::before { content: ""; display: inline-block; width: calc(var(--touch-min) * 2); }

/* --- Details (Schlüssel / Wert) ------------------------------------------ */
.desc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin: 0; background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); padding: 0 var(--space-xl); }
.desc dt, .desc dd { margin: 0; padding: var(--space-sm) 0; border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.desc dt { color: var(--text-secondary); }
.desc dt:last-of-type, .desc dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  .desc { grid-template-columns: minmax(0, 1fr); }
  .desc dt { border-bottom: 0; padding-bottom: 0; }
}

/* --- Aktivität (Verlauf) ------------------------------------------------- */
.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline__item { --tone: var(--info); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); padding-bottom: var(--space-lg); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; top: var(--space-xl); bottom: 0; left: calc(var(--space-xl) / 2); width: var(--border-width-thin); background-color: var(--border-hairline); }
.timeline__item:last-child::before { display: none; }
.timeline__item--success { --tone: var(--success); }
.timeline__item--warning { --tone: var(--warning); }
.timeline__item--error { --tone: var(--error); }
.timeline__dot { display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--tone) var(--status-tint), var(--bg-card)); color: var(--tone); }
.timeline__dot svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.timeline__body { display: grid; gap: var(--space-xxs); padding-top: var(--space-xxs); }

/* --- App-Logo (Selfhosted-Apps, assets/apps/) -----------------------------
   Logo auf weißer Kachel – in hell und dunkel gleich, weil die Logos für hellen Grund gemacht sind. */
/* grid-template: Zeile fest auf die Kachel, sonst wachsen hohe Logos (MinIO) heraus */
.app-logo { display: inline-grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: none; width: var(--app-logo-size); height: var(--app-logo-size); padding: calc(var(--app-logo-size) / 6); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-md); background-color: var(--color-canvas); }
.app-logo img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }

/* --- Aufklappbarer Bereich (natives <details>) -----------------------------
   Karte mit Titel, Beschreibung und Pfeil; z. B. „Erweiterte Einstellungen“. Mehrere Fragen untereinander: .accordion. */
.collapsible { background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); interpolate-size: allow-keywords; }
.collapsible > summary { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); cursor: pointer; list-style: none; border-radius: inherit; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.collapsible__title { display: grid; gap: var(--space-xxs); flex: 1; min-width: 0; }
.collapsible__title .t-caption { color: var(--text-secondary); font-size: var(--type-body-size); }
.collapsible > summary > svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); transition: transform var(--motion-duration) var(--ease-standard); }
.collapsible[open] > summary > svg { transform: rotate(180deg); }
.collapsible__body { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl) var(--space-xl); border-top: var(--border-width-thin) solid var(--border-hairline); }
.collapsible::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-duration) var(--ease-standard), content-visibility var(--motion-duration) allow-discrete; }
.collapsible[open]::details-content { block-size: auto; }

/* --- Akkordeon (natives <details>) --------------------------------------- */
.accordion { background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); padding: 0 var(--space-lg); interpolate-size: allow-keywords; }
.accordion details { border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: calc(var(--touch-min) + var(--space-lg)); cursor: pointer; list-style: none; border-radius: var(--radius-xs); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); transition: transform var(--motion-duration) var(--ease-standard); }
.accordion details[open] summary svg { transform: rotate(180deg); }
.accordion__body { padding-bottom: var(--space-lg); color: var(--text-secondary); }
/* weiches Auf- und Zuklappen (Browser ohne Unterstützung klappen sofort) */
.accordion details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-duration) var(--ease-standard), content-visibility var(--motion-duration) allow-discrete; }
.accordion details[open]::details-content { block-size: auto; }

/* --- Karte --------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-xs);
  background-color: var(--bg-card); color: var(--text-primary);
  border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card);
  padding: var(--space-xl); text-decoration: none; box-shadow: var(--elevation-card);
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
/* Klickbare Karte: bei Hover nur die Fläche einen Hauch grauer, kein Schatten-Sprung */
a.card:hover, button.card:hover { background-color: color-mix(in srgb, var(--bg-muted) var(--surface-hover-tint), var(--bg-card)); }
.card:hover .card__cta { text-decoration: underline; }
a.card:active, button.card:active { background-color: var(--bg-muted); }
.card__media { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background-color: var(--render-stage); margin-bottom: var(--space-sm); }
.card__render { width: var(--render-size); aspect-ratio: 1 / 1; border-radius: var(--radius-full); background-color: var(--render-fill); box-shadow: var(--shadow-image); }
.card__cta { color: var(--accent); text-underline-offset: var(--link-underline-offset); }

/* --- Muster: App-Layout, Einstellungen, Gefahrenbereich ------------------ */
.app-shell { --sidebar-size: var(--sidebar-width); display: grid; grid-template-columns: var(--sidebar-size) minmax(0, 1fr); overflow: hidden; background-color: var(--bg-canvas); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-lg); position: relative; }
.app-shell__sidebar { position: relative; display: flex; flex-direction: column; gap: var(--sidebar-gap); padding: var(--sidebar-pad-block) var(--sidebar-pad-inline); background-color: var(--sidebar-bg); color: var(--sidebar-fg); border-right: var(--border-width-thin) solid var(--sidebar-border); }
.app-shell__top { display: flex; align-items: center; gap: var(--space-xxs); }
.app-shell__top .sidebar__brand { margin-right: auto; padding-inline: var(--space-xs); }
.app-shell__nav, .app-shell__nav .nav-group__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--item-gap); }
.app-shell__foot { margin-top: auto; }
.app-shell__main { display: grid; align-content: start; min-width: 0; }
.app-shell__bar { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--nav-global-height); padding: 0 var(--space-lg); border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.app-shell__actions { display: flex; align-items: center; gap: var(--space-xxs); margin-left: auto; }   /* rechts in der Kopfleiste */
.app-shell__content { display: grid; align-content: start; gap: var(--space-xl); padding: var(--space-xl) var(--space-lg); min-width: 0; }
.app-shell__content > .head { margin-bottom: 0; }   /* Abstand kommt vom Raster */
.app-shell__content > * { min-width: 0; }   /* breite Tabellen scrollen in .table-wrap, statt die Seite zu verbreitern */

.settings { display: grid; grid-template-columns: var(--settings-nav-width) minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg); }
.app-shell__content > .settings { padding: 0; }   /* der Inhalt der App hat schon Abstand */
.settings__nav { display: grid; align-content: start; gap: var(--space-xxs); }
.settings__nav .sidebar__label { margin: var(--space-sm) 0 var(--space-xxs); }
.settings__nav .sidebar__label:first-child { margin-top: 0; }
.settings__content { display: grid; gap: var(--space-xl); align-content: start; min-width: 0; }
.settings__content > * { min-width: 0; }   /* breite Tabellen scrollen in .table-wrap, statt den Inhalt über den Rand zu drücken */
.settings__section { display: grid; gap: var(--space-sm); }

.form-rows { background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-xl); border-bottom: var(--border-width-thin) solid var(--border-hairline); }
.form-rows > .form-row:not(:has(~ .form-row:not([hidden]))) { border-bottom: 0; }   /* letzte sichtbare Zeile, auch vor versteckten */
.form-row__label { display: grid; gap: var(--space-xxs); min-width: 0; overflow-wrap: anywhere; }   /* lange Wörter (E-Mail) brechen um statt in den Knopf daneben zu laufen */
.form-row__label .t-body-strong { font-weight: var(--font-weight-medium); }
.form-row__label .t-caption, .danger-zone__text .t-caption { font-size: var(--type-body-size); line-height: var(--type-body-strong-lh); }
.form-row__label span:last-child:not(:first-child) { color: var(--text-secondary); }
.form-row__control { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
.form-row__control > .input-affix { width: 100%; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-lg); }

.danger-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); border: var(--border-width-thin) solid color-mix(in srgb, var(--error) var(--status-border-tint), transparent); border-radius: var(--radius-card); background-color: var(--bg-card); box-shadow: var(--elevation-card); }
.danger-zone__text { display: grid; gap: var(--space-xxs); }
.danger-zone__text span:last-child { color: var(--text-secondary); }

@media (max-width: 734px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings__nav { display: flex; flex-wrap: wrap; }
  .settings__nav .sidebar__label { display: none; }
  .settings__nav .sidebar__item { width: auto; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .form-row__control { justify-content: flex-start; }
}

/* --- Einstellungen wie das Google-Konto (Gürkan 07.11.2026) ------------------------
   Seitenkopf mit Zurück-Link und Symbol (.settings-head, .back-link), Zeilen zum Antippen (.row-link: ganze Zeile ist Link
   oder Knopf, Wert rechts grau mit „…“, Pfeil; .row-link--more für „Alle … ansehen“), Profilbild in der Zeile
   (.avatar--row), Symbol in runder Fläche (.tile-icon, --lg im Kopf einer Detailseite), Zeile mit Symbol (.activity),
   einklappbare Abschnitte (.fold, Zustand merkt die App; beim Laden ohne Bewegung), Übersicht mit Begrüßung
   (.welcome) und Karten 2 × 2 (.overview), Filterleiste (.activity-tools). */
.settings-head { display: flex; align-items: center; gap: var(--space-lg); }
.settings-head__text { display: grid; gap: var(--space-xxs); min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-xxs); justify-self: start; margin-bottom: calc(var(--space-sm) * -1); }
.settings__content > .back-link + .settings-head { margin-top: 0; }
.form-rows--links { overflow: hidden; }
.row-link { width: 100%; border: 0; border-bottom: var(--border-width-thin) solid var(--border-hairline); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); }
.row-link:last-child { border-bottom: 0; }
.row-link:hover { background-color: color-mix(in srgb, var(--bg-muted) var(--surface-hover-tint), var(--bg-card)); }
.row-link:active { background-color: var(--bg-muted); }
.row-link:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: calc(var(--focus-ring-width) * -1); }
.row-link__value { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); min-width: 0; color: var(--text-secondary); }
.row-link__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link--more { display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 734px) {
  .row-link:not(.activity) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .row-link .row-link__value { justify-content: flex-end; }
  /* Zeile nur mit Wert, Badge oder Schalter rechts: auch auf dem Phone nebeneinander wie die Zeilen zum Antippen */
  .form-row:has(> .form-row__control > :is(.row-link__text, .badge, .switch, .icon-btn, .icon-actions):only-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .form-row:has(> .form-row__control > :is(.row-link__text, .badge, .switch, .icon-btn, .icon-actions):only-child) > .form-row__control { justify-content: flex-end; }
  /* nur ein Symbol-Knopf (z. B. Löschen eines Eintrags): rechts in der Zeile statt darunter (Gürkan, 09.11.2026) */
  .form-row:has(> .form-row__control > :is(.icon-btn, .icon-actions):only-child) { grid-template-columns: minmax(0, 1fr) auto; }
}
.avatar--row { --size: var(--touch-min); font-size: var(--type-caption-size); }
.tile-icon { display: inline-grid; place-items: center; flex: none; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full); background-color: var(--bg-muted); color: var(--text-secondary); }
.tile-icon--lg { width: calc(var(--touch-min) * 1.4); height: calc(var(--touch-min) * 1.4); }
.tile-icon--lg .i { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.activity { grid-template-columns: minmax(0, 1fr) auto; }
.activity__main { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
@media (max-width: 734px) { .activity .tile-icon { display: none; } }
.fold { interpolate-size: allow-keywords; }
.fold__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; list-style: none; border-radius: var(--radius-xs); }
.fold__head::-webkit-details-marker { display: none; }
.fold__head:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--space-xxs); }
.fold__head > .i { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--text-secondary); transition: transform var(--motion-duration) var(--ease-standard); }
.fold[open] > .fold__head > .i { transform: rotate(180deg); }
.fold__head:hover h2 { text-decoration: underline; text-underline-offset: var(--link-underline-offset); }
.fold__title { display: grid; gap: var(--space-xxs); min-width: 0; }
.fold__title h2 .badge { margin-left: var(--space-xs); vertical-align: middle; }
.fold::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-duration) var(--ease-standard), content-visibility var(--motion-duration) allow-discrete; }
.fold[open]::details-content { block-size: auto; }
.fold__body { display: grid; gap: var(--space-sm); padding-top: var(--space-sm); }
@media (prefers-reduced-motion: reduce) { .fold::details-content, .fold__head > .i { transition: none; } }
.welcome { display: grid; justify-items: center; gap: var(--space-xxs); padding: var(--space-lg) 0; text-align: center; }
.welcome__avatar { --size: var(--avatar-xl); font-size: var(--type-lead-size); margin-bottom: var(--space-sm); }
.overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 734px) { .overview { grid-template-columns: minmax(0, 1fr); } }
.overview__card { align-items: flex-start; }
.overview__card .tile-icon { margin-bottom: var(--space-xs); }
.activity-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.activity-tools__period { min-width: calc(var(--card-min) * 0.7); }
.activity-tools__period .dropdown__list { min-width: 100%; width: max-content; }
/* Bereiche der Einstellungen auf dem Phone in einer Zeile zum Wischen (wie im Google-Konto) */
@media (max-width: 734px) {
  .settings__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-lg) * -1); padding-inline: var(--space-lg); scroll-padding-inline: var(--space-lg); }
  .settings__nav::-webkit-scrollbar { display: none; }
  .settings__nav .sidebar__item { flex: none; }
}

/* --- App-Layout: unterer Bereich, Breite, Name als Link, Brotkrümel am Phone (Gürkan 07.11.2026) ---------
   Zweite Liste unten über der Fußzeile (Einstellungen, Administration darüber): übernimmt margin-top: auto der
   Fußzeile, beide gehören zusammen (8 px statt der Lücke der Sidebar). Inhalt etwas breiter als Text (--container-app).
   Name und Rolle in der Fußzeile führen zu „Persönliche Daten“. Brotkrümel am Phone nur die letzten zwei Stufen. */
.app-shell__nav--end { margin-top: auto; flex: none; }
.app-shell__nav--end + .app-shell__foot { margin-top: calc(var(--space-xs) - var(--space-xl)); }
.app-shell__content.wrap { width: 100%; max-width: var(--container-app); }
a.sidebar__user-text { color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
a.sidebar__user-text:hover .t-body-strong { text-decoration: underline; text-underline-offset: var(--link-underline-offset); }
@media (max-width: 734px) {
  .app-shell__bar .breadcrumbs li:not(:nth-last-child(-n + 2)) { display: none; }
  .app-shell__bar .breadcrumbs li:nth-last-child(2):not(:first-child) > .i:first-child { display: none; }
}

/* --- Sidebar: Breite ziehen ([data-sidebar-resize] setzt components.js als Griff an den Rand) ---------- */
/* Ruhig: Linie erst bei Hover (kurz verzögert), beim Ziehen und mit Tastatur-Fokus; Doppelklick setzt auf Standard zurück */
.sidebar-resize { position: absolute; top: 0; bottom: 0; right: calc(var(--sidebar-handle) / -2); z-index: 1; width: var(--sidebar-handle); cursor: col-resize; touch-action: none; }
.sidebar-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--border-width-medium); translate: -50% 0; background-color: var(--accent); opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
.sidebar-resize:hover::after { opacity: 1; transition-delay: var(--tooltip-delay); }
.sidebar-resize:focus-visible { outline: none; }
.sidebar-resize:focus-visible::after, .is-sidebar-resizing .sidebar-resize::after { opacity: 1; transition-delay: 0s; }
.is-sidebar-resizing, .is-sidebar-resizing * { cursor: col-resize !important; user-select: none; }
.is-sidebar-resizing .app-shell { transition: none; }
@media (max-width: 1068px) { .app-shell .sidebar-resize { display: none; } }
@media (max-width: 833px) { .layout .sidebar-resize { display: none; } }

/* --- App-Layout: mobil (die Sidebar ist nie eingeklappt, Entscheidung Gürkan 07.11.2026) --------------- */
.app-shell__menu, .app-shell__scrim { display: none; }
/* Unter 1068 px: Sidebar fährt über den Inhalt (Menü-Button in der Kopfzeile) */
@media (max-width: 1068px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell__sidebar {
    position: absolute; inset: 0 auto 0 0; z-index: var(--z-offcanvas); width: min(var(--offcanvas-width), var(--offcanvas-max));
    box-shadow: var(--elevation-3);
    transform: translateX(-100%); visibility: hidden;
  }
  /* Bewegung nur beim Öffnen und Schließen (.is-nav-closing setzt components.js kurz), nie wenn das Fenster schmal wird */
  .app-shell.is-nav-open .app-shell__sidebar { transform: none; visibility: visible; transition: transform var(--motion-slow) var(--ease-out); }
  .app-shell.is-nav-closing .app-shell__sidebar { transition: transform var(--motion-slow) var(--ease-in), visibility 0s linear var(--motion-slow); }
  .app-shell__scrim { position: absolute; inset: 0; z-index: calc(var(--z-offcanvas) - 1); display: block; padding: 0; border: 0; background-color: var(--color-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--motion-slow) var(--ease-standard); }
  .app-shell.is-nav-open .app-shell__scrim { opacity: 1; pointer-events: auto; }
  .app-shell__menu { display: inline-flex; margin-left: calc(var(--space-xs) * -1); }
}

/* Als ganze Seite (<div class="app-shell app-shell--page"> direkt im <body>): ohne Rahmen,
   Sidebar bleibt beim Scrollen stehen, Kopfleiste fixiert mit Milchglas, mobil über der Kopfleiste */
.app-shell--page { min-height: 100vh; min-height: 100dvh; overflow: visible; border: 0; border-radius: 0; }
.app-shell--page .app-shell__sidebar { position: sticky; top: 0; z-index: var(--z-sticky); height: 100vh; height: 100dvh; }
.app-shell--page .app-shell__nav { min-height: 0; }
.app-shell--page .app-shell__nav { overflow-y: auto; }
.app-shell--page .app-shell__bar { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--bg-subnav); backdrop-filter: var(--blur-frosted); -webkit-backdrop-filter: var(--blur-frosted); }
@media (max-width: 1068px) {
  .app-shell--page .app-shell__sidebar { position: fixed; z-index: calc(var(--z-sticky) + 2); }
  .app-shell--page .app-shell__scrim { position: fixed; z-index: calc(var(--z-sticky) + 1); }   /* über der Kopfleiste */
}

/* --- Fehler- & Statusseiten ---------------------------------------------- */
.status-page { display: grid; justify-items: center; align-content: center; gap: var(--space-xs); padding: var(--space-section) var(--space-xl); text-align: center; }
.status-page__icon { margin-bottom: var(--space-sm); }
.status-page__text { max-width: var(--modal-width); color: var(--text-secondary); }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }

/* --- Anmeldung, Ersteinrichtung, Zwei-Faktor -------------------------------
   .auth füllt die Seite und stellt die Karte in die Mitte. Felder, Hinweise (.alert),
   Schritte (.steps) und Code-Eingabe ([data-otp]) kommen unverändert hinein. */
.auth {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-xl) var(--page-gutter);
  background-color: var(--bg-canvas);   /* ruhige Fläche, kein Muster */
}
.auth__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xxl); width: 100%; max-width: var(--modal-width); padding: var(--space-xl); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.auth__head { display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
.auth__head .brand-logo { height: var(--brand-logo-h-auth); margin-bottom: var(--space-lg); }   /* ohne Kachel (Gürkan 07.11.2026) */
.auth__logo { display: grid; place-items: center; width: var(--auth-logo-size); height: var(--auth-logo-size); margin-bottom: var(--space-xs); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); background-color: var(--bg-canvas); box-shadow: var(--elevation-card); }
.auth__head .auth__logo .brand-logo { height: var(--brand-logo-h-tile); margin: 0; }
.auth__form .check { min-height: 0; }
.auth__head p { color: var(--text-secondary); }
.auth__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.auth__form .otp { justify-content: center; }
.auth__submit { width: 100%; }   /* Hauptaktion über die ganze Breite */
.auth__alt { justify-self: center; text-align: center; }   /* Link oder Hinweis unter der Hauptaktion */
/* Trenner mit Text, z. B. „oder“ vor einer zweiten Anmeldeart */
.divider-text { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: var(--border-width-thin); background-color: var(--border-hairline); }
.auth__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.auth__actions .btn { flex: 1; }
.auth__qr { display: grid; place-items: center; justify-self: center; width: var(--qr-size); aspect-ratio: 1 / 1; border: var(--border-width-thin) dashed var(--border-field); border-radius: var(--radius-md); color: var(--text-secondary); }
.auth__qr svg { width: var(--space-xxl); height: var(--space-xxl); }
/* Notfall-Codes: Monospace auf getönter Fläche wie .secret */
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0; padding: var(--space-lg) var(--space-lg); list-style: none; border-radius: var(--radius-md); background-color: color-mix(in srgb, var(--text-primary) var(--secondary-tint), var(--bg-card)); font-family: var(--font-mono); text-align: center; }
@media (max-width: 419px) { .auth__card { padding: var(--space-lg); } }

/* Anmeldekarte (Gürkan 07.11.2026): Logo ohne Kachel und kleiner (--brand-logo-h-auth), etwas mehr Luft; „Angemeldet
   bleiben“ und „Passwort vergessen?“ in einer Zeile (Phone: Link darunter rechtsbündig, nie umbrechen); Kontakt-Fläche
   mit Zeile zum Kopieren; „Zurück“ oben links auf Höhe des Logos; Code als einziges Feld mittig. */
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); }
.auth__row > * { white-space: nowrap; }
.auth__row .link { margin-left: auto; }
.auth__contact { display: grid; gap: var(--space-xxs); padding: var(--space-lg); border-radius: var(--radius-lg); background-color: var(--bg-muted); }
.auth__contact .popover__list { margin-top: var(--space-xxs); margin-bottom: calc(var(--space-xs) * -1); }
.auth__back { position: absolute; left: var(--space-xl); top: calc(var(--space-xl) + (var(--brand-logo-h-auth) - 1lh) / 2); display: inline-flex; align-items: center; gap: var(--space-xxs); }
.auth__back .link { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.auth__form .field--code { justify-items: center; margin-bottom: calc(var(--space-xxl) - var(--space-lg)); }
.auth__form .field--code .otp { justify-content: center; }

/* --- App Store: Modul-Karten ------------------------------------------------ */
/* Etwas breitere Kacheln, damit Version und Badge nicht umbrechen; subgrid hält Kopf, Text und Aktionen über eine Reihe auf gleicher Höhe */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--card-min) * 1.25)), 1fr)); gap: var(--grid-gap); }
.module-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-sm); padding: var(--space-xl); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.module-card__head { display: flex; align-items: flex-start; gap: var(--space-sm); }
/* Zustand der Karte (z. B. „Hinzugefügt“) oben rechts in der Ecke; der Kopf hält dafür rechts Platz frei (Gürkan, 09.11.2026) */
.module-card { position: relative; }
.module-card__badge { position: absolute; top: var(--space-lg); right: var(--space-lg); }
.module-card:has(> .module-card__badge) .module-card__head { padding-right: calc(var(--space-xxl) * 3); }
.module-card__icon { background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card)); color: var(--accent); }
/* Logo statt Symbol (Modul mit eigenem App-Logo, Gürkan 09.11.2026): Bild füllt die Kachel auf weißer Fläche wie ein App-Symbol (hell und dunkel), feine Linie drumherum */
:is(.module-card__icon, .app-tile__icon):has(> img) { background: var(--color-canvas); border: var(--border-width-thin) solid var(--border-hairline); overflow: hidden; }
:is(.module-card__icon, .app-tile__icon) > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* App-Kacheln (Startseite mit hinzugefügten Modulen, wie Apps am Handy): Symbol in getönter Fläche, Name darunter in einer Zeile.
   Am Handy vier nebeneinander. Zum App Store geht es über die Seitenleiste. */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--app-tile-min)); gap: var(--space-lg) var(--space-sm); }   /* feste Spalten, links bündig */
.app-tile { display: grid; justify-items: center; align-content: start; gap: var(--space-xs); min-width: 0; padding: var(--space-sm) var(--space-xxs); border-radius: var(--radius-card); color: var(--text-primary); text-decoration: none; transition: background-color var(--motion-fast) var(--ease-standard); }
.app-tile:hover { background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.app-tile:active { background-color: color-mix(in srgb, var(--text-primary) var(--press-tint), transparent); }
.app-tile:focus-visible { outline: var(--focus-ring-width) solid var(--ring-strong); outline-offset: var(--focus-ring-offset); }
.app-tile__icon { display: grid; place-items: center; width: var(--app-tile-icon); height: var(--app-tile-icon); border-radius: var(--radius-card); background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card)); color: var(--accent); }
.app-tile__icon .i { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.app-tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }   /* nie Umbruch, zu lang endet mit … */
@media (max-width: 640px) { .app-grid { --app-tile-icon: 56px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xxs); } .card:has(> .app-grid) { padding: var(--space-lg) var(--space-xs); } .app-tile { padding-inline: 0; } .app-tile__name { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); } }   /* Handy: Namen klein wie unter App-Symbolen üblich, sonst gekürzt */   /* Handy: vier nebeneinander */
.module-card__title { display: grid; gap: var(--space-xxs); min-width: 0; margin-right: auto; }
.module-card__title .t-caption, .module-card__text { color: var(--text-secondary); }
.module-card__title .badge { justify-self: start; margin-top: var(--space-xxs); white-space: nowrap; }
.module-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.module-card__foot .menu-wrap { margin-left: auto; }
.modal .choice-cards { margin-top: var(--space-lg); }   /* Auswahl im Dialog, z. B. „Daten behalten / löschen“ */
.modal .field > .choice-cards { margin-top: 0; }   /* als Feld mit Beschriftung: Abstand wie bei jedem Feld */

/* --- Benutzerverwaltung: Person in der Tabelle ------------------------------ */
.table__person { display: flex; align-items: center; gap: var(--space-sm); }
.table__person > .avatar { --size: var(--avatar-md); }   /* Person in Tabellen: 32 px, 24 px war zu klein (Gürkan) */
.table__stack { display: grid; }   /* zwei Zeilen in einer Zelle: Wert und darunter Details */

/* --- Webseite: Kopfzeile, Einstieg, Vorteile, Preise, Fußzeile ------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-global-height); padding: 0 var(--page-gutter);
  background-color: var(--bg-subnav); backdrop-filter: var(--blur-frosted); -webkit-backdrop-filter: var(--blur-frosted);
  border-bottom: var(--border-width-thin) solid var(--border-hairline);
}
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-xs); }
.site-nav { display: flex; gap: var(--space-xxs); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-sm); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.site-nav a:hover { color: var(--text-primary); background-color: color-mix(in srgb, var(--text-primary) var(--hover-tint), transparent); }
.site-nav a[aria-current="page"] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
.site-header__menu { display: none; }
@media (max-width: 734px) {
  .site-header { flex-wrap: wrap; gap: 0 var(--space-sm); }
  .site-header__menu { display: inline-flex; }
  .site-header__actions .btn--secondary { display: none; }
  .site-nav { display: none; order: 1; flex-basis: 100%; flex-direction: column; padding-bottom: var(--space-sm); }
  .site-header.is-open .site-nav { display: flex; }
}
.site-hero { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-section) var(--page-gutter); text-align: center; }
.site-hero .t-lead { max-width: var(--container-narrow); color: var(--text-secondary); }
.site-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.site-section { padding: var(--tile-pad-y) var(--page-gutter); }
.site-section__head { display: grid; justify-items: center; gap: var(--space-sm); margin-bottom: var(--space-xxl); text-align: center; }
.site-section__head .t-lead-airy { max-width: var(--container-narrow); color: var(--text-secondary); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--choice-card-min), 1fr)); gap: var(--grid-gap); }
.feature { display: grid; align-content: start; gap: var(--space-xs); }
.feature__icon { margin-bottom: var(--space-xs); background-color: color-mix(in srgb, var(--accent) var(--status-tint), var(--bg-card)); color: var(--accent); }
.feature p { color: var(--text-secondary); }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--choice-card-min), 1fr)); gap: var(--grid-gap); align-items: stretch; }
.pricing__toggle { display: flex; justify-content: center; margin-bottom: var(--space-xl); }
.price-card { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.price-card--featured { border-color: var(--button-bg); box-shadow: inset 0 0 0 var(--border-width-thin) var(--button-bg); }
.price-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background-color: var(--bg-card); }
.price-card__price { display: flex; align-items: baseline; gap: var(--space-xxs); }
.price-card__price .t-caption { color: var(--text-secondary); }
.price-card__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.price-card__list li { display: flex; gap: var(--space-xs); }
.price-card__list svg { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); margin-top: calc((var(--type-body-lh) * var(--type-body-size) - var(--icon-size-md)) / 2); color: var(--accent); }
.price-card .btn { margin-top: auto; }
.cta-band { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-section) var(--page-gutter); background-color: var(--bg-parchment); text-align: center; }
/* Webseite: Fußzeile sitzt bei kurzem Inhalt unten am Fenster */
body:has(> .site-footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> .site-footer) > main { flex: 1 0 auto; }
.site-footer { display: grid; gap: var(--space-xxl); padding: var(--space-xxl) var(--page-gutter) var(--space-xl); background-color: var(--bg-canvas); border-top: var(--border-width-thin) solid var(--border-hairline); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.site-footer__cols > * { flex: 1 1 calc(var(--choice-card-min) * 0.6); }
.site-footer__cols > :first-child { flex: 2 1 var(--choice-card-min); display: grid; align-content: start; gap: var(--space-xs); }
.site-footer__cols .t-caption-strong { font-size: var(--type-body-size); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.site-footer__cols ul { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-xs); text-underline-offset: var(--link-underline-offset); }
.site-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-lg); border-top: var(--border-width-thin) solid var(--border-hairline); color: var(--text-secondary); }

/* --- Animationen ----------------------------------------------------------
   Klassen für einmalige Auftritte nach einer Aktion, [data-reveal] beim Hineinscrollen (nur auf Wunsch),
   [data-count-to] zählt nach GCloudy.countUp hoch. Alles respektiert prefers-reduced-motion (base.css). */
.anim-fade-in { animation: fade-in var(--motion-slow) var(--ease-out) both; }
.anim-slide-up { animation: slide-in var(--motion-slow) var(--ease-out) both; }
.anim-scale-in { animation: pop-in var(--motion-duration) var(--ease-out) both; }
.anim-stagger > * { animation-delay: calc(var(--i, 0) * var(--stagger-step)); }
.anim-shake { animation: shake var(--motion-slow) var(--ease-standard); }
@keyframes shake { 20%, 60% { transform: translateX(calc(var(--space-xxs) * -1)); } 40%, 80% { transform: translateX(var(--space-xxs)); } }
/* nur verstecken, wenn components.js läuft (.has-reveal) – ohne JS bleibt alles sichtbar */
.has-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(var(--space-lg)); }
[data-reveal] { transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-step)); }
.success-mark { display: inline-grid; place-items: center; width: var(--empty-icon-size); height: var(--empty-icon-size); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--success) var(--status-tint), var(--bg-card)); color: var(--success); }
.success-mark svg { width: var(--space-xl); height: var(--space-xl); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.success-mark circle, .success-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--motion-slow) var(--ease-out) forwards; }
.success-mark path { animation-delay: var(--motion-duration); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Touch: Tippflächen mindestens 44 px (auf dem Desktop unverändert) ---- */
.chip__remove { position: relative; }
.chip__remove::before { content: ""; position: absolute; inset: calc((var(--space-lg) - var(--touch-min)) / 2); }   /* unsichtbar größere Tippfläche */
@media (pointer: coarse) {
  /* Seitenleiste: Einträge 40 px ohne Lücke (44 px plus Lücke wirkte zu luftig, Gürkan 08.11.2026); Auswahl stößt aneinander, Hover gibt es nicht */
  .app-shell__sidebar, .sidebar { --item-height: 40px; --item-gap: 0px; }
  .btn, .chip, .segmented__btn, .tabs:not(.tabs--line) .tab, .th-sort, .chart__table summary { min-height: var(--touch-min); }
  .th-sort, .chart__table summary { display: inline-flex; align-items: center; }
  .sidebar__brand, .site-header__brand { min-height: var(--touch-min); }
  .btn-split__toggle.btn { min-width: var(--touch-min); }
}

/* --- Nur am Handy / nicht am Handy (bis 640 px), z. B. Benutzer: am PC Tabelle, am Handy Zeilen mit Pfeil (Gürkan, 09.11.2026) */
@media not all and (max-width: 640px) { .only-phone { display: none; } }
@media (max-width: 640px) { .hide-phone { display: none; } }