/* =====================================================================
   FlyNRoam — Main stylesheet
   Bone & Petrol palette · Fraunces / Spectral / Inter
   ===================================================================== */

:root {
	--bg:           #efe7d6; /* Bone */
	--paper:        #f7f1e3; /* Paper */
	--ink:          #102a2f; /* Ink */
	--ink-soft:     #2c4046;
	--petrol-deep:  #14464f;
	--petrol:       #1e6b78;
	--moss:         #5a6b48;
	--sienna:       #b88858;
	--stone:        #6b6452;
	--sand-line:    #c9b690;
	--shadow-soft:  0 8px 28px rgba(16, 42, 47, 0.08);

	--font-serif:   'Fraunces', 'Spectral', Georgia, 'Times New Roman', serif;
	--font-text:    'Spectral', Georgia, 'Times New Roman', serif;
	--font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--container:    1200px;
	--container-narrow: 720px;
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol-deep); text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--sienna); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3.4vw, 42px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
h4 { font-size: 18px; }

p { margin: 0 0 1.1em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container.narrow { max-width: var(--container-narrow); }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Header — two states (transparent over hero, solid on scroll)
   ===================================================================== */

.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 32px;
	transition: padding 220ms ease;
	color: var(--ink);
	background: var(--paper);
	border-bottom: 0.5px solid var(--sand-line);
}
/* Push the header below the WP admin bar when logged in */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
/* Beim Scrollen kompakter, sonst gleiche Optik (Paper-Hintergrund mit Sand-Linie) */
.site-header.is-scrolled {
	padding: 12px 32px;
}

.site-logo {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: inherit;
}
.site-header.is-scrolled .site-logo { font-size: 18px; }

.site-nav { font-family: var(--font-sans); }
.site-nav ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; gap: 28px;
}
.site-nav a {
	color: inherit;
	font-size: 13px;
	letter-spacing: 0.04em;
	opacity: 0.88;
	padding: 4px 0;
	border-bottom: 0.5px solid transparent;
	transition: opacity 160ms ease, border-color 160ms ease;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
	opacity: 1;
	border-bottom-color: currentColor;
}

.language-switcher {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 6px;
	color: inherit;
}
.language-switcher a {
	color: inherit;
	opacity: 0.55;
}
.language-switcher a:hover { opacity: 0.85; }
.language-switcher a.active {
	opacity: 1;
	font-weight: 500;
}
.language-switcher .sep { opacity: 0.4; }

/* Header tools — search + language switcher */
.header-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	color: inherit;
}

.site-search-toggle {
	background: transparent;
	border: 0;
	padding: 6px;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 160ms ease, color 160ms ease;
}
.site-search-toggle:hover { background: rgba(16, 42, 47, 0.06); }
.site-search-toggle svg { width: 18px; height: 18px; }

.site-search-form {
	display: none;
	align-items: center;
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 999px;
	padding: 4px 4px 4px 14px;
	box-shadow: var(--shadow-soft);
	min-width: 280px;
}
.site-search-form.is-open {
	display: inline-flex;
}
.site-search-form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 6px 8px;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
	min-width: 0;
}
.site-search-form input[type="search"]::placeholder {
	color: var(--ink-soft);
	opacity: 0.6;
}
.site-search-submit {
	background: var(--petrol-deep);
	color: var(--paper);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease;
}
.site-search-submit:hover { background: var(--petrol); }
.site-search-submit svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
	.site-search-form {
		position: absolute;
		top: 100%;
		right: 12px;
		left: 12px;
		min-width: 0;
		margin-top: 8px;
	}
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Hero — front page
   ===================================================================== */

.hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: var(--bg);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.hero-map {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
}
.hero-map svg {
	width: 100%; height: 100%; display: block;
}
.hero-text {
	position: relative; z-index: 2;
	text-align: center;
	color: var(--ink);
	pointer-events: none;
	padding: 0 32px;
}
.hero-text h1 {
	font-family: var(--font-serif);
	font-size: clamp(56px, 9vw, 128px);
	line-height: 0.95;
	margin: 0 0 14px;
	letter-spacing: -0.015em;
}
.hero-text .hero-sub {
	font-family: var(--font-text);
	font-size: 13px;
	font-style: italic;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--petrol-deep);
	margin: 0;
}
.hero-scroll {
	position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
	font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--ink-soft); opacity: 0.6;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll::after {
	content: ''; width: 1px; height: 32px; background: currentColor;
	animation: heroScrollLine 1.8s ease-in-out infinite;
}

/* Hero soundtrack hint — dezent, fades out after first click */
.hero-soundtrack-hint {
	position: absolute;
	right: 28px;
	bottom: 32px;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-soft);
	opacity: 0;
	pointer-events: none;
	transition: opacity 800ms ease 1200ms; /* fade-in nach 1.2s */
	z-index: 2;
}
.hero-soundtrack-hint.is-hidden {
	opacity: 0;
	transition: opacity 400ms ease;
}
.has-hero .hero-soundtrack-hint:not(.is-hidden) {
	opacity: 0.6;
}
@media (max-width: 600px) {
	.hero-soundtrack-hint {
		right: 22px;
		bottom: 22px;
		font-size: 10px;
	}
}
@keyframes heroScrollLine {
	0%, 100% { transform: scaleY(1); opacity: 0.6; }
	50% { transform: scaleY(0.4); opacity: 1; }
}

/* Hero animation states — continents render immediately, only pins/route/plane animate. */
.hero-map .land { opacity: 0.88; }
.hero-map .grid-line { opacity: 0.22; }
.hero-map .sphere { opacity: 0.55; }
.hero-map .route {
	stroke-dasharray: var(--route-length, 2000);
	stroke-dashoffset: var(--route-length, 2000);
	animation: routeDraw var(--route-duration, 14s) linear 1.4s forwards;
}
@keyframes routeDraw {
	to { stroke-dashoffset: 0; }
}
.hero-map .pin { opacity: 1; transform-origin: center; transform-box: fill-box; }
.hero-map .pin-label { opacity: 1; }
.hero-map .plane {
	opacity: 1;
	offset-rotate: auto;
	animation: planeFly var(--route-duration, 14s) linear 1.4s forwards;
}
@keyframes pinPop {
	0%   { opacity: 0; transform: scale(0); }
	60%  { opacity: 1; transform: scale(1.5); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes planeFly {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}

/* =====================================================================
   Cinematic Flow — alternating sections under hero
   ===================================================================== */

.cinematic-flow {
	background: var(--bg);
	padding: 80px 0 40px;
}
.cinematic-flow .container { max-width: 1200px; }
.flow-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 56px 0;
}
.flow-section + .flow-section { border-top: 0.5px solid var(--sand-line); }
.flow-section.flip > .flow-photo { order: 2; }
.flow-photo {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--paper);
}
.flow-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms ease; }
.flow-section:hover .flow-photo img { transform: scale(1.03); }
.flow-meta {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 14px;
}
.flow-title {
	font-family: var(--font-serif);
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.1;
	margin: 0 0 14px;
	letter-spacing: -0.015em;
}
.flow-excerpt {
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.flow-link {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--petrol-deep);
	border-bottom: 0.5px solid var(--petrol-deep);
	padding-bottom: 2px;
}

/* =====================================================================
   Magazin — asymmetric grid for older entries
   ===================================================================== */

.archive-mag {
	background: var(--bg);
	padding: 60px 0 100px;
}
.archive-mag .container { max-width: 1200px; }
.mag-heading {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 32px;
	text-align: center;
}
.mag-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
.mag-grid-right { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.mag-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.mag-card {
	display: block;
	color: inherit;
}
.mag-card-photo {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--paper);
	margin-bottom: 14px;
}
.mag-card-photo.tall   { aspect-ratio: 3/4; }
.mag-card-photo.wide   { aspect-ratio: 16/9; }
.mag-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.mag-card:hover .mag-card-photo img { transform: scale(1.04); }
.mag-card-meta {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 6px;
}
.mag-card-title {
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
}
.mag-card.is-hero .mag-card-title { font-size: 30px; }

/* =====================================================================
   Single entry
   ===================================================================== */

.single-entry .entry-hero {
	position: relative;
	height: 80vh;
	min-height: 540px;
	overflow: hidden;
	margin-top: 0;
}
.single-entry .entry-hero-image {
	position: absolute; inset: 0;
}
.single-entry .entry-hero-image img {
	width: 100%; height: 100%; object-fit: cover;
}
.single-entry .entry-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,42,47,0.55) 0%, rgba(16,42,47,0.05) 35%, rgba(16,42,47,0.65) 100%);
}
.single-entry .entry-hero-text {
	position: absolute; left: 0; right: 0; bottom: 60px;
	padding: 0 64px;
	color: var(--bg);
}
.single-entry .entry-hero-meta {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 14px;
	opacity: 0.92;
}
.single-entry .entry-hero-title {
	font-family: var(--font-serif);
	font-size: clamp(38px, 6vw, 78px);
	line-height: 1.02;
	margin: 0 0 14px;
	color: var(--bg);
	max-width: 80%;
	letter-spacing: -0.015em;
}
.single-entry .entry-hero-sub {
	font-family: var(--font-text);
	font-style: italic;
	font-size: 18px;
	margin: 0;
	opacity: 0.92;
	max-width: 600px;
}

.entry-body {
	background: var(--bg);
	padding: 72px 32px 32px;
}
.entry-body .container { max-width: var(--container-narrow); }
/* Bei seitlichem Bild-Layout brauchen wir mehr Breite, damit Bild + Text nebeneinander Platz haben. */
.entry-body.has-side-layout .container { max-width: 920px; }

/* Magazin-Style: Bilder am Rand des Textes */
.entry-content.has-side-images { overflow: hidden; }
.entry-content.has-side-images::after {
	content: "";
	display: block;
	clear: both;
}
.entry-content .entry-side-figure {
	width: 280px;
	margin: 6px 0 22px;
	background: var(--paper);
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 70, 79, 0.08);
}
.entry-content .entry-side-figure img {
	display: block;
	width: 100%;
	height: auto;
}
.entry-content .side-figure--right {
	float: right;
	margin-left: 32px;
	shape-outside: margin-box;
}
.entry-content .side-figure--left {
	float: left;
	margin-right: 32px;
	shape-outside: margin-box;
}
/* Drop-Cap soll nicht von einem direkt folgenden Float zerstört werden — Floats stehen ohnehin erst nach dem ersten Absatz. */
.entry-content p {
	font-family: var(--font-text);
	font-size: 18px;
	line-height: 1.78;
	color: var(--ink-soft);
	margin: 0 0 1.3em;
}
.entry-content > p:first-of-type::first-letter {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 78px;
	line-height: 0.85;
	float: left;
	padding: 8px 14px 0 0;
	color: var(--petrol-deep);
}
.entry-content blockquote {
	margin: 36px 0;
	padding: 18px 0 18px 30px;
	border-left: 2px solid var(--sienna);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 26px;
	line-height: 1.35;
	color: var(--petrol-deep);
}
.entry-content blockquote p { font: inherit; color: inherit; margin: 0; }

.entry-gallery {
	background: var(--bg);
	padding: 24px 32px;
}
.entry-gallery .gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
}
.entry-gallery .gallery-item {
	aspect-ratio: 3/4;
	overflow: hidden;
	border-radius: 2px;
	background: var(--paper);
}
.entry-gallery .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.entry-gallery .gallery-caption {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--stone);
	letter-spacing: 0.04em;
	max-width: 1200px;
	margin: 12px auto 0;
}

/* ===========================================================
   Reise-Stops (Stationen)
   Body bleibt als Lead/Intro im .entry-body-Block; darunter
   listen wir die einzelnen Stops als "Kapitel" mit eigenem
   Titel, Fliesstext und Foto-Galerie auf.
   =========================================================== */
.entry-stops {
	background: var(--bg);
	padding: 8px 32px 24px;
}
.entry-stops-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.entry-stop {
	padding: 56px 0 40px;
	border-top: 1px solid var(--sand-line);
}
.entry-stop:first-child {
	border-top: none;
	padding-top: 24px;
}

.entry-stop-head {
	max-width: var(--container-narrow);
	margin: 0 auto 24px;
}
.entry-stop-meta {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 8px;
	line-height: 1.4;
}
.entry-stop-num {
	color: var(--sienna);
	font-weight: 600;
}
.entry-stop-sep {
	margin: 0 8px;
	opacity: 0.6;
}
.entry-stop-date {
	letter-spacing: 0.18em;
}
.entry-stop-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}

.entry-stop-body {
	max-width: var(--container-narrow);
	margin: 0 auto 28px;
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.entry-stop-body p {
	margin: 0 0 1em;
}
.entry-stop-body p:last-child {
	margin-bottom: 0;
}
.entry-stop-body a {
	color: var(--petrol-deep);
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 3px;
}

/* Stop-Slider — Magazin-Filmstrip pro Stop
 * Slides haben fixe Höhe + variable Breite (natürliches Bildverhältnis).
 * Mehrere Bilder gleichzeitig sichtbar, Soft-Snap beim Wischen.
 */
.entry-stop-slider {
	position: relative;
	margin: 16px 0 0;
	border-radius: 2px;
	background: transparent;
	outline: none;
}
.entry-stop-slider:focus-visible {
	box-shadow: 0 0 0 2px var(--petrol);
}
.entry-stop-slider-track {
	display: flex;
	height: 360px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 4px;
	cursor: grab;
}
.entry-stop-slider-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}
.entry-stop-slider.has-multi .entry-stop-slide {
	cursor: grab;
}
.entry-stop-slider-track.is-dragging .entry-stop-slide {
	cursor: grabbing;
}
.entry-stop-slider-track::-webkit-scrollbar { display: none; }
.entry-stop-slide {
	flex: 0 0 auto;
	height: 100%;
	scroll-snap-align: start;
	margin: 0;
	overflow: hidden;
	background: var(--paper);
	border-radius: 2px;
}
.entry-stop-slide img {
	height: 100%;
	width: auto;
	display: block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/* Single-Slide: nicht als Filmstrip, sondern eine ruhige Vollbreite */
.entry-stop-slider.is-single .entry-stop-slider-track {
	height: auto;
	overflow: hidden;
}
.entry-stop-slider.is-single .entry-stop-slide {
	flex: 0 0 100%;
	height: auto;
	background: transparent;
}
.entry-stop-slider.is-single .entry-stop-slide img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

/* Mobile: aus dem Filmstrip wird ein klassischer One-Per-Snap-Slider —
   ein Foto auf voller Breite, scroll-snap mandatory, Dots ausserhalb der Fotos.
   Desktop-Verhalten (Filmstrip) bleibt unangetastet. */
@media (max-width: 720px) {
	.entry-stop-slider-track {
		height: auto;
		scroll-snap-type: x mandatory;
		gap: 0;
	}
	.entry-stop-slider.has-multi .entry-stop-slide,
	.entry-stop-slide {
		flex: 0 0 100%;
		width: 100%;
		height: auto;
		scroll-snap-align: center;
	}
	.entry-stop-slide img {
		width: 100%;
		height: auto;
		max-height: 70vh;
		object-fit: cover;
		display: block;
	}
	/* Dots nicht mehr über die Fotos, sondern darunter platzieren. */
	.entry-stop-slider-dots {
		position: static;
		margin-top: 8px;
		background: transparent;
		padding: 0;
		justify-content: center;
		display: flex;
		gap: 6px;
		max-width: 100%;
	}
	.entry-stop-slider-dot {
		background: rgba(16, 42, 47, 0.25);
	}
	.entry-stop-slider-dot.is-active {
		background: var(--ink, #102a2f);
	}
	/* Progress-Bar mobile: unter dem Bild, dunkel auf hell. */
	.entry-stop-slider-progress {
		position: static;
		transform: none;
		margin: 8px auto 0;
		width: min(180px, 60%);
		background: rgba(16, 42, 47, 0.18);
	}
	.entry-stop-slider-progress-thumb {
		background: var(--ink, #102a2f);
	}
	/* Counter klein in der oberen Ecke statt mittig auf dem Foto. */
	.entry-stop-slider-counter {
		top: 8px;
		right: 8px;
		font-size: 11px;
		padding: 3px 8px;
	}
}
@media (max-width: 480px) {
	.entry-stop-slide img {
		max-height: 60vh;
	}
}

/* Pfeil-Buttons */
.entry-stop-slider-prev,
.entry-stop-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	background: rgba(16, 42, 47, 0.7);
	color: var(--paper);
	font-size: 24px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, opacity 0.18s ease;
	z-index: 2;
	padding: 0;
}
.entry-stop-slider-prev { left: 12px; }
.entry-stop-slider-next { right: 12px; }
.entry-stop-slider-prev:hover,
.entry-stop-slider-next:hover {
	background: rgba(16, 42, 47, 0.92);
}
.entry-stop-slider-prev:disabled,
.entry-stop-slider-next:disabled {
	opacity: 0.35;
	cursor: default;
}
.entry-stop-slider-prev span,
.entry-stop-slider-next span {
	display: block;
	margin-top: -2px;
}

/* Punkte-Indicator */
.entry-stop-slider-dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	background: rgba(16, 42, 47, 0.6);
	padding: 6px 10px;
	border-radius: 999px;
	z-index: 2;
	/* Safety: niemals breiter als der Slider, sonst „Hängt-rechts-raus"-Bug. */
	max-width: calc(100% - 24px);
	flex-wrap: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
.entry-stop-slider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(244, 236, 216, 0.5);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
	flex: 0 0 auto;
}
.entry-stop-slider-dot:hover { background: rgba(244, 236, 216, 0.85); }
.entry-stop-slider-dot.is-active {
	background: var(--paper);
	transform: scale(1.25);
}

/* Progress-Bar (statt Dots, wenn sehr viele Fotos > 20).
   Schlanker Balken mittig unten, gleicher visueller Stil wie Dots. */
.entry-stop-slider-progress {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: min(220px, calc(100% - 96px));
	height: 6px;
	background: rgba(16, 42, 47, 0.6);
	border-radius: 999px;
	padding: 0;
	z-index: 2;
	box-sizing: border-box;
	overflow: hidden;
}
.entry-stop-slider-progress-track {
	position: relative;
	width: 100%;
	height: 100%;
}
.entry-stop-slider-progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 12%; /* wird von JS gesetzt */
	background: var(--paper);
	border-radius: 999px;
	transition: left 0.12s ease, width 0.12s ease;
	will-change: left, width;
}

/* Counter "3 / 11" rechts oben */
.entry-stop-slider-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(16, 42, 47, 0.7);
	color: var(--paper);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.05em;
	z-index: 2;
	pointer-events: none;
}

/* Single-Slide: keine Steuerung, nur das Bild */
.entry-stop-slider.is-single .entry-stop-slider-track { overflow: hidden; }

/* "Galerie" — kombinierte Reise-Bilder (un-stop-zugeordnete + alle Stop-Bilder)
   Container muss zu .entry-stops + .entry-stops-inner passen, sonst läuft
   der Filmstrip auf voller Viewport-Breite und sieht im Vergleich zu den
   Stop-Galerien chaotisch aus. */
.entry-gallery-section {
	background: var(--bg);
	padding: 8px 32px 32px;
	margin-top: 8px;
}
.entry-gallery-section > .entry-stop-slider,
.entry-gallery-section > .entry-gallery-title {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.entry-gallery-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--stone);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 auto 16px;
	padding-top: 12px;
	border-top: 1px solid var(--sand-line);
}
/* Backward-compat falls irgendwo noch entry-other-photos referenziert wird */
.entry-other-photos { padding-top: 8px; }
.entry-other-photos-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--stone);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	max-width: 1200px;
	margin: 0 auto 16px;
	padding-top: 12px;
	border-top: 1px solid var(--sand-line);
}

/* Liste der Stop-Anker neben der Mini-Map (rechte Spalte) */
.entry-mini-stops {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 18px;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	counter-reset: ministop;
}
.entry-mini-stops li {
	counter-increment: ministop;
	color: var(--ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.entry-mini-stops li::before {
	content: counter(ministop, decimal-leading-zero) " ";
	color: var(--sienna);
	font-weight: 600;
	margin-right: 4px;
}
.entry-mini-stops a {
	color: var(--petrol-deep);
	text-decoration: none;
}
.entry-mini-stops a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 2px;
}

/* Numbered Stop-Pin auf der Mini-Map — der Style des SVG ist inline im DivIcon,
   hier nur Layout-Reset für Leaflets DivIcon-Wrapper */
.flynroam-stop-pin {
	background: transparent;
	border: none;
}

/* ===========================================================
   Planung & Tipps — Archive, Taxonomy, Single, Verwandte Tipps
   im Reise-Eintrag.
   =========================================================== */

/* Archive (= /planung-tipps/) */
.page-tips-archive {
	padding: 80px 32px 48px;
	max-width: 1200px;
	margin: 0 auto;
}
.tips-archive-hero {
	max-width: var(--container-narrow);
	margin: 0 auto 48px;
	text-align: center;
}
.tips-archive-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sienna);
	margin: 0 0 8px;
}
.tips-archive-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 16px;
}
.tips-archive-lead {
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}
.tips-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.tips-cat-card {
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
}
.tips-cat-card-link {
	text-decoration: none;
	color: inherit;
}
.tips-cat-card-title {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}
.tips-cat-card-link:hover .tips-cat-card-title {
	color: var(--petrol-deep);
}
.tips-cat-card-desc {
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0 0 16px;
}
.tips-cat-card-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.tips-cat-card-list li {
	border-bottom: 0.5px solid var(--sand-line);
}
.tips-cat-card-list li:last-child { border-bottom: none; }
.tips-cat-card-list a {
	display: block;
	padding: 8px 0;
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}
.tips-cat-card-list a:hover { color: var(--petrol-deep); }
.tips-cat-card-empty {
	font-family: var(--font-text);
	font-size: 13px;
	color: var(--stone);
	font-style: italic;
	margin: 0 0 12px;
}
.tips-cat-card-more {
	margin-top: auto;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--petrol-deep);
	text-decoration: none;
	border-top: 0.5px solid var(--sand-line);
	padding-top: 14px;
}
.tips-cat-card-more:hover { color: var(--sienna); }

/* Taxonomy-Page (= /tipps-kategorie/{slug}/) */
.page-tips-category {
	padding: 80px 32px 48px;
	max-width: 880px;
	margin: 0 auto;
}
.tips-category-hero {
	margin-bottom: 36px;
	text-align: center;
}
.tips-category-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sienna);
	margin: 0 0 8px;
}
.tips-category-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(32px, 4vw, 44px);
	color: var(--ink);
	margin: 0 0 12px;
}
.tips-category-lead {
	font-family: var(--font-text);
	font-size: 16px;
	color: var(--ink-soft);
	margin: 0;
}
.tips-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tips-list-item {
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	padding: 22px 26px;
}
.tips-list-link { text-decoration: none; color: inherit; }
.tips-list-title {
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 4px;
}
.tips-list-link:hover .tips-list-title { color: var(--petrol-deep); }
.tips-list-meta {
	margin: 0 0 10px;
	display: flex;
	gap: 8px;
}
.tips-meta-pill {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(184, 136, 88, 0.12);
	color: var(--sienna);
}
.tips-meta-pill--specific {
	background: rgba(20, 70, 79, 0.1);
	color: var(--petrol-deep);
}
.tips-list-excerpt {
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0 0 12px;
}
.tips-list-more {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--petrol-deep);
	text-decoration: none;
}
.tips-list-empty {
	font-family: var(--font-text);
	color: var(--stone);
	font-style: italic;
	text-align: center;
	margin: 24px 0;
}

/* Single Tip */
.single-tip { padding-top: 0; }
.tip-hero {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 100px 32px 32px;
	text-align: center;
}
.tip-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sienna);
	margin: 0 0 12px;
}
.tip-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.tip-eyebrow a:hover {
	color: var(--petrol-deep);
}
.tip-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 16px;
}
.tip-lead {
	font-family: var(--font-text);
	font-style: italic;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}
.tip-body {
	padding: 32px 32px 56px;
}
.tip-body .container {
	max-width: var(--container-narrow);
}
.tip-body .entry-content {
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.tip-body .entry-content p { margin: 0 0 1em; }
.tip-body .entry-content h2,
.tip-body .entry-content h3 {
	font-family: var(--font-serif);
	color: var(--ink);
	margin-top: 1.6em;
}
.tip-body .entry-content ul,
.tip-body .entry-content ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.tip-related-trips {
	background: var(--bg);
	padding: 40px 32px;
	border-top: 0.5px solid var(--sand-line);
}
.tip-related-trips .container {
	max-width: 980px;
}
.tip-related-heading {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 18px;
}
.tip-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.tip-related-link {
	display: flex;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	padding: 10px;
	align-items: center;
}
.tip-related-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}
.tip-related-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tip-related-title {
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tip-related-meta {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stone);
}
.tip-related-link:hover .tip-related-title { color: var(--petrol-deep); }

