/* @epsa/design · Bausteine (Web)
   Vorlage ist music-crate (src/app/globals.css); wo Crate einen Baustein im Web nicht hat (Dock, Status-Pille,
   Versionszeile), EPSA Admin (src/public/app.css). Jede Abweichung von Crate steht als „Abweichung:“ beim Baustein.
   Nur --epsa-*-Variablen aus tokens.css: keine Farb-, Maß- oder Zeitliterale (geprüft: epsa-design lint --strict).
   Erlaubt sind 0, Haarlinien (1px), Einheitsfaktoren (1rem, 100%, 100vw), Winkel und Prozent-Stellen in Verläufen.
   Klassen heißen wie in Crate, damit Crate und Admin beim Umstieg ihre eigenen Regeln einfach löschen können. */

/* ───────── Abgeleitete Werte ─────────
   Auf jedem Theme-Element neu berechnet, damit ein Theme auch in einem Teilbaum greift (Galerie, Theme-Editor). */
:root, [data-epsa-theme] {
  --epsa-glass-edge: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-edge) * 100%), transparent);
  --epsa-glass-edge-hover: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-edge-hover) * 100%), transparent);
  --epsa-glass-light: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-light) * 100%), transparent);
  --epsa-glass-light-hover: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-light-hover) * 100%), transparent);
  --epsa-glass-sheen: linear-gradient(145deg,
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-sheen-from) * 100%), transparent),
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-glass-sheen-to) * 100%), transparent) 45%);
  --epsa-glass-bg: color-mix(in srgb, var(--epsa-card) calc(var(--epsa-opacity-glass-card) * 100%), transparent);
  --epsa-glass-bg-hover: color-mix(in srgb, var(--epsa-card) calc(var(--epsa-opacity-glass-card-hover) * 100%), transparent);

  /* Liquid Glass (Crate --lg-fill): helle Tönung, Lichtkante oben links, schwacher Gegenreflex. */
  --epsa-lg-fill: linear-gradient(135deg,
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-fill-start) * 100%), transparent) 0%,
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-fill-mid) * 100%), transparent) 38%,
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-fill-low) * 100%), transparent) 62%,
    color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-fill-end) * 100%), transparent) 100%);
  --epsa-lg-tint: color-mix(in srgb, var(--epsa-color-glass-tint) calc(var(--epsa-opacity-liquid-tint) * 100%), transparent);
  --epsa-lg-tint-bar: color-mix(in srgb, var(--epsa-color-glass-tint) calc(var(--epsa-opacity-liquid-tint-bar) * 100%), transparent);
  --epsa-lg-tint-menu: color-mix(in srgb, var(--epsa-color-glass-tint) calc(var(--epsa-opacity-liquid-tint-menu) * 100%), transparent);
  --epsa-lg-blur: blur(var(--epsa-blur-glass)) saturate(var(--epsa-number-glass-saturate));

  --epsa-surface-hover: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-hover) * 100%), transparent);
  --epsa-surface-divider: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-divider) * 100%), transparent);
  --epsa-surface-row: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-row) * 100%), transparent);
  --epsa-surface-active: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-active) * 100%), transparent);
  --epsa-surface-active-ring: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-active-ring) * 100%), transparent);
  --epsa-surface-ring: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-ring) * 100%), transparent);
  --epsa-surface-ring-hover: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-ring-hover) * 100%), transparent);
}

/* ───────── Raumlicht ─────────
   Ein fest stehendes, einmal gemaltes Licht hinter allem (05: keine Animation). Über den Rand gezogen gegen das
   „Kinn“ (07, Punkt 7). Abweichung: Lichter laufen in Stufen aus statt linear (05, Admin), sonst Ringe (Banding);
   dazu feines Rauschen auf ::after (05). Crate hat beides nicht. Farben aus dem Theme (--epsa-light-1/2) statt fest
   Bernstein/Rot. Das Canvas-Licht aus Admin (ambient.js) ist nicht übernommen. */
.ambient {
  position: fixed;
  top: calc(var(--epsa-ambient-over-top) * -1);
  bottom: calc(var(--epsa-ambient-over-bottom) * -1);
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Safari 26 füllt die Statusleiste mit der Farbe dieses Elements (07): eigene Farbe, nicht nur Verläufe. */
  background-color: var(--epsa-bar);
  background-image:
    radial-gradient(calc(var(--epsa-ambient-light1-r) * 100vw) circle at calc(var(--epsa-ambient-light1-x) * 100%) var(--epsa-ambient-light1-y),
      color-mix(in srgb, var(--epsa-light-1) calc(var(--epsa-ambient-light1-alpha) * 100%), transparent),
      color-mix(in srgb, var(--epsa-light-1) calc(var(--epsa-ambient-light1-alpha) * var(--epsa-ambient-step1) * 100%), transparent) 25%,
      color-mix(in srgb, var(--epsa-light-1) calc(var(--epsa-ambient-light1-alpha) * var(--epsa-ambient-step2) * 100%), transparent) 50%,
      color-mix(in srgb, var(--epsa-light-1) calc(var(--epsa-ambient-light1-alpha) * var(--epsa-ambient-step3) * 100%), transparent) 75%,
      transparent),
    radial-gradient(calc(var(--epsa-ambient-light2-r) * 100vw) circle at calc(var(--epsa-ambient-light2-x) * 100%) var(--epsa-ambient-light2-y),
      color-mix(in srgb, var(--epsa-light-2) calc(var(--epsa-ambient-light2-alpha) * 100%), transparent),
      color-mix(in srgb, var(--epsa-light-2) calc(var(--epsa-ambient-light2-alpha) * var(--epsa-ambient-step1) * 100%), transparent) 25%,
      color-mix(in srgb, var(--epsa-light-2) calc(var(--epsa-ambient-light2-alpha) * var(--epsa-ambient-step2) * 100%), transparent) 50%,
      color-mix(in srgb, var(--epsa-light-2) calc(var(--epsa-ambient-light2-alpha) * var(--epsa-ambient-step3) * 100%), transparent) 75%,
      transparent);
  /* Unten auslaufen, damit Karten und Text auf ruhigem Grund stehen; oben nie (sonst Kante unter der Uhr). */
  -webkit-mask-image: linear-gradient(to bottom, var(--epsa-color-shade) 0,
    var(--epsa-color-shade) calc(100% - var(--epsa-ambient-over-bottom) - var(--epsa-ambient-fade)),
    transparent calc(100% - var(--epsa-ambient-over-bottom)));
  mask-image: linear-gradient(to bottom, var(--epsa-color-shade) 0,
    var(--epsa-color-shade) calc(100% - var(--epsa-ambient-over-bottom) - var(--epsa-ambient-fade)),
    transparent calc(100% - var(--epsa-ambient-over-bottom)));
}
/* Oben in die Leistenfarbe auslaufen (07, „Oben keine Fläche“): volle --epsa-bar bis zur Leistenkante, dann eine
   weiche Rampe. Liegt IM Raumlicht, nicht als eigenes festes Element. */
