/* =============================================================================
   EmKater WWS - Masken im Alltag
   Formulare, Tabellen, Rueckmeldungen. Ergaenzt app.css; app.css traegt das
   Farbschema und die Grundformen, layout.css die Seitengliederung. Hier steht
   nur, was die taegliche Bedienung an Theke, Werkbank und Tablet erleichtert.

   Regeln fuer diese Datei:
     - keine eigenen Farbwerte, ausschliesslich die Merkmale aus app.css,
       damit Hell- und Dunkelthema ohne Zutun mitlaufen
     - nichts zur Seitengliederung, nichts zur Navigation
     - jede Regel hat ohne JavaScript einen brauchbaren Grundzustand;
       app.js schaltet nur Klassen und ARIA-Merkmale zu
   ============================================================================= */

/* --- Tabellen: Kopf steht, Summe steht ------------------------------------ *

   Am Tabellenkopf stand schon `position: sticky`, wirken konnte es nicht:
   `.tabellenrahmen` hat `overflow-x: auto` und ist damit selbst der
   Scrollbehaelter - der Kopf klebte an dessen Oberkante, die mit der Seite
   wegwandert. Der Rahmen bekommt deshalb eine Hoechsthoehe. Lange Listen
   rollen im Rahmen, Kopfzeile und Summenzeile bleiben stehen, und die
   Blaetterung darunter bleibt ohne langes Scrollen erreichbar.                */

.tabellenrahmen {
  max-width: 100%;
  max-height: var(--listenhoehe, 72vh);
  overflow: auto;
  overscroll-behavior-x: contain;
}

/* Kurze Tabellen in Karten (Kundenkarten, Umsatzjahre, Tagesliste im
   Terminbuch) nicht kuenstlich beschneiden. */
.karte .tabellenrahmen,
.tabellenrahmen.frei { max-height: none; }

/* Der Rahmen ist mit den Pfeiltasten rollbar, sobald app.js ihn fokussierbar
   gemacht hat - das darf man sehen. */
.tabellenrahmen:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* Kopf klebt jetzt am Rahmen, nicht am Fenster. */
table.liste th { top: 0; }

/* Bei `border-collapse: collapse` verliert eine klebende Zelle ihre Rahmen -
   deshalb die Trennlinie zusaetzlich als Innenschatten. */
table.liste thead th { box-shadow: inset 0 -1px 0 var(--linie); }
table.liste tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: inset 0 2px 0 var(--linie);
}

/* Hinweis unter breiten Tabellen, gesetzt von app.js: auf dem Tablet ist die
   waagerechte Rollleiste unsichtbar, ohne Hinweis sieht niemand die weiteren
   Spalten. */
.rollhinweis {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 2px 0;
  font-size: 12px;
  color: var(--schrift-hell);
}
.rollhinweis::before { content: "\21C4"; font-size: 14px; }

/* Zeile unter dem Tastaturfokus mitfuehren - ohne Maus muss erkennbar sein,
   in welcher Zeile man steht. */
table.liste tbody tr:focus-within > td { background: var(--flaeche-hover); }

/* Zahlen rechtsbuendig mit gleicher Ziffernbreite - auch in den
   Eingabefeldern bearbeitbarer Listen und in der Summenzeile. */
table.liste th.zahl,
table.liste td.zahl,
table.liste tfoot td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.liste td.zahl input,
table.liste td input.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.liste .mono { font-variant-numeric: tabular-nums; }

/* Eingabefelder in Listenzeilen: Hoehe der Textzeile, klarer Rahmen. */
table.liste td input,
table.liste td select {
  padding: 3px 6px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--feld-flaeche);
  color: var(--schrift);
  font: inherit;
  font-size: 13px;
  max-width: 100%;
}
table.liste td input:focus,
table.liste td select:focus {
  outline: 2px solid var(--fokus);
  outline-offset: -1px;
  border-color: var(--fokus);
}

/* Erste Spalte mitfuehren, wo sie den Datensatz benennt (Belegnummer o. ae.).
   Bewusst nur dort eingeschaltet, wo die Spalte wirklich der Anker ist. */
table.liste.erste-spalte-fest thead th:first-child { position: sticky; left: 0; z-index: 4; background: var(--tabellenkopf); }
table.liste.erste-spalte-fest tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--flaeche); }
table.liste.erste-spalte-fest tbody tr:nth-child(even) > td:first-child { background: var(--zebra); }
table.liste.erste-spalte-fest tbody tr:hover > td:first-child,
table.liste.erste-spalte-fest tbody tr:focus-within > td:first-child { background: var(--flaeche-hover); }
table.liste.erste-spalte-fest tfoot td:first-child { left: 0; z-index: 3; background: var(--tabellenkopf); }

