markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SEO Optimierung + Leistungsscroll

Browse source
This commit is contained in:
astosic 2025-08-14 22:28:22 +02:00
parent 2ae734e906
commit e77017c70a
17 changed files with 259 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/scss/_typography.scss
View file

@ -31,7 +31,7 @@ h1 {
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #046e6e; color: black //#046e6e;
} }
h1.page-title { h1.page-title {
@ -42,16 +42,23 @@ h1.page-title {
h2 { h2 {
font-size: clamp(2.5rem, 5vw, 4rem); // ~32px auf Desktop
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: #046e6e;
}
h3 {
font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
margin-bottom: 5rem; // Erhöht den Abstand nach h2 margin-bottom: 5rem; // Erhöht den Abstand nach h2
color: #222; color:black;
} }
h4 {
h3 {
font-size: clamp(1.8rem, 1.8vw, 2rem); font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
@ -60,6 +67,7 @@ h3 {
color: #F5A623; color: #F5A623;
} }
p { p {
font-style: normal; font-style: normal;
font-size: clamp(1.5rem, 1.5vw, 1.8rem); font-size: clamp(1.5rem, 1.5vw, 1.8rem);

2
content/german/impressum.md
View file

@ -32,7 +32,7 @@ contents:
- | - |
FN 622219 d FN 622219 d
- | - |
Markus Wimmer BSc. & Ing. Alexander Stosic MSc. Markus Wimmer BSc. & Ing. Alexander Stosic, MSc
- | - |
-- Ingenieurbüros (Beratende Ingenieure) auf dem Fachgebiet Urbane Erneuerbare Energietechnologien -- Ingenieurbüros (Beratende Ingenieure) auf dem Fachgebiet Urbane Erneuerbare Energietechnologien
-- Elektrotechnik unter Ausschluss der Errichtung von Alarmanlagen -- Elektrotechnik unter Ausschluss der Errichtung von Alarmanlagen

6
content/german/karriere.md
View file

@ -7,10 +7,6 @@ og_image: "/images/karriere/karriere_hero.webp"
date: 2025-01-01 date: 2025-01-01
draft: false draft: false
menu:
main:
name: "Karriere"
weight: 50
hero: hero:
title: "Karriere bei AMPERION" title: "Karriere bei AMPERION"
@ -38,6 +34,6 @@ cta:
enable: true enable: true
cta_text: "Gestalte die Energiewende mit uns." cta_text: "Gestalte die Energiewende mit uns."
cta_label: "Jetzt bewerben" cta_label: "Jetzt bewerben"
cta_href: "/kontakt/" cta_href: "/contact/"
--- ---

30
layouts/_default/about.html
View file

@ -5,7 +5,7 @@
{{ with .Params.intro_section }} {{ with .Params.intro_section }}
{{ if .enable }} {{ if .enable }}
<section id="about-intro" class="section" style="background-color:#ffffff; margin-top:-24px; padding-top:16px;"> <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> <h3>Ihr Partner für nachhaltige Energielösungen</h3>
<div class="my-container"> <div class="my-container">
<div class="row align-items-center gx-5 gy-4"> <div class="row align-items-center gx-5 gy-4">
@ -77,8 +77,8 @@ document.addEventListener("DOMContentLoaded", () => {
<div> <div>
<!-- Headings --> <!-- Headings -->
<div class="text-center mb-3"> <div class="text-center mb-3">
<h1>Mission · Vision · Ziel</h1> <h2>Mission · Vision · Ziel</h2>
<h2>Die Grundpfeiler unserer Arbeit.</h2> <h3>Die Grundpfeiler unserer Arbeit.</h3>
</div> </div>
<div class="mission-tabs-wrapper"> <div class="mission-tabs-wrapper">
@ -127,8 +127,8 @@ document.addEventListener("DOMContentLoaded", () => {
<div class="my-container"> <div class="my-container">
<div class="row"> <div class="row">
<div class="text-center" data-aos="fade-up" data-aos-delay="50"> <div class="text-center" data-aos="fade-up" data-aos-delay="50">
<h1>Was uns auszeichnet</h1> <h2>Was uns auszeichnet</h2>
<h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2> <h3><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h3>
</div> </div>
</div> </div>
@ -143,7 +143,7 @@ document.addEventListener("DOMContentLoaded", () => {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);"> <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
<h3 class="service-card-title">Staatlich geprüft & konessioniert</h3> <h4 class="service-card-title">Staatlich geprüft & konessioniert</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit. <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
</p> </p>
@ -151,7 +151,7 @@ document.addEventListener("DOMContentLoaded", () => {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);"> <img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Erfahrung &amp; Innovation</h3> <h4 class="service-card-title">Erfahrung &amp; Innovation</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools. <strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
</p> </p>
@ -159,7 +159,7 @@ document.addEventListener("DOMContentLoaded", () => {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);"> <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Ganzheitlicher Ansatz</h3> <h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht. <strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
</p> </p>
@ -167,7 +167,7 @@ document.addEventListener("DOMContentLoaded", () => {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);"> <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Unabhängige Beratung</h3> <h4 class="service-card-title">Unabhängige Beratung</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt. <strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
</p> </p>
@ -186,7 +186,7 @@ document.addEventListener("DOMContentLoaded", () => {
<!-- Header --> <!-- Header -->
<div class="text-center mb-5" data-aos="fade-up"> <div class="text-center mb-5" data-aos="fade-up">
<h1>Das AMPERION Gründerteam</h1> <h2>Das AMPERION Gründerteam</h2>
<div class="row gx-5 gy-5 align-items-center"> <div class="row gx-5 gy-5 align-items-center">
@ -194,7 +194,7 @@ document.addEventListener("DOMContentLoaded", () => {
<div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100"> <div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
<div class="founder-card"> <div class="founder-card">
{{ with .left_person }} {{ with .left_person }}
<h4 class="founder-name">{{ .name | markdownify }}</h4> <h5 class="founder-name">{{ .name | markdownify }}</h5>
<div class="founder-description"> <div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }} {{ .description | $.Page.RenderString (dict "display" "block") }}
</div> </div>
@ -215,7 +215,7 @@ document.addEventListener("DOMContentLoaded", () => {
<div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300"> <div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
<div class="founder-card"> <div class="founder-card">
{{ with .right_person }} {{ with .right_person }}
<h4 class="founder-name">{{ .name | markdownify }}</h4> <h5 class="founder-name">{{ .name | markdownify }}</h5>
<div class="founder-description"> <div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }} {{ .description | $.Page.RenderString (dict "display" "block") }}
</div> </div>
@ -237,10 +237,10 @@ document.addEventListener("DOMContentLoaded", () => {
<div class="cta__bg" aria-hidden="true"> <div class="cta__bg" aria-hidden="true">
<div class="cta__grid"></div> <div class="cta__grid"></div>
<div class="cta__energy-lines"> <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-h energy-line-h2"></div>
<div class="energy-line-h energy-line-h3"></div> <div class="energy-line-h energy-line-h3"></div>
<div class="energy-line-h energy-line-h4"></div> <div class="energy-line-h energy-line-h4"></div>
<div class="energy-line-h energy-line-h5"></div>
<div class="energy-line-v energy-line-v1"></div> <div class="energy-line-v energy-line-v1"></div>
<div class="energy-line-v energy-line-v2"></div> <div class="energy-line-v energy-line-v2"></div>
<div class="energy-line-v energy-line-v3"></div> <div class="energy-line-v energy-line-v3"></div>
@ -258,9 +258,9 @@ document.addEventListener("DOMContentLoaded", () => {
<div class="my-container"> <div class="my-container">
<div class="cta__wrap"> <div class="cta__wrap">
<h2 class="cta__title"> <h3 class="cta__title">
Mehr Energie - Mit UNS! Mehr Energie - Mit UNS!
</h2> </h3>
<p class="cta__lead"> <p class="cta__lead">
Ihr Weg zu nachhaltiger Energie beginnt hier. Ihr Weg zu nachhaltiger Energie beginnt hier.
<span class="cta__accent">Lassen Sie uns starten!</span> <span class="cta__accent">Lassen Sie uns starten!</span>

37
layouts/_default/contact.html
View file

@ -12,16 +12,17 @@
(and $impressum $impressum.Params.email) (and $impressum $impressum.Params.email)
(or site.Params.contact.email site.Params.email) }} (or site.Params.contact.email site.Params.email) }}
{{/* phone1: deckt sowohl phone als auch phone1 ab (alt & neu) */}}
{{ $phone1 := or {{ $phone1 := or
(and $impressum $impressum.Params.telefon) (and $impressum $impressum.Params.telefon)
(or site.Params.contact.phone1 site.Params.phone1) }} (or site.Params.contact.phone site.Params.contact.phone1 site.Params.phone site.Params.phone1) }}
{{ $phone2 := or {{ $phone2 := or
(and $impressum $impressum.Params.telefon2) (and $impressum $impressum.Params.telefon2)
(or site.Params.contact.phone2 site.Params.phone2) }} (or site.Params.contact.phone2 site.Params.phone2) }}
<style> <style>
/* Nur Hilfsstyles – keine Typo-Overrides */ /* 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} .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} .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{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
@ -32,7 +33,7 @@
.info-item{display:flex;gap:.75rem;align-items:flex-start} .info-item{display:flex;gap:.75rem;align-items:flex-start}
.info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623} .info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}
/* CTA-Buttons & Socials: wir nutzen eure Klassen, nur Layout-Hooks */ /* CTA-Buttons & Socials: nutzt eure bestehenden Klassen – nur Layout-Hooks */
.cta__actions{display:flex;gap:.75rem;flex-wrap:wrap} .cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.cta__social{display:flex;justify-content:center;gap:14px;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)} .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)}
@ -51,12 +52,12 @@
.form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)} .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 */ .form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
.card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */ .card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */
</style> </style>
<section class="contact-wrap"> <section class="contact-wrap">
<div class="container"> <div class="container">
<div class="row g-4"> <div class="row g-4">
<!-- ===== Kontakt-Infos ===== --> <!-- ===== Kontakt-Infos ===== -->
<div class="col-lg-5" data-reveal> <div class="col-lg-5" data-reveal>
<div class="card card-pad stack-lg"> <div class="card card-pad stack-lg">
@ -111,9 +112,14 @@
method="POST" method="POST"
class="card card-pad stack" class="card card-pad stack"
{{ if .use_netlify }} {{ if .use_netlify }}
name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}" name="{{ $formName }}"
netlify
data-netlify="true"
netlify-honeypot="nhp"
action='{{ "/message_sent/" | relLangURL }}'
{{ else }} {{ else }}
name="contact" action="{{ .action | safeURL }}" name="contact"
action="{{ .action | safeURL }}"
{{ end }} {{ end }}
> >
{{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }} {{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}
@ -121,7 +127,7 @@
<div class="form-grid"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label for="name" class="visually-hidden">Name</label> <label for="name" class="visually-hidden">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Name" required> <input id="name" name="name" type="text" autocomplete="name" class="form-control" placeholder="Name" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email" class="visually-hidden">E-Mail</label> <label for="email" class="visually-hidden">E-Mail</label>
@ -129,11 +135,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="company" class="visually-hidden">Unternehmen</label> <label for="company" class="visually-hidden">Unternehmen</label>
<input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)"> <input id="company" name="company" type="text" autocomplete="organization" class="form-control" placeholder="Unternehmen (optional)">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone" class="visually-hidden">Telefon</label> <label for="phone" class="visually-hidden">Telefon</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Telefon (optional)"> <input id="phone" name="phone" type="tel" autocomplete="tel" class="form-control" placeholder="Telefon (optional)">
</div> </div>
<div class="form-group full"> <div class="form-group full">
<label for="subject" class="visually-hidden">Betreff</label> <label for="subject" class="visually-hidden">Betreff</label>
@ -153,19 +159,21 @@
{{ if .use_recaptcha }} {{ if .use_recaptcha }}
<input type="hidden" id="captchaResponse" name="g-recaptcha-response"> <input type="hidden" id="captchaResponse" name="g-recaptcha-response">
<div data-netlify-recaptcha="true"></div>
{{ end }} {{ end }}
</div> </div>
<p class="form-legal"> <p class="form-legal">
<input type="checkbox" required> <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) Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
</label>
</p> </p>
<div> <div>
<button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;"> <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> <span aria-hidden="true">➜</span><span>Nachricht senden</span>
</button> </button>
</div> </div>
</form> </form>
{{ end }}{{ end }} {{ end }}{{ end }}
@ -181,7 +189,12 @@
var els = document.querySelectorAll("[data-reveal]"); var els = document.querySelectorAll("[data-reveal]");
if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; } if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
var io = new IntersectionObserver(function(entries){ var io = new IntersectionObserver(function(entries){
entries.forEach(function(entry){ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); }}); entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.classList.add('is-visible');
io.unobserve(entry.target);
}
});
}, {threshold:.12}); }, {threshold:.12});
els.forEach(e=>io.observe(e)); els.forEach(e=>io.observe(e));
})(); })();

