/* ═══════════════════════════════════════════════════════════════
   Campaign Theme
   Customize the values in this block — everything else adapts.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* ── Colors: set by CMS via _site_settings.php ── */
	/* Fallbacks only — CMS values override these      */
	--cm-primary:   #f35e06;
	--cm-secondary: #343a40;
	--cm-bg:        #ffffff;
	--cm-bg-input:  color-mix(in srgb, var(--cm-bg) 70%, white);
	--cm-text:      #1a1a2e;
	--cm-headline:  #1a1a2e;
	--cm-text-muted: color-mix(in srgb, var(--cm-text) 65%, var(--cm-bg));

	/* ── Static design tokens ──────────────────────── */
	--cm-font:            Arial, sans-serif;
	--cm-border:          var(--cm-text);
	--cm-radius:          10px;
	--primary-font-size:  0.875rem;
	--secondary-font-size:  0.625rem;
	--title-font-size:      1.75rem;
	--title-weight:          700;
	--text-weight:           400;
	--text-weight-bold:      600;
	--cm-header-height:   58px; /* logo 38px + padding 2×10px */


	--cm-padding: 1.5rem;

}
/* ═══════════════════════════════════════════════════════════════ */


/* ── Auto-generated tints (no need to edit) ──────────────────── */
:root {
	--cm-primary-tint: color-mix(in srgb, var(--cm-primary) 12%, white);
	--cm-primary-hover: color-mix(in srgb, var(--cm-primary) 85%, black);
}

/* ── WebAwesome brand token overrides ────────────────────────── */
/* WA uses semantic tokens — components read these directly.      */
:root {
	/* Filled button background + strong borders */
	--wa-color-brand-fill-loud:    var(--cm-primary);
	--wa-color-brand-fill-normal:  color-mix(in srgb, var(--cm-primary) 18%, white);
	--wa-color-brand-fill-quiet:   color-mix(in srgb, var(--cm-primary)  8%, white);

	--wa-color-brand-border-loud:   var(--cm-primary);
	--wa-color-brand-border-normal: color-mix(in srgb, var(--cm-primary) 45%, white);
	--wa-color-brand-border-quiet:  color-mix(in srgb, var(--cm-primary) 22%, white);

	/* Text on brand-colored backgrounds */
	--wa-color-brand-on-loud:   white;
	--wa-color-brand-on-normal: var(--cm-primary-hover);
	--wa-color-brand-on-quiet:  var(--cm-primary);

	/* Links + focus ring */
	--wa-color-text-link: var(--cm-primary);
	--wa-color-focus:     var(--cm-primary);

	--wa-font-sans: var(--cm-font);
	--wa-border-radius-m: var(--cm-radius);

	--wa-color-surface-default: var(--cm-bg);
	--wa-color-surface-border:  var(--cm-border);
	--wa-color-text-normal:     var(--cm-text);
	--wa-color-text-heading:    var(--cm-headline);
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--cm-font); font-size: var(--primary-font-size); background: var(--cm-bg); color: var(--cm-text); min-height: 100vh; }

h1, h2, h3, h4, h5, h6 { color: var(--cm-headline); }
h1 { font-size: calc(var(--title-font-size) * 1.25); font-weight: var(--title-weight); }
h2 { font-size: var(--title-font-size); font-weight: var(--title-weight); }
h3 { font-size: calc(var(--title-font-size) * 0.875); font-weight: var(--title-weight); }

/* ── Site header ──────────────────────────────────────────────── */
#cm-site-header {
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#cm-site-logo { height: 30px; width: auto; display: block; }
#cm-site-logo-link { display: inline-block; }

@media (min-width: 960px) {
	#cm-site-header {
		/* justify-content: flex-start; */
		/* padding-left: max(24px, calc((100vw - 1280px) / 2)); */
	}
	#cm-site-logo { height: 38px; }
}

/* ── Mobile nav bar (zurück + titel, mobile only) ─────────────── */
.cm-mobile-nav { padding: 4px 24px; }
.cm-mobile-nav:empty { display: none; }
@media (min-width: 960px) { .cm-mobile-nav { display: none; } }