/* Leerzustand: sagt, warum nichts da ist und was jetzt hilft. */
table.liste .leer { padding: 30px 20px; }
.leer-titel { display: block; font-weight: 600; color: var(--schrift); margin-bottom: 2px; }
.leer-hinweis { display: block; font-size: 12.5px; color: var(--schrift-hell); }
.leer-hinweis a { margin: 0 4px; }

/* Sortierzustand - greift, sobald eine Liste sortierbare Koepfe bekommt. */
table.liste th[aria-sort] a { display: inline-flex; align-items: center; gap: 4px; }
table.liste th[aria-sort] a::after { content: "\2195"; opacity: .45; font-size: 11px; }
table.liste th[aria-sort="ascending"],
table.liste th[aria-sort="descending"] { background: var(--flaeche-hover); }
table.liste th[aria-sort="ascending"] a::after { content: "\2191"; opacity: 1; }
table.liste th[aria-sort="descending"] a::after { content: "\2193"; opacity: 1; }

/* --- Blaetterung ---------------------------------------------------------- */

.blaettern a, .blaettern span.aktuell { min-width: 36px; text-align: center; }
.blaettern a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.blaettern .seiten a[rel="prev"], .blaettern .seiten a[rel="next"] { font-weight: 700; }

/* --- Sichtbarer Filterzustand --------------------------------------------- *
   app.js liest die ausgefuellte Suchleiste aus und zeigt darunter, was gerade
   einschraenkt. Jede Marke laesst sich einzeln wieder abwerfen.               */

.filterzustand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -6px 0 12px;
  font-size: 12.5px;
  color: var(--schrift-hell);
}
.filterzustand .fz-titel { font-weight: 600; }
.filtermarke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 9px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--schrift);
  white-space: nowrap;
}
.filtermarke b { font-weight: 600; }
.filtermarke .fm-weg {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--schrift-hell);
  font-size: 13px;
  line-height: 1;
}
.filtermarke .fm-weg:hover { background: var(--flaeche-hover); color: var(--rot-text); text-decoration: none; }
.filtermarke .fm-weg:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }

/* Zeitraum-Schnellwahl in den Kassenlisten */
.schnellwahl { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-end; }
.schnellwahl .btn-klein { font-weight: 600; }

/* --- Formularfelder ------------------------------------------------------- */

/* Pflichtfeld: der Stern wird zusaetzlich vorgelesen, nicht nur gemalt. */
.feld label .pflicht { color: var(--rot-text); margin-left: 2px; }
.feld .hilfe { font-size: 11.5px; color: var(--schrift-hell); }

/* Ueberschrift einer Feldgruppe ohne eigenes Bedienelement (z. B. die
   Zeitraum-Schnellwahl) - sieht aus wie eine Beschriftung, ist aber keine,
   weil dahinter kein einzelnes Feld steht. */
.feld > .feldtitel { font-size: 12px; color: var(--schrift-hell); font-weight: 600; }

/* Fehler direkt am Feld - serverseitig (.fehler) und im Browser
   (.feld-fehler) sehen bewusst gleich aus. */
.feld .fehler,
.feld .feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--rot-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.feld .fehler::before,
.feld .feld-fehler::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--rot);
  color: var(--auf-rot);
  font-size: 10px;
  font-weight: 700;
}

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
table.liste td input[aria-invalid="true"] {
  border-color: var(--rot);
  background: var(--fehler-flaeche);
}
.feld:has([aria-invalid="true"]) > label { color: var(--rot-text); }

/* Abgeleitete Felder (Bearbeiter, Miettage): sichtbar, aber kein Tabstopp und
   erkennbar als „wird gerechnet, nicht getippt". */
.feld input[data-abgeleitet] {
  background: var(--flaeche-alt);
  color: var(--schrift-hell);
  border-style: dashed;
}

/* Zahlen- und Datumsfelder: gleiche Ziffernbreite, Betraege rechtsbuendig -
   auch waehrend man tippt. */
input[data-dezimal], input.zahl { text-align: right; font-variant-numeric: tabular-nums; }
input[data-datum], input[data-zeit] { font-variant-numeric: tabular-nums; }

/* --- Scanfeld ------------------------------------------------------------- */

.scanfeld { flex-wrap: wrap; }
.scanfeld input[data-scan] { min-width: 180px; letter-spacing: .04em; }

