/* ==========================================================================
   CODE FÜRS MEGA-MENU
   ========================================================================== */
/* --- 1. DESKTOP-ANSICHT (Ab 992px) --- */
@media (min-width: 992px) {
    /* Zwingt den Cassiopeia-Navigations-Container nach links */
    .container-nav {
        justify-content: flex-start !important;
    }

    /* Setzt das Desktop-Menü linksbündig ab und bringt es in den Vordergrund */
    .container-nav .dj-megamenu-wrapper {
        margin-right: auto !important;
        margin-left: 0 !important;
        width: auto !important;
        z-index: 99999 !important;
        position: relative !important;
    }
    
    /* Erzwingt die Vordergrund-Ebene auch für das geöffnete Dropdown */
    .dj-megamenu-wrapper .dj-megamenu,
    .dj-megamenu-wrapper ul.dj-submenu {
        z-index: 999999 !important;
    }
}

/* --- 2. MOBIL-ANSICHT (Unter 992px) --- */
@media (max-width: 991.98px) {
    /* Setzt den flexiblen Header-Container mobil auf Linksausrichtung */
    .container-nav {
        display: block !important;
        text-align: left !important;
    }

    /* Mobil-Wrapper linksbündig ausrichten */
    #dj-megamenu132mobileWrap,
    div[id*="mobileWrap"] {
        width: auto !important;
        max-width: max-content !important;
        float: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: inline-block !important;
    }

    /* Richtet den Burger-Button im Wrapper linksbündig aus */
    #dj-megamenu132mobileWrap > div,
    .dj-barmenu-trigger {
        text-align: left !important;
        float: left !important;
        margin: 0 !important;
        padding: 5px 10px !important;
    }
    
    /* Löser für das Offcanvas-Problem: Schiebt den Inhalt unter den Header */
    .dj-offcanvas-content {
        padding-top: 80px !important; /* Schiebt das gesamte Menü nach unten */
        box-sizing: border-box !important;
    }

    /* Alternativer Fix direkt an der Menüliste, falls der Container kollabiert */
    ul.dj-mobile-nav {
        margin-top: 20px !important; /* Zusätzlicher Sicherheitsabstand oben */
    }

    /* Optionale optische Trennung für Untermenüs im Offcanvas */
    ul.dj-mobile-nav-child {
        background-color: rgba(0, 0, 0, 0.05) !important;
        padding-left: 15px !important;
    }
    
    /* Sorgt dafür, dass nachfolgende Elemente im Header nicht überlappen */
    .container-nav::after {
        content: "";
        display: table;
        clear: both;
    }
}





/* ==========================================================================
   CODE FÜR DIE SCHRIFT
   ========================================================================== */
/* Legt Verdana im Cassiopeia-System fest */
:root {
    --cassiopeia-font-family-body: Verdana, Geneva, sans-serif !important;
    --cassiopeia-font-family-headings: Verdana, Geneva, sans-serif !important;
    --gradient: none; /* Farbverläufe deaktiviert */
}

/* Zwingt absolut jedes Text-Element, jedes Menü und alle Beiträge auf Verdana */
body, 
header, .header, .container-header, 
.navbar, .nav-link, 
.mod-menu a, .mod-menu button, .mod-menu .nav-header, 
h1, h2, h3, h4, h5, h6, 
p, div, span, a, button, input, select, textarea,
.com-content-article, .view-article, .item-page,
.footer {
    font-family: Verdana, Geneva, sans-serif !important;
}

/* 2. RETTUNG FÜR DIE ICONS: Schützt Symbole vor der Verdana-Schrift */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*=" icon-"], [class^="icon-"], 
.navbar-toggler-icon, .icon-menu {
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif !important;
}


/* Schriftgröße für ALLE Elemente im Hauptmenü (Links, Buttons und reine Text-Einträge) */
header.header .mod-menu a,
header.header .mod-menu button.nav-header,
header.header .mod-menu .mod-menu__heading,
header.header .mod-menu span.nav-header,
header.header .navbar-nav .nav-link {
    font-size: 1.0rem !important; /* Passen Sie diese Zahl nach Wunsch an */
}





/* ==========================================================================
   CODE FÜR DIE FARBEN
   ========================================================================== */
/* 1. Header-Hintergrund in ganz hellem Sand-Beige (Keine Verläufe) */
header.header.container-header {
    background-color: #f7f3ed !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 2. Alle inneren Reihen und Container ebenfalls auf das helle Beige zwingen */
header.header .grid-child,
header.header .navbar,
header.header .navbar-collapse {
    background-color: #f7f3ed !important;
    background-image: none !important;
}

/* 3. Alle Menülinks und Buttons in gut lesbarem, weichem Dunkelgrau einfärben */
header.header .navbar-nav .nav-link,
header.header .mod-menu a,
header.header .mod-menu .nav-header,
header.header .mod-menu button.nav-header {
    color: #3d3d3d !important;
    background: none !important;
    border: none !important;
}

/* 4. Farbe der Menüpunkte beim Drüberfahren mit der Maus (Wechselt zu softem Erdbraun) */
header.header .mod-menu a:hover,
header.header .mod-menu button.nav-header:hover {
    color: #8c6d53 !important;
}

/* 5. Textfarbe im Virtuemart Warenkorb-Modul anpassen */
header.header #vmCartModule,
header.header #vmCartModule .total_products,
header.header #vmCartModule a.details {
    color: #3d3d3d !important;
}

header.header #vmCartModule a.details:hover {
    color: #8c6d53 !important;
}





/* ==========================================================================
   CODE FÜR DIE TOPBAR (LOGO-BEREICH GANZ OBEN)
   ========================================================================== */
/* 1. Hintergrund für alle Ebenen der Topbar auf das helle Sand-Beige zwingen */
.container-topbar,
.container-topbar .grid-child,
.container-topbar .mod-custom,
#mod-custom126,
#mod-custom126.custom {
    background-color: #f7f3ed !important; /* Exakt dasselbe helle Sand-Beige wie der Header */
    background-image: none !important;    /* Schaltet alle dunklen Standard-Verläufe ab */
    box-shadow: none !important;
}

/* 2. Abstände um das Logo einstellen (für ein elegantes Layout) */
#mod-custom126 {
    padding-top: 10px;                     /* Abstand nach oben */
    padding-bottom: 10px;                  /* Abstand nach unten */
}

/* 3. Verhindert, dass Absätze oder Links weiße Ränder/Hintergründe erzeugen */
.container-topbar p,
.container-topbar a,
#mod-custom126 p {
    margin: 0 !important;
    background-color: transparent !important;
    background: none !important;
}

/* 4. Schützt das transparente Logo vor automatischen weißen Boxen des Browsers */
.container-topbar img,
#mod-custom126 img {
    background-color: transparent !important;
    background: transparent !important;
    display: block;                        /* Verhindert unschöne Abstände unter dem Bild */
}



/* ==========================================================================
   CODE FÜR DIE HEADER-WARENKORB-DARSTELLUNG
   ========================================================================== */
/* 1. Bringt Ihren Header über den Bootstrap-Wert (1020) von VirtueMart */
header.header.container-header.position-sticky.sticky-top {
    z-index: 99999 !important; /* Sicherer Wert oberhalb von 1020 */
    background-color: #ffffff !important; /* Verhindert transparentes Durchschimmern */
}

/* 2. Überschreibt die Bootstrap-Regel für das VirtueMart-Bild ab 992px */
@media (min-width: 992px) {
    .vm-product-media-container.sticky-lg-top {
        z-index: 1010 !important; /* Niedriger als der Header */
        top: 140px !important;    /* Rutscht nach unten, statt bei top:0 am Header zu kleben */
    }
}

/* 3. Warenkorb-Modul in der Menüzeile (geschützt vor Größenänderung im Mobil-Modus) */
.vmCartModule {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85rem !important; /* Macht die Textgröße deutlich kleiner */
    padding: 4px 10px !important; /* Weniger Abstand im Button */
    background-color: #f8f9fa !important; /* Hellgrau */
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    color: #212529 !important;
    
    /* HIER PASSIERT DIE RETTUNG FÜR DEN MOBIL-MODUS: */
    flex-shrink: 0 !important;      /* Verbietet dem System, das Modul schmaler zu quetschen */
    white-space: nowrap !important;  /* Verbietet dem Text ("1 Produkt" etc.), zweizeilig zu werden */
    height: fit-content !important;  /* Hält die Höhe immer passend kompakt */
}


/* 4. Das hochgeladene Icon als Hintergrundbild einbinden */
.vmCartModule::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("/J5/images/cart-icon.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/*5. Eventuelle Listenpunkte des Default-Layouts entfernen */
.vmCartModule ul, 
.vmCartModule li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

/* 6. Hover-Effekt */
.vmCartModule:hover {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
}

/* Färbt das mobile Menü-Icon in der aktuellen Schriftfarbe des Shops */
/* Falls das Icon als SVG-Hintergrund geladen wird (Ausfallsicherheit) */
.navbar-toggler .icon-menu::before,
.navbar-toggler {
    color: #3d3d3d !important;
    border-color: #3d3d3d !important; /* Passt optional auch den Rahmen des Buttons an */
}

/* Verhindert das Einblenden der Summe – vor und nach dem Ajax-Update */
#vmCartModule .total,
#vmCartModule div[style*="float: right"] strong,
.vmCartModule .total {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}







/* ==========================================================================
   ANZEIGE WARENKORB ICON EXT_CART PLUGIN
   ========================================================================== */
/* Gilt für alle Geräte: Grundpositionierung, aber NOCH NICHT fixiert */
body .vmCartExtWrapper {
	right: 35px !important;     /* Hält das Element dauerhaft 35px vom rechten Rand entfernt */
	top: 10px !important;      /* Hält das Element dauerhaft 10px vom oberen Rand entfernt */
	left: auto !important;     /* Hebt eventuelle Links-Ausrichtungen des Templates auf */
	z-index: 10100 !important;
	position: absolute !important; /* Mobil nicht sticky: Es scrollt mit der Seite mit */
}

/* Verhalten für Smartphones: Icon bleibt rechts, Modul zentriert sich */
@media (max-width: 767px) {
	body .vmCartExtModule {
		width: 90vw; 
		position: fixed; 
		left: 5vw;
	}
}

/* Verhalten für Desktop-Geräte: ERST HIER wird der Button fest/sticky fixiert */
@media (min-width: 768px) {
	body .vmCartExtWrapper {
		position: fixed !important; /* Nur auf dem Desktop bleibt das Icon beim Scrollen stehen */
	}
	body .vmCartExtModule {
		width: 500px; 
		position: absolute; 
		right: -20px;
	}
}





/* ==========================================================================
   CODE FÜR PRODUKT-DETAIL & WARENKORB
   ========================================================================== */
/* Schaltet das starre CSS-Grid von Cassiopeia für Detailseite und Warenkorb ab und zentriert die Ansicht perfekt auf 95% */
.view-productdetails .site-grid,
.view-cart .site-grid {
    display: block !important;
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vm-login {
    width: 98% !important;
    max-width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#checkoutForm {
    width: 97% !important;
    max-width: 97% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Zwingt den Hauptinhalt, sich perfekt zentriert auf 100% Breite zu setzen */
.view-productdetails main,
.view-cart main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
}

/* Blendet die leeren Sidebar-Container vollständig aus, damit sie keinen Platz wegschubsen */
.view-productdetails .sidebar-right,
.view-productdetails .sidebar-left,
.view-cart .sidebar-right,
.view-cart .sidebar-left {
    display: none !important;
}

/* Blendet den "Zurück zu..." Link mit dem SVG-Pfeil auf der Produktdetailseite aus */
.view-productdetails a.btn-link:has(svg.bi-arrow-return-left) {
    display: none !important;
}

/* 1. Blendet das PayPal-Logo innerhalb der Versandbox im Produktdetail immer aus */
.view-productdetails .vm-shipping-info .productDisplayPayment {
    display: none !important;
}

/* 2. Blendet die Box inklusive Rahmen NUR aus, wenn sie außer dem unsichtbaren PayPal-Inhalt keinen Text mehr enthält */
.view-productdetails .vm-shipping-info:not(:has(p, span, a:not([href*="paypal"]), h1, h2, h3, h4, h5, h6)),
.view-productdetails .vm-shipping-info:empty {
    display: none !important;
}


/* Globale Anpassung: Text ÜBER den Feldern (Sortierung links / Limit rechts) */
/* 1. Haupt-Container: Hält die beiden Blöcke auf Desktop nebeneinander */
.vm-order-list.row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: flex-end !important; /* Richtet die Felder unten bündig aus */
    justify-content: flex-start !important;
    width: 100% !important;
}

/* 2. Aufhebung des Bootstrap-Spaltenrasters */
.vm-order-list > [class*="col-"] {
    flex: 0 0 auto !important;   
    width: auto !important;      
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Zwingt Text ÜBER das Feld */
}

/* 3. Das Sortierfeld-Paket (Text oben, Feld unten linksbündig) */
.vm-order-list > .col-6:first-child {
    align-items: flex-start !important;
}
.vm-order-list #vm-orderby-select.form-select {
    width: auto !important;      
    max-width: 100% !important;
}

