/* ============================================================================
   login-design.css — Designsystem «1b Leitstand — CI/CD SRB 3.4»
   für den Login-Dienst auf bfbern.app.

   AUFBAU
   ------
   .neues-design   gemeinsame Grundlage: Tokens, Karte, Logo, Typografie,
                   Eingaben, Schaltflächen, Meldungen. Gilt für jede Seite,
                   die diese Klasse trägt.
   .seite-login    Ergänzungen der Anmeldeseite
   .seite-code     Ergänzungen der Code-Eingabe
   .seite-passwort Ergänzungen der beiden Passwort-Seiten
   .seite-dashboard App-Hülle statt zentrierter Karte (Übersicht nach dem Login)
   .seite-verwaltung Wie Dashboard, dazu Reiter, Tabellen, Modals (nur Admins)

   Eine Seite wird umgestellt, indem sie im Blade
   `@section('koerperklasse', 'neues-design seite-XY')` setzt. Wer die Klasse
   nicht setzt, sieht **keine einzige** Regel aus dieser Datei — so bleiben die
   noch nicht umgestellten Seiten unverändert. Belegbar durch Vergleich des
   gerenderten HTML vor/nach einer Änderung.

   Warum eine eigene Datei statt einer Änderung am Master:
   `bfbern-theme.css` ist die gemeinsame Quelle ALLER Apps auf bfbern.app. Eine
   Farbänderung dort schlüge sofort auf AS Werkstatt, Formationen,
   Interventionspunkte und die Übersicht durch — ungeprüft und live. Sind alle
   Seiten umgestellt, wandern die Tokens in den Master und diese Datei entfällt.

   Werte aus: assets/BFBern App und Logo Design.zip
              → «Designsystem bfbern.app.dc.html» (Login-Bildschirm + Komponenten)
   Stand 25.08.2026
   ========================================================================= */

/* ===========================================================================
   Gemeinsame Grundlage
   ======================================================================== */

.neues-design {
  /* --- Farben --- */
  --ld-grund:        #303236;  /* Seitenhintergrund, dunkel (bis 24.09.2026: #14161A) */
  --ld-karte:        #FFFFFF;
  --ld-text:         #14161A;
  --ld-text-leise:   #5B5F66;  /* Untertitel */
  --ld-text-label:   #3D4247;  /* Feldbeschriftung */
  --ld-text-still:   #8A8F96;  /* Nebeninformation */
  --ld-platzhalter:  #9BA1A8;
  --ld-rahmen:       #CBCFD5;  /* Feldrahmen */
  --ld-rahmen-leise: #E1E3E6;  /* Trennlinien, Kästen */
  --ld-linie:        #EDEFF1;

  /* Fahrzeugrot — dasselbe Rot trägt auch das Logo (umgefärbt) */
  --ld-akzent:       #A72920;
  --ld-akzent-hover: #84201A;

  --ld-ok:           #1E7A46;
  --ld-fehler:       #D50029;
  --ld-fehler-grund: #FFFAFB;  /* Grund eines fehlerhaften Felds */

  /* --- Schriften: Systemschriften, kein externer Abruf ---
     Seit v2 (24.09.2026) Helvetica Neue zuerst, wie in leitstand-v2.css. */
  --ld-schrift:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ld-schrift-fest: ui-monospace, Menlo, Consolas, monospace;

  /* --- Logo: Anzeigegrösse an einer Stelle einstellbar --- */
  --ld-logo: 132px;
}

/* --- Seite ---------------------------------------------------------------- */
/* Überschreibt bewusst den Foto-Hintergrund des gemeinsamen Layouts. Die
   Bilddatei bleibt liegen — noch nicht umgestellte Seiten nutzen sie weiter. */
body.neues-design {
  background: var(--ld-grund);
  font-family: var(--ld-schrift);
  color: var(--ld-text);
}

/* --- Karte ---------------------------------------------------------------- */
.neues-design .karte {
  max-width: 404px;
  background: var(--ld-karte);
  border-radius: 8px;
  border-top: 3px solid var(--ld-akzent);
  /* Oben mehr Luft, weil das Logo über den Rand ragt */
  padding: calc(var(--ld-logo) / 2 + 22px) 32px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  margin-top: calc(var(--ld-logo) / 2);
  text-align: left;
}

