/* ==========================================================================
   dondarkness.com
   Dunkel, monochrom, ein gedämpfter Bernsteinakzent.

   Die Schriften stehen NICHT hier. Sie sind im Backend umstellbar, und die
   @font-face-Regeln werden deshalb im Seitenkopf erzeugt (lib/Settings.php,
   eingesetzt in views/layout.php). Vorteil: diese Datei bleibt unverändert
   und im Browsercache, wenn nur die Schrift wechselt — und es wird immer nur
   der Schnitt geladen, der auch eingestellt ist.
   ========================================================================== */

:root {
  --bg:        #0A0A0A;
  --surface:   #141414;
  --surface-2: #1A1A1A;
  --line:      #2A2A2A;
  --line-soft: #1C1C1C;

  /* Die Grauwerte sind auf Lesbarkeit gerechnet, nicht nach Gefühl gewählt.
     Gegen #0A0A0A: --dim 7,0 : 1 · --dim-2 4,7 : 1 · --accent 5,9 : 1 —
     alle über der Schwelle 4,5 : 1, die die WCAG für Fließtext verlangt.
     Die frühere, dunklere Fassung (#6E6E6E / #4A4A4A) sah ruhiger aus, lag
     aber bei 3,9 und 2,2 — die Koordinaten waren praktisch nicht lesbar. */
  --dim:       #9A9A94;
  --dim-2:     #7C7C78;
  --text:      #E8E8E4;
  --accent:    #B8814A;
  --accent-dim:#9C7040;

  /* Nur für Dekoration ohne Aussage: Rahmenecken, ASCII-Punkte, Fortschritts-
     balken. Darf leise sein, weil kein Wort daran hängt. */
  --accent-ghost: #6E4E2C;

  /* Die Punkte auf der Karte. Heller als --accent und --dim: auf der dunklen
     Grundkarte gingen die Farben der Seite unter. Legende und map.js lesen
     beide von hier. */
  --map-trip:  #E6A862;
  --map-place: #CFCFC8;

  /* Die drei Schriftrollen werden im Seitenkopf gesetzt, aus den
     Einstellungen (lib/Settings.php). Was hier steht, ist nur die Notlage,
     falls dieser Block einmal fehlt — die Seite bleibt dann lesbar.

       --display  große Überschriften, Zitate, Jahreszahlen im Blättern
       --list     die Ortsnamen in den Reiselisten
       --mono     Menü, Datum, Koordinaten UND die ASCII-Weltkarte

     --mono muss dicktengleich bleiben. Die Weltkarte ist ein Zeichenraster;
     mit einer Proportionalschrift franst jede Zeile unterschiedlich aus und
     die Küstenlinien zerfallen. */
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: Georgia, 'Times New Roman', serif;
  --list:    Georgia, 'Times New Roman', serif;

  /* Die Kurven stammen aus der Animationslehre: ease-out für alles, was
     erscheint oder verschwindet, ease für Hover. */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-strong: cubic-bezier(0.19, 1, 0.22, 1);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
  --frame: 14px;
}

/* ------------------------------------------------------------------ Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #0A0A0A; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: #0A0A0A;
  padding: .7rem 1.1rem; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: var(--frame); top: var(--frame); }

/* Text nur für Vorleseprogramme. Nicht display:none — das würde ihn auch
   dort entfernen. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* -------------------------------------------------------------- HUD-Rahmen */

.hud {
  position: fixed; inset: var(--frame);
  pointer-events: none; z-index: 50;
  border: 1px solid var(--line-soft);
}

.hud-c { position: absolute; width: 13px; height: 13px; }
.hud-c::before, .hud-c::after {
  content: ''; position: absolute; background: var(--accent-ghost);
}
.hud-c::before { width: 13px; height: 1px; }
.hud-c::after  { width: 1px; height: 13px; }

.hud-tl { top: -1px; left: -1px; }
.hud-tr { top: -1px; right: -1px; }
.hud-bl { bottom: -1px; left: -1px; }
.hud-br { bottom: -1px; right: -1px; }

.hud-tl::before, .hud-tl::after { top: 0; left: 0; }
.hud-tr::before { top: 0; right: 0; } .hud-tr::after { top: 0; right: 0; }
.hud-bl::before { bottom: 0; left: 0; } .hud-bl::after { bottom: 0; left: 0; }
.hud-br::before { bottom: 0; right: 0; } .hud-br::after { bottom: 0; right: 0; }

@media (max-width: 640px) { :root { --frame: 8px; } }

/* ------------------------------------------------------------------ Kopf */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--frame) + .75rem) calc(var(--frame) + 1.1rem);
  mix-blend-mode: normal;
}

.topbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--bg) 35%, rgba(10,10,10,0));
  pointer-events: none;
}

.brand { display: inline-flex; align-items: baseline; gap: .55rem; }
.brand-mark { color: var(--accent); font-size: 11px; transform: translateY(-1px); }
.brand-name {
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.brand:hover .brand-mark { color: var(--text); }
.brand-mark { transition: color 150ms ease; }

/* Umbrechen erlaubt. Ohne das reißt die Leiste bei 320 px über den Rand
   hinaus, und weil body overflow-x versteckt, wird „About" einfach zu „Abo"
   abgeschnitten, statt zu scrollen. Bei 375 px lag die Reserve bei 0,4 px —
   das ist Glück, keine Konstruktion. */
.nav {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .35rem clamp(.8rem, 2.4vw, 2rem);
  min-width: 0;
}

.nav a {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* Muss NACH den Grundregeln stehen — gleiche Spezifität, die spätere gewinnt. */
@media (max-width: 400px) {
  .brand-name { font-size: 11px; letter-spacing: .14em; }
  .nav { gap: .3rem .7rem; }
  .nav a { letter-spacing: .12em; }
}

/* ------------------------------------------------------------ Typografie */

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 9.2vw, 8.5rem);
  line-height: .94;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.display-year { font-family: var(--mono); font-weight: 500; letter-spacing: -0.03em; }

.eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 1.4rem;
}
.eyebrow a { color: var(--dim); border-bottom: 1px solid var(--line); }
.eyebrow a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sep { color: var(--dim-2); margin: 0 .35em; }

