/*
 * Komponentendatei: komponenten.css
 *
 * Enthaelt die optische Gestaltung einzelner Elemente
 * (Buttons, Eingabefelder, Karten, Listeneintraege, Trennlinien).
 *
 * Positionierung/Anordnung steht in layout.css, Farbwerte werden
 * ausschliesslich ueber die Variablen aus mimanex-blau.css bezogen.
 */

/* ------------------------------------------------------------ */
/* Anmeldebereich                                                */
/* ------------------------------------------------------------ */

.anmeldebereich__titel {
    font-size: 60px;
    font-weight: 600;
    color: var(--farbe-titel-nexus);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.anmeldebereich__untertitel {
    margin: 12px 0 28px 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--farbe-titel-nexus);
    white-space: nowrap;
}

.einrichtung__abschnittstitel {
    align-self: flex-start;
    margin: 8px 0 -4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--farbe-text-hell);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Wiederverwendbare Fehlermeldung, sowohl auf der Anmelde-/Einrichtungsseite */
/* als auch in der Hauptansicht (z. B. beim Anlegen einer Anwendung).        */
.meldung-fehler {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--farbe-fehler);
    background-color: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 8px;
}

.eingabefeld {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--farbe-text-haupt);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eingabefeld::placeholder {
    color: var(--farbe-platzhalter);
}

.eingabefeld:focus {
    border-color: var(--farbe-hauptblau-hell);
    box-shadow: 0 0 0 3px rgba(0, 184, 230, 0.15);
}

.schaltflaeche-primaer {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.schaltflaeche-primaer:hover {
    filter: brightness(1.05);
}

.schaltflaeche-primaer:active {
    transform: translateY(1px);
    filter: brightness(0.95);
}

/* ------------------------------------------------------------ */
/* Kopfbereich                                                   */
/* ------------------------------------------------------------ */

.kopfbereich {
    background-color: var(--farbe-hintergrund);
    border-bottom: 1px solid var(--farbe-linie);
}

.kopfbereich__titel {
    font-size: 20px;
    font-weight: 600;
    color: var(--farbe-text-haupt);
}

.kopfbereich__benutzer,
.kopfbereich__link {
    font-size: 13px;
    color: var(--farbe-text-hell);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.kopfbereich__link:hover,
.kopfbereich__benutzer:hover {
    color: var(--farbe-hauptblau);
}

/* Hervorhebung, solange das eigene Profil geoeffnet ist. */
.kopfbereich__benutzer--aktiv {
    color: var(--farbe-hauptblau);
    font-weight: 600;
}

.kopfbereich__mitte-text {
    font-size: 26px;
    font-weight: 700;
    color: var(--farbe-hauptblau);
}

/* ------------------------------------------------------------ */
/* Toolbar                                                        */
/* ------------------------------------------------------------ */

.toolbar {
    background-color: var(--farbe-hintergrund-flaeche);
    border-bottom: 1px solid var(--farbe-linie);
}

.toolbar__schaltflaeche {
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--farbe-hauptblau);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie-dunkel);
    border-radius: 6px;
    cursor: pointer;
}

.toolbar__schaltflaeche:hover {
    border-color: var(--farbe-hauptblau-hell);
}

/* Aktiver Zustand, solange der Detailbereich eingeblendet ist. */
.toolbar__schaltflaeche--aktiv {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
    border-color: transparent;
}

/*
   Von einer Ansicht beigesteuerte Schaltflaeche. Als Verweis ausgefuehrt
   und daher zusaetzlich auf die Hoehe der uebrigen Schaltflaechen
   ausgerichtet.
*/
.toolbar__schaltflaeche--verweis {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/*
   Schiebt die Schaltflaeche an den rechten Rand der Toolbar, waehrend
   alle uebrigen von links aufgebaut bleiben.
*/
.toolbar__schaltflaeche--rechts {
    margin-left: auto;
}

/* Loeschen ist nicht rueckgaengig zu machen und daher abgesetzt. */
.toolbar__schaltflaeche--loeschen {
    color: #A32D2D;
    border-color: #F09595;
}

.toolbar__schaltflaeche--loeschen:hover {
    border-color: #A32D2D;
}

/*
   Von einer Ansicht beigesteuerte Formulare (z. B. Bearbeitungsstand)
   fuegen sich in die Reihe der Schaltflaechen ein.
*/
.toolbar__formular {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar__auswahl {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--farbe-text-haupt);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie-dunkel);
    border-radius: 6px;
}

