/* ============================================================
   MyWay – Fahrgast-Ansicht
   Haltung: Die Karte ist der Inhalt, die Bedienung tritt zurück.
   Keine Verläufe, keine Deko-Schatten. Ruhig und klar.
   ============================================================ */

/* Archivo trägt die Beschilderungs-Anmutung: eine Breitenachse, mit der
   Überschriften und Geldbeträge breiter laufen als Fließtext. Instrument Sans
   bleibt darunter ruhig und liest sich klein noch sauber. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Instrument+Sans:wght@400..700&display=swap');

:root{
  /* Grundflächen */
  --grund:#12151c;
  --flaeche:#1b2029;
  --flaeche-hoch:#242a36;
  --linie:rgba(255,255,255,.10);
  --linie-stark:rgba(255,255,255,.18);

  /* Marke: Bernstein – warm, erinnert an Taxi ohne Klischee.
     Bewusst nicht Uber-Schwarz und nicht Bolt-Grün. */
  --marke:#ffb020;
  --marke-hell:#ffc043;
  --marke-tief:#e8951a;

  /* Text – alle Werte über 4,5:1 geprüft */
  --text:#ffffff;          /* 18,3:1 */
  --text-2:#e8eaed;        /* 15,2:1 */
  --text-leise:#b4b9c4;    /* 9,3:1  */
  --text-sehr-leise:#8b92a0; /* 5,8:1 */

  /* FARBLOGIK – bitte einhalten, sonst heißt bald alles alles:
     Bernstein = Marke und das Geld, das beim Fahrer bleibt.
     Grün      = ein Zustand ist an oder eine Zusage gilt.
     Rot       = etwas ist schiefgegangen.                        */
  --gut:#34c759;
  --fehler:#ff453a;

  /* 4/8-Raster */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px;
  --a5:24px; --a6:32px; --a7:48px;

  --rund:16px;
  --rund-klein:12px;

  /* Schrift */
  --schrift:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --schrift-display:'Archivo','Instrument Sans',-apple-system,sans-serif;

  /* Größen – eine Skala statt zwölf verstreuter rem-Werte */
  --t-hero:2.6rem;
  --t-gross:1.9rem;
  --t-titel:1.45rem;
  --t-unter:1.15rem;
  --t-body:1rem;
  --t-klein:.88rem;
  --t-winzig:.78rem;

  --weich:cubic-bezier(.22,.68,.36,1);
}

/* Display: breit laufend, damit es nach Wegweiser aussieht und nicht nach
   fett gestellter Fließschrift. */
.display,.titel,.preis-wert,.auftrag-anteil,.verdienst-wert,.zahl-wert,
.marke-name,.code-feld,.haupt-knopf,.geld-wert,.hero-wert{
  font-family:var(--schrift-display);
  font-stretch:112%;
  letter-spacing:-.01em;
}

/* Zahlen, die sich ändern, dürfen die Zeile nicht zappeln lassen */
.zahl,.preis-wert,.auftrag-anteil,.verdienst-wert,.zahl-wert,.geld-wert,
.hero-wert,.fahrt-nummer,.auftrag-zeile,.strecke-zeile{
  font-variant-numeric:tabular-nums;
}

/* Instrument Sans setzt das Leerzeichen sehr schmal. In den Zeilen mit
   Mittelpunkt („4,7 km · 12 Min · € 12,99") klebte der Trenner sonst an
   beiden Nachbarn. */
.auftrag-zeile,.strecke-zeile,.fahrer-auto,.auftrag-naehe,.strecke-ort{
  word-spacing:.12em;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* muss nach den display-Regeln greifen, sonst zeigt display:grid/flex trotz hidden */
[hidden]{display:none!important}
html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--grund);color:var(--text);
  font-family:var(--schrift);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--marke);outline-offset:2px}

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

/* ---------- Karte ---------- */
#karte{position:fixed;inset:0;z-index:0;background:var(--grund)}
.leaflet-container{background:var(--grund)!important;font-family:var(--schrift)!important}
/* Helle OSM-Kacheln werden hier zur Dunkelkarte: invertieren, Farbton
   zurückdrehen, dann beruhigen. Spart einen kostenpflichtigen Kachel-Dienst. */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55)}
