/* china-erleben.ch · Daniel Müller und Jiajia You, Reiseleitung
   Gestaltung nach Flyer und Plakat Tibet 2027 (Farben und Schriften vom Kunden
   vorgegeben). Welt: Stationsschilder einer Bahnlinie.
   Formensprache: Schilder, Knöpfe, Felder 6px; Fotos 2px; Siegel eckig.
   Bewegung nur über transform, opacity und clip-path; bei reduzierter Bewegung aus. */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Lora"; src: url("assets/schriften/lora.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("assets/schriften/lora-kursiv.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-400-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; src: url("assets/schriften/poppins-500-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF; }
@font-face { font-family: "Carlito"; src: local("Calibri"), url("assets/schriften/carlito-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Carlito"; src: local("Calibri Italic"), url("assets/schriften/carlito-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Carlito"; src: local("Calibri Bold"), url("assets/schriften/carlito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* ?v=2 (Runde 19): Teilmenge um 虎跳峡 erweitert; Schriften liegen 30 Tage im Browser-Cache, darum neue Adresse */
@font-face { font-family: "Zeichen"; src: url("assets/schriften/noto-serif-sc-700.woff2?v=2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zeichen Tibetisch"; src: url("assets/schriften/noto-serif-tibetan-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Farben und Masse ---------- */
:root {
  --navy: #1f3a5f;
  --navy-tief: #172c48;
  --navy-nacht: #122338;
  --rot: #b3261e;
  --rot-tief: #8e1d17;
  --gruen: #2e6b4f;
  --gruen-tief: #235540;
  --gold: #c9a227;
  --gold-hell: #dcbb4f;
  --creme: #f7f1e5;
  --creme-tief: #ede3cc;
  --karton: #fffcf5;
  --tinte: #1a2c45;
  --text-2: #475a74;
  --linie: rgb(31 58 95 / 0.16);
  --linie-stark: rgb(31 58 95 / 0.32);

  --etappe: var(--navy);

  --schrift-text: "Carlito", "Calibri", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Lora", Georgia, "Times New Roman", serif;
  --schrift-etikett: "Poppins", "Segoe UI", system-ui, sans-serif;
  --schrift-zeichen: "Zeichen", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --schrift-tibetisch: "Zeichen Tibetisch", "Noto Serif Tibetan", "Microsoft Himalaya", serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-schild: cubic-bezier(0.32, 0.72, 0, 1);

  --kopf: 4.5rem;
  --rand: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --max: 76rem;
  --lese: 40rem;
  --abstand: clamp(5.5rem, 3.5rem + 6.5vw, 10.5rem);
  --radius: 6px;

  --schatten-1: 0 1px 2px rgb(18 35 56 / 0.08), 0 4px 10px rgb(18 35 56 / 0.06);
  --schatten-2: 0 2px 4px rgb(18 35 56 / 0.08), 0 14px 30px -6px rgb(18 35 56 / 0.22);

  color-scheme: light;
  accent-color: var(--rot);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1rem); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgb(31 58 95 / 0.45); }
a:hover { text-decoration-color: currentColor; }
strong { font-weight: 700; }
::selection { background: var(--gold); color: var(--navy-nacht); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .seitenkopf :focus-visible, .fuss :focus-visible { outline-color: var(--gold-hell); }
.fahrkarte-abriss :focus-visible, .menue :focus-visible { outline-color: var(--creme); }
html { scrollbar-color: rgb(31 58 95 / 0.45) var(--creme); }
table { font-variant-numeric: tabular-nums; }
[lang="zh-Hans"] { font-family: var(--schrift-zeichen); font-weight: 700; }
[lang="bo"] { font-family: var(--schrift-tibetisch); font-weight: 600; }

[hidden] { display: none !important; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.springen { position: absolute; left: 1rem; top: -4rem; z-index: 60; background: var(--navy); color: var(--creme); padding: 0.75rem 1rem; border-radius: var(--radius); font-family: var(--schrift-etikett); font-size: 0.95rem; transition: transform 0.2s var(--ease-out); }
.springen:focus { transform: translateY(5rem); }

.breite { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }
.abschnitt { padding-block: var(--abstand); }
.abschnitt + .abschnitt { padding-top: 0; }
.dunkel { background: var(--navy); color: var(--creme); }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--creme); }
.dunkel a { color: var(--creme); text-decoration-color: rgb(247 241 229 / 0.5); }

.icon { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.nw { white-space: nowrap; }
/* Text nur auf dem Handy bzw. nur ab 48rem (Höhenprofil, Runde 17b) */
.nur-handy { display: none; }
@media (max-width: 48rem) { .nur-handy { display: block; } .nur-gross { display: none; } }

/* Etiketten: Poppins versal gesperrt, nur für Schilder, Tafeln und Kopfzeilen */
.etikett { font-family: var(--schrift-etikett); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.45; }

.titel-2 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.3rem); }
.titel-3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); }
.einleitung { font-family: var(--schrift-titel); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.45; color: var(--navy); max-width: 34ch; text-wrap: pretty; }
.fliess { max-width: var(--lese); }
.klein { font-size: 0.9em; color: var(--text-2); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 40; height: var(--kopf); background: rgb(247 241 229 / 0.97); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(1px)) { .kopf { background: rgb(247 241 229 / 0.9); backdrop-filter: saturate(1.2) blur(10px); } }
.kopf-innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marke { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--navy); min-height: 44px; }
.marke .siegel { width: 2.6rem; height: 2.6rem; transition: transform 0.35s var(--ease-out); }
.marke-name { transition: color 0.2s ease; }
.marke:active .siegel { transform: scale(0.94); transition-duration: 0.12s; }
@media (hover: hover) and (pointer: fine) { .marke:hover .siegel { transform: rotate(-8deg) scale(1.06); } .marke:hover .marke-name { color: var(--rot); } }
.marke-text { display: grid; line-height: 1.15; }
.marke-name { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem; text-wrap: balance; }
.marke-rolle { font-family: var(--schrift-etikett); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-top: 0.15rem; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-liste { display: flex; gap: 0.25rem; list-style: none; }
.nav-liste a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; font-family: var(--schrift-etikett); font-size: 0.95rem; font-weight: 500; color: var(--navy); text-decoration: none; }
.nav-liste a::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.55rem; height: 2px; background: var(--rot); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); }
.nav-liste a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-liste a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav .knopf { margin-left: 0.75rem; }
.menue-knopf { display: none; }

@media (max-width: 62rem) {
  .nav-liste, .nav > .knopf { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: transparent; color: var(--navy); font-family: var(--schrift-etikett); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: transform 0.16s var(--ease-out); }
  .menue-knopf:active { transform: scale(0.97); }
  .marke-rolle { display: none; }
}
@media (max-width: 26rem) { .marke-name { font-size: 0.95rem; } .marke .siegel { width: 2.3rem; height: 2.3rem; } }

/* Handy-Menü: Navy-Fläche, Schilder-Liste */
.menue { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; background: var(--navy-tief); color: var(--creme); display: flex; flex-direction: column; padding: 1rem var(--rand) 2rem; opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity 0.2s ease, transform 0.25s var(--ease-out), visibility 0s linear 0.25s; }
.menue.offen { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.35s var(--ease-out), visibility 0s; }
.menue-kopf { display: flex; justify-content: space-between; align-items: center; height: calc(var(--kopf) - 1rem); }
.menue-kopf .marke { color: var(--creme); }
.menue-zu { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid rgb(247 241 229 / 0.35); border-radius: var(--radius); background: transparent; color: var(--creme); font-family: var(--schrift-etikett); font-size: 0.95rem; cursor: pointer; }
.menue-liste { list-style: none; margin-top: 2rem; display: grid; gap: 0.25rem; }
.menue-liste a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgb(247 241 229 / 0.14); font-family: var(--schrift-titel); font-size: 1.8rem; font-weight: 600; color: var(--creme); text-decoration: none; }
.menue-liste a .icon { width: 1.3rem; height: 1.3rem; color: var(--gold-hell); }
.menue-liste a .icon { transition: transform 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menue-liste a:hover .icon { transform: translateX(4px); } }
.menue-liste a[aria-current="page"] { color: var(--gold-hell); }
.menue .knopf { margin-top: 2rem; align-self: flex-start; }
.menue-fuss { margin-top: auto; font-family: var(--schrift-etikett); font-size: 0.95rem; display: grid; gap: 0.25rem; }
.menue-fuss a { color: var(--creme); text-decoration: none; }

/* ---------- Siegel ---------- */
.siegel { display: block; width: 3rem; height: 3rem; flex: none; }
.siegel-feld { fill: var(--rot); }
.siegel text { font-family: var(--schrift-zeichen); font-weight: 700; fill: var(--creme); }
.siegel-rand { stroke: var(--creme); }

/* ---------- Knöpfe ---------- */
/* Runde 12: Hover als ruhiger Farbwechsel (vorher Füllung von links, die beim
   schnellen Überfahren halb gefüllte Knöpfe hinterliess). */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; padding: 0.7rem 1.35rem; border: 0; border-radius: var(--radius); background: var(--rot); color: var(--creme); font-family: var(--schrift-etikett); font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.16s var(--ease-out), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.knopf .icon { transition: transform 0.3s var(--ease-out); }
.knopf:active { transform: scale(0.97); }
.knopf--hell { background: var(--creme); color: var(--navy); }
.knopf--linie { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.dunkel .knopf--linie { color: var(--creme); box-shadow: inset 0 0 0 1.5px rgb(247 241 229 / 0.7); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background-color: var(--rot-tief); }
  .knopf--hell:hover { background-color: var(--karton); }
  .knopf--linie:hover { background-color: var(--navy); color: var(--creme); }
  .dunkel .knopf--linie:hover { background-color: var(--creme); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--creme); }
  .knopf:hover .icon-pfeil { transform: translateX(3px); }
}
.knopf[aria-busy="true"] { pointer-events: none; }
.knopf[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Textlink mit Pfeil */
.weiter { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-family: var(--schrift-etikett); font-size: 0.98rem; font-weight: 500; color: var(--navy); text-decoration: none; }
.weiter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1.5px; background: currentColor; transform-origin: left; transition: transform 0.35s var(--ease-out); }
.weiter .icon { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .weiter:hover .icon { transform: translateX(3px); } .weiter:hover::after { transform: scaleX(0); transform-origin: right; } }

/* ---------- Auftakt (Startseite): Plakat, aufgeräumt ---------- */
.auftakt { position: relative; isolation: isolate; overflow: hidden; min-height: max(32rem, calc(100svh - var(--kopf))); display: grid; align-items: start; background: #2a63b8; color: #fff; }
.auftakt-foto, .auftakt-foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.auftakt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(18 35 56 / 0.34) 0%, rgb(18 35 56 / 0.12) 36%, rgb(18 35 56 / 0) 55%); pointer-events: none; }
.auftakt-inhalt { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; padding-top: clamp(2.25rem, 7svh, 5.5rem); display: grid; justify-items: center; gap: clamp(0.9rem, 2.2svh, 1.6rem); text-align: center; }
.auftakt-titel { margin: 0; display: grid; justify-items: center; gap: 0.5rem; color: #fff; line-height: 1; }
.auftakt-kicker { font-family: var(--schrift-etikett); font-weight: 600; font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem); letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: #f7e39a; text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
.auftakt-wort { font-family: var(--schrift-titel); font-weight: 700; font-size: min(clamp(4rem, 2.2rem + 8vw, 10.5rem), 15svh); line-height: 0.9; letter-spacing: 0.06em; padding-left: 0.06em; text-transform: uppercase; text-shadow: 0 2px 20px rgb(0 0 0 / 0.18); }
.auftakt-zeile { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0; font-family: var(--schrift-etikett); font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); text-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.auftakt-zeile span + span::before { content: ""; display: inline-block; width: 1px; height: 0.95em; margin: 0 1rem; background: currentColor; opacity: 0.6; vertical-align: -0.12em; }
.auftakt-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.25rem; }
@media (max-aspect-ratio: 4/5) {
  .auftakt-foto img { object-position: 50% 35%; }
  .auftakt-wort { font-size: min(24vw, 13svh); }
}
@media (max-width: 26rem) {
  .auftakt-zeile span:last-child { flex-basis: 100%; }
  .auftakt-zeile span:last-child::before { display: none; }
  .auftakt-knoepfe { gap: 0.5rem; flex-wrap: nowrap; }
  .auftakt-knoepfe .knopf { padding-inline: 0.95rem; font-size: 0.95rem; }
}
/* Runde 17: auf sehr schmalen Handys (320 px) rutschte «| 21 Tage» mit dem Strich voran
   auf eine eigene Zeile */
