AMPERION_Webpage/layouts/_default/karriere.html

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

<style>
  .container-wide{width:100%;max-width:1360px;margin:0 auto;padding:0 16px}
  .section{padding:56px 0} .band{background:#f4f6f6}

  /* HERO */
  .hero-media{border-radius:14px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
  .hero-media img{display:block;width:100%;height:auto}
  .hero-lead{opacity:.9;margin-top:.5rem}

  /* Werte – Cards */
  .value-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
              padding:18px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.06)}
  .value-ico{width:44px;height:44px;border-radius:12px;margin:0 auto 8px;
             display:flex;align-items:center;justify-content:center;
             background:rgba(245,166,35,.12);color:#F5A623;line-height:0}
  .value-ico svg{width:22px;height:22px;display:block}
  .value-title{margin:.2rem 0 .25rem;font-weight:700}
  .value-text{margin:0;opacity:.9}

  /* Benefits – Ticks in 2 Spalten */
  .val-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
  .tick{display:flex;gap:.6rem;align-items:flex-start}
  .tick svg{flex:0 0 20px;margin-top:2px;color:#F5A623}

  /* kleine Helfer */
  [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s, transform .5s}
  [data-reveal].is-visible{opacity:1;transform:none}
</style>

<!-- ========= HERO ========= -->
{{ $h := .Params.hero }}
{{ $img := or (and $h $h.image) .Params.image }}
{{ $alt := or (and $h $h.image_alt) (printf "Arbeiten bei %s" .Site.Title) }}

<section class="section">
  <div class="container-wide">
    <div class="row align-items-center gx-5 gy-4">
      <div class="col-lg-7" data-reveal>
        <h3>
          {{ if $h }}
            {{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }}
          {{ else }}
            Karriere bei {{ .Site.Title }}
          {{ end }}
        </h3>
        {{ with $h }}{{ with .lead }}
          <div class="hero-lead">{{ . | markdownify }}</div>
        {{ end }}{{ end }}
      </div>

      <div class="col-lg-5" data-reveal>
        {{ with $img }}
        <figure class="hero-media">
          <img src="{{ . | relURL }}" alt="{{ $alt }}" width="1200" height="800" loading="eager">
        </figure>
        {{ end }}
      </div>
    </div>
  </div>
</section>

<!-- ========= UNSERE WERTE (Cards) ========= -->
{{ with .Params.values }}
<section class="section band">
  <div class="container-wide">
    <h3 class="mb-3">Unsere Werte</h3>
    <div class="row g-4">
      {{ range $i, $v := . }}
      <div class="col-md-4" data-reveal>
        <article class="value-card">
          <div class="value-ico" aria-hidden="true">
            {{/* simple Icon-Rotation */}}
            {{ if eq (mod $i 3) 0 }}
              <!-- target -->
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".14"/><circle cx="12" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
            {{ else if eq (mod $i 3) 1 }}
              <!-- badge -->
              <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5" fill="currentColor" opacity=".18"/><circle cx="12" cy="9" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 14l-2 7 6-3 6 3-2-7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
            {{ else }}
              <!-- shield -->
              <svg viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="currentColor" opacity=".14"/><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
            {{ end }}
          </div>
          <h4 class="value-title">{{ $v.title }}</h4>
          <p class="value-text">{{ $v.text }}</p>
        </article>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}

<!-- ========= WAS WIR BIETEN ========= -->
<section class="section">
  <div class="container-wide">
    <h3 class="mb-3">Was wir bieten</h3>
    <div class="row g-4">
      <div class="col-md-6" data-reveal>
        <ul class="val-list">
          {{ range .Params.benefits_left }}
          <li class="tick">
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            <span>{{ . | markdownify }}</span>
          </li>
          {{ end }}
        </ul>
      </div>
      <div class="col-md-6" data-reveal>
        <ul class="val-list">
          {{ range .Params.benefits_right }}
          <li class="tick">
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            <span>{{ . | markdownify }}</span>
          </li>
          {{ end }}
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- CALL TO ACTION -->
{{ $impressum := site.GetPage "page" "impressum" }}
{{ $ctaEnabled := or (and .Params.cta .Params.cta.enable) (or .Params.cta_text .Params.cta_label) }}
{{ if $ctaEnabled }}
<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-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>

  <div class="my-container">
    <div class="cta__wrap" data-reveal>
      <h3 class="cta__title">
        {{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }}
      </h3>
      {{ with .Params.subtitle }}<p class="cta__lead">{{ . }}</p>{{ else }}
      <p class="cta__lead">Wir freuen uns über deine Initiativbewerbung!</p>
      {{ end }}

      <div class="cta__actions">
        {{ with .Params.cta_label }}
          <a class="cta__btn" href="{{ ($.Params.cta_href | default "/contact/") | relURL }}">
            <span aria-hidden="true">⚡</span><span>{{ . }}</span>
          </a>
        {{ end }}

        {{ if $impressum }}
          <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>
        {{ 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"></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"></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"></a>
      </div>
    </div>
  </div>
</section>
{{ end }}


<script>
  (function(){
    if (window.__careerRevealInit) return; window.__careerRevealInit = true;
    var els = document.querySelectorAll("[data-reveal]");
    if(!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
    var io = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target); } }); },{threshold:.12});
    els.forEach(e=>io.observe(e));
  })();
</script>

{{ end }}