/* Oberflaeche des CRM.
 *
 * Umgebaut nach der Bildsprache eines Bitrix24-Arbeitsplatzes: helle Flaechen,
 * weiche Schatten statt harter Rahmen, runde Ecken, eine dunkle Icon-Schiene
 * links und eine weisse Kopfleiste. Der Vorgaenger stammte woertlich aus
 * crm-prototyp_v7_1.html; die Klassennamen sind absichtlich dieselben
 * geblieben, damit das JavaScript unveraendert weiterrendern kann.
 *
 * Was bewusst wegfiel: die Grossbuchstaben-Kondensschrift des Prototyps und
 * die toten Regeln fuer Status-Punkte (`.s-*`), Sortenklassen (`.f-*`),
 * Abzeichen (`.badge`) und Etiketten (`.tag`). Den Status gibt es fachlich
 * nicht mehr, die Sortenfarben setzt das JavaScript direkt aus der Tabelle
 * `produkte` -- deshalb stehen sie hier nur noch als Rueckfallwerte.
 */

:root{
  /* ---------- Flaechen und Linien ----------
     Ruhige, fast farblose Neutraltoene. Der Unterschied zwischen Hintergrund
     und Karte ist bewusst klein: die Karte steht durch ihre Haarlinie im
     Raum, nicht durch einen Helligkeitssprung. */
  --bg:#fbfbfc;
  --flaeche:#ffffff;
  --flaeche-2:#f7f8fa;
  --linie:#e5e7eb;
  --linie-2:#eceef1;

  /* Schriftfarben */
  --txt:#14161a;
  --txt-2:#565d6b;
  --txt-3:#666d7a;

  /* ---------- Die linke Schiene ----------
     Hell statt dunkel und mit Beschriftung neben dem Symbol. Eigene Werte,
     damit der Dunkelmodus sie getrennt regeln kann; `--schiene-2` bleibt
     erhalten, weil der Verlauf auf der Anmeldeseite ihn benutzt. */
  --schiene:#fbfbfc;
  --schiene-2:#f2f3f5;
  --schiene-txt:#565d6b;
  --schiene-hover:#f0f1f4;

  /* ---------- Akzente ----------
     Die vier Blauwerte setzt das Register Einstellungen zur Laufzeit neu --
     sie werden dort aus der gewaehlten Akzentfarbe abgeleitet, deshalb
     stehen hier nur die Vorgaben. Wahrheit: `app/schemas.py`. */
  --blau:#5b5bd6;
  --blau-hell:#7c7cf0;
  --blau-weich:#eeeefc;
  --blau-dunkel:#4a4ac2;
  /* Akzentfarbe als SCHRIFT -- auf weisser Flaeche und auf `--blau-weich`.
     Im Hellen ist das die Akzentfarbe selbst (5,9:1 auf Weiss), im Dunkeln
     die aufgehellte: die dunkle Abstufung staende dort auf dunklem Grund. */
  --blau-text:var(--blau);
  /* Gedaempfter als frueher: das Limettengruen stach aus einer sonst
     ruhigen Flaeche heraus und war der lauteste Ton der Oberflaeche. */
  --gruen:#2f8f5b;
  --gruen-dunkel:#27784c;
  --orange:#c2740f;
  --tuerkis:#2f8f8a;

  /* Rueckfallwerte der Treibstoffsorten (Wahrheit: Tabelle `produkte`) */
  --avgas:#2E63AD; --super:#4E8A3C; --jet:#C08A2E;
  --ul91:#7F5AA8; --ul94:#B04A78; --swift:#2C8C86;

  --ok:#2f8f5b; --warn:#b47b16; --late:#d0453a;

  /* ---------- Semantische Flaechen ----------
     Diese Toene standen frueher als feste Hexwerte quer durch die Datei --
     rund 150 Stellen, an denen im Dunkelmodus ein weisser Fleck geblieben
     waere. Jetzt haengen sie an einer Stelle. */
  --ok-bg:#eaf5ee;
  --warn-bg:#fdf6e6;
  --warn-txt:#7a5a12;
  --fehler-bg:#fdedeb;
  --fehler-linie:#f3d0cc;
  --fehler-txt:#a5372c;

  /* Neutrale Zweitknoepfe (Abbrechen) und Hilfsflaechen. */
  --neutral:#eff0f3;
  --neutral-hover:#e4e6ea;
  --balken-bg:#f0f1f4;     /* Grund der Monatsbalken und Saeulendiagramme */
  --strich:#d4d7dd;        /* gestrichelte Ablegefelder */
  --rollbalken:#d0d3da;
  --schalter-bg:#d4d7dd;   /* Spur des Schiebeschalters */
  --schalter-knopf:#ffffff;
  --zaehler-txt:#ffffff;

  --r:8px; --r-gross:10px; --r-pille:8px;

  /* ---------- Tiefe ----------
     Die ruhige Handschrift kommt ohne Schlagschatten aus. Die Variablen
     bleiben bestehen, damit die rund vierzig Regeln, die sie benutzen,
     unveraendert weiterlaufen -- sie zeichnen jetzt nur nichts mehr.
     `--schatten-hoch` bleibt als ganz leichter Hinweis beim Ueberfahren. */
  --schatten:none;
  --schatten-hoch:0 1px 2px rgba(20,22,26,.06), 0 4px 10px rgba(20,22,26,.05);
  --schiene-breit:212px;

  /* Vom Register Einstellungen gesetzt. Die Werte hier sind der
     Auslieferungszustand; die Wahrheit steht in `app/schemas.py`, damit
     "Zuruecksetzen" und "noch nie etwas eingestellt" dasselbe ergeben. */
  --schrift:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schriftgroesse:14px;
  --bg-staerke:.12;
  /* Dichte: Polster der Listenzeilen und der Abschnitte. */
  --pad-liste:9px;
  --pad-zeile:11px 13px;
  --pad-zeile-abstand:7px;
  --pad-sec:17px 20px;

  /* Damit Auswahllisten, Bildlaufleisten und die Kalender der
     Datumsfelder mitziehen -- die zeichnet der Browser, nicht wir. */
  color-scheme:light;
}

/* ==========================================================================
   Dunkelmodus
   ==========================================================================
   Zwei Wege fuehren hierher: das Register Einstellungen setzt `data-farbschema`
   am `<html>`, und wer dort *Wie das System* stehen laesst, bekommt die
   Einstellung des Betriebssystems. Deshalb steht derselbe Satz Werte zweimal.

   Umgestellt werden nur die Toene, nie die Struktur. Was hier fehlt, erbt
   seinen Wert von oben -- die Sortenfarben etwa, die auf beiden Gruenden
   lesbar sind und in beiden Faellen dieselbe Sorte meinen muessen.

   Die Flaechen sind nicht schwarz, sondern sehr dunkles Blaugrau: reines
   Schwarz unter hellem Text flimmert, und der Kontrast waere hoeher als
   noetig. */
@media (prefers-color-scheme:dark){
  html:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]){
    color-scheme:dark;
    --bg:#0d0e12;
    --flaeche:#141519;
    --flaeche-2:#191b20;
    --linie:#26282f;
    --linie-2:#212329;

    --txt:#e9eaee;
    --txt-2:#9ba2af;
    --txt-3:#868e9c;

    --schiene:#0d0e12;
    --schiene-2:#16181d;
    --schiene-txt:#9ba2af;
    --schiene-hover:#1c1e24;

    --blau-weich:#1e1f3a;
    --blau-text:var(--blau-hell);

    --gruen:#3da86c; --gruen-dunkel:#4bbd83;
    --orange:#d99a2b; --tuerkis:#3aa8a2;
    --ok:#4bbd83; --warn:#d9a441; --late:#e4695e;

    --ok-bg:#132a1f;
    --warn-bg:#2a220d;
    --warn-txt:#e0c07a;
    --fehler-bg:#2d1917;
    --fehler-linie:#4a2724;
    --fehler-txt:#f0a79c;

    --neutral:#22242b;
    --neutral-hover:#2b2e36;
    --balken-bg:#22242b;
    --strich:#343740;
    --rollbalken:#343740;
    --schalter-bg:#343740;
    --schalter-knopf:#c9ccd3;
    --zaehler-txt:#1b1214;

    --schatten-hoch:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  }
}
html[data-farbschema="dunkel"]{
  color-scheme:dark;
  --bg:#0d0e12;
  --flaeche:#141519;
  --flaeche-2:#191b20;
  --linie:#26282f;
  --linie-2:#212329;

  --txt:#e9eaee;
  --txt-2:#9ba2af;
  --txt-3:#868e9c;

  --schiene:#0d0e12;
  --schiene-2:#16181d;
  --schiene-txt:#9ba2af;
  --schiene-hover:#1c1e24;

  --blau-weich:#1e1f3a;
  --blau-text:var(--blau-hell);

  --gruen:#3da86c; --gruen-dunkel:#4bbd83;
  --orange:#d99a2b; --tuerkis:#3aa8a2;
  --ok:#4bbd83; --warn:#d9a441; --late:#e4695e;

  --ok-bg:#132a1f;
  --warn-bg:#2a220d;
  --warn-txt:#e0c07a;
  --fehler-bg:#2d1917;
  --fehler-linie:#4a2724;
  --fehler-txt:#f0a79c;

  --neutral:#22242b;
  --neutral-hover:#2b2e36;
  --balken-bg:#22242b;
  --strich:#343740;
  --rollbalken:#343740;
  --schalter-bg:#343740;
  --schalter-knopf:#c9ccd3;
  --zaehler-txt:#1b1214;

  --schatten-hoch:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ---------- Hintergrundbild ----------
   Die Jet-A-1-Saeule am Flugplatz, weit zurueckgenommen: der Hintergrund soll
   erkennbar nicht weiss sein, aber nichts vom Inhalt wegziehen. Deshalb eine
   eigene, im Bild fixierte Schicht unter der Anwendung -- sie wandert beim
   Blaettern nicht mit. Die leichte Unschaerfe laesst das Foto als Textur
   lesen statt als Motiv, das die Aufmerksamkeit einfaengt; `inset:-12px`
   faengt die durchsichtigen Raender ab, die die Unschaerfe sonst erzeugt. */
body::before{
  content:""; position:fixed; inset:-12px; z-index:0; pointer-events:none;
  background:url("/bilder/tankstelle.jpg") center 22%/cover no-repeat;
  opacity:var(--bg-staerke); filter:saturate(.5) blur(1.5px);
}
/* Im Dunkeln wirkt dasselbe Foto deutlich lauter: ein helles Bild auf fast
   schwarzem Grund faellt bei gleicher Deckung viel staerker auf als auf
   hellem Grau. Die eingestellte Staerke bleibt die Grundlage -- sie wird hier
   nur anteilig genommen und das Bild zusaetzlich abgedunkelt. */
html[data-farbschema="dunkel"] body::before{
  opacity:calc(var(--bg-staerke) * .4); filter:saturate(.3) blur(1.5px) brightness(.5);
}
@media (prefers-color-scheme:dark){
  html:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) body::before{
    opacity:calc(var(--bg-staerke) * .4); filter:saturate(.3) blur(1.5px) brightness(.5);
  }
}
/* Abgeschaltetes Hintergrundbild wird nicht nur durchsichtig gemacht, sondern
   entfernt -- sonst laedt der Browser das Foto weiterhin. */
body.ohne-bild::before{display:none}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--schrift);
  font-size:var(--schriftgroesse); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600; margin:0; letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit; cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--blau); outline-offset:2px; border-radius:3px}

/* ==========================================================================
   Grundgeruest: Schiene links, alles Uebrige rechts
   ========================================================================== */
#anwendung{display:flex; min-height:100vh; position:relative; z-index:1}
.haupt{flex:1; min-width:0; display:flex; flex-direction:column}

/* ---------- Schiene ---------- */
/* Hell statt dunkel und breit genug fuer die Beschriftung neben dem Symbol.
   Die dunkle Schiene war der staerkste Kontrast der ganzen Oberflaeche und
   zog das Auge dauerhaft nach links -- dorthin, wo man am seltensten
   hinsieht. Jetzt trennt sie nur eine Haarlinie vom Arbeitsbereich. */
.schiene{
  width:var(--schiene-breit); flex:0 0 var(--schiene-breit);
  background:var(--schiene); border-right:1px solid var(--linie);
  display:flex; flex-direction:column; gap:2px;
  padding:14px 10px 16px; position:sticky; top:0; height:100vh;
}
/* Zeichen und Name nebeneinander. In der schmalen Schiene faellt der Name
   weg, das Zeichen bleibt. */
.markenzeile{display:flex; align-items:center; gap:10px; padding:0 5px; margin-bottom:16px}
.markenname{font-size:13.5px; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden}
.marke{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:var(--blau);
  color:#fff; font-weight:600; font-size:13px; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:center;
}
/* `flex:1` laesst die Leiste den freien Platz einnehmen, damit `margin-top:auto`
   am letzten Knopf ihn nach unten schieben kann. */
.tabs{display:flex; flex-direction:column; gap:1px; width:100%; flex:1}
.tabs button.unten{margin-top:auto}
.tabs button{
  position:relative; width:100%; background:none; border:0; border-radius:var(--r);
  padding:8px 10px; display:flex; align-items:center; gap:11px; text-align:left;
  color:var(--schiene-txt); font-size:13.5px; font-weight:500;
}
.tabs button svg{width:19px; height:19px; flex:0 0 auto}
/* Beschriftungen bleiben einzeilig, solange sie passen. „Benachrichtigungen"
   passt nicht -- es ist mit 101px breiter als die ganze Schiene und traegt
   deshalb im Markup ein weiches Trennzeichen. Hier steht nur, wie die zweite
   Zeile dann sitzt. Bewusst kein `overflow-wrap:break-word` fuer alle: das
   traefe auch „Stammdaten" und „Einstellungen", die heute um wenige Pixel
   ueberstehen und dabei einzeilig bleiben sollen. */
