/* =========================================================================
   DSS Modell-Karte v2 (Kategorie/Landingpage) — „Modell = Produkt", N6
   ========================================================================= */

.dss-modelle {
	--dss-orange: #DD6D0B;
	--dss-ink: #1a1a1a;
	--dss-ink-soft: #55504a;
	--dss-line: #e7ded3;
	--dss-bg-warm: #f6efe6;
	--dss-cols: 3;
	max-width: 1240px;
	margin: 32px auto;
	padding: 0 16px;
	font-family: inherit;
	color: var(--dss-ink);
}

.dss-modelle__titel {
	font-size: 26px; font-weight: 800; text-align: center;
	margin: 0 0 24px;
}

.dss-modelle__grid {
	display: grid;
	grid-template-columns: repeat(var(--dss-cols), minmax(0, 1fr));
	gap: 22px;
}

.dss-modell {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--dss-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(40, 28, 12, .05);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dss-modell:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(40, 28, 12, .14);
	border-color: #d9c8b3;
}
.dss-modell.is-hidden { display: none; }

.dss-modell__imgwrap {
	position: relative;
	display: block; width: 100%; aspect-ratio: 4 / 3;
	/* Feedback 15.07.: weiß statt beige — bei object-fit:contain würde ein beiger Letterbox-Streifen
	   unter dem Bild die Karte „zerteilen"; weiß verschmilzt mit der Karte. */
	background: #fff;
	overflow: hidden;
	text-decoration: none;
}
/* Feedback 15.07.: Modell-Renderbilder (quadratisch, „am Fenster") VOLL zeigen statt oben/unten
   beschneiden → object-fit:contain. */
.dss-modell__img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	transition: transform .4s ease;
}
.dss-modell:hover .dss-modell__img { transform: scale(1.05); }

.dss-modell__badge {
	position: absolute; top: 10px; left: 10px;
	font-size: 12px; font-weight: 800; letter-spacing: .2px;
	color: #fff; background: var(--dss-orange);
	padding: 5px 10px; border-radius: 999px;
	box-shadow: 0 2px 8px rgba(40, 28, 12, .2);
}
.dss-modell__badge--Bestseller { background: #b8570a; }
.dss-modell__badge--Premium    { background: #4a4038; }
.dss-modell__badge--Preis-Tipp { background: #2e7d54; }
.dss-modell__badge--Verdunkelnd { background: #33507a; }
.dss-modell__badge--Hitzeschutz { background: #9a3b2e; } /* FB51: Waben-Badge */

/* Feedback 15.07.: kompaktere Karte (weniger Höhe, passt auf einen Screen). */
.dss-modell__body {
	display: flex; flex-direction: column; gap: 5px;
	padding: 11px 15px 13px;
	flex: 1 1 auto;
}
.dss-modell__name {
	font-size: 16px; font-weight: 700; line-height: 1.2;
	color: var(--dss-ink); text-decoration: none;
}
.dss-modell__name:hover { color: var(--dss-orange); }
.dss-modell__sub {
	font-size: 12.5px; color: var(--dss-ink-soft); line-height: 1.3;
	margin: 0 0 1px;
}

/* Swatch-Reihe */
.dss-modell__swatches {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	margin: 2px 0 2px;
}
.dss-modell__sw {
	display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
	text-decoration: none;
	transition: transform .12s ease;
}
.dss-modell__sw:hover { transform: scale(1.18); }
/* U5 (13.07.): markierter Swatch (Variante B — Klick wählt, Button konfiguriert). */
.dss-modell__sw.is-active { outline: 2px solid var(--ds-amber, #db6d0b); outline-offset: 2px; }
.dss-modell__swdot {
	width: 100%; height: 100%; border-radius: 50%;
	border: 1px solid rgba(40, 28, 12, .18);
	box-shadow: inset 0 0 0 1.5px #fff;
	box-sizing: border-box;
}
.dss-modell__swmore {
	font-size: 12.5px; font-weight: 700; color: var(--dss-ink-soft);
	text-decoration: none; margin-left: 2px; white-space: nowrap;
}
.dss-modell__swmore:hover { color: var(--dss-orange); text-decoration: underline; }

/* Feedback 15.07.: Modell-Merkmale (Häkchenliste) statt Farb-Punkte — Parität zum „Modell wählen"-Popup. */
.dss-modell__usps {
	list-style: none; margin: 1px 0 2px; padding: 0;
	display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto;
}
.dss-modell__usp {
	display: flex; align-items: flex-start; gap: 7px;
	font-size: 12.5px; line-height: 1.25; color: var(--dss-ink);
}
.dss-modell__usp svg { flex: 0 0 auto; margin-top: 1px; color: var(--dss-orange); }

.dss-modell__foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: 4px;
}
.dss-modell__price { font-size: 16px; font-weight: 800; color: var(--dss-ink); white-space: nowrap; }
.dss-modell__cta {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--dss-orange); color: #fff;
	font-size: 13.5px; font-weight: 700; text-decoration: none;
	padding: 9px 14px; border-radius: 9px;
	transition: background .15s ease;
}
.dss-modell__cta:hover { background: #b8570a; color: #fff; }
.dss-modell__cta-ic { width: 15px; height: 15px; }

/* „Mehr Modelle anzeigen" */
.dss-modelle__morewrap { text-align: center; margin-top: 26px; }
.dss-modelle__more {
	appearance: none; cursor: pointer;
	background: #fff; color: var(--dss-ink);
	border: 1.5px solid var(--dss-line); border-radius: 999px;
	font-size: 15px; font-weight: 700; font-family: inherit;
	padding: 12px 28px;
	transition: border-color .15s ease, background .15s ease;
}
.dss-modelle__more:hover { border-color: var(--dss-orange); background: var(--dss-bg-warm); }
.dss-modelle__morecount { opacity: .6; font-weight: 600; }

/* Modell-Weiche (Part D) */
.dss-weiche { max-width: 1240px; margin: 8px auto 0; padding: 0 16px; }
.dss-weiche__intro { text-align: center; max-width: 720px; margin: 8px auto 4px; }
.dss-weiche__h2 { font-size: 28px; font-weight: 800; margin: 0 0 8px; color: #1a1a1a; }
.dss-weiche__sub { font-size: 16px; color: #55504a; line-height: 1.5; margin: 0; }
.dss-weiche .dss-modelle { margin-top: 12px; }
.dss-weiche__ratgeber { max-width: 900px; margin: 40px auto 0; color: #33302c; line-height: 1.65; }

@media (max-width: 900px) {
	.dss-modelle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
	.dss-modelle__grid { grid-template-columns: 1fr; }
	/* Feedback 15.07.: mobil das Modellbild VOLL zeigen (kein 3/4-Hochformat-Crop) → quadratisch + contain. */
	.dss-modell { flex-direction: row; }
	.dss-modell__imgwrap { width: 42%; aspect-ratio: 1 / 1; flex: 0 0 42%; align-self: flex-start; }
	.dss-modell__body { width: 58%; min-width: 0; flex: 1 1 auto; }
	.dss-modell__name { font-size: 16px; }
	.dss-modell__swatches { gap: 5px; }
	.dss-modell__sw { width: 19px; height: 19px; }
	/* Foot stapeln → CTA läuft nicht über den Kartenrand (kein Horizontal-Scroll). */
	.dss-modell__foot { flex-direction: column; align-items: stretch; gap: 8px; }
	.dss-modell__cta { justify-content: center; font-size: 13px; padding: 10px 12px; }
	.dss-modell__price { font-size: 15px; }
}