/* ============================================================
   CSS - Fässler Fahrzeugmarkt
   Farben und Abstände als Variablen, im Theme überschreibbar
   ============================================================ */

.fzm {
	--fzm-navy: #0c1f4a;
	--fzm-blue: #1a4fd6;
	--fzm-blue-dark: #12389e;
	--fzm-light: #eaf1fb;
	--fzm-surface: #f4f7fc;
	--fzm-text: #0c1f4a;
	--fzm-muted: #6b7895;
	--fzm-border: #dbe3f0;
	--fzm-red: #e3342f;
	--fzm-radius: .9rem;
	--fzm-shadow: 0 .6rem 2rem rgba(12, 31, 74, .12);
	--fzm-gap: 1.4rem;

	color: var(--fzm-text);
	box-sizing: border-box;
}

.fzm *,
.fzm *::before,
.fzm *::after {
	box-sizing: inherit;
}

.fzm .fzm-icon {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.fzm [hidden] {
	display: none !important;
}

.fzm-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

.fzm-container--narrow {
	max-width: 1000px;
}

.fzm-center {
	text-align: center;
}

.fzm-eyebrow {
	margin: 0 0 .3rem;
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fzm-blue);
}

.fzm-heading {
	margin: 0 0 1.4rem;
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fzm-navy);
}

.fzm-subheading {
	margin: 0 0 .8rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fzm-blue);
}

/* ---------- Buttons und Links ---------- */

.fzm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	border: 2px solid var(--fzm-blue);
	border-radius: .4rem;
	background: var(--fzm-blue);
	color: #fff;
	font: inherit;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 .4rem 1rem rgba(26, 79, 214, .3);
	transition: background .2s, border-color .2s;
}

.fzm-button:hover,
.fzm-button:focus-visible {
	background: var(--fzm-blue-dark);
	border-color: var(--fzm-blue-dark);
	color: #fff;
}

.fzm-button--outline {
	background: transparent;
	color: var(--fzm-blue);
	box-shadow: none;
}

.fzm-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .65rem;
	font-weight: 600;
	color: var(--fzm-blue);
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Select ---------- */

.fzm-select,
.fzm-sort label {
	position: relative;
	display: block;
}

.fzm-select select,
.fzm-sort select {
	width: 100%;
	padding: .55rem 2rem .55rem .7rem;
	border: 0;
	border-radius: .3rem;
	background: var(--fzm-surface);
	color: var(--fzm-text);
	font: inherit;
	font-size: .7rem;
	appearance: none;
	cursor: pointer;
}

.fzm-select .fzm-icon,
.fzm-sort .fzm-icon {
	position: absolute;
	right: .6rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

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

.fzm-filter {
	padding: 1.3rem 1.4rem 1rem;
	border-radius: var(--fzm-radius);
	background: #fff;
	box-shadow: var(--fzm-shadow);
}

.fzm-filter__title {
	margin: 0 0 .8rem;
	font-size: .8rem;
	font-weight: 500;
}

.fzm-filter__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .6rem;
}

.fzm-filter__more {
	margin-top: .6rem;
}

.fzm-filter__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 1rem;
}

/* Mit Übersicht auf derselben Seite wird ohne Button gefiltert */
.fzm-filter.is-live .fzm-filter__submit {
	display: none;
}

.fzm-filter.is-loading {
	opacity: .7;
}

/* ---------- Übersicht ---------- */

.fzm-overview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}

.fzm-sort label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--fzm-blue);
	font-size: .65rem;
	font-weight: 700;
}

.fzm-sort select {
	width: auto;
	background: transparent;
	color: var(--fzm-blue);
	font-weight: 700;
}

.fzm-overview__count {
	margin: 0;
	font-size: .65rem;
	color: var(--fzm-muted);
}

.fzm-overview.is-loading .fzm-grid {
	opacity: .5;
	transition: opacity .2s;
}

.fzm-overview__empty {
	padding: 2rem 0;
	text-align: center;
	color: var(--fzm-muted);
}