/* Sichtbarer Betriebszustand: bereit / es kommt gerade ein Code herein. */
.scanfeld .scan-lampe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--schrift-hell);
  white-space: nowrap;
}
.scanfeld .scan-lampe::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--linie-stark);
}
.scanfeld:focus-within .scan-lampe::before { background: var(--gruen-dunkel); }
.scanfeld.scan-laeuft { border-color: var(--gruen); }
.scanfeld.scan-laeuft .scan-lampe::before { background: var(--gruen); }
.scanfeld.scan-aufgefangen { box-shadow: 0 0 0 3px var(--erfolg-flaeche); }

/* --- Laufende Aktionen ----------------------------------------------------- */

/* Duenner Balken ganz oben, solange eine Buchung unterwegs ist. */
.fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: var(--linie);
  overflow: hidden;
}
.fortschritt::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  background: var(--gruen);
  animation: emk-lauf 1.1s ease-in-out infinite;
}
@keyframes emk-lauf {
  0%   { left: -34%; }
  100% { left: 100%; }
}

button[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after, .btn[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: emk-dreh .7s linear infinite;
}
@keyframes emk-dreh { to { transform: rotate(360deg); } }

/* Ohne Bewegung bleibt der Balken stehen - der Zustand ist trotzdem sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .fortschritt::before { left: 0; width: 100%; animation: none; }
}

/* --- Ungespeicherte Aenderungen -------------------------------------------- */

form.hat-aenderung .aktionen::before {
  content: "Nicht gespeichert";
  align-self: center;
  order: 9;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gelb);
  color: var(--auf-gelb);
  font-size: 11.5px;
  font-weight: 700;
}

/* Speicherleiste, die bei langen Masken am unteren Rand mitlaeuft. */
.aktionen-klebrig {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}

/* --- Barrierefreiheit ------------------------------------------------------ */

/* Beschriftung nur fuer Vorlesewerkzeuge - z. B. an wiederholten
   „oeffnen"-Schaltflaechen in Listen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

table.liste a:focus-visible,
table.liste button:focus-visible,
.karte a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Sammelmeldung oben: Sprungmarken zu den betroffenen Feldern. */
.meldung .zu-feldern { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 0; padding: 0; list-style: none; }
.meldung .zu-feldern a { font-weight: 600; }

/* --- Tablet und Theke ------------------------------------------------------ */

/* Fingerbedienung: groessere Ziele, 16px Schrift in Feldern - darunter zoomt
   iOS beim Antippen hinein und die Maske springt. */
@media (pointer: coarse) {
  .feld input, .feld select, .feld textarea,
  .suchleiste input, .suchleiste select { min-height: 40px; font-size: 16px; }
  .btn { padding: 9px 15px; }
  .btn-klein { padding: 6px 11px; font-size: 13px; }
  .blaettern a, .blaettern span.aktuell { padding: 8px 13px; }
  table.liste td input, table.liste td select { min-height: 32px; font-size: 15px; }
}

/* Riegel gegen seitlich weglaufende Seiten auf dem Tablet.

   Ursache liegt nicht hier: `.rumpf` hat in app.css `align-items: flex-start`.
   Unter 900 px stellt dieselbe Regel die Achse auf `column` - damit richtet
   sich die Breite von `.inhalt` nach dem Inhalt statt nach dem Fenster, und
   eine breite Liste zieht die ganze Seite auf. Der Tabellenrahmen kann das
   nicht auffangen, weil sein Elternteil bereits zu breit ist. Gehoert nach
   app.css (`.inhalt { align-self: stretch }` in der 900-px-Abfrage) - bis
   dahin steht der Riegel hier, damit die Listen auf dem Tablet im Bild
   bleiben. */
@media (max-width: 900px) {
  .rumpf > .inhalt { align-self: stretch; width: 100%; min-width: 0; }
}

@media (max-width: 820px) {
  table.liste { font-size: 12.5px; }
  table.liste th, table.liste td { padding: 5px 7px; }
  table.liste td.breit { min-width: 160px; }
  .suchleiste { padding: 10px; }
  .suchleiste .feld { min-width: 140px; }
  .aktionen-klebrig { position: static; box-shadow: none; }
}

/* --- Druck ----------------------------------------------------------------- */

@media print {
  .tabellenrahmen { max-height: none; overflow: visible; }
  table.liste tfoot td { position: static; }
  table.liste.erste-spalte-fest thead th:first-child,
  table.liste.erste-spalte-fest tbody td:first-child,
  table.liste.erste-spalte-fest tfoot td:first-child { position: static; }
  .filterzustand, .schnellwahl, .fortschritt, .aktionen-klebrig, .rollhinweis { display: none !important; }
}

