/* Rangierwerk. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Stellpult, Anlage, Wagen und Papier.
   Radius: Flächen 4px, Tasten rund wie am echten Stellpult. */
:root {
  --sc-canvas:     #141A17;
  --sc-surface:    #1E2622;
  --sc-ink:        #ECE8DD;
  --sc-ink-soft:   #AAB3A9;
  --sc-accent:     #F08A3C;
  --sc-accent-ink: #1A120A;
  --sc-accent-dunkel: #C9621C;   /* derselbe Ton auf hellem Papier */
  --sc-font-display: "Antonio", "Arial Narrow", sans-serif;
  --sc-font-text:    "Overpass", system-ui, sans-serif;
  --sc-font-mono:    "Overpass", system-ui, sans-serif;
  --sc-shadow-color: 150 20% 3%;
  --papier: #EFEBDF;
  --papier-tinte: #1F2A24;
  --rot: #D2483A;
  --r: 4px;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #3A4540 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); letter-spacing: .008em; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--r); }
input, select { caret-color: var(--sc-accent); }

/* Anzeige-Schrift: schmal und hoch wie Stellwerksbeschriftung. Hell auf dunkel
   bekommt etwas mehr Laufweite und eine Stufe mehr Gewicht. */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: .004em;
  line-height: 1.02;
}
.sc-display--xl { font-size: clamp(3rem, 1.6rem + 4.4vw, 6.4rem); }
.sc-display--lg { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); line-height: 1.04; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62; }
.sc-lede { font-family: var(--sc-font-text); }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.4rem, 1.4rem + 6vw, 3.4rem); }
  .sc-display--lg { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.5rem); }
  .sc-body { font-size: 1.04rem; line-height: 1.58; }
}

/* ---------- Kopf: nur die Wortmarke als Emailschild ---------- */
.kopf {
  position: fixed; inset: 0 auto auto 0; z-index: var(--sc-z-chrome);
  padding: 18px var(--sc-gutter); pointer-events: none;
}
.wortmarke {
  pointer-events: auto; display: inline-block;
  font: 700 19px/1 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--papier-tinte); background: var(--papier); text-decoration: none;
  padding: 8px 12px 7px; border-radius: var(--r);
  box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 3.5px var(--papier-tinte), var(--sc-e2);
}