.lead {
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: var(--dim);
  max-width: 46ch;
  margin: 0 0 2rem;
  line-height: 1.7;
}
.lead a { color: var(--text); border-bottom: 1px solid var(--line); }
.lead a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.mono-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------- Kennzahlen */

.stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.2rem);
  margin: 0 0 2.4rem; padding: 0;
}
.stats div { margin: 0; }
.stats dt {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim-2); margin-bottom: .3rem;
}
.stats dd {
  margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stats-inline dd { font-size: 1.25rem; }

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 7rem var(--gutter) 5rem;
  overflow: hidden;
}

.hero-text { position: relative; z-index: 2; max-width: 54ch; }

.hero-cta {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--line);
  padding: .85rem 1.3rem;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.hero-cta:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.hero-cta-arrow { transition: transform 200ms var(--ease-out); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }

.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 2.2rem; z-index: 2;
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--dim-2); margin: 0;
}
.scroll-hint span { position: relative; padding-left: 1.6rem; }
.scroll-hint span::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1.1rem; height: 1px; background: var(--dim-2);
  transform-origin: left;
  animation: scroll-line 2.6s var(--ease-out) infinite;
}
@keyframes scroll-line {
  0%, 100% { transform: scaleX(.3); opacity: .4; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* --------------------------------------------------------- ASCII-Weltkarte */

.world {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
  /* Am rechten Rand ausblenden, damit die Überschrift lesbar bleibt. */
  -webkit-mask-image: radial-gradient(120% 120% at 78% 50%, #000 30%, rgba(0,0,0,.25) 100%);
          mask-image: radial-gradient(120% 120% at 78% 50%, #000 30%, rgba(0,0,0,.25) 100%);
}

.world-grid {
  position: relative;
  font-family: var(--mono);
  font-size: calc(100vw / (var(--cols) * 0.6));
  line-height: var(--lh);
  letter-spacing: 0;
  white-space: pre;
  font-variant-ligatures: none;
  font-kerning: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
  text-rendering: optimizeSpeed;
  user-select: none;
  contain: layout style paint;
}

.world-layer {
  margin: 0;
  font: inherit;
  white-space: pre;
}
.world-layer:not(.world-land) {
  position: absolute; inset: 0;
}

.world-land  { color: #242424; }
.world-sweep { color: #3C3C38; }
.world-pins  { color: var(--accent-ghost); }

.world-narrow { display: none; }

@media (max-width: 760px) {
  .world-wide { display: none; }
  .world-narrow { display: block; }

  /* Auf dem Handy sitzt die Karte oben im freien Raum über der Überschrift,
     nicht hinter dem Text — dort würde sie den Fließtext nur anrauen. */
  .world {
    align-items: flex-start;
    padding-top: 13vh;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0,0,0,0));
            mask-image: linear-gradient(to bottom, #000 60%, rgba(0,0,0,0));
  }
  .world-land  { color: #2C2C2C; }
  .world-sweep { color: #4A4A45; }

  .hero { align-items: flex-end; padding-top: 34vh; padding-bottom: 6rem; }
}

/* ----------------------------------------------------------- Wartungsseite */

/* Derselbe Kopfbereich wie auf der Startseite. Nur ist die Überschrift hier
   ein ganzer Satz statt zweier Wörter — in 54ch stünde jedes Wort allein in
   seiner Zeile. */
.hero-maint .hero-text { max-width: min(100%, 60rem); }
/* overflow-wrap: der Text kommt aus dem Backend. Ein langes Wort ohne
   Trennstelle liefe sonst rechts aus dem Bild, und weil .hero und body
   abschneiden, käme niemand mehr hin. */
.hero-maint .display { font-size: clamp(2.6rem, 7.6vw, 7.5rem); overflow-wrap: anywhere; }
.hero-maint .lead {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.35;
  max-width: 34ch;
  overflow-wrap: anywhere;
}

.maint-status {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.maint-dot {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.maint-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--accent);
  animation: maint-ping 2.6s var(--ease-out) infinite;
}
@keyframes maint-ping {
  0%        { transform: scale(1);   opacity: .7; }
  80%, 100% { transform: scale(3.4); opacity: 0; }
}

/* ------------------------------------------------ Hinweis für den Besitzer */

/* Steht nur da, wenn index.php ihn setzt: der Wartungsmodus ist an, und der
   angemeldete Besitzer sieht die Seite trotzdem. Besucher bekommen ihn nie. */
.sitenote {
  position: fixed; left: 0; right: 0; bottom: calc(var(--frame) + .9rem);
  z-index: 60;
  width: fit-content; max-width: calc(100% - 2 * var(--frame) - 1.5rem);
  margin: 0 auto; padding: .6rem 1rem;
  background: var(--surface); border: 1px solid var(--accent-dim);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; color: var(--text);
}
.sitenote a {
  margin-left: .6em;
  color: var(--accent); border-bottom: 1px solid var(--accent-dim);
  transition: color 150ms ease;
}
.sitenote a:hover { color: var(--text); }

@media (max-width: 640px) {
  .sitenote { font-size: 12px; letter-spacing: .08em; }
}

/* ------------------------------------------------------------- Abschnitte */

.band {
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  border-top: 1px solid var(--line-soft);
}
.band-tight { padding-top: clamp(.75rem, 2vw, 1.5rem); border-top: 0; }

.band-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.band-title {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  margin: 0;
}
.band-note { white-space: nowrap; }

.year-head, .map-head {
  padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------------ Reiseliste */

.trips { border-top: 1px solid var(--line-soft); }

.trip {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(.8rem, 2.5vw, 2rem);
  padding: clamp(1rem, 1.6vw, 1.35rem) .6rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.trip::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 200ms var(--ease-out);
}

.trip:hover, .trip:focus-visible {
  background: var(--surface);
  border-bottom-color: var(--line);
}
.trip:hover::before, .trip:focus-visible::before { transform: scaleY(1); }

.trip-no {
  font-size: 10px; color: var(--dim-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  transition: color 160ms ease;
}
.trip:hover .trip-no { color: var(--accent); }

.trip-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }

.trip-place {
  font-family: var(--list);
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}
.trip:hover .trip-place { color: var(--accent); }

.trip-country {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}

.trip-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  text-align: right; white-space: nowrap;
}
.trip-date {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.trip-coords {
  font-size: 10px; color: var(--dim-2); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  transition: color 160ms ease;
}
.trip:hover .trip-coords { color: var(--dim); }

.trip-marks {
  display: flex; align-items: center; gap: .7rem;
  font-size: 11px; color: var(--dim-2); white-space: nowrap;
}
.mark { font-variant-numeric: tabular-nums; }
.mark-album { color: var(--accent-dim); }
.trip:hover .mark-album { color: var(--accent); }

.trip-go {
  color: var(--dim-2);
  transition: transform 200ms var(--ease-out), color 160ms ease;
}
.trip:hover .trip-go { color: var(--accent); transform: translateX(3px); }

@media (max-width: 780px) {
  .trip { grid-template-columns: 2.2rem minmax(0,1fr) auto; row-gap: .35rem; }
  .trip-meta { grid-column: 2 / -1; align-items: flex-start; text-align: left; flex-direction: row; gap: .9rem; }
  .trip-marks { grid-column: 3; grid-row: 1; }
  .trip-coords { display: none; }
}

/* -------------------------------------------------------------- Jahresliste */

.years {
  display: grid;
  /* auto-fit statt auto-fill: leere Spuren werden eingezogen. Sonst malt
     der 1px-Raster-Hintergrund sie als graue Geisterkacheln aus. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.year {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.5rem 1.3rem;
  background: var(--bg);
  transition: background-color 160ms ease;
}
.year:hover { background: var(--surface); }

.year-no {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1;
  transition: color 160ms ease;
}
.year:hover .year-no { color: var(--accent); }

.year-bar { display: block; height: 2px; background: var(--line); overflow: hidden; }
.year-bar-fill {
  display: block; height: 100%; width: var(--fill);
  background: var(--accent-ghost);
  transform-origin: left;
  transition: background-color 160ms ease;
}
.year:hover .year-bar-fill { background: var(--accent); }

.year-count { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

.years-compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.years-compact .year { padding: 1rem; }

/* -------------------------------------------------- Schlagworte und Text */

.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.3rem 0 0; padding: 0; }
.tags li {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); padding: .3rem .6rem;
}

.prose { max-width: var(--measure); color: var(--text); }
.prose-narrow { max-width: 58ch; }
.prose p { margin: 0 0 1.3rem; color: var(--dim); }
/* Es gibt nur 400 und 500. Ohne diese Zeile faelscht der Browser einen
   700er-Schnitt und die Buchstaben laufen ineinander. */
.prose strong, .prose b { font-weight: 500; }
.prose p:first-child { color: var(--text); }
.prose h2, .prose h3 {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  margin: 2.6rem 0 1rem; color: var(--text);
}
.prose a { color: var(--text); border-bottom: 1px solid var(--accent-dim); transition: border-color 150ms ease, color 150ms ease; }
.prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.2rem; color: var(--dim); }
.prose li { margin-bottom: .45rem; }
.prose blockquote {
  margin: 1.8rem 0; padding-left: 1.2rem; border-left: 1px solid var(--accent-dim);
  font-family: var(--display); font-size: 1.3rem; line-height: 1.4; color: var(--text);
}
.prose blockquote p { color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.4rem 0; }
.prose code, .path {
  font-size: .9em; background: var(--surface); padding: .12em .4em;
  border: 1px solid var(--line-soft); color: var(--accent);
}
.prose .code { padding: 1rem; overflow-x: auto; }
.prose img { margin: 1.8rem 0; border: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------- Galerie */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 3rem 0;
}
/* overflow gehoert auf den Link, nicht auf die Kachel: sonst schneidet die
   Kachel den Fokusring ihres eigenen Kindes weg, und Tastaturnutzer sehen
   als einzige Stelle der Seite keine Markierung. */
.shot { margin: 0; background: var(--bg); }
.shot a { display: block; overflow: hidden; }
.shot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: .82;
  transition: filter 320ms var(--ease-out), opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.shot a:hover img, .shot a:focus-visible img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.02);
}

/* ------------------------------------------------------------- Reiseseite

   Jede Regel hängt an .trip-page, damit keine andere Seitenart etwas davon
   merkt. Aufbau, von oben nach unten:

     .trip-head     ein Rahmen aus Haarlinien, zwei Fächer:
       .trip-map      das Kartenband — die ASCII-Welt in voller Breite, der
                      Ort als leuchtender Punkt im Fadenkreuz
       .trip-sign     das Schild — Titel, EINE Zeile Fakten, rechts das Album
     .prose         nur wenn es Text gibt
     .gallery       nur wenn es Bilder gibt
     .trip-more     nur wenn es Bilder UND ein Album gibt
     .trip-pager    Früher | Jahr | Später, mit den Namen der Nachbarn

   Eine Reise ohne Text und Bilder passt auf einen Bildschirm, weil das
   Kartenband nachgibt: reicht die Fensterhöhe nicht für die ganze Karte,
   zeigt das Band einen Ausschnitt — immer den, in dem der Ort liegt. Schild
   und Blätterei behalten ihre Größe. Wie hoch das Band sein darf, steht im
   Abschnitt „Ein Bildschirm".

   Die erste Fassung dieser Seite war über tausend Pixel hoch: ein Titel in
   9vw, zwei halbleere Karten, ein Satz darüber, dass es keinen Text gibt, und
   eine Blätterei, die „Previous trip" sagte statt den Namen. */

.trip-page {
  /* Die feste Menüleiste ist rund 4,5rem hoch. */
  --trip-top: 4.75rem;
  /* Platz, der unter dem Kopf für die Blätterei frei bleibt: 1px Überlappung,
     rund 4,9rem Leiste, dazu Luft bis zum Fensterrand. */
  --trip-reserve: 6.25rem;
  /* Geschätzte Höhe des Schildes bei einzeiligem Titel. Wird nur in niedrigen
     Fenstern gebraucht (siehe „Ein Bildschirm"). */
  --trip-sign: 8.25rem;

  padding: var(--trip-top) var(--gutter) 1.5rem;
}

/* ------------------------------------------------------------------- Kopf */

.trip-page .trip-head {
  /* Das Kartenband rechnet seine Schriftgröße aus der Breite dieses Kastens. */
  container-type: inline-size;

  display: flex; flex-direction: column;
  margin: 0;
  border: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------ Kartenband */

/* Die Karte ist ein Zeichenraster. Vorschub einer Dicktengleichen: 0,6 em —
   dieselbe Annahme wie beim Seitenkopf der Startseite (.world-grid).

     Schriftgröße  = Kastenbreite / (Spalten × 0,6)
     Kartenhöhe    = Zeilen × Zeilenhöhe × Schriftgröße

   Die Rasterzahlen und die Lage des Ortes (--mx, --my: Mitte der Zelle als
   Anteil von Breite und Höhe) setzt views/pages/trip.php als style-Attribut
   am Band; was hier steht, ist nur die Vorgabe für den Fall, dass sie fehlen. */
.trip-page .trip-map {
  --cols: 84;
  --rows: 26;
  --lh: .6569;
  --mx: .5;
  --my: .5;
  --cell: calc(100cqw / (var(--cols) * .6));
  --map-h: calc(var(--rows) * var(--lh) * var(--cell));

  position: relative;
  flex: 0 1 auto;
  height: var(--map-h);
  min-height: min(7rem, var(--map-h));
  overflow: hidden;

  font-family: var(--mono);
  font-size: var(--cell);
  line-height: 1;
}

/* ---------------------------------------------------------- Ein Bildschirm */

/* Zwei Deckel, je nach Fensterhöhe — beide lassen nur das Band schrumpfen.

   Niedriges Fenster (unter 40rem): der Deckel sitzt am Band selbst und
   rechnet mit einer GESCHÄTZTEN Schildhöhe (--trip-sign). Ungenau, wenn der
   Titel zwei Zeilen braucht — dann rutscht die Blätterei um eine Titelzeile —,
   aber es kann nichts übereinander geraten.

   Ab 40rem Fensterhöhe: der Deckel sitzt am ganzen Kopf, und das Band nimmt,
   was das Schild übrig lässt (flex-shrink). Das ist genau, egal wie viele
   Zeilen der Titel hat. Die Grenze von 40rem gibt es, weil ein Kasten mit
   max-height überläuft, wenn sein Inhalt nicht weiter schrumpfen kann: ab
   40rem bleiben für Band-Minimum plus Schild 464 px, das reicht auch für
   einen dreizeiligen Titel mit Schlagworten und Albumknopf darunter. */
.trip-page .trip-map {
  max-height: max(7rem, calc(100vh - var(--trip-top) - var(--trip-reserve) - var(--trip-sign)));
  max-height: max(7rem, calc(100svh - var(--trip-top) - var(--trip-reserve) - var(--trip-sign)));
}

@media (min-height: 40rem) {
  .trip-page .trip-head {
    max-height: calc(100vh - var(--trip-top) - var(--trip-reserve));
    max-height: calc(100svh - var(--trip-top) - var(--trip-reserve));
  }
  .trip-page .trip-map { max-height: none; }
}

/* Der Ausschnitt. Ist das Band niedriger als die Karte, wird die Karte so
   verschoben, dass der Punkt im Band auf derselben anteiligen Höhe sitzt wie
   in der ganzen Karte (das Prinzip von background-position in Prozent):

     top        = --my × Bandhöhe       (Prozent von top  → der Kasten)
     translateY = −--my × Kartenhöhe    (Prozent von transform → das Element)

   Damit ist der Punkt immer im Bild, ohne dass das Stylesheet die Bandhöhe
   kennen muss. Ist das Band so hoch wie die Karte, hebt sich beides auf. */
.trip-page .minimap-canvas {
  position: absolute; left: 0;
  top: calc(var(--my) * 100%);
  transform: translateY(calc(var(--my) * -100%));
  margin: 0;

  display: block;
  font: inherit;
  /* Nach „font": die Kurzform setzt die Zeilenhöhe zurück. Das Raster hat
     seine eigene (--lh), sonst stimmt das Seitenverhältnis der Welt nicht. */
  line-height: var(--lh);
  letter-spacing: 0;
  white-space: pre;
  font-variant-ligatures: none;
  font-kerning: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
  text-rendering: optimizeSpeed;
  user-select: none;

  /* Land: leiser als Text, lauter als auf der Startseite — dort liegt eine
     Überschrift darüber, hier ist die Karte selbst der Kopf. Gemischt aus
     zwei vorhandenen Variablen, siehe die @supports-Regel gleich darunter. */
  color: var(--line);
}
/* Eigene Regel hinter @supports: stünden beide Angaben in einer Regel,
   gewönne immer die zweite — sie enthält var() und gilt deshalb beim Lesen
   als gültig. Wo es color-mix nicht gibt, erbte die Karte dann die helle
   Textfarbe. Die Prüfung braucht feste Farben, mit var() sagt sie immer ja. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .trip-page .minimap-canvas { color: color-mix(in srgb, var(--dim-2) 46%, var(--bg)); }
}

/* Der Ort. */
.trip-page .minimap-canvas b {
  position: relative;
  color: var(--accent); font-weight: 400;
  text-shadow: 0 0 .3em var(--accent), 0 0 .9em var(--accent), 0 0 1.8em var(--accent-dim);
}

/* Ein Ring um den Punkt, und ein zweiter, der sich ausbreitet. Auf einem
   Telefon ist eine Rasterzelle keine vier Pixel breit; die Ringe haben
   deshalb eine Mindestgröße in Pixeln. */
.trip-page .minimap-canvas b::before,
.trip-page .minimap-canvas b::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(2.1em, 20px); height: max(2.1em, 20px);
  margin: calc(max(2.1em, 20px) / -2) 0 0 calc(max(2.1em, 20px) / -2);
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}
/* Der feste Ring leuchtet nach innen und außen — auf dem Telefon, wo das
   Zeichen selbst nur ein paar Pixel groß ist, trägt er den Ort allein. */
.trip-page .minimap-canvas b::before {
  box-shadow:
    0 0 max(.75em, 10px) -2px var(--accent-dim),
    inset 0 0 max(.75em, 10px) -3px var(--accent-dim);
}
.trip-page .minimap-canvas b::after {
  opacity: 0;
  animation: trip-ping 3.2s var(--ease-out) infinite;
}
@keyframes trip-ping {
  0%        { transform: scale(1);   opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Das Fadenkreuz: eine Haarlinie auf der Breite, eine auf der Länge des
   Ortes, um den Punkt herum unterbrochen. */
.trip-page .trip-map.is-located::before,
.trip-page .trip-map.is-located::after {
  --gap: max(1.9em, 18px);
  content: ''; position: absolute; pointer-events: none;
}
.trip-page .trip-map.is-located::before {
  left: 0; right: 0; top: calc(var(--my) * 100%); height: 1px;
  background: linear-gradient(to right,
    var(--accent-ghost) calc(var(--mx) * 100% - var(--gap)), transparent 0,
    transparent calc(var(--mx) * 100% + var(--gap)), var(--accent-ghost) 0);
}
.trip-page .trip-map.is-located::after {
  top: 0; bottom: 0; left: calc(var(--mx) * 100%); width: 1px;
  background: linear-gradient(to bottom,
    var(--accent-ghost) calc(var(--my) * 100% - var(--gap)), transparent 0,
    transparent calc(var(--my) * 100% + var(--gap)), var(--accent-ghost) 0);
}

/* ---------------------------------------------------------------- Schild */

.trip-page .trip-sign {
  flex: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2.5rem;
  padding: 1.15rem 1.4rem 1.2rem;
  border-top: 1px solid var(--line-soft);
}

/* Der Kasten ohne Karte (Reise ohne Koordinaten) braucht die Trennlinie nicht. */
.trip-page .trip-sign:first-child { border-top: 0; }

.trip-page .trip-sign-main { min-width: 0; }

/* Die Zeilenhöhe ist 1, nicht .94 wie bei .display: die Schrift ist im
   Backend umstellbar, und mit .94 stoßen bei manchen Schnitten die
   Unterlängen der ersten Zeile an die Versalien der zweiten. */
.trip-page .trip-title {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1;
  margin: 0 0 .7rem;
  overflow-wrap: break-word;
}

.trip-page .trip-sign-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem 1.6rem;
}

/* Die eine Zeile: Land · Datum · Koordinaten. */
.trip-page .trip-facts {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 0; padding: 0;
  font-size: 13px; line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.trip-page .trip-fact { display: flex; align-items: baseline; white-space: nowrap; }
.trip-page .trip-fact dd { margin: 0; }
.trip-page .trip-fact:not(:last-child)::after {
  content: '·'; margin: 0 .75em; color: var(--dim-2);
}

/* Das Land darf umbrechen — ein langes („Bosnia and Herzegovina" und
   länger) schöbe sonst auf dem Telefon die ganze Seite zur Seite. */
.trip-page .trip-fact-country { color: var(--accent); letter-spacing: .2em; white-space: normal; }
.trip-page .trip-fact-date    { color: var(--text); }
.trip-page .trip-fact-pos     { color: var(--dim); letter-spacing: .1em; }

.trip-page .trip-fact-pos a {
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color 150ms ease, border-color 150ms ease;
}
.trip-page .trip-fact-pos a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.trip-page .tags { margin: 0; }

/* ----------------------------------------------------------------- Album */

/* Die eine Hauptsache der Seite, wenn es sie gibt. Gibt es kein Album, steht
   an ihrer Stelle nichts — das Schild ist dann einspaltig. */
.trip-page .trip-album {
  display: grid; grid-template-columns: auto auto;
  align-items: center;
  gap: .1rem 1.5rem;
  padding: .8rem 1.15rem .8rem 1.25rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.trip-page .trip-album-label {
  grid-column: 1;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  letter-spacing: .18em; text-transform: uppercase;
}
.trip-page .trip-album-note {
  grid-column: 1;
  font-size: 11px; line-height: 1.5; letter-spacing: .04em;
  color: var(--dim);
  transition: color 150ms ease;
}
.trip-page .trip-album-arrow {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 1.25rem; line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.trip-page .trip-album:hover {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
}
.trip-page .trip-album:hover .trip-album-note { color: var(--bg); }
.trip-page .trip-album:hover .trip-album-arrow { transform: translate(2px, -2px); }

/* ---------------------------------------------------------- Text, Bilder */

/* Der Text steht auf der Flucht des Titels (Rahmen + Innenabstand des
   Schildes), die Bilder auf der Flucht des Rahmens. Die Lesebreite bleibt
   bei --measure; der Innenabstand kommt obendrauf. */
.trip-page .prose {
  --trip-inset: calc(1.4rem + 1px);
  margin-top: 2.5rem;
  padding: 0 var(--trip-inset);
  max-width: calc(var(--measure) + 2 * var(--trip-inset));
}
.trip-page .gallery { margin: 2.5rem 0 0; }

/* Nach den Bildern noch einmal der Weg ins Album — wer unten angekommen ist,
   soll nicht wieder hochscrollen müssen. Leise: der Knopf im Kopf bleibt die
   Hauptsache. */
.trip-page .trip-more {
  margin: 1rem 0 0;
  padding: 0 calc(1.4rem + 1px);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.trip-page .trip-more a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-dim);
  transition: color 150ms ease, border-color 150ms ease;
}
.trip-page .trip-more a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------- Blätterei */

.trip-page .trip-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 2.5rem 0 0;
}

/* Folgt die Blätterei unmittelbar auf den Kopf (keine Notizen, keine Bilder),
   hängt sie an ihm: ein Stück, wie eine Bordkarte mit Abriss. */
.trip-page .trip-head + .trip-pager { margin-top: -1px; }

/* Zwei Zeilen je Hälfte: die Richtung (klein, mit Pfeil), darunter der Name
   der Nachbarreise und ihr Jahr. Die Namen stehen auf derselben Flucht wie
   der Titel links und der Albumknopf rechts. */
.trip-page .trip-pager-link {
  display: flex; flex-direction: column; justify-content: center;
  gap: .15rem;
  min-width: 0;
  padding: .8rem 1.4rem .9rem;
  background: var(--bg);
  transition: background-color 160ms ease;
}
.trip-page .trip-pager-next {
  grid-column: 3;
  align-items: flex-end;
  text-align: right;
}

.trip-page .trip-pager-dir { transition: color 160ms ease; }

.trip-page .trip-pager-arrow {
  display: inline-block;
  font-size: 14px; line-height: 1; letter-spacing: 0;
  transition: transform 200ms var(--ease-out);
}
.trip-page .trip-pager-prev .trip-pager-arrow { margin-right: .35em; }
.trip-page .trip-pager-next .trip-pager-arrow { margin-left: .35em; }

.trip-page .trip-pager-name {
  font-family: var(--display); font-size: 1.35rem; line-height: 1.2;
  color: var(--text);
  /* Ohne die Breite schrumpft der Name in der rechten Hälfte auf seinen
     Inhalt und ein langes Wort läuft in die linke hinüber. */
  max-width: 100%;
  overflow-wrap: break-word;
  transition: color 160ms ease;
}
.trip-page .trip-pager-year {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Der Trennpunkt kommt aus dem Stylesheet, damit er auf dem Telefon — wo das
   Jahr unter dem Namen steht — nicht allein am Zeilenanfang hängt. */
.trip-page .trip-pager-year::before { content: '· '; }

.trip-page a.trip-pager-link:hover { background: var(--surface); }
.trip-page a.trip-pager-link:hover .trip-pager-name,
.trip-page a.trip-pager-link:hover .trip-pager-dir { color: var(--accent); }
.trip-page a.trip-pager-prev:hover .trip-pager-arrow { transform: translateX(-4px); }
.trip-page a.trip-pager-next:hover .trip-pager-arrow { transform: translateX(4px); }

/* Das Ende des Logbuchs: kein Nachbar. Die Hälfte bleibt stehen, damit die
   Leiste ihre Form behält, und sagt in einer leisen Zeile, warum sie leer
   ist. Kein Link, keine Hover-Fläche. */

/* Zurück zum Jahr. */
.trip-page .trip-pager-all {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem;
  padding: .8rem 2rem .9rem;
  background: var(--bg);
  text-align: center;
  transition: background-color 160ms ease;
}
.trip-page .trip-pager-all-year {
  font-family: var(--display); font-size: 1.35rem; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease;
}
.trip-page .trip-pager-all:hover { background: var(--surface); }
.trip-page .trip-pager-all:hover .trip-pager-all-year { color: var(--accent); }

/* Der Fokusring läge sonst unter der Nachbarzelle. */
.trip-page .trip-pager a:focus-visible { outline-offset: -4px; }

/* ----------------------------------------------------------------- Schmal */

/* Unter 900 px wird das Album nicht mehr neben, sondern unter die Fakten
   gesetzt: neben einem zweizeiligen Titel bliebe für die Faktenzeile sonst
   zu wenig Breite. */
@media (max-width: 900px) {
  /* Schild mit Albumknopf darunter: entsprechend höher geschätzt. */
  .trip-page { --trip-sign: 12.25rem; }
  .trip-page .trip-sign { grid-template-columns: minmax(0, 1fr); }
  .trip-page .trip-album { justify-self: start; }
}

@media (max-width: 640px) {
  .trip-page {
    /* Mit den vergrößerten Trefferflächen ist die Menüleiste hier höher. */
    --trip-top: 5.4rem;
    padding-bottom: 1.25rem;
  }

  /* Auf dem Telefon ist das Band von sich aus niedrig (ein Drittel der
     Breite); die Blätterei ist höher als am Schreibtisch. Keine Deckelung. */
  .trip-page .trip-head,
  .trip-page .trip-map { max-height: none; }

  .trip-page .trip-sign { padding: 1rem 1rem 1.1rem; gap: 1rem; }
  .trip-page .trip-title { margin-bottom: .6rem; }

  /* Koordinaten in die zweite Zeile: drei Fakten mit Sperrung passen nicht
     in 335 px, und ein Umbruch mitten in der Zeile sähe zufällig aus. */
  .trip-page .trip-facts { font-size: 12px; letter-spacing: .12em; row-gap: .15rem; }
  .trip-page .trip-fact-country { letter-spacing: .14em; }
  .trip-page .trip-fact-pos { flex-basis: 100%; }
  /* Der Trennpunkt vor dem Umbruch entfällt (gleiche Spezifität wie die
     Grundregel mit :not(), deshalb hier ebenfalls mit :not()). */
  .trip-page .trip-fact-date:not(:last-child)::after { content: none; }

  /* Der Knopf über die ganze Breite: mit dem Daumen von beiden Seiten. */
  .trip-page .trip-album {
    justify-self: stretch;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .9rem;
    padding: .85rem 1rem;
  }
  .trip-page .trip-album-note { font-size: 12px; }

  /* Früher | Später nebeneinander, das Jahr als eigene Zeile darunter. */
  .trip-page .trip-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trip-page .trip-pager-link { padding: .8rem .85rem .9rem; justify-content: flex-start; }
  .trip-page .trip-pager-next { grid-column: 2; }
  .trip-page .trip-pager-name { font-size: 1.1rem; }
  /* Name und Jahr untereinander: nebeneinander passt es nur bei kurzen
     Namen, und mal so, mal so sähe zufällig aus. */
  .trip-page .trip-pager-year { display: block; margin-top: .2rem; }
  .trip-page .trip-pager-year::before { content: none; }
  .trip-page .trip-pager-all {
    grid-column: 1 / -1; grid-row: 2;
    flex-direction: row; align-items: center; gap: .8em;
    min-height: 3rem; padding: .6rem 1rem;
  }
  .trip-page .trip-pager-all-year { font-size: 1.1rem; line-height: 1; }

  .trip-page .prose { --trip-inset: calc(1rem + 1px); margin-top: 2rem; }
  .trip-page .gallery { margin-top: 2rem; }
  .trip-page .trip-more { padding: 0 calc(1rem + 1px); line-height: 2; }
}

/* Kleines Telefon, oder eines mit eingeblendeten Leisten des Browsers: dort
   reichte die Höhe bei Reisen mit Album und langem Titel knapp nicht. Das
   Band gibt auch hier nach. Muss nach der Regel oben stehen, die die
   Deckelung aufhebt. */
@media (max-width: 640px) and (max-height: 36rem) {
  .trip-page .trip-map { max-height: max(3.75rem, calc(100svh - 31.5rem)); min-height: 0; }
}

/* -------------------------------------------------------------- Kartenseite */

.map-wrap { position: relative; padding: 0 var(--gutter) 2rem; }
.map {
  /* Nie höher als breit: die Karte zoomt nicht weiter heraus, als ihre Höhe
     mit der Welt zu füllen ist. Auf einem Telefon — hoch und schmal — wäre
     sonst nur ein Ausschnitt zu sehen, nie die ganze Welt. */
  height: min(72svh, 760px, calc(100vw - 2 * var(--gutter)));
  border: 1px solid var(--line);
  background: var(--surface);
  position: relative;
}
.map-fallback {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 2rem; text-align: center; color: var(--dim); font-size: 13px;
}
.map-fallback a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }

.map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .9rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.map-legend .dot { flex: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-place { background: var(--map-place); }
.dot-trip { background: var(--map-trip); box-shadow: 0 0 0 3px rgba(230, 168, 98, .22); }
.dot-cluster {
  width: 13px; height: 13px;
  background: #2A2016; border: 1.5px solid var(--map-trip);
}

/* MapLibre an die Seite angleichen */
.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) opacity(.65); }
/* Der Knopf „ganze Welt" trägt ein Zeichen statt eines Bildes. */
.maplibregl-ctrl-group .map-world { color: var(--dim); font-size: 15px; line-height: 1; }
.maplibregl-ctrl-group .map-world:hover { color: var(--map-trip); }
.maplibregl-ctrl-attrib {
  background: rgba(10,10,10,.82) !important;
  color: var(--dim-2) !important;
  font-family: var(--mono) !important; font-size: 10px !important;
}
.maplibregl-ctrl-attrib a { color: var(--dim) !important; }
.maplibregl-popup-content {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: .9rem 1.1rem !important;
  font-family: var(--mono);
  color: var(--text);
}
.maplibregl-popup-close-button { color: var(--dim) !important; font-size: 16px !important; }
.maplibregl-popup-tip { display: none !important; }
/* Über den Knöpfen der Karte (die liegen auf 2): auf einem Telefon deckten
   Plus und Minus sonst das Kreuz zum Schließen ab, und der Tipp darauf
   zoomte hinein. */
.maplibregl-popup { z-index: 3; }
.popup-name { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; display: block; margin-bottom: .25rem; }
/* Jede Angabe in ihrer eigenen Zeile — als Fließtext klebte die Adresse
   am ersten Verweis und die Verweise aneinander. */
.popup-meta { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.popup-link { display: block; width: fit-content; margin-top: .6rem; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-dim); }

/* ---------------------------------------------------------------- Blätterei */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem var(--gutter) 1rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 2rem;
}
.pager-link { display: flex; flex-direction: column; gap: .2rem; }
.pager-next { text-align: right; }
.pager-year {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  transition: color 160ms ease;
}
.pager-link:hover .pager-year { color: var(--accent); }
.pager-all {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); padding: .6rem 1rem;
  transition: color 150ms ease, border-color 150ms ease;
}
.pager-all:hover { color: var(--accent); border-color: var(--accent-dim); }

/* Die Jahres-Blaetterei schiebt Vor und Zurueck bewusst auseinander. Auf der
   Fehlerseite stehen dort zwei gleichwertige Angebote — die gehoeren
   nebeneinander, sonst liegt auf einem breiten Schirm eine Handbreit Leere
   dazwischen. */
.pager-choices { justify-content: flex-start; gap: .8rem; }

.doc-updated { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------------- Fuß */

.footer {
  padding: 3rem var(--gutter) calc(var(--frame) + 2.5rem);
  border-top: 1px solid var(--line-soft);
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-nav a {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  transition: color 150ms ease;
}
.footer-nav a:hover { color: var(--accent); }
.footer-note {
  margin: 1.6rem 0 0; font-size: 10px; letter-spacing: .1em;
  color: var(--dim-2); max-width: 52ch;
}

/* ------------------------------------------------------------ Bildansicht */

.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 6, 6, .96);
  padding: clamp(2rem, 6vw, 4rem);
}
.lightbox.is-open { display: flex; }

.lb-img {
  max-width: 100%; max-height: 82svh;
  object-fit: contain;
  border: 1px solid var(--line);
}

.lightbox button {
  position: absolute;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: 15px; line-height: 1;
  width: 2.6rem; height: 2.6rem; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.lightbox button:hover { color: var(--accent); border-color: var(--accent-dim); }
.lb-close { top: var(--frame); right: var(--frame); }
.lb-prev  { left: var(--frame); top: 50%; transform: translateY(-50%); }
.lb-next  { right: var(--frame); top: 50%; transform: translateY(-50%); }

.lb-count {
  position: absolute; bottom: var(--frame); left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 10px; letter-spacing: .2em; color: var(--dim-2);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Einblenden */

/* Der Ausgangszustand ist unsichtbar — das ist der heikle Teil: käme das
   Skript nie an (Fehler, Blocker, alter Browser), bliebe die halbe Seite
   dauerhaft leer. Deshalb zieht nach 1,5 s eine Notbremse, die den Inhalt
   auch ohne JavaScript sichtbar macht. Läuft das Skript, übernimmt es vorher. */
[data-reveal] > * {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal-failsafe 1ms linear 1.5s forwards;
}

/* Sobald das Skript da ist, setzt es diese Klasse und die Notbremse wird
   gelöst. Ohne das würde sie nach 1,5 s zuschlagen, lange bevor jemand bis
   zum Abschnitt gescrollt hat — und die Einblendung fände nie statt. */
[data-reveal].js-armed > * { animation: none; }

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

[data-reveal].is-in > * {
  animation: none;
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms);
}

/* ==========================================================================
   Telefon

   Muss NACH allem anderen stehen — gleiche Spezifität, die spätere Regel
   gewinnt.

   Zwei Dinge, die auf einem Zeigegerät kein Problem sind und auf einem
   Telefon sehr wohl:

   1. Die getrackten Versalien stehen im Entwurf auf 10 und 11 px. Das liest
      sich am Schreibtisch als feine Beschriftung und auf einem Telefon als
      Punktreihe. Hier ab 12 px.
   2. Die Menüpunkte waren 24 x 21 px groß. Ein Fingerkuppenabdruck misst
      rund 45 px; alles darunter trifft man daneben. Die Schrift bleibt
      klein, die Trefferfläche wächst über Innenabstand.

   Das Aussehen am Schreibtisch bleibt davon unberührt.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Trefferflächen --- */

  /* Eine Zeile, auch mit mehr Punkten: im Backend lassen sich Seiten ins
     Menü setzen, und die Leiste ist fest — bräche sie um, läge sie über dem
     Kopf jeder Seite. Was nicht hineinpasst, lässt sich seitlich schieben.
     flex-start, nicht flex-end: der Überlauf muss auf der Seite liegen, zu
     der man schieben kann. */
  .nav {
    gap: 0 1.1rem;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: none; white-space: nowrap;
    font-size: 12px;
    padding: .75rem 0 calc(.75rem - 2px);
  }

  .brand { padding: .5rem 0; }

  .footer-nav { gap: .2rem 1.4rem; }
  .footer-nav a { font-size: 12px; padding: .5rem 0; }

  .pager-all { font-size: 11px; padding: .85rem 1.1rem; }

  .hero-cta { font-size: 12px; padding: 1rem 1.4rem; }

  .tags li { font-size: 11px; padding: .45rem .7rem; }

  /* Die Bildansicht wird mit dem Daumen bedient. */
  .lightbox button { width: 3rem; height: 3rem; }

  /* --- Lesbare Beschriftungen --- */

  .eyebrow,
  .mono-label,
  .band-title,
  .trip-country,
  .trip-date,
  .trip-marks,
  .year-count { font-size: 12px; }

  .trip-no,
  .stats dt,
  .footer-note,
  .popup-meta,
  .popup-link { font-size: 11px; }

  /* Enger gesetzte Versalien: 12 px mit 0,2 em Sperrung brauchen mehr Platz,
     als eine Telefonzeile hat. */
  .eyebrow { letter-spacing: .14em; }
  .band-title { letter-spacing: .14em; }
  .trip-country, .trip-date { letter-spacing: .1em; }
}

/* Wirklich schmale Geräte.
   Die Grenze liegt bei 360 px, NICHT bei 380: 375 px ist die verbreitetste
   Telefonbreite überhaupt (iPhone SE, 12/13 mini). Eine Regel bei 380 hätte
   genau dort die eben erst vergrößerte Schrift wieder eingezogen. */
@media (max-width: 360px) {
  .nav { gap: 0 .8rem; }
  .nav a { font-size: 11px; letter-spacing: .1em; }
  .footer-nav { gap: .2rem 1rem; }
}

/* ------------------------------------------------- Bewegung auf Wunsch aus */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .scroll-hint span::before { animation: none; transform: scaleX(1); opacity: .6; }

  [data-reveal] > * { opacity: 1; transform: none; animation: none; }
}