/**
 * Adminbereich: frischer Look (Spec docs/superpowers/specs/2026-10-15-admin-look-design.md).
 *
 * Zwei Schichten:
 *  1. Token-Satz `--ui-*` und, nur innerhalb der Administration, die Umstellung der vorhandenen Variablen aus theme.css
 *     (--bg, --bg-elev, --bg-soft, --ink, --muted, --radius, --shadow) auf die neue Palette. Dadurch wandert jede Seite,
 *     die bereits var(--bg-elev) usw. benutzt, ohne eigene Änderung mit.
 *  2. Bausteine `ui-*` aus den Entwürfen: gruppierte Liste, Zelle, Schalter, Segmentschalter, Kopfleiste, großer Titel,
 *     Chip, Knopf, Suchfeld, Statuszeile. Seiten übernehmen sie Etappe für Etappe; nichts davon greift von selbst.
 *
 * Spezifität: components-*.css lädt nach dieser Datei (Elementregeln in components-base.css) (`input { width: 100%; border; padding }`, Häkchenregel).
 * Regeln für native Felder (Schalter, Radios im Segment, Felder in der Zeile) stehen deshalb unter `:is(.pulse-admin-shell, .ui-demo)`
 * (.ui-demo ist der Container der Musterseite) und gewinnen über die Spezifität, ohne !important (außer [hidden]).
 *
 * Kontraste (WCAG 2.1 AA, geprüft in scripts/test-admin-look-tokens.js): Text ≥ 4,5:1, große Schrift und Bedienelemente ≥ 3:1.
 * Das Orange der Marke (--secondary-color) bleibt Leinwand und Handys vorbehalten; in der Verwaltung gibt es eine Farbe: das Blau.
 */

