/*
 * Synapsenbrenner - Modul teaserkarte: neue Erlebnis-Karte mit Rueckseite (TK1, 10.10.2026).
 * Vorlage: synapsenbrenner-erlebnis-teaser-entwurf.html, Grundform B mit Feinschliff 1 und 2; Feinschliff 3
 * (Daniel, 10.10.2026): hinten Balken statt Netz.
 * Einzige Stelle fuer das Aussehen der neuen Karte. Die alten Kartenregeln (sbErlebnisKarteInner,
 * sbKarte* in den CPT-Stylesheets) greifen hier nicht, weil die neue Karte deren Klassen nicht traegt;
 * genutzt werden nur die Aussenhuellen sbErlebnisKarte / sbErlebnisKarteSlide (Raster und Slick).
 * Abhaengig von: Token aus southvision-child/bloecke/basis.css (immer mit Ersatzwert), sb-basis-nur-sr,
 * dem Herz der Merkliste (.sb-merk-herz, Modul merkliste). Werte in px, weil das Theme 1rem = 10px setzt.
 * Schrift Caveat 600 (OFL) liegt lokal im Modul, wie die Theme-Schriften; keine Verbindung zu Google.
 * Rueckbau: Option sb_modul_teaserkarte_aktiv loeschen, dann laedt diese Datei nicht mehr.
 */

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('caveat-v23-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Huelle und Drehen ---------- */

.sb-teaserkarte {
	--sb-teaserkarte-hand: 'Caveat', 'Segoe Print', cursive;
	position: relative;
	height: 100%;
	perspective: 1400px;
	cursor: pointer;
	text-align: left;
	color: var(--sb-text, #111827);
	font-family: var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	font-size: 15px;
	line-height: 1.45;
}
.sb-teaserkarte-innen {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.sb-teaserkarte--gedreht .sb-teaserkarte-innen {
	transform: rotateY(180deg);
}
.sb-teaserkarte-vorn,
.sb-teaserkarte-hinten {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Die abgewandte Seite nimmt keine Klicks an (zusaetzlich zu inert aus dem Skript). */
.sb-teaserkarte--gedreht .sb-teaserkarte-vorn,
.sb-teaserkarte:not(.sb-teaserkarte--gedreht) .sb-teaserkarte-hinten {
	pointer-events: none;
}

/* Raster und Wischleiste: die Karte fuellt die Huelle (gleiche Hoehe je Reihe am Rechner) */
.sbErlebnisKarte > .sb-teaserkarte {
	flex: 1 1 auto;
}
.sbErlebnisListeGrid .sbErlebnisKarte > .sb-teaserkarte {
	height: auto;
}
.sbErlebnisSlider .slick-slide > div:has(.sb-teaserkarte),
.sbErlebnisSlider .sbErlebnisKarteSlide:has(> .sb-teaserkarte) {
	height: 100%;
}
.sbErlebnisSlider .sbErlebnisKarteSlide:has(> .sb-teaserkarte) {
	display: flex !important; /* Slick setzt display:inline-block als Inline-Stil auf die Zeile */
	flex-direction: column;
}
/* Am Handy nicht auf gleiche Hoehe strecken (TEASER-KARTE.md Abschnitt 4) */
@media (max-width: 767px) {
	.sbErlebnisSlider:has(.sb-teaserkarte) .slick-track {
		align-items: flex-start;
	}
	.sbErlebnisSlider .slick-slide > div:has(.sb-teaserkarte),
	.sbErlebnisSlider .sbErlebnisKarteSlide:has(> .sb-teaserkarte),
	.sbErlebnisSlider .sbErlebnisKarteSlide > .sb-teaserkarte {
		height: auto;
	}
}

/* ---------- Vorderseite ---------- */

.sb-teaserkarte-vorn {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: var(--sb-radius-s, 12px);
	overflow: hidden;
	transition: box-shadow 0.25s ease;
}
.sb-teaserkarte:hover .sb-teaserkarte-vorn {
	box-shadow: 0 14px 34px rgba(2, 28, 30, 0.13);
}

.sb-teaserkarte-icon {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sb-teaserkarte-bild {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sb-grau-100, #f2f0eb);
}
.sb-teaserkarte-bild .sb-teaserkarte-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.6s ease;
}
@media (hover: hover) {
	.sb-teaserkarte:hover .sb-teaserkarte-img {
		transform: scale(1.03);
	}
}
.sb-teaserkarte-bild::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(to top, rgba(2, 28, 30, 0.62), rgba(2, 28, 30, 0));
	pointer-events: none;
}
.sb-teaserkarte-land {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 6px;
	align-items: center;
	max-width: calc(100% - 184px);
	color: var(--sb-weiss, #ffffff);
	font: 700 13px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
}
.sb-teaserkarte-land > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.sb-teaserkarte-land .sb-teaserkarte-icon {
	width: 16px;
	height: 16px;
}

/* Knoepfe zum Drehen: "Passt das zu mir?" im Bild, "zurueckdrehen" hinten oben rechts */
.sb-teaserkarte .sb-teaserkarte-drehen {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	cursor: pointer;
	font: 700 12.5px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	text-transform: none;
	letter-spacing: 0;
	min-height: 0;
	box-shadow: none;
}
.sb-teaserkarte .sb-teaserkarte-hinweis {
	position: absolute;
	right: 10px;
	bottom: 9px;
	z-index: 3;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--sb-petrol-900, #021c1e);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background 0.2s;
}
.sb-teaserkarte .sb-teaserkarte-hinweis .sb-teaserkarte-icon {
	width: 15px;
	height: 15px;
}
.sb-teaserkarte:hover .sb-teaserkarte-hinweis {
	background: var(--sb-gelb, #e5de00);
}

.sb-teaserkarte-anzeige {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 2px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--sb-text-2, #4b5563);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/* Herz der Merkliste oben rechts; 10 px Schutzzone rundum, ein Tippen dort dreht nie (Feinschliff 2) */
.sb-teaserkarte-vorn > .sb-merk-herz {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}
.sb-teaserkarte-vorn > .sb-merk-herz::before,
.sb-teaserkarte .sb-teaserkarte-zurueck::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
}

.sb-teaserkarte-text {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1 1 auto;
	padding: 12px 14px 14px;
}
.sb-teaserkarte-text > .sbKarteStatusBadge {
	margin: 0;
}
/* Kartentitel: seit TK1b die Klasse sb-basis-kartentitel aus southvision-child/bloecke/basis.css (N277). */
.sb-teaserkarte .sb-teaserkarte-satz {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	color: var(--sb-petrol-700, #004445);
	font: 600 21px/1.08 var(--sb-teaserkarte-hand);
}
.sb-teaserkarte-satz .sb-teaserkarte-icon {
	margin-top: 2px;
	color: var(--sb-orange, #dd9933);
}
.sb-teaserkarte .sb-teaserkarte-ehernicht {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	margin: 0;
	color: var(--sb-text-2, #4b5563);
	font-size: 13px;
	line-height: 1.3;
}
.sb-teaserkarte-ehernicht > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.sb-teaserkarte-ehernicht .sb-teaserkarte-icon {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: #d9785a;
}
.sb-teaserkarte-ehernicht b {
	font-weight: 600;
	color: var(--sb-petrol-900, #021c1e);
}
.sb-teaserkarte-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	color: var(--sb-text-2, #4b5563);
	font-size: 13.5px;
	line-height: 1.4;
}
.sb-teaserkarte-fakten > span {
	display: inline-flex;
	gap: 5px;
	align-items: center;
}
.sb-teaserkarte-fakten .sb-teaserkarte-icon {
	width: 16px;
	height: 16px;
	color: var(--sb-petrol-700, #004445);
}
.sb-teaserkarte-stufe {
	display: inline-flex;
	gap: 2px;
	margin-left: 2px;
}
.sb-teaserkarte-stufe i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sb-grau-200, #e5e7eb);
}
.sb-teaserkarte-stufe i.sb-teaserkarte-an {
	background: var(--sb-orange, #dd9933);
}

/* Fuss: Preis links, "Zum Erlebnis" rechts; vorn und hinten gleich gebaut */
.sb-teaserkarte-fuss {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
	border-top: 1px dashed var(--sb-grau-200, #e5e7eb);
}
.sb-teaserkarte-preis {
	padding-top: 8px;
	line-height: 1.2;
	min-width: 0;
}
.sb-teaserkarte-preis b {
	display: block;
	color: var(--sb-petrol-900, #021c1e);
	font: 700 20px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	white-space: nowrap;
}
.sb-teaserkarte-preis small {
	display: block;
	color: var(--sb-text-2, #4b5563);
	font-size: 12.5px;
	line-height: 1.25;
}
:is(.sb-teaserkarte, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum {
	position: relative;
	z-index: 4;
	display: inline-flex;
	flex: none;
	gap: 8px;
	align-items: center;
	padding: 10px 14px 10px 16px;
	border-radius: 999px;
	background: var(--sb-petrol-900, #021c1e);
	color: var(--sb-weiss, #ffffff);
	font: 700 14px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s;
}
:is(.sb-teaserkarte, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum:hover {
	background: var(--sb-petrol-700, #004445);
	color: var(--sb-weiss, #ffffff);
}
.sb-teaserkarte-zum .sb-teaserkarte-icon {
	width: 16px;
	height: 16px;
}
@media (max-width: 480px) {
	:is(.sb-teaserkarte, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum {
		gap: 6px;
		padding: 9px 11px 9px 13px;
		font-size: 13px;
	}
	.sb-teaserkarte-preis b {
		font-size: 18px;
	}
}

/* ---------- Rueckseite ---------- */

.sb-teaserkarte-hinten {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--sb-petrol-900, #021c1e); /* wie vorn, damit "Zum Erlebnis" auf den Pixel gleich steht */
	border-radius: var(--sb-radius-s, 12px);
	background: var(--sb-petrol-900, #021c1e);
	color: #dbe9e4;
	overflow: hidden;
	transform: rotateY(180deg);
}
.sb-teaserkarte .sb-teaserkarte-zurueck {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--sb-weiss, #ffffff);
}
.sb-teaserkarte .sb-teaserkarte-zurueck:hover {
	background: rgba(255, 255, 255, 0.18);
}
.sb-teaserkarte-hinten-inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 10px;
	min-height: 0;
	padding-top: 30px;
	overflow: auto;
	scrollbar-width: thin;
}
@media (max-width: 480px) {
	.sb-teaserkarte-hinten-inhalt {
		gap: 8px;
		padding-top: 38px;
	}
}
.sb-teaserkarte .sb-teaserkarte-kicker {
	margin: 0;
	color: var(--sb-mint, #77c49b);
	font: 700 12px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sb-teaserkarte .sb-teaserkarte-dims,
.sb-teaserkarte .sb-teaserkarte-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-teaserkarte .sb-teaserkarte-dims li,
.sb-teaserkarte .sb-teaserkarte-liste li {
	margin: 0;
	padding: 0;
	background: none;
}
.sb-teaserkarte .sb-teaserkarte-dims li::before,
.sb-teaserkarte .sb-teaserkarte-liste li::before {
	content: none;
}
/* Fingerabdruck als Balken (Feinschliff 3, Daniel 10.10.2026): zwei Spalten, je Dimension Name ueber
   fuenf Stufen; ab 4 gelb und fett. Werte fuer Screenreader stehen als Text im Namen. */
.sb-teaserkarte .sb-teaserkarte-dims {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 14px;
}
.sb-teaserkarte .sb-teaserkarte-dims li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.sb-teaserkarte-dim-name {
	overflow: hidden;
	color: #cfe3dc;
	font-size: 12.5px;
	line-height: 1.15;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sb-teaserkarte-dims li.sb-teaserkarte-stark .sb-teaserkarte-dim-name {
	color: var(--sb-gelb, #e5de00);
	font-weight: 700;
}
.sb-teaserkarte-balken-zeile {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2px;
}
.sb-teaserkarte-balken-zeile i {
	display: block;
	height: 6px;
	background: rgba(255, 255, 255, 0.14);
}
.sb-teaserkarte-balken-zeile i:first-child {
	border-radius: 3px 0 0 3px;
}
.sb-teaserkarte-balken-zeile i:last-child {
	border-radius: 0 3px 3px 0;
}
.sb-teaserkarte-balken-zeile i.sb-teaserkarte-an {
	background: var(--sb-mint, #77c49b);
}
.sb-teaserkarte-dims li.sb-teaserkarte-stark i.sb-teaserkarte-an {
	background: var(--sb-gelb, #e5de00);
}
.sb-teaserkarte .sb-teaserkarte-liste li {
	display: flex;
	gap: 6px;
	font-size: 13.5px;
	line-height: 1.35;
}
.sb-teaserkarte .sb-teaserkarte-liste li > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.sb-teaserkarte-liste .sb-teaserkarte-icon {
	width: 15px;
	height: 15px;
	margin-top: 2px;
}
.sb-teaserkarte-liste--ja .sb-teaserkarte-icon {
	color: var(--sb-mint, #77c49b);
}
.sb-teaserkarte-liste--nein .sb-teaserkarte-icon {
	color: #d9785a;
}
@media (max-width: 480px) {
	.sb-teaserkarte .sb-teaserkarte-liste li {
		font-size: 13px;
	}
}

/* Reisezeit: zwoelf Balken, darunter der Monatsbuchstabe, sonst nichts */
.sb-teaserkarte-reisezeit {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2px;
}
.sb-teaserkarte-monat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.sb-teaserkarte-balken {
	display: block;
	width: 100%;
	height: 7px;
	border-radius: 2px;
	background: #d6d2c6;
}
.sb-teaserkarte-balken--gruen {
	background: var(--sb-mint, #77c49b);
}
.sb-teaserkarte-balken--rot {
	background: #d9785a;
	opacity: 0.55;
}
.sb-teaserkarte-monat b {
	color: #9fbdb4;
	font: 600 9.5px/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
}

/* Fuss hinten: auf dunklem Grund */
.sb-teaserkarte-hinten .sb-teaserkarte-fuss {
	border-top-color: rgba(255, 255, 255, 0.18);
}
.sb-teaserkarte-hinten .sb-teaserkarte-preis b {
	color: var(--sb-weiss, #ffffff);
}
.sb-teaserkarte-hinten .sb-teaserkarte-preis small {
	color: #cfe3dc;
}
:is(.sb-teaserkarte .sb-teaserkarte-hinten, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum {
	background: var(--sb-gelb, #e5de00);
	color: var(--sb-petrol-900, #021c1e);
}
:is(.sb-teaserkarte .sb-teaserkarte-hinten, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum:hover {
	background: var(--sb-weiss, #ffffff);
	color: var(--sb-petrol-900, #021c1e);
}

/* ---------- Schmale Karte (Wischleiste am Handy, rund 250 px): Bildzeile und Fuss verdichten ---------- */
.sb-teaserkarte {
	container-type: inline-size;
	container-name: sb-teaserkarte;
}
@container sb-teaserkarte (max-width: 300px) {
	.sb-teaserkarte .sb-teaserkarte-hinweis {
		gap: 5px;
		padding: 5px 9px;
		font-size: 11.5px;
	}
	.sb-teaserkarte-land {
		max-width: calc(100% - 162px);
		font-size: 12px;
		gap: 4px;
	}
	.sb-teaserkarte-land .sb-teaserkarte-icon {
		width: 14px;
		height: 14px;
	}
	/* Preis und Knopf in einer Zeile, der Preiszusatz darunter ueber die ganze Breite (statt fuenf Zeilen
	   neben dem Knopf). Reicht die Breite nicht (fuenfstelliger Preis, 320er Handy), rutscht der Knopf
	   in die naechste Zeile; der Preis wird nie abgeschnitten. */
	.sb-teaserkarte-fuss {
		flex-wrap: wrap;
		align-items: center;
		column-gap: 6px;
		row-gap: 4px;
		padding-top: 8px;
	}
	.sb-teaserkarte-preis {
		display: contents;
	}
	.sb-teaserkarte-preis b {
		order: 1;
		font-size: 16px;
	}
	.sb-teaserkarte a.sb-teaserkarte-zum {
		order: 2;
		margin-left: auto;
		gap: 4px;
		padding: 8px 9px 8px 11px;
		font-size: 12px;
	}
	.sb-teaserkarte-zum .sb-teaserkarte-icon {
		width: 13px;
		height: 13px;
	}
	.sb-teaserkarte-preis small {
		order: 3;
		flex: 0 0 100%;
	}
	.sb-teaserkarte-hinten-inhalt {
		padding-top: 34px;
	}
}

/* Sehr schmale Karte (320er Handy, rund 200 px): Land ueber den Knopf im Bild. */
@container sb-teaserkarte (max-width: 230px) {
	.sb-teaserkarte-land {
		bottom: 44px;
		max-width: calc(100% - 24px);
	}
	.sb-teaserkarte .sb-teaserkarte-dims {
		column-gap: 10px;
	}
	.sb-teaserkarte-dim-name {
		font-size: 12px;
	}
}

/* ---------- Fokus: ein Ring fuer alles (Gelb-Petrol wie basis.css) ---------- */
.sb-teaserkarte .sb-teaserkarte-drehen:focus-visible,
:is(.sb-teaserkarte, .sb-teaserkarte-vgl) a.sb-teaserkarte-zum:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}

/* ---------- Weniger Bewegung: Ueberblenden statt Drehen ---------- */
@media (prefers-reduced-motion: reduce) {
	.sb-teaserkarte-innen,
	.sb-teaserkarte--gedreht .sb-teaserkarte-innen {
		transform: none;
		transition: none;
	}
	.sb-teaserkarte-hinten {
		transform: none;
		opacity: 0;
		transition: opacity 0.2s;
	}
	.sb-teaserkarte-vorn {
		transition: opacity 0.2s;
	}
	.sb-teaserkarte--gedreht .sb-teaserkarte-hinten {
		opacity: 1;
	}
	.sb-teaserkarte--gedreht .sb-teaserkarte-vorn {
		opacity: 0;
	}
	.sb-teaserkarte-img {
		transition: none;
	}
	.sb-teaserkarte:hover .sb-teaserkarte-img {
		transform: none;
	}
}

/* ---------- TK1b · Kompaktkarte (Startseiten-Reihen, Bucket List, Finder, Matcher), seit 11.10.2026 ---------- */
/* Die Kompakt-Variante hat keine Bootstrap-Huelle; die Karte selbst ist das Rasterelement der Reihe. */
.sb-teaserkarte--kompakt {
	min-width: 0;
	scroll-snap-align: start;
}
/* Bucket List und Matcher stellen unter bzw. ueber die Karte noch etwas (Entfernen-Knopf, "Passt zu dir, weil"):
   dort fuellt die Karte den Rest, statt 100 Prozent der Huelle zu nehmen. */
.sb-merk-eintrag > .sb-teaserkarte,
.sb-matcher-treffer > .sb-teaserkarte {
	flex: 1 1 auto;
	height: auto;
}
.sb-merk-eintrag > .sb-teaserkarte > .sb-teaserkarte-innen,
.sb-matcher-treffer > .sb-teaserkarte > .sb-teaserkarte-innen {
	height: 100%;
}
/* Am Handy die Karten der Wischreihen nicht auf gleiche Hoehe strecken (wie in der Slick-Leiste) */
@media (max-width: 767px) {
	.sb-reihen-reihe:has(> .sb-teaserkarte),
	.sb-finder-reihe:has(> .sb-teaserkarte) {
		align-items: start;
	}
	.sb-reihen-reihe > .sb-teaserkarte,
	.sb-finder-reihe > .sb-teaserkarte {
		height: auto;
	}
}

/* ---------- TK2 · Vergleichen (Variante zur Ansicht durch Daniel, seit 11.10.2026) ---------- */
/* Haekchen im Bild oben links; bei "Anzeige" darunter. Formularfeld und label drehen nicht (teaserkarte.js). */
.sb-teaserkarte .sb-teaserkarte-vergleich {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin: 0;
	padding: 6px 11px 6px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--sb-petrol-900, #021c1e);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font: 700 12px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	cursor: pointer;
	transition: background 0.2s;
}
.sb-teaserkarte-vergleich::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 999px;
}
.sb-teaserkarte-anzeige ~ .sb-teaserkarte-bild .sb-teaserkarte-vergleich {
	top: 40px;
}
.sb-teaserkarte .sb-teaserkarte-vergleich-feld {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--sb-petrol-700, #004445);
	cursor: pointer;
}
.sb-teaserkarte .sb-teaserkarte-vergleich:has(:checked) {
	background: var(--sb-gelb, #e5de00);
}
.sb-teaserkarte .sb-teaserkarte-vergleich:has(:focus-visible) {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}
@container sb-teaserkarte (max-width: 230px) {
	.sb-teaserkarte .sb-teaserkarte-vergleich {
		gap: 5px;
		padding: 5px 9px 5px 7px;
		font-size: 11px;
	}
}

/* Leiste unten, sobald etwas zum Vergleich gewaehlt ist (baut teaserkarte.js) */
.sb-teaserkarte-leiste {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 9990;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	width: min(820px, calc(100% - 24px));
	padding: 10px 12px 10px 18px;
	border-radius: var(--sb-radius-s, 12px);
	background: var(--sb-petrol-900, #021c1e);
	color: #dbe9e4;
	box-shadow: 0 14px 40px rgba(2, 28, 30, 0.35);
	font: 15px/1.35 var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	transform: translateX(-50%);
}
.sb-teaserkarte-leiste[hidden] {
	display: none;
}
.sb-teaserkarte-leiste-text {
	margin: 0;
	color: var(--sb-weiss, #ffffff);
	font: 700 14px/1.3 var(--sb-schrift-titel, 'Montserrat', sans-serif);
}
.sb-teaserkarte-leiste-liste {
	display: flex;
	flex: 1 1 260px;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-teaserkarte-leiste-liste li {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 0 0 0 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 13.5px;
}
.sb-teaserkarte-leiste-liste li::before {
	content: none;
}
.sb-teaserkarte-leiste-liste li > span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 140px;
}
.sb-teaserkarte-leiste button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	cursor: pointer;
	font: 700 13.5px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
.sb-teaserkarte-leiste .sb-teaserkarte-leiste-weg {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	background: none;
	color: #cfe3dc;
}
.sb-teaserkarte-leiste .sb-teaserkarte-leiste-weg .sb-teaserkarte-icon {
	width: 14px;
	height: 14px;
}
.sb-teaserkarte-leiste .sb-teaserkarte-leiste-los {
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--sb-gelb, #e5de00);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-teaserkarte-leiste .sb-teaserkarte-leiste-los:disabled {
	background: rgba(255, 255, 255, 0.16);
	color: #cfe3dc;
	cursor: default;
}
.sb-teaserkarte-leiste .sb-teaserkarte-leiste-leeren {
	padding: 8px 4px;
	background: none;
	color: #cfe3dc;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sb-teaserkarte-leiste-knoepfe {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-left: auto;
}
@media (max-width: 600px) {
	.sb-teaserkarte-leiste {
		bottom: 8px;
		padding: 8px 8px 8px 14px;
	}
	.sb-teaserkarte-leiste-liste {
		display: none;
	}
}

/* Vergleichsansicht: natives dialog, dunkel wie die Rueckseite der Karte, Balken wie dort */
.sb-teaserkarte-vgl {
	width: min(1000px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--sb-radius-s, 12px);
	background: var(--sb-petrol-900, #021c1e);
	color: #dbe9e4;
	font: 15px/1.45 var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	overflow: auto;
	overscroll-behavior: contain;
}
.sb-teaserkarte-vgl::backdrop {
	background: rgba(2, 28, 30, 0.62);
}
.sb-teaserkarte-vgl-kopfzeile {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 12px 22px;
	background: var(--sb-petrol-900, #021c1e);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sb-teaserkarte-vgl h2.sb-teaserkarte-vgl-h2 {
	margin: 0;
	padding: 0;
	color: var(--sb-weiss, #ffffff);
	font: 700 20px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0;
	text-transform: none;
}
.sb-teaserkarte-vgl button.sb-teaserkarte-vgl-zu {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--sb-weiss, #ffffff);
	cursor: pointer;
	box-shadow: none;
}
.sb-teaserkarte-vgl-inhalt {
	padding: 16px 22px 24px;
}
.sb-teaserkarte-vgl-inhalt > p {
	margin: 0;
}
.sb-teaserkarte-vgl-raster {
	display: grid;
	grid-template-columns: repeat(var(--sb-teaserkarte-vgl-n, 2), minmax(0, 1fr));
	gap: 6px 18px;
	align-items: start;
}
.sb-teaserkarte-vgl-kopf {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.sb-teaserkarte-vgl-bild {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 8px;
	background: var(--sb-petrol-800, #06302f);
}
.sb-teaserkarte-vgl-bild .sb-teaserkarte-vgl-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
}
.sb-teaserkarte-vgl-land {
	color: var(--sb-mint, #77c49b);
	font: 700 12px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
}
.sb-teaserkarte-vgl h3.sb-basis-kartentitel {
	color: var(--sb-weiss, #ffffff);
	font-size: 16px;
}
.sb-teaserkarte-vgl-kopf p.sb-teaserkarte-vgl-preis {
	margin: 0;
	line-height: 1.2;
}
.sb-teaserkarte-vgl-preis b {
	display: block;
	color: var(--sb-weiss, #ffffff);
	font: 700 17px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
}
.sb-teaserkarte-vgl-preis small {
	display: block;
	color: #cfe3dc;
	font-size: 12.5px;
}
.sb-teaserkarte-vgl button.sb-teaserkarte-vgl-weg {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	margin: 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: #cfe3dc;
	font: 600 13px/1.2 var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none;
}
.sb-teaserkarte-vgl-weg .sb-teaserkarte-icon {
	width: 13px;
	height: 13px;
}
.sb-teaserkarte-vgl-raster > p.sb-teaserkarte-vgl-name {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	color: #9fbdb4;
	font: 600 12.5px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
}
.sb-teaserkarte-vgl-raster > p.sb-teaserkarte-vgl-name--erst {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sb-teaserkarte-vgl-raster > p.sb-teaserkarte-vgl-abschnitt {
	grid-column: 1 / -1;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--sb-mint, #77c49b);
	font: 700 12px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sb-teaserkarte-vgl-zelle {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	color: var(--sb-weiss, #ffffff);
	font-size: 14.5px;
	line-height: 1.35;
}
.sb-teaserkarte-vgl-zelle > .sb-teaserkarte-balken-zeile {
	flex: 1 1 auto;
}
.sb-teaserkarte-vgl-zelle > b {
	flex: none;
	min-width: 10px;
	color: #cfe3dc;
	font: 700 12.5px/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	text-align: right;
}
.sb-teaserkarte-vgl-zelle.sb-teaserkarte-stark i.sb-teaserkarte-an {
	background: var(--sb-gelb, #e5de00);
}
.sb-teaserkarte-vgl-zelle.sb-teaserkarte-stark > b {
	color: var(--sb-gelb, #e5de00);
}
.sb-teaserkarte-vgl-zelle > .sb-teaserkarte-reisezeit {
	flex: 1 1 auto;
}
.sb-teaserkarte-vgl-punkt {
	align-items: flex-start;
	font-size: 13.5px;
}
.sb-teaserkarte-vgl-punkt .sb-teaserkarte-icon {
	width: 15px;
	height: 15px;
	margin-top: 2px;
}
.sb-teaserkarte-vgl-punkt--ja .sb-teaserkarte-icon {
	color: var(--sb-mint, #77c49b);
}
.sb-teaserkarte-vgl-punkt--nein .sb-teaserkarte-icon {
	color: #d9785a;
}
.sb-teaserkarte-vgl-fuss {
	margin-top: 14px;
}
.sb-teaserkarte-vgl-meldung {
	color: #cfe3dc;
}
.sb-teaserkarte-vgl button:focus-visible,
.sb-teaserkarte-leiste button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}
@media (max-width: 600px) {
	.sb-teaserkarte-vgl {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	.sb-teaserkarte-vgl-inhalt {
		padding: 12px 12px 20px;
	}
	.sb-teaserkarte-vgl-kopfzeile {
		padding: 10px 10px 10px 14px;
	}
	.sb-teaserkarte-vgl-raster {
		gap: 5px 10px;
	}
	.sb-teaserkarte-vgl h3.sb-basis-kartentitel {
		font-size: 13px;
		overflow-wrap: break-word;
	}
	.sb-teaserkarte-vgl-preis b {
		font-size: 14.5px;
	}
	.sb-teaserkarte-vgl-zelle {
		gap: 5px;
		font-size: 13px;
	}
	.sb-teaserkarte-vgl-punkt {
		font-size: 12.5px;
	}
	.sb-teaserkarte-vgl-punkt .sb-teaserkarte-icon {
		display: none;
	}
	.sb-teaserkarte-vgl-fuss a.sb-teaserkarte-zum {
		padding: 8px 10px;
		font-size: 12px;
	}
	.sb-teaserkarte-vgl-fuss .sb-teaserkarte-icon {
		display: none;
	}
}