Commit12082000
This commit is contained in:
parent
b6fe872a80
commit
0962f9325b
30 changed files with 1536 additions and 862 deletions
|
|
@ -730,13 +730,14 @@ body {
|
|||
--cta-accent: #F5A623; /* Orange */
|
||||
|
||||
/* Button-Preset (hier zentral Größe steuern) */
|
||||
--btn-py: clamp(1.8rem, 2.8vw, 2.5rem); /* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem); /* Schriftgröße */
|
||||
/* ÄNDERUNG: deutlich kleinere Buttons (Höhe, Breite, Schrift) */
|
||||
--btn-py: clamp(1rem, 1.2vw, 1.5rem); /* vorher 1.8–2.5rem -> jetzt kompakter */
|
||||
--btn-px: clamp(1rem, 1.6vw, 1.5rem); /* vorher 1.8–2.5rem -> schmaler */
|
||||
--btn-fs: clamp(1.5rem, 1.15vw, 1.5rem);/* vorher 1.8–2.5rem -> p-nahe Größe */
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0; /* belassen; nur Buttons werden kleiner */
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
|
|
@ -750,26 +751,6 @@ body {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtiles Grid */
|
||||
.cta__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent; /* Explizit transparent */
|
||||
background-image:
|
||||
linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Energie-Linien Container */
|
||||
.cta__energy-lines {
|
||||
position: absolute;
|
||||
|
|
@ -786,8 +767,8 @@ body {
|
|||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
var(--cta-accent) 10%,
|
||||
var(--cta-accent) 90%,
|
||||
transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite;
|
||||
|
|
@ -800,8 +781,8 @@ body {
|
|||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -812,20 +793,10 @@ body {
|
|||
}
|
||||
|
||||
@keyframes energyFlowH {
|
||||
0% {
|
||||
left: -200px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
0% { left: -200px; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* Vertikale Energie-Linie */
|
||||
|
|
@ -834,8 +805,8 @@ body {
|
|||
width: 1px;
|
||||
background: linear-gradient(180deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
var(--cta-accent) 10%,
|
||||
var(--cta-accent) 90%,
|
||||
transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite;
|
||||
|
|
@ -848,8 +819,8 @@ body {
|
|||
transform: translateX(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -860,20 +831,10 @@ body {
|
|||
}
|
||||
|
||||
@keyframes energyFlowV {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
0% { top: -150px; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* Energie-Knoten (Kreuzungspunkte) */
|
||||
|
|
@ -881,9 +842,9 @@ body {
|
|||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-accent);
|
||||
animation: nodePulse 2s ease-in-out infinite;
|
||||
|
||||
&.energy-node1 { top: 20%; left: 15%; animation-delay: 0s; }
|
||||
|
|
@ -895,25 +856,27 @@ body {
|
|||
}
|
||||
|
||||
@keyframes nodePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||||
50% { transform: scale(1.5); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== CONTENT STYLES ===== */
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
/* NEU: zentral breiter Container für diese Section
|
||||
-> mehr Zeilenbreite, damit die H1 ab Desktop in 1 Zeile bleibt */
|
||||
width: 100%;
|
||||
max-width: 1360px; /* vorher kein Limit hier – jetzt groß/“breit in der Mitte“ */
|
||||
margin-inline: auto; /* zentriert */
|
||||
padding-inline: clamp(16px, 3vw, 24px); /* etwas Innenabstand links/rechts */
|
||||
}
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
/* ÄNDERUNG: mehr Inhaltsbreite, H1 bekommt mehr Platz */
|
||||
max-width: 90rem; /* vorher 72rem */
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
|
@ -924,15 +887,20 @@ body {
|
|||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
position: center;
|
||||
z-index: 2;
|
||||
|
||||
/* NEU: ab Desktop nicht umbrechen -> bleibt einzeilig, wenn Platz da ist */
|
||||
@media (min-width: 1200px) {
|
||||
white-space: nowrap; /* einzeilig erzwingen */
|
||||
}
|
||||
}
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
line-height: 1.55;
|
||||
/* optional etwas breiter, wenn du willst – hier schon groß genug */
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
|
@ -945,7 +913,7 @@ body {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
/* Buttons */
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -960,7 +928,7 @@ body {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
padding: var(--btn-py) var(--btn-px); /* nutzt die kleineren Presets oben */
|
||||
border-radius: 9999px;
|
||||
background: #fff;
|
||||
color: var(--cta-primary);
|
||||
|
|
@ -968,7 +936,7 @@ body {
|
|||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
font-size: var(--btn-fs); /* nutzt die kleinere Schrift */
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -998,9 +966,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active { transform: translateY(1px); }
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
|
|
@ -1051,19 +1017,12 @@ body {
|
|||
box-shadow: 0 6px 16px rgba(4,110,110,.25);
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&::before { width: 100%; height: 100%; }
|
||||
|
||||
img { filter: invert(1); }
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active { transform: translateY(1px); }
|
||||
|
||||
img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
|
|
@ -1089,6 +1048,7 @@ body {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px; /* statt 90px */
|
||||
|
|
@ -1107,20 +1067,20 @@ body {
|
|||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* About-Intro: Video */
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 12px; // Weiche Kanten
|
||||
border-radius: 12px; /* Weiche Kanten */
|
||||
}
|
||||
|
||||
.intro-media {
|
||||
overflow: hidden; // sorgt dafür, dass der Radius auch das Video schneidet
|
||||
border-radius: 12px;
|
||||
}
|
||||
overflow: hidden; /* sorgt dafür, dass der Radius auch das Video schneidet */
|
||||
border-radius: 12px; /* gleicher Radius wie Video */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ image = "images/logo.webp" # this image will be used as fallback if a page has n
|
|||
# Whether to display text descriptors (like "E-mail: ", "Phone: ") before the address block elements
|
||||
address_descriptors = false
|
||||
# contact info
|
||||
phone = """+43 677 62090425 <br>
|
||||
+43 677 62090426"""
|
||||
phone1 = """+43 677 62090425"""
|
||||
phone2 = """+43 677 62090426"""
|
||||
email = "office@amperion.at"
|
||||
location = """
|
||||
**AMPERION GmbH**
|
||||
|
|
@ -35,9 +35,9 @@ custom_script= ""
|
|||
[contact.form]
|
||||
enable = true
|
||||
# Whether to use [Netlify Forms](https://docs.netlify.com/forms/setup/)
|
||||
use_netlify = false
|
||||
use_netlify = true
|
||||
# Whether to use recaptch v3 in form
|
||||
use_recaptcha = true
|
||||
use_recaptcha = false
|
||||
# Form action
|
||||
## Fill in your Form ID URL for Formspree.io, e.g. `https://formspree.io/f/{form_id}`
|
||||
## Ignored if `use_netlify = true` (custom [success page](https://docs.netlify.com/forms/setup/#success-messages) is already included)
|
||||
|
|
@ -87,14 +87,16 @@ sidebar = ["recent_posts", "taxonomy_category", "taxonomy_tags"]
|
|||
#[[social]]
|
||||
#title = "facebook"
|
||||
#image = "images/social/facebook.webp"
|
||||
#link = "#"
|
||||
#link = "https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr"
|
||||
|
||||
[[social]]
|
||||
title = "instagram"
|
||||
image = "images/social/instagram.webp"
|
||||
link = "https://www.instagram.com/amperion_official"
|
||||
link = "https://www.instagram.com/amperion.at/"
|
||||
|
||||
[[social]]
|
||||
title = "linkedin"
|
||||
image = "images/social/linkedin.webp"
|
||||
link = "https://www.linkedin.com/company/101907682"
|
||||
link = "https://www.linkedin.com/company/amperion-gmbh/"
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,44 @@
|
|||
---
|
||||
title: "E-Mobilität"
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
slug: "emobilitaet"
|
||||
layout: "leistung"
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["E-Mobilität", "Ladeinfrastruktur", "AC/DC", "Lastmanagement", "Backend", "Abrechnung", "EMS"]
|
||||
categories: ["Fokusthemen"]
|
||||
|
||||
meta_description: "Ladeinfrastruktur: AC/DC-Planung, Netzanschluss, Lastmanagement, Abrechnung – skalierbar & zukunftssicher."
|
||||
kicker: "Fokusthema"
|
||||
subtitle: "Ladeinfrastruktur, die heute funktioniert und morgen skaliert."
|
||||
hero_cta_label: "Jetzt starten"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns Ladeinfrastruktur umsetzen"
|
||||
usp:
|
||||
- "Netzanschlusskompetenz inklusive Mittelspannung & Trafokonzepte"
|
||||
- "Dynamisches Lastmanagement: PV-Überschuss, Priorisierung, Fair-Share"
|
||||
- "Betrieb & Abrechnung: Backend-Auswahl, RFID/App, Roaming"
|
||||
|
||||
features:
|
||||
- title: "Standort- & Netzprüfung"
|
||||
text: "Leitungswege, Trafokapazität, Zähler → machbare & skalierbare Standorte."
|
||||
icon: "study"
|
||||
- title: "AC/DC-Konzept & Auslegung"
|
||||
text: "Ladeleistungen, Nutzerprofile, Parklogik → hohe Auslastung & Nutzerzufriedenheit."
|
||||
icon: "lade"
|
||||
- title: "Integration & Betrieb"
|
||||
text: "EMS-Kopplung, Monitoring, Störfallkonzepte → weniger Ausfälle, planbare OPEX."
|
||||
icon: "doc"
|
||||
|
||||
outcomes:
|
||||
- "Investitions- & Betriebssicherheit (Netz, Technik, Abrechnung)"
|
||||
- "Hohe Verfügbarkeit & gute User Experience"
|
||||
- "Skalierbar für wachsende Flotten/Standorte"
|
||||
|
||||
cta_text: "Ihr Ladeprojekt verdient eine durchdachte Planung."
|
||||
cta_label: "Jetzt starten"
|
||||
cta_href: "/contact"
|
||||
---
|
||||
|
||||
## Ladeinfrastruktur effizient planen
|
||||
|
||||
E-Mobilität ist mehr als nur Ladestationen. Wir helfen Ihnen, technische, wirtschaftliche und regulatorische Anforderungen in Einklang zu bringen – für zukunftssichere Mobilitätslösungen.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Standortanalyse & Netzanschlussplanung
|
||||
- Auswahl geeigneter Ladesysteme & Hersteller
|
||||
- Unterstützung bei MS-/NS-Zuleitungen
|
||||
- Integration in bestehende Energiekonzepte
|
||||
- Begleitung bei Behördenverfahren & Förderungen
|
||||
|
||||
**Warum AMPERION?** Weil wir Elektrotechnik und Mobilität ganzheitlich denken.
|
||||
## Von der Akquise zum Netzanschluss bis in den Betrieb: alles aus einem Guss.
|
||||
Wir planen **AC- und DC-Ladeinfrastruktur** vom Netzanschluss (NS/MS) bis zum Backend – mit **dynamischem Lastmanagement**, geeignetem **Mess-/Abrechnungskonzept** und **zukunftssicherer Skalierung**.
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -1,20 +1,44 @@
|
|||
---
|
||||
title: "Energiespeicher"
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
title: "Energiespeicherlösungen"
|
||||
slug: "energiespeicher"
|
||||
layout: "leistung"
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["Speicher", "Batteriespeicher", "Peak-Shaving", "Eigenverbrauch", "EMS", "Notstrom", "Redox-Flow"]
|
||||
categories: ["Fokusthemen"]
|
||||
|
||||
meta_description: "Stromspeicher für Unternehmen: technologieoffen dimensioniert, wirtschaftlich begründet, sicher integriert – mit EMS & Notstrom."
|
||||
kicker: "Fokusthema"
|
||||
subtitle: "Lastspitzen kappen, Kosten senken – sicher ins EMS eingebunden."
|
||||
hero_cta_label: "Speicherlösung planen"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns Speicher planen"
|
||||
usp:
|
||||
- "Technologieoffen & unabhängig – Auswahl nach Lebenszykluskosten"
|
||||
- "Dimensionierung nach Lastprofil: C-Rate, Zyklen, Degradation im Blick"
|
||||
- "Saubere Integration: EMS, Schutzkonzepte, Notstrom/USV"
|
||||
|
||||
features:
|
||||
- title: "Use-Case-Analyse"
|
||||
text: "Peak-Shaving, Eigenverbrauch, Backup, Arbitrage → klarer Nutzen je Anwendung."
|
||||
icon: "study"
|
||||
- title: "Wirtschaftlichkeit & Auslegung"
|
||||
text: "Kapazität/Leistung, Zyklen, LCOE → investitionssichere Größe."
|
||||
icon: "doc"
|
||||
- title: "Integration & Betrieb"
|
||||
text: "EMS/Lastmanagement, Schnittstellen, Safety → stabiler, sicherer Betrieb."
|
||||
icon: "speicher"
|
||||
|
||||
outcomes:
|
||||
- "Reduktion von Leistungsspitzen & Netzentgelten"
|
||||
- "Höherer Eigenverbrauch & Versorgungssicherheit"
|
||||
- "Skalierbarkeit für zukünftige Lasten (z. B. Ladeparks)"
|
||||
|
||||
cta_text: "Nutzen Sie Ihren Strom dann, wenn Sie ihn brauchen."
|
||||
cta_label: "Speicherlösung planen"
|
||||
cta_href: "/contact"
|
||||
---
|
||||
|
||||
## Energie speichern, wenn sie verfügbar ist
|
||||
|
||||
Energiespeicher ermöglichen maximale Eigenverbrauchsquote und höhere Netzunabhängigkeit. Ob Lithium-Ionen-Speicher oder Redox-Flow-Technologien – wir beraten Sie technologieoffen und unabhängig.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Systemauslegung & Integration in bestehende Anlagen
|
||||
- Wirtschaftlichkeitsrechnungen & ROI-Analysen
|
||||
- Dimensionierung & Regelstrategien
|
||||
- Unterstützung bei Förderungen & Ausschreibungen
|
||||
- Konzepte für Notstrom- & Inselbetrieb
|
||||
|
||||
**Ziel:** Volle Kontrolle über Ihren Energiehaushalt – heute und in Zukunft.
|
||||
## Speicher die Unabhängigkeit schaffen
|
||||
Speicher erhöhen **Unabhängigkeit und Resilienz**. Wir dimensionieren technologieoffen (z. B. **Lithium, Redox-Flow, uvm.**) entlang Ihres **Lastgangs** und integrieren Speicher in PV, Ladeinfrastruktur und Energiemanagement.
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -1,20 +1,49 @@
|
|||
---
|
||||
title: "Photovoltaik"
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
slug: "photovoltaik"
|
||||
layout: "leistung"
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["Photovoltaik", "PV Planung", "Wirtschaftlichkeitsberechnung", "Netzintegration", "Eigenverbrauch", "EMS", "Ladeinfrastruktur"]
|
||||
categories: ["Fokusthemen"]
|
||||
meta_description: "PV für Unternehmen & Gemeinden: wirtschaftlich, sicher, integriert. PV mit Speicher & Ladeinfrastruktur – aus einer Hand."
|
||||
kicker: "Fokusthema"
|
||||
subtitle: "Präzise geplant – maximaler Eigenverbrauch, stabile Erträge."
|
||||
hero_cta_label: "Projekt starten"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns PV umsetzen"
|
||||
usp:
|
||||
- "Exakte Verschattungs- & Layoutplanung statt Montage nach Gefühl"
|
||||
- "Wirtschaftlichkeitsfokus: LCOE, Eigenverbrauchsquote, Tarife"
|
||||
- "Systemdenken: PV, Speicher, Laden, Netz – als Einheit geplant"
|
||||
|
||||
features:
|
||||
- title: "Planung & Dimensionierung"
|
||||
text: "Stringdesign, Wechselrichterwahl, Brandschutz-/Selektivitätskonzept → sichere, performante Anlage."
|
||||
icon: "pv"
|
||||
- title: "Wirtschaftlichkeitsberechnung"
|
||||
text: "Szenarien, Strompreisannahmen, Sensitivitäten → realistische Payback-Modelle."
|
||||
icon: "study"
|
||||
- title: "Netzintegration & Messkonzept"
|
||||
text: "Netzzutritt, Zählpunkte, Blindleistung → störungsarmer Betrieb."
|
||||
icon: "doc"
|
||||
- title: "Gewerbliche & kommunale Anwendungen"
|
||||
text: "Dach/Freifläche, Carports, Fassaden → skalierbar & zweckmäßig."
|
||||
icon: "doc"
|
||||
- title: "Kombination mit Speicher & Laden"
|
||||
text: "Lastmanagement, PV-Überschussladen → höhere Autarkie."
|
||||
icon: "speicher"
|
||||
|
||||
outcomes:
|
||||
- "Plan-zu-Ist-Erträge, weniger Performance-Lücken"
|
||||
- "Senkung der Energiekosten & CO₂-Bilanz"
|
||||
- "Zukunftssichere Erweiterbarkeit (Speicher/Ladeinfra)"
|
||||
|
||||
cta_text: "Ihre solare Unabhängigkeit beginnt hier."
|
||||
cta_label: "Projekt starten"
|
||||
cta_href: "/contact/"
|
||||
---
|
||||
|
||||
## Effizient zur Sonnenenergie
|
||||
|
||||
Die Nutzung von Solarenergie ist ein zentraler Bestandteil der Energiewende. Wir unterstützen Sie bei der Planung, Dimensionierung und Umsetzung Ihrer Photovoltaikanlage – von der Dachanalyse über die Netzanfrage bis hin zur fertigen Anlage.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Technische & wirtschaftliche Machbarkeitsanalysen
|
||||
- Ertrags- & Verschattungsberechnungen
|
||||
- Unterstützung bei Netzanschluss & Förderungen
|
||||
- Begleitung bei Ausschreibungen & Vergabe
|
||||
- Lastprofiloptimierung & Energiemonitoring
|
||||
|
||||
**Ihr Vorteil:** Maßgeschneiderte Lösungen, die langfristig Energie und Kosten sparen.
|
||||
## Vom Standort zur Rendite – normgerecht geplant und ausgeführt
|
||||
Photovoltaik ist mehr als Strom vom Dach: Wir planen **integrierte Systeme**, optimiert auf **Eigenverbrauch, Wirtschaftlichkeit und Netzdienlichkeit** – abgestimmt auf Speicher & Ladeinfrastruktur.
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -2,65 +2,51 @@
|
|||
title: "Consulting"
|
||||
slug: "consulting"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["Consulting", "Energieberatung", "Energiekonzept", "Förderberatung", "Energiemanagement", "Bestandsanlagen", "Marktbeobachtung"]
|
||||
tags: ["Consulting", "Standortprüfung", "Energiekonzepte", "Förderberatung", "Energiemanagement", "Bestandsanlagen", "Technologievergleich"]
|
||||
categories: ["Leistungen"]
|
||||
meta_description: "Energie-Consulting: unabhängig, wirtschaftlich, technologieoffen. Von Standortprüfung bis Energiemanagement – mit klarem Business Case."
|
||||
kicker: "Strategie & Engineering"
|
||||
subtitle: "Technologieoffen beraten – mit klarem Business Case."
|
||||
hero_cta_label: "Beratungstermin sichern"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns beraten"
|
||||
usp:
|
||||
- "Unabhängige Entscheidungsgrundlagen statt Verkaufsargumente"
|
||||
- "Markt- & Technologieblick: Trends, Regulatorik, Anbieter"
|
||||
- "Datenbasierte Wirtschaftlichkeit: Lastgänge, Tarife, Szenarien"
|
||||
|
||||
features:
|
||||
- title: "Standortprüfung & Akquise"
|
||||
text: "Technische Machbarkeit, Netz, Erschließung → richtig kaufen/entwickeln."
|
||||
icon: "study"
|
||||
- title: "Energiekonzepte"
|
||||
text: "Variantenvergleich (PV, Speicher, EMS, Ladeinfra) → höchster Nutzen pro investiertem Euro."
|
||||
icon: "pv"
|
||||
- title: "Marktbeobachtung & Tech-Scouting"
|
||||
text: "Anbieter-/Technologievergleich → zukunftssichere Auswahl."
|
||||
icon: "study"
|
||||
- title: "Bestandsanlagen-Begutachtung"
|
||||
text: "Zustand, Ertrag, Sicherheit → Sanierung vermeiden, Rendite heben."
|
||||
icon: "doc"
|
||||
- title: "Förderberatung"
|
||||
text: "Relevanzcheck & Begleitung → höhere Förderchancen."
|
||||
icon: "doc"
|
||||
- title: "Energiemanagement"
|
||||
text: "KPIs, Monitoring, Optimierung → laufende Kostensenkung."
|
||||
icon: "study"
|
||||
|
||||
outcomes:
|
||||
- "Investitionssicherheit durch belastbare Analysen"
|
||||
- "Klarer Business Case (CAPEX/OPEX, Payback, Sensitivitäten)"
|
||||
- "Roadmap von Quick Wins bis Next Level"
|
||||
|
||||
cta_text: "Wir sehen, was technisch möglich ist - und was sich wirklich lohnt."
|
||||
cta_label: "Beratungstermin sichern"
|
||||
cta_href: "/contact/"
|
||||
---
|
||||
|
||||
# Unabhängige Beratung, die Entscheidungen erleichtert.
|
||||
|
||||
Wir beraten **herstellerneutral** zu Technik, Wirtschaftlichkeit und Umsetzung – von der **Bestandsanalyse** bis zur **Förderstrategie**. Ziel: **bessere Entscheidungen**, geringere Risiken, schnellere Umsetzung.
|
||||
|
||||
---
|
||||
|
||||
## Unsere Consulting‑Leistungen
|
||||
|
||||
### Beratung zu Energiekonzepten
|
||||
- Strategie für **PV, Speicher, EMS, Ladeinfrastruktur, WP**
|
||||
- Eigenverbrauch, Peak‑Shaving, Tarif‑/Marktmodell‑Bewertung
|
||||
- Roadmap & Priorisierung (Quick‑Wins vs. Invest)
|
||||
|
||||
### Marktbeobachtung
|
||||
- Technologietrends, Komponentenverfügbarkeit, Preisniveaus
|
||||
- Auswirkungen regulatorischer Änderungen und Netzentgelte
|
||||
- Chancen‑/Risikobewertung für Invests
|
||||
|
||||
### Begutachtung von Bestandsanlagen
|
||||
- Technische Due Diligence (Zustand, Norm, Betriebssicherheit)
|
||||
- Performance‑Analyse, OPEX‑Optimierung, Retrofit‑Empfehlungen
|
||||
- Mess‑/Schutz‑/Dokumentationscheck
|
||||
|
||||
### Förderberatung
|
||||
- Förderfähigkeit & Kombinierbarkeit (investiv/operativ)
|
||||
- Erforderliche Nachweise & Zeitplan
|
||||
- Begleitung von Antrag bis Verwendungsnachweis
|
||||
|
||||
### Energiemanagement
|
||||
- Zielsysteme (ISO 50001 optional), KPI‑Definition
|
||||
- Monitoring‑Konzept (Messstellen, Daten, Dashboards)
|
||||
- Last‑/Energieberichte, Maßnahmenkatalog mit Amortisation
|
||||
|
||||
---
|
||||
|
||||
## Ergebnis & Mehrwert
|
||||
- **Entscheidungsvorlagen** mit technischer & wirtschaftlicher Bewertung
|
||||
- **Roadmaps** inkl. Milestones und Verantwortlichkeiten
|
||||
- **Risiko‑ und Maßnahmenkatalog** für Planung & Betrieb
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Consulting
|
||||
**Ist die Beratung herstellerneutral?**
|
||||
Ja. Wir empfehlen ausschließlich **bedarfsgerechte** Lösungen.
|
||||
|
||||
**Gibt es auch Workshops?**
|
||||
Ja – Strategie‑, Technologie‑ oder Förder‑Workshops (½–1 Tag).
|
||||
|
||||
**Unterstützen Sie bei Förderanträgen?**
|
||||
Ja – von der Prüfung bis zur Einreichung und Dokumentation.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Kurztermin buchen: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
## Von Quick Wins bis Roadmap: messbar Kosten senken
|
||||
Wir beraten **technologieoffen und unabhängig** – von der Standortprüfung bis zur Strategie für Energiesysteme. Fokus: **Was ist technisch möglich – und was rechnet sich wirklich?**
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -2,87 +2,48 @@
|
|||
title: "Planung"
|
||||
slug: "planung"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["Elektrotechnik Planung", "Einreichplanung", "Ausführungsplanung", "Energieausweis", "Energiekonzept", "Studie", "Photovoltaik", "Ladeinfrastruktur"]
|
||||
tags: ["Planung", "Einreichplanung", "Ausführungsplanung", "Energieausweis", "Energiekonzept", "Technische Studien", "Photovoltaik", "Speicher", "Ladeinfrastruktur"]
|
||||
categories: ["Leistungen"]
|
||||
meta_description: "Planung für PV, Speicher & Ladeinfrastruktur – unabhängig, normkonform, wirtschaftlich. Staatlich geprüft & konzessioniert."
|
||||
kicker: "Engineering & Elektrotechnik"
|
||||
subtitle: "Technisch präzise geplant – wirtschaftlich belastbar."
|
||||
hero_cta_label: "Jetzt unverbindlich anfragen"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns planen"
|
||||
usp:
|
||||
- "Staatlich geprüftes Ingenieurbüro & konzessionierter Elektrotechnikbetrieb"
|
||||
- "Unabhängig & herstellerneutral – Technik nach Bedarf statt Verkauf"
|
||||
- "Fehlerprävention: Verschattung & Wirtschaftlichkeit von Beginn an im Blick"
|
||||
|
||||
features:
|
||||
- title: "Einreichplanung"
|
||||
text: "Behördengerechte Unterlagen (Lagepläne, Schutz-/Selektivitätskonzepte, Netzzutritt) → schnellere Bewilligung & weniger Rückfragen."
|
||||
icon: "doc"
|
||||
- title: "Entwurfs- & Ausführungsplanung"
|
||||
text: "String-/Layoutplanung, Kabelwege, Trafokonzept, Mess-/Abrechnungskonzept (EMS/Backend) → betriebssichere Umsetzung."
|
||||
icon: "study"
|
||||
- title: "Energieausweis (AT)"
|
||||
text: "Rechtssichere Erstellung für Neu-/Umbau & Verkauf/Vermietung; Plausibilisierung von Hüllflächen & Anlagentechnik → Förderfähigkeit sichern."
|
||||
icon: "doc"
|
||||
- title: "Energiekonzepte"
|
||||
text: "PV + Speicher + Ladeinfrastruktur koppeln, Lastgänge analysieren, Eigenverbrauch optimieren, Peak-/Blindleistung managen → niedrige LCOE."
|
||||
icon: "pv"
|
||||
- title: "Technische Studien"
|
||||
text: "Standorttauglichkeit (Einstrahlung, Verkehrsfrequenz), Netzoptionen, Restriktionen → Investitionssicherheit."
|
||||
icon: "study"
|
||||
|
||||
outcomes:
|
||||
- "Bewilligungs- & Förderfähigkeit durch normkonforme Planung"
|
||||
- "Transparente CAPEX/OPEX-Basis für Entscheidungen"
|
||||
- "Weniger Nachträge & schneller zur Inbetriebnahme"
|
||||
|
||||
cta_text: "Sie haben das Projekt – wir den Plan. Reden wir darüber."
|
||||
cta_label: "Jetzt unverbindlich anfragen"
|
||||
cta_href: "/contact/"
|
||||
---
|
||||
|
||||
# Planung mit Verantwortung. Technik mit Weitblick.
|
||||
|
||||
Als **staatlich geprüftes Ingenieurbüro** und **konzessionierter Elektrotechnikbetrieb** planen wir elektrische Anlagen **normkonform, wirtschaftlich und zukunftssicher** – vom Konzept bis zur genehmigungsfähigen Ausführungsplanung. Unser Fokus: **Photovoltaik, Energiespeicher, Ladeinfrastruktur, Gebäudetechnik** und **Netzintegration** (inkl. Mittelspannungsanschlüsse).
|
||||
|
||||
---
|
||||
|
||||
## Unsere Planungsleistungen
|
||||
|
||||
### Einreichplanung
|
||||
- Genehmigungsfähige Pläne und Unterlagen (Behörden, Netzbetreiber)
|
||||
- Dimensionierung, Schutzkonzepte, Leitungs- und Kabeltrassen
|
||||
- Netzanschlussanfrage (NS/MS), Lastfluss- & Kurzschlussbetrachtungen
|
||||
- Brandschutz- und Fluchtwegbezug, Überspannungs- & Blitzschutzkonzept
|
||||
|
||||
### Entwurfs- und Ausführungsplanung
|
||||
- Schaltpläne, Detail- und Montagepläne, Kabellisten, Klemmpläne
|
||||
- GAEB/Leistungsverzeichnisse, Massenermittlungen, Kostenschätzung
|
||||
- Betreiber- & Wartungsanforderungen, Normenprüfung (ÖVE/ÖNORM/EN)
|
||||
- Schnittstellenplanung PV ↔ Speicher ↔ WP ↔ EMS ↔ Ladeinfrastruktur
|
||||
|
||||
### Energieausweis (Nichtwohn- & Wohngebäude)
|
||||
- Bedarfsermittlung nach geltenden Normen
|
||||
- Variantenvergleich (Hülle/Technik) inkl. **CO₂**- und Betriebskosteneffekte
|
||||
- Dokumentation für **Förderstellen** und Behörden
|
||||
|
||||
### Energiekonzepte
|
||||
- PV‑Potenzial, Speicherstrategie, Eigenverbrauchsoptimierung
|
||||
- Lastganganalyse, **Peak‑Shaving**, Tarifsimulation (fix/variabel)
|
||||
- Elektromobilität: Lade- und Lastmanagement, Zähler- & Abrechnungslogik
|
||||
- Roadmap zur **Dekarbonisierung** und TCO‑Optimierung
|
||||
|
||||
### Studien
|
||||
- Machbarkeits‑ & Standortstudien (Technik, Recht, Wirtschaftlichkeit)
|
||||
- Netzrückwirkungen, Blindleistungs- & Transformatorauslegung
|
||||
- Szenarien (Erweiterbarkeit, Redundanz, Black‑Start/Backup)
|
||||
|
||||
---
|
||||
|
||||
## So arbeiten wir (Ablauf)
|
||||
1. **Kick‑off & Zielbild** – Anforderungen, Daten, Randbedingungen
|
||||
2. **Vorplanung** – Varianten, Grobdimensionierung, Budgetrahmen
|
||||
3. **Einreichplanung** – genehmigungsfähige Unterlagen
|
||||
4. **Ausführungsplanung** – Detailunterlagen & LV
|
||||
5. **Vergabe & Umsetzung** – Unterstützung bei Ausschreibung, Bau, Inbetriebnahme
|
||||
|
||||
---
|
||||
|
||||
## Ergebnisse (Deliverables)
|
||||
- Pläne (DWG/PDF), Schemata, **LV/GAEB**, Berechnungen, Protokolle
|
||||
- **Energieausweis** / Konzeptdokumentation
|
||||
- Betreiber‑/Wartungsanforderungen & Abnahmechecklisten
|
||||
|
||||
---
|
||||
|
||||
## Warum AMPERION?
|
||||
- **Unabhängig & herstellerneutral**
|
||||
- **Netzbetreiber‑erfahren** (NS/MS, Ladeparks, PV‑Großanlagen)
|
||||
- **Skalierbar & zukunftssicher** geplant
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Planung
|
||||
**Welche Unterlagen brauchen Sie zu Beginn?**
|
||||
Bestandspläne, Lastgänge (falls vorhanden), Standortdaten, Ziele/Budgetrahmen.
|
||||
|
||||
**Planen Sie auch Mittelspannung?**
|
||||
Ja. Von der **Netzanschlussanfrage** bis zur Trafostation inkl. Schutzkonzept.
|
||||
|
||||
**Übernehmen Sie die Ausschreibung?**
|
||||
Ja, inkl. LV, Bieterfragen, Angebotsprüfung und Vergabeempfehlung.
|
||||
|
||||
**Begleiten Sie die Bauphase?**
|
||||
Gerne – siehe **Projektmanagement**.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Kurzgespräch vereinbaren: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
## Von der Idee zur bewilligten Ausführungsplanung
|
||||
AMPERION ist Ihr **staatlich geprüftes Ingenieurbüro** und **konzessionierter Elektrotechnikbetrieb** für erneuerbare Energien. Wir planen **unabhängig** von Herstellern – technisch präzise, normkonform und wirtschaftlich belastbar. So vermeiden wir typische Fehler wie **unbeachtete Verschattung** oder **fehlende Wirtschaftlichkeitsprüfung** bereits in der Planung.
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -2,70 +2,45 @@
|
|||
title: "Projektmanagement"
|
||||
slug: "projektmanagement"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
date: 2025-08-12
|
||||
draft: false
|
||||
tags: ["Projektmanagement", "Baukoordination", "begleitende Kontrolle", "Bauherrnvertretung", "Dokumentation", "Ladeinfrastruktur", "Photovoltaik"]
|
||||
tags: ["Projektmanagement", "Baukoordination", "Begleitende Kontrolle", "Bauherrnvertretung", "Dokumentation", "Inbetriebnahme"]
|
||||
categories: ["Leistungen"]
|
||||
meta_description: "Projektmanagement für Energieprojekte: Koordination, Kontrolle, Dokumentation – unabhängig, elektrotechnisch fundiert, sicher zur Abnahme."
|
||||
kicker: "Engineering & Elektrotechnik"
|
||||
subtitle: "Sicher zur Abnahme – Termine, Kosten, Qualität im Griff."
|
||||
hero_cta_label: "Projekt begleiten lassen"
|
||||
hero_cta_href: "/contact/"
|
||||
|
||||
usp_title: "Warum mit uns umsetzen"
|
||||
usp:
|
||||
- "Technisches PM mit Elektrotechnik-Kompetenz – Entscheidungen fundiert treffen"
|
||||
- "Unabhängige Qualitätskontrolle – Fehler vor der IBN erkennen und vermeiden"
|
||||
- "Revisionssichere Dokumentation – Klarheit für alle Stakeholder"
|
||||
|
||||
features:
|
||||
- title: "Baukoordination"
|
||||
text: "Schnittstellenmanagement Gewerke/Netzbetreiber/Partner → reibungsloser Ablauf."
|
||||
icon: "doc"
|
||||
- title: "Begleitende Kontrolle"
|
||||
text: "Qualität, Termin, Budget, Prüfpläne → weniger Nachträge."
|
||||
icon: "study"
|
||||
- title: "Bauherrnvertretung"
|
||||
text: "Technische Interessenvertretung gegenüber Behörden & Firmen → klare Entscheidungen."
|
||||
icon: "doc"
|
||||
- title: "Dokumentation & IBN-Unterstützung"
|
||||
text: "Checklisten, Messprotokolle, As-Built → schnellere Abnahme."
|
||||
icon: "doc"
|
||||
|
||||
outcomes:
|
||||
- "Risiko- & Nachtragsreduktion durch technische Kontrolle"
|
||||
- "Planbare Meilensteine bis zur Abnahme/IBN"
|
||||
- "Transparenz für Management, Aufsichtsrat & Stakeholder"
|
||||
|
||||
cta_text: "Ihr nächster Schritt in Richtung Energiewende beginnt hier."
|
||||
cta_label: "Projekt begleiten lassen"
|
||||
cta_href: "/contact/"
|
||||
---
|
||||
|
||||
# Projektmanagement, das trägt.
|
||||
|
||||
Wir führen Ihre Energie‑ und Elektrotechnikprojekte **termintreu, kostensicher und regelkonform** zum Ziel – von der Vergabe bis zur Abnahme. Dabei vertreten wir konsequent die **Interessen des Bauherrn** und sichern Qualität durch **begleitende Kontrolle**.
|
||||
|
||||
---
|
||||
|
||||
## Unsere Leistungen
|
||||
|
||||
### Baukoordination
|
||||
- Termin‑, Kosten‑ und Ressourcensteuerung
|
||||
- Schnittstellenmanagement (Gewerke, Netzbetreiber, Behörden)
|
||||
- Bauaufsicht & Sicherheitskoordination (SiGe, sofern beauftragt)
|
||||
|
||||
### Begleitende Kontrolle
|
||||
- Qualitäts‑, Normen‑ und Ausführungsprüfung
|
||||
- Prüf‑ und Messprotokolle, FAT/SAT, **Inbetriebnahmesupport**
|
||||
- Abweichungs‑ & Mängelmanagement, Abnahmevorbereitung
|
||||
|
||||
### Bauherrnvertretung
|
||||
- Interessenvertretung gegenüber AN/Planern/Netzbetreiber
|
||||
- Vergabeunterstützung, Bietergespräche, **Change‑Request‑Steuerung**
|
||||
- Kostencontrolling, Fortschritts‑ und Statusberichte
|
||||
|
||||
### Dokumentation
|
||||
- As‑built‑Unterlagen, Revisionspläne, Schaltschrank‑/Klemmenpläne
|
||||
- Mess‑ und Prüfprotokolle, Abnahme‑/Übergabeunterlagen
|
||||
- Betriebs‑ & Wartungsdokumentation
|
||||
|
||||
---
|
||||
|
||||
## Ablauf & Tools
|
||||
1. **Projektstruktur & Ziele** (Kick‑off)
|
||||
2. **Termin‑ & Kostenplan** (Basislinie)
|
||||
3. **Steuerung & Kontrolle** (Jour‑Fixe, Status, Risiko‑Log)
|
||||
4. **Abnahmen & Übergabe** (Mängelfreiheit, Doku vollständig)
|
||||
|
||||
Wir arbeiten transparent (z. B. **Bau‑/Qi‑Log**, Abweichungsberichte) und integrieren Ihre Tools.
|
||||
|
||||
---
|
||||
|
||||
## Nutzen
|
||||
- **Plan‑/Ist‑Sicherheit** bei Budget, Qualität, Termin
|
||||
- **Reibungsfreie Koordination** komplexer Schnittstellen
|
||||
- **Dokumentierte Abnahme** & störungsarmer Betrieb
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Projektmanagement
|
||||
**Übernehmen Sie auch die Ausschreibung?**
|
||||
Ja. LV‑Erstellung, Bieterfragen, Angebotsprüfung, Vergabeempfehlung.
|
||||
|
||||
**Arbeiten Sie mit Generalunternehmern?**
|
||||
Sowohl **GU** als auch Einzelvergabe – wir steuern die Schnittstellen.
|
||||
|
||||
**Unterstützen Sie MS‑Anlagen & Ladeparks?**
|
||||
Ja – inkl. Trafostation, Schutzprüfung, EMS/LMS‑Integration.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Projekt besprechen: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
## Schnittstellen im Griff: vom Baustart bis zur IBN
|
||||
Wir **steuern** komplexe Energieprojekte und halten **Termine, Qualität und Kosten** im Gleichgewicht. Mit elektrotechnischem Verständnis minimieren wir Schnittstellenfehler zwischen Gewerken, Lieferanten und Netzbetreibern – **unabhängig** und transparent.
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: "Kontakt"
|
||||
description: ""
|
||||
bg_image: ""
|
||||
layout: "contact"
|
||||
draft: false
|
||||
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
# call to action content comes from "_index.md"
|
||||
---
|
||||
|
|
@ -1,120 +1,21 @@
|
|||
---
|
||||
title: "Fokusthemen"
|
||||
description: ""
|
||||
bg_image: "images/module_reflection_2.webp"
|
||||
layout: "service"
|
||||
draft: false
|
||||
|
||||
########################### about service #############################
|
||||
about:
|
||||
enable : true
|
||||
title : "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
|
||||
|
||||
|
||||
|
||||
|
||||
########################## featured service ############################
|
||||
|
||||
|
||||
featured_service:
|
||||
enable: true
|
||||
service_item:
|
||||
|
||||
|
||||
|
||||
- name: "Consulting"
|
||||
icon: "fas fa-cogs"
|
||||
color : "service1"
|
||||
content: "Unser Expertenteam bietet umfassende Beratungsdienstleistungen, die auf Ihre individuellen Bedürfnisse zugeschnitten sind. Von der strategischen Planung bis zur praktischen Umsetzung stehen wir Ihnen mit unserer Erfahrung und unserem Fachwissen zur Seite, um optimale Lösungen für Ihre Herausforderungen zu entwickeln."
|
||||
image: "images/services/consulting.png"
|
||||
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Anlagenkonzepte"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service2"
|
||||
content : "Mit unserem maßgeschneiderten Ansatz entwickeln wir Anlagenkonzepte, die optimal auf Ihre individuellen Anforderungen und die örtlichen Gegebenheiten zugeschnitten sind. Von der ersten Idee bis zur Umsetzung stehen wir Ihnen mit unserer Fachkompetenz zur Seite."
|
||||
image: "images/services/anlagenkonzept.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ertragssimulationen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service3"
|
||||
content : "Mit unseren präzisen Ertragssimulationen bieten wir Ihnen verlässliche Prognosen über die Wirtschaftlichkeit Ihrer Projekte. Unsere Analysen berücksichtigen alle relevanten Faktoren, sodass Sie fundierte Entscheidungen treffen und Ihre Investitionen optimal planen können."
|
||||
image: "images/services/anlagensimulation.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Einreichplanungen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service4"
|
||||
content : "Wir unterstützen Sie bei der Erstellung umfassender Einreichplanungen für die behördliche Anlagengenehmigung. Unsere Experten kennen die rechtlichen Anforderungen und sorgen dafür, dass Ihr Projekt reibungslos genehmigt wird."
|
||||
image: "images/services/einreichplanung.png"
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ausführungsplanung"
|
||||
icon : "fas fa-flask"
|
||||
color : "service5"
|
||||
content : "Mit unserer präzisen Ausführungsplanung stellen wir sicher, dass Ihr Projekt effizient umgesetzt wird. Wir erstellen detaillierte Pläne, die alle technischen Anforderungen erfüllen und die Grundlage für eine erfolgreiche Umsetzung bilden."
|
||||
image: "images/services/ausführungsplanung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Projektbetreuung"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service6"
|
||||
content : "Unsere umfassende Projektbetreuung gewährleistet, dass Ihr Vorhaben von der Planung bis zur Fertigstellung reibungslos verläuft. Wir koordinieren alle Beteiligten und sorgen dafür, dass Zeitpläne und Budgets eingehalten werden, sodass Ihr Projekt erfolgreich abgeschlossen wird."
|
||||
image: "images/services/projektbetreuung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Behördenwege"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service7"
|
||||
content : "Wir begleiten Sie durch alle behördlichen Prozesse und stellen sicher, dass alle notwendigen Genehmigungen rechtzeitig eingeholt werden. Unsere Experten kennen die gesetzlichen Vorgaben und sorgen dafür, dass Ihr Projekt ohne Verzögerungen vorankommt."
|
||||
image: "images/services/behördenwege.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Energiekonzepte"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service8"
|
||||
content : "Unsere Energiekonzepte zielen darauf ab, die optimale Nutzung erneuerbarer Energien zu ermöglichen und gleichzeitig den Energieverbrauch zu optimieren. Wir entwickeln ganzheitliche Strategien, die sowohl ökologische als auch wirtschaftliche Vorteile bieten."
|
||||
image: "images/services/energiekonzepte.png"
|
||||
|
||||
############################# Service ###############################
|
||||
service:
|
||||
enable : true
|
||||
title : "Unsere Fokusthemen für die Energiewende"
|
||||
description : "Sektorenübergreifend. Innovativ. Erneuerbar."
|
||||
enable: true
|
||||
title: "Unsere Fokusthemen für die Energiewende"
|
||||
description: "Sektorenübergreifend. Innovativ. Erneuerbar."
|
||||
service_item:
|
||||
# service item loop
|
||||
- picture: "images/services_main/photovoltaik.webp"
|
||||
name: Photovoltaik
|
||||
link: "/service/photovoltaik"
|
||||
|
||||
# service item loop
|
||||
name: "Photovoltaik"
|
||||
link: "/fokusthemen/photovoltaik/"
|
||||
- picture: "images/services_main/energiespeicher.webp"
|
||||
name: Energiespeicher
|
||||
link: "/service/energiespeicher"
|
||||
|
||||
# service item loop
|
||||
name: "Energiespeicher"
|
||||
link: "/fokusthemen/energiespeicher/"
|
||||
- picture: "images/services_main/e-mobilitaet.webp"
|
||||
name: E-Mobilität
|
||||
link: "/service/elektromobilitaet"
|
||||
|
||||
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/einreichplanung.svg"
|
||||
# name: Behördenwege
|
||||
# content: "Wir unterstützen Sie bei allen behördlichen Prozessen und sorgen dafür, dass Ihre Projekte reibungslos und ohne Verzögerungen vorankommen. Vertrauen Sie auf unsere #Erfahrung und Expertise."
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/energiekonzepte.svg"
|
||||
# name: Energiekonzepte
|
||||
# content: "Wir erstellen innovative Energiekonzepte, die sowohl ökologisch als auch ökonomisch nachhaltig sind. Profitieren Sie von unseren zukunftsweisenden Lösungen für Ihre #Energieprojekte."
|
||||
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
# call to action content comes from "_index.md"
|
||||
name: "E-Mobilität"
|
||||
link: "/fokusthemen/emobilitaet/"
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ contents:
|
|||
ATU80426326
|
||||
|
||||
email: office@amperion.at
|
||||
telefon: +4367762090426
|
||||
telefon: +436776209042
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
|
|
|
|||
|
|
@ -1,119 +1,18 @@
|
|||
---
|
||||
title: "Leistungen"
|
||||
description: ""
|
||||
bg_image: "images/module_reflection_2.webp"
|
||||
layout: "service"
|
||||
draft: false
|
||||
|
||||
########################### about service #############################
|
||||
about:
|
||||
enable : true
|
||||
title : "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
|
||||
|
||||
|
||||
|
||||
|
||||
########################## featured service ############################
|
||||
|
||||
|
||||
featured_service:
|
||||
enable: true
|
||||
service_item:
|
||||
|
||||
|
||||
|
||||
- name: "Consulting"
|
||||
icon: "fas fa-cogs"
|
||||
color : "service1"
|
||||
content: "Unser Expertenteam bietet umfassende Beratungsdienstleistungen, die auf Ihre individuellen Bedürfnisse zugeschnitten sind. Von der strategischen Planung bis zur praktischen Umsetzung stehen wir Ihnen mit unserer Erfahrung und unserem Fachwissen zur Seite, um optimale Lösungen für Ihre Herausforderungen zu entwickeln."
|
||||
image: "images/services/consulting.png"
|
||||
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Anlagenkonzepte"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service2"
|
||||
content : "Mit unserem maßgeschneiderten Ansatz entwickeln wir Anlagenkonzepte, die optimal auf Ihre individuellen Anforderungen und die örtlichen Gegebenheiten zugeschnitten sind. Von der ersten Idee bis zur Umsetzung stehen wir Ihnen mit unserer Fachkompetenz zur Seite."
|
||||
image: "images/services/anlagenkonzept.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ertragssimulationen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service3"
|
||||
content : "Mit unseren präzisen Ertragssimulationen bieten wir Ihnen verlässliche Prognosen über die Wirtschaftlichkeit Ihrer Projekte. Unsere Analysen berücksichtigen alle relevanten Faktoren, sodass Sie fundierte Entscheidungen treffen und Ihre Investitionen optimal planen können."
|
||||
image: "images/services/anlagensimulation.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Einreichplanungen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service4"
|
||||
content : "Wir unterstützen Sie bei der Erstellung umfassender Einreichplanungen für die behördliche Anlagengenehmigung. Unsere Experten kennen die rechtlichen Anforderungen und sorgen dafür, dass Ihr Projekt reibungslos genehmigt wird."
|
||||
image: "images/services/einreichplanung.png"
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ausführungsplanung"
|
||||
icon : "fas fa-flask"
|
||||
color : "service5"
|
||||
content : "Mit unserer präzisen Ausführungsplanung stellen wir sicher, dass Ihr Projekt effizient umgesetzt wird. Wir erstellen detaillierte Pläne, die alle technischen Anforderungen erfüllen und die Grundlage für eine erfolgreiche Umsetzung bilden."
|
||||
image: "images/services/ausführungsplanung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Projektbetreuung"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service6"
|
||||
content : "Unsere umfassende Projektbetreuung gewährleistet, dass Ihr Vorhaben von der Planung bis zur Fertigstellung reibungslos verläuft. Wir koordinieren alle Beteiligten und sorgen dafür, dass Zeitpläne und Budgets eingehalten werden, sodass Ihr Projekt erfolgreich abgeschlossen wird."
|
||||
image: "images/services/projektbetreuung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Behördenwege"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service7"
|
||||
content : "Wir begleiten Sie durch alle behördlichen Prozesse und stellen sicher, dass alle notwendigen Genehmigungen rechtzeitig eingeholt werden. Unsere Experten kennen die gesetzlichen Vorgaben und sorgen dafür, dass Ihr Projekt ohne Verzögerungen vorankommt."
|
||||
image: "images/services/behördenwege.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Energiekonzepte"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service8"
|
||||
content : "Unsere Energiekonzepte zielen darauf ab, die optimale Nutzung erneuerbarer Energien zu ermöglichen und gleichzeitig den Energieverbrauch zu optimieren. Wir entwickeln ganzheitliche Strategien, die sowohl ökologische als auch wirtschaftliche Vorteile bieten."
|
||||
image: "images/services/energiekonzepte.png"
|
||||
|
||||
############################# Service ###############################
|
||||
service:
|
||||
enable : true
|
||||
title : "UNSERE LEISTUNGEN IM ÜBERBLICK"
|
||||
description : "Technisch fundiert. Unabhängig. Zukunftsorientiert."
|
||||
enable: true
|
||||
title: "UNSERE LEISTUNGEN IM ÜBERBLICK"
|
||||
description: "Technisch fundiert. Unabhängig. Zukunftsorientiert."
|
||||
service_item:
|
||||
# service item loop
|
||||
- picture: "images/services_main/planung.webp"
|
||||
name: Planung
|
||||
link: "/service/energiekonzepte"
|
||||
name: "Planung"
|
||||
link: "/leistungen/planung/"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/projektmanagment.webp"
|
||||
name: Projektmanagement
|
||||
link: "/service/projektmanagement"
|
||||
name: "Projektmanagement"
|
||||
link: "/leistungen/projektmanagement/"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/consulting.webp"
|
||||
name: Consulting
|
||||
link: "/service/elektromobilitaet"
|
||||
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/einreichplanung.svg"
|
||||
# name: Behördenwege
|
||||
# content: "Wir unterstützen Sie bei allen behördlichen Prozessen und sorgen dafür, dass Ihre Projekte reibungslos und ohne Verzögerungen vorankommen. Vertrauen Sie auf unsere #Erfahrung und Expertise."
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/energiekonzepte.svg"
|
||||
# name: Energiekonzepte
|
||||
# content: "Wir erstellen innovative Energiekonzepte, die sowohl ökologisch als auch ökonomisch nachhaltig sind. Profitieren Sie von unseren zukunftsweisenden Lösungen für Ihre #Energieprojekte."
|
||||
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
# call to action content comes from "_index.md"
|
||||
name: "Consulting"
|
||||
link: "/leistungen/consulting/"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{{ $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">
|
||||
{{ 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="row g-4">
|
||||
<!-- ===== Kontakt-Infos ===== -->
|
||||
<div class="col-lg-5" data-reveal>
|
||||
<div class="card card-pad stack-lg">
|
||||
<div class="stack">
|
||||
<h3>Kontakt</h3>
|
||||
<ul class="info-list" style="display:grid;gap:12px;justify-items:center;text-align:center">
|
||||
{{ with $addr }}
|
||||
<li class="info-item">
|
||||
<div class="txt">{{ . | markdownify }}</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $email }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="mailto:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone1 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ with $phone2 }}
|
||||
<li class="info-item">
|
||||
<div class="txt"><a href="tel:{{ . | safeURL }}">{{ . }}</a></div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<h3>Folgen Sie uns</h3>
|
||||
<div class="cta__social">
|
||||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<img src="/images/social/instagram.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<img src="/images/social/linkedin.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<img src="/images/social/facebook.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Formular ===== -->
|
||||
<div class="col-lg-7" data-reveal>
|
||||
{{ with site.Params.contact.form }}{{ if .enable }}
|
||||
{{ $formName := printf "contact_%s" $.Language.Lang }}
|
||||
<form
|
||||
method="POST"
|
||||
class="card card-pad stack"
|
||||
{{ if .use_netlify }}
|
||||
name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}"
|
||||
{{ else }}
|
||||
name="contact" action="{{ .action | safeURL }}"
|
||||
{{ end }}
|
||||
>
|
||||
{{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="name" hidden>{{ i18n "contact_form_name" }}</label>
|
||||
<input id="name" name="name" type="text" class="form-control" placeholder="{{ i18n "contact_form_name" }}" required>
|
||||
<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" hidden>{{ i18n "contact_form_email" }}</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="{{ i18n "contact_form_email" }}" required>
|
||||
<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="subject" hidden>{{ i18n "contact_form_subject" }}</label>
|
||||
<input id="subject" name="subject" type="text" class="form-control" placeholder="{{ i18n "contact_form_subject" }}" required>
|
||||
<label for="company" class="visually-hidden">Unternehmen</label>
|
||||
<input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)">
|
||||
</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 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>
|
||||
{{- end }}
|
||||
{{ if .use_recaptcha -}}
|
||||
<div class="form-group-h">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
{{ end }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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 }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Hauptinhalt aus der Markdown-Datei -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{{/* ==== 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 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call-to-Action (optional, falls in Frontmatter aktiviert) -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ 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>
|
||||
</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>
|
||||
{{ 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>
|
||||
</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" />
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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-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)}}
|
||||
/* Page Title Base */
|
||||
.page-title {
|
||||
position: relative;
|
||||
padding: 100px 0 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Variablen – werden von CTA-CSS verwendet */
|
||||
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Mobile: noch reduzierter */
|
||||
@media (max-width:768px){
|
||||
.page-title .energy-line-h3,
|
||||
.page-title .energy-line-v3,
|
||||
.page-title .energy-node5{display:none;}
|
||||
.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>
|
||||
|
|
@ -3136,15 +3136,17 @@ body {
|
|||
--cta-accent: #F5A623;
|
||||
/* Orange */
|
||||
/* Button-Preset (hier zentral Größe steuern) */
|
||||
--btn-py: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* Schriftgröße */
|
||||
/* ÄNDERUNG: deutlich kleinere Buttons (Höhe, Breite, Schrift) */
|
||||
--btn-py: clamp(1rem, 1.2vw, 1.5rem);
|
||||
/* vorher 1.8–2.5rem -> jetzt kompakter */
|
||||
--btn-px: clamp(1rem, 1.6vw, 1.5rem);
|
||||
/* vorher 1.8–2.5rem -> schmaler */
|
||||
--btn-fs: clamp(1.5rem, 1.15vw, 1.5rem);
|
||||
/* vorher 1.8–2.5rem -> p-nahe Größe */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
/* belassen; nur Buttons werden kleiner */
|
||||
background: #ffffff00; }
|
||||
|
||||
/* ===== HINTERGRUND ANIMATIONEN ===== */
|
||||
|
|
@ -3156,25 +3158,6 @@ body {
|
|||
height: 100%;
|
||||
pointer-events: none; }
|
||||
|
||||
/* Subtiles Grid */
|
||||
.cta__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
/* Explizit transparent */
|
||||
background-image: linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite; }
|
||||
|
||||
@keyframes gridMove {
|
||||
0% {
|
||||
transform: translate(0, 0); }
|
||||
100% {
|
||||
transform: translate(50px, 50px); } }
|
||||
|
||||
/* Energie-Linien Container */
|
||||
.cta__energy-lines {
|
||||
position: absolute;
|
||||
|
|
@ -3188,7 +3171,7 @@ body {
|
|||
.energy-line-h {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite; }
|
||||
.energy-line-h::after {
|
||||
|
|
@ -3199,8 +3182,8 @@ body {
|
|||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%; }
|
||||
.energy-line-h.energy-line-h1 {
|
||||
top: 20%;
|
||||
|
|
@ -3234,7 +3217,7 @@ body {
|
|||
.energy-line-v {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
|
||||
background: linear-gradient(180deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite; }
|
||||
.energy-line-v::after {
|
||||
|
|
@ -3245,8 +3228,8 @@ body {
|
|||
transform: translateX(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
|
||||
border-radius: 50%; }
|
||||
.energy-line-v.energy-line-v1 {
|
||||
left: 15%;
|
||||
|
|
@ -3282,9 +3265,9 @@ body {
|
|||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
background: var(--cta-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-accent);
|
||||
animation: nodePulse 2s ease-in-out infinite; }
|
||||
.energy-node.energy-node1 {
|
||||
top: 20%;
|
||||
|
|
@ -3322,11 +3305,22 @@ body {
|
|||
/* ===== CONTENT STYLES ===== */
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
z-index: 1;
|
||||
/* NEU: zentral breiter Container für diese Section
|
||||
-> mehr Zeilenbreite, damit die H1 ab Desktop in 1 Zeile bleibt */
|
||||
width: 100%;
|
||||
max-width: 1360px;
|
||||
/* vorher kein Limit hier – jetzt groß/“breit in der Mitte“ */
|
||||
margin-inline: auto;
|
||||
/* zentriert */
|
||||
padding-inline: clamp(16px, 3vw, 24px);
|
||||
/* etwas Innenabstand links/rechts */ }
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
/* ÄNDERUNG: mehr Inhaltsbreite, H1 bekommt mehr Platz */
|
||||
max-width: 90rem;
|
||||
/* vorher 72rem */
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem); }
|
||||
|
||||
|
|
@ -3336,14 +3330,18 @@ body {
|
|||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
position: center;
|
||||
z-index: 2;
|
||||
/* NEU: ab Desktop nicht umbrechen -> bleibt einzeilig, wenn Platz da ist */ }
|
||||
@media (min-width: 1200px) {
|
||||
.cta__title {
|
||||
white-space: nowrap;
|
||||
/* einzeilig erzwingen */ } }
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
line-height: 1.55;
|
||||
/* optional etwas breiter, wenn du willst – hier schon groß genug */
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
|
@ -3354,7 +3352,7 @@ body {
|
|||
display: block;
|
||||
margin-top: 0.5rem; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
/* Buttons */
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -3369,6 +3367,7 @@ body {
|
|||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
/* nutzt die kleineren Presets oben */
|
||||
border-radius: 9999px;
|
||||
background: #fff;
|
||||
color: var(--cta-primary);
|
||||
|
|
@ -3377,6 +3376,7 @@ body {
|
|||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
/* nutzt die kleinere Schrift */
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
|
|
@ -3490,17 +3490,20 @@ body {
|
|||
background: #006464;
|
||||
border-radius: 999px; }
|
||||
|
||||
/* About-Intro: Video */
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 12px; }
|
||||
border-radius: 12px;
|
||||
/* Weiche Kanten */ }
|
||||
|
||||
.intro-media {
|
||||
overflow: hidden;
|
||||
border-radius: 12px; }
|
||||
/* sorgt dafür, dass der Radius auch das Video schneidet */
|
||||
border-radius: 12px;
|
||||
/* gleicher Radius wie Video */ }
|
||||
|
||||
/* ========================================
|
||||
ABOUT PAGE STYLES
|
||||
|
|
|
|||
BIN
static/images/leistungen/consulting1.webp
Normal file
BIN
static/images/leistungen/consulting1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
static/images/leistungen/consulting2.webp
Normal file
BIN
static/images/leistungen/consulting2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
static/images/leistungen/emobilitaet1.webp
Normal file
BIN
static/images/leistungen/emobilitaet1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
static/images/leistungen/emobilitaet2.webp
Normal file
BIN
static/images/leistungen/emobilitaet2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
static/images/leistungen/energiespeicher1.webp
Normal file
BIN
static/images/leistungen/energiespeicher1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
BIN
static/images/leistungen/energiespeicher2.webp
Normal file
BIN
static/images/leistungen/energiespeicher2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
static/images/leistungen/photovoltaik1.webp
Normal file
BIN
static/images/leistungen/photovoltaik1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
BIN
static/images/leistungen/photovoltaik2.webp
Normal file
BIN
static/images/leistungen/photovoltaik2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
static/images/leistungen/planung1.webp
Normal file
BIN
static/images/leistungen/planung1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
static/images/leistungen/planung2.webp
Normal file
BIN
static/images/leistungen/planung2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
static/images/leistungen/projektmanagement1.webp
Normal file
BIN
static/images/leistungen/projektmanagement1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
static/images/leistungen/projektmanagement2.webp
Normal file
BIN
static/images/leistungen/projektmanagement2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Loading…
Add table
Add a link
Reference in a new issue