/* =========================================
   RACE-STYLES RESPONSIVE GLOBAL PATCH V6
   Fokus: Header Desktop im Seitenrahmen + größere Topbar-Aktionen
   Lädt nach mobil_styles_v5.css
   ========================================= */

:root {
    --topbar-height: 56px;
    --sidebar-width: 280px;
    --sidebar-desktop-width: 300px;
    --desktop-header-max-width: 1320px;
    --site-wide-max-width: 1320px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---------- TOPBAR ---------- */

#top {
    min-height: var(--topbar-height);
    height: var(--topbar-height);
    padding: 5px 10px;
}

#top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    transform: none !important;
}

#top-actions > a,
#top-actions > div,
.cart-link,
#menu-toggle,
.search-trigger,
.lang-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#top-actions a[href^="tel:"],
.top-hotline-link {
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    font-weight: 700 !important;
    transform: none !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#top-actions a[href^="tel:"] b,
.top-hotline-link b {
    font-weight: 700 !important;
}

#top-actions a[href*="api.whatsapp.com"] img {
    width: 15px !important;
    height: 15px !important;
    display: block;
}

.lang-switch {
    position: relative;
    margin-right: 2px;
}

.lang-current img,
#lang-list li img {
    width: 24px;
    height: auto;
    display: block;
}

#lang-list {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
}

.navicon {
    display: block;
    height: 24px;
    width: auto;
    margin: 0;
}

.menu-icon {
    width: 36px;
    height: 24px;
    object-fit: contain;
}

.cart-link {
    position: relative;
    gap: 6px;
}

#scroll_pu {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100000;
}

#scroll_pu .scroll-logo-img,
#scroll_pu img {
    max-height: 45px;
    width: auto;
    margin: -3px 0 0 5px;
    float: left;
}

/* ---------- HEADERBILD ---------- */

.header {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    line-height: 0;
    margin: 0;
    padding-top: var(--topbar-height);
    background: #fff;
}

.header img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ---------- DESKTOP HEADER: im Seitenrahmen statt 100% Monitor ---------- */

@media (min-width: 1024px) {
    #top {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #top-actions {
        width: 100%;
        max-width: var(--desktop-header-max-width);
        margin: 0 auto !important;
        padding: 0 18px;
        box-sizing: border-box;
        justify-content: flex-end;
        gap: 18px;
    }

    #top-actions a[href^="tel:"],
    .top-hotline-link {
        font-size: 13px !important;
    }

    #top-actions a[href*="api.whatsapp.com"] img {
        width: 18px !important;
        height: 18px !important;
    }

    .lang-current img,
    #lang-list li img {
        width: 28px !important;
    }

    .search-trigger svg {
        width: 28px !important;
        height: 28px !important;
    }

    .navicon {
        height: 28px !important;
    }

    .menu-icon {
        width: 38px !important;
        height: 28px !important;
    }

    .header {
        max-width: var(--desktop-header-max-width);
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden;
    }

    .header img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    body.page-home #page-content-wrapper {
        max-width: var(--desktop-header-max-width) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    :root {
        --desktop-header-max-width: calc(100vw - 32px);
    }
}

/* ---------- SEARCH ---------- */

#mobile-search-overlay {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: 100%;
    z-index: 100000;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.search-input-wrapper {
    display: flex;
    width: min(92%, 760px);
    margin: 8px auto 10px auto;
    align-items: stretch;
    gap: 0;
    background: transparent;
}

#global-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
}

.search-submit-btn {
    flex: 0 0 auto;
    min-width: 96px;
    height: 44px;
}

html.search-open,
body.search-open {
    overflow: hidden !important;
}

/* ---------- WRAPPER / SIDEBAR ---------- */

#wrapper {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

#page-content-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

#sidebar-wrapper {
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    width: var(--sidebar-width);
    margin-left: calc(-1 * var(--sidebar-width));
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0 !important;
}

#sidebar-wrapper .sidebar-nav,
#sidebar-wrapper .sidebar-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar-wrapper .sidebar-nav a {
    text-decoration: none;
}