/* ---------- Stellpult (Navigation) ---------- */
.pult {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  z-index: var(--sc-z-chrome);
}
.pult__auf { display: none; }
.pult__feld {
  position: relative; padding: 10px 12px 9px; border-radius: var(--r);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px),
    linear-gradient(#26302B, #1C2420);
  box-shadow: var(--sc-edge), var(--sc-e3);
  outline: 1px solid #2C3732; outline-offset: -1px;
}
.pult__feld::before { /* das Gleisbild der Seite: eine Linie durch alle Tasten */
  content: ""; position: absolute; left: 30px; right: 30px; top: 46px; height: 3px;
  background: #ECE8DD; opacity: .5; border-radius: 2px;
}
.pult__titel { margin: 0 0 6px 2px; font: 600 12px/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.pult__tasten { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pult__tasten a {
  position: relative; display: grid; justify-items: center; gap: 5px; min-width: 58px; padding: 4px 2px 0;
  color: var(--sc-ink-soft); text-decoration: none; font: 600 12px/1.1 var(--sc-font-text); letter-spacing: .02em;
}
.pult__tasten i {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #48544E, #2A332F 70%);
  box-shadow: inset 0 0 0 2px #121714, 0 2px 3px rgb(0 0 0 / .4);
  transition: background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.pult__tasten a.ist-hier { color: var(--sc-ink); }
.pult__tasten a.ist-hier i {
  background: radial-gradient(circle at 40% 35%, #FFC08A, var(--sc-accent) 60%);
  box-shadow: inset 0 0 0 2px #121714, 0 2px 3px rgb(0 0 0 / .4);
}
.pult__tasten a:active i { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .pult__tasten a:hover { color: var(--sc-ink); }
  .pult__tasten a:hover i { box-shadow: inset 0 0 0 2px var(--sc-accent), 0 2px 3px rgb(0 0 0 / .4); }
}
@media (max-width: 760px) {
  .pult__auf {
    display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 14px 0 12px; margin-left: auto;
    border: 0; outline: 1px solid #2C3732; outline-offset: -1px; border-radius: var(--r); background: #1F2823; color: var(--sc-ink);
    font: 600 14px/1 var(--sc-font-text); box-shadow: var(--sc-edge), var(--sc-e2);
  }
  .pult { display: grid; justify-items: end; gap: 8px; }
  .pult__auf i { width: 14px; height: 14px; border-radius: 50%; background: var(--sc-accent); box-shadow: inset 0 0 0 2px #121714; }
  .pult__feld { display: none; order: -1; }
  .pult.ist-offen .pult__feld { display: block; }
  .pult__tasten { flex-wrap: wrap; width: 228px; row-gap: 10px; }
  .pult__tasten a { min-width: 70px; min-height: 48px; }
  .pult__feld::before { display: none; }
}

/* Meldung, wenn eine Weiche verschlossen ist */
.meldung {
  position: fixed; left: 50%; top: 76px; z-index: var(--sc-z-chrome); margin: 0;
  width: min(30rem, calc(100% - 32px)); translate: -50% 0;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--papier); color: var(--papier-tinte); font: 600 15px/1.45 var(--sc-font-text);
  box-shadow: inset 0 0 0 1.5px var(--rot), var(--sc-e3);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.meldung:empty { display: none; }
.meldung.ist-da { opacity: 1; transform: none; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border-radius: var(--r); white-space: nowrap; text-decoration: none;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .02em;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf::before, .taste::before { /* feines Mosaik mit Lichtstreif */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #F59C55; } }

/* ---------- Anlage (SVG) ---------- */
.anlage { position: relative; width: 100%; height: 100%; }
.anlage__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zug { filter: drop-shadow(3px 4px 2px rgb(8 12 9 / .45)); }
.zunge { stroke: #F3F0E7; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 120ms var(--sc-ease-out); }
.zunge.ist-an { opacity: 1; }
.lampen { opacity: .95; }
.spurlinie { opacity: .95; }

/* Weichentasten liegen als HTML über der Anlage: auf jedem Bildschirm 56px groß. */
.weiche {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 60px; height: 60px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; align-content: center; gap: 0;
  color: var(--sc-ink); cursor: pointer;
  border: 0;
  background: radial-gradient(circle at 40% 32%, #36423C, #1B221F 72%);
  box-shadow: 0 0 0 3px #10140F, 0 0 0 5px var(--sc-accent), 0 6px 14px rgb(5 8 6 / .55);
  transition: box-shadow 160ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
  will-change: transform;
}
.weiche svg { width: 30px; height: 22px; margin-top: -2px; }
.weiche path { fill: none; stroke-width: 4; stroke-linecap: round; stroke: #5E6A63; }
.weiche[data-stand="gerade"] .weiche__g, .weiche[data-stand="abzweig"] .weiche__a { stroke: var(--sc-accent); }
.weiche b { font: 700 13px/1 var(--sc-font-display); letter-spacing: .06em; margin-top: -3px; }
.weiche small { position: absolute; top: calc(100% + 7px); left: 50%; translate: -50% 0; white-space: nowrap;
  font: 700 12px/1 var(--sc-font-text); letter-spacing: .04em; padding: 4px 6px 3px; border-radius: var(--r);
  background: rgb(20 26 23 / .9); color: var(--sc-ink); }
.weiche.ist-zu { box-shadow: 0 0 0 3px #10140F, 0 0 0 5px var(--rot), 0 6px 14px rgb(5 8 6 / .55); }
.weiche.ist-zu small { background: var(--rot); color: #FFF7F2; }
.weiche.ist-neben { box-shadow: 0 0 0 3px #10140F, 0 0 0 5px #6B766F, 0 6px 14px rgb(5 8 6 / .55); }
.weiche.ist-weg { opacity: 0; pointer-events: none; }
.weiche:active { scale: .96; }
.weiche.ist-ruck { animation: ruck 320ms var(--sc-ease-out); }
@keyframes ruck { 20% { translate: -4px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }
@media (hover: hover) and (pointer: fine) { .weiche:hover { box-shadow: 0 0 0 3px #10140F, 0 0 0 6px #FFB27A, 0 6px 14px rgb(5 8 6 / .55); } }
/* Bis zum ersten Tipp zieht Weiche 1 im Hero die Aufmerksamkeit auf sich. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.hat-gestellt) .held .weiche[data-weiche="1"]::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--sc-accent);
    animation: ruf 1.8s var(--sc-ease-out) infinite;
  }
}
@keyframes ruf { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }

.ortsschild {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap;
  font: 700 13px/1 var(--sc-font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--papier-tinte); background: var(--papier); padding: 5px 7px 4px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--papier-tinte), 0 3px 6px rgb(5 8 6 / .4);
  transition: opacity 200ms var(--sc-ease-out);
}
.ortsschild.ist-weg { opacity: 0; }

/* ---------- Hero: Schaukasten in Schrägsicht ---------- */
.held { background: radial-gradient(90% 70% at 62% 45%, #1D2621, var(--sc-canvas) 70%); }
.held__raum { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 68% 35%; }
.held__kasten {
  position: absolute; left: calc(var(--sc-gutter) + min(31rem, 36vw) + 3.5rem); right: 6vw; top: 52%; aspect-ratio: 16 / 10;
  translate: 0 -50%;
  transform-style: preserve-3d; transform-origin: 50% 60%;
  border-radius: var(--r);
  box-shadow: 0 0 0 10px #2A221B, 0 0 0 12px #3A3027, 0 40px 80px -20px rgb(0 0 0 / .7);
  will-change: transform;
}
.anlage--ebenen { transform-style: preserve-3d; }
.anlage--ebenen .anlage__svg--1 { transform: translateZ(12px); }
.anlage--ebenen .anlage__svg--2 { transform: translateZ(26px); }
.held__platte {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: clamp(2rem, 9vh, 6rem);
  width: min(31rem, 36vw); padding: 26px 28px 28px; border-radius: var(--r);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 3px),
    linear-gradient(#232D28, #1A211E);
  background-color: #1E2622;
  box-shadow: var(--sc-edge), 0 0 0 1px #2C3732, var(--sc-e3);
}
.held__platte h1 { max-width: 12ch; font-size: clamp(2.8rem, 1.4rem + 3.4vw, 5.2rem); }
.held__platte .sc-body { margin-top: var(--sc-4); max-width: 34ch; }
.held__platte .knopf { margin-top: var(--sc-5); }
.held .weiche, .held .ortsschild { z-index: 6; }

/* ---------- Bahnhofsschild am Gleis (jede Station der Seite) ---------- */
.bahnhof { display: flex; align-items: center; gap: 0; margin-bottom: var(--sc-7); }
.schild {
  flex: none; font: 700 15px/1 var(--sc-font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--papier-tinte); background: var(--papier); padding: 8px 14px 7px; border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 3.5px var(--papier-tinte);
}
.gleisband, .park__gleis {
  flex: 1; height: 16px; display: block;
  background:
    linear-gradient(#C9C6BC, #C9C6BC) 0 3px / 100% 2px no-repeat,
    linear-gradient(#C9C6BC, #C9C6BC) 0 11px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #4A3B2F 0 4px, transparent 4px 11px) 0 0 / 100% 16px,
    linear-gradient(#6E695D, #6E695D) 0 5px / 100% 6px no-repeat;
  opacity: .8;
}
.bahnhof--kurz { margin-bottom: var(--sc-5); }

/* ---------- Werkstatt ---------- */
.werkstatt { padding-top: calc(var(--sc-section) * .7); }
.werkstatt__raster { display: grid; grid-template-columns: 1.05fr .75fr .55fr; gap: var(--sc-6); align-items: start; }
.werkstatt__text { padding-top: var(--sc-4); }
.werkstatt__text .sc-display { max-width: 14ch; }
.werkstatt__text .sc-body { max-width: 44ch; }
.daten { margin: var(--sc-6) 0 0; display: grid; gap: 0; }
.daten div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-4); padding: 12px 0; border-top: 1px solid var(--sc-hairline); }
.daten div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.daten dt { font: 600 .95rem/1.5 var(--sc-font-text); color: var(--sc-ink); }
.daten dd { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; }
.werkstatt__bild { margin: 0; }
.werkstatt__bild img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e3); }
.werkstatt__bild figcaption { margin-top: 10px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.werkstatt__bild--klein { margin-top: 62%; margin-left: -34%; position: relative; z-index: 2; }
.werkstatt__bild--klein img { box-shadow: 0 0 0 6px var(--sc-canvas), var(--sc-e3); }

/* ---------- Die Fahrt ---------- */
.fahrt {
  display: grid; grid-template-columns: minmax(19rem, 27rem) 1fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center; padding: 84px var(--sc-gutter) 118px;
  background: radial-gradient(70% 70% at 70% 50%, #1A221E, var(--sc-canvas) 75%);
}
.fahrt__pult {
  align-self: center; padding: 24px 24px 20px; border-radius: var(--r);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 3px),
    linear-gradient(#232D28, #1A211E);
  box-shadow: var(--sc-edge), 0 0 0 1px #2C3732, var(--sc-e2);
}
.fahrt__text { display: grid; }
.fahrt__text > * { grid-area: 1 / 1; }
.fahrt__text .sc-body { margin-top: var(--sc-4); }
.fahrt__stand {
  margin: var(--sc-5) 0 0; padding-top: 14px; border-top: 1px solid var(--sc-hairline);
  font: 600 var(--sc-t-sm)/1.45 var(--sc-font-text); color: var(--sc-ink);
}
.fahrt__stand::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--sc-accent); vertical-align: 1px; }
.fahrt__kasten {
  position: relative; height: 100%; max-height: calc(100svh - 202px); min-height: 0;
  border-radius: var(--r);
}
.fahrt__kasten .anlage { overflow: hidden; border-radius: var(--r); }
.fahrt__kasten .anlage__svg { transition: none; will-change: transform; }
.ziel { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; background: var(--sc-canvas); }
.ziel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform; }
.ziel img.ist-an { opacity: 1; }
.ziel img[data-ziel-img="bahnhof"] { object-position: 66% 60%; }
.ziel img[data-ziel-img="steinbruch"] { object-position: 30% 60%; }
.ziel img[data-ziel-img="ladekai"] { object-position: 62% 60%; }
.ziel__text { z-index: 9; }
.ziel__text .sc-display { max-width: 14ch; }
.ziel__text .sc-body { margin-top: var(--sc-4); max-width: 38ch; color: var(--sc-ink); }

/* ---------- Wagenpark ---------- */
.park { display: flex; flex-direction: column; justify-content: center; background: var(--sc-canvas); padding-bottom: 60px; }
.park__zug {
  align-items: flex-end; gap: 0; padding-inline: var(--sc-gutter); position: relative; z-index: 2;
}
.park__zug::after { /* das Gleis, auf dem der Wagenzug steht */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: -1;
  background:
    linear-gradient(#C9C6BC, #C9C6BC) 0 3px / 100% 2px no-repeat,
    linear-gradient(#C9C6BC, #C9C6BC) 0 11px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #4A3B2F 0 4px, transparent 4px 11px) 0 0 / 100% 16px,
    linear-gradient(#6E695D, #6E695D) 0 5px / 100% 6px no-repeat;
}
.park__kopf { flex: none; width: min(26rem, 80vw); margin-right: clamp(2rem, 6vw, 6rem); align-self: center; }
.park__kopf .sc-body { margin-top: var(--sc-4); max-width: 30ch; }
.wagen { flex: none; position: relative; width: clamp(17rem, 27vw, 24rem); padding-bottom: 26px; margin-right: 26px; }
.wagen + .wagen::before { /* Kupplung zum Vorderwagen */
  content: ""; position: absolute; left: -26px; bottom: 52px; width: 26px; height: 6px; background: #8F8B80; border-radius: 2px;
}
.wagen__kasten {
  position: relative; overflow: hidden; padding: 20px 20px 18px; border-radius: var(--r);
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 34px),
    linear-gradient(#6A4433, #5A392B);
  color: #F4EEE3;
  box-shadow: var(--sc-edge), var(--sc-e3);
}
.wagen__kasten::after { /* langsames Werkstattlicht über die Bretter */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 0%, rgb(255 230 200 / .1), transparent 70%);
  animation: licht 10s var(--sc-ease-in-out) infinite alternate;
}
@keyframes licht { from { opacity: .35; } to { opacity: 1; } }
.wagen__plan { width: 100%; height: auto; background: var(--papier); border-radius: 3px; padding: 6px; }
.wagen__plan path { fill: none; stroke: var(--papier-tinte); stroke-width: 4; stroke-linecap: round; }
.wagen__plan .naht { stroke-dasharray: 5 6; stroke-width: 2; opacity: .6; }
.wagen__plan circle { fill: var(--sc-accent-dunkel); }
.wagen__name { margin: 16px 0 0; font: 700 clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1 var(--sc-font-display); letter-spacing: .02em; }
.wagen__etikett { margin: 8px 0 0; font-size: var(--sc-t-base); line-height: 1.5; color: #E6DCCD; min-height: 3em; }
.wagen__wahl {
  margin-top: 14px; min-height: 46px; width: 100%; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid rgb(244 238 227 / .55); background: rgb(20 26 23 / .3); color: #F4EEE3;
  font: 700 .95rem/1 var(--sc-font-text);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.wagen__wahl:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .wagen__wahl:hover { border-color: var(--sc-accent); } }
.wagen.ist-gewaehlt .wagen__wahl { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.wagen__dg { /* Drehgestelle stehen auf dem Gleis */
  position: absolute; bottom: 2px; width: 58px; height: 20px; border-radius: 3px;
  background: radial-gradient(circle at 14px 10px, #2A2F2C 7px, transparent 7.5px), radial-gradient(circle at 44px 10px, #2A2F2C 7px, transparent 7.5px), #3D433F;
}
.wagen__dg--a { left: 14%; } .wagen__dg--b { right: 14%; }
.park__schluss { flex: none; width: min(24rem, 78vw); margin-left: 30px; display: flex; align-items: flex-end; gap: 24px; padding: 0 var(--sc-gutter) 10px 0; }
.park__schluss .sc-lede { color: var(--sc-ink); }
.prellbock { flex: none; width: 22px; height: 44px; background: #A33A2A; border-radius: 2px; box-shadow: 6px 0 0 #6E271C; margin-bottom: -10px; }
.park__gleis { display: none; }

/* ---------- Fahrplan ---------- */
.plan {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding: 90px var(--sc-gutter) 110px; background: var(--sc-canvas);
}
.plan__text .sc-display { max-width: 13ch; }
.plan__text .sc-body { margin-top: var(--sc-4); max-width: 36ch; }
.buchfahrplan {
  background:
    repeating-linear-gradient(0deg, rgb(31 42 36 / .035) 0 1px, transparent 1px 28px),
    var(--papier);
  color: var(--papier-tinte); border-radius: 3px; padding: 22px 24px 18px; rotate: -.8deg;
  box-shadow: 0 2px 0 #D9D3C2, 0 30px 60px -18px rgb(0 0 0 / .65);
  max-width: 44rem;
}
.buchfahrplan__kopf { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 3px double var(--papier-tinte);
  font: 700 1.05rem/1 var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase; }
.buchfahrplan table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.buchfahrplan th, .buchfahrplan td { text-align: left; vertical-align: top; padding: 9px 10px 8px 0; border-bottom: 1px solid rgb(31 42 36 / .22); line-height: 1.4; }
.buchfahrplan thead th { font: 700 .78rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: #48544D; padding-bottom: 8px; }
.buchfahrplan tbody td:first-child { font: 700 1.1rem/1.3 var(--sc-font-display); white-space: nowrap; width: 5.5rem; }
.buchfahrplan tbody th { font-weight: 700; white-space: nowrap; width: 9rem; }
.buchfahrplan tbody td:last-child { color: #3A4640; }
.buchfahrplan tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Endbahnhof: Lichtpause und Anfrage ---------- */
.strecke { padding-top: calc(var(--sc-section) * .65); }
.strecke__raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lichtpause {
  margin: 0; padding: 18px; border-radius: 3px; rotate: -1deg;
  background:
    linear-gradient(rgb(31 42 36 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(31 42 36 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--papier);
  color: var(--papier-tinte);
  box-shadow: 0 2px 0 #D9D3C2, 0 34px 70px -20px rgb(0 0 0 / .7);
}
.lichtpause__plan { aspect-ratio: 16 / 10; position: relative; }
.lichtpause__plan svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--papier-tinte); }

.lichtpause__plan text { font: 700 54px var(--sc-font-display); letter-spacing: .06em; fill: var(--papier-tinte); text-transform: uppercase; }
.schriftfeld { margin-top: 14px; padding: 6px 8px; border: 2px solid var(--papier-tinte); }
.schriftfeld dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.schriftfeld div { padding: 8px 10px; border-top: 1px solid rgb(31 42 36 / .35); }
.schriftfeld div:nth-child(2n+1):not(.schriftfeld__breit) { border-left: 1px solid rgb(31 42 36 / .35); }
.schriftfeld__breit { grid-column: 1 / -1; border-top: 0 !important; }
.schriftfeld dt { font: 700 .72rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: #48544D; }
.schriftfeld dd { margin: 3px 0 0; font: 600 1rem/1.35 var(--sc-font-text); font-variant-numeric: tabular-nums; }
.schriftfeld__breit dd { color: var(--sc-accent-dunkel); font-weight: 700; color: #9C4A12; }
.strecke__rechts .sc-display { max-width: 12ch; }
.strecke__rechts > .sc-body { margin-top: var(--sc-4); max-width: 38ch; }
.anfrage { margin-top: var(--sc-6); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.feld { grid-column: 1 / -1; display: grid; gap: 7px; }
.feld--halb { grid-column: auto; }
.feld label { font: 600 .92rem/1.2 var(--sc-font-text); color: var(--sc-ink); }
.feld input, .feld select {
  min-height: 50px; padding: 0 14px; border-radius: var(--r); border: 1.5px solid #46524C; background: #19201D; color: var(--sc-ink);
  transition: border-color 150ms var(--sc-ease-out);
}
.feld input:focus, .feld select:focus { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 3px rgb(240 138 60 / .3); }
.feld input[aria-invalid="true"] { border-color: var(--rot); }
.feld__fehler { color: #FF9C8C; font-size: .9rem; }
.taste { /* Stellpult-Taste: die Anfrage ist die letzte Fahrstraße */
  grid-column: 1 / -1; position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; margin-top: 6px;
  border: 0; border-radius: var(--r); cursor: pointer; white-space: nowrap;
  font: 700 1.05rem/1 var(--sc-font-text); letter-spacing: .02em; color: var(--sc-accent-ink); background: var(--sc-accent);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), var(--sc-e2);
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.taste i { width: 16px; height: 16px; border-radius: 50%; background: #FFF3E6; box-shadow: inset 0 0 0 3px #7A3C10; }
.taste:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .taste:hover { background: #F59C55; } }
.anfrage__hinweis { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.anfrage.ist-gesendet .anfrage__hinweis { color: var(--sc-ink); }
.fuss { margin-top: var(--sc-9); padding: 22px 0 96px; border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.fuss__marke { font: 700 15px/1.4 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink); }

/* ---------- Hochformat und Handy ---------- */
@media (max-aspect-ratio: 1/1) {
  .held__raum { perspective-origin: 50% 20%; }
  .held__kasten { right: auto; left: 50%; top: 72px; margin: 0; translate: -50% 0; width: min(74vw, calc((100svh - 330px) * 0.62 * 1.2)); aspect-ratio: 10 / 16; transform-origin: 50% 30%; }
  .held__platte { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px 18px 20px; }
  .held__platte h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 3.2rem); }
  .held__platte .sc-body { font-size: 1rem; }
  .held__platte .knopf { margin-top: var(--sc-4); }
  .fahrt { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 70px 16px 74px; gap: 12px; align-items: stretch; }
  .fahrt__pult { padding: 14px 16px 12px; }
  .fahrt__text .sc-display--lg { font-size: clamp(1.6rem, 1rem + 3vw, 2.3rem); }
  .fahrt__text .sc-body { font-size: .98rem; margin-top: 8px; line-height: 1.5; }
  .fahrt__stand { margin-top: 10px; padding-top: 8px; font-size: .86rem; }
  .fahrt__kasten { max-height: none; }
  .ziel__text { bottom: 96px; }
  .ziel__scrim { background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 54%,
      transparent 72%); }
}
@media (max-width: 900px) {
  .werkstatt__raster { grid-template-columns: 1fr 1fr; }
  .werkstatt__text { grid-column: 1 / -1; }
  .werkstatt__bild--klein { margin: 28% 0 0 -12%; }
  .plan { grid-template-columns: 1fr; gap: 22px; padding: 76px 16px 84px; align-content: center; }
  .strecke__raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .daten div { grid-template-columns: 1fr; gap: 2px; }
  .buchfahrplan { padding: 14px 14px 10px; rotate: 0deg; }
  .buchfahrplan thead { display: none; }
  .buchfahrplan tbody tr { display: grid; grid-template-columns: 4.6rem 1fr; border-bottom: 1px solid rgb(31 42 36 / .22); padding: 6px 0; }
  .buchfahrplan tbody tr:last-child { border-bottom: 0; }
  .buchfahrplan th, .buchfahrplan td { border: 0; padding: 0 6px 0 0; }
  .buchfahrplan tbody td:first-child { grid-row: span 2; width: auto; font-size: 1rem; }
  .buchfahrplan tbody th { width: auto; }
  .buchfahrplan tbody td:last-child { font-size: .9rem; line-height: 1.35; }
  .plan__text .sc-body { font-size: .96rem; line-height: 1.5; }
  .plan__text .sc-display--lg { font-size: 1.85rem; }
  .plan__text .sc-display { max-width: 18ch; }
  .plan { padding-top: 64px; gap: 14px; }
  .plan .bahnhof--kurz { margin-bottom: 12px; margin-left: auto; width: max-content; }
  .anfrage { grid-template-columns: 1fr; }
  .feld--halb { grid-column: 1 / -1; }
  .lichtpause { padding: 10px; rotate: 0deg; }
  .schriftfeld dl { grid-template-columns: 1fr; }
  .schriftfeld div:nth-child(2n+1):not(.schriftfeld__breit) { border-left: 0; }
  .weiche { width: 56px; height: 56px; }
}
@media (max-height: 700px) and (max-aspect-ratio: 1/1) {
  .fahrt__stand { display: none; }
  .held__platte .sc-body { font-size: .94rem; line-height: 1.45; }
  .held__platte h1 { font-size: 2.2rem; }
  .buchfahrplan tbody td:last-child { display: none; }
  .buchfahrplan tbody td:first-child { grid-row: auto; }
}

/* ---------- Ruhig ---------- */
@media (prefers-reduced-motion: reduce) {
  .held__kasten { transform: none !important; }
  .anlage--ebenen .anlage__svg { transform: none !important; }
  .knopf::before, .taste::before, .wagen__kasten::after { animation: none; }
  .zunge, .weiche, .meldung { transition-duration: 1ms; }
  .ziel img { transform: none !important; }
}
@media (max-width: 420px) {
  .weiche:not(.ist-zu) small { display: none; }
  .buchfahrplan__kopf span + span { display: none; }
}