/* Auto Emotion – Basisstile (Lamborghini.com Style Reference) */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Feste Regel gegen seitliches Verrutschen/Anstoßen an den Rand: die
   Seite darf nie horizontal scrollbar werden. Die eigentliche Ursache
   (Grid-Items ohne min-width: 0, siehe .story-grid/.job-card-grid/
   .service-teaser-grid) wird gezielt behoben, das hier ist zusätzlich
   ein Sicherheitsnetz gegen jede künftige Regression.
   Nur auf <html>, nicht auf <body>: overflow-x ungleich "visible" auf
   body berechnet overflow-y automatisch zu "auto" und macht body damit
   selbst zum Scroll-Container - genau der, auf den sich position:sticky
   dann bezieht, statt auf den Viewport. Ergebnis: jede sticky-Sidebar
   (z.B. .angebote-layout__sidebar) scrollt einfach mit, statt stehen zu
   bleiben. */
html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	max-width: 100%;
}

body {
	margin: 0;
	background: var(--surface-canvas-white);
	color: var(--color-carbony-black);
	font-family: var(--font-lambotype);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-images);
}

.post-thumbnail--video {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-images);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--spacing-24);
	font-family: var(--font-lambotype);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	line-height: 1;
	/* Lange deutsche Komposita (z. B. "Fahrzeugsuche") haben keine
	   Leerzeichen zum Umbrechen. Ohne "hyphens" bricht der Browser sie
	   an einer beliebigen Stelle mitten im Wort ("FAHRZEUGSUC-HE") –
	   mit "hyphens: auto" nutzt er stattdessen die echten deutschen
	   Trennregeln ("FAHRZEUG-SUCHE"). overflow-wrap bleibt als
	   Sicherheitsnetz für Browser ohne Trennwörterbuch. */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Black für große Bühnen-Headlines, Bold für kleinere Zwischenüberschriften –
   spiegelt die reale Interstate-Gewichtsstruktur (Black/Bold/Regular). */
h1,
h2 {
	font-weight: var(--font-weight-black);
}

h3,
h4,
h5,
h6 {
	font-weight: var(--font-weight-bold);
}

/* Text direkt unter einer Überschrift bewusst dünner setzen (CUPRA-
   Anmutung: fette Headline, leiser Fließtext direkt darunter) statt
   der Standard-Textstärke. */
h1 + p,
h2 + p,
h3 + p {
	font-weight: var(--font-weight-light);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Utility-Bar (Adresse, Kontaktdaten, Telefon, Öffnungsstatus)      */
/* ---------------------------------------------------------------- */

/* Immer normal im Textfluss (nie fixiert) - läuft dadurch beim
   Scrollen auf allen Seiten einfach mit weg, ohne die bereits fein
   austarierte fixed/static-Logik von .site-header (siehe unten)
   anzufassen. Auf der Startseite, wo der Header für den
   Hero-Überlagerungseffekt fix auf top:0 sitzt, würde sie dauerhaft
   darunter verdeckt bleiben - dort daher ausgeblendet. */
.utility-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	height: 36px;
	padding: 0 var(--spacing-24);
	background: var(--surface-carbon-deep);
	color: var(--color-ash-border);
	font-size: var(--text-caption);
}

body.has-transparent-header .utility-bar {
	display: none;
}

.utility-bar__address {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.utility-bar__info {
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
	flex-shrink: 0;
}

.utility-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	color: var(--color-ash-border);
	white-space: nowrap;
}

a.utility-bar__item:hover {
	color: var(--surface-canvas-white);
}

.utility-bar__item svg {
	flex-shrink: 0;
}

.utility-bar__status {
	color: var(--surface-canvas-white);
}