/* ---------- 1. Token-Satz (hell) ---------- */
:root {
  --ui-ground: #f2f3f6; /* neutral-kühl, Mitte des Verlaufs (siehe --ui-ground-top/-bottom) */
  /* Hintergrund der Administration (nur hell): neutrales, leicht kühles, sehr helles Grau von oben nach unten (nicht warm/bräunlich, Nutzerwunsch), oben ein Schimmer in der Markenfarbe (Anteil --ui-glow).
   * Texte direkt auf dem Grund (label-2) halten 4,5:1 auch an der getönten Spitze; geprüft in scripts/test-admin-look-tokens.js. */
  --ui-ground-top: #f6f7f9;
  --ui-ground-bottom: #eef0f3;
  --ui-glow: 8%;
  --ui-surface: #ffffff;
  --ui-surface-2: #f9f9fb;
  --ui-fill: #e5e5ea;
  --ui-seg-on: #ffffff;
  --ui-seg-on-ink: #1c1c1e;
  --ui-seg-on-ring: #636366; /* hell: gewähltes Segment hebt sich mit Rand ≥ 3:1 von der Spur ab (WCAG 1.4.11) */
  --ui-separator: #e5e5ea;
  --ui-separator-strong: #d1d1d6;
  --ui-label: #1c1c1e;
  --ui-label-2: #636366;
  --ui-label-3: #8e8e93;
  --ui-tint: var(--btn-primary-bg, #007cc1); /* Kontrastbrücke aus theme.js: eigene Markenfarbe nur mit passender Schrift */
  --ui-tint-ink: #005f94;
  --ui-tint-soft: #e9f3fa;
  --ui-on-tint: var(--btn-primary-ink, #ffffff);
  --ui-green: #249e47; /* dunkler als das iOS-Grün #34c759: 3,5:1 auf Weiß (Schalter an) */
  --ui-green-ink: #146c3a;
  --ui-green-soft: #e6f6ec;
  --ui-red: #ff3b30;
  --ui-red-ink: #a3162b;
  --ui-red-soft: #fde8ea;
  --ui-amber-ink: #8a4b00;
  --ui-amber-soft: #fff3e0;
  --ui-bar: rgba(246, 247, 249, 0.86);
  --ui-scrim: rgba(28, 28, 30, 0.92);

  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --ui-large-title: 700 34px/1.15 var(--ui-font);
  --ui-title-1: 700 28px/1.2 var(--ui-font);
  --ui-title-2: 600 22px/1.25 var(--ui-font);
  --ui-headline: 600 17px/1.3 var(--ui-font);
  --ui-body: 400 17px/1.4 var(--ui-font);
  --ui-callout: 400 16px/1.4 var(--ui-font);
  --ui-subhead: 500 15px/1.35 var(--ui-font);
  --ui-footnote: 400 13px/1.35 var(--ui-font);
  --ui-caption: 600 12px/1.3 var(--ui-font);
  --ui-tracking-title: -0.02em;

  --ui-radius-s: 10px;
  --ui-radius-m: 12px;
  --ui-radius-l: 16px;
  --ui-radius-xl: 22px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-control: 44px;
  --ui-control-s: 34px;

  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ui-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.25);
  --ui-shadow-knob: 0 2px 4px rgba(0, 0, 0, 0.25);
  --ui-blur: saturate(180%) blur(18px);
  --ui-ease: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 1. Token-Satz (dunkel, nur bei ausdrücklicher Wahl) ---------- */
[data-theme="dark"] {
  --ui-ground: #121214;
  --ui-surface: #1c1c1e;
  --ui-surface-2: #242426;
  --ui-fill: #2c2c2e;
  --ui-seg-on: #767678; /* ≥ 3:1 gegen die Spur, weißer Text darauf ≥ 4,5:1 */
  --ui-seg-on-ink: #ffffff;
  --ui-seg-on-ring: #767678; /* dunkel genügt die Fläche selbst */
  --ui-separator: #38383a;
  --ui-separator-strong: #48484a;
  --ui-label: #f2f2f7;
  --ui-label-2: #aeaeb2;
  --ui-label-3: #8e8e93;
  --ui-tint: #7eb6ff;
  --ui-tint-ink: #9ccaff;
  --ui-tint-soft: rgba(126, 182, 255, 0.16);
  --ui-on-tint: #0b1220;
  --ui-green: #30d158;
  --ui-green-ink: #6ee7a0;
  --ui-green-soft: rgba(48, 209, 88, 0.16);
  --ui-red: #ff453a;
  --ui-red-ink: #ff8a80;
  --ui-red-soft: rgba(255, 69, 58, 0.16);
  --ui-amber-ink: #ffc46b;
  --ui-amber-soft: rgba(255, 159, 10, 0.16);
  --ui-bar: rgba(18, 18, 20, 0.8);
  --ui-scrim: rgba(44, 44, 46, 0.96);
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- 1. Umstellung der vorhandenen Variablen innerhalb der Administration ---------- */
/* Gilt, sobald eine Admin-Ansicht sichtbar ist (die Hülle hat die Klasse pulse-admin-shell; unsichtbare Ansichten tragen hidden).
 * Auf body, nicht auf html: theme.js setzt --bg und --ink per Inline-Stil am Dokument (Branding-Kontrast), und Inline schlägt jede Regel. */
html:has(.pulse-admin-shell:not([hidden])) body {
  --bg: var(--ui-ground);
  --bg-elev: var(--ui-surface);
  --bg-soft: var(--ui-fill);
  --ink: var(--ui-label);
  --muted: var(--ui-label-2);
  --placeholder: var(--ui-label-2);
  --radius: var(--ui-radius-l);
  --shadow: var(--ui-shadow-card);
  --pad: clamp(16px, 2.4vw, 40px);
}
html:has(.pulse-admin-shell:not([hidden])) body {
  background-color: var(--ui-ground);
  background-image: none;
  font-family: var(--ui-font);
}
/* Sanfter Markenverlauf, nur hell: Body und Dokument scrollen nicht (der Bereich scrollt in .app), der Verlauf bleibt also beim Scrollen stehen.
 * Die Markenfarbe kommt aus der Kontrastbrücke (--btn-primary-bg), eigene Branding-Farben wirken so mit. Dunkel bleibt die ruhige Fläche. */
html:has(.pulse-admin-shell:not([hidden])):not([data-theme="dark"]) body {
  --ui-ground-fill:
    radial-gradient(ellipse 120% 60% at 50% -10%, color-mix(in srgb, var(--btn-primary-bg, #007cc1) var(--ui-glow), transparent), transparent 70%),
    linear-gradient(180deg, var(--ui-ground-top) 0%, var(--ui-ground-bottom) 100%);
  background-color: var(--ui-ground-bottom);
  background-image: var(--ui-ground-fill);
  background-repeat: no-repeat;
}
/* Die klebende Admin-Leiste ist deckend (Inhalt läuft darunter durch) und trägt denselben Verlauf, fest zum Fenster ausgerichtet: sie liegt nahtlos auf dem Hintergrund. */
html:has(.pulse-admin-shell:not([hidden])) body.admin-area .admin-chrome {
  background: var(--ui-ground-fill, var(--ui-ground));
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Karten und Felder der Administration: flache Flächen, eine Trennlinie, kein weicher Schatten */
html:has(.pulse-admin-shell:not([hidden])) .pulse-card,
html:has(.pulse-admin-shell:not([hidden])) .panel {
  border-radius: var(--ui-radius-l);
  box-shadow: var(--ui-shadow-card);
  border-color: var(--ui-separator);
}
html:has(.pulse-admin-shell:not([hidden])) .admin-sidebar {
  background: transparent; /* steht auf dem Verlauf des Hintergrunds */
  border-right: 1px solid var(--ui-separator);
}
html:has(.pulse-admin-shell:not([hidden])) .admin-nav-link {
  border-radius: var(--ui-radius-s);
  font: var(--ui-subhead);
  color: var(--ui-label);
}
html:has(.pulse-admin-shell:not([hidden])) .admin-nav-link:hover {
  background: var(--ui-fill);
}
html:has(.pulse-admin-shell:not([hidden])) .admin-nav-link[aria-current="page"],
html:has(.pulse-admin-shell:not([hidden])) .admin-nav-link.is-active {
  background: var(--ui-surface);
  color: var(--ui-tint-ink);
  box-shadow: var(--ui-shadow-card);
}
html:has(.pulse-admin-shell:not([hidden])) .admin-nav-section__title {
  font: var(--ui-caption);
  color: var(--ui-label-2);
  letter-spacing: 0.02em;
}
html:has(.pulse-admin-shell:not([hidden])) .admin-page-head h1 {
  font: var(--ui-large-title);
  letter-spacing: var(--ui-tracking-title);
  color: var(--ui-label);
}
/* Fußzeile der Administration (Etappe 9c): ruhig und klein, auf dem Seitengrund statt auf weißer Fläche.
 * Die Rechtsseiten (Beitritt, Startseite, Leinwand) nutzen dieselbe Komponente und bleiben unverändert, weil die Regeln nur bei sichtbarer
 * Admin-Ansicht greifen. Spezifität (0,3,1) schlägt branding.css (.app-footer) und components-session.css (body.admin-area .app-footer, nur Handy). */
html:has(.pulse-admin-shell:not([hidden])) .app-footer {
  background: transparent;
  border-top: 1px solid var(--ui-separator);
  color: var(--ui-label-2);
  font: var(--ui-footnote);
  padding-block: var(--ui-space-2);
  gap: 0 var(--ui-space-4);
}
html:has(.pulse-admin-shell:not([hidden])) .app-footer #footer-copy {
  margin: 0;
}
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-links {
  gap: 0 var(--ui-space-3);
}
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-links a,
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-home a,
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-links .link-btn {
  min-height: 32px;
  color: var(--ui-tint-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-link-sep,
html:has(.pulse-admin-shell:not([hidden])) .app-footer .footer-stats {
  color: var(--ui-label-2);
  font-size: inherit;
}
html:has(.pulse-admin-shell:not([hidden])) .app-footer a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--ui-radius-s);
}

/* ---------- 2. Bausteine ---------- */

/* Großer Titel und milchige Kopfleiste */
.ui-large-title {
  margin: 0;
  font: var(--ui-large-title);
  letter-spacing: var(--ui-tracking-title);
  color: var(--ui-label);
}
.ui-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4) var(--ui-space-10);
  background: var(--ui-bar);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border-bottom: 1px solid var(--ui-separator);
}
.ui-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  font: var(--ui-subhead);
  color: var(--ui-tint-ink);
  text-decoration: none;
}

/* Gruppierte Liste (wie die iOS-Einstellungen) */
.ui-group {
  background: var(--ui-surface);
  border-radius: var(--ui-radius-l);
  overflow: hidden;
  box-shadow: var(--ui-shadow-card);
}
.ui-group__title {
  margin: 0 0 var(--ui-space-2) var(--ui-space-4);
  font: var(--ui-caption);
  letter-spacing: 0.02em;
  color: var(--ui-label-2);
}
.ui-group__foot {
  margin: var(--ui-space-2) var(--ui-space-4) 0;
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
.ui-cell {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  min-height: 52px;
  padding: var(--ui-space-2) var(--ui-space-4);
  color: var(--ui-label);
  text-decoration: none;
}
.ui-cell + .ui-cell {
  border-top: 1px solid var(--ui-separator);
  margin-left: var(--ui-space-4);
  padding-left: 0;
}
.ui-cell__label {
  flex: 1 1 0;
  min-width: 0;
  font: var(--ui-body);
  overflow-wrap: break-word; /* lange Wörter und Sätze (fr, Sie-Fassung) brechen um, statt den Schalter zu verdrängen */
}
.ui-cell__sub {
  display: block;
  font: var(--ui-footnote);
  color: var(--ui-label-2);
  margin-top: 2px;
}
.ui-cell__value {
  font: var(--ui-body);
  color: var(--ui-label-2);
  text-align: right;
}
.ui-cell input[type="text"],
.ui-cell input[type="search"],
.ui-cell input[type="email"],
.ui-cell input[type="number"],
.ui-cell textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: var(--ui-body);
  color: var(--ui-label);
  outline: none;
  text-align: right;
}
.ui-cell textarea {
  text-align: left;
  resize: none;
  padding: var(--ui-space-2) 0;
}
.ui-cell select {
  border: 0;
  background: transparent;
  font: var(--ui-body);
  color: var(--ui-label-2);
  outline: none;
}
/* Felder in der Zeile: ohne eigenen Rahmen, Wert rechts. Alle Eingabefelder außer Häkchen, Radio, Regler, Farbe, Datei, Knöpfe (auch url, password, tel, date und ohne type). Geschärft gegen `input, select, textarea` aus components-base.css. */
:is(.pulse-admin-shell, .ui-demo) .ui-cell input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
:is(.pulse-admin-shell, .ui-demo) .ui-cell textarea,
:is(.pulse-admin-shell, .ui-demo) .ui-cell select {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-s);
  background: transparent;
  box-shadow: none;
  font: var(--ui-body);
  color: var(--ui-label);
  outline: none;
}
/* Einzeilige Texteingaben haben eine leise Feldfläche (--ui-fill), damit auch leere Felder als Eingabe erkennbar sind; der Text steht links in der Fläche, die Fläche rechts in der Zeile. Auswahl (select) bleibt flach. */
:is(.pulse-admin-shell, .ui-demo) .ui-cell input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]) {
  flex: 0 1 min(50%, 18rem);
  padding: 0 var(--ui-space-3);
  background: var(--ui-fill);
  text-align: left;
}
:is(.pulse-admin-shell, .ui-demo) .ui-cell textarea {
  flex: 1 1 0;
  text-align: left;
  resize: none;
  padding: var(--ui-space-2) 0;
}
:is(.pulse-admin-shell, .ui-demo) .ui-cell select {
  flex: 0 1 min(50%, 18rem);
  color: var(--ui-label-2);
  text-align: right;
  text-align-last: right;
  cursor: pointer;
}
/* Kurze Zahlenfelder (Dauer, Intervall, Höchstzahl, Anzahl): nur so breit wie nötig, rechts in der Zeile, nicht als breiter Balken über 18 rem */
:is(.pulse-admin-shell, .ui-demo) .ui-cell input[type="number"] {
  flex: 0 1 7rem;
  text-align: right;
}
/* Nur-Lesen-Anzeige (Pfad, Repository): kein bearbeitbares Feld, keine Fläche; nutzt die Breite der Zeile */
:is(.pulse-admin-shell, .ui-demo) .ui-cell input[readonly]:not([type="checkbox"], [type="radio"]) {
  flex: 2 1 0;
  background: transparent;
  color: var(--ui-label-2);
  padding: 0;
}
/* Ohne Rahmen braucht das Feld einen eigenen Fokusring (3 px --focus) */
:is(.pulse-admin-shell, .ui-demo) .ui-cell input:focus-visible,
:is(.pulse-admin-shell, .ui-demo) .ui-cell textarea:focus-visible,
:is(.pulse-admin-shell, .ui-demo) .ui-cell select:focus-visible {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
  box-shadow: none;
}
.ui-cell--link {
  cursor: pointer;
}
.ui-cell--link:hover {
  background: var(--ui-surface-2);
}
.ui-cell__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--ui-label-3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.ui-cell__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}

