/* * @project Prospekt-App * @file tokens.css * @description Design-Tokens der mobilen App-Oberflaeche * @author Christian Rech * @copyright 2026 Christian Rech */ :root { color-scheme: light; --color-surface: #ffffff; --color-surface-muted: #f3f5f7; --color-surface-overlay: rgba(255, 255, 255, 0.96); --color-text: #17202a; --color-text-muted: #59636e; --color-border: #c8d0d8; --color-focus: #145fc6; --color-action: #145fc6; --color-action-text: #ffffff; --color-danger: #b42318; --color-danger-text: #ffffff; --color-backdrop: rgba(14, 21, 29, 0.58); --color-shadow: rgba(14, 21, 29, 0.2); --color-map-fallback: #dce4e8; --color-user-default: #3366cc; --color-user-text-light: #ffffff; --color-user-text-dark: #17202a; --color-user-contrast: var(--color-user-text-light); --color-status-open: #8a949e; --color-status-highlighted: #e0a800; --color-status-problem: #c32f27; --color-status-selection: rgba(20, 95, 198, 0.45); --color-status-planned: #7656b5; /* Zustellpunkte: offen = noch nie gefragt, verortet = Koordinate steht, zu pruefen = muss von Hand gesetzt werden. Rot bleibt Fehlern der App vorbehalten. */ --color-zustellpunkt-offen: var(--color-surface); --color-zustellpunkt-offen-rand: var(--color-text-muted); --color-zustellpunkt-verortet: var(--color-status-open); --color-zustellpunkt-pruefen: var(--color-status-highlighted); --color-zustellpunkt-aktiv: var(--color-focus); /* Erledigt-Markierung: die Farbe ist die Benutzerfarbe und kommt zur Laufzeit als Custom Property an das einzelne Element. Dieser Wert greift nur, wenn keine Benutzerfarbe vorliegt. */ --color-erledigt-rueckfall: var(--color-user-default); /* Faehnchen: weder Benutzer- noch Statusfarbe, sondern eine Anmerkung -- deshalb ein eigenes Vokabular und nicht --color-status-*. Der Nutzerwert aus den Einstellungen ueberschreibt beide zur Laufzeit als Custom Property an . */ --color-faehnchen: #D97706; --color-faehnchen-text: var(--color-user-text-light); /* Eigene Position bewusst neutral: Benutzerfarbe sagt "wer", hier gibt es kein "wer" -- und genau ein Marker muss auf einen Blick "ich" heissen. */ --color-standort: #0b6bcb; --color-standort-rand: #ffffff; --color-standort-genauigkeit: rgba(11, 107, 203, 0.18); --color-verteiler-rand: #ffffff; --color-pinsel-vorschau: var(--color-status-selection); --color-pinsel-radierer: var(--color-text-muted); /* Der aktive Markiermodus. Gruen ist im Farbvokabular sonst nicht vergeben und steht hier ausschliesslich fuer „der Pinsel ist scharf". */ --color-markieren-aktiv: #1a7a45; --color-markieren-aktiv-text: #ffffff; /* Der Radierer kehrt die Richtung um; dieselbe Farbe traegt der gedrueckte Knopf und der Pinselkreis unter dem Finger, damit beide dieselbe Aussage machen. */ --color-radierer-aktiv: var(--color-status-highlighted); --color-erfolg: #1a7a45; --color-erfolg-text: #ffffff; --color-editor-griff: var(--color-action); --color-editor-griff-mitte: var(--color-text-muted); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --radius-small: 0.375rem; --radius-medium: 0.75rem; --radius-round: 999rem; --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-mikro: 0.75rem; --font-size-small: 0.875rem; --font-size-base: 1rem; --font-size-large: 1.25rem; --font-size-title: 1.5rem; --font-weight-normal: 400; --font-weight-strong: 650; --line-height: 1.5; --size-touch-min: 3rem; --size-user: 3rem; --size-dialog: 42rem; --size-border: 0.0625rem; --size-focus: 0.1875rem; --size-focus-offset: 0.125rem; --size-shadow-y: 0.25rem; --size-shadow-blur: 1rem; /* Hoehe der Leaflet-Attribution unten rechts; das Versions-Badge sitzt darueber. */ --size-attribution: 1.25rem; --size-dialog-gross: 72rem; --size-editor-karte: min(48vh, 24rem); --size-polygon-griff: 1rem; --size-polygon-griff-mitte: 0.625rem; --size-picker-map: min(55vh, 26rem); --size-picker-crosshair: 1.5rem; --size-picker-crosshair-stroke: 0.125rem; /* Sichtbarer Pinsel; das JavaScript liest den Trefferradius aus diesem Token, damit Darstellung und Treffer nicht auseinanderlaufen. */ --size-pinsel: 3rem; --size-erledigt-linie: 0.375rem; --size-vorschau-rand: 0.1875rem; --size-fortschritt-balken: 0.375rem; /* Fortschrittsring unter dem Benutzer-Icon. Die Groesse ist ein Token, weil erst am Geraet entschieden werden kann, ob die Prozentzahl darin lesbar bleibt. */ --size-fortschrittsring: 3.5rem; --size-fortschrittsring-bahn: 0.3125rem; --size-toast: 26rem; /* Kantenlaenge des Faehnchens; FAEHNCHEN_PX in kartenmarker.js spiegelt diesen Wert, weil Leaflet die Markergroesse als Zahl braucht. */ --size-faehnchen: 1.25rem; --size-faehnchen-mast: 0.125rem; --size-standort-rand: 0.1875rem; --size-verteiler: 2.5rem; --size-punktinfo: 18rem; --size-punktinfo-notiz: 8rem; --opacity-erledigt-linie: 0.75; --opacity-disabled: 0.58; /* Leaflet legt seine Steuerelemente auf 1000; die App-Bedienelemente liegen darueber. */ --z-map: 0; --z-overlay: 1100; --z-message: 1200; --z-picker-crosshair: 800; /* Ueber der Karte und Leaflets Steuerelementen, unter den App-Bedienelementen. */ --z-pinsel: 1050; /* Kartenebenen: ueber den Markern (600), unter Tooltip und Popup (650/700). Die Werte spiegeln PANE_FAEHNCHEN_Z und PANE_STANDORT_Z in karte.js. */ --z-pane-faehnchen: 620; --z-pane-standort: 640; --duration-fast: 150ms; } :root[data-theme="dark"] { color-scheme: dark; --color-surface: #17202a; --color-surface-muted: #222d38; --color-surface-overlay: rgba(23, 32, 42, 0.96); --color-text: #f3f5f7; --color-text-muted: #b8c1ca; --color-border: #4a5865; --color-focus: #78adf7; --color-action: #78adf7; --color-action-text: #101820; --color-danger: #f97066; --color-danger-text: #101820; --color-backdrop: rgba(0, 0, 0, 0.72); --color-shadow: rgba(0, 0, 0, 0.45); --color-map-fallback: #26343f; /* Auf dunklen Kacheln braucht die Linie mehr Deckung, um nicht zu verschwinden. */ --opacity-erledigt-linie: 0.9; /* Ein dunkles Gruen auf dunklem Grund waere nicht lesbar; hier gilt derselbe Aufheller wie bei --color-action und --color-danger. */ --color-markieren-aktiv: #4fbe83; --color-markieren-aktiv-text: #101820; --color-erfolg: #4fbe83; --color-erfolg-text: #101820; /* Auf dunklem Grund brauchen Standort und Faehnchen denselben Aufheller wie oben; der weisse Markerrand wuerde dagegen blenden. */ --color-faehnchen: #f2a33c; --color-standort: #78adf7; --color-standort-genauigkeit: rgba(120, 173, 247, 0.22); --color-standort-rand: #101820; --color-verteiler-rand: #101820; }