/* ══════════════════════════════════════════════════════════════
   Bausteine

   Die Teile, aus denen die Oberfläche besteht. Abgelesen aus
   docs/DESIGN/, umgeschrieben auf Tokens: Hier steht kein einziger
   Farbwert und keine Schriftfamilie, nur Verweise.

   Warum eine eigene Datei und nicht je Seite: Ein Knopf muss auf
   jeder Seite derselbe sein. Solange jede Seite ihren eigenen baut,
   sind es siebzehn Knöpfe, und beim nächsten Umbau werden es
   siebzehn Baustellen.

   Wer etwas Neues braucht, baut es hier und nicht in der Seite.
   Anzusehen sind alle Bausteine unter /marke.html.

   Reihenfolge im Kopf: marke.css (Werte) → schrift.css (Dateien) →
   bausteine.css (Teile) → der eigene Stil der Seite. Was die Seite
   selbst setzt, gewinnt also weiterhin.
   ══════════════════════════════════════════════════════════════ */

/* ── Grundlage ────────────────────────────────────────────────── */

/* Diese Oberflaeche ist hell, und sie sagt es auch.

   Ohne die Angabe steht nirgends, welches Schema die Seite bedient.
   Der Browser malt dann seine eigenen Teile - Bildlaufleisten,
   Auswahllisten, das Feld fuer ein Datum - nach dem Schema des
   Geraets. Auf einem Handy mit dunklem Systemschema sitzt so ein
   dunkles Feld mitten in einer hellen Seite, mit dunkler Schrift
   darin.

   Gemessen am 21. August: Chrome dreht von sich aus nichts um, auch
   mit prefers-color-scheme: dark nicht. Die Zusage steht hier
   trotzdem, denn ein Browser muss sich nicht so verhalten, und ein
   erzwungener Dunkelmodus tut es nicht.

   Ein dunkles Schema gibt es nicht und wird hier auch nicht
   behauptet. Kaeme eines, stuende hier "light dark" und in
   marke.css eine zweite Palette. */
:root { color-scheme: light; }

.b-seite {
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  line-height: var(--zeile-hoehe);
}

/* Kleine Beschriftung in Versalien, dicktengleich, gesperrt.
   Sie steht über Werten und Abschnitten und ist absichtlich klein:
   Was darunter steht, ist die Aussage. */
.b-versal {
  font-family: var(--schrift-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-2);
}

/* Jede Zahl, die etwas bedeutet, steht dicktengleich. In einer
   Liste stehen die Stellen dann untereinander, und ein Zahlendreher
   fällt auf. */
.b-zahl {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Kopfbereich am Handy ─────────────────────────────────────── */

.b-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px 0;
}
/* Das Logo. Groesser als frueher (38 px), weil es rund ist und
   ein rundes Zeichen bei gleicher Hoehe kleiner wirkt als ein
   breites: Die Schrift darin war bei 38 px nicht mehr zu lesen.

   object-fit:contain und kein Beschnitt: Die Datei zeichnet den
   Kreis selbst auf durchsichtigem, quadratischem Grund. Ein
   border-radius waere hier falsch - er schnitte an der Kante des
   Quadrats und nicht am Kreis. */
.b-kopf-logo { height: 46px; width: auto; max-width: 150px; object-fit: contain; }

/* Das Logo fuehrt zur Startseite, und "/" entscheidet, zu
   welcher - am Handy start-mobil.html, am Rechner
   buero-lager.html. Dieselbe Stelle wie beim Ziel nach der
   Anmeldung; zwei Abschriften derselben Regel liefen auseinander.

   Die eigenen Regeln sind noetig, weil .b-seitenleiste a jeden
   Verweis darin zu einem Navigationseintrag macht: mit Polster,
   halber Deckung und Ecken. */
.b-logo-weg {
  display: inline-flex; align-items: center;
  padding: 0; opacity: 1; background: none;
  border-radius: 0; flex: none;
}
/* Und dasselbe noch einmal, spezifischer.

   .b-seitenleiste a wiegt 0-1-1, .b-logo-weg nur 0-1-0 - die
   Zuruecksetzung verlor also genau dort, wo sie gebraucht wurde.
   Gemessen am 22.08.2026: Das Logo stand 13 Punkte zu weit rechts
   (29 statt 16) und mit 62 Prozent Deckung, also blass. Auf der
   Startseite, wo es keinen Verweis traegt, sass es richtig - und
   dieselbe Marke sah auf zwei Seiten verschieden aus.

   display gehoert dazu, und das war der zweite Durchgang: Ohne
   die Zeile gewinnt display:block aus derselben Regel, das Bild
   darin wird wieder ein Zeileninhalt und bekommt seine
   Grundlinienluecke - sechs Punkte, um die die Navigation nach
   unten rutschte. Auch das erst in der Messung aufgefallen. */
.b-seitenleiste .b-logo-weg {
  display: inline-flex; align-items: center;
  padding: 0; opacity: 1; background: none; border-radius: 0;
}
.b-logo-weg:hover,
.b-seitenleiste .b-logo-weg:hover { opacity: .82; }
.b-logo-weg:focus-visible { outline: 2px solid var(--farbe-fokus); outline-offset: 3px; }

/* ── Vor der Anmeldung ─────────────────────────────────────────
   login.html und produkt.html zeigen das Logo am groessten: ueber
   dem Namen, in der Mitte der Karte. Beide hatten dafuer eine
   eigene Klasse mit eigenen Massen - 170 mal 52, links buendig.
   Das war ein dritter Stil neben Leiste und Kopfzeile.

   img davor, damit die Regel die seiteneigene .logo schlaegt: die
   wiegt 0-1-0, diese 0-1-1. Ohne das gewinnt die Seite, weil ihr
   eigener Stil nach bausteine.css steht. */
