@CHARSET "UTF-8"; /* * --------------------------------------------------------------------------- * UEBERNOMMEN AUS zedal-portal, htdocs/css/synqony_brand.css, Stand Commit * 272311ea4 (Redesign-Stapel, Branch 1269-filterzeile-freitext). * * Diese Doku-Site traegt bewusst DIESELBE Markenschicht wie das Portal, damit * Portal und Dokumentation fuer den Kunden eine Oberflaeche sind. Der Inhalt * ist unveraendert uebernommen - EINZIGE Abweichung sind die Font-Pfade in den * @font-face-Regeln: das Portal liefert unter /fonts/ aus, MkDocs unter * docs/assets/fonts/. Sonst nichts anfassen; bei Aenderungen im Portal wird * diese Datei neu gezogen und nur der Pfad wieder umgebogen. * * Die Element-Regeln, die aus diesen Tokens das Aussehen machen, stehen in * extra.css - diese Datei setzt weiterhin ausschliesslich Custom Properties. * --------------------------------------------------------------------------- */ /* * SYNQONY-Marke: Farben, Schriften, Masse - und nichts weiter. * * Diese Datei setzt ausschliesslich Custom Properties auf :root und laedt die * Hausschrift. Sie enthaelt bewusst KEINE Regel auf ein Element, damit sie vor * jedes Seitenstylesheet gehaengt werden kann, ohne dort etwas zu * ueberschreiben. Dasselbe Muster tragen die Marken-Tokens in * zedal-web-order (htdocs/css/synqony_brand.css) - die Namen sind ueber die * beiden Projekte hinweg absichtlich wortgleich, damit dieselbe Farbe ueberall * dieselbe Vokabel hat. Wer hier einen Namen aendert, aendert ihn dort mit. * * NAMEN NACH ROLLE, NICHT NACH FARBTON. Die beiden Markenfarben hiessen bis * 2026-09-24 --syn-teal und --syn-navy (mit den Stufen -strong, -soft, -tint, * -ink). Seit es Themes gibt (htdocs/css/themes/), kann dieselbe Rolle eine * ganz andere Farbe tragen - im Theme "klassisch" ist der Akzent Gelb, und * "--syn-teal: #fcc62c" waere eine Luege im Namen. Die Rollen heissen deshalb * wie auf synqony.com (Elementor: primary = Signature, secondary = Blau): * * --syn-primary Akzent, hier SYNQONY Signature * --syn-secondary dunkle Grundfarbe, hier SYNQONY Blau * * Verbraucher: * - die Loginseite (login_synqony.css, direkt geladen von LoginSynqonyGUI) * - das angemeldete Portal ueber die Buendel gesamt_prod_*.css * (erster Eintrag jedes Bereichs in htdocs/admin/dev/buildCssFile.php) * * Diese Datei ist das STANDARD-Theme. Ein anderes Theme ersetzt sie nicht, * sondern ueberschreibt zur Laufzeit einzelne Werte - siehe designTheme() in * inc/all/selectDesign.inc und den Kopf von htdocs/css/themes/klassisch.css. * * Das alba-Design bleibt aussen vor - es ist kundengebunden und wird nicht * abgeloest; in buildCssFile.php steht der alba-Eintrag deshalb auf null. * * Herausgezogen aus login_synqony.css beim Umbau des Portals hinter der * Anmeldung; die Werte und ihre Begruendungen stehen unveraendert wie dort. */ /* * Chillax, die Hausschrift. Verwendet werden die offiziellen Webfont-Dateien * aus dem Fontshare-Paket unter htdocs/fonts/Chillax_Complete/Fonts/WEB/. * * Bewusst nicht selbst konvertiert oder verkleinert: Die ITF Free Font License * (License/FFL.txt im selben Paket) erlaubt das Selbst-Hosten per @font-face * ausdruecklich, untersagt in Abschnitt 02 aber jede Veraenderung der Dateien - * namentlich Subsetting und Formatumwandlung. * * VIER SCHNITTE, weil vier verlangt werden. Hier stand lange nur Regular, mit * der Begruendung, Chillax gelte allein fuer das Rueckruf-Angebot und die * Knoepfe und beide liefen in normaler Staerke. Das stimmt seit dem Umbau der * Oberflaeche nicht mehr: --syn-font-display steht inzwischen an 46 Stellen, * und die verlangen 500, 600 und 700. * * Eine nicht deklarierte Staerke faellt nicht auf, sie wird still ignoriert. * Am gerenderten Text gemessen (Chillax 16px, das Wort "Benutzer"): * * Chillax 400 -> 68,78px 500 -> 68,78px 600 -> 68,78px 700 -> 68,78px * Arial 400 -> 64,05px 700 -> 68,45px * * Vier Gewichte, ein Ergebnis: der Browser hatte nur den 400er und nahm ihn * fuer alles. Arial daneben zeigt, wie der Unterschied aussieht, wenn es ihn * gibt. Eine Ueberschrift auf font-weight: 500 war also Regular, und niemandem * fiel es auf, weil nichts fehlte - es war nur nie da. * * Die Dateien lagen die ganze Zeit im Paket. Dass sie unveraendert eingebunden * werden, ist keine Bequemlichkeit, sondern Bedingung: die ITF Free Font * License untersagt in Abschnitt 02 jede Veraenderung, also auch das * Zusammenfassen zu einer Variable-Datei. * * woff2 zuerst, woff als Rueckfall fuer aeltere Browser. font-display: swap * zeigt den Text sofort in Arial und tauscht nach; ohne das bliebe die Zeile * bis zum Laden der Datei unsichtbar. */ @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Regular.woff2") format("woff2"), url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Medium.woff2") format("woff2"), url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Semibold.woff2") format("woff2"), url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Bold.woff2") format("woff2"), url("../assets/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* * Farbquelle: documentation/zedal-by-synqony-logopaket-2026-09-07/ * SYNQONY-Farbwerte.md (Stand 2026-09-07, SYNQONY Corporate Design). * Die Kommentare nennen die dortige Rolle, damit bei einer Aktualisierung * erkennbar ist, welcher Wert vorgegeben und welcher hier abgeleitet ist. */ /* --- Farben: Flaechen --- */ --syn-bg: #ffffff; /* Weiss */ --syn-bg-muted: #eef9f6; /* Light Mint (erweiterte Web-Palette) */ --syn-footer-bg: #091123; /* SYNQONY Blau */ /* Linie ueber dem Fuss der Anmeldeseite. Hell trennt die Flaeche selbst; dunkel ist der Fuss so blau wie der Grund (css/darstellung/dunkel.css). */ --syn-footer-rule: transparent; /* --- Farben: Marke (Primaerpalette) --- */ --syn-primary: #0fd8b1; /* SYNQONY Signature */ --syn-secondary: #091123; /* SYNQONY Blau */ /* Dunklerer Ton fuer den Zeigerkontakt, helle Flaeche fuer den Kontur-Knopf beim Ueberfahren. Beides stand hier frueher als eigene Mischung (#0bb997 / #e6fbf6); seit dem Farbdokument sind es die offiziellen Stufen "Abstufung 1" und "Light Mint". */ --syn-primary-strong: #0cad8e; /* Abstufung 1 */ --syn-primary-soft: #eef9f6; /* Light Mint */ /* Eine Stufe kraeftiger als Light Mint - fuer FLAECHEN, die groesser sind als ein Bedienelement. Light Mint ist auf einer 185x80px-Kachel so zurueckhaltend, dass man den aktiven Hauptbereich sucht; auf einem Knopf oder einer Gitterzeile ist er richtig. Navy darauf 14,4:1. */ --syn-primary-tint: #d9f4ec; /* Und eine Stufe darueber, fuer das Wasserzeichen auf der leeren Startseite. Es ist reine Gestaltung (WCAG 1.4.11 nimmt schmueckende Grafik ausdruecklich aus), soll aber auf einer halben Bildschirmflaeche noch als Zeichen zu erkennen sein: gegen Weiss 1,30:1, waehrend --syn-primary-tint dort auf 1,16:1 kommt und eher wie ein Druckfehler aussieht. Eigener Name statt einer weiteren -tint-Stufe, damit klar bleibt, wofuer er da ist. */ --syn-watermark: #b7e6d5; /* * Gruen fuer SCHRIFT auf hellem Grund. Eigener Token, weil die helleren * Stufen als Text durchfallen - gemessen auf Weiss: * * Abstufung 1 #0CAD8E 2,84:1 (AA verfehlt) * Abstufung 2 #09826A 4,76:1 (knapp, auf Light Mint nur 4,42:1) * Abstufung 3 #065647 8,64:1 (auf Light Mint 8,03:1) * * Der "Buchen"-Knopf der Seminarliste stand auf Abstufung 1 und lag damit * bei 2,84:1. Die Mint-Anmutung traegt dort ohnehin der Rahmen * (--syn-primary), die Schrift muss lesbar sein. */ --syn-primary-ink: #065647; /* Abstufung 3 */ /* * Der Unterstrich des aktiven Reiters. Abstufung 2, und das ist gerechnet * und nicht gewaehlt: der Unterstrich sagt, welcher Reiter offen ist, und * ist damit die Zustandsanzeige eines Bedienelements - WCAG 1.4.11 fordert * dafuer 3:1. Die Signature #0FD8B1 kommt auf Weiss auf 1,83:1 und * Abstufung 1 auf 2,84:1; beide fallen durch, dieselbe Schwelle, an der * schon der "Buchen"-Knopf haengengeblieben ist. Abstufung 2 traegt * 4,76:1 auf Weiss und 4,42:1 auf Light Mint. * * Eigener Name und nicht --syn-link: das ist derselbe Wert, aber ein * anderer Zweck - waere der Linkton eines Tages ein anderer, soll der * Reiter nicht mitwandern. */ --syn-tab-active: #09826a; /* Abstufung 2 */ /* * Verlauf der Loginleiste aus den beiden Markenfarben - diagonal von dunkel * nach teal, wie auf synqony.com. * * Dort tragen Bildflaechen und Fuss (Elementor, .elementor-kit-10) * linear-gradient(135deg, secondary 20%, primary 100%), und die beiden * Elementor-Variablen sind genau diese zwei Markenfarben. Die Richtung ist * damit nicht Geschmack, sondern Vorlage. * * Sie ist auch die tragfaehige Richtung, und das ist gemessen (WCAG 2 am * gerasterten Verlauf, weisser Text an seiner tatsaechlichen Position): * * Verlauf Anbieter Fehler Dialogtitel Sicherheit * 90deg teal 0% -> navy 55% 3,0:1 3,1:1 2,2:1 12,4:1 * 135deg navy 20% -> teal 160% 18,8:1 18,6:1 18,8:1 13,2:1 * * Bei teal -> dunkel sitzt das reine Teal am LINKEN Rand - genau dort, wo * die Anbieter-Zeile, die Fehlermeldung und der Dialogtitel anfangen. Durch * Verschieben des Stops ist das nicht zu heilen, der Rand bleibt reines * Teal. Die Vorlage stellt es richtig, weil sie dunkel dort hat, wo der Text * beginnt. * * Der Endpunkt jenseits von 100% ist eine bewusste Abweichung von der * Vorlage (uebernommen aus zedal-web-order): Er legt das helle Ende HINTER * die Flaeche, sodass nur die dunklen zwei Drittel der Rampe zu sehen sind. * Mit 100% kommt die Ecke bei reinem Teal an und der Anmelden-Knopf steht in * einer Flaeche, gegen die er sich kaum abgrenzt. */ --syn-login-bar-light-at: 160%; /* * Der Navy-Stop steht seit dem 2026-09-10 auf 10 % und nicht mehr auf 20 %: * die Rampe faengt damit frueher an aufzuhellen, und das Teal ist auf den * breiten Balken des Portals deutlicher zu sehen (Saschas Wert). * * Nachgerechnet fuer weisse Schrift auf dem 2560px breiten Titelbalken - * Stelle, alter Wert, neuer Wert: * * Direktsuche links 18,8:1 18,8:1 * Wortmarke (Mitte) 12,1:1 10,6:1 * "Mein Zedal" 6,6:1 5,9:1 * "Abmelden" 5,1:1 4,7:1 * rechte Kante 4,8:1 4,4:1 (dort steht kein Text) * * Der aeusserste Verweis bleibt damit ueber 4,5:1. Weiter nach vorn geht * der Stop nicht, ohne die Verweise zu verlieren - siehe die Tabelle im * Klassenkommentar von tests/design/KopfleisteUndLadeanzeigeTest.php. */ --syn-login-bar: linear-gradient( 135deg, var(--syn-secondary) 10%, var(--syn-primary) var(--syn-login-bar-light-at) ); /* Titelleisten der Dialoge tragen denselben Verlauf; eigener Token, falls er auf der schmaleren Flaeche einmal anders laufen soll */ --syn-dialog-header: var(--syn-login-bar); /* * ROLLEN AUF FLAECHEN. Bis 2026-09-24 standen diese Stellen direkt auf * --syn-secondary und --syn-text-inverse - und damit hingen drei Rollen an * einer Farbe: die dunkle SCHRIFT, die dunkle FLAECHE und die weisse Schrift * darauf. Im Standard ist das dasselbe Navy; ein Theme, das blaue Schrift auf * hellen Flaechen will (das alte Portal: Amber-Balken, blaue Verweise, keine * einzige dunkle Flaeche), bekaeme mit der Schrift auch die Flaechen blau. * Die Werte hier sind im Standard genau die alten; sichtbar aendert sich * nichts. */ /* Schrift und Zeichen auf den Balken (--syn-login-bar, --syn-dialog-header, --syn-footer-bg): Titelleiste, Dialog- und Gittertitel, Fussnote, Anmeldeleiste, Fuss der Anmeldeseite */ --syn-bar-ink: var(--syn-text-inverse); --syn-bar-ink-hover: var(--syn-primary); /* Zweitrangige Schrift auf dem Balken (Copyright im Fuss der Anmeldeseite) */ --syn-bar-ink-muted: var(--syn-primary-soft); /* Der Knopf, der AUF einem Balken steht (Anmelden in der Anmeldeleiste). Alle anderen Akzentknoepfe stehen auf hellem Grund; nur dieser braucht eine eigene Rolle, damit ein Theme mit Akzent-Balken keinen Knopf in derselben Farbe wie seinen Grund bekommt. */ --syn-bar-button: var(--syn-primary); --syn-bar-button-ink: var(--syn-secondary); /* Die senkrechten Trenner zwischen den Verweisgruppen der Titelleiste */ --syn-bar-divider: rgba(255, 255, 255, .35); /* Bedienelemente AUF dem Balken (die Auswahlfelder der Titelzeile): eine leichte Flaeche und Kante statt weisser Felder, die hart auf dem Balken stuenden */ --syn-bar-control: rgba(255, 255, 255, .10); --syn-bar-control-hover: rgba(255, 255, 255, .18); --syn-bar-control-line: rgba(255, 255, 255, .28); /* Schrift in den weissen Feldern der Anmeldeleiste (--syn-border-input). Eigenes Token, weil die Felder in jeder Darstellung weiss bleiben, --syn-text aber dunkel hell wird. */ --syn-bar-field-ink: var(--syn-text); /* Die kraeftige Flaeche: ueberfahrene und aktive Knoepfe, der aktive Eintrag der Seitenleiste, das geoeffnete Meldungsfach - und die Schrift darauf */ --syn-fill: var(--syn-secondary); --syn-fill-ink: var(--syn-text-inverse); /* Der Schleier hinter modalen Dialogen (mit eigener opacity je Regel) */ --syn-overlay: var(--syn-secondary); /* ZURUECKGENOMMEN am 2026-09-09: Hier stand kurz ein zweiter Verlauf fuer die breiten Balken, der SENKRECHT lief - Navy dort, wo die Schrift sitzt, Teal an der Unterkante. Anlass war, dass das Teal auf einem 2560px breiten Balken kaum zu sehen ist (von der diagonalen Rampe faellt fast nur ihr dunkler Anfang auf die Flaeche). Die Richtung ist aber keine freie Variable: Der Markenverlauf laeuft diagonal, und ein Balken, der von oben nach unten aufhellt, ist ein anderes Gestaltungsmittel - Sascha hat es abgelehnt. Alle Balken tragen deshalb wieder --syn-login-bar. Die Messung bleibt trotzdem gueltig und steht als Warnung hier: Weisse Schrift am RECHTEN Rand des Balkens, je nach Stop des hellen Endes, 5,1:1 bei 160 %, 4,6:1 bei 150 %, 4,1:1 bei 140 %, 3,1:1 bei 120 %. Wer das Teal auf dieser Achse deutlicher machen will, muss die Schrift dort schuetzen (dunkler Schleier hinter der Verweisgruppe) - der Stop allein geht nicht unter 150 %, und dort ist der Unterschied zu 160 % mit dem Auge nicht zu sehen. */ /* --- Farben: Text --- */ /* Das Farbdokument weist SYNQONY Blau ausdruecklich die Rolle von Schwarz als Textfarbe zu ("Im Regelfall uebernimmt SYNQONY Blau die Rolle von Schwarz"). Vorher stand hier ein eigenes Dunkelgrau (#1f2a37). */ --syn-text: #091123; /* SYNQONY Blau */ --syn-text-muted: #5c6677; /* Body Text (erweiterte Web-Palette) */ --syn-text-inverse: #ffffff; /* Weiss */ --syn-placeholder: #98a4ae; /* abgeleitet, nicht vorgegeben */ /* Schrift in der Markenfarbe auf normaler Flaeche (Links, Menues, Kopfzeilen). Hell dieselbe Farbe wie --syn-secondary; getrennt, weil --syn-secondary auch Flaeche ist (Balken, Fuss) und die dunkle Darstellung nur die Schrift aufhellt. */ --syn-text-brand: var(--syn-secondary); /* --- Farben: Links auf hellem Grund (Dialoge) --- */ /* Vorher #0f766e, eine eigene Mischung. "Abstufung 2" ist der offizielle Ton in derselben Helligkeitsgegend. Auf Weiss 4,8:1 statt vorher 5,5:1 - etwas weniger, aber weiterhin ueber der AA-Schwelle von 4,5:1. Wer hier mehr braucht, nimmt "Abstufung 3" (#065647, 7,9:1). */ --syn-link: #09826a; /* Abstufung 2 */ --syn-link-hover: #091123; /* SYNQONY Blau */ /* --- Farben: Linien und Zustaende --- */ --syn-border: #e5eaef; /* Card Border (erweiterte Web-Palette) */ --syn-border-input: #ffffff; --syn-focus: #0fd8b1; --syn-error-bg: #d8402f; /* --- Schrift --- */ /* Vorgabe: Arial fuer Fliesstext, Liste, Fuss und Formularfelder */ --syn-font-sans: Arial, Helvetica, sans-serif; /* Vorgabe: Chillax fuer das Rueckruf-Angebot und saemtliche Knoepfe */ --syn-font-display: "Chillax", Arial, Helvetica, sans-serif; --syn-font-size: 16px; --syn-font-size-small: 13px; --syn-line-height: 1.5; /* --- Layout --- */ /* Hoehe des Logos im Kopf; die Breite ergibt sich aus dem Seitenverhaeltnis der Datei (927:351 aus dem Logopaket, also 158px bei 60px Hoehe) */ --syn-logo-height: 60px; --syn-container: 1420px; --syn-radius: 6px; --syn-radius-pill: 999px; --syn-gap: 24px; /* --syn-dialog-field (260px) IST RAUS. Es war die einheitliche Feldbreite im Rueckruf-Dialog und gehoerte zur Zeile aus Beschriftung UND Feld. Seit die Beschriftung ueber dem Feld steht, nimmt das Feld die ganze Spalte - an beiden Stellen, Anmeldeseite wie Portal. Ein Token ohne Verbraucher ist nur eine Stelle, an der jemand spaeter wieder eine feste Breite hernimmt. */ /* ====================================================================== Portal hinter der Anmeldung ---------------------------------------------------------------------- Die Werte oben stammen aus der Vorgabe der Grafik-Abteilung. Die folgenden sind ABGELEITET: das Portal-CSS kannte keine einzige Custom Property, sondern 554 fest verdrahtete Hexvorkommen in 116 verschiedenen Farben (gezaehlt am 2026-09-09 ueber zedal.css, display_view.css, sideBar.css, footer.css, am_rechnungen.css, kontextmenue.css und das jQuery-UI-Theme). Allein rund 40 davon waren Graustufen. Diese Rampe fasst sie zusammen. Jeder Wert ist gegen seinen tatsaechlichen Grund gemessen (WCAG 2, Schwellen 4,5:1 fuer Text, 3:1 fuer Bedienelement-Kanten nach 1.4.11). Die Zahlen stehen dabei, damit sie beim naechsten Anfassen nicht neu erhoben werden muessen. ====================================================================== */ /* --- Flaechen --- */ --syn-surface: #ffffff; /* Karten, Tabellen, Dialoge */ --syn-surface-sunken: #f5f7f9; /* Seitengrund; Navy darauf 17,5:1, gedaempfter Text 5,4:1. Ersetzt den Wildwuchs aus #efefef, #fafafa, #f6f6f6, #f3f3f3, #f0f0f0 ... */ /* Eine Mint-getoente Flaeche gibt es schon als --syn-primary-soft; ein zweiter Name dafuer waere nur eine zweite Stelle zum Vergessen. */ /* --- Text: die Rampe endet bei -muted, und das ist gemessen --- #091123 18,8:1 auf Weiss #3c4653 9,6:1 #5c6677 5,8:1 <- Untergrenze fuer Text #6f7a86 4,4:1 DURCHGEFALLEN, deshalb gibt es keine vierte Stufe Wer eine hellere Schrift braucht, braucht in Wahrheit einen anderen Grund - nicht eine hellere Farbe. */ --syn-text-secondary: #3c4653; /* Zweitrangiges, Tabellenkoepfe */ /* Eine vierte, hellere Stufe fuer abgeschaltete Bedienelemente war angedacht und ist wieder heraus: der Bestand schaltet ueber opacity ab (.ui-state-disabled: opacity .35), nicht ueber eine Farbe. Ein Token ohne Verbraucher ist nur eine Stelle, an der jemand spaeter die 3,9:1 fuer lesbaren Text nimmt. */ /* --- Linien: drei Staerken, und der Unterschied ist keine Optik --- Tabellen- und Trennlinien sind Dekoration, fuer sie gilt keine Schwelle. Die Kante eines BEDIENELEMENTS (Eingabefeld, Auswahl, Kontrollkaestchen) muss 3:1 gegen ihren Grund halten - dafuer ist --syn-line-field da, und heller darf es nicht werden. */ --syn-line: #e5eaef; /* Trennlinien; 1,2:1, dekorativ */ --syn-line-strong: #c8d2dc; /* Abschnittskanten, Tabellenrahmen */ --syn-line-field: #8f959f; /* Feldrand; auf Weiss 3,01:1 - genau die Schwelle, nicht heller waehlen */ /* Der Pfeil der Auswahlfelder mit appearance: none. Ein SVG traegt seine Strichfarbe fest im Bild; die dunkle Darstellung tauscht deshalb das ganze Bild. Ohne ";charset", damit der Wert kein Semikolon enthaelt. */ --syn-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6874' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); /* --- Uebersichten und Gitter --- Der Gitterkopf trug das Amber #fdcf51. An seine Stelle tritt das Marken-Mint mit Navy-Schrift (10,3:1); weisse Schrift darauf waere 1,8:1 und faellt durch - siehe die Regel oben, keine Teal-Flaeche traegt weisse Schrift. Die Zeilentoene sind Mint-Tints, damit die Uebersicht in derselben Familie bleibt statt in Blaugrau. */ --syn-grid-header: var(--syn-primary); --syn-grid-header-ink: var(--syn-secondary); --syn-row-stripe: #f4fbf9; /* Navy darauf 17,9:1 */ --syn-row-hover: #e2f6f0; /* Navy darauf 16,7:1 */ /* ZEILENZUSTAENDE, dritter und letzter Anlauf. Die Rollen sind jetzt vertauscht, und das ist die richtige Verteilung: - UEBERFAHREN ist der starke Zustand: der Markenverlauf mit weisser Schrift. Er folgt dem Zeiger, ist also immer nur an einer Zeile, und darf deshalb laut sein. Das Ende des Verlaufs ist --syn-primary-ink und NICHT das Signature-Teal: weiss darauf waere 1,8:1. Mit teal-ink steht die Schrift ueber die ganze Breite auf mindestens 8,6:1. - FIXIERT (ausgewaehlt) ist der ruhige Zustand: der blasse Mint-Ton, der vorher das Ueberfahren war. Er bleibt stehen, waehrend man weiterarbeitet, und Navy darauf sind 16,7:1. Die Zwischenstaende waren Apricot (die Warnflaeche des Themes, die hier nie eine Warnung meinte), ein Navy-Tint (#dbe4f2, blau aber nicht von der Marke) und eine gefuellte Teal-Flaeche (--syn-primary-strong, die dem Signature-Teal der Kopfzeile zu nahe kam). */ --syn-row-selected: var(--syn-row-hover); /* Die UEBERFAHRENE Gitterzeile: ein Mint, eine Stufe dunkler als der Fixierungston darueber. Hier stand vom 2026-09-09 bis zum 2026-09-10 ein Verlauf von Navy nach --syn-primary-ink mit weisser Schrift. Er war eindeutig, aber zu dunkel ("die Hover Grafik im Grid ist mir doch zu dunkel") - und er hat die Zeilenzustaende ueberschrieben: rote und graue Zeilen mussten fuer die Dauer des Ueberfahrens ihre Bedeutungsfarbe abgeben. Gemessen (WCAG 2): gegen den Fixierungston 1,09:1 - der Unterschied ist da, aber leise; gegen Weiss 1,23:1. Navy darauf 15,3:1, die rote Zeile 5,3:1, die graue 4,7:1. Nur der VERWEIS reicht mit --syn-link nicht (3,9:1); er steht in der ueberfahrenen Zeile deshalb auf --syn-primary-ink (7,0:1), siehe zedal.css. */ --syn-row-hover-strong: #cdefe4; /* --- Zustaende: Schrift und Flaeche gehoeren zusammen --- Gemessen wurde beides, Schrift auf Weiss UND Schrift auf der eigenen Flaeche - eine Meldung steht in der Praxis auf beiden. */ --syn-danger: #b3261e; /* auf Weiss 6,5:1, auf -bg 5,7:1 */ --syn-danger-bg: #fdecea; --syn-warning: #5f4a00; /* auf Weiss 8,5:1, auf -bg 7,9:1; war schon vorher im Portal und ist gut, wird deshalb uebernommen */ --syn-warning-bg: #fff6e0; /* ebenfalls Bestand */ --syn-success: #0b6b53; /* auf Weiss 6,5:1, auf -bg 5,9:1 */ --syn-success-bg: #e8f7f2; --syn-info: #1c5b8f; /* auf Weiss 7,1:1, auf -bg 6,3:1 */ --syn-info-bg: #e8f1f9; /* --- Verschachtelungstiefe der Gruppen (.ugrb-group, vier Ebenen) --- Ein KATEGORIALER Code, kein Markenwert: die vier Toene markieren, wie tief eine Gruppe steckt, und muessen dafuer voneinander unterscheidbar sein - nicht zur Marke passen. Sie stehen unveraendert wie vorher und nur deshalb hier, damit sie nicht als Wildwuchs gelesen und beim naechsten Aufraeumen "korrigiert" werden. Sie liegen als 4px breite linke Kante an, tragen also keinen Text und keine Kontrastpflicht. */ --syn-nest-1: #5b9bd5; --syn-nest-2: #70ad47; --syn-nest-3: #ed7d31; --syn-nest-4: #a05bd5; /* --- Erhebung --- */ --syn-shadow-card: 0 1px 2px rgba(9, 17, 35, 0.06), 0 2px 8px rgba(9, 17, 35, 0.06); --syn-shadow-dialog: 0 8px 32px rgba(9, 17, 35, 0.18); --syn-shadow-menu: 0 4px 16px rgba(9, 17, 35, 0.12); /* Kurzhinweise (qTip, synqony_dialoge.css): hell die Karte mit Navy-Umriss. Dunkel waere der Umriss in Schriftfarbe ein heller Rahmen - dunkel.css setzt eigene Werte. */ --syn-tooltip-bg: var(--syn-surface); --syn-tooltip-border: var(--syn-text-brand); --syn-tooltip-shadow: 0 2px 4px rgba(9, 17, 35, .10), 0 8px 24px rgba(9, 17, 35, .16); /* Die Fehlermeldung an einem Pflichtfeld (qTip "jtools", Regel in zedal.css): hell die Form aus jquery.qtip.css, dunkel die Fehlerflaeche. */ --syn-error-tip-bg: linear-gradient(#717171, #232323) rgba(0, 0, 0, 0.7); --syn-error-tip-border: #f1f1f1; --syn-error-tip-ink: #ffffff; --syn-error-tip-shadow: 0 0 12px #333333; /* --- Masse, die im Portal dazukommen --- */ --syn-radius-small: 4px; /* Felder, Kaestchen */ --syn-radius-large: 10px; /* Karten, Dialoge */ }