/*
 * Webschmiede Vehicle Inventory – Darstellung.
 * Alle Gestaltungswerte kommen als --ws-fz-* aus den Block-Einstellungen; ohne Wert gilt das Theme.
 * Kein Ausblenden je Bildschirm per CSS – Spalten wechseln, nichts verschwindet.
 */

.ws-fz-liste,
.ws-fz-aehnliche,
.ws-fz-filter,
.ws-fz-galerie {
	--ws-fz-abstand-std: 24px;
	box-sizing: border-box;
}

.ws-fz-liste__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Liste */

.ws-fz-liste__spur {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ws-fz-abstand, var(--ws-fz-abstand-std));
	grid-template-columns: repeat(var(--ws-fz-spalten-d, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.ws-fz-liste__spur {
		grid-template-columns: repeat(var(--ws-fz-spalten-t, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ws-fz-liste__spur {
		grid-template-columns: repeat(var(--ws-fz-spalten-m, 1), minmax(0, 1fr));
	}
}

.ws-fz-liste__eintrag {
	margin: 0;
	min-width: 0;
}

.ws-fz-liste--liste .ws-fz-liste__spur {
	grid-template-columns: 1fr;
}

.ws-fz-liste--liste .ws-fz-karte__link {
	display: grid;
	grid-template-columns: minmax(160px, 32%) 1fr;
	grid-template-areas: "bild titel" "bild daten" "bild preis";
	align-content: start;
	column-gap: var(--ws-fz-innen, 16px);
}

.ws-fz-liste--liste .ws-fz-karte__bild { grid-area: bild; margin: calc(-1 * var(--ws-fz-innen, 16px)) 0 calc(-1 * var(--ws-fz-innen, 16px)) calc(-1 * var(--ws-fz-innen, 16px)); }
.ws-fz-liste--liste .ws-fz-karte__titel { grid-area: titel; }
.ws-fz-liste--liste .ws-fz-karte__daten { grid-area: daten; }
.ws-fz-liste--liste .ws-fz-karte__preis { grid-area: preis; }

@media (max-width: 600px) {
	.ws-fz-liste--liste .ws-fz-karte__link {
		grid-template-columns: 1fr;
		grid-template-areas: "bild" "titel" "daten" "preis";
	}
	.ws-fz-liste--liste .ws-fz-karte__bild { margin: calc(-1 * var(--ws-fz-innen, 16px)) calc(-1 * var(--ws-fz-innen, 16px)) 0; }
}

/* Slider: ohne JavaScript eine waagrecht scrollbare Liste. */
.ws-fz-liste--slider .ws-fz-liste__spur {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - (var(--ws-fz-spalten-d, 3) - 1) * var(--ws-fz-abstand, 24px)) / var(--ws-fz-spalten-d, 3));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

@media (max-width: 1024px) {
	.ws-fz-liste--slider .ws-fz-liste__spur {
		grid-auto-columns: calc((100% - (var(--ws-fz-spalten-t, 2) - 1) * var(--ws-fz-abstand, 24px)) / var(--ws-fz-spalten-t, 2));
	}
}

@media (max-width: 600px) {
	.ws-fz-liste--slider .ws-fz-liste__spur {
		grid-auto-columns: 85%;
	}
}

.ws-fz-liste--slider .ws-fz-liste__eintrag {
	scroll-snap-align: start;
}

/* Mit Pfeilen oder Punkten (setzt das Skript) braucht es keinen Scrollbalken; Wischen und
   Trackpad funktionieren weiter. Ohne JavaScript oder bei Steuerung „keine“ bleibt er. */
.ws-fz-liste--gesteuert .ws-fz-liste__spur { scrollbar-width: none; }
.ws-fz-liste--gesteuert .ws-fz-liste__spur::-webkit-scrollbar { display: none; }

.ws-fz-slider__steuerung {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0;
}

.ws-fz-slider__steuerung--rechts { justify-content: flex-end; }
.ws-fz-slider__steuerung--mitte { justify-content: center; }
.ws-fz-slider__steuerung--links { justify-content: flex-start; }

.ws-fz-slider__knopf {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.ws-fz-slider__punkte { display: flex; flex-wrap: wrap; gap: 2px; }

.ws-fz-slider__punkt {
	min-width: 24px;
	min-height: 24px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	font-size: 0;
	position: relative;
}

.ws-fz-slider__punkt::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
}

.ws-fz-slider__punkt[aria-current="true"]::after { opacity: 1; }

.ws-fz-slider__knopf:focus-visible,
.ws-fz-karte__link:focus-visible,
.ws-fz-mehr__knopf:focus-visible,
.ws-fz-galerie__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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

.ws-fz-karte {
	box-sizing: border-box; /* sonst ragt der Rand über den Eintrag und der Slider schneidet ihn ab */
	height: 100%;
	background: var(--ws-fz-hg, transparent);
	color: var(--ws-fz-text, inherit);
	border: var(--ws-fz-linie, 1px) solid var(--ws-fz-linienfarbe, rgba(0, 0, 0, 0.12));
	border-radius: var(--ws-fz-rundung, 8px);
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.15s ease;
}

.ws-fz-karte:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); }

.ws-fz-karte__link {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: var(--ws-fz-innen, 16px);
	color: inherit;
	text-decoration: none;
}

.ws-fz-karte__bild {
	margin: calc(-1 * var(--ws-fz-innen, 16px)) calc(-1 * var(--ws-fz-innen, 16px)) 4px;
	aspect-ratio: var(--ws-fz-bildformat, 4/3);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}

.ws-fz-karte__img,
.ws-fz-karte__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ws-fz-karte__platzhalter { display: block; width: 100%; height: 100%; }

.ws-fz-karte__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	background: var(--ws-fz-badge-hg, var(--ws-fz-akzent, #1e1e1e));
	color: var(--ws-fz-badge-text, #fff);
}

.ws-fz-karte__titel {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.3;
}

.ws-fz-karte__daten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 0.9em;
	opacity: 0.85;
}

.ws-fz-karte__preis {
	margin: auto 0 0;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--ws-fz-akzent, inherit);
}

.ws-fz-karte__preis.ist-anfrage { font-size: 1em; font-weight: 600; }

.ws-fz-liste__leer { padding: 24px 0; }

.ws-fz-seiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: var(--ws-fz-abstand, 24px);
}

