/* ============================================================
   touren/tour.css — gemeinsames Stylesheet aller Hulk-Hike-Detailseiten.
   Vorher lag dieses CSS als ~230 Zeilen page-scoped Block in JEDER
   Tour-Datei. Jede neue Tour kopierte es mit, jede Korrektur musste
   n-mal gemacht werden, und die Werte drifteten gegen den Design-Kodex.

   Verbindlich: docs/design-kodex-v3.md
     Regel 1  zwei Flaechen (Papier | Wald), keine dritte
     Regel 2  auf Wald: Papier-Text + Leaf-Akzent · auf Papier: Forest-Text + Royal
              Gold NUR fuer Mono-Nummern/-Labels
     Regel 4  zwei Radien: Karten 28px, Controls 14px
     Regel 8  Gap 14px, Sektionsabstand 72px (Desktop 96px),
              Container min(100%-36px, 560px) / Desktop min(100%-64px, 1060px)
   ============================================================ */

/* Radien, Gap, Sektionsabstand und die zwei Flaechen stehen in v3.css und
   gelten site-weit. Hier nur noch, was allein den Touren gehoert. */
:root { --tour-breite: min(100% - 36px, 560px); }
@media (min-width: 900px) {
  :root { --sektion: 96px; --tour-breite: min(100% - 64px, 1060px); }
}

/* Jede Sektion sitzt im selben Raster — keine Einzelfall-Breiten mehr */
.tour-sektion {
  width: var(--tour-breite);
  margin-inline: auto;
  margin-top: var(--sektion);
}
.tour-sektion + .tour-sektion { margin-top: var(--gap); }
.tour-sektion--luft + .tour-sektion { margin-top: var(--sektion); }

/* ---------- BENTO: ein durchgehendes Raster statt gestapelter Vollbreite-Karten ----------
   Vorher war jede Sektion eine eigene, gleich breite Karte untereinander — Block,
   Block, Block. Hier laufen Text, Daten und Bilder durch dasselbe 12-Spalten-Raster
   und wechseln die Breite, sodass die Flaechen ineinandergreifen statt zu stapeln.
   Kodex Regel 8: ungleiche Karten sind erlaubt, Gap bleibt 14px, keine Rotation,
   kein Overlap ausser Foto→Karte im Hero. */
.tour-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.tour-bento > * { grid-column: span var(--span, 12); min-width: 0; }
/* Kacheln, die ueber zwei Zeilen laufen und damit die Reihen zusammenbinden */
.tour-bento > .spannt-2 { grid-row: span 2; }
@media (max-width: 860px) {
  .tour-bento { grid-template-columns: 1fr; }
  .tour-bento > * { grid-column: 1 / -1; }
  .tour-bento > .spannt-2 { grid-row: auto; }
}

/* Gemeinsamer Sektionskopf: Mono-Label links, Meta rechts */
.tour-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap); margin-bottom: 20px; flex-wrap: wrap;
}
.tour-kopf__label {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--leaf);
}
.tour-kopf__meta {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1px; color: var(--paper-faint);
}

/* ---------- FLAECHEN (Regel 1) ---------- */
.flaeche-wald {
  position: relative; overflow: hidden;
  border-radius: var(--r-karte); padding: clamp(24px, 3vw, 34px);
  background: var(--flaeche-wald);
  box-shadow: var(--shadow-mid);
}
.flaeche-wald::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.4; pointer-events: none;
}
.flaeche-wald > * { position: relative; z-index: 1; }
.flaeche-papier {
  position: relative; overflow: hidden;
  border-radius: var(--r-karte); padding: clamp(24px, 3vw, 34px);
  background: var(--flaeche-papier);
  box-shadow: var(--shadow-paper);
}
.flaeche-papier::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.5; pointer-events: none;
}
.flaeche-papier > * { position: relative; z-index: 1; }

/* ---------- HERO ---------- */
.tour-hero {
  position: relative; overflow: hidden;
  margin: clamp(14px, 3vh, 30px) 0 0;
  width: 100vw; margin-left: calc((100% - 100vw) / 2);
  min-height: clamp(480px, 78vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Der Hero endete als hartes Rechteck mit scharfer Kante zum Seitengrund —
     ein Bild, das auf der Seite liegt statt in ihr. Die Blende unten laeuft
     in --bg-deep aus, sodass das Foto in die Seite uebergeht.

     15.09.2026 nachgemessen: zwischen der letzten Zahl und dem ersten Inhalt
     lagen 167px (mobil) bzw. 191px. Die Blende war lange vorbei, bevor der
     Inhalt kam — dazwischen stand ein flaches Farbband. Genau das liest sich
     als Kante, nicht das Bildende selbst. Beide Abstaende zurueckgenommen,
     damit die Blende bis in den Inhalt reicht statt vorher auszulaufen. */
  padding-bottom: clamp(26px, 4.5vh, 54px);
}

/* Der erste Block ruecht naeher an den Hero. Ohne das bleibt die Luecke
   bestehen, auch wenn der Hero selbst kuerzer wird. */
.tour-hero + .tour-sektion { margin-top: clamp(26px, 3.5vh, 44px); }
.tour-hero__img {
  /* Vier Halte statt drei und frueherer Beginn: mit nur einem Zwischenhalt
     bei 91% sieht man die Blende ansetzen. Der lange, flache Auslauf laesst
     das Foto verschwinden, statt es abzuschneiden. */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.72) 79%, rgba(0,0,0,0.28) 91%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.72) 79%, rgba(0,0,0,0.28) 91%, transparent 100%);
}
.tour-hero__img { position: absolute; inset: 0; }
.tour-hero__img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-fokus, center 40%);
  animation: tourHeroZoom 2200ms var(--ease-lux) both;
}
@keyframes tourHeroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.tour-hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,35,26,0.55) 0, rgba(6,35,26,0) 22%),
    linear-gradient(180deg, rgba(3,15,9,0) 34%, rgba(6,35,26,0.6) 66%, rgba(6,35,26,0.94) 100%);
}
.tour-hero__inner {
  position: relative; z-index: 2;
  width: var(--tour-breite); margin: 0 auto;
  padding-bottom: clamp(22px, 3.5vh, 34px);
}
.tour-crumb {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(243,235,217,0.72);
  text-shadow: 0 1px 3px rgba(3,15,9,0.7);
}
.tour-crumb a { color: var(--leaf); text-decoration: none; }
.tour-badge {
  display: inline-flex; margin-top: 14px; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--auf-gold);
  background: var(--schild-flaeche); box-shadow: var(--schild-kante); padding: 5px 13px 5px 10px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
  filter: drop-shadow(0 2px 4px rgba(3,15,9,0.5));
}
.tour-hero h1 {
  margin: 14px 0 4px; font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(46px, 9vw, 96px); line-height: 0.94; letter-spacing: -1px;
  color: var(--paper); text-shadow: 0 2px 14px rgba(3,15,9,0.7), 0 0 50px rgba(3,15,9,0.5);
}
.tour-alt {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--leaf); text-shadow: 0 1px 3px rgba(3,15,9,0.8);
}
.tour-lead {
  margin-top: 14px; font-size: var(--t-body); line-height: 1.65;
  color: rgba(243,235,217,0.88); max-width: 46ch; text-shadow: 0 1px 4px rgba(3,15,9,0.7);
}

