/* Nutzerentscheidung 05.09.2026: Muster-, Dekor- und Optikbilder füllen
   ihre Bildfläche mit cover. Vorher: 41 Musterkarten je Ansicht mit contain;
   die zusätzlichen 15px Innenränder der Dekor-/Optikkarten entfallen. */
/*
 * Floor Select Musterlogik: nur das, was über design.css hinausgeht.
 *
 * Farben kommen ausschliesslich aus den CSS-Variablen des Themes. In dieser
 * Datei steht kein einziger Hexwert, kein eigener Farbton und kein zweites
 * Radius-System. Abstände folgen der Tivaos-Skala, Radius bleibt 3px.
 *
 * Bewegung nur über transform und opacity, 180 bis 260 ms.
 */

/* ---------------------------------------------------------------- Musterbox */

.fs-musterbox {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.fs-musterbox__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--fs-linie);
}

.fs-filter {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.fs-filter__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* min-height war 40px. Am 31.08.2026 auf /musterbox/ gemessen: 16 Filter-
   knoepfe mit 40px Hoehe, alle unter der Tivaos-Vorgabe von 44px. */
.fs-filter__knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 15px;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	background: var(--fs-weiss);
	color: var(--fs-navy);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-filter__knopf:hover {
	border-color: var(--fs-gold-dark);
}

.fs-filter__knopf:focus-visible {
	outline: 2px solid var(--fs-navy);
	outline-offset: 2px;
}

.fs-filter__knopf.ist-aktiv {
	border-color: var(--fs-navy);
	background: var(--fs-navy);
	color: var(--fs-weiss);
}

.fs-filter__zahl {
	font-size: 13px;
	font-weight: 600;
	color: var(--fs-muted);
	font-variant-numeric: tabular-nums;
}

.fs-filter__knopf.ist-aktiv .fs-filter__zahl {
	color: var(--fs-sand);
}

/* font-size war 15px. Der Hinweis ist ein ganzer Satz, also Fliesstext, und
   der beginnt laut Manifest bei 16px. Am 31.08.2026 auf /musterbox/ mobil
   mit 15px gemessen. */
.fs-musterbox__hinweis {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	color: var(--fs-muted);
	font-size: 16px;
}

/* Ohne Breitenbegrenzung lief die Regel ueber die volle Musterbox: am
   31.08.2026 mit 92 Zeichen je Zeile gemessen, erlaubt sind 80. Das Mass
   kommt aus design.css Abschnitt 15.1. */
.fs-musterbox__regel {
	flex: 1 1 auto;
	max-width: var(--fs-mass, 54ch);
}

.fs-musterbox__weiter {
	color: var(--fs-navy);
	font-weight: 600;
}

.fs-musterbox__leer,
.fs-musterbox__leer-filter {
	margin: 0;
	padding: 30px 0;
	color: var(--fs-muted);
	text-align: center;
}

/* ------------------------------------------------------------ Muster-Karte */

.fs-musterkarte {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-musterkarte__medien {
	position: relative;
	display: block;
	overflow: hidden;
	border-top-left-radius: var(--fs-radius);
	border-top-right-radius: var(--fs-radius);
}

/*
 * Der Materialstreifen steht in der Musterbox über dem Raumbild: bestellt
 * wird die Oberfläche, nicht der Raum.
 */
.fs-musterkarte .fs-materialstreifen {
	display: block;
	width: 100%;
	height: 34px;
	overflow: hidden;
}

.fs-materialstreifen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-musterkarte__bild {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--fs-weiss);
}

.fs-musterkarte__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-musterkarte:focus-within { transform: translateY(-3px); }

.fs-musterkarte__marke {
	position: absolute;
	top: 44px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	background: var(--fs-gold);
	color: var(--fs-navy);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-musterkarte.ist-gewaehlt .fs-musterkarte__marke {
	opacity: 1;
	transform: scale(1);
}

.fs-musterkarte.ist-gewaehlt {
	box-shadow: inset 0 0 0 2px var(--fs-gold);
}

.fs-musterkarte__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 20px;
}

.fs-musterkarte__text .fs-label {
	margin: 0;
}

.fs-musterkarte__name {
	margin: 0;
}

.fs-musterkarte__aktion {
	padding: 0 20px 20px;
	margin-top: auto;
}

/* ----------------------------------------------------------- Muster-Button */

.fs-muster-form {
	margin: 0;
}

.fs-muster-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	cursor: pointer;
}