.leaflet-control-attribution{
  background:rgba(18,21,28,.82)!important;color:var(--text-sehr-leise)!important;
  font-size:10px!important;padding:2px 6px!important;
}
.leaflet-control-attribution a{color:var(--text-leise)!important}
.leaflet-control-zoom{display:none}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--a4) + env(safe-area-inset-top)) var(--a4) var(--a4);
  background:linear-gradient(to bottom,rgba(18,21,28,.92),rgba(18,21,28,0));
  pointer-events:none;
}
.marke{display:flex;align-items:center;gap:var(--a2);pointer-events:auto}
.marke-zeichen{width:26px;height:26px;color:var(--marke)}
.marke-name{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}

.standort-knopf{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--text-2);cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--weich),color .15s var(--weich);
}
.standort-knopf svg{width:20px;height:20px}
.standort-knopf:hover,.standort-knopf:focus-visible{background:var(--flaeche-hoch);color:var(--marke)}
.standort-knopf.aktiv{color:var(--marke);border-color:var(--marke)}

/* ---------- Bedienfläche unten ---------- */
.blatt{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:var(--flaeche);
  border-radius:var(--rund) var(--rund) 0 0;
  border-top:1px solid var(--linie);
  padding:var(--a2) var(--a5) calc(var(--a5) + env(safe-area-inset-bottom));
  /* Die Höhe setzt blatt.js beim Ziehen. Die Grenze hier ist nur das
     Dach für den obersten Rastpunkt – darüber bliebe von der Karte nichts. */
  max-height:90vh;overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
@media (min-width:720px){
  .blatt{
    left:var(--a5);bottom:var(--a5);right:auto;width:400px;
    border-radius:var(--rund);border:1px solid var(--linie);
    /* Am Schreibtisch wird nicht gezogen – die von blatt.js gesetzte
       Pixelhöhe muss hier wieder weichen. */
    height:auto!important;
    max-height:calc(100vh - 2 * var(--a5) - 72px);
  }
  /* Ohne Verlauf säße der Schriftzug direkt auf den Kartenbeschriftungen */
  .kopf{background:linear-gradient(to bottom,rgba(18,21,28,.75),rgba(18,21,28,0))}
}

.blatt-griff{
  width:36px;height:4px;border-radius:2px;background:var(--linie-stark);
  margin:var(--a2) auto var(--a5);
}
@media (min-width:720px){.blatt-griff{display:none}}

.schritt{animation:auftauchen .28s var(--weich)}
@keyframes auftauchen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.titel{font-size:var(--t-titel);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--a5)}

/* ---------- Adressfelder ---------- */
.felder{
  position:relative;background:var(--grund);
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  padding:var(--a1) 0;
}
.feld-reihe{display:flex;align-items:center;gap:var(--a3);padding:0 var(--a4)}
.feld{
  flex:1;min-height:52px;background:none;border:none;
  font-size:1rem;font-weight:400;
}
.feld::placeholder{color:var(--text-sehr-leise)}
.feld:focus{outline:none}
.feld-linie{height:1px;background:var(--linie);margin-left:calc(var(--a4) + 10px + var(--a3))}

