/* =========================================================================
   Landing Modell — Produktblock, Bild links oder rechts
   Abhängigkeit: shared/base.css (Tokens, .wd-eyebrow, .wd-btn)

   Ein Stylesheet für beide Elemente: [landing_model_left] und
   [landing_model_right] unterscheiden sich nur im Modifier --media-left
   bzw. --media-right.

   Bewusst ohne Typ-Selektoren wie ".wd-model__media img": jedes Element hat
   eine eigene Klasse, sonst schlägt ein Typ-Selektor (0,1,1) eine Klasse
   (0,1,0) und überschreibt still deren Werte.
   ====================================================================== */

.wd-model {
	position: relative;
	overflow: hidden;
	padding-block: clamp(64px, 8.5vw, 120px);
	font-family: var(--wd-font-body);
}

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

.wd-model__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4.6vw, 80px);
	align-items: center;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wd-gut);
}

/* ---- Bildseite -------------------------------------------------------- */

.wd-model__media {
	position: relative;
}

.wd-model--media-right .wd-model__media {
	order: 2;
}

.wd-model__stack {
	display: grid;
	gap: clamp(10px, 1.4vw, 16px);
}

.wd-model__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(10px, 1.4vw, 16px);
}

.wd-model__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ---- Textseite -------------------------------------------------------- */

.wd-model__mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.wd-model__mark line,
.wd-model__mark circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}

.wd-model__title {
	margin: 0 0 .55rem;
	font-family: var(--wd-font-display);
	font-weight: 800;
	font-size: clamp(1.95rem, 4.2vw, 3.35rem);
	line-height: .98;
	letter-spacing: -.045em;
	text-transform: uppercase;
}

.wd-model__sub {
	margin: 0 0 1.35rem;
	max-width: 34ch;
	font-size: clamp(1.06rem, 1.5vw, 1.3rem);
	line-height: 1.4;
}

.wd-model__body {
	margin: 0 0 1.9rem;
	max-width: 52ch;
	line-height: 1.62;
}

/* ---- Technische Daten ------------------------------------------------- */

.wd-specs {
	margin: 0 0 2.1rem;
	padding: 0;
	max-width: 52ch;
	list-style: none;
	border-top: 1px solid currentColor;
}

.wd-specs__row {
	display: grid;
	grid-template-columns: clamp(88px, 8.5vw, 104px) 1fr;
	gap: .9em;
	align-items: baseline;
	padding: .78rem 0;
	border-bottom: 1px solid currentColor;
	font-size: .94rem;
	line-height: 1.45;
}

.wd-specs__key {
	padding-top: .2em;
	font-family: var(--wd-font-data);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	opacity: .55;
}

/* ---- Preis und Buttons ------------------------------------------------ */

.wd-model__buy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.15rem;
	margin: 0;
}

/* Beide Buttons in einer Reihe unter dem Preis. */
.wd-model__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
}

.wd-model__price {
	font-family: var(--wd-font-display);
	font-weight: 700;
	font-size: 1.58rem;
	line-height: 1.05;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}

.wd-model__price-note {
	display: block;
	margin-top: .5em;
	font-family: var(--wd-font-data);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	opacity: .55;
}

/* ---- Ringmuster als Hintergrund-Signatur ------------------------------ */

.wd-model__pattern {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: min(112vw, 1080px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: .2;
}

.wd-model--media-right .wd-model__pattern {
	right: -26%;
}

.wd-model--media-left .wd-model__pattern {
	left: -26%;
}

/* ---- Farbschema hell: Koralle ---------------------------------------- */

.wd-model--light {
	background: var(--wd-coral-50);
	color: var(--wd-ink);
}

.wd-model--light .wd-eyebrow {
	color: var(--wd-terra);
}

.wd-model--light .wd-specs {
	border-color: rgba(35, 31, 30, .18);
}

.wd-model--light .wd-specs__row {
	border-color: rgba(35, 31, 30, .13);
}

.wd-model--light .wd-model__pattern {
	color: var(--wd-coral-deep);
}

/* ---- Farbschema dunkel: Waldgrün ------------------------------------- */

.wd-model--dark {
	background: var(--wd-forest-900);
	color: var(--wd-paper);
}

.wd-model--dark .wd-eyebrow {
	color: var(--wd-sage);
}

.wd-model--dark .wd-model__sub {
	color: var(--wd-sage);
}

.wd-model--dark .wd-model__body {
	color: rgba(246, 243, 239, .72);
}

.wd-model--dark .wd-specs {
	border-color: rgba(246, 243, 239, .22);
}

.wd-model--dark .wd-specs__row {
	border-color: rgba(246, 243, 239, .15);
}

.wd-model--dark .wd-model__pattern {
	color: var(--wd-sage-deep);
}

/* Auf dunklem Grund muss der Umriss-Button hell sein. */
.wd-model--dark .wd-btn.wd-btn--ghost {
	border-color: rgba(246, 243, 239, .5);
	color: var(--wd-paper);
}

.wd-model--dark .wd-btn.wd-btn--ghost:hover,
.wd-model--dark .wd-btn.wd-btn--ghost:focus {
	background: var(--wd-paper);
	border-color: var(--wd-paper);
	color: var(--wd-ink);
}

/* Der Volltonbutton folgt dem Schema: Tinte auf hell, Papier auf dunkel.
   Eigener Modifier, damit die Regel den Umriss-Button nicht mitgreift. */
.wd-model--dark .wd-btn.wd-btn--solid {
	background: var(--wd-paper);
	border-color: var(--wd-paper);
	color: var(--wd-ink);
}

.wd-model--dark .wd-btn.wd-btn--solid:hover,
.wd-model--dark .wd-btn.wd-btn--solid:focus {
	color: var(--wd-ink);
}

/* ---- Schriftfarben explizit setzen ------------------------------------
   Geerbte Farbe hat keine Spezifität und verliert gegen jede Theme-Regel wie
   "h2 { color: … }" oder ".entry-content h2 { … }". Darum setzt hier jedes
   Textelement seine Farbe selbst — auf Sektionsebene (0,2,0), damit auch
   ".entry-content h2" (0,1,1) nicht gewinnt.
   ---------------------------------------------------------------------- */

.wd-model--light .wd-model__title,
.wd-model--light .wd-model__sub,
.wd-model--light .wd-model__body,
.wd-model--light .wd-specs__row,
.wd-model--light .wd-specs__key,
.wd-model--light .wd-specs__val,
.wd-model--light .wd-model__price,
.wd-model--light .wd-model__price-note {
	color: var(--wd-ink);
}

.wd-model--dark .wd-model__title,
.wd-model--dark .wd-specs__row,
.wd-model--dark .wd-specs__key,
.wd-model--dark .wd-specs__val,
.wd-model--dark .wd-model__price,
.wd-model--dark .wd-model__price-note {
	color: var(--wd-paper);
}

/* ---- Umbruch ---------------------------------------------------------- */

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

	.wd-model--media-right .wd-model__media {
		order: 0;
	}

	.wd-model__pattern {
		display: none;
	}
}