/* SMS Deutschland: Platzhalter-Seite "Gleis 1". Reines CSS, keine externen Anfragen. */
@font-face {
  font-family: 'Saira';
  src: url('fonts/saira-var.woff2') format('woff2');
  font-weight: 300 700;
  font-stretch: 85% 115%;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-next-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 112.6%; ascent-override: 100.8%; descent-override: 39%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Atkinson Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 99.6%; ascent-override: 98.8%; descent-override: 31.7%; line-gap-override: 0%;
}

:root {
  --nacht: #050B15;
  --navy: #0B1526;
  --stahl: #9DB3D6;
  --stahl-dunkel: #6A80A6;
  --text: #E8EEF6;
  --led: #FFB347;
  --led-glut: #FF7A1A;
  --font-anzeige: 'Saira', 'Saira Fallback', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, sans-serif;

  /* Seitenverhältnis des Bahnsteig-Renderings, Tafelbild und Bildschirmausschnitt (aus Blender gemessen) */
  --ar: 1.7778;
  --board-ar: 1.7778;
  --d: 7.08cqw;                       /* Tiefe der Tafel: 0,34 m von 4,8 m Breite */
  --sl: 2.5%; --st: 4.444%; --sw: 95%; --sh: 91.111%;
  --vpx: 49.4%; --vpy: 67%;            /* Fluchtpunkt im Rendering, dort leuchtet die Lokomotive auf */
  --px: 0; --py: 0;                   /* Zeiger-Parallaxe, -1 .. 1 (JS) */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; background: var(--nacht); color: var(--text);
  font: 400 16px/1.5 var(--font-text); overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 20; padding: 10px 14px; background: var(--led); color: #0E1A2F; border-radius: 4px; font-weight: 600; }
.skip:focus { top: 12px; }

.stage { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }

/* ------------------------------------------------------------------ Bahnsteig */
.plate { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--nacht); }
.plate-box {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, calc(100svh * var(--ar)));
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%) translate3d(calc(var(--px) * -14px), calc(var(--py) * -8px), 0) scale(1.05);
  will-change: transform;
}
.plate-box img { width: 100%; height: 100%; object-fit: cover; }
.headlight {
  position: absolute; left: var(--vpx); top: var(--vpy); width: 9%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; opacity: 0; scale: .2;
  background: radial-gradient(circle, rgba(255,246,226,.95) 0 6%, rgba(255,214,150,.55) 16%, rgba(255,160,60,.16) 42%, transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
}
.arriving .headlight { animation: headlight 5.2s cubic-bezier(.3,.05,.3,1) both; }
@keyframes headlight {
  0% { opacity: 0; scale: .2; }
  18% { opacity: .9; }
  70% { opacity: 1; scale: 2.6; }
  100% { opacity: 0; scale: 5.5; }
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; mix-blend-mode: screen; }
.vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3,6,12,.62) 100%),
    linear-gradient(to bottom, rgba(5,11,21,.55), transparent 22%, transparent 70%, rgba(5,11,21,.78));
}

/* ------------------------------------------------------------------ Kopf und Fuß */
.top {
  position: absolute; z-index: 5; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: max(22px, env(safe-area-inset-top)) clamp(16px, 4vw, 56px) 0;
}
.brand img { height: clamp(26px, 3.1vw, 40px); width: auto; }
.top-note { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 14px/1 var(--font-anzeige); font-stretch: 112%; letter-spacing: .02em; color: var(--stahl); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--led-glut); box-shadow: 0 0 10px 2px rgba(255,122,26,.7); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; box-shadow: 0 0 4px 0 rgba(255,122,26,.4); } }