/* Schalter: `button[role=switch][aria-checked]` oder natives `input[type=checkbox][role=switch]` (Spur 51 × 31, Knopf per ::after).
 * Aus: Spur in --ui-fill mit 1-px-Rand in --ui-label-3 (3:1 gegen die Fläche); an: --ui-green. */
.ui-switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--ui-fill);
  box-shadow: inset 0 0 0 1px var(--ui-label-3);
  cursor: pointer;
  transition: background var(--ui-ease), box-shadow var(--ui-ease);
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--ui-shadow-knob);
  transition: transform var(--ui-ease);
}
.ui-switch[aria-checked="true"] {
  background: var(--ui-green);
  box-shadow: none;
}
.ui-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
.ui-switch:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Natives Häkchen als Schalter. Die globale Regel `input { width: 100% }` und die Häkchenregel (1,15 rem) aus components-base.css
 * gelten hier nicht: Größe, Rand und Innenabstand setzt dieser Block (Spezifität 0,3,1). */
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 51px;
  min-width: 51px;
  height: 31px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-fill);
  box-shadow: inset 0 0 0 1px var(--ui-label-3);
}
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked {
  background: var(--ui-green);
  box-shadow: none;
}
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked::after {
  transform: translateX(20px);
}
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Segmentschalter (role=radiogroup oder tablist; aria-checked bzw. aria-selected, oder native Radios im Label) */
.ui-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--ui-radius-s);
  background: var(--ui-fill);
}
.ui-seg__btn {
  border: 0;
  background: transparent;
  border-radius: 8px;
  height: 30px;
  min-width: 0;
  padding: 0 14px;
  font: var(--ui-subhead);
  color: var(--ui-label);
  cursor: pointer;
  transition: background var(--ui-ease), box-shadow var(--ui-ease);
}
.ui-seg__btn[aria-checked="true"],
.ui-seg__btn[aria-selected="true"] {
  background: var(--ui-seg-on);
  color: var(--ui-seg-on-ink);
  box-shadow: inset 0 0 0 1px var(--ui-seg-on-ring), 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}