.punkt{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.punkt-start{background:var(--text-leise)}
.punkt-ziel{background:var(--marke)}

.feld-loeschen{
  width:28px;height:28px;border-radius:50%;border:none;
  background:var(--flaeche-hoch);color:var(--text-leise);
  cursor:pointer;font-size:.8rem;line-height:1;flex-shrink:0;
}
.feld-loeschen:hover{color:var(--text)}

/* ---------- Vorschläge ---------- */
.vorschlaege{
  list-style:none;margin-top:var(--a3);
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  overflow:hidden;background:var(--grund);
}
.vorschlag{
  display:flex;align-items:flex-start;gap:var(--a3);
  padding:var(--a3) var(--a4);min-height:56px;cursor:pointer;
  border-bottom:1px solid var(--linie);
  transition:background .12s var(--weich);
}
.vorschlag:last-child{border-bottom:none}
.vorschlag:hover,.vorschlag[aria-selected="true"]{background:var(--flaeche-hoch)}
.vorschlag-zeichen{color:var(--text-sehr-leise);flex-shrink:0;margin-top:3px}
.vorschlag-zeichen svg{width:18px;height:18px;display:block}
.vorschlag-text{display:flex;flex-direction:column;min-width:0}
.vorschlag-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vorschlag-ort{font-size:.85rem;color:var(--text-sehr-leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Schnellziele ----------
   Eine Reihe, seitlich scrollbar. Umbruch sah aus wie ein Fehler:
   zwei Knöpfe oben, einer verloren darunter. */
.schnellziele{
  display:flex;gap:var(--a2);margin-top:var(--a5);
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  /* Bis an den Blattrand scrollen, statt mittendrin abzuschneiden */
  margin-inline:calc(-1 * var(--a5));padding-inline:var(--a5);
  scroll-snap-type:x proximity;
}
.schnellziele::-webkit-scrollbar{display:none}
.schnellziel{
  flex:0 0 auto;scroll-snap-align:start;
  min-height:44px;padding:0 var(--a4);white-space:nowrap;
  background:var(--flaeche-hoch);border:1px solid var(--linie);
  border-radius:999px;color:var(--text-2);font-size:.92rem;font-weight:500;
  cursor:pointer;transition:all .15s var(--weich);
}
.schnellziel:hover{border-color:var(--marke);color:var(--marke)}

/* ---------- Preisansicht ---------- */
.zurueck{
  display:inline-flex;align-items:center;gap:var(--a1);
  min-height:44px;padding:0 var(--a2) 0 0;margin-bottom:var(--a2);
  background:none;border:none;color:var(--text-leise);
  font-size:.95rem;font-weight:500;cursor:pointer;
}
.zurueck svg{width:18px;height:18px}
.zurueck:hover{color:var(--text)}

.strecke-info{margin-bottom:var(--a4)}
.strecke-info .titel{margin-bottom:var(--a2)}
.strecke-zeile{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--a2);
  color:var(--text-leise);font-size:var(--t-klein);
}
/* Nachttarif war Fließtext am Zeilenende und ging dort unter */
.tarif-marke{
  padding:2px var(--a2);border-radius:var(--a1);
  background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.3);
  color:var(--marke);font-size:var(--t-winzig);font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
}

.preis-karte{
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);padding:var(--a4) var(--a5);margin-bottom:var(--a3);
}
.preis-haupt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a3)}
.preis-label{
  color:var(--text-sehr-leise);font-size:var(--t-winzig);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.preis-wert{
  font-size:var(--t-hero);font-weight:800;letter-spacing:-.035em;color:var(--marke);
  line-height:1.05;
}
/* Die Frage, die Fahrgäste wirklich stellen, steht sonst nirgends */
.preis-ankunft{
  display:flex;align-items:center;gap:var(--a2);
  margin-top:var(--a3);padding-top:var(--a3);border-top:1px solid var(--linie);
  color:var(--text-leise);font-size:var(--t-klein);
}
.preis-ankunft svg{width:16px;height:16px;color:var(--text-sehr-leise);flex-shrink:0}
.preis-ankunft strong{color:var(--text-2);font-weight:600}
.preis-aufklappen{
  margin-top:var(--a2);padding:0;min-height:44px;
  background:none;border:none;color:var(--text-leise);
  font-size:.9rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.preis-aufklappen:hover{color:var(--text-2)}
.preis-details{
  margin-top:var(--a3);padding-top:var(--a4);border-top:1px solid var(--linie);
  display:grid;grid-template-columns:1fr auto;gap:var(--a2) var(--a4);
  font-size:.92rem;
}
.preis-details dt{color:var(--text-leise)}
.preis-details dd{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
.preis-details .quelle{
  grid-column:1/-1;margin-top:var(--a2);padding-top:var(--a3);
  border-top:1px solid var(--linie);
  color:var(--text-sehr-leise);font-size:.82rem;text-align:left;
}

.zusage{
  display:flex;align-items:flex-start;gap:var(--a3);
  padding:var(--a4);margin-bottom:var(--a5);
  background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.25);
  border-radius:var(--rund-klein);
  font-size:.92rem;color:var(--text-2);
}
.zusage svg{width:20px;height:20px;color:var(--gut);flex-shrink:0;margin-top:1px}

/* ---------- Knöpfe ---------- */
.haupt-knopf{
  width:100%;min-height:56px;border:none;border-radius:var(--rund-klein);
  background:var(--marke);color:var(--grund);
  font-size:1.05rem;font-weight:600;cursor:pointer;
  transition:background .15s var(--weich),transform .1s var(--weich);
}
.haupt-knopf:hover{background:var(--marke-hell)}
.haupt-knopf:active{transform:scale(.985)}
.haupt-knopf:disabled{opacity:.45;cursor:not-allowed}
.haupt-knopf.zweit{background:var(--flaeche-hoch);color:var(--text);border:1px solid var(--linie)}
.haupt-knopf.zweit:hover{background:var(--linie)}

/* ---------- Bestätigung ---------- */
.fertig-zeichen{
  width:64px;height:64px;border-radius:50%;margin:var(--a2) auto var(--a5);
  background:rgba(52,199,89,.12);border:2px solid var(--gut);color:var(--gut);
  display:flex;align-items:center;justify-content:center;
}
.fertig-zeichen svg{width:30px;height:30px}
/* Solange niemand angenommen hat, wäre ein grüner Haken gelogen:
   dann dreht hier ein Ring in Bernstein. */
.fertig-zeichen.sucht{
  background:rgba(255,176,32,.1);border-color:transparent;color:transparent;
  border-top-color:var(--marke);border-right-color:var(--marke);
  animation:drehen 1s linear infinite;
}
.fertig-zeichen.sucht svg{display:none}
#schritt-fertig{text-align:center}
#schritt-fertig .titel{margin-bottom:var(--a3)}
.fertig-text{color:var(--text-leise);margin-bottom:var(--a4);font-size:.98rem}
/* Ein drehender Ring allein lässt offen, ob überhaupt etwas passiert. */
.warte-hinweis{
  margin-bottom:var(--a6);font-size:var(--t-klein);color:var(--text-sehr-leise);
  line-height:1.55;
}

/* ---------- Kartenmarkierungen ---------- */
.markierung{
  width:14px;height:14px;border-radius:50%;
  border:3px solid var(--grund);box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
.markierung-start{background:var(--text)}
.markierung-ziel{background:var(--marke)}

.lade-hinweis{
  display:flex;align-items:center;gap:var(--a3);
  padding:var(--a4);color:var(--text-leise);font-size:.95rem;
}
.dreher{
  width:18px;height:18px;border:2px solid var(--linie-stark);
  border-top-color:var(--marke);border-radius:50%;
  animation:drehen .7s linear infinite;
}
@keyframes drehen{to{transform:rotate(360deg)}}

.hinweis-fehler{
  padding:var(--a3) var(--a4);margin-top:var(--a3);
  background:rgba(255,69,58,.1);border:1px solid rgba(255,69,58,.3);
  border-radius:var(--rund-klein);color:#ff9a92;font-size:.9rem;
}

/* ============================================================
   Fahrer-Ansicht
   Gleiche Mittel wie die Fahrgast-App – es muss eine App bleiben.
   ============================================================ */

.marke-zusatz{
  padding:2px var(--a2);margin-left:var(--a1);
  background:var(--marke);color:var(--grund);
  border-radius:var(--a1);font-size:.72rem;font-weight:600;letter-spacing:.03em;
}
/* Als breite Pille stritt „Abmelden" mit dem Schriftzug um die Kopfzeile.
   Als Symbol ist es da, wenn man es sucht, und still, wenn nicht. */
.abmelden-knopf{
  width:44px;height:44px;border-radius:50%;pointer-events:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--flaeche);border:1px solid var(--linie);
  color:var(--text-leise);cursor:pointer;
  transition:background .15s var(--weich),color .15s var(--weich);
}
.abmelden-knopf svg{width:20px;height:20px}
.abmelden-knopf:hover,.abmelden-knopf:focus-visible{background:var(--flaeche-hoch);color:var(--text)}

.hinweis-text{color:var(--text-leise);font-size:.95rem;margin:calc(-1 * var(--a3)) 0 var(--a5)}
.quelle-text{
  margin-top:var(--a5);padding-top:var(--a4);border-top:1px solid var(--linie);
  color:var(--text-sehr-leise);font-size:.85rem;line-height:1.55;
}
.unter-titel{
  font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-sehr-leise);margin:var(--a6) 0 var(--a3);
}

/* ---------- Zugang ---------- */
.zugang-form{display:flex;flex-direction:column;gap:var(--a3)}
.feld-etikett{font-size:.9rem;color:var(--text-leise)}
.code-feld{
  width:100%;min-height:60px;padding:0 var(--a4);
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--rund-klein);
  font-size:1.3rem;font-weight:600;letter-spacing:.08em;text-align:center;
  text-transform:uppercase;
}
.code-feld::placeholder{color:var(--text-sehr-leise);letter-spacing:.08em}
.code-feld:focus{outline:none;border-color:var(--marke)}