img.b-logo-gross {
  display: block; margin: 0 auto 20px;
  height: 120px; width: auto;
  /* max-height und max-width muessen ausdruecklich weg. Die
     seiteneigene .logo setzt beide auf 170 mal 52, und eine
     Obergrenze schlaegt eine Hoehe unabhaengig davon, wer
     spezifischer ist: 120 hoch mit hoechstens 52 hoch sind 52.
     Gemessen am 23.08.2026 - die Regel stand da und wirkte nicht. */
  max-height: none; max-width: 100%;
  object-fit: contain;
}

/* ── Die alten Seiten ──────────────────────────────────────────
   Sie tragen ihre eigene Kopfleiste und zeigten darin bis zum
   23.08.2026 das App-Symbol: quadratisch auf 30 Punkte
   beschnitten, mit runden Ecken. Das ist das Bild fuer den
   Startbildschirm und nicht die Marke.

   kopf-ergaenzen.js setzt dort jetzt den Baustein ein. Damit er
   sich durchsetzt, braucht es diese Zeile: die seiteneigene
   Regel heisst ".logo img" und wiegt 0-1-1, der Baustein allein
   0-1-0. Sie stuende sonst da und wuerde ueberstimmt.

   Die 46 Punkte sind die Kopfzeilengroesse. Die Leiste dieser
   Seiten ist 58 Punkte hoch, es passt. */
.topbar .logo img.b-kopf-logo,
.logo img.b-kopf-logo {
  height: 36px; width: auto; border-radius: 0;
  /* flex: none, sonst schrumpft es.

     Die alte Kopfleiste ist eine Flex-Zeile, und ein Bild darin
     gibt ohne diese Zeile nach, sobald es eng wird. Mit
     object-fit sinkt dann auch die Hoehe: gemessen am 23.08.2026
     standen dieselben 46 Punkte je nach Seite als 42 und am Handy
     als 26 da - dieselbe Regel, drei Groessen, und keine davon
     die eingestellte. */
  flex: none;
}
/* Am Rechner die volle Kopfzeilengroesse.

   Am Handy nicht: Diese Leisten sind fuer ein 30 Punkte grosses
   Quadrat gebaut und tragen daneben Name, Zusatz und zwei bis
   vier Knoepfe. Mit 46 schob maschinen.html die Seite bei 390
   Punkten seitwaerts - gemessen, nicht vermutet. 36 traegt sie.

   Die Seiten werden ohnehin umgebaut; bis dahin ist das die
   Groesse, die ihre Leiste haelt. */
@media (min-width: 1024px) {
  .topbar .logo img.b-kopf-logo,
  .logo img.b-kopf-logo { height: 46px; }
}
/* Und am Handy so klein, wie mobil.css die Leiste macht.

   mobil.css schrumpft dort die ganze alte Kopfleiste - 52 Punkte
   hoch statt 58, engeres Polster, der Zusatz unter dem Namen faellt
   weg - und setzt das Bild mit !important auf 26. Diese Regel
   gewinnt ohnehin; sie steht hier trotzdem, weil maschinen.html
   mobil.css gar nicht laedt und sonst als einzige Seite 36 zeigte.
   Dieselbe Marke in zwei Groessen auf Nachbarseiten faellt auf.

   Dieselbe Grenze wie dort, 820 Punkte. Wer sie in mobil.css
   verschiebt, verschiebt sie hier mit. */
@media (max-width: 820px) {
  .topbar .logo img.b-kopf-logo,
  .logo img.b-kopf-logo { height: 26px; }
}

/* In der Leiste bekommt das Logo eine eigene Ausrichtung.

   Die Leiste ist eine Spalte, und ein Bild darin dehnt sich ohne
   diese Zeile auf ihre volle Breite - gedeckelt von max-width.
   Sichtbar bleibt der Kreis dabei gleich gross (object-fit), er
   rutscht nur im Kasten. Gemessen am 22.08.2026: auf den Seiten
   mit Verweis 56 Punkte breit, auf der Startseite ohne Verweis
   150 - dasselbe Logo an zwei verschiedenen Stellen.

   Wohin es ausgerichtet wird, steht weiter unten bei der Leiste:
   ab 1024 Punkten mittig, darunter an den Anfang. Hier steht nur,
   dass es sich nicht dehnt. */
.b-seitenleiste > .b-kopf-logo,
.b-seitenleiste > .b-logo-weg { align-self: flex-start; }
/* ── Das Zeichen hinter der Seite ──────────────────────────────

   Es lag bis zum 30.08.2026 klein oben links in einer eigenen
   Kopfzeile am Handy und war ein Verweis auf die Startseite. Jetzt
   liegt es mittig hinter dem Inhalt, blass, und ist kein Knopf
   mehr. Die Kopfzeile ist damit ganz weggefallen: Sie trug nichts
   sonst.

   Daneben standen hier bis dahin die Initialen des Angemeldeten
   (.b-kopf-kuerzel). Sie sind mit derselben Kopfzeile gegangen;
   abgemeldet wird jetzt aus der Navigation heraus, siehe mehr.js.

   z-index:-1 und nicht 0: Ein festgestelltes Element mit 0 malt
   über allem, was nicht selbst gestellt ist - also über dem
   gesamten Fließtext. Mit -1 malt es hinter den Inhalt und
   trotzdem vor den Grund, weil der Grund von body auf die Leinwand
   durchschlägt; html trägt keinen eigenen. Wer hier einmal einen
   Hintergrund an html schreibt, macht das Zeichen unsichtbar.

   Nur unter 1024 Punkten: Darüber steht das Logo groß in der
   Seitenleiste, und genau bei dieser Breite blenden die Seiten sie
   ein. Zweimal dasselbe Zeichen auf einem Bildschirm ist einmal zu
   viel.

   Ohne Zeigerereignisse: Es liegt über der ganzen Fläche. Was man
   nicht anfassen soll, darf keine Klicks abfangen. */