.fzm-overview__more {
	margin-top: 2rem;
	text-align: center;
}

.fzm-pagination {
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.fzm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.2rem var(--fzm-gap);
}

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

.fzm-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--fzm-radius);
	background: var(--fzm-surface);
}

.fzm-card__media {
	aspect-ratio: 4 / 3;
}

.fzm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem 1rem .9rem;
}

.fzm-card__title {
	margin: 0 0 .7rem;
	font-size: .95rem;
	line-height: 1.25;
	font-weight: 700;
}

.fzm-card__title a {
	color: inherit;
	text-decoration: none;
}

.fzm-card__meta {
	margin: 0 0 .5rem;
	font-size: .5rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--fzm-muted);
}

.fzm-card__km {
	margin: 0 0 .9rem;
	font-size: .55rem;
}

.fzm-card__km span {
	text-transform: uppercase;
	letter-spacing: .05em;
}

.fzm-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: .5rem;
	margin-top: auto;
}

.fzm-card__prices {
	display: flex;
	flex-direction: column;
	font-size: .65rem;
	line-height: 1.5;
}

.fzm-card__price {
	color: var(--fzm-blue);
}

.fzm-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .8rem 1rem;
	background: var(--fzm-navy);
	color: #fff;
	font-size: .65rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s;
}

.fzm-card__cta:hover,
.fzm-card__cta:focus-visible {
	background: var(--fzm-blue);
	color: #fff;
}

.fzm-location {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .5rem;
	background: var(--fzm-navy);
	color: #fff;
	font-size: .55rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Badges ---------- */

.fzm-badges {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
}

.fzm-badge {
	padding: .25rem .5rem;
	color: #fff;
	font-size: .45rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.fzm-badge--blue {
	background: var(--fzm-blue);
}

.fzm-badge--red {
	background: var(--fzm-red);
}

.fzm-badges--large .fzm-badge {
	padding: .35rem .9rem;
	border-radius: .3rem;
	font-size: .6rem;
	box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .15);
}

/* ---------- Slider (Karte und Galerie) ---------- */

.fzm-slider {
	position: relative;
	overflow: hidden;
	background: #fff;
}

.fzm-slider__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.fzm-slider__track::-webkit-scrollbar {
	display: none;
}

.fzm-slider__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
}

.fzm-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fzm-light);
	color: var(--fzm-muted);
}

.fzm-placeholder .fzm-icon {
	width: 30%;
	height: auto;
}

.fzm-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--fzm-navy);
	transform: translateY(-50%);
	cursor: pointer;
	box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .15);
}

.fzm-slider__arrow--prev {
	left: .8rem;
}

.fzm-slider__arrow--next {
	right: .8rem;
}

.fzm-slider__dots {
	position: absolute;
	bottom: .6rem;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: .3rem;
	padding: .2rem .4rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .6);
	transform: translateX(-50%);
}

.fzm-slider__dot {
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: rgba(12, 31, 74, .3);
}

.fzm-slider__dot.is-active {
	background: var(--fzm-navy);
}

/* ---------- Detailseite: oberer Bereich ---------- */

.fzm-single__top {
	padding: 2rem 0;
	background: linear-gradient(to bottom, var(--fzm-navy) 0, var(--fzm-navy) 18rem, transparent 18rem);
}

.fzm-single__top-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: start;
	gap: 2rem;
}

.fzm-gallery__main {
	aspect-ratio: 4 / 3;
	border-radius: var(--fzm-radius) var(--fzm-radius) 0 0;
}

.fzm-gallery__main .fzm-slider__arrow {
	background: rgba(255, 255, 255, .5);
}

.fzm-location--overlay {
	position: absolute;
	top: .8rem;
	right: .8rem;
	z-index: 2;
}