.ambient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px) + var(--epsa-ambient-ramp-end));
  background: linear-gradient(to bottom,
    var(--epsa-bar) calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px)),
    color-mix(in srgb, var(--epsa-bar) calc(var(--epsa-ambient-ramp1) * 100%), transparent)
      calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px) + var(--epsa-ambient-ramp1-at)),
    color-mix(in srgb, var(--epsa-bar) calc(var(--epsa-ambient-ramp2) * 100%), transparent)
      calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px) + var(--epsa-ambient-ramp2-at)),
    color-mix(in srgb, var(--epsa-bar) calc(var(--epsa-ambient-ramp3) * 100%), transparent)
      calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px) + var(--epsa-ambient-ramp3-at)),
    color-mix(in srgb, var(--epsa-bar) calc(var(--epsa-ambient-ramp4) * 100%), transparent)
      calc(var(--epsa-ambient-over-top) + env(safe-area-inset-top, 0px) + var(--epsa-ambient-ramp4-at)),
    transparent);
}
/* Rauschen gegen Stufen in dunklen Verläufen (05): weiß, Alpha 0–4 %, feste Kachel, keine Animation. Unter der
   Rampe, damit unter der Statusleiste nur die Leistenfarbe liegt. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(noise.png) 0 0 / var(--epsa-size-noise-tile) repeat;
}

/* ───────── Glas-Karte ─────────
   Verlauf + feine Kante, kein backdrop-filter (05: bei vielen Karten ein GPU-Fresser).
   Abweichungen: Rauschen als erste Ebene (05). Innenabstand im Baustein (Admin), Crate setzt ihn im Markup.
   Hover nur bei Links und Knöpfen (Admin): Crate hebt jede Karte an, auch wenn sie nichts tut. Beim Hover bleiben
   Schimmer und Rauschen (Crate ersetzt den ganzen Hintergrund und verliert dabei den Schimmer). */
.glass-card {
  position: relative;
  overflow: hidden;
  padding: var(--epsa-space-s16);
  border-radius: var(--epsa-radius-card);
  background: url(noise.png) 0 0 / var(--epsa-size-noise-tile) repeat, var(--epsa-glass-sheen), var(--epsa-glass-bg);
  box-shadow: inset 0 0 0 1px var(--epsa-glass-edge), inset 0 1px 0 var(--epsa-glass-light), var(--epsa-shadow-card);
  transition: background var(--epsa-motion-hover) ease, box-shadow var(--epsa-motion-hover) ease;
}
a.glass-card { display: block; text-decoration: none; }
button.glass-card { display: block; width: 100%; border: 0; color: inherit; text-align: inherit; cursor: pointer; }
a.glass-card:hover, button.glass-card:hover, .glass-card.is-link:hover {
  background: url(noise.png) 0 0 / var(--epsa-size-noise-tile) repeat, var(--epsa-glass-sheen), var(--epsa-glass-bg-hover);
  box-shadow: inset 0 0 0 1px var(--epsa-glass-edge-hover), inset 0 1px 0 var(--epsa-glass-light-hover), var(--epsa-shadow-card-hover);
}

/* ───────── Schrift (03; Klassen aus Admin und Crate) ───────── */
.hero-title {
  margin: 0;
  font-size: clamp(var(--epsa-font-size-hero-min), calc(var(--epsa-number-hero-fluid) * 100vw), var(--epsa-font-size-hero-max));
  font-weight: var(--epsa-font-weight-light);
  line-height: var(--epsa-font-line-height-hero);
  letter-spacing: var(--epsa-font-tracking-hero);
}
.section-title {
  margin: 0;
  font-size: var(--epsa-font-size-section);
  font-weight: var(--epsa-font-weight-semibold);
  letter-spacing: var(--epsa-font-tracking-section);
}
.section-count {
  font-size: var(--epsa-font-size-small);
  font-weight: var(--epsa-font-weight-medium);
  color: var(--epsa-muted);
  font-variant-numeric: tabular-nums;
}
.kicker {
  margin: 0;
  font-size: var(--epsa-font-size-kicker);
  font-weight: var(--epsa-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--epsa-font-tracking-kicker);
  color: var(--epsa-accent);
}
.hint { margin: 0; font-size: var(--epsa-font-size-small); color: var(--epsa-muted); }
.stat {
  font-size: var(--epsa-font-size-stat);
  font-weight: var(--epsa-font-weight-light);
  line-height: var(--epsa-font-line-height-stat);
  letter-spacing: var(--epsa-font-tracking-hero);
  font-variant-numeric: tabular-nums;
}