.b-wasserzeichen { display: none; }
@media (max-width: 1023px) {
  .b-wasserzeichen {
    display: block;
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(64vw, 300px);
    height: auto;
    opacity: .1;
    z-index: -1;
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
  }
}

.b-datum {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text-2);
  padding: 0 20px;
}
.b-begruessung {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--farbe-text);
  margin: 6px 0 18px;
  padding: 0 20px;
}

/* ── Kennzahl-Kachel ──────────────────────────────────────────── */

/* Dunkel, weil eine Zahl, die den Tag bestimmt, sich vom Papier
   abheben soll. Das ist der eine Ort, an dem der Akzent auf der
   dunklen Fläche steht. */
.b-kennzahl {
  background: var(--farbe-kopf);
  color: var(--farbe-kopf-text);
  /* Oft ein Verweis auf das, woraus die Zahl entsteht. Ein
     Verweis ist unterstrichen und blau, eine Kennzahlkachel
     nicht. */
  text-decoration: none;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.b-kennzahl .b-versal { color: var(--farbe-kopf-text); opacity: .62; }
.b-kennzahl-wert {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  margin-top: 8px;
}
.b-kennzahl-wert small { font-size: 14px; font-weight: 400; opacity: .6; }
.b-kennzahl-delta {
  font-family: var(--schrift-mono);
  font-size: 13px; font-weight: 600;
  color: var(--farbe-akzent);
  text-align: right;
}
.b-kennzahl-delta span { display: block; font-family: var(--schrift); font-size: 11px; font-weight: 400; opacity: .55; margin-top: 4px; }

/* ── Aktionskacheln ───────────────────────────────────────────── */

.b-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-kachel {
  border-radius: 16px;
  padding: 16px;
  min-height: var(--touch-min);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--farbe-flaeche-2);
  color: var(--farbe-text);
  text-align: left;
  font-family: var(--schrift);
  /* Kacheln sind oft Verweise. Ein Verweis ist unterstrichen und
     blau, ein Knopf nicht - und eine Kachel ist ein Knopf. */
  text-decoration: none;
  display: block;
}
.b-kachel.b-haupt { background: var(--farbe-knopf); color: var(--farbe-knopf-text); }
.b-kachel:hover { filter: brightness(1.03); }
.b-kachel-titel { font-size: 14px; font-weight: 600; line-height: 1.2; margin-top: 26px; }
.b-kachel-unter { font-size: 11px; opacity: .72; margin-top: 3px; }

/* ── Knöpfe ───────────────────────────────────────────────────── */

.b-knopf {
  /* inline-flex und nicht nur min-height: Ein Knopf ist oft ein
     Verweis, und ein <a> ist von Haus aus inline. Inline heisst:
     min-height wirkt nicht, der Kasten bleibt 38 Punkte hoch und
     legt sich ueber das, was darueber steht. Genau so lag
     "Bewegung buchen" auf den beiden Kennzahlen. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--farbe-rahmen-2);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.b-knopf:hover { background: var(--farbe-flaeche-3); }
.b-knopf-haupt {
  background: var(--farbe-knopf);
  border-color: var(--farbe-knopf);
  color: var(--farbe-knopf-text);
  font-weight: 600;
}
.b-knopf-haupt:hover { background: var(--farbe-knopf-hover); border-color: var(--farbe-knopf-hover); }
.b-knopf-gefahr {
  background: var(--farbe-fehler);
  border-color: var(--farbe-fehler-rand);
  color: var(--farbe-fehler-text);
}
.b-knopf[disabled], .b-knopf.b-aus {
  background: var(--farbe-flaeche-2);
  border-color: var(--farbe-rahmen);
  color: var(--farbe-text-3);
  cursor: default;
}
.b-knopf:focus-visible, .b-feld:focus-visible, .b-chip:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 1px;
}

/* ── Eingabefeld ──────────────────────────────────────────────── */

.b-feld {
  width: 100%;
  min-height: var(--touch-min);
  padding: 10px 13px;
  border-radius: var(--radius-feld);
  border: 1px solid var(--farbe-rahmen);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 13.5px;
}
.b-feld::placeholder { color: var(--farbe-text-3); }
.b-feld:focus { outline: none; border-color: var(--farbe-fokus); box-shadow: 0 0 0 2px var(--farbe-akzent-schwach); }
.b-suchfeld { display: flex; align-items: center; gap: 9px; }
.b-suchfeld input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font: inherit; color: inherit; }

/* ── hidden gilt vor allem anderen ────────────────────────────── */

/* Das hidden-Attribut wirkt nur ueber display:none aus dem
   Stylesheet des Browsers, und jede Klassenregel hier sticht das
   aus. Es hat schon zweimal zugeschlagen: ein leerer Knopf zwoelf
   Punkte hoch auf der Startseite, ein Filterchip "Unter
   Mindestbestand . 0", der gar nicht dastehen sollte. Wer einem
   Baustein display gibt, traegt ihn hier nach. */
