:root {
  --primary: #2563EB; --primary-dark: #1D4ED8;
  --primary-bg: #EAF1FF;
  --accent: #F59E0B; --bg: #F3F5F9; --card: #FFFFFF;
  --border: #E3E8F0; --text: #0F172A; --muted: #64748B;
  --faint: #94A3B8;
  --success: #059669; --success-bg: #ECFDF5;
  --warning: #D97706; --warning-bg: #FFFBEB;
  --danger: #DC2626; --danger-bg: #FEF2F2;
  --info: #2563EB; --info-bg: #EFF6FF;
  --input-border: #94A3B8;
  --input-border-hover: #64748B;
  --tint-head: #DCE7FC; --tint-station: #D5F2E3;
  --tint-cargo: #D8EEFB; --tint-customs: #FCEACB;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, sans-serif;
  font-size: 13.5px; }
a { color: var(--primary); text-decoration: none; font-weight: 600; }
a:hover { color: var(--primary-dark); text-decoration: underline; }

/* ------------------------------ Layout ------------------------------ */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex: 0 0 250px; background: #FFFFFF;
  border-right: 1px solid var(--border); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.main { flex: 1; min-width: 0; }
.pagehead { background: var(--card); border-bottom: 1px solid var(--border);
  padding: 18px 28px; }
.pagehead h1 { margin: 0; font-size: 21px; }
.pagehead .sub { color: var(--muted); margin-top: 2px; }
.content { padding: 22px 28px 84px; max-width: 1500px; }
/* Unten Platz für den Copilot-Knopf: die letzte Zeile einer Seite (z. B.
   Top-Relationen) lag bisher unter ihm. Lange Masken: wer mit Tab durch
   die Felder geht, landete mit dem Feld unter der festen Knopfleiste —
   Fokus und Sprünge halten jetzt Abstand zu Leiste und Copilot-Knopf. */
html:has(.formbtns.sticky) { scroll-padding-bottom: 140px; }

/* ------------------------------ Sidebar ------------------------------ */
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 10px 12px; }
.brand img { width: 34px; height: 34px; color: var(--primary); }
.brand .name { font-size: 18px; font-weight: 800; }
.brand .tag { font-size: 10px; color: var(--faint); }
/* Bereiche und Fuß stehen in einem eigenen <nav> (base.html) — auf dem
   Handy die Schublade unter der Kopfleiste, hier dieselbe Spalte. */
.sidenav { display: flex; flex-direction: column; gap: 2px;
  flex: 1 0 auto; }
.navsec { color: var(--faint); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; padding: 14px 12px 4px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 9px; color: var(--muted); font-weight: 600; }
.nav svg, .nav img { width: 17px; height: 17px; }
.nav:hover { background: #EEF2F7; color: var(--text);
  text-decoration: none; }
.nav.active { background: #EAF1FF; color: var(--primary); }
.sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.badgebox { background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 11.5px; }
.badgebox .t { font-weight: 700; }
.badgebox .s { color: var(--muted); }
.version { color: var(--faint); font-size: 10px; text-align: center; }

/* ------------------------- Handy: Kopfleiste -------------------------
   Unter 760 px wird die Seitenleiste zur Kopfleiste (Logo + Knopf
   „Menü“), der Inhalt bekommt die volle Breite. Die Navigation schiebt
   sich als Schublade unter der Leiste herein, solange das Kästchen
   #navtoggle gesetzt ist; der Knopf und die Abdunklung daneben sind
   seine <label> — Auf- und Zuklappen geht damit ohne Skript. Auf dem
   Desktop sind Kästchen, Knopf und Abdunklung unsichtbar. */
.navtoggle, .navscrim, .sidebar .menubtn { display: none; }
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { width: auto; height: auto; z-index: 50; overflow: visible;
    flex-direction: row; align-items: center;
    justify-content: space-between; gap: 10px; padding: 8px 12px;
    border-right: none; border-bottom: 1px solid var(--border); }
  .brand { padding: 0 2px; min-width: 0; }
  .brand img { width: 30px; height: 30px; }
  .brand .tag { display: none; }
  .sidebar .menubtn { display: inline-flex; flex: 0 0 auto; }
  .menubtn img { width: 18px; height: 18px; }
  .menubtn .ic-close,
  .navtoggle:checked ~ .shell .menubtn .ic-open { display: none; }
  .navtoggle:checked ~ .shell .menubtn .ic-close { display: inline; }
  /* Das Kästchen bleibt per Tastatur erreichbar (Tab, Leertaste);
     sichtbar ist nur sein Fokusrahmen — am Knopf. */
  .navtoggle { display: block; position: fixed; top: 0; left: 0;
    width: 1px; height: 1px; margin: 0; opacity: 0;
    pointer-events: none; }
  .navtoggle:focus-visible ~ .shell .menubtn {
    outline: 2px solid var(--primary); outline-offset: 2px; }
  /* Schublade: bis zum unteren Rand (dvh: ohne die Browser-Leiste),
     scrollt selbst; 100 % ist hier die Höhe der Kopfleiste. */
  .sidenav { position: absolute; top: 100%; left: 0;
    width: min(300px, 86vw); height: calc(100vh - 100%);
    height: calc(100dvh - 100%); overflow-y: auto;
    padding: 6px 12px 16px; background: #FFFFFF;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 18px color-mix(in srgb, var(--text) 18%,
                                     transparent);
    transform: translateX(-101%); visibility: hidden;
    transition: transform 0.18s ease, visibility 0.18s; }
  .navtoggle:checked ~ .shell .sidenav { transform: none;
    visibility: visible; }
  .navtoggle:checked ~ .shell .navscrim { display: block;
    position: fixed; inset: 0; z-index: 49;
    background: color-mix(in srgb, var(--text) 35%, transparent); }
  /* Offenes Menü: die Seite dahinter scrollt nicht mit, und der
     Copilot-Knopf verdeckt nicht die letzten Einträge. */
  body:has(.navtoggle:checked) { overflow: hidden; }
  .navtoggle:checked ~ .cp-fab { display: none; }
  .nav { padding: 11px 12px; }
  .pagehead { padding: 14px 16px; }
  .content { padding: 16px 16px 76px; }
}

/* ------------------------------ Cards ------------------------------ */
.card { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.card h2 { margin: 0 0 2px; font-size: 15px; }
.card .hint { color: var(--faint); font-size: 11.5px; margin-bottom: 10px; }
.cardrow { display: flex; gap: 14px; flex-wrap: wrap; }
.cardrow > .card { flex: 1; min-width: 210px; }
/* Kachel als Link (Dashboard-KPIs, Heute-Panel): gleiche Optik wie die
   nicht-klickbaren Karten, nur mit Hover-Rahmen als Klick-Hinweis. */
a.card { display: block; color: inherit; font-weight: inherit; }
a.card:hover { border-color: var(--primary); text-decoration: none; }
.kpi .label { color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; }
.kpi .value { font-size: 26px; font-weight: 800; margin: 4px 0; }
.kpi .delta-up { color: var(--success); font-weight: 700; }
.kpi .delta-down { color: var(--danger); font-weight: 700; }

/* ------------------------------ Tabellen ------------------------------ */
table.data { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; }
table.data th { text-align: left; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--card); }
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: #EEF2F7; }
/* Zahlenspalten: Kopf rechtsbündig über den Beträgen — `table.data th`
   oben ist spezifischer als `th.num` und hielt jeden Kopf links. */
td.num, th.num, table.data th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
/* Beträge, Datum, Nummern (erste Spalte, Tour) brechen nie um — „688 €“
   oder „A-2026-5“ auf zwei Zeilen liest niemand. Eine zweite Zeile
   darunter (Ort, Status) darf umbrechen. */
td.num, td.nowrap, td .cell-links a { white-space: nowrap; }
td.nowrap .cell-sub { white-space: normal; }
td.pos { color: var(--success); font-weight: 700; }
td.neg { color: var(--danger); font-weight: 700; }
td.warn { color: var(--warning); font-weight: 700; }
td.muted { color: var(--muted); }
/* Ist die farbige Zelle die verlinkte erste Spalte (Termine: Status),
   behält der Link die Farbe der Zelle — „überfällig“ rot, nicht blau */
td.pos > a, td.neg > a, td.warn > a { color: inherit; }
/* Zelle mit zweiter Zeile (z. B. Ladestelle unter dem Datum) und Zelle
   mit mehreren Links (Auftragsnummern einer Tour) */
td .cell-sub { display: block; color: var(--muted); font-size: 12px;
  font-weight: 500; }
td .cell-links a + a { margin-left: 6px; }
td .pill + .cell-sub { margin-top: 2px; }
/* Zielzeile eines Sprung-Ankers (#tour-12) kurz hervorheben */
table.data tr:target td { background: var(--primary-bg); }

/* ------------------------------ Bausteine ------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid
  var(--border); background: var(--card); color: var(--text); font-weight: 700;
  border-radius: 9px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
.btn:hover { background: #EEF2F7; text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary);
  color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 700; }
.pill.danger { background: var(--danger-bg); color: var(--danger); }
.pill.warning { background: var(--warning-bg); color: var(--warning); }
.pill.success { background: var(--success-bg); color: var(--success); }
.pill.info { background: var(--info-bg); color: var(--info); }
.chip { display: inline-block; background: var(--bg); border: 1px solid
  var(--border); border-radius: 999px; padding: 5px 12px; font-weight: 600;
  color: var(--muted); }
.chip.active { background: #EAF1FF; color: var(--primary);
  border-color: var(--primary); }
.banner { background: var(--warning-bg); border: 1px solid var(--warning);
  color: var(--warning); border-radius: 10px; padding: 10px 14px;
  font-weight: 600; margin-bottom: 14px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px; }
/* Eingabefelder überall weiß mit klar sichtbarem Rand (W8) */
input[type=text], input[type=password], input[type=number],
input[type=search], input[type=email], input[type=tel], input[type=url],
select, textarea {
  border: 1px solid var(--input-border); border-radius: 9px;
  padding: 8px 10px; font: inherit; background: var(--card);
  color: var(--text); }
input[type=text]:hover, input[type=password]:hover,
input[type=number]:hover, input[type=search]:hover,
input[type=email]:hover, input[type=tel]:hover, input[type=url]:hover,
select:hover, textarea:hover {
  border-color: var(--input-border-hover); }
/* Dateiauswahl: der Knopf des Browsers sieht aus wie unsere Knöpfe */
input[type=file] { font: inherit; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 700;
  color: var(--text); background: var(--card); cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 14px;
  margin-right: 10px; }
input[type=file]::file-selector-button:hover {
  background: #EEF2F7; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid #EAF1FF; border-color: var(--primary); }
.log { background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; font-family: Consolas, monospace;
  font-size: 12px; white-space: pre-wrap; max-height: 300px;
  overflow-y: auto; }
.report { white-space: pre-wrap; }
.insight { border-left: 4px solid var(--info); }
.insight.critical { border-left-color: var(--danger); }
.insight.warning { border-left-color: var(--warning); }
.insight.opportunity { border-left-color: var(--success); }
.insight .facts { color: var(--muted); margin-top: 4px; }
.insight .action { color: var(--primary); font-weight: 600; margin-top: 4px; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.login-wrap { min-height: 100vh; display: flex; align-items: center;
  justify-content: center; }
.login-card { width: 380px; max-width: calc(100% - 32px); }
/* isolation: Leaflet stapelt Kacheln und Knöpfe mit z-index 400–1000 —
   eingeschlossen in die Karte, statt über Copilot-Schublade und
   Kopfleiste (Handy) zu liegen. */
#map { height: 460px; border-radius: 12px;
  border: 1px solid var(--border); isolation: isolate; }
/* Track & Trace: die Karte ist die Schlagzeile der Seite — mehr Platz als
   auf /app/routing, wo Stationen/Kostensätze links konkurrieren. */
#map.mapbig { height: 560px; }
.grid2 { display: grid; grid-template-columns: 340px 1fr; gap: 14px;
  align-items: start; }
/* Dashboard: Diagramm (drei Teile) neben der Liste (zwei Teile) */
.grid2.chart-split { grid-template-columns: 3fr 2fr; }
/* Fahrzeug-Marker (Track & Trace) — dieselbe Optik wie die Desktop-Karte
   (ui/widgets/map_view.py): farbiger Kreis nach Fahrzustand, LKW-Symbol. */
.vehicle-pin { width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 1px 5px rgba(15,23,42,.45); }
.resultgrid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px; }
.resultgrid .sub { color: var(--muted); font-size: 12px;
  font-weight: 600; }
/* Routing: Kostensätze kompakt — Beschriftung, Feld und Einheit in einer
   Zeile, auch bei „kWh/100km“ und „Ladeleistung Ø“ (W13.5) */
.ratetable td { padding: 3px 8px 3px 0; white-space: nowrap; }
.ratetable input[type=number] { width: 92px; }
.resultgrid .label { color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.6px; }
.resultgrid .value { font-size: 17px; font-weight: 800; }
.hint.pos { color: var(--success); font-weight: 700; }
.hint.neg { color: var(--danger); font-weight: 700; }
.stoprow { margin-bottom: 6px; }
.stoprow select { font-size: 12px; padding: 2px 6px; margin: 0 6px; }
/* Handy: Routing (Stationen | Karte) und Dashboard (Diagramm | Liste)
   untereinander — neben 340 px bliebe der Karte keine Breite —, das
   Routing-Ergebnis zweispaltig. */
