/*
 * agentur smile
 * Varieté et cetera – Mobile Header
 * 2026-08-26
 *
 * Nur Smartphone. Desktop bleibt unangetastet.
 */

@media (max-width: 767.98px) {

    body.predefined-header2 #sp-header,
    body.predefined-header2 #sp-header.header-sticky {
        height: 90px !important;
        min-height: 90px !important;
        background: #000 !important;
    }

    body.predefined-header2 #sp-header > .container {
        width: 100% !important;
        max-width: none !important;
        height: 90px !important;
        padding: 0 10px !important;
    }

    body.predefined-header2 #sp-header > .container > .d-flex {
        position: relative !important;
        width: 100% !important;
        height: 90px !important;
        min-height: 90px !important;
        align-items: flex-start !important;
    }

    /* Logo wirklich oben im schwarzen Header */
    body.predefined-header2 #sp-header .logo-area-wrap {
        display: flex !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
        height: 90px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    body.predefined-header2 #sp-header .logo,
    body.predefined-header2 #sp-header .logo > a {
        display: flex !important;
        align-items: flex-start !important;
        height: 90px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.predefined-header2 #sp-header .logo-image {
        display: block !important;
        position: static !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 120px !important;
        max-height: 78px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        object-fit: contain !important;
    }

    /* Desktop-Menü mobil aus */
    body.predefined-header2 #sp-header .sp-megamenu-wrapper {
        display: none !important;
    }

    /* Online-Shop-Modul von SPPB-Layoutresten befreien */
    body.predefined-header2 #sp-header .menu-right-wrap {
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        flex: 0 0 auto !important;
        height: auto !important;
        margin: 0 48px 0 auto !important;
        padding: 0 !important;
    }

    body.predefined-header2 #sp-header .menu-right-wrap > .d-inline-block,
    body.predefined-header2 #sp-header .menu-right-wrap .sp-module,
    body.predefined-header2 #sp-header .menu-right-wrap .sp-module-content,
    body.predefined-header2 #sp-header .menu-right-wrap .sp-page-builder,
    body.predefined-header2 #sp-header .menu-right-wrap .page-content,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-section,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-row-container,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-row,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-column,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-column-addons,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-addon-wrapper,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-addon,
    body.predefined-header2 #sp-header .menu-right-wrap .sppb-addon-content {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    body.predefined-header2 #sp-header
    #sppb-addon-1586955728135 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    body.predefined-header2 #sp-header
    #btn-15869557281350 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 11px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.predefined-header2 #sp-header
    #btn-15869557281350 i {
        margin-right: 6px !important;
    }

    /* Hamburger zuverlässig rechts und sichtbar */
    body.predefined-header2 #sp-header #offcanvas-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        right: 6px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 38px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 27px !important;
        line-height: 1 !important;
        z-index: 50 !important;
    }

    body.predefined-header2 #sp-header #offcanvas-toggler .fa,
    body.predefined-header2 #sp-header #offcanvas-toggler i,
    body.predefined-header2 #sp-header #offcanvas-toggler span {
        color: #fff !important;
        opacity: 1 !important;
        font-size: 27px !important;
    }
}

@media (max-width: 380px) {
    body.predefined-header2 #sp-header .logo-image {
        max-width: 108px !important;
    }

    body.predefined-header2 #sp-header #btn-15869557281350 {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
}