.b-chip[hidden], .b-kachel[hidden], .b-kacheln[hidden], .b-knopf[hidden],
.b-karte[hidden], .b-zeile[hidden], .b-hinweis[hidden], .b-abzeichen[hidden],
.b-tag[hidden], .b-termin[hidden], .b-suchfeld[hidden], .b-feld[hidden],
.b-liste[hidden], .b-tabelle[hidden], .b-fortschritt[hidden],
.b-buero[hidden], .b-seitenleiste[hidden], .b-detailspalte[hidden],
.b-kennzahl[hidden], .b-tableiste[hidden], .b-stepper[hidden],
.b-meldung[hidden], .b-blatt[hidden], .b-schleier[hidden],
.b-verzeichnis[hidden], .b-versal[hidden] { display: none; }

/* ── Chips ────────────────────────────────────────────────────── */

.b-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-feld);
  border: 1px solid var(--farbe-rahmen);
  background: transparent;
  color: var(--farbe-text-2);
  font-size: 12.5px; font-weight: 500;
  font-family: var(--schrift);
  cursor: pointer;
}
.b-chip.b-an { background: var(--farbe-flaeche-2); color: var(--farbe-text); border-color: transparent; }

/* ── Abzeichen ────────────────────────────────────────────────── */

.b-abzeichen {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.b-erfolg  { background: var(--farbe-erfolg);  color: var(--farbe-erfolg-text);  border-color: var(--farbe-erfolg-rand); }
.b-warnung { background: var(--farbe-warnung); color: var(--farbe-warnung-text); border-color: var(--farbe-warnung-rand); }
.b-fehler  { background: var(--farbe-fehler);  color: var(--farbe-fehler-text);  border-color: var(--farbe-fehler-rand); }
.b-info    { background: var(--farbe-info);    color: var(--farbe-info-text);    border-color: var(--farbe-info-rand); }

/* ── Karten und Listen ────────────────────────────────────────── */

.b-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-karte);
  padding: 16px;
}
.b-karte-kopf { font-size: 15px; font-weight: 600; }

.b-liste { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-karte); overflow: hidden; }
.b-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  min-height: var(--touch-min);
  border-bottom: 1px solid var(--farbe-rahmen);
  cursor: pointer;
}
.b-zeile:last-child { border-bottom: none; }
.b-zeile:nth-child(even) { background: var(--farbe-flaeche-2); }
.b-zeile-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-zeile-neben { font-family: var(--schrift-mono); font-size: 11.5px; color: var(--farbe-text-2); }
.b-zeile-wert { font-family: var(--schrift-mono); font-size: 13px; font-weight: 600; margin-left: auto; }

/* ── Terminzeile ──────────────────────────────────────────────
   Uhrzeit links, dicktengleich und in Akzentschrift, damit die
   Spalte untereinander steht und das Auge sie zuerst findet.
   Rechts ein Tag, der sagt, worum es geht. Aus der Referenz:
   "Heute unterwegs". */
.b-termin {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 15px;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-karte);
  margin-bottom: 8px;
  min-height: var(--touch-min);
}
.b-termin-zeit {
  font-family: var(--schrift-mono);
  font-size: 12.5px; font-weight: 600;
  color: var(--farbe-akzent-schrift);
  flex: none; min-width: 44px; padding-top: 1px;
}
.b-termin-inhalt { flex: 1; min-width: 0; }
.b-termin-titel { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.b-termin-unter { display: block; font-size: 12px; color: var(--farbe-text-2); margin-top: 2px; }
.b-termin { text-decoration: none; color: inherit; }
.b-tag {
  flex: none;
  font-family: var(--schrift-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--farbe-flaeche-2);
  color: var(--farbe-text-2);
  padding: 4px 8px; border-radius: 6px;
}

/* Hinweiskarte: sagt, warum etwas auffällt. Immer mit einem Grund,
   nie nur mit einem Ausrufezeichen. */
.b-hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-karte);
  background: var(--farbe-warnung);
  color: var(--farbe-warnung-text);
  border: 1px solid var(--farbe-warnung-rand);
  font-size: 12.5px; line-height: 1.5;
}
.b-hinweis.b-info-karte { background: var(--farbe-info); color: var(--farbe-info-text); border-color: var(--farbe-info-rand); }

/* Die Fassung aus der Referenz: weiße Karte, links ein Balken in
   Akzentfarbe. Sie sagt etwas, das auffallen soll, ohne die ganze
   Fläche einzufärben - eine gelbe Karte neben einer gelben Warnung
   wäre eine Warnung zu viel. */
.b-hinweis.b-balken {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-rahmen);
  border-left: 3px solid var(--farbe-akzent);
  flex-direction: column; gap: 4px;
}
.b-hinweis.b-balken { text-decoration: none; }
.b-hinweis.b-balken b { font-size: 14px; font-weight: 600; }
.b-hinweis.b-balken span { color: var(--farbe-text-2); }

/* ── Tabelle ──────────────────────────────────────────────────── */

.b-tabelle { width: 100%; border-collapse: collapse; background: var(--farbe-flaeche); }
.b-tabelle thead th {
  font-family: var(--schrift-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--farbe-text-2);
  text-align: left;
  padding: 11px 16px;
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rahmen);
}
.b-tabelle tbody td {
  padding: 13px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--farbe-rahmen);
}
/* Der Wechsel fuehrt das Auge ueber die Zeile, er soll nicht
   auffallen. --farbe-flaeche-2 war dafuer zu kraeftig: In der
   weissen Karte sahen die geraden Zeilen aus wie ausgewaehlt. */
.b-tabelle tbody tr:nth-child(even) { background: var(--farbe-grund); }
.b-tabelle tbody tr:hover { box-shadow: inset 3px 0 0 var(--farbe-akzent); }
.b-tabelle .b-rechts { text-align: right; font-family: var(--schrift-mono); font-weight: 600; }

/* ── Tab-Leiste am unteren Rand ───────────────────────────────── */

/* Sie liegt fest am unteren Rand, weil der Daumen dort ist. Die
   Höhe rechnet den sicheren Bereich mit: Auf einem Gerät ohne
   Knopf sitzt sonst der letzte Eintrag unter dem Strich, den das
   Betriebssystem einblendet. */
.b-tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  border-top: 1px solid var(--farbe-rahmen);
  background: var(--farbe-grund);
  padding: 9px 8px calc(12px + env(safe-area-inset-bottom, 10px));
}
/* Ein Eintrag ist meistens ein Verweis, einer nicht: "Mehr" ist
   ein Knopf und oeffnet das Blatt. Beide muessen gleich aussehen,
   sonst sieht man dem letzten Tab an, dass er anders gebaut ist. */
.b-tableiste a,
.b-tableiste button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: var(--touch-min);
  text-decoration: none;
  color: var(--farbe-text-2);
  font-size: 10px; font-weight: 500;
}
.b-tableiste button {
  background: none; border: none; padding: 0;
  font-family: var(--schrift); cursor: pointer;
}
.b-tableiste a.b-an,
.b-tableiste button.b-an { color: var(--farbe-text); }
.b-tableiste svg { width: 20px; height: 20px; }
/* Platz für die Leiste, damit die letzte Zeile nicht darunter liegt. */
.b-mit-tableiste { padding-bottom: 84px; }

/* ── Blatt von unten ──────────────────────────────────────────── */

.b-schleier {
  position: fixed; inset: 0; z-index: 50;
  background: var(--farbe-abdunkeln);
}
.b-blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  background: var(--farbe-fenster);
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow: auto;
}
/* Der Griff oben sagt ohne Wort, dass sich das Blatt schieben
   lässt. */
.b-blatt::before {
  content: ""; display: block;
  width: 38px; height: 4px; margin: 0 auto 14px;
  border-radius: 2px; background: var(--farbe-rahmen-2);
}

/* Auf- und zuschieben. Der Zustand hängt an einer eigenen Klasse
   und nicht am Grundzustand: `/marke.html` stellt Schleier und
   Blatt nebeneinander aus, und ein Blatt, das von sich aus unter
   dem Rand liegt, wäre dort unsichtbar. */
.b-schleier { transition: opacity .18s ease; }
.b-schleier.b-zu { opacity: 0; }
.b-blatt { transition: transform .22s cubic-bezier(.2,.8,.25,1); }
.b-blatt.b-zu { transform: translateY(100%); }
/* Während der Finger schiebt, folgt das Blatt sofort. Eine
   Überblendung dazwischen fühlt sich an wie ein Hänger. */
.b-blatt.b-schiebt { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .b-schleier, .b-blatt { transition: none; }
}

/* ── Die Rückfrage ────────────────────────────────────────────

   Ein kleines Fenster in der Mitte, für die eine Frage, die vor
   einem Schritt steht, den man nicht zurücknehmen kann.

   Nicht confirm(): Ein Systemfenster sieht auf jedem Gerät
   anders aus, es steht am oberen Rand statt dort, wo man
   hingetippt hat, und man klickt es weg, ohne es zu lesen.

   Über dem Blatt (50/51), weil die Frage aus dem Blatt heraus
   gestellt wird und darüber liegen muss. */
