/* Foerbs Shop – Euro-Zahlung: Umschalter „Bezahlen mit“ und Preiszusätze.
 * Theme-Tokens (foerbs-labyrinth_design.md): --accent-2 Petrol, --base-3 helle Fläche.
 * Umschalter = Muster der Werkstatt-Reiter (.frw-reiter-knopf): die gewählte
 * Wahl ist der EINE Theme-Button (.button, keine eigene Regel), die andere
 * seine ruhige Umkehrung. Kein dritter Button-Look. */

.fse-umschalter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: 0 0 1.5em;
}

.fse-umschalter__titel {
	font-weight: 600;
}

/* a.… wegen „.woocommerce a.button“ aus woocommerce.css (gleiche Spezifität, wir laden danach). */
.fse-umschalter a.fse-wahl--frei {
	background: transparent;
	color: var(--accent-2, #3A5259);
	box-shadow: inset 0 0 0 2px var(--accent-2, #3A5259);
}

.fse-umschalter a.fse-wahl--frei:hover {
	background: var(--base-3, #f2f2f2);
	color: var(--accent-2, #3A5259);
}

.fse-umschalter .fse-wahl:focus-visible {
	outline: 3px solid var(--accent-2, #3A5259);
	outline-offset: 3px;
}

/* Gewählt ist ein span, kein Knopf: kein Hover-Anheben des Theme-Buttons. */
.fse-umschalter span.fse-wahl {
	cursor: default;
	transform: none;
}

/* DER EINE Preis-Baustein (Design-Vertrag „Shop-Euro“), überall gleich:
 *   7,00/23,00 € inkl. 19 % MwSt.     ← Betrag fett, „inkl. …“ halb so groß
 *   7/23 TRYX ≈ 16/32 KIN
 * Größe ändern = nur --fse-preis-groesse ändern (Vorgabe: Fließtextgröße der Seite). */
:root {
	--fse-preis-groesse: 13px;
}

.fse-preis {
	display: inline-block;
	vertical-align: top;
	font-size: var(--fse-preis-groesse);
	line-height: 1.6;
	font-weight: normal;
}

.fse-preis__euro,
.fse-preis__tryx {
	display: block;
}

.fse-preis__betrag {
	font-weight: bold;
}

.fse-preis .fse-steuer {
	font-size: calc(var(--fse-preis-groesse) / 2);
	white-space: nowrap;
}

.fse-hinweis {
	font-size: .9em;
}