/* =============================================================================
   Artikel, Lager, Inventur - ein Geruest fuer alle sechs Masken
   -----------------------------------------------------------------------------
   Die Masken fuer Artikel, Lager und Inventur hatten drei verschiedene Koepfe
   (`.seitenkopf`, `.einstieg-kopf`, blanke Ueberschrift), drei Bauarten von
   Suchleiste und zwei Arten, eine leere Liste zu erklaeren. Sie folgen jetzt
   demselben Aufbau:

     Seitenkopf   Titel, Zaehler, Werkzeuge
     Untertitel   ein Satz, der die Maske einordnet
     Leiste       Suche oder Filter
     Kennzahlen   wo es etwas zu zaehlen gibt
     Inhalt       Abschnitte und Karten, jede Tabelle im Rahmen

   Hier steht nur, was dieses Geruest an Regeln braucht. Bewusst ausschliesslich
   auf vorhandenen Klassennamen - es kommt kein neuer hinzu.
   ============================================================================= */

/* Untertitel: der eine Satz unter dem Titel, der sagt, wofuer die Maske da ist.
   Den gab es bisher nur auf Einstiegsseiten (`.einstieg-kopf .untertitel`); in
   den Arbeitsmasken fehlte er deshalb ganz. Er steht unter dem Seitenkopf und -
   wo die Maske Reiter hat - unter der Reiterleiste, weil er dann die gewaehlte
   Ansicht beschreibt und nicht die Maske im Allgemeinen. */
.seitenkopf + .hinweistext,
.reiter + .hinweistext {
  margin: 10px 0 14px;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.5;
}
.seitenkopf + .hinweistext { margin-top: -4px; }

/* Suchleiste: die Knopfgruppe sitzt auf der Grundlinie der Felder statt 14 px
   darunter. Dafuer stand bisher in 33 Masken `style="margin:0"` am Element. */
.suchleiste .aktionen { margin-top: 0; }

/* Ein Schalter in der Suchleiste ist so breit wie seine Beschriftung - die
   Mindestbreite eines Eingabefeldes reisst sonst eine Luecke auf. */
.suchleiste .feld-schalter { min-width: auto; }

/* „weitere Eingrenzungen" klappt unter der Suchzeile ueber die volle Breite
   auf, statt sich als weiteres Feld daneben zu quetschen. */
.suchleiste > .faltblock { flex: 1 0 100%; margin: 0; }

/* Bearbeitbare Zellen der Artikelliste (Preise, Lagerdaten): gleiche Breite
   fuer gleiche Groesse - Betraege 92 px, Lagerplatz 120 px. Die Breite stand
   bisher als `style` an jedem einzelnen Feld; auf der Preisseite waren das 150
   Merkmale und rund 3 kB je Seitenaufruf. Ausgewaehlt ueber die Feldnamen,
   weil es die ausschliesslich in dieser Maske gibt - so faengt die Regel keine
   fremde Liste ein. */
table.liste td input[name^="ek["],
table.liste td input[name^="vk["],
table.liste td input[name^="sp["],
table.liste td input[name^="bestand_min["] { width: 92px; }
table.liste td input[name^="lagerplatz["]  { width: 120px; }

/* =============================================================================
   Skiverleih, Auswertung, Warenfluss und Einstiegsseiten
   -----------------------------------------------------------------------------
   Diese vier Bereiche stellten ihre Abstaende und Spaltenbreiten bisher am
   Element ein: 41 Merkmale `style="margin:…"`, `style="width:…"` und
   `style="padding:…"` in 14 Vorlagen, jedes mit einem eigenen Zahlenwert
   (-6, -4, 0, 4, 6, 9, 12 px nebeneinander). Die Werte stehen jetzt hier, auf
   der Leiter aus docs/GESTALTUNG.md, und gelten fuer alle vier Bereiche gleich.

   Neue Klassennamen kommen dabei genau zwei hinzu (`.aktionen-block` und
   `.balken`); alles Uebrige haengt an vorhandenen Bausteinen.
   ============================================================================= */

/* Der Hinweissatz als eigener Absatz. Der Browser gibt einem <p> 1em oben und
   unten - bei 12 px Schrift also 12 px, ein Wert, der auf keiner Sprosse liegt.
   Deshalb hier fest: oben nichts (der Baustein darueber bringt seinen Abstand
   selbst mit), unten eine Sprosse. Die beiden Sonderfaelle weiter oben
   (`.seitenkopf + .hinweistext`, `.reiter + .hinweistext`) sind spezifischer
   und behalten Vorrang. */