/* ------------------------------------------------------------ */
/* Applikationsleiste                                             */
/* ------------------------------------------------------------ */

.applikationsleiste {
    background-color: var(--farbe-hintergrund-flaeche);
    border-right: 1px solid var(--farbe-linie);
}

.applikationsleiste__eintrag {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--farbe-text-hell);
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

.applikationsleiste__eintrag:hover {
    background-color: var(--farbe-linie);
}

/* Hervorhebung der aktiven Anwendung in der Applikationsleiste. */
.applikationsleiste__eintrag--aktiv {
    color: var(--farbe-hauptblau);
    background: var(--farbe-hauptblau-hintergrund);
    box-shadow: inset 3px 0 0 var(--farbe-hauptblau);
}

.anwendung-dialog__feldbeschriftung {
    font-size: 12px;
    font-weight: 600;
    color: var(--farbe-text-hell);
    margin-bottom: -6px;
}

.schaltflaeche-sekundaer {
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--farbe-text-haupt);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie-dunkel);
    cursor: pointer;
}

.schaltflaeche-sekundaer:hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* Beide Dialog-Schaltflaechen erhalten dieselbe Breite (statt der globalen */
/* 100%-Breite des Primaer-Buttons), damit sie sich die Zeile gleichmaessig teilen. */
.anwendung-dialog__aktionen .schaltflaeche-primaer,
.anwendung-dialog__aktionen .schaltflaeche-sekundaer {
    width: auto;
    flex: 1;
}

/* ------------------------------------------------------------ */
/* Funktionsleiste                                                */
/* ------------------------------------------------------------ */

.funktionsleiste,
.ansichtenleiste {
    background-color: var(--farbe-hintergrund);
    border-right: 1px solid var(--farbe-linie);
}

.funktionsleiste__eintrag,
.ansichtenleiste__eintrag {
    font-size: 13px;
    color: var(--farbe-text-haupt);
    border-left: 3px solid transparent;
    text-decoration: none;
}

/*
   Kein eigener Hintergrund: Die Icons sind PNG-Dateien mit
   Transparenz und sollen frei stehen, nicht in einem farbigen Kasten.
*/
.funktionsleiste__icon,
.ansichtenleiste__icon {
    font-size: 11px;
    font-weight: 700;
    color: var(--farbe-hauptblau);
    background-color: transparent;
}

.funktionsleiste__icon--leer,
.ansichtenleiste__icon--leer {
    background-color: transparent;
}

.funktionsleiste__eintrag:hover,
.ansichtenleiste__eintrag:hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* Hervorhebung des aktuell gewaehlten Funktionsleisten-Eintrags. */
.funktionsleiste__eintrag--aktiv,
.ansichtenleiste__eintrag--aktiv {
    color: var(--farbe-hauptblau);
    font-weight: 600;
    background-color: var(--farbe-hintergrund-flaeche);
    border-left-color: var(--farbe-hauptblau);
}

/*
   Anzahl der Beitraege in der Ansichtenleiste: zurueckhaltend, damit
   sie den Ansichtsnamen nicht ueberlagert.
*/
.ansichtenleiste__anzahl {
    font-size: 12px;
    color: var(--farbe-text-hell);
}

.ansichtenleiste__eintrag--aktiv .ansichtenleiste__anzahl {
    color: var(--farbe-hauptblau);
}

.ansichtenleiste__leer {
    color: var(--farbe-text-hell);
}

/* ------------------------------------------------------------ */
/* Mitteilungen: Liste in der Ansichtenleiste                     */
/* ------------------------------------------------------------ */

/*
   Suchfeld ueber der Liste. Bleibt beim Blaettern der Liste stehen,
   damit es bei vielen Eintraegen erreichbar bleibt.
*/
.mitteilung-liste__suchbereich {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0 12px 10px;
    background-color: var(--farbe-hintergrund);
}

.mitteilung-liste__suche {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

/*
   Tritt an die Stelle der Ansichtenliste, sobald eine
   Kommunikationsansicht angeklickt wurde. Juengster Beitrag oben.
*/
.mitteilung-liste__eintrag {
    display: block;
    padding: 8px 12px;
    color: var(--farbe-text-haupt);
    text-decoration: none;
    /*
        Die linke Kante des Eintrags traegt die Farbe des
        Bearbeitungsstands (siehe Modifikatoren weiter unten). Etwas
        breiter, damit die Farbe deutlich erkennbar ist.
    */
    border-left: 5px solid var(--farbe-linie);
    border-bottom: 1px solid var(--farbe-linie);
}

/*
   Notwendig, weil display: block oben die Standardregel fuer [hidden]
   ueberschreibt. Ohne diese Zeile bliebe der Suchfilter wirkungslos.
*/
.mitteilung-liste__eintrag[hidden] {
    display: none;
}

.mitteilung-liste__eintrag:hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/*
   Ausgewaehlter Eintrag: hervorgehoben ueber Hintergrund und blauen
   Betreff. Die linke Kante bleibt in der Statusfarbe, damit die Auswahl
   den Bearbeitungsstand nicht verdeckt.
*/
.mitteilung-liste__eintrag--aktiv {
    background-color: var(--farbe-hintergrund-flaeche);
}

.mitteilung-liste__eintrag--aktiv .mitteilung-liste__betreff {
    color: var(--farbe-hauptblau);
}

.mitteilung-liste__kopf {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mitteilung-liste__betreff {
    font-size: 13px;
    font-weight: 600;
    /* Erlaubt das Kuerzen mit Auslassungspunkten im Flex-Element. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mitteilung-liste__neu-hinweis {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--farbe-fehler);
}

.mitteilung-liste__zeile {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--farbe-text-hell);
}

/*
   Farben der drei Bearbeitungsstaende. An einer Stelle gepflegt, damit
   Balken in der Liste, Statuszeichen im Verlauf und Statusfilter stets
   dieselbe Farbe zeigen.
*/
:root {
    --status-farbe-offen: #D64545;
    --status-farbe-in-arbeit: #E0A200;
    --status-farbe-erledigt: #4FA015;
}

/* Die linke Kante des Listeneintrags in der Farbe des Bearbeitungsstands. */
.mitteilung-liste__eintrag--offen {
    border-left-color: var(--status-farbe-offen);
}

.mitteilung-liste__eintrag--in_arbeit {
    border-left-color: var(--status-farbe-in-arbeit);
}

.mitteilung-liste__eintrag--erledigt {
    border-left-color: var(--status-farbe-erledigt);
}

/*
   Kante der statuslosen Informationsansichten (Neuigkeiten, Hinweise):
   blau als reine Informationskennung.
*/
.mitteilung-liste__eintrag--info {
    border-left-color: var(--farbe-hauptblau);
}

/* ------------------------------------------------------------ */
/* Mitteilungen: Statusfilter unter dem Suchfeld                  */
/* ------------------------------------------------------------ */

/*
   Vier gleich breite Schaltflaechen, die sich wie eine Radioauswahl
   verhalten: immer genau ein Zustand aktiv, Vorgabe "Alle". Sie tragen
   keinen Text; der weisse Knopf steht fuer "Alle", die drei farbigen
   fuer die Bearbeitungsstaende. Filtert die Liste zusammen mit dem
   Suchfeld im Browser.
*/
.mitteilung-statusfilter {
    display: flex;
    /*
        Blocksatz: die Knoepfe werden gleichmaessig ueber die volle
        Breite verteilt, der erste am linken, der letzte am rechten Rand.
    */
    justify-content: space-between;
    margin-top: 8px;
}

.mitteilung-statusfilter__knopf {
    position: relative;
    display: flex;
    /* Feste, quadratische Groesse; wird nicht mitgestreckt. */
    flex: 0 0 34px;
    cursor: pointer;
}

/* Das eigentliche Auswahlfeld liegt unsichtbar ueber der Schaltflaeche. */
.mitteilung-statusfilter__knopf input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mitteilung-statusfilter__flaeche {
    display: block;
    width: 100%;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
}

/* "Alle": weisse Flaeche mit sichtbarem Rahmen. */
.mitteilung-statusfilter__flaeche--alle {
    background-color: var(--farbe-hintergrund);
    border-color: var(--farbe-linie-dunkel);
}

.mitteilung-statusfilter__flaeche--offen {
    background-color: var(--status-farbe-offen);
}

.mitteilung-statusfilter__flaeche--in_arbeit {
    background-color: var(--status-farbe-in-arbeit);
}

.mitteilung-statusfilter__flaeche--erledigt {
    background-color: var(--status-farbe-erledigt);
}

/* Ausgewaehlter Zustand: kraeftiger Rahmen mit hellem Innenrand. */
.mitteilung-statusfilter__knopf input:checked + .mitteilung-statusfilter__flaeche {
    border-color: var(--farbe-text-haupt);
    box-shadow: inset 0 0 0 2px var(--farbe-hintergrund);
}

/* Sichtbarer Fokusrahmen fuer die Tastaturbedienung. */
.mitteilung-statusfilter__knopf input:focus-visible + .mitteilung-statusfilter__flaeche {
    outline: 2px solid var(--farbe-hauptblau-hell);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ */
/* Mitteilungen: Verlauf im Hauptbereich                          */
/* ------------------------------------------------------------ */

/*
   Aufbau wie ein Forenbeitrag: oben die Mitteilung, darunter die
   Antworten in zeitlicher Reihenfolge, unten das Antwortfeld.
*/
.mitteilung {
    max-width: 820px;
}

.mitteilung__kopf {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--farbe-linie);
}

.mitteilung__merkmale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/*
   Statuschip im Verlauf. Vollflaechig in der Farbe des
   Bearbeitungsstands eingefaerbt, damit er dieselbe Aussage hat wie die
   Kante in der Liste und der Statusfilter.
*/
.mitteilung__status {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    background-color: var(--farbe-hintergrund-flaeche);
    color: var(--farbe-text-haupt);
}

.mitteilung__status--offen {
    background-color: var(--status-farbe-offen);
    color: #ffffff;
}

.mitteilung__status--in_arbeit {
    background-color: var(--status-farbe-in-arbeit);
    color: #ffffff;
}

.mitteilung__status--erledigt {
    background-color: var(--status-farbe-erledigt);
    color: #ffffff;
}

.mitteilung__version {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
}

.mitteilung__version--aktuell {
    color: var(--farbe-erfolg);
    background-color: var(--farbe-erfolg-hintergrund);
    border-color: var(--farbe-erfolg);
}

.mitteilung__version--veraltet {
    color: var(--farbe-fehler);
    background-color: var(--farbe-fehler-hintergrund);
    border-color: var(--farbe-fehler);
}

.mitteilung__version--klein {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
}

.mitteilung__betreff {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--farbe-text-haupt);
}

/*
   Jeder Beitrag und jede Antwort steht in einer eigenen Karte mit
   hellblauem Hintergrund und dezentem Schatten (leichter 3D-Effekt).
   Antworten sind eingerueckt und etwas heller, damit sie sich vom
   Erstbeitrag klar unterscheiden.
*/
.mitteilung__beitrag {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    background-color: var(--farbe-hauptblau-hintergrund);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.06);
}

.mitteilung__beitrag--antwort {
    margin-left: 40px;
    background-color: var(--farbe-hintergrund-flaeche);
}

/*
   Schaltflaechen am eigenen Beitrag. Stehen rechts und treten erst
   beim Ueberfahren des Beitrags deutlich hervor, damit der Verlauf
   ruhig bleibt.
*/
.mitteilung__beitragaktionen {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: auto;
    padding-left: 12px;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.mitteilung__beitrag:hover .mitteilung__beitragaktionen,
.mitteilung__beitragaktionen:focus-within {
    opacity: 1;
}

/* Symbolschaltflaechen ohne Rahmen und Flaeche. */
.mitteilung__beitragknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--farbe-hauptblau);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.mitteilung__beitragknopf:hover {
    background-color: var(--farbe-hauptblau-hintergrund);
}

.mitteilung__beitragknopf--loeschen {
    color: #A32D2D;
}

.mitteilung__beitragknopf--loeschen:hover {
    background-color: #FCEBEB;
}

/* Eingabefeld einer Antwort, die im Verlauf korrigiert wird. */
.mitteilung__beitragformular {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ------------------------------------------------------------ */
/* Mitteilungen: Einfuehrungstext der Ansicht                     */
/* ------------------------------------------------------------ */

/*
   Steht im Hauptbereich, solange keine Mitteilung gewaehlt ist, und
   erklaert den Zweck der Ansicht.
*/
/*
   Breit genug, damit die Saetze der Einfuehrung nicht umbrechen. Jeder
   Satz steht auf einer eigenen Zeile; ein zusaetzlicher Umbruch mitten
   im Satz wuerde diese Gliederung zerreissen.
*/
.mitteilung-einfuehrung {
    max-width: 1100px;
}

.mitteilung-einfuehrung__absatz {
    margin: 12px 0 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--farbe-text-haupt);
}

/*
   Jeder Abschnitt beginnt mit deutlichem Abstand zum vorigen, damit
   die Themen sichtbar voneinander getrennt bleiben.
*/
.mitteilung-einfuehrung__titel {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--farbe-hauptblau);
}

.mitteilung-einfuehrung__liste {
    margin: 0 0 28px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--farbe-text-haupt);
}

/* Jeder Punkt steht fuer sich, mit Luft zum naechsten. */
.mitteilung-einfuehrung__liste li {
    margin-bottom: 8px;
}

.mitteilung-einfuehrung__liste li:last-child {
    margin-bottom: 0;
}

.mitteilung-einfuehrung__hinweis {
    margin: 0;
    padding-top: 16px;
    font-size: 13px;
    color: var(--farbe-text-hell);
    border-top: 1px solid var(--farbe-linie);
}

/*
   Rundes Verfasserbild. Zeigt das hinterlegte Profilbild; ist keines
   vorhanden, erscheint der Anfangsbuchstabe. Etwa auf Hoehe des
   Beitrags, damit das Bild gut erkennbar ist.
*/
.mitteilung__zeichen {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 18px;
    font-weight: 600;
    color: var(--farbe-hauptblau);
    /* Weiss, damit der Kreis auf der hellblauen Karte klar absteht. */
    background-color: var(--farbe-hintergrund);
    border-radius: 50%;
    overflow: hidden;
}

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

.mitteilung__inhalt {
    flex: 1;
    min-width: 0;
}

.mitteilung__urheber {
    margin: 0 0 3px;
    font-size: 12px;
    color: var(--farbe-text-hell);
}

.mitteilung__hinweis {
    margin-left: 6px;
    font-style: italic;
}