/* 4. Das Limitfeld-Paket (Text oben, Feld unten RECHTSBÜNDIG auf Desktop) */
.vm-order-list .display-number.ms-auto {
    margin-left: auto !important;     /* Schiebt den gesamten Block nach rechts */
    align-items: flex-end !important; /* Richtet Text und Feld rechtsbündig aus */
    text-align: right !important;
}

/* 5. Das Limit-Feld exakt bändigen (max. 4 Stellen + Pfeil) */
.vm-order-list #limit.form-select {
    width: 105px !important;       
    min-width: 105px !important;
    max-width: 105px !important;
}

/* 6. Mobil-Optimierung (Unter 768px untereinander brechen) */
@media (max-width: 767.98px) {
    .vm-order-list.row {
        flex-direction: column !important;
        align-items: flex-start !important; /* Alles linksbündig auf Mobil */
    }
    
    .vm-order-list > [class*="col-"] {
        width: auto !important;
        align-items: flex-start !important; /* Setzt auch den Limit-Text mobil nach links */
    }
    
    /* Auf Mobilgeräten das rechte Schieben und Rechtsbündigkeit aufheben */
    .vm-order-list .display-number.ms-auto {
        margin-left: 0 !important;   
        margin-top: 15px !important;       /* Abstand nach oben zum Sortierfeld */
        align-items: flex-start !important; /* Text linksbündig über dem Feld */
        text-align: left !important;
    }
}




/* Den VM Login- und Registrierungsbereich im VirtueMart-Warenkorb ausblenden Jommla-STD verwenden */
.vm-checkout-login.row.mb-3 {
    display: none !important;
}

/* Erhöht die Breite des Gutschein-Buttons exklusiv auf Mobilgeräten */
@media (max-width: 576px) {
    button[name="setcoupon"].w-25 {
        width: auto !important;       /* Lässt den Button mit dem Text mitwachsen */
        min-width: 120px !important;  /* Verhindert, dass er zu klein wird */
        margin-left: 0.5rem !important; /* Verringert den Abstand nach links (ms-3), damit mehr Platz ist */
        padding-left: 15px !important; /* Sorgt für lesbaren Innenabstand */
        padding-right: 15px !important;
    }
}

/* Erzwingt 1 Produkt pro Zeile auf allen Mobilgeräten und Tablets */
@media screen and (max-width: 991px) {
    .vm-product-grid .product.col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Repariert die inneren Spalten (Bild, Text, Preis), damit sie untereinander stehen, falls es zu eng wird */
    .vm-product-grid .product-container.row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .vm-product-grid .product-container .col-lg-3,
    .vm-product-grid .product-container .col-lg-5,
    .vm-product-grid .product-container .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        padding-bottom: 15px;
    }
    
    .vm-product-grid .vm-product-media-container {
        min-height: auto !important;
    }
}