@media (max-width: 22.5rem) {
  .auftakt-zeile { font-size: 0.92rem; }
  .auftakt-zeile span + span::before { margin-inline: 0.65rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .auftakt-foto img { animation: setzt 2.4s var(--ease-out) both; }
  .auftakt-titel, .auftakt-zeile, .auftakt-knoepfe { animation: auftauchen 0.9s var(--ease-out) both; }
  .auftakt-zeile { animation-delay: 0.15s; }
  .auftakt-knoepfe { animation-delay: 0.3s; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes setzt { from { transform: scale(1.05); } to { transform: none; } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Eckdaten unter der Tag-für-Tag-Linie (Runde 15b) ----------
   Wie der Fuss eines Fahrplans: Navy-Linie oben, drei Spalten mit viel Luft, Werte gross
   in Lora (Pascal: die Zeile «geht unter»). Keine Karte, kein Schatten. */
.eckdaten { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--linie-stark); }
.eckdaten dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eckdaten dl > div { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) clamp(1rem, 0.5rem + 1.5vw, 2.25rem); }
.eckdaten dl > div:first-child { padding-left: 0; }
.eckdaten dl > div + div { border-left: 1px solid var(--linie); }
.eckdaten dt { font-family: var(--schrift-etikett); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.eckdaten dd { margin: 0.5rem 0 0; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); line-height: 1.15; color: var(--navy); }
.eckdaten dd small { display: block; margin-top: 0.4rem; font-family: var(--schrift-text); font-weight: 400; font-size: 0.98rem; line-height: 1.4; color: var(--text-2); }
.eckdaten dl > div:nth-child(2) dd { color: var(--rot); }
.eckdaten dl > div:nth-child(2) dd small { color: var(--text-2); }
.eckdaten > .weiter { justify-self: end; }
@media (max-width: 56rem) {
  .eckdaten { grid-template-columns: 1fr; }
  .eckdaten dl { grid-template-columns: 1fr; }
  .eckdaten dl > div { padding: 1.25rem 0; }
  .eckdaten dl > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .eckdaten > .weiter { justify-self: start; margin-bottom: 1rem; }
}

/* ---------- Tag-für-Tag-Linie (Startseite), wie Seite 2 im Reisebeschrieb ---------- */
.linie { --lp-oben: 4.6rem; --r: 0.575rem; position: relative; }
.linie-punkte { position: relative; z-index: 3; }
.linie-gruppen { position: relative; z-index: 1; }
/* Runde 12: Erster und letzter Halt liegen genau auf der Satzkante (wie Titel, Legende
   und Verweis): die 15 Spalten sind so verbreitert und verschoben, dass die Mitte des
   ersten Punkts bei --r und die des letzten bei 100% - --r liegt. */
@media (min-width: 60.01rem) {
  .linie-gruppen, .linie-punkte { width: calc((100% - 2 * var(--r)) * 15 / 14); margin-left: calc(var(--r) - (100% - 2 * var(--r)) / 28); }
  .lp:first-child .lp-text { left: calc(50% - var(--r)); transform: none; text-align: left; }
  .lp:last-child .lp-text { left: auto; right: calc(50% - var(--r)); transform: none; text-align: right; }
  .lp:first-child .lp-text strong { transform-origin: 0 0; }
  .lp:last-child .lp-text strong { transform-origin: 100% 0; }
}
.linie-gruppen { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); list-style: none; margin-bottom: 0.5rem; }
.lg { font-family: var(--schrift-etikett); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; padding-bottom: 0.6rem; border-bottom: 2px solid; }
.lg--yunnan { grid-column: 2 / span 4; color: var(--gruen); }
.lg--tibet { grid-column: 6 / span 6; color: var(--rot); }
.lg--shanghai { grid-column: 12 / span 3; color: var(--navy); }
.linie-punkte { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); list-style: none; min-height: 12rem; }
.lp { --c: var(--navy); position: relative; display: flex; flex-direction: column; align-items: center; }
.lp--yunnan { --c: var(--gruen); }
.lp--tibet { --c: var(--rot); }
.lp-punkt { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; margin-top: var(--lp-oben); border-radius: 50%; background: #fff; border: 3.5px solid var(--c); }
.lp + .lp::before { content: ""; position: absolute; top: calc(var(--lp-oben) + 0.575rem - 2px); right: 50%; width: 100%; height: 4px; background: var(--c); transform-origin: left; }
.lp--flug::before { background: repeating-linear-gradient(to right, var(--c) 0 6px, transparent 6px 12px) !important; }
.lp-text { position: absolute; left: 50%; width: 9rem; transform: translateX(-50%); display: grid; gap: 0.1rem; text-align: center; }
.lp:nth-child(odd) .lp-text { top: calc(var(--lp-oben) + 1.7rem); }
.lp:nth-child(even) .lp-text { bottom: calc(100% - var(--lp-oben) + 0.7rem); }
.lp-text strong { font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--navy); }
.lp-text span { font-family: var(--schrift-etikett); font-size: 0.78rem; color: var(--text-2); }
/* Runde 16b: keine Legende und kein Flugzeug auf der Linie (Pascal: beides unruhig). Flüge
   bleiben gestrichelt; für Screenreader steht «mit dem Flugzeug» im Link. */
.linie-weiter { margin-top: 2rem; }
@media (max-width: 60rem) {
  .linie-gruppen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; }
  .lg { border: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; }
  .lg::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: currentColor; }
  .linie-punkte { grid-template-columns: 1fr; min-height: 0; }
  .lp { flex-direction: row; align-items: center; gap: 1rem; padding: 0.55rem 0; }
  .lp-punkt { margin: 0; flex: none; }
  .lp + .lp::before { top: auto; right: auto; bottom: calc(50% + 0.575rem); left: calc(0.575rem - 2px); width: 4px; height: calc(100% - 1.15rem); transform-origin: top; }
  .lp--flug::before { background: repeating-linear-gradient(to bottom, var(--c) 0 6px, transparent 6px 12px) !important; }
  .lp .lp-text { position: static; width: auto; transform: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; text-align: left; }
  .lp-text strong { font-size: 1.1rem; }
}

/* Stationsschild: Emailleschild wie am Bahnhof Cuo Na Hu. Weisse Tafel mit
   Emaillerand, Zeichen, Name versal gesperrt, Höhe; Navy-Band mit den Nachbarstationen. */
.schild { --schild: var(--etappe); position: relative; display: flex; flex-direction: column; gap: 0.55rem; height: 100%; color: var(--navy); text-decoration: none; }
.schild-tafel { position: relative; display: flex; flex-direction: column; color: var(--navy); background: var(--karton); border-radius: var(--radius); padding: 0.45rem; box-shadow: var(--schatten-1), inset 0 0 0 1px rgb(31 58 95 / 0.12); transition: transform 0.45s var(--ease-schild), box-shadow 0.45s var(--ease-schild); }
.schild-nr { position: absolute; z-index: 3; top: -1.15rem; left: 0.85rem; display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #fff; border: 4px solid var(--schild); font-family: var(--schrift-etikett); font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.schild-feld { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 0.3rem; min-height: 9.25rem; padding: 1.1rem 0.5rem 0.85rem; text-align: center; border: 2px solid var(--navy); border-bottom: 0; border-radius: 3px 3px 0 0; }
.schild-zeichen { position: relative; z-index: 1; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); line-height: 1.25; color: var(--navy); transition: opacity 0.3s ease, transform 0.45s var(--ease-schild); }
.schild-zeichen.lang { font-size: clamp(1.3rem, 0.85rem + 1.2vw, 2rem); }
.schild-zeichen[lang="bo"] { line-height: 1.6; padding-top: 0.15em; }
.schild-name { position: relative; z-index: 1; font-family: var(--schrift-etikett); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.35; transition: opacity 0.3s ease; }
.schild-hoehe { position: relative; z-index: 1; font-family: var(--schrift-etikett); font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; transition: opacity 0.3s ease; }
.schild-hoehe [lang] { font-family: var(--schrift-zeichen); font-weight: 700; color: var(--schild); }
.schild-bild { position: absolute; inset: 0; z-index: 2; clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease-schild); }
.schild-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 0.8s var(--ease-out); }
.schild-band { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 0 0 3px 3px; background: var(--navy); color: var(--creme); font-family: var(--schrift-etikett); font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.schild-band > * { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; min-height: 1.5rem; color: var(--creme); text-decoration: none; }
.schild-band span span, .schild-band a span { overflow: hidden; text-overflow: ellipsis; }
.schild-band .icon { width: 0.95rem; height: 0.95rem; flex: none; }
.schild-tag { font-family: var(--schrift-etikett); font-size: 0.82rem; font-weight: 600; color: var(--schild); padding-left: 0.2rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  a.schild:hover .schild-tafel { transform: translateY(-6px); box-shadow: var(--schatten-2), inset 0 0 0 1px rgb(31 58 95 / 0.12); }
  a.schild:hover .schild-bild { clip-path: inset(0 0 0 0); }
  a.schild:hover .schild-bild img { transform: none; }
  a.schild:hover .schild-zeichen { opacity: 0; transform: translateY(-8px); }
  .schild-band a:hover span { text-decoration: underline; text-underline-offset: 3px; }
}
a.schild:focus-visible { outline: 2px solid transparent; }
a.schild:focus-visible .schild-tafel { outline: 3px solid var(--navy); outline-offset: 3px; }
a.schild:focus-visible .schild-bild { clip-path: inset(0 0 0 0); }
a.schild:active .schild-tafel { transform: translateY(-2px) scale(0.99); }
.schild--heim .schild-tafel { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.schild--heim .schild-nr .icon { width: 1rem; height: 1rem; }
.schild--heim .schild-feld { border-color: var(--linie-stark); }
.schild--heim .schild-zeichen { color: var(--rot); }
.schild--heim .schild-band { background: transparent; color: var(--navy); border: 1.5px dashed var(--linie-stark); border-top: 0; }
.schild--heim .schild-band > * { color: var(--navy); }

/* ---------- Bildpause: grosses Foto mit Leitsatz ---------- */
.bildpause { position: relative; min-height: clamp(26rem, 60vw, 44rem); display: grid; align-items: end; overflow: hidden; background: var(--navy-nacht); color: var(--creme); }
.bildpause picture, .bildpause img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.bildpause::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(18 35 56 / 0.88) 0%, rgb(18 35 56 / 0.72) 38%, rgb(18 35 56 / 0.3) 68%, rgb(18 35 56 / 0) 88%); }
.bildpause-text { position: relative; z-index: 1; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.bildpause blockquote { margin: 0; font-family: var(--schrift-titel); font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1.1; color: #fff8ea; max-width: 16ch; text-shadow: 0 2px 14px rgb(0 0 0 / 0.3); }
.bildpause blockquote p { margin: 0; font: inherit; max-width: none; }
.bildpause .bildpause-unter { margin-top: 1rem; font-family: var(--schrift-etikett); font-weight: 300; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); max-width: 34rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bildpause img { animation: bild-gleitet linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes bild-gleitet { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.02) translateY(3%); } }

/* ---------- Höhenlineal: 21 gleiche Säulen ---------- */
.hoehe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.hoehe h2 { margin-bottom: 1rem; }
.lineal { position: relative; }
.lineal-flaeche { position: relative; }
.lineal-saeulen { position: relative; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: clamp(3px, 0.5vw, 7px); height: clamp(15rem, 12rem + 10vw, 22rem); align-items: end; list-style: none; border-bottom: 2px solid var(--navy); }
.lineal-raster { position: absolute; inset: 0 0 2px 0; pointer-events: none; }
.lineal-raster span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linie); font-family: var(--schrift-etikett); font-size: 0.72rem; color: var(--text-2); }
.lineal-raster span b { position: absolute; right: 0; top: -1.25rem; font-weight: 500; }
.saeule { position: relative; height: 100%; display: flex; align-items: flex-end; }
.saeule button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.saeule button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); min-height: 6px; border-radius: 3px 3px 0 0; background: var(--etappe, var(--navy)); opacity: 0.86; transform-origin: bottom; transition: opacity 0.2s ease; }
.saeule--yunnan { --etappe: var(--gruen); }
.saeule--tibet { --etappe: var(--rot); }
.saeule--shanghai, .saeule--reise { --etappe: var(--navy); }
.saeule--zug button::before { background: repeating-linear-gradient(to top, var(--navy) 0 8px, rgb(31 58 95 / 0.35) 8px 12px); }
.saeule button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.js .lineal .saeule button::before { transform: scaleY(0.02); transition: transform 0.9s var(--ease-out), opacity 0.2s ease; transition-delay: calc(var(--i) * 45ms), 0s; }
.js .lineal.sichtbar .saeule button::before { transform: none; }
.saeule-tag { position: absolute; bottom: -1.65rem; left: 50%; transform: translateX(-50%); font-family: var(--schrift-etikett); font-size: 0.7rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lineal-anzeige { min-height: 4.8rem; margin-top: 2.6rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--karton); box-shadow: inset 0 0 0 1px var(--linie); display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 1rem; align-items: baseline; }
.lineal-anzeige .etikett { color: var(--text-2); grid-row: 1; }
.lineal-anzeige strong { font-family: var(--schrift-titel); font-size: 1.25rem; color: var(--navy); grid-column: 1 / 3; }
.lineal-anzeige .lineal-m { grid-column: 3; grid-row: 1 / 3; align-self: center; font-family: var(--schrift-etikett); font-size: 1.5rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.lineal-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); list-style: none; }
.lineal-legende li { display: flex; align-items: center; gap: 0.5rem; }
.lineal-legende i { width: 0.9rem; height: 0.9rem; border-radius: 2px; background: var(--c); }
.saeule.aktiv button::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .saeule:hover button::before { opacity: 1; } }
.saeule.aktiv .saeule-tag { color: var(--navy); font-weight: 600; }
@media (max-width: 60rem) { .hoehe { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .saeule-tag { display: none; } .saeule:nth-child(5n+1) .saeule-tag, .saeule:last-child .saeule-tag { display: block; } }
/* Runde 17 (Handy): Datum über die ganze Breite, Ort und Höhe darunter nebeneinander, die
   Höhe bricht nie um; Platz für zwei Ortszeilen, damit die Karte beim Tippen nicht springt. */
@media (max-width: 34rem) {
  .lineal-anzeige { grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 0.35rem 1rem; min-height: 6.9rem; }
  .lineal-anzeige .etikett { grid-column: 1 / -1; }
  .lineal-anzeige strong { grid-column: 1; grid-row: 2; font-size: 1.1rem; line-height: 1.3; text-wrap: balance; }
  .lineal-anzeige .lineal-m { grid-column: 2; grid-row: 2; align-self: start; font-size: 1.3rem; line-height: 1.1; white-space: nowrap; }
}

/* ---------- Begegnungen: Liste mit Bild beim Überfahren ---------- */
.begegnungen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.begegnungen-kopf { grid-column: 1 / -1; display: grid; gap: 1rem; max-width: 44rem; }
.begegnung-liste { list-style: none; border-top: 1px solid var(--linie-stark); }
.begegnung { border-bottom: 1px solid var(--linie-stark); }
.begegnung a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.15rem; align-items: center; padding: 1.15rem 0; text-decoration: none; color: var(--navy); }
.begegnung .begegnung-tag { grid-column: 1; grid-row: 1 / span 2; }
.begegnung .begegnung-titel { grid-column: 2; grid-row: 1; }
.begegnung .begegnung-ort { grid-column: 2; grid-row: 2; margin: 0; }
.begegnung a > .icon { grid-column: 3; grid-row: 1 / span 2; }
.begegnung-tag { font-family: var(--schrift-etikett); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--etappe); }
.begegnung-titel { overflow-wrap: anywhere; hyphens: auto; font-family: var(--schrift-titel); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; justify-self: start; }
.begegnung-ort { display: block; text-decoration: none; font-family: var(--schrift-text); font-size: 0.95rem; font-weight: 400; color: var(--text-2); margin-top: 0.2rem; }
.begegnung .icon { width: 1.4rem; height: 1.4rem; color: var(--etappe); transition: transform 0.3s var(--ease-out); }
.begegnung-bild-mobil { display: none; }
.begegnung-buehne { position: relative; align-self: start; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--creme-tief); box-shadow: var(--schatten-2); }
/* Runde 11: statt Unterstreichung zieht sich die Trennlinie der Zeile in der
   Etappenfarbe von links durch; das Foto wird von unten aufgedeckt (das neue liegt
   über dem alten, keine trübe Überblendung zweier Fotos). */
