/*
Theme Name: Kevin auf Reisen
Theme URI: https://kevinwoehler.de
Author: Kevin Wöhler
Description: Reise-Theme für kevinwoehler.de: Fotos bildschirmfüllend, Reisen als Panorama aus Kacheln, Route und Zeitleiste je Reise, Weltkarte aller Reisen. Alles lokal, nichts von Dritten vor einem Klick.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kevin-auf-reisen
*/

@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #0b0b0c;
	--bg-2: #141416;
	--bg-3: #1d1e21;
	--ink: #f4f3ef;
	--muted: #a7a59e;
	--line: #2a2a2e;
	--accent: #ff6a3d;
	--accent-ink: #1a0700;
	--gutter: clamp(16px, 4vw, 56px);
	--gap: 6px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
	--giant: clamp(4rem, 19vw, 18rem);
	--big: clamp(3.5rem, 11vw, 10rem);
	color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 1.125rem/1.7 var(--font);
	font-optical-sizing: auto;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, button { font: inherit; color: inherit; caret-color: var(--accent); }
button { cursor: pointer; }
html { scrollbar-color: var(--bg-3) var(--bg); }
h1, h2, h3 { margin: 0; font-weight: 200; line-height: .9; letter-spacing: -.04em; text-wrap: balance; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.screen-reader-text, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 16px; top: 16px; padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink); }

/* Kopfleiste */
.bar {
	position: fixed; z-index: 30; inset: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 18px var(--gutter);
	transition: background .4s var(--ease), padding .4s var(--ease);
}
.bar::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(rgb(0 0 0 / .55), transparent); pointer-events: none; transition: opacity .4s; }
.bar.is-scrolled { background: rgb(11 11 12 / .92); padding-block: 12px; backdrop-filter: saturate(1.4) blur(12px); }
.bar.is-scrolled::before { opacity: 0; }
.bar__mark { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.bar__nav { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem); font-size: 1.05rem; }
.bar__nav a { text-decoration: none; }
.bar__nav a[aria-current] { box-shadow: inset 0 -2px var(--accent); }
.bar__menu { display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; }