/* ==========================================================================
   CODE FÜR FOOTER
   ========================================================================== */
/* 1. Hintergrundfarbe und Breite über die äußere Schale erzwingen */
footer.container-footer.full-width {
    background: #f7f3ed !important;
    background-color: #f7f3ed !important;
    background-image: none !important;
    padding: 30px 0 !important;
    display: block !important;
    width: 100% !important;
}

/* 2. Das Cassiopeia-CSS-Grid für den Footer aufbrechen */
footer.container-footer .grid-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #f7f3ed !important;
}

/* 3. Text absolut zentrieren und Schriften weiß färben */
footer.container-footer .mod-footer,
footer.container-footer .footer1,
footer.container-footer .footer2 {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    background: #f7f3ed !important;
    background-color: #f7f3ed !important;  
    color: #3d3d3d !important;
    width: 100% !important;
}





/* ==========================================================================
   REPARATUR LIEFERADRESSE & LOGIN-GRID (Joomla 5 / VirtueMart 4)
   ========================================================================== */
/* Durchbricht das CSS-Grid des Templates und zwingt die Elemente in eine neue Zeile */
.site-grid .vm-login,
.site-grid #userForm {
	grid-column: 1 / -1 !important; /* Nutzt die volle Breite des Grids und bricht zwingend um */
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
	float: none !important;
}

/* Verhindert das Quetschen innerhalb des Adressformulars */
body #userForm .vm-form-row.row,
body #userForm .col.col-lg-6 {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* Bereinigt die fehlerhafte Bootstrap-Klasse 'p-3needs-validation' des Login-Formulars */
body #com-form-login {
	display: flex !important;
	flex-wrap: wrap !important;
	width: 100% !important;
}

/* Weitet alle Eingabefelder im Adressformular vollflächig aus, damit sie bedienbar werden */
body #userForm .mb-3,
body #userForm .form-control,
body #userForm .form-select,
body #userForm select.vm-chzn-select {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}





/* ==========================================================================
   VP CHECKOUT BUTTON -> CASSIOPEIA STANDARD BUTTON LOOK
   ========================================================================== */
/* 1. Normaler Zustand (Cassiopeia Primary Button) */
#proopc-order-submit.proopc-btn-info {
    background-color: var(--cassiopeia-color-primary) !important;
    border-color: var(--cassiopeia-color-primary) !important;
    color: #ffffff !important;
    font-family: var(--cassiopeia-font-sans-serif, inherit) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important; /* Standard Bootstrap 4/5 Abrundung */
    background-image: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* 2. Hover- und Fokus-Zustand (Cassiopeia Hover-Farbe) */
#proopc-order-submit.proopc-btn-info:hover,
#proopc-order-submit.proopc-btn-info:focus,
#proopc-order-submit.proopc-btn-info:active {
    background-color: var(--cassiopeia-color-hover) !important;
    border-color: var(--cassiopeia-color-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--cassiopeia-color-primary-rgb, 13, 110, 253), 0.25) !important;
}





/* ==========================================================================
   VP CHECKOUT: ERRORS AS POPUP WITH ORIGINAL TEMPLATE FONT (WEIGHT 500)
   ========================================================================== */
/* 1. ÄUẞERER CONTAINER: Aktivierung des Popup-Hintergrunds NUR bei Fehlern */
#proopc-system-message:has(.proopc-error-msg) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Verwandelt die rote Fehler-Box in das zentrierte Popup-Fenster */
#proopc-system-message .proopc-error-msg {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-left: 5px solid #dc3545 !important;
    padding: 25px 40px 25px 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    width: 90% !important;
    max-width: 500px !important;
    position: relative !important;
    animation: proopcBounce 0.3s ease-in-out !important;
}

