/* ══════════════════════════════════════════════════════════════
   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 ────────────────────────────────────────────────── */

.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;
}
.b-kopf-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; }
/* Die Initialen stehen für den angemeldeten Menschen. Ein Bild wäre
   hier falsch: Im Lager kennt man sich, und ein Kürzel ist auf
   38 Punkten lesbar, ein Gesicht nicht. */
.b-kopf-kuerzel {
  width: var(--touch-min); height: var(--touch-min); flex: none;
  /* Sichtbar sind 38 Punkte, angetippt werden 44. Der Knopf ist so
     gross wie der Daumen, gemalt wird nur der Inhaltskasten. Ohne
     border:none zeichnete der Browser seinen eigenen Rahmen auf den
     vollen 44 Punkten, und die Kachel bekam einen zweiten Umriss. */
  border: none;
  padding: 3px;
  border-radius: 14px;
  background: var(--farbe-kopf);
  background-clip: content-box;
  color: var(--farbe-kopf-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--schrift-mono);
  font-size: 12px; font-weight: 600;
}

.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);
  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] { 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));
}
.b-tableiste a {
  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 a.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);
}

/* ── 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;
}
.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); }

/* ── 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; }
/* 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); }
}

/* 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; }
}