/* ───────── Wortmarke (<epsa-wordmark>) ─────────
   Big Shoulders 800, opsz 72; Versalhöhe exakt in der Zeilenmitte (text-box), Größe setzt das Element aus den Tokens.
   Gestapelt mit Verlauf Creme → Bernstein (03). Abweichung: Mittelton aus cream und accent gemischt statt fest
   #f0c48a, damit er mit dem Theme geht (bei Bernstein #f0c394). In einer Reihe flach zweifarbig, ink und accent
   (04, Crate .hdr-logo). Nie opacity auf einen Teil: Safari malt background-clip:text dann nicht (04). */
.wordmark { display: inline-flex; align-items: center; vertical-align: middle; }
.wordmark.is-stacked { flex-direction: column; }
.logo-type {
  margin: 0;
  font-family: var(--epsa-font-family-logo), var(--epsa-font-family-ui);
  font-weight: var(--epsa-font-weight-logo);
  font-variation-settings: "opsz" 72;
  letter-spacing: var(--epsa-font-tracking-logo);
  line-height: var(--epsa-font-line-height-none);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.logo-a { color: var(--epsa-ink); }
.logo-b { margin-left: var(--epsa-font-tracking-logo-gap); color: var(--epsa-accent); }
.wordmark.is-stacked .logo-type {
  background: linear-gradient(100deg, var(--epsa-cream) 10%, color-mix(in srgb, var(--epsa-cream) 40%, var(--epsa-accent)) 55%, var(--epsa-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark.is-stacked .logo-a, .wordmark.is-stacked .logo-b { color: transparent; }

/* ───────── Flower (<epsa-flower>) ─────────
   Farben aus dem Theme: Grundlinie accent, Seed of Life flower, Kranz und Außenringe accent, ganze Blume cream
   (Konstellationen wie FlowerView.swift, 11). Geometrie und Taktung setzt das Element aus den Tokens. */
epsa-flower { display: inline-flex; flex: none; color: var(--epsa-accent); }
epsa-flower svg { display: block; overflow: visible; }
epsa-flower .flower-line { fill: none; stroke: currentColor; }
epsa-flower .k-seed { color: var(--epsa-flower); }
epsa-flower .k-wreath, epsa-flower .k-rings { color: var(--epsa-accent); }
epsa-flower .k-whole { color: var(--epsa-cream); }

/* ───────── Kopfleiste ─────────
   Einzelne schwebende Glas-Elemente, kein umschließender Kasten (10); berührt den Rand nie (07): sticky mit
   Mindestabstand, weil env(safe-area-inset-top) im Safari-Tab 0 ist.
   Abweichungen: Raster 1fr auto 1fr wie Admin, damit die Navigation wirklich mittig steht (10); Crate hat nur
   Logo links und Knöpfe rechts. Breite wie Crate auf --epsa-layout-container-max begrenzt, ohne Media Query. */
.app-hdr {
  position: sticky;
  z-index: 30;
  top: max(env(safe-area-inset-top), var(--epsa-space-s8));
  margin-top: var(--epsa-space-s8);
  margin-inline: max(var(--epsa-space-s12), env(safe-area-inset-left), calc((100% - var(--epsa-layout-container-max)) / 2))
    max(var(--epsa-space-s12), env(safe-area-inset-right), calc((100% - var(--epsa-layout-container-max)) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--epsa-space-s8);
}
/* Kinder: Logo-Pille, Navigation (.hdr-nav, mittig), rechts .hdr-end mit Knöpfen und Nutzermenü. */
.app-hdr > :first-child { justify-self: start; }
.hdr-end { grid-column: -2; justify-self: end; display: flex; align-items: center; gap: var(--epsa-space-s8); }
.hdr-pill {
  display: flex;
  align-items: center;
  height: var(--epsa-size-control);
  border-radius: var(--epsa-radius-pill);
  text-decoration: none;
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
}
.hdr-logo { flex: none; padding: 0 var(--epsa-space-s16) 0 var(--epsa-space-s10); }
.hdr-nav { gap: var(--epsa-space-s2); padding: var(--epsa-space-s4); }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--epsa-space-s8);
  height: var(--epsa-size-chip);
  padding: 0 var(--epsa-space-s14);
  border-radius: var(--epsa-radius-pill);
  font-size: var(--epsa-font-size-control);
  font-weight: var(--epsa-font-weight-medium);
  color: var(--epsa-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--epsa-motion-hover) ease, color var(--epsa-motion-hover) ease;
}
.nav-link:hover { color: var(--epsa-fg); }
.nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--epsa-fg);
  background: var(--epsa-surface-active);
  box-shadow: inset 0 0 0 1px var(--epsa-surface-active-ring);
}
.nav-link svg, .user-menu-item svg {
  flex: none;
  width: var(--epsa-size-icon);
  height: var(--epsa-size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
epsa-icon { display: inline-flex; flex: none; }
/* Zähler: in der Kopfleiste im Fluss, im Dock absolut oben rechts am Symbol (10: nie im Fluss, sonst bricht der
   Eintrag um). Abweichung: hell mit dunkler Schrift wie Crate (Admin: Rot). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--epsa-size-badge);
  height: var(--epsa-size-badge);
  padding: 0 var(--epsa-space-s4);
  border-radius: var(--epsa-radius-pill);
  background: var(--epsa-focus);
  color: var(--epsa-bg);
  font-size: var(--epsa-font-size-micro);
  font-weight: var(--epsa-font-weight-bold);
  line-height: var(--epsa-font-line-height-none);
}
/* Runder Glasknopf in der Kopfleiste (Crate .hdr-add): weißer Schimmer, keine massiv weiße Fläche (10). */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--epsa-size-control);
  height: var(--epsa-size-control);
  padding: 0;
  border: 0;
  border-radius: var(--epsa-radius-pill);
  color: var(--epsa-fg);
  cursor: pointer;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-button-top) * 100%), transparent),
      color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-button-mid) * 100%), transparent) 55%,
      color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-liquid-button-end) * 100%), transparent)),
    color-mix(in srgb, var(--epsa-color-glass-tint) calc(var(--epsa-opacity-liquid-button-tint) * 100%), transparent);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
}
.hdr-btn svg { width: var(--epsa-size-icon-dock); height: var(--epsa-size-icon-dock); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Kopfleiste ohne eigene Mittelung, wenn die App die Breite schon vorgibt (kb: Seitenrahmen um Kopf und Inhalt). */
.app-hdr.is-flush { margin-inline: 0; }
/* Knopf, den unter layout.dockBelow ein Dock-Eintrag ersetzt (kb: Hinzufügen). */
@media (max-width: 760px) { /* epsa-allow: Breakpoint layout.dockBelow */
  .hdr-btn.is-dock-replaced { display: none; }
}

/* ───────── Suche (<epsa-search>) ─────────
   Glas-Pille in .hdr-end, Höhe wie die Knöpfe. Breit sichtbar, unter layout.dockBelow nur mit .app-hdr.is-searching:
   dann ersetzt sie das Logo und füllt die Zeile (das Dock öffnet sie). Abweichung: Crate und Admin haben keine Suche
   in der Kopfleiste, die Form folgt .hdr-pill. */
.hdr-search {
  display: flex;
  align-items: center;
  gap: var(--epsa-space-s8);
  height: var(--epsa-size-control);
  min-width: 0;
  padding: 0 var(--epsa-space-s14);
  border-radius: var(--epsa-radius-pill);
  color: var(--epsa-muted);
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
}
.hdr-search:focus-within { color: var(--epsa-fg); box-shadow: var(--epsa-shadow-liquid), inset 0 0 0 1px var(--epsa-surface-active-ring); }
.hdr-search svg { flex: none; width: var(--epsa-size-icon); height: var(--epsa-size-icon); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hdr-search-input {
  flex: 1;
  width: var(--epsa-size-search);
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--epsa-fg);
  font: inherit;
  font-size: var(--epsa-font-size-input);
  -webkit-appearance: none;
  appearance: none;
}
.hdr-search-input::placeholder { color: var(--epsa-muted); }
@media (max-width: 760px) { /* epsa-allow: Breakpoint layout.dockBelow */
  .hdr-search { display: none; }
  .app-hdr.is-searching > :first-child { display: none; }
  .app-hdr.is-searching .hdr-end { grid-column: 1 / -1; justify-self: stretch; }
  .app-hdr.is-searching .hdr-search { display: flex; flex: 1; }
  .app-hdr.is-searching .hdr-end > .hdr-btn { display: none; }
}

/* ───────── Dock (<epsa-dock>) ─────────
   Crate hat im Web kein Dock (dort die Abspiel-Leiste); Vorlage Admin und 10: schwebend, Abstand zu Rand und Seiten,
   Liquid Glass wie die Abspiel-Leiste, Einträge Symbol über kurzem Text, aktiver Eintrag als helle Pille. */
.dock {
  display: none;
  position: fixed;
  z-index: 30;
  left: max(var(--epsa-space-dock-inset), env(safe-area-inset-left));
  right: max(var(--epsa-space-dock-inset), env(safe-area-inset-right));
  bottom: max(var(--epsa-space-dock-inset), env(safe-area-inset-bottom));
  justify-content: space-around;
  padding: var(--epsa-space-s4);
  border-radius: var(--epsa-radius-dock);
  background: var(--epsa-lg-fill), var(--epsa-lg-tint-bar);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
}
.dock .nav-link {
  flex: 1;
  flex-direction: column;
  gap: var(--epsa-space-s2);
  height: auto;
  padding: var(--epsa-space-s8);
  border-radius: var(--epsa-radius-dock-item);
  font-size: var(--epsa-font-size-micro);
}
.dock .nav-link svg { width: var(--epsa-size-icon-dock); height: var(--epsa-size-icon-dock); }
.dock .nav-badge { position: absolute; top: var(--epsa-space-s2); left: calc(50% + var(--epsa-space-s6)); }
/* = layout.dockBelow. Media Queries kennen keine Variablen. */
@media (max-width: 760px) { /* epsa-allow: Breakpoint layout.dockBelow */
  .dock, .dock.is-always { display: flex; }
body:has(.dock.is-always) { padding-bottom: calc(var(--epsa-layout-page-end-dock) + env(safe-area-inset-bottom)); }
  .hdr-nav { display: none; }
  .app-hdr { grid-template-columns: 1fr auto; }
  body:has(.dock) { padding-bottom: calc(var(--epsa-layout-page-end-dock) + env(safe-area-inset-bottom)); }
}
.dock.is-always { display: flex; }
body:has(.dock.is-always) { padding-bottom: calc(var(--epsa-layout-page-end-dock) + env(safe-area-inset-bottom)); }

/* ───────── Nutzermenü (<epsa-user-menu>) ─────────
   Ein Avatar-Knopf, Menü per Klick (10). Abweichungen: Hover-Kante zusätzlich zur Glas-Kante (Admin; bei Crate
   ersetzt die Hover-Regel die Glas-Kante). Versionszeile „<App> v<Version> · Was ist neu?“ am Ende (10, Admin);
   Crate hat dort Datenschutz/Impressum. Zähler 11 px statt 10 px (kein eigenes Token für 10 px). */
.user-menu { position: relative; display: flex; flex: none; align-items: center; height: var(--epsa-size-control); }
.user-menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  width: var(--epsa-size-control);
  height: var(--epsa-size-control);
  padding: var(--epsa-space-avatar-ring);
  border: 0;
  border-radius: var(--epsa-radius-pill);
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
  color: var(--epsa-fg);
  font-size: var(--epsa-font-size-input);
  font-weight: var(--epsa-font-weight-semibold);
  cursor: pointer;
  transition: box-shadow var(--epsa-motion-quick) ease;
}
.user-menu-trigger:hover, .user-menu-trigger[aria-expanded="true"] {
  box-shadow: var(--epsa-shadow-liquid),
    inset 0 0 0 1px color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-avatar-hover) * 100%), transparent);
}
.user-menu-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--epsa-radius-pill);
}
.user-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu-badge {
  position: absolute;
  top: calc(var(--epsa-space-s4) * -1);
  right: calc(var(--epsa-space-s4) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--epsa-space-s16);
  height: var(--epsa-space-s16);
  padding: 0 var(--epsa-space-s4);
  border-radius: var(--epsa-radius-pill);
  background: var(--epsa-focus);
  color: var(--epsa-bg);
  font-size: var(--epsa-font-size-micro);
  font-weight: var(--epsa-font-weight-bold);
  line-height: var(--epsa-font-line-height-none);
}
.user-menu-list {
  position: absolute;
  top: calc(100% + var(--epsa-space-s8));
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: var(--epsa-layout-menu-min);
  padding: var(--epsa-space-s6);
  border-radius: var(--epsa-radius-card);
  background: var(--epsa-lg-fill), var(--epsa-lg-tint-menu);
  -webkit-backdrop-filter: blur(var(--epsa-blur-menu)) saturate(var(--epsa-number-glass-saturate));
  backdrop-filter: blur(var(--epsa-blur-menu)) saturate(var(--epsa-number-glass-saturate));
  box-shadow: var(--epsa-shadow-liquid), var(--epsa-shadow-menu);
}
.user-menu-head {
  display: flex;
  flex-direction: column;
  gap: var(--epsa-space-s2);
  padding: var(--epsa-space-s8) var(--epsa-space-s10);
  margin-bottom: var(--epsa-space-s4);
  border-bottom: 1px solid var(--epsa-surface-divider);
}
.user-menu-name, .user-menu-mail {
  overflow: hidden;
  max-width: var(--epsa-layout-menu-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-name { font-size: var(--epsa-font-size-small); font-weight: var(--epsa-font-weight-semibold); }
.user-menu-mail { font-size: var(--epsa-font-size-kicker); color: var(--epsa-muted); }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--epsa-space-s8);
  width: 100%;
  padding: var(--epsa-space-s8) var(--epsa-space-s10);
  border: 0;
  border-radius: var(--epsa-radius-item);
  background: transparent;
  color: var(--epsa-fg);
  font-size: var(--epsa-font-size-small);
  font-weight: var(--epsa-font-weight-medium);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--epsa-surface-hover); outline: none; }