.b-frage-huelle {
  position: fixed; inset: 0; z-index: 60;
  background: var(--farbe-abdunkeln);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.b-frage {
  background: var(--farbe-fenster);
  border-radius: var(--radius-karte);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  padding: 20px;
  width: 100%; max-width: 360px;
  max-height: 84vh; overflow: auto;
}
.b-frage h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.b-frage p {
  margin: 0 0 6px; font-size: 13.5px; line-height: 1.45;
  color: var(--farbe-text-2);
}
/* Die Knöpfe nebeneinander, der harmlose links. Wer schnell
   tippt, trifft damit das Abbrechen und nicht das Abmelden. */
.b-frage-knoepfe {
  display: flex; gap: 10px; margin-top: 16px;
}
.b-frage-knoepfe .b-knopf { flex: 1; justify-content: center; }
.b-frage-huelle { transition: opacity .14s ease; }
.b-frage-huelle.b-zu { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .b-frage-huelle { transition: none; }
}

/* ── Karteiverzeichnis ────────────────────────────────────────── */

/* Eine Liste von Seiten: Symbol links, Name, darunter in einer
   Zeile, wozu die Seite da ist. Die Trennlinie sitzt oben, damit
   die letzte Zeile nicht mit einer Linie ins Nichts endet. */
.b-verzeichnis { display: block; }
.b-verzeichnis > .b-versal {
  display: block;
  padding: 16px 2px 4px;
}
.b-verzeichnis > .b-versal:first-child { padding-top: 2px; }
/* Eine Zeile im Verzeichnis. Meistens ein Verweis auf eine
   Seite; seit dem 26.08.2026 steht auch ein Schalter darin — die
   Benachrichtigungen für dieses eine Gerät. Beide sehen gleich
   aus, weil beide dasselbe sind: eine Zeile, die man antippt. */
.b-verzeichnis a,
.b-verz-schalter {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 10px 2px;
  min-height: var(--touch-min);
  border: none;
  border-top: 1px solid var(--farbe-rahmen);
  background: none;
  color: var(--farbe-text);
  font: inherit; text-align: left;
  text-decoration: none;
}
.b-verz-schalter { cursor: pointer; }
/* Abgeschaltet heißt hier nicht „kaputt": Der Text darunter sagt,
   warum nichts zu tun ist. Deshalb tritt nur der Name zurück und
   nicht die ganze Zeile. */
.b-verz-schalter[disabled] { cursor: default; }
.b-verz-schalter[disabled] .b-verz-name { color: var(--farbe-text-2); }
.b-verzeichnis .b-versal + a,
.b-verzeichnis .b-versal + .b-verz-schalter { border-top: none; }
.b-verzeichnis a svg,
.b-verz-schalter svg {
  width: 20px; height: 20px; flex: none;
  color: var(--farbe-text-2);
}
.b-verz-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.b-verz-unter {
  display: block; font-size: 12px; line-height: 1.35;
  color: var(--farbe-text-2); margin-top: 2px;
}
/* Wo man gerade steht. Der Balken links ist dasselbe Zeichen wie
   in der Tabelle und in der Hinweiskarte. */
.b-verzeichnis a.b-an {
  box-shadow: inset 3px 0 0 var(--farbe-akzent);
  padding-left: 10px;
}
.b-verzeichnis a.b-an svg { color: var(--farbe-akzent-schrift); }

/* ── Mengen-Stepper ───────────────────────────────────────────── */

/* Die Zahl steht groß und dicktengleich in der Mitte, die beiden
   Knöpfe sind so groß, dass man sie mit Handschuhen trifft. */
.b-stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  background: var(--farbe-flaeche-2);
  border-radius: var(--radius-karte);
  padding: 8px;
}
.b-stepper button {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radius-feld);
  border: 1px solid var(--farbe-rahmen);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-size: 24px; font-weight: 500;
  cursor: pointer;
}
.b-stepper button:hover { background: var(--farbe-flaeche-3); }
.b-stepper-wert {
  flex: 1; text-align: center;
  font-family: var(--schrift-mono);
  font-size: 32px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.b-stepper-wert small { display: block; font-family: var(--schrift); font-size: 11px; font-weight: 400; color: var(--farbe-text-2); }

/* ── Meldung am unteren Rand ──────────────────────────────────── */

.b-meldung {
  position: fixed; left: 16px; right: 16px; z-index: 60;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-karte);
  background: var(--farbe-kopf);
  color: var(--farbe-kopf-text);
  font-size: 13.5px;
}
/* Dieselbe Meldung in den Zustandsfarben. Als Doppelklasse, weil
   .b-meldung weiter unten steht als .b-erfolg und sonst gewinnt -
   der Ton wäre dann wirkungslos, ohne dass es jemand merkt. */
.b-meldung.b-erfolg  { background: var(--farbe-erfolg);  color: var(--farbe-erfolg-text); }
.b-meldung.b-warnung { background: var(--farbe-warnung); color: var(--farbe-warnung-text); }
.b-meldung.b-fehler  { background: var(--farbe-fehler);  color: var(--farbe-fehler-text); }
.b-meldung.b-info    { background: var(--farbe-info);    color: var(--farbe-info-text); }

.b-meldung-haken {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--farbe-erfolg);
  color: var(--farbe-erfolg-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* ── Fortschritt ──────────────────────────────────────────────── */

.b-fortschritt { height: 6px; border-radius: 3px; background: var(--farbe-flaeche-2); overflow: hidden; }
.b-fortschritt i { display: block; height: 100%; background: var(--farbe-akzent); }

/* ── Als App einrichten ────────────────────────────────────────
   Der Balken unten, den marke.js aufstellt. Er sitzt ueber der
   Tab-Leiste und nimmt Ruecksicht auf sie und auf den unteren
   Rand des Geraets - sonst stuende er auf einem iPhone im
   Wischbereich.

   Warum unten und nicht oben: Oben steht auf jeder Seite etwas,
   das gebraucht wird. Ein Angebot darf warten. */
.b-app-angebot {
  position: fixed; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  /* Über der Tab-Leiste (40), aber unter Schleier (50) und Blatt
     (51). Er stand bis zum 25.08.2026 auf 60 und lag damit über
     jedem offenen Blatt. Das war nicht nur hässlich: Er schluckte
     die Klicks. Auf dem Handy war in lieferung.html der Knopf
     "Nicht geliefert" nicht antippbar, und es sah aus, als täte
     er nichts. Gemessen mit elementFromPoint über allen Knöpfen
     des Blatts; getroffen wurde .b-app-angebot statt der Knopf. */
  z-index: 45;
  margin: 0 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--farbe-kopf);
  color: var(--farbe-kopf-text);
  border-radius: var(--radius-karte);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  font-size: 13px;
}
.b-app-text { flex: 1; min-width: 0; }
.b-app-text b { display: block; font-weight: 600; }
.b-app-text span { display: block; font-size: 11.5px; opacity: .78; margin-top: 2px; }
.b-app-knopf {
  flex: none; border: none; cursor: pointer;
  background: var(--farbe-akzent); color: var(--farbe-text);
  font: inherit; font-weight: 600; font-size: 12.5px;
  padding: 9px 14px; border-radius: var(--radius-feld);
  min-height: var(--touch-min);
}
.b-app-zu {
  flex: none; border: none; background: transparent;
  color: inherit; opacity: .7; cursor: pointer;
  font-size: 15px; line-height: 1;
  width: var(--touch-min); height: var(--touch-min);
}
.b-app-zu:hover { opacity: 1; }
/* Ein offenes Blatt hat Vorrang. Unter dem Schleier läge das
   Angebot sonst halb sichtbar da und lenkte ab. Wessen Browser
   :has nicht kennt, sieht es dort abgedunkelt stehen; antippbar
   ist es dann nicht mehr, und das ist der harmlose Ausgang. */