#sidebar-wrapper .sidebar-main-title,
#sidebar-wrapper .sidebar-sub-title {
    display: inline-block;
    min-width: 0;
}

#sidebar-wrapper .sidebar-sub-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#sidebar-wrapper .sidebar-count {
    flex: 0 0 auto;
    color: #999;
    font-size: 12px;
}

@media (min-width: 1024px) {
    body:not(.page-home) #wrapper {
        display: grid;
        grid-template-columns: var(--sidebar-desktop-width) minmax(0, 1fr);
        gap: 28px;
        width: 100%;
        max-width: var(--site-wide-max-width);
        margin: 0 auto;
        padding: 24px;
        box-sizing: border-box;
        overflow: visible;
    }

    body:not(.page-home) #sidebar-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + 20px);
        left: auto;
        z-index: 10;
        width: var(--sidebar-desktop-width) !important;
        height: calc(100vh - var(--topbar-height) - 40px);
        margin-left: 0 !important;
        overflow-y: auto;
        background: #fff !important;
        box-shadow: none !important;
        border-right: 1px solid #eee;
    }

    body:not(.page-home) #page-content-wrapper {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        min-width: 0;
    }

    /* Header-Safety:
       Der Sidebar-Menübutton darf auf Inhaltsseiten nicht verschwinden.
       Die Sidebar ist inzwischen auch auf Produkt-/Kategorie-Seiten als Overlay nutzbar,
       daher bleibt der Trigger im Header sichtbar. */
    body:not(.page-home) #menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body:not(.page-home) #sidebar-wrapper .sidebar-nav > li > .sidebar-submenu {
        display: none;
    }

    body:not(.page-home) #sidebar-wrapper .sidebar-nav > li.open > .sidebar-submenu,
    body:not(.page-home) #sidebar-wrapper .sidebar-nav > li.active > .sidebar-submenu,
    body:not(.page-home) #sidebar-wrapper .sidebar-nav > li:hover > .sidebar-submenu {
        display: block;
    }

    body.page-home #wrapper {
        display: block;
        max-width: 100%;
        padding: 0;
    }

    body.page-home #sidebar-wrapper {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        width: var(--sidebar-width) !important;
        height: calc(100vh - var(--topbar-height));
        margin-left: calc(-1 * var(--sidebar-width)) !important;
        z-index: 10000;
    }

    body.page-home #wrapper.toggled #sidebar-wrapper {
        margin-left: 0 !important;
    }

    body.page-home #menu-toggle {
        display: inline-flex;
    }
}

/* ---------- FOOTER aus V5 beibehalten ---------- */

@media (min-width: 900px) {
    .footer-inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
    }

    .footer-card-payments {
        grid-column: 1 / -1;
    }

    .footer-card-newsletter {
        padding-top: 0 !important;
    }

    .footer-card-newsletter h5 {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    .footer-card-newsletter .footer-newsletter-text {
        margin-top: 18px !important;
        margin-bottom: 14px !important;
    }

    .footer-card-newsletter .footer-newsletter-form {
        margin-top: 18px !important;
    }

    .footer-card-newsletter .footer-newsletter-privacy {
        margin-top: 14px !important;
    }

    .footer-logos-shipping {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 18px;
    }

    .footer-logos-shipping img,
    .footer-logos-shipping img.shipping {
        max-width: 46px !important;
        max-height: 24px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

    .footer-card-payments {
        margin-top: 8px;
        text-align: center;
    }

    .footer-logos-payments-modern {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        flex-wrap: wrap;
        margin-top: 18px;
    }

    .footer-logos-payments-modern img.footer-payment-logo,
    .footer-logos-payments-modern img.shipping {
        width: auto !important;
        height: auto !important;
        max-height: 38px !important;
        max-width: 115px !important;
        object-fit: contain;
    }

    .footer-logos-payments-modern img.footer-payment-gpay {
        max-height: 46px !important;
        max-width: 145px !important;
    }

    .footer-logos-payments-modern img.footer-payment-paypal {
        max-height: 42px !important;
        max-width: 130px !important;
    }

    .footer-logos-payments-modern img.footer-payment-visa,
    .footer-logos-payments-modern img.footer-payment-applepay,
    .footer-logos-payments-modern img.footer-payment-klarna {
        max-height: 36px !important;
    }
}

@media (max-width: 380px) {
    #top-actions {
        gap: 9px;
    }

    #top-actions a[href^="tel:"] {
        font-size: 10px !important;
    }

    .search-submit-btn {
        min-width: 82px;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================
   HEADER / TOPBAR FEINSCHLIFF V7
   Schwarzer Balken auf Desktop nicht mehr full-width,
   sondern passend zum Header-Container.
   ========================================= */

@media (min-width: 1024px) {
    /* #top kommt aus der Mobile-CSS oft fixed/fullwidth.
       Auf Desktop setzen wir ihn optisch in denselben Rahmen wie das Headerbild. */
    #top {
        width: 100% !important;
        max-width: var(--desktop-header-max-width) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #111 !important;
        box-sizing: border-box;
    }

    #top-actions {
        max-width: none !important;
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Falls ein scrollendes/fixes Logo im schwarzen Balken links sitzt:
       innerhalb des Balkens halten, nicht am Browserrand. */
    #scroll_pu {
        left: calc(50% - (var(--desktop-header-max-width) / 2) + 12px) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    #scroll_pu {
        left: 28px !important;
    }
}