@media (max-width: 700px) {
	.utility-bar__address {
		display: none;
	}

	.utility-bar {
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------- */
/* Top Navigation Bar                                                */
/* ---------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	height: 64px;
	padding: 0 var(--spacing-24);
	background: var(--surface-carbony);
	color: var(--surface-canvas-white);
	transition: background-color 0.3s ease;
}

/* Startseite: Header startet transparent mit Verlauf über dem Hero-Bild
   und wird erst beim Scrollen (Klasse .is-scrolled, per JS gesetzt) fest. */
body.has-transparent-header .site-header {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

body.has-transparent-header .site-header.is-scrolled {
	background: var(--surface-carbony);
}

/* Unterseiten (alles außer Startseite): Header scrollt normal mit statt
   dauerhaft fixiert über dem Seiteninhalt zu kleben - mit der jetzt
   vollen Menüleiste fiel das deutlich störender auf als vorher mit nur
   Logo+Hamburger ("das Menü ist immer über den Bildern"). Entspricht
   außerdem bmw.de, deren Navigation laut Vorbild explizit nicht sticky
   ist. Die Startseite behält die feste Positionierung für den
   Hero-Überlagerungseffekt. */
body:not(.has-transparent-header) .site-header {
	position: static;
}

body:not(.has-transparent-header) .site-main {
	padding-top: 0;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	background: none;
	border: none;
	color: var(--surface-canvas-white);
	font-family: var(--font-lambotype);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.nav-toggle-icon {
	position: relative;
}

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

.nav-toggle-icon::before {
	top: -6px;
}

.nav-toggle-icon::after {
	top: 6px;
}

/* Auf schmalen Screens nur das Icon zeigen: sonst ist die linke Seite
   (Icon + "MENU") breiter als die rechte (nur Suche) und das mittig
   positionierte Logo wirkt dadurch nicht zentriert. */
@media (max-width: 480px) {
	.nav-toggle-label {
		display: none;
	}
}

.site-branding .site-title {
	margin: 0;
	line-height: 0;
}

.site-logo-wrap {
	position: relative;
	display: inline-flex;
}

.site-logo {
	display: block;
	width: 28px;
	height: auto;
	clip-path: inset(0 100% 0 0);
	animation: ae-logo-reveal 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

.site-logo-wrap::after {
	content: "";
	position: absolute;
	top: -3px;
	bottom: -3px;
	left: 0;
	width: 2px;
	background: var(--color-rosso-vivo);
	box-shadow: 0 0 6px 1px var(--color-rosso-vivo), 0 0 14px 3px rgba(216, 0, 13, 0.55);
	opacity: 0;
	animation: ae-logo-laser 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
	pointer-events: none;
}

@keyframes ae-logo-reveal {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ae-logo-laser {
	0% {
		left: 0;
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}

.search-toggle {
	background: none;
	border: none;
	color: var(--surface-canvas-white);
}

/* GTranslate-Sprachauswahl (IT/EN/AR/TR/ZH): per Plugin-Einstellung
   ("Wrapper selector CSS" = .header-actions) direkt als Sprachcode-
   Links in die bestehende Header-Actions-Leiste gerendert, nicht als
   schwebendes Overlay - das kollidierte vorher mit dem letzten
   Menüpunkt. Übernimmt automatisch den vorhandenen 16px-Flex-Gap der
   Leiste, hier nur Typografie/Hover an den Rest des Headers angeglichen. */
.header-actions .glink {
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-caption);
	/* Sprachcodes (EN, DE, AR …) kommen schon großgeschrieben vom
	   Plugin - text-transform zusätzlich fest gesetzt, damit es sich
	   wie der Rest des Menüs (.menu-item__link) verhält statt sich auf
	   die Groß-/Kleinschreibung des gelieferten Textes zu verlassen. */
	text-transform: uppercase;
	color: var(--surface-canvas-white);
	transition: color 0.2s ease;
}

.header-actions .glink:hover,
.header-actions .glink.gt-current-lang {
	color: var(--color-rosso-vivo);
}

.main-navigation[data-state="closed"] {
	display: none;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

.main-navigation {
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	padding: var(--spacing-24);
	background: var(--surface-carbon-deep);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

.main-navigation a {
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--surface-canvas-white);
}

.main-navigation .menu-item {
	display: flex;
	align-items: center;
	/* Ohne flex-wrap landete das Untermenü (flex-basis:100% weiter
	   unten) als drittes Element IN DERSELBEN Zeile wie Link und
	   Pfeil-Button statt darunter - dadurch überlagerten sich
	   Untermenü- und nachfolgende Hauptmenüpunkte sichtbar. */
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--spacing-16);
}

.main-navigation .menu-item__link {
	flex: 1;
	padding: var(--spacing-8) 0;
	transition: color 0.15s ease;
}

/* Macht sichtbar, dass der Text selbst der eigentliche Link zur
   Hauptkategorie-Seite ist - unabhängig vom separaten Pfeil-Button
   daneben, der nur das Untermenü auf-/zuklappt. */
.main-navigation .menu-item__link:hover,
.main-navigation .menu-item__link:focus-visible {
	color: var(--color-rosso-vivo);
}

/* Ein einziger Button aus Label + Pfeil für Hauptpunkte mit
   Untermenü, statt Text als separatem Link + eigenem Pfeil-Button
   daneben - das Label öffnet/schließt nur noch das Menü und navigiert
   nie direkt weg (wie bei bmw.de beobachtet: "Kaufen" landete bei uns
   vorher auf /finanzierung-leasing/, statt das Menü zu öffnen). Erbt
   flex:1/padding von .menu-item__link (beide Klassen kombiniert),
   dadurch bleibt die komplette Zeile ein großzügiges Touch-Target
   statt nur eines kleinen 44x44px-Pfeils. */
.submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	background: none;
	border: none;
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--surface-canvas-white);
	text-align: left;
	cursor: pointer;
}

.submenu-toggle-icon {
	display: block;
	width: 10px;
	height: 10px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle-icon {
	transform: rotate(-135deg);
}

/* Flaches Mehrspalten-Panel statt eingerückter Einzelliste (Vorbild:
   BMW.de-Hauptnavigation - Unterpunkte fließen von links nach rechts
   statt gestapelt in einer schmalen Liste zu stehen). CSS-Grid statt
   CSS-Columns: column-span/column-width zeigte auf iOS Safari einen
   Rendering-Bug, bei dem alle Unterpunkte nach dem "Alle X
   ansehen"-Link unsichtbar blieben (in Chrome nicht reproduzierbar,
   aber vom Nutzer per Screenshot auf echtem iPhone bestätigt) - Grid
   mit auto-fill/minmax ist das robustere, breiter unterstützte
   Äquivalent und passt bei wenig Platz (Smartphone) ebenso
   automatisch auf eine Spalte, ganz ohne eigene Media Query. */
.main-navigation .sub-menu {
	flex-basis: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	column-gap: var(--spacing-40);
	row-gap: var(--spacing-8);
	align-content: start;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.35s ease;
}

.main-navigation .sub-menu[data-state="open"] {
	max-height: 900px;
	opacity: 1;
	margin: var(--spacing-16) 0 var(--spacing-24);
	/* Überschreibt die Schließverzögerung unten (nur fürs Verlassen
	   mit der Maus gedacht) - per Klick/Tipp geöffnet reagiert sofort. */
	transition-delay: 0s;
}

.main-navigation .sub-menu a {
	font-size: var(--text-caption);
	color: var(--color-ash-border);
}

/* "Alle X ansehen"-Link an erster Stelle im Untermenü: spannt über
   alle Spalten (grid-column: 1 / -1), optisch abgesetzt von den
   eigentlichen Unterpunkten darunter - macht sofort klar, dass die
   Hauptkategorie selbst auch eine eigene Seite ist. */
.main-navigation .sub-menu .sub-menu__overview {
	grid-column: 1 / -1;
	margin-bottom: var(--spacing-16);
	padding-bottom: var(--spacing-16);
	border-bottom: 1px solid var(--color-graphite-border);
}

.main-navigation .sub-menu .sub-menu__overview-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	color: var(--surface-canvas-white);
}

.main-navigation .sub-menu .sub-menu__overview-link span {
	color: var(--color-rosso-vivo);
	transition: transform 0.2s ease;
}

.main-navigation .sub-menu .sub-menu__overview-link:hover,
.main-navigation .sub-menu .sub-menu__overview-link:focus-visible {
	color: var(--color-rosso-vivo);
}

.main-navigation .sub-menu .sub-menu__overview-link:hover span,
.main-navigation .sub-menu .sub-menu__overview-link:focus-visible span {
	transform: translateX(4px);
}

/* Desktop/Maus UNTERHALB der permanenten Topbar-Breite (max-width
   begrenzt genau auf den Bereich vor dem min-width:1200px-Block
   weiter unten): Untermenü beim Hovern über den Menüpunkt automatisch
   zeigen, statt den kleinen Pfeil exakt treffen zu müssen. Zum
   Schließen eine kurze Verzögerung (0.3s), damit der Übergang zur
   Maus auf einen Unterpunkt nicht sofort abbricht - wie bei Apples
   eigener Navigation. Ab der Topbar-Breite gilt bewusst NUR noch
   Klick (wie bei bmw.de: Pfeil zeigt erst nach einem Klick nach oben,
   nicht schon beim bloßen Drüberfahren) - deshalb hier per max-width
   sauber abgegrenzt, statt mit einer konkurrierenden
   "Hover-zurücksetzen"-Regel zu arbeiten: eine solche Regel hätte
   wegen :focus-within (ein Button bleibt nach dem Anklicken fokussiert)
   eine höhere Spezifität als [data-state="open"] gehabt und das
   gerade erst per Klick geöffnete Panel sofort wieder geschlossen -
   dieser Bug trat genau so live auf und wurde hierdurch behoben. Auf
   Touch-Geräten (Handy) gibt es ohnehin kein Hover, dort bleibt das
   Antippen des Pfeils die einzige Interaktion. */
@media (hover: hover) and (pointer: fine) and (max-width: 1199.98px) {
	.main-navigation .sub-menu {
		transition-delay: 0.3s;
	}

	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu {
		max-height: 900px;
		opacity: 1;
		margin: var(--spacing-16) 0 var(--spacing-24);
		transition-delay: 0s;
	}

	.main-navigation .menu-item-has-children:hover > .submenu-toggle .submenu-toggle-icon,
	.main-navigation .menu-item-has-children:focus-within > .submenu-toggle .submenu-toggle-icon {
		transform: rotate(-135deg);
	}
}

/* Nur im Menü sichtbar, bis zur AI-Assistent-Taste gleich gestylt wie
   die echten Menüpunkte (gleiche Typografie), funktional aber ein
   Button statt eines Links - öffnet das Chat-Widget statt zu
   navigieren (siehe assets/js/main.js). */
.main-navigation__ai-trigger {
	background: none;
	border: none;
	padding: var(--spacing-8) 0;
	color: var(--surface-canvas-white);
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	text-align: left;
	cursor: pointer;
	transition: color 0.15s ease;
}

.main-navigation__ai-trigger:hover,
.main-navigation__ai-trigger:focus-visible {
	color: var(--color-rosso-vivo);
}

/* Permanente Desktop-Topbar statt Vollbild-Overlay (Vorbild: bmw.de -
   feste Menüleiste, Klick auf einen Punkt klappt ein volles,
   spaltenweises Panel darunter auf; nochmaliger Klick schließt es
   wieder). Unterhalb dieser Breite bleibt das bewährte
   Hamburger-Vollbild-Menü unverändert bestehen - bei 10+ Hauptpunkten
   plus "AI-Assistent" ist dafür spürbar Platz nötig. */
@media (min-width: 1200px) {
	.nav-toggle {
		display: none;
	}

	.site-header {
		justify-content: flex-start;
		gap: var(--spacing-24);
	}

	.header-actions {
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Logo darf nie schrumpfen: ohne flex-shrink:0 drückten die 10+
	   Hauptpunkte (white-space:nowrap, siehe .menu-item__link unten)
	   bei schmaleren Desktop-Breiten (z.B. 1440px) das Logo auf 0px
	   Breite zusammen, bis es komplett verschwand. */
	.site-branding {
		flex-shrink: 0;
	}

	.main-navigation,
	.main-navigation[data-state="closed"] {
		display: flex;
		align-items: center;
		position: static;
		background: none;
		padding: 0;
		max-height: none;
		overflow: visible;
		gap: var(--spacing-24);
		/* Statt das Logo zu verdrängen, wird die Menüleiste selbst
		   eingeschränkt: passen nicht alle Punkte in die verfügbare
		   Breite, scrollt sie horizontal statt etwas zu zerquetschen. */
		min-width: 0;
	}

	.main-navigation > div {
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.main-navigation > div::-webkit-scrollbar {
		display: none;
	}

	.main-navigation ul {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-24);
	}

	.main-navigation .menu-item {
		position: relative;
		flex-wrap: nowrap;
		width: auto;
	}

	.main-navigation .menu-item__link {
		flex: none;
		padding: 0;
		font-size: var(--text-caption);
		white-space: nowrap;
	}

	.submenu-toggle {
		display: inline-flex;
		width: auto;
		gap: var(--spacing-8);
	}

	.main-navigation__ai-trigger {
		flex-shrink: 0;
		font-size: var(--text-caption);
		padding: 0;
		white-space: nowrap;
	}

	/* Panel hängt sich unabhängig vom auslösenden Menüpunkt an den
	   Viewport (position:fixed), nicht an die Breite des einzelnen
	   <li> - dadurch volle Breite unter der Topbar wie bei bmw.de,
	   unabhängig davon, welcher Hauptpunkt gerade offen ist. */
	.main-navigation .sub-menu,
	.main-navigation .sub-menu[data-state="open"] {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		width: 100%;
		background: var(--surface-carbon-deep);
		/* Vertikales Padding wird bei max-height:0 ohnehin mit
		   abgeschnitten (overflow:hidden) - erst im offenen Zustand
		   sichtbar, kein separater Übergang nötig. */
		padding: var(--spacing-56);
		/* Überschreibt den margin-top aus der mobilen Akkordeon-Version
		   (dort nötig, um Abstand zum vorigen Listenpunkt zu schaffen) -
		   bei position:fixed verschob dieser margin-top das Panel sonst
		   um 16px nach unten und riss eine sichtbare Lücke zur Topbar
		   auf, statt bündig direkt darunter anzuschließen. */
		margin: 0;
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		row-gap: var(--spacing-16);
		z-index: 15;
	}
}

.header-search {
	position: absolute;
	top: 64px;
	right: var(--spacing-24);
	background: var(--surface-carbon-deep);
	padding: var(--spacing-16);
}

.header-search[data-state="closed"] {
	display: none;
}

.header-search input[type="search"] {
	background: none;
	border: none;
	border-bottom: 1px solid var(--color-steel-mid);
	color: var(--surface-canvas-white);
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	padding: var(--spacing-8) 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--spacing-8);
	left: var(--spacing-8);
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--spacing-16) var(--spacing-24);
	background: var(--color-giallo-vivo);
	color: var(--surface-canvas-white);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

:focus-visible {
	outline: 2px solid var(--color-giallo-vivo);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-16);
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	border-radius: var(--radius-buttons);
	padding: 16px 24px;
}

.btn-giallo {
	/* Bremslicht-Optik statt Flat-Fill: heller Lichtschein oben links
	   (Glas-Reflex), Verlauf ins satte Rot, dazu ein weicher roter
	   Glow als Schatten – wie ein leuchtendes Rücklicht. */
	background:
		radial-gradient(120% 150% at 28% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, #ff3b2c 0%, var(--color-rosso-vivo) 48%, var(--color-rosso-ombra) 100%);
	box-shadow: 0 6px 24px rgba(216, 0, 13, 0.45);
	color: var(--surface-canvas-white);
	border: none;
	transition: box-shadow 0.2s ease;
}

.btn-giallo:hover {
	background:
		radial-gradient(120% 150% at 28% -10%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, #ff3b2c 0%, var(--color-rosso-ombra) 55%, var(--color-rosso-ombra) 100%);
	box-shadow: 0 6px 32px rgba(216, 0, 13, 0.65);
	color: var(--surface-canvas-white);
}

.btn-ghost {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-carbony-black);
}

.btn-ghost.on-dark {
	color: var(--surface-canvas-white);
}

.btn-outline {
	background: none;
	border: 1px solid var(--color-steel-mid);
	color: inherit;
}

.btn-arrow {
	font-size: var(--text-body);
}

/* ---------------------------------------------------------------- */
/* Model Showcase (Fahrzeug-Detailkarte, Lamborghini-Referenzmuster) */
/* ---------------------------------------------------------------- */

.model-showcase {
	/* Kein eigenes vertikales Padding mehr: .site-main > * + * gibt
	   zwischen allen Geschwister-Sektionen bereits --section-gap
	   (80px). Mit zusätzlichem 64px/40px-Padding hier kam der Abstand
	   zur Fahrzeugsuche davor und zu "Unsere Marken" danach doppelt so
	   groß heraus wie bei jedem anderen Sektionsübergang der Seite. */
	background: var(--surface-canvas-white);
	text-align: center;
	padding: 0 var(--spacing-24);
}

.model-showcase__slide {
	max-width: 720px;
	margin: 0 auto;
}

.model-showcase__badge {
	font-size: var(--text-heading-sm);
	font-weight: var(--font-weight-black);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin-bottom: var(--spacing-16);
}

.model-showcase__eyebrow {
	display: block;
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	color: var(--color-steel-mid);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin-bottom: var(--spacing-8);
}

.model-showcase__headline {
	/* Bewusst als Fließtext-Subheadline skaliert, nicht als Display-
	   Headline: dieser Text ist der (gekürzte) Angebots-Excerpt, der je
	   nach Fahrzeug mehrere Sätze lang sein kann - bei Display-Größe
	   wirkt ein ganzer Absatz riesig und erschlägt den Rest der Karte. */
	font-weight: var(--font-weight-regular);
	font-size: var(--text-subheading);
	line-height: var(--leading-body);
	color: var(--color-steel-mid);
	max-width: 520px;
	margin: 0 auto var(--spacing-32);
}

.model-showcase__photo {
	width: 100%;
	max-width: 640px;
	margin: 0 auto var(--spacing-32);
}

.model-showcase__cta {
	width: 100%;
	justify-content: center;
	margin-bottom: var(--spacing-24);
}

.model-showcase__links {
	border-top: 1px solid var(--color-ash-border);
}

.model-showcase__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	width: 100%;
	padding: var(--spacing-24) 0;
	border-bottom: 1px solid var(--color-ash-border);
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.model-showcase__link svg {
	flex-shrink: 0;
}

.model-showcase__dots {
	display: flex;
	justify-content: center;
	gap: var(--spacing-8);
	margin: var(--spacing-40) 0 var(--spacing-24);
}

.model-showcase__dot {
	width: 32px;
	height: 2px;
	background: var(--color-ash-border);
	border: none;
	padding: 0;
}

.model-showcase__dot[aria-current="true"] {
	background: var(--color-carbony-black);
}

.model-showcase__disclaimer {
	max-width: 720px;
	margin: 0 auto;
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
}

.model-showcase__placeholder-photo {
	aspect-ratio: 16 / 9;
	max-width: 640px;
	margin: 0 auto var(--spacing-32);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-marble);
	color: var(--color-steel-mid);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	font-size: var(--text-caption);
}

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

.hero-stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	padding: var(--spacing-80) var(--spacing-24);
	background-color: var(--surface-carbony);
	background-size: cover;
	background-position: center center;
	color: var(--surface-canvas-white);
}

.hero-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 55%);
}

