/* ============================================================================
   GRAVID – Funktionsleiste oben rechts (seit 2026-10-17, Nutzerwunsch)
   ----------------------------------------------------------------------------
   Die Symbol-Knöpfe der Kopfzeile (Konto, Sprache, Hell/Dunkel, Anlass-Theme; im Portal Abmelden/Startseite;
   im Admin Website/Konto/Abmelden/Menü) stehen nicht mehr einzeln mit eigenem Ring nebeneinander, sondern
   gemeinsam auf EINER schmalen Fläche - dieselbe Sprache wie die Werkzeug-Ecke der Dashboard-Kacheln im
   Anpassen-Modus: feine Haarlinie, ganz leicht getönte Fläche, Knöpfe ohne eigenen Rahmen, Füllung erst beim
   Überfahren. Textknöpfe (z. B. "Alle Werkzeuge", "Mein Konto") und das Menü bleiben, wie sie sind.

   Zwei Fassungen:
     .funktionsleiste--fest   immer als Leiste (Werkzeug-/App-Seiten, Admin)
     .funktionsleiste--menue  nur ab 1041px; darunter wandern die Knöpfe wie bisher als Zeilen ins Mobilmenü
                              (display: contents - die Leiste verschwindet, ihre Knöpfe bleiben)
   Diese Datei wird auf jeder Seite ZULETZT geladen: Sie übersteuert die alten Einzelpositionen
   (right: 30/78/126/174px aus bedienelemente.css, portal.css, index.css) bei gleicher Spezifität.
   ============================================================================ */
:root {
    --fl-grund: color-mix(in srgb, var(--ink) 4%, var(--paper-raised));
    --fl-kante: color-mix(in srgb, var(--ink) 12%, transparent);
    --fl-hover: color-mix(in srgb, var(--ink) 8%, transparent);
    /* Abstand der Leiste zum rechten Fensterrand: 30px wie bisher die Einzelknöpfe; auf schmalen Telefonen 20px wie
       der linke Rand des Logos - sonst wird es mit vier Knöpfen neben Logo und Zurück-Knopf zu eng. */
    --fl-rand: 30px;
    --fl-korr: 0px;   /* Feinkorrektur der Reservierung (gemessen), siehe unten */
    /* Höhe der Leiste = Höhe der Textknöpfe daneben ("Alle Werkzeuge", Menüpunkte): 38px, ab 940px 34px
       (tools/tools.css .tool-back). Knopf + 2 × Polster + 2 × 1px Haarlinie. Nachgemessen am 17.10.2026 -
       vorher war die Leiste 40px hoch und stand neben den Knöpfen sichtbar über (Nutzerbefund). */
    --fl-knopf: 30px;
    --fl-polster: 3px;
}
@media (max-width: 940px) { :root { --fl-knopf: 28px; --fl-polster: 2px; } }
@media (max-width: 480px) { :root { --fl-rand: 20px; --fl-korr: -7px; } }

/* ---- Immer als Leiste ---- */
.funktionsleiste--fest {
    position: absolute;
    top: 50%;
    right: var(--fl-rand);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--fl-polster);
    border: 1px solid var(--fl-kante);
    border-radius: var(--squircle-nav);   /* dieselbe Rundung wie Menüpunkte und Textknöpfe (css/tokens.css) */
    background: var(--fl-grund);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.funktionsleiste--fest > .theme-toggle, .funktionsleiste--fest > .lang-toggle, .funktionsleiste--fest > .user-toggle, .funktionsleiste--fest > .anlass-toggle, .funktionsleiste--fest > .nav-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: var(--fl-knopf);
    height: var(--fl-knopf);
    margin: 0;
    flex: none;
    isolation: isolate;      /* Ring und Füllung bleiben ÜBER der Leistenfläche (sie liegen auf z-index -1/-2) */
    animation: none;
}
/* Kein Einzelring mehr - die Leiste ist der Rahmen. Füllung erst beim Überfahren. */
.funktionsleiste--fest > .theme-toggle::before, .funktionsleiste--fest > .lang-toggle::before, .funktionsleiste--fest > .user-toggle::before, .funktionsleiste--fest > .anlass-toggle::before, .funktionsleiste--fest > .nav-toggle::before, .funktionsleiste--fest > .theme-toggle:hover::before, .funktionsleiste--fest > .lang-toggle:hover::before, .funktionsleiste--fest > .user-toggle:hover::before, .funktionsleiste--fest > .anlass-toggle:hover::before, .funktionsleiste--fest > .nav-toggle:hover::before { background: transparent; box-shadow: none; }
.funktionsleiste--fest > .theme-toggle::after, .funktionsleiste--fest > .lang-toggle::after, .funktionsleiste--fest > .user-toggle::after, .funktionsleiste--fest > .anlass-toggle::after, .funktionsleiste--fest > .nav-toggle::after { inset: 0; border-radius: max(0px, calc(var(--squircle-nav) - var(--fl-polster))); background: transparent; transition: background .15s ease; }
.funktionsleiste--fest > .theme-toggle:active, .funktionsleiste--fest > .lang-toggle:active, .funktionsleiste--fest > .user-toggle:active, .funktionsleiste--fest > .anlass-toggle:active { transform: scale(0.94); }
.funktionsleiste--fest > .theme-toggle:focus-visible, .funktionsleiste--fest > .lang-toggle:focus-visible, .funktionsleiste--fest > .user-toggle:focus-visible, .funktionsleiste--fest > .anlass-toggle:focus-visible, .funktionsleiste--fest > .nav-toggle:focus-visible { outline-offset: 1px; }
/* Angemeldet: der grüne Hinweis bleibt als zarte Füllung erkennbar */
.funktionsleiste--fest > .user-toggle--online::after { background: color-mix(in srgb, var(--success) 16%, transparent); }
/* Anlass-Theme: Symbol in Akzentfarbe genügt; offen = zarte Akzentfüllung */
.funktionsleiste--fest > .anlass-toggle[aria-expanded="true"]::after { background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (hover: hover) {
    .funktionsleiste--fest > .lang-toggle:hover::after, .funktionsleiste--fest > .user-toggle:hover::after, .funktionsleiste--fest > .anlass-toggle:hover::after { background: var(--fl-hover); }
}

/* Admin: Leiste im Fluss der Kopfzeile statt absolut am Rand */
.funktionsleiste--im-fluss { position: relative; top: auto; right: auto; transform: none; }

/* ---- Startseite und Portal: Leiste nur, solange die Knöpfe in der Kopfzeile stehen ---- */
@media (min-width: 1041px) {
    .funktionsleiste--menue {
        position: absolute;
        top: 50%;
        right: var(--fl-rand);
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: var(--fl-polster);
        border: 1px solid var(--fl-kante);
        border-radius: var(--squircle-nav);   /* dieselbe Rundung wie Menüpunkte und Textknöpfe (css/tokens.css) */
        background: var(--fl-grund);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .funktionsleiste--menue > .theme-toggle, .funktionsleiste--menue > .lang-toggle, .funktionsleiste--menue > .user-toggle, .funktionsleiste--menue > .anlass-toggle, .funktionsleiste--menue > .nav-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: var(--fl-knopf);
        height: var(--fl-knopf);
        margin: 0;
        flex: none;
        isolation: isolate;      /* Ring und Füllung bleiben ÜBER der Leistenfläche (sie liegen auf z-index -1/-2) */
        animation: none;
    }
    /* Kein Einzelring mehr - die Leiste ist der Rahmen. Füllung erst beim Überfahren. */
    .funktionsleiste--menue > .theme-toggle::before, .funktionsleiste--menue > .lang-toggle::before, .funktionsleiste--menue > .user-toggle::before, .funktionsleiste--menue > .anlass-toggle::before, .funktionsleiste--menue > .nav-toggle::before, .funktionsleiste--menue > .theme-toggle:hover::before, .funktionsleiste--menue > .lang-toggle:hover::before, .funktionsleiste--menue > .user-toggle:hover::before, .funktionsleiste--menue > .anlass-toggle:hover::before, .funktionsleiste--menue > .nav-toggle:hover::before { background: transparent; box-shadow: none; }
    .funktionsleiste--menue > .theme-toggle::after, .funktionsleiste--menue > .lang-toggle::after, .funktionsleiste--menue > .user-toggle::after, .funktionsleiste--menue > .anlass-toggle::after, .funktionsleiste--menue > .nav-toggle::after { inset: 0; border-radius: max(0px, calc(var(--squircle-nav) - var(--fl-polster))); background: transparent; transition: background .15s ease; }
    .funktionsleiste--menue > .theme-toggle:active, .funktionsleiste--menue > .lang-toggle:active, .funktionsleiste--menue > .user-toggle:active, .funktionsleiste--menue > .anlass-toggle:active { transform: scale(0.94); }
    .funktionsleiste--menue > .theme-toggle:focus-visible, .funktionsleiste--menue > .lang-toggle:focus-visible, .funktionsleiste--menue > .user-toggle:focus-visible, .funktionsleiste--menue > .anlass-toggle:focus-visible, .funktionsleiste--menue > .nav-toggle:focus-visible { outline-offset: 1px; }
    /* Angemeldet: der grüne Hinweis bleibt als zarte Füllung erkennbar */
    .funktionsleiste--menue > .user-toggle--online::after { background: color-mix(in srgb, var(--success) 16%, transparent); }
    /* Anlass-Theme: Symbol in Akzentfarbe genügt; offen = zarte Akzentfüllung */
    .funktionsleiste--menue > .anlass-toggle[aria-expanded="true"]::after { background: color-mix(in srgb, var(--accent) 14%, transparent); }
    @media (hover: hover) {
        .funktionsleiste--menue > .lang-toggle:hover::after, .funktionsleiste--menue > .user-toggle:hover::after, .funktionsleiste--menue > .anlass-toggle:hover::after { background: var(--fl-hover); }
    }

}
@media (max-width: 1040px) {
    .funktionsleiste--menue { display: contents; }
    /* Im Mobilmenü startete die Einblend-Animation des Anlass-Knopfes bei jedem Öffnen neu (Zeile kurz bei 80 %) */
    .nav-links .anlass-toggle { animation: none; }
}

/* ---- Platz für die Leiste: so breit wie sie, plus gut 12px Luft zum letzten Textknopf ----
   Vorher reservierten .nav-right/.tool-header-right Platz für einzeln stehende 38px-Knöpfe mit 10px Abstand
   (136px bzw. 184px mit Anlass) - für die schmalere Leiste blieb ein Loch von rund 60px. Jetzt aus der Zahl der
   Knöpfe und dem Seitenrand der Kopfzeile (clamp(20px, 5vw, 56px), css/shared.css): Leiste (Knopf + 2px je Knopf + 2 × Polster)
   + Abstand zum Fenster (--fl-rand) + 12px Luft - Rand + 7px (gemessen). Am Desktop rund 12px, am Telefon ebenso. Der Anlass-Knopf zählt schon mit, bevor
   js/anlass.js ihn einsetzt (html.hat-anlass) - so springt "Kontakt" nicht, wenn er erscheint. */
.nav-right, .tool-header-right { --fl-n: 1; --fl-plus: 0; }
.nav-right:has(.funktionsleiste > :nth-child(2)), .tool-header-right:has(.funktionsleiste > :nth-child(2)) { --fl-n: 2; }
.nav-right:has(.funktionsleiste > :nth-child(3)), .tool-header-right:has(.funktionsleiste > :nth-child(3)) { --fl-n: 3; }
.nav-right:has(.funktionsleiste > :nth-child(4)), .tool-header-right:has(.funktionsleiste > :nth-child(4)) { --fl-n: 4; }
html.hat-anlass .nav-right:not(:has(.anlass-toggle)), html.hat-anlass .tool-header-right:not(:has(.anlass-toggle)) { --fl-plus: 1; }
/* Werkzeug- und App-Seiten: Leiste auf jeder Breite */
.tool-header-right:not(.nav-links):not(.admin-kopf-rechts) {
    padding-right: max(0px, calc((var(--fl-knopf) + 2px) * (var(--fl-n) + var(--fl-plus)) + 2 * var(--fl-polster) + 19px + var(--fl-rand) + var(--fl-korr) - clamp(20px, 5vw, 56px)) - max(0px, 100vw - 1180px) / 2);
}
/* Startseite und Portal: nur solange die Leiste in der Kopfzeile steht */
@media (min-width: 1041px) {
    /* html.hat-anlass-Fassung mitnennen: bedienelemente.css hat dort eine spezifischere Regel (184px) */
    .nav-right, html.hat-anlass .nav-right, .tool-header-right.nav-links {
        padding-right: max(0px, calc((var(--fl-knopf) + 2px) * (var(--fl-n) + var(--fl-plus)) + 2 * var(--fl-polster) + 19px + var(--fl-rand) + var(--fl-korr) - clamp(20px, 5vw, 56px)) - max(0px, 100vw - 1180px) / 2);
    }
}

@media (prefers-contrast: more) {
    :root { --fl-kante: var(--ink-soft); }
}
@media print {
    .funktionsleiste--fest, .funktionsleiste--menue { display: none; }
}