/* Speditionary - ein Stylesheet für die ganze Anwendung.

   EINE Datei statt einer je Seite: die Seiten teilen sich Navigation, Tabellen, Formulare und
   Dialoge fast vollständig; getrennte Dateien würden vor allem Doppelpflege erzeugen.

   Drei Entscheidungen, die das Aussehen bestimmen:

   1. DICHTE VOR WEISSRAUM. Die Anwendung ersetzt eine Excel-Tabelle, in der man eine ganze Woche
      auf einen Blick sieht. Eine luftige Karten-Oberflaeche mit drei Fahrten pro Bildschirm wäre
      ein Rückschritt, egal wie huebsch sie ist. Deshalb kompakte Zeilenhoehen, kleine
      Schriftgrade in Tabellen und eine feste Seitenleiste statt einer Navigation, die Platz
      über dem Inhalt wegnimmt.

   2. VIER ERSCHEINUNGSBILDER, EIN BAUKASTEN. Der Inhaber wählt unter Einstellungen zwischen
      "Automatisch" (folgt dem Betriebssystem), "Hell", "Dunkel" und "Unterwegs". Umgesetzt wird
      das ausschließlich über Farbwerte: jedes Erscheinungsbild definiert dieselben Variablen neu,
      kein einziges Bauteil existiert doppelt. Deshalb kostet ein weiteres Design später nur einen
      Block mit Farbwerten und keine Pflege an fünfzig Stellen.

      Die Reihenfolge der Blöcke ist wichtig: erst der helle Standard, dann die Systemeinstellung
      (nur wenn NICHT ausdrücklich hell oder Unterwegs gewählt wurde), dann die ausdrückliche
      Wahl. So gewinnt eine bewusste Entscheidung immer gegen die Automatik.

   3. AKZENTFARBE JE MANDANT. --akzent wird von der Seite gesetzt (siehe partials/kopf.php) und
      kommt aus den Mandantendaten. Alles Farbige leitet sich davon ab, damit ein Mandant seine
      Hausfarbe bekommt, ohne dass jemand Stylesheets anfassen muss. */

:root{
  color-scheme: light dark;

  --akzent:#2F6BFF;
  --akzent-weich:rgba(47,107,255,0.12);

  --grund:#F5F6F8;          /* Seitenhintergrund */
  --flaeche:#FFFFFF;        /* Karten, Tabellen, Dialoge */
  --flaeche-2:#FAFBFC;      /* Tabellenkopf, Zebrastreifen */
  --flaeche-3:#EFF1F4;      /* Hover, Eingabefelder */
  --linie:#E3E7EC;
  --linie-stark:#CDD4DD;

  --text:#101828;
  --text-leise:#667085;
  --text-sehr-leise:#98A2B3;

  --gruen:#0E9F6E;
  --gruen-weich:rgba(14,159,110,0.12);
  --gelb:#C77700;
  --gelb-weich:rgba(199,119,0,0.13);
  --rot:#D64545;
  --rot-weich:rgba(214,69,69,0.12);

  --schatten:0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  --schatten-hoch:0 12px 32px rgba(16,24,40,0.16);
  --radius:10px;
  --radius-klein:7px;
  --seitenleiste:216px;
}

/* Automatik: greift nur, solange nicht ausdrücklich ein helles Erscheinungsbild
   gewählt wurde - eine bewusste Entscheidung schlägt die Systemeinstellung. */
@media (prefers-color-scheme: dark){
  :root:not([data-design="hell"]):not([data-design="urlaub"]){
    --grund:#0B1220;
    --flaeche:#131C2E;
    --flaeche-2:#172236;
    --flaeche-3:#1D2A42;
    --linie:rgba(255,255,255,0.10);
    --linie-stark:rgba(255,255,255,0.20);

    --text:#E8ECF3;
    --text-leise:#9AA7BC;
    --text-sehr-leise:#6C7A91;

    --akzent-weich:rgba(47,107,255,0.22);
    --gruen:#3DD69A; --gruen-weich:rgba(61,214,154,0.15);
    --gelb:#E8A33D;  --gelb-weich:rgba(232,163,61,0.15);
    --rot:#F0705F;   --rot-weich:rgba(240,112,95,0.15);

    --schatten:0 1px 2px rgba(0,0,0,0.4);
    --schatten-hoch:0 16px 40px rgba(0,0,0,0.55);
  }
}

/* Ausdrückliche Wahl "Dunkel" - dieselben Werte, unabhängig vom Betriebssystem. */
:root[data-design="dunkel"]{
  --grund:#0B1220;
  --flaeche:#131C2E;
  --flaeche-2:#172236;
  --flaeche-3:#1D2A42;
  --linie:rgba(255,255,255,0.10);
  --linie-stark:rgba(255,255,255,0.20);

  --text:#E8ECF3;
  --text-leise:#9AA7BC;
  --text-sehr-leise:#6C7A91;

  --akzent-weich:rgba(47,107,255,0.22);
  --gruen:#3DD69A; --gruen-weich:rgba(61,214,154,0.15);
  --gelb:#E8A33D;  --gelb-weich:rgba(232,163,61,0.15);
  --rot:#F0705F;   --rot-weich:rgba(240,112,95,0.15);

  --schatten:0 1px 2px rgba(0,0,0,0.4);
  --schatten-hoch:0 16px 40px rgba(0,0,0,0.55);
}

/* ---------------------------------------------------------------------------
   "Unterwegs" - das Erscheinungsbild für alle, denen die beiden anderen zu nüchtern sind.
   Bildsprache: Himmel über dem Horizont und ein Globus mit Längen- und Breitengraden - dafür,
   dass ein Fahrer in der Welt herumkommt.

   Zwei Regeln haben den Entwurf bestimmt:
     - Der Hintergrund darf schmücken, die Arbeitsflächen nicht. Karten, Tabellen und Formulare
       bleiben ruhige, nahezu deckende Flächen - eine Fahrtenliste mit 200 Zeilen über einem
       Farbverlauf wäre nach zehn Minuten anstrengend.
     - Die Akzentfarbe des Mandanten bleibt unangetastet. Wer sein Hausblau gewählt hat, behält
       es auch hier; das Erscheinungsbild ändert die Umgebung, nicht die Marke.

   Globus und Sonne sind eingebettete SVG-Grafiken (data:-URI) - kein externes Bild, keine
   zusätzliche Anfrage, und sie funktionieren auch auf einem Server ohne Internetzugang.
   --------------------------------------------------------------------------- */
:root[data-design="urlaub"]{
  --grund:#DCEBF7;
  --flaeche:#FFFFFF;
  --flaeche-2:#F2F8FD;
  --flaeche-3:#E4EFF8;
  --linie:#CFE2F0;
  --linie-stark:#A9C8DE;

  --text:#0C2233;
  --text-leise:#4E6E85;
  --text-sehr-leise:#87A5BA;

  --gruen:#0E9F6E; --gruen-weich:rgba(14,159,110,0.13);
  --gelb:#C2681A;  --gelb-weich:rgba(194,104,26,0.14);
  --rot:#CE4848;   --rot-weich:rgba(206,72,72,0.13);

  --schatten:0 2px 4px rgba(12,34,51,0.07), 0 1px 2px rgba(12,34,51,0.05);
  --schatten-hoch:0 18px 44px rgba(12,34,51,0.22);
}

/* Himmel: oben tiefes Blau, zum Horizont hin heller und wärmer. fixed, damit er beim Scrollen
   einer langen Tabelle stehen bleibt und nicht mitwandert. */
:root[data-design="urlaub"] body{
  background:
    linear-gradient(180deg, #7FB6DF 0%, #ABD2EC 34%, #D6E9F6 62%, #F3E4CE 88%, #F7D9AE 100%);
  background-attachment:fixed;
}

/* Globus und Sonne als Pseudoelement, weil body schon den Himmel trägt. pointer-events:none
   stellt sicher, dass die Grafik keine Klicks abfängt. */
:root[data-design="urlaub"] body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat, no-repeat;
  background-position:right -90px bottom -130px, 13% 15%;
  background-size:520px 520px, 150px 150px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' opacity='0.55'%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Cellipse cx='100' cy='100' rx='30' ry='78'/%3E%3Cellipse cx='100' cy='100' rx='56' ry='78'/%3E%3Cline x1='22' y1='100' x2='178' y2='100'/%3E%3Cpath d='M31 65h138M31 135h138'/%3E%3Cpath d='M44 42h112M44 158h112'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='26' fill='%23FFFFFF' opacity='0.42'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23FFFFFF' opacity='0.16'/%3E%3C/svg%3E");
}

/* Alles Bedienbare muss über der Grafik liegen.
   ACHTUNG: hier nur Elemente anfassen, die von sich aus static sind. Seitenleiste, Kopfzeile und
   der Menüknopf sind fixed bzw. sticky - bekämen sie hier position:relative, fielen sie zurück
   in den normalen Fluss, und die Seitenleiste würde den gesamten Inhalt um ihre eigene Höhe nach
   unten schieben. Ihre z-index-Werte stehen ohnehin schon weit über der Grafik. */