.hero-stage__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero-stage__content {
	position: relative;
	z-index: 2;
	max-width: 50%;
}

/* Pill-Badge statt reinem Fließtext als Eyebrow - kompakter visueller
   Einstiegspunkt, der den Blick zuerst auf einen kleinen, klar
   abgegrenzten Claim lenkt, bevor die große Headline folgt. */
.hero-stage__badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--spacing-16);
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero-stage__headline {
	font-size: clamp(40px, 8vw, var(--text-hero));
	line-height: var(--leading-hero);
	margin-bottom: var(--spacing-32);
	text-wrap: balance;
}

.hero-stage__headline .appear--mask {
	display: block;
	overflow: hidden;
}

/* Serif-Italic-Akzent auf dem letzten Headline-Wort statt der
   durchgehenden Uppercase-Sans - bewusster Bruch im sonst strengen
   Lambo-Schriftbild, in der echten Auto-Emotion-Akzentfarbe Rot. */
.hero-stage__accent {
	font-family: 'Instrument Serif', 'Times New Roman', Times, serif;
	font-style: italic;
	font-weight: 400;
	color: var(--color-rosso-vivo);
}

.hero-stage__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
}

/* Hero-eigene Ghost-/Glas-Variante statt des globalen .btn-outline:
   bewusst nur im Hero, um die etablierte Button-Sprache auf allen
   anderen Seiten nicht sitewide zu verändern. */