/* Fakten-Strip. EINE Zahlenskala fuer alle Fakten — auch fuer die Live-Werte.
   Vorher hatten Live-Fakten eine eigene, kleinere Groesse und brachen den Rhythmus. */
.tour-fakten {
  margin-top: clamp(18px, 3vh, 28px); padding-top: 16px;
  border-top: 1px solid rgba(243,235,217,0.24);
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 12px clamp(20px, 3.2vw, 40px);
}
.tour-fakt { display: flex; flex-direction: column; gap: 4px; }
.tour-fakt b {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1; letter-spacing: -0.5px;
  color: var(--paper); text-shadow: 0 1px 6px rgba(3,15,9,0.7);
  display: inline-flex; align-items: center; gap: 7px;
}
.tour-fakt span {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: rgba(243,235,217,0.62);
}
/* Live-Fakten: gleiche Skala, Leaf statt Papier — der Unterschied ist die Farbe, nicht die Groesse */
.tour-fakt--live b { color: var(--leaf); }
.tour-fakt--live span { color: rgba(126,208,155,0.8); }
.tour-fakt__puls {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 8px rgba(80,200,120,0.7);
  animation: tourPuls 2.4s ease-in-out infinite;
}
.tour-fakt__ico { display: inline-flex; color: rgba(243,235,217,0.85); }
.tour-fakt__ico svg { width: 19px; height: 19px; }
@keyframes tourPuls { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 640px) {
  .tour-fakten { gap: 10px 22px; }
  .tour-hero__img::after { background:
    linear-gradient(180deg, rgba(6,35,26,0.55) 0, rgba(6,35,26,0.15) 22%),
    linear-gradient(180deg, rgba(3,15,9,0.12) 8%, rgba(6,35,26,0.6) 52%, rgba(6,35,26,0.94) 100%); }
}

/* ---------- SPLIT: Praxis | Meinung ---------- */
.tour-split__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch;
}
@media (max-width: 820px) { .tour-split__grid { grid-template-columns: 1fr; } }
.tour-panel { display: flex; flex-direction: column; min-width: 0; }
.tour-panel__kicker {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--leaf); display: inline-flex; align-items: center;
}
.flaeche-papier .tour-panel__kicker { color: var(--gold-ink); }
.tour-panel__title {
  margin-top: 9px; font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(22px, 2.6vw, 27px); line-height: 1.08; color: var(--paper);
}
.tour-panel__title em { font-style: italic; color: var(--leaf); }
.flaeche-papier .tour-panel__title { color: var(--forest); }
.flaeche-papier .tour-panel__title em { color: var(--royal); }
.tour-rows { margin-top: 20px; }
.tour-row {
  display: grid; grid-template-columns: 86px 1fr; gap: 3px 16px; padding: var(--gap) 0;
  border-top: 1px solid rgba(126,208,155,0.13);
}
.tour-row:first-child { border-top: 0; padding-top: 2px; }
.tour-row dt {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--leaf); padding-top: 3px;
}
.tour-row dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--paper-dim); }
.tour-row dd strong { color: var(--paper); font-weight: 700; }
.tour-panel__foot {
  margin-top: auto; padding-top: 18px; font-size: 12.5px; line-height: 1.55;
  color: var(--paper-faint);
}
.tour-panel__foot a { color: var(--leaf); text-decoration: none; }
.tour-panel__foot a:hover { color: var(--mint); }
.tour-note__body {
  margin: 16px 0 12px; max-width: 46ch; font-size: var(--t-body); line-height: 1.65;
  color: #1E3A2A;
}
.tour-note__sig {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 27px;
  color: #0B4A2E; transform: rotate(-3deg);
}
.tour-proof {
  margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(24,43,31,0.16);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.tour-proof div { display: flex; flex-direction: column; }
.tour-proof b {
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink-tief);
  letter-spacing: 0.5px;
}
.tour-proof span {
  margin-top: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-meta);
}
.tour-proof .src {
  width: 100%; margin-top: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-meta);
}

/* ---------- ZEITACHSE (nur Touren, bei denen die Uhrzeit die Geschichte ist) ----------
   Regel 1: die Flaeche ist Wald wie ueberall. Der Tagesanbruch lebt in der
   1px-Datenspur und den Punkten, nicht in einer dritten Hintergrundfarbe. */
.tour-arc__track {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap); list-style: none; margin: 0; padding: 0;
}
.tour-arc__track::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 1px;
  background: linear-gradient(90deg,
    rgba(155,217,180,0.35) 0%, rgba(155,217,180,0.5) 40%,
    var(--leaf) 62%, var(--gold-band-hell) 100%);
}
.tour-arc__step { position: relative; padding-top: 24px; min-width: 0; }
.tour-arc__step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: #0E2C1D; border: 2px solid rgba(155,217,180,0.5);
}
.tour-arc__step--peak::before {
  border-color: var(--gold-band-hell); background: rgba(232,191,37,0.34);
  /* War 14 px Halo. Ein Kartenzeichen trennt sich durch KANTE vom Grund,
     nicht durch Leuchten — 5 px reichen, um es zu finden. */
  box-shadow: 0 0 0 1.5px rgba(20,14,2,0.6), 0 0 5px rgba(232,191,37,0.3);
}
.tour-arc__step:last-child::before { border-color: var(--leaf); background: var(--leaf); }
.tour-arc__time {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1; letter-spacing: -0.5px;
  color: var(--paper);
}
.tour-arc__step--peak .tour-arc__time { color: var(--gold-band-hell); }
.tour-arc__what {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(243,235,217,0.6);
}
.tour-arc__note {
  margin-top: clamp(20px, 2.8vw, 26px); padding-top: 16px;
  border-top: 1px solid rgba(243,235,217,0.14);
  font-size: 13.5px; line-height: 1.6; color: var(--paper-dim); max-width: 62ch;
}
@media (max-width: 620px) {
  .tour-arc__track { grid-template-columns: 1fr 1fr; gap: 24px var(--gap); }
  /* zweizeilig waere eine durchgehende Linie gelogen */
  .tour-arc__track::before { display: none; }
}