:root[data-design="urlaub"] main,
:root[data-design="urlaub"] .fahrer-reiter{ position:relative; z-index:1; }

/* Seitenleiste und Kopfzeile durchscheinend - so bleibt der Himmel spürbar, ohne dass der
   Inhalt darauf schwimmt. */
:root[data-design="urlaub"] .seitenleiste,
:root[data-design="urlaub"] .fahrer-kopf{
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,0.6);
}
:root[data-design="urlaub"] .karte,
:root[data-design="urlaub"] .kennzahl,
:root[data-design="urlaub"] .tabellen-rahmen,
:root[data-design="urlaub"] .filterleiste,
:root[data-design="urlaub"] .fahrzeug-kachel,
:root[data-design="urlaub"] .fahrt-karte,
:root[data-design="urlaub"] .kalender,
:root[data-design="urlaub"] .dialog{
  background:rgba(255,255,255,0.94);
  border-color:rgba(255,255,255,0.8);
}
:root[data-design="urlaub"] .mandant-schild{ background:rgba(255,255,255,0.55); }
:root[data-design="urlaub"] .kalender-fahrzeug{ background:rgba(255,255,255,0.94); }
:root[data-design="urlaub"] .login-body{
  background:
    linear-gradient(180deg, #7FB6DF 0%, #ABD2EC 34%, #D6E9F6 62%, #F3E4CE 88%, #F7D9AE 100%);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--grund); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--akzent); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit; cursor:pointer;}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:0.95em;}
.muted{color:var(--text-leise);}
.hidden{display:none !important;}
.right{text-align:right;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
::selection{background:var(--akzent-weich);}

/* ==================== Seitenleiste ==================== */
.seitenleiste{
  position:fixed; left:0; top:0; bottom:0; width:var(--seitenleiste); z-index:60;
  background:var(--flaeche); border-right:1px solid var(--linie);
  display:flex; flex-direction:column; padding:14px 12px;
}
.marke{
  display:flex; align-items:center; gap:10px; padding:6px 8px 14px;
  font-weight:650; font-size:15px; letter-spacing:-0.01em; color:var(--text);
}
.marke:hover{text-decoration:none;}
.marke svg{color:var(--akzent); flex-shrink:0;}
.mandant-schild{
  margin:0 4px 12px; padding:8px 10px; border-radius:var(--radius-klein);
  background:var(--akzent-weich); font-size:12px; line-height:1.35;
}
.mandant-schild strong{display:block; font-weight:600; font-size:12.5px;}
.mandant-schild span{color:var(--text-leise);}

.haupt-navi{display:flex; flex-direction:column; gap:1px; flex:1; overflow-y:auto;}
.haupt-navi a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-klein);
  color:var(--text-leise); font-size:13.5px; font-weight:500; white-space:nowrap;
}
.haupt-navi a:hover{background:var(--flaeche-3); color:var(--text); text-decoration:none;}
.haupt-navi a.aktiv{background:var(--akzent-weich); color:var(--akzent); font-weight:600;}
.haupt-navi a svg{width:17px; height:17px; flex-shrink:0; stroke-width:1.7;}
.navi-gruppe{
  font-size:10.5px; font-weight:650; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--text-sehr-leise); padding:14px 10px 5px;
}

.seitenleiste-fuss{border-top:1px solid var(--linie); padding-top:10px; margin-top:8px;}
.benutzer-zeile{display:flex; align-items:center; gap:9px; padding:5px 8px;}
.avatar{
  width:28px; height:28px; border-radius:50%; background:var(--akzent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:650; flex-shrink:0;
}
.benutzer-zeile .name{font-size:12.5px; font-weight:550; line-height:1.25; overflow:hidden; text-overflow:ellipsis;}
.benutzer-zeile .rolle{font-size:11px; color:var(--text-leise); text-transform:capitalize;}
/* ---- Meldungsverlauf in der Seitenleiste ---- */
.meldungs-feld-huelle{position:relative;}
.meldungs-knopf{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; margin-bottom:4px;
  background:transparent; border:none; border-radius:var(--radius-klein);
  color:var(--text-leise); font-size:12.5px; font-weight:500; text-align:left;
}
.meldungs-knopf:hover{background:var(--flaeche-3); color:var(--text);}
.meldungs-zahl{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--akzent); color:#fff; font-size:11px; font-weight:650;
  display:flex; align-items:center; justify-content:center;
}
.meldungs-feld{
  position:absolute; bottom:100%; left:0; right:0; margin-bottom:6px; z-index:70;
  background:var(--flaeche); border:1px solid var(--linie-stark); border-radius:var(--radius);
  box-shadow:var(--schatten-hoch); max-height:320px; overflow-y:auto;
}
.meldungs-kopf{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--linie);
  font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-leise); position:sticky; top:0; background:var(--flaeche);
}
.meldungs-kopf button{
  background:none; border:none; color:var(--akzent); font-size:11.5px; text-transform:none;
  letter-spacing:0; font-weight:550;
}
.meldung{padding:9px 12px; border-bottom:1px solid var(--linie); font-size:12.5px; line-height:1.45;}
.meldung:last-child{border-bottom:none;}
.meldung.fehler{border-left:3px solid var(--rot);}
.meldung.warnung{border-left:3px solid var(--gelb);}
.meldung time{display:block; margin-top:3px; font-size:11px; color:var(--text-sehr-leise);}
.meldung-leer{padding:16px 12px; text-align:center; font-size:12.5px; color:var(--text-leise);}

/* Aktionsleiste eines Formulars: Knöpfe nach rechts, mit Trennlinie darüber. Links stehende
   Speichern-Knöpfe verschwinden auf breiten Formularen im leeren Raum - rechts sitzen sie da,
   wo der Blick nach dem Ausfüllen des letzten Feldes ohnehin ankommt. */
.formular-aktionen{
  display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--linie);
}

.abmelden{display:block; padding:6px 8px; font-size:12.5px; color:var(--text-leise);}
.abmelden:hover{color:var(--rot); text-decoration:none;}

.navi-schalter{
  display:none; position:fixed; top:10px; left:10px; z-index:70;
  width:38px; height:38px; border-radius:var(--radius-klein);
  background:var(--flaeche); border:1px solid var(--linie); color:var(--text);
  align-items:center; justify-content:center; box-shadow:var(--schatten);
}

main{padding:24px 26px 60px; margin-left:var(--seitenleiste);}

/* ==================== Überschriften und Seitenkopf ==================== */
h1{font-size:21px; font-weight:650; letter-spacing:-0.02em;}
h2{font-size:16px; font-weight:600; letter-spacing:-0.01em;}
h3{font-size:11px; font-weight:650; color:var(--text-leise); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px;}
.seitenkopf{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.seitenkopf .untertitel{color:var(--text-leise); font-size:13px; margin-top:2px;}

/* ==================== Knoepfe ==================== */
.btn{
  background:var(--akzent); color:#fff; border:1px solid transparent;
  padding:8px 14px; border-radius:var(--radius-klein); font-size:13px; font-weight:550;
  display:inline-flex; align-items:center; gap:6px; line-height:1.3;
  transition:filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{filter:brightness(1.07); text-decoration:none;}
.btn:active{filter:brightness(0.95);}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:none;}
.btn.sekundaer{background:var(--flaeche); color:var(--text); border-color:var(--linie-stark);}
.btn.sekundaer:hover{background:var(--flaeche-3); filter:none;}
.btn.gefahr{background:var(--rot);}
.btn.klein{padding:5px 10px; font-size:12px;}
.btn-reihe{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

/* ==================== Flaechen ==================== */
.karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:16px; box-shadow:var(--schatten);
}
.karten-reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; margin-bottom:18px;}
.kennzahl{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--schatten);
}
.kennzahl .wert{font-size:24px; font-weight:650; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.15;}
.kennzahl .label{font-size:12px; color:var(--text-leise); margin-top:3px;}
.kennzahl.warnung .wert{color:var(--gelb);}
.kennzahl.rot .wert{color:var(--rot);}
.kennzahl.gut .wert{color:var(--gruen);}