.hero-stage__cta-ghost {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
	color: var(--surface-canvas-white);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.hero-stage__cta-ghost:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* Gestaffelte Eintritts-Animation: Badge, Headline und Buttons blenden
   nacheinander ein statt alle gleichzeitig zu erscheinen. Ruhezustand
   ist immer sichtbar (animation-fill-mode:both setzt nur den
   0%-Keyframe während der delay-Phase), bei deaktivierter Bewegung
   greift die globale prefers-reduced-motion-Regel oben und reduziert
   jede Animation auf 0.01ms. */
.hero-stage .appear {
	animation-duration: 0.9s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: both;
}

.hero-stage__badge.appear--pop {
	animation-name: hero-in-pop;
	animation-delay: 0.1s;
}

.hero-stage__headline .appear--mask {
	animation-name: hero-in-mask;
	animation-delay: 0.3s;
}

.appear--btn {
	animation-name: hero-in-btn;
	animation-delay: 0.55s;
}

.appear--btn-delay {
	animation-name: hero-in-btn;
	animation-delay: 0.68s;
}

@keyframes hero-in-pop {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes hero-in-mask {
	from {
		opacity: 0;
		transform: translateY(40%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hero-in-btn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.hero-stage__content {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------- */
/* Section Heading Block                                             */
/* ---------------------------------------------------------------- */

.section-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	/* War var(--spacing-80) - straffer getaktet, siehe --section-gap. */
	padding: var(--spacing-56) 0;
}

.section-heading__title {
	/* War clamp(28px, 5vw, var(--text-display)) (54px-Obergrenze) -
	   mittlere Überschriftenebene etwas zurückgenommen, damit sie
	   neben der bewusst riesigen Hero-Headline (--text-hero) nicht
	   selbst wie eine zweite Hero-Zeile wirkt, sondern als ruhigere,
	   editorial wirkende Sektions-Überschrift. */
	font-size: clamp(26px, 4vw, var(--text-heading-lg));
	line-height: 1.15;
	margin: 0;
	/* Verhindert unschöne Umbrüche mitten in kurzen Wörtern/Resten
	   – gleicht die Zeilen einer mehrzeiligen Headline stattdessen
	   aus. Browser ohne Unterstützung ignorieren die Eigenschaft
	   und brechen normal um, ganz ohne Fallback nötig. */
	text-wrap: balance;
	/* Flex-Items schrumpfen sonst nicht unter ihre intrinsische
	   Breite (min-width:auto-Default) – bei langen Headlines auf
	   schmalen Screens sonst horizontaler Overflow trotz
	   overflow-wrap: break-word. */
	min-width: 0;
}

/* ---------------------------------------------------------------- */
/* Three-Column Story Grid                                           */
/* ---------------------------------------------------------------- */

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--element-gap);
}

/* Grid-Items schrumpfen sonst nicht unter ihre intrinsische Breite
   (min-width:auto-Default) – ein großes Bild in einer Karte hat sonst
   horizontalen Overflow der ganzen Seite zur Folge, obwohl die Spalte
   selbst 1fr/100% breit ist. Gleiche Ursache wie bei
   .section-heading__title oben, hier zusätzlich für alle
   Story-Grid-Kinder (Marken-Kacheln, Angebots- und News-Karten). */
.story-grid > * {
	min-width: 0;
}

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

.entry-title {
	font-size: clamp(32px, 7vw, var(--text-display-lg));
	line-height: 1.15;
	text-wrap: balance;
}

.story-grid__date,
.date-card__date {
	display: block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin-bottom: var(--spacing-8);
}

.story-grid__title,
.date-card__title {
	font-size: var(--text-heading-sm);
	line-height: 1.2;
	margin-bottom: var(--spacing-16);
	/* Reserviert immer Platz für 4 Zeilen, unabhängig davon, ob der
	   tatsächliche Titel 2, 3 oder 4 Zeilen braucht (News-Titel laufen
	   teils auf 4 Zeilen). Ohne das fallen die Vorschaubilder in einer
	   Grid-Reihe je nach Titellänge unterschiedlich hoch an – die Reihe
	   wirkt "nicht bündig". */
	min-height: calc(var(--text-heading-sm) * 1.2 * 4);
}

/* ---------------------------------------------------------------- */
/* Layout containers                                                 */
/* ---------------------------------------------------------------- */

/* .site-main bleibt selbst ungebunden (volle Fensterbreite), damit
   vollflächige Sektionen (Hero, Fahrzeug-Streifen) ohne vw-Rechentricks
   echt Rand-an-Rand sitzen. Begrenzte Inhalte bekommen die .container-
   Klasse (max-width + zentriert + Seitenabstand). */
.site-main {
	padding-top: 64px;
}

body.has-transparent-header .site-main {
	padding-top: 0;
}

.site-main > * + * {
	margin-top: var(--section-gap);
}

/* Hero und Traumauto-Finder sind beide vollflächig-dunkle Sektionen
   ohne eigenen "Seiten-Rand" - der normale Section-Abstand zwischen
   ihnen lag auf dem weißen body-Hintergrund und zeigte dadurch einen
   hellen Streifen zwischen Header und Finder ("weißer Balken"). Beide
   Flächen gehen farblich ohnehin nahtlos ineinander über (Hero endet
   dunkel, Finder startet mit dunklem Rot-Schwarz-Verlauf), daher hier
   bewusst kein Abstand statt eines künstlich eingefärbten Spalts. */
.hero-stage + .traumauto-finder {
	margin-top: 0;
}

.container {
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-24);
}

.container > * + * {
	margin-top: var(--section-gap);
}

/* Fester Mindestabstand zwischen allen Blöcken innerhalb von
   Seiteninhalten (the_content-Ausgabe): dort landen Absätze, Boxen/
   Grids, Bilder und Überschriften als flaches HTML direkt in
   .entry-content, ohne dass die .container > * + *-Regel oben greift
   (entry-content ist selbst nur EIN Kind von .container). Ohne diese
   Regel klebt z.B. eine Karten-Box direkt an der folgenden Überschrift.
   Gilt einheitlich für jede Seite – kein Einzelfall-Fix pro Komponente. */
.entry-content > * + * {
	margin-top: var(--spacing-40);
}

/* ---------------------------------------------------------------- */
/* Brand Tile                                                         */
/* ---------------------------------------------------------------- */

.brand-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-40) var(--spacing-24);
	background: var(--surface-carbony);
	color: var(--surface-canvas-white);
	border-left: 3px solid transparent;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.brand-tile:hover {
	background: #000;
	border-left-color: var(--color-rosso-vivo);
}

.brand-tile .btn-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.brand-tile:hover .btn-arrow {
	transform: translateX(6px);
}

.brand-tile__name {
	font-size: clamp(24px, 5vw, var(--text-heading-lg));
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	text-wrap: balance;
}

/* ---------------------------------------------------------------- */
/* Product Image Tile                                                 */
/* ---------------------------------------------------------------- */

/* Kompakte, leicht erhabene Karte statt Bild + Text lose auf dem
   Seitenhintergrund ("wirkt langweilig") - dezenter Schatten im
   Ruhezustand, etwas kräftiger + minimal angehoben bei Hover, ganz im
   Sinne der Apple-Produktkarten-Referenz: zurückhaltend, nicht
   plakativ, keine runden Ecken (bleibt eckig wie der Rest des
   Dark-Theater-Systems). */
.product-tile {
	display: flex;
	flex-direction: column;
	background: var(--surface-canvas-white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-tile:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09), 0 20px 40px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}

.product-tile > a {
	display: block;
	overflow: hidden;
}

.product-tile img {
	display: block;
	width: 100%;
	height: auto;
}

.product-tile__caption {
	font-size: var(--text-body);
	line-height: var(--leading-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	padding: var(--spacing-16);
	/* Reserviert Platz für 3 Zeilen, damit unterschiedlich lange
	   Titel ("Cupra Born VZ" vs. "Cupra Leon Sportstourer:
	   Leasingraten für TSI und e-HYBRID") nicht dazu führen, dass
	   Karten in derselben Grid-Reihe unterschiedlich hoch enden. */
	min-height: calc(var(--text-body) * var(--leading-body) * 3 + var(--spacing-16) * 2);
}

/* ---------------------------------------------------------------- */
/* Event Banner                                                       */
/* ---------------------------------------------------------------- */

.event-banner {
	/* Gleicher roter Glow-Verlauf wie .career-banner: ohne ihn blieb auf
	   breiten Desktop-Viewports neben der schmalen Content-Spalte eine
	   große, komplett flache dunkle Fläche stehen ("Volkskatastrophe"
	   auf großen Screens, auf Mobile durch die gestapelte Spalte
	   unauffällig). */
	background: radial-gradient(ellipse 1100px 1400px at 100% 0%, var(--color-rosso-vivo) 0%, var(--color-rosso-vivo) 18%, var(--color-carbony-black) 55%, var(--color-pure-black) 100%);
	color: var(--surface-canvas-white);
}

.event-banner__image {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center 55%;
}

@media (max-width: 700px) {
	.event-banner__image {
		height: 220px;
	}
}

.event-banner__content {
	max-width: 600px;
	padding: var(--spacing-64) var(--spacing-24);
}

.event-banner__headline {
	font-size: clamp(28px, 6vw, var(--text-display));
	margin-bottom: var(--spacing-24);
}

.event-banner__content p {
	margin: 0 0 var(--spacing-32);
}

/* ---------------------------------------------------------------- */
/* Karriere-Banner (Startseite)                                       */
/* ---------------------------------------------------------------- */

.career-banner {
	/* Roter Licht-Glow aus einer Ecke, der in Carbony-/Pure-Black
	   ausläuft – passend zum roten Cupra-Glow im Hero-Video statt
	   des zuvor genutzten Kupfer-Tons. */
	/* Ellipse deutlich höher als die Bild-Ecke darüber (420px Desktop /
	   220px Mobile), sonst frisst das Bild den sichtbaren Teil des
	   Glows fast komplett auf, bevor der Textbereich überhaupt beginnt. */
	background: radial-gradient(ellipse 1100px 1400px at 100% 0%, var(--color-rosso-vivo) 0%, var(--color-rosso-vivo) 18%, var(--color-carbony-black) 55%, var(--color-pure-black) 100%);
	color: var(--surface-canvas-white);
}

.career-banner__media {
	position: relative;
}

.career-banner__image {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	/* Motiv (Kopf/Tablet) sitzt im oberen Bilddrittel – bei der
	   niedrigen Banner-Höhe sonst würde ein zentrierter Crop nur den
	   Rumpf zeigen. */
	object-position: center 22%;
}

@media (max-width: 700px) {
	.career-banner__image {
		height: 220px;
	}
}

.career-banner__image--wrap {
	/* Van sitzt mittig im Quellbild (kein Kopf-/Tablet-Motiv wie beim
	   Mechatroniker-Foto), daher zentrierter statt oben ausgerichteter Crop. */
	object-position: center 55%;
}

.career-banner__image--fleet {
	/* Fahrzeuge sitzen im unteren Bilddrittel, oben viel Himmel –
	   Crop etwas tiefer ansetzen, damit die Fahrzeuge nicht wegfallen. */
	object-position: center 65%;
}

.career-banner__content {
	max-width: 600px;
	padding: var(--spacing-64) var(--spacing-24);
}

@media (min-width: 1200px) {
	/* Auf breiten Desktop-Viewports bricht die Headline in der
	   600px-Spalte in 4 kurze Zeilen um ("5 OFFENE / STELLEN IN /
	   WERKSTATT UND / SERVICE"); eine breitere Spalte lässt sie in
	   2-3 ausgewogenere Zeilen umbrechen. Muss NACH den Basis-Regeln
	   stehen, sonst gewinnt die spätere unconditioned 600px-Regel bei
	   gleicher Spezifität unabhängig vom Viewport (Cascade-Reihenfolge). */
	.event-banner__content,
	.career-banner__content {
		max-width: 780px;
	}
}

.career-banner__headline {
	font-size: clamp(28px, 5vw, var(--text-display));
	margin-bottom: var(--spacing-24);
}

.career-banner__content p {
	margin: 0 0 var(--spacing-32);
}

.career-banner .btn-outline {
	border-color: var(--surface-canvas-white);
	color: var(--surface-canvas-white);
}

/* ---------------------------------------------------------------- */
/* Bewerbungsformular                                                  */
/* ---------------------------------------------------------------- */

.application-form {
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}

.application-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.application-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	border: none;
	padding: 0;
	margin: 0;
}

.application-form__field label,
.application-form__field legend {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	padding: 0;
}

.application-form__field input[type="text"],
.application-form__field input[type="tel"],
.application-form__field textarea {
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	padding: var(--spacing-16);
	border: 1px solid var(--color-ash-border);
	border-radius: 0;
	background: var(--surface-canvas-white);
}

.application-form__field textarea {
	resize: vertical;
	min-height: 120px;
}

.application-form__field input[type="file"] {
	font-family: var(--font-lambotype);
	font-size: var(--text-caption);
	padding: var(--spacing-16);
	border: 1px dashed var(--color-ash-border);
	background: var(--surface-canvas-white);
	color: var(--color-steel-mid);
}

.application-form__hint {
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
	text-transform: none;
	letter-spacing: normal;
}

.application-form__radio {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	margin-right: var(--spacing-24);
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-carbony-black);
	font-size: var(--text-body);
}

.application-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-16);
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
}

.application-form__consent input {
	margin-top: 4px;
	flex-shrink: 0;
}

.application-form__submit {
	align-self: flex-start;
}

.application-notice {
	padding: var(--spacing-16) var(--spacing-24);
	font-size: var(--text-body);
}

.application-notice--success {
	background: var(--surface-marble);
	color: var(--color-carbony-black);
}

.application-notice--error {
	background: var(--color-pure-black);
	color: var(--surface-canvas-white);
}

/* ---------------------------------------------------------------- */
/* Contact & Legal Content                                            */
/* ---------------------------------------------------------------- */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-48);
}

@media (max-width: 700px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-grid__item h2 {
	font-size: var(--text-heading-sm);
	margin-bottom: var(--spacing-16);
}

.contact-grid__item p {
	margin: 0 0 var(--spacing-24);
}

.finance-calculator {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--spacing-48);
	max-width: var(--page-max-width);
	margin: 0 auto var(--spacing-24);
	padding: var(--spacing-32);
	border: 1px solid var(--color-graphite-border);
}

@media (max-width: 800px) {
	.finance-calculator {
		grid-template-columns: 1fr;
	}
}

.finance-calculator__inputs {
	display: grid;
	gap: var(--spacing-16);
}

.finance-calculator__result {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	justify-content: center;
}

.finance-calculator__result-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--spacing-16);
	border: 1px solid var(--color-graphite-border);
}

.finance-calculator__result-item--highlight {
	border-color: var(--color-giallo-vivo);
}

.finance-calculator__result-label {
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
}

.finance-calculator__result-value {
	font-size: var(--text-heading-sm);
	font-weight: 700;
}

.legal-content h2 {
	font-size: var(--text-heading);
	margin-top: var(--spacing-48);
}

.legal-content h2:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Date Stamped Card                                                  */
/* ---------------------------------------------------------------- */

.date-card {
	background: var(--surface-canvas-white);
	padding: var(--card-padding);
}

/* ---------------------------------------------------------------- */
/* Angebot – Förderhinweis & Aktionen                                 */
/* ---------------------------------------------------------------- */

.funding-notice {
	background: var(--surface-marble);
	padding: var(--spacing-24);
	margin: 0 0 var(--spacing-32);
}

.funding-notice p {
	margin: 0 0 var(--spacing-8);
}

.funding-notice p:last-child {
	margin-bottom: 0;
	color: var(--color-steel-mid);
	font-size: var(--text-caption);
}

.entry-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-64);
}

/* ---------------------------------------------------------------- */
/* Fahrzeugsuche (Startseite)                                         */
/* ---------------------------------------------------------------- */

.vehicle-search {
	background: var(--surface-canvas-white);
	color: var(--color-carbony-black);
	padding: var(--spacing-80) var(--spacing-24);
}

.vehicle-search__grid {
	max-width: var(--page-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--spacing-64);
	align-items: center;
}

.vehicle-search__visual {
	overflow: hidden;
}

.vehicle-search__video {
	display: block;
	width: 100%;
	height: auto;
}

.vehicle-search__inner {
	max-width: 480px;
}

.vehicle-search__headline {
	/* Bewusst kleiner als die Display-Skala: in der schmalen 480px-
	   Spalte neben kurzem Begleittext wirkte die volle --text-display-
	   Größe auf Desktop überdimensioniert gegenüber dem restlichen
	   Inhalt der Sektion (Suchfeld, kurzer Hinweistext, ein Button). */
	font-size: clamp(24px, 3vw, var(--text-heading-lg));
	margin-bottom: var(--spacing-16);
}

.vehicle-search__inner > p {
	margin: 0 0 var(--spacing-40);
	color: var(--color-steel-mid);
}

.vehicle-search__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	align-items: flex-start;
}

.vehicle-search__field {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	text-align: left;
}

.vehicle-search__field label {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
}

.vehicle-search__field select {
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	padding: var(--spacing-16);
	border: 1px solid var(--color-graphite-border);
	border-radius: 0;
	background: var(--surface-canvas-white);
	color: var(--color-carbony-black);
	appearance: none;
}

.vehicle-search__count {
	margin: 0;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
}

@media (max-width: 900px) {
	.vehicle-search__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-40);
	}

	.vehicle-search__inner {
		max-width: 100%;
	}
}

.vehicle-search__submit {
	align-self: stretch;
	justify-content: center;
}

.archive-filter-notice {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin: 0 0 var(--spacing-32);
}

/* ---------------------------------------------------------------- */
/* Angebote-Layout: sticky Filter-Sidebar + Ergebnisse                */
/* (bleibt beim Scrollen stehen, wie gewünscht "die ganze Zeit"      */
/* sichtbar - statt wie zuvor oberhalb der Ergebnisse weggescrollt)  */
/* ---------------------------------------------------------------- */

.angebote-layout {
	display: block;
}

@media (min-width: 960px) {
	.angebote-layout {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: var(--spacing-56);
		align-items: start;
	}

	.angebote-layout__sidebar {
		position: sticky;
		/* Site-Header ist auf Unterseiten nicht fixiert (siehe
		   .site-header-Regeln) - der Abstand hier ist daher bewusst
		   knapp, nur Luft zum oberen Viewport-Rand beim Scrollen,
		   nicht als Ausgleich für eine fixierte Leiste gedacht. */
		top: var(--spacing-24);
		max-height: calc(100vh - var(--spacing-48));
		overflow-y: auto;
	}
}

/* ---------------------------------------------------------------- */
/* Fahrzeug-Filter (Angebote-Archiv, Kachel-UI nach bmw.de-Vorbild,   */
/* in unserer eckigen Formensprache statt BMWs runden Karten, als    */
/* sticky Sidebar statt einer Werkzeugleiste oberhalb der Ergebnisse)*/
/* ---------------------------------------------------------------- */

.vehicle-filter {
	margin-bottom: var(--spacing-40);
}

.vehicle-filter__title {
	font-size: var(--text-heading-sm);
	margin: 0 0 var(--spacing-32);
}

.vehicle-filter__group {
	border: none;
	padding: 0;
	margin: 0 0 var(--spacing-32);
	padding-bottom: var(--spacing-32);
	border-bottom: 1px solid var(--color-ash-border);
}

.vehicle-filter__group:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.vehicle-filter__legend {
	padding: 0;
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin-bottom: var(--spacing-16);
}

.vehicle-filter__tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-8);
}

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

.vehicle-filter__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	padding: var(--spacing-16) var(--spacing-8);
	border: 1px solid var(--color-ash-border);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vehicle-filter__tile:active {
	transform: scale(0.96);
}

/* Checkbox/Radio selbst unsichtbar, aber vorhanden und fokussierbar -
   die ganze Kachel ist das Label, :has() steuert den gewählten
   Zustand rein über CSS statt per JS-Klasse. */
