From 4f1e5eddac058a24ab5ff3a6d095f8ac71a83abc Mon Sep 17 00:00:00 2001 From: Alexander-Stosic Date: Wed, 30 Jul 2025 00:35:15 +0200 Subject: [PATCH] Update: Abschluss 29.07.2025 --- assets/scss/_typography.scss | 136 +++--- assets/scss/custom.scss | 231 ++++++++--- assets/scss/why-amperion.scss | 140 ------- content/german/_index.md | 3 +- content/german/about.md | 16 +- content/german/why-amperion.md | 67 --- layouts/_default/about.html | 106 ++--- layouts/index.html | 390 ++++++++---------- layouts/partials/footer.html | 8 + layouts/partials/head.html | 2 + layouts/partials/page-title.html | 17 +- layouts/partials/whyamperion.html | 25 -- ...s_d9077b5cab49df084fb1a39ad4b1e75d.content | 317 +++++++++----- 13 files changed, 698 insertions(+), 760 deletions(-) delete mode 100644 assets/scss/why-amperion.scss delete mode 100644 content/german/why-amperion.md delete mode 100644 layouts/partials/whyamperion.html diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index bf027cc..864f2a3 100644 --- a/assets/scss/_typography.scss +++ b/assets/scss/_typography.scss @@ -1,77 +1,95 @@ -// Fonts - -@font-face { - font-family: 'Open Sans'; - src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans Semibold'; - src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2'); - font-weight: normal; - font-style: normal; -} - -// Using Variables for Font Families -$font-primary: 'Open Sans', sans-serif; -$font-secondary: 'Open Sans Semibold', sans-serif; -$color-heading-h2: #046e6e; // Türkis für h2 +// =========================== +// TYPOGRAPHY – Schriftarten & Textstile +// =========================== body { - line-height: 1.5; - font-family: $font-primary; + font-family: 'Open Sans', sans-serif; + font-size: 16px; + line-height: 1.6; + color: #222; -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -h1, -h3, -h4, -h5, -h6 { - font-family: $font-secondary; - font-weight: 400; - // keine Farbe, Standardfarbe übernehmen +// --------------------------- +// Überschriften-Stile +// --------------------------- + +h1 { + font-size: 3rem; // Größere Hauptüberschrift + font-weight: 600; + line-height: 1.3; + margin-bottom: 1rem; + color: #046e6e; } h2 { - font-family: $font-secondary; + font-size: 2rem; // Deutlich kleiner als H1 + font-style: italic; font-weight: 400; - color: $color-heading-h2; // Nur h2 in Türkis - font-size: $h2; - - @include mobile { - font-size: $h2-sm; - } -} - -h1 { - font-size: $h1; - - @include tablet { - font-size: $h1-md; - } - - @include mobile { - font-size: $h2; - } - - @include mobile-xs { - font-size: $h2-md; - } + line-height: 1.4; + margin-bottom: 1rem; + color: #222; // Normale Textfarbe } h3 { - font-size: $h3; + font-size: 1.5rem; + font-weight: normal; + line-height: 1.6; + margin-bottom: 1rem; + color: inherit; // wie Fließtext } -h4 { - font-size: $h4; +// --------------------------- +// Textausrichtung +// --------------------------- + +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } + +// --------------------------- +// Text-Elemente +// --------------------------- + +strong, b { + font-weight: 700; +} + +em, i { + font-style: italic; } p { - color: black; - font-size: $font-size; - font-family: $font-secondary; + margin-bottom: 1.25rem; +} + +// --------------------------- +// Listen +// --------------------------- + +ul, ol { + padding-left: 1.5rem; + margin-bottom: 1.5rem; +} + +li { + margin-bottom: 0.5rem; + line-height: 1.6; +} + +// --------------------------- +// Links +// --------------------------- + +a { + color: #046e6e; + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: #F5A623; + text-decoration: underline; } diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index cf0b9a0..6dc7a93 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -1,3 +1,4 @@ +/* ========== Typografie & Basis ========== */ .title-custom { color: #046e6e; } @@ -11,14 +12,17 @@ } section { - margin-bottom: 0px; + margin-bottom: 0; } -#welcome.section, #service.section { +/* ========== Sektionen Padding (Intro etc.) ========== */ +#welcome.section, +#service.section { padding-top: 90px; padding-bottom: 4px; } +/* ========== Beschreibung ========== */ .description { font-size: 22px; line-height: 1.5; @@ -36,6 +40,7 @@ section { } } +/* ========== Fakten ========== */ .facts .fact-item { padding: 15px; } @@ -48,12 +53,29 @@ section { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } +/* ========== Hintergründe ========== */ .custom-background { background-size: cover; background-position: center; background-repeat: no-repeat; } +.gif-background { + background-image: url('/images/BackgroundAnimation.svg'); + background-size: cover; + background-position: center -220px; + background-repeat: no-repeat; + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background-color: rgba(255, 255, 255, 0.8); + } +} + +/* ========== Service-Layout (Kacheln / Pfeile) ========== */ .service-arrow .block { display: flex; align-items: center; @@ -67,7 +89,8 @@ section { flex: 1; } -.service-icon, .service-image { +.service-icon, +.service-image { margin: 0; } @@ -77,32 +100,22 @@ section { display: block; } -.bg-service1, .bg-service3, .bg-service5, .bg-service7 { +/* Farbvarianten für Services */ +.bg-service1, +.bg-service3, +.bg-service5, +.bg-service7 { background-color: #8bcfd6; } -.bg-service2, .bg-service4, .bg-service6, .bg-service8 { +.bg-service2, +.bg-service4, +.bg-service6, +.bg-service8 { background-color: #6baeb5; } -.fixed-width { - width: 1200px; -} - -.fixed-text { - width: 600px; - margin-right: 15px; -} - -.page-title::before { - content: ''; - position: absolute; - top: 0; left: 0; - width: 100%; height: 100%; - background-color: #ffffff; - z-index: -1; -} - +/* Service-Gitter */ .service-grid { display: grid; gap: 30px; @@ -129,30 +142,30 @@ section { width: 100%; height: 100%; position: relative; -} -.service-item-fixed:hover .zoom-wrap { - transform: scale(1.06); -} + &:hover { + transform: scale(1.06); + } -.zoom-wrap img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} + img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } -.zoom-wrap a { - display: block; - text-decoration: none; - color: inherit; -} + a { + display: block; + text-decoration: none; + color: inherit; + } -.zoom-wrap .overlay { - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - background: rgba(0, 0, 0, 0.4); - z-index: 1; + .overlay { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 1; + } } .overlay-text { @@ -166,26 +179,96 @@ section { z-index: 2; } +/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ +.why-grid { + display: grid; + gap: 2rem; + + /* Desktop: 3 Spalten => 3×2 */ + grid-template-columns: repeat(3, minmax(0, 1fr)); + + /* Jede Zeile passt sich der höchsten Karte an */ + align-items: stretch; +} + +/* Tablet: 2 Spalten => 2×3 */ +@media (max-width: 991.98px) { + .why-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* Mobil: 1 Spalte => 1×6 */ +@media (max-width: 575.98px) { + .why-grid { + grid-template-columns: 1fr; + } +} + +/* Karten sollen die Zellen voll ausfüllen */ +.service-card { + display: flex; + flex-direction: column; + height: 100%; /* gleiche Höhe pro Zeile */ + background: #fff; + padding: 1.5rem; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0,0,0,.05); + transition: transform .25s ease, box-shadow .25s ease; + text-align: center; +} + +/* Icon einheitlich */ +.service-icon { + width: 56px; + height: 56px; + object-fit: contain; + margin: 0 auto .75rem auto; + display: block; +} + +/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */ +.service-card-title { + font: inherit; + font-weight: 600; + margin: .25rem 0 .5rem; + color: #0f2f2f; +} + +.service-card-description { + font: inherit; + color: #444; + line-height: 1.6; + margin: 0; +} + +/* ========== Container & Layout-Hilfen ========== */ .my-container { width: 80%; margin: 0 auto; } -.gif-background { - background-image: url('/images/BackgroundAnimation.svg'); - background-size: cover; - background-position: center -220px; - background-repeat: no-repeat; - position: relative; +.fixed-width { + max-width: 1200px; + margin: 0 auto; } -.gif-background::after { +.fixed-text { + max-width: 600px; + margin-right: 15px; +} + +/* ========== Titel mit Hintergrund ========== */ +.page-title::before { content: ''; position: absolute; - top: 0; left: 0; right: 0; bottom: 0; - background-color: rgba(255, 255, 255, 0.8); + top: 0; left: 0; + width: 100%; height: 100%; + background-color: #ffffff; + z-index: -1; } +/* ========== Bildkomponenten & Icons ========== */ .custom-image { width: 100px; max-width: 70%; @@ -196,15 +279,16 @@ section { color: #046e6e; } +/* ========== Hover Links ========== */ .hover-link { transition: color 0.3s ease; + + &:hover { + color: #F5A623; + } } -.hover-link:hover { - color: #F5A623; -} - -/* Mehrwert */ +/* ========== Mehrwerte ========== */ .mehrwerte-grid { display: grid; gap: 0; @@ -219,7 +303,6 @@ section { } } - .mehrwerte-box { display: flex; flex-direction: column; @@ -233,25 +316,43 @@ section { background-color: lighten(#004d4d, 10%); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + + h4, p { + color: #000 !important; + } } - h4, - p { + + h4, p { color: #000 !important; transition: color 0.3s ease; } - &:hover h4, - &:hover p { - color: #000 !important; - } } + .mehrwert-icon { filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); } -/* Gründerteam Styling */ +/* ========== Gründerteam & Intro-Text ========== */ .container-fluid { max-width: 100%; padding-left: 5vw; padding-right: 5vw; } +#about-intro .intro-text { + font-size: 1.25rem; + line-height: 1.85; + max-width: 200ch; + hyphens: auto; + -webkit-hyphens: auto; + overflow-wrap: anywhere; + margin-bottom: 1rem; + + p, li { + margin-bottom: 1rem; + } + + @media (min-width: 992px) { + font-size: 1.35rem; + } +} diff --git a/assets/scss/why-amperion.scss b/assets/scss/why-amperion.scss deleted file mode 100644 index 472c548..0000000 --- a/assets/scss/why-amperion.scss +++ /dev/null @@ -1,140 +0,0 @@ -/* 1) Container, z. B. 80% Seitenbreite */ -.my-container { - width: 80%; - margin: 0 auto; - padding: 40px 0; /* Abstand oben & unten */ - } - - /* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */ - .why-title { - font-size: 2rem; - margin-bottom: 10px; - } - - .why-subtitle { - font-size: 1.2rem; - color: #666; - margin-bottom: 40px; - } - - /* 3) Warum-Blocks (linke + rechte Spalte) */ - .why-block p { - text-align: justify; - margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */ - } - - .why-block h4 { - margin: 100px 0; - font-weight: bold; - } - - /* 4) Icon + Logo-Größen anpassen */ - .why-icon { - width: 50px; /* Iconbreite */ - height: auto; - - margin: 200px; - } - - .why-logo { - max-width: 500px; /* Logo in der Mitte */ - height: auto; - margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */ - - } - - /* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier: - .why-title, .why-subtitle, .why-block, .why-logo { - text-align: center; - } - */ - - - -.section-title1 { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; /* Abstand zwischen Icon und Titel */ -} - - - -.why-title1 { - margin: 0; /* Entfernt zusätzliche Ränder */ -} - -.icon-heading { - display: flex; - align-items: center; - -} - -.col-icon { - width: 10px; - flex: 0 0 10px; - max-width: 10px; -} - -.col-heading { - width: 100px; /* Beispiel: 100px für die Überschrift */ - flex: 0 0 100px; - max-width: 100px; - - white-space: nowrap; /* verhindert Zeilenumbruch */ - -} - - -.why-icon1 { - width: 10px; /* Breite des Icons */ - height: auto; /* Höhe automatisch anpassen */ -} - -.heading-text { - font-size: 18px; - font-weight: bold; -} - -.why-block h4 { - margin: 0; /* Entfernt zusätzliche Ränder */ -} - -.section-title1 { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; /* Abstand zwischen Icon und Titel */ -} - -.title-icon1 { - width: 30px; /* Breite des Icons */ - height: auto; /* Höhe automatisch anpassen */ -} - -.why-title1 { - margin: 0; /* Entfernt zusätzliche Ränder */ - font-size: 2rem; -} - -.col-md-4.text-center .why-logo { - margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */ -} - - -/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */ -.why-amperion { - margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */ -} - -/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */ -.about { - margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */ -} - -.col-fixed { - width: 10px; - flex: 0 0 10px; - max-width: 10px; -} - diff --git a/content/german/_index.md b/content/german/_index.md index 20bdd1d..694ae64 100644 --- a/content/german/_index.md +++ b/content/german/_index.md @@ -24,8 +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. Zukunftsfähig.
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

