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>
This commit is contained in:
Timo
2026-07-12 10:59:00 +02:00
parent 3ce64b8c41
commit fdf20b6bf6
4 changed files with 78 additions and 46 deletions
-17
View File
@@ -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