body:has(.b-blatt:not([hidden])) .b-app-angebot,
body:has(.b-schleier:not([hidden])) .b-app-angebot,
/* Und waehrend ein Vorgang laeuft, der unten eine Leiste hat.
   Am 30.08.2026 gemessen: Beim Auswaehlen von Artikeln fuer eine
   Bestellung lag das Angebot ueber "Auswahl uebernehmen" und
   "Bestellung abbrechen" - elementFromPoint traf das Angebot,
   nicht den Knopf, und beide taten scheinbar nichts.

   Dieselbe Lehre wie am 25.08.2026, nur eine Ebene tiefer: Wer
   eine Leiste ueber den ganzen Bildschirm legt, prueft sie gegen
   alles, was sich oeffnet - und gegen alles, was unten steht. */
body.auswaehlen .b-app-angebot,
body.modal-open .b-app-angebot { display: none; }
/* Am Rechner rueckt er in die Ecke - aber nur, wenn dort keine
   Tab-Leiste steht.

   start-mobil.html zeigt ihre auch in einem breiten Fenster: Sie
   ist die Handy-Startseite, und wer sie am Rechner aufmacht,
   bekommt sie samt Leiste. Gemessen am 24.08.2026 - der Balken
   lag darueber und verdeckte sie.

   :has kennt nicht jeder Browser. Wer es nicht kennt, laesst den
   Balken dort, wo er am Handy steht: ueber der Leiste statt auf
   ihr. Das ist der harmlose Ausgang. */
@media (min-width: 1024px) {
  body:not(:has(.b-tableiste)) .b-app-angebot {
    left: auto; right: 18px; bottom: 18px;
    margin: 0; width: min(380px, calc(100vw - 36px));
  }
}

/* ── Büro: Seitenleiste und Detailspalte ──────────────────────── */

.b-buero { display: flex; min-height: 100vh; }
.b-seitenleiste {
  width: 228px; flex: none;
  background: var(--farbe-kopf);
  color: var(--farbe-kopf-text);
  padding: 22px 16px;
  display: flex; flex-direction: column;
}
.b-seitenleiste a {
  display: block;
  padding: 11px 13px;
  border-radius: var(--radius-feld);
  color: var(--farbe-kopf-text);
  opacity: .62;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.b-seitenleiste a.b-an { opacity: 1; font-weight: 600; background: var(--farbe-kopf-2); color: var(--farbe-kopf-text); }
.b-seitenleiste a:hover { opacity: 1; }

/* ── Das Logo in der Seitenleiste ──────────────────────────────

   Gross und mittig. Es stand bis zum 22.08.2026 mit 56 Punkten
   links oben und war damit kleiner als jeder Navigationseintrag
   daneben - der Schriftzug darin war nicht zu lesen.

   176 Punkte, und das braucht eine Erklaerung, weil 176 mehr sind
   als die 140, die als Durchmesser gewuenscht waren.

   Die Datei ist ein quadratisches Feld mit einem deckenden Kreis
   darin, und dieser Kreis hat genau #4B5E6E - dieselbe Farbe wie
   die Leiste. In der Leiste sieht man ihn deshalb nicht. Was man
   sieht, ist allein, was IM Kreis steht: Wagen und Schriftzug,
   gemessen 75 Prozent breit und 47 Prozent hoch.

   Ein 140 Punkte grosses Feld zeigt also eine 105 Punkte breite
   Marke - 46 Prozent der Leiste, nicht 61. Fuer 60 bis 70 Prozent
   SICHTBARE Breite braucht das Feld 176 bis 213.

   176 ist das untere Ende davon: sichtbare Marke 132 mal 83
   Punkte, also 58 Prozent der Leistenbreite, und das Feld bleibt
   mit 176 unter dem Innenmass von 196 (228 minus zweimal 16
   Polster). Ein groesseres Feld waere breiter als der Platz.

   Wer den Kreis mitzaehlen will statt der Marke darin, setzt hier
   140 ein - eine Zeile.

   Eine Rastergroesse gibt es in dieser Datei nicht - der Rhythmus
   der Leiste steht in ausgeschriebenen Werten: 22 Polster oben,
   16 an den Seiten, 8 zwischen den Eintraegen. Die 14 Punkte
   unter dem Logo fuegen sich mit den 8, die die Navigation selbst
   mitbringt, zu 22 zusammen - demselben Mass wie oben.

   Erst ab 1024 Punkten. Darunter liegt die Leiste bei
   buero-lager.html quer als Balken, und ein 140 Punkte hohes
   Logo darin waere der ganze Balken. */
.b-seitenleiste .b-kopf-logo { height: 36px; }
@media (min-width: 1024px) {
  .b-seitenleiste .b-logo-weg,
  .b-seitenleiste > .b-kopf-logo {
    align-self: center;
    margin: 0 0 14px;
  }
  .b-seitenleiste .b-kopf-logo { height: 176px; max-width: 100%; }

  /* Wird die Leiste zu kurz, scrollt die Navigation - nicht das
     Logo und nicht die Kennzahl darunter.

     Dafuer muss die Leiste eine Hoehe haben. Die Neubauten geben
     ihrem Inhalt 100vh und die Leiste zieht mit; buero-lager.html
     nicht, dort waechst sie mit der Seite. Deshalb hier: Die
     Leiste ist so hoch wie das Fenster und bleibt beim Scrollen
     stehen. Das ist ohnehin, was eine Seitenleiste tut - und die
     Kennzahl unten drin ist nur dann eine Kennzahl, wenn man sie
     sieht.

     min-height: 0 gehoert dazu. Ein Flex-Kind ist von Haus aus
     mindestens so hoch wie sein Inhalt und laesst sich sonst
     nicht kuerzen; overflow allein bewirkt dann nichts. */
  .b-seitenleiste {
    position: sticky; top: 0;
    height: 100vh;
  }
  .b-seitenleiste #nav { min-height: 0; overflow-y: auto; }
}
/* Unten in der Leiste steht eine Kennzahl. Der Kasten ist eine
   Stufe heller als die Leiste, nicht heller als die Seite: Eine
   weisse Karte in der dunklen Leiste liest sich als Fremdkoerper. */
.b-seitenleiste .b-fuss {
  margin-top: auto;
  background: var(--farbe-kopf-2);
  border-radius: var(--radius-karte);
  padding: 14px;
}
.b-seitenleiste .b-fuss .b-versal { color: var(--farbe-kopf-text); opacity: .62; }
.b-seitenleiste .b-fuss b {
  display: block; margin-top: 8px;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.b-seitenleiste .b-fuss span {
  display: block; margin-top: 6px;
  font-family: var(--schrift-mono); font-size: 11px;
  opacity: .72;
}

.b-inhalt { flex: 1; min-width: 0; padding: 24px 26px; }
.b-seitentitel { font-size: 22px; font-weight: 700; }
.b-detailspalte {
  width: 326px; flex: none;
  border-left: 1px solid var(--farbe-rahmen);
  background: var(--farbe-flaeche);
  padding: 24px 22px;
  overflow: auto;
}

/* ── Unterschrift ─────────────────────────────────────────────── */

/* Das Feld ist absichtlich hoch: Wer mit dem Finger unterschreibt,
   braucht Platz, sonst wird aus der Unterschrift ein Kringel. */
.b-unterschrift {
  height: 150px;
  border: 1px dashed var(--farbe-rahmen-2);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  touch-action: none;
}
.b-unterschrift-linie { border-top: 1px solid var(--farbe-rahmen-2); margin-top: 8px; padding-top: 6px; }

/* ── Belegrahmen ──────────────────────────────────────────────── */

/* Sieht aus wie Papier, weil es eines werden soll. Feste Breite in
   Millimetern wäre falsch: Der Beleg wird am Handy angesehen und
   erst danach gedruckt. */
.b-beleg {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: 6px;
  padding: 22px;
  font-size: 12.5px;
  line-height: 1.5;
}
.b-beleg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--farbe-rahmen); padding-bottom: 14px; }

