/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   KONTO-MENÜ — die Optik. Ein Menütitel „Account" oben rechts und das
   schwebende Menü darunter: wer angemeldet ist, Sprache, Ansicht, Abmelden.
   Den Inhalt baut account-menu.js; das Werkzeug liefert zwei Zeilen Markup
   und einen Aufruf (siehe dort). Schließt bei Außenklick, Escape und Scrollen. */

.user-acc {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-8);
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--text-gedaempft);
    font-size: var(--schrift-xs);
    border-radius: var(--rundung-mittel);
}

.user-acc:hover { color: var(--text); background: var(--flaeche-schwebend); }

/* Ebene 150: über Schubladen und Inhalt, unter dem Anmeldefenster (300). */
.user-menu {
    position: fixed;
    z-index: 150;
    min-width: 220px;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
    padding: var(--abstand-6);
}

/* Der Kopf: Name, darunter der Titel der Person — kein Kreis mit Initialen,
   der nur wiederholte, was daneben steht. */
.user-menu-kopf {
    padding: var(--abstand-6) var(--abstand-12) var(--abstand-8);
    line-height: 1.35;
}
.user-menu-name { font-size: var(--schrift-sm); color: var(--text); }
/* Gemischtschreibung: Ein Titel ist ein Name, keine Kategorie. */
.user-menu-rolle { font-size: var(--schrift-kompakt); color: var(--text-gedaempft); }
.user-menu-trenner { height: 1px; background: var(--linie); margin: var(--abstand-6) 0; }

/* Eine Zwischenüberschrift im Menü. Das Kit selbst setzt keine — die
   Trennlinie sagt dasselbe, und sie sagt es leiser. Wer eine braucht, hat sie. */
.user-menu-label {
    padding: 2px var(--abstand-12);
    font-size: var(--schrift-2xs);
    color: var(--text-leise);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
}

/* 30 px je Eintrag: Enger sitzt es wie im System und ist mit der Maus genau
   richtig — mit dem Finger am Tablet aber zu knapp. Gewachsen ist nur die
   Höhe; waagerecht bleiben 12 px, damit die Einträge mit dem Kopf auf einer
   Kante stehen. Der 6-px-Rahmen des Menüs hält den Hover vom Rand fern. */
.user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    background: none;
    border: none;
    border-radius: var(--rundung-klein);
    padding: var(--abstand-6) var(--abstand-12);
    color: var(--text);
    font-size: var(--schrift-sm);
    line-height: 18px;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover { background: var(--flaeche-schwebend); color: var(--text); }

/* Der Zustand rechts im Eintrag („Dunkel" / „Hell"), leise: Er sagt, was
   GERADE gilt, nicht was beim Klick passiert. */
.user-menu-item .user-menu-wert {
    margin-left: auto;
    color: var(--text-gedaempft);
    font-size: var(--schrift-kompakt);
}

/* Keine sichtbare Markierung des aktuellen Eintrags: Man klickt auf die
   Sprache, und es geht dorthin. Der Haken bleibt im Markup und trägt
   aria-current für Screenreader — gezeigt wird er nicht. */
.user-menu-check { display: none; }