/* =========================================================
QS-Modul – Musterseite (Stufe 1a, Design-Review)
Nur das, was die QS-Seiten ZUSÄTZLICH zur bestehenden style.css
brauchen. Die 79 KB von style.css werden hier nicht kopiert.
=========================================================
Vorausgesetzt aus C:\Entwicklung\Projekt-Leitstand\Leitstand-Online-Probe\style.css
(diese Datei liegt in der echten Auslieferung neben qs.css und wird VOR
qs.css eingebunden – siehe in qs-muster.html):
Farb-/Schrift-Variablen (:root):
--brand-primary --brand-accent --font-heading --font-body
--surface-1 --page-plane --text-primary --text-secondary --text-muted
--gridline --baseline --border --weekend-bg --urgent --danger
--success-text
Basis-Regeln:
* { box-sizing: border-box; }
html, body (Schrift, Grundfarbe, Hintergrund)
[hidden] { display: none !important; } -- Zeile 909 in style.css
Bausteine (unverändert weiterverwendet, hier NICHT neu definiert):
.toolbar .brand-mark .toolbar h1
.page-nav .page-nav-link .page-nav-link:hover .page-nav-link.active
.ansicht-schalter .ansicht-btn .ansicht-btn:hover .ansicht-btn.active
(wiederverwendet für den Büro/Tablet-Schalter dieser Seite)
.btn .btn:hover .btn-primary .btn-primary:hover
.btn-danger .btn-danger:hover
.dialog-actions .spacer .hint
Alles unten mit Präfix "qs-" ist neu und nur für QS-Seiten gedacht. Ob es
später nach style.css wandert, entscheidet sich erst mit dem Datenmodell –
diese Seite zeigt bewusst nur das Aussehen.
Abweichungen von der Leitstand-Optik und warum, siehe Bericht
design-muster-report.md. Kurzfassung: kein .app{height:100vh} (diese Seite
ist eine lang scrollende Dokumentseite, keine Ein-Bildschirm-Tafel wie der
Monitor); .btn.klein ist hier neu definiert, weil style.css keine kleine
Knopf-Variante kennt (wartung.css hat sie, aber die gilt nicht als
Grundlage für dieses Modul).
Farben: es werden ausschließlich vorhandene Variablen wiederverwendet,
keine neuen Farbwerte. Kontrastwerte für die neu KOMBINIERTEN Stellen
stehen im Bericht (IO/NIO-Knöpfe, roter Rahmen bei Grenzverletzung,
„keine Aussage"-Text).
========================================================= */
/* ---------- Seitenrahmen ---------- */
.qs-app { min-height: 100%; }
.qs-seite {
max-width: 1180px;
margin: 0 auto;
padding: 22px 20px 60px;
}
/* ⚠️ EINE SEITE DARF DIE 1180 PX VERLASSEN - ueber diese Klasse, nicht global
(14.09.2026). Die Freigabemaske traegt bis zu 99 Teilspalten nebeneinander;
gemessen bei 1920 x 1080 mit Umfang 20: die Seitenspalte war 1180 px breit,
die Tabelle 2567 px - also 1471 px zu verschieben, mehr als eine Bildschirm-
breite, waehrend 740 px Fensterrand leer blieben. Thomas am 14.09.2026:
"so breit es geht wie auf dem Bild" (das Altsystem nutzt die volle Breite).
⚠️ NUR MIT DER KLASSE, und das ist der Punkt. Ohne sie waeren IPC-Maske,
Kartenliste und Pruefplan gleich mitgeaendert - danach hat niemand gefragt,
und ein Fliesstext ueber 2560 px ist schlechter lesbar, nicht besser. Wer
eine weitere Seite breit haben will, setzt die Klasse dort ans . */
.qs-seite.ist-breit { max-width: none; }
.qs-kopf { padding: 20px 0 4px; }
.qs-kopf h1 { font-size: 22px; }
.qs-platzhalter-hinweis {
margin: 6px 0 18px;
font-size: 13px;
font-style: italic;
color: var(--text-muted);
}
/* Kurznavigation zu den Bausteinen weiter unten auf der Seite */
.qs-toc {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 26px;
padding: 0;
list-style: none;
}
.qs-toc a {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
background: var(--weekend-bg);
color: var(--text-secondary);
text-decoration: none;
}
.qs-toc a:hover { background: var(--border); color: var(--text-primary); text-decoration: none; }
/* ---------- Bausteinblöcke ---------- */
.qs-block {
margin: 0 0 40px;
padding: 20px 0 0;
border-top: 1px solid var(--border);
}
.qs-block:first-of-type { border-top: none; padding-top: 0; }
.qs-block h2 {
font-family: var(--font-heading);
font-size: 17px;
margin: 0 0 4px;
color: var(--text-primary);
}
.qs-block .qs-block-hinweis {
font-size: 12.5px;
color: var(--text-muted);
margin: 0 0 14px;
}
/* ---------- Karte (fehlt in style.css, dort gibt es nur die Zeitstrahl-Optik) ---------- */
.qs-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* ---------- 1. Kopf einer Laufkarte ---------- */
.qs-laufkarte-kopf {
display: flex;
flex-wrap: wrap;
gap: 22px;
align-items: flex-start;
}
.qs-lk-feld { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.qs-lk-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}
.qs-lk-wert { font-size: 15px; font-weight: 600; color: var(--text-primary); }
/* Zustandspille des Kartenkopfes. UMBENANNT am 26.08.2026 (Aufgabe 3):
ist-laeuft / ist-gesperrt / ist-wartend stammten aus der Musterseite und
sind auf KEINE Spalte abbildbar - qs.laufkarte hat keine Statusspalte und es
gibt keine Status-Nachschlagetabelle. Geblieben sind die zwei Werte, die die
Spalte `abgeschlossen` wirklich hergibt. Ein dritter Wert waere eine
erfundene Wahrheit auf dem Bildschirm.
ist-offen ist UMRANDET, nicht gefuellt. Grund, gemessen am 26.08.2026:
weiss auf --brand-primary ergibt 3,67 und reisst damit die 4,5 fuer Text
(12,5 px fett ist kein Grosstext). Als Rahmen genuegen 3,0, und der Text
steht mit --text-primary bei 19,17. Gefuellt bleibt nur ist-abgeschlossen:
--text-secondary auf --gridline ist gemessen 6,00. */
.qs-status {
display: inline-block;
padding: 3px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
}
.qs-status.ist-offen {
background: var(--surface-1);
color: var(--text-primary);
box-shadow: inset 0 0 0 1.5px var(--brand-primary);
}
.qs-status.ist-abgeschlossen {
background: var(--gridline);
color: var(--text-secondary);
}
/* ---------- Tabellen (fehlen generisch in style.css; table.liste gibt es nur in wartung.css) ---------- */
.qs-tabelle-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-1);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.qs-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.qs-tabelle th {
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
padding: 9px 12px;
border-bottom: 1px solid var(--baseline);
white-space: nowrap;
background: var(--surface-1);
}
.qs-tabelle td {
padding: 9px 12px;
border-bottom: 1px solid var(--gridline);
color: var(--text-primary);
white-space: nowrap;
}
.qs-tabelle tr:last-child td { border-bottom: none; }
.qs-tabelle tr:hover td { background: var(--weekend-bg); }
.qs-tabelle td.qs-grenzwert { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* --text-secondary statt --text-muted: die Fussnote sagt, WAS eine Spalte
zaehlt, und im Altsystem ist genau diese Spalte nachweislich falsch. Ein
Satz, der einen Zahlenwert erklaert, darf nicht der schwaechste Text der
Seite sein. Gemessen: 3,50 gegen 7,73. */
.qs-tabelle-fussnote { font-size: 11.5px; color: var(--text-secondary); margin: 8px 2px 0; }
/* Ergebnisfarben in Tabellenzellen (Text, keine Fläche – siehe Kontrastwerte im Bericht)
⚠️ DIE ZWEITE ZEILE JE REGEL IST DER EIGENTLICHE PUNKT und war bis zum
26.08.2026 nicht da. Gemessen an qs-muster.html: `.qs-io` allein hat die
Spezifität (0,1,0), `.qs-tabelle td` hat (0,1,1) und setzt `color:
var(--text-primary)`. Eine Zustandsklasse AN einer Zelle wurde damit
schwarz — `rgb(11, 11, 11)` statt `rgb(0, 99, 0)`, gemessen, nicht
überlegt.
Es war kein theoretischer Mangel: das Freigaberaster der Musterseite trägt
`qs-tabelle qs-freigabe-tabelle` und setzt die Klassen an die Zellen. Sein
EINER absichtlicher n.i.O.-Ausreißer war nie rot, sondern schwarz wie alle
anderen — eine Musterseite, die etwas anderes zeigte, als sie behauptete.
Die Hausregel bleibt: die Marke gehört in ein `` IN der Zelle. Die
qualifizierte Fassung ist das Netz darunter, damit eine Klasse an der Zelle
nicht mehr lautlos schwarz wird. Vorbild: `.qs-tabelle td.qs-grenzwert`. */
.qs-io { color: var(--success-text); font-weight: 700; }
.qs-tabelle td.qs-io { color: var(--success-text); }
.qs-nio { color: var(--urgent); font-weight: 700; }
.qs-tabelle td.qs-nio { color: var(--urgent); }
/* ---------- 3. Erfassungsmaske ---------- */
.qs-fortschritt {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.qs-fortschritt-balken {
display: inline-block;
width: 180px;
height: 6px;
border-radius: 999px;
background: var(--gridline);
overflow: hidden;
}
/* ⚠️ DIE BREITE IST 0 UND KOMMT SONST AUS DEM ZÄHLER. Hier stand
`width: 4.2%` mit der Begründung „12 von 288 – fest, weil diese Seite
ohne Daten läuft". Zwei Dinge daran waren falsch:
1. **288 ist die Zahl einer ANDEREN Maske** (Freigabemessung). Für
`qs-ipc` lautet sie 28. Ein Balken, der immer auf 4,2 % steht, sieht
dabei nicht kaputt aus, sondern plausibel — die schlimmste Art
Platzhalter.
2. Der naheliegende Ersatz `width: var(--qs-anteil, 0%)` ist eine
FALLE. Am 27.08.2026 an einer 200-px-Bahn gemessen:
nicht gesetzt -> 0 px (der Ausweichwert greift)
`10.7%` -> 21 px
`NaN%` -> 200 px -- die GANZE Bahn
`Infinity%` -> 200 px
`undefined` -> 200 px
Der Ausweichwert einer `var()`-Funktion greift nur, wenn die
Eigenschaft ungesetzt oder leer ist. Bei einem UNGÜLTIGEN Wert wird
die Deklaration erst bei der Wertberechnung ungültig, und `width`
fällt auf seinen Anfangswert `auto` — ein Blockelement füllt damit
seinen Elternknoten. Aus „keine Daten" würde „alles fertig".
Und `NaN` ist genau, was `0/0` liefert: eine Karte ohne Merkmale.
Deshalb steht hier `0`, und nur eine GEPRÜFTE Prozentzahl wird nach
`style.width` geschrieben. Ungültiges erreicht das CSS nie.
Der Prüffall dazu steht in `qs-erfassung-probe.js` und misst die Falle
selbst nach — sonst wäre dieser Verzicht eine Behauptung. */
.qs-fortschritt-anteil {
display: block;
height: 100%;
width: 0;
background: var(--brand-primary);
}
.qs-checkbox-feld {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 14px;
cursor: pointer;
}
.qs-ankreuzfeld {
width: 16px;
height: 16px;
accent-color: var(--brand-primary);
cursor: pointer;
}
.qs-merkmal-liste { display: flex; flex-direction: column; gap: 14px; }
.qs-merkmal-zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-1);
}
.qs-merkmal-kopf {
display: flex;
flex-direction: column;
min-width: 190px;
flex: 0 0 190px;
}
.qs-merkmal-nr {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
}
.qs-merkmal-name { font-size: 13.5px; color: var(--text-primary); }
/* Die Pruefmittelnummer unter P-Nummer und Namen (08.09.2026, Punkt 2 der
To-Do-Liste). `display: block` steht mit Absicht da: in der IPC-Maske
sitzt sie in einem Spalten-Flexkasten und braeuchte es nicht, im
Freigaberaster aber in einem
neben zwei Inline-Spans - ohne die
Angabe stuende sie dort HINTER dem Namen statt darunter. Eine Regel fuer
beide Masken, nicht zwei. */
.qs-merkmal-mittel {
display: block;
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
}
.qs-messwert { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; }
.qs-messwert-eingabe {
width: 130px;
font: inherit;
font-size: 14px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--page-plane);
color: var(--text-primary);
}
/* Mangel 1, behoben am 26.08.2026: hier stand `outline: 2px solid
var(--weekend-bg)`, und --weekend-bg ist rgba(11,11,11,0.035) - 3,5 %
Deckung, auf --surface-1 praktisch nicht zu sehen. Ein Messwertfeld, dessen
Fokus man nicht findet, ist im Messraum ein Bedienfehler mit Nachweis.
--brand-primary steht gemessen bei 3,57 gegen --surface-1: fuer Text zu
wenig, fuer einen Umriss genug (Schwelle 3,0). */
.qs-messwert-eingabe:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; border-color: var(--brand-primary); }
/* Die Einheit neben dem Zahlenfeld (Plan 1d, Aufgabe 5). Sie war nicht zu
sehen: die Spalte `einheit` wird geholt und stand im Bild nirgends - eine
Spalte zu holen und nicht zu zeigen ist entweder Verschwendung oder ein
Vergessen, und ein Mass ohne Einheit ist unvollstaendig. Gefunden am
27.08.2026 im Bildschirmfoto, nicht in einer der 20 Messungen.
Kraeftiger als .qs-grenzen: die Einheit gehoert zum Wert, die Grenzen sind
Beiwerk. */
.qs-einheit {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.qs-grenzen { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.qs-io-nio { display: flex; gap: 10px; flex: 1 1 auto; }
.qs-btn-io, .qs-btn-nio {
min-width: 64px;
min-height: 36px;
padding: 8px 18px;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--surface-1);
color: var(--text-primary);
cursor: pointer;
}
.qs-btn-io:hover { border-color: var(--brand-primary); }
.qs-btn-nio:hover { border-color: var(--urgent); }
.qs-btn-io.is-aktiv { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.qs-btn-nio.is-aktiv { background: var(--urgent); border-color: var(--urgent); color: #fff; }
/* Kleine Knopf-Variante – style.css kennt sie nicht, wartung.css schon
(dort padding 5px 12px / 12px), hier bewusst als eigene, für QS gedachte
Definition, bis geklärt ist, ob sie gemeinsam wandert. */
.btn.klein { padding: 5px 12px; font-size: 12px; }
.qs-bemerkung-feld { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.qs-bemerkung-feld label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.qs-bemerkung {
width: 100%;
min-height: 64px;
font: inherit;
font-size: 13px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--page-plane);
color: var(--text-primary);
resize: vertical;
}
/* Grenzverletzung: roter Rahmen statt roter Fläche, damit der Wert selbst
lesbar bleibt. Kontrast Rand/Untergrund siehe Bericht (rund 4,7:1).
⚠️ SIE STEHT HIER UNTEN, und das ist der Fehler, den sie vorher hatte.
Gemessen am 27.08.2026: an einer `textarea.qs-bemerkung.qs-feld-verletzt`
blieb der Rand bei 1 px. Beide Regeln haben die Spezifität (0,1,0), also
entscheidet allein die Reihenfolge — und `.qs-feld-verletzt` stand VOR
`.qs-bemerkung`. Am Zahlenfeld wirkte sie (das steht davor), an der Textarea
versagte sie LAUTLOS: das Feld sah aus wie ein gültiges.
Verschoben, nicht verdoppelt. Eine qualifizierte Zweitfassung
`.qs-bemerkung.qs-feld-verletzt` wäre die zweite Stelle für dieselbe Sache —
und die erste, die abtreibt. Wer künftig ein Feldformat NACH dieser Regel
einfügt, nimmt ihr die Wirkung an genau diesem Feld. */
.qs-feld-verletzt {
border: 2px solid var(--urgent);
background: color-mix(in srgb, var(--urgent) 6%, var(--page-plane));
}
/* ---------- PIN-Tastenfeld (Plan 1d, Aufgabe 1) ----------
Neu, weil es im ganzen Leitstand keinen Baustein dafür gibt: gemessen am
27.08.2026 null Treffer für `keypad`, `tastenfeld`, `ziffernblock`, `numpad`
und `pin-taste`. Vorhanden sind nur die Nachbarteile `.scan-input`
(7 Dateien), `.btn-touch` (4) und `.scan-dialog-touch` (3).
⚠️ `.btn` ist KEINE Grundlage: es kommt mit `padding: 7px 14px` und
`border-radius: 20px` und ist damit eine Pille, keine Taste.
⚠️ DAS FINGERMASS GILT UNBEDINGT und steht deshalb NICHT in den zwei
Touch-Blöcken. Ein PIN-Feld ist nie eine Bürobedienung — es wird in der
Halle bedient, mit Handschuh, von jemandem, der in der anderen Hand ein
Messmittel hält. Ein Maß, das nur am Tablet gilt, wäre hier ein Fehler,
und die Doppelung wäre sinnlos. Ein Prüffall hält das fest. */
.qs-tastenfeld {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: 240px;
}
.qs-taste {
min-width: 48px;
min-height: 48px;
font-family: var(--font-body);
font-size: 20px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--page-plane);
color: var(--text-primary);
cursor: pointer;
}
/* ⚠️ DIE NULL GEHOERT IN DIE MITTE, gefunden am 27.08.2026 im
Bildschirmfoto. Ohne diese Regel landet die zehnte Taste in Zeile 4,
Spalte 1 - also LINKS unten. Auf jedem Telefon- und
Geldautomatentastenfeld steht die 0 mittig unter der 8, und wer sie dort
erwartet, greift daneben. Keine Messung zeigt das: zehn Tasten von je
75x48 px sind zehn Tasten von je 75x48 px, egal wo sie liegen.
Die Bedingung ist ausdruecklich `:last-child:nth-child(10)` - sie gilt
also GENAU dann, wenn zehn Tasten da sind und die Null die letzte ist.
Kommen spaeter "loeschen" und "OK" dazu, greift die Regel nicht mehr, und
das ist richtig: dann ist die vierte Zeile voll. */
.qs-tastenfeld > .qs-taste:last-child:nth-child(10) { grid-column: 2; }
.qs-taste:hover { background: var(--weekend-bg); }
.qs-taste:active { background: var(--gridline); }
/* Sichtbar, und NICHT `--weekend-bg`: das misst 1,08 gegen den Untergrund und
war Mangel 1 aus Plan 1c, Aufgabe 3. */
.qs-taste:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
/* ---------- Maßnahmenfeld (Plan 1d, Aufgabe 1) ----------
Die Steuer ist `.qs-bemerkung` — kein zweites Textfeldformat. Damit gilt für
sie auch die eigene 96-px-Regel des coarse-Blocks, die man nicht mit der
44-px-Eingaberegel zusammenlegen darf (sonst schrumpft sie am Tablet).
Neu ist nur die sichtbare PFLICHT, und die ist nicht Zierde: die Datenbank
erzwingt `massnahme` mit ABSICHT nicht — ein CHECK, der n.i.O. ohne Maßnahme
abweist, führt dazu, dass gar nichts erfasst wird. Die Maske verlangt es,
also muss die Maske es auch zeigen. Das Feld erscheint ohnehin nur bei
n.i.O., die Marke ist dort immer wahr. */
.qs-massnahme-feld {
flex: 1 1 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
.qs-massnahme-feld label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.qs-massnahme-feld label::after {
content: '\00A0(Pflicht)';
font-weight: 700;
color: var(--urgent);
}
/* ⚠️ HIER STAND `.qs-massnahme-feld.ist-freiwillig` (27.08.2026, Aufgabe 8):
ein Feld, das nach einer Korrektur von n.i.O. auf i.O. mit seinem Text
stehen blieb, aber ohne die Pflichtmarke. Am 28.08.2026 entfernt — Aufgabe 8
ist zurückgenommen (`qs-ipc` verlangt keine Maßnahme mehr, Schlechtteile
gehören zur Freigabemessung), und damit gibt es den Fall nicht mehr.
⚠️ DER BLOCK DARÜBER BLEIBT. Er ist ein Baustein aus Aufgabe 1, und die
FREIGABEMESSUNG wird ihn brauchen. Heute benutzt ihn keine Seite. */
/* ---------- Fortsetzung, Gerät und gespeicherte Zelle (Plan 1d, Aufgaben 9–11) ----------
Vier Bausteine, und drei davon sagen etwas ÜBER die Daten statt Daten zu
zeigen. Deshalb ist ihre Farbe eine Aussage:
- Die Sitzungszeile ist INFORMATION („begonnen von MK“) und bleibt leise.
- Der Gerätehinweis ist eine WARNUNG und steht nur da, wenn etwas nicht
stimmt. Er darf --urgent tragen: ein Gerät, das nicht sichert, kostet
Messungen.
- Der Zeilenhinweis ist eine ABWEISUNG („nichts zu übernehmen“) und
ebenfalls --urgent.
- Der gespeicherte Wert ist ein WERT und trägt gar keine Zustandsfarbe. */
.qs-sitzung-zeile {
margin: 0 0 10px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.qs-geraet-hinweis {
margin: 0 0 12px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
color: var(--urgent);
}
/* ⚠️ EINE GESPEICHERTE ZELLE SIEHT AUS WIE EIN WERT, NICHT WIE EIN GESPERRTES
FELD. Kein Rahmen, kein Kasten, kein Grau: sie ist FERTIG, nicht verboten.
Das ist der Unterschied, auf den Schritt 8 sieht. Ein ausgegrautes Feld an
dieser Stelle hieße „hier darfst du nicht“, und der Prüfer sucht den Grund.
Richtig ist „hier steht schon etwas“ — der Wert ist gemessen, gespeichert
und über Storno korrigierbar (Auftragsblatt, Abschnitt 4.5). Ein Feld wäre
hier ohnehin sinnlos: der unique index über
(messsitzung_id, laufkarte_merkmal_id, teil_nr) lässt eine zweite Zelle
nicht zu, seine Benutzung könnte nur mit 23505 abbrechen.
Ziffernbreite fest (tabular-nums): darunter stehen die Grenzen mit
denselben Stellen, und springende Ziffernbreiten machen den Vergleich
schwer. */
.qs-gespeicherter-wert {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Der Hinweis an der Zeile bekommt die GANZE Breite, damit er nicht zwischen
Feld und Grenzen gequetscht wird - er ist ein Satz, keine Marke. */
.qs-zeilen-hinweis {
flex: 1 1 100%;
font-size: 12.5px;
font-weight: 600;
color: var(--urgent);
}
/* Derselbe Platz, andere Bedeutung: eine ABWEISUNG ist rot, eine AUSKUNFT
nicht. „Diese Zelle ist von TM belegt“ ist kein Fehler des Prüfers - es ist
der Grund, warum seine Bewertung eine alte Zelle storniert. --urgent würde
ihn nach einem Fehler suchen lassen, den er nicht gemacht hat. */
.qs-zeilen-hinweis.ist-sachlich {
font-weight: 400;
color: var(--text-secondary);
}
/* ---------- 4. Freigaberaster ---------- */
.qs-freigabe-wrap { max-width: 100%; overflow-x: auto; }
/* ⚠️ KEINE FESTE MINDESTBREITE MEHR (war 1300px, 14.09.2026). Sie war der
Grund, warum der Balken auch bei DREI Teilen erschien, wo vier Spalten
locker in die Huelle passen: die Tabelle forderte 1300 px, die Spalte gab
1096. Die Breite kommt jetzt aus den Spalten selbst. */
.qs-freigabe-tabelle { min-width: 100%; }
.qs-freigabe-tabelle th:first-child,
.qs-freigabe-tabelle td:first-child {
position: sticky;
left: 0;
min-width: 150px;
/* ⚠️ DIE MERKMALSPALTE DARF UMBRECHEN (14.09.2026). Sie war 462 px breit,
weil .qs-tabelle th white-space: nowrap setzt und die Zeile
"Soll 120,000 · UTG 119,900 · OTG 120,100" eben so lang ist. Das sind
drei Teilspalten, die dafuer draufgehen. Im Altsystem ist dieselbe
Spalte schmal - weil sie dort umbricht. Der Deckel begrenzt sie nach
oben, min-width: 150px haelt sie nach unten. */
max-width: 200px;
white-space: normal;
background: var(--surface-1);
border-right: 1px solid var(--border);
z-index: 1;
}
.qs-freigabe-tabelle th:first-child { z-index: 2; }
/* ⚠️ 82 PX STATT 92, und die Zahl ist gemessen, nicht geschaetzt: der
laengste Wert, der hier vorkommen kann, ist ein negatives Mass mit drei
Nachkommastellen ("-120,000"). Bei 13 px Poppins sind das 54 px Text,
dazu 12 px Polster und 2 px Rahmen = 68 px - und genau 68 waeren
RANDVOLL. Deshalb 70 px Eingabe (unten) mit 2 px Luft, plus 12 px
Zellpolster = 82 px. Wer die Eingabe weiter verschmaelert, schneidet
Messwerte ab - und ein abgeschnittener Messwert ist schlimmer als ein
Balken. Dagegen steht ein eigener Pruefall in qs-freigabe-probe.js. */
.qs-freigabe-tabelle th:not(:first-child),
.qs-freigabe-tabelle td:not(:first-child) {
min-width: 82px;
text-align: center;
}
/* ---------- 5. Urwertkarte ---------- */
.qs-urwertkarte-svg { display: block; width: 100%; height: auto; }
/* Die Legende der Sammelansicht. Bis zum 13.09.2026 war sie ein einzelnes
; seither traegt sie die Zuordnung der Linien, die vorher als „P3" am
rechten Bildrand stand. Deshalb ein
mit einer Reihenliste und zwei
Absaetzen. */
.qs-urwertkarte-legende {
margin: 10px 2px 0;
font-size: 12px;
color: var(--text-secondary);
}
.qs-urwertkarte-legende p { margin: 6px 0 0; }
/* Die Reihen liegen NEBENEINANDER und brechen um. Untereinander braechte bei
sieben Merkmalen sieben Zeilen unter einem 220 px hohen Bild - die Legende
waere dann hoeher als das, was sie erklaert. */
.qs-legende-reihen {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.qs-legende-reihe {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-primary);
}
/* ⚠️ flex: none. Ohne die Angabe staucht der Flexkasten den Musterstrich,
sobald eine Zeile eng wird - und ein gestauchtes Strichmuster ist nicht
mehr dasselbe Muster wie im Bild, also keine Zuordnung mehr. */
.qs-legende-muster { flex: none; }
/* Farbe UND Fettschrift, und im Text steht zusaetzlich „außerhalb der
Toleranz": --urgent steht gemessen bei 4,69 (ueber der Textschwelle 4,5),
aber Farbe allein trennt nicht, wenn jemand Rot und Gruen nicht
unterscheidet. */
.qs-legende-nio {
color: var(--urgent);
font-weight: 700;
}
/* Tabellenueberschrift. NEU am 26.08.2026 fuer den Kennzahlenblock: die
Stueckzahltabelle braucht einen zugaenglichen Namen, und
ist
dafuer das richtige Element - eine Ueberschrift daneben ist keine Bindung.
Ohne Regel stellte der Browser sie zentriert und in Tabellenschrift dar.
--text-secondary, NICHT --text-muted: --text-muted steht gemessen bei 3,50
und reisst die 4,5, die dieses Projekt selbst verlangt. Dieselbe
Entscheidung wie bei .qs-keine-aussage. */
.qs-tabelle caption {
caption-side: top;
text-align: left;
padding: 0 0 6px;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
}
/* ---------- 6. Kennzahlenblock ---------- */
.qs-kennzahlen { display: flex; flex-wrap: wrap; gap: 14px; }
.qs-kennzahl { flex: 1 1 220px; text-align: center; }
.qs-kennzahl h3 {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}
.qs-kennzahl-wert {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin: 4px 0;
}
.qs-kennzahl-formel {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11.5px;
color: var(--text-secondary);
}
.qs-kennzahl-hinweis { font-size: 11.5px; color: var(--text-muted); }
/* „keine Aussage" bewusst klein/kursiv/gedämpft statt einer erfundenen
Zahl – siehe Auftrag: zwei von drei Faktoren fehlen noch.
--text-secondary statt --text-muted (26.08.2026): das ist der Urtyp der
urteilsfreien Marke, und gedaempft heisst nicht unlesbar. Gemessen 3,50
gegen 7,73 auf --surface-1. Kursiv und klein tragen die Zurueckhaltung
schon, dafuer braucht es keinen Kontrastverstoss. */
.qs-kennzahl-unbekannt .qs-kennzahl-wert {
font-size: 19px;
font-weight: 600;
font-style: italic;
color: var(--text-secondary);
}
/* ---------- 7. Arbeitsliste ---------- */
/* UMBENANNT am 26.08.2026: hiess .qs-kein-intervall und war damit an einen
einzigen Anwendungsfall gebunden, obwohl die Regel neutral ist. Der alte
Name bleibt als Zwilling stehen, solange qs-muster.html ihn benutzt.
--text-secondary statt --text-muted: gemessen 7,73 gegen 3,50, und 3,50
reisst die 4,5, die dieses Projekt selbst verlangt. */
.qs-keine-aussage,
.qs-kein-intervall { color: var(--text-secondary); font-style: italic; }
/* Mangel 3, behoben am 26.08.2026. .qs-dringend und .qs-nio waren am Gerät
NICHT unterscheidbar - beide `rgb(230, 0, 0)` bei Fettgrad 700, gemessen.
In einer Liste heisst das: NIO und "dringend" sehen gleich aus, und wer
die Liste ueberfliegt, haelt eine Faelligkeit fuer einen Fehler.
Unterschieden wird jetzt ueber die FORM, nicht ueber eine neue Farbe: die
Dringlichkeit bekommt einen linken Balken, das Urteil bleibt blanker Text.
⚠️ Diese Marke hat in v_laufkarte_liste KEINE Quelle. Es gibt kein
Faelligkeitsfeld, und die Vorfahrtsregel fuer `messintervall` ist einer der
vier offenen Blocker. Sie ist gebaut, damit sie unterscheidbar IST, wenn es
die Quelle gibt - keine Seite darf sie vorher setzen. */
.qs-dringend {
color: var(--urgent);
font-weight: 700;
border-left: 3px solid var(--urgent);
padding-left: 6px;
}
/* =========================================================
9. Zustandsmarken der Kartenliste (neu am 26.08.2026, Aufgabe 3)
=========================================================
SIEBEN Marken, aus Spezifikation 4.3: fuenf IPC-Faelle (n.i.O. · i.O. ·
abgeschlossen ohne Wert · gemessen ohne errechenbares Urteil · nie
gemessen), quer dazu `abgeschlossen`, und `storniert`.
⚠️ qs-laufkarten benutzt davon SECHS. `storniert` hat in
v_laufkarte_liste keine Spalte, und qs.laufkarte ist nicht stornierbar -
storniert werden Messwert, Messsitzung und Mengenmeldung. Die Marke steht
hier fuer die Messungsliste in qs-laufkarte, nicht fuer die Kartenliste.
DREI FARBEN, KEINE NEUE. Gemessen am 26.08.2026 gegen --surface-1
(#fcfcfb), Schwelle 4,5 fuer Text:
--success-text #006300 7,35 ✓ nur i.O.
--urgent #e60000 4,69 ✓ nur n.i.O.
--text-secondary #52514e 7,73 ✓ alle vier urteilsfreien Faelle
--text-muted #898781 3,50 ✗ reisst die eigene Schwelle
Deshalb steht --text-secondary hier und nicht --text-muted.
Vier der sieben Marken tragen damit DIESELBE Farbe. Das ist Absicht - sie
sagen alle "keine Aussage", und aus Abwesenheit wird nie Gruen. Unterschieden
werden sie ueber FORM und WORTLAUT, nicht ueber eine erfundene Farbe:
ist-nie-gemessen kursiv, ohne Rahmen - es ist nichts geschehen
ist-ohne-wert gepunktete Unterlinie - es ist etwas geschehen, aber
nichts dabei herausgekommen
ist-ohne-urteil gepunkteter Rahmen - gemessen, nicht beurteilbar
ist-abgeschlossen geschlossener Rahmen - die Karte ist zu
ist-storniert durchgestrichen - das einzige allgemein
verstaendliche Storno-Zeichen
ABNAHMEPUNKT der Aufgabe: eine Marke OHNE Zustandsklasse sieht nicht gruen
aus. Die Grundregel setzt --text-secondary, nicht --success-text - wer eine
Zustandsklasse vergisst, bekommt "keine Aussage" und keine falsche Ampel. */
.qs-marke {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
color: var(--text-secondary);
}
/* Qualifiziert wird NUR die Klasse AN der Zelle (`td.qs-marke`), nie der
Nachfahre (`td .qs-marke`).
⚠️ Das ist keine Feinheit, sondern ein Fehler, den die Gegenprobe am
26.08.2026 aufgedeckt hat. Hier stand zuerst auch `.qs-tabelle td
.qs-marke` - ein Nachfahrenselektor mit der Spezifitaet (0,2,1). Der
ueberstimmt JEDE unqualifizierte Zustandsregel `.qs-marke.ist-io` mit
(0,2,0): eine Marke im Span wurde grau statt gruen. Gemessen
rgb(82, 81, 78) statt rgb(0, 99, 0).
Es fiel nur nicht auf, weil daneben die qualifizierten Zwillinge standen
und den Schaden ausglichen. Wer eine achte Marke ergaenzt und den Zwilling
vergisst, bekommt in einer Tabelle lautlos Grau - genau die Fehlerklasse,
gegen die diese Aufgabe angetreten ist.
Ein Span BRAUCHT keine qualifizierte Fassung: `.qs-tabelle td` faerbt die
Zelle, nicht das Kind, und `.qs-marke` am Span gewinnt dort immer. */
.qs-tabelle td.qs-marke { color: var(--text-secondary); }
.qs-marke.ist-io { color: var(--success-text); }
.qs-tabelle td.qs-marke.ist-io { color: var(--success-text); }
.qs-marke.ist-nio { color: var(--urgent); }
.qs-tabelle td.qs-marke.ist-nio { color: var(--urgent); }
.qs-marke.ist-nie-gemessen { font-style: italic; font-weight: 600; }
.qs-marke.ist-ohne-wert {
font-weight: 600;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.qs-marke.ist-ohne-urteil {
font-weight: 600;
border: 1px dotted var(--baseline);
border-radius: 4px;
padding: 0 6px;
}
.qs-marke.ist-abgeschlossen {
font-weight: 600;
border: 1px solid var(--baseline);
border-radius: 999px;
padding: 0 8px;
}
.qs-marke.ist-storniert { font-weight: 600; text-decoration: line-through; }
/* Zwei Marken für die ÜBERTRAGUNG, nicht für das Urteil (Plan 1d,
Aufgabe 1). Sie sitzen auf derselben Achse wie `ist-abgeschlossen` und
`ist-storniert` — „was ist mit dieser Zeile passiert" —, nicht auf der
Achse `ist-io`/`ist-nio`.
⚠️ KEINE URTEILSFARBE, und das ist der Kern. Grün heißt in diesem Modul
„Maß in Ordnung". Ein gespeicherter n.i.O.-Wert ist gespeichert UND
n.i.O. — zwei Achsen, und die Farbe ist für die andere vergeben. Beide
bleiben deshalb auf `--text-secondary` aus der Grundregel und
unterscheiden sich durch FORM: gefüllter gegen offenen Ring.
Und die laute ist die UNFERTIGE. In der Halle muss auffallen, was noch
im Gerät liegt, nicht was durch ist.
⚠️ Kein qualifizierter Zwilling nötig, und das ist nachgesehen, nicht
vergessen: der Zwilling `.qs-tabelle td.qs-marke.X` braucht es nur,
wenn die Marke `color` setzt — diese zwei tun es nicht. Den Rahmen
nimmt ihnen die generische Regel `.qs-tabelle td.qs-marke` (border-left:
none) schon ab, also zerreißt keine von beiden das Tabellengitter. Ein
Prüffall misst genau das. */
/* ⚠️ DIE ZEICHEN WAREN VERTAUSCHT, gefunden am 27.08.2026 im
Bildschirmfoto - Schritt 6 der Aufgabe 1, und von KEINER der 19 Messungen
gezeigt.
Zuerst stand hier: gespeichert = gefuellter Ring, nicht gesendet = offener
Ring plus gestrichelter Rand. Die Messung sagte, die zweite sei die
lautere - Schriftgewicht 700 gegen 600, dazu ein Rahmen. Das war richtig
gemessen und im Bild trotzdem falsch:
- Ein GEFUELLTER Punkt zieht den Blick, ein offener Ring nicht. Die
fertige Zeile war damit auffaelliger als die unfertige.
- Der GESTRICHELTE Rand liest sich bei 12,5 px nicht als Betonung,
sondern wie ein Darstellungsfehler - drei kurze Striche neben einem
Wort sehen aus wie Schmutz.
Jetzt: fertig = Haekchen und leise, unfertig = gefuellter Punkt, volles
Gewicht und ein DURCHGEHENDER linker Balken. Der durchgehende Balken ist
dieselbe Sprache wie `.qs-band` - vier Pixel links heisst dort schon
"diese Zeile ist markiert".
⚠️ Eine Messung kann "lauter" nicht pruefen. Der Prueffall haelt
deshalb die ENTSCHEIDUNG fest: welches der zwei Zeichen wo steht. Sonst
dreht es jemand still zurueck. */
.qs-marke.ist-gespeichert { font-weight: 600; }
.qs-marke.ist-gespeichert::before { content: '✓ '; }
.qs-marke.ist-nicht-gesendet {
font-weight: 700;
border-left: 3px solid var(--baseline);
padding-left: 7px;
}
.qs-marke.ist-nicht-gesendet::before { content: '● '; }
/* ⚠️ DIE FORM GEHOERT IN DEN SPAN, das Netz an der Zelle traegt nur Farbe und
Schriftbild. Am Bild gefunden, nicht an den Zahlen (26.08.2026): ein
`border` an einem `td` ersetzt die ZEILENTRENNLINIE der Tabelle. Gemessen an
der Probeseite, jeweils border-bottom des Zellenfalls:
ist-ohne-urteil dotted 1px statt solid 1px - Gitter gestrichelt
ist-abgeschlossen solid 1px --baseline - Gitter dunkler
ist-storniert none 0px - Trennlinie WEG
Eine Liste mit stellenweise fehlender Trennlinie sieht aus wie ein
Darstellungsfehler, und der Grund dafuer steht drei Regeln weiter oben.
Zurueckgenommen wird nur der KASTEN. Kursiv, Unterstrich und Durchstreichung
bleiben - sie tragen Bedeutung und beruehren das Gitter nicht. Die zwei
Ringmarken verlieren im Zellenfall ihren Ring; genau die zwei sind es, deren
Ring das Gitter zerreisst. Das Netz soll nicht schoen sein, sondern
verhindern, dass etwas lautlos falsch aussieht. */
.qs-tabelle td.qs-marke {
/* ⚠️ DAS SCHWERSTE ZUERST: `display: table-cell` zurueckholen. Die
Grundregel .qs-marke setzt `inline-block`, und an einem `td` heisst das,
dass die Zelle KEINE Tabellenzelle mehr ist. Gemessen am 26.08.2026 an
der Probeseite: 44,6 px breit statt 281,9 px, die Spalte faellt aus dem
Gitter. Das war im Bild als zu kurze Trennlinie zu sehen und in keiner
einzigen Farbmessung. */
display: table-cell;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--gridline);
border-radius: 0;
padding: 9px 12px;
}
.qs-tabelle tr:last-child td.qs-marke { border-bottom: none; }
/* =========================================================
10. Tastaturmarkierung (Mangel 2, behoben am 26.08.2026)
=========================================================
Gemessen am 26.08.2026 an der geladenen Seite: im ganzen Projekt gibt es
DREI Regeln, die `focus` nennen, und alle drei sind ein blankes `:focus`.
`:focus-visible` kommt in style.css und qs.css nicht ein einziges Mal vor.
.qs-btn-io und .qs-btn-nio hatten damit keine Tastaturmarkierung - im
Messraum wird mit Tastatur gearbeitet, und die IO/NIO-Knoepfe sind der
Weg, auf dem ein Urteil entsteht.
:focus-visible statt :focus, damit ein Mausklick keinen Rahmen stehen
laesst. Der Umriss sitzt AUSSERHALB (outline-offset), sonst verdeckt er
bei einem gefuellten Knopf seine eigene Kante. */
.qs-btn-io:focus-visible,
.qs-btn-nio:focus-visible,
.qs-ankreuzfeld:focus-visible,
.qs-marke a:focus-visible,
.qs-tabelle a:focus-visible,
.qs-band a:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* =========================================================
11. Drei Bausteine, die die Kartenliste braucht
(Aufgabe 3 baut sie, Aufgabe 4 benutzt sie)
========================================================= */
/* Meldeband ueber der Liste. Drei Auspraegungen nach e.qsArt, NICHT nach
Meldungstext: 'netz' und 'unbekannt' laufen als ist-fehler, 'recht' und
'anmeldung' als ist-recht, 'einstellung' und 'aufbau' als ist-einstellung.
Der Grund fuer die Trennung ist nicht Farbe, sondern was der Bediener tun
kann: nochmal versuchen, sich anmelden, oder jemanden holen.
Alle drei tragen --text-primary auf einer sehr blassen Flaeche (19,17
gemessen). Ein Band mit weissem Text auf --urgent waere 4,81 und damit
knapp - und der Text eines Fehlerbandes ist die Stelle, an der man nicht
knapp sein will. Getragen wird die Bedeutung vom linken Balken. */
.qs-band {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
margin: 0 0 12px;
border-radius: 8px;
font-size: 13px;
color: var(--text-primary);
background: var(--weekend-bg);
border-left: 4px solid var(--baseline);
}
.qs-band.ist-fehler { border-left-color: var(--urgent); }
.qs-band.ist-recht { border-left-color: var(--brand-primary); }
.qs-band.ist-einstellung { border-left-color: var(--baseline); }
.qs-band-text { margin: 0; }
.qs-band-grund { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
/* Leerzustand. Steht in keiner gelesenen Datei des Projekts.
⚠️ Er gehoert AUSSCHLIESSLICH zu `gesamt === 0`. Bei `gesamt === null`
heisst es "nicht gezaehlt", und dann darf hier nichts stehen - sonst
behauptet die Seite Leere, wo nur der Zaehler fehlt. */
.qs-leer {
padding: 28px 16px;
text-align: center;
color: var(--text-secondary);
font-size: 14px;
}
.qs-leer-titel { display: block; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
/* Filterzeile (Aufgabe 6). Sie uebernimmt .parts-kopf und .part-search aus
style.css; hier steht nur, was dort fehlt: der Umbruch (die Zeile traegt
neun Bedienelemente, .parts-kopf ist fuer drei gebaut) und die Beschriftung
UEBER dem Feld. Ein nacktes