/* ========================================================================== Kreislaufkraft · WooCommerce-Systemmeldungen und -Schaltflaechen -------------------------------------------------------------------------- WooCommerce erzeugt seine Hinweise, Erfolgs- und Fehlermeldungen selbst, an Stellen, die in Elementor nicht auftauchen: der leere Warenkorb, die Meldung nach dem Hinzufuegen, Formularfehler an der Kasse, das Shop-Hinweisband. Sie brachten bisher Woos Werksdesign mit (graue Flaeche, blaue Oberlinie, Symbol aus der WooCommerce-Schrift). Diese Datei ersetzt das durch das Kartendesign des Shops: weisse bzw. zart getoente Flaeche, 14 px Radius, Rand #E8E4DB, Symbol als SVG-Maske in der Statusfarbe, Beschriftungen in Red Hat Mono. Bewusst ohne !important. Alles, was in Elementor am Widget eingestellt ist, ist spezifischer und bleibt deshalb wirksam - hier steht nur die Grundlage fuer die Stellen, die Elementor nicht erreicht. Geladen in functions.php nach woocommerce-general, damit die Reihenfolge stimmt. ========================================================================== */ :root { --kk-gruen-hell: #548A0B; --kk-text: #333333; --kk-text-leise: #5A5A55; --kk-rand: #E8E4DB; --kk-rand-leise: #EEEAE1; --kk-karte: #FFFFFF; /* Statusfarben. Rot und Ocker sind auf die Erdtoene abgestimmt, Woos Werksfarben (#a46497, #1e85be) passen nicht zur Marke. */ --kk-status-neutral: #8A8A85; --kk-status-neutral-flaeche: #F7F5EF; --kk-status-erfolg-flaeche: #F3F8E9; --kk-status-fehler: #B4462E; --kk-status-fehler-flaeche: #FBF1ED; --kk-status-warnung: #A8760A; --kk-status-warnung-flaeche: #FBF5E8; --kk-schatten-karte: 0 2px 10px rgba(23, 23, 23, .05); } /* Der Gruenton kommt aus der globalen Elementor-Farbe "Accent" (Website-Einstellungen -> Globale Farben). Elementor legt seine Kit-Variablen auf .elementor-kit-11, also auf ; :root sieht sie nicht. Deshalb stehen die beiden Gruen-Tokens hier und nicht oben. */ body { --kk-gruen: var(--e-global-color-accent); --kk-status-erfolg: var(--e-global-color-accent); } /* ========================================================================== 1) Grundform aller Meldungen -------------------------------------------------------------------------- Das Symbol sitzt absolut, nicht im Textfluss. Nur so bleibt die Fehlerliste (

) sauber untereinander und der eingebettete Button kann nach rechts floaten. display:flow-root schliesst diesen Float ein, ohne Clearfix-Pseudoelement. ========================================================================== */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { /* Von der Variante ueberschrieben. */ --kk-melde-akzent: var(--kk-status-neutral); --kk-melde-flaeche: var(--kk-status-neutral-flaeche); display: flow-root; position: relative; box-sizing: border-box; width: auto; margin: 0 0 20px; padding: 16px 22px 16px 52px; background: var(--kk-melde-flaeche); border: 1px solid var(--kk-rand); border-radius: 14px; /* Der Akzentbalken als Innenschatten statt als border-left: so bleibt der Rand ringsum gleich stark und folgt der Rundung ohne Knick. */ box-shadow: inset 3px 0 0 0 var(--kk-melde-akzent), var(--kk-schatten-karte); color: var(--kk-text); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-body-s, 13px); line-height: 1.6; list-style: none; word-wrap: break-word; /* Damit eine angesprungene Meldung nicht unter dem klebenden Kopfbereich landet. */ scroll-margin-top: 120px; } /* Symbol. Woo setzt hier ein Zeichen aus der Schrift "WooCommerce"; das wird ueberschrieben und durch eine SVG-Maske ersetzt, die sich einfaerben laesst. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before { content: ""; position: absolute; top: 18px; left: 20px; width: 20px; height: 20px; margin: 0; padding: 0; font-family: inherit; background-color: var(--kk-melde-akzent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; } /* ========================================================================== 2) Varianten ========================================================================== */ /* --- Hinweis (Woo: blau) --- */ .woocommerce-info, .woocommerce-noreviews { --kk-melde-akzent: var(--kk-status-neutral); --kk-melde-flaeche: var(--kk-status-neutral-flaeche); } .woocommerce-info::before, .woocommerce-noreviews::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5'/%3E%3Cpath d='M12 7.8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5'/%3E%3Cpath d='M12 7.8h.01'/%3E%3C/svg%3E"); } /* --- Erfolg (in den Warenkorb gelegt, Gutschein angewendet, ...) --- */ .woocommerce-message { --kk-melde-akzent: var(--kk-status-erfolg); --kk-melde-flaeche: var(--kk-status-erfolg-flaeche); } .woocommerce-message::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E"); } /* --- Fehler (Pflichtfelder an der Kasse, ungueltiger Gutschein, ...) --- */ .woocommerce-error { --kk-melde-akzent: var(--kk-status-fehler); --kk-melde-flaeche: var(--kk-status-fehler-flaeche); } .woocommerce-error::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E"); } /* ========================================================================== 3) Inhalte innerhalb einer Meldung ========================================================================== */ /* Fehler kommen als Liste. Marker weg, Zeilen mit eigenem Abstand. */ .woocommerce-error li, .woocommerce-info li, .woocommerce-message li { margin: 0; padding: 0; list-style: none; } .woocommerce-error li + li, .woocommerce-info li + li, .woocommerce-message li + li { margin-top: 6px; } .woocommerce-message p:last-child, .woocommerce-info p:last-child, .woocommerce-error p:last-child { margin-bottom: 0; } /* Textlinks in Meldungen (z. B. "Zur Kasse", "Anmelden"). */ .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--kk-melde-akzent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .woocommerce-message a:not(.button):hover, .woocommerce-info a:not(.button):hover, .woocommerce-error a:not(.button):hover { color: var(--kk-gruen-hell); } /* Ausnahme Danke-Seite: dort bekommen die Meldungen ihr Kartenformat aus dem Seiten-CSS von 704 (weisse Flaeche, 28 px Innenabstand). Weil dieser Innenabstand spezifischer gesetzt ist als hier, wuerde das absolut positionierte Symbol im Text liegen - deshalb entfaellt es dort. */ .woocommerce-order-received #kk-checkout .woocommerce > .woocommerce-info::before, .woocommerce-order-received #kk-checkout .woocommerce > .woocommerce-message::before { display: none; } /* ========================================================================== 4) Blockbasierte Meldungen (wc-blocks) -------------------------------------------------------------------------- Einzelne WooCommerce-Bloecke bringen ihr eigenes Meldungsbanner mit. Es hat anderes Markup (SVG im Dokument statt Pseudoelement), soll aber gleich aussehen. ========================================================================== */ .wc-block-components-notice-banner { --kk-melde-akzent: var(--kk-status-neutral); --kk-melde-flaeche: var(--kk-status-neutral-flaeche); align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 16px 22px; background: var(--kk-melde-flaeche); border: 1px solid var(--kk-rand); border-left-width: 1px; border-radius: 14px; box-shadow: inset 3px 0 0 0 var(--kk-melde-akzent), var(--kk-schatten-karte); color: var(--kk-text); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-body-s, 13px); line-height: 1.6; } .wc-block-components-notice-banner.is-success { --kk-melde-akzent: var(--kk-status-erfolg); --kk-melde-flaeche: var(--kk-status-erfolg-flaeche); } .wc-block-components-notice-banner.is-error { --kk-melde-akzent: var(--kk-status-fehler); --kk-melde-flaeche: var(--kk-status-fehler-flaeche); } .wc-block-components-notice-banner.is-warning { --kk-melde-akzent: var(--kk-status-warnung); --kk-melde-flaeche: var(--kk-status-warnung-flaeche); } .wc-block-components-notice-banner > svg { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; background: none; border-radius: 0; fill: var(--kk-melde-akzent); } .wc-block-components-notice-banner__content { font-size: var(--kk-fs-body-s, 13px); line-height: 1.6; } /* ========================================================================== 5) Shop-Hinweisband (WooCommerce -> Einstellungen -> Allgemein) ========================================================================== */ .woocommerce-store-notice, p.demo_store { background: var(--kk-gruen); color: #FFFFFF; padding: 12px 24px; font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); font-weight: 500; letter-spacing: .8px; text-transform: uppercase; text-align: center; } .woocommerce-store-notice a, p.demo_store a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 6) Schaltflaechen -------------------------------------------------------------------------- Zwei Stufen: der schlichte .button ist die ruhige Variante (heller Grund, Rand), .alt und die eindeutigen Handlungsbuttons sind gruen gefuellt. Die Selektorlisten spiegeln Woos eigene, damit die Spezifitaet reicht - Woo adressiert seinen Absendebutton ueber #respond input#submit. ========================================================================== */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button { display: inline-block; box-sizing: border-box; margin: 0; padding: 13px 26px; background: var(--kk-karte); border: 1px solid var(--kk-rand); /* Gleicher Radius wie der Warenkorb-Knopf im Kopfbereich. */ border-radius: 30px; box-shadow: none; text-shadow: none; color: var(--kk-text); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); font-weight: 500; letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: normal; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover { background: #FBFBF9; border-color: var(--kk-gruen); color: var(--kk-gruen); } /* --- Gefuellte Stufe: Woos .alt plus die eindeutigen Handlungsbuttons --- Hierher gehoert jeder Knopf, der auf Markengruen steht. Der Grund steht in der Regel darueber: die schlichte Stufe faerbt ihren Text beim Ueberfahren gruen, und auf gruenem Grund ist das unlesbar. WooCommerce vergibt sein `.alt` aber nicht ueberall - die Absendeknoepfe von Anmeldung und Registrierung tragen es zum Beispiel nicht, obwohl sie die Hauptaktion ihrer Karte sind. Solche Knoepfe werden hier namentlich nachgetragen. */ .woocommerce #respond input#submit.alt, .woocommerce button.woocommerce-form-login__submit, .woocommerce button.woocommerce-form-register__submit, .woocommerce-page button.woocommerce-form-login__submit, .woocommerce-page button.woocommerce-form-register__submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.checkout-button, .woocommerce button.single_add_to_cart_button, .woocommerce .return-to-shop a.button, .woocommerce-cart .return-to-shop a.button, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page a.checkout-button { background: var(--kk-gruen); border-color: var(--kk-gruen); color: #FFFFFF; } .woocommerce #respond input#submit.alt:hover, .woocommerce button.woocommerce-form-login__submit:hover, .woocommerce button.woocommerce-form-login__submit:focus, .woocommerce button.woocommerce-form-register__submit:hover, .woocommerce button.woocommerce-form-register__submit:focus, .woocommerce-page button.woocommerce-form-login__submit:hover, .woocommerce-page button.woocommerce-form-login__submit:focus, .woocommerce-page button.woocommerce-form-register__submit:hover, .woocommerce-page button.woocommerce-form-register__submit:focus, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.checkout-button:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce .return-to-shop a.button:hover, .woocommerce-cart .return-to-shop a.button:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce-page a.checkout-button:hover { background: var(--kk-gruen-hell); border-color: var(--kk-gruen-hell); color: #FFFFFF; } /* --- Buttons innerhalb einer Meldung --- Woo stellt sie im Markup VOR den Text und floatet sie nach rechts. Kompakter als ein Seitenbutton, damit die Zeile nicht auseinanderfaellt. Diese Regel steht bewusst nach der allgemeinen Buttonform: gleiche Spezifitaet, spaetere Stelle, damit Groesse, Farbe und Float gewinnen. */ .woocommerce-message a.button, .woocommerce-message button.button, .woocommerce-info a.button, .woocommerce-info button.button, .woocommerce-error a.button, .woocommerce-error button.button { float: right; margin: -2px 0 0 18px; padding: 9px 18px; background: var(--kk-gruen); border-color: var(--kk-gruen); color: #FFFFFF; font-size: var(--kk-fs-overline, 11px); } .woocommerce-message a.button:hover, .woocommerce-message button.button:hover, .woocommerce-info a.button:hover, .woocommerce-info button.button:hover, .woocommerce-error a.button:hover, .woocommerce-error button.button:hover { background: var(--kk-gruen-hell); border-color: var(--kk-gruen-hell); color: #FFFFFF; } /* --- Tastaturbedienung sichtbar machen --- */ .woocommerce .button:focus-visible, .woocommerce input#submit:focus-visible, .woocommerce-page .button:focus-visible, .woocommerce-page input#submit:focus-visible { outline: 2px solid var(--kk-gruen); outline-offset: 2px; } /* --- Zustaende --- */ .woocommerce .button:disabled, .woocommerce .button.disabled, .woocommerce .button[disabled], .woocommerce-page .button:disabled, .woocommerce-page .button.disabled, .woocommerce-page .button[disabled] { opacity: .45; cursor: not-allowed; } .woocommerce .button:disabled:hover, .woocommerce .button.disabled:hover, .woocommerce .button[disabled]:hover, .woocommerce-page .button:disabled:hover, .woocommerce-page .button.disabled:hover, .woocommerce-page .button[disabled]:hover { background: var(--kk-karte); border-color: var(--kk-rand); color: var(--kk-text); } .woocommerce .button.alt:disabled:hover, .woocommerce .button.alt.disabled:hover, .woocommerce .button.alt[disabled]:hover { background: var(--kk-gruen); border-color: var(--kk-gruen); color: #FFFFFF; } /* Woos eigener Ladepunkt bleibt, nur ruhiger. */ .woocommerce .button.loading, .woocommerce-page .button.loading { opacity: .7; pointer-events: none; } /* "Warenkorb ansehen" nach dem Hinzufuegen in der Produktliste. */ .woocommerce a.added_to_cart { display: inline-block; margin-left: 12px; color: var(--kk-gruen); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .woocommerce a.added_to_cart:hover { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 7) Leerer Warenkorb -------------------------------------------------------------------------- Woo liefert dafuer zwei Geschwister: die Meldung in .wc-empty-cart-message und darunter den Button in p.return-to-shop. Mit :has() lassen sich beide zu einem gemeinsamen, mittigen Leerzustand zusammenfassen; Browser ohne :has() zeigen weiterhin Meldung und Button einzeln gestaltet. ========================================================================== */ .woocommerce-cart .woocommerce:has(> .wc-empty-cart-message), .woocommerce-cart .woocommerce:has(> .cart-empty) { display: flex; flex-direction: column; padding: 64px 28px 68px; background: var(--kk-karte); border: 1px solid var(--kk-rand); border-radius: 14px; box-shadow: var(--kk-schatten-karte); text-align: center; } /* Steht zusaetzlich eine Meldung in der Karte ("Artikel entfernt", "Gutschein entfernt"), rueckt der Leerzustand nach oben nach - sonst haengt die Meldung mitten im Leerraum. */ .woocommerce-cart .woocommerce:has(> .wc-empty-cart-message):has(.woocommerce-notices-wrapper > *) { padding-top: 26px; } .woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) .woocommerce-notices-wrapper { margin-bottom: 34px; text-align: left; } /* Die Meldung selbst tritt hier aus dem Kartenformat heraus: kein Rahmen, keine Flaeche - das uebernimmt die Karte ringsum. */ .wc-empty-cart-message, .cart-empty { margin: 0; } .woocommerce-cart .cart-empty.woocommerce-info, .woocommerce-cart .wc-empty-cart-message .cart-empty { display: block; max-width: 42ch; margin: 0 auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--kk-text); font-family: var(--kk-font-display, Fraunces, Georgia, serif); font-size: var(--kk-fs-h3, 24px); font-weight: 400; line-height: 1.35; text-align: center; } /* Grosses Warenkorbsymbol ueber dem Text, in Creme statt Grau: es soll die Flaeche fuellen, aber nicht mit dem Button um Aufmerksamkeit ringen. */ .woocommerce-cart .cart-empty.woocommerce-info::before, .woocommerce-cart .wc-empty-cart-message .cart-empty::before { content: ""; position: static; display: block; width: 56px; height: 56px; margin: 0 auto 22px; background-color: #D8D2C4; -webkit-mask-size: 56px 56px; mask-size: 56px 56px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 3.2h2.9l2.6 12.2h11.1l2.1-8.7H7.2'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.9' cy='19.6' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 3.2h2.9l2.6 12.2h11.1l2.1-8.7H7.2'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.9' cy='19.6' r='1.5'/%3E%3C/svg%3E"); } .woocommerce-cart p.return-to-shop { margin: 26px 0 0; text-align: center; } /* ========================================================================== 8) Rueckmeldungen an Formularfeldern ========================================================================== */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection { border-color: var(--kk-status-fehler); } .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: #C3D89A; } .woocommerce form .form-row .required { color: var(--kk-status-fehler); text-decoration: none; } .woocommerce form .woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--kk-rand); border-radius: 8px; font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); letter-spacing: .6px; text-align: left; text-transform: uppercase; } .woocommerce form .woocommerce-password-strength.strong { background: var(--kk-status-erfolg-flaeche); border-color: #C3D89A; color: #4C7A0A; } .woocommerce form .woocommerce-password-strength.good { background: var(--kk-status-warnung-flaeche); border-color: #E3D3A8; color: var(--kk-status-warnung); } .woocommerce form .woocommerce-password-strength.short, .woocommerce form .woocommerce-password-strength.bad { background: var(--kk-status-fehler-flaeche); border-color: #EBCFC5; color: var(--kk-status-fehler); } .woocommerce form .woocommerce-password-hint { display: block; margin-top: 6px; color: var(--kk-text-leise); font-size: var(--kk-fs-overline, 11px); } /* ========================================================================== 9) Auftritt -------------------------------------------------------------------------- Meldungen erscheinen oft nach einer AJAX-Runde mitten auf der Seite. Ein kurzes Einblenden macht sichtbar, dass etwas Neues dazugekommen ist. ========================================================================== */ @keyframes kk-melde-auftritt { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .woocommerce-notices-wrapper > .woocommerce-message, .woocommerce-notices-wrapper > .woocommerce-info, .woocommerce-notices-wrapper > .woocommerce-error, .wc-block-components-notice-banner { animation: kk-melde-auftritt .28s ease-out both; } .woocommerce-notices-wrapper:empty { display: none; } @media (prefers-reduced-motion: reduce) { .woocommerce-notices-wrapper > .woocommerce-message, .woocommerce-notices-wrapper > .woocommerce-info, .woocommerce-notices-wrapper > .woocommerce-error, .wc-block-components-notice-banner { animation: none; } } /* ========================================================================== 10) Mobil -------------------------------------------------------------------------- Der eingebettete Button steht im Markup vor dem Text. Auf schmalen Bildschirmen wird die Meldung deshalb zur Flex-Spalte: der Textknoten ist ein anonymes Element mit order 0, der Button bekommt order 1 und rutscht damit unter den Text. ========================================================================== */ @media (max-width: 600px) { .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { padding: 44px 18px 18px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before { top: 16px; left: 18px; } .woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-direction: column; align-items: flex-start; } .woocommerce-message a.button, .woocommerce-message button.button, .woocommerce-info a.button, .woocommerce-info button.button, .woocommerce-error a.button, .woocommerce-error button.button { order: 1; float: none; width: 100%; margin: 14px 0 0; text-align: center; } .woocommerce-cart .woocommerce:has(> .wc-empty-cart-message), .woocommerce-cart .woocommerce:has(> .cart-empty) { padding: 46px 20px 48px; } .woocommerce-cart .cart-empty.woocommerce-info, .woocommerce-cart .wc-empty-cart-message .cart-empty { font-size: var(--kk-fs-h4, 18px); } .woocommerce-cart p.return-to-shop a.button { display: block; width: 100%; text-align: center; } } /* ========================================================================== Warenkorb-Zaehler am Knopf im Kopfbereich -------------------------------------------------------------------------- Die Zahl kommt aus functions.php und wird von WooCommerce beim Hinzufuegen per AJAX ausgetauscht. Bei leerem Warenkorb traegt das Element hidden und verschwindet damit ganz. ========================================================================== */ /* Elementors Knopfinhalt ist selbst ein Flex-Container und damit auf voller Breite. Ohne diese Zeile fiele der Zaehler daneben in eine neue Zeile. */ .kk-header-cart .elementor-button { display: inline-flex; align-items: center; position: relative; } /* Der Knopf ist ueberall ein Kreis von 56 Pixeln (mobil 48) und traegt nur das Symbol. Stuende die Zahl daneben, waere kein Platz dafuer: sie sitzt deshalb als Abzeichen in der oberen rechten Ecke und beansprucht keine eigene Breite. Der Abstand zur Kante ist gerechnet, nicht geschaetzt: damit ein rundes Abzeichen ganz innerhalb der Kreisflaeche bleibt, muss sein Mittelpunkt um mindestens seinen halben Durchmesser innerhalb des Kreisrandes liegen. Bei 56 px Knopf und 20 px Abzeichen sind 8 px Abstand noetig, gewaehlt sind 8 - deshalb wuchs der Knopf von 48 auf 56. */ .kk-header-cart .kk-cart-count { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; margin: 0; padding: 0 5px; background: var(--kk-karte); border-radius: 30px; color: var(--kk-gruen); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); font-weight: 500; letter-spacing: 0; line-height: 1; } .kk-header-cart .kk-cart-count[hidden] { display: none; } /* Nur fuer Vorlesesoftware: der Knopf heisst dann "Warenkorb 3 Artikel im Warenkorb" statt bloss "Warenkorb 3". Ohne Einschraenkung auf einen Knopf, denn dieselbe Zahl steht auch im mobilen Vollbildmenue. */ .kk-nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } /* Auf Telefonen misst der Knopf 48 statt 56 Pixel, das Abzeichen wird entsprechend eine Spur kleiner und rueckt naeher an die Kante. */ @media (max-width: 767px) { .kk-header-cart .kk-cart-count { top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 4px; font-size: var(--kk-fs-overline, 11px); } } /* ========================================================================== Warenkorb und Konto ruecken zusammen -------------------------------------------------------------------------- Beide Symbole gehoeren zusammen - sie sind die persoenlichen Bedienelemente des Kopfbereichs. Der Abstand von 20 Pixeln kommt aber aus dem `gap` der gesamten Kopfzeile (Container 2b33b896) und gilt damit genauso zwischen Logo und Menue. Wer ihn dort verkleinert, ruecht die ganze Zeile zusammen. Deshalb wird nur diese eine Luecke geschlossen: ein negativer Aussenabstand am Warenkorb zieht ihn um 12 Pixel an das Kontosymbol heran, aus 20 werden 8. Alle anderen Abstaende der Kopfzeile bleiben unberuehrt. Erst ab 768 Pixeln, denn darunter ist das Kontosymbol ausgeblendet (der Weg zum Konto fuehrt dort ueber das Aufklappmenue) - es gaebe also gar kein Paar, das zusammenruecken koennte. Ausserdem schiebt Elementor den Warenkorb am Telefon mit `margin-inline-start:auto` an den rechten Rand; diese Regel darf dort nichts dagegenhalten. ========================================================================== */ @media (min-width: 768px) { .kk-header-cart { margin-inline-start: -12px; } } /* ========================================================================== Leerer Warenkorb: der Knopf tritt zurueck -------------------------------------------------------------------------- Ein gefuellter gruener Kreis von 56 Pixeln zieht Aufmerksamkeit auf sich. Solange nichts im Warenkorb liegt, gibt es dafuer keinen Grund - dann steht der Knopf als gleichrangiges Geschwister neben dem Kontosymbol: gleiche Flaeche (44 px), gleicher Hover. Sobald etwas drin liegt, kehrt der gruene Kreis mitsamt Abzeichen zurueck und macht darauf aufmerksam. Die Schriftfarbe ist bewusst das Markengruen und nicht das Grau des Kontosymbols: der Warenkorb bleibt so auch im Ruhezustand als der Weg zum Kauf erkennbar - nur eben als Symbol statt als Flaeche. WORAN DER LEERZUSTAND HAENGT Der Zaehler steht immer im Markup und traegt bei leerem Warenkorb `hidden` (siehe kk_warenkorb_zaehler in der functions.php). WooCommerce tauscht genau dieses Element beim Hinzufuegen per AJAX aus - der Knopf wechselt sein Aussehen dadurch ohne Neuladen. `:has()` liest den Zustand aus. Browser ohne :has() zeigen weiterhin den gruenen Kreis; das ist der harmlosere Fall und dieselbe Annahme trifft bereits die Symbolzentrierung im Custom CSS des Kopfbereichs. GEWICHTUNG Elementor schreibt Groesse und Gruen mit `.elementor-30 .elementor-element.elementor-element-175caf3e .elementor-button` heraus, also (0,4,0) - beim Hover (0,5,0). Der doppelte Klassenname plus das :has() bringt diese Regeln auf (0,5,0) beziehungsweise (0,6,0) und gewinnt damit unabhaengig von der Ladereihenfolge. ========================================================================== */ .kk-header-cart.kk-header-cart:has(.kk-cart-count[hidden]) .elementor-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; background-color: transparent; color: var(--e-global-color-accent, #208937); box-shadow: none; } /* Das Warenkorbsymbol ist eine Flaeche (Font Awesome), das Kontosymbol eine Strichzeichnung. Eine gefuellte Form wirkt bei gleicher Kantenlaenge groesser - deshalb 20 statt der 23 Pixel des Kontosymbols, damit beide nebeneinander optisch gleich gross stehen. */ .kk-header-cart.kk-header-cart:has(.kk-cart-count[hidden]) .elementor-button-icon svg { width: 20px; height: 20px; fill: currentColor; } /* Hover und Tastaturfokus wie beim Kontosymbol nebenan. */ .kk-header-cart.kk-header-cart:has(.kk-cart-count[hidden]) .elementor-button:hover, .kk-header-cart.kk-header-cart:has(.kk-cart-count[hidden]) .elementor-button:focus { background-color: color-mix(in srgb, var(--e-global-color-accent) 12%, transparent); color: var(--e-global-color-accent, #208937); box-shadow: none; } /* ========================================================================== Dieselbe Zahl am Knopf "Warenkorb ansehen" im mobilen Vollbildmenue -------------------------------------------------------------------------- Dieser Knopf ist breit und beschriftet, ein Eckabzeichen waere dort fehl am Platz. Die Zahl steht deshalb als Pille hinter der Beschriftung. Denselben Klassennamen traegt sie trotzdem, damit WooCommerce beide Vorkommen mit einem Fragment austauscht. ========================================================================== */ .kk-oc-cart .kk-cart-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 22px; height: 22px; margin-inline-start: 10px; padding: 0 6px; background: var(--kk-karte); border-radius: 30px; color: var(--kk-gruen); font-family: var(--kk-font-body, Red Hat Mono, ui-monospace, monospace); font-size: var(--kk-fs-overline, 11px); font-weight: 500; letter-spacing: 0; line-height: 1; } .kk-oc-cart .kk-cart-count[hidden] { display: none; } /* Der Zaehler steht hinter der Beschriftung, nicht darunter: Elementors Knopfinhalt ist ein eigener Flex-Container auf voller Breite. */ .kk-oc-cart .elementor-button { display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== Knoepfe bleiben von der Linkfarbe verschont -------------------------------------------------------------------------- Seit die Linkfarbe im Kit auf das Markengruen steht, faerbt sie jedes - auch die, die als Knopf gestaltet sind. Knoepfe ohne eigene Textfarbe standen dadurch gruen auf gruen. Sie bekommen hier ihr Weiss zurueck; Knoepfe mit eigener Farbe setzen sie ueber Elementors laengere Kette und bleiben unberuehrt. ========================================================================== */ a.elementor-button, .kk-konto-knopf, .woocommerce a.button, .woocommerce a.button.alt { color: #FFFFFF; } /* Ebenso ausgenommen: alles, was Navigation ist. Kopfbereich, Fussleiste, Menues und Symbollisten faerben ihre Verweise selbst oder erben die Farbe ihres Containers - im dunklen Fuss etwa Weiss. Ohne diese Zeilen stuenden dort gruene Verweise auf dunklem Grund. Die Linkfarbe des Kits bleibt damit dem Fliesstext vorbehalten, wo sie hingehoert. */ .elementor-location-header a:not(.elementor-button), .elementor-location-footer a:not(.elementor-button), .elementor-widget-icon-list a, .e-n-menu a, .elementor-nav-menu a, #elementor-popup-modal-970 a:not(.elementor-button) { color: inherit; }