/* ══════════════════════════════════════════════════
   v2 HUELLE DER VERWALTUNG

   Kopfband ueber die volle Breite, Navigationsspalte links, Inhalt rechts,
   auf Detailseiten eine Arbeitsspalte. Drei Groessenstufen:

     ≥ 1400px   Navigation offen (einklappbar), Arbeitsspalte klebt neben
                dem Inhalt (ausblendbar)
     992–1399   Navigation automatisch als Symbolleiste, Arbeitsspalte als
                Blatt von rechts UEBER dem Inhalt
     < 992px    Navigation als Schublade hinter dem Menueknopf, Blatt wie oben

   992px ist die Schwelle, ab der bisher das Burger-Menue griff
   (navigation.css) — kein neuer Umbruchpunkt, nur mehr Aufgaben fuer den
   vorhandenen. 1400px trennt Arbeitsplatz von Laptop/iPad quer (1366px).

   Zustaende liegen als Klassen auf <html> (nav-collapsed, aside-hidden) und
   werden von assets/v2-shell-boot.js VOR dem ersten Zeichnen gesetzt; das
   Umschalten selbst macht assets/v2-ui.js ueber data-v2-*-Attribute.
   Kurzlebige Zustaende (Schublade offen, Blatt offen) liegen auf .shell.

   Bedienkonzept nach myOFFICE (mo-shell.css), Werte ausschliesslich aus
   tokens.css — siehe docs/architecture/designsystem.md, Abschnitt 8.
   ══════════════════════════════════════════════════ */

/* ── Raster ── */
.shell {
  display: grid;
  grid-template-columns: var(--ms-nav-w) minmax(0, 1fr);
  min-height: 100vh;
  padding-top: var(--ms-topbar-h);
  transition: grid-template-columns var(--ms-transition-base);
}
.shell-main { min-width: 0; }

/* ── Kopfband ──
   Fixiert und ueber die volle Breite, auch ueber der Navigation: so steht
   das Logo immer an derselben Stelle, egal ob die Leiste offen, eingeklappt
   oder als Schublade unterwegs ist.

   DER GRUND IST DER DER NAVIGATION (--ms-nav-bg), nicht der der Seite.
   Kopfband und Leiste bilden damit EINE zusammenhaengende dunkle Kante um
   den Arbeitsbereich — dieselbe Aussage wie in myOFFICE (`.mo-topbar`
   traegt dort `--mo-nav-bg`): links und oben ist das Geruest, in der Mitte
   der Inhalt. Vorher war das Kopfband hell und die Leiste dunkel; die
   Trennlinie zwischen beiden lief mitten durch eine Flaeche, die
   funktional eine ist.

   KEIN GLAS MEHR. Der helle Vorgaenger war durchscheinend
   (--ms-topbar-bg = rgba(255,255,255,0.72) + backdrop-filter), damit der
   Inhalt beim Rollen durchschimmert. Auf dunklem Grund kehrt sich das um:
   weisse Karten, die unter einem 80%-Schleier vorbeiziehen, heben den Ton
   des Bandes sichtbar an — das Band flackert beim Rollen hellgrau. Deckend
   ist hier richtig. --ms-topbar-bg bleibt dem Kundenbereich (.header,
   navigation.css), der weiterhin Glas ist.

   Das Logo braucht dafuer keine eigene Fassung: die Bildmarke bringt ihre
   eigene graue Flaeche mit weisser Wortmarke mit und steht auf --ms-nav-bg
   mit 4,62:1 sogar deutlicher als auf Weiss (3,65:1). myOFFICE zeigt
   dieselbe Datei auf seinem dunklen Kopfband. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--ms-topbar-h);
  z-index: var(--ms-z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ms-space-4);
  padding: 0 var(--ms-space-5);
  background: var(--ms-nav-bg); color: var(--ms-nav-text);
  border-bottom: 1px solid var(--ms-nav-line);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--ms-space-3); min-width: 0; }
.topbar-title {
  font-size: var(--ms-text-small);
  color: var(--ms-nav-text);
  white-space: nowrap;
}
/* Symbolknopf: Suche, Darstellung, Menue. Dieselbe Trefferflaeche wie
   .icon-action (buttons.css), hier mit eigener Klasse, weil die Farbe aus der
   Kopfzeile kommt und der Fokusring auf Glas sichtbar sein muss.

   DIE BASISREGEL GILT FUER DEN HELLEN GRUND: der Kundenkopf
   (templates/v2/navbar.html.twig) benutzt .topbar-btn ebenfalls fuer seinen
   Darstellungs-Umschalter, und der steht auf dem hellen Glas. Die Farben des
   dunklen Bandes stehen deshalb weiter unten unter `.topbar`, nicht hier —
   sonst waere das Symbol im Kundenkopf grau auf Weiss (2,31:1) und der Hover
   ein weisser Schleier auf Weiss, also unsichtbar. */
.topbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--ms-radius-sm);
  background: none; color: var(--ms-text-secondary);
  cursor: pointer;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}
.topbar-btn:hover { background: var(--ms-bg-secondary); color: var(--ms-text-primary); }
.topbar-btn:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.topbar-btn .ms-ico { font-size: var(--ms-glyph-md); }
/* Tastenkuerzel neben der Suche — nur auf Geraeten mit Tastatur sinnvoll. */
.topbar-kbd {
  display: none;
  font-size: var(--ms-text-caption); color: var(--ms-text-secondary);
  border: 1px solid var(--ms-border-light); border-radius: var(--ms-radius-sm);
  padding: 0 var(--ms-space-1); line-height: 1.5;
}

/* ── Was im Kopfband auf der dunklen Flaeche liegt ──
   Alle Bauteile hier tragen Klassen, die es auch auf hellem Grund gibt: die
   geliehenen aus dem Kundenkopf (.header-divider, .nav-link, .user-name —
   navigation.css), .topbar-btn (der Kundenkopf benutzt ihn fuer seinen
   Darstellungs-Umschalter). Ihre Grundfarben rechnen mit dem hellen Grund und
   waeren im dunklen Band dunkel auf dunkel.
   .topbar-title steht nicht hier: den gibt es nur im Kopfband, sein Ton
   steht direkt in der Basisregel.

   Deshalb hier gesammelt und AUSSCHLIESSLICH unter `.topbar` umgefaerbt, in
   den --ms-nav-*-Toenen der Flaeche, auf der sie tatsaechlich liegen. Der
   Kundenkopf bleibt unberuehrt. Hover wie an .nav-item in der Leiste:
   weisser Schleier, Text auf --ms-nav-on. */