6
layouts/_default/datenschutz.html
View file

@ -19,10 +19,4 @@
</div> </div>
</section> </section>
<!-- Call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /Call to action -->
{{ end }} {{ end }}

6
layouts/_default/impressum.html
View file

@ -25,10 +25,4 @@
</div> </div>
</section> </section>
<!-- Call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /Call to action -->
{{ end }} {{ end }}

18
layouts/_default/karriere.html
View file

@ -39,13 +39,13 @@
<div class="container-wide"> <div class="container-wide">
<div class="row align-items-center gx-5 gy-4"> <div class="row align-items-center gx-5 gy-4">
<div class="col-lg-7" data-reveal> <div class="col-lg-7" data-reveal>
<h2> <h3>
{{ if $h }} {{ if $h }}
{{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }} {{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }}
{{ else }} {{ else }}
Karriere bei {{ .Site.Title }} Karriere bei {{ .Site.Title }}
{{ end }} {{ end }}
</h2> </h3>
{{ with $h }}{{ with .lead }} {{ with $h }}{{ with .lead }}
<div class="hero-lead">{{ . | markdownify }}</div> <div class="hero-lead">{{ . | markdownify }}</div>
{{ end }}{{ end }} {{ end }}{{ end }}
@ -66,7 +66,7 @@
{{ with .Params.values }} {{ with .Params.values }}
<section class="section band"> <section class="section band">
<div class="container-wide"> <div class="container-wide">
<h2 class="mb-3">Unsere Werte</h2> <h3 class="mb-3">Unsere Werte</h3>
<div class="row g-4"> <div class="row g-4">
{{ range $i, $v := . }} {{ range $i, $v := . }}
<div class="col-md-4" data-reveal> <div class="col-md-4" data-reveal>
@ -84,7 +84,7 @@
<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> <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 }} {{ end }}
</div> </div>
<h3 class="value-title">{{ $v.title }}</h3> <h4 class="value-title">{{ $v.title }}</h4>
<p class="value-text">{{ $v.text }}</p> <p class="value-text">{{ $v.text }}</p>
</article> </article>
</div> </div>
@ -97,7 +97,7 @@
<!-- ========= WAS WIR BIETEN ========= --> <!-- ========= WAS WIR BIETEN ========= -->
<section class="section"> <section class="section">
<div class="container-wide"> <div class="container-wide">
<h2 class="mb-3">Was wir bieten</h2> <h3 class="mb-3">Was wir bieten</h3>
<div class="row g-4"> <div class="row g-4">
<div class="col-md-6" data-reveal> <div class="col-md-6" data-reveal>
<ul class="val-list"> <ul class="val-list">
@ -131,8 +131,8 @@
<div class="cta__bg" aria-hidden="true"> <div class="cta__bg" aria-hidden="true">
<div class="cta__grid"></div> <div class="cta__grid"></div>
<div class="cta__energy-lines"> <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-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-v1"></div>
<div class="energy-line-v energy-line-v2"></div> <div class="energy-line-v energy-line-v2"></div>
<div class="energy-node energy-node1"></div> <div class="energy-node energy-node1"></div>
@ -144,16 +144,16 @@
<div class="my-container"> <div class="my-container">
<div class="cta__wrap" data-reveal> <div class="cta__wrap" data-reveal>
<h2 class="cta__title"> <h3 class="cta__title">
{{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }} {{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }}
</h2> </h3>
{{ with .Params.subtitle }}<p class="cta__lead">{{ . }}</p>{{ else }} {{ with .Params.subtitle }}<p class="cta__lead">{{ . }}</p>{{ else }}
<p class="cta__lead">Wir freuen uns über deine Initiativbewerbung!</p> <p class="cta__lead">Wir freuen uns über deine Initiativbewerbung!</p>
{{ end }} {{ end }}
<div class="cta__actions"> <div class="cta__actions">
{{ with .Params.cta_label }} {{ with .Params.cta_label }}
<a class="cta__btn" href="{{ ($.Params.cta_href | default "/kontakt/") | relURL }}"> <a class="cta__btn" href="{{ ($.Params.cta_href | default "/contact/") | relURL }}">
<span aria-hidden="true">⚡</span><span>{{ . }}</span> <span aria-hidden="true">⚡</span><span>{{ . }}</span>
</a> </a>
{{ end }} {{ end }}