.mitteilung__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--farbe-text-haupt);
}

.mitteilung__antwortfeld,
.mitteilung__formular {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--farbe-linie);
}

.mitteilung__formular {
    border-top: none;
}

.mitteilung__beschriftung {
    font-size: 12px;
    color: var(--farbe-text-hell);
}

/* Verwalter-Felder zum Nachtragen (Verfasser, Zeitpunkt) im Antwortfeld. */
.mitteilung__nachtragen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
   Hebt die feste Hoehe von .eingabefeld auf, damit das Attribut rows
   greift: Beschreibung mehrzeilig, Antwortfeld kuerzer.
*/
.mitteilung__eingabe {
    height: auto;
    padding: 12px 16px;
    line-height: 1.5;
    resize: vertical;
}

.mitteilung__aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ------------------------------------------------------------ */
/* Hauptansicht                                                   */
/* ------------------------------------------------------------ */

.hauptansicht {
    background-color: var(--farbe-hintergrund);
}

.hauptansicht__titel {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--farbe-text-haupt);
}

.hauptansicht__text {
    margin: 0;
    font-size: 14px;
    color: var(--farbe-text-hell);
}

/*
   Beschreibung des Bereichs, in den Einstellungen gepflegt. Der Text
   darf einfache Auszeichnungen enthalten; die folgenden Regeln geben
   diesen ein einheitliches Aussehen.
*/
.hauptansicht__beschreibung {
    max-width: 1100px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--farbe-text-haupt);
}

