/* ========================================================
   Navigation – Mobile Footer-Bar
   Shortcode: [wdb_footer_bar]
======================================================== */

.wdb-mobile-bottom-bar {
    display: none !important;
}

@media (max-width: 1024px) {
   
   body {
       padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
   }

    .wdb-mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
         height: calc(80px + env(safe-area-inset-bottom)) !important;
        z-index: 9999 !important;
        background: var(--wdb-color-bg, #AB9962) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-around !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        /* Chrome iOS: eigene Render-Layer verhindert Gap beim Scrollen */
        will-change: transform !important;
        transform: translateZ(0) !important;
    }

    .wdb-bottom-item {
        flex: 1 !important;
        height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        background: var(--wdb-color-bg, #AB9962) !important;
        padding: 10px 4px !important;
    }

    .wdb-bottom-item:hover,
    .wdb-bottom-item.is-active {
        background: var(--wdb-color-bg-hover, #000000) !important;
    }

    .wdb-bottom-item .wdb-icon-wrap {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin: 0 auto;
    }

    .wdb-bottom-item .wdb-icon-wrap svg {
        width: 100%;
        height: 100%;
        fill: var(--wdb-color-icon, #ffffff);
        transition: fill 0.2s ease;
        display: block;
    }

    .wdb-bottom-item:hover .wdb-icon-wrap svg,
    .wdb-bottom-item.is-active .wdb-icon-wrap svg {
        fill: var(--wdb-color-icon-active, #AB9962);
    }

    .wdb-bottom-item .wdb-label {
        font-family: "Neue Haas Unica W1G", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 1.0rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        color: var(--wdb-color-icon, #ffffff);
        display: block;
        margin-top: 5px;
        transition: color 0.2s ease;
    }

    .wdb-bottom-item:hover .wdb-label,
    .wdb-bottom-item.is-active .wdb-label {
        color: var(--wdb-color-icon-active, #AB9962);
    }

    body.wdb-overlay-active {
        overflow: hidden;
    }
}

/* ── Mehr-Button: Hamburger Spin-X Animation ── */
 .wdb-bottom-item[data-slug="mehr"] .wdb-icon-wrap {
     position: relative;
     width: 28px;
     height: 21px;
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
 }

 .wdb-bottom-item[data-slug="mehr"] .wdb-icon-wrap svg {
     display: none !important;
 }

.wdb-hamburger-line {
     display: block;
     position: absolute;
     height: 3px;
     width: 28px;
     background: var(--wdb-color-icon, #ffffff);
     border-radius: 2px;
     left: 0;
     transform-origin: center;
     transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, background 0.2s ease;
 }
 
 /* Hover */
 .wdb-bottom-item[data-slug="mehr"]:hover .wdb-hamburger-line {
     background: var(--wdb-color-icon-active, #AB9962);
 }
 
 /* Aktiv (Overlay offen) */
 .wdb-bottom-item[data-slug="mehr"].is-active .wdb-hamburger-line {
     background: var(--wdb-color-icon-active, #AB9962);
 }

 .wdb-hamburger-line.hl-top { top: 0; }
 .wdb-hamburger-line.hl-mid { top: 9px; }
 .wdb-hamburger-line.hl-bot { top: 18px; }

 .wdb-bottom-item[data-slug="mehr"].is-active .hl-top {
     transform: translateY(9px) rotate(225deg);
 }
 .wdb-bottom-item[data-slug="mehr"].is-active .hl-mid {
     opacity: 0;
     transform: rotate(90deg) scaleX(0);
 }
 .wdb-bottom-item[data-slug="mehr"].is-active .hl-bot {
     transform: translateY(-9px) rotate(-225deg);
 }