diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 57c5213..35e0e2d 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;
@@ -616,7 +632,7 @@ body {
}
#about .about-image {
width: 100%;
- max-width: clamp(260px, 38vw, 480px);
+ max-width: clamp(200px, 38vw, 300px);
height: auto;
object-fit: contain;
margin-left: auto; /* rechtsbündig in Spalte */
@@ -719,3 +735,84 @@ 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(1.8rem, 2.8vw, 2.5rem); /* oben/unten -> Höhe */
+ --btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
+ --btn-fs: clamp(1.8rem, 2.8vw, 2.5rem); /* Schriftgröße */
+
+ position: relative;
+ overflow: hidden;
+ padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */
+}
+
+.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(65px, 10vw, 70px); height: clamp(65px, 10vw, 70px);
+ 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..f4d05d3 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;
@@ -3032,7 +3046,7 @@ body {
#about .about-image {
width: 100%;
- max-width: clamp(260px, 38vw, 480px);
+ max-width: clamp(200px, 38vw, 300px);
height: auto;
object-fit: contain;
margin-left: auto;
@@ -3133,6 +3147,124 @@ 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(1.8rem, 2.8vw, 2.5rem);
+ /* oben/unten -> Höhe */
+ --btn-px: clamp(1.8rem, 2.8vw, 2.5rem);
+ /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
+ --btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
+ /* Schriftgröße */
+ position: relative;
+ overflow: hidden;
+ padding: clamp(6rem, 10vw, 12rem) 0;
+ /* Section höher wie „Standard-Sektion“ */ }
+
+.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(65px, 10vw, 70px);
+ height: clamp(65px, 10vw, 70px);
+ 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); }
+
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
.logo-container {
width: 80%;