/**
 * SprachenPortal – Kontaktband über dem Seitenkopf.
 *
 * Eigene Datei und nicht in admin.css, weil das Band auf allen Seiten
 * steht: Verwaltung und Mitgliederbereich laden admin.css, die
 * Startseite nicht. Und alpasana-design.css bleibt unverändert, es ist
 * eine Kopie aus dem Contenttool.
 *
 * Farben aus dem Designsystem: --alp-dark ist dort ausdrücklich für
 * «Topbar, Footer, Hero» vorgesehen, --alp-blue-bright für «Akzente auf
 * Dunkel». Kontraste geprüft: Weiss auf --alp-dark ergibt 15.3:1, das
 * helle Blau 5.6:1 – beide über WCAG AA.
 */

.kontaktband {
    background: var(--alp-dark);
    /* Haarlinie unten: Auf der Startseite beginnt der Hintergrund mit
       demselben Farbwert, ohne die Linie ginge das Band dort unter. */
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--alp-font-body);
    font-size: .82rem;
}

.kontaktband__innen {
    max-width: var(--alp-container);
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px 26px;
    flex-wrap: wrap;
}

.kontaktband a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    transition: color .15s ease;
}

.kontaktband a:hover,
.kontaktband a:focus-visible { color: var(--alp-blue-bright); }

.kontaktband a:focus-visible {
    outline: 2px solid var(--alp-blue-bright);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Die Symbole tragen die Akzentfarbe, der Text bleibt weiss. Beim
   Überfahren wechselt beides, deshalb currentColor. */
.kontaktband svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--alp-blue-bright);
}

.kontaktband a:hover svg,
.kontaktband a:focus-visible svg { color: currentColor; }

/* Schmale Fenster: Das Band bleibt, rückt aber nach links und darf
   umbrechen. Rechtsbündig mit Umbruch sieht zerrissen aus. */
@media (max-width: 560px) {
    .kontaktband__innen {
        justify-content: flex-start;
        gap: 6px 20px;
    }
}