/* =========================================
   V10 SURGICAL FIX
   Nur schwarzer Balken / Scroll-Layer.
   Kein Eingriff in Startseiten-Grid oder Footer.
   ========================================= */

#top {
    position: fixed !important;
    top: 0 !important;
    z-index: 2147483000 !important;
    background: #111 !important;
    opacity: 1 !important;
    isolation: isolate;
    box-shadow: 0 1px 0 rgba(0,0,0,0.22);
}

#top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #111;
    z-index: -1;
    pointer-events: none;
}

#top > *,
#top-actions {
    position: relative;
    z-index: 2;
}

.header {
    position: relative;
    z-index: 1;
}

/* Desktop: Balken bleibt wie in V7 im Header-Rahmen */
@media (min-width: 1024px) {
    #top {
        width: 100% !important;
        max-width: var(--desktop-header-max-width) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #top-actions {
        width: 100% !important;
        max-width: none !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }
}

/* Mobile bleibt full-width */
@media (max-width: 1023px) {
    #top {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================
   V11 MICRO FIX
   Scroll-Logo korrekt im Headerrahmen + Newsletter-Inhalt 10px tiefer
   Baut auf dem funktionierenden V10-Stand auf.
   ========================================= */

/* Scroll-Logo: innerhalb des schwarzen Desktop-Balkens sauber links ausrichten */
@media (min-width: 1024px) {
    #scroll_pu {
        position: fixed !important;
        top: 8px !important;
        left: calc(50% - (var(--desktop-header-max-width) / 2) + 14px) !important;
        z-index: 2147483001 !important;
        margin: 0 !important;
        transform: none !important;
    }

    #scroll_pu img,
    #scroll_pu .scroll-logo-img {
        display: block !important;
        max-height: 38px !important;
        width: auto !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* Bei Laptop-Breiten, wo der Header fast volle Breite nutzt */
@media (min-width: 1024px) and (max-width: 1360px) {
    #scroll_pu {
        left: 30px !important;
    }
}

/* Mobile: bisheriges Verhalten beibehalten */
@media (max-width: 1023px) {
    #scroll_pu {
        left: 10px !important;
        top: 8px !important;
    }
}