@media (max-width: 760px) {
  .grid2, .grid2.chart-split { grid-template-columns: minmax(0, 1fr); }
  .resultgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------ Formulare ------------------------------ */
.cpform { max-width: 640px; }
.frow { display: grid; grid-template-columns: 200px 1fr; gap: 12px;
  align-items: center; margin-bottom: 12px; }
.frow > label { color: var(--muted); font-weight: 600; text-align: right; }
.fcontrol { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.fcontrol input, .fcontrol select, .fcontrol textarea { flex: 1;
  min-width: 0; }
.fsuffix { color: var(--muted); white-space: nowrap; }
/* Hilfetext unter das Feld, nicht daneben — sonst quetscht er die Auswahl. */
/* min-width/overflow-wrap: ein langer Pfad ohne Leerzeichen („Die
   Einstellungen zeigen auf C:/…/Dispoliste.xlsx“) schob die Seite auf
   dem Handy nach rechts aus dem Bild. */
.fhelp { color: var(--faint); font-size: 11.5px; flex-basis: 100%;
  min-width: 0; overflow-wrap: anywhere; }
.fcheck { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; }
.fcheck input { width: 16px; height: 16px; }
.formbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
  grid-column: 1 / -1; }
/* Handy: Beschriftung über dem Feld — neben der 200-px-Spalte bliebe
   dem Feld kaum Platz. */
@media (max-width: 640px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .frow > label { text-align: left; }
}
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { padding: 5px 10px; font-size: 12px; }
/* Zeilenknöpfe kompakt (_cells.row_buttons, W7.1): der erste sichtbar,
   die übrigen im Menü „⋯“ — ein <details>, das ohne Skript aufgeht;
   Rechtsklick auf die Zeile öffnet es auch (base.html). Die Spalte ist
   nur so breit wie ihr Inhalt, die Datenspalten behalten den Platz. */
td.rowbtns { white-space: nowrap; width: 1%; text-align: right; }
.rowbtns > * + * { margin-left: 6px; }
.rowform { display: inline; margin: 0; }
.rowmenu { position: relative; display: inline-block;
  vertical-align: middle; text-align: left; }
.rowmenu > summary { list-style: none; font-size: 15px; line-height: 1;
  padding: 3px 10px 6px; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu[open] > summary { background: var(--primary-bg);
  border-color: var(--primary); color: var(--primary); }
.rowmenu-list { position: absolute; right: 0; top: calc(100% + 4px);
  z-index: 30; min-width: 190px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.rowmenu-list .rowform { display: block; }
.rowmenu-list .btn { display: flex; width: 100%; justify-content: flex-start;
  border-color: transparent; background: none; font-size: 13px;
  padding: 8px 10px; }
.rowmenu-list .btn:hover { background: #EEF2F7; }
.rowmenu-list .btn.primary { color: var(--primary); }
.rowmenu-list .btn.danger { color: var(--danger); }
.rowmenu-list .btn.danger:hover { background: var(--danger-bg); }
/* Das Menü darf über die Tabelle hinausragen (letzte Zeile) */
table.data.rowmenus { overflow: visible; }
/* Handy: eine breite Tabelle scrollt in ihrem Rahmen (.tablewrap um
   jede table.data) statt die ganze Seite zu verbreitern. Das Menü „⋯“
   wird dort zur Leiste am unteren Rand — im scrollenden Rahmen würde
   es sonst abgeschnitten. */
@media (max-width: 760px) {
  .tablewrap { overflow-x: auto; }
  .rowmenu-list { position: fixed; top: auto; left: 12px; right: 12px;
    bottom: 12px; z-index: 62; min-width: 0; max-width: none; }
  .rowmenu-list .btn { padding: 12px; font-size: 14px; }
}
.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-weight: 600; }
.flash.ok { background: var(--success-bg); color: var(--success);
  border: 1px solid var(--success); }
.flash.err { background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger); }
/* Ausgeführt, aber mit Hinweis (z. B. Überladung) — nicht grün melden. */
.flash.warn { background: var(--warning-bg); color: var(--warning);
  border: 1px solid var(--warning); }
.checklist { max-height: 340px; overflow-y: auto; border: 1px solid
  var(--border); border-radius: 10px; padding: 8px 12px; }
.checklist label { display: flex; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--border); align-items: center; }
.checklist label:last-child { border-bottom: none; }

/* -------------------------- Dispo-Kalender --------------------------
   Dispo-Tafel, kein Bericht: Touren lassen sich auf eine andere Zelle
   (Fahrzeug × Tag) ziehen — dieselbe Balken-/Chip-Optik wie das
   Dispo-Board (`.board-drop`, `.ocard`), hier nur in einem Wochenraster
   statt einer flachen Liste. */
.cal { table-layout: fixed; }
.cal td { vertical-align: top; }
.cal-week { font-weight: 700; margin-left: 6px; }
.cal-rowhead { font-weight: 700; white-space: nowrap; }
.cal-driver { font-weight: 500; font-size: 11px; margin-top: 2px; }
.cal-cell { min-height: 64px; padding: 6px; }
.cal-today { background: var(--info-bg); }

/* Auslastung (Gewicht/Lademeter) — ein leerer Balken sagt „frei" schneller
   als eine Auftragszahl; nur da, wo die Kapazität des Fahrzeugs bekannt ist. */
.cal-util { height: 4px; border-radius: 3px; background: var(--border);
  overflow: hidden; margin-bottom: 5px; }
.cal-util-bar { height: 100%; background: var(--success); }
.cal-util-bar.high { background: var(--warning); }
.cal-util-bar.over { background: var(--danger); }

/* Zwei Zeilen: oben die Tournummer über die ganze Breite, darunter
   Auswahl, Griff und Auftragszahl — in einer Zeile blieben der Nummer
   bei 1280–1440 px 0 px (nur „○ ⁚⁚ 2 Auftr.“ zu sehen). */
.cal-tour { display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 5px; cursor: grab;
  border-left: 3px solid var(--border); background: var(--bg);
  border-radius: 6px; padding: 3px 6px; margin-bottom: 4px; }
.cal-tour:hover { border-left-color: var(--primary); }
.cal-tour.dragging { opacity: 0.5; }
/* Status der Tour als Farbe — geplant/unterwegs/abgeschlossen sahen
   bisher alle gleich aus. */
.cal-tour.cal-info { border-left-color: var(--info);
  background: var(--info-bg); }
.cal-tour.cal-warning { border-left-color: var(--warning);
  background: var(--warning-bg); }
.cal-tour.cal-success { border-left-color: var(--success);
  background: var(--success-bg); }
.cal-pick { width: 13px; height: 13px; margin: 0; flex: 0 0 auto; }
.cal-tour a { order: -1; flex: 1 0 100%; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Griff ist für Finger und Stift — mit der Maus zieht die ganze
   Karte, dort bekommt die Auftragszahl seinen Platz. */
@media (hover: hover) and (pointer: fine) {
  .cal-tour .grip { display: none; }
}
.cal-count { color: var(--muted); font-weight: 500; font-size: 11px;
  margin-left: auto; white-space: nowrap; }
.cal-here { width: 100%; margin-top: 2px; }

/* Zweispaltig: Woche links, Pool „nicht disponiert" rechts — dieselbe
   Aufteilung wie das Dispo-Board (`.board`), nur mit dem Raster statt der
   Tourenliste als Hauptspalte. */
.cal-layout { display: grid;
  grid-template-columns: 1fr minmax(260px, 320px); gap: 14px;
  align-items: start; }
/* Bis 1366 px steht der Pool unter der Woche: daneben blieben je Tag nur
   80 px — zu wenig für Tournummer, Auftragszahl und „Hierher“. */
@media (max-width: 1366px) {
  .cal-layout { grid-template-columns: 1fr; }
}
.cal-gridwrap { overflow-x: auto; }
/* Handy: die Woche behält ihre Breite und scrollt in ihrem Rahmen,
   die Fahrzeugspalte bleibt dabei stehen. Gequetscht auf 390 px
   überlappten Kopf, Kennzeichen und „Hierher“. overflow: clip statt
   hidden — sonst wäre die Tabelle selbst der Scrollrahmen und sticky
   wirkungslos; getrennte Rahmen, weil Chrome zusammengefasste Rahmen
   nicht mit der klebenden Zelle mitnimmt (1 px Lücke am linken Rand). */
@media (max-width: 760px) {
  .cal { min-width: 860px; }
  table.data.cal { overflow: clip; border-collapse: separate;
    border-spacing: 0; }
  /* getrennte Rahmen folgen dem Radius der Ablagezellen — eckig, sonst
     enden die Zeilenlinien in kleinen Bögen */
  .cal td.cal-cell { border-radius: 0; }
  .cal thead th:first-child, .cal td.cal-rowhead { position: sticky;
    left: 0; z-index: 2; background: var(--card);
    box-shadow: 1px 0 0 var(--border); }
}
.cal-pool { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; }
.cal-pool h2 { margin: 0 0 10px; font-size: 14px;
  display: flex; align-items: center; gap: 8px; }
.cal-pool-list { display: flex; flex-direction: column; gap: 8px;
  max-height: 520px; overflow-y: auto; margin-bottom: 10px; }

/* --------------------------- Dispo-Board ---------------------------- */
.board { display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 14px; align-items: start; }
/* Unter 900 px stapeln — auf dem Tablet steht die Auftragsliste dann
   über den Touren, statt beide unlesbar schmal zu quetschen. */
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
}
.board section { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; }
.board h2 { margin: 0 0 10px; font-size: 14px;
  display: flex; align-items: center; gap: 8px; }
.board-count { background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 1px 9px; font-size: 12px;
  color: var(--muted); }
.board-drop { border-radius: 10px; transition: background 0.12s,
  border-color 0.12s; }
.board-pool .board-drop { display: flex; flex-direction: column; gap: 8px;
  min-height: 90px; padding: 4px; margin-bottom: 10px; }
.board-drop.dragover { background: #EAF1FF;
  outline: 2px dashed var(--primary); outline-offset: -3px; }

.ocard { display: flex; gap: 9px; align-items: flex-start; cursor: grab;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; }
.ocard:hover { border-color: var(--primary); }
.ocard.dragging { opacity: 0.5; }
.ocard input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.ocard-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ocard-top { font-weight: 700; display: flex; gap: 8px;
  justify-content: space-between; }
.ocard-price { color: var(--muted); font-weight: 600; white-space: nowrap; }
.ocard-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

.board-tours { display: flex; flex-direction: column; gap: 10px;
  background: none !important; border: none !important; padding: 0 !important; }
.tourcard { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 13px; }
.tourcard-head { display: flex; justify-content: space-between;
  align-items: center; gap: 10px; }
.tourcard-sub { font-size: 12px; margin-top: 1px; }
.tourcard:target { border-color: var(--primary);
  background: var(--primary-bg); }
.tourcard-orders { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 9px 0; min-height: 26px; }
.ochip { background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 12px; cursor: grab; }
.ochip.dragging { opacity: 0.5; }

/* LKW/Fahrer direkt an der Tourkarte zuweisen */
.tourcard-actions { display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; }
.tourcard-crew { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tourcard-crew select { flex: 1 1 130px; min-width: 0; font-size: 13px;
  padding: 5px 8px; }

/* W14: Touren als Zeilen unter der Auftragsliste — jede Zeile ist
   Ablageziel, ▸ klappt die Aufträge (Chips) und LKW/Fahrer auf */
.tourrows { margin-bottom: 14px; }
.tourrows tr.board-drop.dragover > td { background: #EAF1FF;
  box-shadow: inset 0 0 0 2px var(--primary); }
.tourrows .tr-many { display: inline-block; padding: 2px 9px;
  border-radius: 20px; background: var(--primary-bg); color: var(--primary);
  font-weight: 700; font-size: 12px; cursor: pointer; }
.tourrows tr.tl-detail > td .tourcard-orders { margin: 0 0 8px; }
.tourrows tr.tl-detail > td .tourcard-crew { margin-top: 0; }
.tourrows td.rowbtns { white-space: nowrap; }
/* W15: an der Tourzeile PDF · Word · WhatsApp statt „Hierher“ — die
   Knöpfe bleiben auch unter 1600 px sichtbar (die Tourliste der
   Auftragsseite hat kein Menü „⋯“, das sie ersetzte) */
.tlist.t-rows th.w-acts { width: 196px; }
@media (max-width: 1599px) {
  .tlist.t-rows td.rowbtns > .btn { display: inline-block; }
}
/* W15: Fenster „Reihenfolge der Fahrt“ (_tourseq.html) — eine Zeile je
   Station mit Zahlenfeld; auf der Auftragsseite und in den Details der
   Disposition. Eigene Tabelle, nicht im festen Raster der Tourliste. */
.seqwin { background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: 10px;
  padding: 8px 12px 10px; margin: 0 0 10px; }
.seqwin-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 12px; margin-bottom: 6px; }
.seqwin-head .muted { font-size: 12px; }
.seqwin-foot { margin-top: 8px; }
.tlist table.data.seqtab { table-layout: auto; width: 100%; margin: 0;
  min-width: 620px; font-size: 12.5px; border: none; border-radius: 0; }
.tlist table.data.seqtab th, .tlist table.data.seqtab td {
  padding: 4px 8px; }
.tlist table.data.seqtab th { white-space: nowrap; }
.tlist table.data.seqtab td { white-space: normal; overflow: visible;
  vertical-align: middle; }
.tlist table.data.seqtab td.nowrap { white-space: nowrap; }
.tlist table.data.seqtab .seq-nr { width: 70px; }
.seqtab input[type=number] { width: 62px; padding: 4px 6px;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.seqtab .seq-role { font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--success); }
.seqtab tr.u .seq-role { color: var(--unload-text); }
.seqtab tr.l > td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.seqtab tr.u > td:first-child { box-shadow: inset 3px 0 0 var(--unload); }
/* Auftragszeilen als Zieh-Quellen auf der Auftragsseite */
.data tr[draggable="true"] { cursor: grab; }
.data tr.dragging { opacity: 0.5; }
.board-title { font-size: 15px; margin: 18px 0 4px; }
.dragcell { white-space: nowrap; }
.dragcell input { vertical-align: middle; }

/* Griff zum Ziehen mit Finger oder Stift (Pointer-Events, _boardjs.html):
   Tablets kennen kein natives Drag&Drop für Zeilen. Nur der Griff sperrt
   das Scrollen (touch-action), der Rest der Zeile bleibt scrollbar. */
.grip { display: inline-block; width: 12px; height: 20px; margin-left: 6px;
  flex: 0 0 auto; cursor: grab; touch-action: none; vertical-align: middle;
  background: radial-gradient(circle, var(--muted) 1.2px, transparent 1.6px)
    0 0 / 6px 6px; opacity: .75; }
.ochip .grip { height: 12px; margin: 0 4px 0 0; }
.cal-tour .grip { height: 14px; width: 10px; margin: 0; }
.ocard .grip { height: 26px; margin: 0; }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none;
  background: var(--card); border: 1px solid var(--primary);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700;
  box-shadow: 0 3px 12px rgba(15,23,42,.25); }