/* Menü-Overlay */
.overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.overlay::backdrop { background: var(--bg); }
.overlay[open] { animation: menu-in .5s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-2%); } }
.overlay__inner { min-height: 100%; padding: 88px var(--gutter) 64px; }
.overlay__close { position: fixed; top: 14px; right: var(--gutter); width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; }
.overlay__nav ul { list-style: none; margin: 0; padding: 0; }
.overlay__nav > ul { columns: 4 220px; column-gap: var(--gutter); margin-top: 48px; }
.overlay__nav > ul > li { break-inside: avoid; margin-bottom: 2rem; }
.overlay__nav > ul > li > a { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.overlay__nav > ul > li > a[href="#"] { pointer-events: none; }
.overlay__nav > ul > li:not(:has(.sub-menu)):has(> a[href="#"]) { display: none; } /* leere Kontinente */
.overlay__nav .sub-menu a, .overlay__nav > ul > li:not(:has(.sub-menu)) > a { display: inline-block; padding: .1rem 0; color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; letter-spacing: -.02em; text-transform: lowercase; text-decoration: none; }
.overlay__nav .sub-menu a:hover { color: var(--accent); }

.search { display: flex; max-width: 640px; border-bottom: 1px solid var(--line); }
.search__field { flex: 1; min-width: 0; padding: .8rem 0; border: 0; background: none; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; outline: none; }
.search__field::placeholder { color: #8d8b84; }
.search:focus-within { border-color: var(--accent); }
.search__btn { padding: 0 1rem; border: 0; background: none; color: var(--muted); }

/* Schaltflächen */
.btn {
	display: inline-flex; align-items: center; gap: .65rem;
	padding: 1rem 1.4rem; border: 0;
	background: var(--accent); color: var(--accent-ink);
	font-weight: 600; text-decoration: none;
	transition: background .25s, color .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(.97); }
.round { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .35); background: rgb(11 11 12 / .35); color: var(--ink); backdrop-filter: blur(8px); transition: background .2s, color .2s, border-color .2s; }
.round:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Panorama der neuesten Reisen */
.pano { position: relative; height: 100svh; min-height: 520px; }
.pano__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 92vw;
	height: 100%; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pano__track::-webkit-scrollbar { display: none; }
.pano__track:focus-visible { outline-offset: -4px; }
.pano__pane { position: relative; scroll-snap-align: start; overflow: hidden; border-right: var(--gap) solid var(--bg); }
.pano__pane:last-child { border-right: 0; }
.pano__link { position: absolute; inset: 0; display: block; text-decoration: none; }
.pano__media, .hero__media, .tile__media, .pager__img, .timeline__media { position: absolute; inset: 0; overflow: hidden; background: var(--bg-2); }
.pano__media img, .hero__media img, .tile__media img, .pager__img img, .timeline__media img { width: 100%; height: 100%; object-fit: cover; }
.pano__media::after, .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 30%, transparent 50%, rgb(0 0 0 / .7) 100%); }
.pano__text { position: absolute; left: var(--gutter); right: 0; bottom: clamp(96px, 14vh, 136px); }
.pano__name { display: block; font-size: var(--giant); font-weight: 200; line-height: .82; letter-spacing: -.05em; }
.pano__name.is-long, .hero .hero__name.is-long { font-size: var(--big); white-space: normal; line-height: .88; max-width: 14ch; margin-right: 0; }
.pano__meta { display: block; margin-top: 1.2rem; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: rgb(244 243 239 / .85); }
.pano__ctrl { position: absolute; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: .75rem; }
.pano__count { color: var(--accent); font-weight: 600; min-width: 4.5ch; text-align: center; font-variant-numeric: tabular-nums; font-size: .95rem; }

/* Reihen und Kacheln */
.row, .years, .world, .archive, .atlas, .trip__map, .timeline, .day__map, .page { padding-inline: var(--gutter); }
.row { padding-block: clamp(48px, 8vw, 104px) 0; }
.row__head, .section-title { margin-bottom: 1.5rem; font-size: clamp(2.25rem, 5vw, 4.5rem); color: var(--accent); }
.rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 21vw, 320px); gap: var(--gap);
	margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.is-dragging a { pointer-events: none; }

