/*
 * Layoutdatei: layout.css
 *
 * Enthaelt ausschliesslich Struktur- und Anordnungsregeln
 * (Positionierung, Groessen, Grid-/Flex-Aufbau).
 *
 * Farben werden hier nicht direkt gesetzt, sondern ueber die
 * CSS-Variablen aus design/farben/mimanex-blau.css bezogen.
 * Optische Feinheiten einzelner Elemente stehen in komponenten.css.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--farbe-text-haupt);
    background-color: var(--farbe-hintergrund);
}

/* ------------------------------------------------------------ */
/* Anmeldeseite                                                  */
/* ------------------------------------------------------------ */

.anmeldeseite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--farbe-hintergrund);
}

.anmeldebereich {
    width: 100%;
    max-width: 380px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.anmeldebereich__logo {
    width: 660px;
    height: auto;
    margin-bottom: 24px;
}

.anmeldebereich__titel {
    text-align: center;
    margin: 0 0 36px 0;
}

.anmeldeformular {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Der Setup-Assistent hat zwei Abschnitte (Datenbank + Verwalter) und */
/* damit mehr Felder als die Anmeldeseite, daher etwas mehr Breite.    */
.anmeldebereich--einrichtung {
    max-width: 460px;
}

/* ------------------------------------------------------------ */
/* Hauptoberflaeche - Grundgeruest                               */
/* ------------------------------------------------------------ */

.hauptoberflaeche {
    /* --detailbreite steuert die Breite des Detailbereichs. Der Wert wird */
    /* per Trenner (siehe hauptoberflaeche.js) veraendert und je Benutzer */
    /* gespeichert, damit die Position Seitenwechsel/Neuladen uebersteht. */
    --detailbreite: var(--gespeicherte-detailbreite, 300px);
    --fklbreite: var(--gespeicherte-fklbreite, 240px);
    height: 100vh;
    display: grid;
    grid-template-columns: 64px 220px var(--fklbreite) 6px 1fr auto auto;
    grid-template-rows: 64px 48px 1fr 32px;
    grid-template-areas:
        "kopf        kopf           kopf           kopf        kopf         kopf     kopf"
        "toolbar     toolbar        toolbar        toolbar     toolbar      toolbar  toolbar"
        "appleiste   funktionsleiste ansichtenleiste fkltrenner hauptansicht trenner detailbereich"
        "status      status         status         status      status       status   status";
}

.hauptoberflaeche--einstellungen {
    grid-template-columns: 64px 220px 1fr auto auto;
    grid-template-areas:
        "kopf        kopf           kopf         kopf     kopf"
        "toolbar     toolbar        toolbar      toolbar  toolbar"
        "appleiste   funktionsleiste hauptansicht trenner detailbereich"
        "status      status         status       status   status";
}

.kopfbereich {
    grid-area: kopf;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

/* Positioniert unabhaengig von der Breite der Nachbarelemente exakt */
/* in der Mitte des Kopfbereichs (zwischen Titel und Benutzer/Abmelden). */
.kopfbereich__mitte {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kopfbereich__marke {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kopfbereich__logo {
    width: auto;
    height: 48px;
}

.kopfbereich__aktionen {
    display: flex;
    align-items: center;
    gap: 20px;
}

/*
   Die Toolbar wird immer von links nach rechts aufgebaut. Schaltflaechen,
   die am rechten Rand stehen sollen, erhalten zusaetzlich den Modifikator
   toolbar__schaltflaeche--rechts.
*/
.toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 16px;
}

.applikationsleiste {
    grid-area: appleiste;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.applikationsleiste__eintrag {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.applikationsleiste__eintrag-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.anwendung-dialog__kontrollkaestchen {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.funktionsleiste {
    grid-area: funktionsleiste;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.ansichtenleiste {
    grid-area: ansichtenleiste;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    min-width: 0;
}

.hauptoberflaeche--einstellungen .ansichtenleiste,
.hauptoberflaeche--einstellungen .fkl-trenner {
    display: none;
}

/* Senkrechtes Padding bestimmt den Abstand zwischen den Zeilen. */
.funktionsleiste__eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 20px;
    cursor: pointer;
}

.ansichtenleiste__eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 20px;
    cursor: pointer;
}

.funktionsleiste__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ansichtenleiste__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funktionsleiste__icon-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.ansichtenleiste__icon-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/*
   Der Name nimmt den freien Platz ein, damit die Anzahl rechts steht.
   Lange Namen werden gekuerzt statt umzubrechen.
*/
.ansichtenleiste__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anzahl der Beitraege, rechtsbuendig am Zeilenende. */
.ansichtenleiste__anzahl {
    flex-shrink: 0;
    margin-left: auto;
}

.ansichtenleiste__neu-hinweis {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--farbe-fehler);
}

.ansichtenleiste__neu-hinweis + .ansichtenleiste__anzahl {
    margin-left: 6px;
}

.ansichtenleiste__leer {
    margin: 0;
    padding: 10px 20px;
    font-size: 13px;
}

.bereich-ansichten {
    margin-top: 16px;
}

.bereich-ansichten__kopfzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
}

.bereich-ansichten__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.bereich-ansichten__spalte {
    min-width: 0;
}

.bereich-ansichten__titel {
    color: var(--farbe-hauptblau);
}

.bereich-ansichten__symbol {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--farbe-linie-dunkel);
    border-radius: 6px;
    background: var(--farbe-hintergrund);
    color: var(--farbe-hauptblau);
    cursor: pointer;
}

.bereich-ansichten__symbol:hover {
    background: var(--farbe-hauptblau-hintergrund);
    border-color: var(--farbe-hauptblau);
}

.bereich-ansichten__datei {
    display: none;
}

.bereich-ansichten__zeile form {
    display: none;
}

.bereich-ansichten__suche {
    width: 100%;
    margin-bottom: 8px;
}

.bereich-ansichten__liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
}

.bereich-ansichten__zeile {
    width: 100%;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 8px 10px;
    border-left: 3px solid transparent;
}

/* Rechte Spalte: Name, Icon-Upload, Hinzufuegen/Status. */
[data-bereich-ansicht-verfuegbar-liste] .bereich-ansichten__zeile {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

/* Der Ansichten-Filter blendet nicht passende Zeilen ueber das
   hidden-Attribut aus. Da die Zeile display: grid besitzt, wuerde die
   Standardregel [hidden] { display: none } sonst ueberschrieben; diese
   Regel stellt das Ausblenden wieder sicher. */
.bereich-ansichten__zeile[hidden] {
    display: none;
}

.bereich-ansichten__zeile--ausgewaehlt,
.bereich-ansichten__zeile:focus {
    background: var(--farbe-hauptblau-hintergrund);
    border-left-color: var(--farbe-hauptblau);
    outline: none;
}

.bereich-ansichten__zeile--zugeordnet {
    opacity: 0.7;
}

.bereich-ansichten__zeilenaktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.bereich-ansichten__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bereich-ansichten__icon--waehlbar {
    cursor: pointer;
}

.bereich-ansichten__icon--waehlbar:hover .bereich-ansichten__icon-standard,
.bereich-ansichten__icon--waehlbar:hover .bereich-ansichten__icon-bild {
    outline: 2px solid var(--farbe-hauptblau);
}

.bereich-ansichten__icon-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.bereich-ansichten__icon-standard {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--farbe-hauptblau-hintergrund);
    color: var(--farbe-hauptblau);
}

/*
   Platzhalter der rechten Spalte, solange kein Icon gesetzt ist: ein
   kleines Hochlade-Symbol, das den Upload andeutet.
*/
.bereich-ansichten__icon-hochladen {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px dashed var(--farbe-linie-dunkel);
    color: var(--farbe-hauptblau);
}

.bereich-ansichten__icon--waehlbar:hover .bereich-ansichten__icon-hochladen {
    border-color: var(--farbe-hauptblau);
}

.bereich-ansichten__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bereich-ansichten__status,
.bereich-ansichten__leer {
    font-size: 0.85rem;
}

.hauptansicht {
    grid-area: hauptansicht;
    padding: 32px;
    overflow-y: auto;
}

.detailbereich {
    grid-area: detailbereich;
    width: var(--detailbreite);
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.2s ease;
}

/* Waehrend des Ziehens am Trenner die Breiten-Animation aussetzen, damit */
/* der Detailbereich dem Mauszeiger verzoegerungsfrei folgt. */
.detailbereich--zieht {
    transition: none;
}

/* Ausgeblendeter Zustand: Detailbereich wird auf Breite 0 zusammengefahren,          */
/* damit die Hauptansicht den freiwerdenden Platz automatisch einnimmt.              */
.detailbereich--ausgeblendet {
    width: 0;
    opacity: 0;
}

.detailbereich__inhalt {
    width: var(--detailbreite);
    height: 100%;
    padding: 20px;
}

/* Verschiebbarer Trenner zwischen Hauptansicht und Detailbereich. */
.detail-trenner {
    grid-area: trenner;
    width: 6px;
    cursor: col-resize;
}

.fkl-trenner {
    grid-area: fkltrenner;
    width: 6px;
    cursor: col-resize;
}

/* Ausgeblendet zusammen mit dem Detailbereich (Spalte faellt auf 0). */
.detail-trenner--versteckt {
    display: none;
}

/* ------------------------------------------------------------ */
/* Einstellungen - Abschnitt Sicherheit                          */
/* ------------------------------------------------------------ */

.sicherheit {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sicherheit__liste {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.sicherheit__eintrag {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
}

.sicherheit__detail {
    flex: 1;
    min-width: 0;
    margin-top: 8px;
}

.sicherheit__liste-bereich {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sicherheit__liste-neu {
    width: 100%;
}

.sicherheit__eintrag-hinweis {
    display: block;
    font-size: 11px;
}

/* ------------------------------------------------------------ */
/* Benutzerverwaltung: Profilanzeige                             */
/* ------------------------------------------------------------ */

.benutzer-profil {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Maske zum Anlegen/Bearbeiten eines Benutzers direkt im Hauptbereich */
/* (kein Dialogfenster mehr), begrenzt auf eine angenehme Formularbreite. */
.benutzer-formular {
    max-width: 640px;
}

/* Kopfzeile der Benutzerverwaltung mit "Neuer Benutzer" und "Benutzer */
/* löschen", oberhalb von Liste und Maske (spannt ueber beide Spalten). */
.benutzer-formular__aktionsleiste {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 640px;
}

.benutzer-formular__aktionsleiste .schaltflaeche-sekundaer,
.benutzer-formular__aktionsleiste .schaltflaeche-gefahr {
    width: auto;
}

/* Persoenliche Daten: eigener Fotobereich links (grosses Vorschaubild */
/* + Auswahl darunter), Eingabefelder rechts daneben - wie ein echter */
/* Profilbereich, nicht nur ein kleines Dateifeld irgendwo in der Zeile. */
.benutzer-formular__daten-bereich {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.benutzer-formular__foto-bereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 200px;
    flex-shrink: 0;
    text-align: center;
}

/* Das Vorschaubild selbst ist die Schaltflaeche (klickbar). */
.benutzer-formular__foto-label {
    position: relative;
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.benutzer-formular__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benutzer-formular__foto--platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    font-weight: 600;
}

/* Eingeblendeter Hinweis "Ändern" beim Ueberfahren des Fotos. */
.benutzer-formular__foto-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.benutzer-formular__foto-label:hover .benutzer-formular__foto-overlay,
.benutzer-formular__foto-label:focus-within .benutzer-formular__foto-overlay {
    opacity: 1;
}

.benutzer-formular__felder-bereich {
    flex: 1;
    min-width: 0;
}

/* Der eigentliche Datei-Eingabe ist visuell versteckt, aber weiterhin */
/* per Tastatur/Screenreader erreichbar; das zugehoerige <label> uebernimmt */
/* oeffnet den nativen Dateidialog. */
.benutzer-formular__bild-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Kartenfoermige Abschnitte der Benutzer-Maske. */
.benutzer-karte {
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 10px;
}

.benutzer-karte__titel {
    margin: 0 0 14px 0;
}

/* Zweispaltiges Raster fuer zusammengehoerige Felder (Vorname/Nachname, */
/* Land/Region, Motivation/Ueber mich). */
.formular-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.formular-raster > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Einzelnes Feld ausserhalb des Zweispalten-Rasters (Benutzername, */
/* E-Mail, Kennwort): gleicher enger Abstand Beschriftung -> Feld wie im */
/* Raster, statt auf den ungleichmaessigen Standard-Zeilenabstand des */
/* Browsers angewiesen zu sein. */
.formular-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.formular-feld:last-child {
    margin-bottom: 0;
}

/* Innerhalb der Benutzer-Maske werden Eingabefelder kompakter dargestellt */
/* als das globale .eingabefeld (48px), da hier viele Felder auf engem */
/* Raum uebereinander stehen (Vorname, Nachname, Benutzername, E-Mail, ...). */
/* Bezug auf .benutzer-maske (nicht .benutzer-formular), da die Felder ueber */
/* das HTML-form-Attribut mit dem Formular verbunden sind und nicht mehr */
/* innerhalb des <form>-Elements liegen (siehe php/benutzer_formular.php). */
.benutzer-maske .eingabefeld {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

/* Die globale Beschriftung nutzt einen negativen Abstand fuer die */
/* Dialogmaske (flex-gap dort). In der Benutzer-Maske uebernimmt stattdessen */
/* .formular-raster > div bzw. .formular-feld per "gap" den Abstand */
/* Beschriftung -> Feld, daher hier auf 0 zurueckgesetzt. */
.benutzer-maske .anwendung-dialog__feldbeschriftung {
    margin-bottom: 0;
}

.benutzer-formular__text {
    height: 64px;
    padding: 8px 12px;
    resize: vertical;
}

.benutzer-formular__zaehler {
    display: block;
    text-align: right;
    font-size: 11px;
}

.benutzer-formular__anmeldedaten {
    margin: 16px 0 0 0;
    font-size: 13px;
}

/* Gesamte Benutzer-Maske (Karten + Speichern). Nimmt die volle Breite */
/* der rechten Spalte ein, damit die rechte Kante buendig mit den */
/* Aktionen im Kopfbereich abschliesst (keine schmalere Insel mehr). */
.benutzer-maske {
    width: 100%;
}

/*
   Eigenes Profil: dieselbe Maske wie in der Benutzerverwaltung, aber
   ohne Benutzerliste daneben. Die Breite wird begrenzt, damit die
   Felder auf breiten Bildschirmen nicht auseinanderlaufen.
*/
#ansicht-profil {
    max-width: 1000px;
}

.benutzer-formular__speichern {
    width: 100%;
    height: 48px;
    margin-top: 4px;
}

/* Funktion "Benutzer" als eigenstaendige Hauptseite: fuellt die */
/* Hauptansicht in voller Hoehe. Der Reiterkopf steht fest, nur der */
/* Registerinhalt darunter scrollt. Die Hoehe leitet sich aus dem */
/* Raster der Hauptoberflaeche ab: 100vh minus Kopf (64) + Toolbar (48) */
/* + Statuszeile (32) sowie der Innenabstand der Hauptansicht (2x32). */
/* Randlos: hebt den 32px-Innenabstand der Hauptansicht auf, damit der */
/* Reiterkopf und vor allem der Scrollbalken des Inhalts buendig an den */
/* rechten Rand (an den Detailbereich) ruecken statt mitten im Datenbereich */
/* zu haengen. Die Hoehe entspricht damit der vollen Hauptansicht-Zelle */
/* (100vh minus Kopf 64 + Toolbar 48 + Statuszeile 32). */
.benutzer-seite {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 144px);
    margin: -32px;
}

/* Scrollbarer Bereich des aktiven Registers. */
/* Innenabstand hier statt an der Hauptansicht, damit der Scrollbalken */
/* ganz aussen sitzt. */
.benutzer-reiter-inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 32px 32px 32px;
}

/* Reiter am Kopf der Funktion "Benutzer". */
.benutzer-reiter {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 32px;
    border-bottom: 1px solid var(--farbe-linie);
}

.benutzer-reiter__reiter {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

/* Kopfbereich der Benutzerverwaltung: Titel/Untertitel links, */
/* Aktionen (Neuer Benutzer / Benutzer löschen) rechts. */
.benutzerverwaltung__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.benutzerverwaltung__titelbereich {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benutzerverwaltung__symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.benutzerverwaltung__titel {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.benutzerverwaltung__untertitel {
    margin: 2px 0 0 0;
    font-size: 13px;
}

.benutzerverwaltung__aktionen {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Einheitliche Kopf-Schaltflaechen (Neuer Benutzer / Benutzer löschen): */
/* gleicher Aufbau, gleiche Hoehe, Symbol + Text mittig - Unterschiede nur */
/* in der Farbgebung (siehe komponenten.css). */
/* .aktionsschaltflaeche ist der wiederverwendbare, ansichtsunabhaengige */
/* Name desselben Aufbaus, damit andere Ansichten (Anmeldungen, */
/* Sicherheit) dieselben Schaltflaechen nutzen koennen. */
.benutzerverwaltung__button,
.aktionsschaltflaeche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.benutzerverwaltung__button-symbol {
    flex-shrink: 0;
}

/* Umschalter (Alle / Aktiv / Deaktiviert) zwischen Suchfeld und Liste. */
.benutzer-liste__filter {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 8px;
}

.benutzer-liste__filter-schalter {
    flex: 1;
    padding: 6px 4px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

/* Hinweis, wenn der aktive Filter keine Benutzer enthaelt. */
.benutzer-liste__leer {
    margin: 0;
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
}

/* Anzahl der aktuell dargestellten Benutzer unter der Liste. */
.benutzer-liste__anzahl {
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid var(--farbe-linie);
}

/* Anmeldedaten als kompakte Beschreibungsliste in der Karte "Konto". */
.benutzer-konto__daten {
    margin: 14px 0 0 0;
    font-size: 13px;
}

.benutzer-konto__daten dt {
    font-weight: 600;
    margin-top: 8px;
}

.benutzer-konto__daten dd {
    margin: 2px 0 0 0;
}

/* Suchfeld ueber der Benutzerliste (clientseitiger Filter, siehe */
/* hauptoberflaeche.js). */
.benutzer-liste__suche {
    height: 40px;
    margin-bottom: 8px;
}

.benutzer-liste__eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.berechtigungen-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
}

.berechtigungen-navigation {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.berechtigungen-navigation__eintrag {
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.berechtigungen-inhalt {
    min-width: 0;
}

.berechtigungen-hinweis {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.berechtigungen-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.berechtigungen-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 8px;
    border-radius: 8px;
}

.berechtigungen-zeile form {
    margin-left: auto;
    flex-shrink: 0;
}

.berechtigungen-zeile[hidden] {
    display: none;
}

.anwendung-liste__eintrag {
    padding: 6px 8px;
}

/* Anwendungsliste rund 30% breiter als die uebrigen Listen (220px). */
.sicherheit__liste.anwendung-liste {
    width: 286px;
}

/* Verhindert, dass lange Namen oder Beschreibungen aus ihrer Spalte
   herauslaufen und den Statuspunkt am rechten Rand ueberdecken: lange
   Woerter brechen um statt ueberzustehen. */
.anwendung-liste__link .benutzer-liste__name {
    overflow-wrap: anywhere;
}

.anwendung-liste__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.anwendung-liste__sortierung {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.anwendung-liste__sortierknopf {
    width: 24px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

.bereich-liste__titel {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
}

/*
   Bereichsbild in der Einstellungsliste: quadratisch (nicht rund) und
   fast so hoch wie die Karte. Das schmale senkrechte Padding des
   Eintrags laesst das Bild bis knapp an die obere und untere Kante
   reichen. Die zusammengesetzten Selektoren gewinnen unabhaengig von
   der Reihenfolge gegen die runden Standard-Avatare.
*/
.bereich-liste__eintrag {
    padding-top: 2px;
    padding-bottom: 2px;
}

.benutzer-liste__avatar.bereich-liste__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.benutzer-liste__avatar-bild.bereich-liste__icon-bild {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.bereich-loeschen-formular {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Wichtig: ein explizites display (flex) ueberschreibt sonst das */
/* hidden-Attribut. Diese Regel stellt sicher, dass per Suche/Filter */
/* ausgeblendete Eintraege (siehe hauptoberflaeche.js) wirklich */
/* verschwinden und nicht nur in der Anzahl fehlen. */
.benutzer-liste__eintrag[hidden] {
    display: none;
}

.benutzer-liste__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.benutzer-liste__avatar-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 13px;
    font-weight: 600;
}

.anwendung-liste__logo-bild {
    border-radius: 8px;
}

.anwendung-formular__beschreibung {
    min-height: 96px;
}

/* Statuspunkt am rechten Rand der Listenzeile (gruen = aktiv, */
/* rot = deaktiviert), nicht mehr am Avatar. */
.benutzer-liste__status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 8px;
}

.benutzer-liste__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.benutzer-liste__zweitzeile {
    font-size: 12px;
}

.benutzer-profil__bild {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.benutzer-profil__bild--platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

.benutzer-profil__name {
    margin: 0 0 4px 0;
}

.benutzer-profil__trenner {
    margin: 0 8px;
    opacity: 0.5;
}

.benutzer-profil__aktionen {
    display: flex;
    gap: 10px;
}

.benutzer-profil__aktionen .schaltflaeche-sekundaer {
    width: auto;
}

.sicherheit__tabelle-rahmen {
    border-radius: 8px;
    overflow: hidden;
}

.sicherheit__tabelle {
    width: 100%;
    border-collapse: collapse;
}

.sicherheit__tabelle th,
.sicherheit__tabelle td {
    padding: 8px 10px;
    text-align: left;
}

/* Automatische Loeschung: bleibt beim Scrollen am unteren Rand der */
/* Hauptansicht sichtbar. */
.sicherheit-einstellung-zeile {
    position: sticky;
    bottom: 0;
    margin-top: 24px;
    padding: 14px 0 4px 0;
}

.sicherheit-einstellung-formular {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sicherheit-einstellung-formular__kontrollkaestchen {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Hoehere Spezifitaet als .eingabefeld (width: 100%), da komponenten.css */
/* nach layout.css geladen wird und sonst die 100%-Breite gewinnen wuerde. */
.eingabefeld.sicherheit-einstellung-formular__tage {
    width: 60px;
    height: 36px;
    text-align: center;
}

.sicherheit__aktionen {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.sicherheit__aktionen .schaltflaeche-sekundaer {
    width: auto;
}

.statusbereich {
    grid-area: status;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 12px;
}

/* Versionsliste je Softwareanwendung (Einstellungen ->
   Softwareanwendungen -> Bearbeiten). Reihen aus vorhandener und neuer
   Version teilen sich dasselbe Reihen-Layout. */
.version-liste__titelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.version-liste__zeilen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 12px;
}

.version-liste__zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--farbe-linie);
}

.version-liste__zeile--aktuell {
    background: var(--farbe-erfolg-hintergrund);
    border-radius: 6px;
    padding: 6px;
}

.version-liste__punkt {
    flex: 0 0 auto;
}

.version-liste__punkt--neu {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px dashed var(--farbe-linie-dunkel);
    display: inline-block;
}

.version-liste__nummer {
    flex: 1 1 140px;
    min-width: 120px;
}

.version-liste__nummer--aktuell {
    color: var(--farbe-erfolg);
    border-color: var(--farbe-erfolg);
    font-weight: 600;
}

.version-liste__datum {
    flex: 0 0 150px;
}

.version-liste__kontroll {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--farbe-text-haupt);
}

.version-liste__aktionen {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.version-liste__mini {
    display: inline-flex;
}

.version-liste__loeschen:hover {
    color: var(--farbe-fehler);
    border-color: var(--farbe-fehler);
    background: var(--farbe-fehler-hintergrund);
}

.version-liste__neu {
    background: var(--farbe-hauptblau-hintergrund);
    border-radius: 6px;
    padding: 8px 6px;
}

/* Zwei-Spalten-Layout der Element-Zuordnung einer Softwareanwendung:
   links die Element-Arten (aktuell nur "Versionen"), rechts die
   Eintraege zum gewaehlten Element. Aufbau analog zu den
   Bereichsansichten. */
.anwendung-elemente__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.anwendung-elemente__spalte {
    min-width: 0;
}

.anwendung-elemente__liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.anwendung-elemente__element {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--farbe-linie);
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-haupt);
    font-size: 14px;
    cursor: pointer;
}

.anwendung-elemente__element:hover {
    background: var(--farbe-hauptblau-hintergrund);
}

.anwendung-elemente__element--aktiv {
    background: var(--farbe-hauptblau-hintergrund);
    border-left-color: var(--farbe-hauptblau);
    font-weight: 600;
}

@media (max-width: 900px) {
    .anwendung-elemente__layout {
        grid-template-columns: 1fr;
    }
}