/* Kopfleiste: Menüs „Sprache“ und „Hell/Dunkel“ sowie der Hell/Dunkel-Knopf (Aldin, 27.10.2026).

   Vorher hatten aktive Wahl und Hover dieselbe blaue Fläche, und die Einträge lagen ohne Abstand übereinander.
   Fuhr man über „DE“, während „EN“ aktiv war, klebten zwei blaue Blöcke aneinander. Der Hell/Dunkel-Knopf war
   immer blau getönt und stand direkt neben dem offenen Globus. Jetzt gilt:
   - aktiv: blaue Schrift mit Haken, ohne Fläche;
   - Hover: leichte Fläche, Schrift bleibt in Textfarbe;
   - 4 px Abstand zwischen den Einträgen;
   - Kopfknöpfe wie Glocke und Hilfe, nur bei Hover oder offenem Menü getönt, 8 px Abstand.
   Die alten Regeln stehen doppelt in vuexy-lab.css und vuexy-public.css. Diese Datei gewinnt über
   `html body` und wird für alle Seiten über _head_assets.html geladen. */

html body .vuexy-lab__theme-menu {
    gap: 4px;
}

html body .vuexy-lab__theme-menu button {
    position: relative;
    padding-right: 36px;
}

html body .vuexy-lab__theme-menu button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--vl-primary) 7%, transparent);
    color: var(--vl-text);
}

html body .vuexy-lab__theme-menu button.is-active {
    background: transparent;
    color: var(--vl-primary);
    font-weight: 600;
}

html body .vuexy-lab__theme-menu button.is-active:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--vl-primary) 7%, transparent);
    color: var(--vl-primary);
}

html body .vuexy-lab__theme-menu button.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Handy: „Darstellung“ (Hell/Dunkel/System) im Profil- und ☰-Menü wie die Sprachwahl daneben (language-switch.css)
   und die Menüs am Rechner: aktiv = blaue Schrift mit Haken ohne Fläche, Hover = leichte Fläche (Aldin, 27.10.2026). */
html body .vuexy-lab__portal-nav .vuexy-lab__portal-menu-theme-options button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--vl-primary) 7%, var(--vl-surface));
    color: var(--vl-text);
}

html body .vuexy-lab__portal-nav .vuexy-lab__portal-menu-theme-options button.is-active {
    gap: 4px;
    background: var(--vl-surface);
    color: var(--vl-primary);
    font-weight: 600;
}

html body .vuexy-lab__portal-nav .vuexy-lab__portal-menu-theme-options button.is-active:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--vl-primary) 7%, var(--vl-surface));
    color: var(--vl-primary);
}

html body .vuexy-lab__portal-nav .vuexy-lab__portal-menu-theme-options button.is-active::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Am Rechner. Am Handy behalten die Kopfknöpfe ihren eigenen Kasten (vuexy-lab.css, Handy-Kopfleiste). */
@media (min-width: 901px) {
    /* Profilmenü 248 statt 224 px: Die Sprachwahl darin zeigt die aktive Sprache wie das Globus-Menü mit Haken
       (language-switch.css), und der Name wird seltener abgekürzt (Aldin, 27.10.2026). Am Handy volle Breite. */
    html body .vuexy-lab__portal-user-dropdown {
        width: 248px;
    }

    /* Der nie passende Zusatz mit zwei IDs hebt die Spezifität über die vielen Kopfleisten-Regeln (Muster vuexy-close.css). */
    html body .vuexy-lab__portal-nav .vuexy-lab__portal-nav-actions:is(.vuexy-lab__portal-nav-actions, #im-topbar#im-topbar) {
        gap: 8px;
    }

    html body .vuexy-lab .vuexy-lab__portal-nav .vuexy-lab__portal-theme .vuexy-lab__icon-button {
        border-color: transparent;
        background: transparent;
        color: var(--vl-text);
        box-shadow: none;
    }

    html body .vuexy-lab .vuexy-lab__portal-nav .vuexy-lab__portal-theme .vuexy-lab__icon-button:is(:hover, :focus-visible),
    html body .vuexy-lab .vuexy-lab__portal-nav .vuexy-lab__portal-theme .vuexy-lab__icon-button[aria-expanded="true"] {
        border-color: transparent;
        background: color-mix(in srgb, var(--vl-primary) 8%, transparent);
        color: var(--vl-primary);
    }
}