196 lines
No EOL
9.1 KiB
HTML
196 lines
No EOL
9.1 KiB
HTML
{{ 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: deckt sowohl phone als auch phone1 ab (alt & neu) */}}
|
||
{{ $phone1 := or
|
||
(and $impressum $impressum.Params.telefon)
|
||
(or site.Params.contact.phone site.Params.contact.phone1 site.Params.phone site.Params.phone1) }}
|
||
|
||
{{ $phone2 := or
|
||
(and $impressum $impressum.Params.telefon2)
|
||
(or site.Params.contact.phone2 site.Params.phone2) }}
|
||
|
||
<style>
|
||
/* Nur Layout-/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: nutzt eure bestehenden 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 }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||
</div>
|
||
</li>
|
||
{{ end }}
|
||
📞{{ with $phone1 }}
|
||
<li class="info-item">
|
||
<div class="txt">
|
||
<a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||
</div>
|
||
</li>
|
||
{{ end }}
|
||
{{ with $phone2 }}
|
||
<li class="info-item">
|
||
<div class="txt">
|
||
<a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
|
||
</div>
|
||
</li>
|
||
{{ end }}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="stack">
|
||
<h4>Folgen Sie uns!</h4>
|
||
<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>
|
||
</div>
|
||
|
||
<!-- ===== Formular ===== -->
|
||
<div class="col-lg-7" data-reveal>
|
||
<form method="POST" action="/send.php" class="card card-pad stack">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="name" class="visually-hidden">Name</label>
|
||
<input id="name" name="name" type="text" autocomplete="name" 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" autocomplete="organization" 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" autocomplete="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>
|
||
<!-- hCaptcha -->
|
||
<div class="form-group full">
|
||
<div class="h-captcha" data-sitekey="15a25108-bbc0-4d02-913c-4ada005ebd20" data-theme="dark"></div>
|
||
</div>
|
||
</div>
|
||
<p class="form-legal">
|
||
<label for="legal-consent">
|
||
<input id="legal-consent" name="legal_consented" 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" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
|
||
<span aria-hidden="true">➜</span><span>Nachricht senden</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</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>
|
||
<!-- hCaptcha-Skript -->
|
||
<script>
|
||
(function(){
|
||
if (window.__contactRevealInit) return; window.__contactRevealInit = true;
|
||
var els = document.querySelectorAll("[data-reveal]");
|
||
if (!('IntersectionObserver' in window)){ els.forEach(function(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(function(e){io.observe(e)});
|
||
})();
|
||
</script>
|
||
{{ end }} |