WEBklar/Olzinger
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: WEBklar/Olzinger:6244d7cde2715b5cf061ec9289697e6d17b2b810
WEBklar/Olzinger:main
..
compare: WEBklar/Olzinger:main
WEBklar/Olzinger:main
5 Commits
6244d7cde2 .. main
Author SHA1 Message Date
NotPika69andClaude Opus 5.5 4bf4570dd2 Original-Logo von olzinger.de in der Navigation 
- Platzhalter-Logo (Thermostat-Bogen) durch das echte Firmenlogo ersetzt,
  auf weißem Schild, auf allen Seiten inkl. 404
- Navigationsleiste am Desktop etwas höher für bessere Lesbarkeit
- Schema.org-Logo, OG-Vorlage und README angepasst

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-04 21:26:44 +02:00
NotPika69andClaude Opus 5.5 ad155124b1 Startseite entschlackt: weniger Text, ruhiger, besser am Handy 
- Cursor-Effekt im Hero entfernt (Messfadenkreuz, Temperatur-Skala,
  Maus-Wärmespur); Wärmebild läuft nur noch ruhig im Hintergrund
- Preloader, Laufbänder, Intro, Ablauf-Block, Kennzahlen, Footer-CTA,
  kursive Akzentwörter, Verlaufstext und Nummern-Pillen entfernt
- Texte in allen Abschnitten deutlich gekürzt, schlichte Überschriften
- Leistungen: auf Handy/Tablet wischbare Kärtchen mit Zähler und Pfeilen
- Neue, zusammenhängende Illustrationen für die fünf Leistungs-Kärtchen
- Heizungs-Finder ohne Prozent-Balken, kürzere Ergebnistexte
- Energie-Haus: Tabs als Wischleiste am Handy, kein Autoplay
- GSAP, ScrollTrigger, SplitText, Lenis und Instrument Serif entfernt
- Barrierefreiheit: Kontrast, Fokusring, Fokus im Kartenstapel,
  Telefon-Button mit Namen, Menü sperrt Hintergrund
- Cache-Busting (?v=20261004) für CSS und JS, README aktualisiert

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-04 20:14:53 +02:00
NotPika69andClaude Opus 5.5 717a7de501 Merge Website aus GitHub (NotPika69/Olzinger) mit Webklar-Stand 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-04 12:09:15 +02:00
Claude 88b02720d8 Animationen außerhalb des Sichtbereichs pausieren, replaceState absichern 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Kjd7UMh3HKyVziCgiZ9A2i
 2026-10-03 17:02:16 +00:00
Claude 82dc9599cc 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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Kjd7UMh3HKyVziCgiZ9A2i
 2026-10-03 16:49:05 +00:00