" - link_text: "Mehr über uns." + 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. Zukunftsfähig.
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/)

" image: "images/ingenieurbuero.webp" ############################# About ################################# diff --git a/content/german/about.md b/content/german/about.md index 4049d44..f6d9e13 100644 --- a/content/german/about.md +++ b/content/german/about.md @@ -1,6 +1,5 @@ --- title: "Wir sind AMPERION" -subtitle: "Technik mit Verantwortung. Planung mit Weitblick." bg_image: "" layout: "about" draft: false @@ -8,10 +7,19 @@ draft: false intro_section: enable: true text: > - **AMPERION GmbH** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessio­nierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. - Wir entwickeln nachhaltige Energielösungen für Unternehmen, Gemeinden, Bauträger – und auch Privatpersonen, die auf Qualität und Zukunftssicherheit setzen. - Dabei begleiten wir Projekte von der Idee bis zur Inbetriebnahme – **unabhängig**, **technisch fundiert** und **zukunftsorientiert**. + **AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich.
+ +
Wir unterstützen Unternehmen, Gemeinden, Bauträger und Privatpersonen bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit klarem Fokus auf **Photovoltaik**, **Speicherlösungen**, **Ladeinfrastruktur** und **smarte Gebäudetechnik**.
+ + 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 **Know‑how** und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zum Betrieb.

image: "images/amperion_intro.webp" + tags: + - Unabhängig + - Technisch fundiert + - Zukunftsorientiert + + ################################## About ##################################### about: diff --git a/content/german/why-amperion.md b/content/german/why-amperion.md deleted file mode 100644 index 44c440d..0000000 --- a/content/german/why-amperion.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Leistungen" -description: "Beschreibung der angebotenen Dienstleistungen" -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: "Technische Planungskompetenz" - image: "icons/file-badge.svg" - - content: "Langjährige Erfahrung mit komplexer Energieplanung – normgerecht, effizient & zukunftssicher." - - - name: "Intelligente Energiesysteme" - image: "icons/plug-zap.svg" - - content: "Von PV bis Speicher und Lastmanagement – für maximale Eigenversorgung und Netzverträglichkeit." - - - name: "Persönliche Betreuung" - image: "icons/headset.svg" - - content: "Kurze Wege, schnelle Antworten, direkte Ansprechpartner – auch nach Projektabschluss." - - - name: " Reibungslose Projektabwicklung" - image: "icons/hard-hat.svg" - - content: "Wir übernehmen die technische Koordination – von Einreichung bis Ausschreibung." - - - name: " Vernetzte Energiezukunft" - image: "icons/network.svg" - - content: "Wir denken Energie ganzheitlich – modular, digital und wachstumsfähig geplant." - - - name: "Präzise Systemplanung" - image: "icons/circuit-board.svg" - - content: "Alle Komponenten exakt aufeinander abgestimmt – wirtschaftlich und regelkonform." - -############################# Service ############################### -service: - title: "Darum AMPERION" - description: "Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme." - service_item: - - picture: "images/services_main/energiekonzepte.webp" - name: "Energiekonzepte" - link: "/service/energiekonzepte" - - - picture: "images/services_main/projektmanagement.webp" - name: "Projektmanagement" - link: "/service/projektmanagement" - - - picture: "images/services_main/elektromobilitaet.webp" - name: "Elektromobilität" - link: "/service/elektromobilitaet" - -############################# Call to Action ################################# -cta: - enable: true ---- diff --git a/layouts/_default/about.html b/layouts/_default/about.html index 765a7ff..cbdd24d 100644 --- a/layouts/_default/about.html +++ b/layouts/_default/about.html @@ -2,48 +2,76 @@ {{ partial "page-title.html" . }} - + {{ with .Params.intro_section }} {{ if .enable }}
-
- -
-

- Technik mit Verantwortung. Planung mit Weitblick. -

-
- -
- - -
-
+
+ + +
+ + +
+
{{ .text | markdownify }}
+ + +
+ {{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }} + {{ range .tags }} + + {{ index $icons . }} {{ . }} + + {{ end }} +
- -
+ +
AMPERION Intro + alt="AMPERION – Erneuerbare Energie" + loading="lazy" + decoding="async" + class="img-fluid" + style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
-
+ + + {{ with $.Params.mission_vision }} + {{ if .enable }} +
+
+
+
    + {{ range $index, $elements := .tabs }} +
  • + {{ .name }} +
    • + {{ end }} +
+
+ {{ range $index, $elements := .tabs }} +
+ {{ .content | $.Page.RenderString (dict "display" "block") }} +
+ {{ end }} +
+
+
+
+ {{ end }} + {{ end }} +
{{ end }} {{ end }} - - - - -
@@ -93,34 +121,6 @@
- -
-
- {{ with .Params.mission_vision }} - {{ if .enable }} -
-
-
    - {{ range $index, $elements := .tabs }} -
  • - {{ .name }} -
    • - {{ end }} -
-
- {{ range $index, $elements := .tabs }} -
- {{ .content | $.Page.RenderString (dict "display" "block") }} -
- {{ end }} -
-
-
- {{ end }} - {{ end }} -
-
-
{{ with .Params.about }} diff --git a/layouts/index.html b/layouts/index.html index 12a8b87..e3b3833 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,180 +1,117 @@ {{ define "main" }}
- {{ with .Params.banner }} - {{ if .enable }} -
-
- -
- -
- -
- -
- -
-
+ {{ if .enable }} + +
+
+ +
+
+ +
+
+ +
+
+ +
+ {{ with .title }} +