/* ---------- HOEHENPROFIL ---------- */
.tour-svg {
  width: 100%; height: clamp(132px, 21vh, 180px); color: var(--leaf);
  overflow: visible; display: block; touch-action: pan-y;
}
.tour-svg .fill { fill: url(#tourVerlauf); opacity: 0; transition: opacity 900ms var(--ease-lux) 500ms; }
.tour-svg .line {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(80,200,120,0.4));
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.tour-svg .peak-dot {
  fill: var(--emerald); opacity: 0;
  filter: drop-shadow(0 0 6px rgba(80,200,120,0.9)); transition: opacity 400ms 1200ms;
}
.tour-svg .peak-x { color: var(--paper); opacity: 0; transition: opacity 500ms 1400ms; }
.tour-svg .sun-dot {
  fill: var(--gold-band-hell); opacity: 0;
  filter: drop-shadow(0 0 0.8px rgba(20,14,2,0.8)) drop-shadow(0 0 3px rgba(232,191,37,0.35));
  transition: opacity 500ms 1500ms;
}
/* Beschriftung liegt als HTML ueber dem SVG, nicht darin.
   Im SVG wuerde preserveAspectRatio="none" den Text mitverzerren: bei 900er
   viewBox auf 180px Hoehe schrumpft eine 11px-Schrift auf gut 7px zusammen
   und wird zugleich horizontal gestreckt. */
.tour-profil__marke {
  position: absolute; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--paper-faint);
  pointer-events: none; white-space: nowrap;
  /* Halo statt Kasten: die Profillinie laeuft hinter der Schrift durch */
  text-shadow: 0 0 3px #123524, 0 0 8px #123524, 0 1px 2px rgba(6,26,17,0.9);
}
.tour-profil__marke--gipfel {
  /* linksbuendig NEBEN dem Gipfel, nicht mittig darauf — sonst liegt der Text
     genau auf der Spitze der Kurve */
  top: 2px; color: var(--leaf);
  display: inline-flex; align-items: center; gap: 6px;
}
.tour-profil__marke--gipfel::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 8px rgba(80,200,120,0.8);
}
.tour-profil__marke--sonne { color: var(--gold-band-hell); }
.tour-profil__marke--sonne::before { background: var(--gold-band-hell);
  box-shadow: 0 0 0 1px rgba(20,14,2,0.55), 0 0 4px rgba(232,191,37,0.3); }
@media (max-width: 560px) {
  /* auf schmalen Schirmen ist rechts vom Gipfel kein Platz mehr */
  .tour-profil__marke--gipfel { left: 0 !important; }
}
/* ---- Das Profil zeichnet sich, WAEHREND man es liest --------------------
   Vorher: ein einmaliges Zeichnen beim ersten Sichtkontakt (.in). Es lief
   ab, und danach lag die Linie still da. Genau das meinte Sebi mit
   "steady" — etwas passiert einmal und dann nie wieder.

   Jetzt haengt der Fortschritt am Scrollweg: die Linie waechst mit, waehrend
   man an ihr vorbeiscrollt, und schrumpft zurueck, wenn man hochscrollt. Der
   Besucher GEHT die Tour ab. Das ist die Bewegung, die etwas ueber den
   Inhalt sagt — nicht noch ein Einblenden (docs/lebendig-evidenz.json,
   Regel choreo-fuehrung).

   Der .in-Weg bleibt als Rueckfall fuer Engines ohne Scroll-Timeline. */
@keyframes tourDraw { to { stroke-dashoffset: 0; } }

@supports not (animation-timeline: view()) {
  .tour-profil.in .line { animation: tourDraw 1800ms var(--ease-lux) 300ms forwards; }
}
@supports (animation-timeline: view()) {
  .tour-profil .line {
    animation: tourDraw linear both;
    animation-timeline: view();
    /* Von "Profil taucht auf" bis "Profil steht in der Mitte": dadurch ist
       die Linie fertig, wenn man sie tatsaechlich liest. */
    animation-range: entry 18% cover 52%;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegungswunsch steht die Linie sofort vollstaendig da —
     das Standbild muss fuer sich tragen (Regel choreo-standbild). */
  .tour-profil .line { animation: none !important; stroke-dashoffset: 0 !important; }
}

.tour-profil.in .fill,
.tour-profil.in .peak-dot,
.tour-profil.in .peak-x,
.tour-profil.in .sun-dot { opacity: 1; }
.tour-profil__gridline { stroke: rgba(243,235,217,0.07); stroke-width: 1; }

/* Ablesen: Zeiger folgt dem Finger/der Maus und nennt Hoehe und Distanz.
   Das Muster kennt man aus den Tourenportalen — hier auf das Noetige reduziert. */
/* Alles, was sich auf das Diagramm bezieht — Zeiger, Wert, Marken — sitzt in
   diesem Wrapper. Vorher hingen sie an der Karte und damit im Polster:
   die Startmarke stiess unten an den Hinweistext. */
.tour-profil__flaeche { position: relative; padding-bottom: 16px; }
.tour-profil__zeiger {
  position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: rgba(243,235,217,0.5); opacity: 0;
  transition: opacity 220ms var(--ease-lux);
}
.tour-profil.liest .tour-profil__zeiger { opacity: 1; }
.tour-profil__wert {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  padding: 7px 11px; border-radius: var(--r-control);
  background: rgba(10,32,22,0.94); border: 1px solid rgba(126,208,155,0.28);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--paper); white-space: nowrap; opacity: 0;
  transition: opacity 220ms var(--ease-lux);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.8);
}
.tour-profil.liest .tour-profil__wert { opacity: 1; }
.tour-profil__wert b { color: var(--leaf); font-weight: 700; }
.tour-profil__hint {
  margin-top: 16px; font-size: 0.76rem; line-height: 1.45;
  color: var(--paper-faint); max-width: 62ch;
}


