/* ============================================================================ Ospitra - Designtokens der Betreiberoberflaeche ---------------------------------------------------------------------------- Versionsstempel 1.2.0 - 29.09.2026 Herkunft Brief 10 (Fundament, 14.08.2026) Brief 10a (Nachschaerfung, sieben Punkte, 15.08.2026) Brief 10b (Farberweiterung, 15.08.2026) Brief 11a (Kontraste nach A-11-08, 28.09.2026): sieben Werte geaendert, hell text-subtle, warning, border-strong; dunkel text-subtle, danger, border-strong, accent-weak. Rechnung und alte Werte in berichte/designstand-11a/DECISIONS.md, E-03. Tokentabelle Design Language v3 Abschnitt 14 "Tokens, alt und neu", eingefroren am 29.09.2026 (berichte/design-gesamtstand/ stand-2026-09-29/ospitra-design-language-v3.dc.html). 38 Eintraege, als Daten in tools/design/tokens-v3.js. Geaendert: r-chip, r-card, sh-overlay (hell). Neu: Schrift, Schriftgroessen, r-object, r-touch, sh-1, focus, drei weak-Toene, drei Dichten, Zustandskante, undo-window, Symbole, Bewegung. Dunkle Werte der weak-Toene stehen, sind aber zurueckgestellt und nicht gestaltet. Den Wert von --edge-locked legt die Komponentenbibliothek fest (berichte/ komponentenbibliothek/DECISIONS.md, E-11). Quelle design/prototyp/fundament-11a-2026-09-28.dc.html, Regelbloecke :root, [data-theme="dark"], [data-density="comfortable"] Nachweis node tools/design/tokens-abgleich.js zeigt, dass kein Token fehlt und keines hinzuerfunden ist (Soll: Prototyp plus v3-Tabelle) DIESE DATEI IST DIE QUELLE. Claude Design haelt eine Kopie, nie das Original - dieselben Tokens braucht spaeter der echte Frontend-Code. Regeln, die aus dieser Datei folgen (Begruendung in design-system.md): - Farbe codiert Identitaet, nie Zustand. Zustand laeuft ueber Form, Position und Beschriftung, mit hoechstens vier semantischen Farben. - Kein Farbwert steht ausserhalb dieser Datei. Im Markup steht nur der Tokenname, damit Hell und Dunkel dieselbe Datei teilen. Pruefregel 9 in tools/pruefung/ setzt das durch. - Werte werden hier nicht "verbessert". Faellt eine Unstimmigkeit auf, wird sie gemeldet, nicht geaendert - geaendert wird ein Wert nur mit einem Brief, der es verlangt (zuletzt Brief 11a, A-11-08). - Kontrast: Text 4,5:1, Bedienelemente 3:1, in beiden Themen, gerechnet gegen bg, surface und surface-sunken. border ist Trennlinie und kein Bedienelement; die Umrandung eines Bedienelements traegt border-strong. Umschaltung: data-theme="dark" und data-density="comfortable" am Wurzelelement. Reines CSS, ohne Abhaengigkeit von der Laufzeitumgebung des Prototyps. ========================================================================= */ :root { /* --- Flaechen --------------------------------------------------------- bg Grundflaeche surface Karten, Panels surface-sunken Zusammenfassungsspalten, Summenleisten */ --bg: #F7F7F5; --surface: #FFFFFF; --surface-sunken: #F0EFEC; /* --- Linien ----------------------------------------------------------- border Trennlinie im Ruhezustand border-strong Abgrenzung tragender Zonen (Ankerzone, Kopfleiste) und Umrandung der Bedienelemente, deshalb 3:1 hair Staerke der Trennlinie, Retina-Hairline */ --border: #DFDDD8; --border-strong: #8B8984; --hair: 0.5px; /* --- Text ------------------------------------------------------------- Drei Stufen, mehr nicht. Eine vierte Stufe waere eine Hierarchie, die niemand mehr unterscheidet. */ --text: #1C1B19; --text-muted: #5C5A55; --text-subtle: #6F6C66; /* --- Akzent ----------------------------------------------------------- accent die eine Akzentfarbe: aktive Navigation, Hauptaktion, Auswahl. Ein Bildschirm traegt hoechstens eine Flaeche in accent, alles andere ist Kontur oder Text. accent-2 zweiter Akzent aus Brief 10b, fuer die Gegenrichtung einer Bewegung (Abreise gegen Anreise, Aus gegen Ein) */ --accent: #14594A; --accent-weak: #E3EDE9; --accent-text: #FFFFFF; --accent-2: #A85B2C; --accent-2-weak: #F4E7DE; /* --- Status ----------------------------------------------------------- Ausschliesslich Statusbedeutung, nie Dekoration. Zusammen mit dem neutralen Zustand sind das die vier erlaubten semantischen Farben. Nie ohne Textbeschriftung verwenden. */ --success: #2E6B4F; --warning: #9B670E; --danger: #A32B22; /* --- Status, schwach (v3) --------------------------------------------- Hinterlegung zu den Statusfarben: Verbindungsband, Betriebsartband, Marken der Bereitschaftspruefung, Schraffur der gesperrten Kante. Nie ohne die kraeftige Statusfarbe als Text oder Rand daneben. */ --danger-weak: #F6E5E3; --warning-weak: #FCF7EE; --success-weak: #E3EFE8; /* --- Identitaet: Zimmerkategorie (Brief 10b) -------------------------- Fuenf Kategorietoene. Sie sagen WAS etwas ist, nie WIE es steht. */ --cat-1: #6E8CA0; --cat-2: #8A9A6B; --cat-3: #B08968; --cat-4: #8F7BA6; --cat-5: #6F9B94; /* --- Identitaet: Buchungskanal (Brief 10b) ---------------------------- Vier Kanaltoene. Direkt, Telefon, Booking, DIRS21. */ --ch-direkt: #2E6B4F; --ch-telefon: #7A6A9E; --ch-booking: #1F5FA8; --ch-dirs21: #B5762A; /* --- Identitaet: Modul (Brief 10b) ------------------------------------ Drei Modultoene fuer die Herkunftskennzeichnung einer Zeile. */ --mod-frontoffice: #14594A; --mod-gastro: #8A5A2B; --mod-reporting: #3F5F82; /* --- Kasse ------------------------------------------------------------ Dunkle Variante fuer Kasse und Kuechenmonitor. Sie gilt unabhaengig vom gewaehlten Thema und wird deshalb im dunklen Thema nicht neu gesetzt. */ --pos-bg: #0E0F10; --pos-surface: #191B1D; --pos-border: #2A2D30; /* --- Abstaende -------------------------------------------------------- Neun Stufen. Kein Zwischenwert von Hand. */ --s1: 2px; --s2: 4px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px; /* --- Radien ----------------------------------------------------------- Chip, Karte, Panel, Pille, dazu Objekt und Touch aus v3. */ --r-chip: 3px; --r-card: 6px; --r-panel: 8px; --r-pill: 999px; /* v3: r-object fuer Objektkarten, 40-px-Knoepfe und Zustandskante, r-touch fuer 64-px-Knoepfe im Service */ --r-object: 10px; --r-touch: 12px; /* --- Schatten --------------------------------------------------------- overlay fuer Panels und Dialoge, raised fuer schwebende Leisten, sh-1 (v3) fuer ruhende Objektkarten. Im dunklen Thema ist sh-1 zurueckgestellt. */ --sh-overlay: 0 6px 20px rgba(28,27,25,.14); --sh-raised: 0 2px 8px rgba(0,0,0,.10); --sh-1: 0 1px 2px rgba(28,27,25,.06), 0 1px 1px rgba(28,27,25,.04); /* --- Fokus (v3) ------------------------------------------------------- 2 px Akzent mit 2 px Abstand in Flaechenfarbe. */ --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); /* --- Abdeckung -------------------------------------------------------- scrim Ruecknahme der Seite hinter Dialog und Hilfeebene redact Schwaerzung im Bildschirmabzug des Fragedialogs. Eigener Token, weil die Schwaerzung deckend sein muss und in beiden Themen anders ausfaellt. */ --scrim: rgba(28,27,25,.28); --redact: #111111; /* --- Dichte ----------------------------------------------------------- Grundstellung ist compact (Maus). Die Umschaltung auf comfortable laeuft ueber pointer:coarse, nicht ueber die Bildschirmbreite. */ --row: 36px; --hit: 36px; --pad: 8px; /* --- Dichte als System (v3) ------------------------------------------- Touch fuer Housekeeping, Service, Kasse. Operational fuer Rezeption und Management. Dense fuer Buchhaltung, nur Maus und Tastatur. Gewaehlt wird am Bereich, nicht an der Bildschirmbreite. */ --density-touch: 64px; --density-operational: 44px; --density-dense: 32px; /* --- Schrift (v3) ----------------------------------------------------- Figtree fuer alles, Tabellenziffern ueberall. Mono nur fuer Kennungen. Groessen fuer Operational und Dense. */ --font: "Figtree",-apple-system,"Segoe UI",sans-serif; --mono: "JetBrains Mono",ui-monospace,Menlo,monospace; --fs-greet: 28px; --fs-title: 24px; --fs-h: 17px; --fs-obj: 15px; --fs-body: 14px; --fs-2: 13px; --fs-meta: 12px; --fs-num: 22px; /* --- Zustandskante (v3) ----------------------------------------------- Offen gestrichelt, bereit durchgezogen, gesperrt durchgezogen in danger mit Schraffur aus danger-weak und surface. Die Schraffur zeichnet die Komponente als Hintergrund; der Token traegt nur den Rand. */ --edge-open: 2px dashed; --edge-ready: 2px solid; --edge-locked: 2px solid; /* --- Rueckgaengig, Symbole, Bewegung (v3) ----------------------------- */ --undo-window: 8s; --icon-s: 14px; --icon-m: 20px; --icon-l: 24px; --icon-stroke: 1.75; --motion-fast: 120ms; --motion-base: 200ms; --ease: cubic-bezier(.2,0,0,1); /* --- Geraeterand ------------------------------------------------------ Notch und Home-Indikator. Gilt schon jetzt, damit die spaetere native App dieselbe Datei benutzt. */ --safe-b: env(safe-area-inset-bottom,0px); --safe-t: env(safe-area-inset-top,0px); } /* ============================================================================ Dunkles Thema Neu gesetzt wird nur, was sich aendert. Kasse, Abstaende, Radien, Dichte und Geraeterand gelten unveraendert weiter. ========================================================================= */ [data-theme="dark"] { /* --- Flaechen --------------------------------------------------------- */ --bg: #17181A; --surface: #1F2124; --surface-sunken: #141517; /* --- Linien ----------------------------------------------------------- */ --border: #303337; --border-strong: #686B6E; /* --- Text ------------------------------------------------------------- */ --text: #ECECEA; --text-muted: #A9ABAD; --text-subtle: #86888B; /* --- Akzent ----------------------------------------------------------- */ --accent: #3E9C80; --accent-weak: #182926; --accent-text: #0E1412; --accent-2: #D18B5C; --accent-2-weak: #2E211A; /* --- Status ----------------------------------------------------------- */ --success: #4E9E77; --warning: #C79A3A; --danger: #CB6C63; /* --- Status, schwach (v3, zurueckgestellt: steht, nicht gestaltet) ---- */ --danger-weak: #2A1A19; --warning-weak: #352B18; --success-weak: #17231E; /* --- Identitaet: Zimmerkategorie -------------------------------------- */ --cat-1: #8FA9BC; --cat-2: #A6B489; --cat-3: #C9A484; --cat-4: #A996BE; --cat-5: #8DB6AF; /* --- Identitaet: Buchungskanal ---------------------------------------- */ --ch-direkt: #4E9E77; --ch-telefon: #9E8FC4; --ch-booking: #5A93D6; --ch-dirs21: #D19A55; /* --- Identitaet: Modul ------------------------------------------------ */ --mod-frontoffice: #3E9C80; --mod-gastro: #C08A55; --mod-reporting: #6E93BE; /* --- Schatten --------------------------------------------------------- */ --sh-overlay: 0 8px 32px rgba(0,0,0,.55); --sh-raised: 0 2px 8px rgba(0,0,0,.45); /* --- Abdeckung -------------------------------------------------------- */ --scrim: rgba(0,0,0,.48); --redact: #000000; } /* ============================================================================ Dichte Geschaltet wird ueber die Zeigereigenschaft, nicht ueber die Breite: ein iPad quer ist 1194px breit und trotzdem ein Touchgeraet. Die Zuweisung des Attributs uebernimmt die Anwendung anhand von @media (pointer: coarse). ========================================================================= */ [data-density="comfortable"] { --row: 56px; --hit: 64px; --pad: 12px; }