.topbar .header-divider { background: var(--ms-nav-line); }
.topbar .nav-link { color: var(--ms-nav-text); }
.topbar .nav-link:hover { color: var(--ms-nav-on); }
.topbar .user-name { color: var(--ms-nav-text); }
.topbar .header-user:hover .user-name { color: var(--ms-nav-on); }
.topbar .topbar-btn { color: var(--ms-nav-text); }
.topbar .topbar-btn:hover { background: var(--ms-nav-hover); color: var(--ms-nav-on); }
/* Der Fokusring bleibt --ms-accent (Basisregel oben): auf dem dunklen Band
   erreicht er 4,19:1 im Hellmodus und 5,76:1 im Dunkelmodus und liegt damit
   ueber den 3:1, die WCAG 1.4.11 fuer Bedienelement-Umrisse fordert — er
   braucht hier also keine eigene Fassung. */
/* Frueher stand hier die Regel, die das Kuerzel neben der Lupe ab 992px
   einblendete. Es ist am 2026-09-14 auf Weisung des Betreibers ganz aus dem
   Kopfband verschwunden — die Klasse bleibt, weil das „esc" im Suchdialog sie
   ebenfalls traegt (search.html.twig). Dort wird sie ausdruecklich gezeigt. */
.cmdk-field .topbar-kbd { display: inline-block; }
/* Menueknopf: nur unter 992px, dort oeffnet er die Schublade. */
.topbar-burger { display: none; }

/* ── Navigationsspalte ── */
.shell-nav {
  position: sticky; top: var(--ms-topbar-h);
  height: calc(100vh - var(--ms-topbar-h));
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--ms-space-05);
  padding: var(--ms-space-3);
  background: var(--ms-nav-bg); color: var(--ms-nav-text);
  /* Bildlaufleiste in den Farben der Leiste, nicht der Seite. */
  scrollbar-width: thin;
  scrollbar-color: var(--ms-nav-line) transparent;
}
.nav-head { display: flex; justify-content: flex-end; padding-bottom: var(--ms-space-2); }
.nav-collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: var(--ms-radius-sm);
  background: var(--ms-nav-hover); color: var(--ms-nav-text);
  cursor: pointer;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}
.nav-collapse-btn:hover { background: var(--ms-nav-line); color: var(--ms-nav-on); }
.nav-collapse-btn:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.nav-collapse-btn .ms-ico { transition: transform var(--ms-transition-base); }

/* Rubrik: ein Schalter in der Optik einer Kleinbuchstaben-Ueberschrift. Volle
   Breite = grosse Klickflaeche. Der Pfeil zeigt den Zustand. */
.nav-group {
  display: flex; align-items: center; gap: var(--ms-space-2);
  width: 100%;
  margin: var(--ms-space-3) 0 var(--ms-space-1);
  padding: 2px var(--ms-space-3);
  border: 0; border-radius: var(--ms-radius-sm);
  background: none; color: var(--ms-nav-muted);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
  cursor: pointer;
  transition: color var(--ms-transition-fast);
}
.nav-group:hover { color: var(--ms-nav-text); }
.nav-group:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
/* Der Pfeil sitzt am RECHTEN Rand der Zeile, nicht neben der Beschriftung —
   `margin-left: auto` schiebt ihn dorthin. Die Groesse kommt aus der
   Schriftgroesse, weil `.ms-ico` seine Kanten in `em` misst. */
.nav-group .ms-ico { margin-left: auto; font-size: var(--ms-glyph-xs); transition: transform var(--ms-transition-base); }
.nav-group.is-collapsed .ms-ico { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: var(--ms-space-05); }
.nav-group.is-collapsed + .nav-group-items { display: none; }

.nav-item {
  display: flex; align-items: center; gap: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-nav-text);
  font-size: var(--ms-text-small); font-weight: var(--ms-weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}
/* NUR die Groesse, keine Spalte mehr: `width: 1.25rem` und `text-align:
   center` waren die Kruecke fuer eine Schriftart, deren Glyphen
   unterschiedlich breit sind. Ein Sprite-Symbol ist immer quadratisch, also
   stehen die Beschriftungen von sich aus auf einer Linie; eine feste Breite
   wuerde jetzt nur das Seitenverhaeltnis verziehen (die Hoehe bleibt 1em).
   `flex: none` steht schon an `.ms-ico`. */
.nav-item .ms-ico { font-size: var(--ms-glyph-sm); }
.nav-item:hover { background: var(--ms-nav-hover); color: var(--ms-nav-on); }
.nav-item:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; }
.nav-item.active { background: var(--ms-nav-active-bg); color: var(--ms-nav-active); font-weight: var(--ms-weight-semibold); }
/* Sucheintrag der Schublade: sieht aus wie ein Navigationseintrag, ist aber
   ein Knopf. STEHT HINTER `.nav-item` — er traegt beide Klassen, und bei
   gleicher Spezifitaet gewinnt die spaetere Regel; davor waere sein
   `display: none` von `.nav-item { display: flex }` ueberschrieben und der
   Eintrag stuende auch am Schreibtisch da, wo die Lupe im Band steht. */
.nav-search {
  display: none;
  width: 100%;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Zaehler offener Bestellungen. Warnfarbe als Tint, weil der Wert zum Handeln
   auffordert; Text hell, weil er auf der dunklen Leiste liegt. */
.nav-count {
  margin-left: auto;
  padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-pill);
  background: rgba(var(--ms-warning-rgb), 0.35);
  color: var(--ms-nav-on);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.nav-spacer { flex: 1 1 auto; min-height: var(--ms-space-3); }
.nav-foot {
  border-top: 1px solid var(--ms-nav-line);
  padding-top: var(--ms-space-2);
  font-size: var(--ms-text-caption); color: var(--ms-nav-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Zwei Zeilen seit dem 2026-09-10: Restzeit oben, Fassung darunter. Die
     Trennlinie oben gehoert damit ueber den ganzen Block. */
  display: flex; flex-direction: column; gap: var(--ms-space-1);
}

/* ── Inhalt ──
   .admin-main (admin.css) bleibt der Inhaltsbereich; hier nur, was die Huelle
   an ihm aendert: er misst sich am Kopfband, nicht mehr an einer Zahl. */
.shell-main .admin-main { min-height: calc(100vh - var(--ms-topbar-h)); }
/* Geteilte Masken (Bestellliste, Bestelldetail) bringen ihr graues Band
   `.section-gray` mit — im Kundenbereich ist das der Seitenabschnitt. Hier
   polstert .admin-main bereits; das Band traegt deshalb keinen zweiten
   Abstand und keine eigene Farbe bei. */
.shell-main .admin-main > .section-gray { padding: 0; background: transparent; }

/* ── Symbolleiste (eingeklappt), ab 992px ──
   Zustand: <html class="nav-collapsed">. Darunter greift die Schublade, und
   dort waere eine Symbolleiste ohne Beschriftung nicht bedienbar. */
@media (min-width: 992px) {
  html.nav-collapsed .shell { grid-template-columns: var(--ms-nav-w-rail) minmax(0, 1fr); }
  html.nav-collapsed .shell-nav { padding-left: var(--ms-space-2); padding-right: var(--ms-space-2); overflow: visible; }
  html.nav-collapsed .nav-head { justify-content: center; }
  html.nav-collapsed .nav-collapse-btn .ms-ico { transform: rotate(180deg); }
  html.nav-collapsed .nav-group,
  html.nav-collapsed .nav-foot,
  html.nav-collapsed .nav-label,
  html.nav-collapsed .nav-count { display: none; }
  /* Ohne Rubrikkoepfe muss der Einklapp-Zustand der Rubriken ignoriert
     werden — sonst waeren die Eintraege nicht erreichbar. */
  html.nav-collapsed .nav-group.is-collapsed + .nav-group-items { display: flex; }
  html.nav-collapsed .nav-item { justify-content: center; padding: var(--ms-space-2) 0; position: relative; }
  /* Das Symbol ist in der Symbolleiste der einzige Anker — eine Stufe groesser. */
  /* In der Schmalleiste ist das Symbol das EINZIGE, was von einem Eintrag
     uebrig bleibt — dort darf es nicht das Zeilenmass behalten. */
  html.nav-collapsed .nav-item .ms-ico { font-size: var(--ms-glyph-lg); }
  /* Ein Punkt am Symbol ersetzt den Zaehler: die Zahl passt nicht in 64px,
     das Signal „hier wartet etwas" schon. */
  html.nav-collapsed .nav-item.has-count::after {
    content: '';
    position: absolute; top: var(--ms-space-1); right: var(--ms-space-2);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ms-warning);
  }
}
/* Beschriftung als Sprechblase rechts neben dem Symbol — nur mit Mauszeiger.
   Auf Beruehrungsgeraeten gibt es keinen Hover; dort klappt ein Antippen des
   Symbols ueber data-v2-nav-toggle die ganze Leiste auf (v2-ui.js). */
@media (min-width: 992px) and (hover: hover) {
  html.nav-collapsed .nav-item:hover .nav-label,
  html.nav-collapsed .nav-item:focus-visible .nav-label {
    display: block;
    position: absolute; left: calc(100% + var(--ms-space-3)); top: 50%;
    transform: translateY(-50%);
    padding: var(--ms-space-2) var(--ms-space-3);
    border-radius: var(--ms-radius-sm);
    border: 1px solid var(--ms-nav-line);
    background: var(--ms-nav-bg); color: var(--ms-nav-on);
    box-shadow: var(--ms-card-shadow-hover);
    font-size: var(--ms-text-small); font-weight: var(--ms-weight-semibold);
    line-height: 1.2; white-space: nowrap;
    z-index: var(--ms-z-tooltip);
    pointer-events: none;
    overflow: visible;
  }
  html.nav-collapsed .nav-item:hover .nav-label::before,
  html.nav-collapsed .nav-item:focus-visible .nav-label::before {
    content: '';
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: var(--ms-nav-bg);
  }
}

/* ── Schublade, unter 992px ── */
/* Grund der Navigationsschublade. Aussehen: zentrale Scrim-Regel in
   overlays.css — hier steht nur die Lage. Der Scrim beginnt UNTER dem
   Kopfband: das Logo und der Menueknopf bleiben ansprechbar, waehrend die
   Schublade offen ist. */
.shell-scrim {
  display: none;
  position: fixed; inset: var(--ms-topbar-h) 0 0 0;
  z-index: calc(var(--ms-z-dropdown) - 1);
}
@media (max-width: 991.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar-burger { display: inline-flex; }
  .topbar-title { display: none; }
  /* DIE LUPE WANDERT IN DIE SCHUBLADE (2026-09-14). Gemessen bei 375px lief
     `.topbar-right` um 31px ueber; nachgeben konnte nur der runde Avatar, und
     der wurde dadurch zum Ei. Die Suche steht hier als erster Eintrag der
     Navigation (sidebar.html.twig), im Band bleibt sie ab 992px. */
  .topbar [data-admin-search-open] { display: none; }
  .nav-search { display: flex; }
  .shell-nav {
    position: fixed; left: 0; top: var(--ms-topbar-h);
    height: calc(100vh - var(--ms-topbar-h));
    width: var(--ms-nav-w);
    transform: translateX(-100%);
    transition: transform var(--ms-transition-base);
    box-shadow: var(--ms-card-shadow-hover);
    z-index: var(--ms-z-dropdown);
  }
  .shell.is-nav-open .shell-nav { transform: translateX(0); }
  .shell.is-nav-open .shell-scrim { display: block; }
  /* Der Einklapp-Knopf hat in der Schublade nichts zu tun. */
  .nav-head { display: none; }
}

/* ── Detailseite: Hauptspalte + Arbeitsspalte ── */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ms-aside-w);
  gap: var(--ms-space-5);
  align-items: start;
}
.doc-main { min-width: 0; }
.doc-aside {
  position: sticky; top: calc(var(--ms-topbar-h) + var(--ms-space-4));
  display: flex; flex-direction: column; gap: var(--ms-space-3);
  max-height: calc(100vh - var(--ms-topbar-h) - var(--ms-space-6));
  overflow-y: auto;
  padding: var(--ms-space-3);
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
}
/* ── Stammdatenmaske: Auswahl links, Datensatz rechts (Master-Detail) ──
   Bedienkonzept nach der Artikelmaske in myOFFICE (.mo-md): wer zwanzig
   Artikel nacheinander durchsieht, soll dafuer nicht zwanzigmal zwischen
   Liste und Maske springen. Muster uebernommen, KEIN Wert von dort
   (designsystem.md, Abschnitt 2).

   Unterschied zu `.doc-layout`: dort steht die schmale Spalte RECHTS und
   traegt, was man mit dem Datensatz tut. Hier steht sie LINKS und traegt,
   welchen Datensatz man ansieht — Navigation statt Handlung. Zwei
   Aufgaben, zwei Bauteile. */