/* Schließen-Button (X) oben rechts */
#proopc-system-message .proopc-error-msg button.close {
    position: absolute !important;
    top: 12px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: #999999 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* 3. Text-Styling im Popup */
#proopc-system-message .proopc-error-msg span {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    display: block !important;
}

/* --- 4. BEI OK-MELDUNGEN: UNBERÜHRTER STANDARD-TEXTFLUSS --- */
/* (Joomla-Info-Alerts wurden hier entfernt und nutzen wieder das originale Cassiopeia-Design) */
#proopc-system-message:not(:has(.proopc-error-msg)) {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
    display: block !important;
    margin: 15px 0 !important;
}

#proopc-system-message .proopc-success-msg,
#proopc-system-message .proopc-ok-msg {
    background-color: #d1e7dd !important;
    border: 1px solid #badbcc !important;
    color: #0f5132 !important;
    padding: 12px 20px !important;
    border-radius: 4px !important;
    display: block !important;
}

/* --- 5. ANIMATION --- */
@keyframes proopcBounce {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* --- 6. Button anpassen (rechtsbündig) für "Weiter einkaufe" und "Warenkorb löschen" --- */
@media (max-width: 768px) {
    /* Den Hauptcontainer auf volle Breite zwingen und nach rechts ausrichten */
    div.proopc-toolbar-right {
        display: block !important;
        float: right !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: right !important;
        clear: both !important;
    }

    /* Die Wrapper-Divs untereinander zwingen und rechtsbündig ausrichten */
    div.proopc-clear-cart-wrapper, 
    div.proopc-continue-link {
        display: block !important;
        float: right !important;
        clear: right !important; /* Erzwingt das Untereinanderstehen auf der rechten Seite */
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 12px !important; /* Abstand zwischen den Links */
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Die eigentlichen Links (A-Tags) rechtsbündig machen */
    div.proopc-clear-cart-wrapper a, 
    div.proopc-continue-link a {
        display: inline-block !important;
        float: right !important;
        text-align: right !important;
    }
}




/* ==========================================================================
   FARBLICHE BETONUNG FÜR AKTIONSPRODUKTE (POSITION BOTTOM-A) - OPTIMIERT
   ========================================================================== */
/* 1. Hintergrund und Abstände für den gesamten Modulbereich */
.site-grid > .bottom-a,
div[class*="bottom-a"] {
    grid-column: 1 / -1 !important;     /* Zwingt den Block über die volle Breite von Cassiopeia */
    background-color: #f4f6f9 !important; /* Ein dezentes Hellgrau */
    padding: 40px 20px !important;       
    margin-top: 30px !important;         
    margin-bottom: 30px !important;
/*  border-top: 3px solid #ff4d4d !important; /* Rote Signallinie oben */   
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;       
    box-sizing: border-box !important;   /* Verhindert, dass Padding die Boxen verbreitert */
}

/* 2. Titel des Aktionsmoduls */
.bottom-a .moduletitle,
.bottom-a h2,
.bottom-a h3 {
    color: #ff4d4d !important;           
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important; 
    margin-bottom: 25px !important;
    text-align: center !important;       
}

/* Zwingt das VirtueMart-Grid im Modul, die volle Breite zu nutzen */
.bottom-a .vm-product,
.bottom-a .virtuemart {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Die einzelnen Produktkacheln innerhalb der Aktionsbox weiß abheben */
.bottom-a .spacer,
.bottom-a .product,
.bottom-a .vm-product-container {
    background-color: #ffffff !important; 
    border: 1px solid #ffffff !important; 
    border-radius: 6px !important;
    padding: 15px !important;
    box-sizing: border-box !important;   /* WICHTIG: Padding & Border werden nach innen gerechnet, Kacheln werden wieder breiter */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover-Effekt */
.bottom-a .spacer:hover,
.bottom-a .product:hover,
.bottom-a .vm-product-container:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
    border-color: #ff4d4d !important;    
}








/* ==========================================
   1. DAS HAUPT-AKKORDEON (GESAMT-CONTAINER)
   ========================================== */
/* Platz für den künstlichen Haupt-Header oben schaffen */
#cf_wrapp_all_117 {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 20px;
    padding-top: 52px; /* Höhe des Haupt-Headers */
    overflow: hidden;
}

/* Der klickbare Haupt-Header mit Filtersymbol (Standard: geschlossen) */
#cf_wrapp_all_117::before {
    content: "\25bc  Filter anzeigen"; /* Triggert das Icon und Text */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background-color: #212529; /* Dunkler, moderner Haupt-Button */
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
}

/* Hover-Effekt für den Haupt-Button */
#cf_wrapp_all_117:hover::before {
    background-color: #343a40;
}