/* Kalender an Datumsfeldern (W12, _datepick.html): Symbol rechts im
   Feld (Tippen bleibt), darunter das Blatt — Woche ab Montag mit
   Kalenderwoche, heute umrandet, gewählt gefüllt, Wochenende gedämpft */
.dpick { position: relative; display: flex; flex: 1 1 auto;
  min-width: 0; }
.dpick > input { flex: 1 1 auto; min-width: 0; width: 100%;
  padding-right: 38px; }
.dpick-btn { position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; }
.dpick-btn::before { content: ''; width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url(/app/static/icons/calendar.svg) center / contain
    no-repeat;
  mask: url(/app/static/icons/calendar.svg) center / contain no-repeat; }
.dpick-btn:hover, .dpick-btn[aria-expanded=true] { color: var(--primary);
  background: var(--primary-bg); }
/* Über dem Copilot-Knopf (60): auf dem Handy lag er auf dem letzten
   Sonntag der Monatsansicht. Ein Klick daneben schließt das Blatt,
   Schublade und Menü kommen sich mit ihm also nie in die Quere. */
.dpick-pop { position: absolute; z-index: 65; width: 304px;
  padding: 10px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.2);
  font-size: 13px; }
.dpick-pop.months { width: 288px; }
.dp-head { display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; }
.dp-head select { padding: 5px 6px; border-radius: 7px; font-size: 13px;
  font-weight: 600; }
.dp-head .dp-month { flex: 1 1 auto; min-width: 0; }
.dp-head .dp-year { flex: 0 0 auto; }
.dpick-pop.months .dp-year { flex: 1 1 auto; text-align: center; }
.dp-nav { flex: 0 0 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--text); font-size: 18px;
  line-height: 1; cursor: pointer; }
.dp-nav:hover { border-color: var(--primary); color: var(--primary); }
.dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dp-grid th { padding: 0 0 6px; color: var(--muted); font-size: 11px;
  font-weight: 700; text-align: center; }
.dp-grid td { padding: 1px; text-align: center; }
.dp-grid .dp-wk { width: 30px; color: var(--faint); font-size: 10.5px;
  font-weight: 600; }
.dp-day { width: 100%; height: 32px; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; cursor: pointer; }
.dp-day.we { color: var(--muted); }
.dp-day.out { color: var(--faint); }
.dp-day:hover { background: var(--primary-bg); }
.dp-day:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--primary);
  font-weight: 700; }
.dp-day.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; }
.dp-months .dp-day { height: 40px; }
.dp-foot { display: flex; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 560px) {
  .dpick-pop, .dpick-pop.months { width: calc(100vw - 16px); }
  .dp-day { height: 38px; }
}

/* Ablagezone: Auftrag/Angebot aus E-Mail oder PDF (KI) */
.dropzone { display: flex; align-items: center; gap: 12px;
  border: 2px dashed var(--border); border-radius: 12px; padding: 10px 14px;
  margin-bottom: 14px; background: var(--card); }
.dropzone.dragover { border-color: var(--primary);
  background: #EAF1FF; }
.dropzone.busy { opacity: .6; }
.dropzone-icon { width: 26px; height: 26px; opacity: .7; flex: 0 0 auto; }
.dropzone-text { display: flex; flex-direction: column; gap: 2px; flex: 1;
  font-size: 12.5px; min-width: 0; }
.dropzone-outlook { font-size: 11.5px; }
.dropzone label.btn { cursor: pointer; }
/* Handy: Text neben dem Symbol, die Knöpfe in der Zeile darunter */
@media (max-width: 760px) {
  .dropzone { flex-wrap: wrap; }
  .dropzone-text { flex: 1 1 220px; }
}

/* Formular-Abschnitte, Infozeile, Begleiter (Einheit hinter der Menge) */
.fsection { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 20px 0 10px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border); }
.cpform .fsection:first-child { margin-top: 4px; }
.finfo { font-weight: 700; }
.fcontrol select.fcompanion { flex: 0 1 230px; }

/* Breite Masken (Auftrag/Angebot): Abschnitte als Karten, Karten mit
   gleicher Gruppe nebeneinander in einer Zeile (forms.render_fields).
   Die Felder einer Karte stehen als Zellen im Raster, Beschriftung
   darüber; eine Karte allein in ihrer Zeile bekommt vier Spalten.
   Die Maske ist zugleich Container: schmale Fenster (Tablet, Split-
   Screen) schalten nach ihrer eigenen Breite um, nicht nach dem
   Bildschirm — die Seitenleiste nimmt dort 250 px weg (erst unter
   760 px wird sie zur Kopfleiste). */
.cpform.wide { max-width: 1180px; container: cpform / inline-size; }
/* Zeilen außerhalb der Karten (Auftragsnummer, Vorlage/Serie): bündig
   mit den Karten statt rechtsbündiger Beschriftung, nicht über 720 px */
.cpform.wide > .frow { max-width: 720px; }
.cpform.wide > .frow > label { text-align: left; }
/* Umbrechende Kartenzeile: eine Karte, die allein in eine neue Zeile
   rutscht, nimmt die ganze Breite statt einer halben Spalte. */
.fgroup-row { display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 16px; }
.fgroup { flex: 1 1 300px; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin: 0; min-width: 0; }
.fgroup legend { padding: 0 6px; margin-left: -6px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); }
.fgroup .fbody { display: grid; gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgroup-row.solo .fbody { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgroup > .fhelp { margin-top: 10px; }
/* Karten farbig je Gruppe (Kundenwunsch W7, kräftiger seit W8): Fläche
   in der Gruppentönung, Rand in der Gruppenfarbe (links breit), die
   Legende ebenso — Kopf blau, Stationen grün, Ladung himmelblau, Zoll
   orange. Die Eingaben bleiben weiß mit klarem Rand. */
.fgroup[data-group] { border-width: 1px 1px 1px 5px; }
.fgroup[data-group=kopf] { background: var(--tint-head);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  border-left-color: var(--primary); }
.fgroup[data-group=kopf] legend { color: var(--primary); }
.fgroup[data-group=stationen] { background: var(--tint-station);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  border-left-color: var(--success); }
.fgroup[data-group=stationen] legend { color: var(--success); }
.fgroup[data-group=ladung] { background: var(--tint-cargo);
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  border-left-color: var(--info); }
.fgroup[data-group=ladung] legend { color: var(--info); }
.fgroup[data-group=zoll] { background: var(--tint-customs);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  border-left-color: var(--warning); }
.fgroup[data-group=zoll] legend { color: var(--warning); }
.fgroup legend { background: var(--card); border-radius: 6px; }
/* Vom Skript eingeblendeter Hinweis unter einem Feld (Field.notice) */
.fnotice { color: var(--warning); font-size: 11.5px; font-weight: 700;
  flex-basis: 100%; margin-top: 4px; }
.fnotice[hidden] { display: none; }
/* Was „automatisch“ gerade heißt (W9): unter USt-Satz und Zahlungsziel,
   solange das Feld leer ist — „→ 20 % (Österreich)“ */
.fauto { color: var(--primary); font-size: 12px; font-weight: 700;
  margin-top: 4px; }
.fauto[hidden] { display: none; }
/* Lange Masken (W9.2): die Knopfleiste bleibt unten im Bild, über die
   ganze Kartenbreite, rechts die Zusammenfassung „Kunde · Ladungen ·
   Brutto“ — Speichern ohne bis ans Ende zu scrollen */
.formbtns.sticky { position: sticky; bottom: 0; z-index: 20;
  align-items: center; margin: 18px -18px -16px; padding: 12px 18px;
  background: var(--card); border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -8px 18px -14px rgba(15,23,42,.45); }
.formsum { margin-left: auto; color: var(--muted); font-size: 12.5px;
  font-weight: 700; text-align: right; }
/* Der Copilot-Knopf schwebt über der Leiste statt auf ihren Knöpfen */
body:has(.formbtns.sticky) .cp-fab { bottom: 86px; }
/* Zurück vom „＋ Neu“: die Karte mit der neuen Ladestelle leuchtet kurz */
.lcard { transition: box-shadow .5s; }
.lcard.lcard-new { box-shadow: 0 0 0 3px var(--primary),
  0 6px 18px -6px rgba(15,23,42,.35); }
/* Unsichtbarer Speichern-Knopf vorneweg: Enter heißt Speichern */
.fdefault { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* Preisvorschlag und KI-Preis in der Karte Frachtpreis */
.fprice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Zuklappbare Abschnitte (Zollabfertigung, Vorlage/Serie) */
.ffold { margin: 4px 0 16px; }
.ffold > summary { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; cursor: pointer; list-style: none; padding: 8px 0 6px;
  margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.ffold > summary::-webkit-details-marker { display: none; }
.ffold > summary::before { content: "▸"; color: var(--muted);
  transition: transform .12s; display: inline-block; }
.ffold[open] > summary::before { transform: rotate(90deg); }
.ffold-title { font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text); }
.ffold-hint { font-size: 12px; color: var(--faint); }
.ffold > summary:hover .ffold-title { color: var(--primary); }
.fgroup[data-group=serie] { background: var(--bg);
  border-left-color: var(--muted); }
/* Zuschläge und Einkauf (W11.1): wie der Kopf blau getönt; die Tabelle
   der Zuschläge kompakt, Beträge rechts; die Marge groß, farbig nach
   Zielmarge (grün erreicht, orange darunter, rot negativ) */
.fgroup[data-group=kalk] { background: var(--tint-head);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  border-left-color: var(--primary); }
.fgroup[data-group=kalk] legend { color: var(--primary); }
/* Die Zuschlags-Karte bekommt doppelt so viel Breite wie „Einkauf“ —
   sechs Spalten passen sonst nicht; notfalls scrollt die Tabelle */
.fgroup-row > .fgroup[data-group=kalk]:first-child { flex: 2 1 460px; }
.sc-editor { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.sc-table .sc-kind { min-width: 168px; }
.sc-table th { padding: 0 6px 4px 0; color: var(--muted); font-size: 11px;
  font-weight: 600; text-align: left; }
.sc-table td { padding: 3px 6px 3px 0; vertical-align: middle; }
.sc-table select, .sc-table input { width: 100%; min-width: 0; }
.sc-table .sc-num { white-space: nowrap; }
.sc-table .sc-num input { width: 70px; }
.sc-table input[readonly] { background: var(--bg); color: var(--faint);
  border-style: dashed; }
.sc-unit { margin-left: 4px; color: var(--muted); font-size: 12px; }
.sc-remove { width: 26px; height: 26px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--muted);
  cursor: pointer; line-height: 1; }
.sc-remove:hover { border-color: var(--danger); color: var(--danger); }
.sc-amount { min-width: 84px; font-weight: 700; text-align: right;
  white-space: nowrap; }
.sc-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; }
.sc-total { color: var(--muted); font-size: 12.5px; }
.sc-total b { color: var(--text); }
.fmargin { display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); }
.fmargin-value { font-size: 16px; font-weight: 800; }
.fmargin-hint { color: var(--muted); font-size: 12px; }
.fmargin-value[data-state=ok], #f_margin_info[data-state=ok] {
  color: var(--success); }
.fmargin-value[data-state=low], #f_margin_info[data-state=low] {
  color: var(--warning); }
.fmargin-value[data-state=neg], #f_margin_info[data-state=neg] {
  color: var(--danger); }
@media (max-width: 640px) {
  .sc-table thead { display: none; }
  .sc-table tr { display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--border); }
}
/* Anhänge (W11.4): links die Dateien (gespeichert mit Download und
   „Entfernen“, neue gestrichelt mit „wird beim Speichern angehängt“),
   rechts die Ablagezone; die Büroklammer als Maske in der Textfarbe */
.fgroup[data-group=anhang] { background: var(--bg);
  border-left-color: var(--muted); }
.clip-ic { display: inline-block; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: url(/app/static/icons/paperclip.svg) center / contain
    no-repeat;
  mask: url(/app/static/icons/paperclip.svg) center / contain no-repeat; }