/* ── Breadcrumb bar ───────────────────────────────────────────── */
.cm-breadcrumb-bar {

	width: min(calc(100% - 3rem), 1440px);
	margin: 0 auto;
	padding: 0 0px 8px;
}
.cm-breadcrumb-bar:empty { display: none; }
@media (max-width: 959px) { .cm-breadcrumb-bar { display: none; } }
.cm-breadcrumb-bar wa-breadcrumb { --wa-color-text-link: var(--cm-text); }
.cm-breadcrumb-bar wa-breadcrumb-item:not([href])::part(label) { color: var(--cm-primary); }

/* ── Site footer ──────────────────────────────────────────────── */
#cm-site-footer {
	border-top: 1px solid var(--cm-border);
	padding: 1.25rem 24px;
}
#cm-site-footer-links {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 24px;
}
#cm-site-footer-links a {
	font-size: 13px;
	color: var(--cm-text-muted);
	text-decoration: none;
}
#cm-site-footer-links a:hover { color: var(--cm-primary); }

/* ── Page layout ──────────────────────────────────────────────── */
#cm-content { max-width: 1440px; margin: 0 auto; padding: var(--cm-padding); }


/* ── Category page sections ───────────────────────────────────── */
.cm-cat-info { max-width: 1440px; margin: 0 auto; padding: var(--cm-padding); }

/* ── Shared info typography (kategorie + car detail) ──────────── */
.cm-info-title    { color: var(--cm-headline); margin-bottom: 4px; }
.cm-info-subtitle { font-size: var(--primary-font-size); color: var(--cm-primary); font-weight: var(--text-weight-bold); margin: 6px 0 8px; }
.cm-info-desc     { font-size: var(--primary-font-size); font-weight: var(--text-weight); line-height: 1.6; margin-top: 8px; }
.cm-info-desc p   { margin: 0 0 8px; }
.cm-info-desc p:last-child { margin-bottom: 0; }

.cm-hero {
	width: min(calc(100% - 3rem), 1440px);
	margin: 0 auto;
	/* padding: 8px 24px 0; */
}
@media (min-width: 960px) {
	.cm-hero { padding-left: 0; padding-right: 0; }
}
.cm-hero picture, .cm-hero img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cm-radius);
}
@media (min-width: 960px) {
	.cm-hero picture, .cm-hero img { aspect-ratio: 16 / 9; }
}

.cm-legal { max-width: 1440px; margin: 0 auto; padding: 8px 24px 0; font-size: var(--secondary-font-size); color: var(--cm-text-muted); line-height: 1.6; }
.cm-legal p { margin: 0; }

/* ── Campaign grid ────────────────────────────────────────────── */
.cm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 1.25rem;
}
.cm-campaign-card { width: 100%; cursor: pointer; }
.cm-campaign-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* ── Car card ─────────────────────────────────────────────────── */
.cm-car-card { width: 100%; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cm-car-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* ── Car detail — mobile base ─────────────────────────────────── */
.cm-car-detail { max-width: 600px; margin: 0 auto; min-height: 100vh; }
/* ── Car detail — layout base (mobile) ───────────────────────── */
.cm-car-nav         { display: flex; align-items: center; padding: 4px 0; }
.cm-car-body-legal  { padding: 8px 0; font-size: var(--secondary-font-size); color: var(--cm-text-muted); line-height: 1.6; }

/* ── Campaign info block (car detail) ─────────────────────────── */
.cm-car-campaign-info { padding: 3rem 0 0;  }

/* Heading: mobile version above hero, desktop version inside the box */
.cm-car-heading-mobile        { padding: 12px 0 4px; }
.cm-car-heading-mobile h1     { font-size: var(--title-font-size); font-weight: var(--title-weight); line-height: 1.2; margin: 0 0 2px; color: var(--cm-headline); }
.cm-car-heading-mobile .sub   { font-size: var(--primary-font-size); font-weight: var(--text-weight-bold); color: var(--cm-text-muted); margin-bottom: 4px; }
.cm-car-body-heading--desktop { display: none; }
.cm-footnotes  { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.cm-footnote   { font-size: var(--secondary-font-size); color: var(--cm-text-muted); line-height: 1.6; display: flex; gap: 4px; align-items: baseline; }
.cm-fn-sup     { font-size: var(--secondary-font-size); vertical-align: super; line-height: 0; font-weight: var(--text-weight-bold); }
.cm-fn-num     { font-weight: var(--text-weight-bold); }
.cm-car-body-left   { padding: 0 0; }
.cm-car-body-right  { padding: 0 0 16px; }
.cm-car-body-heading h1   { font-size: var(--title-font-size); font-weight: var(--title-weight); line-height: 1.2; margin: 0 0 2px; }
.cm-car-body-heading .sub { font-size: var(--primary-font-size); font-weight: var(--text-weight-bold); color: var(--cm-text-muted); margin-bottom: 4px; }

/* Hero image — mobile: 4:3 */
.cm-car-body-hero        { padding: 0; }
.cm-car-hero-img         { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--cm-radius); }
.cm-car-hero-placeholder { background: #f1f5f9; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }

/* ── Car detail — desktop full-bleed grid (≥960px) ───────────── */
/*                                                                  */
/*  [gutter 1fr] [content ≤900px] [sidebar 380px] [gutter 1fr]    */
/*  Gutters grow equally → equal margins at every viewport width.  */
/*  At 1920px: gutters ≈ 320px.  At 4K: ≈ 1200px.                 */
/*                                                                  */
@media (min-width: 960px) {
	#cm-content:has(.cm-car-detail) {
		width: min(calc(100% - 3rem), 1440px);
		margin: 0 auto;
		padding: 0;
	}

	.cm-car-detail {
		max-width: none;
		border-radius: 0;
		margin: 0;
		box-shadow: none;
		min-height: auto;
		overflow: visible;
	}

	.cm-car-nav { display: none; }
	.cm-car-nav-title { display: none; }

	.cm-car-body {
		display: grid;
		background-color: var(--cm-bg);
		grid-template-columns:
			minmax(24px, 1fr)   /* left gutter  */
			minmax(0, 1440px)    /* content      */
			380px               /* sidebar      */
			minmax(24px, 1fr);  /* right gutter */
	}

	/* Hero: spans all 4 cols → true 100vw, 16:9 */
	.cm-car-body-hero        { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cm-radius); padding: 0; }
	.cm-car-hero-img         { aspect-ratio: unset; width: 100%; height: 100%; }
	.cm-car-hero-placeholder { aspect-ratio: unset; width: 100%; height: 100%; }

	/* Sidebar: col 3, spans all rows → sticky overlay */
	.cm-car-body-right {
		grid-column: 3;
		grid-row: 1 / 5;
		position: sticky;
		top: 1.25rem;
		align-self: start;
		z-index: 5;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		margin: var(--cm-header-height) 0 0 1.25rem;
		background: var(--cm-bg);
		border-radius: var(--cm-radius);
		border: 1px solid var(--cm-border);
		padding: 1.25rem 1.25rem 1.75rem;
	}

	/* Legal text: col 2, row 2 — below hero, above content */
	.cm-car-body-legal {
		grid-column: 2;
		grid-row: 2;
		padding: 10px 0 0;
		font-size: 11px;
		color: var(--cm-text-muted);
		line-height: 1.6;
	}

	/* Campaign info: col 2, row 3 */
	.cm-car-campaign-info { grid-column: 2; grid-row: 3; padding: 3rem 0 0; }

	/* Content: col 2, row 4 */
	.cm-car-body-left {
		grid-column: 2;
		grid-row: 4;
		padding: 24px 0 36px;
	}

	.cm-car-body-heading h1   { font-size: 30px; }
	.cm-car-body-heading .sub { font-size: 16px; margin-bottom: 16px; }

	.cm-car-heading-mobile        { display: none; }
	.cm-car-body-heading--desktop { display: block; }
}

/* ── Empty state ──────────────────────────────────────────────── */
.cm-empty { color: var(--cm-text-muted); font-size: 14px; padding: 40px 0; text-align: center; }

/* ── Item card (category + campaign grid) ─────────────────────── */
.cm-item-card {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--cm-radius);
	border: 1px solid var(--cm-border);
	background: var(--cm-bg);
	transition: transform .15s, box-shadow .15s;
}
.cm-item-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* ── Inner price boxes inside car card ────────────────────────── */
.cm-price-box {
	padding: 10px;
	border-radius: var(--cm-radius);
	border: 1px solid var(--cm-border);
	background: var(--cm-bg);
}
.cm-item-card-img {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cm-item-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.cm-item-card-img--43 { aspect-ratio: 4 / 3; }
.cm-item-card-img--11 { aspect-ratio: 1 / 1; }
.cm-item-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cm-item-card-title {
	font-weight: var(--text-weight-bold);
	font-size: var(--title-font-size);
	color: var(--cm-text);
	line-height: 1.3;
}
.cm-item-legal { font-size: 11px; color: var(--cm-text-muted); line-height: 1.5; }



wa-card {
	--spacing: 10px;
	padding: 0 8px;
	background: transparent;
	border-color: var(--cm-text);
}
.cm-car-body-right wa-card {
	--spacing: 10px 8px;
	padding: 0 2px;
}
#cm-modal-overview {
	padding: 0 1.25rem;
	--spacing: 0;
}
#cm-modal-overview::part(base) { background: transparent; }

/* ── Plain back buttons: no hover background, icon primary ───── */
wa-button[appearance="plain"]::part(base) {
	color: var(--cm-text);
}
wa-button[appearance="plain"]::part(base):hover {
	background: transparent;
}
wa-button[appearance="plain"] wa-icon {
	color: var(--cm-primary);
}

/* ── Outlined buttons: use cm-text for border + label ────────── */
wa-button[appearance="outlined"]::part(base) {
	border-color: var(--cm-primary);
	color: var(--cm-primary);
}
wa-button[appearance="outlined"]::part(base):hover {
	background: var(--cm-primary);
	color: var(--cm-bg);
}

/* ── Close buttons: use cm-text for color ───────────────────── */
wa-dialog::part(close-button) {
	--wa-color-on-quiet: var(--cm-text);
	--wa-color-neutral-on-quiet: var(--cm-text);
}

/* ── Offer details accordion: match wa-button height ─────────── */
.cm-offer-details::part(header) {
	min-height: var(--wa-form-control-height-m, 40px);
	box-sizing: border-box;
}

/* ── Detail rows: full-width striped backgrounds ─────────────── */
.cm-detail-rows::part(header)  { color: var(--cm-primary); font-weight: var(--text-weight-bold); }
.cm-detail-rows { --wa-color-text-quiet: var(--cm-text); }
.cm-detail-rows::part(base)    { overflow: hidden; background: var(--cm-bg); }
.cm-detail-rows::part(content) { padding: 0; }

/* ── Tab Group ────────────────────────────────────────────────── */
wa-tab-group {
	--track-color: transparent;
	--indicator-color: var(--cm-primary);
}
wa-tab-group::part(tabs) { border-bottom: none; }
wa-tab { flex: 1; }
wa-tab::part(base) {
	color: var(--cm-text);
	border-bottom: 2px solid var(--cm-border);
	width: 100%;
	justify-content: center;
}
wa-tab[active]::part(base) { border-bottom-color: var(--cm-primary); }
/* ── Equipment HTML content ───────────────────────────────────── */
.cm-equip h2 {
	font-size: var(--primary-font-size);
	font-weight: var(--text-weight-bold);
	margin: 0;
	padding: 1rem 1rem 0.375rem;
	color: var(--cm-text);
}
.cm-equip h2:first-child { padding-top: 10px; }
.cm-equip ul {
	list-style: none;
	/* padding-left: 12px; */
	margin: 0 0 4px;
}
.cm-equip li {
	padding: 8px 24px;
	font-size: var(--primary-font-size);
	color: var(--cm-text);
}
.cm-equip li:nth-child(odd)  { background: var(--cm-bg); }
.cm-equip li:nth-child(even) { background: color-mix(in srgb, var(--cm-bg) 90%, var(--cm-text)); }
.cm-equip li:last-child { border-bottom: none; }
.cm-equip li p { margin: 0; }
.cm-equip p:empty { display: none; }

/* ── Offer / Kauf / Contact dialogs — Desktop ─────────────────── */
#cm-offer-dialog::part(dialog),
#cm-kauf-dialog::part(dialog),
#cm-contact-dialog::part(dialog) {
	background: var(--cm-bg);
}

#cm-contact-dialog input::placeholder,
#cm-contact-dialog textarea::placeholder { color: var(--cm-text-muted); }

#cm-offer-dialog,
#cm-kauf-dialog,
#cm-contact-dialog                        { --width: 680px; }
#cm-offer-dialog::part(header),
#cm-kauf-dialog::part(header),
#cm-contact-dialog::part(header)          { position: relative; justify-content: center; padding: 48px 48px 0; }
#cm-offer-dialog::part(title),
#cm-kauf-dialog::part(title),
#cm-contact-dialog::part(title)           { text-align: center; }
#cm-offer-dialog::part(header-actions),
#cm-kauf-dialog::part(header-actions),
#cm-contact-dialog::part(header-actions)  { position: absolute; right: 36px; top: 32px; }
#cm-offer-dialog::part(body),
#cm-kauf-dialog::part(body),
#cm-contact-dialog::part(body)            { height: 680px; overflow-y: auto; padding: 32px 48px 24px; }

/* ── Offer / Kauf / Contact dialogs — Mobile fullscreen ───────── */
@media (max-width: 680px) {
	#cm-offer-dialog,
	#cm-kauf-dialog,
	#cm-contact-dialog                        { --width: 100%; }
	#cm-offer-dialog::part(dialog),
	#cm-kauf-dialog::part(dialog),
	#cm-contact-dialog::part(dialog)           { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
	#cm-offer-dialog::part(header),
	#cm-kauf-dialog::part(header),
	#cm-contact-dialog::part(header)          { padding: 24px 1.25rem 0; }
	#cm-offer-dialog::part(header-actions),
	#cm-kauf-dialog::part(header-actions),
	#cm-contact-dialog::part(header-actions)  { right: 16px; top: 1.25rem; }
	#cm-offer-dialog::part(body),
	#cm-kauf-dialog::part(body),
	#cm-contact-dialog::part(body)            { height: calc(100dvh - 72px); padding: 1.25rem 1.25rem 1.5rem; }
}

/* ── Contact dialog radios ────────────────────────────────────── */
#cm-contact-dialog wa-radio[appearance="button"] {
	flex: 1;
	justify-content: center;
	background: var(--cm-bg-input);
}

/* ── FAQ Section ──────────────────────────────────────────────── */
.cm-faq       { max-width: 1440px; margin: 0 auto; padding: 32px 24px 40px; }
.cm-faq-title { font-size: var(--title-font-size); font-weight: var(--title-weight); color: var(--cm-text); margin-bottom: 8px; }
.cm-faq-desc  { color: var(--cm-text-muted); font-size: var(--primary-font-size); font-weight: var(--text-weight); line-height: 1.6; margin-bottom: 1.25rem; }
.cm-car-body-left .cm-faq { max-width: none; margin: 0; padding: 3rem 0 8px; }
.cm-faq-box {
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius);
	overflow: hidden;
	background: var(--cm-bg);
}
.cm-faq-item::part(base)         { border-radius: 0; border: none; background-image: linear-gradient(var(--cm-border), var(--cm-border)); background-size: calc(100% - 40px) 1px; background-position: 1.25rem 100%; background-repeat: no-repeat; }
.cm-faq-item:last-child::part(base) { background-image: none; }
.cm-faq-item { --wa-color-text-quiet: var(--cm-text); }
.cm-faq-item::part(header)  { padding: 16px 1.25rem; font-weight: var(--text-weight-bold); font-size: var(--primary-font-size); color: var(--cm-text); min-height: 54px; box-sizing: border-box; }
.cm-faq-item::part(content) { padding: 4px 1.25rem 18px; font-size: var(--primary-font-size); line-height: 1.75; color: var(--cm-text); }

/* ── Marquee for overflowing text ─────────────────────────────── */
.cm-marquee {
	display: inline-block;
	white-space: nowrap;
	animation: cm-marquee 4s ease-in-out 1.5s infinite alternate;
}
@keyframes cm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--marquee-shift, 0px)); }
}
@media (min-width: 960px) {
	.cm-marquee { animation: none; }
}