/* ============================================================ Pactos Website — zentrales Token-Set (Phase 3, Fundament) Quelle: DESIGN.md (Brandbook V3, „grün-forward hell"). Ziel: DIE eine Wahrheit für Farben/Radien/Typo. Neue Seiten binden diese Datei ein statt eigene :root-Blöcke zu kopieren; Bestandsseiten werden inkrementell migriert (siehe MIGRATION.md). ⚠ OFFENE GOVERNANCE-ENTSCHEIDUNG (Stand 2026-07-21): Die mittleren Grüntöne weichen vom offiziellen VMS-Token-Set des pactos-homepage-Repos ab (dort: brand-green-dark #14786e, Hue 184). Patrick hat entschieden, vorerst bei den DESIGN.md-Werten zu bleiben. Sobald das Team entscheidet, werden NUR die Werte hier geändert. ============================================================ */ :root { /* Flächen & Text */ --paper: #F4F4F4; --surface: #FFFFFF; --surface-2: #EDF1EF; --ink: #0C1A16; --ink-soft: #33443F; --muted: #5C6B66; --muted-readable: #5b6b66; --line: #E0E6E2; --line-soft: #EBEFEC; /* Marken-Grün (Brandbook V3 / DESIGN.md) */ --green-900: #08302B; --green-800: #0A4E47; /* = offizielles brand-green, Primärfarbe */ --green-700: #0B5B52; --green-600: #0E7A5F; /* Haupt-CTA — divergiert vom VMS-Repo (#14786e), s.o. */ --green-500: #12946F; /* Akzente */ --tech: #52EFBA; /* = offizielles brand-tech-green */ --tech-soft: #C5FAE8; --tech-tint: #E7F8F0; --purple: #6025E1; --deep-purple: #1A1B33; --orange: #FE5E00; /* Status */ --amber-bg: #FDF1E3; --amber-ink: #9A5B12; --blue-bg: #E7F0FF; --blue-ink: #2F5DC0; --red: #C7443F; /* Geometrie & Typo ⚠ Die Alt-Radien --radius-lg/md/sm (20/16/12px) sind seit 27.07.2026 ABGESCHAFFT. Es gilt ausschliesslich die kanonische Skala --r-sm/-md/-lg/-xl/-full (s. u., DESIGN.md §2a). */ --wrap: 1200px; /* = --maxw (DESIGN.md §2a) */ --sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Geist Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* FAQ-Akkordeon, Reveals (faq-varianten.html) */ } /* ============================================================ Kanonische Typo-/Layout-Tokens (DESIGN.md §2/§2a, Stand 21.07.2026) Neue/bearbeitete Seiten MÜSSEN diese nutzen; Bestand beim Anfassen. ============================================================ */ :root{ /* Typo */ --fs-h1:clamp(2.2rem,4.6vw,3.4rem); --fs-h2:clamp(1.7rem,3vw,2.5rem); --fs-h3:1.75rem; --fs-h4:1rem; --fs-lead:1.2rem; --fs-body:1.0625rem; --fs-small:.8125rem; --fs-quote:1.2rem; --fw-head:550; /* Radien (§2a/§3b: Buttons & Inputs 12px, Karten 18, große Boxen 24, 999 NUR Tags/Badges/Avatare) */ --r-sm:10px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-full:999px; /* Spacing/Layout */ --space-section:80px; --gap:24px; --maxw:1200px; --maxw-read:760px; --pad-x:24px; /* Schatten */ --shadow-s:0 1px 2px rgba(8,48,43,.05); --shadow-m:0 4px 12px rgba(8,48,43,.08),0 18px 40px rgba(8,48,43,.12); --shadow-l:0 10px 26px rgba(8,48,43,.12),0 34px 70px rgba(8,48,43,.16); --shadow-hover:0 12px 30px -10px rgba(0,0,0,.45); --shadow-overlay:0 30px 60px -28px rgba(0,0,0,.7); /* Weit gestreuter, grün getönter Schatten für die dunkle CTA-Box auf hellem Grund. Eigene Stufe, weil --shadow-l zu nah und --shadow-overlay zu hart wäre (schwarz, .7). Wert kommt aus mockup-final-cta.html; er stand dort als Einzelwert in der Komponente — hier, damit er nur an einer Stelle lebt (§2a „Geometrie zentral"). */ --shadow-cta:0 30px 70px -40px rgba(8,48,43,.55); /* Ebenen (z-index-Skala §2a) — feste Leiter, keine frei erfundenen Werte. Header live von 900 → 100 angeglichen, Mega 70 → 90 (unter dem Header). */ --z-content:1; --z-sticky:10; --z-mega:90; --z-header:100; --z-mobilenav:300; --z-cookie:400; --z-modal:500; --z-toast:600; } /* ============================================================ Additional Colors · Chart-/Datenfarben · Verläufe (DESIGN.md §1) Werte 1:1 aus styleguide.html (lebende Referenz, Stand 22.07.2026). Hell/mittel = reine Füllfarben (Text darauf dunkel). Violett = nur Pax AI, Orange = nur sehr high-priority (wie Status-Farben reserviert). ============================================================ */ :root{ /* Akzent-Familien (Tint-Leitern: hell → mittel → Basis) */ --tech-mid:#8CF4D1; /* Mint mittel */ --sage-200:#ADC2BC; --sage-400:#5D8881; /* Sage / Grün-Grau (nur Füllung) */ --ai:#6025E1; --ai-ink:#4E1BB8; --ai-tint:#CFBEF6; --ai-mid:#9066EA; /* AI-Violett (nur Pax AI) */ --orange-tint:#FFCFB3; --orange-mid:#FE8E4D; /* Orange (nur high-priority) */ --blue-gray:#CACFE5; --slate:#48495C; /* Blau-Grau / Slate (neutrale Chart-Töne) */ /* Chart-/Datenfarben (grün-forward, ohne Status-/Reservefarben) */ --chart-1:#0A4E47; --chart-2:#5D8881; --chart-3:#52EFBA; --chart-4:#ADC2BC; --chart-5:#48495C; /* Verläufe (kanonisch, Anker Pactos Green #0A4E47) RICHTUNG EINHEITLICH (Antonio, 27.07.2026): alle linearen Verläufe laufen 135deg, also von oben links nach unten rechts, und starten mit der DUNKLEREN Farbe. Vorher: 135/140/150/160/162/180deg gemischt, --grad-fresh sogar hell -> dunkel. */ --grad-fresh:linear-gradient(135deg,#0A4E47,#12946F); --grad-dark:linear-gradient(135deg,#08302B,#0A4E47); /* Hero / dunkle Bänder (Arbeitspferd) */ --grad-panel:linear-gradient(135deg,#072A26,#0B5B52); --grad-deep:linear-gradient(135deg,#051F1C,#08302B); --grad-night:linear-gradient(135deg,#041310,#0A4E47); --grad-ink:linear-gradient(135deg,#020A08,#08302B); --grad-spot:radial-gradient(120% 100% at 18% 0,#0B5B52,#051F1C); /* radial — keine Richtung im o. g. Sinn */ --grad-tech:linear-gradient(135deg,#0A4E47,#52EFBA); /* Akzent-Pop, klein/sparsam */ --grad-ai:linear-gradient(135deg,#1A1B33,#6025E1); /* Pax-AI-Sektionen */ --glow-mint:radial-gradient(130% 120% at 84% 12%,rgba(82,239,186,.14),transparent 60%); /* Fremdlogos einfarbig in Pactos-Gruen ------------------------------------ Die Kette stand seit dem 25.08.2026 inline an .mq-logo (Investorenlogos auf ueber-uns.html); seit dem 27.08.2026 tragen auch die Kundenlogos auf den 15 Anwendungsfall-Seiten dieselbe Farbe (Patrick: „immer so von der farbgebung wie die Investorenlogos"). Deshalb hier, an einer Stelle. brightness(0) macht jedes deckende Pixel schwarz, der Rest der Kette faerbt es ein; die Alphakanten bleiben erhalten, das Logo wird also eine weiche Vollform. GEMESSEN ergibt die Kette rgb(12,80,77) — zwei bis sechs Punkte neben --green-800 #0A4E47, dem offiziellen Markengruen. ⚠ WER EIN LOGO OHNE ALPHA EINSETZT, BEKOMMT EINEN GRUENEN KLOTZ. Gefaehrlich sind Marken, deren Schrift aus einer farbigen Platte ausgestanzt ist: liegt die Schrift dort als WEISSE PIXEL, wird sie mit der Platte schwarz und verschwindet. Betroffen und deshalb mit Mono-Fassung daneben: Buerger (buerger-mono.svg) und das 100-Jahre-Abzeichen von KNUTH (logo-knuth-mono.png). ⚠ Dahmen sieht genauso aus, ist aber KEIN Fall dafuer — GEMESSEN ist die Unterzeile „Personalservice GmbH" ein LOCH im grauen Balken (Alpha unter 128), keine weisse Schrift. Die Buchstaben bleiben also frei und zeigen den Seitengrund. Das haelt nur auf hellem Grund; auf einem dunklen Band waere die Zeile weg. */ --logo-mono:brightness(0) saturate(100%) invert(23%) sepia(46%) saturate(760%) hue-rotate(128deg) brightness(93%) contrast(92%); /* Violetter Schwester-Schimmer, NUR Pax AI (wie --grad-ai). Gleiche Bauform wie --glow-mint, nur Ort und Farbe anders: oben rechts, damit beide zusammen in EINEM background liegen koennen (`background:var(--glow-ai),var(--glow-mint)`) — .ihero hat kein drittes Pseudoelement frei, ::before ist zentral der Nav-Schutz. Ersetzt das seiteneigene --ai-glow von pax-ai.html. */ --glow-ai:radial-gradient(95% 85% at 92% 4%,rgba(96,37,225,.30),transparent 62%); /* Violett UND Mint in EINEM Radial statt zwei Schichten uebereinander. Antonio (25.08.2026) zum Hero: „lila mit Gruen auch zu mischen, in einem Gradient". Der Zweischichter (--glow-ai ueber --glow-mint) ergab auf --grad-dark in der Ecke ein entsaettigtes BLAU, nicht Violett — gemessen rgb(36,75,111) in der Ecke oben rechts, Blaukanal am hoechsten. Deshalb hier: hoehere Violett-Deckung direkt am Rand, ein Violett-Zwischenstop (--ai-mid) und danach Mint, damit der Verlauf violett → helles Violett → mint → gruen laeuft. NUR Pax AI. */ --glow-ai-mint:radial-gradient(78% 74% at 90% 6%,rgba(96,37,225,.86),rgba(96,37,225,.40) 34%,rgba(144,102,234,.18) 52%,rgba(82,239,186,.15) 70%,transparent 88%); /* Chrome (Header/Footer): schwarz links → grün rechts. BEWUSST NICHT auf 135deg umgestellt — die 90deg-Richtung ist eine eigene, frühere Vorgabe („im Header fängt das schwarz links an und geht nach rechts in dunkelgrün über"). Wer die RICHTUNG ändert, nimmt diese Entscheidung zurück; erst abstimmen. Knick bei 35% (Patrick, 27.07.2026): Der Schwarzanteil war zu hoch. Gemessen über 1440px Breite, Schwelle = Luminanz von --green-900: vorher waren 727px, also die linke HÄLFTE, dunkler als --green-900; jetzt sind es 34%. Der Zwischenstopp ist mit Absicht #08302B = genau diese Schwellenfarbe — dadurch erreicht der Verlauf --green-900 per Konstruktion bei 35% der Breite, die Zahl ist also begründet und nicht geraten. BEIDE ENDFARBEN bleiben unverändert (#041310 links, #0A4E47 rechts), damit „schwarz links, dunkelgrün rechts" wörtlich weiter stimmt — die kleinste mögliche Abweichung von der ursprünglichen Vorgabe. Die Scroll-Fassung MUSS den Knick mitführen, sonst springt die Farbe beim Scrollen. */ --grad-shell:linear-gradient(90deg,#041310,#08302B 35%,#0A4E47); --grad-shell-scroll:linear-gradient(90deg,rgba(4,19,16,.82),rgba(8,48,43,.82) 35%,rgba(10,78,71,.82)); /* Scroll: transluzent + blur; rgb(8,48,43) = #08302B */ } /* ============================================================ Hintergrund-GRUNDSATZ (Patrick, 22.07.2026) „transparent = Block zeigt Animation · Farbe = solides Element." Ebene 1 · Paper: body = --page-bg (weiß). Die Leinwand. Ebene 1b · Animation: .pbg-layer fix dahinter (z-index:-1), background.css/js, Regler --pbg-intensity (seit 02.09.2026 auf 0.3, war 0.45). Sichtbar überall, wo darüberliegende Flächen transparent sind. Sektionsbänder: TRANSPARENT (--surface-2/--paper) -> zeigen die Animation. Inhalts-Elemente: SOLIDE (Karten/Inputs/Mockup/Video = --surface weiß; Hervorhebung = dunkelgrün --green-*/Verläufe; Heroes = Foto). Der eigentliche Rollen-Override steht in components.css. Bewusst dunkle Seiten (faq.html) hängen nicht am Schalter. ============================================================ */