/* "Auf dem Radar"-Sektion auf Reise-Seite — verworfene Wishlist-Items */
.entry-radar {
	background: var(--bg);
	padding: 32px 32px 40px;
	border-top: 0.5px solid var(--sand-line);
}
.entry-radar-inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.entry-radar-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 22px;
	color: var(--ink);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}
.entry-radar-lead {
	font-family: var(--font-text);
	font-style: italic;
	font-size: 14px;
	color: var(--stone);
	margin: 0 0 16px;
	line-height: 1.5;
}
.entry-radar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 6px 18px;
}
.entry-radar-item {
	font-family: var(--font-text);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-soft);
	padding: 4px 0;
	border-bottom: 0.5px dashed var(--sand-line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.entry-radar-name {
	color: var(--petrol-deep);
	text-decoration: none;
	font-weight: 500;
}
a.entry-radar-name:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 3px;
}
.entry-radar-addr {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.04em;
}

/* scroll-margin für Anker auch auf radar */
.entry-radar { scroll-margin-top: 80px; }

/* "Verwandte Tipps"-Sektion auf Reise-Seite (single-entry) */
.entry-related-tips {
	background: var(--bg);
	padding: 36px 32px 48px;
}
.entry-related-tips-inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.entry-related-tips-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 24px;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sand-line);
	letter-spacing: -0.005em;
}
.entry-related-tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}
.entry-related-tips-list li { margin: 0; }
.entry-related-tip-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: var(--ink);
	padding: 10px 0;
	border-bottom: 0.5px solid var(--sand-line);
}
.entry-related-tip-cat {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sienna);
}
.entry-related-tip-title {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}
.entry-related-tip-link:hover .entry-related-tip-title { color: var(--petrol-deep); }
.entry-related-tip-excerpt {
	font-family: var(--font-text);
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.5;
}

@media (max-width: 700px) {
	.page-tips-archive,
	.page-tips-category { padding-left: 24px; padding-right: 24px; }
	.entry-related-tips-list { grid-template-columns: 1fr; }
	.entry-related-tips { padding: 28px 24px 36px; }
}

/* ===========================================================
   Header-Submenu (Reisen / Planung & Tipps mit Hover-Dropdown)
   Dezent, in der Bone-Palette, Multi-Column für Reisen.
   =========================================================== */
.site-nav .has-submenu {
	position: relative;
}
.site-nav .has-submenu > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.site-nav .submenu-caret {
	font-size: 9px;
	opacity: 0.55;
	transition: transform 180ms ease;
}
.site-nav .has-submenu:hover .submenu-caret,
.site-nav .has-submenu:focus-within .submenu-caret {
	transform: translateY(1px);
	opacity: 0.85;
}

.site-nav .submenu {
	position: absolute;
	top: 100%;                          /* direkt am Trigger andocken — keine Lücke */
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	min-width: 320px;
	max-width: 720px;
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	box-shadow: var(--shadow-soft);
	padding: 18px 22px;
	margin-top: 12px;                   /* visuelle Lücke zum Trigger */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	z-index: 30;
}
/* Unsichtbare Hover-Bridge — füllt die visuelle Lücke zwischen Trigger und Submenu,
   damit die Maus beim Übergang nicht aus dem hover-state fällt. */
.site-nav .submenu::before {
	content: '';
	position: absolute;
	top: -16px;                         /* deckt die margin-top + ein bisschen Toleranz */
	left: 0;
	right: 0;
	height: 16px;
	background: transparent;
}
/* Verzögerung beim Verschwinden, damit kurze Mausbewegungen den Submenu nicht killen */
.site-nav .has-submenu .submenu {
	transition: opacity 180ms ease 80ms, transform 180ms ease 80ms, visibility 0s linear 260ms;
}
.site-nav .has-submenu:hover > .submenu,
.site-nav .has-submenu:focus-within > .submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

/* Reisen-Submenu: Multi-Column nach Country */
.site-nav .submenu--journeys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px 28px;
	min-width: 480px;
	max-width: 800px;
}
.site-nav .submenu-group {
	min-width: 0;
}
.site-nav .submenu-group-head {
	display: block;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sienna);
	padding-bottom: 6px;
	margin-bottom: 8px;
	border-bottom: 0.5px solid var(--sand-line);
	text-decoration: none;
	font-weight: 500;
}
.site-nav a.submenu-group-head:hover {
	color: var(--petrol-deep);
}
.site-nav .submenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;          /* override .site-nav ul flex */
	gap: 0;
}
.site-nav .submenu-list li {
	margin: 0;
	display: block;
}
.site-nav .submenu-list a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 0;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 0.5px solid transparent;
}
.site-nav .submenu-list a:hover {
	color: var(--petrol-deep);
	border-bottom-color: var(--sand-line);
}
.site-nav .submenu-title {
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
}
.site-nav .submenu-meta {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stone);
}

/* Planung & Tipps-Submenu: einspaltig kompakt */
.site-nav .submenu--tips {
	min-width: 260px;
	max-width: 320px;
}
.site-nav .submenu--tips .submenu-list a {
	border-bottom: 0.5px solid var(--sand-line);
}
.site-nav .submenu--tips .submenu-list li:last-child a {
	border-bottom: none;
}

/* ===========================================================
   Mobile-Header: Hamburger + Drawer
   Auf Desktop ist .site-nav-panel display:contents → Layout
   wie früher (Logo · Nav · Tools). Ab 900px wird daraus
   ein seitlicher Drawer von rechts.
   =========================================================== */
.site-nav-panel { display: contents; }

.site-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: inherit;
	padding: 0;
	position: relative;
	z-index: 115;
	border-radius: 50%;
	transition: background 160ms ease;
}
.site-nav-toggle:hover { background: rgba(16, 42, 47, 0.06); }

.site-nav-toggle-bars,
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 220ms ease, top 220ms ease, background 180ms ease;
}
.site-nav-toggle-bars { position: relative; }
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.site-nav-toggle-bars::before { top: -7px; }
.site-nav-toggle-bars::after  { top:  7px; }

body.menu-open .site-nav-toggle-bars { background: transparent; }
body.menu-open .site-nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
body.menu-open .site-nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(16, 42, 47, 0.32);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms ease;
	z-index: 105;
	display: none;
}

@media (max-width: 900px) {
	.site-nav-toggle { display: inline-flex; }
	.site-nav-backdrop { display: block; }

	body.menu-open { overflow: hidden; }
	body.menu-open .site-nav-backdrop { opacity: 1; pointer-events: auto; }

	/* Drawer wird zur fixen Schicht */
	.site-nav-panel {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(86vw, 360px);
		background: var(--paper);
		border-left: 0.5px solid var(--sand-line);
		box-shadow: -8px 0 28px rgba(16, 42, 47, 0.12);
		padding: 84px 28px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(105%);
		transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
		z-index: 110;
		-webkit-overflow-scrolling: touch;
	}
	body.admin-bar .site-nav-panel { top: 32px; padding-top: 84px; }
	@media (max-width: 782px) {
		body.admin-bar .site-nav-panel { top: 46px; }
	}
	body.menu-open .site-nav-panel { transform: translateX(0); }

	/* Vertikale Nav im Drawer */
	.site-nav { width: 100%; }
	.site-nav ul {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		width: 100%;
	}
	.site-nav li { width: 100%; margin: 0; }
	.site-nav > ul > li > a,
	.site-nav .has-submenu > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: var(--font-serif);
		font-size: 18px;
		letter-spacing: 0;
		opacity: 1;
		padding: 16px 0;
		border-bottom: 0.5px solid var(--sand-line);
		width: 100%;
	}
	.site-nav .submenu-caret {
		font-size: 14px;
		opacity: 0.6;
		transition: transform 220ms ease;
	}
	.site-nav .has-submenu.is-open > a .submenu-caret {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* Submenüs als statische, einklappbare Listen im Drawer */
	.site-nav .submenu {
		position: static;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 6px 0 14px 4px;
		margin: 0;
		min-width: 0;
		max-width: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: none;
		grid-template-columns: 1fr;
	}
	.site-nav .submenu::before { display: none; }
	.site-nav .has-submenu.is-open > .submenu { display: block; }
	/* Desktop-Hover/Focus-Transform im Drawer neutralisieren — sonst rutscht
	   das Submenu beim Tap (focus-within) per translateX(-50%) nach links raus */
	.site-nav .has-submenu:hover > .submenu,
	.site-nav .has-submenu:focus-within > .submenu,
	.site-nav .has-submenu.is-open > .submenu {
		transform: none;
		left: auto;
	}
	.site-nav .submenu--journeys {
		gap: 12px 0;
		min-width: 0;
		max-width: none;
	}
	.site-nav .submenu-group { margin-bottom: 10px; }
	.site-nav .submenu-group-head {
		font-size: 9px;
		padding-bottom: 4px;
		margin-bottom: 6px;
	}
	.site-nav .submenu-list a {
		padding: 8px 0;
		border-bottom: 0;
	}
	.site-nav .submenu-list a:hover { border-bottom-color: transparent; }
	.site-nav .submenu-title { font-size: 14px; }
	.site-nav .submenu--tips { min-width: 0; max-width: none; }
	.site-nav .submenu--tips .submenu-list a { border-bottom: 0; }

	/* Header-Tools im Drawer: Spalte unten */
	.header-tools {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		margin-top: 28px;
		padding-top: 22px;
		border-top: 0.5px solid var(--sand-line);
	}
	.site-search-toggle { display: none; }    /* Suche ist im Drawer immer sichtbar */
	.site-search-form {
		display: inline-flex !important;
		position: static;
		margin: 0;
		min-width: 0;
		width: 100%;
	}
	.flynroam-insta--header { align-self: flex-start; }
	.language-switcher {
		font-size: 13px;
		gap: 10px;
		justify-content: flex-start;
	}
}