.user-menu-item .nav-badge { margin-left: auto; }
.user-menu-version {
  display: flex;
  flex-wrap: wrap;
  gap: var(--epsa-space-s4);
  padding: var(--epsa-space-s8) var(--epsa-space-s10) var(--epsa-space-s6);
  margin-top: var(--epsa-space-s4);
  border-top: 1px solid var(--epsa-surface-divider);
  font-size: var(--epsa-font-size-kicker);
  color: var(--epsa-muted);
}
.user-menu-version button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; }
.user-menu-version button:hover { color: var(--epsa-fg); }

/* ───────── Glocke (<epsa-bell>) ─────────
   Benachrichtigungen in .hdr-end: Knopf wie .hdr-btn, Zähler wie am Avatar, Liste wie das Nutzermenü, nur breiter
   (bis layout.toastMax, auf dem Handy Bildschirmbreite minus Rand) und mit Bildlauf. Ton-Punkt wie beim Toast;
   gelesene Einträge treten zurück (muted, Punkt aus). Crate hat keine Liste, Vorbild ist der Admin-Posteingang. */
.bell-trigger { position: relative; overflow: visible; }
.bell-list {
  width: min(var(--epsa-layout-toast-max), calc(100vw - var(--epsa-space-s16) * 2));
  max-height: calc(100dvh - var(--epsa-layout-toast-top) - var(--epsa-space-s16));
  overflow-y: auto;
}
.bell-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--epsa-space-s8); }
.bell-all {
  padding: 0;
  border: 0;
  background: none;
  color: var(--epsa-accent);
  font-size: var(--epsa-font-size-kicker);
  font-weight: var(--epsa-font-weight-medium);
  cursor: pointer;
}
.bell-all:hover { text-decoration: underline; }
.bell-item { align-items: start; white-space: normal; color: var(--epsa-muted); }
.bell-item.is-unread { color: var(--epsa-fg); }
.bell-dot {
  flex: none;
  width: var(--epsa-size-dot);
  height: var(--epsa-size-dot);
  margin-top: calc((1lh - var(--epsa-size-dot)) / 2);
  border-radius: var(--epsa-radius-pill);
  background: transparent;
}
.bell-item.is-unread .bell-dot { background: var(--epsa-accent); }
.bell-item.is-unread.is-ok .bell-dot { background: var(--epsa-color-status-online); }
.bell-item.is-unread.is-bad .bell-dot { background: var(--epsa-color-status-danger); }
.bell-text { display: grid; gap: var(--epsa-space-s2); min-width: 0; }
.bell-title { overflow-wrap: anywhere; }
.bell-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-kicker);
  font-weight: var(--epsa-font-weight-regular);
}
.bell-time { color: var(--epsa-muted); font-size: var(--epsa-font-size-micro); font-weight: var(--epsa-font-weight-regular); }
.bell-empty { padding: var(--epsa-space-s8) var(--epsa-space-s10); color: var(--epsa-muted); font-size: var(--epsa-font-size-small); }

/* ───────── Knöpfe ─────────
   .btn-hype ist der eine Hauptknopf je Ansicht (Login, Speichern). Abweichung: Verlaufsenden aus accent mit cream
   bzw. bg gemischt statt fest #f7c184/#d9853a (Crate), damit der Knopf mit dem Theme geht; Schrift accentOn statt
   fest #1a0f05. Größen wie Admin (.btn), Crate setzt sie im Markup (rounded-xl px-4 py-3.5). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--epsa-space-s8);
  padding: var(--epsa-space-s14) var(--epsa-space-s16);
  border: 0;
  border-radius: var(--epsa-radius-control);
  font-weight: var(--epsa-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--epsa-motion-press) ease, box-shadow var(--epsa-motion-hover) ease,
    filter var(--epsa-motion-hover) ease, border-color var(--epsa-motion-field) ease, background var(--epsa-motion-hover) ease;
}
.btn:active:not(:disabled) { transform: scale(var(--epsa-number-press-scale-web)); }
.btn:disabled { opacity: var(--epsa-opacity-button-disabled); cursor: default; }
.btn-hype {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--epsa-accent), var(--epsa-cream) calc(var(--epsa-opacity-button-light) * 100%)),
    var(--epsa-accent) 50%,
    color-mix(in srgb, var(--epsa-accent), var(--epsa-bg) calc(var(--epsa-opacity-button-dark) * 100%)));
  color: var(--epsa-accent-on);
  font-weight: var(--epsa-font-weight-semibold);
  box-shadow:
    0 var(--epsa-size-button-glow-y) var(--epsa-size-button-glow-blur) var(--epsa-size-button-glow-spread)
      color-mix(in srgb, var(--epsa-accent) calc(var(--epsa-opacity-button-glow) * 100%), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-button-shine) * 100%), transparent);
}
.btn-hype:hover:not(:disabled) {
  filter: brightness(var(--epsa-number-button-hover-brightness));
  box-shadow:
    0 var(--epsa-size-button-glow-y-hover) var(--epsa-size-button-glow-blur-hover) var(--epsa-size-button-glow-spread)
      color-mix(in srgb, var(--epsa-accent) calc(var(--epsa-opacity-button-glow-hover) * 100%), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-button-shine) * 100%), transparent);
}
.btn-quiet {
  border: 1px solid var(--epsa-border);
  background: color-mix(in srgb, var(--epsa-card) calc(var(--epsa-opacity-button-quiet) * 100%), transparent);
  color: var(--epsa-fg);
}
.btn-quiet:hover:not(:disabled) { border-color: color-mix(in srgb, var(--epsa-accent) calc(var(--epsa-opacity-button-quiet-hover) * 100%), transparent); }
.btn-danger {
  border: 1px solid color-mix(in srgb, var(--epsa-color-status-danger) calc(var(--epsa-opacity-button-danger-ring) * 100%), transparent);
  background: transparent;
  color: var(--epsa-color-status-danger-text);
}
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--epsa-color-status-danger) calc(var(--epsa-opacity-button-danger-hover) * 100%), transparent); }
.btn-sm { padding: var(--epsa-space-s6) var(--epsa-space-s14); border-radius: var(--epsa-radius-pill); font-size: var(--epsa-font-size-small); }

/* Runder Symbolknopf (Crate .icon-btn): Liquid Glass, Symbol gedämpft. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--epsa-size-chip);
  height: var(--epsa-size-chip);
  padding: 0;
  border: 0;
  border-radius: var(--epsa-radius-pill);
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  box-shadow: var(--epsa-shadow-liquid);
  color: var(--epsa-muted);
  cursor: pointer;
  transition: color var(--epsa-motion-quick) ease, background var(--epsa-motion-hover) ease;
}
.icon-btn svg { width: var(--epsa-size-icon); height: var(--epsa-size-icon); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { color: var(--epsa-fg); }
.icon-btn.is-on { color: var(--epsa-focus); }
.icon-btn.is-danger:hover:not(:disabled) { color: var(--epsa-color-status-danger-text); }
.icon-btn:disabled { opacity: var(--epsa-opacity-button-disabled); cursor: default; }

/* ───────── Pillen ───────── */
/* Tab-Pille (Crate „Alle / Meine“): Glaspille statt Unterstreichung. */
.tab-pill {
  height: var(--epsa-size-chip);
  padding: 0 var(--epsa-space-s14);
  border: 0;
  border-radius: var(--epsa-radius-pill);
  background: transparent;
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-small);
  font-weight: var(--epsa-font-weight-medium);
  cursor: pointer;
  transition: background var(--epsa-motion-hover) ease, color var(--epsa-motion-quick) ease, box-shadow var(--epsa-motion-hover) ease;
}
.tab-pill:hover { color: var(--epsa-fg); }
.tab-pill.is-active, .tab-pill[aria-selected="true"], .tab-pill[aria-pressed="true"] {
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
  color: var(--epsa-fg);
}
/* Filter-Pille ohne Füllung (Crate .circle-pill). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--epsa-space-s4);
  height: var(--epsa-size-chip);
  padding: 0 var(--epsa-space-s14);
  border: 1px solid var(--epsa-surface-ring);
  border-radius: var(--epsa-radius-pill);
  background: transparent;
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-kicker);
  font-weight: var(--epsa-font-weight-medium);
  cursor: pointer;
  transition: background var(--epsa-motion-hover) ease, color var(--epsa-motion-quick) ease, border-color var(--epsa-motion-hover) ease;
}
.chip:hover { color: var(--epsa-fg); border-color: var(--epsa-surface-ring-hover); }
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--epsa-lg-fill), var(--epsa-lg-tint);
  -webkit-backdrop-filter: var(--epsa-lg-blur);
  backdrop-filter: var(--epsa-lg-blur);
  box-shadow: var(--epsa-shadow-liquid);
  color: var(--epsa-fg);
}
/* Tag-Pille (Crate .genre-pill): leicht getönt in accentSoft, keine eigene Farbe je Tag. */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--epsa-space-s4);
  height: var(--epsa-size-tag);
  padding: 0 var(--epsa-space-s8);
  border: 0;
  border-radius: var(--epsa-radius-pill);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--epsa-accent-soft) calc(var(--epsa-opacity-tag-from) * 100%), transparent),
    color-mix(in srgb, var(--epsa-accent-soft) calc(var(--epsa-opacity-tag-to) * 100%), transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--epsa-accent-soft) calc(var(--epsa-opacity-tag-ring) * 100%), transparent);
  color: color-mix(in srgb, var(--epsa-fg), var(--epsa-accent-soft) calc(var(--epsa-opacity-tag-text) * 100%));
  font-size: var(--epsa-font-size-tag);
  font-weight: var(--epsa-font-weight-medium);
  letter-spacing: var(--epsa-font-tracking-tag);
  white-space: nowrap;
}
button.tag-pill { cursor: pointer; }
.tag-pill:hover, .tag-pill:focus-within {
  color: var(--epsa-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--epsa-accent-soft) calc(var(--epsa-opacity-tag-ring-hover) * 100%), transparent);
}
.tag-pill.is-on { background: var(--epsa-fg); box-shadow: none; color: var(--epsa-bg); }
/* Status-Pille mit Ton (Admin; Crate hat keine): Ereignisse, Zustände. Abweichung: Ton ok in status.online wie
   Crates Toast (Admin: eigenes Grün #8fbf7a). */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--epsa-space-s2) var(--epsa-space-s8);
  border-radius: var(--epsa-radius-pill);
  background: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-pill) * 100%), transparent);
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-micro);
  font-weight: var(--epsa-font-weight-semibold);
  letter-spacing: var(--epsa-font-tracking-pill);
  white-space: nowrap;
}
.pill.is-warn { background: color-mix(in srgb, var(--epsa-accent) calc(var(--epsa-opacity-surface-tone) * 100%), transparent); color: var(--epsa-accent); }
.pill.is-bad { background: color-mix(in srgb, var(--epsa-color-status-danger) calc(var(--epsa-opacity-surface-tone) * 100%), transparent); color: var(--epsa-color-status-danger-text); }
.pill.is-ok { background: color-mix(in srgb, var(--epsa-color-status-online) calc(var(--epsa-opacity-surface-tone-ok) * 100%), transparent); color: var(--epsa-color-status-online); }