.tile {
	position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
	background: var(--bg-2); text-decoration: none;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .5s var(--ease);
}
.tile:active { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.97); }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile:focus-visible .tile__name, .tile:focus-visible .tile__title { color: var(--accent); }
.tile__media, .mosaic__tile, .timeline__media, .pager__img { background: linear-gradient(110deg, #1f2023 30%, #34353a 50%, #1f2023 70%) 0 0 / 300% 100%; animation: loading 1.6s linear infinite; }
@keyframes loading { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .tile__media, .mosaic__tile, .timeline__media, .pager__img { background: linear-gradient(135deg, #3a3b40, #1f2023 70%); } }
.tile__media img { transition: transform 1.2s var(--ease), filter .6s; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .78)); }
.tile__text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .2rem; padding: 1rem 1.1rem 1.05rem; }
.tile__name { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 300; line-height: .95; letter-spacing: -.03em; }
.tile--big .tile__name { font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 200; }
.tile__title { font-size: 1.35rem; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.tile__meta { font-size: .88rem; color: rgb(244 243 239 / .8); }
.tile__day { position: absolute; top: .1rem; left: .9rem; font-size: clamp(4.5rem, 7vw, 6.5rem); font-weight: 200; line-height: 1; letter-spacing: -.05em; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.tile--page { aspect-ratio: auto; min-height: 140px; }
.tile:hover .tile__name, .tile:hover .tile__title { color: var(--accent); }
.img-empty { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-3) 14px 15px); }

/* Alle Reisen nach Jahren */
.years { padding-block: clamp(40px, 5vw, 72px) 0; }
.years__title { font-size: var(--big); line-height: .85; margin-bottom: clamp(24px, 5vw, 64px); }
.years__title a { text-decoration: none; }
.years__title a:hover { color: var(--accent); }
.year { padding-block: var(--gap) 0; }
.year__num { display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: .9rem 1rem; background: var(--accent); color: var(--accent-ink); font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 200; line-height: .8; overflow: hidden; }
.year__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gap); }
@media (max-width: 1100px) { .year__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile--big { grid-column: span 2; aspect-ratio: 8 / 5; } /* zwei Spalten, gleiche Höhe wie die Nachbarn: keine leeren Rasterzeilen */

@media (max-width: 760px) {
	.year__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile--big { aspect-ratio: 8 / 5; }
}

/* Weltkarte als Satz */
.world { padding-block: clamp(80px, 12vw, 180px); }
.world__sentence { display: grid; margin-bottom: clamp(28px, 5vw, 56px); font-size: var(--big); font-weight: 200; }
.world__sentence span:nth-child(2) { padding-left: 8vw; }
.world__sentence span:nth-child(3) { padding-left: 16vw; }
.world__sentence--small { font-size: clamp(1.8rem, 4.5vw, 4rem); line-height: .95; letter-spacing: -.03em; margin: 1rem 0 0; }
.world .btn { margin-top: 1.5rem; }

/* Karten */
.map { position: relative; height: clamp(360px, 62svh, 720px); background: #0e0f11; isolation: isolate; }
.map--world { height: calc(100svh - 72px); min-height: 480px; margin-inline: calc(-1 * var(--gutter)); }
.map--teaser { height: clamp(300px, 52svh, 600px); }
.map__canvas { position: absolute; inset: 0; background: #0e0f11; }
.map__tiles { position: absolute; z-index: 800; left: 12px; bottom: 12px; padding: .55rem .9rem; border: 1px solid var(--line); background: rgb(11 11 12 / .85); font-size: .85rem; }
.map__tiles[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.map__note { position: absolute; z-index: 800; left: 12px; bottom: 56px; max-width: 34ch; margin: 0; padding: .5rem .75rem; background: rgb(11 11 12 / .85); font-size: .75rem; line-height: 1.4; color: var(--muted); }
.map--teaser .map__tiles { display: none; }
.map .leaflet-container { background: #0e0f11; font-family: var(--font); outline-offset: -2px; }
.map .leaflet-bar a { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.map .leaflet-bar a:hover { background: var(--accent); color: var(--accent-ink); }
.map .leaflet-control-attribution { background: rgb(11 11 12 / .7) !important; color: var(--muted); font-size: 10px; }
.map .leaflet-control-attribution a { color: var(--ink); }
.leaflet-tooltip.map-label { padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); font-size: .78rem; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 8px #000; }
.leaflet-tooltip.map-label::before { display: none; }
.leaflet-tooltip.map-label--now { color: var(--accent); font-size: .95rem; }
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { background: var(--bg-2); color: var(--ink); border-radius: 0; box-shadow: 0 12px 32px rgb(0 0 0 / .5); }
.map .leaflet-popup-content { margin: 0; width: 240px !important; font-size: .9rem; line-height: 1.4; }
.leaflet-popup-content img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.leaflet-popup-content p { margin: 0; padding: .7rem .9rem .9rem; }
.leaflet-popup-content a { text-decoration: none; }
.leaflet-popup-content strong { display: block; font-size: 1.05rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink); }
.map-pulse { animation: pulse 2s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 50% { stroke-width: 10; stroke-opacity: .15; } }

/* Titelbild (Tag und Reise) */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 8vh, 88px); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 1.2rem 0 0; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: rgb(244 243 239 / .9); }
.hero__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.hero__title { font-size: var(--big); line-height: .85; }
.hero__name { display: block; font-size: var(--giant); line-height: .82; letter-spacing: -.05em; }
.hero__name.is-long { font-size: var(--big); white-space: normal; max-width: 14ch; margin-right: 0; line-height: .88; }

.hero__day { display: block; margin-top: .12em; font-size: .5em; font-weight: 500; letter-spacing: -.03em; }
.hero__rest { display: block; margin-top: .4em; font-size: .28em; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }

/* Tage einer Reise */
.steps { padding: 20px var(--gutter); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.steps ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.steps a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .5rem; background: var(--bg-2); font-variant-numeric: tabular-nums; text-decoration: none; transition: background .2s, color .2s; }
.steps a:hover { background: var(--bg-3); color: var(--accent); }
.steps a[aria-current] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Text */
.prose { padding: clamp(48px, 8vw, 104px) var(--gutter); }
.prose > * { max-width: 68ch; margin-inline: auto; }
.prose > p:first-of-type { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.55; font-weight: 300; }
.prose p { margin-block: 0 1.2em; }
.prose h2, .prose h3 { margin: 2em auto .6em; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.prose figure { margin-block: 2rem; }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { padding: .7rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .wp-block-table.is-style-stripes tr:nth-child(odd) { background: var(--bg-2); }
.prose iframe { max-width: 100%; }

/* Foto-Mosaik (aus Robo Gallery) */
.prose > .mosaic, .prose > .wp-block-gallery { max-width: min(1680px, 100%); margin-block: clamp(40px, 6vw, 80px); }
.mosaic { --h: clamp(150px, 22vw, 340px); display: flex; flex-wrap: wrap; gap: var(--gap); }
.mosaic::after { content: ""; flex-grow: 1e4; }
.mosaic__tile { position: relative; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--h)); overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.mosaic__tile img { width: 100%; height: 100%; aspect-ratio: var(--r); object-fit: cover; transition: transform 1s var(--ease), opacity .8s var(--ease); }
.mosaic__tile:hover img { transform: scale(1.035); }
.mosaic__tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Zeitleiste der Reise */
.trip__map, .day__map { padding-block: clamp(56px, 8vw, 104px) 0; }
.timeline { padding-block: clamp(56px, 8vw, 104px); }
.timeline__list { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; counter-reset: day; }
.timeline__link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(16px, 3vw, 48px); align-items: end; text-decoration: none; }
.timeline__item:nth-child(even) .timeline__link { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.timeline__item:nth-child(even) .timeline__media { order: 2; }
.timeline__media { position: relative; inset: auto; aspect-ratio: 3 / 2; }
.timeline__num { grid-column: 1 / -1; font-size: var(--big); line-height: .8; color: var(--muted); transition: color .3s; }
.timeline__item:nth-child(even) .timeline__num { text-align: right; }
.timeline__link:hover .timeline__num, .timeline__link:focus-visible .timeline__num { color: var(--accent); }
.timeline__link:hover .timeline__media img { transform: scale(1.03); }
.timeline__media img { transition: transform 1.2s var(--ease); }
.timeline__text { display: grid; gap: .35rem; padding-bottom: .5rem; }
.timeline__date { color: var(--muted); font-size: .95rem; }
.timeline__title { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
.timeline__place { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-weight: 600; font-size: .95rem; }
.timeline__excerpt { color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 52ch; }
@media (max-width: 760px) {
	.timeline__link, .timeline__item:nth-child(even) .timeline__link { grid-template-columns: minmax(0, 1fr); }
	.timeline__item:nth-child(even) .timeline__media { order: 0; }
	.timeline__item:nth-child(even) .timeline__num { text-align: left; }
}

/* Weiter / zurück */
.pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); margin-top: clamp(56px, 8vw, 104px); }
.pager__link { position: relative; display: block; min-height: clamp(260px, 38vh, 420px); overflow: hidden; text-decoration: none; }
.pager__img::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .45); transition: background .4s; }
.pager__link:hover .pager__img::after { background: rgb(0 0 0 / .25); }
.pager__img img { transition: transform 1.2s var(--ease); }
.pager__link:hover .pager__img img { transform: scale(1.04); }
.pager__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; display: grid; gap: .4rem; }
.pager__link--next .pager__text { text-align: right; justify-items: end; }
.pager__dir { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.pager__link:hover .pager__dir { color: var(--accent); }
.pager__title { font-size: clamp(1.8rem, 3.5vw, 3.2rem); font-weight: 200; line-height: 1; letter-spacing: -.03em; }

/* Listen und Tafel */
.archive { padding-block: clamp(110px, 16vw, 200px) clamp(56px, 8vw, 104px); }
.archive__head { margin-bottom: clamp(32px, 5vw, 64px); }
.page .archive__head { padding-top: clamp(110px, 16vw, 200px); }
.archive__title, .atlas__title { font-size: var(--giant); }
.archive__lead { margin: 1rem 0 0; color: var(--muted); font-size: 1.15rem; }
.archive__head .search { margin-top: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--gap); }
.grid--trips { margin-block: var(--gap) clamp(56px, 8vw, 104px); }
.archive > .map { margin-bottom: var(--gap); }
.board { margin: 0 0 clamp(48px, 7vw, 88px); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.board__row {
	display: grid; grid-template-columns: 4.5rem minmax(0, 2fr) 6rem minmax(0, 2fr); gap: 1rem; align-items: baseline;
	padding: .85rem .75rem; border-top: 1px solid var(--line); text-decoration: none;
	transition: background .2s, color .2s;
}
.board__row:hover, .board__row:focus-visible, .board__row.is-active { background: var(--accent); color: var(--accent-ink); outline: 0; }
.board__row:hover .board__countries, .board__row.is-active .board__countries, .board__row:focus-visible .board__countries { color: var(--accent-ink); }
.board__year, .board__days { font-variant-numeric: tabular-nums; }
.board__name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; }
.board__countries { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) {
	.board__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
	.board__countries { grid-column: 2 / -1; margin-top: -.6rem; }
}
.atlas { padding-block: clamp(100px, 13vw, 160px) 0; }
.atlas__head { margin-bottom: 2rem; }
.atlas__list { padding-block: clamp(48px, 7vw, 88px); }
.empty { color: var(--muted); }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2.5rem; }
.page-numbers { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 .75rem; background: var(--bg-2); text-decoration: none; }
.page-numbers.current { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
a.page-numbers:hover { background: var(--bg-3); color: var(--accent); }

/* Fußzeile */
.foot { padding: clamp(80px, 12vw, 160px) var(--gutter) 32px; border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 104px); }
.foot__line { margin: 0 0 1.5rem; font-size: var(--big); font-weight: 200; line-height: .9; letter-spacing: -.04em; }
.foot__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(64px, 10vw, 128px); color: var(--muted); font-size: .95rem; }
.foot__meta ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