/* Footer: Newsletter-Überschrift oben lassen, nur Inhalt ca. 10px tiefer */
@media (min-width: 900px) {
    #footer .footer-card-newsletter {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #footer .footer-card-newsletter h5 {
        margin-top: 0 !important;
        margin-bottom: 22px !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-text {
        margin-top: 10px !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-form {
        margin-top: 10px !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-privacy {
        margin-top: 14px !important;
    }
}


/* =========================================
   V16 FOOTER FINAL
   Newsletter-Abstand final ohne Debug-Outline.
   Header/Startseite bleiben auf stabilem V11-Stand.
   ========================================= */

@media (min-width: 900px) {
    #footer.footer-app {
        max-width: var(--desktop-header-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #footer .footer-card-newsletter {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #footer .footer-card-newsletter h5,
    #footer-newsletter-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    /* Finaler Newsletter-Abstand.
       100px war der Debug-Test; 62px ist der realistische Zwischenwert. */
    #footer .footer-card-newsletter .footer-newsletter-desktop-gap {
        display: block !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        line-height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
        background: transparent !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-body {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-text {
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        line-height: 1.45 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-form {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-input,
    #footer .footer-card-newsletter .footer-newsletter-button {
        height: 38px !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-privacy {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        line-height: 1.45 !important;
    }

    #footer .footer-logos-shipping img.shipping {
        max-width: 40px !important;
        max-height: 20px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-logo {
        width: auto !important;
        height: auto !important;
        max-height: 42px !important;
        max-width: 135px !important;
        object-fit: contain !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-gpay {
        max-height: 58px !important;
        max-width: 175px !important;
    }

    #copyright.footer-copyright {
        max-width: var(--desktop-header-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #copyright.footer-copyright .small {
        max-width: var(--desktop-header-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================
   V17 FOOTER FINAL TUNING
   Ganze Newsletter-Spalte eine Zeile tiefer,
   rote Linie läuft mit, innerer Abstand reduziert.
   ========================================= */

@media (min-width: 900px) {
    /* Ganze Newsletter-Spalte nach unten.
       Dadurch rutschen Überschrift UND rote Linie gemeinsam. */
    #footer .footer-card-newsletter {
        position: relative !important;
        top: 18px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #footer .footer-card-newsletter h5,
    #footer-newsletter-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    /* Weil die ganze Spalte 18px tiefer ist,
       reduzieren wir den inneren Spacer von 62px auf 44px. */
    #footer .footer-card-newsletter .footer-newsletter-desktop-gap {
        display: block !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        line-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-body {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-text {
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        line-height: 1.45 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-form {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-input,
    #footer .footer-card-newsletter .footer-newsletter-button {
        height: 38px !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-privacy {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        line-height: 1.45 !important;
    }

    /* Rote Spaltenlinie: kommt aus border-left.
       Für Newsletter bleibt sie an der Spalte und rutscht mit top:18px mit. */
    #footer .footer-card-newsletter {
        border-left-color: #e30613 !important;
    }

    /* Copyright-Balken weiterhin auf Shop-Rahmen begrenzen */
    #copyright.footer-copyright {
        max-width: var(--desktop-header-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}


/* =========================================
   V18 FOOTER MICRO-TUNING
   Newsletter: rote Linie 1 Zeile tiefer,
   Newsletter-Text/Formular ca. 1 Zeile höher.
   ========================================= */

@media (min-width: 900px) {
    /* Newsletter-Spalte bleibt insgesamt auf V17-Position */
    #footer .footer-card-newsletter {
        position: relative !important;
        top: 18px !important;
        border-left-color: transparent !important;
    }

    /* Eigene rote Linie statt der alten border-left:
       dadurch kann die Linie unabhängig vom Inhalt tiefer starten. */
    #footer .footer-card-newsletter::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 34px !important;
        bottom: 0 !important;
        width: 2px !important;
        background: #e30613 !important;
        display: block !important;
        pointer-events: none !important;
    }

    /* Text/Formular höher: V17 hatte 44px, jetzt 24px */
    #footer .footer-card-newsletter .footer-newsletter-desktop-gap {
        display: block !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-text {
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        line-height: 1.45 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-form {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* =========================================
   V19 MICRO FIX
   Footer-Newsletter-Linie angleichen
   Sidebar auf Desktop am Container öffnen lassen
   ========================================= */

@media (min-width: 900px) {
    /* Newsletter-Linie optisch an die anderen roten Footer-Linien angleichen */
    #footer .footer-card-newsletter {
        border-left-color: transparent !important;
    }

    #footer .footer-card-newsletter::before {
        width: 3px !important;
        background: #e30613 !important;
    }
}

/* Desktop: Offcanvas-Sidebar öffnet am linken Rand des zentrierten Shops,
   nicht ganz außen am Browserrand. */
@media (min-width: 1024px) {
    body.page-home #sidebar-wrapper {
        left: calc(50% - (var(--desktop-header-max-width) / 2)) !important;
        margin-left: calc(-1 * var(--sidebar-width)) !important;
    }

    body.page-home #wrapper.toggled #sidebar-wrapper {
        margin-left: 0 !important;
    }
}

/* Bei Laptop-Breiten, wo der Header fast volle Breite nutzt,
   bleibt links ein kleiner sauberer Rand. */
@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-home #sidebar-wrapper {
        left: 16px !important;
    }
}

/* Mobile/Tablet bleibt wie gewohnt ganz links */
@media (max-width: 1023px) {
    body.page-home #sidebar-wrapper {
        left: 0 !important;
    }
}


/* =========================================
   V20 SIDEBAR FIX
   Geschlossen komplett aus dem Viewport.
   Geöffnet am linken Rand des zentrierten Shops.
   Immer im Vordergrund.
   ========================================= */

/* Basis: Sidebar liegt über Content/Footer, aber unter der Topbar */
body.page-home #sidebar-wrapper {
    position: fixed !important;
    top: var(--topbar-height) !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--topbar-height)) !important;
    z-index: 2147482500 !important;
    background: #fff !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;
    transition: left 0.28s ease, transform 0.28s ease !important;
}

/* Desktop geschlossen: komplett links aus dem sichtbaren Bereich */
@media (min-width: 1024px) {
    body.page-home #sidebar-wrapper {
        left: 0 !important;
        margin-left: 0 !important;
        transform: translateX(-105%) !important;
    }

    /* Desktop geöffnet: am linken Rand des zentrierten Header/Content-Rahmens */
    body.page-home #wrapper.toggled #sidebar-wrapper {
        left: calc(50% - (var(--desktop-header-max-width) / 2)) !important;
        margin-left: 0 !important;
        transform: translateX(0) !important;
    }
}

/* Laptop-Breiten: Header nutzt fast volle Breite, daher 16px Rand */
@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-home #wrapper.toggled #sidebar-wrapper {
        left: 16px !important;
    }
}

/* Mobile/Tablet: gewohnt full-left offcanvas */
@media (max-width: 1023px) {
    body.page-home #sidebar-wrapper {
        left: 0 !important;
        margin-left: 0 !important;
        transform: translateX(-105%) !important;
    }

    body.page-home #wrapper.toggled #sidebar-wrapper {
        left: 0 !important;
        margin-left: 0 !important;
        transform: translateX(0) !important;
    }
}

/* Optionaler Schutz: Sidebar-Inhalt immer über möglichem Page-Content */
body.page-home #sidebar-wrapper *,
body.page-home #sidebar-wrapper .sidebar-nav {
    position: relative;
    z-index: 1;
}


/* =========================================
   V21 SIDEBAR ANIMATION FIX
   Sidebar fliegt auf Desktop nicht mehr vom linken Browserrand,
   sondern direkt vom linken Rand des schwarzen Header-/Shop-Balkens.
   Geschlossen unsichtbar, geöffnet sauber im Vordergrund.
   ========================================= */

body.page-home #sidebar-wrapper {
    position: fixed !important;
    top: var(--topbar-height) !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--topbar-height)) !important;
    z-index: 2147482500 !important;
    background: #fff !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
    transition:
        transform 0.26s ease,
        opacity 0.18s ease,
        visibility 0.18s ease !important;
}

/* Desktop: Position ist immer am linken Rand des zentrierten Shops.
   Geschlossen wird die Sidebar nur direkt nach links aus diesem Rahmen geschoben
   und zusätzlich unsichtbar gesetzt. Dadurch sieht man kein langes Reinfliegen
   vom Browserrand. */
