/* LX OrderHub - Fahrerportal: Markenfundament.
   Werte stammen aus den echten Stylesheets von taxixpert.de (Elementor-Kit 61)
   und limoxpert.de (Kit 42). Es wurde kein fremdes Stylesheet uebernommen,
   nur die ausgelesenen Werte.

   Warum durchgehend dunkel: beide Originallogos sind weisse Negativvarianten.
   Eine Dunkelvariante existiert auf keiner der beiden Domains (gezielt geprueft).
   Auf heller Flaeche waeren die Logos unsichtbar; ein nachgebautes Logo ist
   ausdruecklich verboten. Dunkel ist ausserdem im Nachtbetrieb die richtige Wahl. */

/* --- eigene Schriften, lokal ausgeliefert, kein CDN, kein Google Fonts ------ */
@font-face {
  font-family: "Nunito Xpert";
  src: url("schrift/nunito-300.woff2") format("woff2");
  font-weight: 300 700;   /* nur der 300er Schnitt existiert; Browser synthetisiert fett */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto SH";
  src: url("schrift/roboto-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto SH";
  src: url("schrift/roboto-400.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- markenunabhaengige Grundwerte ---------------------------------------- */
:root {
  --lx-fehler:   #BD1E1E;   /* taxiXpert Kit: --e-global-color-4d1b4d60 */
  --lx-erfolg:   #23A455;   /* taxiXpert Kit: --e-global-color-71d0936f */
  --lx-warnung:  #E0A800;   /* abgeleitet: kein eigener Warnwert in beiden Kits */
  --lx-gedimmt:  #DADADA;   /* limoXpert Kit: --e-global-color-a9e9ecf */
  --lx-abstand:      16px;
  --lx-abstand-eng:   8px;
  --lx-abstand-weit: 24px;
  --lx-touch:        48px;  /* Mindesthoehe jeder Bedienflaeche */
  --lx-breite-max:  560px;
  --lx-uebergang: 160ms ease;
}

/* --- taxiXpert Hamburg ----------------------------------------------------- */
[data-marke="taxixpert"] {
  --lx-marke-name: "taxiXpert Hamburg";
  --lx-primaer:      #FDC300;  /* Kit 61: primary und accent, 44 Vorkommen */
  --lx-primaer-text: #000000;  /* Kit 61: secondary - Schrift auf der Primaerflaeche */
  --lx-hintergrund:  #000000;
  --lx-flaeche:      #141414;  /* aus #000 abgeleitete Absetzung, Kit kennt nur #F2F2F2 (hell) */
  --lx-flaeche-hoch: #1E1E1E;
  --lx-rahmen:       #3A3A3A;
  --lx-text:         #FFFFFF;
  --lx-text-leise:   #BDBDBD;
  --lx-schrift-ueberschrift: "Roboto SH", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-schrift-text:         "Roboto SH", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-gewicht-ueberschrift: 600;  /* Kit 61: primary-font-weight 600 */
  --lx-gewicht-text:         400;
  --lx-basisgroesse: 17px;         /* Kit 61: font-size 17px */
  --lx-zeilenhoehe:  1.55;
  --lx-radius:       3px;          /* einziger kleiner Radius im Kit */
  --lx-radius-gross: 8px;
  --lx-radius-knopf: 50px;         /* Kit 61: Pill-Buttons, 9 Vorkommen */
  --lx-versalien:    none;
  --lx-sperrung:     0;
}

/* --- limoXpert ------------------------------------------------------------- */
[data-marke="limoxpert"] {
  --lx-marke-name: "limoXpert";
  --lx-primaer:      #C59B6C;  /* Kit 42: --e-global-color-23c6a1f, Goldton aller Buttons */
  --lx-primaer-text: #121212;
  --lx-hintergrund:  #121212;  /* Kit 42: primary */
  --lx-flaeche:      #161616;  /* Kit 42: --e-global-color-7d3835f */
  --lx-flaeche-hoch: #1F1F1F;
  --lx-rahmen:       #3A3129;
  --lx-text:         #FFFFFF;
  --lx-text-leise:   #DADADA;  /* bewusst NICHT #7A7A7A: nur ca. 4,0:1 auf #121212 */
  --lx-schrift-ueberschrift: "Nunito Xpert", "Roboto SH", system-ui, sans-serif;
  --lx-schrift-text:         "Roboto SH", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-gewicht-ueberschrift: 400;
  --lx-gewicht-text:         300;
  --lx-basisgroesse: 16px;     /* Kit 42: font-size 16px, weight 300 */
  --lx-zeilenhoehe:  1.5;
  --lx-radius:       0px;      /* Kit 42: konsequent kantig, 18 Vorkommen */
  --lx-radius-gross: 0px;
  --lx-radius-knopf: 0px;
  --lx-versalien:    uppercase;  /* Kit 42: accent mit text-transform uppercase */
  --lx-sperrung:     2px;
}

/* --- Grundgeruest ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Muss hier stehen und muss wichtig sein: die Regel [hidden]{display:none} des
   Browsers hat eine schwaechere Herkunft als jede eigene display-Angabe. Ohne das
   bleibt eine Zeile mit display:flex sichtbar, obwohl sie hidden traegt - und die
   Oberflaeche zeigt leere Felder, die der Server bewusst nicht gefuellt hat. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lx-hintergrund);
  color: var(--lx-text);
  font-family: var(--lx-schrift-text);
  font-weight: var(--lx-gewicht-text);
  font-size: var(--lx-basisgroesse);
  line-height: var(--lx-zeilenhoehe);
  overflow-x: hidden;          /* Nachweis: keine waagerechte Scrollleiste */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--lx-schrift-ueberschrift);
  font-weight: var(--lx-gewicht-ueberschrift);
  line-height: 1.25;
  margin: 0 0 var(--lx-abstand-eng);
}
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }

.lx-huelle {
  max-width: var(--lx-breite-max);
  margin: 0 auto;
  padding: 0 var(--lx-abstand) calc(var(--lx-touch) + 72px);
}

/* --- Kopfzeile mit Originallogo -------------------------------------------- */
.lx-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-abstand-eng);
  padding: var(--lx-abstand) var(--lx-abstand) var(--lx-abstand-eng);
  max-width: var(--lx-breite-max);
  margin: 0 auto;
}
.lx-kopf img { height: 26px; width: auto; display: block; }
.lx-kopf .lx-fahrtnummer {
  font-size: .8rem;
  color: var(--lx-text-leise);
  letter-spacing: var(--lx-sperrung);
  text-transform: var(--lx-versalien);
  white-space: nowrap;
}

/* --- Karten ---------------------------------------------------------------- */
.lx-karte {
  background: var(--lx-flaeche);
  border: 1px solid var(--lx-rahmen);
  border-radius: var(--lx-radius-gross);
  padding: var(--lx-abstand);
  margin-bottom: var(--lx-abstand);
}
.lx-karte--hoch { background: var(--lx-flaeche-hoch); }

.lx-zeile { display: flex; justify-content: space-between; gap: var(--lx-abstand); padding: 6px 0; }
.lx-zeile + .lx-zeile { border-top: 1px solid var(--lx-rahmen); }
.lx-etikett { color: var(--lx-text-leise); font-size: .875rem; flex: 0 0 auto; }
.lx-wert { text-align: right; overflow-wrap: anywhere; }

/* --- Hauptaktion: fest unten, eine eindeutige Aktion ----------------------- */
.lx-aktionsleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: var(--lx-abstand-eng) var(--lx-abstand) calc(var(--lx-abstand-eng) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--lx-hintergrund) 72%, transparent);
  z-index: 20;
}
.lx-aktionsleiste > * { max-width: var(--lx-breite-max); margin: 0 auto; }

