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

+3 -5
View File
@@ -8,13 +8,13 @@
<meta name="theme-color" content="#0B151E">
<!-- Absolute Pfade, damit die Seite auch bei verschachtelten URLs korrekt lädt -->
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/main.css?v=20261004">
<style>
.e404 { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
.e404::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 80% 30%, rgba(255,106,43,.35), rgba(138,35,80,.16) 50%, transparent 75%), radial-gradient(40% 55% at 10% 90%, rgba(46,155,239,.22), transparent 70%); }
.e404__top { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); }
.e404__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: 24px var(--gutter) 48px; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; width: 100%; }
.e404__code { font-family: var(--font-mono); font-size: 14px; color: var(--text-dark-2); margin: 0 0 20px; }
.e404__code { font-size: 14px; color: var(--text-dark-2); margin: 0 0 20px; }
.e404 .h1 { margin-bottom: 24px; }
.e404 .lead { color: var(--text-dark-2); margin-bottom: 32px; }
.e404__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@@ -46,7 +46,7 @@
<main class="e404__main" id="main">
<div>
<p class="e404__code">Fehler 404</p>
<h1 class="h1">Kein Anschluss <em class="accent" style="color:var(--amber)">unter dieser Adresse.</em></h1>
<h1 class="h1">Kein Anschluss unter dieser Adresse.</h1>
<p class="lead">Diese Seite gibt es nicht – oder nicht mehr. Kein Grund zur Sorge: Wir bringen Sie zurück auf den richtigen Weg.</p>
<div class="e404__ctas">
<a class="btn btn--light" href="/">
@@ -78,8 +78,6 @@
<g transform="translate(398 112) rotate(14)">
<path d="M-8 -26h86v52H-8l10-8-12-8 11-8-11-8 12-7z" fill="url(#g-pipe2)" opacity=".9"/>
</g>
<text x="300" y="58" fill="rgba(255,255,255,.55)" font-family="ui-monospace, Menlo, Consolas, monospace" font-size="13" letter-spacing="1.5">ANSCHLUSS FEHLT</text>
<path d="M296 64v14" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
<g>
<path class="drip" d="M305 140c0 0 9 11 9 17a9 9 0 0 1-18 0c0-6 9-17 9-17z" fill="#8ED9FA"/>
<path class="drip drip-2" d="M305 140c0 0 9 11 9 17a9 9 0 0 1-18 0c0-6 9-17 9-17z" fill="#8ED9FA"/>