/*
 * Startseite – gestalterische Verfeinerungen über der generierten Referenz (home-reference.css).
 * Lädt ausschließlich auf der offiziellen Home, nach Shell und WordPress-Adaptern.
 * Die Referenzkomposition bleibt unverändert; hier stehen nur Lesbarkeit, Rhythmus und Mobil-Ökonomie.
 */

/* Gleiche Kontrast-Tokens wie design-tokens.css (die Studie definiert sie in home-reference.css erneut). */
:root {
	--blue-dark: #0072ad;
	--muted: #637079;
}

/* Signal-Orange „Fastmover“ mit lesbarer weißer Schrift; Untertitel der Baureihen-Tabs kontraststärker. */
.sb-card__badge { background: #c24a00; }
.hero__series-nav .stage__tab small { color: #5d6b75; }
.purpose-card--blue p { color: rgba(6,26,45,.86); }
.pp-card__num { border-radius: 0; }

/* Überschriften erben die Flächenfarbe wie in der Referenz (hapert.css färbt h1–h4 global dunkel).
   :where() hält die Spezifität auf Elementniveau, damit Referenzregeln mit Klassen weiter gewinnen. */
:where(body.reference-home main, body.reference-home .gb-assistant) :is(h1, h2, h3, h4) { color: inherit; }

.section-head h2,
.study-head h2 { text-wrap: balance; }

/* 01 Einstieg: Bildkachel mit Innenabstand, lesbarem Label und Verlauf statt flacher Abdunklung. */
.purpose-card--image { padding: 30px 32px 32px; }
.purpose-card--image::after {
	background: linear-gradient(180deg, rgba(6,26,45,.52) 0%, rgba(6,26,45,.06) 30%, rgba(6,26,45,.14) 55%, rgba(6,26,45,.8) 100%);
}
.purpose-card--image .purpose-card__index { z-index: 2; top: 26px; left: 32px; color: #fff; }
.purpose-card--image h3 { max-width: 14ch; line-height: 1; }
.purpose-card__photo { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.purpose-card--image:hover .purpose-card__photo,
.purpose-card--image:focus-visible .purpose-card__photo { transform: scale(1.035); }

/* 05 Händler: Liste der Premium-Partner im Leerzustand (siehe Generator, idleListMax). */
.dealer-results.is-idle .dealer-result__num { color: var(--blue-dark); }
.dealer-results.is-idle .dealer-result__distance { display: none; }

/* Lesbarkeitsuntergrenze ab Tablet: Mikrotypografie 7–9 px der Studie auf 10–13 px anheben,
   Headlines und Proportionen bleiben unverändert. */
@media (min-width: 769px) {
	.sb-card__badge, .sb-card__type, .sb-card__specs span, .project-card__chip, .knowledge-card__topic,
	.trust-media__copy span, .pp-utils > span, .dealer-result__type, .black-stage__caption,
	.black-stage__facts span, .black-stage__counter, .black-stage__eyebrow, .qc__stage-meta span,
	.dealer-map__count, .dealer-popup__type, .dealer-popup__contact span { font-size: 10px; }
	.pp-card__num { font-size: 10px; }
	.sb-card__variant, .sb-card__price small, .qc__axis small { font-size: 11px; }
	.sb-card__why { min-height: 64px; font-size: 12px; line-height: 1.5; }
	.sb-card__specs strong { font-size: 12px; }
	.sb-card__actions a { font-size: 10px; }
	.sb-card__detail { font-size: 11px; }
	.pp-card p { font-size: 13px; }
	.pp-card ul { font-size: 12px; }
	.pp-utils a { font-size: 11px; }
	.trust-fact p { font-size: 12px; }
	.trust-media__copy p { font-size: 13px; }
	.trust-media__copy a { font-size: 12px; }
	.trust-video__label { font-size: 11px; }
	.trust-test span { padding: 8px; font-size: 10px; }
	.project-card p { font-size: 12px; }
	.knowledge-card p { font-size: 12px; }
	.knowledge-card__foot { font-size: 11px; }
	.toolbox > p { font-size: 12px; }
	.tool-link strong { font-size: 13px; }
	.tool-link small { font-size: 11px; }
	.study-head__link { font-size: 12px; }
	.dealer-locator__status, .dealer-locator__geo { font-size: 12px; }
	.dealer-result__copy small, .dealer-locator__footer { font-size: 11px; }
	.qc__note, .qc__series small, .qc__stage-meta small { font-size: 11px; }
	.black-stage__note { font-size: 11px; }
	.black-tab b { font-size: 10px; }
	.hero__series-nav .stage__tab small { font-size: 11px; }
}

/* Breite Headline-Spalte, damit zweizeilige Claims nicht in drei Zeilen brechen. */
@media (min-width: 1025px) {
	.section-head,
	.study-head { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); }
}

@media (max-width: 599px) {
	/* 01 Einstieg: kleine Kacheln zweispaltig – halbiert die Strecke, Bildkachel bleibt Aufmacher. */
	.purpose-grid { grid-template-columns: 1fr 1fr; }
	.purpose-card--image { grid-column: 1 / -1; min-height: 300px; padding: 22px 20px; }
	.purpose-card--image .purpose-card__index { top: 20px; left: 20px; }
	.purpose-card:not(.purpose-card--image) { min-height: 176px; padding: 18px 16px 20px; }
	.purpose-card:not(.purpose-card--image) .purpose-card__index { top: 16px; left: 16px; }
	.purpose-card:not(.purpose-card--image) .purpose-card__icon { top: 13px; right: 15px; font-size: 25px; }
	.purpose-card:not(.purpose-card--image) h3 { font-size: 20px; }
	.purpose-card:not(.purpose-card--image) p { margin-top: 6px; font-size: 12px; line-height: 1.4; }

	/* 03 Bestseller und 08 Projekte als native Wischreihe mit angeschnittener Folgekarte. */
	.sb-grid,
	.project-grid {
		display: flex;
		gap: 12px;
		margin-inline: calc(var(--gutter) * -1);
		padding: 2px var(--gutter) 8px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sb-grid::-webkit-scrollbar,
	.project-grid::-webkit-scrollbar { display: none; }
	.sb-card,
	.project-card { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
	.sb-card__media { height: 220px; }
	.project-card__media { height: 220px; }
	.projects-section .study-head__link { text-align: left !important; }
}

@media (max-width: 480px) {
	.hero .kicker { gap: 10px; letter-spacing: .1em; }
	.hero .kicker::before { width: 26px; }

	/* 06 Argumente: Kennzahlen als 2 × 2 statt vier voller Zeilen. */
	.trust-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
	.trust-fact { padding: 16px 14px; }
	.trust-fact strong { font-size: 23px; }

	.pp-utils { grid-template-columns: 1fr 1fr; }
	.pp-utils a:last-child:nth-child(even) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.purpose-card--image:hover .purpose-card__photo,
	.purpose-card--image:focus-visible .purpose-card__photo { transform: none; }
}