Commit12082000
This commit is contained in:
parent
b6fe872a80
commit
0962f9325b
30 changed files with 1536 additions and 862 deletions
|
|
@ -4,14 +4,15 @@
|
|||
<!-- Intro Section -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section id="about-intro" class="section" style="background-color:#ffffff;">
|
||||
<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">
|
||||
<h2>Ihr Partner für nachhaltige Energielösungen</h2>
|
||||
|
||||
<div class="intro-text article-copy">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const vid = document.getElementById("aboutVideo");
|
||||
|
|
|
|||
|
|
@ -1,80 +1,190 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
{{ partial "page-title.html" . }}
|
||||
{{/* ========= Datenquellen: Impressum > params.contact > params (alt) ========= */}}
|
||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
|
||||
<section class="contact-form">
|
||||
<div class="container">
|
||||
{{ with site.Params.contact.form }}{{ if .enable -}}
|
||||
<div class="row">
|
||||
<form method="POST" {{ if .use_netlify }}name="{{ printf "contact_%s" $.Language.Lang }}" action="{{ "/message_sent" | relLangURL }}" netlify netlify-honeypot="nhp"{{ else }}name="contact" action="{{ .action | safeURL }}"{{ end }}>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="form-group">
|
||||
<label for="name" hidden>{{ i18n "contact_form_name" }}</label>
|
||||
<input id="name" name="name" type="text" class="form-control" placeholder="{{ i18n "contact_form_name" }}" required>
|
||||
{{ $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="form-group">
|
||||
<label for="email" hidden>{{ i18n "contact_form_email" }}</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="{{ i18n "contact_form_email" }}" required>
|
||||
|
||||
<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 class="form-group">
|
||||
<label for="subject" hidden>{{ i18n "contact_form_subject" }}</label>
|
||||
<input id="subject" name="subject" type="text" class="form-control" placeholder="{{ i18n "contact_form_subject" }}" required>
|
||||
</div>
|
||||
{{ if .use_netlify -}}
|
||||
<div class="form-group-h">
|
||||
<input name="nhp" type="text" class="form-control" placeholder="Are you made of flesh and bone?">
|
||||
</div>
|
||||
{{- end }}
|
||||
{{ if .use_recaptcha -}}
|
||||
<div class="form-group-h">
|
||||
</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>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="form-group-2">
|
||||
<label for="message" hidden>{{ i18n "contact_form_message" }}</label>
|
||||
<textarea id="message" name="message" class="form-control" rows="4" placeholder="{{ i18n "contact_form_message" }}" required></textarea>
|
||||
</div>
|
||||
<button class="btn btn-default" type="submit">{{ i18n "submit" }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{- end }}{{ end }}
|
||||
<div class="contact-box row">
|
||||
{{ with site.Params.contact -}}
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<h2>{{ i18n "address_title" }}</h2>
|
||||
<ul class="address-block">
|
||||
{{ $add_address_descriptors := .address_descriptors }}
|
||||
{{ with site.Params.location }}<li><i class="fas fa-map-marker-alt"></i>{{ if $add_address_descriptors }}{{ i18n "location" | printf "%s: " }}{{ end }}<div>{{ . | markdownify }}</div></li>{{ end }}
|
||||
{{ with site.Params.email }}<li><i class="fas fa-envelope"></i>{{ if $add_address_descriptors }}{{ i18n "email" | printf "%s: " }}{{ end }}{{ partial "cloak_email" . }}</li>{{ end }}
|
||||
{{ with site.Params.phone }}<li><i class="fas fa-tty"></i>{{ if $add_address_descriptors }}{{ i18n "phone" | printf "%s: " }}{{ end }}{{ . }}</li>{{ end }}
|
||||
</ul>
|
||||
<ul class="social-icons">
|
||||
{{ range site.Params.social -}}
|
||||
<li><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{ if site.Params.gmap.enable -}}
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="google-map">
|
||||
<div class="map" id="map" data-latitude="{{ site.Params.gmap.map_latitude }}" data-longitude="{{ site.Params.gmap.map_longitude }}" data-marker="{{ site.Params.gmap.map_marker | relURL }}" data-marker-name="{{ site.Title }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 }}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,425 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "page-title.html" . }}
|
||||
<!-- Intro-Abschnitt (optional über Frontmatter "about") -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="service-about section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}
|
||||
<div class="mt-30">{{ . | $.Page.RenderString (dict "display" "block") }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ with .image }}
|
||||
<div class="col-md-6">
|
||||
<img class="img-responsive" src="{{ . | relURL }}">
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
{{/* ==== BILDER SAMMELN (Front-Matter oder Auto-Discovery) ==== */}}
|
||||
{{ $photos := .Params.images }}
|
||||
{{ if not $photos }}
|
||||
{{ $slug := .Params.slug | default .File.TranslationBaseName }}
|
||||
{{ $cands := slice
|
||||
(printf "static/images/leistungen/%s1.webp" $slug)
|
||||
(printf "static/images/leistungen/%s2.webp" $slug)
|
||||
}}
|
||||
{{ $auto := slice }}
|
||||
{{ range $cands }}
|
||||
{{ if fileExists . }}
|
||||
{{ $auto = $auto | append (dict "src" (replace . "static" "") "alt" $slug ) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $photos = $auto }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Erstes Bild für Hero, zweites fürs Ergebnis vormerken */}}
|
||||
{{ $heroPhoto := cond (gt (len $photos) 0) (index $photos 0) nil }}
|
||||
{{ $ergebnisPhoto := cond (gt (len $photos) 1) (index $photos 1) nil }}
|
||||
{{ $.Scratch.Set "ergebnisPhoto" $ergebnisPhoto }}
|
||||
|
||||
<!-- ===== Inline-Styles ===== -->
|
||||
<style>
|
||||
.container-wide{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
|
||||
@media (min-width:1200px){.container-wide{max-width:1280px}}
|
||||
@media (min-width:1400px){.container-wide{max-width:1360px}}
|
||||
@media (min-width:1600px){.container-wide{max-width:1440px}}
|
||||
.service-hero__media{border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
|
||||
.service-hero__media img{display:block;width:100%;height:auto}
|
||||
.service-hero__text p{margin-bottom:1rem}
|
||||
|
||||
/* USP inline unter dem Text – Icons oben, #F5A623 */
|
||||
.usp-inline{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
|
||||
@media (min-width:992px){.usp-inline{grid-template-columns:repeat(3,1fr)}}
|
||||
|
||||
.usp-item{
|
||||
display:flex; flex-direction:column;
|
||||
align-items:center; /* vorher: flex-start */
|
||||
text-align:center; /* Text mittig */
|
||||
gap:8px; padding:12px 14px; border-radius:12px;
|
||||
background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05);
|
||||
}
|
||||
.usp-icon{
|
||||
color:#F5A623; background:rgba(245,166,35,.12);
|
||||
width:44px; height:44px; border-radius:12px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
margin:0 auto 8px; /* zentriert die Iconbox */
|
||||
}
|
||||
|
||||
.usp-icon svg{display:block;width:24px;height:24px}
|
||||
.usp-text{font-weight:500;margin:0}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- =========================
|
||||
HERO: Bild links, Intro rechts (breit)
|
||||
========================= -->
|
||||
<section class="service-hero section" style="margin-top:-24px; padding-top:16px;">
|
||||
<div class="container-wide">
|
||||
<div class="row align-items-center gx-5">
|
||||
|
||||
<!-- Bild links -->
|
||||
<div class="col-lg-6 order-1 order-lg-1" data-reveal>
|
||||
{{ with $heroPhoto }}
|
||||
<figure class="service-hero__media">
|
||||
<img src='{{ .src | default . | relURL }}'
|
||||
alt='{{ .alt | default $.Title }}'
|
||||
width="1200" height="800"
|
||||
loading="eager" decoding="async" class="img-fluid">
|
||||
</figure>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Intro-Text rechts + USP darunter -->
|
||||
<div class="col-lg-6 order-2 order-lg-2" data-reveal>
|
||||
{{ if .Content }}
|
||||
<div class="service-hero__text">
|
||||
{{ .Content }}
|
||||
{{ with .Params.usp }}
|
||||
<div class="usp-inline" role="list">
|
||||
{{ range $i, $u := . }}
|
||||
<div class="usp-item" role="listitem">
|
||||
<div class="usp-icon" aria-hidden="true">
|
||||
{{ if eq (mod $i 3) 0 }}
|
||||
<!-- Shield -->
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false">
|
||||
<path d="M12 3l7 3v6c0 4.97-3.58 9.43-7 10-3.42-.57-7-5.03-7-10V6l7-3z" fill="currentColor" opacity=".2"/>
|
||||
<path d="M12 3l7 3v6c0 4.97-3.58 9.43-7 10-3.42-.57-7-5.03-7-10V6l7-3z" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
{{ else if eq (mod $i 3) 1 }}
|
||||
<!-- Badge -->
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false">
|
||||
<circle cx="12" cy="9" r="5" fill="currentColor" opacity=".2"/>
|
||||
<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 }}
|
||||
<!-- Target -->
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false">
|
||||
<circle cx="12" cy="12" r="9" fill="currentColor" opacity=".15"/>
|
||||
<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>
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="usp-text">{{ $u }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Hauptinhalt aus der Markdown-Datei -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- =========================
|
||||
FEATURES (Icon-Left, keine Cards)
|
||||
Quelle: .Params.features (array of {title, text, icon?})
|
||||
========================= -->
|
||||
{{ with .Params.features }}
|
||||
<section class="service-ticker section" aria-label="Leistungen" style="background-color: #f8f9fa;">
|
||||
<style>
|
||||
.service-ticker{padding-top:24px;padding-bottom:24px}
|
||||
.service-ticker h2{margin:0 0 12px 0}
|
||||
|
||||
.ticker-viewport{position:relative;overflow:hidden;background: #f8f9fa;}
|
||||
.ticker-viewport:before,.ticker-viewport:after{
|
||||
content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:2
|
||||
}
|
||||
.ticker-viewport:before{left:0;background:linear-gradient(to right,#fff 40%,rgba(255,255,255,0))}
|
||||
.ticker-viewport:after{right:0;background:linear-gradient(to left,#fff 40%,rgba(255,255,255,0))}
|
||||
|
||||
.ticker-track{
|
||||
display:flex;gap:24px;align-items:center;width:max-content;
|
||||
animation:marquee var(--dur,30s) linear infinite;
|
||||
}
|
||||
.ticker-viewport:hover .ticker-track{animation-play-state:running}
|
||||
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
|
||||
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
|
||||
|
||||
/* === Card-Ticks === */
|
||||
.tick{
|
||||
display:flex;align-items:center;gap:16px;
|
||||
padding:14px 16px;border-radius:14px;background:#fff;
|
||||
box-shadow:0 2px 14px rgba(0,0,0,.06);
|
||||
flex:0 0 auto; /* nicht schrumpfen */
|
||||
width:clamp(280px,36vw,420px); /* feste Kartenbreite für sauberes Scrolling */
|
||||
}
|
||||
.tick-icon{
|
||||
color:#F5A623;background:rgba(245,166,35,.12);
|
||||
width:44px;height:44px;border-radius:12px;
|
||||
display:flex;align-items:center;justify-content:center;flex:0 0 44px
|
||||
}
|
||||
.tick-icon svg{width:22px;height:22px;display:block}
|
||||
|
||||
.tick-text{display:flex;flex-direction:column;gap:2px;white-space:normal}
|
||||
.tick-title{font-weight:700;font-size:inherit;line-height:1.3;margin:0}
|
||||
.tick-desc{margin:0;opacity:.88}
|
||||
</style>
|
||||
|
||||
<div class="container-wide">
|
||||
<h2 class data-reveal>Leistungen</h2>
|
||||
</div>
|
||||
|
||||
<div class="ticker-viewport">
|
||||
<div class="ticker-track" style="--dur: {{ mul (len .) 15 }}s">
|
||||
{{ $list := . }}
|
||||
|
||||
{{/* ===== 1. Durchlauf ===== */}}
|
||||
{{ range $i, $f := $list }}
|
||||
<div class="tick">
|
||||
<span class="tick-icon" aria-hidden="true">
|
||||
{{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
|
||||
{{ if or (eq $icon "pv") (eq $icon "i-0") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M3 9h18v6H3z" fill="currentColor" opacity=".18"/><path d="M3 9h18v6H3M7 9v6M11 9v6M15 9v6M19 9v6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="10" width="2" height="4" fill="currentColor"/></svg>
|
||||
{{ else if or (eq $icon "lade") (eq $icon "i-2") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M9 7v4a4 4 0 0 0 4 4h2v4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M14 3v4M10 3v4M17 7h2a2 2 0 0 1 2 2v2h-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else if or (eq $icon "study") (eq $icon "i-3") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" fill="currentColor" opacity=".14"/><path d="M14 3v6h6M9 14l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ end }}
|
||||
</span>
|
||||
<div class="tick-text">
|
||||
<h3 class="tick-title">{{ $f.title }}</h3>
|
||||
{{ with $f.text }}<p class="tick-desc">{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<!-- Call-to-Action (optional, falls in Frontmatter aktiviert) -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{/* ===== 2. Durchlauf (Duplikat) ===== */}}
|
||||
{{ range $i, $f := $list }}
|
||||
<div class="tick">
|
||||
<span class="tick-icon" aria-hidden="true">
|
||||
{{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
|
||||
{{ if or (eq $icon "pv") (eq $icon "i-0") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M3 9h18v6H3z" fill="currentColor" opacity=".18"/><path d="M3 9h18v6H3M7 9v6M11 9v6M15 9v6M19 9v6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="10" width="2" height="4" fill="currentColor"/></svg>
|
||||
{{ else if or (eq $icon "lade") (eq $icon "i-2") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M9 7v4a4 4 0 0 0 4 4h2v4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M14 3v4M10 3v4M17 7h2a2 2 0 0 1 2 2v2h-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else if or (eq $icon "study") (eq $icon "i-3") }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ else }}
|
||||
<svg viewBox="0 0 24 24" role="img"><path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" fill="currentColor" opacity=".14"/><path d="M14 3v6h6M9 14l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
{{ end }}
|
||||
</span>
|
||||
<div class="tick-text">
|
||||
<h3 class="tick-title">{{ $f.title }}</h3>
|
||||
{{ with $f.text }}<p class="tick-desc">{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- =========================
|
||||
OUTCOMES (Nutzen/Ergebnisse)
|
||||
Quelle: .Params.outcomes (array of strings)
|
||||
========================= -->
|
||||
{{ with .Params.outcomes }}
|
||||
<section class="service-outcomes section" aria-label="Ergebnis & Mehrwert">
|
||||
<style>
|
||||
.out-row{align-items:center}
|
||||
.out-media{border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
|
||||
.out-media img{display:block;width:100%;height:auto}
|
||||
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
|
||||
.checklist li{display:flex;gap:10px;align-items:flex-start}
|
||||
.checklist .check{flex:0 0 22px;color:#0AA8A7;margin-top:2px}
|
||||
</style>
|
||||
|
||||
<div class="container-wide" >
|
||||
<div class="row out-row gx-5">
|
||||
|
||||
<!-- Text links -->
|
||||
<div class="col-lg-6" data-reveal>
|
||||
<h2 class="mb-3">Ergebnis & Mehrwert</h2>
|
||||
<ul class="checklist">
|
||||
{{ range . }}
|
||||
<li data-reveal>
|
||||
<svg class="check" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Bild rechts (nimmt das 2. Bild aus dem Hero-Setup) -->
|
||||
<div class="col-lg-6" data-reveal>
|
||||
{{ $erg := $.Scratch.Get "ergebnisPhoto" }}
|
||||
{{ with $erg }}
|
||||
<figure class="out-media">
|
||||
<img src='{{ .src | relURL }}' alt='{{ .alt | default $.Title }}'
|
||||
width="1200" height="800" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
{{ else }}
|
||||
{{ with $heroPhoto }}
|
||||
<figure class="out-media">
|
||||
<img src='{{ .src | relURL }}' alt='{{ .alt | default $.Title }}'
|
||||
width="1200" height="800" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- =========================
|
||||
CTA (animierter Hintergrund wie auf Index),
|
||||
aber: TEXT/Buttons aus Front-Matter binden.
|
||||
========================= -->
|
||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
{{ $ctaEnabled := or (.Params.cta.enable) (or .Params.cta_text .Params.cta_label) }}
|
||||
{{ if $ctaEnabled }}
|
||||
<section id="cta" class="cta">
|
||||
<!-- Animierter Hintergrund (DEIN bestehendes Markup) -->
|
||||
<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-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>
|
||||
|
||||
<!-- Inhalt: jetzt dynamisch aus Front-Matter -->
|
||||
<div class="my-container">
|
||||
<div class="cta__wrap" data-reveal>
|
||||
<h2 class="cta__title">
|
||||
{{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
|
||||
</h2>
|
||||
|
||||
{{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}}
|
||||
{{ with .Params.subtitle }}
|
||||
<p class="cta__lead">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
<div class="cta__actions">
|
||||
{{ with .Params.cta_label }}
|
||||
<a class="cta__btn" href="{{ $.Params.cta_href | default "/contact/" }}">
|
||||
<span aria-hidden="true">⚡</span><span>{{ . }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{{/* Fallback/Ergänzung: direkte Kontaktwege aus Impressum */}}
|
||||
{{ 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="">
|
||||
</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 }}
|
||||
|
||||
<!-- =========================
|
||||
Micro-Animationen (IntersectionObserver)
|
||||
- fügt 'is-visible' hinzu, wenn Elemente ins Viewport kommen
|
||||
========================= -->
|
||||
<script>
|
||||
(function(){
|
||||
if (window.__serviceRevealInit) return; // vermeiden, dass mehrfach registriert wird
|
||||
window.__serviceRevealInit = true;
|
||||
|
||||
var els = document.querySelectorAll("[data-reveal]");
|
||||
if (!('IntersectionObserver' in window) || !els.length) {
|
||||
els.forEach(function(el){ el.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: 0.12 });
|
||||
|
||||
els.forEach(function(el){ io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- =========================
|
||||
Minimal CSS-Hooks (optional, an deine SCSS anpassen)
|
||||
========================= -->
|
||||
<style>
|
||||
/* Typo hooks */
|
||||
.kicker{letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:.25rem}
|
||||
.lead{opacity:.9}
|
||||
|
||||
/* Media items (icon-left) */
|
||||
.media-item{display:flex;gap:.9rem;align-items:flex-start}
|
||||
.media-item .media-icon{flex:0 0 auto;line-height:0;opacity:.9}
|
||||
.media-item .media-body{flex:1}
|
||||
|
||||
/* Features grid spacing */
|
||||
.service-features .feature{padding:14px 8px;border-radius:12px;transition:transform .25s ease, box-shadow .25s ease}
|
||||
.service-features .feature:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.06)}
|
||||
|
||||
/* Outcomes checklist */
|
||||
.checklist{list-style:none;padding:0;margin:0}
|
||||
.checklist li{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0}
|
||||
.checklist .check{color:#F5A623; margin-top:.2rem}
|
||||
|
||||
/* Reveal animation */
|
||||
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
|
||||
[data-reveal].is-visible{opacity:1;transform:none}
|
||||
|
||||
.service-photo{border-radius:12px;overflow:hidden}
|
||||
.service-photo img{display:block;width:100%;height:auto}
|
||||
|
||||
.service-hero__media{border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
|
||||
.service-hero__media img{display:block;width:100%;height:auto}
|
||||
.service-hero__text p{margin-bottom:1rem}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
|
||||
|
||||
|
||||
{{ define "main" }}
|
||||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- checking blog -->
|
||||
{{ if or (eq .Section "post") (eq .Section "posts") (eq .Section "blog") (eq .Section "blogs") (eq .Section "news") (eq .Section "categories") (eq .Section "tags") }}
|
||||
|
||||
<section class="page-wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="post post-single">
|
||||
<h2 class="post-title">{{ .Title }}</h2>
|
||||
<div class="post-meta">
|
||||
<ul>
|
||||
<li><i class="ion-calendar"></i> {{ time.Format ":date_long" .PublishDate }}</li>
|
||||
<li><i class="ion-android-people"></i>
|
||||
{{ i18n "posted_by" }}
|
||||
{{ $authors := slice }}{{ if reflect.IsSlice .Params.author }}{{ $authors = .Params.author }}{{ else }}{{ $authors = (slice .Params.author) }}{{ end -}}
|
||||
{{ range $index, $elements := $authors }}{{ if ne $index 0 }}, {{ end }}<a class="text-primary" href="{{ `author/` | relLangURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
|
||||
</li>
|
||||
<li><i class="ion-pricetags"></i>
|
||||
{{ range $index, $elements:= .Params.tags }}{{ if ne $index 0 }}, {{ end }}<a href="{{ `tags/` | relLangURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="post-thumb">
|
||||
{{ with .Params.image -}}
|
||||
<img class="img-responsive" src="{{ . | relURL }}" alt="{{ $.Title }}">
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="post-content post-excerpt">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ with site.Params.DisqusShortname -}}
|
||||
<div class="post-comments">
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
{{ partial "blog-sidebar.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- regular page -->
|
||||
{{ else -}}
|
||||
{{ .Render "default" }}
|
||||
{{- end }}
|
||||
<!-- /regular page -->
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,22 +1,82 @@
|
|||
<!-- page-title.html - Optimierte Version mit Wiederverwendung -->
|
||||
<!-- page-title.html - AMPERION Stromkreis Animation -->
|
||||
<section class="page-title">
|
||||
<!-- Animierter Grid-Hintergrund (nutzt CTA-Klassen) -->
|
||||
<div class="cta__bg page-title__bg" aria-hidden="true">
|
||||
<!-- Grid Pattern -->
|
||||
<div class="cta__grid"></div>
|
||||
<!-- Animierter Stromkreis-Hintergrund -->
|
||||
<div class="circuit-bg" aria-hidden="true">
|
||||
<!-- Hauptstromkreis -->
|
||||
<svg class="circuit-main" viewBox="0 0 1200 400">
|
||||
<!-- Leiterbahnen -->
|
||||
<path class="circuit-path circuit-path-1" d="M0,200 L300,200 L350,150 L600,150 L650,200 L1200,200" />
|
||||
<path class="circuit-path circuit-path-2" d="M100,100 L400,100 L450,150 L750,150 L800,100 L1100,100" />
|
||||
<path class="circuit-path circuit-path-3" d="M200,300 L500,300 L550,250 L850,250 L900,300 L1200,300" />
|
||||
|
||||
<!-- Verbindungspunkte -->
|
||||
<circle class="circuit-node" cx="300" cy="200" r="4"/>
|
||||
<circle class="circuit-node" cx="600" cy="150" r="4"/>
|
||||
<circle class="circuit-node" cx="400" cy="100" r="4"/>
|
||||
<circle class="circuit-node" cx="750" cy="150" r="4"/>
|
||||
<circle class="circuit-node" cx="500" cy="300" r="4"/>
|
||||
<circle class="circuit-node" cx="850" cy="250" r="4"/>
|
||||
|
||||
<!-- Komponenten (Widerstände, Kondensatoren) -->
|
||||
<rect class="circuit-component" x="345" y="145" width="30" height="10" rx="2"/>
|
||||
<rect class="circuit-component" x="745" y="95" width="30" height="10" rx="2"/>
|
||||
<rect class="circuit-component" x="545" y="245" width="30" height="10" rx="2"/>
|
||||
</svg>
|
||||
|
||||
<!-- Energie-Linien (nur wenige für dezenten Effekt) -->
|
||||
<div class="cta__energy-lines">
|
||||
<!-- Nur 2 horizontale Linien -->
|
||||
<div class="energy-line-h energy-line-h1"></div>
|
||||
<div class="energy-line-h energy-line-h3"></div>
|
||||
<!-- Nur 2 vertikale Linien -->
|
||||
<div class="energy-line-v energy-line-v1"></div>
|
||||
<div class="energy-line-v energy-line-v3"></div>
|
||||
<!-- Nur 3 Knoten -->
|
||||
<div class="energy-node energy-node1"></div>
|
||||
<div class="energy-node energy-node3"></div>
|
||||
<div class="energy-node energy-node5"></div>
|
||||
<!-- Energie-Pulse -->
|
||||
<div class="energy-pulse pulse-1"></div>
|
||||
<div class="energy-pulse pulse-2"></div>
|
||||
<div class="energy-pulse pulse-3"></div>
|
||||
|
||||
<!-- Blitz-Effekte -->
|
||||
<svg class="lightning-effect lightning-1" width="100" height="200" viewBox="0 0 100 200">
|
||||
<path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
<svg class="lightning-effect lightning-2" width="100" height="200" viewBox="0 0 100 200">
|
||||
<path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
|
||||
<!-- Voltmeter Animation -->
|
||||
<div class="voltmeter">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||
<circle cx="60" cy="60" r="55" fill="none" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
||||
<path class="voltmeter-needle" d="M60,60 L60,20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="60" cy="60" r="5" fill="currentColor"/>
|
||||
<!-- Skala -->
|
||||
<text x="60" y="95" text-anchor="middle" font-size="14" fill="currentColor" opacity="0.5">AMPERION</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Schaltkreis-Symbole -->
|
||||
<div class="circuit-symbols">
|
||||
<div class="symbol symbol-diode">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<path d="M10,20 L30,20 M20,10 L30,20 L20,30 Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="symbol symbol-transistor">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<circle cx="20" cy="20" r="15" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
<path d="M5,20 L15,20 M25,15 L35,10 M25,25 L35,30" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="symbol symbol-capacitor">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<path d="M10,20 L18,20 M22,20 L30,20 M18,10 L18,30 M22,10 L22,30" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elektrisches Feld (Partikel) -->
|
||||
<div class="electric-field">
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,8 +84,8 @@
|
|||
<div class="container1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="service-title fade-in">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="service-title">
|
||||
<h1 class="title-electric">{{ .Title }}</h1>
|
||||
</div>
|
||||
{{ with .Params.description }}
|
||||
<p class="page-title-desc">{{ . }}</p>
|
||||
|
|
@ -36,22 +96,447 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
/* Page Title spezifische Styles */
|
||||
.page-title{position:relative;padding:80px 0;background:#fff;overflow:hidden;}
|
||||
.container1{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;}
|
||||
.service-title h1{color:#046e6e;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;margin:0;}
|
||||
.page-title-desc{color:#666;font-size:1.25rem;margin:1rem auto 0;max-width:700px;}
|
||||
.fade-in{animation:fadeInUp 1s ease-out;}
|
||||
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
/* Variablen – werden von CTA-CSS verwendet */
|
||||
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
|
||||
|
||||
|
||||
/* Mobile: noch reduzierter */
|
||||
@media (max-width:768px){
|
||||
.page-title .energy-line-h3,
|
||||
.page-title .energy-line-v3,
|
||||
.page-title .energy-node5{display:none;}
|
||||
/* Page Title Base */
|
||||
.page-title {
|
||||
position: relative;
|
||||
padding: 100px 0 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
.container1 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Titel mit elektrischem Effekt */
|
||||
.title-electric {
|
||||
color: #046e6e;
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: powerOn 2s ease-out;
|
||||
text-shadow: 0 0 30px rgba(4, 110, 110, 0.1);
|
||||
}
|
||||
|
||||
.title-electric::before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
animation: electricGlitch 3s ease-in-out infinite;
|
||||
color: #F5A623;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
color: #666;
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem auto 0;
|
||||
max-width: 700px;
|
||||
animation: fadeInUp 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
/* Stromkreis-Animation */
|
||||
.circuit-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.circuit-main {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke: #046e6e;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation: drawCircuit 3s ease-out forwards;
|
||||
}
|
||||
|
||||
.circuit-path-2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.circuit-path-3 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.circuit-node {
|
||||
fill: #F5A623;
|
||||
opacity: 0;
|
||||
animation: nodeGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circuit-component {
|
||||
fill: #046e6e;
|
||||
opacity: 0;
|
||||
animation: componentFade 1s ease-out 2s forwards;
|
||||
}
|
||||
|
||||
/* Energie-Pulse */
|
||||
.energy-pulse {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #F5A623;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px #F5A623;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pulse-1 {
|
||||
animation: energyFlow1 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-2 {
|
||||
animation: energyFlow2 4s ease-in-out infinite 1.3s;
|
||||
}
|
||||
|
||||
.pulse-3 {
|
||||
animation: energyFlow3 4s ease-in-out infinite 2.6s;
|
||||
}
|
||||
|
||||
/* Blitz-Effekte */
|
||||
.lightning-effect {
|
||||
position: absolute;
|
||||
color: #F5A623;
|
||||
opacity: 0;
|
||||
animation: lightningStrike 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.lightning-1 {
|
||||
top: 10%;
|
||||
right: 15%;
|
||||
transform: scale(0.6) rotate(-15deg);
|
||||
}
|
||||
|
||||
.lightning-2 {
|
||||
bottom: 20%;
|
||||
left: 10%;
|
||||
transform: scale(0.4) rotate(25deg);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
/* Voltmeter */
|
||||
.voltmeter {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 5%;
|
||||
color: #046e6e;
|
||||
opacity: 0.3;
|
||||
animation: fadeIn 2s ease-out 1s forwards;
|
||||
}
|
||||
|
||||
.voltmeter-needle {
|
||||
transform-origin: 60px 60px;
|
||||
animation: voltmeterSwing 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Schaltkreis-Symbole */
|
||||
.circuit-symbols {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
position: absolute;
|
||||
color: #046e6e;
|
||||
opacity: 0;
|
||||
animation: symbolFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.symbol-diode {
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.symbol-transistor {
|
||||
bottom: 25%;
|
||||
right: 25%;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
.symbol-capacitor {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
/* Elektrisches Feld (Elektronen) */
|
||||
.electric-field {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.electron {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #F5A623;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: electronFlow 10s linear infinite;
|
||||
}
|
||||
|
||||
.electron:nth-child(1) { top: 20%; animation-delay: 0s; }
|
||||
.electron:nth-child(2) { top: 30%; animation-delay: 1.2s; }
|
||||
.electron:nth-child(3) { top: 40%; animation-delay: 2.4s; }
|
||||
.electron:nth-child(4) { top: 50%; animation-delay: 3.6s; }
|
||||
.electron:nth-child(5) { top: 60%; animation-delay: 4.8s; }
|
||||
.electron:nth-child(6) { top: 70%; animation-delay: 6s; }
|
||||
.electron:nth-child(7) { top: 80%; animation-delay: 7.2s; }
|
||||
.electron:nth-child(8) { top: 35%; animation-delay: 8.4s; }
|
||||
|
||||
/* Animationen */
|
||||
@keyframes powerOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
filter: blur(4px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
filter: blur(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes electricGlitch {
|
||||
0%, 90%, 100% { opacity: 0; }
|
||||
92% { opacity: 0.8; transform: translate(2px, -2px); }
|
||||
94% { opacity: 0.6; transform: translate(-1px, 1px); }
|
||||
96% { opacity: 0.8; transform: translate(1px, 0); }
|
||||
}
|
||||
|
||||
@keyframes drawCircuit {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodeGlow {
|
||||
0%, 100% { opacity: 0.3; r: 4; }
|
||||
50% { opacity: 1; r: 6; }
|
||||
}
|
||||
|
||||
@keyframes componentFade {
|
||||
to {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow1 {
|
||||
0% {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow2 {
|
||||
0% {
|
||||
left: 10%;
|
||||
top: 25%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 90%;
|
||||
top: 25%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow3 {
|
||||
0% {
|
||||
left: 20%;
|
||||
top: 75%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 80%;
|
||||
top: 75%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightningStrike {
|
||||
0%, 95%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6) rotate(-15deg);
|
||||
}
|
||||
96% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1) rotate(-15deg);
|
||||
}
|
||||
97% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8) rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voltmeterSwing {
|
||||
0%, 100% {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes symbolFloat {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes electronFlow {
|
||||
0% {
|
||||
left: -10px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.circuit-bg {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.voltmeter,
|
||||
.lightning-effect,
|
||||
.symbol-transistor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title-electric {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.title-electric {
|
||||
text-shadow: 0 0 40px rgba(245, 166, 35, 0.3);
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke: #F5A623;
|
||||
}
|
||||
|
||||
.circuit-bg {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.title-electric,
|
||||
.circuit-path,
|
||||
.energy-pulse,
|
||||
.electron,
|
||||
.symbol,
|
||||
.voltmeter-needle {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.circuit-node,
|
||||
.circuit-component {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue