/* ============================================================ comparXIS — Brand Styleguide CSS v2.0 (Stand 16.08.2026) Fonts: Aptos (Text/UI) · Sora (Display/Headlines) DIESE DATEI IST NICHT NUR DOKUMENTATION – SIE WIRD AUSGELIEFERT. Eingebunden von webspace/index.php, website/index.html, allen „Dokumentation *.html" und „Mockup Anmelden.html", jeweils VOR site.css. Wer hier einen Wert ändert, ändert die Website. Deshalb gilt für Pflege: ergänzen ja, bestehende Werte ändern nur mit Absicht, entfernen nie (die alten Dokumentationen hängen daran). Was v2.0 gegenüber v1.0 (24.07.2026) nachzieht: die Marke hat seither ein Querlogo mit vorangestelltem X bekommen, einen vollständigen hellen Modus, fünf Bandfarben, Zustandsfarben und feste Maße. Diese Werte standen bisher verstreut in site.css. Sie stehen jetzt hier – mit identischen Werten, damit die Kaskade nichts verändert. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); :root { /* --- Farben: Marke --- */ --cx-blue: #1E7BE8; /* Elektroblau — Hauptfarbe, Aktionen */ --cx-blue-light: #3FA9FF; /* Gradient-Start */ --cx-blue-deep: #0D50D8; /* Tiefblau — Gradient-Ende, Flächen */ --cx-accent: #35E0DA; /* Akzent Cyan — sparsam einsetzen (~3 %) */ /* --- Farben: Neutral --- */ --cx-carbon: #08090C; /* Seitenhintergrund dunkel */ --cx-graphite: #0E1116; /* Kartenflächen dunkel */ --cx-border: #1C2027; /* Linien & Rahmen dunkel */ --cx-steel: #8B929B; /* Sekundärtext */ --cx-silver: #C9CFD6; /* Silber dunkel */ --cx-silver-light:#F2F4F7; /* Silber hell */ --cx-white: #FFFFFF; --cx-ink: #14171C; /* Text auf hellem Grund */ /* --- Text --- */ --cx-text: #E9ECF0; /* Primärtext auf dunkel */ --cx-text-muted: #B9BFC7; /* Fließtext auf dunkel */ /* --- Gradient --- */ --cx-gradient: linear-gradient(135deg, var(--cx-blue-light), var(--cx-blue-deep)); --cx-gradient-silver: linear-gradient(160deg, var(--cx-silver-light), var(--cx-silver)); /* --- NEU in v2.1: Blau, das weiße Schrift trägt ------------------ Weiß auf --cx-blue erreicht nur 4,16:1, auf --cx-blue-light sogar nur 2,52:1 – beides unter der Norm von 4,5:1. Ein Knopf mit dem alten Verlauf war an seiner oberen linken Ecke am schlechtesten lesbar, genau dort, wo die Schrift beginnt. WARUM NICHT EINFACH --cx-blue-deep, wie beim Knopf im Hinweisband? Weil dann ein zweiter Wert kippt. Diese Flächen sind klein und liegen auf dunklem Grund; für Bedienelemente verlangt die Norm 3:1 zwischen Fläche und Umgebung. --cx-blue-deep kommt auf der dunklen Karte aber nur auf 2,84:1 – die Zähler-Pillen und Haken wären im Dunkelmodus fast verschwunden. Ein Wert muss hier BEIDE Seiten bedienen: die Schrift darauf und die Fläche darunter. #1C6BE4 erfüllt beides: weiße Schrift 4,91:1, Fläche gegen die dunkle Karte 3,85:1, gegen die helle 4,91:1. Es liegt zwischen dem bisherigen Elektroblau und dem Tiefblau – dieselbe Familie, der Unterschied zum alten Ton ist mit bloßem Auge kaum zu sehen. */ --cx-blue-flaeche: #1C6BE4; --cx-gradient-flaeche: linear-gradient(135deg, var(--cx-blue-flaeche), var(--cx-blue-deep)); /* --- Typografie --- */ --cx-font-body: 'Aptos', 'Segoe UI', system-ui, sans-serif; --cx-font-display: 'Sora', sans-serif; /* NEU in v2.0: Die dritte Familie war nie benannt, wird aber an über 40 Stellen ausgeschrieben – Kennungen, IP-Adressen, Codebeispiele. */ --cx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Radien & Abstände --- */ --cx-radius: 14px; --cx-radius-sm: 10px; --cx-gap: 16px; /* --- NEU in v2.0: Zustandsfarben --------------------------------- Warnfarbe ist bewusst KEIN Rot. Ein Hersteller ohne Angebot in einem Bereich ist kein Fehler, sondern eine Eigenschaft, die man im Verkaufsgespräch sogar zeigen will. Bernstein auf Kartenfläche: 9,00:1. */ --cx-warn: #E5A83B; /* Mitbewerber-Beziehung: nennen sich beide, nur einer, oder keiner. Im Radar sind das durchgezogene, gestrichelte und punktierte Linien – die Farbe ist die zweite Auskunft, nicht die einzige. */ --cx-bz-beide: #35E0DA; --cx-bz-eins: #E5A83B; --cx-bz-keine: #7C848F; /* --- NEU in v2.0: Fünf Bandfarben für Themengruppen --------------- Drei kommen aus der Palette (Blau, Petrol, Bernstein), zwei ergänzen sie um hinreichend unterscheidbare Töne. Nachgerechnet auf Karten- UND Seitenfläche; der schwächste Wert ist Violett mit 5,57:1. */ --cx-band0: #3FA9FF; --cx-band1: #35E0DA; --cx-band2: #8B7BF0; --cx-band3: #E5A83B; --cx-band4: #5FD08A; /* --- NEU in v2.0: Maße ------------------------------------------- Die Kopfzeile klebt oben und hat zwei Ebenen: Marke mit Suche und Konto, darunter das Navigationsband. Ihre Höhe ist ein Token, weil drei andere Dinge daran hängen: scroll-padding-top für Sprungziele, die klebende Werkzeugleiste und das Sichtprobe-Band. */ --cx-kopf: 116px; /* --- NEU in v2.0: Logofarben, aus der Bilddatei gemessen ---------- Für Stellen, an denen die Wortmarke als TEXT gesetzt wird statt als Bild – in E-Mails ist das Pflicht, weil Outlook Bilder blockt. Die Werte stammen aus dem Querlogo, nicht aus der Palette: Das X ist einen Hauch heller als das Elektroblau, das IS ein warmes Grau. */ --cx-logo-x-dunkel: #0185F0; /* X auf dunklem Grund · 4,80:1 */ --cx-logo-x-hell: #006DDB; /* X auf hellem Grund · 4,99:1 */ --cx-logo-is-dunkel: #D7D6D7; /* IS auf dunklem Grund · 12,39:1 */ --cx-logo-is-hell: #767D87; /* IS auf hellem Grund · 4,16:1, ausreichend, weil die Wortmarke groß gesetzt ist (Norm dort 3:1) */ } /* ============================================================ HELLER MODUS (NEU in v2.0) Die Umschaltung setzt html[data-theme="light"|"dark"]; ohne Attribut gilt die Systemeinstellung. Umdefiniert werden nur die Variablen, nicht die Bausteine. LEITSATZ DIESER PALETTE: Ein Farbwert kann hell und dunkel nicht beide bedienen. Cyan #35E0DA erreicht auf Weiß 1,64:1 und ist damit faktisch unlesbar, Bernstein #E5A83B kommt auf 2,10:1. Beide bleiben deshalb in ihrer Farbfamilie, werden aber abgedunkelt. Nachgerechnet statt angesehen – im Screenshot sieht man die Verschlechterung nicht. ============================================================ */ html[data-theme="light"] { --cx-carbon: #F4F5F8; /* Seitenhintergrund hell */ --cx-graphite: #FFFFFF; /* Kartenflächen hell */ --cx-border: #DFE3E9; --cx-steel: #64707D; --cx-silver: #4A545F; --cx-text: #14171C; --cx-text-muted: #3C4550; --cx-accent: #0F766E; /* Petrol statt Cyan · 5,47:1 auf Karte */ --cx-warn: #8A5A00; /* Ocker statt Bernstein · 5,93:1 */ --cx-bz-beide: #0F766E; --cx-bz-eins: #8A5A00; --cx-bz-keine: #5F686F; --cx-band0: #0D50D8; --cx-band1: #0F766E; --cx-band2: #5B3FC4; --cx-band3: #8A5A00; --cx-band4: #2E7D4F; } /* --- Basis --- */ body { margin: 0; background: var(--cx-carbon); color: var(--cx-text); font-family: var(--cx-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--cx-blue); color: #fff; } /* ACHTUNG, STOLPERSTELLE: Diese Regel gilt für BEIDE Modi. Auf hellem Grund erreicht #3FA9FF nur 2,49:1. Aufgefangen wird das in site.css durch html[data-theme="light"] main a { color: var(--cx-blue-deep) } – und dieser Selektor enthält „main". Ein Textlink AUSSERHALB von
bleibt im hellen Modus also unlesbar. Betrifft heute nur den Rahmen um das Logo, der gar keinen Text trägt; wer aber Kopf- oder Fußzeile um einen Link erweitert, muss ihm eine eigene Farbe geben. */ a { color: var(--cx-blue-light); text-decoration: none; font-weight: 600; } a:hover { color: #7CC4FF; } /* --- Typo-Skala --- */ h1, .cx-h1 { font-family: var(--cx-font-display); font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.4em; } h2, .cx-h2 { font-family: var(--cx-font-display); font-size: 34px; font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; } h3, .cx-h3 { font-family: var(--cx-font-display); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 0.5em; } p { color: var(--cx-text-muted); margin: 0 0 1em; } .cx-eyebrow { font-family: var(--cx-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cx-steel); } .cx-text-gradient { background: var(--cx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --- Buttons --- Der Verlauf läuft seit v2.1 innerhalb der Töne, auf denen weiße Schrift die Norm erfüllt (siehe --cx-gradient-flaeche). Er ist dadurch flacher als früher, aber an keiner Stelle mehr unterschwellig. */ .cx-btn { display: inline-block; font-family: var(--cx-font-body); font-size: 16px; font-weight: 600; color: #fff; background: var(--cx-gradient-flaeche); border: none; border-radius: var(--cx-radius-sm); padding: 13px 28px; cursor: pointer; } .cx-btn:hover { filter: brightness(1.12); } .cx-btn-secondary { display: inline-block; font-family: var(--cx-font-body); font-size: 16px; font-weight: 600; color: var(--cx-text); background: transparent; border: 1px solid #2A3038; border-radius: var(--cx-radius-sm); padding: 12px 28px; cursor: pointer; } .cx-btn-secondary:hover { border-color: var(--cx-blue); color: var(--cx-blue-light); } /* --- Badge --- Historisch. In der Anwendung übernimmt .cx-tag diese Rolle (Pille mit Rahmen, 11,5 px, Silber); .cx-badge steht nur noch in den älteren Dokumentationen. Nicht entfernen, sonst brechen die. */ .cx-badge { font-family: var(--cx-font-mono); font-size: 12px; color: var(--cx-accent); border: 1px solid var(--cx-accent); border-radius: 99px; padding: 5px 14px; } /* --- Karten --- */ .cx-card { background: var(--cx-graphite); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 24px; } .cx-card-highlight { background: var(--cx-gradient); border-radius: var(--cx-radius); padding: 24px; color: #fff; } /* --- Heller Modus, alte Fassung --- Abgelöst durch html[data-theme="light"] weiter oben. Bleibt für die Dokumentationen von vor 1.44 stehen, in der Anwendung ungenutzt. */ .cx-light { background: var(--cx-white); color: var(--cx-ink); } .cx-light p { color: #4A5058; } .cx-light .cx-card { background: var(--cx-silver-light); border-color: #E2E6EB; } /* ============================================================ LOGO — Regeln (NEU in v2.0) AUFBAU: Bildmarke X, dann Abstand, dann Wortmarke „comparXIS". Das X steht VOR dem Namen und wiederholt sich in ihm – es ist derselbe Buchstabe, einmal als Zeichen und einmal als Teil des Wortes. Im X läuft ein Verlauf von Blau (links) nach Silber (rechts); in der Wortmarke sind „compar" und „IS" neutral, das „X" trägt das Blau. DATEIEN in images/logo/ – die Benennung meint den GRUND, nicht die Schrift. Das ist die häufigste Verwechslung: logo quer black transparent.png → für DUNKLEN Grund (helle Schrift) logo quer white transparent.png → für HELLEN Grund (dunkle Schrift) logo black/white transparent.png → hochkant, für Kacheln und Mails favicon-x-512.png → nur das X, für Symbole Die Umschaltung erledigt app.js beim Theme-Wechsel; im Markup steht die dunkle Fassung, weil die Anwendung dunkel startet. SCHUTZRAUM: mindestens die Höhe des X ringsum. Auf Fotos oder farbigen Flächen nie freistellen – erst eine ruhige Fläche legen. NICHT ERLAUBT: X und Wortmarke trennen, den Verlauf durch eine Volltonfarbe ersetzen, das Logo verzerren, es in einer anderen Schrift nachbauen. WORTMARKE ALS TEXT: nur, wo ein Bild nicht ankommt – in E-Mails, weil Outlook Bilder blockt. Dann „compar" in Grundfarbe, „X" und „IS" in den Logofarben oben, gesetzt in Century Gothic / Avenir Next / Futura. Die Stärke gehört in den style, nicht in ein : Outlook rechnet sonst doppelt und lässt die Buchstaben ineinanderlaufen. SCHREIBWEISE im Fließtext: comparXIS – klein beginnend, XIS in Versalien. Ausgenommen sind technische Kennungen, in denen die Kleinschreibung feststeht (comparxis_mysql.sql, der Projektordner, Kontonamen). ============================================================ */