/* Native Radios: <label class="ui-seg__btn"><input type="radio" name="…"><span>Text</span></label>.
 * Das Radio liegt unsichtbar (opacity 0, nicht display:none) über dem Label: Fokus, Pfeiltasten und Klick bleiben nativ.
 * Hervorhebung über :checked, Fokusring am Label über :focus-visible des Radios. */
:is(.pulse-admin-shell, .ui-demo) label.ui-seg__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Lange fr-/Sie-Texte brechen um statt aus der Zeile zu laufen; das Segment wächst dann in der Höhe. */
  white-space: normal;
  height: auto;
  min-height: 30px;
  min-width: 0;
  padding-block: 5px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
:is(.pulse-admin-shell, .ui-demo) .ui-seg__btn > input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  outline: none;
  opacity: 0;
  cursor: pointer;
}
:is(.pulse-admin-shell, .ui-demo) .ui-seg__btn:has(> input:checked) {
  background: var(--ui-seg-on);
  color: var(--ui-seg-on-ink);
  box-shadow: inset 0 0 0 1px var(--ui-seg-on-ring), 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}
:is(.pulse-admin-shell, .ui-demo) .ui-seg__btn:has(> input:focus-visible) {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}
:is(.pulse-admin-shell, .ui-demo) .ui-seg__btn:has(> input:disabled) {
  opacity: 0.5;
  cursor: default;
}

/* Knöpfe: eine Hauptaktion je Bildschirm */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  height: var(--ui-control);
  padding: 0 18px;
  border: 0;
  border-radius: var(--ui-radius-m);
  font: 600 15px/1 var(--ui-font);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ui-ease), transform 80ms ease-out;
}
.ui-btn:active {
  transform: scale(0.98);
}
.ui-btn--primary {
  background: var(--ui-tint);
  color: var(--ui-on-tint);
}
.ui-btn--primary:hover {
  background: color-mix(in srgb, var(--ui-tint) 88%, #000000);
}
.ui-btn--quiet {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
.ui-btn--ghost {
  background: transparent;
  color: var(--ui-tint-ink);
}
.ui-btn--danger {
  background: transparent;
  color: var(--ui-red-ink);
}
.ui-btn--s {
  height: var(--ui-control-s);
  padding: 0 12px;
  font-size: 14px;
}
.ui-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Chip (Status) */
.ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font: var(--ui-caption);
  background: var(--ui-fill);
  color: var(--ui-label);
}
.ui-chip--tint {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
.ui-chip--ok {
  background: var(--ui-green-soft);
  color: var(--ui-green-ink);
}
.ui-chip--warn {
  background: var(--ui-amber-soft);
  color: var(--ui-amber-ink);
}
.ui-chip--err {
  background: var(--ui-red-soft);
  color: var(--ui-red-ink);
}

/* Suchfeld */
.ui-search {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  height: 40px;
  padding: 0 var(--ui-space-3);
  border-radius: var(--ui-radius-m);
  background: var(--ui-fill);
  color: var(--ui-label-2);
}
.ui-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: var(--ui-callout);
  color: var(--ui-label);
  outline: none;
}

/* Statuszeile (Sofort speichern) */
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  flex: none;
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
.ui-status--saved {
  color: var(--ui-green-ink);
}
.ui-status--failed {
  color: var(--ui-red-ink);
}

/* Toast mit Rückgängig */
.ui-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ui-scrim);
  color: #ffffff;
  font: var(--ui-subhead);
  box-shadow: var(--ui-shadow-toast);
}
.ui-toast__action {
  border: 0;
  background: transparent;
  color: #5ac8fa;
  font: 600 15px/1 var(--ui-font);
  cursor: pointer;
}

