/* CHI Aviation Fleet - Fahrer-PWA.
   Design-System: bewusst kleine, feste Skalen statt Wildwuchs -
   Schriftgroessen 11/13/15/17, Radien 6/10/14, Abstaende in 4er-Schritten.
   Icons kommen per Unicode aus .fa-*::before (KEIN Font-Awesome geladen -
   haelt die PWA offline-faehig und ohne externe Requests). */

:root {
  --chi-black: #0a0a0a;
  --chi-red: #ce0538;
  --chi-red-dark: #a3042c;
  --chi-white: #ffffff;
  --chi-grey-100: #f9f9f9;
  --chi-grey-200: #efefef;
  --chi-grey-500: #767676;
  --chi-text: #1c1c1c;
  --chi-green: #1f9254;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Feste Skalen - siehe Kopfkommentar. */
  --fs-label: 11px;   /* Uppercase-Labels, Badges */
  --fs-small: 13px;   /* Sekundaertext, Hinweise */
  --fs-body: 15px;    /* Fliesstext, Listeneintraege */
  --fs-title: 17px;   /* Primaer-Buttons, Karten-Titel */
  --r-badge: 6px;
  --r-btn: 10px;
  --r-card: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--chi-grey-100);
  color: var(--chi-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* --- Icons (Unicode statt Font-Awesome, siehe Kopfkommentar) --- */
.fa { font-style: normal; }
.fa-check-circle::before { content: '✓'; font-weight: 700; }
.fa-times-circle::before { content: '✕'; font-weight: 700; }
.fa-check::before { content: '✓'; }
.fa-chevron-down::before { content: '▾'; }

/* --- Kopfzeile --- */
.chi-header {
  background: var(--chi-black);
  color: var(--chi-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--chi-red);
}

.chi-header img.chi-logo {
  height: 26px;
  display: block;
  flex-shrink: 0;
}

.chi-header .chi-header-meta {
  text-align: right;
  font-size: var(--fs-small);
  color: rgba(255,255,255,.65);
  line-height: 1.45;
}

.chi-header .chi-header-meta strong {
  color: var(--chi-white);
  font-size: 14px;
  font-weight: 600;
}

.chi-header-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

.chi-logout {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-badge);
  padding: 5px 10px;
  display: inline-block;
  line-height: 1.2;
}
.chi-logout:active { background: rgba(255,255,255,.1); }

/* .chi-logout wird auch auf <button> angewendet (Ende Schicht, siehe
   app.php) - Browser-Standardstile zuruecksetzen, damit es identisch zum
   Abmelden-Link (<a>) aussieht. */
button.chi-logout {
  background: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.chi-main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}

/* Schwarzer Hintergrund mit CHI-Wasserzeichen - 1:1 vom selben Bild wie
   demo.carla.cargopulse.de / checkin.carla.cargopulse.de uebernommen. */
.chi-dark-bg {
  background-color: #000000;
  background-image: url(../img/login-background.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
  min-height: 100vh;
}

/* --- Login (Design bewusst 1:1 von checkin.carla.cargopulse.de) --- */
.chi-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.chi-login-card {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.chi-login-logo {
  max-width: 240px;
  margin: 0 auto 24px;
  display: block;
}

.chi-login-msg {
  color: #cfcfcf;
  font-size: 14px;
  margin: 0 0 20px;
}

.chi-login-card form {
  text-align: left;
}

.chi-login-switch {
  display: block;
  margin-top: 20px;
  color: #cfcfcf;
  font-size: var(--fs-small);
  text-decoration: underline;
}

.chi-pin-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.chi-pin-row input {
  /* flex (statt width:100%) - vermeidet eine bekannte Flexbox-Falle: bei
     flex-basis:auto + width:100% koennen <input>-Elemente wegen
     min-width:auto trotz reichlich Platz auf wenige px zusammenschrumpfen. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 230px;
  height: 68px;
  font-size: 32px;
  letter-spacing: 6px;
  text-align: center;
  border: none;
  border-radius: var(--r-btn);
  color: #000;
  background: var(--chi-white);
}

/* --- Formularfelder --- */
.chi-field {
  margin-bottom: 16px;
}

.chi-field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--chi-grey-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.chi-field input {
  width: 100%;
  font-size: var(--fs-title);
  padding: 13px 14px;
  border: 1.5px solid #ddd;
  border-radius: var(--r-btn);
  background: var(--chi-grey-100);
  color: var(--chi-text);
}

.chi-field input:focus {
  outline: none;
  border-color: var(--chi-red);
  background: var(--chi-white);
}

/* Auf dem dunklen Login-Hintergrund braucht das Feld helle statt dunkle
   Schrift/Rahmen - siehe .chi-dark-bg. */
.chi-login-card .chi-field label {
  color: #cfcfcf;
}
.chi-login-card .chi-field input {
  border-color: #444;
  background: var(--chi-white);
}

.chi-error {
  background: #fde8ec;
  color: var(--chi-red-dark);
  border: 1px solid #f6bccb;
  border-radius: var(--r-btn);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* --- Buttons --- */
.chi-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--r-btn);
  padding: 15px;
  font-size: var(--fs-title);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--chi-white);
  background: var(--chi-red);
  transition: transform .05s ease, opacity .15s ease;
}
.chi-btn:active { transform: scale(0.98); }
.chi-btn[disabled] { opacity: .5; cursor: default; }

.chi-btn-black { background: var(--chi-black); }
.chi-btn-green { background: var(--chi-green); }
.chi-btn-outline {
  background: var(--chi-white);
  color: var(--chi-text);
  border: 1.5px solid #ddd;
}
.chi-pin-submit {
  width: 68px;
  height: 68px;
  font-size: 30px;
  padding: 0;
  flex-shrink: 0;
}

/* --- Statuskarte (Schicht) --- */
.chi-card {
  background: var(--chi-white);
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.chi-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chi-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--chi-grey-500);
  flex-shrink: 0;
}
.chi-dot.on { background: var(--chi-green); box-shadow: 0 0 0 4px rgba(31,146,84,0.15); }
.chi-dot.off { background: var(--chi-grey-500); }