.foot {
  position: absolute; z-index: 5; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 0 clamp(16px, 4vw, 56px) max(22px, env(safe-area-inset-bottom));
}
.info { max-width: 52rem; }
.lead { margin: 0; font: 400 clamp(20px, 2.1vw, 30px)/1.2 var(--font-anzeige); font-stretch: 112%; letter-spacing: .005em; text-wrap: balance; }
.about { margin: 8px 0 0; font: 400 15px/1.4 var(--font-text); color: var(--text); text-wrap: pretty; }
.contact { margin: 6px 0 0; display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px; font: 400 15px/1.4 var(--font-text); color: var(--stahl); }
.contact a { color: var(--stahl); text-decoration: none; border-bottom: 1px solid rgba(157,179,214,.35); transition: color .2s, border-color .2s; }
.contact a:hover, .contact a:focus-visible { color: #fff; border-color: var(--led-glut); }
.foot nav { display: flex; gap: 22px; font-size: 15px; }
.foot nav a { color: var(--stahl); text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.foot nav a:hover, .foot nav a:focus-visible { color: #fff; border-color: var(--led-glut); }
a:focus-visible { outline: 2px solid var(--led); outline-offset: 4px; border-radius: 2px; }

/* ------------------------------------------------------------------ Tafel */
main {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: clamp(70px, 9vh, 92px) 16px clamp(150px, 24vh, 230px);
}
.board-wrap {
  --bw: min(66vw, 980px, calc((100svh - 360px) * var(--board-ar)));
  width: max(var(--bw), 300px); container-type: inline-size;
  perspective: 1700px; perspective-origin: 50% 30%;
  animation: einblenden 1.4s .15s ease-out both;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.board-glow {
  position: absolute; inset: -22% -16%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,150,50,.22), rgba(255,122,26,.08) 55%, transparent 80%);
  mix-blend-mode: screen; animation: glut 6s ease-in-out infinite alternate;
}
@keyframes glut { to { opacity: .6; } }

/* Aufhängung: die Tafel pendelt um einen Punkt hoch über dem Bild, wie an langen Seilen */
.sway {
  transform-style: preserve-3d; transform-origin: 50% -90vh;
  animation: einhaengen 2.6s .1s cubic-bezier(.2,.9,.3,1) both, pendel 11s 2.7s ease-in-out infinite alternate;
}
@keyframes einhaengen {
  0% { transform: translate3d(0, -22vh, 0) rotateX(-9deg) rotateZ(.7deg); }
  45% { transform: translate3d(0, 0, 0) rotateX(2.2deg) rotateZ(-.35deg); }
  72% { transform: rotateX(-.9deg) rotateZ(.15deg); }
  100% { transform: none; }
}
@keyframes pendel {
  from { transform: rotateY(-1.1deg) rotateZ(-.12deg); }
  to   { transform: rotateY(1.1deg) rotateZ(.12deg); }
}
.tilt {
  transform-style: preserve-3d; transform-origin: 50% -90vh;
  transform: rotateX(calc(var(--py) * 2.4deg)) rotateY(calc(var(--px) * -3.4deg));
}
.board { position: relative; width: 100%; aspect-ratio: var(--board-ar); transform-style: preserve-3d; }
.front { position: absolute; inset: 0; backface-visibility: hidden; }
.frame { width: 100%; height: 100%; }

.cable {
  position: absolute; bottom: calc(100% - 1.2cqw); width: max(2px, .28cqw); height: 120vh; z-index: -1;
  background: linear-gradient(to bottom, #11161c, #6b7683 55%, #aab4c0); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
}
.c1 { left: calc(7.4% + .6cqw); } .c2 { right: calc(7.4% + .6cqw); }

.side { position: absolute; display: block; background: linear-gradient(#3a4350, #1a1f27); }
.s-top, .s-bottom { left: 1.5cqw; right: 1.5cqw; height: var(--d); }
.s-top { top: 0; transform-origin: top; transform: rotateX(-90deg); background: linear-gradient(to right, #525d6b, #3a4350 40%, #4a5562); }
.s-bottom { bottom: 0; transform-origin: bottom; transform: rotateX(90deg); background: linear-gradient(to right, #14181e, #0d1015); }
.s-left, .s-right { top: 1.5cqw; bottom: 1.5cqw; width: var(--d); }
.s-left { left: 0; transform-origin: left; transform: rotateY(90deg); background: linear-gradient(to right, #2a313b, #3b4552); }
.s-right { right: 0; transform-origin: right; transform: rotateY(-90deg); background: linear-gradient(to left, #151a21, #232a33); }

/* ------------------------------------------------------------------ Bildschirm (LED-Anzeige) */
.screen {
  position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
  container-type: size; overflow: hidden; border-radius: 1.2cqw; background: #03060a;
  font-family: var(--font-anzeige); font-stretch: 105%; font-weight: 450; color: var(--led);
  font-variant-numeric: tabular-nums lining-nums;
}
.led {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; padding: 3.1cqw 3.2cqw 1.6cqw;
  text-shadow: 0 0 .45cqw rgba(255,150,40,.7), 0 0 1.5cqw rgba(255,110,20,.35);
}
.led p, .led h1, .led table { margin: 0; }
.head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.2cqw; padding-bottom: 1.8cqw; border-bottom: .18cqw solid rgba(255,179,71,.28); }
.gleis { display: flex; align-items: baseline; gap: 1.2cqw; color: var(--led-glut); }
.gleis span { font-size: 2.2cqw; font-stretch: 112%; color: var(--led); }
.gleis b { font-size: 5.4cqw; font-weight: 600; line-height: .9; }
.title { font-size: 2.2cqw; font-stretch: 114%; font-weight: 300; color: var(--stahl); text-shadow: none; }
.clock { font-size: 4.2cqw; font-stretch: 92%; font-weight: 400; line-height: 1; }
.clock.tick time { --blink: 1; }

table.rows { width: 100%; border-collapse: collapse; table-layout: fixed; align-self: stretch; margin-top: 1.2cqw; }
.rows thead th { text-align: left; font-size: 1.25cqw; font-stretch: 110%; font-weight: 400; color: var(--stahl-dunkel); text-shadow: none; padding: 0 0 .6cqw; }
.rows th, .rows td { text-align: left; font-weight: inherit; padding: 0; vertical-align: middle; }
.c-zug { width: 12.5cqw; } .c-eta { width: 17cqw; } .c-gl { width: 6cqw; text-align: right !important; }
.rows tr.main td, .rows tr.main th { padding: 1.5cqw 0 1.9cqw; border-bottom: .12cqw solid rgba(255,179,71,.16); }
.rows tr.main .c-zug span { font-size: 2.5cqw; font-stretch: 92%; font-weight: 500; }
.rows h1 { font: inherit; display: grid; gap: .5cqw; }
.h1-a { font-size: 5.3cqw; font-stretch: 112%; font-weight: 400; line-height: 1; letter-spacing: .005em; }
.h1-b { font-size: 1.9cqw; font-stretch: 112%; font-weight: 300; color: var(--stahl); text-shadow: none; letter-spacing: .02em; }
.eta { font-size: 3.1cqw; font-stretch: 92%; font-weight: 600; color: var(--led-glut); text-shadow: 0 0 .5cqw rgba(255,100,10,.85), 0 0 1.8cqw rgba(255,90,0,.4); }
.c-gl span { font-size: 5cqw; font-weight: 500; }
.rows tr.st td, .rows tr.st th { height: 4.5cqw; font-size: 2.45cqw; font-stretch: 100%; font-weight: 350; }
.rows tr.st th { letter-spacing: .01em; }
.state { display: inline-block; min-width: 9ch; }
.state.is-wait { color: var(--stahl-dunkel); text-shadow: none; }
.state.is-run { color: var(--led); animation: blinken 1.1s steps(1) infinite; }
.state.is-ok { color: var(--led); }
@keyframes blinken { 50% { opacity: .25; } }
.rows tr.main.is-go .h1-a, .rows tr.main.is-go .eta { animation: blinken .7s steps(1) 6; }

.ticker { overflow: hidden; white-space: nowrap; border-top: .18cqw solid rgba(255,179,71,.28); padding-top: 1.4cqw; font-size: 2.1cqw; font-stretch: 100%; font-weight: 350; }
.ticker-track { display: inline-flex; will-change: transform; animation: lauftext 46s linear infinite; }
.ticker-text { padding-right: 2cqw; }
@keyframes lauftext { to { transform: translateX(-50%); } }

/* LED-Raster über allem: ergibt den Punktmatrix-Look, der Text darunter bleibt echter Text */
.led-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(2,4,7,.58) 70%);
  background-size: max(3px, .36cqw) max(3px, .36cqw);
}
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 28%, transparent 42%),
    radial-gradient(90% 70% at 85% 0%, rgba(150,185,255,.1), transparent 60%),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.4));
}

/* ------------------------------------------------------------------ Hochformat */
@media (max-aspect-ratio: 4/5) {
  :root {
    --ar: .5625; --board-ar: .8; --d: 10.6cqw;
    --sl: 3.75%; --st: 3%; --sw: 92.5%; --sh: 94%;
    --vpx: 48.5%; --vpy: 61%;
  }
  .board-wrap { --bw: min(94vw, calc((100svh - 320px) * var(--board-ar))); --bwx: max(var(--bw), 290px); width: var(--bwx); }
  /* Seile weiter innen, damit sie rechts am Logo vorbeilaufen (Logo endet bei rund 112 px vom linken Rand) */
  .c1 { left: max(30%, calc(132px - (100vw - var(--bwx)) / 2)); }
  .c2 { right: max(30%, calc(132px - (100vw - var(--bwx)) / 2)); }
  /* Hochformat: Tafel und Fuß stehen untereinander statt übereinander, bei wenig Höhe scrollt die Seite */
  .stage { display: flex; flex-direction: column; }
  main { position: relative; inset: auto; flex: 1; padding-top: 84px; padding-bottom: 28px; }
  .top-note { display: none; }
  .foot { position: relative; inset: auto; flex-direction: column; align-items: flex-start; gap: 6px; }
  .foot .lead { display: none; }
  .about { margin-top: 0; }
  .contact { column-gap: 16px; }
  .foot nav { gap: 24px; }
  .led { grid-template-rows: auto auto 1fr auto; padding: 4.6cqw 5cqw 2.4cqw; }
  .gleis span { font-size: 4cqw; } .gleis b { font-size: 9.5cqw; }
  .title { font-size: 3.8cqw; } .clock { font-size: 7cqw; }
  .head { padding-bottom: 3cqw; gap: 3cqw; grid-template-columns: auto 1fr auto; }
  .head .title { display: none; }
  .head .clock { justify-self: end; grid-column: 3; }
  .rows thead { display: none; }
  .rows, .rows tbody { display: block; }
  .rows tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 3cqw; }
  .rows tr.main { grid-template-columns: 1fr auto; grid-template-areas: "zug gl" "msg msg" "eta eta"; padding: 3cqw 0 3.6cqw; border-bottom: .2cqw solid rgba(255,179,71,.18); }
  .rows tr.main td, .rows tr.main th { padding: 0; border: 0; }
  .rows tr.main .c-zug { grid-area: zug; width: auto; } .rows tr.main .c-msg { grid-area: msg; margin: 2.4cqw 0 2.8cqw; }
  .rows tr.main .c-eta { grid-area: eta; width: auto; } .rows tr.main .c-gl { grid-area: gl; width: auto; }
  .rows tr.main .c-zug span { font-size: 4.2cqw; } .c-gl span { font-size: 7cqw; }
  .h1-a { font-size: 10.6cqw; line-height: 1.02; } .h1-b { font-size: 3.7cqw; }
  .eta { font-size: 6.4cqw; }
  .rows tr.st { grid-template-columns: 1fr auto; padding: 1.7cqw 0; }
  .rows tr.st .c-zug, .rows tr.st .c-gl { display: none; }
  .rows tr.st .c-msg, .rows tr.st .c-eta { height: auto; font-size: 4cqw; width: auto; }
  .state { min-width: 8ch; text-align: right; }
  .ticker { font-size: 3.7cqw; padding-top: 2.2cqw; }
}

/* kleine Querformate (Handy quer, schmale Fenster) */
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
  .foot .about { display: none; }
  main { padding-bottom: 96px; }
  .board-wrap { --bw: min(86vw, calc((100svh - 190px) * var(--board-ar))); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plate-box { transform: translate(-50%, -50%) scale(1.04); }
  .tilt { transform: none; }
  .ticker { white-space: normal; }
  .ticker-track { display: block; }
  .ticker-text { white-space: normal; }
}