.tsads-house {
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px;
	text-align: left;
	font-family: var(--sd-font);
	color: var(--sd-text);
	background: var(--sd-house-bg, var(--sd-surface-2));
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-shadow-sm);
}

/* ── Grafik ───────────────────────────────────────────────────────────────
   Die SVGs sind strichbasiert und erben `currentColor` — deshalb steht hier
   nur eine Farbe für den ganzen Block, nicht eine je Motiv. */
.tsads-house__art {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sd-muted);
}

.tsads-house__art svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Text ─────────────────────────────────────────────────────────────────── */
.tsads-house__text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.tsads-house__kicker {
	margin: 0 0 2px;
	font-size: var(--sd-fs-xs);
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sd-gold-dark);
}

.tsads-house__headline {
	margin: 0 0 4px;
	font-family: var(--sd-font-brand);
	font-size: var(--sd-fs-sm);
	line-height: 1.25;
	font-weight: 700;
	color: var(--sd-text);
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.tsads-house__body {
	margin: 0;
	font-size: var(--sd-fs-xs);
	line-height: 1.4;
	color: var(--sd-muted);
	hyphens: auto;
	-webkit-hyphens: auto;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tsads-house__from {
	margin: 0;
	font-size: var(--sd-fs-xs);
	line-height: 1.2;
	text-align: center;
	color: var(--sd-muted);
	opacity: .8;
}

/* Der CTA IST die geteilte Primitive (.sd-btn--primary --sm --block) — hier steht
   deshalb nur der Abstand, keine einzige Aussage über Farbe, Radius oder Gewicht. */
.tsads-house__cta {
	margin: 0;
}

.tsads-house--sq .tsads-house__art {
	flex: 1 1 auto;
	min-height: 22%;
	max-height: 46%;
}

.tsads-house--sq .tsads-house__text {
	flex: 0 0 auto;
}

/* ── Familie `tall` — 160×600 ─────────────────────────────────────────────
   Vertikal großzügig: die Grafik darf groß stehen, der Text hat Luft. */
.tsads-house--tall {
	gap: 10px;
	padding: 12px 10px;
	justify-content: center;
}

.tsads-house--tall .tsads-house__art {
	flex: 0 0 auto;
	height: auto;
	margin-bottom: 4px;
}

.tsads-house--tall .tsads-house__text {
	flex: 0 1 auto;
}

.tsads-house--tall .tsads-house__headline {
	font-size: var(--sd-fs-base);
}

/* Hier ist Höhe im Überfluss — der Satz darf ausschreiben. */
.tsads-house--tall .tsads-house__body {
	-webkit-line-clamp: 6;
}

.tsads-house--mini {
	gap: 4px;
	padding: 8px;
}

.tsads-house--mini .tsads-house__art {
	flex: 1 1 auto;
	min-height: 20%;
	max-height: 42%;
}

.tsads-house--mini .tsads-house__text {
	flex: 0 0 auto;
}

/* Auf 160×200 bleibt für den Kicker genau EINE Zeile und für die Überschrift zwei.
   Ohne diese Grenzen schob ein zweizeiliger Kicker („Schritt für Schritt") die
   Überschrift unter die Kartenkante, wo sie waagerecht abgeschnitten wurde. */
.tsads-house--mini .tsads-house__kicker {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsads-house--mini .tsads-house__headline {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tsads-house--strip {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 6px 10px;
	text-align: left;
}

.tsads-house--strip .tsads-house__art {
	flex: 0 0 auto;
	width: 13%;
	max-width: 76px;
	align-self: stretch;
}

.tsads-house--strip .tsads-house__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}

.tsads-house--strip .tsads-house__headline {
	margin: 0;
	font-size: var(--sd-fs-sm);
}

/* Eine Zeile mit Auslassungspunkten — und dafür MUSS `display` zurück auf `block`:
   `text-overflow` wirkt nur in einem Block-Container, und der geerbte `-webkit-box`
   ist keiner. Ohne das schnitte der Streifen mitten im Buchstaben ab, also genau der
   Fehler, den die Zeilengrenze weiter oben beseitigt hat. */
.tsads-house--strip .tsads-house__body {
	margin: 0;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsads-house--strip .tsads-house__cta {
	flex: 0 0 auto;
}