/* ============================================================
   1. GLOBALER HINTERGRUND & LAYOUT
   ============================================================ */
body, 
header.header, 
.container-nav, 
.container-header,
.site-grid {
    background-image: url("../../../../../media/templates/site/cassiopeia_bilderatelier/images/bg1.jpg") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-color: #f5f5dc !important;
}

body {
    margin: 0 !important;
    padding-top: 0 !important;
}

/* --- STARTSEITE REPARATUR: ÜBERLAPPUNG WIEDERHERSTELLEN --- */
body:not(.com_phocacart) .kachel-gesamt-rahmen {
    margin-top: -120px !important; 
    position: relative !important;
    z-index: 100 !important;
    display: block !important;
}

body:not(.com_phocacart) main#content,
body:not(.com_phocacart) .site-grid,
body:not(.com_phocacart) .container-component {
    overflow: visible !important;
    padding-top: 0 !important;
}

/* ============================================================
   2. HEADER & LOGO ZENTRIERT
   ============================================================ */
header.header {
    position: relative !important; 
    z-index: 10 !important;
    width: 100% !important;
}

.header-placeholder {
    display: none !important;
}

header.header .container-header {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.navbar-brand {
    display: inline-block !important;
    margin: 0 auto 15px auto !important;
}

.navbar-brand img {
    max-height: 180px !important;
    width: auto !important;
    mix-blend-mode: multiply;
}

.container-nav {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.container-nav .mod-menu, 
.container-nav ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 0 !important;
    list-style: none !important;
}

.header .container-nav a,
.header .container-nav span,
.header .container-nav .nav-link {
    color: #002c4e !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
}

/* ============================================================
   3. BANNER & LANDING PAGE (Kacheln & Rahmen)
   ============================================================ */
.site-grid { display: block !important; padding: 0 !important; margin: 0 !important; }
.container-banner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.container-banner img { width: 100vw !important; max-width: 100% !important; height: auto !important; display: block !important; }

.kachel-gesamt-rahmen {
    margin-top: -120px !important; 
    position: relative !important;
    z-index: 20 !important; 
}

main#content, 
.site-grid {
    overflow: visible !important;
}

.kachel-ueberlappung { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 15px !important; }
.kachel-card { flex: 1 1 300px !important; max-width: 380px !important; border-radius: 45px !important; padding: 10px 5px 25px 5px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.kachel-bild-wrapper { width: 95% !important; height: 160px !important; border-radius: 60px !important; overflow: hidden; margin-bottom: 15px; border: 2px solid rgba(255,255,255,0.4); }
.kachel-bild-wrapper img { width: 100%; height: 100%; object-fit: cover !important; }

.atelier-bg  { background-color: #d8c3a5 !important; }
.wohnung-bg { background-color: #d1dbe4 !important; }
.garten-bg  { background-color: #b8c7b3 !important; }

/* ============================================================
   4. ZENTRALE RAHMEN-STEUERUNG
   ============================================================ */
.kachel-gesamt-rahmen.rahmen-hell {
    background-color: #fcf9f2 !important;
    border: 1px solid #e2d9c8 !important;
    border-radius: 60px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    position: relative;
    z-index: 1000 !important;
    clear: both;
}

body:not(.com_phocacart) .kachel-gesamt-rahmen.rahmen-hell {
    margin-top: -140px !important; 
    padding: 20px 20px !important; 
}

body.com_phocacart .kachel-gesamt-rahmen.rahmen-hell {
    margin-top: 20px !important;
    padding: 10px 20px !important;
}

body.com_phocacart #ph-pc-category-box,
body.com_phocacart .pc-category-view,
body.com_phocacart .ph-category-view,
body.com_phocacart #phocacart,
.kachel-ueberlappung {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.ph-product-view {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

/* ============================================================
   5. PRODUKT-DETAILANSICHT (Product View)
   ============================================================ */
body.com_phocacart .ph-item-view,
body.com_phocacart .pc-item-view {
    background-color: #fcf9f2 !important;
    border: 1px solid #e2d9c8 !important;
    border-radius: 60px !important;
    max-width: 1200px !important;
    margin: 40px auto !important; 
    padding: 40px !important;     
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

body.com_phocacart .ph-item-view .row,
body.com_phocacart .pc-item-view .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 40px !important; 
}

body.com_phocacart .ph-image-data-view img,
body.com_phocacart .pc-item-view-img img {
    border-radius: 20px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    max-width: 100% !important;
    height: auto !important;
}

body.com_phocacart .ph-item-view h1,
body.com_phocacart .pc-item-view h1 {
    font-size: 2.2rem !important;
    color: #1a2b3c !important; 
    margin-bottom: 15px !important;
}

body.com_phocacart .btn-addcart, 
body.com_phocacart .ph-btn-addcart {
    background-color: #1a2b3c !important; 
    border-radius: 30px !important;
    padding: 10px 25px !important;
    transition: all 0.3s ease !important;
}

#ph-pc-item-box.pc-item-view .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

#ph-pc-item-box.pc-item-view .row > div:first-child {
    flex: 1 1 450px !important;
    max-width: 100% !important;
}

#ph-pc-item-box.pc-item-view .row > div:nth-child(2) {
    flex: 1 1 500px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

#ph-pc-item-box.pc-item-view img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06) !important;
}

body.com_phocacart .ph-item-content.grid {
    background-color: #e2d9c8 !important; 
    border-radius: 60px !important;
    padding: 25px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    height: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

body.com_phocacart .ph-item-content.grid .ph-image-link {
    background-color: rgba(255,255,255,0.15) !important; 
    border-radius: 40px !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    min-height: 220px !important; 
}

body.com_phocacart .ph-item-content.grid img {
    border: 4px solid #ffffff !important; 
    border-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
    height: auto !important;
}

body.com_phocacart .ph-item-content.grid .ph-title a {
    color: #1a2b48 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

body.com_phocacart .ph-item-content.grid .ph-price {
    color: #333 !important;
    font-weight: bold !important;
}

body.com_phocacart .ph-category-desc,
body.com_phocacart .ph-ordering-pagination-box {
    margin: 0 !important;
    padding: 0 !important;
}

body.com_phocacart .ph-category-view h1, 
body.com_phocacart .ph-category-view h2 {
    display: none !important; 
}

body.com_phocacart .ph-item-row,
body.com_phocacart .ph-product-view-item {
    margin-bottom: 0 !important;
}

/* ============================================================
   6. GLOBALER ATELIER-RAHMEN (Warenkorb, Kasse & Infoseiten)
   ============================================================ */
.item-page,
main .item-page,
div[itemprop="articleBody"],
#system-read-more-container,
body.com_phocacart #phocacart,
body.com_phocacart .pc-cart-view,
body.com_phocacart .pc-checkout-view,
body.com_phocacart .pc-checkout-success-view,
body.com_phocacart .pc-info-view,
body.com_phocacart #ph-pc-cart-box,
body.com_phocacart #ph-pc-checkout-box,
body.itemid-219 .container-component,
body.itemid-219 #content {
    background-color: #fcf9f2 !important; 
    border: 1px solid #e2d9c8 !important;   
    border-radius: 60px !important;         
    max-width: 1200px !important;
    margin: 40px auto !important;           
    padding: 50px !important;               
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.item-page::after, #phocacart::after, .pc-checkout-view::after {
    content: "";
    display: table;
    clear: both;
}

body.com_phocacart .pc-checkout-success-view h1,
body.com_phocacart .pc-info-view h1 {
    font-size: 2.2rem !important;
    color: #1a2b3c !important;
    margin-bottom: 20px !important;
}

body.com_phocacart .pc-checkout-success-view p,
body.com_phocacart .pc-info-view p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #4a5568 !important; 
}

body.com_phocacart .table-responsive {
    border: none !important;
}

body.com_phocacart .btn-success,
body.com_phocacart button[type="submit"].btn,
body.com_phocacart .pc-checkout-success-view .btn {
    border-radius: 30px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
}

/* ============================================================
   7. GLOBALER BUTTON-FIX
   ============================================================ */
body.com_phocacart .btn,
body.com_phocacart button,
body.com_phocacart input[type="button"],
body.com_phocacart input[type="submit"],
.pc-checkout-view .btn,
body.com_phocacart #phocacartconfirmbox button,
#phocacart button[name="checkoutconfirm"] {
    border-radius: 30px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    font-weight: 600 !important;
}

#phocacart button.btn-checkout,
.btn-checkout,
button[name="checkoutconfirm"] {
    border-radius: 30px !important;
}

/* ============================================================
   8. SYSTEMMELDUNGEN (Buttons auf Kassen-/Warenkorbseite ausgeblendet)
   ============================================================ */

/* Den globalen Nachrichten-Container zentrieren */
#system-message-container {
    max-width: 1200px !important;
    margin: 40px auto 10px auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Die Basis-Kachel bekommt die Farbe deiner Galerie-Kacheln */
#system-message-container joomla-alert,
#system-message-container .alert-success {
    background-color: #e2d9c8 !important; /* Der Grundton deiner Galerie-Kachel */
    border: 1px solid #c2aa85 !important;   /* Dein Sand-Rahmen */
    border-radius: 30px !important;         /* Die gewohnte, weiche Rundung */
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
    margin-bottom: 25px !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}

/* OBERER BALKEN: Text "ERFOLGREICH HINZUGEFÜGT" / "MELDUNG" */
#system-message-container joomla-alert::before {
    content: "MELDUNG" !important; /* Neutraler gehalten, falls Mengen korrigiert werden */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fcf9f2 !important; /* Dein helles Kachel-Gesamtrahmen-Beige */
    background: #fcf9f2 !important;
    color: #1a2b3c !important;             /* Dein tiefes Atelier-Dunkelblau */
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    height: 45px !important;              
    border-bottom: 1px solid #e2d9c8 !important; 
}

/* Ändert den oberen Balken-Text spezifisch zurück zu "ERFOLGREICH HINZUGEFÜGT", wenn auf einer Produktseite */
body:not(.com_phocacart) #system-message-container joomla-alert::before,
body.pc-item-view #system-message-container joomla-alert::before,
body.ph-item-view #system-message-container joomla-alert::before {
    content: "ERFOLGREICH HINZUGEFÜGT" !important;
}

/* Joomla-eigene Überschriften-Klassen leeren */
#system-message-container .alert-heading {
    display: none !important;
}