/* ---------- Kopf mit Verfügbar-Schalter ----------
   Vorher standen Name und Schalter nebeneinander; die Fahrzeugzeile brach
   dabei um und „TX" blieb allein zurück. Jetzt untereinander. */
.fahrer-kopf{margin-bottom:var(--a4)}
.fahrer-kopf .titel{margin-bottom:var(--a1);font-size:var(--t-titel)}
.fahrer-auto{
  color:var(--text-leise);font-size:var(--t-klein);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.verfuegbar-schalter{
  display:flex;align-items:center;justify-content:center;gap:var(--a2);
  width:100%;min-height:48px;margin-top:var(--a3);padding:0 var(--a4);
  background:var(--flaeche-hoch);border:1px solid var(--linie);border-radius:999px;
  color:var(--text-leise);font-size:.95rem;font-weight:600;cursor:pointer;
  transition:all .18s var(--weich);
}
.schalter-lampe{
  width:9px;height:9px;border-radius:50%;background:var(--text-sehr-leise);
  transition:background .18s var(--weich),box-shadow .18s var(--weich);
}
.verfuegbar-schalter.an{
  background:rgba(52,199,89,.12);border-color:rgba(52,199,89,.45);color:var(--gut);
}
.verfuegbar-schalter.an .schalter-lampe{
  background:var(--gut);box-shadow:0 0 0 4px rgba(52,199,89,.18);
}

/* ---------- Verdienst heute ----------
   Drei gleich große Spalten waren drei gleich wichtige Zahlen – und die
   Labels brachen um. Der Vorsprung gegenüber Uber ist der Grund, warum ein
   Fahrer wechselt, also steht er groß und allein. */
.verdienst{
  padding:var(--a4) var(--a5);background:var(--grund);
  border:1px solid rgba(255,176,32,.22);border-radius:var(--rund-klein);
}
.verdienst-hero{display:flex;flex-direction:column;gap:2px}
.hero-wert{
  font-size:var(--t-gross);font-weight:800;letter-spacing:-.03em;
  color:var(--marke);line-height:1.05;
}
/* Vor der ersten Fahrt gibt es nichts zu feiern – eine große bernsteinfarbene
   Null wäre ein Versprechen, das die Zahl nicht deckt. */
.verdienst.leer{border-color:var(--linie)}
.verdienst.leer .hero-wert{color:var(--text-leise)}
.hero-label{
  font-size:var(--t-winzig);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-sehr-leise);
}
.verdienst-fuss{
  display:flex;gap:var(--a5);flex-wrap:wrap;
  margin-top:var(--a3);padding-top:var(--a3);border-top:1px solid var(--linie);
  font-size:var(--t-klein);color:var(--text-leise);
}
.verdienst-fuss strong{
  color:var(--text);font-weight:700;font-family:var(--schrift-display);
  font-variant-numeric:tabular-nums;
}

