/* ========================================================================= PIZZAHEROS MASSERBERG — DESIGN-TOKENS Einzige Quelle für Farben, Schriftgrößen, Abstände und Bewegung. Wer hier etwas ändert, ändert es auf der ganzen Seite. Bitte KEINE festen Farbwerte oder Pixelgrößen in style.css schreiben. ========================================================================= */ /* ------------------------------------------------------------------------- 1 · SCHRIFTEN (lokal eingebunden, keine externen Aufrufe) Alle Dateien liegen in assets/fonts/ und sind auf die im Deutschen benötigten Zeichen reduziert, damit die Seite schnell lädt. ------------------------------------------------------------------------- */ /* Display: Wanderschild-Charakter, schmallaufend — nur für große Überschriften */ @font-face { font-family: 'Big Shoulders Display'; src: url('../fonts/bigshoulders-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* Fließtext: auf maximale Lesbarkeit gebaut — draußen, am Handy, bei Regen */ @font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Utility: Uhrzeiten, Entfernungen, Kurzlabels — gleiche Ziffernbreite */ @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plexmono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ----------------------------------------------------------------------- 2 · FARBEN — abgeleitet aus dem Logo der Pizzaheros Alle Farbtöne stammen aus assets/img/logo-pizzaheros-256.png. Die Originalwerte des Logos sind unten als Kommentar notiert; für Text und Flächen sind sie in der Helligkeit so weit angepasst, dass die Kontrastwerte nach WCAG 2.1 eingehalten werden (Werte durchgerechnet). Originalfarben im Logo: Käsegelb #FBFF04 Krustenring #FBB72E Tomatenrot #F81501 Heldengrün #009423 Kontur #000000 Haut #FFCBB5 --------------------------------------------------------------------- */ /* Ofengrün — das Grün des Logo-Helden, so weit abgedunkelt, dass helle Schrift darauf sicher lesbar ist. Trägt Kopf, Fuß, Hero und Wegweiser. */ --c-ofen: #083012; /* Nebel darauf 12.41:1 · Weiß 14.56:1 */ --c-ofen-2: #0B3D16; /* erhöhte Fläche im Dunklen · 10.57:1 */ --c-ofen-3: #175223; /* nur Linien und Trennungen im Dunklen */ /* Teig — der helle Grund der Seite. Neutral gehalten, damit das Gelb des Logos die einzige gelbe Fläche bleibt. */ --c-teig: #EDEDE9; --c-teig-hell: #F6F6F3; /* Karten und abgesetzte Flächen */ /* Krustengold — der Ring des Logos, unverändert übernommen. Wird immer mit dunkler Schrift belegt, genau wie im Logo. */ --c-kruste: #FBB72E; /* Ofengrün darauf 8.79:1 */ /* Käsegelb — unverändert aus dem Logo. Nur als kleiner Leuchtpunkt auf dunklem Grund (14.32:1). Auf hellem Grund unbrauchbar, nie dort einsetzen. */ --c-kaese: #FBFF04; /* Tomatenrot — das Rot des Logos, abgedunkelt bis es als Fläche mit weißer Schrift UND als Textfarbe auf hellem Grund funktioniert. */ --c-tomate: #BA1708; /* Weiß darauf 6.53:1 · auf Teig 5.57:1 */ --c-tomate-tief: #A61407; /* gedrückter Zustand · Weiß 7.71:1 */ /* Moos — entsättigtes Logo-Grün für Sekundärtext und ruhige Linien */ --c-moos: #43604A; /* auf Teig 5.94:1 */ --c-weiss: #FFFFFF; /* --- Rollen: im CSS werden möglichst nur diese benutzt --- */ --c-bg: var(--c-teig); --c-surface: var(--c-teig-hell); --c-surface-dark: var(--c-ofen); --c-text: var(--c-ofen); /* 12.41:1 auf Teig */ --c-text-muted: var(--c-moos); /* 5.94:1 auf Teig */ --c-text-invert: var(--c-teig); /* 12.41:1 auf Ofengrün */ --c-text-invert-muted:var(--c-kruste); /* 8.79:1 auf Ofengrün */ --c-accent: var(--c-tomate); --c-accent-text: var(--c-tomate); --c-line: color-mix(in srgb, var(--c-ofen) 22%, transparent); --c-line-strong: var(--c-ofen); --c-line-invert: var(--c-ofen-3); --c-focus: var(--c-tomate); /* Zustandsfarben des Wegweisers (Live-Status) */ --c-state-open: var(--c-ofen); /* geöffnet — grüne Emaille */ --c-state-soon: var(--c-tomate); /* schließt bald */ --c-state-closed: #2E3B31; /* Ruhetag — stumpfe Emaille */ /* ----------------------------------------------------------------------- 3 · TYPOGRAFIE Größen wachsen stufenlos mit dem Fenster (clamp), keine harten Sprünge. --------------------------------------------------------------------- */ --ff-display: 'Big Shoulders Display', 'Haettenschweiler', 'Impact', sans-serif; --ff-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace; /* Die Schlagzeile darf auf 320 px nicht über den Rand laufen — deshalb ein deutlich flacherer Anstieg als bei den übrigen Größen. */ --fs-hero: clamp(2.5rem, 1.35rem + 6.4vw, 6.75rem); --fs-h2: clamp(2.125rem, 1.5rem + 3.1vw, 3.5rem); --fs-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem); --fs-lead: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); --fs-body: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); --fs-small: 0.9375rem; --fs-utility: 0.8125rem; --fs-micro: 0.6875rem; /* Größen des Wegweisers (Signature-Element) */ --fs-sign: clamp(1.75rem, 1.05rem + 3.4vw, 3rem); --fs-sign-sub:clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem); --fw-body: 400; --fw-bold: 700; --fw-display: 800; --lh-display: 0.9; --lh-tight: 1.15; --lh-body: 1.62; --ls-display: -0.005em; --ls-utility: 0.1em; --ls-sign: 0.02em; /* ----------------------------------------------------------------------- 4 · ABSTÄNDE — eine Leiter, keine willkürlichen Werte --------------------------------------------------------------------- */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-s: 1rem; --sp-m: 1.5rem; --sp-l: 2rem; --sp-xl: 3rem; --sp-2xl: 4rem; --sp-3xl: 6rem; /* Vertikaler Abstand zwischen den Sektionen — wächst mit dem Fenster */ --sp-section: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem); /* Seitlicher Rand */ --sp-gutter: clamp(1.125rem, 0.75rem + 1.8vw, 2.5rem); /* ----------------------------------------------------------------------- 5 · MASSE & FORM --------------------------------------------------------------------- */ --w-content: 76rem; /* maximale Breite des Inhaltsbereichs */ --w-text: 42rem; /* maximale Zeilenlänge für Fließtext */ --r-s: 3px; --r-m: 5px; --r-l: 8px; --r-pill: 999px; --bd-hair: 1px solid var(--c-line); --bd-plate: 2px solid var(--c-line-strong); --tap: 2.75rem; /* 44px — kleinste zulässige Antippfläche */ --shadow-plate: 0 1px 0 color-mix(in srgb, var(--c-ofen) 12%, transparent); --shadow-lift: 0 6px 22px -12px color-mix(in srgb, var(--c-ofen) 55%, transparent); --shadow-bar: 0 -2px 18px -8px color-mix(in srgb, var(--c-ofen) 60%, transparent); /* ----------------------------------------------------------------------- 6 · BEWEGUNG — sparsam. Wird bei "Bewegung reduzieren" abgeschaltet. --------------------------------------------------------------------- */ --mo-fast: 140ms; --mo-base: 260ms; --mo-slow: 620ms; --mo-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ----------------------------------------------------------------------- 7 · EBENEN --------------------------------------------------------------------- */ --z-reveal: 1; --z-sticky: 50; --z-header: 60; --z-callbar: 70; --z-menu: 80; --z-skip: 100; /* Die Seite ist bewusst nur in einer Helligkeit gestaltet. Damit kein Browser eigenmächtig Farben invertiert: */ color-scheme: light; }