/*
 * Zugtracker — gemeinsames Stylesheet.
 *
 * Die Anmutung kommt aus dem, was in der Eisenbahn wirklich benutzt wird:
 * Fahrplanblätter, Laufwege, Betriebsstellenkürzel, gleich breite Ziffern.
 * Ruhig und sachlich, ohne Lokomotiv-Clipart und ohne Messing.
 *
 * Eine Datei für alle Seiten. Die Akzentfarbe kommt aus den Vereinsangaben und
 * wird von der Seite als `--akzent` gesetzt; alles andere steht hier.
 */

/* ── Schrift ───────────────────────────────────────────────────────────────
   Aus dem Paket, kein Verweis nach draußen: Die Verwaltung muss auch dann
   ordentlich aussehen, wenn der Webspace keine ausgehenden Verbindungen
   erlaubt — und niemand soll beim Aufruf einer Vereinsseite nebenbei bei
   einem Schriftanbieter erfasst werden.
   IBM Plex, SIL Open Font License, siehe schrift/LIZENZ.txt              */
@font-face { font-family:'Plex'; font-weight:400; font-display:swap;
  src:url('schrift/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212 }
@font-face { font-family:'Plex'; font-weight:400; font-display:swap;
  src:url('schrift/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020-20AB }
@font-face { font-family:'Plex'; font-weight:600; font-display:swap;
  src:url('schrift/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212 }
@font-face { font-family:'Plex'; font-weight:600; font-display:swap;
  src:url('schrift/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020-20AB }
@font-face { font-family:'PlexMono'; font-weight:400; font-display:swap;
  src:url('schrift/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212 }
@font-face { font-family:'PlexMono'; font-weight:400; font-display:swap;
  src:url('schrift/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020-20AB }

/* ── Farben ────────────────────────────────────────────────────────────────
   Die Neutralen sind nicht grau, sondern papierfarben mit einem Stich ins
   Grüne — dieselbe Familie wie die dunkle Leiste. Ein reines Grau wirkt
   beliebig; hier geht es um Fahrplan und Gleis, und das darf man sehen.

   `--akzent` setzt jeder Verein selbst. Er färbt Zustände und Wege, nicht die
   ganze Oberfläche — sonst müsste die Gestaltung mit jedem Farbton neu
   ausgehandelt werden.                                                     */
:root {
  --papier:      #f4f4ef;   /* Grundfläche der Seite */
  --blatt:       #fffefa;   /* Karten, Tabellen, alles Erhabene */
  --tinte:       #17201b;
  --leise:       #657068;
  --linie:       #cbd0c9;
  --linie-stark: #a8b1a7;
  --leiste:      #263a2d;   /* die dunkelgrüne Seitenleiste */
  --leiste-text: #e4e9e2;
  --gut:         #266b52;
  --gut-grund:   #e7f1eb;
  --warn:        #8a5a00;
  --schlecht:    #a94032;
  --schlecht-grund: #fbecea;

  --akzent:      #265c8b;   /* die Seite überschreibt das mit der Vereinsfarbe */
  --akzent-text: var(--akzent);
  --akzent-sanft:#dce9f2;

  --sans: 'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'PlexMono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --rund: 4px;              /* wenig Rundung: Fahrplan, nicht App-Kachel */
  --schatten: 0 1px 2px rgba(23,32,27,.06);
}

/*
 * Nachts. Wer am Vorabend einer Fahrt noch Halte einträgt, sitzt selten bei
 * Tageslicht.
 *
 * Die Leiste bleibt dunkel. Sie hell werden zu lassen wäre eine hübsche
 * Umkehrung, aber ihre Schrift ist auf dunklen Grund gerechnet — im Entwurf
 * stand sie dann in #e4e9e2 auf #e5ebdf, also unsichtbar. Eine Leiste, die in
 * beiden Fassungen dunkel bleibt, ist ruhiger und verträgt beide Zustände.
 *
 * `--akzent-text` ist eine aufgehellte Fassung der Vereinsfarbe: Der Ton ist
 * für weiße Flächen gewählt und als Schrift auf dunklem Grund oft zu dunkel.
 * Flächen behalten den echten Ton, dort steht weiße Schrift darauf.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-fassung="tag"]) {
    --papier:      #121714;
    --blatt:       #1b211d;
    --tinte:       #edf0e9;
    --leise:       #aeb9af;
    --linie:       #37423a;
    --linie-stark: #55625a;
    --leiste:      #0f1512;
    --leiste-text: #d5ddd4;
    --gut:         #74d0ad;
    --gut-grund:   #14251d;
    --warn:        #e0a72a;
    --schlecht:    #ff8979;
    --schlecht-grund: #2a1614;
    --akzent-text: color-mix(in srgb, var(--akzent) 45%, #cfe0ff);
    --akzent-sanft:#19364a;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-fassung="nacht"] {
  --papier:      #121714;
  --blatt:       #1b211d;
  --tinte:       #edf0e9;
  --leise:       #aeb9af;
  --linie:       #37423a;
  --linie-stark: #55625a;
  --leiste:      #0f1512;
  --leiste-text: #d5ddd4;
  --gut:         #74d0ad;
  --gut-grund:   #14251d;
  --warn:        #e0a72a;
  --schlecht:    #ff8979;
  --schlecht-grund: #2a1614;
  --akzent-text: color-mix(in srgb, var(--akzent) 45%, #cfe0ff);
  --akzent-sanft:#19364a;
  --schatten: 0 1px 2px rgba(0,0,0,.4);
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box }
html, body { margin:0 }
body { background:var(--papier); color:var(--tinte);
       font:15.5px/1.5 var(--sans); -webkit-font-smoothing:antialiased }
a { color:var(--akzent-text) }
:focus-visible { outline:2px solid var(--akzent-text); outline-offset:2px }
.mono, .zahl { font-family:var(--mono); font-variant-numeric:tabular-nums }

/* Breite Inhalte rollen in sich, nie die ganze Seite. */
.rollbar { overflow-x:auto; margin:0 -2px; padding:0 2px; scrollbar-width:thin }

/* ── Grundriss ───────────────────────────────────────────────────────────── */
.gestell { display:grid; grid-template-columns:15rem minmax(0,1fr); min-height:100vh }

.leiste { background:var(--leiste); color:var(--leiste-text);
          padding:1.6rem 1rem; display:flex; flex-direction:column; gap:1.6rem;
          position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto }
.leiste .marke { display:flex; align-items:center; gap:.6rem;
          font-weight:600; letter-spacing:.09em; font-size:.86rem;
          text-transform:uppercase; color:#fff; text-decoration:none }
.leiste .marke svg { flex:0 0 auto }
.leiste nav { display:grid; gap:2px }
.leiste .abteilung { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
          color:color-mix(in srgb, var(--leiste-text) 55%, transparent);
          margin:0 0 .5rem .75rem }
.leiste nav a { display:block; padding:.5rem .75rem; text-decoration:none;
          color:var(--leiste-text); border-left:3px solid transparent;
          font-size:.94rem; border-radius:0 var(--rund) var(--rund) 0 }
.leiste nav a:hover { background:#ffffff12 }
.leiste nav a.hier { background:#ffffff1c; border-left-color:#fff; color:#fff; font-weight:600 }
.leiste .fuss { margin-top:auto; font-size:.78rem; line-height:1.5;
          color:color-mix(in srgb, var(--leiste-text) 65%, transparent) }
.leiste .fuss a { color:inherit }

.hauptteil { display:flex; flex-direction:column; min-width:0 }
.kopfleiste { display:flex; align-items:center; justify-content:space-between; gap:1rem;
          padding:.8rem 1.6rem; border-bottom:1px solid var(--linie);
          background:var(--blatt); position:sticky; top:0; z-index:20 }
.pfad { font-size:.84rem; color:var(--leise) }
.pfad a { color:inherit; text-decoration:none }
.pfad a:hover { text-decoration:underline }
.pfad strong { color:var(--tinte); font-weight:600 }
.werkzeuge { display:flex; gap:.5rem; align-items:center }
.inhalt { padding:1.7rem 1.6rem 5rem; max-width:66rem; width:100%; min-width:0 }

@media (max-width:62rem) {
  .gestell { grid-template-columns:minmax(0,1fr) }
  .leiste { position:static; height:auto; flex-direction:row; align-items:center;
            flex-wrap:wrap; gap:.5rem 1.2rem; padding:.7rem 1rem }
  .leiste .abteilung, .leiste .fuss { display:none }
  .leiste nav { display:flex; flex-wrap:wrap; gap:.15rem }
  .leiste nav a { border-left:0; border-bottom:2px solid transparent; border-radius:var(--rund) }
  .leiste nav a.hier { border-left:0; border-bottom-color:#fff }
  .kopfleiste { padding:.7rem 1rem }
  .inhalt { padding:1.2rem 1rem 4rem }
}

/* ── Seitenkopf ──────────────────────────────────────────────────────────── */
.seitenkopf { display:flex; align-items:flex-start; justify-content:space-between;
          gap:1rem; flex-wrap:wrap; padding-bottom:1rem;
          border-bottom:2px solid var(--tinte); margin-bottom:1.4rem }
.brauen { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
          color:var(--leise); margin:0 0 .3rem }
h1 { font-size:2.3rem; line-height:1.05; margin:0; letter-spacing:-.025em;
     font-weight:400; text-wrap:balance }
.vorspann { color:var(--leise); margin:.45rem 0 0; max-width:46rem }
h2 { font-size:1.05rem; margin:0; letter-spacing:-.01em; font-weight:600 }

/* ── Fortschritt innerhalb einer Fahrt ─────────────────────────────────────
   Eine Fahrt vorzubereiten ist eine Schleife, keine Reihe: Halte eintragen,
   ausrichten, Unterwegsstellen suchen, wieder ausrichten. Diese Leiste steht
   deshalb über allen vier Seiten und zeigt, wo man ist und was fehlt.       */
.wegleiste { display:flex; gap:0; align-items:flex-start; margin:0 0 1.4rem;
          overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem }
.wegleiste::-webkit-scrollbar { display:none }
.wegleiste a { text-decoration:none; color:var(--leise); font-size:.86rem;
          display:grid; gap:.4rem; justify-items:start; padding-right:2.2rem;
          position:relative; white-space:nowrap }
.wegleiste a::after { content:''; position:absolute; left:.55rem; right:.4rem; top:.28rem;
          height:1px; background:var(--linie) }
.wegleiste a:last-child { padding-right:0 }
.wegleiste a:last-child::after { display:none }
.wegleiste .punkt { width:.66rem; height:.66rem; border-radius:50%;
          background:var(--blatt); border:2px solid var(--linie-stark); z-index:1 }
.wegleiste a.fertig .punkt { background:var(--gut); border-color:var(--gut) }
.wegleiste a.hier { color:var(--tinte); font-weight:600 }
.wegleiste a.hier .punkt { background:var(--akzent); border-color:var(--akzent);
          box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent) }

/* ── Flächen ─────────────────────────────────────────────────────────────── */
.tafel { background:var(--blatt); border:1px solid var(--linie);
         border-radius:var(--rund); box-shadow:var(--schatten);
         padding:1.2rem 1.25rem; margin-bottom:1.1rem; min-width:0 }
.tafelkopf { display:flex; align-items:baseline; justify-content:space-between;
         gap:1rem; flex-wrap:wrap; margin-bottom:.9rem }
.tafelkopf p { margin:.3rem 0 0; color:var(--leise); font-size:.9rem }

.zwischenzeile { display:flex; align-items:baseline; gap:.8rem; margin:1.6rem 0 .6rem }
.zwischenzeile span { color:var(--leise); font-size:.84rem }

.hinweis, .meldung, .fehler { padding:.7rem .95rem; margin-bottom:1.1rem;
         font-size:.93rem; border-left:3px solid; border-radius:0 var(--rund) var(--rund) 0 }
.hinweis { background:var(--akzent-sanft); border-color:var(--akzent); color:var(--tinte) }
.meldung { background:var(--gut-grund); border-color:var(--gut); color:var(--gut) }
.fehler  { background:var(--schlecht-grund); border-color:var(--schlecht); color:var(--schlecht) }

/* ── Bedienelemente ──────────────────────────────────────────────────────── */
label { display:block; margin:.9rem 0 .3rem; font-weight:600; font-size:.82rem;
        letter-spacing:.01em }
input, select, textarea { width:100%; padding:.5rem .65rem; font:inherit;
        border:1px solid var(--linie-stark); border-radius:var(--rund);
        background:var(--blatt); color:var(--tinte) }
input[type=date], input.zeit, input.koord, input.mono { font-family:var(--mono);
        font-variant-numeric:tabular-nums }
input::placeholder { color:var(--leise); opacity:.6 }

button, .knopf { display:inline-block; padding:.48rem .95rem; border:1px solid var(--linie-stark);
        border-radius:var(--rund); background:var(--blatt); color:var(--tinte);
        font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
        text-decoration:none; line-height:1.45 }
button:hover, .knopf:hover { border-color:var(--tinte) }
.knopf.wichtig, button.wichtig { background:var(--akzent); border-color:var(--akzent); color:#fff }
.knopf.wichtig:hover, button.wichtig:hover { filter:brightness(1.1); border-color:var(--akzent) }
.knopf.rot, button.rot { color:var(--schlecht); border-color:var(--schlecht) }
.knopf.rot:hover, button.rot:hover { background:var(--schlecht-grund) }
.knopfreihe { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:1rem }
.knopfreihe form { display:inline }

.reihe { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end }
.reihe > * { flex:1 1 9rem; min-width:0 }
.reihe .eng { flex:0 0 7rem }

/* ── Zeichen ─────────────────────────────────────────────────────────────── */
.marke-live, .plakette { display:inline-block; padding:.1rem .45rem; font-size:.68rem;
        font-weight:700; letter-spacing:.09em; text-transform:uppercase;
        border:1px solid; border-radius:2px; vertical-align:middle }
.marke-live { color:var(--schlecht); border-color:var(--schlecht) }
.kennung { font-family:var(--mono); font-size:.82rem; color:var(--leise);
        letter-spacing:.02em }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:.92rem }
th, td { text-align:left; padding:.5rem .45rem; border-bottom:1px solid var(--linie);
         vertical-align:middle }
thead th, tr:first-child th { font-size:.68rem; text-transform:uppercase;
         letter-spacing:.1em; color:var(--leise); font-weight:600;
         border-bottom:1px solid var(--linie-stark) }
tbody tr:last-child td { border-bottom:0 }

/* ── Fahrtenliste ────────────────────────────────────────────────────────── */
.liste { border-top:1px solid var(--linie) }
.fahrt { display:grid; align-items:center; gap:1rem; padding:.85rem .5rem;
         border-bottom:1px solid var(--linie); text-decoration:none; color:inherit;
         grid-template-columns:6.5rem 8.5rem minmax(8rem,1fr) minmax(10rem,1.2fr) 5rem 1rem }
.fahrt:hover { background:color-mix(in srgb, var(--akzent) 5%, transparent) }
.fahrt > * { min-width:0 }
.fahrt .datum { font-family:var(--mono); font-size:.88rem; white-space:nowrap }
.fahrt .zug { font-family:var(--mono); font-size:.94rem; white-space:nowrap }
.fahrt .zug small { display:block; font-size:.76rem; color:var(--leise); letter-spacing:.02em }
.fahrt .titel { font-weight:600 }
.fahrt .titel small { display:block; font-weight:400; font-size:.8rem; color:var(--leise) }
.fahrt .lauf { color:var(--leise); font-size:.9rem }
.fahrt .lauf b { color:var(--tinte); font-weight:400; padding:0 .15rem }
.fahrt .zahl { font-family:var(--mono); text-align:right; color:var(--leise) }
.fahrt .weiter { color:var(--leise); text-align:right; font-size:1.25rem; line-height:1;
         font-family:var(--mono) }
.fahrt:hover .weiter { color:var(--akzent-text) }
@media (max-width:56rem) {
  .fahrt { grid-template-columns:1fr auto; gap:.35rem .8rem; padding:.9rem .4rem }
  .fahrt .datum { grid-column:1; color:var(--leise) }
  .fahrt .zug   { grid-column:2; grid-row:1; text-align:right }
  .fahrt .titel { grid-column:1 / -1 }
  .fahrt .lauf  { grid-column:1 / -1 }
  .fahrt .zahl, .fahrt .weiter { display:none }
  .fahrt .marke-live { grid-column:1 / -1; justify-self:start }
}

/* ── Kennzahlen ──────────────────────────────────────────────────────────── */
.zahlen { display:flex; gap:1.6rem; flex-wrap:wrap; margin:0 0 1.4rem;
          font-family:var(--mono); font-size:.86rem; color:var(--leise) }
.zahlen b { color:var(--tinte); font-weight:600 }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important }
}