/* ==================== Tabellen ==================== */
.tabellen-rahmen{
  overflow-x:auto; border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--flaeche); box-shadow:var(--schatten);
}
table.liste{width:100%; border-collapse:collapse; font-size:13px;}
table.liste th{
  text-align:left; padding:9px 12px; font-size:11px; font-weight:650; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-leise); background:var(--flaeche-2);
  border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:5; white-space:nowrap;
}
table.liste td{padding:9px 12px; border-bottom:1px solid var(--linie); vertical-align:top;}
table.liste tbody tr:last-child td{border-bottom:none;}
table.liste tbody tr:hover{background:var(--flaeche-2);}
table.liste tr.klickbar{cursor:pointer;}
table.liste td.zahl,table.liste th.zahl{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.liste tfoot td{background:var(--flaeche-2); font-weight:550; border-top:1px solid var(--linie);}
.karte table.liste th{background:transparent;}
.leer-hinweis{padding:34px 20px; text-align:center; color:var(--text-leise); font-size:13px;}

/* ==================== Aufklappbare Tabellenzeilen (Adminbereich) ==================== */
.aufklapp{
  width:22px; height:22px; border-radius:5px; border:1px solid var(--linie-stark);
  background:var(--flaeche); color:var(--text-leise); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.aufklapp:hover{background:var(--flaeche-3); color:var(--text);}
.detail-zeile > td{background:var(--flaeche-2); padding:0;}
.detail-inhalt{padding:14px 16px;}
.detail-kopf{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom:10px; border-bottom:1px solid var(--linie); font-size:13.5px;
}
.detail-kopf .muted{display:block; font-size:12px;}
.detail-inhalt table.liste th{background:transparent;}

/* ==================== Tarifzeile (Aboseite) ==================== */
.tarif-zeile{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px; border:1px solid var(--linie); border-radius:var(--radius-klein);
  background:var(--flaeche-2);
}
.tarif-zeile > :first-child{flex:1; min-width:220px;}
.tarif-preis{font-size:22px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tarif-preis span{font-size:13px; font-weight:500; color:var(--text-leise); margin-left:4px;}

/* ==================== Tabellen auf dem Handy ====================

   Eine Tabelle mit zehn Spalten auf 390 Pixeln ist unlesbar - egal wie schmal man die Schrift
   macht. Deshalb wird aus jeder Zeile unterhalb von 760 Pixeln eine Karte: die Spaltenüberschrift
   wandert als Beschriftung vor den Wert (aus dem Attribut data-spalte), die Kopfzeile entfällt.

   Zwei Sonderfälle bleiben bewusst waagerecht scrollbar statt gestapelt: der Wochenkalender
   (dort IST das Raster die Information) und Tabellen ohne data-spalte. */
@media (max-width:760px){
  table.liste.karten-mobil thead{
    /* Nicht display:none - das nimmt Vorlesegeräten die Spaltennamen. */
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  table.liste.karten-mobil,
  table.liste.karten-mobil tbody,
  table.liste.karten-mobil tfoot,
  table.liste.karten-mobil tr,
  table.liste.karten-mobil td{display:block; width:auto;}

  table.liste.karten-mobil tr{
    border:1px solid var(--linie); border-radius:var(--radius-klein);
    margin:10px; padding:4px 2px; background:var(--flaeche);
  }
  table.liste.karten-mobil tbody tr:hover{background:var(--flaeche);}

  table.liste.karten-mobil td{
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    padding:6px 12px; border-bottom:1px solid var(--linie); text-align:right; font-size:13px;
  }
  table.liste.karten-mobil td:last-child{border-bottom:none;}
  table.liste.karten-mobil td.zahl{text-align:right;}

  /* Die Beschriftung kommt aus data-spalte; Zellen ohne Attribut (Ampeln, Knopfleisten)
     bleiben ohne und nehmen die volle Breite. */
  table.liste.karten-mobil td[data-spalte]::before{
    content:attr(data-spalte); flex:0 0 auto; text-align:left;
    font-size:11px; font-weight:650; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--text-leise); padding-top:2px;
  }
  table.liste.karten-mobil td:not([data-spalte]){justify-content:flex-end;}

  /* Nebensächliche Spalten verschwinden auf dem Handy ganz. Eine Karte mit zehn Zeilen je
     Fahrt bedeutet bei 88 Fahrten einen halben Kilometer Scrollen - übrig bleibt, wonach man
     tatsächlich sucht. Am Rechner sind alle Spalten weiterhin da. */
  table.liste.karten-mobil .nur-desktop{display:none;}

  /* Leerer Hinweis und Knopfleisten sollen nicht wie ein Wertepaar aussehen. */
  table.liste.karten-mobil td.leer-hinweis{display:block; text-align:center; border:none;}
  table.liste.karten-mobil td .btn{margin-left:6px; margin-top:2px;}
}

/* ==================== Statusabzeichen ==================== */
.badge{
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  font-weight:600; white-space:nowrap; line-height:1.5;
}
.badge.geplant,.badge.entwurf{background:var(--flaeche-3); color:var(--text-leise);}
.badge.unterwegs,.badge.offen{background:var(--gelb-weich); color:var(--gelb);}
.badge.erledigt,.badge.bezahlt{background:var(--gruen-weich); color:var(--gruen);}
.badge.abgerechnet{background:var(--akzent-weich); color:var(--akzent);}
.badge.storniert,.badge.ueberfaellig{background:var(--rot-weich); color:var(--rot);}
/* Fremdvergabe: eine Fahrt, die ein Subunternehmer faehrt. Bewusst dieselbe Farbe wie das
   Fahrzeugkennzeichen daneben haette - der Unterschied liegt im Wort, nicht im Alarm. */
.badge.fremd{background:var(--gelb-weich); color:var(--gelb);}

/* Die Fremdvergabe-Zeile ist kein Ablageziel (siehe dispo.js). */
.kalender-zelle.nicht-ablegbar{background:var(--flaeche-2);}

/* Zeile ueber der Benutzerliste: belegte und inbegriffene Zugaenge. */
.platz-hinweis{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:12px; font-size:13px; color:var(--text);
}

/* Kostenaufstellung im Benutzerdialog, bevor zahlungspflichtig bestaetigt wird. Gelb umrandet
   wie der Wartungshinweis: es ist kein Fehler, aber etwas, das man gelesen haben muss. */
.kosten-hinweis{
  margin-top:14px; padding:13px 15px; font-size:13px; line-height:1.55;
  border:1px solid var(--gelb); border-left-width:3px;
  border-radius:var(--radius-klein); background:var(--gelb-weich); color:var(--text);
}
.kosten-hinweis strong{color:var(--text);}
.kosten-hinweis ul{list-style:disc;}
.kosten-hinweis p{font-size:12px;}

/* ==================== Tarifauswahl auf der Aboseite ====================
   Zwei Reihen anklickbarer Karten: erst der Zeitraum, dann die Zahlungsart. Bewusst Karten und
   keine Auswahlliste - die Ersparnis bei laengerer Laufzeit ist das eigentliche Argument und
   gehoert gross danebengeschrieben, nicht in eine Zeile im Klappmenue. */
.tarif-karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.tarif-karte{
  display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  padding:14px 16px; border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--flaeche); color:var(--text); transition:border-color .12s, background .12s;
}
.tarif-karte:hover:not(:disabled){border-color:var(--akzent);}
.tarif-karte.aktiv{border-color:var(--akzent); background:var(--akzent-weich);}
.tarif-karte:disabled,.tarif-karte.gesperrt{opacity:.5; cursor:not-allowed;}
.tarif-karte.laedt{opacity:.6; pointer-events:none;}
.tarif-karte-name{font-weight:650; font-size:14px;}
.tarif-karte-preis{font-size:20px; font-weight:650; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.tarif-karte-je{font-size:12px; color:var(--text-leise);}
.tarif-karte-sparen{font-size:12px; font-weight:600; color:var(--gruen);}
.tarif-karte-hinweis{font-size:12px; color:var(--text-leise); line-height:1.45;}

/* ==================== Übersicht (start.php) ====================
   Die Bereiche als Kacheln. Bewusst gleich gross und ohne Rangfolge: welcher Bereich der
   wichtigste ist, entscheidet der Tag, nicht das Layout. Was heute ansteht, steht darueber in
   der Aufgabenliste - dort gehoert die Gewichtung hin. */
.kachel-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}
.kachel{
  display:flex; flex-direction:column; gap:5px;
  padding:16px 17px; border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--flaeche); color:var(--text); text-decoration:none;
  transition:border-color .12s, transform .12s;
}
.kachel:hover{border-color:var(--akzent); transform:translateY(-1px);}
.kachel-symbol{display:flex; width:30px; height:30px; margin-bottom:3px; color:var(--akzent);}
.kachel-symbol svg{width:100%; height:100%; stroke-width:1.7;}
.kachel-name{font-weight:650; font-size:14.5px; letter-spacing:-0.01em;}
.kachel-text{font-size:12.5px; color:var(--text-leise); line-height:1.45;}

/* Aufgabenliste: je Zeile ein Punkt mit einer Zahl dahinter und einem Ziel. Der farbige Punkt
   links traegt die Dringlichkeit - rot nur da, wo es wirklich Geld oder Fristen betrifft. */
.aufgaben{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.aufgabe{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--linie);}
.aufgabe:first-child{border-top:none; padding-top:2px;}
.aufgabe::before{content:''; width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--text-leise);}
.aufgabe.warnung::before{background:var(--gelb);}
.aufgabe.rot::before{background:var(--rot);}
.aufgabe a{color:var(--text); text-decoration:none; font-size:13.5px;}
.aufgabe a:hover{color:var(--akzent); text-decoration:underline;}
.aufgabe.rot a{font-weight:600;}