.fatt { display: grid; gap: 10px 16px; align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
.fatt-files { display: flex; flex-direction: column; gap: 6px;
  min-width: 0; }
.fatt-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.fatt-list[hidden] { display: none; }
.fatt-item { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); }
.fatt-item .clip-ic { color: var(--muted); }
.fatt-item.new { border-style: dashed; border-color: var(--primary); }
.fatt-item.bad { border-color: var(--danger); }
.fatt-item.bad .fatt-meta { color: var(--danger); font-weight: 700; }
.fatt-name { font-weight: 600; overflow-wrap: anywhere; }
.fatt-meta { color: var(--muted); font-size: 12px; }
.fatt-del { margin-left: auto; display: inline-flex; align-items: center;
  gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.fatt-item:has(.fatt-del input:checked) .fatt-name {
  text-decoration: line-through; opacity: .55; }
.fatt-x { margin-left: auto; border: 0; background: none; padding: 0 4px;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.fatt-x:hover { color: var(--danger); }
.fatt-err { color: var(--danger); font-size: 12px; font-weight: 700; }
.fatt-empty { color: var(--muted); font-size: 13px; padding: 7px 0; }
.fatt-zone { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 14px 12px; text-align: center;
  border: 2px dashed var(--border); border-radius: 10px;
  background: var(--card); color: var(--muted); font-size: 13px;
  cursor: pointer; }
.fatt-zone b { color: var(--primary); }
.fatt-zone .clip-ic { width: 20px; height: 20px; }
.fatt-zone:hover, .fatt-zone.dragover { border-color: var(--primary);
  background: var(--primary-bg); }
.fatt-zone:focus-within { outline: 2px solid var(--primary);
  outline-offset: 2px; }
.fatt.js .fatt-zone input[type=file] { position: absolute; width: 1px;
  height: 1px; opacity: 0; pointer-events: none; }
.fatt-zone input[type=file] { max-width: 100%; font-size: 12px; }
.fatt-zone-hint { font-size: 11.5px; color: var(--faint); }
@media (max-width: 760px) {
  .fatt { grid-template-columns: minmax(0, 1fr); }
}
.cell-clip { display: inline-flex; align-items: center; gap: 2px;
  margin-left: 6px; color: var(--muted); font-size: 12px;
  vertical-align: middle; }
.cell-clip:hover { color: var(--primary); text-decoration: none; }
.cell-clip .clip-ic { width: 13px; height: 13px; }
/* Strecke (W11.3) in der Karte Frachtpreis: Fakten fett, Herkunft
   klein; nach geänderten Stationen blass mit Hinweis */
.froute { display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); }
.froute-facts { font-weight: 700; }
.froute-info { color: var(--muted); font-size: 12px; }
.froute.stale .froute-facts { opacity: .5; }
.froute-stale { color: var(--warning); font-size: 12px; font-weight: 700; }
.froute-stale[hidden] { display: none; }
/* Anforderungen ans Fahrzeug (W11.2): wie die Ladung getönt; die
   Prüfung gegen den zugeteilten Zug als Kasten — orange mit Liste, wenn
   etwas fehlt, grün wenn alles passt */
.fgroup[data-group=anf] { background: var(--tint-cargo);
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  border-left-color: var(--info); }
.fgroup[data-group=anf] legend { color: var(--info); }
.freq { padding: 8px 10px; border-radius: 8px; color: var(--muted);
  font-size: 12.5px; background: var(--card);
  border: 1px solid var(--border); }
.freq.bad { color: var(--warning); background: var(--warning-bg);
  border-color: transparent; }
.freq.ok { color: var(--success); background: var(--success-bg);
  border-color: transparent; font-weight: 700; }
.freq ul { margin: 4px 0 0; padding-left: 18px; }
/* Texte nach Empfänger (W11): intern, Fahrer, Rechnung — neutral, drei
   Karten nebeneinander; der Hilfetext sagt, wo der Text erscheint */
.fgroup[data-group=hinweise] { background: var(--bg);
  border-left-color: var(--muted); }
.fgroup[data-group=hinweise] textarea { min-height: 64px;
  resize: vertical; }
/* Summe der Beladestellen: berechnet, nicht getippt */
.cpform input.fsum { background: color-mix(in srgb, var(--info) 9%,
  var(--card)); font-weight: 700; }
/* Fuhrpark (W10) — Auswahl-Chips (Sprachen, Ausstattung, Klassen): die
   Checkbox bleibt für Tastatur und Screenreader da, sichtbar ist der
   Chip; gewählt = gefüllt mit Häkchen */
.fmulti { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { position: relative; display: inline-flex; align-items: center;
  gap: 5px; padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); color: var(--text);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  user-select: none; }
.fchip input { position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none; }
.fchip:hover { border-color: var(--primary); }
.fchip:has(input:checked) { background: var(--primary);
  border-color: var(--primary); color: #fff; }
.fchip:has(input:checked)::before { content: "✓"; font-weight: 800; }
.fchip:has(input:focus-visible) { outline: 2px solid var(--primary);
  outline-offset: 2px; }
/* Foto (Fahrer, Fahrzeug): Vorschau, Datei-Auswahl, „Foto entfernen“ */
.fphoto { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; }
.fphoto-img, .fphoto-empty { width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg); object-fit: cover; }
.fphoto-empty { display: inline-block; border-style: dashed; }
.fphoto input[type=file] { flex: 1 1 220px; max-width: 100%;
  font-size: 12.5px; }
.fchip input, .fphoto-rm input { flex: none; }
/* Fuhrpark-Seite: Werkzeugleiste und Karten */
.fleet-tools { display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-bottom: 10px; }
.fleet-tools .fleet-q { flex: 1 1 240px; min-width: 180px; }
.fleet-tools select { flex: 0 1 auto; max-width: 220px; }
.fleet-sum { color: var(--muted); font-size: 12.5px; font-weight: 700;
  margin: 0 0 12px; }
.fleet-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.fcard { display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--border); border-radius: 12px;
  padding: 14px 16px; }
.fcard.fs-overdue { border-left-color: var(--danger); }
.fcard.fs-soon { border-left-color: var(--warning); }
.fcard.fs-ok { border-left-color: var(--success); }
.fcard.inactive { opacity: .62; }
.fcard-head { display: flex; gap: 12px; align-items: center;
  min-width: 0; }
.fcard-photo, .fcard-avatar { width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%; }
.fcard-photo { object-fit: cover; border: 1px solid var(--border); }
.fcard-avatar { display: inline-flex; align-items: center;
  justify-content: center; background: var(--tint-head);
  color: var(--primary); font-size: 18px; font-weight: 800; }
.fcard-title { display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start; min-width: 0; }
.fcard-name { color: var(--text); font-size: 16px; font-weight: 800; }
.fcard-sub { color: var(--muted); font-size: 12.5px; }
/* Kennzeichen wie ein EU-Schild: dunkler Rand, links das Band mit dem
   Länderkürzel des Zulassungslands */
.plate { display: inline-flex; align-items: center; height: 32px;
  padding: 0 10px; border: 2px solid var(--text); border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 16px;
  font-weight: 800; letter-spacing: .8px; overflow: hidden;
  white-space: nowrap; }
.plate:hover { border-color: var(--primary); color: var(--text);
  text-decoration: none; }
.plate[data-country] { padding-left: 0; }
.plate[data-country]::before { content: attr(data-country);
  align-self: stretch; display: flex; align-items: flex-end;
  margin-right: 8px; padding: 0 5px 4px; background: var(--primary);
  color: #fff; font-size: 9px; letter-spacing: 0; }
.fcard-facts { display: grid; gap: 6px 12px; margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcard-facts div { min-width: 0; }
.fcard-facts dt { color: var(--muted); font-size: 11px; }
.fcard-facts dd { margin: 0; font-size: 13px; font-weight: 700;
  overflow-wrap: anywhere; }
.fcard-chips, .fcard-langs, .fcard-deadlines { display: flex;
  flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 11.5px;
  font-weight: 600; }
.tag.lang { background: var(--tint-head); border-color: transparent;
  color: var(--primary); }
.tag.lang b { font-size: 10.5px; }
.tag.cold { background: var(--info-bg); border-color: transparent;
  color: var(--info); }
.tag.adr { background: var(--warning-bg); border-color: transparent;
  color: var(--warning); }
.tag.gmp { background: var(--success-bg); border-color: transparent;
  color: var(--success); }
.fcard-deadlines .pill { font-size: 11.5px; }
.fcard-deadlines .pill.calm { background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); }
.fcard-actions { display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto; padding-top: 4px; }
.empty { padding: 28px; text-align: center; color: var(--muted);
  background: var(--card); border: 1px dashed var(--border);
  border-radius: 12px; }
@media (max-width: 640px) {
  .fleet-grid { grid-template-columns: minmax(0, 1fr); }
  .fleet-tools select { flex: 1 1 140px; max-width: none; }
}
/* Platzhalter sind Hinweise, keine Werte: kursiv und blass */
.cpform input::placeholder { color: var(--faint); font-style: italic;
  opacity: 1; }
.fcell { min-width: 0; }
.fcell.span-2 { grid-column: span 2; }
.fcell.span-0 { grid-column: 1 / -1; }
.fcell > label:not(.fcheck) { display: block; font-size: 11.5px;
  color: var(--muted); margin-bottom: 4px; }
.fcell > .fhelp { margin-top: 4px; }
.fcell .finfo { display: inline-block; padding: 8px 0; }
/* Kontrollkästchen auf Höhe der Eingaben daneben (Beschriftung darüber) */
.fcell.fcheckcell { padding-top: 26px; }
.fcontrol input.fqty { flex: 0 0 84px; }
.fcell .fcontrol select.fcompanion { flex: 1 1 0; min-width: 0; }

/* Ladungen (W9): je Ladung eine Gruppe — links die Beladestellen (grün),
   rechts die Entladestellen (orange), dazwischen eine senkrechte
   Trennlinie mit der Fahrspur. Jede Karte hängt mit einer kurzen Linie an
   der Trennlinie: mehrere Beladestellen laufen sichtbar in die Entladung
   zusammen, eine Beladung fächert sich auf mehrere Entladungen auf; hat
   eine Spalte mehrere Karten, liegt sie auf einer leicht getönten Fläche
   mit Kopf „▲ 2 Beladestellen“. Schmal: die Spalten stehen untereinander,
   die Trennlinie liegt quer, die Spur zeigt nach unten. */
.loads { margin: 0 0 16px; }
.load-pairs { display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 12px; }
.load-pair { border: 1px dashed
  color-mix(in srgb, var(--muted) 45%, var(--border));
  border-radius: 12px; padding: 10px 12px; background: var(--card); }
.pair-head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.pair-title { font-size: 12px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text); }
.pair-kind { font-size: 12px; font-weight: 700; color: var(--muted); }
.pair-actions { display: flex; gap: 6px; margin-left: auto; }
.lgroup-body { display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); }
.lcol { --pad: 0px; display: flex; flex-direction: column; gap: 10px;
  min-width: 0; padding: var(--pad); border-radius: 12px; }
.lcol.multi { --pad: 8px; }
/* Eine Karte allein in ihrer Spalte steht mittig — die Linien der
   Gegenseite laufen sichtbar auf sie zu; Karten wachsen nie in die Höhe
   (.fgroup ist sonst flex: 1, für die Kartenzeilen) */
.lcol:not(.multi) { justify-content: center; }
.lcol .lcard { flex: 0 0 auto; }
.lcol[data-side=load].multi {
  background: color-mix(in srgb, var(--load) 8%, transparent); }
.lcol[data-side=unload].multi {
  background: color-mix(in srgb, var(--unload) 10%, transparent); }
.lcol-head { display: none; font-size: 12px; font-weight: 800;
  letter-spacing: .3px; }
.lcol.multi .lcol-head { display: block; }
.lcol[data-side=load] .lcol-head { color: var(--load); }
.lcol[data-side=unload] .lcol-head { color: var(--unload-text); }
.lcol-add { align-self: flex-start; }
/* Die Trennlinie: senkrecht über die ganze Ladung, oben grün, unten
   orange; darauf in der Mitte die Fahrspur */
.lsep { position: relative; display: flex; align-items: center;
  justify-content: center; }
.lsep::before { content: ""; position: absolute; top: 2px; bottom: 2px;
  left: calc(50% - 1px); width: 2px; border-radius: 2px;
  background: linear-gradient(var(--load), var(--unload)); opacity: .6; }
/* Anschluss jeder Karte an die Trennlinie (Kartenmitte → Linie) */
.lcol .lcard { position: relative; }
.lcol[data-side=load] .lcard::after,
.lcol[data-side=unload] .lcard::before { content: ""; position: absolute;
  top: 50%; height: 2px; margin-top: -1px; opacity: .6;
  width: calc(var(--pad) + 38px); }
.lcol[data-side=load] .lcard::after { left: 100%;
  background: var(--load); }
.lcol[data-side=unload] .lcard::before { right: 100%;
  background: var(--unload); }
/* Fahrspur (W8.2): fließender Strich in Ladefarbe, ein LKW fährt von
   links nach rechts, die Pfeilspitze in Entladefarbe zeigt das Ziel */
.lsep .lane { position: relative; z-index: 1; display: block;
  width: 72px; height: 48px; }
.lsep .lane-line { position: absolute; left: 2px; right: 14px;
  top: 23px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--load) 0 8px,
    transparent 8px 13px);
  background-size: 13px 3px; animation: rflow-lane .8s linear infinite; }
.lsep .lane-head { position: absolute; right: 0; top: 16px;
  width: 16px; height: 16px; background: var(--unload);
  -webkit-mask: url(/app/static/icons/arrow-right.svg) center / contain
    no-repeat;
  mask: url(/app/static/icons/arrow-right.svg) center / contain no-repeat; }
.lsep .lane-truck { position: absolute; top: -4px; left: 0;
  width: 26px; height: 26px; background: var(--primary);
  -webkit-mask: url(/app/static/icons/truck.svg) center / contain no-repeat;
  mask: url(/app/static/icons/truck.svg) center / contain no-repeat;
  animation: rlane 3.2s ease-in-out infinite; }
