/* Grundstil der Shell und aller Modul-Oberflaechen (seit 19.10.2026,
   Dashboard-Umbau Teil 2).

   **Quelle ist gemeinsam/web/grundstil.css.** In jedem Modul liegt eine
   Kopie, geschrieben von `node werkzeug/verteilen.mjs`; wer die Kopie
   aendert, verliert die Aenderung beim naechsten Lauf. Warum kopiert und
   nicht geteilt wird: gemeinsam/README.md.

   **Warum es die Datei gibt.** Bis zum 19.10.2026 trug jede der 16
   Oberflaechen ihre eigene Kopie von Farben, Schrift, `[hidden]`, Knoepfen
   und Feldern. Die Werte stimmten bei den Farben noch ueberein, Knoepfe und
   Auswahllisten waren auseinandergelaufen (GUI-Review, Abschnitt 10). Als die
   Shell am selben Tag die dunklere Knopfflaeche, Feldrahmen mit 3:1 und
   eigene Fokusringe bekam, hatte kein einziges Modul davon etwas -- und
   15 Kopien von Hand nachzuziehen ist genau die Lage, aus der gemeinsam/
   entstanden ist (22.09.2026: aus fuenf Kopien von briefpapier.js waren drei
   Fassungen geworden).

   **Eingebunden VOR der eigenen Stilvorlage**, in jeder Seite:
       <link rel="stylesheet" href="grundstil.css">      (Modul, relativ)
       <link rel="stylesheet" href="/grundstil.css">     (Shell)
   So gewinnt bei gleicher Spezifitaet immer das Modul. Was hier steht, ist
   der Sockel, nicht das letzte Wort. test/grundstil-eingebunden.mjs haelt
   Einbindung und Reihenfolge fest.

   **Was NICHT hierher gehoert:** Kopf, h1/h2, Seitenbreite, Tabellen. Die
   Shell (1060 px, h1 28 px) und die Module (1400 px, h1 26 px) sind darin
   verschieden, und eine Regel hier, die die Shell nur teilweise
   ueberschreibt, liesse ihre uebrigen Eigenschaften in die Shell
   durchsickern. Die gemeinsame Kopfleiste (Teil 3, kopfleiste.js) bringt
   ihr Aussehen im Schatten-DOM selbst mit; Seitenkopf und Ueberschrift
   darunter bleiben Sache des Moduls.

   **Neue Auswahlen stehen in `:where()`.** Fokus, Hover der Knopfflaeche,
   Fehlerzustand und Trefferflaechen gab es in den Modulen bisher nicht. Mit
   Spezifitaet null (bzw. nur der Pseudoklasse) gewinnt jede Regel eines
   Moduls, die dasselbe Element schon anders gestaltet -- etwa ein Knopf, der
   wie ein Verweis aussieht (`button.treffer`, `button.teile-schalter`).
   Was vorher schon in jeder Modul-Kopie stand (`button`, `button.ghost`,
   `input[type="search"]` ...), behaelt seine Auswahl und damit seine
   Spezifitaet: Dort aendert sich an der Kaskade nichts. */

/* ---------- Farben und Schrift ---------- */

:root {
	--bg: #141414;
	--surface: #1c1a1c;
	--surface-hover: #232123;
	--border: #3a373a;
	--text: #ffffff;
	--text-muted: #a8a4a8;
	--accent: #f04e2a;          /* Hausfarbe, direkt aus elem-ent.com */

	/* Flaeche des Primaerknopfs, dunkler als die Hausfarbe. Weiss auf #f04e2a
	   ergab 3,60:1, auf dem alten Hover der Shell #ff5f3b 3,02:1 -- unter AA
	   fuer 12- bis 13-px-Schrift (GUI-Review 19.10.2026, nachgerechnet). Auf
	   #c93d1d sind es 5,04:1, auf dem Hover #b83618 5,87:1. Der Hover wird
	   dunkler statt heller, weil jedes hellere Orange unter 4,5:1 faellt
	   (#d84522: 4,38:1). Die Hausfarbe selbst bleibt fuer Rahmen, Akzenttext
	   und Hover-Rahmen, wo sie auf dunklem Grund 4,8 bis 5,1:1 erreicht. */
	--accent-flaeche: #c93d1d;
	--accent-flaeche-hover: #b83618;

	/* Rahmen NUR fuer Eingabefelder und Auswahllisten. Mit --border (#3a373a)
	   erreichte ein Feld 1,47:1 gegen die Flaeche; WCAG 1.4.11 verlangt fuer
	   die Grenze eines Bedienelements 3:1. #6a666a kommt auf 3,07:1 gegen
	   #1c1a1c und 3,26:1 gegen #141414. Kachel-, Karten- und Tabellenrahmen
	   bleiben bewusst leise auf --border: Sie gliedern, man bedient sie nicht. */
	--border-feld: #6a666a;

	--danger-border: #7a2a1a;
	--danger-bg: #2a1512;
	--danger-text: #ff9d85;

	/* Zustandsfarben. Bewusst getrennt von --accent: Die Hausfarbe heisst
	   "anklickbar", nicht "achtung".
	   --warn-border/--warn-bg standen bis zum 19.10.2026 in der Shell als
	   #6a541a/#241f10 und in Archiv und Ausgangsrechnungen als #6b5520/#241d0e
	   -- je ein bis zwei Stufen je Kanal, mit blossem Auge nicht zu sehen.
	   Es gilt die Fassung der Shell. Mahnwesen und ToDo benutzten beide Namen,
	   ohne sie zu definieren: Der Rahmen fiel dort auf die Textfarbe zurueck,
	   der Grund auf durchsichtig. Seit dieser Datei sind sie ueberall da. */
	--ok-text: #6fcf8b;
	/* Rahmen zu --ok-text und die Info-Farben (seit 19.10.2026, Chips): bis
	   dahin als Zahl in den Rechnungsentwuerfen (#2f5a37), im Hinweisbalken
	   und in der Hinweisliste der Verwaltung (#8fbbe8/#2c4766). Werte
	   uebernommen, nicht neu gewaehlt. */
	--ok-border: #2f5a37;
	--info-text: #8fbbe8;
	--info-border: #2c4766;
	/* Die Hausfarbe als SCHRIFT auf Etiketten (10 px): einen Hauch heller,
	   weil #f04e2a auf der Hover-Zeile #232123 nur 4,44:1 erreicht, #f25a37
	   dort 4,79:1 und auf --surface 5,18:1. Mit blossem Auge kein Unterschied. */
	--accent-text: #f25a37;
	--warn-text: #e8b84b;
	--warn-border: #6a541a;
	--warn-bg: #241f10;

	--font: "DIN Next LT Pro", "DIN Next", "Segoe UI", system-ui, sans-serif;
	--mono: ui-monospace, "SF Mono", Consolas, monospace;
}

/* `hidden` muss `hidden` bleiben.

   Das Attribut wirkt nur ueber die Regel `[hidden] { display: none }` aus dem
   Standardstil des Browsers -- und die verliert gegen JEDE Regel von uns, die
   `display` setzt (`.haken { display: inline-flex }`, `a.ghost { display:
   inline-block }` ...). Am 09.09.2026 stand so der Verwaltungs-Knopf der
   Shell fuer jeden Zugang da; im Quelltext war nichts zu sehen, nur im Bild.
   `!important` ist sonst ein schlechtes Zeichen; hier ist es das Richtige:
   Es gibt keinen Fall, in dem ein Element mit `hidden` sichtbar sein soll.
   test/hidden-bleibt-hidden.mjs haelt die Regel fest. */
[hidden] { display: none !important; }

/* Die Hausschrift, ab Wurzel geladen: /assets/ liefert die Shell aus, auch
   unter einem Modulpfad (Caddy reicht /assets/ an die Shell).

   Schriftmasse korrigiert (ascent/descent-override), seit dem 13.08.2026 in
   der Shell. DIN Next liefert Aufstrich 85 % und Abstrich 35 %; der Browser
   zentriert eine Zeile ueber die Summe beider, optisch mittig ist aber die
   Versalhoehe (68 %). Ohne die Korrektur sitzt der Text in Chips, Knoepfen
   und Feldern rund 9 % der Schriftgroesse zu hoch: am 19.10.2026 an den Chips
   der Rechnungsentwuerfe vom Nutzer bemerkt, nachgemessen 2,5 px bei 11 px.
   94 - 26 = 68 setzt die Mitte auf die Versalhoehe, die Summe bleibt 120 %,
   die Zeilenhoehe also gleich. test/schriftmasse.mjs haelt sie fest. */