/* ===========================================================
   Instagram-Icon (Header + Footer)
   =========================================================== */
.flynroam-insta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	transition: opacity 180ms ease, transform 180ms ease;
	opacity: 0.75;
}
.flynroam-insta:hover {
	opacity: 1;
	transform: translateY(-1px);
}
.flynroam-insta--header {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--ink);
}
.flynroam-insta--footer {
	color: var(--bg);
	margin-left: 4px;
	vertical-align: middle;
}

/* ===========================================================
   Sticky Anker-Menü auf Single-Entry. Vertikale Punkte rechts;
   pro Punkt ein Label, das beim Hover/aktiv sichtbar wird.
   Auf Mobile/Schmal ausgeblendet — der Lesefluss ist dort linear genug.
   =========================================================== */
.entry-anchor-nav {
	position: fixed;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	z-index: 40;
	pointer-events: auto;
}
.entry-anchor-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.entry-anchor-nav li { margin: 0; padding: 0; }
.entry-anchor-nav a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 6px 4px 6px 14px;
	text-decoration: none;
	color: var(--ink-soft);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.entry-anchor-nav .label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 220ms ease, opacity 220ms ease;
	color: var(--ink);
}
.entry-anchor-nav .dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--sand-line);
	transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.entry-anchor-nav a:hover .label,
.entry-anchor-nav a.is-active .label {
	max-width: 200px;
	opacity: 1;
}
.entry-anchor-nav a:hover .dot,
.entry-anchor-nav a.is-active .dot {
	background: var(--sienna);
	border-color: var(--sienna);
}
.entry-anchor-nav a.is-active .dot {
	transform: scale(1.25);
}

@media (max-width: 1100px) {
	.entry-anchor-nav { display: none; }
}

/* Smooth-Scroll für Anker-Sprünge */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Body-Padding zwischen Hero und Anker-Section: scroll-margin-top damit
   der sticky Header die Sprung-Targets nicht überdeckt. */
.entry-body, .entry-stops, .entry-information, .entry-gallery, .entry-mini-map {
	scroll-margin-top: 80px;
}

/* ===========================================================
   Reise-Informationen (Hotels, Restaurants, Aktivitäten,
   Anbieter, Tipps). Leere Listen werden im Frontend
   nicht gerendert; pro Block eine Sub-Heading.
   =========================================================== */
.entry-information {
	background: var(--bg);
	padding: 36px 32px 48px;
}
.entry-information-inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.entry-information-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 28px;
	color: var(--ink);
	margin: 0 0 28px;
	letter-spacing: -0.01em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sand-line);
}
/* Aufklappbare Info-Blöcke (HTML5 <details>) */
.entry-info-block {
	margin: 0;
	border-bottom: 1px solid var(--sand-line);
}
.entry-info-block:last-child {
	border-bottom: none;
}
.entry-info-heading {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--stone);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: color 0.18s ease;
}
.entry-info-heading::-webkit-details-marker { display: none; }
.entry-info-heading::marker { display: none; content: ''; }
.entry-info-heading:hover { color: var(--ink); }
.entry-info-heading::after {
	content: '+';
	margin-left: auto;
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	color: var(--stone);
	letter-spacing: 0;
	transition: transform 0.2s ease, color 0.18s ease;
}
.entry-info-heading:hover::after { color: var(--ink); }
.entry-info-block[open] > .entry-info-heading::after {
	transform: rotate(45deg);
	color: var(--ink);
}
.entry-info-block[open] > .entry-info-heading {
	color: var(--ink);
}
.entry-info-count {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	background: var(--sand-line);
	color: var(--ink-soft);
	padding: 2px 9px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: none;
	min-width: 22px;
	text-align: center;
}
.entry-info-block[open] > :not(.entry-info-heading) {
	margin-bottom: 14px;
}
/* Erstes Sub-Element nach Heading nicht oben anstoßen */
.entry-info-heading + ul.entry-info-list,
.entry-info-heading + .entry-info-subgroup,
.entry-info-heading + .entry-info-tips {
	margin-top: 4px;
}
.entry-info-subgroup {
	margin: 0 0 18px;
}
.entry-info-subgroup:last-child {
	margin-bottom: 0;
}
.entry-info-subheading {
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
	padding-left: 8px;
	border-left: 2px solid var(--sienna);
	line-height: 1.2;
}
.entry-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
}
.entry-info-item {
	font-family: var(--font-text);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 0 8px;
	border-bottom: 0.5px solid var(--sand-line);
}
.entry-info-name {
	color: var(--petrol-deep);
	text-decoration: none;
	font-weight: 500;
}
a.entry-info-name:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 3px;
}
.entry-info-ext {
	font-size: 10px;
	opacity: 0.55;
	margin-left: 2px;
}
.entry-info-stop {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sienna);
	text-decoration: none;
}
.entry-info-stop:hover {
	color: var(--petrol-deep);
}
.entry-info-note {
	font-size: 13px;
	color: var(--stone);
	font-style: italic;
}
.entry-info-tips {
	font-family: var(--font-text);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}
.entry-info-tips p {
	margin: 0 0 1em;
}
.entry-info-tips p:last-child {
	margin-bottom: 0;
}
.entry-info-tips a {
	color: var(--petrol-deep);
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 3px;
}
.entry-info-tips ul,
.entry-info-tips ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.entry-mini-map {
	background: var(--bg);
	padding: 28px 32px;
}
.entry-mini-map .mini-block {
	max-width: var(--container-narrow);
	margin: 0 auto;
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	padding: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
}
.entry-mini-map .mini-canvas {
	aspect-ratio: 4/3;
	min-height: 240px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--bg);
}
.entry-mini-map .mini-canvas .leaflet-container {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: var(--bg);
}

.flynroam-like-button { transition: transform 100ms ease; }
.flynroam-like-button[data-liked="1"] .like-icon { color: var(--sienna); }
.flynroam-like-button:active { transform: scale(0.96); }
.entry-mini-map h4 {
	font-family: var(--font-serif);
	font-size: 18px;
	margin: 0 0 6px;
}
.entry-mini-map p {
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 6px;
	line-height: 1.55;
}
.entry-mini-map .coord {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.1em;
}

.entry-gmaps-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--petrol-deep);
	color: var(--paper);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background 160ms ease, transform 160ms ease;
}
.entry-gmaps-link:hover {
	background: var(--petrol);
	color: var(--paper);
	transform: translateY(-1px);
}