/* Achsen. Die Beschriftung liegt als HTML ueber dem Diagramm, weil
   preserveAspectRatio="none" jeden SVG-Text mitverzerren wuerde.
   Gezeichnet wird sie von tour.js aus data-punkte — damit hat JEDE Tour
   dieselben Achsen, ohne dass jemand sie pro Seite pflegen muss. */
.tour-profil__achse { position: absolute; inset: 0; pointer-events: none; }
.tour-profil__tick {
  position: absolute; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; color: rgba(243,235,217,0.45); white-space: nowrap;
  text-shadow: 0 0 3px #123524, 0 0 6px #123524;
}
.tour-profil__tick--y { left: 0; transform: translateY(-50%); }
.tour-profil__tick--x { bottom: -4px; transform: translateX(-50%); }
@media (max-width: 560px) {
  /* schmal wird die Kilometerachse zum Gedraengel */
  .tour-profil__tick--x { display: none; }
}

/* ---------- FOTOS IM RASTER ----------
   Die Bilder stehen nicht mehr als eigene "Strecke" unter der Seite, sondern
   sitzen im Bento zwischen den Datenflaechen — dort, wo sie inhaltlich hingehoeren.
   Grid statt Scroller: WebKit/Gecko laden lazy beim horizontalen Scrollen nicht nach. */
/* Ein Foto bestimmt seine Form SELBST und erbt sie nie vom Nachbarn.

   Vorher hatte `.tour-shot` nur `min-height` und wuchs auf die Hoehe seiner
   Rasterzeile (`align-items: stretch`). Neben der hohen Routenkarte wurde aus
   einem 3:4-Foto eine 344x1107-Saeule — `object-fit: cover` hat dann 59 %
   weggeschnitten. Gemerkt hat es Sebi, nicht ein Tor.

   Fast alle Fotos hier sind Handy-Hochformat (0,75). Das ist die Vorgabe,
   nicht das Raster. */
.tour-shot {
  position: relative; min-width: 0; overflow: hidden; margin: 0;
  border-radius: var(--r-karte); box-shadow: var(--shadow-mid);
  align-self: start;
  aspect-ratio: var(--shot-ar, 3 / 4);
  min-height: var(--shot-min, 0);
}
/* Kacheln, die bewusst zwei Zeilen binden, duerfen weiter mitwachsen. */
.tour-bento > .tour-shot.spannt-2 { align-self: stretch; aspect-ratio: auto; }
/* Die Kachel liegt IN der Flaeche, nicht darauf: eine Kanten-Vignette in
   Waldton nimmt dem Foto den aufgeklebten Rand und bindet es an die
   Nachbarflaechen an. */
.tour-shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(126,208,155,0.14),
              inset 0 0 46px 10px rgba(14,44,29,0.5);
}
.tour-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--shot-fokus, center);
  transition: transform 900ms var(--ease-lux);
}
.tour-shot:hover img { transform: scale(1.035); }
.tour-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 40px 20px 18px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(243,235,217,0.9);
  background: linear-gradient(180deg, rgba(3,12,20,0) 0%, rgba(3,12,20,0.85) 68%);
}
.tour-shot figcaption b {
  display: block; font-family: 'Playfair Display', serif; font-size: 17px;
  font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--paper); margin-bottom: 3px;
}
@media (max-width: 860px) {
  /* Gestapelt traegt das BILD das Seitenverhaeltnis und steht im Fluss.
     Vorher lagen Bild und Bildunterschrift beide absolut — damit hatte die
     Figure keinen Inhalt im Fluss, keine intrinsische Breite und wurde in
     WebKit 0x0 gross. Chromium fuellte das Grid-Item trotzdem, WebKit nicht:
     drei Fotos waren auf dem iPhone unsichtbar, obwohl sie geladen hatten. */
  .tour-shot { min-height: 0; }
  .tour-shot img {
    position: static;
    width: 100%; height: auto;
    /* Rueckfall ist die Form des BILDES, nicht 4/3. Ein 3:4-Handyfoto verlor
       hier 44 % — und die Fotos hier sind fast alle hochkant. */
    aspect-ratio: var(--shot-mobil, var(--shot-ar, 4 / 3));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-shot img { transition: none; }
  .tour-shot:hover img { transform: none; }
  .tour-fakt__puls { animation: none; }
}

/* ---------- CTA + Fuss ---------- */
.tour-cta {
  width: min(100% - 36px, 700px); margin-inline: auto; margin-top: var(--sektion);
  text-align: center; padding: clamp(38px, 5vw, 58px) clamp(28px, 5vw, 52px);
}
.tour-cta h2 {
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(25px, 4vw, 35px); line-height: 1.1; color: var(--forest);
}
.tour-cta p {
  margin: 14px auto 26px; max-width: 42ch; font-size: 15px; line-height: 1.6;
  color: rgba(24,43,31,0.72);
}
.tour-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--auf-gold-tief); padding: 15px 28px;
  background: var(--schild-flaeche);
  box-shadow: var(--schild-kante);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  filter: var(--schild-schatten);
  transition: transform 400ms var(--ease-lux);
}
.tour-btn:hover { transform: translateX(4px); }
.tour-back {
  display: block; text-align: center; margin: 34px 0 60px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
}
.tour-back a { color: var(--paper-faint); text-decoration: none; }
.tour-back a:hover { color: var(--leaf); }


/* ============================================================
   WEGVERLAUF — die Route als eigene Karte.

   Warum selbst gezeichnet und nicht eingebettet: die Tour-Seiten laufen
   unter `script-src 'self'` und `img-src 'self' data:`. Leaflet, Mapbox
   und Google brauchen beides von fremden Hosts. Die Geometrie kommt
   deshalb zur Bauzeit aus OpenStreetMap in die Seite (scripts/route-
   holen.py) — zur Laufzeit geht kein einziger fremder Aufruf raus.
   ============================================================ */