p.hinweistext { margin: 0 0 var(--abstand-4); max-width: 78ch; }
p.hinweistext:last-child { margin-bottom: 0; }
/* Steht der Satz unter etwas, das seinen Abstand nicht selbst mitbringt
   (Befundliste, Tabellenrahmen), traegt er ihn: `.abstand-oben` muss die
   Regel darueber schlagen koennen. */
p.hinweistext.abstand-oben { margin-top: var(--abstand-4); }

/* Handlungsreihe mitten in einem Abschnitt - darunter folgt noch etwas
   (Statuswechsel im Leihauftrag, Belegaktionen). Sie braucht denselben
   Abstand nach unten wie nach oben, sonst klebt der naechste Baustein an den
   Tasten. */
.aktionen.aktionen-block { margin-bottom: var(--abstand-4); }

/* Handlungsreihe als Feld eines Rasters (Zahlung erfassen, Beleg anlegen):
   sitzt auf der Grundlinie der Felder wie in der Suchleiste, nicht 16 px
   darunter. Dafuer stand bisher `style="margin:0"` am Element. */
.feldraster > .aktionen,
.feldgruppe > .aktionen { margin-top: 0; align-self: end; }

/* Freies Eingabefeld in einer Handlungsreihe (Stornogrund an der Belegmaske).
   Es steht dort ohne Beschriftung und damit ausserhalb von `.feld` - ohne
   diese Regel bekaeme es gar keine Form. */
.aktionen input[type="text"] {
  padding: var(--abstand-2) var(--abstand-3);
  border: var(--linie-breite) solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--feld-flaeche);
  color: var(--schrift);
  font: inherit;
  font-size: var(--text-liste);
}

/* Spalte, die einen Messbalken traegt. Eine feste Breite ist hier Pflicht:
   nur dann haben die Balken untereinander dieselbe Bezugslaenge, und nur dann
   sagt "halb so lang" auch halb so viel. Vorher standen in den Vorlagen 130,
   150, 160 und 170 px nebeneinander - vier Bezugslaengen fuer dieselbe Sache.
   Das ist eine Ausrichtung und keine Abstandsentscheidung (GESTALTUNG 2.1),
   deshalb steht die Zahl da. */
table.liste th.balken,
table.liste td.balken { width: 160px; }

/* Messbalken in einer Kennzahl (Datengrundlage der Auswertung). Er ordnet
   die Zahl darueber ein und braucht dafuer Luft nach beiden Seiten - vorher
   trugen die vier Kacheln dafuer je zwei `style="margin-top:…"`. */
.kennzahl .messbalken { margin-top: var(--abstand-2); }
.kennzahl .messbalken + .k-text { margin-top: var(--abstand-1); }
/* Zeile mit Bezeichnung und Zeichen ueber der Zahl. Die -2 px setzen das
   Zeichen auf die Grundlinie der Schrift daneben - eine Ausrichtung, kein
   Abstand (GESTALTUNG 2.1). */
.kennzahl .k-text .sym { margin-right: var(--abstand-1); vertical-align: -2px; }

/* Hinweisfeld in einer Positionszeile. Wie die Preisfelder oben ueber den
   Feldnamen ausgewaehlt - es gibt sie nur in Beleg- und Leihauftragsmaske. */
table.liste td input[name^="p_hinweis["] { width: 150px; }

/* Mengenfeld in der Scanleiste: so breit wie eine dreistellige Menge, damit
   der Barcode daneben den Platz bekommt. */
.scanfeld input.zahl { max-width: 90px; }

/* Die gerade geltende Wahl in einer Reihe gleichrangiger Verweise
   (Zeitraumwahl der Auswertung). Ein Zustand, keine Handlung - deshalb ein
   kraeftiger Rahmen und fette Schrift und keine gruene Flaeche. */
.schnellzugriff .btn[aria-current],
.schnellwahl .btn[aria-current] {
  border-color: var(--gruen-dunkel);
  font-weight: 700;
}

/* Zeitraum-Schnellwahl unter der Suchleiste (Verleihliste, Kassenlisten):
   eine Sprosse Abstand zur Liste darunter. Stand vorher als
   `style="margin:-4px 0 10px"` am Element - eine negative Zahl, die es auf
   der Leiter nicht gibt. */
.schnellwahl { margin-bottom: var(--abstand-4); }

/* Wochenende in der Verleihauslastung. Kein eigener Farbwert, sondern die
   Nebenflaeche aus app.css - Hell- und Dunkelthema laufen so ohne Zutun mit.
   Stand vorher als `style="background:var(--flaeche-alt)"` an jeder Zeile,
   bei 60 Tagen also 17-mal je Aufruf. */
table.liste tbody tr.wochenende > td { background: var(--flaeche-alt); }