.begegnung { position: relative; }
.begegnung::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--etappe); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); pointer-events: none; }
.begegnung.aktiv::after { transform: none; }
.begegnung.aktiv a > .icon { transform: translateX(4px); }
.begegnung-buehne figure { position: absolute; inset: 0; z-index: 1; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 0s linear 0.6s; }
.begegnung-buehne figure.aktiv { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--ease-out); }
.begegnung-buehne img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 0s linear 0.6s; }
.begegnung-buehne figure.aktiv img { transform: none; transition: transform 0.9s var(--ease-out); }
.begegnung-buehne figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem; background: linear-gradient(to top, rgb(18 35 56 / 0.8), rgb(18 35 56 / 0)); color: var(--creme); font-family: var(--schrift-etikett); font-size: 0.9rem; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.3s var(--ease-out); }
.begegnung-buehne figure.aktiv figcaption { opacity: 1; transform: none; transition-delay: 0.25s; }
@media (max-width: 56rem) {
  .begegnungen { grid-template-columns: 1fr; }
  .begegnung-buehne { display: none; }
  .begegnung::after { display: none; }
  .begegnung a { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .begegnung a .icon { display: none; }
  .begegnung-bild-mobil { display: block; grid-row: span 2; width: 5.5rem; aspect-ratio: 1; border-radius: 2px; overflow: hidden; }
  .begegnung-bild-mobil img { width: 100%; height: 100%; object-fit: cover; }
  /* Runde 17: im kleinen Quadrat sah man von der Herde nur den Schnee; näher an die Yaks */
  .begegnung-bild-mobil .bf-tibetbahn-herde img { transform: scale(2); transform-origin: 74% 58%; }
  .begegnung .begegnung-bild-mobil { grid-column: 1; grid-row: 1 / span 3; }
  .begegnung .begegnung-tag { grid-column: 2; grid-row: 1; }
  .begegnung .begegnung-titel { grid-column: 2; grid-row: 2; }
  .begegnung .begegnung-ort { grid-column: 2; grid-row: 3; }
  .begegnung a { grid-template-rows: auto auto auto; }
}

/* ---------- Reiseleitung ---------- */
.leitung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.leitung-kopf { grid-column: 1 / -1; display: grid; gap: 1rem; max-width: 44rem; margin-bottom: 0.5rem; }
.person { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); align-items: end; }
.person-bild { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--creme-tief); }
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.person-bild .siegel { position: absolute; right: 0.75rem; bottom: 0.75rem; width: 2.6rem; height: 2.6rem; }
.platzhalter-foto { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.75rem; padding: 1.5rem; text-align: center; background: var(--creme-tief); box-shadow: inset 0 0 0 1px var(--linie); color: var(--text-2); font-family: var(--schrift-etikett); font-size: 0.85rem; }
.platzhalter-foto [lang] { font-size: 3rem; color: var(--rot); line-height: 1; }
.person h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); }
.person-rolle { display: block; margin: 0.35rem 0 0.9rem; color: var(--rot); }
.person p { font-size: 0.98em; }
@media (max-width: 62rem) { .leitung { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .person { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; } }
/* Runde 14: Reiseleitung auf der Startseite ohne Rahmen und gross (Pascal: «Bilder zu klein») */
.leitung .person { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.4rem; }
.leitung .person-bild { aspect-ratio: 4 / 3; }
.leitung .person-bild img { object-position: 50% 30%; }
.leitung .person h3 { margin-top: 0.1rem; }
.zitat-leiste { grid-column: 1 / -1; margin: clamp(1rem, 0.5rem + 2vw, 2.5rem) 0 0; padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0; border-block: 1px solid var(--linie-stark); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.zitat-leiste p { margin: 0; font-family: var(--schrift-titel); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); color: var(--navy); max-width: 42ch; }

/* ---------- Fahrkarte (Anmeldung) ---------- */
.fahrkarte { --kerbe: 1.1rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); border-radius: 10px; background: var(--karton); box-shadow: var(--schatten-2); color: var(--navy);
  -webkit-mask: radial-gradient(circle at right 18rem top 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at right 18rem bottom 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at right 18rem top 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at right 18rem bottom 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) bottom / 100% 51% no-repeat; }
