/* ==========================================================
   IHR-WERBEDRUCK – EXPRESS HEADER V18
   Ziel: Mockup / PLUS-Header gespiegelt
   - Alter EXPRESS-Wimpel / Produktionszeit-Block entfernt
   - Originale login-header Struktur bleibt als Funktionsquelle erhalten
   - PayPal entfernt
   - EXPRESS aktiv (rot), PLUS inaktiv (grau)
   - Mail links / Telefon rechts
   - Login/Warenkorb grau wie PLUS
   - rote Navigation vollflächig
   ========================================================== */

@media (min-width: 900px) {

    /* ------------------------------------------------------
       HAUPTBREITE / LAYOUT
       ------------------------------------------------------ */
    #evo-nav-wrapper .mobile-container {
        width: 1240px !important;
        max-width: 1240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #evo-nav-wrapper #header-branding {
        width: 100% !important;
        max-width: none !important;
    }

    .logo-shop-nav.iwd-header-layout {
        display: grid !important;
        grid-template-columns: 265px 330px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px 6px !important;
        box-sizing: border-box !important;
    }

    .iwd-header-logo {
        align-self: start !important;
        padding-top: 1px !important;
    }

    .iwd-header-logo .desktop-logo {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 260px !important;
        max-height: 72px !important;
    }

    .iwd-header-logo .mobile-logo {
        display: none !important;
    }


    /* ------------------------------------------------------
       SHOP-SWITCHER – gleiche Größenlogik wie PLUS-Shop,
       nur Rollen vertauscht
       ------------------------------------------------------ */
    .iwd-shop-switcher {
        width: 330px !important;
        max-width: 330px !important;
    }

    .iwd-shop-switcher-row {
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .iwd-shopbox {
        position: relative !important;
        display: block !important;
        flex: 0 0 161px !important;
        width: 161px !important;
        min-width: 161px !important;
        height: 78px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    .iwd-shopbox-top {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 6px 9px !important;
        box-sizing: border-box !important;
    }

    .iwd-shopbox-icon {
        display: flex !important;
        flex: 0 0 37px !important;
        width: 37px !important;
        height: 37px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .iwd-shopbox-icon img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 37px !important;
        max-height: 37px !important;
    }

    .iwd-shopbox-copy {
        min-width: 0 !important;
        line-height: 1 !important;
    }

    .iwd-shopbox-copy strong {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-copy span {
        display: block !important;
        margin-top: 3px !important;
        padding: 0 !important;
        font-size: 8.8px !important;
        font-weight: 400 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 3px 6px !important;
        box-sizing: border-box !important;
        font-size: 8.8px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* EXPRESS = aktiver Shop */
    .iwd-shopbox-express {
        border: 1px solid #cf2530 !important;
        background: #fff !important;
    }

    .iwd-shopbox-express .iwd-shopbox-top {
        background: #cf2530 !important;
    }

    .iwd-shopbox-express .iwd-shopbox-copy strong,
    .iwd-shopbox-express .iwd-shopbox-copy span {
        color: #fff !important;
    }

    .iwd-shopbox-express .iwd-express-icon img {
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current {
        background: #fff !important;
        color: #cf2530 !important;
        border-top: 1px solid rgba(207,37,48,.18) !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current .fa,
    .iwd-shopbox-express .iwd-shopbox-current span {
        color: #cf2530 !important;
    }

    /* PLUS = Wechselziel */
    .iwd-shopbox-plus {
        border: 1px solid #bfc0c2 !important;
        background: #fff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-top {
        background: #fff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-copy strong {
        color: #666 !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-copy span {
        color: #8a8a8a !important;
    }

    .iwd-shopbox-plus .iwd-plus-icon img {
        opacity: .62 !important;
        filter: grayscale(1) !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-target {
        background: #f28c00 !important;
        color: #fff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-target span,
    .iwd-shopbox-plus .iwd-shopbox-target .fa {
        color: #fff !important;
    }


    /* ------------------------------------------------------
       RECHTE SPALTE
       Platz rechts bleibt für den ORIGINALEN schwarzen
       login-header mit seiner vorhandenen Rundung frei.
       ------------------------------------------------------ */
    .iwd-header-right {
        min-width: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .iwd-header-contact-slot {
        display: block !important;
        min-height: 19px !important;
        margin: 0 0 4px 0 !important;
    }

    .iwd-header-contact {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 25px !important;
        height: 19px !important;
        white-space: nowrap !important;
    }

    .iwd-header-contact span,
    .iwd-header-contact a,
    .iwd-header-contact i {
        color: #333333 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 19px !important;
        text-decoration: none !important;
    }

    .iwd-header-tools-row {
        display: grid !important;
        grid-template-columns: minmax(245px, 1fr) 36px 40px !important;
        column-gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ------------------------------------------------------
       SUCHE
       ------------------------------------------------------ */
    .iwd-header-shopnav {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .iwd-header-shopnav > ul.header-shop-nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .iwd-header-shopnav #search {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        width: 100% !important;
        margin: 0 !important;
    }

    .iwd-header-shopnav #search .form-control {
        height: 36px !important;
        padding: 7px 11px !important;
        border: 1px solid #bdbdbd !important;
        border-radius: 3px 0 0 3px !important;
        box-shadow: none !important;
        font-size: 13px !important;
    }

    .iwd-header-shopnav #search .input-group-addon {
        width: 42px !important;
        min-width: 42px !important;
        height: 36px !important;
        padding: 0 !important;
        border: 1px solid #8d8d8d !important;
        background: #8d8d8d !important;
    }

    .iwd-header-shopnav #search button {
        width: 100% !important;
        height: 34px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #fff !important;
    }


    /* ------------------------------------------------------
       LOGIN + WARENKORB – native Funktion bleibt erhalten,
       nur Darstellung wie im PLUS-Shop
       ------------------------------------------------------ */
    .iwd-header-account-slot,
    .iwd-header-cart-slot {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .iwd-header-account-slot {
        list-style: none !important;
    }

    .iwd-header-account-slot .li-login,
    .iwd-header-cart-slot .cart-heade,
    .iwd-header-cart-slot .cart-heade > ul,
    .iwd-header-cart-slot .cart-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .iwd-header-account-slot .li-login > a.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #555 !important;
        text-decoration: none !important;
    }

    .iwd-header-account-slot .li-login > a.dropdown-toggle .fa-user {
        margin: 0 !important;
        color: #555 !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    .iwd-header-account-slot .li-login > a.dropdown-toggle > span:not(.fa-user),
    .iwd-header-account-slot .li-login > a.dropdown-toggle > .caret {
        display: none !important;
    }

    .iwd-header-account-slot .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        z-index: 9999 !important;
    }

    .iwd-header-cart-slot .cart-menu > a,
    .iwd-header-cart-slot .cart-menu > a.dropdown-toggle {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: transparent !important;
        font-size: 0 !important;
        overflow: visible !important;
        text-decoration: none !important;
    }

    .iwd-header-cart-slot .cart-menu > a:before,
    .iwd-header-cart-slot .cart-menu > a.dropdown-toggle:before {
        content: "\f07a" !important;
        display: inline-block !important;
        font-family: FontAwesome !important;
        color: #555 !important;
        font-size: 24px !important;
        font-style: normal !important;
        font-weight: normal !important;
        line-height: 1 !important;
    }

    .iwd-header-cart-slot .cart-menu > a > i,
    .iwd-header-cart-slot .cart-menu > a > svg,
    .iwd-header-cart-slot .cart-menu > a > span:not(.badge) {
        display: none !important;
    }

    .iwd-header-cart-slot .cart-menu .badge {
        position: absolute !important;
        top: -3px !important;
        right: -5px !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 1px 4px !important;
        border-radius: 9px !important;
        background: #cf2530 !important;
        color: #fff !important;
        font-size: 9px !important;
        line-height: 14px !important;
    }

    .iwd-header-cart-slot .cart-menu .badge em {
        color: #fff !important;
        font-size: 9px !important;
        font-style: normal !important;
    }


    /* ------------------------------------------------------
       ORIGINALER SCHWARZER RECHTSBLOCK + ORIGINAL-WIMPEL
       ------------------------------------------------------
       Wichtig: KEINE eigene border-radius-Konstruktion hier.
       Die Form kommt wieder aus der bereits vorhandenen
       IhrWerbedruck-Template-CSS von .login-header.
       ------------------------------------------------------ */

    /* alten Kontakt dort nur ausblenden – die Geometrie/Form
       des Originalblocks selbst wird NICHT überschrieben */
    #evo-nav-wrapper .login-header .email-tel {
        display: none !important;
    }

    /* Login wird in die graue Icon-Position verschoben;
       Impressum kann im Originalbereich bestehen bleiben. */
    #evo-nav-wrapper .login-header .iwd-original-production-host {
        display: block !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
    }

    #evo-nav-wrapper .login-header .iwd-original-production-host .header-paypal {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* PayPal bleibt draußen – falls td-3 wider Erwarten doch noch
       aus einem Cache kommt, wird es hier zusätzlich abgesichert. */
    #evo-nav-wrapper .login-header .header-paypal-td.td-3 {
        display: none !important;
    }

    /* Original-Wimpel / .wirsindschnell / .rotate-text werden
       absichtlich NICHT neu gezeichnet und NICHT transformiert. */

    /* Produktionsschrift auf dem schwarzen Originalblock lesbar */
    #evo-nav-wrapper .login-header .header-paypal-td.td-2 p {
        color: #fff !important;
    }

    #evo-nav-wrapper .login-header .header-paypal-td.td-2 span {
        color: #ff2f38 !important;
    }


    /* ------------------------------------------------------
       ROTE KATEGORIENLEISTE – Originalmenü, aber Fläche
       wirklich bis an beide Viewport-Ränder
       ------------------------------------------------------ */
    #navbarCategories {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #cf2530 !important;
        box-shadow: 0 0 0 100vmax #cf2530 !important;
        clip-path: inset(0 -100vmax) !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu {
        background: #cf2530 !important;
        border: 0 !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 50px !important;
        margin: 0 auto !important;
        padding: 0 8px !important;
        background: #cf2530 !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li {
        flex: 0 0 auto !important;
        margin: 0 !important;
        background: transparent !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a {
        min-height: 50px !important;
        padding-top: 7px !important;
        padding-bottom: 5px !important;
        color: #fff !important;
        background: transparent !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a *,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a .fa {
        color: #fff !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a img {
        filter: brightness(0) invert(1) !important;
    }

}


/* ==========================================================
   TABLET / MOBILE
   Bestehende JTL-Struktur bleibt unangetastet; die per JS
   vorgenommenen Verschiebungen laufen dort bewusst nicht.
   ========================================================== */
@media (max-width: 899px) {
    .iwd-shop-switcher,
    .iwd-header-contact-slot {
        display: none !important;
    }

    .logo-shop-nav.iwd-header-layout {
        display: block !important;
    }

    .iwd-header-right {
        padding: 0 !important;
    }
}


/* ==========================================================
   V7 – gezielte Korrekturen auf Basis des ORIGINAL-Headers
   ========================================================== */
@media (min-width: 900px) {

    /* ------------------------------------------------------
       1. RECHTS OBEN: Impressum/Leerzeile entfernen,
          Original-Wimpel ganz nach oben ziehen
       ------------------------------------------------------ */
    #evo-nav-wrapper .login-header .li-cms,
    #evo-nav-wrapper .login-header .cms-pages,
    #evo-nav-wrapper .login-header .ul-login {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #evo-nav-wrapper .login-header .login-header-block,
    #evo-nav-wrapper .login-header .lh-right {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #evo-nav-wrapper .login-header .iwd-original-production-host {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #evo-nav-wrapper .login-header .iwd-original-production-host .header-paypal,
    #evo-nav-wrapper .login-header .iwd-original-production-host .header-paypal-table {
        margin-top: 0 !important;
        top: 0 !important;
    }

    /* ------------------------------------------------------
       2. SWITCHER – Maße/Schrift näher 1:1 zum PLUS-Shop
       ------------------------------------------------------ */
    .iwd-shop-switcher {
        width: 332px !important;
        max-width: 332px !important;
        font-family: "Open Sans", Arial, sans-serif !important;
    }

    .iwd-shop-switcher-row {
        gap: 8px !important;
    }

    .iwd-shopbox {
        flex: 0 0 162px !important;
        width: 162px !important;
        min-width: 162px !important;
        height: 80px !important;
        border-radius: 10px !important;
        font-family: "Open Sans", Arial, sans-serif !important;
    }

    .iwd-shopbox-top {
        height: 55px !important;
        min-height: 55px !important;
        padding: 6px 9px !important;
        gap: 8px !important;
    }

    .iwd-shopbox-icon {
        flex: 0 0 39px !important;
        width: 39px !important;
        height: 39px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .iwd-shopbox-icon img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 39px !important;
        max-height: 39px !important;
        margin: 0 !important;
    }

    .iwd-shopbox-copy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        font-family: "Open Sans", Arial, sans-serif !important;
    }

    .iwd-shopbox-copy strong {
        display: block !important;
        margin: 0 !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    .iwd-shopbox-copy span {
        display: block !important;
        margin-top: 3px !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 9px !important;
        font-weight: 400 !important;
        line-height: 1.05 !important;
    }

    .iwd-shopbox-bottom {
        height: 25px !important;
        min-height: 25px !important;
        padding: 2px 6px !important;
        gap: 4px !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    /* Das PLUS-Logo ist im Original weiß für den roten PLUS-Button.
       Für die graue/inaktive Variante wird es explizit grau eingefärbt. */
    .iwd-shopbox-plus .iwd-plus-icon img {
        display: block !important;
        visibility: visible !important;
        opacity: .52 !important;
        filter: brightness(0) saturate(0) !important;
    }

    /* Fallback, falls die externe Grafik einmal nicht geladen wird */
    .iwd-shopbox-plus .iwd-plus-icon {
        position: relative !important;
    }

    .iwd-shopbox-plus .iwd-plus-icon:after {
        content: "\f0ac" !important;
        position: absolute !important;
        inset: 0 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 35px !important;
        height: 35px !important;
        margin: auto !important;
        border: 2px solid #777 !important;
        border-radius: 50% !important;
        color: #777 !important;
        font-family: FontAwesome !important;
        font-size: 23px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------
       3. ROTE NAVIGATION: Texte + SVG/IMG-Icons WEISS
       ------------------------------------------------------ */
    #navbarCategories,
    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float {
        background-color: #cf2530 !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper {
        background: transparent !important;
        color: #fff !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a:link,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a:visited,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a:hover,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a:focus,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a span,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper > a .caret {
        color: #fff !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper > a > .img-wrapper > img,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a > .img-wrapper > img {
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
    }

    /* ------------------------------------------------------
       4. Kleine Feinausrichtung Login/Warenkorb
       ------------------------------------------------------ */
    .iwd-header-account-slot,
    .iwd-header-cart-slot {
        align-self: center !important;
        margin-top: 1px !important;
    }
}


/* ==========================================================
   V8 – Button-Texte / Typografie
   ========================================================== */
@media (min-width: 900px) {
    /* Unterzeilen im oberen Button-Bereich: etwas größer,
       aber bewusst nicht fetter. */
    .iwd-shopbox-copy span {
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1.08 !important;
    }

    /* Unterer Status-/Wechselbalken: etwas größer und kräftiger. */
    .iwd-shopbox-bottom {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .iwd-shopbox-bottom span,
    .iwd-shopbox-bottom .fa {
        font-weight: 700 !important;
    }

    /* Etwas weniger Innenabstand, damit die längeren neuen Texte
       bei gleicher Button-Größe sicher einzeilig bleiben. */
    .iwd-shopbox-bottom {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 3px !important;
    }
}

/* ==========================================================
   V9 – Produktionshinweis in die Topbar verlagert
   - alter schwarzer EXPRESS-Produktionsblock vollständig ausblenden
   - freigewordenen Platz im rechten Header wieder nutzen
   ========================================================== */
/* Fallback: Der alte Produktionszeit-Block darf auch dann nicht
   sichtbar werden, falls er vom Shop-Nav noch ausgegeben wird. */
#evo-nav-wrapper .iwd-header-shopnav .header-paypal {
    display: none !important;
}

@media (min-width: 900px) {
    /* Die native login-header-Hülle wird nach dem Verschieben von
       Login/Warenkorb nicht mehr als schwarzer Block angezeigt. */
    #evo-nav-wrapper .login-header {
        display: none !important;
    }

    .iwd-header-right {
        padding-right: 0 !important;
    }
}


/* ==========================================================
   V10 – Feinkorrektur
   - Kontaktzeile schwarz statt rot
   - temporäre Ausblendung der ersten beiden Menüpunkte entfernt
   ========================================================== */

/* ==========================================================
   V11 – Feinkorrekturen 24.09.2026
   - EXPRESS-SHOP Titel etwas kleiner
   - Kontaktzeile etwas größer
   - Suchfeld kompakter
   - Topbar über volle Viewport-Breite
   - Dropdown-Menüs der roten Navigation wieder vollständig sichtbar
   ========================================================== */
@media (min-width: 900px) {

    /* Der Header selbst darf nicht durch eine alte container-block-Breite
       am rechten Fensterrand abgeschnitten werden. */
    #evo-nav-wrapper {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* Schwarze Benefit-Leiste über die komplette Breite. */
    #evo-nav-wrapper .header-top {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: #333333 !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper .header-top .above-header {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }

    /* EXPRESS-SHOP war optisch etwas zu groß gegenüber PLUS-SHOP. */
    .iwd-shopbox-express .iwd-shopbox-copy strong {
        font-size: 14px !important;
    }

    /* Kontakt wieder etwas präsenter, aber weiterhin schwarz/dunkel. */
    .iwd-header-contact span,
    .iwd-header-contact a,
    .iwd-header-contact i {
        color: #333333 !important;
        font-size: 13px !important;
        line-height: 19px !important;
    }

    /* Suche etwas kompakter, damit Kontakt + Icons besser gewichtet sind. */
    .iwd-header-tools-row {
        grid-template-columns: 340px 36px 40px !important;
        justify-content: start !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search {
        width: 340px !important;
        max-width: 340px !important;
    }

    /* Die bisherige clip-path-Lösung hat die aufklappenden Megamenüs
       vertikal abgeschnitten. Hintergrund bleibt rot, Dropdowns dürfen
       wieder über die Leiste hinausreichen. */
    #navbarCategories {
        clip-path: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 10000 !important;
    }

    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper {
        overflow: visible !important;
    }

    #navbarCategories .dropdown-menu {
        z-index: 10020 !important;
    }

    /* Der Navigationsbereich muss vor Stage/Content liegen, wenn ein
       Dropdown geöffnet ist. */
    #evo-nav-wrapper,
    #evo-nav-wrapper .container-header,
    #navbarCategories,
    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav {
        position: relative !important;
    }

    #navbarCategories,
    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav {
        z-index: 10000 !important;
    }
}

/* ==========================================================
   V12 – finale Header-Korrekturen
   - Produktionszeit sicher an erster Stelle
   - EXPRESS-Titel kompakter
   - Kontakt etwas größer, Suche etwas schmaler
   - Topbar wirklich über volle Viewport-Breite
   - Mega-Dropdowns vor Stage/Content und ohne Clipping
   ========================================================== */
@media (min-width: 900px) {

    /* 1) TOPBAR: volle Fensterbreite – auch wenn der Header selbst
          durch das Template in einem zentrierten Container liegt. */
    #evo-nav-wrapper .header-top {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        background: #333333 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .header-top .above-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
    }

    /* JS setzt die Klasse. :last-child ist Fallback für den nativen
       Originalzustand, in dem Express-Lieferzeiten zuletzt steht. */
    #evo-nav-wrapper .header-top .above-header > .iwd-production-benefit,
    #evo-nav-wrapper .header-top .above-header:not(.iwd-topbar-ready) > span:last-child {
        order: -1 !important;
    }

    /* 2) EXPRESS-SHOP: sichtbar kompakter als bisher. */
    .iwd-shopbox-express .iwd-shopbox-copy strong {
        font-size: 13px !important;
        line-height: 1.05 !important;
    }

    /* 3) KONTAKT: etwas größer und dunkel; Suchfeld bewusst schmaler. */
    .iwd-header-contact {
        gap: 22px !important;
    }

    .iwd-header-contact span,
    .iwd-header-contact a,
    .iwd-header-contact i {
        color: #333333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }

    .iwd-header-contact-slot {
        min-height: 20px !important;
    }

    .iwd-header-tools-row {
        grid-template-columns: 300px 36px 40px !important;
        column-gap: 10px !important;
        justify-content: start !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search,
    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        width: 300px !important;
        max-width: 300px !important;
        min-width: 0 !important;
    }

    /* 4) NAVIGATION / MEGAMENÜ:
          Der komplette Header erzeugt einen hohen Stacking-Context.
          Alle relevanten Vorfahren bleiben overflow:visible, damit die
          nativen JTL-Dropdowns nicht von Stage oder Header-Hüllen
          abgeschnitten werden. */
    #evo-nav-wrapper {
        position: relative !important;
        z-index: 50000 !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper .container-header,
    #evo-nav-wrapper .container-header > .row,
    #evo-nav-wrapper .mobile-container,
    #evo-nav-wrapper #header-branding,
    #evo-nav-wrapper .logo-shop-nav,
    #navbarCategories,
    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li .dropdown-toggle-wrapper {
        overflow: visible !important;
    }

    #navbarCategories {
        position: relative !important;
        z-index: 50100 !important;
        clip-path: none !important;
        box-shadow: none !important;
    }

    #navbarCategories #evo-main-nav-wrapper,
    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu {
        position: relative !important;
        z-index: 50110 !important;
    }

    #navbarCategories .dropdown-menu,
    #navbarCategories .megamenu .dropdown-menu {
        z-index: 50200 !important;
        overflow: visible !important;
    }
}