@keyframes rflow-lane { from { background-position: 0 0; }
  to { background-position: 13px 0; } }
@keyframes rlane { 0% { left: 0; opacity: 0; }
  12% { opacity: 1; } 80% { opacity: 1; }
  100% { left: calc(100% - 28px); opacity: 0; } }
/* Karten: Entladung orange wie ▼ in Tourliste und Karte (die Beladung
   bleibt in der Stationsfarbe grün) */
.lcard { margin: 0; }
.lcol[data-side=unload] .lcard.fgroup[data-group=stationen] {
  background: color-mix(in srgb, var(--unload) 14%, var(--card));
  border-color: color-mix(in srgb, var(--unload) 45%, var(--border));
  border-left-color: var(--unload); }
.lcol[data-side=unload] .lcard.fgroup legend {
  color: var(--unload-text); }
.lcard .lcard-no { font-weight: 800; }
.lcard-remove { position: absolute; top: -9px; right: 10px; width: 22px;
  height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 14px;
  line-height: 1; cursor: pointer; }
.lcard-remove:hover { color: var(--danger); border-color: var(--danger); }
.lcard-remove:disabled { display: none; }
/* Kompakt im Raster aus 12 Spalten: Land | PLZ | Ort und Menge | Gewicht |
   Lademeter je in einer Zeile */
.lcol .lcard .fbody { grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px 10px; }
.lcard .lc-2 { grid-column: span 2; }
.lcard .lc-3 { grid-column: span 3; }
.lcard .lc-4 { grid-column: span 4; }
.lcard .lc-5 { grid-column: span 5; }
.lcard .lc-6 { grid-column: span 6; }
.lcard .lc-12 { grid-column: 1 / -1; }
.lcard .fcell > .flabel { display: block; font-size: 11.5px;
  color: var(--muted); margin-bottom: 4px; }
.lcard .fcell.fref input { font-weight: 700; }
.lcard select.lcountry { width: 100%; min-width: 0; }
/* W15: „Nr.“ der Station — schmal, fett wie die Nummer in der Legende
   („1. Beladung“); der Platzhalter ist die laufende Nummer */
.lcard .lseq input { font-weight: 800; text-align: center;
  padding-left: 4px; padding-right: 4px; }
.lcard .lcard-seq { font-weight: 800; }
/* W14: die Ladung einer Ladung — Menge | Einheit (W15) | Gewicht |
   Lademeter | Warenart einmal je Gruppe, unter den Karten, in der
   Ladungsfarbe himmelblau */
.lcargo { margin: 10px 0 0; padding: 10px 14px 12px; }
.lcargo .fbody { grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px 10px; }
.lcargo .lc-2 { grid-column: span 2; }
.lcargo .lc-3 { grid-column: span 3; }
.lcargo .lc-6 { grid-column: span 6; }
.lcargo select.lunit-pick { width: 100%; min-width: 0; }
.lcargo .fcell > .flabel { display: block; font-size: 11.5px;
  color: var(--muted); margin-bottom: 4px; }
.lcargo .lcargo-no { font-weight: 800; }
@container cpform (max-width: 760px) {
  .lcargo .lc-2 { grid-column: span 4; }
  .lcargo .lunit-cell { grid-column: span 8; }
  .lcargo .lc-2:not(.lqty) { grid-column: span 6; }
  .lcargo .lc-6, .lcargo .lgoods { grid-column: 1 / -1; }
}
/* W15: Zollabfertigung als Kästchen — groß und gut klickbar, die
   Beschriftung „Erforderlich“ fett; die Zeile ohne Abstand nach oben */
.fgroup[data-group=zoll] .fcheckcell { padding-top: 0; }
.fgroup[data-group=zoll] .fcheck { font-size: 15px; font-weight: 700;
  color: var(--text); cursor: pointer; padding: 4px 0; }
.fgroup[data-group=zoll] .fcheck input { width: 22px; height: 22px;
  accent-color: var(--warning); cursor: pointer; }
.lsum-pair .q { color: var(--muted); font-weight: 600; }
/* Angebotsmaske (W14): die Anschrift des Kunden aus dem Stamm */
#f_customer_addr { display: block; font-weight: 600; color: var(--text);
  white-space: pre-line; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@container cpform (max-width: 760px) {
  .lgroup-body { grid-template-columns: minmax(0, 1fr); }
  .lsep { height: 64px; }
  .lsep::before { top: calc(50% - 1px); bottom: auto; left: 6px;
    right: 6px; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--load), var(--unload)); }
  .lsep .lane { transform: rotate(90deg); }
  .lcol[data-side=load] .lcard::after,
  .lcol[data-side=unload] .lcard::before { display: none; }
}
@container cpform (max-width: 520px) {
  .lcol .lcard .fbody { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lcard .lc-3, .lcard .lc-4, .lcard .lc-6 { grid-column: span 3; }
  .lcard .lc-5 { grid-column: 1 / -1; }
  /* W15: Nr. | Datum in einer Zeile, das Zeitfenster darunter */
  .lcard .lseq { grid-column: span 2; }
  .lcard .ldate { grid-column: span 4; }
}
/* Kopf der Ladungen: Zählung und je Ladung „1 ▲ Ort → ▼ Ort“ */
.loads-summary { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; margin: 0 0 12px; }
.lsum-pairs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lsum-pair { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; white-space: nowrap; }
.lsum-pair b { display: inline-grid; place-items: center; width: 20px;
  height: 20px; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--border); font-size: 11px; }
.lsum-pair .l { color: var(--load); font-weight: 700; }
.lsum-pair .u { color: var(--unload-text); font-weight: 700; }

/* ---------------------- W8.2: Tourverlauf --------------------------
   Eine Bildsprache für Belade- und Entladestellen in Tourliste, Details,
   Tourkarten, Auftragsmaske und Tourplan-Karte: grün ▲ = Beladung,
   orange ▼ = Entladung (Text in dunklerem Orange, sonst zu wenig
   Kontrast). route_strip (Liste, Karten): Punkte auf einer Linie, beim
   Überfahren fließt sie in Fahrtrichtung. route_ribbon (Details): die
   nummerierten Stationen, der LKW fährt die Tour ab, jede Station
   leuchtet auf, wenn er sie erreicht (gleiche Dauer, linear). */
:root { --load: var(--success); --unload: var(--accent);
  --unload-text: var(--warning); }
.rstrip { display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; vertical-align: middle; }
.rstrip-track { position: relative; display: inline-flex;
  align-items: center; gap: 6px; padding: 3px 4px; }
.rstrip-track::before { content: ""; position: absolute; left: 6px;
  right: 6px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--input-border); }
.rdot { position: relative; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--card); }
.rdot.l { background: var(--load); }
.rdot.u { background: var(--unload); }
.rmore { position: relative; font-style: normal; font-size: 11px;
  font-weight: 700; color: var(--muted); background: var(--card);
  padding: 0 3px; border-radius: 6px; }
.rstrip-count { font-size: 12px; }
.rstrip-count b.l { color: var(--load); }
.rstrip-count b.u { color: var(--unload-text); }
.rsep { color: var(--muted); margin: 0 4px; }
tr:hover .rstrip-track::before, .tourcard:hover .rstrip-track::before {
  background: repeating-linear-gradient(90deg, var(--primary) 0 6px,
    transparent 6px 10px);
  background-size: 10px 2px; animation: rflow .7s linear infinite; }
@keyframes rflow { from { background-position: 0 0; }
  to { background-position: 10px 0; } }
/* In der Tourliste zweizeilig wie die Nachbarzellen (Nummer + Unterzeile):
   oben die Punkte, darunter klein „2▲ → 3▼“ — so bleibt die Spalte
   schmal genug für 1280 px breite Bildschirme. */
.tlist .rstrip { flex-direction: column; align-items: flex-start;
  gap: 0; }
.tlist .rstrip-count { font-size: 11px; line-height: 1.25; }
.tlist th.w-route { width: 144px; }
.tourcard-route { margin: 2px 0 6px; }
.rribbon { margin: 0 0 12px; padding: 10px 12px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--load) 9%, var(--card)),
    color-mix(in srgb, var(--unload) 12%, var(--card))); }
.rribbon-head { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-bottom: 4px; }
.rchip { display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 3px 10px; font-size: 12px;
  font-weight: 800; white-space: nowrap; }
.rchip.l { color: var(--card); background: var(--load); }
.rchip.u { color: var(--text); background: var(--unload); }
/* Link „Tourplan (Karte)“ rechts im Kopf, mit Stecknadel (Maske) */
.rribbon-map { margin-left: auto; display: inline-flex;
  align-items: center; gap: 5px; font-weight: 700; font-size: 12px; }
.rribbon-map::before { content: ""; width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: url(/app/static/icons/map-pin.svg) center / contain
    no-repeat;
  mask: url(/app/static/icons/map-pin.svg) center / contain no-repeat; }
.rribbon-scroll { overflow-x: auto; padding: 0 0 4px; }
.rribbon-track { position: relative; display: grid;
  grid-template-columns: repeat(var(--n), minmax(132px, 1fr));
  min-width: calc(var(--n) * 132px); padding-top: 26px; }
.rribbon-line { position: absolute; top: 62px; height: 4px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
  border-radius: 4px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 70%, var(--card)) 0 12px,
    transparent 12px 20px);
  background-size: 20px 4px; }
.rribbon.moving .rribbon-line { animation: rflow-big 1s linear infinite; }
@keyframes rflow-big { from { background-position: 0 0; }
  to { background-position: 20px 0; } }
.rtruck { position: absolute; top: -30px; left: -14px; width: 28px;
  height: 28px; background: var(--primary);
  -webkit-mask: url(/app/static/icons/truck.svg) center / contain no-repeat;
  mask: url(/app/static/icons/truck.svg) center / contain no-repeat; }
.rribbon.moving .rtruck { animation: rdrive 8s linear infinite; }
@keyframes rdrive { from { left: -14px; }
  to { left: calc(100% - 14px); } }
.rnode { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 2px; min-width: 0; padding: 0 6px;
  text-align: center; }
.rrole { height: 16px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.rnode.l .rrole { color: var(--load); }
.rnode.u .rrole { color: var(--unload-text); }
.rnum { position: relative; z-index: 1; display: grid; place-items: center;
  width: 32px; height: 32px; margin: 2px 0 4px; border-radius: 50%;
  font-weight: 800; box-shadow: 0 0 0 4px var(--card); }
.rnode.l .rnum { background: var(--load); color: var(--card); }
.rnode.u .rnum { background: var(--unload); color: var(--text); }
.rribbon.moving .rnum { animation: rarrive 8s linear infinite;
  animation-delay: calc(8s * var(--i) / max(var(--n) - 1, 1)); }
@keyframes rarrive {
  0% { transform: scale(1.22); box-shadow: 0 0 0 4px var(--card),
    0 0 0 10px color-mix(in srgb, var(--primary) 28%, transparent); }
  10%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--card); } }
.rcity, .rname, .rwhen, .rqty { max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rcity { font-size: 13.5px; }
.rname, .rwhen, .rqty { font-size: 11.5px; color: var(--muted); }
.rref { font-size: 11.5px; padding: 1px 7px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border);
  white-space: nowrap; }
.rnode.l .rref b { color: var(--load); }
.rnode.u .rref b { color: var(--unload-text); }
@media (prefers-reduced-motion: reduce) {
  .rribbon-line, .rribbon .rnum, .rtruck, .lsep .lane-line,
  .lsep .lane-truck, tr:hover .rstrip-track::before,
  .tourcard:hover .rstrip-track::before { animation: none !important; }
  .rtruck { left: calc(50% - 14px); }
  .lsep .lane-truck { left: calc(50% - 13px); opacity: 1; }
}

/* Schmale Maske: Karten allein in ihrer Zeile zweispaltig */
@container cpform (max-width: 900px) {
  .fgroup-row.solo .fbody {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Handy: alles einspaltig — Karten und Zellen */
@container cpform (max-width: 520px) {
  .fgroup .fbody, .fgroup-row.solo .fbody {
    grid-template-columns: minmax(0, 1fr); }
  .fcell.span-2 { grid-column: 1 / -1; }
  .fcell.fcheckcell { padding-top: 0; }
}
@media (max-width: 640px) {
  .fgroup .fbody, .fgroup-row.solo .fbody {
    grid-template-columns: minmax(0, 1fr); }
  .fcell.span-2 { grid-column: 1 / -1; }
  .fcell.fcheckcell { padding-top: 0; }
}

/* ---------------------------- Copilot ------------------------------
   Schublade rechts auf JEDER Seite (templates/_copilot.html): Hinweise,
   Handbuch der Seite, Chat und Bestätigungskarte. Der schwebende Knopf
   bleibt bewusst über allem — er ist der einzige Einstieg, und die Seiten
   darunter scrollen frei weiter. */
.cp-fab { position: fixed; right: 20px; bottom: 20px; width: 48px;
  height: 48px; border-radius: 50%; background: var(--primary);
  color: #fff; border: none; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 60;
  box-shadow: 0 3px 12px rgba(15,23,42,.35); }
.cp-fab:hover { background: var(--primary-dark); }
.cp-fab img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.cp-drawer { position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%); background: var(--card);
  border-left: 1px solid var(--border); z-index: 61;
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform 0.18s ease;
  box-shadow: -4px 0 18px rgba(15,23,42,.18); }
.cp-drawer.open { transform: translateX(0); }
@media (max-width: 640px) {
  .cp-drawer { width: 100%; }
  .cp-fab { right: 14px; bottom: 14px; }
  body:has(.formbtns.sticky) .cp-fab { bottom: 80px; }
}
.cp-head { display: flex; align-items: flex-start; gap: 10px;
  justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--border); }