.fzm-gallery__thumbs {
	display: flex;
	gap: .4rem;
	margin-top: .4rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.fzm-gallery__thumb {
	flex: 0 0 calc((100% - .8rem) / 3);
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
}

.fzm-gallery__thumb.is-active {
	border-color: var(--fzm-blue);
}

.fzm-gallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fzm-pricebox {
	position: sticky;
	top: 2rem;
	margin-top: 4rem;
	overflow: hidden;
	border-radius: var(--fzm-radius);
	background: #fff;
	box-shadow: var(--fzm-shadow);
	text-align: center;
}

.fzm-pricebox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.6rem 1.4rem 1.2rem;
}

.fzm-pricebox__title {
	margin: 0 0 1.4rem;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fzm-navy);
}

.fzm-pricebox__currency {
	margin: 0;
	font-size: .55rem;
	letter-spacing: .2em;
	color: var(--fzm-blue);
}

.fzm-pricebox__price {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 800;
	color: var(--fzm-blue);
}

.fzm-pricebox__price--request {
	font-size: 1rem;
	margin-bottom: 1rem;
}

.fzm-pricebox__list {
	margin: .5rem 0 1.4rem;
	font-size: .55rem;
	color: var(--fzm-muted);
}

.fzm-pricebox .fzm-button {
	margin-bottom: .6rem;
}

.fzm-pricebox__leasing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .7rem;
	background: var(--fzm-blue);
	color: #fff;
	font-size: .6rem;
	text-decoration: none;
}

.fzm-pricebox__leasing:hover {
	background: var(--fzm-blue-dark);
	color: #fff;
}

/* ---------- Detailseite: Abschnitte ---------- */

.fzm-section {
	padding: 2.5rem 0;
}

.fzm-section--tight {
	padding: 1rem 0;
}

.fzm-tech {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 3rem;
	margin: 0;
}

.fzm-tech__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--fzm-border);
	font-size: .65rem;
}

.fzm-tech dt {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--fzm-blue);
}

.fzm-tech dd {
	margin: 0;
}

.fzm-energy {
	display: inline-block;
	min-width: 2.2rem;
	padding: 0 .9rem 0 .4rem;
	clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
	color: #fff;
	font-weight: 700;
}