.entry-actions {
	background: var(--bg);
	padding: 28px 32px 40px;
}
.entry-actions .container {
	max-width: var(--container-narrow);
	border-top: 0.5px solid var(--sand-line);
	padding-top: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.entry-actions-left { display: flex; align-items: center; gap: 22px; }
.flynroam-like-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 0.5px solid var(--petrol-deep);
	border-radius: 28px;
	background: transparent;
	color: var(--petrol-deep);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	transition: background 160ms ease, color 160ms ease;
}
.flynroam-like-button:hover { background: var(--petrol-deep); color: var(--bg); }
.flynroam-like-button .like-icon {
	font-size: 16px;
	line-height: 1;
	transition: transform 200ms ease;
}
.flynroam-like-button[data-liked="1"] .like-icon { color: var(--sienna); transform: scale(1.15); }
.entry-actions .ask-link {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--stone);
	border-bottom: 0.5px solid var(--stone);
	padding-bottom: 1px;
}
.entry-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.entry-tag {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--moss);
	background: rgba(90, 107, 72, 0.12);
	padding: 5px 12px;
	border-radius: 14px;
}
.entry-tag:hover { background: rgba(90, 107, 72, 0.22); }

.entry-next-prev {
	background: var(--bg);
	padding: 28px 16px 80px;
}
.entry-next-prev .grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.np-card {
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	overflow: hidden;
	display: block;
	color: inherit;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.np-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.np-card .photo { aspect-ratio: 16/8; overflow: hidden; background: var(--bg); }
.np-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.np-card .text { padding: 16px 20px 20px; }
.np-card .meta {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 6px;
}
.np-card h3 {
	font-family: var(--font-serif);
	font-size: 18px;
	margin: 0 0 6px;
	line-height: 1.2;
}
.np-card .arrow {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--petrol-deep);
	letter-spacing: 0.06em;
}

/* =====================================================================
   Footer (Twilight)
   ===================================================================== */

.site-footer {
	background: var(--ink);
	color: var(--bg);
	padding: 64px 32px 28px;
	font-family: var(--font-sans);
}
.site-footer .container { max-width: 1200px; }
.footer-prompt {
	font-family: var(--font-serif);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 500;
	margin: 0 0 36px;
	letter-spacing: -0.01em;
	color: var(--bg);
}
.footer-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
	padding: 24px 0;
	border-top: 0.5px solid rgba(184, 136, 88, 0.4);
}
.footer-col h4 {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sienna);
	margin: 0 0 14px;
	font-weight: 500;
}
.footer-col p, .footer-col a {
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--bg);
	margin: 6px 0;
	line-height: 1.65;
	display: block;
	opacity: 0.88;
	text-decoration: none;
}
.footer-col a:hover { opacity: 1; color: var(--sienna); }

.footer-music {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(239, 231, 214, 0.06);
	padding: 8px 14px;
	border-radius: 28px;
	font-family: var(--font-sans);
	font-size: 12px;
}
.footer-music-btn {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sienna);
	border: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--ink);
}
.footer-music-btn svg { width: 8px; height: 8px; fill: currentColor; }

.footer-music[data-state="playing"] .footer-music-btn { background: var(--petrol); }
.footer-music[data-state="paused"]  .footer-music-btn { background: var(--sienna); }

.footer-meta {
	display: flex;
	justify-content: space-between;
	padding-top: 18px;
	border-top: 0.5px solid rgba(184, 136, 88, 0.25);
	margin-top: 12px;
	font-size: 11px;
	opacity: 0.7;
}

/* =====================================================================
   Map page (Karte)
   ===================================================================== */

.page-map {
	padding-top: 100px;
	background: var(--bg);
	min-height: 100vh;
}
.page-map .map-header {
	max-width: 1200px;
	margin: 0 auto 24px;
	padding: 0 32px;
}
.page-map .map-header h1 {
	font-family: var(--font-serif);
	font-size: clamp(30px, 4vw, 48px);
	margin: 0 0 8px;
}
.page-map .map-header p {
	font-family: var(--font-text);
	font-size: 16px;
	color: var(--ink-soft);
	max-width: 540px;
}
.page-map .map-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px 80px;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
}
.page-map .map-canvas {
	height: 70vh;
	min-height: 480px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
}
.page-map .map-side h3 {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 18px;
	font-weight: 500;
}
.page-map .map-side ul {
	list-style: none; margin: 0; padding: 0;
	max-height: 70vh; overflow-y: auto; padding-right: 8px;
}
.page-map .map-side li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
	border-bottom: 0.5px solid var(--sand-line);
	cursor: pointer;
	transition: color 160ms ease;
}
.page-map .map-side li:hover,
.page-map .map-side li.active { color: var(--petrol-deep); }
.page-map .map-side li .num {
	font-family: var(--font-serif);
	font-size: 12px;
	color: var(--stone);
	min-width: 22px;
}
.page-map .map-side li.active .num { color: var(--petrol-deep); font-weight: 500; }
.page-map .map-side li .name {
	font-family: var(--font-text);
	font-size: 15px;
	flex: 1;
	color: var(--ink);
}
.page-map .map-side li .date {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.06em;
}

/* Leaflet popup overrides (sienna-style) */
.leaflet-popup-content-wrapper {
	background: var(--paper);
	border-radius: 4px;
	border: 0.5px solid var(--sand-line);
	box-shadow: var(--shadow-soft);
}
.leaflet-popup-tip { background: var(--paper); }
.leaflet-popup-content {
	margin: 12px 14px;
	font-family: var(--font-text);
	color: var(--ink);
}
.leaflet-popup-content .pop-photo {
	width: 160px; aspect-ratio: 4/3; overflow: hidden;
	border-radius: 2px; margin-bottom: 8px;
}
.leaflet-popup-content .pop-photo img { width: 100%; height: 100%; object-fit: cover; }
.leaflet-popup-content .pop-meta {
	font-family: var(--font-sans);
	font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--stone); margin: 0 0 4px;
}
.leaflet-popup-content .pop-title {
	font-family: var(--font-serif);
	font-size: 15px; margin: 0 0 6px;
}
.leaflet-popup-content .pop-link {
	font-size: 11px;
	color: var(--petrol-deep);
	border-bottom: 0.5px solid var(--petrol-deep);
}

/* Cluster pins on the global map */
.flynroam-cluster {
	background: transparent;
	border: 0;
}
.flynroam-cluster .flynroam-cluster-inner {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--petrol-deep);
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(16, 42, 47, 0.3);
	border: 2px solid var(--paper);
}

/* Grouped sidebar list on the map page */
.page-map .map-side .country-group {
	display: block;
	padding: 0;
	border-bottom: 0.5px solid var(--sand-line);
	cursor: default;
}
.page-map .map-side .country-group-header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 14px 0;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: left;
}
.page-map .map-side .country-name { flex: 1; }
.page-map .map-side .country-count {
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.08em;
}
.page-map .map-side .country-toggle {
	color: var(--stone);
	transition: transform 200ms ease;
	font-size: 14px;
}
.page-map .map-side .country-group.is-collapsed .country-toggle {
	transform: rotate(-90deg);
}
.page-map .map-side .country-trips {
	list-style: none;
	margin: 0 0 8px;
	padding: 0 0 4px 16px;
	overflow: hidden;
	max-height: 800px;
	transition: max-height 240ms ease;
}
.page-map .map-side .country-group.is-collapsed .country-trips {
	max-height: 0;
}
.page-map .map-side .country-group.is-collapsed .country-hub-link {
	display: none;
}
.page-map .map-side .country-trips li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 0.5px solid rgba(201, 182, 144, 0.45);
	cursor: pointer;
	font-family: var(--font-text);
	font-size: 14px;
}
.page-map .map-side .country-trips li:hover,
.page-map .map-side .country-trips li.active {
	color: var(--petrol-deep);
}
.page-map .map-side .country-trips .name { flex: 1; }
.page-map .map-side .country-trips .date {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.06em;
}
.page-map .map-side .country-hub-link {
	display: inline-block;
	margin: 4px 0 12px 16px;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--petrol-deep);
	border-bottom: 0.5px solid var(--petrol-deep);
	padding-bottom: 1px;
}

/* Single-trip country: einzeiliger Flat-Eintrag (kein Aufklapper) */
.page-map .map-side .country-group.is-single {
	padding: 0;
}
.page-map .map-side .country-group-flat {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 13px;
	transition: color 160ms ease;
}
.page-map .map-side .country-group-flat:hover,
.page-map .map-side .country-group.is-single .country-group-flat:has(.active) {
	color: var(--petrol-deep);
}
.page-map .map-side .country-group-flat .country-name {
	font-weight: 500;
	letter-spacing: 0.04em;
}
.page-map .map-side .country-group-flat .trip-name {
	flex: 1;
	font-family: var(--font-text);
	font-size: 14px;
	color: var(--ink-soft);
	font-weight: 400;
	letter-spacing: 0;
}
.page-map .map-side .country-group-flat .trip-date {
	font-size: 11px;
	color: var(--stone);
	letter-spacing: 0.06em;
}

