/*
 * Synapsenbrenner - Modul ortsseite, Stylesheet der neuen Ortsseite (Nationalpark-Spur, NP-B1 09.10.2026).
 * Laedt nur auf Sehnsuchtsorten aus sb_ortsseite_orte, nach cpt-sb-sehnsuchtsort.css (Abhaengigkeit),
 * und ergaenzt dessen camelCase-Klassen (sbOrtHero, sbOrtSektion, sbSteckbrief…). Gestaltung nach dem
 * abgenommenen Entwurf synapsenbrenner-nationalpark-entwurf.html.
 * Haengt ab von: Token und Bausteinen aus southvision-child/bloecke/basis.css (sb-basis-kicker--icon,
 * sb-basis-farbbox, sb-basis-kacheln, sb-basis-sektion--tief), dem Theme-Token --borderRadiusImage.
 * Greift in Theme-Markup: .container (Flex, Kinder brauchen width:100%), .galleryBtnWrap im Hero
 * (Klasse des Block-20-Musters, schon in cpt-sb-sehnsuchtsort.css benutzt) - beim Theme-Update sichtpruefen.
 * Mehrfach-Selektoren (.sb-ortsseite-stock …) sind Notwehr gegen gleich starke Regeln aus
 * cpt-sb-sehnsuchtsort.css (FRONTEND-REGELN.md Abschnitt 3).
 * NP-B2 (09.10.2026): Block am Ende fuer Jahresrad, Monatsleiste, Checker (NP9, NP10) und Anreise-Grafik
 * (NP11); faerbt ausserdem die Nadel des Moduls ortskarten beim Sprung aus der Anreise (.sb-ortsseite-puls).
 * Rueckbau: Datei loeschen oder Ort aus sb_ortsseite_orte nehmen.
 */