{{ . | markdownify }}

+ {{ end }} - -
- {{ with .title }} -

- {{ . | markdownify }} -

- {{ end }} - - {{ with .button }} - {{ if .enable }} - - {{ end }} - {{ end }} + {{ with .button }} + {{ if .enable }} + -
- {{ end }} + {{ end }} + {{ end }} +
+ +
+ {{ end }} {{ end }}
- - - + - - -
- -{{ if .Params.whyamperion.enable }} -{{ partial "whyamperion.html" . }} -{{ end }} - - - - - - - -{{ with site.GetPage "/service" }} + +{{ with site.GetPage "/whyamperion" }} {{ with .Params.service }} -
- -
- -
- {{ with .title }}

{{ . | markdownify }}

{{ end }} +
+
+
+
+ {{ with .title }}

{{ . | markdownify }}

{{ end }} + {{ with .description }}

{{ . | markdownify }}

{{ end }} +
-
- {{ with .description }}

{{ . | markdownify }}

{{ end }} -
- -
- {{ range first 3 .service_item }} -
-
- - {{ .name }} -
- {{ .name }} -
-
- +
+ {{ range .service_item }} +
+
+ +

{{ .name | markdownify }}

+

{{ .content | markdownify }}

{{ end }} -
-
+
+
{{ end }} {{ end }} - - -{{ with site.GetPage "/focustopic" }} + +{{ with site.GetPage "/service" }} {{ with .Params.service }}
- {{ with .title }}

{{ . | markdownify }}

{{ end }} + {{ with .title }}

{{ . | markdownify }}

{{ end }}
- {{ with .description }}

{{ . | markdownify }}

{{ end }} + {{ with .description }}

{{ . | markdownify }}

{{ end }}
{{ range first 3 .service_item }} @@ -182,9 +119,7 @@
{{ .name }} -
- {{ .name }} -
+
{{ .name }}
@@ -195,41 +130,104 @@
{{ end }} {{ end }} - -
- - -{{ with site.GetPage "/why-amperion" }} -
-

{{ .Params.service.title | default "OUR SERVICES" }}

-

{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}

-
- {{ range first 6 .Params.featured_service.service_item }} -
- {{ .name }} -

{{ .name }}

-

{{ .content1 | markdownify }} {{ .content | markdownify }}

+ +{{ with site.GetPage "/focustopic" }} +{{ with .Params.service }} +
+
+
+ {{ with .title }}

{{ . | markdownify }}

{{ end }} +
+
+ {{ with .description }}

{{ . | markdownify }}

{{ end }} +
+
+ {{ range first 3 .service_item }} +
+
+ + {{ .name }} +
{{ .name }}
+
+ +
+
+ {{ end }}
- {{ end }}
{{ end }} - - - -
- - - -{{ if .Params.contact.enable }} -{{ partial "cta.html" . }} {{ end }} + +
+
+ + +
+
+

Darum AMPERION

+

Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.

+
+
+ + +
+
+ Technische Planungskompetenz Icon +

Technische Planungskompetenz

+

+ Langjährige Erfahrung mit komplexer Energieplanung – normgerecht, effizient & zukunftssicher. +

+
+ +
+ Intelligente Energiesysteme Icon +

Intelligente Energiesysteme

