@import url("/fonts/dm-mono-minimal.css");

/* Tabiyume linked pages — Operative Japan Journey Folio */
:root {
  --bg: #f7f7f4;
  --bg-soft: #dededb;
  --panel: #f7f7f4;
  --panel-2: #ffffff;
  --line: #181818;
  --accent: #d03030;
  --accent-soft: #b72525;
  --good: #2f6b4f;
  --bad: #b72525;
  --warn: #8a5a19;
  --text: #181818;
  --text-2: #242424;
  --muted: #5b5b58;
  --muted-2: #5b5b58;
  --ink: #181818;
  --paper: #f7f7f4;
  --paper-2: #dededb;
  --structure: #242424;
  --rule: #181818;
  /* Semantik auf Sumi-Flaechen: --good/--bad sind fuer Papier gemischt und
     erreichen auf #181818 nur ~2,8:1. Auf Ink-Panels diese Varianten nutzen. */
  --ink-good: #95d0b5;
  --ink-bad: #ff9d9d;
  /* Schriftskala der Dokument-Oberflaechen. Vorher lagen hier und in
     tool.css 40 verschiedene Groessen, teils 0,3px auseinander. Diese sieben
     Stufen ersetzen sie; die fluiden Ueberschriften bleiben clamp(). */
  --fs-micro: .7rem;    /* 11,2px – Mono-Metadaten, Badges, Stempel */
  --fs-label: .78rem;   /* 12,5px – Labels, Eyebrow, Tabellenkoepfe */
  --fs-small: .82rem;   /* 13,1px – Sekundaertext, Footer, Hinweise */
  --fs-body: .9rem;     /* 14,4px – kompakter Text in Karten und Listen */
  --fs-text: 1rem;      /* 16px   – Fliesstext */
  --fs-lead: 1.15rem;   /* 18,4px – Lead, h3, Panel-Titel */
  --fs-title: 1.35rem;  /* 21,6px – Abschnitts- und Kartentitel */
  --fs-figure: 1.6rem;  /* 25,6px – grosse Zahl (Summe) */
  /* Fluide Stufen fuer Seitentitel; Endpunkte liegen auf dem DESIGN.md-Ramp. */
  --fs-display: clamp(2.5rem, 5vw, 5rem);
  --fs-section: clamp(1.35rem, 2.5vw, 2.25rem);
  --fs-lead-fluid: clamp(1rem, 1.4vw, 1.15rem);
  /* Auf Mobile darf der Seitentitel groesser werden als die
     Desktop-Untergrenze; eigene Stufe statt Literal im Override. */
  --fs-display-mobile: clamp(2.5rem, 13vw, 3.7rem);
  --font-head: "Noto Sans JP", Arial, sans-serif;
  --font-body: "Noto Sans JP", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 0;
  --radius-sm: 0;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: 96px;
  background: var(--paper);
}

body.folio-page {
  min-width: 280px;
  margin: 0;
  background:
    linear-gradient(rgba(247,247,244,.92), rgba(247,247,244,.98) 430px),
    url("/landing/prototypes/assets/hero-topographic-map.jpg") center top / 1800px auto no-repeat,
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

.folio-page a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.folio-page a:hover { color: var(--accent-soft); }

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

.folio-page .skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}

.folio-page .skip:focus { transform: none; }

/* Nur fuer Screenreader: traegt Kontext, den die Optik ueber Position und
   Nachbarschaft schon liefert (z. B. welche Strecke ein Zaehler meint). */
