/*
 * Bahn-Detail (v2 single-job_listing.php <style>-Blöcke + ksb-redesign.css «Bahn-Detail»).
 */

@layer pages {
	html {
		scroll-padding-top: 120px;
	}

	/* ── Titel ───────────────────────────────────────────────────────── */
	.bahn-title-block {
		padding: 40px 0 var(--ksb-space-6);
		background: var(--ksb-paper);
	}

	.bahn-redaktion,
	.bahn-status {
		margin: 0 0 20px;
	}

	.bahn-status {
		margin-top: 20px;
		max-width: var(--ksb-measure);
	}

	.region-line {
		margin: 0 0 var(--ksb-space-3);
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--ksb-ls-eyebrow);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.bahn-title-block .page-h1 {
		max-width: 720px;
	}

	.title-badges {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ksb-space-2);
		margin: 20px 0 0;
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: var(--ksb-space-2) var(--ksb-space-3);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--ksb-ls-caps);
		text-transform: uppercase;
		border-radius: var(--ksb-radius-sm);
	}

	.badge--category {
		color: var(--ksb-ink);
		background: var(--ksb-yellow-pale);
		border: 1px solid var(--ksb-line);
	}

	.title-badges .ksb-badge {
		padding: var(--ksb-space-2) var(--ksb-space-3);
	}

	.action-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ksb-space-2);
		margin-top: 28px;
		padding-top: var(--ksb-space-5);
		border-top: 1px solid var(--ksb-line);
	}

	.action-toolbar .spacer {
		flex: 1 1 0;
		min-width: var(--ksb-space-3);
	}

	.action-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--ksb-space-2);
		padding: 10px 14px;
		font-size: var(--ksb-fs-ui);
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		color: var(--ksb-ink-soft);
		background: transparent;
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-sm);
		transition: background var(--ksb-transition), color var(--ksb-transition), border-color var(--ksb-transition);
	}

	.action-btn:hover {
		color: var(--ksb-ink);
		background: var(--ksb-paper);
		border-color: var(--ksb-ink-soft);
	}

	.action-btn.is-saved {
		color: var(--ksb-green);
		background: rgb(61 107 64 / .06);
		border-color: var(--ksb-green);
	}

	.action-btn.is-saved .icon {
		fill: currentColor;
	}

	.action-btn.admin {
		color: var(--ksb-gold);
		border-style: dashed;
	}

	.action-btn.admin:hover {
		color: var(--ksb-ink);
		border-style: solid;
	}

	.ksb-pate-badge {
		margin: var(--ksb-space-4) 0 0;
		font-size: var(--ksb-fs-sm);
		color: var(--ksb-ink-soft);
	}

	.ksb-pate-badge strong {
		color: var(--ksb-ink);
	}

	/* ── Galerie ─────────────────────────────────────────────────────── */
	.bahn-gallery {
		padding-bottom: var(--ksb-space-8);
		background: var(--ksb-paper);
	}

	.gallery-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: var(--ksb-space-2);
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--ksb-radius-card);
	}

	.gallery-hero {
		position: relative;
		grid-row: 1 / 3;
		background: var(--ksb-cream);
	}

	.gallery-thumb {
		overflow: hidden;
		background: var(--ksb-cream);
	}

	.gallery-open {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		cursor: zoom-in;
	}

	.gallery-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.gallery-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: repeating-linear-gradient(135deg, var(--ksb-stripe-a) 0 14px, var(--ksb-stripe-b) 14px 28px);
	}

	.gallery-placeholder span {
		padding: 6px var(--ksb-space-3);
		font-size: var(--ksb-fs-xs);
		font-weight: 500;
		line-height: 1;
		color: var(--ksb-gold);
		background: rgb(255 253 247 / .85);
		border-radius: 3px;
	}

	.gallery-action-btn {
		position: absolute;
		right: 14px;
		bottom: 14px;
		display: inline-flex;
		align-items: center;
		gap: var(--ksb-space-2);
		padding: 9px 14px;
		font-size: var(--ksb-fs-sm);
		font-weight: 600;
		line-height: 1;
		color: var(--ksb-ink);
		background: rgb(255 253 247 / .95);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-sm);
		transition: background var(--ksb-transition), border-color var(--ksb-transition);
	}

	.gallery-action-btn:hover {
		background: var(--ksb-paper);
		border-color: var(--ksb-ink-soft);
	}

	@media (max-width: 900px) {
		.gallery-grid {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			aspect-ratio: auto;
		}

		.gallery-hero {
			grid-row: 1;
			grid-column: 1 / 3;
			aspect-ratio: 16 / 9;
		}

		.gallery-thumb {
			aspect-ratio: 4 / 3;
		}
	}

	@media (max-width: 600px) {
		.gallery-grid {
			grid-template-columns: 1fr;
		}

		.gallery-hero {
			grid-column: 1;
		}

		.gallery-thumb {
			display: none;
		}
	}

	/* ── Lightbox (v2 #ksb-gallery-overlay, als <dialog>) ───────────── */
	.ksb-lightbox {
		width: 100vw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: var(--ksb-space-5);
		color: var(--ksb-on-dark-muted);
		background: var(--ksb-overlay);
		border: 0;
	}

	.ksb-lightbox[open] {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ksb-lightbox::backdrop {
		background: var(--ksb-overlay);
	}

	.ksb-lightbox__bild {
		max-width: 100%;
		max-height: calc(100dvh - 140px);
		object-fit: contain;
		border-radius: var(--ksb-radius-sm);
		box-shadow: 0 8px 40px rgb(0 0 0 / .6);
	}

	.ksb-lightbox__leiste {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px;
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		background: rgb(20 18 12 / .7);
	}

	.ksb-lightbox__credit {
		margin: var(--ksb-space-3) 0 0;
		font-size: var(--ksb-fs-xs);
	}

	.ksb-lightbox__knopf {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: rgb(255 253 247 / .9);
		background: rgb(255 253 247 / .12);
		border: 1px solid rgb(255 253 247 / .2);
		border-radius: var(--ksb-radius-sm);
		transition: background var(--ksb-transition);
	}

	.ksb-lightbox__knopf:hover {
		background: rgb(255 253 247 / .22);
	}

	.ksb-lightbox__schliessen {
		width: 44px;
		height: 44px;
	}

	.ksb-lightbox__nav {
		position: fixed;
		top: 50%;
		width: 48px;
		height: 56px;
		font-size: 28px;
		line-height: 1;
		transform: translateY(-50%);
	}

	.ksb-lightbox__nav--zurueck {
		left: var(--ksb-space-3);
	}

	.ksb-lightbox__nav--weiter {
		right: var(--ksb-space-3);
	}

	html.ist-lightbox-offen {
		overflow: hidden;
	}

	/* ── Unternavigation ─────────────────────────────────────────────── */
	.bahn-sub-nav {
		background: var(--ksb-paper);
		border-top: 1px solid var(--ksb-line);
		border-bottom: 1px solid var(--ksb-line);
	}

	.bahn-sub-nav__inner {
		display: flex;
		align-items: center;
		max-width: var(--ksb-container);
		margin: 0 auto;
		padding: 0 var(--ksb-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bahn-sub-nav a {
		padding: var(--ksb-space-4) 18px;
		font-size: var(--ksb-fs-ui);
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		color: var(--ksb-ink-soft);
		border-bottom: 2px solid transparent;
		transition: color var(--ksb-transition), border-color var(--ksb-transition);
	}

	.bahn-sub-nav a:hover {
		color: var(--ksb-ink);
	}

	.bahn-sub-nav a.active {
		color: var(--ksb-green);
		border-bottom-color: var(--ksb-green);
	}

	/* ── Beschreibung + Daten ────────────────────────────────────────── */
	.bahn-detail-section {
		padding: var(--ksb-space-8) 0;
		background: var(--ksb-paper);
	}

	.bahn-detail-grid {
		display: grid;
		grid-template-columns: 1.55fr 1fr;
		gap: var(--ksb-space-9);
		align-items: start;
	}

	.bahn-prose {
		font-size: var(--ksb-fs-base);
		line-height: 1.7;
		color: var(--ksb-ink-soft);
	}

	.bahn-prose .eyebrow {
		margin-bottom: var(--ksb-space-3);
	}

	.bahn-prose h2 {
		margin: 0 0 20px;
		font-size: var(--ksb-fs-h2);
		line-height: var(--ksb-lh-display);
		letter-spacing: var(--ksb-ls-display);
	}

	.bahn-prose p {
		margin: 0 0 18px;
	}

	.bahn-prose a {
		font-weight: 500;
		color: var(--ksb-green);
	}

	.bahn-prose strong {
		font-weight: 500;
		color: var(--ksb-ink);
	}

	.bahn-prose .prose-lede {
		margin-bottom: 28px;
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-lg);
		font-weight: 400;
		line-height: 1.4;
		color: var(--ksb-ink);
	}

	.bahn-prose h3 {
		margin: 36px 0 10px;
		font-size: clamp(20px, 2vw, 24px);
		letter-spacing: var(--ksb-ls-display);
		font-weight: 400;
	}

	.besucher-info {
		display: grid;
		gap: var(--ksb-space-3);
		margin: 0;
	}

	.besucher-info__gruppe {
		display: grid;
		grid-template-columns: 110px 1fr;
		gap: var(--ksb-space-3);
		align-items: baseline;
	}

	.besucher-info dt {
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		letter-spacing: var(--ksb-ls-caps);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.besucher-info dd {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
	}

	.info-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 10px;
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		line-height: 1.2;
		color: var(--ksb-ink);
		background: var(--ksb-cream);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-pill);
	}

	.info-chip::before {
		content: "";
		width: 6px;
		height: 6px;
		background: var(--ksb-green);
		border-radius: 50%;
	}

	.bahn-data-card {
		position: sticky;
		top: 120px;
		padding: 28px 28px var(--ksb-space-5);
		background: var(--ksb-cream);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-card);
	}

	.bahn-data-card__title {
		margin: 0 0 18px;
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--ksb-ls-eyebrow);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.bahn-data-list {
		margin: 0;
	}

	.bahn-data-list > div {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ksb-space-4);
		padding: 13px 0;
		border-bottom: 1px solid var(--ksb-line);
	}

	.bahn-data-list > div:last-child {
		border-bottom: none;
	}

	.bahn-data-list .k {
		flex: 0 0 auto;
		font-size: var(--ksb-fs-ui);
		font-weight: 500;
		line-height: 1.3;
		color: var(--ksb-ink-soft);
	}

	.bahn-data-list .v {
		margin: 0;
		font-size: var(--ksb-fs-ui);
		font-weight: 500;
		line-height: 1.3;
		text-align: right;
		font-variant-numeric: tabular-nums;
		color: var(--ksb-ink);
	}

	.bahn-data-list .v a {
		color: var(--ksb-green);
	}

	/* F050: weitere bestätigte Preise/Hinweise unter dem Hauptpreis. */
	.bahn-data-list .v__zusatz {
		display: block;
		margin-top: var(--ksb-space-1);
		font-size: var(--ksb-fs-sm);
		font-weight: 400;
		color: var(--ksb-ink-soft);
	}

	.bahn-data-card__leer {
		margin: 0;
		font-size: var(--ksb-fs-ui);
		color: var(--ksb-ink-soft);
	}

	.bahn-data-card__cta {
		display: flex;
		flex-direction: column;
		gap: var(--ksb-space-2);
		margin-top: 22px;
	}

	.bahn-data-card__claim {
		margin-top: var(--ksb-space-4);
		padding-top: 14px;
		text-align: center;
		border-top: 1px solid var(--ksb-line);
	}

	.bahn-data-card__claim a {
		font-size: var(--ksb-fs-xs);
		text-decoration: none;
		color: var(--ksb-ink-soft);
	}

	.bahn-data-card__claim a:hover {
		text-decoration: underline;
		color: var(--ksb-ink);
	}

	@media (max-width: 1000px) {
		.bahn-detail-grid {
			grid-template-columns: 1fr;
			gap: var(--ksb-space-7);
		}

		.bahn-data-card {
			position: static;
		}
	}

	/* ── Touren (dunkel) ─────────────────────────────────────────────── */
	.bahn-activities-section {
		position: relative;
		padding: 96px 0;
		overflow: hidden;
		color: var(--ksb-paper);
		background: var(--ksb-green-deep);
	}

	.bahn-activities-section::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(ellipse 60% 50% at 20% 0%, rgb(255 187 0 / .16), transparent 70%),
			radial-gradient(ellipse 50% 40% at 90% 100%, rgb(61 107 64 / .22), transparent 70%);
		pointer-events: none;
	}

	.bahn-activities-section > .container {
		position: relative;
		z-index: 1;
	}

	.bahn-activities-section .eyebrow {
		margin-bottom: var(--ksb-space-3);
		color: var(--ksb-yellow);
	}

	.bahn-activities-section .page-h2 {
		margin-bottom: 14px;
		color: var(--ksb-paper);
	}

	.bahn-activities-section .lede {
		max-width: 620px;
		margin-bottom: 56px;
		color: rgb(255 253 247 / .78);
	}

	.activities-no-tours {
		font-size: 15px;
		font-style: italic;
		color: var(--ksb-on-dark-muted);
	}

	.bahn-activities-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.bahn-act-card {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		background: rgb(255 253 247 / .04);
		border: 1px solid var(--ksb-on-dark-hover);
		border-radius: var(--ksb-radius-card);
		transition: background .18s, border-color .18s, transform .18s;
	}

	.bahn-act-card:hover {
		transform: translateY(-2px);
		background: rgb(255 253 247 / .07);
		border-color: rgb(255 253 247 / .22);
	}

	.bahn-act-card__media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: rgb(255 253 247 / .04);
	}

	.bahn-act-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bahn-act-card__season {
		position: absolute;
		top: var(--ksb-space-3);
		left: var(--ksb-space-3);
		padding: 6px 9px;
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--ksb-ls-caps);
		text-transform: uppercase;
		color: var(--ksb-ink);
		background: var(--ksb-yellow);
		border-radius: var(--ksb-radius-xs);
	}

	.bahn-act-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--ksb-space-2);
		padding: 20px 22px 22px;
	}

	.bahn-act-card__title {
		margin: 0;
		font-size: 20px;
		font-weight: 400;
		color: var(--ksb-paper);
	}

	.bahn-act-card__stats {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		margin-top: auto;
		padding-top: var(--ksb-space-3);
		font-size: var(--ksb-fs-xs);
		font-weight: 500;
		color: var(--ksb-on-dark-muted);
		border-top: 1px solid rgb(255 253 247 / .10);
	}

	.bahn-act-card__stats strong {
		font-weight: 500;
		color: var(--ksb-paper);
	}

	.bahn-section-footer {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ksb-space-3);
		margin-top: var(--ksb-space-6);
	}

	@media (max-width: 900px) {
		.bahn-activities-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ── Teaser gesperrter Abschnitte ────────────────────────────────── */
	.detail-section--teaser {
		padding: var(--ksb-space-9) 0;
		background: var(--ksb-cream);
		border-top: 1px solid var(--ksb-line);
	}

	.detail-section--teaser-hell {
		background: var(--ksb-paper);
	}

	.detail-section--teaser .eyebrow {
		margin-bottom: 10px;
	}

	.lede--teaser {
		max-width: 560px;
		margin: var(--ksb-space-4) 0 28px;
	}

	.lede--section {
		max-width: 620px;
		margin: var(--ksb-space-4) 0 var(--ksb-space-7);
	}

	/* ── Orte ────────────────────────────────────────────────────────── */
	.bahn-einkehr-section {
		padding: 96px 0;
		background: var(--ksb-paper);
	}

	.bahn-einkehr-section .eyebrow {
		margin-bottom: var(--ksb-space-3);
	}

	/* ── Mini-Karte ──────────────────────────────────────────────────── */
	.bahn-map-section {
		background: var(--ksb-cream);
	}

	.bahn-map-wrap {
		position: relative;
		height: 420px;
	}

	.bahn-mini-map,
	.bahn-map-placeholder {
		width: 100%;
		height: 100%;
	}

	.bahn-map-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background:
			radial-gradient(circle at 30% 35%, rgb(61 107 64 / .18), transparent 35%),
			radial-gradient(circle at 70% 70%, rgb(255 187 0 / .15), transparent 40%),
			repeating-linear-gradient(0deg, transparent 0 27px, rgb(61 107 64 / .18) 27px 28px),
			repeating-linear-gradient(90deg, transparent 0 27px, rgb(61 107 64 / .18) 27px 28px),
			var(--ksb-yellow-pale);
	}

	.bahn-map-placeholder span {
		padding: 6px var(--ksb-space-3);
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		line-height: 1;
		color: var(--ksb-gold);
		background: rgb(255 253 247 / .85);
		border-radius: var(--ksb-radius-sm);
	}

	.map-caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 800;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--ksb-space-3);
		padding: 10px 20px;
		font-size: var(--ksb-fs-sm);
		color: var(--ksb-ink-soft);
		background: rgb(255 253 247 / .92);
		border-top: 1px solid rgb(0 0 0 / .08);
		backdrop-filter: blur(4px);
	}

	.map-caption a {
		font-weight: 500;
		text-decoration: none;
		color: var(--ksb-green);
	}

	.map-caption a:hover {
		text-decoration: underline;
		color: var(--ksb-green-deep);
	}

	/* ── Ähnliche Bahnen ─────────────────────────────────────────────── */
	.bahn-similar-section {
		padding: 96px 0;
		background: var(--ksb-cream);
	}

	.bahn-similar-section .eyebrow {
		margin-bottom: var(--ksb-space-3);
	}

	.empty-state {
		font-style: italic;
		color: var(--ksb-ink-soft);
	}

	.empty-state a {
		color: var(--ksb-green);
	}

	/* ── Foto-Hinweis ────────────────────────────────────────────────── */
	.foto-spende {
		padding: var(--ksb-space-7) 0;
		background: var(--ksb-paper);
		border-top: 1px solid var(--ksb-line);
	}

	.foto-spende__box {
		max-width: 600px;
	}

	.foto-spende__titel {
		margin: var(--ksb-space-2) 0;
		font-size: var(--ksb-fs-lg);
	}

	.foto-spende p {
		color: var(--ksb-ink-soft);
	}

	@media (max-width: 900px) {
		.bahn-similar-section {
			padding: var(--ksb-space-8) 0;
		}
	}

	@media (max-width: 600px) {
		.bahn-title-block {
			padding: 28px 0 20px;
		}

		.bahn-title-block .page-h1 {
			max-width: 100%;
			font-size: clamp(26px, 7vw, 36px);
			overflow-wrap: anywhere;
		}

		.action-toolbar {
			gap: 6px;
			margin-top: 18px;
			padding-top: var(--ksb-space-4);
		}

		.action-btn {
			padding: 9px 10px;
			font-size: var(--ksb-fs-sm);
		}

		.bahn-sub-nav a {
			padding: 14px var(--ksb-space-3);
			font-size: var(--ksb-fs-sm);
		}

		.bahn-data-card {
			padding: 20px 18px var(--ksb-space-4);
		}

		.bahn-map-wrap {
			height: 300px;
		}

		.besucher-info__gruppe {
			grid-template-columns: 1fr;
			gap: 6px;
		}

		.bahn-similar-section,
		.bahn-einkehr-section {
			padding: var(--ksb-space-7) 0;
		}

		.bahn-activities-section {
			padding: 56px 0;
		}
	}

	/* ── Druck ───────────────────────────────────────────────────────── */
	@media print {
		.site-header,
		.site-footer,
		.breadcrumb,
		.action-toolbar,
		.bahn-sub-nav,
		.bahn-map-section,
		.bahn-similar-section,
		.detail-section--teaser,
		.foto-spende,
		.gallery-action-btn,
		.bahn-data-card__cta,
		.bahn-data-card__claim {
			display: none;
		}

		.bahn-detail-grid {
			grid-template-columns: 1fr;
		}

		.bahn-data-card {
			position: static;
		}
	}
}