/* ==================== Blätterung ====================
   Sitzt unter der Tabelle: links die Angabe, welcher Ausschnitt zu sehen ist, rechts die
   Seitenzahlen. Die Angabe links ist der eigentliche Nutzen - "51–100 von 1.240" beantwortet
   die Frage "wie viel ist das ueberhaupt", die eine Liste ohne Blaetterung offen laesst. */
.blaetterung{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:12px; font-size:12.5px; color:var(--text-leise);
}
.blaetter-knoepfe{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.blaetter-knopf{
  min-width:30px; height:30px; padding:0 8px; border-radius:var(--radius-klein);
  border:1px solid var(--linie); background:var(--flaeche); color:var(--text);
  font-size:12.5px; font-variant-numeric:tabular-nums; cursor:pointer;
}
.blaetter-knopf:hover:not(:disabled):not(.aktiv){border-color:var(--akzent); color:var(--akzent);}
.blaetter-knopf.aktiv{background:var(--akzent); border-color:var(--akzent); color:#fff; font-weight:600;}
.blaetter-knopf:disabled{opacity:.4; cursor:not-allowed;}
.blaetter-luecke{padding:0 2px; color:var(--text-leise);}

@media (max-width:640px){
  .blaetterung{justify-content:center;}
  .blaetter-info{width:100%; text-align:center;}
}

/* Beim Drucken ist die Blaetterung sinnlos - gedruckt wird, was auf dem Papier landet. */
@media print{ .blaetterung{display:none;} }

/* Die drei Zeitraeume in der Preiskarte der Startseite. */
.preis-intervalle{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px;}
.preis-intervall{
  display:flex; flex-direction:column; gap:2px; text-align:center;
  padding:11px 8px; border:1px solid var(--linie); border-radius:var(--radius-klein);
}
.preis-intervall.hervor{border-color:var(--gruen); background:var(--gruen-weich);}
.preis-intervall-name{font-size:11.5px; font-weight:600; color:var(--text-leise);}
.preis-intervall-zahl{font-size:16px; font-weight:650; font-variant-numeric:tabular-nums;}
.preis-intervall-je{font-size:11px; color:var(--text-leise);}
.preis-intervall-sparen{font-size:11px; font-weight:600; color:var(--gruen);}
@media (max-width:560px){ .preis-intervalle{grid-template-columns:1fr;} }

/* Der Fremdvergabebereich im Fahrtenformular, solange kein Subunternehmer gewaehlt ist. Nicht
   ausgeblendet, sondern sichtbar inaktiv: das Feld soll erkennbar da sein - man sieht, dass es
   die Moeglichkeit gibt, ohne dass sie sich bei jeder Eigenleistung in den Weg stellt. */
fieldset.inaktiv{opacity:0.55;}
fieldset.inaktiv legend{color:var(--text-leise);}

/* ==================== Wartungsmodus ====================
   Ein schmales Band ganz oben, auf jeder Seite gleich - oeffentlich wie angemeldet.

   Es liegt FEST am oberen Rand und nicht im Textfluss, weil die Seitenleiste selbst fixiert ist
   und ein mitscrollendes Band sonst dahinter verschwinden wuerde. Damit nichts verdeckt wird,
   ruecken Seitenleiste, Inhalt und der Kopf der Startseite um genau die Bandhoehe nach unten -
   ueber eine Variable, damit die Zahl an genau einer Stelle steht. */
:root{ --wartungsband: 34px; }

.wartungs-band{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:var(--wartungsband); display:flex; align-items:center; justify-content:center;
  gap:6px; padding:0 14px; font-size:12.5px; line-height:1.3; text-align:center;
  background:var(--gelb-weich); color:var(--gelb);
  border-bottom:1px solid var(--gelb);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wartungs-band strong{font-weight:650;}

body:has(> .wartungs-band) .seitenleiste{top:var(--wartungsband);}
body:has(> .wartungs-band) main{padding-top:calc(24px + var(--wartungsband));}
body:has(> .wartungs-band) .start-kopf{top:var(--wartungsband);}
body:has(> .wartungs-band) .navi-schalter{top:calc(12px + var(--wartungsband));}
body.login-body:has(> .wartungs-band){padding-top:var(--wartungsband);}

/* Kasten auf der Registrierseite, wenn die Anmeldung neuer Firmen gerade geschlossen ist. */
.wartungs-hinweis{
  border:1px solid var(--gelb); border-radius:var(--radius-klein);
  background:var(--gelb-weich); padding:14px 16px; margin-top:6px;
}
.wartungs-hinweis strong{display:block; color:var(--gelb); margin-bottom:5px;}
.wartungs-hinweis p{font-size:13px; color:var(--text-leise); margin:0;}

/* Protokollansicht im Adminbereich. Feste Hoehe mit eigenem Rollbalken statt einer Seite, die
   bei tausend Zeilen kilometerlang wird - und umbruchfrei, damit eine Logzeile eine Zeile bleibt. */
.protokoll{
  max-height:420px; overflow:auto; margin:0;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--radius-klein);
  padding:12px 14px; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; line-height:1.65;
  color:var(--text-leise); white-space:pre; tab-size:2;
}

/* Kennzeichnung, dass der Kunde einen Sendungsverfolgungs-Link bekommen hat. */
.verfolgt{
  display:inline-block; margin-top:3px; padding:1px 7px; border-radius:20px;
  background:var(--akzent-weich); color:var(--akzent); font-size:10.5px; font-weight:600;
}

/* GPS-Ampel: als Punkt und nicht als Text - sie steht in jeder Fahrtenzeile und darf dort keine
   Spaltenbreite kosten. Der title-Text erklaert sie beim Darueberfahren. */
.gps{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--text-sehr-leise); flex-shrink:0;
}
.gps.bestaetigt{background:var(--gruen); box-shadow:0 0 0 3px var(--gruen-weich);}
.gps.abweichung{background:var(--rot); box-shadow:0 0 0 3px var(--rot-weich);}
.gps.offen{background:var(--text-sehr-leise);}
.gps.keine_daten{background:transparent; border:1.5px solid var(--linie-stark);}

/* ==================== Formulare ==================== */
label.feld{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-leise); font-weight:500;}
input,select,textarea{
  background:var(--flaeche); color:var(--text); border:1px solid var(--linie-stark);
  border-radius:var(--radius-klein); padding:7px 10px; font-size:13px; font-family:inherit; width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--text-sehr-leise);}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-weich);
}
input[type=checkbox],input[type=radio]{width:auto; accent-color:var(--akzent);}
input[type=color]{padding:2px; height:34px;}
textarea{resize:vertical; min-height:58px;}
.formular-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:11px;}
.spanne-2{grid-column:span 2;}
.spanne-voll{grid-column:1 / -1;}
.filterleiste{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--schatten);
}
.filterleiste label.feld{min-width:125px; flex:0 0 auto;}
.filterleiste .wachsen{flex:1; min-width:190px;}
fieldset{border:1px solid var(--linie); border-radius:var(--radius-klein); padding:14px; margin-bottom:13px;}
legend{padding:0 7px; font-size:11px; font-weight:650; color:var(--text-leise); text-transform:uppercase; letter-spacing:0.05em;}

/* ==================== Auswahl des Erscheinungsbilds ==================== */
.design-karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
.design-karte{
  display:flex; flex-direction:column; gap:3px; text-align:left; padding:10px;
  background:var(--flaeche); border:1.5px solid var(--linie); border-radius:var(--radius);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.design-karte:hover{border-color:var(--linie-stark);}
.design-karte.aktiv{border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-weich);}
.design-titel{font-size:13.5px; font-weight:600; color:var(--text); margin-top:8px;}
.design-text{font-size:11.5px; color:var(--text-leise); line-height:1.35;}

/* Die Nachbildung der Oberfläche in der Auswahlkarte: Seitenleiste links, zwei Kennzahlen,
   darunter eine angedeutete Tabelle. Alles nur Flächen - Text wäre in dieser Größe Matsch. */
.design-bild{
  display:flex; gap:4px; height:82px; padding:5px; border-radius:7px; overflow:hidden;
  border:1px solid var(--linie);
}
.design-leiste{width:20px; border-radius:3px; border:1px solid; flex-shrink:0;}
.design-inhalt{display:flex; flex-wrap:wrap; gap:4px; flex:1; align-content:flex-start;}
.design-block{height:20px; flex:1; min-width:26px; border-radius:3px; border:1px solid;}
.design-tabelle{
  width:100%; height:36px; border-radius:3px; border:1px solid;
  display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 5px;
}
.design-tabelle span{height:2px; border-radius:2px; opacity:.28;}
.design-tabelle span:nth-child(2){width:78%;}
.design-tabelle span:nth-child(3){width:55%;}

/* "Automatisch": zwei vollständige Nachbildungen übereinander, die obere diagonal beschnitten -
   dadurch ist links das helle und rechts das dunkle Erscheinungsbild zu sehen. */