/* --- Logo: zentriert, über den Oberrand überlappend ----------------------- */
.neues-design .logo {
  position: absolute;
  top: calc(var(--ld-logo) / -2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--ld-logo);
  height: var(--ld-logo);
  display: block;
}

/* --- Text ----------------------------------------------------------------- */
/* Alle Überschriften auf die Systemschrift. Das Layout setzt sie sonst über
   `--font-display` (Space Grotesk) — eine Google-Schrift, die mit dem neuen
   Design nirgends mehr gebraucht wird. Ohne diese Regel fielen Zwischen-
   überschriften nach dem Entfernen der Google-Einbindung auf eine beliebige
   Systemschrift zurück statt auf Arial. */
.neues-design h1,
.neues-design h2,
.neues-design h3 { font-family: var(--ld-schrift); }

.neues-design h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ld-text);
  text-align: left;
  margin: 0 0 4px;
}

.neues-design h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ld-text);
  text-align: left;
  margin: 0 0 4px;
}

.neues-design h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ld-text);
  margin: 0;
  text-align: center;
}

.neues-design .hinweis {
  font-size: 13.5px;
  color: var(--ld-text-leise);
  line-height: 1.5;
  margin: 7px 0 0;
  text-align: center;
}

.neues-design .hinweis strong { color: var(--ld-text); font-weight: 700; }

.neues-design a {
  color: var(--ld-akzent);
  text-decoration: none;
  font-weight: 700;
}
.neues-design a:hover { color: var(--ld-akzent-hover); text-decoration: underline; }

/* --- Formular ------------------------------------------------------------- */
.neues-design label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ld-text-label);
  margin: 22px 0 6px;
}

.neues-design input[type="email"],
.neues-design input[type="text"],
.neues-design input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ld-rahmen);
  border-radius: 5px;
  font-family: var(--ld-schrift);
  font-size: 14px;
  color: var(--ld-text);
  background: var(--ld-karte);
  outline: none;
}

.neues-design input::placeholder { color: var(--ld-platzhalter); }

.neues-design input:focus {
  border-color: var(--ld-akzent);
  outline: 2px solid color-mix(in srgb, var(--ld-akzent) 35%, transparent);
  outline-offset: 1px;
}

/* --- Schaltflächen -------------------------------------------------------- */
/* Primär: gefüllt in Fahrzeugrot */
.neues-design button,
.neues-design button.voll {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 5px;
  background: var(--ld-akzent);
  color: #FFFFFF;
  font-family: var(--ld-schrift);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.neues-design button:hover,
.neues-design button.voll:hover { background: var(--ld-akzent-hover); }

/* Sekundär: weisser Grund, grauer Rand (Vorgabe «Sekundär» aus dem System).
   `button.knopf--rand` statt nur `.knopf--rand`: sonst schlägt die Grundregel
   `.neues-design button` (Element + Klasse) diese hier und der Knopf bliebe rot. */
.neues-design button.knopf--rand {
  background: var(--ld-karte);
  border: 1px solid var(--ld-rahmen);
  color: var(--ld-text);
}
.neues-design button.knopf--rand:hover {
  background: #F5F6F8;
  border-color: var(--ld-text-still);
}

.neues-design button:focus-visible,
.neues-design a:focus-visible {
  outline: 2px solid var(--ld-akzent);
  outline-offset: 2px;
}

/* Zweites Formular direkt unter dem Primär-Knopf («Code erneut senden»,
   «Passwort vergessen», «Abmelden»): etwas Abstand, damit die beiden Knöpfe
   nicht wie ein Block wirken. Das Element im Selektor ist nötig, sonst schlägt
   die Grundregel `.neues-design button` den margin-top wieder durch. */
.neues-design .zweitform { margin-top: 10px; }
.neues-design .zweitform button { margin-top: 0; }

/* Abschliessender Hinweis unter einer feinen Linie («Andere E-Mail verwenden») */
.neues-design .abschluss {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ld-linie);
  font-size: 12px;
  color: var(--ld-text-still);
  text-align: center;
}

/* --- Meldungen (Funktion unverändert, nur Farbgebung) --------------------- */
.neues-design .status,
.neues-design .fehler {
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.45;
  margin: 18px 0 0;
  border: 1px solid;
}

.neues-design .status {
  color: var(--ld-ok);
  border-color: color-mix(in srgb, var(--ld-ok) 45%, transparent);
  background: color-mix(in srgb, var(--ld-ok) 8%, transparent);
}

.neues-design .fehler {
  color: var(--ld-fehler);
  border-color: color-mix(in srgb, var(--ld-fehler) 45%, transparent);
  background: var(--ld-fehler-grund);
  font-weight: 700;
}

/* --- Fusszeile unter der Karte -------------------------------------------- */
.neues-design .fuss {
  color: var(--ld-text-still);
  font-size: 12px;
}

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .neues-design { --ld-logo: 108px; }
  .neues-design .karte {
    padding: calc(var(--ld-logo) / 2 + 20px) 22px 24px;
    border-radius: 8px;
  }
  .neues-design h1 { font-size: 22px; }
}

/* ===========================================================================
   Anmeldeseite
   ======================================================================== */
/* (derzeit keine Sonderregeln — die Grundlage genügt) */

/* ===========================================================================
   Code-Eingabe
   ======================================================================== */

/* Das Codefeld ist der einzige Zweck dieser Seite — entsprechend gross und in
   Festbreitenschrift, wie das Designsystem Zahlenwerte durchgehend setzt.
   `text-indent` gleicht den Abstand aus, den letter-spacing hinter der letzten
   Ziffer erzeugt; ohne ihn wirkt der Text nach links versetzt. */
/* `input.code-eingabe`: die Grundregel `.neues-design input[type="text"]` zählt
   durch den Attribut-Selektor gleich hoch wie eine reine Klassenregel — ohne das
   Element im Selektor bliebe das Feld bei 14 px Arial. */
.seite-code input.code-eingabe {
  font-family: var(--ld-schrift-fest);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  text-align: center;
  padding: 14px 12px;
  color: var(--ld-text);
}

.seite-code input.code-eingabe::placeholder {
  color: var(--ld-linie);
  font-weight: 700;
}

/* ===========================================================================
   Passwort-Seiten (/anmelden — Passwort eingeben · /passwort — Passwort festlegen)
   ======================================================================== */

/* Derzeit keine Sonderregeln — die gemeinsame Grundlage genügt. Auch die zwei
   Felder auf /passwort folgen bewusst demselben Abstands-Rhythmus wie überall. */


/* ===========================================================================
   Dashboard — App-Hülle statt zentrierter Karte
   ---------------------------------------------------------------------------
   Diese Seite folgt einem anderen Grundriss als der Anmeldeweg: dunkle
   Kopfleiste über die volle Breite, darunter ein heller Inhaltsbereich mit
   Kacheln im Raster (Designsystem, Bildschirme «isApp» + «isDashboard»).

   BEWUSSTE ABWEICHUNG VON DER VORLAGE (Entscheid Christoph, 27.08.2026):
   Die Vorlage zeigt Gruppen als Überschriften mit allen Anwendungen darunter.
   Hier bleibt das heutige Verhalten — Anwendungen mit gemeinsamer Subdomain
   erscheinen als EINE Kachel, die ein Auswahlfenster öffnet. Das ist eine
   Funktion, keine Gestaltung, und wird deshalb nicht angetastet. Ebenso
   weggelassen: das Suchfeld der Vorlage (wäre neue Funktion).
   ======================================================================== */

/* Kopfleiste, Seitenkopf, Abschnitte und Kacheln kommen seit 24.09.2026 aus
   der gemeinsamen Datei leitstand-v2.css (Quelle: assets/leitstand-v2.css).
   Sie wird VOR dieser Datei geladen — was hier steht, ist die Ebene des
   Login-Dienstes darüber. */

/* `body.neues-design` setzt oben den dunklen Grund des Anmeldewegs. Auf den
   App-Seiten gilt der helle Grund aus v2 — nötig, weil diese Datei nach
   leitstand-v2.css geladen wird und sonst gewänne. */
body.neues-design.lv2 { background: var(--lv2-grund); }

/* Die gemeinsame Hülle zentriert sonst eine Karte. Hier soll sie über die
   volle Breite und Höhe laufen. */
