/* ══════════════════════════════════════════════════ v2 DICHTES MASSPROFIL Ein Token-System, zwei Massprofile. Die Verwaltung ist eine ANDERE Oberflaeche als der Kundenbereich: dichte Datenmasken statt Marketing- Sprache, zwanzig Felder je Formular statt drei, Tabellen mit dreissig Zeilen. Dieselben Farben, Radien, Schatten und Schriftschnitte — aber kompaktere Masse und feste statt fluider Groessen. WAS HIER NICHT STEHT: Farben. Kein einziger Farbwert. Die kommen unveraendert aus tokens.css und damit von mkpi.de. Wer eine Farbe hier eintraegt, hat die Trennung aufgehoben, um die es geht. WIE ES GREIFT: das Admin-Layout setzt data-density="dense" auf . Ein Attribut, eine Stelle, keine Spezifitaetsspiele — die Werte werden redefiniert, nicht ueberschrieben, alle Regeln bleiben wie sie sind. ══════════════════════════════════════════════════ */ :root[data-density="dense"] { /* ── Schrift: fest statt fluid ── Fluide Groessen (clamp) sind fuer Fliesstext richtig, der ueber die volle Fensterbreite laeuft. In einer Tabelle mit fester Spaltenbreite fuehren sie dazu, dass Zeilen beim Verkleinern des Fensters springen und Zahlen ihre Ausrichtung verlieren. Die Werte sind die unteren Enden der fluiden Bereiche — die Verwaltung bekommt also die kompakte Fassung derselben Skala, nicht eine andere Skala. */ --ms-text-body: 0.9375rem; /* 15px statt 16-18px */ --ms-text-h1: 1.75rem; /* statt 36-60px */ --ms-text-h2: 1.5rem; /* statt 28-48px */ --ms-text-h3: 1.25rem; /* statt 24-32px */ --ms-text-h4: 1.0625rem; /* statt 20-24px */ /* --ms-control-font steht hier BEWUSST NICHT (2026-09-09). Die Schrift in einem Eingabefeld ist 1rem — im Kundenbereich wie in der Verwaltung —, weil der Knopf daneben es auch ist (--ms-btn-s-font, ebenfalls in beiden Profilen 1rem). Feld und Knopf teilen Hoehe und Schrift; enger wird die Verwaltung ueber die HOEHE (40px, unter 1600px 36px), nicht ueber die Zeichen. Wer das aendern will, setzt das Token hier — eine Zeile, und jedes Feld der Verwaltung folgt. */ /* ── Bedienhoehe ── 40px statt 44px. Die 44px des Kundenbereichs kommen von der Fingerkuppen-Empfehlung fuer Beruehrung; die Verwaltung wird an Maus und Tastatur bedient, und bei zwanzig Feldern untereinander sind 4px je Feld achtzig Pixel weniger Weg. 40px bleibt deutlich ueber der Grenze, ab der ein Ziel schwer zu treffen ist. */ --ms-btn-s-height: 2.5rem; /* 40px statt 44 */ --ms-btn-m-height: 2.75rem; /* 44 statt 48 */ --ms-btn-l-height: 3rem; /* 48 statt 52 */ --ms-btn-xl-height: 3.25rem; /* 52 statt 56 */ /* --ms-btn-xs-height bleibt bei 28px: kleiner waere in einer Tabellenzeile nicht mehr sicher zu treffen. */ /* NICHT hier neu setzen, sondern erben: --ms-control-h ist in tokens.css als Verweis auf --ms-btn-s-height angelegt, und genau das ist der Sinn — Feld und Knopf teilen EINEN Wert (designsystem.md, Regel 7). Ein eigener Wert an dieser Stelle hat die Kopplung zerschnitten: die Felder waren 40px, die Knoepfe blieben bei 44px. */ /* ── Baender und Abstaende ── Die 96px-Baender der Website trennen Kapitel einer Verkaufsseite. Eine Maske hat keine Kapitel, sie hat einen Kopf und einen Inhalt. */ --ms-section-padding: var(--ms-space-5); --ms-section-gap: var(--ms-space-6); /* ── Breite ── KEINE Obergrenze. Eine Verwaltungsmaske ist eine Arbeitsflaeche, und ihr haeufigster Inhalt ist eine Tabelle — die wird mit Platz besser, nicht schlechter. Vorbild ist `.mo-content` in myOFFICE, das ebenfalls nur polstert und nicht begrenzt. Der Weg hierher in zwei Schritten, beide am 2026-09-02: erst 1320px (`--ms-content-wide`) statt 1140px, dann eine Wahl je Maske (`.container-full`), jetzt die Regel fuer alle. Die Wahl je Maske war die falsche Voreinstellung — sie liess neunzehn Uebersichten im Korsett stehen, weil niemand sie einzeln umstellte, und „jede neue Maske muss daran denken" ist keine Regel, sondern eine Bitte. WAS DAMIT ZUSAMMENHAENGT: ohne Obergrenze waere ein Eingabefeld auf einem 3440px-Schirm 3300px breit. Die Lesebreite gehoert deshalb dorthin, wo getippt wird — an die Karte mit Formularfeldern (`.card:has(.form-group)` in surfaces.css), nicht an die Seite. Die Flaeche ist frei, und was gelesen und getippt wird, begrenzt sich selbst. */ --ms-content-width: 100%; } /* ══════════════════════════════════════════════════ NOCH KOMPAKTER AUF SCHMALEN SCHIRMEN (2026-09-03) Gefragt hat der Betreiber es auf einem 14-Zoll-MacBook: „macht es Sinn, die Knoepfe bei kleineren Monitoren zu skalieren, und koennte man das global steuern?" Die Antwort ist ja und hier — weil Bedienhoehe, Feldhoehe und Abstaende AUS TOKEN kommen und nicht aus den Bauteilen. Es sind sechs Werte; jeder Knopf, jedes Eingabefeld und jeder Symbolknopf der Verwaltung folgt. NUR DIE VERWALTUNG. Die Regel steht innerhalb von `data-density="dense"`, der Kundenbereich behaelt seine 44px — die kommen von der Fingerkuppe und nicht vom Platz. EINE STUFE, NICHT ZWEI: 40px auf 36px. Bei zwanzig Feldern untereinander sind das achtzig Pixel, ohne dass ein Ziel schwer zu treffen wird (WCAG 2.2 verlangt 24px). `--ms-control-h` zieht von selbst nach, es verweist auf `--ms-btn-s-height` — genau dafuer ist der Verweis da. DIE SCHRIFT BLEIBT. Kleiner heisst hier kompakter, nicht schlechter lesbar: 15px Fliesstext und 12px Abzeichen bleiben, was sie sind. Gewonnen wird an Hoehe und Polster, nicht an Zeichen. DIESELBE GRENZE WIE DIE KOPFZEILE (1600px, data.css): ein Umschaltpunkt fuer die Verwaltung und nicht zwei, die sich gegenseitig ueberraschen. ══════════════════════════════════════════════════ */ @media (max-width: 1600px) { :root[data-density="dense"] { --ms-btn-s-height: 2.25rem; /* 36px statt 40 — Knopf UND Feld */ --ms-btn-m-height: 2.5rem; /* 40 statt 44 */ --ms-btn-l-height: 2.75rem; /* 44 statt 48 */ --ms-btn-xl-height: 3rem; /* 48 statt 52 */ /* --ms-btn-xs-height bleibt bei 28px: kleiner waere in einer Tabellenzeile nicht mehr sicher zu treffen. */ /* Das Polster der Abschnitte geht eine Stufe mit; die Karten stehen damit enger, ohne dass ihr Inhalt gedraengt wirkt. */ --ms-section-padding: var(--ms-space-4); } }