/* ---------- Auftragsliste ---------- */
.auftraege{list-style:none;display:flex;flex-direction:column;gap:var(--a3)}
.leer-hinweis{
  padding:var(--a5) var(--a4);text-align:center;
  color:var(--text-sehr-leise);font-size:.92rem;line-height:1.55;
  border:1px dashed var(--linie);border-radius:var(--rund-klein);
}
.auftrag{
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);padding:var(--a4);
  animation:auftauchen .28s var(--weich);
}
.auftrag-strecke{display:flex;flex-direction:column;gap:var(--a1)}
.auftrag-zeile{
  margin-top:var(--a3);color:var(--text-leise);font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
/* Entfernung zum Fahrgast – die erste Frage jedes Fahrers, deshalb ganz oben.
   Fehlt der Standort, fehlt die Zeile, und die Karte rückt einfach zusammen. */
.auftrag-naehe{
  display:flex;align-items:center;gap:var(--a2);
  margin-bottom:var(--a3);padding-bottom:var(--a3);
  border-bottom:1px solid var(--linie);
  color:var(--text-2);font-size:var(--t-klein);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.auftrag-naehe svg{width:15px;height:15px;color:var(--marke);flex-shrink:0}

/* ---------- Was bleibt bei dir ---------- */
.auftrag-geld{
  margin:var(--a3) 0 var(--a4);padding-top:var(--a3);
  border-top:1px solid var(--linie);
}
.geld-wert{
  display:block;font-size:var(--t-gross);font-weight:800;color:var(--marke);
  letter-spacing:-.03em;line-height:1.05;
}
.geld-label{
  display:block;margin-top:2px;
  font-size:var(--t-winzig);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-sehr-leise);
}

/* Zwei Balken im Verhältnis. Reines CSS, keine Bibliothek – und bewusst
   ohne Animation: eine wachsende Geldsumme wirkt wie ein Verkaufstrick. */
.balken{display:flex;flex-direction:column;gap:var(--a2);margin-top:var(--a3)}
.balken-reihe{display:flex;align-items:center;gap:var(--a3)}
.balken-name{
  width:52px;flex-shrink:0;
  font-size:var(--t-winzig);color:var(--text-leise);
}
.balken-spur{
  display:block;flex:1;height:8px;border-radius:4px;
  background:var(--flaeche-hoch);overflow:hidden;
}
/* display:block ist Pflicht – als inline-span ignoriert der Browser width */
.balken-fuell{display:block;height:100%;border-radius:4px}
.balken-fuell.myway{background:var(--marke)}
.balken-fuell.uber{background:var(--text-sehr-leise)}
.balken-zahl{
  width:58px;flex-shrink:0;text-align:right;
  font-size:var(--t-winzig);font-variant-numeric:tabular-nums;color:var(--text-leise);
}
.balken-reihe.eigen .balken-name,.balken-reihe.eigen .balken-zahl{color:var(--text-2);font-weight:600}

.auftrag-vergleich{
  margin-top:var(--a3);font-size:var(--t-klein);color:var(--text-leise);
}
.auftrag-vergleich strong{color:var(--marke);font-weight:700}
.auftrag .haupt-knopf{min-height:48px;font-size:1rem}

/* ---------- Strecke (Fahrt und Auftrag) ---------- */
.strecke-block{
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);padding:var(--a4);margin-bottom:var(--a4);
}
.strecke-punkt{display:flex;align-items:flex-start;gap:var(--a3);min-width:0}
.strecke-punkt .punkt{margin-top:7px}
.strecke-name{
  display:block;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* In der Anfrage-Liste: Adresse links, Bezirk rechtsbündig daneben.
   Der Bezirk sagt einem Wiener Fahrer mehr als die halbe Straßenadresse. */
.strecke-punkt.mit-plz{align-items:baseline;gap:var(--a3);width:100%}
.strecke-punkt.mit-plz .strecke-name{flex:1;min-width:0}
.strecke-plz{
  flex-shrink:0;font-size:var(--t-winzig);color:var(--text-sehr-leise);
  font-variant-numeric:tabular-nums;
}
.strecke-ort{display:block;font-size:.82rem;color:var(--text-sehr-leise)}
.strecke-strich{
  width:1px;height:20px;background:var(--linie-stark);
  margin:var(--a1) 0 var(--a1) 4px;
}
.strecke-strich.klein{height:12px}

/* ---------- Laufende Fahrt ---------- */
.fahrt-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--a3);margin-bottom:var(--a2);
}
.zustand-marke{
  font-family:var(--schrift-display);font-stretch:112%;
  font-size:var(--t-unter);font-weight:700;color:var(--text);
}
.fahrt-nummer{
  font-size:var(--t-winzig);color:var(--text-sehr-leise);
}