.design-geteilt{position:relative; padding:0;}
.design-haelfte{
  position:absolute; inset:0; display:flex; gap:4px; padding:5px; border-radius:6px;
}
.design-diagonal{clip-path:polygon(100% 0, 100% 100%, 22% 100%);}

/* Angedeuteter Globus im Unterwegs-Feld. */
.design-globus{
  position:absolute; right:4px; bottom:-14px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.85); background:rgba(255,255,255,0.18);
}
.design-bild{position:relative;}

/* ==================== Reiter ==================== */
.reiter{display:flex; gap:3px; border-bottom:1px solid var(--linie); margin-bottom:18px; overflow-x:auto;}
.reiter button{
  background:none; border:none; color:var(--text-leise); padding:9px 14px;
  font-size:13.5px; font-weight:550; border-bottom:2px solid transparent; white-space:nowrap;
  margin-bottom:-1px;
}
.reiter button:hover{color:var(--text);}
.reiter button.aktiv{color:var(--akzent); border-bottom-color:var(--akzent);}

/* ==================== Dialog ==================== */
.dialog-grund{
  position:fixed; inset:0; background:rgba(16,24,40,0.55); backdrop-filter:blur(3px); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:28px 18px; overflow-y:auto;
}
.dialog{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:14px;
  width:100%; max-width:660px; padding:20px; box-shadow:var(--schatten-hoch);
  animation:dialog-auf .14s ease-out;
}
@keyframes dialog-auf{ from{opacity:0; transform:translateY(-6px) scale(.99);} to{opacity:1; transform:none;} }
.dialog.breit{max-width:1020px;}
.dialog-kopf{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px;}
.dialog-kopf h2{margin:0;}
.dialog-schliessen{
  background:none; border:none; color:var(--text-leise); font-size:22px; line-height:1;
  width:30px; height:30px; border-radius:var(--radius-klein);
}
.dialog-schliessen:hover{background:var(--flaeche-3); color:var(--text);}
.dialog-fuss{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:18px; padding-top:15px; border-top:1px solid var(--linie);
}

/* ==================== Meldungen ==================== */
#toast-behaelter{position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:9px;}
.toast{
  background:var(--flaeche); border:1px solid var(--linie); border-left:3px solid var(--akzent);
  border-radius:var(--radius-klein); padding:11px 15px; font-size:13px; max-width:400px;
  box-shadow:var(--schatten-hoch); animation:toast-auf .16s ease-out;
}
@keyframes toast-auf{ from{opacity:0; transform:translateX(12px);} to{opacity:1; transform:none;} }
.toast.fehler{border-left-color:var(--rot);}
.toast.warnung{border-left-color:var(--gelb);}
.form-error{color:var(--rot); font-size:13px; margin-top:9px;}

/* ==================== Dispo-Kalender ==================== */
.kalender{
  overflow-x:auto; border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--flaeche); box-shadow:var(--schatten);
}
.kalender-raster{display:grid; min-width:940px;}
.kalender-zelle-kopf{
  padding:9px 11px; font-size:11.5px; font-weight:650; color:var(--text-leise);
  border-bottom:1px solid var(--linie); background:var(--flaeche-2);
  position:sticky; top:0; z-index:4;
}
.kalender-zelle-kopf.heute{color:var(--akzent);}
.kalender-fahrzeug{
  padding:11px; border-bottom:1px solid var(--linie); font-size:12.5px; font-weight:600;
  position:sticky; left:0; background:var(--flaeche); z-index:3; border-right:1px solid var(--linie);
  display:flex; align-items:center; gap:8px;
}
.fahrzeug-punkt{width:8px; height:8px; border-radius:3px; flex-shrink:0;}
.kalender-fahrzeug .kennz{display:block; font-size:11px; color:var(--text-leise); font-weight:400;}
.kalender-zelle{
  min-height:66px; padding:5px; border-bottom:1px solid var(--linie); border-left:1px solid var(--linie);
  display:flex; flex-direction:column; gap:4px; transition:background .1s ease;
}
.kalender-zelle:hover{background:var(--flaeche-2); cursor:copy;}
.kalender-zelle.heute{background:var(--akzent-weich);}
.kalender-zelle.ablage-ziel{background:var(--akzent-weich); box-shadow:inset 0 0 0 2px var(--akzent);}
.fahrt-kachel{
  border-left:3px solid var(--akzent); background:var(--flaeche-2);
  border:1px solid var(--linie); border-left-width:3px;
  border-radius:6px; padding:5px 7px; font-size:11.5px; cursor:grab; line-height:1.35;
  transition:transform .1s ease, box-shadow .1s ease;
}
.fahrt-kachel:hover{transform:translateY(-1px); box-shadow:var(--schatten); background:var(--flaeche);}
.fahrt-kachel.wird-gezogen{opacity:.35;}
.fahrt-kachel .kachel-kopf{display:flex; justify-content:space-between; align-items:center; gap:6px; font-weight:600;}
.fahrt-kachel .kachel-strecke{color:var(--text-leise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kalender-navi{display:flex; align-items:center; gap:7px;}

/* Umschalter fuer die Kalenderansicht - zwei zusammenhaengende Knoepfe, damit sofort klar ist,
   dass es genau zwei sich ausschliessende Zustaende sind (und nicht zwei Aktionen). */
.ansicht-wahl{display:inline-flex; border:1px solid var(--linie); border-radius:var(--radius-klein); overflow:hidden;}
.ansicht-wahl button{
  padding:6px 12px; font-size:12.5px; background:var(--flaeche); color:var(--text-leise);
  border:none; cursor:pointer; white-space:nowrap;
}
.ansicht-wahl button + button{border-left:1px solid var(--linie);}
.ansicht-wahl button:hover:not(.aktiv){color:var(--text); background:var(--flaeche-2);}
.ansicht-wahl button.aktiv{background:var(--akzent); color:#fff; font-weight:600;}

/* Tagesansicht: keine Fahrzeugspalte, dafuer hoehere Spalten - dort steht alles eines Tages
   untereinander statt auf sieben Fahrzeugzeilen verteilt. */
.kalender-raster.kompakt{min-width:0;}
.kalender-zelle.tagesspalte{min-height:180px; align-content:start;}
.kalender-zelle-kopf .tages-zahl{
  display:inline-block; margin-left:5px; padding:0 6px; border-radius:20px;
  background:var(--flaeche-3); color:var(--text-leise); font-size:10.5px; font-weight:600;
}

/* Traegerzeile auf der Kachel: Fahrzeug oder Subunternehmer. */
.fahrt-kachel .kachel-traeger{
  display:flex; align-items:center; gap:5px; margin-top:2px;
  font-size:10.5px; font-weight:600; color:var(--text-leise);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fahrt-kachel .kachel-punkt{width:7px; height:7px; border-radius:2px; flex:0 0 auto;}
.fahrt-kachel .kachel-traeger .badge{padding:1px 6px; font-size:10px;}

/* ==================== Karte ==================== */
.karten-flaeche{
  position:relative; width:100%; height:420px; overflow:hidden;
  background:var(--flaeche-3); border:1px solid var(--linie); border-radius:var(--radius);
}
.karten-flaeche.gross{height:min(68vh,640px);}
.kachel-ebene{position:absolute; inset:0;}
.karten-kachel{position:absolute; width:256px; height:256px;}
/* Die OSM-Kacheln gibt es nur in hell. Leicht abgedunkelt fügen sie sich in die dunkle
   Oberfläche ein, ohne dass Straßennamen unlesbar werden - ein vollständiges Invertieren wäre
   hässlich und schlechter lesbar. Gilt für die Automatik wie für die ausdrückliche Wahl. */
@media (prefers-color-scheme: dark){
  :root:not([data-design="hell"]):not([data-design="urlaub"]) .karten-kachel{
    filter:brightness(0.78) saturate(0.85) contrast(1.05);
  }
}
:root[data-design="dunkel"] .karten-kachel{ filter:brightness(0.78) saturate(0.85) contrast(1.05); }
:root[data-design="hell"] .karten-kachel,
:root[data-design="urlaub"] .karten-kachel{ filter:none; }
.marker{
  position:absolute; transform:translate(-50%,-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.marker .punkt{
  width:14px; height:14px; border-radius:50%; border:2.5px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.45);
}
.marker .fahne{
  margin-top:4px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:5px; padding:2px 7px; font-size:11px; font-weight:550; white-space:nowrap;
  box-shadow:var(--schatten);
}
.marker.ziel .punkt{width:11px; height:11px; background:var(--gelb); border-radius:2px; transform:rotate(45deg);}
.spur-linie{position:absolute; inset:0; pointer-events:none; z-index:4;}
.karten-hinweis{
  position:absolute; right:6px; bottom:5px; font-size:10px; color:var(--text-leise);
  background:var(--flaeche); padding:1px 6px; border-radius:4px; z-index:6; opacity:.9;
}
.kachel-fehler{
  position:absolute; inset:auto 10px 26px 10px; z-index:6; text-align:center;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius-klein);
  padding:6px 10px; font-size:11.5px; color:var(--text-leise); box-shadow:var(--schatten);
}
.karten-steuerung{position:absolute; left:9px; top:9px; z-index:6; display:flex; flex-direction:column; gap:5px;}
.karten-steuerung button{
  width:30px; height:30px; border-radius:var(--radius-klein); background:var(--flaeche);
  border:1px solid var(--linie); color:var(--text); font-size:17px; line-height:1;
  box-shadow:var(--schatten);
}
.karten-steuerung button:hover{background:var(--flaeche-3);}
.fahrzeug-kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px;}
.fahrzeug-kachel{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--schatten);
}
.fahrzeug-kachel .kopf{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px;}
.fahrzeug-kachel .kopf .titel{font-weight:600;}
.fahrzeug-kachel .kopf .unter{font-size:11.5px; color:var(--text-leise);}
.fahrzeug-kachel .karten-flaeche{height:212px; border:none; border-radius:0; border-top:1px solid var(--linie);}
.fahrzeug-kachel .fuss{
  padding:9px 14px; font-size:11.5px; color:var(--text-leise);
  display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--linie);
}
.live-punkt{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gruen); margin-right:6px;}
.live-punkt.alt{background:var(--gelb);}
.live-punkt.tot{background:var(--text-sehr-leise);}