/* Zustand, wenn das Haupt-Akkordeon geöffnet ist (Pfeil ändert sich) */
#cf_wrapp_all_117.main-filter-open::before {
    content: "\25b2  Filter ausblenden";
}

/* Das eigentliche Formular im geschlossenen Zustand verstecken */
#cf_form_117 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
}

/* Das Formular geschmeidig einblenden, wenn geöffnet */
#cf_wrapp_all_117.main-filter-open #cf_form_117 {
    max-height: 3000px; /* Genug Platz für alle geöffneten Unter-Akkordeons */
    opacity: 1;
    padding: 20px 15px;
}


/* ==========================================
   2. DIE 3 UNTER-AKKORDEONS 
   ========================================== */
/* Originales kleines Plus-Symbol des Moduls entfernen */
.cf_form .headexpand {
    display: none !important;
}

/* Die 3 Filter-Header als Unter-Akkordeon-Buttons stylen */
.cf_form .cf_flt_header {
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background-color: #f8f9fa !important; /* Hellgrauer Hintergrund */
    border: 1px solid #dee2e6 !important;
    margin-bottom: 5px !important;
}

/* Einen eleganten Pfeil rechts im Unter-Header hinzufügen */
.cf_form .cf_flt_header::after {
    content: '▼';
    font-size: 0.8rem;
    color: #666;
    transition: transform 0.2s ease;
}

/* Wenn Unter-Akkordeon geöffnet: Pfeil nach oben drehen */
.cf_form .cf_flt_header[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Filter-Inhalt im geschlossenen Zustand unsichtbar machen */
.cf_form .cf_wrapper_inner[aria-hidden="true"] {
    display: none !important;
}

/* Filter-Inhalt im geöffneten Zustand sauber anzeigen */
.cf_form .cf_wrapper_inner[aria-hidden="false"] {
    display: block !important;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 15px;
    margin-bottom: 15px;
}

/* Versteckt den Filter, wenn die VirtueMart-Produktansicht aktiv ist */
.productdetails-view #cf_wrapp_all_117,
.com_virtuemart.view-productdetails #cf_wrapp_all_117,
.productdetails #cf_wrapp_all_117 {
    display: none !important;
}






/* 1. Die Lightbox über den Header mit z-index 99999 heben */
#fancybox-wrap {
    z-index: 100010 !important; /* Höher als der Header */
    top: 140px !important;       /* Drückt die Box nach unten, unter die Kante des Headers */
}

#fancybox-overlay {
    z-index: 100000 !important; /* Der abdunkelnde Hintergrund ebenfalls über den Header */
}

/* 2. Die Boxgröße für das schmale Hochformat-Bild korrigieren */
#fancybox-content {
    max-height: 65vh !important; /* Begrenzt die Höhe im Browserfenster */
    width: auto !important;
    height: auto !important;
}

#fancybox-img {
    max-height: 65vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* 3. Das Schließen-Symbol in den sichtbaren Bereich holen */
#fancybox-close {
    z-index: 100020 !important; /* Höchste Ebene */
    display: block !important;
    top: -15px !important;
    right: -15px !important;
}

/* 4. Category Title grün */
h1.vm-category-title {
    background-color: color-mix(in srgb, #A6BDA7 80%) !important;
    border-radius: 0 !important;
}