AMPERION_Webpage/layouts/_default/about.html

{{ define "main" }}
{{ partial "page-title.html" . }}

<!-- Intro Section -->
{{ with .Params.intro_section }}
{{ if .enable }}
<section id="about-intro" class="section" style="background-color:#ffffff; margin-top:-24px; padding-top:16px;">
  <h2>Ihr Partner für nachhaltige Energielösungen</h2>
  <div class="my-container">
    <div class="row align-items-center gx-5 gy-4">

      <!-- TEXT -->
      <div class="col-lg-7 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
        <div class="intro-content">
          
          <div class="intro-text article-copy">
            {{ .text | markdownify }}
          </div>
        </div>
      </div>

<!-- VIDEO (rechts, ohne abgerundete Ecken) -->
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
  <div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
    <video id="aboutVideo"
           class="intro-video"
           muted
           loop
           playsinline
           preload="none"
           poster='{{ "images/brand_poster.jpg" | relURL }}'>
      <!-- Quellen werden per JS gesetzt -->
    </video>
  </div>
</div>


<script>
document.addEventListener("DOMContentLoaded", () => {
  const vid = document.getElementById("aboutVideo");
  if (!vid) return;

  const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
  const srcMp4  = '{{ "images/Imagevideo_Short.mp4" | relURL }}';

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        vid.innerHTML = `
          <source src="${srcWebm}" type="video/webm">
          <source src="${srcMp4}" type="video/mp4">
        `;
        vid.play().catch(() => {});
        observer.disconnect();
      }
    });
  }, { rootMargin: "200px" });

  observer.observe(vid);
});
</script>
    </div>
  </div>
</section>
{{ end }}
{{ end }}



<!-- Mission/Vision/Ziel Section -->
{{ with .Params.mission_vision }}
{{ if .enable }}
<section class="mission-section section pt-0" style="background-color: #f8f9fa;">
  <div class="container">
    <div class="row justify-content-center">
      <!-- Schlanker, mittiger Content-Bereich -->
      <div>
        <!-- Headings -->
        <div class="text-center mb-3">
          <h1>Mission · Vision · Ziel</h1>
          <h2>Die Grundpfeiler unserer Arbeit.</h2>
        </div>

        <div class="mission-tabs-wrapper">
          <!-- Tabs (zentriert) -->
          <ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
            {{ range $index, $elements := .tabs }}
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ if eq $index 0 }}active{{ end }}"
                      id="tab-{{ .name | urlize }}"
                      data-bs-toggle="tab"
                      data-bs-target="#content-{{ .name | urlize }}"
                      type="button"
                      role="tab">
                {{ .name }}
              </button>
            </li>
            {{ end }}
          </ul>

          <!-- Inhalte (ohne fade, damit kein Flackern) -->
          <div class="tab-content mission-tab-content">
            {{ range $index, $elements := .tabs }}
            <div class="tab-pane {{ if eq $index 0 }}active{{ end }}"
                 id="content-{{ .name | urlize }}"
                 role="tabpanel">
              <div class="tab-inner">
                {{ .content | $.Page.RenderString (dict "display" "block") }}
              </div>
            </div>
            {{ end }}
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}




<!-- Was uns auszeichnet -->
<section class="section" style="background-color:#ffffff;">
  <div class="my-container">
    <div class="row">
      <div class="text-center" data-aos="fade-up" data-aos-delay="50">
        <h1>Was uns auszeichnet</h1>
        <h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2>
      </div>
    </div>

    <div class="why-grid mt-5" style="
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      justify-items: center;
    ">
      {{ $delay := 0 }}
      {{ $step := 100 }}

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
        <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
        <h3 class="service-card-title">Staatlich geprüft & konessioniert</h3>
        <p class="service-card-description">
          <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
        <img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
        <h3 class="service-card-title">Erfahrung &amp; Innovation</h3>
        <p class="service-card-description">
          <strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
        <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
        <h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
        <p class="service-card-description">
          <strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
        </p>
      </article>

      <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
        <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
        <h3 class="service-card-title">Unabhängige Beratung</h3>
        <p class="service-card-description">
          <strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
        </p>
      </article>
    </div>
  </div>
</section>



<!-- Team Section (grau, konsistent) -->
{{ with .Params.about }}
{{ if .enable }}
<section class="section" style="background-color:#f3f3f3;">
  <div class="my-container">

    <!-- Header -->
    <div class="text-center mb-5" data-aos="fade-up">
      <h1>Das AMPERION Gründerteam</h1>

    <div class="row gx-5 gy-5 align-items-center">

      <!-- Markus Wimmer -->
      <div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
        <div class="founder-card">
          {{ with .left_person }}
            <h4 class="founder-name">{{ .name | markdownify }}</h4>
            <div class="founder-description">
              {{ .description | $.Page.RenderString (dict "display" "block") }}
            </div>
          {{ end }}
        </div>
      </div>

      <!-- Team Bild -->
      <div class="col-lg-4 col-md-12 order-lg-2 order-1" data-aos="zoom-in" data-aos-delay="200">
        <div class="team-image-wrapper">
          <img src="{{ .image | relURL }}"
               alt="AMPERION Gründerteam"
               class="team-image w-100 rounded-3 shadow-sm">
        </div>
      </div>

      <!-- Alexander Stosic -->
      <div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
        <div class="founder-card">
          {{ with .right_person }}
            <h4 class="founder-name">{{ .name | markdownify }}</h4>
            <div class="founder-description">
              {{ .description | $.Page.RenderString (dict "display" "block") }}
            </div>
          {{ end }}
        </div>
      </div>

    </div>
  </div>
</section>
{{ end }}
{{ end }}


<!-- CTA unverändert lassen (wie auf Startseite) -->
{{ $impressum := site.GetPage "page" "impressum" }}
{{ if .Params.cta.enable }}
<section id="cta" class="cta">
  <div class="cta__bg" aria-hidden="true">
    <div class="cta__grid"></div>
    <div class="cta__energy-lines">
      <div class="energy-line-h energy-line-h1"></div>
      <div class="energy-line-h energy-line-h2"></div>
      <div class="energy-line-h energy-line-h3"></div>
      <div class="energy-line-h energy-line-h4"></div>
      <div class="energy-line-v energy-line-v1"></div>
      <div class="energy-line-v energy-line-v2"></div>
      <div class="energy-line-v energy-line-v3"></div>
      <div class="energy-line-v energy-line-v4"></div>
      <div class="energy-node energy-node1"></div>
      <div class="energy-node energy-node2"></div>
      <div class="energy-node energy-node3"></div>
      <div class="energy-node energy-node4"></div>
      <div class="energy-node energy-node5"></div>
      <div class="energy-node energy-node6"></div>
    </div>
    <div class="cta__gradient-top"></div>
    <div class="cta__gradient-bottom"></div>
  </div>

  <div class="my-container">
    <div class="cta__wrap">
      <h2 class="cta__title">
        Mehr Energie - Mit UNS!
      </h2>
      <p class="cta__lead">
        Ihr Weg zu nachhaltiger Energie beginnt hier. 
        <span class="cta__accent">Lassen Sie uns starten!</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>
      </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="">
        </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="">
        </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="">
        </a>
      </div>
    </div>
  </div>
</section>
{{ end }}

{{ end }}