.lx-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--lx-touch);
  padding: 12px 20px;
  border: 1px solid var(--lx-primaer);
  border-radius: var(--lx-radius-knopf);
  background: var(--lx-primaer);
  color: var(--lx-primaer-text);
  font-family: var(--lx-schrift-ueberschrift);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--lx-sperrung);
  text-transform: var(--lx-versalien);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--lx-uebergang), background var(--lx-uebergang), opacity var(--lx-uebergang);
}
.lx-knopf:active { transform: scale(.985); }
.lx-knopf[disabled] { opacity: .45; cursor: not-allowed; }
.lx-knopf--zweit {
  background: transparent;
  color: var(--lx-primaer);
}
.lx-knopf--still {
  background: transparent;
  color: var(--lx-text-leise);
  border-color: var(--lx-rahmen);
}
.lx-knopf--gefahr {
  background: transparent;
  color: var(--lx-fehler);
  border-color: var(--lx-fehler);
}

/* sichtbarer Fokus - Tastatur und Screenreader */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--lx-primaer);
  outline-offset: 2px;
}

/* --- Statusanzeige --------------------------------------------------------- */
.lx-status {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-abstand-eng);
  padding: 6px 12px;
  border-radius: var(--lx-radius-knopf);
  border: 1px solid var(--lx-rahmen);
  background: var(--lx-flaeche-hoch);
  font-size: .8rem;
  letter-spacing: var(--lx-sperrung);
  text-transform: var(--lx-versalien);
}
.lx-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--lx-text-leise); flex: 0 0 auto; }
.lx-punkt--aktiv   { background: var(--lx-erfolg); }
.lx-punkt--wartet  { background: var(--lx-warnung); }
.lx-punkt--fehler  { background: var(--lx-fehler); }

/* --- Hinweise -------------------------------------------------------------- */
.lx-hinweis {
  border-left: 3px solid var(--lx-primaer);
  background: var(--lx-flaeche);
  padding: var(--lx-abstand-eng) var(--lx-abstand);
  margin-bottom: var(--lx-abstand);
  font-size: .9rem;
}
.lx-hinweis--fehler  { border-left-color: var(--lx-fehler); }
.lx-hinweis--erfolg  { border-left-color: var(--lx-erfolg); }
.lx-hinweis--warnung { border-left-color: var(--lx-warnung); }

/* --- Dialog ---------------------------------------------------------------- */
.lx-dialog[hidden] { display: none; }
.lx-dialog {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.72);
}
.lx-dialog__blatt {
  width: 100%;
  max-width: var(--lx-breite-max);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--lx-flaeche);
  border: 1px solid var(--lx-rahmen);
  border-radius: var(--lx-radius-gross) var(--lx-radius-gross) 0 0;
  padding: var(--lx-abstand-weit) var(--lx-abstand) calc(var(--lx-abstand) + env(safe-area-inset-bottom, 0px));
  animation: lx-auf var(--lx-uebergang);
}
@keyframes lx-auf { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

.lx-pruefung {
  display: flex;
  gap: var(--lx-abstand-eng);
  align-items: flex-start;
  padding: var(--lx-abstand-eng) 0;
  min-height: var(--lx-touch);
  cursor: pointer;
}
.lx-pruefung input { width: 26px; height: 26px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--lx-primaer); }

/* --- Formularfelder -------------------------------------------------------- */
label { display: block; font-size: .85rem; color: var(--lx-text-leise); margin-bottom: 4px; }
select, textarea, input[type="text"] {
  width: 100%;
  min-height: var(--lx-touch);
  padding: 10px 12px;
  background: var(--lx-hintergrund);
  color: var(--lx-text);
  border: 1px solid var(--lx-rahmen);
  border-radius: var(--lx-radius);
  font-family: inherit;
  font-size: 1rem;
}
textarea { min-height: 96px; resize: vertical; }

/* --- Kartenausschnitt (verzoegert geladen) --------------------------------- */
.lx-kartenbild {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--lx-flaeche-hoch);
  border: 1px solid var(--lx-rahmen);
  border-radius: var(--lx-radius-gross);
  overflow: hidden;
}

/* --- Zugaenglichkeit ------------------------------------------------------- */
.lx-nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- sehr schmale Geraete (320 px) ----------------------------------------- */
@media (max-width: 359px) {
  :root { --lx-abstand: 12px; }
  .lx-kopf img { height: 22px; }
  h1 { font-size: 1.2rem; }
  .lx-knopf { font-size: .95rem; letter-spacing: 0; }
}