.vehicle-filter__tile input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.vehicle-filter__tile span {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.vehicle-filter__icon {
	width: 32px;
	height: 32px;
	color: var(--color-carbony-black);
	transition: color 0.2s ease;
}

.vehicle-filter__tile:hover {
	border-color: var(--color-rosso-vivo);
}

.vehicle-filter__tile:has(input:checked) {
	border-color: var(--color-rosso-vivo);
	background: var(--color-rosso-vivo);
	color: var(--surface-canvas-white);
}

.vehicle-filter__tile:has(input:checked) .vehicle-filter__icon {
	color: var(--surface-canvas-white);
}

.vehicle-filter__tile:has(input:focus-visible) {
	outline: 2px solid var(--color-giallo-vivo);
	outline-offset: 2px;
}

.vehicle-filter__tile--text {
	flex-direction: row;
	padding: var(--spacing-16);
}

.vehicle-filter__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-16);
}

/* ---------------------------------------------------------------- */
/* Karosserie-Schnellauswahl (Startseite, unter "Aktuelle Angebote") */
/* Horizontale Kachelreihe in derselben Breite wie der Angebote-     */
/* Bildraster darüber - beide stecken in derselben .container.       */
/* ---------------------------------------------------------------- */

.category-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--element-gap);
}

.category-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	padding: var(--spacing-24) var(--spacing-8);
	border: 1px solid var(--color-ash-border);
	color: var(--color-carbony-black);
	text-decoration: none;
	text-align: center;
	transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-strip__item:hover,
.category-strip__item:focus-visible {
	border-color: var(--color-rosso-vivo);
	background: var(--color-rosso-vivo);
	color: var(--surface-canvas-white);
}

.category-strip__item span {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.category-strip__icon {
	width: 32px;
	height: 32px;
	transition: color 0.2s ease;
}

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

.site-footer {
	background: var(--surface-carbon-deep);
	color: var(--surface-canvas-white);
	padding: var(--spacing-64) var(--spacing-24);
}

.site-footer a {
	color: var(--surface-canvas-white);
}

/* "KI-generierte Inhalte"-Hinweis: erklärt das .ai-badge-Icon, das an
   den tatsächlich KI-gestützten Stellen der Seite auftaucht
   (Traumauto-Finder, Emo-Chatbot) - bewusst nicht bei der normalen
   Stichwortsuche im Header, die keine KI einsetzt. */
.ai-disclosure {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-16);
	padding-bottom: var(--spacing-32);
	margin-bottom: var(--spacing-48);
	border-bottom: 1px solid var(--color-graphite-border);
}

.ai-disclosure .ai-badge-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.ai-disclosure__text p {
	margin: 0;
	font-size: var(--text-caption);
	line-height: 1.6;
	color: var(--color-ash-border);
	max-width: 640px;
}

.ai-disclosure__title {
	font-size: var(--text-body) !important;
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--surface-canvas-white) !important;
	margin-bottom: var(--spacing-8) !important;
}

/* Kleines Inline-Badge für Stellen mit echtem KI-Einsatz (Chatbot-
   Kopfzeile, Traumauto-Finder-Badge) - der Abstand zum Text kommt vom
   gap der jeweiligen Flex-Eltern (.chat-widget__header-label,
   .traumauto-finder__badge), nicht von einer festen Richtung hier,
   da das Icon mal vor, mal nach dem Text steht. */
.ai-badge {
	display: inline-flex;
	vertical-align: middle;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--spacing-40);
	margin-bottom: var(--spacing-48);
}

.footer-column__title {
	font-size: var(--text-body);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0 0 var(--spacing-16);
	/* "Service- & Dienstleistungen" ist als einzige Spaltenüberschrift
	   lang genug, um in der Spaltenbreite zweizeilig umzubrechen - ohne
	   reservierte Höhe startete nur ihre Liste tiefer als die der
	   Nachbarspalten, die Reihe wirkte dadurch "schlecht getrennt"/
	   nicht bündig. Platz für 2 Zeilen, wie bereits bei
	   .story-grid__title gelöst. */
	min-height: calc(var(--text-body) * 1.4 * 2);
}

.footer-column__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.footer-column__list a {
	font-size: var(--text-caption);
	color: var(--color-ash-border);
}

.footer-column__list a:hover {
	color: var(--surface-canvas-white);
}

.footer-contact {
	margin-bottom: var(--spacing-32);
}

.footer-contact p {
	margin: 0;
	font-size: var(--text-body);
}

.footer-social {
	margin-bottom: var(--spacing-32);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	font-size: var(--text-body);
}

.footer-social svg {
	flex-shrink: 0;
}

.footer-navigation ul {
	list-style: none;
	margin: 0 0 var(--spacing-32);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-24);
}

.footer-navigation a {
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.footer-legal-note {
	font-size: var(--text-caption);
	line-height: 1.6;
	color: var(--color-ash-border);
	max-width: var(--page-max-width);
	margin: 0 0 var(--spacing-16);
}

.footer-legal-note--mini {
	opacity: 0.6;
	margin-bottom: var(--spacing-24);
}

.site-info {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-ash-border);
	border-top: 1px solid var(--color-graphite-border);
	padding-top: var(--spacing-24);
}

/* Größerer Tap-Bereich für den Mitarbeiter-Login-Link in der Fußzeile –
   auf Mobilgeräten sonst ein winziges Ziel direkt unter dem schwebenden
   Chat-Button. */
.site-info a {
	display: inline-block;
	padding: var(--spacing-8) 0;
}

@media (max-width: 700px) {
	/* Der Chat-Button schwebt fest unten rechts (siehe .chat-widget) und
	   überlappt sonst den Login-Link am Ende der Fußzeile, sodass er auf
	   dem Handy kaum noch anklickbar ist. Zusätzlicher Abstand hält den
	   Linkbereich frei vom Button, wenn ganz nach unten gescrollt wird. */
	.site-footer {
		padding-bottom: calc(var(--spacing-64) + 56px);
	}
}

/* ---------------------------------------------------------------- */
/* Chat-Widget (Auto Emotion Assistent)                               */
/* ---------------------------------------------------------------- */

.chat-widget {
	position: fixed;
	right: var(--spacing-24);
	bottom: var(--spacing-24);
	z-index: 200;
}

.chat-widget__toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--color-rosso-vivo);
	box-shadow: 0 6px 24px rgba(216, 0, 13, 0.45);
	cursor: pointer;
	position: relative;
}

.chat-widget__toggle-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 16px;
	border: 2px solid var(--surface-canvas-white);
	border-radius: 3px;
}

.chat-widget__toggle-icon::after {
	content: "";
	position: absolute;
	left: 8px;
	bottom: -7px;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid var(--surface-canvas-white);
	border-right: 2px solid var(--surface-canvas-white);
	transform: rotate(45deg);
}

.chat-widget__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: min(340px, calc(100vw - var(--spacing-48)));
	background: var(--color-pure-black);
	color: var(--surface-canvas-white);
	display: flex;
	flex-direction: column;
	max-height: 620px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.chat-widget__panel[data-state="closed"] {
	display: none;
}

.chat-widget__avatar {
	width: 100%;
	height: 240px;
	overflow: hidden;
	background: var(--surface-canvas-white);
	flex-shrink: 0;
}

.chat-widget__avatar-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.chat-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-16) var(--spacing-24);
	background: var(--surface-carbony);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.chat-widget__close {
	background: none;
	border: none;
	color: var(--surface-canvas-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.chat-widget__messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--spacing-16) var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	min-height: 160px;
}

.chat-widget__message {
	font-size: var(--text-caption);
	line-height: var(--leading-body);
	max-width: 85%;
}

.chat-widget__message--bot {
	color: var(--color-ash-border);
}

.chat-widget__message--user {
	align-self: flex-end;
	color: var(--surface-canvas-white);
}

.chat-widget__form {
	display: flex;
	border-top: 1px solid var(--color-graphite-border);
}

.chat-widget__form input {
	flex: 1;
	background: none;
	border: none;
	padding: var(--spacing-16);
	color: var(--surface-canvas-white);
	font-family: var(--font-lambotype);
	/* Mind. 16px, sonst zoomt iOS Safari beim Fokussieren automatisch
	   in die Seite hinein. */
	font-size: var(--text-body);
}

.chat-widget__form button {
	background: none;
	border: none;
	color: var(--color-rosso-vivo);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	font-size: var(--text-caption);
	padding: 0 var(--spacing-24);
	cursor: pointer;
}

.cookie-banner {
	position: fixed;
	left: var(--spacing-16);
	right: var(--spacing-16);
	bottom: var(--spacing-16);
	z-index: 60;
	max-width: 640px;
	margin: 0 auto;
	background: var(--surface-carbon-deep);
	border: 1px solid var(--color-graphite-border);
	padding: var(--spacing-24);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	align-items: center;
	justify-content: space-between;
}

.cookie-banner[data-state="hidden"] {
	display: none;
}

.cookie-banner__text {
	flex: 1 1 280px;
	color: var(--surface-canvas-white);
	font-size: var(--text-caption);
	line-height: 1.5;
	margin: 0;
}

.cookie-banner__text a {
	color: var(--color-rosso-vivo);
	text-decoration: underline;
}

