/* ==========================================================================
   AutoHoss — Design-System v2 (HELL)
   Weiß / Ink / Gold — professionelles Autohaus, groß und kräftig
   ========================================================================== */

/* Barlow — selbst gehostet (DSGVO). Signage-Herkunft = Automotive-DNA. */
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-v13-latin_latin-ext-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-v13-latin_latin-ext-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-v13-latin_latin-ext-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-v13-latin_latin-ext-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-v13-latin_latin-ext-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-v13-latin_latin-ext-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Farben — helles Thema */
	--ah-white: #FFFFFF;
	--ah-surface: #F5F5F5;
	--ah-ink: #17181A;
	--ah-anthracite: #303237;
	--ah-text: #3C3E42;
	--ah-muted: #6B6E73;
	--ah-line: #E4E4E3;
	--ah-gold: #C9A227;
	--ah-gold-deep: #80690D; /* 5,3:1 auf Weiß, 4,9:1 auf Surface — AA-fest */
	--ah-gold-light: #E0BC4A;

	/* Statusfarben (Formular-Rückmeldung, Hinweise) — zentral statt hartkodiert */
	--ah-ok: #1E7A34;
	--ah-ok-bg: #E8F3E8;
	--ah-ok-ring: rgba(30, 122, 52, 0.16);
	--ah-err: #B3261E;
	--ah-err-bg: #FBEAEA;
	--ah-err-ring: rgba(179, 38, 30, 0.16);

	/* Typografie — groß und kräftig */
	--font-head: "Barlow", "Segoe UI", system-ui, sans-serif;
	--font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
	--fs-xs: 0.875rem;
	--fs-sm: 1rem;
	--fs-base: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: clamp(2rem, 4vw, 3rem);
	--fs-hero: clamp(3rem, 7vw, 5.5rem);

	/* Layout */
	--container: 1440px;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: clamp(4.5rem, 9vw, 8rem);
	--radius: 12px;
	--radius-sm: 8px;
	/*
	 * Zwei Ebenen statt einer (20.07.): eine harte 1-px-Kontaktkante plus ein
	 * weit gestreuter Schlagschatten. Vorher lag alles auf einem einzigen,
	 * 6 % deckenden Schatten — zusammen mit einem Kartenrand, der auf der
	 * grauen Fläche nur 1,17:1 erreicht, hatten die Karten praktisch keine
	 * Kante. Die Autos schienen frei auf der Seite zu schweben.
	 * Die Kontaktkante macht den Unterschied: Sie sagt „liegt auf", der
	 * gestreute Schatten sagt „wie weit darüber".
	 */
	--shadow-soft: 0 1px 2px rgba(23, 24, 26, 0.05), 0 8px 24px -12px rgba(23, 24, 26, 0.18);
	--shadow-lift: 0 2px 4px rgba(23, 24, 26, 0.06), 0 22px 48px -16px rgba(23, 24, 26, 0.28);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--transition: 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */

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

/*
 * `hidden` muss ausblenden. Immer.
 *
 * Der Browser setzt fuer das hidden-Attribut nur `display: none` mit der
 * schwaechsten Stufe. Jede eigene Regel mit `display: flex` oder `grid` auf
 * demselben Element schlaegt das — und dann steht ein Element sichtbar da,
 * obwohl im JavaScript `el.hidden = true` steht und die Abfrage `el.hidden`
 * brav `true` zurueckgibt. Man prueft das Attribut, sieht "stimmt", und der
 * Fehler steht trotzdem auf dem Bildschirm.
 *
 * Genau so passiert am 05.09.2026, vom Auftraggeber gemeldet: In der
 * Schnellansicht auf /zubehoer/ standen der Kaufknopf UND die Telefonflaeche
 * gleichzeitig da. Beide Kaesten haben `display: flex`.
 *
 * Es war nicht das erste Mal. Im Theme standen bereits zwei Einzelpflaster
 * gegen dasselbe Muster (`.suche-overlay[hidden]`, `.mega-sub-liste
 * li[hidden]`) — der Fehler wurde also schon zweimal getroffen und zweimal
 * nur oertlich behoben. Diese Regel ersetzt das Pflastern.
 *
 * Beim Nachsehen kam ein dritter Fall heraus, den niemand gemeldet hatte:
 * `.foto-liste` im Ankaufsformular hat `display: grid`, und main.js setzt
 * `liste.hidden = dateien.length === 0`. Eine leere Fotoliste blendete sich
 * also nie aus.
 *
 * ⚠️ Das ist die einzige Stelle im Theme, an der `!important` richtig ist.
 * Ueberall sonst loest man Konflikte ueber Spezifitaet. Hier nicht: `hidden`
 * ist eine Zusage des Markups an das Skript, keine Stilfrage, und sie darf
 * von keiner spaeteren Layoutregel aushebelbar sein. Ohne `!important` waere
 * diese Regel 0,1,0 und verloere gegen jedes `.klasse { display: flex }`,
 * das weiter unten in der Datei steht.
 */
[hidden] { display: none !important; }

/* scroll-padding-top ist kein Feinschliff, sondern behebt einen echten Fehler:
   Der Header ist sticky und ~121 px hoch. Ohne diesen Wert landet jedes
   Sprungziel UNTER ihm — der Skip-Link „Zum Inhalt springen" war damit
   wirkungslos, und nach jedem Pagination-Klick verschwand die Filterleiste
   hinter dem Header. 140 px = Headerhöhe plus etwas Luft. */
html { scroll-behavior: smooth; scroll-padding-top: 140px; }

/* --------------------------------------------------------------------------
   Fokus — eine Regel für die ganze Seite
   --------------------------------------------------------------------------
   Vorher setzten vier Stellen `outline: none` und ersetzten den Ring durch
   einen Rahmenwechsel. Nachgemessen erreichte der nur 2,42:1, WCAG 2.2
   (SC 1.4.11) verlangt 3:1 — wer mit der Tastatur navigiert, sah faktisch
   nicht, wo er steht. Dazu kam, dass Buttons, Tabs, Karten und die Pagination
   gar keine eigene Fokusregel hatten.

   `:focus-visible` statt `:focus`: Der Ring erscheint bei Tastaturbedienung,
   nicht beim Mausklick. Kein `border-radius` hier — Browser übernehmen den
   Radius des Elements von selbst, ein fester Wert würde Pillen-Buttons
   während des Fokus eckig machen.

   Ink auf Weiß ergibt ~17:1, Weiß auf den dunklen Flächen ebenso. */
:focus-visible {
	outline: 3px solid var(--ah-ink);
	outline-offset: 2px;
}
/* ⚠️ Diese Liste darf nur WIRKLICH dunkle Flächen enthalten. Sie stand kurz
   pauschal auf dem ganzen Hero — der ist aber zweigeteilt: links weißer
   Textbereich, rechts das Foto. Die Buttons bekamen dadurch einen weißen Ring
   auf weißem Grund, gemessen 1,00:1. Also gezielt nur das Bildfeld.
   (Die Slider-Pfeile standen hier ebenfalls — sie sind am 31.07. mit dem
   Karussell entfallen.) */
.site-header :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible,
.foto-flaeche :focus-visible,
.uebersicht-hero :focus-visible,
.bewertungen--foto :focus-visible,
.hero-card-img :focus-visible,
.lightbox :focus-visible {
	outline-color: var(--ah-white);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--ah-text);
	background: var(--ah-white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> ist nur ein Wrapper um WebP-Quelle + JPEG-Rückfall. display:contents
   nimmt den Wrapper aus dem Layout, damit das <img> sich weiter wie ein direktes
   Kind seines Containers verhält (wichtig für absolut positionierte Banner-/
   Kachelbilder — sonst belegte der Wrapper eine Grid-Zelle). */
picture { display: contents; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ah-anthracite);
	line-height: 1.1;
	margin: 0 0 var(--space-2);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* Inline-Fettungen (z. B. Zahlen) dezenter */
strong, b { font-weight: 600; }

p { margin: 0 0 var(--space-2); }

a { color: var(--ah-ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--ah-muted); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: var(--space-5); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ah-ink);
	color: var(--ah-white);
	padding: 0.6em 1.2em;
	z-index: 60;
	font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Buttons — groß, selbstbewusst
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 1em 2.2em;
	border-radius: var(--radius-sm);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-gold {
	position: relative;
	overflow: hidden;
	background: var(--ah-ink);
	color: var(--ah-white);
}
.btn-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 34%, rgba(224, 188, 74, 0.45) 50%, transparent 66%);
	transform: translateX(-120%);
	transition: transform 0.6s var(--ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn-gold::after { display: none; } }
.btn-gold:hover { background: var(--ah-anthracite); color: var(--ah-white); }

.btn-outline {
	background: transparent;
	color: var(--ah-ink);
	border-color: var(--ah-ink);
}
.btn-outline:hover { background: var(--ah-ink); color: var(--ah-white); }

/* --------------------------------------------------------------------------
   Header — weiß, zweizeilig (Topbar + Hauptleiste)
   -------------------------------------------------------------------------- */

/* Dunkle Kopfzone: Topbar (fast schwarz) + Header (schwarz). Body bleibt weiß. */

/* Die Marken-Leiste über der Navigation (12 Herstellerlogos) ist am 19.07.2026
   entfernt worden — Entscheidung des Auftraggebers nach der markenrechtlichen
   Prüfung. Fünf der gezeigten Marken hatten null Fahrzeuge im Bestand, womit die
   Rechtfertigung als Bestimmungsangabe (§23 MarkenG) für sie wegfiel und §5 UWG
   im Raum stand. Die Logo-Dateien liegen unter `brand/marken-logos/`, also
   außerhalb von `theme/` — sie werden nicht mehr ausgeliefert, wären aber
   zurückzuholen. Details in BILDHERKUNFT.md. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #141416;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.4); }

/*
 * Eingeloggt: Der Kopf klebt unter der Adminleiste, nicht darunter hinweg.
 *
 * `.site-header` klebt bei top:0, die Adminleiste von WordPress liegt fest
 * bei 0 bis 32 px darueber — die oberen 32 px des Kopfes waren fuer
 * angemeldete Benutzer verdeckt. Besuchern ist das nie aufgefallen, weil sie
 * die Leiste nicht haben. Unter 783 px scrollt die Leiste mit, dort waere ein
 * Versatz falsch.
 */
@media screen and (min-width: 783px) {
	body.admin-bar .site-header { top: 32px; }
}

.header-inner {
	max-width: none;
	padding: 0.9rem clamp(1.5rem, 3.5vw, 3.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1.5rem, 4vw, 4rem);
}

/* Logo */
/* flex: 0 0 auto ist hier kein Feinschliff, sondern eine Reparatur: Als
   Flex-Kind mit Standard-shrink war das Logo das einzige Element im Kopf,
   das nachgab — wurde es eng, quetschte der Browser es zusammen. Gemessen
   am 31.07. bei 1214 px Fensterbreite: 15 × 79 px statt 220 × 79 px, also
   ein senkrechter Strich. Ein Logo darf nie schrumpfen. */
.brand-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
/*
 * ⚠️ `.site-header` davor ist Pflicht, nicht Deko (05.09.2026).
 *
 * WooCommerce setzt in woocommerce-layout.css eine Regel auf die gesamte Seite:
 *   .woocommerce-page img { height: auto; max-width: 100% }
 * Das ist 0,1,1 und schlaegt ein blankes `.brand-img` mit 0,1,0 — auf JEDER
 * Shop-Seite, denn die Klasse haengt am <body>. Ergebnis gemessen am
 * 05.09.2026 auf /warenkorb/: Das Logo fiel auf seine natuerliche Groesse
 * zurueck, 431x155 px statt 84 px hoch. Der Kopf war dadurch 193 px statt
 * 122 px, und der Inhalt begann 128 px weiter unten als auf jeder anderen
 * Seite. Vom Auftraggeber gemeldet.
 *
 * `.site-header .brand-img` ist 0,2,0 und gewinnt aus eigener Kraft, nicht
 * ueber die Ladereihenfolge. Das ist der Unterschied, auf den es hier ankommt:
 * Eine Regel, die nur gewinnt, weil ihre Datei spaeter kommt, kippt beim
 * naechsten Plugin, das sich dazwischenschiebt.
 *
 * Nachgesehen: In allen WooCommerce-, Stripe- und PayPal-Stylesheets gibt es
 * genau zwei Regeln dieser Bauart, `.woocommerce img` und
 * `.woocommerce-page img`. Bilder sind also die einzige Stelle, an der
 * Shop-CSS ueberhaupt aus dem Shop herauslecken kann.
 */
.site-header .brand-img { height: clamp(58px, 6.5vw, 84px); width: auto; display: block; transform: translateY(12px); }

.brand-text {
	font-family: var(--font-head);
	font-size: 2.1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--ah-white);
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.brand-text:hover { color: var(--ah-white); }
.brand-gold { color: var(--ah-gold); }
.brand-sub {
	font-family: var(--font-cond);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 0.35rem;
	align-self: flex-end;
}

/* Navigation */
.site-nav .nav-list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.2vw, 2.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-item { position: relative; display: flex; align-items: center; gap: 0.25em; }

.nav-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.18rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	padding: 0.5em 0;
	position: relative;
	white-space: nowrap;
}
.nav-link:hover { color: var(--ah-white); }
.nav-item.ist-aktiv > .nav-link { color: var(--ah-white); font-weight: 600; }

/* Hover-Strich unter dem Menüpunkt */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15em;
	height: 2px;
	background: var(--ah-white);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--transition);
}
.nav-item:hover > .nav-link::after,
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item.ist-aktiv > .nav-link::after,
.nav-item.ist-offen > .nav-link::after { transform: scaleX(1); }

/* Mega-Panel */
.nav-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 300px;
	background: var(--ah-white);
	border-radius: var(--radius);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
	padding: 0.6rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 60;
}
.nav-panel::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.nav-panel::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 14px;
	height: 14px;
	background: var(--ah-white);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Mega-Variante: volle Breite unter dem Header, öffnet per KLICK */
.nav-item.has-children { position: static; }

/* Top-Level-Button sieht aus wie ein Nav-Link + Dreh-Pfeil */
.nav-link--toggle {
	background: none;
	border: none;
	cursor: pointer;
	gap: 0.45em;
}
.nav-chevron { flex: 0 0 auto; transition: transform 0.25s var(--ease); opacity: 0.6; }
.nav-link--toggle[aria-expanded="true"] { color: var(--ah-white); }
.nav-link--toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-link--toggle[aria-expanded="true"]::after { transform: scaleX(1); }

.nav-panel--mega {
	left: 0;
	right: 0;
	top: 100%;
	transform: translateY(12px);
	min-width: 0;
	width: 100%;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 0;
	box-shadow: 0 34px 70px rgba(0, 0, 0, 0.3);
}
.nav-panel--mega::after { display: none; }
.nav-panel--mega::before { display: none; }
/* Klick-Zustand statt Hover */
.nav-item:hover > .nav-panel--mega,
.nav-item:focus-within > .nav-panel--mega { opacity: 0; visibility: hidden; transform: translateY(12px); }
.nav-item.ist-offen > .nav-panel--mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Linke Kategorie-Tabs */
.mega-tabs { list-style: none; margin: 0; padding: 0; }
.mega-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.8rem 0.9rem;
	border-radius: var(--radius-sm);
	color: var(--ah-anthracite);
	font-family: inherit;
	transition: color var(--transition);
}
.mega-tab:hover { color: var(--ah-muted); }
.mega-tab.is-aktiv { color: var(--ah-ink); }
.mega-tab .nav-sub-pfeil { flex: 0 0 auto; color: var(--ah-gold-deep); opacity: 0; transition: opacity var(--transition); }
.mega-tab:hover .nav-sub-pfeil,
.mega-tab.is-aktiv .nav-sub-pfeil { opacity: 1; }

/* Rechte Unterpunkte: pro Tab eine Liste, Wechsel mit Einblend-Effekt */
/* .mega-sub ist seit 02.08. ein <details>. Auf dem Desktop führen die Tabs
   links durch die Gruppen — das Auf/Zu wird dort nicht gebraucht, deshalb ist
   die Zusammenfassung ausgeblendet und der Inhalt immer offen (`open` steht im
   Markup). Erst auf schmalen Schirmen wird daraus eine echte Klappe. */
.mega-sub { display: none; }
.mega-sub.is-aktiv { display: block; animation: mega-rein 0.28s var(--ease); }
.mega-sub > summary { list-style: none; }
.mega-sub > summary::-webkit-details-marker { display: none; }
@keyframes mega-rein {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.mega-sub-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 320px));
	gap: 0.25rem 2.5rem;
}
.mega-sub-liste a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.75rem;
	color: var(--ah-anthracite);
	font-weight: 500;
	transition: color var(--transition);
}
.mega-sub-liste a:hover { color: var(--ah-muted); }
.mega-sub-chevron { flex: 0 0 auto; color: var(--ah-gold-deep); transition: color var(--transition); }
.mega-sub-liste a:hover .mega-sub-chevron { color: var(--ah-muted); }

/* ---- Suchfeld im Menü ------------------------------------------------------
   Tippen statt scrollen: filtert alle Einträge des Menüs live. Steht im Markup
   auf `hidden`; main.js blendet es ein — ohne JS gäbe es sonst ein Feld, das
   nichts tut. */
.mega-suche { position: relative; margin-bottom: var(--space-2); }
.mega-suche-feld {
	width: 100%;
	max-width: 26rem;
	padding: 0.7rem 0.9rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ah-ink);
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition);
}
.mega-suche-feld:focus {
	outline: none;
	border-color: var(--ah-gold-deep);
}
.mega-suche-feld::placeholder { color: var(--ah-muted); }
.mega-suche-leer {
	margin: var(--space-2) 0 0;
	color: var(--ah-muted);
	font-size: var(--fs-sm);
}
/* Während gefiltert wird, sind alle Gruppen offen und die Kopfzeilen bleiben
   sichtbar — sonst wüsste man nicht, wozu ein Treffer gehört. */
.mega-extra.ist-gefiltert .mega-sub { display: block; }
.mega-extra.ist-gefiltert .mega-sub-liste li[hidden] { display: none; }

.mega-inner {
	max-width: var(--container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(300px, 380px) 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding: var(--space-4) clamp(1.5rem, 3.5vw, 3.5rem) var(--space-4);
}
.mega-liste { border-right: 1px solid var(--ah-line); padding-right: clamp(1rem, 2vw, 2.5rem); }
.mega-titel {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ah-muted);
	margin: 0 0 var(--space-2);
}

.mega-alle {
	display: inline-block;
	margin-top: var(--space-2);
	font-family: var(--font-cond);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--fs-sm);
	color: var(--ah-anthracite);
	transition: color var(--transition);
}
.mega-alle:hover { color: var(--ah-muted); }

/* Fußzeile der Mega-Extra: „Alle …" links, die PDF-Blöcke rechts daneben. */
.mega-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--ah-line);
}
.mega-fuss .mega-alle { margin-top: 0; }
.mega-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Schwarze, anklickbare PDF-Blöcke (Dokumente, Schadensmeldung). */
.mega-block {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 210px;
	padding: 0.7rem 1rem;
	background: var(--ah-ink);
	color: var(--ah-white);
	border-radius: var(--radius-sm);
	transition: background var(--transition), transform var(--transition);
}
.mega-block:hover { background: #000; color: var(--ah-white); transform: translateY(-1px); }
.mega-block-icon { flex: 0 0 auto; display: inline-flex; color: var(--ah-gold-light); }
.mega-block-text { display: flex; flex-direction: column; line-height: 1.15; }
.mega-block-label {
	font-family: var(--font-cond);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--fs-sm);
}
.mega-block-desc { font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); margin-top: 1px; }
/* Zustand ohne hinterlegtes PDF: sichtbar, aber nicht anklickbar. */
.mega-block--folgt { opacity: 0.7; cursor: default; }
.mega-block--folgt:hover { background: var(--ah-ink); transform: none; }
.mega-block--folgt .mega-block-desc { color: var(--ah-gold-light); }

/* Auf schmalen Screens Fuß stapeln, Blöcke volle Breite (im Menü-Akkordeon). */
@media (max-width: 640px) {
	.mega-fuss { flex-direction: column; align-items: stretch; }
	.mega-aktionen { width: 100%; }
	.mega-block { flex: 1 1 auto; min-width: 0; }
}

/* ⚠️ Muss dieselbe Grenze haben wie der Burger-Block weiter unten (1240 px).
   Stünde hier weiter 1100, gäbe es zwischen 1101 und 1240 px ein kaputtes
   Band: Burger-Menü sichtbar und Schublade offen, aber die Untermenüs noch
   als schwebende Desktop-Panels. */
@media (max-width: 1240px) {
	.nav-panel--mega {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		width: 100%;
		border-radius: var(--radius);
		box-shadow: none;
		margin: 0 0 var(--space-2);
	}
	.nav-item.ist-offen > .nav-panel--mega { display: block; }
	.mega-inner { grid-template-columns: 1fr; gap: 0; padding: var(--space-2); }
	/* Mobil: keine Tabs — die Gruppen werden zu aufklappbaren Zeilen.
	   Vorher standen ALLE Gruppen offen untereinander; allein „Reifen nach
	   Zoll" bringt neun Einträge mit, in Summe wurde das Menü seitenlang
	   (Auftraggeber 02.08.). Jetzt: zugeklappt, eine Zeile pro Gruppe. */
	.mega-liste { display: none; }
	.mega-sub { display: block; }
	.mega-sub.is-aktiv { animation: none; }
	.mega-sub + .mega-sub { margin-top: 0; border-top: 1px solid var(--ah-line); }

	/* Die Zusammenfassung wird zur Klappzeile — mindestens 44 px hoch, damit
	   sie als Tippziel taugt. */
	.mega-sub > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 44px;
		padding: 0.7rem 0.25rem;
		margin: 0;
		cursor: pointer;
		user-select: none;
	}
	/* Eigenes Zeichen statt des Browser-Dreiecks: dreht sich beim Öffnen. */
	.mega-sub > summary::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--ah-gold-deep);
		border-bottom: 2px solid var(--ah-gold-deep);
		transform: rotate(45deg);
		transition: transform 0.2s var(--ease);
		margin-right: 0.35rem;
	}
	.mega-sub[open] > summary::after { transform: rotate(-135deg); }

	/* ⚠️ FLEXBOX, NICHT GRID — der Unterschied ist hier entscheidend.
	   Ein Grid zwingt allen Einträgen dieselbe Spaltenbreite auf. Mit 96 px
	   passten zwar „R13" und „265", aber „Allwetterreifen" wurde abgeschnitten
	   und „Reifen, Felgen & Räder" brach über drei Zeilen um (gemessen am
	   02.08. am Handy). Flexbox lässt jeden Eintrag seine natürliche Breite
	   behalten und umbrechen, wenn die Zeile voll ist: Bei „Reifen nach Zoll"
	   stehen so fünf bis sechs nebeneinander, bei den Saison-Namen zwei —
	   ohne dass irgendwo etwas abgeschnitten wird. */
	.mega-sub-liste {
		display: flex;
		flex-wrap: wrap;
		gap: 0.1rem 0.4rem;
		padding-bottom: 0.6rem;
	}
	.mega-sub-liste li { flex: 0 1 auto; }
	.mega-sub-liste a {
		padding: 0.5rem 0.45rem;
		white-space: nowrap;   /* „Allwetterreifen" bleibt in einer Zeile */
	}
	.mega-alle { margin-top: var(--space-3); }
	.nav-dim { display: none; }
	.nav-link--toggle { width: 100%; justify-content: space-between; }
}

/* Seiten-Dim, solange ein Mega-Menü offen ist */
.nav-dim {
	position: fixed;
	inset: 0;
	z-index: 49;
	background: rgba(10, 10, 12, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.nav-dim.aktiv { opacity: 1; visibility: visible; }

.nav-sub { list-style: none; margin: 0; padding: 0; position: relative; }
.nav-sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--radius-sm);
	color: var(--ah-anthracite);
	transition: color var(--transition);
}
.nav-sub a:hover { color: var(--ah-muted); }
.nav-sub-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nav-sub-pfeil { flex: 0 0 auto; color: var(--ah-gold-deep); opacity: 0; transition: opacity var(--transition); }
.nav-sub a:hover .nav-sub-pfeil { opacity: 1; }
.nav-sub-label {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.005em;
}
.nav-sub-desc { display: block; font-size: var(--fs-sm); color: var(--ah-muted); margin-top: 0.1rem; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* Immer nur das Icon (12.08., Auftraggeber). Vorher wuchs der Knopf ab 1240 px
   zur Pille mit Nummer — und die eine sichtbare Nummer sah aus wie DIE Nummer,
   obwohl es zwei gibt. Beide stehen jetzt im Panel, der Knopf bleibt ein Kreis. */
.header-tel {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ah-white);
	width: 2.65rem; height: 2.65rem;
	border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
	transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.header-tel:hover { border-color: var(--ah-gold); background: rgba(255, 255, 255, 0.07); }
.header-tel svg { flex: 0 0 auto; transition: transform var(--transition); }
/* Beim Überfahren hebt sich das Hörer-Icon leicht an und dreht sich minimal —
   genug, damit der Knopf antwortet, zu wenig, um zu zappeln. */
.header-tel:hover svg { transform: translateY(-1px) rotate(-8deg); }
.header-tel-menue[open] > .header-tel {
	border-color: var(--ah-gold);
	background: rgba(255, 255, 255, 0.09);
}
.header-tel-menue[open] > .header-tel svg { transform: rotate(-8deg); }

/* ---- Warenkorb im Kopf (05.09.2026) -------------------------------------
   Nimmt Form und Maße vom Telefonknopf, damit die beiden Zeichen nebeneinander
   eine Reihe ergeben und nicht zwei verschiedene Ideen.

   Die Zahl ist WEISS, nicht gold. Gold bleibt dem Logo und den
   Bewertungssternen vorbehalten; ein goldenes Zählerblättchen wäre die dritte
   Stelle und würde die Regel aufweichen. Weiß auf Anthrazit trägt hier ohnehin
   weiter — es ist die kontraststärkste Kombination, die der Kopf hergibt. */
.header-warenkorb {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ah-white);
	width: 2.65rem; height: 2.65rem;
	border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
	transition: border-color var(--transition), background var(--transition);
}
.header-warenkorb:hover { border-color: var(--ah-gold); background: rgba(255, 255, 255, 0.07); }
.header-warenkorb svg { flex: 0 0 auto; }
.warenkorb-zahl {
	position: absolute;
	top: -0.25rem; right: -0.25rem;
	min-width: 1.15rem; height: 1.15rem;
	padding: 0 0.28rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ah-white);
	color: var(--ah-ink);
	border-radius: 100px;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 0.78rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Telefon-Menü: beide Nummern statt einer (12.08.).
   <details>/<summary> statt eigenem Menü — das Aufklappen macht der Browser,
   also funktioniert es auch ohne JavaScript und ist von Haus aus mit der
   Tastatur bedienbar. Dieselbe Fail-safe-Regel, an der schon der Fahrzeugfilter
   und die Anfrage-Fenster hingen. */
.header-tel-menue { position: relative; }
/* Das Dreieck, das Safari und Chrome vor jedes <summary> setzen, muss weg —
   der Knopf hat seinen eigenen Pfeil. ::-webkit-details-marker ist die
   Altlast-Schreibweise, list-style die aktuelle; beide nötig. */
.header-tel-menue > summary { list-style: none; cursor: pointer; }
.header-tel-menue > summary::-webkit-details-marker { display: none; }
/* --tel-x ist die waagerechte Verschiebung des Panels. Sie steckt in einer
   Variablen, weil die Öffnungs-Animation ebenfalls transform benutzt und sie
   sonst überschreiben würde: Auf schmalen Ansichten sitzt das Panel mittig
   unter dem Knopf (-50%), sonst rechtsbündig (0). */
.header-tel-panel {
	--tel-x: 0;
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	transform: translateX(var(--tel-x));
	z-index: 60;
	min-width: 15.5rem;
	display: flex;
	flex-direction: column;
	padding: 0.4rem;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(8, 9, 10, 0.22);
}
.header-tel-eintrag {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	/* 0.6rem oben/unten + zwei Zeilen ≈ 56 px hoch — deutlich über den 24 px,
	   die WCAG 2.5.8 als Mindestgröße für Tastflächen nennt. Im Header wird
	   getippt, nicht geklickt. */
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius-sm);
	color: var(--ah-anthracite);
}
.header-tel-eintrag {
	transition: background var(--transition), transform var(--transition);
}
.header-tel-eintrag:hover,
.header-tel-eintrag:focus-visible {
	background: var(--ah-surface);
	color: var(--ah-anthracite);
	/* Der überfahrene Eintrag rückt eine Spur nach rechts — so ist immer
	   eindeutig, welche der beiden Nummern gleich gewählt wird. */
	transform: translateX(2px);
}

/* Einblenden statt Aufploppen (12.08.).
   Läuft rein über CSS, also auch ohne JavaScript — <details> öffnet nativ, die
   Animation hängt sich nur dran. Die waagerechte Verschiebung kommt aus
   --tel-x, damit sie in beiden Ausrichtungen erhalten bleibt. */
@keyframes tel-panel-auf {
	from { opacity: 0; transform: translate(var(--tel-x), -0.5rem) scale(0.97); }
	to   { opacity: 1; transform: translate(var(--tel-x), 0) scale(1); }
}
/* ⚠️ Eigener Name statt `reverse` — sonst sieht der Browser dieselbe Animation
   und startet sie nicht neu (siehe den Kommentar im Skript). */
@keyframes tel-panel-zu {
	from { opacity: 1; transform: translate(var(--tel-x), 0) scale(1); }
	to   { opacity: 0; transform: translate(var(--tel-x), -0.35rem) scale(0.98); }
}
.header-tel-menue[open] .header-tel-panel {
	animation: tel-panel-auf 0.19s var(--ease) both;
	transform-origin: top center;
}
/* Beim Schließen legt das Skript diese Klasse an und wartet das Ende ab —
   ohne JavaScript verschwindet das Panel wie gehabt sofort. */
.header-tel-menue.ist-am-schliessen .header-tel-panel {
	animation: tel-panel-zu 0.13s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
	.header-tel-menue[open] .header-tel-panel,
	.header-tel-menue.ist-am-schliessen .header-tel-panel { animation: none; }
	.header-tel:hover svg,
	.header-tel-eintrag:hover { transform: none; }
}
.header-tel-rolle {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ah-muted);
}
.header-tel-wert {
	font-family: var(--font-cond);
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ah-anthracite);
}

/* Bestand + Suche rechts (à la Tiemeyer) */
.header-bestand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.4rem 0.5rem 0.4rem 0.9rem;
	color: var(--ah-white);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.header-bestand:hover { color: var(--ah-white); }
.bestand-info { display: inline-flex; align-items: center; gap: 0.5rem; text-align: right; }
.bestand-zahl {
	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ah-white);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bestand-text {
	font-size: 0.82rem;
	line-height: 1.15;
	color: rgba(255, 255, 255, 0.72);
	text-align: left;
}
/* Pfeil-Button: einziger klickbarer Teil, führt zum Bestand */
.bestand-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: var(--ah-white);
	color: var(--ah-ink);
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}
.bestand-link:hover { background: var(--ah-line); color: var(--ah-ink); transform: translateX(3px); }
.bestand-link svg { transition: transform var(--transition); }
.bestand-link[aria-expanded="true"] { background: var(--ah-line); transform: none; }
.bestand-link[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Auswahl-Panel: Kaufen | Mieten mit Verfügbarkeit */
.header-bestand { position: relative; }
.bestand-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 300px;
	background: var(--ah-white);
	border-radius: var(--radius);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
	padding: 0.6rem;
	z-index: 70;
	opacity: 0;
	visibility: hidden;
	/* --best-x ist die waagerechte Verschiebung. Sie steckt in einer Variablen,
	   weil das Ein- und Ausblenden ebenfalls transform benutzt und sie sonst
	   überschreiben würde — dieselbe Aufteilung wie beim Telefon-Panel. */
	--best-x: 0px;
	transform: translate(var(--best-x), -8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
}
.bestand-panel.ist-offen { opacity: 1; visibility: visible; transform: translate(var(--best-x), 0); }
.bestand-panel::after {
	content: "";
	position: absolute;
	top: -7px;
	right: 14px;
	width: 14px;
	height: 14px;
	background: var(--ah-white);
	transform: rotate(45deg);
	border-radius: 2px;
}
.bestand-wahl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 0.75rem 0.9rem;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}
.bestand-wahl:hover { background: var(--ah-surface); }
.bestand-wahl-text { display: flex; flex-direction: column; gap: 0.15rem; }
.bestand-wahl-label { font-weight: 600; color: var(--ah-anthracite); }
.bestand-wahl-desc { font-size: var(--fs-xs); color: var(--ah-muted); }
.bestand-wahl-zahl {
	font-family: var(--font-cond);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ah-anthracite);
	font-variant-numeric: tabular-nums;
	background: var(--ah-surface);
	border-radius: var(--radius-sm);
	padding: 0.15em 0.5em;
	min-width: 2.2em;
	text-align: center;
}
.bestand-wahl:hover .bestand-wahl-zahl { background: var(--ah-line); }

/* Such-Overlay unter dem Header */
.suche-overlay {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #141416;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
	z-index: 49;
	padding: var(--space-3) clamp(1.5rem, 4vw, 3.5rem);
	animation: sucheAuf 0.25s var(--ease);
}
.suche-overlay[hidden] { display: none; }
@keyframes sucheAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.suche-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.22);
	color: var(--ah-white);
	font-family: var(--font-body);
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	padding: 0.45em 0.2em;
}
.suche-input::placeholder { color: rgba(255, 255, 255, 0.4); }
/* Kein `outline: none` mehr — der Rahmenwechsel bleibt als zusätzlicher
   Hinweis, den Fokusring liefert jetzt die globale :focus-visible-Regel. */