/* ==================== Öffentliche Startseite ====================
   Eigener Abschnitt, weil hier andere Regeln gelten als in der Anwendung: die Startseite darf
   Luft haben und mit großer Schrift arbeiten - sie wird gelesen, nicht bedient. Deshalb kein
   Rückgriff auf die dichten Bauteile der Anwendung, sondern eigene Klassen mit dem Präfix
   "start-". Die Farbvariablen bleiben dieselben, damit ein Wechsel des Erscheinungsbilds auch
   hier trägt. */
.start-body{background:var(--grund);}
.start-body main{margin-left:0;}

/* Gemeinsame Breite für Kopf, Inhalt und Fuß - ohne sie klebt der Kopf am Bildschirmrand,
   während der Inhalt zentriert steht, und die Seite wirkt schief. */
.start-breite{max-width:1080px; margin:0 auto; width:100%;}

.start-kopf{
  position:sticky; top:0; z-index:50;
  padding:12px 24px;
  background:color-mix(in srgb, var(--flaeche) 90%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--linie);
}
.start-kopf-inhalt{display:flex; align-items:center; gap:24px;}
.start-kopf-rechts{display:flex; align-items:center; gap:14px;}
.start-anmelden{font-size:14px; font-weight:550; color:var(--text-leise); white-space:nowrap;}
.start-anmelden:hover{color:var(--text); text-decoration:none;}
.start-menue{
  display:none; width:38px; height:38px; border-radius:var(--radius-klein);
  background:transparent; border:1px solid var(--linie-stark); color:var(--text);
  align-items:center; justify-content:center;
}
.start-marke{font-size:16px; color:var(--text); padding:0;}
.start-marke svg{color:var(--akzent);}
.start-navi{display:flex; gap:22px; flex:1; flex-wrap:wrap;}
.start-navi a{font-size:14px; font-weight:500; color:var(--text-leise);}
.start-navi a:hover{color:var(--text); text-decoration:none;}

.start-inhalt{padding:0 24px 40px;}
.start-abschnitt{padding:56px 0; border-top:1px solid var(--linie);}
.start-abschnitt h2{font-size:26px; letter-spacing:-0.02em; margin-bottom:8px;}
.start-fliess{color:var(--text-leise); font-size:15.5px; line-height:1.65; max-width:660px;}

.start-mitte{text-align:center; margin-left:auto; margin-right:auto;}

.start-hero{
  padding:76px 0 46px; text-align:center; position:relative;
}
/* Weicher Lichtschein hinter der Überschrift - gibt dem Kopfbereich Tiefe, ohne dass ein Bild
   geladen werden muss. */
.start-hero::before{
  content:""; position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  width:min(900px, 100%); height:420px; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, var(--akzent-weich), transparent 72%);
}

/* ---- Schematische Ansicht der Anwendung ---- */
.start-schau{margin-top:40px; perspective:1400px;}
.schau-fenster{
  max-width:880px; margin:0 auto; border:1px solid var(--linie); border-radius:12px;
  background:var(--flaeche); box-shadow:var(--schatten-hoch); overflow:hidden;
  transform:rotateX(4deg);
}
.schau-leiste{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:var(--flaeche-2); border-bottom:1px solid var(--linie);
}
.schau-punkt{width:9px; height:9px; border-radius:50%; background:var(--linie-stark);}
.schau-titel{margin-left:10px; font-size:11.5px; color:var(--text-leise);}
.schau-koerper{display:flex; min-height:230px;}
.schau-navi{
  width:52px; padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:9px;
  border-right:1px solid var(--linie); background:var(--flaeche-2);
}
.schau-navi-punkt{width:22px; height:6px; border-radius:3px; background:var(--linie-stark); opacity:.6;}
.schau-navi-punkt.aktiv{background:var(--akzent); opacity:1; width:26px;}
.schau-flaeche{flex:1; padding:14px;}
.schau-zahlen{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.schau-zahlen span{
  flex:1; min-width:86px; border:1px solid var(--linie); border-radius:7px; padding:7px 9px;
  font-size:10px; color:var(--text-leise); display:flex; flex-direction:column;
}
.schau-zahlen b{font-size:16px; color:var(--text); font-weight:650; line-height:1.2;}
.schau-zahlen .rot b{color:var(--rot);}
.schau-zahlen .gruen b{color:var(--gruen);}
.schau-kalender{border:1px solid var(--linie); border-radius:7px; overflow:hidden;}
.schau-zeile{display:grid; grid-template-columns:70px repeat(7, 1fr); border-top:1px solid var(--linie);}
.schau-zeile:first-child{border-top:none;}
.schau-fahrzeug{height:30px; background:var(--flaeche-2); border-right:1px solid var(--linie);}
.schau-zelle{border-left:1px solid var(--linie); padding:5px;}
.schau-zelle i{display:block; height:100%; min-height:18px; border-radius:3px; opacity:.85;}
.start-hero .start-fliess{margin:0 auto;}
.start-augenbraue{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:0.04em;
  color:var(--akzent); background:var(--akzent-weich);
  padding:5px 12px; border-radius:20px; margin-bottom:20px;
}
.start-hero h1{
  font-size:clamp(30px, 5vw, 46px); line-height:1.12; letter-spacing:-0.03em;
  font-weight:680; margin-bottom:18px;
}

/* Das Zitat des Kunden trägt die ganze Begründung des Produkts - deshalb bekommt es eine eigene
   Fläche und nicht nur einen Absatz zwischen anderen. */
.start-band{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:14px;
  padding:30px; box-shadow:var(--schatten);
}
.start-band-inhalt{max-width:720px; margin:0 auto; text-align:center;}
.start-band blockquote{
  font-size:18px; line-height:1.55; letter-spacing:-0.01em; color:var(--text);
  border-left:3px solid var(--akzent); padding-left:18px; text-align:left; margin-bottom:14px;
}
.start-band p{color:var(--text-leise); font-size:14px;}

.start-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:26px;}
.start-karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:12px;
  padding:20px; box-shadow:var(--schatten);
}
.start-karte h3{
  font-size:15.5px; font-weight:620; color:var(--text); text-transform:none;
  letter-spacing:-0.01em; margin:12px 0 6px;
}
.start-karte p{font-size:13.5px; line-height:1.6; color:var(--text-leise);}
.start-symbol{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:9px; background:var(--akzent-weich); color:var(--akzent);
}
.start-symbol svg{width:19px; height:19px;}

