/* ==========================================================================
   Modul „Reise“ – Satellitenkarte mit wachsender Route, Stationen, Zusammenfassung
   Querformat: Karte links, Bilder rechts · Hochformat (Handy, Tablet hochkant): Karte oben, Bilder unten
   Bewegung: assets/js/journey.js
   ========================================================================== */
.pws-jr {
	--hero-frame: 0px;
	--jr-bg: #0B1428;
	--jr-pl: 39vw;                      /* linke Kante der Bilder */
	--jr-top: 19.5vh;                   /* Oberkante der Bilder */
	--jr-ch: min(53vh, 44vw);           /* Höhe der Bilder */
	--jr-gap: 2.85vw;                   /* Abstand zwischen den Bildern */
	--jr-r: clamp(14px, 1.6vw, 26px);   /* Eckenradius */
	position: relative; z-index: 2; color: #fff; background: var(--jr-bg);
	height: calc(100vh * 8);            /* wird per Skript auf die echte Scroll-Länge gesetzt */
}
.pws-jr__stage {
	position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--jr-bg);
	isolation: isolate;
}

/* Welt: Übersichtskarte (nur „Reisen“) und Karten der Länder, per Skript von einer Kamera bewegt */
.pws-jr__world { position: absolute; inset: 0; z-index: 0; overflow: hidden; filter: brightness(calc(1 - var(--jr-dim, .3) * .75)) saturate(.92); }
.pws-jr__ov, .pws-jr__map { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pws-jr__ov { max-width: none; height: auto; user-select: none; pointer-events: none; }
.pws-jr__map img { position: absolute; max-width: none; height: auto; user-select: none; pointer-events: none; }
/* weiche Ränder: Detailbild → Umgebungsbild → Übersichtskarte */
.pws-jr__img, .pws-jr--chain .pws-jr__ctx, .pws-jr__ov {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
	mask-composite: intersect; }
.pws-jr__img { left: 0; top: 0; width: 100%; height: 100% !important; }
/* Leichte Fassung (Handy/Tablet): weicher Rand ist schon im Bild – keine Maske, die braucht auf dem iPhone viel Grafikspeicher */
.pws-jr img.is-lite { -webkit-mask-image: none; mask-image: none; }
/* Dreams: die Weltkarte hat keine Ränder, die man sieht – ohne Maske kann der Browser sie direkt als Textur skalieren
   (mit Maske legt Safari beim starken Hineinzoomen riesige Zwischenbilder an → Absturz) */
.pws-jr__ov.is-world { -webkit-mask-image: none; mask-image: none; }
/* Handy/Tablet: jedes Kartenbild als eigene Ebene, so skaliert der Browser es direkt statt die ganze Karte neu zu zeichnen;
   Umgebungsbild ohne Maske auch dann, wenn die leichte Fassung noch fehlt (sie entsteht im Hintergrund) */
.pws-jr.is-lite .pws-jr__map img { will-change: transform; }
.pws-jr.is-lite .pws-jr__ctx { -webkit-mask-image: none; mask-image: none; }
/* Handy: keine Hintergrund-Unschärfe (jede legt eine eigene Grafikebene an) und keine großen weichen Schatten */
.pws-jr.is-lite .pws-jr__btn, .pws-jr.is-lite .pws-jr__stats { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pws-jr.is-lite .pws-jr__btn { background: rgba(8, 14, 32, .7); }
.pws-jr.is-lite .pws-jr__stats { background: color-mix(in srgb, var(--jr-bg) 85%, transparent); }
.pws-jr.is-lite .pws-jr__card { box-shadow: none; }
/* Handy/Tablet: Abdunkeln über eine Fläche statt per Filter auf die riesigen Kartenbilder */
.pws-jr.is-lite .pws-jr__world { filter: none; }
.pws-jr.is-lite .pws-jr__world::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--jr-dim, .3) * .75); pointer-events: none; }
.pws-jr__routes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pws-jr__svg { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; overflow: visible; }
.pws-jr__anchor { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; }
.pws-jr__all { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: calc(var(--u, 1px) * 1.25); stroke-linejoin: round; stroke-linecap: round; }
.pws-jr__leg { fill: none; stroke: var(--jr-c, #F8B038); stroke-width: calc(var(--u, 1px) * 4.5); stroke-linejoin: round; stroke-linecap: round;
	stroke-dasharray: 1 1; stroke-dashoffset: 1; visibility: hidden; }
.pws-jr__dot { fill: #fff; transition: fill .3s; }
.pws-jr__head { fill: #fff; stroke: var(--jr-c, #F8B038); stroke-width: calc(var(--u, 1px) * 3.5); }

.pws-jr__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(120% 90% at 28% 50%, transparent 35%, color-mix(in srgb, var(--jr-bg) 70%, transparent) 100%),
		linear-gradient(to bottom, color-mix(in srgb, var(--jr-bg) 45%, transparent), transparent 20%, transparent 78%, color-mix(in srgb, var(--jr-bg) 55%, transparent)); }
/* Bereich, in den die Route eingepasst wird (unsichtbar, nur zum Messen) */
.pws-jr__focus { position: absolute; visibility: hidden; pointer-events: none;
	left: calc(var(--pws-gutter, 60px) + 1vw); right: calc(100% - var(--jr-pl) + 5vw); top: 30vh; bottom: 15vh; }
.pws-jr__notice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; margin: 0; padding: 12px 18px; background: #b32d2e; border-radius: 6px; font-size: 14px; }

/* Logo & Menü wie beim Videoscroll, ohne Rahmen */
.pws-jr .pws-hero__ui { --hero-top: clamp(20px, 4.4vh, 52px); inset: 0; padding-bottom: 0; z-index: 5; pointer-events: none; justify-content: flex-start; }
.pws-jr .pws-hero__top { pointer-events: auto; }
.pws-jr .pws-hero__nav .pws-menu .is-button > a { background: #fff; border-color: #fff; color: var(--jr-bg); }
.pws-jr .pws-hero__nav .pws-menu .is-button > a:hover { background: color-mix(in srgb, #fff 85%, transparent); }
.pws-jr .pws-logo__text { color: #fff; }
.pws-jr .pws-logo.has-light .pws-logo__img--dark { opacity: 0; }
.pws-jr .pws-logo.has-light .pws-logo__img--light { opacity: 1; }

.pws-jr__head-row { position: absolute; left: 0; right: 0; top: 20.5vh; z-index: 3; pointer-events: none; }
.pws-jr__country { margin: 0; color: #fff; font-size: clamp(26px, 2.2vw, 46px); line-height: 1.15; font-weight: 600; }

/* Stationen ---------------------------------------------------------------- */
.pws-jr__stops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pws-jr__stop { position: absolute; inset: 0; visibility: hidden; }
.pws-jr__stop.is-on { visibility: visible; }
/* unsichtbare Stationen nicht als eigene Grafikebenen vorhalten */
.pws-jr__stop:not(.is-on) .pws-jr__track, .pws-jr__stop:not(.is-on) .pws-jr__meta > * { will-change: auto; }
.pws-jr__track { position: absolute; left: var(--jr-pl); top: var(--jr-top); height: var(--jr-ch); display: flex; gap: var(--jr-gap); will-change: transform; pointer-events: auto; }
.pws-jr__card { position: relative; flex: none; height: 100%; aspect-ratio: var(--ar, .75); margin: 0; border-radius: var(--jr-r); overflow: hidden;
	background: rgba(255, 255, 255, .06); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.pws-jr__card img, .pws-jr__card video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.pws-jr__meta { position: absolute; left: 0; right: 0; top: calc(var(--jr-top) + var(--jr-ch) + 2.6vh); }
.pws-jr__meta > * { position: absolute; top: 0; margin: 0; will-change: transform, opacity; }
.pws-jr__count { right: calc(100% - var(--jr-pl) + 2.7vw); font-size: clamp(18px, 1.55vw, 30px); line-height: 1.2; font-weight: 300; white-space: nowrap; }
.pws-jr__count b { font-weight: 700; }
.pws-jr__title { left: calc(var(--jr-pl) + 1.6vw); right: auto; max-width: calc(var(--jr-ch) * .75 - 1.6vw); color: #fff; font-size: clamp(18px, 1.55vw, 30px); line-height: 1.2; font-weight: 600; }
.pws-jr__text { --tw: min(26vw, 30em); width: var(--tw); padding-top: .2em;
	/* unter dem zweiten Bild; ist das erste Bild breit (Querformat), höchstens so weit rechts, dass der Text ganz sichtbar bleibt */
	left: min(calc(var(--jr-pl) + var(--jr-w0, calc(var(--jr-ch) * .75)) + var(--jr-gap) + 1.35vw), calc(100% - var(--tw) - var(--pws-gutter, 60px)));
	font-size: clamp(12px, .82vw, 15px); line-height: 1.65; font-weight: 400; color: rgba(255, 255, 255, .92); pointer-events: auto; }
.pws-jr__text p { margin: 0 0 1em; }

/* Video: Steuerung unten rechts, nur beim Darüberfahren sichtbar */
.pws-jr__ctrl { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; opacity: 0; transition: opacity .25s; }
.pws-jr__card:hover .pws-jr__ctrl, .pws-jr__card:focus-within .pws-jr__ctrl, .pws-jr__card.show-ctrl .pws-jr__ctrl { opacity: 1; }
.pws-jr__btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
	background: rgba(8, 14, 32, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s; }
.pws-jr__btn[hidden] { display: none; }
.pws-jr__btn:hover { background: rgba(8, 14, 32, .8); }
.pws-jr__btn svg { width: 20px; height: 20px; fill: currentColor; }
.pws-jr__btn .is-off { display: none; }
.pws-jr__btn[data-on="0"] .is-on { display: none; }
.pws-jr__btn[data-on="0"] .is-off { display: block; }
.pws-jr__btn[data-act="sound"] .is-on { display: none; }
.pws-jr__btn[data-act="sound"] .is-off { display: block; }
.pws-jr__btn[data-act="sound"][data-on="1"] .is-on { display: block; }
.pws-jr__btn[data-act="sound"][data-on="1"] .is-off { display: none; }

/* Zusammenfassung */
.pws-jr__stats { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 36px); padding: clamp(20px, 2.4vw, 44px);
	aspect-ratio: auto; width: calc(var(--jr-ch) * .75); background: color-mix(in srgb, var(--jr-bg) 62%, transparent);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 60px rgba(0, 0, 0, .25); }
.pws-jr__stat { display: flex; flex-direction: column; gap: 4px; }
.pws-jr__num { font-size: clamp(34px, 3.6vw, 68px); line-height: 1; font-weight: 600; color: var(--jr-c, #F8B038); font-variant-numeric: tabular-nums; }
.pws-jr__label { font-size: clamp(12px, .9vw, 16px); line-height: 1.4; color: rgba(255, 255, 255, .85); }
.pws-jr__cta { --bg: #fff; --fg: var(--jr-bg); --bd: #fff; --hbg: var(--jr-c); --hfg: var(--jr-bg); --hbd: var(--jr-c); --r: 999px; margin-top: .4em; }
.pws-jr__agency { margin: 1em 0 0 !important; font-size: .9em; opacity: .7; }

.pws-jr__credit { position: absolute; right: 10px; bottom: 6px; z-index: 5; margin: 0; max-width: 60%; text-align: right;
	font-size: 9px; line-height: 1.3; color: rgba(255, 255, 255, .45); }
.pws-jr__credit a { color: inherit; }
.pws-jr__foot { position: absolute; left: 0; right: 0; bottom: clamp(18px, 3.8vh, 42px); z-index: 5; color: #fff; }

/* Hochformat: Karte oben, Bilder unten --------------------------------------- */
@media (max-aspect-ratio: 1/1) {
	.pws-jr {
		--jr-pl: var(--pws-gutter, 24px);
		--jr-top: 49svh;
		--jr-ch: min(31svh, 62vw);
		--jr-gap: 14px;
		--jr-r: 16px;
	}
	.pws-jr__focus { left: var(--pws-gutter, 24px); right: var(--pws-gutter, 24px); top: 21svh; bottom: calc(100% - 44svh); }
	.pws-jr__head-row { top: 12.5svh; }
	.pws-jr__country { font-size: clamp(22px, 6vw, 34px); }
	.pws-jr__meta { top: calc(var(--jr-top) + var(--jr-ch) + 2svh); }
	.pws-jr__count { right: auto; left: var(--jr-pl); font-size: 18px; }
	.pws-jr__title { left: calc(var(--jr-pl) + 3.4em); max-width: none; right: var(--pws-gutter, 24px); font-size: 18px; }
	.pws-jr__text { left: var(--jr-pl); right: var(--pws-gutter, 24px); width: auto; top: 2.4em; max-width: 34em; font-size: 14px; line-height: 1.55; }
	.pws-jr__shade { background:
		linear-gradient(to bottom, color-mix(in srgb, var(--jr-bg) 45%, transparent), transparent 18%, transparent 42%, color-mix(in srgb, var(--jr-bg) 75%, transparent) 62%); }
	.pws-jr__foot { display: none; }
	.pws-jr__stats { gap: 10px; padding: 16px; width: max(calc(var(--jr-ch) * .75), 46vw); }
	.pws-jr__num { font-size: clamp(24px, 7vw, 36px); }
	.pws-jr__label { font-size: 12px; }
	/* Zusammenfassung: etwas kleinere Bilder, damit Text und Button darunter Platz haben */
	.pws-jr__sum { --jr-ch: min(25svh, 52vw); }
	.pws-jr__sum .pws-jr__title { left: var(--jr-pl); }
	.pws-jr__sum .pws-jr__text { top: 1.9em; }
	.pws-jr__cta { --py: 11px; }
	.pws-jr__agency { font-size: 12px; }
	/* Quellenangabe ganz unten im sichtbaren Bereich (über der Browserleiste) */
	.pws-jr__credit { top: auto; bottom: 6px; left: var(--pws-gutter, 24px); right: var(--pws-gutter, 24px); max-width: none; font-size: 8px; }
	@supports (height: 100svh) { .pws-jr__credit { bottom: calc(6px + (100lvh - 100svh)); } }
}
/* Handy quer: wenig Höhe */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
	.pws-jr { --jr-top: 24vh; --jr-ch: 50vh; }
	.pws-jr__head-row { top: 24vh; }
	.pws-jr__focus { top: 34vh; bottom: 10vh; }
	.pws-jr__foot { display: none; }
	.pws-jr__text { font-size: 12px; line-height: 1.45; }
}

/* Ohne Skript: alles untereinander */
html:not(.pws-js) .pws-jr { height: auto; }
html:not(.pws-js) .pws-jr__stage { position: relative; height: auto; min-height: 100vh; padding: 30vh 0 10vh; }
html:not(.pws-js) .pws-jr__stops, html:not(.pws-js) .pws-jr__stop, html:not(.pws-js) .pws-jr__track, html:not(.pws-js) .pws-jr__meta, html:not(.pws-js) .pws-jr__meta > * { position: relative; inset: auto; left: auto; top: auto; visibility: visible; }
html:not(.pws-js) .pws-jr__stop { margin: 0 var(--pws-gutter) 60px; }
html:not(.pws-js) .pws-jr__track { overflow-x: auto; }

/* Header und Footer-Leiste des Themes über der Karte: erscheinen beim Hochscrollen, transparent mit weißer Schrift */
.pws-header.is-on-map, .pws-footbar.is-on-map { background: transparent; color: #fff; }
.pws-header.is-on-map .pws-menu a, .pws-header.is-on-map .pws-burger, .pws-header.is-on-map .pws-logo__text,
.pws-footbar.is-on-map .pws-footmenu a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.pws-header.is-on-map .pws-menu .is-button > a { background: #fff; border-color: #fff; color: #0B1428; text-shadow: none; }
.pws-header.is-on-map .pws-logo.has-light .pws-logo__img--dark { opacity: 0; }
.pws-header.is-on-map .pws-logo.has-light .pws-logo__img--light { opacity: 1; }
body.pws-nav-open .pws-header.is-on-map { background: var(--pws-c-bg); color: var(--pws-c-primary); }
body.pws-nav-open .pws-header.is-on-map .pws-burger, body.pws-nav-open .pws-header.is-on-map .pws-logo__text { color: var(--pws-c-primary); text-shadow: none; }

/* Hero-World: Sterne, Schriftzug hinten, Erdkugel, Schriftzug vorne */
.pws-jr.has-world .pws-jr__world, .pws-jr.has-world .pws-jr__routes { opacity: 0; }
.pws-jr__hero { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pws-jr__hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pws-jr__hero-sub { position: absolute; left: 0; right: 0; bottom: 13vh; margin: 0; padding-inline: var(--pws-gutter, 24px); text-align: center;
	color: rgba(255, 255, 255, .85); font-size: clamp(14px, 1.15vw, 19px); letter-spacing: .04em; opacity: 0; }
@media (max-aspect-ratio: 1/1) { .pws-jr__hero-sub { bottom: calc(16svh + (100lvh - 100svh)); } }

/* Outro: Bausteine scrollen nach dem Schriftzug über die stehende Erde */
.pws-jr__outro { position: relative; z-index: 6; padding-block: 18vh 16vh; color: #fff;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, #0B1428 82%, transparent) 22vh); }
.pws-jr__outro .pws-container > :first-child { margin-top: 0; }

/* Zeitraum der Reise über dem Ländernamen; der Name bleibt an seiner Stelle, der Zeitraum steht darüber */
.pws-jr__period { position: absolute; bottom: 100%; margin: 0 0 .5em; color: rgba(255, 255, 255, .78);
	font-size: clamp(12px, .85vw, 15px); line-height: 1.3; font-weight: 500; letter-spacing: .06em; }
@media (max-aspect-ratio: 1/1) { .pws-jr__period { font-size: 12px; margin-bottom: .35em; } }

/* Dreams: alle Orte als weiße Punkte, der aktive gelb */
.pws-jr__gdots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; }
.pws-jr__gdots circle { fill: #fff; transition: fill .3s; }
.pws-jr__gdots circle.is-active { fill: var(--jr-c, #F8B038); }
.pws-jr__done { display: inline-block; margin-left: .5em; padding: .2em .6em; border-radius: 999px; font-size: .5em; white-space: nowrap; font-weight: 600; vertical-align: middle;
	background: var(--jr-c, #F8B038); color: #0B1428; letter-spacing: .02em; }

/* Dreams-Intro: Orte als pulsierende Punkte auf der Erde, Vorschau beim Darüberfahren */
.pws-jr__gpins { position: absolute; inset: 0; pointer-events: none; }
.pws-jr__gpin { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; cursor: pointer; pointer-events: auto; box-shadow: 0 0 10px rgba(255, 255, 255, .55); transition: background-color .2s; }
.pws-jr__gpin::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }   /* größere Trefferfläche */
.pws-jr__gpin::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75);
	animation: pws-jr-pulse 2.4s ease-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.pws-jr__gpin:hover, .pws-jr__gpin:focus-visible { background: var(--jr-c, #F8B038); }
.pws-jr__gpin:hover::after, .pws-jr__gpin:focus-visible::after { border-color: var(--jr-c, #F8B038); }
@keyframes pws-jr-pulse { 0% { transform: scale(.35); opacity: .95; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pws-jr__gpin::after { animation: none; opacity: .6; } }
.pws-jr__gtip { position: absolute; left: 0; top: 0; width: 180px; pointer-events: none; opacity: 0; transition: opacity .2s;
	margin: -18px 0 0 -90px; translate: 0 -100%; }
.pws-jr__gtip.is-on { opacity: 1; }
.pws-jr__gtip-img { display: block; aspect-ratio: 4 / 3; border-radius: 14px; background: rgba(255, 255, 255, .08) center / cover no-repeat;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.pws-jr__gtip.no-img .pws-jr__gtip-img { display: none; }
.pws-jr__gtip-t { display: block; margin-top: 8px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }