/* ═══════════════════════════════════════════════════════════════════════════
   evpw-ui.css — Design-System-Primitive (evpw-*)

   Eigener @layer evpw (nach components, vor utilities — Reihenfolge in tokens.css).
   NUR Tokens, kein !important, kein Magic-Value. Kanon: handbuch/DESIGN-SYSTEM.md.
   Demo-/Forcier-Klassen (is-hover …) gehören NICHT hierher — nur echte Zustände.

   Diese Datei wächst Baustein für Baustein (Buttons zuerst); jede Familie wird im
   Schaukasten .project/mockup/v1-design-richtlinie.html (Spalte 4) live gerendert
   und dort per Websuche am breiten Vorbild-Feld belegt.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer evpw {

  /* ── Button: neutrale Matrix aus Betonung × Größe ─────────────────────────
     Ersetzt den Button-Wildwuchs (~14 Looks der aktuellen Seiten → 2 Achsen).
     Look: fondloser Gold-Hover (sekundär) wie im Bestand etabliert;
     Primary-Fill wie der Header-Login (.btn-primary). Basis (ohne Modifier) = sekundär.
     Vorbild: Primer (default/primary/danger/invisible × sm/md/lg), bestätigt Ant & Carbon. */
  .evpw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    block-size: var(--control-h-sm);
    padding-inline: var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
  }

  .evpw-btn:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--border-accent);
  }

  .evpw-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow);
  }

  .evpw-btn:active:not(:disabled) {
    filter: brightness(0.92);
  }

  .evpw-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* ── Größen-Achse ───────────────────────────────────────────────────────── */
  .evpw-btn--sm {
    block-size: var(--control-h-sm);
    padding-inline: var(--sp-3);
    font-size: var(--fs-xs);
  }

  .evpw-btn--md {
    block-size: var(--control-h);
    padding-inline: var(--sp-4);
    font-size: var(--fs-sm);
  }

  .evpw-btn--lg {
    block-size: var(--control-h-lg);
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
  }

  /* ── Betonungs-Achse (Basis = sekundär) ─────────────────────────────────── */
  .evpw-btn--primary {
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
  }

  .evpw-btn--primary:hover:not(:disabled) {
    color: var(--on-accent);
    background: var(--accent-bright);
    border-color: var(--accent-bright);
  }

  .evpw-btn--danger {
    color: var(--danger);
  }

  .evpw-btn--danger:hover:not(:disabled) {
    color: var(--danger);
    background: var(--danger-dim);
    border-color: var(--danger);
  }

  .evpw-btn--ghost {
    color: var(--text-2);
    background: transparent;
    border-color: transparent;
  }

  .evpw-btn--ghost:hover:not(:disabled) {
    color: var(--text-1);
    background: var(--bg-hover);
  }

  /* Toggle-/Pressed-Zustand (aria-pressed="true"): „an" = Gold-Fill, wie ein An-Schalter.
     Gespiegelt aus den gedrückten Toggle-/Segment-Buttons im Bestand. */
  .evpw-btn[aria-pressed="true"] {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
  }

  /* Gedrückt + Hover: wie --primary:hover (hellerer Gold-Fill = sichtbares Feedback, Schrift
     bleibt --on-accent) — die Basis-Hover-Regel (Gold-TEXT) ist spezifischer als der
     Pressed-Zustand und machte Text auf dem Gold-Fill sonst unsichtbar. */
  .evpw-btn[aria-pressed="true"]:hover:not(:disabled) {
    color: var(--on-accent);
    background: var(--accent-bright);
    border-color: var(--accent-bright);
  }

  /* is-off: ausgegrauter „nicht erlaubt"-Platzhalter (auch auf Nicht-Button-Elementen, z. B. Span). */
  .evpw-btn.is-off {
    cursor: default;
    pointer-events: none;
    opacity: 0.35;
  }

  /* ── Icon-Quadrat (mit jeder Größe kombinierbar) ──────────────────────────
     Feste Kantenlänge je Größe aus der Spacing-Skala (kein Magic-Value);
     aspect-ratio leitet die Höhe ab → echtes Quadrat, Zeichen zentriert. */
  /* Icon-Quadrat: feste Höhe (aus der Größe) + aspect-ratio 1 → inline-size = block-size. */
  .evpw-btn--square {
    padding-inline: 0;
    aspect-ratio: 1;
  }

  /* ── Farbton für kleine Identitäts-/Signal-Icon-Buttons ───────────────────
     Rollen (Admin=gold/Co-Admin=purple/Editor=cyan/User=muted) und Status (entsperrt=green) in den
     dichten Aktions-Spalten der Benutzer-Tabelle. Bewusst NEBEN der Betonungsachse: Rollen-/Signalfarben
     sind eine eigene Skala (FARBKONZEPT.md), keine Betonung. Rot bleibt der kanonische --danger. Benannte
     Klassen (statt inline-Farbe) → CSP-konform, gleich nutzbar aus JS-Tabelle UND PHP-Legende. Rand/Hover
     leiten via currentcolor aus der Farbe ab (ein Regelblock); die gefüllte Basis-Fläche (bg-card) grenzt
     den Button vom getönten Rollen-Anzeige-Swatch ab. */
  .evpw-btn--gold,
  .evpw-btn--purple,
  .evpw-btn--cyan,
  .evpw-btn--green,
  .evpw-btn--muted {
    border-color: color-mix(in srgb, currentcolor 35%, transparent);
  }

  .evpw-btn--gold:hover:not(:disabled),
  .evpw-btn--purple:hover:not(:disabled),
  .evpw-btn--cyan:hover:not(:disabled),
  .evpw-btn--green:hover:not(:disabled),
  .evpw-btn--muted:hover:not(:disabled) {
    background: color-mix(in srgb, currentcolor 12%, transparent);
  }

  .evpw-btn--gold {
    color: var(--accent);
  }

  .evpw-btn--purple {
    color: var(--c-purple);
  }

  .evpw-btn--cyan {
    color: var(--c-cyan);
  }

  .evpw-btn--green {
    color: var(--c-green);
  }

  .evpw-btn--muted {
    color: var(--text-3);
  }

  /* Nicht klickbar, aber voll sichtbar (Legenden-Muster: zeigt das Icon nur als Erklärung). */
  .evpw-btn.ptr-none {
    cursor: default;
    pointer-events: none;
  }

  /* Reserviert den Platz einer Aktion unsichtbar (verhindert Spaltensprung zwischen Zeilen). */
  .evpw-btn.is-spacer {
    visibility: hidden;
    pointer-events: none;
  }

  /* ── Modal/Dialog: EIN Dialog-Look für beide IST-Familien — calc-modal* (geteilte confirm/prompt in
     footer.php, trotz Gear-Name site-weit) + account .modal-* (TOTP/Backup-Codes). Komponierbar:
     bg/head/title/close/body/detail/foot. Fußzeile RECHTSBÜNDIG (Primer alignEnd/Material 3/Carbon),
     Button-Reihenfolge im Markup Primär-links/Abbrechen-rechts bleibt (Projekt-Regel, DESIGN-SYSTEM §3 —
     die Rechtsbündigkeit betrifft nur den Aktions-Block, nicht die Reihenfolge darin). Ziel-Markup ist das
     native <dialog>+showModal() (Browser-Top-Layer → Fokus-Falle/Escape/::backdrop gratis, W3C APG) —
     Umstieg kommt in evpw-ui.js; das Styling hier ist bereits <dialog>-kompatibel. ── */

  /* Backdrop-Overlay: verdunkelt den Hintergrund, zentriert die Karte. Lange Dialoge scrollen
     (align-items: flex-start + overflow-y). Bei <dialog> übernimmt ::backdrop, der z-index entfällt. */
  .evpw-modal-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
    overflow-y: auto;
    background: rgb(0 0 0 / 60%);
  }

  .evpw-modal-bg[hidden] {
    display: none;
  }

  /* Die Dialog-Karte (Karten-Look: bg-card, 12px-Radius; Akzentrand hebt den Dialog vom Backdrop ab). */
  .evpw-modal {
    position: relative;
    inline-size: 100%;
    max-inline-size: 30rem;
    margin: auto;
    padding: var(--sp-6);
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
  }

  /* Schmal: kurze Bestätigung/Eingabe (confirm/prompt). */
  .evpw-modal--sm {
    max-inline-size: 24rem;
  }

  /* Breit: mehrspaltige Formulare / Code-Raster (Backup-Codes). */
  .evpw-modal--wide {
    max-inline-size: 40rem;
  }

  /* Kopf: Titel links, Schließen-X rechts (space-between wie evpw-card-head — X im Fluss statt absolut). */
  .evpw-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  .evpw-modal-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-md);
    color: var(--accent);
  }

  /* Schließen-X — der EINE Close für alle Overlays/Panels/Modals (eigenes Primitiv neben evpw-btn):
     fondloser Icon-Button, dezent → hell bei Hover (Vorbild calc-modal-x/Primer). Die Positionierung
     (rechts) macht der jeweilige Header via space-between bzw. ein dünner Feature-Margin-Hook; der Fokusring
     kommt global aus base.css (:focus-visible). Ersetzt die früheren Feature-Closes (rev/img-lib/acc/legend/cal). */
  .evpw-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-h);
    block-size: var(--control-h);
    padding: 0;
    font-size: var(--fs-lg);
    line-height: 1;
    color: var(--text-2);
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
  }

  .evpw-close:hover {
    color: var(--text-1);
    background: var(--bg-hover);
  }

  /* Rumpf: Frage/Beschreibung des Dialogs. */
  .evpw-modal-body {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-1);
  }

  /* Objekt-Kennung („Titel" (slug)) unter der Frage. DEZENT gehalten — der Titel in normaler Textgröße/
     -farbe (keine zweite Überschrift); HERVORGEHOBEN ist der Slug, die eindeutige URL-ID, als Code-Teil
     (.evpw-modal-code). Vorbild GitHub: nicht das Objekt groß betiteln, sondern den zu bestätigenden
     Bezeichner im Code-Stil hervorheben. */
  .evpw-modal-ident {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-2);
  }

  .evpw-modal-ident-title {
    color: var(--text-1);
  }

  /* Hervorgehobener technischer Bezeichner (Slug) — mono + Gold, geteilt von Kennung UND „Zum
     Bestätigen …"-Satz (der zu tippende Name im Code-Stil, Vorbild GitHub). */
  .evpw-modal-code {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    /* Der Bezeichner ist zum Kopieren da → ein Klick markiert exakt den Slug-Inhalt (nicht das
       angrenzende Leerzeichen im Fließtext, das eine Doppelklick-Wort-Auswahl sonst mitnimmt). */
    user-select: all;
  }

  /* Konsequenz-/Detail-Zeile unter der Frage: Folge + Irreversibilität benennen (aus calc-modal-detail). */
  .evpw-modal-detail {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-2);
  }

  /* Fußzeile: Aktions-Block rechtsbündig (Vorbild-Konsens). Primär-links-Reihenfolge steht im Markup. */
  .evpw-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }

  /* Als natives <dialog> (showModal): Top-Layer + ::backdrop ersetzen das bg-div und den z-index.
     WICHTIG: `position: fixed; inset: 0` (+ `margin: auto` aus der Basis) zentriert den Dialog im
     Viewport. Ohne das erbt der Dialog `position: relative` (Basis, Rest aus dem alten Overlay-Design,
     als .evpw-modal die KARTE im .evpw-modal-bg-Overlay war) → er landet im normalen Fluss am Seitenende,
     und showModal() reißt die (lange) Seite beim Öffnen nach oben (Scroll-Sprung). Lange Dialoge scrollen
     im Dialog selbst. */
  dialog.evpw-modal {
    position: fixed;
    inset: 0;
    max-block-size: calc(100dvh - 2 * var(--sp-8));
    overflow-y: auto;
  }

  .evpw-modal::backdrop {
    background: rgb(0 0 0 / 60%);
  }

  /* Formfelder im Dialog nehmen die volle Breite (Prompt/Eingabe/Formular; Vorbild aller Dialog-Systeme). */
  .evpw-modal .evpw-input,
  .evpw-modal .evpw-textarea,
  .evpw-modal .evpw-select {
    inline-size: 100%;
  }

  /* ── Formfelder: EIN Feld-Look für Input/Select/Textarea ──────────────────
     Die ~7 IST-„Looks" sind dasselbe Textfeld mit zufälligem Radius/Fond.
     Vorbild: Primer FormControl / Material / Carbon = ein Feld + Zustände. */
  .evpw-input,
  .evpw-select,
  .evpw-textarea {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }

  /* Input/Select: feste Control-Höhe (--control-h) → cross-browser pixelgleich mit evpw-btn.
     Padding nur horizontal; der Text zentriert vertikal von selbst in der festen Höhe. */
  .evpw-input,
  .evpw-select {
    block-size: var(--control-h);
    padding-inline: var(--sp-3);
  }

  /* Select: natives Widget entstylen (erzwingt sonst eine eigene Höhe, FF≠Chromium) +
     eigener Pfeil als Inline-SVG statt nativem Dropdown-Dreieck. */
  .evpw-select {
    appearance: none;
    padding-inline-end: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238b949e' stroke-width='1.5' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
  }

  /* Textarea: mehrzeilig → keine feste Höhe, padding-basiert. */
  .evpw-textarea {
    padding: var(--sp-2) var(--sp-3);
    line-height: 1.5;
    inline-size: 100%;
    resize: vertical;
  }

  /* Größen-Achse (search-input groß, mult-input winzig → sm/lg; Basis = md). */
  .evpw-input--sm,
  .evpw-select--sm {
    block-size: var(--control-h-sm);
    padding-inline: var(--sp-2);
    font-size: var(--fs-xs);
  }

  .evpw-input--lg,
  .evpw-select--lg {
    block-size: var(--control-h-lg);
    padding-inline: var(--sp-4);
    font-size: var(--fs-base);
  }

  /* Select behält in ALLEN Größen den Pfeil-Freiraum rechts — die Größen-Regeln setzen
     padding-inline als Shorthand und ließen den Text sonst unter den Inline-SVG-Pfeil laufen. */
  .evpw-select--sm,
  .evpw-select--lg {
    padding-inline-end: var(--sp-8);
  }

  .evpw-input:focus-visible,
  .evpw-select:focus-visible,
  .evpw-textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  .evpw-input:disabled,
  .evpw-select:disabled,
  .evpw-textarea:disabled {
    cursor: default;
    opacity: 0.5;
  }

  .evpw-input[aria-invalid="true"],
  .evpw-textarea[aria-invalid="true"] {
    border-color: var(--danger);
  }

  /* Fehler als roter Platzhalter im leeren Feld (fieldError()-Muster). */
  .evpw-input[aria-invalid="true"]::placeholder,
  .evpw-textarea[aria-invalid="true"]::placeholder {
    color: var(--danger);
  }

  /* Inline-Meldung am Ort (inlineMsg()/Feldfehler): Basis neutral, Erfolg grün, Fehler rot. */
  .evpw-msg {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

  .evpw-msg--ok {
    color: var(--success);
  }

  .evpw-msg--err {
    color: var(--danger);
  }

  .evpw-label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

  /* ── Switch: sofort wirkende An/Aus-Einstellung (NN/g) — gespiegelt aus .switch.
     NICHT für Formulare mit Speichern-Button (dort Checkbox). Gerundetes Rechteck, keine Pille. */
  .evpw-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--sp-10);
    block-size: var(--sp-6);
  }

  .evpw-switch input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .evpw-switch-track {
    position: absolute;
    inset: 0;
    background: var(--bg-hover);
    border-radius: var(--radius);
    transition: background var(--t-fast);
  }

  /* Knopf: bewährte W3Schools-Technik — bottom+left verankert, Umschalten NUR per translateX.
     Track ohne Rand → Innenbox = block-size (24px); Knopf 16px bei bottom/left 4px = 4px Luft
     ringsum, zwangsläufig zentriert. bottom ändert sich nie → vertikal kein Versatz möglich. */
  .evpw-switch-track::before {
    content: "";
    position: absolute;
    bottom: var(--sp-1);
    left: var(--sp-1);
    inline-size: var(--sp-4);
    block-size: var(--sp-4);
    background: var(--text-2);
    border-radius: var(--radius-sm);
    transition: transform var(--t-fast), background var(--t-fast);
  }

  .evpw-switch input:checked + .evpw-switch-track {
    background: var(--accent);
  }

  .evpw-switch input:checked + .evpw-switch-track::before {
    background: var(--on-accent);
    transform: translateX(var(--sp-4));
  }

  .evpw-switch input:focus-visible + .evpw-switch-track {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow);
  }

  /* Gesperrt: dieselbe Abdunklung wie die Formularfelder der Zeile (§7, opacity .5) + Verbots-Cursor.
     Cursor MUSS auf den Track — der liegt (DOM-Reihenfolge, absolut) über dem opacity-0-Input und ist
     das Hover-Ziel. Bewusst NUR opacity — die Goldfarbe des „an"-Zustands bleibt (nur gedämpft/dunkler),
     damit an/aus ablesbar bleibt und der Switch sich in die gedimmte Zeile einfügt statt herauszustechen. */
  .evpw-switch input:disabled + .evpw-switch-track {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* ── Segment: 2–5 sich ausschließende Optionen (Apple HIG; >6 → Radio-Liste).
     Token-saubere Fassung des .lang-toggle-Musters, Radio-basiert (echte Einfach-Auswahl). */
  .evpw-seg {
    display: inline-flex;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .evpw-seg label {
    display: inline-flex;
    cursor: pointer;
  }

  .evpw-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .evpw-seg label > span {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-3);
    transition: color var(--t-fast), background var(--t-fast);
  }

  .evpw-seg label + label > span {
    border-left: 1px solid var(--border);
  }

  .evpw-seg label:hover > span {
    color: var(--text-1);
  }

  .evpw-seg input:checked + span {
    color: var(--on-accent);
    background: var(--accent);
  }

  /* ── Checkbox / Radio: Formular-Auswahl, wirkt erst bei Absenden (NN/g) ──── */
  .evpw-check,
  .evpw-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
  }

  .evpw-check input,
  .evpw-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .evpw-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--sp-4);
    block-size: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .evpw-check-box::after {
    content: "✓";
    font-size: var(--fs-xs);
    line-height: 1;
    color: var(--on-accent);
    opacity: 0;
  }

  .evpw-check input:checked + .evpw-check-box {
    background: var(--accent);
    border-color: var(--accent);
  }

  .evpw-check input:checked + .evpw-check-box::after {
    opacity: 1;
  }

  /* Radio rund (echte Rundung = erlaubte Ausnahme wie Status-Dots) */
  .evpw-radio-box {
    position: relative;
    inline-size: var(--sp-4);
    block-size: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 50%;
  }

  .evpw-radio-box::after {
    content: "";
    position: absolute;
    inset: var(--sp-1);
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
  }

  .evpw-radio input:checked + .evpw-radio-box {
    border-color: var(--accent);
  }

  .evpw-radio input:checked + .evpw-radio-box::after {
    opacity: 1;
  }

  .evpw-check input:focus-visible + .evpw-check-box,
  .evpw-radio input:focus-visible + .evpw-radio-box {
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  /* ── Badge: statischer Status-Träger, 8-px-Rechteck, Bedeutung über Farbe ──
     9 IST-„Looks" (Radien 4/8/Pille, Farben quer) = EIN Badge + Farb-Achse.
     Vorbild: Primer Label (ein Label + Schema-Farben). Basis = neutral. */
  .evpw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .evpw-badge--accent {
    color: var(--accent);
    border-color: var(--border-accent);
  }

  .evpw-badge--success {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
  }

  .evpw-badge--caution {
    color: var(--c-amber);
    border-color: color-mix(in srgb, var(--c-amber) 40%, transparent);
  }

  .evpw-badge--danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  }

  /* Violett — im Dashboard-Kontext „Geplant" (Hub-Karte ohne gebaute Seite): hebt sich als einzige kühle
     Signalfarbe klar von Live (grün) / Entwurf (gold) / Fehlt (rot) ab. Siehe FARBKONZEPT. */
  .evpw-badge--violet {
    color: var(--violet);
    border-color: color-mix(in srgb, var(--violet) 40%, transparent);
  }

  /* Größen-Achse (Vorbild: Carbon Tag sm/md/lg; Basis oben = md). */
  .evpw-badge--sm {
    padding: 0 var(--sp-1);
  }

  .evpw-badge--lg {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
  }

  /* ── Tag: der INTERAKTIVe Verwandte des Badge — entfernbar (✕), z. B. Filter/Auswahl.
     Vorbild: Smart Interface Design (Tag = interaktiv) / calm-chip. Sonst = Badge-Sprache. ── */
  .evpw-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .evpw-tag-x {
    display: inline-flex;
    padding: 0;
    line-height: 1;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .evpw-tag-x:hover {
    color: var(--danger);
    background: var(--danger-dim);
    border-radius: var(--radius-sm);
  }

  /* ── Button-Feedback: kurzer grün/roter Blitz am Button selbst (via flashButton(), ~1,2s).
     Inline, kein Toast/alert — deckt sich mit NN/g/Carbon/Primer (§7). Feld-Fehler siehe evpw-input
     [aria-invalid] + evpw-msg oben. Höhere Spezifität als die Basis → gewinnt für die Blitz-Dauer. */
  .evpw-btn.flash-ok {
    color: var(--success);
    background: var(--success-dim);
    border-color: var(--success);
  }

  .evpw-btn.flash-err {
    color: var(--danger);
    background: var(--danger-dim);
    border-color: var(--danger);
  }

  /* ── Button „beschäftigt" während async (via withBusy()): Text verborgen, gesperrt,
     zentrierter Spinner. Gespiegelt aus .btn.is-busy. ── */
  .evpw-btn.is-busy {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  .evpw-btn.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 1.1em;
    block-size: 1.1em;
    border: 2px solid color-mix(in srgb, var(--text-1) 25%, transparent);
    border-top-color: var(--accent-bright);
    border-radius: 50%;
    animation: evpw-spin 0.6s linear infinite;
  }

  /* Auf Gold-Fill dunkler Spinner (Kontrast). */
  .evpw-btn--primary.is-busy::after {
    border-color: color-mix(in srgb, var(--on-accent) 30%, transparent);
    border-top-color: var(--on-accent);
  }

  @keyframes evpw-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ── Karte: flacher, umrandeter Container (Material „outlined"/flat — bewusst KEINE Elevation/
     Schatten, passt zu „Gold flach"). Komponierbar: head/title/body/meta. 12px-Radius (Karten/Modals).
     ~14 IST-Karten/Panels (acc-section == gp-panel Duplikat) = EIN Container-Look. ── */
  .evpw-card {
    padding: var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  /* Kompakt (8px, weniger Padding — Vorbild: compare-card). */
  .evpw-card--sm {
    padding: var(--sp-3);
    border-radius: var(--radius);
  }

  /* Hervorgehoben/ausgewählt: Akzentrand (Vorbild: highlight-box / Carbon-Tile „selectable"). */
  .evpw-card--accent {
    border-color: var(--border-accent);
  }

  .evpw-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
  }

  .evpw-card-title {
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-1);
  }

  .evpw-card-body {
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .evpw-card-meta {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  /* Klickbare Karte → Gold-Rand bei Hover (flach; Vorbild: outlined-Card mit Border-Hover statt Elevation). */
  .evpw-card--link {
    cursor: pointer;
    transition: border-color var(--t-fast);
  }

  .evpw-card--link:hover {
    border-color: var(--border-accent);
  }

  /* Platzhalter „folgt bald": gestrichelt + gedimmt, kein Hover-Akzent. */
  .evpw-card--placeholder {
    border-style: dashed;
    color: var(--text-3);
  }

  .evpw-card--placeholder:hover {
    border-color: var(--border);
  }

  /* Read-only / nicht-interaktiv (Vorbild: Carbon read-only-States / Material disabled): Farb-Dämpfung
     statt Opacity — Inhalt bleibt lesbar/relevant (z. B. „geplant"), kein Hover-Akzent, Default-Cursor.
     Aus card--locked/--planned. Echtes „disabled" (Opacity + not-allowed) wäre separat, hier nicht nötig. */
  .evpw-card--muted {
    cursor: default;
    color: var(--text-3);
  }

  .evpw-card--muted .evpw-card-body {
    color: var(--text-3);
  }

  .evpw-card--muted:hover {
    border-color: var(--border);
  }

  /* ── Tabelle: EIN Tisch (unsere 2 IST-Muster data-table/gear-table = 2 Dichten). Gerundet
     (border-collapse: separate + spacing 0, damit border-radius greift), horizontale Zeilen-Linien +
     Zeilen-Hover. KEIN Zebra (Vorbild: kollidiert mit Hover/Selektion; nur horizontale Linien empfohlen —
     pencilandpaper/Carbon). Werte gespiegelt aus .data-table. ── */
  .evpw-table {
    inline-size: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-spacing: 0;
    font-size: var(--fs-sm);
    overflow: hidden;
  }

  .evpw-table th {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
  }

  .evpw-table td {
    padding: var(--sp-3) var(--sp-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
  }

  .evpw-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .evpw-table tbody tr:hover td {
    background: var(--bg-hover);
  }

  /* Dichte-Achse: kompakte Zeilen (die gear-table-Dichte). Vorbild: Carbon Row-Height. */
  .evpw-table--dense th,
  .evpw-table--dense td {
    padding: var(--sp-1) var(--sp-2);
  }

  /* Linien abschaltbar (Vorbild data-lines="none"): ruhige, randlose Zeilen. */
  .evpw-table--no-lines th,
  .evpw-table--no-lines td {
    border-bottom: 0;
  }

  /* Zahlen-Spalte rechtsbündig + tabellarische Ziffern (Vorbild: Zahlen rechts, Text links). */
  .evpw-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Aktions-Spalte rechtsbündig (Buttons via evpw-btn). */
  .evpw-table-actions {
    text-align: right;
    white-space: nowrap;
  }

  /* Scroll-Hülle für schmale Viewports (responsive). */
  .evpw-table-wrap {
    overflow-x: auto;
  }

  /* ── Tabs: Panel-Umschalter (NICHT Wert-Toggle — das ist evpw-seg §5). EIN Bauteil mit Varianten-Achse
     wie die Tabelle: Underline-Standard (Material 3 / Carbon „line" / Primer) + boxed/Ordner (Carbon
     „contained") für den am-Panel-klebenden Fall. Zwei IST-Zustandsnamen (tabs-tab is-active + cal-seg-btn
     is-on) → EIN aria-selected (W3C APG tablist/tab/tabpanel; Pfeiltasten-Nav kommt in evpw-ui.js). Die
     Alt-Gear-Box (.section-tab) und der Legende-Auslöser (.legend-tab, seitliches Panel-Handle) gehören
     bewusst NICHT hierher. ── */

  /* Leiste: role="tablist". Untere Trennlinie, an der die aktiven Marker sitzen (aus .tabs-nav). */
  .evpw-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
  }

  /* Underline-Tab (Standard): transparent; aktiver = Gold-Text + Gold-Unterstrich (deckt die Leisten-Linie
     via margin-bottom: -1px). aria-selected statt is-active/is-on. Gespiegelt aus .tabs-tab. */
  .evpw-tab {
    margin-bottom: -1px;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition:
      color var(--t-fast),
      border-color var(--t-fast);
  }

  .evpw-tab:hover {
    color: var(--text-1);
  }

  .evpw-tab[aria-selected="true"] {
    color: var(--accent-bright);
    border-bottom-color: var(--accent-bright);
  }

  .evpw-tab:focus-visible {
    outline: 2px solid transparent;
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 0 4px var(--accent-glow);
  }

  /* Panel: Inhalt unter der Leiste. Query-Container → das Layout darin reagiert auf die Panel-Breite. */
  .evpw-tab-panel {
    padding-top: var(--sp-3);
    container-type: inline-size;
  }

  /* Ordner-/Contained-Variante (Carbon „contained tabs"): Tabs als Kästen, oben gerundet, unten offen →
     kleben an der Panel-Kante. Aktiver = flacher Gold-Fond (Regel „Gold flach", KEIN Gradient wie IST
     cal-seg). Für den am-Panel sitzenden Fall (Kalender). Gespiegelt aus .cal-seg/.cal-seg-btn. */
  .evpw-tabs--boxed {
    border-bottom: 0;
  }

  .evpw-tabs--boxed .evpw-tab {
    flex: 1;
    margin-bottom: 0;
    text-align: center;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .evpw-tabs--boxed .evpw-tab[aria-selected="true"] {
    color: var(--on-accent);
    background: var(--accent);
    border-color: transparent;
  }

  /* ── Fortschritt: schlanke lineare Anzeige (determinate). Ein IST-Muster (jt-progress, Titel-Tracker).
     div + role="progressbar" (aria-valuenow/min/max) statt nativem <progress>: behält die weiche
     width-Transition (native <progress> animiert die Fill-Breite nicht zuverlässig) + Pille/Gold cross-engine
     ohne Vendor-Pseudo-Fummelei (::-webkit-progress-value / ::-moz-progress-bar). MDN erlaubt die Custom-div-
     Variante ausdrücklich für gestaltete Balken; Carbon macht es genauso. ── */

  /* Kopfzeile (optional): Label links, Zähler rechts. Aus jt-progress-top/-count. */
  .evpw-progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .evpw-progress-count {
    font-variant-numeric: tabular-nums;
  }

  /* Track: Pillen-Leiste, gedämpfter Fond, clippt den Fill (runde Enden). Basis 8px (Carbon „big"). */
  .evpw-progress {
    height: var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--bg-hover);
    overflow: hidden;
  }

  /* Schmal (Carbon „small", 4px): in Karten/Tabellen/Panels mit wenig Platz. */
  .evpw-progress--sm {
    height: var(--sp-1);
  }

  /* Fill: Gold (Leitfarbe für neutralen Fortschritt — NICHT Jade wie IST; Farbkonzept: Jade = Info/Tipp).
     Breite setzt das Markup (JS: style="width:X%" + aria-valuenow); weiche Transition. Bedeutungstragende
     Varianten (success/danger) bei Bedarf ergänzen — im Bestand kein Status-Fortschritt, daher YAGNI. */
  .evpw-progress-fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--t-fast);
  }

  /* ── Schwebende Flächen (§12): drei Vorbild-Primitive statt ~4 IST-Wildwuchs-Looks (ARIA APG / Carbon).
     Tooltip = non-interaktiver Hover-Hinweis · Menü = Aktions-/Options-Liste · Popover = Content-Container.
     Ein Schatten (--shadow-pop) für alle (Material: konsistent je Typ); z-Ordnung modal<popover<tooltip. ── */

  /* Tooltip: kleiner, NICHT-interaktiver Hinweis (ARIA role="tooltip"; Trigger via aria-describedby, schließt
     bei Escape). pointer-events:none → nie fokussierbar/klickbar, keine interaktiven Kinder. Aus .tip-pop;
     der IST-violett-Rand fällt weg (neutral --border — violett ist sonst Co-Admin/Mark-Farbe). */
  .evpw-tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    max-inline-size: 16rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    box-shadow: var(--shadow-pop);
    pointer-events: none;
  }

  .evpw-tooltip[hidden] {
    display: none;
  }

  /* Zusammenfassungs-Tooltip (attachSummaryTip): Überschrift + Label/Wert-Zeilen + Summen-Fuß.
     EINE Quelle für „Bestand", „Kosten" … (shared/hover-tip.js). */
  .evpw-tooltip__title {
    margin-bottom: var(--sp-1);
    color: var(--text-1);
    font-weight: 600;
  }

  /* Werte-Raster: Label (links) · Zahl (rechtsbündig) · Einheit (linksbündig). Die eigene Einheiten-
     Spalte hält unterschiedlich breite Einheiten (C vs EG) auseinander → die Zahlen fluchten. */
  .evpw-tooltip__rows {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 var(--sp-3);
    align-items: baseline;
  }

  .evpw-tooltip__num {
    color: var(--text-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .evpw-tooltip__unit {
    color: var(--text-2);
    text-align: left;
  }

  /* Summen-Fußzeile: alle drei Zellen durch eine feine Linie abgesetzt (Gesamt unter der Aufstellung). */
  .evpw-tooltip__cell--foot {
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
    font-weight: 600;
    border-top: 1px solid var(--border);
  }

  /* Item-Variante des Tooltips (Vorbild Wowhead-Game-Tooltip): breiter + dunkler Grund + Akzentrand
     fürs Spiel-Panel-Gefühl. Inhalt (Name-/Zeilenfarben gp-tt-*) stylen die Konsumenten in ihrer
     components-Schicht — hier nur die Panel-Geometrie (evpw schlägt components, s. tokens.css:9). */
  .evpw-tooltip--item {
    max-inline-size: 24rem;
    background: var(--bg-base);
    border-color: var(--border-accent);
    line-height: 1.5;
  }

  /* Variante für den Celestial-Infant-Simulator: dort ist das ganze Fenster ein 1:1-Nachbau des
     Client-Fensters, und der Client zeigt eine schmale, dunkle Tafel mit blaugrauem Rand und
     engen Zeilen — nicht unsere goldgerahmte Item-Tafel. Dieselbe Begründung wie bei den
     Slot-Koordinaten dort: die Optik gehört zum Nachbau (Strang celestial-infant-system.md §3d.1).
     Schriftfamilie hier direkt, nicht über `--ci-ui`: der Tooltip hängt an <body>, also außerhalb
     von `.ci`, wo diese Variable definiert ist. Zeilenfarben liefert die PW-Palette. */
  .evpw-tooltip--ci {
    /* Breite folgt dem Inhalt, damit jede Client-Zeile ungebrochen passt (der Zenith-Pool-Tooltip
       ist die längste: zehn Stufen mit je fünf Wahrscheinlichkeiten). Gedeckelt nur durch den
       Viewport — showHoverTip klemmt die Position ohnehin am Fensterrand. */
    inline-size: max-content;
    max-inline-size: calc(100vw - 2rem);
    padding: 6px 10px;
    background: rgb(20 20 20 / 94%);
    border-color: rgb(17 102 153);
    border-radius: 2px;
    color: var(--pw-q4);
    font-family: FZXiHei, var(--font-body, sans-serif);
    font-size: 13px;
    line-height: 1.45;
  }

  /* Menü: schwebende Aktions-/Options-Liste (ARIA role="menu" + menuitem). Akzentrand hebt es ab. Position
     setzt die konsumierende Seite/JS (absolute als Basis). Aus .page-ins-menu/.faction-popup. */
  .evpw-menu {
    position: absolute;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    min-inline-size: 9rem;
    padding: var(--sp-1);
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
  }

  /* Menü-Eintrag: linksbündig, Hover = Gold-Text + Gold-Glow-Fond. Aus .page-ins-item. Farb-Dot/Häkchen
     bleiben konsumenten-spezifische Kinder (kommen mit der Account-/Editor-Migration). */
  .evpw-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
      color var(--t-fast),
      background var(--t-fast);
  }

  .evpw-menu-item:hover {
    color: var(--accent);
    background: var(--accent-glow);
  }

  /* Aktuell gewählte Option (aus is-current → aria-current, ARIA-Linie wie aria-selected/aria-pressed). */
  .evpw-menu-item[aria-current="true"] {
    color: var(--accent);
    font-weight: 600;
  }

  /* Popover: schwebender Content-Container mit beliebigem Inhalt (Carbon: „einer zur Zeit", trigger-aktiviert,
     darf interaktiv sein). Wie eine schwebende Karte (12px, bg-card) + Schatten/z-index. Position/Größe setzt
     die konsumierende Seite. Aus .auth-popup; der große Fall (.legend-panel) = evpw-popover + evpw-modal-head. */
  .evpw-popover {
    position: fixed;
    z-index: var(--z-popover);
    padding: var(--sp-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
  }

  /* ── Leerzustand (§13): „nichts da"-Platzhalter, zentriert + gedämpft. Die ~30 IST-*-empty sind EIN Look.
     Komponierbar: optional Titel + Beschreibung + EINE Aktion (Vorbild Primer Blankslate / Carbon Empty State —
     Graphic/Icon bewusst weg, „keine Icons"-Regel). Wann Aktion: leer-weil-neu → Anlege-Flow; leer-weil-Fehler
     → Hilfe. — Der neutrale Begleit-/Helper-Text („Hint", ~14 IST-*-hint) ist KEIN eigenes Primitiv: er fällt
     auf evpw-msg (§7) zurück (gleicher Look: klein/gedämpft; --err ersetzt den Warn-Hint). Kein Duplikat. ── */
  .evpw-empty {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* Titel (etwas prominenter als der Body): benennt, WAS fehlt. Aus Primer „primary text". */
  .evpw-empty-title {
    margin-bottom: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-md);
    color: var(--text-2);
  }

  /* Aktions-Slot: Abstand über dem einen CTA (ein evpw-btn — Anlegen/Hilfe). */
  .evpw-empty-action {
    margin-top: var(--sp-4);
  }

  /* ── §14a Text-Elemente: Link · Trenner · Callout ────────────────────────────────────────────────── */

  /* Inline-Text-Link: fett + gestrichelte Gold-Unterlinie via border-bottom (NICHT text-decoration → schont
     Unterlängen; WCAG 1.4.1: nicht nur Farbe). Hover = voll-Gold. Aus .text-link. */
  .evpw-link {
    font-weight: 600;
    color: var(--accent-bright);
    border-bottom: 1px dashed var(--border-accent);
    transition:
      color var(--t-fast),
      border-color var(--t-fast);
  }

  .evpw-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* Trenner: dünne horizontale Linie (die ~7 IST-*-divider/-sep sind alle 1px border-Fond). Als <hr> oder div. */
  .evpw-divider {
    height: 1px;
    margin: var(--sp-3) 0;
    background: var(--border);
    border: 0;
  }

  /* Callout: kontextuelle Hinweis-Box im Fließtext (CMS-Content-Block). Persistent, NICHT dismissbar, KEIN
     Erfolg/Fehler-Status (Carbon: das ist Feedback §7). Titel + Text; kein Icon („keine Icons"-Regel). Farbachse
     wie Badge (§6) + Docusaurus-Kanon, auf unsere Palette gemappt: Basis neutral (note) · --info Jade (faltet
     tip+info; Farbkonzept Jade=Info/Tipp — Violett fällt weg) · --warning Rot (warning+danger) · --accent Gold
     (faltet maint+amber). Ränder via color-mix wie evpw-badge. Aus .callout*. */
  .evpw-callout {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-base);
  }

  .evpw-callout-title {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-1);
  }

  .evpw-callout-text {
    color: var(--text-2);
    line-height: 1.6;
  }

  /* Info (Jade): Tipp/Hinweis. */
  .evpw-callout--info {
    background: var(--tip-dim);
    border-color: color-mix(in srgb, var(--jade) 20%, transparent);
  }

  .evpw-callout--info .evpw-callout-title {
    color: var(--jade);
  }

  /* Warnung (Rot): Achtung/kritisch. */
  .evpw-callout--warning {
    background: var(--danger-dim);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
  }

  .evpw-callout--warning .evpw-callout-title {
    color: var(--danger);
  }

  /* Hervorhebung (Gold): Wartung/wichtig. */
  .evpw-callout--accent {
    background: var(--accent-glow);
    border-color: var(--border-accent);
  }

  .evpw-callout--accent .evpw-callout-title {
    color: var(--accent-bright);
  }

  /* ── §14b Navigation: Breadcrumb · Pager ─────────────────────────────────────────────────────────────
     legend-tab (Legende-Handle, 1 Nutzer) + jt-side-chevron (Disclosure-Dreieck) sind KEINE Primitive →
     bleiben Feature-CSS (auf Tokens gehoben bei ihrer Subsystem-Migration), nicht evpw-benannt. ── */

  /* Breadcrumb: Pfad-Navigation (W3C APG: <nav aria-label>, aktueller = aria-current="page"). Faltet die zwei
     IST-Muster (.breadcrumb Text + .img-lib-crumbs Buttons). Dezent (text-3). */
  .evpw-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  /* Segment (Link oder Button): klickbar, dezent → text-2 bei Hover. */
  .evpw-crumb {
    padding: 0;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);
  }

  .evpw-crumb:hover {
    color: var(--text-2);
  }

  /* Separator via CSS-Pseudo (W3C APG: nicht im DOM → nicht fokussiert/vorgelesen). */
  .evpw-crumb + .evpw-crumb::before {
    content: "/";
    margin-right: var(--sp-1);
    color: var(--text-3);
  }

  /* Aktuelle Seite (aria-current="page"): kein Klick-Ziel, etwas prominenter. */
  .evpw-crumb[aria-current="page"] {
    color: var(--text-2);
    cursor: default;
  }

  /* Pager: schlichtes Prev / Zähler / Next (W3C APG: <nav aria-label>; Prev/Next = evpw-btn, aria-current auf
     aktueller Seite). Keine nummerierte Pagination im Bestand → YAGNI. Aus .acc-pager. */
  .evpw-pager {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  /* Zähler „Seite X / Y": tabellarische Ziffern (springt nicht). Aus acc-pager .acc-hint. */
  .evpw-pager-count {
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
  }
}