.tour-route__flaeche {
  position: relative;
  /* Dunkler als die Karte drumherum: die Route soll aus der Flaeche
     heraustreten, nicht auf ihr liegen. */
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(126,208,155,0.07), transparent 62%),
    linear-gradient(180deg, rgba(6,26,17,0.5), rgba(6,26,17,0.78));
  border: 1px solid rgba(126,208,155,0.14);
  border-radius: var(--r-flaeche, 14px);
  overflow: hidden;
}
.tour-route__svg { display: block; width: 100%; height: auto; }

/* Luftbild als unterste Schicht: Sentinel-2 cloudless (EOX, CC BY 4.0).
   Esri/Google/Bing waeren hier ein Lizenzbruch — ihre Kacheln duerfen nicht
   zwischengespeichert werden, und `img-src 'self'` zwingt uns, das Bild ins
   Repo zu legen. 10 m Aufloesung ist fuer ein Untergrundbild genau richtig:
   es soll Stimmung geben, nicht gelesen werden. Deshalb auch leise. */
.tour-route__luftbild { opacity: 0.4; }
.tour-route__relief, .tour-route__luftbild { transition: opacity 900ms var(--ease-lux) 150ms; }
.tour-route__luftbild { opacity: 0; }
.tour-route.in .tour-route__luftbild { opacity: 0.4; }

/* Hoehenlinien aus EU-DEM (scripts/hoehenkarte.py). Sie sind Atmosphaere,
   nicht Information erster Ordnung — wer sie einzeln liest, hat die Karte
   verloren. Deshalb leise; jede fuenfte traegt etwas mehr, damit das Relief
   ohne Beschriftung lesbar wird. Ein Satellitenbild waere hier das Naheliegende
   gewesen: es scheitert an `img-src 'self'` und an den Kachel-Lizenzen. */
.tour-route__hoehenlinie {
  stroke: rgba(219,246,228,0.14); stroke-width: 1; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.tour-route__hoehenlinie--betont { stroke: rgba(219,246,228,0.26); stroke-width: 1.3; }
.tour-route__relief { opacity: 0; transition: opacity 900ms var(--ease-lux) 150ms; }
.tour-route.in .tour-route__relief { opacity: 1; }

/* Zwei Linien uebereinander: die untere gibt der oberen Tiefe, so wie ein
   Weg auf einer Karte einen Rand hat. Eine einzelne Linie sieht nach
   Diagramm aus, nicht nach Karte. */
.tour-route__schatten {
  stroke: rgba(6,26,17,0.85); stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
}
.tour-route__weg {
  stroke: var(--emerald); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(80,200,120,0.45));
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.tour-route.in .tour-route__weg { animation: routeZeichnen 2200ms var(--ease-lux) 250ms forwards; }
@keyframes routeZeichnen { to { stroke-dashoffset: 0; } }

.tour-route__km { fill: rgba(6,26,17,0.9); stroke: rgba(126,208,155,0.55); stroke-width: 1.5; }
.tour-route__kmtext {
  fill: var(--paper-faint); font-family: var(--mono); font-size: 13px;
  font-weight: 700; text-anchor: middle; letter-spacing: 0.5px;
}
.tour-route__kms { opacity: 0; transition: opacity 600ms var(--ease-lux) 1400ms; }
.tour-route.in .tour-route__kms { opacity: 1; }

.tour-route__start { fill: var(--gold-band-hell); stroke: rgba(6,26,17,0.9); stroke-width: 2.5; }
.tour-route__gipfel { stroke: var(--leaf); stroke-width: 3.2; stroke-linecap: round; }
.tour-route__start, .tour-route__gipfel { opacity: 0; transition: opacity 500ms var(--ease-lux) 1200ms; }
.tour-route.in .tour-route__start, .tour-route.in .tour-route__gipfel { opacity: 1; }

/* Beschriftung liegt als HTML ueber der Karte — SVG-Text wuerde beim
   Skalieren mitwachsen und auf dem Handy riesig werden. */
.tour-route__schild {
  position: absolute; transform: translate(-50%, -190%);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  pointer-events: none; white-space: nowrap;
  text-shadow: 0 0 3px #0a2016, 0 0 8px #0a2016, 0 1px 2px rgba(6,26,17,0.9);
}
.tour-route__schild--start { color: var(--gold-band-hell); }
.tour-route__schild--gipfel { color: var(--leaf); transform: translate(-50%, -230%); }

/* Kartenrand: Norden, Zahlen, Massstab — alles in EINEM Kasten, der in der
   freiesten Ecke sitzt (welche das ist, rechnet das Bau-Skript aus der
   Belegung der vier Ecken aus, Start und Gipfel zaehlen dabei schwer).

   Der Kasten hat eine FESTE Breite. Nur dadurch kann der Massstabsbalken
   darin ein exaktes Prozent tragen: `%` bezieht sich auf den Kasten. Beim
   ersten Versuch stand der Balken in einem Kasten mit Inhaltsbreite — sein
   Prozentwert war damit bedeutungslos, und ein Massstab, der nicht stimmt,
   ist schlimmer als keiner. */
.tour-route__kartenrand {
  position: absolute; width: 30%;
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: none;
}
.tour-route__kartenrand--links { left: 4.5%; }
.tour-route__kartenrand--rechts { right: 4.5%; text-align: right; }
.tour-route__kartenrand--oben { top: 7%; }
.tour-route__kartenrand--unten { bottom: 8%; }
.tour-route__kartenrand--rechts .tour-route__massstab { margin-left: auto; }
.tour-route__kartenrand--rechts .tour-route__norden { justify-content: flex-end; }

.tour-route__fakten { display: flex; flex-direction: column; gap: 12px; }
.tour-route__fakt { display: flex; flex-direction: column; gap: 3px; }
.tour-route__fakt-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--paper-faint);
  text-shadow: 0 0 6px #0a2016;
}
.tour-route__fakt-wert {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.4px; color: var(--paper);
  text-shadow: 0 0 8px #0a2016, 0 1px 2px rgba(6,26,17,0.9);
}