/* Sichtbarer Fokus, überall gleich */
.ui-btn:focus-visible,
.ui-switch:focus-visible,
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:focus-visible,
.ui-seg__btn:focus-visible,
.ui-cell--link:focus-visible,
.ui-topbar__back:focus-visible,
.ui-toast__action:focus-visible {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}
/* Die allgemeine Regel input:focus-visible (accessibility.css) legt einen Schein und Rahmenfarbe darauf: beim Schalter nur Ring plus Rand */
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:focus-visible {
  box-shadow: inset 0 0 0 1px var(--ui-label-3);
}
:is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked:focus-visible {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-switch,
  .ui-switch::after,
  .ui-seg__btn,
  .ui-btn {
    transition: none;
  }
}

/* Handy: Kopfleiste und Gruppen am Rand, Tippflächen bleiben 44 px */
@media (max-width: 640px) {
  .ui-topbar {
    padding: var(--ui-space-3) var(--ui-space-4);
  }
  .ui-large-title {
    font-size: 28px;
  }
  .ui-cell {
    min-height: 48px;
  }
  /* Zeile mit Segment: Beschriftung oben, Segment darunter über die volle Breite (sonst bleibt dem Label eine Handvoll Zeichen) */
  .ui-cell:has(> .ui-seg) {
    flex-wrap: wrap;
    row-gap: var(--ui-space-2);
    padding-top: var(--ui-space-3);
    padding-bottom: var(--ui-space-3);
  }
  .ui-cell:has(> .ui-seg) > .ui-cell__label {
    flex: 1 1 100%;
  }
  .ui-cell > .ui-seg {
    flex: 1 1 100%;
  }
  .ui-cell > .ui-seg .ui-seg__btn {
    flex: 1 1 0;
    padding: 0 var(--ui-space-2);
  }
  /* Zeile mit Textfeld (eine zentrale Regel für Sessionseite, Formular- und Systemseiten): Beschriftung oben, Feld in voller Breite darunter, Wert nicht abgeschnitten.
   * Auswahl (select) bleibt neben der Beschriftung; Zahlen-, Datums- und Zeitfelder sind kurz und bleiben rechts. */
  :is(.pulse-admin-shell, .ui-demo) .ui-cell:has(> input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="number"], [type="date"], [type="time"], [type="datetime-local"])) {
    flex-wrap: wrap;
    row-gap: var(--ui-space-1);
    padding-top: var(--ui-space-3);
    padding-bottom: var(--ui-space-3);
  }
  :is(.pulse-admin-shell, .ui-demo) .ui-cell:has(> input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="number"], [type="date"], [type="time"], [type="datetime-local"])) > .ui-cell__label {
    flex: 1 1 100%;
  }
  :is(.pulse-admin-shell, .ui-demo) .ui-cell > input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="number"], [type="date"], [type="time"], [type="datetime-local"]) {
    flex: 1 1 100%;
    min-height: 36px;
    text-align: left;
  }
}

