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

  {{/* ========= Datenquellen: Impressum > params.contact > params (alt) ========= */}}
  {{ $impressum := site.GetPage "page" "impressum" }}

  {{ $addr := or
      (and $impressum $impressum.Params.location)
      (or site.Params.contact.location site.Params.location) }}

  {{ $email := or
      (and $impressum $impressum.Params.email)
      (or site.Params.contact.email site.Params.email) }}

  {{ $phone1 := or
      (and $impressum $impressum.Params.telefon)
      (or site.Params.contact.phone1 site.Params.phone1) }}

  {{ $phone2 := or
      (and $impressum $impressum.Params.telefon2)
      (or site.Params.contact.phone2 site.Params.phone2) }}

  <style>
    /* Nur Hilfsstyles – keine Typo-Overrides */
    .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .contact-wrap{padding:56px 0}
    .card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
    .card-pad{padding:24px}
    .stack{display:grid;gap:16px}
    .stack-lg{display:grid;gap:24px}
    .info-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .info-item{display:flex;gap:.75rem;align-items:flex-start}
    .info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}

    /* CTA-Buttons & Socials: wir nutzen eure Klassen, nur Layout-Hooks */
    .cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
    .cta__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
    .cta__social-link{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.06)}

    /* Formular-Grid */
    .form-grid{display:grid;grid-template-columns:1fr;gap:14px}
    @media(min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}
    .form-group{display:flex;flex-direction:column;gap:.4rem}
    .form-group.full{grid-column:1 / -1}
    .form-control{
      width:100%;background:#fff;color:inherit;
      border:1px solid rgba(0,0,0,.12);border-radius:12px;
      padding:.85rem 1rem;outline:0;transition:border-color .15s ease, box-shadow .15s ease;
    }
    textarea.form-control{min-height:160px;resize:vertical}
    .form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
    .form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
    .card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */

  </style>

  <section class="contact-wrap">
    <div class="container">
      <div class="row g-4">
        <!-- ===== Kontakt-Infos ===== -->
        <div class="col-lg-5" data-reveal>
          <div class="card card-pad stack-lg">
            <div class="stack">
              <h3>Kontakt</h3>
              <ul class="info-list" style="display:grid;gap:12px;justify-items:center;text-align:center">
                {{ with $addr }}
                <li class="info-item">
                  <div class="txt">{{ . | markdownify }}</div>
                </li>
                {{ end }}
                {{ with $email }}
                <li class="info-item">
                  <div class="txt"><a href="mailto:{{ . | safeURL }}">{{ . }}</a></div>
                </li>
                {{ end }}
                {{ with $phone1 }}
                <li class="info-item">
                  <div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
                </li>
                {{ end }}
                {{ with $phone2 }}
                <li class="info-item">
                  <div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
                </li>
                {{ end }}
              </ul>
            </div>

            <div class="stack">
              <h3>Folgen Sie uns</h3>
              <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>
        </div>

        <!-- ===== Formular ===== -->
        <div class="col-lg-7" data-reveal>
          {{ with site.Params.contact.form }}{{ if .enable }}
          {{ $formName := printf "contact_%s" $.Language.Lang }}
          <form
            method="POST"
            class="card card-pad stack"
            {{ if .use_netlify }}
              name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}"
            {{ else }}
              name="contact" action="{{ .action | safeURL }}"
            {{ end }}
          >
            {{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}

            <div class="form-grid">
              <div class="form-group">
                <label for="name" class="visually-hidden">Name</label>
                <input id="name" name="name" type="text" class="form-control" placeholder="Name" required>
              </div>
              <div class="form-group">
                <label for="email" class="visually-hidden">E-Mail</label>
                <input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="E-Mail" required>
              </div>
              <div class="form-group">
                <label for="company" class="visually-hidden">Unternehmen</label>
                <input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)">
              </div>
              <div class="form-group">
                <label for="phone" class="visually-hidden">Telefon</label>
                <input id="phone" name="phone" type="tel" class="form-control" placeholder="Telefon (optional)">
              </div>
              <div class="form-group full">
                <label for="subject" class="visually-hidden">Betreff</label>
                <input id="subject" name="subject" type="text" class="form-control" placeholder="Betreff" required>
              </div>
              <div class="form-group full">
                <label for="message" class="visually-hidden">Ihre Nachricht</label>
                <textarea id="message" name="message" class="form-control" rows="6" placeholder="Ihre Nachricht …" required></textarea>
              </div>

              {{ if .use_netlify }}
              <div class="form-group full" style="display:none;">
                <label>Bitte nicht ausfüllen</label>
                <input name="nhp" type="text">
              </div>
              {{ end }}

              {{ if .use_recaptcha }}
              <input type="hidden" id="captchaResponse" name="g-recaptcha-response">
              {{ end }}
            </div>

            <p class="form-legal">
              <label>
                <input type="checkbox" required>
                Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
              </label>
            </p>

            <div>
              <button class="cta__btn" type="submit">
                <span aria-hidden="true">➜</span><span>Nachricht senden</span>
              </button>
            </div>
          </form>
          {{ end }}{{ end }}
        </div>
      </div>
    </div>
  </section>

  {{/* Reveal Init (falls global nicht vorhanden) */}}
  <script>
    (function(){
      if (window.__contactRevealInit) return; window.__contactRevealInit = 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(entries){
        entries.forEach(function(entry){ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); }});
      }, {threshold:.12});
      els.forEach(e=>io.observe(e));
    })();
  </script>
{{ end }}