/* ===========================================================================
 * checkout.css -- Block-Warenkorb und Block-Kasse.
 *
 * WARUM ES DIESE DATEI UEBERHAUPT BRAUCHT
 *
 * Warenkorb (Seite 10) und Kasse (Seite 11) sind BLOCK-Seiten --
 * wp:woocommerce/cart und wp:woocommerce/checkout --, keine klassischen
 * WooCommerce-Vorlagen. Ihre Knoepfe sind React-Komponenten mit eigenen
 * Klassennamen. FLATSOMES .button GREIFT DORT NICHT, auch nicht ueber den
 * Customizer: Der Knopfradius aus den Theme-Mods (button_radius 999px) gilt
 * nur fuer Flatsome-Knoepfe.
 *
 * Das Aussehen kommt stattdessen aus den Global Styles von WordPress:
 *
 *   :root :where(.wp-element-button, .wp-block-button__link) {
 *     background-color: #32373c;   <- das Grau
 *     border-width: 0;             <- daher eckig
 *     font-size: inherit;          <- daher klein
 *   }
 *
 * Das ist die Vorgabe des Kerns fuer Themes ohne theme.json, und Flatsome ist
 * ein klassisches Theme. Die Spezifitaet ist nur (0,1,0), weil :where() null
 * zaehlt -- leicht zu uebersteuern, es muss es nur jemand tun.
 *
 * Die Selektoren unten sind trotzdem zweistufig (0,2,0) gewaehlt und nicht
 * einstufig. Bei Gleichstand mit (0,1,0) entschiede sonst allein die
 * Ladereihenfolge, und die ist hier ein wackliges Fundament: global-styles
 * steht bei 188, das Child-Theme bei 197-201. Ein Plugin, das sich
 * dazwischenschiebt, kippte das lautlos.
 *
 * ALS VORFAHR DIENT NUR, WAS IM GESPEICHERTEN MARKUP STEHT
 *
 * Naheliegend waere .wc-block-cart gewesen -- WooCommerce benutzt die Klasse
 * in seinem eigenen Stylesheet. Im Seiteninhalt steht sie aber NICHT; dort
 * gibt es allein wp-block-woocommerce-cart. .wc-block-cart setzt erst das
 * React-Bundle zur Laufzeit, und worauf, ist nicht zugesichert. Der Selektor
 * haette also womoeglich nie gegriffen -- und zwar ohne Fehlermeldung.
 *
 * Deshalb hier durchgaengig die wp-block-woocommerce-*-Klassen: Die stehen
 * als Blockklasse im Beitragsinhalt und sind da, bevor irgendein Skript
 * laeuft. Geprueft am 14.08.2026 an den Seiten 10 und 11.
 * ======================================================================== */

/* -- Die beiden Abschlussknoepfe ------------------------------------------
 *
 *   Warenkorb  "Weiter zur Kasse"           .wc-block-cart__submit-button
 *   Kasse      "Zahlungspflichtig bestellen" .wc-block-components-checkout-place-order-button
 *
 * Beide sollen aussehen wie jeder andere Knopf im Shop: gruen, vollrund.
 */

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--fs-color-primary, #325645);
	border: 0;
	border-radius: var(--shop-radius-pill);
	color: #fff;
	font-weight: 700;
	transition: filter var(--shop-transition);
}

/*
 * Der Hoverton wird aus der Primaerfarbe abgeleitet, nicht danebengelegt.
 * Ein fester zweiter Hexwert waere eine zweite Wahrheit: Aendert jemand die
 * Farbe im Customizer, bliebe der Hover auf dem alten Ton stehen -- und das
 * faellt niemandem auf, weil man den Hover beim Klicken nicht ansieht.
 */
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	filter: brightness(0.88);
}

/*
 * "Zahlungspflichtig bestellen" ist der letzte Klick der ganzen Strecke und
 * traegt die laengste Beschriftung. Er bekommt deshalb als einziger eine
 * groessere Schrift -- der Warenkorbknopf bleibt auf Fliesstextgroesse, sonst
 * konkurrieren zwei Knoepfe um dieselbe Aufmerksamkeit.
 *
 * 700 statt 600: Von Source Sans 3 sind nur Regular und 700 geladen (siehe
 * Customizer). Ein 600 liesse der Browser kuenstlich fetten oder faellt auf
 * 700 zurueck -- beides schlechter als 700 direkt.
 */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	font-size: 1.125em;
}

/* -- Pflicht-Checkboxen von German Market ---------------------------------
 *
 * Markup, aus dem Block-Bundle des Plugins gelesen:
 *
 *   div.german-market-block-checkout-checkboxes
 *     div.wc-block-components-checkbox        <- je Checkbox
 *       label > input + svg + span.wc-block-components-checkbox__label
 *     span.german-market-checkbox             <- oder nur Text, ohne Kaestchen
 *
 * Weder das Plugin noch WooCommerce setzt hier einen vertikalen Abstand. Bei
 * einer Checkbox faellt das nicht auf, ab zwei kleben sie aneinander und die
 * letzte am Bestellknopf.
 *
 * Der Abstand haengt am WRAPPER und dessen direkten Kindern, nicht an
 * .german-market-checkbox: Dieses span steckt je nach Einstellung entweder
 * frei im Wrapper oder INNERHALB des Labels einer Checkbox. Haenge man den
 * Abstand daran, bekaeme man ihn im zweiten Fall mitten ins Label.
 *
 * display:block ist noetig, weil das freistehende Element ein span ist --
 * an einem Inline-Element bleibt margin-bottom wirkungslos.
 */

.german-market-block-checkout-checkboxes > * {
	display: block;
	margin-bottom: var(--shop-space-2);
}

.german-market-block-checkout-checkboxes > *:last-child {
	margin-bottom: 0;
}

/* Luft zwischen dem letzten Haken und dem Bestellknopf. */
.german-market-block-checkout-checkboxes {
	margin-bottom: var(--shop-space-3);
}