.fahrkarte-haupt { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: grid; gap: 1.25rem; }
.fahrkarte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--navy); color: var(--rot); }
.fahrkarte-strecke { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fahrkarte-ort { display: grid; }
.fahrkarte-ort strong { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1; }
.fahrkarte-ort span { font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); }
.fahrkarte-pfeil { flex: 1; min-width: 4rem; height: 2px; background: repeating-linear-gradient(to right, var(--navy) 0 8px, transparent 8px 14px); position: relative; }
.fahrkarte-pfeil .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; background: var(--karton); padding: 0 0.2rem; box-sizing: content-box; }
.fahrkarte-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.fahrkarte-felder div { display: grid; gap: 0.15rem; }
.fahrkarte-felder dt { font-family: var(--schrift-etikett); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.fahrkarte-felder dd { margin: 0; font-family: var(--schrift-etikett); font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fahrkarte-abriss { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; align-content: center; justify-items: center; gap: 1rem; text-align: center; background: var(--rot); color: #fff; border-radius: 0 10px 10px 0; }
.fahrkarte-abriss::before { content: ""; position: absolute; left: -1px; top: var(--kerbe); bottom: var(--kerbe); border-left: 2px dashed rgb(247 241 229 / 0.7); }
.fahrkarte-abriss .siegel { width: 4rem; height: 4rem; }
.fahrkarte-abriss .siegel-feld { fill: var(--creme); }
.fahrkarte-abriss .siegel text { fill: var(--rot); }
.fahrkarte-abriss .siegel-rand { stroke: var(--rot); }
.fahrkarte-abriss p { margin: 0; font-family: var(--schrift-etikett); font-size: 0.9rem; }
.fahrkarte-abriss .knopf--hell { color: var(--rot); }
@media (max-width: 50rem) {
  .fahrkarte { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .fahrkarte-abriss { border-radius: 0 0 10px 10px; }
  .fahrkarte-abriss::before { left: var(--kerbe); right: var(--kerbe); top: -1px; bottom: auto; border-left: 0; border-top: 2px dashed rgb(247 241 229 / 0.7); }
}

/* ---------- Fuss ---------- */
.fuss { background: var(--navy-tief); color: var(--creme); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.fuss a { color: var(--creme); text-decoration: none; }
/* Runde 19: letzte Spalte mindestens so breit wie die Mailadresse, sonst ragte sie zwischen 992 und 1232 px über den Rand (bei 1024 px 7 px Überlauf) */
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(max-content, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.fuss-marke { display: grid; gap: 1rem; align-content: start; }
.fuss-marke .siegel { width: 3.4rem; height: 3.4rem; }
.fuss-marke strong { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.fuss-marke p { margin: 0; color: rgb(247 241 229 / 0.75); font-size: 0.98rem; max-width: 26rem; }
.fuss h2 { font-family: var(--schrift-etikett); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 1rem; }
.fuss ul { list-style: none; display: grid; gap: 0.1rem; }
.fuss li a, .fuss address a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .fuss li a:hover, .fuss address a:hover { text-decoration-color: currentColor; } }
.fuss address { font-style: normal; display: grid; gap: 0.1rem; }
.fuss-unten { border-top: 1px solid rgb(247 241 229 / 0.14); padding-block: 1.25rem 1.75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-family: var(--schrift-etikett); font-size: 0.85rem; color: rgb(247 241 229 / 0.7); }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.fuss-unten a { color: rgb(247 241 229 / 0.85); min-height: 40px; display: inline-flex; align-items: center; }
.fuss-unten span a { display: inline; min-height: 0; text-decoration: underline 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fuss-unten span a:hover { color: var(--creme); } }
@media (max-width: 62rem) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .fuss-raster { grid-template-columns: 1fr; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { position: relative; overflow: hidden; background: var(--navy); color: var(--creme); padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.seitenkopf-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.6rem); line-height: 1.04; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.seitenkopf-reise { font-family: var(--schrift-etikett); font-size: 0.95rem; color: var(--gold-hell); margin-bottom: 0.9rem; }
.seitenkopf .unter { display: block; margin-bottom: 1rem; color: var(--gold-hell); }
.seitenkopf-text { font-size: 1.05em; color: rgb(247 241 229 / 0.88); max-width: 38rem; }
.seitenkopf-text p + .sprung { margin-top: 1.5rem; }
.seitenkopf-zeichen { position: absolute; right: -0.05em; bottom: -0.22em; z-index: 0; font-size: clamp(9rem, 6rem + 14vw, 22rem); line-height: 1; color: rgb(247 241 229 / 0.06); pointer-events: none; user-select: none; white-space: nowrap; }
.sprung { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(247 241 229 / 0.4); font-family: var(--schrift-etikett); font-size: 0.9rem; font-weight: 500; color: var(--creme); text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) and (pointer: fine) { .sprung a:hover { background: var(--creme); color: var(--navy); } }
@media (max-width: 52rem) { .seitenkopf-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Abschnittskopf ---------- */
.kopfzeile { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 48rem; }

/* ---------- Karte ---------- */
.karten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2vw, 3rem); }
.karten-rahmen { position: relative; border-radius: var(--radius); overflow: hidden; background: #efe5cf; box-shadow: var(--schatten-2), inset 0 0 0 1px rgb(31 58 95 / 0.2); }
.karte { width: 100%; height: auto; }
.k-meer { fill: #6f8cab; } /* Runde 15: Farbe der Flüsse statt Navy (Pascal: einheitlicher) */
.k-land { fill: #efe5cf; }
.k-flur text { font-family: var(--schrift-titel); font-style: italic; font-size: 17px; letter-spacing: 0.18em; fill: rgb(31 58 95 / 0.42); text-anchor: middle; }
.k-linie { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.k-linie.k-yunnan { stroke: var(--gruen); }
.k-linie.k-tibet { stroke: var(--rot); }
.k-linie.k-shanghai { stroke: var(--navy); }
.k-linie.k-flug { stroke-dasharray: 1 9; stroke-width: 4; }
.k-linie.k-zug { stroke-width: 5.5; }
.k-station circle { fill: #fff; stroke-width: 3.5; stroke: var(--navy); }
.k-station circle.k-treffer { fill: transparent; stroke: none; }
.k-station.k-yunnan circle { stroke: var(--gruen); }
.k-station.k-tibet circle { stroke: var(--rot); }
/* Runde 19: Halt ohne Nummer (Dali gehört zur Station «Dali und Shaxi»; hier wechselt die Reise vom Zug auf die Strasse) */
.k-halt circle { fill: #fff; stroke-width: 2.5; stroke: var(--navy); }
.k-halt.k-yunnan circle { stroke: var(--gruen); }
.k-halt.k-tibet circle { stroke: var(--rot); }
.k-nr { font-family: var(--schrift-etikett); font-size: 12px; font-weight: 600; text-anchor: middle; fill: var(--navy); }
.k-name { font-family: var(--schrift-etikett); font-size: 15px; font-weight: 500; fill: var(--navy); paint-order: stroke; stroke: #efe5cf; stroke-width: 4px; stroke-linejoin: round; }
.k-hinweis { font-family: var(--schrift-titel); font-style: italic; font-size: 13.5px; fill: var(--navy); paint-order: stroke; stroke: #efe5cf; stroke-width: 4px; }
.karte.k-nah .k-flur, .karte.k-nah .k-hinweis { opacity: 0; }
.k-flur, .k-hinweis { transition: opacity 0.3s ease; }
.karten-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; list-style: none; }
.karten-knoepfe button { min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--navy); font-family: var(--schrift-etikett); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out); }
.karten-knoepfe button:active { transform: scale(0.97); }
.karten-knoepfe button[aria-pressed="true"] { background: var(--navy); color: var(--creme); box-shadow: none; }
.karten-knoepfe button[data-ansicht="yunnan"][aria-pressed="true"] { background: var(--gruen); }
.karten-knoepfe button[data-ansicht="tibet"][aria-pressed="true"] { background: var(--rot); }
.karten-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.9rem; list-style: none; font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); }
.karten-legende li { display: flex; align-items: center; gap: 0.5rem; }
.karten-legende .icon { width: 1.2rem; height: 1.2rem; color: var(--navy); }
.karten-hinweis { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-2); font-style: italic; }

@media (max-width: 40rem) { .k-flur, .k-hinweis { display: none; } }
/* Runde 19: Ortsnamen in der ganzen Route erst ab 62rem; darunter (Handy und Tablet hochkant) überlagern sie sich, die Etappen-Ansichten zeigen sie weiterhin */
@media (max-width: 62rem) { .karte:not(.k-nah) .k-name { display: none; } }
.karte[data-ansicht="yunnan"] .k-station:not(.k-yunnan) .k-name, .karte[data-ansicht="tibet"] .k-station:not(.k-tibet) .k-name, .karte[data-ansicht="shanghai"] .k-station:not(.k-shanghai) .k-name { display: none; }

/* ---------- Tabellen (Fahrplan): Rang über Gewicht, nicht über Grösse ---------- */
.tabelle-huelle { overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--linie); background: var(--karton); }
.fahrplan { width: 100%; border-collapse: collapse; font-size: 0.98em; }
.fahrplan caption { text-align: left; padding: 0 0 0.75rem; font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); caption-side: top; }
.fahrplan th, .fahrplan td { text-align: left; vertical-align: baseline; padding: 0.7rem 1rem; }
.fahrplan thead th { font-family: var(--schrift-etikett); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme); background: var(--navy); white-space: nowrap; }
.fahrplan tbody tr + tr td, .fahrplan tbody tr + tr th { border-top: 1px solid var(--linie); }
.fahrplan .gruppe th { padding: 0.55rem 1rem; background: var(--etappe); color: #fff; font-family: var(--schrift-etikett); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fahrplan .gruppe th span { font-weight: 400; letter-spacing: 0.02em; text-transform: none; margin-left: 0.75rem; opacity: 0.9; }
.fahrplan .gruppe--yunnan { --etappe: var(--gruen); }
.fahrplan .gruppe--tibet { --etappe: var(--rot); }
.fahrplan .gruppe--shanghai, .fahrplan .gruppe--reise { --etappe: var(--navy); }
/* Nummern als Stationsringe wie auf Karte und Linie: Ring in Etappenfarbe. Runde 14:
   kleiner und feiner (Pascal: «klobig», «sieht nach so viel aus»); beim Überfahren
   nur leicht getönt statt voll gefüllt. Dahinter die Reiselinie (siehe unten). */
.fahrplan .nr { position: relative; width: 4.5rem; font-family: var(--schrift-etikett); font-weight: 600; font-variant-numeric: tabular-nums; }
.fahrplan .nr a { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: -0.2rem 0; border-radius: 50%; background: var(--karton); box-shadow: inset 0 0 0 2px var(--etappe, var(--navy)); color: var(--navy); font-size: 0.82rem; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out); }
.fahrplan .nr a:active { transform: scale(0.94); }
.fahrplan .nr a:focus-visible { outline-offset: 2px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .fahrplan tbody tr:hover .nr a { background: color-mix(in srgb, var(--etappe, var(--navy)) 12%, var(--karton)); color: var(--etappe, var(--navy)); transform: scale(1.08); } }
.fahrplan tr[data-etappe="yunnan"] { --etappe: var(--gruen); }
.fahrplan tr[data-etappe="tibet"] { --etappe: var(--rot); }
.fahrplan tr[data-etappe="shanghai"] { --etappe: var(--navy); }
.fahrplan .datum { white-space: nowrap; font-family: var(--schrift-etikett); font-size: 0.9rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fahrplan .programm { font-weight: 700; color: var(--navy); }
.fahrplan .nacht { color: var(--text-2); }
.fahrplan .betrag { text-align: right; white-space: nowrap; font-family: var(--schrift-etikett); font-weight: 500; font-variant-numeric: tabular-nums; }
.fahrplan tfoot td { font-weight: 700; border-top: 2px solid var(--navy); }
@media (hover: hover) and (pointer: fine) { .fahrplan tbody tr:not(.gruppe):hover td, .fahrplan tbody tr:not(.gruppe):hover th { background: rgb(201 162 39 / 0.1); } }
@media (max-width: 44rem) {
  .fahrplan--tage thead { display: none; }
  .fahrplan--tage tbody tr:not(.gruppe) { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 0.75rem; padding: 0.75rem 0.9rem; }
  .fahrplan--tage tbody tr:not(.gruppe) td, .fahrplan--tage tbody tr:not(.gruppe) th { padding: 0; border: 0; }
  .fahrplan--tage .nr { grid-row: span 3; }
  .fahrplan--tage .datum, .fahrplan--tage .programm, .fahrplan--tage .nacht { grid-column: 2; }
  .fahrplan--tage .nacht:not(:empty)::before { content: "Übernachtung: "; }
  .fahrplan--tage tbody tr.gruppe { display: block; }
  .fahrplan--tage tbody tr.gruppe th { display: block; }
  .fahrplan--tage tbody tr + tr:not(.gruppe) { border-top: 1px solid var(--linie); }
}

/* ---------- Höhenprofil ---------- */
.profil-rahmen { border-radius: var(--radius); background: var(--karton); box-shadow: inset 0 0 0 1px var(--linie); padding: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.profil { width: 100%; height: auto; overflow: visible; font-family: var(--schrift-etikett); }
.p-band { opacity: 0.09; }
.p-band.p-yunnan { fill: var(--gruen); }
.p-band.p-tibet { fill: var(--rot); }
.p-band.p-shanghai { fill: var(--navy); }
.p-bandname { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.p-raster line { stroke: var(--linie); stroke-dasharray: 3 5; }
.p-raster text { font-size: 12px; fill: var(--text-2); text-anchor: end; }
.p-linie { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.p-linie.p-yunnan { stroke: var(--gruen); }
.p-linie.p-tibet { stroke: var(--rot); }
.p-linie.p-shanghai, .p-linie.p-reise { stroke: var(--navy); }
.p-linie.p-flug, .p-linie.p-zug { stroke-dasharray: 6 7; }
.p-punkt circle { fill: #fff; stroke-width: 3; }
.p-punkt.p-yunnan circle { stroke: var(--gruen); }
.p-punkt.p-tibet circle { stroke: var(--rot); }
.p-punkt.p-shanghai circle, .p-punkt.p-reise circle { stroke: var(--navy); }
.p-punkt text { font-size: 12.5px; fill: var(--navy); font-weight: 500; }
.p-punkt text.p-m { font-weight: 400; fill: var(--text-2); font-size: 11.5px; }
.p-hoch rect { fill: var(--navy); }
.p-hoch text { font-size: 12px; fill: var(--navy); }
.p-hoch path { fill: none; stroke: rgb(31 58 95 / 0.4); stroke-width: 1.25; stroke-linejoin: round; }
.p-hoch text tspan:first-child { fill: var(--navy); }
.p-hoch text tspan + tspan { fill: var(--text-2); }
.p-tage text { font-size: 12px; fill: var(--text-2); text-anchor: middle; }
.p-tage .p-tagnr { font-weight: 600; fill: #fff; font-size: 11px; }
.p-tage circle.p-yunnan { fill: var(--gruen); }
.p-tage circle.p-tibet { fill: var(--rot); }
.p-tage circle.p-shanghai, .p-tage circle.p-reise { fill: var(--navy); }
.js .profil .p-linie { stroke-dashoffset: 0; }
.profil-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1rem; list-style: none; font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); }
.profil-legende li { display: flex; align-items: center; gap: 0.55rem; }
.profil-legende svg { width: 2rem; height: 0.8rem; }
.profil-mobil { display: none; }
@media (max-width: 48rem) {
  .profil-rahmen .profil { display: none; }
  /* Runde 17: die Legende erklärt die Linien der Grafik; die Liste hat keine */
  .profil-legende { display: none; }
  /* Runde 17b (Pascal: «unkomplizierter»): ohne Kartonrahmen, eine Zeile pro Ort (Name,
     Tage klein daneben wie in der Linie der Startseite, Höhe rechts), darunter ein schmaler
     Balken in der Etappenfarbe (Verhältnis zu 5’100 m). Keine Nummernkreise, keine
     Ausflugszeilen. */
  .profil-rahmen { padding: 0; background: none; box-shadow: none; }
  .profil-mobil { display: grid; gap: 1rem; list-style: none; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
  .profil-mobil li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.4rem; align-items: baseline; }
  .profil-mobil .pm-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
  .profil-mobil .pm-ort { font-family: var(--schrift-titel); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
  .profil-mobil .pm-tage { font-family: var(--schrift-etikett); font-size: 0.78rem; color: var(--text-2); white-space: nowrap; }
  .profil-mobil .pm-m { font-family: var(--schrift-etikett); font-size: 0.9rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .profil-mobil .pm-balken { grid-column: 1 / -1; height: 5px; }
  .profil-mobil .pm-balken::before { content: ""; display: block; width: calc(var(--b) * 100%); height: 100%; border-radius: 3px; background: var(--etappe); }
  .profil-mobil .pm-zug .pm-balken::before { background: repeating-linear-gradient(to right, var(--navy) 0 8px, rgb(31 58 95 / 0.35) 8px 12px); }
  .profil-mobil [data-etappe="yunnan"] { --etappe: var(--gruen); }
  .profil-mobil [data-etappe="tibet"] { --etappe: var(--rot); }
  .profil-mobil [data-etappe="shanghai"], .profil-mobil [data-etappe="reise"] { --etappe: var(--navy); }
}

/* ---------- Kapitel und Tage (Reisebeschrieb) ---------- */
.kapitel { --etappe: var(--navy); position: relative; overflow: hidden; background: var(--etappe); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.kapitel--yunnan { --etappe: var(--gruen); }
.kapitel--tibet { --etappe: var(--rot); }
.kapitel--shanghai { --etappe: var(--navy); }
.kapitel-raster { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.kapitel-zeichen { font-size: clamp(4.5rem, 3rem + 7vw, 10rem); line-height: 1; color: rgb(255 255 255 / 0.95); }
.kapitel h2 { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.kapitel :focus-visible { outline-color: var(--creme); }
.kapitel p { margin-top: 0.9rem; max-width: 40rem; color: rgb(255 255 255 / 0.9); }
.kapitel-stationen { grid-column: 1 / -1; margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 15.5rem)); justify-content: start; gap: 2rem 1rem; list-style: none; }
@media (max-width: 30rem) { .kapitel-stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.75rem; } .kapitel-stationen .schild-band { flex-direction: column; align-items: stretch; gap: 0; padding-block: 0.35rem; font-size: 0.78rem; } .kapitel-stationen .schild-band > :last-child { justify-content: flex-end; } .bahnschild .schild-band a { min-height: 36px; margin-block: 0; } .kapitel-stationen .schild-feld { min-height: 8rem; } }
/* Bahnsteigschilder im Kapitel: gleiches Schild, Band mit Verweisen */
.bahnschild { --schild: var(--etappe); display: flex; flex-direction: column; gap: 0.5rem; }
.bahnschild .schild-tafel { box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.45); }
.bahnschild .schild-band { font-size: 0.85rem; }
/* Runde 12: Kapitelschilder schlanker (ohne Höhe und Pfeile, Tage im Band) und aktiver:
   Überfahren hebt das Schild, füllt die Nummer in der Etappenfarbe und deckt das Foto
   der Station auf. */
.bahnschild .schild { display: block; height: 100%; }
.schild-band--text { justify-content: center; letter-spacing: 0.02em; }
.kapitel-stationen .schild-band.schild-band--text { align-items: center; text-align: center; }
.bahnschild .schild-feld { min-height: 8.25rem; }
.bahnschild .schild-nr { transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--ease-out); }
.bahnschild .schild-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(18 35 56 / 0.35), transparent 45%); }
@media (hover: hover) and (pointer: fine) {
  .bahnschild a.schild:hover .schild-tafel { box-shadow: 0 24px 44px -16px rgb(0 0 0 / 0.55); }
  .bahnschild a.schild:hover .schild-nr { background: var(--schild); color: #fff; transform: scale(1.08); }
}
.bahnschild a.schild:focus-visible .schild-nr { background: var(--schild); color: #fff; }
.kapitel .schild-nr { border-color: var(--etappe); }
.kapitel-tage { display: block; margin-top: 0.6rem; color: rgb(255 255 255 / 0.88); }
@media (max-width: 36rem) { .kapitel-raster { grid-template-columns: 1fr; } }

.tage { display: grid; }
.tag { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 4.5rem); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); border-top: 1px solid var(--linie); }
.tag:first-child { border-top: 0; }
.tag[data-etappe="yunnan"] { --etappe: var(--gruen); }
.tag[data-etappe="tibet"] { --etappe: var(--rot); }
.tag[data-etappe="shanghai"], .tag[data-etappe="reise"] { --etappe: var(--navy); }
.tag-marke { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-content: start; align-items: center; }
.tag-nummer { grid-row: span 2; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: var(--radius); background: var(--etappe); color: #fff; }
.tag-nummer small { font-family: var(--schrift-etikett); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-top: 0.35rem; }
.tag-nummer b { font-family: var(--schrift-titel); font-size: 2rem; line-height: 1; margin-bottom: 0.25rem; }
.tag-datum { font-family: var(--schrift-etikett); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--etappe); }
.tag-wochentag { font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); }
.tag-inhalt { min-width: 0; }
.tag-inhalt h3 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.35rem); margin-bottom: 0.9rem; }
.tag-daten { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0 0 1.5rem; padding: 0.7rem 0; border-block: 1px solid var(--linie); font-family: var(--schrift-etikett); font-size: 0.88rem; color: var(--text-2); }
.tag-daten div { display: flex; align-items: center; gap: 0.45rem; }
.tag-daten dt { display: flex; }
.tag-daten dd { margin: 0; color: var(--tinte); }
.tag-daten .icon { width: 1.15rem; height: 1.15rem; color: var(--etappe); }
.tag-text { max-width: var(--lese); }
.punkt { max-width: var(--lese); margin-top: 1.6rem; }
.punkt h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.45rem; display: flex; gap: 0.6rem; align-items: baseline; }
.punkt h4::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; background: var(--etappe); transform: rotate(45deg) translateY(-0.12em); }
.punkt-zusatz { font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); display: block; margin: -0.2rem 0 0.5rem 1.15rem; }
.punkt ul, .punkt ol { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.punkt li::marker { color: var(--etappe); }
.ablauf-titel { font-family: var(--schrift-etikett); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--etappe); margin: 1rem 0 0; }
@media (max-width: 52rem) { .tag { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Bilder in Tagen */
.bilder { display: grid; gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem); margin: 1.75rem 0 0.5rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bilder figure { margin: 0; grid-column: span 3; }
.bilder figure.gross { grid-column: 1 / -1; }
.bilder--1 figure { grid-column: 1 / -1; max-width: 48rem; }
.bilder--1 figure.hoch { max-width: 26rem; }
.foto { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--creme-tief); }
.foto picture, .person-bild picture, .schild-bild picture, .begegnung-buehne picture, .begegnung-bild-mobil picture { display: block; width: 100%; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
/* Überfahren: Foto zoomt leicht, unten dunkelt es sanft ab, ein Vergrössern-Zeichen erscheint */
.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(18 35 56 / 0.32), rgb(18 35 56 / 0) 45%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.foto-gross { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgb(255 252 245 / 0.95); color: var(--navy); box-shadow: 0 2px 10px rgb(18 35 56 / 0.28); opacity: 0; transform: scale(0.85); transition: opacity 0.2s ease-out, transform 0.25s var(--ease-out); pointer-events: none; }
.foto-gross .icon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .foto:hover img { transform: scale(1.04); }
  .foto:hover::after, .foto:hover .foto-gross { opacity: 1; }
  .foto:hover .foto-gross { transform: none; }
}
.foto:focus-visible { outline-offset: 3px; }
.foto:focus-visible .foto-gross { opacity: 1; transform: none; }
.foto:active .foto-gross { transform: scale(0.92); }
/* Bildlegende in der Textschrift, nah am Bild; Bildpaare gleich hoch, damit die Legenden auf einer Linie stehen */
.bilder figcaption, .galerie figcaption { margin-top: 0.55rem; font-family: var(--schrift-text); font-size: 0.98rem; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.bilder figure:not(.gross) .foto { aspect-ratio: 4 / 3; }
.bilder--1 figure .foto, .bilder figure.hoch .foto { aspect-ratio: auto; }
@media (max-width: 36rem) { .bilder figure.gross, .bilder--1 figure { grid-column: 1 / -1; } }

.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem); list-style: none; }
.galerie figure { margin: 0; }
.galerie li:nth-child(1) { grid-column: span 5; }
.galerie li:nth-child(2) { grid-column: span 4; }
.galerie li:nth-child(3) { grid-column: span 3; }
.galerie li:nth-child(4) { grid-column: span 3; }
.galerie li:nth-child(5) { grid-column: span 4; }
.galerie li:nth-child(6) { grid-column: span 5; }
.galerie .foto { aspect-ratio: 4 / 3; }
.galerie li:nth-child(3) .foto, .galerie li:nth-child(4) .foto { aspect-ratio: auto; height: 100%; }
.galerie li:nth-child(3) figure, .galerie li:nth-child(4) figure { height: 100%; display: grid; grid-template-rows: 1fr auto; }
@media (max-width: 48rem) { .galerie li:nth-child(n) { grid-column: span 6; } .galerie li:nth-child(3) .foto, .galerie li:nth-child(4) .foto { aspect-ratio: 4 / 3; height: auto; } }

/* Leistungen */
.leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 1rem + 3vw, 4rem); }
.leistungen-kopf { grid-column: 1 / -1; }
.liste-haken { list-style: none; display: grid; gap: 0.7rem; }
.liste-haken li { display: flex; gap: 0.75rem; align-items: baseline; }
.liste-haken .icon { width: 1.05rem; height: 1.05rem; transform: translateY(0.18em); color: var(--gruen); }
.liste-haken--nein .icon { color: var(--rot); }
.leistungen h3 { font-size: 1.35rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--navy); }
/* Preiszeile in Karton mit Navy-Rand wie die Preistafel (Runde 11): so bleibt der
   Abschluss darunter die einzige Navy-Fläche im Bild. */
.preiszeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 3rem; margin-top: 1.5rem; padding: 1.35rem 1.6rem; border-radius: var(--radius); background: var(--karton); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.preiszeile div { display: grid; }
.preiszeile span { font-family: var(--schrift-etikett); font-size: 0.9rem; color: var(--text-2); }
.preiszeile strong { font-family: var(--schrift-etikett); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.preiszeile .preiszeile-hinweis { flex: 1 1 20rem; display: flex; gap: 0.75rem; align-items: flex-start; max-width: 32rem; margin: 0 0 0 auto; padding-left: 2rem; border-left: 1px solid var(--linie-stark); font-family: var(--schrift-text); font-size: 0.9em; line-height: 1.5; color: var(--tinte); }
.preiszeile-hinweis .icon { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; color: var(--rot); }
.preiszeile-hinweis > span { font: inherit; color: inherit; }
@media (max-width: 60rem) { .preiszeile .preiszeile-hinweis { flex-basis: 100%; max-width: none; margin-left: 0; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--linie-stark); } }
@media (max-width: 48rem) { .leistungen { grid-template-columns: 1fr; } .leistungen-kopf + div + div { margin-top: 1.75rem; } }

.hinweis { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--creme-tief); color: var(--tinte); max-width: 52rem; }
.hinweis .icon { width: 1.4rem; height: 1.4rem; color: var(--rot); flex: none; margin-top: 0.15rem; }
.hinweis p { margin: 0; }

.abschluss { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); border-radius: var(--radius); background: var(--navy); color: var(--creme); }
.abschluss h2 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); }
.abschluss p { margin-top: 0.75rem; color: rgb(247 241 229 / 0.85); max-width: 38rem; }
.abschluss-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 52rem) { .abschluss { grid-template-columns: 1fr; } }

/* ---------- Preise ---------- */
.preise-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.preistafel { background: var(--karton); color: var(--navy); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); box-shadow: inset 0 0 0 1.5px var(--navy); position: relative; }
.preistafel h2 { color: var(--navy); font-size: 1.5rem; margin-bottom: 1rem; }
.preistafel dl { margin: 0; display: grid; }
.preistafel div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px dashed var(--linie-stark); }
.preistafel dt { font-size: 1rem; color: var(--tinte); }
.preistafel dt small { display: block; font-size: 0.85rem; color: var(--text-2); }
.preistafel dd { margin: 0; font-family: var(--schrift-etikett); font-weight: 500; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preistafel .haupt dd { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 600; color: var(--rot); }
.bank { margin-top: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; font-size: 0.98em; }
.bank dt { font-family: var(--schrift-etikett); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding-top: 0.25rem; }
.bank dd { margin: 0; font-variant-numeric: tabular-nums; }
.liste-punkte { list-style: none; display: grid; gap: 0.8rem; }
.liste-punkte li { display: flex; gap: 0.8rem; align-items: baseline; }
.liste-punkte li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--rot); transform: rotate(45deg) translateY(-0.15em); }
.ruecktritt td.betrag { font-size: 1.05rem; color: var(--navy); }
@media (max-width: 56rem) { .preise-raster { grid-template-columns: 1fr; } }

/* ---------- Über uns ---------- */
.portraet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: start; }
.portraet + .portraet { margin-top: var(--abstand); }
.portraet--rechts .portraet-bild { order: 2; }
.portraet-bild { position: relative; }
.portraet-bild .person-bild { aspect-ratio: 4 / 5; }
.portraet-bild .siegel { position: absolute; z-index: 2; left: -0.9rem; top: -0.9rem; width: 3.6rem; height: 3.6rem; transform: rotate(-4deg); filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.25)); }
.portraet h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.portraet .etikett { display: block; margin: 0.6rem 0 1.5rem; color: var(--rot); }
@media (max-width: 52rem) { .portraet { grid-template-columns: 1fr; } .portraet--rechts .portraet-bild { order: 0; } .portraet-bild { max-width: 26rem; } }
/* Runde 12 (Pascal: «fast ein bisschen langweilig»): Porträt im Hui-Rahmen wie auf der
   Startseite, ein zweites Foto überlappt die Ecke und gleitet beim Scrollen leicht gegen
   das Hauptbild; erster Absatz als Einstieg in Lora; Steckbrief mit drei Angaben aus dem
   eigenen Text. */
.portraet { align-items: start; }
.portraet .portraet-bild { margin-top: 0.4rem; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
/* Runde 14: Hauptfoto als Abzug wie das kleine Foto (Karton, weicher Schatten) statt Hui-Rahmen */
.portraet-haupt { width: 82%; padding: 0.7rem; border-radius: 2px; background: var(--karton); box-shadow: var(--schatten-2); }
.portraet--rechts .portraet-haupt { margin-left: auto; }
.portraet-haupt .person-bild { border-radius: 1px; }
.portraet-neben { position: absolute; z-index: 2; right: 0; bottom: 0; width: 46%; margin: 0; padding: 0.5rem; border-radius: 2px; background: var(--karton); box-shadow: var(--schatten-2); transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.portraet--rechts .portraet-neben { right: auto; left: 0; }
.portraet-neben picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.portraet-neben img { width: 100%; height: 100%; object-fit: cover; }
.portraet-einstieg { font-family: var(--schrift-titel); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.5; color: var(--navy); }
.steckbrief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.75rem 0 0; border-top: 2px solid var(--navy); }
.steckbrief div { padding: 0.85rem 0.9rem 0 0; }
.steckbrief div + div { padding-left: 0.9rem; border-left: 1px solid var(--linie-stark); }
.steckbrief dt { font-family: var(--schrift-etikett); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot); }
.steckbrief dd { margin: 0.3rem 0 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--navy); text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .portraet .portraet-bild:hover .portraet-neben { translate: 0.5rem -0.5rem; box-shadow: 0 4px 8px rgb(18 35 56 / 0.1), 0 24px 40px -10px rgb(18 35 56 / 0.3); }
  .portraet--rechts .portraet-bild:hover .portraet-neben { translate: -0.5rem -0.5rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .portraet-neben { animation: neben-gleitet linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } }
}
@keyframes neben-gleitet { from { transform: translateY(2.5rem); } to { transform: translateY(-2.5rem); } }
/* Runde 17 (Handy): Der Name steht direkt unter dem Foto. Nach unten gleiten würde das kleine
   Foto über den Namen schieben, darum auf einer Spalte nur nach oben. */
@keyframes neben-gleitet-hoch { from { transform: none; } to { transform: translateY(-3rem); } }
@media (max-width: 52rem) { .portraet-neben { animation-name: neben-gleitet-hoch; } }
@media (max-width: 52rem) { .portraet .portraet-bild { max-width: 30rem; } }
@media (max-width: 34rem) { .steckbrief { grid-template-columns: 1fr; } .steckbrief div { padding-right: 0; } .steckbrief div + div { margin-top: 0.85rem; padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); } }

.zeitlinie { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; padding-top: 2.5rem; }
.zeitlinie::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1.15rem - 2.5px); height: 5px; border-radius: 3px; background: var(--navy); transform-origin: left; }
.js .zeitlinie::before { transform: scaleX(0); transition: transform 1.4s var(--ease-in-out); }
.js .zeitlinie.sichtbar::before { transform: none; }
.zeitlinie li { position: relative; }
.zeitlinie li::before { content: ""; position: absolute; top: -2.05rem; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 4px solid var(--rot); box-sizing: border-box; }
.zeitlinie b { display: block; font-family: var(--schrift-titel); font-size: 1.9rem; color: var(--navy); line-height: 1.1; }
.zeitlinie p { margin-top: 0.4rem; font-size: 0.95em; }
@media (max-width: 56rem) {
  .zeitlinie { grid-template-columns: 1fr; padding-top: 0; padding-left: 2.5rem; gap: 1.5rem; }
  .zeitlinie::before { left: calc(0.8rem - 2.5px); right: auto; top: 0; bottom: 0; width: 5px; height: auto; transform-origin: top; }
  .js .zeitlinie::before { transform: scaleY(0); }
  .zeitlinie li::before { left: -2.4rem; top: 0.4rem; }
}

.grundsaetze { list-style: none; border-top: 2px solid var(--navy); max-width: 58rem; }
.grundsaetze li { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--linie); }
.grundsatz-zahl { font-size: 1.6rem; line-height: 1; color: var(--rot); }
.grundsaetze h3 { font-size: 1.25rem; }
.grundsaetze p { margin: 0; color: var(--text-2); }
@media (max-width: 40rem) { .grundsaetze li { grid-template-columns: minmax(0, 1fr); } }