/* Icons und Schließen-Kreuz entfernen */
#system-message-container joomla-alert [class^="icon-"],
#system-message-container .alert-message::before,
#system-message-container button.joomla-alert--close,
#system-message-container button.btn-close {
    display: none !important;
}

/* DER UNTERE TEXTBEREICH */
#system-message-container .alert-wrapper,
#system-message-container .alert-message {
    background-color: #e2d9c8 !important; 
    background: #e2d9c8 !important;
    color: #1a2b3c !important;             
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    padding: 30px 40px !important;
    text-align: center !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* DIE BUTTON-ZEILE (Standardmäßig auf Produktseiten aktiv) */
#system-message-container .alert-message {
    position: relative !important;
}

/* Button 1: "← Weiter einkaufen" */
#system-message-container .alert-message::before {
    content: "← Weiter einkaufen" !important;
    display: inline-block !important;
    background-color: #1a2b3c !important; 
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;       
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    transition: background-color 0.2s, color 0.2s !important;
    margin-top: 25px !important;
    margin-right: 15px !important; 
}

/* Button 2: "Zur Kasse →" */
#system-message-container .alert-message::after {
    content: "Zur Kasse →" !important;
    display: inline-block !important;
    background-color: #1a2b3c !important; 
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;       
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    transition: background-color 0.2s, color 0.2s !important;
    margin-top: 25px !important;
    margin-left: 15px !important; 
}

