diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 57c5213..64c74fe 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -6,7 +6,7 @@
}
.hero-title {
- font-size: clamp(2.5rem, 4vw, 4rem);
+ font-size: clamp(1.8rem, 4vw, 4rem);
font-weight: 400;
line-height: 1.2;
color: #046e6e;
@@ -290,7 +290,7 @@ section {
cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */
}
-/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
+/* dezentes Hover-Feedback */
.service-card::after {
content: '';
position: absolute; inset: 0;
@@ -409,6 +409,22 @@ section {
}
}
+.about-cta {
+ color: #046e6e; /* Türkis */
+ font-weight: 700;
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+ transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.about-cta:hover,
+.about-cta:focus {
+ color: #F5A623; /* Orange */
+ border-bottom-color: #F5A623;
+}
+
+
+
/* ========== Mehrwerte ========== */
.mehrwerte-grid {
display: grid;
@@ -719,3 +735,98 @@ body {
outline:2px dashed var(--amp-accent);
outline-offset:4px;
}
+
+/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
+.cta {
+ --cta-primary: #046e6e; /* Türkis */
+ --cta-accent: #F5A623; /* Orange */
+
+ /* Button-Preset (hier zentral Größe steuern) */
+ --btn-py: clamp(2rem, 2.8vw, 3rem); /* oben/unten -> Höhe */
+ --btn-px: clamp(2rem, 3.6vw, 3em); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
+ --btn-fs: clamp(2rem, 2vw, 3rem); /* Schriftgröße */
+
+ position: relative;
+ overflow: hidden;
+ padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */
+ background: #f3f3f3;
+}
+
+/* Hintergrund dezent + optional animiert */
+.cta__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
+.cta__grad { position: absolute; inset: 0; background: linear-gradient(180deg,#fff,#f6f9f9,#fff); }
+@keyframes cta-pan { from { background-position: 0% 0%; } to { background-position: 200% 200%; } }
+.cta__pan {
+ position: absolute; inset: 0; opacity: .08; background-size: 200% 200%;
+ background-image:
+ radial-gradient(40% 40% at 20% 10%, rgba(4,110,110,.25), transparent 60%),
+ radial-gradient(35% 35% at 85% 35%, rgba(245,166,35,.25), transparent 55%);
+ animation: cta-pan 24s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) { .cta__pan { animation: none !important; } }
+
+.cta .my-container { position: relative; z-index: 1; }
+.cta__wrap { text-align: center; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
+
+/* Große Typografie */
+.cta__title {
+ margin: 0;
+ color: var(--cta-primary);
+ font-weight: 700;
+ letter-spacing: .2px;
+ font-size: clamp(2.2rem, 4.8vw, 3.6rem);
+}
+.cta__lead {
+ margin: .9rem auto 0;
+ color: #0f172a;
+ font-size: clamp(1.2rem, 2.8vw, 1.7rem);
+ line-height: 1.55;
+ max-width: 58rem;
+}
+.cta__accent { color: var(--cta-accent); font-weight: 700; }
+
+/* Buttons – deutlich größer */
+.cta__actions {
+ display: flex; flex-wrap: wrap; justify-content: center;
+ gap: clamp(1rem, 2.4vw, 1.6rem);
+ margin-top: clamp(1.4rem, 3vw, 2.2rem);
+}
+.cta__btn {
+ display: inline-flex; align-items: center; gap: .7rem;
+ padding: var(--btn-py) var(--btn-px);
+ border-radius: 9999px;
+ background: #fff; color: var(--cta-primary);
+ border: 1px solid rgba(0,0,0,.06);
+ box-shadow: 0 1px 3px rgba(0,0,0,.06);
+ text-decoration: none; font-weight: 700;
+ font-size: var(--btn-fs);
+ transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
+}
+.cta__btn:hover {
+ background: var(--cta-accent); /* Hover = Orange */
+ color: #fff;
+ box-shadow: 0 8px 22px rgba(245,166,35,.35);
+}
+.cta__btn:active { transform: translateY(1px); }
+.cta__btn:focus-visible { outline: 2px dashed var(--cta-accent); outline-offset: 3px; }
+
+/* Social-Icons (etwas größer, Teal-Hover) */
+.cta__social {
+ display: flex; justify-content: center;
+ gap: clamp(.9rem, 2vw, 1.2rem);
+ margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
+}
+.cta__social-link {
+ width: clamp(56px, 6.2vw, 64px); height: clamp(56px, 6.2vw, 64px);
+ display: inline-flex; align-items: center; justify-content: center;
+ background: #fff; border-radius: 9999px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.06);
+ transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
+ text-decoration: none;
+}
+.cta__social-link:hover { background: var(--cta-accent); box-shadow: 0 6px 16px rgba(4,110,110,.25); }
+.cta__social-link:active { transform: translateY(1px); }
+.cta__social-link img {
+ width: clamp(24px, 3vw, 28px); height: auto; display: block; transition: filter .2s ease;
+}
+.cta__social-link:hover img { filter: invert(1); }
diff --git a/content/german/_index.md b/content/german/_index.md
index a590ac2..e545c7c 100644
--- a/content/german/_index.md
+++ b/content/german/_index.md
@@ -24,7 +24,7 @@ about:
enable: true
title: "ÜBER AMPERION"
description: "Technik mit Verantwortung. Planung mit Weitblick."
- content: " AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich.
Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik.
Systemisch. Unabhängig. Zukunftsorientiert.
Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben.
Mit technischem Know-how, Verantwortungsbewusstsein und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme.
[MEHR ÜBER UNS](/about/)
"
+ content: " AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik.
Systemisch. Unabhängig. Zukunftsorientiert.
Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben.
Mit technischem Know-how, Verantwortungsbewusstsein und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme.
"
image: "images/ingenieurbuero.svg"
############################# About #################################
@@ -74,6 +74,7 @@ cta:
enable: true
label: "Kontaktinformation"
link: "contact/"
+
############################# facts ###############################
facts:
enable: true
diff --git a/deploy.ps1 b/deploy.ps1
new file mode 100644
index 0000000..e69de29
diff --git a/layouts/index.html b/layouts/index.html
index dc4c9c7..ad10c8a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -261,18 +261,21 @@ document.addEventListener('DOMContentLoaded', function () {
-
+
{{ with .content }}{{ . | markdownify }}{{ end }}
+
MEHR ÜBER UNS
+
-
@@ -283,7 +286,48 @@ document.addEventListener('DOMContentLoaded', function () {
+{{ $impressum := site.GetPage "page" "impressum" }}
+
{{ if .Params.cta.enable }}
-{{ partial "cta.html" . }}
+
+
+
+
+
+
+
+ Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
+
+
+ Bereit für Ihr Energieprojekt?
+ Kostenfreie Erstberatung sichern!
+
+
+
+
+
+
+
+
{{ end }}
{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/cta.html b/layouts/partials/cta.html
deleted file mode 100644
index b1e37d3..0000000
--- a/layouts/partials/cta.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{{ $impressum := site.GetPage "page" "impressum" }}
-
-{{ with site.GetPage "/" }}
-{{ with .Params.cta }}
-
-
-
-
-
-
- {{ with .title }}
{{ . | markdownify }}
{{ end }}
- {{ with .content }}
{{ . | markdownify }}
{{ end }}
- {{ with .button }}
- {{ if .enable }}
-
E-mail
-
-
-
TELEFON
- {{ end }}
- {{ end }}
-
-
-
-
-
-{{ end }}
-{{ end }}
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index 7e65b6b..5b9bb0b 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover {
padding: 0 1rem; }
.hero-title {
- font-size: clamp(2.5rem, 4vw, 4rem);
+ font-size: clamp(1.8rem, 4vw, 4rem);
font-weight: 400;
line-height: 1.2;
color: #046e6e;
@@ -2750,7 +2750,7 @@ section {
cursor: default;
/* kein Hand-Cursor -> kein Link-Feeling */ }
-/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
+/* dezentes Hover-Feedback */
.service-card::after {
content: '';
position: absolute;
@@ -2866,6 +2866,20 @@ section {
.hover-link:hover {
color: #F5A623; }
+.about-cta {
+ color: #046e6e;
+ /* Türkis */
+ font-weight: 700;
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+ transition: color 0.2s ease, border-color 0.2s ease; }
+
+.about-cta:hover,
+.about-cta:focus {
+ color: #F5A623;
+ /* Orange */
+ border-bottom-color: #F5A623; }
+
/* ========== Mehrwerte ========== */
.mehrwerte-grid {
display: grid;
@@ -3133,6 +3147,156 @@ body {
outline: 2px dashed var(--amp-accent);
outline-offset: 4px; }
+/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
+.cta {
+ --cta-primary: #046e6e;
+ /* Türkis */
+ --cta-accent: #F5A623;
+ /* Orange */
+ /* Button-Preset (hier zentral Größe steuern) */
+ --btn-py: clamp(2rem, 2.8vw, 3rem);
+ /* oben/unten -> Höhe */
+ --btn-px: clamp(2rem, 3.6vw, 3em);
+ /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
+ --btn-fs: clamp(2rem, 2vw, 3rem);
+ /* Schriftgröße */
+ position: relative;
+ overflow: hidden;
+ padding: clamp(6rem, 10vw, 12rem) 0;
+ /* Section höher wie „Standard-Sektion“ */
+ background: #f3f3f3; }
+
+/* Hintergrund dezent + optional animiert */
+.cta__bg {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ z-index: 0; }
+
+.cta__grad {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, #fff, #f6f9f9, #fff); }
+
+@keyframes cta-pan {
+ from {
+ background-position: 0% 0%; }
+ to {
+ background-position: 200% 200%; } }
+
+.cta__pan {
+ position: absolute;
+ inset: 0;
+ opacity: .08;
+ background-size: 200% 200%;
+ background-image: radial-gradient(40% 40% at 20% 10%, rgba(4, 110, 110, 0.25), transparent 60%), radial-gradient(35% 35% at 85% 35%, rgba(245, 166, 35, 0.25), transparent 55%);
+ animation: cta-pan 24s linear infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+ .cta__pan {
+ animation: none !important; } }
+
+.cta .my-container {
+ position: relative;
+ z-index: 1; }
+
+.cta__wrap {
+ text-align: center;
+ max-width: 72rem;
+ margin: 0 auto;
+ padding: 0 clamp(1rem, 3vw, 2rem); }
+
+/* Große Typografie */
+.cta__title {
+ margin: 0;
+ color: var(--cta-primary);
+ font-weight: 700;
+ letter-spacing: .2px;
+ font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
+
+.cta__lead {
+ margin: .9rem auto 0;
+ color: #0f172a;
+ font-size: clamp(1.2rem, 2.8vw, 1.7rem);
+ line-height: 1.55;
+ max-width: 58rem; }
+
+.cta__accent {
+ color: var(--cta-accent);
+ font-weight: 700; }
+
+/* Buttons – deutlich größer */
+.cta__actions {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: clamp(1rem, 2.4vw, 1.6rem);
+ margin-top: clamp(1.4rem, 3vw, 2.2rem); }
+
+.cta__btn {
+ display: inline-flex;
+ align-items: center;
+ gap: .7rem;
+ padding: var(--btn-py) var(--btn-px);
+ border-radius: 9999px;
+ background: #fff;
+ color: var(--cta-primary);
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+ text-decoration: none;
+ font-weight: 700;
+ font-size: var(--btn-fs);
+ transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; }
+
+.cta__btn:hover {
+ background: var(--cta-accent);
+ /* Hover = Orange */
+ color: #fff;
+ box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
+
+.cta__btn:active {
+ transform: translateY(1px); }
+
+.cta__btn:focus-visible {
+ outline: 2px dashed var(--cta-accent);
+ outline-offset: 3px; }
+
+/* Social-Icons (etwas größer, Teal-Hover) */
+.cta__social {
+ display: flex;
+ justify-content: center;
+ gap: clamp(0.9rem, 2vw, 1.2rem);
+ margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }
+
+.cta__social-link {
+ width: clamp(56px, 6.2vw, 64px);
+ height: clamp(56px, 6.2vw, 64px);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: #fff;
+ border-radius: 9999px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+ transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
+ text-decoration: none; }
+
+.cta__social-link:hover {
+ background: var(--cta-accent);
+ box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25); }
+
+.cta__social-link:active {
+ transform: translateY(1px); }
+
+.cta__social-link img {
+ width: clamp(24px, 3vw, 28px);
+ height: auto;
+ display: block;
+ transition: filter .2s ease; }
+
+.cta__social-link:hover img {
+ filter: invert(1); }
+
+/* Optional: Wenn du Social-Hover auch Orange willst, tausche oben var(--cta-primary) -> var(--cta-accent) */
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
.logo-container {
width: 80%;