/* VENDORTE KOPIE — nie von Hand ändern. Quelle: ecardilly-konfigurator packages/tokens/variables.css (develop). Sync: bin/rails tokens:sync (ADR-095 §4, ADR-035). */ /* * Design Tokens – Single Source of Truth. * Referenz: specs/brand-guidelines.md, specs/konfigurator/component-spec/component-spec-v1-FINAL.md §D. * NIEMALS magic numbers in CSS Modules – immer var(--token) verwenden. */ :root { /* ───── Primärfarben (Brand) ───── */ --gold-primary: #f5c842; --gold-hover: #e8b830; --gold-link: #c9a84c; --gold-light: #fdf9ec; /* Buehne der Papierkarten-Vorschau. KEINE freie Wahl: der Wert ist der Hintergrund, den der Renderer in das Paar-Bild selbst hineinrendert (`ecardilly-renderer/src/paperPreview.ts`, PAIR-Buehne). Steht die Flaeche drumherum auf einer anderen Creme-Nuance, sieht man die Kante des Bildes. Wer den einen Wert aendert, muss den anderen mitaendern. */ --paper-stage-bg: #f4f1ea; /* ───── Neutrale Farben ───── */ --text-primary: #1a1a1a; /* --text-muted traegt Sekundaertext, nicht Dekoration. #888888 ergab auf --panel-bg 3,54:1 und lag damit unter WCAG AA (4,5:1) — gemessen 2026-08-21 an den elf Punkt grossen Zustandswoertern der Auswerten-Flaechen (AN03-100). #6f6f6f haelt AA auf allen vier Flaechen, auf denen der Token heute steht: --panel-bg 5,02:1 · --app-bg 4,57:1 · --surface-hover 4,61:1 · --gold-light 4,77:1. Der Abstand zu --text-primary (#1a1a1a) bleibt gross genug, dass die Abstufung sichtbar bleibt. */ --text-muted: #6f6f6f; --text-light: #bbbbbb; --app-bg: #f5f4f0; --panel-bg: #ffffff; --panel-border: rgba(0, 0, 0, 0.1); --panel-border-hover: rgba(0, 0, 0, 0.2); /* ───── Semantische Farben ───── */ --success: #27ae60; --error: #c0392b; --warning: #e67e22; --info: #2980b9; /* ───── Textvergleich (webapp/admin/hilfe-seite functional-spec v1.1 H-37) ───── */ /* Grund einer hinzugekommenen bzw. entfallenen Textstelle im Textvergleich. Aus --success / --error abgeleitet statt als eigener Farbwert: die Flaeche folgt der Bedeutungsfarbe, wenn die sich aendert. Durchscheinend, damit sie auf --panel-bg wie auf --app-bg steht. Die Anteile (16 % / 10 %) sind die des freigegebenen Dummys hilfe-seite-dummy-v2.html, unveraendert uebernommen. */ --diff-add-bg: color-mix(in srgb, var(--success) 16%, transparent); --diff-del-bg: color-mix(in srgb, var(--error) 10%, transparent); /* ───── Diagramme (ADR-050 Punkt 9; Namen/Anzahl dort, Werte hier) ───── */ /* Eine Tonfamilie im Farbton von --gold-link (44°). Getrennt wird ueber Helligkeit, nie ueber den Farbton allein (ADR-050 Punkt 7). Alle Werte sind auf --panel-bg (#ffffff) gerechnet; eine dunkle Darstellung gibt es heute nicht (global.css setzt color-scheme: light). */ --chart-grid: #e8e5dc; /* Gitterlinie — Struktur, traegt keine Aussage */ --chart-zero: #87806e; /* Nulllinie — 3,12:1 gegen --chart-grid (Punkt 6) */ --chart-axis-label: #746e5e; /* Achsenbeschriftung — 5,08:1 auf --panel-bg (WCAG AA) */ /* Stapeltoene der Stueckkosten, von unten nach oben: Zahlung · KI · Technik · Druck. Monotone Helligkeitsstaffel, je Nachbarpaar rund 1,33:1 in Graustufen. */ --chart-stack-1: #e7e3d6; /* Zahlung — Leuchtdichte 0,768 */ --chart-stack-2: #d2c6a3; /* KI — Leuchtdichte 0,567 */ --chart-stack-3: #bdab75; /* Technik — Leuchtdichte 0,412 */ --chart-stack-4: #aa9350; /* Druck — Leuchtdichte 0,300 */ /* Linien. Die Farbe allein traegt nichts — Strichart und -staerke gehoeren dazu. */ --chart-line-1: #826927; /* Deckungsbeitrag · mittleres Jahr — durchgezogen */ --chart-line-2: #1a1a1a; /* Gewinn je Karte (gestrichelt) · laufendes Jahr (dick) */ --chart-line-3: #938d7b; /* aeltestes Jahr — gestrichelt, duenn */ /* ───── Kategorien ───── Sechs Reihen, die KATEGORIEN tragen (Anlaesse), keine Diagrammrollen. Eigene Familie, nicht eine Verlaengerung von --chart-line-*: jene benennen Rollen (Deckungsbeitrag, Gewinn, Jahrgang), diese benennen nichts als „die n-te Kategorie". KEINE BEDEUTUNGSFARBE. --error und --info waeren rechnerisch verwendbar (5,44:1 bzw. 4,30:1) und wurden ausgeschlossen: Rot heisst hier Abweichung. Eine Kategorie in --error liest sich als Warnung, die sie nicht ist (Entscheid Anja 2026-08-27). -1 bis -4 tragen dieselben Werte wie --chart-line-2/-1/-3 und --chart-stack-4; der Wert ist derselbe, die ROLLE eine andere. -5 und -6 sind neu. Gemessen 2026-08-27, alle sechs >= 3:1 gegen --panel-bg: -1 #1a1a1a 17,40:1 L 0,010 -2 #40408f 8,94:1 L 0,067 NEU -3 #826927 5,25:1 L 0,150 -4 #5a7ec7 4,00:1 L 0,212 NEU -5 #938d7b 3,31:1 L 0,267 -6 #aa9350 3,00:1 L 0,300 FARBE ALLEIN TRAEGT SIE NICHT. Das zulaessige Leuchtdichteband endet bei L 0,300 (darueber faellt der Kontrast unter 3:1), und sechs Reihen darin liegen zwangslaeufig eng. Vier Paare bleiben unter 1,5:1 und werden ueber die STRICHART getrennt (siehe _admin__ui_chart.scss): -4/-3 1,31:1 · -4/-5 1,21:1 · -4/-6 1,33:1 · -5/-6 1,10:1 Zuordnung: -1 -2 -4 durchgezogen · -3 -5 gestrichelt · -6 gepunktet. Die Paare mit gleicher Strichart liegen alle ueber 1,5:1. ROT-GRUEN-SCHWAECHE: -2 und -4 liegen im Blau-Indigo-Bereich (H 240° / 220°), die uebrigen vier im Gold-Grau. Unter Deuteranopie und Protanopie (Vienot-Simulation) betraegt der kleinste Abstand der beiden neuen zueinander 0,281 und zu den vier bestehenden 0,207 -- die Blau-Gelb-Achse bleibt bei beiden Formen erhalten. */ --chart-kategorie-1: #1a1a1a; --chart-kategorie-2: #40408f; --chart-kategorie-3: #826927; --chart-kategorie-4: #5a7ec7; --chart-kategorie-5: #938d7b; --chart-kategorie-6: #aa9350; /* ───── Canvas-spezifisch ───── */ --editable-dash: #c9a84c; --editable-dash-width: 1.5px; --editable-dash-array: 4, 3; --selected-stroke: #2980b9; /* ───── Spacing (Basis 4px) ───── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ───── Border-Radius ───── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ───── Sticker-Grid (symmetrische Kacheln) ───── */ /* row-gap == column-gap (gleicher Abstand horizontal wie vertikal). */ --sticker-grid-gap: var(--space-2); --sticker-grid-gap-mobile: var(--space-1); /* Innenabstand der quadratischen Kachel (Luft um den eingepassten Sticker). */ --sticker-tile-padding: var(--space-2); --sticker-tile-padding-mobile: var(--space-1); /* ───── Schatten ───── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-canvas: 0 4px 32px rgba(0, 0, 0, 0.18); /* ───── Transitions ───── */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; --transition-spring: 0.3s cubic-bezier(0.32, 0.72, 0, 1); /* ───── Layout-Dimensionen ───── */ --topbar-height: 52px; --toolbar-height: 44px; --sidebar-width: 300px; --admin-sidebar-width: 380px; /* Welcome-Board-Fotos G-5 (fotos-functional-spec.md §10, 2026-10-20): die Kundin ist mobil und oft älter — Tippflächen und Text grösser als im übrigen Editor. Eine Stelle für Chip, Blatt und Plus/Minus. */ --wb-foto-text: 17px; /* Text mind. 17 px (Chip, Blatt, Hinweise) */ --wb-foto-tipp: 48px; /* Tippflächen mind. 48 × 48 px (Plus/Minus) */ --wb-foto-blatt-knopf: 56px; /* Knopfhöhe im Blatt */ --bottombar-height: 60px; --bottomsheet-max-height: 75vh; /* ───── Typografie (brand-guidelines §Typografie; ADR-035 Etappe 1) ───── */ /* UI-Font-Stack (System, keine externe Abhängigkeit). */ --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Serif fuer Ueberschriften auf Produkt-/Verkaufsflaechen (Papierkarten-Layer, Funnel-Vorschau). Vorher nur lokal im Funnel definiert — eine Wertquelle. CARDO ZUERST (Entscheidung Anja 2026-10-26, GS08 N3): Georgia ist eine System-Schrift und fehlt auf Android und Linux -- dort fiel der Stapel auf die Serif des Geraets. Cardo laedt die Webapp selbst (`fonts.css`), wo sie fehlt, bleibt Georgia. Gemessen: Cardo Regular setzt Versalziffern (0–9 gleich hoch); Georgia setzte Mediaevalziffern -- falsch fuer Kennzahlen. */ --font-serif: Cardo, Georgia, 'Times New Roman', serif; /* Festbreite fuer Dateipfade und Rohtext in Admin-Flaechen (Hilfe-Seite H-37). System-Stack wie --font-ui: keine externe Abhaengigkeit, kein Nachladen. Vorher als Literal im Dummy -- eine Wertquelle statt Wiederholung je Baustein. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Schriftgrößen-Skala (Guideline-Tabelle). */ --text-page-title: 24px; --text-section-title: 18px; --text-body: 14px; --text-label: 12px; --text-small: 11px; --text-micro: 10px; /* Gewichte. */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Zeilenhöhen (je Skala-Stufe). */ --leading-tight: 1.3; /* Page Titles */ --leading-heading: 1.4; /* Section Titles / Labels / Small */ --leading-body: 1.6; /* Body */ --leading-micro: 1.2; /* Micro */ /* ───── Neutrale Flächen (ADR-035 Etappe 1: Magic-Numbers → Tokens) ───── */ --surface-hover: #f5f5f5; /* subtile Hover-Fläche (Ghost/Icon-Buttons, Toolbar-Zeilen) */ --surface-active: #ebebeb; /* gedrückte/aktive Fläche */ /* Transparenz-Raster (Checkerboard hinter Assets mit Alpha). */ --checkerboard-light: #f5f5f5; --checkerboard-dark: #e0e0e0; /* ───── Breakpoints — Single Source (Funnel + Konfigurator; component-spec §7) ───── */ /* Basis darunter = mobil. Hinweis: CSS @media kann var() NICHT konsumieren → Konsum via JS-useBreakpoint / Container-Queries; hier liegt die eine Wertquelle. */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; /* Mindest-Trefferfläche für Touch-Interaktion (component-spec §7 AK2). */ --touch-target-min: 44px; /* ───── Control-Höhen (brand-guidelines §Form-Controls, v1.2) ───── */ /* Feste Höhe plus line-height: 1, vertikal per Flex zentriert. Die Body-Zeilenhöhe (--leading-body) gehört NIE auf ein Control — sie ist die gemessene Ursache zu hoher Buttons (2026-08-21: 87 solcher Controls allein auf /admin/settings). --control-h-lg trägt denselben Wert wie --touch-target-min, ist aber nicht dasselbe: dort eine Untergrenze für jede Trefferfläche, hier eine gesetzte Höhe für ein Control. Beide bleiben. */ --control-h-sm: 28px; /* Inline-Aktionen in Tabellen, Ghost-Buttons */ --control-h-md: 36px; /* Standard: Button, Input, Select, Type-ahead */ --control-h-lg: 44px; /* Touch; alle Controls unterhalb --bp-md; Sticky-Speichern */ /* ───── Z-Index-System (Component Spec §D) ───── */ --z-canvas-bg: 10; --z-canvas-elements: 12; --z-canvas-overlay: 15; --z-canvas-snap: 16; --z-canvas-selection: 20; --z-watermark: 25; --z-watermark-heatmap: 26; --z-checkout-overlay: 30; --z-sidebar: 35; --z-fab: 40; --z-topbar: 50; --z-subpanel: 50; --z-bottomsheet-backdrop: 55; --z-bottomsheet: 60; --z-toolbar: 45; --z-toast: 80; --z-confirm: 90; --z-overlay-critical: 95; --z-popover: 100; } /* ═════════════════════════════════════════════════════════════════════════════ GAESTEFLAECHE — editoriales Register (additive Schicht) Spec: webapp/guest-surface/functional-spec/_shared/bausteine.md §2. WARUM EINE ZWEITE SKALA UND NICHT DIE BESTEHENDE: die Tokens oben sind ein WERKZEUG-Register fuer Editor und Admin -- 14px Grundschrift, kompakte Achse, Dichte vor Ruhe. Die Gaesteflaeche ist ein EDITORIALES Register: 16px Grundschrift, 3px Radius, weite Achse. Beides auf eine Skala zu zwingen beschaedigt eine von beiden -- eine Einladung, die wie ein Formular gesetzt ist, verkauft nichts, und ein Editor mit 16px Grundschrift verliert die Werkzeugdichte. HARTREGEL (T-1): additiv. KEINE bestehende Variable wird geaendert. Editor und Admin duerfen von dieser Schicht nichts merken. HARTREGEL (T-2): geteilt wird, was deckungsgleich ist. Die vier Goldtoene und --text-primary werden NICHT dupliziert, sondern oben bezogen. Zwei Wahrheiten ueber dieselbe Farbe sind der Anfang des Auseinanderlaufens. HARTREGEL (T-3): diese Schicht ist der RAHMEN. Palette und Schrift kommen je Anlass aus dem Karten-Design (design-vererbung.md) und ueberschreiben die --gs-color-*-Rollen zur Laufzeit. Was hier steht, sind die Startwerte des Fallbacks (§5) -- neutral plus Gold, und ausdruecklich kein Notzustand. ═════════════════════════════════════════════════════════════════════════════ */ :root { /* ───── Achse: 4er-Raster, weiter als das Werkzeug-Register ───── */ --gs-sp-1: 4px; --gs-sp-2: 8px; --gs-sp-3: 12px; --gs-sp-4: 16px; --gs-sp-5: 24px; --gs-sp-6: 32px; --gs-sp-7: 48px; --gs-sp-8: 64px; --gs-sp-9: 96px; /* ───── Schrift: Gaesteseite v3 (GS02 §3b T-1, Anja 2026-10-06) ───── Quelle: `gaesteseite-entwurf-v3.html`. In v2 trugen die kleinsten Stufen die wichtigsten Angaben (Abschnittsueberschriften 11px Versalien, Datum 12px, Ort 13,5px); fuer aeltere Gaeste am Telefon war vieles zu klein. AUF DER GAESTESEITE STEHT KEIN TEXT UNTER 13PX -- auch die Wortmarke nicht (13px statt 11px wie im Dummy, Entscheidung Anja 2026-10-06). Sie steht als Token, weil R1 keine rohen px-Schriftgroessen zulaesst. */ --gs-text-wordmark: 13px; --gs-text-eyebrow: 13px; --gs-text-micro: 14px; --gs-text-small: 15px; --gs-text-body: 17px; --gs-text-lead: 19px; --gs-text-h3: 22px; --gs-text-h2: 26px; --gs-text-display: 34px; /* Der Titel am Schreibtisch (T-12, `.stage.desk .title{font-size:40px}`). */ --gs-text-display-wide: 40px; --gs-track-eyebrow: 0.14em; /* Nur noch die Wortmarke -- die Datumszeile traegt seit v3 keine Versalien. */ --gs-track-date: 0.14em; --gs-leading-display: 1.14; --gs-leading-body: 1.6; /* ───── Form ───── */ --gs-radius: 3px; --gs-rule-w: 1px; --gs-measure: 34em; --gs-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* ───── Sechs vererbte Rollen (D-5a) ───── Startwerte = Fallback aus design-vererbung.md §5. Zur Laufzeit von der Ableitung ueberschrieben; JEDE Rolle wird gesetzt, keine bleibt offen -- eine halb vererbte Palette ist der einzige Weg zu einer unlesbaren Seite. */ --gs-color-bg: #f5f4f0; --gs-color-surface: #ffffff; --gs-color-ink: #1a1a1a; --gs-color-muted: #6f6f6f; --gs-color-accent: #c9a84c; --gs-color-rule: rgba(26, 26, 26, 0.13); /* ───── Schrift-Rollen (D-3) ───── */ --gs-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --gs-font-body: var(--font-ui); /* ───── Zusaetzliche Rollen, die beide Register brauchen ───── */ /* GEMESSEN 2026-09-08: #9e988d hielt auf keinem Grund, auf dem der Token steht, die 4,5:1 aus design-vererbung.md §4 K-2 -- auf Weiss 2,87, auf dem Papier des Gastgeber-Registers 2,45, auf dem Grund der Gaesteseite 2,60. Getragen wird er an 20 Stellen, davon 18 als Text. DER NEUE WERT IST DER EINZIGE, DER GEHT. Um auf dem haertesten Grund (#efede6) 4,5 zu erreichen, muss der Ton mindestens so dunkel sein wie #6f6a61 -- und das IST `muted`. Ein hellerer Wert (#736d61) haelt dort nur 4,38. Die dritte Stufe der Textskala ist damit keine Farbe mehr; wer sie braucht, staffelt ueber Groesse oder Gewicht. Das ist gemessen und nicht gewaehlt. */ --gs-color-faint: #6f6a61; --gs-color-edge: #e0ddd3; --gs-color-edge-strong: #cfcbbf; --gs-radius-sm: 3px; /* Die Rundung, die KEINE Groesse ist, sondern eine Form: Kreis und Pille. Sie gehoert in die Tokens, weil sonst jede Stelle ihr eigenes `50%` oder `999px` schreibt -- und der Waechter in `guest_bausteine_test.rb` kann zwischen einer geratenen Rundung und einer gemeinten Form nicht unterscheiden. */ --gs-radius-full: 9999px; --gs-shadow: 0 1px 2px rgba(40, 35, 25, 0.05), 0 3px 10px rgba(40, 35, 25, 0.06); /* ═══ GASTGEBER-REGISTER ═══ Die Gastgeber-Flaechen (`gastgeber-seite-v6.html`, `anlass-liste-v1.html`) tragen ein DRITTES Register -- gemessen 2026-08-28 sind die beiden Entwuerfe token-identisch, es ist also eines und nicht zwei. Es ist weder das Werkzeug-Register (Editor/Admin, 14px, kompakt) noch das editoriale (Gaesteseite, 16px, 3px Radius): warmes Papier, gerundete Karten, 15,5px Grundschrift. Der Gastgeber arbeitet hier -- er liest nicht eine Einladung, er verwaltet sie. WICHTIG: das sind KEINE neuen Rollennamen. `.layout--host` bildet sie auf dieselben Rollen ab, die auch die Gaesteseite benutzt (--gs-color-bg, --gs-text-body und die uebrigen). Dadurch funktioniert JEDER Baustein in beiden Welten, ohne dass er wuesste, in welcher er steht. (Hier stand zuerst ein Glob mit Stern-Schraegstrich. Der beendet den CSS-Kommentar an Ort und Stelle und liess den Build mit "Unknown word" scheitern -- dieselbe Falle wie bei ERB-Kommentaren, die ein schliessendes Tag enthalten.) */ --gs-host-sp-1: 4px; --gs-host-sp-2: 8px; --gs-host-sp-3: 12px; --gs-host-sp-4: 16px; --gs-host-sp-5: 20px; --gs-host-sp-6: 28px; --gs-host-sp-7: 40px; --gs-host-sp-8: 56px; /* Die Sperrung der Kleinschrift im Gastgeber-Register. Sie stand bisher geerbt auf dem Wert der Gaesteseite (.22em); seit GS02 §3b T-1 sperrt die Gaesteseite .14em. Das Gastgeber-Register aendert sich dadurch nicht -- `.layout--host` bildet `--gs-track-eyebrow` auf diesen Wert ab. */ --gs-host-track-eyebrow: 0.22em; --gs-host-text-micro: 12px; --gs-host-text-small: 13.5px; --gs-host-text-body: 15.5px; --gs-host-text-lead: 17px; --gs-host-text-h3: 19px; --gs-host-text-h2: 25px; --gs-host-radius: 10px; --gs-host-radius-sm: 7px; --gs-host-bg: #efede6; --gs-host-panel: #ffffff; --gs-host-ink: #191713; --gs-host-muted: #6f6a61; /* Wie --gs-color-faint (siehe dort): unter K-2, und der einzige Wert, der auf allen drei Gruenden 4,5 haelt, ist der von `muted`. */ --gs-host-faint: #6f6a61; --gs-host-edge: #e0ddd3; --gs-host-edge-strong: #cfcbbf; /* Die Goldtoene des Gastgeber-Registers sind eigene Werte, nicht die des Werkzeug-Registers: --gold-line ist hier waermer (#D8B455 statt #C9A84C) und --gold-ink dunkler. Sie stehen auf warmem Papier statt auf Weiss. */ --gs-host-gold: #f5c842; --gs-host-gold-line: #d8b455; --gs-host-gold-ink: #6e5410; --gs-host-gold-soft: #fdf3d6; --gs-host-gold-soft2: #fbeab6; /* FARBKONZEPT v10 (`anlass-seite-kartenstart.md` §1, Freigabe Anja 2026-09-22): Gelb heisst hier tippen, Gruen heisst laeuft, Grau heisst Auskunft -- Zartgelb (`gold-soft`, `gold-soft2`) gibt es auf der Gastgeber-Flaeche nicht mehr. Die Werte stehen als Literal im Block „NEU GEGENUEBER v8" von `anlass-seite-v10.html` und bekommen hier ihren Namen; der Text auf Grau ist `ink`, die gedaempfte Schrift `muted` (#6F6A61 steht dort ebenfalls und ist genau dieser Wert). - `grau`: Flaeche jeder Auskunft -- Zeichen-Kachel (`.ico`, `.linkrow .ci`), Pille (`.pill.gold`), Hinweis, aktiver Menuepunkt. - `grau-linie`: die erledigte Strecke des Fortschrittsbands (`.pstep.done:after`). - `grau-ring`: der helle Ring um die aktuelle Stufe (`.pstep.here`). - `gold-hover`: der Rand des gelben Knopfs unter dem Zeiger (`.btn.gold:hover`). */ --gs-host-grau: #edeae1; --gs-host-grau-linie: #b9b3a7; --gs-host-grau-ring: #e4e1d8; --gs-host-gold-hover: #efbe31; /* Zwei Schriftgroessen der Blaetter aus v10 (NEU-Block): `.stack .btn{font-size:15px}` -- die Knoepfe untereinander im Blatt, groesser als die 14 px der Knopfreihe, kleiner als der allein stehende gelbe Knopf (15,5); und `.sheet .fld{font-size:16px}` -- das Eingabefeld im Blatt, 16 px, weil iOS darunter beim Tippen zoomt (K5). */ --gs-host-text-btn-stapel: 15px; --gs-host-text-fld: 16px; /* Zwei Werte aus v10 (Basis-Stylesheet, von v10 genutzt): `.toast{background:#2A2620}` -- die dunkle Leiste „Link kopiert" (§8 L1), ein waermeres Dunkel als `ink`; und `.pin i{font-size:21px}` -- die Ziffern des Zugangscodes im Blatt „Zugangscode einschalten" (§9). */ --gs-host-toast: #2a2620; --gs-host-text-pin: 21px; /* Gemessen an `gastgeber-seite-v6.html` (2026-09-07). Jeder Wert steht dort als Literal und hat hier einen Namen bekommen -- eine rohe Zahl im Blatt bricht Waechter R1, und ein Wert ohne Namen wandert beim naechsten Mal wieder auseinander. */ /* Zeilenhoehe: v6 Z. 36 `line-height:1.5` (das Werkzeug-Register faehrt 1.6). */ --gs-host-leading: 1.5; /* Zwei Groessen unterhalb von `micro`, beide aus v6: Z. 71 `.pstep span{font-size:10px}` und Z. 51 `.pill{font-size:11px}`. */ --gs-host-text-nano: 10px; --gs-host-text-pill: 11px; /* Die Knopfschrift (Z. 94) und die des grossen Knopfes (Z. 102). */ --gs-host-text-btn: 14px; --gs-host-text-btn-gold: 15.5px; /* Die getippte Zahl im Schaetzfeld (Z. 88). */ --gs-host-text-zahl: 16px; /* Zwei Groessen aus der Pflege: die Baustein-Zeile (Z. 230) und der kleine Knopf (Z. 105). Sie stehen zwischen den Stufen der Skala -- 14,5 liegt zwischen `btn` (14) und `body` (15,5), 12,5 zwischen `pill` (11) und `micro` (12). */ --gs-host-text-zeile: 14.5px; --gs-host-text-btn-sm: 12.5px; /* Zwei Radien unterhalb von `radius-sm` (7 px): das Kaestchen des Modul-Zeichens und der Zeichen-Knopf (Z. 113/233) tragen 8, die Eingabefelder der Pflege 6 (Z. 248). `--gs-host-radius-ico` stand bis zum 2026-09-07 oben bei der Radien-Skala und hier ein zweites Mal -- derselbe Wert, zwei Herkuenfte, weil ihn zwei Zuege unabhaengig voneinander angelegt haben. Er steht jetzt nur noch hier, bei den uebrigen v6-Messwerten. Die Groesse ist gepinnt: `v6_abgleich_test` der Webapp misst sie am gerenderten Element gegen den Entwurf, und der naechstliegende Skalenwert (`-sm`, 7 px) machte den Abgleich gemessen rot, mobil wie desktop. Beide stehen hier und nicht als Zahl im Blatt, weil Waechter R1 der Webapp (`guest_bausteine_test.rb`) keinen rohen `border-radius` zulaesst. */ --gs-host-radius-ico: 8px; --gs-host-radius-feld: 6px; /* Der Countdown (Z. 77) und die Kennzahlen (Z. 83/124) -- eigene Groessen, die in keiner Stufe der Schriftskala vorkommen. */ --gs-host-text-cd: 29px; --gs-host-text-kpi: 20px; --gs-host-text-stat: 21px; /* Der Satz im Jetzt-Kasten (Z. 79) ist NICHT gold-ink: er steht als Fliesstext auf gold-soft und ist dafuer eigens abgetoent. */ --gs-host-why: #5b4e2c; /* Die Trennlinie ueber den Kennzahlen (Z. 81). Halbdurchsichtiges Gold-Braun, nicht `gold-line` -- auf gold-soft ist der Unterschied deutlich sichtbar. */ --gs-host-gold-rule: rgba(110, 84, 16, 0.18); /* Die Kartenvorschau (Z. 166-169): ein Salbeigruen mit heller Schrift und einem eingerueckten Innenrahmen. Sie ist kein goldener Platzhalter. */ --gs-host-pv-bg: #6b735f; --gs-host-pv-ink: #f2e4c4; --gs-host-pv-rule: rgba(242, 228, 196, 0.45); --gs-host-pv-radius: 5px; /* Der Umschlag der Papier-Vorschau (Z. 171-176): Papierton, ein dunklerer Umschlagdeckel und ein feiner dunkler Rand. Kein Weiss und kein Gold. */ --gs-host-env-bg: #efe9da; --gs-host-env-flap: #e6dfce; --gs-host-env-rule: rgba(0, 0, 0, 0.14); --gs-host-pv-radius-sm: 4px; --gs-host-text-pv-sm: 14px; /* Die fuenf Kennzeichnungen (Z. 53-57). `live` ist GRUEN und nicht gold -- der Gastgeber soll „laeuft" von „bald" ohne Lesen unterscheiden koennen. */ --gs-host-pill-live-bg: #e4f0e2; --gs-host-pill-live-ink: #2e6b36; --gs-host-pill-still-bg: #edeae1; --gs-host-pill-still-ink: #6f6a61; --gs-host-pill-closed-bg: #ede3e3; --gs-host-pill-closed-ink: #8a4b4b; /* Der Kippschalter (Z. 148/151). */ --gs-host-sw-off: #dcd8ce; --gs-host-sw-on: #5fa36b; /* ───── Register „laut" (gaesteseite-entwurf-v2.html) ───── Nur Token-Ueberschreibungen, keine eigenen Regeln. */ --gs-loud-text-display: 42px; --gs-loud-text-h2: 30px; --gs-loud-text-h3: 23px; --gs-loud-text-body: 17px; --gs-loud-track-eyebrow: 0.12em; --gs-loud-radius: 10px; --gs-loud-measure: 32em; /* ───── Anlass-Seite v11 (brand-guidelines v1.3, 2026-09-29) ───── Quelle: specs/webapp/guest-surface/anlass-seite-modulzeilen.md §3 und §15 N-7, Referenz ui-reference/anlass-seite-v11.html (gestaltungsverbindlich, V-2: jeder Farbwert aus einem Token). Rein additiv, kein bestehender Wert geaendert. Die Schrift-Tokens tragen wie die Skala v1.2 nur die GROESSE; Gewicht 500 ist --font-weight-medium, die Zeilenhoehe steht beim Baustein. Die Stufen gelten nur, wo eine Spec sie nennt: fuer aeltere Nutzer am Telefon sind Modulname und Knopftext groesser als die Body-Stufe (14px). */ --stage-bg-top: #ede8dd; /* Verlauf der Buehne, oben */ --stage-bg-bottom: #e4ddce; /* Verlauf der Buehne, unten */ --stage-eyebrow: #6b581f; /* „DEINE KARTE" — AA auf beiden Verlaufsenden */ --stage-text: #4f4a42; /* Datum/Ort auf der Buehne */ --stage-meta: #625d53; /* Unterzeile der Buehne; auch Bildunterschrift (N-7, 5,35:1) */ --surface-sunken: #ece8de; /* Vorschauflaechen im Aufgeklappten; die Symbolkachel traegt seit v1.7 --icon-tile */ --pill-bg: #efede7; /* Marken („kommt noch", Fristen) */ --pill-text: #4f4f4f; /* 7,0:1 auf --pill-bg */ --text-secondary: #3a3a3a; /* Fliesstext im Aufgeklappten, Chip-Text */ --switch-off: #d9d6ce; /* Schalter aus */ --bar-declined: #9a958a; /* Balken Absage (Flaeche, kein Text) */ --bar-open: #e8e4da; /* Balken offen (Flaeche, kein Text) */ --step-open: #d9d6ce; /* Stufe noch nicht erreicht */ --figure-declined: #736e64; /* Kennzahl „abgesagt" — N-7: 5,1:1 statt 3,0:1 */ --figure-open: #7a7466; /* Kennzahl „offen" — N-7: 4,65:1 statt 2,2:1 */ --control-border: rgba(0, 0, 0, 0.18); /* Rahmen der Knoepfe, gestrichelte Kartenflaeche */ --control-border-strong: rgba(0, 0, 0, 0.2); /* Plus/Minus-Knopf, Eingabefeld */ --dash-border: rgba(0, 0, 0, 0.15); /* leere Fotokacheln */ --module-divider: rgba(0, 0, 0, 0.15); /* Linie zwischen Modulzeilen der Anlass-Seite -- kraeftiger als --panel-border (Linien im Panel), specs modulzeilen §22 B */ --icon-muted: #8a8a8a; /* Chevron, Nicht-Text (3,4:1) */ /* brand-guidelines v1.7 (2026-10-14, Entscheidung Anja 2026-10-13): Icons und Kacheln der Gastgeber-Flaechen „Violett auf Grau". NICHT rein additiv -- die Werte unten sind neu. Jeder dieser Tokens wirkt gemessen NUR auf Icons und Illustrationen der Gastgeber- Flaechen (Konfigurator: kein Verwender; Webapp: nur host.scss). Ausnahmen, die deshalb bleiben: --illu-line-soft (Summenlinie der Kundenmail 5) und --illu-paper (Unterschrifts- und Upload-Feld) -- die Icon-Stellen nehmen --icon-*. */ --illu-line: #dcd0f2; /* Textzeilen in stilisierten Kacheln (v1.7) */ --illu-line-soft: #e4e0d6; /* auch Summenlinie Kundenmail 5 -- bleibt */ --illu-paper: #fbf9f4; /* Unterschrifts- und Upload-Feld der v9-Seite -- bleibt */ --illu-phone-frame: #230051; /* Mini-Telefon, Rahmen (v1.7, = --brand-ink; 16:1 auf --icon-tile) */ --illu-phone-screen: #ffffff; /* Mini-Telefon, Flaeche (v1.7) */ --illu-board-edge: #ffffff; /* Rand des Boards in der grossen Vorschau (v1.7) */ --illu-easel: #5a2e8c; /* Staffelei (v1.7) */ /* Nachtrag 2026-09-30 (Spec §16 A, Anja): Kacheln stilisiert in festen Toenen, nicht in der Palette der Karte. v1.7: die Toene sind Violett und Lavendel. */ --module-icon: #5a2e8c; /* Grundton der Symbole und Kacheln (= --brand-violet; 8,7:1 auf --icon-tile) */ --module-icon-soft: #bba6ea; /* zweiter Ton (= --brand-lavender): Rueckseiten, Fotokacheln im Wechsel -- Flaeche, nie einziger Strich (2,0:1) */ /* Neu in v1.7 -- semantische Icon-Tokens, wo der bisherige Token auch anderswo wirkt: */ --icon-tile: #f5f4f0; /* Grund der Symbolkacheln (Modulzeile, Baustein-Zeile, Blatt „Baustein hinzufuegen") */ --icon-paper: #ffffff; /* Papier in Kacheln: Umriss-Flaechen, Rueckseite der Papierkarte, Schriftzug auf Grundton */ --icon-line-soft: #f1ecfa; /* zarte Linien in Kacheln (= --brand-lavender-tint): Mini-Telefon, Teilen-Paket */ --icon-outline: 1.5px; /* Rand der Umriss-Flaechen (Umriss-Regel v1.7, Rand innen) */ --icon-outline-strong: 2px; /* Rand des Welcome Boards in der Kachel */ --shadow-card: 0 10px 22px rgba(60, 45, 20, 0.22), 0 2px 4px rgba(60, 45, 20, 0.12); /* Karte auf der Buehne */ --shadow-bar: 0 6px 16px rgba(60, 45, 20, 0.13); /* Knopfleiste */ --shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.2); /* Knopf des Schalters */ --shadow-illu-sm: 0 2px 5px rgba(0, 0, 0, 0.15); --shadow-illu-md: 0 5px 10px rgba(0, 0, 0, 0.18); --shadow-illu-lg: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-illu-tilt: 0 3px 6px rgba(0, 0, 0, 0.25); --text-title-m: 22px; /* Titel auf der Buehne (500 / 1.2) */ --text-lead: 16px; /* Modulname (500 / 1.3) */ --text-control: 15px; /* Knopftext (500) */ --text-figure: 26px; /* Kennzahl (500 / 1) */ --text-caption: 13px; /* Chip, Unterzeile */ --control-h-xl: 48px; /* Knoepfe der Anlass-Seite; Eingabefelder der Gaesteseite (GS02 §3b T-5) */ --action-bar-h: 56px; /* Knopfleiste der Buehne */ --module-row-h: 80px; /* Mindesthoehe Modulzeile */ --module-thumb: 56px; /* Bildkachel der Zeile */ --toggle-w: 48px; /* Schalter */ --toggle-h: 28px; --expand-btn: 36px; /* Plus/Minus; Trefferflaeche ueber die Zeile >= 44px */ /* ───── Teilen-Blatt (GS03 §7.4 TB-9) ───── Die Chat-Tokens der frueheren Szene (--chat-*) sind mit dem Teilen-Blatt v2 entfallen (Anja 2026-10-09, Referenz ui-reference/teilen-blatt-v2.html). */ /* Nachtrag TB-9 (Anja 2026-09-30): „Kopiert" (K-1). --success (#27ae60) haelt auf dem Segmentgrund (--surface-sunken) nur 2,35:1, der Ton der Referenz (#2e7d4f) 4,1:1; dieser haelt 4,6:1 (AA fuer 12,5px-Text). */ --state-ok: #2b7549; /* ───── Gaesteseite bearbeiten v9 (brand-guidelines v1.4, 2026-09-30) ───── Spec webapp/guest-surface/gaesteseite-bearbeiten-v9.md §3, Referenz ui-reference/gaesteseite-bearbeiten-v9.html. Rein additiv. */ --success-text: #3e6b3a; /* „✓ Gespeichert" neben dem Knopf; AA auf Weiss (--success haelt dort nur 2,9:1) */ --success-icon: #9fd39a; /* Haken im dunklen Hinweis „Gespeichert." */ --module-row-h-edit: 72px; /* Mindesthoehe der Baustein-Zeile (Anlass-Seite: --module-row-h) */ --module-thumb-edit: 48px; /* Symbolkachel der Baustein-Zeile */ --script-font: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; /* Ausweichschrift der Unterschrift, bis die Datenbank-Schrift geladen ist */ /* Nachtrag 2026-09-30: Werte der Referenz ohne Token (v9 §3 „fehlende werden ergaenzt"). */ --add-row-bg: #fbfaf7; /* Grund der Zeile „Baustein hinzufuegen" -- heller als --app-bg, hebt die letzte Zeile ab */ --signature-ink: #2f3a33; /* Tinte der Unterschrift: dunkles Gruen statt Schwarz, wie Fueller */ --scrim: rgba(20, 18, 16, 0.45); /* Schleier hinter den Blaettern der Seite */ --dash-border-strong: rgba(0, 0, 0, 0.25); /* gestrichelte Kachel „+", „Weitere … zeigen", Rand der Rueckfrage */ --card-border-soft: rgba(0, 0, 0, 0.12); /* Rand der Fragen-Kaertchen und der Mitbringliste */ --note-border: rgba(0, 0, 0, 0.08); /* Rand des Satzes mit Schloss -- leiser als --panel-border */ --shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.12); /* gewaehltes Feld des Umschalters */ /* ───── Farbfaecher der Marke (brand-guidelines v1.6, 2026-10-13) ───── Spec webapp/kundenmails/functional-spec/KM07_GESTALTUNG_UND_TEXTE.md §7, Referenz webapp/kundenmails/ui-reference/kundenmails-v5.html. Rein additiv (Entscheidung Anja 2026-10-13). Gilt vorerst NUR in den Kundenmails v5 -- in App und Shop wird der Faecher nicht eingefuehrt (specs/TODO.md [Fächer-App]). Die Mails koennen keine Custom Properties tragen (Mailprogramme); ihr Build liest die Werte aus dem Token-Spiegel der Webapp und setzt sie ein. Deshalb stehen sie hier und nicht als Literal in der Mail-Quelle. */ --brand-ink: #230051; /* Tinte der Wortmarke: Logo und Ueberschriften der Mails */ --brand-violet: #5a2e8c; /* Akzentwort, Icon-Linien, Ersatzlink; auf Weiss 9,5:1 */ --brand-lavender: #bba6ea; /* Raender, Akzent auf dunklem Grund -- nie Text auf Weiss (2,2:1) */ --brand-lavender-tint: #f1ecfa; /* Flaechen und Marker */ --brand-coral: #ff5757; /* nur grafisch, hoechstens einmal je Flaeche, nie Text, nie in Fehler-Naehe */ } /* Breakpoint-Klassen werden per JS auf gesetzt (useBreakpoint in Phase 2). */ .is-mobile { --viewport: mobile; } .is-desktop { --viewport: desktop; }