.cookie-banner__actions {
	display: flex;
	gap: var(--spacing-8);
	flex-shrink: 0;
}

.cookie-banner__button {
	border: 1px solid var(--color-graphite-border);
	background: none;
	color: var(--surface-canvas-white);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	font-size: var(--text-caption);
	padding: var(--spacing-8) var(--spacing-16);
	cursor: pointer;
	white-space: nowrap;
}

.cookie-banner__button--all {
	background: var(--color-rosso-vivo);
	border-color: var(--color-rosso-vivo);
}

/* ---------------------------------------------------------------- */
/* Feedback-Popup                                                     */
/* ---------------------------------------------------------------- */

.feedback-popup {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-24);
	background: rgba(0, 0, 0, 0.6);
}

.feedback-popup[data-state="hidden"] {
	display: none;
}

.feedback-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - var(--spacing-48));
	overflow-y: auto;
	background: var(--surface-carbon-deep);
	border: 1px solid var(--color-graphite-border);
	color: var(--surface-canvas-white);
	padding: var(--spacing-40) var(--spacing-32);
}

.feedback-popup__close {
	position: absolute;
	top: var(--spacing-16);
	right: var(--spacing-16);
	background: none;
	border: none;
	color: var(--surface-canvas-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: var(--spacing-8);
}

.feedback-popup__title {
	font-size: var(--text-heading-sm);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0 0 var(--spacing-16);
	padding-right: var(--spacing-32);
}

.feedback-popup__intro {
	font-size: var(--text-caption);
	color: var(--color-ash-border);
	margin: 0 0 var(--spacing-24);
}

.feedback-popup__error {
	font-size: var(--text-caption);
	color: var(--color-rosso-vivo);
	margin: 0 0 var(--spacing-16);
}

.feedback-popup__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

.feedback-popup__form textarea,
.feedback-popup__form input[type="email"] {
	width: 100%;
	background: var(--surface-carbony);
	border: 1px solid var(--color-graphite-border);
	color: var(--surface-canvas-white);
	padding: var(--spacing-12) var(--spacing-16);
	font-family: inherit;
	font-size: var(--text-body);
	resize: vertical;
}

.feedback-popup__honeypot {
	position: absolute;
	left: -9999px;
}

.feedback-popup__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-8);
	font-size: var(--text-caption);
	color: var(--color-ash-border);
}

.feedback-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
}

/* ---------------------------------------------------------------- */
/* Newsletter-Anmeldung (Footer)                                      */
/* ---------------------------------------------------------------- */

.newsletter-signup {
	padding: var(--spacing-32);
	margin-bottom: var(--spacing-48);
	background: var(--surface-carbony);
	border: 1px solid var(--color-graphite-border);
}

.newsletter-signup__text {
	font-size: var(--text-caption);
	color: var(--color-ash-border);
	margin: 0 0 var(--spacing-24);
	max-width: 480px;
}

.newsletter-signup__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

.newsletter-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
}

.newsletter-signup__row input[type="email"] {
	flex: 1 1 260px;
	background: var(--surface-carbon-deep);
	border: 1px solid var(--color-graphite-border);
	color: var(--surface-canvas-white);
	padding: var(--spacing-12) var(--spacing-16);
	font-family: inherit;
	font-size: var(--text-body);
}

.newsletter-signup__honeypot {
	position: absolute;
	left: -9999px;
}

.newsletter-signup__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-8);
	font-size: var(--text-caption);
	color: var(--color-ash-border);
	max-width: 560px;
}

.newsletter-signup__consent a {
	color: var(--color-ash-border);
	text-decoration: underline;
}

.newsletter-signup__notice {
	font-size: var(--text-caption);
	color: var(--surface-canvas-white);
	margin: 0;
}

.newsletter-signup__notice--error {
	color: var(--color-rosso-vivo);
}

.finance-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-64);
	/* "start" statt "center": die zwei Service-Teaser-Karten rechts
	   sind zusammen niedriger als das 420px hohe Foto links - bei
	   center-Ausrichtung hing das Foto dadurch oben UND unten über die
	   Karten hinaus ("nicht bündig"), start richtet beide oben aus. */
	align-items: start;
}

.finance-section__grid > * {
	min-width: 0;
}

.finance-section__image {
	width: 100%;
	height: 420px;
	object-fit: cover;
}

@media (max-width: 900px) {
	.finance-section__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-32);
	}

	.finance-section__image {
		height: 280px;
	}
}

.service-teaser-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--spacing-24);
}

.service-teaser-grid > * {
	min-width: 0;
}

.service-teaser {
	border: 1px solid var(--color-graphite-border);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.service-teaser:hover {
	border-color: var(--color-rosso-vivo);
	transform: translateY(-4px);
}

.service-teaser__title {
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Content-Header-Bild (innerhalb einzelner Seiten, z.B. Karriere)   */
/* ---------------------------------------------------------------- */

.content-header-image {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	overflow: hidden;
	transition: transform 0.4s ease;
}

.content-header-image:hover {
	transform: scale(1.02);
}

/* ---------------------------------------------------------------- */
/* Foto-Galerie (echte Standort-/Showroom-Fotos in Seiteninhalten)   */
/* ---------------------------------------------------------------- */

.photo-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-24);
}

.photo-gallery > * {
	min-width: 0;
}

.photo-gallery img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.photo-gallery img:hover {
	transform: scale(1.02);
}

.photo-gallery figcaption {
	margin-top: var(--spacing-8);
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
}

/* Variante für Hersteller-Produktfotos (Studioaufnahme, weißer
   Hintergrund): Fahrzeug muss immer vollständig sichtbar bleiben,
   statt wie bei Standort-Fotos beschnitten zu werden. */
.photo-gallery--products img {
	height: 220px;
	object-fit: contain;
	background: var(--surface-canvas-white);
	padding: var(--spacing-16);
	border: 1px solid var(--color-graphite-border);
}

@media (max-width: 700px) {
	.content-header-image {
		height: 220px;
	}
}

/* Modell-Kacheln (Marken-Archiv): Klick auf eine Kachel klappt
   Kurzbeschreibung, Eckdaten und eine Kontakt-CTA direkt darunter
   auf – nativ per <details>/<summary>, ganz ohne eigenes JS. */
.model-card {
	border: 1px solid var(--color-graphite-border);
	border-radius: var(--radius-images);
	overflow: hidden;
}

.model-card__summary {
	cursor: pointer;
	list-style: none;
}

.model-card__summary::-webkit-details-marker {
	display: none;
}

.model-card__summary figure {
	margin: 0;
}

.model-card__summary figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
	padding: 0 var(--spacing-16) var(--spacing-16);
}

.model-card__toggle {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.model-card[open] .model-card__toggle {
	transform: rotate(-135deg);
}

.model-card__details {
	padding: 0 var(--spacing-16) var(--spacing-16);
	border-top: 1px solid var(--color-graphite-border);
	padding-top: var(--spacing-16);
}

.model-card__details p {
	font-size: var(--text-body);
	margin: 0 0 var(--spacing-8);
}

.model-card__specs {
	list-style: none;
	margin: 0 0 var(--spacing-16);
	padding: 0;
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
}

.model-card__specs li {
	padding: var(--spacing-8) 0;
	border-top: 1px solid var(--color-graphite-border);
}

.model-card__specs li:first-child {
	border-top: none;
}

.model-card__cta {
	width: 100%;
	justify-content: center;
}

.section-heading__hint {
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
	margin: 0;
}

/* Konfigurator innerhalb der aufgeklappten Modellkachel. */
.configurator {
	margin-top: var(--spacing-16);
	padding-top: var(--spacing-16);
	border-top: 1px solid var(--color-graphite-border);
}

.configurator__group {
	margin: 0 0 var(--spacing-16);
	border: none;
	padding: 0;
}

.configurator__group legend,
.configurator__group > label {
	display: block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin-bottom: var(--spacing-8);
	padding: 0;
}

.configurator__colors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

.color-chip {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	cursor: pointer;
	padding: var(--spacing-8);
	border: 1px solid var(--color-graphite-border);
	border-radius: var(--radius-buttons);
	font-size: var(--text-caption);
}

.color-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.color-chip:has(input:checked) {
	border-color: currentColor;
	font-weight: 600;
}

.color-chip:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.color-chip__swatch {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--color-graphite-border);
	flex-shrink: 0;
}

.configurator__select {
	width: 100%;
	font-size: var(--text-body);
	padding: var(--spacing-8);
	border: 1px solid var(--color-graphite-border);
	border-radius: var(--radius-buttons);
	background: var(--surface-canvas-white);
}

.configurator__summary {
	font-size: var(--text-caption);
	margin: 0 0 var(--spacing-16);
}

.configurator__summary-text {
	font-weight: 600;
}

.configurator__cta {
	width: 100%;
	justify-content: center;
}

.model-card__disclaimer {
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
	max-width: var(--page-max-width);
	margin: var(--spacing-16) 0 0;
}

.job-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-24);
}

.job-card-grid > * {
	min-width: 0;
}