.ws-fz-seiten__nr {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.ws-fz-seiten__nr[aria-current="page"] { font-weight: 700; border-color: currentColor; }

.ws-fz-mehr { display: flex; justify-content: center; margin-top: var(--ws-fz-abstand, 24px); }

/* ------------------------------------------------------------------ Filter */

.ws-fz-filter {
	background: var(--ws-fz-hg, rgba(0, 0, 0, 0.03));
	color: var(--ws-fz-text, inherit);
	border-radius: var(--ws-fz-rundung, 8px);
	padding: var(--ws-fz-abstand, 16px);
	margin-bottom: 24px;
}

.ws-fz-filter__form {
	display: grid;
	gap: 12px 16px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-items: end;
}

.ws-fz-filter--spalte .ws-fz-filter__form { grid-template-columns: 1fr; }

.ws-fz-filter__feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.ws-fz-filter .ws-fz-filter__feld label {
	/* Manche Themes färben Formular-Beschriftungen hell – hier gilt die Textfarbe des Filters. */
	color: var(--ws-fz-text, currentColor);
	opacity: 1;
	font-size: 0.85em;
	font-weight: 600;
}

.ws-fz-filter__feld input,
.ws-fz-filter__feld select {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	font: inherit;
}

.ws-fz-filter__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ Galerie */

.ws-fz-galerie__spur {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--ws-fz-rundung, 8px);
	scrollbar-width: none;
}

.ws-fz-galerie__bild { scroll-snap-align: start; aspect-ratio: var(--ws-fz-bildformat, 4/3); background: rgba(0, 0, 0, 0.05); }

.ws-fz-galerie__link { display: block; height: 100%; cursor: zoom-in; }

.ws-fz-galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ws-fz-galerie__vorschau {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
}

.ws-fz-galerie__mini { display: block; width: 72px; height: 54px; border-radius: 4px; overflow: hidden; }

.ws-fz-galerie__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ws-fz-lightbox {
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.92);
	color: #fff;
}

.ws-fz-lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }

.ws-fz-lightbox__bild {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ws-fz-lightbox__bild img { max-width: 94vw; max-height: 86vh; object-fit: contain; }

.ws-fz-lightbox__knopf {
	position: absolute;
	min-width: 48px;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.75rem;
	cursor: pointer;
}

.ws-fz-lightbox__schliessen { top: 16px; right: 16px; }
.ws-fz-lightbox__zurueck { left: 16px; top: 50%; transform: translateY(-50%); }
.ws-fz-lightbox__weiter { right: 16px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------------ Detail */

.ws-fz-preis__haupt {
	margin: 0;
	font-weight: 700;
	color: var(--ws-fz-akzent, inherit);
	line-height: 1.1;
}

.ws-fz-preis--m { font-size: 1.4em; }
.ws-fz-preis--l { font-size: 2em; }
.ws-fz-preis--xl { font-size: 2.6em; }

.ws-fz-preis__zusatz { margin: 4px 0 0; font-size: 0.9em; opacity: 0.8; }

.ws-fz-daten__liste { margin: 0; }

.ws-fz-daten__zeile {
	display: grid;
	grid-template-columns: minmax(120px, 40%) 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ws-fz-daten__zeile dt {
	font-weight: 600;
	/* Lange deutsche Wörter („Schadstoffklasse“) dürfen nicht in den Wert laufen. */
	overflow-wrap: anywhere;
	hyphens: auto;
	min-width: 0;
}
.ws-fz-daten__zeile dd { margin: 0; }

.ws-fz-daten__liste--raster {
	display: grid;
	column-gap: 32px;
	grid-template-columns: repeat(var(--ws-fz-spalten-d, 2), minmax(0, 1fr));
}

@media (max-width: 600px) {
	.ws-fz-daten__liste--raster { grid-template-columns: 1fr; }
	.ws-fz-daten__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ws-fz-ausstattung__liste {
	columns: var(--ws-fz-spalten-d, 2) 200px;
	column-gap: 32px;
	padding-left: 1.2em;
}

.ws-fz-ausstattung__liste li { break-inside: avoid; margin-bottom: 4px; }

.ws-fz-kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ws-fz-kontakt__knoepfe--spalte { flex-direction: column; align-items: stretch; }
.ws-fz-kontakt__knopf { text-align: center; }

.ws-fz-verkauft__text {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--ws-fz-akzent, currentColor);
	background: rgba(0, 0, 0, 0.04);
	font-weight: 600;
}

.ws-fz-preis__haupt.ist-verkauft { color: inherit; opacity: 0.7; }

.ws-fz-block__titel { margin-top: 0; }