/* Standard-Layout des Abfahrtsmonitors (Röther Design System).
   Dunkel ist Vorgabe, [data-scheme=light] tauscht nur Farben.
   Kunden passen das Aussehen in /kunde/kunde.css über diese Variablen an. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
    --grund: #0a182c;
    --kopf: #10233f;
    --kopf-text: #ffffff;
    --kopf-leise: #9cb0ce;
    --flaeche: transparent;
    --trenner: #163055;
    --text: #ffffff;
    --text-leise: #9cb0ce;
    --text-sehr-leise: #6a83ac;
    --akzent: #c01526;
    --ok: #3dbf63;
    --verspaetet: #e0a93b;
    --stark-verspaetet: #e56b78;
    --geplant: #9aa2ad;
    --linie-grund: #ffffff;
    --linie-text: #0a182c;
    --steig-rand: #3e5b8a;
    --band: #1e3e6e;
    --band-text: #ffffff;
    --fuss: #050e1b;
    --fuss-text: #9cb0ce;
    --schrift: 'IBM Plex Sans', sans-serif;
    --schrift-mono: 'IBM Plex Mono', monospace;
    --zeilenhoehe: 5rem;
}
[data-scheme=light] {
    --grund: #eceef1;
    --flaeche: #ffffff;
    --trenner: #dce0e5;
    --text: #0a182c;
    --text-leise: #4a525c;
    --text-sehr-leise: #6b747f;
    --ok: #1f8a3b;
    --verspaetet: #8f5f00;
    --stark-verspaetet: #c01526;
    --geplant: #6b747f;
    --linie-grund: #1e3e6e;
    --linie-text: #ffffff;
    --steig-rand: #c2c8d0;
    --band: #ffffff;
    --band-text: #0a182c;
    --fuss: #f6f7f9;
    --fuss-text: #4a525c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 1 rem = 16 px bei 1920 px Breite; Tafel skaliert mit dem Bildschirm */
html { font-size: calc(100vw / 120); }
body {
    margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--grund); color: var(--text); font-family: var(--schrift);
    --spalten: 1;
}
body.spalten-2 { --spalten: 2; }