.tabs button span{line-height:1.25; text-align:left; min-width:0}
.tabs button:hover{background:var(--schiene-hover); color:var(--txt)}
/* Das gewaehlte Register traegt eine weiche Flaeche in der Akzentfarbe statt
   des frueheren Striches am Rand -- die Flaeche ist auch dann zu sehen, wenn
   die Schiene schmal steht. */
.tabs button[aria-selected="true"]{
  background:var(--blau-weich); color:var(--blau-text); font-weight:600;
}
/* Zaehler offener Rechnungen am Register. Sitzt am Symbol, damit er in der
   schmalen Schiene sichtbar bleibt -- dort ist die Beschriftung ausgeblendet. */
.tab-zahl{
  margin-left:auto; flex:0 0 auto; min-width:17px; height:17px; padding:0 4px;
  border-radius:var(--r-pille); background:var(--late); color:var(--zaehler-txt);
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-style:normal; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* Schmale Schiene ohne Beschriftung. Die Kennzeichnung geht dabei nicht
   verloren: die Knoepfe tragen ein `title` und ein `aria-label`, der
   Vorleser liest also weiter „Rechnungen" und nicht „Schaltflaeche". */
.schiene.schmal{--schiene-breit:60px}
.schiene.schmal .tabs button span,.schiene.schmal .markenname{display:none}
.schiene.schmal .tabs button{padding:10px 2px; justify-content:center}
.schiene.schmal .markenzeile{justify-content:center; padding:0}
.schiene.schmal .marke{width:32px; height:32px; font-size:12px}
.schiene.schmal .tabs button svg{width:21px; height:21px}
.schiene.schmal .tab-zahl{position:absolute; top:2px; right:6px; margin:0}

/* ---------- Kopfleiste ---------- */
.top{
  background:var(--flaeche); border-bottom:1px solid var(--linie);
  padding:0 22px; min-height:60px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
}
.brand{margin-right:auto; display:flex; flex-direction:column; gap:3px}
.brand h1{font-size:17px; line-height:1.2; margin:0}
/* Das Logo in der Kopfzeile. Hoehe statt Breite gesetzt: der Schriftzug ist
   dreieinhalb mal so breit wie hoch, und die Kopfzeile teilt sich die Hoehe
   mit Jahreswahl und Kennzahlen -- sie ist das knappe Mass.

   Zwei Fassungen, weil der Schriftzug schwarz ist. Im Dunkelmodus erscheint
   die helle; der gelbe Balken bleibt in beiden Faellen gelb, weisse Schrift
   auf Gelb waere nicht zu lesen. */
.brand .logo{display:block; height:26px; width:auto}
.brand .logo-dunkelmodus{display:none}
.brand span{font-size:11.5px; color:var(--txt-3)}
/* Der Produktname in der zweiten Zeile: etwas kraeftiger als der Stand
   daneben, aber leiser als die Marke darueber. */
.brand .produktname{font-weight:600; color:var(--txt-2)}

@media (prefers-color-scheme:dark){
  html:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .brand .logo-normal{display:none}
  html:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .brand .logo-dunkelmodus{display:block}
}
html[data-farbschema="dunkel"] .brand .logo-normal{display:none}
html[data-farbschema="dunkel"] .brand .logo-dunkelmodus{display:block}

.jahrwahl{display:flex; align-items:center; gap:7px}
.jahrwahl label{font-size:12px; color:var(--txt-2)}
.jahrwahl select{
  padding:6px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche-2); color:var(--txt);
}
.jahrwahl select:hover{border-color:var(--blau)}

.kpis{display:flex; gap:22px}
.kpi{display:flex; flex-direction:column; gap:0; line-height:1.15}
.kpi b{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-weight:500; font-size:17px; color:var(--txt);
}
.kpi span{font-size:12px; color:var(--txt-2);}

.konto{display:flex; align-items:center; gap:9px}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:var(--blau);
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:center;
}
.konto-text{display:flex; flex-direction:column; line-height:1.2}
.konto-text b{font-size:13px; font-weight:600}
.konto-text span{font-size:11px; color:var(--txt-3); text-transform:capitalize}
.konto button{
  background:none; border:1px solid var(--linie); border-radius:var(--r-pille);
  color:var(--txt-2); font-size:12px; padding:5px 13px; margin-left:5px;
}
.konto button:hover{border-color:var(--blau); color:var(--blau-text); background:var(--blau-weich)}

/* ==========================================================================
   Seitenkopf und Inhalt
   ========================================================================== */
.ansicht{padding:16px 18px 22px}
.seitenkopf{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:14px;
}
.seitenkopf h2{font-size:24px; letter-spacing:-.02em}
.seitenkopf .count{
  font-size:12px; color:var(--txt-3); background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-pille); padding:4px 11px; white-space:nowrap;
}

/* Such-Pille: wie im Vorbild eine breite, runde Leiste mit Lupe. */
.suche{
  position:relative; flex:1 1 320px; min-width:230px; display:flex; align-items:center;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-pille);
  padding:0 16px; box-shadow:var(--schatten);
}
.suche svg{width:17px; height:17px; color:var(--txt-3); flex:0 0 auto}
.suche input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:13.5px;
  padding:9px 10px; color:var(--txt);
}
.suche input::placeholder{color:var(--txt-3)}
.suche input:focus{outline:none}
.suche:focus-within{border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.suche input::-webkit-search-cancel-button{cursor:pointer}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r-pille);
  padding:6px 13px; font-size:12.5px; color:var(--txt-2); box-shadow:var(--schatten);
}
.chip:hover{border-color:var(--blau); color:var(--blau-text)}
.chip[aria-pressed="true"]{background:var(--blau); border-color:var(--blau); color:#fff}
.chip[aria-pressed="true"]:hover{background:var(--blau-dunkel); color:#fff}
/* Gesetzte Filter tragen ihr Kreuz -- so ist erkennbar, dass ein Klick sie
   wieder abraeumt. */
.chip[aria-pressed="true"]::after{content:"✕"; font-size:10px; margin-left:7px; opacity:.85}

.selects{display:flex; gap:7px; flex-wrap:wrap}
.selects select{
  padding:7px 11px; border:1px solid var(--linie); border-radius:var(--r-pille);
  font:inherit; font-size:12.5px; background:var(--flaeche); color:var(--txt-2);
  box-shadow:var(--schatten); max-width:190px;
}
.selects select:hover{border-color:var(--blau); color:var(--blau-text)}

/* ---------- Zweispaltiges Arbeitsfeld ---------- */
.wrap{display:grid; grid-template-columns:minmax(300px,390px) 1fr; gap:14px; align-items:start}
.panel{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten); overflow:hidden}

/* ==========================================================================
   Kundenliste -- Karten wie die Kacheln des Vorbilds
   ========================================================================== */
/* 152px = Kopfleiste (60) + Polster der Ansicht (16 oben, 22 unten) +
   Seitenkopf (40) + dessen Abstand (14). Der Rest ist Luft nach unten. */
.list{max-height:calc(100vh - 172px); overflow:auto; padding:var(--pad-liste)}
.list::-webkit-scrollbar{width:9px}
.list::-webkit-scrollbar-thumb{background:var(--rollbalken); border-radius:9px; border:2px solid var(--flaeche)}

.row{
  display:grid; grid-template-columns:1fr auto; gap:3px 10px;
  padding:var(--pad-zeile); margin-bottom:var(--pad-zeile-abstand); cursor:pointer;
  background:none; border:0; border-radius:var(--r);
}
.row:last-child{margin-bottom:0}
.row:hover{background:var(--flaeche-2)}
.row[aria-current="true"]{background:var(--blau-weich); box-shadow:inset 2px 0 0 var(--blau)}
/* Jedes Feld bekommt seinen Platz ausdruecklich zugewiesen.

   Vorher stand nur an der Menge eine Zeilenangabe. Das genuegt nicht: ein
   Feld mit fester Zeile wird vor allen uebrigen gesetzt und nimmt dabei die
   erste freie Spalte -- also die linke. Die Menge stand deshalb links vom
   Namen, obwohl sie rechtsbuendig gesetzt ist und die Spalten `1fr auto`
   das Gegenteil vorsehen. */
.row .nm{grid-column:1; grid-row:1; font-weight:600; font-size:13.5px}
.row .meta{grid-column:1; grid-row:2; font-size:12px; color:var(--txt-3)}
.row .qty{
  grid-column:2; grid-row:1/3; align-self:center; text-align:right; white-space:nowrap;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:500; color:var(--blau-text);
}
/* Wer angerufen hat. Steht nur in der Zeile, wenn nach einer Rufnummer
   gesucht wurde -- dann aber betont, denn es ist die gesuchte Antwort. */
.row .tel{grid-column:1; font-size:12px; font-weight:600; color:var(--blau-text)}
.row .strip{grid-column:1/-1; margin-top:6px}

/* ---------- Lieferstreifen (Signatur) ---------- */
.strip{display:grid; grid-template-columns:repeat(12,1fr); gap:2px; align-items:end}
.strip .cell{background:var(--linie-2); border-radius:2px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.strip .seg{width:100%}
.strip.sm .cell{height:15px}
.strip.lg .cell{height:76px; background:var(--linie-2); border-radius:4px}
.strip.lg .cell.now{outline:1px dashed var(--txt-3); outline-offset:1px}
.months{display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin-top:6px}
.months span{font-size:10px; color:var(--txt-3); text-align:center; overflow:hidden}

/* ==========================================================================
   Detailkarte
   ========================================================================== */
.detail{padding:0}
.dhead{
  padding:17px 20px 15px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  border-bottom:1px solid var(--linie-2);
}
.dhead h2{font-size:21px; letter-spacing:-.02em}
.dhead .sub{color:var(--txt-2); font-size:13px}
/* Die Anschrift steht in einer eigenen Zeile unter dem Namen, nicht in der
   `sub`-Zeile daneben: sie ist bei den meisten Kunden noch leer, und eine
   Kopfzeile, die je nach Datenstand umbricht, sieht kaputt aus. */
.dhead .anschrift{flex-basis:100%; color:var(--txt-2); font-size:13px}
.knopf-karte{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--linie); background:var(--flaeche); color:var(--txt-2);
  border-radius:var(--r-pille); padding:6px 13px; font-size:12.5px; font-weight:600;
  box-shadow:var(--schatten); white-space:nowrap;
}
.knopf-karte svg{width:15px; height:15px}
.knopf-karte:hover{border-color:var(--blau); color:var(--blau-text)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); border-bottom:1px solid var(--linie-2)}
.stat{padding:13px 20px; border-right:1px solid var(--linie-2)}
.stat:last-child{border-right:0}
.stat b{
  display:block; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-weight:500; font-size:19px; line-height:1.2;
}
.stat span{font-size:12px; color:var(--txt-2);}

.sec{padding:var(--pad-sec); border-bottom:1px solid var(--linie-2)}
.sec:last-child{border-bottom:0}
.sec h3{
  font-size:12.5px;
  color:var(--txt-2); margin-bottom:12px; font-weight:600;
}
.legend{display:flex; gap:8px 16px; flex-wrap:wrap; font-size:12.5px; color:var(--txt-2); margin-top:11px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px}
.empty{color:var(--txt-3); font-size:13.5px}
.hint-box{
  background:var(--flaeche-2); border:1px solid var(--linie); padding:10px 13px;
  font-size:13px; color:var(--txt-2); border-radius:var(--r);
}

/* ---------- Ansprechpartner ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:10px}
.contact{
  position:relative; border:1px solid var(--linie-2); border-radius:var(--r);
  padding:13px 14px; background:var(--flaeche-2);
}
.contact:hover{border-color:var(--linie)}
.contact .nm{font-weight:600; font-size:13.5px; padding-right:56px}
.contact .roles{font-size:11.5px; color:var(--txt-3); margin-bottom:7px}
/* Adresse und Nummer stehen je in einer Zeile mit ihrem Kopierknopf. Der Link
   nimmt den Platz, der Knopf sitzt rechtsbuendig daneben. */
.kzeile{display:flex; align-items:center; gap:6px}
.contact a{
  display:block; font-size:13px; text-decoration:none; color:var(--blau-text); padding:2px 0;
  /* Lange Adressen sollen die Karte nicht auseinanderdruecken. */
  min-width:0; overflow-wrap:anywhere;
}
.contact a:hover{text-decoration:underline}
.contact .hint{color:var(--txt-3); font-size:11.5px}

/* Zurueckhaltend, solange die Maus nicht in der Karte ist: vier
   Ansprechpartner mit je zwei Adressen ergaeben sonst acht auffaellige
   Knoepfe. Auf Tastatur und Touch ist er immer sichtbar -- was man nicht
   anfassen kann, wenn man keine Maus hat, ist nicht bedienbar. */
.kopieren{
  margin-left:auto; flex:0 0 auto; padding:0; width:24px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid transparent; border-radius:6px;
  font-size:11px; line-height:1; opacity:0; transition:opacity .12s;
}
.contact:hover .kopieren,
.kopieren:focus-visible{opacity:1}
.kopieren:hover{border-color:var(--linie); background:var(--flaeche)}
.kopieren.geschafft{opacity:1; color:var(--gruen-dunkel); border-color:var(--gruen)}
.kopieren.misslungen{opacity:1; color:var(--late); border-color:var(--late)}