#system-message-container .alert-message {
    position: relative !important;
    cursor: default !important; 
}

#system-message-container .alert-message::before,
#system-message-container .alert-message::after {
    cursor: pointer !important; 
}

@media (min-width: 576px) {
    #system-message-container .alert-message {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #system-message-container .alert-message::before,
    #system-message-container .alert-message::after {
        display: inline-flex !important;
        align-items: center !important;
    }
}

#system-message-container .alert-message::before:hover,
#system-message-container .alert-message::after:hover {
    background-color: #fcf9f2 !important; 
    color: #1a2b3c !important;
}

/* ------------------------------------------------------------
   SPEZIFISCHER REBOOT: KNÖPFE IN KASSE & WARENKORB STEUERN
   ------------------------------------------------------------ */

/* FALL 1: Normale Mengenänderung (Warenkorb hat noch Inhalt)
   -> Wir blenden die künstlichen Vor- und Zurück-Buttons radikal aus, da sie hier überflüssig sind. */
body.itemid-218 #system-message-container .alert-message::before,
body.itemid-218 #system-message-container .alert-message::after,
body.itemid-219 #system-message-container .alert-message::before,
body.itemid-219 #system-message-container .alert-message::after,
body.Itemid-218 #system-message-container .alert-message::before,
body.Itemid-218 #system-message-container .alert-message::after,
body.Itemid-219 #system-message-container .alert-message::before,
body.Itemid-219 #system-message-container .alert-message::after,
body.com_phocacart .pc-cart-view #system-message-container .alert-message::before,
body.com_phocacart .pc-cart-view #system-message-container .alert-message::after,
body.com_phocacart .pc-checkout-view #system-message-container .alert-message::before,
body.com_phocacart .pc-checkout-view #system-message-container .alert-message::after {
    display: none !important;
    content: none !important;
}