/* Kopf */
.kopf {
    flex: 0 0 auto; height: 9.4rem; padding: 0 4rem; display: flex; align-items: center;
    justify-content: space-between; gap: 2rem; background: var(--kopf); color: var(--kopf-text);
    border-bottom: 0.25rem solid var(--akzent);
}
.kopf-ort { font-family: var(--schrift-mono); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kopf-leise); }
.kopf h1 { margin: 0.6rem 0 0; font-size: 3.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.kopf-zeit { text-align: right; font-family: var(--schrift-mono); flex-shrink: 0; }
.uhr { font-size: 5rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.datum { font-size: 1.25rem; color: var(--kopf-leise); margin-top: 0.5rem; }
.echtzeit-hinweis { flex: 0 0 auto; padding: 0.6rem 4rem; background: var(--verspaetet); color: #0a182c; font-size: 1.4rem; font-weight: 600; }

/* Tafel */
.inhalt { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 4rem; background: var(--flaeche); }
.tafel-kopf, .tafel {
    display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); column-gap: 2rem;
}
.tafel {
    flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow: hidden;
    grid-template-rows: repeat(var(--zeilen, 9), var(--zeilenhoehe)); grid-auto-flow: column; align-content: start;
}
.zeile { display: flex; align-items: center; gap: 2rem; height: var(--zeilenhoehe); min-width: 0; border-bottom: 1px solid var(--trenner); }
.kopfzeile {
    height: 3.5rem; font-family: var(--schrift-mono); font-size: 1.125rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sehr-leise); border-bottom-color: var(--steig-rand);
}
.kopfzeile .zeit, .kopfzeile .countdown, .kopfzeile .haltestelle { font: inherit; }

.zeitblock { flex: 0 0 10.6rem; min-width: 0; order: -1; }
.dfi-true .zeitblock { flex-basis: 16rem; order: 10; text-align: right; }
.dfi-left .zeitblock { flex-basis: 16rem; }
.dfi-false .countdown, .dfi-true .zeit, .dfi-left .zeit { display: none; }
/* Zweispaltig ist jede Spalte halb so breit: Linie und Zeitblock enger, damit Ziele seltener gekürzt werden */
.spalten-2 .zeile { gap: 1.5rem; }
.spalten-2 .linie { flex-basis: 9.5rem; }
.spalten-2.dfi-true .zeitblock, .spalten-2.dfi-left .zeitblock { flex-basis: 12rem; }
.spalten-2 .haltestelle { flex-basis: 9rem; }
.zeit { display: block; font-family: var(--schrift-mono); font-size: 2.125rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown { display: block; font-family: var(--schrift-mono); font-size: 2.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.status { display: block; font-family: var(--schrift-mono); font-size: 1.125rem; font-weight: 500; line-height: 1; margin-top: 0.5rem; }
.kopfzeile .status { display: none; }

.puenktlich .status { color: var(--ok); }
.verspaetet .status { color: var(--verspaetet); }
.stark-verspaetet .status, .entfaellt .status { color: var(--stark-verspaetet); }
.geplant .status { color: var(--geplant); }
.geplant .countdown { color: var(--text-leise); }
.entfaellt .zeit, .entfaellt .countdown { color: var(--geplant); text-decoration: line-through; }
.entfaellt .ziel { color: var(--geplant); }

.linie { flex: 0 0 14.4rem; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.linie .icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.nummer {
    display: inline-flex; align-items: center; justify-content: center; min-width: 6rem; height: 3.25rem; padding: 0 0.9rem;
    background: var(--linie-grund); color: var(--linie-text); border-radius: 3px; font-size: 1.875rem; font-weight: 600; white-space: nowrap;
}
.kopfzeile .linie { display: block; }
.kachel-bild { height: 3.25rem; }

.richtung { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ziel { font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unter { font-size: 1.25rem; line-height: 1.35; color: var(--text-leise); margin-top: 0.35rem; white-space: nowrap; overflow: hidden; }
.unter-text { display: inline-block; vertical-align: top; }
.unter-text.laeuft { padding-left: 100%; animation: laufen var(--dauer, 20s) linear infinite; }
.hinweistext { color: var(--verspaetet); }
.hinweistext::before {
    content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.4em; vertical-align: -0.15em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.haltestelle { flex: 0 0 22rem; min-width: 0; font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fussweg { display: block; font-size: 1.125rem; color: var(--text-leise); margin-top: 0.3rem; }
.steig { flex: 0 0 5rem; }
.steig-wert {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; height: 3.25rem; padding: 0 0.4rem;
    border: 2px solid var(--steig-rand); border-radius: 3px; font-family: var(--schrift-mono); font-size: 1.75rem; font-weight: 600;
}

.leer { grid-column: 1 / -1; grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; font-size: 2.25rem; color: var(--text-leise); }

/* Störungstafel über der Tafel (Kopf bleibt sichtbar) */
.stoerung {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;   /* top/right/bottom/left statt inset: läuft auch auf älteren Playern */ display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; padding: 4rem; text-align: center; background: var(--grund);
}
.stoerung-gross { font-size: 4rem; font-weight: 600; letter-spacing: -0.02em; }
.stoerung-klein { font-size: 2rem; color: var(--text-leise); }
.stoerung-code { position: absolute; right: 2rem; bottom: 1.5rem; font-family: var(--schrift-mono); font-size: 1rem; color: var(--text-sehr-leise); }

/* Laufband */
.laufband { flex: 0 0 4rem; display: flex; background: var(--band); color: var(--band-text); }
.laufband-marke {
    display: flex; align-items: center; padding: 0 1.5rem 0 4rem; background: var(--akzent); color: #ffffff;
    font-family: var(--schrift-mono); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.laufband-fenster { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; padding: 0 2rem; }
.laufband-text { white-space: nowrap; font-size: 1.5rem; font-weight: 500; }
.laufband-text.laeuft { padding-left: 100%; animation: laufen var(--dauer, 30s) linear infinite; }
@keyframes laufen { to { transform: translateX(-100%); } }

/* Fuß */
.fuss { flex: 0 0 5.6rem; display: flex; align-items: center; gap: 2.5rem; padding: 0 4rem; background: var(--fuss); color: var(--fuss-text); font-size: 1.125rem; }
.fuss-logo { max-height: 3.5rem; max-width: 14rem; }
.fuss-lizenz { flex: 1 1 auto; }
.fuss-lizenz a { color: inherit; }
.fuss-marke { font-family: var(--schrift-mono); color: var(--text-sehr-leise); }

/* Schmale Bildschirme (z. B. Webseite am Handy): eine Spalte, alles untereinander */
@media (max-width: 960px) {
    html { font-size: 10px; }
    body { height: auto; min-height: 100vh; overflow: auto; --spalten: 1 !important; }
    .kopf { height: auto; padding: 1.6rem; flex-wrap: wrap; }
    .kopf h1 { font-size: 3rem; }
    .uhr { font-size: 3.6rem; }
    .inhalt { padding: 0 1.6rem; }
    .tafel { grid-template-rows: none; grid-auto-flow: row; overflow: visible; }
    .tafel-kopf .kopfzeile ~ .kopfzeile { display: none; }
    .zeile { gap: 1rem; }
    .zeitblock, .dfi-true .zeitblock, .dfi-left .zeitblock { flex-basis: 10rem; }
    .countdown { font-size: 2.2rem; }
    .status { font-size: 1rem; }
    .linie { flex-basis: 6.6rem; }
    .linie .icon, .haltestelle { display: none; }
    .ziel { font-size: 2rem; }
    .steig { flex-basis: 4.2rem; }
    .laufband-marke { padding-left: 1.6rem; }
    .fuss { flex-wrap: wrap; height: auto; padding: 1.2rem 1.6rem; gap: 1.2rem; }
}