/* i18n.css — Sprachumschalter + Logo im Header (Saso 31.10.2026)
 *
 * Einbindung:
 *   <link rel="stylesheet" href="/css/i18n.css?v=...">
 *   oder via style.css @import — bewusst separat, damit die
 *   Sprach-Funktion als Block abschaltbar bleibt.
 */

/* ---------- Logo im Header ---------- */
.mv-brand-logo {
    display: block;
    width: 285px;
    max-width: 42vw;
    height: auto;
    margin: 0 auto 0.35rem;
    /* Auf nachtviolettem Hintergrund ist das Logo mit transparentem
       Hintergrund unsichtbar — daher heller Glow statt Farbfläche. */
    filter: drop-shadow(0 2px 12px rgba(212, 169, 68, 0.22));
}

/* Der Text-Logo-Titel bleibt für SEO + Screenreader im Dokument,
   ist aber visuell redundant, sobald das Lockup steht. */
.mv-brand-logo-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main-header h1 {
    position: relative;
}

/* ---------- Stacking-Reihenfolge: Switcher ueber dem Hero ----------
 * BEFUND (01.11.2026): Das Aufklapp-Menue des Sprachumschalters lag
 * hinter dem Zoltan-Hero auf der Startseite. Grund: das Menue hat
 * z-index 1200, steckt aber im Stacking-Context von
 * header.main-header (z-index 1). Der Hero-Abschnitt hat ebenfalls
 * z-index 1 und steht im DOM NACH dem Header — bei gleichem
 * z-index gewinnt das spaetere Element, also der Hero.
 *
 * Der Header bekommt daher einen z-index ueber den Hero-Werten und
 * der Nav wird zum Positionierungs-Anker fuer das Menue, damit das
 * Menue nicht am Header-Container klebt, sondern an der Nav.
 */
.main-header:has(.site-nav) {
    z-index: 30;
}

.site-nav {
    position: relative;
}

/* ---------- Sprachumschalter in der Header-Aktions-Reihe ----------
 * Saso 01.11.2026: Der Waelzer sitzt jetzt DA, wo Suche, Ton und
 * Konto sitzen (js/site-nav.js haengt den Host an .header-actions).
 * Vorher stand er in der Navigation unter den Menuepunkten.
 *
 * `order` ist hier 4: die Reihe ist Suche 1, Ton 2, Konto 3, Waelzer 4.
 * Fest per CSS, damit sie nicht von der Reihenfolge des Einfuegens
 * abhaengt. i18n.css laedt nach header-buttons.css und darf die
 * order-Werte dort also ueberschreiben.
 *
 * `.site-nav-lang:empty` faengt die Seiten ohne i18n-Engine ab
 * (seance/): dort baut niemand einen Button in den Host, und ein
 * leerer Flex-Item wuerde einen sichtbaren Abstand in der Reihe
 * aufreissen.
 */
.header-actions .site-nav-lang {
    order: 4;
    position: static;
    display: inline-flex;
    align-items: center;
}

.site-nav-lang:empty {
    display: none;
}

/* ---------- Sprachumschalter ---------- */
.mv-lang-switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.mv-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 169, 68, 0.4);
    border-radius: 6px;
    color: #e8e4f0;
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mv-lang-btn:hover,
.mv-lang-btn:focus-visible {
    background: rgba(212, 169, 68, 0.18);
    border-color: #d4a944;
}

.mv-lang-globe {
    font-size: 0.75rem;
    color: #d4a944;
    line-height: 1;
}

.mv-lang-cur {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mv-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;
    display: none;
    min-width: 132px;
    padding: 0.25rem;
    background: #14101f;
    border: 1px solid rgba(212, 169, 68, 0.45);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.mv-lang-menu.is-open {
    display: block;
}

.mv-lang-item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #e8e4f0;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.mv-lang-item:hover,
.mv-lang-item:focus-visible {
    background: rgba(212, 169, 68, 0.2);
    color: #fff;
}

.mv-lang-item.is-active {
    color: #d4a944;
    font-weight: 700;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .mv-brand-logo {
        width: 210px;
        max-width: 60vw;
    }
    .mv-lang-btn {
        min-height: 30px;
        padding: 0.2rem 0.45rem;
        font-size: 0.72rem;
    }
}