/* Padding für Fall 1 kompakt halten, da keine Buttons Platz beanspruchen */
body.itemid-218 #system-message-container .alert-message,
body.itemid-219 #system-message-container .alert-message,
body.Itemid-218 #system-message-container .alert-message,
body.Itemid-219 #system-message-container .alert-message,
body.com_phocacart .pc-cart-view #system-message-container .alert-message,
body.com_phocacart .pc-checkout-view #system-message-container .alert-message {
    padding: 20px 40px !important;
}


/* FALL 2: Der Warenkorb wurde auf NULL gesetzt und ist nun komplett LEER!
   -> Hier überschreiben wir das Verbot von oben und blenden gezielt NUR EINEN logischen Button ein. */
body.com_phocacart .pc-empty-cart-view #system-message-container .alert-message::before {
    display: inline-block !important;
    content: "← Zurück zur Galerie" !important; /* Macht Sinn bei leerem Korb */
    background-color: #1a2b3c !important; 
    color: #ffffff !important;
    padding: 12px 30px !important;
    border-radius: 30px !important;       
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 20px !important;
    margin-right: 0 !important; /* Zentrieren, da solo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Den "Zur Kasse"-Button blenden wir bei leerem Warenkorb unter Garantie komplett aus */
body.com_phocacart .pc-empty-cart-view #system-message-container .alert-message::after {
    display: none !important;
    content: none !important;
}

/* Dem Textbereich bei leerem Warenkorb wieder etwas Luft zum Atmen geben */
body.com_phocacart .pc-empty-cart-view #system-message-container .alert-message {
    padding: 30px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* ============================================================
   11. POPUP INTERAKTIV MACHEN (ZURÜCK ZUR GALERIE)
   ============================================================ */
#phCartAjaxHeader h4 + button,
.modal-body .btn-default,
div[id^="phocaCartModal"] .btn-secondary {
    display: none !important;
}

.modal-footer::after {
    content: "← Zurück zur Galerie" !important;
    display: block !important;
    background-color: #1a2b3c !important; 
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 30px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: center !important;
    margin: 10px auto !important;
    transition: background 0.2s ease !important;
}