.fs-muster-btn__haken {
	display: inline-flex;
	width: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
		opacity 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-muster-btn.ist-gewaehlt .fs-muster-btn__haken {
	width: 18px;
	opacity: 1;
}

.fs-muster-btn.ist-beschaeftigt {
	opacity: 0.7;
}

.fs-muster-btn.ist-gesperrt,
.fs-muster-btn[disabled] {
	cursor: not-allowed;
	background: var(--fs-sand);
	color: var(--fs-muted);
	border-color: var(--fs-linie);
}

.fs-muster-btn:focus-visible {
	outline: 2px solid var(--fs-navy);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Statuszeile */

.fs-musterstatus {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 25px;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	background: var(--fs-sand);
}

.fs-musterstatus__text {
	margin: 0;
	color: var(--fs-navy);
	font-weight: 600;
}

.fs-musterstatus__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.fs-musterstatus__stand {
	color: var(--fs-navy);
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fs-musterstatus__plaetze {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-musterstatus__platz {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	min-width: 0;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	background: var(--fs-weiss);
	color: var(--fs-muted);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-musterstatus__platz.ist-belegt {
	border-color: var(--fs-navy);
	background: var(--fs-navy);
	color: var(--fs-weiss);
	transform: translateY(-2px);
}

.fs-musterstatus__balken {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--fs-linie);
	overflow: hidden;
}

.fs-musterstatus__fuellung {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: var(--fs-fortschritt, 0%);
	background: var(--fs-gold);
	transition: width 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* font-size war 15px, siehe .fs-musterbox__hinweis: ganzer Satz, also
   Fliesstext ab 16px. Am 31.08.2026 auf der Startseite mobil gemessen. */
.fs-musterstatus__hinweis {
	margin: 0;
	color: var(--fs-muted);
	font-size: 16px;
	max-width: var(--fs-mass, 54ch);
}

.fs-musterstatus__kasse {
	align-self: flex-start;
}

/* Gesperrt heisst Umriss und gedaempfte Schrift. Die vorherige Loesung
   (opacity 0.45 auf weisser Schrift) ergab 1,27:1 auf Sand, der Knopf war
   praktisch unsichtbar. Gemessen am 02.09.2026. */
.fs-musterstatus__kasse.ist-gesperrt {
	pointer-events: none;
	opacity: 1;
	background-color: transparent;
	border: 1px solid var(--fs-linie, #E2DDD5);
	color: var(--fs-muted, #6B6B6B);
	box-shadow: none;
}

/* ---------------------------------------------------------------- Meldung */

.fs-muster-meldung {
	margin: 0 0 15px;
	padding: 15px 20px;
	border: 1px solid var(--fs-warnung);
	border-radius: 3px;
	color: var(--fs-warnung);
	background: var(--fs-weiss);
}

.fs-muster-meldung[hidden] {
	display: none;
}

/* ----------------------------------------------------------------- Zähler */

.fs-muster-zaehler {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	color: var(--fs-navy);
	text-decoration: none;
}

.fs-muster-zaehler.ist-gefuellt {
	border-color: var(--fs-gold);
}

.fs-muster-zaehler__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fs-muster-zaehler__zahl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	border-radius: 3px;
	background: var(--fs-sand);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fs-muster-zaehler.ist-gefuellt .fs-muster-zaehler__zahl {
	background: var(--fs-gold);
	color: var(--fs-navy);
}

/* ------------------------------------------------------------ Dekor-Karte */

.fs-dekorkarte {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-dekorkarte__medien {
	display: block;
	overflow: hidden;
	border-top-left-radius: var(--fs-radius);
	border-top-right-radius: var(--fs-radius);
	text-decoration: none;
}

.fs-dekorkarte__bild {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.fs-dekorkarte__bild img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: cover;
	background-color: var(--fs-weiss);
}

.fs-dekorkarte:focus-within {
	transform: translateY(-3px);
}

/* Beim Marketing-Raster sitzt der Streifen unter dem Raumbild. */
.fs-dekorkarte .fs-materialstreifen {
	display: block;
	width: 100%;
	height: 34px;
	overflow: hidden;
}

.fs-dekorkarte__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 25px;
}

.fs-dekorkarte__text .fs-label,
.fs-dekorkarte__name {
	margin: 0;
}

.fs-dekorkarte__name {
	font-family: var(--fs-font-ui);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: var(--fs-lh-h3);
	color: var(--fs-navy);
}

.fs-dekorkarte__name a {
	color: inherit;
	text-decoration: none;
}

.fs-dekorkarte__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
}

.fs-dekorkarte__preis {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
}

.fs-dekorkarte__einheit {
	color: var(--fs-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fs-dekorkarte__aktion {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 25px 25px;
	margin-top: auto;
}

.fs-dekorkarte__aktion .fs-muster-form {
	flex: 1 1 140px;
}

.fs-dekorkarte__details {
	flex: 1 1 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------- Optik-Kacheln */

.fs-optik-kachel {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-optik-kachel__bild {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-top-left-radius: var(--fs-radius);
	border-top-right-radius: var(--fs-radius);
	background-color: var(--fs-weiss);
}

.fs-optik-kachel__bild img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: cover;
	background-color: var(--fs-weiss);
}

.fs-optik-kachel:focus-visible {
	transform: translateY(-3px);
}

@media (hover: hover) and (pointer: fine) {
	.fs-musterkarte:hover,
	.fs-dekorkarte:hover,
	.fs-optik-kachel:hover {
		transform: translateY(-3px);
	}
}

.fs-optik-kachel__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 20px 20px;
}

.fs-optik-kachel__name {
	color: var(--fs-navy);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: var(--fs-lh-h3);
}

.fs-optik-kachel__zahl {
	color: var(--fs-muted);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- Schritte */

.fs-schritte {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fs-schritte__punkt {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.fs-schritte__titel,
.fs-schritte__text {
	margin: 0;
}

/* ------------------------------------------------------------ Bewegung aus */

@media (prefers-reduced-motion: reduce) {

	.fs-filter__knopf,
	.fs-musterkarte,
	.fs-dekorkarte,
	.fs-optik-kachel,
	.fs-musterkarte__bild img,
	.fs-dekorkarte__bild img,
	.fs-optik-kachel__bild img,
	.fs-musterkarte__marke,
	.fs-musterstatus__platz,
	.fs-muster-btn__haken,
	.fs-musterstatus__fuellung {
		transition: none;
	}

	.fs-musterkarte:hover,
	.fs-dekorkarte:hover,
	.fs-dekorkarte:focus-within,
	.fs-optik-kachel:hover,
	.fs-optik-kachel:focus-visible,
	.fs-musterstatus__platz.ist-belegt,
	.fs-musterkarte:hover .fs-musterkarte__bild img,
	.fs-dekorkarte:hover .fs-dekorkarte__bild img,
	.fs-optik-kachel:hover .fs-optik-kachel__bild img {
		transform: none;
	}
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 767px) {

	.fs-musterbox {
		gap: 25px;
	}

	.fs-musterbox__filter {
		flex-direction: column;
		gap: 20px;
	}

	.fs-filter { width: 100%; }

	.fs-filter__knoepfe {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 5px;
		-webkit-overflow-scrolling: touch;
	}

	.fs-filter__knopf { flex: 0 0 auto; }

	.fs-musterbox__raster.fs-raster-4,
	.fs-musterbox__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fs-musterkarte__text,
	.fs-optik-kachel__text {
		padding-left: 15px;
		padding-right: 15px;
	}

	.fs-dekorkarte__text {
		padding-left: 20px;
		padding-right: 20px;
	}

	.fs-musterkarte__aktion {
		padding: 0 15px 15px;
	}

	.fs-dekorkarte__aktion {
		padding: 0 20px 20px;
	}

	.fs-musterstatus {
		padding: 20px;
	}

	.fs-musterstatus__platz { min-height: 48px; }
}

/* Bei 390px wurden zwei 165px breite Musterkarten sauber lesbar gemessen.
   Eine Spalte verlängerte die 41 Dekore dagegen auf fast die doppelte Seite.
   Erst unter 360px reicht der Platz für zwei sinnvolle Karten nicht mehr. */
@media (max-width: 359px) {
	.fs-musterbox__raster.fs-raster-4,
	.fs-musterbox__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Auf 390px beansprucht der Haken im gewählten Musterknopf zusätzlich 28px.
   Mit dem normalen Button-Padding brach der Details-Link deshalb allein in
   eine zweite Zeile. Nur diese kompakte Kartenaktion wird enger gesetzt. */
@media (max-width: 479px) {
	.fs-dekorkarte__aktion .fs-muster-btn {
		padding-inline: var(--fs-s10);
	}
}

/* Abnahme 05.09.2026, F3: 37 Karten und sechs leere Kollektionen trugen
   hidden, wurden durch display:flex/inline-flex aber weiter gerendert.
   Innerhalb des Konfigurators gilt wieder die native hidden-Semantik. */
.fs-musterbox [hidden] {
	display: none !important;
}

/* Abnahme 05.09.2026, 390px: Bei zwei Karten und 15px Innenrand lief
   "Muster wählen" über die Goldfläche. Beide Zustände dürfen innerhalb
   des 48px hohen Knopfs umbrechen; der ungewählte Haken belegt keinen Platz. */
@media (max-width: 479px) {
	.fs-musterkarte .fs-muster-btn {
		min-height: 48px;
		height: auto;
		padding: 5px;
		gap: 5px;
		line-height: 1.2;
		white-space: normal;
	}
	.fs-musterkarte .fs-muster-btn__text {
		min-width: 0;
		white-space: normal;
	}
	.fs-musterkarte .fs-muster-btn:not(.ist-gewaehlt) .fs-muster-btn__haken {
		display: none;
	}
	.fs-musterkarte .fs-muster-btn.ist-gewaehlt .fs-muster-btn__haken {
		flex: 0 0 18px;
	}
}

/* ==========================================================================
   Musterbox einfacher, 29.09.2026
   --------------------------------------------------------------------------
   Gemeldet: man sah nicht, welche Muster man gewählt hat, nur im Warenkorb.
   Die Übersicht zeigte nummerierte Kästchen 1 bis 5, und gewählte Karten
   sahen fast aus wie freie (beide Gold).

   Jetzt:
   - Übersicht: jedes gewählte Dekor mit Oberflächenbild, Name und Kreuz zum
     Entfernen, freie Plätze gestrichelt.
   - Leiste am unteren Rand, sobald die Übersicht aus dem Bild scrollt.
   - Gewählt ist Navy-Umriss, frei ist Gold. Zwei Zustände, zwei Farben.
   ========================================================================== */

/* ---------------------------------------------------------- Auswahl, groß */

.fs-auswahl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-auswahl--gross {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.fs-auswahl__eintrag,
.fs-auswahl__frei {
	position: relative;
	min-width: 0;
	margin: 0;
}

.fs-auswahl__bild {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	background: var(--fs-weiss);
}

.fs-auswahl__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-auswahl__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
	color: var(--fs-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.fs-auswahl__kollektion {
	color: var(--fs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fs-auswahl__eintrag.ist-kostenpflichtig .fs-auswahl__kollektion {
	color: var(--fs-navy);
	text-transform: none;
	letter-spacing: 0;
}

.fs-auswahl__eintrag.ist-weg {
	opacity: 0.4;
	transition: opacity 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-auswahl__frei {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px dashed var(--fs-linie);
	border-radius: 3px;
	color: var(--fs-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Kreuz zum Entfernen: sichtbar 28px, Trefferfläche 44px über ::before. */
.fs-auswahl__weg {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fs-linie);
	border-radius: 3px;
	background: var(--fs-weiss);
	color: var(--fs-navy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-auswahl__weg::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.fs-auswahl__weg:hover,
.fs-auswahl__weg:focus {
	border-color: var(--fs-navy);
	background: var(--fs-navy);
	color: var(--fs-weiss);
}

.fs-auswahl__weg:focus-visible {
	outline: 2px solid var(--fs-navy);
	outline-offset: 2px;
}

/* ------------------------------------------------------- Leiste unten, fest */

.fs-musterleiste {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95;
	padding: 12px 25px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--fs-linie);
	background: var(--fs-weiss);
	box-shadow: 0 -6px 24px rgba(13, 27, 42, 0.10);
	transform: translateY(110%);
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fs-musterleiste[hidden] {
	display: none;
}

.fs-musterleiste.ist-sichtbar {
	transform: translateY(0);
}

.fs-musterleiste__innen {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: var(--fs-container, 1240px);
	margin: 0 auto;
}

.fs-auswahl--klein {
	display: flex;
	flex: 0 1 auto;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
}

.fs-auswahl--klein .fs-auswahl__eintrag {
	flex: 0 0 44px;
}

.fs-auswahl--klein .fs-auswahl__weg {
	display: none;
}

.fs-auswahl--klein .fs-auswahl__eintrag.ist-kostenpflichtig .fs-auswahl__bild {
	border-color: var(--fs-navy);
}

.fs-musterleiste__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--fs-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.fs-musterleiste__weiter {
	flex: 0 0 auto;
}

/* Inhalt darf nicht hinter der Leiste enden. */
body.hat-musterleiste {
	padding-bottom: 76px;
}

@media (max-width: 767px) {
	.fs-auswahl--gross {
		gap: 8px;
	}

	.fs-auswahl__name {
		font-size: 13px;
	}

	.fs-auswahl__kollektion {
		display: none;
	}

	.fs-musterleiste {
		padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.fs-musterleiste__innen {
		flex-wrap: wrap;
		gap: 10px;
	}

	.fs-auswahl--klein .fs-auswahl__eintrag {
		flex-basis: 36px;
	}

	.fs-musterleiste__text {
		flex-basis: calc(100% - 250px);
		font-size: 14px;
	}

	.fs-musterleiste__weiter {
		flex: 1 1 100%;
		min-height: 48px;
	}

	body.hat-musterleiste {
		padding-bottom: 130px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fs-musterleiste,
	.fs-auswahl__weg {
		transition: none;
	}
}

/* ------------------------------------------------- Gewählt gegen frei, Karte */

.fs-musterkarte.ist-gewaehlt {
	box-shadow: inset 0 0 0 2px var(--fs-navy);
}

.fs-musterkarte__marke {
	background: var(--fs-navy);
	color: var(--fs-weiss);
}

/* Gewählt: weißer Knopf mit Navy-Umriss. Frei bleibt der goldene Muster-CTA.
   Vorher waren beide Gold und nur am Wort zu unterscheiden. */
button.fs-muster-btn.ist-gewaehlt,
button.fs-muster-btn.ist-gewaehlt:visited {
	border: 2px solid var(--fs-navy);
	background: var(--fs-weiss);
	color: var(--fs-navy);
}

button.fs-muster-btn.ist-gewaehlt:hover,
button.fs-muster-btn.ist-gewaehlt:focus {
	border-color: var(--fs-navy);
	background: var(--fs-sand);
	color: var(--fs-navy);
}

/* Die Detailbilder sind Raumecken: oben Wand und Sockelleiste, unten rechts
   reiner Boden. Ungezoomt zeigte die Vorschau vor allem Wandfarbe (Aqua sah
   rosa aus). Der Ausschnitt rückt auf den Boden unten rechts. */
.fs-auswahl__bild img {
	object-position: 75% 100%;
	transform: scale(1.8);
	transform-origin: 75% 100%;
}

/* Nachschliff 29.09.2026 nach dem ersten Bild:
   - mobil brach "Ravenna" mitten im Wort um (overflow-wrap anywhere),
   - das Kreuz verdeckte mobil die halbe Vorschau,
   - in der Leiste begrenzte die globale Absatzbreite den Text, der Knopf
     stand deshalb nicht rechts am Rand. */
.fs-auswahl__name {
	overflow-wrap: normal;
}

.fs-auswahl__name,
.fs-auswahl__kollektion {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fs-musterleiste__text {
	max-width: none;
}

@media (max-width: 767px) {
	.fs-auswahl__name {
		font-size: 12px;
	}

	.fs-auswahl__weg {
		top: 2px;
		right: 2px;
		width: 22px;
		height: 22px;
		font-size: 15px;
	}
}

/* 29.09.2026: Bei 390px brach "Muster wählen" in zwei Zeilen um (121px Text
   in 133px Knopf). 13px ohne Sperrung misst 100px und bleibt einzeilig. */
@media (max-width: 479px) {
	.fs-musterkarte .fs-muster-btn {
		font-size: 13px;
		letter-spacing: 0;
	}
}

/* 30.09.2026, Kaan: Die quadratischen Renderings wurden im 4:3-Rahmen oben
   und unten beschnitten. Freigestellt auf Weiß ganz zeigen. */
.fs-musterkarte__bild img,
.fs-dekorkarte__bild img,
.fs-optik-kachel__bild img {
	object-fit: contain;
	background-color: var(--fs-weiss);
}