.fotoreihe { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.fotoreihe figure { margin: 0; }
.fotoreihe .foto { aspect-ratio: 4 / 3; }
.fotoreihe figcaption { margin-top: 0.55rem; font-family: var(--schrift-text); font-size: 0.98rem; line-height: 1.4; color: var(--text-2); }
@media (max-width: 48rem) { .fotoreihe { grid-template-columns: 1fr 1fr; } .fotoreihe figure:first-child { grid-column: 1 / -1; } }

/* ---------- Formular ---------- */
.formular-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.formular-seite { display: grid; gap: 1rem; }
.form { display: grid; gap: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.form fieldset { margin: 0; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 0; border-radius: var(--radius); background: var(--karton); box-shadow: inset 0 0 0 1px var(--linie); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; min-width: 0; }
.form legend { float: left; width: 100%; grid-column: 1 / -1; padding: 0 0 0.9rem; margin-bottom: 0.25rem; border-bottom: 2px solid var(--navy); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.35rem; color: var(--navy); display: flex; align-items: baseline; gap: 0.75rem; }
.form legend span { font-family: var(--schrift-etikett); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; color: var(--rot); }
.feld { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.feld--voll { grid-column: 1 / -1; }
.feld label, .gruppe-titel { font-family: var(--schrift-etikett); font-size: 0.92rem; font-weight: 500; color: var(--navy); }
.feld .pflicht { color: var(--rot); }
.feld .hilfe { font-size: 0.88rem; color: var(--text-2); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="date"], .feld select, .feld textarea { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; border: 1.5px solid rgb(31 58 95 / 0.35); border-radius: var(--radius); background: #fff; color: var(--tinte); font: inherit; font-size: 1.05rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid transparent; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(31 58 95 / 0.35); }
.feld input::placeholder { color: #56667c; }
.feld[data-fehler] input, .feld[data-fehler] select { border-color: var(--rot); background: #fff8f7; }
.fehler-text { display: none; align-items: flex-start; gap: 0.4rem; font-size: 0.92rem; color: var(--rot); font-weight: 700; }
.fehler-text .icon { width: 1.05rem; height: 1.05rem; transform: translateY(0.15em); }
.feld[data-fehler] .fehler-text { display: flex; }
.wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wahl label { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.5rem 1rem 0.5rem 0.8rem; border: 1.5px solid rgb(31 58 95 / 0.35); border-radius: var(--radius); background: #fff; cursor: pointer; font-family: var(--schrift-text); font-size: 1.05rem; font-weight: 400; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.16s var(--ease-out); }
.wahl label:active { transform: scale(0.98); }
/* Eigene Auswahlknöpfe und Häkchen: kein Browserrahmen um das Kästchen, der Fokus
   liegt als Ring auf der ganzen Auswahl (nur bei Tastatur) */
.wahl input, .bestaetigung input { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 2px solid rgb(31 58 95 / 0.55); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.wahl input:focus, .wahl input:focus-visible, .bestaetigung input:focus, .bestaetigung input:focus-visible { outline: none; }
.wahl input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); transform: scale(0); transition: transform 0.18s var(--ease-out); }
.wahl input:checked { border-color: var(--rot); }
.wahl input:checked::before { transform: scale(1); }
.bestaetigung input { width: 22px; height: 22px; border-radius: 5px; }
/* Runde 14: die allgemeine Fokusregel der Felder legte einen grauen Ring um den Kreis */
.feld .wahl input:focus, .feld .bestaetigung input:focus, .bestaetigung input:focus { box-shadow: none; }
.bestaetigung input::before { content: ""; width: 0.4rem; height: 0.75rem; margin-top: -0.15rem; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.18s var(--ease-out); }
.bestaetigung input:checked { border-color: var(--rot); background: var(--rot); }
.bestaetigung input:checked::before { transform: rotate(45deg) scale(1); }
.bestaetigung:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(31 58 95 / 0.35); }
.wahl label:has(input:checked) { border-color: var(--navy); background: #f3ecdb; box-shadow: inset 0 0 0 1px var(--navy); }
.wahl label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(31 58 95 / 0.35); }
.feld[data-fehler] .wahl label { border-color: var(--rot); }
.hochladen { position: relative; display: grid; justify-items: center; gap: 0.5rem; padding: 1.5rem 1rem; border: 2px dashed rgb(31 58 95 / 0.35); border-radius: var(--radius); background: #fff; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.hochladen:hover, .hochladen.ueber { border-color: var(--navy); background: #faf6ec; }
.hochladen input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.hochladen .icon { width: 2rem; height: 2rem; color: var(--navy); }
.hochladen strong { font-family: var(--schrift-etikett); font-weight: 500; color: var(--navy); }
.hochladen span { font-size: 0.9rem; color: var(--text-2); }
.hochladen:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(31 58 95 / 0.35); }
.datei-gewaehlt { display: none; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: #eef4ef; color: var(--gruen-tief); font-size: 0.95rem; }
.datei-gewaehlt.da { display: flex; }
.datei-gewaehlt .icon { color: var(--gruen); }
.bestaetigung { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; padding: 1rem; border-radius: var(--radius); background: #f3ecdb; cursor: pointer; }
.bestaetigung input { margin: 0.1rem 0 0; }
.feld[data-fehler] .bestaetigung { box-shadow: inset 0 0 0 1.5px var(--rot); }
.form-ende { display: grid; gap: 1rem; justify-items: start; }
@media (max-width: 34rem) { .form-ende { justify-items: stretch; } .form-ende .knopf { justify-content: center; } }
.form-ende .klein { max-width: 40rem; }
.form-meldung { display: none; padding: 1rem 1.2rem; border-radius: var(--radius); font-weight: 700; }
.form-meldung.fehler { display: block; background: #fbe9e7; color: var(--rot-tief); box-shadow: inset 0 0 0 1px rgb(179 38 30 / 0.4); }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Sicherheitsprüfung (Turnstile): das Kästchen von Cloudflare steht sichtbar über dem Knopf, gleich breit wie er
   (300 px, auf dem Handy beide über die ganze Breite) und im Rahmen der Formularkarten (Pascal 12.10.2026: «cleaner»;
   die erste sichtbare Fassung war 416 px breit und stand grau und eckig über dem schmaleren Knopf). Der eigene graue
   Rand des Kästchens liegt 1 px ausserhalb und wird abgeschnitten, sichtbar ist unser Rahmen mit runden Ecken.
   Nichts liegt über dem Kästchen, es wird nur am Rand beschnitten. Die Höhe ist fest, damit der Knopf nicht springt,
   wenn das Kästchen geladen ist: 65 px, auf sehr schmalen Handys die hohe Fassung (150 × 140 px, Klasse aus script.js). */
.schutz { width: 100%; max-width: 300px; height: 65px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karton); overflow: hidden; line-height: 0; }
.schutz > div { margin: -1px; }
.schutz--schmal { max-width: 150px; height: 140px; }
.form-ende:has(> .schutz) > .knopf { min-width: 300px; }
@media (max-width: 34rem) { .schutz:not(.schutz--schmal) { max-width: none; } .form-ende:has(> .schutz) > .knopf { min-width: 0; } }
.lade { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgb(247 241 229 / 0.4); border-top-color: var(--creme); display: none; }
.knopf[aria-busy="true"] .lade { display: inline-block; animation: dreht 0.6s linear infinite; }
@keyframes dreht { to { transform: rotate(360deg); } }
@media (max-width: 62rem) { .formular-raster { grid-template-columns: 1fr; } .formular-seite { position: static; order: -1; } }
@media (max-width: 36rem) { .form fieldset { grid-template-columns: 1fr; } }

/* Fahrschein nach dem Absenden */
.angemeldet { display: none; }
.angemeldet.da { display: block; }
/* Runde 19: nach der Anmeldung braucht es den Hinweis «Lieber auf Papier?» nicht mehr */
.formular-raster:has(.angemeldet.da) .formular-seite .hinweis { display: none; }
.fahrkarte-abriss .stempel { width: 7rem; height: 7rem; }

@media (prefers-reduced-motion: no-preference) {
  .angemeldet.da .stempel { animation: stempeln 0.5s var(--ease-out) 0.35s both; }
}
@keyframes stempeln { 0% { transform: scale(1.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }

/* ---------- Kontakt ---------- */
/* Person links wie ein Briefkopf, rechts drei grosse Tippflächen mit klarer Handlung */
.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.kontakt-person { display: grid; gap: 1.5rem; max-width: 24rem; }
.kontakt-person .person-bild { aspect-ratio: 4 / 5; }
.kontakt-person h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.kontakt-rolle { margin: 0.35rem 0 1.1rem; color: var(--text-2); }
.kontakt-person address { font-style: normal; display: grid; padding-top: 0.9rem; border-top: 2px solid var(--navy); font-family: var(--schrift-etikett); font-size: 1rem; line-height: 1.6; color: var(--navy); }
.kontakt-wege { display: grid; gap: 1rem; }
.kontakt-karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.3rem 1.5rem; border-radius: var(--radius); background: var(--karton); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-1); color: var(--navy); text-decoration: none; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.kontakt-symbol { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--creme-tief); color: var(--rot); transition: background-color 0.25s ease, color 0.25s ease; }
.kontakt-symbol .icon { width: 1.6rem; height: 1.6rem; }
.kontakt-text { display: grid; gap: 0.1rem; min-width: 0; }
.kontakt-art { font-family: var(--schrift-etikett); font-size: 0.88rem; font-weight: 500; color: var(--text-2); }
.kontakt-text strong { font-family: var(--schrift-titel); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kontakt-tun { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--schrift-etikett); font-size: 0.95rem; font-weight: 500; color: var(--rot); white-space: nowrap; }
.kontakt-tun .icon { transition: transform 0.3s var(--ease-out); }
.kontakt-karte:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-karte:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie-stark), var(--schatten-2); }
  .kontakt-karte:hover .kontakt-symbol { background: var(--rot); color: var(--creme); }
  .kontakt-karte:hover .kontakt-tun .icon { transform: translateX(4px); }
}
@media (max-width: 60rem) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt-person { max-width: none; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 1.25rem; }
  .kontakt-person .portraet-bild .siegel { width: 2.6rem; height: 2.6rem; left: -0.6rem; top: -0.6rem; }
}
@media (max-width: 34rem) {
  .kontakt-karte { gap: 0.9rem; padding: 1.1rem 1rem; }
  .kontakt-symbol { width: 2.9rem; height: 2.9rem; }
  .kontakt-tun span { display: none; }
}

/* ---------- Rechtstexte ---------- */
.recht { max-width: 46rem; }
.recht h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem); margin: 2.5rem 0 0.8rem; }
.recht h3 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.recht ul { padding-left: 1.25rem; margin-bottom: 1em; display: grid; gap: 0.35rem; }
.recht li::marker { color: var(--rot); }
.recht address { font-style: normal; margin-bottom: 1em; }
.stand { margin-top: 3rem; font-family: var(--schrift-etikett); font-size: 0.85rem; color: var(--text-2); }

/* ---------- Einblendungen ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Runde 14b: kürzer und mit gedeckelter Verzögerung (tiefe Absätze kamen bis 1 s zu spät) */
  .js [data-zeige] { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.6s var(--ease-out); transition-delay: calc(min(var(--i, 0), 3) * 50ms); }
  .js [data-zeige].sichtbar { opacity: 1; transform: none; }
  /* Fotos: startet, sobald der Rand ins Bild kommt, und ist nach gut einer halben
     Sekunde fertig (vorher 1,1 s ab 12 % Sichtbarkeit, das wirkte wie langsames Laden).
     Der Zoom liegt auf picture, damit das Überfahren (img) frei bleibt. */
  .js [data-zeige="bild"] { opacity: 1; transform: none; }
  .js [data-zeige="bild"] > picture { opacity: 0; clip-path: inset(0 0 10% 0); transform: scale(1.04); transition: opacity 0.45s ease-out, clip-path 0.65s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
  .js [data-zeige="bild"].sichtbar > picture { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

  /* Titel: Wörter steigen aus einer Maske auf (script.js teilt sie in .w/.wi) */
  .js .worte .w { display: inline-block; overflow: clip; padding: 0.08em 0 0.14em; margin: -0.08em 0 -0.14em; vertical-align: top; }
  .js .worte .wi { display: inline-block; transform: translateY(112%); transition: transform 0.85s var(--ease-out); transition-delay: calc(var(--w, 0) * 45ms); }
  .js .worte.sichtbar .wi { transform: none; }

  /* Seitenköpfe steigen beim Laden auf, ohne Skript */
  .seitenkopf h1 { animation: auftauchen 0.9s var(--ease-out) both; }
  .seitenkopf-text { animation: auftauchen 0.9s var(--ease-out) 0.12s both; }
}
/* Bilder, die beim Aufbau noch nicht da waren, blenden über ihrer Grundfarbe ein */
.js img.laedt:not(.geladen) { opacity: 0; }
.js img.laedt.geladen { animation: blende 0.45s ease-out; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .schilder::before, .js .zeitlinie::before, .js .lineal .saeule button::before { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .menue, .fuss, .auftakt-knoepfe, .karten-knoepfe, .abschluss-knoepfe { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .dunkel, .seitenkopf, .kapitel { background: #fff !important; color: #000 !important; }
  .seitenkopf h1, .kapitel h2 { color: #000 !important; }
  .tag { break-inside: avoid; }
}

/* ---------- Ergänzungen ---------- */
.begegnung[data-etappe="yunnan"] { --etappe: var(--gruen); }
.begegnung[data-etappe="tibet"] { --etappe: var(--rot); }
.begegnung[data-etappe="shanghai"] { --etappe: var(--navy); }
.hinweis--abstand, .abschluss--abstand { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.bank-titel { margin-top: 2rem; margin-bottom: 0.75rem; }
.ruecktritt-text { margin-top: 1rem; }
.abschnitt--hoehe .hinweis { margin: 1.25rem 0; }
.weiter--hell { color: var(--creme); }
.k-station { cursor: pointer; }
.k-station:focus-visible { outline: none; }
.k-station:focus-visible circle:not(.k-treffer) { stroke-width: 6; stroke: var(--navy); }
.k-station circle:not(.k-treffer), .k-name, .k-nr { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease-out), fill 0.2s ease; }
.k-name[text-anchor="start"] { transform-origin: 0% 50%; }
.k-name[text-anchor="end"] { transform-origin: 100% 50%; }
@media (hover: hover) and (pointer: fine) {
  .k-station:hover circle:not(.k-treffer) { transform: scale(1.18); fill: var(--navy); }
  .k-station.k-yunnan:hover circle:not(.k-treffer) { fill: var(--gruen); }
  .k-station.k-tibet:hover circle:not(.k-treffer) { fill: var(--rot); }
  .k-station:hover .k-nr { fill: #fff; transform: scale(1.18); }
  .k-station:hover .k-name { transform: scale(1.14); }
}
/* Schritte (Preise): Punkte genau auf der Achse, Linie nur von Punkt zu Punkt
   (Runde 11, vorher 2,3 px daneben und über den letzten Punkt hinaus). */
.zeitlinie--schritte { --achse: 0.75rem; --einzug: 2.75rem; --punkt-oben: -0.05rem; grid-template-columns: 1fr; padding-top: 0; padding-left: var(--einzug); gap: 1.25rem; margin: 1.25rem 0 0; }
.zeitlinie--schritte::before { display: none; }
.zeitlinie--schritte li { isolation: isolate; }
.zeitlinie--schritte li::before { left: calc(var(--achse) - 0.7rem - var(--einzug)); top: var(--punkt-oben); }
.zeitlinie--schritte li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: calc(var(--achse) - 2.5px - var(--einzug)); top: calc(var(--punkt-oben) + 0.7rem); width: 5px; height: calc(100% + 1.25rem); border-radius: 3px; background: var(--linie-stark); }
.zeitlinie--schritte b { font-family: var(--schrift-etikett); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot); }
.zeitlinie--schritte b::before { content: "Schritt "; }
.fahrkarte--fertig { -webkit-mask: none; mask: none; }
.fahrkarte--fertig h2 { margin: 0.25rem 0 0.5rem; }
.fahrkarte--fertig .fahrkarte-abriss p { font-family: var(--schrift-titel); font-size: 1.4rem; font-weight: 700; }

/* Bildbetrachter */
.betrachter { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--creme); overflow: hidden; }
.betrachter::backdrop { background: rgb(18 35 56 / 0.94); }
.betrachter figure { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 0.75rem; padding: 4.5rem clamp(1rem, 6vw, 5.5rem) 1.5rem; }
.betrachter img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.45); }
.betrachter figcaption { font-family: var(--schrift-etikett); font-size: 0.95rem; text-align: center; }
.betrachter button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgb(247 241 229 / 0.12); color: var(--creme); cursor: pointer; transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.betrachter button:active { transform: scale(0.94); }
.betrachter button .icon { width: 1.4rem; height: 1.4rem; }
.b-zu { top: 1rem; right: 1rem; }
.b-vor { left: 1rem; top: 50%; margin-top: -1.5rem; }
.b-nach { right: 1rem; top: 50%; margin-top: -1.5rem; }
/* Runde 17 (Handy): Foto fast randlos, Pfeile unten neben der Legende statt über dem Foto;
   blättern geht auch per Wischen (script.js). */
@media (max-width: 40rem) {
  .betrachter figure { padding: 4.5rem 0.5rem 1rem; gap: 1rem; }
  .betrachter figcaption { display: grid; place-items: center; min-height: 3rem; padding-inline: 4rem; line-height: 1.4; }
  .b-vor, .b-nach { top: auto; bottom: 1rem; margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) { .betrachter button:hover { background: rgb(247 241 229 / 0.24); } }
@media (prefers-reduced-motion: no-preference) {
  .betrachter[open] { animation: betrachter-auf 0.28s var(--ease-out); }
  .betrachter[open]::backdrop { animation: blende 0.28s ease; }
}
@keyframes betrachter-auf { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

.form .tabelle-huelle { box-shadow: none; background: transparent; border-radius: 0; }
.form .fahrplan tbody tr + tr td, .form .fahrplan tbody tr + tr th { border-top: 1px solid var(--linie); }
.dunkel .knopf--linie, .abschluss .knopf--linie { color: var(--creme); box-shadow: inset 0 0 0 1.5px rgb(247 241 229 / 0.7); }
@media (hover: hover) and (pointer: fine) { .abschluss .knopf--linie:hover { background-color: var(--creme); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--creme); } }

/* Stations- und Rücktrittstabelle auf schmalen Bildschirmen gestapelt statt seitlich scrollend */
@media (max-width: 44rem) {
  .fahrplan--stationen thead, .ruecktritt thead { display: none; }
  .fahrplan--stationen tbody tr { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.7rem 0.9rem; }
  .fahrplan.fahrplan--stationen tbody tr td, .fahrplan.fahrplan--stationen tbody tr th { padding: 0; border: 0; }
  .fahrplan--stationen .nr { grid-row: span 3; }
  .fahrplan--stationen .datum::before { content: "Tag "; }
  .fahrplan--stationen tbody tr + tr { border-top: 1px solid var(--linie); }
  .ruecktritt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 0.7rem 0.9rem; align-items: center; }
  .fahrplan.ruecktritt tbody tr th, .fahrplan.ruecktritt tbody tr td { padding: 0; border: 0; }
  .ruecktritt tbody tr td:not(.betrag) { grid-column: 1; font-size: 0.92em; color: var(--text-2); }
  .ruecktritt tbody tr .betrag { grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem; }
  .ruecktritt tbody tr + tr { border-top: 1px solid var(--linie); }
}

/* Ohne JavaScript: Navigation auf dem Handy als Zeile unter dem Kopf statt Menüknopf */
@media (max-width: 62rem) {
  html:not(.js) .menue-knopf { display: none; }
  html:not(.js) .nav-liste { display: flex; position: absolute; top: var(--kopf); left: 0; right: 0; overflow-x: auto; padding: 0 var(--rand); background: var(--creme); border-bottom: 1px solid var(--linie); }
}

.klein-hell { font-family: var(--schrift-etikett); font-size: 0.8rem; color: rgb(255 255 255 / 0.85); }

/* Hover- und Tippzustände (Vercel-Richtlinien) */
a, button, label, input, select, textarea, summary { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgb(31 58 95 / 0.12); }
.nobr { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .karten-knoepfe button:not([aria-pressed="true"]):hover { background: rgb(31 58 95 / 0.08); }
  .wahl label:hover { border-color: var(--navy); }
  .bestaetigung:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid transparent; }
html:has(.betrachter[open]) { overflow: hidden; }
.betrachter { overscroll-behavior: contain; }
@media print {
  .js [data-zeige], .js [data-zeige="bild"] > picture, .js [data-zeige="bild"] > picture img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media (max-width: 30rem) {
  .fahrkarte-strecke { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .fahrkarte-pfeil { flex: none; width: 2px; min-width: 0; height: 2.25rem; margin-left: 1.1rem; background: repeating-linear-gradient(to bottom, var(--navy) 0 6px, transparent 6px 11px); }
  .fahrkarte-pfeil .icon { display: none; }
}

/* =====================================================================
   Runde 10 (Rückmeldung Pascal 28.09.2026 abends)
   ===================================================================== */

/* ---------- Reiselinie in den Tabellen ----------
   Stationen: obere Zellhälfte = Ankunft (Farbe dieser Station), untere = Abfahrt
   (Farbe der nächsten). Flüge gestrichelt, wie im Reisebeschrieb-PDF. */
.fahrplan--stationen th, .fahrplan--stationen td { vertical-align: middle; }
.fahrplan--stationen tr[data-nach="yunnan"] { --nach: var(--gruen); }
.fahrplan--stationen tr[data-nach="tibet"] { --nach: var(--rot); }
.fahrplan--stationen tr[data-nach="shanghai"] { --nach: var(--navy); }
.fahrplan--stationen .nr::before, .fahrplan--stationen .nr::after { content: ""; position: absolute; left: calc(1rem + 1.05rem - 1.5px); width: 3px; background: var(--c); }
.fahrplan--stationen .nr::before { --c: var(--etappe); top: 0; bottom: 50%; }
.fahrplan--stationen .nr::after { --c: var(--nach); top: 50%; bottom: 0; }
.fahrplan--stationen tr[data-an="flug"] .nr::before, .fahrplan--stationen tr[data-ab="flug"] .nr::after { background: repeating-linear-gradient(to bottom, var(--c) 0 5px, transparent 5px 11px); }
/* Tage: Linie innerhalb einer Etappe, schlanker */
.fahrplan--tage td, .fahrplan--tage th { vertical-align: middle; }
.fahrplan--tage .nr a { width: 2.1rem; height: 2.1rem; font-size: 0.82rem; box-shadow: inset 0 0 0 2px var(--etappe, var(--navy)); }
.fahrplan--tage tbody tr:not(.gruppe) .nr::before, .fahrplan--tage tbody tr:not(.gruppe) .nr::after { content: ""; position: absolute; left: calc(1rem + 1.05rem - 1px); width: 2px; background: var(--etappe, var(--navy)); opacity: 0.45; }
.fahrplan--tage tbody tr:not(.gruppe) .nr::before { top: 0; bottom: 50%; }
.fahrplan--tage tbody tr:not(.gruppe) .nr::after { top: 50%; bottom: 0; }
.fahrplan--tage tr.gruppe + tr .nr::before, .fahrplan--tage tbody tr:last-child .nr::after { display: none; }
@media (max-width: 44rem) {
  .fahrplan--stationen .nr, .fahrplan--tage tbody tr:not(.gruppe) .nr { display: flex; align-items: center; }
  .fahrplan--stationen .nr::before, .fahrplan--stationen .nr::after { left: calc(1.05rem - 1.5px); }
  .fahrplan--tage tbody tr:not(.gruppe) .nr::before, .fahrplan--tage tbody tr:not(.gruppe) .nr::after { left: calc(1.05rem - 1px); }
  .fahrplan--stationen .nr::before { top: -0.7rem; }
  .fahrplan--stationen .nr::after { bottom: -0.7rem; }
  .fahrplan--tage tbody tr:not(.gruppe) .nr::before { top: -0.75rem; }
  .fahrplan--tage tbody tr:not(.gruppe) .nr::after { bottom: -0.75rem; }
}

/* ---------- Tag-für-Tag-Linie (Startseite): Verweise, Foto beim Überfahren ---------- */
.lp-link { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.lp-link:focus-visible { outline: none; }
.lp-link:focus-visible .lp-punkt { outline: 3px solid var(--navy); outline-offset: 3px; }
.lp-text strong { transition: transform 0.25s var(--ease-out), color 0.2s ease; }
.lp:nth-child(odd) .lp-text strong { transform-origin: 50% 0; }
.lp:nth-child(even) .lp-text strong { transform-origin: 50% 100%; }
.lp-link:focus-visible .lp-text strong { transform: scale(1.14); color: var(--c); }
.lp-punkt { transition: transform 0.25s var(--ease-out), background-color 0.2s ease; }
.lp-bild { position: absolute; z-index: 6; left: 50%; width: 13rem; translate: -50% 0; display: grid; gap: 0.4rem; padding: 0.4rem 0.4rem 0.55rem; border-radius: var(--radius); background: var(--karton); box-shadow: var(--schatten-2), inset 0 0 0 1px var(--linie); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out, transform 0.22s var(--ease-out); }
.lp-bild picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.lp-bild img { width: 100%; height: 100%; object-fit: cover; }
.lp-bild > span { padding: 0 0.2rem; font-family: var(--schrift-etikett); font-size: 0.78rem; line-height: 1.35; color: var(--text-2); }
.lp:nth-child(odd) .lp-bild { bottom: calc(100% - var(--lp-oben) + 1.3rem); transform: translateY(6px) scale(0.96); transform-origin: 50% 100%; }
.lp:nth-child(even) .lp-bild { top: calc(var(--lp-oben) + 2.1rem); transform: translateY(-6px) scale(0.96); transform-origin: 50% 0; }
.lp:first-child .lp-bild { left: calc(50% - var(--r)); translate: 0 0; }
.lp:nth-child(2) .lp-bild { left: calc(50% - 5rem); translate: 0 0; }
.lp:nth-last-child(2) .lp-bild { left: auto; right: calc(50% - 5rem); translate: 0 0; }
.lp:last-child .lp-bild { left: auto; right: calc(50% - var(--r)); translate: 0 0; }
.lp-link:focus-visible + .lp-bild { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .lp-link:hover .lp-punkt { transform: scale(1.3); background: var(--c); }
  .lp-link:hover .lp-text strong { transform: scale(1.14); color: var(--c); }
  .lp-link:hover + .lp-bild { opacity: 1; transform: none; }
}
@media (max-width: 60rem) {
  .lp { padding-block: 0; }
  .lp-link { flex-direction: row; gap: 1rem; min-height: 2.75rem; padding-block: 0.3rem; }
  .lp-bild { display: none; }
}
/* Runde 12: Die Linie wird einmal als Ganzes von links aufgedeckt (clip-path, 0,8 s),
   alles in vollen Farben; keine halb durchsichtigen Halte mehr wie in Runde 11.
   Die negativen Ränder lassen Platz für Namen und Fotokarten über und unter der Linie. */
@media (prefers-reduced-motion: no-preference) and (min-width: 60.01rem) {
  .js .linie .linie-gruppen, .js .linie .linie-punkte { clip-path: inset(-16rem 100% -16rem -3rem); transition: clip-path 0.8s var(--ease-out); }
  .js .linie .linie-gruppen { transition-delay: 0.1s; }
  .js .linie.sichtbar .linie-gruppen, .js .linie.sichtbar .linie-punkte { clip-path: inset(-16rem -3rem -16rem -3rem); }
}

/* ---------- Fahrtlinie im Reiseverlauf (Reisebeschrieb) ----------
   Linie durch die Tagesnummern einer Etappe, füllt sich bis zur Bildschirmmitte;
   dort fährt ein Zeichen mit (Bus, Zug oder Flugzeug je nach Tag). Tage färben sich,
   sobald sie erreicht sind; das Zeichen fährt hinter den Nummern durch wie ein Zug
   durch den Bahnhof. Nur breite Bildschirme, script.js setzt .fahrt-an. */
.tage { position: relative; }
.tage[data-fahrt="yunnan"] { --etappe: var(--gruen); }
.tage[data-fahrt="tibet"] { --etappe: var(--rot); }
.tage[data-fahrt="shanghai"] { --etappe: var(--navy); }
.fahrt { display: none; }
@media (min-width: 52.01rem) {
  .tage.fahrt-an .fahrt { display: block; position: absolute; left: 0.7rem; width: 3rem; pointer-events: none; }
  .fahrt-linie { position: absolute; left: calc(50% - 2px); top: 0; bottom: 1.2rem; width: 4px; border-radius: 2px; background: rgb(31 58 95 / 0.12); }
  .fahrt-linie > span { position: absolute; inset: 0; border-radius: inherit; background: var(--etappe); transform-origin: top; }
  /* Das Zeichen zieht die gefüllte Linie als Schweif hinter sich her: Sie endet immer
     in seiner Mitte und kann ihm nicht vorauslaufen (Runde 11). Die Fahrt schneidet
     den Schweif oben ab; dort liegt ohnehin die erste Tagesnummer darüber. */
  .tage.fahrt-an .fahrt { overflow: clip; overflow-clip-margin: 0.9rem; }
  .fahrt-linie > span { display: none; }
  .fahrt-zug { position: sticky; top: calc(50vh - 1.2rem); z-index: 0; display: block; width: 2.4rem; height: 2.4rem; margin: -1.2rem auto 0; }
  .fahrt-zug::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 400vh; border-radius: 2px; background: var(--etappe); }
  .fahrt-zug > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--etappe); color: #fff; box-shadow: 0 0 0 3px var(--creme), 0 6px 14px -2px rgb(18 35 56 / 0.35); }
  .fahrt-zug .icon { width: 1.25rem; height: 1.25rem; }
  .tage.fahrt-an .tag-nummer { position: relative; z-index: 1; background: var(--karton); color: var(--etappe); box-shadow: inset 0 0 0 2.5px var(--etappe); transition: background-color 0.35s ease, color 0.35s ease; }
  .tage.fahrt-an .tag.erreicht .tag-nummer { background: var(--etappe); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .fahrt-zug { display: none !important; } .fahrt-linie > span { display: block !important; } .tage.fahrt-an .tag-nummer { background: var(--etappe); color: #fff; } }

/* ---------- Datumsfeld mit eigenem Kalender (Anmeldung) ---------- */
.datum-feld { position: relative; }
.feld .datum-feld input { padding-right: 3.4rem; font-variant-numeric: tabular-nums; }
.datum-knopf { position: absolute; top: calc(50% - 1.375rem); right: 0.15rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 4px; background: transparent; color: var(--navy); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out); }
.datum-knopf .icon { width: 1.3rem; height: 1.3rem; }
.datum-knopf:active { transform: scale(0.94); }
.datum-knopf[aria-expanded="true"] { background: var(--navy); color: var(--creme); }
@media (hover: hover) and (pointer: fine) { .datum-knopf:not([aria-expanded="true"]):hover { background: rgb(31 58 95 / 0.08); } }
.kalender { position: absolute; z-index: 30; top: calc(100% + 0.45rem); left: 0; width: 21rem; max-width: calc(100vw - 2 * var(--rand)); padding: 0.9rem; border-radius: 10px; background: var(--karton); color: var(--navy); box-shadow: 0 2px 4px rgb(18 35 56 / 0.08), 0 18px 40px -8px rgb(18 35 56 / 0.3), inset 0 0 0 1px var(--linie); font-family: var(--schrift-etikett); opacity: 0; transform: translateY(-4px) scale(0.97); transform-origin: 1.5rem 0; transition: opacity 0.15s ease-out, transform 0.18s var(--ease-out); }
.kalender.offen { opacity: 1; transform: none; }
.kal-kopf { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.6rem; }
.kal-titel { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: auto; min-height: 2.5rem; padding: 0 0.6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--navy); font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; }
.kal-titel .icon { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease-out); }
.kalender[data-ansicht="jahre"] .kal-titel .icon, .kalender[data-ansicht="monate"] .kal-titel .icon { transform: rotate(180deg); }
.kal-schritt { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; transition: background-color 0.15s ease, transform 0.16s var(--ease-out); }
.kal-schritt .icon { width: 1.15rem; height: 1.15rem; }
.kal-schritt:active, .kal-tag:active, .kal-wahl:active { transform: scale(0.94); }
.kal-schritt[disabled] { opacity: 0.3; cursor: default; }
.kalender[data-ansicht="jahre"] .kal-schritt, .kalender[data-ansicht="monate"] .kal-schritt { visibility: hidden; }
.kal-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 0.2rem; }
.kal-woche span { text-align: center; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding: 0.3rem 0; }
.kal-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kal-tag { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--tinte); font-family: var(--schrift-etikett); font-size: 0.95rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, transform 0.16s var(--ease-out); }
.kal-tag[data-heute] { box-shadow: inset 0 0 0 1.5px rgb(31 58 95 / 0.35); }
.kal-tag[aria-pressed="true"] { background: var(--rot); color: #fff; font-weight: 600; box-shadow: none; }
.kal-tag[disabled] { color: rgb(31 58 95 / 0.28); cursor: not-allowed; }
.kal-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; max-height: 16.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(31 58 95 / 0.35) transparent; padding: 0.1rem; }
.kalender[data-ansicht="monate"] .kal-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kal-wahl { min-height: 2.6rem; border: 0; border-radius: 999px; background: transparent; color: var(--tinte); font-family: var(--schrift-etikett); font-size: 0.95rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, transform 0.16s var(--ease-out); }
.kal-wahl[aria-pressed="true"] { background: var(--rot); color: #fff; font-weight: 600; }
.kal-wahl[disabled] { color: rgb(31 58 95 / 0.28); cursor: not-allowed; }
.kal-fuss { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--linie); }
.kal-fuss button { min-height: 2.5rem; padding: 0 0.6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--navy); font-family: var(--schrift-etikett); font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease; }
.kal-fuss .kal-leeren { color: var(--rot); }
.kalender button:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .kal-titel:hover, .kal-schritt:not([disabled]):hover, .kal-fuss button:hover { background: rgb(31 58 95 / 0.08); }
  .kal-tag:not([disabled]):not([aria-pressed="true"]):hover, .kal-wahl:not([disabled]):not([aria-pressed="true"]):hover { background: rgb(179 38 30 / 0.1); color: var(--rot-tief); }
}

