/*
 * Feststehende Menueleiste, siehe sticky-header.js.
 * Ab 981px mit geklontem Desktop-Menue, darunter mit Burger fuer Divis
 * Overlay-Menue.
 */

.b2p-stickybar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000; /* ueber #main-content (1000) und Divis Header (999) */
    background: #333333;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.b2p-stickybar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

body.admin-bar .b2p-stickybar {
    top: 32px;
}

.b2p-stickybar__inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 64px;
    padding: 0 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.b2p-stickybar__logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

.b2p-stickybar__logo img {
    height: 34px;
    width: auto;
    display: block;
}

/* Das geklonte Divi-Menuemodul auf Leistenmass bringen. */
.b2p-stickybar .et_pb_menu.b2p-stickybar__menu {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto;
}

.b2p-stickybar .et_pb_menu__menu > nav > ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.b2p-stickybar .et_pb_menu__menu > nav > ul > li {
    margin: 0;
    padding: 0 11px;
}

.b2p-stickybar .et_pb_menu__menu > nav > ul > li > a {
    padding: 10px 0 !important;
    font-family: var(--b2p-font-display-regular) !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    color: var(--b2p-cream-light) !important;
}

/* Untermenue: unter der Leiste aufklappen, nicht in ihr. */
.b2p-stickybar .et_pb_menu__menu > nav > ul > li > ul {
    top: calc(100% - 6px) !important;
    left: 0;
}

/* Herz-Button ("Unterstuetzen") wie im Header. */
.b2p-stickybar .heartbtn span {
    color: var(--b2p-text) !important;
    border-radius: 46px;
    letter-spacing: 1px;
    font-size: 21px;
    font-family: var(--b2p-font-display) !important;
    background-color: var(--b2p-accent);
    padding: 12px 16px;
    line-height: 1em;
}

.b2p-stickybar .heartbtn span:hover {
    background-color: var(--b2p-cream-light);
}

.b2p-stickybar .heartbtn span:after {
    display: none !important;
}

/* Burger: nur auf dem Handy, siehe Media Query darunter. */
.b2p-stickybar__burger {
    display: none;
    position: relative;
    width: 44px;  /* Apple-Mindestmass fuer Tippflaechen */
    height: 44px;
    flex-shrink: 0;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.b2p-stickybar__burger span {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--b2p-cream-light);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.b2p-stickybar__burger span:nth-child(1) { top: 15px; }
.b2p-stickybar__burger span:nth-child(2) { top: 21px; }
.b2p-stickybar__burger span:nth-child(3) { top: 27px; }

.b2p-stickybar__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.b2p-stickybar__burger.is-open span:nth-child(2) { opacity: 0; }
.b2p-stickybar__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/*
 * Handy: statt des geklonten Desktop-Menues der Burger. Er schaltet Divis
 * Overlay-Menue (style.css, z-index 99999). Die Leiste liegt mit 100000
 * darueber, der Burger bleibt also als Schliessen-Knopf erreichbar.
 */
@media (max-width: 980px) {
    .b2p-stickybar__inner {
        height: 56px;
        padding: 0 16px;
        gap: 16px;
    }

    .b2p-stickybar__logo img {
        height: 26px;
    }

    .b2p-stickybar__menu {
        display: none !important;
    }

    .b2p-stickybar__burger {
        display: block;
    }

    body.admin-bar .b2p-stickybar {
        top: 46px;
    }

    /*
     * Offenes Menue: die Leiste soll auf dem cremefarbenen Overlay nicht als
     * dunkler Balken stehen. Logo weg (es ist hell und waere auf Creme
     * unsichtbar), Burger dunkel wie das X in style.css.
     */
    .b2p-stickybar--menue {
        background: transparent;
        box-shadow: none;
    }

    .b2p-stickybar--menue .b2p-stickybar__logo {
        opacity: 0;
        pointer-events: none;
    }

    .b2p-stickybar--menue .b2p-stickybar__burger span {
        background: var(--b2p-dark);
    }
}

/*
 * Ankerziele (#kontakt, #fotos, ...) landen sonst hinter der Leiste. Der
 * Browser haelt beim Sprung den Abstand frei; wirkt auch bei scrollIntoView.
 */
@media (min-width: 981px) {
    [id] {
        scroll-margin-top: 88px;
    }
}


/* ==========================================================================
   Menue zwischen 981 und 1199px einzeilig (19.10.2026)

   Die sechs Hauptpunkte brauchen bei 21px rund 754px, bei 1024px Fenster-
   breite sind 674px Platz - "Unterstuetzen" rutschte in eine zweite Zeile,
   in der Kopfzeile oben und in dieser Leiste. In diesem Bereich waechst die
   Schrift von 17px (981) bis 21px (ca. 1203) mit, Abstand 7 statt 11px.
   Geprueft bei 981, 990, 1024, 1150 und 1200px.

   "html body" davor, weil die Regel oben (21px !important) dieselbe
   Spezifitaet hat. Die Kopfzeile oben wird ueber .et-l--header erfasst.
   ========================================================================== */

@media (min-width: 981px) and (max-width: 1199px) {
    html body .et-l--header .et_pb_menu ul.et-menu > li > a,
    html body .b2p-stickybar .et_pb_menu__menu > nav > ul > li > a {
        font-size: clamp(17px, calc(17px + (100vw - 981px) * 0.018), 21px) !important;
    }

    html body .et-l--header .et_pb_menu ul.et-menu > li,
    html body .b2p-stickybar .et_pb_menu__menu > nav > ul > li {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}