.tour-route__massstab {
  display: flex; flex-direction: column; gap: 5px; width: var(--balken);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.1px; color: var(--paper-faint); text-shadow: 0 0 6px #0a2016;
}
.tour-route__massstab i {
  display: block; height: 5px;
  border: 1px solid rgba(243,235,217,0.45); border-top: 0;
}
.tour-route__massstab em { font-style: normal; white-space: nowrap; }

.tour-route__norden {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(243,235,217,0.5); text-shadow: 0 0 6px #0a2016;
}
.tour-route__norden svg { width: 9px; height: 16px; }

.tour-route__wert {
  position: absolute; transform: translate(-50%, -160%); pointer-events: none;
  padding: 7px 11px; border-radius: var(--r-control);
  background: rgba(10,32,22,0.94); border: 1px solid rgba(126,208,155,0.28);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--paper); white-space: nowrap; opacity: 0;
  transition: opacity 220ms var(--ease-lux);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.8);
}
.tour-route.liest .tour-route__wert { opacity: 1; }
.tour-route__wert b { color: var(--leaf); font-weight: 700; }

/* Fuenf Zeilen Versalien liest niemand. Der Satz bleibt Satz, nur die
   Quellenangabe traegt die Mono-Auszeichnung. */
.tour-route__hint {
  margin-top: 16px; display: flex; flex-direction: column; gap: 5px;
}
/* Leise. Der Hinweis ist Fussnote, nicht Inhalt — vorher standen hier bis zu
   fuenf Zeilen, und auf einer Seite mit Profil, Karte und Zeitachse summiert
   sich das zu Rauschen. */
.tour-route__hint-satz {
  font-size: 0.76rem; line-height: 1.45; color: var(--paper-faint); max-width: 62ch;
}
.tour-route__quelle {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-faint) 62%, transparent);
}

@media (max-width: 560px) {
  .tour-route__kmtext { font-size: 16px; }
  /* Die Zahlen stehen auf dem Handy ohnehin im Faktenstrip weiter oben —
     hier nehmen sie der Karte nur Platz weg. Massstab und Norden bleiben:
     ohne sie ist es eine Zeichnung ohne Groesse und ohne Richtung. */
  .tour-route__fakten { display: none; }
  .tour-route__kartenrand { width: 42%; gap: 10px; }
  .tour-route__kartenrand--oben { top: 14px; }
  .tour-route__kartenrand--unten { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-route.in .tour-route__weg { animation: none; stroke-dashoffset: 0; }
  .tour-route__kms, .tour-route__start, .tour-route__gipfel { transition: none; }
}


/* ============================================================
   BILDSTRECKE — das Foto IST die Flaeche.

   Dritter Anlauf. Erst einzelne Kacheln im Bento-Raster, dann ein
   angehefteter Querstreifen (auf dem Handy 304 px klein), dann diese
   Strecke — und die erste Fassung davon war immer noch falsch. Sebi am
   22.09.2026: "sieht in safari am macbook komplett tot aus bei den
   bildern, alles so losgeloest".

   Er hatte recht, und der Fehler war grundsaetzlich: die Fotos hatten
   runde Ecken, einen Schlagschatten und einen Innenring — also sassen
   sie als KARTEN auf der gruenen Flaeche, jede eine kleine Insel mit
   viel Leere drumherum. Ein uniformes Kartenraster ist genau das, was
   der Anti-Slop-Kodex verbietet.

   Jetzt laeuft die Strecke ueber die volle Fensterbreite, die Bilder
   stossen aneinander, und statt eines Hereingleitens wandert das Bild
   IM Rahmen mit dem Scrollen (Parallaxe). Der Rahmen steht still, das
   Motiv bewegt sich — dadurch haengt die Flaeche zusammen, statt aus
   Einzelteilen zu bestehen.

   `html { overflow-x: clip }` steht in v3.css — deshalb ist der
   100vw-Ausbruch hier gefahrlos und `position: sticky` bleibt heil.
   ============================================================ */
.tour-strecke {
  grid-column: 1 / -1;
  width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; flex-direction: column;
  gap: clamp(3px, 0.4vw, 6px);   /* Fuge, kein Abstand: die Blaetter gehoeren zusammen */
}
.tour-strecke__kopf {
  width: var(--tour-breite); margin: 0 auto clamp(18px, 2vw, 30px);
}

/* Ein Blatt ist eine Bildbuehne mit fester Hoehe. Die Hoehe kommt vom
   Fenster, nicht vom Bild — so entsteht eine durchgehende Bahn statt
   einer Treppe aus unterschiedlich hohen Kacheln. */
.tour-blatt {
  margin: 0; position: relative;
  display: grid; grid-template-columns: 1fr;
  height: clamp(420px, 82vh, 860px);
}
.tour-blatt--paar { grid-template-columns: 1fr 1fr; gap: clamp(3px, 0.4vw, 6px); }
.tour-blatt--links  { grid-template-columns: 7fr 5fr; }
.tour-blatt--rechts { grid-template-columns: 5fr 7fr; }
.tour-blatt--rechts > .tour-shot { order: 2; }

/* Das Bild: randlos, ohne Ecken, ohne Schatten. Es soll nicht AUF der
   Flaeche liegen, es soll die Flaeche sein. */
.tour-strecke .tour-shot {
  position: relative; overflow: hidden; margin: 0; min-width: 0;
  align-self: stretch; height: 100%;
  aspect-ratio: auto; border-radius: 0; box-shadow: none;
  background: rgba(4,18,12,0.6);
}
.tour-strecke .tour-shot::after { content: none; }   /* Innenring der Kachel weg */
.tour-strecke .tour-shot img {
  position: absolute; left: 0; right: 0; top: -8%;
  width: 100%; height: 116%;      /* Ueberhang, in dem die Parallaxe laeuft */
  object-fit: cover; object-position: var(--shot-fokus, center 45%);
  transition: none;
}
.tour-strecke .tour-shot:hover img { transform: none; }

/* Der Text. Bei --voll und --paar liegt er IM Bild, unten links, auf
   einem schmalen Verlauf — bei --links/--rechts steht er in der eigenen
   Spalte und traegt die Seite mit. Beides in der Serife: die Zeile ist
   Sebis Satz, kein Datenfeld. */
.tour-blatt__text {
  z-index: 2; display: flex; flex-direction: column; gap: 10px;
}
.tour-blatt--voll > .tour-blatt__text,
.tour-blatt--paar .tour-blatt__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(50px, 9vh, 110px) clamp(20px, 4vw, 56px) clamp(20px, 3vh, 34px);
  background: linear-gradient(180deg, rgba(3,14,9,0) 0%, rgba(3,14,9,0.62) 58%, rgba(3,14,9,0.86) 100%);
  pointer-events: none;
}
.tour-blatt--paar .tour-blatt__halb { position: relative; min-width: 0; display: grid; }
.tour-blatt--paar .tour-blatt__halb > .tour-shot { grid-area: 1 / 1; }

