/* ════════════════════════════════════════════════════════════════════
   Autohaus Standard — Child-Theme-CSS (konsolidiert 2026-09-03)
   1 Schriften (self-hosted)      5 Komponenten (Karten, Marquee,
   2 Design-Tokens & Typo           Slider, Team, Blog)
   3 Header & Navigation          6 Micro-Interactions
   4 Utilities                    7 Kontrast & Barrierefreiheit
   Farben/Fonts der Widgets liegen im Elementor-Kit.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Schriften ─────────────────────────────────────────────────── */
/* ── Self-hosted fonts (moved from fonts.css to save one request) ── */
/* Self-hosted webfonts (Google Fonts subsets latin + latin-ext), no third-party request. */

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-400-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-400-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-700-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/atkinson-hyperlegible-700-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Michroma';
	font-style: normal;
	font-weight: 400 800; /* single cut, no faux bold */
	font-display: swap;
	src: url('../fonts/michroma-400-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Michroma';
	font-style: normal;
	font-weight: 400 800; /* single cut, no faux bold */
	font-display: swap;
	src: url('../fonts/michroma-400-normal-latin.woff2') format('woff2');
	/* No U+20AC: Michroma's euro sign reads like a 0, so it falls back. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2 · Design-Tokens & Typografie ────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   Autohaus Standard — project CSS
   Colors, font families and weights live in the Elementor Kit
   (Global Styles). Only what the Kit UI cannot express belongs
   here: the fluid clamp() type scale and layout tokens.
   ────────────────────────────────────────────────────────────── */

:root {
	/* Fluid type scale — min @360px, max @1440px */
	--fs-display:  clamp(2.75rem, 1.8rem + 4.6vw, 5rem);
	--fs-h1:       clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
	--fs-h2:       clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
	--fs-h3:       clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--fs-h4:       clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-h5:       clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-overline: 0.8125rem;

	--lh-tight: 1.08;
	--lh-head:  1.15;
	--lh-body:  1.65;

	--ls-tight: -0.02em;
	--ls-wide:   0.12em;

	--container:        1200px;
	--container-narrow:  760px;
}

/* Heading sizes for theme and text-editor content. Elementor widgets get the
   same scale from the Kit (h1-h6 font-size, unit "custom" holding clamp()),
   which sits at a lower specificity than per-widget settings — so a size set
   on an individual widget still wins. */
h1 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-head); }

.ahs-display,
.elementor-widget-heading .elementor-heading-title.ahs-display {
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

/* Green eyebrow above a headline. */
.ahs-overline,
.elementor-widget-heading .elementor-heading-title.ahs-overline {
	font-size: var(--fs-overline);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/* ── 3 · Header & Navigation ───────────────────────────────────────── */
/* Sticky header. Elementor's own sticky clones the whole header into a spacer
   element, which duplicates every widget in the DOM — a plain sticky does not. */
header.elementor[data-elementor-type="header"] {
	position: sticky;
	top: 0;
	z-index: 30;
}
/* Logged-in users see the WP admin bar fixed above everything — offset the
   sticky header so the topbar is not hidden behind it. */
body.admin-bar header.elementor[data-elementor-type="header"] {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar header.elementor[data-elementor-type="header"] {
		top: 46px;
	}
}
/* WPs Admin-Bar ist unter 600px position:absolute (scrollt weg) — dann darf
   der Header keinen Offset haben, sonst klebt er 46px unter der Oberkante. */
@media (max-width: 600px) {
	body.admin-bar header.elementor[data-elementor-type="header"] { top: 0; }
}

/* Topbar stays a single row on phones. Elementor forces containers to
   --flex-direction: column at the mobile breakpoint and the per-breakpoint
   direction setting does not survive the MCP write, so it is pinned here. */
@media (max-width: 767px) {
	.elementor-element.ahs-topbar-row,
	.elementor-element.ahs-topbar-group {
		--display: flex;
		--flex-direction: row;
		--flex-wrap: nowrap;
		--align-items: center;
	}
	.elementor-element.ahs-topbar-group {
		--width: auto;
	}
	.elementor-element.ahs-topbar-row {
		--justify-content: space-between;
	}
}

/* Desktop-Untermenü (Fahrzeuge › Marken): die Dropdown-Einstellungen des
   Widgets gelten auch fürs Burger-Menü (16px), am Desktop daher kompakter. */
.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu {
	padding: 6px 0;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(24, 24, 24, .14);
	overflow: hidden;
}
.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	font-size: 13px;
	letter-spacing: .2px;
	padding: 12px 20px;
}

/* Burger-Toggle: am rechten Rand ausrichten statt mittig im Nav-Widget. */
@media (max-width: 1024px) {
	.elementor-widget-nav-menu .elementor-menu-toggle {
		margin-inline-start: auto;
		margin-inline-end: 0;
	}
}

/* Michroma is too wide for 10 menu items in one line; the menu and its
   dropdown use the body font in bold, headings stay in Michroma. */
.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item,
.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	font-weight: 700;
}

/* Zwischen 1280 und 1339px passen die 9 Punkte in voller Größe noch nicht
   in eine Zeile, ein Ausblenden des CTA wäre hier aber übertrieben — also
   nur Schrift und Abstände leicht zurücknehmen. */
@media (min-width: 1280px) and (max-width: 1339px) {
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item { font-size: 11.5px; }
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item {
		font-size: 11.5px;
		letter-spacing: 0;
		padding-left: 3px;
		padding-right: 3px;
	}
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li { margin: 0; }
	.elementor-element.elementor-element-f27fee2 img { max-width: 180px; }
}

/* 9 Menüpunkte: zwischen 1025 und 1279px etwas kompakter, damit die
   Navigation einzeilig bleibt (darunter übernimmt ohnehin der Burger). */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item { font-size: 11.5px; }
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item {
		font-size: 11.5px;
		letter-spacing: 0;
		padding-left: 3px;
		padding-right: 3px;
	}
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li {
		margin: 0;
	}
	/* Der Header-CTA doppelt hier den Menüpunkt „Fahrzeugankauf" — ausblenden,
	   damit die 9 Menüpunkte einzeilig bleiben; Logo etwas kompakter. */
	.elementor-element.elementor-element-57e5dea { display: none; }
	.elementor-element.elementor-element-f27fee2 img { max-width: 170px; }
}
/* Unterhalb von 1120px reicht auch das nicht ganz — letzte Stufe vor dem Burger. */
@media (min-width: 1025px) and (max-width: 1119px) {
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item { font-size: 11px; }
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item {
		font-size: 11px;
	}
	.elementor-element.elementor-element-f27fee2 img { max-width: 155px; }
}
/* Direkt oberhalb des Burger-Breakpoints fehlen zuletzt noch rund 30px. */
@media (min-width: 1025px) and (max-width: 1059px) {
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item { font-size: 10.5px; }
	.elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item {
		font-size: 10.5px;
		padding-left: 2px;
		padding-right: 2px;
	}
	.elementor-element.elementor-element-f27fee2 img { max-width: 140px; }
}

/* ── 4 · Utilities ─────────────────────────────────────────────────── */
/* Elementor's inline icon lists carry negative side margins, which push the
   topbar 8px past the viewport and cause a horizontal scrollbar. */
.elementor-icon-list-items.elementor-inline-items {
	margin-inline: 0;
}
.elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin-inline: 0 12px;
}

/* Responsive visibility utilities.
   Elementor's own hide_mobile/hide_tablet flags render as a broken
   `elementor-yes` class when written through the MCP API, so widgets that
   must appear per breakpoint carry these classes instead. Breakpoints match
   the Kit: mobile <= 767, tablet 768-1024. */
/* "mobile" utilities also cover tablet portrait (≤1024px): the long header
   CTAs and the address line do not fit next to each other at 768–1024px. */
@media (max-width: 1024px) {
	.elementor-element.ahs-hide-mobile { display: none; }
	.ahs-topbar-row .elementor-icon-list-item { white-space: nowrap; }
}
@media (min-width: 1025px) {
	.elementor-element.ahs-only-mobile { display: none; }
}
@media (max-width: 1024px) {
	.elementor-element.ahs-hide-touch { display: none; }
}

/* Anchor targets under the sticky header (topbar 50 + nav 78 + Luft). */
[id^="marke-"],
[id^="svc-"],
#bewertung {
	scroll-margin-top: 150px;
}

/* Long German compounds ("Datenschutzerklärung", "Geschäftsbedingungen")
   must be allowed to break on narrow screens instead of widening the page. */
@media (max-width: 767px) {
	h1, h2, h3 {
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

/* ── 5 · Komponenten ───────────────────────────────────────────────── */
/* Brand strip on the home page: logos exactly centred, link on the right.
   Below 1025px the container's own flex centring applies. */
@media (min-width: 1025px) {
	.e-con.ahs-markenleiste > .e-con-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.e-con.ahs-markenleiste > .e-con-inner > .ahs-brands { grid-column: 2; }
	.e-con.ahs-markenleiste > .e-con-inner > .elementor-widget-button { grid-column: 3; justify-self: end; }
}

/* ── Card hover ──────────────────────────────────────────────────────
   Containers/widgets carrying .ahs-card lift slightly on hover. */
.elementor-element.ahs-card {
	transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.elementor-element.ahs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(24, 24, 24, .12);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-element.ahs-card { transition: none; }
	.elementor-element.ahs-card:hover { transform: none; }
}

/* ── Schnellzugriff (Startseite, unter dem Claim) ────────────────────
   Vier gleich breite Buttons, mobil 2 × 2. */
.e-con.ahs-schnellzugriff {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}
.e-con.ahs-schnellzugriff .elementor-button { width: 100%; justify-content: center; }
@media (max-width: 767px) {
	.e-con.ahs-schnellzugriff { grid-template-columns: repeat(2, 1fr); }
	.e-con.ahs-schnellzugriff .elementor-button { padding-left: 8px; padding-right: 8px; font-size: 14px; }
}

/* ── Row cards (Leitung: photo | text) ──────────────────────────────
   The text column must be allowed to shrink inside the clipped card;
   Elementor's default min-width:auto lets long words push it out of view. */
.elementor-element.ahs-card--row > .e-con {
	min-width: 0;
}
.elementor-element.ahs-card--row > .e-con:last-child {
	flex: 1 1 0%;
	width: auto;
	max-width: 100%;
}
.elementor-element.ahs-card--row .elementor-heading-title {
	overflow-wrap: anywhere;
}

/* E-mail in row cards: below 1025px the two .nw parts ("name@" / "domain")
   stack, so the address never pushes out of the clipped card. */
@media (max-width: 1024px) {
	.elementor-element.ahs-card--row .nw { display: block; }
}

/* Markenlogos in der Markenleiste (Startseite hell, Footer dunkel).
   Einheitliche optische Höhe statt einheitlicher Breite — die Wortmarken
   haben sehr unterschiedliche Seitenverhältnisse. */
.ahs-brands .ahs-marke-logo img {
	height: 24px;
	width: auto;
	max-width: none;
	transition: opacity .2s ease;
}
.ahs-brands .ahs-marke-logo:hover img { opacity: .65; }
/* Vespa-Schriftzug ist deutlich kompakter gezeichnet — etwas groesser,
   damit alle vier Marken optisch gleich schwer wirken. */
.ahs-brands .ahs-marke-logo--vespa img { height: 30px; }
/* Citroen fuehrt seit 2022 ein hochformatiges Oval mit Schriftzug darunter.
   In der schmalen Markenleiste waere der Schriftzug nur ~5px hoch und damit
   unleserlich — dort steht deshalb die Emblem-Variante ohne Schriftzug
   (auf der Marken-Seite laeuft das vollstaendige Logo mit 110px). */
.ahs-brands .ahs-marke-logo--oval img { height: 38px; }

/* Markenlogo in der dunklen Kachel auf der Marken-Seite.
   max-height statt height: sonst greift bei sehr breiten Wortmarken
   (XPENG) die max-width-Grenze und staucht das Logo. */
.ahs-kachel-logo img { max-height: 110px; max-width: 100%; width: auto; height: auto; }
/* JAECOO und OMODA teilen sich eine Kachel — beide etwas kleiner,
   Vespa ist kompakter gezeichnet und darf grosszuegiger stehen. */
.ahs-kachel-logo--duo img { max-height: 62px; }
.ahs-kachel-logo--vespa img { max-height: 96px; }
@media (max-width: 767px) {
	.ahs-kachel-logo img { max-height: 84px; }
	.ahs-kachel-logo--duo img { max-height: 50px; }
	.ahs-kachel-logo--vespa img { max-height: 74px; }
}

/* Kundenfoto in der Markenkachel (aktuell nur XPENG). Die Kachel zentriert
   ihre Kinder, das Bild soll dagegen die volle Breite nehmen und mit einem
   festen Seitenverhaeltnis stehen, damit die Kachel neben der langen
   Textspalte nicht in der Hoehe springt. */
.ahs-kachel-foto { width: 100%; }
.ahs-kachel-foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
@media (max-width: 767px) {
	.ahs-kachel-foto img { aspect-ratio: 16 / 10; }
}

/* Band ueber den XPENG-Aktionen: links das Kundenfoto, rechts Kurzfassung und
   Button. Das Bild fuellt seine Spalte ueber die volle Hoehe des Bandes, damit
   links und rechts buendig abschliessen — deshalb absolut positioniert, sonst
   diktiert das Bild die Bandhoehe statt umgekehrt. */
.ahs-xpeng-band__bild { position: relative; min-height: 300px; }
.ahs-xpeng-band__img,
.ahs-xpeng-band__img .elementor-widget-container,
.ahs-xpeng-band__img figure,
.ahs-xpeng-band__img a { position: absolute; inset: 0; }
.ahs-xpeng-band__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}
/* Ab Tablet stehen Bild und Text untereinander — dann braucht das Bild wieder
   den normalen Fluss mit festem Seitenverhaeltnis. */
@media (max-width: 1024px) {
	.ahs-xpeng-band__bild { position: static; min-height: 0; }
	.ahs-xpeng-band__img,
	.ahs-xpeng-band__img .elementor-widget-container,
	.ahs-xpeng-band__img figure,
	.ahs-xpeng-band__img a { position: static; }
	.ahs-xpeng-band__img img { height: 340px; }
}
@media (max-width: 767px) {
	.ahs-xpeng-band__img img { height: 240px; }
}
@media (max-width: 767px) {
	.ahs-brands .ahs-marke-logo img { height: 20px; }
	.ahs-brands .ahs-marke-logo--vespa img { height: 25px; }
	.ahs-brands .ahs-marke-logo--oval img { height: 30px; }
}

/* ── Beitragsbilder in der Uebersicht ────────────────────────────────
   Feste 16:9-Flaeche fuer jedes Vorschaubild. Ohne sie bestimmt das einzelne
   Bild die Hoehe — die Beitraege haben 16:9- und 4:3-Motive gemischt — und der
   Text darunter rutscht, sobald das Bild eintrifft (gemessen 0,107 CLS auf
   /aktuelles/). Nebeneffekt: die Karten stehen jetzt auf gleicher Hoehe. */
.elementor-posts .elementor-post__thumbnail {
	aspect-ratio: 16 / 9;
}
.elementor-posts .elementor-post__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Brand strip marquee (phones only) ───────────────────────────────
   main.js wraps the pills of every .ahs-brands container into
   .ahs-brand-tracks > .ahs-brand-track ×2. On desktop the wrappers are
   display:contents and the clone is hidden, so the layout is untouched. */
.ahs-brands .ahs-brand-tracks,
.ahs-brands .ahs-brand-track { display: contents; }
.ahs-brands .ahs-brand-track--clone { display: none; }

@media (max-width: 767px) {
	.elementor-element.ahs-brands.e-con {
		display: block;
		/* Hoehe einer Pillenzeile fest reservieren. Bis main.js die Pillen in
		   die Laufschrift umbaut, stapeln sie sich untereinander: gemessen
		   136px statt 30px, der Inhalt darunter sprang um 106px nach oben
		   (CLS 0,09-0,18 auf der Startseite, 0,107 auf /aktuelles/). */
		height: var(--ahs-brandstrip-h, 30px);
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}
	.ahs-brands .ahs-brand-tracks {
		display: flex;
		width: max-content;
		max-width: none;
		animation: ahsBrandMarquee 26s linear infinite;
	}
	.ahs-brands:hover .ahs-brand-tracks { animation-play-state: paused; }
	.ahs-brands .ahs-brand-track,
	.ahs-brands .ahs-brand-track--clone {
		display: flex;
		flex: 0 0 auto;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		gap: 28px;
		padding-right: 28px;
	}
	.ahs-brands .ahs-brand-track > .elementor-element { flex: 0 0 auto; width: auto; max-width: none; }
	@keyframes ahsBrandMarquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.ahs-brands .ahs-brand-tracks { animation: none; }
		.ahs-brands .ahs-brand-track--clone { display: none; }
		.elementor-element.ahs-brands { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
	}
}

/* ── Hero slider ────────────────────────────────────────────────────
   Full-bleed slider; align its content with the 1160px content column. */
.elementor .elementor-widget-slides .swiper-slide .swiper-slide-inner {
	padding-inline: max(20px, calc((100% - 1160px) / 2));
}
.elementor-widget-slides .elementor-slide-heading {
	overflow-wrap: anywhere;
	/* Display-Headlines nicht silbentrennen ("BA-RES" auf 360px) —
	   Umbruch nur an Wortgrenzen, overflow-wrap bleibt als Notbremse. */
	hyphens: manual;
	-webkit-hyphens: manual;
}
/* Pagination dots: 24px tap target incl. spacing (WCAG 2.5.8). */
.elementor .elementor-widget-slides .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0 8px;
}

/* Hero slider: die Regel, die alle Folien ausser der ersten zurueckhaelt,
   steht bewusst NICHT hier, sondern wird in functions.php inline ausgegeben —
   sie braucht die Repeater-Klasse der ersten Folie. Eine Positionsregel
   (:first-child) funktioniert hier nicht: Swiper laeuft im Loop-Modus und
   haengt Klone vor die echten Folien, danach zeigt :first-child auf einen Klon
   und die tatsaechlich sichtbare erste Folie wird leergeraeumt. */

/* Hero slider: die echten Fotos vom 10.09. zeigen Schauraum und Gelaende,
   das Motiv sitzt in der Bildmitte — deshalb zentriert statt am oberen Rand
   verankert (die alte Regel stammt von den Stockbildern mit Koepfen oben). */
.elementor .elementor-element.ahs-hero-slider .swiper-slide .swiper-slide-bg {
	background-position: center center;
}

/* Team list on /unternehmen/. One text-editor per department holds the
   members as .ahs-member rows so the client can edit 28 people in one place.
   The e-mail is split into two nowrap spans: the only allowed break is
   after the "@", never inside the domain. */
.ahs-member-list .ahs-member {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-top: 1px solid #E4E7E6;
}
.ahs-member-list .ahs-member:first-child {
	border-top: 0;
	padding-top: 0;
}
.ahs-member-list .ahs-member strong {
	display: block;
	font-family: "Michroma", sans-serif;
	font-weight: 700;
	color: #181818;
}
.ahs-member-list .ahs-member span:not(.nw) {
	display: block;
	font-size: 14px;
	color: #6B6F6D;
}
.ahs-member-list .ahs-member a {
	font-size: 14px;
	font-weight: 700;
	color: #1F3D2B;
	min-width: 0;
}
.ahs-member-list .nw {
	white-space: nowrap;
}
.ahs-team-mail .nw {
	white-space: nowrap;
}

/* ── Blog post content (theme-post-content widget) ───────────────────
   Editor headings inside an article are sub-headings, not page titles. */
.elementor-widget-theme-post-content h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); margin: 1.6em 0 0.6em; }
.elementor-widget-theme-post-content h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem); margin: 1.4em 0 0.5em; }
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol { margin-bottom: 1.1em; }
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol { padding-left: 1.4em; }
.elementor-widget-theme-post-content img { border-radius: 12px; height: auto; }
.elementor-widget-theme-post-content a { text-decoration: underline; text-underline-offset: 2px; }

/* Eckdaten-Kasten für Event-Beiträge. Im Editor als HTML-Block einfügen:
   <p class="ahs-event-facts"><span><strong>Wann:</strong> …</span>…</p>
   Jedes <span> wird eine eigene Zeile — Wann / Wo / Eintritt. */
.elementor-widget-theme-post-content .ahs-event-facts {
	display: flex;
	flex-direction: column;
	gap: .35em;
	margin: 0 0 1.6em;
	padding: 1em 1.2em;
	border-left: 4px solid #7E5F40;
	border-radius: 0 8px 8px 0;
	background: #E7EDE6;
}
.elementor-widget-theme-post-content .ahs-event-facts strong {
	display: inline-block;
	min-width: 5.5em;
	color: #7E5F40;
}

/* ── 6 · Micro-Interactions ────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   Micro-Interactions (Politur 2026-09-02)
   ════════════════════════════════════════════════════════════════════ */

/* Buttons: on hover only the colours change (set per button or in the Kit).
   Lift, shadow and icon slide were dropped on 01.10.2026 — in the header
   they made the buttons jump (customer feedback). */
.elementor-button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Karten mit Foto-Kopf (Aktionen, Leitung): Foto zoomt leicht mit. */
.elementor-element.ahs-card > .e-con {
	transition: transform 0.35s ease;
}
.elementor-element.ahs-card:hover > .e-con:first-child {
	transform: scale(1.03);
}

/* Tastatur-Fokus deutlich sichtbar (a11y-Politur). */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #1F3D2B;
	outline-offset: 2px;
}

/* Sanftes Scrollen zu Ankern (Marken, Leistungen, #bewertung). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Reveal-on-Scroll: JS setzt .ahs-reveal-armed auf <body> (Fallback: ohne
   JS bleibt alles sichtbar) und .ahs-in, sobald ein Element im Viewport ist. */
@media (prefers-reduced-motion: no-preference) {
	body.ahs-reveal-armed .ahs-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.35s ease-out, transform 0.35s ease-out;
	}
	body.ahs-reveal-armed .ahs-reveal.ahs-in {
		opacity: 1;
		transform: none;
	}
}

/* ── 7 · Kontrast & Barrierefreiheit ───────────────────────────────── */
/* ── AA-Kontrast-Politur (Lighthouse-Durchlauf 2026-09-02) ───────────
   Textlinks überall im dunkleren Brand-Grün (5,5:1 statt 3,9:1). */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a,
.elementor-field-subgroup .elementor-field-option label a,
form .elementor-field-type-acceptance a {
	color: #1F3D2B;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Auf dunklem Grund (Footer) braucht der Link die helle Brand-Variante. */
[data-elementor-type="footer"] .elementor-widget-text-editor a:not(.elementor-button) {
	color: #9FB59F;
}
/* Complianz-Platzhalter über der Karte: deutlicher Hintergrund. */
.cmplz-blocked-content-notice {
	background: rgba(24, 24, 24, 0.85) !important;
	color: #FFFFFF !important;
}
/* Archiv-Karten: Auszugstext dunkel genug. */
.elementor-posts-container .elementor-post__excerpt p { color: #333333; }

/* Icon-only buttons: keep a visually hidden label for screen readers. */
.ahs-icon-btn .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Einwilligungstext der Newsletter-Anmeldung. Elementor faerbt das Label des
   Acceptance-Feldes mit der globalen Textfarbe #333 — auf dem Espresso-Footer
   ergibt das 1,25:1 und ist praktisch unsichtbar. */
[data-elementor-type="footer"] .elementor-field-type-acceptance label,
[data-elementor-type="footer"] .elementor-field-type-acceptance .elementor-field-option label {
	color: #DDD8D3;
	font-size: 13px;
	line-height: 1.5;
}
/* Die Regel fuer Formularlinks auf hellem Grund ist tiefer verschachtelt und
   gewinnt sonst — hier deshalb mit derselben Tiefe plus Footer-Kontext. */
[data-elementor-type="footer"] .elementor-field-subgroup .elementor-field-option label a,
[data-elementor-type="footer"] .elementor-field-type-acceptance a {
	color: #9FB59F;
}

/* Complianz setzt die Farbe des Hinweises „Immer aktiv" ueber eine eigene
   Custom Property, deren Standardwert das Browser-Gruen `green` ist. Das ist
   kontrastmaessig in Ordnung (4,8:1 auf dem gerasterten Hintergrund), passt
   aber nicht zur Palette — daher auf das Brand-Gruen der Textlinks gesetzt.
   Auch am Container definiert, damit die Reihenfolge der Stylesheets egal ist. */
:root,
#cmplz-cookiebanner-container,
#cmplz-manage-consent-container {
	--cmplz_category_header_always_active_color: #1F3D2B;
}

/* Buttons ausserhalb von Elementor — gebraucht auf /newsletter-bestaetigt/,
   das eine einfache WordPress-Seite ohne Elementor-Widgets ist. Werte aus dem
   Elementor-Button uebernommen, damit die Seite nicht aus der Reihe faellt.
   Der Kit-Stil `.elementor-kit-6 a` faerbt jeden Link gruen und laedt nach
   diesem Stylesheet — deshalb die Variante mit `.site-main a`, die ihn in der
   Spezifitaet schlaegt, ohne zu `!important` zu greifen. */
.site-main a.ahs-btn,
.ahs-btn {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 4px;
	background: #1F3D2B;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid #1F3D2B;
	transition: background-color .2s ease, border-color .2s ease;
}
.site-main a.ahs-btn:hover,
.site-main a.ahs-btn:focus-visible,
.ahs-btn:hover,
.ahs-btn:focus-visible {
	background: #1F3D2B;
	border-color: #1F3D2B;
	color: #FFFFFF;
	text-decoration: none;
}
.site-main a.ahs-btn--outline,
.ahs-btn--outline {
	background: transparent;
	color: #181818;
	border-color: #E4E7E6;
}
.site-main a.ahs-btn--outline:hover,
.site-main a.ahs-btn--outline:focus-visible,
.ahs-btn--outline:hover,
.ahs-btn--outline:focus-visible {
	background: #15291E;
	border-color: #15291E;
	color: #FFFFFF;
}
.ahs-btn + .ahs-btn {
	margin-left: 12px;
}
@media (max-width: 480px) {
	.ahs-btn { display: block; text-align: center; }
	.ahs-btn + .ahs-btn { margin: 12px 0 0; }
}

/* Rueckmeldungen des Newsletter-Formulars im Footer. Elementor gibt ihnen die
   globale Textfarbe #333 — auf dem Espresso-Grund sind das 1,25:1, die
   Erfolgsmeldung war praktisch unsichtbar. */
[data-elementor-type="footer"] .elementor-message {
	color: #DDD8D3;
	font-size: 14px;
	line-height: 1.5;
}
[data-elementor-type="footer"] .elementor-message.elementor-message-success {
	color: #9FB59F;
}
[data-elementor-type="footer"] .elementor-message.elementor-message-danger,
[data-elementor-type="footer"] .elementor-message.elementor-message-error {
	color: #FFB4A2;
}

/* Die Einwilligungs-Checkbox erbt den halbtransparenten Feldhintergrund der
   Textfelder und verschwindet damit im dunklen Footer. Zurueck auf eine weisse
   Box mit sichtbarem Rand; groesser, weil 13 px als Klickziel zu klein sind.
   Die lange Selektorkette ist noetig, um die generierte Elementor-Regel
   (sechs Klassen) zu schlagen, ohne `!important` zu setzen. */
[data-elementor-type="footer"] .elementor-form .elementor-field-group.elementor-field-type-acceptance input[type="checkbox"].elementor-acceptance-field.elementor-field {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-right: 4px;
	background-color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.75);
	accent-color: #1F3D2B;
	cursor: pointer;
}

/* ── 8 · Fahrzeugbestand (Shortcode [ahs_fahrzeuge]) ───────────────── */
/* Karten nach dem Vorbild der frueheren Beispielkarten auf der Startseite:
   weiss, 1px-Rand, 12px Radius, Preis gruen in Michroma. Die ganze
   Karte ist klickbar ueber den gestreckten Link im Titel. */
.ahs-fz-filter {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 0 0 20px;
	padding: 22px;
	background: #FFFFFF;
	border: 1px solid #E4E7E6;
	border-radius: 12px;
	scroll-margin-top: 140px;
}
@media (max-width: 1024px) { .ahs-fz-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ahs-fz-filter { gap: 10px 10px; padding: 14px; } }
.ahs-fz-feld { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ahs-fz-feld--suche { grid-column: span 2; }
.ahs-fz-feld > span {
	color: #333333;
	font-family: 'Michroma', sans-serif;
	font-size: 13px;
	font-weight: 600;
}
.ahs-fz-feld select,
.ahs-fz-feld input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #D5DAD8;
	border-radius: 4px;
	background-color: #FFFFFF;
	color: #181818;
	font-size: 15px;
}
.ahs-fz-feld select:focus-visible,
.ahs-fz-feld input:focus-visible { outline: 2px solid #1F3D2B; outline-offset: 1px; border-color: #1F3D2B; }
.ahs-fz-aktionen {
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
@media (max-width: 1024px) { .ahs-fz-aktionen { grid-column: span 2; } }
@media (max-width: 480px) {
	.ahs-fz-feld > span { font-size: 12px; }
	.ahs-fz-feld select, .ahs-fz-feld input { min-height: 42px; padding: 8px 10px; font-size: 14px; }
}
.ahs-fz-aktionen .ahs-btn { padding: 11px 28px; font-size: 16px; cursor: pointer; }
.site-main a.ahs-fz-reset,
.ahs-fz-reset { color: #1F3D2B; font-size: 13px; font-weight: 700; }
.ahs-fz-anzahl { margin: 0 0 16px; color: #6B6F6D; font-size: 14px; }
/* Schnellsuche auf der Startseite: sitzt schon in einer Elementor-Karte,
   daher ohne eigenen Rahmen und Innenabstand. */
.ahs-fz-filter--schnell { margin: 0; padding: 0; border: 0; background: none; }
.ahs-fz-filter--schnell .ahs-fz-aktionen { grid-column: auto; }
.ahs-fz-filter--schnell .ahs-fz-aktionen .ahs-btn { width: 100%; min-height: 46px; }

.ahs-fz-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) { .ahs-fz-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px)  { .ahs-fz-liste { grid-template-columns: 1fr; } }

.ahs-fz-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #E4E7E6;
	border-radius: 12px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ahs-fz-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(24, 24, 24, 0.08); }
/* Kontur nur bei Tastaturbedienung — nach einem Mausklick bliebe sie sonst
   an der zuletzt geoeffneten Karte haengen. */
.ahs-fz-karte:has(a:focus-visible) { outline: 2px solid #1F3D2B; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ahs-fz-karte { transition: none; }
	.ahs-fz-karte:hover { transform: none; }
}

.ahs-fz-bild { position: relative; aspect-ratio: 3 / 2; background: #F2F4F3; }
.ahs-fz-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ahs-fz-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 4px;
	background: #1F3D2B;
	color: #FFFFFF;
	font-family: 'Michroma', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.ahs-fz-inhalt { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 22px 20px; }
.ahs-fz-over {
	color: #6B6F6D;
	font-family: 'Michroma', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.ahs-fz-titel { margin: 0; font-size: 19px; line-height: 1.3; }
.site-main .ahs-fz-titel a,
.ahs-fz-titel a { color: #181818; text-decoration: none; }
.ahs-fz-titel a::after { content: ''; position: absolute; inset: 0; }
.ahs-fz-titel a:focus-visible { outline: none; }
.ahs-fz-meta { margin: 0; color: #333333; font-size: 13px; }
.ahs-fz-preis {
	margin-top: auto;
	padding-top: 6px;
	color: #1F3D2B;
	font-family: 'Michroma', 'Atkinson Hyperlegible', sans-serif;
	font-size: 22px;
	font-weight: 800;
}
.ahs-fz-link { color: #1F3D2B; font-size: 14px; font-weight: 700; }
.ahs-fz-hinweis, .ahs-fz-leer { margin: 24px 0; color: #6B6F6D; font-size: 13px; }

/* ── 9 · Newsletter-Karte im Footer ────────────────────────────────── */
/* Elementor setzt den Absende-Button immer ans Ende der Felder. Damit
   E-Mail-Feld und Button in einer Zeile stehen, kommt die Einwilligung per
   `order` hinter den Button. */
.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-group-email { order: 1; }
.ahs-nl-karte .elementor-form-fields-wrapper > .e-form__buttons,
.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-type-submit { order: 2; }
.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-group-einwilligung { order: 3; }
.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-group-website_url_hp { order: 4; }
/* Link in der Einwilligung: weiss statt Brand-Gruen, sonst auf der gruenen
   Karte kaum lesbar. */
.ahs-nl-karte .elementor-field-subgroup .elementor-field-option label a {
	color: #FFFFFF;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-group-email,
	.ahs-nl-karte .elementor-form-fields-wrapper > .e-form__buttons,
	.ahs-nl-karte .elementor-form-fields-wrapper > .elementor-field-type-submit { width: 100%; }
}

/* Footer-Spalten als Akkordeon (mobil, main.js Abschnitt 12). Der Knopf
   erbt die Schrift der Überschrift, am Desktop sieht er aus wie Text. */
body .ahs-fuss-klappe .ahs-fuss-knopf,
body .ahs-fuss-klappe .ahs-fuss-knopf:hover,
body .ahs-fuss-klappe .ahs-fuss-knopf:focus {
	all: unset;
	box-sizing: border-box;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
@media (max-width: 767px) {
	.e-con.ahs-fuss-klappe {
		border-top: 1px solid rgba(255, 255, 255, .14);
		padding-top: 14px;
	}
	.ahs-fuss-klappe .elementor-widget-heading { width: 100%; }
	body .ahs-fuss-klappe .ahs-fuss-knopf,
	body .ahs-fuss-klappe .ahs-fuss-knopf:hover,
	body .ahs-fuss-klappe .ahs-fuss-knopf:focus {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		cursor: pointer;
	}
	.ahs-fuss-knopf::after { content: "+"; font-size: 1.4em; line-height: 1; opacity: .7; }
	.ahs-fuss-klappe.ist-offen .ahs-fuss-knopf::after { content: "−"; }
	.ahs-fuss-knopf:focus-visible { outline: 2px solid #9FB59F; outline-offset: 4px; }
	.ahs-fuss-klappe.ist-klappbar:not(.ist-offen) .elementor-widget-heading ~ .elementor-widget { display: none; }
}

/* ── 10 · Google-Bewertungen (Shortcode [ahs_google_bewertungen]) ──── */
/* Variante C vom Design-Canvas: Kopf mit Titel links und gruener
   Bewertungs-Plakette rechts, zwei Rezensionskarten mit Akzentleiste oben,
   dritte Karte in Brand-Gruen laedt zum Bewerten ein. */
.ahs-gb-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 24px;
	margin: 0 0 32px;
}
.ahs-gb-overline {
	margin-bottom: 10px;
	color: #7E5F40;
	font-family: 'Michroma', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.9px;
	text-transform: uppercase;
}
.ahs-gb-titel h2 {
	margin: 0;
	color: #181818;
	font-family: 'Michroma', sans-serif;
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.ahs-gb-schnitt {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-radius: 12px;
	background: #E9ECEA;
}
.ahs-gb-zahl {
	color: #1F3D2B;
	font-family: 'Michroma', sans-serif;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
}
.ahs-gb-schnitt-rechts { display: flex; flex-direction: column; gap: 4px; }
.ahs-gb-sterne { color: #E5A00D; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.ahs-gb-sterne--leer { color: #B9C9C1; }
.ahs-gb-anzahl { color: #15291E; font-size: 14px; }

.ahs-gb-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) { .ahs-gb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ahs-gb-liste { grid-template-columns: 1fr; } }
.ahs-gb-karte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 30px 28px;
	background: #FFFFFF;
	border: 1px solid #E4E7E6;
	border-top: 4px solid #1F3D2B;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(24, 24, 24, 0.06);
}
.ahs-gb-karte .ahs-gb-sterne { font-size: 17px; }
.ahs-gb-karte .ahs-gb-sterne--leer { color: #D5DAD8; }
.ahs-gb-text { flex: 1; margin: 0; color: #333333; font-size: 16px; line-height: 1.6; }
/* Links mit `.ahs-gb` davor: der Kit-Stil `.elementor-kit-6 a` faerbt sonst
   jeden Link gruen — auf der gruenen Einladungskarte unsichtbar. */
.ahs-gb a.ahs-gb-mehr { margin-top: -6px; color: #1F3D2B; font-size: 14px; font-weight: 700; }
.ahs-gb-autor { display: flex; align-items: center; gap: 12px; }
.ahs-gb-autor > span:last-child { display: flex; flex-direction: column; font-size: 13px; color: #6B6F6D; }
.ahs-gb-autor strong { color: #181818; font-size: 15px; }
.ahs-gb-initialen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	height: 42px;
	border-radius: 50%;
	background: #E9ECEA;
	color: #1F3D2B;
	font-family: 'Michroma', sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.ahs-gb-einladung {
	justify-content: space-between;
	background: #1F3D2B;
	border-color: #1F3D2B;
	box-shadow: none;
	color: #FFFFFF;
}
.ahs-gb-einladung h3 {
	margin: 0 0 12px;
	color: #FFFFFF;
	font-family: 'Michroma', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
.ahs-gb-einladung p { margin: 0; color: #E3F2EB; font-size: 16px; line-height: 1.6; }
.ahs-gb-knoepfe { display: flex; flex-direction: column; gap: 10px; }
/* Tablet: zwei Rezensionen nebeneinander, die Einladung als volle Zeile
   darunter statt allein in der zweiten Reihe. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ahs-gb-einladung { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 32px; }
	.ahs-gb-knoepfe { flex: 0 0 260px; }
}
.ahs-gb a.ahs-gb-knopf {
	display: flex;
	justify-content: center;
	padding: 13px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 4px;
	color: #FFFFFF;
	font-family: 'Michroma', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.ahs-gb a.ahs-gb-knopf:hover,
.ahs-gb a.ahs-gb-knopf:focus-visible { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.ahs-gb a.ahs-gb-knopf--voll { background: #FFFFFF; border-color: #FFFFFF; color: #1F3D2B; }
.ahs-gb a.ahs-gb-knopf--voll:hover,
.ahs-gb a.ahs-gb-knopf--voll:focus-visible { background: #E9ECEA; color: #1F3D2B; }
.ahs-gb-quelle { margin: 16px 0 0; color: #6B6F6D; font-size: 13px; }

/* [ahs_google_schnitt] in den Hero-Kennzahlen: wie die Zahl-Headings daneben. */
.ahs-kennzahl {
	color: #FFFFFF;
	font-family: Michroma, sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
}
@media (max-width: 767px) {
	.ahs-kennzahl { font-size: 30px; }
}

/* ── 11 · Hero mit Personen: Fokus knapp ueber den Koepfen ─────────── */
/* Ein fester Prozentwert haelt den Abstand ueber den Koepfen nicht auf allen
   Breiten: bei 1440 px bleibt viel Leere oben, bei 1920 px sind die Koepfe
   angeschnitten. Stattdessen werden Groesse und Position aus der
   Viewportbreite gerechnet (Fotos 16:9, 1920 x 1080):
     --kopf-px  Oberkante des hoechsten Kopfes im Original, in px
     --w        Bildbreite: mindestens die Viewportbreite, bei Bedarf so viel
                groesser, dass Kopf + --luft noch in den Hero passen, ohne dass
                das Bild unten endet (sonst bleibt oben Leere)
     Position   Kopf-Oberkante auf --luft; max() verhindert eine Luecke unten,
                min() eine Luecke oben.
   In Elementor ist die Hintergrundposition dieser Container leer, damit
   diese Regel greift. */
.elementor-element.ahs-hero-kopf {
	--luft: 32px;
	--hero-h: 520px;
	--w: max(100vw, calc(var(--hero-h) * 1920 / 1080), calc((var(--hero-h) - var(--luft)) * 1920 / (1080 - var(--kopf-px))));
	background-size: var(--w) auto;
	background-position: var(--x, 50%) min(0px, max(calc(var(--luft) - var(--kopf-px) / 1920 * var(--w)), calc(var(--hero-h) - 0.5625 * var(--w))));
}
@media (max-width: 1024px) {
	.elementor-element.ahs-hero-kopf { --hero-h: 480px; }
}
/* Mobil zeigt der schmale Ausschnitt nur einen Teil der Gruppe — --x-mobil
   waehlt, welchen. */
@media (max-width: 767px) {
	.elementor-element.ahs-hero-kopf { --hero-h: 520px; --x: var(--x-mobil, 50%); }
}
.elementor-element.ahs-hero-kopf--fahrzeuge  { --kopf-px: 163; --x-mobil: 85%; }  /* schauraum-lexus-team */
.elementor-element.ahs-hero-kopf--leistungen { --kopf-px: 185; }                  /* werkstatt-team */
.elementor-element.ahs-hero-kopf--team       { --kopf-px: 435; }                  /* team-vor-dem-haus */

/* Side images on Leistungen/Unternehmen: the photos are 3:2. A fixed height of
   400px cut the people at the edges of the group shots, so the box now takes
   the photo's proportions instead (min-height cleared on the container). */
.e-con.ahs-bild-32 {
	aspect-ratio: 3 / 2;
	flex-shrink: 0;
}

/* ── 360° model showroom ([ahs_modelle], inc/modelle.php + js/modelle.js) ── */
.ahs-modelle-kopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 24px;
}
.ahs-modelle-overline {
	font: 700 var(--fs-overline)/1.2 'Michroma', sans-serif;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: #7E5F40;
	margin-bottom: 8px;
}
.ahs-modelle-kopf h2 { margin: 0; }
.ahs-modelle-pfeile { display: flex; gap: 8px; }
.ahs-modelle .ahs-modelle-pfeil {
	padding: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #D9DCDA;
	background: #fff;
	color: #181818;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ahs-modelle .ahs-modelle-pfeil:hover { background: #1F3D2B; border-color: #1F3D2B; color: #fff; }

.ahs-modelle-liste {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 4px 0 12px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ahs-modelle-liste::-webkit-scrollbar { display: none; }
.ahs-modell {
	flex: 0 0 clamp(260px, 30%, 380px);
	scroll-snap-align: start;
}
.ahs-modelle .ahs-modell-knopf {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid #E4E7E6;
	border-radius: 12px;
	background: #fff;
	color: #181818;
	text-align: left;
	font: inherit;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.ahs-modelle button.ahs-modell-knopf:hover { border-color: #1F3D2B; }
.ahs-modell--folgt .ahs-modell-knopf { cursor: default; }
.ahs-modell-bild {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #EEF0EE;
}
.ahs-modell-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ahs-modell--folgt .ahs-modell-bild img { filter: grayscale(0.35); opacity: 0.85; }
.ahs-modell-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #1F3D2B;
	color: #fff;
	font: 700 12px/1 'Michroma', sans-serif;
	letter-spacing: 0.04em;
}
.ahs-modell--folgt .ahs-modell-badge { background: #6B6F6D; }
.ahs-modell-text { display: block; padding: 16px 18px 18px; }
.ahs-modell-text small {
	display: block;
	font: 700 11px/1.3 'Michroma', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6B6F6D;
	margin-bottom: 4px;
}
.ahs-modell-text strong { display: block; font: 700 19px/1.25 'Michroma', sans-serif; }
.ahs-modell-cta { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: #1F3D2B; }
.ahs-modell--folgt .ahs-modell-cta { color: #6B6F6D; font-weight: 400; }

/* Kit button styles (colour, padding, uppercase) must not reach these controls. */
.ahs-modelle button,
.ahs-360 button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}
.ahs-modelle .ahs-modell-knopf:hover,
.ahs-modelle .ahs-modell-knopf:focus { background: #fff; color: #181818; }
.ahs-360 .ahs-360-zu:hover { background: #F1F2F1; color: #181818; }
.ahs-360 .ahs-360-tabs button:hover { background: #E4E7E6; color: #181818; }
.ahs-360 .ahs-360-tabs button[aria-selected="true"]:hover { background: #1F3D2B; color: #fff; }

/* Dialog */
html.ahs-360-offen { overflow: hidden; }
.ahs-360 {
	width: min(1200px, 100vw - 32px);
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: #181818;
	overflow: hidden;
}
.ahs-360::backdrop { background: rgba(24, 24, 24, 0.72); }
.ahs-360-kopf {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid #E4E7E6;
}
.ahs-360-kopf small {
	display: block;
	font: 700 11px/1.3 'Michroma', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6B6F6D;
}
.ahs-360-kopf strong { font: 700 20px/1.2 'Michroma', sans-serif; }
.ahs-360-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #F1F2F1; }
.ahs-360 .ahs-360-tabs button {
	border: 0;
	border-radius: 999px;
	padding: 8px 14px;
	background: transparent;
	color: #333;
	font: 700 13px/1 'Michroma', sans-serif;
	cursor: pointer;
}
.ahs-360 .ahs-360-tabs button[aria-selected="true"] { background: #1F3D2B; color: #fff; }
.ahs-360 .ahs-360-zu {
	padding: 0;
	color: #181818;
	width: 40px;
	height: 40px;
	border: 1px solid #D9DCDA;
	border-radius: 50%;
	background: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.ahs-360-buehne {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: calc(100vh - 190px);
	width: 100%;
	background: #E4E6E5;
}
.ahs-360-buehne:fullscreen { max-height: none; aspect-ratio: auto; }
.ahs-360-aussen,
.ahs-360-innen { position: absolute; inset: 0; overflow: hidden; }
.ahs-360-aussen { cursor: grab; touch-action: none; outline: none; }
.ahs-360-aussen:active { cursor: grabbing; }
.ahs-360-aussen.ist-gezoomt { cursor: move; }
.ahs-360-bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	transform-origin: center;
	transition: transform 0.08s linear;
}
.ahs-360-pano { width: 100%; height: 100%; }
.ahs-360-lade {
	position: absolute;
	left: 50%;
	bottom: 24px;
	width: 180px;
	height: 4px;
	margin-left: -90px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.12);
	overflow: hidden;
}
.ahs-360-lade span { display: block; height: 100%; width: 0; background: #1F3D2B; transition: width 0.2s ease; }
.ahs-360-werkzeug {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	gap: 6px;
	z-index: 3;
}
.ahs-360 .ahs-360-werkzeug button {
	padding: 0;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #181818;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.ahs-360 .ahs-360-werkzeug button:hover { background: #1F3D2B; color: #fff; }
.ahs-360-fuss {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	font-size: 14px;
	color: #6B6F6D;
}
.ahs-360 a.ahs-360-cta {
	padding: 10px 16px;
	border-radius: 8px;
	background: #1F3D2B;
	color: #fff;
	font: 700 14px/1 'Michroma', sans-serif;
	text-decoration: none;
	white-space: nowrap;
}
.ahs-360-quelle { padding: 0 18px 12px; font-size: 11px; color: #8A8E8C; }
.ahs-360-quelle:empty { display: none; }

@media (max-width: 767px) {
	.ahs-modelle-pfeile { display: none; }
	.ahs-modell { flex-basis: 82%; }
	.ahs-360 { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
	.ahs-360-kopf { grid-template-columns: 1fr auto; }
	.ahs-360-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
	.ahs-360-buehne { aspect-ratio: auto; height: calc(100dvh - 200px); max-height: none; }
	/* Portrait screen: show the whole car instead of a cut-out. */
	.ahs-360-bild { object-fit: contain; }
	.ahs-360-hinweis { display: none; }
	.ahs-360-fuss { justify-content: flex-end; }
}

/* ===== Team dialog (Unternehmen) — assets/js/team.js ===== */
.ahs-team-karte { cursor: pointer; transition: transform .2s ease; }
.ahs-team-karte:hover { transform: translateY(-3px); }
.ahs-team-karte:focus-visible { outline: 2px solid #1F3D2B; outline-offset: 4px; border-radius: 12px; }
.ahs-team-karte .elementor-image-box-img img { transition: box-shadow .2s ease; }
.ahs-team-karte:hover .elementor-image-box-img img { box-shadow: 0 10px 28px rgba(21,41,30,.18); }

html.ahs-dialog-offen { overflow: hidden; }
.ahs-team-dialog {
	width: min(860px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #FFFFFF;
	color: #181818;
	overflow: auto;
	box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.ahs-team-dialog::backdrop { background: rgba(21,41,30,.72); }
.ahs-team-dialog[open] { display: grid; grid-template-columns: 1fr 1fr; animation: ahs-dialog-ein .2s ease; }
@keyframes ahs-dialog-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ahs-team-dialog__bild img { display: block; width: 100%; height: 100%; max-height: 640px; object-fit: cover; object-position: top center; }
.ahs-team-dialog__text { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ahs-team-dialog__name { margin: 0; font-family: 'Michroma', sans-serif; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: #15291E; }
.ahs-team-dialog__rolle { margin: 0 0 14px; font-size: 16px; color: #6B6F6D; }
.ahs-team-dialog__kontakt { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid #E4E7E6; display: grid; gap: 12px; }
.ahs-team-dialog__kontakt li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ahs-team-dialog__icon { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #E7EDE6; color: #1F3D2B; font-size: 16px; }
.ahs-team-dialog .ahs-team-dialog__kontakt a { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 17px; color: #1F3D2B; font-weight: 700; text-decoration: none; word-break: break-word; }
.ahs-team-dialog__kontakt a:hover { text-decoration: underline; }
.ahs-team-dialog button.ahs-team-dialog__zu {
	position: absolute; top: 12px; right: 12px; z-index: 1;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.92); color: #15291E; font-size: 26px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ahs-team-dialog button.ahs-team-dialog__zu:hover, .ahs-team-dialog button.ahs-team-dialog__zu:focus { background: #E7EDE6; color: #15291E; }
@media (max-width: 640px) {
	.ahs-team-dialog[open] { grid-template-columns: 1fr; }
	.ahs-team-dialog__bild img { max-height: 52dvh; }
}
@media (prefers-reduced-motion: reduce) {
	.ahs-team-karte, .ahs-team-dialog[open] { transition: none; animation: none; }
}