/* ───────── Segment-Schalter ─────────
   Wenige Modi (10), ruhige Fläche, gewählte Option hebt sich leicht ab wie macOS/iOS (Crate .seg). Abweichungen:
   Admin hat eine Pille mit Bernstein-Verlauf; die fällt weg, Crate ist Vorlage. Innenabstand 12 statt 11 px (Raster). */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--epsa-space-s2);
  padding: var(--epsa-space-s2);
  border: 0;
  border-radius: var(--epsa-radius-seg);
  background: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-seg) * 100%), transparent);
  box-shadow: inset 0 0 0 1px var(--epsa-glass-edge);
}
.seg > button, .seg-option {
  height: var(--epsa-size-seg);
  padding: 0 var(--epsa-space-s12);
  border: 0;
  border-radius: var(--epsa-radius-seg-option);
  background: transparent;
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-kicker);
  font-weight: var(--epsa-font-weight-medium);
  cursor: pointer;
  transition: background var(--epsa-motion-seg) ease, color var(--epsa-motion-seg) ease;
}
.seg > button:hover, .seg-option:hover { color: var(--epsa-fg); }
.seg > button[aria-pressed="true"], .seg > button[aria-checked="true"], .seg-option.is-on {
  background: color-mix(in srgb, var(--epsa-color-light) calc(var(--epsa-opacity-surface-seg-on) * 100%), transparent);
  color: var(--epsa-fg);
  box-shadow: var(--epsa-shadow-seg-on);
}
.seg > button:disabled, .seg-option:disabled { opacity: var(--epsa-opacity-button-disabled); cursor: not-allowed; }