.entry-hero-langswitch {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 18px 0 0;
	opacity: 0.85;
}
.entry-hero-langswitch a {
	color: inherit;
	border-bottom: 0.5px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 160ms ease;
}
.entry-hero-langswitch a:hover { opacity: 1; }

.entry-machine-translation-notice {
	font-family: var(--font-sans);
	font-size: 12px;
	font-style: italic;
	color: var(--stone);
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 3px;
	padding: 10px 14px;
	margin: 0 auto 24px;
	max-width: var(--container-narrow);
	letter-spacing: 0.02em;
}

/* =====================================================================
   Über uns (page-ueber.php)
   ===================================================================== */

.page-ueber { background: var(--bg); }

.ueber-hero {
	position: relative;
	min-height: 64vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.ueber-hero-image { position: absolute; inset: 0; }
.ueber-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.ueber-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16, 42, 47, 0) 0%, rgba(16, 42, 47, 0.55) 100%);
}
.ueber-hero-text {
	position: relative; z-index: 1;
	color: var(--paper);
	padding: 0 32px 64px;
	width: 100%;
}
.ueber-hero-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 14px;
	opacity: 0.85;
}
.ueber-hero-title {
	font-family: var(--font-serif);
	color: var(--paper);
	font-size: clamp(48px, 6vw, 88px);
	margin: 0 0 12px;
	line-height: 1;
}
.ueber-hero-sub {
	font-family: var(--font-text);
	font-size: 17px;
	margin: 0;
	opacity: 0.9;
	font-style: italic;
}

.ueber-body {
	padding: 80px 0 32px;
	font-family: var(--font-text);
	font-size: 18px;
	line-height: 1.75;
	color: var(--ink);
}
.ueber-body .lead {
	font-size: clamp(20px, 2.2vw, 26px);
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 1.4em;
	line-height: 1.4;
}
.ueber-body p { margin: 0 0 1.2em; }
.ueber-body p:first-of-type::first-letter {
	font-family: var(--font-serif);
	font-size: 64px;
	line-height: 0.9;
	float: left;
	padding: 6px 12px 0 0;
	color: var(--petrol-deep);
}

.ueber-gallery {
	padding: 32px 32px 64px;
}
.ueber-gallery-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.ueber-gallery-item {
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 4px;
	background: var(--paper);
}
.ueber-gallery-item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 700ms ease;
}
.ueber-gallery-item:hover img { transform: scale(1.04); }

.ueber-quotebar {
	padding: 48px 32px 96px;
	text-align: center;
	background: var(--paper);
	border-top: 0.5px solid var(--sand-line);
}
.ueber-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 28px);
	color: var(--ink-soft);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.4;
}

@media (max-width: 700px) {
	.ueber-hero { min-height: 56vh; }
	.ueber-hero-text { padding: 0 22px 40px; }
	.ueber-gallery-grid { grid-template-columns: 1fr; }
	.ueber-body p:first-of-type::first-letter { font-size: 48px; }

	/* Defensive: kein horizontaler Page-Scroll mehr.
	   Auf Mobile passiert das immer wieder, wenn ein Bild/Slider/Iframe
	   minimal über die Viewport-Breite hinausragt — sichtbar als „Streifen
	   rechts" beim Rauszoomen. Hier blocken wir es auf Body-Ebene UND
	   einzeln auf den Slider/Section-Wrappern, damit Scroll-Snap-Sliders
	   intern weiter horizontal scrollen, aber die Seite selber nicht. */
	html, body { overflow-x: hidden; max-width: 100%; }
	.single-entry,
	.single-entry .entry-body,
	.single-entry .entry-content,
	.single-entry .entry-stops,
	.single-entry .entry-gallery-section,
	.single-entry .entry-videos,
	.single-entry .entry-mini-map,
	.single-entry .entry-information,
	.single-entry .entry-related-tips { overflow-x: hidden; }
	.entry-stop-slider { overflow-x: hidden; }
	.entry-content img,
	.entry-stop-body img,
	.entry-content iframe,
	.entry-stop-body iframe,
	.entry-content table,
	.entry-stop-body table {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
	}
}

/* =====================================================================
   Country Hub (taxonomy-country.php)
   ===================================================================== */

.country-hub { background: var(--bg); }

.country-hero {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin-top: 0;
}
.country-hero-image { position: absolute; inset: 0; }
.country-hero-image img {
	width: 100%; height: 100%; object-fit: cover;
}
.country-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16, 42, 47, 0) 0%, rgba(16, 42, 47, 0.55) 100%);
}
.country-hero-text {
	position: relative;
	z-index: 1;
	color: var(--paper);
	padding: 0 32px 64px;
	width: 100%;
}
.country-hero-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 14px;
	opacity: 0.85;
}
.country-hero-title {
	font-family: var(--font-serif);
	color: var(--paper);
	font-size: clamp(48px, 6vw, 88px);
	margin: 0 0 12px;
	line-height: 1;
}
.country-hero-stats {
	font-family: var(--font-text);
	font-size: 17px;
	margin: 0;
	opacity: 0.92;
}

.country-section-heading {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 24px;
	font-weight: 500;
}

.country-map-section { padding: 64px 0 32px; }
.country-map {
	width: 100%;
	height: 460px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
}

.country-map-legend {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	font-family: var(--font-sans);
	font-size: 13px;
}
.country-map-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.country-map-legend .legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid var(--paper);
	box-shadow: 0 0 0 0.5px var(--sand-line);
}

/* Trip pin used on country-map */
.flynroam-trip-pin span {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--paper);
	box-shadow: 0 1px 3px rgba(16, 42, 47, 0.35);
}

.country-trips-section {
	padding: 32px 0 56px;
}

.country-aggregation { padding: 24px 0; }
.country-aggregation:last-of-type { padding-bottom: 80px; }
.country-list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 32px;
}
.country-list li {
	break-inside: avoid;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 0.5px solid var(--sand-line);
	font-family: var(--font-text);
	font-size: 16px;
}
.country-list-label { flex: 1; }
.country-list-badge {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	background: var(--sienna);
	color: var(--paper);
	padding: 2px 8px;
	border-radius: 999px;
	cursor: help;
}

@media (max-width: 700px) {
	.country-list { column-count: 1; }
	.country-hero { min-height: 44vh; }
	.country-hero-text { padding: 0 22px 40px; }
}

/* =====================================================================
   Generic page / fallback templates
   ===================================================================== */

