/* ========================================================================== SysTec.AI — Design-System Farbwelt C · "Werkbank" Abgeleitet aus den Design-Tokens von msr-innovations.de ========================================================================== */ :root { /* ---- Farbleiter ------------------------------------------------------- Eine Farbe, sieben Stufen, jede mit einer festen Rolle. Es gibt keine Akzentfarbe: Hervorhebung entsteht über Tonwert und Fläche. Basis bleibt MSR --main #004166. Das frühere --c-500 #21A1D9 ist ersetzt — bei mittlerer Helligkeit voll gesättigt, und genau das wirkt grell. */ --c-25: #F6F9FB; /* Seitenhintergrund */ --c-50: #EDF3F7; /* Sektionswechsel */ --c-100: #DAE7F0; /* getönte Flächen, Marken, Hinweise */ --c-200: #A9C9DC; /* Linien und Trennungen auf hellem Grund */ --c-300: #7FAECB; /* Marken und Linien auf dunklem Grund */ --c-500: #2C6E90; /* Fläche mit weißer Schrift, Akzentmarken */ --c-700: #004166; /* Hauptschaltfläche, Fußzeile, Überschriften */ --c-900: #052E45; /* Seitenköpfe, tiefste Fläche */ /* ---- Neutral ---------------------------------------------------------- */ --surface: #FFFFFF; /* Kartenfläche */ --line: #E4EBF1; /* neutrale Linie */ --text: #16242E; /* Text primär */ --text-2: #566D7C; /* Text sekundär */ --text-on-dark: #EAF2F7; --text-2-on-dark: #A7C4D6; /* ---- Arbeitsmarkierungen --------------------------------------------- KEINE Gestaltungsfarbe. Ausschließlich für Platzhalter — alles, was der Kunde noch liefern muss. Bewusst warm, damit es sich in einer durchgehend blauen Seite nicht verliert: eine blaue Markierung würde übersehen, und dann geht ein Platzhalter mit live. Verschwindet mit den Platzhaltern vor dem Livegang. */ --markierung: #9C560F; /* Rahmen und Beschriftung, 5,6:1 auf Weiß */ --markierung-flaeche: #FDF3E7; /* getönte Fläche dahinter */ --markierung-hell: #F0BC80; /* auf dunklem Grund, 6,6:1 gegen --c-900 */ /* ---- Zustandsfarbe --------------------------------------------------- Fehlermeldungen bleiben rot. Eine blaue Fehlermeldung liest niemand als Fehler. 7,5:1 gegen Weiß. */ --fehler: #A3231F; /* ---- Kontrast — verbindlich ------------------------------------------- Weiß auf --c-500: 5,6:1 → zulässig Weiß auf --c-700: 10,4:1 → zulässig Weiß auf --c-900: 14,2:1 → zulässig --c-500 als Text auf Weiß: 5,6:1 → zulässig (das alte Azur: 2,9:1) --c-300 auf --c-900: 6,0:1 → für Marken und Linien auf dunkel --c-200 auf --c-900: 8,2:1 → für Nebentext auf dunkel Auf hellen Flächen (--c-100, --c-200) steht dunkler Text: --auf-hell. Auf tiefen Flächen (--c-500, --c-700, --c-900) steht weißer: --auf-tief. */ --auf-tief: #FFFFFF; --auf-hell: var(--c-900); /* ---- Typografie ------------------------------------------------------- Noto Sans wie MSR (verbindet unauffällig). Überschriften bewusst serifenlos statt MSRs Noto Serif. PRODUKTION: Noto Sans als woff2 selbst hosten — kein Google-CDN, die Zielgruppe prüft das nach. */ --ff: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; /* Technische Angaben — Leistungsphasen, Dauern, Preise, Kennzahlen. Vorher lief das in Monospace. Das sah nach Quellcode aus, nicht nach Datenblatt, und stach im Fließtext als Fremdkörper hervor. Jetzt dieselbe Schrift, aber mit Tabellenziffern, halbfett und in der dunklen Systemfarbe. Ziffern stehen damit spaltenweise untereinander — genau der Effekt, der bei Preisen und Dauern gebraucht wird — und der Wert hebt sich durch Gewicht und Farbe ab statt durch eine fremde Schriftform. Kein zweiter Ladevorgang, keine zweite Schriftdatei. */ --ff-technisch: var(--ff); --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ====================================================================== DIE SCHRIFTLEITER — fuenf Stufen, mehr gibt es nicht. Jede Schriftgroesse der Website kommt aus dieser Liste. Zahlen direkt in main.css oder pages.css zu schreiben ist ein Fehler; die Pruefung zaehlt die berechneten Groessen und meldet jeden Wert, der hier nicht steht. DREI TEXTREGELN, an denen sich alles entscheidet: 1. Fliesstext hat EINE Groesse. Dazu gehoeren auch die Vorzeile ueber einer Ueberschrift und der Vorspann darunter -- beides sind Saetze, keine eigenen Rollen. Sie unterscheiden sich durch Farbe, Gewicht und Grossbuchstaben, nicht durch Groesse. 2. Die kleine Stufe ist NUR fuer kleine Textelemente: Etiketten, Badges, Bildunterschriften, Schluessel in Fakten-Paaren, Zaehler, Kleingedrucktes. Niemals fuer Fliesstext. 3. Ueberschriften folgen ihrer Ebene. 12 Klein Badge, Brotkrume, Bildunterschrift, Datum, Zaehler, Fakten-Schluessel, Kleingedrucktes, Fusszeilen-Etikett 14 Text ALLER Fliesstext: Absaetze, Vorzeile, Vorspann, Kartentext, Listen, Hinweise, Fehlermeldungen, Aufklapper, Knoepfe, Navigation, Tabellen, Fusszeile 17,6 H3 h3, alle Komponententitel (Kachel, Kasten, Gruppe) und die hervorgehobene Kennzahl 20,4 H2 h2 28 H1 h1 ZU DEN EBENEN, DIE ES NICHT GIBT: gezaehlt sind h1 20x, h2 77x, h3 126x. h4 kommt dreimal vor, alle drei in der Fusszeile als Spaltenetikett -- die stehen deshalb auf der kleinen Stufe, nicht auf einer eigenen. h5 und h6 kommen nicht vor. Wird eine gebraucht, nimmt sie die H3-Stufe; eine sechste Zahl kommt nicht dazu. Schritte 1,17 / 1,26 / 1,16 / 1,37 — unten eng, oben weit. Kleine Elemente duerfen dicht beieinander liegen, Ueberschriften brauchen Abstand. H1 zu Fliesstext: 2,00 auf dem Desktop, 1,71 auf dem Handy. ====================================================================== */ --fs-klein: 0.75rem; /* 12px */ --fs-text: 0.875rem; /* 14px */ --fs-h3: 1.1rem; /* 17,6px */ --fs-h2: 1.275rem; /* 20,4px */ --fs-h1: 1.75rem; /* 28px */ /* Bedienelemente. 16px ist der GRUNDWERT, und zwar nicht aus Gestaltung: unterhalb davon zoomt iOS Safari die ganze Seite, sobald ein Eingabefeld den Fokus bekommt. Auf Geraeten mit Maus oder Trackpad gibt es dieses Verhalten nicht -- dort steht das Feld eine Stufe kleiner, siehe die Regel unter diesem Block. */ --fs-feld: 1rem; /* 16px, Beruehrungsgeraete */ /* Handy: nur die drei Ueberschriftenstufen stufen ab. Klein und Text bleiben, sie stehen schon an der Untergrenze. Ein eigener Tablet-Satz ist nicht noetig -- bei 834px mit den Desktop-Werten gemessen: kein Ueberlauf auf keiner Seite, keine gequetschte Ueberschrift. */ --lh-tight: 1.12; --lh-head: 1.22; --lh-body: 1.55; /* ---- Form ------------------------------------------------------------- Weiche große Radien für Karten, knappe für Buttons. Schatten mehrschichtig und sehr weich, keine harten Kanten. */ --r-card: 12px; --r-btn: 6px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(5, 46, 69, .06); --sh-2: 0 1px 2px rgba(5, 46, 69, .06), 0 8px 24px rgba(5, 46, 69, .06); --sh-3: 0 2px 4px rgba(5, 46, 69, .05), 0 16px 40px rgba(5, 46, 69, .09); /* ---- Raster ----------------------------------------------------------- */ /* Wie weit der Text im Kopfbereich ueber die Spaltengrenze ins Bild ragt. Der Verlauf des Bildes ist in diesem Streifen noch fast deckend. Wird das Mass groesser, muss auch der Verlauf nachgezogen werden. */ --ueberhang: clamp(1.25rem, 3.5vw, 3.5rem); --maxw: 1180px; --maxw-text: 70ch; --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(2.5rem, 5.5vw, 4.5rem); /* Wiederkehrende Innenabstände zentral, damit Dichte an einer Stelle nachjustiert werden kann statt in dreißig Regeln. */ --pad-card: 1.125rem; --pad-tight: 1rem; --gap-grid: 1rem; } /* ---- Handy: die drei Ueberschriftenstufen eine Stufe tiefer ------------ 560px, weil das Stylesheet diesen Umbruchpunkt schon viermal verwendet. Klein (12), Text (14) und Feld (16) bleiben unveraendert. */ @media (max-width: 560px) { :root { --fs-h3: 1.0625rem; /* 17px */ --fs-h2: 1.25rem; /* 20px */ --fs-h1: 1.5rem; /* 24px */ } } /* Eingabefelder eine Stufe kleiner -- aber nur dort, wo es gefahrlos ist. 16px im Grundwert ist eine Schutzmassnahme: iOS Safari zoomt die ganze Seite, sobald ein Feld unter 16px den Fokus bekommt, und zoomt danach nicht von selbst zurueck. Das betrifft Beruehrungsgeraete. 'pointer: fine' meint ein genaues Zeigegeraet, also Maus oder Trackpad. Auf diesen Geraeten gibt es das Zoomverhalten nicht, und dort steht das Feld auf Textgroesse wie alles andere. Ein iPad mit angeschlossenem Trackpad faellt in diese Gruppe und wuerde bei Fingertipp doch zoomen -- ein Rand, den wir in Kauf nehmen; die Alternative waere 'maximum-scale=1' im Viewport, und das nimmt jedem das Aufziehen mit zwei Fingern (WCAG 1.4.4). */ @media (pointer: fine) { :root { --fs-feld: var(--fs-text); } /* 14px */ }