/* * Kaufstrecke — Schrittleiste, Warenkorb und Kasse. * Klassen: .hh-kauf-schritte (patterns/kauf-schritte.php) und * .hh-kaufstrecke (templates/page-cart.html, page-checkout.html, * order-confirmation.html). * * 🔑 WARUM DIESE DATEI AN core/group HAENGT UND NICHT AN woocommerce/cart * Warenkorb und Kasse rendern ueber wp:post-content - die Bloecke stehen im * SEITENINHALT, nicht in der Vorlage (an WooCommerces eigenen Vorlagen * abgelesen: page-cart.html besteht aus page-content-wrapper + post-content). * Dieselbe Datei unter woocommerce/cart UND woocommerce/checkout einzutragen * wuerde sie zweimal ausliefern (siehe Hinweis in functions.php). Beide * Vorlagen tragen aber denselben Gruppenrahmen .hh-kaufstrecke - deshalb * core/group, mit eng gefassten Selektoren. * * GEMESSEN AM ENTWURF (Abschnitte 08 und 09, 26.08.2026): * Schritt aktiv #FEFEBE auf linear-gradient(135deg,#80008B,#5E0068); * border-radius:30px; padding:7px 16px * Warenkorbkasten #FEFEBE; 1px rgba(128,0,139,.2); border-radius:18px * Kopfzeile Grund #F8F89E; Mulish 11px; 700; .12em; uppercase * Summenkasten linear-gradient(160deg,#FDFDB4,#F6F68E); * border-radius:18px; padding:28px * Gesamtzeile Cormorant 21px + Mulish 800 22px, obere Linie * Hauptknopf #911694 auf #E9CE7D; padding:15px; border-radius:40px * Eingabefelder weiss; 1px rgba(128,0,139,.2); border-radius:10px; * padding:12px 14px; Mulish 14px * Beschriftungen Mulish 12px; 700; #80008B * * TOKENZUORDNUNG mit benannten Abweichungen: * #FEFEBE -> accent-1 #E9CE7D -> accent-3 * #911694 -> primary-light (Etappe A) #5E0068 -> primary-dark * #FDFDB4 -> accent-2 #F6F68E -> accent-5 (Verlauf exakt) * #F8F89E -> accent-5 ABWEICHUNG: liegt zwischen accent-2 und * accent-5; ein eigenes Token fuer eine Tabellenkopfzeile waere zu viel * Radius 18px -> radius.weich (16px) ABWEICHUNG 2px * Radius 30/40/10 -> radius.rund / radius.gross / radius.eingabe (exakt) * 7px -> spacing|30 (9px) 16px -> spacing|40 (14px) * * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2). */ /* --- Schrittleiste ------------------------------------------------------ */ .hh-kauf-schritte .hh-kauf-schritt-aktiv { background-image: linear-gradient( 135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark) ); border-radius: var(--wp--custom--radius--rund); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } /* --- Warenkorb: Positionskasten ----------------------------------------- */ .hh-kaufstrecke .wc-block-cart-items, .hh-kaufstrecke .wp-block-woocommerce-cart-items-block { background-color: var(--wp--preset--color--accent-1); border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); border-radius: var(--wp--custom--radius--weich); overflow: hidden; } .hh-kaufstrecke .wc-block-cart-items__header { background-color: var(--wp--preset--color--accent-5); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--primary); } /* * 🔴 SCHMALANSICHT, gemessen am 13.09.2026 bei 375px: Zeilenpreis rechts * abgeschnitten. WooCommerce (cart.css) legt die Warenkorbzeile in schmalen * Containern (.is-mobile/.is-small/.is-medium) als Raster mit FESTER * Produktspalte an: `grid-template-columns: 80px 132px`, column-gap 16px. * Die Produktzelle reicht bis Spalte 4, der Preis landet in einer weiteren * Spalte - gemessen 80 + 132 + 11 + 38 + 3x16 = 309px in einer 300px breiten * Hauptspalte. Mit minmax(0, 1fr) statt 132px nimmt die Produktspalte nur * den Platz, der nach Bild und Preis bleibt. * Selektor eine Klasse ueber WooCommerce (0,4,1 gegen 0,3,1), weil cart.css * spaeter laedt. 80px -> abmessung.warenkorbbild (NEU, exakt WooCommerces Wert). * * ⚠️ ERSTE FASSUNG GRIFF NICHT: sie haengte an .is-mobile/.is-small/.is-medium. * Gemessen ueber die passenden Regeln im Rahmen: die feste Spalte kommt aus * WooCommerces GRUNDREGEL `.wc-block-cart table.wc-block-cart-items * .wc-block-cart-items__row`, die fuer jede Breite gilt - und die Container- * klasse wechselt je nach gemessener Breite. Am Desktop ist die Zeile kein * Raster (gemessen: grid-template-columns none), dort bleibt die Regel ohne * Wirkung. */ .hh-kaufstrecke .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: var(--wp--custom--abmessung--warenkorbbild) minmax(0, 1fr); } /* --- Summenkasten (Warenkorb und Kasse) --------------------------------- */ .hh-kaufstrecke .wc-block-cart__totals-title, .hh-kaufstrecke .wp-block-woocommerce-cart-order-summary-block, .hh-kaufstrecke .wp-block-woocommerce-checkout-order-summary-block { background-image: linear-gradient( 160deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-5) ); border-radius: var(--wp--custom--radius--weich); padding: var(--wp--preset--spacing--70); border: 0; } /* --- Knoepfe der Kaufstrecke -------------------------------------------- */ /* * ⚠️ WooCommerce vergibt seinen Knoepfen die Kernklasse wp-element-button und * damit die globalen Knopfstile aus theme.json - dieselbe Mechanik, die im * Kopfbereich aus dem Suchsymbol eine 60x43,5-Pille gemacht hat. Hier ist das * Ergebnis nicht falsch, aber der Entwurf will einen anderen Radius und einen * eigenen Hover. */ .hh-kaufstrecke .wc-block-cart__submit-button, .hh-kaufstrecke .wc-block-components-checkout-place-order-button { width: 100%; background-color: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--accent-3); border: 0; border-radius: var(--wp--custom--radius--gross); padding: var(--wp--preset--spacing--50); font-family: var(--wp--preset--font-family--subheading); font-size: var(--wp--preset--font-size--large); font-weight: 600; transition: var(--wp--custom--uebergang--ruhig); } .hh-kaufstrecke .wc-block-cart__submit-button:hover, .hh-kaufstrecke .wc-block-components-checkout-place-order-button:hover { background-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--accent-3); transform: translateY(var(--wp--custom--versatz--knopf-hover)); } /* --- Eingabefelder der Kasse -------------------------------------------- */ /* * Ohne diese Regel stehen dort die Felder des Betriebssystems mitten in * Mulish - dieselbe Beobachtung wie beim Sortierfeld der Shop-Uebersicht. * * 🔴 ZWEI BERICHTIGUNGEN am 26.08.2026, beide an der laufenden Kasse gemessen: * * 1. GRUND WAR FALSCH ZUGEORDNET. Hier stand background-color:base — das ist * das Blassgelb #FBFBA4 des Seitengrundes. Der Entwurf zeigt WEISSE Felder * (siehe Kopf dieser Datei). Aufgefallen ist es nur, weil die Regel gar * nicht griff und WooCommerces eigenes Weiss stehen blieb: das Messergebnis * stimmte, die Regel dahinter war trotzdem falsch. Haette sie gegriffen, * waeren die Felder gelb geworden. Weiss gibt es in der Palette nicht (die * ist durchgehend warmgelb), deshalb das eigene Token farbe.eingabefeld. * * 2. RADIUS GRIFF NICHT. Gemessen 4px statt der 10px des Entwurfs. WooCommerce * schreibt in packages-style.css UND checkout.css * .wc-block-components-form .wc-block-components-text-input input[type="…"] * das sind drei Klassenstufen gegen unsere zwei — und beide Blaetter laden * spaeter (Position 20 und 33 gegen 9). Der Zusatzschritt * .wc-block-components-form plus [type] hebt die Regel auf 0,4,1 und * schlaegt damit beide. Kein !important noetig. */ .hh-kaufstrecke .wc-block-components-text-input input, .hh-kaufstrecke .wc-block-components-textarea, .hh-kaufstrecke input[type="text"], .hh-kaufstrecke input[type="email"], .hh-kaufstrecke input[type="tel"], .hh-kaufstrecke select, .hh-kaufstrecke .wc-block-components-form .wc-block-components-text-input input[type], .hh-kaufstrecke .wc-block-components-form .wc-block-components-textarea[class] { background-color: var(--wp--custom--farbe--eingabefeld); border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); border-radius: var(--wp--custom--radius--eingabe); padding: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--primary); } .hh-kaufstrecke label, .hh-kaufstrecke .wc-block-components-checkout-step__title { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--primary); } /* --- Zahlungsart -------------------------------------------------------- */ /* * 🔴 KOMPLETT NEU GEFASST am 26.08.2026, nachdem Moritz gesehen hat, dass der * Auswahlknopf auf der Beschriftung lag ("(o)asse" statt "Vorkasse"). * * URSACHE DES ERSTEN FEHLERS, gemessen: Hier stand * `padding: var(--wp--preset--spacing--40)`, also 14px rundum. Die Kurzform * setzt alle vier Seiten und ueberschrieb damit WooCommerces * padding: 16px 16px 16px 48px * Die 48px links sind kein Gestaltungswert, sondern der PLATZ fuer den * , den WooCommerce absolut auf left:16px setzt. * Ohne diesen Einzug rutscht die Beschriftung unter den Knopf: Knopf * 485–505px, Text ab 483px. * ⚠️ Lehre, die schon zum dritten Mal auftaucht (nach object-fit und dem * Clearfix der Kontoseite): fremde Kurzform-Eigenschaften nie pauschal * ueberschreiben — nur die Teilwerte anfassen, die man wirklich meint. * * WARUM TROTZDEM NICHT NUR DAS POLSTER REPARIERT WURDE: Der erste Anlauf * liess das linke Polster einfach weg. Damit war die Ueberlappung weg, aber * der Entwurf war es immer noch nicht — und beim Nachmessen von Abschnitt 09 * kam heraus, dass er diesen Bereich genau beschreibt: * * Zeile display:flex; align-items:center; gap:10px; * padding:12px 14px; border:1px solid rgba(128,0,139,.2); * border-radius:10px; margin-bottom:8px; * Mulish 13px; #80008B * Knopf span 16x16; border-radius:50%; * border:1px solid rgba(128,0,139,.3) * Zeile aktiv border:1.5px solid #80008B; * background:rgba(128,0,139,.1); font-weight:600 * Knopf aktiv span 16x16; border-radius:50%; border:4px solid #80008B * * Der Entwurf setzt den Knopf also IM FLUSS (Flex mit gap), nicht absolut, * und beide Seiten haben dasselbe Polster. Deshalb hier: Knopf zurueck in den * Fluss und das Label als Flexzeile — damit stimmt die Zeile ohne jeden * Sonderabstand, und der Einzug haengt nicht mehr an einer fremden Zahl. * * 🔴 ZWEITE FALSCHE ZUORDNUNG, bei derselben Gelegenheit gefunden: Die aktive * Zeile hatte `background-color: accent-2` — das ist Blassgelb. Der Entwurf * will rgba(128,0,139,.1), also lasiertes Lila. Derselbe Fehlertyp wie beim * Feldgrund der Kasse weiter oben (base statt weiss): eine Palettenfarbe * gegriffen, die ungefaehr passt, statt den gemessenen Wert abzubilden. * * TOKENZUORDNUNG mit benannten Abweichungen: * rgba(128,0,139,.3) -> rand.knopf (NEU, exakt) * rgba(128,0,139,.1) -> farbe.auswahl-aktiv (NEU, exakt) * 16px Knopf -> abmessung.auswahlknopf (NEU, exakt) * 1.5px / 4px -> rand.breite-aktiv / rand.breite-knopf (NEU, exakt) * gap 10px -> spacing|30 (9px) ABWEICHUNG 1px * padding 12px 14px -> spacing|40 (14px) ABWEICHUNG 2px senkrecht * Mulish 13px -> font-size medium (15px) ABWEICHUNG 2px */ .hh-kaufstrecke .wc-block-components-radio-control__option { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); border-radius: var(--wp--custom--radius--eingabe); padding: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); /* 🔴 NACHTRAG 13.09.2026: Ohne diese Zeile waren auch NICHT gewaehlte Zahlungsarten fett (gemessen 700). Die allgemeine Regel `.hh-kaufstrecke label` weiter oben ist fuer Feldbeschriftungen gedacht und trifft diese Zeilen mit. Entwurf: normal, gewaehlt 600 (unten). */ font-weight: 400; color: var(--wp--preset--color--primary); } /* * Der Knopf zurueck in den Textfluss. `position: static` nimmt ihm die * absolute Lage aus WooCommerces Blatt; ohne das haette die Flexzeile oben * ein Element weniger zu verteilen und der Knopf laege weiterhin darueber. * * ⚠️ appearance:none zeichnet den Knopf selbst — nur so entsteht der Ring des * Entwurfs (aussen duenn, ausgewaehlt dick) statt des gefuellten Punktes, den * das Betriebssystem liefert. Weil das auch den Fokusrahmen entfernt, steht * unten ein eigener :focus-visible — ohne ihn waere die Kasse per Tastatur * nicht mehr bedienbar. */ .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control__input { position: static; appearance: none; flex: none; width: var(--wp--custom--abmessung--auswahlknopf); height: var(--wp--custom--abmessung--auswahlknopf); margin: 0; border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--knopf); border-radius: 50%; background: none; cursor: pointer; /* 🔴 NACHTRAG 13.09.2026: position:static allein reicht NICHT. WooCommerce zentriert den Knopf ueber top:50% UND transform:translateY(-50%). static setzt top ausser Kraft, die Verschiebung per transform bleibt - gemessen matrix(1,0,0,1,0,-7.2): Knopfmitte 445px, Textmitte 452,5px. Auf Moritz' zweitem Bildschirmfoto sass der Knopf deshalb ueber der Beschriftung statt neben ihr. */ transform: none; } .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border-width: var(--wp--custom--rand--breite-knopf); border-color: var(--wp--preset--color--primary); } .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible { outline: var(--wp--custom--rand--breite-aktiv) solid var(--wp--preset--color--primary); outline-offset: var(--wp--preset--spacing--20); } .hh-kaufstrecke .wc-block-components-radio-control__option--checked-option-highlighted, .hh-kaufstrecke .wc-block-components-radio-control__option:has(input:checked) { border-width: var(--wp--custom--rand--breite-aktiv); border-color: var(--wp--preset--color--primary); background-color: var(--wp--custom--farbe--auswahl-aktiv); font-weight: 600; } /* --- Ein Kasten je Zahlungsart ------------------------------------------ */ /* * 🔴 NACHTRAG 13.09.2026 — Moritz' zweites Bildschirmfoto: um die gewaehlte * Zahlungsart lagen ZWEI Rahmen, aussen einer um Zeile und Erlaeuterung, * innen unser Kasten nur um die Zeile. * * Gemessen an der laufenden Kasse: Zahlungsarten mit Erlaeuterung stehen in * einem Akkordeon-Behaelter * div.…-accordion-option > label.…__option + div.…-accordion-content * und WooCommerce (packages-style.css, laedt spaeter) zeichnet selbst: * 1. per ::after einen 1px-Rahmen um die GANZE Gruppe, * 2. per ::after Trennlinien zwischen den Zeilen, an Behaelter UND Label, * 3. um den GEWAEHLTEN Behaelter box-shadow: inset 0 0 0 1.5px, Radius 4px. * Unser Kasten sass am Label, also innerhalb von 3. * * LOESUNG: Der Kasten gehoert an den Behaelter - dann umschliesst er auch die * Erlaeuterung und die Zahlungsart ist EIN Eintrag. Das Label darin wird * neutral, WooCommerces drei Zeichnungen werden abgeschaltet. Fuer * Auswahlgruppen OHNE Behaelter (z. B. Versandarten) bleibt der Kasten am * Label wie oben. * * Spezifitaet je eine Stufe ueber WooCommerce: Gruppe 0,1,1/0,2,1, Behaelter- * Trennlinie 0,2,2, Label-Trennlinie 0,2,1, Schatten 0,2,0/0,2,1. */ .hh-kaufstrecke .wc-block-components-radio-control--highlight-checked::after, .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option::after, .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control__option::after { content: none; } .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option { border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); border-radius: var(--wp--custom--radius--eingabe); margin-bottom: var(--wp--preset--spacing--30); box-shadow: none; } /* * ⚠️ :has() mit Kindkombinator, nicht bloss :has(input:checked): in der * Erlaeuterung kann ein Zahlungsanbieter eigene Felder zeigen (etwa ein * angehaktes "Zahlungsdaten speichern"). Das allein darf eine NICHT gewaehlte * Zahlungsart nicht hervorheben - gezaehlt wird nur der Auswahlknopf im Label. */ .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .hh-kaufstrecke .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option:has(> .wc-block-components-radio-control__option > input:checked) { border-width: var(--wp--custom--rand--breite-aktiv); border-color: var(--wp--preset--color--primary); background-color: var(--wp--custom--farbe--auswahl-aktiv); box-shadow: none; } /* Das Label im Behaelter traegt keinen eigenen Kasten mehr. Die zweite Zeile braucht es, weil die Regel fuer die gewaehlte Zeile oben ueber :has() auf 0,3,1 kommt - sonst laege der lila Grund doppelt (Behaelter + Label). */ .hh-kaufstrecke .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option, .hh-kaufstrecke .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option:has(input:checked) { border: 0; border-radius: 0; margin-bottom: 0; background: none; box-shadow: none; } /* Auswahlgruppen ohne Behaelter: WooCommerces Schatten am gewaehlten Label (label.…--checked-option-highlighted, 0,2,1) liegt sonst ueber unserem Rahmen. */ .hh-kaufstrecke .wc-block-components-radio-control label.wc-block-components-radio-control__option { box-shadow: none; } /* * Die Erlaeuterung unter der Zahlungsart (WooCommerces Akkordeon-Inhalt). * Der Entwurf kennt sie nicht — er zeigt nur die drei Zeilen. Sie hier * wegzulassen waere aber falsch: bei Vorkasse steht dort die Bankverbindung. * SETZUNG: auf denselben Einzug wie die Beschriftung gebracht, damit sie zur * Zeile darueber gehoert und nicht unter dem Knopf beginnt. */ .hh-kaufstrecke .wc-block-components-radio-control-accordion-content { padding-left: calc( var(--wp--custom--abmessung--auswahlknopf) + var(--wp--preset--spacing--30) + var(--wp--preset--spacing--40) ); padding-right: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); /* ⚠️ HIER STAND margin-top:-9px, um die Erlaeuterung an die Zeile heranzuziehen. Gemessen lief die erste Textzeile damit MITTEN DURCH den unteren Rahmen der ausgewaehlten Zeile (Zeile endet bei 398px, Text begann bei 389px). Der Abstand kommt jetzt allein aus dem margin-bottom der Zeile darueber — die Erlaeuterung schiebt nichts mehr nach oben. */ margin-top: 0; margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); line-height: 1.6; } /* * Die Beschriftung selbst. Sie steht in einer eigenen Kette * label > div__option-layout > div__label-group > span__label * > span.wc-block-components-payment-method-label * und erbt dort 11px, obwohl das Label 15px traegt — gemessen, und ohne dass * eine font-size-Regel den span direkt trifft. Ergebnis war eine * Zahlungsart-Beschriftung, die KLEINER war als ihre eigene Erlaeuterung. * Deshalb hier ausdruecklich gesetzt, statt auf Vererbung zu bauen. */ .hh-kaufstrecke .wc-block-components-radio-control__label, .hh-kaufstrecke .wc-block-components-payment-method-label { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--primary); } /* --- Checkboxen der Kasse (Etappe D, 13.09.2026) ------------------------ */ /* * Betrifft Germanizeds Rechtscheckbox ("Mit deiner Bestellung erklaerst du * dich mit unseren AGB und Widerrufsbestimmungen einverstanden.") und * WooCommerces "Einen Hinweis zu deiner Bestellung hinzufuegen" - beide sind * .wc-block-components-checkbox. * * VORHER GEMESSEN: WooCommerces Standard aus packages-style.css - Kasten * 20x20, weiss, Rand Schwarz 48 %, Radius 4px; Haken schwarz. Dazu fett, * weil die allgemeine Regel `.hh-kaufstrecke label` (Feldbeschriftungen) * auch diese Zeilen trifft. * * GEMESSEN AM ENTWURF, Abschnitt 09 (Checkbox ueber "Kostenpflichtig * bestellen"): * Zeile display:flex; align-items:flex-start; gap:9px; * Mulish 12px; #80008B; line-height:1.5 * Kasten 18x18; border:1px solid rgba(128,0,139,.3); border-radius:5px; * kein Grund * TOKENZUORDNUNG: * 18px -> abmessung.checkbox (NEU, exakt) 5px -> radius.klein (NEU, exakt) * rgba(128,0,139,.3) -> rand.knopf (exakt, wie die Zahlungsknoepfe) * gap 9px -> spacing|30 (exakt) * 12px -> font-size small (11px) ABWEICHUNG 1px * SETZUNG (der Entwurf zeigt keinen angehakten Zustand): angehakt primary * mit Haken in base - dieselbe Aussage wie der gewaehlte Zahlungsknopf. * * ⚠️ SPEZIFITAET: WooCommerce schreibt den Kasten mit * .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] * (0,3,0) und laedt spaeter. Mit .hh-kaufstrecke davor 0,4,0. */ .hh-kaufstrecke .wc-block-components-checkbox label { align-items: flex-start; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); font-weight: 400; line-height: 1.5; color: var(--wp--preset--color--primary); } .hh-kaufstrecke .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { width: var(--wp--custom--abmessung--checkbox); min-width: var(--wp--custom--abmessung--checkbox); height: var(--wp--custom--abmessung--checkbox); border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--knopf); border-radius: var(--wp--custom--radius--klein); background: none; } .hh-kaufstrecke .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { border-color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--primary); } .hh-kaufstrecke .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible { outline: var(--wp--custom--rand--breite-aktiv) solid var(--wp--preset--color--primary); outline-offset: var(--wp--preset--spacing--20); } .hh-kaufstrecke .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--wp--preset--color--base); }