@media (min-width: 1024px) {
    body.page-home #sidebar-wrapper {
        left: calc(50% - (var(--desktop-header-max-width) / 2)) !important;
        margin-left: 0 !important;
        transform: translateX(-102%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.page-home #wrapper.toggled #sidebar-wrapper {
        left: calc(50% - (var(--desktop-header-max-width) / 2)) !important;
        margin-left: 0 !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Laptop-Breiten: gleicher Effekt, nur mit 16px Rahmenrand */
@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-home #sidebar-wrapper,
    body.page-home #wrapper.toggled #sidebar-wrapper {
        left: 16px !important;
    }
}

/* Mobile/Tablet: klassisches Offcanvas von ganz links */
@media (max-width: 1023px) {
    body.page-home #sidebar-wrapper {
        left: 0 !important;
        margin-left: 0 !important;
        transform: translateX(-102%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.page-home #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


/* =========================================
   V22 WHITE OUTER FRAME
   Dunklen Außenrahmen deaktivieren.
   Nur Topbar bleibt schwarz, Rest bleibt weiß.
   ========================================= */

@media (min-width: 1024px) {
    html,
    body {
        background: #fff !important;
    }

    #top {
        background: #111 !important;
    }

    #top::before {
        background: #111 !important;
    }

    .header,
    #wrapper,
    body.page-home #page-content-wrapper,
    #footer.footer-app,
    #copyright.footer-copyright {
        background: #fff !important;
    }
}


/* =========================================
   V23 FOOTER MICRO FIX
   Buttontext 2px höher, Lieferlogos +10% linksbündig,
   Zahlungslogos kleiner außer G Pay.
   ========================================= */

@media (min-width: 900px) {
    /* Newsletter Button: Text 2px höher */
    #footer .footer-newsletter-button,
    #footer .footer-card-newsletter .footer-newsletter-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding-top: 0 !important;
        padding-bottom: 2px !important;
        transform: translateY(-2px) !important;
    }

    /* Lieferlogos: linksbündig und ca. 10% größer */
    #footer .footer-card-shipping .footer-logos-shipping,
    #footer .footer-logos-shipping {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 11px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    #footer .footer-card-shipping .footer-logos-shipping img.shipping,
    #footer .footer-logos-shipping img.shipping {
        max-width: 44px !important;
        max-height: 22px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Zahlungslogos insgesamt etwas kleiner */
    #footer .footer-logos-payments-modern {
        gap: 20px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-logo {
        max-height: 34px !important;
        max-width: 112px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-paypal {
        max-height: 34px !important;
        max-width: 105px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-visa {
        max-height: 36px !important;
        max-width: 118px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-applepay {
        max-height: 34px !important;
        max-width: 105px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-klarna {
        max-height: 34px !important;
        max-width: 105px !important;
    }

    /* G Pay bleibt bewusst präsenter */
    #footer .footer-logos-payments-modern img.footer-payment-gpay {
        max-height: 42px !important;
        max-width: 135px !important;
    }
}


/* =========================================
   V24 FOOTER MICRO FIX
   Newsletter 2px höher, Newsletter-Input/Button Border sauber,
   Lieferlogos an Textkante + größer,
   Zahlungslogos kleiner außer G Pay.
   ========================================= */

@media (min-width: 900px) {
    /* Newsletter-Überschrift 2px höher */
    #footer .footer-card-newsletter h5,
    #footer-newsletter-title {
        position: relative !important;
        top: -2px !important;
    }

    /* Newsletter Input + Button: saubere gemeinsame Kante */
    #footer .footer-card-newsletter .footer-newsletter-form {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-input {
        height: 38px !important;
        min-height: 38px !important;
        line-height: 38px !important;
        box-sizing: border-box !important;
        border: 1px solid #d8d8d8 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 14px !important;
        background: #fff !important;
        box-shadow: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #footer .footer-card-newsletter .footer-newsletter-button {
        height: 38px !important;
        min-height: 38px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        border: 1px solid #111 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 18px 2px 18px !important;
        background: #111 !important;
        color: #fff !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Lieferlogos: an Textkante der Liefer-Spalte ausrichten und nochmals ca. 10% größer */
    #footer .footer-card-shipping .footer-logos-shipping,
    #footer .footer-logos-shipping {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 22px !important;
    }

    #footer .footer-card-shipping .footer-logos-shipping img.shipping,
    #footer .footer-logos-shipping img.shipping {
        max-width: 49px !important;
        max-height: 25px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Zahlungslogos etwas kleiner, außer G Pay */
    #footer .footer-logos-payments-modern {
        gap: 18px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-logo {
        width: auto !important;
        height: auto !important;
        max-height: 30px !important;
        max-width: 98px !important;
        object-fit: contain !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-paypal {
        max-height: 30px !important;
        max-width: 92px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-visa {
        max-height: 32px !important;
        max-width: 104px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-applepay {
        max-height: 30px !important;
        max-width: 96px !important;
    }

    #footer .footer-logos-payments-modern img.footer-payment-klarna {
        max-height: 30px !important;
        max-width: 98px !important;
    }

    /* G Pay bleibt größer/präsenter */
    #footer .footer-logos-payments-modern img.footer-payment-gpay {
        max-height: 42px !important;
        max-width: 135px !important;
    }
}


/* =========================================
   V26 FOOTER MICRO FIX
   Lieferlogos Richtung korrigiert:
   +29px statt -29px, weil das Footer-Layout den Versatz optisch invertiert.
   ========================================= */

@media (min-width: 900px) {
    #footer .footer-card-shipping .footer-logos-shipping,
    #footer .footer-logos-shipping {
        margin-left: 29px !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #footer .footer-card-shipping .footer-logos-shipping img.shipping,
    #footer .footer-logos-shipping img.shipping {
        max-width: 54px !important;
        max-height: 28px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* =========================================
   V27 GLOBAL CONTENT-FOOTER SPACING
   Mehr Abstand zwischen Content und Footer.
   Gilt zentral für Service-Seiten und Startseite.
   ========================================= */

/* Service-Seiten: Kontakt, Kontaktformular, später Suche/Warenkorb/Service */
#page-content-wrapper.service-page {
    padding-bottom: 82px !important;
}

@media (min-width: 1024px) {
    #page-content-wrapper.service-page {
        padding-bottom: 104px !important;
    }
}

