/*
 * Sprachmenue: Fahne vor dem Namen, aktuelle Sprache auf der Schaltflaeche.
 *
 * ERZEUGT von 'tevis-lingua css' - nicht von Hand aendern.
 * Quelle: config/languages.yaml und templates/stadtvs/flags/*.svg
 *
 * Sprachen ohne Fahnendatei bekommen ein Kuerzel-Plaettchen. Fuer Arabisch
 * ist das Absicht: die saudische Flagge traegt die Schahada, ein
 * Glaubensbekenntnis. Sie darf nicht vereinfacht, verzerrt oder
 * gespiegelt dargestellt werden - fuer ein 20x14-Pixel-Symbol in einem
 * Menue ist das nicht sauber zu loesen. Ausserdem sprechen Arabisch
 * Menschen aus rund 25 Staaten; eine Nationalflagge waere ohnehin eine
 * willkuerliche Zuordnung. Wer es dennoch will, legt ar_SA.svg ab.
 */

/* --- Eintraege im Menue ------------------------------------------- */
#id_lang_menu li a {
    display: flex;
    align-items: center;
    gap: .55em;
}
#id_lang_menu li a::before {
    content: "";
    flex: 0 0 auto;
    width: 1.3em;
    height: .92em;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 2px;
}

#id_lang_menu li a[href$="lang=de_DE"]::before,
[lang="de"] .languageSelect::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%203%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h5v3H0z%22%2F%3E%3Cpath%20fill%3D%22%23d00%22%20d%3D%22M0%201h5v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffce00%22%20d%3D%22M0%202h5v1H0z%22%2F%3E%3C%2Fsvg%3E");
}

#id_lang_menu li a[href$="lang=en_GB"]::before,
[lang="en"] .languageSelect::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22s%22%3E%3Cpath%20d%3D%22M0%200v30h60V0z%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30%2015h30v15zv15H30zH0V15zV0h30z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23s%29%22%3E%3Cpath%20fill%3D%22%23012169%22%20d%3D%22M0%200v30h60V0z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20d%3D%22m0%200%2060%2030m0-30L0%2030%22%2F%3E%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22%20clip-path%3D%22url%28%23t%29%22%20d%3D%22m0%200%2060%2030m0-30L0%2030%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20d%3D%22M30%200v30M0%2015h60%22%2F%3E%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22%20d%3D%22M30%200v30M0%2015h60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

#id_lang_menu li a[href$="lang=es_ES"]::before,
[lang="es"] .languageSelect::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23c60b1e%22%20d%3D%22M0%200h3v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffc400%22%20d%3D%22M0%20.5h3v1H0z%22%2F%3E%3C%2Fsvg%3E");
}

#id_lang_menu li a[href$="lang=tr_TR"]::before,
[lang="tr"] .languageSelect::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20800%22%3E%3Cpath%20fill%3D%22%23e30a17%22%20d%3D%22M0%200h1200v800H0z%22%2F%3E%3Ccircle%20cx%3D%22425%22%20cy%3D%22400%22%20r%3D%22200%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%22475%22%20cy%3D%22400%22%20r%3D%22160%22%20fill%3D%22%23e30a17%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m583%20400%20180-58-111%20153V295l111%20153z%22%2F%3E%3C%2Fsvg%3E");
}

#id_lang_menu li a[href$="lang=ro_RO"]::before,
[lang="ro"] .languageSelect::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23002b7f%22%20d%3D%22M0%200h3v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23fcd116%22%20d%3D%22M1%200h2v2H1z%22%2F%3E%3Cpath%20fill%3D%22%23ce1126%22%20d%3D%22M2%200h1v2H2z%22%2F%3E%3C%2Fsvg%3E");
}

#id_lang_menu li a[href$="lang=ar_SA"]::before,
[lang="ar"] .languageSelect::before {
    content: "AR";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

#id_lang_menu li a[href$="lang=el_GR"]::before,
[lang="el"] .languageSelect::before {
    content: "EL";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

#id_lang_menu li a[href$="lang=ru_RU"]::before,
[lang="ru"] .languageSelect::before {
    content: "RU";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

#id_lang_menu li a[href$="lang=uk_UA"]::before,
[lang="uk"] .languageSelect::before {
    content: "UK";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

#id_lang_menu li a[href$="lang=it_IT"]::before,
[lang="it"] .languageSelect::before {
    content: "IT";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

#id_lang_menu li a[href$="lang=fr_FR"]::before,
[lang="fr"] .languageSelect::before {
    content: "FR";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .35);
}

/* --- Schaltflaeche: Fahne und Name der AKTUELLEN Sprache ---------- */
/* Das Globus-Symbol allein war als Sprachwahl schlecht zu erkennen.   */
/*                                                                     */
/* Kein display-Wechsel und keine eigene Hoehe: .disclosure-nav button  */
/* setzt bereits display:flex und ein Innenabstand von 1em oben und     */
/* unten. Wird daran gedreht, fuellt die Schaltflaeche die Leiste beim  */
/* Ueberfahren nicht mehr bis zum unteren Rand.                         */
/* height: 100% wie bei den Geschwistern - der Kontrast-Schalter    */
/* traegt es inline. Ohne das fuellt die Flaeche beim Ueberfahren     */
/* die Leiste nicht bis zum unteren Rand.                             */
.languageSelect {
    height: 100% !important;
    gap: .45em;
    white-space: nowrap;
}

/* Die beiden Globus-Grafiken (hell/dunkel fuer den Kontrastmodus)     */
/* werden ersetzt, nicht nur ueberdeckt.                               */
.languageSelect > img { display: none !important; }

.languageSelect::before {
    content: "";
    flex: 0 0 auto;
    width: 1.75em;
    height: 1.24em;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 2px;
}

/* Der Name steht als echtes <span> im Button - ::after ist im         */
/* Basis-Stylesheet der Aufklapp-Pfeil und hat hoehere Spezifitaet.    */
.languageSelect .current-language {
    font-size: .82em;
    font-weight: 600;
    line-height: 1;
}

/* Im Kontrastmodus bleibt der Rahmen sichtbar. */
.contrast .languageSelect::before,
.contrast #id_lang_menu li a::before { border-color: currentColor; }

/* Rechts-nach-links: Fahne rechts vom Text. */
[dir="rtl"] #id_lang_menu li a,
[dir="rtl"] .languageSelect { flex-direction: row-reverse; }