.fzm-energy--a { background: #00a651; }
.fzm-energy--b { background: #50b848; }
.fzm-energy--c { background: #bed630; color: var(--fzm-navy); }
.fzm-energy--d { background: #fff200; color: var(--fzm-navy); }
.fzm-energy--e { background: #fdb913; color: var(--fzm-navy); }
.fzm-energy--f { background: #f37021; }
.fzm-energy--g { background: #ed1c24; }

/* Aufklappbare Bereiche */
.fzm-collapse__content {
	position: relative;
	max-height: 9rem;
	overflow: hidden;
}

.fzm-collapse__content::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3rem;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

.fzm-collapse.is-open .fzm-collapse__content {
	max-height: none;
}

.fzm-collapse.is-open .fzm-collapse__content::after {
	display: none;
}

.fzm-collapse__toggle {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .8rem;
	padding: .3rem .7rem;
	border: 0;
	border-radius: 1rem;
	background: var(--fzm-light);
	color: var(--fzm-blue);
	font: inherit;
	font-size: .55rem;
	cursor: pointer;
}

.fzm-collapse.is-open .fzm-collapse__toggle .fzm-icon {
	transform: rotate(180deg);
}

.fzm-datagroups {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem 3rem;
}

.fzm-datagroup h3 {
	margin: 0 0 .3rem;
	font-size: .6rem;
	font-weight: 700;
	text-transform: uppercase;
}

.fzm-datagroup dl {
	margin: 0;
	font-size: .6rem;
}

.fzm-datagroup dl div {
	display: flex;
	gap: .5rem;
}

.fzm-datagroup dt {
	color: var(--fzm-blue);
}

.fzm-datagroup dd {
	margin: 0;
}

.fzm-equipment {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 3rem;
}

.fzm-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .6rem;
}

.fzm-checklist li {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--fzm-border);
}

.fzm-checklist .fzm-icon {
	color: var(--fzm-blue);
}

.fzm-description {
	background: var(--fzm-light);
}

.fzm-description__text {
	font-size: .7rem;
	line-height: 1.6;
}

.fzm-contacts__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fzm-gap);
}

.fzm-contact {
	flex: 0 1 15rem;
	padding: 1.2rem;
	border-radius: var(--fzm-radius);
	background: var(--fzm-surface);
}

.fzm-contact__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: .8rem;
	border-radius: .5rem;
	object-fit: cover;
}

.fzm-contact__name {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
}

.fzm-contact__role {
	margin: 0 0 1.5rem;
	font-size: .45rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--fzm-muted);
}

.fzm-contact__details {
	margin: 0;
	font-size: .55rem;
	line-height: 1.5;
}

.fzm-contact__details a {
	color: inherit;
	text-decoration: none;
}

.fzm-legal {
	font-size: .55rem;
}

.fzm-legal__title {
	margin: 0 0 .3rem;
	font-size: .5rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {

	.fzm-filter__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.fzm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {

	.fzm-single__top-grid {
		grid-template-columns: 1fr;
	}

	.fzm-pricebox {
		position: static;
		margin-top: 0;
	}

	.fzm-tech,
	.fzm-datagroups,
	.fzm-equipment {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {

	.fzm-filter {
		padding: 1rem;
	}

	.fzm-filter__grid {
		grid-template-columns: 1fr 1fr;
	}

	.fzm-grid {
		grid-template-columns: 1fr;
	}

	.fzm-overview__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Druck («Fahrzeug drucken») ---------- */

@media print {

	header,
	footer,
	nav,
	.site-header,
	.site-footer,
	.fzm-slider__arrow,
	.fzm-slider__dots,
	.fzm-gallery__thumbs,
	.fzm-pricebox .fzm-button,
	.fzm-pricebox .fzm-link,
	.fzm-pricebox__leasing,
	.fzm-collapse__toggle {
		display: none !important;
	}

	.fzm-single__top {
		background: none;
	}

	.fzm-single__top-grid {
		grid-template-columns: 3fr 2fr;
	}

	.fzm-gallery__main .fzm-slider__track {
		overflow: hidden;
	}

	.fzm-pricebox {
		position: static;
		margin-top: 0;
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.fzm-collapse__content {
		max-height: none;
	}

	.fzm-collapse__content::after {
		display: none;
	}

	.fzm-section {
		padding: 1rem 0;
		break-inside: avoid;
	}
}

/* ---------- Slider neueste Fahrzeuge (Slick aus dem Theme) ---------- */

.fzm-latest--slider {
	position: relative;
}

/* Vor dem Start von Slick nur die erste Reihe zeigen */
.fzm-latest--slider .fzm-grid:not(.slick-initialized) > :nth-child(n+4) {
	display: none;
}

.fzm-latest--slider .fzm-grid.slick-initialized {
	display: block;
	margin: 0 calc(var(--fzm-gap) / -2);
}

/* Gleich hohe Karten */
.fzm-latest--slider .slick-track {
	display: flex !important;
}

.fzm-latest--slider .fzm-latest__item.slick-slide {
	display: flex;
	height: auto;
	padding: 0 calc(var(--fzm-gap) / 2);
}

.fzm-latest--slider .fzm-latest__item .fzm-card {
	flex: 1;
	min-width: 0;
}

.fzm-latest--slider .fzm-card__media {
	flex: none;
	height: auto;
}

.fzm-latest__arrow {
	position: absolute;
	top: 30%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--fzm-navy);
	box-shadow: var(--fzm-shadow);
	cursor: pointer;
}

.fzm-latest__arrow:hover {
	background: var(--fzm-blue);
	color: #fff;
}

.fzm-latest__arrow--prev {
	left: -1.4rem;
}

.fzm-latest__arrow--next {
	right: -1.4rem;
}

@media (max-width: 640px) {

	.fzm-latest__arrow--prev {
		left: .4rem;
	}

	.fzm-latest__arrow--next {
		right: .4rem;
	}
}