.start-schritte{margin:24px 0 0 0; padding:0; list-style:none; counter-reset:schritt; display:grid; gap:14px;}
.start-schritte li{
  counter-increment:schritt; position:relative; padding-left:46px;
  font-size:14.5px; line-height:1.6; color:var(--text-leise);
}
.start-schritte li::before{
  content:counter(schritt); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%; background:var(--akzent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:650;
}
.start-schritte strong{color:var(--text);}

/* ---- Preise ---- */
.preis-karte{
  max-width:520px; margin:28px auto 0; background:var(--flaeche);
  border:1.5px solid var(--akzent); border-radius:16px; padding:26px;
  box-shadow:var(--schatten-hoch);
}
.preis-kopf{text-align:center; padding-bottom:18px; border-bottom:1px solid var(--linie);}
.preis-name{font-size:13px; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; color:var(--akzent);}
.preis-zahl{font-size:44px; font-weight:680; letter-spacing:-0.03em; line-height:1.1; margin:6px 0 4px;}
.preis-zahl span{font-size:16px; font-weight:500; color:var(--text-leise); letter-spacing:0; margin-left:7px;}
.preis-liste{list-style:none; padding:18px 0 0; margin:0; display:grid; gap:9px;}
.preis-liste li{
  position:relative; padding-left:26px; font-size:14px; line-height:1.5; color:var(--text);
}
.preis-liste li::before{
  content:""; position:absolute; left:2px; top:6px; width:11px; height:6px;
  border-left:2px solid var(--gruen); border-bottom:2px solid var(--gruen);
  transform:rotate(-45deg);
}
.preis-zusatz{
  margin-top:18px; padding:14px; border-radius:10px; background:var(--flaeche-3);
  display:flex; flex-direction:column; gap:4px; font-size:13.5px;
}
.preis-zusatz .muted{font-size:12.5px; line-height:1.5;}

/* ---- Fragen ---- */
.start-fragen{margin-top:22px; display:grid; gap:10px;}
.start-fragen details{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:14px 18px;
}
.start-fragen summary{
  cursor:pointer; font-size:14.5px; font-weight:600; color:var(--text); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.start-fragen summary::-webkit-details-marker{display:none;}
.start-fragen summary::after{content:"+"; color:var(--akzent); font-size:19px; line-height:1;}
.start-fragen details[open] summary::after{content:"\2013";}
.start-fragen p{margin-top:10px; font-size:14px; line-height:1.65; color:var(--text-leise);}

.start-kontakt{text-align:center;}
.start-kontakt .start-fliess{margin:0 auto;}

.start-fuss{border-top:1px solid var(--linie); padding:22px 24px; font-size:13px; color:var(--text-leise);}
.start-fuss-inhalt{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.start-fuss nav{display:flex; gap:18px;}
.start-fuss a{color:var(--text-leise);}

/* ---- Rechtstexte ---- */
.rechtstext{max-width:760px; margin:0 auto; padding:40px 24px 60px;}
.rechtstext h1{font-size:26px; margin-bottom:18px;}
.rechtstext h2{font-size:17px; margin:26px 0 8px;}
.rechtstext p, .rechtstext li{font-size:14.5px; line-height:1.7; color:var(--text-leise);}
.rechtstext ul{margin-left:20px;}
.rechtstext .platzhalter{
  background:var(--gelb-weich); border-left:3px solid var(--gelb); border-radius:8px;
  padding:14px 16px; margin-bottom:24px; color:var(--text); font-size:14px; line-height:1.6;
}

@media (max-width:900px){
  .start-kopf{padding:10px 14px;}
  .start-kopf-inhalt{gap:12px;}
  .start-menue{display:flex;}
  .start-kopf-rechts .start-anmelden{display:none;}

  /* Die Navigation klappt unter dem Kopf auf, statt ihn zu sprengen. */
  .start-navi{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; padding:6px 18px 14px;
    background:var(--flaeche); border-bottom:1px solid var(--linie); box-shadow:var(--schatten);
  }
  .start-navi.offen{display:flex;}
  .start-navi a{padding:13px 0; border-top:1px solid var(--linie); font-size:15px;}
  .start-navi a:first-child{border-top:none;}

  .start-inhalt{padding:0 16px 32px;}
  .start-hero{padding:44px 0 30px;}
  .start-schau{margin-top:28px;}
  .schau-fenster{transform:none;}
  .schau-navi{width:36px;}
  .schau-zeile{grid-template-columns:46px repeat(7, 1fr);}
  .schau-zahlen span{min-width:66px;}
  .start-abschnitt{padding:38px 0;}
  .start-band{padding:20px;}
  .start-band blockquote{font-size:16px; padding-left:14px;}
  .preis-karte{padding:20px;}
  .preis-zahl{font-size:36px;}
  .start-schritte li{padding-left:40px;}
  .start-fuss-inhalt{flex-direction:column; align-items:flex-start; gap:10px;}
}

/* ==================== Anmeldung ==================== */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  background:
    radial-gradient(1100px 480px at 50% -10%, var(--akzent-weich), transparent 65%),
    var(--grund);
}
.login-spalte{width:100%; max-width:400px;}
.login-card{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:16px;
  padding:30px; box-shadow:var(--schatten-hoch);
  /* Die Anmeldeseite hat keine Seitenleiste - der Standardabstand von main würde die Karte
     sonst um deren Breite einschnueren. */
  margin-left:0; width:100%;
}
.login-logo{
  display:flex; align-items:center; gap:11px; font-size:16px; font-weight:650;
  margin-bottom:22px; color:var(--akzent);
}
.login-logo span{color:var(--text);}
.login-card h1{font-size:20px; margin-bottom:4px;}
.login-card > .muted{font-size:13px;}
.login-form{display:flex; flex-direction:column; gap:13px; margin-top:20px;}
.login-form label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-leise); font-weight:500;}
.login-form .btn{justify-content:center; margin-top:5px; padding:10px;}
.login-fuss{text-align:center; margin-top:16px; font-size:12px;}

/* ==================== Öffentliche Sendungsverfolgung ====================
   Die einzige Seite, die ein Kunde ohne Konto sieht - und meist auf dem Handy, während er auf
   die Ware wartet. Deshalb große Schrift, eine einzige Karte, keine Navigation und nichts, was
   ablenkt. */
.verfolgung-body{
  background:
    radial-gradient(900px 420px at 50% -8%, var(--akzent-weich), transparent 62%),
    var(--grund);
  min-height:100vh;
}
.verfolgung{max-width:560px; margin:0 auto; padding:36px 16px 48px;}
.verfolgung-karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:16px;
  box-shadow:var(--schatten-hoch); overflow:hidden;
}
.verfolgung-kopf{
  padding:16px 22px; border-bottom:1px solid var(--linie);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.verfolgung-spediteur{font-weight:650; font-size:15px;}
.verfolgung-titel{font-size:12.5px; color:var(--text-leise);}

.verfolgung-zustand{display:flex; gap:16px; align-items:flex-start; padding:24px 22px 20px;}
.verfolgung-zustand h1{font-size:23px; letter-spacing:-0.02em; margin-bottom:5px;}
.verfolgung-zustand p{color:var(--text-leise); font-size:14px; line-height:1.55;}
.verfolgung-symbol{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--akzent-weich); color:var(--akzent);
}
.verfolgung-symbol svg{width:24px; height:24px;}
.zustand-zugestellt .verfolgung-symbol{background:var(--gruen-weich); color:var(--gruen);}
.zustand-storniert .verfolgung-symbol{background:var(--rot-weich); color:var(--rot);}
.zustand-geplant .verfolgung-symbol{background:var(--flaeche-3); color:var(--text-leise);}

.verfolgung-eta{
  margin:0 22px 20px; padding:16px 18px; border-radius:12px;
  background:var(--akzent-weich); display:flex; flex-direction:column; gap:2px;
}
.verfolgung-eta .label{font-size:11.5px; font-weight:650; letter-spacing:0.05em; text-transform:uppercase; color:var(--akzent);}
.verfolgung-eta .wert{font-size:26px; font-weight:680; letter-spacing:-0.02em;}
.verfolgung-eta .hinweis{font-size:12px; color:var(--text-leise); line-height:1.45; margin-top:3px;}

/* Weg als Zeitleiste: zwei Punkte und die Strecke dazwischen. Zwischenstationen gäbe es nur,
   wenn wir sie erfänden. */
.verfolgung-weg{padding:4px 22px 8px;}
.weg-punkt{display:flex; gap:14px; align-items:flex-start;}
.weg-punkt div{padding-top:1px;}
.weg-punkt strong{display:block; font-size:15px; font-weight:600;}
.weg-punkt span:not(.weg-marke){font-size:12.5px; color:var(--text-leise);}
.weg-marke{
  width:13px; height:13px; border-radius:50%; flex-shrink:0; margin-top:4px;
  border:2.5px solid var(--linie-stark); background:var(--flaeche);
}
.weg-punkt.erledigt .weg-marke{border-color:var(--akzent); background:var(--akzent);}
.weg-linie{width:2.5px; height:34px; margin:3px 0 3px 5px; background:var(--linie-stark); border-radius:2px; position:relative; overflow:hidden;}
.weg-linie::after{content:""; position:absolute; inset:0 0 auto 0; background:var(--akzent); height:0;}
.weg-linie.halb::after{height:50%;}
.weg-linie.voll::after{height:100%;}

.verfolgung-daten{
  margin:14px 22px 0; padding-top:16px; border-top:1px solid var(--linie);
  display:grid; gap:10px;
}
.verfolgung-daten > div{display:flex; justify-content:space-between; gap:16px; align-items:baseline;}
.verfolgung-daten dt{font-size:12.5px; color:var(--text-leise); flex-shrink:0;}
.verfolgung-daten dd{font-size:14px; text-align:right; font-weight:500;}

.verfolgung-fuss{
  margin-top:20px; padding:16px 22px; border-top:1px solid var(--linie); background:var(--flaeche-2);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--text-leise);
}
.verfolgung-leer{padding:34px 24px; text-align:center;}
.verfolgung-leer h1{font-size:20px; margin-bottom:8px;}
.verfolgung-leer p{color:var(--text-leise); font-size:14px; line-height:1.6;}
.verfolgung-hinweis{text-align:center; font-size:12px; color:var(--text-leise); margin-top:16px;}

