/* Halteseite carejourney.city — 15. August 2026.
 *
 * WARUM EINE EIGENE DATEI UND NICHT site.css. site.css ist das Designsystem
 * von carejourney.ch: über zweitausend Zeilen, sieben Sprachen, Tag- und
 * Nachtkleid, Kompass, Fussband, Giesser. Eine Halteseite braucht davon
 * nichts und würde alles laden. Vor allem aber: jede spätere Änderung am
 * Designsystem der einen Website würde ungefragt die andere verändern — und
 * die Reiseseite bekommt ein eigenes Gesicht (Sommer=Tag, Winter=Nacht,
 * docs/KONZEPT_REISESEITE). Die Trennung ist billiger, solange sie noch
 * billig ist.
 *
 * Die Farbwerte sind aus site.css übernommen, nicht neu erfunden: --paper
 * und --ink in Tag und Nacht. So sieht der Übergang von der einen Domain zur
 * anderen nicht nach einem fremden Haus aus.
 *
 * KEIN data-theme-Umschalter. Auf carejourney.ch entscheidet die Besucherin
 * über einen Knopf; hier gibt es keinen Knopf und keine Kopfzeile, in die er
 * gehörte. Es gilt die Einstellung des Geräts — und mehr wäre auf einer
 * Seite mit vier Zeilen Text eine Bedienung ohne Zweck.
 */

/* --- Die Hausschriften ---------------------------------------------------
   NACHGETRAGEN AM 16. AUGUST 2026, und der Befund ist unangenehm einfach:
   `carejourney.ch` liefert seit Langem zwei eigene Schriften aus, selbst
   gehostet, lizenziert, in `docs/MEDIA_MANIFEST.md` eingetragen — und diese
   Domain benutzte keine davon. Sie stand auf Georgia und `system-ui`.

   Es war kein Entscheid, sondern eine Auslassung: `reise.css` entstand als
   Stylesheet einer Halteseite, und eine Halteseite braucht keine Hausschrift.
   Als daraus eine Website wurde, ist es niemandem aufgefallen.

   DAS IST DER GROESSTE SICHTBARE UNTERSCHIED ZU ALLEM, WAS GUT IST — und der
   billigste: die Dateien liegen bereits im Repository, es entsteht keine
   einzige neue Anfrage nach draussen, und die CSP bleibt unberuehrt
   (`font-src 'self'`). Eine Seite, die bewusst ohne Fotografie auskommt,
   traegt ihre ganze Anmutung in der Schrift; auf einer Systemschrift ist das
   eine Behauptung ohne Deckung.

   Dieselben zwei Deklarationen wie in site.css, absichtlich woertlich: die
   Datei-URL ist identisch, der Browser laedt sie also genau einmal fuer beide
   Domains. Zwei Stylesheets, eine Schriftdatei. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.web.8203f9e90ab8.woff2") format("woff2-variations"),
       url("../fonts/newsreader.web.8203f9e90ab8.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.web.7eeb93043acb.woff2") format("woff2-variations"),
       url("../fonts/archivo.web.7eeb93043acb.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 88% 118%;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f3eb;
  --ink: #1a3a2a;
  --leise: #5a6b60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a1420;
    --ink: #e6edf4;
    --leise: #9fb0c0;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

/* `:not(.reise)` seit dem 16. August: dieser Block ist die HALTESEITE, und
   sein `display: grid; place-items: center` zentriert alles, was im `body`
   steht. Für vier Zeilen Text war das genau richtig. Für die Website darunter
   macht es aus jedem Kopf- und Fussbalken einen Kasten in Inhaltsbreite — die
   navyfarbenen Flächen hörten mitten auf der Seite auf. Eine Rücknahme über
   `body.reise` reichte nicht: `display` liess sich überschreiben, die
   Grid-Ausrichtung der Kinder blieb. Also wird der Block dort ausgehängt, wo
   er nicht gilt, statt anderswo dagegen anzuschreiben. */