.suche-input:focus { border-bottom-color: var(--ah-gold); }
.suche-close {
	flex: 0 0 auto;
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	font-size: 2rem;
	line-height: 1;
	width: 40px;
	height: 40px;
}
.suche-close:hover { color: var(--ah-white); }
@media (max-width: 560px) {
	.suche-submit { display: none; }
}

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

.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--ah-white);
	margin: 6px 0;
	transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* Überfahren: Der Knopf war als einziger im Kopf ohne Rückmeldung — Telefon und
   Bestand antworten beide (12.08.). Die Balken rücken minimal auseinander;
   im offenen Zustand steht das X still, sonst zuckte das Kreuz beim Zeigen. */
.nav-toggle:hover span:nth-child(1) { transform: translateY(-1px); }
.nav-toggle:hover span:nth-child(3) { transform: translateY(1px); }
.nav-toggle[aria-expanded="true"]:hover span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]:hover span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
	.nav-toggle:hover span { transform: none; }
}

/* --------------------------------------------------------------------------
   Hero — weißer Split-Slider: links Text (weiß), rechts Bild mit Verlauf
   -------------------------------------------------------------------------- */

/* Bühne = 1,6 Bildschirme. Das Panel darin klebt, während `--p` (0..1, von
   main.js) das Bild von der Karte ins Vollbild-Panorama wachsen lässt.
   `--p: 0` als Vorgabe: Ohne JS bleibt exakt der Ausgangszustand stehen. */
.hero-buehne {
	position: relative;
	width: 100%;
	background: var(--ah-white);
	--p: 0;
}

.hero-panel {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	align-items: stretch;
}

.hero-card-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--ah-white);
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 4vw, 4.5rem);
	z-index: 2;
}
.hero-eyebrow {
	font-family: var(--font-cond);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	/* siehe .kopf-eyebrow: 1rem war so groß wie der Fließtext darunter */
	font-size: 0.82rem;
	color: var(--ah-muted);
	margin-bottom: 0.8rem;
}
.hero-headline {
	font-family: var(--font-cond);
	font-size: clamp(2.6rem, 5vw, 4.8rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.005em;
	color: var(--ah-ink);
	margin-bottom: 1.2rem;
	text-wrap: balance;
}
.hero-sub {
	font-size: clamp(1.1rem, 1.4vw, 1.35rem);
	line-height: 1.6;
	color: var(--ah-text);
	max-width: 44ch;
	margin-bottom: 1.9rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.7rem; }
/* Hero-Text steigt gestaffelt ein (beim Laden) — nur Text-Panel, nicht Bild/Grid. */
.hero-panel .hero-eyebrow,
.hero-panel .hero-headline,
.hero-panel .hero-sub,
.hero-panel .hero-cta { animation: ah-hero-rise 0.6s var(--ease) both; }
.hero-panel .hero-headline { animation-delay: 0.06s; }
.hero-panel .hero-sub { animation-delay: 0.12s; }
.hero-panel .hero-cta { animation-delay: 0.18s; }
@keyframes ah-hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.hero-panel .hero-eyebrow,
	.hero-panel .hero-headline,
	.hero-panel .hero-sub,
	.hero-panel .hero-cta { animation: none; }
}
.hero-trust {
	display: flex;
	align-items: center;
	/* flex-wrap MUSS hier stehen. Ohne die Umbrucherlaubnis bleiben Sterne und
	   Text zwangsweise in einer Zeile; die Zeile braucht dann mindestens 336 px,
	   im 375-px-Bildschirm stehen nach dem Innenabstand aber nur 319 zur
	   Verfügung. Die Rasterspur wuchs dadurch auf 391 px und die ganze
	   Startseite ließ sich auf dem Handy 16 px seitlich schieben (gemessen
	   10.08.). Beim Raster reicht `min-width: 0` als Gegenmittel nicht — dann
	   liefe der Text nur unsichtbar über den Rand statt umzubrechen. */
	flex-wrap: wrap;
	gap: 0.35em 0.55em;
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ah-ink);
	margin: 0;
}

/* Bild als rechte Spalte — ganzes Bild (4:3) in natürlicher Höhe, keine Balken */
/* Sanfte Abdunklung, damit der Schriftzug darüber trägt (14.08.).
   Auf dem Handy steht „WILLKOMMEN" ohne jede Bewegung fest über dem Foto — und
   die linke Bildhälfte ist eine weiße Hauswand. Ohne Dimmung stand helle Schrift
   auf hellem Grund. 14 % sind wenig genug, dass das Foto Foto bleibt
   (Design-Prinzip 1), und genug, dass die Kontur greift.
   Auf dem Desktop überschreibt der Morph diesen Wert und beginnt bei 0 — dort
   trägt das unangetastete Foto zuerst die Headline. */
.hero-card-img { position: relative; overflow: hidden; background: #ebebea; filter: brightness(0.86); }
.hero-card-img img { display: block; width: 100%; height: auto; }
/* kleiner weicher Verlauf am Übergang weißes Panel -> Bild */
.hero-card-img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.45) 8%, rgba(255, 255, 255, 0) 24%);
}
/* Halbtransparenter Schriftzug über dem Hero-Bild (Tiemeyer-Stil) */
.hero-card-img[data-schriftzug]::after {
	content: attr(data-schriftzug);
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: clamp(2.4rem, 6.5vw, 5.5rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Rückfall: gefüllt. Greift nur, wenn der Browser keine Textkontur kann —
	   dann wäre `color: transparent` unten ein unsichtbares Wort. */
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
/* Kontur statt Fläche — auf allen Geräten gleich (14.08., Auftraggeber).
   Vorher war das die Desktop-Fassung, das Handy blieb bei gefüllten 40 % Weiß
   und wirkte über der hellen Hauswand blass. Jetzt derselbe Auftritt überall.
   @supports ist die Absicherung: -webkit-text-stroke ist zwar überall
   implementiert, aber kein Standard — ohne die Abfrage stünde bei einem
   Browser ohne Unterstützung gar nichts mehr da. */
@supports (-webkit-text-stroke: 1px white) {
	.hero-card-img[data-schriftzug]::after {
		color: transparent;
		-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
	}
}

.stars { color: var(--ah-gold); letter-spacing: 0.12em; font-size: 1.15em; }

/* ---- Aufbereitung: Innenraum-Dreiklang -------------------------------------
   Gesamtblick (quer, 3:2) → Material (hochkant, 2:3) → Detail (hochkant, 2:3).
   Seit 10.08. drei Bilder; vorher waren es zwei.

   ⚠️ Die Spaltenwerte sind AUSGERECHNET, nicht geschätzt. Damit alle Bilder
   gleich hoch enden, muss bei gemeinsamer Höhe h gelten: quer ist 1,5·h breit,
   jedes hochkante 0,667·h. Das Verhältnis ist also 1,5 : 0,667 : 0,667, gekürzt
   2,25 : 1 : 1 — daher `2.25fr 1fr 1fr`.
   Beim ersten Anlauf mit dem Paar hatte ich 1.35fr/1fr geschätzt: sah plausibel
   aus, ergab aber gemessene 335 px Höhenunterschied. Wer Bilder tauscht oder
   ergänzt, muss neu rechnen — ein hochkantes mehr heißt eine 1fr-Spalte mehr,
   ein queres mehr heißt 2.25fr mehr. */
.aufb-innen-kopf { max-width: 46rem; margin-bottom: var(--space-4); }
.aufb-innen-kopf h2 { margin-bottom: var(--space-2); }
.aufb-innen-paar {
	display: grid;
	/* Schmal: quer über die volle Breite, darunter die beiden hochkanten
	   nebeneinander. Drei Bilder untereinander wären auf dem Handy über
	   1.500 px Bildstrecke — so bleibt es bei rund einem Drittel davon. */
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	align-items: start;
}
.aufb-innen-paar > :first-child { grid-column: 1 / -1; }
.aufb-innen-bild { margin: 0; }
.aufb-innen-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
.aufb-innen-bild figcaption {
	margin-top: 0.7rem;
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	line-height: 1.5;
}
@media (min-width: 861px) {
	.aufb-innen-paar { grid-template-columns: 2.25fr 1fr 1fr; gap: var(--space-4); }
	/* Ab hier steht das quere Bild wieder in seiner eigenen Spalte, nicht mehr
	   über die volle Breite. */
	.aufb-innen-paar > :first-child { grid-column: auto; }
}

/* ---- Zahlung (Stripe / PayPal, Variante B: Buttons auf der Seite) ----------
   Der Preis steht bewusst UNMITTELBAR über den Buttons und nicht irgendwo
   sonst im Block: Die Preisangabenverordnung verlangt den Gesamtpreis inkl.
   USt in räumlicher Nähe zur Schaltfläche. Reihenfolge daher nicht tauschen. */
.zahlung-block {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--ah-line);
}
.zahlung-preis {
	font-family: var(--font-cond);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	color: var(--ah-ink);
	margin: 0 0 0.2rem;
	line-height: 1.1;
}
.zahlung-preis-zusatz {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ah-muted);
	margin-left: 0.4em;
}
.zahlung-hinweis {
	font-size: var(--fs-sm);
	color: var(--ah-text);
	margin: 0 0 var(--space-2);
	max-width: 52ch;
}
.zahlung-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.zahlung-weiter {
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	margin: var(--space-2) 0 0;
	max-width: 52ch;
}

/* ---- Der Morph: nur Desktop ------------------------------------------------
   Unter 861 px steht das Bild ohnehin über die volle Breite — es gäbe nichts
   zu vergrößern, nur Ruckelrisiko. Darum bleibt dort schlicht das Grid oben.

   Alle Werte hängen an EINER Variable `--p` (0..1). Das Panel klebt unter dem
   Seitenkopf (`--ah-kopf` misst main.js auf jeder Seite), sodass sich die zwei
   Sticky-Ebenen nicht überlagern. */
@media (min-width: 861px) {
	/* Zwei Bewegungen, mehr nicht (14.08.2026).
	   Vorher waren es vier Akte über 400vh Bühne — Foto kippt weg, „AutoHoss"
	   kommt als Buchstabenklötze aus der Tiefe, puffen auf, sammeln sich. Das
	   ist auf Wunsch des Auftraggebers raus (Begründung in front-page.php).

	   Übrig bleibt der kleine Umschwung, und die Bühne schrumpft entsprechend:
	   165vh statt 400vh. Bei 100vh Panelhöhe sind das rund 65vh Scrollweg —
	   genug, dass die Bewegung als Bewegung lesbar ist, zu wenig, um sich wie
	   eine Wegstrecke anzufühlen. Drei leere Akte hätten sonst als leeres
	   Scrollen dagestanden. */
	.hero-buehne {
		height: 165vh;
		/* Vollbild -> Karte. Läuft über die erste Hälfte des Wegs. */
		--a0: clamp(0, var(--p) / 0.52, 1);
		/* WILLKOMMEN kommt durch — und BLEIBT.
		   ⚠️ Vorher blendete es bei p 0.30 wieder aus: Es übergab an die
		   Klötze, zwei Schriftzüge übereinander wären Matsch gewesen. Ohne
		   Klötze gäbe es nichts zu übergeben — das Wort verschwände einfach,
		   und der Scrollweg endete auf einem leeren Foto. Also steht es. */
		--aw: clamp(0, (var(--p) - 0.34) / 0.30, 1);
	}

	.hero-panel {
		position: sticky;
		top: var(--ah-kopf, 100px);
		height: calc(100vh - var(--ah-kopf, 100px));
		display: block;          /* Kinder werden absolut gesetzt */
		overflow: hidden;
		/* Fluchtpunkt für die Foto-Bühne. Ohne perspective wäre jedes rotateY
		   eine flache Scherung statt echter Tiefe. */
		perspective: 1600px;
		perspective-origin: 50% 45%;
	}

	/* ==== AKT 0 — Vollbild-Kino ==============================================
	   Das Foto füllt sofort die ganze Fläche, die Schrift liegt weiß darauf
	   (unten links). Beim Scrollen schrumpft das Bild, sinkt nach unten weg
	   und blendet aus — die frei werdende Fläche ist die Bühne für die
	   Buchstaben-Choreografie (Etappe 2).

	   Bewusst WEISS statt Schwarz dahinter: Unser Design ist laut DESIGN.md
	   hell/Anthrazit. Eine dunkle Bühne wäre stimmungsvoll, würde aber den
	   Charakter der Seite verlassen.

	   `a0` (Fortschritt von Akt 0) wäre schöner als eigene Variable, steht
	   aber bewusst ausgeschrieben: verschachtelte Custom-Properties mit
	   clamp() sind in älteren Browsern unzuverlässig. */
	.hero-card-img {
		position: absolute;
		inset: 0;
		transform-origin: 50% 42%;
		/* Das Bild BLEIBT (ausdrücklicher Wunsch 31.07.): kein Ausblenden mehr.
		   Es schrumpft aus dem Vollbild zur Karte und kippt dann im Raum weg —
		   aus der Fläche wird eine Bühne, vor der die Klötze spielen.
		   Abgedunkelt und leicht entsättigt wird es nur so weit, dass die
		   weißen Klötze davor lesbar bleiben. */
		/* Nur noch Schrumpfen und Absinken. Das Kippen im Raum
		   (translateZ/rotateY/rotateX) hing an --kipp und diente allein dazu,
		   das Foto zur Bühne für die Klötze zu machen — ohne die gibt es
		   nichts, wovor es kippen müsste. */
		transform:
			scale(calc(1 - 0.2 * var(--a0)))
			translateY(calc(var(--a0) * 4vh));
		/* Dunkler + entsättigt + leicht kontrastärmer (Taste-Review 31.07.):
		   Bei brightness 0.5 blieben helle Himmelpartien Mittelton und fraßen
		   die anthraziten Klotzflanken. 0.42/0.5/0.92 macht das Foto zur
		   tonalen Bühne — sichtbar bleibt es (Kundenwunsch), Konkurrenz ist es
		   nicht mehr. Bewusst NICHT über --a4 zurückhellen: das Schlussbild
		   in Weiß/Gold braucht den dunklen Grund. */
		/* ⚠️ Abdunklung stark reduziert, aber NICHT weg (14.08., nach dem
		   ersten Blick aufs Ergebnis).
		   Vorher: brightness 0.42 / saturate 0.5 — das machte das Foto zur
		   tonalen Bühne für die weißen Klötze. Die habe ich entfernt, und mit
		   ihnen zuerst auch die Abdunklung. Im Screenshot war „WILLKOMMEN" dann
		   über der weißen Hauswand praktisch unsichtbar: eine 24-%-weiße Kontur
		   auf einer hellen Wand hat schlicht keinen Kontrast.
		   Jetzt dimmt das Foto nur so weit, wie das Wort heraufkommt (--aw),
		   und nur um 26 % statt 58 %. Am Anfang bleibt das Foto unangetastet —
		   dort trägt es die Headline, und Design-Prinzip 1 gilt weiter. */
		filter: brightness(calc(1 - 0.26 * var(--aw)));
		border-radius: calc(var(--a0) * 22px);
		/* Schatten an --a0 statt an --kipp: Er gehört zum Schrumpfen auf
		   Kartengröße, nicht zum weggefallenen Kippen. */
		box-shadow: 0 calc(var(--a0) * 26px) calc(var(--a0) * 60px) rgba(0, 0, 0, calc(var(--a0) * 0.28));
	}
	.hero-card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 58%;
	}

	/* Dunkler Verlauf — trägt die weiße Schrift über dem Foto. Zwei Achsen:
	   von unten (Hauptlast) und von links (fängt helle Himmel-/Hofpartien ab).
	   Ohne den steht weiße Schrift auf hellem Grau = unlesbar. */
	/* Mittiges Dunkelfeld für die zentrierte Schrift + Gewicht nach unten. */
	.hero-card-img::before {
		opacity: 1;
		background:
			radial-gradient(120% 85% at 50% 58%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 44%, transparent 74%),
			linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 32%, transparent 58%);
	}

	/* „WILLKOMMEN" als große Outline-Schrift oben — deutlich präsenter als
	   vorher, aber gefüllt wäre es Konkurrenz zur Headline.
	   ⚠️ KEINE neue Schriftart: Es sind nur Barlow + Barlow Condensed lokal
	   im Theme, und Google Fonts sind bewusst ausgeschlossen (DSGVO). Der
	   eigene Charakter kommt daher aus Kontur + Sperrung, nicht aus einem
	   neuen Font — für eine echte dritte Schrift bräuchten wir eine Datei
	   samt Lizenz zum Selbsthosten. */
	/* „WILLKOMMEN" — mittig HINTER der weißen Headline (tiefer, Kundenwunsch
	   31.07.), als feine Kontur mit eigenem 3D: perspective() im EIGENEN
	   transform, weil der Bild-Container overflow:hidden hat und preserve-3d
	   dort nicht greifen kann. Ruht leicht gekippt (7°), beim Scrollen kippt
	   es weiter nach hinten und sinkt in die Tiefe — wie eine Beschriftung
	   auf der Fahrbahn, über die man hinwegfährt.
	   Kontur 1,5px/0.24 statt 2px/0.42 (Taste-Review): mittig hinter der
	   Headline braucht es weniger Gewicht, sonst verklebt es mit ihr. Es
	   bleibt mit 0.35 Rest-Deckkraft hinter den Klötzen stehen — Tiefe statt
	   hartem Abschied. */
	.hero-card-img[data-schriftzug]::after {
		align-items: center;
		padding-top: 3vh;
		font-size: clamp(3rem, 13vw, 14rem);
		letter-spacing: 0.14em;
		/* Farbe und Kontur stehen zentral im @supports-Block weiter oben —
		   hier bleibt nur, was sich zum Grundzustand unterscheidet. */
		/* Feste leichte Neigung statt Tiefenzug (14.08.). Das rotateX/translateZ
		   war an --a1e gekoppelt und schickte das Wort synchron mit dem
		   Foto-Kipp nach hinten — eine Übergabe an die Klötze. Ohne die gibt es
		   keinen Empfänger, also bleibt es stehen. Die 5° Neigung bleiben: Sie
		   legen das Wort auf den Hof wie auf eine Fahrbahn. */
		transform: perspective(1200px) rotateX(5deg);
		/* Kommt mit --aw herauf und rückt dabei ein Stück nach vorn. */
		opacity: var(--aw);
		/* Reihenfolge unverändert (Auftraggeber 31.07.): Am Anfang GAR NICHT zu
		   sehen — dort gehört die Bühne dem Foto und der Headline. Erst wenn
		   der Text abgeblendet hat, kommt „WILLKOMMEN" durch.
		   ⚠️ Das Ausblenden ab p 0.30 ist am 14.08. entfallen. Es war der
		   Stabwechsel an die Buchstabenklötze — ohne die stünde am Ende des
		   Scrollwegs ein leeres Foto. Jetzt bleibt das Wort. */
	}

	/* Text mittig auf dem Foto — als Kino-Hero wirkt zentriert ruhiger und
	   hochwertiger als linksbündig in einer Ecke. */
	.hero-card-text {
		position: absolute;
		inset: 0;
		width: auto;
		max-width: min(62rem, 82vw);
		margin-inline: auto;
		align-items: center;
		text-align: center;
		background: none;
		padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(1rem, 3vw, 3rem);
		/* Blendet über den ersten Teil des Wegs ab und ist bei p 0.42 weg.
		   ⚠️ Der Wert hängt mit main.js zusammen: Dort schaltet `ist-verblasst`
		   bei demselben 0.42 die Klicks aus. Wer hier ändert, muss dort mit. */
		opacity: clamp(0, (0.42 - var(--p)) / 0.26, 1);
		transform: translateY(calc(var(--a0) * -6vh));
		isolation: isolate;   /* hält den Schleier unten zwischen Foto und Schrift */
	}

	/* Schleier NUR hinter dem Text (10.08.).
	   Vorher trug die Abdunklung des ganzen Fotos die Lesbarkeit allein. Pixel
	   für Pixel nachgemessen lag die weiße Schrift auf 43 % (Eyebrow) bzw. 52 %
	   (Fließtext) ihrer Fläche unter 4,5:1 — über der hellen Hauswand und dem
	   Himmel fiel sie bis auf 2:1. Der Mittelwert sah gut aus, weil die dunklen
	   Fahrzeugflächen ihn hochzogen.
	   Die Abdunklung des ganzen Bildes weiter aufzudrehen war der falsche Weg:
	   Für 4,5:1 über der Hauswand bräuchte es rund 75 % Schwarz, und dann ist
	   das Foto — laut Design-Prinzip 1 der Träger der Seite — hin.
	   Also ein Ellipsen-Schleier, der an den Text gebunden ist: Er sitzt im
	   Textkasten (max. 62 rem), läuft weich aus und lässt Hof, Fahnenreihe und
	   Firmenschild unangetastet hell. */
	.hero-card-text::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		/* 40 % senkrechter Radius, nicht 34 %: Bei 34 % lag der Eyebrow als
		   oberste Zeile schon im auslaufenden Rand des Schleiers und blieb bei
		   29 % seiner Fläche unter 4,5:1 (gemessen). */
		background: radial-gradient(46% 40% at 50% 50%,
			rgba(8, 9, 10, 0.74) 0%,
			rgba(8, 9, 10, 0.64) 50%,
			rgba(8, 9, 10, 0.28) 78%,
			rgba(8, 9, 10, 0) 100%);
	}
	.hero-panel .hero-sub { max-width: 46ch; margin-inline: auto; }
	.hero-panel .hero-cta,
	.hero-panel .hero-trust { justify-content: center; }

	/* Die Bewertungszeile bekommt eine eigene Plakette (10.08.).
	   Sie liegt tiefer als die Mitte des Schleiers und damit genau auf der
	   Fahrzeugreihe — der unruhigsten Stelle des Fotos. Gemessen fielen dort
	   20 % ihrer Fläche unter 4,5:1.
	   Das ist ausgerechnet die Zeile, die laut PRODUCT.md das stärkste Asset
	   des Betriebs trägt (5,0 bei 120 Rezensionen). Eine Plakette macht sie
	   unabhängig davon, was im Foto hinter ihr liegt — und liest sich als
	   bewusstes Siegel statt als Textzeile, die zufällig dort steht.
	   Nur ab 861 px: Darunter steht der Hero-Text auf weißem Grund, da gibt es
	   das Problem gar nicht, und die Zeile bricht dort auf drei Zeilen um. */
	.hero-panel .hero-trust {
		align-self: center;
		width: max-content;
		max-width: 100%;
		padding: 0.5rem 1.15rem;
		border-radius: 999px;
		background: rgba(8, 9, 10, 0.66);
		border: 1px solid rgba(255, 255, 255, 0.18);
	}
	/* Der Öffnungs-Chip erbt sonst fast-schwarze Schrift (#17181A) und war auf
	   dem dunklen Foto schlicht unsichtbar — gemessen am 31.07. */
	.hero-panel .offen-chip { color: var(--ah-white); }
	.hero-panel .hero-headline,
	.hero-panel .hero-trust { color: var(--ah-white); }
	.hero-panel .hero-sub { color: rgba(255, 255, 255, 0.9); }
	/* 0.92 statt 0.74 (10.08.): Gedimmtes Weiß auf einem Foto ist der falsche
	   Weg zur Zurückhaltung — es kostet Kontrast an der Stelle, an der ohnehin
	   am wenigsten übrig ist. Zurückhaltung macht hier die Größe (0.82 rem)
	   und die Laufweite, nicht die Deckkraft.

	   Dazu ein Schlagschatten. Der Eyebrow ist die oberste Zeile und sitzt
	   damit im auslaufenden Rand des Schleiers, über dem hellsten Teil des
	   Himmels. Den Schleier so weit aufzudrehen, dass auch dort 4,5:1 sicher
	   erreicht wird, hieße rund 80 % Schwarz über dem ganzen Textblock — das
	   wäre eine dunkle Platte auf dem Foto, kein Hero mehr.
	   Ein Schatten löst genau dieses Problem: Er hebt den Kontrast an der
	   Buchstabenkante an, wo er gebraucht wird, und lässt das Bild in Ruhe.
	   Bei 13 px Versalien ist er nicht zu sehen, nur zu merken. */
	.hero-panel .hero-eyebrow {
		color: rgba(255, 255, 255, 0.92);
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.45);
	}
	/* Der helle Umriss-Button steht jetzt auf Foto statt auf Weiß. */
	.hero-panel .btn-outline { color: var(--ah-white); border-color: rgba(255, 255, 255, 0.75); }
	.hero-panel .btn-outline:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--ah-white); }

	/* ⚠️ HIER STANDEN AKT 1–4 — 262 Zeilen Buchstaben-Choreografie, entfernt
	   am 14.08.2026 auf Wunsch des Auftraggebers.

	   Was wegfiel: .kino, .kino-wort, .kino-stapel mit dem Idle-Schweben,
	   .kino-b und .kino-l (die 14 gestapelten Ebenen je Buchstabe, echte Tiefe
	   statt Schlagschatten), die vier .kino-f in den Ecken samt Einflug-
	   richtungen, dazu die Zustandsklassen .schwebt und .felder-aktiv.

	   Der Hero macht jetzt genau eine Sache: Das Foto geht vom Vollbild zur
	   Karte, der Text blendet ab, „WILLKOMMEN" kommt durch und bleibt.

	   Die vier Eck-Links sind kein Verlust — Ankauf, Vermietung und
	   Aufbereitung stehen als Fotokacheln direkt unter dem Hero, „Kaufen" ist
	   der goldene Knopf im Hero selbst. Vor dem Entfernen nachgesehen. */
	.hero-buehne.ist-verblasst .hero-card-text { pointer-events: none; }
}

/* Bewegungsempfindliche Besucher bekommen das ruhige Grid-Layout zurück:
   Text links auf weiß, Bild rechts, nichts bewegt sich.
   ⚠️ Die Farben MÜSSEN hier mit zurückgesetzt werden. Im Kino-Hero ist die
   Schrift weiß (sie liegt auf dem Foto) — im Grid-Layout stünde sie sonst
   weiß auf weißem Panel, also unsichtbar. */
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
	.hero-buehne { height: auto; }
	.hero-panel {
		position: static;
		height: auto;
		display: grid;
		overflow: visible;
	}
	.hero-card-text {
		position: static;
		width: auto;
		transform: none;
		opacity: 1;
		background: var(--ah-white);
		padding: clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 4vw, 4.5rem);
	}
	.hero-panel .hero-headline,
	.hero-panel .hero-trust { color: var(--ah-ink); }
	.hero-panel .hero-sub { color: var(--ah-text); }
	.hero-panel .hero-eyebrow { color: var(--ah-muted); }
	.hero-panel .btn-outline { color: var(--ah-ink); border-color: var(--ah-ink); }
	.hero-panel .btn-outline:hover { background: var(--ah-ink); color: var(--ah-white); border-color: var(--ah-ink); }
	.hero-card-img {
		position: relative;
		inset: auto;
		transform: none;
		opacity: 1;
		border-radius: 0;
	}
	.hero-card-img img { height: auto; object-fit: fill; }
	.hero-card-img::before {
		opacity: 1;
		background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.45) 8%, rgba(255, 255, 255, 0) 24%);
	}
	.hero-card-img[data-schriftzug]::after {
		align-items: center;
		padding-top: 0;
		transform: none;
		opacity: 1;
	}
	/* Kein `filter: none` mehr (14.08.): Das nahm auch die sanfte Abdunklung
	   weg, die den Schriftzug trägt. Nur der Morph-Wert entfällt hier — die
	   Grundabdunklung bleibt, sonst stünde das Wort wieder auf weißer Wand. */
	.hero-card-img { filter: brightness(0.86); box-shadow: none; }
}

@media (max-width: 860px) {
	.hero-panel { grid-template-columns: 1fr; }
	.hero-card-img { order: -1; }
}

/* (Der Abschnitt „Alles rund ums Fahrzeug" ist am 31.07.2026 entfallen —
   Auftraggeber. Die Inhalte stecken jetzt in den einfliegenden Geschäftsfeldern
   des Heros und in den Leistungs-Kacheln darunter.) */

/* --------------------------------------------------------------------------
   Fahrzeug-Cards + Highlights
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Leistungen — Foto-Kacheln (20.07.2026)
   --------------------------------------------------------------------------
   Bewusst Fotos statt Textkarten: Die frühere Fassung wurde als „zu generisch"
   entfernt, und sechs Rahmen mit Fließtext waren sie auch. Eigene
   Händlerfotos sind das Gegenteil davon.

   Die Sektion bleibt WEISS. Der dunkle Verlauf liegt auf dem Bild, nicht auf
   der Fläche — dasselbe Mittel wie bei .foto-flaeche. Damit gilt weiter
   „keine dunklen Balken" aus DESIGN.md. */
/* Zentriert seit 10.08. — vorher linksbündig.
   Auf der Startseite wechselten die vier Abschnittsüberschriften ohne Grund
   die Ausrichtung: links, zentriert, links, zentriert, alle in 48 px. Beim
   Standort ist links strukturell begründet (Text links, Karte rechts), hier
   nicht: Darunter liegen fünf Kacheln über die volle Breite. */
.leistungen-kopf { max-width: 62ch; margin: 0 auto var(--space-4); text-align: center; }
.leistungen-kopf p { color: var(--ah-text); font-size: var(--fs-lg); margin: 0 auto; }

/* Fünf Kacheln seit 18.09.2026 („Verkauf" vorn), drei feste Anordnungen:
   - ab 1240 px alle fünf in einer Reihe, hochkant 2 : 3;
   - 701–1239 px „2 + 3" auf einem 6er-Raster: Verkauf und Ankauf (der Handel)
     oben breit, Vermietung, Aufbereitung, Zubehör darunter, gleiche Zeilenhöhe;
   - bis 700 px untereinander, flach 16 : 10 (Regel weiter unten).
   Vorher auto-fit mit 280 px Mindestbreite: Bei 1024 px stand damit schon die
   vierte Kachel allein in der zweiten Reihe, mit fünf wären es zwei gewesen. */
.leistungen-liste {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-2);
}

.leistung {
	position: relative;
	display: block;
	overflow: hidden;
	grid-column: span 2;
	height: clamp(300px, 38vw, 400px);
	border-radius: var(--radius);
	background: #141416;
	color: var(--ah-white);
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--transition), transform var(--transition);
}
.leistung:hover {
	color: var(--ah-white);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.leistung-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.leistung:hover .leistung-bild { transform: scale(1.06); }

/* Verlauf auf dem Foto, damit der Text auf jedem Bildinhalt lesbar bleibt —
   oben durchsichtig, damit das Motiv trägt. */
.leistung::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 22, 0) 38%, rgba(20, 20, 22, 0.86) 100%);
	pointer-events: none;
}

.leistung-inhalt {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: var(--space-3);
}
/* Kein font-weight: erbt bewusst die 600 aus der h1–h4-Regel, damit die
   Kacheln nicht aus der Typo-Linie der Seite ausbrechen. */
.leistung-titel {
	font-family: var(--font-cond);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.02em;
	color: var(--ah-white);
	margin-bottom: 0.3rem;
}
.leistung-text {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	max-width: 32ch;
}

.leistung:nth-child(-n+2) { grid-column: span 3; }
@media (min-width: 1240px) {
	.leistungen-liste { grid-template-columns: repeat(5, 1fr); }
	.leistung,
	.leistung:nth-child(-n+2) { grid-column: auto; height: auto; aspect-ratio: 2 / 3; }
}
/* Auf dem Handy hochkant nebeneinander wäre ein sehr langer Scrollweg —
   flach legen. */
@media (max-width: 700px) {
	.leistungen-liste { grid-template-columns: 1fr; }
	.leistung,
	.leistung:nth-child(-n+2) { grid-column: auto; height: auto; aspect-ratio: 16 / 10; }
	.leistung-text { max-width: none; }
}

.highlights { background: var(--ah-surface); }

.highlights-kopf {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	text-align: center;
}
.highlights-kopf h2 { margin: 0; }

.tabs { display: flex; gap: 0.6rem; }

