/*!
 * WAB Topbar – schmale Leiste mit drei Spalten (links, Mitte, rechts).
 * Farben aus der globalen root.css (--wab-color-*), Inhaltsbreite aus dem Layout-Plugin (--wab-container, --wab-gutter).
 */

.wab-topbar {
    --wab-max: var(--wab-container, 1200px);
    background: var(--wab-topbar-bg, var(--wab-color-primary, #1d6b3a));
    color: var(--wab-topbar-text, var(--wab-color-primary-text, #fff));
    font-size: .875rem;
    line-height: 1.4;
}

.wab-topbar--wide { --wab-max: var(--wab-container-wide, 1600px); }
.wab-topbar--full { --wab-max: 100%; }

.wab-topbar__inner {
    box-sizing: border-box;
    display: grid;
    /* Die Mitte bleibt wirklich mittig, auch wenn links und rechts unterschiedlich viel steht */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem 1.5rem;
    min-height: 2.5rem;
    padding: .375rem max(var(--wab-gutter, 16px), calc((100% - var(--wab-max)) / 2));
}

.wab-topbar__col--left { text-align: left; }
.wab-topbar__col--center { text-align: center; }
.wab-topbar__col--right { text-align: right; }

/* Inhalte aus dem Editor: Absätze und Listen kompakt und nebeneinander */
.wab-topbar__col > :first-child { margin-top: 0; }
.wab-topbar__col > :last-child { margin-bottom: 0; }

.wab-topbar__col p {
    margin: 0;
}

.wab-topbar__col ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wab-topbar__col--center ul { justify-content: center; }
.wab-topbar__col--right ul { justify-content: flex-end; }

.wab-topbar a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .25s ease, opacity .2s ease;
}

.wab-topbar a:hover,
.wab-topbar a:focus-visible {
    background-size: 100% 1px;
}

.wab-topbar a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Automatische Icons vor Telefon- und E-Mail-Links (eingefärbt per currentColor) */
.wab-topbar a[href^="tel:"]::before,
.wab-topbar a[href^="mailto:"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    vertical-align: -.125em;
    background: currentColor;
    -webkit-mask: var(--wab-topbar-icon) center / contain no-repeat;
    mask: var(--wab-topbar-icon) center / contain no-repeat;
}

.wab-topbar a[href^="tel:"] {
    --wab-topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.wab-topbar a[href^="mailto:"] {
    --wab-topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

/* Unterstrich erst nach dem Icon beginnen lassen */
.wab-topbar a[href^="tel:"],
.wab-topbar a[href^="mailto:"] {
    background-position: 1.4em 100%;
}

.wab-topbar a[href^="tel:"]:hover,
.wab-topbar a[href^="tel:"]:focus-visible,
.wab-topbar a[href^="mailto:"]:hover,
.wab-topbar a[href^="mailto:"]:focus-visible {
    background-size: calc(100% - 1.4em) 1px;
}

/* Tablet: etwas engere Abstände */
@media (max-width: 1023.98px) {
    .wab-topbar__inner {
        column-gap: 1rem;
    }
}

/* Smartphone: Spalten untereinander und zentriert, einzelne Spalten ausblendbar */
@media (max-width: 767.98px) {
    .wab-topbar__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .25rem;
        padding-block: .5rem;
    }

    .wab-topbar__col {
        text-align: center;
    }

    .wab-topbar__col ul {
        justify-content: center;
    }

    .wab-topbar__col--empty,
    .wab-topbar__col--hide-mobile {
        display: none;
    }
}