.job-card {
	border: 1px solid var(--color-graphite-border);
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.job-card:hover {
	border-color: var(--color-rosso-vivo);
	transform: translateY(-4px);
}

.job-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.job-card__body {
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	flex-grow: 1;
}

.job-card__title {
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0;
	font-size: var(--text-heading-sm);
}

.job-card__meta {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Video-Platzhalter (z.B. für ein noch zu drehendes Team-Video auf  */
/* der Karriere-Übersicht) – bewusst als Platzhalter erkennbar,      */
/* kein Fake-Standbild, ersetzt sobald das echte Video vorliegt.     */
/* ---------------------------------------------------------------- */

.video-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-16);
	aspect-ratio: 16 / 9;
	background: var(--color-carbony-black);
	border: 1px solid var(--color-graphite-border);
	text-align: center;
	padding: var(--spacing-24);
}

.video-placeholder__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 2px solid var(--color-giallo-vivo);
	border-radius: 50%;
	flex-shrink: 0;
}

.video-placeholder__play svg {
	width: 22px;
	height: 22px;
	fill: var(--color-giallo-vivo);
	margin-left: 3px;
}

.video-placeholder__title {
	color: var(--surface-canvas-white);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0;
}

.video-placeholder__hint {
	color: var(--color-steel-mid);
	font-size: var(--text-caption);
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Fact-Strip (konkrete Arbeitgeber-Zahlen, z.B. auf der Karriere-   */
/* Übersicht, direkt unter dem Intro-Text)                          */
/* ---------------------------------------------------------------- */

.fact-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--spacing-24);
	border-top: 1px solid var(--color-graphite-border);
	border-bottom: 1px solid var(--color-graphite-border);
	padding: var(--spacing-24) 0;
}

.fact-strip__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.fact-strip__value {
	font-size: var(--text-heading-sm);
	font-weight: 700;
	color: var(--color-giallo-vivo);
}

.fact-strip__label {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
}

/* ---------------------------------------------------------------- */
/* Bewerbungsprozess als nummerierte Schritte                       */
/* ---------------------------------------------------------------- */

.process-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-24);
	list-style: none;
	margin: 0;
	padding: 0;
}

.process-steps__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.process-steps__number {
	font-size: var(--text-heading-sm);
	font-weight: 700;
	color: var(--color-rosso-vivo);
}

.process-steps__title {
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* WooCommerce (Shop, Warenkorb, Kasse) – Anbindung an das           */
/* bestehende Design-System statt des generischen WC-Stylesheets     */
/* (siehe inc/woocommerce.php, welches Letzteres abschaltet).        */
/* ---------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--spacing-24);
	list-style: none;
	margin: 0 0 var(--spacing-40);
	padding: 0;
}

.woocommerce ul.products > li.product {
	min-width: 0;
	border: 1px solid var(--color-graphite-border);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--spacing-8);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	font-size: var(--text-heading-sm);
	margin: 0;
}

.woocommerce ul.products li.product .price {
	font-weight: 700;
	color: var(--color-rosso-vivo);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-weight: 700;
	color: var(--color-rosso-vivo);
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .stock,
.woocommerce p.stock {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
}

.woocommerce p.stock.out-of-stock {
	color: var(--color-rosso-vivo);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-16);
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	border-radius: var(--radius-buttons);
	padding: 16px 24px;
	background:
		radial-gradient(120% 150% at 28% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, #ff3b2c 0%, var(--color-rosso-vivo) 48%, var(--color-rosso-ombra) 100%);
	box-shadow: 0 6px 24px rgba(216, 0, 13, 0.45);
	color: var(--surface-canvas-white);
	border: none;
	transition: box-shadow 0.2s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	box-shadow: 0 6px 32px rgba(216, 0, 13, 0.65);
	color: var(--surface-canvas-white);
}

.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce a.button.disabled {
	opacity: 0.5;
	box-shadow: none;
	cursor: not-allowed;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-24);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 1px solid var(--color-graphite-border);
	padding: var(--spacing-16);
	text-align: left;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	padding: var(--spacing-16);
	border: 1px solid var(--color-ash-border);
	border-radius: 0;
	background: var(--surface-canvas-white);
}

.woocommerce form .form-row label {
	display: block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-steel-mid);
	margin-bottom: var(--spacing-8);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-error {
	list-style: none;
	margin: 0 0 var(--spacing-24);
	padding: var(--spacing-16) var(--spacing-24);
	border: 1px solid var(--color-graphite-border);
	font-size: var(--text-caption);
}

.woocommerce-error {
	border-color: var(--color-rosso-vivo);
	color: var(--color-rosso-vivo);
}

/* ---------------------------------------------------------------- */
/* Traumauto-Finder (Startseite, über der Fahrzeugsuche)              */
/* ---------------------------------------------------------------- */

/* Als "Störer" angelegt, aber im selben dunklen Rot-Glow wie
   .career-banner/.event-banner ("5 offene Stellen") statt eines
   hellen, vollflächigen Rots - bleibt damit konsistent zum Rest der
   Dark-Theater-Optik und wirkt trotzdem durch den Glow auffällig. */
.traumauto-finder {
	background: radial-gradient(ellipse 1100px 1400px at 100% 0%, var(--color-rosso-vivo) 0%, var(--color-rosso-vivo) 18%, var(--color-carbony-black) 55%, var(--color-pure-black) 100%);
	color: var(--surface-canvas-white);
	padding: var(--spacing-64) var(--spacing-24);
}

.traumauto-finder__header {
	max-width: 720px;
	margin: 0 auto var(--spacing-40);
	text-align: center;
}

.traumauto-finder__badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--spacing-16);
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.traumauto-finder__title {
	font-size: clamp(28px, 5vw, var(--text-display));
	line-height: 1.15;
	margin-bottom: var(--spacing-16);
	text-wrap: balance;
}

.traumauto-finder__lede {
	margin: 0;
	font-size: var(--text-subheading);
	color: rgba(255, 255, 255, 0.92);
}

.traumauto-finder__progress {
	display: flex;
	justify-content: center;
	gap: var(--spacing-8);
	margin-bottom: var(--spacing-32);
}

.traumauto-finder__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: background-color 0.25s ease;
}

.traumauto-finder__dot.is-active {
	background: var(--surface-canvas-white);
}

.traumauto-finder__panel {
	max-width: 880px;
	margin: 0 auto;
}

.traumauto-finder__question {
	text-align: center;
	font-size: var(--text-heading-sm);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	margin-bottom: var(--spacing-24);
}

.traumauto-finder__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-24);
}

/* Gleiche Glas-Optik wie .hero-stage__cta-ghost: hellt sich beim
   Hover zum Bremslicht-Rot (.btn-giallo) auf statt zu Weiß, passend
   zum jetzt dunklen Sektionshintergrund. */
.traumauto-finder__option {
	padding: var(--spacing-24) var(--spacing-16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-buttons);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--surface-canvas-white);
	font-family: var(--font-lambotype);
	font-size: var(--text-body);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.traumauto-finder__option:hover {
	background:
		radial-gradient(120% 150% at 28% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, #ff3b2c 0%, var(--color-rosso-vivo) 48%, var(--color-rosso-ombra) 100%);
	border-color: var(--color-rosso-vivo);
	box-shadow: 0 6px 24px rgba(216, 0, 13, 0.45);
	color: var(--surface-canvas-white);
	transform: translateY(-2px);
}

.traumauto-finder__back {
	display: block;
	margin: 0 auto;
	background: none;
	border: none;
	color: var(--surface-canvas-white);
	text-decoration: underline;
	font-family: var(--font-lambotype);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	cursor: pointer;
}

.traumauto-finder__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-16);
	font-size: var(--text-subheading);
}

.traumauto-finder__spinner {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--surface-canvas-white);
	border-radius: 50%;
	animation: traumauto-finder-spin 0.8s linear infinite;
}

@keyframes traumauto-finder-spin {
	to {
		transform: rotate(360deg);
	}
}

.traumauto-finder__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-24);
}

.traumauto-finder__card {
	display: flex;
	flex-direction: column;
	background: var(--surface-canvas-white);
	color: var(--color-carbony-black);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.traumauto-finder__card:hover {
	transform: translateY(-4px);
}

.traumauto-finder__card-image {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.traumauto-finder__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--spacing-16);
}

.traumauto-finder__card-brand {
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
	color: var(--color-rosso-vivo);
}

.traumauto-finder__card-title {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.0230em;
}

.traumauto-finder__card-reason {
	font-size: var(--text-caption);
	color: var(--color-steel-mid);
	line-height: var(--leading-body);
}

.traumauto-finder__notice,
.traumauto-finder__error {
	text-align: center;
	font-size: var(--text-body);
	margin: 0 0 var(--spacing-24);
}

.traumauto-finder__error a {
	color: var(--surface-canvas-white);
	text-decoration: underline;
}

.traumauto-finder .traumauto-finder__restart {
	display: block;
	margin: 0 auto;
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--surface-canvas-white);
}

.traumauto-finder .traumauto-finder__restart:hover {
	border-color: var(--surface-canvas-white);
	background: rgba(255, 255, 255, 0.12);
}