.tab {
	font-family: var(--font-cond);
	font-size: var(--fs-base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.65em 1.6em;
	background: var(--ah-white);
	color: var(--ah-ink);
	border: 2px solid var(--ah-line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.tab:hover { border-color: var(--ah-ink); }
.tab.is-active {
	background: var(--ah-ink);
	border-color: var(--ah-ink);
	color: var(--ah-white);
}

/* ⚠️ ZURÜCKGEROLLT am 31.07., am 12.08. bestätigt — bewusst NICHT der
   gestapelte Überblender.
   Nachtrag 12.08.: Die Messung von damals war nicht aussagekräftig (verborgener
   Tab, siehe STATUS.md). Ein Stapel scheitert hier aber unabhängig davon an der
   Höhe: Bei 1280 px ist das Verkaufs-Panel 1514 px hoch, das Vermietungs-Panel
   1311 px. Ein Grid-Stapel ist immer so hoch wie sein höchster Inhalt — unter
   der Vermietung stünden dauerhaft 203 px Leere. Kein zweiter Anlauf.
   Versucht war: beide Bereiche in derselben Grid-Zelle, Wechsel über
   opacity + visibility statt display:none. Gemessen blieben die Transitions
   dabei auf `currentTime: 0` stehen und die Deckkraft vertauscht (inaktives
   Panel 1, aktives 0) — der Effekt war nicht als funktionierend nachweisbar.
   Ein weicher Überblender ist ein kleiner Gewinn; ein LEERES Fahrzeug-Panel
   wäre ein echter Schaden. Dieselbe Regel wie beim Zubehör-Fehler: Eine
   Animation darf nie Inhalte verstecken. Deshalb der bewährte harte Wechsel.
   (Der Wrapper .highlights-stapel bleibt im Markup — ohne Grid-Regeln ist er
   ein neutraler <div> und stört nicht.) */
.highlights-panel { display: none; }
.highlights-panel.is-active { display: block; animation: panel-rein 0.34s var(--ease); }
@keyframes panel-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* min(320px, 100%) (18.09.2026): Bei 320 px breiten Handys bleiben neben dem
   Seitenrand nur 280 px — eine starre 320-px-Spalte schob Start, /fahrzeuge/ und
   /vermietung/ 20 px zur Seite. Ab 360 px ändert sich nichts. */
.fahrzeug-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--space-3);
}

/* Listing auf hellgrauem Grund — weiße Karten heben sich ab */
.fahrzeuge-uebersicht { background: var(--ah-surface); }

.fahrzeug-card {
	background: var(--ah-white);
	/* #DCDCDA statt --ah-line: Der Token erreicht auf der grauen Sektion nur
	   1,17:1 und war damit faktisch keine Kante. */
	border: 1px solid #DCDCDA;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
	display: flex;
	flex-direction: column;
}
.fahrzeug-card:hover { border-color: var(--ah-gold); box-shadow: 0 2px 4px rgba(23, 24, 26, 0.06), 0 22px 48px -16px rgba(128, 105, 13, 0.30); transform: translateY(-4px); }
.fahrzeug-card:active { transform: translateY(-1px) scale(0.994); }

.fahrzeug-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.fahrzeug-card-link:hover { color: inherit; }

.fahrzeug-card-media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* NICHT --ah-surface: Das ist exakt die Farbe der Sektion darunter. Solange
	   das Bild lazy noch nicht da war, klaffte an dieser Stelle ein Loch in der
	   Seitenfarbe — und weil die Händlerfotos selbst einen hellgrauen
	   Studiohintergrund haben, verschwamm auch das geladene Bild mit der
	   Fläche. Ein eigener, leicht abgesetzter Verlauf gibt dem Bildfeld eine
	   erkennbare Grenze. */
	background: linear-gradient(180deg, #FAFAFA 0%, #EDEDEC 100%);
	border-bottom: 1px solid var(--ah-line);
}
.fahrzeug-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}
.fahrzeug-card:hover .fahrzeug-card-media img { transform: scale(1.06); }

.fahrzeug-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/* --ah-line (#E4E4E3) erreichte auf dem Bildfeld nur 1,13:1 — der
	   Platzhalter war damit unsichtbar, und eine Karte ohne Foto sah aus wie
	   eine halb geladene. */
	color: #B9B9B6;
}

/* --------------------------------------------------------------------------
   Bild-Label — eine Optik für alle drei
   --------------------------------------------------------------------------
   Fahrzeug-Karte, Zubehör-Karte und Kopfbild trugen dieselbe Rolle (Textmarke
   auf einem Foto) in drei Ausführungen: Radius 8px vs. 100px, Fläche deckend
   vs. durchscheinend, Gewicht 700 vs. 600, drei Polsterungen. Beim Wechsel von
   /fahrzeuge/ zu /zubehoer/ änderte dasselbe Element ohne Grund die Form.

   Gemeinsame Optik hier, Position und Größe bleiben je Ort verschieden — das
   Kopfbild-Label darf größer sein, es sitzt auf einem Hero-Foto. Bewusst über
   eine gruppierte Regel statt einer neuen Klasse: So ändert sich kein Markup,
   und die drei Namen bleiben dort sprechend, wo sie stehen. */
.fahrzeug-card-badge,
.zubehoer-badge,
.kopf-bild-chip {
	position: absolute;
	background: rgba(20, 20, 22, 0.82);
	color: var(--ah-white);
	font-family: var(--font-cond);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 100px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.fahrzeug-card-badge {
	top: 14px;
	left: 14px;
	font-size: var(--fs-xs);
	padding: 0.35em 0.9em;
}

.fahrzeug-card-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; }

/* ⚠️ min-height über zwei Zeilen (11.08.).
   „Smart ForTwo CABRIO" ist einzeilig, „Mercedes-Benz GLK 250 CDI
   BlueEfficiency" zweizeilig — dadurch begannen die Datenblöcke der Karten in
   einer Reihe um bis zu 35 px versetzt (gemessen: 361 / 344 / 326 px ab
   Kartenoberkante). Rahmen und Preisleiste standen sauber (alle Karten 622 px),
   innen lief es auseinander.
   Zwei Zeilen sind der Regelfall; ein einzeiliger Titel hält den Platz jetzt
   frei, statt alles darunter hochzuziehen. Titel mit drei Zeilen wachsen
   weiterhin — lieber ein seltener Versatz als ein abgeschnittener Modellname. */
.fahrzeug-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.25;
	min-height: 2.5em;   /* 2 Zeilen × 1.25 */
	margin-bottom: 0.2rem;
	color: var(--ah-ink);
}
/* Gleiches Spiel eine Ebene tiefer: Nicht jedes Fahrzeug hat eine
   Ausstattungszeile. Ohne reservierte Zeile rutscht der Datenblock hoch. */
.fahrzeug-card-sub {
	color: var(--ah-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	min-height: 1.4em;
	margin-bottom: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fahrzeug-card-specs {
	list-style: none;
	margin: auto 0 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--ah-line);
	display: grid;
	/* minmax(0, 1fr) statt 1fr — dieselbe Falle wie bei .partner-grid: Ein
	   blankes `1fr` ist `minmax(auto, 1fr)`, und dieses auto-Minimum lässt die
	   Spur nicht unter die Inhaltsbreite schrumpfen. Auf 375 px brauchte
	   „Gebraucht, mit Schaden" 132 px in einer 88-px-Zelle, und die Spec-Zeile
	   stand sichtbar über die Kartenpolsterung hinaus. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3) 0.4rem;
}
.fahrzeug-card-specs li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	text-align: center;
}
/* Ein einzelner Wert steht mittig unter der ganzen Karte (12.08.).
   Der PKW-Transportanhänger ist das einzige Objekt mit nur einer Angabe (der
   Kaution). Ohne diese Zeile landete sie in der ersten von drei Spalten und
   saß damit 125 px links der Kartenmitte — daneben zwei leere Spalten. Das las
   sich wie ein Rest, nicht wie ein Datenblock. `1 / -1` spannt sie über alle
   Spuren; die Höhe von 103 px bleibt gleich, die Reihe fluchtet weiter. */
.fahrzeug-card-specs li:only-child {
	grid-column: 1 / -1;
}
/* ⚠️ Zwei Zeilen Platz je Wert (11.08.).
   Der Datenblock hängt per `margin-top: auto` an der Unterkante, damit die
   Preisleisten einer Reihe fluchten. Dadurch bestimmt SEINE Höhe, wo er oben
   beginnt — und die schwankte: „150 kW / 204 PS" und „Gebraucht, mit Schaden"
   brechen um, „Benzin" nicht. Die Trennlinie über den Daten stand deshalb in
   einer Reihe um bis zu 35 px versetzt (gemessen 374 / 356 / 339 px).
   Mit reservierter zweiter Zeile sind alle Zellen gleich hoch, die Linien
   fluchten — und die Karte wächst dadurch nur um eine Zeile. */
/* ⚠️ Versalien, damit Zahlen und Wörter gleich groß WIRKEN (11.08.,
   Auftraggeber-Hinweis).
   Die Schriftgrößen waren nie verschieden — nachgemessen sind alle 72 Werte
   auf allen Karten identisch: Barlow Condensed, 15,2 px, Gewicht 600,
   Tabellenziffern. Der Unterschied ist typografisch: Ziffern stehen auf
   Versalhöhe, Kleinbuchstaben auf x-Höhe. In „Gebraucht" reicht nur das G nach
   oben, in „215.000 km" jede einzelne Ziffer — beide messen 10,8 px Oberkante,
   aber die Zahl hat durchgehend Vollhöhe. Genau das liest sich als „größer".
   In Versalien sitzt jedes Zeichen auf derselben Höhe, die Zellen wirken
   gleichwertig. Passt auch zur Ausstattungszeile darüber, die längst so steht
   („4MATIC · AHK · PANORAMA"), und zum Signage-Prinzip aus PRODUCT.md.
   Die Einheiten bleiben im Quelltext korrekt klein (km, kW) — text-transform
   ändert nur die Darstellung. Vorlesen und Kopieren liefern weiterhin
   „73.000 km". */
.fahrzeug-card-specs .spec-wert {
	display: block;
	min-height: 2.6em;
	line-height: 1.3;
	text-transform: uppercase;
	/* KEINE zusätzliche Laufweite. Versalien vertragen normalerweise etwas
	   Sperrung, hier ist der Platz aber knapp: Die Zelle ist 84 px breit,
	   „SCHALTGETRIEBE" braucht schon ohne Sperrung 90,5 px und wird getrennt.
	   0.03em hätten weitere 6,4 px gekostet und auch kürzere Werte an den
	   Rand gedrückt. Barlow Condensed steht in Versalien ohnehin ruhig. */
	letter-spacing: 0;
	/* „SCHALTGETRIEBE" passt in keine 84-px-Zelle und wird getrennt. Ohne
	   Vorgabe brach der Browser „SCHALTGETRIE-BE" um — zwei Buchstaben auf der
	   zweiten Zeile sind nach deutschen Satzregeln zu wenig. Mindestens vier
	   Zeichen davor, drei danach; damit landet die Trennung bei „SCHALTGE-
	   TRIEBE" oder „SCHALT-GETRIEBE". */
	hyphens: auto;
	hyphenate-limit-chars: 8 4 3;
}

/* Einspaltig gibt es nichts auszurichten — dort sind die reservierten Zeilen
   nur Leerraum. Das Raster nutzt `auto-fill, minmax(320px, 1fr)`, fällt also
   bei rund 700 px Containerbreite auf eine Spalte; 700 px Fensterbreite ist
   dafür die sichere Grenze. */
@media (max-width: 700px) {
	.fahrzeug-card-title { min-height: 0; }
	.fahrzeug-card-sub { min-height: 0; }
	.fahrzeug-card-sub:empty { display: none; }
	.fahrzeug-card-specs .spec-wert { min-height: 0; }
}
.spec-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 26px;
}
.spec-svg { width: 26px; height: 26px; display: block; color: var(--ah-ink); }
.spec-wert {
	width: 100%;
	font-family: var(--font-cond);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--ah-text);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	/* Kein `nowrap` mehr: In Verbindung mit dem Drei-Spalten-Raster war es der
	   zweite Teil des Überlaufs. Lange Werte dürfen jetzt umbrechen und im
	   Notfall trennen — der Zahlenwert-Look bleibt über tabular-nums erhalten. */
	overflow-wrap: anywhere;
	hyphens: auto;
	font-variant-numeric: tabular-nums;
}

.fahrzeug-card-preisleiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 0.9rem var(--space-3);
	background: var(--ah-anthracite);
	color: var(--ah-white);
}
/* Das Label trägt seit 11.08. auch den Umsatzsteuerhinweis (siehe
   fahrzeug-card.php). Es wird dadurch zweizeilig — deshalb linksbündig
   ausrichten statt an der Grundlinie kleben zu lassen. */
.preisleiste-label { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); font-family: var(--font-cond); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.25; }
.preisleiste-wert { font-family: var(--font-cond); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

.highlights-mehr { margin-top: var(--space-4); text-align: center; }
.highlights-leer { color: var(--ah-muted); padding: var(--space-4) 0; font-size: var(--fs-lg); }

/* --------------------------------------------------------------------------
   Bewertungen — helle Sektion, Gold-Sterne
   -------------------------------------------------------------------------- */

.bewertungen-kopf { text-align: center; max-width: 62ch; margin: 0 auto var(--space-4); }
.bewertungen-score { font-size: var(--fs-xl); font-weight: 700; color: var(--ah-ink); margin-bottom: var(--space-1); }
.bewertungen-quelle { color: var(--ah-muted); margin: 0; }

.bewertungen-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-3);
}

.bewertungen { background: var(--ah-surface); }

.bewertung {
	margin: 0;
	padding: var(--space-3);
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.bewertung-kopf { display: flex; align-items: center; gap: 0.85rem; }
.bewertung-avatar {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ah-ink);
	color: var(--ah-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 1.35rem;
}
.bewertung-meta { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.bewertung-autor { color: var(--ah-ink); font-weight: 700; font-size: var(--fs-base); }
.bewertung-sterne { color: var(--ah-gold); letter-spacing: 0.08em; font-size: 1rem; }
.bewertung-google { flex: 0 0 auto; }
.bewertung-text { color: var(--ah-text); margin: 0; line-height: 1.62; }

.bewertungen-cta { text-align: center; margin-top: var(--space-4); }

/* Foto-Fläche: dunkles Blattwerk mit Overlay. Bild + Overlay liegen per z-index
   hinter dem Inhalt, daher isolation.

   Seit 20.07. an mehreren Stellen im Einsatz (Auftraggeber-Wunsch): hinter den
   Google-Bewertungen auf der Startseite, hinter Autoschlüssel und mobile.de-
   Urkunde in den Abschluss-Blöcken und unter „Über uns" auf der Kontaktseite.
   Deshalb als gemeinsame Regel statt dreimal kopiert — die Deckkraft des
   Overlays an EINER Stelle zu ändern wirkt dann überall.

   Die 0.74 sind nicht beliebig: Darunter wird weißer Text auf den hellen
   Blattpartien unlesbar. Wer das Bild tauscht, muss den Wert nachmessen. */
.bewertungen--foto,
.foto-flaeche { position: relative; isolation: isolate; overflow: hidden; background: #0E1710; }
.bewertungen-bg,
.foto-flaeche-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.bewertungen--foto::before,
.foto-flaeche::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 22, 14, 0.74);
	z-index: -1;
}
.bewertungen--foto .bewertungen-score,
.bewertungen--foto .bewertungen-kopf h2 { color: var(--ah-white); }
.bewertungen--foto .bewertungen-quelle { color: rgba(255, 255, 255, 0.8); }

/* Pflichtangabe nach § 5b Abs. 3 UWG — bewusst zurückhaltend, aber lesbar. */
.bewertungen-echtheit {
	max-width: 78ch;
	margin: var(--space-4) auto 0;
	text-align: center;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ah-muted);
}
.bewertungen--foto .bewertungen-echtheit { color: rgba(255, 255, 255, 0.72); }
.bewertungen-echtheit + .bewertungen-cta { margin-top: var(--space-3); }

/* Karten durchscheinend, damit das Blattwerk trägt. backdrop-filter hält den
   Text lesbar; ohne Browser-Unterstützung greift die dunklere Fallback-Farbe. */
.bewertungen--foto .bewertung {
	background: rgba(10, 18, 12, 0.58);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.bewertungen--foto .bewertung {
		background: rgba(12, 22, 14, 0.34);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}
}
.bewertungen--foto .bewertung-text { color: rgba(255, 255, 255, 0.88); }
.bewertungen--foto .bewertung-autor { color: var(--ah-white); }
.bewertungen--foto .bewertung-avatar { background: rgba(255, 255, 255, 0.14); color: var(--ah-white); }


/* --------------------------------------------------------------------------
   Standort / Über-uns-Teaser
   -------------------------------------------------------------------------- */

.standort { background: var(--ah-white); }
/* Auf der Aufbereitungsseite ist der Standort-Block der letzte und größte
   Abschnitt (1005 px). Weiß ließ die Seite auf 50 % Weiß kommen; als Fläche
   schließt sie ruhiger ab. Auf der Startseite bleibt .standort bewusst weiß —
   dort steht er zwischen Fläche und dunklem Bewertungsblock und trennt die
   beiden. Deshalb hier gezielt überschrieben statt global geändert. */
.aufbereitung-standort { background: var(--ah-surface); }

.standort-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.standort-fakten { margin: var(--space-3) 0; }
.standort-fakten div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--ah-line);
	font-size: var(--fs-base);
}
/* Trennen erlaubt (18.09.2026): „Kompaktwagenvermietung" ist ein Wort von 213 px —
   bei 320 px passte die Zeile nicht neben die Telefonnummer (Kontaktseite 4 px zu breit). */
.standort-fakten dt { color: var(--ah-muted); font-weight: 600; hyphens: auto; overflow-wrap: anywhere; }
.standort-fakten dd { margin: 0; text-align: right; color: var(--ah-ink); font-weight: 600; }

/* Telefon, E-Mail und WhatsApp in den Fakten-Listen waren nur 19–22 px hoch —
   unter dem Mindestmaß von 24x24 (WCAG 2.5.8). Kopfzeile (78 px) und Fußzeile
   (45 px) waren schon angepasst, diese beiden Listen wurden dabei übersehen:
   `.standort-fakten` (Standortblock auf 5 Seiten) und `.partner-kontakt`
   (Ansprechpartner auf der Kontaktseite).
   Gleiche Lösung wie in der Fußzeile: innen Luft dazu, außen wieder abziehen —
   die Fläche wächst, die Zeile rückt optisch kein Stück. inline-block, weil
   ein reines Inline-Element senkrechte Innenabstände nicht in seine Höhe
   aufnimmt. */
.standort-fakten dd a,
.partner-kontakt dd a {
	display: inline-block;
	padding-block: 0.35rem;
	margin-block: -0.35rem;
}

/* Öffnungszeiten in der Fakten-Liste (seit 19.07. getrennt nach Handel und
   Vermietung). Bewusst KEINE Tabelle — die Zeile soll aussehen wie Adresse und
   E-Mail darüber: Label links, Werte rechtsbündig untereinander. Deshalb liegt
   sie im selben <dl> und erbt dessen Flex-Zeile; nur die Ausrichtung muss von
   `center` auf `start` wechseln, damit das Label oben neben der ersten Zeile
   steht statt mittig neben dem ganzen Block. */
.standort-fakten .standort-zeiten { align-items: flex-start; }
.standort-zeiten dd { display: flex; flex-direction: column; gap: 0.15rem; }
/* Betriebsname als leise Zwischenzeile — trennt Handel und Vermietung, ohne
   wie eine zweite Überschrift zu wirken. */
.zeiten-betrieb {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ah-muted);
}
.zeiten-betrieb:not(:first-child) { margin-top: 0.55rem; }
.zeiten-zeile { font-variant-numeric: tabular-nums; color: var(--ah-ink); }
/* Tageskürzel etwas zurückgenommen, damit die Uhrzeit die Zeile führt. */
.zeiten-tag { color: var(--ah-muted); font-weight: 600; margin-right: 0.4rem; }

.standort-aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Karten-Rahmen. Die Karte lädt direkt (Kundenentscheidung 17.07.) — der
   frühere Zwei-Klick-Platzhalter samt Vorschaubild ist entfernt, siehe
   template-parts/karte.php. */
.karte-gate { position: relative; }

.standort-map {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	display: block;
}

/* --------------------------------------------------------------------------
   Footer — dunkel, edel
   -------------------------------------------------------------------------- */

.site-footer {
	background: #141416;
	margin-top: var(--space-5);
	color: rgba(255, 255, 255, 0.68);
}

.footer-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-5) clamp(1.25rem, 4vw, 2.5rem) var(--space-4);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

/* Marke mittig: Logo, Schrift darunter, Sterne, Socials */
.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.footer-links-rechts { justify-self: end; }

/* Tippziele im Fußbereich auf mindestens 24 px Höhe bringen (WCAG 2.2, 2.5.8).
   Gemessen am 01.08. bei 375 px Breite: Beide Telefonnummern, die E-Mail und
   die Rechtslinks waren nur 17–19 px hoch — auf dem Handy trifft man das
   kaum, und ausgerechnet „anrufen" ist dort die wichtigste Aktion.

   padding + gleich großes negatives margin: Die Trefferfläche wächst nach
   oben und unten, der Textfluss im Fußbereich bleibt dabei unverändert. */
.site-footer a {
	display: inline-block;
	padding-block: 0.4rem;
	margin-block: -0.4rem;
}
/* Das Logo bringt seine Größe selbst mit und braucht die Korrektur nicht. */
.site-footer .footer-logo { padding-block: 0; margin-block: 0 var(--space-2); }

.footer-logo { display: inline-block; margin-bottom: var(--space-2); }
/* Gleicher Grund wie beim Kopflogo, nur weniger dringend: `.footer-logo img`
   ist 0,1,1 und damit genau so spezifisch wie `.woocommerce-page img`. Es
   gewinnt zurzeit allein, weil main.css spaeter geladen wird. Mit `.site-footer`
   davor (0,2,1) gewinnt es aus eigener Kraft. */
.site-footer .footer-logo img { height: clamp(58px, 6vw, 76px); width: auto; display: block; }
.footer-tagline { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-sm); max-width: 38ch; line-height: 1.6; }
.footer-rating { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); }
.footer-rating .stars { color: var(--ah-gold); }

.footer-social { display: flex; gap: 0.7rem; margin-top: var(--space-2); justify-content: center; }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--ah-white);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--ah-white); color: var(--ah-ink); border-color: var(--ah-white); transform: translateY(-2px); }

.footer-heading {
	font-family: var(--font-cond);
	font-size: var(--fs-base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ah-white);
	margin-bottom: var(--space-2);
}

.footer-address { font-style: normal; color: rgba(255, 255, 255, 0.62); font-size: var(--fs-sm); line-height: 2; }
.footer-address a { color: var(--ah-white); font-weight: 700; }
.footer-address a:hover { color: var(--ah-gold); }

/* Zwischenüberschrift je Betrieb im Footer — trägt sowohl die getrennten
   Öffnungszeiten (19.07.) als auch die getrennten Telefonnummern (20.07.).
   Dieselbe Beschriftung in beiden Spalten macht auf einen Blick klar, welche
   Nummer und welche Zeiten zu welchem Betrieb gehören. */
.footer-label {
	/* block, weil die Klasse in der Zeiten-Spalte auf <p> sitzt, in der
	   Kontakt-Spalte aber auf <span> innerhalb von <address> — dort muss sie
	   die Zeile selbst umbrechen. */
	display: block;
	margin: var(--space-2) 0 0.15rem;
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ah-gold);
}
.footer-hours .footer-label:first-of-type,
.footer-col > .footer-label:first-of-type { margin-top: 0; }
.footer-hours { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.62); }
.footer-hours div { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: 0.2rem; }
.footer-hours dt { font-weight: 600; }
.footer-hours dd { margin: 0; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); }

.footer-nav { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.footer-nav li { padding-block: 0.25rem; }
.footer-nav a { color: rgba(255, 255, 255, 0.62); }
.footer-nav a:hover { color: var(--ah-white); }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-2) clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem;
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.45);
}
.footer-bottom p { margin: 0; }
/* `flex-wrap` und ein kleinerer Abstand seit 07.09.2026: Mit dem vierten Punkt
   („Cookie-Einstellungen") passte die Reihe auf 375 px nicht mehr in eine Zeile
   und stand ueber den Rand hinaus. Gemessen und behoben. */
.footer-nav-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem; }
.footer-nav-inline li { padding: 0; }
/* Der Widerrufsknopf sieht aus wie die Links daneben — gleiche Farbe, gleiche
   Groesse. Er ist nur deshalb ein <button>, weil er etwas tut statt irgendwohin
   zu fuehren. */
.footer-nav-inline .consent-neu { color: rgba(255, 255, 255, 0.62); font-size: inherit; }
.footer-nav-inline .consent-neu:hover { color: var(--ah-white); }
.footer-credit a { color: rgba(255, 255, 255, 0.7); }
.footer-credit a:hover { color: var(--ah-gold); }

@media (max-width: 720px) {
	.footer-bottom { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   Claim / Hashtag (#DeinAutoistFamilie)
   Schwarze Fläche, ohne Bild (Auftraggeber 31.07.2026). Bis dahin lag hier das
   Blattwerk-Foto der Bewertungen unter einer halbtransparenten schwarzen
   Überlagerung — es schien als Grün durch, was nicht gewollt war. Das <picture>
   ist im Template entfernt (nur hier, die vier anderen Fotoflächen bleiben).
   Zentriert, die drei Zeilen fliegen per .reveal + Stagger ein.
   -------------------------------------------------------------------------- */
.claim { text-align: center; }
.claim.foto-flaeche { background: #0b0b0c; }

/* Ebene 1 — zwei sehr weiche Lichtinseln, die langsam gegeneinander wandern.
   Sie geben der Fläche Tiefe, ohne dass sichtbar „etwas passiert": 26 s pro
   Richtung ist so langsam, dass man die Bewegung eher spürt als sieht.
   Bewusst WEISS, nicht Gold — Gold bleibt laut DESIGN.md dem Logo und den
   Bewertungssternen vorbehalten. */
.claim.foto-flaeche::before {
	background:
		radial-gradient(48rem 30rem at 20% 22%, rgba(224, 188, 74, 0.10), transparent 66%),
		radial-gradient(38rem 26rem at 82% 78%, rgba(255, 255, 255, 0.09), transparent 64%),
		conic-gradient(from 210deg at 50% 50%, rgba(255, 255, 255, 0.06), transparent 28%, rgba(255, 255, 255, 0.04) 58%, transparent 82%, rgba(255, 255, 255, 0.06));
	animation: ah-claim-drift 26s ease-in-out infinite alternate;
}
@keyframes ah-claim-drift {
	from { transform: translate3d(-2%, -1.2%, 0) scale(1.05) rotate(-1.5deg); }
	to   { transform: translate3d(2%, 1.6%, 0) scale(1.12) rotate(1.5deg); }
}

/* Ebene 2–4 — Lichtstreif, Punktraster und Vignette.
   Der Streif wandert in 14 s einmal quer und ist der eigentliche Grund, warum
   die Fläche nicht mehr „nur schwarz" wirkt: Man sieht ihn kaum, aber die
   Fläche atmet. Raster nimmt dem Schwarz das digital Platte, die Vignette
   zieht den Blick zur Mitte auf den Claim. */
.claim.foto-flaeche::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 54%, transparent 64%),
		radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		radial-gradient(120% 85% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
	background-size: 320% 100%, 30px 30px, 100% 100%;
	background-repeat: no-repeat, repeat, no-repeat;
	animation: ah-claim-sweep 14s linear infinite;
}
@keyframes ah-claim-sweep {
	from { background-position: 130% 0, 0 0, 0 0; }
	to   { background-position: -70% 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.claim.foto-flaeche::before,
	.claim.foto-flaeche::after { animation: none; }
}
.claim-inner { max-width: 56rem; }
.claim-eyebrow {
	font-family: var(--font-cond);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ah-gold-light);
	margin: 0 0 var(--space-2);
}
.claim-hashtag {
	font-family: var(--font-cond);
	font-weight: 700;
	/* Untergrenze/Faktor so gewählt, dass „#DeinAutoistFamilie" bis hinunter zu
	   ~360 px auf EINER Zeile bleibt (das lange Wort sieht umbrochen unschön aus). */
	font-size: clamp(1.4rem, 6vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--ah-white);
	margin: 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); /* trägt den Text auch über hellen Blattstellen */
	overflow-wrap: break-word; /* Sicherheitsnetz für sehr schmale Alt-Handys (<340 px) */
}
.claim-akzent { color: var(--ah-gold-light); }
.claim-sub {
	max-width: 40rem;
	margin: var(--space-3) auto 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
	line-height: 1.6;
}
/* Sequenzielles Einfliegen: Eyebrow → Hashtag → Unterzeile. */
.js .claim .reveal:nth-child(2) { transition-delay: 0.1s; }
.js .claim .reveal:nth-child(3) { transition-delay: 0.22s; }

/* --------------------------------------------------------------------------
   Scroll-Reveal (nur mit JS aktiv — ohne JS bleibt alles sichtbar)
   -------------------------------------------------------------------------- */

.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Rise & Focus: große Headlines materialisieren sich (Blur -> scharf). Nur wenige Elemente. */
.js .reveal--rise { transform: translateY(28px); filter: blur(8px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.js .reveal--rise.is-visible { transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .js .reveal--rise { opacity: 1; transform: none; filter: none; } }

/* ---------------------------------------------------------------------------
   Bewegungsbausteine der Seite. Alles in Vanilla-CSS/JS, ohne Bibliothek und
   ohne Build-Schritt — passend zur Projektregel „eine main.css, eine main.js".
   --------------------------------------------------------------------------- */

/* 1 — Karten enthüllen sich aus einer Maske statt bloß einzublenden.
   ⚠️ FAIL-SAFE, gelernt aus dem Zubehör-Fehler vom 31.07.: Die Maske wird
   NICHT im Stylesheet vorgegeben, sondern erst wirksam, wenn main.js die
   Klasse `ist-bereit` vergeben hat. Bricht das JS, bleibt jede Karte
   sichtbar — eine kaputte Animation darf nie Inhalte verstecken. */
@media (min-width: 861px) {
	/* ⚠️ Die Hover-Eigenschaften MÜSSEN hier mit aufgeführt werden: `transition`
	   ersetzt die Liste, es ergänzt sie nicht. Ohne sie hatte diese Regel die
	   vorhandene Karten-Transition überschrieben — gemessen am 31.07.:
	   transitionProperty war nur noch „clip-path", also sprangen Schatten,
	   Rahmen und Anheben beim Überfahren hart. Der Stagger im Delay gilt nur
	   der ersten Eigenschaft (clip-path), die Hover-Anteile starten sofort. */
	.js .ist-bereit {
		clip-path: inset(0 0 100% 0);
		transition:
			clip-path 0.75s var(--ease),
			transform var(--transition),
			box-shadow var(--transition),
			border-color var(--transition);
		transition-delay: calc(var(--k, 0) * 55ms), 0s, 0s, 0s;
	}
	.js .ist-bereit.ist-enthuellt { clip-path: inset(0 0 0 0); }
}

/* (Roll-Hover entfernt am 02.08.2026 — siehe main.js.) */

@media (prefers-reduced-motion: reduce) {
	.js .ist-bereit { clip-path: none; transition: none; }
	.rollen-i { transition: none; }
}

/* 4 — Odometer: Ziffern rollen ein wie ein Kilometerzähler.
   ⚠️ ENTSCHEIDEND für die Fail-safe-Richtung: Die RICHTIGE Ziffer steht an
   erster Stelle des Stapels, die Ruhelage ist translateY(0). Die Animation
   startet also versetzt und läuft auf null zurück. Fällt CSS oder JS aus,
   zeigt der Stapel damit IMMER den korrekten Wert. Andersherum (richtige
   Ziffer zuletzt) stünden bei einem Fehler falsche Preise auf der Seite —
   bei einem Autohaus inakzeptabel. */
/* Nicht markierbar: Jede Stelle enthält vier Ziffern übereinander, von denen
   nur eine zu sehen ist. Beim Kopieren kamen alle mit. Den richtigen Text
   trägt stattdessen .odo-kopie (siehe main.js). */
.odo { user-select: none; -webkit-user-select: none; }
.odo-kopie {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}
.odo {
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1;
	/* `bottom` statt `baseline`: Durch `overflow: hidden` liegt die Grundlinie
	   dieser Kästen ohnehin an der Unterkante. Mit `baseline` richteten sich
	   Ziffern und Trennzeichen deshalb unterschiedlich aus, der Punkt in
	   „152.000 km" saß sichtbar zu tief. Alle Kästen gleich behandeln — dann
	   stimmt die Zeile wieder. */
	vertical-align: bottom;
}
/* Trennzeichen: gleiche Box wie die Ziffern, nur ohne Rolle.
   `white-space: pre` ist Pflicht, nicht Kosmetik: Ein inline-block, der NUR
   ein Leerzeichen enthält, kollabiert sonst auf null Breite — aus
   „92.000 km" wurde dadurch „92.000km". */
.odo--fest { overflow: visible; white-space: pre; }
.odo-rolle {
	display: block;
	transform: translateY(0);
}
.odo-rolle > span { display: block; height: 1em; line-height: 1; }
.js .odo-start .odo-rolle {
	transform: translateY(calc(var(--o, 3) * -1em));
}
.js .odo-lauf .odo-rolle {
	transform: translateY(0);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--n, 0) * 60ms);
}

/* 5 — Kippwechsel 2D↔3D: Die Leistungs-Kacheln liegen flach wie auf einem
   Tisch und richten sich beim Hereinscrollen auf. Nur über die JS-Klasse,
   damit ohne JS nichts schräg stehen bleibt. */
@media (min-width: 861px) {
	.js .leistungen-liste { perspective: 1200px; }
	/* Die Kacheln brauchen für das Aufrichten eine LANGSAMERE transform-Zeit
	   als die Karten fürs Anheben — deshalb hier die eigene, vollständige
	   Liste (dieselbe Falle wie oben: transition ersetzt, ergänzt nicht). */
	.js .leistung.ist-bereit {
		transform-origin: 50% 100%;
		transform: rotateX(26deg) translateY(18px);
		transition:
			clip-path 0.75s var(--ease),
			transform 0.85s var(--ease),
			box-shadow var(--transition),
			color var(--transition);
		transition-delay: calc(var(--k, 0) * 55ms), 0s, 0s, 0s;
	}
	.js .leistung.ist-bereit.ist-enthuellt { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .odo-start .odo-rolle,
	.js .odo-lauf .odo-rolle { transform: translateY(0); transition: none; }
	.js .leistung.ist-bereit { transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   Touch-Geräte: Hover-Zustände dürfen nicht kleben.
   Ein Fingertipp löst :hover aus — und der Zustand BLEIBT danach stehen, bis
   irgendwo anders hingetippt wird. Gemessen am 31.07.: 21 Regeln heben
   Elemente an oder werfen einen Schatten; auf dem Handy blieb also nach jedem
   Tippen eine angehobene Karte mit Schlagschatten zurück.

   Statt 21 Regeln einzeln in @media (hover: hover) zu wickeln — viele
   Eingriffe, viel Risiko — wird hier gezielt der Ruhezustand
   wiederhergestellt. Farbwechsel bleiben bewusst erhalten: Sie sind auf Touch
   sogar nützlich, weil sie den angetippten Punkt kurz markieren.
   --------------------------------------------------------------------------- */
@media (hover: none) {
	.btn:hover,
	.leistung:hover,
	.fahrzeug-card:hover,
	.zubehoer-card:hover,
	.zub-kat-tile:hover,
	.bestand-link:hover,
	.mega-block:hover,
	.mega-block--folgt:hover,
	.partner-card:hover,
	.footer-social a:hover {
		transform: none;
	}
	/* Bild-Zoom in den Karten ebenfalls zurück. */
	.leistung:hover .leistung-bild,
	.fahrzeug-card:hover .fahrzeug-card-media img,
	.zubehoer-card:hover .zubehoer-card-media img {
		transform: none;
	}
	/* Schatten und Rahmen auf die Ausgangswerte — `none` wäre hier falsch,
	   beide Karten tragen im Ruhezustand einen weichen Schatten. */
	.fahrzeug-card:hover {
		box-shadow: var(--shadow-soft);
		border-color: #DCDCDA;
	}
	.zubehoer-card:hover {
		box-shadow: none;
		border-color: #DCDCDA;
	}
	.leistung:hover,
	.zub-kat-tile:hover { box-shadow: var(--shadow-soft); }
}

/* Stagger in Listen */
.js .leistungen-liste .reveal:nth-child(2) { transition-delay: 0.07s; }
.js .leistungen-liste .reveal:nth-child(3) { transition-delay: 0.14s; }
.js .leistungen-liste .reveal:nth-child(4) { transition-delay: 0.21s; }
.js .leistungen-liste .reveal:nth-child(5) { transition-delay: 0.28s; }
.js .leistungen-liste .reveal:nth-child(6) { transition-delay: 0.35s; }
.js .bewertungen-liste .reveal:nth-child(2) { transition-delay: 0.09s; }
.js .bewertungen-liste .reveal:nth-child(3) { transition-delay: 0.18s; }

/* Stagger für die Blöcke, die am 20.07. dazugekommen sind. Bewusst nur dort,
   wo mehrere gleichrangige Elemente nebeneinanderstehen — ein Nacheinander bei
   Einzelblöcken wirkt wie eine Verzögerung, nicht wie Gestaltung. */
.js .partner-grid .reveal:nth-child(2) { transition-delay: 0.09s; }
.js .partner-grid .reveal:nth-child(3) { transition-delay: 0.18s; }
.js .aufb-ablauf .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .aufb-ablauf .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .aufb-ablauf .reveal:nth-child(4) { transition-delay: 0.24s; }

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

@media (max-width: 1100px) {
	.footer-inner { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; order: -1; }
	.footer-links-rechts { justify-self: start; }
}

/* 1100 -> 1240 px (31.07.): Zwischen 1101 und ~1350 px mussten volle
   Navigation, Telefonnummer und Bestandszähler nebeneinander passen — sie
   passten nicht. Gemessen bei 1214 px: Telefonnummer auf zwei, „Fahrzeuge
   sofort verfügbar" auf drei Zeilen umgebrochen, und das Logo zum Strich
   gequetscht. Lieber eine Stufe früher aufs Burger-Menü als ein zerdrückter
   Kopf. */
@media (max-width: 1240px) {
	.nav-toggle { display: block; }
	.bestand-info { display: none; }
	/* ⚠️ Panel mittig unter den Knopf statt rechtsbündig (12.08.).
	   Ab hier ist das Telefon NICHT mehr das letzte Element der Kopfzeile —
	   rechts davon stehen Bestand und Menüknopf. `right: 0` klebte das Panel
	   deshalb an eine Kante mitten im Kopf: Bei 375 px saß die rechte Kante bei
	   233 px, das 248 px breite Panel begann also bei −15 px und war links
	   angeschnitten. Mittig unter dem Knopf sitzt es in jeder Breite im Bild;
	   max-width fängt sehr schmale Geräte ab. */
	.header-tel-panel {
		--tel-x: -50%;
		right: auto;
		left: 50%;
		min-width: 0;
		width: max-content;
		max-width: calc(100vw - 1.5rem);
	}
	.header-bestand { border-left: none; padding: 0; }
	/* ⚠️ Panel an die KOPFZEILE hängen, nicht an den Knopf (12.08.).
	   Der Bestand-Knopf ist hier nicht das letzte Element rechts — daneben
	   steht noch der Menüknopf. An den Knopf gebunden passte das 287 px breite
	   Panel in keine Richtung: rechtsbündig begann es bei −9 px, mittig unter
	   dem Knopf ragte es rechts hinaus und schnitt die Bestandszahlen ab.
	   ⚠️ Gefunden hat das erst der Screenshot. Die Messung meldete brav
	   `im Bild: true`, weil getBoundingClientRect den bereits beschnittenen
	   Kasten zurückgibt — die abgeschnittenen Zahlen sieht man nur im Bild.
	   Jetzt ist der Bezugsrahmen .header-actions, also die ganze Knopfgruppe:
	   `right: 0` landet damit an deren rechter Kante, und die Kopfpolsterung
	   liefert den Abstand zum Displayrand.
	   Das Zipfelchen entfällt hier — es zeigte sonst irgendwohin. */
	.header-actions { position: relative; }
	.header-bestand { position: static; }
	.bestand-panel {
		--best-x: 0px;
		right: 0;
		left: auto;
		min-width: 0;
		width: max-content;
		max-width: calc(100vw - 1.5rem);
	}
	.bestand-panel::after { display: none; }

	.site-nav {
		position: fixed;
		inset: 0;
		top: 0;
		background: #141416;
		padding: 5rem clamp(1.25rem, 4vw, 2.5rem) var(--space-4);
		transform: translateX(100%);
		/* `visibility` mit in den Übergang: Ohne sie war das geschlossene Menü
		   zwar aus dem Bild geschoben, aber weiter tabbierbar — mit echten
		   Tastendrücken gemessen landete der Fokus auf sieben unsichtbaren
		   Bedienelementen bei x=395 in einem 375 px breiten Fenster. Wer per
		   Tastatur navigiert, verlor den Ring komplett aus dem Sichtfeld.
		   `transform` bleibt animiert, `visibility` schaltet erst am Ende. */
		visibility: hidden;
		transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
		overflow-y: auto;
	}
	.site-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.35s var(--ease), visibility 0s;
	}
	.site-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0; }

	.nav-item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	.nav-link { flex: 1; font-size: 1.5rem; padding: 0.8em 0; }
	.nav-link::after { display: none; }

}

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


@media (max-width: 560px) {
	.footer-inner { grid-template-columns: 1fr; gap: var(--space-3); }
	/* Hieß bis 20.07. `.hero-aktionen` — diese Klasse gibt es im Markup nicht,
	   die Regel lief also ins Leere und die Hero-Buttons blieben auf dem Handy
	   schmal und versetzt. Das Markup nutzt `.hero-cta`. */
	.hero-cta .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0s !important; }
	.js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Fahrzeug-Übersicht (Verkauf / Vermietung)
   -------------------------------------------------------------------------- */

.uebersicht-kopf { margin-bottom: var(--space-4); }
.uebersicht-kopf h1 {
	font-family: var(--font-cond);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 600;
	color: var(--ah-anthracite);
	margin-bottom: var(--space-1);
}
.uebersicht-intro { color: var(--ah-text); font-size: var(--fs-lg); max-width: 60ch; margin-bottom: var(--space-2); line-height: 1.6; }
.uebersicht-anzahl { color: var(--ah-muted); font-size: var(--fs-sm); margin: 0; }
.uebersicht-anzahl strong { color: var(--ah-anthracite); }

/* AJAX-Nachladen: Ergebnis dimmt kurz statt Seiten-Reload */
#fahrzeug-ergebnis { transition: opacity 0.2s var(--ease); }
#fahrzeug-ergebnis.laedt { opacity: 0.45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Zubehör (Reifen, Felgen, Teile)
   -------------------------------------------------------------------------- */

.zubehoer-filter {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
.filter-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.zubehoer-filter .filter-feld { min-width: 180px; }
.zubehoer-filter .filter-feld--schmal { min-width: 132px; }

/*
 * Reifengröße als ein Feld: 285 / 35 R 20 — mit denselben Trennzeichen, die
 * auf der Reifenflanke stehen. Drei einzelne Kästen nebeneinander sähen aus
 * wie drei unabhängige Filter; es ist aber eine Angabe.
 */
/* Mit `.zubehoer-filter` davor (18.09.2026): Als bloßes `.filter-groesse` verlor
   die Regel gegen `.zubehoer-filter .filter-feld { min-width: 180px }` weiter
   oben — die Gruppe war nur 251 px breit, jedes Feld 75 px, und von „Breite"
   blieb „Breit" sichtbar (Auftraggeber-Screenshot). Bei 300 px hat jedes Feld
   91 px. Bis 640 px hebt die Handy-Regel unten die Mindestbreite wieder auf. */
.zubehoer-filter .filter-groesse { min-width: 300px; }
.groesse-reihe {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.groesse-reihe:hover { border-color: var(--ah-muted); }
.groesse-reihe:focus-within {
	border-color: var(--ah-gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
/*
 * Die Auswahl-Grundregel steht weiter unten in der Datei und hat dieselbe
 * Spezifität — bei Gleichstand gewinnt die spätere Regel. Ohne den Zusatz
 * `.filter-groesse` behielten die drei Felder ihren eigenen Rahmen und die
 * Gruppe sah aus wie drei Kästen in einem Kasten.
 */
.filter-groesse .groesse-reihe select {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	border-radius: 0;
	padding: 0.6em 1.7em 0.6em 0.7em;
	background-color: transparent;
	background-position: right 0.45em center;
	/* Zahlen in Barlow Condensed — wie überall sonst auf der Seite. */
	font-family: var(--font-cond);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.filter-groesse .groesse-reihe select:hover,
.filter-groesse .groesse-reihe select:focus { box-shadow: none; border: 0; }
.filter-groesse .groesse-reihe select:focus-visible { outline-offset: -2px; }
.groesse-trenner {
	display: flex;
	align-items: center;
	padding: 0 0.1rem;
	font-family: var(--font-cond);
	font-weight: 600;
	color: var(--ah-muted);
	-webkit-user-select: none;
	user-select: none;
}

/* Aktive Filter zum Wegklicken. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filter-chips-label {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ah-muted);
}
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 30px;
	padding: 0.3rem 0.65rem 0.3rem 0.8rem;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	background: var(--ah-white);
	color: var(--ah-ink);
	font-size: var(--fs-sm);
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.filter-chip:hover,
.filter-chip:focus-visible { background: var(--ah-ink); border-color: var(--ah-ink); color: var(--ah-white); }
.filter-chip-x { font-size: 1.1em; line-height: 1; opacity: 0.5; }
.filter-chip:hover .filter-chip-x { opacity: 1; }

/*
 * Der Knopf bekommt dasselbe Innenmaß wie ein Auswahlfeld — sonst steht er
 * höher als die Felder daneben und die Reihe bekommt eine Delle. Der
 * durchsichtige Rahmen ersetzt die 2 px, die den Feldern ihre Höhe geben.
 */
.zubehoer-filter .filter-knopf {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	border: 2px solid transparent;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.zubehoer-filter .filter-feld { min-width: 0; flex: 1 1 calc(50% - var(--space-2)); }
	.zubehoer-filter .filter-groesse { flex-basis: 100%; }
	.zubehoer-filter .filter-knopf { flex: 1 1 100%; }
}

.zubehoer-kats { padding: var(--space-4) 0 var(--space-2); }
.zubehoer-kats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); }
.zub-kat-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--ah-white); text-decoration: none; background: var(--ah-anthracite); transition: transform var(--transition), box-shadow var(--transition); }
.zub-kat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.zub-kat-tile:active { transform: translateY(-1px) scale(0.995); }
.zub-kat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s var(--ease); }
.zub-kat-tile:hover .zub-kat-bg { transform: scale(1.05); }
.zub-kat-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 12, 0.05) 0%, rgba(10, 10, 12, 0.18) 42%, rgba(10, 10, 12, 0.82) 100%); }
.zub-kat-inhalt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.15rem; }
.zub-kat-titel { font-family: var(--font-cond); font-weight: 700; font-size: 1.6rem; line-height: 1.05; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6); }
.zub-kat-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.zub-kat-count { font-size: var(--fs-xs); font-weight: 600; color: var(--ah-gold); margin-top: 0.2rem; }
.zub-kat-pfeil { position: absolute; z-index: 2; top: var(--space-3); right: var(--space-3); color: var(--ah-gold); font-size: 1.6rem; line-height: 1; transition: transform var(--transition); }
.zub-kat-tile:hover .zub-kat-pfeil { transform: translateX(5px); }
@media (max-width: 560px) { .zub-kat-titel { font-size: 1.4rem; } }

.zubehoer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--space-3);
}
.zubehoer-card {
	background: var(--ah-white);
	border: 1px solid #DCDCDA;
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition),
		border-color var(--transition);
}
/* Angeglichen an die Fahrzeugkarten (31.07.): Die hatten Bild-Zoom und einen
   warmen Schein beim Überfahren längst, die Zubehör-Karten nicht — als
   einzige. Gleiche Werte, damit sich beide Raster gleich anfühlen. */
.zubehoer-card:hover {
	border-color: var(--ah-gold);
	box-shadow: 0 2px 4px rgba(23, 24, 26, 0.06), 0 22px 48px -16px rgba(128, 105, 13, 0.3);
	transform: translateY(-4px);
}
.zubehoer-card:active { transform: translateY(-1px) scale(0.994); }
.zubehoer-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.zubehoer-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(180deg, #FAFAFA 0%, #EDEDEC 100%); }
.zubehoer-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.zubehoer-card:hover .zubehoer-card-media img { transform: scale(1.06); }
}
.zubehoer-badge {
	top: 0.7rem;
	left: 0.7rem;
	font-size: var(--fs-xs);
	padding: 0.35em 0.9em;
}
.zubehoer-card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-2); flex: 1; }
.zubehoer-card-title { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ah-anthracite); line-height: 1.4; margin: 0; }
.zubehoer-card-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.zubehoer-preis { font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700; color: var(--ah-anthracite); font-variant-numeric: tabular-nums; }
.zubehoer-mehr { font-size: var(--fs-xs); color: var(--ah-muted); white-space: nowrap; }
.zubehoer-card:hover .zubehoer-mehr { color: var(--ah-anthracite); }

/* Kopf mit Foto: großes Bild links, Text rechts (Autohaus-Look) */
.uebersicht-kopf.hat-bild {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(1.75rem, 4vw, 3.75rem);
	align-items: stretch;
}
.uebersicht-kopf-bild {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	min-height: 520px;
}
.uebersicht-kopf-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 24, 26, 0) 55%, rgba(23, 24, 26, 0.55));
	pointer-events: none;
}
.uebersicht-kopf-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}
/* Größer als die Karten-Label — sitzt auf einem Hero-Foto. */
.kopf-bild-chip {
	left: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 1;
	font-size: var(--fs-sm);
	padding: 0.55em 1.1em;
}
@media (max-width: 900px) {
	.uebersicht-kopf.hat-bild { grid-template-columns: 1fr; }
	.uebersicht-kopf-bild { min-height: 0; order: -1; }
	.uebersicht-kopf-bild img { max-height: 340px; }
}

.uebersicht-kopf-text { display: flex; flex-direction: column; justify-content: center; }
/* Kicker über der Überschrift.
   0.82rem statt 1rem seit 10.08.: Bei voller Fließtextgröße war das kein
   Kicker mehr, sondern eine zweite Textebene, die mit der Überschrift um
   Aufmerksamkeit konkurrierte. Er steht jetzt ohnehin nur noch dort, wo er
   etwas sagt, das die Überschrift nicht sagt. */
.kopf-eyebrow {
	font-family: var(--font-cond);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ah-muted);
	margin: 0 0 var(--space-1);
}

/* Split-Hero: großes scharfes Bild (¾) + schmale dunkle Textspalte (¼).
   Kauf: Bild links · Vermietung: Bild rechts. */
/* Seitenbanner der Übersichtsseiten.
   ⚠️ Spalten am 10.08. von 3fr/1fr auf 2fr/minmax(19rem,1fr) geändert.
   Mit 1fr von 4fr bekam die Textspalte 25 % der Breite — bei 1101 px waren das
   275 px. Darin brach der Text der Schaltfläche um und die Überschrift stand
   auf drei Zeilen. Die Untergrenze von 19 rem sorgt dafür, dass die Spalte
   auch zwischen den Umbruchpunkten nicht mehr zusammenfällt. Das Bild bleibt
   mit rund zwei Dritteln klar dominant. */
.uebersicht-hero {
	/* ⚠️ EIN Wert für drei Stellen. Das Bild und der Verlauf sind absolut
	   positioniert (die Bannerhöhe soll der Text bestimmen, nicht das Bild) und
	   kennen die Rasterspalten deshalb nicht. Vorher standen dort fest
	   verdrahtete 75 % / 25 %, passend zum damaligen 3fr/1fr. Beim Verbreitern
	   der Textspalte lief der Text prompt unter das Bild.
	   Wer die Spalten ändert, ändert diesen Wert mit — 2fr von 3fr sind 66,667 %. */
	--bild-anteil: 66.667%;
	position: relative;
	display: grid;
	grid-template-columns: 2fr minmax(19rem, 1fr);
	min-height: clamp(200px, 22vw, 300px);
	overflow: hidden;
	background: #141416;
}
.uebersicht-hero-inner { grid-column: 2; }
.uebersicht-hero--bild-rechts .uebersicht-hero-inner { grid-column: 1; }
.uebersicht-hero--bild-rechts { grid-template-columns: minmax(19rem, 1fr) 2fr; }
/* Bild absolut in seiner ¾-Zone — Banner-Höhe bestimmt der Text */
.uebersicht-hero-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--bild-anteil);
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}
.uebersicht-hero--bild-rechts .uebersicht-hero-img {
	left: auto;
	right: 0;
	object-position: center 68%;
}
/* Sanfter Verlauf vom Bild in die schwarze Textspalte */
.uebersicht-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(100% - var(--bild-anteil));
	pointer-events: none;
	background: linear-gradient(90deg, rgba(20, 20, 22, 0) 62%, #141416 100%);
}
.uebersicht-hero--bild-rechts::after {
	left: calc(100% - var(--bild-anteil));
	right: 0;
	background: linear-gradient(270deg, rgba(20, 20, 22, 0) 62%, #141416 100%);
}
.uebersicht-hero-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #141416;
	color: var(--ah-white);
	padding: clamp(1rem, 2vw, 2rem) clamp(1.1rem, 2vw, 2rem);
}
/* ⚠️ Größe am 10.08. angehoben: clamp(1.5rem, 2vw, 2.1rem) ergab 24–34 px,
   während jede Abschnitts-h2 darunter mit `--fs-2xl` auf clamp(2rem, 4vw, 3rem)
   steht, also 32–48 px. Die SEITENüberschrift war damit an jeder Fensterbreite
   kleiner als jede Zwischenüberschrift — bei 1101 px gemessen 24 px gegen
   44 px, also 0,54×. Das dreht die Gliederung um.
   Die neue Skala liegt bewusst knapp ÜBER der h2-Skala (4,2vw gegen 4vw), damit
   die Seitenüberschrift führt, ohne zu schreien. Betrifft alle sechs
   Übersichtsseiten. */
.uebersicht-hero-inner h1 { color: var(--ah-white); font-size: clamp(2.1rem, 4.2vw, 3.3rem); margin-bottom: 0.6rem; }
.uebersicht-hero-intro { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.kopf-eyebrow--hell { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1100px) {
	.uebersicht-hero,
	.uebersicht-hero--bild-rechts { grid-template-columns: 1fr; min-height: 0; }
	/* Ganzes Bild oben, Textkarte darunter — nichts abgeschnitten, kein Overflow */
	.uebersicht-hero-img,
	.uebersicht-hero--bild-rechts .uebersicht-hero-img {
		position: static;
		width: 100%;
		height: auto;
		order: -1;
	}
	.uebersicht-hero-inner,
	.uebersicht-hero--bild-rechts .uebersicht-hero-inner { grid-column: auto; padding-block: var(--space-3); }
	.uebersicht-hero::after { display: none; }
}

.uebersicht-anzahl--solo { margin-bottom: var(--space-4); }

/* Abschluss-Block (Schlüsselbild + Text, z. B. Vermietung) */
.uebersicht-abschluss {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	margin-top: var(--space-5);
	/* Als Foto-Fläche rundum gepolstert statt nur oben — die Trennlinie
	   entfällt, der dunkle Block trennt jetzt selbst. */
	padding: clamp(2rem, 4vw, 3.5rem);
	border-radius: var(--radius);
}
/* Heller Text auf dem dunklen Blattwerk. Reines Weiß für die Überschrift,
   leicht gedämpft für den Fließtext — das hält die Hierarchie, ohne unter
   4,5:1 Kontrast zu fallen. */
.uebersicht-abschluss.foto-flaeche .abschluss-text h2 { color: var(--ah-white); }
.uebersicht-abschluss.foto-flaeche .abschluss-text p { color: rgba(255, 255, 255, 0.88); }
/* Urkunden-Rahmen durchscheinend statt deckend weiß — dieselbe Machart wie die
   Bewertungskarten auf der Startseite, damit das Blattwerk durchträgt. Ohne
   backdrop-filter greift die dunklere Fallback-Farbe. */
.foto-flaeche .abschluss-bild--dokument {
	background: rgba(10, 18, 12, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.foto-flaeche .abschluss-bild--dokument {
		background: rgba(12, 22, 14, 0.34);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}
}
/* Text links, Bild rechts — Bild flach beschnitten (Schlüssel mittig) */
.abschluss-bild { order: 2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); }
.abschluss-text { order: 1; }
/* Blattwerk-Hintergrund (<picture>) darf KEINE Grid-Zelle belegen, sonst rutschen
   Bild und Text in getrennte Reihen (versetzt statt nebeneinander). */
.uebersicht-abschluss > picture { position: absolute; inset: 0; z-index: -2; }
/* Platzierung explizit erzwingen — sonst landen Bild/Text in getrennten Reihen
   (die Auto-Platzierung war durch das Hintergrund-<picture> gestört). Desktop:
   Text links, Bild rechts, EINE Reihe. Mobil bleibt es gestapelt (Regel unten). */
@media (min-width: 781px) {
	.uebersicht-abschluss { grid-template-rows: auto; grid-template-columns: 1fr 1.15fr; }
	.uebersicht-abschluss > .abschluss-text { grid-area: 1 / 1; }
	.uebersicht-abschluss > .abschluss-bild { grid-area: 1 / 2; }
}
.abschluss-bild img { width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: center 62%; display: block; }
/* Dokument-Variante: Urkunde vollständig zeigen statt beschneiden. */
.abschluss-bild--dokument {
	display: flex;
	justify-content: center;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	padding: clamp(1rem, 2.5vw, 2rem);
}
.abschluss-bild--dokument img { width: auto; max-width: 100%; max-height: 560px; aspect-ratio: auto; object-fit: contain; }
.abschluss-text h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.abschluss-text p { color: var(--ah-text); font-size: var(--fs-lg); line-height: 1.7; max-width: 54ch; }
.abschluss-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

@media (max-width: 780px) {
	.uebersicht-abschluss { grid-template-columns: 1fr; }
	.abschluss-bild { order: -1; }
}

.filter-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: var(--space-3);
}
.filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-cond);
	font-size: var(--fs-base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.7em 1.5em;
	border-radius: var(--radius-sm);
	cursor: pointer;
	border: 2px solid var(--ah-line);
	background: var(--ah-white);
	color: var(--ah-ink);
	box-shadow: var(--shadow-soft);
	transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.filter-toggle:hover { background: var(--ah-surface); border-color: var(--ah-ink); }
.filter-toggle.is-open { border-color: var(--ah-ink); }
.filter-aktiv { color: var(--ah-muted); font-size: var(--fs-sm); text-decoration: underline; }
.filter-aktiv:hover { color: var(--ah-ink); }

/* Auf den Listenseiten oben weniger Luft (11.08.).
   --space-5 sind bei 1710 px gemessene 128 px. Als Abstand ZWISCHEN Abschnitten
   ist das genau richtig und bleibt überall sonst so. Hier steht es aber
   zwischen dem Banner und der Arbeitsfläche: Mit 128 px Luft, Kopfleiste und
   offenem Filter begann die erste Fahrzeugkarte rund 500 px unter dem Banner —
   auf einem 770 px hohen Fenster sah man ohne Scrollen kein einziges Auto.
   Die Aufgabe dieser Seite ist die Liste (PRODUCT.md: „schnell den Bestand
   sehen"). Unten bleibt der volle Abstand, dort grenzt der nächste Abschnitt an. */
.fahrzeuge-uebersicht { padding-top: var(--space-4); }

/* Kopfleiste der Liste: Trefferzahl links, Filter-Umschalter rechts daneben,
   das Formular darunter über die volle Breite. Die Statuszeile steht damit
   neben dem Bedienelement, das sie verändert, statt 48 px darüber. */
.listen-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.listen-kopf .uebersicht-anzahl--solo { margin: 0; }
.listen-kopf .filter-leiste { margin: 0; }
/* Das Formular ist das dritte Flex-Kind und bricht deshalb um. */
.listen-kopf .fahrzeug-filter { flex: 1 0 100%; margin-bottom: 0; }
@media (max-width: 560px) {
	/* Nebeneinander wird es zu eng — die Trefferzahl bekommt die volle Zeile. */
	.listen-kopf { justify-content: flex-start; }
	.listen-kopf .uebersicht-anzahl--solo { flex: 1 0 100%; }
}

/* ⚠️ Sichtbar ist der Grundzustand — nur `.ist-zu` blendet aus, und die Klasse
   setzt ausschließlich main.js. Vorher stand hier `display: none`, sichtbar
   erst über `.is-open`: Ohne JavaScript waren die neun Filterfelder und die
   Sortierung damit unerreichbar, weil auch der Knopf ohne Skript nichts tut.
   Gleiche Regel wie beim Zubehör-Raster und beim Menü. */
.fahrzeug-filter {
	display: block;
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
}
.fahrzeug-filter.ist-zu { display: none; }
.filter-suche { margin-bottom: var(--space-2); }
.filter-suche input { max-width: 100%; }
.filter-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--space-2);
}
.filter-feld { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-feld > span {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ah-muted);
}
.filter-feld select,
.filter-feld input {
	width: 100%;
	padding: 0.6em 0.8em;
	border: 2px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	color: var(--ah-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	transition: border-color var(--transition), box-shadow var(--transition);
}
/*
 * Eigener Pfeil statt des Betriebssystem-Pfeils: Der native sieht auf jedem
 * System anders aus — unter Windows grau-eckig, auf dem Mac blau. Damit sahen
 * dieselben Filter auf zwei Rechnern verschieden aus.
 */
.filter-feld select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B6E76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 12px 8px;
	cursor: pointer;
}
.filter-feld select:hover,
.filter-feld input:hover { border-color: var(--ah-muted); }
.filter-feld select:focus,
.filter-feld input:focus {
	border-color: var(--ah-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
/* Tastaturbedienung braucht mehr als den goldenen Schimmer. */
.filter-feld select:focus-visible,
.filter-feld input:focus-visible { outline: 2px solid var(--ah-ink); outline-offset: 2px; }

.filter-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.filter-reset { color: var(--ah-muted); font-size: var(--fs-sm); text-decoration: underline; }
.filter-reset:hover { color: var(--ah-ink); }

.uebersicht-grid { margin-top: 0; }

.uebersicht-leer {
	text-align: center;
	padding: var(--space-5) var(--space-2);
	color: var(--ah-muted);
	font-size: var(--fs-lg);
}
.uebersicht-leer .btn { margin-top: var(--space-2); }

.fahrzeug-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-4);
}
.seite-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0.5em 0.9em;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	color: var(--ah-ink);
	font-weight: 600;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.seite-link:hover { border-color: var(--ah-ink); color: var(--ah-ink); }
.seite-link.ist-aktiv { background: var(--ah-ink); border-color: var(--ah-ink); color: var(--ah-white); }

/* --------------------------------------------------------------------------
   Fahrzeug-Detailseite
   -------------------------------------------------------------------------- */

.detail-zurueck { display: inline-block; color: var(--ah-muted); font-weight: 600; margin-bottom: var(--space-2); }
.detail-zurueck:hover { color: var(--ah-ink); }

.detail-kopf { margin-bottom: var(--space-3); }
.detail-kopf h1 {
	font-family: var(--font-cond);
	font-size: clamp(1.9rem, 3.5vw, 3rem);
	font-weight: 700;
	margin-bottom: 0.2rem;
}
.detail-sub { color: var(--ah-muted); font-size: var(--fs-base); margin: 0; }

.detail-grid {
	display: grid;
	grid-template-columns: 1.65fr 1fr;
	gap: var(--space-4);
	align-items: start;
}

/* Grid-Item muss schrumpfen dürfen, sonst sprengt der Thumb-Strip die Spalte */
.detail-galerie { min-width: 0; }

.galerie-haupt {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0;
	cursor: zoom-in;
}
.galerie-haupt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-zoom {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(20, 20, 22, 0.72);
	color: var(--ah-white);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	transition: background var(--transition), transform var(--transition);
}
.galerie-haupt:hover .galerie-zoom { background: var(--ah-anthracite); transform: scale(1.06); }
.galerie-leer { display: flex; align-items: center; justify-content: center; color: var(--ah-muted); cursor: default; }

/* Thumbnail-Strip: horizontal, ziehbar (Drag) */
.galerie-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	cursor: grab;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.galerie-thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.galerie-thumbs.is-dragging .galerie-thumb { pointer-events: none; }
.galerie-thumbs::-webkit-scrollbar { height: 6px; }
.galerie-thumbs::-webkit-scrollbar-thumb { background: var(--ah-line); border-radius: 100px; }
.galerie-thumb {
	flex: 0 0 auto;
	width: calc((100% - 5 * 0.5rem) / 6);
	min-width: 84px;
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	background: var(--ah-surface);
	scroll-snap-align: start;
	transition: border-color var(--transition);
}
.galerie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.galerie-thumb:hover { border-color: var(--ah-muted); }
.galerie-thumb.is-active { border-color: var(--ah-anthracite); }

/* Lightbox */
/* Lightbox ist jetzt ein <dialog> (seit 20.07.). Deshalb native Defaults
   zurücksetzen (Rahmen, Innenabstand, Rand, max-width/height, weißer Grund)
   und das Öffnen über [open]/display steuern statt über .is-open. Das
   dialog-Element füllt selbst den Viewport und trägt den dunklen Grund — der
   ::backdrop bleibt daher durchsichtig. */
.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 14, 0.92);
	color: var(--ah-white);
	opacity: 0;
	/* allow-discrete lässt display/overlay mit ausblenden — sonst würde das
	   <dialog> beim Schließen sofort verschwinden statt zu faden. Browser ohne
	   Unterstützung zeigen es instant, das ist unkritisch. */
	transition: opacity 0.25s var(--ease), display 0.25s var(--ease) allow-discrete, overlay 0.25s var(--ease) allow-discrete;
	padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open] { display: flex; opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
/* Hintergrund-Scroll sperren, solange die Lightbox offen ist — rein per CSS,
   damit es auch bei nativem Escape automatisch zurückspringt. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox-bild { max-width: min(1200px, 92vw); max-height: 86vh; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-drag: none; }
.lightbox-zaehler {
	position: absolute;
	top: clamp(1rem, 3vw, 1.8rem);
	left: clamp(1rem, 3vw, 1.8rem);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-cond);
	font-size: var(--fs-lg);
	letter-spacing: 0.05em;
	font-variant-numeric: tabular-nums;
}
.lightbox-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--ah-white);
	cursor: pointer;
	transition: background var(--transition);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-prev { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-close { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); font-size: 1.6rem; }
@media (max-width: 640px) {
	.lightbox-btn { width: 44px; height: 44px; }
	.lightbox-prev { left: 0.4rem; }
	.lightbox-next { right: 0.4rem; }
}

/* Hier stand `position: sticky; top: 100px` — es hat nie gewirkt und ist am
   20.07. entfernt worden, statt es nur zu verschieben.

   Der Grund ist geometrisch, nicht ein falscher Wert: Sticky braucht Spielraum
   zwischen Element und Scroll-Container. Die Spalte ist aber selbst das höchste
   Grid-Item und bestimmt damit die Zeilenhöhe — Spielraum exakt 0. Auf den
   Kasten darin verschoben ändert das nichts, gemessen am 20.07.:

     Verkaufsfahrzeug: Galerie 636 px, Kasten 1007 px → 371 px zu hoch
     Mietwagen:        Galerie 636 px, Kasten  732 px →  96 px zu hoch

   Die Seitenspalte ist auf dieser Seite IMMER höher als die Galerie. Damit
   kann kein Sticky greifen, egal an welchem Element es steht.

   Wer den Effekt wirklich will (Preis und Anfrage-Button folgen beim
   Durchsehen der Galerie), muss den Kasten aufteilen: Datenblatt bleibt
   stehen, nur Preisbox plus Buttons kleben. Das ist eine Gestaltungsfrage,
   kein Fehler — deshalb hier bewusst offen gelassen. */
.detail-seite { display: flex; flex-direction: column; gap: var(--space-3); }

/* Alles-in-einem-Kasten: Name, Datenraster, Preis, Anfrage */
.detail-box {
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ah-white);
}
.detail-specs-titel {
	font-family: var(--font-cond);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ah-anthracite);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--ah-line);
	line-height: 1.25;
}
.detail-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	background: transparent;
}
.detail-spec { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; min-width: 0; background: var(--ah-white); padding: var(--space-3) 0.4rem; }
.detail-spec .spec-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; }
.detail-spec .spec-img { width: 30px; height: 30px; display: block; object-fit: contain; }
.detail-spec .spec-svg { width: 30px; height: 30px; }
/* Versalien wie in der Liste — siehe Begründung bei .fahrzeug-card-specs
   .spec-wert. Liste und Detailseite zeigen dieselben Werte; sie dürfen sich
   nicht unterschiedlich lesen. */
