/* ========================================================================== esd-styles.css - ESD-Basis-Design (Besitzer: ESD, nie vom Kunden editieren) Migriert 1:1 aus Customizer 'Zusaetzliches CSS' (custom_css-Post ID 150, Stand 2026-04-02) am 2026-07-19. Eingebunden via functions.php, wp_enqueue_scripts Prio 999 (nach Plugin-CSS, vor Customizer = Kunden-Slot). ========================================================================== */ /* ============================ INHALTSVERZEICHNIS ============================ 1 Global / Utility 2 Gradient-Design (Apple Intelligence) 3 Tabellen (Global) 4 Elementor — Globale Anpassungen 5 Navigation / Menü 6 Ajax Suchleiste (WPCAS) 7 Plugins (Dritt-Anbieter) · 7a WPML · 7b SliceWP · 7c Complianz 8 WooCommerce — Notices & Info 9 Einzelprodukt-Seite · 9a Add-to-Cart · 9b Variationen · 9c Tabs · 9d Galerie · 9e FBT · 9f Composite · 9g Price by Qty · 9h Quantity-Input 10 WPC Fly Cart (WOOFC) 11 Checkout-Seite · 11a Formular · 11b Bestellübersicht · 11c Versand · 11d Bezahlung · 11e Coupon · 11f Upsell · 11g GZD · 11h Responsive 12 Bestellbestätigung / Order Confirmation ============================ */ /* ============================ 1. GLOBAL / UTILITY ============================ */ /*Akzentfarbe Hilfsklasse*/ .akzent { color: var(--e-global-color-accent); } /*Inter als Variable Font mit voller Gewichts-Achse (Typo-Audit 2026-08-21, design-system.md §3.6). Das Elementor-Custom-Font-Face im Kit (post-15.css) deklariert dieselbe Datei OHNE font-weight-Deskriptor: Der Browser klemmt die wght-Achse auf 400 und faettet 500/600/700 synthetisch - site-weit "falsch fett". Diese Deklaration laedt spaeter (Prio 999), gewinnt bei gleicher Familie und gibt die Achse mit 100 900 frei. Folge-Aufgabe (ToDo): Custom Font im Elementor auf woff2 umstellen, dann entfaellt dieser Block.*/ @font-face { font-family: 'Inter'; src: url('/wp-content/uploads/2026/03/InterVariable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /*Globaler Margin-Reset für Überschriften und Paragraphen. .esd-canvas ist ausgenommen (Bug 21, 2026-07-21): dort tötete das !important ALLE Absatz-Abstände unserer HTML-Seiten — lokal unsichtbar, nur live. Gefahrlos, weil jede Canvas ihren eigenen Reset mitbringt (.esd-canvas *{margin:0}).*/ /* :where() haelt die Spezifitaet exakt bei (0,0,1) wie beim alten `h1,…,p`-Selektor, damit sich AUSSERHALB der Canvas kein Kaskaden-Ergebnis verschiebt. */ :is(h1, h2, h3, h4, h5, h6, p):not(:where(.esd-canvas *)) { margin: 0 !important; } /*Blink-Animation*/ .blink { -webkit-animation: blink 1s step-end infinite; animation: blink 1s step-end infinite; color: var(--e-global-color-f76f02b, #CC0C39); font-weight: 600; } @-webkit-keyframes blink { 50% { visibility: hidden; } } @keyframes blink { 50% { visibility: hidden; } } /*Google reCAPTCHA Badge ausblenden*/ .grecaptcha-badge { visibility: hidden; } /*WooCommerce Preisamount*/ .woocommerce-Price-amount { font-weight: normal } /*WooCommerce-Knoepfe folgen dem Button-Kanon (design-system.md §3.6, Radius-Kanon #31): Pille, Kit-Schrift, 600. Woo setzt `.woocommerce button.button` (0,2,1) mit 3px Radius und schlaegt damit die Kit-Button-Regel (0,1,1) - gemessen 2026-08-21 im Warenkorb (Gutschein anwenden / Warenkorb aktualisieren 3-4px, Cross-Sell-Knoepfe als dritte Variante). Bewusst OHNE Padding/Hoehe: Masse bleiben je Flaeche, nur Form und Schrift werden eins.*/ .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit { border-radius: 100px; font-family: inherit; font-weight: 600; } /*EDD Lieferdatum*/ .pi-edd { font-size: 0.875rem; font-weight: bolder; } /*Checkbox Fix: Elementor padding-Override*/ input[type="checkbox"] { padding: 0 !important; width: auto !important; flex-shrink: 0; } /* 2026-08-26 gestrichen: Der Dienstleistungs-Haken trug hier 20px Innenabstand aus der Customizer-Zeit und wirkte dadurch groesser als der AGB-Satz darueber (Tobias-Befund). Die Abstaende der beiden Rechts-Haken setzt jetzt das Kassen-Modul - gleich, wie ueberall an der Kasse. Rueckweg ueber git. */ /* ============================ 2. GRADIENT-DESIGN (Apple Intelligence) ============================ */ /* Apple-Intelligence-Glow 45° + 1 px Gradient-Border */ .gradient-container { position: relative; /* Basis für ::before-Glow */ border: 1px solid transparent; /* Rahmenbreite (1 px) */ border-radius: 16px; /* Ecken nach Wunsch ändern */ /* Zwei Layer: 1) Innenfläche (hier Weiß – anpassen oder transparent setzen) 2) Farbverlauf, der in den 1 px-Border geclippt wird */ background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(45deg, #0b66ff 0%, #457aff 18%, #7d63ff 32%, #bf5bff 46%, #e34cd4 58%, #f24598 70%, #ff4f5c 82%, #ff6724 100%) border-box; } /* Weicher Verlaufs-Glow */ .gradient-container::before { content: ''; position: absolute; z-index: -1; /* hinter den Container */ border-radius: inherit; /* gleiche Rundung */ pointer-events: none; background: linear-gradient(45deg, #0b66ff 0%, #457aff 18%, #7d63ff 32%, #bf5bff 46%, #e34cd4 58%, #f24598 70%, #ff4f5c 82%, #ff6724 100%); filter: blur(20px); /* Weiches Leuchten */ opacity: 0.9; /* Intensität anpassen */ } /* Apple-Intelligence-Gradient ─ von Blau → Pink → Orange-Rot */ .gradient-text { background: linear-gradient(90deg, #0b66ff 0%, /* intensives Blau */ #457aff 18%, /* helleres Blau */ #7d63ff 32%, /* Blau-Violett */ #bf5bff 46%, /* Violett */ #e34cd4 58%, /* Magenta */ #f24598 70%, /* Pink */ #ff4f5c 82%, /* Koralle */ #ff6724 100% /* leuchtendes Orange-RotAkzent)*/ ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* ============================ 3. TABELLEN (GLOBAL) ============================ */ /* Stellt sicher, dass die Tabellen auf allen Seiten nicht die Bildschirmbreite überschreiten */ table { width: 100%; max-width: 100vw; /* Maximale Breite auf die Bildschirmbreite beschränken */ border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; /* Verhindert das Ausdehnen der Tabelle über die Bildschirmbreite hinaus */ } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; word-wrap: break-word; /* Ermöglicht den Zeilenumbruch von langen Wörtern */ } /* Mobile Ansicht */ @media (max-width: 767px) { .table-responsive { overflow-x: auto; /* Ermöglicht horizontales Scrollen bei kleineren Bildschirmen */ } /* Optional: Verkleinert die Schriftgröße in Tabellen auf mobilen Geräten */ table { font-size: 0.875rem; } } /* ============================ 4. ELEMENTOR — GLOBALE ANPASSUNGEN ============================ */ /*Buttons*/ .elementor-button:hover { transform: scale(1.02) !important; } /* Form Field Fokus-Effekt */ .elementor-field:focus { outline: none; /* Standard-Outline entfernen */ border-color: #00aaff; /* Rahmen-Farbe anpassen */ box-shadow: 0 0 8px rgba(0, 170, 255, 0.7); /* Leucht-Schatten */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* sanfte Animation */ } /*Heading Margin error fix*/ .elementor-widget.elementor-widget-heading>div>h2 { margin: 0; } /*Sticky-Navbar Abstände*/ .e-lazyloaded.elementor-sticky>div>div>div.elementor-element.elementor-element-852e51c.e-con-full.e-flex.e-con.e-child>div { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } /*Elementor Loop Padding*/ .woocommerce-js div.product { padding-left: 0px; padding-right: 0px; } /*Produktpreis Margin*/ .elementor-widget-woocommerce-product-price>div>p { margin: 0px !important; } /* ============================ 5. NAVIGATION / MENÜ ============================ */ /*Menü-Item-Labels (New / Hot / Sale / Custom)*/ .label-new.menu-item>a:after, .label-hot.menu-item>a:after, .label-sale.menu-item>a:after, .label-popular.menu-item>a:after, .label-custom.menu-item>a:after { text-transform: uppercase; font-size: 0.75rem /* 2026-08-21: Floor 12px statt 9px (design-system.md §3.6 Mikro) */; font-weight: bolder; padding: 4px; border-radius: 2px; line-height: 12px; top: 1px; letter-spacing: 0.05em; margin-left: 4px; display: inline-block; position: relative; } .label-new.menu-item>a:after { content: 'New' !important; /* Change Text */ background-color: #6168F2; /* Change BG color */ color: #FFFFFF; /* Change Text color */ } .label-hot.menu-item>a:after { content: 'Hot' !important; background-color: #35CE9D; color: #FFFFFF; } .label-sale.menu-item>a:after { content: 'Sale' !important; background-color: #FC6070; color: #FFFFFF; } .label-custom.menu-item>a:after { content: 'Custom'; background-color: #262626; color: #FFFFFF; } /*NavBar VVK ROT*/ #e-n-menu-title-1621>a>span.e-n-menu-icon>span.icon-inactive>i { color: var(--e-global-color-f76f02b, #CC0C39); } #e-n-menu-title-1621>a>span.e-n-menu-icon>span.icon-active>i { color: var(--e-global-color-f76f02b, #CC0C39); } /* ============================ 6. AJAX SUCHLEISTE (WPCAS) ============================ */ #wpcas-area>div.wpcas-area-mid.wpcas-search>div.wpcas-popular-keywords>div>span { font-size: 1.1875rem; } /* ============================ 7. PLUGINS (DRITT-ANBIETER) ============================ */ /* --- 7a. WPML --- */ /*Since WPML: Notices ausblenden*/ body>div.woocommerce-notices-wrapper>div, body>div.woocommerce-info { display: none; } body>div.wpml-ls-statics-footer.wpml-ls.wpml-ls-legacy-list-horizontal { margin: 0px !important; } /* --- 7b. SliceWP Affiliate --- */ #slicewp-affiliate-account-tab>div.slicewp-tab.slicewp-active>table>thead>tr>th { width: auto !important; } #slicewp-affiliate-account-nav-tab>ul { display: flex !important; justify-content: center !important; align-items: center !important; } #slicewp-affiliate-account-tab>div.slicewp-tab.slicewp-active table { table-layout: fixed !important; width: 100% !important; } /* Slice WP - registration/Anmeldung: Styles the form buttons */ body .slicewp-button-primary { background: #0A84FF; color: #fff; padding: 10px 30px; border-radius: 50px; } body .slicewp-button-primary:hover { background: #0A84FF; } /* Styles the form fields */ body .slicewp-field-wrapper input[type="text"], body .slicewp-field-wrapper input[type="password"], body .slicewp-field-wrapper input[type="email"], body .slicewp-field-wrapper input[type="url"], body .slicewp-field-wrapper textarea, body .slicewp-field-wrapper select { border: 1px solid #D7DEE4; padding: 5px 10px; background: #ffffff; border-radius: 5px; } /* --- 7c. Complianz (DSGVO) --- */ /*Compliance-Button ausblenden*/ #cmplz-manage-consent>button { display: none; } /* ============================ 8. WOOCOMMERCE — NOTICES & INFO ============================ */ /*Woocommerce-info Icon ausblenden / WP Slice Guthaben*/ body>div.woocommerce-notices-wrapper>div.woocommerce-info::before, .woocommerce-info::before { display: none !important; } .woocommerce-info { font-size: 1.125rem !important; } .elementor-widget-woocommerce-checkout-page>div>div>div.woocommerce-info, .e-checkout__order_review { margin: 0 !important; } .elementor-element-ca8fc8c.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>div.woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; } .elementor-element.elementor-element-ca8fc8c.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>div.woocommerce-info>a { margin-top: 0px; margin-left: 20px; } .elementor-element-ca8fc8c.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>div.woocommerce-info { padding-bottom: 20px; } /*2026-08-21: Regel fuer die Checkout-Altfassung (Elementor-ID 15307) entfernt - der Post existiert weder auf Staging noch auf Prod (wp post get), der Selektor traf nie. Die aktive Kasse ist Seite 10.*/ /* body p { display: none; } ENTFERNT – Selektor war zu aggressiv (alle direkten p-Tags in body). Falls ein Footer-Hinweis ausgeblendet werden muss, gezielten Selektor eintragen, z.B.: .site-footer p { display: none; } */ /* ============================ 9. EINZELPRODUKT-SEITE ============================ */ /* --- 9a. Add-to-Cart Button --- */ /* ATC-Button Schriftgröße */ .elementor-add-to-cart--align-justify.elementor-widget__width-inherit.e-add-to-cart--show-quantity-yes.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>button, .elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.single_variation_wrap>div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled>button, .elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.single_variation_wrap>div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled>button { font-size: 1rem; } .elementor-add-to-cart--align-justify.elementor-widget__width-inherit.e-add-to-cart--show-quantity-yes.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.single_variation_wrap>div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled { padding: 0px !important; } /*ATC / FBT / FlyCart Button-Radius*/ .woocommerce-variation-add-to-cart-disabled>div.e-atc-qty-button-holder>button, .woobt-summary>div.woobt-actions>div, .woobt-actions>div>button, #woofc-area>div>div.woofc-area-bot>div.woofc-action>div>div>a, .woocommerce-variation-add-to-cart-enabled>div.e-atc-qty-button-holder>button, .elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.e-atc-qty-button-holder>button { border-radius: 50px !important; } /*Abstände ATC*/ .e-add-to-cart--show-quantity-yes.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>p { padding-bottom: 10px !important; } /*Abstand FBT zu ATC Button*/ .elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>div { padding-top: 15px; } /*Ausblenden der Bestätigungsmeldung nach AddToCart*/ .elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>div>div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled>div.e-atc-qty-button-holder>a { display: none; } /*Ausblenden warenkorb anzeigen nach ATC*/ .elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.e-atc-qty-button-holder>a, .variations_button.woocommerce-variation-add-to-cart-enabled>a, .elementor-add-to-cart--align-justify.elementor-widget__width-inherit.e-add-to-cart--show-quantity-yes.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>a { display: none; } /*Ausblenden der Roten Nicht-verfügbar-Meldung (VVK)*/ .elementor-add-to-cart--layout-stacked.elementor-widget__width-inherit.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>p { display: none; } /*Ausblenden Nicht lieferbar VVK*/ .e-add-to-cart--show-quantity-yes.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>p { display: none !important; } /*PP PayLater Button Abstand*/ div.wc-ppcp-paylater-msg__container { margin-top: 20px !important; } /* --- 9b. Variationen (WooVariation Swatches) --- */ /*Radien Rund Auswahl Variation box*/ .woovr-variations>div { border-radius: 5px; } .woovr-variations.woovr-variations-grid-2 { padding-top: 0 !important; padding-bottom: 10px !important; } @media only screen and (max-width: 768px) { .woovr-variations.woovr-variations-grid-2 { margin-left: -5px !important; margin-right: -25px !important; } .woovr-variations.woovr-variations-grid-2>* { padding-left: 5px !important; padding-right: 5px !important; margin-bottom: 0px !important; margin-top: 10px !important; margin-left: 5px !important; margin-right: 5px !important; } } /*Ausblenden von Produkt-Variations-Beschreibung über ATC-Button (doppelt wegen Radio-Buttons)*/ .elementor-widget-woocommerce-product-add-to-cart>div>div>form>div.single_variation_wrap>div.woocommerce-variation.single_variation>div.woocommerce-variation-description>p { display: none; } /*Ausblenden von Variation-Preis*/ .single_variation_wrap>div.woocommerce-variation.single_variation>div.woocommerce-variation-price { display: none; } /*Ausblenden Variable Produkt Haken*/ .woovr-variations[class*="woovr-variations-grid"] .woovr-variation::before { position: relative; top: 0px; right: 0px; margin-bottom: 10px; } /*Variations-Button Abstand*/ .elementor-add-to-cart--align-justify.elementor-add-to-cart--layout-stacked.elementor-widget__width-inherit.elementor-widget.elementor-widget-woocommerce-product-add-to-cart>div>div>form>table>tbody>tr>th { margin-bottom: 0px; padding-bottom: 0px; } /* --- 9c. Produkt-Tabs --- */ .elementor-widget-woocommerce-product-data-tabs>div>div>ul { padding: 0px !important; } .elementor-widget-woocommerce-product-data-tabs>div>div>ul>li { margin-left: 0px !important; margin-right: 0px !important; } [id^="tab-title-"]>a { padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* Linksbündig statt Blocksatz (Tobias 2026-07-19 — gesperrte Wortabstände). "body"-Präfix: gewinnt gegen die alte justify-Kopie im noch aktiven Customizer-Block (bis das Feld geleert ist), danach weiterhin korrekt. */ body #tab-description { text-align: left !important; text-justify: auto !important; } /* Desktop (ab 768px Breite): 20px oben */ @media only screen and (min-width: 768px) { #tab-description { padding-top: 20px !important; } } /* Mobile (bis 767px Breite): 10px oben */ @media only screen and (max-width: 767px) { #tab-description { padding-top: 10px !important; } /* Alle Elemente, deren ID mit "tab-woost" beginnt */ [id^="tab-woost"] { padding-top: 10px !important; padding-left: 10px !important; padding-right: 10px !important; text-align: justify !important; text-justify: inter-word !important; } } /* Beschreibungs-Tab: Typografie & Rhythmus (Tobias 2026-07-19). Überschriften/Absätze/Listen klebten aneinander, Listen-Marker standen links über den Text hinaus. !important ist Pflicht, weil weiter oben eine globale Regel `h1..h6,p { margin:0 !important }` gilt (schlägt sonst alles). */ #tab-description p { margin: 0 0 1em !important; } #tab-description h2, #tab-description h3, #tab-description h4 { margin: 1.6em 0 0.5em !important; line-height: 1.25 !important; } #tab-description > *:first-child { margin-top: 0 !important; } #tab-description ul, #tab-description ol { margin: 0 0 1.1em !important; padding-left: 1.4em !important; } #tab-description li { margin: 0 0 0.35em !important; } /* ESD-Line-Icons Trust-Strip Gruppe 1 (2026-07-19) - ersetzt FA-Solid via mask-image, Farbe erbt currentColor (#0066FF), Groesse 1em folgt der Icon-Groesse. Reversibel: Block entfernen. Quelle der SVGs: website/assets/icons/esd/ (SoT: knowledge/icon-system.md). */ .elementor-element-49d10df .elementor-icon, .elementor-element-93446e7 .elementor-icon, .elementor-element-435000bd .elementor-icon, .elementor-element-308f57bb .elementor-icon { display:inline-flex; align-items:center; justify-content:center; } .elementor-element-49d10df .elementor-icon>svg, .elementor-element-93446e7 .elementor-icon>svg, .elementor-element-435000bd .elementor-icon>svg, .elementor-element-308f57bb .elementor-icon>svg { display:none !important; } .elementor-element-49d10df .elementor-icon::after, .elementor-element-93446e7 .elementor-icon::after, .elementor-element-435000bd .elementor-icon::after, .elementor-element-308f57bb .elementor-icon::after { content:""; display:block; width:1em; height:1em; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .elementor-element-49d10df .elementor-icon::after { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%203%2019%206v5c0%204.6-2.9%207.6-7%209-4.1-1.4-7-4.4-7-9V6z%22%2F%3E%20%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%20%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%203%2019%206v5c0%204.6-2.9%207.6-7%209-4.1-1.4-7-4.4-7-9V6z%22%2F%3E%20%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%20%3C%2Fsvg%3E"); } .elementor-element-93446e7 .elementor-icon::after { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M11.5%203H5a2%202%200%200%200-2%202v6.5a2%202%200%200%200%20.6%201.4l7.5%207.5a2%202%200%200%200%202.8%200l6.5-6.5a2%202%200%200%200%200-2.8l-7.5-7.5A2%202%200%200%200%2011.5%203z%22%2F%3E%20%3Ccircle%20cx%3D%227.75%22%20cy%3D%227.75%22%20r%3D%221.25%22%2F%3E%20%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M11.5%203H5a2%202%200%200%200-2%202v6.5a2%202%200%200%200%20.6%201.4l7.5%207.5a2%202%200%200%200%202.8%200l6.5-6.5a2%202%200%200%200%200-2.8l-7.5-7.5A2%202%200%200%200%2011.5%203z%22%2F%3E%20%3Ccircle%20cx%3D%227.75%22%20cy%3D%227.75%22%20r%3D%221.25%22%2F%3E%20%3C%2Fsvg%3E"); } .elementor-element-435000bd .elementor-icon::after { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%20%3Cpath%20d%3D%22M5.5%2019.5C5.5%2015.9%208.4%2014%2012%2014s6.5%201.9%206.5%205.5%22%2F%3E%20%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%20%3Cpath%20d%3D%22M5.5%2019.5C5.5%2015.9%208.4%2014%2012%2014s6.5%201.9%206.5%205.5%22%2F%3E%20%3C%2Fsvg%3E"); } .elementor-element-308f57bb .elementor-icon::after { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2216%22%20r%3D%223.5%22%2F%3E%20%3Cpath%20d%3D%22M10.5%2013.5%2020%204%22%2F%3E%20%3Cpath%20d%3D%22M16%208l2.5%202.5%22%2F%3E%20%3Cpath%20d%3D%22M18.5%205.5%2021%208%22%2F%3E%20%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2216%22%20r%3D%223.5%22%2F%3E%20%3Cpath%20d%3D%22M10.5%2013.5%2020%204%22%2F%3E%20%3Cpath%20d%3D%22M16%208l2.5%202.5%22%2F%3E%20%3Cpath%20d%3D%22M18.5%205.5%2021%208%22%2F%3E%20%3C%2Fsvg%3E"); } /* --- 9d. Bilder-Galerie --- */ .elementor-sticky.animated.fadeIn.elementor-sticky--effects.elementor-sticky--active.elementor-section--handles-inside>div>div>ol { padding-top: 5px; } /* --- 9e. WPC Frequently Bought Together (FBT / woobt) --- */ /*Ausblenden "This product" 1. Zeile*/ .woobt-product-this { display: none !important; } /* FBT ATC Button volle Breite */ .woobt-actions .woobt-form .button { display: block; width: 100%; } /*Icon bought together size*/ .woobt-layout-default .woobt-products .woobt-product .woobt-thumb { width: 90px; flex: 0 0 100px; } /*FBT Preis*/ .woobt-price>div.woobt-price-new>span>span>bdi { font-size: 1.1875rem; } /*FBT Beschreibungstext*/ .woobt-title>div.woobt-description { font-size: 1.125rem; } /*Überschrift FBT Einzelprodukte*/ div.woobt-title>span>a { font-weight: 500; line-height: 30px; color: var(--e-global-color-primary, #1A1A1A); } /*Ausblenden "x1" vor FBT Titel*/ div.woobt-title>span>span { display: none; } /*Verfügbarkeit in FBT*/ .woobt-availability>p>span.ast-stock-avail { font-size: 0.875rem; } /*Plus/Minus-Buttons in FBT-Qty ausblenden*/ .woobt-title>div.woobt-quantity.woobt-quantity-plus-minus>div>div.woobt-quantity-input-minus, .woobt-title>div.woobt-quantity.woobt-quantity-plus-minus>div>div.woobt-quantity-input-plus { display: none !important; } /*Ausrichtung Qty FBT auf Mobile*/ @media only screen and (max-width: 767px) { .woobt-title>div.woobt-quantity.woobt-quantity-plus-minus { display: flex; justify-content: center; } } /* --- 9f. WPC Composite Products (wooco) --- */ .wooco-qty-label { padding-right: 10px !important; } /*Plus/Minus-Buttons in Composite-Qty ausblenden*/ .wooco_component_product_selection_list_item_qty.wooco_component_product_selection_item_qty.wooco-qty-wrap>span.wooco-qty-input>span.wooco_component_product_qty_btn.wooco_component_product_qty_minus.wooco-minus, .wooco_component_product_selection_list_item_qty.wooco_component_product_selection_item_qty.wooco-qty-wrap>span.wooco-qty-input>span.wooco_component_product_qty_btn.wooco_component_product_qty_plus.wooco-plus { display: none !important; } /* --- 9g. WPC Price by Quantity (wpcpq) --- */ /*Add-to-Cart Button in Price-by-Quantity ausblenden*/ .wpcpq-item.wpcpq-item>div.wpcpq-item-atc>button { display: none; } /* --- 9h. Quantity-Input (global) --- */ /* Minus/Plus-Buttons in WPC PQ Quantity so klein wie möglich */ .woopq-quantity-input-minus, .woopq-quantity-input-plus { max-width: 40px !important; max-height: 40px !important; padding: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Quantity-Input (mittleres Feld) so schmal wie möglich */ input.qty { max-width: 3ch !important; /* verhindert, dass es breiter wird */ padding: 0 !important; /* Innenabstand entfernen */ margin: 0 !important; /* Außenabstand entfernen */ box-sizing: content-box !important; text-align: center !important; /* Zahl zentrieren */ } /* Abstand Mengenfeld -> Add-to-Cart-Button (Produktseite, 2026-07-19): Pro-Elements setzt margin-inline-end:auto am .quantity-Wrapper — der Button füllt die Restbreite, "auto" kollabiert zu 0px, Feld klebt am Button. */ .woocommerce div.product form.cart div.quantity { margin-inline-end: 16px !important; } /* Native Spinner-Pfeile ausblenden (2026-07-24): Der Chromium-Spinner malt sich ein eigenes helles Pill-Kästchen, das sich im Sticky-Kaufcontainer sichtbar gegen den Frost-Blur absetzt (Tobias-Screenshot). Menge bleibt tippbar; iOS zeigt ohnehin keine Spinner. */ .woocommerce div.product form.cart input.qty::-webkit-inner-spin-button, .woocommerce div.product form.cart input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } .woocommerce div.product form.cart input.qty { -moz-appearance: textfield !important; appearance: textfield !important; } /* ============================ 10. WPC FLY CART (WOOFC) ============================ */ /* Kopfzeile: auf dem Telefon flacher (Tobias 2026-08-23). Das Plugin gibt ihr feste 48px (Style-Klasse in woo-fly-cart-premium/assets/css/frontend.css) - eine Einstellung dafuer gibt es nicht, geprueft 2026-08-23. `line-height` allein reicht NICHT: Die Hoehe steht als `height` fest, gemessen blieben es sonst 48px trotz 40er Zeilenhoehe. Auf dem Rechner bleibt sie wie sie war. */ @media (max-width: 767px) { .woofc-area .woofc-area-top, .woofc-area .woofc-area-heading, .woofc-area .woofc-close { height: 40px !important; line-height: 40px !important; } } /* Eine Hoehe fuer alle Knoepfe im Panel (Tobias 2026-08-23, design-system.md Abschnitt 3.6: "eine Hoehe pro Viewport" fuer untereinanderstehende CTAs). Gemessen war "Zur Kasse" 40px, Apple Pay und PayPal daneben 44px. Der Anker ist 44: Apples Schaltflaeche traegt `min-height: 44px` und darf nicht flacher werden. */ .woofc-area .woofc-area-bot .woofc-action a { height: 44px !important; line-height: 40px !important; } /* Breite des Flycarts: verankert in `aufbau-kopf-fuss.php` Block 12/13 (WPC-Panels gleich breit, laeuft auf jeder Installation) - kein zweiter Wert hier, sonst zwei Stellen zum Pflegen (Tobias 2026-09-17). */ /*Flycart Z-Index in Vordergrund*/ #woofc-area>div { z-index: 1000 !important; } /* 1) Stelle sicher, dass jeder Item-Block position:relative hat */ #woofc-area .woofc-area-mid.woofc-items>div { position: relative; } /* 2) Qty-Control ganz nach rechts oben platzieren */ #woofc-area .woofc-item-qty.woofc-item-qty-plus-minus { position: absolute; top: 50%; /* vertikal zentrieren */ right: 8px; /* Abstand von rechts */ transform: translateY(-50%); z-index: 5; } /* 2) Remove-Span absolut in die obere rechte Ecke des Items verschieben Causes suggested products error Was kunden gefällt was kunden auch kaufen*/ #woofc-area>div>div.woofc-area-mid.woofc-items>div>div>span { position: absolute; top: 20px; /* Abstand von oben */ right: 0px; /* Abstand von rechts */ cursor: pointer; z-index: 10; /* sicher über dem Rest */ } /*Titel*/ #woofc-area>div>div.woofc-area-mid.woofc-items>div>div>div.woofc-item-info>span.woofc-item-title>a { font-weight: 600 !important; display: inline-block; font-size: 1rem !important; /* 2026-08-21 Skalen-Rundung 15->16 (Tobias) */ } .woofc-item-info>span.woofc-item-title { padding-right: 90px !important; } /*im Set gekauft Typo*/ #woofc-area>div>div.woofc-area-mid.woofc-items>div>div>div.woofc-item-info>span.woofc-item-title>span { font-weight: 400; } /*Preise*/ #woofc-area>div>div.woofc-area-mid.woofc-items>div>div>div.woofc-item-info>span.woofc-item-price>span.original-price>span>bdi>span { font-size: 0.875rem !important; } .woofc-items>div>div>div.woofc-item-info>span.woofc-item-price>span.original-price>span>bdi { font-size: 0.875rem; } .woofc-item-info>span.woofc-item-price>span.woocommerce-Price-amount.amount>bdi { font-size: 1rem !important; } /* Abstand nach dem durchgestrichenen Originalpreis erhöhen */ #woofc-area .woofc-item-info .woofc-item-price>span.original-price:nth-child(1) { margin-bottom: 8px; /* hier kannst Du 8px nach Belieben anpassen */ } /* 1) Nur dem allerersten .original-price-Span im Preis-Block ein "Originalpreis: " voransetzen */ #woofc-area .woofc-item-info .woofc-item-price>span.original-price:nth-child(1)::before { content: "Originalpreis: "; font-weight: normal; font-size: 0.875rem !important; } /*Plus/Minus-Buttons in Sidecart / FlyCart ausblenden*/ .woofc-item-qty.woofc-item-qty-plus-minus>div>div>div>div.woopq-quantity-input-minus, .woofc-item-qty.woofc-item-qty-plus-minus>div>div>div>div.woopq-quantity-input-plus { display: none !important; } /*FlyCart Typo Fett/Bold Zwischensumme und Versand nicht mehr fett (Tobias 2026-09-29: Zwischenzeilen kleiner und leise, nur "Gesamt" laut - esd-core `esd-flycart-zeile-aufbau`). "Gesamt" ebenfalls raus (zweite Sichtung 2026-09-29: duenner, 600 aus esd-core). "Originalpreis" ebenfalls raus (Tobias 2026-10-06: duenn und schwarz - esd-core `aufbau-sidecart.php`). */ /*Abstände Flycart*/ #woofc-area>div>div.woofc-area-bot>div.woofc-shipping-cost.woofc-data { padding-bottom: 10px; } #woofc-area>div>div.woofc-area-bot { padding: 0px !important; } /*Coupon-Input Typo*/ .woofc-area.woofc-style-02 .woofc-area-bot .woofc-coupon .woofc-coupon-input .woofc-coupon-check { font-weight: 100; text-transform: none; font-size: 1.125rem; } /*Couponcode Eingabe*/ #woofc-area>div>div.woofc-area-bot>div.woofc-coupon>div>input.woofc-coupon-check, #woofc-area>div>div.woofc-area-bot>div.woofc-coupon>div>input.woofc-coupon-code { font-weight: 400 !important; font-size: 0.875rem !important; } /* Button Design */ #woofc-area .woofc-area-bot .woofc-action .woofc-action-inner>div a { border-radius: 0px; background-color: #000; border-color: #000; border-width: 2px; color: #fff; text-transform: none; font-weight: 500; } /* Button Design on hover */ #woofc-area .woofc-area-bot .woofc-action .woofc-action-inner>div a:hover { border-radius: 0px; background-color: #fff; border-color: #000; border-width: 2px; color: var(--e-global-color-primary, #1A1A1A); text-transform: none; font-weight: 500; } /* Free Shipping Bar */ #woofc-area .woofc-area-bot .woofc-free-shipping-bar.woofc-data, #woofc-area .woofc-area-bot .woofc-free-shipping-bar.woofc-data .wpcfb-progress-bar { margin-top: 0; } #woofc-area>div>div.woofc-area-bot>div.woofc-free-shipping-bar.woofc-data>div { padding: 0px !important; } /*Upsell-Funnel Produktbild*/ #woofc-area>div>div.woofc-area-bot>div.woofc-upsell-funnel>div>div>div.wpcuf-uf-content>div>div>div.wpcuf-uf-product-image.wpcuf-image>a>img { height: 100px !important; object-fit: contain; /* Optional, um das Seitenverhältnis zu erhalten */ } /* Leer-Cart-Vorschläge (suggested_empty=featured, aktiviert 2026-07-24): Plugin-Kopf "Was anderen gefällt" kollabiert auf 0px Höhe (Span + 1000px-Deko-Linie absolut positioniert) und überlagert die erste Produktkarte — Kopf als normale Zeile über die Karten setzen, Deko-Linie aus. */ .woofc-area .woofc-suggested { display: block !important; padding: 18px 25px !important; } .woofc-area .woofc-suggested-heading { display: block !important; position: static !important; float: none !important; width: auto !important; text-align: left !important; margin: 0 0 14px !important; } .woofc-area .woofc-suggested-heading span { background: none !important; padding: 0 !important; font-weight: 600 !important; position: static !important; display: inline-block !important; transform: none !important; left: auto !important; right: auto !important; } .woofc-area .woofc-suggested-heading:before, .woofc-area .woofc-suggested-heading:after, .woofc-area .woofc-suggested-heading span:before, .woofc-area .woofc-suggested-heading span:after { display: none !important; } .woofc-area .woofc-suggested-products { clear: both !important; } /* Vorschlags-Block ans untere Panel-Ende (Tobias 2026-07-24 — Plugin hat KEINE native Positions-Option für suggested, nur Panel-/Badge-Position; geprüft in class-backend.php). Mid-Container wird flex-column, der Block rutscht per margin-top:auto ans Ende. */ .woofc-area .woofc-area-mid { display: flex !important; flex-direction: column !important; } .woofc-area .woofc-area-mid .woofc-suggested { margin-top: auto !important; } /* ============================ 11. CHECKOUT-SEITE ============================ */ /* Schrift-Vererbung (Typo-Audit 2026-08-21, design-system.md §3.6): Das Pro-Elements- Checkout-Widget setzt am Wrapper "font-family: Roboto, sans-serif" (widget-woocommerce-checkout-page.min.css). Bis dahin ueberdeckten die Montserrat- Widget-Einstellungen der Kassen-Seite das; nach deren Entfernung fiel der ganze Kassenbereich auf Roboto statt auf die Kit-Schrift. `inherit` statt eines Schriftnamens: Die Kasse folgt dem Kit, ohne hier einen zweiten Schrift-Ort zu schaffen. Gewinnt ohne !important - gleiche Spezifitaet (0,1,0), spaeter geladen (Prio 999). 2026-08-21 (Stufe 4): Dasselbe Roboto sitzt auch in den Wrappern der uebrigen Pro-Elements- Woo-Widgets (Warenkorb, Konto, Bestellbestaetigung - grep -rl Roboto pro-elements/assets/css). Sichtbar wurde es am Konto-Anmelden-Knopf, sobald `.woocommerce button.button` auf inherit stand: Der Knopf erbte dann das Widget-Roboto statt der Kit-Schrift. */ .elementor-widget-woocommerce-checkout-page, .elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-my-account, .elementor-widget-woocommerce-purchase-summary { font-family: inherit; } /* Preise mit Tabellenziffern (design-system.md 3.6 "Preis 1.5rem tabular"): gleiche Ziffernbreite, damit Betraege in Listen und Summen auf einer Kante stehen. Tobias-Entscheid 2026-08-22 (Produktpreis von 1.2rem/900 auf 1.5rem/600 im Template 94). */ .woocommerce .price, .woocommerce-Price-amount, .esd-komponenten-preis, .cart_totals .amount, .woocommerce-checkout-review-order-table .amount { font-variant-numeric: tabular-nums; } /* Woo-Hinweise (Pro-Elements woocommerce-notices.css) setzen Roboto direkt an Links und Knoepfen der Notices mit (0,2,1) - inherit am Wrapper reicht dort nicht, deshalb !important (Skill-Regel: Override gegen Plugin-CSS). Gemessen 2026-08-21 per curl des Plugin-CSS. */ .e-wc-message-notice *, .e-wc-error-notice *, .e-wc-info-notice * { font-family: inherit !important; } /* Konto-Widget (Pro-Elements widget-woocommerce-my-account.css): Login-/Register-Felder und Knoepfe stehen dort hart auf 14px (.form-row .input-text, select, .button - gemessen 2026-08-22 per curl des Plugin-CSS und im DOM: Felder 14px, Anmelden-Knopf 14px), unter dem Feld-Floor 1rem (iOS-Zoom) und dem Button-Kanon 1rem/600 aus design-system.md 3.6. Plugin-Selektoren tragen :not(...)-Ketten mit (0,5,x), deshalb !important (Skill-Regel: Override gegen Plugin-CSS). Typo-Audit 4D. */ .elementor-widget-woocommerce-my-account .woocommerce .form-row .input-text, .elementor-widget-woocommerce-my-account .woocommerce .form-row select { font-size: 1rem !important; border-radius: 12px !important; } .elementor-widget-woocommerce-my-account .woocommerce button.button, .elementor-widget-woocommerce-my-account .woocommerce a.button { font-size: 1rem !important; font-weight: 600 !important; border-radius: 100px !important; } /* Hinweis-Knoepfe im Konto (Woo-Notices wie "E-Mail-Adresse bestaetigen", Germanized-"Rechnung"): Woo-Core malt sie grau auf grau (#ebe9eb/#515151). Tobias-Sichtung 2026-08-22: Klein-Knoepfe im Konto weiss mit Marken-Blau-Rand und -Schrift, Pille - dieselbe Fassung wie die Tabellen- Knoepfe des Konto-Widgets (Post 11, tables_button_*). Hover invertiert. */ .elementor-widget-woocommerce-my-account .woocommerce-info .button, .elementor-widget-woocommerce-my-account .woocommerce-message .button, .elementor-widget-woocommerce-my-account .woocommerce-notices-wrapper .button { background: #FFFFFF !important; color: var(--e-global-color-accent, #0066FF) !important; border: 1px solid var(--e-global-color-accent, #0066FF) !important; padding: 0.5em 1.25em !important; } .elementor-widget-woocommerce-my-account .woocommerce-info .button:hover, .elementor-widget-woocommerce-my-account .woocommerce-message .button:hover, .elementor-widget-woocommerce-my-account .woocommerce-notices-wrapper .button:hover { background: var(--e-global-color-accent, #0066FF) !important; color: #FFFFFF !important; } /* Abstaende, die Woo nicht setzt (Tobias-Sichtung 2026-08-22): Hinweis-Knopf klebte am Text, zwei Aktions-Knoepfe in der Bestellliste ("Anzeigen" + "Rechnung") klebten aneinander. */ .elementor-widget-woocommerce-my-account .woocommerce-info .button, .elementor-widget-woocommerce-my-account .woocommerce-message .button { margin-left: 16px !important; } .elementor-widget-woocommerce-my-account .woocommerce-orders-table__cell-order-actions .button + .button, .elementor-widget-woocommerce-my-account td.woocommerce-orders-table__cell-order-actions a + a { margin-left: 8px !important; } /* Formular-Kontrollelemente (Elementor-Forms: Checkbox, Acceptance, Radio) einheitlich: Der Browser-Default malt je nach Feldtyp ein weisses Kaestchen, das Acceptance-Feld daneben ist dunkel angepasst - zwei Stile im selben Formular (Kontakt, gemessen 2026-08-21). accent-color faerbt den Haken im Marken-Blau, 1rem-Kasten als Touch-Ziel. Farbwahl vom Kit (Typo-Audit 4D). */ .elementor-field-type-checkbox input[type="checkbox"], .elementor-field-type-acceptance input[type="checkbox"], .elementor-field-type-radio input[type="radio"] { accent-color: var(--e-global-color-accent, #0066FF); width: 1rem; height: 1rem; margin: 0 .5em 0 0; vertical-align: -0.125em; } /* --- 11a. Formular / Kundendetails --- */ /* Fokus-Effekt für alle Eingabefelder (Rand beim Reinklicken) */ .woocommerce-checkout input[type="text"]:focus, .woocommerce-checkout input[type="email"]:focus, .woocommerce-checkout input[type="tel"]:focus, .woocommerce-checkout textarea:focus, .woocommerce-checkout select:focus, #customer_details input:focus, .elementor-field-group input:focus { border-color: var(--e-global-color-accent, #000) !important; outline: none !important; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Styling der Kassen-Labels (Überschriften der Formularfelder) */ .woocommerce-checkout label { font-weight: 500; margin-bottom: 5px; display: block; font-size: 0.875rem; color: var(--e-global-color-text, #2C2C2E); } /* Anpassung der Input-Felder (Höhe, Innenabstand und kantiges Design) */ /* Seitenrand 12px (2026-10-06, Abstands-Skala): Mit 10px stand der getippte Text 2px links vom schwebenden Label (esd-core setzt es auf 13px = 12 + 1 Rahmen) und die Einstellung der Kassen-Vorlage (12) kam nicht an - diese Regel traegt !important. */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea { padding: 10px 12px !important; border: 1px solid #dcdcdc; border-radius: 0px; background-color: #fff; } /* Stellt sicher, dass das Firmenfeld die volle Breite einnimmt */ .woocommerce-billing-fields .form-row-wide { clear: both; width: 100%; } /* Entfernt das "(wahlfrei)"-Suffix für ein sauberes Layout */ .woocommerce-checkout label .optional { display: none !important; } /*Form-Layout (zweispaltig)*/ .elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div:not(.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout) { display: flex; gap: 0; } .elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-start, .elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end { flex: 1 1 50%; box-sizing: border-box; } /* 55 zu 45 ab Tablet wie der Standard-Aufbau (esd-core 0.6.566, Tobias 2026-09-29) - die Regel oben traegt dieselbe Spezifitaet, darum hier gleich spezifisch dahinter. */ @media (min-width: 769px) { .elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-start { flex: 0 0 55%; } .elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end { flex: 1 1 45%; } } /*Kundendetails Col-1*/ #customer_details>div.col-1 { padding-top: 0 !important; } #customer_details>div.col-1>div { padding-top: 20px; } #customer_details>div.col-1 { margin: 0px !important; padding-bottom: 0 !important; padding-left: 0px !important; } /*Kundendetails Col-2 / Versandfelder*/ #customer_details>div.col-2>div.woocommerce-shipping-fields { padding-bottom: 20px !important; } #customer_details>div.col-2>div.woocommerce-shipping-fields { padding-top: 20px !important; } #customer_details>div.col-2>div.woocommerce-shipping-fields>div { padding-left: 0px !important; padding-bottom: 0px !important; } #customer_details>div.col-2>div.woocommerce-additional-fields { padding: 0 !important; border-top: 1px solid #ddd; margin-top: 10px; /* margin-right 20px entfernt (Look-Umzug 2026-09-28): Den Abstand zur Spaltenmitte gibt seit der Uebergabe der Flaeche `kasse` der Standard-Aufbau (Spalte col-2 padding-right 20px). Beides zusammen machte die Bestellhinweise 20px schmaler als die uebrigen Felder. */ } @media (max-width: 768px) { #customer_details>div.col-2>div.woocommerce-additional-fields { border-top: none !important; margin-top: 0 !important; margin-right: 0 !important; } #customer_details>div.col-2>div.woocommerce-shipping-fields>div { padding: 0px !important; margin: 0px !important; } } #ship-to-different-address { padding: 0px !important; } #ship-to-different-address { margin: 0px !important; } /*Pickup-Location*/ #billing_pickup_location_notice>div.choose-pickup-location, #shipping_pickup_location_notice>div.choose-pickup-location { padding-top: 10px; } #billing_pickup_location_notice>div.choose-pickup-location>p>a, #shipping_pickup_location_notice>div.choose-pickup-location>p>a { font-size: 0.875rem; } /* 2026-08-28 (Tobias-Entscheid: ESD verkauft international): Das LAND ist wieder sichtbar. Es stand hier auf display:none und damit fest auf DE - waehrend WooCommerce gleichzeitig 250 Laender zum Verkauf zulaesst. Ein Schweizer Kaeufer bekam also zwangsweise ein deutsches Rechnungsland: falsche Steuer, falsche Rechnung, und die Telefon-Normalisierung raet DE. Der BUNDESSTAAT bleibt ebenfalls sichtbar - in den USA, Kanada und Australien ist er Pflichtfeld; WooCommerce blendet ihn bei Laendern ohne Staaten von selbst aus, ein pauschales display:none haette die Bestellung dort blockiert. Der Adresszusatz bleibt ausgeblendet - er ist nirgends Pflicht. */ #billing_address_2_field { display: none !important; } /*Elementor-ID-spezifisch: Checkout Seite (ID 10)*/ body>div.elementor.elementor-10>div.elementor-element.elementor-element-b1eeb23.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded>div>div.elementor-element.elementor-element-38413f3.e-con-full.e-flex.e-con.e-child>div.elementor-element.elementor-element-34ed207.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end>div>div.e-coupon-box { padding: 0px; } body>div.elementor.elementor-10>div.elementor-element.elementor-element-b1eeb23.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded>div>div.elementor-element.elementor-element-38413f3.e-con-full.e-flex.e-con.e-child>div.elementor-element.elementor-element-34ed207.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end>div>div.e-coupon-box>div { margin-top: 5px; } /*2026-08-21: zwei Regeln fuer die Checkout-Altfassung (Elementor-ID 15307) entfernt - Post existiert nicht (Staging + Prod), Selektoren trafen nie.*/ /* --- 11b. Bestellübersicht (Order Summary) --- */ #order_review>table { /* verhindert, dass die Spaltenbreiten sich nach Inhalt richten */ table-layout: fixed; width: 100%; } #order_review>table, body>div.elementor.elementor-10>div.elementor-element.elementor-element-b1eeb23.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded>div>div.elementor-element.elementor-element-38413f3.e-con-full.e-flex.e-con.e-child>div.elementor-element.elementor-element-34ed207.e-checkout-layout-two-column.elementor-widget.elementor-widget-woocommerce-checkout-page>div>div>div>section.woocommerce-order-details>table { background-color: #fff !important; } #order_review>table { margin: 0px !important; padding: 0px !important; } @media (max-width: 768px) { /* Für mobile Geräte */ #order_review>table { padding-left: 10px !important; padding-right: 10px !important; } } /*Spaltenüberschriften ausblenden*/ #order_review>table>thead { display: none; } #order_review>table>thead>tr { visibility: hidden; } #order_review>table>thead>tr>th.product-total { padding-left: 0px !important; margin-left: 0px !important; white-space: nowrap; width: 100px; } #order_review_heading { margin-bottom: 0px !important; } /*Produktname*/ #order_review>table>tbody>tr>td.product-name { font-size: 1rem; font-weight: 600; } #order_review>table>tbody>tr>td.product-name { /* lässt Überlauf sichtbar, ohne die Zelle breiter werden zu lassen */ overflow: visible; } #order_review>table>tbody>tr>td.product-name { word-wrap: break-word; /* Erlaubt das Brechen von langen Wörtern */ overflow-wrap: break-word; /* Modernere Alternative zu word-wrap */ white-space: normal; /* Erlaubt das Brechen von Zeilen */ } #order_review>table>tbody>tr>td.product-name>p>span { color: var(--e-global-color-f3ca288, #8E8E93); } #order_review>table>tbody>tr>td.product-name>span { font-size: 0.875rem; color: var(--e-global-color-f3ca288, #8E8E93); font-weight: 400; } #order_review>table>tbody>tr>td.product-name>p { font-weight: 400 !important; } #order_review>table>tbody>tr>td.product-name>p { font-size: 0.875rem; color: gray; } #order_review>table>tbody>tr>td.product-name>strong { display: block; margin-top: auto !important; } #order_review>table>tbody>tr>td.product-name>div>p.unit-price, #order_review>table>tbody>tr>td.product-name>p>span { display: inline-block; /* eigene Box, um max-width zu respektieren */ white-space: nowrap; /* kein Umbruch */ max-width: 100%; /* nie breiter als die Zelle */ overflow: visible; /* Text läuft über, ohne Spalte zu expandieren */ } /* Haupt-Container (dl) auf column-Flex umstellen und negative Gutters übernehmen */ #order_review .product-name>dl { display: flex !important; flex-direction: column !important; font-size: 0.875rem !important; } /* Keine Zeilenumbrüche in den Listenelementen */ #order_review .product-name>dl>dd>ul>li { white-space: nowrap !important; } #order_review>table>tbody>tr.cart_item.wooco-cart-item.wooco-cart-parent.wooco-item-parent.wooco-hide-component>td.product-name>p>span { white-space: nowrap !important; } #order_review>table>tbody>tr.cart_item.wooco-cart-item.wooco-cart-parent.wooco-item-parent.wooco-hide-component>td.product-name>dl>dd>ul { padding-left: 20px !important; color: gray; } /*Produktbild in Checkout*/ .woocommerce-checkout-review-order-table img { display: inline-block !important; max-width: 100px; height: auto; } .e-checkout__order_review img { float: left; margin-right: 10px; margin-bottom: 10px; /* Optional, for spacing below images */ } /*Produktzeilen Padding*/ #order_review>table>tbody>tr>.product-name, #order_review>table>tbody>tr>.product-total { padding: 0px 0px 20px 0px; } #order_review>table>tbody>tr>td.product-total { text-align: right; } /*Tfoot rechtsbündig*/ #order_review>table>thead>tr>th.product-total, #order_review>table>tfoot>tr.cart-subtotal>td, #order_review>table>tfoot>tr.woocommerce-shipping-totals.shipping>td, #order_review>table>tfoot>tr.order-total>td, #order_review>table>tfoot>tr.order-tax>td, #order_review>table>tfoot>tr.original-price-total>td, #order_review>table>tfoot>tr.tax-rate.tax-rate-de-umsatzsteuer-1>td, #order_review>table>tfoot>tr.fee>td, #order_review>table>tfoot>tr.nettobetrag-row>td { text-align: right; padding-right: 0 !important; } /*Rabatt / Discount Zeilen*/ #order_review>table>tfoot>tr.cart-discount>td { padding: 0px !important; text-align: right !important; } #order_review>table>tfoot>tr.cart-discount>td>span { font-weight: bold !important; } #order_review>table>tfoot>tr.cart-discount>th { padding: 0 !important; } #order_review>table>tfoot>tr.ersparnis-row>td, #order_review>table>tfoot>tr.cart-discount-row>td { font-weight: normal !important; } #order_review>table>tfoot>tr.cart-discount.coupon-rabatt>td { padding-right: 0 !important; text-align: right !important; font-weight: normal !important; } /*Steuer*/ #order_review>table>tfoot>tr.order-tax>th { font-weight: 400; } #order_review>table>tfoot>tr.order-tax>td, #order_review>table>tfoot>tr.order-tax>th { padding-bottom: 0px; } /*Originalpreis (durchgestrichen)*/ #order_review>table>tfoot>tr.original-price-total>th, #order_review>table>tfoot>tr.original-price-total>td { padding-top: 0 !important; } #order_review>table>tfoot>tr.original-price-total>th { font-weight: 400 !important; } #order_review>table>tfoot>tr.original-price-total>td { font-weight: 600 !important; } #order_review>table>tfoot>tr.original-price-total>td>span { position: relative; color: inherit; /* Beibehaltung der Textfarbe */ } #order_review>table>tfoot>tr.original-price-total>td>span::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: grey; /* Farbe des Strichs */ transform: translateY(-50%); pointer-events: none; } /*Versandkosten*/ #order_review>table>tfoot>tr.woocommerce-shipping-totals.shipping>th, #order_review>table>tfoot>tr.woocommerce-shipping-totals.shipping>td { padding: 0; } /*Zwischensumme ausblenden*/ #order_review>table>tfoot>tr.cart-subtotal { display: none; } #order_review>table>tfoot>tr.cart-subtotal>th, #order_review>table>tfoot>tr.cart-subtotal>td { padding-top: 0px; } /*Gesamtbetrag*/ #order_review>table>tfoot>tr.order-total>td>strong>span>bdi { font-weight: 600; } /*Free Shipping Bar in Order Review*/ #order_review>table>tfoot>tr.ehg-freeshipping-row>td>div { padding: 0 !important; } /*Order Summary Container*/ .e-checkout__order_review { padding-bottom: 0px !important; } .e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review-2, .e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review { margin-right: 0px; } .e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review-2 { border: none; margin-top: 0px; } @media (max-width: 1024px) { .woocommerce-checkout .e-checkout__order_review, .e-checkout__column-end>div>div.e-checkout__order_review { border: none !important; } } #order_review>div { padding-left: 10px; padding-right: 10px; margin-bottom: 10px; } /* --- 11c. Versand --- */ #shipping_method>li { margin-bottom: 10px !important; } #shipping_method>li>label { position: relative; /* Aktiviert relative Positionierung */ top: -2px; /* Verschiebt das Element 2px nach oben */ } #shipping_method>li>label { font-weight: 600 !important; } ul#shipping_method>li>label { display: inline-flex !important; justify-content: flex-end !important; align-items: center !important; gap: 6px !important; /* ← NEU */ white-space: nowrap !important; float: right !important; margin: 0 0 0 auto !important; padding: 0 !important; min-width: 120px !important; width: auto !important; } /* --- 11d. Bezahlung (Payment) --- */ #payment { padding: 0px !important; margin: 0 !important; border-radius: 20px !important; } #payment>div>div { padding-top: 0 !important; } #payment>ul { border: none; box-shadow: none; padding: 0; border-radius: 5px; margin-bottom: 5px !important; } #payment>ul>li.wc_payment_method { margin-bottom: 5px !important; padding-bottom: 5px !important; } #payment>ul>li.wc_payment_method>label { font-size: 1.125rem !important; } /*Zahlungsart-Container Abstände*/ #payment>ul>li.wc_payment_method.payment_method_bacs>div, #payment>ul>li.wc_payment_method.payment_method_ppcp-card-button-gateway>div, #payment>ul>li.wc_payment_method.payment_method_ppcp-gateway>div { padding-top: 20px !important; padding-bottom: 20px !important; padding-right: 20px !important; padding-left: 20px !important; margin-top: 10px !important; margin-bottom: 0px !important; } @media (max-width: 767px) { #payment>div { padding-top: 10px !important; padding-bottom: 10px !important; } #payment>ul>li.wc_payment_method.payment_method_bacs>div, #payment>ul>li.wc_payment_method.payment_method_ppcp-card-button-gateway>div, #payment>ul>li.wc_payment_method.payment_method_ppcp-gateway>div { padding-top: 10px !important; padding-bottom: 10px !important; padding-right: 10px !important; padding-left: 10px !important; margin-top: 10px !important; margin-bottom: 0px !important; } } #direct-debit-form { border-radius: 5px !important; border-color: #D7DEE4 !important; border: 1px solid !important; } #direct-debit-form>p>label, #direct-debit-form>p>label>span { color: var(--e-global-color-2268280, #1C1C1E) !important; /* Setzt die Schriftfarbe auf Schwarz */ } /*PayPal Buttons*/ #buttons-container { display: flex; flex-direction: column; /* Sicherstellen, dass die Inhalte vertikal gestapelt sind */ } #buttons-container>div>div.paypal-powered-by { order: 1 !important; /* Setzt die Reihenfolge nach oben */ } /* --- 11e. Coupon --- */ .e-checkout__container>div.e-checkout__column.e-checkout__column-end>div>div.e-coupon-box>div>label { display: none; } /* ============================ COUPON STYLING (Für den WordPress Customizer) ============================ */ .woocommerce-checkout .e-coupon-box { text-align: right !important; display: block !important; width: 100% !important; } .woocommerce-checkout .e-coupon-box>p>a { font-size: 1rem !important; float: none !important; margin-left: 0 !important; } .e-coupon-box>button { color: #ffffff !important; } .e-checkout__column.e-checkout__column-end>div>div.e-coupon-box { padding-left: 0px !important; padding-bottom: 0px !important; margin: 0 !important; } .elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end>div>div.e-coupon-box { padding-bottom: 0; padding-top: 20px; } .e-checkout__column.e-checkout__column-end>div>div.e-coupon-box>div>div.form-row>div>div.col.coupon-col-2>button { color: #ffffff !important; } .elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end>div>div.e-coupon-box>div>div.form-row>div>div.col.coupon-col-2>button { background-color: #ffffff !important; border: 1px solid #0A84FF !important; color: var(--e-global-color-accent, #0066FF) !important; border-radius: 5px !important; /* 2026-08-25 (Tobias, Kasse-Umbau): Radius des Feldes daneben statt Pille */ } /*Coupon Custom Field Buttons*/ #wcf_custom_coupon_field>div.wcf-coupon-col-2>span>button { border: 1px solid #d1d4db !important; color: black !important; background-color: white !important; transition: background-color 0.3s, color 0.3s !important; padding: 0px !important; font-size: 1.125rem !important; } #wcf_custom_coupon_field_order_review>div.wcf-coupon-col-2>span>button { border: 1px solid #d1d4db !important; color: black !important; background-color: #00000000 !important; transition: background-color 0.3s, color 0.3s !important; padding: 10px !important; font-size: 1.125rem !important; } #wcf_custom_coupon_field>div.wcf-coupon-col-2>span>button:hover, #wcf_custom_coupon_field_order_review>div.wcf-coupon-col-2>span>button:hover { background-color: black !important; color: white !important; border: 1px solid black !important; } /*Coupon-Zeilen im Order Review Tfoot*/ #order_review>table>tfoot>tr.cart-discount.coupon-slicewp-store-credit>td { text-align: right !important; padding-right: 0 !important; } #order_review>table>tfoot>tr.cart-discount.coupon-slicewp-store-credit>td>span { font-weight: bold !important; } #order_review>table>tfoot>tr.cart-discount.coupon-comeback5>td { text-align: right !important; padding-right: 0px; } #order_review>table>tfoot>tr.cart-discount.coupon-comeback5>td>a { font-size: 1rem !important; } /* --- 11f. WPC Upsell Funnel (Orderbump) --- */ #order_review>div>div { border: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } .wpcuf-ob-product-name { color: black !important; } #order_review>div>div>div.wpcuf-ob-content>div>div.wpcuf-ob-product-info>div.wpcuf-ob-product-desc, #order_review>div>div>div.wpcuf-ob-footer>div { } #order_review>div>div>div.wpcuf-ob-header>div.wpcuf-ob-checkbox>label { font-size: 1rem !important; color: white !important; } #order_review>div>div>div.wpcuf-ob-header { background-color: #0A84FF !important; border-radius: 5px; } .wpcuf-ob-header::before, .wpcuf-ob-footer::before { display: none !important; } #order_review>div>div>div.wpcuf-ob-footer { margin: 0 !important; } #order_review>div>div>div.wpcuf-ob-content>div>div.wpcuf-ob-product-image>img { margin-bottom: 0px !important; } /* --- 11g. GZD (German Market) / Rechtliches --- */ .woocommerce-checkout form #order_review .wc-gzd-order-submit { clear: both; } /*AGBs bestätigen*/ #customer_details>div.wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal { padding-top: 10px; } /* 2026-08-26 gestrichen (siehe oben): derselbe Sonderabstand am Text-Span, samt seiner Telefon-Fassung mit 10px. */ .wc-gzd-checkbox-placeholder p, .wc-gzd-checkbox-placeholder label, .wc-gzd-checkbox-placeholder span { font-size: 1rem !important; color: var(--e-global-color-2268280, #1C1C1E) !important; line-height: 1.25 !important; } .wc-gzd-checkbox-placeholder a { font-size: 1rem !important; } .wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal>p>label>span, .wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-vvk>p>label>span { padding-left: 5px !important; } .wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal>p>label>abbr, .wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-vvk>p>label>abbr { display: none; } .e-checkout__order_review-2>div.wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal>p, .e-checkout__order_review-2>div.wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-vvk>p { /* 2026-08-21: vvk-Selektor generisch statt ID 15307 (Post existiert nicht) */ padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; margin-bottom: 0px !important; } .e-checkout__order_review-2>div.wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal>p>label>span { padding-bottom: 10px !important; } .e-checkout__order_review-2>div.wc-gzd-checkbox-placeholder.wc-gzd-checkbox-placeholder-legal>p>label>span { font-size: 1rem !important; } .wc-gzd-checkbox-placeholder.ehg-terms-moved { margin-top: 10px; } /*Fehlermeldung Links*/ .woocommerce-NoticeGroup-checkout>ul>li>a { font-size: 0.875rem; } /*eael Checkbox (Accept TNC)*/ #eael_accept_tnc { display: inline-block; width: 20px !important; height: 20px !important; position: relative; cursor: pointer; } /* --- 11h. Responsive (Checkout) --- */ @media (max-width: 767px) { .elementor-widget-woocommerce-checkout-page>div>div>form>div>div.e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review-2 { margin: 0 !important; padding: 0 !important; } #order_review>div { padding-left: 10px; padding-right: 10px; margin-bottom: 10px; } } @media (max-width: 768px) { #customer_details>div.col-1 { padding-left: 0px !important; padding-right: 0px !important; } .e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review { margin-left: 0px !important; margin-right: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } .e-checkout__column.e-checkout__column-end>div>div.e-checkout__order_review-2 { margin-left: 10px !important; margin-right: 10px !important; padding-bottom: 10px !important; padding-right: 0px !important; } #place_order { margin: 0px !important; } .woovr-variation-info>div.woovr-variation-name>label { font-size: 1rem !important; /* 2026-08-21 Skalen-Rundung 15->16 (Tobias) */ } /*Product grid mobil variation */ .woovr-variation.woovr-variation-radio.woovr-variation-active>div.woovr-variation-info>div.woovr-variation-price, .woovr-variation-radio.woovr-variation-active>div.woovr-variation-info>div.woovr-variation-description, .woovr-variation-info>div.woovr-variation-price, .woovr-variation-info>div.woovr-variation-description { font-size: 0.75rem !important; /* 2026-08-21: Floor 12px statt 10px (design-system.md §3.6 Mikro, §13 Mobil-Untergrenze) */ } .woovr-variation-info>div.woovr-variation-price { font-size: 0.75rem !important; /* 2026-08-21: Floor 12px statt 10px (design-system.md §3.6 Mikro, §13 Mobil-Untergrenze) */ } /* Für mobile Geräte */ #order_review_heading { padding-left: 10px !important; } } /* ============================ 12. BESTELLBESTÄTIGUNG / ORDER CONFIRMATION ============================ */ /*Bestellbestätigung Überschriften*/ .woocommerce-bacs-bank-details>h2, .woocommerce-order-details>h2, .woocommerce-customer-details>section>div.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1>h2, .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2>h2 { font-size: 1.5rem !important; } /*Passwortgeschützte Seite — Breite, Zentrierung und Zeile liefert das Theme (Hello theme.css: max-width 500px, margin 50px auto). Hier nur der Seitenrand für schmale Bildschirme. Die frühere Regel (padding 40vh, height 100vh, lightgray) ließ dem Formular auf dem Desktop kaum Breite und auf dem Handy keine (2026-09-22, Cockpit-Seite). Abstände per gap statt margin: der globale Reset p { margin: 0 !important } (oben) ließ Text, Label, Feld und Knopf aneinanderkleben (Tobias-Befund 2026-09-22). Feld und Knopf auf dieselbe Pillenhöhe (sonst 46 gegen 50 px).*/ .post-password-form { padding-inline: 16px; display: flex; flex-direction: column; gap: 16px; } .post-password-form p:empty { display: none; } .post-password-form p:last-of-type { gap: 12px; } .post-password-form label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .post-password-form [type="submit"] { margin-inline-start: 0; } .post-password-form input[type="password"], .post-password-form [type="submit"] { min-height: 3.125rem; }