@media (hover:none){
  .kopieren{opacity:1}
}
.contact .cedit{position:absolute; top:9px; right:10px; display:flex; gap:4px}
.contact .cedit button{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:7px;
  width:26px; height:24px; line-height:1; font-size:12px; color:var(--txt-3);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.contact .cedit button:hover{border-color:var(--blau); color:var(--blau-text)}
.contact .cedit button.del:hover{border-color:var(--late); color:var(--late)}

.cform{display:flex; flex-direction:column; gap:8px}
.cform .grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.cform label{font-size:12px; color:var(--txt-2); display:block; margin-bottom:3px}
.cform input,.cform textarea{
  width:100%; padding:7px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.cform input:focus,.cform textarea:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.cform textarea{resize:vertical; min-height:40px}
.cform .cfoot{display:flex; gap:8px; margin-top:3px}
.cform .cfoot button{border:0; border-radius:var(--r); padding:8px 16px; font-size:12.5px; font-weight:600}
.cform .save{background:var(--blau); color:#fff}
.cform .save:hover{background:var(--blau-dunkel)}
.cform .cancel{background:var(--neutral); color:var(--txt-2)}
.cform .cancel:hover{background:var(--neutral-hover)}

/* Hinzufuegen-Aktionen tragen die gruene Farbe des Vorbilds. */
.addcontact{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:7px 14px; color:var(--txt-2); font-size:12.5px; font-weight:600; margin-top:11px;
}
.addcontact:hover{border-color:var(--gruen); color:var(--gruen-dunkel); background:var(--ok-bg)}

/* ==========================================================================
   Stammdaten
   ========================================================================== */
/* Der Knopf steht im Seitenkopf neben den Filtern und traegt die gruene
   Anlegen-Farbe der uebrigen Hinzufuegen-Aktionen. */
.knopf-neu{
  border:0; border-radius:var(--r-pille); padding:8px 16px;
  background:var(--gruen); color:#fff; font-size:12.5px; font-weight:600;
  box-shadow:var(--schatten); white-space:nowrap;
}
.knopf-neu:hover{background:var(--gruen-dunkel)}

/* Die Kundennummer statt der Menge in der rechten Spalte. */
.row .knr{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  color:var(--txt-3); font-size:12px;
}

.stammform .grid3{display:grid; grid-template-columns:1fr 90px 1fr; gap:8px}
/* PLZ, Ort, Land und Load-ID in einer Zeile: sie gehoeren zusammen gelesen.
   Die Breiten folgen dem Inhalt -- eine PLZ ist fuenf Zeichen lang, ein
   Ortsname beliebig. */
.stammform .gridadr{display:grid; grid-template-columns:100px 1fr 80px 1fr; gap:8px}
.stammform input.land{text-transform:uppercase}
.stammform textarea{min-height:64px}
.stammform .cfoot{align-items:center}
.s-stand{font-size:12.5px; color:var(--gruen-dunkel)}
.s-fuss{margin-top:14px; font-size:12px; color:var(--txt-3); line-height:1.5}

/* Doppelgaenger-Rueckfrage. Kein Fehler -- Name und PLZ sind nachweislich
   nicht eindeutig, es gibt echte Faelle. Deshalb Gelb und ein Ausweg. */
.warnbox{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:0 var(--r) var(--r) 0;
  padding:11px 14px; font-size:13px; color:var(--warn-txt);
}
.warnbox button{
  border:1px solid var(--warn); background:var(--flaeche); color:var(--warn-txt);
  border-radius:var(--r); padding:6px 13px; font-size:12.5px; font-weight:600;
  margin-left:auto; white-space:nowrap;
}
.warnbox button:hover{background:var(--warn); color:#fff}

@media (max-width:860px){
  .stammform .grid3{grid-template-columns:1fr}
  .stammform .gridadr{grid-template-columns:100px 1fr}
}

/* ==========================================================================
   Änderungsprotokoll (nur Admin)
   ==========================================================================
   Eine Zeile je Änderung, darunter die betroffenen Felder als Vorher/Nachher.
   Die Zeit steht links und in Tabellenziffern, damit die Spalte beim Scrollen
   ruhig bleibt -- man liest sie von oben nach unten, nicht einzeln. */
.protokoll{display:flex; flex-direction:column; gap:14px}

.p-kopfzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.p-kachel{
  background:var(--flaeche); border:1px solid var(--linie-2); border-radius:var(--r-gross);
  padding:14px 16px; box-shadow:var(--schatten);
}
.p-kachel b{display:block; font-size:22px; line-height:1.2; font-variant-numeric:tabular-nums}
.p-kachel span{font-size:11.5px; color:var(--txt-3)}

.p-filter{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.p-filter input[type=search],.p-filter select,.p-filter input[type=date]{
  padding:8px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.p-filter input[type=search]{flex:1 1 260px; min-width:0}
.p-filter input:focus,.p-filter select:focus{
  outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich);
}
.p-zeit{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt-3)}

.p-liste{display:flex; flex-direction:column; gap:7px}
.p-zeile{
  background:var(--flaeche); border:1px solid var(--linie-2); border-radius:var(--r);
  padding:11px 14px;
}
.p-zeile:hover{box-shadow:var(--schatten)}

.p-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px}
.p-zeit-wert{color:var(--txt-3); font-size:12px; white-space:nowrap; flex:0 0 auto}

/* Die Art der Änderung als Wort, nicht als Farbpunkt: „angelegt" ist
   eindeutig, ein grüner Punkt muss erklärt werden. */
.p-marke{
  font-size:12px; font-weight:600;
  padding:3px 8px; border-radius:var(--r-pille); white-space:nowrap; flex:0 0 auto;
}
.p-neu-marke,.p-neu{color:var(--gruen-dunkel)}
.p-marke.p-neu{background:var(--ok-bg); color:var(--gruen-dunkel)}
.p-marke.p-aend{background:var(--blau-weich); color:var(--blau-text)}
.p-marke.p-weg{background:var(--fehler-bg); color:var(--late)}

.p-was{display:flex; align-items:baseline; gap:7px; min-width:0}
.p-was b{font-weight:600}
.p-bez{color:var(--txt-2); overflow-wrap:anywhere}

.p-kunde{
  margin-left:auto; flex:0 0 auto; background:none; border:0; padding:0;
  font-size:13px; font-weight:600; color:var(--blau-text); text-decoration:none;
}
.p-kunde:hover{text-decoration:underline}
.p-kunde-weg{margin-left:auto; font-size:12px; color:var(--txt-3); font-style:italic}
.p-wer{
  flex:0 0 auto; font-size:12px; color:var(--txt-2);
  padding-left:10px; border-left:1px solid var(--linie);
}
.p-wer em{color:var(--txt-3)}

.p-felder{width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px}
.p-felder td{padding:3px 10px 3px 0; vertical-align:top; border:0}
.p-feld{color:var(--txt-3); white-space:nowrap; width:1%}
.p-alt{color:var(--txt-2); text-decoration:line-through; overflow-wrap:anywhere}
.p-pfeil{color:var(--txt-3); width:1%; white-space:nowrap}
.p-neu{color:var(--txt); overflow-wrap:anywhere}
.p-felder em{color:var(--txt-3); font-size:11.5px}

.p-mehr-felder{
  background:none; border:0; padding:4px 0 0; margin:0;
  font-size:11.5px; font-weight:600; color:var(--blau-text); text-decoration:underline;
}

@media (max-width:820px){
  .p-kopf{gap:6px 9px}
  .p-kunde,.p-kunde-weg{margin-left:0}
  .p-wer{padding-left:0; border-left:0}
  /* Vorher und Nachher untereinander statt nebeneinander -- vier Spalten
     passen auf einem Telefon nicht, ohne dass die Werte umbrechen. */
  .p-felder,.p-felder tr,.p-felder td{display:block; width:auto}
  .p-felder tr{padding:6px 0; border-bottom:1px solid var(--linie-2)}
  .p-felder tr:last-child{border-bottom:0}
  /* Mit `.p-felder` davor, sonst gewinnt `.p-felder td` eine Zeile weiter
     oben -- Klasse plus Typ schlaegt Klasse allein. */
  .p-felder .p-pfeil{display:none}
  .p-feld{font-size:12px;}
}

/* ==========================================================================
   Einstellungen
   ========================================================================== */
.einst{display:flex; flex-direction:column; gap:14px; max-width:920px}

.knopf-weg{
  border:1px solid var(--linie); background:var(--flaeche); color:var(--txt-2);
  border-radius:var(--r-pille); padding:7px 15px; font-size:12.5px; font-weight:600;
  box-shadow:var(--schatten); margin-left:auto; white-space:nowrap;
}
.knopf-weg:hover{border-color:var(--late); color:var(--late)}

/* Eine Einstellung je Zeile: links Name und Erklaerung, rechts das
   Bedienelement. Die Erklaerung steht bewusst dabei und nicht in einem
   Kurzhinweis -- was eine Einstellung bewirkt, soll man lesen koennen, ohne
   sie erst auszuprobieren. */
.ezeile{
  display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--linie-2);
}
.ezeile:first-of-type{padding-top:0}
.ezeile:last-child{padding-bottom:0; border-bottom:0}
.etext{flex:1 1 320px; min-width:220px; display:flex; flex-direction:column; gap:3px}
.etext b{font-size:13.5px; font-weight:600}
.etext span{font-size:12.5px; color:var(--txt-3); line-height:1.45}
.etext i{font-style:normal; color:var(--txt-2); font-weight:600}
.ewahl{flex:0 0 auto; display:flex; align-items:center; gap:10px}
.ewahl select{
  padding:7px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche); color:var(--txt); min-width:190px;
}
.ewahl select:hover{border-color:var(--blau)}

/* Ausgegraute Zeile, wenn die Einstellung gerade nichts bewirkt -- die
   Bildstaerke ohne Bild etwa. Sie bleibt stehen statt zu verschwinden, sonst
   springt die Seite beim Umschalten. */
.ezeile.wirkungslos .etext,.ezeile.wirkungslos .ewahl{opacity:.4}

/* ---------- Farbwahl ---------- */
.farbwahl{position:relative}
.farbtupfer{
  width:34px; height:34px; border-radius:var(--r); background:var(--blau);
  border:1px solid rgba(30,44,57,.15); box-shadow:var(--schatten); pointer-events:none;
}
/* Das Farbfeld liegt unsichtbar ueber dem Tupfer: die Browser zeichnen
   `input[type=color]` sehr unterschiedlich, der Tupfer sieht ueberall gleich
   aus und traegt die tatsaechliche Farbe. */
.farbwahl input[type=color]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  border:0; padding:0; background:none;
}

/* ---------- Segmentwahl ---------- */
.segment{display:flex; border:1px solid var(--linie); border-radius:var(--r-pille); overflow:hidden}
.segment button{
  border:0; background:var(--flaeche); color:var(--txt-2);
  padding:7px 15px; font-size:12.5px; font-weight:600;
  border-right:1px solid var(--linie);
}
.segment button:last-child{border-right:0}
.segment button:hover{background:var(--blau-weich); color:var(--blau-text)}
.segment button[aria-checked="true"]{background:var(--blau); color:#fff}

/* ---------- Schieber ---------- */
.schieber{gap:12px}
.schieber input[type=range]{width:180px; accent-color:var(--blau)}
.schieber output{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--txt-2); min-width:44px; text-align:right;
}

/* ---------- Schalter ---------- */
.schalter{position:relative; display:inline-flex; cursor:pointer}
.schalter input{position:absolute; opacity:0; width:0; height:0}
.schalter span{
  width:44px; height:25px; border-radius:var(--r-pille); background:var(--schalter-bg);
  position:relative; display:block;
}
.schalter span::after{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
  border-radius:50%; background:var(--flaeche); box-shadow:0 1px 3px rgba(30,44,57,.25);
  transition:left .13s ease;
}
.schalter input:checked + span{background:var(--blau)}
.schalter input:checked + span::after{left:22px}
.schalter input:focus-visible + span{outline:2px solid var(--blau); outline-offset:2px}
body.ohne-bewegung .schalter span::after{transition:none}

.e-fuss{font-size:12px; color:var(--txt-3); line-height:1.5; padding:0 2px}

@media (max-width:700px){
  .ewahl{width:100%}
  .ewahl select,.schieber input[type=range]{width:100%; flex:1}
}

/* ---------- Dokumente ---------- */
/* Kleinere Kacheln als frueher (150 px): an einem Platz liegen drei bis fuenf
   Dateien, und der Abschnitt steht mitten im Kundenblatt zwischen Lieferungen
   und Infos. Die Vorschau bleibt -- bei einem Foto der Zufahrt ist sie der
   Inhalt --, sie ist nur nicht mehr so hoch wie eine Postkarte. */
.docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; margin-bottom:9px}
.docs:empty{display:none}
.doc{
  border:1px solid var(--linie); border-radius:var(--r); background:var(--flaeche);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
.doc:hover{box-shadow:var(--schatten-hoch)}
.doc .thumb{height:62px; background:var(--balken-bg); display:flex; align-items:center; justify-content:center; overflow:hidden}
.doc .thumb img{width:100%; height:100%; object-fit:cover}
.doc .thumb .fileicon{font-size:22px; color:var(--txt-3)}
.doc .dmeta{padding:6px 8px}
.doc .dname{
  font-size:11.5px; font-weight:600; word-break:break-word; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.doc .dsize{font-size:10.5px; color:var(--txt-3); margin-top:2px}
.doc .ddel{
  position:absolute; top:6px; right:6px; background:rgba(255,255,255,.92);
  border:1px solid var(--linie); border-radius:7px; width:24px; height:22px;
  font-size:11px; color:var(--txt-2); display:flex; align-items:center; justify-content:center; padding:0;
}
.doc .ddel:hover{border-color:var(--late); color:var(--late)}
.doc a.dopen{text-decoration:none; color:inherit; display:block}

.docupload{
  /* Waechst mit, gibt aber nicht unter 170 px nach: die Auswahlliste daneben
     ist so breit wie ihr laengster Eintrag ("Anleitung zum Entladen"), und in
     einem schmalen Fenster draengte sie das Ablegefeld sonst auf eine Spalte
     von sechs Zeichen zusammen. Passt beides nicht nebeneinander, rutscht die
     Liste eine Zeile tiefer -- siehe flex-wrap an der Zeile. */
  flex:1 1 170px; min-width:0;
  border:1px dashed var(--strich); border-radius:var(--r); padding:7px 12px;
  text-align:center; color:var(--txt-2); background:var(--flaeche-2); cursor:pointer;
  font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .12s,background .12s;
}
.docupload:hover,.docupload.drag{border-color:var(--blau); color:var(--blau-text); background:var(--blau-weich); border-style:solid}
.docupload input{display:none}

.upload-zeile{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.upload-zeile select{flex:0 1 auto; min-width:0; padding:7px 10px; border:1px solid var(--linie); border-radius:var(--r); font:inherit; font-size:13px; background:var(--flaeche)}
.upload-zeile .dsize{margin-left:auto; text-align:right; font-size:12px; color:var(--txt-3)}

/* ---------- Tabellen ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:12px;
  color:var(--txt-2); font-weight:600; padding:0 9px 7px 0; border-bottom:1px solid var(--linie-2);
}
td{padding:7px 9px 7px 0; border-bottom:1px solid var(--linie-2)}
td.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

/* ---------- Lieferungen: Aufklappfenster pro Sorte ---------- */
.fuel{
  border:1px solid var(--linie); border-radius:var(--r); margin-bottom:8px;
  overflow:hidden; background:var(--flaeche);
}
.fuel:last-child{margin-bottom:0}
.fuel>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 14px}
.fuel>summary::-webkit-details-marker{display:none}
.fuel>summary:hover{background:var(--flaeche-2)}
.fuel>summary::after{
  content:"›"; margin-left:auto; font-size:19px; color:var(--txt-3);
  transform:rotate(90deg); transition:transform .15s ease; line-height:1;
}
.fuel[open]>summary::after{transform:rotate(-90deg)}
.fuel[open]>summary{border-bottom:1px solid var(--linie-2)}
.fuel .fbar{width:4px; align-self:stretch; border-radius:3px; flex:0 0 auto; min-height:30px}
.fuel .fname{font-weight:600; font-size:14px}
.fuel .flast{display:block; font-size:11.5px; color:var(--txt-3); margin-top:2px}
.fuel .fnums{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.fuel .fnums b{display:block; font-weight:500; font-size:15px; color:var(--txt)}
.fuel .fnums span{font-size:11.5px; color:var(--txt-2)}
.fuel .fbody{padding:6px 14px 12px}

/* ---------- Kontakthistorie ---------- */
.note-form{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.note-form select,.note-form input{
  padding:8px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.note-form input{flex:1; min-width:170px}
.note-form input:focus,.note-form select:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.note-form button{
  background:var(--gruen); color:#fff; border:0; border-radius:var(--r);
  padding:8px 17px; font-size:12.5px; font-weight:600;
}
.note-form button:hover{background:var(--gruen-dunkel)}
.note-form .cancel{background:var(--neutral); color:var(--txt-2)}
.note-form .cancel:hover{background:var(--neutral-hover)}

.act{display:flex; gap:10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--linie-2); font-size:13.5px}
.act:last-child{border-bottom:0}
.act .d{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--txt-3); white-space:nowrap}
.act .hint{font-size:11.5px; color:var(--txt-3)}
.act .notiz-knoepfe{margin-left:auto; display:flex; gap:4px; flex:0 0 auto}
.act .notiz-knoepfe button{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:7px;
  width:24px; height:22px; font-size:11px; color:var(--txt-3);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.act .notiz-knoepfe button:hover{border-color:var(--blau); color:var(--blau-text)}
.act .notiz-knoepfe button.del:hover{border-color:var(--late); color:var(--late)}

/* ---------- Infos zum Kunden ----------
   Dieselbe Zeile wie in der Kontakthistorie, nur die Art traegt eine Marke:
   in einer Liste aus "Zufahrt", "Öffnungszeiten" und "Sicherheit" ist die Art
   das, wonach das Auge sucht, und nicht der Zeitstempel davor. */
.act .iart{
  display:inline-block; background:var(--blau-weich); color:var(--blau-text);
  border-radius:5px; padding:1px 7px; font-size:11.5px; font-weight:600;
  letter-spacing:.02em;
}
/* Die Art ist kurz -- sie soll dem Text daneben keinen Platz wegnehmen. */
.note-form .art-feld{flex:0 0 auto; width:150px; min-width:0}

/* ==========================================================================
   Statistik
   ========================================================================== */
.stats-view{display:flex; flex-direction:column; gap:14px}
.stats-head{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.stat-kpi{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten);
  padding:15px 17px; position:relative; overflow:hidden;
}
/* Farbiger Kopfstreifen je Kachel -- die Entsprechung der farbigen
   Spaltenkoepfe im Vorbild. */
.stat-kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--blau)}
.stat-kpi:nth-child(2)::before{background:var(--tuerkis)}
.stat-kpi:nth-child(3)::before{background:var(--orange)}
.stat-kpi:nth-child(4)::before{background:var(--gruen)}
.stat-kpi b{display:block; font-size:23px; color:var(--txt); line-height:1.2; font-weight:500}
.stat-kpi span{font-size:12px; color:var(--txt-2);}

.scards{display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:12px}
.scard{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten); padding:15px 17px}
.scard:hover{box-shadow:var(--schatten-hoch)}
.scard-h{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600}
.sdot{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.scard-big{font-size:27px; font-weight:500; margin-top:9px; line-height:1.1}
.scard-big span{font-size:15px; color:var(--txt-3)}
.scard-sub{font-size:12px; color:var(--txt-3); margin-top:3px}
.scard-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:13px; border-top:1px solid var(--linie-2); padding-top:12px}
.scard-grid b{display:block; font-size:13.5px; color:var(--txt); font-weight:500}
.scard-grid span{font-size:11.5px; color:var(--txt-2);}

.sec-block{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten); padding:17px 19px}
.sec-block h3{font-size:12.5px; color:var(--txt-2); margin-bottom:18px; font-weight:600}
.mchart{display:grid; grid-template-columns:repeat(12,1fr); gap:7px; align-items:end; height:200px}
.mcol{display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end}
.mbar{
  width:100%; max-width:40px; height:155px; display:flex; flex-direction:column;
  justify-content:flex-end; background:var(--balken-bg); border-radius:5px; overflow:hidden;
}
.mseg{width:100%}
.mval{font-size:10px; color:var(--txt-2); margin-top:5px; height:12px}
.mlab{font-size:11px; color:var(--txt-3); margin-top:2px}

/* ==========================================================================
   Vergleich mit den Vorjahren
   ========================================================================== */
/* Umschalter im Seitenkopf. Sieht aus wie die uebrigen Pillen, traegt aber
   ein Symbol -- er wechselt die Ansicht und filtert nicht, und das soll man
   ihm ansehen. */
.knopf-wechsel{
  display:inline-flex; align-items:center; gap:8px; margin-left:auto;
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r-pille);
  padding:7px 15px; font-size:12.5px; color:var(--txt-2); box-shadow:var(--schatten);
}
.knopf-wechsel svg{width:15px; height:15px; flex:0 0 auto}
.knopf-wechsel:hover{border-color:var(--blau); color:var(--blau-text)}
.knopf-wechsel[aria-pressed="true"]{background:var(--blau); border-color:var(--blau); color:#fff}
.knopf-wechsel[aria-pressed="true"]:hover{background:var(--blau-dunkel); color:#fff}

.v-leiste{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.v-leiste .selects{margin-left:auto; align-items:center}
.v-leiste .selects label{font-size:12px; color:var(--txt-2)}
/* Die Produktwahl waehlt aus, sie filtert nicht weg -- deshalb ohne das
   Kreuz, das die Filterpillen der Kundenliste tragen. */
.v-chip[aria-pressed="true"]::after{content:none}

/* Ein Saeulenpaar je Monat: das Referenzjahr grau im Hintergrund, das
   gewaehlte Jahr in der Produktfarbe davor. */
.vchart{display:grid; grid-template-columns:repeat(12,1fr); gap:9px; align-items:end; height:215px}
.vcol{display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end}
.vpaar{
  width:100%; max-width:46px; height:150px; display:flex; align-items:flex-end;
  justify-content:center; gap:3px;
}
.vsaeule{flex:1 1 0; min-width:0; max-width:20px; border-radius:4px 4px 0 0; min-height:2px}
/* Ein Monat, der noch nicht gelaufen ist, bekommt eine angedeutete Flaeche
   statt einer Saeule der Hoehe null -- sonst waere er von einem Monat ohne
   Absatz nicht zu unterscheiden. */
.vsaeule.leer{
  height:100%; background:repeating-linear-gradient(135deg,
    var(--linie-2) 0 4px, transparent 4px 8px); border-radius:4px; opacity:.7;
}
/* Der angefangene Monat: die Saeule ist niedriger, weil der Monat kuerzer
   ist, nicht weil weniger geflossen waere. Die Schraffur sagt das. */
.vsaeule.angefangen{
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.55) 0 3px, transparent 3px 7px);
}
.vval{font-size:9.5px; margin-top:6px; height:13px; white-space:nowrap}
.vval .v-delta{font-size:9.5px}

.v-delta{color:var(--txt-2)}
.v-delta.hoch{color:var(--ok)}
.v-delta.tief{color:var(--late)}
.stat-kpi .v-delta{font-size:23px; font-weight:500}

/* Die Jahrestabelle ist breiter als schmale Fenster -- sie rollt in ihrem
   eigenen Rahmen, statt die ganze Seite zu verschieben. */
.vtab-rahmen{overflow-x:auto; margin:0 -3px; padding:0 3px}
.vtab{width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap}
.vtab th,.vtab td{padding:7px 9px; text-align:right; border-bottom:1px solid var(--linie-2)}
.vtab thead th{
  font-size:12px; color:var(--txt-3);
  font-weight:600; border-bottom:1px solid var(--linie);
}
.vtab .v-jahr{text-align:left; font-weight:600; color:var(--txt)}
.vtab tbody tr:hover{background:var(--flaeche-2)}
/* Das Jahr, das oben in den Kacheln steht, ist auch hier das betonte. */
.vtab tr.v-vorn{background:var(--blau-weich)}
.vtab tr.v-vorn:hover{background:var(--blau-weich)}
.vtab tr.v-vorn td,.vtab tr.v-vorn th{font-weight:600}
.vtab .v-summe{font-weight:600; border-left:1px solid var(--linie)}
.vtab .v-leer{color:var(--txt-3)}
.vtab .v-angefangen{color:var(--txt-3); font-style:italic}
.v-laufend{color:var(--txt-2)}
/* Der beste Monat der ganzen Reihe. Eine einzige Hervorhebung, damit sie
   etwas heisst. */
.vtab .v-spitze{color:var(--blau-text); font-weight:600}
.vtab tfoot th,.vtab tfoot td{border-top:2px solid var(--linie); border-bottom:none; padding-top:9px}

.v-quelle{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:var(--r-pille);
  background:var(--flaeche-2); border:1px solid var(--linie);
  font-size:11px; font-weight:600;
  color:var(--txt-3); vertical-align:1px;
}
.v-hinweis{
  margin:0; padding:9px 14px; border-radius:var(--r); background:var(--blau-weich);
  font-size:12px; line-height:1.5; color:var(--txt-2);
}
.v-fussnote{margin:14px 0 0; font-size:12px; line-height:1.55; color:var(--txt-3); max-width:78ch}
.v-fussnote b{color:var(--txt-2)}

/* ==========================================================================
   Datenqualitaet
   ========================================================================== */
.dq{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start}
.issue{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten);
  border-left:4px solid var(--late); padding:15px 17px;
}
.issue h3{font-size:15px; margin-bottom:4px}
.issue .n{font-family:"IBM Plex Mono",monospace; font-size:25px; font-weight:500; color:var(--late); line-height:1.2}
.issue p{margin:8px 0 0; font-size:13px; color:var(--txt-2)}
.issue.fix{border-left-color:var(--ok)}
.issue.fix .n{color:var(--ok)}
.issue .detailliste{margin:10px 0 0; padding-left:18px; font-size:12.5px; color:var(--txt-2); max-height:170px; overflow:auto}
.issue .mehr{font-size:12px; color:var(--txt-3); margin-top:7px}

/* ==========================================================================
   Anmeldung
   ========================================================================== */
.anmeldung{
  position:fixed; inset:0; z-index:100; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.anmeldung .box{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-gross); padding:30px 32px 32px;
  width:100%; max-width:390px;
}
.anmeldung .marke.gross{width:44px; height:44px; font-size:15px; border-radius:11px; margin-bottom:16px}
.anmeldung h1{font-size:21px; margin-bottom:3px}
.anmeldung .sub{font-size:13px; color:var(--txt-3); margin-bottom:22px}
.anmeldung label{font-size:12px; color:var(--txt-2); display:block; margin-bottom:4px}
.anmeldung input{
  width:100%; padding:10px 12px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; background:var(--flaeche-2); margin-bottom:14px;
}
.anmeldung input:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich); background:var(--flaeche)}
.anmeldung button{
  width:100%; background:var(--blau); color:#fff; border:0; border-radius:var(--r);
  padding:11px; font-size:14px; font-weight:600; margin-top:4px;
}
.anmeldung button:hover{background:var(--blau-dunkel)}
.anmeldung button:disabled{opacity:.55; cursor:default}
.anmeldung .fehler{
  background:var(--fehler-bg); border-left:3px solid var(--late); padding:9px 12px;
  font-size:13px; color:var(--late); border-radius:0 var(--r) var(--r) 0; margin-bottom:14px;
}

/* ---------- Zweiter Faktor: Codeeingabe, Einrichtung, Notfallcodes ----------
   Alle drei liegen in derselben Anmeldeschicht und loesen einander ab. Die
   Einrichtungsmaske braucht mehr Platz als die schmale Anmeldebox, deshalb
   `weit`. */
.anmeldung .box.weit{max-width:520px}

/* Der Code selbst: gross, weit gesperrt und in der Zahlenschrift -- er wird
   von einem Handy abgelesen und Ziffer fuer Ziffer getippt. */