/* Die Pille sagte nur, wo der Fahrer steht. Die Leiste sagt zusätzlich,
   wie viel noch kommt – fünf Segmente für die fünf Schritte aus ABLAUF. */
.fortschritt{margin-bottom:var(--a5)}
.fortschritt-spur{display:flex;gap:var(--a1)}
.fortschritt-teil{
  flex:1;height:4px;border-radius:2px;background:var(--flaeche-hoch);
  transition:background .3s var(--weich);
}
.fortschritt-teil.erledigt{background:var(--marke)}
.fortschritt-teil.jetzt{background:var(--marke);animation:pulsen 1.8s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.45}}
.fortschritt-zaehler{
  display:block;margin-top:var(--a2);
  font-size:var(--t-winzig);color:var(--text-sehr-leise);
}
#schritt-fahrt .titel{font-size:var(--t-titel);margin-bottom:var(--a4)}

.fahrt-zahlen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a2);
  margin-bottom:var(--a5);
}
.fahrt-zahlen > div{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--a3);background:var(--grund);
  border:1px solid var(--linie);border-radius:var(--rund-klein);
}
.zahl-wert{
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zahl-wert.hervor{color:var(--marke)}
.zahl-label{font-size:.74rem;color:var(--text-sehr-leise)}

#navigationKnopf{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--a3);text-decoration:none;
}

