/* Synapsenbrenner Reiseplaner: Reiseverlauf mit Karte auf Erlebnisseiten (Bauplan P4b.2, 19.09.2026).
   Prefix sb-vl-. Muster: Planer (Karte links, klebend, bricht nach links aus dem Raster) und Entwurf
   Fassung 2 und 3. Die Etappen selbst bleiben unveraendert (Stile aus cpt-sb-erlebnis.css).
   Theme-Umfeld: html font-size 10px, img global width 100 %, :focus ohne outline. */

.sb-vl {
	--sb-vl-petrol: var(--sb-petrol-700, #004445);
	--sb-vl-tinte2: var(--sb-text-2, #4b5563);
	--sb-vl-grau100: var(--sb-grau-100, #f2f0eb);
	--sb-vl-grau200: var(--sb-grau-200, #e5e7eb);
	--sb-vl-titel: var(--sb-schrift-titel, Poppins, system-ui, sans-serif);
	margin-top: 8px;
}
.sb-vl *,
.sb-vl *::before,
.sb-vl *::after {
	box-sizing: border-box;
}
.sb-vl-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.sb-vl-karte-spalte,
.sb-vl-etappen {
	min-width: 0;
}
.sb-vl-buehne {
	min-width: 0;
}
.sb-vl .sb-planer-karte {
	--sb-karte-hoehe: 320px;
}
.sb-vl .sb-planer-karte-laden p {
	font-size: 12.5px;
}

/* ---------- Handy und Tablet (ER-BAU3, N273, Daniel 10.10.2026): Lade-Hinweis samt Knopf unter der
   Karte statt als Verlauf darueber; die Legende rueckt eine Zeile tiefer. Nur Erlebnisse (.sb-vl), der Planer
   bleibt unveraendert. ---------- */
@media (max-width: 980px) {
	.sb-vl .sb-planer-karte {
		grid-template-rows: minmax(var(--sb-karte-hoehe, 320px), 1fr) auto auto;
	}
	.sb-vl .sb-planer-karte-laden {
		grid-row: 2;
		align-self: stretch;
		padding: 14px 16px;
		background: var(--sb-petrol-900, #021c1e);
	}
	.sb-vl .sb-planer-karte-legende {
		grid-row: 3;
	}
}

/* ---------- Desktop: Karte links, klebend, bricht nach links aus ---------- */
@media (min-width: 981px) {
	.sbErlebnisInhalt:has(.sb-vl) {
		overflow-x: clip;
	}
	.sb-vl-raster {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(600px, 54%));
		gap: 28px;
		margin-left: calc(-1 * var(--sb-vl-ausbruch, 0px));
	}
	.sb-vl-karte-spalte {
		align-self: stretch;
	}
	.sb-vl-buehne {
		position: sticky;
		top: var(--sb-vl-kopf, 92px);
	}
	.sb-vl .sb-planer-karte {
		--sb-karte-hoehe: clamp(440px, calc(100vh - 330px), 720px);
	}
	.sb-vl .sb-planer-karte-laden p {
		font-size: 13.5px;
	}
}

/* ---------- Knopf „Diese Reiseroute im Reiseplaner anpassen“ ---------- */
.sb-vl-anpassen {
	margin: 28px 0 0;
	padding: 20px 22px;
	border-radius: var(--sb-radius, 20px);
	background: var(--sb-vl-grau100);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
}
.sb-vl-anpassen p {
	margin: 0;
	flex: 1 1 280px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sb-vl-tinte2);
}
.sb-vl .sb-vl-anpassen-knopf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--sb-gelb, #e5de00);
	color: var(--sb-petrol-900, #021c1e);
	font: 600 15px/1.25 var(--sb-vl-titel);
	text-decoration: none;
}
.sb-vl .sb-vl-anpassen-knopf:hover {
	background: #d6cf00;
}

/* ---------- Unterwegs entdecken ---------- */
.sb-vl-funde {
	margin: 24px 0 0;
	border: 1px solid var(--sb-vl-grau200);
	border-radius: var(--sb-radius, 20px);
	background: #fff;
	overflow: hidden;
}
.sb-vl-funde summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 16px 20px;
	min-height: 44px;
}
.sb-vl-funde summary::-webkit-details-marker {
	display: none;
}
.sb-vl-funde summary::after {
	content: '';
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	align-self: center;
	color: var(--sb-vl-petrol);
}
.sb-vl-funde[open] summary::after {
	transform: rotate(-135deg);
}
.sb-vl-funde-titel {
	font: 600 18px/1.25 var(--sb-vl-titel);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-vl-funde-zahl {
	font-size: 14px;
	color: var(--sb-vl-tinte2);
}
.sb-vl-funde-intro {
	margin: 0;
	padding: 0 20px 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sb-vl-tinte2);
}
.sb-vl-funde-liste {
	list-style: none;
	margin: 0;
	padding: 0 12px 12px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 4px 16px;
}
.sb-vl-fund {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 8px;
	border-top: 1px solid var(--sb-vl-grau100);
	min-width: 0;
}
.sb-vl-fund-bild {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sb-vl-grau100);
}
.sb-vl-fund-bild img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}
.sb-vl-fund-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.sb-vl-fund-art {
	font-size: 12.5px;
	color: var(--sb-vl-tinte2);
}
.sb-vl-fund--ort .sb-vl-fund-art::before,
.sb-vl-fund--highlight .sb-vl-fund-art::before,
.sb-vl-fund--moment .sb-vl-fund-art::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: 1px;
	background: #0b5c4e;
}
.sb-vl-fund--highlight .sb-vl-fund-art::before {
	background: #dd9933;
}
.sb-vl-fund--moment .sb-vl-fund-art::before {
	background: #7b2d8e;
}
.sb-vl .sb-vl-fund-titel {
	margin: 0;
	font: 600 15.5px/1.3 var(--sb-vl-titel);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-petrol-900, #021c1e);
	overflow-wrap: anywhere;
}
.sb-vl .sb-vl-fund-titel a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(0, 68, 69, 0.35);
	text-underline-offset: 3px;
}
.sb-vl .sb-vl-fund-titel a:hover {
	color: var(--sb-vl-petrol);
}
.sb-vl-werte {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 12px;
	align-items: center;
	font-size: 12.5px;
	margin-top: 2px;
}
.sb-vl-wert {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.sb-vl-wert-lab {
	color: var(--sb-vl-tinte2);
}
.sb-vl-flammen {
	letter-spacing: 1px;
	font-size: 12px;
}
.sb-vl-punkte {
	display: inline-flex;
	gap: 3px;
}
.sb-vl-punkte i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sb-vl-grau200);
	display: block;
}
.sb-vl-punkte i.an {
	background: var(--sb-vl-tinte2);
}
.sb-vl-offen {
	font-size: 12px;
	color: #8a6d00;
	background: #fff8e1;
	border-radius: 999px;
	padding: 2px 8px;
}
.sb-vl-ampel {
	display: flex;
	gap: 2px;
	width: 100%;
	max-width: 264px;
}
.sb-vl-ampel span {
	flex: 1;
	height: 18px;
	border-radius: 4px;
	display: grid;
	place-items: center;
	font: 600 9.5px var(--sb-vl-titel);
	background: var(--sb-vl-grau200);
	color: var(--sb-vl-tinte2);
}
.sb-vl-ampel .sb-vl-ampel-gruen {
	background: #2e7d5b;
	color: #fff;
}
.sb-vl-ampel .sb-vl-ampel-grau {
	background: #d6d3ca;
	color: #4b5563;
}
.sb-vl-ampel .sb-vl-ampel-rot {
	background: #b3261e;
	color: #fff;
}
.sb-vl-ampel .sb-vl-ampel-leer {
	background: repeating-linear-gradient(45deg, #efede7, #efede7 4px, #e2dfd6 4px, #e2dfd6 8px);
	color: #8a8579;
}

/* ---------- Fokus (Theme setzt outline:none) ---------- */
.sb-vl a:focus-visible,
.sb-vl summary:focus-visible,
.sb-vl button:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sb-vl-petrol);
	border-radius: 6px;
}

/* ---------- Handy ---------- */
@media (max-width: 480px) {
	.sb-vl-funde-liste {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 8px 8px;
	}
	.sb-vl-fund-bild,
	.sb-vl-fund-bild img {
		width: 52px;
		height: 52px;
		flex-basis: 52px;
	}
	.sb-vl-anpassen {
		padding: 16px;
	}
}

/* ---------- ER-BAU2 (10.10.2026): Marken fuer Etappen mit mehreren Orten (verlauf.js) ---------- */
.sb-vl-etappen .sb-vl-mit-marken {
	position: relative;
}
.sb-vl-marke {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

@media print {
	.sb-vl-buehne {
		position: static;
	}
	.sb-vl-anpassen {
		display: none;
	}
}