.seite-dashboard .huelle {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.seite-dashboard .inhalt { flex: 1; min-height: 0; }

.seite-dashboard .leer {
  font-size: 15px;
  color: var(--ld-text-leise);
  line-height: 1.6;
  max-width: 52ch;
}

/* --- Auswahlfenster für gebündelte Anwendungen ---------------------------- */
.seite-dashboard .gruppe-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.seite-dashboard .gruppe-overlay.auf { display: flex; }
.seite-dashboard .gruppe-overlay--ebene2 { z-index: 60; }

.seite-dashboard .gruppe-fenster {
  width: 100%;
  max-width: 620px;
  max-height: 82vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 8px;
  border-top: 3px solid var(--ld-akzent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
  padding: 22px 24px 24px;
}

.seite-dashboard .gruppe-fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.seite-dashboard .gruppe-fenster-kopf h2 {
  margin: 0;
  font-family: var(--ld-schrift);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.seite-dashboard button.gruppe-schliessen {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--ld-rahmen);
  border-radius: 5px;
  background: #FFFFFF;
  color: var(--ld-text);
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}
.seite-dashboard button.gruppe-schliessen:hover { background: #F5F6F8; }

.seite-dashboard .gruppe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* --- Fusszeile ------------------------------------------------------------ */
/* Auf hellem Grund, nicht auf dunklem wie im Anmeldeweg. */
.seite-dashboard .fuss { color: var(--ld-text-still); font-size: 12px; }

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .seite-dashboard .gruppe-fenster { padding: 18px 16px 20px; }
  .seite-dashboard .gruppe-grid { grid-template-columns: 1fr; }
}


/* ===========================================================================
   Verwaltung — App-Hülle plus Reiter, Tabellen und Modals
   ---------------------------------------------------------------------------
   Diese Seite wurde bewusst **über CSS allein** umgestellt: der Skriptblock der
   Ansicht (506 Zeilen, davon 104 Zeilen HTML-Erzeugung) blieb byteweise
   unverändert. Alle Klassen, die dort erzeugt werden, müssen deshalb hier
   gestaltet sein — hinweis, knopf--rand, knopf--klein, aktionen, tabelle-wrap,
   werkzeug, zeile2, verlust-liste, regel-app, oben, matrix, auto-zelle.

   ABWEICHUNG VON DER VORLAGE: Die Vorlage baut Tabellen als CSS-Raster. Hier
   bleiben echte <table>-Elemente — sie entstehen im Skript, sind für
   Tabellendaten die richtigere Auszeichnung und werden hier nur so gestaltet,
   dass sie der Vorlage entsprechen (Kopfzeile #FAFBFC, Trennlinien #F2F4F6,
   Festbreitenschrift für E-Mail und Kürzel).

   Ebenfalls abweichend: Die Vorlage setzt den Reiternamen als Überschrift und
   wechselt ihn beim Umschalten. Hier bleibt eine feste Überschrift «Verwaltung»
   — der Reiterwechsel ist Skriptlogik, die nicht angefasst wird.
   ======================================================================== */

/* Die Verwaltung erbt die App-Hülle des Dashboards. Damit die Regeln dort
   greifen, trägt die Seite beide Klassen: `seite-dashboard seite-verwaltung`. */

.seite-verwaltung .inhalt-koerper { padding: 24px 32px 40px; }

/* Der Seitenkopf aus leitstand-v2.css ist für die Übersicht gebaut. Hier
   stehen die Reiter darin — dafür weniger Luft unten, und die Abschnitte sind
   Reiter, keine untereinanderliegenden Gruppen. */
.seite-verwaltung .inhalt-kopf { padding: 30px 32px 20px; }
.seite-verwaltung .abschnitt + .abschnitt { margin-top: 0; }

/* --- Titelbereich --------------------------------------------------------- */
/* Die Vorlage setzt hier eine Augenbraue («Verwaltung») über die Überschrift und
   wechselt die Überschrift mit dem Reiter. Beides bewusst nicht übernommen: die
   dunkle Kopfleiste nennt Bereich und Anwendung bereits, eine Wiederholung
   darunter wäre Lärm — und ein wechselnder Titel wäre Skriptlogik, die hier
   unangetastet bleibt. Die Reiter selbst zeigen, wo man ist. */
.seite-verwaltung .inhalt-kopf h1 { margin: 0; font-size: 26px; }

/* --- Reiter --------------------------------------------------------------- */
.seite-verwaltung .reiter {
  display: flex;
  gap: 2px;
  margin: 20px 0 0;
  flex-wrap: wrap;
}

/* Element im Selektor, sonst schlägt die Grundregel `.neues-design button`
   (Fahrzeugrot, volle Breite) durch. */
.seite-verwaltung .reiter button {
  width: auto;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ld-text-leise);
  font-family: var(--ld-schrift);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.seite-verwaltung .reiter button:hover { color: var(--ld-text); background: transparent; }
.seite-verwaltung .reiter button.aktiv {
  border-bottom-color: var(--ld-akzent);
  color: var(--ld-text);
  background: transparent;
}

/* --- Abschnitte (ein Reiter = ein Abschnitt) ------------------------------ */
.seite-verwaltung .abschnitt { display: none; }
.seite-verwaltung .abschnitt.aktiv { display: block; }

/* --- Werkzeugzeile über den Tabellen -------------------------------------- */
.seite-verwaltung .oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.seite-verwaltung .such-zeile { display: flex; gap: 8px; flex-wrap: wrap; }

.seite-verwaltung input.suche,
.seite-verwaltung .such-zeile input.suche {
  width: 100%;
  min-width: 180px;
  flex: 1;
  padding: 9px 12px;
  margin: 0 0 14px;
  border: 1px solid var(--ld-rahmen);
  border-radius: 5px;
  font-family: var(--ld-schrift);
  font-size: 13.5px;
  color: var(--ld-text);
  background: #FFFFFF;
}
.seite-verwaltung .such-zeile input.suche { margin-bottom: 0; }

.seite-verwaltung select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ld-rahmen);
  border-radius: 5px;
  font-family: var(--ld-schrift);
  font-size: 13.5px;
  color: var(--ld-text);
  background: #FFFFFF;
}
.seite-verwaltung select:focus,
.seite-verwaltung input.suche:focus {
  border-color: var(--ld-akzent);
  outline: 2px solid color-mix(in srgb, var(--ld-akzent) 35%, transparent);
  outline-offset: 1px;
}

/* --- Tabellen ------------------------------------------------------------- */
.seite-verwaltung .tabelle-wrap {
  background: #FFFFFF;
  border: 1px solid var(--ld-rahmen-leise);
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.seite-verwaltung table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ld-schrift);
  font-size: 13px;
}

.seite-verwaltung thead th {
  font-family: var(--ld-schrift-fest);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ld-text-still);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  padding: 10px 16px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--ld-linie);
}

.seite-verwaltung tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid #F2F4F6;
  color: var(--ld-text-leise);
  white-space: nowrap;
  vertical-align: middle;
}
.seite-verwaltung tbody tr:last-child td { border-bottom: 0; }
.seite-verwaltung tbody tr:hover { background: #FAFBFC; }

/* --- Plaketten (aktiv / inaktiv) ------------------------------------------ */
.seite-verwaltung .plakette {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.seite-verwaltung .plakette.ja {
  background: #E7F2EC;
  color: var(--ld-ok);
}
.seite-verwaltung .plakette.nein {
  background: #F2F4F6;
  color: var(--ld-text-still);
}

/* --- Schaltflächen in Tabellen und Werkzeugzeilen ------------------------- */
.seite-verwaltung .werkzeug { display: flex; gap: 6px; }

/* Primär (z. B. «Benutzer anlegen») */
.seite-verwaltung .inhalt-koerper button,
.seite-verwaltung .modal button {
  width: auto;
  margin: 0;
  padding: 9px 15px;
  border: 0;
  border-radius: 5px;
  background: var(--ld-akzent);
  color: #FFFFFF;
  font-family: var(--ld-schrift);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.seite-verwaltung .inhalt-koerper button:hover,
.seite-verwaltung .modal button:hover { background: var(--ld-akzent-hover); }

/* Sekundär — im Skript als .knopf--rand erzeugt */
.seite-verwaltung button.knopf--rand {
  background: #FFFFFF;
  border: 1px solid var(--ld-rahmen);
  color: var(--ld-text);
}
.seite-verwaltung button.knopf--rand:hover {
  background: #FFFFFF;
  border-color: var(--ld-text);
}

/* Klein — Zeilenaktionen wie «Bearbeiten» */
.seite-verwaltung button.knopf--klein {
  padding: 5px 11px;
  font-size: 12px;
}

/* --- Freigaben-Matrix ----------------------------------------------------- */
/* Senkrechte Spaltenköpfe bleiben erhalten — sie machen die Matrix erst lesbar. */
.seite-verwaltung .matrix td,
.seite-verwaltung .matrix th { text-align: center; padding-left: 6px; padding-right: 6px; }
.seite-verwaltung .matrix td:nth-child(-n+2),
.seite-verwaltung .matrix th:nth-child(-n+2) { text-align: left; }
.seite-verwaltung .matrix thead th:nth-child(n+3) {
  vertical-align: bottom;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 10rem;
}
.seite-verwaltung .matrix thead th:nth-child(n+3) > span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
/* Klebende Kopfzeile der Freigaben-Matrix (Wunsch Christoph, 06.09.2026).
   Bei vielen Personen verlor man beim Blättern, welche Spalte zu welcher
   Anwendung gehört.

   Zwei Fallstricke, die das Naheliegende nicht funktionieren lassen:

   1. `.tabelle-wrap` trägt `overflow-x: auto`. Damit wird laut Spezifikation
      auch `overflow-y` zu `auto` — der Kasten ist bereits ein Scroll-Container,
      wächst aber in der Höhe mit und scrollt daher nie selbst. Gescrollt hat
      die Seite. Ein `position: sticky` darin hätte nichts bewirkt. Erst die
      Höhenbegrenzung macht aus dem Kasten einen echten Scrollbereich.

   2. Die Tabelle läuft mit `border-collapse: collapse`. Zusammengelegte Rahmen
      gehören der Tabelle, nicht der Zelle — die Unterlinie bliebe beim Scrollen
      zurück. Darum hier ein innerer Schatten statt eines Rahmens.

   Zur Höhe: Der Kasten beginnt gemessen 342 px unter dem Fensterrand
   (Kopfleiste, Titel, Reiter, zwei Suchfelder). Die 24rem hier liegen bewusst
   darüber, damit unten noch die Fusszeile Platz hat und der Kasten **ganz ins
   Fenster passt**. Das ist der eigentliche Punkt: Ragte er darunter hinaus,
   müsste man die Seite scrollen — und dann wandert die klebende Kopfzeile mit
   dem Kastenrand aus dem Bild, womit die Übung verloren wäre.

   Die Untergrenze von 36rem (Wunsch Christoph, 24.09.2026) sorgt dafür, dass
   unter der Kopfzeile immer rund sechs Personen sichtbar bleiben. Vorher lag
   sie bei 200 px — auf einem Laptop (1366 × 768) blieben so knapp zwei Zeilen,
   weil die einzeiligen senkrechten App-Namen die Kopfzeile allein rund 305 px
   hoch machen. Umbrechen der Namen wurde verworfen: schlecht lesbar.
   Auf flachen Fenstern scrollt dafür die Seite ein Stück mit. */
.seite-verwaltung .tabelle-wrap--matrix {
  max-height: calc(100vh - 24rem);
  min-height: 36rem;
  overflow: auto;
}

.seite-verwaltung .matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--ld-linie);
}

/* Name und Kürzel bleiben beim Blättern nach rechts stehen.
   Ohne das ist ein Kästchen in der Mitte der Tabelle nicht lesbar: Die
   Kopfzeile nennt die Anwendung, aber zu welcher Person die Zeile gehört,
   sieht man nicht mehr. Auf der Produktion tritt das sicher auf — die Matrix
   braucht mit 26 Anwendungen rund 2071 px, der Kasten hat gut 1180 px.

   Die beiden Spalten bekommen feste Breiten, weil die zweite sonst keinen
   berechenbaren Anschlag hätte: `left` braucht einen Zahlenwert, und der muss
   der Breite der ersten Spalte entsprechen. Lange Namen werden mit Auslassung
   abgeschnitten; die vollständige Angabe steht weiterhin im Tooltip. */
.seite-verwaltung .matrix {
  --ld-matrix-spalte1: 200px;
  --ld-matrix-spalte2: 86px;
}

.seite-verwaltung .matrix th:nth-child(1),
.seite-verwaltung .matrix td:nth-child(1),
.seite-verwaltung .matrix th:nth-child(2),
.seite-verwaltung .matrix td:nth-child(2) {
  position: sticky;
  z-index: 1;
  background: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seite-verwaltung .matrix th:nth-child(1),
.seite-verwaltung .matrix td:nth-child(1) {
  left: 0;
  width: var(--ld-matrix-spalte1);
  min-width: var(--ld-matrix-spalte1);
  max-width: var(--ld-matrix-spalte1);
}

.seite-verwaltung .matrix th:nth-child(2),
.seite-verwaltung .matrix td:nth-child(2) {
  left: var(--ld-matrix-spalte1);
  width: var(--ld-matrix-spalte2);
  min-width: var(--ld-matrix-spalte2);
  max-width: var(--ld-matrix-spalte2);
  box-shadow: 1px 0 0 var(--ld-linie);
}

/* Stapelung: Die Kopfzeile liegt über den Namensspalten, und die Ecke oben
   links über beidem — sonst schöbe sich beim Blättern das eine unter das
   andere. */
.seite-verwaltung .matrix thead th:nth-child(1),
.seite-verwaltung .matrix thead th:nth-child(2) {
  z-index: 3;
  background: #FAFBFC;
}

/* Die Zeilenmarkierung beim Überfahren muss die klebenden Zellen mitnehmen —
   sie tragen einen eigenen Hintergrund und blieben sonst weiss. */
.seite-verwaltung .matrix tbody tr:hover td:nth-child(1),
.seite-verwaltung .matrix tbody tr:hover td:nth-child(2) { background: #FAFBFC; }

.seite-verwaltung .matrix .auto-zelle { opacity: .5; }
.seite-verwaltung .matrix input:disabled { cursor: not-allowed; }
.seite-verwaltung .matrix input[type="checkbox"] { accent-color: var(--ld-akzent); }

/* --- Organisation --------------------------------------------------------- */
.seite-verwaltung .org-block { margin-bottom: 26px; }
.seite-verwaltung .regel-app { font-size: 13px; color: var(--ld-text-leise); }
.seite-verwaltung .verlust-liste { margin: 8px 0 8px 20px; font-size: 13px; }

/* --- Modals --------------------------------------------------------------- */
.seite-verwaltung .modal-hg {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.seite-verwaltung .modal-hg.auf { display: flex; }

.seite-verwaltung .modal {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  background: #FFFFFF;
  border-radius: 8px;
  border-top: 3px solid var(--ld-akzent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
}

.seite-verwaltung .modal h2,
.seite-verwaltung .modal h3 {
  margin: 0 0 4px;
  font-family: var(--ld-schrift);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: left;
}

.seite-verwaltung .modal label {
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ld-text-label);
}

.seite-verwaltung .modal input[type="text"],
.seite-verwaltung .modal input[type="email"],
.seite-verwaltung .modal input[type="number"],
.seite-verwaltung .modal input[type="password"] {
  padding: 9px 12px;
  font-size: 13.5px;
}

.seite-verwaltung .modal .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seite-verwaltung .modal .aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

/* --- Ladezustand und Hinweise -------------------------------------------- */
.seite-verwaltung .lade {
  color: var(--ld-text-still);
  font-size: 13px;
  padding: 16px 0;
}
.seite-verwaltung .hinweis { text-align: left; font-size: 13px; }

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .seite-verwaltung .inhalt-kopf { padding: 22px 16px 14px; }
  .seite-verwaltung .inhalt-kopf h1 { font-size: 24px; }
  .seite-verwaltung .inhalt-koerper { padding: 18px 16px 32px; }
  .seite-verwaltung .reiter { margin-top: 14px; }
  .seite-verwaltung .reiter button { padding: 10px 12px; font-size: 13px; }
  .seite-verwaltung .modal .zeile2 { grid-template-columns: 1fr; gap: 0; }
  .seite-verwaltung .modal { padding: 18px 16px 20px; }
}