/* Solo mit Textspalte: hier steht der Satz gross und allein. Genau das
   fehlte vorher — zwei winzige Mono-Zeilen in 40 % Leerraum. */
.tour-blatt--links > .tour-blatt__text,
.tour-blatt--rechts > .tour-blatt__text {
  align-self: center; justify-content: center;
  padding: clamp(24px, 3.4vw, 58px);
  min-width: 0;
}
.tour-blatt--rechts > .tour-blatt__text { justify-self: end; }

.tour-blatt__text b {
  /* Zeilenlaenge an der EIGENEN Schriftgroesse begrenzen. `34ch` am
     Behaelter loeste gegen die geerbte 16-px-Groesse auf — die Spalte
     schrumpfte auf ~270 px und der Satz brach auf zwei Woerter je Zeile. */
  max-width: 17em;
  font-family: 'Playfair Display', 'Playfair Fallback', serif; font-weight: 700;
  font-size: clamp(1.15rem, 0.85rem + 1vw, 1.7rem); line-height: 1.24;
  letter-spacing: -0.012em; color: var(--paper);
  text-wrap: balance;
}
.tour-blatt--links > .tour-blatt__text b,
.tour-blatt--rechts > .tour-blatt__text b {
  font-size: clamp(1.25rem, 0.85rem + 1.3vw, 1.95rem); line-height: 1.2;
}
.tour-blatt__text span {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--meta-green);
  display: flex; align-items: center; gap: 10px;
}
/* Kurzer Strich vor der Uhrzeit — der Anker, der die Zeile haelt. */
.tour-blatt__text span::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.55;
}
.tour-blatt--links > .tour-blatt__text span,
.tour-blatt--rechts > .tour-blatt__text span { order: -1; }

/* ---- Die Bewegung ----------------------------------------------------
   Das Motiv wandert im stehenden Rahmen. Das ist der Unterschied zwischen
   "Elemente erscheinen" und "die Seite lebt": es laeuft durchgehend mit
   dem Scrollen, vor- und rueckwaerts, und braucht keinen Startmoment.
   Animiert wird ausschliesslich transform. */
@keyframes blattWandert {
  from { transform: translate3d(0, 4.8%, 0); }
  to   { transform: translate3d(0, -4.8%, 0); }
}
@keyframes textHerein {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tour-strecke .tour-shot img {
      animation: blattWandert linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .tour-blatt__text {
      animation: textHerein linear both;
      animation-timeline: view();
      animation-range: entry 24% cover 34%;
    }
  }
  /* Ohne Scroll-Timeline gibt es keine Parallaxe (ein Scroll-Handler je
     Bild waere den Ruckler nicht wert) — nur der Text kommt herein.
     `.strecke-js` setzt tour.js: ohne Skript bleibt alles sichtbar. */
  @supports not (animation-timeline: view()) {
    .tour-strecke.strecke-js .tour-blatt__text {
      opacity: 0; transform: translate3d(0, 24px, 0);
      transition: opacity 800ms var(--ease-lux), transform 800ms var(--ease-lux);
    }
    .tour-strecke.strecke-js .tour-blatt.ist-da .tour-blatt__text {
      opacity: 1; transform: none;
    }
  }
}

@media (max-width: 860px) {
  /* Auch hier randlos und breit — das war der Kern der Beschwerde.
     Ein Paar bleibt ein Paar, sonst wird aus zwei Fotos zweimal Scrollen.

     ABER: die Hoehe kommt hier vom BILD, nicht vom Fenster. Eine feste
     Bahnhoehe presst auf 390 px jedes Hochformat in eine 194x607-Box —
     57 % Beschnitt, vom Tor gemessen. Ein Bild bestimmt seine Form selbst.
     Nebenwirkung ist erwuenscht: die Blaetter werden unterschiedlich hoch
     und die Strecke bekommt dadurch Rhythmus statt einer Bandstruktur. */
  .tour-blatt { height: auto; }
  /* Und das Bild muss dafuer in den FLUSS. Liegt es absolut, hat die Figur
     keinen Inhalt, keine intrinsische Hoehe — WebKit loest sie auf 0x0 auf,
     Chromium nicht. Zum zweiten Mal in dieser Datei dieselbe Ursache, dies-
     mal beim Umbau auf bildeigene Hoehen wieder hereingeholt. Nebenwirkung:
     die Parallaxe faellt am Handy weg. Kein Verlust — der Ueberhang haette
     bei bildeigener Hoehe ohnehin nichts zum Wandern. */
  .tour-strecke .tour-shot { height: auto; aspect-ratio: auto; align-self: start; }
  .tour-strecke .tour-shot img {
    position: static; top: auto; width: 100%; height: auto;
    aspect-ratio: var(--shot-mobil, var(--shot-ar, 3 / 4));
    animation: none;
  }
  .tour-blatt--links, .tour-blatt--rechts { grid-template-columns: 1fr; }
  .tour-blatt--rechts > .tour-shot { order: 0; }
  .tour-blatt--links > .tour-blatt__text,
  .tour-blatt--rechts > .tour-blatt__text {
    position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
    align-self: end; justify-self: stretch;
    padding: clamp(50px, 9vh, 96px) 20px 20px;
    background: linear-gradient(180deg, rgba(3,14,9,0) 0%, rgba(3,14,9,0.62) 58%, rgba(3,14,9,0.86) 100%);
  }
  .tour-blatt--links > .tour-blatt__text b,
  .tour-blatt--rechts > .tour-blatt__text b { font-size: clamp(1.05rem, 0.8rem + 1.4vw, 1.5rem); }
  .tour-blatt--links > .tour-blatt__text span,
  .tour-blatt--rechts > .tour-blatt__text span { order: 0; }
  .tour-blatt--paar .tour-blatt__text { padding: 40px 12px 14px; }
  .tour-blatt--paar .tour-blatt__text b { font-size: 0.92rem; line-height: 1.3; }
  .tour-blatt--paar .tour-blatt__text span { font-size: 9px; letter-spacing: 1.1px; }
  .tour-blatt--paar .tour-blatt__text span::before { width: 12px; }
}


