/* Uhrschnell: the Reise through Vienna, a click-through simulator and the live board. */
@font-face {
  font-family: "Uhrschnell Pixel";
  src: url("/fonts/uhrschnell-pixel-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Three widths: S under 640px, M 640–1023px, L from 1024px. Type and rhythm are the site-wide steps
   (--fs-*, --layout-gutter, --section, --pad in /design/tokens.css); pixel faces stay on whole
   multiples of 8px. Inside the device the app's own sizes apply. Page-only tokens follow. */
.uhrschnell-page {
  --ink: #1c3331;
  --parchment: #fff3d6;
  --bevel: #d6c29a;
  --font-pixel: "Uhrschnell Pixel", "Pixelify Sans", var(--font-ui);
  --stage-gap: 1.5rem;
}
@media (min-width: 640px) {
  .uhrschnell-page { --stage-gap: 2rem; }
}
@media (min-width: 1024px) {
  .uhrschnell-page { --stage-gap: 3rem; }
}

/* Compact opening: the shared Vienna scene as the panorama band (/components/panorama/parallax.css).
   S uses the authored mobile crops, bottom-registered as in the shared scene. From M the wide band frames
   the skyline with the Stephansdom and the Wienerwald (34% down the picture) instead of the balustrade at
   the bottom edge; the wordmark stands on the light hills and roofs. All desktop layers share one aspect
   ratio, so they stay registered, and the shared pan keeps the cathedral's towers behind the header once the
   band has scrolled away. */
@media (min-width: 640px) {
  .uhrschnell-page .panorama { --panorama-position: center 34%; }
}

.uhrschnell-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.uhrschnell-page .us-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.uhrschnell-page .us-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: var(--icon-fill, none);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
}

/* Store actions, the text button, the section head and the closing band: /design/components.css. */

/* The live stage starts right at the band edge; its own padding sets the distance to the headline. */
.uhrschnell-page main { padding-top: 0; }

/* Wien live: on S head, Reise and device stack, and Reise and device share one block so the line can stay
   under the header while the device is read (lok.css). From M the device column stands beside head and Reise,
   for every device and both Duo postures. It is the taller column, so it does not stand still; instead the
   device is sized to show whole once the stage is scrolled to the top (simulator.css).
   M: a 280px column; the Duo (data-wide) takes all the width the Reise can spare down to the line's own
   minimum (280px, as on a 320px phone, still without sideways scrolling).
   L: the Reise never drops below 600px (606 with its frame), so it always runs at scale 3 with names. The
   device column takes the rest up to the share it had before (at least 30rem, a 1 : 1.55 split on wide
   screens): from 1024px it starts at 280px with the two-row bar, reaches 30rem at about 1230px and switches
   to the one-row bar there. The gap gives up to 6px near 1024px so the column starts at a full 280px. The Duo
   takes everything beside the 606px Reise. */
.uhrschnell-page .us-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage";
  column-gap: var(--stage-gap);
  padding-block: 1.5rem 0;
}
.uhrschnell-page .us-live-grid { grid-area: stage; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.uhrschnell-page .us-live-head { grid-area: head; margin-bottom: 1.5rem; }
.uhrschnell-page .us-live-head h1 {
  margin: 0;
  max-width: 14ch;
  font-size: var(--fs-title);
  line-height: 1.1;
  color: var(--text);
}
.uhrschnell-page .us-lead { margin: 1rem 0 0; max-width: 54ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }
.uhrschnell-page .us-store-top { margin-top: 1.5rem; }
.uhrschnell-page .us-reise { grid-area: reise; }
.uhrschnell-page .us-sim { grid-area: sim; }
@media (min-width: 640px) {
  .uhrschnell-page :is(.us-reise, .us-sim) { align-self: start; }
  .uhrschnell-page .us-live {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "head sim" "reise sim";
    grid-template-rows: auto 1fr;
    padding-top: 2rem;
  }
  .uhrschnell-page .us-live-grid { display: contents; }
  .uhrschnell-page .us-live[data-wide="true"] { grid-template-columns: minmax(0, 1fr) max(280px, 100% - var(--stage-gap) - 280px); }
}
/* M: Live shares the stage half and half with head and Reise (336px each at 768px), so the monitor's destination
   column holds long stop names; L keeps the device column, beside the 606px Reise. */
@media (min-width: 640px) and (max-width: 1023px) {
  .uhrschnell-page .us-live[data-wide="live"] { grid-template-columns: minmax(0, 1fr) max(280px, (100% - var(--stage-gap)) / 2); }
}
@media (min-width: 1024px) {
  .uhrschnell-page .us-live {
    --us-live-gap: clamp(2rem, 100% - 886px, 3rem);
    column-gap: var(--us-live-gap);
    grid-template-columns: minmax(0, 1fr) min(100% - var(--us-live-gap) - 606px, max(30rem, (100% - var(--us-live-gap)) / 2.55));
    padding-top: 2.5rem;
  }
  .uhrschnell-page .us-live[data-wide="true"] { grid-template-columns: minmax(0, 1fr) calc(100% - var(--us-live-gap) - 606px); }
  .uhrschnell-page .us-live-head { margin-bottom: 2rem; }
}

/* Every section opens with the shared section head (.section-head) and is separated by --section
   (64 · 80 · 96px). */
.uhrschnell-page :is(.us-next, .us-depot, .us-route) { padding-block: var(--section) 0; }
.uhrschnell-page .section-head .us-hint { font-size: var(--fs-small); color: var(--text-secondary); }

/* Neu in Version 2.0.1: a passenger display in the Nacht palette. The Pixel-Lok leads across the full width
   (tag, title, one sentence, the link to the depot and the loco-menu action), the ten rows follow: one column
   with the tag above the title on S, two columns from M (ten rows, no empty cell). The title stands beside
   its tag only once a column has room for it (display from 900px), so titles stay on one line at 768px.
   On S the display shows the lead and three rows until "Alle 13 Neuerungen" (page.js); without JavaScript
   every row shows. */
.uhrschnell-page .us-display {
  --us-display-pad: 1rem;
  --us-display-rule: #3a4b5c;
  container: display / inline-size;
  background: #0e1620;
  color: #eef2f5;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-display-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem var(--us-display-pad);
  background: #18232f;
  border-bottom: 3px solid #ffd24a;
  color: #ffd24a;
  font: 500 var(--fs-tag)/1.25 var(--font-pixel);
  letter-spacing: .04em;
}
.uhrschnell-page .us-display-list { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.uhrschnell-page .us-display-list > li {
  min-width: 0;
  border-bottom: 1px solid var(--us-display-rule);
}
.uhrschnell-page .us-display-list > li:last-child { border-bottom: 0; }
.uhrschnell-page .us-display-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: .5rem;
  padding: 1rem var(--us-display-pad) 1.125rem;
}
.uhrschnell-page .us-display-lead > * { min-width: 0; max-width: 100%; }
.uhrschnell-page .us-display-list > li.us-display-lead { border-bottom: 3px solid var(--us-display-rule); }
.uhrschnell-page .us-display-lead h3 { margin: 0; font: 800 var(--fs-h3)/1.25 var(--font-ui); color: #eef2f5; letter-spacing: -.01em; }
.uhrschnell-page .us-display-lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .25rem; }
.uhrschnell-page .us-display-lead .us-display-action { margin-top: 0; }
.uhrschnell-page .us-display-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: #ffd24a;
  font: 750 var(--fs-body)/1.3 var(--font-ui);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.uhrschnell-page .us-display-link:hover { text-decoration-thickness: 3px; }
.uhrschnell-page .us-display-link:focus-visible { outline: 3px solid #ffd24a; outline-offset: 3px; }
.uhrschnell-page .us-display-link .us-icon { width: 1.1rem; height: 1.1rem; }
.uhrschnell-page .us-display-list details { height: 100%; }
.uhrschnell-page .us-display-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .375rem .75rem;
  min-height: 66px;
  padding: .65rem var(--us-display-pad);
  list-style: none;
  cursor: pointer;
}
.uhrschnell-page .us-display-list summary::-webkit-details-marker { display: none; }
.uhrschnell-page .us-display-list summary:hover { background: #18232f; }
.uhrschnell-page .us-display-list summary:focus-visible { outline: 3px solid #ffd24a; outline-offset: -3px; }
.uhrschnell-page .us-display-list summary > .us-icon { display: none; }
.uhrschnell-page .us-display-list summary::after { content: ""; grid-column: 2; grid-row: 1 / 3; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease-out; }
.uhrschnell-page .us-display-list details[open] summary::after { transform: rotate(225deg); }
.uhrschnell-page .us-display-list summary .us-feature-tag { grid-column: 1; grid-row: 1; }
.uhrschnell-page .us-display-list summary h3 { grid-column: 1; grid-row: 2; margin: 0; font: 700 var(--fs-body)/1.3 var(--font-ui); color: #eef2f5; }
.uhrschnell-page .us-feature-body { padding: 0 var(--us-display-pad) .9rem; }
.uhrschnell-page .us-display-list p { margin: 0; max-width: min(64ch, 100%); font-size: var(--fs-body); line-height: 1.6; color: #bcc9d4; }
.uhrschnell-page .us-feature-tag {
  justify-self: start;
  display: inline-flex;
  justify-content: center;
  min-width: 5.25rem;
  max-width: 100%;
  padding: .2rem .45rem .25rem;
  border: 2px solid #ffd24a;
  color: #ffd24a;
  font: 500 var(--fs-tag)/1.15 var(--font-pixel);
  letter-spacing: .03em;
  white-space: nowrap;
}
/* "Alle 13 Neuerungen": only on S, and only once the script has collapsed the list. */
.uhrschnell-page .us-display-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 52px;
  padding: .75rem var(--us-display-pad);
  background: none;
  color: #ffd24a;
  border: 0;
  border-top: 1px solid var(--us-display-rule);
  font: 800 var(--fs-body)/1.3 var(--font-ui);
  cursor: pointer;
}
.uhrschnell-page .us-display-more::after { content: ""; width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.uhrschnell-page .us-display-more[aria-expanded="true"]::after { margin-top: .25rem; transform: rotate(225deg); }
.uhrschnell-page .us-display-more:hover { background: #18232f; }
.uhrschnell-page .us-display-more:focus-visible { outline: 3px solid #ffd24a; outline-offset: -3px; }
.uhrschnell-page .us-display-more[hidden] { display: none; }
@media (max-width: 639px) {
  .uhrschnell-page .us-display[data-collapsed] .us-display-list > li:nth-child(n + 5) { display: none; }
  .uhrschnell-page .us-display[data-collapsed] .us-display-list > li:nth-child(4) { border-bottom: 0; }
}
@media (min-width: 640px) {
  .uhrschnell-page .us-display { --us-display-pad: 1.5rem; }
  .uhrschnell-page .us-display-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uhrschnell-page .us-display-lead { grid-column: 1 / -1; padding-block: 1.25rem 1.375rem; }
  .uhrschnell-page .us-display-list > li:nth-child(even) { border-right: 1px solid var(--us-display-rule); }
  .uhrschnell-page .us-display-list > li:nth-last-child(2) { border-bottom: 0; }
  .uhrschnell-page .us-display-more { display: none; }
}
@container display (min-width: 900px) {
  .uhrschnell-page .us-display-list summary { grid-template-columns: 6.25rem minmax(0, 1fr) 1rem; }
  .uhrschnell-page .us-display-list summary h3 { grid-column: 2; grid-row: 1; }
  .uhrschnell-page .us-display-list summary::after { grid-column: 3; grid-row: 1; }
}
.uhrschnell-page .us-display-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .7rem;
  padding: .4rem .7rem;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--parchment);
  box-shadow: 3px 3px 0 #000;
  font: 750 var(--fs-small)/1.2 var(--font-ui);
  cursor: pointer;
  transition: background-color .16s ease-out, transform .16s ease-out;
}
.uhrschnell-page .us-display-action:hover { background: #ffd24a; border-color: #ffd24a; transform: translateY(-2px); }
.uhrschnell-page .us-display-action:focus-visible { outline: 3px solid #ffd24a; outline-offset: 3px; }
.uhrschnell-page .us-display-action .us-icon { width: 1.1rem; height: 1.1rem; }

/* Line badges keep the original Wiener Linien colour pairs. */
.uhrschnell-page .us-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  padding: .1rem .4rem;
  border-radius: 2px;
  background: var(--line-bg, #031f7c);
  color: var(--line-fg, #ffffff);
  font: 750 .9375rem/1.25 var(--font-ui);
  flex: none;
  white-space: nowrap;
}

/* Route: head above the planner; from L beside it (5 : 7). */
.uhrschnell-page .us-route { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .uhrschnell-page .us-route { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; }
  .uhrschnell-page .us-route > .section-head { margin-bottom: 0; }
}
.uhrschnell-page .web-routes {
  padding: var(--pad);
  background: var(--surface-card);
  border-top: 4px solid var(--action);
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}
.uhrschnell-page .web-route-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.uhrschnell-page .web-route-fields > div { min-width: 0; }
.uhrschnell-page .us-route .us-label { display: block; margin-bottom: .4rem; font: 750 1rem/1.4 var(--font-ui); }
.uhrschnell-page .us-route .us-field {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 .85rem;
  background: var(--surface);
  border: 2px solid var(--control-border);
}
.uhrschnell-page .us-route .us-field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page .us-route .us-field input {
  flex: 1;
  min-width: 0;
  padding: .7rem 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-body)/1.3 var(--font-ui);
}
.uhrschnell-page .us-route .us-field input:focus-visible { outline: none; }
.uhrschnell-page .us-route .us-field input::placeholder { color: var(--text-secondary); opacity: 1; }
.uhrschnell-page .us-route .us-field input[aria-invalid="true"] { text-decoration: underline wavy #c62828; text-underline-offset: 4px; }
.uhrschnell-page .us-route-dot { width: 12px; height: 12px; flex: none; border: 3px solid #34a853; border-radius: 50%; }
.uhrschnell-page .us-route-dot-to { border-color: #ea4336; border-radius: 0; }
.uhrschnell-page .web-routes .us-hint { margin: .4rem 0 0; font-size: var(--fs-small); line-height: 1.8; color: var(--text-secondary); }
.uhrschnell-page .web-routes .us-hint:empty { display: none; }
.uhrschnell-page .us-route .us-results { display: flex; flex-direction: column; margin-top: .4rem; border: 2px solid var(--control-border); background: var(--surface-card); }
.uhrschnell-page .us-route .us-results:empty { display: none; }
.uhrschnell-page .us-route .us-result {
  min-height: 44px;
  padding: .6rem .85rem;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--separator);
  font: 650 1rem/1.35 var(--font-ui);
  cursor: pointer;
}
.uhrschnell-page .us-route .us-result:last-child { border-bottom: 0; }
.uhrschnell-page .us-route .us-result:hover { background: var(--accent-tint); }
.uhrschnell-page .us-route-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.uhrschnell-page .us-action {
  min-height: 48px;
  padding: .75rem 1.25rem;
  background: var(--action);
  color: var(--on-action);
  border: 0;
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  font: 750 1rem/1.2 var(--font-ui);
  hyphens: auto;
  cursor: pointer;
}
.uhrschnell-page .us-action:hover { background: var(--action-hover); }
.uhrschnell-page .us-action:disabled { opacity: .7; cursor: progress; }
.uhrschnell-page .us-swap {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 48px;
  padding: 0;
  background: var(--surface-card);
  color: var(--text);
  border: 2px solid var(--control-border);
  cursor: pointer;
}
.uhrschnell-page .us-swap:hover { background: var(--surface-subtle); }
.uhrschnell-page .us-route-status { margin: 1rem 0 0; font-weight: 700; }
.uhrschnell-page .us-route-status:empty { display: none; }
.uhrschnell-page .us-route-card {
  margin-top: 1rem;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--surface);
  border: 2px solid var(--separator);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-route-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.uhrschnell-page .us-route-head h3 { margin: 0; font: 500 1.5rem/1.2 var(--font-pixel); color: var(--text); }
.uhrschnell-page .us-route-meta { margin: 0; padding: .15rem .55rem; background: var(--surface-subtle); font-size: var(--fs-small); font-weight: 750; }
.uhrschnell-page .us-route-strip { display: flex; gap: 3px; height: 24px; margin: .85rem 0 .65rem; }
.uhrschnell-page .us-route-strip > span {
  flex-basis: 0;
  min-width: 20px;
  overflow: hidden;
  background: var(--line-bg);
  color: var(--line-fg);
  font: 750 .875rem/24px var(--font-ui);
  text-align: center;
  white-space: nowrap;
}
.uhrschnell-page .us-route-strip > span.is-walk { background: repeating-linear-gradient(90deg, #8e8e93 0 5px, transparent 5px 9px) center / 100% 4px no-repeat; }
.uhrschnell-page .us-legs { list-style: none; margin: 0; padding: 0; }
.uhrschnell-page .us-leg { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--separator); }
.uhrschnell-page .us-leg:first-child { border-top: 0; }
.uhrschnell-page .us-leg-time { font-variant-numeric: tabular-nums; }
.uhrschnell-page .us-leg-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.uhrschnell-page .us-leg .us-hint { margin: .15rem 0 0; }
.uhrschnell-page .us-legs .us-line { font-size: var(--fs-small); }
.uhrschnell-page .us-line.is-walk { background: #f0f0f2; color: #3c3c43; box-shadow: inset 0 0 0 1px #8e8e93; }

/* Download: the last stop, in the shared closing band. */
.uhrschnell-page main > .back { margin-top: 2rem; }

@media (max-width: 639px) {
  .uhrschnell-page .web-route-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .uhrschnell-page .us-display-action { transition: none; }
  .uhrschnell-page .us-display-action:hover { transform: none; }
}
@media (forced-colors: active) {
  .uhrschnell-page .us-display-action { box-shadow: none; border-color: ButtonText; }
}