/*
 * EIT Topbar - Hinweisleiste über dem Kopfbereich
 *
 * Farben kommen als --tb-bg/--tb-text inline vom Plugin (Bar.php). Die Werte hier
 * sind nur Ersatz. Dateiname trägt die Plugin-Version (Cache des Shops hängt an der
 * Template-Version, nicht an der Plugin-Version).
 */
.eit-topbar,
.eit-topbar * {
    box-sizing: border-box;
}

.eit-topbar {
    position: relative;
    background: var(--tb-bg, #107C92);
    color: var(--tb-text, #ffffff);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.eit-topbar[hidden] {
    display: none !important;
}

/* Die Zeile trägt zusätzlich .container von NOVA (gleiche Breite wie der Kopfbereich) */
.eit-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 32px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 16px;
}

/* Eine einzelne Spalte steht sonst links - mittig wirkt sie gewollt */
.eit-topbar-zone:only-child {
    margin: 0 auto;
}

.eit-topbar-zone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Templates färben Links beim Hover gern mit !important um - in der Leiste bleibt
   die Schrift in der eingestellten Farbe, der Hover ist eine Unterstreichung. */
.eit-topbar a.eit-topbar-zone,
.eit-topbar a.eit-topbar-zone:hover,
.eit-topbar a.eit-topbar-zone:focus {
    color: var(--tb-text, #ffffff) !important;
}
.eit-topbar a.eit-topbar-zone:hover .eit-topbar-text,
.eit-topbar a.eit-topbar-zone:focus .eit-topbar-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.eit-topbar a.eit-topbar-zone:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

.eit-topbar-icon {
    flex: 0 0 auto;
    font-size: 1.05em;
}

/* Schließen-Kreuz: eigener Platz rechts, damit kein Text darunter läuft */
.eit-topbar--schliessbar .eit-topbar-inner {
    padding-right: 44px;
}
.eit-topbar-close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.eit-topbar-close:hover,
.eit-topbar-close:focus {
    background: rgba(255, 255, 255, .18);
    color: inherit;
}
.eit-topbar-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ Smartphone */
@media (max-width: 767.98px) {
    .eit-topbar-inner {
        justify-content: center;
        gap: 2px 16px;
        text-align: center;
    }
    .eit-topbar-zone:only-child {
        margin: 0;
    }
    .eit-topbar-zone[data-mobil="0"] {
        display: none !important;
    }

    .eit-topbar--m-aus {
        display: none !important;
    }

    /* Nur die erste für das Smartphone freigegebene Spalte */
    .eit-topbar--m-erste .eit-topbar-zone:not(.is-m-first) {
        display: none;
    }

    /* Spalten im Wechsel: alle liegen in derselben Rasterzelle, sichtbar ist eine.
       Ohne Skript (oder vor dessen Start) steht die erste Spalte da. */
    .eit-topbar--m-wechsel .eit-topbar-inner {
        display: grid;
    }
    .eit-topbar--m-wechsel .eit-topbar-zone {
        grid-area: 1 / 1;
        justify-self: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity .45s ease, visibility 0s linear .45s;
    }
    .eit-topbar--m-wechsel:not(.is-rotating) .eit-topbar-zone.is-m-first,
    .eit-topbar--m-wechsel.is-rotating .eit-topbar-zone.is-active {
        opacity: 1;
        visibility: visible;
        transition: opacity .45s ease, visibility 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eit-topbar--m-wechsel .eit-topbar-zone {
        transition: none !important;
    }
}