.master-detail {
  display: grid;
  grid-template-columns: var(--ms-md-list-w) minmax(0, 1fr);
  gap: var(--ms-space-5);
  align-items: start;
}

/* `minmax(0, 1fr)` oben ist Pflicht, und dieses `min-width: 0` ebenso: eine
   1fr-Spalte waechst sonst auf die Mindestbreite ihres Inhalts, statt breite
   Inhalte (Tabellen, Packtisch) in deren eigenem overflow-x scrollen zu
   lassen — die Seite bekaeme einen Querlauf. Dieselbe Falle wie bei
   `.doc-main`. */
.md-detail { min-width: 0; }

.md-list {
  position: sticky; top: calc(var(--ms-topbar-h) + var(--ms-space-4));
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
}

.md-filters {
  display: flex; flex-direction: column; gap: var(--ms-space-2);
  padding: var(--ms-space-3);
  border-bottom: 1px solid var(--ms-border-divider);
}
.md-filterrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space-2); }
.md-filterfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-2); }
/* MEHRERE SCHALTER UNTEREINANDER (2026-10-06). Die Artikelliste traegt seit
   der Bestandskachel der Startseite einen zweiten Schalter („Nur mit
   Nachschubbedarf"). Nebeneinander passten zwei Schalter und der Zaehler
   nicht in die 354px der Auswahlspalte — gemessen brach jede der drei
   Beschriftungen zweizeilig um. Untereinander bleibt jede auf einer Zeile,
   und der Zaehler steht weiter rechts daneben. */
.md-filterswitches { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ms-space-1); }
.md-count { font-size: var(--ms-text-caption); color: var(--ms-text-secondary); }

/* Der Rollbereich ist auf die Fensterhoehe begrenzt, damit die Liste neben
   einer langen Maske klebt statt mit ihr zu wachsen. Vollstaendig aus Token
   gerechnet — kein magischer Abzug. */
.md-items {
  overflow-y: auto;
  max-height: calc(100vh - var(--ms-topbar-h) - var(--ms-space-6) * 3);
}

.md-item {
  display: block;
  padding: var(--ms-space-3);
  border-bottom: 1px solid var(--ms-border-divider);
  /* Die Marke des ausgewaehlten Eintrags haelt ihren Platz auch unausgewaehlt
     durchsichtig frei, sonst ruckt die ganze Liste beim Umschalten. */
  border-inline-start: 3px solid transparent;
  color: var(--ms-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ms-transition-base);
}
.md-item:last-child { border-bottom: 0; }
.md-item:hover { background: var(--ms-bg-secondary); color: var(--ms-text-primary); }
/* Tint statt Vollfarbe: der ausgewaehlte Eintrag soll auffindbar sein, nicht
   laut. Ueber --ms-tint wie alle Schleierflaechen (Regel 5). */
.md-item.is-active {
  background: rgba(var(--ms-accent-rgb), var(--ms-tint));
  border-inline-start-color: var(--ms-accent);
}
.md-item.is-inactive .md-item-name { color: var(--ms-text-secondary); }
.md-item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-2); }
.md-item-name { margin-top: var(--ms-space-1); font-size: var(--ms-text-small); font-weight: var(--ms-weight-semibold); }

/* TITELZEILE MIT ABZEICHEN: Name links, Abzeichen rechts, auf EINER Hoehe
   (Weisung des Betreibers, 2026-09-22).

   WOFUER, UND WARUM NICHT `.md-item-top`. Der Eintrag besteht aus drei Zeilen:
   Kopf, Name, Fusszeile. Bei Artikeln und Sets traegt der Kopf LINKS etwas
   (die Kennung) und rechts das Abzeichen — dort verdient die Zeile ihren
   Platz. In den Mailtexten und den Textbausteinen stand links nichts: eine
   ganze Zeile nur fuer zwei Abzeichen, bei fuenfzehn Eintraegen fuenfzehn
   verschenkte Zeilen. Hier wandern sie neben den Namen.

   `flex-start` und nicht `center`: bricht ein langer Name auf zwei Zeilen,
   sollen die Abzeichen an der ERSTEN stehen — der Betreiber hat „auf der
   Hoehe der Titelzeile" gesagt, nicht „auf der Hoehe des Eintrags".

   `min-width: 0` am Namen und `flex: none` an den Abzeichen: sonst schrumpfen
   die Abzeichen, sobald der Name lang wird (ein Flex-Element gibt von sich aus
   nach) — und ein Abzeichen hat eine Groesse, keine Restbreite. Derselbe
   Befund wie an `.form-check-input` in forms.css. */
.md-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ms-space-2);
}
.md-item-head .md-item-name { margin-top: 0; min-width: 0; }
.md-item-badges {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ms-space-1);
}
.md-empty { padding: var(--ms-space-6); text-align: center; font-size: var(--ms-text-small); color: var(--ms-text-secondary); }

/* Kopfzeile der Detailkarte: Titel und Zustand links, Werkzeuge rechts. */
.md-detailhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ms-space-3);
  padding-bottom: var(--ms-space-3); margin-bottom: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-border-divider);
}
.md-detailhead-tools { display: flex; align-items: center; gap: var(--ms-space-2); flex: none; }
.md-title { display: flex; align-items: center; gap: var(--ms-space-2); font-size: var(--ms-text-h3); font-weight: var(--ms-weight-bold); }

/* GLEICHE ABSTAENDE ZWISCHEN ALLEN ABSCHNITTEN, aus einer Regel.
   `.section-title` bringt nur einen Abstand nach UNTEN mit; zwischen zwei
   Abschnitten stand deshalb je nach Vorlage eine handgesetzte Trennlinie oder
   nichts — und damit ungleiche Luft. Hier steht der Abstand einmal, wie in
   den Stammdatenmasken von myOFFICE (`.mo-md__detail .mo-form-section__title`).
   Der erste Abschnitt bekommt keinen: er beginnt an der Kartenkante. */