.folio-page .sr-only {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* Shared collar masthead — Teilstrichskala wie auf der Randleiste einer
   topografischen Karte: kurze Striche alle 8px, lange alle 40px.

   Vorher lag hier derselbe Topo-Ausschnitt wie im Hero. Seit die
   Landingpage auf den Kartenrand umgestellt ist, wechselte der Masthead
   beim Klick von dort hierher sichtbar den Charakter — DESIGN.md verlangt
   unter Layout ausdruecklich, dass alle Seiten denselben Masthead
   wiederverwenden. Das Topo-Feld bleibt der Seitenhintergrund
   (body.folio-page), es ist dort der Vermessungstisch; nur der Kopf des
   Dokuments traegt jetzt seine Randleiste.

   Deckungsgleich mit /landing/hero-motion.css. */
.folio-page > header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 10px max(24px, calc((100vw - 1420px) / 2));
  border-bottom: 1px solid var(--rule);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 32%, transparent) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 15%, transparent) 0 1px, transparent 1px 8px);
  background-position: left bottom, left bottom;
  background-size: 100% 13px, 100% 6px;
  background-repeat: repeat-x, repeat-x;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 9%, transparent);
}

.folio-page .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
}

.folio-page .logo img {
  width: 42px;
  height: 42px;
  padding: 5px;
  border-radius: 0;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.folio-page .logo .jp {
  margin-left: 0;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.folio-page .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.folio-page .lang {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: 700 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: .08em;
  text-decoration: none;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.folio-page .back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 650;
}

.folio-page .btn-app,
.folio-page .btn-big,
.folio-page .btn-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 800;
  text-decoration: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(50% - 5px), calc(100% - 5px) 50%, 100% calc(50% + 5px), 100% 100%, 7px 100%, 7px calc(50% + 5px), 0 50%, 7px calc(50% - 5px));
  filter: drop-shadow(6px 7px 0 color-mix(in srgb, var(--ink) 12%, transparent));
  transition: transform .28s cubic-bezier(.16,1,.3,1), filter .28s cubic-bezier(.16,1,.3,1);
}

.folio-page .btn-app:hover,
.folio-page .btn-big:hover,
.folio-page .btn-open:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  filter: drop-shadow(8px 10px 0 color-mix(in srgb, var(--ink) 16%, transparent));
}

/* Page sheet and editorial hierarchy */
.folio-page > main {
  width: min(1180px, calc(100% - 48px));
  max-width: none;
  margin: 34px auto 96px;
  padding: clamp(34px, 5vw, 68px);
  border: 1px solid var(--rule);
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 13px), color-mix(in srgb, var(--ink) 10%, transparent) calc(100% - 13px) calc(100% - 12px), transparent calc(100% - 12px)),
    var(--paper);
  box-shadow: 12px 15px 0 var(--structure);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.folio-page .eyebrow {
  margin: 0 0 14px;
  color: var(--accent-soft);
  font: 700 var(--fs-micro)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.folio-page h1 {
  max-width: 18ch;
  margin: 0 0 20px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.035em;
  hyphens: auto;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.folio-page .lead {
  max-width: 68ch;
  margin: 0 0 clamp(42px, 6vw, 72px);
  color: var(--text-2);
  font-size: var(--fs-lead-fluid);
  line-height: 1.6;
}

.folio-page h2 {
  margin: 64px 0 16px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-section);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.folio-page h3 {
  margin: 34px 0 8px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-text);
  line-height: 1.25;
}

.folio-page p,
.folio-page ul,
.folio-page ol,
.folio-page address {
  max-width: 75ch;
  color: var(--text-2);
}

.folio-page strong { color: var(--ink); }

/* Operational controls */
.folio-page button,
.folio-page input { font: inherit; }

.folio-page .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 28px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.folio-page .chip {
  min-height: 46px;
  padding: 9px 14px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--fs-label)/1.2 var(--font-mono);
  cursor: pointer;
}

.folio-page .chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.folio-page .calc {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
}

.folio-page .calc-head {
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.folio-page .calc-head h2 { margin: 0; font-size: var(--fs-lead); }

.folio-page .period {
  gap: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
}

.folio-page .period button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 0;
  color: var(--muted);
}

.folio-page .period button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.folio-page .hint,
.folio-page .count-note,
.folio-page .meta {
  color: var(--muted);
  font: 600 var(--fs-label)/1.5 var(--font-mono);
}

.folio-page .route {
  min-height: 62px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 32%, transparent);
}

.folio-page .route-name { color: var(--ink); font-weight: 700; }
.folio-page .route-price { color: var(--muted); font: 600 var(--fs-micro)/1.4 var(--font-mono); }

.folio-page .stepper button,
.folio-page .year-picker button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

.folio-page .stepper button:hover,
.folio-page .year-picker button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.folio-page .stepper button:disabled {
  border-color: color-mix(in srgb, var(--rule) 24%, transparent);
  color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.folio-page .stepper .count,
.folio-page .year-picker .yr {
  color: var(--ink);
  font-family: var(--font-mono);
}

.folio-page .manual {
  border-top-color: var(--rule);
}

.folio-page .manual input {
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

.folio-page .result {
  align-self: start;
  position: sticky;
  top: 106px;
  margin: 0;
  padding: 26px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 10px 13px 0 var(--accent);
}

.folio-page .result .total-row { border-bottom-color: rgba(255,255,255,.28); }
.folio-page .result .total-label {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
}

.folio-page .result .total-label,
.folio-page .result .total-val,
.folio-page .result .total-eur,
.folio-page .verdict.empty { color: var(--paper); }
.folio-page .result .total-val { font-family: var(--font-display); }
.folio-page .verdict.win { color: var(--ink-good); }
.folio-page .verdict.lose { color: var(--ink-bad); }

/* grid-auto-rows haelt alle drei Kacheln auf einer Hoehe, auch wenn die beste
   eine zweite Zeile fuer den "Beste Wahl"-Stempel bekommt. */
.folio-page .passes {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

.folio-page .pass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.folio-page .pass .d,
.folio-page .pass .pr { color: var(--paper); }
.folio-page .pass .delta.pos { color: var(--ink-good); }
.folio-page .pass .delta.neg { color: var(--ink-bad); }

.folio-page .pass.best {
  border-color: var(--ink-good);
  box-shadow: inset 0 0 0 1px var(--ink-good);
}

.folio-page .pass .tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 2px 0 0;
  padding: 3px 7px;
  border: 1px solid var(--ink-good);
  color: var(--ink-good);
  font: 700 var(--fs-micro)/1.2 var(--font-mono);
  letter-spacing: .06em;
  white-space: nowrap;
}

.folio-page .presets { margin: 0 0 18px; background: var(--paper); }
.folio-page .chip-clear { margin-left: auto; border-right: 0; color: var(--muted); }
.folio-page .chip-clear:disabled { cursor: default; opacity: .45; }

/* Sitzt im Sumi-Panel, also gegen die generische Ink-Linkfarbe setzen. */
.folio-page .next-step {
  color: var(--ink-good);
  text-decoration-color: color-mix(in srgb, var(--ink-good) 60%, transparent);
  text-underline-offset: 5px;
}

.folio-page .calc-bar {
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 5px 6px 0 var(--accent);
}

.folio-page .calc-bar-total {
  color: var(--paper);
  font-family: var(--font-display);
}

/* Kein eigener Sekundaerton auf Ink: die Hierarchie zur Summe kommt aus
   Schriftart und Groesse, nicht aus einer zweiten Farbe. */
.folio-page .calc-bar-verdict {
  color: var(--paper);
  font: 600 var(--fs-label)/1.35 var(--font-mono);
}

/* Guides, routes, comparison sheets */
.folio-page .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.folio-page .card,
.folio-page .route-card {
  margin: 0;
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
}

.folio-page .route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .62fr);
  gap: 12px 34px;
  align-items: start;
}

.folio-page .route-card .rc-head,
.folio-page .route-card > .path,
.folio-page .route-card > .meta,
.folio-page .route-card > ul,
.folio-page .route-card > .rc-pics { grid-column: 1; }

.folio-page .route-card > p,
.folio-page .route-card > .btn-open { grid-column: 2; }
.folio-page .route-card > .btn-open { grid-row: 3 / span 2; align-self: end; justify-self: start; }
.folio-page .route-card h3 { margin: 0; font-size: var(--fs-title); }
.folio-page .route-card .dur,
.folio-page .card .op,
.folio-page .card .regions {
  color: var(--muted);
  font: 700 var(--fs-micro)/1.4 var(--font-mono);
}

.folio-page .route-card .path {
  margin: 5px 0;
  color: var(--ink);
  font-family: var(--font-mono);
}

.folio-page .route-card .path .arr { color: var(--accent); }

.folio-page .route-card .btn-open {
  min-height: 44px;
  background: var(--accent);
  color: #fff;
}

.folio-page .card .op,
.folio-page .card .badge,
.folio-page .card .opt {
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
}

.folio-page .card .badge.shink {
  border-color: var(--good);
  background: transparent;
  color: var(--good);
}

.folio-page .card .badge.noshink { color: var(--muted); }

/* Passpreise sind Metadaten, also DM Mono wie Fahrpreise und Daten. */
.folio-page .card .opt .dd {
  color: var(--muted);
  font: 700 var(--fs-micro)/1.4 var(--font-mono);
}

.folio-page .card .opt .pp {
  color: var(--ink);
  font: 700 var(--fs-small)/1.3 var(--font-mono);
}

.folio-page .card .opt .ppd {
  color: var(--muted);
  font: 500 var(--fs-micro)/1.3 var(--font-mono);
}

.folio-page .sort-row { margin: 0 0 14px; }

.folio-page .year-picker {
  margin: 0 0 26px;
  padding: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.folio-page .hol-row {
  min-height: 54px;
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 28%, transparent);
}

.folio-page .hol-row .date {
  min-width: 160px;
  color: var(--accent-soft);
  font: 700 var(--fs-label)/1.4 var(--font-mono);
}

.folio-page .hol-row .nm { color: var(--ink); }
.folio-page .hol-row.gw {
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.folio-page table.grid,
.folio-page table.fares {
  border: 1px solid var(--rule);
  background: var(--paper);
}

.folio-page table.grid th,
.folio-page table.fares th {
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
}

.folio-page table.grid td,
.folio-page table.fares td {
  border-bottom-color: color-mix(in srgb, var(--rule) 28%, transparent);
}

.folio-page .cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 56px 0;
  padding: 26px;
  border: 0;
  border-radius: 0;
  background: var(--paper-2);
  box-shadow: 9px 11px 0 var(--structure);
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.folio-page .cta-box p { margin: 0; }

/* Belegvariante: der Screenshot ist die Evidenz fuer die Aussage daneben,
   montiert wie ein aufgezogener Abzug (Evidence Offset). */
.folio-page .cta-evidence {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.folio-page .cta-evidence .cta-shot {
  border: 1px solid var(--rule);
  box-shadow: 10px 12px 0 var(--structure);
}

.folio-page .cta-evidence .cta-text {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.folio-page details {
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}

.folio-page details:last-of-type { border-bottom: 1px solid var(--rule); }
.folio-page details summary { min-height: 52px; color: var(--ink); }
.folio-page details summary::after { color: var(--accent); }

.folio-page .related-tools {
  margin-top: 64px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
}

.folio-page .related-tools h2 { margin: 0 0 16px; font-size: var(--fs-lead); }
.folio-page .related-tools ul { gap: 0 24px; }
.folio-page .related-tools li { border-top: 1px solid color-mix(in srgb, var(--rule) 24%, transparent); }
.folio-page .related-tools a { color: var(--ink); }

.folio-page .disclaimer {
  color: var(--muted);
  border-top-color: var(--rule);
  font: 500 var(--fs-micro)/1.6 var(--font-mono);
}

/* Legal folios */
.folio-legal > main {
  width: min(860px, calc(100% - 48px));
  padding-inline: clamp(28px, 7vw, 84px);
}

.folio-legal h1 {
  max-width: 14ch;
  padding-bottom: 26px;
  border-bottom: 3px double var(--rule);
}

.folio-legal h2 {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--rule) 24%, transparent);
  font-size: clamp(var(--fs-lead), 2vw, 1.55rem);
}

.folio-legal p,
.folio-legal li,
.folio-legal address {
  max-width: 72ch;
  font-size: var(--fs-text);
  line-height: 1.72;
}

.folio-legal address,
.folio-legal .form-box,
.folio-legal .todo-box {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
}

/* Compact directory footer; language remains in the header */
.folio-page > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0 max(24px, calc((100vw - 1420px) / 2));
  border-top: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
}

