style(website): declutter background and polish stacked hero on small screens

- thin out bamboo/leaf/firefly decor in tiers (<=1440 / <=1024 / <=768px)
  so nothing moves behind the text column and copy stays readable
- center the single-column hero below 1024px (text, koala, CTAs, trust
  line) and let the odd CTA button span the full grid row
- remove the periodic wind gusts; keep the constant gentle bamboo sway
- reword the German demo CTA to "Live-Demo ansehen"

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

website/app.js

@@ -258,7 +258,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const bambooFar = document.getElementById('bamboo-far');
     const bambooMid = document.getElementById('bamboo-mid');
     const bambooNear = document.getElementById('bamboo-near');
-    const forestScene = document.querySelector('.bg-nature');
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (bambooFar && bambooNear && !prefersReducedMotion) {
         const depthDay = document.querySelector('.bg-depth-day');
@@ -332,22 +331,6 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
         renderForest();
-
-        // Wind gusts: every 12-24s the sway variables ramp up for ~3s. The
-        // custom properties are registered via @property, so they transition
-        // smoothly inside the running keyframes instead of jumping.
-        if (forestScene) {
-            const scheduleGust = () => {
-                setTimeout(() => {
-                    forestScene.classList.add('gusting');
-                    setTimeout(() => {
-                        forestScene.classList.remove('gusting');
-                        scheduleGust();
-                    }, 3000);
-                }, 12000 + Math.random() * 12000);
-            };
-            scheduleGust();
-        }
     }
 
     // Eucalyptus click confetti: leaves burst from wherever the visitor

website/locales/de.json

@@ -24,7 +24,7 @@
   "DEMO_JOINED": "Raum beigetreten",
   "DEMO_TAB_SELECTED": "Tab ausgewählt",
   "DEMO_SELECT_PLACEHOLDER": "Video-Tab wählen…",
-  "MOBILE_DEMO_CTA": "So funktioniert's ansehen",
+  "MOBILE_DEMO_CTA": "Live-Demo ansehen",
   "MOBILE_DEMO_TITLE": "KoalaSync Live-Demo",
   "MOBILE_DEMO_CLOSE": "Demo schließen",
   "ADD_TO_CHROME": "Zu Chrome hinzufügen",

website/styles/foundation.css

@@ -118,28 +118,9 @@ body {
 }
 
 /* --- Animated Bamboo Forest Background (v3 Greens Update) --- */
-/* Registered so wind gusts can TRANSITION these instead of jumping */
-@property --sway {
-    syntax: '<angle>';
-    initial-value: 1.2deg;
-    inherits: true;
-}
-
-@property --leaf-drift {
-    syntax: '<length>';
-    initial-value: 26px;
-    inherits: true;
-}
-
 .bg-nature {
     --sway: 1.2deg;
     --leaf-drift: 26px;
-    transition: --sway 1.6s ease-in-out, --leaf-drift 1.6s ease-in-out;
-}
-
-.bg-nature.gusting {
-    --sway: 3.4deg;
-    --leaf-drift: 68px;
 }
 
 .bg-nature {
@@ -727,23 +708,70 @@ html.theme-light .bg-nature::after {
     background-size: 160px 160px;
 }
 
-@media (max-width: 768px) {
-    /* Half the leaves, no god rays / light sweep / extra stalks: the scene
-       stays recognisable while the animation count roughly halves. */
+/* --- Responsive calm-down ------------------------------------------------
+   On wide screens the decor lives in the side gutters; once those gutters
+   shrink it sits directly behind the text and hurts readability. Thin the
+   scene out in tiers: small monitors lose the mid-column movers, tablets
+   keep only the outer frame, phones get a static, dimmed frame. */
+
+/* Small monitors / laptops: clear the text column */
+@media (max-width: 1440px) {
+    .fall-leaf-3,
+    .fall-leaf-4,
     .fall-leaf-5,
     .fall-leaf-6,
+    .fw-3,
+    .fw-4,
+    #bamboo-far .far-6,
+    #bamboo-far .far-7 {
+        display: none;
+    }
+
+    /* The pseudo stalks sit at 24% / 25% — mid-column at this width */
+    #bamboo-far::before,
+    #bamboo-far::after {
+        display: none;
+    }
+
+    .bg-godrays {
+        opacity: 0.55;
+    }
+}
+
+/* Tablets: only the outermost decor remains, slightly dimmed */
+@media (max-width: 1024px) {
+    .fall-leaf-2,
     .fall-leaf-7,
-    .fall-leaf-8,
+    .fw-2,
+    .fw-5,
     .bg-godrays,
     .bg-light-sweep,
     #bamboo-mid,
     #bamboo-far .far-4,
-    #bamboo-far .far-5,
-    #bamboo-far .far-6,
-    #bamboo-far .far-7,
+    #bamboo-far .far-5 {
+        display: none;
+    }
+
+    #bamboo-far,
+    #bamboo-near {
+        opacity: 0.7;
+    }
+}
+
+/* Phones: nothing moves behind the text — a faint static frame is enough */
+@media (max-width: 768px) {
+    .fall-leaf,
+    .firefly-wrap,
+    .bg-mist,
+    #bamboo-far .far-2,
     #bamboo-near .near-3 {
         display: none;
     }
+
+    #bamboo-far,
+    #bamboo-near {
+        opacity: 0.45;
+    }
 }
 
 /* --- UI/UX cohesion pass -------------------------------------------------
@@ -919,9 +947,11 @@ html.theme-light :is(.use-case-card, .feature-card, .faq-item, .comparison-table
         grid-column: span 1;
     }
 
+    /* Odd button out (GitHub is hidden below 900px): span the full row so
+       the group closes as a clean 2+1 block instead of leaving a gap. */
     .hero-github-cta,
     .btn-demo-mobile {
-        grid-column: span 1;
+        grid-column: 1 / -1;
     }
 
     .use-case-card,

website/styles/hero.css

@@ -191,7 +191,26 @@ html.theme-light .koala-speech-bubble::after {
     }
 }
 
-@media (max-width: 768px) {
+/* Stacked hero (below the 1024px demo breakpoint): the text block owns the
+   full row, so the whole column — headline, subtitle, koala, CTAs — reads
+   as one centered axis instead of a left-aligned half of a two-column grid. */
+@media (max-width: 1023px) {
+    .hero-grid {
+        text-align: center;
+    }
+    /* Lift the desktop measure cap: the text block is the full row here,
+       so a left-flushed 42rem box would sit visibly off-center. */
+    .hero-text {
+        max-width: none;
+    }
+    .hero-text p,
+    .hero-subtitle,
+    .hero-text .cta-trust {
+        margin-inline: auto;
+    }
+    .cta-group {
+        justify-content: center;
+    }
     /* The koala keeps standing on the active install CTA; app.js updates the
        offset from the real button geometry when the row wraps. */
     .hero-mascot-container {