/* =========================================================
   Fahrdienst — styles communs
   Palette reprise de la maquette : rouge / bleu / vert
   ========================================================= */
:root {
  --rot: #e0574e;
  --rot-dunkel: #c9463e;
  --blau: #2d6cd1;
  --blau-dunkel: #2258ae;
  --gruen: #2e9e50;
  --gruen-dunkel: #257f41;
  --primaer: #2563a8;
  --primaer-dunkel: #1d4f88;

  --text: #17212f;
  --text-leise: #5c6a7d;
  --linie: #e2e7ee;
  --flaeche: #ffffff;
  --grund: #f3f6fa;

  --dunkel: #101c2e;
  --dunkel-hell: #1b2a41;

  --radius: 14px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(16, 28, 46, .06), 0 8px 24px rgba(16, 28, 46, .06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid #7aa7e6;
  outline-offset: 2px;
}

.versteckt { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- bandeau de configuration manquante ---------- */
.konfigband {
  background: #7a1d1d;
  color: #fff;
  padding: 10px 14px;
  font-size: 15px;
  text-align: center;
}

/* ---------- toast ---------- */
#fd-toast {
  position: fixed;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  background: var(--dunkel);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-klein);
  max-width: min(90vw, 460px);
  box-shadow: var(--schatten);
  z-index: 90;
  transition: bottom .22s ease;
}
#fd-toast.sichtbar { bottom: 24px; }
#fd-toast.ist-fehler { background: var(--rot-dunkel); }