@font-face {
	font-family: "DIN Next LT Pro";
	src: url("/assets/fonts/DINNextLTPro-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	ascent-override: 94%; descent-override: 26%;
}
@font-face {
	font-family: "DIN Next LT Pro";
	src: url("/assets/fonts/DINNextLTPro-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	ascent-override: 94%; descent-override: 26%;
}

* { box-sizing: border-box; }

/* Die Shell setzt darueber Zeilenhoehe 1,6 und 16 px; die Module bleiben
   bei 1,5. */
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-weight: 300;
	line-height: 1.5;
}

/* ---------- Kopfleiste ---------- */

/* Die gemeinsame Kopfleiste (kopfleiste.js, seit 19.10.2026) zeichnet sich
   selbst im Schatten-DOM. Hier steht nur ihr Platzhalter, solange das Skript
   noch nicht gelaufen ist: Es ist `defer` eingebunden, und ein Browser darf
   die Seite schon vorher einmal zeichnen. Ohne die 56 px sprang die Seite
   dann um die Hoehe der Leiste nach unten. Beim Drucken ist sie weg, auch
   wenn das Skript nie lief.

   Ersetzt den Rueckweg `«Übersicht` (`.zurueck`), der bis dahin auf 28
   Seiten von Hand stand und an dieser Stelle gestaltet war. */
webos-kopfleiste:not(:defined) {
	display: block;
	height: 56px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
@media print { webos-kopfleiste { display: none !important; } }

/* ---------- Hinweis und Fehlerkasten ---------- */

/* Die Shell begrenzt beide auf 68 Zeichen (schmalere Seite), die Module auf
   80 bzw. gar nicht. */
.hinweis {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 80ch;
}

.fehlerbox {
	border: 1px solid var(--danger-border);
	background: var(--danger-bg);
	color: var(--danger-text);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 24px;
}

/* ---------- Felder ---------- */

/* Dieselbe Auswahl wie bis dahin in jeder Modul-Kopie, nur mit dem Rahmen
   der Felder statt dem der Kacheln. Textfelder gestalten die Module selbst
   (`.feld input`, in der Shell `input[type="text"]` mit voller Breite) --
   eine Regel hier fuer alle Textfelder haette deren Breiten und Abstaende
   ueberschrieben. */
input[type="search"],
input[type="date"],
select {
	padding: 9px 12px;
	border: 1px solid var(--border-feld);
	border-radius: 0;
	background: #111;
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
}

/* Die Auswahlliste mit eigenem Pfeil statt dem des Betriebssystems: Unter
   Windows zeichnete Chrome sie bis dahin hellgrau gerahmt mit schwarzem
   Pfeil, neben DIN-Feldern ein Fremdkoerper. **Hintergrund ausdruecklich, an
   `select` UND `option`:** Mit durchsichtigem Grund zeichnet Chrome unter
   Windows die aufgeklappte Liste weiss, und die weisse Schrift darauf ist
   unsichtbar (am 13.08.2026 in einer Nachbaranwendung passiert; ohne Namen,
   weil die Datei ohne Anmeldung ausgeliefert wird, siehe DOKUMENTATION.md,
   „Die Anmeldeseite gibt nichts preis“).

   **Wer einem select im Modul einen eigenen Grund oder ein eigenes Polster
   gibt:** `background-color` statt der Kurzform `background` (die setzt das
   Bild zurueck und nimmt den Pfeil mit), und rechts 34 px Platz lassen. Am
   19.10.2026 an zehn Regeln umgestellt bzw. an neun ergaenzt, nachdem die
   ToDo-Liste am Pruefstand eine Auswahl ohne Pfeil zeigte, die aussah wie
   ein Textfeld. test/grundstil-eingebunden.mjs prueft die Kurzform. */
select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}

select option {
	background-color: #111;
	color: var(--text);
}

/* Suchfelder mit Lupe und dem Hinweis "/" wie auf der Uebersicht (seit
   21.10.2026, Zuruf: "die Icons und das / im Suchfeld wie Dashboard").
   Beides als Hintergrundbild, damit kein Modul sein Seitengeruest aendern
   muss: Ein Element fuer "/" braeuchte einen Rahmen um jedes Feld, und der
   veraenderte die Breiten in den Werkzeugleisten.

   **`body` davor:** Die Shell (Admin, Sicherungen) setzt fuer Suchfelder ein
   eigenes `padding` in derselben Gewichtung, und ihre Stilvorlage kommt nach
   dieser; ohne den Vorsprung laege Text auf der Lupe. Die Kachelsuche der
   Uebersicht hat eine eigene, noch staerkere Regel und bleibt, wie sie ist.
   Wer einem Suchfeld im Modul einen Grund gibt: `background-color`, nicht
   die Kurzform (wie bei `select` oben).

   **"/" nur an dem Feld, in das die Taste springt** (`data-schraegstrich`,
   gesetzt von kopfleiste.js) und nur, solange das Feld leer ist und nicht
   den Fokus hat -- dann gehoert der Platz dem Text. Mit dem Finger nicht:
   Dort gibt es keine Taste "/". Die Linie ist gezeichnet, nicht geschrieben,
   damit sie nicht von der Schrift des Systems abhaengt. Farben wie die
   Taste auf der Uebersicht: Rahmen --border-feld, Zeichen --text-muted. */
body input[type="search"] {
	padding-left: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5l4 4' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
}
body input[type="search"][data-schraegstrich]:not(:focus):not(:disabled):placeholder-shown {
	padding-right: 40px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5l4 4' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Crect x='.5' y='.5' width='19' height='21' fill='none' stroke='%236a666a'/%3E%3Cpath d='M12.2 6.5L7.8 15.5' stroke='%23a8a4a8' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 12px center, right 10px center;
}
@media (pointer: coarse) {
	body input[type="search"][data-schraegstrich]:not(:focus):not(:disabled):placeholder-shown {
		padding-right: 12px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5l4 4' stroke='%23a8a4a8' stroke-width='1.5'/%3E%3C/svg%3E");
		background-position: 12px center;
	}
}

/* ---------- Fokus ---------- */

/* Eigener Fokusring fuer alles, was man bedient. Vorher zeichnete nur der
   Browser, und in den Modulen nahm `input:focus { outline: none }` dabei
   JEDEM Kaestchen den Ring, weil die Regel nicht nach Art des Feldes fragte.
   `:focus-visible`, damit ein Mausklick keinen Ring hinterlaesst. */
:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* Felder zeigen den Fokus am Rahmen: Hausfarbe und ein zweiter Pixel als
   Schatten, damit es nicht nur ein Farbwechsel an einer 1-px-Linie ist.
   Nur Felder, in die man schreibt oder waehlt -- Kaestchen und Knoepfe
   behalten den Ring oben. */
:where(input[type="text"], input[type="search"], input[type="date"], input[type="number"],
	input[type="password"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="datetime-local"], input[type="time"], input[type="month"], input:not([type]),
	select, textarea):focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

/* Fehlerzustand eines Feldes (Grundstil-Tafel vom 19.10.2026): Rahmen in der
   Fehlerfarbe, die Meldung daneben per `aria-describedby`. Gesetzt wird er
   mit `aria-invalid="true"`, damit ihn auch ein Bildschirmleser ansagt. */
:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--danger-text);
}

/* ---------- Knoepfe ---------- */

/* Primaerknopf: Flaeche in --accent-flaeche (siehe oben). In den Modulen
   stand er bis zum 19.10.2026 auf der Hausfarbe, mit 3,60:1 fuer die weisse
   Schrift. Groesse wie in den Modulen; die Shell setzt ihre groessere
   (13 px, 13 x 22 Polster) selbst. */
button {
	padding: 9px 16px;
	border: 1px solid var(--accent-flaeche);
	border-radius: 0;
	background: var(--accent-flaeche);
	color: #fff;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

/* Dunkler beim Ueberfahren, wie in der Shell. In den Modulen gab es vorher
   gar keinen Hover am Primaerknopf. `:where()`: Knoepfe, die ein Modul als
   Verweis, Reiter oder Treffer gestaltet, behalten ihren Hintergrund. */
:where(button:not(:disabled)):hover {
	background: var(--accent-flaeche-hover);
	border-color: var(--accent-flaeche-hover);
}

/* .45 wie bis dahin in Anzeigen, Briefen und den fuenf Modulen mit der
   langen Kopie; die acht mit der kurzen hatten keinen gesperrten Zustand,
   ein gesperrter Knopf sah dort aus wie ein druckbarer. */
button:disabled { opacity: .45; cursor: default; }

/* Der zweitrangige Knopf, wie die Ghost-Buttons der Website. */
button.ghost {
	background: transparent;
	border-color: var(--border);
	color: var(--text-muted);
}
/* :not(:disabled), damit ein gesperrter Knopf beim Ueberfahren nicht
   aufleuchtet und druckbar aussieht -- am 17.09.2026 in den Anzeigen am
   Loeschen-Knopf gefunden und bis dahin nur dort behoben. */
button.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* ---------- Chips, Etiketten, Zaehler (seit 19.10.2026) ---------- */

/* Drei Formen fuer kleine Beschriftungen, und nur drei. Bis zum 19.10.2026
   standen 23 Grundregeln in 16 Stilvorlagen, in 16 Formen: `.marke` allein in
   sieben Modulen und der Shell fuenfmal anders (gerundet oder eckig, Versalien oder nicht,
   10 oder 11 px, Light oder Bold), dazu `.status`, `.stand`, `.zustand`,
   `.etikett`, `.befundart`, `.feuer-tag`, `.quelle`, `.tag`, `.hinweis-art`
   und drei Etiketten in den Rechnungsentwuerfen. Dieselbe Auskunft sah je
   Modul anders aus: "erledigt" gruen, "abgeschlossen" orange, "freigegeben"
   gruen, "stimmt ueberein" weiss. Die Bestandsaufnahme steht in
   gemeinsam/README.md.

   **Welche Form wofuer:**
   - `.status` -- der ZUSTAND eines Datensatzes, der sich im Lauf der Arbeit
     aendert: Entwurf, zur Freigabe, freigegeben, offen, erledigt, versendet,
     faellig, storniert. Pille (Tafel "Grundstil": gerundet, 11 px,
     Versalien), Bold, .06em.
   - `.etikett` -- eine EIGENSCHAFT, die bleibt: Art (Abschlag, Anzahlung,
     Gemeinkosten), Herkunft eines Belegs, Probe, Rolle, "in Planung" an
     einer Kachel, ein Datenmangel (Grund fehlt). Eckig, 10 px, Bold, .1em.
     Eckig, damit man Zustand und Eigenschaft in einer Zeile nebeneinander
     auseinanderhaelt, ohne zu lesen.
   - `.zaehler` -- eine Zahl neben einem Reiter oder Filter: leiser als der
     Name, ungesperrt, Ziffern gleich breit (sonst springt der Reiter, wenn
     aus 9 eine 10 wird).

   **Farbe sagt, was zu tun ist, nicht was es ist:** `.ok` erledigt/in
   Ordnung, `.warn` braucht Aufmerksamkeit, `.danger` Fehler oder Widerspruch,
   `.info` laeuft gerade, ohne Zusatz neutral (Ausgangszustand, nichts zu
   tun). `.accent` nur fuer Etiketten, die etwas hervorheben (neu, WebOS,
   Abschlag, Abweichung): Die Hausfarbe heisst "anklickbar", ein Zustand in
   Orange liest sich wie ein Verweis. Das Wort steht immer da, die Farbe hilft
   nur beim Ueberfliegen.

   **Kontrast** der Schrift, am Pruefstand am wirksamen Grund gemessen und
   fuer die Flaechen nachgerechnet (19.10.2026), auf --surface / auf der
   Hover-Zeile --surface-hover #232123 (dem dunkelsten Grund, auf dem Chips
   stehen): neutral 7,04 / 6,50, ok 9,04 / 8,36, warn 9,38 / 8,67, danger
   8,58 / 7,93, info 8,60 / 7,95, accent 5,18 / 4,79. Auf --bg, im Feld und
   auf --danger-bg/--warn-bg jeweils mindestens so viel wie auf der
   Hover-Zeile. **Die Hausfarbe selbst (#f04e2a) reichte dafuer nicht**:
   4,80 auf der Flaeche, aber 4,44 auf der Hover-Zeile, und die
   Rechnungsentwuerfe zeigen "Abschlag" genau in solchen Zeilen. Deshalb
   schreibt das Akzent-Etikett in --accent-text (oben), der Rahmen bleibt in
   der Hausfarbe.

   **Hoehe ausdruecklich in px**, nicht ueber die Zeilenhoehe des Rumpfes:
   Die Shell setzt 1,6, die Module 1,5; ein Chip waere sonst in der Shell
   hoeher als im Modul. Status 16 + 2 x 2 + 2 = 22 px, Etikett 14 + 2 + 2 =
   18 px. Die Schrift sitzt dank ascent/descent-override (oben) mittig auf
   der Versalhoehe; ein Polster-Ausgleich ist nicht noetig und waere falsch.

   **Ausgewogen trotz Sperrung:** Die Sperrung haengt auch hinter dem letzten
   Buchstaben an. Beim Etikett sind das 1 px, deshalb rechts 6 statt 7 px
   Polster; beim Status 0,66 px, das sieht niemand.

   **Was ein Modul daran setzen darf:** Abstand (`margin`), `vertical-align`,
   `opacity`, `text-decoration` (verworfen), `border-style` (gestrichelt fuer
   etwas, das noch nicht gilt), `cursor`. NICHT Schrift, Polster, Rundung,
   Farbe -- dafuer gibt es die Zusaetze. test/chips-einheitlich.mjs prueft
   das an jeder Stilvorlage und dass die alten Namen weg sind.

   **Nicht hier:** die Marke im Hinweisbalken (hinweise.js, Schatten-DOM,
   11 px mit fester Mindestbreite: Sie steht vor einer Zeile Fliesstext in
   einem farbigen Streifen und ist dessen Ueberschrift, kein Etikett), die
   Filterchips (Gefahrgutliste, Projektergebnis: Knoepfe, keine
   Beschriftung), und Zeilen wie der Zaehler auf einer Kachel der
   Uebersicht (`.meldezahl`), die ein Satz sind und keine Zahl. */
.status {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-muted);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.etikett {
	display: inline-block;
	padding: 1px 6px 1px 7px;
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text-muted);
	font-family: var(--font);
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

:is(.status, .etikett).ok     { color: var(--ok-text);     border-color: var(--ok-border); }
:is(.status, .etikett).warn   { color: var(--warn-text);   border-color: var(--warn-border); }
:is(.status, .etikett).danger { color: var(--danger-text); border-color: var(--danger-border); }
:is(.status, .etikett).info   { color: var(--info-text);   border-color: var(--info-border); }
.etikett.accent               { color: var(--accent-text); border-color: var(--accent); }

.zaehler {
	margin-left: 6px;
	color: var(--text-muted);
	font-weight: 300;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
/* Nur wo die Zahl eine Aufgabenliste zaehlt (Deal Funnel: Wiedervorlagen,
   Grund fehlt, Veraltet) -- dort heisst jede Zahl ueber null "zu tun". */
.zaehler.warn { color: var(--warn-text); }

/* ---------- Trefferflaechen auf Touch-Geraeten ---------- */

/* Empfohlen sind 44 px. Knoepfe der Module waren 30 bis 34 px hoch, Felder
   rund 38. Nur bei `pointer: coarse`: Mit der Maus trifft man auch kleine
   Flaechen, und am Schreibtisch sollen die Knoepfe nicht aufquellen. Ein
   Knopf zentriert seinen Inhalt von selbst, die Schrift bleibt in der Mitte.
   `:where()`, damit ein Modul fuer einen Knopf, der als Verweis im Text
   steht, `min-height: 0` setzen kann, ohne zu kaempfen. */
@media (pointer: coarse) {
	:where(button, select, input[type="text"], input[type="search"], input[type="date"],
		input[type="number"], input[type="password"], input[type="email"], input[type="tel"],
		input[type="url"], input[type="datetime-local"], input[type="time"], input[type="month"]) {
		min-height: 44px;
	}
}