/* 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 ---------- */
/* Saso 04.11.2026: "das logo freistellen UND IM HEADER LINKS!!! nicht
   darunter" — der Header ist jetzt EINE Zeile: Logo links INLINE mit
   Navigation und Button-Reihe (Mobile: Zeile 1 = Logo + Buttons,
   Zeile 2 = Nav). Die Tagline-Zeile entfaellt ganz (Text bleibt fuer
   SEO im Dokument). Asset = freigestellte D-Marke ohne Hintergrund
   und ohne Claim/Slogan. */
.main-header:has(.mv-brand-logo) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    padding: 0.9rem var(--spacing) 0.8rem;
    text-align: left;
}

.main-header:has(.mv-brand-logo) h1 {
    margin: 0;
    flex: 0 0 auto;
}

.mv-brand-logo {
    display: block;
    width: auto;
    height: 54px;          /* D-Marke 780x300 => ~140px breit */
    max-width: 40vw;
    margin: 0;
    /* 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));
}

/* Nav teilt sich die Zeile mit dem Logo — Mobile/Tablet: Nav bricht
   auf die EIGENE Zeile (Logo + Buttons teilen sich Zeile 1), Desktop:
   eine Zeile, Nav zentriert im Restplatz. */
.main-header:has(.mv-brand-logo) .site-nav {
    flex: 1 1 auto;
    flex-basis: 100%;      /* bis 900px: volle Zeile unter Logo+Buttons */
    min-width: 0;
    margin: 0;
    order: 1;              /* nach Logo+Buttons, eigene Zeile (basis 100%) */
}

.main-header:has(.mv-brand-logo) .header-actions {
    order: 0;              /* Zeile 1, rechts vom Logo. BEFUND: order:1
                              + margin-left:auto bricht in Chromes
                              Flex-Wrap trotz passender Breite um
                              (live getestet 04.11.) — order:0 (DOM-
                              Reihenfolge: h1 vor .header-actions)
                              bleibt in Zeile 1. */
    margin-left: auto;
}

@media (min-width: 900px) {
    .main-header:has(.mv-brand-logo) {
        flex-wrap: nowrap; /* EINE Zeile: Logo | Nav | Buttons */
    }
    .main-header:has(.mv-brand-logo) .site-nav {
        flex-basis: auto;
    }
    .main-header:has(.mv-brand-logo) .header-actions {
        order: 3;
        margin-left: 0;
    }
}

/* Nur das Logo im Header: die Tagline-Zeile unter dem h1 entfaellt,
   sobald die Marken-Grafik gerendert ist (Seiten ohne brand-logo.js
   behalten ihre Tagline). Der Text bleibt im DOM (SEO/Screenreader). */
.main-header:has(.mv-brand-logo) .tagline {
    display: none;
}

/* Der Link um das Logo: er muss das Bild als Block einschliessen,
   damit (a) die Klickflaeche das ganze Logo abdeckt und (b) das Bild
   in der Header-Zeile natuerlich sitzt (Saso 02.11.2026: anklickbar).
   In der Flex-Zeile darf er NICHT 100% breit sein. */
.main-header h1 > a:has(> .mv-brand-logo) {
    display: inline-block;
    width: auto;
    text-decoration: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* 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.
 *
 * `.header-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 .header-lang {
    order: 4;
    position: static;
    display: inline-flex;
    align-items: center;
}

.header-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) {
    /* Zeile 1: Logo (kleiner, ohne Slogan — die D-Marke hat ohnehin
       keinen) + Button-Reihe rechts. Nav bricht auf die eigene Zeile. */
    .mv-brand-logo {
        height: 36px;
        max-width: 40vw;
    }
    .main-header:has(.mv-brand-logo) {
        gap: 0.4rem 0.6rem;   /* Zeile-1-Platz: Logo + Icon-Reihe */
        padding: 0.8rem var(--spacing) 0.7rem;
    }
    .main-header:has(.mv-brand-logo) .site-nav {
        flex-basis: 100%;
        justify-content: center;
    }
    .mv-lang-btn {
        min-height: 30px;
        padding: 0.2rem 0.45rem;
        font-size: 0.72rem;
    }
}