/* ---------- sélecteur de langue ---------- */
.sprachwahl { display: inline-flex; gap: 4px; }
.sprachknopf {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text-leise);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.sprachknopf.ist-aktiv {
  background: var(--primaer);
  border-color: var(--primaer);
  color: #fff;
}
.dunkelzone .sprachknopf { background: transparent; border-color: #33445e; color: #b7c4d6; }
.dunkelzone .sprachknopf.ist-aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.dunkelzone .knopf.leise { color: #cfd8e4; border-color: #33445e; }
.dunkelzone .knopf.leise:hover { background: var(--dunkel-hell); color: #fff; }

/* =========================================================
   Application établissement + application conducteur
   ========================================================= */
.telefon {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.bildschirm {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf h1 {
  font-size: 19px;
  font-weight: 650;
  margin: 0;
  flex: 1;
  text-align: center;
}
.kopf .sprachwahl { margin-left: auto; }

.zurueck {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text);
  border-radius: 8px;
}

.blatt {
  flex: 1;
  padding: 22px 20px 28px;
  display: flex;
  flex-direction: column;
}

/* ---------- écran d'inscription ---------- */
.marke {
  text-align: center;
  margin: 14px 0 20px;
}
.marke svg { width: 62px; height: 62px; color: var(--primaer); }
.marke h2 {
  font-size: 21px;
  font-weight: 650;
  margin: 14px 0 0;
}
.marke p { margin: 4px 0 0; color: var(--text-leise); font-size: 15px; }

.feld {
  width: 100%;
  padding: 14px 15px;
  margin-bottom: 11px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: #fbfcfe;
}
.feld:focus { border-color: var(--primaer); background: #fff; }
textarea.feld { min-height: 92px; resize: vertical; }

.knopf {
  width: 100%;
  border: 0;
  border-radius: var(--radius-klein);
  padding: 15px 18px;
  font-size: 17px;
  font-weight: 620;
  color: #fff;
  background: var(--primaer);
  cursor: pointer;
  min-height: 54px;
}
.knopf:hover { background: var(--primaer-dunkel); }
.knopf:disabled { opacity: .55; cursor: progress; }
.knopf.gruen { background: var(--gruen); }
.knopf.gruen:hover { background: var(--gruen-dunkel); }
.knopf.leise {
  background: transparent;
  color: var(--text-leise);
  border: 1px solid var(--linie);
}
.knopf.leise:hover { background: #f2f5f9; color: var(--text); }

.wechsel {
  text-align: center;
  margin-top: 16px;
  font-size: 15px;
  color: var(--text-leise);
}
.wechsel button {
  border: 0;
  background: none;
  color: var(--primaer);
  font-weight: 620;
  cursor: pointer;
  padding: 4px;
}

/* ---------- page d'accueil : trois grands boutons ---------- */
.frage {
  text-align: center;
  font-size: 22px;
  font-weight: 650;
  margin: 6px 0 20px;
}

.transportwahl {
  display: grid;
  gap: 14px;
  grid-template-rows: repeat(3, 1fr);
  flex: 1 1 auto;
  max-height: 470px;
}
.transportknopf {
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 28, 46, .12);
}
.transportknopf svg {
  width: 40px; height: 40px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.transportknopf:active { transform: scale(.985); }
.transportknopf.rot { background: var(--rot); }
.transportknopf.blau { background: var(--blau); }
.transportknopf.gruen { background: var(--gruen); }

.hinweisband {
  background: #fff4e5;
  border: 1px solid #f0d3a8;
  color: #7a4b06;
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 15px;
}

/* ---------- sélecteur d'heure ---------- */
.uhrblock { text-align: center; margin-top: 8px; }
.uhrlabel { color: var(--text-leise); font-size: 16px; margin-bottom: 12px; }
.uhr {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 6px 14px;
}
.uhrspalte { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.uhrpfeil {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 18px;
  color: var(--text-leise);
  border-radius: 8px;
}
.uhrpfeil svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.uhrpfeil:hover { background: #eef2f7; color: var(--text); }
.uhrzahl {
  font-size: 46px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  background: #eef2f8;
  border-radius: 12px;
  padding: 6px 16px;
  min-width: 96px;
}
.uhrtrenner { font-size: 40px; font-weight: 600; padding-bottom: 4px; }
.uhrjetzt { color: var(--text-leise); font-size: 15px; margin-top: 14px; }
.uhrmorgen { color: var(--rot-dunkel); font-size: 15px; margin-top: 6px; font-weight: 600; }

.blatt .knopf.unten { margin-top: auto; }

/* ---------- récapitulatif ---------- */
.abschnitt {
  font-size: 18px;
  font-weight: 650;
  margin: 6px 0 12px;
}
.zeile {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
}
.zeile dt { color: var(--text-leise); font-size: 15px; margin: 0; }
.zeile dd { margin: 0; text-align: right; font-weight: 560; }
.zusammenfassung { margin: 0 0 20px; }

/* ---------- confirmation ---------- */
.erfolg { text-align: center; margin: auto 0; }
.erfolg .haken {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.erfolg .haken svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.erfolg h2 { font-size: 22px; margin: 0 0 12px; }
.erfolg p { color: var(--text-leise); margin: 4px 0; }

/* ---------- barre de navigation basse ---------- */
.fussnav {
  display: flex;
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  position: sticky;
  bottom: 0;
}
.fussnav button {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--text-leise);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.fussnav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fussnav button.ist-aktiv { color: var(--primaer); font-weight: 620; }

/* ---------- liste des demandes (établissement + conducteur) ---------- */
.karten { display: grid; gap: 12px; }
.karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 14px 15px;
  box-shadow: 0 1px 2px rgba(16, 28, 46, .04);
}
.karte-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.karte-kopf .titel { font-weight: 640; flex: 1; }
.karte-info { color: var(--text-leise); font-size: 15px; }
.karte .knopfreihe { display: grid; gap: 8px; margin-top: 12px; }

.artpunkt {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
}
.artpunkt svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.artpunkt.rot { background: var(--rot); }
.artpunkt.blau { background: var(--blau); }
.artpunkt.gruen { background: var(--gruen); }

.marke-status {
  font-size: 13px;
  font-weight: 640;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.st-neu { background: #fdeceb; color: var(--rot-dunkel); }
.st-bestaetigt { background: #e7f0fd; color: var(--blau-dunkel); }
.st-unterwegs { background: #fff2d9; color: #8a5b00; }
.st-erledigt { background: #e6f4ea; color: var(--gruen-dunkel); }
.st-storniert { background: #eef1f5; color: var(--text-leise); }

.leerzustand {
  text-align: center;
  color: var(--text-leise);
  padding: 40px 20px;
  font-size: 16px;
}

/* =========================================================
   Système de régulation (poste fixe)
   ========================================================= */
.dispo {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.seitenleiste {
  background: var(--dunkel);
  color: #cfd8e4;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
}
.seitenleiste .logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  padding: 4px 10px 20px;
}
.seitenleiste .logo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menue { display: grid; gap: 3px; }
.menue button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: none;
  color: #cfd8e4;
  padding: 11px 12px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
}
.menue button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menue button:hover { background: var(--dunkel-hell); color: #fff; }
.menue button.ist-aktiv { background: var(--blau); color: #fff; font-weight: 600; }
.seitenfuss { margin-top: auto; display: grid; gap: 12px; padding: 12px 4px 0; }

.dispo-inhalt {
  padding: 20px 22px 32px;
  display: grid;
  gap: 18px;
  align-content: start;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.dispo-inhalt.eine-spalte { grid-template-columns: minmax(0, 1fr); }

.tafel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.tafel > h2, .tafel .tafelkopf {
  font-size: 17px;
  font-weight: 650;
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tafel > h2 .rechts, .tafel .tafelkopf .rechts { margin-left: auto; display: flex; gap: 6px; }
.tafelkoerper { padding: 14px 18px 18px; }

.filterknopf {
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--text-leise);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.filterknopf.ist-aktiv { background: #eaf1fb; border-color: #b9d0f2; color: var(--blau-dunkel); }

.auftragsliste { display: flex; flex-direction: column; }
.auftragszeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
}
.auftragszeile:last-child { border-bottom: 0; }
.auftragszeile:hover { background: #f7f9fc; }
.auftragszeile.ist-gewaehlt { background: #eef4fd; }
.auftragszeile .name { font-weight: 620; }
.auftragszeile .adresse { color: var(--text-leise); font-size: 14px; }
.auftragszeile .art { color: var(--text-leise); font-size: 15px; }
.auftragszeile .zeit { font-size: 15px; font-variant-numeric: tabular-nums; }

.detailgitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .detailgitter { grid-template-columns: 1fr; } }

.minutenwahl { display: flex; gap: 9px; flex-wrap: wrap; margin: 8px 0 18px; }
.minutenknopf {
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: var(--radius-klein);
  padding: 11px 16px;
  font-weight: 600;
  cursor: pointer;
  min-width: 82px;
}
.minutenknopf.ist-aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }

.suchfeld {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: #fbfcfe;
  margin-bottom: 6px;
}

.einrichtungszeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.einrichtungszeile:last-child { border-bottom: 0; }
.einrichtungszeile .name { flex: 1; font-weight: 560; }
.ampel { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.ampel::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ampel.ist-aktiv { color: var(--gruen); }
.ampel.ist-inaktiv { color: var(--rot); }
.mini {
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-leise);
}
.mini:hover { color: var(--text); background: #f2f5f9; }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.kennzahl {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--flaeche);
}
.kennzahl .wert { font-size: 32px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kennzahl .beschriftung { color: var(--text-leise); font-size: 14px; margin-top: 2px; }

.schalterzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.schalterzeile span { flex: 1; }
.schalterzeile input { width: 22px; height: 22px; }

.balken { display: grid; gap: 10px; margin-top: 4px; }
.balkenzeile { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.balkenspur { display: block; background: #eef2f7; border-radius: 999px; height: 12px; overflow: hidden; }
.balkenfuell { display: block; height: 100%; min-width: 4px; border-radius: 999px; }
.balkenfuell.rot { background: var(--rot); }
.balkenfuell.blau { background: var(--blau); }
.balkenfuell.gruen { background: var(--gruen); }

@media (max-width: 860px) {
  .dispo { grid-template-columns: 1fr; }
  .seitenleiste { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; }
  .seitenleiste .logo { padding: 4px 10px; }
  .menue { grid-auto-flow: column; gap: 4px; }
  .menue button span { display: none; }
  .seitenfuss { margin: 0 0 0 auto; padding: 0; grid-auto-flow: column; align-items: center; }
  .seitenfuss .knopf { width: auto; padding: 8px 12px; min-height: 0; font-size: 14px; }
  .dispo-inhalt { grid-template-columns: 1fr; padding: 14px; }
}

/* ---------- écran de configuration (premier lancement) ---------- */
.einrichtenschirm {
  position: fixed;
  inset: 0;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  z-index: 80;
}
.einrichtenkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 24px 22px;
  width: min(100%, 460px);
}
.einrichtenkarte h2 { font-size: 20px; font-weight: 650; margin: 0 0 8px; }
.einrichtenkarte p { color: var(--text-leise); font-size: 15px; margin: 0 0 18px; }
.einrichtenkarte textarea.feld { min-height: 110px; font-size: 14px; word-break: break-all; }