.detail-spec .spec-wert { width: 100%; font-family: var(--font-cond); font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; color: var(--ah-text); line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 8 4 3; }

/* Preis-Balken (horizontal) — sitzt im Kasten, randlos */
.detail-preisbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	background: var(--ah-anthracite);
	color: var(--ah-white);
	padding: var(--space-2) var(--space-3);
	border-top: 1px solid var(--ah-line);
}
.detail-preis-label { display: flex; flex-direction: column; gap: 0.25rem; color: rgba(255, 255, 255, 0.72); font-family: var(--font-cond); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.06em; }
.detail-preis-mwst { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.72rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.detail-preis { font-family: var(--font-cond); font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
/* Zeiteinheit („/ Tag") kleiner als der Betrag — die Zahl trägt, die Einheit ordnet ein. */
.detail-preis-einheit { font-size: 0.42em; font-weight: 600; color: rgba(255, 255, 255, 0.72); margin-left: 0.25em; letter-spacing: 0; }
.preisleiste-einheit { font-size: 0.55em; font-weight: 600; opacity: 0.75; margin-left: 0.2em; }
.detail-preis .preis-suffix { color: rgba(255, 255, 255, 0.6); font-size: 1.1rem; font-weight: 600; }

.detail-anfrage { display: flex; flex-direction: column; gap: 0.7rem; padding: var(--space-3); }
.detail-anfrage .btn { text-align: center; }
.detail-inserat-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.2rem;
	padding: 0.4rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ah-muted);
	transition: color var(--transition);
}
.detail-inserat-link:hover { color: var(--ah-anthracite); }

/* Finanzierungs-Hinweis — ersetzt den früheren Rechner (Kundenentscheidung 17.07.).
   Bewusst zurückhaltend: eine Information, kein Angebot. */
.detail-finanz-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: var(--space-2) 0 0;
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ah-muted);
}
.detail-finanz-hinweis svg { flex: 0 0 auto; margin-top: 0.15em; }
.detail-inserat-link svg { flex: 0 0 auto; }

/* Finanzierungsrechner (im Modal) */

.detail-block { margin-top: var(--space-4); }
.detail-block h2 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }

/* Karte in abgesetztem Weiß (Datenblatt-Look) */
.detail-card {
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.beschreibung-titel {
	font-family: var(--font-cond);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ah-anthracite);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-2);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--ah-anthracite);
}

/* Beschreibung: zwei lange Spalten nach unten, beide Seiten gefüllt */
.beschreibung-spalten { columns: 2; column-gap: var(--space-5); }
.beschreibung-gruppe { break-inside: avoid; margin-bottom: var(--space-4); }
.beschreibung-gruppe:last-child { margin-bottom: 0; }

/* Aufzählungen (Beschreibung: einspaltig je Gruppe; Ausstattung: Raster) */
.ausstattung-liste,
.beschreibung-liste { list-style: none; padding: 0; margin: 0; }
.ausstattung-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem 1.4rem; }
.beschreibung-liste { display: flex; flex-direction: column; gap: 0.15rem; }
/* Listenpunkte: gleiche elegante Schrift bei Beschreibung UND Ausstattung.
   Hover nur als Farbwechsel (Anthrazit → Grau) — keine Bewegung. */
.ausstattung-liste li,
.beschreibung-liste li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--ah-anthracite);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.55;
	transition: color var(--transition);
}
.ausstattung-liste li:hover,
.beschreibung-liste li:hover { color: var(--ah-muted); }
.ausstattung-liste svg,
.beschreibung-liste svg { color: var(--ah-gold-deep); flex: 0 0 auto; margin-top: 0.28em; }

.detail-card-klein { background: var(--ah-white); }

/* Allgemeine Service-Hinweise (zentriert, dezent) */
.detail-hinweise { text-align: center; }
.detail-hinweise ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.detail-hinweise li { color: var(--ah-muted); font-size: var(--fs-sm); }

/* Standort-Block am Fuß der Detailseite */
.detail-standort { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--ah-line); }

/* Grußformel ganz unten */
.detail-schluss {
	margin-top: var(--space-4);
	text-align: center;
	font-family: var(--font-cond);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ah-ink);
}

@media (max-width: 900px) {
	.detail-grid { grid-template-columns: 1fr; }
	.detail-seite { position: static; }
}
@media (max-width: 640px) {
	.beschreibung-spalten { columns: 1; }
}

/* Sanfter Bildwechsel in Galerie + Lightbox (harter src-Swap wirkte billig).
   Start bei 0.35 statt 0 → kein Blank-Flash bei noch nicht dekodierten Bildern. */
@keyframes bild-rein { from { opacity: 0.35; } to { opacity: 1; } }
.bild-wechsel { animation: bild-rein 0.16s var(--ease); }

/* Mobile Sticky-Aktionsleiste auf der Fahrzeug-Detailseite: Preis + Anruf +
   Anfragen bleiben erreichbar, solange die echte Anfrage-Box off-screen ist. */
.count-up { font-variant-numeric: tabular-nums; }
.offen-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ah-ink); }
.offen-chip--inline { margin-left: 0.15rem; }
.offen-punkt { width: 8px; height: 8px; border-radius: 50%; background: #9AA0A6; flex: 0 0 auto; }
.offen-chip.ist-offen .offen-punkt { background: #1F9D55; box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18); }
.detail-anfrage .offen-chip { margin-bottom: 0.3rem; }

.detail-sticky { display: none; }
@media (max-width: 900px) {
	.detail-sticky {
		display: flex; align-items: center; gap: 0.6rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom));
		background: var(--ah-white); border-top: 1px solid var(--ah-line);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
		transform: translateY(110%); visibility: hidden;
		transition: transform 0.3s var(--ease), visibility 0.3s var(--ease);
	}
	.detail-sticky.ist-sichtbar { transform: none; visibility: visible; }
	.detail-sticky-preis { font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; color: var(--ah-anthracite); margin-right: auto; white-space: nowrap; }
	.detail-sticky .btn { padding: 0.62rem 1.15rem; }
	.detail-sticky-tel {
		flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
		width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ah-line); color: var(--ah-ink);
	}
	.detail-sticky-tel:hover { background: var(--ah-ink); color: var(--ah-white); }
}

/* --------------------------------------------------------------------------
   Anfrage-Modal (Fahrzeug anfragen)
   -------------------------------------------------------------------------- */

.anfrage-hinweis { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-weight: 600; }
.anfrage-ok { background: var(--ah-ok-bg); color: var(--ah-ok); border: 1px solid var(--ah-ok); }
.anfrage-fehler { background: var(--ah-err-bg); color: var(--ah-err); border: 1px solid var(--ah-err); }

.anfrage-modal {
	border: none;
	border-radius: var(--radius);
	padding: 0;
	max-width: 640px;
	width: calc(100% - 2rem);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.anfrage-modal::backdrop { background: rgba(17, 18, 20, 0.55); backdrop-filter: blur(2px); }

.anfrage-form { position: relative; padding: clamp(1.5rem, 4vw, 2.6rem); }
.anfrage-close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	background: none;
	border: none;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ah-muted);
	width: 40px;
	height: 40px;
}
.anfrage-close:hover { color: var(--ah-ink); }
.anfrage-form h2 { font-family: var(--font-cond); font-size: 1.9rem; margin-bottom: 0.2rem; }
.anfrage-fahrzeug { color: var(--ah-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }

.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.form-zwei .form-feld { margin-bottom: 0; }
.form-feld { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-2); }
.form-feld > span { font-size: var(--fs-sm); font-weight: 600; color: var(--ah-text); }
/* Die Feld-Optik (Rand, Polsterung, Fokus) stand hier ein zweites Mal — mit
   2px-Rand und Gold-Fokus. Sie hat nie gegriffen: Weiter unten steht dieselbe
   Auswahl mit gleicher Spezifität nochmal, und die spätere Regel gewinnt.
   Sichtbar war also immer die andere Fassung (1px, Anthrazit). Deshalb hier
   entfernt statt zusammengeführt — sonst hätte das Zusammenführen das
   Aussehen der Formulare unbemerkt verändert. Die gültige Definition steht
   im Abschnitt „Kontakt-Formular". */
.form-feld textarea { resize: vertical; }

.form-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-sm); color: var(--ah-text); margin: var(--space-2) 0 var(--space-3); line-height: 1.5; }
.form-check input { margin-top: 0.25em; flex: 0 0 auto; width: 18px; height: 18px; }

.form-aktionen { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.form-pflicht { color: var(--ah-muted); font-size: var(--fs-xs); margin-right: auto; }
.form-aktionen .btn { padding: 0.75em 1.7em; }

/* Widerrufsseite (§ 356a BGB): Formular links, Infospalte rechts — derselbe
   Aufbau wie Kontakt und Ankauf. Wer hier landet, ist unzufrieden; dann soll
   ohne Scrollen dastehen, was als Nächstes passiert und wen man erreicht. */
.widerruf-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.widerruf-haupt h1 { margin-bottom: var(--space-2); }
.widerruf-intro { color: var(--ah-muted); max-width: 58ch; margin-bottom: var(--space-3); }
.widerruf-form { display: flex; flex-direction: column; gap: var(--space-2); }
.widerruf-hinweis { color: var(--ah-muted); font-size: var(--fs-sm); max-width: 58ch; margin-top: var(--space-3); }
.widerruf-box { background: #FAFAF9; border: 1px solid var(--ah-line); border-radius: var(--radius-sm); padding: var(--space-3); }
.widerruf-box + .widerruf-box { margin-top: var(--space-2); }
.widerruf-box h2 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.widerruf-box p { color: var(--ah-muted); margin: 0 0 0.6rem; }
.widerruf-box p:last-child { margin-bottom: 0; }
.widerruf-schritte { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.7rem; color: var(--ah-muted); }
.widerruf-schritte strong { color: var(--ah-anthracite); }
.widerruf-kontakt a { color: var(--ah-anthracite); font-weight: 600; text-decoration: none; }
.widerruf-kontakt a:hover { text-decoration: underline; }
.widerruf-adresse { font-size: var(--fs-sm); }

/* Danke-Seite nach der Bestellung. WooCommerce liefert dort nur eine nackte
   Liste; die Fragen danach — wann kommt es, wo hole ich es ab, wen rufe ich an
   — beantwortet der Kasten (siehe inc/woo-mails.php). */
.woocommerce-order { max-width: 60rem; }
.woocommerce-order .woocommerce-thankyou-order-received { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 600; color: var(--ah-anthracite); margin-bottom: var(--space-3); }
.woocommerce-order ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--ah-line); border-radius: var(--radius-sm); background: #FAFAF9; }
.woocommerce-order ul.order_details li { border: 0; padding: 0; margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ah-muted); }
.woocommerce-order ul.order_details li strong { display: block; margin-top: 0.25rem; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ah-anthracite); }
.danke-hinweis { margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--ah-line); border-radius: var(--radius-sm); background: #FAFAF9; }
.danke-hinweis h2 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.danke-liste { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; color: var(--ah-muted); }
.danke-kontakt { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--ah-muted); }

@media (max-width: 900px) {
	.widerruf-grid { grid-template-columns: 1fr; }
}
/* Liefer- und Zahlungsangaben unter dem Kaufknopf. */
.produkt-lieferhinweis { font-size: var(--fs-sm); color: var(--ah-muted); max-width: 46ch; margin: var(--space-2) 0 0; }

@media (max-width: 560px) { .form-zwei { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Kontaktseite: Partner, Formular, Über uns
   -------------------------------------------------------------------------- */

.kontakt-hero { min-height: clamp(180px, 20vw, 260px); }

/* Wechselfläche statt Weiß (20.07.): Die Kontaktseite bestand zu 57 % aus Weiß,
   und die beiden größten Blöcke waren beide weiß. Die Partner-Karten sind selbst
   weiß — auf --ah-surface heben sie sich ab, genau wie die Fahrzeug-Karten in
   .fahrzeuge-uebersicht. Der Seitenrhythmus lautet damit
   dunkel → Fläche → dunkel → weiß → Fläche.
   KEINE dunklen Balken: Der Kunde hat die am 03.07. abgelehnt, siehe DESIGN.md. */
.kontakt-partner { background: var(--ah-surface); }

.kontakt-kopf { max-width: 60ch; margin-bottom: var(--space-4); }
.kontakt-kopf h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-1); }
.kontakt-kopf-intro { color: var(--ah-text); font-size: var(--fs-lg); line-height: 1.6; }

/* minmax(0, 1fr) statt 1fr: Ein blankes `1fr` bedeutet `minmax(auto, 1fr)`, und dieses
   auto-Minimum lässt eine Spalte nicht unter die Inhaltsbreite schrumpfen. Mit den vollen
   Firmierungen ("Inhaber der AutoHoss Sport- & Kompaktwagenvermietung") sprengte das die
   Karten aus dem Viewport — gemessen 1353 px Inhalt bei 1280 px Fenster, die Seite scrollte
   waagerecht. Die 0 als Minimum erlaubt echtes Schrumpfen, der Text bricht stattdessen um. */
.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.partner-card {
	display: grid;
	/* ⚠️ Fotospalte MITWACHSEND, nicht fest 160 px (11.08.).
	   Drei Karten nebeneinander sind bei 1101 px Fenster nur 318 px breit,
	   davon 260 px Inhalt. Mit fixen 160 px fürs Foto plus 28 px Abstand
	   blieben dem Text 72 px — „0176 / 20169543" braucht dort 92 px und stand
	   sichtbar über die Karte hinaus. Gemessen: 28 px Querlauf auf der ganzen
	   Seite, an fünf Elementen.
	   `minmax(0, 1fr)` an der Textspalte war schon richtig gesetzt und ließ sie
	   korrekt schrumpfen — nur schrumpfte damit eben der Text, statt dass das
	   Foto Platz macht. Die Klammer aus clamp() dreht das um: Das Foto nimmt
	   höchstens 40 % der Kartenbreite und nie mehr als die ursprünglichen
	   160 px. Der Umbruch auf eine Spalte weiter unten bleibt unberührt. */
	grid-template-columns: clamp(80px, 40%, 160px) minmax(0, 1fr);
	gap: var(--space-3);
	align-items: center;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-3);
	transition: box-shadow var(--transition);
}
.partner-card:hover { box-shadow: var(--shadow-lift); }
.partner-bild { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--ah-surface); }
.partner-bild img, .partner-silhouette { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-rolle {
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ah-muted);
	/* Deutsche Komposita: "Kompaktwagenvermietung" ist länger als die Spalte und ragte
	   sonst aus der Karte. hyphens greift, weil <html lang="de"> gesetzt ist; break-word
	   ist die Rückfallebene, falls der Browser keine Trennmuster für Deutsch hat. */
	overflow-wrap: break-word;
	hyphens: auto;
	margin: 0 0 0.2rem;
}
.partner-name { font-family: var(--font-cond); font-size: var(--fs-xl); margin: 0 0 0.5rem; }
.partner-zustaendig { color: var(--ah-text); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--space-2); }
.partner-kontakt { margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
/* Label oben, Wert darunter — bei allen drei Karten gleich (13.08.).
   Vorher war das eine umbrechende Flex-ZEILE (11.08., gegen einen Querlauf von
   28 px bei 1101 px). Die Absicherung hielt, hatte aber eine unschöne Folge:
   Ob Label und Wert nebeneinander standen oder untereinander, hing an der LÄNGE
   des Werts. „02372 / 13159" passte neben sein Label, „0176 / 20169543" nicht.
   Dieselbe Karte, dieselbe Spaltenbreite — und trotzdem sahen Amir und David
   verschieden aus, ohne dass es dafür einen inhaltlichen Grund gab.
   Als Spalte ist der Aufbau unabhängig vom Inhalt immer derselbe, und der
   Querlauf ist erst recht ausgeschlossen: Ein Wert, der nie neben seinem Label
   steht, kann die Spalte auch nicht sprengen. min-width: 0 und overflow-wrap
   bleiben als Rückfallebene für sehr lange Werte ohne Trennstelle. */
.partner-kontakt > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem 0; }
.partner-kontakt dt { color: var(--ah-muted); }
.partner-kontakt dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.partner-kontakt a { color: var(--ah-anthracite); font-weight: 600; }
.partner-kontakt a:hover { color: var(--ah-gold-deep); }

/* Formular + Karte */
.kontakt-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.kontakt-formular h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-1); }
.kontakt-formular > p { color: var(--ah-text); margin-bottom: var(--space-3); line-height: 1.6; }
.kontakt-form { display: flex; flex-direction: column; gap: var(--space-2); }
.form-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-feld { display: flex; flex-direction: column; gap: 0.3rem; }
.form-feld > span { font-size: var(--fs-sm); font-weight: 600; color: var(--ah-anthracite); }
.form-feld input, .form-feld select, .form-feld textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	font: inherit;
	color: var(--ah-ink);
	transition: border-color var(--transition), box-shadow var(--transition);
}
/* Einheitliche Höhe: number-Inputs rendern sonst höher als selects (51 vs 58 px).
   Zusätzlich die number-Spinner entfernen. Textarea bleibt mehrzeilig. */
.form-feld input:not([type="checkbox"]):not([type="radio"]), .form-feld select { height: 3.2rem; }
.form-feld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form-feld input[type="number"]::-webkit-inner-spin-button,
.form-feld input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Die einzige gültige Feld-Definition der Seite (die frühere Fassung im
   Modal-Abschnitt wurde von dieser hier ohnehin überschrieben und ist
   entfernt). Kein `outline: none`: Rahmen und Schein bleiben als Zusatz,
   den Ring liefert die globale :focus-visible-Regel. */
.form-feld input:focus, .form-feld select:focus, .form-feld textarea:focus {
	border-color: var(--ah-anthracite);
	box-shadow: 0 0 0 3px rgba(48, 50, 55, 0.12);
}
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-sm); color: var(--ah-text); line-height: 1.5; margin-top: 0.3rem; }
.form-check input { margin-top: 0.2em; flex: 0 0 auto; }
.form-check a { color: var(--ah-anthracite); text-decoration: underline; }
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-form .btn { align-self: flex-start; margin-top: var(--space-1); }

/* Meldungen mit Symbol: Farbe allein trägt keine Aussage (WCAG 1.4.1), und
   ein Haken oder Ausrufezeichen wird schneller erfasst als ein farbiger Kasten.
   Das Symbol liegt als Maske über der Textfarbe — so stimmt es in jedem
   Zustand, ohne zweite Farbangabe. */
.form-hinweis { display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-weight: 500; line-height: 1.55; }
.form-hinweis::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 0.15em; background: currentColor; -webkit-mask: var(--hinweis-symbol) center / 20px 20px no-repeat; mask: var(--hinweis-symbol) center / 20px 20px no-repeat; }
.form-hinweis--ok { background: var(--ah-ok-bg); color: var(--ah-ok); border: 1px solid var(--ah-ok); --hinweis-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.form-hinweis--fehler { background: var(--ah-err-bg); color: var(--ah-err); border: 1px solid var(--ah-err); --hinweis-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }

/* Fehlerhafte Felder rot rahmen. aria-invalid ist die maschinenlesbare Seite,
   der Rahmen die sichtbare — nie Farbe allein (WCAG 1.4.1), die rot markierten
   Felder benennt auch der Fehlertext oben. */
.form-feld input[aria-invalid="true"],
.form-feld select[aria-invalid="true"],
.form-feld textarea[aria-invalid="true"] {
	border-color: var(--ah-err);
	box-shadow: 0 0 0 2px rgba(192, 54, 44, 0.14);
}
.form-check input[aria-invalid="true"] { outline: 2px solid var(--ah-err); outline-offset: 2px; }

.kontakt-karte { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); margin-bottom: var(--space-3); }
.kontakt-karte .standort-map { width: 100%; height: 280px; border: 0; display: block; }
.kontakt-info .standort-fakten { margin-bottom: var(--space-3); }

/* Über uns */
.ueber-uns-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.ueber-uns-text h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
/* Kontaktseite ganz unten: seit 20.07. Foto-Fläche statt grauer Fläche
   (Auftraggeber-Wunsch). Der Abschnitt schließt die Seite jetzt dunkel ab und
   führt optisch in den ebenfalls dunklen Footer über. */
.ueber-uns.foto-flaeche .ueber-uns-text h2 { color: var(--ah-white); }
.ueber-uns.foto-flaeche .ueber-uns-text p { color: rgba(255, 255, 255, 0.88); }
.ueber-uns.foto-flaeche .ueber-uns-fakten { border-top-color: rgba(255, 255, 255, 0.22); }
.ueber-uns.foto-flaeche .ueber-uns-fakten li { color: rgba(255, 255, 255, 0.72); }
.ueber-uns.foto-flaeche .ueber-uns-fakten strong { color: var(--ah-gold); }
.ueber-uns.foto-flaeche .ueber-uns-bilder figcaption { color: rgba(255, 255, 255, 0.78); }
.ueber-uns-text p { color: var(--ah-text); line-height: 1.7; margin-bottom: var(--space-2); }
.ueber-uns-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--ah-line); }
.ueber-uns-fakten li { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--ah-muted); }
.ueber-uns-fakten strong { font-family: var(--font-cond); font-size: 1.8rem; color: var(--ah-anthracite); line-height: 1; }
.ueber-uns-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ueber-uns-bilder figure { margin: 0; }
.ueber-uns-bilder img, .ueber-uns-bilder .partner-silhouette { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; }
.ueber-uns-bilder figcaption { text-align: center; font-size: var(--fs-sm); color: var(--ah-muted); margin-top: 0.5rem; font-weight: 600; }

@media (max-width: 900px) {
	.partner-grid, .kontakt-grid, .ueber-uns-grid { grid-template-columns: 1fr; }
}
/* ⚠️ Foto ÜBER dem Text auch im mittleren Bereich (11.08.).
   Zwischen 901 und 1250 px stehen die drei Inhaberkarten nebeneinander und sind
   dabei nur rund 318 px breit. Foto neben Text lässt dem Text dort etwa 128 px —
   das reicht nicht: Der Markenname wurde als „AU-TOHOSS" getrennt, die Namen
   liefen über drei Zeilen, und die Kontaktwerte rutschten alle unter ihre Labels.
   Unter 901 px ist die Karte wieder voll breit, dort passt Foto neben Text.
   Es sind genau drei Inhaber — deshalb bleiben es drei Spalten; gestapelt wird
   der Karteninhalt, nicht das Raster. */
@media (min-width: 901px) and (max-width: 1250px) {
	/* ⚠️ align-content: start — sonst hängt die Höhe des Fotos am Text darunter
	   (13.08.). In dieser Ansicht steht das Bild ÜBER dem Text, beide Reihen
	   sind automatisch hoch. Alle Karten sind gleich hoch (Raster-Dehnung), aber
	   Ghulam hat weniger Inhalt: einzeilige Rolle, keine WhatsApp-Zeile. Die
	   überschüssige Höhe verteilte der Vorgabewert `normal` (= stretch) auf
	   BEIDE Reihen — die Bildreihe wurde höher, und weil `align-items: center`
	   das Foto darin mittig setzt, rutschte es nach unten. Gemessen bei 1204 px:
	   Ghulams Foto 58 px unter der Kartenkante, Amir und David 29 px.
	   Mit `start` sind die Reihen inhaltshoch, die Fotos beginnen alle gleich,
	   und der Rest der Höhe sammelt sich unten in der Karte. */
	.partner-card { grid-template-columns: 1fr; text-align: center; align-content: start; }
	/* ⚠️ Feste Breite statt max-width plus auto-Rand. Ein auto-Rand in der
	   Inline-Achse schaltet das Dehnen des Rasterfelds ab — das Feld nimmt dann
	   seine INHALTSbreite, und solange das Foto (loading="lazy") noch nicht da
	   ist, sind das null Pixel. Gemessen: partner-bild 0x0. */
	.partner-bild { width: 168px; max-width: 100%; margin-inline: auto; }
	/* Spalte statt Zeile (13.08.) → zentriert wird über die Querachse. */
	.partner-kontakt > div { align-items: center; }
}

@media (max-width: 560px) {
	/* align-content: start — gleiche Begründung wie oben. */
	.partner-card { grid-template-columns: 1fr; text-align: center; align-content: start; }
	.partner-bild { width: 200px; max-width: 100%; margin-inline: auto; }
	.form-reihe { grid-template-columns: 1fr; }
	.partner-kontakt > div { align-items: center; }
}

/* ============================== AUFBEREITUNG ============================== */

.aufb-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, var(--space-5));
	align-items: start;
}
.aufb-intro-text h2 { margin-bottom: var(--space-2); }
.aufb-intro-text p { color: var(--ah-text); line-height: 1.7; margin-bottom: var(--space-2); max-width: 60ch; }

/* Leistungsmenü: Zeilen mit Oberlinie, keine Kästen */
.aufb-leistungen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 4vw, 3rem);
}
.aufb-leistung {
	padding: var(--space-2) 0;
	border-top: 1px solid var(--ah-line);
}
.aufb-leistung h3 {
	font-family: var(--font-cond);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ah-anthracite);
	margin: 0 0 0.2rem;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.aufb-leistung-icon { flex: 0 0 auto; color: var(--ah-gold-deep); }
.aufb-leistung p { margin: 0 0 0 calc(18px + 0.5rem); font-size: var(--fs-sm); color: var(--ah-muted); line-height: 1.5; }

/* Aufbereitung: dunkler 3-Spalten-Feature-Block (bewusst anders als Ankaufs
   Warum-Block, damit die Seiten sich unterscheiden). */
.aufb-features { background: var(--ah-ink); color: var(--ah-white); padding-block: var(--space-5); }
.aufb-features-kopf { text-align: center; max-width: 44rem; margin: 0 auto var(--space-4); }
.aufb-features-kopf h2 { color: var(--ah-white); }
.aufb-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.aufb-feature { text-align: center; }
.aufb-feature-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.4rem; height: 3.4rem; border-radius: 50%;
	background: rgba(224, 188, 74, 0.14); color: var(--ah-gold-light); margin-bottom: var(--space-2);
}
.aufb-feature h3 { color: var(--ah-white); font-size: 1.15rem; margin: 0 0 0.4rem; }
.aufb-feature p { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); line-height: 1.55; margin: 0 auto; max-width: 32ch; }
@media (max-width: 760px) { .aufb-features-grid { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; } }

/* ---- Aufbereitung: Preisklassen (07.09.2026) -----------------------------
   Drei Karten in einer Reihe, gleiche Bauart wie die Fahrzeugkarten: weiße
   Fläche, feine Kante, weicher Schatten. Bewusst KEINE hervorgehobene
   „empfohlene" Klasse — welche zutrifft, entscheidet das Fahrzeug, nicht der
   Kunde. Ein hervorgehobener Mittelweg wäre hier eine Verkaufsmasche ohne
   Bezug zur Sache. */
/* Der Abschnitt schliesst direkt an die Leistungen an — der volle
   Abschnittsabstand oben liess dazwischen eine leere Bahn stehen
   (Auftraggeber: „abstände sind ziemlich groß und so leer"). */
/*
 * Dunkler Abschnitt (07.09.2026, Auftraggeber: „sieht noch zu stumpf alles aus
 * mehr farben dahinter schwarze drüber oder drunter").
 *
 * Weisse Karten auf weissem Grund haben keinen Halt — das war das Stumpfe. Auf
 * Anthrazit stehen sie frei im Raum, und die Tiefenwirkung der Bahn wird
 * ueberhaupt erst sichtbar: Eine Karte, die zurueckweicht, muss auf etwas
 * zurueckweichen koennen.
 *
 * Der Schein hinter der Mitte ist kein Farbtupfer, sondern die Lichtquelle der
 * Szene: Er sagt, wo vorn ist. Zwei weiche Kreise statt eines, damit die
 * Aufhellung nicht wie ein Fleck aussieht.
 */
/*
 * Heller Grund, keine Lichtkreise, kein Gold (07.09.2026, zweite Runde:
 * „das goldenen und dieses licht im hintergrund zu viel mache es schlichter
 * profesioneller … lasse es im hintergrund weiß mache nur die eine kachel
 * schwarz").
 *
 * Die dunkle Fassung von heute frueh ist damit zurueckgenommen. Getragen wird
 * der Kontrast jetzt allein von der einen schwarzen Karte — und das reicht:
 * Auf hellem Grund ist ein einzelnes dunkles Feld das Auffaelligste, was es
 * gibt. Der Hintergrund muss dafuer nichts tun.
 */
.aufb-preise { padding-block: var(--space-4); }

/*
 * Ueberschrift und Einleitung nebeneinander statt untereinander.
 *
 * Auftraggeber: „mache in den großen abständen was anderes das es nicht so leer
 * ist zwischen den texten." Das Leere kam nicht von zu grossen Abstaenden,
 * sondern davon, dass links eine schmale Textspalte stand und rechts die halbe
 * Seite frei blieb. Zwei Spalten fuellen die Breite mit dem, was ohnehin da
 * ist — ohne eine einzige Zierde.
 *
 * Die Linie dazwischen ist Gliederung, nicht Schmuck: Sie trennt die Frage
 * („Was kostet es") von der Antwort („wovon es abhaengt").
 */
.aufb-preise-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--space-3);
	align-items: start;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--ah-line);
}
.aufb-preise-kopf h2 { margin: 0; color: var(--ah-anthracite); }
.aufb-preise-kopf p {
	color: var(--ah-text);
	line-height: 1.65;
	margin: 0;
	padding-left: var(--space-3);
	border-left: 1px solid var(--ah-line);
}
@media (max-width: 860px) {
	.aufb-preise-kopf { grid-template-columns: 1fr; gap: var(--space-2); }
	.aufb-preise-kopf p { padding-left: 0; border-left: 0; }
}
/* ---- Preisklassen als schiebbare Bahn -----------------------------------
   Auftraggeber, 07.09.2026: „so ein 3d modell draus das man die schieben kann
   die mitte stark ist und die anderen beiden verschwommen sind bis sie auch in
   der mitte sind wie eine 3d bubble."

   Getragen wird das vom nativen Scrollen: Wischen, Trackpad, Schwungrad und
   Tastatur kommen damit geschenkt und richtig. Das Skript legt die Maus-Geste,
   das Ausrollen und die Tiefe darauf.

   ⚠️ `--d` ist der Abstand einer Karte von der Mitte, 0 bis 1. Ohne
   JavaScript ist die Variable nicht gesetzt und der Vorgabewert 0 greift:
   alle Karten scharf, nichts gedreht, nichts blass. Preise sind
   Pflichtangaben — sie dürfen nicht davon abhängen, dass ein Skript läuft. */
.preis-bahn {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/*
	 * ⚠️ BEWUSST OHNE scroll-snap (07.09.2026, Auftraggeber: „das ziehen ist
	 * schlecht es hängt … es soll nicht unbedingt immer auf der klasse landen
	 * lasse es flüssig smooth ziehen lassen ohne stopper").
	 *
	 * Die Rastung WAR der Stopper: Bei jedem Loslassen riss sie die Bahn auf die
	 * nächste Karte, während das Skript gleichzeitig ausrollen ließ — zwei
	 * Kräfte gegeneinander. Genau das war das Hängen.
	 *
	 * Wer hier wieder scroll-snap einbaut, holt sich beides zurück.
	 */
	/* Erste und letzte Karte müssen die Mitte erreichen können. */
	padding-inline: max(0px, calc(50% - 13rem));
	padding-block: var(--space-2);
	scrollbar-width: none;
	/* Die Perspektive sitzt am Behälter, nicht an der Karte: Nur so teilen sich
	   alle Karten EINEN Fluchtpunkt und wirken wie in einem Raum. Je Karte
	   gesetzt hätte jede ihren eigenen — das sieht aus wie drei Fotos, nicht
	   wie eine Szene. */
	perspective: 1400px;
	perspective-origin: 50% 50%;
	cursor: grab;
}
.preis-bahn::-webkit-scrollbar { display: none; }
.preis-bahn.ist-am-ziehen { cursor: grabbing; }
.preis-bahn:focus-visible { outline: 3px solid var(--ah-anthracite); outline-offset: 4px; }

