Update29082025

This commit is contained in:
astosic 2025-08-29 19:13:51 +02:00
parent 463e7fa1ea
commit 2f9aa2adac
15 changed files with 817 additions and 513 deletions

View file

@ -1,4 +1,3 @@
{{ define "main" }}
<header id="mainHeader">
{{ with .Params.banner }}
@ -25,11 +24,12 @@
{{ end }}
{{ with .button }}
{{ if .enable }}
<div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
style="--color: rgb(0, 0, 0); cursor: pointer;">
<div class="scrolldown"
onclick="document.getElementById('leistungen-fokusthemen').scrollIntoView({ behavior: 'smooth' });"
style="--color: rgb(0, 0, 0); cursor: pointer;">
<div class="chevrons">
<div class='chevrondown'></div>
<div class='chevrondown'></div>
<div class="chevrondown"></div>
<div class="chevrondown"></div>
</div>
</div>
{{ end }}
@ -55,12 +55,9 @@ document.addEventListener('DOMContentLoaded', function () {
function scrollToTarget() {
if (!targetSection || isAutoScrolling) return;
isAutoScrolling = true;
const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top: y, behavior: 'smooth' });
setTimeout(() => {
isAutoScrolling = false;
autoScrollDone = true;
@ -78,12 +75,10 @@ document.addEventListener('DOMContentLoaded', function () {
let wheelTimeout;
window.addEventListener('wheel', function (e) {
if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
clearTimeout(wheelTimeout);
wheelTimeout = setTimeout(() => {
const heroBottom = hero.getBoundingClientRect().bottom;
const threshold = 50;
if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
scrollToTarget();
}
@ -111,11 +106,12 @@ document.addEventListener('DOMContentLoaded', function () {
}
// Reset Auto-Scroll wenn zurück im Hero
const heroTop = hero.getBoundingClientRect().top;
const heroBottom = hero.getBoundingClientRect().bottom;
if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
autoScrollDone = false;
if (hero) {
const heroTop = hero.getBoundingClientRect().top;
const heroBottom = hero.getBoundingClientRect().bottom;
if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
autoScrollDone = false;
}
}
}, 10);
});
@ -140,11 +136,9 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</section>
<!-- DARUM AMPERION -->
<section class="whyamperion section">
<div class="container my-container">
<!-- Titelblock -->
<div class="row">
<div class="text-center" data-aos="fade-up" data-aos-delay="100">
@ -208,46 +202,40 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</div>
<!-- Affiliations / Verbände unterhalb der Cards -->
<div class="darum-aff-row" data-aos="fade-up" data-aos-delay="100">
<!-- Linker Block: Ingenieurbüros + Co. -->
<div class="aff-group aff-left">
<div class="aff-logos">
<a href="https://www.ingenieurbueros.at/"
target="_blank"
rel="noopener external nofollow"
aria-label="Ingenieurbüros Österreich Website öffnen"
title="Ingenieurbüros Österreich">
<img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
</a>
<!-- Affiliations / Verbände unterhalb der Cards -->
<div class="darum-aff-row" data-aos="fade-up" data-aos-delay="100">
<!-- Linker Block: Ingenieurbüros + Co. -->
<div class="aff-group aff-left">
<div class="aff-logos">
<a href="https://www.ingenieurbueros.at/"
target="_blank"
rel="noopener external nofollow"
aria-label="Ingenieurbüros Österreich Website öffnen"
title="Ingenieurbüros Österreich">
<img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
</a>
</div>
</div>
<!-- Rechter Block: Elektriker Österreich (klickbar, NUR Logo) -->
<a class="aff-group aff-right"
href="https://elektrikeroesterreich.at/"
target="_blank"
rel="noopener external nofollow"
aria-label="Elektriker Österreich Website öffnen"
title="Elektriker Österreich">
<img src="/images/logoelektrikeroedachmarke.png"
alt="Mitglied bei Elektriker Österreich"
class="aff-pva-logo">
</a>
</div>
</div>
<!-- Rechter Block: Elektriker Österreich (klickbar, NUR Logo) -->
<a class="aff-group aff-right"
href="https://elektrikeroesterreich.at/"
target="_blank"
rel="noopener external nofollow"
aria-label="Elektriker Österreich Website öffnen"
title="Elektriker Österreich">
<img src="/images/logoelektrikeroedachmarke.png"
alt="Mitglied bei Elektriker Österreich"
class="aff-pva-logo">
</a>
</div>
</section>
<!-- ÜBER AMPERION -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section" style="background-color:#f3f3f3">
<div class="container">
<!-- Titelbereich -->
<div class="row">
<div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
<h2>Über AMPERION</h2>
@ -255,63 +243,45 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</div>
<!-- Inhalt -->
<div class="row mt-4 d-flex align-items-stretch about-row">
<!-- Textbereich -->
<div class="col-md-7 col-sm-12 d-flex h-1000" data-aos="fade-right" data-aos-delay="200">
<div class="text-left w-100 my-auto">
{{ with .content }}{{ . | markdownify }}{{ end }}
</div>
<a href="/about/" class="about-cta">MEHR ÜBER UNS</a>
<a href="/about/" class="about-cta">MEHR ÜBER UNS</a>
</div>
<!-- Bildbereich -->
<div class="col-md-5 col-sm-12 d-flex h-10" data-aos="zoom-in" data-aos-delay="300">
<div class="about-image-wrap">
<img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- CALL TO ACTION -->
{{ $impressum := site.GetPage "page" "impressum" }}
{{ $cta := .Params.cta }}
{{ if .Params.cta.enable }}
{{ with $cta }}
{{ if .enable }}
<section id="cta" class="cta">
<!-- Animierter Hintergrund -->
<div class="cta__bg" aria-hidden="true">
<!-- Grid Pattern -->
<div class="cta__grid"></div>
<!-- Energie-Linien -->
<div class="cta__energy-lines">
<!-- Horizontale Linien -->
<div class="energy-line-h energy-line-h2"></div>
<div class="energy-line-h energy-line-h3"></div>
<!-- Vertikale Linien -->
<div class="energy-line-v energy-line-v1"></div>
<div class="energy-line-v energy-line-v2"></div>
<!-- Energie-Knoten -->
<div class="energy-node energy-node1"></div>
<div class="energy-node energy-node2"></div>
</div>
<!-- Gradient Overlays -->
<div class="cta__gradient-top"></div>
<div class="cta__gradient-bottom"></div>
</div>
@ -320,20 +290,26 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="my-container">
<div class="cta__wrap">
<h3 class="cta__title">
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
{{ .title | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
</h3>
<p class="cta__lead">
Bereit für Ihr Energieprojekt?
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
{{ .lead | default "Bereit für Ihr Energieprojekt?" }}
<span class="cta__accent">{{ .accent | default "Kostenfreie Erstberatung sichern!" }}</span>
</p>
<div class="cta__actions">
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
<span aria-hidden="true">✉️</span><span>E-Mail senden</span>
</a>
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}">
<span aria-hidden="true">📞</span><span>Anrufen</span>
</a>
{{ with $impressum }}
{{ with .Params.email }}
<a class="cta__btn" href="mailto:{{ . }}">
<span aria-hidden="true">✉️</span><span>{{ $.Params.cta.email_button_text | default "E-Mail senden" }}</span>
</a>
{{ end }}
{{ with .Params.telefon }}
<a class="cta__btn" href="tel:{{ . }}">
<span aria-hidden="true">📞</span><span>{{ $.Params.cta.phone_button_text | default "Anrufen" }}</span>
</a>
{{ end }}
{{ end }}
</div>
<div class="cta__social">
@ -351,4 +327,6 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</section>
{{ end }}
{{ end }}
{{ end }}
{{ end }}