commit 82dc9599ccdd6628208aecd0f8a8a7bee8cb899d Author: Claude Date: Sat Oct 3 16:49:05 2026 +0000 Maßgeschneiderte Website für Olzinger Haustechnik Neuer statischer Webauftritt für die Olzinger GmbH (Heizung, Sanitär, Lüftung, regenerative Energien – Ergolding bei Landshut, seit 1985). - Hero mit live berechnetem WebGL-„Wärmebild“: Maus als Wärmequelle, Wärmespur, Isothermen und Temperaturanzeige; Preloader „Thermostat“ - Gestapelte Leistungskarten mit animierten SVG-Illustrationen - Interaktives Energie-Haus (Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung) mit Tabs, Hotspots und Autoplay - Heizungs-Finder mit Empfehlung und Übernahme ins Kontaktformular - Ablauf als sich füllende Rohrleitung, Zeitleiste mit Zählwerk, Live-Öffnungsstatus inkl. bayerischer Feiertage - Kontaktformular mit PHP-Versand (Honeypot, Zeitfalle) und mailto-Fallback; Impressum, Datenschutz, 404-Seite - Smooth-Scroll (Lenis) und GSAP-Animationen, alles lokal gehostet; reduzierte Bewegung, Betrieb ohne JavaScript, axe ohne Befunde - SEO: Schema.org HVACBusiness, Open-Graph-Bild, Sitemap, robots.txt Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Kjd7UMh3HKyVziCgiZ9A2i diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e7e04ed --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +Thumbs.db +node_modules/ +*.log diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..e281952 --- /dev/null +++ b/.htaccess @@ -0,0 +1,33 @@ +# Olzinger Haustechnik – Apache-Konfiguration (optional) +# Alle Blöcke sind abgesichert, damit fehlende Module keinen Serverfehler auslösen. + +ErrorDocument 404 /404.html + + + AddType font/woff2 .woff2 + AddType image/svg+xml .svg + AddType application/manifest+json .webmanifest + + + + Header always set X-Content-Type-Options "nosniff" + Header always set Referrer-Policy "strict-origin-when-cross-origin" + Header always set X-Frame-Options "SAMEORIGIN" + Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()" + + + + ExpiresActive On + ExpiresByType text/html "access plus 0 seconds" + ExpiresByType text/css "access plus 1 week" + ExpiresByType application/javascript "access plus 1 week" + ExpiresByType text/javascript "access plus 1 week" + ExpiresByType font/woff2 "access plus 1 year" + ExpiresByType image/svg+xml "access plus 1 month" + ExpiresByType image/png "access plus 1 month" + ExpiresByType image/jpeg "access plus 1 month" + + + + AddOutputFilterByType DEFLATE text/html text/css application/javascript text/javascript image/svg+xml application/json + diff --git a/404.html b/404.html new file mode 100644 index 0000000..9c56f4c --- /dev/null +++ b/404.html @@ -0,0 +1,96 @@ + + + + + + Seite nicht gefunden – Olzinger Haustechnik + + + + + + + + +
+
+ + 0871 72617 +
+ +
+
+

Fehler 404

+

Kein Anschluss unter dieser Adresse.

+

Diese Seite gibt es nicht – oder nicht mehr. Kein Grund zur Sorge: Wir bringen Sie zurück auf den richtigen Weg.