/* ---------- Abrechnung ---------- */
#schritt-abrechnung{text-align:center}
#schritt-abrechnung .titel{margin-bottom:var(--a5)}
#schritt-abrechnung .preis-karte{text-align:left}
#abrechnungDetails{margin-top:0;padding-top:0;border-top:none}

.zahlart{margin-bottom:var(--a5);text-align:left}
.zahlart-frage{font-size:.92rem;color:var(--text-leise);margin-bottom:var(--a3)}
.zahlart-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:var(--a2)}
.zahlart-knopf{
  min-height:52px;background:var(--flaeche-hoch);
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--text-2);font-size:.98rem;font-weight:500;cursor:pointer;
  transition:all .15s var(--weich);
}
.zahlart-knopf:hover{border-color:var(--linie-stark)}
.zahlart-knopf.gewaehlt{
  background:rgba(255,176,32,.14);border-color:var(--marke);color:var(--marke);font-weight:600;
}
.zahlart-hinweis{
  margin-top:var(--a3);padding:var(--a3) var(--a4);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);
  color:var(--text-leise);font-size:.88rem;line-height:1.55;
}

/* ---------- Das Auto des Fahrers auf der Karte ---------- */
.auto-marke{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--marke);color:var(--grund);
  box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 3px rgba(255,176,32,.22);
  transition:rotate .6s var(--weich);
}
.auto-marke svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.auto-marke{transition:none}}

/* ---------- Mitlaufende Ankunft ---------- */
.ankunft-live{
  margin-bottom:var(--a4);font-size:var(--t-unter);
  font-family:var(--schrift-display);font-stretch:112%;font-weight:700;
  color:var(--text);
}
.ankunft-live strong{color:var(--marke);font-variant-numeric:tabular-nums}

/* ---------- Was bleibt beim Fahrer ----------
   Die Zeile, die Uber nicht schreiben würde. Ruhig gesetzt: als Reklame
   aufgemacht würde sie unglaubwürdig. */