+

+ Von PV bis Speicher und Lastmanagement – für maximale Eigenversorgung und Netzverträglichkeit. +

+
+ +
+ Persönliche Betreuung Icon +

Persönliche Betreuung

+

+ Kurze Wege, schnelle Antworten – direkte Ansprechpartner, auch nach Projektabschluss. +

+
+ +
+ Reibungslose Projektabwicklung Icon +

Reibungslose Projektabwicklung

+

+ Wir übernehmen die technische Koordination – von Einreichung bis Ausschreibung. +

+
+ +
+ Vernetzte Energiezukunft Icon +

Vernetzte Energiezukunft

+

+ Wir denken Energie ganzheitlich – modular, digital und wachstumsfähig geplant. +

+
+ +
+ Präzise Systemplanung Icon +

Präzise Systemplanung

+

+ Alle Komponenten exakt abgestimmt – wirtschaftlich und regelkonform. +

+
+
+ +
+
- - + {{ with .Params.about }} {{ if .enable }}
@@ -237,21 +235,20 @@
- {{ with .title }}

{{ . | markdownify }}

{{ end }} + {{ with .title }}

{{ . | markdownify }}

{{ end }}
- {{ with .description }}

{{ . | markdownify }}

{{ end }} + {{ with .description }}

{{ . | markdownify }}

{{ end }}
- {{ with .content }}{{ . | markdownify }}{{ end }}
-
- {{ with .link_text }} - {{ . }} - {{ end }} + {{ with .content }}{{ . | markdownify }}{{ end }} +
+
+ {{ with .link_text }}{{ . }}{{ end }}
@@ -264,17 +261,13 @@
{{ end }} {{ end }} - - -
- + {{ if .Params.cta.enable }} {{ partial "cta.html" . }} {{ end }} - -
- + + {{ with .Params.facts }} {{ if .enable }}
@@ -293,59 +286,4 @@ {{ end }} {{ end }} - - - - -
- - - - - - - {{ end }} - diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d004ed8..4b04f64 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -15,3 +15,11 @@
+ + + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 87a7feb..7647364 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -66,4 +66,6 @@ {{ template "_internal/opengraph.html" . }} + + diff --git a/layouts/partials/page-title.html b/layouts/partials/page-title.html index dde3de2..ecf4403 100644 --- a/layouts/partials/page-title.html +++ b/layouts/partials/page-title.html @@ -1,13 +1,16 @@ -
+
-
-
-

{{ .Title }}

- {{ with .Params.description }} -

{{ . }}

- {{ end }} +
+
+

{{ .Title }}

+ {{ with .Params.description }} +
+

{{ . | markdownify }}

+
+ {{ end }}
diff --git a/layouts/partials/whyamperion.html b/layouts/partials/whyamperion.html deleted file mode 100644 index bbcb7b7..0000000 --- a/layouts/partials/whyamperion.html +++ /dev/null @@ -1,25 +0,0 @@ -{{ with site.GetPage "/whyamperion" }} -{{ with .Params.service }} -
-
-
-
- {{ with .title }}

{{ . | markdownify }}

{{ end }} - {{ with .description }}

{{ . | markdownify }}

{{ end }} -
-
-
- {{ range .service_item }} -
-
- -

{{ .name | markdownify }}

-

{{ .content | markdownify }}