#cf-code, #ef-code{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:22px; letter-spacing:.22em; text-align:center; padding:12px;
}
#ef-code{margin-top:8px}

.anmeldung .hinweiszeile{
  font-size:12px; color:var(--txt-3); line-height:1.5; margin-top:14px; text-align:center;
}
.anmeldung .alsLink{
  width:auto; background:none; color:var(--blau-text); padding:0; margin:0;
  font-size:12px; font-weight:600; text-decoration:underline;
}
.anmeldung .alsLink:hover{background:none; color:var(--blau-dunkel)}

.einrichtung-schritte{margin:0 0 4px; padding-left:20px; font-size:13px; line-height:1.6}
.einrichtung-schritte li{margin-bottom:14px}
.einrichtung-schritte li::marker{color:var(--blau-text); font-weight:700}
.einrichtung-schritte b{display:block; margin-bottom:2px}

/* Der QR-Code steht mittig und auf weissem Grund -- Lesegeraete brauchen den
   hellen Rand rundherum (die "Ruhezone"), sonst finden sie die Ecken nicht.
   Deshalb `background:var(--flaeche)` und `padding` auch dann, wenn die Oberflaeche
   sonst grau ist. */
.qr{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:12px; width:max-content; max-width:100%; margin:10px auto 8px;
}
/* Die Groesse wird hier gesetzt und nicht im Server. Damit das wirkt, traegt
   das SVG eine viewBox (siehe `app/zweifaktor.py`) -- ohne sie wuerde es
   nicht verkleinert, sondern abgeschnitten, und kein Handy koennte es lesen. */
.qr svg{display:block; width:200px; height:200px; max-width:100%}
.qr-ersatz{font-size:11.5px; color:var(--txt-3); line-height:1.5; text-align:center}
.qr-ersatz code{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:12px;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:4px;
  padding:3px 6px; margin-top:3px; word-break:break-all; user-select:all;
}

.warnzeile{
  background:var(--warn-bg); border-left:3px solid var(--warn); padding:10px 12px;
  font-size:12.5px; line-height:1.5; color:var(--warn-txt);
  border-radius:0 var(--r) var(--r) 0; margin-bottom:16px;
}

.codeliste{
  list-style:none; padding:0; margin:0 0 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.codeliste li{
  font-family:"IBM Plex Mono",monospace; font-size:15px; letter-spacing:.06em;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--r);
  padding:9px 10px; text-align:center; user-select:all;
}
.codeliste li.verbraucht{opacity:.45; text-decoration:line-through}

.anmeldung .knopfzeile{display:flex; gap:8px; margin-bottom:16px}
.anmeldung .knopfzeile button{margin-top:0}
.anmeldung button.zweitrangig{
  background:var(--flaeche-2); color:var(--txt); border:1px solid var(--linie);
}
.anmeldung button.zweitrangig:hover{background:var(--linie-2)}

.bestaetigung{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--txt);
  text-transform:none; letter-spacing:0; margin-bottom:6px;
}
.bestaetigung input{width:auto; margin:0}