/* ---------- Über uns und Reiseleitung: ruhige Hover-Zustände ---------- */
.portraet-bild .person-bild img, .person .person-bild img { transition: transform 0.9s var(--ease-out); }
.portraet-bild .siegel { transition: transform 0.5s var(--ease-out); }
.grundsaetze li { position: relative; isolation: isolate; }
.grundsaetze li::before { content: ""; position: absolute; inset: 0 -1.25rem; z-index: -1; border-radius: var(--radius); background: var(--karton); box-shadow: inset 0 0 0 1px var(--linie); opacity: 0; transform: scaleX(0.96); transform-origin: left; transition: opacity 0.25s ease, transform 0.4s var(--ease-out); }
.grundsaetze h3 { transition: color 0.25s ease, transform 0.35s var(--ease-out); }
.zeitlinie li::before { transition: background-color 0.25s ease, transform 0.3s var(--ease-out); }
.zeitlinie b { transition: color 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  .portraet-bild:hover .person-bild img, .person:hover .person-bild img { transform: scale(1.035); }
  .portraet-bild:hover .siegel { transform: rotate(0deg) scale(1.06); }
  .grundsaetze li:hover::before { opacity: 1; transform: none; }
  .grundsaetze li:hover h3 { color: var(--rot); transform: translateX(0.35rem); }
  .zeitlinie li:hover::before { background: var(--rot); transform: scale(1.15); }
  .zeitlinie li:hover b { color: var(--rot); }
}

@media print {
  .js .worte .wi, .js img.laedt { transform: none !important; opacity: 1 !important; }
  .fahrt, .lp-bild, .kalender { display: none !important; }
}

/* Trefferfläche der Kartenstationen unsichtbar halten (die Etappenregeln färbten sie mit) */
.k-station circle.k-treffer, .k-station.k-yunnan circle.k-treffer, .k-station.k-tibet circle.k-treffer { fill: transparent; stroke: none; }
.k-relief { pointer-events: none; }
/* Linie über die Zeilentrennung hinweg ziehen */
.fahrplan--stationen tbody tr + tr .nr::before, .fahrplan--tage tbody tr + tr:not(.gruppe) .nr::before { top: -1px; }
/* Kontakt: Foto quadratisch, damit Person und Wege gleich viel Gewicht haben */
.kontakt-person .person-bild { aspect-ratio: 1; }
@media (min-width: 60.01rem) { .kontakt-person { max-width: 21rem; } }
@media (max-width: 44rem) {
  .fahrplan--stationen tbody tr + tr .nr::before { top: -0.75rem; }
  .fahrplan--tage tbody tr + tr:not(.gruppe) .nr::before { top: -0.8rem; }
}
/* Fotoreihe (Über uns): alle drei Fotos gleich hoch, Legenden auf einer Linie */
.fotoreihe { align-items: start; }
.fotoreihe .foto { aspect-ratio: auto; height: clamp(13rem, 7rem + 12vw, 20rem); }
@media (max-width: 48rem) { .fotoreihe .foto { aspect-ratio: 4 / 3; height: auto; } }
/* Kontakt auf dem Handy: E-Mail passt auf eine Zeile */
@media (max-width: 34rem) { .kontakt-text strong { font-size: 1.15rem; } }

/* Runde 14: Schild ohne Foto: Schriftzeichen bleiben beim Überfahren stehen (vorher leer) */
a.schild:not(:has(.schild-bild)):hover .schild-zeichen, a.schild:not(:has(.schild-bild)):focus-visible .schild-zeichen { opacity: 1; transform: none; }

/* Runde 14: Tabelle «Alle 21 Tage» als zugeklappte Kurzübersicht im Reiseverlauf */
.kurz-uebersicht { margin: calc(-1 * clamp(0.75rem, 0.5rem + 1vw, 1.5rem)) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.kurz-uebersicht summary { list-style: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--linie-stark); border-radius: 999px; font-family: var(--schrift-etikett); font-size: 0.95rem; font-weight: 500; color: var(--navy); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.kurz-uebersicht summary::-webkit-details-marker { display: none; }
.kurz-uebersicht summary .icon { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease-out); }
.kurz-uebersicht[open] summary .icon { transform: rotate(180deg); }
.kurz-uebersicht summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.kurz-uebersicht .tabelle-huelle { margin-top: 1rem; }
@media (hover: hover) and (pointer: fine) { .kurz-uebersicht summary:hover { background: rgb(31 58 95 / 0.06); border-color: var(--navy); } }
@media print { .kurz-uebersicht .tabelle-huelle { display: block; } }

/* Runde 15: Anmeldung, Block «Preise und Rücktritt» luftiger und übersichtlicher */
.unterblock + .unterblock { margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
.formular-unter { margin: 0.4rem 0 0.9rem; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; line-height: 1.2; color: var(--navy); }
.preisraster { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.preisraster > div { padding: 1.15rem 1.35rem 1.25rem; }
.preisraster > div:nth-child(even) { border-left: 1px solid var(--linie); }
.preisraster > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
.preisraster dt { font-family: var(--schrift-etikett); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.preisraster dd { margin: 0.4rem 0 0; font-family: var(--schrift-etikett); font-weight: 500; font-size: 1.3rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.preisraster dd span { display: block; margin-top: 0.25rem; font-family: var(--schrift-text); font-weight: 400; font-size: 0.95rem; line-height: 1.4; color: var(--text-2); }
.preisraster > div:first-child dd { color: var(--rot); }
.ruecktritt--form { background: #fff; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.form .ruecktritt--form th, .form .ruecktritt--form td { padding: 0.95rem 1.2rem; }
.form .ruecktritt--form tbody th { font-weight: 400; }
.form .ruecktritt--form td:not(.betrag) { color: var(--text-2); }
.form .ruecktritt--form td.betrag { font-family: var(--schrift-etikett); font-weight: 600; color: var(--navy); }
.ruecktritt-hinweis { margin: 0.9rem 0 0; max-width: 40rem; }
.unterblock ~ .feld--voll:has(.bestaetigung) { margin-top: 0.75rem; }
@media (max-width: 36rem) {
  .preisraster { grid-template-columns: 1fr; }
  .preisraster > div:nth-child(even) { border-left: 0; }
  .preisraster > div + div { border-top: 1px solid var(--linie); }
  .form .ruecktritt--form th, .form .ruecktritt--form td { padding: 0; }
  .form .ruecktritt--form tbody tr + tr th, .form .ruecktritt--form tbody tr + tr td { border-top: 0; }
  .ruecktritt--form tbody tr { padding: 0.9rem 1rem; }
}