/* Die Arbeitsansicht von Agentur und Partner - im Kleid des Backends.
 *
 * DIESELBEN WERTE WIE IM BACKEND: marke.css bringt die echten Markenfarben
 * und die oertlichen Schriften mit; hier stehen nur die Formen dieser Seite.
 * Ein eigenes Farbschema waere eine zweite Marke.
 *
 * MOBIL ZUERST. Eine Agentur sieht auf ihr Tablett, ein Partner aufs Telefon;
 * der Schreibtisch ist der Sonderfall, nicht der Normalfall.
 */

:root {
  --grund: var(--lx-grund, #121212);
  --flaeche: var(--lx-flaeche, #161616);
  --flaeche2: var(--lx-flaeche-hoch, #1F1F1F);
  --text: var(--lx-text, #FFFFFF);
  --leise: var(--lx-text-leise, #DADADA);
  --linie: var(--lx-rahmen, #3A3129);
  --primaer: var(--lx-primaer, #C59B6C);
  --ziel: 44px;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.6 var(--lx-schrift, "Roboto", system-ui, sans-serif);
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
}

.kopf {
  /* Umbrechen statt ueberstehen: bei 390 px standen Name und Knopf sonst
     zwei Pixel ueber den Rand. */
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--a2) var(--a3);
  padding: var(--a3) var(--a4);
  background: #0d1013; border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf img { height: 22px; width: auto; display: block; }
.kopf .wer { margin-left: auto; color: var(--leise); font-size: .9rem; text-align: right; }
.kopf .knopf { min-height: 36px; }

main { padding: var(--a4); max-width: 60rem; margin: 0 auto; }

h1 { font-family: var(--lx-schrift-kopf, "Nunito", sans-serif); font-size: 1.4rem; margin: 0 0 var(--a2); }
h2 { font-family: var(--lx-schrift-kopf, "Nunito", sans-serif); font-size: 1.05rem; margin: 0 0 var(--a2); }

.leiste { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a3); }
.knopf {
  min-height: var(--ziel); padding: var(--a2) var(--a4);
  background: var(--flaeche2); color: var(--text);
  border: 1px solid var(--linie); border-radius: 4px;
  font: inherit; cursor: pointer;
}
.knopf:hover { border-color: var(--primaer); }
.knopf.aktiv { background: var(--primaer); color: #121212; border-color: var(--primaer); font-weight: 600; }
.knopf:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--primaer); outline-offset: 2px;
}

.suchzeile { margin-bottom: var(--a3); }
.suchzeile input {
  width: 100%; min-height: var(--ziel); padding: var(--a2) var(--a3);
  background: var(--flaeche2); color: var(--text);
  border: 1px solid var(--linie); border-radius: 4px; font: inherit;
}

.satz, .zahl, .leer { color: var(--leise); margin: 0 0 var(--a3); font-size: .95rem; }
.zahl { font-variant-numeric: tabular-nums; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px;
  padding: var(--a4); margin: 0 0 var(--a3);
}
.karte.fahrt { border-left: 3px solid var(--primaer); }

.fahrtkopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a2); }
.nummer {
  font-family: Consolas, monospace; font-size: 1rem; color: var(--primaer);
  background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--ziel);
  text-align: left;
}
.marke, .status {
  font-size: .8rem; padding: 1px .5rem; border: 1px solid var(--linie);
  border-radius: 999px; color: var(--leise);
}
.marke { color: var(--primaer); border-color: var(--primaer); }

.zeit { margin: 0 0 var(--a2); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.weg { margin: 0 0 var(--a2); }
.weg .ab, .weg .an {
  display: inline-block; min-width: 2rem; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--leise);
}
.fahrgast { margin: 0; color: var(--leise); }

.paare { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; gap: var(--a2) var(--a3); margin: 0; }
.paare dt { color: var(--leise); font-size: .9rem; }
.paare dd { margin: 0; overflow-wrap: anywhere; }

/* Gezeichnet mit Kaesten, nicht mit SVG: im Quelltext dieses Hauses steht
   keine Adresse - auch kein Namensraum. */
.wagenfeld {
  position: relative; width: 100%; height: 8rem; margin: var(--a2) 0;
  border: 1px solid var(--linie); border-radius: 4px; background: var(--grund);
}
.wagenpunkt {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  border-radius: 50%; transform: translate(-50%, -50%); background: var(--primaer);
}

.laedt { color: var(--leise); }

@media (min-width: 900px) {
  main { padding: var(--a5); }
  .paare { grid-template-columns: minmax(10rem, 25%) 1fr; }
}

/* Nur fuer Vorleseprogramme: die Ueberschrift benennt den Bereich, ohne den
   Bildschirm zu belegen - der Kopf sagt schon, wer hier ist. */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}