/* ==========================================================
   V13 – Layoutangleichung an PLUS-Shop
   - weiße Headerfläche über volle Viewport-Breite
   - rote Kategorienleiste über volle Viewport-Breite
   - Logo mit sauberem Abstand zur schwarzen Benefit-Leiste
   - Shop-Switcher luftiger
   - Kontakt/Suche mit mehr Abstand zum PLUS-Button
   - Warenkorb-Badge exakt zentriert
   ========================================================== */
@media (min-width: 900px) {

    /* ------------------------------------------------------
       1) WEISSE HEADERFLÄCHE – volle Breite wie im PLUS-Shop
       ------------------------------------------------------ */
    #evo-nav-wrapper .container-header {
        position: relative !important;
        left: 50% !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: -50vw !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .container-header > .row {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    /* Der eigentliche Header-Inhalt bleibt zentriert. */
    #evo-nav-wrapper .mobile-container {
        width: 1240px !important;
        max-width: calc(100vw - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
    }

    /* Etwas mehr Weißraum unterhalb der schwarzen Benefit-Leiste. */
    .logo-shop-nav.iwd-header-layout {
        grid-template-columns: 270px 360px minmax(0, 1fr) !important;
        column-gap: 22px !important;
        align-items: start !important;
        padding: 11px 12px 8px !important;
    }

    .iwd-header-logo {
        align-self: start !important;
        padding-top: 2px !important;
    }

    .iwd-header-logo .desktop-logo {
        max-width: 260px !important;
        max-height: 66px !important;
        margin-top: 0 !important;
    }

    /* ------------------------------------------------------
       2) SHOP-SWITCHER – etwas mehr Luft, gleiche Hierarchie
          wie im PLUS-Shop
       ------------------------------------------------------ */
    .iwd-shop-switcher {
        width: 360px !important;
        max-width: 360px !important;
    }

    .iwd-shop-switcher-row {
        gap: 8px !important;
    }

    .iwd-shopbox {
        flex: 0 0 176px !important;
        width: 176px !important;
        min-width: 176px !important;
        height: 80px !important;
    }

    .iwd-shopbox-top {
        height: 55px !important;
        min-height: 55px !important;
        padding: 6px 10px !important;
        gap: 9px !important;
    }

    .iwd-shopbox-icon {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .iwd-shopbox-icon img {
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .iwd-shopbox-copy strong {
        font-size: 14px !important;
        line-height: 1.05 !important;
    }

    .iwd-shopbox-express .iwd-shopbox-copy strong {
        font-size: 13.5px !important;
    }

    .iwd-shopbox-copy span {
        font-size: 9.6px !important;
        line-height: 1.08 !important;
    }

    .iwd-shopbox-bottom {
        font-size: 9.5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* ------------------------------------------------------
       3) KONTAKT / SUCHE – mehr Abstand vom PLUS-Switcher
       ------------------------------------------------------ */
    .iwd-header-right {
        min-width: 0 !important;
        padding-left: 14px !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .iwd-header-contact {
        gap: 24px !important;
    }

    .iwd-header-contact span,
    .iwd-header-contact a,
    .iwd-header-contact i {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333333 !important;
    }

    .iwd-header-tools-row {
        grid-template-columns: 285px 36px 40px !important;
        column-gap: 11px !important;
        justify-content: start !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search,
    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        width: 285px !important;
        max-width: 285px !important;
    }

    /* ------------------------------------------------------
       4) WARENKORB – Artikelzahl exakt mittig im Badge
       ------------------------------------------------------ */
    .iwd-header-cart-slot .cart-menu .badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: -3px !important;
        right: -5px !important;
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 9px !important;
        line-height: 17px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .iwd-header-cart-slot .cart-menu .badge em {
        display: block !important;
        width: 100% !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 17px !important;
        text-align: center !important;
    }

    /* ------------------------------------------------------
       5) ROTE KATEGORIENLEISTE – volle Breite, Inhalt zentriert
       ------------------------------------------------------ */
    #navbarCategories {
        position: relative !important;
        left: 50% !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: -50vw !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: #cf2530 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 50100 !important;
    }

    #navbarCategories #evo-main-nav-wrapper {
        width: 1240px !important;
        max-width: calc(100vw - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background: #cf2530 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: #cf2530 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        overflow: visible !important;
    }

    #navbarCategories .dropdown-menu,
    #navbarCategories .megamenu .dropdown-menu {
        z-index: 50200 !important;
        overflow: visible !important;
    }
}



/* ==========================================================
   V14 – finale Desktop-Korrektur 24.09.2026
   - Benefit-Leiste garantiert einzeilig
   - Logo klar unterhalb der Benefit-Leiste
   - Shop-Switcher breiter / lesbarer wie PLUS
   - aktive Statuszeile: „Sie sind im EXPRESS-Shop“ größer
   - rote Navigation vertikal zentriert
   - Untermenü-Icons wieder sichtbar (Filter nur auf Hauptmenü)
   ========================================================== */
@media (min-width: 900px) {

    /* ------------------------------------------------------
       1) SCHWARZE BENEFIT-LEISTE
       Alle vier Aussagen inkl. Check-Icon bleiben EINZEILIG.
       ------------------------------------------------------ */
    #evo-nav-wrapper .header-top {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 calc(50% - 50vw) !important;
        padding: 0 !important;
        background: #333333 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .header-top .above-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 26px !important;
        width: 1240px !important;
        max-width: calc(100vw - 30px) !important;
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 auto !important;
        padding: 0 8px !important;
        overflow: visible !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .header-top .above-header > span,
    #evo-nav-wrapper .header-top .above-header > span > a {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 30px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        text-decoration: none !important;
    }

    #evo-nav-wrapper .header-top .above-header > span i,
    #evo-nav-wrapper .header-top .above-header > span > a i {
        position: static !important;
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    #evo-nav-wrapper .header-top .above-header > .iwd-production-benefit,
    #evo-nav-wrapper .header-top .above-header:not(.iwd-topbar-ready) > span:last-child {
        order: -1 !important;
    }

    /* ------------------------------------------------------
       2) WEISSE HEADERFLÄCHE / LOGO
       #logo hat im alten Template eigene Positionsregeln. Diese
       werden hier ausdrücklich neutralisiert, damit das Logo den
       schwarzen Balken nicht mehr berührt.
       ------------------------------------------------------ */
    #evo-nav-wrapper .container-header {
        position: relative !important;
        left: 50% !important;
        width: 100vw !important;
        max-width: none !important;
        margin: 0 0 0 -50vw !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .container-header > .row {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper .mobile-container {
        width: 1240px !important;
        max-width: calc(100vw - 30px) !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .logo-shop-nav.iwd-header-layout {
        display: grid !important;
        grid-template-columns: 290px 388px minmax(0, 1fr) !important;
        column-gap: 24px !important;
        align-items: start !important;
        width: 100% !important;
        min-height: 94px !important;
        margin: 0 !important;
        padding: 12px 12px 8px !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        align-self: start !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo > a {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo .desktop-logo {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 280px !important;
        max-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* ------------------------------------------------------
       3) SHOP-SWITCHER
       Breiter und mit lesbarer Bottom-Zeile.
       ------------------------------------------------------ */
    .iwd-shop-switcher {
        width: 388px !important;
        max-width: 388px !important;
    }

    .iwd-shop-switcher-row {
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .iwd-shopbox {
        flex: 0 0 190px !important;
        width: 190px !important;
        min-width: 190px !important;
        height: 82px !important;
        border-radius: 10px !important;
    }

    .iwd-shopbox-top {
        height: 56px !important;
        min-height: 56px !important;
        padding: 6px 10px !important;
        gap: 9px !important;
    }

    .iwd-shopbox-icon {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .iwd-shopbox-icon img {
        max-width: 40px !important;
        max-height: 40px !important;
    }

    .iwd-shopbox-copy strong,
    .iwd-shopbox-express .iwd-shopbox-copy strong,
    .iwd-shopbox-plus .iwd-shopbox-copy strong {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-copy span {
        margin-top: 3px !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-bottom {
        height: 26px !important;
        min-height: 26px !important;
        padding: 2px 6px !important;
        gap: 4px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current {
        justify-content: center !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current .fa {
        font-size: 12px !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current span {
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    /* Login-Dropdown direkt unter dem Benutzer-Icon verankern.
       Nach dem Verschieben des nativen JTL-Login-Elements muss
       .li-login selbst der Positionierungsanker sein. */
    .iwd-header-account-slot .li-login {
        position: relative !important;
        overflow: visible !important;
    }

    .iwd-header-account-slot .li-login > #login-dropdown {
        top: calc(100% + 4px) !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 60000 !important;
    }

    /* ------------------------------------------------------
       4) RECHTER HEADERBEREICH
       Genug Abstand zum PLUS-Button, Suche kompakt.
       ------------------------------------------------------ */
    .iwd-header-right {
        min-width: 0 !important;
        padding: 0 0 0 16px !important;
        box-sizing: border-box !important;
    }

    .iwd-header-contact {
        gap: 24px !important;
        height: 20px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .iwd-header-contact span,
    .iwd-header-contact a,
    .iwd-header-contact i {
        color: #333333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }

    .iwd-header-tools-row {
        grid-template-columns: 285px 36px 40px !important;
        column-gap: 11px !important;
        justify-content: start !important;
        align-items: center !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search,
    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        width: 285px !important;
        max-width: 285px !important;
    }

    /* Warenkorb-Zahl weiterhin exakt zentriert. */
    .iwd-header-cart-slot .cart-menu .badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        line-height: 17px !important;
        text-align: center !important;
    }

    .iwd-header-cart-slot .cart-menu .badge em {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    /* ------------------------------------------------------
       5) ROTE HAUPTNAVIGATION
       Vollbreite bleibt erhalten. Icons/Text werden innerhalb
       der Leiste sauber vertikal zentriert.
       ------------------------------------------------------ */
    #navbarCategories {
        position: relative !important;
        left: 50% !important;
        width: 100vw !important;
        max-width: none !important;
        margin: 0 0 0 -50vw !important;
        padding: 0 !important;
        background: #cf2530 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 50100 !important;
    }

    #navbarCategories #evo-main-nav-wrapper {
        width: 1240px !important;
        max-width: calc(100vw - 30px) !important;
        margin: 0 auto !important;
        background: #cf2530 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav,
    #navbarCategories #evo-main-nav .megamenu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #cf2530 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 60px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        background: #cf2530 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper {
        display: flex !important;
        align-items: stretch !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper > a,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 5px 10px 6px !important;
        color: #ffffff !important;
        line-height: 1.05 !important;
        text-align: center !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper > a > .img-wrapper,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a > .img-wrapper {
        display: flex !important;
        flex: 0 0 29px !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        line-height: 29px !important;
    }

    /* Nur die Icons in der ROTEN Hauptleiste werden weiß. */
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper > a > .img-wrapper > img,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a > .img-wrapper > img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 31px !important;
        max-height: 28px !important;
        margin: 0 auto !important;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ------------------------------------------------------
       6) MEGAMENÜ / UNTERMENÜ-ICONS
       Die SVGs sind weiterhin im HTML vorhanden. Durch die frühere
       zu breite Weiß-Filter-Regel wurden sie auf weißem Hintergrund
       praktisch unsichtbar. Im Dropdown gilt deshalb ausdrücklich
       wieder die originale Darstellung.
       ------------------------------------------------------ */
    #navbarCategories .dropdown-menu,
    #navbarCategories .megamenu .dropdown-menu {
        z-index: 50200 !important;
        overflow: visible !important;
    }

    #navbarCategories .dropdown-menu .megamenu-content .img-wrapper img,
    #navbarCategories .dropdown-menu .category-wrapper .img-wrapper img,
    #navbarCategories .dropdown-menu .category-wrapper img.image,
    #navbarCategories .dropdown-menu .mega-info-lg img {
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #navbarCategories .dropdown-menu .category-wrapper .img-wrapper {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    #evo-nav-wrapper .header-top .above-header {
        gap: 14px !important;
    }

    #evo-nav-wrapper .header-top .above-header > span,
    #evo-nav-wrapper .header-top .above-header > span > a {
        font-size: 10.5px !important;
    }

    .logo-shop-nav.iwd-header-layout {
        grid-template-columns: 255px 360px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .iwd-shop-switcher {
        width: 360px !important;
        max-width: 360px !important;
    }

    .iwd-shopbox {
        flex-basis: 176px !important;
        width: 176px !important;
        min-width: 176px !important;
    }

    .iwd-header-right {
        padding-left: 8px !important;
    }

    .iwd-header-tools-row {
        grid-template-columns: minmax(220px, 1fr) 34px 38px !important;
        column-gap: 7px !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search,
    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        width: 100% !important;
        max-width: none !important;
    }

    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > .dropdown-toggle-wrapper > a,
    #navbarCategories #evo-main-nav .megamenu > ul.nav.navbar-nav.force-float > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================
   V16 – Feintuning EXPRESS-Subtitle 24.09.2026
   - „Schnell lieferbar!“ etwas größer und ruhiger lesbar
   - Schriftfamilie bewusst unverändert: Open Sans
   ========================================================== */
@media (min-width: 900px) {
    .iwd-shopbox-express .iwd-shopbox-copy span {
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
    }
}

/* ==========================================================
   V17 – RESPONSIVE ANGLEICHUNG AN PLUS-SHOP 24.09.2026
   - Shop-Switcher bleibt auf Tablet und Mobil sichtbar
   - Tablet: Logo + Switcher nebeneinander, Suche darunter
   - Mobil: Logo, Switcher, Suche untereinander
   - Die beiden Shop-Kacheln bleiben wie im PLUS-Shop nebeneinander
   - Mobile Benefit-Leiste auf den wichtigsten EXPRESS-Hinweis reduziert
   - Desktop bleibt vollständig unverändert
   ========================================================== */

/* ----------------------------------------------------------
   GEMEINSAME SHOP-KACHEL-OPTIK FÜR TABLET + MOBIL
   Die Desktop-Farben lagen bisher nur innerhalb min-width:992px.
   ---------------------------------------------------------- */
@media (max-width: 899px) {
    .iwd-shopbox {
        position: relative !important;
        text-decoration: none !important;
    }

    .iwd-shopbox:hover,
    .iwd-shopbox:focus {
        text-decoration: none !important;
    }

    .iwd-shopbox-express {
        border: 1px solid #cf2530 !important;
        background: #ffffff !important;
    }

    .iwd-shopbox-express .iwd-shopbox-top {
        background: #cf2530 !important;
    }

    .iwd-shopbox-express .iwd-shopbox-copy strong,
    .iwd-shopbox-express .iwd-shopbox-copy span {
        color: #ffffff !important;
    }

    .iwd-shopbox-express .iwd-express-icon img {
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current {
        background: #ffffff !important;
        color: #cf2530 !important;
        border-top: 1px solid rgba(207,37,48,.18) !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current .fa,
    .iwd-shopbox-express .iwd-shopbox-current span {
        color: #cf2530 !important;
    }

    .iwd-shopbox-plus {
        border: 1px solid #bfc0c2 !important;
        background: #ffffff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-top {
        background: #ffffff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-copy strong {
        color: #666666 !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-copy span {
        color: #8a8a8a !important;
    }

    .iwd-shopbox-plus .iwd-plus-icon img {
        display: block !important;
        visibility: visible !important;
        opacity: .52 !important;
        filter: brightness(0) saturate(0) !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-target {
        background: #f28c00 !important;
        color: #ffffff !important;
    }

    .iwd-shopbox-plus .iwd-shopbox-target span,
    .iwd-shopbox-plus .iwd-shopbox-target .fa {
        color: #ffffff !important;
    }
}

/* ----------------------------------------------------------
   KEINE EIGENE TABLET-VARIANTE MEHR
   Bis 899 px = mobiles Layout, ab 900 px = Desktop-Layout.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   MOBIL bis 767 px
   ---------------------------------------------------------- */
@media (max-width: 899px) {

    /* Benefit-Leiste wie im PLUS-Shop mobil auf eine Aussage reduzieren. */
    #evo-nav-wrapper .header-top {
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #333333 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .header-top .above-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .header-top .above-header > span {
        display: none !important;
    }

    #evo-nav-wrapper .header-top .above-header > .iwd-production-benefit,
    #evo-nav-wrapper .header-top .above-header:not(.iwd-topbar-ready) > span:first-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 34px !important;
        white-space: nowrap !important;
    }

    #evo-nav-wrapper .header-top .above-header > .iwd-production-benefit i,
    #evo-nav-wrapper .header-top .above-header:not(.iwd-topbar-ready) > span:first-child i {
        color: #ffffff !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    #evo-nav-wrapper .container-header,
    #evo-nav-wrapper .container-header > .row {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper .mobile-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper .mobile-container .container-block,
    #evo-nav-wrapper #header-branding {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .logo-shop-nav.iwd-header-layout {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 10px !important;
        box-sizing: border-box !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo > a {
        display: inline-block !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo .desktop-logo {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 300px !important;
        max-height: 96px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo .mobile-logo {
        display: none !important;
    }

    .iwd-shop-switcher {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .iwd-shop-switcher-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .iwd-shopbox {
        display: block !important;
        flex: 1 1 0 !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
        height: 80px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .iwd-shopbox-top {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 6px 7px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .iwd-shopbox-icon {
        display: flex !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .iwd-shopbox-icon img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    .iwd-shopbox-copy {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .iwd-shopbox-copy strong {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-copy span,
    .iwd-shopbox-express .iwd-shopbox-copy span {
        display: block !important;
        margin-top: 3px !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 9.5px !important;
        font-weight: 500 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 2px 3px !important;
        box-sizing: border-box !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current span {
        font-size: 10px !important;
        font-weight: 800 !important;
    }

    .iwd-header-right {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Wie im PLUS-Shop: Kontakt auf dem Mobil ausblenden. */
    .iwd-header-contact-slot {
        display: none !important;
    }

    .iwd-header-tools-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .iwd-header-shopnav,
    .iwd-header-shopnav > ul.header-shop-nav,
    .iwd-header-shopnav #search,
    .iwd-header-shopnav #search form,
    .iwd-header-shopnav #search .input-group {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .iwd-header-shopnav #search .input-group {
        display: table !important;
    }

    .iwd-header-shopnav #search .form-control {
        height: 42px !important;
        padding: 8px 11px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    .iwd-header-shopnav #search .input-group-addon {
        width: 46px !important;
        min-width: 46px !important;
        height: 42px !important;
        padding: 0 !important;
        background: #8d8d8d !important;
        border-color: #8d8d8d !important;
    }

    .iwd-header-shopnav #search button {
        width: 100% !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #ffffff !important;
    }

    /* Die nativen mobilen Login-/Warenkorb-Elemente des JTL-Headers
       bleiben für Mobil unangetastet. Die Desktop-Slots sind leer. */
    .iwd-header-account-slot,
    .iwd-header-cart-slot {
        display: none !important;
    }
}

/* ----------------------------------------------------------
   SEHR KLEINE MOBILS
   ---------------------------------------------------------- */
@media (max-width: 390px) {
    #evo-nav-wrapper .header-top .above-header > .iwd-production-benefit,
    #evo-nav-wrapper .header-top .above-header:not(.iwd-topbar-ready) > span:first-child {
        font-size: 12px !important;
    }

    #evo-nav-wrapper #logo.iwd-header-logo .desktop-logo {
        max-width: 270px !important;
        max-height: 88px !important;
    }

    .iwd-shop-switcher {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .iwd-shop-switcher-row {
        gap: 8px !important;
    }

    .iwd-shopbox {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
    }

    .iwd-shopbox-top {
        padding-left: 5px !important;
        padding-right: 5px !important;
        gap: 4px !important;
    }

    .iwd-shopbox-icon {
        flex-basis: 31px !important;
        width: 31px !important;
        height: 31px !important;
    }

    .iwd-shopbox-icon img {
        max-width: 31px !important;
        max-height: 31px !important;
    }

    .iwd-shopbox-copy strong {
        font-size: 11.5px !important;
    }

    .iwd-shopbox-copy span,
    .iwd-shopbox-express .iwd-shopbox-copy span {
        font-size: 8.5px !important;
    }

    .iwd-shopbox-bottom {
        font-size: 8.5px !important;
        gap: 2px !important;
    }

    .iwd-shopbox-express .iwd-shopbox-current span {
        font-size: 8.8px !important;
    }
}

/* ==========================================================
   V18 – MOBIL-HEADER WIE PLUS-SHOP
   Ausschließlich bis 899 px; vorhandenes Desktop-Layout bleibt gleich.
   Reihenfolge: Benefit -> Logo -> Shopwechsel -> Suche/Konto/Cart
   -> rote mobile Hauptnavigation.
   Native JTL-Bedienelemente werden in header.tpl umgehängt, nicht kopiert.
   ========================================================== */
@media (max-width: 899px) {
    /* Die alte JTL-Mobil-Kopfleiste darf weder die Grafik überlagern
       noch einen zweiten Warenkorb/zweite Kontaktsymbole erzeugen. */
    #evo-nav-wrapper .container-header > .row > .login-header {
        display: none !important;
    }

    /* Alle Header-Teile wieder in den normalen Dokumentfluss setzen;
       die alte graue Nav lag durch die Template-Positionierung über dem Logo. */
    #evo-nav-wrapper .container-header > .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #evo-nav-wrapper .container-header > .row > .mobile-container {
        position: relative !important;
        order: 1 !important;
        float: none !important;
        flex: 0 0 auto !important;
        height: auto !important;
    }
    #evo-nav-wrapper .container-header > .row > .navbar.navbar-expand-lg,
    #evo-nav-wrapper .container-header > .row > #navbarCategories {
        order: 3 !important;
        float: none !important;
    }

    /* Native Suchfunktion im weißen Header wieder dauerhaft zeigen. */
    #evo-nav-wrapper .iwd-header-right,
    #evo-nav-wrapper .iwd-header-tools-row,
    #evo-nav-wrapper .iwd-header-shopnav,
    #evo-nav-wrapper .iwd-header-shopnav > ul.header-shop-nav,
    #evo-nav-wrapper .iwd-header-shopnav li#search,
    #evo-nav-wrapper .iwd-header-shopnav li#search form {
        display: block !important;
        position: relative !important;
        float: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
    }
    #evo-nav-wrapper .iwd-header-right {
        width: 100% !important;
        padding: 0 !important;
    }
    #evo-nav-wrapper .iwd-header-tools-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 36px 40px !important;
        column-gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #evo-nav-wrapper .iwd-header-shopnav,
    #evo-nav-wrapper .iwd-header-shopnav > ul.header-shop-nav,
    #evo-nav-wrapper .iwd-header-shopnav li#search,
    #evo-nav-wrapper .iwd-header-shopnav li#search form,
    #evo-nav-wrapper .iwd-header-shopnav li#search .input-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #evo-nav-wrapper .iwd-header-shopnav #search .input-group {
        display: table !important;
        table-layout: fixed !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    #evo-nav-wrapper .iwd-header-shopnav #search .form-control {
        display: table-cell !important;
        width: 100% !important;
        height: 42px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border: 1px solid #e7e7eb !important;
        background: #f7f7f9 !important;
        color: #555 !important;
        font-size: 16px !important;
        border-radius: 9px 0 0 9px !important;
        box-sizing: border-box !important;
    }
    #evo-nav-wrapper .iwd-header-shopnav #search .input-group-addon {
        display: table-cell !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 42px !important;
        padding: 0 !important;
        background: #f0f0f3 !important;
        border: 1px solid #f0f0f3 !important;
        border-radius: 0 9px 9px 0 !important;
    }
    #evo-nav-wrapper .iwd-header-shopnav #search button {
        display: block !important;
        width: 100% !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #bf2632 !important;
        font-size: 17px !important;
    }

    /* Native Konto- und Warenkorb-Elemente – ohne neue Login- oder
       Warenkorb-Logik. Das Login-Menü bleibt rechts unter dem Konto-Icon. */
    #evo-nav-wrapper .iwd-header-account-slot,
    #evo-nav-wrapper .iwd-header-cart-slot {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 42px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot {
        width: 40px !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-heade,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-heade > ul,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu {
        display: block !important;
        position: relative !important;
        float: none !important;
        width: 36px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login > a.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: #555 !important;
        border: 0 !important;
        text-decoration: none !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login .fa-user {
        color: #555 !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login > a > span,
    #evo-nav-wrapper .iwd-header-account-slot .li-login > a > .caret {
        display: none !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: -34px !important;
        left: auto !important;
        width: min(310px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 20000 !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a.dropdown-toggle {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        background: transparent !important;
        border: 0 !important;
        text-decoration: none !important;
        overflow: visible !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a:before {
        content: "\f07a" !important;
        font-family: FontAwesome !important;
        color: #555 !important;
        font-size: 26px !important;
        font-weight: normal !important;
        line-height: 1 !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a > i,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a > svg,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a > span:not(.badge) {
        display: none !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu .badge {
        position: absolute !important;
        top: 0 !important;
        right: -2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 3px !important;
        border-radius: 50% !important;
        background: #c92835 !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu .badge em {
        font-size: 10px !important;
        font-style: normal !important;
        line-height: 1 !important;
        color: #fff !important;
    }

    /* Hamburger wie im PLUS-Shop: eigene durchgehend rote Leiste
       UNTER der weißen Suche; die JTL-Collapse-Funktion bleibt erhalten. */
    #evo-nav-wrapper nav#shop-nav-xs {
        display: block !important;
        position: relative !important;
        order: 2 !important;
        float: none !important;
        clear: both !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #c82734 !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 2 !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs > .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs .navbar-left {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        float: none !important;
        width: auto !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs .navbar-left > li {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 45px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 5px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs .navbar-toggler .fa-bars {
        color: #fff !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }
    #evo-nav-wrapper nav#shop-nav-xs .action-nav,
    #evo-nav-wrapper nav#shop-nav-xs #search {
        display: none !important;
    }
    #evo-nav-wrapper #navbarCategories {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        z-index: 3 !important;
    }
}

/* ==========================================================
   V22 – bereinigte Mobil-Suche (auf Basis der geladenen V20)
   Das native JTL-Typeahead versteckt seinen eigenen Wrapper inline;
   deshalb hat die mobile Suchzeile weder den Namen qs noch die
   Selektoren/Formularstruktur der JTL-Autocomplete-Suche.
   Keine Änderungen an Desktop, Tablet, Shop-Kacheln oder Navigation.
   ========================================================== */
.iwd-mobile-search {
    display: none !important;
}

@media (max-width: 899px) {
    /* Nur die mobile Anzeige der ursprünglichen JTL-Suche ausblenden.
       Die native Suche bleibt für Desktop und Tablet im DOM erhalten. */
    #evo-nav-wrapper .iwd-header-tools-row > .iwd-header-shopnav {
        display: none !important;
    }

    #evo-nav-wrapper .iwd-header-tools-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px 42px !important;
        column-gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 0 !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #evo-nav-wrapper .iwd-header-tools-row > .iwd-mobile-search {
        display: flex !important;
        position: relative !important;
        grid-column: 1 !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e7e7eb !important;
        border-radius: 9px !important;
        background: #f7f7f9 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #evo-nav-wrapper .iwd-mobile-search > .iwd-mobile-query {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: block !important;
        position: relative !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 1% !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f7f7f9 !important;
        box-shadow: none !important;
        color: #444 !important;
        font: 400 16px/40px "Open Sans", Arial, sans-serif !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
        pointer-events: auto !important;
        cursor: text !important;
    }
    #evo-nav-wrapper .iwd-mobile-search > .iwd-mobile-query::placeholder {
        color: #888 !important;
        opacity: 1 !important;
    }

    #evo-nav-wrapper .iwd-mobile-search > .iwd-mobile-go {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: flex !important;
        position: relative !important;
        flex: 0 0 46px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f0f0f3 !important;
        box-shadow: none !important;
        color: #bf2632 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }
    #evo-nav-wrapper .iwd-mobile-search > .iwd-mobile-go .fa {
        margin: 0 !important;
        padding: 0 !important;
        color: #bf2632 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* Ein gemeinsames 42-px-Raster, ohne eigenes Konto oder eigenen
       Warenkorb zu erzeugen: native JTL-Elemente bleiben erhalten. */
    #evo-nav-wrapper .iwd-header-tools-row > .iwd-header-account-slot,
    #evo-nav-wrapper .iwd-header-tools-row > .iwd-header-cart-slot {
        display: flex !important;
        position: relative !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    #evo-nav-wrapper .iwd-header-tools-row > .iwd-header-account-slot {
        grid-column: 2 !important;
    }
    #evo-nav-wrapper .iwd-header-tools-row > .iwd-header-cart-slot {
        grid-column: 3 !important;
    }

    #evo-nav-wrapper .iwd-header-account-slot > .li-login,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-heade,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-heade > ul,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu {
        display: flex !important;
        position: relative !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        transform: none !important;
        list-style: none !important;
    }

    #evo-nav-wrapper .iwd-header-account-slot .li-login > a.dropdown-toggle {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login .fa-user {
        display: block !important;
        position: static !important;
        color: #555 !important;
        font-size: 25px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login > a > span,
    #evo-nav-wrapper .iwd-header-account-slot .li-login > a > .caret {
        display: none !important;
    }
    #evo-nav-wrapper .iwd-header-account-slot .li-login > .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: -45px !important;
        left: auto !important;
        width: min(310px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 60000 !important;
    }

    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a,
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a.dropdown-toggle {
        display: block !important;
        position: relative !important;
        flex: 0 0 42px !important;
        float: none !important;
        width: 42px !important;
        height: 42px !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        overflow: visible !important;
    }
    /* Icon absolut am Mittelpunkt seines 42-px-Links verankern:
       unabhängig von den Baseline-/Zeilenhöhen des alten Templates. */
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu > a::before {
        content: "\f07a" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: FontAwesome !important;
        font-size: 25px !important;
        font-weight: normal !important;
        line-height: 1 !important;
        color: #555 !important;
        transform: translate(-50%, -50%) !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu .badge {
        display: flex !important;
        position: absolute !important;
        align-items: center !important;
        justify-content: center !important;
        top: -1px !important;
        right: -2px !important;
        left: auto !important;
        bottom: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        background: #c92835 !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    #evo-nav-wrapper .iwd-header-cart-slot .cart-menu .badge em {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-style: normal !important;
        line-height: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================
   V23 – ZWEI RESPONSIVE LAYOUTS 26.09.2026
   - kein separates Tablet-Design mehr
   - bis 899 px: mobiles PLUS-ähnliches Headerlayout
   - ab 900 px: fertiges Desktoplayout
   - behebt insbesondere Browser-Desktopmodus um ~980 CSS-px
   ========================================================== */


/* ==========================================================
   V24 – STAGE-KOMPENSATION FÜR DEN HÖHEREN DESKTOP-HEADER
   29.09.2026

   Der neue Desktop-Header ist gegenüber dem alten Header in den
   Vergleichsscreenshots effektiv ca. 51 px höher. Die Stagegrafik
   (.bg-image-header) blieb bislang an ihrer alten Y-Position und
   wurde dadurch oben stärker vom Header überdeckt.

   Lösung: Nur die vorhandene Stagegrafik visuell nach unten
   verschieben. Bilddateien, Bildgröße und Content-Layout bleiben
   unverändert. Mobil bleibt bewusst unangetastet.
   ========================================================== */
@media (min-width: 900px) {
    #main-wrapper {
        --iwd-stage-header-offset: 51px;
    }

    #main-wrapper > .bg-image-header {
        transform: translateY(var(--iwd-stage-header-offset)) !important;
    }
}


/* ==========================================================
   V26 – LOGIN-FUNKTIONSFIX 05.10.2026
   ----------------------------------------------------------
   Der native JTL-Login inkl. Formular bleibt in seiner originalen
   .login-header-Struktur. Nur das sichtbare User-Icon ist ein Proxy.
   So bleiben Quick-Login, CSRF/Session-Handling und das eingeloggte
   Kundenkonto-Menü unverändert funktionsfähig.
   ========================================================== */

/* Die alte Hülle darf nicht display:none sein, weil darin das native
   Loginformular / Kundenmenü verbleibt. Sie bekommt aber keinerlei
   sichtbare Fläche mehr. */
#evo-nav-wrapper .container-header > .row > .login-header,
#evo-nav-wrapper .login-header {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 59990 !important;
}

#evo-nav-wrapper .login-header .login-header-block,
#evo-nav-wrapper .login-header .lh-right,
#evo-nav-wrapper .login-header .ul-login {
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Alles im alten Kopfbereich bleibt unsichtbar – außer dem nativen
   Login-Knoten und seinem Dropdown. */
#evo-nav-wrapper .login-header .ul-login > li:not(.li-login),
#evo-nav-wrapper .login-header .email-tel {
    display: none !important;
}

#evo-nav-wrapper .login-header .li-login {
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
}

/* Originaler Toggle bleibt für Bootstrap/JTL im DOM, aber nicht sichtbar. */
#evo-nav-wrapper .login-header .li-login > a.dropdown-toggle {
    position: absolute !important;
    left: -10000px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Das echte JTL-Dropdown bleibt vollständig klick- und formularfähig. */
#evo-nav-wrapper .login-header .li-login > .dropdown-menu {
    position: fixed !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 60000 !important;
    pointer-events: auto !important;
    transform-origin: top center !important;
}

/* Sichtbarer Konto-Button im neuen Header: nur Proxy auf den nativen Toggle. */
#evo-nav-wrapper .iwd-header-account-slot {
    overflow: visible !important;
}

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-proxy {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-proxy-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #555 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-proxy-toggle .fa-user {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #555 !important;
    font-size: 25px !important;
    line-height: 1 !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .iwd-header-account-slot .iwd-login-proxy-toggle .fa-user {
        font-size: 25px !important;
    }
}


/* ==========================================================
   V27 – SICHTBARER LOGINSTATUS AM KUNDENKONTO-ICON
   05.10.2026
   ----------------------------------------------------------
   Der Status wird serverseitig aus der bestehenden JTL-Session
   gerendert. Ausgeloggt bleibt das User-Icon unverändert.
   Eingeloggt erscheint rechts oben ein grüner Kreis mit Haken.
   Login-/Dropdown-Funktion selbst bleibt unverändert.
   ========================================================== */

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-proxy-toggle {
    position: relative !important;
    overflow: visible !important;
}

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-status {
    display: flex !important;
    position: absolute !important;
    top: -4px !important;
    right: -5px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: #49a942 !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

#evo-nav-wrapper .iwd-header-account-slot .iwd-login-status .fa,
#evo-nav-wrapper .iwd-header-account-slot .iwd-login-status .fa-check {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .iwd-header-account-slot .iwd-login-status {
        top: -2px !important;
        right: -3px !important;
    }
}


/* ==========================================================
   V28 – LOGIN-DROPDOWN KOMPAKT + RESPONSIVE
   05.10.2026
   ----------------------------------------------------------
   Nur Darstellung/Positionierung des nativen JTL-Dropdowns.
   Login-, Session- und Kundenkonto-Logik bleiben unverändert.
   ========================================================== */

#evo-nav-wrapper .login-header .li-login > .dropdown-menu {
    width: 320px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 12px 14px 10px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu form,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu fieldset,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .form-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input {
    width: 100% !important;
    padding-right: 42px !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #submit-btn {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu > li > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 2px !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* Eingeloggt: Kundenkonto-Menü kompakt halten. */
#evo-nav-wrapper .login-header .li-login > .dropdown-menu > li > ul,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu > li > ol {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu {
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 12px !important;
    }

    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .form-control,
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > button,
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #submit-btn {
        height: 40px !important;
    }
}


/* ==========================================================
   V29 – LOGIN-DROPDOWN SCHMALER + PASSWORT-AUGE
   05.10.2026
   ----------------------------------------------------------
   Loginbox kompakter; beide Hilfslinks bleiben einzeilig.
   Passwortfeld bleibt vollständig innerhalb der Box und erhält
   einen sichtbaren Umschalter für Anzeigen/Verbergen.
   ========================================================== */

#evo-nav-wrapper .login-header .li-login > .dropdown-menu {
    width: 250px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 12px 12px 10px !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .form-group,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .form-control {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 3px !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle {
    display: flex !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 0 2px 2px 0 !important;
    background: #ffffff !important;
    color: #555555 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:focus {
    background: #f4f4f4 !important;
    color: #333333 !important;
    outline: none !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle .fa {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu > li > a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu {
        width: min(250px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 12px 12px 10px !important;
    }

    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle {
        height: 38px !important;
    }
}


/* ==========================================================
   V30 – PASSWORTFELD / AUGE FEINKORREKTUR
   05.10.2026
   ----------------------------------------------------------
   - Passwortfeld endet sauber innerhalb der Loginbox
   - Auge ist ein eigener Grid-Bereich statt Overlay
   - Hover bleibt weiß und nutzt nur die Markenfarbe am Icon
   ========================================================== */

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #9e9e9e !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input.form-control {
    display: block !important;
    position: static !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input.form-control:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    position: static !important;
    grid-column: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #555555 !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:active {
    background: #ffffff !important;
    color: #cf2530 !important;
    border-color: #d8d8d8 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle .fa {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
    background: transparent !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
        height: 40px !important;
    }

    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input,
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input.form-control,
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle {
        height: 38px !important;
    }
}


/* ==========================================================
   LOGIN V31 – Autofill-Farbe auch hinter dem Auge
   ----------------------------------------------------------
   Der Browser färbt gespeicherte Login-Daten hellblau ein.
   Der Auge-Bereich übernimmt bei Autofill dieselbe Fläche.
   Beim Hover ändert sich nur die Icon-Farbe, nicht der Hintergrund.
   ========================================================== */

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle {
    background-color: #e8f0fe !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle:active,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle:active,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle:active {
    background-color: #e8f0fe !important;
    color: #cf2530 !important;
}


/* ==========================================================
   LOGIN V32 – Auge liegt transparent AUF dem Passwortfeld
   ----------------------------------------------------------
   Der Auge-Button besitzt keine eigene Hintergrundfarbe mehr.
   Er liegt absolut über dem rechten Bereich des echten Inputs.
   Dadurch ist auch Chromes/Firefox' browserseitige Autofill-
   Hintergrundfarbe unter dem Auge exakt dieselbe wie im Input.
   ========================================================== */

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #9e9e9e !important;
    border-radius: 3px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input.form-control {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 7px 44px 7px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    bottom: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(120,120,120,.24) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #555555 !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    color: #cf2530 !important;
    border-left-color: rgba(120,120,120,.24) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .iwd-password-toggle .fa {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
    background: transparent !important;
}

/* Alte V31-Autofill-Farbzuweisungen neutralisieren: der transparente
   Overlay-Button lässt nun automatisch den echten Input durchscheinen. */
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:autofill + .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-webkit-autofill + .iwd-password-toggle:focus,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle:hover,
#evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login
.password-input > input:-moz-autofill + .iwd-password-toggle:focus {
    background: transparent !important;
    background-color: transparent !important;
}

@media (max-width: 899px) {
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input {
        height: 40px !important;
    }
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input,
    #evo-nav-wrapper .login-header .li-login > .dropdown-menu #quick-login .password-input > input.form-control {
        height: 38px !important;
    }
}