.hauptansicht__beschreibung p {
    margin: 0 0 14px;
}

.hauptansicht__beschreibung h2,
.hauptansicht__beschreibung h3 {
    margin: 22px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--farbe-hauptblau);
}

.hauptansicht__beschreibung ul,
.hauptansicht__beschreibung ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.hauptansicht__beschreibung li {
    margin-bottom: 8px;
}

.hauptansicht__beschreibung hr {
    margin: 18px 0;
    border: none;
    border-top: 1px solid var(--farbe-linie);
}

/* ------------------------------------------------------------ */
/* Detailbereich                                                  */
/* ------------------------------------------------------------ */

.detailbereich {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* Der verschiebbare Trenner uebernimmt die optische Trennlinie zwischen */
/* Hauptansicht und Detailbereich (ersetzt den frueheren border-left des */
/* Detailbereichs) und signalisiert per Farbwechsel beim Ueberfahren, */
/* dass er greifbar ist. */
.detail-trenner,
.fkl-trenner {
    background-color: var(--farbe-linie);
}

.detail-trenner:hover,
.fkl-trenner:hover {
    background-color: var(--farbe-hauptblau-hell);
}

.detailbereich__titel {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--farbe-text-haupt);
}

.detailbereich__text {
    margin: 0;
    font-size: 13px;
    color: var(--farbe-text-hell);
}

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