.modal-footer::after:hover {
    background-color: #d5be9b !important; 
    color: #1a2b3c !important;
}

/* ============================================================
   12. ADRESS-BLÖCKE NUR IM WARENKORB (ID 218) AUSBLENDEN
   ============================================================ */
body.itemid-218 .pc-checkout-view .ph-checkout-box-login,
body.itemid-218 .pc-checkout-view .ph-checkout-box-address,
body.itemid-218 .pc-checkout-view .ph-checkout-box-shipping,
body.itemid-218 .pc-checkout-view .ph-checkout-box-payment,
body.Itemid-218 .pc-checkout-view .ph-checkout-box-login,
body.Itemid-218 .pc-checkout-view .ph-checkout-box-address,
body.Itemid-218 .pc-checkout-view .ph-checkout-box-shipping,
body.Itemid-218 .pc-checkout-view .ph-checkout-box-payment,
body.item-218 .pc-checkout-view .ph-checkout-box-login,
body.item-218 .pc-checkout-view .ph-checkout-box-address,
body.item-218 .pc-checkout-view .ph-checkout-box-shipping,
body.item-218 .pc-checkout-view .ph-checkout-box-payment {
    display: none !important;
}

/* ============================================================
   13. ÜBERSCHRIFTEN-STRATEGIE (Nur für Warenkorb ID 218)
   ============================================================ */
body.itemid-218 .pc-checkout-view h1.ph-header,
body.Itemid-218 .pc-checkout-view h1.ph-header,
body.item-218 .pc-checkout-view h1.ph-header {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    margin-bottom: 30px !important;
}

body.itemid-218 .pc-checkout-view h1.ph-header::before,
body.Itemid-218 .pc-checkout-view h1.ph-header::before,
body.item-218 .pc-checkout-view h1.ph-header::before {
    content: "Warenkorb" !important;
    display: block !important;
    font-size: 2.5rem !important; 
    line-height: normal !important;
    color: #1a2b3c !important;   
    font-weight: 600 !important;
}

.ph-category-view .ph-top,
.pc-category-view .ph-top,
#ph-pc-category-box .ph-top {
    display: none !important;
}

a[href*="phocacart/categories"].btn-secondary,
a[title="Kategorien"].btn-secondary {
    display: none !important;
}

/* ============================================================
   14. KASSENFORMULAR (ID 219) IM ATELIER-DESIGN (Symmetrie-Update)
   ============================================================ */
/* 1. ALLE Formularboxen & Container (Rechnung, Lieferung, Versand, Zahlung) */
body.itemid-219 .pc-checkout-view .ph-checkout-box-login,
body.itemid-219 .pc-checkout-view .ph-checkout-box-address,
body.itemid-219 .pc-checkout-view .ph-checkout-box-shipping,
body.itemid-219 .pc-checkout-view .ph-checkout-box-payment,
body.itemid-219 #phBillingAddress,
body.itemid-219 #phShippingAddress,
body.itemid-219 .ph-checkout-box-action,
body.itemid-219 div[id*="phBillingAddress"],
body.itemid-219 div[id*="phShippingAddress"],
body.itemid-219 .ph-checkout-billing-row,
body.itemid-219 .ph-checkout-shipping-row,
body.itemid-219 .ph-checkout-shipping-row.ph-disabled,
body.itemid-219 .ph-checkout-shipping-box.ph-disabled,
div#phBillingAddress,
div#phShippingAddress {
    background-color: #fcf9f2 !important; /* Euer warmer Sandton */
    background: #fcf9f2 !important;
    border: 1px solid #e2d9c8 !important;   /* Feiner Rahmen */
    border-radius: 15px !important;         /* Weiche Abrundung */
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 25px !important;
    opacity: 1 !important;                  /* Verhindert, dass der Browser die Box unschön verblassen lässt */
}