+
+ + Zur Startseite + + + Kontakt aufnehmen +
+
+ + +
+ + +
+ + diff --git a/README.md b/README.md new file mode 100644 index 0000000..669a962 --- /dev/null +++ b/README.md @@ -0,0 +1,93 @@ +# Olzinger Haustechnik – Website + +Maßgeschneiderter Neuauftritt für die **Olzinger GmbH** (Heizung · Sanitär · Lüftung · Regenerative Energien, Ergolding bei Landshut, seit 1985). + +Statische Website ohne Build-Schritt: HTML, CSS und JavaScript, alle Bibliotheken und Schriften lokal eingebunden (kein CDN, keine Cookies, kein Tracking). + +## Gestaltungsidee: „Wärmebild“ + +Haustechnik sieht man nicht – man spürt sie. Deshalb zeigt der Einstieg ein **live berechnetes Wärmebild** (WebGL) mit Isothermen wie bei einer Thermografie-Kamera. Die Maus wirkt als Wärmequelle, hinterlässt eine Wärmespur, und ein Messfadenkreuz zeigt die „Temperatur“ an. Durch die ganze Seite zieht sich das Motiv **warm trifft kalt** (Vorlauf/Rücklauf): Farbverlauf Blau → Magenta → Orange, das Logo als Thermostat-Skala, Bänder in Rücklauf-Blau und Vorlauf-Orange. + +## Bereiche der Startseite + +| Bereich | Besonderheit | +|---|---| +| Preloader | Thermostat-Bogen „dreht hoch“, Jahreszahl zählt von 1985 bis heute (nur beim ersten Aufruf) | +| Hero | WebGL-Wärmebild, Live-Öffnungsstatus (inkl. bayerischer Feiertage) | +| Bänder | Endlos-Laufschrift, reagiert auf Scroll-Tempo und -Richtung | +| Intro | Text „heizt sich“ Wort für Wort beim Scrollen auf | +| Leistungen | 5 gestapelte Karten (Sticky-Stack) mit animierten Illustrationen: Wärmepumpe, Heizkörper, Waschtisch, Wärmetauscher, Manometer | +| Energie-Haus | Interaktiver Hausschnitt: Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung – mit fließenden Medien in den Leitungen | +| Heizungs-Finder | 4 Fragen → Empfehlung (Wärmepumpe / Pellets / Hybrid) mit Passungsbalken; Ergebnis lässt sich ins Kontaktformular übernehmen | +| Ablauf | Rohrleitung füllt sich beim Scrollen | +| Über uns | Zähler, Zeitleiste mit Zählwerk-Jahreszahl (1985 → heute), Geschäftsführung | +| Karriere | Ausbildung Anlagenmechaniker/in SHK, Initiativbewerbung | +| Kontakt | Kontaktkarten, Öffnungszeiten mit „Heute“-Markierung, Formular | +| Footer | Schriftzug „heizt auf“ beim Scrollen | + +Außerdem: `impressum.html`, `datenschutz.html`, `404.html` („Kein Anschluss unter dieser Adresse“), weicher Seitenwechsel, SEO-Daten (Schema.org `HVACBusiness`, Open-Graph-Bild, Sitemap). + +## Lokal ansehen + +```bash +python3 -m http.server 8000 +# dann http://localhost:8000 öffnen +``` + +`index.html` lässt sich auch direkt per Doppelklick öffnen; das Kontaktformular nutzt dann den E-Mail-Fallback. + +## Veröffentlichen + +Den kompletten Ordnerinhalt auf den Webspace laden (z. B. per FTP). Voraussetzungen: + +- Beliebiger Webserver; für den direkten Formularversand **PHP 7.4+** mit funktionierender `mail()`-Funktion (`kontakt.php`). +- Ohne PHP funktioniert das Formular trotzdem: Es öffnet dann das E-Mail-Programm des Besuchers mit vorbereiteter Nachricht. +- `.htaccess` (Apache) setzt die 404-Seite, Caching und Sicherheits-Header. Bei anderen Servern einfach ignorieren. +- `404.html` nutzt absolute Pfade (`/assets/...`) – liegt die Seite in einem Unterordner, Pfade dort anpassen. + +## Vor dem Livegang prüfen (TODO) + +Die Firmendaten stammen aus öffentlich zugänglichen Quellen. Bitte bestätigen bzw. ergänzen: + +- [ ] **Impressum:** Umsatzsteuer-ID und berufsrechtliche Angaben (Kammer, Berufsbezeichnung) – als Kommentar in `impressum.html` vorbereitet. +- [ ] **Datenschutz:** Hosting-Anbieter, Speicherdauer der Server-Logs, Vertrag zur Auftragsverarbeitung – als `TODO` in `datenschutz.html` markiert. Rechtstexte sind Entwürfe und ersetzen keine Rechtsberatung. +- [ ] **Inhalte:** Mitarbeiterzahl (≈ 25), Ausbildungsstart (September), Leistungsliste, Texte zur Karriere. +- [ ] **Formular:** In `kontakt.php` Empfänger/Absender prüfen (`RECIPIENT`, `SENDER`); einmal testweise absenden. +- [ ] Optional: echte Fotos (Team, Projekte, Bäder) ergänzen – die Illustrationen sind so gestaltet, dass sie auch ohne Fotos tragen. + +## Struktur + +``` +index.html Startseite +impressum.html Impressum +datenschutz.html Datenschutzerklärung +404.html Fehlerseite +kontakt.php Formularversand (optional, PHP) +assets/css/main.css Design-System und alle Styles +assets/js/thermal.js WebGL-Wärmebild +assets/js/main.js Preloader, Smooth-Scroll, Navigation, Scroll-Animationen +assets/js/house.js Energie-Haus (Tabs, Hotspots, Autoplay) +assets/js/finder.js Heizungs-Finder (Bewertungslogik + Ergebnis) +assets/js/contact.js Öffnungszeiten live, Feiertage, Kontaktformular +assets/vendor/ GSAP, ScrollTrigger, SplitText, Lenis (lokal) +assets/fonts/ Instrument Sans & Instrument Serif (OFL, lokal) +assets/img/ Favicon, Logo, Open-Graph-Bild +tools/og-template.html Vorlage zum Neu-Rendern des Open-Graph-Bilds +``` + +## Anpassen + +- **Farben, Abstände, Schriften:** Design-Tokens am Anfang von `assets/css/main.css` (`--warm`, `--cool`, `--ink`, `--paper` …). +- **Öffnungszeiten:** in `assets/js/contact.js` (`SCHEDULE`) sowie in `index.html` (Text und Schema.org-Daten). +- **Heizungs-Finder:** Gewichtung in `assets/js/finder.js` (`evaluate`), Texte in `TEXTS`. +- **Open-Graph-Bild:** `tools/og-template.html` im Browser öffnen (über einen lokalen Server) und einen Screenshot mit 1200 × 630 px als `assets/img/og-image.jpg` speichern. + +## Qualität + +- Barrierefreiheit: geprüft mit axe-core (WCAG 2.1 AA) – keine Befunde; Tastaturbedienung für Menü, Tabs und Finder; `prefers-reduced-motion` wird respektiert (keine Smooth-Scroll-, Preloader- oder Scroll-Animationen). +- Ohne JavaScript bleiben alle Inhalte sichtbar und nutzbar. +- Getestet in Chromium: Desktop (1366, 1440, 1920 px), Tablet (834 px) und Smartphone (390 px). + +## Lizenzen + +GSAP 3.15 (Standard „No Charge“ License), Lenis (MIT), Instrument Sans/Serif (SIL OFL 1.1) – Details in `assets/vendor/LICENSES.md` und `assets/fonts/`. diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..615f7a7 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,1466 @@ +/* ========================================================================== + Olzinger Haustechnik – Stylesheet + Gestaltung: Wärmebild-Ästhetik · warm (Vorlauf) trifft kalt (Rücklauf) + ========================================================================== */ + +/* ---------- Schriften (lokal gehostet, OFL) ---------- */ +@font-face { + font-family: "Instrument Sans"; + src: url("../fonts/instrument-sans-var.woff2") format("woff2"); + font-weight: 400 700; + font-stretch: 75% 100%; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Instrument Serif"; + src: url("../fonts/instrument-serif.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Instrument Serif"; + src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +/* ---------- Design-Tokens ---------- */ +:root { + --ink: #0B151E; + --ink-2: #0F1D29; + --ink-3: #162839; + --paper: #F3EFE8; + --paper-2: #EAE4DA; + --sand: #E7DFD2; + --white: #FFFDF9; + + --text: #0B151E; + --text-2: #4D5963; + --text-dark: #F3EFE8; + --text-dark-2: rgba(243, 239, 232, .68); + + --warm: #FF6A2B; + --warm-ink: #C2410C; + --amber: #FFB547; + --magenta: #C2456B; + --cool: #2E9BEF; + --cool-ink: #1565A8; + --air: #3CCFC0; + --eco: #46C27E; + --steel: #8FB3D9; + + --line: rgba(11, 21, 30, .1); + --line-2: rgba(11, 21, 30, .2); + --line-dark: rgba(243, 239, 232, .12); + + --grad-thermal: linear-gradient(90deg, #2E9BEF 0%, #C2456B 55%, #FF6A2B 100%); + + --radius-xl: 40px; + --radius-lg: 28px; + --radius: 18px; + + --container: 1360px; + --gutter: clamp(20px, 4.2vw, 64px); + --section: clamp(96px, 12vw, 176px); + --nav-h: 84px; + + --ease: cubic-bezier(.16, 1, .3, 1); + --ease-in-out: cubic-bezier(.65, 0, .35, 1); + + --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; + --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; +} + +/* ---------- Basis ---------- */ +*, *::before, *::after { box-sizing: border-box; } + +html { + overflow-x: hidden; overflow-x: clip; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + scroll-behavior: smooth; + background: var(--ink); +} +html.lenis, html.lenis body { height: auto; } +.lenis.lenis-smooth { scroll-behavior: auto !important; } +.lenis.lenis-stopped { overflow: clip; } + +body { + margin: 0; + background: var(--paper); + color: var(--text); + font-family: var(--font-sans); + font-size: clamp(16px, .55vw + 10px, 18px); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + overflow-x: clip; +} +.has-loader body { overflow: hidden; } + +img, svg, canvas { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } +h1, h2, h3, p { overflow-wrap: break-word; } +address { font-style: normal; } + +:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 6px; } +::selection { background: var(--warm); color: var(--ink); } + +.sr-only { + position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; + overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; +} +.sprite { position: absolute; width: 0; height: 0; overflow: hidden; } + +.icon { + width: 1.15em; height: 1.15em; flex: none; + fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; +} + +.container { + width: 100%; + max-width: calc(var(--container) + var(--gutter) * 2); + margin-inline: auto; + padding-inline: var(--gutter); +} + +.skip-link { + position: fixed; top: 12px; left: 12px; z-index: 1000; + padding: 10px 18px; border-radius: 999px; + background: var(--paper); color: var(--ink); font-weight: 600; + transform: translateY(-160%); transition: transform .3s var(--ease); +} +.skip-link:focus { transform: none; } + +/* ---------- Typografie ---------- */ +.h1 { + margin: 0; + font-size: clamp(42px, 6.3vw, 102px); + line-height: .96; + letter-spacing: -.042em; + font-weight: 600; + font-stretch: 86%; + text-wrap: balance; +} +.accent { + font-family: var(--font-serif); + font-style: italic; + font-weight: 400; + font-stretch: normal; + letter-spacing: -.02em; +} +.h1 .accent { color: var(--warm-ink); font-size: 1.05em; } +.sheet--dark .h1 .accent, +.footer .accent { + color: var(--amber); + background: linear-gradient(95deg, #FFC56B 0%, #FF8A3C 45%, #FF5F6D 100%); + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; +} +.split-line { padding-bottom: .06em; margin-bottom: -.06em; } + +.lead { + margin: 0; + max-width: 48ch; + font-size: clamp(18px, 1.3vw, 21px); + line-height: 1.55; + color: var(--text-2); + text-wrap: pretty; +} +.sheet--dark .lead { color: var(--text-dark-2); } + +.label { + display: inline-flex; align-items: center; gap: 12px; + margin: 0 0 28px; + font-size: 14px; font-weight: 500; letter-spacing: .02em; + color: var(--text-2); +} +.label__num { + display: inline-grid; place-items: center; + min-width: 36px; height: 24px; padding: 0 9px; + border-radius: 999px; border: 1px solid var(--line-2); + font-family: var(--font-mono); font-size: 12px; color: var(--text); +} +.label__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-thermal); } +.sheet--dark .label { color: var(--text-dark-2); } +.sheet--dark .label__num { border-color: var(--line-dark); color: var(--paper); } + +.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; } +.eyebrow__dot { + position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); + box-shadow: 0 0 0 4px rgba(255, 106, 43, .22); +} + +/* ---------- Buttons & Links ---------- */ +.btn { + --btn-bg: var(--ink); --btn-fg: var(--paper); + --btn-fill: var(--warm); --btn-fill-fg: var(--ink); + position: relative; isolation: isolate; overflow: hidden; + display: inline-flex; align-items: center; justify-content: center; gap: 14px; + height: 58px; padding: 0 26px; + border-radius: 999px; border: 1px solid transparent; + background: var(--btn-bg); color: var(--btn-fg); + font-size: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; + transition: color .45s var(--ease), border-color .45s var(--ease); + -webkit-tap-highlight-color: transparent; +} +.btn::before { + content: ""; position: absolute; z-index: -1; + right: 8px; top: 50%; width: 42px; height: 42px; margin-top: -21px; + border-radius: 50%; background: var(--btn-fill); + transform: scale(0); transition: transform .75s var(--ease); +} +.btn:hover::before, .btn:focus-visible::before { transform: scale(13); } +.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); } +.btn:has(.btn__icon) { padding-right: 8px; } +.btn__label { position: relative; } +.btn__icon { + position: relative; display: grid; place-items: center; + width: 42px; height: 42px; border-radius: 50%; + background: var(--btn-fill); color: var(--btn-fill-fg); + transition: background-color .45s var(--ease), color .45s var(--ease); +} +.btn__icon .icon { width: 18px; height: 18px; transition: transform .6s var(--ease); } +.btn:hover .btn__icon { background: var(--btn-fill-fg); color: var(--btn-fill); } +.btn:hover .btn__icon .icon { transform: rotate(-45deg); } + +.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); } +.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--paper); } +.btn--warm { --btn-bg: var(--warm); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--paper); } +.btn--ghost { + --btn-bg: transparent; --btn-fg: var(--ink); + --btn-fill: var(--ink); --btn-fill-fg: var(--paper); + border-color: var(--line-2); +} +.btn--ghost .icon { width: 18px; height: 18px; } +.btn--ghost::before { right: auto; left: 50%; margin-left: -21px; } +.btn--ghost-light { --btn-fg: var(--paper); --btn-fill: var(--paper); --btn-fill-fg: var(--ink); border-color: rgba(243, 239, 232, .32); } +.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; } +.btn--sm::before { right: 50%; margin-right: -21px; } + +.link-arrow { + position: relative; display: inline-flex; align-items: center; gap: 10px; + padding-bottom: 5px; font-weight: 600; +} +.link-arrow::after { + content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; + background: currentColor; opacity: .3; +} +.link-arrow::before { + content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; + background: currentColor; transform: scaleX(0); transform-origin: right; + transition: transform .7s var(--ease); +} +.link-arrow:hover::before { transform: scaleX(1); transform-origin: left; } +.link-arrow .icon { width: 18px; height: 18px; transition: transform .6s var(--ease); } +.link-arrow:hover .icon { transform: translateX(5px); } + +/* ---------- Status (Öffnungszeiten live) ---------- */ +.status { + display: inline-flex; align-items: center; gap: 10px; + margin: 0; padding: 8px 15px 8px 13px; + border-radius: 999px; background: rgba(11, 21, 30, .06); + font-size: 14px; font-weight: 500; line-height: 1.3; +} +.status--dark, .hours .status { background: rgba(243, 239, 232, .09); color: var(--paper); } +.status__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9AA5AE; } +.status.is-open .status__dot { background: #3DDC84; } +.status.is-open .status__dot::after { + content: ""; position: absolute; inset: -4px; border-radius: 50%; + border: 2px solid #3DDC84; animation: ping 2.2s var(--ease) infinite; +} +.status.is-break .status__dot { background: var(--amber); } +.status.is-closed .status__dot { background: #FF6B6B; } + +/* ---------- Preloader ---------- */ +.loader { display: none; } +.has-loader .loader { + position: fixed; inset: 0; z-index: 300; + display: grid; place-items: center; + background: var(--ink); color: var(--paper); +} +.loader__center { display: grid; justify-items: center; gap: 20px; } +.loader__mark { width: clamp(96px, 11vw, 136px); height: auto; overflow: visible; } +.loader__track { fill: none; stroke: rgba(243, 239, 232, .08); stroke-width: 9; stroke-linecap: round; } +.loader__arc { fill: none; stroke-width: 9; stroke-linecap: round; } +.loader__dot { fill: var(--paper); } +.loader__year { + margin: 0; font-size: clamp(44px, 6vw, 76px); font-weight: 600; font-stretch: 80%; + letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; +} +.loader__caption { + position: absolute; bottom: 28px; margin: 0; + font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dark-2); +} +.loader__caption--l { left: var(--gutter); } +.loader__caption--r { right: var(--gutter); } + +/* ---------- Navigation ---------- */ +.nav { + position: fixed; inset: 0 0 auto 0; z-index: 100; + padding: 12px var(--gutter) 0; + pointer-events: none; + transition: transform .7s var(--ease); +} +.nav.is-hidden { transform: translateY(-160%); } +.nav.is-hidden .nav__bar { box-shadow: none; } +.nav__bar { + pointer-events: auto; + max-width: calc(var(--container) + 32px); margin-inline: auto; + height: 64px; padding: 0 8px 0 16px; + display: flex; align-items: center; justify-content: space-between; gap: 20px; + border-radius: 999px; border: 1px solid transparent; + color: var(--paper); + transition: background-color .5s var(--ease), border-color .5s, color .5s, box-shadow .5s; +} +.nav.is-scrolled .nav__bar { + background: rgba(246, 243, 237, .8); + color: var(--ink); + border-color: rgba(11, 21, 30, .08); + box-shadow: 0 12px 40px -16px rgba(11, 21, 30, .28); + -webkit-backdrop-filter: blur(18px) saturate(1.5); + backdrop-filter: blur(18px) saturate(1.5); +} +.menu-open .nav.is-scrolled .nav__bar, +.menu-open .nav__bar { + background: transparent; color: var(--paper); border-color: transparent; box-shadow: none; + -webkit-backdrop-filter: none; backdrop-filter: none; +} + +.logo { display: inline-flex; align-items: center; gap: 11px; } +.logo__mark { width: 34px; height: 34px; } +.logo__text { display: flex; flex-direction: column; line-height: 1; } +.logo__word { font-size: 19px; font-weight: 700; font-stretch: 90%; letter-spacing: .02em; text-transform: uppercase; } +.logo__sub { margin-top: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; opacity: .62; } + +.nav__links { display: flex; gap: 2px; } +.nav__links a { + position: relative; padding: 9px 14px; border-radius: 999px; + font-size: 15px; font-weight: 500; + transition: background-color .3s; +} +.nav__links a:hover { background: rgba(243, 239, 232, .1); } +.nav.is-scrolled .nav__links a:hover { background: rgba(11, 21, 30, .06); } +.nav__links a.is-active::after { + content: ""; position: absolute; left: 50%; bottom: 2px; + width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--warm); +} +.nav__actions { display: flex; align-items: center; gap: 8px; } +.nav__phone { + display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; + font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; +} +.nav__phone .icon { width: 17px; height: 17px; } +.nav__toggle { + display: none; place-items: center; + width: 48px; height: 48px; border-radius: 50%; + background: var(--paper); color: var(--ink); +} +.nav.is-scrolled .nav__toggle { background: var(--ink); color: var(--paper); } +.menu-open .nav__toggle { background: var(--paper); color: var(--ink); } +.nav__toggle-lines { position: relative; display: block; width: 18px; height: 10px; } +.nav__toggle-lines i { + position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; + transition: transform .5s var(--ease), top .5s var(--ease); +} +.nav__toggle-lines i:first-child { top: 0; } +.nav__toggle-lines i:last-child { top: 8px; } +.nav__toggle[aria-expanded="true"] .nav__toggle-lines i:first-child { top: 4px; transform: rotate(45deg); } +.nav__toggle[aria-expanded="true"] .nav__toggle-lines i:last-child { top: 4px; transform: rotate(-45deg); } + +/* Mobiles Menü */ +.menu { + position: fixed; inset: 0; z-index: 90; + display: flex; flex-direction: column; justify-content: space-between; + padding: calc(var(--nav-h) + 28px) var(--gutter) max(28px, env(safe-area-inset-bottom)); + overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; + background: var(--ink); color: var(--paper); + clip-path: circle(0% at calc(100% - var(--gutter) - 32px) 44px); + visibility: hidden; + transition: clip-path .8s var(--ease-in-out), visibility 0s linear .8s; +} +.menu.is-open { + clip-path: circle(160% at calc(100% - var(--gutter) - 32px) 44px); + visibility: visible; + transition: clip-path .9s var(--ease-in-out), visibility 0s; +} +.menu__glow { + position: absolute; right: -30vw; bottom: -30vw; width: 90vw; height: 90vw; border-radius: 50%; + background: radial-gradient(closest-side, rgba(255, 106, 43, .42), rgba(194, 69, 107, .18) 55%, transparent); + pointer-events: none; +} +.menu__links { position: relative; display: flex; flex-direction: column; } +.menu__links a { + display: flex; align-items: baseline; gap: 16px; + padding: 4px 0; + font-size: clamp(36px, 8.5vw, 64px); font-weight: 600; font-stretch: 84%; + letter-spacing: -.04em; line-height: 1.08; +} +.menu__links a span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; opacity: .5; } +.menu__foot { position: relative; display: grid; justify-items: start; gap: 14px; margin-top: 40px; font-size: 17px; } +.menu__foot a { display: inline-flex; align-items: center; gap: 10px; } + +/* ---------- Sheets (abgerundete Sektionen) ---------- */ +.sheet { + position: relative; z-index: 2; + margin-top: calc(var(--radius-xl) * -1); + border-radius: var(--radius-xl) var(--radius-xl) 0 0; + background: var(--paper); +} +.sheet--dark { background: var(--ink); color: var(--paper); } +.sheet--sand { background: var(--sand); } + +.section-head { max-width: 980px; margin-bottom: clamp(48px, 6vw, 92px); } +.section-head .h1 { margin-bottom: 28px; } +.section-head--split { + display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); + gap: clamp(28px, 4vw, 64px); align-items: end; max-width: none; +} +.section-head--split .h1 { margin-bottom: 0; } +.section-head--center { margin-inline: auto; text-align: center; } +.section-head--center .lead { margin-inline: auto; text-wrap: balance; } + +/* ========================================================================== + HERO – Wärmebild + ========================================================================== */ +.hero { + position: relative; isolation: isolate; overflow: hidden; + min-height: 100vh; min-height: 100svh; + display: flex; flex-direction: column; justify-content: flex-end; + padding: calc(var(--nav-h) + 48px) 0 calc(clamp(60px, 7vw, 100px) + 8px); + color: var(--paper); + background: + radial-gradient(42% 52% at 78% 28%, rgba(255, 106, 43, .55), rgba(138, 35, 80, .35) 45%, transparent 72%), + radial-gradient(40% 50% at 18% 85%, rgba(46, 155, 239, .22), transparent 70%), + radial-gradient(60% 60% at 50% 50%, #142C4A, #07111A 75%); +} +.hero__canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; } +.hero__shade { + position: absolute; inset: 0; z-index: -1; pointer-events: none; + background: + linear-gradient(90deg, rgba(5, 11, 18, .62) 0%, rgba(5, 11, 18, .28) 42%, rgba(5, 11, 18, 0) 68%), + linear-gradient(0deg, rgba(5, 11, 18, .7) 0%, rgba(5, 11, 18, 0) 38%); +} + +.hero__inner { + position: relative; + display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); + gap: 24px clamp(24px, 4vw, 64px); align-items: end; +} +.hero__eyebrow { grid-column: 1 / -1; color: rgba(243, 239, 232, .86); } + +.hero__title { + margin: 0; + font-size: clamp(64px, 12.4vw, 204px); + line-height: .84; + font-weight: 600; + font-stretch: 78%; + letter-spacing: -.052em; +} +.hero__line { display: flex; align-items: flex-start; gap: .07em; overflow: hidden; padding: .03em 0 .07em; margin-bottom: -.06em; } +.hero__word { display: inline-flex; align-items: baseline; will-change: transform; } +.hero__dot { + display: inline-block; flex: none; + width: .15em; height: .15em; margin-left: .045em; + border-radius: 50%; +} +.hero__dot--warm { background: var(--warm); box-shadow: 0 0 .28em rgba(255, 106, 43, .75); } +.hero__dot--cool { background: var(--cool); box-shadow: 0 0 .28em rgba(46, 155, 239, .75); } +.hero__dot--air { background: var(--air); box-shadow: 0 0 .28em rgba(60, 207, 192, .7); } +.hero__tag { + margin-top: .95em; + font-family: var(--font-mono); + font-size: clamp(10px, .82vw, 13px); + font-weight: 400; letter-spacing: .04em; line-height: 1.2; + color: rgba(243, 239, 232, .64); + white-space: nowrap; +} +.hero__tag::before { content: "("; } +.hero__tag::after { content: ")"; } + +.hero__aside { padding-bottom: .4em; } +.hero__lead { margin: 0 0 28px; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: rgba(243, 239, 232, .9); text-shadow: 0 1px 2px rgba(5, 11, 18, .35), 0 2px 22px rgba(5, 11, 18, .55); } +.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } + +.hero__bottom { + position: relative; + display: flex; align-items: center; justify-content: space-between; gap: 20px; + margin-top: clamp(36px, 6vh, 64px); padding-top: 20px; + border-top: 1px solid rgba(243, 239, 232, .14); +} +.hero__scroll { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; } +.hero__scroll-icon { + display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; + border: 1px solid rgba(243, 239, 232, .3); + transition: background-color .4s, color .4s; +} +.hero__scroll:hover .hero__scroll-icon { background: var(--paper); color: var(--ink); } +.hero__scroll-icon .icon { width: 18px; height: 18px; animation: nudge 2.4s var(--ease) infinite; } + +/* Messfadenkreuz */ +.probe { + position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; + pointer-events: none; opacity: 0; transition: opacity .4s; + will-change: transform; +} +.probe.is-on { opacity: 1; } +.probe__frame { + position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; + --c: rgba(255, 255, 255, .9); + background: + linear-gradient(var(--c), var(--c)) top left / 11px 1.5px no-repeat, + linear-gradient(var(--c), var(--c)) top left / 1.5px 11px no-repeat, + linear-gradient(var(--c), var(--c)) top right / 11px 1.5px no-repeat, + linear-gradient(var(--c), var(--c)) top right / 1.5px 11px no-repeat, + linear-gradient(var(--c), var(--c)) bottom left / 11px 1.5px no-repeat, + linear-gradient(var(--c), var(--c)) bottom left / 1.5px 11px no-repeat, + linear-gradient(var(--c), var(--c)) bottom right / 11px 1.5px no-repeat, + linear-gradient(var(--c), var(--c)) bottom right / 1.5px 11px no-repeat; +} +.probe__dot { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; } +.probe__val { + position: absolute; left: 34px; top: 12px; + padding: 4px 8px; border-radius: 6px; + background: rgba(5, 11, 18, .58); + -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); + font-family: var(--font-mono); font-size: 12px; white-space: nowrap; color: #fff; + font-variant-numeric: tabular-nums; +} + +/* Skala (horizontal, in der unteren Leiste) */ +.legend { + display: flex; align-items: center; gap: 12px; + font-family: var(--font-mono); font-size: 11px; color: rgba(243, 239, 232, .7); + pointer-events: none; +} +.legend__rec { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .16em; margin-right: 4px; } +.legend__rec i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; animation: blink 1.6s steps(1) infinite; } +.legend__val { font-variant-numeric: tabular-nums; } +.legend__bar { + position: relative; width: clamp(100px, 11vw, 170px); height: 6px; border-radius: 6px; + background: linear-gradient(90deg, #0B1B2E 0%, #14335A 14%, #3B2466 32%, #8A2350 48%, #E0482A 62%, #FF8A2A 76%, #FFD27A 90%, #FFF6E0 100%); + box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); +} +.legend__marker { + position: absolute; left: 30%; top: -6px; + width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; + background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .7); + transition: left .35s var(--ease); +} +.legend__hint { margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(243, 239, 232, .2); } + +.no-webgl .probe, .no-webgl .legend { display: none; } + +/* Intro-Startzustände (nur mit JS) */ +.js .hero__word { transform: translateY(112%); } +.js .hero__dot { transform: scale(0); } +.js .hero__tag, .js [data-hero-fade] { opacity: 0; } +.js .nav__bar { opacity: 0; } + +/* ========================================================================== + TAPES – Vorlauf / Rücklauf + ========================================================================== */ +.tapes { + position: relative; z-index: 4; + overflow: hidden; overflow-x: clip; overflow-y: visible; + height: clamp(110px, 12vw, 180px); + margin-top: calc(clamp(110px, 12vw, 180px) / -2); + pointer-events: none; +} +.tape { + position: absolute; left: -4%; right: -4%; top: 50%; + padding: clamp(12px, 1.25vw, 18px) 0; + overflow: hidden; white-space: nowrap; + box-shadow: 0 24px 40px -24px rgba(5, 11, 18, .55); +} +.tape--warm { background: var(--warm); color: var(--ink); transform: translateY(-50%) rotate(-2.6deg); } +.tape--cool { background: var(--cool); color: #fff; transform: translateY(-50%) rotate(2.2deg); } +.tape__track { + display: inline-flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); + padding-right: clamp(16px, 1.8vw, 28px); + font-size: clamp(17px, 2vw, 30px); font-weight: 600; font-stretch: 84%; + letter-spacing: -.01em; text-transform: uppercase; line-height: 1; + will-change: transform; +} +.tape__track .icon { width: .7em; height: .7em; } + +/* ========================================================================== + INTRO + ========================================================================== */ +.intro { padding: clamp(96px, 11vw, 168px) 0 var(--section); } +.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; } +.intro .label { grid-column: 1 / -1; } +.intro__text { + grid-column: 1 / span 9; margin: 0; + font-size: clamp(27px, 3.4vw, 54px); + line-height: 1.17; letter-spacing: -.032em; font-weight: 500; font-stretch: 92%; + text-wrap: pretty; +} +.intro__aside { + grid-column: 10 / span 3; align-self: end; + display: grid; justify-items: start; gap: 18px; + padding-bottom: .5em; color: var(--text-2); font-size: 16px; +} +.intro__aside p { margin: 0; } +.intro__aside .link-arrow { color: var(--ink); } + +.ichip { + display: inline-grid; place-items: center; + width: 1.55em; height: 1em; margin: 0 .03em; vertical-align: -.1em; + border-radius: 999px; +} +.ichip .icon { width: .58em; height: .58em; stroke-width: 2.2; } +.ichip--warm { background: linear-gradient(120deg, #FFC56B, #FF6A2B); color: var(--ink); } +.ichip--cool { background: linear-gradient(120deg, #8ED9FA, #2E9BEF); color: var(--ink); } +.ichip--air { background: linear-gradient(120deg, #B2F2EA, #3CCFC0); color: var(--ink); } + +.badge { position: relative; width: 128px; height: 128px; color: var(--ink); } +.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; overflow: visible; } +.badge__ring text { font-size: 10.6px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: currentColor; } +.badge__mark { position: absolute; inset: 33%; width: 34%; height: 34%; } + +/* ========================================================================== + LEISTUNGEN – gestapelte Karten + ========================================================================== */ +.services { padding: var(--section) 0 calc(var(--section) * .55 + var(--radius-xl)); } +.stack { position: relative; display: grid; gap: 28px; } +.svc { position: relative; } +.svc--eco { --c: var(--eco); } +.svc--warm { --c: var(--warm); } +.svc--cool { --c: var(--cool); } +.svc--air { --c: var(--air); } +.svc--steel { --c: var(--steel); } + +.svc__inner { + --shade: 0; + position: relative; overflow: hidden; + display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); + gap: clamp(20px, 3vw, 44px); + min-height: min(620px, calc(100vh - var(--nav-h) - 72px)); + padding: clamp(18px, 2.4vw, 36px); + border-radius: var(--radius-xl); + background: var(--ink-2); + color: var(--paper); + border: 1px solid rgba(255, 255, 255, .06); + box-shadow: 0 40px 90px -50px rgba(11, 21, 30, .7); + transform-origin: 50% 0; +} +.svc__inner::after { + content: ""; position: absolute; inset: 0; border-radius: inherit; + background: #05090D; opacity: var(--shade); pointer-events: none; +} +.svc__body { display: flex; flex-direction: column; padding: clamp(6px, 1.4vw, 18px); } +.svc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } +.svc__num { font-family: var(--font-mono); font-size: 13px; color: var(--text-dark-2); } +.svc__cat { + display: inline-flex; align-items: center; gap: 8px; + padding: 8px 14px; border-radius: 999px; + background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); + font-size: 14px; font-weight: 500; +} +.svc__cat .icon { width: 17px; height: 17px; color: var(--c); } +.svc__title { + margin: auto 0 18px; padding-top: 36px; + font-size: clamp(32px, 3.5vw, 56px); line-height: 1.0; + letter-spacing: -.04em; font-weight: 600; font-stretch: 86%; + text-wrap: balance; +} +.svc__text { margin: 0 0 26px; max-width: 48ch; color: var(--text-dark-2); } +.svc__list { + list-style: none; margin: 0 0 30px; padding: 0; + display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; + font-size: 15.5px; line-height: 1.4; +} +.svc__list li { display: flex; align-items: flex-start; gap: 10px; } +.svc__list .icon { width: 17px; height: 17px; margin-top: .1em; color: var(--c); stroke-width: 2.2; } +.svc__foot { + display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; + padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); +} +.svc__badge { + display: inline-flex; align-items: center; gap: 8px; + padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; + background: color-mix(in srgb, var(--c) 16%, transparent); + color: color-mix(in srgb, var(--c) 55%, #fff); +} +.svc__badge .icon { width: 15px; height: 15px; } +.svc__badge--link { transition: background-color .3s; } +.svc__badge--link:hover { background: color-mix(in srgb, var(--c) 30%, transparent); } + +.svc__art { + position: relative; isolation: isolate; overflow: hidden; + min-height: 300px; + border-radius: calc(var(--radius-xl) - 12px); + background: + radial-gradient(110% 90% at 70% 15%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%), + #08121A; + border: 1px solid rgba(255, 255, 255, .05); +} +.svc__art::before { + content: ""; position: absolute; inset: 0; z-index: -1; + background-image: + linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); + background-size: 32px 32px; background-position: -1px -1px; + -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); + mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); +} +.art { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4%; } + +/* SVG-Illustrationen */ +.art .a-line { fill: none; stroke: rgba(255, 255, 255, .88); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } +.art .a-thin { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.4; stroke-linecap: round; } +.art .a-faint { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.4; } +.art .a-fill { fill: rgba(255, 255, 255, .045); } +.art .a-fill-dark { fill: #0C1822; } +.art .a-thick { stroke-width: 3.5; } +.art .a-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; fill: rgba(255, 255, 255, .6); text-transform: uppercase; } +.art .a-label--chip { fill: rgba(255, 255, 255, .92); text-transform: none; letter-spacing: .01em; } +.art .a-temp { font-family: var(--font-mono); font-size: 15px; fill: #fff; } +.art .a-chip rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .16); } +.art .a-pipe { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } +.art .a-flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 12; --dash: -14; animation: dash 1.1s linear infinite; } +.art .a-flow--pipe { stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-dasharray: 3 15; --dash: -18; } +.c-warm { stroke: var(--warm); } +.c-cool { stroke: var(--cool); } +.c-eco { stroke: var(--eco); } +.c-air { stroke: var(--air); } +.c-amber { stroke: var(--amber); } +.c-amber-dim { stroke: #C98A2E; } +.c-hot { stroke: #FF4D3D; } +.c-exhaust { stroke: #B48CDE; } +.c-air-dim { stroke: #2B9E93; } +.c-exhaust-dim { stroke: #8A6AAE; } +.c-warm-fill { fill: var(--warm); } +.c-eco-fill { fill: var(--eco); } +.c-air-fill { fill: var(--air); } + +.a-spin-slow { transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; } +.a-fan { transform-box: fill-box; transform-origin: center; animation: spin 1.5s linear infinite; } +.art .a-blade { fill: rgba(255, 255, 255, .85); } +.art .a-hub { fill: #fff; } +.art .a-hub-ring { fill: #0C1822; stroke: rgba(255, 255, 255, .85); stroke-width: 2; } +.art .a-ray { fill: none; stroke: #FFD27A; stroke-width: 3; stroke-linecap: round; } +.art .a-leaf { fill: rgba(70, 194, 126, .18); stroke: var(--eco); stroke-width: 2; stroke-linejoin: round; } +.art .a-leaf-vein { fill: none; stroke: var(--eco); stroke-width: 1.6; stroke-linecap: round; } +.art .a-led { fill: var(--eco); animation: glow 2.4s ease-in-out infinite; } +.art .a-chip-dot { animation: glow 2s ease-in-out infinite; } + +.art .a-wave { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; opacity: 0; animation: rise 3s ease-in-out infinite; } +.art .a-heatfill { transform-box: fill-box; transform-origin: 50% 100%; animation: heat 7s var(--ease-in-out) infinite; } +.art .a-knob { transform-box: fill-box; transform-origin: center; animation: knob 7s var(--ease-in-out) infinite; } +.art .a-needle-line { fill: none; stroke: var(--warm); stroke-width: 3; stroke-linecap: round; } + +.art .a-spout { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 12; stroke-linecap: round; } +.art .a-stream { fill: none; stroke: url(#g-water); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 16 6; --dash: -22; animation: dash .55s linear infinite; } +.art .a-ripple { fill: none; stroke: #8ED9FA; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: ripple 1.8s ease-out infinite; } +.art .a-float { animation: float 5s ease-in-out infinite; } + +.art .a-duct { fill: none; stroke-width: 24; stroke-linecap: round; opacity: .14; } +.art .a-stream-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; --dash: -24; animation: dash 1.15s linear infinite; } + +.art .a-gauge-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; stroke-linecap: round; } +.art .a-gauge-ok { fill: none; stroke: var(--eco); stroke-width: 8; stroke-linecap: round; } +.art .a-gauge-high { fill: none; stroke: #FF5A5A; stroke-width: 8; stroke-linecap: round; opacity: .85; } +.art .a-ticks { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-linecap: round; } +.art .a-gauge-nums text { font-family: var(--font-mono); font-size: 15px; fill: rgba(255, 255, 255, .8); text-anchor: middle; } +.art .a-needle { transform-box: fill-box; transform-origin: center; transform: rotate(256.5deg); } +.svc.is-inview .a-needle { animation: needle-in 2.6s var(--ease) both, needle-idle 3.4s ease-in-out 2.6s infinite; } +.art .a-card rect { fill: rgba(12, 24, 34, .94); stroke: rgba(255, 255, 255, .16); } +.art .a-checks path { fill: none; stroke: var(--eco); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } +.art .a-card-text { font-family: var(--font-sans); font-size: 14px; fill: rgba(255, 255, 255, .86); } + +/* Animationen der Illustrationen nur, wenn die Karte sichtbar ist */ +.js .svc .art * { animation-play-state: paused; } +.js .svc.is-inview .art * { animation-play-state: running; } + +/* ========================================================================== + ENERGIE-HAUS + ========================================================================== */ +.house { padding: var(--section) 0 calc(var(--section) + var(--radius-xl)); } +.house .h1 { color: var(--paper); } +.house__grid { + display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); + gap: clamp(24px, 3vw, 48px); align-items: center; +} +.house__stage { position: relative; aspect-ratio: 900 / 640; } +.house__svg { width: 100%; height: 100%; overflow: visible; } + +.h-cellar { fill: var(--ink); } +.h-ground { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.5; } +.h-roof { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; } +.h-wall { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 4; } +.h-wall--in { stroke-width: 2.5; stroke: rgba(255, 255, 255, .28); } +.h-slab { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 8; } +.h-thin { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; } +.h-furn { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } +.h-labels text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: rgba(255, 255, 255, .36); } + +.h-unit { fill: #13222F; stroke: rgba(255, 255, 255, .78); stroke-width: 2; } +.h-unit-line { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-linecap: round; } +.h-fan path { fill: rgba(255, 255, 255, .78); } +.h-airwaves path { fill: none; stroke: var(--eco); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 9; --dash: -12; animation: dash 1s linear infinite; } +.h-pipe { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; } +.h-flow { fill: none; stroke: rgba(255, 255, 255, .92) !important; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 12; --dash: -15; animation: dash 1.1s linear infinite; } +.h-panel { fill: url(#g-panel); stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; stroke-linejoin: round; } +.h-panel-line { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; } +.h-ray { fill: none; stroke: #FFD27A; stroke-width: 2.5; stroke-linecap: round; } +.h-sun-core { fill: #FFC15E; } +.h-tank { fill: url(#g-tank); stroke: rgba(255, 255, 255, .8); stroke-width: 2; } +.h-tank-glow { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; } +.h-floorglow { animation: breathe 4s ease-in-out infinite; } +.h-loops path { fill: none; stroke: var(--warm); stroke-width: 6; stroke-linecap: round; } +.h-meter { fill: #13222F; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; } +.h-fixture { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } +.h-drops path { fill: none; stroke: #8ED9FA; stroke-width: 2; stroke-linecap: round; animation: drops 1.1s linear infinite; } +.h-drops path:nth-child(2n) { animation-delay: -.45s; } +.h-drops path:nth-child(3n) { animation-delay: -.8s; } +.h-duct { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .32; } +.h-duct-flow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 10; --dash: -16; animation: dash 1.25s linear infinite; } +.h-vent { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 3; stroke-linecap: round; } + +.sys { transition: opacity .7s var(--ease); } +.js .house__grid .sys { opacity: .26; } +.js .house__grid .sys.is-on { opacity: 1; } +.house__grid .sys.is-on .h-pipe { opacity: .95; } + +.hotspot { + position: absolute; left: var(--x); top: var(--y); z-index: 2; + width: 34px; height: 34px; margin: -17px 0 0 -17px; + display: grid; place-items: center; + border-radius: 50%; + background: rgba(11, 21, 30, .6); + border: 1.5px solid rgba(255, 255, 255, .8); + -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); + transition: transform .45s var(--ease), background-color .35s, border-color .35s; +} +.hotspot::before { + content: ""; width: 12px; height: 12px; + background: + linear-gradient(#fff, #fff) center / 100% 2px no-repeat, + linear-gradient(#fff, #fff) center / 2px 100% no-repeat; + transition: transform .5s var(--ease); +} +.hotspot::after { + content: ""; position: absolute; inset: -7px; border-radius: 50%; + border: 1.5px solid rgba(255, 255, 255, .55); + animation: ping 2.6s var(--ease) infinite; +} +.hotspot:hover { transform: scale(1.12); } +.hotspot.is-active { background: var(--warm); border-color: var(--warm); } +.hotspot.is-active::before { + transform: rotate(45deg); + background: + linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, + linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; +} +.hotspot.is-active::after { border-color: rgba(255, 106, 43, .7); } +.hotspot__label { + position: absolute; left: calc(100% + 10px); top: 50%; + padding: 6px 12px; border-radius: 999px; + background: var(--paper); color: var(--ink); + font-size: 13px; font-weight: 600; white-space: nowrap; + opacity: 0; transform: translate(-6px, -50%); pointer-events: none; + transition: opacity .3s, transform .45s var(--ease); +} +.hotspot[data-part="wp"] .hotspot__label { left: auto; right: calc(100% + 10px); transform: translate(6px, -50%); } +.hotspot:hover .hotspot__label, +.hotspot:focus-visible .hotspot__label, +.hotspot.is-active .hotspot__label { opacity: 1; transform: translate(0, -50%); } + +.house__panel { + position: relative; overflow: hidden; + padding: clamp(20px, 2.2vw, 30px); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, .035); + border: 1px solid rgba(255, 255, 255, .08); +} +.house__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 26px; } +.house__tabs button { + display: flex; align-items: center; gap: 10px; + padding: 11px 13px; border-radius: 14px; + background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); + color: var(--text-dark-2); font-size: 14px; font-weight: 500; text-align: left; line-height: 1.25; + transition: background-color .35s, color .35s, border-color .35s; +} +.house__tabs button:hover { color: var(--paper); border-color: rgba(255, 255, 255, .2); } +.house__tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); } +.house__tabs .icon { width: 18px; height: 18px; } +.part[hidden] { display: none; } +.part.is-active { animation: part-in .7s var(--ease) both; } +.part__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); } +.part__title { margin: 0 0 12px; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; font-stretch: 88%; } +.part p { margin: 0 0 18px; color: var(--text-dark-2); } +.part__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; font-size: 15.5px; } +.part__points li { display: flex; align-items: flex-start; gap: 12px; } +.part__points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--warm); } +.house__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); } +.house__progress i { display: block; width: 100%; height: 100%; background: var(--grad-thermal); transform: scaleX(0); transform-origin: left; } + +/* ========================================================================== + HEIZUNGS-FINDER + ========================================================================== */ +.finder { padding: var(--section) 0; } +.finder__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 88px); align-items: start; } +.finder__head { position: sticky; top: calc(var(--nav-h) + 48px); margin-bottom: 0; } +.finder__note { display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; font-size: 14px; color: var(--text-2); } +.finder__note .icon { color: var(--eco); } +.finder__app { + position: relative; + display: flex; flex-direction: column; + min-height: 540px; + padding: clamp(22px, 3vw, 44px); + border-radius: var(--radius-xl); + background: var(--white); + border: 1px solid var(--line); + box-shadow: 0 50px 90px -60px rgba(11, 21, 30, .45); +} +.finder__top { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; } +.finder__count { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); white-space: nowrap; } +.finder__progress { flex: 1; height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; } +.finder__progress i { display: block; width: 100%; height: 100%; background: var(--grad-thermal); transform: scaleX(.25); transform-origin: left; transition: transform .9s var(--ease); } +.finder__form { position: relative; } +.finder__step { min-width: 0; margin: 0; padding: 0; border: 0; } +.finder__q { + margin: 0 0 26px; padding: 0; + font-size: clamp(26px, 2.3vw, 38px); line-height: 1.1; letter-spacing: -.032em; font-weight: 600; font-stretch: 90%; +} +.finder__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } +.finder__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.opt { position: relative; display: block; cursor: pointer; } +.opt input { position: absolute; opacity: 0; pointer-events: none; } +.opt__box { + display: flex; flex-direction: column; gap: 6px; height: 100%; + padding: 22px 20px; + border-radius: 20px; border: 1.5px solid var(--line); + background: var(--paper); + transition: border-color .3s, background-color .3s, box-shadow .35s, transform .5s var(--ease); +} +.opt__box .icon { width: 34px; height: 34px; margin-bottom: 14px; stroke-width: 1.4; } +.opt__box strong { font-size: 17px; font-weight: 600; line-height: 1.25; } +.opt__box small { font-size: 14px; line-height: 1.4; color: var(--text-2); } +.opt:hover .opt__box { border-color: var(--ink); transform: translateY(-3px); } +.opt input:focus-visible + .opt__box { outline: 2px solid var(--warm); outline-offset: 3px; } +.opt input:checked + .opt__box { border-color: var(--warm); background: #FFF3EA; box-shadow: 0 0 0 4px rgba(255, 106, 43, .14); } +.opt input:checked + .opt__box .icon { color: var(--warm-ink); } +.finder__nav { margin-top: auto; padding-top: 28px; } +.finder__back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: color .3s; } +.finder__back:hover { color: var(--ink); } +.finder__back:disabled { opacity: .3; cursor: default; } +.finder__back .icon { width: 18px; height: 18px; } +.finder__app.is-done .finder__nav { display: none; } + +.finder__result:focus { outline: none; } +.finder__result-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-ink); } +.finder__result-title { margin: 0 0 14px; font-size: clamp(32px, 3.2vw, 50px); line-height: 1; letter-spacing: -.04em; font-weight: 600; font-stretch: 86%; } +.finder__result-text { margin: 0; color: var(--text-2); max-width: 56ch; } +.finder__bars-label { margin: 26px 0 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } +.finder__bars { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; } +.finder__bars li { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 48px; align-items: center; gap: 14px; font-size: 15px; } +.finder__bars li.is-top { font-weight: 600; } +.finder__bars b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } +.bar { height: 10px; border-radius: 10px; background: var(--paper-2); overflow: hidden; } +.bar i { display: block; height: 100%; border-radius: 10px; background: var(--grad-thermal); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); } +li:not(.is-top) .bar i { background: linear-gradient(90deg, #9FB0BE, #6E8292); } +.finder__addons { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } +.finder__addons li { + display: inline-flex; align-items: center; gap: 8px; + padding: 8px 14px; border-radius: 999px; + background: var(--paper); border: 1px solid var(--line); + font-size: 14px; font-weight: 500; +} +.finder__addons .icon { width: 16px; height: 16px; color: var(--warm-ink); } +.finder__actions { display: flex; flex-wrap: wrap; gap: 12px; } +.finder__disclaimer { margin: 20px 0 0; font-size: 13px; color: var(--text-2); } + +/* ========================================================================== + ABLAUF + ========================================================================== */ +.process { + position: relative; + padding: calc(var(--section) * .6) 0 calc(var(--section) + var(--radius-xl)); +} +.process::before { + content: ""; position: absolute; inset: 0; pointer-events: none; + background-image: + linear-gradient(var(--line) 1px, transparent 1px), + linear-gradient(90deg, var(--line) 1px, transparent 1px); + background-size: 56px 56px; + -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, .5), transparent 75%); + mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, .5), transparent 75%); +} +.steps { --g: clamp(20px, 3vw, 44px); position: relative; } +.steps__list { + position: relative; list-style: none; margin: 0; padding: 0; + display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); +} +.steps__pipe { + position: absolute; left: 32px; top: 28px; + width: calc(75% + var(--g) * .75); + height: 8px; border-radius: 8px; + background: var(--paper-2); + box-shadow: inset 0 1px 2px rgba(11, 21, 30, .12); + overflow: hidden; +} +.steps__fill { + display: block; width: 100%; height: 100%; + background: linear-gradient(90deg, var(--cool), var(--magenta) 55%, var(--warm)); + transform: scaleX(0); transform-origin: left; +} +.step { position: relative; } +.step__node { + position: relative; z-index: 1; + display: grid; place-items: center; + width: 64px; height: 64px; margin-bottom: 28px; + border-radius: 50%; + background: var(--paper); border: 2px solid var(--line-2); + font-family: var(--font-mono); font-size: 14px; + transition: background-color .5s, border-color .5s, color .5s, box-shadow .6s var(--ease), transform .6s var(--ease); +} +.step.is-on .step__node { + background: var(--ink); border-color: var(--ink); color: var(--paper); + box-shadow: 0 0 0 7px rgba(255, 106, 43, .2); + transform: scale(1.04); +} +.step__title { margin: 0 0 10px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; } +.step p { margin: 0; color: var(--text-2); } + +/* ========================================================================== + ÜBER UNS + ========================================================================== */ +.about { padding: var(--section) 0 calc(var(--section) + var(--radius-xl)); } +.stats { + list-style: none; margin: 0 0 clamp(72px, 9vw, 140px); padding: 0; + display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); + border-top: 1px solid var(--line-2); +} +.stat { padding: 28px 24px 0; border-left: 1px solid var(--line); } +.stat:first-child { padding-left: 0; border-left: 0; } +.stat__num { + display: block; + font-size: clamp(54px, 6.6vw, 108px); line-height: .9; + font-weight: 600; font-stretch: 80%; letter-spacing: -.05em; + font-variant-numeric: tabular-nums; +} +.stat__num small { margin-right: .04em; font-size: .5em; font-weight: 500; vertical-align: .55em; } +.stat__label { display: block; margin-top: 14px; color: var(--text-2); } + +.history { + display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); + gap: clamp(32px, 6vw, 96px); + margin-bottom: clamp(72px, 9vw, 140px); +} +.history__year { position: sticky; top: calc(50vh - 130px); align-self: start; } +.odo { + display: flex; + height: 1em; overflow: hidden; + font-size: clamp(96px, 13vw, 208px); line-height: 1; + font-weight: 600; font-stretch: 78%; letter-spacing: -.04em; + font-variant-numeric: tabular-nums; +} +.odo__digit { display: block; height: 1em; overflow: hidden; } +.odo__digit:nth-child(3), .odo__digit:nth-child(4) { color: var(--warm-ink); } +.odo__strip { display: block; width: 1ch; line-height: 1; word-break: break-all; text-align: center; will-change: transform; } +.history__caption { margin: 18px 0 0; font-size: 18px; font-weight: 500; color: var(--text-2); } +.history__list { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--line-2); } +.tl { position: relative; padding: 0 0 clamp(56px, 11vh, 128px) clamp(28px, 3vw, 48px); } +.tl:last-child { padding-bottom: 8px; } +.tl__title, .tl p, .tl__year { transition: color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); } +.js .tl:not(.is-active) .tl__title { color: #56616B; } +.js .tl:not(.is-active) p { color: #56616B; } +.js .tl:not(.is-active) .tl__year { background: transparent; color: #4D5963; box-shadow: inset 0 0 0 1px var(--line-2); } +.tl::before { + content: ""; position: absolute; left: -7px; top: 6px; + width: 12px; height: 12px; border-radius: 50%; + background: var(--sand); border: 2px solid var(--ink); + transition: background-color .4s, border-color .4s, box-shadow .5s; +} +.tl.is-active::before { background: var(--warm); border-color: var(--warm); box-shadow: 0 0 0 6px rgba(255, 106, 43, .2); } +.tl__year { + display: inline-block; margin-bottom: 14px; padding: 4px 11px; + border-radius: 999px; background: var(--ink); color: var(--paper); + font-family: var(--font-mono); font-size: 13px; +} +.tl__title { margin: 0 0 10px; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; font-stretch: 90%; } +.tl p { margin: 0; max-width: 46ch; color: var(--text-2); } + +.leaders__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } +.leader { + display: flex; align-items: center; gap: 18px; + padding: 22px; border-radius: var(--radius-lg); + background: var(--paper); border: 1px solid var(--line); + transition: transform .6s var(--ease), box-shadow .5s; +} +.leader:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(11, 21, 30, .45); } +.leader__avatar { + flex: none; display: grid; place-items: center; + width: 76px; height: 76px; border-radius: 50%; + font-family: var(--font-serif); font-style: italic; font-size: 30px; color: #fff; +} +.leader__avatar--warm { background: radial-gradient(circle at 30% 28%, #FFC56B, #FF6A2B 55%, #C2456B); } +.leader__avatar--cool { background: radial-gradient(circle at 30% 28%, #8ED9FA, #2E9BEF 55%, #3B2466); } +.leader__avatar--team { background: var(--ink); } +.leader__avatar--team .icon { width: 32px; height: 32px; stroke-width: 1.5; } +.leader__name { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; } +.leader__role { margin: 0; font-size: 15px; line-height: 1.4; } +.leader__meta { margin: 4px 0 0; font-size: 14px; color: var(--text-2); } + +/* ========================================================================== + KARRIERE + ========================================================================== */ +.career { overflow: hidden; padding: var(--section) 0 calc(var(--section) + var(--radius-xl)); } +.career__glow { + position: absolute; right: -22vw; top: -18vw; width: 72vw; height: 72vw; border-radius: 50%; + background: radial-gradient(closest-side, rgba(255, 106, 43, .32), rgba(194, 69, 107, .14) 55%, transparent); + pointer-events: none; +} +.career__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } +.career .h1 { margin-bottom: 28px; } +.perks { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } +.perks li { + display: inline-flex; align-items: center; gap: 9px; + padding: 10px 16px; border-radius: 999px; + border: 1px solid rgba(243, 239, 232, .16); + font-size: 15px; +} +.perks .icon { width: 17px; height: 17px; color: var(--amber); } +.jobs { display: grid; gap: 16px; } +.job { + padding: clamp(24px, 3vw, 36px); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, .04); + border: 1px solid rgba(255, 255, 255, .1); + transition: background-color .4s, border-color .4s, transform .6s var(--ease); +} +.job:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); transform: translateY(-4px); } +.job__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } +.job__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--warm); color: var(--ink); } +.job__icon .icon { width: 20px; height: 20px; } +.job__tag { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--text-dark-2); } +.job__title { margin: 0 0 12px; font-size: clamp(22px, 1.9vw, 29px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; font-stretch: 92%; } +.job p { margin: 0 0 22px; color: var(--text-dark-2); } + +/* ========================================================================== + KONTAKT + ========================================================================== */ +.contact { padding: var(--section) 0 calc(var(--section) + var(--radius-xl)); } +.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; } +.contact .h1 { margin-bottom: 28px; } +.cards { list-style: none; margin: 40px 0 16px; padding: 0; display: grid; gap: 10px; } +.ccard { + display: flex; align-items: center; gap: 16px; + padding: 14px 18px 14px 14px; border-radius: 20px; + background: var(--white); border: 1px solid var(--line); + transition: transform .6s var(--ease), border-color .3s, box-shadow .4s; +} +a.ccard:hover { transform: translateX(6px); border-color: var(--line-2); box-shadow: 0 24px 50px -36px rgba(11, 21, 30, .45); } +.ccard__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--paper-2); } +.ccard__icon .icon { width: 20px; height: 20px; } +.ccard__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } +.ccard__body small { font-size: 13px; color: var(--text-2); } +.ccard__body strong { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; } +.ccard__go { width: 18px; height: 18px; margin-left: auto; opacity: .4; transition: transform .5s var(--ease), opacity .3s; } +a.ccard:hover .ccard__go { opacity: 1; transform: translate(2px, -2px); } + +.hours { padding: 22px; border-radius: 22px; background: var(--ink); color: var(--paper); } +.hours__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } +.hours__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; } +.hours__list { margin: 0; } +.hours__list div { + display: flex; justify-content: space-between; gap: 16px; + padding: 11px 0; border-top: 1px solid rgba(243, 239, 232, .1); + font-size: 15px; +} +.hours__list dt { color: var(--text-dark-2); } +.hours__list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } +.hours__list .is-today dt, .hours__list .is-today dd { color: var(--paper); font-weight: 600; } +.hours__list .is-today dt::after { + content: "Heute"; margin-left: 10px; padding: 2px 8px; border-radius: 999px; + background: var(--warm); color: var(--ink); font-size: 11px; font-weight: 600; vertical-align: 1px; +} + +.form { + padding: clamp(22px, 3.2vw, 46px); + border-radius: var(--radius-xl); + background: var(--white); border: 1px solid var(--line); + box-shadow: 0 50px 90px -60px rgba(11, 21, 30, .45); +} +.form__topics { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; } +.form__legend { margin-bottom: 14px; padding: 0; font-size: 15px; font-weight: 600; } +.chips { display: flex; flex-wrap: wrap; gap: 8px; } +.chip { position: relative; } +.chip input { position: absolute; opacity: 0; pointer-events: none; } +.chip span { + display: inline-flex; padding: 9px 16px; border-radius: 999px; + border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; + cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; +} +.chip:hover span { border-color: var(--ink); } +.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); } +.chip input:focus-visible + span { outline: 2px solid var(--warm); outline-offset: 2px; } +.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } +.field { position: relative; margin-bottom: 20px; } +.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; } +.field label small { font-size: 13px; font-weight: 400; color: var(--text-2); } +.field input, .field textarea { + width: 100%; padding: 14px 16px; + font: inherit; font-size: 17px; color: var(--ink); + background: var(--paper); border: 1.5px solid transparent; border-radius: 14px; + transition: border-color .3s, background-color .3s, box-shadow .3s; +} +.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; } +.field input:hover, .field textarea:hover { border-color: var(--line-2); } +.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255, 106, 43, .16); } +.field__error { display: none; margin: 8px 0 0; font-size: 13px; color: #B42318; } +.field.is-invalid input, .field.is-invalid textarea { border-color: #D93C3C; background: #FFF6F5; } +.field.is-invalid .field__error { display: block; } +.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } +.field--check { margin-top: 6px; } +.check, .field .check { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-2); } +.check input { position: absolute; opacity: 0; pointer-events: none; } +.check__box { + flex: none; display: grid; place-items: center; + width: 24px; height: 24px; margin-top: 1px; + border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--paper); + transition: background-color .25s, border-color .25s; +} +.check__box .icon { width: 15px; height: 15px; stroke-width: 2.6; color: var(--paper); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--ease); } +.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); } +.check input:checked + .check__box .icon { opacity: 1; transform: none; } +.check input:focus-visible + .check__box { outline: 2px solid var(--warm); outline-offset: 2px; } +.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } +.field--check.is-invalid .check__box { border-color: #D93C3C; } +.form__submit { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 10px; } +.form__hint { margin: 0; font-size: 13px; color: var(--text-2); } +.form__status:empty { display: none; } +.form__status { margin-top: 18px; padding: 15px 18px; border-radius: 14px; font-size: 15px; line-height: 1.5; } +.form__status.is-success { background: #E6F6EC; color: #14532D; } +.form__status.is-info { background: #FFF2E8; color: #7C2D12; } +.form__status.is-error { background: #FDECEC; color: #7F1D1D; } +.form.is-busy button[type="submit"] { opacity: .6; pointer-events: none; } + +/* ========================================================================== + FOOTER + ========================================================================== */ +.footer { overflow: hidden; padding: clamp(80px, 10vw, 136px) 0 26px; } +.footer__cta { + display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 32px; + padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line-dark); +} +.footer__claim { margin: 0; max-width: 15ch; font-size: clamp(36px, 5vw, 78px); line-height: 1; letter-spacing: -.042em; font-weight: 600; font-stretch: 86%; } +.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 5vw, 64px) 0; } +.footer__h { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dark-2); } +.footer__col p, .footer__col address { margin: 0; line-height: 1.75; } +.footer__col ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; } +.footer a { transition: color .3s; } +.footer__col a:hover, .footer__bottom a:hover { color: var(--amber); } +.footer__word { + margin: 0 calc(var(--gutter) * -.35); + font-size: clamp(64px, 25.5vw, 430px); line-height: .8; + font-weight: 700; font-stretch: 78%; letter-spacing: -.03em; + text-align: center; text-transform: uppercase; white-space: nowrap; + user-select: none; overflow: hidden; padding-bottom: .04em; +} +.footer__word span { + --heat: 0%; + display: block; + background: linear-gradient(90deg, #2E9BEF 0%, #3B6FD0 22%, #C2456B 48%, #FF6A2B 72%, #FFB547 100%); + background-size: 260% 100%; background-position: var(--heat) 0; + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; color: transparent; +} +.footer__bottom { + display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; + margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); + font-size: 14px; color: var(--text-dark-2); +} +.footer__bottom p { margin: 0; } +.footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } +.footer__top { display: inline-flex; align-items: center; gap: 6px; } +.footer__top .icon { width: 16px; height: 16px; } + +/* ========================================================================== + Unterseiten (Impressum / Datenschutz / 404) + ========================================================================== */ +.page-hero { + position: relative; overflow: hidden; isolation: isolate; + padding: calc(var(--nav-h) + clamp(64px, 9vw, 120px)) 0 calc(clamp(64px, 7vw, 96px) + var(--radius-xl)); + background: var(--ink); color: var(--paper); +} +.page-hero::before { + content: ""; position: absolute; inset: 0; z-index: -1; + background: + radial-gradient(40% 70% at 85% 20%, rgba(255, 106, 43, .45), rgba(138, 35, 80, .2) 50%, transparent 75%), + radial-gradient(35% 60% at 10% 100%, rgba(46, 155, 239, .25), transparent 70%); +} +.page-hero .h1 { max-width: 14ch; } +.page-hero .label { color: var(--text-dark-2); } +.page-hero .label a { text-decoration: underline; text-underline-offset: 3px; } +.legal { padding: clamp(64px, 8vw, 112px) 0 calc(var(--section) + var(--radius-xl)); } +.legal__grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 760px); gap: clamp(32px, 6vw, 96px); } +.legal__toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; display: grid; gap: 4px; font-size: 14px; } +.legal__toc a { padding: 6px 0; color: var(--text-2); transition: color .3s; } +.legal__toc a:hover { color: var(--ink); } +.legal__body h2 { margin: 56px 0 16px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; scroll-margin-top: calc(var(--nav-h) + 24px); } +.legal__body h2:first-child { margin-top: 0; } +.legal__body h3 { margin: 30px 0 10px; font-size: 19px; font-weight: 600; } +.legal__body p, .legal__body li { color: #2B3640; } +.legal__body ul { padding-left: 1.2em; } +.legal__body a { text-decoration: underline; text-underline-offset: 3px; } +.legal__card { padding: 24px 26px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); } +.legal__card p { margin: 0 0 6px; } +.legal__card p:last-child { margin-bottom: 0; } + +.nav--solid .nav__bar { opacity: 1; } + +/* Seitenwechsel */ +.curtain { + position: fixed; inset: 0; z-index: 400; pointer-events: none; + background: var(--ink); + transform: translateY(100%); + transition: transform .6s var(--ease-in-out); +} +.curtain::after { + content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; + background: var(--grad-thermal); +} +.is-leaving .curtain { transform: none; } + +/* ========================================================================== + Keyframes + ========================================================================== */ +@keyframes spin { to { transform: rotate(360deg); } } +@keyframes dash { to { stroke-dashoffset: var(--dash, -14); } } +@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } } +@keyframes blink { 50% { opacity: 0; } } +@keyframes glow { 50% { opacity: .35; } } +@keyframes breathe { 50% { opacity: .55; } } +@keyframes rise { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-28px); } } +@keyframes heat { 0% { transform: scaleY(.06); } 45%, 72% { transform: scaleY(1); } 100% { transform: scaleY(.06); } } +@keyframes knob { 0% { transform: rotate(-70deg); } 45%, 72% { transform: rotate(60deg); } 100% { transform: rotate(-70deg); } } +@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } } +@keyframes float { 50% { transform: translateY(-10px); } } +@keyframes drops { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } } +@keyframes needle-in { 0% { transform: rotate(135deg); } 55% { transform: rotate(272deg); } 78% { transform: rotate(250deg); } 100% { transform: rotate(256.5deg); } } +@keyframes needle-idle { 0%, 100% { transform: rotate(256.5deg); } 50% { transform: rotate(259deg); } } +@keyframes part-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } +@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } } + +/* ========================================================================== + Responsive + ========================================================================== */ +@media (min-width: 900px) and (min-height: 660px) { + .svc { position: sticky; top: calc(var(--nav-h) + 12px + var(--i) * 14px); } + .stack { gap: 18vh; } +} + +@media (max-width: 1180px) { + .nav__links { display: none; } + .nav__toggle { display: grid; } + .intro__text { grid-column: 1 / -1; } + .intro__aside { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px 32px; margin-top: 48px; } + .intro__aside .badge { grid-row: span 2; } +} + +@media (max-width: 1100px) { + .house__grid { grid-template-columns: minmax(0, 1fr); } + .house__panel { max-width: 720px; } + .house__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .leaders__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + +@media (max-width: 900px) { + :root { --nav-h: 76px; --radius-xl: 30px; } + .nav__bar { height: 58px; } + .hero__inner { grid-template-columns: minmax(0, 1fr); } + .legend { display: none; } + .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; } + .section-head--split .h1 { margin-bottom: 0; } + .svc__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; } + .svc__art { order: -1; min-height: 0; aspect-ratio: 6 / 5; } + .svc__title { padding-top: 22px; } + .finder__grid { grid-template-columns: minmax(0, 1fr); } + .finder__head { position: static; } + .finder__app { min-height: 0; } + .steps__list { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-left: 92px; } + .steps__pipe { left: 28px; top: 32px; bottom: 32px; width: 8px; height: auto; } + .steps__fill { transform: scaleY(0); transform-origin: top; } + .step__node { position: absolute; left: -92px; top: -4px; margin: 0; } + .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .stat:nth-child(3) { padding-left: 0; border-left: 0; } + .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 28px; } + .history { grid-template-columns: minmax(0, 1fr); } + .history__year { display: none; } + .career__grid { grid-template-columns: minmax(0, 1fr); } + .contact__grid { grid-template-columns: minmax(0, 1fr); } + .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .legal__grid { grid-template-columns: minmax(0, 1fr); } + .legal__toc { position: static; display: none; } +} + +@media (max-width: 640px) { + .nav__phone span { display: none; } + .nav__phone { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid rgba(243, 239, 232, .28); } + .nav.is-scrolled .nav__phone { border-color: var(--line-2); } + .nav .btn--sm { display: none; } + .logo__mark { width: 30px; height: 30px; } + .logo__word { font-size: 17px; } + .hero__title { font-size: clamp(56px, 18vw, 92px); } + .hero__line { flex-direction: column; gap: 0; } + .hero__tag { margin: -.35em 0 .55em .1em; } + .hero__bottom { flex-wrap: wrap; } + .hero__scroll span:first-child { display: none; } + .hero__ctas .btn { flex: 1 1 auto; } + .intro__aside { grid-template-columns: minmax(0, 1fr); } + .intro__aside .badge { grid-row: auto; width: 104px; height: 104px; } + .svc__list { grid-template-columns: minmax(0, 1fr); } + .house__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .hotspot { width: 28px; height: 28px; margin: -14px 0 0 -14px; } + .hotspot__label { display: none; } + .finder__opts, .finder__opts--2 { grid-template-columns: minmax(0, 1fr); } + .opt__box { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 16px 18px; } + .opt__box .icon { margin: 0; width: 28px; height: 28px; } + .opt__box small { flex-basis: 100%; padding-left: 42px; margin-top: -4px; } + .finder__bars li { grid-template-columns: minmax(0, 1fr) 44px; } + .finder__bars .bar { grid-column: 1 / -1; grid-row: 2; } + .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } + .leaders__grid { grid-template-columns: minmax(0, 1fr); } + .form__row { grid-template-columns: minmax(0, 1fr); } + .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; font-size: 15px; } + .footer__bottom { flex-direction: column; align-items: flex-start; } + .house__stage { margin-inline: calc(var(--gutter) * -1 + 4px); } +} + +/* ---------- Reduzierte Bewegung ---------- */ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { + animation-duration: .001ms !important; + animation-iteration-count: 1 !important; + transition-duration: .001ms !important; + } + .art .a-heatfill { animation: none !important; transform: none; } + .art .a-wave { animation: none !important; opacity: .7; } + .art .a-needle { animation: none !important; } + .h-drops path { animation: none !important; opacity: .8; } + .badge__ring { animation: none !important; } +} + +/* Finder: Navigation (Zurück / Weiter) */ +.finder__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; } +.finder__next { + display: inline-flex; align-items: center; gap: 8px; + padding: 10px 18px; border-radius: 999px; + background: var(--ink); color: var(--paper); + font-size: 15px; font-weight: 600; + transition: opacity .3s, transform .5s var(--ease); +} +.finder__next .icon { width: 17px; height: 17px; } +.finder__next:disabled { opacity: .18; cursor: default; } +.finder__next:not(:disabled):hover { transform: translateX(3px); } diff --git a/assets/fonts/OFL-InstrumentSans.txt b/assets/fonts/OFL-InstrumentSans.txt new file mode 100644 index 0000000..9a39a8e --- /dev/null +++ b/assets/fonts/OFL-InstrumentSans.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans) InstrumentSans-Italic[wdth,wght].ttf: Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/fonts/OFL-InstrumentSerif.txt b/assets/fonts/OFL-InstrumentSerif.txt new file mode 100644 index 0000000..a39b7e0 --- /dev/null +++ b/assets/fonts/OFL-InstrumentSerif.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) InstrumentSerif-Italic.ttf: Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/fonts/instrument-sans-var.woff2 b/assets/fonts/instrument-sans-var.woff2 new file mode 100644 index 0000000..78557c7 Binary files /dev/null and b/assets/fonts/instrument-sans-var.woff2 differ diff --git a/assets/fonts/instrument-serif-italic.woff2 b/assets/fonts/instrument-serif-italic.woff2 new file mode 100644 index 0000000..197abca Binary files /dev/null and b/assets/fonts/instrument-serif-italic.woff2 differ diff --git a/assets/fonts/instrument-serif.woff2 b/assets/fonts/instrument-serif.woff2 new file mode 100644 index 0000000..0ad6971 Binary files /dev/null and b/assets/fonts/instrument-serif.woff2 differ diff --git a/assets/img/apple-touch-icon.png b/assets/img/apple-touch-icon.png new file mode 100644 index 0000000..fc5cfdc Binary files /dev/null and b/assets/img/apple-touch-icon.png differ diff --git a/assets/img/favicon-32.png b/assets/img/favicon-32.png new file mode 100644 index 0000000..d3cd314 Binary files /dev/null and b/assets/img/favicon-32.png differ diff --git a/assets/img/favicon.svg b/assets/img/favicon.svg new file mode 100644 index 0000000..2da9b3e --- /dev/null +++ b/assets/img/favicon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..66d5a18 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + OLZINGER + HAUSTECHNIK + diff --git a/assets/img/og-image.jpg b/assets/img/og-image.jpg new file mode 100644 index 0000000..a364082 Binary files /dev/null and b/assets/img/og-image.jpg differ diff --git a/assets/js/contact.js b/assets/js/contact.js new file mode 100644 index 0000000..57c850d --- /dev/null +++ b/assets/js/contact.js @@ -0,0 +1,233 @@ +/* ========================================================================== + Olzinger – Öffnungszeiten (live, inkl. bayerischer Feiertage) & Kontaktformular + ========================================================================== */ +(function (w, d) { + 'use strict'; + + /* ---------- Öffnungszeiten ---------- */ + // Minuten seit Mitternacht; Index = Wochentag (0 = Sonntag) + var SCHEDULE = { + 0: [], + 1: [[420, 720], [780, 990]], + 2: [[420, 720], [780, 990]], + 3: [[420, 720], [780, 990]], + 4: [[420, 720], [780, 990]], + 5: [[420, 690]], + 6: [] + }; + var DAYS = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; + + function fmt(min) { + var h = Math.floor(min / 60), m = min % 60; + return h + ':' + (m < 10 ? '0' : '') + m; + } + + function easter(y) { + var a = y % 19, b = Math.floor(y / 100), c = y % 100, dd = Math.floor(b / 4), e = b % 4; + var f = Math.floor((b + 8) / 25), g = Math.floor((b - f + 1) / 3); + var h = (19 * a + b - dd - g + 15) % 30, i = Math.floor(c / 4), k = c % 4; + var l = (32 + 2 * e + 2 * i - h - k) % 7, m = Math.floor((a + 11 * h + 22 * l) / 451); + var month = Math.floor((h + l - 7 * m + 114) / 31), day = ((h + l - 7 * m + 114) % 31) + 1; + return Date.UTC(y, month - 1, day); + } + + // Gesetzliche Feiertage in Bayern (Gemeinde mit überwiegend katholischer Bevölkerung) + var holidayCache = {}; + function holidays(y) { + if (holidayCache[y]) return holidayCache[y]; + var DAY = 864e5, e = easter(y), map = {}; + var add = function (t, name) { var dt = new Date(t); map[dt.getUTCMonth() + 1 + '-' + dt.getUTCDate()] = name; }; + add(Date.UTC(y, 0, 1), 'Neujahr'); + add(Date.UTC(y, 0, 6), 'Heilige Drei Könige'); + add(e - 2 * DAY, 'Karfreitag'); + add(e + 1 * DAY, 'Ostermontag'); + add(Date.UTC(y, 4, 1), 'Tag der Arbeit'); + add(e + 39 * DAY, 'Christi Himmelfahrt'); + add(e + 50 * DAY, 'Pfingstmontag'); + add(e + 60 * DAY, 'Fronleichnam'); + add(Date.UTC(y, 7, 15), 'Mariä Himmelfahrt'); + add(Date.UTC(y, 9, 3), 'Tag der Deutschen Einheit'); + add(Date.UTC(y, 10, 1), 'Allerheiligen'); + add(Date.UTC(y, 11, 25), '1. Weihnachtstag'); + add(Date.UTC(y, 11, 26), '2. Weihnachtstag'); + return (holidayCache[y] = map); + } + function holidayName(y, m, day) { return holidays(y)[m + '-' + day] || null; } + + function berlinNow() { + var now = new Date(); + try { + var parts = new Intl.DateTimeFormat('de-DE', { + timeZone: 'Europe/Berlin', year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', hourCycle: 'h23' + }).formatToParts(now); + var get = function (t) { for (var i = 0; i < parts.length; i++) if (parts[i].type === t) return parseInt(parts[i].value, 10); return 0; }; + var y = get('year'), mo = get('month'), da = get('day'); + return { y: y, m: mo, d: da, mins: get('hour') * 60 + get('minute'), wd: new Date(Date.UTC(y, mo - 1, da)).getUTCDay() }; + } catch (e) { + return { y: now.getFullYear(), m: now.getMonth() + 1, d: now.getDate(), mins: now.getHours() * 60 + now.getMinutes(), wd: now.getDay() }; + } + } + + function computeStatus() { + var n = berlinNow(); + var hol = holidayName(n.y, n.m, n.d); + var slots = hol ? [] : SCHEDULE[n.wd]; + var i; + for (i = 0; i < slots.length; i++) { + if (n.mins >= slots[i][0] && n.mins < slots[i][1]) { + return { state: 'open', text: 'Jetzt geöffnet · bis ' + fmt(slots[i][1]) + ' Uhr', wd: n.wd }; + } + } + if (slots.length > 1 && n.mins >= slots[0][1] && n.mins < slots[1][0]) { + return { state: 'break', text: 'Mittagspause · ab ' + fmt(slots[1][0]) + ' Uhr wieder erreichbar', wd: n.wd }; + } + if (slots.length && n.mins < slots[0][0]) { + return { state: 'closed', text: 'Geschlossen · öffnet heute um ' + fmt(slots[0][0]) + ' Uhr', wd: n.wd }; + } + var base = Date.UTC(n.y, n.m - 1, n.d); + for (i = 1; i <= 14; i++) { + var dt = new Date(base + i * 864e5); + var wd = dt.getUTCDay(); + var s = SCHEDULE[wd]; + if (!s.length || holidayName(dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate())) continue; + var when = i === 1 ? 'morgen' : (i < 7 ? 'am ' + DAYS[wd] : 'am ' + dt.getUTCDate() + '.' + (dt.getUTCMonth() + 1) + '.'); + var prefix = hol ? 'Heute Feiertag (' + hol + ')' : 'Geschlossen'; + return { state: 'closed', text: prefix + ' · öffnet ' + when + ' um ' + fmt(s[0][0]) + ' Uhr', wd: n.wd }; + } + return { state: 'closed', text: 'Geschlossen', wd: n.wd }; + } + + var statusEls = d.querySelectorAll('[data-status]'); + var dayRows = d.querySelectorAll('[data-days]'); + + function renderStatus() { + var st = computeStatus(); + Array.prototype.forEach.call(statusEls, function (el) { + el.classList.remove('is-open', 'is-break', 'is-closed'); + el.classList.add('is-' + st.state); + var t = el.querySelector('.status__text'); + if (t) t.textContent = st.text; + }); + Array.prototype.forEach.call(dayRows, function (row) { + var days = row.getAttribute('data-days').split(',').map(Number); + row.classList.toggle('is-today', days.indexOf(st.wd) > -1); + }); + } + renderStatus(); + w.setInterval(renderStatus, 60000); + + /* ---------- Kontaktformular ---------- */ + var form = d.querySelector('[data-contact-form]'); + if (!form) return; + + var statusBox = form.querySelector('[data-form-status]'); + var ts = form.querySelector('[data-ts]'); + if (ts) ts.value = String(Date.now()); + + var RECIPIENT = 'kontakt@olzinger.de'; + var fields = { + name: form.querySelector('[name="name"]'), + email: form.querySelector('[name="email"]'), + message: form.querySelector('[name="message"]'), + privacy: form.querySelector('[name="privacy"]') + }; + + Object.keys(fields).forEach(function (k) { + var el = fields[k]; + if (!el) return; + el.setAttribute('aria-describedby', 'e-' + k); + el.addEventListener(el.type === 'checkbox' ? 'change' : 'input', function () { + if (el.closest('.field').classList.contains('is-invalid')) validateField(k); + }); + }); + + function validateField(k) { + var el = fields[k], ok = true; + if (k === 'email') ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(el.value.trim()); + else if (k === 'privacy') ok = el.checked; + else if (k === 'message') ok = el.value.trim().length >= 5; + else ok = el.value.trim().length > 0; + el.closest('.field').classList.toggle('is-invalid', !ok); + el.setAttribute('aria-invalid', ok ? 'false' : 'true'); + return ok; + } + + function setStatus(type, html) { + statusBox.className = 'form__status' + (type ? ' is-' + type : ''); + statusBox.innerHTML = html || ''; + } + + function selectTopic(topic) { + if (!topic) return; + var radios = form.querySelectorAll('[name="topic"]'); + Array.prototype.forEach.call(radios, function (r) { r.checked = (r.value === topic); }); + } + + w.addEventListener('olz:topic', function (e) { selectTopic(e.detail); }); + w.addEventListener('olz:prefill', function (e) { + var det = e.detail || {}; + selectTopic(det.topic); + if (det.message && fields.message) { + fields.message.value = det.message; + fields.message.closest('.field').classList.remove('is-invalid'); + } + }); + + function buildMail(data) { + var topic = data.get('topic') || 'Allgemeine Anfrage'; + var lines = [ + 'Anliegen: ' + topic, + 'Name: ' + (data.get('name') || ''), + 'E-Mail: ' + (data.get('email') || ''), + 'Telefon: ' + (data.get('phone') || '–'), + 'PLZ / Ort: ' + (data.get('place') || '–'), + '', + String(data.get('message') || '') + ]; + return 'mailto:' + RECIPIENT + + '?subject=' + encodeURIComponent('Anfrage über olzinger.de – ' + topic) + + '&body=' + encodeURIComponent(lines.join('\n')); + } + + form.addEventListener('submit', function (e) { + e.preventDefault(); + var valid = ['name', 'email', 'message', 'privacy'].map(validateField); + if (valid.indexOf(false) > -1) { + var firstBad = form.querySelector('.is-invalid input, .is-invalid textarea'); + if (firstBad) firstBad.focus(); + setStatus('error', 'Bitte prüfen Sie die markierten Felder.'); + return; + } + var data = new FormData(form); + form.classList.add('is-busy'); + setStatus('', ''); + + var done = function (ok, serverValidation) { + form.classList.remove('is-busy'); + if (ok) { + form.reset(); + if (ts) ts.value = String(Date.now()); + setStatus('success', 'Vielen Dank! Ihre Anfrage ist bei uns angekommen. Wir melden uns schnellstmöglich bei Ihnen.'); + } else if (serverValidation) { + setStatus('error', 'Bitte prüfen Sie Ihre Angaben – einige Felder sind unvollständig.'); + } else { + w.location.href = buildMail(data); + setStatus('info', 'Fast geschafft: Ihr E-Mail-Programm öffnet sich mit Ihrer vorbereiteten Anfrage – bitte dort nur noch auf „Senden“ klicken. Alternativ erreichen Sie uns unter 0871 72617.'); + } + }; + + if (!/^https?:$/.test(w.location.protocol) || !w.fetch) { done(false); return; } + + w.fetch(form.getAttribute('action'), { method: 'POST', body: data, headers: { Accept: 'application/json' } }) + .then(function (res) { + return res.text().then(function (txt) { + var json = null; + try { json = JSON.parse(txt); } catch (err) { json = null; } + if (res.status === 422 && json) return done(false, true); + done(!!(res.ok && json && json.ok === true)); + }); + }) + .catch(function () { done(false); }); + }); +})(window, document); diff --git a/assets/js/finder.js b/assets/js/finder.js new file mode 100644 index 0000000..b36db0b --- /dev/null +++ b/assets/js/finder.js @@ -0,0 +1,232 @@ +/* ========================================================================== + Olzinger – Heizungs-Finder + Vier Fragen → erste, unverbindliche Empfehlung (Wärmepumpe / Pellets / Hybrid). + Das Ergebnis kann direkt ins Kontaktformular übernommen werden. + ========================================================================== */ +(function (w, d) { + 'use strict'; + + var app = d.querySelector('[data-finder]'); + if (!app) return; + + var form = app.querySelector('[data-finder-form]'); + var steps = Array.prototype.slice.call(form.querySelectorAll('.finder__step')); + var result = form.querySelector('.finder__result'); + var countEl = app.querySelector('[data-finder-count]'); + var barEl = app.querySelector('[data-finder-bar]'); + var backBtn = app.querySelector('[data-finder-back]'); + var nextBtn = app.querySelector('[data-finder-next]'); + var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches; + var total = steps.length; + var index = 0; + var answers = {}; + var pointerSelect = false; + var advanceTimer = 0; + + var LABELS = { + gebaeude: { neubau: 'Neubau', gedaemmt: 'Bestand, gut gedämmt', unsaniert: 'Bestand, wenig gedämmt' }, + verteilung: { fbh: 'Fußbodenheizung', hk: 'Heizkörper', mix: 'Fußbodenheizung & Heizkörper' }, + lager: { ja: 'vorhanden', nein: 'nicht vorhanden' }, + dach: { ja: 'ja', nein: 'nein / unbekannt' } + }; + + var SYSTEMS = { + wp: { name: 'Wärmepumpe', title: 'Luft-Wasser-Wärmepumpe', topic: 'Wärmepumpe & Regenerativ' }, + pellet: { name: 'Pelletheizung', title: 'Pelletheizung', topic: 'Wärmepumpe & Regenerativ' }, + hybrid: { name: 'Hybridheizung', title: 'Hybridheizung', topic: 'Heizung' } + }; + + var TEXTS = { + wp: { + neubau: 'Für Ihren Neubau ist die Wärmepumpe die naheliegende Wahl: Sie heizt mit Umweltwärme, arbeitet mit niedrigen Vorlauftemperaturen besonders effizient und harmoniert perfekt mit einer Fußbodenheizung.', + gedaemmt: 'Ihr Haus bringt gute Voraussetzungen mit: Dank Dämmung reichen niedrige Vorlauftemperaturen – genau dort arbeitet eine Wärmepumpe besonders effizient. Ob einzelne Heizkörper getauscht werden sollten, prüfen wir vor Ort.', + unsaniert: 'Mit Flächenheizung kann eine Wärmepumpe auch im älteren Haus gut funktionieren. Eine Heizlastberechnung zeigt, ob vorher kleinere Maßnahmen sinnvoll sind.' + }, + pellet: 'Holzpellets heizen nahezu CO2-neutral und liefern auch die hohen Vorlauftemperaturen, die klassische Heizkörper in älteren Häusern brauchen. Den nötigen Lagerraum haben Sie bereits.', + hybrid: 'Wärmepumpe und Brennwertkessel im Team: Die Wärmepumpe übernimmt den Großteil des Jahres, der Kessel springt nur an sehr kalten Tagen ein. Oft ist auch eine Hochtemperatur-Wärmepumpe möglich – das klären wir mit einer Heizlastberechnung.' + }; + + /* Bewertung – bewusst einfach und nachvollziehbar gehalten */ + function evaluate(a) { + var s = { wp: 0, pellet: 0, hybrid: 0 }; + var G = { neubau: [7, 1, 0], gedaemmt: [6, 2, 2], unsaniert: [1, 4, 4] }[a.gebaeude] || [0, 0, 0]; + s.wp += G[0]; s.pellet += G[1]; s.hybrid += G[2]; + + if (a.verteilung === 'fbh') { s.wp += 4 + (a.gebaeude === 'unsaniert' ? 3 : 0); s.pellet += 1; s.hybrid += 1; } + if (a.verteilung === 'mix') { s.wp += 2; s.pellet += 2; s.hybrid += 2; } + if (a.verteilung === 'hk') { s.wp += (a.gebaeude === 'unsaniert' ? 0 : 3); s.pellet += 3; s.hybrid += 3; } + + if (a.lager === 'ja') s.pellet += 3; else { s.pellet -= 6; s.hybrid += 1; } + if (a.dach === 'ja') { s.wp += 1; s.pellet += 1; s.hybrid += 1; } + + var max = { wp: 12, pellet: 11, hybrid: 9 }; + var pct = {}; + Object.keys(s).forEach(function (k) { pct[k] = Math.round(Math.max(0, Math.min(1, s[k] / max[k])) * 100); }); + var priority = ['wp', 'hybrid', 'pellet']; + var order = Object.keys(s).sort(function (x, y) { + return (pct[y] - pct[x]) || (priority.indexOf(x) - priority.indexOf(y)); + }); + return { pct: pct, order: order, top: order[0] }; + } + + function addons(a, top) { + var list = []; + if (a.dach === 'ja') list.push(['i-sun', 'Solarthermie für Warmwasser']); + if (a.gebaeude === 'neubau') list.push(['i-wind', 'Wohnraumlüftung mit Wärmerückgewinnung']); + if (top === 'wp' && a.verteilung !== 'fbh') list.push(['i-gauge', 'Heizkörper-Check & hydraulischer Abgleich']); + if (top === 'pellet') list.push(['i-tank', 'Pufferspeicher für mehr Effizienz']); + if (top === 'hybrid') list.push(['i-gauge', 'Heizlastberechnung vor Ort']); + list.push(['i-check', 'Beratung zu Fördermöglichkeiten']); + return list; + } + + function icon(id) { + return ''; + } + + function updateChrome() { + var isResult = index >= total; + countEl.textContent = isResult ? 'Ihr Ergebnis' : 'Frage ' + (index + 1) + ' von ' + total; + barEl.style.transform = 'scaleX(' + (isResult ? 1 : (index + 1) / total) + ')'; + backBtn.disabled = index === 0; + if (!isResult) { + var name = steps[index].querySelector('input').name; + nextBtn.disabled = !answers[name]; + nextBtn.textContent = ''; + nextBtn.insertAdjacentHTML('beforeend', (index === total - 1 ? 'Ergebnis zeigen' : 'Weiter') + icon('i-arrow')); + } + app.classList.toggle('is-done', isResult); + } + + function panel(i) { return i >= total ? result : steps[i]; } + + function go(to, focus) { + if (to === index) return; + var from = panel(index); + var target = panel(to); + var dir = to > index ? 1 : -1; + index = to; + if (to >= total) renderResult(); + updateChrome(); + + var reveal = function () { + from.hidden = true; + from.classList.remove('is-active'); + target.hidden = false; + target.classList.add('is-active'); + if (to >= total) animateBars(); + if (focus) { + var f = to >= total ? result : target.querySelector('input:checked') || target.querySelector('input'); + if (f) f.focus({ preventScroll: true }); + } + }; + + if (w.gsap && !reduce) { + w.gsap.to(from, { + x: -28 * dir, opacity: 0, duration: 0.28, ease: 'power2.in', + onComplete: function () { + w.gsap.set(from, { clearProps: 'transform,opacity' }); + reveal(); + w.gsap.fromTo(target, { x: 36 * dir, opacity: 0 }, { x: 0, opacity: 1, duration: 0.7, ease: 'expo.out', clearProps: 'transform,opacity' }); + } + }); + } else { + reveal(); + } + } + + function renderResult() { + var r = evaluate(answers); + var sys = SYSTEMS[r.top]; + result.querySelector('[data-result-title]').textContent = sys.title; + var text = r.top === 'wp' ? TEXTS.wp[answers.gebaeude] || TEXTS.wp.gedaemmt : TEXTS[r.top]; + result.querySelector('[data-result-text]').innerHTML = text; + + var bars = result.querySelector('[data-result-bars]'); + bars.innerHTML = r.order.map(function (k, i) { + return '
  • ' + SYSTEMS[k].name + '' + + '' + + '' + r.pct[k] + ' %
    • '; + }).join(''); + + result.querySelector('[data-result-addons]').innerHTML = addons(answers, r.top).map(function (a) { + return '
  • ' + icon(a[0]) + a[1] + '
    • '; + }).join(''); + + var summary = 'Heizungs-Finder – meine Angaben: Gebäude: ' + LABELS.gebaeude[answers.gebaeude] + + ' · Wärmeverteilung: ' + LABELS.verteilung[answers.verteilung] + + ' · Lagerraum: ' + LABELS.lager[answers.lager] + + ' · Sonnige Dachfläche: ' + LABELS.dach[answers.dach] + + '. Erste Empfehlung: ' + sys.title + '. Ich hätte gern eine persönliche Beratung.'; + var apply = result.querySelector('[data-finder-apply]'); + apply.setAttribute('data-topic', sys.topic); + apply.setAttribute('data-message', summary); + } + + function animateBars() { + var bars = result.querySelectorAll('.bar i'); + // Zwei Frames warten, damit die Transition sicher greift + w.requestAnimationFrame(function () { + w.requestAnimationFrame(function () { + Array.prototype.forEach.call(bars, function (b, i) { + b.style.transitionDelay = (0.12 * i) + 's'; + b.style.transform = 'scaleX(' + b.getAttribute('data-v') + ')'; + }); + }); + }); + } + + function restart() { + answers = {}; + Array.prototype.forEach.call(form.querySelectorAll('input[type="radio"]'), function (r) { r.checked = false; }); + var current = panel(index); + current.hidden = true; + current.classList.remove('is-active'); + index = 0; + steps[0].hidden = false; + steps[0].classList.add('is-active'); + updateChrome(); + var first = steps[0].querySelector('input'); + if (first) first.focus({ preventScroll: true }); + } + + form.addEventListener('pointerdown', function (e) { + if (e.target.closest('.opt')) pointerSelect = true; + }); + form.addEventListener('keydown', function () { pointerSelect = false; }); + + form.addEventListener('change', function (e) { + var input = e.target; + if (input.type !== 'radio') return; + answers[input.name] = input.value; + updateChrome(); + if (pointerSelect) { + w.clearTimeout(advanceTimer); + advanceTimer = w.setTimeout(function () { go(index + 1, false); }, 320); + } + }); + + nextBtn.addEventListener('click', function () { + if (nextBtn.disabled) return; + w.clearTimeout(advanceTimer); + go(index + 1, true); + }); + backBtn.addEventListener('click', function () { + if (index > 0) { w.clearTimeout(advanceTimer); go(index - 1, true); } + }); + form.addEventListener('submit', function (e) { e.preventDefault(); }); + + var restartBtn = result.querySelector('[data-finder-restart]'); + if (restartBtn) restartBtn.addEventListener('click', restart); + + var applyBtn = result.querySelector('[data-finder-apply]'); + if (applyBtn) { + applyBtn.addEventListener('click', function () { + w.dispatchEvent(new CustomEvent('olz:prefill', { + detail: { topic: applyBtn.getAttribute('data-topic'), message: applyBtn.getAttribute('data-message') } + })); + }); + } + + updateChrome(); +})(window, document); diff --git a/assets/js/house.js b/assets/js/house.js new file mode 100644 index 0000000..6b84ff2 --- /dev/null +++ b/assets/js/house.js @@ -0,0 +1,121 @@ +/* ========================================================================== + Olzinger – Energie-Haus + Tabs + Hotspots steuern, welches System im Hausschnitt hervorgehoben wird. + Solange niemand klickt, wechseln die Komponenten automatisch. + ========================================================================== */ +(function (w, d) { + 'use strict'; + + var root = d.querySelector('[data-house]'); + if (!root) return; + + var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]')); + 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')); + }); + + function activate(id, focusTab) { + if (id === current) return; + current = id; + root.setAttribute('data-active', id); + tabs.forEach(function (t) { + var on = t.getAttribute('data-part') === id; + t.setAttribute('aria-selected', on ? 'true' : 'false'); + t.tabIndex = on ? 0 : -1; + if (on && focusTab) t.focus(); + }); + parts.forEach(function (p) { + var on = p.getAttribute('data-part') === id; + p.hidden = !on; + p.classList.toggle('is-active', on); + }); + hotspots.forEach(function (h) { + var on = h.getAttribute('data-part') === id; + h.classList.toggle('is-active', on); + 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); }); + }); + hotspots.forEach(function (h) { + h.addEventListener('click', function () { stopAutoplay(); activate(h.getAttribute('data-part'), false); }); + }); + + // Tastatursteuerung nach WAI-ARIA Tabs-Pattern + var tablist = root.querySelector('[role="tablist"]'); + if (tablist) { + tablist.addEventListener('keydown', function (e) { + var i = order.indexOf(current), n = order.length, to = -1; + if (e.key === 'ArrowRight' || e.key === 'ArrowDown') to = (i + 1) % n; + else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') to = (i - 1 + n) % n; + else if (e.key === 'Home') to = 0; + 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(); } + }); + + if ('IntersectionObserver' in w) { + new IntersectionObserver(function (entries) { + inView = entries[0].isIntersecting; + if (inView) run(); + }, { threshold: 0.35 }).observe(root); + } + + activate(order[0], false); +})(window, document); diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..b08d931 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,504 @@ +/* ========================================================================== + Olzinger – Hauptskript + Preloader, Hero-Intro, Smooth-Scroll, Navigation und Scroll-Animationen. + ========================================================================== */ +(function (w, d) { + 'use strict'; + + var html = d.documentElement; + var $ = function (s, c) { return (c || d).querySelector(s); }; + var $$ = function (s, c) { return Array.prototype.slice.call((c || d).querySelectorAll(s)); }; + + var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches; + var finePointer = w.matchMedia('(hover: hover) and (pointer: fine)').matches; + var fallback = !!w.__olzFallback; + w.__olzReady = true; + + /* ---------- Dynamische Jahreszahlen ---------- */ + var nowYear = new Date().getFullYear(); + $$('[data-current-year]').forEach(function (el) { el.textContent = nowYear; }); + $$('[data-years]').forEach(function (el) { + el.textContent = nowYear - 1985; + el.setAttribute('data-count', nowYear - 1985); + }); + + /* ---------- Wärmebild ---------- */ + var thermal = null; + var canvas = $('[data-thermal]'); + if (canvas && w.OlzThermal) { + thermal = w.OlzThermal.init(canvas, { + hero: $('[data-hero]'), + probe: $('[data-probe]'), + probeVal: $('[data-probe-val]'), + legendMarker: $('[data-legend-marker]'), + calm: $('.hero__aside'), + reduceMotion: reduce + }); + } else { + html.classList.add('no-webgl'); + } + + /* ---------- Mobiles Menü (auch ohne GSAP funktionsfähig) ---------- */ + var menu = $('[data-menu]'); + var toggle = $('[data-menu-toggle]'); + var menuOpen = false; + var lenis = null; + + if (menu) { menu.hidden = false; menu.setAttribute('inert', ''); menu.setAttribute('aria-hidden', 'true'); } + + function openMenu() { + if (!menu || menuOpen) return; + menuOpen = true; + menu.classList.add('is-open'); + menu.removeAttribute('inert'); + menu.setAttribute('aria-hidden', 'false'); + toggle.setAttribute('aria-expanded', 'true'); + toggle.querySelector('.sr-only').textContent = 'Menü schließen'; + html.classList.add('menu-open'); + if (lenis) lenis.stop(); + if (w.gsap && !reduce) { + w.gsap.fromTo($$('.menu__links a, .menu__foot > *'), { y: 40, opacity: 0 }, + { y: 0, opacity: 1, duration: 0.9, ease: 'expo.out', stagger: 0.045, delay: 0.25 }); + } + } + function closeMenu() { + if (!menu || !menuOpen) return; + menuOpen = false; + menu.classList.remove('is-open'); + menu.setAttribute('inert', ''); + menu.setAttribute('aria-hidden', 'true'); + toggle.setAttribute('aria-expanded', 'false'); + toggle.querySelector('.sr-only').textContent = 'Menü öffnen'; + html.classList.remove('menu-open'); + if (lenis) lenis.start(); + } + if (toggle) toggle.addEventListener('click', function () { if (menuOpen) closeMenu(); else openMenu(); }); + d.addEventListener('keydown', function (e) { if (e.key === 'Escape' && menuOpen) { closeMenu(); toggle.focus(); } }); + + /* ---------- Ohne GSAP: alles statisch sichtbar lassen ---------- */ + if (!w.gsap || !w.ScrollTrigger) { + html.classList.remove('has-loader', 'js'); + html.classList.add('no-js'); + if (thermal) thermal.heatUp(); + d.addEventListener('click', function (e) { + var a = e.target.closest('a[href^="#"]'); + if (a && a.dataset.topic) w.dispatchEvent(new CustomEvent('olz:topic', { detail: a.dataset.topic })); + if (a) closeMenu(); + }); + return; + } + + var gsap = w.gsap, ScrollTrigger = w.ScrollTrigger; + gsap.registerPlugin(ScrollTrigger); + if (w.SplitText) gsap.registerPlugin(w.SplitText); + gsap.config({ nullTargetWarn: false }); + + /* ---------- Smooth Scroll ---------- */ + if (!reduce && typeof w.Lenis === 'function') { + lenis = new w.Lenis({ lerp: 0.105, smoothWheel: true, wheelMultiplier: 1, touchMultiplier: 1.4 }); + lenis.on('scroll', ScrollTrigger.update); + gsap.ticker.add(function (t) { lenis.raf(t * 1000); }); + gsap.ticker.lagSmoothing(0); + if (html.classList.contains('has-loader')) lenis.stop(); + } + w.olzLenis = lenis; + + function navHeight() { + var bar = $('.nav__bar'); + return bar ? bar.getBoundingClientRect().height + 12 : 76; + } + + // Natürliche Position berechnen (auch für „sticky“-Elemente) + function targetY(el) { + if (el.id === 'top') return 0; + var stack = el.closest('[data-stack]'); + if (stack && el.classList.contains('svc')) { + var cards = $$('.svc', stack); + var gap = parseFloat(getComputedStyle(stack).rowGap) || 0; + var y = stack.getBoundingClientRect().top + w.scrollY; + for (var i = 0; i < cards.length && cards[i] !== el; i++) y += cards[i].offsetHeight + gap; + var stickyTop = parseFloat(getComputedStyle(el).top); + return y - (isNaN(stickyTop) ? navHeight() : stickyTop); + } + return el.getBoundingClientRect().top + w.scrollY; + } + + function scrollToEl(el) { + var y = targetY(el); + if (lenis) lenis.scrollTo(y, { duration: 1.4, easing: function (t) { return t === 1 ? 1 : 1 - Math.pow(2, -10 * t); } }); + else w.scrollTo({ top: y, behavior: reduce ? 'auto' : 'smooth' }); + } + + d.addEventListener('click', function (e) { + var a = e.target.closest('a[href^="#"]'); + if (!a) return; + var id = a.getAttribute('href'); + if (id.length < 2) return; + var target = d.getElementById(id.slice(1)); + if (!target) return; + e.preventDefault(); + if (a.dataset.topic) w.dispatchEvent(new CustomEvent('olz:topic', { detail: a.dataset.topic })); + var wasOpen = menuOpen; + closeMenu(); + setTimeout(function () { scrollToEl(target); }, wasOpen ? 380 : 0); + if (history.replaceState) history.replaceState(null, '', id === '#top' ? location.pathname : id); + }); + + /* ---------- Seitenwechsel mit Vorhang ---------- */ + var curtain = d.createElement('div'); + curtain.className = 'curtain'; + curtain.setAttribute('aria-hidden', 'true'); + d.body.appendChild(curtain); + d.addEventListener('click', function (e) { + if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; + var a = e.target.closest('a[href]'); + if (!a || a.target === '_blank' || a.hasAttribute('download')) return; + var url; + try { url = new URL(a.getAttribute('href'), location.href); } catch (err) { return; } + if (!/^https?:$/.test(url.protocol) || url.origin !== location.origin) return; + if (url.pathname === location.pathname) return; + e.preventDefault(); + closeMenu(); + html.classList.add('is-leaving'); + w.setTimeout(function () { location.href = url.href; }, reduce ? 0 : 560); + }); + w.addEventListener('pageshow', function () { html.classList.remove('is-leaving'); }); + + /* ---------- Preloader & Hero-Intro ---------- */ + function heroIn() { + var tl = gsap.timeline({ defaults: { ease: 'expo.out' } }); + tl.fromTo('.hero__word', { y: 0, yPercent: 112 }, { yPercent: 0, duration: 1.5, stagger: 0.1 }, 0) + .fromTo('.hero__dot', { scale: 0 }, { scale: 1, duration: 1.1, ease: 'back.out(3)', stagger: 0.1 }, 0.55) + .fromTo('.hero__tag', { opacity: 0, x: -12 }, { opacity: 1, x: 0, duration: 1.2, stagger: 0.1 }, 0.7) + .fromTo('[data-hero-fade]', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 1.3, stagger: 0.12 }, 0.35) + .fromTo('.nav__bar', { opacity: 0, y: -16 }, { opacity: 1, y: 0, duration: 1.2 }, 0.2) + .add(function () { if (thermal) thermal.measure(); }); + return tl; + } + + function intro() { + if (fallback) { gsap.set('.nav__bar', { opacity: 1 }); if (thermal) thermal.heatUp(); return; } + var loader = $('.loader'); + var useLoader = html.classList.contains('has-loader') && loader && !reduce; + + if (reduce) { + html.classList.remove('has-loader'); + gsap.set('.hero__word', { yPercent: 0, y: 0 }); + gsap.set('.hero__dot', { scale: 1 }); + gsap.set('.hero__tag, [data-hero-fade], .nav__bar', { opacity: 1 }); + if (thermal) thermal.heatUp(); + return; + } + + if (!useLoader) { + html.classList.remove('has-loader'); + if (loader) loader.remove(); + if (thermal) thermal.heatUp(); + heroIn(); + return; + } + + var arc = $('.loader__arc', loader); + var yearEl = $('[data-loader-year]', loader); + var len = arc.getTotalLength(); + var counter = { v: 1985 }; + gsap.set(arc, { strokeDasharray: len, strokeDashoffset: len }); + + var tl = gsap.timeline(); + tl.from('.loader__center', { opacity: 0, scale: 0.92, duration: 0.6, ease: 'power2.out' }, 0) + .from('.loader__caption', { opacity: 0, y: 10, duration: 0.6, stagger: 0.08 }, 0.1) + .to(arc, { strokeDashoffset: 0, duration: 1.35, ease: 'power2.inOut' }, 0.15) + .to(counter, { + v: nowYear, duration: 1.35, ease: 'power2.inOut', + onUpdate: function () { yearEl.textContent = Math.round(counter.v); } + }, 0.15) + .to('.loader__center, .loader__caption', { opacity: 0, y: -20, duration: 0.5, ease: 'power2.in', stagger: 0.03 }, 1.65) + .add(function () { if (thermal) thermal.heatUp(); }, 1.7) + .to(loader, { clipPath: 'inset(0% 0% 100% 0%)', duration: 1.05, ease: 'expo.inOut' }, 1.85) + .add(heroIn(), 2.25) + .add(function () { + html.classList.remove('has-loader'); + loader.remove(); + if (lenis) lenis.start(); + ScrollTrigger.refresh(); + }, 2.95); + } + + /* ---------- Navigation ---------- */ + var nav = $('[data-nav]'); + ScrollTrigger.create({ + start: 0, end: 'max', + onUpdate: function (self) { + var y = self.scroll(); + nav.classList.toggle('is-scrolled', y > 40); + if (menuOpen) return; + if (y > 420 && self.direction === 1) nav.classList.add('is-hidden'); + else if (self.direction === -1 || y <= 420) nav.classList.remove('is-hidden'); + } + }); + nav.addEventListener('focusin', function () { nav.classList.remove('is-hidden'); }); + + var navLinks = $$('[data-nav-link]'); + navLinks.forEach(function (link) { + var sec = d.getElementById(link.getAttribute('href').slice(1)); + if (!sec) return; + ScrollTrigger.create({ + trigger: sec, start: 'top 45%', end: 'bottom 45%', + onToggle: function (self) { + if (self.isActive) navLinks.forEach(function (l) { l.classList.toggle('is-active', l === link); }); + else link.classList.remove('is-active'); + } + }); + }); + + /* ---------- Animationen, die Bewegung voraussetzen ---------- */ + function motion() { + // Hero: Inhalte beim Scrollen leicht anheben und ausblenden + gsap.to('.hero__inner', { + yPercent: -10, opacity: 0.15, ease: 'none', + scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true } + }); + + // Überschriften: Zeilen-Reveal + if (w.SplitText) { + $$('[data-split]').forEach(function (el) { + w.SplitText.create(el, { + type: 'lines', mask: 'lines', linesClass: 'split-line', autoSplit: true, + onSplit: function (self) { + return gsap.from(self.lines, { + yPercent: 110, duration: 1.25, ease: 'expo.out', stagger: 0.09, + scrollTrigger: { trigger: el, start: 'top 86%', once: true } + }); + } + }); + }); + + // Intro-Text: Wort für Wort „aufheizen“ + var introText = $('[data-scrub-words]'); + if (introText) { + var split = w.SplitText.create(introText, { type: 'words', wordsClass: 'scrub-word' }); + gsap.fromTo(split.words, { opacity: 0.13 }, { + opacity: 1, ease: 'none', stagger: 0.1, + scrollTrigger: { trigger: introText, start: 'top 82%', end: 'bottom 50%', scrub: true } + }); + gsap.from('.ichip', { + scale: 0, rotate: -25, duration: 0.9, ease: 'back.out(2.4)', stagger: 0.18, + scrollTrigger: { trigger: introText, start: 'top 70%', once: true } + }); + } + } + + // Allgemeine Reveals + $$('[data-reveal]').forEach(function (el) { + gsap.from(el, { + y: 44, opacity: 0, duration: 1.25, ease: 'expo.out', + scrollTrigger: { trigger: el, start: 'top 90%', once: true } + }); + }); + $$('[data-reveal-stagger]').forEach(function (el) { + gsap.from(el.children, { + y: 40, opacity: 0, duration: 1.15, ease: 'expo.out', stagger: 0.09, + scrollTrigger: { trigger: el, start: 'top 90%', once: true } + }); + }); + + // Vorlauf/Rücklauf-Bänder + $$('.tape').forEach(function (tape) { + var track = $('.tape__track', tape); + var unit = track.innerHTML; + var unitWidth = track.scrollWidth; + if (!unitWidth) return; + var copies = Math.max(2, Math.ceil((tape.offsetWidth * 1.2) / unitWidth) + 1); + track.innerHTML = new Array(copies + 1).join(unit); + var dir = parseFloat(tape.getAttribute('data-tape')) || 1; + var tween = gsap.fromTo(track, + { x: dir > 0 ? 0 : -unitWidth }, + { x: dir > 0 ? -unitWidth : 0, duration: unitWidth / 70, ease: 'none', repeat: -1 }); + tween.totalTime(tween.duration() * 500); + var boost = { v: 1 }; + ScrollTrigger.create({ + trigger: tape, start: 'top bottom', end: 'bottom top', + onUpdate: function (self) { + var v = Math.min(Math.abs(self.getVelocity()) / 250, 7); + var sign = self.direction === 1 ? 1 : -1; + gsap.to(boost, { + v: (1 + v) * sign, duration: 0.25, overwrite: true, + onUpdate: function () { tween.timeScale(boost.v); } + }); + gsap.to(boost, { + v: sign, duration: 1.2, delay: 0.25, ease: 'power2.out', + onUpdate: function () { tween.timeScale(boost.v); } + }); + } + }); + gsap.fromTo(tape, { xPercent: dir * -4 }, { + xPercent: dir * 4, ease: 'none', + scrollTrigger: { trigger: '.tapes', start: 'top bottom', end: 'bottom top', scrub: true } + }); + }); + + // Leistungskarten: gestapelt, die hinteren treten zurück + var cards = $$('.svc'); + var mm = gsap.matchMedia(); + mm.add('(min-width: 900px) and (min-height: 660px)', function () { + cards.forEach(function (card, i) { + var next = cards[i + 1]; + if (!next) return; + var inner = $('.svc__inner', card); + gsap.to(inner, { + scale: 0.9 + i * 0.012, '--shade': 0.55, ease: 'none', + scrollTrigger: { + trigger: next, start: 'top 82%', + end: function () { return 'top ' + (parseFloat(getComputedStyle(next).top) || 100) + 'px'; }, + scrub: true, invalidateOnRefresh: true + } + }); + }); + }); + + // Illustrationen: leichter Parallax + $$('.svc__art .art').forEach(function (art) { + gsap.fromTo(art, { yPercent: 4 }, { + yPercent: -4, ease: 'none', + scrollTrigger: { trigger: art.closest('.svc'), start: 'top bottom', end: 'bottom top', scrub: true } + }); + }); + + // Ablauf: Rohr füllt sich + var steps = $('[data-steps]'); + if (steps) { + var fill = $('[data-steps-fill]', steps); + var pipe = $('.steps__pipe', steps); + var items = $$('[data-step-item]', steps); + var mmSteps = gsap.matchMedia(); + mmSteps.add({ desktop: '(min-width: 901px)', mobile: '(max-width: 900px)' }, function (ctx) { + var desktop = ctx.conditions.desktop; + if (!desktop) { + var nodes = items.map(function (it) { return $('.step__node', it); }); + var placePipe = function () { + var top0 = steps.getBoundingClientRect().top; + var a = nodes[0].getBoundingClientRect(), b = nodes[nodes.length - 1].getBoundingClientRect(); + pipe.style.top = (a.top - top0 + a.height / 2) + 'px'; + pipe.style.height = (b.top - a.top) + 'px'; + pipe.style.bottom = 'auto'; + }; + placePipe(); + ScrollTrigger.addEventListener('refreshInit', placePipe); + } + gsap.fromTo(fill, desktop ? { scaleX: 0, scaleY: 1 } : { scaleY: 0, scaleX: 1 }, { + scaleX: 1, scaleY: 1, ease: 'none', + scrollTrigger: { + trigger: steps, start: 'top 72%', end: desktop ? 'bottom 62%' : 'bottom 68%', scrub: 0.6, + onUpdate: function (self) { + var p = self.progress, n = items.length; + items.forEach(function (it, i) { it.classList.toggle('is-on', p > (i / (n - 1)) * 0.97 + 0.01); }); + } + } + }); + return function () { + pipe.style.top = pipe.style.height = pipe.style.bottom = ''; + }; + }); + } + + // Footer-Schriftzug „heizt auf“ + var word = $('[data-footer-word] span'); + if (word) { + gsap.fromTo(word, { '--heat': '0%' }, { + '--heat': '100%', ease: 'none', + scrollTrigger: { trigger: '.footer', start: 'top 80%', end: 'bottom bottom', scrub: true } + }); + gsap.from(word, { + yPercent: 60, opacity: 0, duration: 1.4, ease: 'expo.out', + scrollTrigger: { trigger: '[data-footer-word]', start: 'top 95%', once: true } + }); + } + + // Magnetische Buttons + if (finePointer) { + $$('[data-magnetic]').forEach(function (btn) { + var xTo = gsap.quickTo(btn, 'x', { duration: 0.6, ease: 'power3' }); + var yTo = gsap.quickTo(btn, 'y', { duration: 0.6, ease: 'power3' }); + btn.addEventListener('pointermove', function (e) { + var r = btn.getBoundingClientRect(); + xTo((e.clientX - r.left - r.width / 2) * 0.22); + yTo((e.clientY - r.top - r.height / 2) * 0.32); + }); + btn.addEventListener('pointerleave', function () { xTo(0); yTo(0); }); + }); + } + } + + /* ---------- Funktionen, die immer laufen (auch bei reduzierter Bewegung) ---------- */ + function essentials() { + // Illustrationen nur animieren, wenn sichtbar + if ('IntersectionObserver' in w) { + var io = new IntersectionObserver(function (entries) { + entries.forEach(function (en) { en.target.classList.toggle('is-inview', en.isIntersecting); }); + }, { threshold: 0.15 }); + $$('.svc').forEach(function (c) { io.observe(c); }); + } else { + $$('.svc').forEach(function (c) { c.classList.add('is-inview'); }); + } + + // Zähler + $$('[data-count]').forEach(function (el) { + var target = parseInt(el.getAttribute('data-count') || el.textContent, 10); + if (isNaN(target)) return; + if (reduce) { el.textContent = target; return; } + var from = parseInt(el.getAttribute('data-count-from') || '0', 10); + var obj = { v: from }; + el.textContent = from; + gsap.to(obj, { + v: target, duration: 2.2, ease: 'power3.out', + scrollTrigger: { trigger: el, start: 'top 92%', once: true }, + onUpdate: function () { el.textContent = Math.round(obj.v); } + }); + }); + + // Historie: Zählwerk mit Jahreszahl + var hist = $('[data-history]'); + if (hist) { + var strips = $$('[data-odo-digit] .odo__strip', hist); + var caption = $('[data-odo-caption]', hist); + var entries = $$('.tl', hist); + var setYear = function (year, title) { + String(year).split('').forEach(function (ch, i) { + if (!strips[i]) return; + gsap.to(strips[i], { yPercent: -10 * parseInt(ch, 10), duration: reduce ? 0 : 1.1, ease: 'expo.inOut', delay: reduce ? 0 : i * 0.06, overwrite: true }); + }); + if (caption) caption.textContent = title; + }; + entries.forEach(function (entry) { + var y = entry.getAttribute('data-year'); + var year = y === 'now' ? nowYear : parseInt(y, 10); + var title = ($('.tl__title', entry) || {}).textContent || ''; + ScrollTrigger.create({ + trigger: entry, start: 'top 62%', end: 'bottom 62%', + onToggle: function (self) { + if (!self.isActive) return; + entries.forEach(function (e2) { e2.classList.toggle('is-active', e2 === entry); }); + setYear(year, title); + } + }); + }); + entries[0].classList.add('is-active'); + setYear(1985, ($('.tl__title', entries[0]) || {}).textContent || ''); + } + } + + /* ---------- Start ---------- */ + essentials(); + if (!reduce) motion(); + intro(); + + // Nach dem Laden der Schriften Positionen neu berechnen + if (d.fonts && d.fonts.ready) d.fonts.ready.then(function () { ScrollTrigger.refresh(); }); + w.addEventListener('load', function () { ScrollTrigger.refresh(); }); + + // Deep-Link (#kontakt etc.) nach dem Aufbau korrekt anspringen + if (location.hash && location.hash.length > 1) { + var deep = d.getElementById(location.hash.slice(1)); + if (deep) w.setTimeout(function () { w.scrollTo(0, targetY(deep)); }, 60); + } +})(window, document); diff --git a/assets/js/thermal.js b/assets/js/thermal.js new file mode 100644 index 0000000..cee457f --- /dev/null +++ b/assets/js/thermal.js @@ -0,0 +1,402 @@ +/* ========================================================================== + Olzinger – „Wärmebild“ (WebGL) + Ein thermografisches Feld mit Isothermen. Die Maus wirkt als Wärmequelle + und hinterlässt eine Wärmespur, die langsam abkühlt und sich ausbreitet. + Hinter Fließtext wird die Wärme gedämpft, damit alles lesbar bleibt. + ========================================================================== */ +(function (w) { + 'use strict'; + + var MAX_HEAT = 14; + var T_MIN = 14; // °C bei Feldwert 0 + var T_MAX = 28; // °C bei Feldwert 1 + + var VERT = 'attribute vec2 aPos; void main(){ gl_Position = vec4(aPos, 0.0, 1.0); }'; + + var FRAG = [ + '#ifdef GL_OES_standard_derivatives', + '#extension GL_OES_standard_derivatives : enable', + '#endif', + 'precision highp float;', + '#define MAXH ' + MAX_HEAT, + 'uniform vec2 uRes;', + 'uniform float uTime;', + 'uniform float uIntro;', + 'uniform vec4 uCalm;', + 'uniform vec4 uHeat[MAXH];', + 'float hash(vec2 p){ p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); }', + 'float noise(vec2 p){ vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f);', + ' return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y); }', + 'float fbm(vec2 p){ float v = 0.0; float a = 0.5; mat2 m = mat2(1.6, 1.2, -1.2, 1.6);', + ' for (int i = 0; i < 5; i++){ v += a * noise(p); p = m * p; a *= 0.5; } return v; }', + 'vec3 pal(float t){', + ' t = clamp(t, 0.0, 1.0) * 8.0;', + ' vec3 c0 = vec3(0.020, 0.043, 0.071); vec3 c1 = vec3(0.043, 0.106, 0.180); vec3 c2 = vec3(0.078, 0.200, 0.353);', + ' vec3 c3 = vec3(0.231, 0.141, 0.400); vec3 c4 = vec3(0.541, 0.137, 0.314); vec3 c5 = vec3(0.878, 0.282, 0.165);', + ' vec3 c6 = vec3(1.000, 0.541, 0.165); vec3 c7 = vec3(1.000, 0.780, 0.420); vec3 c8 = vec3(1.000, 0.910, 0.700);', + ' if (t < 1.0) return mix(c0, c1, t);', + ' if (t < 2.0) return mix(c1, c2, t - 1.0);', + ' if (t < 3.0) return mix(c2, c3, t - 2.0);', + ' if (t < 4.0) return mix(c3, c4, t - 3.0);', + ' if (t < 5.0) return mix(c4, c5, t - 4.0);', + ' if (t < 6.0) return mix(c5, c6, t - 5.0);', + ' if (t < 7.0) return mix(c6, c7, t - 6.0);', + ' return mix(c7, c8, t - 7.0);', + '}', + 'float calm(vec2 p){', + ' vec2 a = smoothstep(uCalm.xy - 0.08, uCalm.xy + 0.02, p);', + ' vec2 b = 1.0 - smoothstep(uCalm.zw - 0.02, uCalm.zw + 0.08, p);', + ' return a.x * a.y * b.x * b.y;', + '}', + 'void main(){', + ' vec2 uv = gl_FragCoord.xy / uRes;', + ' float asp = uRes.x / uRes.y;', + ' vec2 p = vec2(uv.x * asp, uv.y);', + ' float t = uTime;', + ' vec2 s = p * 1.35;', + ' vec2 q = vec2(fbm(s + vec2(0.0, t * 0.05)), fbm(s + vec2(5.2, -t * 0.04)));', + ' vec2 r = vec2(fbm(s + 2.4 * q + vec2(1.7, 9.2) + t * 0.06), fbm(s + 2.4 * q + vec2(8.3, 2.8) - t * 0.05));', + ' float f = fbm(s + 2.2 * r);', + ' float base = smoothstep(0.18, 0.86, f) * 0.46;', + ' vec2 dz = p - vec2(asp * 0.8, 0.76);', + ' base += 0.36 * exp(-dot(dz, dz) / 0.11) * (0.8 + 0.2 * sin(t * 0.45));', + ' vec2 dc = p - vec2(asp * 0.16, 0.12);', + ' base -= 0.12 * exp(-dot(dc, dc) / 0.2);', + ' base *= mix(0.5, 1.0, smoothstep(0.0, 0.95, uv.x * 0.85 + uv.y * 0.55));', + ' float heat = 0.0;', + ' for (int i = 0; i < MAXH; i++){ vec4 h = uHeat[i]; vec2 d = p - h.xy; heat += h.z * exp(-dot(d, d) / max(h.w * h.w, 0.0001)); }', + ' heat *= 1.0 - 0.62 * calm(p);', + ' float v = max(base, 0.0) + heat * 0.66;', + ' v = 1.0 - exp(-v * 1.35);', + ' v *= uIntro;', + ' vec3 col = pal(v);', + ' float k = v * 15.0;', + '#ifdef GL_OES_standard_derivatives', + ' float fw = fwidth(k) * 1.15;', + '#else', + ' float fw = 0.05;', + '#endif', + ' float dist = abs(fract(k + 0.5) - 0.5);', + ' float line = 1.0 - smoothstep(0.0, fw, dist);', + ' col += line * (0.03 + 0.2 * v) * vec3(1.0, 0.93, 0.86);', + ' float g = hash(gl_FragCoord.xy + fract(t * 7.0) * 91.7) - 0.5;', + ' col += g * 0.032;', + ' vec2 vc = uv - 0.5;', + ' col *= 1.0 - dot(vc, vc) * 0.5;', + ' gl_FragColor = vec4(col, 1.0);', + '}' + ].join('\n'); + + /* ---------- CPU-Gegenstück des Feldes (für die Temperaturanzeige) ---------- */ + function fract(x) { return x - Math.floor(x); } + function smoothstep(a, b, x) { var t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); } + function hash(x, y) { + x = fract(x * 123.34); y = fract(y * 456.21); + var dd = x * (x + 45.32) + y * (y + 45.32); + x += dd; y += dd; + return fract(x * y); + } + function noise(x, y) { + var ix = Math.floor(x), iy = Math.floor(y), fx = x - ix, fy = y - iy; + var ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy); + var a = hash(ix, iy), b = hash(ix + 1, iy), c = hash(ix, iy + 1), d = hash(ix + 1, iy + 1); + var ab = a + (b - a) * ux, cd = c + (d - c) * ux; + return ab + (cd - ab) * uy; + } + function fbm(x, y) { + var v = 0, a = 0.5; + for (var i = 0; i < 5; i++) { + v += a * noise(x, y); + var nx = 1.6 * x - 1.2 * y, ny = 1.2 * x + 1.6 * y; + x = nx; y = ny; a *= 0.5; + } + return v; + } + + function compile(gl, type, src) { + var sh = gl.createShader(type); + gl.shaderSource(sh, src); + gl.compileShader(sh); + if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { + if (w.console) console.warn('[Wärmebild] Shader-Fehler:', gl.getShaderInfoLog(sh)); + gl.deleteShader(sh); + return null; + } + return sh; + } + + function init(canvas, opts) { + opts = opts || {}; + var root = document.documentElement; + var hero = opts.hero || canvas.parentElement; + var gl = null; + try { + gl = canvas.getContext('webgl', { antialias: false, alpha: false, depth: false, stencil: false, premultipliedAlpha: false, powerPreference: 'low-power' }) || + canvas.getContext('experimental-webgl'); + } catch (e) { gl = null; } + if (!gl) { root.classList.add('no-webgl'); return null; } + + gl.getExtension('OES_standard_derivatives'); + var vs = compile(gl, gl.VERTEX_SHADER, VERT); + var fs = compile(gl, gl.FRAGMENT_SHADER, FRAG); + if (!vs || !fs) { root.classList.add('no-webgl'); return null; } + var prog = gl.createProgram(); + gl.attachShader(prog, vs); + gl.attachShader(prog, fs); + gl.linkProgram(prog); + if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { root.classList.add('no-webgl'); return null; } + gl.useProgram(prog); + + var buf = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); + var aPos = gl.getAttribLocation(prog, 'aPos'); + gl.enableVertexAttribArray(aPos); + gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0); + + var uRes = gl.getUniformLocation(prog, 'uRes'); + var uTime = gl.getUniformLocation(prog, 'uTime'); + var uIntro = gl.getUniformLocation(prog, 'uIntro'); + var uCalm = gl.getUniformLocation(prog, 'uCalm'); + var uHeat = gl.getUniformLocation(prog, 'uHeat'); + + var reduce = !!opts.reduceMotion; + var finePointer = w.matchMedia('(hover: hover) and (pointer: fine)').matches; + var probe = opts.probe, probeVal = opts.probeVal, marker = opts.legendMarker; + var calmEl = opts.calm || null; + + var heatData = new Float32Array(MAX_HEAT * 4); + var calmRect = [-1, -1, -1, -1]; + var trail = []; + var quality = (w.devicePixelRatio || 1) > 1.5 ? 0.62 : 0.85; + var width = 0, height = 0, rect = null; + var running = false, visible = true, raf = 0; + var time = Math.random() * 40, last = 0, frame = 0; + var intro = reduce ? 1 : 0, introTarget = reduce ? 1 : 0; + var frameTimes = [], tuned = false; + + // Cursor in Feldkoordinaten: x ∈ [0, Seitenverhältnis], y ∈ [0, 1] (y nach oben) + var cur = { x: 0, y: 0, tx: 0, ty: 0, inside: false, lastMove: -1e9, heat: 0, clientX: 0, clientY: 0 }; + var auto = { heat: 0 }; + var lastEmit = 0; + + function measureCalm() { + if (!calmEl || !rect) return; + var r = calmEl.getBoundingClientRect(); + if (!r.width) { calmRect = [-1, -1, -1, -1]; return; } + var hgt = rect.height, pad = 18; + calmRect = [ + (r.left - pad - rect.left) / hgt, + 1 - (r.bottom + pad - rect.top) / hgt, + (r.right + pad - rect.left) / hgt, + 1 - (r.top - pad - rect.top) / hgt + ]; + } + + function resize() { + rect = canvas.getBoundingClientRect(); + var dpr = Math.min(w.devicePixelRatio || 1, 2); + var nw = Math.max(1, Math.round(rect.width * dpr * quality)); + var nh = Math.max(1, Math.round(rect.height * dpr * quality)); + if (nw !== width || nh !== height) { + width = canvas.width = nw; + height = canvas.height = nh; + gl.viewport(0, 0, width, height); + } + measureCalm(); + } + + function toField(clientX, clientY) { + return { x: (clientX - rect.left) / rect.height, y: 1 - (clientY - rect.top) / rect.height }; + } + + function emit(x, y, i, r) { + trail.unshift({ x: x, y: y, i: i, r: r }); + if (trail.length > MAX_HEAT - 2) trail.pop(); + } + + function onMove(e) { + if (e.pointerType && e.pointerType !== 'mouse') return; + rect = canvas.getBoundingClientRect(); + var f = toField(e.clientX, e.clientY); + cur.tx = f.x; cur.ty = f.y; + cur.clientX = e.clientX - rect.left; + cur.clientY = e.clientY - rect.top; + if (!cur.inside) { cur.x = f.x; cur.y = f.y; } + cur.inside = true; + cur.lastMove = performance.now(); + if (probe) probe.classList.add('is-on'); + } + function onLeave() { + cur.inside = false; + if (probe) probe.classList.remove('is-on'); + } + function onTouch(e) { + var t = e.touches && e.touches[0]; + if (!t) return; + rect = canvas.getBoundingClientRect(); + var f = toField(t.clientX, t.clientY); + emit(f.x, f.y, 0.85, 0.09); + } + + if (finePointer) { + hero.addEventListener('pointermove', onMove, { passive: true }); + hero.addEventListener('pointerleave', onLeave, { passive: true }); + } + hero.addEventListener('touchstart', onTouch, { passive: true }); + + function calmAt(px, py) { + var a = smoothstep(calmRect[0] - 0.08, calmRect[0] + 0.02, px) * smoothstep(calmRect[1] - 0.08, calmRect[1] + 0.02, py); + var b = (1 - smoothstep(calmRect[2] - 0.02, calmRect[2] + 0.08, px)) * (1 - smoothstep(calmRect[3] - 0.02, calmRect[3] + 0.08, py)); + return a * b; + } + + // Exakt dieselbe Rechnung wie im Shader – nur für einen Punkt + function fieldAt(px, py) { + var asp = width / height, t = time; + var sx = px * 1.35, sy = py * 1.35; + var qx = fbm(sx, sy + t * 0.05), qy = fbm(sx + 5.2, sy - t * 0.04); + var rx = fbm(sx + 2.4 * qx + 1.7 + t * 0.06, sy + 2.4 * qy + 9.2 + t * 0.06); + var ry = fbm(sx + 2.4 * qx + 8.3 - t * 0.05, sy + 2.4 * qy + 2.8 - t * 0.05); + var f = fbm(sx + 2.2 * rx, sy + 2.2 * ry); + var base = smoothstep(0.18, 0.86, f) * 0.46; + var zx = px - asp * 0.8, zy = py - 0.76; + base += 0.36 * Math.exp(-(zx * zx + zy * zy) / 0.11) * (0.8 + 0.2 * Math.sin(t * 0.45)); + var cx = px - asp * 0.16, cy = py - 0.12; + base -= 0.12 * Math.exp(-(cx * cx + cy * cy) / 0.2); + base *= 0.5 + 0.5 * smoothstep(0, 0.95, (px / asp) * 0.85 + py * 0.55); + var heat = 0; + for (var i = 0; i < MAX_HEAT; i++) { + var o = i * 4, dx = px - heatData[o], dy = py - heatData[o + 1]; + heat += heatData[o + 2] * Math.exp(-(dx * dx + dy * dy) / Math.max(heatData[o + 3] * heatData[o + 3], 0.0001)); + } + heat *= 1 - 0.62 * calmAt(px, py); + var v = Math.max(base, 0) + heat * 0.66; + v = 1 - Math.exp(-v * 1.35); + return v * intro; + } + + function readTemperature() { + if (!probeVal || !cur.inside) return; + var v = Math.max(0, Math.min(1, fieldAt(cur.tx, cur.ty))); + var temp = T_MIN + v * (T_MAX - T_MIN); + probeVal.textContent = temp.toFixed(1).replace('.', ',') + ' °C'; + if (marker) marker.style.left = (v * 100).toFixed(1) + '%'; + } + + function step(now) { + raf = 0; + if (!running) return; + var dt = last ? Math.min((now - last) / 1000, 0.05) : 0.016; + last = now; + if (!reduce) time += dt; + + // Auflösung automatisch an die Leistung anpassen + if (!tuned) { + frameTimes.push(dt); + if (frameTimes.length >= 80) { + var avg = frameTimes.reduce(function (a, b) { return a + b; }, 0) / frameTimes.length; + if (avg > 0.024 && quality > 0.38) { quality *= 0.75; resize(); frameTimes = []; } + else tuned = true; + } + } + + intro += (introTarget - intro) * (1 - Math.exp(-dt * 1.8)); + var asp = width / height; + + // Maus + var k = 1 - Math.exp(-dt * 9); + cur.x += (cur.tx - cur.x) * k; + cur.y += (cur.ty - cur.y) * k; + var idle = (now - cur.lastMove) > 3200; + cur.heat += ((cur.inside ? 1 : 0) - cur.heat) * (1 - Math.exp(-dt * 3)); + if (cur.inside && !idle && now - lastEmit > 55) { + emit(cur.x, cur.y, 0.42, 0.075); + lastEmit = now; + } + + // Autopilot: wandernde Wärmequelle oben rechts, solange niemand interagiert + var autoOn = (!cur.inside || idle) && !reduce; + auto.heat += ((autoOn ? 0.8 : 0) - auto.heat) * (1 - Math.exp(-dt * 1.2)); + var ax = asp * (0.7 + 0.16 * Math.sin(time * 0.21)) + 0.05 * Math.sin(time * 0.53); + var ay = 0.66 + 0.16 * Math.sin(time * 0.29 + 1.3); + if (autoOn && now - lastEmit > 140) { + emit(ax, ay, 0.3 * auto.heat, 0.09); + lastEmit = now; + } + + // Abkühlen & Ausbreiten + for (var i = 0; i < trail.length; i++) { + trail[i].i *= Math.exp(-dt * 0.85); + trail[i].r += dt * 0.032; + } + + heatData[0] = cur.x; heatData[1] = cur.y; heatData[2] = cur.heat * 0.8; heatData[3] = 0.095; + heatData[4] = ax; heatData[5] = ay; heatData[6] = auto.heat * 0.7; heatData[7] = 0.13; + for (var j = 0; j < MAX_HEAT - 2; j++) { + var o = (j + 2) * 4, tp = trail[j]; + if (tp) { heatData[o] = tp.x; heatData[o + 1] = tp.y; heatData[o + 2] = tp.i; heatData[o + 3] = tp.r; } + else { heatData[o + 2] = 0; heatData[o + 3] = 0.1; } + } + + gl.uniform2f(uRes, width, height); + gl.uniform1f(uTime, time); + gl.uniform1f(uIntro, intro); + gl.uniform4f(uCalm, calmRect[0], calmRect[1], calmRect[2], calmRect[3]); + gl.uniform4fv(uHeat, heatData); + gl.drawArrays(gl.TRIANGLES, 0, 3); + + frame++; + if (frame % 4 === 0) readTemperature(); + if (probe && cur.inside) { + probe.style.transform = 'translate3d(' + cur.clientX.toFixed(1) + 'px,' + cur.clientY.toFixed(1) + 'px,0)'; + } + + raf = w.requestAnimationFrame(step); + } + + function start() { + if (running || !visible || document.hidden) return; + running = true; + last = 0; + raf = w.requestAnimationFrame(step); + } + function stop() { + running = false; + if (raf) w.cancelAnimationFrame(raf); + raf = 0; + } + + resize(); + if ('ResizeObserver' in w) { + var ro = new ResizeObserver(function () { resize(); }); + ro.observe(canvas); + if (calmEl) ro.observe(calmEl); + } else { + w.addEventListener('resize', resize); + } + if (d().fonts && d().fonts.ready) d().fonts.ready.then(function () { resize(); }); + + if ('IntersectionObserver' in w) { + new IntersectionObserver(function (entries) { + visible = entries[0].isIntersecting; + if (visible) start(); else stop(); + }, { threshold: 0 }).observe(hero); + } + document.addEventListener('visibilitychange', function () { if (document.hidden) stop(); else start(); }); + canvas.addEventListener('webglcontextlost', function (e) { e.preventDefault(); stop(); root.classList.add('no-webgl'); }); + + start(); + + return { + heatUp: function () { introTarget = 1; }, + measure: function () { rect = canvas.getBoundingClientRect(); measureCalm(); }, + start: start, + stop: stop + }; + } + + function d() { return document; } + + w.OlzThermal = { init: init }; +})(window); diff --git a/assets/vendor/LICENSE-lenis.txt b/assets/vendor/LICENSE-lenis.txt new file mode 100644 index 0000000..7a85c84 --- /dev/null +++ b/assets/vendor/LICENSE-lenis.txt @@ -0,0 +1,9 @@ +The MIT License + +Copyright (c) 2024 darkroom.engineering + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/assets/vendor/LICENSES.md b/assets/vendor/LICENSES.md new file mode 100644 index 0000000..1ef6509 --- /dev/null +++ b/assets/vendor/LICENSES.md @@ -0,0 +1,10 @@ +# Eingebundene Bibliotheken + +Alle Bibliotheken werden lokal ausgeliefert (kein CDN, keine Datenübertragung an Dritte). + +| Datei | Bibliothek | Version | Lizenz | +|---|---|---|---| +| `gsap.min.js`, `ScrollTrigger.min.js`, `SplitText.min.js` | [GSAP](https://gsap.com) | 3.15.0 | GSAP Standard „No Charge“ License – kostenlos, auch kommerziell (https://gsap.com/standard-license) | +| `lenis.min.js` | [Lenis](https://github.com/darkroomengineering/lenis) | 1.3.26 | MIT (siehe `LICENSE-lenis.txt`) | + +Schriften in `assets/fonts/`: Instrument Sans & Instrument Serif – SIL Open Font License 1.1 (siehe `OFL-*.txt`). diff --git a/assets/vendor/ScrollTrigger.min.js b/assets/vendor/ScrollTrigger.min.js new file mode 100644 index 0000000..35d4ab7 --- /dev/null +++ b/assets/vendor/ScrollTrigger.min.js @@ -0,0 +1,11 @@ +/*! + * ScrollTrigger 3.15.0 + * https://gsap.com + * + * @license Copyright 2026, GreenSock. All rights reserved. + * Subject to the terms at https://gsap.com/standard-license. + * @author: Jack Doyle, jack@greensock.com + */ + +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r=Math.abs(r)?t:r}function P(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,Ie),n.push.apply(n,Le),Ie=t,Le=n,o=function _bridge(e,t){return r[e](t)}}()}function Q(e){return Se=e||r(),!Te&&Se&&"undefined"!=typeof document&&document.body&&(Ce=window,ke=(Me=document).documentElement,Ee=Me.body,t=[Ce,Me,ke,Ee],Se.utils.clamp,Be=Se.core.context||function(){},Oe="onpointerenter"in Ee?"pointer":"mouse",Pe=k.isTouch=Ce.matchMedia&&Ce.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Ce||0=i,n=Math.abs(t)>=i;T&&(r||n)&&T(se,e,t,me,ye),r&&(m&&0Math.abs(t)?"x":"y",oe=!0),"y"!==ae&&(me[2]+=e,se._vx.update(e,!0)),"x"!==ae&&(ye[2]+=t,se._vy.update(t,!0)),n?ee=ee||requestAnimationFrame(lf):lf()}function of(e){if(!jf(e,1)){var t=(e=N(e,s)).clientX,r=e.clientY,n=t-se.x,i=r-se.y,o=se.isDragging;se.x=t,se.y=r,(o||(n||i)&&(Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a))&&(re=re||(o?2:1),o||(se.isDragging=!0),nf(n,i))}}function rf(e){return e.touches&&1=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=o(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in U?U[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Eb(e,t,r,n,i,o,a,s){var l=i.startColor,c=i.endColor,u=i.fontSize,f=i.indent,d=i.fontWeight,p=Ue.createElement("div"),g=Ma(r)||"fixed"===z(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?He:"IFRAME"===r.tagName?r.contentDocument.body:r,b=-1!==e.indexOf("start"),m=b?l:c,y="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return y+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(y+=(n===Xe?I:Y)+":"+(o+parseFloat(f))+"px;"),a&&(y+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=y,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],q(p,0,n,b),p}function Jb(){return 34He.clientWidth)||(Ie.cache++,v?R=R||requestAnimationFrame($):$(),st||V("scrollStart"),st=at())}function Lb(){y=Je.innerWidth,m=Je.innerHeight}function Mb(e){Ie.cache++,!0!==e&&(je||h||Ue.fullscreenElement||Ue.webkitFullscreenElement||b&&y===Je.innerWidth&&!(Math.abs(Je.innerHeight-m)>.25*Je.innerHeight))||c.restart(!0)}function Pb(){return yb(ne,"scrollEnd",Pb)||kt(!0)}function Sb(e){for(var t=0;tt,n=e._startClamp&&e.start>=t;(r||n)&&e.setPositions(n?t-1:e.start,r?Math.max(n?t:e.start+1,t):e.end,!0)}),_b(!1),et=0,r.forEach(function(e){return e&&e.render&&e.render(-1)}),Ie.forEach(function(e){Ua(e)&&(e.smooth&&requestAnimationFrame(function(){return e.target.style.scrollBehavior="smooth"}),e.rec&&e(e.rec))}),Vb(_,1),c.pause(),Mt++,$(rt=2),Tt.forEach(function(e){return Ua(e.vars.onRefresh)&&e.vars.onRefresh(e)}),rt=ne.isRefreshing=!1,V("refresh")}else xb(ne,"scrollEnd",Pb)},K=0,Et=1,$=function _updateAll(e){if(2===e||!rt&&!T){ne.isUpdating=!0,it&&it.update(0);var t=Tt.length,r=at(),n=50<=r-D,i=t&&Tt[0].scroll();if(Et=i=Ra(be,he)){if(oe&&Ae()&&!de)for(o=oe.parentNode;o&&o!==He;)o._pinOffset&&(B-=o._pinOffset,I-=o._pinOffset),o=o.parentNode}else i=nb(ae),s=he===Xe,a=Ae(),K=parseFloat(j(he.a))+w,!y&&1=I})},Te.update=function(e,t,r){if(!de||r||e){var n,i,o,a,s,l,c,u=!0===rt?re:Te.scroll(),f=e?0:(u-B)/q,d=f<0?0:1u+(u-D)/(at()-Ge)*E&&(d=.9999)),d!==p&&Te.enabled){if(a=(s=(n=Te.isActive=!!d&&d<1)!=(!!p&&p<1))||!!d!=!!p,Te.direction=p=Ra(be,he),fe)if(e||!n&&!l)qc(ae,G);else{var g=_t(ae,!0),h=u-B;qc(ae,He,g.top+(he===Xe?h:0)+xt,g.left+(he===Xe?0:h)+xt)}Pt(n||l?W:V),Z&&d<1&&n||b(K+(1!==d||l?0:$))}}else b(Ja(K+$*d));!ue||A.tween||je||ot||te.restart(!0),C&&(s||ce&&d&&(d<1||!tt))&&We(C.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](C.className)}),!T||ve||e||T(Te),a&&!je?(ve&&(c&&("complete"===o?O.pause().totalProgress(1):"reset"===o?O.restart(!0).pause():"restart"===o?O.restart(!0):O[o]()),T&&T(Te)),!s&&tt||(M&&s&&Ya(Te,M),xe[i]&&Ya(Te,xe[i]),ce&&(1===d?Te.kill(!1,1):xe[i]=0),s||xe[i=1===d?1:3]&&Ya(Te,xe[i])),pe&&!n&&Math.abs(Te.getVelocity())>(Va(pe)?pe:2500)&&(Xa(Te.callbackAnimation),ee?ee.progress(1):Xa(O,"reverse"===o?1:!d,1))):ve&&T&&!je&&T(Te)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(X._isFlipped?1:0)),x(v)}S&&S(-u/de.duration()*(de._caScrollDist||0))}},Te.enable=function(e,t){Te.enabled||(Te.enabled=!0,xb(be,"resize",Mb),me||xb(be,"scroll",Kb),Ce&&xb(ScrollTrigger,"refreshInit",Ce),!1!==e&&(Te.progress=Oe=0,R=D=Ee=Ae()),!1!==t&&Te.refresh())},Te.getTween=function(e){return e&&A?A.tween:ee},Te.setPositions=function(e,t,r,n){if(de){var i=de.scrollTrigger,o=de.duration(),a=i.end-i.start;e=i.start+a*e/o,t=i.start+a*t/o}Te.refresh(!1,!1,{start:Ea(e,r&&!!Te._startClamp),end:Ea(t,r&&!!Te._endClamp)},n),Te.update()},Te.adjustPinSpacing=function(e){if(Q&&e){var t=Q.indexOf(he.d)+1;Q[t]=parseFloat(Q[t])+e+xt,Q[1]=parseFloat(Q[1])+e+xt,Pt(Q)}},Te.disable=function(e,t){if(!1!==e&&Te.revert(!0,!0),Te.enabled&&(Te.enabled=Te.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Ce&&yb(ScrollTrigger,"refreshInit",Ce),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=Tt.length;r--;)if(Tt[r].scroller===be&&Tt[r]!==Te)return;yb(be,"resize",Mb),me||yb(be,"scroll",Kb)}},Te.kill=function(e,t){Te.disable(e,t),ee&&!t&&ee.kill(),a&&delete Ct[a];var r=Tt.indexOf(Te);0<=r&&Tt.splice(r,1),r===$e&&0o&&(b()>o?a.progress(1)&&b(o):a.resetTo("scrollY",o))}Wa(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,o,l,i,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||qe,g=Fe.core.globals().ScrollSmoother,h=g&&g.get(),v=E&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=L(p,Xe),m=L(p,Ne),y=1,x=(k.isTouch&&Je.visualViewport?Je.visualViewport.scale*Je.visualViewport.width:Je.outerWidth)/Je.innerWidth,_=0,w=Ua(t)?function(){return t(n)}:function(){return t||2.8},S=zc(p,e.type,!0,r),T=Ia,C=Ia;return v&&Fe.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return E&&"touchmove"===e.type&&function ignoreDrag(){if(i){requestAnimationFrame(Jq);var e=Ja(n.deltaY/2),t=C(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ja((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=Ie.cache,$()}return!0}b.offset&&Nq(),i=!0}()||1.05=o||o-1<=r)&&Fe.to({},{onUpdate:Tq,duration:i})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3K||Y.register(window.gsap),$=typeof Intl!="undefined"&&"Segmenter"in Intl?new Intl.Segmenter:0,I=e=>e?typeof e=="string"?I(document.querySelectorAll(e)):"length"in e?Array.from(e).reduce((t,i)=>(typeof i=="string"?t.push(...I(i)):t.push(i),t),[]):[e]:[],ee=e=>I(e).filter(t=>t&&t.nodeType===1),Q=[],U=function(){},de={add:e=>e()},pe=/\s+/g,te=new RegExp("\\p{RI}\\p{RI}|\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?(\\u{200D}\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?)*|.","gu"),J={left:0,top:0,width:0,height:0},ue=(e,t)=>{for(;++t{e.innerHTML=t,i?e.setAttribute("aria-label",i):e.removeAttribute("aria-label"),n?e.setAttribute("aria-hidden",n):e.removeAttribute("aria-hidden")},ne=(e,t)=>{if(t){let i=new Set(e.join("").match(t)||Q),n=e.length,a,c,l,o;if(i.size)for(;--n>-1;){c=e[n];for(l of i)if(l.startsWith(c)&&l.length>c.length){for(a=0,o=c;l.startsWith(o+=e[n+ ++a])&&o.lengthwindow.getComputedStyle(e).display==="inline"&&(e.style.display="inline-block"),M=(e,t,i)=>t.insertBefore(typeof e=="string"?document.createTextNode(e):e,i),X=(e,t,i)=>{let n=t[e+"sClass"]||"",{tag:a="div",aria:c="auto",propIndex:l=!1}=t,o=e==="line"?"block":"inline-block",d=n.indexOf("++")>-1,_=y=>{let m=document.createElement(a),E=i.length+1;return n&&(m.className=n+(d?" "+n+E:"")),l&&m.style.setProperty("--"+e,E+""),c!=="none"&&m.setAttribute("aria-hidden","true"),a!=="span"&&(m.style.position="relative",m.style.display=o),m.textContent=y,i.push(m),m};return d&&(n=n.replace("++","")),_.collection=i,_},fe=(e,t,i,n)=>{let a=X("line",i,n),c=window.getComputedStyle(e).textAlign||"left";return(l,o)=>{let d=a("");for(d.style.textAlign=c,e.insertBefore(d,t[l]);l{var y;let m=Array.from(e.childNodes),E=0,{wordDelimiter:R,reduceWhiteSpace:B=!0,prepareText:V}=t,G=e.getBoundingClientRect(),j=G,q=!B&&window.getComputedStyle(e).whiteSpace.substring(0,3)==="pre",C=0,b=i.collection,r,f,O,s,g,x,z,h,p,W,S,T,N,F,w,u,L,v;for(typeof R=="object"?(O=R.delimiter||R,f=R.replaceWith||""):f=R===""?"":R||" ",r=f!==" ";E-1?(x=b[b.length-1],x.appendChild(document.createTextNode(n?"":u))):(x=i(n?"":u),M(x,e,s),C&&p===1&&!z&&x.insertBefore(C,x.firstChild)),n)for(S=$?ne([...$.segment(u)].map(H=>H.segment),d):u.match(o)||Q,v=0;vj.top&&W.left<=j.left){for(T=e.cloneNode(),N=e.childNodes[0];N&&N!==x;)F=N,N=N.nextSibling,T.appendChild(F);e.parentNode.insertBefore(T,e),a&&le(T)}j=W}(p=g.length?" ":r&&u.slice(-1)===" "?" "+f:f,e,s)}e.removeChild(s),C=0}else s.nodeType===1&&(l&&l.indexOf(s)>-1?(b.indexOf(s.previousSibling)>-1&&b[b.length-1].appendChild(s),C=s):(se(s,t,i,n,a,c,l,o,d,!0),C=0),a&&le(s))};const re=class ae{constructor(t,i){this.isSplit=!1,he(),this.elements=ee(t),this.chars=[],this.words=[],this.lines=[],this.masks=[],this.vars=i,this.elements.forEach(l=>{var o;i.overwrite!==!1&&((o=l[Z])==null||o._data.orig.filter(({element:d})=>d===l).forEach(ie)),l[Z]=this}),this._split=()=>this.isSplit&&this.split(this.vars);let n=[],a,c=()=>{let l=n.length,o;for(;l--;){o=n[l];let d=o.element.offsetWidth;if(d!==o.width){o.width=d,this._split();return}}};this._data={orig:n,obs:typeof ResizeObserver!="undefined"&&new ResizeObserver(()=>{clearTimeout(a),a=setTimeout(c,200)})},U(this),this.split(i)}split(t){return(this._ctx||de).add(()=>{this.isSplit&&this.revert(),this.vars=t=t||this.vars||{};let{type:i="chars,words,lines",aria:n="auto",deepSlice:a=!0,smartWrap:c,onSplit:l,autoSplit:o=!1,specialChars:d,mask:_}=this.vars,y=i.indexOf("lines")>-1,m=i.indexOf("chars")>-1,E=i.indexOf("words")>-1,R=m&&!E&&!y,B=d&&("push"in d?new RegExp("(?:"+d.join("|")+")","gu"):d),V=B?new RegExp(B.source+"|"+te.source,"gu"):te,G=!!t.ignore&&ee(t.ignore),{orig:j,animTime:q,obs:C}=this._data,b;(m||E||y)&&(this.elements.forEach((r,f)=>{j[f]={element:r,html:r.innerHTML,ariaL:r.getAttribute("aria-label"),ariaH:r.getAttribute("aria-hidden")},n==="auto"?r.setAttribute("aria-label",(r.textContent||"").trim()):n==="hidden"&&r.setAttribute("aria-hidden","true");let O=[],s=[],g=[],x=m?X("char",t,O):null,z=X("word",t,s),h,p,W,S;if(se(r,t,z,x,R,a&&(y||R),G,V,B,!1),y){let T=I(r.childNodes),N=fe(r,T,t,g),F,w=[],u=0,L=T.map(P=>P.nodeType===1?P.getBoundingClientRect():J),v=J,H;for(h=0;hv.top&&H.left{var oe;return(oe=P.parentNode)==null?void 0:oe.removeChild(P)})}if(!E){for(h=0;h{let f=r.cloneNode();return r.replaceWith(f),f.appendChild(r),r.className&&(f.className=r.className.trim().split(" ").map(O=>O+"-mask").join(" ")),f.style.overflow="clip",f}))),this.isSplit=!0,D&&y&&o&&D.addEventListener("loadingdone",this._split),(b=l&&l(this))&&b.totalTime&&(this._data.anim=q?b.totalTime(q):b),y&&o&&this.elements.forEach((r,f)=>{j[f].width=r.offsetWidth,C&&C.observe(r)})}),this}kill(){let{obs:t}=this._data;t&&t.disconnect(),D==null||D.removeEventListener("loadingdone",this._split)}revert(){var t,i;if(this.isSplit){let{orig:n,anim:a}=this._data;this.kill(),n.forEach(ie),this.chars.length=this.words.length=this.lines.length=n.length=this.masks.length=0,this.isSplit=!1,a&&(this._data.animTime=a.totalTime(),a.revert()),(i=(t=this.vars).onRevert)==null||i.call(t,this)}return this}static create(t,i){return new ae(t,i)}static register(t){A=A||t||window.gsap,A&&(I=A.utils.toArray,U=A.core.context||U),!K&&window.innerWidth>0&&(D=document.fonts,K=!0)}};re.version="3.15.0";let Y=re;k.SplitText=Y,k.default=Y;if (typeof(window)==="undefined"||window!==k){Object.defineProperty(k,"__esModule",{value:!0})} else {delete k.default}}); diff --git a/assets/vendor/gsap.min.js b/assets/vendor/gsap.min.js new file mode 100644 index 0000000..3c73d76 --- /dev/null +++ b/assets/vendor/gsap.min.js @@ -0,0 +1,11 @@ +/*! + * GSAP 3.15.0 + * https://gsap.com + * + * @license Copyright 2026, GreenSock. All rights reserved. + * Subject to the terms at https://gsap.com/standard-license. + * @author: Jack Doyle, jack@greensock.com + */ + +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(",")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&At(t,"onInterrupt"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:_e,add:$t,kill:Te,modifier:ve,rawVars:0},a={targetTest:0,get:0,getSetter:ue,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),dt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}U(e,i),t.register&&t.register(Fe,i,we)}else Dt.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&zt,e&zt]:0:Rt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Rt[e])p=Rt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if("hsl"===e.substr(0,3))if(p=d=e.match(rt),r){if(~e.indexOf("="))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(K(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=Y.autoSleep||120;var e=L._first;if((!e||!e._ts)&&Y.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Gt.prototype,{_lock:0,_hasPause:0,_forcing:0});function cc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Qt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||K(t)||J(t))return r(t)?Qt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Qt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==c))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function ic(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(K(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Zt,Wt,$t=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var c,d=t[e],p="get"!==i?i:s(d)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():d,_=s(d)?l?se:ae:ie;if(r(n)&&(~n.indexOf("random(")&&(n=rb(n)),"="===n.charAt(1)&&(!(c=ma(p,n)+(_a(p)||0))&&0!==c||(n=c))),!f||p!==n||Wt)return isNaN(p*n)||""===n?(d||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,c,d,p,_=new we(this._pt,t,e,0,1,pe,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(d=~(i+="").indexOf("random("))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?ma(c,l)-c:parseFloat(l)-c,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},k)"ease"===l||"easeEach"===l||ic(l,k[l],u,k.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=R=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(At(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),E.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){d||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Ht(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,c=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!c)for(c=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Wt=1,t.vars[e]="+=0",Ht(t,s),Wt=0,o?T(e+" not eligible for reset. Try splitting into individual properties"):1;c.push(u)}for(f=c.length;f--;)(u=(h=c[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Zt&&!0!==Zt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,c=t?Pt(t):f,d=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,c))return"all"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~c.indexOf(f[l]))for(u in a=d[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||Ba(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja("staggerTo,staggerFrom,staggerFromTo",function(r){te[r]=function(){var t=new Gt,e=Ct.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function qc(t,e,r){return t.setAttribute(e,r)}function yc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ie=function _setterPlain(t,e,r){return t[e]=r},ae=function _setterFunc(t,e,r){return t[e](r)},se=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ue=function _getSetter(t,e){return s(t[e])?ae:u(t[e])&&t.setAttribute?qc:ie},fe=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},de=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},pe=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},_e=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ve=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,"_pt"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=yc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||fe,this.d=s||this,this.set=o||ie,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger,easeReverse",function(t){return dt[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Gt,L=new Gt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),Y.stringFilter=Ib;function Gc(t){return(Oe[t]||Me).map(function(t){return t()})}function Hc(){var t=Date.now(),o=[];2=1;let i=n?1:this.easing(r);this.value=this.from+(this.to-this.from)*i}else this.lerp?(this.value=r(this.value,this.to,this.lerp*60,e),Math.round(this.value)===Math.round(this.to)&&(this.value=this.to,n=!0)):(this.value=this.to,n=!0);n&&this.stop(),this.onUpdate?.(this.value,n)}stop(){this.isRunning=!1}fromTo(e,t,{lerp:n,duration:r,easing:i,onStart:a,onUpdate:o}){this.from=this.value=e,this.to=t,this.lerp=n,this.duration=r,this.easing=i,this.currentTime=0,this.isRunning=!0,a?.(),this.onUpdate=o}};function o(e,t){let n;return function(...r){clearTimeout(n),n=setTimeout(()=>{n=void 0,e.apply(this,r)},t)}}var s=class{width=0;height=0;scrollHeight=0;scrollWidth=0;debouncedResize;wrapperResizeObserver;contentResizeObserver;constructor(e,t,{autoResize:n=!0,debounce:r=250}={}){this.wrapper=e,this.content=t,n&&(this.debouncedResize=o(this.resize,r),this.wrapper instanceof Window?window.addEventListener(`resize`,this.debouncedResize):(this.wrapperResizeObserver=new ResizeObserver(this.debouncedResize),this.wrapperResizeObserver.observe(this.wrapper)),this.contentResizeObserver=new ResizeObserver(this.debouncedResize),this.contentResizeObserver.observe(this.content)),this.resize()}destroy(){this.wrapperResizeObserver?.disconnect(),this.contentResizeObserver?.disconnect(),this.wrapper===window&&this.debouncedResize&&window.removeEventListener(`resize`,this.debouncedResize)}resize=()=>{this.onWrapperResize(),this.onContentResize()};onWrapperResize=()=>{this.wrapper instanceof Window?(this.width=window.innerWidth,this.height=window.innerHeight):(this.width=this.wrapper.clientWidth,this.height=this.wrapper.clientHeight)};onContentResize=()=>{this.wrapper instanceof Window?(this.scrollHeight=this.content.scrollHeight,this.scrollWidth=this.content.scrollWidth):(this.scrollHeight=this.wrapper.scrollHeight,this.scrollWidth=this.wrapper.scrollWidth)};get limit(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}},c=class{events={};emit(e,...t){let n=this.events[e]||[];for(let e=0,r=n.length;e{this.events[e]=this.events[e]?.filter(e=>t!==e)}}off(e,t){this.events[e]=this.events[e]?.filter(e=>t!==e)}destroy(){this.events={}}};let l={passive:!1};function u(e,t){return e===1?16.666666666666668:e===2?t:1}var d=class{touchStart={x:0,y:0};lastDelta={x:0,y:0};window={width:0,height:0};emitter=new c;constructor(e,t={wheelMultiplier:1,touchMultiplier:1}){this.element=e,this.options=t,window.addEventListener(`resize`,this.onWindowResize),this.onWindowResize(),this.element.addEventListener(`wheel`,this.onWheel,l),this.element.addEventListener(`touchstart`,this.onTouchStart,l),this.element.addEventListener(`touchmove`,this.onTouchMove,l),this.element.addEventListener(`touchend`,this.onTouchEnd,l)}on(e,t){return this.emitter.on(e,t)}destroy(){this.emitter.destroy(),window.removeEventListener(`resize`,this.onWindowResize),this.element.removeEventListener(`wheel`,this.onWheel,l),this.element.removeEventListener(`touchstart`,this.onTouchStart,l),this.element.removeEventListener(`touchmove`,this.onTouchMove,l),this.element.removeEventListener(`touchend`,this.onTouchEnd,l)}onTouchStart=e=>{let{clientX:t,clientY:n}=e.targetTouches?e.targetTouches[0]:e;this.touchStart.x=t,this.touchStart.y=n,this.lastDelta={x:0,y:0},this.emitter.emit(`scroll`,{deltaX:0,deltaY:0,event:e})};onTouchMove=e=>{let{clientX:t,clientY:n}=e.targetTouches?e.targetTouches[0]:e,r=-(t-this.touchStart.x)*this.options.touchMultiplier,i=-(n-this.touchStart.y)*this.options.touchMultiplier;this.touchStart.x=t,this.touchStart.y=n,this.lastDelta={x:r,y:i},this.emitter.emit(`scroll`,{deltaX:r,deltaY:i,event:e})};onTouchEnd=e=>{this.emitter.emit(`scroll`,{deltaX:this.lastDelta.x,deltaY:this.lastDelta.y,event:e})};onWheel=e=>{let{deltaX:t,deltaY:n,deltaMode:r}=e,i=u(r,this.window.width),a=u(r,this.window.height);t*=i,n*=a,t*=this.options.wheelMultiplier,n*=this.options.wheelMultiplier,this.emitter.emit(`scroll`,{deltaX:t,deltaY:n,event:e})};onWindowResize=()=>{this.window={width:window.innerWidth,height:window.innerHeight}}};let f=e=>Math.min(1,1.001-2**(-10*e));var p=class{_isScrolling=!1;_isStopped=!1;_isLocked=!1;_preventNextNativeScrollEvent=!1;_resetVelocityTimeout=null;_rafId=null;_isDraggingSelection=!1;reducedMotionMediaQuery=window.matchMedia(`(prefers-reduced-motion: reduce)`);isTouching;isIos;time=0;userData={};lastVelocity=0;velocity=0;direction=0;options;targetScroll;animatedScroll;animate=new a;emitter=new c;dimensions;virtualScroll;constructor({wrapper:t=window,content:n=document.documentElement,eventsTarget:r=t,smoothWheel:i=!0,syncTouch:a=!1,syncTouchLerp:o=.075,touchInertiaExponent:c=1.7,duration:l,easing:u,lerp:p=.1,infinite:m=!1,orientation:h=`vertical`,gestureOrientation:g=h===`horizontal`?`both`:`vertical`,touchMultiplier:_=1,wheelMultiplier:v=1,autoResize:y=!0,prevent:b,virtualScroll:x,overscroll:S=!0,autoRaf:C=!1,anchors:w=!1,autoToggle:T=!1,allowNestedScroll:E=!1,__experimental__naiveDimensions:D=!1,naiveDimensions:O=D,stopInertiaOnNavigate:k=!1,respectReducedMotion:A=!0}={}){window.lenisVersion=e,window.lenis||(window.lenis={}),window.lenis.version=e,h===`horizontal`&&(window.lenis.horizontal=!0),a===!0&&(window.lenis.touch=!0),this.isIos=/(iPad|iPhone|iPod)/g.test(navigator.userAgent),(!t||t===document.documentElement)&&(t=window),typeof l==`number`&&typeof u!=`function`?u=f:typeof u==`function`&&typeof l!=`number`&&(l=1),this.options={wrapper:t,content:n,eventsTarget:r,smoothWheel:i,syncTouch:a,syncTouchLerp:o,touchInertiaExponent:c,duration:l,easing:u,lerp:p,infinite:m,gestureOrientation:g,orientation:h,touchMultiplier:_,wheelMultiplier:v,autoResize:y,prevent:b,virtualScroll:x,overscroll:S,autoRaf:C,anchors:w,autoToggle:T,allowNestedScroll:E,naiveDimensions:O,stopInertiaOnNavigate:k,respectReducedMotion:A},this.dimensions=new s(t,n,{autoResize:y}),this.updateClassName(),this.targetScroll=this.animatedScroll=this.actualScroll,this.options.wrapper.addEventListener(`scroll`,this.onNativeScroll),this.options.wrapper.addEventListener(`scrollend`,this.onScrollEnd,{capture:!0}),(this.options.anchors||this.options.stopInertiaOnNavigate)&&this.options.wrapper.addEventListener(`click`,this.onClick),this.options.wrapper.addEventListener(`pointerdown`,this.onPointerDown),this.virtualScroll=new d(r,{touchMultiplier:_,wheelMultiplier:v}),this.virtualScroll.on(`scroll`,this.onVirtualScroll),this.options.autoToggle&&(this.checkOverflow(),this.rootElement.addEventListener(`transitionend`,this.onTransitionEnd)),this.options.autoRaf&&(this._rafId=requestAnimationFrame(this.raf))}destroy(){this.emitter.destroy(),this.options.wrapper.removeEventListener(`scroll`,this.onNativeScroll),this.options.wrapper.removeEventListener(`scrollend`,this.onScrollEnd,{capture:!0}),this.options.wrapper.removeEventListener(`pointerdown`,this.onPointerDown),(this.options.anchors||this.options.stopInertiaOnNavigate)&&this.options.wrapper.removeEventListener(`click`,this.onClick),this.virtualScroll.destroy(),this.dimensions.destroy(),this.cleanUpClassName(),this._rafId&&cancelAnimationFrame(this._rafId)}on(e,t){return this.emitter.on(e,t)}off(e,t){return this.emitter.off(e,t)}onScrollEnd=e=>{e instanceof CustomEvent||(this.isScrolling===`smooth`||this.isScrolling===!1)&&e.stopPropagation()};dispatchScrollendEvent=()=>{this.options.wrapper.dispatchEvent(new CustomEvent(`scrollend`,{bubbles:this.options.wrapper===window,detail:{lenisScrollEnd:!0}}))};get overflow(){let e=this.isHorizontal?`overflow-x`:`overflow-y`;return getComputedStyle(this.rootElement)[e]}checkOverflow(){[`hidden`,`clip`].includes(this.overflow)?this.internalStop():this.internalStart()}onTransitionEnd=e=>{e.propertyName?.includes(`overflow`)&&e.target===this.rootElement&&this.checkOverflow()};setScroll(e){this.isHorizontal?this.options.wrapper.scrollTo({left:e,behavior:`instant`}):this.options.wrapper.scrollTo({top:e,behavior:`instant`})}onClick=e=>{let t=e.composedPath().filter(e=>e instanceof HTMLAnchorElement&&e.href).map(e=>new URL(e.href)),n=new URL(window.location.href);if(this.options.anchors){let e=t.find(e=>n.host===e.host&&n.pathname===e.pathname&&e.hash);if(e){let t=typeof this.options.anchors==`object`&&this.options.anchors?this.options.anchors:void 0,n=decodeURIComponent(e.hash);this.scrollTo(n,t);return}}if(this.options.stopInertiaOnNavigate&&t.some(e=>n.host===e.host&&n.pathname!==e.pathname)){this.reset();return}};onPointerDown=e=>{e.button===1&&this.reset()};isTouchOnSelectionHandle(e){let t=window.getSelection();if(!t||t.isCollapsed||t.rangeCount===0)return!1;let n=e.targetTouches[0]??e.changedTouches[0];if(!n)return!1;let r=t.getRangeAt(0).getClientRects();if(r.length===0)return!1;let i=r[0],a=r[r.length-1],o=Math.hypot(n.clientX-i.left,n.clientY-i.top)<=40,s=Math.hypot(n.clientX-a.right,n.clientY-a.bottom)<=40;return o||s}onVirtualScroll=e=>{if(typeof this.options.virtualScroll==`function`&&this.options.virtualScroll(e)===!1)return;let{deltaX:t,deltaY:n,event:r}=e;if(this.emitter.emit(`virtual-scroll`,{deltaX:t,deltaY:n,event:r}),r.ctrlKey||r.lenisStopPropagation)return;let i=r.type.includes(`touch`),a=r.type.includes(`wheel`);if(i&&this.isIos&&(r.type===`touchstart`&&(this._isDraggingSelection=this.isTouchOnSelectionHandle(r)),this._isDraggingSelection)){r.type===`touchend`&&(this._isDraggingSelection=!1);return}this.isTouching=r.type===`touchstart`||r.type===`touchmove`;let o=t===0&&n===0;if(this.options.syncTouch&&i&&r.type===`touchstart`&&o&&!this.isStopped&&!this.isLocked){this.reset();return}let s=this.options.gestureOrientation===`vertical`&&n===0||this.options.gestureOrientation===`horizontal`&&t===0;if(o||s)return;let c=r.composedPath();c=c.slice(0,c.indexOf(this.rootElement));let l=this.options.prevent,u=Math.abs(t)>=Math.abs(n)?`horizontal`:`vertical`;if(c.find(e=>e instanceof HTMLElement&&(typeof l==`function`&&l?.(e)||e.hasAttribute?.(`data-lenis-prevent`)||u===`vertical`&&e.hasAttribute?.(`data-lenis-prevent-vertical`)||u===`horizontal`&&e.hasAttribute?.(`data-lenis-prevent-horizontal`)||i&&e.hasAttribute?.(`data-lenis-prevent-touch`)||a&&e.hasAttribute?.(`data-lenis-prevent-wheel`)||this.options.allowNestedScroll&&this.hasNestedScroll(e,{deltaX:t,deltaY:n}))))return;if(this.isStopped||this.isLocked){r.cancelable&&r.preventDefault();return}if(!(this.options.syncTouch&&i||this.options.smoothWheel&&a)){this.isScrolling=`native`,this.animate.stop(),r.lenisStopPropagation=!0;return}let d=n;this.options.gestureOrientation===`both`?d=Math.abs(n)>Math.abs(t)?n:t:this.options.gestureOrientation===`horizontal`&&(d=t),(!this.options.overscroll||this.options.infinite||this.options.wrapper!==window&&this.limit>0&&(this.animatedScroll>0&&this.animatedScroll0||this.animatedScroll===this.limit&&n<0))&&(r.lenisStopPropagation=!0),r.cancelable&&r.preventDefault();let f=i&&this.options.syncTouch,p=i&&r.type===`touchend`;p&&(d=Math.sign(d)*Math.abs(this.velocity)**this.options.touchInertiaExponent),this.scrollTo(this.targetScroll+d,{programmatic:!1,...f?{lerp:p?this.options.syncTouchLerp:1}:{lerp:this.options.lerp,duration:this.options.duration,easing:this.options.easing}})};resize(){this.dimensions.resize(),this.animatedScroll=this.targetScroll=this.actualScroll,this.emit()}emit(){this.emitter.emit(`scroll`,this)}onNativeScroll=()=>{if(this._resetVelocityTimeout!==null&&(clearTimeout(this._resetVelocityTimeout),this._resetVelocityTimeout=null),this._preventNextNativeScrollEvent){this._preventNextNativeScrollEvent=!1;return}if(this.isScrolling===!1||this.isScrolling===`native`){let e=this.animatedScroll;this.animatedScroll=this.targetScroll=this.actualScroll,this.lastVelocity=this.velocity,this.velocity=this.animatedScroll-e,this.direction=Math.sign(this.animatedScroll-e),this.isStopped||(this.isScrolling=`native`),this.emit(),this.velocity!==0&&(this._resetVelocityTimeout=setTimeout(()=>{this.lastVelocity=this.velocity,this.velocity=0,this.isScrolling=!1,this.emit()},400))}};reset(){this.isLocked=!1,this.isScrolling=!1,this.animatedScroll=this.targetScroll=this.actualScroll,this.lastVelocity=this.velocity=0,this.animate.stop()}start(){if(this.isStopped){if(this.options.autoToggle){this.rootElement.style.removeProperty(`overflow`);return}this.internalStart()}}internalStart(){this.isStopped&&(this.reset(),this.isStopped=!1,this.emit())}stop(){if(!this.isStopped){if(this.options.autoToggle){this.rootElement.style.setProperty(`overflow`,`clip`);return}this.internalStop()}}internalStop(){this.isStopped||(this.reset(),this.isStopped=!0,this.emit())}raf=e=>{let t=e-(this.time||e);this.time=e,this.animate.advance(t*.001),this.options.autoRaf&&(this._rafId=requestAnimationFrame(this.raf))};scrollTo(e,{offset:n=0,immediate:r=!1,lock:i=!1,programmatic:a=!0,lerp:o=a?this.options.lerp:void 0,duration:s=a?this.options.duration:void 0,easing:c=a?this.options.easing:void 0,onStart:l,onComplete:u,force:d=!1,userData:p}={}){if(this.prefersReducedMotion&&(a?r=!0:(o=1,s=void 0,c=void 0)),(this.isStopped||this.isLocked)&&!d)return;let m=e,h=n;if(typeof m==`string`&&[`top`,`left`,`start`,`#`].includes(m))m=0;else if(typeof m==`string`&&[`bottom`,`right`,`end`].includes(m))m=this.limit;else{let e=null;if(typeof m==`string`?(e=m.startsWith(`#`)?document.getElementById(m.slice(1)):document.querySelector(m),e||(m===`#top`?m=0:console.warn(`Lenis: Target not found`,m))):m instanceof HTMLElement&&m?.nodeType&&(e=m),e){if(this.options.wrapper!==window){let e=this.rootElement.getBoundingClientRect();h-=this.isHorizontal?e.left:e.top}let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=this.isHorizontal?Number.parseFloat(n.scrollMarginLeft):Number.parseFloat(n.scrollMarginTop),i=getComputedStyle(this.rootElement),a=this.isHorizontal?Number.parseFloat(i.scrollPaddingLeft):Number.parseFloat(i.scrollPaddingTop);m=(this.isHorizontal?t.left:t.top)+this.animatedScroll-(Number.isNaN(r)?0:r)-(Number.isNaN(a)?0:a)}}if(typeof m==`number`){if(m+=h,this.options.infinite){if(a){this.targetScroll=this.animatedScroll=this.scroll;let e=m-this.animatedScroll;e>this.limit/2?m-=this.limit:e<-this.limit/2&&(m+=this.limit)}}else m=t(0,m,this.limit);if(m===this.targetScroll){l?.(this),u?.(this);return}if(this.userData=p??{},r){this.animatedScroll=this.targetScroll=m,this.setScroll(this.scroll),this.reset(),this.preventNextNativeScrollEvent(),this.emit(),u?.(this),this.userData={},requestAnimationFrame(()=>{this.dispatchScrollendEvent()});return}a||(this.targetScroll=m),typeof s==`number`&&typeof c!=`function`?c=f:typeof c==`function`&&typeof s!=`number`&&(s=1),this.animate.fromTo(this.animatedScroll,m,{duration:s,easing:c,lerp:o,onStart:()=>{i&&(this.isLocked=!0),this.isScrolling=`smooth`,l?.(this)},onUpdate:(e,t)=>{this.isScrolling=`smooth`,this.lastVelocity=this.velocity,this.velocity=e-this.animatedScroll,this.direction=Math.sign(this.velocity),this.animatedScroll=e,this.setScroll(this.scroll),a&&(this.targetScroll=e),t||this.emit(),t&&(this.reset(),this.emit(),u?.(this),this.userData={},requestAnimationFrame(()=>{this.dispatchScrollendEvent()}),this.preventNextNativeScrollEvent())}})}}preventNextNativeScrollEvent(){this._preventNextNativeScrollEvent=!0,requestAnimationFrame(()=>{this._preventNextNativeScrollEvent=!1})}hasNestedScroll(e,{deltaX:t,deltaY:n}){let r=Date.now();e._lenis||={};let i=e._lenis,a,o,s,c,l,u,d,f,p,m;if(r-(i.time??0)>2e3){i.time=Date.now();let t=window.getComputedStyle(e);if(i.computedStyle=t,a=[`auto`,`overlay`,`scroll`].includes(t.overflowX),o=[`auto`,`overlay`,`scroll`].includes(t.overflowY),l=[`auto`].includes(t.overscrollBehaviorX),u=[`auto`].includes(t.overscrollBehaviorY),i.hasOverflowX=a,i.hasOverflowY=o,!(a||o))return!1;d=e.scrollWidth,f=e.scrollHeight,p=e.clientWidth,m=e.clientHeight,s=d>p,c=f>m,i.isScrollableX=s,i.isScrollableY=c,i.scrollWidth=d,i.scrollHeight=f,i.clientWidth=p,i.clientHeight=m,i.hasOverscrollBehaviorX=l,i.hasOverscrollBehaviorY=u}else s=i.isScrollableX,c=i.isScrollableY,a=i.hasOverflowX,o=i.hasOverflowY,d=i.scrollWidth,f=i.scrollHeight,p=i.clientWidth,m=i.clientHeight,l=i.hasOverscrollBehaviorX,u=i.hasOverscrollBehaviorY;if(!(a&&s||o&&c))return!1;let h=Math.abs(t)>=Math.abs(n)?`horizontal`:`vertical`,g,_,v,y,b,x;if(h===`horizontal`)g=Math.round(e.scrollLeft),_=d-p,v=t,y=a,b=s,x=l;else if(h===`vertical`)g=Math.round(e.scrollTop),_=f-m,v=n,y=o,b=c,x=u;else return!1;return!x&&(g>=_||g<=0)?!0:(v>0?g<_:g>0)&&y&&b}get rootElement(){return this.options.wrapper===window?document.documentElement:this.options.wrapper}get limit(){return this.options.naiveDimensions?this.isHorizontal?this.rootElement.scrollWidth-this.rootElement.clientWidth:this.rootElement.scrollHeight-this.rootElement.clientHeight:this.dimensions.limit[this.isHorizontal?`x`:`y`]}get isHorizontal(){return this.options.orientation===`horizontal`}get actualScroll(){let e=this.options.wrapper;return this.isHorizontal?e.scrollX??e.scrollLeft:e.scrollY??e.scrollTop}get scroll(){return this.options.infinite?i(this.animatedScroll,this.limit):this.animatedScroll}get progress(){return this.limit===0?1:this.scroll/this.limit}get isScrolling(){return this._isScrolling}set isScrolling(e){this._isScrolling!==e&&(this._isScrolling=e,this.updateClassName())}get isStopped(){return this._isStopped}set isStopped(e){this._isStopped!==e&&(this._isStopped=e,this.updateClassName())}get isLocked(){return this._isLocked}set isLocked(e){this._isLocked!==e&&(this._isLocked=e,this.updateClassName())}get isSmooth(){return this.isScrolling===`smooth`}get prefersReducedMotion(){return this.options.respectReducedMotion&&this.reducedMotionMediaQuery.matches}get className(){let e=`lenis`;return this.options.autoToggle&&(e+=` lenis-autoToggle`),this.isStopped&&(e+=` lenis-stopped`),this.isLocked&&(e+=` lenis-locked`),this.isScrolling&&(e+=` lenis-scrolling`),this.isScrolling===`smooth`&&(e+=` lenis-smooth`),e}updateClassName(){this.cleanUpClassName(),this.className.split(` `).forEach(e=>{this.rootElement.classList.add(e)})}cleanUpClassName(){for(let e of Array.from(this.rootElement.classList))(e===`lenis`||e.startsWith(`lenis-`))&&this.rootElement.classList.remove(e)}};globalThis.Lenis=p,globalThis.Lenis.prototype=p.prototype})(); +//# sourceMappingURL=lenis.min.js.map \ No newline at end of file diff --git a/datenschutz.html b/datenschutz.html new file mode 100644 index 0000000..63957a0 --- /dev/null +++ b/datenschutz.html @@ -0,0 +1,214 @@ + + + + + + Datenschutz – Olzinger Haustechnik + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + +
    + 0871 72617 + Anfrage starten + +
    +
    +
    + + + +
    +
    +
    +

    Startseite / Rechtliches

    +

    Datenschutz­erklärung

    +
    +
    + +
    +
    + + +
    +

    1. Verantwortlicher

    +

    Verantwortlich für die Datenverarbeitung auf dieser Website im Sinne der Datenschutz-Grundverordnung (DSGVO) ist:

    +
    +

    Olzinger GmbH

    +

    Ahornstraße 112, 84030 Ergolding

    +

    Vertreten durch die Geschäftsführer Franz Ramsauer und Robert Straub

    +

    Telefon: 0871 72617 · E-Mail: kontakt@olzinger.de

    +
    + +

    2. Datenschutz auf einen Blick

    +

    Wir haben diese Website bewusst datensparsam gebaut:

    +
      +
    • Wir setzen keine Cookies und verwenden keine Analyse- oder Tracking-Werkzeuge.
      • +
    • Schriften, Skripte und Grafiken werden lokal von unserem Server geladen – es werden beim Seitenaufruf keine Daten an Drittanbieter (z. B. Google Fonts oder Content-Delivery-Netzwerke) übertragen.
      • +
    • Personenbezogene Daten verarbeiten wir nur, wenn Sie uns aktiv kontaktieren.
      • +
    + +

    3. Hosting und Server-Logfiles

    +

    Diese Website wird bei einem externen Dienstleister gehostet . Beim Aufruf der Website werden durch den Webserver automatisch Informationen erfasst, die Ihr Browser übermittelt (sogenannte Server-Logfiles):

    +
      +
    • IP-Adresse des anfragenden Geräts
      • +
    • Datum und Uhrzeit des Zugriffs
      • +
    • aufgerufene Seite bzw. Datei und übertragene Datenmenge
      • +
    • Referrer-URL (zuvor besuchte Seite)
      • +
    • verwendeter Browser und Betriebssystem
      • +
    +

    Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Unser berechtigtes Interesse liegt in der technisch fehlerfreien und sicheren Bereitstellung der Website. Die Logfiles werden gelöscht, sobald sie für diesen Zweck nicht mehr erforderlich sind, sofern sie nicht zur Aufklärung von Sicherheitsvorfällen benötigt werden.

    + +

    4. Cookies, Tracking und lokale Speicherung

    +

    Diese Website verwendet keine Cookies, keine Analyse-Dienste, keine Social-Media-Plugins und keine Werbe-Tracker. Es werden auch keine Informationen im lokalen Speicher Ihres Browsers abgelegt. Die Animationen und das „Wärmebild“ werden vollständig in Ihrem Browser berechnet.

    + +

    5. Kontaktaufnahme per Telefon, E-Mail und Kontaktformular

    +

    Wenn Sie uns kontaktieren, verarbeiten wir die von Ihnen gemachten Angaben (z. B. Name, E-Mail-Adresse, Telefonnummer, Ort sowie den Inhalt Ihrer Nachricht), um Ihre Anfrage zu bearbeiten und Ihnen zu antworten.

    +

    Die Angaben aus dem Kontaktformular werden über unseren Webserver als E-Mail an uns übermittelt. Ist dies technisch nicht möglich, öffnet sich stattdessen Ihr eigenes E-Mail-Programm mit einer vorbereiteten Nachricht; der Versand erfolgt dann über Ihren E-Mail-Anbieter.

    +

    Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags oder der Durchführung vorvertraglicher Maßnahmen (z. B. einem Angebot) zusammenhängt, im Übrigen Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an der Beantwortung von Anfragen). Wir löschen Ihre Daten, sobald sie für die Bearbeitung nicht mehr erforderlich sind; gesetzliche Aufbewahrungspflichten (insbesondere nach Handels- und Steuerrecht) bleiben unberührt.

    + +

    6. Heizungs-Finder

    +

    Der Heizungs-Finder läuft vollständig in Ihrem Browser. Ihre Antworten werden weder gespeichert noch an uns übertragen. Nur wenn Sie das Ergebnis über die Schaltfläche „Ergebnis mit uns besprechen“ in das Kontaktformular übernehmen und dieses absenden, erhalten wir die Angaben im Rahmen Ihrer Anfrage (siehe Abschnitt 5).

    + +

    7. Bewerbungen

    +

    Bewerbungsunterlagen, die Sie uns per E-Mail senden, verarbeiten wir zur Durchführung des Bewerbungsverfahrens auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO. Kommt kein Arbeits- oder Ausbildungsverhältnis zustande, löschen wir Ihre Unterlagen spätestens sechs Monate nach Abschluss des Verfahrens, sofern Sie nicht in eine längere Speicherung eingewilligt haben.

    + + +

    Für die Routenplanung verlinken wir auf Google Maps. Erst wenn Sie den Link anklicken, werden Sie auf die Seite der Google Ireland Limited weitergeleitet; dort gelten deren Datenschutzbestimmungen. Beim bloßen Besuch unserer Website werden keine Daten an Google übertragen.

    + +

    9. Ihre Rechte

    +

    Sie haben jederzeit das Recht auf Auskunft (Art. 15 DSGVO), Berichtigung (Art. 16 DSGVO), Löschung (Art. 17 DSGVO), Einschränkung der Verarbeitung (Art. 18 DSGVO), Datenübertragbarkeit (Art. 20 DSGVO) sowie das Recht, einer Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO zu widersprechen (Art. 21 DSGVO). Eine erteilte Einwilligung können Sie jederzeit mit Wirkung für die Zukunft widerrufen (Art. 7 Abs. 3 DSGVO). Wenden Sie sich dazu einfach an die oben genannten Kontaktdaten.

    +

    Außerdem haben Sie das Recht, sich bei einer Datenschutz-Aufsichtsbehörde zu beschweren (Art. 77 DSGVO). Für uns zuständig ist das Bayerische Landesamt für Datenschutzaufsicht (BayLDA), Promenade 18, 91522 Ansbach.

    + +

    10. Verschlüsselung

    +

    Diese Website nutzt aus Sicherheitsgründen eine SSL- bzw. TLS-Verschlüsselung. Eine verschlüsselte Verbindung erkennen Sie am Schloss-Symbol in der Adresszeile Ihres Browsers und daran, dass die Adresse mit „https://“ beginnt.

    + +

    Stand: Oktober 2026

    +

    Zurück zur Startseite

    +
    +
    +
    +
    + + + + diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..94a2db5 --- /dev/null +++ b/impressum.html @@ -0,0 +1,201 @@ + + + + + + Impressum – Olzinger Haustechnik + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + +
    + 0871 72617 + Anfrage starten + +
    +
    +
    + + + +
    +
    +
    +

    Startseite / Rechtliches

    +

    Impressum

    +
    +
    + +
    +
    + + +
    +

    Angaben gemäß § 5 DDG

    +
    +

    Olzinger GmbH

    +

    Ahornstraße 112
    84030 Ergolding

    +
    +

    Vertreten durch die Geschäftsführer

    +

    Franz Ramsauer
    Robert Straub

    + +

    Kontakt

    +

    + Telefon: 0871 72617
    + Telefax: 0871 74963
    + E-Mail: kontakt@olzinger.de +

    + +

    Registereintrag

    +

    + Eintragung im Handelsregister
    + Registergericht: Amtsgericht Landshut
    + Registernummer: HRB 3667 +

    + + + +

    Verbraucherstreitbeilegung

    +

    Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.

    + +

    Haftung für Inhalte und Links

    +

    Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Die Angaben im Heizungs-Finder dienen ausschließlich der ersten Orientierung und ersetzen keine individuelle Beratung und Planung vor Ort.

    +

    Unsere Website enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber verantwortlich. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

    + +

    Urheberrecht

    +

    Die durch uns erstellten Inhalte und Werke auf dieser Website unterliegen dem deutschen Urheberrecht. Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung der Olzinger GmbH.

    +

    Illustrationen und Grafiken: individuell für diese Website gestaltet. Schriften: Instrument Sans und Instrument Serif (SIL Open Font License), lokal eingebunden.

    + +

    Zurück zur Startseite

    +
    +
    +
    +
    + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..de732f2 --- /dev/null +++ b/index.html @@ -0,0 +1,1315 @@ + + + + + + Olzinger Haustechnik – Heizung, Sanitär, Lüftung & Wärmepumpen in Ergolding bei Landshut + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + + + +
    + + + 0871 72617 + + + Anfrage starten + + +
    +
    +
    + + + + +
    + + +
    + + + + + +
    +

    Haustechnik aus Ergolding – seit 1985

    +

    + Olzinger Haustechnik: + WärmeHeizung & Regenerativ + WasserSanitär & Bad + LuftLüftung +

    +
    +

    Haustechnik, die man nicht sieht – aber jeden Tag spürt. Wir planen, installieren und warten Heizung, Sanitär, Lüftung und regenerative Energiesysteme in Ergolding, Landshut und der Region.

    +
    + + Projekt anfragen + + + + Welche Heizung passt? + +
    +
    +
    + +
    +

    Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr

    + + + Entdecken + + +
    +
    + + + + + +
    +
    +

    Olzinger Haustechnik

    +

    + Seit 1985 sorgen wir in Ergolding und rund um Landshut für ein Zuhause, in dem einfach alles stimmt: wohlige Wärme, frisches Wasser und gute Luft. Wir planen, bauen und betreuen Haustechnik, die zuverlässig läuft, Energie spart und Ihr Haus fit für die Zukunft macht. +

    +
    + +

    Ein Ansprechpartner für alle Gewerke – von der ersten Beratung bis zur jährlichen Wartung.

    + Mehr über uns +
    +
    +
    + + +
    +
    +
    +
    +

    01Leistungen

    +

    Alles für Ihr Haus. Aus einer Hand.

    +
    +

    Ob neue Wärmepumpe, modernes Bad oder frische Luft ohne Wärmeverlust: Wir verbinden alle Gewerke der Haustechnik – sauber geplant, fachgerecht installiert und langfristig betreut.

    +
    + +
    + + +
    +
    +
    +
    01Regenerative Heiztechnik
    +

    Energie aus Sonne, Luft, Erde und Holz.

    +

    Mit Wärmepumpe, Pelletheizung oder Solarthermie heizen Sie unabhängig von Öl und Gas – klimafreundlich und zukunftssicher. Wir finden das System, das zu Ihrem Haus passt, und begleiten Sie durch die Förderung.

    +
      +
    • Luft- & Sole-Wärmepumpen
      • +
    • Pelletheizungen
      • +
    • Solarthermie
      • +
    • Hybridsysteme & Pufferspeicher
      • +
    +
    + Beratung anfragen + Mit Förderberatung +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    02Heizung
    +

    Wärme, die effizient arbeitet.

    +

    Vom Kesseltausch bis zur kompletten Heizungsmodernisierung: Moderne Brennwerttechnik, Flächenheizungen und eine optimal eingestellte Anlage senken Ihre Energiekosten spürbar.

    +
      +
    • Gas- & Öl-Brennwerttechnik
      • +
    • Heizungsmodernisierung
      • +
    • Fußboden- & Flächenheizung
      • +
    • Hydraulischer Abgleich
      • +
    +
    + Beratung anfragen + Vom Kesseltausch bis zum Komplettsystem +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    03Sanitär & Bad
    +

    Bäder, in denen man gerne ankommt.

    +

    Ob Komplettsanierung, barrierefreies Bad oder neue Trinkwasserinstallation – wir planen und bauen Bäder, die schön aussehen und über Jahrzehnte zuverlässig funktionieren.

    +
      +
    • Komplette Badsanierung
      • +
    • Barrierefreie & bodengleiche Duschen
      • +
    • Trinkwasserinstallation
      • +
    • Warmwasserbereitung
      • +
    +
    + Beratung anfragen + Planung bis Fliese – koordiniert +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    04Lüftung
    +

    Frische Luft. Ohne Wärmeverlust.

    +

    Kontrollierte Wohnraumlüftung tauscht verbrauchte gegen frische Luft – und holt sich dabei die Wärme zurück. Für ein gesundes Raumklima, weniger Feuchtigkeit und spürbar weniger Heizenergie.

    +
      +
    • Zentrale Wohnraumlüftung
      • +
    • Dezentrale Lüftungsgeräte
      • +
    • Wärmerückgewinnung
      • +
    • Filterwechsel & Wartung
      • +
    +
    + Beratung anfragen + Für Neubau & Sanierung +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    05Kundendienst & Wartung
    +

    Damit alles läuft. Jahr für Jahr.

    +

    Regelmäßige Wartung verlängert die Lebensdauer Ihrer Anlage, hält sie effizient und beugt teuren Ausfällen vor. Und wenn doch einmal etwas klemmt, ist unser Kundendienst für Sie da.

    +
      +
    • Heizungs- & Anlagenwartung
      • +
    • Störungsbehebung & Reparatur
      • +
    • Ersatzteile & Service
      • +
    • Beratung zur Modernisierung
      • +
    +
    + Termin vereinbaren + 0871 72617 +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +

    02Energie-Haus

    +

    Ein Haus. Alles verbunden.

    +
    +

    Moderne Haustechnik ist Teamarbeit. Wählen Sie eine Komponente und sehen Sie, wie Wärmepumpe, Solarthermie, Speicher, Flächenheizung, Bad und Lüftung zusammenspielen.

    +
    + +
    +
    + + Energie-Haus: Schnitt durch ein Einfamilienhaus + Wärmepumpe, Solarthermie, Pufferspeicher, Fußbodenheizung, Bad mit Warmwasser und kontrollierte Wohnraumlüftung arbeiten zusammen. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Bad + Schlafen + Küche + Wohnen + Technik + Dachboden + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + + + + + +
    + +
    +
    +

    Regenerative Heiztechnik

    +

    Wärmepumpe

    +

    Holt Wärme aus der Umgebungsluft – selbst an frostigen Tagen. Aus einer Kilowattstunde Strom werden so mehrere Kilowattstunden Heizwärme.

    +
      +
    • Nutzt kostenlose Umweltwärme
      • +
    • Heizt im Winter, kühlt auf Wunsch im Sommer
      • +
    • Ideal mit Fußbodenheizung
      • +
    + Zur Leistung +
    + + + + + +
    + +
    +
    +
    +
    + + +
    +
    +
    +

    03Heizungs-Finder

    +

    Welche Heizung passt zu Ihrem Haus?

    +

    Vier kurze Fragen, eine erste Orientierung. Unverbindlich – die genaue Planung machen wir gemeinsam bei Ihnen vor Ort.

    +

    Kein Login, keine Daten­speicherung

    +
    + +
    +
    + Frage 1 von 4 + +
    + +
    +
    + Um welches Gebäude geht es? +
    + + + +
    +
    + + + + + + + + +
    + +
    + + +
    +
    +
    +
    + + +
    +
    +
    +

    04Ablauf

    +

    Vom ersten Anruf bis zur warmen Dusche.

    +

    Klare Schritte, feste Ansprechpartner und ein Team, das hält, was es verspricht.

    +
    + +
    + +
      +
    1. + +

      Anfrage

      +

      Sie rufen an, schreiben uns oder nutzen das Formular. Wir melden uns und vereinbaren einen Termin, der Ihnen passt.

      +
      2. +
    2. + +

      Beratung vor Ort

      +

      Wir sehen uns Ihr Haus an, hören zu und zeigen ehrlich, welche Lösung sinnvoll ist – und welche nicht.

      +
      3. +
    3. + +

      Planung & Angebot

      +

      Sie erhalten ein transparentes Angebot – auf Wunsch mit Hinweisen zu passenden Förderprogrammen.

      +
      4. +
    4. + +

      Montage & Service

      +

      Unser Team installiert sauber und termintreu. Danach bleiben wir Ihr Ansprechpartner für Wartung und Kundendienst.

      +
      5. +
    +
    +
    +
    + + +
    +
    +
    +
    +

    05Über uns

    +

    Seit 1985 in Ergolding. Und kein bisschen eingerostet.

    +
    +

    Was 1985 als kleiner Betrieb begann, ist heute ein eingespieltes Team aus rund 25 Fachleuten. Geblieben ist unser Anspruch: ehrliche Beratung, saubere Arbeit und Lösungen, die lange halten.

    +
    + +
      +
    • 1985gegründet in Ergolding
      • +
    • 41Jahre Erfahrung
      • +
    • ≈25Mitarbeitende
      • +
    • 4Gewerke unter einem Dach
      • +
    + +
    + +
      +
    1. + 1985 +

      Die Gründung

      +

      Richard Olzinger macht sich nach der Trennung von der Firma Gleisberg selbstständig und gründet Olzinger Haustechnik in Ergolding.

      +
      2. +
    2. + 1994 +

      Neue Partner

      +

      Arno Geier und Franz Ramsauer steigen als Gesellschafter ein und bringen zusätzliches Know-how in den Betrieb.

      +
      3. +
    3. + 2008 +

      Staffelübergabe

      +

      Richard Olzinger geht in den Ruhestand und übergibt seine Anteile an Robert Straub, den kaufmännischen Leiter des Betriebs.

      +
      4. +
    4. + 2014 +

      Gemeinsam an der Spitze

      +

      Arno Geier übergibt seine Anteile an Franz Ramsauer und Robert Straub, die das Unternehmen seitdem gemeinsam führen.

      +
      5. +
    5. + Heute +

      Bereit für die Energiewende

      +

      Mit rund 25 Mitarbeitenden und einem Schwerpunkt auf regenerativer Heiztechnik bringen wir Wärmepumpe, Solarthermie und Co. in die Häuser der Region.

      +
      6. +
    +
    + +
    +

    Geschäftsführung

    +
    +
    + +
    +

    Franz Ramsauer

    +

    Geschäftsführer

    +

    Gesellschafter seit 1994

    +
    +
    +
    + +
    +

    Robert Straub

    +

    Geschäftsführer · Kaufmännische Leitung

    +

    Gesellschafter seit 2008

    +
    +
    +
    + +
    +

    Unser Team

    +

    Rund 25 Fachleute aus der Region

    +

    Planung · Montage · Kundendienst · Büro

    +
    +
    +
    +
    +
    +
    + + +
    + +
    +
    +

    06Karriere

    +

    Hände, die anpacken. Köpfe, die mitdenken.

    +

    Haustechnik ist ein Beruf mit Zukunft – gerade jetzt, wo Wärmepumpe & Co. die Energiewende direkt ins Haus bringen. Wir bilden aus und freuen uns über Verstärkung.

    +
      +
    • Regional verwurzelt
      • +
    • Zukunftsberuf Energiewende
      • +
    • Eingespieltes Team
      • +
    • Moderne Technik
      • +
    +
    +
    +
    +
    + + Ausbildung · Start im September +
    +

    Anlagenmechaniker/in für Sanitär-, Heizungs- und Klimatechnik (m/w/d)

    +

    3,5 Jahre, die sich lohnen: Du lernst Wärmepumpen, Heizungen, Bäder und Lüftungsanlagen von Grund auf kennen – mitten im Team und mit echten Projekten.

    + Jetzt bewerben +
    +
    +
    + + Fachkräfte · Initiativbewerbung +
    +

    Anlagenmechaniker, Monteure & Kundendienst (m/w/d)

    +

    Du kennst dich mit Heizung, Sanitär oder Lüftung aus und suchst ein Team, in dem gute Arbeit zählt? Dann melde dich – wir freuen uns auf deine Initiativbewerbung.

    + Initiativ bewerben +
    +
    +
    +
    + + +
    +
    +
    +

    07Kontakt

    +

    Lassen Sie uns über Ihr Projekt sprechen.

    +

    Rufen Sie uns an, schreiben Sie uns oder nutzen Sie das Formular – wir melden uns schnellstmöglich bei Ihnen.

    + + + +
    +
    +

    Öffnungszeiten

    +

    Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr

    +
    +
    +
    Montag – Donnerstag
    7:00 – 12:00 · 13:00 – 16:30
    +
    Freitag
    7:00 – 11:30
    +
    Samstag & Sonntag
    geschlossen
    +
    +
    +
    + +
    +
    + Worum geht es? +
    + + + + + + + +
    +
    + +
    +
    + + +

    Bitte geben Sie Ihren Namen an.

    +
    +
    + + +

    Bitte geben Sie eine gültige E-Mail-Adresse an.

    +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +

    Bitte schreiben Sie uns kurz, worum es geht.

    +
    + + + + +
    + +

    Bitte stimmen Sie der Datenschutzerklärung zu.

    +
    + +
    + +

    * Pflichtfelder

    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/kontakt.php b/kontakt.php new file mode 100644 index 0000000..9958f9a --- /dev/null +++ b/kontakt.php @@ -0,0 +1,117 @@ + false, 'error' => 'method_not_allowed']); +} + +// Honeypot: echte Besucher sehen dieses Feld nicht. +if (field('website', 200) !== '') { + respond(200, ['ok' => true]); +} + +// Zeitfalle: Bots senden Formulare meist sofort ab. +$started = (int) ($_POST['ts'] ?? 0); +if ($started > 0 && (microtime(true) * 1000 - $started) < MIN_SECONDS * 1000) { + respond(200, ['ok' => true]); +} + +$name = single_line(field('name', 120)); +$email = single_line(field('email', 200)); +$phone = single_line(field('phone', 60)); +$place = single_line(field('place', 120)); +$topic = single_line(field('topic', 120)); +$message = field('message', 5000); +$privacy = !empty($_POST['privacy']); + +$errors = []; +if ($name === '') { + $errors[] = 'name'; +} +if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) { + $errors[] = 'email'; +} +if ((function_exists('mb_strlen') ? mb_strlen($message, 'UTF-8') : strlen($message)) < 5) { + $errors[] = 'message'; +} +if (!$privacy) { + $errors[] = 'privacy'; +} +if ($errors) { + respond(422, ['ok' => false, 'errors' => $errors]); +} + +$subject = 'Anfrage über olzinger.de' . ($topic !== '' ? ' – ' . $topic : ''); +$body = implode("\n", [ + 'Neue Anfrage über das Kontaktformular auf olzinger.de', + '', + 'Anliegen: ' . ($topic !== '' ? $topic : '–'), + 'Name: ' . $name, + 'E-Mail: ' . $email, + 'Telefon: ' . ($phone !== '' ? $phone : '–'), + 'PLZ / Ort: ' . ($place !== '' ? $place : '–'), + '', + 'Nachricht:', + $message, + '', + '—', + 'Gesendet am ' . date('d.m.Y') . ' um ' . date('H:i') . ' Uhr', +]); + +$headers = implode("\r\n", [ + 'From: Website Olzinger <' . SENDER . '>', + 'Reply-To: ' . $email, + 'MIME-Version: 1.0', + 'Content-Type: text/plain; charset=UTF-8', + 'Content-Transfer-Encoding: 8bit', + 'X-Mailer: olzinger.de', +]); + +$encodedSubject = '=?UTF-8?B?' . base64_encode($subject) . '?='; +$sent = @mail(RECIPIENT, $encodedSubject, $body, $headers, '-f' . SENDER); + +respond($sent ? 200 : 500, ['ok' => (bool) $sent]); diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..7d0470b --- /dev/null +++ b/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://www.olzinger.de/sitemap.xml diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..8fcf17e --- /dev/null +++ b/site.webmanifest @@ -0,0 +1,12 @@ +{ + "name": "Olzinger Haustechnik", + "short_name": "Olzinger", + "icons": [ + { "src": "assets/img/favicon.svg", "sizes": "any", "type": "image/svg+xml" }, + { "src": "assets/img/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" } + ], + "theme_color": "#0B151E", + "background_color": "#F3EFE8", + "display": "browser", + "lang": "de" +} diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..3c35ccd --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,19 @@ + + + + https://www.olzinger.de/ + 2026-10-03 + monthly + 1.0 + + + https://www.olzinger.de/impressum.html + 2026-10-03 + 0.2 + + + https://www.olzinger.de/datenschutz.html + 2026-10-03 + 0.2 + + diff --git a/tools/og-template.html b/tools/og-template.html new file mode 100644 index 0000000..f2042f2 --- /dev/null +++ b/tools/og-template.html @@ -0,0 +1,46 @@ + + + + + +OG-Vorlage + + + + +
    + + +

    + Wärme + Wasser + Luft +

    +

    Heizung · Sanitär · Lüftung · Regenerativ – Ergolding bei Landshut, seit 1985

    +

    olzinger.de

    +
    + + + +