/* ============================================================
   sprachen.css - Sprachwahl oben auf den oeffentlichen Seiten und
   Zusaetze fuer andere Alphabete (seit 10/2026, sprachen-lib.php).
   ============================================================ */

/* ---- Sprachwahl: schmale Leiste ueber der Kopfzeile ---- */
.sp-leiste {
    --sp-flaeche: #080c15;
    --sp-rand: rgba(255, 255, 255, 0.08);
    --sp-schrift: #aeb6c4;
    --sp-schrift-stark: #ffffff;
    --sp-karte: #131b2b;
    --sp-gold: #f2a900;
    position: relative;
    z-index: 1001;                 /* ueber der klebenden Kopfzeile (1000), damit die Liste nicht dahinter aufgeht */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 5px 40px;
    background: var(--sp-flaeche);
    border-bottom: 1px solid var(--sp-rand);
    font: 500 13px/1.3 'Inter', -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
    letter-spacing: 0;
    text-transform: none;
}
html[data-theme="hell"] .sp-leiste {
    --sp-flaeche: #e9edf5;
    --sp-rand: rgba(15, 23, 42, 0.10);
    --sp-schrift: #475569;
    --sp-schrift-stark: #0f172a;
    --sp-karte: #ffffff;
    --sp-gold: #9a6700;
}
/* Kunden-Login: klein, links neben der Sprachwahl (seit 08.10.2026, vorher im Menue der Kopfzeile) */
.sp-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--sp-gold);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.sp-login svg { flex: none; }
.sp-login:hover { color: var(--sp-schrift-stark); background: var(--sp-rand); }
.sp-login:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 2px; border-radius: 999px; }
.sp-login + .sp-wahl { padding-left: 5px; border-left: 1px solid var(--sp-rand); }
.sp-wahl { position: relative; }
.sp-wahl > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--sp-schrift);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s, background 0.2s;
}
.sp-wahl > summary::-webkit-details-marker { display: none; }
.sp-wahl > summary:hover, .sp-wahl[open] > summary { color: var(--sp-schrift-stark); background: var(--sp-rand); }
.sp-wahl > summary:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 2px; border-radius: 999px; }
.sp-kugel, .sp-pfeil { flex: none; }
.sp-wahl[open] .sp-pfeil { transform: rotate(180deg); }
.sp-liste {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 8px;
    background: var(--sp-karte);
    border: 1px solid var(--sp-rand);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.sp-liste a {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--sp-schrift);
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    text-align: left;
}
.sp-liste a[dir="rtl"] { text-align: left; font-size: 15px; }   /* Liste bleibt buendig, auch bei arabischer Schrift */
.sp-liste a:hover, .sp-liste a:focus-visible { color: var(--sp-schrift-stark); background: var(--sp-rand); outline: none; }
.sp-liste a.sp-da { color: var(--sp-gold); font-weight: 700; }
@media (max-width: 900px) { .sp-leiste { padding: 4px 16px; } }
@media print { .sp-leiste { display: none; } }

/* ---- Andere Alphabete ----
   Die Hauptschrift Outfit kennt nur lateinische Buchstaben. Griechisch und Kyrillisch
   uebernimmt Inter (liegt in /assets/fonts/), Arabisch und Persisch die Schrift des Geraets. */
html[lang="el"] body, html[lang="bg"] body,
html[lang="el"] h1, html[lang="el"] h2, html[lang="el"] h3, html[lang="el"] h4, html[lang="el"] button, html[lang="el"] input, html[lang="el"] textarea, html[lang="el"] select,
html[lang="bg"] h1, html[lang="bg"] h2, html[lang="bg"] h3, html[lang="bg"] h4, html[lang="bg"] button, html[lang="bg"] input, html[lang="bg"] textarea, html[lang="bg"] select {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select {
    font-family: 'Segoe UI', Tahoma, 'Geeza Pro', 'SF Arabic', 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Vazirmatn', Arial, sans-serif;
}
/* Sperrung zerreisst arabische Buchstaben, Grossschreibung gibt es dort nicht. */
html[dir="rtl"] body * { letter-spacing: 0 !important; }
html[dir="rtl"] body :not(i):not(.fa-solid):not(.fa-brands):not(.fa-regular) { text-transform: none; }

/* ---- Nachbesserungen fuer uebersetzte Seiten ---- */
/* Themenseiten, Handy: Der Tabellenkopf ist dort links aus dem Bild geschoben (left: -9999px).
   Bei Rechts-nach-links-Schrift laesst sich die Seite dadurch seitlich verschieben - also nach rechts hinaus. */
html[dir="rtl"] .sk-tabelle thead { left: auto; right: -9999px; }
/* Funktionen-Seite, Rad: laengere Namen (z. B. bulgarisch) duerfen in zwei Zeilen stehen statt ueber den Rand zu ragen. */
html[data-sprache] .fk-knoten-name { white-space: normal; width: max-content; max-width: 96px; text-align: center; }
/* Menue der Kopfzeile am Handy: In anderen Sprachen ist "Kunden-Login" laenger - der Zusatz faellt frueher weg
   (deutsch erst unter 370 px), Griechisch braucht dazu eine Spur kleinere Schrift. */
@media (max-width: 430px) { html[data-sprache] .kopf-lang { display: none; } }
@media (max-width: 400px) { html[lang="el"] .kopf-link { font-size: 13px; } }
/* Startseite: Die zwei Knoepfe unter der Hauptueberschrift duerfen untereinander rutschen, wenn ihre Beschriftung laenger ist. */
html[data-sprache] .hero-ctas { flex-wrap: wrap; }
/* Sprachliste auf sehr schmalen Handys: langer Eintrag bricht um statt hinauszuragen. */
@media (max-width: 400px) { .sp-liste a { white-space: normal; } }