body:not(.reise) {
  margin: 0;
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

.halt {
  max-inline-size: 32rem;
  text-align: center;
}

.halt__logo {
  inline-size: 7.5rem;
  block-size: auto;
  border-radius: 50%;
  margin-block-end: 1.5rem;
}

.halt__name {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.halt__satz {
  margin: 0 0 1.75rem;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}

.halt__weiter { margin: 0 0 2.5rem; }

.halt__weiter a {
  color: inherit;
  /* Unterstreichung bleibt: die Farbe allein darf einen Link nicht tragen
     (WCAG 1.4.1), und hier gibt es genau einen. */
  text-underline-offset: 0.2em;
}

.halt__weiter a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.halt__fuss {
  margin: 0;
  font-size: 0.875rem;
  color: var(--leise);
}


/* --- Sommer und Winter -----------------------------------------------------
   Iris, 14. August: „summer is day and winter is night". Die Reiseseite hat
   damit dieselben zwei Zustände wie die Hauptwebsite, aber einen anderen
   Auslöser: nicht die Einstellung des Geräts, sondern das Datum.

   DESHALB SCHLAEGT `data-jahreszeit` DIE MEDIA-QUERY. Auf carejourney.ch ist
   es umgekehrt gedacht — dort entscheidet die Besucherin und das Gerät ist
   die Vorgabe. Hier entscheidet der Kalender, weil die Jahreszeit die
   Aussage der Seite ist und nicht ihre Bedienung. Wer im Juli lieber Winter
   sehen will, klickt; das Gerät stimmt darüber nicht mit ab. */
:root[data-jahreszeit="sommer"] {
  --paper: #f7f3eb;
  --ink: #1a3a2a;
  --leise: #5a6b60;
}

:root[data-jahreszeit="winter"] {
  --paper: #0a1420;
  --ink: #e6edf4;
  --leise: #9fb0c0;
}

.halt__zeit {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
}

.halt__zeit a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.halt__zeit a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* =========================================================================
   DIE REISESEITE — 16. August 2026
   =========================================================================

   Bis hierher stand in dieser Datei eine Halteseite. Ab hier steht eine
   Website: Terminal, Abflugtafel, Concierge, Zielseiten, Offenlegung.

   Was aus dem Haus übernommen wird, sind die Farbtoken — dasselbe Haus, eine
   Schwelle, die man bemerkt (Iris, 16. August, OQ-78). Was NICHT übernommen
   wird, ist site.css selbst: über neuntausend Zeilen für sieben Sprachen,
   Kompass, Fussband und Giesser, von denen diese Domain nichts braucht.

   KEINE BEWEGUNG IN DIESER DATEI. Das ist kein Versäumnis, sondern die Regel
   vom 16. August: jede Bewegung meldet sich bei `[data-motion="full"]` an,
   BEVOR sie gebaut wird. Die Anmeldung steht in docs/BEWEGUNG_CITY.md; die
   Abflugtafel ist dort als erste vorgesehen, und sie ist absichtlich schon
   ohne jede Bewegung vollständig. */

:root {
  --deep: #102a43;
  --ink-on-deep: #e9eef5;
  --linie: #cfc9b8;
  --gold: #b28e3a;
  /* Die Fuss-Token, wortgleich aus site.css uebernommen — 18. August 2026,
     Iris: „The site will have the same footer … as carejourney.ch."
     Abgeschrieben und nicht neu gemischt: die Kontraste dieser Paare sind
     auf .ch gemessen (web/tests/test_contrast.py, KD-W-03), und eine
     „aehnliche" Creme haette diese Messung ungueltig gemacht. */
  --paper-sunk: #ede8da;
  --deep-2: #0a1f33;
  --ink-2: #365470;
  --ink-3: #4a5f73;
  --linie-hell: rgb(16 42 67 / 14%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --deep: #0f2947;
    --ink-on-deep: #e6edf4;
    --linie: #22303f;
    --gold: #ddbc6b;
    --paper-sunk: #060e17;
    --deep-2: #0a1e38;
    --ink-2: #a9bbcb;
    --ink-3: #8296a9;
    --linie-hell: rgb(230 237 244 / 14%);
  }
}

/* UND DANN SCHLAEGT DIE JAHRESZEIT DAS GERAET — wie oben bei --paper.
   Gefunden am 16. August beim Nachmessen im Browser: --paper blieb im
   Nachtmodus hell, und das ist RICHTIG (Iris, 14. August: der Kalender
   entscheidet, nicht das Gerät). Die vier Token hier folgten aber noch dem
   Gerät. Ergebnis wäre ein cremefarbenes Blatt mit nachtblauen Balken gewesen
   — zwei Systeme in einem Bild. Ein Grund mehr, warum diese Website gemessen
   wird und nicht angeschaut: im Sommer auf einem hellen Gerät hätte es nie
   jemand gesehen. */
:root[data-jahreszeit="sommer"] {
  --deep: #102a43;
  --ink-on-deep: #e9eef5;
  --linie: #cfc9b8;
  --gold: #b28e3a;
  --paper-sunk: #ede8da;
  --deep-2: #0a1f33;
  --ink-2: #365470;
  --ink-3: #4a5f73;
  --linie-hell: rgb(16 42 67 / 14%);
}

:root[data-jahreszeit="winter"] {
  --deep: #0f2947;
  --ink-on-deep: #e6edf4;
  --linie: #22303f;
  --gold: #ddbc6b;
  --paper-sunk: #060e17;
  --deep-2: #0a1e38;
  --ink-2: #a9bbcb;
  --ink-3: #8296a9;
  --linie-hell: rgb(230 237 244 / 14%);
}

/* `display: block` und `padding: 0` sind hier keine Kosmetik, sondern eine
   Rücknahme: die Halteseiten-Regel oben zentriert den ganzen `body`
   (`display: grid; place-items: center; padding: 2rem`). Für vier Zeilen Text
   war das richtig. Für eine Website schrumpft es Kopf- und Fussbalken auf die
   Breite ihres Inhalts — die navyfarbenen Flächen hörten mitten auf der Seite
   auf. Gesehen im Bild, nicht im Test: ein Balken, der zu schmal ist, bricht
   keine Prüfung. */
body.reise {
  margin: 0;
  padding: 0;
  display: block;
  min-block-size: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  line-height: 1.65;
}

.reise-schale {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

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

/* DER BALKEN TRAEGT DIE FARBE, NICHT DER KOPF — 18. August 2026.
   Dieselbe Zweiteilung wie auf .ch (`.header` > `.header__balken`): die
   Flaeche ist ein eigenes Element, damit spaeter eine zweite Zeile darunter
   stehen kann, ohne die Flaeche mitzunehmen. Heute gibt es die zweite Zeile
   hier nicht — auf .ch traegt sie die Themen, und die hat diese Domain
   nicht. Die Bauform ist trotzdem dieselbe, sonst waere der naechste Schritt
   ein Umbau statt einer Ergaenzung. */
.reise-kopf__balken {
  background: var(--deep);
  color: var(--ink-on-deep);
  padding-block: 0.9rem;
}

/* DIESELBE GRAMMATIK WIE carejourney.ch — 16. August 2026, Iris:
   „Es soll visuell zu .ch gehoeren (Menu Header)."

   Uebernommen ist nicht ein Aussehen, sondern eine ORDNUNG. Auf .ch steht
   sie seit dem 13. August in einem Satz von Iris: „home als Haus, dann
   Sprachen, … das Logo in der Mitte, dann Angehoerige, …" — links alles,
   womit man die Seite EINSTELLT, in der Mitte die MARKE, rechts alles, wohin
   man GEHT.

   Technisch dasselbe Raster wie dort: `1fr auto 1fr`. Es haelt die Marke in
   der Fenstermitte, auch wenn links zwei Zeichen stehen und rechts drei
   Zeilen Text — beide Aussenspalten bekommen dasselbe, und die Mitte bleibt
   die Mitte. Ein Flexrahmen mit `space-between` kann das nicht: dort wandert
   die Marke mit dem Gewicht der Seiten.

   Die Mindesthoehe ist die von .ch (4,25 rem), damit der Sprung von der
   einen Domain zur anderen keine Stufe hat. */
.reise-kopf__innen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
  min-block-size: 4.25rem;
}

.reise-kopf__innen > .reise-regler { grid-column: 1; justify-self: start; }
.reise-kopf__innen > .wordmark  { grid-column: 2; justify-self: center; }
.reise-kopf__innen > .reise-heim   { grid-column: 3; justify-self: end; }

@media (max-width: 46rem) {
  /* Am Telefon traegt die Zeile drei Dinge nicht. Dann steht die Marke oben
     und mittig, darunter Einstellungen links und der Weg nach .ch rechts —
     die Ordnung bleibt, nur gestapelt. */
  .reise-kopf__innen {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.7rem;
  }
  .reise-kopf__innen > .wordmark {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
  .reise-kopf__innen > .reise-regler { grid-column: 1; grid-row: 2; }
  .reise-kopf__innen > .reise-heim   { grid-column: 2; grid-row: 2; }
}

/* DIE MARKE IST DIE GETEILTE WORTMARKE — 20. August 2026.

   `partials/wortmarke.html`, dieselbe Datei wie auf `.ch`, und ihre Regeln
   stehen in `site.css`, das dieses Blatt zuerst lädt. Hier stehen nur die
   zwei Dinge, die auf dieser Domain anders sind:

   1. DIE ENDUNG. `.city` hängt in Gold am Namen — dasselbe Haus, eine
      Schwelle, die man bemerkt (Iris, 16. August, OQ-78). Auf `.ch` gibt
      es das Element nicht; die Regel läuft dort ins Leere.

   2. TAG UND NACHT ENTSCHEIDET DER KALENDER, NICHT DAS GERÄT. `site.css`
      schaltet die zwei Fassungen des Signets über `prefers-color-scheme`
      und `data-theme` um. Auf dieser Domain ist die Nacht der Winter
      (Iris, 14. August: „summer is day and winter is night") — dieselbe
      Achse, an der hier alle Farben hängen. Die Selektoren unten sind
      spezifischer als die aus `site.css` (Element + Attribut + Klasse
      gegen Klasse) und stehen später; beides zusammen überstimmt auch den
      media-Query-Zweig. `data-theme` setzt diese Domain nie. */
.wordmark__endung { color: var(--gold); }

html[data-jahreszeit="sommer"] .wordmark__bild--tag   { display: flex; }
html[data-jahreszeit="sommer"] .wordmark__bild--nacht { display: none; }
html[data-jahreszeit="winter"] .wordmark__bild--tag   { display: none; }
html[data-jahreszeit="winter"] .wordmark__bild--nacht { display: flex; }

/* Der Rückweg steht prominent — Iris, 16. August. */
.reise-heim {
  display: grid;
  text-align: right;
  border-left: 1px solid rgb(255 255 255 / 25%);
  padding-left: 1rem;
}

.reise-heim__endung { color: var(--gold); }

.reise-heim__satz {
  font-size: 0.78rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
}

/* --- Terminal ----------------------------------------------------------- */

.terminal { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem); }

.terminal__ort {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}

.terminal__titel {
  margin: 0.4rem 0 0.8rem;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
}

.terminal__satz { margin: 0; max-width: 42rem; font-size: 1.1rem; }

/* --- Die Abflugtafel ---------------------------------------------------- */

/* Eine Tabelle, weil es eine ist. Sie ist der Inhalt dieser Seite und nicht
   das Ergebnis einer Eingabe — deshalb steht sie hier vollständig, bevor
   irgendwo eine Bewegung dazukommt. */

.brett { padding-block: clamp(1.5rem, 4vw, 3rem); }

.brett__titel {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.8rem;
}

/* DIE TEILUNG — 16. August 2026, auf Iris' Entscheid nach dem Schriftbild.

   Sie schickte ein Helvetica-Plakat, und die Frage dahinter war richtig: soll
   diese Seite Schweizer Grotesk sprechen? Die Antwort ist **an zwei Stellen
   verschieden**, und genau das ist die Teilung.

   Die Seite traegt zwei Gattungen, nicht eine:

   * **Die Abflugtafel ist eine AUSKUNFT.** Fahrplan, Beschilderung, Formular
     — das ist die Heimat der Grotesk, und Helvetica ist ihre Schweizer
     Fassung. Sie soll eng, hart und gleichmaessig sein.
   * **Die Ueberschriften und die Prosa sind eine ERZAEHLUNG.** Newsreader
     traegt sie, und ohne sie wird eine Pflegemarke zu einem Flughafenschild.

   HELVETICA OHNE HELVETICA. Die Schrift selbst ist lizenzpflichtig
   (Monotype), und diese Website laedt ohnehin nichts von draussen. Archivo
   liegt bereits im Repository und hat eine **Breitenachse** (88–118 %) — auf
   92 % gesetzt kommt sie der Helvetica-Enge sehr nahe, ohne eine einzige
   neue Datei. Gemessen im Browser: die Zeile wird 6 % kuerzer, die Anmutung
   deutlich haerter.

   EIN FAHRPLAN OHNE ZEITEN — und das ist Absicht, nicht Luecke. §24 verbietet
   dieser Seite Abfahrtszeiten, Preise und Verfuegbarkeiten, weil sie sie nicht
   misst. Die Tafel zeigt deshalb Ziel, Land, Wofuer und Stand, und sonst
   nichts. (`font-variant-numeric` steht trotzdem da, damit eine spaetere
   Zahl nicht als erste auffaellt.) */
.brett__tafel {
  width: 100%;
  border-collapse: collapse;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 92%;
  font-size: 0.95rem;
  letter-spacing: -0.006em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.brett__tafel th,
.brett__tafel td {
  text-align: left;
  /* Gleichmaessiger Zeilentakt: eine Tafel, deren Zeilen unterschiedlich hoch
     sind, liest sich als Liste. Der Takt macht sie zur Tafel. */
  padding: 0.62rem 0.6rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}

/* Das Ziel traegt die Zeile, der Rest tritt zurueck — so wird eine Tafel
   gelesen: erst die Spalte ganz links, dann quer. */
.brett__tafel tbody th a { font-stretch: 90%; letter-spacing: -0.012em; }

/* Der Stand steht rechts aussen, wie auf jeder Tafel. Er bleibt leise:
   „bereit" heisst, dass eine Seite existiert — nicht, dass etwas frei ist.
   Ein lauter Stand waere eine Zusage, die diese Website nicht gibt.

   UND DIE UEBERSCHRIFT GEHT MIT. Beim ersten Ansehen stand sie noch links
   ueber rechtsbuendigen Werten — eine Spalte, die sich selbst widerspricht.
   Eine Tafel wird an ihren Kanten gelesen; liegt die Kante zweimal woanders,
   ist es keine Spalte mehr. */
.brett__tafel td.brett__stand,
.brett__tafel thead th:last-child { text-align: right; }

.brett__tafel thead th {
  font-size: 0.72rem;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 600;
}

.brett__tafel tbody th { font-weight: 600; }
.brett__tafel a { color: inherit; text-underline-offset: 3px; }

.brett__stand {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Die Zeilen ohne Seite sind ruhiger — sie behaupten nichts, sie stehen da. */
.brett__zeile--jenseits th { font-weight: 400; color: var(--leise); }

.brett__fussnote {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--leise);
  max-width: 40rem;
}

/* --- Der Concierge ------------------------------------------------------ */

.konzierge {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}

.konzierge__titel {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0;
}

.konzierge__frage {
  margin: 0.4rem 0 0.3rem;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.konzierge__unter { margin: 0 0 2rem; color: var(--leise); }

.konzierge__block {
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}

.konzierge__block legend {
  padding: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.konzierge__hinweis {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--leise);
}

.konzierge__wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Das Eingabefeld bleibt im Markup und für die Tastatur da — es wird nur
   nicht gezeigt. `appearance: none` allein hätte den Fokusring mitgenommen;
   der kommt unten über :focus-within zurück. */
.konzierge__knopf input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.konzierge__knopf {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--linie);
  border-radius: 2rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
}

.konzierge__knopf:hover { border-color: var(--ink); }

.konzierge__knopf:focus-within {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.konzierge__knopf:has(input:checked) {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--ink-on-deep);
}

.konzierge__senden {
  margin-top: 0.5rem;
  padding: 0.75rem 1.6rem;
  border: 0;
  border-radius: 2rem;
  background: var(--deep);
  color: var(--ink-on-deep);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

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

/* --- Die Antwort -------------------------------------------------------- */

.antwort {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
}

.antwort__einleitung { font-size: 1.15rem; margin: 0 0 1.4rem; }

.antwort__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.antwort__karte {
  border: 1px solid var(--linie);
  border-radius: 0.4rem;
  padding: 1.1rem 1.2rem;
}

.antwort__karte h3 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 400; }
.antwort__karte a { color: inherit; text-underline-offset: 3px; }
.antwort__satz { margin: 0 0 0.6rem; }
.antwort__meta { margin: 0; font-size: 0.85rem; color: var(--leise); }
.antwort__weiter { margin-top: 1.4rem; font-size: 0.9rem; color: var(--leise); }
.antwort__weiter a { color: inherit; }

/* Die ehrliche Antwort, wenn nichts passt. Sie ist keine Fehlermeldung und
   sieht deshalb auch nicht so aus. */
.antwort__leer { max-width: 40rem; color: var(--leise); }

/* --- Der Ehrlichkeitsblock ---------------------------------------------
   Am Fuss des Terminals, nicht am Kopf: eine Website, die mit ihrer
   Ehrlichkeit beginnt, wirbt damit. Eine, die sie zum Schluss sagt, hat sie.
   Derselbe Rahmen wie die Vorschlagskarten und KEINE eigene Fuellung: er soll
   dazugehoeren und nicht wie ein Rechtshinweis wirken, den jemand
   anschrauben musste. Das einzige Unterscheidungsmerkmal ist der goldene
   Strich links — dasselbe Gold, das den Ausgangsort auf der Linie traegt. */
.ehrlichkeit {
  padding-block: clamp(1.5rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}

.ehrlichkeit__block {
  max-width: 44rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  border-radius: 0.4rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.ehrlichkeit__titel {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.8rem;
}

.ehrlichkeit__satz { margin: 0 0 0.7rem; }
.ehrlichkeit__satz:last-of-type { margin-bottom: 1rem; }
.ehrlichkeit__weg { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-size: 0.9rem; }

/* --- Zielseite ---------------------------------------------------------- */

.ziel-kopf { padding-block: clamp(2.5rem, 6vw, 4rem) 1rem; }

.ziel-kopf__weg {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}

.ziel-kopf h1 {
  margin: 0.4rem 0 0.7rem;
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  font-weight: 400;
}

.ziel-kopf__satz { margin: 0; max-width: 40rem; font-size: 1.15rem; }

.ziel-text { padding-block: 1.5rem; }
.ziel-text h1 { font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); }
.ziel-text h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 2rem 0 0.5rem;
}
.ziel-text p, .ziel-text li { max-width: 42rem; }
.ziel-text a { color: inherit; text-underline-offset: 3px; }

.ziel-fakten {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  max-width: 42rem;
}

.ziel-fakten dt {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  padding-top: 0.25rem;
}

.ziel-fakten dd { margin: 0; }

/* --- Die zweite Kopfzeile ------------------------------------------------
   Dieselbe Bauform wie auf `.ch`: die Navigation zieht in eine eigene Zeile
   UNTER den Balken, die keinen eigenen Grund mitbringt. Sie steht auf dem
   Papier der Seite und traegt nur eine Linie nach unten. */
.reise-nav {
  border-bottom: 1px solid var(--linie);
}

.reise-nav .reise-schale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.75rem;
  justify-content: center;
  padding-block: 0.15rem;
}

.reise-nav a {
  display: inline-block;
  padding-block: 0.45rem;
  color: inherit;
  text-decoration: none;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reise-nav a:hover,
.reise-nav a:focus-visible { text-decoration: underline; }

/* Wo man steht: eine goldene Linie darunter, wie die Themen auf `.ch`. */
.reise-nav a[aria-current="page"] {
  border-bottom: 2px solid var(--gold);
}

/* --- Wohin sonst ---------------------------------------------------------
   Die Nachbarziele. Schmaler gesetzt als die Galerie: das hier ist eine
   Liste von Wegen, kein Bildteil. Drei Spalten am Schirm, eine am Telefon.

   Die geteilten Woerter tragen dieselbe Augenbraue wie die Fakten und die
   Galerie — Archivo, gesperrt, versal. Diese Domain hat drei Stimmen und
   nicht vier. */
.wohin {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--linie);
}

.wohin__liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* DIE GOLDLINIEN STEHEN AUF EINER HOEHE — 18. August, aus Iris' Bildschirm-
   foto. Die Saetze sind verschieden lang, also sass die Linie bei jedem
   Nachbarn woanders und die Reihe las sich unruhig. Die Karte ist deshalb
   eine Spalte, und die geteilten Woerter werden mit `margin-top: auto` nach
   unten geschoben: der gemeinsame Boden entsteht aus dem Satzbau, nicht aus
   einer festen Hoehe, die beim naechsten laengeren Satz wieder falsch waere. */
.wohin__ziel {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.wohin__ziel h3 {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
}

.wohin__ziel h3 a { color: inherit; }

.wohin__land,
.wohin__satz,
.wohin__geteilt { margin: 0; }

.wohin__land {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.5rem;
}

.wohin__satz {
  font-size: 0.95rem;
  line-height: 1.55;
}

.wohin__geteilt {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 2px solid var(--gold);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}

.wohin__tafel { margin: 1.75rem 0 0; }

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

/* Zwei Spalten und nicht drei: bei drei wird jedes Bild so klein, dass es
   Schmuck ist. Bei zwei bleibt es ein Bild, das man ansieht. Unter 46rem
   fallen sie untereinander — auf dem Telefon ist ein Bild pro Zeile die
   einzige Breite, in der ein Croissant noch ein Croissant ist. */
.galerie {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.galerie__liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
}

.galerie__stueck figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.galerie__stueck img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 0.4rem;
}

.galerie__stueck figcaption {
  padding-top: 0.7rem;
  border-top: 2px solid var(--gold);
  margin-top: 0.6rem;
}

/* Dasselbe Augenbrauenwort wie bei den Fakten und auf der Tafel: Archivo,
   gesperrt, versal. Die Galerie erfindet keine dritte Schriftstimme. */
.galerie__wort {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.25rem;
}

.galerie__satz {
  display: block;
}

/* --- Die Stationen ------------------------------------------------------ */

/* Der Verweis sitzt, wo die Buchungsabsicht entsteht — die Reihenfolge kommt
   aus web/affiliate.py:STATIONEN und nicht aus dieser Datei. */

.stationen {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}

.stationen h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 1.5rem;
}

.stationen__liste {
  list-style: none;
  counter-reset: station;
  margin: 0;
  padding: 0;
}

.station {
  counter-increment: station;
  border-left: 2px solid var(--linie);
  padding: 0 0 1.8rem 1.5rem;
  position: relative;
}

.station::before {
  content: counter(station, decimal-leading-zero);
  position: absolute;
  left: -0.75rem;
  top: 0;
  width: 1.5rem;
  text-align: center;
  background: var(--paper);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.7rem;
  color: var(--leise);
}

.station__titel { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 400; }

/* DER RAHMEN UND DIE MITTE — 16. August 2026.
   Befund beim ersten Ansehen der gebauten Seite: siebenmal derselbe Block,
   gleich gross, gleich laut, „Travelpayouts" dreimal darin. Das liest sich
   wie eine Liste, nicht wie eine Reise.
   Ankommen und Zurueckkommen sind die beiden Momente, die bleiben — sie
   bekommen Luft und eine groessere Ueberschrift; die Mitte rueckt zusammen.
   Welche Station welches Gewicht traegt, steht in `affiliate.STATIONEN`,
   nicht hier: eine Stilregel kann eine Reihenfolge nicht umdrehen.
   Kein neuer Farbwert, keine neue Schrift — nur Groesse und Abstand. */
.station--gross { padding-bottom: 2.6rem; }
.station--gross .station__titel {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 0.9rem;
}
.station--klein { padding-bottom: 1.3rem; }
.station--klein .station__titel { font-size: 1.05rem; }

/* Die letzte Station schliesst die Reise. Sie braucht danach keinen Strich,
   weil nach dem Zurueckkommen nichts mehr kommt. */
.station:last-child { padding-bottom: 0; border-left-color: transparent; }

.station__wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }

.station__weg { display: grid; gap: 0.15rem; }
.station__weg a { color: inherit; font-family: "Archivo", system-ui, sans-serif; }
.station__extern { font-size: 0.8em; }
.station__was { font-size: 0.9rem; }

/* Die Offenlegung steht AM Verweis. Leise, aber nie versteckt: kleiner als
   der Verweis, gross genug zum Lesen, und im gemessenen Textton — nicht in
   einem Grau, das man übersieht. */
.station__offen { font-size: 0.8rem; color: var(--leise); }

.station__leer { margin: 0; font-size: 0.9rem; color: var(--leise); }

/* --- Schluss und Fuss --------------------------------------------------- */

.schluss {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}

.schluss__titel { margin: 0 0 0.3rem; font-size: 1.3rem; }
.schluss__satz { margin: 0 0 1.5rem; color: var(--leise); }
.schluss a { color: inherit; }

/* --- Der Fuss ------------------------------------------------------------
   DERSELBE FUSS WIE carejourney.ch — 18. August 2026, Iris: „The site will
   have the same footer and the same header as carejourney.ch."

   ER WAR BIS HEUTE NAVY, und das war die groesste sichtbare Abweichung
   zwischen den zwei Domains: drueben eine cremefarbene, vertiefte Flaeche
   mit vier Spalten, hier ein dunkler Balken mit vier Links. Jetzt traegt er
   dieselbe Flaeche (`--paper-sunk`), dieselbe Spaltenordnung, dieselben
   Ueberschriften in Archivo-Versalien und denselben Boden darunter.

   Die Navyflaeche ist damit nicht weg, sie ist dorthin gewandert, wo sie auf
   .ch auch sitzt: in den Kopfbalken und in die Visitenkarte. */
