Startseite entschlackt: weniger Text, ruhiger, besser am Handy

- Cursor-Effekt im Hero entfernt (Messfadenkreuz, Temperatur-Skala,
  Maus-Wärmespur); Wärmebild läuft nur noch ruhig im Hintergrund
- Preloader, Laufbänder, Intro, Ablauf-Block, Kennzahlen, Footer-CTA,
  kursive Akzentwörter, Verlaufstext und Nummern-Pillen entfernt
- Texte in allen Abschnitten deutlich gekürzt, schlichte Überschriften
- Leistungen: auf Handy/Tablet wischbare Kärtchen mit Zähler und Pfeilen
- Neue, zusammenhängende Illustrationen für die fünf Leistungs-Kärtchen
- Heizungs-Finder ohne Prozent-Balken, kürzere Ergebnistexte
- Energie-Haus: Tabs als Wischleiste am Handy, kein Autoplay
- GSAP, ScrollTrigger, SplitText, Lenis und Instrument Serif entfernt
- Barrierefreiheit: Kontrast, Fokusring, Fokus im Kartenstapel,
  Telefon-Button mit Namen, Menü sperrt Hintergrund
- Cache-Busting (?v=20261004) für CSS und JS, README aktualisiert

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-10-04 20:14:53 +02:00
1 parent 717a7de501
commit ad155124b1
20 files changed
+1182 -2147

No files matched your search

+10 -53
View File
@@ -1,7 +1,6 @@
/* ==========================================================================
Olzinger – Energie-Haus
Tabs + Hotspots steuern, welches System im Hausschnitt hervorgehoben wird.
Solange niemand klickt, wechseln die Komponenten automatisch.
========================================================================== */
(function (w, d) {
'use strict';
@@ -13,16 +12,9 @@
var parts = Array.prototype.slice.call(root.querySelectorAll('.part'));
var hotspots = Array.prototype.slice.call(root.querySelectorAll('.hotspot'));
var systems = Array.prototype.slice.call(root.querySelectorAll('.sys'));
var progress = root.querySelector('[data-house-progress]');
var order = tabs.map(function (t) { return t.getAttribute('data-part'); });
var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches;
var DURATION = 6500;
var current = null;
var autoplay = !reduce;
var inView = false;
var hovering = false;
var elapsed = 0, last = 0, raf = 0;
hotspots.forEach(function (h) {
h.setAttribute('aria-controls', 'part-' + h.getAttribute('data-part'));
@@ -37,6 +29,11 @@
t.setAttribute('aria-selected', on ? 'true' : 'false');
t.tabIndex = on ? 0 : -1;
if (on && focusTab) t.focus();
// Auf dem Handy liegen die Tabs in einer Wischleiste: aktiven Tab sichtbar halten
if (on && t.parentNode.scrollWidth > t.parentNode.clientWidth) {
var bar = t.parentNode;
bar.scrollTo({ left: t.offsetLeft - (bar.clientWidth - t.offsetWidth) / 2, behavior: reduce ? 'auto' : 'smooth' });
}
});
parts.forEach(function (p) {
var on = p.getAttribute('data-part') === id;
@@ -49,41 +46,13 @@
h.setAttribute('aria-pressed', on ? 'true' : 'false');
});
systems.forEach(function (s) { s.classList.toggle('is-on', s.getAttribute('data-sys') === id); });
elapsed = 0;
}
function stopAutoplay() {
autoplay = false;
if (progress) progress.style.transform = 'scaleX(0)';
if (raf) w.cancelAnimationFrame(raf);
raf = 0;
}
function tick(now) {
raf = 0;
if (!autoplay || !inView || hovering) return;
var dt = last ? now - last : 16;
last = now;
elapsed += Math.min(dt, 100);
if (progress) progress.style.transform = 'scaleX(' + Math.min(elapsed / DURATION, 1) + ')';
if (elapsed >= DURATION) {
var next = order[(order.indexOf(current) + 1) % order.length];
activate(next, false);
}
raf = w.requestAnimationFrame(tick);
}
function run() {
if (!autoplay || !inView || hovering || raf) return;
last = 0;
raf = w.requestAnimationFrame(tick);
}
tabs.forEach(function (t) {
t.addEventListener('click', function () { stopAutoplay(); activate(t.getAttribute('data-part'), false); });
t.addEventListener('click', function () { activate(t.getAttribute('data-part'), false); });
});
hotspots.forEach(function (h) {
h.addEventListener('click', function () { stopAutoplay(); activate(h.getAttribute('data-part'), false); });
h.addEventListener('click', function () { activate(h.getAttribute('data-part'), false); });
});
// Tastatursteuerung nach WAI-ARIA Tabs-Pattern
@@ -97,30 +66,18 @@
else if (e.key === 'End') to = n - 1;
if (to < 0) return;
e.preventDefault();
stopAutoplay();
activate(order[to], true);
});
}
// Pausieren, solange der Nutzer mit der Maus im Bereich ist
root.addEventListener('pointerenter', function (e) {
if (e.pointerType === 'mouse') { hovering = true; if (raf) { w.cancelAnimationFrame(raf); raf = 0; } }
});
root.addEventListener('pointerleave', function (e) {
if (e.pointerType === 'mouse') { hovering = false; run(); }
});
// SVG-Animationen (Strömungen, Lüfter) nur laufen lassen, solange das Haus sichtbar ist
if ('IntersectionObserver' in w) {
new IntersectionObserver(function (entries) {
inView = entries[0].isIntersecting;
if (inView) run();
}, { threshold: 0.35 }).observe(root);
// SVG-Animationen (Strömungen, Lüfter) nur laufen lassen, solange das Haus sichtbar ist
new IntersectionObserver(function (entries) {
root.classList.toggle('is-inview', entries[0].isIntersecting);
}, { threshold: 0 }).observe(root);
} else {
root.classList.add('is-inview');
}
if (!('IntersectionObserver' in w)) root.classList.add('is-inview');
activate(order[0], false);
})(window, document);