/**
 * Site chrome that Elementor should not own: header/footer bands, breadcrumbs,
 * opening hours, forms and the vehicle patterns.
 *
 * Base typography, colors, buttons, cards and badges live in brand.css.
 * Everything here is built from --sw-* tokens; see WORDPRESS-DESIGN.md
 * sections 4 and 5.
 */

/* --- Skip link (Hello Elementor does not ship one) --------------------- */

.cl-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--sw-space-3) var(--sw-space-5);
	background: var(--sw-navy-800);
	border-radius: var(--sw-radius-control);
	color: var(--sw-text-inverse);
	font-weight: 600;
	font-size: var(--sw-fs-body-sm);
	letter-spacing: var(--sw-ls-label);
}

.cl-skip-link:focus {
	left: var(--sw-space-4);
	top: var(--sw-space-4);
	box-shadow: var(--sw-focus-ring);
}

/* --- Header band ------------------------------------------------------- */

.sw-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--sw-surface-page);
	border-bottom: 1px solid var(--sw-border-subtle);
}

.sw-topline {
	display: flex;
	gap: var(--sw-space-6);
	align-items: center;
	font-size: var(--sw-fs-caption);
	color: var(--sw-band-300);
}

.sw-topline__hours {
	margin-left: auto;
}

.sw-header__main {
	display: flex;
	align-items: center;
	gap: var(--sw-space-8);
	padding-block: var(--sw-space-4);
}

.sw-logo {
	border-bottom: 0;
}

.sw-nav {
	display: flex;
	gap: var(--sw-space-6);
	margin-left: auto;
	list-style: none;
	padding: 0;
}

.sw-nav a {
	font: 600 var(--sw-fs-body-sm)/1.3 var(--sw-font-sans);
	letter-spacing: var(--sw-ls-label);
	color: var(--sw-text-muted);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.sw-nav .current-menu-item a {
	color: var(--sw-navy-800);
	border-bottom-color: var(--sw-navy-800);
}

.sw-services {
	display: flex;
	justify-content: space-between;
	font-size: var(--sw-fs-body-sm);
	color: var(--sw-navy-800);
}

/* --- Footer band ------------------------------------------------------- */

.sw-footer-cols {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: var(--sw-space-8);
	font-size: var(--sw-fs-caption);
}

.sw-footer-legal {
	background: var(--sw-surface-inverse);
	color: var(--sw-band-300);
	font-size: var(--sw-fs-caption);
}

.sw-footer-legal a {
	color: var(--sw-band-300);
	border-bottom-color: var(--sw-navy-600);
}

.sw-footer-legal a:hover {
	color: var(--sw-text-inverse);
	border-bottom-color: var(--sw-band-400);
}

@media (max-width: 900px) {
	.sw-services {
		display: none;
	}

	.sw-footer-cols {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Hero -------------------------------------------------------------- */

.sw-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sw-space-16);
	align-items: center;
}

@media (max-width: 900px) {
	.sw-hero {
		grid-template-columns: 1fr;
	}
}

/* --- Vehicle tile ------------------------------------------------------ */

.sw-vehicle {
	position: relative;
	display: flex;
	flex-direction: column;
}

.sw-vehicle__media {
	border: 0;
	border-bottom: 1px solid var(--sw-border-subtle);
	border-radius: 0;
}

.sw-vehicle__body {
	padding: var(--sw-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--sw-space-3);
	flex: 1;
}

.sw-vehicle__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sw-space-2) var(--sw-space-4);
	margin: 0;
}

.sw-vehicle__facts dt {
	font-size: var(--sw-fs-caption);
	color: var(--sw-text-muted);
}

.sw-vehicle__facts dd {
	margin: 0;
}

.sw-vehicle__price {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: var(--sw-space-3);
	border-top: 1px solid var(--sw-border-subtle);
}

.sw-vehicle__price strong {
	font-size: var(--sw-fs-h3);
	font-weight: 700;
	letter-spacing: var(--sw-ls-heading);
	color: var(--sw-text-heading);
}

.sw-vehicle__status {
	position: absolute;
	top: var(--sw-space-3);
	left: var(--sw-space-3);
}

/* --- Breadcrumbs ------------------------------------------------------- */

.cl-breadcrumbs {
	margin: var(--sw-space-4) 0;
	font-size: var(--sw-fs-caption);
	color: var(--sw-text-muted);
}

.cl-breadcrumbs a {
	color: var(--sw-text-muted);
	border-bottom-color: transparent;
}

.cl-breadcrumbs a:hover {
	color: var(--sw-text-link);
	border-bottom-color: var(--sw-steel-200);
}

/* --- Opening hours ----------------------------------------------------- */

.cl-hours {
	margin: 0;
}

.cl-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--sw-space-6);
	padding-block: var(--sw-space-2);
	border-bottom: 1px solid var(--sw-border-subtle);
}

.cl-hours__row dt {
	margin: 0;
	font-size: var(--sw-fs-body-sm);
	color: var(--sw-text-muted);
}

.cl-hours__row dd {
	margin: 0;
	font-family: var(--sw-font-mono);
	font-size: var(--sw-fs-body-sm);
	font-weight: 500;
	color: var(--sw-text-heading);
	text-align: right;
}

/* --- Forms (Elementor Pro / CF7) --------------------------------------- */

.cl-form input,
.cl-form select,
.cl-form textarea,
.wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	font-family: var(--sw-font-sans);
	font-size: var(--sw-fs-body-sm);
	color: var(--sw-text-body);
	background: var(--sw-surface-page);
	border: 1px solid var(--sw-border-default);
	border-radius: var(--sw-radius-control);
	transition: border-color var(--sw-dur-fast) var(--sw-ease);
}

.cl-form input,
.cl-form select {
	height: var(--sw-control-h);
	padding-inline: var(--sw-space-3);
}

.cl-form textarea {
	padding: var(--sw-space-3);
	line-height: 1.5;
	resize: vertical;
}

.cl-form :is(input, select, textarea):focus {
	border-color: var(--sw-border-focus);
	box-shadow: var(--sw-focus-ring);
	outline: none;
}

.cl-form [aria-invalid="true"] {
	border-color: var(--sw-red-500);
}

@media print {
	.cl-breadcrumbs,
	.sw-header,
	.elementor-location-header,
	.elementor-location-footer {
		display: none;
	}
}

/* --- Corrections for Hello Elementor defaults --------------------------- */

/*
 * Hello Elementor underlines every link inside .page-content and paints bare
 * buttons in its own pink. Both fight the brand: links carry a border-bottom
 * from brand.css, buttons carry their own surface.
 */
.page-content a,
.cl-single a,
.cl-archive a {
	text-decoration: none;
}

.cl-button,
button.cl-button,
[type="submit"].cl-button {
	background: var(--sw-steel-500);
	border: 1px solid var(--sw-steel-500);
	color: var(--sw-text-inverse);
}

.cl-button:hover,
button.cl-button:hover,
[type="submit"].cl-button:hover {
	background: var(--sw-steel-600);
	border-color: var(--sw-steel-600);
	color: var(--sw-text-inverse);
}

/* Headings inherit the navy text colour, which is invisible on a navy band. */
.sw-band--navy :is(h1, h2, h3, h4),
.sw-band--navy .sw-eyebrow {
	color: var(--sw-text-inverse);
}

.sw-band--navy p,
.sw-band--navy li {
	color: var(--sw-band-300);
}

/* --- Header ------------------------------------------------------------- */

.sw-header__topline {
	padding-block: var(--sw-space-2);
}

.sw-topline__link {
	color: var(--sw-band-300);
	border-bottom-color: transparent;
	white-space: nowrap;
}

.sw-topline__link:hover {
	color: var(--sw-text-inverse);
}

.sw-logo {
	display: flex;
	align-items: center;
	gap: var(--sw-space-3);
	color: var(--sw-navy-800);
}

