mit dem Attribut [data-section-top-decor]. Werte werden in der Section-Config gewählt; sws_section_config setzt pro Sektion folgende Custom Properties als Inline-Style: --section-top-decor-mask URL des SVG-Masks --section-top-decor-aspect Aspect-Ratio (z.B. 1920 / 102) --section-top-decor-color Sektion-BG (= Welle-Farbe) --section-top-decor-prev-color Vorgelagerte-Sektion-BG (für Sockel-Bänder) Render-Modell: Welle wird per ::before in der EIGENEN Sektion-Farbe ÜBER die Sektion-Oberkante hinaus in die Vorgänger-Sektion gerendert. Sichtbar wird die Welle dadurch, dass der nicht-mask-Bereich transparent ist und den Vorgänger-BG durchscheinen lässt (Welle = eigene Farbe wächst in fremde). Damit der Welle-Bereich KEINEN Vorgänger-Inhalt überdeckt, bekommt die Vorgänger-Sektion automatisch ein padding-bottom = Welle-Höhe via `:has(+ [data-section-top-decor])`-Selektor (modern browsers). Pflege der Decor-Varianten unter Page Composer → CSS-Klassen → Sektion-Decor. */ [data-section-top-decor]:not([data-section-top-decor=""]):not([data-section-top-decor="none"]) { position: relative; } /* Welle: zentriert, max 1920 px breit, +5 px Überstand seitlich (gegen Subpixel-Gaps). Höhe via aspect-ratio. */ [data-section-top-decor]:not([data-section-top-decor=""]):not([data-section-top-decor="none"])::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); /* Wave-SVG-viewBox-Breite = 1920 px. Decke exakt diese Breite ab, damit * die Sockel-Bänder daneben (mit min(100vw, 1920px)-Berechnung) plan an * den Wellenrand anschließen. Frühere +10 px Subpixel-Hack ist nicht mehr * nötig, weil die Sockel die Lücken jetzt aktiv füllen. */ width: 100%; max-width: 1920px; aspect-ratio: var(--section-top-decor-aspect, 1920 / 184); margin-bottom: -1px; background: var(--section-top-decor-color, var(--color-accent)); mask-image: var(--section-top-decor-mask); mask-repeat: no-repeat; mask-position: bottom center; mask-size: 100% 100%; -webkit-mask-image: var(--section-top-decor-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: bottom center; -webkit-mask-size: 100% 100%; pointer-events: none; z-index: 2; } /* Sockel-Bänder seitlich der Welle (bei Viewport > 1930 px sichtbar). * * Zwei separate Gradienten als Multi-Background auf einem ::after: * - Linkes Band: füllt den Bereich zwischen Viewport-Links und Welle-Links. * Trennlinie auf Höhe `edge-y-left` (= Y-Position, an der die Welle ihren * LINKEN Rand verlässt). Oben prev-color, unten current-color. * - Rechtes Band: spiegelbildlich auf Welle-Rechts → Viewport-Rechts. * Trennlinie auf `edge-y-right` (kann sich von links unterscheiden, bei * asymmetrischen Wellen wie „Welle mit Boot"). * * Bei Viewport ≤ 1930 px haben beide Bänder Breite 0 → kein Effekt, die * Welle füllt die volle Breite. Bei Viewport > 1930 px nehmen die Bänder * (viewport - 1930) / 2 auf jeder Seite ein und schließen plan an die * linke/rechte Wellenrand-Höhe an. * * z-index 1 (unter der Welle z-index 2). Da die Bänder nur SEITLICH der * Welle Inhalt rendern, wird die Welle selbst nicht überdeckt. */ [data-section-top-decor]:not([data-section-top-decor=""]):not([data-section-top-decor="none"])::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 100vw; height: calc(min(100vw, 1920px) * var(--section-top-decor-h-frac, 0.0958)); margin-bottom: -1px; background: linear-gradient( to bottom, var(--section-top-decor-prev-color, transparent) 0%, var(--section-top-decor-prev-color, transparent) var(--section-top-decor-edge-y-left, var(--section-top-decor-edge-y, 50%)), var(--section-top-decor-color, transparent) var(--section-top-decor-edge-y-left, var(--section-top-decor-edge-y, 50%)), var(--section-top-decor-color, transparent) 100% ) left top no-repeat, linear-gradient( to bottom, var(--section-top-decor-prev-color, transparent) 0%, var(--section-top-decor-prev-color, transparent) var(--section-top-decor-edge-y-right, var(--section-top-decor-edge-y, 50%)), var(--section-top-decor-color, transparent) var(--section-top-decor-edge-y-right, var(--section-top-decor-edge-y, 50%)), var(--section-top-decor-color, transparent) 100% ) right top no-repeat; /* Sockel-Bänder ragen 5 px in den Welle-Rect-Bereich hinein. Damit * dient der Sockel-Gradient als Backdrop für die Anti-Alias-Pixel des * Welle-Mask-Randes — die mischen sich dann nicht mit der prev-section- * Farbe (Blau), sondern mit dem korrekten Gradient (oben Blau, unten * Gelb). z-index 1 (unter der Welle z-index 2) — die Welle deckt im * 5-px-Überlapp den Sockel ab; sichtbar wirken die 5 px nur, wenn die * Welle dort transparent ist (Anti-Alias). */ background-size: calc((100vw - min(100vw, 1920px)) / 2 + 5px) 100%, calc((100vw - min(100vw, 1920px)) / 2 + 5px) 100%; pointer-events: none; z-index: 1; } /* Vorgänger-Sektion bekommt automatisch padding-bottom = Welle-Höhe (clamp gegen sehr große/kleine Viewports). Greift auf jeder

, deren unmittelbar nachfolgende Sektion ein Decor-Attribut hat. Zusätzlich: tolerant gegen ein