.cp-title { font-weight: 800; font-size: 15px; }
.cp-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.cp-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.cp-sec { margin-bottom: 18px; }
.cp-sec h3 { margin: 0 0 8px; font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: 1px; }

.cp-hint { display: block; border: 1px solid var(--border);
  border-left: 3px solid var(--info); border-radius: 8px;
  padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px;
  color: var(--text); font-weight: 500; background: var(--bg); }
a.cp-hint:hover { border-color: var(--primary); text-decoration: none; }
.cp-hint.critical { border-left-color: var(--danger);
  background: var(--danger-bg); }
.cp-hint.warning { border-left-color: var(--warning);
  background: var(--warning-bg); }
.cp-hint.info { border-left-color: var(--info); background: var(--info-bg); }

.cp-manual { font-size: 12.5px; color: var(--text);
  max-height: 220px; overflow-y: auto; }
.cp-manual.full { max-height: none; }
.cp-manual h4 { margin: 10px 0 4px; font-size: 12.5px; }
.cp-manual p { margin: 0 0 6px; }
.cp-manual ul, .cp-manual ol { margin: 0 0 6px; padding-left: 18px; }

.cp-msg { border-radius: 10px; padding: 8px 11px; margin-bottom: 8px;
  font-size: 13px; white-space: pre-wrap; }
.cp-msg.me { background: #EAF1FF; color: var(--primary);
  font-weight: 600; }
.cp-msg.ai { background: var(--bg); border: 1px solid var(--border); }
.cp-msg.err { background: var(--danger-bg); color: var(--danger); }

.cp-card { border: 1px solid var(--primary); background: var(--info-bg);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.cp-card .lbl { font-weight: 800; margin-bottom: 3px; }
.cp-card .sum { color: var(--muted); font-size: 12.5px;
  margin-bottom: 9px; }
.cp-card .btns { display: flex; gap: 8px; flex-wrap: wrap; }

.cp-foot { display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); }
.cp-foot input { flex: 1; min-width: 0; }

/* W8: Touren- und Auftragsliste */
/* Disposition → Touren / Disponiert (templates/tours.html): je Tour EINE
   Zeile, nichts bricht um — zu lange Texte enden mit „…“, der volle Text
   steht in den Details darunter. Feste Tabellenbreiten: Beträge, Datum,
   Ampeln und Knöpfe haben eine feste Breite (w-…), die Textspalten teilen
   sich den Rest. Das rechnet der Browser einmal aus dem Kopf statt aus
   Hunderten Zeilen — und keine lange Adresse schiebt die Tabelle aus
   dem Bild. */
.tlist table.data { table-layout: fixed; }
/* Köpfe trennen nach Silben (lang="de": „FRACHTFÜH-RER“) statt mitten
   im Wort („FRACHTFÜHRE|R“ bei 1400–1460 und ab 1800 px); ohne
   Trennwörterbuch im Browser bleibt der Umbruch an beliebiger Stelle. */
.tlist table.data th { padding: 9px 8px; letter-spacing: .3px;
  vertical-align: bottom; overflow-wrap: anywhere; -webkit-hyphens: auto;
  hyphens: auto; }
.tlist table.data td { padding: 6px 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tlist table.data td .cell-sub { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* Das Menü „⋯“ darf über die Zelle hinausragen */
.tlist table.data td.rowbtns { overflow: visible; }
.tlist td .cell-links a + a { margin-left: 8px; }
.tlist th.tl-tog { width: 26px; }
.tlist th.w-tour { width: 200px; }
.tlist th.w-date { width: 92px; }
.tlist th.w-money { width: 94px; }
.tlist th.w-pill { width: 118px; }
.tlist th.w-bill { width: 110px; }
.tlist th.w-terms { width: 104px; }
.tlist th.w-acts { width: 152px; }
.tlist.t-disponiert th.w-acts { width: 200px; }
/* W14: Abrechnung je Auftrag in den Details unter Disponiert — eigene
   Tabelle, nicht im festen Raster der Tourliste */
.tlist table.data.tdet-bill { table-layout: auto; width: 100%;
  margin: 0 0 12px; font-size: 12.5px; background: var(--card); }
.tlist table.data.tdet-bill td, .tlist table.data.tdet-bill th {
  padding: 5px 8px; }
.tlist table.data.tdet-bill td { white-space: normal; }
.tlist table.data.tdet-bill td.nowrap { white-space: nowrap; }
/* Die Zeile ist zum Aufklappen klickbar; Tour fett, ihre Unterzeile klein */
.tlist tbody.tgroup > tr:first-child { cursor: pointer; }
.tlist tbody.tgroup > tr:first-child > td.tl-tour { font-weight: 700; }
.tlist table.data td.tl-tog { padding-left: 8px; padding-right: 0; }
.tl-toggle { display: inline-block; width: 16px; text-align: center;
  font-size: 16px; line-height: 1; color: var(--muted); font-weight: 400;
  transition: transform .12s; }
.tl-toggle:hover { color: var(--primary); text-decoration: none; }
.tgroup.open .tl-toggle { transform: rotate(90deg); color: var(--primary); }
.tgroup.open > tr:first-child > td { background: var(--primary-bg); }
/* Trennlinie unter jeder Tour, auch wenn ihre Details zu sind */
.tlist table.data tbody.tgroup > tr:first-child > td {
  border-bottom: 1px solid var(--border); }
.tlist table.data tbody.tgroup:last-child:not(.open)
  > tr:first-child > td { border-bottom: none; }
/* Details: per Klasse (Skript), ohne Skript über den Sprunganker */
.tlist tr.tl-detail { display: none; }
.tlist tbody.open > tr.tl-detail, .tlist:not(.js) tr.tl-detail:target {
  display: table-row; }
.tlist table.data tr.tl-detail > td,
.tlist table.data tr.tl-detail:hover > td { white-space: normal;
  overflow: visible; background: var(--bg); cursor: default;
  padding: 10px 14px 14px 34px; }
.tlist table.data tbody.tgroup:not(:last-child) > tr.tl-detail > td {
  border-bottom: 1px solid var(--border); }
/* Schmalere Bildschirme: unter 1800 px Zahlungsziel und Entladung
   ausblenden (der Tourverlauf zeigt die Stationen), unter 1400 px auch
   Aufträge („+n“ steht an der Tour), Beladung und Einkauf — die Details
   zeigen alles; unter 1600 px statt des ersten Knopfs nur „⋯“ — das Menü
   führt dann alle Aktionen. So behält jede Textspalte von 1280 px bis zur
   vollen Breite (.content höchstens 1500 px) rund 90 px und mehr.
   Ausgeblendet heißt hier 0 px breit und unsichtbar, nicht display:none:
   fehlte die Spalte in der Kopfzeile, legten die aufgeklappten Details
   (colspan über alle Spalten) dafür leere Spalten an, die den
   Textspalten die Breite nehmen. */
@media (max-width: 1799px) {
  .tlist table.data .tl-hide1 { width: 0; padding: 0; border-left: 0;
    border-right: 0; white-space: nowrap; overflow: hidden;
    visibility: hidden; }
}
@media (max-width: 1599px) {
  .tlist th.w-acts, .tlist.t-disponiert th.w-acts { width: 52px; }
  .tlist td.rowbtns > :not(details) { display: none; }
}
@media (max-width: 1399px) {
  .tlist table.data .tl-hide2 { width: 0; padding: 0; border-left: 0;
    border-right: 0; white-space: nowrap; overflow: hidden;
    visibility: hidden; }
}
/* Handy: die Liste scrollt in ihrem Rahmen .tlist (wie .tablewrap bei
   den übrigen Tabellen). Die festen Spalten allein brauchen rund
   740–820 px (mit dem Verlauf, W8.2) — ohne Mindestbreite bliebe den
   Textspalten (Aufträge, Frachtführer) daneben keine Breite; mit 1100 px
   behalten sie 180–280 px. */
@media (max-width: 760px) {
  .tlist { overflow-x: auto; }
  .tlist table.data { min-width: 1100px; }
  /* Aufgeklappte Details bleiben im sichtbaren Rahmen stehen (sticky,
     so breit wie der Rahmen), statt mit der breiten Tabelle rechts aus
     dem Bild zu laufen; der Tourverlauf scrollt in sich. Breite aus
     100vw (Rand von .content 16 px, Zelle 12 px je Seite) — eine
     Container-Abfrage auf .tlist machte die Liste zum Bezugsrahmen der
     festen Menüleiste „⋯“. */
  .tlist table.data tr.tl-detail > td,
  .tlist table.data tr.tl-detail:hover > td { padding: 10px 12px 14px; }
  .tlist tr.tl-detail > td > * { position: sticky; left: 12px;
    width: calc(100vw - 56px); box-sizing: border-box; }
}

.tdet { display: grid; grid-template-columns: minmax(0, 1fr)
  minmax(230px, 300px); gap: 12px 18px; align-items: start; }
@media (max-width: 1100px) {
  .tdet { grid-template-columns: minmax(0, 1fr); }
}
.tdet-orders { display: flex; flex-direction: column; gap: 8px;
  min-width: 0; }
.tdet-order { background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: 10px;
  padding: 8px 12px; }
.tdet-ohead { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 12px; }
.tdet-cust { font-weight: 700; }
.tdet-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.tdet-ref b { font-variant-numeric: tabular-nums; }
.tdet-stops { list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
.tdet-stop { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 1px 12px; padding: 1px 0 1px 9px;
  border-left: 3px solid var(--success); }
.tdet-stop.unload { border-left-color: var(--unload); }
.tdet-stop.customs { border-left-color: var(--warning); }
.tdet-role { min-width: 76px; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--success); }
.tdet-stop.unload .tdet-role { color: var(--unload-text); }
.tdet-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.tdet-side { background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; }
.tdet-facts { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px; margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); }
.tdet-facts dt { color: var(--muted); }
.tdet-facts dd { margin: 0; font-weight: 600; min-width: 0;
  overflow-wrap: anywhere; }
.tdet-facts dd.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.tdet-facts dd.pos { color: var(--success); }
.tdet-facts dd.neg { color: var(--danger); }
.tdet-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Suche über der Tourliste und Seitenwechsel darunter */
.tl-search input[type=search] { flex: 1 1 320px; max-width: 560px;
  min-width: 0; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 10px; font: inherit; background: var(--card);
  color: var(--text); }
.tl-search input[type=search]:focus { outline: 2px solid var(--primary-bg);
  border-color: var(--primary); }
.tl-count { color: var(--muted); font-size: 12px; }
.tl-pager { display: flex; align-items: center; gap: 10px;
  margin-top: 10px; }

/* Tourkarte mit Orientierungsnummer: interne Nummer klein darunter */
.tourcard-title { min-width: 0; }
.tourcard-no { display: block; color: var(--muted); font-size: 12px; }

/* W8.2: Tourplan-Karte (templates/tour_map.html) — Karte links, Liste
   rechts (schmal: untereinander). Beladung grün, Entladung orange
   (--load/--unload wie Tourverlauf und Maske), die Nummer im Kreis, ▲/▼ als kleines Zeichen am Kreis; die Route
   fließt gestrichelt in Fahrtrichtung — ohne Bewegung, wenn das System
   „weniger Bewegung“ wünscht. Die Karte ist ein eigener Stapelkontext:
   Leaflets z-index (bis 1000) bleibt unter der Copilot-Schublade. */
.tp-layout { display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.tp-mapwrap { position: relative; isolation: isolate; }
.tp-map { position: relative; z-index: 0; border-radius: 12px;
  border: 1px solid var(--border); height: max(460px, calc(100vh - 210px)); }
.tp-mapwrap .tp-map { font-family: inherit; font-size: 13px; }
.tp-overlay { position: absolute; inset: 0; z-index: 1; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  pointer-events: none; }
.tp-overlay[hidden] { display: none; }
.tp-overlay > span { background: var(--card); border: 1px solid
  var(--border); border-radius: 999px; padding: 9px 16px; max-width: 460px;
  font-weight: 700; text-align: center;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 18%, transparent); }
.tp-panel { position: sticky; top: 14px; margin-bottom: 0;
  max-height: calc(100vh - 28px); overflow-y: auto; }
@media (max-width: 1100px) {
  .tp-layout { grid-template-columns: minmax(0, 1fr); }
  .tp-map { height: 440px; }
  .tp-panel { position: static; max-height: none; }
}
.tp-kicker { color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; }
.tp-panel h2 { font-size: 17px; margin: 2px 0 0; overflow-wrap: anywhere; }
.tp-sub { color: var(--muted); font-size: 12px; }
.tp-counts { font-weight: 700; margin-top: 8px; }
.tp-legend { display: flex; gap: 14px; margin-top: 4px; color: var(--muted);
  font-size: 12px; }
.tp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tp-dot { display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; }
.tp-dot.load, .tp-pin.load { background: var(--load); }
.tp-dot.unload, .tp-pin.unload { background: var(--unload); }
/* Orange trägt weiße Schrift schlecht — die Nummer wie im Tourverlauf
   dunkel (Kontrast), ohne Schatten */
.tp-pin.unload { color: var(--text); }
.tp-pin.unload .tp-pin-no { text-shadow: none; }
.tp-status { margin-top: 10px; color: var(--muted); font-weight: 600; }
.tp-status.neg { color: var(--danger); }
.tp-busy::before { content: ""; display: inline-block; width: 8px;
  height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: var(--primary);
  animation: tp-pulse .9s ease-in-out infinite alternate; }
@keyframes tp-pulse { from { opacity: .25; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); } }
/* Nummerierte Kreise: Marker (L.divIcon) und Liste */
.tp-marker, .tp-chev-icon { background: none; border: none; }
.tp-pin { position: relative; display: flex; align-items: center;
  justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--card); color: var(--card); font-size: 13px;
  font-weight: 800; line-height: 1; transition: transform .12s;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--text) 40%, transparent);
  animation: tp-pop .38s cubic-bezier(.2, .9, .3, 1.3) backwards;
  animation-delay: calc(var(--i, 0) * 70ms); }