/* Startseite / News ebenfalls mit mehr Luft zum Footer */
body.page-home #page-content-wrapper {
    padding-bottom: 82px !important;
}

@media (min-width: 1024px) {
    body.page-home #page-content-wrapper {
        padding-bottom: 104px !important;
    }
}

/* Falls einzelne Seiten eigene Abschlussblöcke haben, Abstand nicht kollabieren lassen */
#page-content-wrapper.service-page > :last-child,
body.page-home #page-content-wrapper > :last-child {
    margin-bottom: 0 !important;
}


/* =========================================
   V28 GLOBAL CONTENT-FOOTER SPACING FIX
   Stärkere Selektoren, damit nachgeladene Page-CSS
   mit padding: ... !important den Footer-Abstand nicht überschreibt.
   ========================================= */

/* Service-Seiten konkret: stärker als body.page-contact #page-content-wrapper */
body.page-contact #page-content-wrapper.service-page,
body.page-contact-form #page-content-wrapper.service-page {
    padding-bottom: 82px !important;
}

@media (min-width: 1024px) {
    body.page-contact #page-content-wrapper.service-page,
    body.page-contact-form #page-content-wrapper.service-page {
        padding-bottom: 104px !important;
    }
}

/* Allgemeiner Fallback für kommende Service-Seiten */
body #page-content-wrapper.service-page {
    padding-bottom: 82px !important;
}

@media (min-width: 1024px) {
    body #page-content-wrapper.service-page {
        padding-bottom: 104px !important;
    }
}

/* Startseite bleibt separat */
body.page-home #page-content-wrapper {
    padding-bottom: 82px !important;
}

@media (min-width: 1024px) {
    body.page-home #page-content-wrapper {
        padding-bottom: 104px !important;
    }
}