/* Jede Rubrik beginnt mit sichtbarem Abstand UND einer Linie. Der Abstand
   allein trug die Gliederung nicht: in einem Formular mit sieben Rubriken
   lasen sich Ueberschrift und vorheriges Feld als ein Block (nachgefragt am
   2026-09-02). Die Linie ist die duenne Trennung des Systems
   (--ms-border-divider), dieselbe wie zwischen Tabellenzeilen — keine neue
   Gestalt, nur an einer weiteren Stelle. */
.md-detail .section-title {
  margin-top: var(--ms-space-6);
  padding-top: var(--ms-space-5);
  border-top: 1px solid var(--ms-border-divider);
}
/* KEINE AUSNAHME FUER DIE ERSTE RUBRIK MEHR. Die Regel hiess „die erste
   grenzt an die Kartenkante" — das war falsch gedacht: in der Artikelmaske
   stehen Kopfzeile, Stammdaten und die Sprachreiter ueber der ersten Rubrik
   mit Ueberschrift. Ausgenommen war deshalb ausgerechnet „Bild", und genau
   dort fehlte die Linie (gemeldet am 2026-09-02).

   Die Stammdaten oben brauchen keine Ausnahme: sie haben gar keine
   Ueberschrift, also greift die Regel dort nicht. */

/* ── EIN STAPEL AUS KARTEN ──
   Versuch vom 2026-09-03 fuer die Artikelmaske: statt einer Flaeche mit
   Trennlinien traegt jede Rubrik eine eigene Karte. Der Stapel selbst ist
   KEINE Karte — er setzt nur die Abstaende und haelt die Sperre
   (`record-lock`), die fuer alle Karten darin gelten muss.

   `gap` statt `margin` an den Karten: es gilt zwischen ihnen und nicht am
   Rand, und es zaehlt nicht mit, welche Karte gerade weggeblendet ist. */
/* AUF JEDER EBENE, DIE KARTEN HAELT. `gap` gilt nur zwischen DIREKTEN
   Kindern — und die Karten der Rubriken stecken im Formular, das seinerseits
   im Feldbereich der Sperre steckt. Nur am Stapel gesetzt, standen die
   Rubrikkarten deshalb ohne jeden Abstand aneinander (0px, im Browser
   nachgemessen), waehrend die Kopfkarte ihre 16px hatte. */
.record-stack,
.record-stack > [data-record-lock-target],
.record-stack form { display: grid; gap: var(--ms-space-4); }

/* IN EINEM STAPEL TRENNT DIE KARTE, NICHT DIE LINIE. Die Rubrikueberschrift
   traegt sonst Abstand, Polsterung und einen Oberstrich (Regel oben) — in
   einer eigenen Karte waere das eine zweite Trennung direkt hinter der
   ersten, und die Ueberschrift stuende von ihrer eigenen Kartenkante
   abgesetzt. */
.record-stack .section-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── UEBERSCHRIFT EINER GRUPPE VON KARTEN ──
   Im Rechte-Editor benennt „Bereiche und Rechtestufe" die fuenf Rubrikkarten
   darunter. Als eigenes Kind des Stapels bekam sie den Gitterabstand nach oben
   (16px) UND ihren eigenen Abstand nach unten (16px aus `.section-title`) plus
   denselben Gitterabstand — 32px unter, 16px ueber. Sie klebte damit an der
   Karte DARUEBER und stand von der darunter ab, also genau verkehrt
   (gemeldet vom Betreiber, 2026-09-11: „naeher an die Card Allgemein heran").

   Eine Ueberschrift gehoert zu dem, was UNTER ihr steht. Der eigene Abstand
   entfaellt, und der Gitterabstand wird auf die kleine Stufe gezogen: 8px
   unter, 16px ueber. Beides aus dem Raster gerechnet, kein eigener Wert. */
.record-stack .section-title--group {
  margin-bottom: calc(-1 * var(--ms-space-2));
}

/* Auswahlkarten und Feldraster schliessen einen Abschnitt ab und brauchen
   denselben Abstand nach unten wie eine Formularzeile (.form-row). */
.md-detail .radio-row { margin-bottom: var(--ms-space-4); }

/* Unter dem Umbruchpunkt der Navigationsschublade steht die Liste ueber der
   Maske und rollt mit der Seite: zwei Spalten a 160px waeren beides unlesbar. */
@media (max-width: 991.98px) {
  .master-detail { grid-template-columns: minmax(0, 1fr); }
  .md-list { position: static; }
  .md-items { max-height: 60vh; }
}

/* Grund des Arbeitsblatts. Aussehen: zentrale Scrim-Regel in overlays.css. */
.aside-scrim {
  display: none;
  position: fixed; inset: 0;
  z-index: calc(var(--ms-z-dropdown) - 1);
}
/* Knopf im Maskenkopf, der die Spalte ein- und ausblendet. */
[data-v2-aside-toggle] .ms-ico { transition: transform var(--ms-transition-base); }

/* Kopfzeile der Spalte */
.aside-head {
  display: flex; align-items: center; gap: var(--ms-space-2);
  padding: 2px var(--ms-space-1) var(--ms-space-1);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ms-text-secondary);
}
.aside-head .ms-ico { color: var(--ms-text-tertiary); }
.aside-head .icon-action { margin-left: auto; }
/* Block: eine Karte in der Karte, getoent statt geschattet. */
.aside-block {
  padding: var(--ms-space-3) var(--ms-space-4);
  background: var(--ms-bg-secondary);
  border-radius: var(--ms-radius-md);
}
.aside-block-title {
  display: flex; align-items: center; gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-3);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-bold);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ms-text-secondary);
}
.aside-block-title .ms-ico { color: var(--ms-text-tertiary); }
.aside-block-title .badge { margin-left: auto; }
.aside-actions { display: flex; flex-direction: column; gap: var(--ms-space-2); }
/* Handlung: eine Zeile mit Symbol und Beschriftung, als Knopf ODER Verweis.
   Drei Zustaende — erledigt (zurueckgenommen, mit Datum), als naechstes dran
   (Akzentrahmen), offen (neutral). Erledigte bleiben anklickbar, weil ein
   Schritt zuruecknehmbar ist. */
