Karte auch auf der Startseite

Anfahrt-Abschnitt als gemeinsamer Baustein (map_section) für Start,
Unternehmen und Kontakt; Datenschutzerklärung entsprechend ergänzt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-09-30 22:05:34 +02:00
1 parent 09f40da363
commit 07a3e60cbc
7 files changed
+71 -42

No files matched your search

+2 -2
View File
@@ -1,11 +1,11 @@
# Kirschner Gebäudeservice — Website
Neue Website für den Hausmeisterservice in Ergolding (bisher Jimdo:
`1407316705.jimdoweb.com`). Statisches HTML/CSS/JS, kein Cookie-Banner. Einzige Fremdanfrage: die Karte auf Unternehmen/Kontakt (OpenFreeMap), siehe Datenschutz.
`1407316705.jimdoweb.com`). Statisches HTML/CSS/JS, kein Cookie-Banner. Einzige Fremdanfrage: die Karte auf Start, Unternehmen und Kontakt (OpenFreeMap), siehe Datenschutz.
| Datei | Seite |
|---|---|
| `index.html` | Start (Intro, Hero, Leistungen gepinnt, Osmose-Slider, Motto über Foto, Karriere-Band) |
| `index.html` | Start (Intro, Hero, Leistungen gepinnt, Osmose-Slider, Motto über Foto, Anfahrt mit Karte, Karriere-Band) |
| `leistungen.html` | 7 Leistungen im Detail, Leistungsverzeichnisse |
| `unternehmen.html` | Timeline 2003–2020, Team, Anfahrt mit Karte |
| `karriere.html` | Drei Stellen mit Bewerbung per E-Mail |
+1
View File
@@ -500,6 +500,7 @@ html.has-intro .intro {
.member--more .member__initials { color: var(--ink); font-size: clamp(2.5rem, 5vw, 3.5rem); }
.map-card { display: grid; gap: var(--s4); align-items: stretch; }
.map-card > .stack { align-content: start; }
@media (min-width: 900px) { .map-card { grid-template-columns: 1fr 1.3fr; } }
.map {
position: relative; min-height: clamp(360px, 36vw, 620px); border-radius: var(--radius); overflow: hidden; background: var(--night-900);
+1 -1
View File
@@ -76,7 +76,7 @@
<p>Diese Website setzt keine Cookies und verwendet keine Analyse- oder Marketingwerkzeuge. Schriften und Skripte liegen auf unserem eigenen Server. Lediglich im Browser-Sitzungsspeicher (sessionStorage) wird vermerkt, dass die Eröffnungsanimation bereits gezeigt wurde — dieser Eintrag enthält keine personenbezogenen Daten und wird beim Schließen des Browsers gelöscht.</p>
<h2>4. Karte (OpenFreeMap) und externe Links</h2>
<p>Auf den Seiten „Unternehmen" und „Kontakt" zeigen wir unseren Standort auf einer Karte. Sobald die Karte in den sichtbaren Bereich gescrollt wird, lädt Ihr Browser Kartenkacheln, Schriften und Symbole von OpenFreeMap (tiles.openfreemap.org). Dabei werden Ihre IP-Adresse sowie technische Angaben (Browser, Zeitpunkt, angeforderte Kartenausschnitte) an den Betreiber übertragen. Kartendaten: © OpenMapTiles, © OpenStreetMap-Mitwirkende.</p>
<p>Auf der Startseite sowie den Seiten „Unternehmen" und „Kontakt" zeigen wir unseren Standort auf einer Karte. Sobald die Karte in den sichtbaren Bereich gescrollt wird, lädt Ihr Browser Kartenkacheln, Schriften und Symbole von OpenFreeMap (tiles.openfreemap.org). Dabei werden Ihre IP-Adresse sowie technische Angaben (Browser, Zeitpunkt, angeforderte Kartenausschnitte) an den Betreiber übertragen. Kartendaten: © OpenMapTiles, © OpenStreetMap-Mitwirkende.</p>
<p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO; unser berechtigtes Interesse liegt darin, Kunden und Bewerbern den Weg zu uns leicht auffindbar zu machen.</p>
<span class="todo">Offen: Betreiberangaben von OpenFreeMap (Name, Anschrift, Serverstandort, Speicherdauer) prüfen und hier ergänzen; rechtlich prüfen lassen, ob das Laden ohne vorherige Einwilligung zulässig ist.</span>
<p>Der Link „Route planen" führt zu Google Maps (Google Ireland Limited). Erst wenn Sie ihn anklicken, werden Daten an Google übertragen; dafür gilt die Datenschutzerklärung von Google.</p>
+25
View File
@@ -25,6 +25,7 @@
<script src="assets/vendor/lenis.min.js" defer></script>
<script src="assets/motion.js" defer></script>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "LocalBusiness", "name": "Kirschner Gebäudeservice", "description": "Hausmeisterservice und Gebäudedienstleistungen in Landshut und Ergolding seit 2003.", "url": "https://www.kirschner-service.de/", "telephone": "+49 871 14269101", "email": "info@kirschner-service.de", "foundingDate": "2003", "founder": {"@type": "Person", "name": "Thomas Kirschner"}, "address": {"@type": "PostalAddress", "streetAddress": "Etzstraße 45", "postalCode": "84030", "addressLocality": "Ergolding", "addressRegion": "Bayern", "addressCountry": "DE"}, "areaServed": ["Landshut", "Ergolding"], "slogan": "persönlich, zuverlässig, erstklassig", "image": "https://www.kirschner-service.de/assets/img/og.jpg"}</script>
<script type="module" src="assets/map.js"></script>
</head>
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
@@ -162,6 +163,30 @@
</div>
</section>
<section class="section theme-deep" aria-labelledby="map-title" id="anfahrt">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener">Route planen <svg class="btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a>
</div>
</div>
<div class="map reveal-img" data-map data-lng="12.1740033" data-lat="48.5646225" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
<div class="map__placeholder" aria-hidden="true"><svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0v40" fill="none" stroke="rgba(169,183,204,.07)"/></pattern></defs>
<rect width="800" height="480" fill="url(#g)"/>
<path d="M-20 360 C 140 330, 240 400, 380 370 S 640 300, 820 330" fill="none" stroke="rgba(91,138,214,.35)" stroke-width="18" stroke-linecap="round"/>
<g fill="none" stroke="rgba(169,183,204,.28)" stroke-width="3" stroke-linecap="round">
<path d="M0 120 L800 170"/><path d="M120 0 L260 480"/><path d="M430 0 C 440 160, 470 260, 520 480"/><path d="M0 250 C 200 230, 520 250, 800 210"/><path d="M620 0 L700 480"/>
</g>
<g fill="none" stroke="rgba(169,183,204,.14)" stroke-width="1.5"><path d="M0 60 L800 90"/><path d="M300 0 L340 480"/><path d="M0 420 L800 440"/><path d="M540 0 L580 480"/></g>
</svg><span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span></div>
</div>
</div>
</section>
<section class="band" aria-labelledby="jobs-title">
<svg class="band__chev" viewBox="0 0 600 400" aria-hidden="true"><path d="M260 0h120L180 200l200 200H260L60 200z"/><path d="M460 0h120L380 200l200 200H460L260 200z"/></svg>
<div class="wrap band__inner">
+5 -2
View File
@@ -74,12 +74,15 @@
</div>
</section>
<section class="section theme-deep" aria-labelledby="map-title">
<section class="section theme-deep" aria-labelledby="map-title" id="anfahrt">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal><a class="btn" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener">Route planen <svg class="btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a></div>
<div class="btn-row" data-reveal>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener">Route planen <svg class="btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a>
</div>
</div>
<div class="map reveal-img" data-map data-lng="12.1740033" data-lat="48.5646225" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
<div class="map__placeholder" aria-hidden="true"><svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+35 -36
View File
@@ -248,6 +248,35 @@ SERVICES = [
"Reinigung einer Glasfassade am Abend"),
]
MAP_SVG = '''<svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0v40" fill="none" stroke="rgba(169,183,204,.07)"/></pattern></defs>
<rect width="800" height="480" fill="url(#g)"/>
<path d="M-20 360 C 140 330, 240 400, 380 370 S 640 300, 820 330" fill="none" stroke="rgba(91,138,214,.35)" stroke-width="18" stroke-linecap="round"/>
<g fill="none" stroke="rgba(169,183,204,.28)" stroke-width="3" stroke-linecap="round">
<path d="M0 120 L800 170"/><path d="M120 0 L260 480"/><path d="M430 0 C 440 160, 470 260, 520 480"/><path d="M0 250 C 200 230, 520 250, 800 210"/><path d="M620 0 L700 480"/>
</g>
<g fill="none" stroke="rgba(169,183,204,.14)" stroke-width="1.5"><path d="M0 60 L800 90"/><path d="M300 0 L340 480"/><path d="M0 420 L800 440"/><path d="M540 0 L580 480"/></g>
</svg>'''
def map_section(theme=""):
return f'''
<section class="section {theme}" aria-labelledby="map-title" id="anfahrt">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal>
<a class="btn" href="{MAPS}" target="_blank" rel="noopener">Route planen {I_ARROW}</a>
</div>
</div>
<div class="map reveal-img" data-map data-lng="{GEO[0]}" data-lat="{GEO[1]}" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
<div class="map__placeholder" aria-hidden="true">{MAP_SVG}<span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span></div>
</div>
</div>
</section>'''
# ======================================================================
# Startseite
# ======================================================================
@@ -322,6 +351,8 @@ INDEX = f'''
</div>
</section>
{map_section("theme-deep")}
<section class="band" aria-labelledby="jobs-title">
{BAND_CHEV}
<div class="wrap band__inner">
@@ -407,15 +438,7 @@ team = "".join(f'''
<div><b>und viele mehr</b><span>Kolleginnen und Kollegen</span></div>
</div>'''
MAP_SVG = '''<svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0v40" fill="none" stroke="rgba(169,183,204,.07)"/></pattern></defs>
<rect width="800" height="480" fill="url(#g)"/>
<path d="M-20 360 C 140 330, 240 400, 380 370 S 640 300, 820 330" fill="none" stroke="rgba(91,138,214,.35)" stroke-width="18" stroke-linecap="round"/>
<g fill="none" stroke="rgba(169,183,204,.28)" stroke-width="3" stroke-linecap="round">
<path d="M0 120 L800 170"/><path d="M120 0 L260 480"/><path d="M430 0 C 440 160, 470 260, 520 480"/><path d="M0 250 C 200 230, 520 250, 800 210"/><path d="M620 0 L700 480"/>
</g>
<g fill="none" stroke="rgba(169,183,204,.14)" stroke-width="1.5"><path d="M0 60 L800 90"/><path d="M300 0 L340 480"/><path d="M0 420 L800 440"/><path d="M540 0 L580 480"/></g>
</svg>'''
UNTERNEHMEN = page_hero("Das Original seit 2003.",
"Persönlich, zuverlässig, erstklassig — aus Ergolding für Landshut und Umgebung.",
@@ -441,20 +464,7 @@ UNTERNEHMEN = page_hero("Das Original seit 2003.",
</div>
</section>
<section class="section" aria-labelledby="map-title" id="anfahrt">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal>
<a class="btn" href="{MAPS}" target="_blank" rel="noopener">Route planen {I_ARROW}</a>
</div>
</div>
<div class="map reveal-img" data-map data-lng="{GEO[0]}" data-lat="{GEO[1]}" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
<div class="map__placeholder" aria-hidden="true">{MAP_SVG}<span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span></div>
</div>
</div>
</section>
{map_section()}
'''
page("unternehmen.html",
@@ -536,18 +546,7 @@ KONTAKT = page_hero("Kontakt", "", "balkone") + f'''
</div>
</section>
<section class="section theme-deep" aria-labelledby="map-title">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal><a class="btn" href="{MAPS}" target="_blank" rel="noopener">Route planen {I_ARROW}</a></div>
</div>
<div class="map reveal-img" data-map data-lng="{GEO[0]}" data-lat="{GEO[1]}" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
<div class="map__placeholder" aria-hidden="true">{MAP_SVG}<span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span></div>
</div>
</div>
</section>
{map_section("theme-deep")}
'''
page("kontakt.html",
"Kontakt — Kirschner Gebäudeservice Ergolding",
@@ -610,7 +609,7 @@ DATENSCHUTZ = page_hero("Datenschutz", "Diese Website setzt keine Cookies und ve
<p>Diese Website setzt keine Cookies und verwendet keine Analyse- oder Marketingwerkzeuge. Schriften und Skripte liegen auf unserem eigenen Server. Lediglich im Browser-Sitzungsspeicher (sessionStorage) wird vermerkt, dass die Eröffnungsanimation bereits gezeigt wurde — dieser Eintrag enthält keine personenbezogenen Daten und wird beim Schließen des Browsers gelöscht.</p>
<h2>4. Karte (OpenFreeMap) und externe Links</h2>
<p>Auf den Seiten „Unternehmen" und „Kontakt" zeigen wir unseren Standort auf einer Karte. Sobald die Karte in den sichtbaren Bereich gescrollt wird, lädt Ihr Browser Kartenkacheln, Schriften und Symbole von OpenFreeMap (tiles.openfreemap.org). Dabei werden Ihre IP-Adresse sowie technische Angaben (Browser, Zeitpunkt, angeforderte Kartenausschnitte) an den Betreiber übertragen. Kartendaten: © OpenMapTiles, © OpenStreetMap-Mitwirkende.</p>
<p>Auf der Startseite sowie den Seiten „Unternehmen" und „Kontakt" zeigen wir unseren Standort auf einer Karte. Sobald die Karte in den sichtbaren Bereich gescrollt wird, lädt Ihr Browser Kartenkacheln, Schriften und Symbole von OpenFreeMap (tiles.openfreemap.org). Dabei werden Ihre IP-Adresse sowie technische Angaben (Browser, Zeitpunkt, angeforderte Kartenausschnitte) an den Betreiber übertragen. Kartendaten: © OpenMapTiles, © OpenStreetMap-Mitwirkende.</p>
<p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO; unser berechtigtes Interesse liegt darin, Kunden und Bewerbern den Weg zu uns leicht auffindbar zu machen.</p>
<span class="todo">Offen: Betreiberangaben von OpenFreeMap (Name, Anschrift, Serverstandort, Speicherdauer) prüfen und hier ergänzen; rechtlich prüfen lassen, ob das Laden ohne vorherige Einwilligung zulässig ist.</span>
<p>Der Link „Route planen" führt zu Google Maps (Google Ireland Limited). Erst wenn Sie ihn anklicken, werden Daten an Google übertragen; dafür gilt die Datenschutzerklärung von Google.</p>
+2 -1
View File
@@ -115,11 +115,12 @@
</div>
</section>
<section class="section " aria-labelledby="map-title" id="anfahrt">
<div class="wrap map-card">
<div class="stack">
<h2 class="display" id="map-title" data-split>Anfahrt</h2>
<p class="lead" data-reveal>Etzstraße 45<br>84030 Ergolding</p>
<p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
<div class="btn-row" data-reveal>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener">Route planen <svg class="btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a>
</div>