.anteil-zeile{
  margin-bottom:var(--a3);padding:var(--a3) var(--a4);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);
  font-size:var(--t-klein);color:var(--text-leise);line-height:1.55;
}
.anteil-zeile strong{color:var(--marke);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Zahlungsmittel beim Fahrgast ---------- */
.zahlwahl{border:none;padding:0;margin-bottom:var(--a5)}
.zahlwahl-frage{
  padding:0;margin-bottom:var(--a3);
  font-size:var(--t-klein);color:var(--text-leise);
}
/* Wunsch des Fahrgasts in der Fahrer-Abrechnung */
.zahlart-knopf.vorschlag{border-color:var(--linie-stark)}

/* ---------- Anrufen und Teilen ---------- */
.fahrt-aktionen{display:flex;gap:var(--a2);margin-bottom:var(--a5)}
.aktion-knopf{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--a2);
  min-height:48px;padding:0 var(--a3);
  background:var(--flaeche-hoch);border:1px solid var(--linie);
  border-radius:var(--rund-klein);color:var(--text-2);
  font-size:var(--t-klein);font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;
  transition:border-color .15s var(--weich),color .15s var(--weich);
}
.aktion-knopf svg{width:17px;height:17px;flex-shrink:0}
.aktion-knopf:hover{border-color:var(--linie-stark);color:var(--text)}
.aktion-knopf.erledigt{border-color:var(--gut);color:var(--gut)}

/* ---------- Bewertung ---------- */
.bewertung{margin-bottom:var(--a5)}
.bewertung-frage{margin-bottom:var(--a3);font-size:var(--t-klein);color:var(--text-leise)}
.sterne{display:flex;justify-content:center;gap:var(--a2)}
.stern{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--text-sehr-leise);cursor:pointer;
  transition:color .15s var(--weich),scale .15s var(--weich);
}
.stern svg{width:28px;height:28px}
.stern:hover{scale:1.1}
.stern.voll{color:var(--marke)}
.stern.voll svg path{fill:currentColor}
.bewertung-dank{margin-top:var(--a3);font-size:var(--t-klein);color:var(--gut)}

/* ---------- Gemerkte Orte ---------- */
.schnellziel.merkbar{display:inline-flex;align-items:center;gap:var(--a2)}
.schnellziel.merkbar svg{width:15px;height:15px;flex-shrink:0}
/* Ungesetzt gestrichelt: der Chip sieht dann nach Platzhalter aus und
   nicht nach einem Ziel, das nur nicht funktioniert. */
.schnellziel.merkbar:not(.gesetzt){
  border-style:dashed;color:var(--text-sehr-leise);
}
.schnellziel.merkbar.gesetzt{border-color:var(--linie-stark);color:var(--text-2)}
.schnellziel.merkbar.gesetzt svg{color:var(--marke)}

/* ---------- Geteilte Ansicht ---------- */
.kopf.nur-marke .standort-knopf{display:none}

/* ---------- Verweis auf die andere Ansicht ---------- */
.seiten-wechsel{
  margin-top:var(--a5);padding-top:var(--a4);border-top:1px solid var(--linie);
  text-align:center;font-size:.85rem;color:var(--text-sehr-leise);
}
.seiten-wechsel a{color:var(--text-leise);text-decoration:underline;text-underline-offset:3px}
.seiten-wechsel a:hover{color:var(--marke)}

/* ---------- Fahrgast: Fahrer gefunden ---------- */
.fahrer-karte{
  display:flex;align-items:center;gap:var(--a4);
  padding:var(--a4);margin-bottom:var(--a4);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--rund-klein);text-align:left;
}
.fahrer-bild{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--flaeche-hoch);color:var(--marke);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;
}
.fahrer-daten{min-width:0}
.fahrer-namenszeile{display:block;font-weight:600}
.fahrer-autozeile{
  display:block;font-size:.85rem;color:var(--text-leise);
  font-variant-numeric:tabular-nums;
}
.fahrgast-zustand{
  padding:var(--a3) var(--a4);margin-bottom:var(--a4);
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);
  border-radius:var(--rund-klein);
  color:var(--marke);font-size:.92rem;font-weight:500;
}
.fahrgast-zustand.fertig{
  background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.3);color:var(--gut);
}