.aside-action {
  display: flex; align-items: center; gap: var(--ms-space-3);
  width: 100%;
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg-primary); color: var(--ms-text-primary);
  font-size: var(--ms-text-small); font-weight: var(--ms-weight-medium);
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ms-transition-fast), background var(--ms-transition-fast);
}
.aside-action:hover { border-color: var(--ms-border-control); }
.aside-action:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.aside-action .ms-ico { color: var(--ms-text-secondary); }
.aside-action.is-done { background: transparent; border-style: dashed; color: var(--ms-text-secondary); }
.aside-action.is-done .ms-ico { color: var(--ms-success-text); }
.aside-action.is-next { border-color: var(--ms-accent); border-width: 1.5px; color: var(--ms-accent); font-weight: var(--ms-weight-semibold); }
.aside-action.is-next .ms-ico { color: var(--ms-accent); }
.aside-action.is-danger { color: var(--ms-error-text); }
.aside-action.is-danger .ms-ico { color: var(--ms-error-text); }
.aside-action-meta {
  margin-left: auto; flex: none;
  font-size: var(--ms-text-caption); color: var(--ms-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* Formulare in der Spalte (Schritt abhaken): das <form> soll nicht sichtbar
   sein, nur sein Knopf. */
.aside-actions form { display: contents; }
/* Kennzahlen 2×2 */
.aside-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space-2); }
.aside-kpi {
  padding: var(--ms-space-2) var(--ms-space-3);
  background: var(--ms-bg-primary);
  border-radius: var(--ms-radius-sm);
}
.aside-kpi-value {
  font-size: var(--ms-text-lg); font-weight: var(--ms-weight-bold);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aside-kpi-label { font-size: var(--ms-text-caption); color: var(--ms-text-secondary); }
/* Begriff/Wert-Paare */
.aside-pairs { margin: 0; display: flex; flex-direction: column; gap: var(--ms-space-1); }
.aside-pair { display: flex; justify-content: space-between; gap: var(--ms-space-3); font-size: var(--ms-text-small); }
.aside-pair dt { color: var(--ms-text-secondary); flex: none; }
.aside-pair dd { margin: 0; font-weight: var(--ms-weight-medium); text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* Verweisliste (Verknuepftes) */
.aside-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ms-space-05); }
.aside-links a {
  display: flex; align-items: center; gap: var(--ms-space-2);
  padding: var(--ms-space-1) var(--ms-space-2);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-primary); font-size: var(--ms-text-small);
  text-decoration: none;
}
.aside-links a:hover { background: var(--ms-bg-primary); color: var(--ms-accent); }
.aside-links .ms-ico { color: var(--ms-text-tertiary); }
.aside-links .aside-action-meta { margin-left: auto; }
.aside-empty { font-size: var(--ms-text-small); color: var(--ms-text-secondary); margin: 0; }

/* Arbeitsplatz: Spalte klebt, laesst sich ausblenden (html.aside-hidden). */
@media (min-width: 1400px) {
  .doc-layout { transition: grid-template-columns var(--ms-transition-slow); }
  .doc-aside { overflow-x: hidden; }
  .doc-aside > * { min-width: calc(var(--ms-aside-w) - 2 * var(--ms-space-3) - 2px); }
  html.aside-hidden .doc-layout { grid-template-columns: minmax(0, 1fr) 0; }
  html.aside-hidden .doc-aside { padding: 0; border-width: 0; visibility: hidden; transition: visibility 0s var(--ms-transition-slow); }
  html.aside-hidden [data-v2-aside-toggle] .ms-ico { transform: rotate(180deg); }
}
/* Laptop, iPad, Handy: Spalte als Blatt von rechts UEBER dem Inhalt — der
   Inhalt springt nicht, weil ihm keine Spalte weggenommen wird. */
