/*
 * Kostenrechner Thailand – Kosten-Teaser (Shortcode [hhs_kosten_teaser]).
 *
 * Nachbau der Tabelle „Nachgerechnet" auf der dunklen Jade-Sektion der Startseite.
 * Die Sektion (Hintergrund, Textfarbe) kommt aus dem Seitenbaukasten; der Teaser setzt
 * keinen eigenen Sektionshintergrund. Nur Designsystem-Variablen; die Werte hinter dem
 * Komma sind dieselben Tokens und springen nur ein, falls die Variablen fehlen.
 */

.hhs_teaser {
	--hhs-t-overlay: var(--light-5, #FFFFEB0D);
	--hhs-t-kopf: var(--light-70, #FFFFEBB3);
	--hhs-t-linie: var(--light-15, #FFFFEB26);
	--hhs-t-linie-leise: var(--light-10, #FFFFEB1A);
	--hhs-t-linie-summe: var(--light-30, #FFFFEB4D);
	--hhs-t-vergleich: var(--light-50, #FFFFEB80);
	--hhs-t-gedaempft: var(--text-on-dark-muted, #FFFFEBB3);
	--hhs-t-serif: var(--font-display, "EB Garamond", Georgia, "Times New Roman", serif);
	--hhs-t-sans: var(--font-body, "Figtree", -apple-system, "Segoe UI", Arial, sans-serif);

	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	font-family: var(--hhs-t-sans);
	text-align: left;
}

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

.hhs_teaser__rahmen {
	max-width: 100%;
	padding: var(--space-8, 2rem);
	overflow: hidden;
	border-radius: var(--radius-media, 48px);
	background: var(--hhs-t-overlay);
}

.hhs_teaser__zeile {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-4, 1rem);
	align-items: baseline;
	padding: var(--space-4, 1rem) 0;
	border-bottom: 1px solid var(--hhs-t-linie-leise);
}

.hhs_teaser__zelle {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
	/* Silbentrennung zuerst („DEUTSCH-LAND"), Umbruch an beliebiger Stelle nur als letzter Ausweg. */
	-webkit-hyphens: auto;
	hyphens: auto;
}

.hhs_teaser__zeile--kopf {
	position: relative;
	padding-top: 0;
	padding-bottom: var(--space-4, 1rem);
	border-bottom: 1px solid var(--hhs-t-linie);
	color: var(--hhs-t-kopf);
	font-family: var(--hhs-t-sans);
	font-size: var(--body-sm, .875rem);
	font-weight: var(--fw-body, 500);
	letter-spacing: var(--ls-eyebrow, .08em);
	text-transform: uppercase;
}

.hhs_teaser__zeile:not(.hhs_teaser__zeile--kopf) .hhs_teaser__zelle--position {
	font-family: var(--hhs-t-sans);
	font-size: var(--body, 1rem);
	font-weight: var(--fw-body, 500);
}

.hhs_teaser__wert {
	display: block;
	font-family: var(--hhs-t-serif);
	font-size: var(--h4, 2rem);
	font-weight: var(--fw-regular, 400);
	line-height: 1;
}

.hhs_teaser__wert--vergleich {
	color: var(--hhs-t-vergleich);
}

.hhs_teaser__neben {
	display: block;
	margin-top: var(--space-1, .25rem);
	color: var(--hhs-t-gedaempft);
	font-family: var(--hhs-t-sans);
	font-size: var(--body-sm, .875rem);
	font-weight: var(--fw-body, 500);
}

/* „entfällt": diese Seite hat den Posten nicht (zählt 0). */
.hhs_teaser__entfaellt {
	display: block;
	color: var(--hhs-t-gedaempft);
	font-family: var(--hhs-t-sans);
	font-size: var(--body-sm, .875rem);
}

/* Infozeile unter der Position, z. B. „1-Bedroom Condo". */
.hhs_teaser__info {
	display: block;
	margin-top: var(--space-1, .25rem);
	color: var(--hhs-t-gedaempft);
	font-size: var(--body-sm, .875rem);
}

.hhs_teaser__zeile--summe {
	/* Liegt über der Unterlinie der letzten Position, damit nur eine Linie zu sehen ist. */
	position: relative;
	margin-top: calc(-1 * var(--border-width, 1px));
	border-top: var(--border-width, 1px) solid var(--hhs-t-linie-summe);
	border-bottom: 0;
}

/* Spezifischer als die Positionsregel oben. */
.hhs_teaser__zeile.hhs_teaser__zeile--summe .hhs_teaser__zelle--position {
	font-weight: var(--fw-strong, 600);
}

.hhs_teaser__zeile:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.hhs_teaser__hinweis {
	margin: 0;
	padding-top: var(--space-4, 1rem);
	color: var(--hhs-t-gedaempft);
	font-size: var(--body-sm, .875rem);
}

@media (max-width: 1024px) {
	.hhs_teaser__wert {
		font-size: var(--h5, 1.5rem);
	}
}

/* Mobil: Position über die volle Breite, Zahlen darunter nebeneinander. */
@media (max-width: 767px) {
	.hhs_teaser__rahmen {
		padding: var(--space-4, 1rem);
		border-radius: var(--radius-panel, 32px);
	}

	.hhs_teaser__zeile {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hhs_teaser__zelle--position {
		grid-column: 1 / -1;
	}

	/* Kopf „Position" nur für Screenreader – die Spalte gibt es mobil nicht. */
	.hhs_teaser__zeile--kopf .hhs_teaser__zelle--position {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}