/* =========================================================
   NAVIGATION
========================================================= */

.site-header {

    background:
        var(--light-lilac);

}

.site-header-inner {

    min-height:
        82px;

    padding:
        0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}

/* LOGO */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    line-height:
        1;

}

.logo-image {

    width:
        auto;

    height:
        52px;

    object-fit:
        contain;

}

.logo-main {

    font-size:
        2rem;

}

.logo-sub {

    margin:
        0;

    color:
        var(--pink);

    font-weight:
        400;

    letter-spacing:
        normal;

}

/* NAVIGATION */

.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}

.main-nav a {

    padding:
        9px 14px;

    border-radius:
        100px;

    font-size:
        0.82rem;

    font-weight:
        600;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}

.main-nav a:hover {

    background:
        rgba(255,255,255,0.42);

}

.main-nav a.active {

    background:
        var(--pink);

}

/* FACEBOOK */

.facebook-link {

    width:
        38px;

    height:
        38px;

    margin-left:
        7px;

    padding:
        0 !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50% !important;

    background:
        var(--yellow);

    font-family:
        Arial,
        sans-serif;

    font-size:
        1.1rem !important;

    font-weight:
        700 !important;

}

.facebook-link:hover {

    background:
        var(--yellow) !important;

    transform:
        translateY(-2px);

}

/* =========================================================
   KOPFZEILEN-SUCHE
========================================================= */

.nav-search {

    position: relative;

}

.nav-search-toggle {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--dark);

    cursor: pointer;

    transition: background 0.2s ease;

}

.nav-search-toggle:hover {

    background: var(--cream);

}

.nav-search-toggle svg {

    width: 18px;
    height: 18px;

}

.nav-search-form {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    z-index: 60;

    width: min(250px, 80vw);

    padding: 6px;

    border-radius: 100px;

    background: var(--white);

    box-shadow: var(--shadow-soft);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-6px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}

.nav-search.nav-search-open .nav-search-form {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.nav-search-form input {

    width: 100%;

    padding: 9px 16px;

    border: 0;

    border-radius: 100px;

    background: var(--cream);

    color: var(--dark);

    font-family: inherit;

    font-size: 0.82rem;

    outline: none;

}

.nav-search-form input::placeholder {

    color: #aaa4ae;

}

/* =========================================================
   MOBILE MENÜ
========================================================= */

.mobile-menu-button {

    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        9px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--pink);

    cursor:
        pointer;

}

.mobile-menu-button span {

    display:
        block;

    height:
        2px;

    margin:
        5px 0;

    background:
        var(--dark);

}

/* =========================================================
   NEWS-TICKER (durchlaufender Text)
========================================================= */

.news-ticker {

    overflow:
        hidden;

    background:
        var(--yellow);

}

.news-ticker-track {

    display:
        inline-flex;

    width:
        max-content;

    align-items:
        center;

    gap:
        16px;

    padding:
        13px 0;

    white-space:
        nowrap;

    font-size:
        0.78rem;

    font-weight:
        700;

    animation:
        news-ticker-scroll
        32s
        linear
        infinite;

}

.news-ticker-track span {

    padding:
        0 16px;

}

/* =========================================================
   DOWNLOAD-HINWEIS
========================================================= */

.download-notice {

    min-height:
        54px;

    padding:
        10px 35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    background:
        var(--yellow);

    font-size:
        0.78rem;

}

.notice-icon {

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.48);

}

.download-notice strong {

    font-weight:
        700;

}

/* Schnee-Zone der Startseite: Kopfzeile als Bezugsfläche.
   Steht bewusst HIER (vor den Mobile-Regeln unten), damit das
   klebende Menü (.site-header { position: sticky }) am Handy
   nicht überschrieben wird. */

.snow-zone-header {

    position:
        relative;

}

/* Animation */
@keyframes news-ticker-scroll {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

.site-header-inner {

        padding:
            0 25px;

    }

.main-nav a {

        padding:
            8px 9px;

        font-size:
            0.75rem;

    }

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.site-header {

        position:
            sticky;

        top:
            0;

        z-index:
            100;

    }

.site-header-inner {

        min-height:
            72px;

        padding:
            0 20px;

    }

.main-nav {

        position:
            absolute;

        z-index:
        50;

        top:
            72px;

        left:
            15px;

        right:
            15px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            12px;

        border-radius:
            20px;

        background:
            var(--white);

        box-shadow:
            0 12px 35px
            rgba(81,75,87,0.16);

    }

.main-nav.mobile-open {

        display:
            flex;

    }

.main-nav a {

        width:
            100%;

        padding:
            11px;

        text-align:
            center;

    }

.main-nav .facebook-link {

        width:
            38px;
        height:
            38px;

        flex-shrink:
            0;

        margin:
            5px auto 0;

    }

.mobile-menu-button {

        display:
            block;

    }

.nav-search-form {

        right:
            auto;

        left:
            50%;

        transform:
            translateX(-50%)
            translateY(-6px);

        width:
            min(280px, 90vw);

    }

.nav-search.nav-search-open .nav-search-form {

        transform:
            translateX(-50%)
            translateY(0);

    }

.download-notice {

        min-height:
            58px;

        padding:
            9px 18px;

        justify-content:
            flex-start;

        font-size:
            0.72rem;

    }

}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.news-ticker-track {

        animation:
            none !important;

    }

}