.sicherheit__liste {
    background-color: var(--farbe-hintergrund-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: 8px;
}

.sicherheit__eintrag {
    font-size: 13px;
    color: var(--farbe-text-haupt);
}

/* Hover-Rueckmeldung nur fuer NICHT ausgewaehlte Eintraege. Ohne das */
/* :not() haette der Hover (hoehere Spezifitaet) die blaue Auswahl */
/* ueberlagert, sodass der gerade angeklickte Eintrag unter dem */
/* Mauszeiger grau statt blau erschien. */
.sicherheit__eintrag:not(.sicherheit__eintrag--aktiv):hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* Ausgewaehlter Listeneintrag (systemweit einheitlich, sowohl in der */
/* Benutzerliste als auch in der Benutzerauswahl der Anmeldungen): statt */
/* kraeftigem Blauverlauf mit weisser, schlecht lesbarer Schrift eine */
/* helle blaue Flaeche mit dunklem Text und einem schmalen blauen */
/* Streifen am linken Rand. Der Streifen wird als inset-Schatten */
/* gezeichnet, damit er die Textausrichtung nicht verschiebt. */
.sicherheit__eintrag--aktiv {
    color: var(--farbe-text-haupt);
    background: var(--farbe-hauptblau-hintergrund);
    box-shadow: inset 3px 0 0 var(--farbe-hauptblau);
}

.sicherheit__eintrag-hinweis {
    color: var(--farbe-fehler);
}

/* Hinweis "deaktiviert" bleibt auch im ausgewaehlten Eintrag rot, da */
/* der Hintergrund nun hell ist. */
.sicherheit__eintrag--aktiv .sicherheit__eintrag-hinweis {
    color: var(--farbe-fehler);
    opacity: 1;
}

.sicherheit__tabelle-rahmen {
    border: 1px solid var(--farbe-linie);
    background-color: var(--farbe-hintergrund);
}

.sicherheit__tabelle {
    font-size: 13px;
    color: var(--farbe-text-haupt);
}

.sicherheit__tabelle th {
    font-size: 12px;
    font-weight: 600;
    color: var(--farbe-text-hell);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background-color: var(--farbe-hintergrund-flaeche);
    border-bottom: 1px solid var(--farbe-linie);
}

.sicherheit__tabelle td {
    border-bottom: 1px solid var(--farbe-linie);
}

.sicherheit__tabelle-leer {
    color: var(--farbe-text-hell);
    text-align: center;
}

.sicherheit__tabelle tbody tr:last-child td {
    border-bottom: none;
}

.sicherheit-einstellung-zeile {
    background-color: var(--farbe-hintergrund);
    border-top: 1px solid var(--farbe-linie);
}

.sicherheit-einstellung-formular {
    font-size: 13px;
    color: var(--farbe-text-haupt);
}

.sicherheit__status--erfolgreich {
    color: var(--farbe-erfolg);
    font-weight: 600;
}

.sicherheit__status--fehlgeschlagen {
    color: var(--farbe-fehler);
    font-weight: 600;
}

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

.benutzer-profil__bild {
    background-color: var(--farbe-hintergrund-flaeche);
    border: 1px solid var(--farbe-linie);
}

.benutzer-profil__bild--platzhalter {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
    border-color: transparent;
}

.benutzer-formular__foto {
    background-color: var(--farbe-hintergrund-flaeche);
}

.benutzer-formular__foto--platzhalter {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
}

/* Klickbares Foto + eingeblendeter "Ändern"-Hinweis. */
.benutzer-formular__foto-label {
    border: 1px solid var(--farbe-linie);
}

.benutzer-formular__foto-overlay {
    color: var(--farbe-text-auf-blau);
    background-color: rgba(0, 45, 112, 0.72);
}

.benutzer-profil__name {
    color: var(--farbe-text-haupt);
}

/* Rote Ausfuehrung der Sekundaer-Schaltflaeche fuer riskante Aktionen */
/* (z. B. "Löschen"), sonst identischer Aufbau wie .schaltflaeche-sekundaer. */
.schaltflaeche-gefahr {
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    width: auto;
    color: var(--farbe-fehler);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-fehler);
}

.schaltflaeche-gefahr:hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* Kartenfoermige Abschnitte der Benutzer-Maske */
.benutzer-karte {
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
}

.benutzer-karte__titel {
    font-size: 15px;
    font-weight: 700;
    color: var(--farbe-hauptblau);
}

.benutzer-formular__zaehler {
    color: var(--farbe-text-hell);
}

.benutzer-formular__anmeldedaten {
    color: var(--farbe-text-hell);
}

.benutzer-formular__bild-hinweis {
    font-size: 12px;
    color: var(--farbe-text-hell);
}

/* Avatar-Platzhalter in der Benutzerliste, kleinere Ausfuehrung des */
/* Platzhalters aus der Profilanzeige. */
.benutzer-liste__avatar-bild--platzhalter {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
}

.anwendung-liste__logo-bild {
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
}

.bereich-liste__titel {
    color: var(--farbe-text-haupt);
}

/* Ohne Hintergrund und Rahmen: das transparente PNG steht frei. */
.bereich-liste__icon-bild {
    background-color: transparent;
    border: none;
}

.anwendung-liste__sortierknopf {
    color: var(--farbe-hauptblau);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
}

.anwendung-liste__sortierknopf:hover:not(:disabled) {
    background-color: var(--farbe-hauptblau-hintergrund);
    border-color: var(--farbe-hauptblau);
}

.anwendung-liste__sortierknopf:disabled {
    color: var(--farbe-text-hell);
    opacity: 0.45;
    cursor: default;
}

/* Statuspunkt der Listenzeile: gruen = aktiv, rot = deaktiviert. */
.benutzer-liste__status {
    background-color: var(--farbe-text-hell);
}

.benutzer-liste__status--aktiv {
    background-color: var(--farbe-erfolg);
}

.benutzer-liste__status--deaktiviert {
    background-color: var(--farbe-fehler);
}

.benutzer-liste__anzeigename {
    color: var(--farbe-text-haupt);
    font-weight: 600;
}

.benutzer-liste__zweitzeile {
    color: var(--farbe-text-hell);
}

.benutzer-liste__anzahl {
    color: var(--farbe-text-hell);
}

.benutzer-liste__leer {
    color: var(--farbe-text-hell);
}

.berechtigungen-navigation__eintrag {
    color: var(--farbe-text-hell);
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
}

.berechtigungen-navigation__eintrag:hover {
    color: var(--farbe-text-haupt);
    background-color: var(--farbe-hauptblau-hintergrund);
}

.berechtigungen-navigation__eintrag--aktiv {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
    border-color: transparent;
}

.berechtigungen-hinweis {
    color: var(--farbe-hauptblau);
    background-color: var(--farbe-hauptblau-hintergrund);
    border: 1px solid var(--farbe-hauptblau);
}

.berechtigungen-zeile {
    background-color: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
}

.berechtigungen-zeile:hover {
    background-color: var(--farbe-hintergrund-flaeche);
}

/* ------------------------------------------------------------ */
/* Benutzerverwaltung: Reiter, Kopf, Filter, Berechtigungen       */
/* ------------------------------------------------------------ */

.benutzer-reiter__reiter {
    color: var(--farbe-text-hell);
}

.benutzer-reiter__reiter:hover {
    color: var(--farbe-text-haupt);
}

.benutzer-reiter__reiter--aktiv {
    color: var(--farbe-hauptblau);
    border-bottom-color: var(--farbe-hauptblau);
}

.benutzerverwaltung__symbol {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
}

/* Kopf-Schaltflaeche "Neuer Benutzer": sanft blaue Fuellung, blauer */
/* Rand/Text. */
.benutzerverwaltung__button--neu,
.aktionsschaltflaeche--blau {
    color: var(--farbe-hauptblau);
    background-color: var(--farbe-hauptblau-hintergrund);
    border-color: var(--farbe-hauptblau);
}

.benutzerverwaltung__button--neu:hover,
.aktionsschaltflaeche--blau:hover {
    filter: brightness(0.98);
}

/* Kopf-Schaltflaeche "Benutzer löschen": leicht rote Fuellung, roter */
/* Rand/Text - gleiche Form wie "Neuer Benutzer", nur andere Farbe. */
.benutzerverwaltung__button--loeschen,
.aktionsschaltflaeche--rot {
    color: var(--farbe-fehler);
    background-color: var(--farbe-fehler-hintergrund);
    border-color: var(--farbe-fehler);
}

.benutzerverwaltung__button--loeschen:hover,
.aktionsschaltflaeche--rot:hover {
    filter: brightness(0.98);
}

.benutzerverwaltung__button:disabled {
    color: var(--farbe-text-hell);
    background-color: var(--farbe-hintergrund-flaeche);
    border-color: var(--farbe-linie);
    cursor: default;
    opacity: 0.65;
}

.benutzerverwaltung__button--loeschen:disabled {
    color: var(--farbe-fehler);
    background-color: var(--farbe-fehler-hintergrund);
    border-color: var(--farbe-fehler);
    opacity: 0.55;
}

.benutzerverwaltung__titel {
    color: var(--farbe-text-haupt);
}

.benutzerverwaltung__untertitel {
    color: var(--farbe-text-hell);
}

/* Umschalter zwischen Suchfeld und Liste. */
.benutzer-liste__filter {
    background-color: var(--farbe-hintergrund-flaeche);
    border: 1px solid var(--farbe-linie);
}

.benutzer-liste__filter-schalter {
    color: var(--farbe-text-hell);
}

.benutzer-liste__filter-schalter:hover {
    color: var(--farbe-text-haupt);
}

.benutzer-liste__filter-schalter--aktiv {
    color: var(--farbe-text-auf-blau);
    background: var(--verlauf-blau);
}

.benutzer-konto__daten dt {
    color: var(--farbe-text-hell);
}

.benutzer-konto__daten dd {
    color: var(--farbe-text-haupt);
}

/* ------------------------------------------------------------ */
/* Systemweite Standarddarstellung: plastischere Bereiche          */
/* Reine Gestaltung. Ein dezenter, einheitlicher Schatten hebt     */
/* Listen, Karten und Tabellen leicht vom Hintergrund ab (3D-      */
/* Wirkung) - konsistent in allen Ansichten (Benutzer, Anmeldungen,*/
/* Sicherheit).                                                    */
/* ------------------------------------------------------------ */

/* Auswahllisten (Benutzerliste sowie Benutzerauswahl der */
/* Anmeldungen teilen sich .sicherheit__liste). */
.sicherheit__liste {
    box-shadow: 0 1px 3px rgba(0, 58, 142, 0.06);
}

/* Suchfeld ueber der Benutzerliste in denselben plastischen Stil */
/* einbinden. */
.benutzer-liste__suche {
    box-shadow: 0 1px 2px rgba(0, 58, 142, 0.05);
}

/* Kartenabschnitte der Benutzer-Maske. */
.benutzer-karte {
    box-shadow: 0 1px 2px rgba(0, 58, 142, 0.05),
                0 4px 12px rgba(0, 58, 142, 0.06);
}

/* Tabellenrahmen der Ansichten Anmeldungen und Sicherheit erhalten */
/* denselben Schatten wie die Karten, damit auch diese Ansichten */
/* plastisch wirken. */
.sicherheit__tabelle-rahmen {
    box-shadow: 0 1px 2px rgba(0, 58, 142, 0.05),
                0 4px 12px rgba(0, 58, 142, 0.06);
}

/* ------------------------------------------------------------ */
/* Statusbereich                                                  */
/* ------------------------------------------------------------ */

.statusbereich {
    background-color: var(--farbe-hauptblau-dunkel);
    color: var(--farbe-text-auf-blau);
}

.statusbereich__trenner {
    margin: 0 8px;
    opacity: 0.5;
}