/* ========================= Grundschriftart ========================= */ body { font-family: 'Montserrat', sans-serif; } /* ========================= Warenkorb-Header kompakt ========================= */ .w4-cart-head { height: auto !important; /* Höhe automatisch anpassen */ min-height: 0 !important; /* Tailwind-MinHeight überschreiben */ padding: 10px 8px !important; /* oben/unten, links/rechts kompakt */ margin-bottom: 0 !important; /* Abstand nach unten entfernen */ } .wizz-header-title-custom { font-size: 14px !important; /* Schrift kleiner */ line-height: 1 !important; /* Zeilenhöhe kompakt */ } .wizz-header-icon-custom svg { width: 16px !important; /* Icon kleiner */ height: 16px !important; } /* ========================= Produkt-Sections kompakt ========================= */ .wizz-product-content-custom { min-height: 30px !important; /* Mindesthöhe reduzieren */ padding: 2px 4px !important; /* Innenabstand kompakter */ gap: 2px !important; /* Abstand zwischen Title und Buttons */ margin-top: 0 !important; /* Abstand zum Header entfernen */ } /* Produkt-Titel kleiner */ .wizz-product-content-title-custom { font-size: 12px !important; line-height: 1 !important; margin-bottom: 2px !important; } /* Quantity-Button-Gruppe kleiner */ .wizz-product-content-buttonGroup-custom { height: 24px !important; gap: 2px !important; } /* Quantity Input kompakter */ .wizz-product-content-buttonGroup-input-custom { width: 20px !important; /* Breite erzwingen */ height: 24px !important; font-size: 10px !important; padding: 0 !important; line-height: 1 !important; box-sizing: border-box !important; } /* Plus/Minus Buttons kleiner */ .wizz-product-content-buttonGroup-decr-custom, .wizz-product-content-buttonGroup-incr-custom { width: 18px !important; height: 18px !important; padding: 0 !important; } /* Produktbilder kompakter */ .wizz-product-content-custom img, .wizz-product-content-custom .w4-img { max-height: 30px !important; width: auto !important; object-fit: contain !important; } /* ========================= Optional: Gesamter Abstand zwischen Cart-Items enger ========================= */ [class*="wizz-product-content-custom"] + [class*="wizz-product-content-custom"] { margin-top: 2px !important; } /* Produktpreis-Container kompakt */ .wizz-product-price-custom { min-height: 0 !important; /* alte Mindesthöhe entfernen */ height: auto !important; /* Höhe an Inhalt anpassen */ display: flex !important; flex-direction: row !important; /* horizontal ausrichten */ align-items: center !important; /* vertikal mittig */ justify-content: flex-end !important; /* rechtsbündig */ gap: 4px !important; /* Abstand zwischen Icon und Preis */ padding: 0 !important; /* Innenabstand entfernen */ margin: 0 !important; /* Außenabstand entfernen */ } /* Delete Icon kleiner und zentriert */ .wizz-product-price-deleteIcon-custom { width: 18px !important; height: 18px !important; } /* Preis kleiner und mittig */ .wizz-product-price-Price-custom { font-size: 12px !important; line-height: 1 !important; color: rgb(66, 0, 0) !important; display: flex !important; align-items: center !important; /* vertikal zentrieren */ } /* Gesamten Produkt-Container kompakt */ .wizz-product-custom { padding-top: 0 !important; padding-bottom: 0 !important; gap: 4px !important; /* vertikaler Abstand zwischen Produkten */ } /* Entfernt min-height, damit die Box nicht unnötig hoch ist */ .wizz-product-content-custom, .wizz-product-price-custom, #w4-storefront-item { min-height: 0 !important; height: auto !important; } /* Linke Bildbox kompakt */ .wizz-product-img-custom { height: 60px !important; /* optional: kompakter */ width: 60px !important; /* optional: kompakter */ } /* Entfernt Padding innerhalb von Flex-Boxen */ .w4-flex.w4-flex-col.w4-p-[8px] { padding-top: 0 !important; padding-bottom: 0 !important; } .w4-cart-body { height: auto !important; min-height: 0; /* optional, um alte Berechnungen zu überschreiben */ } /* --- UPSell-Inhalt enger & kompakter --- */ /* Container innerhalb der Box: weniger vertikaler Abstand */ #w4-storefront-upsell-item { gap: 4px !important; /* vorher 8px */ } /* Hauptcontainer pro Produktreihe */ .wizz-upsell-productInfor-custom { gap: 4px !important; /* Abstand Bild/Text verringern */ align-items: center !important; } /* Produktbild kleiner machen */ .wizz-upsell-productInfor-img-custom { width: 70px !important; height: 80px !important; } /* Textbereich kompakter */ .wizz-upsell-productInfor-content-custom { gap: 2px !important; } /* Textblock (Titel + Preis) flacher machen */ .wizz-upsell-productInfor-content-title-custom { height: auto !important; /* verhindert abgeschnittenen Inhalt */ gap: 2px !important; justify-content: flex-start !important; } /* Titel und Preis kleiner & dichter */ .wizz-upsell-productInfor-content-title-custom p { font-size: 11px !important; line-height: 14px !important; margin: 0 !important; } .wizz-upsell-productInfor-content-title-custom span { font-size: 11px !important; line-height: 13px !important; } /* Hinzufügen-Button: kleiner, mittig, mit etwas weniger Höhe */ .wizz-upsell-productInfor-content-selectBox-select-btn-custom { height: 28px !important; font-size: 11px !important; border-radius: 999px !important; padding: 0 10px !important; margin-top: 2px !important; } /* Gesamte Produktbox (wo alles drin liegt) */ .wizz-upsell-productBox-custom { height: auto !important; /* nicht fix – passt sich Inhalt an */ padding: 4px !important; gap: 6px !important; } /* Abstand zwischen Gesamtsumme/Gespart und Checkout-Button erhöhen */ .wizz-checkout-total-discounts { margin-bottom: 14px !important; /* etwas mehr Luft nach unten */ } /* Falls die Box selbst zu eng ist */ .w4-calc-height-footer { padding-bottom: 10px !important; /* zusätzlicher Innenabstand unten */ } /* Optional: etwas vertikalen Abstand zwischen Rabattblock und "Gespart" */ .wizz-checkout-discounts { margin-bottom: 6px !important; } /* Mobile: Abstand zwischen Button und Icons verringern */ @media (max-width: 480px) { /* Padding oben/unten der Icon-Wrapper reduzieren */ .wizz-trustbagde-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } /* Optional: Margin zwischen Button und Icons verringern */ .w4-calc-height-footer > .wizz-trustbagde-wrapper { margin-top: 0px !important; } } @media (max-width: 640px) { .w4-cart-body { gap: 0px; /* oder 0px */ } } @media (max-width: 640px) { #w4-storefront-drawer { height: calc(100vh - 40px); /* 40px für Kopfzeile oder noch weniger */ bottom: 0; } .w4-cart-body { height: auto; /* Statt calc(-52px + 100vh) */ flex: 1 1 auto; } .w4-cart-body > *:last-child { margin-bottom: 0; /* Letztes Element Abstand entfernen */ } } /* Footer-Container: Lücke entfernen */ .wizz-trustbagde-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; gap: 4px; /* Abstand zwischen den Icons */ } /* Icons kleiner machen */ .wizz-trustbagde-img-wrapper { height: 24px; /* Höhe reduzieren */ width: auto; /* Breite automatisch proportional */ } .wizz-trustbagde-img-wrapper img { height: 100%; /* passt Bild an Höhe des Wrappers an */ width: auto; /* proportional bleiben */ object-fit: contain; /* damit Bild nicht verzerrt wird */ } @media (max-width: 768px) { /* Footer Grid: Padding/Gaps entfernen */ .w4-gap-[8px].w4-grid { gap: 0 !important; padding: 0 !important; } @media (max-width: 768px) { /* Wrapper über Button und Icons näher zusammenrücken */ .w4-calc-height-footer { padding-top: 0px !important; /* statt 8px oder mehr */ padding-bottom: 0px !important; } /* Abstand zwischen Button und Icons entfernen */ .wizz-trustbagde-wrapper { margin-top: 0px !important; /* evtl. 0px, wenn sehr nah gewünscht */ padding-top: 0 !important; } /* Optional: Button etwas kompakter auf Mobile */ .wizz-checkout-button { padding-top: 5px !important; padding-bottom: 5px !important; } } /* Optional: Icons kleiner machen */ .wizz-trustbagde-img-wrapper { height: 30px; width: auto; } .wizz-trustbagde-img-wrapper img { height: 100%; width: auto; object-fit: contain; } } /* Mobile: max 768px */ @media (max-width: 768px) { .wizz-trustbagde-img-wrapper { width: 40px !important; /* kleiner als vorher */ height: 30px !important; /* kleiner als vorher */ } .wizz-trustbagde-img-wrapper img { width: 100% !important; height: 100% !important; object-fit: contain; } /* Optional: noch enger zusammenrücken */ .wizz-trustbagde-wrapper { gap: 2px !important; padding-top: 0 !important; padding-bottom: 0 !important; } }

Country/Region

Country/Region

Impressum