/* ============================================================ E1 ProServ — die eigene Token-Ebene Liegt ueber dem Design-System und wird nach colors.css geladen. Zwei Aufgaben: 1. Die Werkseinstellung der Akzentfarbe. Weicht die Auswahl unter Design → E1 ProServ davon ab, schreibt inc/assets.php eine spaetere :root-Regel mit den gewaehlten Werten. 2. Alles, was das Theme an Farben braucht und das Design-System nicht benennt. Der Grundsatz: In base.css, blocks.css und responsive.css steht KEIN einziger Farbwert — dort wird ausschliesslich auf Token verwiesen. Wer eine Farbe aendern will, findet sie hier oder in colors.css, nirgends sonst. ============================================================ */ :root { /* ---------- Werkseinstellung Akzent: Tuerkis ---------- */ --accent-base: var(--acc-turkis); --accent-strong: var(--acc-turkis-strong); /* ---------- Bedienelemente ---------- --border-default ist im hellen Schema Sand-400 und damit auf der Sandflaeche kaum zu sehen. Rahmen von Schaltflaechen brauchen mehr Kontrast, bleiben aber neutral und schemaabhaengig. */ --control-line: color-mix(in srgb, var(--text-strong) 26%, transparent); --control-line-hover: var(--text-strong); /* ---------- Auf Bild und dunklem Band ---------- Ueber dem Hero und im Fussbereich gilt nicht das Farbschema, sondern das Bild dahinter. Diese Werte sind deshalb absichtlich fest. */ --on-media: rgba(255, 255, 255, 0.78); --on-media-strong: #ffffff; --on-media-line: rgba(255, 255, 255, 0.42); /* ---------- Fussbereich ---------- Immer Petrol, unabhaengig vom gewaehlten Schema — deshalb feste Werte. Sie stammen 1:1 aus Prototyp.dc.html Zeile 2610-2632. Im Backend stehen sie trotzdem als Hell/Dunkel-Paar, beide ab Werk auf demselben Wert. Solange niemand sie trennt, genuegt diese eine Deklaration; wer die dunkle Spalte aendert, bekommt von colors.php einen [data-theme="dark"]-Block, der sie ueberschreibt. */ --footer-bg: var(--petrol-950); --footer-text: #91adb4; --footer-text-hover: #eef6f7; --footer-rule: #4d6b73; --footer-muted: #6e8c94; /* ---------- Auf dem dunklen Band ---------- Wie im Fussbereich gilt hier nicht das Farbschema, sondern die Flaeche darunter. Die Werte stammen 1:1 aus Prototyp.dc.html Zeile 2052-2058. */ --on-band-strong: #eef6f7; --on-band-text: #c2d4d8; --on-band-label: #a3bcc2; /* war #91adb4 — zu wenig auf dem hellen Band */ --on-band-line: rgba(238, 246, 247, 0.24); --on-band-flaeche: rgba(238, 246, 247, 0.05); --on-band-rand: rgba(238, 246, 247, 0.18); } /* ============================================================ Abschnitte Trennlinie, Panel- und Bandflaeche faerbt der Prototyp je Schema unterschiedlich (Prototyp.dc.html Zeile 2755-2758). Es sind Ableitungen aus dem Design-System, keine neuen Farben: Wer unter Design → E1 ProServ "Linie fein" aendert, aendert damit auch die Abschnittstrenner. ============================================================ */ :root, [data-theme="light"] { --section-line: var(--border-subtle); --section-panel: var(--surface-subtle); --section-band: var(--petrol-950); --section-band-line: transparent; } [data-theme="dark"] { --section-line: rgba(238, 246, 247, 0.16); --section-panel: color-mix(in srgb, var(--surface-page) 90%, #ffffff); /* Zwanzig Prozent Weiß hoben das Band auf #37474c — heller als jede Karte, und hell genug, dass die gedämpfte Schrift (3,25:1) und die Akzentbeschriftungen (3,48:1) darauf durchfielen. Zehn Prozent trennen das Band immer noch sichtbar von der Seite und lassen der Schrift ihren Abstand. */ --section-band: color-mix(in srgb, var(--surface-page) 90%, #ffffff); --section-band-line: rgba(238, 246, 247, 0.18); } /* ============================================================ Eingabefelder Ein Feld ist eine Flaeche, auf die man schreibt. Wie das Band und der Fussbereich folgt es deshalb nicht dem Schema seiner Umgebung, sondern bringt seine eigene Helligkeit mit — Papier bleibt hell, auch nachts. Vorher stand die Flaeche in jedem Formular einzeln und kam aus --surface-*. Im dunklen Schema wurde das Feld damit selbst dunkel und war vom Untergrund kaum zu trennen: Es sah abgeblendet aus statt beschreibbar. Jetzt steht es einmal hier und gilt fuer jedes Formular, auch fuer die, die es noch nicht gibt. Deshalb steht hier nur EIN Wert je Farbe — dieselbe Begruendung wie beim Fussbereich. Im Backend erscheinen sie dennoch als Hell/Dunkel-Paar auf identischem Wert: Die Trennung kostet nichts und erspart einen Umbau, falls ein Feld im dunklen Schema doch einmal abweichen soll. Die Werte sind absichtlich NICHT aus --surface-* und --text-* abgeleitet. Zwei Gruende: 1. Die folgen dem Schema. Im dunklen Schema waere --surface-card Petrol, das Feld also wieder dunkel — genau das, was hier weg soll. 2. Innerhalb von .ps-abschnitt--band wird --text-strong auf einen hellen Wert umgewidmet (siehe blocks/abschnitt/style.css). Ein Feld, das davon erbt, haette dort helle Schrift auf heller Flaeche — unlesbar. Die Feldfarben muessen ueberall gelten, unabhaengig davon, worauf das Formular gerade steht. Einstellbar bleiben sie trotzdem: Die vier Tokens stehen in inc/colors.php in der Gruppe „Formularfelder" und damit im Backend unter Design → E1 ProServ → Farben. Wer sie dort aendert, muss die Werkseinstellung hier nicht anfassen — aendert man sie hier, gehoert der aufgeloeste Hexwert in colors.php nachgezogen, sonst weicht die Werkseinstellung der Farbwaehler ab. ============================================================ */ :root { --field-bg: var(--sand-050); --field-text: var(--ink); --field-placeholder: var(--warm-600); --field-line: var(--sand-400); /* Abgeleitet, nicht einzeln waehlbar — dieselbe Entscheidung wie bei --highlight und --control-line. Die kraeftige Akzentschwester, nicht --highlight: colors.css beschreibt sie als die fuer hellen Grund, und hell ist das Feld in beiden Schemata. */ --field-line-hover: var(--accent-strong); }