@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Vollkorn:ital,wght@0,400;0,500;0,600;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root {
  --stahl: #1b2733;
  --stahl-soft: #33465a;
  --blaupapier: #d3dfe6;
  --blaupapier-deep: #c2d2db;
  --messing: #b8863d;
  --messing-deep: #8e6528;
  --signalrot: #c1442e;
  --signalrot-deep: #9a3423;
  --gleisblau: #3d6a86;
  --weiss: #fbfcfc;
  --font-display: "Fjalla One", "Arial Narrow", sans-serif;
  --font-body: "Vollkorn", Georgia, serif;
  --font-data: "Courier Prime", ui-monospace, monospace;
  --content-max: 76rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.05rem, 1rem + .2vw, 1.18rem);
  --step-2: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.2vw, 4.6rem);
  --space-xs: clamp(.5rem, .42rem + .35vw, .8rem);
  --space-s: clamp(1rem, .8rem + .9vw, 1.6rem);
  --space-m: clamp(1.7rem, 1.25rem + 2vw, 2.9rem);
  --space-l: clamp(3rem, 2.1rem + 4.2vw, 5.6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--stahl);
  background: var(--weiss);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: var(--gleisblau); }
a:hover { color: var(--signalrot-deep); }
:focus-visible { outline: .18rem solid var(--signalrot); outline-offset: .18rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--stahl);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); }
h2 { margin: 0 0 .9rem; font-size: var(--step-3); }
h3 { margin: 0 0 .55rem; font-size: var(--step-2); }
p { max-width: 68ch; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .8rem 1rem; background: var(--messing); color: var(--stahl); }
.skip-link:focus { left: 1rem; top: 1rem; }
.rand { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }

/* ===== Header: .bahnhof ===== */
.bahnhof { background: var(--stahl); border-bottom: .3rem solid var(--messing); }
.bahnhof-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 4.6rem; padding-block: .65rem; }
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--weiss); }
.marke-zeichen { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.marke-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .02em; }
.marke-sub { display: block; font-family: var(--font-data); font-size: .62rem; letter-spacing: .06em; color: var(--blaupapier); text-transform: uppercase; }
.gleisnav { display: flex; gap: .2rem; overflow-x: auto; padding-block: .25rem; scrollbar-width: thin; }
.gleisnav a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .7rem; color: var(--blaupapier); font-family: var(--font-data); font-size: .82rem; white-space: nowrap; text-decoration: none; border-bottom: .18rem solid transparent; }
.gleisnav a[aria-current="page"] { color: var(--weiss); border-bottom-color: var(--messing); }
.gleisnav a:hover { color: var(--weiss); }

/* ===== Hero: .steigung — ascending incline graphic ===== */
.steigung { position: relative; background: var(--blaupapier); border-bottom: .25rem solid var(--stahl); overflow: hidden; }
.steigung-grid { display: grid; gap: var(--space-m); padding-block: var(--space-l); }
.steigung-copy { position: relative; z-index: 1; }
.steigung-kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .3rem .6rem; background: var(--stahl); color: var(--weiss); font-family: var(--font-data); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.steigung-copy p { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); }
.steigung-incline { position: relative; min-height: 20rem; }
.steigung-incline svg { width: 100%; height: 100%; display: block; }
.halt-marker { fill: var(--weiss); stroke: var(--stahl); stroke-width: 2.5; }
.halt-marker--top { fill: var(--messing); }
.halt-linie { fill: none; stroke: var(--stahl); stroke-width: 3; stroke-linejoin: round; }
.halt-label { font-family: var(--font-data); font-size: 12px; fill: var(--stahl); }
.halt-label-hoehe { font-family: var(--font-data); font-size: 11px; fill: var(--gleisblau); font-weight: 700; }
.steigung-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-s); }

.fahrschein { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.1rem; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .01em; text-decoration: none; border: .14rem solid var(--stahl); }
.fahrschein--voll { background: var(--signalrot); border-color: var(--signalrot-deep); color: var(--weiss); }
.fahrschein--voll:hover { background: var(--signalrot-deep); color: var(--weiss); }
.fahrschein--linie { background: transparent; color: var(--stahl); }
.fahrschein--linie:hover { background: var(--stahl); color: var(--weiss); }

/* ===== Content architecture: .fahrplantafel — departure-board stacked ledger, NOT alternating full-width bands, NOT a mosaic grid ===== */
.fahrplantafel { padding-block: var(--space-l); }
.fahrplantafel-kopf { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.fahrplantafel-kennung { font-family: var(--font-data); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gleisblau); }
.tafel-liste { list-style: none; margin: 0; padding: 0; border-top: .16rem solid var(--stahl); }
.tafel-zeile {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 1.25rem;
  align-items: start;
  padding: var(--space-s) 0;
  border-bottom: .12rem dashed var(--stahl-soft);
}
.tafel-zeile:last-child { border-bottom: .16rem solid var(--stahl); }
.tafel-hoehe { font-family: var(--font-data); font-size: 1.05rem; font-weight: 700; color: var(--messing-deep); padding-top: .2rem; }
.tafel-hoehe span { display: block; font-size: .65rem; font-weight: 400; letter-spacing: .05em; color: var(--stahl-soft); text-transform: uppercase; margin-top: .15rem; }
.tafel-inhalt { display: grid; gap: .75rem; }
.tafel-bild { position: relative; min-height: 12rem; overflow: hidden; border: .14rem solid var(--stahl); background: var(--blaupapier-deep); }
.tafel-bild img { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; }
.tafel-titel { margin: 0; font-size: var(--step-2); }
.tafel-mehr { display: inline-flex; min-height: 44px; align-items: center; font-family: var(--font-data); font-weight: 700; text-decoration: none; }
.tafel-mehr::after { content: " →"; }

.abschnitt { padding-block: var(--space-l); }
.abschnitt--blau { background: var(--blaupapier); border-block: .16rem solid var(--stahl); }
.abschnitt--stahl { background: var(--stahl); color: var(--blaupapier); }
.abschnitt--stahl h2, .abschnitt--stahl h3 { color: var(--weiss); }
.abschnitt--stahl a { color: var(--messing); }
.abschnitt-kopf { display: grid; gap: 1rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }

.fakt-reihe { display: grid; gap: .15rem; margin: 1.5rem 0; border: .16rem solid var(--stahl); background: var(--stahl); }
.fakt-reihe div { padding: .9rem 1.1rem; background: var(--weiss); }
.fakt-reihe dt { font-family: var(--font-data); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gleisblau); }
.fakt-reihe dd { margin: .25rem 0 0; font-family: var(--font-display); font-size: 1.3rem; }

.fahrkarte-gitter { display: grid; gap: 1.3rem; }
.fahrkarte {
  display: flex; flex-direction: column;
  border: .16rem solid var(--stahl);
  background: var(--weiss);
}
.fahrkarte-bild { position: relative; min-height: 11rem; }
.fahrkarte-bild img { width: 100%; height: 100%; min-height: 11rem; object-fit: cover; }
.fahrkarte-inhalt { padding: 1.1rem; display: grid; gap: .5rem; flex: 1; }
.fahrkarte-inhalt p { margin: 0; font-size: .95rem; }
.fahrkarte a.fahrschein { align-self: flex-start; margin-top: auto; }

.werkzeug { padding: 1.5rem; background: var(--blaupapier-deep); border: .18rem solid var(--stahl); }
.werkzeug-grid { display: grid; gap: 1.2rem; }
.werkzeug label { display: block; font-family: var(--font-data); font-size: .82rem; font-weight: 700; margin-bottom: .3rem; }
.werkzeug select, .werkzeug input { width: 100%; min-height: 48px; padding: .55rem .7rem; border: .14rem solid var(--stahl); background: var(--weiss); font: inherit; color: var(--stahl); }
.werkzeug-ergebnis { padding: 1.1rem; background: var(--stahl); color: var(--weiss); border: .18rem solid var(--messing); min-height: 8rem; }
.werkzeug-ergebnis[data-empty] { display: grid; place-items: center; color: var(--blaupapier); font-family: var(--font-data); font-size: .85rem; }
.werkzeug-ergebnis h4 { color: var(--messing); margin: 0 0 .4rem; font-size: var(--step-2); }
.werkzeug-ergebnis p { margin: 0 0 .4rem; }

.warnung { padding: 1rem 1.2rem; background: var(--weiss); border-left: .5rem solid var(--signalrot); margin: 1.5rem 0; }
.zitat-block { padding: 1.5rem; background: var(--blaupapier); border: .16rem solid var(--stahl); font-family: var(--font-display); font-size: var(--step-2); }

.seite-oben { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--stahl); color: var(--weiss); border-bottom: .3rem solid var(--messing); }
.seite-oben h1 { color: var(--weiss); }
.seite-oben .kennung { font-family: var(--font-data); font-size: .8rem; color: var(--messing); text-transform: uppercase; letter-spacing: .05em; }
.bruecke { padding: .9rem 0; font-family: var(--font-data); font-size: .8rem; }
.bruecke a { text-decoration: none; }

.tabelle-wrap { overflow-x: auto; margin: 1.5rem 0; }
.datentabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.datentabelle th, .datentabelle td { padding: .7rem .9rem; border: .1rem solid var(--stahl); text-align: left; vertical-align: top; }
.datentabelle th { background: var(--stahl); color: var(--weiss); font-family: var(--font-display); font-weight: 400; }

/* ===== Footer: .endstation ===== */
.endstation { background: var(--stahl); color: var(--blaupapier); border-top: .3rem solid var(--messing); }
.endstation-grid { display: grid; gap: 2rem; padding-block: var(--space-m); }
.endstation h4 { color: var(--weiss); font-size: 1.05rem; margin-bottom: .6rem; }
.endstation a { color: var(--blaupapier); }
.endstation a:hover { color: var(--messing); }
.endstation-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.endstation-klein { padding-block: 1.1rem; border-top: .12rem solid var(--stahl-soft); font-size: .82rem; }
.endstation-klein p { max-width: none; margin: 0; }

@media (min-width: 42rem) {
  .fahrkarte-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakt-reihe { grid-template-columns: repeat(3, 1fr); }
  .werkzeug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endstation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .steigung-grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, .95fr); align-items: center; }
  .tafel-zeile { grid-template-columns: 7rem 1fr; }
  .tafel-inhalt { grid-template-columns: 16rem 1fr; align-items: start; }
  .fahrkarte-gitter.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .werkzeug { padding: 2rem; }
  .werkzeug-grid.mit-ergebnis { grid-template-columns: 1fr 1.1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}