/* Ko-fi */
.kofi { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--bg-2); color: var(--ink); }
.kofi::backdrop { background: rgb(0 0 0 / .7); }
.kofi__bar { display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem .5rem 1rem; font-size: .9rem; color: var(--muted); }
.kofi__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; }
.kofi__frame iframe { display: block; width: 100%; height: min(690px, calc(100dvh - 140px)); border: 0; background: #fff; }
.kofi__fallback { display: block; padding: .75rem 1rem; font-size: .85rem; color: var(--muted); }

/* Vollbild-Fotos */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.lightbox::backdrop { background: rgb(5 5 6 / .96); }
.lightbox__stage { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.lightbox__img { max-width: 100vw; max-height: 100dvh; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: transform; }
.lightbox__count { position: absolute; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; font-size: .95rem; text-shadow: 0 0 6px #000; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border: 0; background: rgb(11 11 12 / .5); transition: background .2s, color .2s; }
.lightbox__btn:hover { background: var(--accent); color: var(--accent-ink); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 14px; top: 50%; translate: 0 -50%; }
@media (hover: none) { .lightbox__prev, .lightbox__next { display: none; } }

/* Bewegung: Inhalte sind ohne Skript sichtbar; mit Skript gleiten sie beim Scrollen herein. */
.js .reveal { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
.js .mosaic__tile img { opacity: 0; }
.js .mosaic__tile.is-in img { opacity: 1; }
@supports (animation-timeline: view()) {
	.pano__name { animation: glide linear both; animation-timeline: view(inline); animation-range: entry 0% cover 50%; }
	.pano__media img { animation: drift linear both; animation-timeline: view(inline); }
	@keyframes glide { from { translate: 30vw 0; opacity: 0; } }
	@keyframes drift { from { transform: scale(1.12) translateX(-4%); } to { transform: scale(1.12) translateX(4%); } }
}
.hero__name, .hero__day, .hero__meta { animation: rise 1.1s var(--ease) both; }
.hero__day { animation-delay: .08s; }
.hero__meta { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; translate: 6vw 0; } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js .reveal, .js .mosaic__tile img { opacity: 1; translate: none; }
	.tile { transform: none; }
}

@media (max-width: 700px) {
	.bar__mark { font-size: .95rem; }
	.bar__nav { gap: .9rem; font-size: .95rem; }
	.bar__menu span { display: none; }
	.pano__track { grid-auto-columns: 88vw; }
	.pano__pane { border-right-width: 4px; }
	.pano__ctrl { left: var(--gutter); right: auto; }
	.pano__text { bottom: 96px; }
	.rail { grid-auto-columns: 68vw; }
	.mosaic { --h: 130px; }
	.map--teaser { height: 280px; }
	.world__sentence span:nth-child(n) { padding-left: 0; }
}

/* Angeschnittene Riesenschrift darf die Seite nie verbreitern */
.years, .archive, .atlas, .world, .foot, main { overflow-x: clip; }

/* Riesenschrift: Wörter brechen nie mitten im Wort, das Skript verkleinert zu lange Namen, bis sie ganz hineinpassen. */
.pano__name, .hero__name, .archive__title, .atlas__title, .years__title { max-width: 100%; overflow-wrap: normal; hyphens: manual; }
.pano__text { right: var(--gutter); }

/* Impressum und Kontakt */
.legal { padding-inline: var(--gutter); }
.legal .archive__head { padding-top: clamp(110px, 16vw, 200px); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(32px, 6vw, 80px); }
.legal__facts { position: sticky; top: 96px; display: grid; gap: .4rem; padding: clamp(20px, 3vw, 36px); background: var(--bg-2); }
.legal__label { margin-top: 1.4rem; font-size: .85rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--accent); }
.legal__label:first-child, .legal__address + .legal__label { margin-top: 1.6rem; }
.legal__facts > .legal__label:first-child { margin-top: 0; }
.legal__address { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 200; line-height: 1.2; letter-spacing: -.02em; }
.legal__line { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.legal__text { max-width: 68ch; color: #d9d7d0; }
.legal__text h2, .legal__text h3 { margin: 2.2rem 0 .7rem; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.legal__text > :first-child { margin-top: 0; }
.legal__text p { margin: 0 0 1.1em; font-size: 1rem; line-height: 1.7; }
.legal__text p > strong:only-child { display: block; margin-top: 1.6rem; color: var(--ink); font-size: 1.25rem; font-weight: 400; } /* alte Zwischenüberschriften als fett gesetzte Absätze */
@media (max-width: 860px) {
	.legal__grid { grid-template-columns: minmax(0, 1fr); }
	.legal__facts { position: static; }
}

/* Kontaktformular (Forminator) im Look des Themes: Plugin-Stile werden gezielt überschrieben */
.legal__form .forminator-ui.forminator-custom-form { margin: 0 !important; padding: 0 !important; background: none !important; font-family: var(--font) !important; }
.legal__form .forminator-ui .forminator-row { margin-bottom: 1.4rem !important; }
.legal__form .forminator-ui .forminator-label { display: block; margin-bottom: .5rem !important; color: var(--muted) !important; font: 600 .85rem/1.3 var(--font) !important; letter-spacing: .02em; }
.legal__form .forminator-ui .forminator-required { color: var(--accent) !important; }
.legal__form .forminator-ui .forminator-input,
.legal__form .forminator-ui .forminator-textarea {
	width: 100% !important; padding: .9rem 1rem !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
	background: var(--bg-2) !important; color: var(--ink) !important; font: 300 1.2rem/1.5 var(--font) !important; box-shadow: none !important; outline: none;
	transition: border-color .2s, background .2s;
}
.legal__form .forminator-ui .forminator-textarea { min-height: 180px !important; resize: vertical; }
.legal__form .forminator-ui .forminator-input:focus,
.legal__form .forminator-ui .forminator-textarea:focus { border-bottom-color: var(--accent) !important; background: var(--bg-3) !important; }
.legal__form .forminator-ui .forminator-description { color: var(--muted) !important; font: .8rem var(--font) !important; }
.legal__form .forminator-ui .forminator-button-submit {
	display: inline-flex !important; align-items: center; padding: 1rem 1.6rem !important; border: 0 !important; border-radius: 0 !important;
	background: var(--accent) !important; color: var(--accent-ink) !important; font: 600 1.05rem var(--font) !important; box-shadow: none !important; cursor: pointer;
	transition: background .25s, transform .25s var(--ease);
}
.legal__form .forminator-ui .forminator-button-submit:hover { background: var(--ink) !important; }
.legal__form .forminator-ui .forminator-button-submit:active { transform: scale(.97); }
.legal__form .forminator-ui .forminator-response-message { border-radius: 0 !important; background: var(--bg-3) !important; color: var(--ink) !important; }
.legal__form .forminator-ui .forminator-error-message { background: none !important; color: #ff9b80 !important; padding: .4rem 0 0 !important; }
.legal__form .forminator-hidden { display: none !important; } /* Spam-Falle des Plugins */
/* Steht die Anschrift im Impressum-Text selbst, entfällt der Kasten: dann eine Spalte, Anschrift groß */
.legal__grid:not(:has(.legal__facts)) { grid-template-columns: minmax(0, 1fr); }
.legal__facts--text h2, .legal__facts--text h3 { margin: 1.6rem 0 .4rem; font-size: .85rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--accent); }
.legal__facts--text > :first-child { margin-top: 0; }
.legal__facts--text p { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.legal__facts--text .geschuetzt { display: block; font-size: 1.1rem; line-height: 1.6; }
.legal__facts--text h2 + .geschuetzt { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 200; line-height: 1.2; letter-spacing: -.02em; }
.legal__text h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 200; }
.legal__text .geschuetzt { display: block; margin: 0 0 1.2rem; color: var(--ink); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 200; line-height: 1.25; letter-spacing: -.02em; }

/* YouTube erst nach Klick */
.video { position: relative; aspect-ratio: 16 / 9; margin-block: 2rem; background: var(--bg-2); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1.5rem; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg-2) 70%); color: var(--ink); text-align: center; cursor: pointer; transition: border-color .2s; }
.video__play:hover, .video__play:focus-visible { border-color: var(--accent); }
.video__icon { width: 64px; height: 64px; padding: 16px; background: var(--accent); color: var(--accent-ink); }
.video__title { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 300; }
.video__note { max-width: 44ch; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.prose .geschuetzt { display: block; }
.legal__text > p:first-child { color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.55; }
.legal__text table { width: 100%; border-collapse: collapse; }
.legal__text td, .legal__text th { padding: .7rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }