/* ============================================================ lumafy Editor – Gestaltung Fassung 91 · Redesign nach `design_handoff_lumafy_ui/` ------------------------------------------------------------ Eine Marke, zwei Farbmodi. Alles, was zweimal vorkommt, steht als Variable oben: Farben, Abstandsstufen, Rundungen, Tempo. Wer hier unten einen Einzelwert einträgt, macht es kaputt – die Abstandsstufen --a1 bis --a7 sind der ganze Trick. DIE REGELN, die den Entwurf tragen: 1. VIERER-RASTER. Abstände kommen ausschließlich aus --a1..--a7 = 4 8 12 16 24 32 48. Keine 14, keine 22, keine 26. 2. EINE SCHRIFTSKALA, --s1..--s6 = 12 13 14 16 20 26. Wer eine siebte Größe braucht, braucht in Wahrheit eine andere Stufe. 3. DER AKZENT HAT GENAU EINE BEDEUTUNG: „hier ist die Handlung". Nicht Werbung, nicht Verzierung, nicht Hervorhebung. --akzent trägt NIE Fließtext. Als Fläche nur mit --auf-akzent darauf, als Schrift nur über --akzent-text. 4. EIN HAUPTKNOPF JE SEITE. Alles andere ist Umriss-Knopf. Zerstörende Aktionen sind Umriss-Knöpfe in --rot; nur der Notfall-Auslöser ist eine rote Fläche. 5. NUR EINE KARTENSORTE: --flaeche, 1px --linie, --r2, --schatten-1. Keine zweite Variante erfinden. 6. KÖPFE VON LISTEN UND ABSCHNITTEN setzen mono, 13px, letter-spacing .1em, Großbuchstaben, Farbe --beschriftung. 7. ZAHLEN SETZEN MONO: Preise, Uhrzeiten, Speicherwerte, Zähler, Kopplungscodes. 8. SCHWARZE FLÄCHEN BLEIBEN SCHWARZ (--dunkel). Das sind Bildschirmvorschauen; sie sehen in beiden Modi gleich aus. NACHGERECHNET am 23.08.2026 (nicht geschätzt – jede Zahl unten ist mit der WCAG-Formel gegen den angegebenen Grund gerechnet). Zwei Dinge, die der Entwurf nicht nennt und die deshalb hier festgehalten sind: a) --beschriftung hält AA auf --creme (4,97 hell / 5,13 dunkel) und auf --flaeche (5,18 / 4,85). Auf --flaeche-3 fällt es auf 4,20 bzw. 3,97 und ist damit UNTER AA. Beschriftungstext gehört deshalb nie auf --flaeche-3; dort steht --gedaempft (5,81 hell). Heute betrifft das keine Regel, es ist eine Grenze für künftige. b) --schatten-2 ist im Entwurf ein sehr flacher Schatten für leicht abgehobene Flächen. Schwebende Ebenen – Menüs, Hinweise, Dialoge – brauchen mehr und nehmen --schatten-3. Der Entwurf beschreibt sie nicht, die Leiter bleibt: 1 = Karte, 2 = leicht abgehoben, 3 = schwebend. ============================================================ */ :root{ /* Das Schloss in gesperrten Feldern (KV5, Fassung 321). Ein Bild im Feld, weil ein Eingabefeld keinen ::after trägt; ein mittleres Grau, das auf beiden Grundflächen steht. */ --schloss-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A847A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); /* ---- Flächen und Text ---- */ --creme:#FBFAF8; /* Papier – Seitenhintergrund */ --flaeche:#FFFFFF; /* Karten, Dialoge */ --flaeche-2:#F4F2EE; /* leicht abgesetzt */ --flaeche-3:#EAE7E1; /* Etiketten, Chips */ --flaeche-4:#E6E2DB; /* Platzhalter, leere Bildflächen */ --tinte:#17150F; /* 17,5:1 auf Papier, 18,3:1 auf Weiß */ --auf-tinte:#FBFAF8; --gedaempft:#5C574E; /* 6,87:1 auf Papier, 7,17:1 auf Weiß */ --gedaempft-weich:#8C857A;/* 3,50:1 – NUR für Dinge ohne Textbedeutung */ --beschriftung:#736C63; /* 4,97:1 auf Papier – siehe Anmerkung (a) oben */ --linie:#E4E0D9; --linie-stark:#CFC9BF; --dunkel:#0C0C0C; /* Bildschirmflächen – bleibt in beiden Modi schwarz */ /* Das Band, solange der Betreiber in einem Kundenkonto steht (Fassung 149). Ein Ton unter --dunkel, in BEIDEN Modi gleich: Es ist der einzige Balken dieser Art in der Anwendung und soll auffallen, auch nach der hundertsten Verwendung. Deshalb hier als Token und nicht als nackte Hexzahl im Rumpf. */ --kk-grund:#2B2214; --auf-kk:#FDFBF7; /* 14,8:1 */ --gewaehlt:#17150F; --auf-gewaehlt:#FBFAF8; /* 17,50:1 */ /* Fassung 424 (Plan 420): das Tagesband in „Was läuft hier?“ — Ruhezeit als Spur. Und das Rechteck der Miniatur in der Bildschirmliste (Prüfung von 421: dunkel lag es mit --flaeche-3 bei 1,35:1 auf --dunkel). */ --band-aus:#EAE7E1; --zeilen-bild:#EAE7E1; --punkt-aus:#C6C0B6; /* Zustandspunkt: kein Lebenszeichen */ /* ---- Signalfarben ---- */ --akzent:#F5A623; /* Der Fokusring (Fassung 406, L-609, ADR-082). Bernstein selbst steht auf Papier bei 1,94:1 und auf --flaeche-3 bei 1,64:1 — zu schwach für den Ring, an dem ein Tastaturbediener sieht, wo er ist (WCAG 1.4.11: 3:1). Dieses dunklere Bernstein: 3,88:1 auf Papier, 4,05:1 auf Weiß, 3,62:1 auf --flaeche-2, 3,28:1 auf --flaeche-3, 3,13:1 auf --flaeche-4, 3,59:1 auf --akzent-weich. Im Dunkelmodus ist er wieder Bernstein. */ --fokus:#B36F00; /* Die Bühne der freien Folie (Fassung 202): Markierungen auf dem Bild des Kunden, in beiden Modi gleich — sie liegen auf seinem Bild, nicht auf unserem Papier. */ --buehne-wahl:#F5A623; --buehne-ueber:#E5484D; --auf-akzent:#1A1206; /* 9,14:1 – auf dem Akzent steht DUNKLER Text, nie weißer */ --akzent-weich:#FCF0DC; --feld-rand:#857E73; /* Rand von Eingabefeldern (Stück 02), 4,02:1 auf Weiß */ --blauBg:#E6EEF5; /* „Wird gesendet" (Stück 02), --blau darauf 6,72:1 */ /* Hinter Dialogen, Einführung, Seitenblatt und der Handy-Schublade, eine Stelle für alle vier (Fassung 406, F12). Bis 405 trug jede ihren eigenen Wert, und dieses Token benutzte keine. */ --abdeckung:rgba(23,21,15,.38); --marke-bild:rgba(14,11,6,.84); /* Marke „Foto 10:21" auf der Miniatur (Stück 03) */ --marke-bild-text:#F6F2EA; /* darauf ≥ 15:1, auf jedem Bild */ --ruhe-schleier:rgba(10,8,5,.62); /* Ruhezeit über der Miniatur; Text darauf ≥ 6,34:1 */ --ruhe-flaeche:#0E0B06; /* Ruhezeit statt Titelbild (D1); Text darauf ≥ 17:1, in beiden Modi */ --ruhe-mond:#F5A623; /* der Mond darauf, Bernstein (nur Zeichen) */ /* Anmelden (Fassung 331, Vorschlag 1a): im Look der Startseite, in BEIDEN Farbmodi gleich — dunkle Fläche, helle Karte. Deshalb eigene Werte, die der Dunkelmodus nicht umstellt. */ --anm-grund:#0E0B06; --anm-text:#F6F2EA; --anm-leise:#C9C1B3; --anm-rahmen:#1C1812; --anm-karte:#FBFAF8; --anm-tinte:#17150F; --anm-gedaempft:#5C574E; --anm-feld:#FFFFFF; --anm-feldrand:#8C857A; /* 3,4:1 auf Weiß — der Entwurf nimmt #D6D0C4 (1,4:1), zu schwach für ein Eingabefeld */ --anm-trenner:#E4E0D9; --anm-akzent-text:#8A5200; --anm-knopf-text:#1A1206; --anm-fokus:#B36F00; /* Fokusring in der hellen Karte, beide Modi: 3,88:1 (Fassung 406) */ --anm-rot:#A8321F; --anm-rot-grund:#FBE9E5; --anm-rot-text:#7A2415; --anm-gruen:#1F6B34; --anm-gruen-grund:#E7F1E7; --anm-grau:#F0EDE8; --anm-bernstein-weich:#FCF0DC; --anm-praxis-grund:#F7FAF9; --anm-praxis-text:#10302E; --anm-praxis-akzent:#0F6E6A; --anm-empfang-grund:#1D3A33; --anm-empfang-text:#F4EFE6; --anm-empfang-akzent:#C9A96A; --geraet-rahmen:#2A2319; /* Rahmen ums Bildschirmfoto (D1), damit es nicht wie das Titelbild aussieht */ --vk-dunkel:#141210; /* Logo-Vorschau (D13): dunkle Vorlage, in beiden Modi */ --vk-hell:#F6F1E7; /* Logo-Vorschau (D13): helle Vorlage */ --vk-balken-dunkel:#5E574C; /* Textbalken darauf (nur Fläche) */ --vk-balken-hell:#C9C0B0; --kachel-leer-hell:#5C574E; /* „Noch keins hinterlegt." auf heller Logokachel: ≥ 5,97:1 (F-27) */ --kachel-leer-dunkel:#ADA69A; /* dasselbe auf der schwarzen Kachel: 8,1:1 */ --akzent-text:#8A5200; /* 6,12:1 auf Papier, 5,67:1 auf --akzent-weich */ --gruen:#2F6B3A; --gruenBg:#E7F1E7; /* 6,13:1 auf Papier */ --gelb:#8A5200; --gelbBg:#FCF0DC; /* 5,67:1 */ --rot:#A8321F; --rotBg:#FBE9E5; --rot-text:#8F2A19; /* 6,41:1 bzw. 7,12:1 */ --blau:#21557E; /* 7,55:1 */ --neutral:#5C574E; --neutralBg:#EFEDE8; /* 6,13:1 */ /* ---- Abstandsstufen: die einzige erlaubte Quelle für Abstände ---- */ --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; /* Breite der Hilfslinien auf der Bühne (Fassung 213). Der Editor setzt sie beim Skalieren auf 2/Maßstab; dieser Wert ist der Rückfall. */ --lay-linie:2px; /* ---- Rundungen ---- */ --r1:8px; --r2:12px; --r3:16px; --r4:20px; --r-voll:999px; /* ---- Schatten und Tempo ---- */ --schatten-1:0 1px 2px rgba(26,20,11,.06); /* Karte */ --schatten-2:0 2px 8px rgba(26,20,11,.07); /* leicht abgehoben */ --schatten-3:0 16px 44px rgba(26,20,11,.18); /* schwebend: Menü, Dialog, Hinweis */ --takt:.12s; /* ---- Schriftskala: sechs Stufen, mehr gibt es nicht ---- --s4 (16px) ist zugleich die Untergrenze für Eingabefelder: darunter zoomt iOS beim Antippen in die Seite hinein. */ --s1:12px; /* Meta, Zähler, Zeitangaben */ --s2:13px; /* Hinweise, Unterzeilen, Textknöpfe, mono-Köpfe */ --s3:14px; /* Knöpfe, Beschriftungen, Reiter */ --s4:16px; /* Fließtext und alle Eingabefelder */ --s5:20px; /* Kartentitel, Dialogtitel */ --s6:26px; /* Seitentitel in Karten und Dialogen */ /* Die alten Namen zeigen auf die Skala – so bleibt jede Regel weiter unten gültig, ohne dass irgendwo ein Einzelwert steht. */ --s-klein:var(--s1); --s-knopf:var(--s3); --s-normal:var(--s4); --s-gross:var(--s5); /* Eine Stelle für die Schreibmaschinenschrift. Gebraucht überall dort, wo ZAHLEN untereinander stehen sollen, und für die Abschnittsköpfe. */ --mono:"IBM Plex Mono",ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace; --seitenleiste:296px; --kopf-hoehe:0px; --leiste-hoehe:0px; /* Handy: Höhe der unteren Handlungsleiste */ } /* Dunkelmodus – KEINE Umkehr der hellen Fassung, sondern dieselbe Ordnung noch einmal gedacht. Das Bernstein bleibt in beiden Fassungen dieselbe Farbe mit derselben Bedeutung. */ [data-thema="dunkel"]{ --creme:#131210; --feld-rand:#756E63; /* 3,52:1 auf --flaeche */ --blauBg:#17222C; /* --blau darauf 8,02:1 */ --abdeckung:rgba(0,0,0,.55); --flaeche:#1A1815; --flaeche-2:#22201C; --flaeche-3:#2C2924; --flaeche-4:#26231F; --tinte:#F4F1EA; /* 16,60:1 auf Papier */ --auf-tinte:#131210; --gedaempft:#ADA69A; /* 7,75:1 auf Papier, 7,34:1 auf --flaeche */ --gedaempft-weich:#7E776C; --beschriftung:#938C82; /* 4,89:1 auf --flaeche-2, 5,33:1 auf --flaeche (K-34, Fassung 307) – siehe Anmerkung (a) oben */ --linie:#2E2B26; --linie-stark:#3E3A33; --gewaehlt:#2C2924; --auf-gewaehlt:#F4F1EA; /* 12,84:1 */ --band-aus:#0C0C0C; /* Zeitblock darauf 3,17:1, --akzent 9,7:1 */ --zeilen-bild:#A79E90; /* 7,39:1 auf --dunkel (bis 423: 1,35:1) */ --punkt-aus:#4A453D; --akzent-weich:#2A2013; --fokus:#F5A623; /* Bernstein: ≥ 7,15:1 auf jeder dunklen Fläche (Fassung 406) */ --akzent-text:#F0B14B; /* 9,36:1 auf --flaeche, 9,89:1 auf Papier */ --gruen:#7FC08A; --gruenBg:#1B2A1E; /* 7,02:1 */ --gelb:#F0B14B; --gelbBg:#2A2013; /* 8,44:1 */ --rot:#F0907C; --rotBg:#2E1A16; --rot-text:#F4A895; /* 7,04:1 bzw. 8,53:1 */ --blau:#8FBCE0; /* 9,31:1 */ --neutral:#ADA69A; --neutralBg:#22201C; /* 6,74:1 */ --schatten-1:0 1px 2px rgba(0,0,0,.4); --schatten-2:0 2px 10px rgba(0,0,0,.45); --schatten-3:0 16px 46px rgba(0,0,0,.6); } /* ---- Die dunkle Seitenleiste: die Markenfläche des Entwurfs ---- MODUSUNABHÄNGIG. Sie ist in beiden Farbmodi dieselbe dunkle Fläche; im Dunkelmodus trennt sie nicht mehr die Helligkeit vom Arbeitsbereich, sondern die Linie und der wärmere Ton. Das ist eine bewusste Änderung gegenüber Fassung 90, wo sie im Dunkelmodus zusätzlich abgedunkelt wurde. */ :root,[data-thema="dunkel"]{ --seite-oben:#1A140B; --seite-unten:#0E0B06; --seite-text:#F6F2EA; /* 16,37:1 auf --seite-oben */ --seite-gedaempft:#A79E90; /* 6,91:1 – reicht für Fließtext */ --seite-linie:rgba(255,255,255,.10); --seite-flaeche:rgba(255,255,255,.06); /* Dieselbe Fläche, aber UNDURCHSICHTIG. Sie ist für die nativen Bedienelemente in der Seitenleiste (Kundenauswahl, Suchfeld) gedacht: Ein Browser malt unter ein und die Ausfüllhilfe IMMER hell – auch im Dunkelmodus. Es ist eine Zeile, und ohne sie hilft kein einziger Farbwert weiter oben: Native Bedienelemente fragen nicht das Stylesheet, sondern das Farbschema. */ :root{color-scheme:light} :root[data-thema="dunkel"]{color-scheme:dark} /* Die Seitenleiste ist in BEIDEN Modi dunkel. Also gilt für alles darin auch in der hellen Fassung das dunkle Schema – sonst sitzt ein hell gemaltes Bedienelement auf dunklem Grund. */ .seite{color-scheme:dark} :focus{outline:none} :focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:3px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:-1px} /* Fassung 406 (L-609): Der Ring liegt 2 px NEBEN dem Element, auf der Fläche darum herum. Gegen die muss er stehen, nicht gegen den Knopf. Bis 405 bekam hier jeder Hauptknopf die dunkle Schrift des Bernsteins als Ringfarbe: im hellen Modus gut sichtbar, im Dunkelmodus 1,01:1 auf Papier, also unsichtbar, und auf den dunklen Leisten in beiden Modi. --fokus steht neben dem Bernsteinknopf wie neben jedem anderen bei mindestens 3:1. Die Klasse für Bernsteinflächen, die hier mit genannt war, benutzte kein Skript; sie ist mit weg. */ /* ---------- Zum Inhalt springen (WCAG 2.4.1, Stufe A) ---------- Sie steht als erstes Element im Rumpf, ist unsichtbar und kommt beim ersten Tabdruck hervor. Nicht `display:none` und nicht `visibility:hidden` – beides nimmt dem Element auch den Fokus, und dann gibt es die Marke für genau die Leute nicht, für die sie gebaut ist. Sie steht deshalb außerhalb des Bildes und kommt beim Fokus hinein. Der Farbwechsel ist Absicht: Bernstein trägt DUNKLEN Text (--auf-akzent, 9,14:1), nie weißen. Regel 3 der Gestaltung. */ .sprungmarke{ position:fixed;top:var(--a3);left:var(--a3);z-index:9999; transform:translateY(-200%); background:var(--akzent);color:var(--auf-akzent); padding:var(--a3) var(--a5);border-radius:var(--r1); font-size:var(--s3);font-weight:600;text-decoration:none; box-shadow:var(--schatten-3); transition:transform var(--takt) ease-out } .sprungmarke:focus{transform:translateY(0)} /* Das Sprungziel selbst bekommt `tabindex="-1"`, damit der Fokus dort BLEIBT. Einen Ring braucht es dafür nicht – der Inhalt ist keine Bedienung, und ein Rahmen um die halbe Seite verwirrt mehr, als er hilft. */ main.haupt:focus{outline:none} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ---------- Knöpfe ---------- */ /* 44 × 44 px ist die Grenze, unter der Fehlgriffe anfangen — und zwar nicht erst auf dem Handy. Ein Berührungsbildschirm am Schreibtisch ist heute der Normalfall; bis Fassung 91 galt die Grenze nur unter 860px Fensterbreite. Ausgenommen bleiben Textknöpfe: die stehen in einem Satz und dürfen ihn nicht auseinanderziehen. --r1 statt --r2: Knöpfe sitzen in Karten, und die haben --r2. Gleiche Rundung innen wie außen sieht aus wie ein Fehler. */ button{font-family:inherit;cursor:pointer;border:0;border-radius:var(--r1); padding:var(--a3) var(--a4);font-size:var(--s3);font-weight:600; display:inline-flex;align-items:center;justify-content:center;gap:var(--a2); background:var(--akzent);color:var(--auf-akzent); transition:filter var(--takt) ease,background var(--takt) ease, border-color var(--takt) ease,color var(--takt) ease} button:not(.text-knopf){min-height:44px} /* Hover und Aktiv gehen ABWÄRTS, nicht aufwärts. Ein Knopf, der beim Zeigen heller wird, sieht aus, als würde er sich zurückziehen; ein dunklerer sieht gedrückt aus. Werte aus dem Zustandsblatt. */ button:hover{filter:brightness(.94)} button:active{filter:brightness(.88)} /* Umriss-Knopf: transparent, EIN Strich in --linie-stark. Das ist alles, was neben dem einen Hauptknopf einer Seite stehen darf. */ /* Fassung 406 (F11): Der Strich nimmt --feld-rand wie ein Eingabefeld, 4,02:1 auf Weiß. --linie-stark stand bei 1,65:1, und ein Knopf, dessen Umriss man nicht sieht, ist für viele kein Knopf. */ button.sek{background:transparent;border:1px solid var(--feld-rand);color:var(--tinte)} button.sek:hover{background:var(--flaeche-2);filter:none} button.sek:active{background:var(--flaeche-3);filter:none} /* ============================================================ Knöpfe auf DUNKLEM Grund — eine Stelle für alle (Fassung 177) ------------------------------------------------------------ `button.sek` trägt `color: var(--tinte)`, also die Schriftfarbe der hellen Fläche. Auf einer dunklen Leiste ist das dunkel auf dunkel: Der Knopf ist da, tut auch etwas, und man sieht ihn erst, wenn der Zeiger darüberfährt. Gemeldet am 12.09.2026 an der Auswahlleiste der Mediathek („Auswahl aufheben" war ein leeres Rechteck), `ops/referenz/lumafy-medien-auswahlleiste-unsichtbarer-knopf-2026-09-12.png`. Derselbe Fehler war vorher schon zweimal einzeln behoben worden — an der Großansicht und am Betreuungsband. Beim dritten Mal gehört er an EINE Stelle, und diese Liste ist sie. **Wer eine neue dunkle Fläche baut, trägt sie hier ein.** Die Regel nimmt Schrift und Rand aus `currentColor`, also aus der Farbe, die die Fläche ohnehin für ihren Text setzt — damit stimmt sie in jedem Farbmodus, ohne dass hier ein zweiter Farbwert gepflegt wird. Die feineren Werte der beiden älteren Flächen stehen weiter unten und gewinnen dort; diese Regel ist der Rückfall, der keine Fläche mehr vergisst. */ .gross-leiste button.sek, .kk-band button.sek, .wahlleiste button.sek{background:transparent;color:inherit; border:1px solid currentColor} .gross-leiste button.sek:hover, .kk-band button.sek:hover, .wahlleiste button.sek:hover{background:rgba(255,255,255,.14); color:inherit;border-color:currentColor;filter:none} .gross-leiste button.sek:active, .kk-band button.sek:active, .wahlleiste button.sek:active{background:rgba(255,255,255,.22);filter:none} .wahlleiste .text-knopf{color:inherit;text-decoration:underline} /* Der Fokusring auf diesen Leisten bleibt Bernstein (Fassung 406): 7,72:1 auf --kk-grund, 9,01:1 auf --gewaehlt. --fokus ist im hellen Modus das dunklere Bernstein für helles Papier und stünde hier nur bei 3,87:1. Hauptknöpfe hatten bis 405 sogar die dunkle Bernsteinschrift als Ring, 1,02 bis 1,18:1 auf diesen Flächen. */ .kk-band :focus-visible,.wahlleiste :focus-visible,.kk-hinweis :focus-visible, .dialog.vorfuehr .dialog-kopf :focus-visible{outline-color:var(--akzent)} /* Ein ZERSTÖRENDER Knopf auf dunklem Grund bleibt rot — aber nicht in `--rot`: Das wechselt mit dem Farbmodus und ist im hellen ein dunkles Ziegelrot, das auf der fast schwarzen Leiste bei 2,4:1 steht. Dafür gibt es `--rot-auf-dunkel` im Tokenblock: EIN Wert für beide Modi, weil die Leiste in beiden dunkel ist. Die Bedeutung bleibt: Rot heißt „das nimmt etwas weg". */ .wahlleiste button.gefahr, .kk-band button.gefahr{background:transparent;color:var(--rot-auf-dunkel); border:1px solid var(--rot-auf-dunkel-linie)} .wahlleiste button.gefahr:hover, .kk-band button.gefahr:hover{background:var(--rot-auf-dunkel-flaeche); border-color:var(--rot-auf-dunkel);color:var(--rot-auf-dunkel);filter:none} /* Auch ein AUSWAHLFELD steht auf der dunklen Leiste (seit die Auswahl in einen Ordner wandern kann). Ohne diese Regel erbt es die helle Fläche der Formulare und sitzt als weißer Block in einer schwarzen Leiste. Die Einträge der Klappliste zeichnet das Betriebssystem — dort hilft `color-scheme`. */ .wahlleiste select{background:transparent;color:inherit; border:1px solid currentColor;border-radius:8px; padding:8px var(--a3);width:auto;color-scheme:dark} .wahlleiste select:hover{background:rgba(255,255,255,.14)} /* Zerstörend: Umriss in Rot. Eine rote FLÄCHE trägt in der ganzen Anwendung nur der Notfall-Auslöser. */ button.gefahr,button.knopf-loeschen{background:transparent; border:1px solid var(--linie-stark);color:var(--rot)} button.gefahr:hover,button.knopf-loeschen:hover{background:var(--rotBg); border-color:var(--rot);filter:none} /* ---------- Der Notfall-Auslöser ---------- Die EINZIGE rote Fläche der Anwendung. 56px hoch, weil er im Ernstfall in Eile getroffen wird. BEFUND gegen BAUTEILE.md: Dort steht `background: var(--rot); color: #fff` mit der Angabe 5,4:1. Im HELLEN Modus stimmt das ungefähr (gerechnet 6,69:1). Im DUNKELMODUS ist --rot aber #F0907C — ein heller Lachston —, und weißer Text darauf erreicht 2,34:1. Der wichtigste Knopf der Anwendung wäre dort unlesbar. Deshalb die modusunabhängige Fläche --notfall (8,91:1 in beiden Modi), dieselbe wie beim Banner. */ button.knopf-notfall{background:var(--notfall);color:var(--auf-notfall); border:0;min-height:56px;font-weight:600} /* Fassung 406: Hier stand ein weißer Ring. Er liegt NEBEN dem Knopf, auf hellem Grund (1,17:1 auf --rotBg, 1,00:1 auf Weiß) — im hellen Modus war er unsichtbar. Jetzt gilt der Ring der Grundregel. */ /* `--s3` und nicht `--s5`: Ein kleiner Knopf trug die Schriftgröße von Kartentiteln — 20 px, während jeder andere Knopf der Anwendung 14 px trägt. Auf der Live-Steuerung standen „Inhalt" und „Bearbeiten" dadurch größer als „Szene anlegen" daneben, und der unwichtigere Knopf war der lautere. Einzelne ZEICHEN (×, ↑, ↓) brauchen die Größe wirklich — die tragen sie jetzt selbst. */ button.mini{padding:var(--a1) var(--a2);font-size:var(--s3);line-height:1; background:transparent;color:var(--gedaempft)} button.mini.zeichen-knopf{font-size:var(--s5)} button.mini:hover{color:var(--tinte);background:var(--flaeche-3);filter:none} button:disabled{opacity:.45;cursor:not-allowed} /* Ladend: die Beschriftung BLEIBT STEHEN und der Ring tritt davor. Bis Fassung 90 wurde der Text durchsichtig geschaltet – der Knopf war dann für einen Moment leer und niemand wusste mehr, was er gerade angestoßen hatte. */ button.laedt{position:relative;pointer-events:none} button.laedt::before{content:"";display:inline-block;vertical-align:-2px; width:14px;height:14px;margin-right:var(--a2); border:2px solid currentColor;border-right-color:transparent; border-radius:50%;animation:kreisel .7s linear infinite} @keyframes kreisel{to{transform:rotate(360deg)}} .text-knopf{background:none;padding:2px 0;font-size:var(--s2);font-weight:400; color:var(--gedaempft);text-decoration:underline;text-underline-offset:2px} .text-knopf:hover{color:var(--tinte);background:none;filter:none} /* ---------- Eingaben ---------- font-size:var(--s4) ist 16px und darf NIE kleiner werden: unter 16px zoomt iOS beim Antippen automatisch in die Seite hinein, und der Bediener steht danach in einer verschobenen Ansicht. */ /* Ein Strich, nicht anderthalb, und der kräftigere der beiden Töne: Ein Feld muss als Feld zu erkennen sein, bevor man hineinklickt. --linie ist für Trennungen INNERHALB einer Fläche gedacht und war auf Weiß kaum zu sehen. 48px Mindesthöhe, weil 44 die Grenze ist, unter der Fehlgriffe anfangen — und ein Feld trifft man schlechter als einen Knopf, weil es keinen Rand hat, der einlädt. */ input,select,textarea{width:100%;padding:var(--a3) var(--a4); border:1px solid var(--linie-stark); border-radius:var(--r1);font-size:var(--s4);font-family:inherit;min-height:48px; background:var(--flaeche);color:var(--tinte); transition:border-color var(--takt) ease,background var(--takt) ease} input:hover,select:hover,textarea:hover{border-color:var(--tinte)} input:focus,select:focus,textarea:focus{outline:2px solid var(--fokus);outline-offset:-1px; border-color:transparent} /* Gesperrt sieht anders aus als leer. Ohne die abgesetzte Fläche klickt man dreimal hinein, bevor man es merkt. */ input[disabled],select[disabled],textarea[disabled]{background:var(--flaeche-2); color:var(--gedaempft);border-color:var(--linie);cursor:not-allowed} /* Fehlerhaft: Rahmen UND ein Satz darunter. Ein roter Rahmen allein sagt nur „irgendwas stimmt nicht" und für Farbenblinde gar nichts. */ input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--rot)} .feld-fehler{font-size:var(--s2);color:var(--rot);margin-top:var(--a1); display:flex;align-items:center;gap:var(--a2)} /* Preise, Uhrzeiten, Kopplungscodes (Regel 7). */ .eingabe-zahl,input[type=time],input[type=date],input[type=number]{ font-family:var(--mono);font-variant-numeric:tabular-nums} textarea{resize:vertical;min-height:72px;line-height:1.45} /* ============================================================ Häkchen tragen NICHT die Akzentfarbe (Fassung 132) ------------------------------------------------------------ Hier stand `accent-color:var(--akzent)`. Am 26.08.2026 im Editor nachgezählt: In einer Playlist mit drei Meldungen stehen FÜNF angehakte Kästchen „Hervorheben" — fünf 16-px-Bernsteinquadrate, dazu der eine bernsteinfarbene Speicherknopf oben rechts. Damit sagt Bernstein auf dieser Seite nicht mehr „hier handeln", sondern „hier ist irgendwas". Die Regel dahinter ist mit dieser Fassung präzisiert (R3): Gezählt werden HANDLUNGSflächen, nicht Zustandsmarken. Ein Häkchen ist ein Zustand — es zählt nicht als zweiter Akzent, und es trägt ihn auch nicht (Entscheidung Cedric, 26.08.2026). ============================================================ */ /* Größe und Polster müssen mit zurück (Fassung 212): Die Regel oben gibt JEDEM `input` 48 px Mindesthöhe und ein Polster — ein Kästchen oder ein Punkt wurde dadurch zu einem schmalen, 48 px hohen Balken. Am Bildschirmfoto der Anfrage-Karten (15.09.2026) sah man es als orangen Strich statt eines Punktes. 18 px ist dieselbe Größe wie bei `.pl-wahl`, dem einzigen Kästchen, das bisher richtig aussah. */ input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0; flex:none;accent-color:var(--tinte)} /* Beschriftungen in normaler Schreibweise. Versalien sind ein Betonungsmittel – wenn ALLES betont ist, ist nichts betont, und Großbuchstaben liest man rund 15 % langsamer. Versalien bleiben den Bereichstiteln vorbehalten (.seite-bereich, .seite-titel, .vorschau-kopf) und sonst nirgends. */ label{display:block;font-size:var(--s2);letter-spacing:0;text-transform:none; color:var(--beschriftung);margin:0 0 var(--a1);font-weight:600} .leise{font-size:var(--s1);color:var(--gedaempft)} .einzeilig{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- Anmeldung ---------- Ab Fassung 331 nach Vorschlag 1a (design_handoff_lumafy_ui/anmelden/), Block „Anmelden · Vorschlag 1a“ weiter unten. */ /* ---------- Filterchips der Mediathek (Fassung 99) ---------- Sie filtern und zählen zugleich. „Ungenutzt · 0" sagt ohne einen Klick, dass aufgeräumt ist. */ .med-chips{display:flex;gap:var(--a2);flex-wrap:wrap;min-width:0} .med-chip-zahl{color:var(--gedaempft)} .med-chip.an .med-chip-zahl{color:var(--auf-gewaehlt);opacity:.7} /* Das Etikett im Kopf einer Live-Gruppe. Es steht dort, wo man beim Öffnen der Seite zuerst hinsieht, und nicht erst in der Zeile darunter. */ .sz-aktiv{margin-left:auto} /* Nur das Logo auf der Anmeldekarte wird umgedreht. Die Seitenleiste trägt in BEIDEN Farbmodi die helle Fassung (logo-hell.png) – sie ist in beiden Modi eine dunkle Fläche, ein Umdrehen hätte dort ein dunkles Logo auf dunklem Grund ergeben. */ /* Die Fehlerzeile hält sich Platz frei, auch wenn nichts darin steht: Springt der Knopf beim Fehler nach unten, steht er nicht mehr da, wo der Zeiger hinzielt. Auf der Anmeldung gilt das nur, wenn wirklich etwas darin steht — dort steht der Knopf unter dem Feld und nicht in einer Kette von Feldern (`.anmelde-form .fehler:empty`). */ .fehler{color:var(--rot);font-size:var(--s-knopf);margin-top:var(--a4);min-height:20px;line-height:1.45} /* ---------- Gerüst ---------- Die Seitenleiste ist die Markenfläche des Entwurfs: eine dunkle, warme Fläche neben hellem Papier. Alles darin rechnet mit --seite-* und nicht mit --flaeche/--tinte – sonst kippt der Kontrast, sobald jemand den Farbmodus wechselt. */ #app{display:grid;grid-template-columns:var(--seitenleiste) 1fr;min-height:100vh} .seite{background:linear-gradient(180deg,var(--seite-oben),var(--seite-unten)); color:var(--seite-text);border-right:1px solid var(--seite-linie); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; box-sizing:border-box} /* Die Wortmarke steht auf derselben senkrechten Linie wie die Symbole der Navigation darunter (Leistenpolster 12 px plus Knopfpolster 12 px). Vorher standen sie 8 px auseinander, und die Leiste hatte zwei linke Kanten. */ .marke{padding:var(--a5) var(--a5) var(--a4);display:flex;align-items:center; justify-content:space-between;gap:var(--a2)} .marke img{height:24px;display:block} .kundenwahl{padding:0 var(--a4) var(--a4);border-bottom:1px solid var(--seite-linie); margin-bottom:var(--a2)} .kundenwahl label{margin-bottom:var(--a1);color:var(--seite-gedaempft)} .kundenwahl select{padding:var(--a2) var(--a3);font-size:var(--s4);font-weight:600; background:var(--seite-flaeche-fest);border-color:var(--seite-linie);color:var(--seite-text)} .kundenwahl .text-knopf{margin-top:var(--a2);color:var(--seite-gedaempft)} .kundenwahl .text-knopf:hover{color:var(--seite-text)} /* Bereichsüberschrift in der Seitenleiste – hier sind Versalien richtig: sie sortieren, sie beschriften nicht. */ .seite-bereich{padding:var(--a3) var(--a4) var(--a1);font-family:var(--mono); font-size:var(--s2);letter-spacing:.1em; text-transform:uppercase;color:var(--seite-gedaempft);font-weight:400} .seite-titel{display:flex;align-items:center;justify-content:space-between;gap:var(--a2); padding:var(--a3) var(--a4) var(--a1);font-family:var(--mono); font-size:var(--s2);letter-spacing:.1em; text-transform:uppercase;color:var(--seite-gedaempft);font-weight:400} .seite-titel .anzahl{font-weight:600;letter-spacing:.04em;text-transform:none;font-size:var(--s1)} .seite-titel .mini{color:var(--seite-gedaempft)} .seite-titel .mini:hover{color:var(--seite-text);background:var(--seite-flaeche)} .bs-suche{padding:0 var(--a3) var(--a2)} .bs-suche input{padding:var(--a2) var(--a3) var(--a2) var(--a6);font-size:var(--s4); border-radius:var(--r2);background:var(--seite-flaeche-fest);border:1px solid var(--seite-linie); color:var(--seite-text); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:var(--a3) center;background-size:14px} .bs-suche input::placeholder{color:var(--seite-gedaempft)} .liste{flex:1;overflow:auto;padding:var(--a1) var(--a3) var(--a3);scrollbar-width:thin} .eintrag{padding:var(--a3);border-radius:var(--r2);cursor:pointer;display:flex; align-items:center;gap:var(--a3);margin-bottom:var(--a1);min-height:44px; transition:background var(--takt) ease,color var(--takt) ease} .eintrag:hover{background:var(--seite-flaeche)} /* Der ausgewählte Bildschirm trägt den Akzent: die Auswahl IST die Handlung, um die sich der ganze Arbeitsbereich dreht. */ .eintrag.aktiv{background:var(--akzent);color:var(--auf-akzent)} .eintrag .punkt{width:8px;height:8px;border-radius:50%;background:var(--punkt-aus);flex:none} /* Die Zustandspunkte stehen IMMER auf der dunklen Seitenleiste – in beiden Farbmodi. Deshalb feste helle Töne und keine Token, die im hellen Modus für helle Flächen gerechnet sind. Rot und Bernstein liegen bewusst weit auseinander: „meldet sich nicht" darf nicht wie der Akzent aussehen. */ .eintrag .punkt.an{background:var(--punkt-an)} .eintrag .punkt.pause{background:var(--akzent)} .eintrag .punkt.feierabend{background:var(--punkt-feierabend)} .eintrag .punkt.still{background:var(--punkt-still)} .eintrag.aktiv .punkt.an{background:var(--punkt-an-fest)} .eintrag .n{flex:1;min-width:0} .eintrag .n>div:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:600;font-size:var(--s3)} /* Der Zustand steht als WORT da, nicht nur als Punkt: ein grauer Punkt sagt einem Farbenblinden nichts und einem Eiligen auch nicht. Und er darf nie abbrechen – „NOCH NI…" ist keine Auskunft. Deshalb bekommt .zustand kein ellipsis, sondern flex:none. */ .eintrag .v{font-size:var(--s1);color:var(--seite-gedaempft); display:flex;gap:var(--a1);margin-top:2px;min-width:0} .eintrag.aktiv .v{color:rgba(26,20,11,.72)} .eintrag .v .zustand{flex:none;font-weight:600;white-space:nowrap} .eintrag .v .wann{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* `.liste-leer` war für die dunkle Seitenleiste gedacht und trug deren Schriftfarben — stand aber in zwölf Listen auf der hellen Fläche (Bildschirme, Kunden, Zugänge, Ordner, Szenen): dort war „Noch kein Bildschirm gekoppelt." hellgrau auf hellgrau, praktisch unsichtbar (Fassung 188, Durchsicht). Jetzt: Fläche = Flächenfarben, Seitenleiste = Leistenfarben. */ .liste-leer{padding:var(--a4) var(--a3);font-size:var(--s2);color:var(--gedaempft); line-height:1.55} .liste-leer b{display:block;color:var(--tinte);font-size:var(--s3);margin-bottom:var(--a1)} #seitenleiste .liste-leer{color:var(--seite-gedaempft)} #seitenleiste .liste-leer b{color:var(--seite-text)} /* `margin-top:auto` schiebt den Fuß an den unteren Rand der Leiste. Bis Fassung 67 erledigte das die Bildschirmliste, die zwischen Navigation und Fuß stand und mit `flex:1` wuchs. Mit der Umstellung auf Seiten ist diese Liste weggefallen — seitdem wuchs nichts mehr, und Einstellungen, Support und die Nutzerzeile klebten direkt unter der Navigation statt unten in der Ecke. Ohne diese eine Zeile sitzt das Seltene an der auffälligsten Stelle der Leiste. */ .seite-fuss{margin-top:auto; padding:var(--a4) var(--a3) var(--a3); display:flex;flex-direction:column;gap:2px} /* Die Nutzerzeile ist EIN Eintrag mit einem Menü dahinter – vorher lagen hier ein rot umrandeter Knopf, zwei Links, zwei große Sprachknöpfe und eine Namenszeile: fünf selten gebrauchte Dinge an der auffälligsten Stelle nach dem Logo. */ .nutzer-knopf{display:flex;justify-content:flex-start;align-items:center;gap:var(--a3);width:100%;text-align:left; background:transparent;border:1px solid transparent;border-radius:var(--r2); padding:var(--a2) var(--a3);min-height:44px;color:var(--seite-text)} .nutzer-knopf:hover{background:var(--seite-flaeche);filter:none} .nutzer-knopf .kuerzel-kreis{width:32px;height:32px;border-radius:var(--r-voll);flex:none; background:var(--seite-flaeche-fest);color:var(--seite-text);display:flex; align-items:center;justify-content:center;font-family:var(--mono); font-size:var(--s1);font-weight:400} .nutzer-knopf .wer{flex:1;min-width:0} .nutzer-knopf .wer b{display:block;font-size:var(--s2);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nutzer-knopf .wer span{display:block;font-size:var(--s1);color:var(--seite-gedaempft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nutzer-knopf .pfeil{color:var(--seite-gedaempft);font-size:var(--s1);flex:none} /* Das Menü hinter der Nutzerzeile: Protokoll, Anfragen, Eigenes Team, Abmelden. Es klappt nach OBEN auf – die Zeile steht am unteren Rand. Der Doppelselektor ist Absicht und kein Schmuck. Die allgemeine Regel „.menue" steht siebenhundert Zeilen weiter unten und setzt top:64px; bei gleicher Spezifität gewinnt die spätere Regel. Das Menü klappte deshalb nach UNTEN auf, aus dem Fenster hinaus: sichtbar war nur noch der obere Rand von „Protokoll". Nachgemessen bei 1440×900 – Menüoberkante 882 px, Fensterhöhe 900 px. Mit dem vierten Eintrag („Eigenes Team") wäre das endgültig unbenutzbar geworden, deshalb hier gerade gezogen. */ /* Die Linie sitzt ab Fassung 101 hier statt über dem ganzen Fuß: Getrennt wird die Person vom Rest der Leiste, nicht der Fuß vom Alltag — genau so steht es im Entwurf. */ .nutzer-huelle{position:relative;border-top:1px solid var(--seite-linie); margin-top:var(--a2);padding-top:var(--a2)} .menue.nutzer-menue{left:0;right:auto;width:100%;top:auto; bottom:calc(100% + var(--a2));min-width:0} /* Symbolknopf – überall gleich, immer mit aria-label */ .sym{background:transparent;border:1px solid var(--linie);color:var(--gedaempft); border-radius:var(--r1);padding:var(--a2);font-size:var(--s2);line-height:1;flex:none; min-width:32px} .sym:hover{color:var(--tinte);border-color:var(--linie-stark);background:var(--flaeche-2);filter:none} .seite .sym{border-color:var(--seite-linie);color:var(--seite-gedaempft)} .seite .sym:hover{color:var(--seite-text);background:var(--seite-flaeche); border-color:var(--seite-text)} /* Mond und Fragezeichen neben der Wortmarke sind Werkzeuge und keine zweite Marke. Mit der pauschalen Mindesthöhe von 44 px standen sie höher als das Logo daneben (24 px) und zogen den Blick als Erstes auf sich — ausgerechnet die zwei Knöpfe, die am seltensten gebraucht werden. Auf dem Handy gilt die 44 weiter, dort wird mit dem Daumen getroffen (siehe Handy-Abschnitt). */ /* KEIN `display` in dieser Regel. Sie stand hier einen Nachmittag lang mit `display:inline-flex` — und weil `.marke .sym` zwei Klassen zählt und `.nur-handy{display:none}` nur eine, war damit das Schließkreuz der Handy-Schublade auch am Rechner sichtbar: drei Knöpfe neben der Marke statt zwei. Die Ausrichtung kommt ohnehin aus der Grundregel für