@media (max-width:480px){
  .verfolgung{padding:20px 12px 32px;}
  .verfolgung-zustand{padding:20px 16px 16px; gap:13px;}
  .verfolgung-zustand h1{font-size:21px;}
  .verfolgung-eta{margin:0 16px 18px;}
  .verfolgung-weg, .verfolgung-daten{padding-left:16px; padding-right:16px;}
  .verfolgung-daten{margin-left:16px; margin-right:16px;}
  .verfolgung-fuss{padding:14px 16px;}
}

/* ==================== Fahreransicht (mobil zuerst) ==================== */
.fahrer-body main{margin-left:0; padding:0 0 80px;}
.fahrer-kopf{
  position:sticky; top:0; z-index:20; background:var(--flaeche);
  border-bottom:1px solid var(--linie); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.fahrer-kopf .titel{font-weight:650; font-size:15px;}
.fahrer-kopf .unter{font-size:12px; color:var(--text-leise);}
.fahrer-reiter{
  display:flex; gap:6px; padding:12px 16px 4px; overflow-x:auto;
}
.fahrer-reiter button{
  background:var(--flaeche); border:1px solid var(--linie-stark); color:var(--text-leise);
  padding:7px 14px; border-radius:20px; font-size:13px; font-weight:550; white-space:nowrap;
}
.fahrer-reiter button.aktiv{background:var(--akzent); border-color:var(--akzent); color:#fff;}
.fahrt-karten{display:flex; flex-direction:column; gap:12px; padding:12px 16px;}
.fahrt-karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--schatten); overflow:hidden;
}
.fahrt-karte .kopf{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:13px 15px 9px;
}
.fahrt-karte .zeit{font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.1;}
.fahrt-karte .kunde{font-size:13px; color:var(--text-leise);}
.wegpunkte{padding:4px 15px 12px; display:flex; flex-direction:column; gap:2px;}
.wegpunkt{display:flex; gap:11px; align-items:flex-start; padding:5px 0;}
.wegpunkt .zeichen{
  width:11px; display:flex; flex-direction:column; align-items:center; padding-top:5px; flex-shrink:0;
}
.wegpunkt .ring{width:9px; height:9px; border-radius:50%; border:2px solid var(--akzent);}
.wegpunkt.ziel .ring{background:var(--akzent);}
.wegpunkt .strich{width:2px; flex:1; min-height:14px; background:var(--linie); margin:2px 0;}
.wegpunkt .ort{font-size:13.5px; font-weight:550; line-height:1.3;}
.wegpunkt .adresse{font-size:12px; color:var(--text-leise);}
.fahrt-karte .aktionen{
  display:flex; gap:8px; flex-wrap:wrap; padding:11px 15px;
  border-top:1px solid var(--linie); background:var(--flaeche-2);
}
.fahrt-karte .aktionen .btn{flex:1; justify-content:center; min-width:110px; padding:10px 12px; font-size:13.5px;}
.fahrt-karte .info-zeile{
  padding:9px 15px; font-size:12.5px; color:var(--text-leise);
  border-top:1px solid var(--linie); display:flex; gap:14px; flex-wrap:wrap;
}

/* ==================== Druckansicht ==================== */
@media print{
  body{background:#fff; color:#000;}

  /* Das Erscheinungsbild "Unterwegs" setzt den Himmel-Verlauf mit höherer Spezifität
     (:root[data-design] body) - ohne diese Regel landete er auf dem Papier: farbiger
     Hintergrund über die ganze Seite, ausgerechnet auf dem Zettel fürs Fahrerhaus.
     Aus demselben Grund fliegen Globus und durchscheinende Flächen im Druck raus. */
  :root[data-design="urlaub"] body{background:#fff;}
  :root[data-design="urlaub"] body::before{display:none;}
  :root[data-design="urlaub"] .karte,
  :root[data-design="urlaub"] .tabellen-rahmen,
  :root[data-design="urlaub"] .kennzahl{background:#fff; border:none;}
  .seitenleiste,.navi-schalter,.nicht-drucken,#toast-behaelter{display:none !important;}
  main{margin-left:0; padding:0;}
  .karte,.tabellen-rahmen{border:none; box-shadow:none; background:none; padding:0;}
  table.liste th{background:none; color:#000; border-bottom:1px solid #000; position:static;}
  table.liste td{border-bottom:1px solid #ddd;}
  a{color:#000; text-decoration:none;}
}

/* ==================== Schmale Bildschirme ==================== */
@media (max-width:900px){
  .seitenleiste{
    transform:translateX(-100%); transition:transform .18s ease;
    box-shadow:var(--schatten-hoch);
  }
  .seitenleiste.offen{transform:none;}
  .navi-schalter{display:flex;}
  main{margin-left:0; padding:60px 14px 60px;}
  .filterleiste label.feld{min-width:115px;}
  .karten-reihe{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .kennzahl .wert{font-size:20px;}

  /* Auf schmalen Geraeten passt der Wartungstext nicht in eine Zeile. Statt ihn abzuschneiden
     bekommt das Band zwei Zeilen - und die Variable waechst mit, damit der Inhalt darunter
     weiterhin genau um die Bandhoehe nach unten rueckt. */
  :root{ --wartungsband: 52px; }
  .wartungs-band{white-space:normal; padding:5px 12px;}
}

/* ---------- Rechte-Haken in der Benutzerverwaltung ----------
   Zwei Spalten auf breiten Schirmen, eine auf dem Handy. Die Erklaerung steht unter dem Titel
   und nicht in einem Tooltip: wer Rechte vergibt, entscheidet ueber fremde Arbeitsfaehigkeit
   und soll nicht raten muessen, was "Stammdaten" umfasst. */
.rechte-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.rechte-liste { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.rechte-liste .recht { display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border:1px solid var(--linie);
                       border-radius:8px; background:var(--flaeche); cursor:pointer; font-weight:400; line-height:1.35; }
.rechte-liste .recht input { margin-top:2px; flex:none; }
.rechte-liste .recht input:disabled { cursor:default; }
.rechte-liste .recht:has(input:disabled) { opacity:.65; cursor:default; }
@media (max-width: 700px) { .rechte-liste { grid-template-columns:1fr; } }

/* ---------- Aktivitaetenprotokoll ----------
   Die Beschreibungsspalte traegt Fahrtnummern, Kennzeichen und Betraege - Zeichen, die man
   vergleicht statt liest. Deshalb eine schmalere Schrift und ein Umbruch statt einer Zeile,
   die die Tabelle breiter macht als das Fenster. */
.protokoll-detail { font-size:12.5px; color:var(--text-leise); overflow-wrap:anywhere; }
/* Die Mailadresse unter dem Namen ist eine Zusatzangabe, keine Spaltenueberschrift: sie darf die
   Spalte nicht auseinanderziehen und wird bei Bedarf abgeschnitten statt dreizeilig umgebrochen. */
.protokoll-mail { font-size:11px; color:var(--text-sehr-leise); max-width:200px;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Bestaetigung im Anmeldebereich - Gegenstueck zu .form-error, aber in Gruen und mit Rahmen:
   die Meldung "die Mail ist unterwegs" ist die einzige Rueckmeldung, die es gibt, und sie darf
   nicht wie eine beilaeufige Fussnote aussehen. */
.form-hinweis{color:var(--gruen); font-size:13px; line-height:1.5; margin-top:12px;
              border-left:3px solid var(--gruen); padding-left:11px;}
/* Das Logo auf den Anmeldeseiten ist jetzt ein Link. Ohne diese Regel erbte es die
   Unterstreichung und die Linkfarbe und saehe aus wie ein versehentlicher Verweis. */
a.login-logo{text-decoration:none;}
a.login-logo:hover span{color:var(--akzent);}

/* ---------- Einwilligungsband ----------
   Ein BAND am unteren Rand, kein Vorhang ueber der Seite: der Besucher soll lesen koennen, worum
   es geht, ohne erst etwas wegklicken zu muessen. Beide Knoepfe sind gleich gross - ein
   hervorgehobenes "Alles akzeptieren" neben einem grauen "Ablehnen" waere keine freie Wahl,
   und genau daran scheitern die meisten Banner vor Gericht. */
.cookie-band{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  padding:14px 20px; background:var(--flaeche); border-top:1px solid var(--linie-stark);
  box-shadow:0 -6px 24px rgba(16,24,40,0.10);
}
.cookie-text{font-size:12.5px; line-height:1.55; color:var(--text-leise); max-width:760px;}
.cookie-text strong{color:var(--text);}
.cookie-knoepfe{display:flex; gap:10px; flex:none;}
.cookie-knoepfe .btn{white-space:nowrap;}
@media (max-width: 700px){
  .cookie-band{flex-direction:column; align-items:stretch; gap:12px; padding:14px;}
  .cookie-knoepfe{justify-content:stretch;}
  .cookie-knoepfe .btn{flex:1; justify-content:center;}
}