.sw-logo__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--sw-navy-800);
	border-radius: var(--sw-radius-control);
	color: var(--sw-text-inverse);
	font-weight: 700;
	font-size: var(--sw-fs-body-sm);
	letter-spacing: 0.02em;
}

.sw-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.sw-logo__text strong {
	font-size: var(--sw-fs-h4);
	letter-spacing: var(--sw-ls-heading);
}

.sw-logo__text span {
	font-size: var(--sw-fs-caption);
	color: var(--sw-text-muted);
}

.sw-nav-wrap {
	margin-left: auto;
}

.sw-nav {
	margin: 0;
	align-items: center;
}

.sw-nav a {
	border-bottom-width: 2px;
}

.sw-nav .current-menu-item > a,
.sw-nav .current_page_item > a {
	color: var(--sw-navy-800);
	border-bottom-color: var(--sw-navy-800);
}

.sw-header__cta {
	flex: none;
}

.sw-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--sw-space-2);
	margin-left: auto;
	height: var(--sw-control-h);
	padding-inline: var(--sw-space-4);
	background: var(--sw-grey-50);
	border: 1px solid var(--sw-border-default);
	border-radius: var(--sw-radius-control);
	color: var(--sw-navy-800);
	font: 600 var(--sw-fs-body-sm)/1 var(--sw-font-sans);
	cursor: pointer;
}

.sw-nav-toggle__bar,
.sw-nav-toggle__bar::before,
.sw-nav-toggle__bar::after {
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
}

.sw-nav-toggle__bar {
	position: relative;
}

.sw-nav-toggle__bar::before,
.sw-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.sw-nav-toggle__bar::before {
	top: -5px;
}

.sw-nav-toggle__bar::after {
	top: 5px;
}

@media (max-width: 900px) {
	.sw-topline__hours {
		display: none;
	}

	.sw-nav-toggle {
		display: inline-flex;
	}

	.sw-header__main {
		flex-wrap: wrap;
		gap: var(--sw-space-4);
	}

	.sw-nav-wrap {
		flex-basis: 100%;
		margin-left: 0;
	}

	.sw-nav-wrap:not(.is-open) {
		display: none;
	}

	.sw-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sw-space-4);
		padding-block: var(--sw-space-2);
	}

	.sw-header__cta {
		order: 3;
	}
}

/* --- Footer ------------------------------------------------------------- */

.sw-footer__main {
	padding-block: var(--sw-space-12);
	/*
	 * Endet die Seite selbst auf einem dunklen Band, gingen Inhalt und Footer
	 * ohne diese Kante ineinander über und wirkten wie ein doppelter Footer.
	 */
	border-top: 1px solid var(--sw-navy-600);
}

.sw-footer-cols p {
	margin: 0;
	color: var(--sw-band-300);
}

.sw-footer__note {
	color: var(--sw-navy-500);
}

.sw-footer-cols a {
	color: var(--sw-text-inverse);
	border-bottom-color: var(--sw-navy-600);
}

.sw-footer-cols .cl-hours__row {
	border-bottom-color: var(--sw-navy-700);
}

.sw-footer-cols .cl-hours__row dt {
	color: var(--sw-band-400);
}

.sw-footer-cols .cl-hours__row dd {
	color: var(--sw-text-inverse);
}

.sw-footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--sw-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-footer-menu--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sw-space-5);
}

.sw-footer-legal__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-space-4) var(--sw-space-8);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--sw-space-4);
}

.sw-footer-legal p {
	margin: 0;
	max-width: none;
}

/* --- Vehicle archive and detail (plugin fallback templates) ------------- */

.cl-archive,
.cl-single {
	max-width: var(--sw-page-max);
	margin-inline: auto;
	padding: var(--sw-space-12) var(--sw-page-pad) var(--sw-space-20);
}

.cl-archive__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sw-space-4);
	margin-bottom: var(--sw-space-6);
}

.cl-archive__title {
	font-size: var(--sw-fs-display-2);
	letter-spacing: var(--sw-ls-display);
}

