/** * Messebau-Leadnetzwerk — Design Tokens * Autor: Maik Haring / maikharing.com * Version: 1.0.0 * Datei: tokens_v1.0.css * * Einzige Quelle der Wahrheit für Farbe, Typografie, Raster, Radien, Schatten. * Kein Hex-Wert und keine px-Größe außerhalb dieser Datei — weder im Theme, * noch in Plugin-Assets, noch in SiteOrigin-Widget-Styles. */ :root { /* ================================================================== FARBE — hergeleitet aus der Werkstoffwelt des Messebaus: Hallenboden, Petrol der Messeteppiche, Zinkgelb der Aufbau- markierungen, Aluminium der Traversen. ================================================================== */ /* Basis / Ink */ --mb-ink: #101A22; /* Hallenboden — Text, Header, Footer */ --mb-ink-80: #33414B; --mb-ink-60: #5B676E; --mb-ink-40: #8D979C; /* Marke — Petrol */ --mb-petrol-900: #06333B; --mb-petrol-700: #0B4E5A; /* Primärfarbe der Marke */ --mb-petrol-500: #0E6B7A; --mb-petrol-300: #79B4BE; --mb-petrol-100: #DCEDEF; --mb-petrol-050: #F0F7F8; /* Signal — Zinkgelb (Aufbaumarkierung). Ausschließlich für Aktionen. */ --mb-zink: #F2C230; --mb-zink-hover: #DFAF1B; --mb-zink-100: #FDF3D4; /* Status */ --mb-freigabe: #1F8A5B; /* freigegeben, verfügbar, geprüft */ --mb-freigabe-100: #DFF2E8; --mb-frist: #C2410C; /* Frist, Kapazität knapp */ --mb-frist-100: #FBE7DD; --mb-fehler: #A81E1E; --mb-fehler-100: #FAE3E3; /* Flächen — Aluminium/Beton, bewusst kühl (kein Creme) */ --mb-flaeche: #FFFFFF; --mb-flaeche-alt: #F5F7F7; /* Seitenhintergrund */ --mb-flaeche-tief: #E8ECEC; /* Karten auf hellem Grund */ --mb-linie: #D5DBDC; --mb-linie-stark: #B6BFC1; --mb-raster: rgba(11, 78, 90, 0.07); /* Hallenraster-Linien */ /* ================================================================== TYPOGRAFIE Archivo — Display. Signage-Grotesk, Wegeleitsystem-Herkunft. IBM Plex Sans— Text. Technisch-humanistisch, sehr gut in Deutsch. IBM Plex Mono— Daten. Standnummern, Preise, Maße, Kennziffern. Alle drei SIL OFL, lokal gehostet (DSGVO — kein Google-Fonts-CDN). ================================================================== */ --mb-font-display: 'Archivo', 'Archivo SemiExpanded', 'Helvetica Neue', Arial, sans-serif; --mb-font-text: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mb-font-daten: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Skala — fluid, Basis 17px, Verhältnis ca. 1,26 */ --mb-text-2xs: 0.6875rem; /* 11px Label */ --mb-text-xs: 0.8125rem; /* 13px Meta */ --mb-text-sm: 0.9375rem; /* 15px sekundär */ --mb-text-base: 1.0625rem; /* 17px Fließtext */ --mb-text-lg: 1.25rem; --mb-text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --mb-text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); --mb-text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); --mb-text-4xl: clamp(2.75rem, 1.8rem + 4.5vw, 5rem); /* nur Hero */ --mb-lh-tight: 1.05; /* Display */ --mb-lh-snug: 1.25; /* Zwischenüberschriften */ --mb-lh-normal: 1.6; /* Fließtext */ --mb-lh-relaxed: 1.75; /* lange Ratgebertexte */ --mb-ls-display: -0.02em; --mb-ls-label: 0.09em; /* Versal-Labels */ --mb-ls-normal: 0em; --mb-fw-regular: 400; --mb-fw-medium: 500; --mb-fw-semibold: 600; --mb-fw-bold: 700; /* ================================================================== RASTER — „Hallenraster". Basiseinheit 8px, Modul 48px. Das Modul ist im Layout sichtbar (siehe --mb-raster) und die Signatur des gesamten Designs. ================================================================== */ --mb-unit: 8px; --mb-modul: 48px; --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-text: 68ch; /* Lesebreite Fließtext */ --mb-breite-inhalt: 1200px; /* Standardcontainer */ --mb-breite-weit: 1440px; /* Hero, Tabellen, Dashboards */ --mb-gutter: var(--mb-space-5); /* ================================================================== FORM — technisch, kleine Radien. Gebaute Dinge haben Kanten. ================================================================== */ --mb-radius-0: 0px; --mb-radius-1: 2px; /* Standard: Karten, Inputs, Buttons */ --mb-radius-2: 4px; /* Modale, große Flächen */ --mb-radius-pill: 999px;/* ausschließlich Status-Tags */ --mb-border: 1px solid var(--mb-linie); --mb-border-stark: 1px solid var(--mb-linie-stark); --mb-border-marke: 2px solid var(--mb-petrol-700); /* Schatten sparsam: Es ist ein Bauprodukt, kein Glaskasten. */ --mb-schatten-1: 0 1px 2px rgba(16, 26, 34, 0.06); --mb-schatten-2: 0 2px 8px rgba(16, 26, 34, 0.08); --mb-schatten-3: 0 8px 28px rgba(16, 26, 34, 0.12); /* ================================================================== BEWEGUNG — kurz, funktional, ohne Show. ================================================================== */ --mb-dauer-schnell: 120ms; --mb-dauer-normal: 200ms; --mb-dauer-ruhig: 360ms; --mb-easing: cubic-bezier(0.2, 0, 0.1, 1); /* Fokus — immer sichtbar, nie entfernt */ --mb-fokus: 0 0 0 2px var(--mb-flaeche), 0 0 0 4px var(--mb-petrol-500); --mb-z-dropdown: 100; --mb-z-sticky: 200; --mb-z-overlay: 300; --mb-z-modal: 400; --mb-z-toast: 500; } /* ==================================================================== DUNKLE OBERFLÄCHEN (Header, Footer, Anbieter-Dashboard) Über Klasse gesteuert, nicht über prefers-color-scheme — die öffentlichen Seiten bleiben bewusst hell. ==================================================================== */ .mb-dunkel { --mb-ink: #F2F5F5; --mb-ink-80: #C6CFD1; --mb-ink-60: #93A0A4; --mb-flaeche: #0C161C; --mb-flaeche-alt: #101A22; --mb-flaeche-tief: #17242C; --mb-linie: #24343D; --mb-linie-stark: #33454F; --mb-petrol-100: #123C45; --mb-raster: rgba(121, 180, 190, 0.10); --mb-fokus: 0 0 0 2px var(--mb-flaeche), 0 0 0 4px var(--mb-zink); } /* ==================================================================== SIGNATUR: Hallenraster Wird auf Hero, Rechner und Wizard-Hintergründe gelegt. Das Modul entspricht exakt --mb-modul, damit Raster und Layout deckungsgleich laufen. Das ist der Grund, warum das Design als „gebaut" wirkt. ==================================================================== */ .mb-raster { background-image: linear-gradient(to right, var(--mb-raster) 1px, transparent 1px), linear-gradient(to bottom, var(--mb-raster) 1px, transparent 1px); background-size: var(--mb-modul) var(--mb-modul); background-position: center top; } /* ==================================================================== SCHRIFT-EINBINDUNG (lokal, kein CDN) Dateien unter /wp-content/themes/mb-theme/assets/fonts/ ==================================================================== */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-variable.woff2') format('woff2-variations'); font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } /* ==================================================================== BASIS ==================================================================== */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--mb-font-text); font-size: var(--mb-text-base); line-height: var(--mb-lh-normal); color: var(--mb-ink); background: var(--mb-flaeche-alt); -webkit-font-smoothing: antialiased; } h1, h2, h3, .mb-display { font-family: var(--mb-font-display); font-weight: var(--mb-fw-semibold); line-height: var(--mb-lh-tight); letter-spacing: var(--mb-ls-display); font-stretch: 112%; /* leicht expandiert — Signage-Charakter */ text-wrap: balance; } h1 { font-size: var(--mb-text-3xl); } h2 { font-size: var(--mb-text-2xl); } h3 { font-size: var(--mb-text-xl); line-height: var(--mb-lh-snug); } /* Zahlen, Maße, Standnummern immer im Datensatz-Font mit Tabellenziffern */ .mb-daten, td.mb-zahl, .mb-preis, .mb-standnummer { font-family: var(--mb-font-daten); font-weight: var(--mb-fw-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Eyebrow-Label in Standnummern-Notation (A1 · Anfrage) */ .mb-label { font-family: var(--mb-font-daten); font-size: var(--mb-text-2xs); letter-spacing: var(--mb-ls-label); text-transform: uppercase; color: var(--mb-ink-60); } :focus-visible { outline: none; box-shadow: var(--mb-fokus); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ==================================================================== PRODUKTAKZENTE (Markenfamilie v2.0) Eine Klasse je Produktdomain am -Element. Steuert Kopfzeile, aktive Navigation und Fußzeile — nicht die Statusfarben. Dokumentation: design/markenfamilie_v2.0.md ==================================================================== */ :root { --mb-produkt: var(--mb-petrol-700); --mb-produkt-typo: #0B4E5A; } .mb-p-anbieter { --mb-produkt: #F2C230; --mb-produkt-typo: #8A6B00; } .mb-p-finder { --mb-produkt: #0E9AA7; --mb-produkt-typo: #0A6E78; } .mb-p-firmen { --mb-produkt: #1F8A5B; --mb-produkt-typo: #166647; } .mb-p-partner { --mb-produkt: #6A4BC9; --mb-produkt-typo: #5539B0; } .mb-p-match { --mb-produkt: #D6453B; --mb-produkt-typo: #B0342C; }