/* ── Leerer Zustand und Laden ─────────────────────────────────── */

/* Ein leerer Zustand sagt, was zu tun ist. "Keine Daten" sagt das
   nicht. */
.b-leer {
  text-align: center;
  padding: 40px 24px;
  color: var(--farbe-text-2);
  font-size: 13px;
  line-height: 1.6;
}
.b-leer-titel { font-family: var(--schrift); font-size: 15px; font-weight: 600; color: var(--farbe-text); margin-bottom: 6px; }

.b-laedt { display: flex; align-items: center; gap: 10px; color: var(--farbe-text-2); font-size: 13px; padding: 24px; }
.b-laedt::before {
  content: ""; width: 16px; height: 16px; flex: none;
  border: 2px solid var(--farbe-rahmen-2);
  border-top-color: var(--farbe-akzent);
  border-radius: 50%;
  animation: b-dreht .7s linear infinite;
}
@keyframes b-dreht { to { transform: rotate(360deg); } }

/* ── Am Finger gelten andere Maße ─────────────────────────────
   Ein Chip mit 34 Punkten Höhe ist mit der Maus bequem und mit dem
   Daumen ein Glücksspiel. Statt alles auf 44 zu zwingen und die
   Oberfläche am Rechner aufzublähen, gilt das Maß dort, wo mit dem
   Finger bedient wird.

   pointer: coarse trifft genau das: ein Zeigegerät, das nicht genau
   ist. Ein Tablet mit Stift zählt nicht dazu, ein Handy schon. */
@media (pointer: coarse) {
  .b-chip,
  .b-seitenleiste a,
  .b-tableiste a,
  .b-zeile { min-height: var(--touch-min); }
}

/* ── Der Weg zurück auf die Startseite ────────────────────────
   Eingesetzt von zurueck.js in jede Seite, die noch das alte
   Aussehen trägt. Die Neubauten bringen ihre Tab-Leiste mit und
   brauchen ihn nicht; sie bekommen zurueck.js gar nicht erst.

   Warum als Baustein und nicht in zurueck.js: Ein Skript, das
   sein Aussehen selbst mitbringt, kennt die Farben des Betriebs
   nicht - die stehen in marke.css und werden hier benutzt.

   Fällt weg, wenn die letzte alte Seite umgebaut ist. */

a.b-zurueck-start {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none;
  min-height: var(--touch-min);
  padding: 0 10px 0 2px;
  font-family: var(--schrift);
  font-size: 13px; font-weight: 500;
  color: var(--farbe-akzent-schrift);
  text-decoration: none;
  white-space: nowrap;
}
a.b-zurueck-start svg { width: 15px; height: 15px; flex: none; }

/* Wer eine Bewegung nicht verträgt, bekommt keine. Das ist keine
   Feinheit: Für manche Menschen ist ein drehender Ring der
   Unterschied zwischen benutzbar und nicht. */
@media (prefers-reduced-motion: reduce) {
  .b-laedt::before { animation: none; }
  * { transition: none !important; }
}