.cl-archive__count {
	margin: 0;
	font-family: var(--sw-font-mono);
	font-size: var(--sw-fs-body-sm);
	color: var(--sw-text-muted);
}

.cl-archive .cl-search {
	margin-bottom: var(--sw-space-10);
}

/* Placeholder tile while no vehicle photos are available. */
.cl-vehicle-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--sw-band-200);
}

.cl-vehicle-card__placeholder::after {
	content: "Foto folgt";
	font-size: var(--sw-fs-micro);
	font-weight: 700;
	letter-spacing: var(--sw-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sw-band-500);
}

.cl-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--sw-space-12);
	align-items: start;
}

.cl-single__header {
	margin-bottom: var(--sw-space-6);
}

.cl-single__title {
	font-size: var(--sw-fs-h1);
}

.cl-single__price {
	margin: var(--sw-space-2) 0 0;
	font-size: var(--sw-fs-display-2);
	font-weight: 700;
	letter-spacing: var(--sw-ls-display);
	color: var(--sw-navy-800);
}

.cl-single__aside {
	position: sticky;
	top: var(--sw-space-20);
	display: flex;
	flex-direction: column;
	gap: var(--sw-space-4);
}

.cl-single__aside .sw-btn {
	width: 100%;
}

@media (max-width: 900px) {
	.cl-single__layout {
		grid-template-columns: 1fr;
	}

	.cl-single__aside {
		position: static;
	}
}

/*
 * The availability meta stores English slugs, brand.css names the badge
 * variants in German. Map them so the status colours apply.
 */
.sw-badge--available {
	background: var(--sw-green-100);
	color: var(--sw-green-500);
}

.sw-badge--reserved {
	background: var(--sw-amber-100);
	color: var(--sw-amber-500);
}

.sw-badge--sold {
	background: var(--sw-red-100);
	color: var(--sw-red-500);
}

.sw-badge--incoming {
	background: var(--sw-band-300);
	color: var(--sw-navy-800);
}

/* --- Full-bleed landing pages ------------------------------------------ */

/*
 * Hello Elementor caps .site-main at 1140px. The landing pages are built from
 * edge-to-edge bands that bring their own .sw-container, so the cap has to go
 * for pages; posts and archives keep the reading width.
 */
body.page .site-main {
	max-width: none;
	padding-inline: 0;
}

body.page .page-content > *:last-child {
	margin-bottom: 0;
}

/* The detail view sets its own frame; a 4:3 placeholder would dominate it. */
.cl-single .sw-photo-placeholder {
	aspect-ratio: 16 / 9;
	margin-bottom: var(--sw-space-8);
}

.cl-single__media {
	margin: 0 0 var(--sw-space-8);
}

.cl-single__content {
	margin-bottom: var(--sw-space-8);
}

/* Display sizes are set for desktop; on phones they need one step down. */
@media (max-width: 640px) {
	:root {
		--sw-fs-display: 40px;
		--sw-fs-display-2: 34px;
		--sw-fs-h1: 28px;
	}
}

/* Sales restriction repeated in the enquiry card — that is where people decide. */
.cl-aside-restriction {
	margin: 0;
	padding: var(--sw-space-2) var(--sw-space-3);
	background: var(--sw-amber-100);
	border-radius: var(--sw-radius-control);
	color: var(--sw-amber-500);
}

.cl-aside-restriction strong {
	font-size: var(--sw-fs-micro);
	font-weight: 700;
	letter-spacing: var(--sw-ls-eyebrow);
	text-transform: uppercase;
}

/* --- Elementor ---------------------------------------------------------- */

/*
 * Farben und Typografie der Elementor-Inhalte kommen aus den globalen Werten
 * des Kits (siehe inc/elementor.php): Ein Widget speichert eine Referenz, keinen
 * Farbwert. Wer im Kit "Marken-Navy" ändert, ändert damit jedes Band, jede
 * Überschrift und jeden Rahmen, der darauf zeigt — ohne CSS anzufassen.
 * Deshalb steht hier nichts mehr, was Elementor-Widgets einfärbt.
 */