@media (max-width: 1399.98px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-aside {
    position: fixed; top: var(--ms-topbar-h); right: 0;
    height: calc(100vh - var(--ms-topbar-h)); max-height: none;
    width: min(380px, 92vw);
    border-radius: 0; border-width: 0 0 0 1px;
    box-shadow: var(--ms-card-shadow-hover);
    transform: translateX(100%);
    transition: transform var(--ms-transition-base);
    z-index: var(--ms-z-dropdown);
    overscroll-behavior: contain;
  }
  .shell.is-aside-open .doc-aside { transform: translateX(0); }
  .shell.is-aside-open .aside-scrim { display: block; }
  [data-v2-aside-toggle] .ms-ico { transform: rotate(180deg); }
  .shell.is-aside-open [data-v2-aside-toggle] .ms-ico { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .shell-nav, .doc-layout, .doc-aside,
  .nav-collapse-btn .ms-ico, .nav-group .ms-ico, [data-v2-aside-toggle] .ms-ico { transition: none; }
}

/* ── Suche ueber alles (Strg+K) ── */
.cmdk {
  position: fixed; inset: 0;
  z-index: var(--ms-z-modal);
  display: none;
}
.cmdk.is-open { display: block; }
html.cmdk-lock, html.cmdk-lock body { overflow: hidden; }
/* Grund der Suchpalette. Aussehen: zentrale Scrim-Regel in overlays.css,
   dort mit dem schwaecheren Weichzeichner. */
.cmdk-backdrop { position: absolute; inset: 0; }
.cmdk-box {
  position: relative;
  width: min(640px, calc(100vw - 2 * var(--ms-space-4)));
  margin: 12vh auto 0;
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-card-shadow-hover);
  overflow: hidden;
}
.cmdk-field {
  display: flex; align-items: center; gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-5);
  border-bottom: 1px solid transparent;
}
.cmdk.has-results .cmdk-field { border-bottom-color: var(--ms-border-light); }
.cmdk-field .ms-ico { color: var(--ms-text-tertiary); font-size: var(--ms-glyph-md); }
.cmdk-input {
  flex: 1 1 auto; min-width: 0;
  height: var(--ms-control-h);
  border: 0; background: transparent; outline: none;
  color: var(--ms-text-primary);
  /* Derselbe Wert wie bisher (--ms-text-md ist 1rem), jetzt aber als das
     Token, das jedes Bedienelement traegt — dieses Feld hatte die Groesse
     schon richtig und war damit das einzige. */
  font-size: var(--ms-control-font);
}
.cmdk-input::placeholder { color: var(--ms-text-tertiary); }
.cmdk-list { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--ms-space-2); }
.cmdk:not(.has-results) .cmdk-list { display: none; }
.cmdk-group {
  padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-1);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ms-text-secondary);
}
.cmdk-group + .cmdk-group { border-top: 1px solid var(--ms-border-light); margin-top: var(--ms-space-1); }
.cmdk-item {
  display: flex; align-items: center; gap: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-primary); text-decoration: none;
  font-size: var(--ms-text-small);
}
.cmdk-item:hover, .cmdk-item.is-active { background: rgba(var(--ms-accent-rgb), var(--ms-tint)); }
.cmdk-item .ms-ico { color: var(--ms-text-secondary); }
.cmdk-item.is-active .ms-ico { color: var(--ms-accent); }
.cmdk-main { display: flex; flex-direction: column; min-width: 0; }
.cmdk-label { font-weight: var(--ms-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-sub { font-size: var(--ms-text-caption); color: var(--ms-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-meta { margin-left: auto; flex: none; font-size: var(--ms-text-caption); color: var(--ms-text-secondary); font-variant-numeric: tabular-nums; }
.cmdk-empty, .cmdk-hint {
  padding: var(--ms-space-4) var(--ms-space-5);
  font-size: var(--ms-text-small); color: var(--ms-text-secondary);
}
.cmdk-hint { border-top: 1px solid var(--ms-border-light); font-size: var(--ms-text-caption); color: var(--ms-text-secondary); }

/* ── Einstellungen: zweite Navigationsleiste ──────────────────────────────
   Zugehoerige Vorlagen: templates/v2/admin/settings/_layout.html.twig und
   _nav.html.twig, Quelle App\Service\AdminSettingsNavProvider.

   Bedienkonzept nach myOFFICE (`.mo-settings`), KEIN Wert von dort
   (designsystem.md, Abschnitt 2). Ein Unterschied ist bewusst: dort traegt die
   zweite Leiste das Akzent-Blau der Hauptleiste und ist damit farblich vom
   Inhalt abgekoppelt. Hier waere das ein zweiter dunkler Block direkt neben
   dem dunklen Geruest aus Kopfband und Navigationsspalte (Abschnitt 8) — zwei
   dunkle Saeulen mit einem hellen Streifen dazwischen. Diese Leiste ist
   deshalb eine KARTE wie `.md-list`: derselbe Grund, dieselbe Kante, derselbe
   Schatten. Sie gehoert sichtbar zum Arbeitsbereich, nicht zum Geruest.

   Aufbau wie `.master-detail`: schmale Spalte LINKS, denn sie traegt, wohin
   man geht — nicht, was man mit dem Datensatz tut (das waere `.doc-layout`,
   Spalte rechts). */
.settings-layout {
  display: grid;
  grid-template-columns: var(--ms-settings-nav-w) minmax(0, 1fr);
  gap: var(--ms-space-5);
  align-items: start;
}

/* `minmax(0, 1fr)` oben und dieses `min-width: 0` gehoeren zusammen — dieselbe
   Falle wie bei `.md-detail`: eine 1fr-Spalte waechst sonst auf die
   Mindestbreite ihres Inhalts, und die Sicherungszentrale mit ihren breiten
   Tabellen gaebe der ganzen Seite einen Querlauf. */
/* DIE ARBEITSSPALTE SETZT DEN RHYTHMUS, nicht die einzelne Maske
   (2026-09-09). Die Karte bringt keinen Aussenabstand mit; in der Nutzermaske
   stiessen Stammdaten, Nutzergruppen und die gerechnete Auskunft deshalb ohne
   Fuge aneinander und lasen sich als EIN Block — drei Sachen, ein Kasten.

   WARUM AM BEHAELTER UND NICHT ALS NACHBARABSTAND (`.card + .card`): In Flex-
   und Grid-Behaeltern fallen Abstaende NICHT zusammen, sie addieren sich. Vier
   Huellen im Bestand stapeln Karten bereits mit eigenem `gap`
   (`.record-stack`, `.card-grid-2`, `.stats-grid`, `.report-kpi-grid`) — ein
   globaler Nachbarabstand haette dort 32px statt 16 ergeben und im
   zweispaltigen Raster die rechte Karte tiefer gesetzt als die linke. Eine
   Ausnahmeliste waere beim fuenften Behaelter still danebengelegen.

   `--ms-space-5` ist derselbe Wert, den die Kopfzeile schon nach unten hielt
   und den auch die beiden Spalten des Rasters trennt: die Spalte hat damit
   EINEN Abstand, keinen dritten.

   Ein geschlossener Dialog stoert nicht: `.modal` ist `display: none` und
   zaehlt im Flexlauf nicht mit; ein offener steht `position: fixed`. */
.settings-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-5);
}
/* Die Kopfzeile traegt ihren Abstand selbst (`.admin-header`, admin.css) —
   hier setzt ihn der Behaelter, und beides zusammen waeren 48px. */
.settings-main > .admin-header { margin-bottom: 0; }

.settings-nav {
  position: sticky; top: calc(var(--ms-topbar-h) + var(--ms-space-4));
  display: flex; flex-direction: column;
  padding: var(--ms-space-3);
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
}

/* Der Titel sagt, WELCHE Leiste das ist — daneben steht die Hauptleiste mit
   demselben Bauprinzip. Ohne ihn liest sich die Spalte als Untermenue eines
   beliebigen Punktes. */
.settings-nav-title {
  padding: var(--ms-space-1) var(--ms-space-2) var(--ms-space-3);
  margin-bottom: var(--ms-space-1);
  border-bottom: 1px solid var(--ms-border-divider);
  font-size: var(--ms-text-small);
  font-weight: var(--ms-weight-semibold);
  color: var(--ms-text-primary);
}

/* Rubrikbeschriftung: gedaempft, versal, klein — und NICHT klickbar. Dieselbe
   Rolle wie `.nav-group` in der Hauptleiste, aber ohne Knopf: hier wird nichts
   zugeklappt. */
.settings-nav-group {
  padding: 0 var(--ms-space-2);
  margin: var(--ms-space-3) 0 var(--ms-space-1);
  font-size: var(--ms-text-caption);
  font-weight: var(--ms-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ms-text-secondary);
}
.settings-nav-group:first-of-type { margin-top: var(--ms-space-1); }

.settings-nav-item {
  display: block;
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  /* Die Marke des aktiven Eintrags haelt ihren Platz durchsichtig frei, sonst
     ruckt die ganze Leiste beim Umschalten — wie bei `.md-item`. */
  border-inline-start: 3px solid transparent;
  color: var(--ms-text-primary);
  font-size: var(--ms-text-small);
  text-decoration: none;
  transition: background var(--ms-transition-base);
}
.settings-nav-item:hover { background: var(--ms-bg-secondary); color: var(--ms-text-primary); }
.settings-nav-item:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; }
/* Tint statt Vollfarbe (Regel 5): der aktive Eintrag soll auffindbar sein,
   nicht laut — und genauso aussehen wie der aktive Datensatz einer
   Master-Detail-Liste. */
.settings-nav-item.active {
  background: rgba(var(--ms-accent-rgb), var(--ms-tint));
  border-inline-start-color: var(--ms-accent);
  font-weight: var(--ms-weight-semibold);
}

/* Unter 992px klappt die Hauptleiste in die Schublade; eine zweite Spalte
   daneben hat dann keinen Platz. Die Leiste steht dort OBEN ueber der Maske
   und laeuft nicht mit — sie ist dann Teil der Seite, nicht ihr Rand.

   UND SIE BRICHT IN REIHEN UM. Untereinander waere sie 580px hoch: man
   scrollte an fuenfzehn Zeilen vorbei, um zu dem zu kommen, weswegen man die
   Seite geoeffnet hat. Dieselbe Loesung wie in myOFFICE (`.mo-tpl__nav`,
   `flex-flow: row wrap`). Die Rubrikbeschriftung nimmt dafuer eine ganze
   Zeile fuer sich (`flex: 1 0 100%`) — sonst stuende sie mitten in einer
   Reihe von Eintraegen und liesse sich nicht mehr von ihnen unterscheiden. */
@media (max-width: 991px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    position: static;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--ms-space-1) var(--ms-space-2);
  }
  .settings-nav-title { flex: 1 0 100%; }
  .settings-nav-group { flex: 1 0 100%; margin: var(--ms-space-2) 0 0; }
  .settings-nav-item { flex: 0 0 auto; }
}

/* ==========================================================================
   Restzeit bis zur automatischen Abmeldung
   (App\Security\SessionIdleTimeout, assets/session-timeout.js)

   Zwei Orte, ein Bauteil: in der Verwaltung unten in der Navigationsspalte
   (wie in myOFFICE), im Kundenbereich als mittige Fusszeile unter dem Inhalt.
   Beide zuruecknehmend gehalten — der Zaehler ist ein Hinweis, keine Meldung.
   ========================================================================== */
.session-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  /* --ms-text-caption (12px) und nicht --ms-text-small (14px): der Zaehler ist
     ein Nebenhinweis und steht in der Verwaltung neben .nav-foot, das dieselbe
     Stufe traegt — zwei Groessen in einer Fusszeile lesen sich als Versehen. */
  font-size: var(--ms-text-caption);
  /* Nicht --ms-text-tertiary: das erreicht als Textfarbe nur 3,62:1 und faellt
     unter die Lesbarkeitsschwelle des Designsystems (Regel 8). Der Zaehler ist
     zwar ein Nebenhinweis, aber er wird gelesen. */
  color: var(--ms-text-secondary);
  line-height: 1.2;
}
.session-timer .ms-ico { width: 1em; height: 1em; flex: none; }
/* `display: inline-flex` oben uebersteuert das `display: none`, das der
   Browser dem Attribut `hidden` gibt — ohne diese Zeile stand der Zaehler als
   LEERE Zeile mit blossem Symbol da, solange das Modul noch keine Zahl
   geschrieben hatte (oder nicht laeuft). Genau das war am 2026-09-10 zu sehen.
   Hoehere Spezifitaet als die Grundregel, greift daher unabhaengig von der
   Reihenfolge. */
.session-timer[hidden] { display: none; }

/* Die letzten zwei Minuten in der Warnfarbe, die letzte in der Fehlerfarbe.
   Kein Blinken und keine Bewegung: wer gerade tippt, soll hinsehen koennen,
   nicht aufschrecken. Die Farbe allein traegt die Aussage nicht — den Satz
   sagt der Kurzhinweis (window.msNotify), die Zahl steht daneben. */
.session-timer.is-warning { color: var(--ms-warning-text); }
.session-timer.is-critical { color: var(--ms-error-text); font-weight: var(--ms-weight-medium); }

/* Im Fussblock der Navigationsspalte EIGENE Farben, weil die Flaeche dort in
   beiden Fassungen dunkel ist. --ms-text-secondary erreicht darauf 3,32:1, die
   Warn- und Fehlerfarbe sogar nur 2,47:1 und 2,57:1 — der Zaehler waere
   ausgerechnet in seiner letzten Minute unlesbar gewesen.
   Selektor `.nav-foot` und NICHT `.nav`: die Leiste heisst `.shell-nav`, eine
   Klasse `nav` gibt es nicht. Meine erste Fassung griff deshalb nie, und der
   Zaehler stand blass und ohne Einrueckung da. Einrueckung braucht er hier
   keine mehr — die bringt der Fussblock mit. */
.nav-foot .session-timer { color: var(--ms-nav-muted); }
.nav-foot .session-timer.is-warning { color: var(--ms-nav-warning); }
.nav-foot .session-timer.is-critical { color: var(--ms-nav-critical); }

/* Im Kundenbereich: eigene Zeile am Fuss der Seite, mittig. */
.session-foot {
  display: flex;
  /* Untereinander: Zaehler oben, Fassung darunter — dieselbe Reihenfolge wie
     in der Navigationsspalte der Verwaltung. */
  flex-direction: column;
  align-items: center;
  gap: var(--ms-space-1);
  padding: var(--ms-space-6) var(--ms-space-4) var(--ms-space-5);
}

/* Wortmarke und Fassung (templates/v2/_release.html.twig). In der
   Navigationsspalte erbt sie Groesse und Farbe von .nav-foot; im
   Kundenbereich steht sie frei und braucht sie selbst. */
.app-release {
  font-size: var(--ms-text-caption);
  color: var(--ms-text-secondary);
}
.nav-foot .app-release { font-size: inherit; color: inherit; }
/* Die Zahl etwas zurueckgenommen — die Wortmarke ist die Aussage, die Fassung
   die Fussnote dazu. */
.app-release-nr { opacity: 0.75; }