.tp-marker:hover .tp-pin, .tp-marker:focus .tp-pin {
  transform: scale(1.12); }
.tp-pin-no { text-shadow: 0 1px 1px
  color-mix(in srgb, var(--text) 45%, transparent); }
.tp-cue { position: absolute; right: -6px; bottom: -6px; width: 16px;
  height: 16px; border-radius: 50%; background: var(--card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 35%, transparent); }
.tp-cue::after { content: ""; border-left: 4px solid transparent;
  border-right: 4px solid transparent; }
.tp-pin.load .tp-cue::after { border-bottom: 6px solid var(--load);
  margin-top: -1px; }
.tp-pin.unload .tp-cue::after { border-top: 6px solid var(--unload);
  margin-top: 1px; }
@keyframes tp-pop { from { transform: scale(.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; } }
/* Route: blasse Grundlinie, darüber fließende Striche, Pfeile je
   Abschnitt (Leaflet setzt die Farbe als Attribut, CSS gewinnt) */
.tp-route-base { stroke: var(--primary); stroke-opacity: .22; }
.tp-route-flow { stroke: var(--primary); stroke-opacity: .9;
  stroke-dasharray: 2 12; stroke-linecap: round;
  animation: tp-flow 1.1s linear infinite; }
@keyframes tp-flow { to { stroke-dashoffset: -14; } }
.tp-chev { display: block; width: 0; height: 0; margin: 2px 0 0 3px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 9px solid var(--primary);
  filter: drop-shadow(0 0 1px var(--card)); }
/* Liste neben der Karte */
.tp-list { list-style: none; margin: 12px 0 0; padding: 0; }
.tp-item { border-radius: 10px; padding: 2px 6px; cursor: pointer; }
.tp-item:hover, .tp-item:focus-visible { background: var(--primary-bg);
  outline: none; }
.tp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px; align-items: start; padding: 6px 0; }
.tp-item .tp-pin { width: 28px; height: 28px; font-size: 12px;
  animation: none; box-shadow: none; }
.tp-item .tp-cue { width: 14px; height: 14px; right: -5px; bottom: -5px;
  box-shadow: 0 0 0 1px var(--border); }
.tp-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 8px; }
.tp-role, .tp-pop-head { font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--load); }
.unload .tp-role, .tp-pop-head.unload {
  color: var(--unload-text); }
.tp-name { font-weight: 700; }
.tp-line { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tp-when { font-variant-numeric: tabular-nums; }
.tp-approx { color: var(--warning); font-weight: 600; }
.tp-leg { margin-left: 13px; padding: 3px 0 3px 18px; color: var(--muted);
  border-left: 2px dashed color-mix(in srgb, var(--primary) 45%,
  var(--border)); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tp-total { margin-top: 12px; padding-top: 10px; font-size: 16px;
  font-weight: 800; border-top: 1px solid var(--border); }
.tp-saving { margin-top: 2px; color: var(--load); font-weight: 700; }
.tp-info { margin-top: 6px; color: var(--muted); font-size: 12px; }
.tp-warn { margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--warning-bg); border: 1px solid var(--warning);
  color: var(--warning); font-size: 12px; font-weight: 600; }
.tp-warn p { margin: 0; }
.tp-warn p + p { margin-top: 4px; }
.tp-unplaced { margin-top: 12px; padding: 8px 10px; border-radius: 10px;
  border: 1px dashed var(--border); }
.tp-unplaced ul { display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 0; list-style: none; }
.tp-subhead { margin-bottom: 4px; color: var(--muted); font-size: 11px;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.tp-note { margin: 12px 0 0; color: var(--faint); font-size: 11.5px; }
.tp-pop { min-width: 190px; font-size: 12.5px; }
.tp-pop .tp-name { font-size: 13.5px; }
.tp-map .tp-pop a { color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .tp-route-flow, .tp-pin, .tp-busy::before { animation: none; }
  .tp-pin { transition: none; }
}

/* ------------------------- W13: Sonderfälle ------------------------- */
/* Symbol in Textfarbe (Maske, wie die Büroklammer):
   <span class="ic" style="--ic:url(/app/static/icons/…svg)"> */
.ic { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
  vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat; }
.ic-warning { --ic: url(/app/static/icons/warning.svg); }
/* Demo-Daten: Kennzeichen und Umschalter in der Seitenleiste */
.pill.demo { background: var(--warning-bg); color: var(--warning);
  border: 1px dashed var(--warning); letter-spacing: .6px; }
.demo-box.on { border-color: var(--warning); border-style: dashed; }
/* Abzeichen „offene Störungen“ an Tourzeile, Tourkarte, Kalenderchip */
.cell-alert, .tourcard-alert, .cal-alert { display: inline-flex;
  align-items: center; gap: 3px; color: var(--danger); font-weight: 700;
  font-size: 12px; }
.cell-alert { margin-right: 6px; }
.tourcard-alert { margin: 2px 0 4px; }
.cal-alert { font-size: 11px; }
.cell-alert:hover, .tourcard-alert:hover, .cal-alert:hover {
  color: var(--danger); }
/* Tourakte */
.takte-title { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; }
.takte-title h2 { margin: 0; font-size: 18px; }
.takte-facts { display: flex; flex-wrap: wrap; gap: 6px 28px;
  margin: 12px 0 10px; }
.takte-facts dt { color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; }
.takte-facts dd { margin: 2px 0 0; font-weight: 600; }
.takte-acts { margin-bottom: 0; }
.takte-grid { display: grid; grid-template-columns: minmax(0, 1fr)
  minmax(280px, 360px); gap: 14px; align-items: start; }
@media (max-width: 1100px) {
  .takte-grid { grid-template-columns: minmax(0, 1fr); }
}
.takte-sub { margin: 16px 0 6px; font-size: 13px; }
.takte-extras { margin: 0; padding-left: 18px; }
/* Zeitleiste: Stationen (▲/▼) und Ereignisse (Symbol) an einer Linie */
.tline { list-style: none; margin: 8px 0 0; padding: 0;
  position: relative; }
.tline::before { content: ''; position: absolute; left: 13px; top: 6px;
  bottom: 6px; width: 2px; background: var(--border); }
.tline > li { position: relative; display: grid;
  grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
  padding: 7px 0; }
.tl-mark { position: relative; z-index: 1; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--border);
  font-size: 12px; color: var(--muted); }
.tl-stop.load .tl-mark { border-color: var(--load); color: var(--load); }
.tl-stop.unload .tl-mark { border-color: var(--unload);
  color: var(--unload-text); }
.tl-event .tl-mark { border-color: currentColor; }
.tl-event.sev-info { color: var(--info); }
.tl-event.sev-warning { color: var(--warning); }
.tl-event.sev-danger { color: var(--danger); }
.tl-event .tl-body { color: var(--text); }
.tl-event.open .tl-body { background: var(--danger-bg);
  border-radius: 10px; padding: 6px 10px; margin: -2px 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 10px; }
.tl-ref { font-size: 12px; font-weight: 600; }
.tl-text { margin-top: 2px; }
.tl-note { margin-top: 3px; color: var(--muted); white-space: pre-line; }
.tl-meta { margin-top: 3px; color: var(--faint); font-size: 11.5px; }
.tl-applied { margin-top: 4px; color: var(--success); font-size: 12px;
  font-weight: 700; }
.tl-prop { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px; margin: 6px 0 0; }
.tl-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tl-acts form { margin: 0; }
/* Ereignis melden */
.evform { display: flex; flex-direction: column; gap: 10px; }
.evform label { display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 12px; font-weight: 600; }
.evform input, .evform select, .evform textarea { width: 100%; }
.evrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px; }
.evfields { border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column;
  gap: 8px; }
.evfields legend { font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; padding: 0 4px; }
.evfields[hidden], .evhelp[hidden] { display: none; }
.evform .hint { margin: -4px 0 0; }
/* Störungen: Art mit Symbol in der Farbe der Schwere */
.ev-kind { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; }
.ev-row.sev-danger .ev-kind { color: var(--danger); }
.ev-row.sev-warning .ev-kind { color: var(--warning); }
.ev-row.sev-info .ev-kind { color: var(--info); }
.ev-c-status .pill + .pill { margin-left: 4px; }
/* Handy: jede Störung eine Karte statt einer Zeile mit sieben Spalten,
   die seitlich scrollt — Art und Status oben, darunter Zeit · Tour ·
   LKW · Auftrag in einer Zeile, dann was passiert ist. */
@media (max-width: 760px) {
  table.evtable thead { display: none; }
  table.evtable, table.evtable tbody { display: block; }
  table.evtable tr { display: block; position: relative; padding: 10px 0;
    border-bottom: 1px solid var(--border); }
  table.evtable tr:last-child { border-bottom: 0; }
  table.evtable td { display: inline; padding: 0; border: 0; }
  table.evtable td.ev-c-kind { display: block; min-height: 22px;
    padding-right: 120px; margin-bottom: 2px; white-space: normal; }
  table.evtable td.ev-c-status { position: absolute; top: 10px;
    right: 0; }
  table.evtable td.ev-c-status .muted { display: none; }
  table.evtable td.ev-c-meta { font-size: 12.5px; color: var(--muted); }
  table.evtable td.ev-c-meta + td.ev-c-meta::before { content: " · "; }
  table.evtable td.ev-c-empty { display: none; }
  table.evtable td.ev-c-what { display: block; margin-top: 4px; }
}

/* --------------- W13.1: Ausfälle, Besatzung, mehrtägig --------------- */
/* Kalender: Fahrzeug fällt aus (schraffiert), Folgetage mehrtägiger
   Touren, Besatzung, Warnung, Zeile „Abwesend“ */
.cal-block { display: flex; align-items: center; gap: 4px; margin: 0 0 4px;
  padding: 3px 6px; border-radius: 6px; border: 1px dashed var(--danger);
  color: var(--danger); font-size: 11.5px; font-weight: 700; min-width: 0;
  text-decoration: none; background: repeating-linear-gradient(135deg,
    var(--danger-bg) 0 6px, var(--card) 6px 12px); }
.cal-block-t { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cal-block:hover { color: var(--danger); }
.cal-tour.cal-cont { cursor: default; opacity: .8;
  border-left-style: dashed; }
.cal-cont .cal-count { font-size: 11px; }
.cal-crew { display: inline-flex; align-items: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 700; }
.cal-tour.cal-warned { box-shadow: inset 0 0 0 1px var(--warning); }
.cal-warn { display: inline-flex; align-items: center; gap: 3px;
  color: var(--warning); font-size: 11px; font-weight: 700; }
.cal-warn .ic { width: 12px; height: 12px; }
.cal-absent td { vertical-align: top; }
.cal-acell { padding: 6px; }
.cal-away { display: block; margin-bottom: 3px; color: var(--text);
  font-size: 11.5px; font-weight: 600; text-decoration: none; }
.cal-away .muted { font-weight: 400; }
/* Tourakte: Verfügbarkeit und Besatzung */
.takte-warn { border-color: var(--warning); background: var(--warning-bg); }
.takte-warn h2 { display: flex; align-items: center; gap: 8px;
  color: var(--warning); }
.takte-warn ul { margin: 6px 0; padding-left: 20px; }
.takte-warn .hint { margin-bottom: 0; }
.takte-side { display: flex; flex-direction: column; gap: 14px;
  min-width: 0; }
.takte-side > .card { margin: 0; }
.crew-list { list-style: none; margin: 0 0 10px; padding: 0; }
.crew-list li { display: grid; gap: 8px; align-items: start;
  grid-template-columns: 18px minmax(0, 1fr) auto; padding: 7px 0;
  border-bottom: 1px solid var(--border); }
.crew-list li:last-child { border-bottom: 0; }
.crew-list .ic { margin-top: 3px; color: var(--muted); }
.crew-list form { margin: 0; }
.crew-add summary { display: inline-flex; list-style: none;
  cursor: pointer; }
.crew-add summary::-webkit-details-marker { display: none; }
.crew-add[open] summary { margin-bottom: 10px; }
.crew-relief[hidden] { display: none; }
/* W13.2: Fahrzeugwechsel — Verweise zwischen Tour und Folgetour */
.takte-chain { display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 10px; font-weight: 600; }
.ho-f[hidden] { display: none; }
.evform label.ho-order { flex-direction: row; align-items: center;
  gap: 6px; color: var(--text); font-weight: 500; }
.evform label.ho-order input { width: auto; }
.tour-chain { color: var(--primary); font-weight: 600; }
/* W13.3: Verweise eines Ereignisses (Retoure, Schadensfall) */
.tl-link { display: inline-block; margin: 4px 12px 0 0; font-size: 12.5px;
  font-weight: 600; }
.claim-head { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; }
.claim-head h2 { margin: 0; }
.claim-form .evrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* W13.4: Verlauf eines Auftrags, kleine Formulare (Absage, Storno) */
.order-log { list-style: none; margin: 0; padding: 0; }
.order-log li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.order-log li:last-child { border-bottom: 0; }
.order-log-text { margin-top: 2px; white-space: pre-line; }
.aktion-card { max-width: 560px; }
/* Handy: Absagen als Karten — Nummer und Datum oben, darunter Kunde und
   Grund (der Grund ist das Wichtigste und darf nicht seitlich wegrutschen) */
@media (max-width: 760px) {
  table.rjtable thead { display: none; }
  table.rjtable, table.rjtable tbody { display: block; }
  table.rjtable tr { display: flex; flex-wrap: wrap; column-gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border); }
  table.rjtable tr:last-child { border-bottom: 0; }
  table.rjtable td { display: block; padding: 0; border: 0; }
  table.rjtable td.rj-c-when { order: 1; color: var(--muted); }
  table.rjtable td.rj-c-who, table.rjtable td.rj-c-why {
    flex: 0 0 100%; margin-top: 2px; white-space: normal; }
  table.rjtable td.rj-c-who { order: 2; }
  table.rjtable td.rj-c-why { order: 3; }
}
/* Fuhrpark → Ausfälle */
.dt-forms { display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.dt-forms > .card { margin: 0; }
.dt-editing { border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary); }
.dt-who { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; }
.dttable tr.dt-now .dt-who { color: var(--danger); }
.dt-c-tours .pill { margin: 1px 4px 1px 0; }
.dt-c-acts .rowform { margin-left: 4px; }
@media (max-width: 760px) {
  table.dttable thead { display: none; }
  table.dttable, table.dttable tbody { display: block; }
  table.dttable tr { display: block; padding: 10px 0;
    border-bottom: 1px solid var(--border); }
  table.dttable tr:last-child { border-bottom: 0; }
  table.dttable td { display: block; padding: 2px 0; border: 0;
    white-space: normal; text-align: left; }
  table.dttable td.num:empty, table.dttable td.dt-c-note:empty {
    display: none; }
  table.dttable td.dt-c-acts { padding-top: 6px; }
}

