/* FGI Renderer – Standarddesign Fahrgastinformation (VDV 713-3)
   Canvas is always 1920x1080 logical px; scaled by #stage transform for preview. */

/* DB Neo Screen (licensed – only for DB-related projects, see fonts/DB-Type-Lizenz.pdf).
   If the files are missing the browser falls back to Roboto ("FGI Sans"). */
@font-face {
  font-family: "DB Neo Screen Sans";
  src: url("fonts/DBNeoScreenSansVF.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 50% 100%;
}
@font-face {
  font-family: "DB Neo Screen Head";
  src: url("fonts/DBNeoScreenHeadVF.woff2") format("woff2");
  font-weight: 200 900;
}
@font-face {
  font-family: "FGI Sans";
  src: url("fonts/Roboto-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
}

:root {
  /* Theme variables are overridden by themes.js */
  --c-head: #282d37;          /* Fahrtkopf background */
  --c-head-fg: #ffffff;
  --c-head-accent: rgba(255,255,255,0.08);
  --c-bg: #ffffff;
  --c-panel: #e9edf1;         /* Nächster-Halt panel */
  --c-text: #282d37;
  --c-muted: #646973;
  --c-rule: #d7dadf;
  --c-line: #c3c6cb;          /* Perlschnur line */
  --c-accent: #f0b323;        /* current position marker */
  --c-ok: #3c8c1e;            /* on time / small delay */
  --c-late: #ec0016;          /* large delay / cancelled */
  --c-pill-bg: #f7a823;
  --c-pill-fg: #ffffff;
  --c-info: #ffcc00;
  --c-logo-rule: #ec0016;
  --font: "DB Neo Screen Sans", "FGI Sans", "Roboto", sans-serif;
  --font-head: "DB Neo Screen Head", "FGI Sans", "Roboto Condensed", sans-serif;
  --head-stretch: 100%;
}

html, body { margin: 0; padding: 0; background: #000; }
body { font-family: var(--font); color: var(--c-text); -webkit-font-smoothing: antialiased; }

#stage {
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
  background: var(--c-bg); transform-origin: 0 0;
  font-variant-numeric: tabular-nums;
}
#stage * { box-sizing: border-box; }

/* ---------- Fahrtkopf (head) ---------- */
.head {
  position: absolute; left: 0; top: 0; width: 100%;
  background: var(--c-head); color: var(--c-head-fg); overflow: hidden;
}
.head .stripes {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(168deg, transparent 58%, var(--c-head-accent) 58.2%, var(--c-head-accent) 72%, transparent 72.2%),
    linear-gradient(168deg, transparent 76%, var(--c-head-accent) 76.2%, var(--c-head-accent) 86%, transparent 86.2%);
}
.head .clock {
  position: absolute; right: 44px; top: 22px; font-size: 44px; font-weight: 400; letter-spacing: 1px;
}
.head .clock .colon { display: inline-block; width: 0.32em; text-align: center; }
.head .date { position: absolute; right: 190px; top: 30px; font-size: 32px; opacity: .9; }

.pill {
  display: inline-block; border-radius: 999px; padding: 0 0.55em; line-height: 1.35em;
  font-weight: 700; background: var(--c-pill-bg); color: var(--c-pill-fg); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* big variant (Im Halt / Endhalt) */
.head .big { position: absolute; left: 46px; top: 0; }
.head .big .pill { font-size: 44px; margin-top: 88px; }
.head .big .dest {
  font-family: var(--font-head); font-stretch: var(--head-stretch); font-weight: 700;
  font-size: 150px; line-height: 1.0; margin-top: 10px; white-space: nowrap; letter-spacing: -0.5px;
}
.head .big .via { font-size: 40px; margin-top: 6px; opacity: .9; }
/* small variant (Fahrt) */
.head .small { position: absolute; left: 46px; top: 0; height: 96px; display: flex; align-items: center; gap: 28px; }
.head .small .pill { font-size: 36px; }
.head .small .dest { font-size: 42px; font-weight: 700; white-space: nowrap; }
.head .small .arrow { opacity: .7; font-size: 34px; }

/* ---------- Body ---------- */
.body { position: absolute; left: 0; width: 100%; bottom: 0; background: var(--c-bg); overflow: hidden; }

.panel { position: relative; background: var(--c-panel); width: 100%; overflow: hidden; }
.panel .lbl { position: absolute; font-size: 34px; color: var(--c-muted); }
.panel .name { position: absolute; font-weight: 700; white-space: nowrap; }
.panel .times { position: absolute; right: 46px; white-space: nowrap; }
.panel .exit { position: absolute; right: 46px; font-size: 40px; font-weight: 700; }
.panel .exit .sep { color: var(--c-line); margin: 0 10px; }
.panel .platform { position: absolute; right: 46px; font-weight: 700; }

.t-plan { font-weight: 400; }
.t-rt { font-weight: 700; margin-left: 0.4em; }
.ok { color: var(--c-ok); }
.late { color: var(--c-late); }
.cancel { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 3px; }
.muted { color: var(--c-muted); }

.info { position: absolute; left: 0; width: 100%; overflow: hidden; }
.layer { position: absolute; inset: 0; }

/* ---------- Perlschnur ---------- */
.ps { position: absolute; left: 0; top: 0; width: 100%; }
.ps .cols { position: absolute; left: 0; width: 100%; font-size: 30px; color: var(--c-muted); }
.ps .cols span { position: absolute; }
.ps .row { position: absolute; left: 0; width: 100%; white-space: nowrap; font-size: 46px; }
.ps .row > span { position: absolute; }
.ps .row .c-plan { left: 70px; }
.ps .row .c-rt { left: 222px; font-weight: 700; }
.ps .row .c-name { left: 390px; }
.ps .row .c-cd, .ps .row .c-dep { right: 46px; text-align: right; }
.ps .row.cur { font-weight: 700; }
.ps .row.cur .c-name { font-size: 46px; }
.ps .row .rule { position: absolute; left: 60px; right: 46px; bottom: 0; border-bottom: 2px solid var(--c-rule); }
.ps .row.request .c-name::after { content: ""; }
.ps .req-ico { display: inline-block; vertical-align: -4px; margin-left: 14px; }
.ps .row.more { color: var(--c-muted); font-size: 32px; }
.ps .row.more .c-name { left: 70px; }
.ps .vline { position: absolute; left: 38px; width: 6px; background: var(--c-line); }
.ps .vline.done { background: var(--c-accent); }
.ps .vline.dashed { background: repeating-linear-gradient(180deg, var(--c-line) 0 10px, transparent 10px 20px); }
.ps .mark { position: absolute; left: 41px; width: 0; height: 0; }
.ps .mark .dot { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 5px solid var(--c-line); background: var(--c-bg); }
.ps .mark.cur .dot { left: -16px; top: -16px; width: 32px; height: 32px; border: 7px solid var(--c-accent); background: var(--c-bg); }
.ps .mark.cur .dot.filled { background: var(--c-accent); }
.ps .mark.cancel .dot { border-color: var(--c-late); background: var(--c-late); }
.ps .mark.cancel .x { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; line-height: 24px; }
.ps .mark.add .dot { border-color: var(--c-ok); }
.scrollbar { position: absolute; right: 14px; width: 8px; border-radius: 4px; background: #9aa0a8; }
.ps .shadow { position: absolute; left: 0; width: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0)); }

/* ---------- Text panels ---------- */
.textpanel { position: absolute; left: 46px; right: 46px; top: 0; }
.textpanel h1 { margin: 0; font-size: 50px; font-weight: 700; }
.textpanel h1 .ico { display: inline-block; vertical-align: -3px; margin-right: 18px; }
.textpanel p { margin: 12px 0 0; font-size: 38px; line-height: 1.35; max-width: 1300px; }
.textpanel .rule { width: 110px; height: 8px; background: var(--c-logo-rule); margin-top: 26px; }
.logo { position: absolute; right: 60px; display: flex; align-items: center; justify-content: center; }
.logo img, .logo svg { max-height: 100%; max-width: 100%; }
.logo .placeholder { font-size: 40px; font-weight: 700; color: var(--c-head); text-align: center; line-height: 1.05; }
.logo .placeholder small { display: block; font-size: 20px; font-weight: 400; color: var(--c-muted); margin-top: 6px; }

/* ---------- Composition (Zugteile) ---------- */
.comp { position: absolute; left: 0; top: 0; width: 100%; }
.comp .intro { position: absolute; left: 46px; top: 0; font-size: 34px; }
.comp .title { position: absolute; left: 46px; top: 0; font-size: 44px; font-weight: 700; display: flex; align-items: center; gap: 18px; }
.comp .sub { position: absolute; font-size: 30px; line-height: 1.3; }
.comp .sub .pill { font-size: 24px; vertical-align: 2px; }
.comp > svg { position: absolute; left: 0; overflow: visible; }
.comp .part-label { font-size: 26px; font-weight: 700; fill: var(--c-text); text-anchor: middle; }
.comp .legend { position: absolute; display: flex; align-items: center; gap: 12px; font-size: 30px; }

/* ---------- Connections (Abbringer) ---------- */
.conn { position: absolute; left: 0; top: 0; width: 100%; }
.conn .cols { position: absolute; left: 0; width: 100%; font-size: 28px; color: var(--c-muted); }
.conn .cols span { position: absolute; }
.conn .row { position: absolute; left: 0; width: 100%; font-size: 44px; white-space: nowrap; }
.conn .row > span { position: absolute; }
.conn .row .c-plan { left: 46px; }
.conn .row .c-rt { left: 180px; font-weight: 700; }
.conn .row .c-line { left: 340px; top: 8px; }
.conn .row .c-line .pill { font-size: 28px; min-width: 160px; text-align: center; }
.conn .row .c-dest { left: 560px; }
.conn .row .c-pf { right: 46px; text-align: right; }
.conn .row .c-pf .pill { font-size: 26px; background: var(--c-panel); color: var(--c-text); }
.conn .row .c-pf .pill.warn { background: var(--c-late); color: #fff; }
.conn .row .c-pf .pill.ok { background: var(--c-ok); color: #fff; }
.conn .row .rule { position: absolute; left: 46px; right: 46px; bottom: 0; border-bottom: 2px solid var(--c-rule); }
.conn .dots { position: absolute; left: 0; width: 100%; text-align: center; }
.conn .dots i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c-rule); margin: 0 6px; }
.conn .dots i.on { background: var(--c-text); }

/* ---------- Occupancy ---------- */
.occ .title { position: absolute; left: 46px; top: 0; font-size: 44px; font-weight: 700; display: flex; align-items: center; gap: 18px; }
.occ .legend { position: absolute; font-size: 30px; display: flex; align-items: center; gap: 12px; }

/* ---------- Notice (Baustelle / Störung / Service) ---------- */
.notice { position: absolute; left: 46px; right: 46px; top: 0; }
.notice .ntitle { display: flex; align-items: center; gap: 18px; font-size: 40px; font-weight: 700; }
.notice .date { font-size: 30px; color: var(--c-muted); font-weight: 400; margin-left: auto; }
.notice p { font-size: 36px; line-height: 1.35; margin: 14px 0 0; }
.notice .qr { position: absolute; left: 0; top: 0; }
.notice.warn { padding-left: 40px; border-left: 16px solid var(--c-info); }
.notice.disruption { padding-left: 40px; border-left: 16px solid var(--c-late); }

/* ---------- Request stop ---------- */
.req { position: absolute; left: 46px; right: 46px; top: 0; }
.req .box { display: inline-block; border: 5px solid var(--c-text); border-radius: 16px; padding: 14px 30px; font-size: 40px; font-weight: 700; }
.req .box.ok { background: var(--c-ok); color: #fff; border-color: var(--c-ok); }
.req .box.off { color: var(--c-muted); border-color: var(--c-rule); }
.req p { font-size: 34px; margin: 20px 0 0; }

/* ---------- Idle / not registered ---------- */
.idle { position: absolute; inset: 0; background: var(--c-bg); }
.idle .clock { position: absolute; right: 44px; top: 22px; font-size: 44px; color: var(--c-text); }
.idle .clock .colon { display: inline-block; width: .32em; text-align: center; }