/* Die Bedienoberfläche von PageSetter - ihre Maße an einer Stelle. ================================================================= Was hier steht, gilt für die APP: Navigation, Werkzeugleisten, Dialoge, Knöpfe, Menüs. Was NICHT hier steht, ist das Dokument - ``.satz``, ``.blatt``, ``.webseite`` und alles, was exportiert wird. Die Trennung ist keine Ordnungsfrage, sondern die Zusage des Auftrags: Die App kann dunkel sein, während die gestaltete Seite weiß bleibt. Eine Regel von hier, die in den publizierten Inhalt hineinwirkt, wäre ein Fehler - und zwar einer, den man erst im fertigen Buch sieht. Deshalb tragen alle Namen hier das Präfix ``--ui-``. Ein Token ohne Präfix könnte man versehentlich im Satz verwenden; eines mit fällt beim Lesen auf. Die Zahlen sind Projektvorgaben für PageSetter, keine allgemeinen Best-Practice-Maße. Sie stammen aus dem Sprintauftrag vom 24.09.2026, Arbeitspaket A, Punkt 3. */ :root { /* --- Abstandsraster: 4 / 8 / 12 / 16 / 24 ------------------------ */ --ui-abstand-1: 4px; --ui-abstand-2: 8px; --ui-abstand-3: 12px; --ui-abstand-4: 16px; --ui-abstand-6: 24px; /* --- Controlhöhen ----------------------------------------------- In rem, nicht in Pixeln: Eine Zeile trägt Symbol UND Beschriftung, beide wachsen mit der Schriftgrößeneinstellung des Benutzers, also muss die Zeile es auch. Bei der Vorgabe des Browsers (16px) sind 2.5rem genau 40 Pixel. Der kompakte Iconbutton ist 32-36px bei Mausbedienung. Für grobe Zeiger gilt darunter eine eigene Regel: mindestens 44px, denn ein Finger trifft kein 32er Ziel. */ --ui-zeile: 2.5rem; --ui-knopf: 2.125rem; --ui-knopf-klein: 1.75rem; --ui-ziel-grob: 2.75rem; /* --- Symbole ----------------------------------------------------- 18-20px in einheitlicher 24er ViewBox. Die ViewBox steht im Markup, die Größe hier. */ --ui-symbol: 1.25rem; --ui-symbol-klein: 1rem; /* --- Radien ------------------------------------------------------ Eine Skala, nicht zwei. In studio.css standen bis zum 24.09.2026 zwei Sätze nebeneinander, beide unter demselben Präfix: hier 8/12px, dort ``--ui-radius-control: 11px`` und ``--ui-radius-card: 16px``. Zwei Wahrheiten unter einem Namen sind genau das, was der Auftrag ausschließt ("Alte und neue Vorgaben dürfen sich nicht widersprechen"). Die Werte des älteren Satzes haben gewonnen - sie sind die, die man in der laufenden App sieht; die Namen dieses Satzes haben gewonnen, weil sie sagen, wofür der Radius da ist, statt wofür er zuerst benutzt wurde. */ --ui-radius-klein: 8px; --ui-radius: 11px; --ui-radius-gross: 16px; --ui-radius-tafel: 20px; --ui-radius-rund: 999px; /* --- Linien ------------------------------------------------------ */ --ui-linie: 1px; /* Die Kontur einer ruhigen Fläche - sparsam, wie Punkt 2 es verlangt. Sie ersetzt den Schatten, den Karten vorher trugen. */ --ui-kontur: color-mix(in srgb, var(--rand-stark) 72%, transparent); --ui-flaeche-ruhig: color-mix(in srgb, var(--weiss) 93%, var(--flaeche)); /* --- Fokus ------------------------------------------------------- Ein Fokusring gehört nach außen, nicht nach innen: Innen liegt er auf dem Inhalt und wird von ihm verdeckt. Die Farbe ist die Akzentfarbe der App und nicht die Textvariante davon: Gemessen am 24.09.2026 trugen 35 von 39 ertabbbaren Elementen im Editor ``rgb(139, 119, 87)``, meine eigenen neuen Iconbuttons dagegen ``rgb(111, 95, 69)`` - ein zweites Fokusbild, das ich selbst eingeführt hatte. */ --ui-fokus-breite: 2px; --ui-fokus-abstand: 2px; --ui-fokus-farbe: var(--blau); /* Der weiche Ring an Eingabefeldern - dieselbe Farbe, nur als Hauch. Er stand an sechs Stellen als ``rgba(37, 99, 235, .12)`` bis ``.18`` und damit im alten Signalblau, mitten in einer Oberfläche, die ihren Akzent längst auf Braun umgestellt hat. */ --ui-fokus-hauch: color-mix(in srgb, var(--blau) 16%, transparent); /* --- Ebenen ------------------------------------------------------ Schatten sind in dieser App KEIN Zustandsindikator. Weder Hover noch Aktiv noch Auswahl bekommen einen. Genau EINE zurückhaltende Abhebung gibt es, und sie sagt etwas anderes: "Diese Fläche schwebt über der Seite" - Menüs, Flyouts, Dialoge. */ --ui-schwebe: 0 4px 16px rgba(17, 24, 39, .10), 0 1px 3px rgba(17, 24, 39, .06); /* Im Dunkelmodus trägt dieselbe Aussage mehr Deckkraft: Ein Schatten mit 10 Prozent auf dunklem Grund ist kein Schatten. */ --ui-schwebe-dunkel: 0 4px 18px rgba(0, 0, 0, .44), 0 1px 3px rgba(0, 0, 0, .34); /* --- Schrift ----------------------------------------------------- Die Bedienschrift folgt der App, nicht dem Dokument. Zwei Stärken genügen: normal und die Auszeichnung von Überschriften. Ein AKTIVER Eintrag bekommt ausdrücklich KEINE eigene Stärke - fetter Text ist breiter, und eine Zeile, die beim Aktivwerden ihre Maße ändert, schiebt alles darunter. Markiert wird mit Fläche und Farbe. */ --ui-schrift-klein: 0.8125rem; --ui-schrift: 0.9375rem; --ui-schrift-gross: 1.0625rem; --ui-gewicht: 400; --ui-gewicht-kopf: 600; } /* Grobe Zeiger - Finger statt Maus. Nicht über die Bildschirmbreite erkannt, sondern über das Zeigegerät: Ein Tablet mit 1440 Pixeln wird sonst wie ein Schreibtisch behandelt. */ @media (pointer: coarse) { :root { --ui-knopf: var(--ui-ziel-grob); --ui-knopf-klein: var(--ui-ziel-grob); --ui-zeile: var(--ui-ziel-grob); } } /* Wer weniger Bewegung will, bekommt weniger Bewegung. */ @media (prefers-reduced-motion: reduce) { :root { --ui-uebergang: 0s; } } :root { --ui-uebergang: .15s; }