26 changed files with 4392 additions and 0 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+4
View File
@@ -0,0 +1,4 @@
.DS_Store
Thumbs.db
node_modules/
*.log
.htaccess
+33
View File
@@ -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
<IfModule mod_mime.c>
AddType font/woff2 .woff2
AddType image/svg+xml .svg
AddType application/manifest+json .webmanifest
</IfModule>
<IfModule mod_headers.c>
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=()"
</IfModule>
<IfModule mod_expires.c>
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"
</IfModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript text/javascript image/svg+xml application/json
</IfModule>
404.html
+89
View File
@@ -0,0 +1,89 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Seite nicht gefunden – Olzinger Haustechnik</title>
<meta name="robots" content="noindex">
<meta name="theme-color" content="#0B151E">
<!-- Absolute Pfade, damit die Seite auch bei verschachtelten URLs korrekt lädt -->
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/main.css?v=20261004">
<style>
.e404 { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
.e404::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 80% 30%, rgba(255,106,43,.35), rgba(138,35,80,.16) 50%, transparent 75%), radial-gradient(40% 55% at 10% 90%, rgba(46,155,239,.22), transparent 70%); }
.e404__top { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); }
.e404__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: 24px var(--gutter) 48px; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; width: 100%; }
.e404__code { font-size: 14px; color: var(--text-dark-2); margin: 0 0 20px; }
.e404 .h1 { margin-bottom: 24px; }
.e404 .lead { color: var(--text-dark-2); margin-bottom: 32px; }
.e404__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.e404__art { width: 100%; max-width: 560px; justify-self: center; }
.e404__foot { padding: 20px var(--gutter); font-size: 14px; color: var(--text-dark-2); border-top: 1px solid var(--line-dark); }
.drip { animation: drip 1.8s cubic-bezier(.55, 0, .9, .45) infinite; }
.drip-2 { animation-delay: .9s; }
.splash { transform-box: fill-box; transform-origin: center; animation: splash 1.8s ease-out infinite; animation-delay: 1.05s; }
.splash-2 { animation-delay: 1.95s; }
@keyframes drip { 0% { transform: translateY(0) scale(.4); opacity: 0; } 12% { transform: translateY(0) scale(1); opacity: 1; } 62% { transform: translateY(104px); opacity: 1; } 64%, 100% { transform: translateY(104px); opacity: 0; } }
@keyframes splash { 0% { transform: scale(.3); opacity: 0; } 8% { opacity: 1; } 60%, 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 860px) { .e404__main { grid-template-columns: minmax(0, 1fr); } .e404__art { order: -1; max-width: 420px; } }
</style>
</head>
<body>
<div class="e404">
<header class="e404__top">
<a class="logo" href="/" aria-label="Olzinger Haustechnik – zur Startseite">
<img class="logo__img" src="/assets/img/olzinger-logo.png?v=20261004" alt="" width="260" height="125">
</a>
<a class="btn btn--sm btn--warm" href="tel:+4987172617"><span class="btn__label">0871&nbsp;72617</span></a>
</header>
<main class="e404__main" id="main">
<div>
<p class="e404__code">Fehler 404</p>
<h1 class="h1">Kein Anschluss unter dieser Adresse.</h1>
<p class="lead">Diese Seite gibt es nicht – oder nicht mehr. Kein Grund zur Sorge: Wir bringen Sie zurück auf den richtigen Weg.</p>
<div class="e404__ctas">
<a class="btn btn--light" href="/">
<span class="btn__label">Zur Startseite</span>
<span class="btn__icon" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
</a>
<a class="btn btn--ghost btn--ghost-light" href="/#kontakt"><span class="btn__label">Kontakt aufnehmen</span></a>
</div>
</div>
<svg class="e404__art" viewBox="0 0 520 300" aria-hidden="true">
<defs>
<linearGradient id="g-pipe" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2E9BEF"/><stop offset=".6" stop-color="#C2456B"/><stop offset="1" stop-color="#FF6A2B"/>
</linearGradient>
<linearGradient id="g-pipe2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#FF6A2B"/><stop offset="1" stop-color="#FFB547"/>
</linearGradient>
<linearGradient id="g-shine" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".5" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M0 40V260" stroke="rgba(255,255,255,.14)" stroke-width="2" stroke-dasharray="4 8"/>
<rect x="14" y="70" width="20" height="76" rx="5" fill="#1B2C3B" stroke="rgba(255,255,255,.25)"/>
<path d="M34 86H312l-10 9 12 7-11 8 11 8-12 8 10 8H34Z" fill="url(#g-pipe)"/>
<path d="M34 86H312l-10 9H34Z" fill="url(#g-shine)"/>
<rect x="150" y="76" width="26" height="66" rx="7" fill="#0F1D29" stroke="rgba(255,255,255,.3)"/>
<rect x="236" y="76" width="26" height="66" rx="7" fill="#0F1D29" stroke="rgba(255,255,255,.3)"/>
<g transform="translate(398 112) rotate(14)">
<path d="M-8 -26h86v52H-8l10-8-12-8 11-8-11-8 12-7z" fill="url(#g-pipe2)" opacity=".9"/>
</g>
<g>
<path class="drip" d="M305 140c0 0 9 11 9 17a9 9 0 0 1-18 0c0-6 9-17 9-17z" fill="#8ED9FA"/>
<path class="drip drip-2" d="M305 140c0 0 9 11 9 17a9 9 0 0 1-18 0c0-6 9-17 9-17z" fill="#8ED9FA"/>
</g>
<ellipse cx="305" cy="270" rx="78" ry="10" fill="rgba(46,155,239,.22)"/>
<ellipse class="splash" cx="305" cy="270" rx="16" ry="4" fill="none" stroke="#8ED9FA" stroke-width="1.6"/>
<ellipse class="splash splash-2" cx="305" cy="270" rx="16" ry="4" fill="none" stroke="#8ED9FA" stroke-width="1.6"/>
</svg>
</main>
<footer class="e404__foot">© Olzinger GmbH · Ahornstraße 112 · 84030 Ergolding · <a href="/impressum.html">Impressum</a> · <a href="/datenschutz.html">Datenschutz</a></footer>
</div>
</body>
</html>
README.md
+91
View File
@@ -0,0 +1,91 @@
# 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 ohne Bibliotheken, Schrift lokal eingebunden (kein CDN, keine Cookies, kein Tracking).
## Gestaltungsidee: „Wärmebild“
Haustechnik sieht man nicht – man spürt sie. Deshalb zeigt der Einstieg ein ruhiges, live berechnetes **Wärmebild** (WebGL) mit Isothermen wie bei einer Thermografie-Kamera. Eine langsam wandernde Wärmequelle hält das Bild in Bewegung – ohne Maus- oder Touch-Effekte. Durch die Seite zieht sich das Motiv **warm trifft kalt** (Vorlauf/Rücklauf): Farbverlauf Blau → Magenta → Orange. Oben links steht das Original-Logo der Firma (von der bisherigen olzinger.de) auf einem weißen Schild.
Grundsatz: wenig Text, wenig Bewegung, gut bedienbar am Handy.
## Bereiche der Startseite
| Bereich | Besonderheit |
|---|---|
| Hero | Ruhiges WebGL-Wärmebild, Live-Öffnungsstatus (inkl. bayerischer Feiertage), Anfrage- und Telefon-Button |
| Leistungen | 5 Karten mit Illustrationen; am Desktop als Kartenstapel, unter 900 px wischbare Karten mit Zähler (1 / 5) und Pfeilen |
| Energie-Haus | Hausschnitt: Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung – der gewählte Kreislauf wird hervorgehoben |
| Heizungs-Finder | 4 Fragen → Empfehlung (Wärmepumpe / Pellets / Hybrid); Ergebnis lässt sich ins Kontaktformular übernehmen |
| Über uns | Kurze Chronik 1985 → heute |
| Karriere | Ausbildung Anlagenmechaniker SHK, Initiativbewerbung |
| Kontakt | Kontaktkarten, Öffnungszeiten mit „Heute“-Markierung, Formular |
| Footer | Adresse, Kontakt, Öffnungszeiten, Links |
Außerdem: `impressum.html`, `datenschutz.html`, `404.html` („Kein Anschluss unter dieser Adresse“), 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.
- CSS und JS werden eine Woche gecacht. Nach Änderungen an `main.css` oder den Skripten die Versionsnummer `?v=…` in allen HTML-Dateien hochzählen, damit Besucher nicht alte Dateien sehen.
## 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 Navigation, mobiles Menü, Einblendungen, Leistungs-Karussell/Kartenstapel
assets/js/house.js Energie-Haus (Tabs, Hotspots)
assets/js/finder.js Heizungs-Finder (Bewertungslogik + Ergebnis)
assets/js/contact.js Öffnungszeiten live, Feiertage, Kontaktformular
assets/fonts/ Instrument Sans (OFL, lokal)
assets/img/ Favicon, Original-Logo (olzinger-logo.png), 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: Tastaturbedienung für Menü, Tabs, Karussell und Finder; `prefers-reduced-motion` wird respektiert (keine Einblendungen, Wärmebild als Standbild).
- Ohne JavaScript bleiben alle Texte sichtbar; Energie-Haus und Heizungs-Finder brauchen JavaScript für die Bedienung.
- Getestet in Chromium: Desktop (1024–1920 px), Tablet (768/834 px, hoch und quer) und Smartphone (360–414 px).
## Lizenzen
Instrument Sans (SIL OFL 1.1) – Lizenztext in `assets/fonts/OFL-InstrumentSans.txt`. Keine weiteren Bibliotheken.
assets/css/main.css
+1070
View File
File diff suppressed because it is too large. Load diff
assets/fonts/OFL-InstrumentSans.txt
+93
View File
@@ -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.
assets/fonts/instrument-sans-var.woff2
BIN
View File
Binary file not shown.
assets/img/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

assets/img/favicon-32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

assets/img/favicon.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2E9BEF"/>
<stop offset=".55" stop-color="#C2456B"/>
<stop offset="1" stop-color="#FF6A2B"/>
</linearGradient>
</defs>
<rect width="64" height="64" rx="16" fill="#0B151E"/>
<path d="M21.1 47.6A19 19 0 1 1 42.9 47.6" fill="none" stroke="url(#g)" stroke-width="7.5" stroke-linecap="round"/>
<circle cx="32" cy="32" r="4.6" fill="#F3EFE8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

assets/img/logo.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 56" role="img" aria-label="Olzinger Haustechnik">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2E9BEF"/>
<stop offset=".55" stop-color="#C2456B"/>
<stop offset="1" stop-color="#FF6A2B"/>
</linearGradient>
</defs>
<path d="M17.1 43.6A19 19 0 1 1 38.9 43.6" fill="none" stroke="url(#g)" stroke-width="7" stroke-linecap="round"/>
<circle cx="28" cy="28" r="4.4" fill="#0B151E"/>
<text x="62" y="31" font-family="Instrument Sans, Arial, sans-serif" font-weight="700" font-size="26" letter-spacing="1" fill="#0B151E">OLZINGER</text>
<text x="63" y="47" font-family="Instrument Sans, Arial, sans-serif" font-weight="500" font-size="10.5" letter-spacing="3.2" fill="#4D5963">HAUSTECHNIK</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 833 B

assets/img/og-image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

assets/img/olzinger-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

assets/js/contact.js
+233
View File
@@ -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: 'Geöffnet bis ' + fmt(slots[i][1]) + '\u00a0Uhr', wd: n.wd };
}
}
if (slots.length > 1 && n.mins >= slots[0][1] && n.mins < slots[1][0]) {
return { state: 'break', text: 'Mittagspause bis ' + fmt(slots[1][0]) + '\u00a0Uhr', wd: n.wd };
}
if (slots.length && n.mins < slots[0][0]) {
return { state: 'closed', text: 'Öffnet heute um ' + fmt(slots[0][0]) + '\u00a0Uhr', 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 ? DAYS[wd] : 'am ' + dt.getUTCDate() + '.' + (dt.getUTCMonth() + 1) + '.');
return { state: 'closed', text: (hol ? 'Feiertag · öffnet ' : 'Öffnet ') + when + ' um ' + fmt(s[0][0]) + '\u00a0Uhr', 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.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');
// Fehlertext nur verknüpfen, solange er sichtbar ist
if (ok) el.removeAttribute('aria-describedby'); else el.setAttribute('aria-describedby', 'e-' + k);
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;
if (fields.message.closest('.field').classList.contains('is-invalid')) validateField('message');
}
});
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', '<strong>Vielen Dank!</strong> 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', '<strong>Fast geschafft:</strong> Ihr E-Mail-Programm öffnet sich mit Ihrer vorbereiteten Anfrage – bitte dort nur noch auf „Senden“ klicken. Alternativ erreichen Sie uns unter <a href="tel:+4987172617">0871&nbsp;72617</a>.');
}
};
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);
assets/js/finder.js
+203
View File
@@ -0,0 +1,203 @@
/* ==========================================================================
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 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: 'Heizung & Wärmepumpe' },
pellet: { name: 'Pelletheizung', title: 'Pelletheizung', topic: 'Heizung & Wärmepumpe' },
hybrid: { name: 'Hybridheizung', title: 'Hybridheizung', topic: 'Heizung & Wärmepumpe' }
};
var TEXTS = {
wp: {
neubau: 'Im Neubau die naheliegende Wahl: Die Wärmepumpe heizt mit Umweltwärme und arbeitet bei niedrigen Vorlauftemperaturen besonders effizient.',
gedaemmt: 'Dank guter Dämmung reichen niedrige Vorlauftemperaturen – ideal für eine Wärmepumpe. 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 CO<sub>2</sub>-neutral und schaffen die hohen Vorlauftemperaturen, die ältere Heizkörper brauchen. Den Lagerraum haben Sie bereits.',
hybrid: 'Die Wärmepumpe übernimmt den Großteil des Jahres, ein Brennwertkessel springt nur an sehr kalten Tagen ein. Oft reicht auch eine Hochtemperatur-Wärmepumpe.'
};
/* 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']);
if (top === 'wp' && a.verteilung !== 'fbh') list.push(['i-gauge', '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 '<svg class="icon" aria-hidden="true"><use href="#' + id + '"/></svg>';
}
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);
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 (focus) {
var f = to >= total ? result : target.querySelector('input:checked') || target.querySelector('input');
if (f) f.focus({ preventScroll: true });
}
};
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;
// Keine Prozentwerte – nur sinnvolle Alternativen nennen
var alt = r.order.slice(1).filter(function (k) { return r.pct[k] >= 50; })
.map(function (k) { return SYSTEMS[k].name; });
result.querySelector('[data-result-bars]').innerHTML = alt.length ? '<li>Ebenfalls denkbar: ' + alt.join(' oder ') + '</li>' : '';
result.querySelector('[data-result-addons]').innerHTML = addons(answers, r.top).map(function (a) {
return '<li>' + icon(a[0]) + a[1] + '</li>';
}).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 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, true); }, 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);
assets/js/house.js
+83
View File
@@ -0,0 +1,83 @@
/* ==========================================================================
Olzinger – Energie-Haus
Tabs + Hotspots steuern, welches System im Hausschnitt hervorgehoben wird.
========================================================================== */
(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 order = tabs.map(function (t) { return t.getAttribute('data-part'); });
var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches;
var current = null;
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();
// Auf dem Handy liegen die Tabs in einer Wischleiste: aktiven Tab sichtbar halten
if (on && t.parentNode.scrollWidth > t.parentNode.clientWidth) {
var bar = t.parentNode;
bar.scrollTo({ left: t.offsetLeft - (bar.clientWidth - t.offsetWidth) / 2, behavior: reduce ? 'auto' : 'smooth' });
}
});
parts.forEach(function (p) {
var on = p.getAttribute('data-part') === id;
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); });
}
tabs.forEach(function (t) {
t.addEventListener('click', function () { activate(t.getAttribute('data-part'), false); });
});
hotspots.forEach(function (h) {
h.addEventListener('click', function () { 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();
activate(order[to], true);
});
}
// SVG-Animationen (Strömungen, Lüfter) nur laufen lassen, solange das Haus sichtbar ist
if ('IntersectionObserver' in w) {
new IntersectionObserver(function (entries) {
root.classList.toggle('is-inview', entries[0].isIntersecting);
}, { threshold: 0 }).observe(root);
} else {
root.classList.add('is-inview');
}
activate(order[0], false);
})(window, document);
assets/js/main.js
+202
View File
@@ -0,0 +1,202 @@
/* ==========================================================================
Olzinger – Hauptskript
Navigation, mobiles Menü, dezente Einblendungen, Leistungs-Karussell (mobil)
und Kartenstapel (Desktop). Bewusst ohne Bibliotheken.
========================================================================== */
(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 hasIO = 'IntersectionObserver' in w;
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; });
/* ---------- Wärmebild (ruhiger Hintergrund im Hero) ---------- */
var canvas = $('[data-thermal]');
if (canvas && w.OlzThermal) {
var thermal = w.OlzThermal.init(canvas, {
hero: $('[data-hero]'),
calm: $('.hero__aside'),
reduceMotion: reduce
});
if (thermal) thermal.heatUp();
} else if (canvas) {
html.classList.add('no-webgl');
}
/* ---------- Mobiles Menü ---------- */
var menu = $('[data-menu]');
var toggle = $('[data-menu-toggle]');
var menuOpen = false;
if (menu) { menu.hidden = false; menu.setAttribute('inert', ''); menu.setAttribute('aria-hidden', 'true'); }
function setMenu(open) {
if (!menu || !toggle || open === menuOpen) return;
menuOpen = open;
menu.classList.toggle('is-open', open);
if (open) menu.removeAttribute('inert'); else menu.setAttribute('inert', '');
menu.setAttribute('aria-hidden', open ? 'false' : 'true');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
toggle.querySelector('.sr-only').textContent = open ? 'Menü schließen' : 'Menü öffnen';
html.classList.toggle('menu-open', open);
// Inhalt hinter dem Menü für Tastatur und Screenreader sperren
[d.getElementById('main'), $('.footer')].forEach(function (el) { if (el) el.inert = open; });
}
if (toggle) toggle.addEventListener('click', function () { setMenu(!menuOpen); });
d.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && menuOpen) { setMenu(false); toggle.focus(); }
});
// Wird das Fenster breit genug für die Desktop-Navigation (z. B. Tablet drehen), Menü schließen
var deskMQ = w.matchMedia('(min-width: 1181px)');
var onDesk = function (e) { if (e.matches) setMenu(false); };
if (deskMQ.addEventListener) deskMQ.addEventListener('change', onDesk); else if (deskMQ.addListener) deskMQ.addListener(onDesk);
/* ---------- Anker-Links: Menü schließen, Thema ans Formular geben ---------- */
d.addEventListener('click', function (e) {
var a = e.target.closest('a[href*="#"]');
if (!a) return;
if (a.dataset.topic) w.dispatchEvent(new CustomEvent('olz:topic', { detail: a.dataset.topic }));
if (menuOpen) setMenu(false);
});
/* ---------- Navigation: Hintergrund ab Scroll, beim Runterscrollen ausblenden ---------- */
var nav = $('[data-nav]');
if (nav) {
var lastY = w.scrollY, ticking = false;
var onScroll = function () {
ticking = false;
var y = w.scrollY;
nav.classList.toggle('is-scrolled', y > 40);
if (!menuOpen) {
if (y > 420 && y > lastY + 4) nav.classList.add('is-hidden');
else if (y < lastY - 4 || y <= 420) nav.classList.remove('is-hidden');
}
lastY = y;
};
w.addEventListener('scroll', function () {
if (!ticking) { ticking = true; w.requestAnimationFrame(onScroll); }
}, { passive: true });
nav.addEventListener('focusin', function () { nav.classList.remove('is-hidden'); });
onScroll();
}
// Aktiven Menüpunkt markieren
var navLinks = $$('[data-nav-link]');
if (hasIO && navLinks.length) {
var linkFor = {};
navLinks.forEach(function (l) { linkFor[l.getAttribute('href').slice(1)] = l; });
var activeIO = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
var link = linkFor[en.target.id];
if (link) link.classList.toggle('is-active', en.isIntersecting);
});
}, { rootMargin: '-45% 0px -54% 0px' });
Object.keys(linkFor).forEach(function (id) {
var sec = d.getElementById(id);
if (sec) activeIO.observe(sec);
});
}
/* ---------- Dezente Einblendungen ---------- */
var reveals = $$('[data-reveal]');
if (hasIO && !reduce) {
var revealIO = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (!en.isIntersecting) return;
en.target.classList.add('is-in');
revealIO.unobserve(en.target);
});
}, { rootMargin: '0px 0px -8% 0px' });
reveals.forEach(function (el) { revealIO.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add('is-in'); });
}
/* ---------- Leistungen: Karussell (mobil) bzw. Kartenstapel (Desktop) ---------- */
var stack = $('[data-stack]');
var cards = $$('.svc');
var stackNav = $('[data-stack-nav]');
var stackMQ = w.matchMedia('(min-width: 900px) and (min-height: 660px)');
if (stack && stackNav) {
var prevBtn = $('[data-stack-prev]', stackNav);
var nextBtn = $('[data-stack-next]', stackNav);
var currentEl = $('[data-stack-current]', stackNav);
var current = 0;
var isCarousel = function () { return stack.scrollWidth > stack.clientWidth + 2; };
var cardLeft = function (c) { return c.offsetLeft - cards[0].offsetLeft; };
var cardIndex = function () {
var x = stack.scrollLeft, best = 0, bestDist = Infinity;
if (x >= stack.scrollWidth - stack.clientWidth - 2) return cards.length - 1;
cards.forEach(function (c, i) {
var dist = Math.abs(cardLeft(c) - x);
if (dist < bestDist) { bestDist = dist; best = i; }
});
return best;
};
var updateNav = function () {
stackNav.hidden = !isCarousel();
current = cardIndex();
currentEl.textContent = current + 1;
prevBtn.disabled = current === 0;
nextBtn.disabled = current === cards.length - 1;
};
// Schritt relativ zur echten Scrollposition (bei zwei Karten nebeneinander
// liegen die letzten Karten jenseits der maximalen Scrollweite)
var step = function (dir) {
var x = stack.scrollLeft, i;
if (dir > 0) { for (i = 0; i < cards.length - 1; i++) if (cardLeft(cards[i]) > x + 2) break; }
else { for (i = cards.length - 1; i > 0; i--) if (cardLeft(cards[i]) < x - 2) break; }
stack.scrollTo({ left: Math.min(cardLeft(cards[i]), stack.scrollWidth - stack.clientWidth), behavior: reduce ? 'auto' : 'smooth' });
};
var navTick = false;
stack.addEventListener('scroll', function () {
if (!navTick) { navTick = true; w.requestAnimationFrame(function () { navTick = false; updateNav(); }); }
}, { passive: true });
prevBtn.addEventListener('click', function () { step(-1); });
nextBtn.addEventListener('click', function () { step(1); });
w.addEventListener('resize', updateNav);
updateNav();
}
// Desktop: hintere Karten treten beim Überdecken leicht zurück
if (stack && !reduce) {
var inners = cards.map(function (c) { return $('.svc__inner', c); });
var stackTick = false;
var paintStack = function () {
stackTick = false;
if (!stackMQ.matches) {
inners.forEach(function (el) { el.style.transform = ''; el.style.removeProperty('--shade'); });
return;
}
var vh = w.innerHeight;
cards.forEach(function (card, i) {
var next = cards[i + 1];
if (!next) return;
var stickyTop = parseFloat(getComputedStyle(next).top) || 100;
var start = vh * 0.85;
var p = (start - next.getBoundingClientRect().top) / (start - stickyTop);
p = Math.max(0, Math.min(1, p));
inners[i].style.transform = p ? 'scale(' + (1 - p * (0.1 - i * 0.012)) + ')' : '';
inners[i].style.setProperty('--shade', (p * 0.5).toFixed(3));
});
};
var requestPaint = function () {
if (!stackTick) { stackTick = true; w.requestAnimationFrame(paintStack); }
};
w.addEventListener('scroll', requestPaint, { passive: true });
w.addEventListener('resize', requestPaint);
paintStack();
}
})(window, document);
assets/js/thermal.js
+287
View File
@@ -0,0 +1,287 @@
/* ==========================================================================
Olzinger – „Wärmebild“ (WebGL)
Ein ruhiges thermografisches Feld mit Isothermen als Hero-Hintergrund.
Eine langsam wandernde Wärmequelle hält das Bild lebendig – ganz ohne
Maus- oder Touch-Interaktion. Hinter Fließtext wird die Wärme gedämpft.
========================================================================== */
(function (w) {
'use strict';
var MAX_HEAT = 14;
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');
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 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;
var intro = reduce ? 1 : 0, introTarget = reduce ? 1 : 0;
var frameTimes = [], tuned = false;
// Feldkoordinaten: x ∈ [0, Seitenverhältnis], y ∈ [0, 1] (y nach oben)
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();
if (reduce) start(); // Größenänderung leert die Leinwand – Standbild neu zeichnen
}
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 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;
// Langsam wandernde Wärmequelle oben rechts
var autoOn = !reduce;
auto.heat += ((autoOn ? 0.8 : 0) - auto.heat) * (1 - Math.exp(-dt * 1.2));
// Hochkant (Handy): Wärme am rechten Rand halten, damit die Überschrift lesbar bleibt
var portrait = asp < 1;
var ax = portrait ? asp * (1.0 + 0.04 * Math.sin(time * 0.21)) + 0.03 * Math.sin(time * 0.53)
: asp * (0.7 + 0.16 * Math.sin(time * 0.21)) + 0.05 * Math.sin(time * 0.53);
var ay = portrait ? 0.62 + 0.12 * Math.sin(time * 0.29 + 1.3) : 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] = 0; heatData[1] = 0; heatData[2] = 0; heatData[3] = 0.1;
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);
// Reduzierte Bewegung: Standbild – einmal zeichnen, dann ruhen
if (reduce) { running = false; return; }
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);
datenschutz.html
+202
View File
@@ -0,0 +1,202 @@
<!doctype html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Datenschutz – Olzinger Haustechnik</title>
<meta name="description" content="Datenschutzerklärung der Olzinger GmbH – Haustechnik in Ergolding bei Landshut.">
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://www.olzinger.de/datenschutz.html">
<meta name="theme-color" content="#0B151E">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="preload" href="assets/fonts/instrument-sans-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/main.css?v=20261004">
<script>
(function (d, w) {
var h = d.documentElement;
h.className = h.className.replace('no-js', 'js');
w.setTimeout(function () { if (!w.__olzReady) { h.classList.remove('js'); h.classList.add('no-js'); } }, 4500);
})(document, window);
</script>
<script src="assets/js/contact.js?v=20261004" defer></script>
<script src="assets/js/main.js?v=20261004" defer></script>
</head>
<body class="page">
<!--
HINWEIS: Diese Datenschutzerklärung ist auf die technische Umsetzung dieser Website
zugeschnitten (keine Cookies, kein Tracking, lokal eingebundene Schriften und Skripte).
Sie ersetzt keine Rechtsberatung – bitte vor dem Livegang prüfen lassen und den
Hosting-Anbieter (TODO) ergänzen.
-->
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<svg class="sprite" aria-hidden="true" focusable="false">
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.6 4.4-2.1 1.3a11.5 11.5 0 0 0 5.8 5.8l1.3-2.1 4.4 1.6v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z"/></symbol>
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 20V5M6 11l6-6 6 6"/></symbol>
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M20 12H5M11 6l-6 6 6 6"/></symbol>
</svg>
<header class="nav" data-nav>
<div class="nav__bar">
<a class="logo" href="index.html" aria-label="Olzinger Haustechnik – zur Startseite">
<img class="logo__img" src="assets/img/olzinger-logo.png?v=20261004" alt="" width="260" height="125">
</a>
<nav class="nav__links" aria-label="Hauptnavigation">
<a href="index.html#leistungen">Leistungen</a>
<a href="index.html#energie-haus">Energie-Haus</a>
<a href="index.html#heizungs-finder">Heizungs-Finder</a>
<a href="index.html#ueber-uns">Über uns</a>
<a href="index.html#karriere">Karriere</a>
</nav>
<div class="nav__actions">
<a class="nav__phone" href="tel:+4987172617" aria-label="Anrufen: 0871 72617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg><span>0871&nbsp;72617</span></a>
<a class="btn btn--sm btn--warm" href="index.html#kontakt"><span class="btn__label">Anfrage stellen</span></a>
<button class="nav__toggle" type="button" aria-expanded="false" aria-controls="menu" data-menu-toggle>
<span class="nav__toggle-lines" aria-hidden="true"><i></i><i></i></span>
<span class="sr-only">Menü öffnen</span>
</button>
</div>
</div>
</header>
<div class="menu" id="menu" data-menu hidden>
<nav class="menu__links" aria-label="Mobile Navigation">
<a href="index.html#leistungen">Leistungen</a>
<a href="index.html#energie-haus">Energie-Haus</a>
<a href="index.html#heizungs-finder">Heizungs-Finder</a>
<a href="index.html#ueber-uns">Über uns</a>
<a href="index.html#karriere">Karriere</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<div class="menu__foot">
<a href="tel:+4987172617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg>0871&nbsp;72617</a>
<a href="mailto:kontakt@olzinger.de"><svg class="icon" aria-hidden="true"><use href="#i-mail"/></svg>kontakt@olzinger.de</a>
<p class="status status--dark" data-status><span class="status__dot" aria-hidden="true"></span><span class="status__text">Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr</span></p>
</div>
</div>
<main id="main">
<section class="page-hero" aria-labelledby="page-title">
<div class="container">
<p class="label"><a href="index.html">Startseite</a> / Rechtliches</p>
<h1 class="h1" id="page-title">Datenschutz&shy;erklärung</h1>
</div>
</section>
<section class="legal sheet">
<div class="container legal__grid">
<nav class="legal__toc" aria-label="Inhalt">
<a href="#verantwortlicher">Verantwortlicher</a>
<a href="#ueberblick">Auf einen Blick</a>
<a href="#hosting">Hosting &amp; Server-Logfiles</a>
<a href="#cookies">Cookies &amp; Tracking</a>
<a href="#kontakt">Kontaktaufnahme</a>
<a href="#finder">Heizungs-Finder</a>
<a href="#bewerbung">Bewerbungen</a>
<a href="#links">Externe Links</a>
<a href="#rechte">Ihre Rechte</a>
</nav>
<div class="legal__body" data-reveal>
<h2 id="verantwortlicher">1. Verantwortlicher</h2>
<p>Verantwortlich für die Datenverarbeitung auf dieser Website im Sinne der Datenschutz-Grundverordnung (DSGVO) ist:</p>
<div class="legal__card">
<p><strong>Olzinger GmbH</strong></p>
<p>Ahornstraße 112, 84030 Ergolding</p>
<p>Vertreten durch die Geschäftsführer Franz Ramsauer und Robert Straub</p>
<p>Telefon: <a href="tel:+4987172617">0871&nbsp;72617</a> · E-Mail: <a href="mailto:kontakt@olzinger.de">kontakt@olzinger.de</a></p>
</div>
<h2 id="ueberblick">2. Datenschutz auf einen Blick</h2>
<p>Wir haben diese Website bewusst datensparsam gebaut:</p>
<ul>
<li>Wir setzen <strong>keine Cookies</strong> und verwenden <strong>keine Analyse- oder Tracking-Werkzeuge</strong>.</li>
<li>Schriften, Skripte und Grafiken werden <strong>lokal von unserem Server</strong> geladen – es werden beim Seitenaufruf keine Daten an Drittanbieter (z.&nbsp;B. Google Fonts oder Content-Delivery-Netzwerke) übertragen.</li>
<li>Personenbezogene Daten verarbeiten wir nur, wenn Sie uns aktiv kontaktieren.</li>
</ul>
<h2 id="hosting">3. Hosting und Server-Logfiles</h2>
<p>Diese Website wird bei einem externen Dienstleister gehostet <!-- TODO: Name und Anschrift des Hosting-Anbieters ergänzen -->. Beim Aufruf der Website werden durch den Webserver automatisch Informationen erfasst, die Ihr Browser übermittelt (sogenannte Server-Logfiles):</p>
<ul>
<li>IP-Adresse des anfragenden Geräts</li>
<li>Datum und Uhrzeit des Zugriffs</li>
<li>aufgerufene Seite bzw. Datei und übertragene Datenmenge</li>
<li>Referrer-URL (zuvor besuchte Seite)</li>
<li>verwendeter Browser und Betriebssystem</li>
</ul>
<p>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. <!-- TODO: konkrete Speicherdauer des Hosters ergänzen und Vertrag zur Auftragsverarbeitung (Art. 28 DSGVO) mit dem Hoster bestätigen. --></p>
<h2 id="cookies">4. Cookies, Tracking und lokale Speicherung</h2>
<p>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.</p>
<h2 id="kontakt">5. Kontaktaufnahme per Telefon, E-Mail und Kontaktformular</h2>
<p>Wenn Sie uns kontaktieren, verarbeiten wir die von Ihnen gemachten Angaben (z.&nbsp;B. Name, E-Mail-Adresse, Telefonnummer, Ort sowie den Inhalt Ihrer Nachricht), um Ihre Anfrage zu bearbeiten und Ihnen zu antworten.</p>
<p>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.</p>
<p>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.&nbsp;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.</p>
<h2 id="finder">6. Heizungs-Finder</h2>
<p>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).</p>
<h2 id="bewerbung">7. Bewerbungen</h2>
<p>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.</p>
<h2 id="links">8. Externe Links</h2>
<p>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.</p>
<h2 id="rechte">9. Ihre Rechte</h2>
<p>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.</p>
<p>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.</p>
<h2>10. Verschlüsselung</h2>
<p>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.</p>
<p><small>Stand: Oktober 2026</small></p>
<p><a class="link-arrow" href="index.html"><svg class="icon" aria-hidden="true"><use href="#i-arrow-left"/></svg> Zurück zur Startseite</a></p>
</div>
</div>
</section>
</main>
<footer class="footer sheet sheet--dark">
<div class="container">
<div class="footer__grid">
<div class="footer__col">
<h2 class="footer__h">Olzinger GmbH</h2>
<address>Ahornstraße 112<br>84030 Ergolding</address>
</div>
<div class="footer__col">
<h2 class="footer__h">Kontakt</h2>
<p><a href="tel:+4987172617">Tel.&nbsp;0871&nbsp;72617</a><br>Fax&nbsp;0871&nbsp;74963<br><a href="mailto:kontakt@olzinger.de">kontakt@olzinger.de</a></p>
</div>
<div class="footer__col">
<h2 class="footer__h">Öffnungszeiten</h2>
<p>Mo–Do 7:00–12:00<br>und 13:00–16:30<br>Fr 7:00–11:30</p>
</div>
<nav class="footer__col" aria-label="Footer-Navigation">
<h2 class="footer__h">Seite</h2>
<ul>
<li><a href="index.html#leistungen">Leistungen</a></li>
<li><a href="index.html#energie-haus">Energie-Haus</a></li>
<li><a href="index.html#heizungs-finder">Heizungs-Finder</a></li>
<li><a href="index.html#ueber-uns">Über uns</a></li>
<li><a href="index.html#kontakt">Kontakt</a></li>
</ul>
</nav>
</div>
<div class="footer__bottom">
<p>© <span data-current-year>2026</span> Olzinger GmbH</p>
<ul>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="datenschutz.html" aria-current="page">Datenschutz</a></li>
<li><a class="footer__top" href="#main">Nach oben <svg class="icon" aria-hidden="true"><use href="#i-arrow-up"/></svg></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
impressum.html
+189
View File
@@ -0,0 +1,189 @@
<!doctype html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Impressum – Olzinger Haustechnik</title>
<meta name="description" content="Impressum der Olzinger GmbH – Haustechnik in Ergolding bei Landshut.">
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://www.olzinger.de/impressum.html">
<meta name="theme-color" content="#0B151E">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="preload" href="assets/fonts/instrument-sans-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/main.css?v=20261004">
<script>
(function (d, w) {
var h = d.documentElement;
h.className = h.className.replace('no-js', 'js');
w.setTimeout(function () { if (!w.__olzReady) { h.classList.remove('js'); h.classList.add('no-js'); } }, 4500);
})(document, window);
</script>
<script src="assets/js/contact.js?v=20261004" defer></script>
<script src="assets/js/main.js?v=20261004" defer></script>
</head>
<body class="page">
<!--
HINWEIS: Bitte vor dem Livegang prüfen und ergänzen.
Die Angaben wurden aus öffentlich zugänglichen Quellen (u. a. dem bisherigen Impressum
auf olzinger.de) übernommen. Mit „TODO“ markierte Punkte bitte aus dem bestehenden
Impressum übernehmen bzw. bestätigen.
-->
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<svg class="sprite" aria-hidden="true" focusable="false">
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.6 4.4-2.1 1.3a11.5 11.5 0 0 0 5.8 5.8l1.3-2.1 4.4 1.6v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z"/></symbol>
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 20V5M6 11l6-6 6 6"/></symbol>
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M20 12H5M11 6l-6 6 6 6"/></symbol>
</svg>
<header class="nav" data-nav>
<div class="nav__bar">
<a class="logo" href="index.html" aria-label="Olzinger Haustechnik – zur Startseite">
<img class="logo__img" src="assets/img/olzinger-logo.png?v=20261004" alt="" width="260" height="125">
</a>
<nav class="nav__links" aria-label="Hauptnavigation">
<a href="index.html#leistungen">Leistungen</a>
<a href="index.html#energie-haus">Energie-Haus</a>
<a href="index.html#heizungs-finder">Heizungs-Finder</a>
<a href="index.html#ueber-uns">Über uns</a>
<a href="index.html#karriere">Karriere</a>
</nav>
<div class="nav__actions">
<a class="nav__phone" href="tel:+4987172617" aria-label="Anrufen: 0871 72617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg><span>0871&nbsp;72617</span></a>
<a class="btn btn--sm btn--warm" href="index.html#kontakt"><span class="btn__label">Anfrage stellen</span></a>
<button class="nav__toggle" type="button" aria-expanded="false" aria-controls="menu" data-menu-toggle>
<span class="nav__toggle-lines" aria-hidden="true"><i></i><i></i></span>
<span class="sr-only">Menü öffnen</span>
</button>
</div>
</div>
</header>
<div class="menu" id="menu" data-menu hidden>
<nav class="menu__links" aria-label="Mobile Navigation">
<a href="index.html#leistungen">Leistungen</a>
<a href="index.html#energie-haus">Energie-Haus</a>
<a href="index.html#heizungs-finder">Heizungs-Finder</a>
<a href="index.html#ueber-uns">Über uns</a>
<a href="index.html#karriere">Karriere</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<div class="menu__foot">
<a href="tel:+4987172617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg>0871&nbsp;72617</a>
<a href="mailto:kontakt@olzinger.de"><svg class="icon" aria-hidden="true"><use href="#i-mail"/></svg>kontakt@olzinger.de</a>
<p class="status status--dark" data-status><span class="status__dot" aria-hidden="true"></span><span class="status__text">Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr</span></p>
</div>
</div>
<main id="main">
<section class="page-hero" aria-labelledby="page-title">
<div class="container">
<p class="label"><a href="index.html">Startseite</a> / Rechtliches</p>
<h1 class="h1" id="page-title">Impressum</h1>
</div>
</section>
<section class="legal sheet">
<div class="container legal__grid">
<nav class="legal__toc" aria-label="Inhalt">
<a href="#anbieter">Anbieter</a>
<a href="#kontakt">Kontakt</a>
<a href="#register">Registereintrag</a>
<a href="#streitbeilegung">Streitbeilegung</a>
<a href="#haftung">Haftung</a>
<a href="#urheberrecht">Urheberrecht</a>
</nav>
<div class="legal__body" data-reveal>
<h2 id="anbieter">Angaben gemäß § 5 DDG</h2>
<div class="legal__card">
<p><strong>Olzinger GmbH</strong></p>
<p>Ahornstraße 112<br>84030 Ergolding</p>
</div>
<h3>Vertreten durch die Geschäftsführer</h3>
<p>Franz Ramsauer<br>Robert Straub</p>
<h2 id="kontakt">Kontakt</h2>
<p>
Telefon: <a href="tel:+4987172617">0871&nbsp;72617</a><br>
Telefax: 0871&nbsp;74963<br>
E-Mail: <a href="mailto:kontakt@olzinger.de">kontakt@olzinger.de</a>
</p>
<h2 id="register">Registereintrag</h2>
<p>
Eintragung im Handelsregister<br>
Registergericht: Amtsgericht Landshut<br>
Registernummer: HRB 3667
</p>
<!-- TODO: Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG aus dem bisherigen Impressum ergänzen:
<h3>Umsatzsteuer-ID</h3>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27a Umsatzsteuergesetz: DE XXX XXX XXX</p>
-->
<!-- TODO: Berufsrechtliche Angaben bestätigen/ergänzen, z. B.:
<h3>Berufsbezeichnung und berufsrechtliche Regelungen</h3>
<p>Berufsbezeichnung: Installateur- und Heizungsbauer (verliehen in Deutschland)<br>
Zuständige Kammer: Handwerkskammer Niederbayern-Oberpfalz<br>
Es gilt die Handwerksordnung (HwO), einsehbar unter www.gesetze-im-internet.de</p>
-->
<h2 id="streitbeilegung">Verbraucherstreitbeilegung</h2>
<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
<h2 id="haftung">Haftung für Inhalte und Links</h2>
<p>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.</p>
<p>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.</p>
<h2 id="urheberrecht">Urheberrecht</h2>
<p>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.</p>
<p>Illustrationen und Grafiken: individuell für diese Website gestaltet. Schrift: Instrument Sans (SIL Open Font License), lokal eingebunden.</p>
<p><a class="link-arrow" href="index.html"><svg class="icon" aria-hidden="true"><use href="#i-arrow-left"/></svg> Zurück zur Startseite</a></p>
</div>
</div>
</section>
</main>
<footer class="footer sheet sheet--dark">
<div class="container">
<div class="footer__grid">
<div class="footer__col">
<h2 class="footer__h">Olzinger GmbH</h2>
<address>Ahornstraße 112<br>84030 Ergolding</address>
</div>
<div class="footer__col">
<h2 class="footer__h">Kontakt</h2>
<p><a href="tel:+4987172617">Tel.&nbsp;0871&nbsp;72617</a><br>Fax&nbsp;0871&nbsp;74963<br><a href="mailto:kontakt@olzinger.de">kontakt@olzinger.de</a></p>
</div>
<div class="footer__col">
<h2 class="footer__h">Öffnungszeiten</h2>
<p>Mo–Do 7:00–12:00<br>und 13:00–16:30<br>Fr 7:00–11:30</p>
</div>
<nav class="footer__col" aria-label="Footer-Navigation">
<h2 class="footer__h">Seite</h2>
<ul>
<li><a href="index.html#leistungen">Leistungen</a></li>
<li><a href="index.html#energie-haus">Energie-Haus</a></li>
<li><a href="index.html#heizungs-finder">Heizungs-Finder</a></li>
<li><a href="index.html#ueber-uns">Über uns</a></li>
<li><a href="index.html#kontakt">Kontakt</a></li>
</ul>
</nav>
</div>
<div class="footer__bottom">
<p>© <span data-current-year>2026</span> Olzinger GmbH</p>
<ul>
<li><a href="impressum.html" aria-current="page">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
<li><a class="footer__top" href="#main">Nach oben <svg class="icon" aria-hidden="true"><use href="#i-arrow-up"/></svg></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
index.html
+1395
View File
File diff suppressed because it is too large. Load diff
kontakt.php
+117
View File
@@ -0,0 +1,117 @@
<?php
/**
* Olzinger Haustechnik – Versand des Kontaktformulars
*
* Wird per fetch() aus assets/js/contact.js aufgerufen und antwortet mit JSON.
* Ist PHP auf dem Server nicht verfügbar, öffnet das Formular automatisch das
* E-Mail-Programm des Besuchers (Fallback in contact.js).
*
* Schutzmaßnahmen: Honeypot-Feld, Mindest-Ausfüllzeit, Längenbegrenzung,
* Validierung der E-Mail-Adresse (verhindert Header-Injection über Reply-To),
* kodierter Betreff und feste Empfängeradresse.
*/
declare(strict_types=1);
const RECIPIENT = 'kontakt@olzinger.de';
// Absender sollte eine Adresse der eigenen Domain sein (SPF/DKIM), sonst landen Mails im Spam.
const SENDER = 'kontakt@olzinger.de';
const MIN_SECONDS = 3;
date_default_timezone_set('Europe/Berlin');
header('Content-Type: application/json; charset=utf-8');
header('X-Content-Type-Options: nosniff');
header('Cache-Control: no-store');
function respond(int $status, array $payload): void
{
http_response_code($status);
echo json_encode($payload, JSON_UNESCAPED_UNICODE);
exit;
}
function field(string $key, int $max): string
{
$value = isset($_POST[$key]) && is_string($_POST[$key]) ? trim($_POST[$key]) : '';
$value = str_replace(["\r\n", "\r"], "\n", $value);
// Steuerzeichen außer Zeilenumbruch und Tab entfernen
$value = preg_replace('/[^\P{C}\n\t]/u', '', $value) ?? '';
return function_exists('mb_substr') ? mb_substr($value, 0, $max, 'UTF-8') : substr($value, 0, $max);
}
function single_line(string $value): string
{
return trim(preg_replace('/\s+/u', ' ', $value) ?? '');
}
if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
header('Allow: POST');
respond(405, ['ok' => 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]);
robots.txt
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://www.olzinger.de/sitemap.xml
site.webmanifest
+12
View File
@@ -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"
}
sitemap.xml
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.olzinger.de/</loc>
<lastmod>2026-10-03</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.olzinger.de/impressum.html</loc>
<lastmod>2026-10-03</lastmod>
<priority>0.2</priority>
</url>
<url>
<loc>https://www.olzinger.de/datenschutz.html</loc>
<lastmod>2026-10-03</lastmod>
<priority>0.2</priority>
</url>
</urlset>
tools/og-template.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>OG-Vorlage</title>
<link rel="stylesheet" href="../assets/css/main.css">
<style>
html, body { margin: 0; width: 1200px; height: 630px; overflow: hidden; background: #0B151E; }
.og { position: relative; width: 1200px; height: 630px; color: #F3EFE8; isolation: isolate; overflow: hidden; }
.og canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.og::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,11,18,.7), rgba(5,11,18,.2) 55%, rgba(5,11,18,0)); }
.og__logo { position: absolute; left: 64px; top: 56px; }
.og__title { position: absolute; left: 60px; bottom: 120px; margin: 0; font-size: 132px; line-height: .86; font-weight: 600; font-stretch: 78%; letter-spacing: -.052em; }
.og__title span { display: block; }
.og__title i { display: inline-block; width: .15em; height: .15em; margin-left: .045em; border-radius: 50%; }
.og__sub { position: absolute; left: 64px; bottom: 58px; margin: 0; font-size: 26px; font-weight: 500; color: rgba(243,239,232,.86); }
.og__url { position: absolute; right: 64px; bottom: 58px; margin: 0; font-family: var(--font-mono); font-size: 18px; color: rgba(243,239,232,.7); }
</style>
</head>
<body>
<div class="og" id="og">
<canvas data-thermal></canvas>
<a class="logo og__logo">
<img class="logo__img" src="../assets/img/olzinger-logo.png" alt="" width="260" height="125">
</a>
<h1 class="og__title">
<span>Wärme<i style="background:#FF6A2B;box-shadow:0 0 .28em rgba(255,106,43,.75)"></i></span>
<span>Wasser<i style="background:#2E9BEF;box-shadow:0 0 .28em rgba(46,155,239,.75)"></i></span>
<span>Luft<i style="background:#3CCFC0;box-shadow:0 0 .28em rgba(60,207,192,.7)"></i></span>
</h1>
<p class="og__sub">Heizung · Sanitär · Lüftung · Regenerativ – Ergolding bei Landshut, seit 1985</p>
<p class="og__url">olzinger.de</p>
</div>
<script src="../assets/js/thermal.js"></script>
<script>
var t = OlzThermal.init(document.querySelector('[data-thermal]'), { hero: document.getElementById('og'), reduceMotion: false });
if (t) t.heatUp();
</script>
</body>
</html>