@CHARSET "UTF-8"; /* * Gebrandete Farben und Schriften im SYNQONY-Stil (#39). * * Uebernommen aus der Loginseite des Portals (zedal-portal, * htdocs/css/login_synqony.css, #955). Namen und Zahlen sind hier absichtlich * wortgleich, damit beide Projekte dieselbe Vokabel fuer dieselbe Farbe * benutzen. 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, -ink). * Das Portal kennt seitdem Themes, in denen dieselbe Rolle eine ganz andere * Farbe traegt, und hat die Namen deshalb auf die Rollen umgestellt - hier * mitgezogen, damit die Vokabel gleich bleibt. Die Rollen heissen wie auf * synqony.com (Elementor: primary = Signature, secondary = Blau): * * --syn-primary Akzent, hier SYNQONY Signature * --syn-secondary dunkle Grundfarbe, hier SYNQONY Blau * * FARBQUELLE ist seit dem 07.09.2026 nicht mehr die muendliche Vorgabe, sondern * das Farbdokument des Logopakets: * * zedal-portal, documentation/zedal-by-synqony-logopaket-2026-09-07/ * SYNQONY-Farbwerte.md (Quelle: SYNQONY Corporate Design) * * Das Paket liegt bewusst nur dort und wird hier nicht ein zweites Mal * eingecheckt - zwei Kopien derselben Vorgabe laufen auseinander. Die * Kommentare unten nennen jeweils die Rolle aus dem Dokument, damit bei der * naechsten Aktualisierung erkennbar ist, welcher Wert vorgegeben und welcher * hier abgeleitet ist. * * Warum vollstaendig statt nur das Benutzte: Die Masken folgen dem Portal - * Rahmen und Flaeche wie im neuen Design, Felder, Knoepfe und Dialoge wie auf * der Loginseite. Wer dort etwas anpasst, soll denselben Wortschatz vorfinden * und nicht erst Tokens nachtragen muessen. * * Diese Datei setzt bewusst keine Regeln auf Elemente, nur Variablen. Sie * laesst sich damit vor jedes Seitenstylesheet haengen, ohne dort etwas zu * ueberschreiben. */ /* * 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. * * Regular fuer die Knoepfe, Medium fuer die Ueberschriften der Abschnitte. Mehr * braucht die Maske nicht; die uebrigen Schnitte liegen im Paket bereit. * * woff2 zuerst, woff als Rueckfall fuer aeltere Browser. font-display: swap * zeigt den Text sofort in Arial und tauscht nach; ohne das blieben * Knopfbeschriftung und Ueberschriften bis zum Laden der Datei unsichtbar. */ @font-face { font-family: "Chillax"; src: url("/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Regular.woff2") format("woff2"), url("/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("/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Medium.woff2") format("woff2"), url("/fonts/Chillax_Complete/Fonts/WEB/fonts/Chillax-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* --- Farben: Flaechen --- */ --syn-bg: #ffffff; /* Weiss; Seitengrund und Fuellung der Felder */ --syn-bg-muted: #eef9f6; /* Light Mint (erweiterte Web-Palette) */ /* Die Flaeche im Rahmen, auf der das Formular steht; Name und Wert wie im Portal. Hell dasselbe Weiss wie --syn-bg - dunkel liegen die Felder (--syn-bg) eine Stufe tiefer als die Flaeche. */ --syn-surface: #ffffff; /* Fuellung einer Bestaetigung nach dem Abschicken; Wert wie im Portal */ --syn-success-bg: #e8f7f2; /* Zeile unter dem Zeiger in Listen (Artikel); Wert wie im Portal */ --syn-row-hover: #e2f6f0; /* * Flaeche gesperrter Eingabefelder. Bis zum Farbdokument war das dieselbe * Variable wie der Seitengrund (--syn-bg-muted, damals das neutrale * #f7f9fa); mit dem Wechsel auf Light Mint musste sie sich davon trennen. * * Zwei Gruende: Ein gesperrtes Feld liegt auf der weissen Flaeche (eingebettet * in einer weissen Karte) und soll "gesperrt" heissen - Light Mint ist auf * diesen Seiten aber die Akzentfarbe, mintgefuellte Felder lesen sich als * hervorgehoben statt als gesperrt. Und auf den gedeckten Unterflaechen * (--syn-bg-muted) verschwaemme das Feld mit ihnen. * * Der Wert ist der frueher hier stehende neutrale Ton, weil das Farbdokument * kein Grau fuehrt: "Card Border" (#e5eaef) waere der einzige offizielle * Kandidat, ist aber genau die Rahmenfarbe der Felder - als Fuellung * verschwindet der Rahmen und das Feld wird ein randloser Klotz. */ --syn-field-disabled: #f7f9fa; /* abgeleitet, nicht vorgegeben */ /* --- 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 */ /* * 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) * * Gebraucht wird er ueberall, wo gruene Schrift auf einer HELLEN MINTFLAECHE * landet - beim Ueberfahren des Kontur-Knopfs und der Dialog-Knoepfe. Deren * Grund ist --syn-primary-soft und damit seit dem Farbdokument Light Mint; * --syn-link liegt dort bei 4,42:1 und verfehlt AA knapp. Die Mint-Anmutung * traegt an diesen Stellen ohnehin der Rahmen (--syn-primary). */ --syn-primary-ink: #065647; /* Abstufung 3 */ /* * Markenverlauf der Balken - Winkel, Richtung und Farben wie auf synqony.com. * * Dort steht (Elementor, .elementor-kit-10): * linear-gradient(135deg, * var(--e-global-color-secondary) 20%, * var(--e-global-color-primary) 100%) * mit secondary = #091123 und primary = #0FD8B1 - also genau unsere beiden * Markenfarben, diagonal von dunkel oben links nach teal unten rechts. * * Abweichend davon liegt das Teal-Ende bei 160% statt 100%, also HINTER dem * Kasten, und Navy reicht nur bis 10%. Beides wie im Portal * (synqony_brand.css dort): Bei 100% faellt weisse Schrift am hellen Ende * unter 4,5:1, und der Navy-Stop bei 10% laesst das Teal frueher anlaufen, * ohne dass die Schrift am linken Rand verliert. * * Hier traegt der Verlauf noch die Titelleisten der Dialoge. Den Rahmen der * Seite traegt --syn-frame. */ --syn-login-bar-light-at: 160%; --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); /* * Abstufung 2 als FLAECHE: das helle Ende des Rahmens und die Fuellung * angehakter Kaestchen und gewaehlter Optionsknoepfe. Name und Wert wie im * Portal. Weiss darauf 4,76:1; dunkel bleibt der Wert, wie er ist. */ --syn-tab-active: #09826a; /* * Der Rahmen der Seite (#41): Kopf und Fuss stehen auf diesem Verlauf, die * Flaeche mit dem Formular liegt davor. Wie der Rahmen des neuen Designs im * Portal (display_view.css dort, --rahmen-grund): hell aufgehellt, Navy schon * vor dem Rand und das helle Ende in Abstufung 2 statt in Mint. Der Verlauf * laeuft ueber das ganze Fenster, wo die Schrift landet, haengt also am * Seitenverhaeltnis - Abstufung 2 haelt fuer Weiss an JEDER Stelle 4,76:1, * Mint nicht (tests/design/DunkleDarstellungTest.php rechnet das nach). */ --syn-frame: linear-gradient(135deg, var(--syn-secondary) -10%, var(--syn-tab-active) 75%); /* * Bedienelemente auf dem Rahmen (Sprachwahl): ein dunkler Schleier statt der * hellen Flaeche, die das Portal auf seinen dunklen Balken nimmt. Eine helle * Flaeche hellte den Grund am hellen Ende weiter auf, und Weiss darauf fiele * auf 4,0:1; der Schleier haelt die Schrift ueberall ueber 4,5:1. */ --syn-frame-control: rgba(9, 17, 35, .22); --syn-frame-control-hover: rgba(9, 17, 35, .36); --syn-frame-control-line: rgba(255, 255, 255, .28); /* Kante und Schatten der Flaeche auf dem Rahmen; Werte wie im Portal */ --syn-frame-edge: rgba(255, 255, 255, .12); --syn-frame-shadow: 0 8px 32px rgba(0, 0, 0, .25); /* * ROLLEN AUF FLAECHEN, wie im Portal (synqony_brand.css dort). Schrift auf * dem Rahmen und den Dialogtiteln und der Schleier hinter Dialogen haengen * nicht direkt an --syn-text-inverse und --syn-secondary, sondern an eigenen * Rollen: Eine Darstellung, die Grund und Schrift tauscht, laesst die * Markenflaechen damit unberuehrt. */ /* Schrift und Zeichen auf Rahmen und Dialogtiteln */ --syn-bar-ink: var(--syn-text-inverse); --syn-bar-ink-hover: var(--syn-primary); /* Der Schleier hinter modalen Dialogen (Deckkraft je Regel) */ --syn-overlay: var(--syn-secondary); /* Die kraeftige Flaeche: ueberfahrene Knoepfe - und die Schrift darauf */ --syn-fill: var(--syn-secondary); --syn-fill-ink: var(--syn-text-inverse); /* Rand des ueberfahrenen Knopfs, wie im Portal: hell dunkelgruen, dunkel Mint - dort ist die Flaeche so dunkel wie die Karte, und der Rand haelt den Umriss. Folgt --syn-primary-ink, das css/darstellung/dunkel.css aufhellt. */ --syn-fill-border: var(--syn-primary-ink); /* --- 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); auf Weiss 18,8:1 statt 14,5:1, auf Light Mint 17,5:1. */ --syn-text: #091123; /* SYNQONY Blau */ --syn-text-muted: #5c6677; /* Body Text (erweiterte Web-Palette) */ /* Spaltenkoepfe der Artikelliste; Name und Wert wie im Portal */ --syn-text-secondary: #3c4653; --syn-text-inverse: #ffffff; /* Weiss */ --syn-placeholder: #98a4ae; /* abgeleitet, nicht vorgegeben */ /* Die Markenfarbe als Schrift oder Zeichen auf normaler Flaeche. Hell dasselbe Blau wie --syn-secondary; getrennt, weil --syn-secondary auch Flaeche ist und eine dunkle Darstellung nur die Schrift aufhellt. */ --syn-text-brand: var(--syn-secondary); /* --- Farben: Links auf hellem Grund --- */ /* 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. Auf einer Mintflaeche reicht er nicht mehr; dort steht --syn-primary-ink. */ --syn-link: #09826a; /* Abstufung 2 */ --syn-link-hover: var(--syn-secondary); /* SYNQONY Blau */ /* --- Farben: Linien und Zustaende --- */ --syn-border: #e5eaef; /* Card Border (erweiterte Web-Palette) */ /* Kante des Seitenkopfs und der Spaltenkoepfe; Name und Wert wie im Portal */ --syn-line-strong: #c8d2dc; /* Rand der Eingabefelder, Wert wie im Portal. Die Kartenlinie --syn-border kaeme als Feldrand nur auf 1,2:1; WCAG 1.4.11 verlangt fuer die Kante eines Bedienelements 3:1. */ --syn-line-field: #8f959f; /* Feldrand; auf Weiss 3,01:1 - genau die Schwelle, nicht heller waehlen */ --syn-focus: #0fd8b1; --syn-error-bg: #d8402f; /* Flaeche eines Felds mit fehlender Pflichtangabe; Wert wie im Portal */ --syn-danger-bg: #fdecea; /* Pfeil der Auswahllisten. Ein ganzes Bild, weil die Strichfarbe darin steht - dunkel ersetzt css/darstellung/dunkel.css es. Wie im Portal. */ --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"); /* Sprechblasen (qtip: Anmeldung, Fehlerhinweis am Feld) - die Hinweisform des Portals: Karte mit Navy-Umriss */ --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 Zeichen-Sprites von jQuery UI sind dunkelgrau (#444) fest im Bild; dunkel kehrt sie dieser Filter um */ --syn-ui-icon-filter: none; /* --- Schrift --- */ /* Vorgabe: Arial fuer Fliesstext, Listen, Fuss und Formularfelder */ --syn-font-sans: Arial, Helvetica, sans-serif; /* Vorgabe: Chillax fuer Knoepfe; hier zusaetzlich fuer Ueberschriften */ --syn-font-display: "Chillax", Arial, Helvetica, sans-serif; --syn-font-size: 16px; --syn-font-size-small: 13px; --syn-line-height: 1.5; /* --- Layout --- */ --syn-container: 1420px; /* Hoehe des Logos im Kopf; die Breite ergibt sich aus dem Seitenverhaeltnis der Datei (475:180, also 116px bei 44px Hoehe). Nicht kleiner: Die Unterzeile "by SYNQONY" ist ab etwa 44px lesbar, darunter ein Fleck. */ --syn-logo-height: 44px; --syn-radius-small: 4px; --syn-radius: 6px; /* Flaeche, Dialoge und die Seitenspalte; Name und Wert wie im Portal */ --syn-radius-large: 10px; --syn-radius-pill: 999px; --syn-gap: 24px; }