/* ---------- Stockwerke: Flaechenwechsel wie im Entwurf ---------- */
.sb-ortsseite-stock {
	position: relative;
	overflow: hidden;
	border: 0;
}
.sbOrtSektion.sb-ortsseite-stock,
.sbOrtInhalt.sb-ortsseite-stock,
.sbOrtMomentWrap.sb-ortsseite-stock,
.sbErlebnisseWrap.sb-ortsseite-stock,
.sbFaqWrap.sb-ortsseite-stock {
	padding-top: 72px;
	padding-bottom: 72px;
}
.sb-ortsseite-stock--hell {
	background-color: var(--sb-grau-50, #faf9f6);
}
.sb-ortsseite-stock--grau {
	background-color: var(--sb-grau-100, #f2f0eb);
}
.sb-ortsseite-stock--weiss {
	background-color: var(--sb-weiss, #ffffff);
}
.sb-ortsseite-stock > .container {
	position: relative;
	z-index: 2;
}
/* Kicker als direktes Kind der Flex-.container (FAQ, Erlebnisse, Naehe, Momente) */
.sb-ortsseite-stock > .container > .sb-basis-kicker,
.sbOrtErlebnisseWrap > .container > .sb-basis-kicker {
	width: 100%;
	flex: 0 0 100%;
}
/* Ueberschriften und Text im dunklen Stockwerk (gegen .sbOrtSektion h2 aus dem Kern) */
.sb-ortsseite-stock.sb-basis-sektion--tief h2,
.sb-ortsseite-stock.sb-basis-sektion--tief h3 {
	color: var(--sb-weiss, #ffffff);
}
.sb-ortsseite-stock.sb-basis-sektion--tief .sbOrtInfoText a {
	color: var(--sb-mint, #77c49b);
}

/* ---------- Hero (NP3, NP6, NP13, GB2, GB6, GB7) ---------- */
.sbOrtHero.sb-ortsseite-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 130px;
}
.sb-ortsseite-hero > .container {
	position: relative;
	z-index: 2;
}
.sb-ortsseite-hero .sbHeroTextWrap {
	padding-right: 24px;
}
.sb-ortsseite-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 20px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
}
.sb-ortsseite-meta-teil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sb-ortsseite-meta .sbFaktIconSvg {
	width: 18px;
	height: 18px;
	color: var(--sb-mint, #77c49b);
}
.sb-ortsseite-meta a {
	color: var(--sb-weiss, #ffffff);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.sb-ortsseite-meta a:hover,
.sb-ortsseite-meta a:focus-visible {
	border-bottom-color: var(--sb-mint, #77c49b);
}
.sb-ortsseite-meta-punkt {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sb-mint, #77c49b);
}
.sb-ortsseite-kurz {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	border-left: 3px solid var(--sb-mint, #77c49b);
	padding-left: 18px;
}
.sb-ortsseite-hero .galleryBtnWrap.sb-ortsseite-alle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.sb-ortsseite-hero .galleryBtnWrap .sbFaktIconSvg {
	width: 16px;
	height: 16px;
}
/* Fokusring als box-shadow: theme.min.css setzt :focus { outline: none !important } (Testbefund Q101) */
.sb-ortsseite-hero .galleryBtnWrap:focus-visible,
.sb-ortsseite-mauer-bild:focus-visible,
.sb-ortsseite-faq-eintrag > summary:focus-visible {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}

/* GB2: Savannen-Kante, Farbe = Grund des naechsten Stockwerks (Layout A, hell) */
.sb-ortsseite-kante {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 90px;
	z-index: 1;
	color: var(--sb-grau-50, #faf9f6);
	pointer-events: none;
}
.sb-ortsseite-kante svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* GB6: Synapsen-Netz */
.sb-ortsseite-netz {
	position: absolute;
	z-index: 0;
	width: 300px;
	height: auto;
	opacity: 0.55;
	pointer-events: none;
}
.sb-ortsseite-netz line {
	stroke: var(--sb-mint, #77c49b);
	stroke-width: 1;
}
.sb-ortsseite-netz circle {
	fill: var(--sb-mint, #77c49b);
}
.sb-ortsseite-netz .sb-ortsseite-funke {
	fill: var(--sb-gelb, #e5de00);
}
.sb-ortsseite-netz .sb-ortsseite-funke-ring {
	fill: none;
	stroke: var(--sb-gelb, #e5de00);
	stroke-opacity: 0.5;
}
.sb-ortsseite-netz--oben-rechts {
	right: -40px;
	top: -30px;
}
.sb-ortsseite-netz--unten-links {
	left: -30px;
	bottom: -40px;
}
.sb-ortsseite-netz--unten-rechts {
	right: -30px;
	bottom: -30px;
}

/* GB7: Hoehenlinien und Strichmotive */
.sb-ortsseite-hoehen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.13;
	pointer-events: none;
}
.sb-ortsseite-hoehen path {
	fill: none;
	stroke: var(--sb-mint, #77c49b);
	stroke-width: 1.4;
}
.sb-ortsseite-motiv {
	position: absolute;
	z-index: 0;
	height: auto;
	opacity: 0.18;
	pointer-events: none;
}
.sb-ortsseite-motiv g {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}
.sb-ortsseite-motiv--akazie {
	width: 300px;
	right: -30px;
	bottom: -20px;
	color: var(--sb-mint, #77c49b);
}
.sb-ortsseite-motiv--ballon {
	width: 170px;
	right: 4%;
	top: 20px;
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-motiv--fernglas {
	width: 220px;
	left: -20px;
	bottom: 10px;
	color: var(--sb-petrol-700, #004445);
}

/* ---------- Layout A: Steckbrief (NP14) ---------- */
.sb-ortsseite-stock .sbSteckbriefWrap {
	border-radius: var(--sb-radius, 20px);
	padding: 28px 26px;
}
.sb-ortsseite-stock .sbSteckbriefWrap h2 {
	font-size: 28px;
}
.sb-ortsseite-stock .sbSteckbriefIcon {
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-stock .sbSteckbriefIcon .sbFaktIconSvg {
	width: 19px;
	height: 19px;
}
.sb-ortsseite-stock .sbSteckbriefListe dd {
	padding-left: 27px;
}

/* GB4: Farbbox in der Hauptspalte */
.sbOrtHauptspalte .sb-ortsseite-warum {
	margin-top: 40px;
}
.sb-ortsseite-warum-inhalt {
	position: relative;
	z-index: 1;
}
.sb-ortsseite-warum h2 {
	color: var(--sb-petrol-900, #021c1e);
}

/* GB9: Geheimtipps als gelber Zettel (Kasten aus module/reiseplaner-daten, Baustein geheimtipps) */
.sb-ortsseite-stock .sb-geheimtipp-kasten {
	background: #fffbe0;
	border: 2px solid #efe57a;
	border-radius: var(--sb-radius, 20px);
}
.sb-ortsseite-stock .sb-geheimtipp-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 12.5px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0.14em;
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-stock .sb-geheimtipp-kicker .sb-basis-kicker-icon {
	color: var(--sb-orange, #dd9933);
	background: rgba(221, 153, 51, 0.16);
}

/* ---------- GB3: Zahlenband ---------- */
.sb-ortsseite-zahlenband {
	position: relative;
	overflow: hidden;
	background: var(--sb-petrol-900, #021c1e);
	color: var(--sb-weiss, #ffffff);
	padding: 54px 0;
}
.sb-ortsseite-zahlenband > .container {
	position: relative;
	z-index: 2;
}
.sb-ortsseite-zahlen {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}
.sb-ortsseite-zahl {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.sb-ortsseite-zahl dd {
	margin: 0;
	font: 800 clamp(30px, 3.3vw, 46px)/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-gelb, #e5de00);
}
.sb-ortsseite-zahl dt {
	margin-top: 8px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: #cfe3dc;
}

/* ---------- Landschaft: etwas groessere Bilder als im Kern ---------- */
.sb-ortsseite-stock .sbOrtZeileBildWrap {
	flex-basis: 26rem;
	max-width: 26rem;
}
.sb-ortsseite-stock .sbOrtZeileBildWrap img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---------- NP15: Abschnittsbild ---------- */
.sb-ortsseite-abschnittsbild {
	max-width: 880px;
	margin: 24px 0 0;
}
.sb-ortsseite-abschnittsbild-rahmen {
	position: relative;
	overflow: hidden;
	border-radius: var(--borderRadiusImage, 15px);
}
.sb-ortsseite-abschnittsbild-rahmen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}
.sb-ortsseite-abschnittsbild figcaption {
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--sb-text-2, #4b5563);
}
.sb-basis-sektion--tief .sb-ortsseite-abschnittsbild figcaption {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- NP7: Galerie unten, CSS-Spalten-Mauerwerk mit eigenem Markup ---------- */
.sb-ortsseite-mauer {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	columns: 3 260px;
	column-gap: 12px;
}
.sb-ortsseite-mauer-eintrag {
	break-inside: avoid;
	margin: 0 0 12px;
	padding: 0;
}
.sb-ortsseite-mauer-bild {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--borderRadiusImage, 15px);
	cursor: zoom-in;
}
.sb-ortsseite-mauer-bild img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s;
}
.sb-ortsseite-mauer-bild:hover img {
	transform: scale(1.03);
}

/* ---------- Sektion 12 als Stockwerke, GB9 Ticket, GB10 Kacheln ---------- */
.sb-ortsseite-infotext > p,
.sb-ortsseite-infotext > ul,
.sb-ortsseite-infotext > ol {
	max-width: 90rem;
}
.sb-ortsseite-ticket {
	display: grid;
	grid-template-columns: 250px 1fr;
	max-width: 880px;
	margin: 0 0 22px;
	overflow: hidden;
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: var(--sb-radius, 20px);
}
.sb-ortsseite-ticket-kopf {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	background: var(--sb-petrol-700, #004445);
	color: var(--sb-weiss, #ffffff);
}
.sb-ortsseite-ticket-kopf::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 12px;
	bottom: 12px;
	border-right: 3px dotted var(--sb-grau-50, #faf9f6);
}
.sb-ortsseite-ticket-kicker {
	font: 700 12px/1.2 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sb-ortsseite-ticket-preis {
	font: 800 34px/1.1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-gelb, #e5de00);
}
.sb-ortsseite-ticket-wer {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}
.sb-ortsseite-ticket-liste {
	margin: 0;
	padding: 18px 22px 18px 38px;
}
.sb-ortsseite-ticket-liste li::marker {
	color: var(--sb-mint, #77c49b);
}

/* ---------- FAQ als details/summary (Q102) ---------- */
.sb-ortsseite-faq {
	width: 100%;
	max-width: 880px;
}
.sb-ortsseite-faq-eintrag {
	margin: 0 0 10px;
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: var(--sb-radius-s, 12px);
}
.sb-ortsseite-faq-eintrag > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-radius: var(--sb-radius-s, 12px);
	cursor: pointer;
	list-style: none;
}
.sb-ortsseite-faq-eintrag > summary::-webkit-details-marker {
	display: none;
}
.sb-ortsseite-faq-eintrag > summary::after {
	content: "+";
	flex: none;
	font: 400 24px/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-faq-eintrag[open] > summary::after {
	content: "\2013";
}
.sb-ortsseite-faq-eintrag > summary h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-faq-eintrag > p {
	margin: 0;
	padding: 0 20px 16px;
}

/* ---------- Mobil ---------- */
@media (max-width: 991px) {
	.sb-ortsseite-hero .sbHeroTextWrap {
		padding-right: 0;
		margin-bottom: 28px;
	}
}
@media (min-width: 801px) {
	.sb-ortsseite-zahl dd {
		white-space: nowrap;
	}
}
@media (max-width: 800px) {
	.sb-ortsseite-zahlen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.sbOrtHero.sb-ortsseite-hero {
		padding: 40px 0 96px;
	}
	.sbOrtSektion.sb-ortsseite-stock,
	.sbOrtInhalt.sb-ortsseite-stock,
	.sbOrtMomentWrap.sb-ortsseite-stock,
	.sbErlebnisseWrap.sb-ortsseite-stock,
	.sbFaqWrap.sb-ortsseite-stock {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.sb-ortsseite-kante {
		height: 48px;
	}
	.sb-ortsseite-netz {
		width: 200px;
	}
	.sb-ortsseite-kurz {
		font-size: 17px;
	}
	.sb-ortsseite-stock .sbOrtZeileBildWrap {
		flex-basis: 100%;
		max-width: 100%;
	}
	.sb-ortsseite-motiv {
		display: none;
	}
}
@media (max-width: 600px) {
	.sb-ortsseite-mauer {
		columns: 2;
		column-gap: 8px;
	}
	.sb-ortsseite-mauer-eintrag {
		margin-bottom: 8px;
	}
	.sb-ortsseite-ticket {
		grid-template-columns: 1fr;
	}
	.sb-ortsseite-ticket-kopf::after {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sb-ortsseite-mauer-bild img {
		transition: none;
	}
	.sb-ortsseite-mauer-bild:hover img {
		transform: none;
	}
}

/* =====================================================================================
   NP-B2 (09.10.2026, 0.31.16): Reisezeit als Jahresrad, Monatsleiste und Checker (NP9, NP10),
   Anreise als Infografik (NP11). Werte aus dem abgenommenen Entwurf (Reisezeit, Anreise).
   Neue Farben nur hier, als Token des Moduls mit Ersatzwert; Rad ab 500 px, Leiste darunter
   (Daniel 09.10.2026). Rueckbau: dieser Block faellt mit der Datei.
   ===================================================================================== */
.sb-ortsseite-rz,
.sb-ortsseite-rz-perioden,
.sb-ortsseite-anreise {
	--sb-ortsseite-trocken: #efc56f;
	--sb-ortsseite-regen: #3d8b86;
	--sb-ortsseite-regen-klein: #9fcfc6;
	--sb-ortsseite-uebergang: #d9d6cc;
	--sb-ortsseite-ampel-gruen: var(--sb-mint, #77c49b);
	--sb-ortsseite-ampel-grau: #d6d2c6;
	--sb-ortsseite-ampel-rot: #d9785a;
	/* ER-BAU2 (10.10.2026): Arten, die nur Erlebnisse fuehren (heiss aus dem Erlebnis-Entwurf) */
	--sb-ortsseite-heiss: #d4911a; /* ER-BAU3 (N275, 15.10.2026): vorher #e58a4e, zu nah an Ampel-Rot (CIEDE2000 9,7, jetzt 21,8; zu Trocken-Gelb 14,4) */
	--sb-ortsseite-kalt: #a9c9e6;
	--sb-ortsseite-mild: #c6dfa0;
}
.sb-ortsseite-rz-art--heiss { fill: var(--sb-ortsseite-heiss); background: var(--sb-ortsseite-heiss); }
.sb-ortsseite-rz-art--kalt { fill: var(--sb-ortsseite-kalt); background: var(--sb-ortsseite-kalt); }
.sb-ortsseite-rz-art--mild { fill: var(--sb-ortsseite-mild); background: var(--sb-ortsseite-mild); }
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--heiss { border-top-color: var(--sb-ortsseite-heiss); }
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--kalt { border-top-color: var(--sb-ortsseite-kalt); }
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--mild { border-top-color: var(--sb-ortsseite-mild); }
.sb-ortsseite-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Reisezeit: Raster Grafik | Checker ---------- */
.sb-ortsseite-rz {
	display: grid;
	grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	margin-top: 8px;
}
.sb-ortsseite-rz-sektion .sbOrtSektionInnerWrap > p,
.sb-ortsseite-rz-sektion .sbOrtReisezeitText,
.sb-ortsseite-rz-sektion .sbOrtReisezeitText p {
	color: rgba(255, 255, 255, 0.88);
}
.sb-ortsseite-rz-sektion .sbOrtReisezeitText {
	margin-top: 40px;
}

/* Jahresrad */
.sb-ortsseite-rz-svg {
	display: block;
	width: 100%;
	height: auto;
}
.sb-ortsseite-rz-svg text {
	font-family: var(--sb-schrift-titel, 'Montserrat', sans-serif);
	pointer-events: none;
}
.sb-ortsseite-rz-art--trockenzeit { fill: var(--sb-ortsseite-trocken); background: var(--sb-ortsseite-trocken); }
.sb-ortsseite-rz-art--regenzeit { fill: var(--sb-ortsseite-regen); background: var(--sb-ortsseite-regen); }
.sb-ortsseite-rz-art--kleine_regenzeit { fill: var(--sb-ortsseite-regen-klein); background: var(--sb-ortsseite-regen-klein); }
.sb-ortsseite-rz-art--uebergang { fill: var(--sb-ortsseite-uebergang); background: var(--sb-ortsseite-uebergang); }
.sb-ortsseite-rz-ampel--gruen { fill: var(--sb-ortsseite-ampel-gruen); background: var(--sb-ortsseite-ampel-gruen); }
.sb-ortsseite-rz-ampel--grau { fill: var(--sb-ortsseite-ampel-grau); background: var(--sb-ortsseite-ampel-grau); }
.sb-ortsseite-rz-ampel--rot { fill: var(--sb-ortsseite-ampel-rot); background: var(--sb-ortsseite-ampel-rot); }
.sb-ortsseite-rz-artname {
	font-size: 12px;
	font-weight: 700;
	fill: var(--sb-petrol-800, #06302f);
}
.sb-ortsseite-rz-ev--0 { fill: var(--sb-gelb, #e5de00); }
.sb-ortsseite-rz-ev--1 { fill: var(--sb-weiss, #ffffff); }
.sb-ortsseite-rz-ev--2 { fill: var(--sb-mint, #77c49b); }
.sb-ortsseite-rz-ev { fill-opacity: 0.4; }
.sb-ortsseite-rz-ev--kern { fill-opacity: 1; }
.sb-ortsseite-rz-monat {
	cursor: pointer;
	outline: none;
	transition: opacity 0.2s;
}
.sb-ortsseite-rz-seg {
	stroke: transparent;
	stroke-width: 0;
}
.sb-ortsseite-rz-monat:hover .sb-ortsseite-rz-seg,
.sb-ortsseite-rz-monat:focus .sb-ortsseite-rz-seg,
.sb-ortsseite-rz-monat--aktiv .sb-ortsseite-rz-seg {
	stroke: var(--sb-weiss, #ffffff);
	stroke-width: 3;
}
.sb-ortsseite-rz-monat:focus-visible .sb-ortsseite-rz-seg {
	stroke: var(--sb-gelb, #e5de00);
	stroke-width: 4;
}
.sb-ortsseite-rz-monatname {
	font-size: 14px;
	font-weight: 800;
	fill: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-rz-voll { fill: var(--sb-gelb, #e5de00); }
.sb-ortsseite-rz--ergebnis .sb-ortsseite-rz-monat:not(.sb-ortsseite-rz-monat--treffer) {
	opacity: 0.35;
}
.sb-ortsseite-rz-monat--treffer .sb-ortsseite-rz-seg {
	stroke: var(--sb-gelb, #e5de00);
	stroke-width: 4;
}
.sb-ortsseite-rz-mitte { fill: var(--sb-petrol-900, #021c1e); }
.sb-ortsseite-rz-mitte-kopf {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	fill: var(--sb-mint, #77c49b);
}
.sb-ortsseite-rz-mitte-1 {
	font-size: 19px;
	font-weight: 800;
	fill: var(--sb-weiss, #ffffff);
}
.sb-ortsseite-rz-mitte-2 {
	font-size: 12px;
	fill: #cfe3dc;
}

/* Monatsleiste (nur unter 500 px) */
.sb-ortsseite-rz-leiste-wrap {
	display: none;
}
.sb-ortsseite-rz-leiste {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2px;
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.92);
}
.sb-ortsseite-rz-leiste td,
.sb-ortsseite-rz-leiste th {
	padding: 0;
	border: 0;
	text-align: center;
	vertical-align: middle;
}
.sb-ortsseite-rz-leiste thead th {
	font: 700 12px/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	padding: 4px 0;
}
.sb-ortsseite-rz-leiste abbr {
	text-decoration: none;
	border: 0;
}
.sb-ortsseite-rz-leiste thead td,
.sb-ortsseite-rz-leiste tbody th {
	width: 56px;
}
.sb-ortsseite-rz-leiste tbody th {
	text-align: left;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.1;
	padding-right: 4px;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.sb-ortsseite-rz-zelle {
	border-radius: 6px;
	height: 32px;
}
.sb-ortsseite-rz-zelle button {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	border-radius: 6px;
	font-weight: 700;
	color: var(--sb-petrol-900, #021c1e);
	cursor: pointer;
}
.sb-ortsseite-rz-zelle button:focus-visible {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00);
}
.sb-ortsseite-rz-zelle--treffer {
	box-shadow: inset 0 0 0 3px var(--sb-gelb, #e5de00);
}
.sb-ortsseite-rz-leiste .sb-ortsseite-rz-band {
	border-radius: 6px;
	height: 30px;
	padding: 0 2px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--sb-petrol-900, #021c1e);
	overflow: hidden;
}
.sb-ortsseite-rz-andrang,
.sb-ortsseite-rz-evzelle {
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--sb-gelb, #e5de00);
	font-size: 15px;
	line-height: 1;
}
.sb-ortsseite-rz-evzelle--0 { background: rgba(229, 222, 0, 0.4); }
.sb-ortsseite-rz-evzelle--1 { background: rgba(255, 255, 255, 0.4); }
.sb-ortsseite-rz-evzelle--2 { background: rgba(119, 196, 155, 0.4); }
.sb-ortsseite-rz-evzelle--0.sb-ortsseite-rz-evzelle--kern { background: var(--sb-gelb, #e5de00); }
.sb-ortsseite-rz-evzelle--1.sb-ortsseite-rz-evzelle--kern { background: var(--sb-weiss, #ffffff); }
.sb-ortsseite-rz-evzelle--2.sb-ortsseite-rz-evzelle--kern { background: var(--sb-mint, #77c49b); }

/* Legende und Detail */
.sb-ortsseite-rz-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	font-size: 14px;
	color: #cfe3dc;
}
.sb-ortsseite-rz-legende li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.sb-ortsseite-rz-legende li::before {
	content: none;
}
.sb-ortsseite-rz-legende i {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}
.sb-ortsseite-rz-legende .sb-ortsseite-rz-legende-voll {
	background: var(--sb-gelb, #e5de00);
	border-radius: 50%;
}
.sb-ortsseite-rz-legende .sb-ortsseite-rz-legende-ev {
	height: 5px;
}
.sb-ortsseite-rz-legende-ev--0 { background: var(--sb-gelb, #e5de00); }
.sb-ortsseite-rz-legende-ev--1 { background: var(--sb-weiss, #ffffff); }
.sb-ortsseite-rz-legende-ev--2 { background: var(--sb-mint, #77c49b); }
.sb-ortsseite-rz-detail {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--sb-radius, 20px);
	padding: 20px 22px;
	margin-top: 18px;
	min-height: 120px;
	color: rgba(255, 255, 255, 0.88);
}
.sb-ortsseite-rz-sektion .sb-ortsseite-rz-detail h3 {
	margin: 0 0 6px;
	font-size: 22px;
}
.sb-ortsseite-rz-chip {
	display: inline-block;
	vertical-align: middle;
	border-radius: 999px;
	padding: 3px 10px;
	font: 600 14px/1.3 var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-rz-detail p {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, 0.88);
}
.sb-ortsseite-rz-detail .sb-ortsseite-rz-detail-text {
	margin: 0;
	font-size: 15.5px;
}

/* Checker (NP10) */
.sb-ortsseite-rz-checker {
	background: var(--sb-weiss, #ffffff);
	color: var(--sb-text, #1b2a2a);
	border-radius: var(--sb-radius, 20px);
	padding: 26px 26px 22px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.sb-ortsseite-rz-sektion .sb-ortsseite-rz-checker h3 {
	color: var(--sb-petrol-900, #021c1e);
	margin: 0 0 14px;
}
.sb-ortsseite-rz-schritt {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--sb-text-2, #4b5563);
	margin-bottom: 6px;
}
.sb-ortsseite-rz-balken {
	height: 4px;
	background: var(--sb-grau-200, #e5e7eb);
	border-radius: 4px;
	margin-bottom: 16px;
}
.sb-ortsseite-rz-balken i {
	display: block;
	height: 100%;
	background: var(--sb-mint, #77c49b);
	border-radius: 4px;
	transition: width 0.3s;
}
.sb-ortsseite-rz-optionen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.sb-ortsseite-rz-optionen button {
	display: flex;
	gap: 10px;
	align-items: center;
	text-align: left;
	border: 1.5px solid var(--sb-grau-200, #e5e7eb);
	background: var(--sb-grau-50, #faf9f6);
	border-radius: var(--sb-radius-s, 12px);
	padding: 14px 12px;
	font: 600 15px/1.3 var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
	cursor: pointer;
}
.sb-ortsseite-rz-optionen button:hover,
.sb-ortsseite-rz-optionen button:focus-visible {
	border-color: var(--sb-petrol-700, #004445);
	background: var(--sb-weiss, #ffffff);
	box-shadow: 0 0 0 2px var(--sb-gelb, #e5de00);
}
.sb-ortsseite-rz-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-rz-zurueck {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 12px;
	color: var(--sb-text-2, #4b5563);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}
.sb-ortsseite-rz-fenster {
	border-left: 4px solid var(--sb-gelb, #e5de00);
	background: #fffce0;
	padding: 12px 16px;
	border-radius: 0 var(--sb-radius-s, 12px) var(--sb-radius-s, 12px) 0;
	margin: 10px 0;
	color: var(--sb-text, #1b2a2a);
}
.sb-ortsseite-rz-fenster--zwei {
	border-color: var(--sb-mint, #77c49b);
	background: #eef8f2;
}
.sb-ortsseite-rz-fenster b {
	display: block;
	font: 800 18px/1.25 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-rz-fenster small {
	display: block;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-rz-gruende span {
	display: inline-block;
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: 999px;
	padding: 2px 10px;
	margin: 6px 4px 0 0;
	font-size: 13px;
}
.sb-ortsseite-rz-checker p {
	color: var(--sb-text, #1b2a2a);
}
.sb-ortsseite-rz-checker .sb-ortsseite-rz-klein {
	font-size: 13.5px;
	color: var(--sb-text-2, #4b5563);
	margin: 10px 0 12px;
}
.sb-ortsseite-rz-neu {
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	background: var(--sb-gelb, #e5de00);
	color: #111111;
	font: 700 15px var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	cursor: pointer;
}
.sb-ortsseite-rz-neu:focus-visible,
.sb-ortsseite-rz-zurueck:focus-visible {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-rz-checker-hinweis {
	font-size: 13.5px;
	margin-top: 10px;
	color: #a9c7bf;
}

/* Perioden als Karten unter dem Text */
.sb-ortsseite-rz-perioden {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 22px;
}
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode {
	margin: 0;
	max-width: none;
	padding: 16px 18px;
	border-radius: var(--sb-radius-s, 12px);
	background: rgba(255, 255, 255, 0.06);
	border-top: 5px solid var(--sb-ortsseite-trocken);
	color: rgba(255, 255, 255, 0.88);
}
/* ER-BAU2 (10.10.2026): Farbe je Art; vorher nur zweiklassig und von der Regel oben (drei Klassen) ueberstimmt,
   deshalb waren alle Karten gelb (gemessen an der Serengeti). */
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--regenzeit { border-top-color: var(--sb-ortsseite-regen); }
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--kleine_regenzeit { border-top-color: var(--sb-ortsseite-regen-klein); }
.sb-ortsseite-rz-perioden .sbOrtPeriode.sb-ortsseite-rz-periode.sb-ortsseite-rz-periode--uebergang { border-top-color: var(--sb-ortsseite-uebergang); }
.sb-ortsseite-rz-sektion .sb-ortsseite-rz-periode h3 {
	font-size: 18px;
	color: var(--sb-weiss, #ffffff);
}
.sb-ortsseite-rz-periode p {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- Anreise (NP11) ---------- */
.sb-ortsseite-anreise {
	background: var(--sb-weiss, #ffffff);
	border-radius: var(--sb-radius, 20px);
	padding: 28px 28px 22px;
	box-shadow: 0 4px 18px rgba(2, 28, 30, 0.07);
	margin-bottom: 30px;
}
.sb-ortsseite-info--anreise .sb-ortsseite-anreise-titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 14px;
	font: 800 17px/1.3 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-info--anreise .sb-ortsseite-anreise-titel ~ .sb-ortsseite-anreise-titel {
	margin-top: 26px;
}
.sb-ortsseite-anreise-titel-icon {
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	padding: 5px;
	border-radius: 50%;
	color: var(--sb-weiss, #ffffff);
	background: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-anreise-strecke {
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 0 0 8px;
	padding: 38px 0 0;
	position: relative;
}
.sb-ortsseite-anreise-strecke > li {
	margin: 0;
	padding: 0;
}
.sb-ortsseite-anreise-strecke > li::before,
.sb-ortsseite-anreise-liste > li::before {
	content: none;
}
.sb-ortsseite-anreise-station {
	flex: 0 0 auto;
	width: 140px;
	text-align: center;
	position: relative;
	z-index: 2;
}
.sb-ortsseite-anreise-punkt {
	display: block;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sb-weiss, #ffffff);
	border: 5px solid var(--sb-petrol-700, #004445);
	margin: 0 auto 8px;
}
.sb-ortsseite-anreise-station--ziel .sb-ortsseite-anreise-punkt {
	width: 28px;
	height: 28px;
	margin-top: -3px;
	background: var(--sb-gelb, #e5de00);
	border-color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-station--tor .sb-ortsseite-anreise-punkt {
	border-color: var(--sb-orange, #dd9933);
}
.sb-ortsseite-anreise-station b {
	display: block;
	font: 700 15px/1.25 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-station small {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt {
	flex: 1;
	position: relative;
	min-width: 80px;
	padding-top: 2px;
}
.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt::before {
	content: "";
	position: absolute;
	left: -60px;
	right: -60px;
	top: 10px;
	border-top: 4px solid var(--sb-petrol-700, #004445);
	z-index: 1;
}
.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt--piste::before {
	border-top-style: dashed;
	border-color: var(--sb-orange, #dd9933);
}
.sb-ortsseite-anreise-abschnitt span {
	position: relative;
	z-index: 3;
	display: block;
	width: max-content;
	max-width: 150px;
	margin: -6px auto 0;
	padding: 2px 8px;
	text-align: center;
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sb-petrol-700, #004445);
	transform: translateY(-36px);
}
.sb-ortsseite-anreise-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 22px 0 6px;
	padding: 0;
}
.sb-ortsseite-anreise-liste > li {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: var(--sb-radius-s, 12px);
	background: var(--sb-grau-50, #faf9f6);
	font-size: 14px;
	line-height: 1.4;
}
.sb-ortsseite-anreise-liste b {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-liste > li > span:not(.sb-ortsseite-anreise-richtung) {
	display: block;
}
.sb-ortsseite-anreise-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--sb-orange, #dd9933);
}
.sb-ortsseite-anreise-richtung {
	display: inline-block;
	margin-bottom: 4px;
	font: 700 11px/1 var(--sb-schrift-titel, 'Montserrat', sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-anreise-knopf {
	display: block;
	margin: 4px auto 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sb-petrol-700, #004445);
	font: 600 13px var(--sb-schrift-text, 'Source Sans 3', sans-serif);
	text-decoration: underline;
	cursor: pointer;
}
.sb-ortsseite-anreise-liste .sb-ortsseite-anreise-knopf {
	margin-left: 0;
}
.sb-ortsseite-anreise-knopf:focus-visible {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00);
	border-radius: 4px;
}
/* Ohne Skript tun die Knoepfe nichts, deshalb erst mit Skript sichtbar */
.sb-ortsseite-anreise:not(.sb-ortsseite-anreise--js) .sb-ortsseite-anreise-knopf {
	display: none;
}
.sb-ortsseite-anreise-faecher {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 6px 0 4px;
}
.sb-ortsseite-anreise-faecher text {
	font-family: var(--sb-schrift-text, 'Source Sans 3', sans-serif);
}
.sb-ortsseite-anreise-hub { fill: var(--sb-petrol-700, #004445); stroke: var(--sb-mint, #77c49b); stroke-width: 5; }
.sb-ortsseite-anreise-hub-flieger { fill: var(--sb-weiss, #ffffff); }
.sb-ortsseite-anreise-hub-name { font-size: 17px; font-weight: 700; fill: var(--sb-petrol-900, #021c1e); }
.sb-ortsseite-anreise-bogen { fill: none; stroke-width: 3; stroke-dasharray: 7 6; }
.sb-ortsseite-anreise-strip { fill: var(--sb-weiss, #ffffff); stroke-width: 4; }
.sb-ortsseite-anreise-strip-name { font-size: 17px; font-weight: 700; fill: var(--sb-petrol-900, #021c1e); }
.sb-ortsseite-anreise-strip-text { font-size: 13px; fill: var(--sb-text-2, #4b5563); }
.sb-ortsseite-anreise-strip-region { font-weight: 700; letter-spacing: 1px; }
.sb-ortsseite-anreise-farbe--0 { stroke: var(--sb-mint, #77c49b); }
.sb-ortsseite-anreise-farbe--1 { stroke: var(--sb-ortsseite-regen); }
.sb-ortsseite-anreise-farbe--2 { stroke: var(--sb-orange, #dd9933); }
.sb-ortsseite-anreise-farbe--3 { stroke: #c9b800; }
.sb-ortsseite-anreise-farbe--4 { stroke: var(--sb-petrol-700, #004445); }
.sb-ortsseite-anreise-farbe--5 { stroke: #d9785a; }
/* Schrift der Region in der dunkleren Stufe derselben Farbe (lesbar auf Weiss) */
.sb-ortsseite-anreise-strip-region { stroke: none; }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--0 { fill: #2f7a55; }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--1 { fill: var(--sb-ortsseite-regen); }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--2 { fill: #a86a12; }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--3 { fill: #8a7d00; }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--4 { fill: var(--sb-petrol-700, #004445); }
.sb-ortsseite-anreise-strip-region.sb-ortsseite-anreise-farbe--5 { fill: #a8462a; }
.sb-ortsseite-anreise-knopf--svg {
	cursor: pointer;
	outline: none;
}
.sb-ortsseite-anreise-knopf--svg text {
	font-size: 13px;
	font-weight: 600;
	fill: var(--sb-petrol-700, #004445);
	text-decoration: underline;
}
.sb-ortsseite-anreise-knopf--svg:focus-visible text {
	fill: var(--sb-petrol-900, #021c1e);
	stroke: var(--sb-gelb, #e5de00);
	stroke-width: 0.6px;
}
.sb-ortsseite-anreise-hubzeile {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 6px;
}
.sb-ortsseite-anreise-hubzeile .sb-ortsseite-anreise-punkt {
	width: 26px;
	height: 26px;
	margin: 0;
	background: var(--sb-petrol-700, #004445);
	border: 4px solid var(--sb-mint, #77c49b);
}
.sb-ortsseite-anreise-hubzeile b {
	font-family: var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-hubzeile span:last-child {
	font-size: 14px;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-anreise-fussnoten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	font-size: 13.5px;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-anreise-fussnoten > li {
	margin: 0;
	padding: 0;
}
.sb-ortsseite-anreise-fussnoten > li::before {
	content: "* ";
	font-weight: 700;
	color: var(--sb-orange, #dd9933);
}
.sb-ortsseite-anreise-text {
	background: var(--sb-weiss, #ffffff);
	border: 1px solid var(--sb-grau-200, #e5e7eb);
	border-radius: var(--sb-radius-s, 12px);
	margin-bottom: 10px;
}
.sb-ortsseite-anreise-text > summary {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 20px;
	list-style: none;
	cursor: pointer;
	font: 700 17px var(--sb-schrift-titel, 'Montserrat', sans-serif);
	color: var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-text > summary::-webkit-details-marker {
	display: none;
}
.sb-ortsseite-anreise-text > summary::after {
	content: "+";
	font-size: 24px;
	line-height: 1;
	color: var(--sb-petrol-700, #004445);
}
.sb-ortsseite-anreise-text[open] > summary::after {
	content: "–";
}
.sb-ortsseite-anreise-text > summary:focus-visible {
	box-shadow: 0 0 0 3px var(--sb-gelb, #e5de00), 0 0 0 5px var(--sb-petrol-900, #021c1e);
}
.sb-ortsseite-anreise-text > .sbOrtAnreiseZeile {
	padding: 0 20px 16px;
}
/* Hervorhebung des Punkts auf der Parkkarte (Nadel des Moduls ortskarten, nur auf dieser Seite) */
.sb-ortskarten-nadel.sb-ortsseite-puls {
	animation: sb-ortsseite-puls 0.8s ease-in-out 3;
	z-index: 5;
}
@keyframes sb-ortsseite-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(229, 222, 0, 0.9); }
	50% { box-shadow: 0 0 0 12px rgba(229, 222, 0, 0); }
}

@media (max-width: 980px) {
	.sb-ortsseite-rz {
		grid-template-columns: minmax(0, 1fr);
	}
	.sb-ortsseite-rz-grafik {
		max-width: 520px;
	}
}
@media (max-width: 800px) {
	.sb-ortsseite-rz-perioden {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (min-width: 761px) {
	.sb-ortsseite-anreise-liste--airstrips,
	.sb-ortsseite-anreise-hubzeile {
		display: none;
	}
}
@media (max-width: 760px) {
	.sb-ortsseite-anreise {
		padding: 20px 16px 16px;
	}
	.sb-ortsseite-anreise-faecher {
		display: none;
	}
	.sb-ortsseite-anreise-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.sb-ortsseite-anreise-liste > li {
		padding: 8px 10px;
		font-size: 13.5px;
		overflow-wrap: anywhere;
	}
	.sb-ortsseite-anreise-strecke {
		flex-direction: column;
		align-items: stretch;
		padding-top: 0;
	}
	.sb-ortsseite-anreise-station {
		width: auto;
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 10px;
		text-align: left;
	}
	.sb-ortsseite-anreise-station .sb-ortsseite-anreise-punkt {
		margin: 0;
	}
	.sb-ortsseite-anreise-station .sb-ortsseite-anreise-knopf {
		margin-left: 0;
	}
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt {
		min-height: 46px;
		margin-left: 9px;
		border-left: 4px solid var(--sb-petrol-700, #004445);
	}
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt--piste {
		border-left-style: dashed;
		border-left-color: var(--sb-orange, #dd9933);
	}
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt::before {
		display: none;
	}
	.sb-ortsseite-anreise-abschnitt span {
		transform: none;
		margin: 10px 0 10px 16px;
		max-width: none;
		width: auto;
		display: inline-block;
	}
}
@media (max-width: 499px) {
	.sb-ortsseite-rz-rad,
	.sb-ortsseite-rz-legende .sb-ortsseite-rz-nur-rad {
		display: none;
	}
	.sb-ortsseite-rz-leiste-wrap {
		display: block;
	}
	.sb-ortsseite-rz-checker {
		padding: 20px 16px 18px;
	}
	.sb-ortsseite-rz-optionen {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sb-ortskarten-nadel.sb-ortsseite-puls,
	.sb-ortsseite-rz-monat,
	.sb-ortsseite-rz-balken i {
		animation: none;
		transition: none;
	}
}

/* ---------- NP19 (NP-AK, 10.10.2026): Anreisekarte oben in der Anreise ---------- */
/* Statisches Bild, Antippen oeffnet die 2400-px-Datei in der Swipebox-Gruppe sb-ort-anreise. */
.sb-ortsseite-anreisekarte {
	max-width: 1000px;
	margin: 0 0 30px;
}
.sb-ortsseite-anreisekarte-link {
	display: block;
	overflow: hidden;
	border-radius: var(--sb-radius, 20px);
	box-shadow: 0 4px 18px rgba(2, 28, 30, 0.07);
	background: var(--sb-weiss, #ffffff);
	cursor: zoom-in;
}
.sb-ortsseite-anreisekarte-link:focus-visible {
	outline: 3px solid var(--sb-petrol-700, #004445);
	outline-offset: 3px;
}
.sb-ortsseite-anreisekarte-bild {
	display: block;
	width: 100%;
	height: auto;
}
.sb-ortsseite-anreisekarte figcaption {
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--sb-text-2, #4b5563);
}
.sb-ortsseite-anreisekarte-lizenz {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
}

/* ---------- R2 (15.10.2026): Revision nach den elf Spuren der Nationalpark-Spur ----------
 * C3: Hinweis eines Abschnitts steht klein unter der Linie in der Spalte des Abschnitts statt in der Blase
 *     (lange Hinweise deckten bei 768 bis 1152 px Orts- und Tornamen). C4: ohne Blase rueckt er unter die Linie.
 * O6: Warnkasten oben (Baustein .sb-basis-warnkasten aus basis.css); Linkfarbe hier, weil das Theme
 *     a-Farben in [class*="sbOrt"] setzt (Stolperstein Ortskarten, Download-Knopf).
 * Rueckbau: Block loeschen. */
.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt > .sb-ortsseite-anreise-abschnitt-hinweis {
	display: block;
	margin: 6px 4px 0;
	font-size: 12.5px;
	line-height: 1.35;
	text-align: center;
	color: var(--sb-text-2, #4b5563);
	overflow-wrap: anywhere;
	hyphens: auto;
}
.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt > .sb-ortsseite-anreise-abschnitt-hinweis:first-child {
	margin-top: 22px;
}
.sbOrtInhalt .sb-ortsseite-warnung .sb-basis-warnkasten-quelle a {
	color: var(--sb-petrol-700, #004445);
}
@media (max-width: 760px) {
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt > .sb-ortsseite-anreise-abschnitt-hinweis,
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt > .sb-ortsseite-anreise-abschnitt-hinweis:first-child {
		margin: 4px 0 10px 16px;
		text-align: left;
	}
	.sb-ortsseite-anreise-strecke > .sb-ortsseite-anreise-abschnitt > .sb-ortsseite-anreise-abschnitt-hinweis:first-child {
		margin-top: 10px;
	}
	.sb-basis-warnkasten.sb-ortsseite-warnung {
		margin-bottom: 20px;
		padding: 14px 16px 14px 14px;
		font-size: 15px;
	}
}
/* R2 (C5): Der Hero-Titel ragte bei 768 bis 991 px (und bei langen Namen wie Masai Mara bis 1199 px) bis zu 132 px
   aus seiner Spalte unter das Bild, weil „Nationalpark" in Titelgroesse breiter ist als die halbe Spalte.
   Silbentrennung (html lang="de") und ab 768 px eine Schrift, die mit der Spaltenbreite waechst. Gemessen mit
   code-bauplan/v0.31.26-r2/bau/messung.js. */
.sb-ortsseite-hero .sbHeroTextWrap h1 {
	overflow-wrap: break-word;
	hyphens: auto;
}
@media (min-width: 768px) and (max-width: 1199px) {
	.sb-ortsseite-hero .sbHeroTextWrap h1 {
		font-size: clamp(32px, 4.4vw, 48px);
		line-height: 1.12;
	}
}
/* R2 (C10): lange Zahlen im Zahlenband (mehr als 7 Zeichen, Klasse aus sb_ortsseite_zahlenband()) duerfen
   umbrechen und sind kleiner; vorher liefen sie mit white-space: nowrap in die Nachbarspalte. */
.sb-ortsseite-zahl.sb-ortsseite-zahl--lang dd {
	white-space: normal;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: 1.1;
}