/* Beim Drucken der Notfallcodes bleibt nur die Liste stehen. */
@media print{
  .anmeldung{position:static; background:none; padding:0}
  .anmeldung .box{box-shadow:none; max-width:none}
  #anmeldeform, #codeform, #einrichtungform, .warnzeile,
  .anmeldung .knopfzeile, .bestaetigung, #nc-weiter, .anmeldung .marke{display:none}
  .codeliste li{border:1px solid #999}
}

/* ==========================================================================
   Ladezustand, Fehler, Sichtbarkeit
   ========================================================================== */
.laedt{padding:32px 18px; color:var(--txt-3); font-size:13.5px; text-align:center}
.fehlerbox{
  margin:14px 18px 0; background:var(--fehler-bg); border-left:3px solid var(--late);
  padding:12px 16px; border-radius:0 var(--r) var(--r) 0; color:var(--late); font-size:13.5px;
}
.hidden{display:none !important}

@media (prefers-reduced-motion:no-preference){
  /* `background-color` statt der Kurzform `background`: die schliesst auch
     das Hintergrundbild ein, und ein Bild laesst sich nicht weich ueberblenden.
     Gemeint war immer nur die Farbe. */
  .row,.chip,.panel,.doc,.scard,.tabs button,.konto button{transition:background-color .13s ease,border-color .13s ease,box-shadow .16s ease,transform .13s ease,color .13s ease}
}

/* Von Hand gesetzte Bewegungsbremse aus dem Register Einstellungen. Sie
   ergaenzt die Systemvorgabe oben, ersetzt sie nicht: wer sie im Betriebs-
   system gesetzt hat, bekommt sie ohnehin. Auch das Anheben der Zeile unter
   dem Zeiger faellt weg -- das ist die auffaelligste Bewegung im Bild. */
body.ohne-bewegung *,
body.ohne-bewegung *::before,
body.ohne-bewegung *::after{
  transition:none !important; animation:none !important; scroll-behavior:auto !important;
}
body.ohne-bewegung .row:hover{transform:none}

/* ==========================================================================
   Rechnungen
   ==========================================================================
   Der Zahlungsstand haengt an der einzelnen Lieferzeile: zwei Sorten am
   selben Tag sind zwei Rechnungen. Deshalb sitzt der Haken in der Zeile und
   nicht in der Kopfzeile einer Lieferung. */
.haken{display:flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap}
.haken input{
  width:16px; height:16px; flex:0 0 auto; margin:0; cursor:pointer;
  accent-color:var(--ok);
}
.haken span{font-size:11.5px; color:var(--txt-3)}
.haken span.ja{color:var(--ok)}
.haken span.nein{color:var(--late); font-weight:600}
.haken:hover span{text-decoration:underline; text-underline-offset:2px}
td.bez{width:1%}

/* Offene Zeile: ein schmaler roter Streifen links statt einer eingefaerbten
   Zeile -- die Tabelle bliebe sonst schwer lesbar. */
tr.offen td:first-child{box-shadow:inset 3px 0 0 var(--late)}
tr.offen td:first-child{padding-left:9px}

.fuel .offen-zahl{
  font-style:normal; font-size:10.5px; font-weight:600; color:#fff;
  background:var(--late); border-radius:var(--r-pille); padding:1px 7px; margin-left:7px;
}
.fuel.hat-offene{border-color:var(--fehler-linie)}

.rechnungen{display:flex; flex-direction:column; gap:14px}
.rtab td{vertical-align:top}
.rtab .hint{display:block; font-size:11px; color:var(--txt-3)}
.rtab .sdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
.rtab .rkunde{color:var(--txt); text-decoration:none; font-weight:600}
.rtab .rkunde:hover{color:var(--blau-text); text-decoration:underline}
.rechnungen .mehr{font-size:12px; color:var(--txt-3); margin-top:10px}

/* ---------- Bezahlt-Dialog ---------- */
.dlg{
  border:0; border-radius:var(--r-gross); padding:0; width:min(420px,calc(100vw - 32px));
  box-shadow:var(--schatten-hoch); color:var(--txt); background:var(--flaeche);
}
.dlg::backdrop{background:rgba(30,44,57,.42)}
.dlg form{padding:20px 22px 18px; display:flex; flex-direction:column}
.dlg h3{margin:0; font-size:17px; letter-spacing:-.01em}
.dlg .dlg-sub{
  margin:6px 0 16px; font-size:12.5px; color:var(--txt-2);
  border-left:3px solid var(--linie); padding-left:9px;
}
.dlg label{font-size:12px;
  color:var(--txt-3); font-weight:600; margin-bottom:5px}
.dlg input[type="date"],
.dlg input[type="number"],
.dlg input[type="text"]{
  padding:9px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:14px; background:var(--flaeche); width:100%;
}
.dlg input[type="number"]{font-family:"IBM Plex Mono",monospace}
.dlg input[type="date"]:focus,
.dlg input[type="number"]:focus,
.dlg input[type="text"]:focus{
  outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich);
}
.dlg .dlg-hinweis{margin:7px 0 0; font-size:11.5px; color:var(--txt-3)}
.dlg .dlg-fehler{
  margin-top:11px; background:var(--fehler-bg); border:1px solid var(--fehler-linie); color:var(--fehler-txt);
  border-radius:var(--r); padding:8px 11px; font-size:12.5px;
}
.dlg .dlg-knoepfe{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; align-items:center}
.dlg .dlg-knoepfe button{
  border:0; border-radius:var(--r); padding:9px 17px; font:inherit;
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.dlg .dlg-knoepfe button[type="submit"]{background:var(--gruen); color:#fff; margin-left:auto}
.dlg .dlg-knoepfe button[type="submit"]:hover{background:var(--gruen-dunkel)}
.dlg .dlg-knoepfe .cancel{background:var(--neutral); color:var(--txt-2)}
.dlg .dlg-knoepfe .cancel:hover{background:var(--neutral-hover)}
/* Das Zuruecknehmen steht links und aussen: es ist der seltene Weg, soll
   aber erreichbar sein, ohne dass man es versehentlich trifft. */
.dlg .dlg-knoepfe .weg{background:var(--flaeche); color:var(--late); border:1px solid var(--fehler-linie)}
.dlg .dlg-knoepfe .weg:hover{background:var(--fehler-bg)}

/* ==========================================================================
   Import der Truck-Liste
   ==========================================================================
   Die Rueckfrageliste ist der eigentliche Arbeitsplatz: je Zeile eine Karte
   mit den Daten aus der Liste, dem Grund der Rueckfrage und den Kunden, die
   in Frage kommen. Ein Klick auf einen Vorschlag entscheidet -- alles andere
   (suchen, Neukunde, verwerfen) steht daneben, aber leiser. */
.import{display:flex; flex-direction:column; gap:14px}

.upfeld{
  display:block; border:1px dashed var(--strich); border-radius:10px; padding:18px;
  text-align:center; color:var(--txt-2); background:var(--flaeche-2); cursor:pointer;
  transition:border-color .12s,background .12s;
}
.upfeld:hover,.upfeld.drag{border-color:var(--blau); color:var(--blau-text); background:var(--blau-weich); border-style:solid}
.upfeld .up-haupt{display:block; font-size:13.5px; font-weight:600}
.upfeld .hint{display:block; font-size:11.5px; color:var(--txt-3); margin-top:5px}

.i-zeitraum{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.i-zeitraum label{font-size:12px; color:var(--txt-2)}
.i-zeitraum input{
  width:150px; padding:6px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.i-zeitraum input:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.i-status{margin-top:10px; font-size:12.5px; color:var(--txt-2)}
.i-status.fehler{color:var(--late); font-weight:600}

/* Eine offene Zeile. Der gelbe Streifen links sagt: hier wartet etwas. */
.ikarte{
  border:1px solid var(--linie); border-left:3px solid var(--warn);
  border-radius:var(--r); padding:12px 14px; margin-bottom:11px; background:var(--flaeche);
}
.ikopf{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ikopf b{font-size:13.5px}
.izuordnung{
  font-size:12px;
  color:var(--warn); font-weight:600;
}
.idaten{font-size:12px; color:var(--txt-2); margin-top:4px; overflow-wrap:anywhere}
.igrund{font-size:12.5px; color:var(--txt); margin-top:7px; overflow-wrap:anywhere}
/* Was dieser Lauf an einer bestehenden Lieferung nachgetragen hat. */
.ivorher{
  font-size:11.5px; color:var(--gruen-dunkel); margin-top:4px;
  overflow-wrap:anywhere;
}

.ivorschlaege{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.ivorschlaege button,.itreffer button{
  text-align:left; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); padding:7px 12px; cursor:pointer; color:var(--txt);
}
.ivorschlaege button:hover,.itreffer button:hover{border-color:var(--gruen); background:var(--ok-bg)}
.ivorschlaege b,.itreffer b{display:block; font-size:13px}
.ivorschlaege span,.itreffer span{display:block; font-size:11px; color:var(--txt-3)}

.iaktionen{display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap}
.iaktionen button{
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--r);
  padding:6px 12px; font-size:12.5px; color:var(--txt-2); cursor:pointer;
}
.iaktionen button:hover{border-color:var(--blau); color:var(--blau-text)}
.iaktionen button.aktiv{border-color:var(--blau); color:var(--blau-text); background:var(--blau-weich)}
.iaktionen button.weg{margin-left:auto; color:var(--late)}
.iaktionen button.weg:hover{border-color:var(--late); background:var(--fehler-bg); color:var(--late)}
.imenge{font-size:12px; color:var(--txt-3)}
.imenge input{
  width:110px; margin:0 5px; padding:6px 9px; border:1px solid var(--linie);
  border-radius:var(--r); font:inherit; font-size:13px; background:var(--flaeche);
}

.isuche{margin-top:10px}
.isuche input[type="search"]{
  width:100%; padding:7px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.isuche input:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.itreffer{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px}

.ineu{margin-top:11px; padding-top:11px; border-top:1px dashed var(--linie)}
.ineu .grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ineu label{font-size:12px; color:var(--txt-2); display:block; margin-bottom:3px}
.ineu input{
  width:100%; padding:7px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche);
}
.ineu input:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.ineu .hint{font-size:11.5px; color:var(--txt-3); margin:8px 0}
.ineu .cfoot{display:flex; gap:8px}
.ineu .cfoot button{border:0; border-radius:var(--r); padding:8px 16px; font-size:12.5px; font-weight:600; cursor:pointer}
.ineu .save{background:var(--blau); color:#fff}
.ineu .save:hover{background:var(--blau-dunkel)}
.ineu .cancel{background:var(--neutral); color:var(--txt-2)}

.izaehler{font-size:12px; color:var(--txt-2); margin-bottom:14px}
.iknoepfe{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.iknoepfe button{
  border:0; border-radius:var(--r); padding:9px 18px; font-size:12.5px;
  font-weight:600; background:var(--gruen); color:#fff; cursor:pointer;
}
.iknoepfe button:hover{background:var(--gruen-dunkel)}
.iknoepfe button:disabled{background:var(--neutral); color:var(--txt-3); cursor:not-allowed}
.iknoepfe button.weg{background:var(--flaeche); color:var(--late); border:1px solid var(--fehler-linie); margin-left:auto}
.iknoepfe button.weg:hover{background:var(--fehler-bg)}

.itab tr[data-lauf]{cursor:pointer}
.itab tr[data-lauf]:hover td{background:var(--flaeche-2)}
.itab tr.gewaehlt td{background:var(--blau-weich)}
.itab td{vertical-align:middle}
.istand{
  font-size:12px; font-weight:600;
  border-radius:var(--r-pille); padding:2px 9px; background:var(--neutral); color:var(--txt-2);
}
.istand.s-offen{background:var(--warn-bg); color:var(--warn-txt)}
.istand.s-geklaert{background:var(--blau-weich); color:var(--blau-text)}
.istand.s-uebernommen{background:var(--ok-bg); color:var(--gruen-dunkel)}
.istand.s-zurueckgerollt{background:var(--flaeche-2); color:var(--txt-3)}

/* ==========================================================================
   Karte und Tourenkorb
   ========================================================================== */
/* Umgekehrt zu den uebrigen Registern: die breite Spalte steht links. Die
   Karte ist hier der Arbeitsbereich, der Korb daneben die Merkliste. */
.wrap.karte{grid-template-columns:1fr minmax(320px,380px)}
.kartenflaeche{height:calc(100vh - 172px); min-height:420px; background:var(--flaeche-2)}
.kartenflaeche .laedt{padding-top:180px}
/* Steht nur da, wenn der Kartenhintergrund fehlt -- ruhig, nicht rot: die
   Punkte und die Tourenplanung stimmen ja, es fehlt nur das Bild darunter. */
.kartenhinweis{margin:8px 10px 2px; font-size:.86em; color:var(--txt-2)}

/* Leaflet bringt eigene Schrift und eigene Ecken mit -- beides wird auf die
   Oberflaeche gezogen, sonst sieht das Popup wie ein Fremdkoerper aus. */
.leaflet-container{font:inherit; font-size:13px; background:var(--flaeche-2)}
.leaflet-popup-content-wrapper{border-radius:var(--r-gross); box-shadow:var(--schatten-hoch)}
.leaflet-popup-content{margin:12px 14px; min-width:200px}
.leaflet-bar a{color:var(--txt)}

/* Der Punkt eines Flugplatzes. Die Farbe kommt aus der Haupt-Treibstoffsorte
   und wird im JavaScript gesetzt; hier steht nur die Form. */
.mpunkt{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--flaeche);
  box-shadow:0 1px 3px rgba(30,44,57,.45);
}
.mpunkt.leer{background:var(--flaeche) !important; border-color:var(--txt-3)}
/* Ein Platz in der Tour traegt seine Nummer und ist deutlich groesser: beim
   Planen zaehlt die Reihenfolge, nicht die Sorte. */
.mpunkt.intour{
  width:26px; height:26px; background:var(--blau) !important; border-color:var(--flaeche);
  color:#fff; font-size:12px; font-weight:700; line-height:22px; text-align:center;
  font-family:"IBM Plex Mono",monospace;
}
.mpop h4{font-size:14px; margin-bottom:2px}
.mpop .sub{font-size:12px; color:var(--txt-3); margin-bottom:8px}
.mpop dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:12.5px; margin-bottom:9px}
.mpop dt{color:var(--txt-3)}
.mpop dd{text-align:right; font-variant-numeric:tabular-nums}
.mpop .hinweis{
  background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:0 var(--r) var(--r) 0;
  padding:7px 10px; font-size:12px; color:var(--warn-txt); margin-bottom:9px;
}
.mpop .knoepfe{display:flex; gap:6px}
.mpop button{
  flex:1; border:0; border-radius:var(--r); padding:7px 10px;
  font-size:12.5px; font-weight:600; background:var(--blau); color:#fff;
}
.mpop button:hover{background:var(--blau-dunkel)}
.mpop button.zweit{background:var(--neutral); color:var(--txt-2)}
.mpop button.zweit:hover{background:var(--neutral-hover)}

/* --- Der Korb --- */
.korb{display:flex; flex-direction:column; max-height:calc(100vh - 172px)}
.korb-reiter{display:flex; border-bottom:1px solid var(--linie); flex:0 0 auto}
.korb-reiter button{
  flex:1; border:0; background:none; padding:12px 8px; font-size:13px; font-weight:600;
  color:var(--txt-2); border-bottom:2px solid transparent;
}
.korb-reiter button[aria-selected="true"]{color:var(--blau-text); border-bottom-color:var(--blau)}
.korb-reiter em{
  font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px;
  background:var(--neutral); color:var(--txt-2); border-radius:var(--r-pille); padding:1px 7px; margin-left:4px;
}
.korb-inhalt{overflow:auto; padding:12px; flex:1 1 auto}

.korb-leer{padding:26px 12px; text-align:center; color:var(--txt-3); font-size:13px; line-height:1.55}

/* Ein Halt in der Tour. Die Nummer links ist die Reihenfolge, sie entspricht
   der Zahl im Kartenpunkt. */
.stopp{
  display:grid; grid-template-columns:26px 1fr auto; gap:2px 9px; align-items:center;
  padding:8px 9px; border-radius:var(--r); border:1px solid var(--linie-2); margin-bottom:6px;
  background:var(--flaeche);
}
.stopp:hover{border-color:var(--linie); box-shadow:var(--schatten)}
.stopp .nr{
  grid-row:1/3; width:26px; height:26px; border-radius:50%; background:var(--blau); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.stopp .nm{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.stopp .meta{grid-column:2; font-size:11.5px; color:var(--txt-3)}
/* Die bestellte Menge ist die einzige Zahl im Halt, die sich aendern laesst --
   sie sieht deshalb anklickbar aus und nicht wie der uebrige Fliesstext. */
.stopp .mengeknopf{
  border:0; background:none; padding:0; font:inherit; font-size:11.5px; font-weight:600;
  font-family:"IBM Plex Mono",monospace; color:var(--blau-text); cursor:pointer;
  border-bottom:1px dashed var(--blau-hell);
}
.stopp .mengeknopf:hover{color:var(--blau-dunkel); border-bottom-style:solid}
.stopp .weg{
  grid-row:1/3; border:0; background:none; color:var(--txt-3); font-size:15px;
  padding:0 4px; line-height:1;
}
.stopp .weg:hover{color:var(--late)}
.stopp .etappe{
  grid-column:1/-1; font-size:11px; color:var(--txt-3); border-top:1px dashed var(--linie-2);
  margin-top:5px; padding-top:5px;
}

.korb-summe{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px; margin:12px 0}
.korb-summe dt{color:var(--txt-3)}
.korb-summe dd{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

/* Die Auslastung des Trucks. Ueber 100 % laeuft der Balken rot -- das ist
   keine Warnung nebenbei, sondern der Grund, die Tour zu teilen. */
.last{height:8px; border-radius:var(--r-pille); background:var(--neutral); overflow:hidden; margin-bottom:4px}
.last i{display:block; height:100%; background:var(--gruen); border-radius:var(--r-pille)}
.last.voll i{background:var(--late)}
.last-text{font-size:11.5px; color:var(--txt-3); margin-bottom:12px}
.last-text.voll{color:var(--late); font-weight:600}

.korb-kapazitaet{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt-2); margin-bottom:12px}
.korb-kapazitaet input{
  width:88px; padding:6px 9px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:12.5px; font-family:"IBM Plex Mono",monospace; text-align:right;
}
.zahlfeld{
  width:110px; padding:8px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; font-family:"IBM Plex Mono",monospace; text-align:right;
}

.korb-knoepfe{display:flex; flex-direction:column; gap:7px}
.korb-knoepfe button{
  border:0; border-radius:var(--r); padding:9px 14px; font-size:12.5px; font-weight:600;
  background:var(--blau); color:#fff;
}
.korb-knoepfe button:hover{background:var(--blau-dunkel)}
.korb-knoepfe button.zweit{background:var(--neutral); color:var(--txt-2)}
.korb-knoepfe button.zweit:hover{background:var(--neutral-hover)}
.korb-knoepfe button.weg{background:var(--flaeche); color:var(--late); border:1px solid var(--fehler-linie)}
.korb-knoepfe button.weg:hover{background:var(--fehler-bg)}
.korb-fuss{font-size:11.5px; color:var(--txt-3); line-height:1.5; margin-top:12px}

/* --- Kunden ohne Ort --- */
.ohne-zeile{
  border:1px solid var(--linie-2); border-radius:var(--r); padding:9px 10px; margin-bottom:6px;
}
.ohne-zeile.offen{border-color:var(--blau); background:var(--blau-weich)}
.ohne-kopf{display:flex; align-items:baseline; gap:8px; cursor:pointer}
.ohne-kopf .nm{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.ohne-kopf .meta{font-size:11.5px; color:var(--txt-3); margin-left:auto; white-space:nowrap}
.vorschlag{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r);
  padding:7px 9px; margin-top:6px; font-size:12.5px;
}
.vorschlag:hover{border-color:var(--blau); background:var(--flaeche)}
.vorschlag b{font-weight:600}
.vorschlag .warum{margin-left:auto; font-size:11px; color:var(--txt-3); white-space:nowrap}
.ohne-hilfe{font-size:11.5px; color:var(--txt-3); margin-top:8px; line-height:1.5}

/* ==========================================================================
   Probelauf des Imports
   ==========================================================================
   Vergleich ohne Einspielen. Die Blöcke stehen nach Dringlichkeit: was fehlt
   und was den Lauf zu Fall brächte zuerst, „steht bereits so da" zuletzt. */
.i-zeitraum .schalter.mit-text{margin-left:14px}
.i-probetext{font-size:12.5px; color:var(--txt-2)}
.probe{margin-top:14px}
.p-fazit{margin:0 0 14px; font-size:13px; color:var(--txt-2); line-height:1.6}
.p-fazit b{color:var(--txt); font-size:14px}
.p-nichts{color:var(--txt-3); font-style:italic}
.p-gruppe{margin-bottom:16px; border-left:4px solid var(--linie); padding-left:12px}
.p-gruppe:last-child{margin-bottom:0}
.p-gruppe h4{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:12.5px; font-weight:700;
}
.p-gruppe h4 em{
  font-style:normal; font-size:11px; background:var(--flaeche-2); color:var(--txt-2);
  border-radius:var(--r-pille); padding:1px 9px;
}
.p-erklaerung{margin:2px 0 7px; font-size:11.5px; color:var(--txt-3)}
.p-warum{font-size:11.5px; color:var(--txt-3)}
.p-fehlt{border-left-color:var(--blau)}
.p-fehlt h4{color:var(--blau-text)}
.p-konflikt{border-left-color:var(--late)}
.p-konflikt h4{color:var(--late)}
.p-ergaenzt{border-left-color:var(--warn)}
.p-ergaenzt h4{color:var(--warn)}
.p-vorhanden{border-left-color:var(--linie)}
.p-vorhanden h4{color:var(--txt-3)}

/* ==========================================================================
   Anlagen am Flugplatz
   ==========================================================================
   Links dieselbe Liste wie ueberall, rechts gestapelte Karten -- eine je
   Anlage. Die Ampel ist das einzige neue Gestaltungsmittel: sie muss aus drei
   Metern Abstand lesbar sein, deshalb Farbe *und* Wort, nie Farbe allein. */

.ampelpunkt{
  width:9px; height:9px; border-radius:50%; display:inline-block;
  margin-right:7px; flex:0 0 auto; border:1px solid rgba(0,0,0,.12);
}
.am-ok{background:var(--ok)}
.am-bald{background:var(--warn)}
.am-ueberfaellig{background:var(--late)}
.am-unbekannt{background:var(--flaeche); border-color:var(--txt-3)}

#a-list .row .nm{display:flex; align-items:center}

/* ---------- Die Anlagenkarte ---------- */
.anl{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten);
  margin-bottom:14px; overflow:hidden;
}
.anl:last-child{margin-bottom:0}
.anlkopf{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--linie-2); background:var(--flaeche-2);
}
.anlkopf b{font-size:15px}
.anlspacer{flex:1}
.anlart{
  font-size:12px; font-weight:600;
  color:var(--blau-text); background:var(--blau-weich); border-radius:var(--r-pille);
  padding:3px 9px;
}
.anlzustand{font-size:11.5px; color:var(--txt-3)}
.anlzustand.still{color:var(--late); font-weight:600}
.anlkopf button{
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r);
  padding:5px 11px; font-size:12px; color:var(--txt-2);
}
.anlkopf button:hover{border-color:var(--blau); color:var(--blau-text)}
.anlkopf button.weg:hover{border-color:var(--late); color:var(--late)}

/* ---------- Faelligkeiten ---------- */
.afaelligkeiten{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px; padding:13px 16px; border-bottom:1px solid var(--linie-2);
}
.afaellig{
  border:1px solid var(--linie); border-left-width:4px; border-radius:var(--r);
  padding:7px 10px; font-size:12px; line-height:1.45;
}
.afaellig b{display:block; font-size:12.5px}
.afaellig .aletzte{display:block; color:var(--txt-3); font-size:11px}
.afaellig.am-ok{border-left-color:var(--ok); background:transparent}
.afaellig.am-bald{border-left-color:var(--warn); background:var(--warn-bg)}
.afaellig.am-ueberfaellig{border-left-color:var(--late); background:var(--fehler-bg)}
.afaellig.am-unbekannt{border-left-color:var(--txt-3); background:transparent}
/* Der Punkt faerbt sonst auch den Kasten -- hier soll nur der Rand tragen. */
.afaellig.am-ok,.afaellig.am-bald,.afaellig.am-ueberfaellig,.afaellig.am-unbekannt{
  color:var(--txt);
}
.ahinweis{
  padding:11px 16px; font-size:12px; color:var(--txt-3);
  border-bottom:1px solid var(--linie-2);
}

/* ---------- Stammfelder ---------- */
.afelder{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:9px 16px; padding:13px 16px;
}
.af span{
  display:block; font-size:12px;
  color:var(--txt-3);
}
.af b{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.abem{
  padding:0 16px 13px; font-size:12.5px; color:var(--txt-2); white-space:pre-wrap;
}

/* ---------- Abschnitte in der Karte ---------- */
.asec{padding:13px 16px; border-top:1px solid var(--linie-2)}
.asec h4{
  display:flex; align-items:center; gap:10px; margin:0 0 9px;
  font-size:12px; color:var(--txt-3);
  font-weight:600;
}
.asec .asum{font-weight:400; text-transform:none; letter-spacing:0; font-size:11.5px}
.asec h4 .knopf-klein{margin-left:auto}
.knopf-klein{
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r);
  padding:4px 10px; font-size:11.5px; font-weight:600; color:var(--txt-2);
  text-transform:none; letter-spacing:0;
}
.knopf-klein:hover{border-color:var(--blau); color:var(--blau-text)}
.leer{font-size:12px; color:var(--txt-3)}

/* ---------- Tanks ---------- */
.atanks{width:100%; border-collapse:collapse; font-size:12.5px}
.atanks th{
  text-align:left; font-size:12px;
  color:var(--txt-3); font-weight:600; padding:0 8px 5px 0; border-bottom:1px solid var(--linie);
}
.atanks td{padding:6px 8px 6px 0; border-bottom:1px solid var(--linie-2); vertical-align:middle}
.atanks tr:last-child td{border-bottom:0}
.atanks .tnr{width:34px; color:var(--txt-3); font-variant-numeric:tabular-nums}
.atanks .mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.atanks .tat{text-align:right; white-space:nowrap}
.atanks .tat button{
  border:0; background:transparent; color:var(--txt-3); font-size:11.5px; padding:2px 5px;
}
.atanks .tat button:hover{color:var(--blau-text)}
.atanks .tat button.weg:hover{color:var(--late)}
.atanks .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;
}

/* ---------- Pruefhistorie ---------- */
.apruefungen{display:flex; flex-direction:column; gap:8px}
.apruef{
  border:1px solid var(--linie); border-radius:var(--r); padding:8px 11px;
  position:relative;
}
.pkopf{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:12.5px}
.pkopf .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.pbis{font-size:11.5px; color:var(--txt-2)}
.ptank{font-size:11px; color:var(--txt-3)}
.perg{font-size:11px; font-weight:600; border-radius:var(--r-pille); padding:1px 8px}
.erg-gut{background:var(--ok-bg); color:var(--ok)}
.erg-schlecht{background:var(--fehler-bg); color:var(--late)}
.pmeta{font-size:11.5px; color:var(--txt-3); margin-top:2px}
.pmeta a{color:var(--blau-text)}
.pbem{font-size:12px; color:var(--txt-2); margin-top:4px; white-space:pre-wrap}
.ptat{position:absolute; top:6px; right:8px; display:flex; gap:4px; opacity:0}
.apruef:hover .ptat,.apruef:focus-within .ptat{opacity:1}
.ptat button{border:0; background:transparent; color:var(--txt-3); font-size:11.5px; padding:2px 5px}
.ptat button:hover{color:var(--blau-text)}
.ptat button.weg:hover{color:var(--late)}

/* ---------- Formulare ---------- */
.anlform select,.unterform select,.anlform textarea,.unterform input,.unterform textarea,
.t-haltform select,.t-bestform select{
  width:100%; border:1px solid var(--linie); border-radius:var(--r);
  padding:7px 9px; font:inherit; font-size:13px; background:var(--flaeche); color:var(--txt);
}
.unterform label{
  font-size:12px; color:var(--txt-3);
  display:block; margin-bottom:3px;
}
.unterform{
  margin-top:10px; padding:11px 12px; border:1px dashed var(--blau);
  border-radius:var(--r); background:var(--blau-weich); display:flex;
  flex-direction:column; gap:8px;
}
.unterform .cfoot{display:flex; gap:8px}
.unterform .cfoot button{border:0; border-radius:var(--r); padding:7px 14px; font-size:12.5px; font-weight:600}
.unterform .save{background:var(--blau); color:#fff}
.unterform .cancel{background:var(--neutral-hover); color:var(--txt-2)}
.gridzwei{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.gridvier{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.formkopf{
  margin:6px 0 0; font-size:12px;
  color:var(--txt-3);
}
.formhinweis{margin:0; font-size:11.5px; color:var(--txt-3)}

/* Sorte und Fassungsvermögen im Anlagenformular: eine Zeile je Tank. */
.sortenzeile{display:grid; grid-template-columns:1fr 220px 32px; gap:8px; margin-bottom:6px}
.sortenzeile .sf-weg{
  border:1px solid var(--linie); background:var(--flaeche); border-radius:var(--r);
  color:var(--txt-3); font-size:13px; line-height:1;
}
.sortenzeile .sf-weg:hover{border-color:var(--late); color:var(--late)}
.sortenfuss{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px}
.dkopfknoepfe{margin-left:auto; display:flex; gap:8px}
.a-meldung{
  margin-bottom:12px; padding:8px 13px; border-radius:var(--r);
  background:var(--ok-bg); color:var(--ok); font-size:12.5px; font-weight:600;
}
.upfeld.klein{padding:12px; margin-top:4px}
.upfeld.klein .up-haupt{font-size:12.5px}

/* ==========================================================================
   Truckliste
   ==========================================================================
   Links der Monat mit seinen Fahrten, rechts die gewählte Fahrt mit ihren
   Halten. Die Farben der Stände sind dieselben wie die der Ampeln anderswo:
   grün heißt erledigt, blau heißt in Arbeit, grau heißt zurückgelegt. */

.monatswahl{display:flex; align-items:center; gap:4px}
.monatswahl button{
  width:28px; height:30px; border:1px solid var(--linie); background:var(--flaeche);
  border-radius:var(--r); color:var(--txt-2); font-size:15px; line-height:1;
}
.monatswahl button:hover{border-color:var(--blau); color:var(--blau-text)}
.monatswahl select{
  padding:6px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13px; background:var(--flaeche); color:var(--txt);
}

/* ---------- Monatsübersicht ---------- */
.t-monat{
  border:1px solid var(--linie); border-radius:var(--r); background:var(--flaeche-2);
  padding:11px 13px; margin-bottom:10px;
}
.t-mkopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.t-mkopf b{font-size:14px}
.t-mkopf .knopf-klein{margin-left:auto}
.t-schloss{font-size:11.5px; color:var(--txt-3)}

.t-kennzahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px 12px;
}
.t-kennzahlen b{display:block; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums}
.t-kennzahlen span{
  display:block; font-size:12px;
  color:var(--txt-3);
}
.t-kennzahlen.gross{padding:13px 16px; border-bottom:1px solid var(--linie-2)}
.t-kennzahlen.gross b{font-size:16px}

.t-sorten{
  display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:9px;
  padding-top:8px; border-top:1px solid var(--linie); font-size:11.5px; color:var(--txt-2);
}
.t-sorten .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px;
}

/* ---------- Eine Fahrt in der Liste ---------- */
.t-stand{
  font-size:11.5px; font-weight:600;
  border-radius:var(--r-pille); padding:1px 7px; margin-right:6px;
}
.s-plan{background:var(--blau-weich); color:var(--blau-text)}
.s-fahr{background:var(--ok-bg); color:var(--ok)}
.s-storno{background:var(--neutral); color:var(--txt-3)}
.t-schlosszeichen{margin-left:5px; font-size:11px}
.t-offen{
  margin-left:6px; font-size:11px; font-weight:600; color:var(--warn);
}
.t-haltekurz{
  grid-column:1/-1; font-size:11px; color:var(--txt-3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Die Halte der Fahrt ---------- */
.t-halte .t-kundelink{
  border:0; background:transparent; padding:0; font:inherit; font-size:12.5px;
  font-weight:600; color:var(--txt); text-align:left;
}
.t-halte .t-kundelink:hover{color:var(--blau-text); text-decoration:underline}
.t-halte .t-plz{display:block; font-size:10.5px; color:var(--txt-3)}
/* Die Zollnummer gehört zum Platz und steht deshalb unter seinem Namen --
   eine eigene Spalte wäre die elfte in einer ohnehin breiten Tabelle. */
.t-halte .t-zoll{font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--txt-2)}
.t-halte .t-hinweis{color:var(--warn); cursor:help}
/* Ein Halt ohne tatsächliche Menge ist das, was die Fahrt aufhält. */
.t-halte tr.t-ohne td{background:var(--flaeche)af0}
.t-abw{margin-left:5px; font-size:10.5px; font-weight:600}
.t-abw.minus{color:var(--late)}
.t-abw.plus{color:var(--ok)}
.t-erbt{color:var(--txt-3)}
.t-bez{font-size:10.5px; font-weight:600; border-radius:var(--r-pille); padding:1px 7px}
.t-bez.ja{background:var(--ok-bg); color:var(--ok)}
.t-bez.nein{background:var(--fehler-bg); color:var(--late)}

.t-gebucht{
  margin:0 16px 12px; padding:8px 12px; border-radius:var(--r);
  background:var(--ok-bg); color:var(--ok); font-size:12px;
}
.t-gesperrt{font-size:11.5px; color:var(--txt-3)}
.t-haltform{
  margin-bottom:12px; padding:11px 12px; border:1px dashed var(--blau);
  border-radius:var(--r); background:var(--blau-weich);
}

/* ---------- Bestellvorrat ---------- */
.t-bestkopf{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.t-bestkopf .knopf-klein{margin-left:auto}
.t-besthinweis{margin:0 0 10px; font-size:11.5px; color:var(--txt-3)}
.t-bestform{
  margin-bottom:12px; padding:11px 12px; border:1px dashed var(--blau);
  border-radius:var(--r); background:var(--blau-weich);
}
/* Eine eingeplante Bestellung steht blasser da: sie wartet nicht mehr. */
.row.t-best.geplant{opacity:.62}
.t-eingeplant{margin-left:6px; color:var(--blau-text)}
.t-besttat{grid-column:1/-1; display:flex; gap:6px; margin-top:6px}

/* ==========================================================================
   Bestellungen im Kundenblatt
   ==========================================================================
   Der Abschnitt steht ueber den Lieferungen: darueber, was kommt, darunter,
   was war. Jede Bestellung ist eine Karte, und die zu ihr gedruckten
   Bestaetigungen haengen eingerueckt darunter -- sie gehoeren zur Bestellung
   und sind kein eigener Gegenstand. */
.kb-best{
  border:1px solid var(--linie); border-radius:var(--r);
  padding:10px 12px; margin-bottom:8px; background:var(--flaeche);
}
/* Was geliefert oder zurueckgezogen ist, tritt zurueck -- gearbeitet wird an
   dem, was noch offen steht. Sichtbar bleibt es trotzdem. */
.kb-best.stand-erledigt,
.kb-best.stand-storniert{opacity:.64}
.kb-bestkopf{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kb-bestkopf .dot{
  width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;
}
.kb-stand{
  font-size:12px; font-weight:600;
  padding:2px 8px; border-radius:var(--r-pille);
  background:var(--flaeche-2); color:var(--txt-2);
}
.kb-bestmeta{margin-top:3px; font-size:11.5px; color:var(--txt-3)}
.kb-besttat{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
/* Der Knopf, um den es in diesem Abschnitt geht. Einer je Bestellung, und er
   soll sich von „Ändern" und „Entfernen" abheben. */
.knopf-klein.stark{border-color:var(--blau); color:var(--blau-text); font-weight:600}
.knopf-klein.stark:hover{background:var(--blau-weich)}

/* Ein gedrucktes Blatt. */
.kb-blatt{
  display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px;
  align-items:baseline; margin-top:8px; padding:7px 10px;
  border-left:3px solid var(--gruen); background:var(--flaeche-2);
  border-radius:0 var(--r) var(--r) 0; font-size:12.5px;
}
/* Ein widerrufenes Blatt bleibt lesbar und verliert nur seine Farbe: es ist
   hinfaellig, aber es hat es gegeben, und beim Kunden liegt es noch. */
.kb-blatt.widerrufen{border-left-color:var(--txt-3); opacity:.7}
.kb-blatt.widerrufen .kb-nr{text-decoration:line-through}
.kb-nr{font-size:12px; font-weight:600; color:var(--txt)}
.kb-blattwerte{color:var(--txt-2)}
.kb-blattfuss{grid-column:1/3; font-size:11px; color:var(--txt-3)}
.kb-blatttat{grid-row:1/3; grid-column:3; display:flex; gap:6px; align-items:center}
.kb-blatttat .knopf-klein{text-decoration:none}
.kb-blattwarnung{
  grid-column:1/-1; margin-top:5px; font-size:11.5px; color:var(--fehler-txt);
  background:var(--fehler-bg); border-radius:var(--r); padding:5px 8px;
}

/* Der Druckdialog ist breiter als die uebrigen: er zeigt das Anschriftfeld
   und zwei Felder nebeneinander. */
.dlg.weit{width:min(560px,calc(100vw - 32px))}
.dlg select,
.dlg textarea{
  padding:9px 11px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:14px; background:var(--flaeche); width:100%;
}
.dlg textarea{resize:vertical; min-height:44px}
.dlg select:focus,
.dlg textarea:focus{
  outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich);
}
.dlg label:not(:first-of-type){margin-top:14px}
/* Das Anschriftfeld so, wie es auf dem Blatt steht -- wer es hier liest,
   sieht, was gleich im Fenster des Umschlags erscheint. */
.druck-anschrift{
  padding:9px 11px; border:1px solid var(--linie); border-radius:var(--r);
  background:var(--flaeche-2); font-size:13px; line-height:1.45;
}
.druck-zwei{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.druck-zwei label{margin-top:0}

/* ==========================================================================
   Benutzerverwaltung
   ==========================================================================
   Nur fuer Admins, und selten benutzt: ein neuer Zugang kommt vielleicht
   einmal im Jahr dazu. Deshalb keine eigene Bildsprache, sondern dieselbe
   Liste und dasselbe Formular wie in den Stammdaten -- wer einmal einen
   Kunden angelegt hat, findet sich hier ohne Erklaerung zurecht. */
.b-rolle{
  font-size:12px; font-weight:600;
  padding:3px 8px; border-radius:var(--r-pille); white-space:nowrap;
  background:var(--flaeche-2); color:var(--txt-2);
}
/* Der Admin faellt auf, der Regelfall nicht: wer alle Rechte hat, soll in
   einer Liste von zehn Zeilen ins Auge springen. */
.b-rolle.ist-admin{background:var(--blau-weich); color:var(--blau-text)}
.b-rolle.gesperrt{background:var(--fehler-bg); color:var(--late)}

/* Eine gesperrte Zeile bleibt lesbar, tritt aber zurueck. Nicht ausblenden:
   nachsehen zu koennen, ob wirklich zu ist, was zu sein soll, ist der halbe
   Zweck dieser Liste. */
.row.b-gesperrt{opacity:.6}
.row.b-ich .nm::after{
  content:"du"; margin-left:7px; font-size:11.5px; font-weight:600; color:var(--txt-3);
}
.b-zeile-marken{grid-column:2; grid-row:1/3; justify-self:end; align-self:center;
  display:flex; gap:5px; align-items:center}

/* Auswahllisten im Formular. `.cform` kannte bisher nur Eingabefelder und
   Textbereiche -- die Rolle ist das erste Auswahlfeld darin. */
.cform select{
  width:100%; padding:8px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13.5px; background:var(--flaeche); color:var(--txt);
}
.cform select:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}

/* Die Angaben, die feststehen: Adresse, Anlage, letzte Anmeldung. Sie stehen
   als Text und nicht als gesperrtes Eingabefeld -- ein graues Feld sieht aus
   wie etwas, das sich unter Umstaenden doch aendern liesse. */
.b-fest{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:12.5px}
.b-fest dt{color:var(--txt-3)}
.b-fest dd{margin:0; color:var(--txt-2); overflow-wrap:anywhere}

.b-knoepfe{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.b-knoepfe button{
  border:1px solid var(--linie); background:var(--flaeche); color:var(--txt-2);
  border-radius:var(--r); padding:8px 14px; font-size:12.5px; font-weight:600;
}
.b-knoepfe button:hover{border-color:var(--blau); color:var(--blau-text)}
.b-knoepfe button.sperren:hover{border-color:var(--late); color:var(--late)}
.b-fuss{margin-top:14px; font-size:12px; color:var(--txt-3); line-height:1.5}

/* Passwortwechsel unter „Mein Konto". Klappt unter der Zeile auf, statt ein
   Fenster zu oeffnen: es ist kein Vorgang, der den Blick auf alles Uebrige
   verstellen muesste. */
.pwform{display:flex; flex-direction:column; gap:8px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--linie-2)}
.pwform label{font-size:12px;
  color:var(--txt-3); display:block; margin-bottom:3px}
.pwform input{
  width:100%; padding:8px 10px; border:1px solid var(--linie); border-radius:var(--r);
  font:inherit; font-size:13.5px; background:var(--flaeche);
}
.pwform input:focus{outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich)}
.pwform .cfoot{display:flex; gap:8px; margin-top:3px; align-items:center}
.pwform .cfoot button{border:0; border-radius:var(--r); padding:8px 16px;
  font-size:12.5px; font-weight:600}
.pwform .save{background:var(--blau); color:#fff}
.pwform .save:hover{background:var(--blau-dunkel)}
.pwform .cancel{background:var(--neutral); color:var(--txt-2)}
.pwform .cancel:hover{background:var(--neutral-hover)}
.pw-fehler{
  background:var(--fehler-bg); border:1px solid var(--fehler-linie); color:var(--fehler-txt);
  border-radius:var(--r); padding:8px 11px; font-size:12.5px;
}

/* ==========================================================================
   Benachrichtigungen
   ==========================================================================
   Ein Stapel Karten statt einer Tabelle: eine Benachrichtigung ist keine
   Zeile in einem Bestand, sondern eine Sache, um die sich jemand kuemmern
   soll -- und sie hat mit Text, Termin und Zustaendigen mehr zu sagen, als in
   eine Zeile passt.

   Die Dringlichkeit traegt der linke Rand und nicht die Flaeche: farbige
   Flaechen uebereinandergestapelt lesen sich als Warnung an sich, und dann
   sieht ueberfaellig aus wie demnaechst. Farbe steht ausserdem nie allein --
   ueber jeder Gruppe steht ihr Wort. */

.posteingang{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--schatten);
  padding:var(--pad-sec);
}
.n-gruppe{
  font-size:12.5px; font-weight:600;
  color:var(--txt-3); margin:18px 0 10px; display:flex; align-items:center; gap:8px;
}
.n-gruppe:first-child{margin-top:0}
.n-gruppe em{
  font-style:normal; font-size:11px; background:var(--flaeche-2); color:var(--txt-2);
  border-radius:var(--r-pille); padding:2px 8px;
}
.n-gruppe.ueberfaellig{color:var(--late)}
.n-gruppe.heute{color:var(--warn)}

.nachricht{
  display:flex; align-items:flex-start; gap:12px; padding:11px 14px; margin-bottom:8px;
  background:var(--flaeche-2); border-radius:var(--r); border-left:3px solid var(--linie);
}
.nachricht:last-child{margin-bottom:0}
.dr-ueberfaellig{border-left-color:var(--late); background:var(--fehler-bg)}
.dr-heute{border-left-color:var(--warn); background:var(--warn-bg)}
.dr-bald{border-left-color:var(--blau-hell)}
.dr-spaeter{border-left-color:var(--linie)}
/* Erledigtes bleibt lesbar, tritt aber zurueck -- es ist Verlauf, keine
   Arbeit. Ausgegraut und nicht ausgeblendet: nachsehen zu koennen, wer wann
   abgehakt hat, ist der halbe Zweck der Liste. */
.nachricht.fertig{background:transparent; border-left-color:var(--linie-2); opacity:.72}

.n-marke{font-size:15px; line-height:1.3; flex:0 0 auto; filter:grayscale(.15)}
.n-text{flex:1 1 auto; min-width:0}
.n-titel{font-size:13.5px; font-weight:600; color:var(--txt); overflow-wrap:anywhere}
.nachricht.fertig .n-titel{text-decoration:line-through; color:var(--txt-2)}
.n-meta{font-size:12px; color:var(--txt-2); margin-top:2px}
.n-fertig{font-size:11.5px; color:var(--txt-3); margin-top:3px}

.n-termin{
  flex:0 0 auto; text-align:right; font-size:12.5px; color:var(--txt-2);
  display:flex; flex-direction:column; gap:1px; white-space:nowrap;
}
.n-termin b{font-weight:600; color:var(--txt)}
.n-termin span{font-size:11.5px; color:var(--txt-3)}
.dr-ueberfaellig .n-termin span{color:var(--late); font-weight:600}

.n-knoepfe{flex:0 0 auto; display:flex; gap:4px; align-items:center}
.n-knoepfe button{
  border:1px solid var(--linie); background:var(--flaeche); color:var(--txt-2);
  border-radius:var(--r); padding:5px 9px; font-size:12px; font-weight:600;
}
.n-knoepfe button:hover{border-color:var(--blau); color:var(--blau-text)}
.n-knoepfe .n-erledigt:hover{border-color:var(--gruen); color:var(--gruen-dunkel); background:var(--ok-bg)}
.n-knoepfe .del:hover{border-color:var(--late); color:var(--late)}
.n-knoepfe .n-hin{font-size:14px; line-height:1; padding:5px 8px}

/* ---------- Das Formular ----------
   Steht an der Stelle der Karte, die es bearbeitet, und im Kundenblatt unter
   der Liste. Dieselbe Form an beiden Orten. */
.wv-form{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:12px 14px; margin-bottom:10px; display:flex; flex-direction:column; gap:9px;
}
.wv-form input[name="text"]{
  border:1px solid var(--linie); border-radius:var(--r); padding:8px 11px;
  font:inherit; font-size:13px; width:100%;
}
.wv-form label{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--txt-2);
}
.wv-form input[type="date"],.wv-form input[type="time"],.wv-form select{
  border:1px solid var(--linie); border-radius:var(--r); padding:6px 9px;
  font:inherit; font-size:12.5px; color:var(--txt); background:var(--flaeche);
}
.wv-form input:focus,.wv-form select:focus{
  outline:none; border-color:var(--blau-hell); box-shadow:0 0 0 3px var(--blau-weich);
}
.wv-zeile{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.wv-platz select{flex:1 1 220px}
.wv-personen{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.wv-personen .hint{font-size:12px; color:var(--txt-2); margin-right:2px}
/* Wie die Filterchips, aber ohne deren Kreuz: hier wird ausgewaehlt und
   nicht gefiltert -- ein "entfernen"-Zeichen waere das falsche Versprechen. */
.person{
  border:1px solid var(--linie); background:var(--flaeche); color:var(--txt-2);
  border-radius:var(--r-pille); padding:4px 11px; font-size:12px; font-weight:600;
}
.person:hover{border-color:var(--blau); color:var(--blau-text)}
.person[aria-pressed="true"]{background:var(--blau); border-color:var(--blau); color:#fff}
.person[aria-pressed="true"]:hover{background:var(--blau-dunkel); color:#fff}
.wv-knoepfe{display:flex; gap:8px}
.wv-knoepfe button{
  background:var(--gruen); color:#fff; border-radius:var(--r); padding:8px 15px;
  font-size:13px; font-weight:600;
}
.wv-knoepfe button:hover{background:var(--gruen-dunkel)}
.wv-knoepfe .cancel{background:var(--neutral); color:var(--txt-2)}
.wv-knoepfe .cancel:hover{background:var(--neutral-hover)}

/* Im Kundenblatt stehen die Karten enger und ohne eigene Flaeche -- sie
   liegen dort schon auf einer. */
#wiedervorlagen .nachricht{background:var(--flaeche-2)}
#wiedervorlagen .nachricht.fertig{background:transparent}
#wiedervorlagen .n-gruppe{font-size:11px; margin:14px 0 8px}

/* ==========================================================================
   Schmale Fenster
   ========================================================================== */
@media (max-width:1100px){
  .kpis{order:3}
  .konto-text{display:none}
}
@media (max-width:820px){
  :root{--schiene-breit:60px}
  .schiene{padding-top:10px}
  .marke{width:36px; height:36px; border-radius:10px; font-size:13px; margin-bottom:10px}
  .tabs button span{display:none}
  .tabs button{padding:11px 0}

  .top{padding:10px 14px; gap:10px 16px}
  .brand h1{font-size:15px}
  .ansicht{padding:12px}
  .seitenkopf h2{font-size:20px}

  .wrap{grid-template-columns:1fr}
  .wrap.karte{grid-template-columns:1fr}
  .kartenflaeche{height:56vh; min-height:300px}
  .korb{max-height:none}
  .list{max-height:360px}
  /* Ein Rasterelement bekommt von sich aus min-width:auto und kann daher nicht
     unter seine Mindestbreite schrumpfen. Ohne das schob die Kundenliste die
     ganze Seite quer aus dem Bild (422 statt 375 Pixel). */
  .wrap>.panel{min-width:0}
  .row{min-width:0}
  .row .nm{overflow-wrap:anywhere}
  /* Die Lieferhistorie darf fuer sich scrollen, statt die Seite zu weiten. */
  .fuel table{display:block; overflow-x:auto}
  /* Dasselbe fuer die Rechnungstabelle: acht Spalten passen nicht auf ein
     Telefon, und die Seite darf davon nicht quer aus dem Bild laufen. */
  .rechnungen .sec-block{min-width:0}
  .import .sec-block{min-width:0}
  .rtab{display:block; overflow-x:auto; white-space:nowrap}
  /* Dreizehn Spalten passen erst recht nicht -- der Rahmen rollt, die Seite
     bleibt stehen. */
  .stats-view .sec-block{min-width:0}
  /* Auf schmalen Geraeten steht ueber den Saeulen kein Platz mehr fuer die
     Monatsdifferenz; sie steht ohnehin in der Tabelle darunter. */
  .vval{display:none}
  .vchart{gap:4px; height:180px}
  .vpaar{gap:2px}
  .v-leiste .selects{margin-left:0}
  .ineu .grid2{grid-template-columns:1fr}
  /* Vier Felder nebeneinander sind auf einem Telefon vier unlesbare Spalten. */
  .gridvier{grid-template-columns:1fr 1fr}
  .gridzwei{grid-template-columns:1fr}
  .druck-zwei{grid-template-columns:1fr}
  .sortenzeile{grid-template-columns:1fr 110px 32px}
  .atanks{display:block; overflow-x:auto; white-space:nowrap}
  /* Zehn Spalten passen auf kein Telefon -- die Halte rollen fuer sich. */
  .t-halte{display:block; overflow-x:auto; white-space:nowrap}
  .monatswahl{order:2}
  .anl{min-width:0}
  .iaktionen button.weg{margin-left:0}
  .stat{border-right:0; border-bottom:1px solid var(--linie-2)}
  /* Termin und Knoepfe rutschen unter den Text -- nebeneinander bliebe fuer
     den Text eine Spalte von zwei Woertern. */
  .nachricht{flex-wrap:wrap}
  .n-text{flex:1 1 100%; order:1}
  .n-marke{order:0}
  .n-termin{order:2; text-align:left; flex-direction:row; gap:8px; align-items:baseline}
  .n-knoepfe{order:3; margin-left:auto}
  .wv-zeile{gap:8px}
}