.site-main.fallback,
.site-main.page {
	padding: 140px 32px 80px;
	min-height: 60vh;
}
.site-main.page .page-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 24px; }
.post-list { display: grid; gap: 24px; margin-top: 32px; }
.post-card {
	background: var(--paper);
	border: 0.5px solid var(--sand-line);
	border-radius: 4px;
	padding: 22px 26px;
}
.post-card-title { font-size: 22px; margin: 0 0 6px; }
.post-card-excerpt { font-family: var(--font-text); color: var(--ink-soft); }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 900px) {
	.flow-section,
	.entry-mini-map .mini-block { grid-template-columns: 1fr; gap: 24px; }
	.flow-section.flip > .flow-photo { order: 0; }
	.mag-grid { grid-template-columns: 1fr; }
	.mag-strip { grid-template-columns: repeat(2, 1fr); }
	.page-map .map-grid { grid-template-columns: 1fr; }
	.entry-next-prev .grid { grid-template-columns: 1fr; }
	.footer-row { grid-template-columns: 1fr; gap: 24px; }
	.single-entry .entry-hero-text { padding: 0 32px; }
	.entry-body { padding: 48px 28px 24px; }
	.entry-content > p:first-of-type::first-letter { font-size: 60px; }
	.entry-body.has-side-layout .container { max-width: 100%; }
	.entry-content .entry-side-figure {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 24px 0;
	}
	.entry-content .side-figure--right,
	.entry-content .side-figure--left {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	.entry-stops { padding: 4px 24px 16px; }
	.entry-gallery-section { padding: 4px 24px 24px; }
	.entry-stop { padding: 40px 0 28px; }
	.entry-stop-title { font-size: 26px; }
	.entry-stop-slider-prev,
	.entry-stop-slider-next { width: 36px; height: 36px; font-size: 22px; }
	.entry-stop-slider-prev { left: 8px; }
	.entry-stop-slider-next { right: 8px; }
	.entry-information { padding: 28px 24px 36px; }
	.entry-info-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.site-header { padding: 14px 22px; }
	body.has-hero .site-header.is-scrolled,
	.site-header.is-scrolled { padding: 10px 22px; }
	.site-logo { font-size: 18px; }
	.entry-gallery .gallery-grid { grid-template-columns: 1fr; }
	.entry-stop-slider-prev,
	.entry-stop-slider-next { width: 32px; height: 32px; font-size: 20px; }
	.entry-stop-slider-counter { font-size: 11px; padding: 3px 8px; top: 8px; right: 8px; }
	.entry-stop-slider-dots { bottom: 6px; padding: 5px 8px; }
	.entry-mini-stops { grid-template-columns: 1fr; }
	.entry-stop-title { font-size: 24px; }
	.hero { min-height: 90vh; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
	.hero-map .land,
	.hero-map .pin,
	.hero-map .grid-line,
	.hero-map .pin-label { opacity: 1 !important; transform: none !important; }
	.hero-map .route { stroke-dashoffset: 0 !important; }
	.hero-map .plane { display: none; }
}

/* =====================================================================
   Wandernder Dino — animiertes GIF laeuft am unteren Rand der Seite.
   mix-blend-mode: multiply blendet den hellen GIF-Hintergrund gegen
   den cremefarbenen Seiten-Hintergrund weg (auch ohne transparentes
   GIF). Wenn das GIF echte Transparenz hat, schadet der Filter nicht.
   ===================================================================== */
.flynroam-dino {
	position: fixed;
	left: 0;
	bottom: 12px;
	width: 100px;
	height: 80px;
	pointer-events: none;
	z-index: 5;
	animation: flynroam-dino-walk 48s linear infinite;
	will-change: transform;
	mix-blend-mode: multiply;
}

.flynroam-dino img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	/* Boost: hellgrauer GIF-Hintergrund wird auf weiss gepusht,
	   damit multiply ihn zuverlaessig ausblendet. */
	filter: brightness(1.06) contrast(1.04);
	/* Obere 22% abschneiden — Frame-Nummer im GIF wegblenden. */
	clip-path: inset(22% 0 0 0);
}

/* Hin und zurueck: GIF zeigt den Dino nach LINKS laufend — auf dem
   Hinweg (nach rechts) gespiegelt mit scaleX(-1), auf dem Rueckweg
   ungespiegelt. */
@keyframes flynroam-dino-walk {
	0%   { transform: translateX(0)                   scaleX(-1); }
	48%  { transform: translateX(calc(100vw - 100px)) scaleX(-1); }
	50%  { transform: translateX(calc(100vw - 100px)) scaleX( 1); }
	98%  { transform: translateX(0)                   scaleX( 1); }
	100% { transform: translateX(0)                   scaleX(-1); }
}

@media (max-width: 600px) {
	.flynroam-dino {
		width: 70px;
		height: 56px;
		bottom: 8px;
		animation-duration: 38s;
	}
	@keyframes flynroam-dino-walk {
		0%   { transform: translateX(0)                  scaleX(-1); }
		48%  { transform: translateX(calc(100vw - 70px)) scaleX(-1); }
		50%  { transform: translateX(calc(100vw - 70px)) scaleX( 1); }
		98%  { transform: translateX(0)                  scaleX( 1); }
		100% { transform: translateX(0)                  scaleX(-1); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.flynroam-dino { display: none; }
}

/* =====================================================================
   Videos — Trip-Level Compilations + Stop-Level Clips
   Facade-Pattern: erst beim Klick wird der echte iframe geladen, daher
   liegt die Optik in zwei States: Vor-Klick (Thumbnail + Play-Button)
   und Nach-Klick (iframe füllt das aspect-ratio-Wrapper).
   ===================================================================== */

/* Trip-Level: unterhalb der Galerie, Magazin-Look. */
.entry-videos {
	max-width: 1200px;
	margin: 32px auto 8px;
	padding: 0 32px;
}
.entry-videos-title {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: 22px;
	color: var(--ink);
	margin: 0 0 16px;
	letter-spacing: 0.01em;
}
.entry-video-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 20px;
}
.entry-videos.is-single .entry-video-list {
	grid-template-columns: 1fr;
}

/* Stop-Level: kompakter, eingerückt unter dem Stop-Body. */
.entry-stop-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin: 16px 0 24px;
}

/* Karte mit Aspect-Ratio + Label. */
.entry-video-card {
	position: relative;
	margin: 0;
	background: #0a1518;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(16, 42, 47, 0.18);
}
.entry-video-card.is-ratio-16-9 { aspect-ratio: 16 / 9; }
.entry-video-card.is-ratio-9-16 { aspect-ratio: 9 / 16; }
.entry-video-card.is-ratio-1-1  { aspect-ratio: 1 / 1; }
/* Wenn ein Label dazu kommt, soll die Karte sich um die Label-Höhe nach
   unten erweitern, ohne die Video-Aspect-Ratio zu zerstören. Trick: das
   aspect-ratio bezieht sich nur auf den Facade/iframe, das Label sitzt
   ausserhalb des Aspect-Wrappers. Aktuelle Implementierung: Label ist
   innerhalb der figure, mit position:relative — also ein winziger Hack
   damit das aspect-ratio noch greift: wir setzen min-height auf den
   Facade, statt aspect-ratio auf die ganze figure. */
.entry-video-card {
	aspect-ratio: auto;
}
.entry-video-card .entry-video-facade,
.entry-video-card .entry-video-iframe,
.entry-video-card .entry-video-native,
.entry-video-card .entry-video-oembed,
.entry-video-card .entry-video-fallback {
	display: block;
	width: 100%;
}
.entry-video-card.is-ratio-16-9 .entry-video-facade,
.entry-video-card.is-ratio-16-9 .entry-video-iframe,
.entry-video-card.is-ratio-16-9 .entry-video-native,
.entry-video-card.is-ratio-16-9 .entry-video-oembed { aspect-ratio: 16 / 9; }
.entry-video-card.is-ratio-9-16 .entry-video-facade,
.entry-video-card.is-ratio-9-16 .entry-video-iframe,
.entry-video-card.is-ratio-9-16 .entry-video-native,
.entry-video-card.is-ratio-9-16 .entry-video-oembed { aspect-ratio: 9 / 16; }

/* Facade = klickbarer Bereich mit Thumbnail + Play-Button. */
.entry-video-facade {
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}
.entry-video-facade:focus-visible {
	outline: 2px solid var(--accent, #c98a4b);
	outline-offset: 2px;
}
.entry-video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.3s ease;
	filter: brightness(0.92);
}
.entry-video-thumb--gradient {
	background: linear-gradient(135deg, #14464f 0%, #0a1518 100%);
}
.entry-video-facade:hover .entry-video-thumb {
	transform: scale(1.04);
	filter: brightness(1);
}
.entry-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	transition: transform 0.25s ease, filter 0.25s ease;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.entry-video-facade:hover .entry-video-play {
	transform: translate(-50%, -50%) scale(1.08);
}
.entry-video-play svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* iframe (nach Klick) füllt den Card-Bereich vollständig. */
.entry-video-iframe {
	border: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Native MP4. */
.entry-video-native {
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	object-fit: cover;
}

/* oEmbed-Fallback füllt automatisch. */
.entry-video-oembed iframe,
.entry-video-oembed embed,
.entry-video-oembed object {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	display: block;
	border: 0;
}

/* Link-Fallback: schlichtes Karten-Layout. */
.entry-video-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 24px;
	color: var(--paper, #f7f1e3);
	background: var(--ink, #102a2f);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	word-break: break-all;
}
.entry-video-fallback:hover {
	color: var(--accent, #c98a4b);
}

/* Label unter der Video-Card. */
.entry-video-label {
	padding: 10px 14px 12px;
	background: var(--paper, #f7f1e3);
	color: var(--ink, #102a2f);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-top: 1px solid rgba(16, 42, 47, 0.08);
}

/* Mobile Tweaks. */
@media (max-width: 700px) {
	.entry-videos { padding: 0 20px; margin: 24px auto 4px; }
	.entry-video-list,
	.entry-stop-videos {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.entry-video-play { width: 52px; height: 52px; }
	.entry-videos-title { font-size: 19px; margin-bottom: 12px; }
}