/* ------------------------- W13.5: E-LKW ------------------------- */
.tag.ev { background: var(--success-bg); border-color: transparent;
  color: var(--success); }
.cal-ev { display: inline-flex; margin-left: 3px; color: var(--success);
  vertical-align: -2px; }
.cal-ev .ic { width: 13px; height: 13px; }
.takte-ev h2 { display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.takte-ev h2 > .ic { color: var(--success); }
.takte-ev h2 .pill { margin-left: auto; font-size: 11.5px; }
.ev-facts { display: grid; grid-template-columns: auto 1fr;
  gap: 4px 12px; margin: 0 0 8px; }
.ev-facts div { display: contents; }
.ev-facts dt { color: var(--muted); }
.ev-facts dd { margin: 0; font-weight: 600; }
.ev-stops { margin: 0 0 8px; padding-left: 18px; }
.ev-stops li { padding: 2px 0; }
/* Routing: Ladestopp auf der Karte */
.rt-charge-icon { background: none; border: none; }
.rt-charge { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
  background: var(--card); color: var(--success);
  border: 2px solid var(--success);
  box-shadow: 0 1px 5px rgba(15,23,42,.45); }
.rt-charge .ic { width: 14px; height: 14px; }

/* ------------------------- W13.7: Szenarien ------------------------- */
.sz-head p { margin: 0 0 6px; }
.sz-counts { font-weight: 700; }
.sz-acts { margin: 10px 0 4px; }
.sz-acts form { margin: 0; }
.sz-walk { margin: 0; padding-left: 22px; }
.sz-walk li { padding: 4px 0; }
.sz-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.sz-groups .chip { text-decoration: none; }
.sz-group { margin: 18px 0 8px; font-size: 16px; scroll-margin-top: 70px; }
.sz-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sz-card { margin: 0; display: flex; flex-direction: column; gap: 6px;
  scroll-margin-top: 70px; }
.sz-card p { margin: 0; }
.sz-card:target { box-shadow: 0 0 0 2px var(--primary); }
.sz-title { display: flex; align-items: center; gap: 8px; }
.sz-try { color: var(--muted); }
.sz-cases { display: flex; flex-wrap: wrap; gap: 4px; }
.sz-links { display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: auto; padding-top: 4px; font-weight: 600; }
.sz-cat { margin: 14px 0 4px; font-size: 14px; }
.sztable td { vertical-align: top; }
.sztable td.sz-c-code { width: 52px; }
.sz-c-state .pill { margin: 0 4px 2px 0; text-decoration: none; }
@media (max-width: 760px) {
  .sz-grid { grid-template-columns: 1fr; }
  table.sztable tr { display: grid; grid-template-columns: 44px 1fr;
    padding: 8px 0; border-bottom: 1px solid var(--border); }
  table.sztable td { padding: 0; border: 0; }
  table.sztable td.sz-c-state { grid-column: 2; margin-top: 3px; }
}

/* ------- W16 — Paket A: Tourmaske, Einstellungen, Ablagezone ------- */
/* Tourmaske „Wer fährt“: Umschalter Eigener LKW / Fremdvergabe (Chips),
   bei Fremdvergabe der Frachtführer hervorgehoben */
.crew-mode { display: flex; flex-wrap: wrap; gap: 6px; }
.crew-mode[hidden], .fcell[hidden] { display: none; }
.crew-mode .chip { cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; }
.crew-mode .chip:focus-visible { outline: 2px solid var(--primary);
  outline-offset: 2px; }
.fcell.crew-lead > label { color: var(--success); font-weight: 700; }
.fcell.crew-lead input { font-weight: 700;
  border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.fauto.bad { color: var(--warning); }
/* Einstellungen → KI: letzter „Claude testen“ */
.ai-test { margin: 8px 0 0; font-size: 13px; }
.ai-test-ok { color: var(--success); font-weight: 600; }
.ai-test-bad { color: var(--danger); font-weight: 600; }
.formbtns .ai-test-note { align-self: center; color: var(--muted);
  font-size: 12px; }
/* Einstellungen → WhatsApp */
.wa-card h2 .pill { margin-left: 8px; vertical-align: 2px; }
.wa-h { font-size: 13px; margin: 18px 0 6px; }
.wa-h .muted { font-weight: 400; margin-left: 6px; }
.wa-list { margin: 0; padding-left: 20px; }
.wa-list li { padding: 2px 0; }
.wa-checks { display: flex; flex-direction: column; gap: 8px; }
.wa-checks .formbtns { margin-top: 2px; }
.fcheck.wa-check { align-items: flex-start; font-weight: 400; }
.fcheck.wa-check input { flex: none; margin-top: 2px; }
.wa-missing { margin-top: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--warning-bg); border: 1px solid var(--warning); }
.wa-missing > b { color: var(--warning); }
.wa-missing-list { margin-top: 4px; line-height: 1.7; }
.wa-help { margin-top: 10px; }
.wa-help summary { cursor: pointer; font-weight: 600; }
.wa-help ol { margin: 8px 0; padding-left: 22px; }
.wa-help li { padding: 3px 0; }
a.btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
/* Demo-Szenarien → Testbetrieb zurücksetzen */
.reset-row { display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: center; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); }
.reset-h { font-size: 13px; margin: 18px 0 6px; }
.reset-table { max-width: 620px; }
.reset-empty { margin: 6px 0 0; font-size: 12px; }
.reset-names { margin: 6px 0; line-height: 1.6; }
.reset-confirm input { font-weight: 700; letter-spacing: .5px;
  max-width: 220px; }
/* Ablagezone „Auftrag aus E-Mail oder PDF“: Band zum Zustand der KI,
   gesperrt ohne KI (amber), Hinweis nach gescheitertem Einlesen */
.dropzone.has-ai { flex-wrap: wrap; }
.drop-ai { flex: 1 1 100%; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px 10px; padding: 8px 12px;
  border-radius: 8px; background: var(--warning-bg);
  border: 1px solid var(--warning); color: var(--warning);
  font-weight: 600; font-size: 13px; }
.drop-ai[hidden] { display: none; }
.drop-ai.warn { border-style: dashed; }
.drop-ai-text { flex: 1 1 260px; }
.drop-ai-link { font-weight: 700; }
.dropzone.ai-off > .dropzone-icon, .dropzone.ai-off > .dropzone-text {
  opacity: .5; }
.dropzone label.btn.disabled { opacity: .45; pointer-events: none; }

/* ------------- W13.8: Abliefernachweis → Rechnung ------------- */
.pod-missing { margin: 6px 0 0; padding-left: 18px; }
.pod-missing li { padding: 2px 0; }
.bq-group { border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-top: 10px; }
.bq-group.bq-wait { border-left: 4px solid var(--warning); }
.bq-head { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin-bottom: 6px; }
.bq-total { margin-left: auto; font-weight: 800; }
.bqtable td { vertical-align: top; }
.bq-acts { margin: 8px 0 0; }
.bq-acts form { margin: 0; }
.pod-doc { display: block; font-weight: 600; }
.pod-up { margin: 4px 0 0; }
.pod-cell .pill { margin: 2px 0; }
@media (max-width: 760px) {
  .bq-total { margin-left: 0; }
  /* Handy: jeder Auftrag eine kleine Karte — Nummer und Betrag oben,
     Tour und Liefertag, Relation, Nachweis darunter */
  table.bqtable, table.bqtable tbody { display: block; }
  table.bqtable tr { display: grid; grid-template-columns: 1fr auto;
    gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  table.bqtable tr:last-child { border-bottom: 0; }
  table.bqtable td { padding: 0; border: 0; }
  table.bqtable td.bq-c-no { grid-area: 1 / 1; font-weight: 700; }
  table.bqtable td.num { grid-area: 1 / 2; font-weight: 700; }
  table.bqtable td.bq-c-tour { grid-area: 2 / 1; }
  table.bqtable td.bq-c-day { grid-area: 2 / 2; }
  table.bqtable td.bq-c-lane { grid-area: 3 / 1 / 4 / 3;
    white-space: normal; }
  table.bqtable td.bq-c-pod { grid-area: 4 / 1 / 5 / 3; }
}

/* W16 (Almir 12.10.): Stufen Erfasst → Versendet → Fakturiert. Stepper
   (_stepper.html): erledigte Schritte gefüllt, der letzte mit Ring, die
   Linie zwischen zwei erledigten Schritten ist ausgezogen. Kompakt in den
   Tourzeilen, groß in den Details. */
.stepper { list-style: none; margin: 0; padding: 0; display: flex;
  align-items: center; }
.stepper li { display: flex; align-items: center; position: relative; }
.stepper .sdot { display: block; flex: none; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--border);
  background: var(--card); }
.stepper li.done .sdot { background: var(--success);
  border-color: var(--success); }
.stepper li.now .sdot { box-shadow: 0 0 0 3px var(--success-bg); }
.stepper li:not(:last-child)::after { content: ""; flex: none;
  width: 10px; height: 2px; background: var(--border); }
.stepper li.linked::after { background: var(--success); }
.stepper:not(.big) .slabel { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stepwrap { display: flex; align-items: center; gap: 8px;
  margin: 4px 0 1px 1px; }
.stepnow { font-size: 11px; color: var(--muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper.big { align-items: flex-start; margin: 0 0 12px;
  padding: 10px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  overflow-x: auto; }
.stepper.big li { flex: 1 1 0; min-width: 104px; flex-direction: column;
  align-items: flex-start; gap: 3px; padding-right: 10px; }
.stepper.big .sdot { width: 14px; height: 14px; }
.stepper.big li:not(:last-child)::after { position: absolute; top: 6px;
  left: 20px; right: 6px; width: auto; }
.stepper.big .slabel { font-weight: 700; font-size: 12.5px; }
.stepper.big li.todo .slabel { color: var(--muted); font-weight: 600; }
.stepper.big .swhen { font-size: 11.5px; color: var(--muted);
  overflow-wrap: anywhere; }
.tlist th.w-beleg { width: 104px; }
/* Liste „Geliefert — zu fakturieren“: der erste Knopf (Entwurf prüfen &
   freigeben) bleibt sichtbar — er ist der Zweck der Liste */
.tlist.t-zufakt th.w-acts { width: 214px; }
@media (max-width: 1599px) {
  .tlist.t-zufakt th.w-acts { width: 214px; }
  .tlist.t-zufakt td.rowbtns > :not(details) { display: inline-block; }
}
.tdet-pod { margin: 0 0 10px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
/* Sammelfreigabe in der Liste „Geliefert — zu fakturieren“ */
.tl-bulk { align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.tl-bulk .tl-bulk-all { display: inline-flex; gap: 6px;
  align-items: center; cursor: pointer; }
.tlist th.tl-chk { width: 30px; }
.tlist table.data td.tl-chk { padding-left: 10px; padding-right: 0; }
.tl-note { margin: 0 0 10px; }

/* ---- W16 — Paket C: Tour-Link (Makro tour_link_box), WhatsApp-Vorschau.
   Die öffentliche Seite /t/… hat ihr eigenes Stylesheet (tourlink.html),
   nutzt aber dieselben Variablen. ---- */
.tlb { border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 10px 0; background: var(--card); }
.tlb-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px; margin-bottom: 6px; }
.tlb-title { font-weight: 800; }
.tlb-pod { color: var(--muted); font-weight: 600; }
.tlb-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tlb-url { flex: 1 1 260px; min-width: 0; font-family: Consolas,
  monospace; font-size: 12px; }
.tlb-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tlb-hint .pill { margin-right: 6px; }
.tlb-renew { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px; margin: 8px 0 0; }
.tlb-renew .tlb-hint { margin-top: 0; }
.wa-prev { max-width: 760px; }
.wa-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.wa-to { display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 14px; margin: 6px 0 12px; }
.wa-to dt { color: var(--muted); font-weight: 600; }
.wa-to dd { margin: 0; overflow-wrap: anywhere; }
.wa-label { display: block; color: var(--muted); font-weight: 600;
  margin-bottom: 4px; }
.wa-text { width: 100%; font-family: Consolas, monospace; font-size: 12.5px;
  line-height: 1.45; resize: vertical; background: var(--bg); }
.wa-btns { flex-wrap: wrap; }