.preis-bahn .aufb-preis-karte {
	flex: 0 0 min(26rem, 78vw);
	/* Alles hier ist compositorfreundlich: transform, opacity, filter. Kein
	   width/height, kein margin — sonst rechnet der Browser bei jedem Bild das
	   Layout neu und es ruckelt. */
	transform:
		perspective(1400px)
		translateZ(calc(var(--d, 0) * -140px))
		rotateY(calc(var(--seite, 0) * var(--d, 0) * 22deg))
		scale(calc(1 - var(--d, 0) * 0.06));
	/* ⚠️ Die Unschärfe hängt an --db, nicht an --d. --db ist absichtlich grob
	   gestuft: Eine Weichzeichnung muss der Browser bei jeder Änderung neu
	   rastern, und das ist die teuerste Stelle der ganzen Bahn. In feinen
	   Schritten rechnet er sie sechzigmal pro Sekunde neu und die Bewegung
	   stockt; in groben fällt der Unterschied nicht auf, die Arbeit aber schon. */
	filter: blur(calc(var(--db, 0) * 3.5px));
	opacity: calc(1 - var(--d, 0) * 0.4);
	/*
	 * ⚠️ KEIN transition auf transform/filter. Diese Werte hängen direkt am
	 * Finger: Beim Ziehen setzt das Skript sie in jedem Bild neu. Eine
	 * Überblendung darüber liefe der Geste hinterher und ließe sich nicht
	 * mitten in der Bewegung packen und umkehren.
	 */
	/* Nur transform und opacity ankündigen. `will-change: filter` legt eine
	   zusätzliche Ebene an, die bei jeder Radiusänderung ohnehin verworfen
	   wird — das kostet mehr, als es spart. */
	will-change: transform, opacity;
}

/* Standanzeige */
.preis-punkte { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-1); }
.preis-punkt {
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	background: var(--ah-line);
	transition: background var(--transition), transform var(--transition);
}
.preis-punkt.ist-da { background: var(--ah-anthracite); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
	/*
	 * Kein Verschwimmen, kein Kippen, kein Zurückweichen. Wer
	 * Bewegungsreduktion eingestellt hat, bekommt drei ruhige Karten, die
	 * lediglich seitlich scrollen — die Information bleibt vollständig, nur die
	 * Raumwirkung entfällt.
	 */
	.preis-bahn .aufb-preis-karte { transform: none; filter: none; opacity: 1; }
	.preis-punkt { transition: none; }
}
.aufb-preis-karte {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--space-3);
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}
.aufb-preis-klasse {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-lg);
	color: var(--ah-anthracite);
	margin: 0;
}
.aufb-preis-was { font-size: var(--fs-sm); color: var(--ah-muted); margin: 0; }
.aufb-preis-wert {
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-2xl);
	line-height: 1.05;
	color: var(--ah-anthracite);
	margin: var(--space-1) 0 0;
}
/*
 * Hervorgehobene Klasse (07.09.2026, Auftraggeber).
 *
 * Anthrazit gefuellt statt umrandet: Auf einer Seite aus weissen Karten ist die
 * dunkle die eine, die auffaellt — ohne eine zusaetzliche Farbe einzufuehren.
 * Gold waere hier falsch, das bleibt Logo und Bewertungssternen.
 *
 * KEIN transform/scale zum Anheben. Eine vergroesserte Karte in einer Reihe
 * gleicher Karten verschiebt die Grundlinien der Nachbarn optisch und macht die
 * Reihe unruhig; die Farbe reicht voellig.
 */
/*
 * Die eine dunkle Karte. Auf hellem Grund ist ein einzelnes schwarzes Feld das
 * Auffaelligste, was es gibt — dafuer braucht es keine zweite Farbe.
 */
.aufb-preis-karte--hervor {
	background: var(--ah-anthracite);
	border-color: var(--ah-anthracite);
	box-shadow: var(--shadow-lift);
}
.aufb-preis-karte--hervor .aufb-preis-klasse,
.aufb-preis-karte--hervor .aufb-preis-wert { color: var(--ah-white); }
.aufb-preis-karte--hervor .aufb-preis-was { color: rgba(255, 255, 255, 0.72); }
.aufb-preis-marke {
	align-self: flex-start;
	margin: 0 0 0.35rem;
	padding: 0.2em 0.7em;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.16);
	color: var(--ah-white);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* Der Pflichthinweis zu den „ab"-Preisen. Leise, aber nicht versteckt: Er
   begrenzt die Zusage und muss deshalb lesbar bleiben. */
.aufb-preise-fuss {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	max-width: 62ch;
}
/* Auf schmalen Bildschirmen bleibt die Bahn eine Bahn — sie ist dort sogar
   naheliegender als am Schreibtisch, weil Wischen die natuerliche Geste ist.
   Nur die Karte wird flacher, damit sie nicht die halbe Hoehe frisst. */
@media (max-width: 620px) {
	.preis-bahn { padding-inline: max(0px, calc(50% - 39vw)); }
	.aufb-preis-karte { padding: var(--space-2); }
	.aufb-preis-wert { font-size: var(--fs-xl); }
}

/* Aufbereitung: FAQ auf hellem, cleanem Grund (statt grünem Foto wie bei Ankauf). */
.aufb-faq { background: var(--ah-surface); }

/* Ablauf: echte 3er-Sequenz mit Nummern */
.aufbereitung-ablauf { background: var(--ah-surface); }
.aufb-ablauf-kopf { margin-bottom: var(--space-4); max-width: 46ch; }
.aufb-ablauf-kopf h2 { margin: 0; }
.aufb-ablauf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	counter-reset: none;
}
.aufb-schritt { padding-top: var(--space-2); border-top: 2px solid var(--ah-anthracite); }
.aufb-schritt-nr {
	display: block;
	font-family: var(--font-cond);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--ah-anthracite);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.6rem;
}
.aufb-schritt h3 { font-size: 1.35rem; margin: 0 0 0.4rem; }
.aufb-schritt p { margin: 0; color: var(--ah-text); line-height: 1.6; }

/* Dunkles CTA-Band (site-weit: Aufbereitung, Kontakt, Listen-Seiten) */
.cta-band { background: #141416; color: var(--ah-white); padding-block: clamp(2.5rem, 6vw, var(--space-5)); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.cta-band-text h2 { color: var(--ah-white); margin: 0 0 0.4rem; }
.cta-band-text p { margin: 0; color: rgba(255, 255, 255, 0.78); max-width: 48ch; line-height: 1.6; }
.cta-band-aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* Varianten: mittig (Kontakt) und Foto rechts außen (Vermietung) */
.cta-band--mittig .cta-band-inner { flex-direction: column; align-items: center; text-align: center; }
.cta-band--mittig .cta-band-text p { margin-inline: auto; }
.cta-band--foto-rechts .cta-band-inner > .cta-band-foto { order: 3; }
@media (min-width: 901px) {
	.cta-band--foto-rechts .cta-band-inner { flex-wrap: nowrap; }
	.cta-band--foto-rechts .cta-band-text p { max-width: 38ch; }
	.cta-band--foto-rechts .cta-band-aktionen { flex: 0 0 auto; }
}
/* Optional: Ansprechpartner mit Foto im Band */
.cta-band-wer { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); }
.cta-band-foto {
	width: clamp(88px, 10vw, 120px);
	height: clamp(88px, 10vw, 120px);
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	flex: 0 0 auto;
	border: 2px solid rgba(255, 255, 255, 0.25);
}
.cta-band-text p.cta-band-name {
	margin-top: 0.7rem;
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.btn-outline-hell {
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: var(--ah-white);
	background: transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-outline-hell:hover { background: var(--ah-white); color: var(--ah-anthracite); border-color: var(--ah-white); }

/* Aufbereitung: BMW-Heck mittig — Bildausschnitt höher als Standard */
.aufbereitung-hero .uebersicht-hero-img { object-position: center 58%; }

@media (max-width: 900px) {
	.aufb-intro-grid { grid-template-columns: 1fr; }
	.aufb-ablauf { grid-template-columns: 1fr; gap: var(--space-3); }
	.cta-band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
	.cta-band-wer { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Textseiten (page.php): AGB, Widerrufsbelehrung, Datenschutz, Impressum
   -------------------------------------------------------------------------- */

/*
 * Seitenkopf der Rechtsseiten. Hier standen am 14.09.2026 kurz ein zweites
 * Logo und die Anschrift rechts daneben; der Auftraggeber hat beides verworfen
 * („sieht komisch aus kann weg") — das Logo steht schon in der Kopfleiste.
 * Geblieben ist die Linie, die den Text vom Kopf absetzt.
 */
.seite-briefkopf {
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-4);
	border-bottom: 2px solid var(--ah-anthracite);
}
/* Silbentrennung (18.09.2026): „Geschäftsbedingungen" passte bei 375 px nicht in
   die Zeile und schob die AGB-Seite 5 px zur Seite. */
.seite-briefkopf h1 { margin: 0; hyphens: auto; overflow-wrap: break-word; }

.seite-text-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: var(--space-4);
	align-items: start;
}
.seite-text-grid .rechtstext { max-width: 70ch; }
/* minmax(0, 1fr) statt 1fr (18.09.2026): Bei 1fr wird die Spalte so breit wie das
   längste unteilbare Stück im Text. In der Widerrufsbelehrung ist das die Schreiblinie
   des Muster-Widerrufsformulars (56 Unterstriche) — die Seite war bei 375 px 508 px breit. */
@media (max-width: 900px) {
	.seite-text-grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Seitenleiste: fuellt die Flaeche, die der schmale Text frei laesst.
 *
 * ⚠️ Der Rueckfallwert 104px ist die gemessene Hoehe des Seitenkopfs, nicht
 * geraten. Am 14.09.2026 stand dort 80px — acht Pixel zu wenig, und die
 * Ueberschrift der Leiste verschwand unter dem Kopf. `--ah-kopf` setzt
 * main.js jetzt auf jeder Seite (vorher nur auf der Startseite) und rechnet
 * die Adminleiste mit ein.
 */
.seite-neben { position: sticky; top: calc(var(--ah-kopf, 104px) + 1.25rem); display: grid; gap: var(--space-2); }
@media (max-width: 900px) {
	.seite-neben { position: static; }
}
.seite-neben-block {
	background: #FAFAF9;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-2);
}
.seite-neben-block h2 {
	font-family: var(--font-cond);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}
.seite-neben-block p { font-size: 0.9rem; color: var(--ah-muted); margin: 0 0 0.6rem; }
.seite-neben-liste { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.seite-neben-liste li { padding: 0.3rem 0; border-top: 1px solid var(--ah-line); }
.seite-neben-liste li:first-child { border-top: 0; }
.seite-neben-liste a { color: var(--ah-ink); }
.seite-neben-liste a:hover { color: var(--ah-gold); }
.seite-neben-liste [aria-current="page"] { color: var(--ah-muted); font-weight: 600; }
.seite-neben-nummern { font-size: 1rem !important; color: var(--ah-ink) !important; line-height: 1.7; }
.seite-neben-nummern a { color: var(--ah-ink); font-weight: 600; }
.seite-neben-nummern a:hover { color: var(--ah-gold); }
.seite-neben-name,
.kontakt-name { color: var(--ah-muted); font-size: 0.85rem; font-weight: 400; }
.seite-neben-zeiten { margin: 0 !important; font-size: 0.85rem !important; }

/*
 * Die Texte kommen von der Kanzlei und bringen ihre eigene Gliederung mit:
 * h2 je Abschnitt, h3 je Unterpunkt, nummerierte Absaetze mit <b>1.1</b>.
 * Angefasst wird der Text nicht — nur die Typografie darum herum. Deshalb
 * steht hier ausschliesslich, was auf die gelieferten Auszeichnungen greift.
 */
/* overflow-wrap: anywhere — überlange Stücke im Kanzlei-Text (Schreiblinien aus
   Unterstrichen, lange Adressen) umbrechen statt die Seite zu verbreitern. */
.rechtstext { color: var(--ah-ink); line-height: 1.75; overflow-wrap: anywhere; }
/*
 * Barlow Condensed traegt schmal: Bei 1,25 rem stand die Abschnitts-
 * ueberschrift gemessen kaum groesser da als der Fliesstext daneben, die
 * Gliederung eines 26-KB-Textes war dadurch nicht zu erkennen.
 */
.rechtstext h2 {
	font-family: var(--font-cond);
	font-size: clamp(1.45rem, 2.6vw, 1.8rem);
	font-weight: 600;
	margin: var(--space-4) 0 var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
}
.rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: var(--space-3) 0 0.4rem;
}
.rechtstext p { margin: 0 0 0.9rem; }
.rechtstext ul,
.rechtstext ol { margin: 0 0 1rem 1.4rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext a {
	color: var(--ah-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}
.rechtstext a:hover { color: var(--ah-gold); }
.rechtstext b,
.rechtstext strong { font-weight: 600; }

/* Das Inhaltsverzeichnis der AGB: die einzige Liste direkt hinter einer h2. */
.rechtstext h2 + ol { margin-bottom: var(--space-3); }

/* „Stand: …" der Kanzlei steht per float rechts — Platz dafuer freihalten. */
.rechtstext > div:last-child { clear: both; }

/* --------------------------------------------------------------------------
   Impressum (18.09.2026) — Blöcke mit Linien dazwischen, kein Kasten
   (Auftraggeber: „zwischen Striche zwischen Textblock, keinen Kasten").
   Gegliedert von autohoss_impressum_gliedern() in inc/rechtsseiten.php; der
   Wortlaut der Kanzlei bleibt unverändert. Am Desktop Anschrift und Kontakt
   nebeneinander, am Handy untereinander.
   -------------------------------------------------------------------------- */
.impressum-block {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-4);
	padding: var(--space-3) 0 var(--space-2);
	border-top: 1px solid var(--ah-line);
}
.rechtstext .impressum-block p { margin: 0 0 1rem; }
.impressum-block .impressum-marke,
.impressum-block .impressum-schlichtung { grid-column: 1 / -1; }
.impressum-anschrift::first-line { font-weight: 600; color: var(--ah-anthracite); }
.rechtstext .impressum-marke {
	margin-bottom: var(--space-2);
	font-family: var(--font-cond);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ah-muted);
}
.rechtstext .impressum-schlichtung { font-size: var(--fs-sm); color: var(--ah-muted); }
/* Der „Stand" der Kanzlei bringt 8em Abstand als Inline-Stil mit — hier reicht eine Linie. */
.rechtstext #itkanzlei_txt_copyright {
	margin-top: 0 !important;
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
	color: var(--ah-muted);
}
/* Linie und Abstand am Abschnitt selbst: Die h2 ist dort erstes Kind, und
   `.rechtstext h2:first-child` nimmt ihr Rand und Linie. */
.impressum-zusatz {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--ah-line);
}
.rechtstext .impressum-zusatz h2 { margin-bottom: var(--space-2); }
.rechtstext .impressum-liste { margin: 0; padding: 0; list-style: none; }
.rechtstext .impressum-liste li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ah-line);
}
.rechtstext .impressum-liste li:last-child { border-bottom: 0; }
.impressum-nebentext { color: var(--ah-muted); text-align: right; }
@media (max-width: 640px) {
	.impressum-block { grid-template-columns: 1fr; }
	.rechtstext .impressum-liste li { flex-direction: column; gap: 0.15rem; }
	.impressum-nebentext { text-align: left; }
}

/* Suchergebnisse (index.php) */
.suche-seite .page-title { margin-bottom: 0.2rem; }
.suche-zahl { color: var(--ah-muted); margin-bottom: var(--space-2); }
.suche-form {
	display: flex;
	gap: 0.6rem;
	max-width: 34rem;
	margin-bottom: var(--space-4);
}
.suche-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	background: var(--ah-white);
	font: inherit;
	color: var(--ah-anthracite);
}
.suche-form input[type="search"]:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 2px; }
.suche-liste { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.suche-treffer { padding-block: var(--space-2); border-top: 1px solid var(--ah-line); }
.suche-treffer:last-child { border-bottom: 1px solid var(--ah-line); }
.suche-typ {
	font-family: var(--font-cond);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ah-muted);
	margin-bottom: 0.15rem;
}
.suche-titel { font-size: var(--fs-lg); margin-bottom: 0.3rem; }
.suche-titel a { color: var(--ah-anthracite); }
.suche-titel a:hover { color: var(--ah-gold); }
.suche-anriss { color: var(--ah-muted); margin: 0; }
.suche-leer { max-width: 60ch; padding-block: var(--space-3); }
.suche-leer h1,
.suche-leer h2 { margin-bottom: var(--space-2); }
.suche-leer p { color: var(--ah-muted); }
.suche-ziele { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: var(--space-3) 0 var(--space-2); }
.suche-hilfe { font-size: 0.95rem; }
@media (max-width: 480px) {
	.suche-form { flex-direction: column; }
}

/* 404-Seite */
.fehler-404-inner { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.fehler-404-code {
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: clamp(6rem, 18vw, 12rem);
	line-height: 1;
	color: var(--ah-line);
	margin-bottom: 0.2em;
}
.fehler-404-inner h1 { margin-bottom: var(--space-2); }
.fehler-404-text { color: var(--ah-muted); max-width: 52ch; margin: 0 auto var(--space-3); }
.fehler-404-aktionen { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
.fehler-404-suche {
	display: flex;
	gap: 0.6rem;
	max-width: 30rem;
	margin: 0 auto var(--space-3);
}
.fehler-404-suche input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	background: var(--ah-white);
	font: inherit;
	color: var(--ah-anthracite);
}
.fehler-404-suche input[type="search"]:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 2px; }
.fehler-404-suche .btn { flex: 0 0 auto; }
.fehler-404-ziele {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin-bottom: var(--space-2);
}
.fehler-404-ziele a { color: var(--ah-anthracite); text-decoration: underline; text-underline-offset: 0.25em; }
.fehler-404-ziele a:hover { color: var(--ah-gold); }
.fehler-404-hilfe { color: var(--ah-muted); font-size: 0.95rem; }
@media (max-width: 480px) {
	.fehler-404-suche { flex-direction: column; }
}
@media (max-width: 520px) {
	.aufb-leistungen { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Ankauf-Seite (Fahrzeugbewertung)
   -------------------------------------------------------------------------- */
/* Porsche-Hero: Scheinwerfer sitzt im oberen Drittel → Ausschnitt hochziehen. */
.ankauf-hero .uebersicht-hero-img { object-position: center 38%; }
/* Einstiegspreis der Aufbereitung (07.09.2026). Zahl in Barlow Condensed wie
   jeder andere Preis auf der Seite, der Zusatz daneben leise — er begrenzt die
   Zusage, soll sie aber nicht überschreien. Auf schmalen Bildschirmen
   untereinander, sonst bricht „inkl. MwSt., je nach Fahrzeug und Umfang"
   mitten im Satz um. */
.aufb-preis-ab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	margin: var(--space-2) 0 0;
}
.aufb-preis-ab-zahl {
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-xl);
	line-height: 1;
	color: var(--ah-white);
}
.aufb-preis-ab-zusatz {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 560px) {
	.aufb-preis-ab { flex-direction: column; gap: 0.2rem; }
}

.uebersicht-hero-cta { margin-top: var(--space-2); }

/* Ablauf in drei Schritten */
.ankauf-ablauf { background: var(--ah-surface); }
.ankauf-kopf { text-align: center; max-width: 42rem; margin: 0 auto var(--space-4); }
.ankauf-schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	counter-reset: none;
}
.ankauf-schritt {
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-3);
	box-shadow: var(--shadow-soft);
}
.ankauf-schritt-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--ah-ink);
	color: var(--ah-gold-light);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: var(--space-2);
}
.ankauf-schritt h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.ankauf-schritt p { color: var(--ah-muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }

/* Formular + Info-Spalte */
.ankauf-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}
.ankauf-formular-intro { color: var(--ah-muted); max-width: 46ch; margin: 0 0 var(--space-3); }
.ankauf-form { margin-top: var(--space-2); }
/*
 * Vorabangaben im Mietformular (Auftraggeber, 14.09.2026).
 *
 * Abgesetzt, damit im Fenster sichtbar ist: Hier fragen wir etwas anderes ab
 * als beim Kauf. Nur ein Strich und etwas Luft — ein Kasten im Kasten waere
 * im ohnehin engen Dialog zu viel.
 */
.anfrage-miete {
	border-top: 1px solid var(--ah-line);
	padding-top: var(--space-2);
	margin-top: var(--space-2);
}
.anfrage-miete .form-check { margin-bottom: 0; }

/* fieldset-Reset + Abschnittsüberschrift */
.form-block { border: 0; margin: 0 0 var(--space-3); padding: 0; }
.form-block legend {
	font-family: var(--font-cond);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	padding: 0;
	margin-bottom: var(--space-2);
}
/* HSN/TSN-Zeile: zwei schmale Felder + Hilfetext (Flex statt des 2-Spalten-Grids). */
.form-reihe--schluessel { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.form-feld--klein { flex: 0 0 auto; max-width: 12rem; }
.form-reihe--schluessel .form-hilfe { flex: 1 1 12rem; }
.form-hilfe { font-size: 0.8rem; color: var(--ah-muted); line-height: 1.5; margin: 0; align-self: center; }
.ankauf-bewertung-hinweis {
	font-size: 0.8rem;
	color: var(--ah-muted);
	line-height: 1.55;
	margin: var(--space-2) 0 0;
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
}

/* Info-Box neben dem Formular */
.ankauf-info-box {
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-3);
	position: sticky;
	/* Nur noch unter dem Seitenkopf: Die Fortschrittsleiste klebt seit dem
	   14.09.2026 nicht mehr, ihre Hoehe muss also nicht mehr eingerechnet
	   werden. `--ah-kopf` setzt main.js auf jeder Seite. */
	top: calc(var(--ah-kopf, 104px) + 1rem);
}
.ankauf-info-box h2 { font-size: 1.25rem; margin: 0 0 var(--space-2); }
.ankauf-vorteile { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ankauf-vorteile li { display: flex; gap: 0.7rem; align-items: flex-start; }
.ankauf-vorteil-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: rgba(201, 162, 39, 0.14);
	color: var(--ah-gold-deep);
	margin-top: 1px;
}
.ankauf-vorteil-text { display: flex; flex-direction: column; }
.ankauf-vorteil-text strong { color: var(--ah-ink); font-size: 0.98rem; }
.ankauf-vorteil-text span { color: var(--ah-muted); font-size: var(--fs-sm); line-height: 1.5; }
.ankauf-info-direkt { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ah-line); }
.ankauf-info-direkt p { font-weight: 600; margin: 0 0 0.7rem; }
/* Zwei schwarze Kontakt-Blöcke (Anruf + WhatsApp, Nummer von David) */
.ankauf-direkt-btns { display: grid; gap: 0.6rem; }
.ankauf-direkt-btn {
	display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem;
	background: var(--ah-ink); color: var(--ah-white); border-radius: var(--radius-sm);
	transition: background var(--transition), transform var(--transition);
}
.ankauf-direkt-btn:hover { background: #000; color: var(--ah-white); transform: translateY(-1px); }
.ankauf-direkt-icon { flex: 0 0 auto; display: inline-flex; color: var(--ah-gold-light); }
.ankauf-direkt-text { display: flex; flex-direction: column; line-height: 1.2; }
.ankauf-direkt-text strong { font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.02em; }
.ankauf-direkt-text span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.66); }

@media (max-width: 900px) {
	.ankauf-grid { grid-template-columns: 1fr; }
	.ankauf-info-box { position: static; }
	.ankauf-schritte { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.form-reihe--schluessel { flex-direction: column; align-items: stretch; }
	.form-feld--klein { max-width: none; }
}

/* --------------------------------------------------------------------------
   Ankauf-Seite — geführtes Bewertungserlebnis (Runde 2, 21.07.)
   Vertrauensleiste, Fortschritt, Live-Prüfung, Tipps, schwarzer Block, FAQ.
   -------------------------------------------------------------------------- */

/* Vertrauensleiste direkt unter dem Hero */
.ankauf-trust { background: var(--ah-ink); color: var(--ah-white); }
.ankauf-trust-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: var(--space-3);
}
.ankauf-trust-item { display: flex; align-items: center; gap: 0.7rem; }
.ankauf-trust-icon { flex: 0 0 auto; color: var(--ah-gold-light); display: inline-flex; }
.ankauf-trust-item span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ankauf-trust-item strong { font-family: var(--font-cond); font-size: 1rem; }
.ankauf-trust-item span span, .ankauf-trust-item span:last-child { font-size: 0.8rem; }
.ankauf-trust-item span:last-child { color: rgba(255,255,255,0.62); }
.ankauf-trust-item strong { color: var(--ah-white); }
@media (max-width: 800px) { .ankauf-trust-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ankauf-trust-inner { grid-template-columns: 1fr; } }

.ankauf-kopf-intro { color: var(--ah-muted); max-width: 60ch; margin: var(--space-2) auto 0; }

/* Fortschrittsleiste — steht fest oben, klebt NICHT mit.
   Bis zum 14.09.2026 klebte sie unter dem Kopf. Auftraggeber: „das soll sich
   nicht mitziehen". Damit entfällt auch der Grund für die knappe Polsterung
   (die stammte vom 11.08. und war ein Zugeständnis an das Kleben: zusammen mit
   dem Kopf belegte die Leiste auf dem Handy sonst 245 von 812 px dauerhaft).
   Stehend darf sie wieder atmen. */
.ankauf-progress {
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 1.15rem clamp(1rem, 2.5vw, 2rem);
	margin-bottom: var(--space-4);
}
.ankauf-progress-steps {
	list-style: none; margin: 0 0 0.65rem; padding: 0;
	display: flex; justify-content: space-between; gap: 0.5rem;
}
.ankauf-progress-step { display: flex; align-items: center; gap: 0.5rem; color: var(--ah-muted); font-size: var(--fs-sm); min-width: 0; }
.ankauf-progress-num {
	flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ah-surface); color: var(--ah-muted); border: 1px solid var(--ah-line);
	font-family: var(--font-cond); font-weight: 700; font-size: 0.95rem; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ankauf-progress-label { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ankauf-progress-step.is-aktiv { color: var(--ah-ink); }
.ankauf-progress-step.is-aktiv .ankauf-progress-num { background: var(--ah-ink); color: var(--ah-white); border-color: var(--ah-ink); }
.ankauf-progress-step.is-fertig { color: var(--ah-gold-deep); }
.ankauf-progress-step.is-fertig .ankauf-progress-num { background: var(--ah-ok); color: #fff; border-color: var(--ah-ok); }
.ankauf-progress-step.is-fertig .ankauf-progress-num::after { content: "✓"; }
.ankauf-progress-step.is-fertig .ankauf-progress-num { font-size: 0; }
.ankauf-progress-step.is-fertig .ankauf-progress-num::after { font-size: 1rem; }
.ankauf-progress-track { height: 8px; border-radius: 999px; background: var(--ah-surface); overflow: hidden; }
.ankauf-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ah-gold-deep), var(--ah-gold)); transition: width 0.4s var(--ease); }
.ankauf-progress-text { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ah-muted); text-align: right; }
@media (max-width: 620px) {
	.ankauf-progress-label { display: none; }
	.ankauf-progress-steps { justify-content: space-around; }
}

/* Fahrzeugart-Auswahl (Auto/Motorrad) */
.form-wahl { display: flex; gap: 0.75rem; margin-bottom: var(--space-3); }
.form-wahl-karte { position: relative; flex: 1 1 0; cursor: pointer; }
.form-wahl-karte input { position: absolute; opacity: 0; pointer-events: none; }
.form-wahl-inhalt {
	display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
	padding: var(--space-2); border: 1.5px solid var(--ah-line); border-radius: var(--radius-sm);
	color: var(--ah-anthracite); font-family: var(--font-cond); font-weight: 600; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.form-wahl-karte input:checked + .form-wahl-inhalt { border-color: var(--ah-ink); background: var(--ah-ink); color: var(--ah-white); }
.form-wahl-karte input:focus-visible + .form-wahl-inhalt { outline: 3px solid var(--ah-ink); outline-offset: 2px; }
.form-wahl-karte input:checked + .form-wahl-inhalt svg { color: var(--ah-gold-light); }

/* Tipp-Box (gelb, geführter Assistent) */
.form-tip {
	display: flex; gap: 0.7rem; align-items: flex-start;
	background: #FCF4DA; border: 1px solid #EBD9A0;
	border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-bottom: var(--space-3);
	font-size: var(--fs-sm); line-height: 1.5; color: #5c4d1e;
}
.form-tip-icon { flex: 0 0 auto; color: var(--ah-gold-deep); margin-top: 1px; }
.form-tip strong { color: var(--ah-ink); }

/* Nummer im Abschnittstitel */
.form-block legend { display: flex; align-items: center; gap: 0.6rem; }
.form-block-nr {
	width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ah-ink); color: var(--ah-white);
	display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; flex: 0 0 auto;
}
.form-feld-titel { font-size: var(--fs-sm); font-weight: 600; color: var(--ah-anthracite); }
.form-optional { color: var(--ah-muted); font-weight: 400; }
/* Icons in Feld-Labels */
.form-feld > span .spec-svg { vertical-align: -3px; color: var(--ah-gold-deep); margin-right: 2px; }

/* Live-Prüfung: grün gültig, rot ungültig — reiner Rahmen, kein Symbol.
   Der Ring (box-shadow) macht die Rückmeldung deutlich sichtbar; :not(:focus),
   damit er dem Fokus-Ring beim Tippen nicht in die Quere kommt. */
.form-feld { position: relative; }
.form-feld input, .form-feld select, .form-feld textarea { transition: border-color var(--transition), box-shadow var(--transition); }
.form-feld.is-valid > input, .form-feld.is-valid > select, .form-feld.is-valid > textarea { border-color: var(--ah-ok); }
.form-feld.is-valid > input:not(:focus), .form-feld.is-valid > select:not(:focus), .form-feld.is-valid > textarea:not(:focus) { box-shadow: 0 0 0 3px var(--ah-ok-ring); }
.form-feld.is-invalid > input, .form-feld.is-invalid > select, .form-feld.is-invalid > textarea { border-color: var(--ah-err); }
.form-feld.is-invalid > input:not(:focus), .form-feld.is-invalid > select:not(:focus), .form-feld.is-invalid > textarea:not(:focus) { box-shadow: 0 0 0 3px var(--ah-err-ring); }
/* Kein Haken/Kreuz-Symbol mehr (Auftraggeber-Wunsch 22.07.) — die Rückmeldung
   läuft rein über die Rahmenfarbe (grün gültig / rot ungültig, unten). */
.feld-status { display: none; }
.form-check.is-invalid { color: var(--ah-err); }
.form-check.is-invalid input { outline: 2px solid var(--ah-err); outline-offset: 2px; }

/* ---------- Ankauf: Einstiegsbild neben der Einleitung ----------
   Das Bild bleibt unbeschnitten (16:9 wie die Datei). In der halben Spalte
   wird es rund 315 px hoch — groß genug, um den Wagen zu zeigen, klein genug,
   dass die drei Schritte darunter noch in den Blick kommen. */
/* Seit 10.08. zeigt der Ausschnitt NUR den Wagen; die Halle rechts ist weg.
   Damit ist das Bild fast quadratisch (1,111:1) statt 16:9 — in einer halben
   Spalte wäre es 518 px hoch und würde den Text daneben erschlagen. Die
   Bildspalte ist deshalb schmaler als die Textspalte. */
.ankauf-einstieg-paar {
	display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--space-4);
	align-items: center; margin-bottom: var(--space-4);
}
.ankauf-einstieg-figur { margin: 0; }
.ankauf-einstieg-figur picture { display: block; }
.ankauf-einstieg-img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* .ankauf-kopf ist sonst zentriert und schmal (auch in der FAQ weiter unten).
   Neben dem Bild muss es linksbündig sein und die Spalte ausfüllen — deshalb
   ein eigener Zusatz statt einer Änderung an der Grundklasse. */
.ankauf-kopf--neben-bild { text-align: left; max-width: none; margin: 0; }
.ankauf-kopf--neben-bild .ankauf-kopf-intro { margin-left: 0; margin-right: 0; }
.ankauf-kopf--neben-bild .ankauf-kopf-intro + .ankauf-kopf-intro { margin-top: var(--space-2); }

@media (max-width: 900px) {
	/* Text zuerst, Bild darunter: Auf dem Handy soll die Überschrift die
	   Reihenfolge bestimmen, nicht das Foto. */
	.ankauf-einstieg-paar { grid-template-columns: 1fr; gap: var(--space-3); }
	.ankauf-einstieg-figur { order: 2; }
	.ankauf-kopf--neben-bild { order: 1; text-align: center; }
	.ankauf-kopf--neben-bild .ankauf-kopf-intro { margin-left: auto; margin-right: auto; }
}

/* ---------- Foto-Upload im Ankaufsformular ---------- */
.ankauf-fotos { margin-top: var(--space-2); }
.ankauf-fotos .form-hilfe { margin: 0.35rem 0 0.7rem; }

/* Die ganze Fläche ist das Label des Dateifelds — anklickbar ohne extra Knopf.
   Das Feld selbst bleibt im Tab-Fluss (nicht display:none), liegt aber
   unsichtbar darüber; den sichtbaren Fokus übernimmt .ist-fokus. */