-
-
- {{ end }} -
-
-
-{{ end }} -{{ end }} diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content index b6e413c..dd0299c 100644 --- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content +++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content @@ -1,59 +1,72 @@ @charset "UTF-8"; /*=== MEDIA QUERY ===*/ -@font-face { - font-family: 'Open Sans'; - src: local("Open Sans"), local("OpenSans"), url("/static/fonts/OpenSans-SemiboldItalic.woff2") format("woff2"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: 'Open Sans Semibold'; - src: local("Open Sans Semibold"), local("OpenSansSemibold"), url("/static/fonts/OpenSans-Semibold.woff2") format("woff2"); - font-weight: normal; - font-style: normal; } - body { - line-height: 1.5; - font-family: "Open Sans", sans-serif; - -webkit-font-smoothing: antialiased; } + font-family: 'Open Sans', sans-serif; + font-size: 16px; + line-height: 1.6; + color: #222; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -h1, -h3, -h4, -h5, -h6 { - font-family: "Open Sans Semibold", sans-serif; - font-weight: 400; } +h1 { + font-size: 3rem; + font-weight: 600; + line-height: 1.3; + margin-bottom: 1rem; + color: #046e6e; } h2 { - font-family: "Open Sans Semibold", sans-serif; + font-size: 2rem; + font-style: italic; font-weight: 400; - color: #046e6e; - font-size: 28px; } - @media (max-width: 480px) { - h2 { - font-size: 22px; } } -h1 { - font-size: 80px; } - @media (max-width: 768px) { - h1 { - font-size: 34px; } } - @media (max-width: 480px) { - h1 { - font-size: 28px; } } - @media (max-width: 400px) { - h1 { - font-size: 26px; } } -h3 { - font-size: 20px; } + line-height: 1.4; + margin-bottom: 1rem; + color: #222; } -h4 { - font-size: 25px; } +h3 { + font-size: 1.5rem; + font-weight: normal; + line-height: 1.6; + margin-bottom: 1rem; + color: inherit; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +.text-justify { + text-align: justify; } + +strong, b { + font-weight: 700; } + +em, i { + font-style: italic; } p { - color: black; - font-size: 15px; - font-family: "Open Sans Semibold", sans-serif; } + margin-bottom: 1.25rem; } + +ul, ol { + padding-left: 1.5rem; + margin-bottom: 1.5rem; } + +li { + margin-bottom: 0.5rem; + line-height: 1.6; } + +a { + color: #046e6e; + text-decoration: none; + transition: color 0.3s ease; } + +a:hover { + color: #F5A623; + text-decoration: underline; } ul { margin: 0; @@ -266,7 +279,7 @@ input[type="tel"] { .section-title p { font-style: italic; color: #626262; - font-family: "Open Sans Semibold", sans-serif; + font-family: "Open Sans Semibold", serif; font-size: 1em; /* Standard Schriftgröße für p */ } @media (max-width: 768px) { @@ -1210,7 +1223,7 @@ h2, h3 { font-size: 35px; margin-bottom: 20px; } .testimonial .testimonial-carousel p { - font-family: "Open Sans Semibold", sans-serif; + font-family: "Open Sans Semibold", serif; line-height: 28px; padding-bottom: 20px; } .testimonial .testimonial-carousel .user img { @@ -2521,6 +2534,7 @@ h2, h3 { .footer .copyright a { font-weight: 600; } +/* ========== Typografie & Basis ========== */ .title-custom { color: #046e6e; } @@ -2531,12 +2545,15 @@ h2, h3 { text-align: justify; } section { - margin-bottom: 0px; } + margin-bottom: 0; } -#welcome.section, #service.section { +/* ========== Sektionen Padding (Intro etc.) ========== */ +#welcome.section, +#service.section { padding-top: 90px; padding-bottom: 4px; } +/* ========== Beschreibung ========== */ .description { font-size: 22px; line-height: 1.5; @@ -2550,6 +2567,7 @@ section { .description { font-size: 16px; padding-top: 50px; } } +/* ========== Fakten ========== */ .facts .fact-item { padding: 15px; } @@ -2560,11 +2578,28 @@ section { border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } +/* ========== Hintergründe ========== */ .custom-background { background-size: cover; background-position: center; background-repeat: no-repeat; } +.gif-background { + background-image: url("/images/BackgroundAnimation.svg"); + background-size: cover; + background-position: center -220px; + background-repeat: no-repeat; + position: relative; } + .gif-background::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0.8); } + +/* ========== Service-Layout (Kacheln / Pfeile) ========== */ .service-arrow .block { display: flex; align-items: center; @@ -2576,7 +2611,8 @@ section { .service-content { flex: 1; } -.service-icon, .service-image { +.service-icon, +.service-image { margin: 0; } .service-image img { @@ -2584,29 +2620,20 @@ section { height: auto; display: block; } -.bg-service1, .bg-service3, .bg-service5, .bg-service7 { +/* Farbvarianten für Services */ +.bg-service1, +.bg-service3, +.bg-service5, +.bg-service7 { background-color: #8bcfd6; } -.bg-service2, .bg-service4, .bg-service6, .bg-service8 { +.bg-service2, +.bg-service4, +.bg-service6, +.bg-service8 { background-color: #6baeb5; } -.fixed-width { - width: 1200px; } - -.fixed-text { - width: 600px; - margin-right: 15px; } - -.page-title::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #ffffff; - z-index: -1; } - +/* Service-Gitter */ .service-grid { display: grid; gap: 30px; @@ -2628,29 +2655,25 @@ section { width: 100%; height: 100%; position: relative; } - -.service-item-fixed:hover .zoom-wrap { - transform: scale(1.06); } - -.zoom-wrap img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; } - -.zoom-wrap a { - display: block; - text-decoration: none; - color: inherit; } - -.zoom-wrap .overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(0, 0, 0, 0.4); - z-index: 1; } + .zoom-wrap:hover { + transform: scale(1.06); } + .zoom-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; } + .zoom-wrap a { + display: block; + text-decoration: none; + color: inherit; } + .zoom-wrap .overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 1; } .overlay-text { position: absolute; @@ -2663,26 +2686,84 @@ section { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); z-index: 2; } +/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ +.why-grid { + display: grid; + gap: 2rem; + /* Desktop: 3 Spalten => 3×2 */ + grid-template-columns: repeat(3, minmax(0, 1fr)); + /* Jede Zeile passt sich der höchsten Karte an */ + align-items: stretch; } + +/* Tablet: 2 Spalten => 2×3 */ +@media (max-width: 991.98px) { + .why-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } + +/* Mobil: 1 Spalte => 1×6 */ +@media (max-width: 575.98px) { + .why-grid { + grid-template-columns: 1fr; } } + +/* Karten sollen die Zellen voll ausfüllen */ +.service-card { + display: flex; + flex-direction: column; + height: 100%; + /* gleiche Höhe pro Zeile */ + background: #fff; + padding: 1.5rem; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + transition: transform .25s ease, box-shadow .25s ease; + text-align: center; } + +/* Icon einheitlich */ +.service-icon { + width: 56px; + height: 56px; + object-fit: contain; + margin: 0 auto .75rem auto; + display: block; } + +/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */ +.service-card-title { + font: inherit; + font-weight: 600; + margin: .25rem 0 .5rem; + color: #0f2f2f; } + +.service-card-description { + font: inherit; + color: #444; + line-height: 1.6; + margin: 0; } + +/* ========== Container & Layout-Hilfen ========== */ .my-container { width: 80%; margin: 0 auto; } -.gif-background { - background-image: url("/images/BackgroundAnimation.svg"); - background-size: cover; - background-position: center -220px; - background-repeat: no-repeat; - position: relative; } +.fixed-width { + max-width: 1200px; + margin: 0 auto; } -.gif-background::after { +.fixed-text { + max-width: 600px; + margin-right: 15px; } + +/* ========== Titel mit Hintergrund ========== */ +.page-title::before { content: ''; position: absolute; top: 0; left: 0; - right: 0; - bottom: 0; - background-color: rgba(255, 255, 255, 0.8); } + width: 100%; + height: 100%; + background-color: #ffffff; + z-index: -1; } +/* ========== Bildkomponenten & Icons ========== */ .custom-image { width: 100px; max-width: 70%; @@ -2691,13 +2772,13 @@ section { .custom-title { color: #046e6e; } +/* ========== Hover Links ========== */ .hover-link { transition: color 0.3s ease; } + .hover-link:hover { + color: #F5A623; } -.hover-link:hover { - color: #F5A623; } - -/* Mehrwert */ +/* ========== Mehrwerte ========== */ .mehrwerte-grid { display: grid; gap: 0; @@ -2720,22 +2801,34 @@ section { background-color: teal; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } - .mehrwerte-box h4, - .mehrwerte-box p { + .mehrwerte-box:hover h4, .mehrwerte-box:hover p { + color: #000 !important; } + .mehrwerte-box h4, .mehrwerte-box p { color: #000 !important; transition: color 0.3s ease; } - .mehrwerte-box:hover h4, .mehrwerte-box:hover p { - color: #000 !important; } .mehrwert-icon { filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); } -/* Gründerteam Styling */ +/* ========== Gründerteam & Intro-Text ========== */ .container-fluid { max-width: 100%; padding-left: 5vw; padding-right: 5vw; } +#about-intro .intro-text { + font-size: 1.25rem; + line-height: 1.85; + max-width: 200ch; + hyphens: auto; + -webkit-hyphens: auto; + overflow-wrap: anywhere; + margin-bottom: 1rem; } + #about-intro .intro-text p, #about-intro .intro-text li { + margin-bottom: 1rem; } + @media (min-width: 992px) { + #about-intro .intro-text { + font-size: 1.35rem; } } html { scroll-behavior: smooth; }