/* Touch-Geräte: kleine Knöpfe, Zeilenknöpfe, „⋯“ und Reiter auf 44 px Tippfläche (Desktop bleibt bei 34 bzw. 38 px).
 * --ui-control-s steuert .ui-btn--s, das Zeilenmenü „⋯“ und die übrigen kleinen Knöpfe der Administration. */
@media (pointer: coarse) {
  :root {
    --ui-control-s: 44px;
  }
  .ui-btn--s {
    min-width: 44px;
  }
  .pulse-admin-shell .row-menu > summary {
    min-width: 44px;
  }
  .pulse-admin-shell .session-tabs.ui-seg .session-tab,
  .ui-seg__btn {
    min-height: 44px;
  }
}

/* Windows-Kontrastmodus: Hintergründe und Schatten entfallen, daher Rand statt Fläche. */
@media (forced-colors: active) {
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch,
  .ui-switch,
  .ui-seg,
  .ui-seg__btn {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch::after,
  .ui-switch::after {
    background: ButtonText;
    box-shadow: none;
  }
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked,
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked::after,
  .ui-switch[aria-checked="true"],
  .ui-seg__btn[aria-checked="true"],
  .ui-seg__btn[aria-selected="true"],
  :is(.pulse-admin-shell, .ui-demo) .ui-seg__btn:has(> input:checked) {
    border-color: Highlight;
  }
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked,
  .ui-switch[aria-checked="true"],
  .ui-seg__btn[aria-checked="true"],
  .ui-seg__btn[aria-selected="true"],
  :is(.pulse-admin-shell, .ui-demo) .ui-seg__btn:has(> input:checked) {
    background: Highlight;
    color: HighlightText;
  }
  :is(.pulse-admin-shell, .ui-demo) input[type="checkbox"].ui-switch:checked::after,
  .ui-switch[aria-checked="true"]::after {
    background: HighlightText;
  }
}