200
layouts/_default/leistung.html
View file

@ -126,108 +126,136 @@
Quelle: .Params.features (array of {title, text, icon?}) Quelle: .Params.features (array of {title, text, icon?})
========================= --> ========================= -->
{{ with .Params.features }} {{ with .Params.features }}
<section class="service-ticker section" aria-label="Leistungen" style="background-color: #f8f9fa;"> <section class="section service-features" aria-label="Leistungen">
<style> <style>
.service-ticker{padding-top:24px;padding-bottom:24px} /* ===== Scroll-Snap Carousel – local styles ===== */
.service-ticker h2{margin:0 0 12px 0} .sf-wrap{--gap:16px;--card-w:86vw}
@media (min-width:640px){.sf-wrap{--card-w:68vw}}
.ticker-viewport{position:relative;overflow:hidden;background: #f8f9fa;} @media (min-width:992px){.sf-wrap{--card-w:420px}}
.ticker-viewport:before,.ticker-viewport:after{ .sf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:2 .sf-title-h{margin:0}
.sf-controls{display:flex;gap:8px}
.sf-btn{
appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;
width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:box-shadow .2s,transform .04s
} }
.ticker-viewport:before{left:0;background:linear-gradient(to right,#fff 40%,rgba(255,255,255,0))} .sf-btn:hover{box-shadow:0 10px 24px rgba(245,166,35,.25);background:#FDF7EC}
.ticker-viewport:after{right:0;background:linear-gradient(to left,#fff 40%,rgba(255,255,255,0))} .sf-btn:active{transform:translateY(1px)}
.sf-viewport{
.ticker-track{ overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
display:flex;gap:24px;align-items:center;width:max-content; border-radius:14px;scrollbar-width:thin
animation:marquee var(--dur,30s) linear infinite;
} }
.ticker-viewport:hover .ticker-track{animation-play-state:running} .sf-viewport:focus-visible{outline:2px dashed #F5A623;outline-offset:4px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sf-track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-w);gap:var(--gap);padding:2px 2px 10px}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}} .sf-card{
scroll-snap-align:start;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;
/* === Card-Ticks === */ box-shadow:0 6px 22px rgba(0,0,0,.06);padding:16px;display:flex;gap:14px;align-items:flex-start
.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{ .sf-ico{
color:#F5A623;background:rgba(245,166,35,.12); flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:12px; color:#F5A623;background:rgba(245,166,35,.12)
display:flex;align-items:center;justify-content:center;flex:0 0 44px
} }
.tick-icon svg{width:22px;height:22px;display:block} .sf-ico svg{width:22px;height:22px;display:block}
.sf-body{display:flex;flex-direction:column;gap:4px}
.tick-text{display:flex;flex-direction:column;gap:2px;white-space:normal} .sf-card h3{margin:0;font-weight:700;line-height:1.3}
.tick-title{font-weight:700;font-size:inherit;line-height:1.3;margin:0} .sf-card p{margin:0;opacity:.9}
.tick-desc{margin:0;opacity:.88} /* dezente Scrollbar */
.sf-viewport::-webkit-scrollbar{height:8px}
.sf-viewport::-webkit-scrollbar-track{background:transparent}
.sf-viewport::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:8px}
/* Drag cursor */
.sf-viewport.is-drag{cursor:grabbing;cursor:-webkit-grabbing}
</style> </style>
<div class="container-wide"> <div class="container-wide">
<h2 class data-reveal>Leistungen</h2> <div class="sf-wrap">
</div> <div class="sf-head">
<h2 class="h3 sf-title-h">Leistungen</h2>
<div class="sf-controls" aria-label="Carousel-Steuerung">
<button class="sf-btn" data-dir="-1" type="button" aria-label="Zurück">‹</button>
<button class="sf-btn" data-dir="1" type="button" aria-label="Weiter">›</button>
</div>
</div>
<div class="ticker-viewport"> {{/* Daten vorbereiten */}}
<div class="ticker-track" style="--dur: {{ mul (len .) 15 }}s">
{{ $list := . }} {{ $list := . }}
{{ $total := len $list }}
{{/* ===== 1. Durchlauf ===== */}} <div class="sf-viewport" id="sf-viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Leistungen Carousel">
{{ range $i, $f := $list }} <div class="sf-track" id="sf-track">
<div class="tick"> {{ range $i, $f := $list }}
<span class="tick-icon" aria-hidden="true"> <article class="sf-card" role="group" aria-roledescription="slide" aria-label='{{ printf "%d von %d" (add $i 1) $total }}'>
{{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }} <div class="sf-ico" aria-hidden="true">
{{ if or (eq $icon "pv") (eq $icon "i-0") }} {{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
<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> {{ if or (eq $icon "pv") (eq $icon "i-0") }}
{{ else if or (eq $icon "speicher") (eq $icon "i-1") }} <!-- PV -->
<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> <svg viewBox="0 0 24 24"><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 "lade") (eq $icon "i-2") }} {{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
<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> <!-- Battery -->
{{ else if or (eq $icon "study") (eq $icon "i-3") }} <svg viewBox="0 0 24 24"><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>
<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 if or (eq $icon "lade") (eq $icon "i-2") }}
{{ else }} <!-- EV -->
<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> <svg viewBox="0 0 24 24"><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") }}
<!-- Study -->
<svg viewBox="0 0 24 24"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
{{ else }}
<!-- Doc/Check -->
<svg viewBox="0 0 24 24"><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" stroke-linecap="round"/></svg>
{{ end }}
</div>
<div class="sf-body">
<h3 class="h5">{{ $f.title }}</h3>
{{ with $f.text }}<p>{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
</div>
</article>
{{ end }} {{ 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> </div>
{{ end }}
{{/* ===== 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>
</div> </div>
<script>
(function(){
var wrap = document.querySelector('.service-features .sf-wrap');
if(!wrap) return;
var viewport = wrap.querySelector('.sf-viewport');
var track = wrap.querySelector('.sf-track');
var btns = wrap.querySelectorAll('.sf-btn');
function cardStep(){
var gap = parseFloat(getComputedStyle(track).gap) || 16;
var card = track.querySelector('.sf-card');
return card ? card.getBoundingClientRect().width + gap : 320;
}
btns.forEach(function(b){
b.addEventListener('click', function(){
var dir = this.getAttribute('data-dir') === '1' ? 1 : -1;
viewport.scrollBy({left: cardStep() * dir, behavior: 'smooth'});
});
});
// Keyboard navigation
viewport.addEventListener('keydown', function(e){
if(e.key === 'ArrowRight'){ viewport.scrollBy({left: cardStep(), behavior:'smooth'}); }
if(e.key === 'ArrowLeft'){ viewport.scrollBy({left:-cardStep(), behavior:'smooth'}); }
});
// Drag to scroll (desktop)
var down=false, startX=0, sl=0;
viewport.addEventListener('mousedown', function(e){ down=true; viewport.classList.add('is-drag'); startX=e.pageX; sl=viewport.scrollLeft; });
window.addEventListener('mouseup', function(){ down=false; viewport.classList.remove('is-drag'); });
viewport.addEventListener('mousemove', function(e){ if(!down) return; e.preventDefault(); viewport.scrollLeft = sl - (e.pageX - startX); });
})();
</script>
</section> </section>
{{ end }} {{ end }}
<!-- ========================= <!-- =========================
OUTCOMES (Nutzen/Ergebnisse) OUTCOMES (Nutzen/Ergebnisse)
Quelle: .Params.outcomes (array of strings) Quelle: .Params.outcomes (array of strings)
@ -248,7 +276,7 @@
<!-- Text links --> <!-- Text links -->
<div class="col-lg-6" data-reveal> <div class="col-lg-6" data-reveal>
<h2 class="mb-3">Ergebnis & Mehrwert</h2> <h3 class="mb-3">Ergebnis & Mehrwert</h3>
<ul class="checklist"> <ul class="checklist">
{{ range . }} {{ range . }}
<li data-reveal> <li data-reveal>
@ -297,8 +325,8 @@
<div class="cta__bg" aria-hidden="true"> <div class="cta__bg" aria-hidden="true">
<div class="cta__grid"></div> <div class="cta__grid"></div>
<div class="cta__energy-lines"> <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-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-v1"></div>
<div class="energy-line-v energy-line-v2"></div> <div class="energy-line-v energy-line-v2"></div>
<div class="energy-node energy-node1"></div> <div class="energy-node energy-node1"></div>
@ -311,9 +339,9 @@
<!-- Inhalt: jetzt dynamisch aus Front-Matter --> <!-- Inhalt: jetzt dynamisch aus Front-Matter -->
<div class="my-container"> <div class="my-container">
<div class="cta__wrap" data-reveal> <div class="cta__wrap" data-reveal>
<h2 class="cta__title"> <h3 class="cta__title">
{{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }} {{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
</h2> </h3>
{{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}} {{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}}
{{ with .Params.subtitle }} {{ with .Params.subtitle }}

8
layouts/_default/render-image.html Normal file
View file

@ -0,0 +1,8 @@
{{- $alt := .Text | default .Title | default "AMPERION" -}}
<img src="{{ .Destination | safeURL }}"
alt="{{ $alt }}"
loading="lazy"
decoding="async"
{{ with .PlainWidth }}width="{{ . }}"{{ end }}
{{ with .PlainHeight }}height="{{ . }}"{{ end }}>
{{- if .Title }}<figcaption>{{ .Title }}</figcaption>{{ end -}}

28
layouts/index.html
View file

@ -21,7 +21,7 @@
<!-- Haupttitel + Button --> <!-- Haupttitel + Button -->
<div class="hero-section" style="margin-top: 10rem;"> <div class="hero-section" style="margin-top: 10rem;">
{{ with .title }} {{ with .title }}
<h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1> <h2 class="hero-title fade-in-title">{{ . | markdownify }}</h2>
{{ end }} {{ end }}
{{ with .button }} {{ with .button }}
{{ if .enable }} {{ if .enable }}
@ -148,8 +148,8 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- Titelblock --> <!-- Titelblock -->
<div class="row"> <div class="row">
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> <div class="text-center" data-aos="fade-up" data-aos-delay="100">
<h1>Darum AMPERION</h1> <h2>Darum AMPERION</h2>
<h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2> <h3><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h3>
</div> </div>
</div> </div>
@ -160,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3"> <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
<h3 class="service-card-title">Technische Planungskompetenz</h3> <h4 class="service-card-title">Technische Planungskompetenz</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher. <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
</p> </p>
@ -168,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3"> <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
<h3 class="service-card-title">Intelligente Energiesysteme</h3> <h4 class="service-card-title">Intelligente Energiesysteme</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit. <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
</p> </p>
@ -176,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3"> <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Persönliche Betreuung</h3> <h4 class="service-card-title">Persönliche Betreuung</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss. <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
</p> </p>
@ -184,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3"> <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Reibungslose Projektabwicklung</h3> <h4 class="service-card-title">Reibungslose Projektabwicklung</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung. <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
</p> </p>
@ -192,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3"> <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
<h3 class="service-card-title">Vernetzte Energiezukunft</h3> <h4 class="service-card-title">Vernetzte Energiezukunft</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant. <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
</p> </p>
@ -200,7 +200,7 @@ document.addEventListener('DOMContentLoaded', function () {
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3"> <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
<h3 class="service-card-title">Präzise Systemplanung</h3> <h4 class="service-card-title">Präzise Systemplanung</h4>
<p class="service-card-description"> <p class="service-card-description">
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform. <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
</p> </p>
@ -250,8 +250,8 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- Titelbereich --> <!-- Titelbereich -->
<div class="row"> <div class="row">
<div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100"> <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
<h1>Über AMPERION</h1> <h2>Über AMPERION</h2>
{{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }} {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
</div> </div>
</div> </div>
@ -296,8 +296,8 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- Energie-Linien --> <!-- Energie-Linien -->
<div class="cta__energy-lines"> <div class="cta__energy-lines">
<!-- Horizontale Linien --> <!-- Horizontale Linien -->
<div class="energy-line-h energy-line-h1"></div>
<div class="energy-line-h energy-line-h2"></div> <div class="energy-line-h energy-line-h2"></div>
<div class="energy-line-h energy-line-h3"></div>
<!-- Vertikale Linien --> <!-- Vertikale Linien -->
@ -319,9 +319,9 @@ document.addEventListener('DOMContentLoaded', function () {
<!-- Content --> <!-- Content -->
<div class="my-container"> <div class="my-container">
<div class="cta__wrap"> <div class="cta__wrap">
<h2 class="cta__title"> <h3 class="cta__title">
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen. Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
</h2> </h3>
<p class="cta__lead"> <p class="cta__lead">
Bereit für Ihr Energieprojekt? Bereit für Ihr Energieprojekt?
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span> <span class="cta__accent">Kostenfreie Erstberatung sichern!</span>

2
layouts/partials/head.html
View file

@ -1,3 +1,5 @@
{{ partial "seo.html" . }}
<meta charset="utf-8"> <meta charset="utf-8">
<title>{{.Title | default site.Title}}</title> <title>{{.Title | default site.Title}}</title>

2
layouts/partials/page-title.html
View file

@ -85,7 +85,7 @@
<div class="row"> <div class="row">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<div class="service-title"> <div class="service-title">
<h1 class="title-electric">{{ .Title }}</h1> <h2 class="title-electric">{{ .Title }}</h2>
</div> </div>
{{ with .Params.description }} {{ with .Params.description }}
<p class="page-title-desc">{{ . }}</p> <p class="page-title-desc">{{ . }}</p>

6
layouts/partials/section-grid.html
View file

@ -2,8 +2,8 @@
{{ with .Params.service }} {{ with .Params.service }}
<div class="my-container"> <div class="my-container">
<div class="section-title text-center"> <div class="section-title text-center">
<h1 data-aos="fade-up">{{ .title | markdownify }}</h1> <h2 data-aos="fade-up">{{ .title | markdownify }}</h2>
<h2 data-aos="fade-up">{{ .description | markdownify }}</h2> <h3 data-aos="fade-up">{{ .description | markdownify }}</h3>
</div> </div>
<div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up"> <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
@ -19,7 +19,7 @@
{{ else }} {{ else }}
<div class="info-card"> <div class="info-card">
<i class="{{ .icon }}" aria-hidden="true"></i> <i class="{{ .icon }}" aria-hidden="true"></i>
<h3>{{ .name | markdownify }}</h3> <h4>{{ .name | markdownify }}</h4>
<p>{{ .content | markdownify }}</p> <p>{{ .content | markdownify }}</p>
</div> </div>
{{ end }} {{ end }}

39
layouts/partials/seo.html Normal file
View file

@ -0,0 +1,39 @@
{{- /* layouts/partials/seo.html */ -}}
{{- $siteTitle := site.Title -}}
{{- $sep := " | " -}}
<title>
{{- if .IsHome -}}
AMPERION – Ingenieurbüro & Elektrotechnikbetrieb für Photovoltaik, Speicher & Ladeinfrastruktur
{{- else -}}
{{- .Title }}{{ $sep }}AMPERION – Photovoltaik, Energiespeicher, Ladeinfrastruktur
{{- end -}}
</title>
{{- $desc := cond (isset .Params "description") .Params.description
"AMPERION ist Ihr staatlich geprüftes Ingenieurbüro & Elektrotechnikbetrieb: Planung, Projektmanagement & Consulting für Photovoltaik, Energiespeicher und Ladeinfrastruktur – von der Idee bis zur Inbetriebnahme." -}}
<meta name="description" content="{{ $desc }}">
<link rel="canonical" href="{{ .Permalink }}">
{{- with .AlternativeOutputFormats }}{{ end -}}
{{- /* hreflang (de/en) */ -}}
{{- range .AllTranslations -}}
<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
{{- end -}}
<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}">
<meta name="robots" content="index,follow">
<!-- Open Graph -->
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
<meta property="og:title" content="{{ if .IsHome }}AMPERION – Ingenieurbüro & Elektrotechnik{{ else }}{{ .Title }}{{ end }}">
<meta property="og:description" content="{{ $desc }}">
<meta property="og:url" content="{{ .Permalink }}">
{{- $ogimg := (resources.Get "images/og-default.jpg") | default (resources.Get "images/logo.png") -}}
{{- with $ogimg -}}{{ $p := .Fit "1200x630" }}<meta property="og:image" content="{{ $p.RelPermalink }}">{{ end -}}
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ if .IsHome }}AMPERION – Ingenieurbüro & Elektrotechnik{{ else }}{{ .Title }}{{ end }}">
<meta name="twitter:description" content="{{ $desc }}">

13
resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
View file

@ -22,7 +22,7 @@ h1 {
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #046e6e; } color: black; }
h1.page-title { h1.page-title {
font-size: clamp(2.5rem, 6vw, 4rem); font-size: clamp(2.5rem, 6vw, 4rem);
@ -30,14 +30,21 @@ h1.page-title {
text-transform: capitalize; } text-transform: capitalize; }
h2 { h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: #046e6e; }
h3 {
font-size: clamp(2rem, 3vw, 2.5rem); font-size: clamp(2rem, 3vw, 2.5rem);
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
margin-bottom: 5rem; margin-bottom: 5rem;
color: #222; } color: black; }
h3 { h4 {
font-size: clamp(1.8rem, 1.8vw, 2rem); font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;

5
static/robots.txt Normal file
View file

@ -0,0 +1,5 @@
User-agent: *
Disallow:
Sitemap: https://www.amperion.at/sitemap.xml
Sitemap: https://www.amperion.at/en/sitemap.xml