.reise-fuss {
  margin-top: 3rem;
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--linie-hell);
  background: var(--paper-sunk);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.reise-fuss h2 {
  margin: 0 0 0.6rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reise-fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.reise-fuss a { color: inherit; text-underline-offset: 3px; }

/* `u-eng`: ein Absatz ohne eigenen Aussenabstand. Auf .ch heisst dieselbe
   Klasse `u-flush`; hier traegt sie den hiesigen Namen, weil diese Domain
   ihre Hilfsklassen deutsch benennt. */
.reise-fuss .u-eng { margin: 0; }

.reise-fuss__raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

/* Mittig — Iris, 16. August, fuer .ch: „let's center emergeny phones".
   Alles andere im Fuss ist Prosa und bleibt linksbuendig; drei Zeilen aus
   drei Ziffern sind eine Tafel, und eine Tafel haengt man mittig. */
.reise-fuss__notfall { text-align: center; }
.reise-fuss__notfall ul { margin-inline: auto; }
.reise-fuss__notfall li { font-variant-numeric: tabular-nums; }
.reise-fuss__notfall li strong { font-weight: 700; letter-spacing: 0.01em; }

/* Die Visitenkarte, Werte wortgleich von .ch. */
.visitenkarte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 2vw, 1.4rem);
  text-align: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgb(178 142 58 / 55%);
  border-radius: 6px;
}

.visitenkarte__zeichen img {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  object-fit: contain;
}

.visitenkarte__marke {
  margin: 0.35rem 0 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.visitenkarte__claim {
  margin: 0;
  max-inline-size: 30ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.visitenkarte__wege {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.7;
}

.visitenkarte__wege a { color: inherit; text-decoration: none; }
.visitenkarte__wege a:hover,
.visitenkarte__wege a:focus-visible { text-decoration: underline; }

/* Der Boden traegt das Ende der Seite — wie auf .ch seit dem 7. August. */
.reise-fuss__boden {
  background: var(--paper-sunk);
  color: var(--ink);
}

.reise-fuss__legal {
  padding-block: 1.1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.reise-fuss__legal a { color: inherit; }

.reise-fuss__schalter {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
}

.reise-fuss__satz {
  margin: 0.8rem 0 clamp(1rem, 2vw, 1.6rem);
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* --- Für Vorleseprogramme ----------------------------------------------- */

.u-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Die Reiselinie ------------------------------------------------------ */

/* Gezeichnet, kein fremder Server. Die Begründung steht in web/reiselinie.py;
   hier steht nur, wie sie aussieht und wann sie sich bewegt. */

.reiselinie {
  margin: 0;
  padding-block: clamp(1rem, 3vw, 2rem);
}

.reiselinie__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 22rem;
}

.reiselinie__horizont {
  stroke: var(--linie);
  stroke-width: 1.5;
  opacity: 0.5;
}

.reiselinie__weg {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.reiselinie__punkt { fill: var(--ink); }
.reiselinie__ring  { stroke: var(--gold); stroke-width: 2; }

/* Das Ziel ist der einzige goldene Punkt — wie Bern auf der Aare-Linie. */
.reiselinie__ort--ziel .reiselinie__punkt { fill: var(--gold); }

.reiselinie__name {
  fill: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.reiselinie__ort--ziel .reiselinie__name,
.reiselinie__ort--start .reiselinie__name { font-weight: 600; }

/* Die Verkehrsmittel: gezeichnet, nicht als Emoji. Ein Emoji ist Text, wird
   vorgelesen, sieht auf jedem Gerät anders aus und kennt die Hausfarben
   nicht. */
.reiselinie__mittel {
  fill: none;
  stroke: var(--leise);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.reiselinie__mittel--flug,
.reiselinie__mittel--schiff { fill: var(--leise); stroke: none; }

.reiselinie__unter {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--leise);
  text-align: center;
}

/* --- Und erst hier bewegt sich etwas ------------------------------------- */

/* DIE REGEL VOM 16. AUGUST, im Code statt in einem Dokument: alles Ambiente
   liegt unter `[data-motion="full"]`, und das ist auf dieser Domain
   ausdrücklich OPT-IN — die Voreinstellung ist `calm` (web/views_reise.py).
   Wer die Seite normal öffnet, sieht die fertige Linie und keine Animation.

   `pathLength="1000"` im Markup macht die Rechnung geräteunabhängig: ohne sie
   müsste die echte Pfadlänge als Inline-Stil ins Markup, und den verbietet die
   CSP (`style-src 'self'`). So genügen zwei feste Zahlen für jede Linie,
   gleich wie viele Abschnitte sie hat.

   Und `prefers-reduced-motion` steht DARUNTER und überstimmt auch die bewusste
   Wahl. Das ist Absicht: wer im Betriebssystem sagt, dass Bewegung ihm schadet,
   soll das nicht auf jeder Website erneut sagen müssen. */
:root[data-motion="full"] .reiselinie__weg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: reiselinie-zeichnen 2.4s ease-out forwards;
}

:root[data-motion="full"] .reiselinie__mittel,
:root[data-motion="full"] .reiselinie__ort {
  opacity: 0;
  animation: reiselinie-ankommen 0.8s ease-out forwards;
}

/* Der Ausgangsort ist von Anfang an da — man reist von dort ab, man kommt
   nicht dort an. Das Ziel erscheint zuletzt. */
:root[data-motion="full"] .reiselinie__ort--start { animation-delay: 0s; }
:root[data-motion="full"] .reiselinie__mittel { animation-delay: 1.1s; }
:root[data-motion="full"] .reiselinie__ort--ziel { animation-delay: 2.1s; }

@keyframes reiselinie-zeichnen {
  to { stroke-dashoffset: 0; }
}

@keyframes reiselinie-ankommen {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-motion="full"] .reiselinie__weg,
  :root[data-motion="full"] .reiselinie__mittel,
  :root[data-motion="full"] .reiselinie__ort {
    animation: none;
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}


/* Die Ebenen der Leiter in der Tafel. Zwischenzeilen, keine eigenen
   Tabellen: es bleibt EINE Tafel, und ein Vorleseprogramm liest sie als
   eine — `scope="colgroup"` sagt, dass die Zeile eine Gruppe ansagt. */
.brett__ebene th {
  padding-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.brett__ebene-satz {
  display: inline-block;
  margin-left: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--leise);
}

/* --- Die zwei Bilder ------------------------------------------------------
   Am 16. August bekam diese Domain ihre ersten Bilder. Zwei, nicht zwanzig:
   eines am Eingang, eines an der Station „Zurueckkommen". Jede
   Reiseplattform bebildert das Hinfahren; die Rueckkehr bebildert keine.

   BEIDE STEHEN UNTER TEXT, NIE DAHINTER. Ein Bild als Grund einer Ueberschrift
   ist der uebliche Weg und hier der falsche: der Kontrast haengt dann an der
   Stelle, an der der Text zufaellig liegt. Diese Website misst ihre Kontraste
   — also Text auf Papier, Bild darunter, beides unabhaengig richtig. */
.terminal__bild,
.station__bild {
  margin: 0;
}

.terminal__bild {
  margin-block-start: clamp(2rem, 5vw, 3.2rem);
}

.terminal__bild img,
.station__bild img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 0.4rem;
}

/* Der goldene Strich unter dem Eingangsbild — dasselbe Gold wie der Ring auf
   dem Ausgangsort der Linie. Ein Zeichen, kein Rahmen. */
.terminal__bild img {
  border-block-end: 3px solid var(--gold);
}

.station__bild {
  margin-block: 0.2rem 1.1rem;
  max-inline-size: 34rem;
}

/* Das Ortsbild, wenn es eines gibt. Es steht ZWISCHEN Kopf und Linie: erst
   der Ort als Bild, dann der Weg dorthin als Zeichnung. Umgekehrt waere die
   Zeichnung eine Wiederholung des Bildes statt seine Fortsetzung. */
.ziel-bild {
  margin: 0;
  padding-block: clamp(1.2rem, 3vw, 2rem);
}

.ziel-bild img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 0.4rem;
  border-block-end: 3px solid var(--gold);
}

/* --- Die KI-Offenlegung ---------------------------------------------------
   DR-W-002. Auf carejourney.ch steht der Satz seit dem 29. Juli im Fuss jeder
   Seite; hier gab es ihn nicht, weil es keine Bilder gab. Mit dem ersten Bild
   wird er faellig — und zwar am selben Tag, nicht spaeter.

   Er steht im Fuss und nicht neben jedem Bild: ehrlich, ohne dass jeder
   Abschnitt mit sich selbst diskutiert. */
/* Sie bricht auf eine eigene Zeile um und laeuft ueber die volle Breite —
   dieselbe Regel wie auf .ch (`.footer__boden .footer__legal > span:last-child`).
   Eine Offenlegung, die als viertes Glied zwischen Impressum und Datenschutz
   klemmt, liest niemand. */
.reise-fuss__ki {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-inline-size: 52rem;
}

/* --- Die Bedienleiste im Kopf --------------------------------------------
   Iris, 16. August: „dieses Menu von .ch links kann uebernommen werden."
   Uebernommen ist das Aussehen — runde Knoepfe mit dauerhaftem Ring —,
   nicht die Bauart: auf .ch sind es JavaScript-Knoepfe mit Browserspeicher,
   hier sind es Links. Der Ring ist immer da und nicht erst beim Zeigen: auf
   dem Telefon gibt es kein Zeigen, und ein Zustand, den nur die Maus
   erreicht, existiert fuer die Haelfte dieses Publikums nicht. */
.reise-regler {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reise-regler__knopf {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 999px;
  color: var(--ink-on-deep);
  text-decoration: none;
  transition: border-color 220ms ease, color 220ms ease;
}

.reise-regler__knopf svg { inline-size: 1.15rem; block-size: 1.15rem; }

.reise-regler__knopf:hover,
.reise-regler__knopf:focus-visible { border-color: var(--gold); }

.reise-regler__knopf:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Ausgeschaltet: der Ring wird still, damit der Zustand nicht nur am
   durchgestrichenen Zeichen haengt. Farbe allein traegt keine Aussage. */
.reise-regler__knopf--aus {
  border-color: color-mix(in srgb, var(--ink-on-deep) 30%, transparent);
}

/* --- Das Fussband --------------------------------------------------------
   Iris, 16. August: „Btw we got the red footer pic u can use and color in."

   Die Vorlage war einfarbig rot (55,5 % #ff0000); umgefaerbt auf die
   Hausfarben durch `scripts/make_reisefuss.py`. Das Kreuz ist aus der Fahne
   heraus — Swissness braucht einen Traeger, und die Rechtsform ist offen
   (OQ-79, docs/SWISSNESS_2026-08-16.md §6).

   ALS HINTERGRUND UND NICHT ALS <img>: das Band traegt keine Information,
   die irgendwo sonst fehlen wuerde. Ein Bild im Markup muesste ein `alt`
   tragen und ein Vorleseprogramm muesste es ueberspringen; ein Hintergrund
   ist von vornherein nicht da. Dieselbe Entscheidung wie beim Fussband
   auf carejourney.ch.

   `background-size: cover` und eine feste Hoehe in `vw`: das Band ist
   2880 x 1095, also gut 2,6:1. Bei jeder Fensterbreite bleibt die Silhouette
   ganz sichtbar, weil die Hoehe mitwaechst statt zu beschneiden. */
.reise-band {
  block-size: min(38vw, 22rem);
  background-image: image-set(
    url("../img/reisefuss_tag.2670fbb63cdc.webp") type("image/webp"),
    url("../img/reisefuss_tag.c555dca22dd6.jpg") type("image/jpeg"));
  background-image: url("../img/reisefuss_tag.c555dca22dd6.jpg");
  background-image: -webkit-image-set(
    url("../img/reisefuss_tag.2670fbb63cdc.webp") type("image/webp"),
    url("../img/reisefuss_tag.c555dca22dd6.jpg") type("image/jpeg"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
}

/* Der Kalender entscheidet, nicht das Geraet — dieselbe Regel wie bei
   --paper und den vier Token oben. */
:root[data-jahreszeit="winter"] .reise-band {
  background-image: url("../img/reisefuss_nacht.68521602f505.jpg");
  background-image: -webkit-image-set(
    url("../img/reisefuss_nacht.87048ad65838.webp") type("image/webp"),
    url("../img/reisefuss_nacht.68521602f505.jpg") type("image/jpeg"));
}

@media (max-width: 46rem) {
  /* Am Telefon wuerde die volle Breite die Silhouette auf Fingerhutgroesse
     bringen. Dann lieber ein Ausschnitt der Mitte, dafuer lesbar. */
  .reise-band {
    block-size: 9rem;
    background-size: auto 100%;
  }
}

/* --- Der Rollkasten der Tafeln -------------------------------------------
   18. August 2026, gemessen: bei 320 px lief die Abflugtafel 371 px breit und
   die Offenlegungstafel 374 px — **die Seite schob sich seitlich hinaus.**

   Es ist die Fehlerklasse aus KD-W-06b, und sie ist hier nicht die Schuld der
   Tabelle: eine Abflugtafel HAT vier Spalten, und vier Spalten passen in
   320 px nicht. Also rollt sie in ihrem eigenen Kasten, statt die Seite
   mitzunehmen. Am Schreibtisch aendert sich nichts — dort passt sie ohnehin. */
.tafel-rolle {
  overflow-x: auto;
  /* Damit die Rollbewegung am Finger nicht weiterlaeuft und die Seite
     mitzieht — sie hoert am Rand des Kastens auf. */
  overscroll-behavior-x: contain;
  /* Ein rollbarer Bereich braucht einen sichtbaren Fokus: er ist mit der
     Tastatur erreichbar (tabindex="0", WCAG 2.1.1), also muss man sehen, dass
     er dran ist. */
  border-radius: 0.2rem;
}

.tafel-rolle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Ohne Mindestbreite quetscht der Kasten die Spalten, statt sie rollen zu
   lassen — dann ist zwar nichts mehr zu sehen, aber „Wofuer" bricht in fuenf
   Zeilen. Rollen ist ehrlicher als Quetschen. */
.tafel-rolle .brett__tafel { min-inline-size: 24rem; }

/* --- Zielgroesse: 24 px, auch wenn der Text 16 px hoch ist ----------------
   WCAG 2.2 §2.5.8 (Target Size, Minimum) verlangt 24 x 24 CSS-Pixel. Gemessen
   am 18. August bei 390 px: **vierzehn Ziele waren 14 bis 16 px hoch** — die
   Ortsnamen in der Tafel und die Wege im Fuss. Die Breite stimmte ueberall;
   es fehlte nur die Hoehe, weil ein Textlink so hoch ist wie seine Zeile.

   Diese Website VEROEFFENTLICHT ihren WCAG-2.2-AA-Anspruch. Also wird er
   eingehalten und nicht ausgelegt: die Ausnahme fuer Links im Fliesstext
   koennte hier greifen, aber diese Links stehen nicht im Fliesstext — sie
   stehen allein in einer Tabellenzelle und in einer Fussnavigation.

   Gemacht ueber `padding-block` statt `min-height`: eine Mindesthoehe an
   einem Inline-Element wirkt nicht, ein Innenabstand schon. */
/* DIE KONTAKTZEILEN IM FUSS KAMEN AM 18. AUGUST DAZU — und mit ihnen der
   Fehler, gemessen von `scripts/check_mobile_city.py` bei 320, 360 und
   390 px: Telefonnummer und E-Mail-Adresse standen 15 px hoch. Die
   24-px-Schwelle (WCAG 2.2 §2.5.8) ist genau fuer diese Sorte Link da —
   eine Telefonnummer im Fuss ist der eine Link, den jemand mit zittriger
   Hand trifft oder eben nicht.

   Sie stehen deshalb in DERSELBEN Regel wie die uebrigen: eine zweite
   Liste waere eine zweite Stelle, an die man beim naechsten Mal denken
   muesste. */
.brett__tafel a,
.reise-fuss ul a,
.visitenkarte__wege a,
.reise-fuss__legal a,
.reise-fuss__schalter a,
.ehrlichkeit__weg a,
.antwort__karte h3 a,
.antwort__weiter a,
.schluss a,
.wohin__ziel h3 a,
.wohin__tafel a,
.reise-zurueck a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* Die Ueberschrift einer Vorschlagskarte ist gross genug gesetzt, aber ihr
   Link ist nur so hoch wie die Schrift — bei 1,3 rem sind das 21 px. Zwei
   Pixel fehlten, und zwei Pixel sind bei einer Schwelle keine Kleinigkeit:
   entweder haelt man sie ein oder man haelt sie nicht ein. */
.antwort__karte h3 a { padding-block: 0.3rem; }

/* --- Die Personenseite ---------------------------------------------------
   18. August 2026. Sie traegt bewusst KEINE eigene Farbwelt: auf .ch ist die
   Personenseite absichtlich anders (schwarz, Neonviolett, Limette — Iris'
   eigener Entscheid vom 16. August, „die einzige Seite, auf der ein MENSCH
   steht statt ein Angebot, darf anders sein"). Hier waere dasselbe Mittel
   der falsche Griff: auf .city IST der Mensch die Ausnahme, und eine Ausnahme
   von der Ausnahme hebt sich auf. Also Hausfarben, mehr Luft. */
.person-kopf { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.person-kopf__rolle {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.5rem;
}

.person-kopf h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}

.person-kopf__lead { max-width: 38rem; font-size: 1.1rem; margin: 0; }

/* Das Portraet steht UNTER dem Text, wie jedes Bild auf dieser Domain — und
   quadratisch begrenzt, damit es auf dem Telefon nicht die ganze Seite wird. */
.person-bild {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  max-inline-size: 22rem;
}

.person-bild img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 0.4rem;
  border-block-end: 3px solid var(--gold);
}

.person-text { padding-block: clamp(2rem, 5vw, 3rem); }
.person-text h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 1.8rem 0 0.5rem;
}
.person-text h2:first-child { margin-top: 0; }
.person-text p { max-width: 40rem; margin: 0; }

.person-beitrag {
  padding-block: clamp(1.6rem, 4vw, 2.6rem);
  border-block-start: 1px solid var(--linie);
}
.person-beitrag h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 1.2rem;
}
.person-beitrag__liste { margin: 0; display: grid; gap: 1rem; max-width: 44rem; }
.person-beitrag__liste dt {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.person-beitrag__liste dd { margin: 0.15rem 0 0; }

/* Die Grenze steht in einem Kasten wie die Ehrlichkeit auf dem Terminal —
   dasselbe Zeichen fuer dieselbe Sorte Aussage. */
.person-grenze { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.5rem); }
.person-grenze__satz {
  max-width: 44rem;
  border: 1px solid var(--linie);
  border-inline-start: 3px solid var(--gold);
  border-radius: 0.4rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  margin: 0 0 1.2rem;
}