/**
 * Warenkorb-Einstieg und Zwischenschritte des Dienstradleasings.
 *
 * ---------------------------------------------------------------------------
 * GEKAPSELT
 * ---------------------------------------------------------------------------
 * Jede Regel dieser Datei beginnt mit .fs24-lea-cta oder .fs24-lea-flow. Es
 * gibt keinen Selektor auf ein Theme-, WooCommerce- oder Blocksy-Element und
 * keine Regel ohne eigenes Präfix – diese Datei kann an keiner anderen Stelle
 * der Seite etwas verändern. Es gibt auch kein !important.
 *
 * Bewusst NICHT enthalten ist eine Regel der Art "… a { color: inherit }".
 * Genau die hat im Theme schon einmal dafür gesorgt, dass die weisse
 * Schrift eines orangefarbenen Knopfes unsichtbar wurde (höhere Spezifität
 * als die Knopfregel selbst).
 *
 * ---------------------------------------------------------------------------
 * WARUM DIE KNOPFREGELN DAS ELTERNPRÄFIX MITFÜHREN
 * ---------------------------------------------------------------------------
 * Gemessen am gerenderten Warenkorb (2026-09-26, Headless-Chrome,
 * CSS.getMatchedStylesForNode): Blocksy färbt jede Schaltfläche über eine
 * lange Selektorliste, die unter anderem [type="submit"] enthält – also
 * Spezifität 0,1,0, exakt so viel wie ".fs24-lea-cta__btn". Bei Gleichstand
 * entscheidet die Reihenfolge, und Blocksys "ct-main-styles" wird NACH den
 * Plugin-Stylesheets geladen. Der Knopf war dadurch messbar blau
 * (rgb(40,114,250)) statt orange.
 *
 * Gelöst ohne !important, indem jede Knopfregel ihr eigenes Elternpräfix
 * mitführt (0,2,0 bzw. 0,2,1 bei <a>). Das ist derselbe Weg, mit dem im
 * Theme bereits die orangefarbenen Primärknöpfe gegen eine fremde Regel
 * gleicher Spezifität durchgesetzt wurden.
 *
 * ---------------------------------------------------------------------------
 * FARBEN AUS DEM SHOP, MIT RÜCKFALLWERTEN
 * ---------------------------------------------------------------------------
 * --ink, --muted, --line, --soft, --accent, --accent-dark und
 * --fs24-btn-radius stammen aus dem :root des Shops. Jeder Wert steht hier
 * mit Rückfall, damit der Bereich auch ohne dieses Theme richtig aussieht.
 *
 * Überschriften bekommen ausdrücklich ihr eigenes color: Blocksy färbt
 * h1–h6 global marineblau, und eine Farbe am Elternelement vererbt sich
 * dagegen nicht.
 *
 * ---------------------------------------------------------------------------
 * MOBIL ZUERST
 * ---------------------------------------------------------------------------
 * Alles steht einspaltig, bis genug Platz da ist. Keine festen Breiten und
 * keine Mindestbreite, die auf einem schmalen Telefon (geprüft bei 420 px)
 * aus dem Bild laufen könnte.
 */

/* ==========================================================================
   EINSTIEG IM WARENKORB
   ========================================================================== */

.fs24-lea-cta {
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var( --line, rgba( 17, 19, 21, .12 ) );
	text-align: left;
}

.fs24-lea-cta__titel {
	margin: 0 0 4px;
	color: var( --ink, #111315 );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.fs24-lea-cta__text {
	margin: 0 0 12px;
	color: var( --muted, #656b70 );
	font-size: 14px;
	line-height: 1.45;
}

.fs24-lea-cta__form {
	margin: 0;
}

/*
 * BEWUSST DER SEKUNDÄRE KNOPF, NICHT DER GEFÜLLTE.
 *
 * "Sicher zur Kasse" direkt darüber ist der gefüllte orangefarbene
 * Hauptweg. Ein zweiter, identisch aussehender Knopf unmittelbar darunter
 * würde mit ihm konkurrieren statt eine Alternative anzubieten – gefordert
 * ist ausdrücklich eine klare Trennung vom Kauf-Checkout.
 *
 * Die gewählte Form ist keine Erfindung: Es ist exakt das Muster, das der
 * Warenkorb bereits für seinen zweiten Weg verwendet ("Passendes Zubehör
 * entdecken", .fs24-cart__accessory-link) – weisse Fläche, orangefarbener
 * Rand, orangefarbene Schrift, im Hover eine leichte Tönung.
 */
.fs24-lea-cta .fs24-lea-cta__btn {
	display: block;
	width: 100%;
	padding: 13px 18px;
	border: 1px solid var( --accent, #d24614 );
	border-radius: var( --fs24-btn-radius, 10px );
	background: #fff;
	color: var( --accent, #d24614 );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.fs24-lea-cta .fs24-lea-cta__btn:hover,
.fs24-lea-cta .fs24-lea-cta__btn:focus,
.fs24-lea-cta .fs24-lea-cta__btn:focus-visible,
.fs24-lea-cta .fs24-lea-cta__btn:active {
	border-color: var( --accent, #d24614 );
	background: rgba( 210, 70, 20, .09 );
	color: var( --accent-dark, #b93800 );
}

.fs24-lea-cta .fs24-lea-cta__btn:focus-visible {
	outline: 2px solid var( --ink, #111315 );
	outline-offset: 2px;
}

/* ==========================================================================
   DERSELBE EINSTIEG IN DER KASSE (Auftrag 8b)

   Unter den Zahlarten, aber ausdruecklich KEINE Zahlart: kein Radiofeld,
   keine Auswahlmarkierung, keine Zahlarten-Karte. Damit das auch optisch
   sofort erkennbar ist, steht der Bereich hier in einem eigenen Kasten mit
   deutlichem Abstand - im Warenkorb genuegte dafuer eine Trennlinie, weil
   darueber kein Kasten steht, hier stehen die Zahlarten in einem.

   Es ist derselbe Baustein: Ueberschrift, Text und Knopf verwenden
   unveraendert die Regeln oben. Hier steht nur, was sich unterscheidet.
   ========================================================================== */

.fs24-lea-cta--checkout {
	margin: 20px 0 0;
	padding: 16px 18px;
	border: 1px solid var( --line, rgba( 17, 19, 21, .18 ) );
	border-top: 1px solid var( --line, rgba( 17, 19, 21, .18 ) );
	border-radius: var( --fs24-btn-radius, 10px );
	background: var( --soft, #f4f5f6 );
}

/*
 * Der Knopf steht im Kasten auf hellem Grund - deshalb bleibt seine Flaeche
 * weiss, damit er sich davon abhebt. Die Regel oben setzt bereits #fff;
 * hier wird sie nicht wiederholt, sondern nur der Abstand ergaenzt.
 */
.fs24-lea-cta--checkout .fs24-lea-cta__btn {
	margin: 0;
}

.fs24-lea-cta__fussnote {
	margin: 10px 0 0;
	color: var( --muted, #656b70 );
	font-size: 13px;
	line-height: 1.45;
}

/*
 * Das eigentliche Formular liegt hinter dem Kassenformular und ist nie
 * sichtbar (siehe includes/checkout-handoff.php: ein <form> im <form> waere
 * ungueltiges HTML). Das "hidden"-Attribut traegt es selbst mit; diese Regel
 * steht daneben, falls ein Theme "hidden" per display-Regel aushebelt.
 */
.fs24-lea-cta__handoff-form {
	display: none;
}

/* ==========================================================================
   ZWISCHENSCHRITTE
   ========================================================================== */

.fs24-lea-flow {
	padding: 28px 16px 48px;
}

.fs24-lea-flow__inner {
	max-width: 860px;
	margin: 0 auto;
	color: var( --ink, #111315 );
	font-size: 15px;
	line-height: 1.55;
}

.fs24-lea-flow__titel {
	margin: 0 0 10px;
	color: var( --ink, #111315 );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.fs24-lea-flow__hinweis {
	margin: 0 0 20px;
	color: var( --muted, #656b70 );
}

.fs24-lea-flow__hinweis--rand {
	margin: 20px 0;
	padding: 12px 14px;
	border: 1px solid var( --line, rgba( 17, 19, 21, .12 ) );
	border-radius: var( --fs24-btn-radius, 10px );
	background: var( --soft, #eceeef );
}

.fs24-lea-flow__warnung {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var( --accent, #d24614 );
	border-radius: var( --fs24-btn-radius, 10px );
	color: var( --ink, #111315 );
}

.fs24-lea-flow__form {
	margin: 0;
}

.fs24-lea-flow__karten {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fs24-lea-flow__karte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 12px;
	padding: 14px;
	border: 1px solid var( --line, rgba( 17, 19, 21, .12 ) );
	border-radius: var( --fs24-btn-radius, 10px );
	background: #fff;
}

.fs24-lea-flow__karte.is-aktiv {
	border-color: var( --accent, #d24614 );
}

.fs24-lea-flow__bildrahmen {
	flex: 0 0 auto;
	width: 96px;
	max-width: 100%;
}

/*
 * Festes Seitenverhältnis statt height:auto. WooCommerce schneidet
 * "woocommerce_thumbnail" ohnehin quadratisch zu; entscheidend ist aber der
 * Fall, in dem die Bilddatei FEHLT (auf Staging ist das durch die
 * Uploads-Lücke der Normalfall, und auch der WooCommerce-Platzhalter ist
 * dort nicht vorhanden): Ohne festes Verhältnis zieht der Alternativtext
 * den Rahmen zu einem hohen, schiefen Kasten auseinander. So bleibt die
 * Karte in jedem Fall in Form.
 */
.fs24-lea-flow__bildrahmen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 6px;
}

.fs24-lea-flow__text {
	flex: 1 1 auto;
	min-width: 0;
}

.fs24-lea-flow__name {
	margin: 0 0 2px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.fs24-lea-flow__variante,
.fs24-lea-flow__menge {
	margin: 0 0 2px;
	color: var( --muted, #656b70 );
	font-size: 14px;
}

.fs24-lea-flow__preis {
	margin: 4px 0 0;
	font-weight: 600;
}

.fs24-lea-flow__marke {
	margin: 6px 0 0;
	color: var( --accent-dark, #b93800 );
	font-size: 14px;
	font-weight: 600;
}

.fs24-lea-flow__aktion {
	flex: 0 0 auto;
}

.fs24-lea-flow__wahl {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fs24-lea-flow__option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.fs24-lea-flow__option input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.fs24-lea-flow .fs24-lea-flow__btn {
	display: inline-block;
	width: 100%;
	padding: 12px 18px;
	border: 1px solid var( --accent, #d24614 );
	border-radius: var( --fs24-btn-radius, 10px );
	background: #fff;
	color: var( --accent, #d24614 );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.fs24-lea-flow .fs24-lea-flow__btn:hover,
.fs24-lea-flow .fs24-lea-flow__btn:focus,
.fs24-lea-flow .fs24-lea-flow__btn:focus-visible {
	background: rgba( 210, 70, 20, .09 );
	color: var( --accent-dark, #b93800 );
}

/*
 * Element-qualifiziert (0,2,1): Ein <a> in dieser Rolle bekäme sonst die
 * Linkfarbe des Themes statt der eigenen.
 */
.fs24-lea-flow a.fs24-lea-flow__btn {
	color: var( --accent, #d24614 );
}

.fs24-lea-flow a.fs24-lea-flow__btn:hover,
.fs24-lea-flow a.fs24-lea-flow__btn:focus,
.fs24-lea-flow a.fs24-lea-flow__btn:focus-visible {
	color: var( --accent-dark, #b93800 );
}

.fs24-lea-flow .fs24-lea-flow__btn--primary {
	border-color: var( --accent, #d24614 );
	background: var( --accent, #d24614 );
	color: #fff;
}

.fs24-lea-flow .fs24-lea-flow__btn--primary:hover,
.fs24-lea-flow .fs24-lea-flow__btn--primary:focus,
.fs24-lea-flow .fs24-lea-flow__btn--primary:focus-visible,
.fs24-lea-flow .fs24-lea-flow__btn--primary:active {
	border-color: var( --accent-dark, #b93800 );
	background: var( --accent-dark, #b93800 );
	color: #fff;
}

.fs24-lea-flow a.fs24-lea-flow__btn--primary,
.fs24-lea-flow a.fs24-lea-flow__btn--primary:hover,
.fs24-lea-flow a.fs24-lea-flow__btn--primary:focus,
.fs24-lea-flow a.fs24-lea-flow__btn--primary:focus-visible {
	color: #fff;
}

.fs24-lea-flow .fs24-lea-flow__btn:focus-visible {
	outline: 2px solid var( --ink, #111315 );
	outline-offset: 2px;
}

.fs24-lea-flow__gewaehlt {
	margin: 0 0 20px;
}

.fs24-lea-flow__gewaehlt-titel {
	margin: 0 0 8px;
	color: var( --muted, #656b70 );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.fs24-lea-flow__leer {
	margin: 0;
	color: var( --muted, #656b70 );
}

.fs24-lea-flow__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs24-lea-flow__liste li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var( --line, rgba( 17, 19, 21, .12 ) );
}

.fs24-lea-flow__liste li:last-child {
	border-bottom: 0;
}

.fs24-lea-flow__listen-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fs24-lea-flow__listen-preis {
	font-weight: 600;
	white-space: nowrap;
}

.fs24-lea-flow__abschluss {
	margin: 0 0 20px;
}

.fs24-lea-flow__aktionen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 16px;
}

.fs24-lea-flow__zurueck {
	margin: 0;
}

/* ==========================================================================
   AB TABLETBREITE: BILD, TEXT UND AKTION NEBENEINANDER
   ========================================================================== */

@media ( min-width: 560px ) {

	.fs24-lea-flow__karte {
		flex-direction: row;
		align-items: center;
	}

	.fs24-lea-flow__aktion {
		width: auto;
		min-width: 210px;
	}

	.fs24-lea-flow .fs24-lea-flow__btn {
		width: auto;
	}

	.fs24-lea-flow__aktionen {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   DER SCHLOSSABSCHNITT IM ZUBEHOERSCHRITT (Auftrag 12, 2026-09-30)
   --------------------------------------------------------------------------
   Eine eigene Umrandung, weil hier etwas anderes steht als in der Liste
   darueber: Die Karten sind eine Zuordnung je Position, dieser Abschnitt
   ist EINE Entscheidung fuer die ganze Anfrage. Ohne Absetzung liest er
   sich wie eine weitere Zubehoerkarte.

   Es entstehen keine neuen Bausteine: Ueberschrift, Hinweistext und die
   beiden Auswahlfelder verwenden die bereits vorhandenen Klassen
   (.fs24-lea-flow__hinweis, .fs24-lea-flow__wahl, .fs24-lea-flow__option).
   ========================================================================== */

.fs24-lea-flow__schloss {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var( --line, rgba( 17, 19, 21, .18 ) );
	border-radius: var( --fs24-btn-radius, 10px );
	background: var( --soft, #f4f5f6 );
}

.fs24-lea-flow__schloss-titel {
	padding: 0;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var( --ink, #111315 );
}

.fs24-lea-flow__schloss .fs24-lea-flow__hinweis {
	margin: 0 0 10px;
}

/* Die Auswahl steht im Kasten untereinander - "Block" heisst hier nur, dass
   sie nicht neben der Karte, sondern unter dem Text liegt. */
.fs24-lea-flow__wahl--block {
	margin: 0;
}

.fs24-lea-flow__schloss-stand {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var( --muted, #656b70 );
}

.fs24-lea-flow__schloss-stand.is-offen {
	color: var( --accent, #d24614 );
}

.fs24-lea-flow__schloss-link {
	display: inline-block;
	margin-left: 4px;
	font-weight: 600;
	color: var( --accent, #d24614 );
}

/* ==========================================================================
   RÜCKWEG  (ergänzt 2026-10-01)

   Steht auf jeder Station über der Überschrift. Bewusst ein schlichter Link
   und kein Knopf: Er führt zurück, er sendet nichts ab - und soll auch nicht
   wie etwas aussehen, das etwas absendet.
   ========================================================================== */

.fs24-lea-flow__zurueck {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.4;
}

.fs24-lea-flow__zurueck-link {
	display: inline-block;
	padding: 4px 0;
	font-weight: 600;
	color: var( --muted, #656b70 );
	text-decoration: none;
}

.fs24-lea-flow__zurueck-link:hover,
.fs24-lea-flow__zurueck-link:focus-visible {
	color: var( --ink, #111315 );
	text-decoration: underline;
}

/* ==========================================================================
   AKTIONSLINK AN DER SCHLOSSOPTION  (ergänzt 2026-10-01)

   Steht unmittelbar unter der Option "Ich lease ein geeignetes Fahrradschloss
   mit." und sagt dort, dass dafür noch aktiv ein Schloss zu wählen ist.

   NICHT ALLEIN ÜBER DIE FARBE unterscheidbar: Der Link ist zusätzlich
   unterstrichen und fett, und er trägt einen Richtungspfeil. Wer Farben nicht
   unterscheiden kann, erkennt ihn an Unterstreichung, Gewicht und Pfeil.
   ========================================================================== */

.fs24-lea-flow__option-gruppe {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fs24-lea-flow__option-aktion {
	/* Eingerückt bis unter den Text der Option, nicht unter das Radio. */
	margin: 0 0 4px;
	padding-inline-start: 30px;
	font-size: 14px;
	line-height: 1.4;
}

.fs24-lea-flow__schloss-aktion {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	/* Grosszügige Klickfläche, auch auf dem Telefon. */
	padding: 4px 0;
	font-weight: 700;
	color: var( --accent, #d24614 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fs24-lea-flow__schloss-aktion:hover,
.fs24-lea-flow__schloss-aktion:focus-visible {
	color: var( --accent-dark, #b93800 );
	text-decoration-thickness: 2px;
}

.fs24-lea-flow__schloss-aktion:focus-visible {
	outline: 2px solid var( --ink, #111315 );
	outline-offset: 2px;
}

.fs24-lea-flow__schloss-aktion-pfeil {
	font-weight: 700;
}

/* ==========================================================================
   KONTEXT AUF DEN SCHLOSS-SEITEN  (ergänzt 2026-10-01)

   Erscheint ausschliesslich, wenn eine passende Leasing-Session läuft
   (includes/leasing-regeln/schloss-kontext.php). Bewusst dezent: Er soll den
   Zusammenhang halten, nicht die Kategorieseite übernehmen.
   ========================================================================== */

.fs24-lea-schlosskontext {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid var( --fs24-line, #e6e8ea );
	border-inline-start: 4px solid var( --accent, #d24614 );
	border-radius: var( --fs24-card-radius, 12px );
	background: #fff;
}

.fs24-lea-schlosskontext__titel {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var( --ink, #111315 );
}

.fs24-lea-schlosskontext__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --muted, #656b70 );
}

.fs24-lea-schlosskontext__aktion {
	margin: 12px 0 0;
}

.fs24-lea-schlosskontext__btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var( --fs24-btn-radius, 10px );
	background: var( --accent, #d24614 );
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.fs24-lea-schlosskontext__btn:hover,
.fs24-lea-schlosskontext__btn:focus-visible {
	background: var( --accent-dark, #b93800 );
	color: #fff;
}

.fs24-lea-schlosskontext__btn:focus-visible {
	outline: 2px solid var( --ink, #111315 );
	outline-offset: 2px;
}

.fs24-lea-schlosskontext__zurueck {
	margin: 10px 0 0;
	font-size: 14px;
}

.fs24-lea-schlosskontext__zurueck a {
	font-weight: 600;
	color: var( --muted, #656b70 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fs24-lea-schlosskontext__zurueck a:hover,
.fs24-lea-schlosskontext__zurueck a:focus-visible {
	color: var( --ink, #111315 );
}

@media (max-width: 480px) {
	.fs24-lea-schlosskontext__btn {
		display: block;
		text-align: center;
	}
}