/* ════════════════════════════════════════════════════════════════════════
   components.css — Account-Seite (Phase 3a-2/b): Tabs, Sektionen, Toggle
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
  .acc {
    display: flex;
    flex-direction: column;
  }

  /* Account-Sektions-Nav lebt in der Sidebar; Items = .sidebar-item.
     Desktop: vertikale Liste. Mobile-Leiste: siehe layout.css. */
  .acc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Gruppen-Titel dezent in Leitgold (nicht --accent-bright = zu laut). Nur hier gescoped,
       damit der geteilte .sidebar-label-Baustein (u. a. Gear-Planner) neutral bleibt. */
    & .sidebar-label {
      color: var(--accent);
    }
  }

  .acc-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  .acc-panel[hidden] {
    display: none;
  }

  .acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
  }

  .acc-row + .acc-row {
    border-top: 1px solid var(--border);
  }

  .acc-row-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-1);
  }

  .acc-row-desc {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-3);
  }

  .acc-row-value {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  /* Inline-Bestätigung der Konto-Präferenz-Selects (Zeitzone/Wochenanfang; kein Speichern-Button →
     change speichert sofort). */
  .acc-pref-msg {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--success);
  }

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

  /* Felder + Aktionen in einer umbrechenden Reihe statt gestapelt (spart Höhe).
     Genutzt vom Passwort-Formular und der 2FA-Verwaltung. Bricht auf schmalen
     Viewports automatisch um — jedes Feld hat eine Mindestbreite. */
  .acc-fields-row {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: var(--sp-3);
  }

  .acc-fields-row .auth-field {
    flex: 1 1 12rem;
  }

  .acc-fields-row .auth-error {
    flex-basis: 100%;
  }

  /* Variante ohne Umbruch: alles zwingend in einer Zeile (2FA-Verwaltung).
     Das Feld schrumpft (min-width: 0), die Buttons bleiben unzerbrochen. */
  .acc-fields-row--nowrap {
    flex-wrap: nowrap;
  }

  .acc-fields-row--nowrap .auth-field {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .acc-fields-row--nowrap .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ntf-group {
    margin-top: var(--sp-5);
  }

  .ntf-group-label {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Inline-Speicher-Feedback je Benachrichtigungs-Zeile (mittig zwischen Titel und Toggle). */
  .ntf-feedback {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--success);
    text-align: center;
    white-space: nowrap;
  }

  .ntf-feedback.is-err { color: var(--danger); }

  .acc-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  /* Eingabefelder in einer Inline-Reihe dehnen sich (breit, Aktion rechts).
     Bewusst NUR Inputs — evpw-select (Filter/Auswahl) bleibt kompakt links,
     sonst schiebt ein voll gedehntes Select Zähler/Aktion über die Tabelle. */
  .acc-inline .evpw-input {
    flex: 1;
    min-width: 180px;
  }

  /* Backup-Code-Zähler, schlichter Text mittig in der Titelzeile (zwischen
     Titel und Status-Pille) — nicht fett, gedämpft, gut lesbar auf Kartengrund. */
  .acc-status-count {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-2);
  }

  /* Anmelde-Log: Erfolg/Fehlschlag (farbiger Text-Marker; Carbon: Status ohne Aktion =
     plain text, keine Box → bleibt bewusst kein evpw-badge. Pager = evpw-pager §14b). */
  .evt-result {
    font-weight: 600;
  }

  .evt-result.is-ok {
    color: var(--success);
  }

  .evt-result.is-fail {
    color: var(--danger);
  }

  /* Audit-Log: farbige Event-Badges + Detail-Zelle. */
  .audit-event {
    font-weight: 600;
    font-size: var(--fs-sm);
  }
  .audit-event.is-ok { color: var(--jade); }
  .audit-event.is-danger { color: var(--danger); }
  .audit-event.is-warn { color: var(--accent-bright); }
  .audit-event.is-info { color: var(--violet); }
  .audit-event.is-muted { color: var(--text-3); }

  .audit-details {
    color: var(--text-2);
    font-size: var(--fs-xs);
  }
  .audit-details-key { color: var(--text-3); }

  /* Benutzer-Verwaltung */
  .usr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  /* Anzeige-Spalte „Zugriff": Fähigkeits-/Gruppen-Badges, umbrechend (reine Anzeige, nicht klickbar). */
  .usr-access {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  /* Passkey-Liste */
  .pk-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
  }

  /* 2FA-QR-Code (lokal erzeugt, GIF-Data-URL) */
  .totp-qr {
    display: block;
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
    border: 4px solid #fff;
    border-radius: var(--radius);
    background: #fff;
  }

  /* Modal-Shell (Overlay/Karte/Titel/Aktionen) — noch vom Guide-Writer-Sektions-Modal
     (page/writer-forms.js) genutzt; migriert mit dem pages/CMS-Schritt auf evpw-modal, dann raus.
     Die Account-Modals (Temp-Passwort, Backup-Codes, Fraktion) laufen bereits über <dialog>.evpw-modal;
     .modal-code/.modal-codes sind reiner Code-/Credential-Inhalt darin (kein Shell). */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgb(0 0 0 / 60%);
  }

  .modal-card {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
  }

  .modal-title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-head);
    font-size: var(--fs-lg);
    color: var(--accent-bright);
  }

  .modal-code {
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-base);
    font-family: monospace;
    font-size: var(--fs-base);
    color: var(--text-1);
    word-break: break-all;
    user-select: all;
  }

  /* Backup-Code-Raster (16-stellig, XXXX-XXXX-XXXX-XXXX) im breiten evpw-modal--wide. */
  .modal-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }

  .modal-codes .modal-code {
    margin-bottom: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    text-align: center;
    white-space: nowrap; /* Code nie mitten durchbrechen — Zelle/Karte tragen die Breite */
    word-break: normal;
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
  }

  /* ── Staff-Dashboard (#acc-panel-dashboard) ───────────────────────────── */
  .dash-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }

  /* Status-Zähler im Format der neutralen Sekundär-Buttons (eckiger --radius, --fs-xs, --bg-card) —
     die runde Pillenform passte nicht zum übrigen Dashboard. */
  .dash-stat {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

  .dash-stat-num {
    min-width: 1.6em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-1);
  }

  /* Warn (tote Links, nur >0) + Wartung (nur >0) heben sich gold/accent ab. */
  .dash-stat--warn,
  .dash-stat--maint {
    border-color: var(--border-accent);
    color: var(--accent-bright);
  }

  .dash-stat--warn .dash-stat-num,
  .dash-stat--maint .dash-stat-num {
    color: var(--accent-bright);
  }

  /* Gruppen-Zahlen im einklappbaren Kopf: EXAKT dieselbe Geometrie wie die Top-Summe
     (gleiche Schriftgröße + gleicher Abstand → identische Pillen-/Spaltenbreiten), nur
     nach rechts geschoben + nowrap. So fluchten die Spalten untereinander mit oben. */
  .dash-stats--group {
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .dash-version {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    background: var(--accent-glow);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-bright);
  }

  .dash-changelog {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dash-cl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) 0;
  }

  .dash-cl + .dash-cl {
    border-top: 1px solid var(--border);
  }

  .dash-cl-ver {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }

  .dash-cl-date {
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  .dash-cl-title {
    flex: 1 1 100%;
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .dash-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }

  .dash-tree {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* Tote-Verweise-Block absetzen — gleicher Abstand wie zwischen den Baum-Gruppen (dort das
     .dash-tree-gap); nötig, weil der Block eine SEPARATE .dash-tree-Box ist (kein gemeinsames gap). */
  .dash-tree--dead {
    margin-top: var(--sp-2);
  }

  /* Top-Level-Gruppe = eigene Klappbox (Vorbild .project/mockup/mockup-pages-crud.html,
     .group): „Bereiche" / „Weitere Seiten" / „System & Konto" je als abgesetzter Kasten
     mit Rahmen, damit die Bereiche optisch nicht zu einer einzigen Liste verschmelzen.
     Hebt sich per --bg-card-2 von der --bg-card-Sektion ab. Die 2. Ebene (Hubs) wiederholt
     das Muster eingerückt + eine Stufe dunkler → Treppen-Optik (siehe .dash-group--sub). */
  .dash-tree > .dash-group {
    padding: 0 var(--sp-3) var(--sp-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .dash-tree > .dash-group:not([open]) {
    padding-bottom: 0;
  }

  .dash-tree > .dash-group > .dash-group-title {
    margin-bottom: 0;
    padding: var(--sp-2) 0;
  }

  /* Gruppe = <details>, Titel = <summary> → nativ einklappbar (kein JS). */
  .dash-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent-bright);
    list-style: none;
    cursor: pointer;
  }

  .dash-group-title::-webkit-details-marker {
    display: none;
  }

  /* Pfeil rein visuell per scale() vergrößern (nicht über font-size) — so bleibt die
     Zeilenbox klein und das <summary> wächst nicht in der Höhe. */
  .dash-group-title::before {
    content: '▾';
    font-size: 0.7em;
    line-height: 1;
    color: var(--text-3);
    transition: transform var(--t-fast);
    transform: scale(1.5);
  }

  .dash-group:not([open]) > .dash-group-title {
    margin-bottom: 0;
  }

  .dash-group:not([open]) > .dash-group-title::before {
    transform: rotate(-90deg) scale(1.5);
  }

  /* Drag-Griff der Hub-Gruppe (nur Editor): sortiert die Hubs = Nav-Reihenfolge (evpw_hub_reorder).
     Glyph ⠿ wie der Block-/Timeline-Griff; sitzt im <summary>, JS unterdrückt den Klapp-Toggle. */
  .dash-hub-grip {
    padding: 0 var(--sp-1);
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: grab;

    &:hover {
      color: var(--accent-bright);
    }

    &:active {
      cursor: grabbing;
    }
  }

  /* 2. Ebene (Hub im Baum) = eigene Klappbox wie die Top-Ebene, aber eingerückt
     (margin-left) + eine Stufe dunkler (--bg-card) → Treppen-Optik. Beim Aufklappen
     liegen die Seiten darin per .dash-row--child weiter eingerückt (wie bisher). */
  .dash-group.dash-group--sub {
    margin-top: var(--sp-2);
    margin-left: var(--sp-3);
    padding: 0 var(--sp-3) var(--sp-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .dash-group--sub:not([open]) {
    padding-bottom: 0;
  }

  .dash-group--sub > .dash-group-title {
    margin-bottom: 0;
    padding: var(--sp-2) 0;
    font-weight: 500;
    color: var(--text-2);
  }

  /* Hub-Kopf: Der Status-Badge floatet wie überall per .dash-badges margin-left:auto nach rechts;
     die Pro-Hub-Summe schließt direkt rechts daneben an (kein zweiter Auto-Split). */
  .dash-group--sub > .dash-group-title > .dash-stats--group {
    margin-left: 0;
  }

  /* Top-Gruppe OHNE 2. Ebene (Weitere Seiten / System & Konto): die Seiten direkt
     darin ebenfalls einrücken, damit überall die gleiche Treppe entsteht. */
  .dash-tree > .dash-group > .dash-row {
    padding-left: var(--sp-4);
  }

  .dash-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) 0;
  }

  .dash-row + .dash-row {
    border-top: 1px solid var(--border);
  }

  /* Baum-Zeilen als geteiltes Spaltenraster (wirkt wie eine Tabelle, behält aber die
     <details>-Klappboxen): Name | Status | Aktion fluchten zeilenübergreifend, weil alle
     Zeilen EIN Grid teilen — statt jede per margin-left:auto für sich rechtsbündig zu rechnen
     (das ergab die gezackte rechte Kante). Zeilen lösen ihre Box auf (display:contents) →
     lead/badges/Aktion werden eigene Raster-Zellen. */
  .dash-rowgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding-right: var(--sp-3);
  }

  .dash-rowgrid > .dash-row:not(.dash-row--edit) {
    display: contents;
  }

  /* Status rechtsbündig (gemeinsame rechte Kante), Aktion linksbündig (gemeinsamer Start). */
  .dash-rowgrid > .dash-row > .dash-badges {
    margin-left: 0;
    justify-self: end;
  }

  .dash-rowgrid > .dash-row > .dash-row-act {
    justify-self: start;
  }

  /* Trennlinie + Einrückung wandern auf die Namens-Zelle, da die Zeilen-Box per
     display:contents wegfällt (border/padding der .dash-row greifen dann nicht mehr). */
  .dash-rowgrid > .dash-row:not(:first-child) > .dash-row-lead {
    border-top: 1px solid var(--border);
  }

  .dash-rowgrid > .dash-row > .dash-row-lead {
    padding: var(--sp-2) 0;
  }

  .dash-rowgrid > .dash-row--child > .dash-row-lead {
    padding-left: var(--sp-4);
  }

  /* Volle Raster-Reihe (fluchten die 3 Spalten bewusst nicht mit): Sub-Hub-Klappboxen, der
     Materialisier-Bestätiger und die 7-Felder-Editier-Zeilen behalten ihr eigenes Layout. */
  .dash-rowgrid > details,
  .dash-rowgrid > .dash-materialize,
  .dash-rowgrid > .dash-row--edit {
    grid-column: 1 / -1;
  }

  .dash-row--child {
    padding-left: var(--sp-4);
  }

  .dash-row--empty {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--text-3);
  }

  .dash-row-name {
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .dash-row-name.is-muted {
    color: var(--text-3);
  }

  /* Name + Ziel-Pfad einer verlinkten, noch nicht gebauten Seite (linke Gruppe). */
  .dash-row-lead {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-2);
  }

  .dash-row-path {
    font-size: var(--fs-xs);
    color: var(--text-3);
    opacity: 0.8;
  }

  /* Status-Badges immer ganz nach rechts (margin-left:auto schluckt den Freiraum) — in
     jeder Zeile/jedem Gruppenkopf, ohne dass jeder Container space-between braucht. Bei
     geplanten Zeilen schiebt das Badge + folgenden „anlegen"-Knopf als Gruppe nach rechts. */
  .dash-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-left: auto;
  }

  /* Status-Labels sind jetzt evpw-badge (Farbvariante trägt die Bedeutung: Live=success,
     Entwurf/Wartung=accent, Fehlt=danger, Geplant=neutral) → eigene .dash-badge-Regeln entfallen.
     .dash-lang / .dash-badge.is-gap waren bereits tot (keine Nutzung) und sind mit raus. */

  /* ── Seiten-CRUD im Dashboard (U7-S6c, Variante B „alles inline") ──────── */
  /* Editierbare Seiten-Zeile: Name + Slug + Live + Speichern/öffnen/Löschen in
     einer Reihe (erbt flex-wrap von .dash-row für schmale Breiten). */
  .dash-row--edit {
    justify-content: flex-start;
  }

  /* Eingabefelder = evpw-input / evpw-select (Name/Slug/„Bereich ändern"); hier bleiben nur die
     Spalten-/Flex-Breiten + Layout-Hooks, der Feld-Look (inkl. Fokus/disabled) kommt aus @layer evpw. */
  .dash-f-name {
    flex: 1 1 9rem;
  }

  /* Name + Beschreibung (hero_sub) teilen sich EINE Rasterzelle (die Namensspalte, Spalte 1): ein
     Wrapper bleibt die eine Grid-Zelle, damit Slug/Live/Wartung/… nicht verrutschen; intern per Flex geteilt. */
  .dash-f-namedesc {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    min-width: 0;
    flex: 1 1 9rem;
  }

  .dash-f-namedesc > .dash-f-name,
  .dash-f-namedesc > .dash-f-desc {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Unterseite (Sublink-Ziel): Namensblock leicht eingerückt → auf einen Blick als Unterseite erkennbar. */
  .dash-row--sublink .dash-f-namedesc {
    padding-left: var(--sp-4);
  }

  /* Aufklapp-Pfeil vor dem Namen (in der Namens-Zelle → keine eigene Rasterspalte). Klick toggelt das
     Panel unter der Zeile; dreht sich beim Öffnen. Nackter Button → UA-Look zurücksetzen. */
  .dash-set-toggle {
    flex: 0 0 auto;
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--text-3);
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease;
  }

  .dash-set-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
  }

  /* Einstellungs-Panel unter der Zeile über die volle Breite (Panel ist ein <div>, in beiden Grids
     explizit): EN-Varianten + SEO-Felder. */
  .dash-rowgrid > .dash-row-settings,
  .dash-pagegrid > .dash-row-settings {
    grid-column: 1 / -1;
  }

  .dash-row-settings {
    font-size: var(--fs-sm);
  }

  /* Offene Zeile + ihr Panel als zusammengehörige Einheit hervorheben (Zugehörigkeit sichtbar): dezente
     Gold-Tönung + linker Akzentbalken, unten abgesetzt von der Nachbarzeile → der Speichern-Knopf DIESER
     Zeile gehört sichtbar zum Panel. (Im .dash-pagegrid ist die Zeile display:contents → dort trägt das
     Panel die Hervorhebung allein; im .dash-rowgrid ist die Zeile eine Box und wird mitgetönt.) */
  .dash-row--edit.is-open {
    background: var(--bg-card-2);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .dash-row-settings:not([hidden]) {
    background: var(--bg-card-2);
    border-left: 2px solid var(--accent);
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: var(--sp-3);
  }

  /* Lose Seiten (pagegrid): die Zeile ist normal display:contents → beim Aufklappen zur vollbreiten Box
     machen, damit sie MIT hervorgehoben wird (wie im Hub). Farb-Logik umgekehrt: der Bereich sitzt auf
     --bg-card-2, also den dunkleren Hub-Ton --bg-card als Hervorhebung (im Hub sitzt die Zeile auf --bg-card
     und wird heller mit --bg-card-2 getönt). */
  .dash-pagegrid > .dash-row--edit.is-open {
    display: flex;
    grid-column: 1 / -1;
    background: var(--bg-card);
  }

  .dash-pagegrid > .dash-row-settings:not([hidden]) {
    background: var(--bg-card);
  }

  .dash-set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-4);
  }

  .dash-set-f {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
    color: var(--text-2);
  }

  .dash-set-f--wide {
    grid-column: 1 / -1;
  }

  /* Slug-Feld: feste Breite für die maximal 20 Zeichen eines Slugs (maxlength=20) →
     stabile Spalte, die Anlege-Zeile darunter richtet sich daran aus. */
  .dash-f-slug {
    flex: 0 0 22ch;
  }

  .dash-f-pub {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text-2);
    white-space: nowrap;
  }

  .dash-row-act {
    display: flex;
    gap: var(--sp-1);
  }

  .dash-open {
    text-decoration: none;
  }

  /* „Weitere Seiten": Seiten-Zeilen + Anlege-Zeile teilen EIN Spaltenraster, damit die
     Spalten zeilenübergreifend exakt fluchten. Die Zeilen UND ihre Knopf-Gruppe lösen ihre
     Box auf (display:contents) → jedes Feld/jeder Knopf wird eine eigene Raster-Zelle.
     8 Spalten: Name (elastisch) | Slug (20 Zeichen) | Live | Wartung | Bereich | Speichern | öffnen | ✕. */
  .dash-pagegrid {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) 22ch max-content max-content max-content max-content max-content max-content;
    gap: var(--sp-2);
    align-items: center;
    padding-inline: var(--sp-4) var(--sp-3);
  }

  .dash-pagegrid > .dash-row--edit,
  .dash-pagegrid > .dash-add,
  .dash-pagegrid .dash-row-act {
    display: contents;
  }

  /* Read-only-Zeile (kein Edit-Feld) im Raster über die ganze Breite. */
  .dash-pagegrid > .dash-row:not(.dash-row--edit) {
    grid-column: 1 / -1;
  }

  /* Anlege-Zeile: Name = Namensspalte; Slug reicht über Live+Wartung+Bereich bis vor Speichern
     (Spalten 2–5); „Anlegen" füllt Speichern+öffnen+✕ (Spalten 6–8) und endet bündig am
     ✕ der Zeilen darüber. */
  .dash-pagegrid .dash-add-name {
    grid-column: 1 / 2;
  }

  .dash-pagegrid .dash-add-slug {
    grid-column: 2 / 6;
  }

  .dash-pagegrid .dash-add-btn {
    grid-column: 6 / 9;
    justify-self: stretch;
  }

  /* „Bereich ändern"-Auswahl (Seite verschieben) = evpw-select; hier nur die Breite: im Hub-Gruppen-
     Kontext (Flex-Zeile) kompakt, in der Spalten-Tabelle füllt sie ihre Zelle. Der Platzhalter hält bei
     nicht-verschiebbaren Zeilen (reserviert) die Bereich-Spalte frei, damit das Raster fluchtet. */
  .dash-f-move {
    flex: 0 1 auto;
    max-width: 14ch;
  }

  /* Geplanten Hub IN-PLACE materialisieren: Bestätiger-Zeile unter dem geplanten Eintrag
     (Slug fest → kein Slug-Feld). [hidden] muss display:flex schlagen → eigene Regel. */
  .dash-materialize {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
  }

  .dash-materialize[hidden] {
    display: none;
  }

  .dash-mat-name {
    flex: 0 1 12rem;
  }

  /* Leerer Hub: Hinweis statt Karten. */
  .dash-hub-empty {
    margin: 0;
    padding-left: var(--sp-3);
  }

  .dash-add-hint {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  /* Hinweis unter „Weitere Seiten" fluchtet mit dem eingerückten Raster darüber. */
  .dash-pagegrid + .dash-add-hint {
    padding-left: var(--sp-4);
  }

  /* „Hub anlegen"-Zeile: gleiches Voll-Breite-Layout wie „Seite anlegen" (Name füllt, Slug, Button rechts) —
     Grid überschreibt das flex von .sec-add (.dash-add.dash-hub-add = 2 Klassen, schlägt .sec-add). Fluchtet
     per margin-left mit den eingerückten Hub-Boxen darüber. */
  .dash-add.dash-hub-add {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) max-content;
    gap: var(--sp-2);
    align-items: center;
    margin-left: var(--sp-3);
  }

  .dash-hub-add + .dash-add-hint {
    margin-left: var(--sp-3);
  }

  /* Aktive Sessions: aktuelles Gerät grün markiert — derselbe Erfolgs-/Aktiv-Ton
     wie „Letzte Anmeldungen → Erfolg" (var(--success)), kein neuer Farbton. */
  #sess-list tr.is-current td:first-child {
    font-weight: 600;
    color: var(--success);
  }

  /* ── Design-System-Katalog (Panel #acc-panel-design-system, editor-only) ───
     Reines Layout-Gerüst des Schaukastens; die Bausteine selbst kommen aus
     evpw-ui.css (@layer evpw). Wenige Overrides (Progress-Breite, Floating→static)
     liegen im @layer utilities (utilities.css), da sie evpw schlagen müssen. */
  .ds-demo {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .ds-sub {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .ds-sub:first-child {
    margin-top: 0;
  }

  .ds-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .ds-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .ds-cap {
    font-family: monospace;
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  .ds-note {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--border-accent);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-2);
  }

  .ds-w {
    inline-size: 16rem;
    max-inline-size: 100%;
  }

  .ds-swatch {
    inline-size: var(--sp-8);
    block-size: var(--sp-8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .ds-sw--accent { background: var(--accent); }
  .ds-sw--danger { background: var(--danger); }
  .ds-sw--success { background: var(--success); }
  .ds-sw--jade { background: var(--jade); }
  .ds-sw--purple { background: var(--c-purple); }
  .ds-sw--cyan { background: var(--c-cyan); }
  .ds-sw--green { background: var(--c-green); }
  .ds-sw--amber { background: var(--c-amber); }

  /* ── Zugriff (Zugriffs-Gruppen, Schicht 1) — Markup aus account-access.js ────── */
  .acc-ag-intro {
    margin: 0 0 var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .acc-ag {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .acc-ag-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .acc-ag-name {
    font-weight: 600;
  }

  input.acc-ag-name {
    flex: 1;
    font-weight: 400;
  }

  .acc-ag-spacer {
    flex: 1;
  }

  .acc-ag-members {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
  }

  .acc-ag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
  }

  .acc-ag-x {
    padding: 0 var(--sp-1);
  }

  .acc-ag-add {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
  }

  .acc-ag-sel {
    min-width: 180px;
  }

  .acc-ag-create {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-lg);
  }

  .acc-ag-empty {
    margin: var(--sp-3) 0 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-style: italic;
  }

  .acc-ag-path {
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  .acc-pt-tag {
    color: var(--text-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .acc-pt--group .acc-pt-tag { color: var(--accent); }
  .acc-pt--user .acc-pt-tag { color: var(--success); }

  /* ── Objekt-Freigaben nach Hub gruppiert + einklappbar (Schicht 5a) — natives <details>, Marker-Muster
     gespiegelt vom Dashboard-Seitenbaum (.dash-group). Eine Gruppe = ein Hub + seine Kind-Seiten. ─────── */
  .acc-obj-group {
    margin: 0 0 var(--sp-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .acc-obj-group[open] {
    background: var(--bg-card-2);
  }

  .acc-obj-sum {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--accent-bright);
    list-style: none;
    cursor: pointer;
  }

  .acc-obj-sum::-webkit-details-marker {
    display: none;
  }

  .acc-obj-sum::before {
    content: '▾';
    font-size: 0.7em;
    line-height: 1;
    color: var(--text-3);
    transition: transform var(--t-fast);
    transform: scale(1.5);
  }

  .acc-obj-group:not([open]) .acc-obj-sum::before {
    transform: rotate(-90deg) scale(1.5);
  }

  .acc-obj-sum-count {
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
  }

  .acc-obj-sum-badge {
    margin-inline-start: auto;
    padding: 0 var(--sp-2);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
  }

  /* Objekt-Karten in der Gruppe: Hub-Karte an der Gruppen-Kante, Kind-Seiten eingerückt + linke
     Führungslinie (Treppen-Optik wie dash-group--sub) → Hub und seine Seiten sind visuell trennbar. */
  .acc-obj-group .acc-ag {
    margin: 0 var(--sp-4) var(--sp-3);
    background: var(--bg-card);
  }

  .acc-obj-group .acc-ag--child {
    margin-left: var(--sp-8);
    border-left: 2px solid var(--border-accent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* Typ-Tag (Hub/Seite) an der Objekt-Karte — auf der acc-pt-tag-Basis, hier mit Rahmen. */
  .acc-obj-kind {
    padding: 0 var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .acc-obj-kind--hub {
    color: var(--accent);
    border-color: var(--border-accent);
  }

  .acc-obj-kind--app {
    color: var(--success);
    border-color: var(--success);
  }
}