.foto-drop {
	position: relative; display: block; cursor: pointer;
	/* NICHT --ah-line wie bei den übrigen Feldern: Auf --ah-surface kommt die
	   Linie damit auf 1,17:1 und ist schlicht nicht zu sehen — die gestrichelte
	   Kante ist hier aber der einzige Hinweis „hier etwas ablegen". #9C9C99
	   liegt bei 2,5:1: deutlich sichtbar, ohne wie ein Fehlerrahmen zu wirken. */
	border: 1.5px dashed #9C9C99; border-radius: var(--radius-sm);
	background: var(--ah-surface); padding: var(--space-2);
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.foto-drop input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}
.foto-drop:hover { border-color: var(--ah-gold-deep); background: var(--ah-white); }
.foto-drop.ist-drueber {
	border-color: var(--ah-gold-deep); border-style: solid; background: var(--ah-white);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.foto-drop.ist-fokus { border-color: var(--ah-anthracite); box-shadow: 0 0 0 3px rgba(48, 50, 55, 0.18); }

.foto-drop-inner { display: flex; align-items: center; gap: 0.85rem; pointer-events: none; }
.foto-drop-icon { flex: 0 0 auto; display: inline-flex; color: var(--ah-gold-deep); }
.foto-drop-icon svg { width: 30px; height: 30px; }
.foto-drop-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.foto-drop-titel { font-size: var(--fs-sm); font-weight: 600; color: var(--ah-anthracite); }
.foto-drop-sub { font-size: 0.8rem; color: var(--ah-muted); line-height: 1.45; }

/* Vorschau. auto-fill statt fester Spaltenzahl: Auf dem Handy passen zwei
   Bilder nebeneinander, auf dem Rechner vier — ohne eigene Umbruchpunkte. */
.foto-liste {
	list-style: none; margin: 0.7rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem;
}
.foto-eintrag {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--ah-line); border-radius: var(--radius-sm); overflow: hidden;
	background: var(--ah-white);
}
/* 4:3 statt fester 96 px Höhe. Die feste Höhe ergab bei 170 px Breite ein
   Verhältnis von 1,77:1 und schnitt damit fast ein Viertel jedes Handyfotos
   weg — man soll aber erkennen können, welches Bild man gerade entfernt. */
.foto-eintrag img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ah-surface); }
.foto-eintrag-info { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.5rem; min-width: 0; }
.foto-eintrag-name {
	font-size: 0.75rem; color: var(--ah-anthracite);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foto-eintrag-groesse { font-family: var(--font-cond); font-size: 0.75rem; color: var(--ah-muted); }

/* 32px Tastfläche — die Vorschaubilder sind klein, der Entfernen-Knopf darf
   es nicht sein. */
.foto-weg {
	position: absolute; top: 4px; right: 4px; width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer; padding: 0;
	background: rgba(23, 24, 26, 0.72); color: var(--ah-white);
	transition: background-color var(--transition), transform var(--transition);
}
.foto-weg svg { width: 15px; height: 15px; }
.foto-weg:hover { background: var(--ah-err); transform: scale(1.08); }
.foto-weg:focus-visible { outline: 2px solid var(--ah-white); outline-offset: -4px; }

.foto-status { font-size: 0.8rem; color: var(--ah-muted); margin: 0.5rem 0 0; line-height: 1.5; min-height: 1.2em; }
.foto-status.ist-fehler { color: var(--ah-err); }

/* Absende-Zustand: sichtbar gesperrt, aber nicht ausgegraut bis zur
   Unlesbarkeit — der Text nennt gerade die Zahl der Fotos und die Datenmenge. */
.btn.ist-am-senden { opacity: 0.75; cursor: progress; pointer-events: none; }

@media (hover: none) {
	.foto-drop:hover { border-color: var(--ah-line); background: var(--ah-surface); }
	.foto-weg:hover { background: rgba(23, 24, 26, 0.72); transform: none; }
	/* Am Finger darf der Knopf größer sein als an der Maus — 32 px erfüllen die
	   Richtlinie zwar, treffen sich auf einer 163 px schmalen Kachel aber schlecht. */
	.foto-weg { width: 40px; height: 40px; }
	.foto-weg svg { width: 17px; height: 17px; }
}

/* Ausstattung als Chips */
.form-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; margin-top: 0.4rem; }
.form-check-chip { position: relative; display: block; cursor: pointer; }
/* Feste 1 px statt Chip-Breite: Das Raster steckt in einem `.form-feld`, dessen
   Regel `input { width: 100% }` (oben) auch die Checkbox trifft. Sie blieb damit
   so breit wie der Chip, und weil `left` auf `auto` steht, schob der
   Browser-Standardabstand (margin-left: 4px) sie im letzten Rasterfeld genau
   4 px über die Kante — gemessener Querlauf des Formulars. Kein `display: none`:
   die Checkbox muss per Tab erreichbar bleiben (der sichtbare Fokusring sitzt
   über `input:focus-visible + .chip-box` auf dem Chip). */
.form-check-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
/* Abgerundetes Rechteck (kein Pill) + Text-Umbruch — lange Labels wie
   „Panorama-/Schiebedach" liefen im Pill sonst über. Auswahl nur über Farbe +
   gefüllten Kreis, kein Haken (Auftraggeber-Wunsch). */
.chip-box {
	display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem;
	border: 1.5px solid var(--ah-line); border-radius: var(--radius-sm); font-size: var(--fs-sm);
	color: var(--ah-anthracite); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); line-height: 1.25; min-height: 2.9rem;
}
.chip-box::before {
	content: ""; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	border: 1.5px solid var(--ah-line); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.chip-t { min-width: 0; overflow-wrap: anywhere; }
.form-check-chip input:checked + .chip-box { border-color: var(--ah-ok); background: var(--ah-ok-bg); color: var(--ah-ok); }
.form-check-chip input:checked + .chip-box::before { background: var(--ah-ok); border-color: var(--ah-ok); }
.form-check-chip input:focus-visible + .chip-box { outline: 3px solid var(--ah-ink); outline-offset: 2px; }

/* Kleiner schwarzer Block „Warum unsere Bewertung fair ist" (solide, kompakt) */
.ankauf-warum { background: var(--ah-ink); color: var(--ah-white); padding-block: var(--space-4); }
.ankauf-warum-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ankauf-warum-text h2 { color: var(--ah-white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.6rem; }
.ankauf-warum-text p { color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 52ch; }
.ankauf-warum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ankauf-warum-liste li { display: flex; align-items: center; gap: 0.7rem; color: rgba(255, 255, 255, 0.92); font-size: var(--fs-sm); }
.ankauf-warum-liste .spec-svg { color: var(--ah-gold-light); flex: 0 0 auto; }
@media (max-width: 820px) { .ankauf-warum-inner { grid-template-columns: 1fr; } }

/* FAQ auf dem grünen Blattwerk-Hintergrund: heller Kopftext, Karten bleiben weiß */
.ankauf-faq.foto-flaeche .ankauf-kopf h2 { color: var(--ah-white); }
.ankauf-faq.foto-flaeche .ankauf-kopf-intro { color: rgba(255, 255, 255, 0.82); }
.ankauf-faq.foto-flaeche .ankauf-faq-hilfe { color: rgba(255, 255, 255, 0.82); }
.ankauf-faq.foto-flaeche .ankauf-faq-hilfe a { color: var(--ah-gold-light); }

:root { interpolate-size: allow-keywords; } /* erlaubt height auto<->0 zu animieren (FAQ) */

/* FAQ (native <details>) */
.faq-liste { max-width: 60rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq-item { border: 1px solid var(--ah-line); border-radius: var(--radius-sm); background: var(--ah-white); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.faq-item[open] { border-color: var(--ah-gold); box-shadow: var(--shadow-soft); }
.faq-frage {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.2rem; cursor: pointer; font-family: var(--font-cond); font-weight: 600;
	font-size: 1.05rem; color: var(--ah-ink); list-style: none;
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage:hover { color: var(--ah-gold-deep); }
.faq-icon { flex: 0 0 auto; color: var(--ah-gold-deep); transition: transform var(--transition); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-antwort { padding: 0 1.2rem 1.2rem; color: var(--ah-text); line-height: 1.6; }
.faq-antwort p { margin: 0; }
/* Weiches Auf-/Zuklappen — moderne Browser; ältere ignorieren ::details-content (Instant, wie bisher). */
.faq-item::details-content { block-size: 0; opacity: 0; overflow: hidden; transition: block-size 0.28s var(--ease), opacity 0.28s var(--ease), content-visibility 0.28s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.ankauf-faq-hilfe { text-align: center; margin: var(--space-4) 0 0; color: var(--ah-muted); }
.ankauf-faq-hilfe a { color: var(--ah-gold-deep); font-weight: 600; text-decoration: underline; }

/* reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
	.ankauf-progress-fill, .faq-icon { transition: none; }
}

/* PAngV-Netto-Hinweis in der Fahrzeugkarte (Mietwagen mit Netto-Preis) */
.preisleiste-netto { display: block; font-size: 0.68rem; font-weight: 400; color: rgba(255, 255, 255, 0.72); margin-top: 1px; }

/* ---------------------------------------------------------------------------
   Touch-Geraete loesen :hover beim ANTIPPEN aus — der Zustand bleibt danach
   kleben, bis woanders getippt wird. Bei einer angetippten Fahrzeugkarte
   heisst das: Sie bleibt angehoben stehen.
   Statt 19 gewachsene Regeln einzeln umzubauen (Risiko ohne Gegenwert), wird
   hier nur die BEWEGUNG zurueckgenommen. Farbwechsel duerfen bleiben, die
   stoeren auf Touch nicht. Rein additiv: Am Desktop aendert sich nichts.
   --------------------------------------------------------------------------- */
@media (hover: none) {
	/* ⚠️ Die NAVIGATION ist hier bewusst NICHT dabei. Der automatisch
	   erzeugte Vorschlag hatte sie enthalten — mitsamt `.ist-aktiv`,
	   `.ist-offen` und `:focus-visible`, die gar keine Hover-Zustände sind.
	   Damit wären der Unterstrich des aktiven Menüpunkts, der Tastatur-Fokus
	   und das Aufklappen der Untermenüs kaputtgegangen. Auf Touch steuert
	   ohnehin das Burger-Menü über `.ist-offen`. */
	.btn:hover,
	.btn-gold:hover::after,
	.mega-block:hover,
	.mega-block--folgt:hover,
	.bestand-link:hover,
	.leistung:hover,
	.leistung:hover .leistung-bild,
	.fahrzeug-card:hover,
	.fahrzeug-card:hover .fahrzeug-card-media img,
	.footer-social a:hover,
	.zub-kat-tile:hover,
	.zub-kat-tile:hover .zub-kat-bg,
	.zub-kat-tile:hover .zub-kat-pfeil,
	.zubehoer-card:hover,
	.galerie-haupt:hover .galerie-zoom,
	.ankauf-direkt-btn:hover {
		transform: none;
	}
}

/* Hinweis unter der Artikelliste: loest „VB" auf. Bewusst leise — er soll
   die Frage beantworten, ohne sich vor die Artikel zu draengen. */
.zubehoer-preishinweis {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	max-width: 62ch;
}

/* ==========================================================================
   Zubehör-Schnellansicht (14.08.2026)
   Ein Klick auf eine Kachel zeigt Galerie, Daten und Beschreibung hier statt
   auf Kleinanzeigen. Der Dialog gehört zu page-zubehoer.php.
   ========================================================================== */

.zubehoer-vorschau {
	width: min(1040px, 94vw);
	/* ⚠️ FESTE Höhe, nicht max-height (14.08., nach dem ersten Test).
	   Mit max-height wuchsen die Rasterspalten trotzdem auf Inhaltshöhe —
	   gemessen 2480 px in einem 696 px hohen Dialog. Der Dialog schnitt sie mit
	   overflow: hidden ab, und weil nichts eine begrenzte Höhe hatte, konnte
	   auch nichts scrollen: Der Rest des Textes war schlicht unerreichbar.
	   Eine feste Höhe gibt den Spalten etwas, woran sie sich halten können. */
	height: min(92vh, 760px);
	padding: 0;
	border: none;
	border-radius: var(--radius);
	background: var(--ah-white);
	color: var(--ah-text);
	box-shadow: 0 30px 90px rgba(8, 9, 10, 0.4);
	overflow: hidden;
}
.zubehoer-vorschau::backdrop { background: rgba(8, 9, 10, 0.62); }
/* Einblenden — der Dialog erscheint sonst schlagartig. `allow-discrete`
   brauchen wir nicht: display bleibt gleich, nur opacity/scale laufen. */
.zubehoer-vorschau[open] { animation: vorschau-auf 0.2s var(--ease) both; }
@keyframes vorschau-auf {
	from { opacity: 0; transform: translateY(8px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.zubehoer-vorschau[open] { animation: none; }
}

.vorschau-innen {
	display: grid;
	/* minmax(0, …) auf BEIDEN Spuren: Ohne das weigert sich die Textspalte,
	   unter ihre Inhaltsbreite zu schrumpfen — dieselbe Falle wie bei den
	   Partnerkarten und im Fahrzeugraster.
	   Dasselbe in der ZEILE: `minmax(0, 1fr)` erlaubt der Reihe, kleiner als
	   ihr Inhalt zu werden. Ohne das wuchs sie auf 2480 px und riss alles mit. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
}

.vorschau-zu {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	/* 44 px — deutlich über den 24 px aus WCAG 2.5.8. Der Knopf liegt über dem
	   Bild und muss auch mit dem Daumen sicher zu treffen sein. */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ah-white);
	background: rgba(8, 9, 10, 0.55);
	transition: background var(--transition), transform var(--transition);
}
.vorschau-zu:hover { background: rgba(8, 9, 10, 0.8); transform: rotate(90deg); }

/* min-height: 0 an beiden Spalten — Flex- und Grid-Kinder haben von Haus aus
   `min-height: auto` und weigern sich damit, unter ihre Inhaltshöhe zu gehen.
   Genau daran hing, dass die Textspalte nicht scrollte. */
.vorschau-galerie { background: var(--ah-surface); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Das Bild füllt die Spalte, statt bei 4:3 aufzuhören: Vorher blieben unter dem
   Vorschaustreifen 1993 px graue Fläche, weil die Textspalte länger war. */
.vorschau-haupt { flex: 1 1 auto; min-height: 0; background: var(--ah-surface); }
/* ⚠️ contain, NICHT cover (14.08., zweite Runde).
   Mit `cover` füllte das Bild die Fläche und wurde dafür beschnitten — bei
   einem Reifensatz egal, bei der AutoHoss-Infotafel fatal: Vom Schriftzug war
   nur „utoHos" zu sehen, Adresse und Telefonnummer liefen aus dem Bild.
   Die Inserats-Bilder haben unterschiedliche Formate (960×720 und 960×640 im
   selben Artikel); `contain` zeigt jedes vollständig und legt es auf den
   ruhigen Grund, statt es zurechtzuschneiden. */
.vorschau-haupt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vorschau-streifen {
	display: flex;
	gap: 0.4rem;
	padding: 0.6rem;
	overflow-x: auto;   /* viele Bilder scrollen, statt die Spalte zu sprengen */
}
.vorschau-thumb {
	flex: 0 0 auto;
	width: 66px;
	height: 50px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.65;
	transition: opacity var(--transition), border-color var(--transition);
}
.vorschau-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vorschau-thumb:hover { opacity: 1; }
.vorschau-thumb.ist-aktiv { opacity: 1; border-color: var(--ah-gold); }

.vorschau-seite {
	padding: clamp(1.5rem, 3vw, 2.4rem);
	overflow-y: auto;
	min-width: 0;
	min-height: 0;   /* siehe oben — ohne das scrollt hier gar nichts */
	/* Der Text soll beim Scrollen nicht die ganze Seite mitziehen, wenn er
	   am Ende ist. */
	overscroll-behavior: contain;
}
.vorschau-titel {
	font-family: var(--font-cond);
	font-size: var(--fs-xl);
	color: var(--ah-anthracite);
	margin: 0 0 0.4rem;
	/* Platz für den Schließen-Knopf. Gemessen lief der Titel bis x 1058, der
	   Knopf beginnt bei 1037 — 21 px Überlappung, die Schrift lief unter dem
	   Kreis durch. 44 px Knopf + zweimal Abstand. */
	padding-right: 3.5rem;
}
.vorschau-preis {
	font-family: var(--font-cond);
	font-size: 1.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ah-anthracite);
	margin: 0 0 var(--space-2);
}
.vorschau-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0 0 var(--space-2); }
.vorschau-daten > div { display: flex; flex-direction: column; gap: 0.05rem; }
.vorschau-daten dt { font-size: var(--fs-sm); color: var(--ah-muted); }
.vorschau-daten dd { margin: 0; font-weight: 600; color: var(--ah-anthracite); }
.vorschau-text {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ah-text);
	/* Der Text kommt 1:1 aus dem Inserat und trägt dessen Zeilenumbrüche. */
	white-space: pre-line;
	margin: 0 0 var(--space-3);
}
/* Handlungsblock unter der Galerie — links, nicht hinter dem Text.
   `margin-top: auto` schiebt ihn an den unteren Rand der Spalte, damit er auch
   bei kurzen Bildern dort sitzt, wo man ihn erwartet. */
.vorschau-handeln {
	margin-top: auto;
	padding: var(--space-2) clamp(0.9rem, 2vw, 1.4rem) clamp(0.9rem, 2vw, 1.4rem);
	background: var(--ah-white);
	border-top: 1px solid var(--ah-line);
}
/* Preis über der Kauffläche — dieselbe Zahl wie rechts, aber dort, wo
   entschieden wird. */
.vorschau-kaufpreis {
	font-family: var(--font-cond);
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ah-anthracite);
	margin: 0 0 0.6rem;
}
.vorschau-kaufpreis:empty { display: none; }
/* Kaufen ist die Hauptaktion und bekommt die volle Breite. */
.zahlung-btn { display: block; width: 100%; text-align: center; }
.vorschau-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.vorschau-aktionen .btn { flex: 1 1 auto; text-align: center; }
.vorschau-abholung { font-size: var(--fs-sm); color: var(--ah-muted); margin: 0.7rem 0 0; line-height: 1.5; }
.vorschau-abholung a { color: var(--ah-anthracite); font-weight: 600; white-space: nowrap; }

/* Unter 760 px untereinander — nebeneinander bliebe für beides zu wenig. */
/* Unter 760 px untereinander: Bild oben in fester Höhe, Text darunter
   scrollend. `auto` für die Bildreihe, `minmax(0, 1fr)` für den Text — sonst
   schiebt der lange Beschreibungstext das Bild aus dem Dialog. */
/* ⚠️ Geändert am Livegang-Tag (17.09.2026, vom Auftraggeber auf dem Handy gefunden):
   Mit zwei Zeilen (`auto` + `minmax(0, 1fr)`) wurde die Kauffläche mit
   Gebrauchtware-Hinweis, Preistext und „Zum Inserat" 553 px hoch — Bild und
   Kauffläche füllten den ganzen Dialog, für Titel, Daten und Beschreibung blieben
   47 px, und die liefen unter die Knöpfe. Auf dem Handy scrollt deshalb der ganze
   Dialog als EINE Spalte. Der Schließen-Knopf klebt oben (sticky), sonst wäre er
   nach dem ersten Wischen weg. */
@media (max-width: 760px) {
	.zubehoer-vorschau { overflow-y: auto; overscroll-behavior: contain; }
	.vorschau-innen { display: block; height: auto; }
	.vorschau-zu {
		position: sticky;
		top: 0.75rem;
		right: auto;
		margin: 0 0.75rem -44px auto;
	}
	.vorschau-galerie { min-height: auto; }
	.vorschau-haupt { flex: 0 0 auto; aspect-ratio: 4 / 3; }
	.vorschau-handeln { margin-top: 0; }
	.vorschau-seite { overflow: visible; min-height: auto; }
}

/* --------------------------------------------------------------------------
   Vermietung — Verfügbarkeit und Kalender
   -------------------------------------------------------------------------- */

/*
 * Die Statusfarben stehen schon oben für Formular-Rückmeldungen. Sie hier
 * wiederzuverwenden ist bewusst: Rot heißt auf der ganzen Seite dasselbe.
 * Die Palette (Anthrazit/Weiß, Gold nur im Logo) bleibt davon unberührt —
 * Statusfarben sind Signale, keine Gestaltung.
 */
/*
 * Verfügbarkeit im selben Format wie der Öffnungszeiten-Hinweis darunter:
 * farbiger Punkt, Text in normaler Schriftfarbe, gleiche Größe, gleiche
 * Zeilenhöhe. Erst war der ganze Block getönt und der Text grün — zwei
 * Zeilen direkt untereinander, die dieselbe Frage beantworten („geht das
 * jetzt?") und völlig verschieden aussahen.
 *
 * Der Punkt ist Zugabe, nicht Träger der Aussage: „Sofort verfügbar" und
 * „Frei ab 8.9.2026" sagen es im Text. Damit ist WCAG 1.4.1 erfüllt, ohne
 * dass die Zeile schreien muss.
 */
.ah-verfuegbar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ah-ink);
}
.ah-verfuegbar-punkt {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9AA0A6;
}
.ah-verfuegbar.ist-frei .ah-verfuegbar-punkt {
	background: #1F9D55;
	box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
}
.ah-verfuegbar.ist-belegt .ah-verfuegbar-punkt {
	background: var(--ah-err);
	box-shadow: 0 0 0 3px var(--ah-err-ring);
}
.ah-verfuegbar-text { min-width: 0; }
.ah-verfuegbar strong { font-weight: 700; }

/* Im Anfrageblock steht direkt darunter der Öffnungszeiten-Hinweis. */
.detail-anfrage .ah-verfuegbar { margin-bottom: 0.3rem; }
/* Auf der Karte über der Preisleiste, mit deren seitlichem Abstand. */
.ah-verfuegbar--karte { margin: 0 var(--space-2) 0.5rem; }
.kal-punkt {
	width: 13px;
	height: 13px;
	border: 1px solid var(--ah-line);
	border-radius: 4px;
}
.kal-punkt--frei { background: var(--ah-white); }
.kal-punkt--teil { background: linear-gradient(135deg, var(--ah-white) 0 50%, var(--ah-err-bg) 50% 100%); }
.kal-punkt--voll { background: var(--ah-err-bg); border-color: var(--ah-err-ring); }
.kal-tag,
.kal-leer {
	height: 34px;
	text-align: center;
	vertical-align: middle;
	font-family: var(--font-cond);
	font-size: var(--fs-base);
	font-weight: 600;
	border-radius: var(--radius-sm);
}
.kal-tag time { display: block; line-height: 34px; }
.kal-tag.is-frei { background: var(--ah-white); border: 1px solid var(--ah-line); color: var(--ah-ink); }
.kal-tag.is-voll { background: var(--ah-err-bg); border: 1px solid var(--ah-err-ring); color: var(--ah-err); }
/* Halb schraffiert: der Tag ist angebrochen, aber nicht verloren. */
.kal-tag.is-teil {
	background: linear-gradient(135deg, var(--ah-white) 0 50%, var(--ah-err-bg) 50% 100%);
	border: 1px solid var(--ah-line);
	color: var(--ah-ink);
}
.kal-tag.is-vergangen { background: transparent; border: 1px solid transparent; color: var(--ah-line); }
.kal-tag.is-heute { box-shadow: inset 0 0 0 2px var(--ah-gold); }

@media (max-width: 420px) {
	.kal-tag, .kal-leer { height: 30px; }
	.kal-tag time { line-height: 30px; }
}

/* --------------------------------------------------------------------------
   Vermietung — Buchungsformular
   -------------------------------------------------------------------------- */
/* Der Knopf bleibt sichtbar, auch wenn das Nachladen läuft — er ist der Weg
   für alle, bei denen JavaScript oder das Netz nicht mitspielt. */
/* Die Kaution steht bewusst UNTER der Gesamtsumme und nicht darin: Sie wird
   zurückgezahlt. In die Summe gerechnet stünde dort ein Betrag, den der
   Mieter am Ende gar nicht bezahlt hat. */

/* Gesperrter Abschluss: ein Kasten mit Begruendung und dem Anruf als echter
   Handlung — bewusst KEIN ausgegrauter Knopf, siehe template-parts/miete-formular.php. */
.kauf-sperre-kasten,
.miete-sperre-kasten {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ah-line);
	border-left: 3px solid var(--ah-anthracite);
	border-radius: var(--radius);
	background: var(--ah-surface);
}
.kauf-sperre-kopf,
.miete-sperre-kopf {
	margin: 0;
	font-family: var(--font-cond);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ah-anthracite);
}
.miete-sperre-kasten .btn,
.kauf-sperre-kasten .btn { margin-top: 0.25rem; }
.kauf-sperre-text { margin: 0; font-size: var(--fs-sm); color: var(--ah-muted); }

@media (max-width: 560px) {
	.miete-tarif { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.3rem; }
}

/* Vorschau „Verfügbarkeit & Preis" — Dialog
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.miete-dialog[open] { animation: none; }
}
/* Im Dialog trägt der Kopf schon den Titel — der zweite wäre eine Dopplung. */
/* Der Kalender ist auf der Detailseite ein Hauptabschnitt und trägt dort eine
   entsprechend große Überschrift. Im Dialog ist er ein Unterabschnitt neben
   dem Formular — gemessen 46 px gegen 22 px im Dialogkopf. */

@media (max-width: 560px) {
	/*
	 * Am Rand ganz auf: `<dialog>` zentriert sich per `margin: auto`, und mit
	 * einer Höhe knapp unter der Fensterhöhe blieben oben und unten je 21 px
	 * frei — gemessen am 02.09. auf 375×812. Durch den unteren Streifen sah man
	 * die klebende Anfrage-Leiste der Seite. Anklickbar war sie nicht (ein
	 * modaler Dialog liegt in der obersten Ebene), sie sah nur kaputt aus.
	 * `inset: 0` mit `margin: 0` spannt den Dialog auf das ganze Fenster —
	 * unabhängig davon, wie der Browser gerade dvh auslegt.
	 */
}

/* Tarifzeilen: Name, Untertitel und Marken
   ------------------------------------------------------------------------ */

/* Gut zu wissen
   ------------------------------------------------------------------------ */

/* Stornofrist — hängt am gewählten Zeitraum, steht deshalb bei der Summe. */

/* Rückmeldung nach dem Absenden des Buchungsformulars. */

/* Ohne JavaScript steht der Dialog offen im Seitenfluss (siehe
   template-parts/miete-dialog.php). Dann darf er nicht wie ein Overlay
   aussehen: keine feste Höhe, kein Schatten, volle Breite im Inhaltsbereich. */

/* Kontaktfelder des Buchungsformulars — erscheinen erst, wenn der Abschluss
   frei ist (siehe template-parts/miete-formular.php). */

/* Stornieren durch den Mieter — nur sichtbar, wenn der Link aus der Mail
   aufgerufen wurde. Steht ganz oben in der Handlungsspalte, weil wer darüber
   kommt, nichts anderes sucht. */

/* ---- Buchungsvorschau: Abschnitte, Hinweise, Bestellübersicht ------------
   Seit 03.09.2026. Vorher war der Dialog eine durchlaufende Kolumne aus
   Feldern, Ergebnis, einer langen Hinweisliste und dem Knopf — mit den
   vollständigen Vertragsangaben wäre daraus eine Rolle ohne Halt geworden. */

/* Feldgruppen */
/* `.miete-kontakt` ist ein Grid, kein Flex — Breiten laufen ueber grid-column.
   Mit flex-basis stand die E-Mail schmal und allein in ihrer Zeile. */

/* Bestellübersicht — steht dort, wo § 312j Abs. 2 BGB sie verlangt */

/* ==========================================================================
   WooCommerce — Shop, Warenkorb, Kasse
   ==========================================================================
   Seit 05.09.2026. Vorher gab es hier nichts: WooCommerce brachte seine drei
   eigenen Stylesheets mit und die Shop-Seiten sahen aus wie ein fremder
   Baukasten mitten in der Seite — Lila für Preise und Reiter, Altrosa für die
   Knöpfe, eigene Schriftgrößen, eigene Rundungen.

   Warum überschreiben statt abmelden: WooCommerce-CSS macht nicht nur Farbe,
   es macht auch Layout (Produktraster, Warenkorbtabelle, Kassenspalten). Wer
   es wegwirft, baut das alles nach und erbt jede Änderung des nächsten
   Updates. Hier bleibt das Gerüst und nur das Aussehen wird ersetzt.

   Warum das ohne !important funktioniert: main.css wird NACH
   woocommerce-layout, -smallscreen und -general eingereiht (nachgemessen am
   05.09.2026 an der Produktseite). Bei gleicher Spezifität gewinnt damit die
   spätere Regel. Deshalb stehen unten dieselben Selektoren wie im
   WooCommerce-CSS, Wort für Wort — kürzere würden verlieren.

   ⚠️ Gold kommt hier genau einmal vor: in den Bewertungssternen. Das ist die
   eine erlaubte Stelle außerhalb des Logos. Preise sind Anthrazit, nicht Gold.
   -------------------------------------------------------------------------- */

/* ---- Knöpfe --------------------------------------------------------------
   Die Selektorenkette ist aus woocommerce-general.css übernommen. Sieht
   umständlich aus, ist aber der Grund, warum hier kein !important steht. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	display: inline-block;
	padding: 1em 2.2em;
	border-radius: var(--radius-sm);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-base);
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	border: 2px solid var(--ah-ink);
	background: transparent;
	color: var(--ah-ink);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background: var(--ah-ink);
	color: var(--ah-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}
.woocommerce #respond input#submit:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { transform: translateY(0) scale(0.985); }

/* Der Hauptknopf einer Seite („In den Warenkorb", „Zur Kasse", „Kaufen"):
   gefüllt statt umrandet, damit auf einer Seite immer nur eine Sache die
   erste ist. Entspricht .btn-gold aus dem Theme, ohne den Glanzstreifen —
   der lebt von ::after, und WooCommerce-Knöpfe sind teils <input>, die kein
   ::after haben. Ein Effekt, der auf der Hälfte der Knöpfe fehlt, ist
   schlimmer als keiner. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt.disabled {
	background: var(--ah-ink);
	border-color: var(--ah-ink);
	color: var(--ah-white);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--ah-anthracite); border-color: var(--ah-anthracite); color: var(--ah-white); }

/* Ein gesperrter Knopf muss auch gesperrt aussehen. WooCommerce lässt ihn
   sonst voll deckend stehen, und man drückt ins Leere — derselbe Fehler, der
   auf der Zubehörseite gemeldet wurde. */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---- Preise --------------------------------------------------------------
   Barlow Condensed wie überall sonst auf der Seite, wo Zahlen stehen.
   Anthrazit, nicht Gold: Gold bleibt Logo und Sternen vorbehalten. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
	font-family: var(--font-cond);
	font-weight: 700;
	color: var(--ah-anthracite);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: var(--fs-xl); }
.woocommerce ul.products li.product .price { font-size: var(--fs-lg); }
/* Durchgestrichener Alt-Preis: leiser, sonst schreien zwei Zahlen gleich laut. */
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del { color: var(--ah-muted); font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* „inkl. MwSt." klein und ruhig — Pflichtangabe nach § 1 PAngV, aber keine
   Schlagzeile. */
.woocommerce .woocommerce-price-suffix,
.woocommerce div.product p.price small {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ah-muted);
}

/* ---- Produktraster (Shop und Kategorie) ---------------------------------
   WooCommerce rastert über prozentuale Breiten und Floats. Grid darüber ist
   ruhiger und braucht die Spaltenzahl nicht zu kennen. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; } /* Float-Clearfix von Woo */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.woocommerce ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-head);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ah-anthracite);
	padding: var(--space-2) var(--space-2) 0.35rem;
	margin: 0;
}
.woocommerce ul.products li.product .price { padding: 0 var(--space-2); margin: 0 0 var(--space-2); }
.woocommerce ul.products li.product .button {
	margin: auto var(--space-2) var(--space-2);
	text-align: center;
	font-size: var(--fs-sm);
	padding: 0.8em 1.4em;
}
/* Die Sortierung oben rechts als Feld, nicht als nackter Select. */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering { margin-bottom: var(--space-3); }
.woocommerce .woocommerce-ordering select {
	padding: 0.6em 0.9em;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	font: inherit;
	color: var(--ah-ink);
}
.woocommerce .woocommerce-result-count { color: var(--ah-muted); font-size: var(--fs-sm); }

/* ---- Einzelnes Produkt ----------------------------------------------------
   Nachgebessert am 05.09.2026 (Auftraggeber: „ist zu gross die buttons und
   wirkt alles so leer"). Gemessen auf einem 1710-px-Fenster, vorher:

     Produktbereich   1360 px breit
     Titel              48 px
     Kaufknopf          62 px hoch, 18 px Schrift
     Mengenfeld         54 px hoch

   Ein Reifensatz braucht keine 1360 px und keine Schlagzeile in Plakatgroesse.
   Die Leere kam nicht von zu wenig Inhalt, sondern von zu viel Flaeche: Zwei
   Spalten a 653 px, in denen ein Preis und drei Zeilen Text stehen, sehen
   zwangslaeufig leer aus. Schmaler heisst hier dichter. */
.woocommerce div.product {
	max-width: 1180px;
	margin-inline: auto;
}
.woocommerce div.product .product_title {
	font-family: var(--font-head);
	font-weight: 600;
	/* Statt --fs-2xl (bis 48 px). Ein Produktname ist eine Ueberschrift, keine
	   Hero-Zeile — und Reifenbezeichnungen sind lang, in Plakatgroesse brechen
	   sie ueber drei Zeilen. */
	font-size: clamp(1.6rem, 2.4vw, 2.15rem);
	line-height: 1.2;
	color: var(--ah-anthracite);
	margin-bottom: var(--space-1);
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ah-text); line-height: 1.6; }
.woocommerce div.product div.images img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.woocommerce div.product form.cart { margin: var(--space-2) 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
.woocommerce div.product form.cart div.quantity { margin: 0; float: none; }
/* Knopf und Feld auf ein Mass. Vorher 62 px gegen 54 px — zwei Elemente
   nebeneinander, die fast, aber eben nicht gleich hoch sind, sehen aus wie ein
   Fehler. */
.woocommerce div.product form.cart .button {
	font-size: var(--fs-sm);
	padding: 0 1.9em;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.woocommerce div.product form.cart .quantity .qty { height: 3rem; }

/*
 * Die Express-Knoepfe von Stripe (Apple Pay, Google Pay, Link) bleiben so
 * breit, wie Stripe sie zeichnet. Am 05.09.2026 hatte ich sie auf 26rem
 * begrenzt; der Auftraggeber hat das noch am selben Tag zurueckgenommen:
 * „lasse apple pay google pay und link zeichen so wie es vorher war die
 * groesse war gut". Hier steht deshalb bewusst KEINE Breitenregel — nicht,
 * weil sie vergessen wurde.
 */
/* Mengenfeld wie jedes andere Feld der Seite (.form-feld input). */
.woocommerce .quantity .qty {
	height: 3.4rem;
	width: 5.5rem;
	padding: 0.7em 0.9em;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	font: inherit;
	font-family: var(--font-cond);
	font-weight: 700;
	color: var(--ah-ink);
	text-align: center;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce .quantity .qty:focus { border-color: var(--ah-anthracite); box-shadow: 0 0 0 3px rgba(48, 50, 55, 0.12); }
.woocommerce div.product form.cart .button { flex: 0 1 auto; }
.woocommerce div.product .product_meta { font-size: var(--fs-sm); color: var(--ah-muted); border-top: 1px solid var(--ah-line); padding-top: var(--space-2); margin-top: var(--space-2); }
.woocommerce div.product .stock.in-stock { color: var(--ah-ok); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: var(--ah-err); font-weight: 600; }

/* ---- Reiter unter dem Produkt -------------------------------------------
   WooCommerce baut hier abgerundete Karteikarten mit Schlagschatten und
   Pseudo-Elementen an den Ecken. Das ist ein Stilbruch auf einer Seite, die
   sonst mit Linien arbeitet. Also flach: eine Linie, aktiver Reiter markiert. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--space-3);
	border-bottom: 1px solid var(--ah-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 0;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ah-muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ah-anthracite); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ah-anthracite); border-bottom-color: var(--ah-anthracite); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--fs-xl); color: var(--ah-anthracite); }

/* ---- Tabellen: Eigenschaften, Warenkorb, Bestellübersicht ---------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ah-anthracite);
	background: var(--ah-surface);
	font-style: normal;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td { color: var(--ah-text); font-style: normal; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 0.9rem 1rem; border-top: 1px solid var(--ah-line); }
.woocommerce table.shop_table thead th { border-top: 0; }
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th { background: transparent; }
.woocommerce td.product-name a { color: var(--ah-anthracite); font-weight: 600; }
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 { font-family: var(--font-head); font-weight: 600; color: var(--ah-anthracite); }
.woocommerce a.remove { color: var(--ah-err); font-weight: 400; }
.woocommerce a.remove:hover { background: var(--ah-err); color: var(--ah-white); }

/* ---- Kasse: Felder wie im Rest der Seite -------------------------------- */
.woocommerce form .form-row label { font-size: var(--fs-sm); font-weight: 600; color: var(--ah-anthracite); margin-bottom: 0.3rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	padding: 0.7em 0.9em;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	font: inherit;
	color: var(--ah-ink);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single { height: 3.2rem; }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 2.1; padding: 0; color: var(--ah-ink); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--ah-anthracite);
	box-shadow: 0 0 0 3px rgba(48, 50, 55, 0.12);
	outline: none;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--ah-err); box-shadow: 0 0 0 3px var(--ah-err-ring); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--ah-ok); }
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #payment {
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	background: var(--ah-white);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ah-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--ah-surface); color: var(--ah-text); border-radius: var(--radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ah-surface); }
.woocommerce-checkout #payment #place_order { width: 100%; }

/* ---- Meldungen -----------------------------------------------------------
   Dieselben drei Zustandsfarben wie in den Formularen des Themes, damit eine
   Erfolgs- oder Fehlermeldung im Shop nicht anders aussieht als eine auf der
   Kontaktseite. WooCommerce setzt oben einen 3-px-Balken in seiner eigenen
   Farbe — der wird hier zur ganzen Umrandung. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	border-top-width: 1px;
	padding: 1rem 1.2rem 1rem 3rem;
	font-weight: 500;
	list-style: none;
}
/*
 * Erfolgsmeldungen bewusst NEUTRAL, nicht grün (05.09.2026, Auftraggeber:
 * „das grüne sieht hässlich aus oben mache es weg lasse es einfach schlicht
 * wie es war").
 *
 * Er hat recht, und zwar nicht nur geschmacklich: Die Seite ist durchgehend
 * Anthrazit auf Weiß, Farbe trägt hier Bedeutung. Ein großes grünes Band quer
 * über der Produktseite ist lauter als alles andere auf der Seite — für die
 * Nachricht „liegt im Warenkorb", die niemanden alarmieren muss.
 *
 * Fehler bleiben rot. Das ist kein Widerspruch, sondern der Grund: Wenn nur
 * die Störung Farbe hat, fällt sie auf. Färbt man auch den Normalfall, hebt
 * sich das gegenseitig auf.
 */
.woocommerce-message { background: var(--ah-surface); border-color: var(--ah-line); color: var(--ah-text); }
.woocommerce-message::before { color: var(--ah-anthracite); }
.woocommerce-info { background: var(--ah-surface); border-color: var(--ah-line); color: var(--ah-text); }
.woocommerce-info::before { color: var(--ah-anthracite); }
.woocommerce-error { background: var(--ah-err-bg); border-color: var(--ah-err); color: var(--ah-err); }
.woocommerce-error::before { color: var(--ah-err); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { padding: 0.5em 1.2em; font-size: var(--fs-xs); }

/* ---- Bewertungssterne — die eine erlaubte Goldstelle --------------------- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover::before { color: var(--ah-gold); }
.woocommerce .star-rating::before { color: var(--ah-line); }

/* ---- Brotkrumen ---------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--ah-muted);
	margin-bottom: var(--space-3);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--ah-muted); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ah-anthracite); text-decoration: underline; }

/* ---- Bestellbestätigung und Konto --------------------------------------- */
.woocommerce .woocommerce-order,
.woocommerce .woocommerce-MyAccount-content { color: var(--ah-text); }
.woocommerce ul.order_details {
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--radius);
	padding: var(--space-2);
	margin-bottom: var(--space-3);
}
.woocommerce ul.order_details li { border-right-color: var(--ah-line); color: var(--ah-muted); font-size: var(--fs-xs); }
.woocommerce ul.order_details li strong { font-family: var(--font-cond); font-size: var(--fs-lg); color: var(--ah-anthracite); }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation a { color: var(--ah-anthracite); }

/* ---- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2); }
	.woocommerce div.product form.cart { gap: var(--space-1); }
	.woocommerce div.product form.cart .button { flex: 1 1 100%; text-align: center; }
	.woocommerce .quantity .qty { width: 100%; }
	.woocommerce #respond input#submit,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button { font-size: var(--fs-sm); padding: 0.9em 1.6em; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover { transform: none; }
}

/* ---- Block-Warenkorb und Block-Kasse -------------------------------------
   WooCommerce 11 liefert Warenkorb und Kasse als Blöcke aus, nicht mehr als
   Shortcode. Nachgesehen am 05.09.2026: `form.woocommerce-cart-form` gibt es
   auf der Seite gar nicht, stattdessen `.wc-block-cart`. Die Regeln weiter
   oben für `table.shop_table` greifen dort also nicht — sie bleiben trotzdem
   stehen, weil Bestellbestätigung, Konto und E-Mails weiter klassisch sind.

   Ladereihenfolge nachgemessen: wc-blocks-style steht an Position 1 bis 4,
   autohoss-main-css an 11. Auch hier gewinnt also die spätere Regel, ohne
   !important.

   ⚠️ Die Stripe-Stylesheets stehen an 12 bis 15, also NACH dieser Datei. Das
   ist Absicht und soll so bleiben: Das Zahlungsfeld von Stripe ist ein iframe
   mit eigenen Vorgaben, da wird nicht hineingestylt. -------------------- */

/* Knöpfe: derselbe Zuschnitt wie .btn, nur an den Block-Klassen. */
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
	padding: 1em 2.2em;
	border-radius: var(--radius-sm);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--ah-ink);
	color: var(--ah-white);
	border: 2px solid var(--ah-ink);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--ah-anthracite);
	border-color: var(--ah-anthracite);
	color: var(--ah-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}
.wc-block-components-button:not(.is-link):active { transform: translateY(0) scale(0.985); }
.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link).is-loading { opacity: 0.45; transform: none; box-shadow: none; }
/* Textknöpfe („Adresse bearbeiten", „Gutschein entfernen") bleiben Text. */
.wc-block-components-button.is-link { color: var(--ah-anthracite); text-decoration: underline; }

/*
 * Überschriften und Schritte.
 *
 * ⚠️ Die verdoppelte Klasse ist kein Tippfehler. WooCommerce schreibt selbst
 * `.wc-block-components-title.wc-block-components-title` (0,2,0), um seine
 * eigene Vorgabe durchzusetzen. Einfach genannt (0,1,0) verliert hier jede
 * Regel — nachgemessen: font-weight blieb auf 500 statt auf 600.
 */
.wc-block-components-title.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ah-anthracite);
}
.wc-block-components-checkout-step__description { color: var(--ah-muted); }

/* Beträge in Barlow Condensed — wie jede andere Zahl auf der Seite. */
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
	font-family: var(--font-cond);
	font-weight: 700;
	color: var(--ah-anthracite);
}
.wc-block-components-totals-item__label { color: var(--ah-text); }
.wc-block-components-totals-item__description,
.wc-block-components-totals-footer-item-tax { color: var(--ah-muted); font-size: var(--fs-xs); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--fs-xl); }
.wc-block-components-product-name { color: var(--ah-anthracite); font-weight: 600; }

/*
 * Felder: gleiche Höhe, gleicher Radius, gleicher Fokusring wie .form-feld.
 *
 * ⚠️ Der Vorsatz `.wc-block-components-form` ist Pflicht, nicht Zierde.
 * WooCommerce schreibt in packages-style.css
 *   .wc-block-components-form .wc-block-components-text-input input[type=email]
 * also 0,3,1. Ohne den Vorsatz steht hier 0,2,1 und verliert — nachgemessen am
 * 05.09.2026: Radius blieb bei 4px statt 8px, Höhe bei 50px statt 3,2rem,
 * obwohl main.css später geladen wird. Die spätere Regel schlägt die frühere
 * nur bei GLEICHER Spezifität.
 */
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-address-form input,
.wc-block-components-form .wc-block-components-combobox input,
.wc-block-components-form .wc-block-components-textarea {
	height: 3.2rem;
	border: 1px solid var(--ah-line);
	border-radius: var(--radius-sm);
	background: var(--ah-white);
	color: var(--ah-ink);
	font-family: var(--font-body);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.wc-block-components-form .wc-block-components-textarea { height: auto; }
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-address-form input:focus,
.wc-block-components-form .wc-block-components-combobox input:focus {
	border-color: var(--ah-anthracite);
	box-shadow: 0 0 0 3px rgba(48, 50, 55, 0.12);
	outline: none;
}
.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-form .wc-block-components-address-form .has-error input { border-color: var(--ah-err); box-shadow: 0 0 0 3px var(--ah-err-ring); }
.wc-block-components-validation-error { color: var(--ah-err); font-size: var(--fs-xs); }

/* Auswahl von Versand und Zahlung */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--radius-sm);
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--ah-anthracite);
	box-shadow: 0 0 0 1px var(--ah-anthracite);
}
.wc-block-components-radio-control__label { color: var(--ah-anthracite); font-weight: 600; }
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description { color: var(--ah-muted); }
.wc-block-components-checkbox__label { color: var(--ah-text); }

/*
 * Bestellübersicht als Karte — wie die Karten im Rest der Seite.
 *
 * Seit 29.09.2026 weiß mit Linie statt grauer Fläche: Grau traf nur den ersten
 * Block der Übersicht (die Versandzeile), der Rest blieb weiß — im Warenkorb sah
 * das aus wie ein vergessener Kasten (Auftraggeber: „dieser graue hintergrund
 * sieht blöd aus"). Eine Linie trennt genauso deutlich und passt zu den übrigen
 * Karten der Seite.
 */
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child {
	background: var(--ah-white);
	border-radius: var(--radius);
}
.wp-block-woocommerce-checkout-order-summary-block { border: 1px solid var(--ah-line); }

/*
 * Bestellübersicht läuft mit.
 *
 * Die Kasse ist gut zwei Bildschirme hoch: Anschrift, Versandart, Zahlart.
 * Die Übersicht rechts ist 377 px hoch und war nach dem ersten Scrollen weg —
 * ausgerechnet die Summe, wegen der man scrollt (Auftraggeber, 14.09.2026:
 * „bestellübersicht zieht sich zu spät mit").
 *
 * `align-self: start` ist Pflicht, nicht Zierde: Die Spalte ist ein Flex-Kind
 * und würde sonst auf volle Höhe gedehnt — ein gedehntes Element klebt nie,
 * weil es keinen Platz zum Wandern hat.
 *
 * Erst ab 1000 px. Darunter stehen die Spalten untereinander, da wäre ein
 * klebender Block nur im Weg.
 */
@media (min-width: 1000px) {
	.wc-block-checkout__sidebar,
	.wc-block-cart__sidebar {
		position: sticky;
		top: calc(var(--ah-kopf, 104px) + 1.5rem);
		align-self: start;
	}
}
.wc-block-components-totals-wrapper { border-color: var(--ah-line); }
.wc-block-components-panel__button { color: var(--ah-anthracite); font-weight: 600; }

/* Mengenwahl im Warenkorb */
.wc-block-components-quantity-selector { border-radius: var(--radius-sm); }
.wc-block-components-quantity-selector__input { font-family: var(--font-cond); font-weight: 700; color: var(--ah-ink); }
.wc-block-components-quantity-selector__button { color: var(--ah-muted); }
.wc-block-components-quantity-selector__button:hover { color: var(--ah-anthracite); }

/* Meldungen — dieselben drei Zustandsfarben wie überall. */
.wc-block-components-notice-banner { border-radius: var(--radius-sm); font-family: var(--font-body); }
/* Gleiche Überlegung wie oben bei .woocommerce-message. */
.wc-block-components-notice-banner.is-success { background: var(--ah-surface); border-color: var(--ah-line); color: var(--ah-text); }
.wc-block-components-notice-banner.is-success svg { fill: var(--ah-anthracite); }
.wc-block-components-notice-banner.is-error { background: var(--ah-err-bg); border-color: var(--ah-err); color: var(--ah-err); }
.wc-block-components-notice-banner.is-info { background: var(--ah-surface); border-color: var(--ah-line); color: var(--ah-text); }

/*
 * Der Express-Kasten oben auf der Kasse.
 *
 * Nachgesehen am 05.09.2026: Die Liste darin ist NICHT leer, es stehen zwei
 * Einträge drin (Apple Pay, Google Pay), die nur nichts zeichnen. Ein
 * :empty-Griff geht deshalb ins Leere, und „einfach ausblenden" wäre falsch —
 * auf einem iPhone mit hinterlegter Karte gehört der Knopf dorthin.
 *
 * Vermuteter Grund für das Nichts: Apple Pay verlangt eine geprüfte Domain,
 * und die Prüfdatei liefert auf autohoss.de zurzeit 404. Das klärt sich beim
 * Livegang. Bis dahin bleibt der Kasten hier unangetastet und wird nur
 * gedämpft, damit er nicht wie ein Fehler aussieht.
 */
.wc-block-components-express-payment__title-container { color: var(--ah-muted); }
.wc-block-components-express-payment-continue-rule { color: var(--ah-muted); font-size: var(--fs-xs); }

/*
 * PayPal-Knöpfe in eine eigene Stapelebene.
 *
 * PayPal zeichnet seine Knöpfe in Rahmen mit z-index 100 und 200 (der zweite
 * ist der Ladezustand). Ohne eigene Stapelebene gelten diese Zahlen für die
 * ganze Seite. Die Kopfleiste liegt auf 50, und beim Scrollen schob sich
 * „Mit PayPal zahlen" über die Navigation (Auftraggeber, 11.09.2026, mit
 * Bildschirmfoto). isolation hält die Zahlen im Knopf, ohne an Lage oder Größe
 * etwas zu ändern. Das PayPal-Fenster selbst hängt PayPal an <body> — das
 * bleibt davon unberührt und liegt weiter über allem.
 */
.paypal-buttons,
.wc-block-components-express-payment { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-button:not(.is-link):hover,
	.wc-block-components-checkout-place-order-button:hover { transform: none; }
}

/* ---- Zubehör: online kaufbare Artikel ------------------------------------
   Seit 05.09.2026, zusammen mit der Verknüpfung auf WooCommerce-Produkte
   (inc/cpt-zubehoer.php). Die allermeisten Artikel bleiben telefonisch;
   sichtbar zu machen, welche NICHT, ist der ganze Zweck dieses Abzeichens. */
.zubehoer-badge--kaufbar {
	/* Oben rechts, weil oben links schon die Saison sitzt. Auf einer Karte mit
	   Sommer- oder Winterreifen stünden sonst zwei Marken übereinander. */
	left: auto;
	right: 0.7rem;
	background: rgba(30, 122, 52, 0.92); /* --ah-ok, deckend genug fürs Foto */
}

/* Die Kauffläche in der Schnellansicht. Nimmt die Maße des Sperrkastens auf,
   damit der Dialog beim Umschalten nicht springt. */
.vorschau-kauf {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
}
.vorschau-kauf .btn { text-align: center; }
.vorschau-kauf-text {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--ah-muted);
	line-height: 1.5;
}
.vorschau-kauf-detail { color: var(--ah-anthracite); text-decoration: underline; }
.vorschau-kauf-detail:hover { color: var(--ah-ink); }

/* Rückmeldung nach dem Hineinlegen. Sie ersetzt den Sprung zum Warenkorb:
   Wer nichts sieht, klickt ein zweites Mal und hat den Artikel doppelt drin. */
.vorschau-kauf-meldung {
	margin: 0;
	padding: 0.65rem 0.9rem;
	border-radius: var(--radius-sm);
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	color: var(--ah-anthracite);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.vorschau-kauf-meldung.ist-fehler {
	background: var(--ah-err-bg);
	border-color: var(--ah-err);
	color: var(--ah-err);
}
.vorschau-kauf-knopf.ist-am-senden { opacity: 0.7; pointer-events: none; cursor: progress; }

/* ---- Kurze Einblendung „hinzugefügt" ------------------------------------
   Auftraggeber, 05.09.2026: „das oben warenkorb anzeigen komplett auch der
   text weg mache nur so eine kleine push nachricht oben rechts das es
   eingegangen ist und im warenkorb ist."

   Ersetzt das breite Band von WooCommerce, das quer über der Produktseite
   stand und den eigentlichen Inhalt nach unten schob. Diese Einblendung
   verschiebt nichts: `position: fixed` nimmt sie aus dem Textfluss.

   Sitzt UNTER dem Kopf, nicht darüber: Der Kopf ist sticky und dunkel, eine
   helle Karte darauf sähe aus wie ein Fehler. 8,25rem = Kopfhöhe (122 px,
   gemessen) plus Luft.

   `role="status"` mit `aria-live="polite"` steht im Markup: Wer die Seite
   vorlesen lässt, bekommt die Meldung mit — aber erst, wenn der Vorleser
   gerade nichts anderes sagt. Bei „assertive" fiele er sich selbst ins Wort. */
.korb-toast {
	position: fixed;
	top: 8.25rem;
	right: clamp(1rem, 3vw, 2rem);
	z-index: 60;
	max-width: min(22rem, calc(100vw - 2rem));
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-left: 3px solid var(--ah-anthracite);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--ah-anthracite);
	/* Startzustand fürs Einblenden. Die Klasse .ist-da dreht beides um. */
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.korb-toast.ist-da { opacity: 1; transform: translateY(0); }
.korb-toast svg { flex: 0 0 auto; margin-top: 0.1rem; color: var(--ah-anthracite); }
.korb-toast-text { font-weight: 600; }
@media (max-width: 900px) {
	.korb-toast { top: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.korb-toast { transition: none; transform: none; }
}

/* ---- Werbeflaeche unter dem Warenkorb (05.09.2026) -----------------------
   Die Kacheln selbst brauchen kein eigenes CSS: Sie tragen dieselben Klassen
   wie die Kategoriekacheln auf /zubehoer/ (.zub-kat-tile, .zubehoer-kats-grid)
   und erben deren Aussehen vollstaendig. Hier steht nur der Rahmen darum. */
.korb-werbung {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--ah-line);
}
.korb-werbung-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem var(--space-2);
	margin-bottom: var(--space-2);
}
.korb-werbung-titel {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-xl);
	color: var(--ah-anthracite);
	margin: 0;
}
.korb-werbung-alle {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ah-anthracite);
	white-space: nowrap;
}
.korb-werbung-alle:hover { color: var(--ah-ink); text-decoration: underline; }

/*
 * Die Karten erben ihr Aussehen von .zubehoer-card; hier wird nur die
 * Spaltenzahl gedeckelt. `.zubehoer-grid` fuellt mit auto-fill so viele
 * 250-px-Spalten wie hineinpassen — auf einem breiten Bildschirm waeren das
 * sechs oder mehr, und vier Karten stuenden dann als angefangene Reihe da.
 */
.korb-werbung-gitter { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }

/*
 * „Neu im Shop" im leeren Warenkorb stilllegen.
 *
 * Das Produktraster darunter nimmt inc/woocommerce.php serverseitig weg. Uebrig
 * blieben sonst die Trennlinie und eine Ueberschrift ohne Inhalt darunter.
 *
 * Die Ueberschrift „Dein Warenkorb ist gerade leer!" muss dabei stehen bleiben.
 * Unterscheiden lassen sich die beiden ueber genau ein Merkmal: Die erste traegt
 * die Klasse wc-block-cart__empty-cart__title, die zweite gar keine. Deshalb
 * :not() statt einer Textpruefung — Text aendert sich mit jeder Uebersetzung,
 * die Klasse nicht.
 */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block h2:not([class*="empty-cart__title"]),
.wp-block-woocommerce-empty-cart-block h3:not([class*="empty-cart__title"]) { display: none; }

/* Leere Meldungshuelle von WooCommerce ausblenden. Sie entsteht, weil der
   Filter in inc/woocommerce.php den Text des Banners auf '' setzt — die
   Notiz selbst legt WooCommerce trotzdem an, und ohne diese Regel bliebe ein
   leerer grauer Kasten stehen. */
.woocommerce-message:empty,
.woocommerce-notices-wrapper .woocommerce-message:empty { display: none; }

/* ==========================================================================
   Einwilligung fuer Zahlungsdienste
   ==========================================================================
   Seit 07.09.2026. Erscheint nur auf Produktseite und Warenkorb — der Rest der
   Seite speichert nichts, dort gibt es nichts einzuwilligen (gemessen, siehe
   inc/consent.php).

   Unten angeheftet statt als Vollbild-Sperre: Der Besucher soll die Seite
   weiter lesen koennen. Eine Sperre, die den Inhalt verdeckt, bis man klickt,
   erzeugt Klicks aus Ungeduld — und eine erzwungene Einwilligung ist keine.
   -------------------------------------------------------------------------- */
.consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 80;
	background: var(--ah-white);
	border-top: 3px solid var(--ah-anthracite);
	box-shadow: 0 -8px 32px -12px rgba(23, 24, 26, 0.28);
	padding: var(--space-2) clamp(1rem, 4vw, 2rem);
}
.consent-inhalt {
	max-width: var(--container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-1) var(--space-3);
}
.consent-titel {
	grid-column: 1;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-base);
	color: var(--ah-anthracite);
	margin: 0;
}
.consent-text {
	grid-column: 1;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ah-text);
	max-width: 78ch;
}
.consent-link { color: var(--ah-anthracite); text-decoration: underline; white-space: nowrap; }
/*
 * ⚠️ Beide Knoepfe gleich gross, gleiche Zeile, gleiche Ebene. „Nur notwendige"
 * darf nicht kleiner, blasser oder hinter einem zweiten Klick sein: Eine
 * Einwilligung ist nur freiwillig, wenn das Ablehnen genauso leicht faellt wie
 * das Zustimmen. Wer hier optisch nachhilft, macht die Einwilligung unwirksam.
 */
.consent-knoepfe {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.consent-knoepfe .btn { padding: 0.75em 1.6em; font-size: var(--fs-sm); white-space: nowrap; }

/* Widerrufsknopf in der Fusszeile: sieht aus wie die Links daneben, ist aber
   ein Knopf, weil er etwas tut statt irgendwohin zu fuehren. */
.consent-neu {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}
.consent-neu:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.consent-inhalt { grid-template-columns: 1fr; }
	.consent-knoepfe { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
	/* `flex: 1 1 0` statt `1 1 auto`: Mit `auto` richtet sich die Breite nach
	   dem Text, und „Nur notwendige" wurde dadurch 9 px breiter als
	   „Einverstanden" (gemessen auf 375 px). Rechtlich harmlos — der
	   Ablehnen-Knopf war ja der groessere —, aber zwei fast gleich breite
	   Knoepfe nebeneinander sehen nach Versehen aus. Mit `0` teilen sie sich die
	   Zeile exakt. */
	.consent-knoepfe .btn { flex: 1 1 0; text-align: center; padding-inline: 0.8em; }
}

/* Gebrauchtware-Hinweis auf der Produktseite — § 476 Abs. 2 BGB, siehe
   inc/gebrauchtware.php. Zurückhaltend gehalten: Er soll gelesen werden, aber
   nicht wie eine Warnung wirken. */
.produkt-gebraucht-hinweis {
	margin: .75rem 0 1rem;
	padding: .6rem .8rem;
	border-left: 3px solid var(--ah-gold, #c9a227);
	background: var(--ah-grey-50, #f6f6f7);
	font-size: .92rem;
	line-height: 1.45;
	color: var(--ah-anthracite, #303237);
}

/* Derselbe Hinweis in der Schnellansicht — dort sitzt er in der Kauffläche und
   braucht etwas weniger Luft als auf der Produktseite. */
.vorschau-gebraucht {
	margin: .6rem 0 0;
	font-size: .86rem;
}

/* EU-Gewährleistungslabel (inc/gewaehrleistungslabel.php).
   Die Grafik selbst darf nicht verändert werden — hier nur Abstand und Breite.
   Kein Rahmen, kein Schatten, keine Rundung: alles, was die Grafik umgestaltet,
   bleibt weg.
   BREITE: Die Kanzlei verlangt, dass der Text ohne Zoom lesbar ist. Der
   Fließtext der Grafik ist rund 12,4 Einheiten groß bei 595 Einheiten Breite
   (gemessen 16.09.2026). Deshalb so breit wie die Spalte, höchstens 600 px
   (dann gut 12 px Schrift). Die zuerst geplanten 440 px hätten nur 9 px ergeben. */
.eu-gewaehrleistungslabel {
	margin: 1.25rem 0 1rem;
	max-width: 600px;
}
.eu-gewaehrleistungslabel img {
	display: block;
	width: 100%;
	height: auto;
}
.vorschau-gewaehrleistungslabel {
	margin: .9rem 0 0;
}
/* Unter der Kasse: gleiche Breite, etwas Abstand zum Bestellknopf. */
.kasse-gewaehrleistungslabel {
	margin: 2rem 0 0;
}
/* Handy: über die Seitenränder bis an den Bildschirmrand. Jeder Pixel Breite
   macht die Schrift größer — bei 375 px Bildschirm knapp 8 statt 7 px — und die
   Grafik bringt eigene weiße Ränder mit. Nicht in der Schnellansicht: Der Dialog
   hat eigene Ränder und würde seitlich scrollen. */
@media (max-width: 600px) {
	.produkt-gewaehrleistungslabel,
	.kasse-gewaehrleistungslabel {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/* --------------------------------------------------------------------------
   Große Bildschirme — ab etwa 27 Zoll
   --------------------------------------------------------------------------
   Bis 1440 px bleibt alles, wie es gebaut und abgenommen ist. Darüber wirkte
   die Seite verloren: Auf einem 32-Zoll-Schirm (3840 px) standen drei schmale
   Fahrzeugkacheln in der Mitte, 63 % der Breite blieben leer (gemessen
   29.09.2026, Auftraggeber: „sehr breite weiße Abstände").

   Zwei Stufen, mehr nicht: 1780 px ab 1800, 2100 px ab 2400. Der Inhalt wächst
   mit, bleibt aber begrenzt — ohne Grenze liefe Fließtext über 200 Zeichen je
   Zeile.

   Dazu gehören zwei Dinge, sonst wird „breiter" nicht „besser":

   1. Die Raster brauchen größere Mindestbreiten. Sonst zerfallen sie in immer
      mehr, immer schmalere Spalten: Im ersten Versuch standen fünf
      Fahrzeugkacheln nebeneinander und „Schaltgetriebe" brach zweizeilig um.
   2. Fließtext braucht eine Zeilenlänge, keine Bildschirmbreite. Gemessen auf
      2560 px lief der Hinweis unter dem Ankaufformular über 126 Zeichen je
      Zeile, mit der neuen Breite wären es 172 geworden. Gut lesbar sind 60
      bis 90; 78ch lässt Luft für lange deutsche Wörter.

   Die Heros laufen weiterhin randlos über die ganze Breite — die begrenzt der
   Container ohnehin nicht.
   -------------------------------------------------------------------------- */

@media (min-width: 1800px) {
	:root { --container: 1780px; }

	.fahrzeug-grid { grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); }
	.zubehoer-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
	.bewertungen-liste { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

	.faq-antwort p,
	.form-hilfe,
	.ankauf-bewertung-hinweis,
	.uebersicht-hero-intro,
	.ueber-uns-text p,
	.abschluss-text p { max-width: 78ch; }
}

@media (min-width: 2400px) {
	:root { --container: 2100px; }

	/*
	 * Auf 32 Zoll sitzt man weiter weg als vor einem Laptop, deshalb alles eine
	 * Spur größer. 17,5 statt 16 px hebt Schrift, Abstände und Knöpfe
	 * gemeinsam an, weil das Theme durchgehend in rem rechnet.
	 */
	html { font-size: 17.5px; }

	.fahrzeug-grid { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
	.zubehoer-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Warenkorb und Kasse — Blöcke an das Theme angleichen
   --------------------------------------------------------------------------
   WooCommerce legt Versandzeile und Gutscheinfeld auf eine graue Fläche
   (#f5f5f5). Zwischen den weißen Karten des Themes wirkt das wie ein Fremdkörper
   (Auftraggeber, 29.09.2026: „dieser graue hintergrund sieht blöd aus").
   Linien trennen hier genauso gut wie Flächen — dasselbe Mittel wie im
   Impressum und in der Fahrzeugkarte.
   -------------------------------------------------------------------------- */

/* Vertrauenszeile unter dem Bestellknopf */
.ah-korb-vertrauen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
	font-size: var(--fs-sm);
	color: var(--ah-muted);
}
.ah-korb-vertrauen span { display: inline-flex; align-items: center; gap: 0.45rem; }
.ah-korb-vertrauen svg { flex: none; color: var(--ah-ink); }
/* Die Nummer ist anklickbar, bleibt aber Text — kein Knopf (Auftraggeber,
   29.09.2026). Der Innenabstand gibt dem Daumen trotzdem ein Ziel. */
.ah-korb-anruf {
	display: inline-block;
	padding-block: 0.35rem;
	margin-block: -0.35rem;
	color: var(--ah-anthracite);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Zahlarten mit Logos, Rechtszeile am Seitenende
   --------------------------------------------------------------------------
   Vorbild sind die Kassen großer Shops (Auftraggeber, 30.09.2026): Neben jeder
   Zahlart steht ihr Zeichen, ganz unten eine schmale Zeile mit den Rechtstexten.
   Die Logos kommen aus den Erweiterungen selbst — keine nachgebauten Marken,
   keine zusätzlichen Dateien im Theme.
   -------------------------------------------------------------------------- */

.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-stripe) .wc-block-components-radio-control__label-group::after,
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-ppcp-gateway) .wc-block-components-radio-control__label-group::after,
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-cod) .wc-block-components-radio-control__label-group::after {
	content: "";
	margin-left: auto;
	flex: none;
	height: 24px;
	background-repeat: no-repeat;
	opacity: 0.95;
}
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-stripe) .wc-block-components-radio-control__label-group::after {
	width: 124px;
	background-image:
		url('/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg'),
		url('/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg'),
		url('/wp-content/plugins/woocommerce-gateway-stripe/assets/images/klarna.svg');
	background-position: left center, center center, right center;
	background-size: 36px 24px, 36px 24px, 40px 20px;
}
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-ppcp-gateway) .wc-block-components-radio-control__label-group::after {
	width: 72px;
	background-image: url('/wp-content/plugins/woocommerce-paypal-payments/modules/ppcp-wc-gateway/assets/images/paypal.svg');
	background-position: right center;
	background-size: contain;
}
/* Barzahlung hat keine Marke — ein schlichter Schein, gezeichnet wie die
   übrigen Symbole der Seite (Strichstärke 2, runde Enden). */
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-cod) .wc-block-components-radio-control__label-group::after {
	width: 30px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23303237" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/></svg>');
	background-position: right center;
	background-size: contain;
}
.wc-block-components-radio-control__label-group { display: flex; align-items: center; gap: 0.6rem; width: 100%; }

/* Rechtszeile ganz unten */
.ah-korb-recht {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin-top: var(--space-4);
	padding-top: var(--space-2);
	border-top: 1px solid var(--ah-line);
	font-size: var(--fs-sm);
}
.ah-korb-recht a { color: var(--ah-muted); text-decoration: underline; text-underline-offset: 3px; }
.ah-korb-recht a:hover { color: var(--ah-ink); }