/* ============================================================ Pactos Website — bewegter Nebelgrund für Produkt-Heroes Entstanden aus workforce-hero-alt.html (26.08.2026). Die Herleitung jeder Zahl steht in KOMPATIBILITAET.md, Einträge „(4)" und „(5)" vom 26.08.2026 — wer hier etwas ändert, sollte sie vorher lesen, es sind fast alle gemessen. AUFBAU (Markup, siehe workforce.html):
… Inhalt …
DREI FASSUNGEN, gesteuert über data-modus am .nebel (src/js/nebel.js): wellen Standard. Ein WebGL-Shader verzerrt das Bild mit einer langen, wandernden Welle. Er greift nur am GRÜNEN Material des Bildes an, das Schwarz steht still. ebenen Rückfall ohne WebGL: zwei Bildkopien driften mit verschiedenem Takt übereinander, die obere im Screen-Modus mit pulsender Deckung. ruhe Standbild. Das ist der Zustand ohne JavaScript und bei prefers-reduced-motion — der Hero sieht dann vollständig aus. ⚠ url() löst relativ zu DIESER Datei, nicht zur Seite. `../../assets/…` ergibt darum auf jeder Seite und auch in glossar/ denselben Pfad. ============================================================ */ /* ---- Die Bildebene ---- inset -6 % oben/unten: die Ebene wandert beim Scrollen 30 px nach oben (--auf kommt aus dem Parallaxe-Skript der Seite). Ohne diesen Überstand käme unten ein Streifen des Sektionsgrundes zum Vorschein, auf der hellen Seite als sichtbare Kante. Gemessen: 40 bis 77 px Überstand in jedem Zustand. */ .nebel{position:absolute;inset:-6% 0;z-index:0;overflow:hidden;isolation:isolate; background:var(--grad-ink); transform:translate3d(0,calc(var(--auf,0) * -30px),0)} /* inset -10 %: die Ebenen drehen und wachsen — ohne Überstand liefe eine Bildkante ins Sichtfeld. 71 % statt center: das Bild ist 2,33:1, ein 1,43:1-Hero zeigt davon nur 61 % der Breite, und mit `center` liegt der helle Kern des Nebels außerhalb. Die Umrechnung Fenstermitte -> background-position steht in KOMPATIBILITAET.md. */ .neb-lage{position:absolute;inset:-10%; background:url("../../assets/hero/hero-nebel.jpg") 71% center/cover no-repeat} /* ⚠ DIE ZWEITE KOPIE IST NICHT GESPIEGELT. Der Nebel liegt im Bild rechts; gespiegelt landet er links, also genau unter der Überschrift — gemessen stieg die linke Bildhälfte dadurch von Luminanz 0,012 auf 0,055, das Schwarz war weg. Sie läuft ungespiegelt, nur anders skaliert, und ist links ausmaskiert. */ .neb-b{mix-blend-mode:screen;opacity:.42; -webkit-mask-image:linear-gradient(90deg,transparent 30%,black 70%); mask-image:linear-gradient(90deg,transparent 30%,black 70%)} .nebel:not([data-modus="ebenen"]) .neb-b{display:none} /* Ungleiche Takte mit Absicht: bei gleichem Takt sieht man ein Bild atmen statt zweier, die sich durcheinander schieben. Die Wege sind gegenläufig — wächst A, schrumpft B. ⚠ 13 s und 19 s, nicht 54 und 79: 7 % Skalierung über 54 s sind 0,13 % pro Sekunde, gemessen 0,07 % Bildänderung — unter der Wahrnehmungsschwelle. Der dritte Takt auf der DECKUNG (9 s) ist der wirksamste Griff: eine Verschiebung weichen Bildes ändert kaum Pixel, eine wechselnde Helligkeit sehr wohl — und Aufleuchten ist ohnehin, was ein Nebel tut. */ /* ⚠ 20/29/14 s, vorher 13/19/9. Dieselbe Beruhigung wie bei den Shader-Tempi (Patrick, 26.08.2026: „teilweise zu schnell … dadurch hektisch"). Die Verhaeltnisse bleiben: kein kleiner gemeinsamer Teiler, die Figur wiederholt sich erst nach Stunden. */ .nebel[data-modus="ebenen"] .neb-a{animation:neb-a 20s ease-in-out infinite alternate} .nebel[data-modus="ebenen"] .neb-b{animation:neb-b 29s ease-in-out infinite alternate, neb-glut 14s ease-in-out infinite alternate} @keyframes neb-a{ from{transform:translate3d(-3.2%, 2.1%,0) scale(1.03) rotate(-1.3deg)} to {transform:translate3d( 3.0%,-2.4%,0) scale(1.15) rotate(1.4deg)} } @keyframes neb-b{ from{transform:translate3d( 3.4%,-1.8%,0) scale(1.13) rotate(1.2deg)} to {transform:translate3d(-2.8%, 2.6%,0) scale(1.02) rotate(-1.5deg)} } @keyframes neb-glut{from{opacity:.14}to{opacity:.74}} /* Die Leinwand deckt die Ebenen zu, sobald der Shader sein erstes Bild hat. Sie startet unsichtbar — sonst blitzt eine schwarze Fläche auf, bevor die Textur geladen ist. */ .neb-fluss{position:absolute;inset:0;width:100%;height:100%;display:block; opacity:0;transition:opacity .8s ease-in-out} .nebel[data-modus="wellen"] .neb-fluss{opacity:1} /* ---- Fassung fuer einen Kasten mitten auf der Seite ---- Kein Ueberstand nach oben und unten und keine Parallaxe: der Kasten steht im Fluss, nicht als Vollbild. Der Ausschnitt liegt weiter rechts als im Hero (64 % statt 71 %), weil ein Kasten viel breiter als hoch ist und `cover` daraus einen schmalen Streifen schneidet — bei 71 % lag der helle Kern schon ausserhalb. */ .nebel.neb-kasten{inset:0;transform:none} .neb-kasten .neb-lage{inset:-16%;background-position:64% center} /* ---- Schleier ---- In --ink, nicht in --green-900, und mit 52/26 % statt der 94/88 % der alten Fotoheroes: eine grüne Deckschicht grünt das Schwarz ein und nimmt dem Bild genau das, was es ausmacht. Nötig ist sie kaum — das Bild ist links von sich aus schwarz. Gemessen: Überschrift 18,8:1, Fließtext 11,4:1 bei 1440 px. */ .neb-schleier{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 52%, transparent) 0%, color-mix(in srgb, var(--ink) 26%, transparent) 46%, transparent 72%)} /* ---- Produktfarben für die Fassungen OHNE Shader ---- „Ebenen" und „Standbild" sind Bildebenen, kein Programm — dort geht nur ein Filter. Die Drehwinkel sind gerechnet, nicht probiert: der Nebel liegt bei Farbton 159 Grad, --orange #FE5E00 bei 22, --ai #6025E1 bei 259, daraus -137 und +100. hue-rotate ist eine Matrixnäherung und nicht dasselbe wie das Umfärben im Shader, bringt die Fassungen aber in dieselbe Familie, statt für Tender und Pax AI weiter Grün zu zeigen. Ein statischer Filter kostet nichts pro Bild. VMS braucht keine Regel: dort ist das Bild schon richtig. */ [data-nebel-produkt="compliance"] .neb-lage{filter:hue-rotate(-8deg) saturate(1.3) brightness(.8)} [data-nebel-produkt="tender"] .neb-lage{filter:hue-rotate(-137deg) saturate(1.15)} [data-nebel-produkt="pax-ai"] .neb-lage{filter:hue-rotate(100deg) saturate(1.2)} /* ⚠ Die gleichen Filter fuer die Karten im Menue stehen in components.css, NICHT hier: diese Datei ist nur auf den vier Produktseiten verlinkt, das Menue steht auf allen 148. Lagen sie hier, waeren die Karten auf 143 Seiten gruen. */ /* ---- Schmale Fenster ---- Der waagerechte Schleier trägt hier nicht: seine Stopps sind Prozente der FENSTERbreite, und unter 900 px steht der Text über die ganze Breite, also auch dort, wo der Schleier schon ausgeblendet ist. Deshalb eine gleichmäßige Fläche. Dazu der Ausschnitt: das Bild ist 2,33:1, der Hero auf dem Telefon 0,30:1 — `cover` schneidet 87 % der Bildbreite weg und zeigt mit `center` die dunkle Zone. Gemessen bei 390 px: Luminanz 0,004 im Mittel, vom Nebel war NICHTS zu sehen. Erst 86 % holt die helle Welle ins Fenster. */ @media (max-width:900px){ .neb-lage{background-position:86% center} .neb-schleier{background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 70%, transparent) 45%, color-mix(in srgb, var(--ink) 80%, transparent) 100%)} } @media (prefers-reduced-motion:reduce){ .nebel .neb-a,.nebel .neb-b{animation:none} } /* ---- Kleine Kästen: dasselbe Motiv wie die Produkt-Heroes (28.08.2026) ---- Die vier Produktkarten auf der Startseite (und die zwei auf workforce.html) zeigten das Nebelmotiv, weil die Heroes es trugen. Seit die Heroes die Platine tragen, gehören die Kästen mit — sonst zeigt die Startseite ein Motiv, das es auf der Zielseite nicht mehr gibt. ⚠ Kein Shader und keine driftenden Ebenen, siehe src/js/nebel.js: dort bleibt `.neb-kasten` im Standbild. Zwei Kopien eines scharfen Bildes geben Geisterkanten, und die wandernde Welle macht aus einem Chip einen Wackler. ⚠ Die Filter überschreiben die Produktwerte oben ((0,3,0) gegen (0,2,0)): unter den Kästen liegt jetzt ein anderes Grundbild, also gehören dieselben Werte hin wie in den Heroes (components.css Abschnitt 25). */ .neb-kasten .neb-lage{background-image:url("../../assets/hero/hero-platine.webp"); filter:saturate(1.65) contrast(1.45)} [data-nebel-produkt="compliance"] .neb-kasten .neb-lage{ filter:hue-rotate(-8deg) saturate(1.65) contrast(1.45) brightness(.85)} [data-nebel-produkt="tender"] .neb-kasten .neb-lage{ filter:hue-rotate(-123deg) saturate(1.65) contrast(1.45)} [data-nebel-produkt="pax-ai"] .neb-kasten .neb-lage{ filter:hue-rotate(112deg) saturate(1.65) contrast(1.45)}