/* Block 23 - Zahlungsarten, Alternativ-Adresse /daten-neu/.
 *
 * Angelegt 2026-08-10 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 5, Block 23. Begruendung und Messungen: inc/kauf-schritt-zahlung.php.
 *
 * ALLE Regeln haengen an .iz-kauf-zahlung auf #payment. Diese Klasse setzt die
 * Vorlage checkout/payment.php ausschliesslich auf den Alternativseiten der
 * Bauphase. Damit kann keine Regel dieser Datei die LIVE-Kasse erreichen -
 * dasselbe Sicherungsprinzip wie .iz-kauf-kasse in Block 22.
 *
 * ZU DEN !important: Der Bestand in css/iz-checkout.css setzt die
 * Zahlungsartenliste durchgehend mit !important (Z. 162-283), weil Germanized
 * Pro eigene Basis-Styles gleicher Spezifitaet mitliefert. Wer dort etwas
 * uebersteuern will, kommt ohne !important nicht an. Das ist KEIN Flicken auf
 * einem Flicken (Regel 1): Es wird nichts korrigiert, was heute falsch
 * aussieht - es wird eine Regel, die die LIVE-Kasse weiter braucht, innerhalb
 * der neuen Huelle ausgesetzt. Beim Livegang faellt der Bestandsblock, dann
 * fallen auch diese Ausnahmen.
 *
 * KEIN HEX-LITERAL, KEINE px-SCHRIFTGROESSE. Farben aus css/iz-tokens.css,
 * Groessen aus der Katalogskala (Basis 18 px), Radien nur 4px/3px/50%.
 */

/* --- Die Express-Zeile ------------------------------------------------- */

/* Sie ist eine Zeile der Zahlungsartenliste wie die anderen, aber KEINE
 * Auswahl: Es gibt keinen Radio-Knopf. Deshalb faellt der Platz weg, den die
 * Liste sonst fuer den Knopf freihaelt, und die Zeile wird gestapelt statt
 * nebeneinander gesetzt. */
#payment.iz-kauf-zahlung li.wc_payment_method.iz-kauf-express {
	display: block !important;
	padding: var(--sp-4) var(--sp-6) !important;
}

/* Die Ueberschrift der Zeile. Sie ersetzt das <label> der alten Kachel und
 * traegt dessen Groesse und Gewicht weiter, damit die Zeile sich optisch nicht
 * von PayPal, Karte und SEPA loest. --fs-sm = 0.875rem = 15,75 px bei
 * Basis 18; das <label> der Nachbarzeilen steht auf 16 px. Der Unterschied
 * ist gewollt: Dies ist keine waehlbare Zahlungsart, sondern eine
 * Bereichsueberschrift. */
#payment.iz-kauf-zahlung .iz-kauf-express__titel {
	display: block;
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--iz-text-muted);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Der Bereich, in den Stripe seine Knoepfe setzt.
 *
 * css/iz-checkout.css Z. 271-273 setzt #iz-express-payment-area auf
 * display:none und zeigt ihn nur bei #payment.iz-consent-given.iz-express-
 * selected. Die zweite Klasse haengt am Radio-Knopf, den es hier nicht mehr
 * gibt - ohne diese Regel bliebe der Bereich also fuer immer verborgen.
 *
 * ==================================================================
 * BINDUNG AN .iz-consent-given AUFGEHOBEN - 2026-08-17, ANWEISUNG CHRISTIAN
 * ==================================================================
 * Wortlaut: "der knopf ist aber erst da, wenn ich die Datenschutzbestimmungen
 * anklicke. Auch totaler bloedsinn. hat vorher auch funktioniert"
 *
 * DIE FRUEHERE BEGRUENDUNG (10.08., hier als ueberholt festgehalten): Ein Klick
 * auf Apple Pay loest die Zahlung unmittelbar aus; der Knopf sollte deshalb so
 * wenig vor der Bestaetigung der Bedingungen erreichbar sein wie der
 * Bestellknopf. Das war eine eigene Verschaerfung, keine Vorgabe - vor dem
 * Umbau war der Knopf sofort da.
 *
 * WARUM DIE VERSCHAERFUNG AUCH SACHLICH SCHADETE: Stripe montiert sein Element
 * beim Seitenaufbau. In einem display:none-Behaelter kann es keine Breite
 * ermitteln und zeichnet Knoepfe mit 0 x 0 Pixel - am 17.08. gemessen. Die
 * Sperre hat den Knopf also nicht nur versteckt, sondern unbrauchbar gemacht.
 *
 * WAS DIE RECHTSPFLICHT WEITERHIN TRAEGT: Die Bestaetigung der Bedingungen wird
 * beim Absenden serverseitig geprueft (checkout-flow.php). Sie haengt nicht an
 * der Sichtbarkeit dieses Bereichs. */
#payment.iz-kauf-zahlung .iz-kauf-express #iz-express-payment-area {
	display: block !important;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
}

/* Der Hinweis, solange die Bedingungen nicht bestaetigt sind. Er verschwindet
 * in dem Moment, in dem die Knoepfe erscheinen - beide Zustaende schliessen
 * einander aus, damit nie eine leere Zeile stehen bleibt. Das war der
 * eigentliche Mangel der alten Kachel. */
/* 2026-08-17: Der Hinweis "Erscheint, sobald Sie die Bedingungen unten
 * bestaetigt haben" ist mit der Aufhebung der Sperre gegenstandslos - die
 * Knoepfe stehen jetzt sofort da. Ein Hinweis, der etwas ankuendigt, was
 * bereits sichtbar ist, verwirrt. Deshalb ausgeblendet statt entfernt: der
 * Text bleibt in der Vorlage, damit die Rueckname eine Zeile ist. */
#payment.iz-kauf-zahlung .iz-kauf-express__hinweis {
	display: none;
}

/* Stripes eigenes Element bringt seine Groessen selbst mit. Hier wird nur der
 * Abstand nach unten genommen, den css/iz-checkout.css setzt - innerhalb der
 * Zeile erzeugt er sonst eine Luecke ueber der Trennlinie zur naechsten
 * Zahlungsart. */
#payment.iz-kauf-zahlung .iz-kauf-express #wc-stripe-express-checkout-element {
	margin: 0;
}

/* --- Die Zahlungsarten als Raster ------------------------------------- *
 *
 * ANLASS: Abdelkabir am 2026-10-15, im Wortlaut: "Ich nehme an, es geht hier
 * um die Kacheln fuer die Zahlarten. Das muss auf jeden Fall als erstes
 * gemacht werden. Das sieht naemlich doof aus". Seine Gestaltungsvorgabe,
 * ebenfalls im Wortlaut des Auftrags: die Express-Zahlarten als EINE breite
 * Kachel oben, darunter die uebrigen als Raster nach dem Vorbild der
 * Abo-Karten (css/aboseite/block-03-karten.css, repeat(3, 1fr)).
 *
 * WARUM DREI SPALTEN AUFGEHEN: Auf der Live-Kasse liefert
 * get_available_payment_gateways() am 2026-10-15 genau drei Zahlarten -
 * ppcp-gateway, stripe, stripe_sepa_debit. Dazu die Express-Zeile, die keine
 * Zahlart ist. Drei plus eine breite Kachel ergibt eine volle Reihe und keinen
 * Rest. Gemessen, nicht angenommen: direct-debit und paypal werden auf der
 * Kasse von iz-woocommerce-logic/inc/checkout-shared.php Z. 74 entfernt.
 *
 * ZUR SPEZIFITAET - der Grund, warum hier Selektoren doppelt stehen: Der
 * Bestand in css/iz-checkout.css Z. 162-283 setzt die Liste durchgehend mit
 * !important. Zwei seiner Regeln treffen dieselbe Spezifitaet wie die hiesige
 * Huelle, naemlich die mit :last-of-type (0,1,5,2). Bei Gleichstand
 * entscheidet die Ladereihenfolge - und die ist nicht verlaesslich, weil
 * iz-checkout.css aus dem Autoptimize-Buendel ausgenommen ist (gemessen am
 * 2026-10-15: autoptimize_css_exclude enthaelt iz-checkout.css) und
 * 23-zahlung.css darin liegt. Deshalb steht :last-of-type hier ausdruecklich
 * mit im Selektor, statt sich auf die Reihenfolge zu verlassen.
 *
 * KEIN HEX-LITERAL, KEINE px-SCHRIFTGROESSE, RADIUS NUR 4px.
 */

#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--sp-4) !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: none !important;
	align-items: start !important;
}

/* Jede Kachel traegt ihren eigenen Rahmen. Im Bestand hielt der Rahmen des
 * <ul> die Liste zusammen und die Zeilen trugen nur eine Trennlinie nach
 * unten; im Raster waere das eine Linie ohne Anschluss. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method,
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:last-of-type {
	align-items: flex-start !important;
	gap: var(--sp-3) !important;
	border: 1px solid var(--iz-border) !important;
	border-radius: 4px !important;
	padding: var(--sp-3) !important;
	margin: 0 !important;
}

/* Die breite Kachel oben: die Express-Zeile ueber alle drei Spalten. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.iz-kauf-express {
	grid-column: 1 / -1 !important;
}

/* Die gewaehlte Zahlart bekommt ebenfalls die ganze Zeile. Ohne das oeffnet
 * sich ihr Formular in einer Drittelspalte - bei der Karte ist das Stripes
 * eigenes Eingabefeld, bei SEPA drei Eingabezeilen. Gemessen am 2026-10-15:
 * das Kartenformular ist im Bestand 576 px breit; eine Drittelspalte misst
 * bei 618 px Spaltenbreite 194,7 px. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(> input.input-radio:checked) {
	grid-column: 1 / -1 !important;
}

/* In der schmalen Kachel steht die Beschriftung ueber dem Zeichen, nicht
 * daneben: Das Zeichen der Karte ist 120 px breit und traegt seine Hoehe als
 * !important im style-Attribut des Plugins - es laesst sich per CSS nicht
 * verkleinern. Nebeneinander blieben fuer den Text 2,7 px. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label {
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: var(--sp-2) !important;
}
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label img {
	margin-left: 0 !important;
}

/* In der breiten Kachel ist dafuer Platz: dort steht das Zeichen wieder
 * rechts neben der Beschriftung, wie im Bestand. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(> input.input-radio:checked) > label {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
}
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(> input.input-radio:checked) > label img {
	margin-left: auto !important;
}

/* Die Express-Kachel ist keine Auswahl und hat kein <label>; sie bekommt
 * denselben Rahmen wie die uebrigen, damit die Reihe als eine Gruppe liest. */
#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.iz-kauf-express {
	padding: var(--sp-4) !important;
}

/* Unter 600 px steht alles untereinander - dieselbe Schwelle, die die uebrigen
 * Bauteile der Kaufstrecke verwenden (css/kauf/01-feld.css und folgende).
 * NICHT AM GERAET GEPRUEFT: der Testbrowser kommt hier nicht unter rund
 * 825 px (15_IZ_Grundeinstellungen.md, G-10.5). Vermerkt in
 * IZ-Kompass/Mobil-Bestaetigungen.md. */
@media (max-width: 600px) {
	#payment.iz-kauf-zahlung ul.wc_payment_methods.payment_methods.methods {
		grid-template-columns: 1fr !important;
	}
}