/* Ergänzung: Damit die Eingabefelder im gesperrten Zustand dezent und inaktiv wirken */
body.itemid-219 .ph-disabled input,
body.itemid-219 .ph-disabled select,
body.itemid-219 input[disabled],
body.itemid-219 select[disabled] {
    background-color: #f5f1e8 !important;   /* Leicht abgedunkeltes Weiß für gesperrte Felder */
    border-color: #dcd1be !important;
    color: #8fa0b0 !important;              /* Ausgegraute Schrift */
    cursor: not-allowed !important;
}
body.itemid-219 .pc-checkout-view div[class*="header"],
body.itemid-219 .pc-checkout-view .ph-box-header,
body.itemid-219 .pc-checkout-view h3[class*="title"],
body.itemid-219 .pc-checkout-view .ph-box-header-title,
body.itemid-219 .pc-checkout-view div[style*="background"],
body.itemid-219 .ph-box-header {
    background-color: #fcf9f2 !important; 
    background: #fcf9f2 !important;
    color: #1a2b3c !important;             
    border: 1px solid #e2d9c8 !important;
    border-radius: 10px !important;
}

body.itemid-219 .pc-checkout-view .ph-box-header,
body.itemid-219 .pc-checkout-view .ph-box-header-title,
body.itemid-219 .pc-checkout-view legend,
body.itemid-219 .pc-checkout-view h3,
body.itemid-219 .pc-checkout-view h4,
body.itemid-219 .ph-box-header-title {
    color: #1a2b3c !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid #e2d9c8 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

body.itemid-219 .pc-checkout-view .form-control,
body.itemid-219 .pc-checkout-view input,
body.itemid-219 .pc-checkout-view select,
body.itemid-219 .pc-checkout-view textarea {
    background-color: #ffffff !important;   
    background: #ffffff !important;
    border: 1px solid #c2aa85 !important;   
    border-radius: 8px !important;
    color: #1a2b3c !important;              
    padding: 10px 15px !important;
    box-shadow: none !important;
}

body.itemid-219 .pc-checkout-view .form-control:focus,
body.itemid-219 .pc-checkout-view input:focus,
body.itemid-219 .pc-checkout-view select:focus {
    border-color: #1a2b3c !important;       
    background-color: #ffffff !important;
}

body.itemid-219 .pc-checkout-view .control-label,
body.itemid-219 .pc-checkout-view label {
    color: #1a2b3c !important;
    font-weight: 500 !important;
}

/* ============================================================
   15. "JETZT ZUR KASSE GEHEN"-BUTTON (NUR AUF ID 218)
   ============================================================ */
body.itemid-218 .pc-checkout-view, 
body.Itemid-218 #ph-pc-checkout-box,
body.item-218 .pc-checkout-view {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    position: relative !important;
}

.custom-checkout-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 30px 40px 10px 0 !important;
    box-sizing: border-box !important;
}