/* ───────── Toast ─────────
   Kurze Rückmeldung, schwebt unter der Kopfleiste (Crate notify.tsx): Glas-Karte mit Weichzeichner, Ton-Punkt.
   Abweichungen: Ton „bad“ dazu (Admin zeigt Fehler im Toast). Kein Dauerpulsieren beim Ton „warn“ (Crate:
   animate-pulse), weil außer der Flower nichts endlos läuft (05). Die Leiste hält Abstand zu den Seiten statt
   inset-x-0 (07: feste Elemente berühren den Rand nicht). */
.toast-host {
  position: fixed;
  z-index: 60;
  top: calc(env(safe-area-inset-top) + var(--epsa-layout-toast-top));
  left: var(--epsa-space-s16);
  right: var(--epsa-space-s16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--epsa-space-s8);
  pointer-events: none;
}
/* Punkt und Text oben, die Knöpfe als Reihe darunter, rechtsbündig (nie neben einer langen Liste eingequetscht). */
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: var(--epsa-space-s10);
  row-gap: var(--epsa-space-s8);
  max-width: var(--epsa-layout-toast-max);
  padding: var(--epsa-space-s10) var(--epsa-space-s14);
  border-radius: var(--epsa-radius-card);
  background: url(noise.png) 0 0 / var(--epsa-size-noise-tile) repeat, var(--epsa-glass-sheen), var(--epsa-glass-bg);
  -webkit-backdrop-filter: blur(var(--epsa-blur-glass));
  backdrop-filter: blur(var(--epsa-blur-glass));
  box-shadow: inset 0 0 0 1px var(--epsa-glass-edge), inset 0 1px 0 var(--epsa-glass-light), var(--epsa-shadow-card);
  color: var(--epsa-fg);
  font-size: var(--epsa-font-size-control);
  pointer-events: auto;
}
.toast::before {
  content: "";
  grid-area: 1 / 1;
  align-self: start;
  margin-top: calc((1lh - var(--epsa-size-dot)) / 2);
  flex: none;
  width: var(--epsa-size-dot);
  height: var(--epsa-size-dot);
  border-radius: var(--epsa-radius-pill);
  background: var(--epsa-muted);
}
.toast.is-warn::before { background: var(--epsa-accent); }
.toast.is-ok::before { background: var(--epsa-color-status-online); }
.toast.is-bad::before { background: var(--epsa-color-status-danger); }
.toast.is-bad { color: var(--epsa-color-status-danger-text); }
.toast > :not(button) { grid-area: 1 / 2 / 2 / -1; margin: 0; }
.toast > button { grid-row: 2; padding: var(--epsa-space-s6) var(--epsa-space-s10); border-radius: var(--epsa-radius-pill); }
.toast > button:last-of-type { grid-column: -2; }
.toast > button:nth-last-of-type(2) { grid-column: -3; }
.toast-close {
  border: 0;
  background: color-mix(in srgb, var(--epsa-fg) 7%, transparent);
  color: var(--epsa-muted);
  font-size: var(--epsa-font-size-control);
  cursor: pointer;
}
.toast-close:hover { color: var(--epsa-fg); }
.toast-body { display: grid; gap: var(--epsa-space-s4); min-width: 0; }
.toast-detail { color: var(--epsa-muted); font-size: var(--epsa-font-size-small); line-height: 1.35; }
.toast-notes { margin: 0; padding: 0 0 0 var(--epsa-space-s14); color: var(--epsa-muted); font-size: var(--epsa-font-size-small); line-height: 1.35; }
.toast-notes li + li { margin-top: var(--epsa-space-s2); }
.toast-more { list-style: none; margin-left: calc(var(--epsa-space-s14) * -1); }
.toast-action {
  border: 0;
  background: color-mix(in srgb, var(--epsa-accent) 18%, transparent);
  color: var(--epsa-accent);
  font: inherit;
  font-weight: var(--epsa-font-weight-semibold);
  cursor: pointer;
}

