AMPERION_Webpage/layouts/index.html

{{ define "main" }}
<header id="mainHeader">
  {{ with .Params.banner }}
  {{ if .enable }}
  <!-- HERO / SLIDER -->
  <section id="hero" class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
    style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
    <div class="my-container" style="position: relative; z-index: 2;">
      

      <!-- Logo-Zeile mit zwei Frames -->
      <div class="logo-container">
        <div class="frame1">
          <img src="{{ .logo_image1 | relURL }}" alt="AMPERION – Ingenieurbüro und Elektrotechnikbetrieb für PV, Speicher & Ladeinfrastruktur" class="banner-logo">
        </div>
        <div class="frame2">
          <img src="{{ .logo_image2 | relURL }}" alt="AMPERION – Planungsbüro" class="banner-logo">
        </div>
      </div>

      <!-- Haupttitel + Button -->
      <div class="hero-section" style="margin-top: 10rem;">
        {{ with .title }}
        <h1 class="hero-title fade-in-title" itemprop="headline">{{ . | markdownify }}</h1>
        {{ end }}
        {{ with .button }}
        {{ if .enable }}
        <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>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </section>
  {{ end }}
  {{ end }}
</header>

<!-- Scroll/Hide Header -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const hero = document.getElementById('hero');
  const targetSection = document.getElementById('leistungen-fokusthemen');
  const scrolldown = document.querySelector('.scrolldown');
  const header = document.getElementById('mainHeader');
  let lastScroll = window.scrollY;
  let autoScrollDone = false;
  let isAutoScrolling = false;
  const offset = 120;

  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;
    }, 1000);
  }

  // Click handler für Scrolldown
  scrolldown?.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    scrollToTarget();
  });

  // Wheel handler für Auto-Scroll am Ende der Hero-Section
  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();
      }
    }, 50);
  }, { passive: true });

  // Scroll handler für Header und Chevron
  let scrollTimeout;
  window.addEventListener('scroll', function () {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
      // Chevron ausblenden
      if (window.scrollY > 100) {
        scrolldown?.classList.add('hide');
      } else {
        scrolldown?.classList.remove('hide');
      }

      // Header verstecken beim Runterscrollen
      const currentScroll = window.scrollY;
      if (!isAutoScrolling) {
        header.style.top = (currentScroll > lastScroll && currentScroll > 100) ? '-100vh' : '0';
        if (currentScroll === 0) header.style.top = '0';
        lastScroll = currentScroll;
      }

      // Reset Auto-Scroll wenn zurück im Hero
      if (hero) {
        const heroTop = hero.getBoundingClientRect().top;
        const heroBottom = hero.getBoundingClientRect().bottom;
        if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
          autoScrollDone = false;
        }
      }
    }, 10);
  });

  // Reset beim Seitenwechsel
  window.addEventListener('beforeunload', () => {
    window.scrollTo(0, 0);
  });
});
</script>

<!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
<section id="leistungen-fokusthemen" class="section combined-services " style="background-color:#f3f3f3;">
  <div class="my-container">
    <div class="grid-section services-grid" data-aos="fade-up" data-aos-delay="50">
      {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
    </div>
    <div class="grid-spacer" aria-hidden="true"></div>
    <div class="grid-section focus-grid" data-aos="fade-up" data-aos-delay="100">
      {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
    </div>
  </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">
        <h2>Darum AMPERION</h2>
        <h3><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h3>
      </div>
    </div>

    <!-- Karten -->
    <div class="why-grid mt-5">
      {{ $delay := 0 }}
      {{ $delayStep := 100 }}

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/file-badge.svg" alt="Technische Planungskompetenz - Von der Idee zur bewilligten Ausführungsplanung" class="service-icon mb-3">
        <h4 class="service-card-title">Technische Planungskompetenz</h4>
        <p class="service-card-description">
          <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme - Schnittstellen im Griff: vom Baustart bis zur Inbetriebnahme" class="service-icon mb-3">
        <h4 class="service-card-title">Intelligente Energiesysteme</h4>
        <p class="service-card-description">
          <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/headset.svg" alt="Persönliche Betreuung - Mehr als Beratung: Wir machen Energieprojekte planbar & profitabel" class="service-icon mb-3">
        <h4 class="service-card-title">Persönliche Betreuung</h4>
        <p class="service-card-description">
          <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung - Wir übernehmen die technische Koordination von Einreichung bis Ausschreibung." class="service-icon mb-3">
        <h4 class="service-card-title">Reibungslose Projektabwicklung</h4>
        <p class="service-card-description">
          <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/network.svg" alt="Vernetzte Energiezukunft - Wir denken Energie ganzheitlich modular, digital und wachstumsfähig geplant." class="service-icon mb-3">
        <h4 class="service-card-title">Vernetzte Energiezukunft</h4>
        <p class="service-card-description">
          <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
        <img src="icons/circuit-board.svg" alt="Präzise Systemplanung - Alle Komponenten exakt abgestimmt wirtschaftlich und regelkonform." class="service-icon mb-3">
        <h4 class="service-card-title">Präzise Systemplanung</h4>
        <p class="service-card-description">
          <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
        </p>
      </article>
    </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>
      </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">
    <div class="row">
      <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
        <h2>Über AMPERION</h2>
        {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
      </div>
    </div>

    <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>
      </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 }}

{{ with $cta }}
{{ if .enable }}
<section id="cta" class="cta">
  <!-- Animierter Hintergrund -->
  <div class="cta__bg" aria-hidden="true">
    <div class="cta__grid"></div>
    <div class="cta__energy-lines">
      <div class="energy-line-h energy-line-h2"></div>
      <div class="energy-line-h energy-line-h3"></div>
      <div class="energy-line-v energy-line-v1"></div>
      <div class="energy-line-v energy-line-v2"></div>
      <div class="energy-node energy-node1"></div>
      <div class="energy-node energy-node2"></div>
    </div>
    <div class="cta__gradient-top"></div>
    <div class="cta__gradient-bottom"></div>
  </div>

  <!-- Content -->
  <div class="my-container">
    <div class="cta__wrap">
      <h3 class="cta__title">
        {{ .title | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
      </h3>
      <p class="cta__lead">
        {{ .lead | default "Bereit für Ihr Energieprojekt?" }}
        <span class="cta__accent">{{ .accent | default "Kostenfreie Erstberatung sichern!" }}</span>
      </p>

      <div class="cta__actions">
        {{ 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">
        <a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
          <img src="/images/social/instagram.svg" alt="Instagram Profil AMPERION" role="presentation" aria-hidden="true">
        </a>
        <a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
          <img src="/images/social/linkedin.svg" alt="Linkedin Profil AMPERION" role="presentation" aria-hidden="true">
        </a>
        <a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
          <img src="/images/social/facebook.svg" alt="Facebook Profil AMPERION" role="presentation" aria-hidden="true">
        </a>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}

{{ end }}