.custom-checkout-btn {
    display: inline-block !important;
    background-color: #1a2b3c !important; 
    background: #1a2b3c !important;
    color: #ffffff !important;
    padding: 14px 40px !important;
    border-radius: 30px !important;       
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.custom-checkout-btn:hover {
    background-color: #fcf9f2 !important; 
    background: #fcf9f2 !important;
    color: #1a2b3c !important;
    border: 1px solid #c2aa85 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important;
}

/* ============================================================
   16. FOOTER (Zentriert & Harmonisiert)
   ============================================================ */
footer, .footer, #sp-footer, .footer-container {
    background: transparent !important;
    padding: 20px 0 !important;
    border-top: 2px solid #d1bfa7 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

.footer ul, .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.footer ul li:not(:last-child)::after {
    content: "|" !important;
    color: #d1bfa7 !important;
    margin: 0 15px !important;
}

.footer ul li a {
    color: #002c4e !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.footer ul li a[href*="instagram"]::before {
    content: "" !important; 
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome" !important;
    margin-right: 10px !important;
    font-size: 24px !important;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* ============================================================
   16. PERFEKTE TRENNUNG: WARENKORB (218) & KASSE (219) FIX
   ============================================================ */

/* ------------------------------------------------------------
   A. SPEZIFISCH FÜR DEN WARENKORB (Spielwiese / Itemid-218)
   ------------------------------------------------------------ */

/* Zwingt den inneren Inhalt, sich auf die volle Kachelbreite zu strecken */
body.itemid-218 .pc-checkout-view,
body.itemid-218 #ph-pc-checkout-box {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    display: block !important;       /* Repariert das Quetschen der Tabelle */
}


/* ------------------------------------------------------------
   B. SPEZIFISCH FÜR DIE KASSE (Itemid-219) - DOPPELRAHMEN ENTFERNEN
   ------------------------------------------------------------ */

/* Wir löschen Hintergrund und Schatten der ÄUẞEREN Kachel auf der Kasse, */
/* damit nur noch die innere Kachel mit dem Formular sichtbar bleibt! */
body.itemid-219 #ph-pc-checkout-box.pc-checkout-view {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   C. GLOBALE OPTIMIERUNGEN FÜR ALLE PHOCA-TABELLEN
   ------------------------------------------------------------ */

/* Tabellen-Fläche maximieren & Rahmen entfernen */
body.com_phocacart .table-responsive {
    border: none !important;         /* Dein bewährter Befehl aus dem alten CSS */
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 30px !important;
    display: block !important;
}

body.com_phocacart table.table {
    width: 100% !important;
}

/* MENGENFELD-SICHERUNG: Garantiert die Lesbarkeit der Zahlen */
body.com_phocacart table.table input[name*="quantity"],
body.com_phocacart table.table input.form-control {
    min-width: 65px !important;      /* Unerschütterliche Mindestbreite */
    width: 65px !important;
    padding: 6px !important;
    text-align: center !important;   /* Setzt die Zahlen perfekt in die Mitte */
    display: inline-block !important;
    height: 32px !important;         /* Exakt bündig mit den Buttons */
}

/* TABELLEN-BUTTONS (Grün & Rot) DEZENT NEBENEINANDER */
body.com_phocacart table.table .btn,
body.com_phocacart table.table button,
body.com_phocacart table .btn-sm.ph-btn,
body.com_phocacart table .btn-success.btn-sm,
body.com_phocacart table .btn-danger.btn-sm {
    padding: 5px 10px !important;    /* Kompakte Maße */
    width: auto !important;
    min-width: 38px !important;
    max-width: 45px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
    font-weight: normal !important;
    border-radius: 4px !important;   /* Kleine, edle Rechtecke */
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.com_phocacart table .btn-sm.ph-btn svg {
    width: 13px !important;
    height: 13px !important;
}

/* TITEL-ZENTRIERUNG */
body.com_phocacart h1,
body.com_phocacart .page-header {
    text-align: center !important;
    margin: 0 auto 25px auto !important;
}


/* ------------------------------------------------------------
   D. DIE BEIDEN GROSSEN HAUPTBUTTONS UNTEN (Nur Warenkorb 218)
   ------------------------------------------------------------ */
body.itemid-218 .custom-checkout-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px !important;
    width: 100% !important;
    margin: 40px auto 0 auto !important;
}

body.itemid-218 .custom-checkout-row a.custom-galerie-btn,
body.itemid-218 .custom-checkout-row a.custom-checkout-btn,
body.itemid-218 .custom-checkout-row a.btn {
    display: inline-block !important;
    background-color: #1a2b3c !important; /* Atelier-Blau */
    color: #ffffff !important;
    min-width: 240px !important;
    padding: 10px 30px !important; /* Dein Standard */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    text-align: center !important;
    line-height: 1.5 !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

body.itemid-218 .custom-checkout-row a.custom-galerie-btn:hover,
body.itemid-218 .custom-checkout-row a.custom-checkout-btn:hover {
    background-color: #111c28 !important;
    color: #ffffff !important;
}