/* ============================================================= Zülfi’s — Design-Tokens Quelle: Weihnachtsfeier/assets/css/style.css (Markenfarben, Schriften). Ergänzt um helle Rollen für Hauptseite und Catering. Farbrollen werden über [data-site] am umgeschaltet: data-site="main" hell (Imbiss) data-site="catering" hell (Foodtruck-Catering) data-site="xmas" dunkel (Saisonkampagne, unverändert) ============================================================= */ :root{ /* ---------- Marke: unverändert aus der Weihnachts-Site ---------- */ --navy:#142F4E; --navy-deep:#0E2340; --blue-900:#0E2340; /* Alias für Sektionen, die dunkelblau tragen */ --navy-soft:#1B3C63; --orange:#EF7D00; --orange-hi:#FF9526; /* Orange als SCHRIFT auf hellem Grund. #EF7D00 misst auf Weiß 2,76:1, auf Creme 2,37:1 — beides weit unter den 4,5:1, die AA für Fließtextgröße verlangt, und unter den 3:1 für große Schrift. Die Überzeilen, die Etiketten und die Sternebewertung standen trotzdem darin. #A35500 hält den Farbton (31°) und die volle Sättigung und kommt auf 5,45:1 (Weiß), 5,10 (Papier), 4,67 (Creme), 4,52 (Curry hell). Als FLÄCHE bleibt #EF7D00 unverändert — dort trägt Navy die Schrift. */ --orange-text:#A35500; --gold:#FFCC00; --cream:#FFF7EF; /* ---------- Appetit-Palette (Redesign 11/2026) ---------- Curry-Gelb trägt ganze Sektionen. Text darauf ausschließlich in Navy (7,83:1) — Ink-700 erreicht dort nur 4,34:1 und ist nicht zugelassen. Ketchup-Rot ist der eine „Sauce-Moment" pro Seite: als Text auf Paper 5,51:1, als Fläche mit weißer Schrift 5,88:1. Senf-Creme dient als ruhiger Sektionswechsel, Navy darauf 11,27:1. */ /* War #FFB800. Auf Imbiss und Catering soll es nur eine Akzentfarbe geben, das Orange der Knöpfe — Gelb kam sonst nirgends vor. Die Weihnachts-Site bildet --curry-500 in xmas-bruecke.css auf ihr Gold ab und bleibt davon unberührt. */ --curry-500:var(--accent); --curry-600:#E8A400; /* Hover und Linien, NICHT für Text */ /* Satter Curry-Ton für Text auf hellem Grund. Gemessen gegen alle vier hellen Flächen: Paper-50 5,41:1 · Weiß 5,78:1 · Paper-100 4,96:1 · Senf-Creme 4,80:1. Der Vorgänger #A45804 fiel auf Senf-Creme auf 4,38:1 und damit unter AA — von axe gefunden. Curry-500 erreicht als Schrift nur 1,62:1 und bleibt reine Fläche. */ /* War #9B5303, ein dunkles Braunorange, eingeführt weil das helle Orange als Schrift auf hellem Grund nur 2,37:1 bis 2,76:1 erreicht. Auf Wunsch des Kunden trägt das Projekt jetzt überall dieselbe Akzentfarbe wie die Knöpfe. Damit liegen Überzeilen, Zahlen und Textlinks unter den 4,5:1, die WCAG AA verlangt. Bewusste Entscheidung; ein Zurück ist diese Zeile. */ /* Als Schriftfarbe gedacht (Etiketten, Sternebewertung, Akzentwörter auf hellem Grund) und deshalb auf das lesbare Orange gelegt. Als Alias auf --accent kam es auf 2,37:1. */ --curry-700:var(--accent-text, var(--orange-text)); --ketchup-600:#C8102E; --senf-100:#F7E9C6; --on-curry:#142F4E; /* nur Navy, siehe oben */ --on-ketchup:#FFFFFF; /* ---------- Helle Flächen (neu, für Site A und B) ---------- */ --paper-50:#FAF7F2; --paper-100:#F2EDE4; --white:#FFFFFF; --ink-700:#4A5568; /* Sekundärtext auf hell, 7,04:1 auf Paper */ --line-light:rgba(20,47,78,.14); --line-dark:rgba(255,247,239,.14); /* ---------- Schriften: identisch zur Weihnachts-Site ---------- */ --font-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-head:'Lexend','Instrument Sans',system-ui,sans-serif; --font-display:'Playfair Display','Playfair Ersatz',Georgia,'Times New Roman',serif; --font-script:'Snell Roundhand','Allura','Segoe Script','Brush Script MT',cursive; /* ---------- Typo-Skala, fluid ---------- */ --fs-xs:.82rem; --fs-sm:.92rem; --fs-base:clamp(1rem,.97rem + .15vw,1.08rem); --fs-lead:clamp(1.08rem,1rem + .4vw,1.25rem); --fs-h3:clamp(1.15rem,1.05rem + .5vw,1.4rem); --fs-h2:clamp(1.75rem,1.3rem + 2.2vw,2.9rem); --fs-h1:clamp(2.1rem,1.5rem + 3vw,3.6rem); --fs-display:clamp(2.4rem,1.6rem + 4vw,4.6rem); /* Der typografische Riesen-Moment: mobil ab 64 px, Desktop bis 220 px. */ --fs-riese:clamp(4rem,2rem + 9.5vw,13.75rem); /* Ebene 1, Display. Playfair Display 800 trägt alles Emotionale: den Hero-Claim und die großen Sektions-Überschriften. Die großen H2 standen vorher auf 91,8 px bei 1440 px — fast so groß wie die H1 mit 99,2 px. Zwei Größen, die sich um 7 px unterscheiden, bilden keine Hierarchie, sie konkurrieren. Jetzt liegt die H1 bei 104 px und die große H2 bei 64 px; dazwischen liegt ein Verhältnis, das man sieht. */ --fs-held-rampe:1.8rem + 4.85vw; /* 360 → 46, 390 → 48, 1440 → 99 */ --fs-held:clamp(2.75rem,var(--fs-held-rampe),6.5rem); /* Große H2. Standen bei 32 → 64 px und wirkten neben einer H1 von 93 px zu brav — auf einer ganzflächig orangen Sektion besonders. Jetzt 38 → 76 px. 88 px wären auch gegangen, aber dann stünden H1 und H2 bei 93 und 88 px fast gleichauf, und die Rangfolge der Überschriften löst sich auf. 76 px sind ein Fünftel kleiner als die H1 — das liest man als Stufe und nicht als Versehen. */ --fs-gross:clamp(2.35rem,1.3rem + 4.4vw,4.75rem); /* große H2: 38 → 76 px */ /* Eine Serife wirkt bei gleichem Grad kleiner und braucht weniger Enge als die Groteske: Lexend lief hier auf -.035em, das zerquetscht Playfair. Zeilenabstand knapp über 1, damit die Versalien Luft behalten und Satzzeichen nicht in die Oberlängen der nächsten Zeile ragen. */ --lh-display:1.02; --ls-display:-.015em; --lh-tight:1.1; --lh-head:1.18; --lh-text:1.6; --ls-head:-.02em; /* ---------- Raster und Abstände ---------- */ --shell:1240px; /* Seitenrand. Die Untergrenze lag bei 20 px; auf dem Handy stand der Text damit dichter am Rand als an der nächsten Zeile. 24 px ist die Grenze, ab der eine Spalte nicht mehr am Displayrand klebt. */ --gutter:clamp(1.5rem,5vw,2.5rem); /* ---------- Abstands-Skala ---------- Drei Stufen statt einer. Die Rampen sind so gelegt, dass sie die Zielwerte an den drei Breiten treffen, an denen gemessen wird: Stufe 390 px 768 px 1440 px klein 80 97 128 mittel 96 119 160 groß 112 150 200 Vorher gab es nur --section-y mit 64 px mobil und 130 px am Desktop. Mobil war das zu wenig: Die Sektionen stießen aneinander, und die Seite wirkte gedrängt statt ruhig. */ --luft-s:clamp(5rem,3.89rem + 4.57vw,8rem); --luft-m:clamp(6rem,4.5rem + 6.1vw,10rem); --luft-l:clamp(7rem,4.95rem + 8.38vw,12.5rem); /* Bleibt als Name bestehen, zeigt jetzt auf die mittlere Stufe. */ --section-y:var(--luft-m); /* Abstände innerhalb einer Sektion. */ --luft-ueber-h2:clamp(1rem,.9rem + .3vw,1.25rem); /* 16 → 20 px */ --luft-h2-lead:clamp(1.5rem,1.3rem + .55vw,2rem); /* 24 → 32 px */ --luft-lead-inhalt:clamp(2rem,1.4rem + 1.7vw,4rem); /* 32 → 64 px */ --nav-h:78px; --logo-h:50px; --radius:14px; --radius-lg:22px; --radius-pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --shadow-card:0 18px 40px -28px rgba(20,47,78,.5); --shadow-float:0 18px 38px -16px rgba(0,0,0,.45); } /* ---------- Rollen: helle Sites (Standard) ---------- */ :root, [data-site="main"], [data-site="catering"]{ --bg:var(--paper-50); --surface:var(--white); --surface-alt:var(--paper-100); --text:var(--navy); /* 12,71:1 auf Paper */ --text-muted:var(--ink-700); /* 7,04:1 auf Paper */ --line:var(--line-light); --brand:var(--navy); --accent:var(--orange); /* ENTSCHEIDUNG DES KUNDEN, 6. November 2026. Chris hat sich nach Vorlage der Messwerte für das Markenorange entschieden — an den Überzeilen und als weiße Schrift auf den orangen Flächen. Beides misst 2,76:1 und liegt damit unter den 4,5:1, die WCAG AA für Fließtextgröße verlangt; weiße Schrift verfehlt auch die gelockerten 3:1 für große Schrift. Die Alternativen lagen auf dem Tisch und sind abgelehnt worden: · #B65F00 als Fläche — weiße Schrift käme auf 4,54:1 · #A35500 als Schriftfarbe — 5,45:1 auf Weiß · Navy auf oranger Fläche — 4,92:1 Rechtlich dürfte der Betrieb als Kleinstunternehmen vom Barrierefreiheitsstärkungsgesetz ausgenommen sein. Die bewusst in Kauf genommenen Stellen sind in tools/axe-pruefung.mjs einzeln aufgeführt, damit die Prüfung sie nicht stillschweigend durchwinkt. --orange-text bleibt stehen, falls die Entscheidung einmal anders ausfällt. */ --on-accent:#fff; --accent-text:var(--orange); } /* ---------- Rollen: Saisonkampagne, dunkel ---------- */ [data-site="xmas"]{ --bg:var(--navy); --surface:var(--navy-soft); --surface-alt:var(--navy-deep); --text:var(--cream); --text-muted:rgba(255,247,239,.74); --line:var(--line-dark); --brand:var(--orange); --accent:var(--orange); --on-accent:#fff; /* Kampagnenvorgabe, 2,76:1 — bewusste Abweichung */ /* Auf dunklem Grund trägt das helle Orange sehr wohl Schrift: 4,92:1 gegen Navy. Hier zeigt --accent-text deshalb auf dieselbe Farbe. */ --accent-text:var(--orange); } @media (prefers-reduced-motion:reduce){ :root{ --ease:linear; } }