, wie im Entwurf: --back liegt hinter dem Inhalt, --front darueber. Die Formen sind blau geflutete Linienzeichnungen in der Grundfarbe — auf dem blauen Grund bleibt nur die schwarze Linie stehen, die Flaeche deckt ab, was dahinterliegt. Genau davon lebt die vordere Ebene: sie schneidet sichtbar in den Inhalt. Beide Ebenen sind pointer-events:none. Verdeckt wird also nur optisch — Links und Bilder darunter bleiben anklickbar, so wie im Entwurf. Positioniert wird ueber --x/--y (Prozent der Seitenhoehe), die Groesse ueber --w. site.js setzt beim Scrollen --shift/--drift/--spin. */ .shape-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Die Ebenen spannen die ganze Seite, darum muss der Bezugsrahmen sein. */ body.body { position: relative; } /* Hinten liegt ueber dem Hintergrund von .main (das ist eine Ebene tiefer, weil .main nicht positioniert ist) und ueber dem Bandfoto, das als body-background ganz unten liegt — die Formen sind damit auch im Startbereich zu sehen. Unter dem Inhalt bleibt sie trotzdem: die Sektionen halten ebenfalls z-index 1 und stehen im Dokument spaeter, bei gleichem z-index entscheidet die Baumreihenfolge. Und unter der Navigation, die 40 bzw. 50 haelt. */ .shape-field--back { z-index: 1; } /* 60 liegt ueber allem im

: die obere Leiste haelt z-40, der gepinnte Linkbalken und der Hamburger halten z-50. Die vordere Ebene schneidet damit auch in die Navigation hinein, und zwar von der ersten Bildschirmhoehe an. */ .shape-field--front { z-index: 60; } .shape { position: absolute; top: var(--y); left: var(--x); width: calc(var(--w) * var(--shape-scale, 1)); will-change: transform; transform: translate(-50%, -50%) translate3d(var(--drift, 0px), var(--shift, 0px), 0) rotate(var(--spin, 0deg)); } .shape img { display: block; width: 100%; height: auto; } /* Die Sektionen liegen zwischen den beiden Ebenen. So bleibt die Inhaltsstruktur unangetastet — kein Wrapper noetig. */ .main > * { position: relative; z-index: 1; } /* Ausnahme: das mobile Startfoto. Auf Desktop ist das Startbild der body-Hintergrund und liegt damit unter allem — die Formen laufen darueber. Auf Mobile ist es ein in

und erbt die Regel oben, stand also ueber der hinteren Ebene. Hier eine Stufe tiefer, damit es sich wie das Desktop-Pendant verhaelt. Ueber dem Hintergrund von .main bleibt es. */ @media (max-width: 767px) { .main > img:first-of-type { z-index: 0; } } /* --- Formen im offenen Mobile-Menue -------------------------------------- Das Menue ist ein fixer Vollbild-Layer: app.css setzt body.nav-open auf height:100vh und blendet

aus. Hier laesst sich nicht wegscrollen — was ein Menuepunkt an Form abbekommt, bleibt fuer immer darauf liegen. Also raus damit. (Bis die Ebenen Geschwister von

wurden, verschwanden sie mit `body.nav-open main { display: none }` von selbst. Als Kinder von tun sie das nicht mehr.) Eine Form bleibt als Dekoration stehen, fix in der unteren rechten Ecke, wo keine Menuepunkte stehen — position:fixed, weil im offenen Zustand auf 100vh schrumpft und die Ebene mit ihm. */ body.nav-open .shape { display: none; } body.nav-open .shape-field--back .shape:last-child { display: block; position: fixed; top: auto; left: auto; right: -20vw; bottom: -10vh; width: 85vw; transform: none; /* Parallax-Variablen hier bewusst ignorieren */ } /* Und die Menuepunkte liegen in jedem Fall darueber: #nav-container ist ohnehin position:sticky, es braucht nur den z-index. Damit bliebe der Text selbst dann lesbar, wenn die Dekoration doch einmal hineinragt. */ body.nav-open #nav-container { z-index: 2; } /* Auf Mobile stehen dieselben Formen wie am Desktop — gleiche Dichte, nur groesser: der Entwurf laesst sie in Naturgroesse (1600px) stehen, auf einem 390px-Schirm also als grosses Fragment statt als verkleinerte ganze Form. --shape-scale bildet das nach, ohne die --w-Werte im Template anzufassen. */ @media (max-width: 767px) { .shape { --shape-scale: 2.2; } /* Die erste Form kleiner als die uebrigen: sie liegt auf dem Startfoto, und in voller Groesse deckte sie es zu weit zu. 1.6 ist ausgemessen — ueber je 10 Aufrufe verdeckt sie im Schnitt 3.5% der Fotoflaeche und trifft es bei 8 von 10. Groesser heisst nicht linear mehr: bei 1.55 sind es zwar nur 2.1%, dafuer bleibt das Foto bei der Haelfte der Aufrufe ganz frei. */ .shape-field--back .shape:first-child { --shape-scale: 1.6; } }