/* ============================================================ BAUKASTEN · tokens.css — der Design-Vertrag jeder Premium-Seite ============================================================ Semantische Rollen statt seitenspezifischer Namen. Eine neue Seite wählt ein Preset (unten) oder definiert die neun Rollen selbst — basis.css und alle Szenen bauen NUR auf diesen Rollen auf. Herkunft: destilliert aus kamm2karim / salon-fa-koenig / friseur-arta / bp-garten-bau-erlebnis (Stand 05.08.2026). Die dortigen Werte sind als Presets erhalten. */ :root{ /* --- Rollen (Pflicht, je Seite gesetzt oder per Preset) --- */ --flaeche: oklch(0.17 0.005 285); /* Grundfläche der Seite */ --flaeche-tief: oklch(0.13 0.005 285); /* dunkler: Loader, Schwelle */ --flaeche-hell: oklch(0.23 0.008 285); /* Karten, Erhebungen */ --gegen: oklch(0.955 0.012 90); /* Gegenwelt (helle Kapitel) */ --gegen-tief: oklch(0.915 0.016 88); --text: var(--gegen); /* Text auf --flaeche */ --text-weich: oklch(0.72 0.01 285); /* Nebentext, Kicker */ --akzent: oklch(0.75 0.095 85); /* DIE Markenfarbe */ --akzent-hell: oklch(0.84 0.08 88); --akzent-tief: oklch(0.56 0.09 78); --linie: oklch(0.32 0.012 285); /* Trennlinien auf dunkel */ --linie-gegen: oklch(0.86 0.02 88); /* Trennlinien auf hell */ /* --- Konstanten (über alle Seiten identisch, nie anfassen) --- */ --wa: oklch(0.6 0.15 150); /* WhatsApp */ --wa-deep: oklch(0.52 0.15 150); --maxw: 1180px; --ease: cubic-bezier(.22,1,.36,1); --z-kopf: 40; --z-fortschritt: 60; --z-loader: 100; /* --- Schriften (je Seite: Paar aus baukasten/schriften/) --- */ --disp: system-ui, sans-serif; --sans: system-ui, -apple-system, sans-serif; } /* ============================================================ PRESETS — eine Klasse auf wählt die Farbwelt. Namen beschreiben die Wirkung, nicht den Kunden. ============================================================ */ /* Schwarz + Messing — edel, männlich (Herkunft: kamm2karim) */ .palette-messing{ --flaeche:oklch(0.17 0.005 285); --flaeche-tief:oklch(0.13 0.005 285); --flaeche-hell:oklch(0.23 0.008 285); --gegen:oklch(0.955 0.012 90); --gegen-tief:oklch(0.915 0.016 88); --text:var(--gegen); --text-weich:oklch(0.72 0.01 285); --akzent:oklch(0.75 0.095 85); --akzent-hell:oklch(0.84 0.08 88); --akzent-tief:oklch(0.56 0.09 78); --linie:oklch(0.32 0.012 285); --linie-gegen:oklch(0.86 0.02 88); } /* Silber + Königsblau — kühl, präzise (Herkunft: salon-fa-koenig) */ .palette-koenigsblau{ --flaeche:oklch(0.2 0.008 265); --flaeche-tief:oklch(0.15 0.008 265); --flaeche-hell:oklch(0.26 0.01 265); --gegen:oklch(0.96 0.005 250); --gegen-tief:oklch(0.92 0.008 250); --text:var(--gegen); --text-weich:oklch(0.74 0.01 260); --akzent:oklch(0.44 0.14 265); --akzent-hell:oklch(0.62 0.12 265); --akzent-tief:oklch(0.34 0.12 265); --linie:oklch(0.34 0.015 265); --linie-gegen:oklch(0.87 0.01 255); } /* Braun + Kupfer — warm, vintage (Herkunft: friseur-arta) */ .palette-kupfer{ --flaeche:oklch(0.2 0.015 60); --flaeche-tief:oklch(0.15 0.015 55); --flaeche-hell:oklch(0.26 0.018 62); --gegen:oklch(0.95 0.015 85); --gegen-tief:oklch(0.91 0.02 82); --text:var(--gegen); --text-weich:oklch(0.7 0.02 70); --akzent:oklch(0.68 0.1 48); --akzent-hell:oklch(0.78 0.09 55); --akzent-tief:oklch(0.52 0.09 45); --linie:oklch(0.33 0.02 60); --linie-gegen:oklch(0.85 0.025 80); } /* Grün + Erdbraun — Natur, Handwerk (Herkunft: bp-garten-bau) */ .palette-garten{ --flaeche:oklch(0.97 0.008 120); --flaeche-tief:oklch(0.93 0.012 120); --flaeche-hell:oklch(1 0 0); --gegen:oklch(0.2 0.02 145); --gegen-tief:oklch(0.15 0.02 145); --text:oklch(0.22 0.015 140); --text-weich:oklch(0.45 0.02 140); --akzent:oklch(0.52 0.13 150); --akzent-hell:oklch(0.68 0.12 150); --akzent-tief:oklch(0.4 0.11 150); --linie:oklch(0.85 0.02 130); --linie-gegen:oklch(0.32 0.03 145); } /* Nachtblau + Glut — Wasser & Feuer, Gastro am Abend (Herkunft: zur-langst) */ .palette-glut{ --flaeche:oklch(0.23 0.03 210); --flaeche-tief:oklch(0.18 0.028 215); --flaeche-hell:oklch(0.3 0.035 208); --gegen:oklch(0.96 0.012 85); --gegen-tief:oklch(0.92 0.018 82); --text:var(--gegen); --text-weich:oklch(0.75 0.03 200); --akzent:oklch(0.6 0.13 45); --akzent-hell:oklch(0.72 0.12 55); --akzent-tief:oklch(0.45 0.11 40); --linie:oklch(0.36 0.03 210); --linie-gegen:oklch(0.86 0.02 85); } /* Creme + Petrol — hell, editorial, Dienstleistung (Herkunft: nm-marketing) */ .palette-petrol{ --flaeche:oklch(0.97 0.006 90); --flaeche-tief:oklch(0.93 0.01 88); --flaeche-hell:oklch(1 0 0); --gegen:oklch(0.2 0.01 230); --gegen-tief:oklch(0.15 0.01 230); --text:oklch(0.24 0.012 235); --text-weich:oklch(0.5 0.015 232); --akzent:oklch(0.6305 0.1123 227.4); --akzent-hell:oklch(0.74 0.09 225); --akzent-tief:oklch(0.48 0.1 230); --linie:oklch(0.88 0.008 90); --linie-gegen:oklch(0.35 0.015 232); }