/** * messebau netzwerk — Design Tokens * Autor: Maik Haring / maikharing.com * Version: 2.0.0 * Datei: tokens_v2.0.css * Quelle: design/marke/styleguide_v1.0.md * * Einzige Quelle der Wahrheit für Farbe, Typografie, Raster, Radien. * Kein Hex-Wert und keine px-Größe außerhalb dieser Datei. * * Diese Fassung setzt den Styleguide um und löst tokens_v1.0.css ab. Die * frühere Palette (Petrol, Zinkgelb) gilt nicht mehr. Zwei Dinge sind * grundsätzlich anders: * * 1. Die Grundfarbe Messeblau ist in ALLEN fünf Marken identisch. Die * Portalfarbe kommt zusätzlich, nie stattdessen (Styleguide 12.1). * 2. Gesteuert wird über `data-portal` am -Element, nicht über eine * Klasse. Komponenten greifen ausschließlich auf `--mb-portal` zu, nie * auf einen festen Portal-Hex — so läuft dieselbe Codebasis auf allen * Portalen (Styleguide 3.6). * * Am Ende der Datei stehen Aliase auf die alten Tokennamen. Sie halten die * bestehenden Stylesheets am Leben und zeigen dabei auf die neuen Werte; * neuer Code benutzt sie nicht. */ :root { /* ================================================================== FARBE — Styleguide 3 ================================================================== */ /* Grundfarbe. In allen fünf Marken identisch. */ --mb-messeblau: #16324F; --mb-nachtblau: #0B2032; /* Projektakzente. Gehören dem Netzwerk, nicht einem Portal. */ --mb-bernstein: #E2A03C; /* Fläche, nie Text auf Weiß (1,9 : 1) */ --mb-aluminium: #DCE3E8; --mb-graphit: #5D6E7B; --mb-linie: #C6D0D8; --mb-papier: #F4F6F7; --mb-weiss: #FFFFFF; /* Auf Nachtblau. Styleguide 6.7 nennt beide Werte; sie stehen hier, weil sie auch ausserhalb des dunklen Modus gebraucht werden — eine einzelne Nachtblau-Flaeche (`.s-nacht`) dreht nicht die ganze Seite um. */ --mb-text-invers-sekundaer: #B9C6D1; /* 9,5 : 1 auf Nachtblau */ --mb-linie-invers: #2A4A68; /* Zwei Abstufungen fuer die Tabelle auf dunklem Grund. Der Styleguide nennt sie nicht — er regelt die Tabelle nur hell. Sie stehen trotzdem hier und nicht in der Komponente, damit die Regel „kein Hex ausserhalb dieser Datei" haelt und die Abweichung an einer Stelle sichtbar ist. */ --mb-flaeche-invers-kopf: #04121E; /* dunkler als Nachtblau */ --mb-flaeche-invers-zebra: #12395A; /* heller als Messeblau */ /* Status. Bewusst außerhalb der Markenpalette, damit eine Meldung nie mit einer Portalfarbe verwechselt wird (Styleguide 3.5). */ --mb-erfolg: #1F7A4D; --mb-erfolg-flaeche: #E7F2EC; --mb-warnung: #B7791F; --mb-warnung-flaeche: #FBF0DC; --mb-fehler: #B3261E; --mb-fehler-flaeche: #FBEAE8; --mb-info: #2E5C7E; --mb-info-flaeche: #E8EFF5; /* Portalfarbe. Vorgabe ist die Dachmarke: kein Zweitton, alles Messeblau. Wird je Portal überschrieben. */ --mb-portal: var(--mb-messeblau); --mb-portal-invers: var(--mb-weiss); /* ================================================================== TYPOGRAFIE — Styleguide 4 Archivo für Überschriften, Inter für alles andere. Kein Monospace: Zahlen laufen in Inter mit Tabellenziffern. Beide lokal gehostet (DSGVO — kein Google-Fonts-CDN). ================================================================== */ --mb-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --mb-font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Web-Skala, Basis 16 px. Werte als rem, Zeilenhöhe einheitenlos. */ --mb-text-display: 3.5rem; /* 56 px */ --mb-text-h1: 2.5rem; /* 40 */ --mb-text-h2: 1.875rem; /* 30 */ --mb-text-h3: 1.375rem; /* 22 */ --mb-text-h4: 1.125rem; /* 18 */ --mb-text-lead: 1.1875rem; /* 19 */ --mb-text-body: 1rem; /* 16 */ --mb-text-klein: 0.875rem; /* 14 */ --mb-text-label: 0.8125rem; /* 13 */ --mb-text-button: 0.9375rem; /* 15 */ --mb-lh-display: 1.071; /* 60/56 */ --mb-lh-h1: 1.125; /* 45/40 */ --mb-lh-h2: 1.2; /* 36/30 */ --mb-lh-h3: 1.318; /* 29/22 */ --mb-lh-h4: 1.389; /* 25/18 */ --mb-lh-lead: 1.579; /* 30/19 */ --mb-lh-body: 1.625; /* 26/16 */ --mb-lh-klein: 1.571; /* 22/14 */ --mb-lh-label: 1.462; /* 19/13 */ --mb-ls-display: -0.02em; --mb-ls-h1: -0.018em; --mb-ls-h2: -0.015em; --mb-ls-h3: -0.01em; --mb-ls-normal: 0em; --mb-fw-regular: 400; --mb-fw-medium: 500; --mb-fw-display: 650; /* Archivo, Display bis H2 */ --mb-fw-h3: 500; /* Archivo, H3 und H4 */ /* ================================================================== RASTER UND ABSTAND — Styleguide 5.1 und 5.2 Basiswert 8 px. Erlaubt sind ausschließlich diese zehn Werte. ================================================================== */ --mb-space-1: 4px; --mb-space-2: 8px; --mb-space-3: 12px; --mb-space-4: 16px; --mb-space-5: 24px; --mb-space-6: 32px; --mb-space-7: 48px; --mb-space-8: 64px; --mb-space-9: 96px; --mb-space-10: 128px; --mb-breite-inhalt: 1200px; --mb-breite-text: 75ch; /* Styleguide 4.4: höchstens 75 Zeichen */ --mb-gutter: var(--mb-space-5); --mb-innenabstand: var(--mb-space-5); /* ab 768 px auf 32 px */ --mb-abschnitt: var(--mb-space-9); /* mobil 64 px */ /* ================================================================== FORM — Styleguide 5.3 Das Signet hat scharfe Ecken. Das setzt sich in der Oberfläche fort: Flächen 0, Bedienelemente 2 px, im ganzen Projekt höchstens 4 px. ================================================================== */ --mb-radius-0: 0px; --mb-radius-1: 2px; --mb-radius-2: 4px; --mb-border: 1px solid var(--mb-linie); /* Nur für Ebenen, die wirklich über dem Inhalt liegen. Karten bekommen eine Linie, keinen Schatten. */ --mb-schatten-ebene: 0 8px 24px rgba(11, 32, 50, 0.14); /* ================================================================== BEWEGUNG — Styleguide 5.4 ================================================================== */ --mb-dauer-zustand: 150ms; --mb-dauer-blende: 250ms; --mb-easing: cubic-bezier(.2, 0, .2, 1); /* Fokus: 2 px Bernstein, 2 px Abstand. Nie `outline: none`. */ --mb-fokus-farbe: var(--mb-bernstein); --mb-fokus-breite: 2px; --mb-fokus-abstand: 2px; --mb-z-dropdown: 100; --mb-z-sticky: 200; --mb-z-overlay: 300; --mb-z-modal: 400; --mb-z-toast: 500; } /* ==================================================================== PORTALE — Styleguide 3.2 und 3.6 Das Attribut sitzt auf . Die Dachmarke führt keine Zweitfarbe und braucht deshalb keinen eigenen Block. ==================================================================== */ [data-portal="anbieter"] { --mb-portal: #C7522A; --mb-portal-invers: #E0A08A; } [data-portal="finder"] { --mb-portal: #0F7F8F; --mb-portal-invers: #7BB9C1; } [data-portal="firmen"] { --mb-portal: #3F7A3A; --mb-portal-invers: #95B693; } [data-portal="partner"] { --mb-portal: #A03A63; --mb-portal-invers: #CB93A9; } /* ==================================================================== DUNKLER MODUS — Styleguide 6.7 Flächen Nachtblau, Karten Messeblau, Portalfarben durch die Invers-Fassung ersetzt. Über Attribut, damit einzelne Abschnitte (Footer, Portalwechsler) dunkel sein können, ohne die Seite zu drehen. ==================================================================== */ [data-modus="dunkel"] { --mb-flaeche: var(--mb-nachtblau); --mb-flaeche-karte: var(--mb-messeblau); --mb-text: var(--mb-weiss); --mb-text-sekundaer: var(--mb-text-invers-sekundaer); --mb-linie: var(--mb-linie-invers); --mb-portal: var(--mb-portal-invers); } /* Helle Vorgabe. Steht nach dem dunklen Block, damit `:root` beides kennt und `[data-modus="dunkel"]` durch höhere Spezifität gewinnt. */ :root { --mb-flaeche: var(--mb-weiss); --mb-flaeche-karte: var(--mb-weiss); --mb-flaeche-seite: var(--mb-papier); --mb-text: var(--mb-messeblau); --mb-text-sekundaer: var(--mb-graphit); } [data-modus="dunkel"] { --mb-flaeche-seite: var(--mb-nachtblau); } /* ==================================================================== SCHRIFT — lokal, kein CDN Archivo variabel (450/500/650), Inter variabel (400–600). Subsets latin und latin-ext, `font-display: swap`. ==================================================================== */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-variable.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-variable-latin.woff2') format('woff2-variations'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-variable-latin-ext.woff2') format('woff2-variations'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ==================================================================== ALIASE AUF DIE ALTEN TOKENNAMEN Sie halten die bestehenden Stylesheets am Leben und zeigen auf die neuen Werte. Neuer Code benutzt sie nicht; sie verschwinden, sobald die letzte Datei umgestellt ist. ==================================================================== */ :root { --mb-ink: var(--mb-messeblau); --mb-ink-80: var(--mb-graphit); --mb-ink-60: var(--mb-graphit); --mb-ink-40: #9AA8B2; --mb-petrol-900: var(--mb-nachtblau); --mb-petrol-700: var(--mb-messeblau); --mb-petrol-500: var(--mb-messeblau); --mb-petrol-300: var(--mb-linie); --mb-petrol-100: var(--mb-aluminium); --mb-petrol-050: var(--mb-papier); /* Zinkgelb war die Aktionsfarbe. Der Styleguide kennt sie nicht mehr: Der primäre Knopf trägt die Portalfarbe, Bernstein ist der Signalton und ausdrücklich keine Textfarbe auf Weiß. */ --mb-zink: var(--mb-bernstein); --mb-zink-hover: #C9882A; --mb-zink-100: var(--mb-warnung-flaeche); --mb-freigabe: var(--mb-erfolg); --mb-freigabe-100: var(--mb-erfolg-flaeche); --mb-frist: var(--mb-warnung); --mb-frist-100: var(--mb-warnung-flaeche); --mb-fehler-100: var(--mb-fehler-flaeche); --mb-flaeche-alt: var(--mb-flaeche-seite); --mb-flaeche-tief: var(--mb-aluminium); --mb-linie-stark: var(--mb-graphit); --mb-raster: rgba(22, 50, 79, 0.06); --mb-font-daten: var(--mb-font-text); --mb-text-2xs: var(--mb-text-label); --mb-text-xs: var(--mb-text-label); --mb-text-sm: var(--mb-text-klein); --mb-text-base: var(--mb-text-body); --mb-text-lg: var(--mb-text-lead); --mb-text-xl: var(--mb-text-h3); --mb-text-2xl: var(--mb-text-h2); --mb-text-3xl: var(--mb-text-h1); --mb-text-4xl: var(--mb-text-display); --mb-lh-tight: var(--mb-lh-h1); --mb-lh-snug: var(--mb-lh-h3); --mb-lh-normal: var(--mb-lh-body); --mb-lh-relaxed: 1.75; --mb-ls-label: 0.06em; --mb-fw-bold: var(--mb-fw-display); --mb-fw-semibold: var(--mb-fw-medium); --mb-unit: 8px; --mb-modul: 48px; --mb-breite-weit: 1440px; --mb-radius-pill: var(--mb-radius-1); /* Styleguide 5.3: max 4 px */ --mb-border-stark: 1px solid var(--mb-graphit); --mb-border-marke: 2px solid var(--mb-portal); --mb-schatten-1: none; /* Karten tragen Linien */ --mb-schatten-2: none; --mb-schatten-3: var(--mb-schatten-ebene); --mb-dauer-schnell: var(--mb-dauer-zustand); --mb-dauer-normal: var(--mb-dauer-blende); --mb-dauer-ruhig: var(--mb-dauer-blende); --mb-fokus: 0 0 0 var(--mb-fokus-abstand) var(--mb-flaeche), 0 0 0 calc(var(--mb-fokus-abstand) + var(--mb-fokus-breite)) var(--mb-fokus-farbe); --mb-produkt: var(--mb-portal); --mb-produkt-typo: var(--mb-portal); } /* ==================================================================== BASIS — Styleguide 4.2 und 4.4 Ueberschriften ohne Schlusspunkt, in Satzschreibung, nicht in Title Case. Kein Blocksatz, kein Sperren, keine Versalsaetze — auch Beschriftungen werden gemischt geschrieben. ==================================================================== */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--mb-font-text); font-size: var(--mb-text-body); line-height: var(--mb-lh-body); color: var(--mb-text); background: var(--mb-flaeche-seite); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .mb-display { font-family: var(--mb-font-display); text-wrap: balance; margin-block-start: 0; } .mb-display { font-size: var(--mb-text-display); line-height: var(--mb-lh-display); letter-spacing: var(--mb-ls-display); font-weight: var(--mb-fw-display); } h1 { font-size: var(--mb-text-h1); line-height: var(--mb-lh-h1); letter-spacing: var(--mb-ls-h1); font-weight: var(--mb-fw-display); } h2 { font-size: var(--mb-text-h2); line-height: var(--mb-lh-h2); letter-spacing: var(--mb-ls-h2); font-weight: var(--mb-fw-display); } h3 { font-size: var(--mb-text-h3); line-height: var(--mb-lh-h3); letter-spacing: var(--mb-ls-h3); font-weight: var(--mb-fw-h3); } h4 { font-size: var(--mb-text-h4); line-height: var(--mb-lh-h4); letter-spacing: var(--mb-ls-normal); font-weight: var(--mb-fw-h3); } /* Mobil: Display 36, H1 30, H2 24, H3 20. Alles andere bleibt. */ @media (max-width: 767px) { .mb-display { font-size: 2.25rem; } h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } } .mb-lead { font-size: var(--mb-text-lead); line-height: var(--mb-lh-lead); } /* * Zahlen: Inter mit Tabellenziffern statt einer eigenen Monospace. * Der Styleguide kennt nur zwei Familien; eine dritte waere ein * Fremdkoerper und ein weiterer Ladevorgang. */ .mb-daten, td.mb-zahl, th.mb-zahl, .mb-preis, .mb-standnummer { font-family: var(--mb-font-text); font-weight: var(--mb-fw-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--mb-ls-normal); } /* Beschriftung: gemischt geschrieben, nicht in Grossbuchstaben. */ .mb-label { font-family: var(--mb-font-text); font-size: var(--mb-text-label); line-height: var(--mb-lh-label); letter-spacing: var(--mb-ls-normal); text-transform: none; color: var(--mb-text-sekundaer); } /* Auszeichnung im Text: Schriftschnitt 500, nicht kursiv, nicht farbig. */ strong, b { font-weight: var(--mb-fw-medium); } em { font-style: normal; font-weight: var(--mb-fw-medium); } /* Fokus ist immer sichtbar: 2 px Bernstein, 2 px Abstand. Nie entfernt. */ :focus-visible { outline: var(--mb-fokus-breite) solid var(--mb-fokus-farbe); outline-offset: var(--mb-fokus-abstand); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }