/* -------------------------------------------------------------------------
 * Sticky Kontaktleiste
 *
 * Desktop: fest stehender Streifen am rechten Rand, nur Symbole. Die
 * Beschriftung faehrt beim Ueberfahren nach links aus.
 * Bis 991 px: Balkenleiste am unteren Rand mit Symbol und Text untereinander.
 *
 * Zur Stapelreihenfolge: das Theme benutzt fuer seinen mitlaufenden Kopf und
 * fuer Overlays 9999 bis 100000, das Mega-Menue 2000 bis 5000, das
 * Complianz-Cookie-Banner 99999. Die Leiste liegt mit 1500 darunter und wird
 * von allen dreien verdeckt -- das ist so gewollt, denn Menue, Banner und
 * Lightbox sollen jederzeit Vorrang haben.
 * ------------------------------------------------------------------------- */

.zopp-kontaktleiste {
    --zopp-kl-dunkel: #061322;
    --zopp-kl-akzent: #e18f14;
    --zopp-kl-akzent-tief: #c97a0b;
    --zopp-kl-groesse: 48px;

    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1500;

    display: flex;
    flex-direction: column;
    gap: 2px;

    font-family: 'Play', 'Lato', sans-serif;
    line-height: 1;
}

.zopp-kontaktleiste__knopf {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zopp-kl-groesse);
    height: var(--zopp-kl-groesse);

    background-color: var(--zopp-kl-dunkel);
    color: #fff;
    text-decoration: none;

    transition: background-color 160ms ease;
}

/* Das Theme setzt fuer Links im Inhalt eigene Farben -- hier gegensteuern,
   damit die Symbole in jedem Kontext weiss bleiben. */
.zopp-kontaktleiste__knopf:link,
.zopp-kontaktleiste__knopf:visited {
    color: #fff;
}

.zopp-kontaktleiste__knopf:hover,
.zopp-kontaktleiste__knopf:focus {
    background-color: var(--zopp-kl-akzent);
    color: #fff;
    text-decoration: none;
}

.zopp-kontaktleiste__knopf--primaer {
    background-color: var(--zopp-kl-akzent);
}

.zopp-kontaktleiste__knopf--primaer:hover,
.zopp-kontaktleiste__knopf--primaer:focus {
    background-color: var(--zopp-kl-akzent-tief);
}

/* Sichtbarer Fokusring fuer die Tastaturbedienung. */
.zopp-kontaktleiste__knopf:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
}

.zopp-kontaktleiste__symbol {
    width: 19px;
    height: 19px;
    flex: none;
}

/* Beschriftung: liegt links neben dem Knopf und ist zunaechst unsichtbar.
   'background-color: inherit' sorgt dafuer, dass sie den Farbwechsel des
   Knopfes beim Ueberfahren mitmacht. */
.zopp-kontaktleiste__text {
    position: absolute;
    right: 100%;
    top: 0;
    height: var(--zopp-kl-groesse);

    display: flex;
    align-items: center;
    padding: 0 14px;

    background-color: inherit;
    color: inherit;
    white-space: nowrap;
    font-size: 12.5px;
    letter-spacing: 0.04em;

    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;

    transition: opacity 160ms ease, transform 160ms ease;
}

.zopp-kontaktleiste__knopf:hover .zopp-kontaktleiste__text,
.zopp-kontaktleiste__knopf:focus .zopp-kontaktleiste__text {
    opacity: 1;
    transform: translateX(0);
}

/* -------------------------------------------------------------------------
 * Schmale Bildschirme: Balkenleiste am unteren Rand
 *
 * Der Grenzwert liegt bei 991 px, damit auch Tablets im Hochformat den Balken
 * bekommen. Auf Geraeten ohne Mauszeiger wuerde die ausfahrende Beschriftung
 * sonst nie erscheinen und die Knoepfe blieben unbeschriftet.
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .zopp-kontaktleiste {
        --zopp-kl-groesse: 54px;

        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;

        flex-direction: row;
        gap: 0;

        border-top: 2px solid var(--zopp-kl-akzent);
    }

    .zopp-kontaktleiste__knopf {
        flex: 1 1 0;
        width: auto;
        flex-direction: column;
        gap: 3px;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .zopp-kontaktleiste__knopf:last-child {
        border-right: 0;
    }

    .zopp-kontaktleiste__symbol {
        width: 17px;
        height: 17px;
    }

    /* Beschriftung steht jetzt dauerhaft unter dem Symbol. */
    .zopp-kontaktleiste__text {
        position: static;
        height: auto;
        padding: 0;
        opacity: 1;
        transform: none;
        font-size: 10px;
    }

    /* Platz schaffen, damit die Leiste den Fuss der Seite nicht verdeckt. */
    body {
        padding-bottom: 56px;
    }
}

/* Beim Drucken hat die Leiste keinen Zweck. */
@media print {
    .zopp-kontaktleiste {
        display: none;
    }
}

/* Nutzer, die weniger Bewegung wuenschen, bekommen den Wechsel ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .zopp-kontaktleiste__knopf,
    .zopp-kontaktleiste__text {
        transition-duration: 0.01ms;
    }

    .zopp-kontaktleiste__text {
        transform: none;
    }
}