.chi-status-label {
  font-weight: 700;
  font-size: 16px;
}

.chi-status-sub {
  font-size: var(--fs-small);
  color: var(--chi-grey-500);
  margin: 4px 0 0 21px;
}

/* Pause-Button + Statuszeile (app.php): Pause wird in schicht_pausen
   protokolliert, die Dispo sieht sie im LKW-Panel. */
.chi-btn-orange { background: #f39c12; }
/* [hidden] muss die Klassen-Regel schlagen - sonst zeigt die Karte eine
   leere orange Box, solange gar keine Pause laeuft. */
.chi-pause-status[hidden] { display: none; }
.chi-pause-status {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 2px;
  padding: 9px 12px;
  border-radius: var(--r-btn);
  background: rgba(243, 156, 18, .18);
  border: 1px solid #f39c12;
  color: #f5b041;
  font-weight: 600;
  font-size: var(--fs-body);
}

/* "Problem melden" in der Tour-Karte + Auswahl-Modal. */
.chi-tour-problem {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #f5b041;
  background: transparent;
  border: 1.5px dashed #f39c12;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.chi-problem-typen { display: grid; gap: 8px; margin: 14px 0 10px; }
.chi-problem-typ {
  padding: 11px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--chi-text);
  background: var(--chi-grey-200);
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-align: left;
}
.chi-problem-typ.gewaehlt {
  border-color: var(--chi-red);
  background: #fdecef;
  color: var(--chi-red);
}
.chi-problem-bemerkung {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--fs-body);
  border: 1px solid #ccc;
  border-radius: var(--r-btn);
  margin-bottom: 4px;
}

/* "Dispo anrufen"-Button (app.php): jederzeit sichtbar ueber der
   Schicht-Karte, sobald in der Dispo eine Telefonnummer hinterlegt ist. */
.chi-dispo-anruf {
  display: block;
  text-align: center;
  background: var(--chi-green);
  color: var(--chi-white);
  font-size: var(--fs-title);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--r-btn);
  margin-bottom: 14px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.chi-dispo-anruf:active {
  filter: brightness(0.9);
}
.chi-dispo-anruf-icon {
  margin-inline-end: 6px; /* logisch statt physisch - Arabisch ist RTL */
}

.chi-kennzeichen-pill {
  display: inline-block;
  background: var(--chi-white);
  color: var(--chi-black);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--r-badge);
  font-size: var(--fs-small);
  border: 1.5px solid var(--chi-white);
}

.chi-btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

/* Liegt auf dem dunklen Wasserzeichen-Hintergrund - hell statt grau. */
.chi-section-title {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin: 24px 0 10px;
}

/* --- Tour-Karten --- */
.chi-tour {
  background: var(--chi-white);
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.chi-tour.chi-tour-new {
  outline: 2px solid var(--chi-red);
  background: #fff6f7;
  animation: chi-pulse 1.4s ease-in-out 3;
}

@keyframes chi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206,5,56,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(206,5,56,0); }
}

.chi-tour-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.chi-tour-erledigt {
  background: var(--chi-grey-100);
  box-shadow: none;
  opacity: .92;
}

.chi-tour-erledigt .chi-tour-header {
  cursor: pointer;
}

/* Juengere Tour, solange eine aeltere noch offen ist (siehe
   fleet_aktuelle_tour_id()) - sichtbar zurueckgenommen. */
.chi-tour-gesperrt {
  opacity: .75;
}

.chi-tour-badge,
.chi-tour-done-badge {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--r-badge);
  margin-bottom: 6px;
  color: var(--chi-white);
}
.chi-tour-badge { background: var(--chi-red); }
.chi-tour-done-badge {
  background: var(--chi-green);
  margin-left: 6px;
}

/* Vom Disponenten zurueckgezogene Tour (siehe tourAlsStorniertMarkieren()
   in assets/js/app.js) - gleiche Badge-Optik wie erledigt, aber dunkelrot,
   Karte wie erledigt zurueckgenommen. */
.chi-tour-storniert-badge {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--r-badge);
  margin: 0 0 6px 6px;
  color: var(--chi-white);
  background: var(--chi-red-dark);
}
.chi-tour-storniert {
  background: var(--chi-grey-100);
  box-shadow: none;
  opacity: .8;
}
.chi-tour-storniert .chi-tour-header {
  cursor: pointer;
}

.chi-tour-toggle {
  color: var(--chi-grey-500);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  transition: transform .15s ease;
}

.chi-tour-collapsed .chi-tour-toggle {
  transform: rotate(-90deg);
}

.chi-tour-collapsed .chi-tour-body {
  display: none;
}

.chi-tour-locked-hint {
  margin-top: 10px;
  color: var(--chi-grey-500);
  font-size: var(--fs-small);
  font-style: italic;
  text-align: center;
}

.chi-tour-title {
  font-weight: 700;
  font-size: var(--fs-body);
  margin-bottom: 2px;
}

.chi-tour-route {
  font-size: var(--fs-small);
  color: #444;
  margin-bottom: 6px;
}

.chi-tour-desc {
  font-size: var(--fs-small);
  color: var(--chi-grey-500);
}

/* --- Stopps (PMCs) einer Tour --- */
.chi-tour-stops {
  margin: 4px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--fs-body);
}
.chi-stop {
  padding: 12px 0;
  border-bottom: 1px solid var(--chi-grey-200);
}
.chi-stop:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.chi-tour-stops strong {
  margin-right: 6px;
  font-size: 14px;
}
.chi-tour-stop-adresse {
  color: #444;
  font-size: var(--fs-small);
}
.chi-tour-stop-adresse::after {
  content: ' · ';
  color: #ccc;
}
.chi-tour-stop-info {
  color: var(--chi-grey-500);
  font-size: var(--fs-small);
}
.chi-stop-status {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chi-stop-ok {
  color: var(--chi-green);
  font-weight: 600;
  font-size: var(--fs-small);
}
.chi-stop-bad {
  color: var(--chi-red-dark);
  font-weight: 600;
  font-size: var(--fs-small);
}
.chi-stop-pending {
  color: var(--chi-grey-500);
  font-size: var(--fs-small);
  font-style: italic;
}
/* Erhalten/Nicht erhalten als gleich grosse 2er-Reihe. */
.chi-stop-confirm, .chi-stop-reject {
  flex: 1 1 0;
  border: none;
  border-radius: var(--r-btn);
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.chi-stop-confirm {
  background: var(--chi-green);
  color: #fff;
}
.chi-stop-reject {
  background: var(--chi-white);
  color: var(--chi-red-dark);
  border: 1.5px solid var(--chi-red-dark);
}
.chi-stop-reject-form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.chi-stop-reject-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #ddd;
  border-radius: var(--r-btn);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.chi-stop-reject-submit {
  border: none;
  border-radius: var(--r-btn);
  background: var(--chi-red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
}

/* "Tour annehmen" ist DIE Primaeraktion einer neuen Tour - volle Breite. */
.chi-tour-ack {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  background: var(--chi-black);
  color: var(--chi-white);
  border-radius: var(--r-btn);
  padding: 13px;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.chi-tour-ack[disabled] { opacity: .5; cursor: default; }

/* --- Beladen/Entladen als Checkliste (ein Schritt pro Zeile) --- */
.chi-ladephase {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--chi-grey-200);
}
.chi-ladephase-gruppe {
  margin-bottom: 12px;
}
.chi-ladephase-gruppe:last-child {
  margin-bottom: 0;
}
.chi-ladephase-titel {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--chi-grey-500);
  margin-bottom: 8px;
}
.chi-ladephase-schritte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.chi-ladephase-btn {
  border: 1.5px solid var(--chi-black);
  background: var(--chi-white);
  color: var(--chi-black);
  border-radius: var(--r-btn);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}
.chi-ladephase-btn[disabled] {
  opacity: .5;
  cursor: default;
}
.chi-ladephase-done {
  color: var(--chi-green);
  font-weight: 600;
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px;
}
.chi-ladephase-auto {
  color: var(--chi-grey-500);
  font-size: var(--fs-small);
  padding: 2px 2px;
}

/* Liegt auf dem dunklen Wasserzeichen-Hintergrund - hell statt grau. */
.chi-empty {
  color: rgba(255,255,255,.65);
  font-size: var(--fs-small);
  text-align: center;
  padding: 18px 0;
}

.chi-notify-banner {
  background: var(--chi-white);
  color: var(--chi-text);
  border-radius: var(--r-card);
  padding: 12px 14px;
  font-size: var(--fs-small);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.chi-notify-banner button {
  background: var(--chi-red);
  color: var(--chi-white);
  border: none;
  border-radius: var(--r-badge);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.chi-footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--chi-grey-500);
  margin-top: 8px;
  min-height: 1em;
}

/* Eigenes Bestaetigungs-Modal statt window.confirm() - siehe chiConfirm()
   in assets/js/app.js. */
.chi-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}
.chi-modal-backdrop.chi-modal-open {
  display: flex;
}

.chi-modal {
  background: var(--chi-white);
  border-radius: var(--r-card);
  padding: 22px 20px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.chi-modal-text {
  font-size: var(--fs-body);
  color: var(--chi-text);
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: center;
}

.chi-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chi-modal-actions .chi-btn {
  padding: 12px;
  font-size: 14px;
}

/* Vollflaechiges Fahrt-Overlay (app.php + app.js): liegt in den drei
   Fahr-Zustaenden ueber der kompletten App - "Fahre zu NFÜP" (Ankunft),
   "Fahre zu <Ziel>" (Abfahrt bzw. Ankunft am Lager). Jeder Schritt per
   Knopf oder automatisch per Samsara-Geofence.
   z-index unter dem Bestaetigungs-Modal (2000), ueber allem anderen. */
.chi-fahrt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--chi-black);
  color: var(--chi-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px 24px calc(24px + var(--safe-bottom));
}
.chi-fahrt-overlay[hidden] { display: none; }
.chi-fahrt-titel {
  font-size: 26px;
  font-weight: 600;
  color: #d5d5d5;
  letter-spacing: 1px;
}
.chi-fahrt-ziel {
  overflow-wrap: break-word;
  max-width: 100%;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--chi-red);
  letter-spacing: 2px;
}
.chi-fahrt-btn {
  width: 100%;
  max-width: 420px;
  margin-top: 18px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--chi-green);
  color: var(--chi-white);
  font-family: inherit;
  font-size: var(--fs-title);
  font-weight: 700;
  padding: 18px;
  cursor: pointer;
}
.chi-fahrt-btn:disabled { opacity: 0.6; }
.chi-fahrt-fehler {
  display: none;
  font-size: var(--fs-small);
  color: #ff8aa5;
  max-width: 420px;
}
.chi-fahrt-hinweis {
  font-size: var(--fs-small);
  color: #9a9a9a;
  max-width: 420px;
}

/* "Beladen fertig" gesperrt, solange Einheiten unentschieden sind
   (endeBeladenSperren() in assets/js/app.js). */
.chi-ladephase-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chi-ladephase-sperr-hinweis {
  width: 100%;
  font-size: var(--fs-small);
  color: var(--chi-grey-500);
}

/* Sprachwahl des Fahrers in der Schicht-Karte (app.php + api/sprache.php). */
.chi-sprache-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--chi-grey-200);
  font-size: var(--fs-small);
  color: var(--chi-grey-500);
}
.chi-sprache-row select {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #ddd;
  border-radius: var(--r-btn);
  padding: 8px 10px;
  font-size: var(--fs-small);
  font-family: inherit;
  background: var(--chi-white);
  color: var(--chi-text);
}

/* Das "Umsteigen"-Overlay (Schlepper-Workflow) liegt ueber dem
   Fahrt-Overlay (1500) - eine Dispo-Anforderung hat Vorrang. */
.chi-wechsel-overlay { z-index: 1600; }