/* ============================================================
   DIE KREUZ-REIHE — vier Tafeln nebeneinander.

   Sebi am 22.09.2026: "mach was cooles aus den 4 gipfelkreuzen".
   Einzeln in die Bildstrecke gehaengt waeren sie vier weitere Fotos.
   Nebeneinander sind sie ein Vergleich: vier Bauarten, vier Standzeiten
   an einem Vormittag. 33 Minuten auf dem ersten, sieben auf dem zweiten
   — das erzaehlt den Tag besser als jede Hoehenmeterzahl.

   Die Leiste unter jeder Tafel zeigt das VERHAELTNIS der Standzeiten.
   Deshalb ist sie das einzige bunte Element im Abschnitt: sie traegt die
   eigentliche Aussage, alles andere ist Beleg.
   ============================================================ */
.tour-kreuze {
  grid-column: 1 / -1;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3.4vw, 46px) clamp(24px, 3vw, 40px);
  border-radius: var(--r-karte);
}
.tour-kreuze__kopf { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 44px); }
.tour-kreuze__kicker {
  margin: 0 0 10px; font-family: var(--mono); font-size: var(--t-label);
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--leaf);
}
.tour-kreuze__titel {
  margin: 0 0 12px; font-family: 'Playfair Display', 'Playfair Fallback', serif;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--paper);
}
.tour-kreuze__lede { margin: 0; font-size: 16px; line-height: 1.7; color: var(--paper-dim); }

.tour-kreuze__reihe {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
}
.tour-kreuz { margin: 0; display: flex; flex-direction: column; min-width: 0; }

/* Das Bild traegt sein Seitenverhaeltnis selbst — eine Rasterzeile darf
   es nicht strecken, sonst schneidet object-fit das Kreuz ab. */
.tour-kreuz__bild {
  position: relative; overflow: hidden; border-radius: var(--r-karte);
  aspect-ratio: 3 / 4; background: rgba(6,26,17,0.5);
  box-shadow: inset 0 0 0 1px rgba(126,208,155,0.16), 0 16px 34px -22px rgba(0,0,0,0.8);
}
.tour-kreuz__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  transition: transform 900ms var(--ease-lux);
}
.tour-kreuz:hover .tour-kreuz__bild img { transform: scale(1.04); }
/* Die Ziffer liegt IM Himmel, oben links — dort ist bei allen vier
   Fotos Flaeche, weil ein Kreuz nach oben zeigt. */
.tour-kreuz__uhr {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: 7px 12px 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--paper); background: rgba(3,14,9,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top-right-radius: var(--r-control);
  pointer-events: none;
}

.tour-kreuz__text { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.tour-kreuz__name {
  font-family: 'Playfair Display', 'Playfair Fallback', serif;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.22rem); line-height: 1.18;
  color: var(--paper); font-weight: 700;
}
.tour-kreuz__art, .tour-kreuz__osm {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--paper-faint);
}
/* --paper-faint statt eigener Deckkraft: 0.46 ergab 3,53:1 und riss die
   Latte. Untergeordnet bleibt die Zeile durch Schnitt und Stellung, nicht
   durch Blaesse. */
.tour-kreuz__osm { color: var(--paper-faint); letter-spacing: 0.6px; text-transform: none;
  font-style: italic; }

.tour-kreuz__notiz {
  margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--paper-dim);
}
.tour-kreuze__quelle {
  margin: clamp(20px, 2.6vw, 32px) 0 0; padding-top: 14px;
  border-top: 1px solid rgba(126,208,155,0.14);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--paper-faint);
}

/* Die vier kommen NACHEINANDER herein — sie sind eine Folge, kein Block.
   Der Versatz haengt an --n, damit er ohne Skript auskommt. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tour-kreuz {
      animation: kreuzHerein linear both;
      animation-timeline: view();
      animation-range: entry 4% cover calc(26% + var(--n, 1) * 5%);
    }
  }
}
@keyframes kreuzHerein {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  /* Zwei mal zwei statt vier untereinander: das Nebeneinander IST die
     Aussage. Vier gestapelte Hochformate waeren vier einzelne Fotos. */
  .tour-kreuze__reihe { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .tour-kreuz__notiz { display: none; }   /* auf halber Spalte zu eng */
  .tour-kreuz__text { padding-top: 11px; gap: 4px; }
}

/* ============================================================
   QUELLEN — eine Zeile, ganz unten, leise.

   Sebi am 22.09.2026: "des andere viele zeug text nervt und stoert beim
   betrachten einfach ... mach unten vor dem footer quellen oder so".

   Vorher stand die Herkunft an vier Stellen verteilt: unter den Zahlen,
   unter der Karte, unter jedem Kreuz. Hier steht sie einmal, in der
   Groesse, die sie verdient — lesbar, aber ohne Anspruch auf
   Aufmerksamkeit. Wer sie sucht, findet sie.
   ============================================================ */
.tour-quellen {
  width: var(--tour-breite); margin: clamp(38px, 5vw, 64px) auto 0;
  padding-top: 16px; border-top: 1px solid rgba(126,208,155,0.13);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.tour-quellen__label {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--paper-faint);
  /* Nicht blasser machen: 0.42 Deckkraft ergab 3,53:1 und riss die Latte.
     Zurückhaltung kommt hier aus 9 px und der Stellung, nicht aus Blässe. */
}
.tour-quellen__liste {
  margin: 0; min-width: 0;
  font-family: var(--mono); font-size: 10px; line-height: 1.7;
  letter-spacing: 0.3px; color: var(--paper-faint);
}
/* Trenner zwischen den Punkten, statt jeden in eine eigene Zeile zu setzen. */
.tour-quellen__punkt + .tour-quellen__punkt::before {
  content: "·"; margin: 0 8px; color: rgba(126,208,155,0.4);
}
@media (max-width: 560px) {
  .tour-quellen { flex-direction: column; gap: 6px; }
}