.folio-page > footer a,
.folio-page > footer span {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 18px;
  border-right: 1px solid color-mix(in srgb, var(--rule) 25%, transparent);
  color: var(--muted);
  font-size: var(--fs-label);
  text-decoration: none;
}

.folio-page > footer a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.folio-page > footer span { margin-left: auto; border-right: 0; }

@media (min-width: 921px) {
  .folio-calculator > main {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 0 34px;
  }

  .folio-calculator > main > .eyebrow,
  .folio-calculator > main > h1,
  .folio-calculator > main > .lead,
  .folio-calculator > main > .cta-box,
  .folio-calculator > main > h2,
  .folio-calculator > main > p,
  .folio-calculator > main > ul,
  .folio-calculator > main > table,
  .folio-calculator > main > .related-tools,
  .folio-calculator > main > .disclaimer {
    grid-column: 1 / -1;
  }

  .folio-calculator > main > .calc { grid-column: 1; }
  .folio-calculator > main > .result { grid-column: 2; }
}

@media (max-width: 920px) {
  .folio-page > main {
    width: min(100% - 30px, 760px);
    margin-top: 24px;
    padding: clamp(26px, 6vw, 48px);
    box-shadow: 8px 10px 0 var(--structure);
  }

  .folio-page .result {
    position: static;
    margin-top: 22px;
  }

  .folio-page .cards { grid-template-columns: 1fr; }
  .folio-page .route-card { grid-template-columns: 1fr; }
  .folio-page .route-card > * { grid-column: 1 !important; grid-row: auto !important; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 82px; }

  body.folio-page {
    background:
      linear-gradient(rgba(247,247,244,.92), rgba(247,247,244,.99) 280px),
      url("/landing/prototypes/assets/hero-topographic-map.jpg") 58% top / 980px auto no-repeat,
      var(--paper);
  }

  .folio-page > header {
    min-height: 74px;
    padding: 0 0 0 max(10px, env(safe-area-inset-left));
    border-bottom: 0;
    background: var(--ink);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ink) 22%, transparent);
  }

  .folio-page > header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 8px;
    background: radial-gradient(circle at 4px 1px, transparent 0 2px, #5b5b58 2.2px 3px, transparent 3.2px) left top / 10px 8px repeat-x;
    pointer-events: none;
  }

  .folio-page .logo {
    gap: 7px;
    color: var(--paper);
    font-size: var(--fs-micro);
  }

  .folio-page .logo img { width: 38px; height: 38px; }
  .folio-page .logo .jp,
  .folio-page .back { display: none; }

  .folio-page .nav-right { align-self: stretch; gap: 6px; }

  /* 44px auch auf Mobile: der Umschalter war das einzige Bedienelement der
     Folio-Seiten unter dem Mindestmass. */
  .folio-page .lang {
    align-self: center;
    min-width: 48px;
    height: 44px;
    min-height: 44px;
    border-color: rgba(247,247,244,.58);
    background: transparent;
    color: var(--paper);
  }

  .folio-page .btn-app {
    align-self: stretch;
    min-width: 112px;
    height: 100%;
    padding: 0 max(10px, env(safe-area-inset-right));
    filter: none;
    font-size: var(--fs-micro);
    text-align: center;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 8px calc(50% + 7px), 0 50%, 8px calc(50% - 7px));
  }

  .folio-page > main,
  .folio-legal > main {
    width: calc(100% - 18px);
    margin: 18px 9px 70px;
    padding: 28px 18px 34px;
    box-shadow: 5px 7px 0 var(--structure);
  }

  .folio-page h1 { font-size: var(--fs-display-mobile); }
  .folio-page h2 { margin-top: 52px; }
  .folio-page .lead { margin-bottom: 42px; }

  .folio-page .chips {
    flex-wrap: nowrap;
    margin-inline: -18px;
    padding-left: 18px;
    overflow-x: auto;
    border-inline: 0;
    scroll-snap-type: x proximity;
  }

  .folio-page .chip { flex: 0 0 auto; scroll-snap-align: start; }
  /* Die Presets liegen in der Eingabekarte, nicht im Seiten-Sheet: der
     negative Rand der Filterleiste wuerde sie aus der Karte schieben. */
  .folio-page .presets { margin-inline: 0; padding-left: 0; border-inline: 1px solid var(--rule); }
  .folio-page .chip-clear { margin-left: 0; }
  .folio-page .calc { padding: 18px 14px; }

  .folio-page .calc-head { display: block; }
  /* Spaltenzahl folgt der Buttonzahl; feste 3 liessen bei zwei Buttons eine
     Spalte leer und zwangen beide Labels in den Zweizeiler. */
  .folio-page .period {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: 16px;
  }

  .folio-page .route { gap: 7px; }
  .folio-page .route-name { font-size: var(--fs-small); }
  .folio-page .stepper { gap: 0; }
  .folio-page .stepper button { width: 40px; height: 44px; }
  .folio-page .stepper .count { min-width: 24px; }

  .folio-page .result { padding: 20px 16px; box-shadow: 6px 8px 0 var(--accent); }
  .folio-page .result .total-row { align-items: flex-end; gap: 12px; }
  .folio-page .result .total-val { font-size: var(--fs-title); }
  .folio-page .pass { grid-template-columns: 1fr 1fr; }
  .folio-page .pass .delta { text-align: right; }
  /* Zwei Spalten: Stempel passt neben die Differenz, statt eine dritte Zeile
     aufzumachen, die alle Kacheln unnoetig streckt. */
  .folio-page .pass .tag { grid-column: auto; margin-top: 0; }

  .folio-page .route-card,
  .folio-page .card { padding: 20px 16px; }
  .folio-page .route-card .rc-head { display: block; }
  .folio-page .route-card .dur { display: block; margin-top: 7px; }

  .folio-page .hol-row { display: grid; gap: 2px; }
  .folio-page .hol-row .date { min-width: 0; }

  .folio-page .cta-box {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .folio-page .cta-box .btn-big { width: 100%; }
  .folio-page .cta-evidence { gap: 20px; }
  .folio-page .cta-evidence .cta-shot { box-shadow: 6px 7px 0 var(--structure); }
  .folio-page .cta-evidence .cta-text { justify-items: stretch; }
  .folio-page .related-tools ul { grid-template-columns: 1fr; }

  .folio-page .tbl-wrap,
  .folio-page table.fares {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .folio-page > footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .folio-page > footer a,
  .folio-page > footer span {
    min-width: 0;
    min-height: 52px;
    padding: 12px 14px;
    border-right: 1px solid color-mix(in srgb, var(--rule) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 25%, transparent);
    overflow-wrap: anywhere;
  }

  .folio-page > footer span {
    grid-column: 1 / -1;
    justify-content: center;
    margin-left: 0;
    border-bottom: 0;
  }
}

@media (max-width: 360px) {
  .folio-page .logo .jp { display: none; }
  .folio-page .btn-app { min-width: 96px; font-size: var(--fs-micro); }
  .folio-page .lang { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}