{{ define "main" }}
<header>


  {{ with .Params.banner }}
    {{ if .enable }}
      <section
        class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
        style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"
      >
        <div class="my-container" style="position: relative; z-index: 2;">
          <!-- Logo-Container mit 2 Frames (40% / 60%), 10% Rand links & rechts -->
          <div class="logo-container">
            <!-- Frame 1 -->
            <div class="frame1">
              <img
                src="{{ .logo_image1 | relURL }}"
                alt="Logo Frame 1"
                class="banner-logo"
              >
            </div>
            <!-- Frame 2 -->
            <div class="frame2">
              <img
                src="{{ .logo_image2 | relURL }}"
                alt="Logo Frame 2"
                class="banner-logo"
              >
            </div>
          </div>



          <!-- Titel / Content / Button -->
          <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
            {{ with .title }}
              <h1 class="title-custom title-custom-margin fade-in-title">
                {{ . | markdownify }}
              </h1>
            {{ 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="chevrons">
                    <div class='chevrondown'></div>
                    <div class='chevrondown'></div>
                  </div>
                </div>
              {{ end }}
            {{ end }}
          </div>
        </div>
      </section>
    {{ end }}
  {{ end }}
</header>




<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrolldown = document.querySelector('.scrolldown');
    scrolldown.addEventListener('click', function() {
      const serviceSection = document.getElementById('service');
      const offset = 100; // Der Offset in Pixeln

      // Berechne die Position, zu der gescrollt werden soll
      const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;

      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth' // Sanftes Scrollen
      });
    });

    window.addEventListener("scroll", function() {
      if (window.scrollY > 100) {
        scrolldown.classList.add('hide');
      } else {
        scrolldown.classList.remove('hide');
      }
    });
  });
</script>

<div style="height: 200px;"></div>

<!-- whyamperion -->
{{ if .Params.whyamperion.enable }}
{{ partial "whyamperion.html" . }}
{{ end }}
<!-- /whyamperion -->





<!-- service -->
{{ with site.GetPage "/service" }}
{{ with .Params.service }}
<section id="service" class="service">
  <!-- container-fluid + my-container => um beides kombinieren zu können -->
  <div class="container-fluid my-container">
    <!-- Block mit Titel und Beschreibung -->
    <div class="services-title">
      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
    </div>
    <!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
    <div class="service-grid">
      {{ range first 3 .service_item }} <!-- Hier nur die ersten 3 Elemente nehmen -->
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">
              {{ .name }}
            </div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div><!-- /service-grid -->
  </div><!-- /container-fluid.my-container -->
</section>
{{ end }}
{{ end }}
<!-- /service -->

<!-- service -->
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
{{ with .Params.service }}
<section id="service" class="service">
  <div class="container-fluid my-container">
    <div class="services-title">
      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
    </div>
    <div class="service-grid">
      {{ range first 3 .service_item }}
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">
              {{ .name }}
            </div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /service -->

<div style="height: 100px;"></div>

<!-- Include the new services section -->

{{ with site.GetPage "/why-amperion" }}
<section class="services-section">
  <h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
  <h3 class="services-description">{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}</h3>
  <div class="services-grid">
    {{ range first 6 .Params.featured_service.service_item }}
    <div class="service-card">
      <img src="{{ .image | relURL }}" alt="{{ .name }}" class="service-icon">
      <h3 class="service-card-title">{{ .name }}</h3>
      <p class="service-card-description"><strong>{{ .content1 | markdownify }}</strong> {{ .content | markdownify }}</p>
    </div>
    {{ end }}
  </div>
</section>
{{ end }}



<div style="height: 100px;"></div>



{{ if .Params.contact.enable }}
{{ partial "cta.html" . }}
{{ end }}




<!-- about -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section">
  <div class="my-container">
    <div class="row">
      <div class="col-12 text-center">
        <div class="services-title">
          {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
        </div>
        <div class="services-description">
          {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
        </div>

        <div style="height: 20px;"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-sm-12">
        <div class="block">
          {{ with .content }}{{ . | markdownify }}{{ end }}
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="block">
          <img src="{{ .image | relURL }}" class="custom-image" alt="Img">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /about -->

<div style="height: 100px;"></div>
<!-- call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /call to action -->
<div style="height: 100px;"></div>
<!-- facts -->
{{ with .Params.facts }}
{{ if .enable }}
<section class="facts">
  <div class="container">
    <div class="row">
      {{ range .fact_item }}
      <div class="col-md-6">
        <div class="fact-item text-center">
          <img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}


<style>
  .testimonial-item .images-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Bildern */
  }

  .testimonial-item .testimonial-image {
    width: 10px; /* Anpassen der Breite nach Bedarf */
    height: auto;
  }
</style>


<div style="height: 100px;"></div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrollDownButton = document.querySelector('.scroll-down-button');
    scrollDownButton.addEventListener('click', function() {
      document.querySelector('#about').scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
  
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrolled = false;
    var initialScrollListener = function() {
      if (!scrolled) {
        window.removeEventListener('scroll', initialScrollListener);
        document.getElementById('welcome').scrollIntoView({ behavior: 'smooth' });
        scrolled = true;
      }
    };

    window.addEventListener('scroll', initialScrollListener);
  });

  document.addEventListener("scroll", function() {
    var scrolldown = document.querySelector('.scrolldown');
    if (window.scrollY > 100) {  // Adjust this value based on when you want to hide the icon
      scrolldown.classList.add('hide');
    } else {
      scrolldown.classList.remove('hide');
    }
  });
</script>


{{ end }}