/* ───────── Theme oled ─────────
   Schwarzes Glas, Grau, Weiß; Rot nur als Leuchtpunkt. Keine Farbverläufe auf Flächen oder Schrift: Akzente sind flach
   und leuchten (Phosphor-Schein per Schatten), Licht und Schatten kommen vom Glas. */
[data-epsa-theme="oled"] .btn-hype {
  background: var(--epsa-accent);
  color: var(--epsa-accent-on);
  box-shadow: 0 0 0 1px var(--epsa-accent), 0 0 18px color-mix(in srgb, var(--epsa-accent) 45%, transparent), 0 0 46px color-mix(in srgb, var(--epsa-accent) 18%, transparent); /* epsa-allow: Phosphor-Schein oled */
}
[data-epsa-theme="oled"] .btn-hype:hover:not(:disabled) {
  filter: none;
  box-shadow: 0 0 0 1px var(--epsa-accent), 0 0 22px color-mix(in srgb, var(--epsa-accent) 60%, transparent), 0 0 60px color-mix(in srgb, var(--epsa-accent) 26%, transparent); /* epsa-allow: Phosphor-Schein oled */
}
[data-epsa-theme="oled"] .wordmark.is-stacked .logo-type { background: none; color: inherit; }
[data-epsa-theme="oled"] .wordmark.is-stacked .logo-a { color: var(--epsa-cream); }
[data-epsa-theme="oled"] .wordmark.is-stacked .logo-b {
  color: var(--epsa-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--epsa-accent) 70%, transparent), 0 0 42px color-mix(in srgb, var(--epsa-accent) 35%, transparent); /* epsa-allow: Phosphor-Schein oled */
}