diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 950b559..7d24e10 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -111,9 +111,10 @@ section { flex: 1; } -.service-icon, + .service-image { margin: 0; + } .service-image img { @@ -246,7 +247,7 @@ section { color: #333; } } -/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ +/* ========== WHY AMPERION ========== */ .why-grid { display: grid; gap: 2rem; @@ -931,7 +932,6 @@ body { .cta__lead { margin: .9rem auto 0; color: #0f172a; - font-size: clamp(1.2rem, 2.8vw, 1.7rem); line-height: 1.55; max-width: 58rem; position: relative; @@ -1108,8 +1108,21 @@ body { } /* About-Intro: Video ohne abgerundete Ecken */ -.intro-video { width: 100%; height: 100%; object-fit: cover; display: block; } -.intro-media, .intro-video { border-radius: 0 !important; } /* überschreibt evtl. globale Styles */ +/* About-Intro: Video mit weichen Kanten */ +.intro-video { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + border-radius: 12px; /* Weiche Kanten */ +} + +.intro-media { + overflow: hidden; /* sorgt dafür, dass der Radius auch das Video schneidet */ + border-radius: 12px; /* gleicher Radius wie Video */ + +} + /* ======================================== @@ -1141,84 +1154,69 @@ body { } } -/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */ +/* =========================== + Mission / Vision / Ziel + =========================== */ .mission-section { + + /* Wrapper sauber mittig + schmaler */ + .mission-tabs-wrapper{ + max-width: 920px; + margin-inline: auto; + } + + /* Tabs */ .mission-tabs { border-bottom: 1px solid #eaeaea; margin-bottom: 1rem; + text-align: center; // Tabs mittig - .nav-link { + .nav-link{ border: 0; - padding: .5rem 1rem; - font-weight: 600; + padding: .45rem .9rem; color: #046e6e; opacity: .7; + background: transparent; + cursor: pointer; + transition: all .2s ease; - &.active, - &:hover { + &:hover{ opacity: 1; + color: #F5A623; /* Hover Orange */ + border-bottom: 2px solid #F5A623; + } + &.active{ + opacity: 1; + color: #046e6e; /* aktiv Türkis */ border-bottom: 2px solid #046e6e; - background: transparent; } } } - .mission-tab-content { - .tab-inner { - background: #fff; - border: 1px solid #eee; - border-radius: .75rem; - padding: 1.25rem; - box-shadow: 0 8px 24px rgba(0,0,0,.04); + /* Inhalt – sofortiger Wechsel, p-Standard */ + .mission-tab-content{ + .tab-pane{ display:none; } + .tab-pane.active{ display:block; } - p { margin-bottom: .9rem; } - p:last-child { margin-bottom: 0; } + .tab-inner{ + background:#fff; + border:1px solid #eee; + border-radius:.75rem; + padding:1.25rem; + box-shadow:0 8px 24px rgba(0,0,0,.04); + p:last-child{ margin-bottom:0; } } } } -/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */ -.why-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 1.25rem; - - @media (max-width: 992px) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - @media (max-width: 576px) { - grid-template-columns: 1fr; +/* Kleinere Bildschirme: etwas kompakter */ +@media (max-width: 576px){ + .mission-section{ + .mission-tabs .nav-link{ padding:.4rem .7rem; } + .mission-tabs-wrapper{ max-width: 100%; } } } -.service-card { - background: #fff; - border: 1px solid #eee; - border-radius: .75rem; - padding: 1.25rem; - height: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - text-align: center; - box-shadow: 0 8px 24px rgba(0,0,0,.04); - - .service-icon { - width: 48px; - height: 48px; - margin: 0 auto .5rem; - display: block; - } - - .service-card-title { - font-weight: 700; - margin-bottom: .35rem; - } - - .service-card-description { - margin: 0; - } -} /* 4) Team-Block: Karten & Bild */ .team-image { diff --git a/content/german/about.md b/content/german/about.md index ef2765b..d878e53 100644 --- a/content/german/about.md +++ b/content/german/about.md @@ -10,14 +10,14 @@ intro_section: **AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. Gegründet im Jahr 2024 von **Markus Wimmer, BSc**, und **Ing. Alexander Stosic, MSc**, steht unser Unternehmen für innovative, wirtschaftlich sinnvolle und technisch ausgereifte Lösungen im Bereich moderner Energiesysteme.

- Wir planen, prüfen und begleiten die Umsetzung von **Photovoltaik-Anlagen**, **Stromspeichersystemen**, **Ladeinfrastruktur** für E-Mobilität sowie **smarter Gebäudetechnik** – von der ersten Idee bis zur erfolgreichen Inbetriebnahme. Dabei arbeiten wir für **Unternehmen**, **Gemeinden**, **Bauträger** und **Privatkunden** gleichermaßen.

+ Wir planen, prüfen und begleiten die Umsetzung von **Photovoltaik-Anlagen**, **Stromspeichersystemen**, **Ladeinfrastruktur** für **E-Mobilität** sowie **smarter Gebäudetechnik** – von der ersten Idee bis zur erfolgreichen Inbetriebnahme. Dabei arbeiten wir für Unternehmen, Gemeinden, Bauträger und Privatkunden gleichermaßen.

Unser Ansatz ist **ganzheitlich**: Wir betrachten Projekte immer im Zusammenspiel von **Technik**, **Wirtschaftlichkeit** und **Nachhaltigkeit**.
Dank unserer **Herstellerunabhängigkeit** wählen wir ausschließlich Lösungen, die optimal zu den technischen Anforderungen, den finanziellen Rahmenbedingungen und den langfristigen Zielen unserer Auftraggeber passen. - Mit **fundiertem Fachwissen**, **praxisnaher Erfahrung** und einem klaren Blick für Details setzen wir Energieprojekte um, die langfristig überzeugen – **ökologisch**, **ökonomisch** und **gestalterisch**.
- **AMPERION** – Ihr Partner für zukunftssichere und nachhaltige Energiekonzepte. + Mit **fundiertem Fachwissen**, **praxisnaher Erfahrung** und einem klaren Blick für Details setzen wir Energieprojekte um, die langfristig überzeugen.
+ **AMPERION** – Energielösungen für die Zukunft. image: "images/amperion_intro.webp" tags: @@ -65,19 +65,48 @@ testimonial: # testimonial content comes from "data/*/homepage.yml" file mission_vision: - enable : true + enable: true tabs: # tab item loop - - name : "Unsere Vision" - content : "

Unsere Vision ist kein Produkt, sondern ein Versprechen.

Ein Versprechen an die Umwelt, an kommende Generationen, an das Morgen: Dass wir Technik nie als Selbstzweck sehen, sondern als Werkzeug für Wandel. Für eine Welt, in der Energie nicht auf Raubbau basiert – sondern auf Respekt. Für eine Menschheit, die gelernt hat, mit dem zu leben, was sie braucht – und nicht mit dem, was sie verbraucht.

" + - name: "Unsere Vision" + content: | +

Unsere Vision ist kein Produkt, sondern ein Versprechen.

+

+ Ein Versprechen an die Umwelt, an kommende Generationen, an das Morgen: + Dass wir Technik nie als Selbstzweck sehen, sondern als Werkzeug für Wandel. + Für eine Welt, in der Energie nicht auf Raubbau basiert – sondern auf Respekt. + Für eine Menschheit, die gelernt hat, mit dem zu leben, was sie braucht – und nicht mit dem, was sie verbraucht. +

# tab item loop - - name : "Unsere Mission" - content : "

Energiewende ist kein Trend. Sie ist unsere Verantwortung.

Unsere Mission ist es, die Energiewende aktiv mitzugestalten. Mit technischem Know-how, sinnvollen Lösungen und einem klaren Anspruch an Umsetzbarkeit und Verantwortung.

Wir planen Energiesysteme so, dass sie funktionieren und im Alltag wirtschaftlich sowie ökologisch sind.

" + - name: "Unsere Mission" + content: | +

Energiewende ist kein Trend. Sie ist unsere Verantwortung.

+

+ Unsere Mission ist es, die Energiewende aktiv mitzugestalten – + mit technischem Know-how, sinnvollen Lösungen + und einem klaren Anspruch an Umsetzbarkeit und Verantwortung. +

+

+ Wir planen Energiesysteme so, dass sie funktionieren + und im Alltag sowohl wirtschaftlich als auch ökologisch sind. +

# tab item loop - - name : "Unser Ziel" - content : "

Technik, die besteht. Planung, die trägt.

Unser Ziel ist es, nachhaltige Energielösungen für Unternehmen, Gemeinden und Privatpersonen realisierbar zu machen und damit einen Beitrag zur nachhaltigen Energiezukunft zu leisten.

Dafür verbinden wir technisches Know-how mit Struktur, Verantwortung und dem Anspruch, Projekte so zu planen, dass sie auch bestehen.

" + - name: "Unser Ziel" + content: | +

Technik, die besteht. Planung, die trägt.

+

+ Unser Ziel ist es, nachhaltige Energielösungen + für Unternehmen, Gemeinden und Privatpersonen + realisierbar zu machen – und damit einen Beitrag zur nachhaltigen Energiezukunft zu leisten. +

+

+ Dafür verbinden wir technisches Know-how mit Struktur, + Verantwortung und dem Anspruch, Projekte so zu planen, + dass sie auch bestehen. +

+ ############################# call to action ################################# diff --git a/layouts/_default/about.html b/layouts/_default/about.html index 59770d8..155041d 100644 --- a/layouts/_default/about.html +++ b/layouts/_default/about.html @@ -41,21 +41,22 @@ - + {{ with .Params.mission_vision }} {{ if .enable }} -
-
+
+
-
- -
+ +
+ +

Mission · Vision · Ziel

-

Wofür wir stehen und wo wir hinwollen.

+

Die Grundpfeiler unserer Arbeit.

- + - +
{{ range $index, $elements := .tabs }} -
+ role="tabpanel">
{{ .content | $.Page.RenderString (dict "display" "block") }}
@@ -86,6 +85,7 @@ {{ end }}
+
@@ -94,7 +94,9 @@ {{ end }} - + + +
@@ -104,21 +106,25 @@
- -
+
{{ $delay := 0 }} {{ $step := 100 }}
- Staatlich geprüft -

Staatlich geprüftes Ingenieurbüro

+ Staatlich geprüft +

Staatlich geprüft & konzessioniert

- Konzessionierter Elektrotechnikbetrieb – Planung und Prüfung mit Qualität & Sicherheit. + Ingenieurbüro und Elektrotechnikbetrieb – Planung und Prüfung mit Qualität & Sicherheit.

- Erfahrung & Innovation + Erfahrung & Innovation

Erfahrung & Innovation

Über 10 Jahre Praxis – kombiniert mit modernen Methoden und Tools. @@ -126,7 +132,7 @@

- Ganzheitlicher Ansatz + Ganzheitlicher Ansatz

Ganzheitlicher Ansatz

Technik, Wirtschaft & Umwelt – von Beginn an zukunftssicher gedacht. @@ -134,7 +140,7 @@

- Unabhängige Beratung + Unabhängige Beratung

Unabhängige Beratung

Herstellerneutral – wir empfehlen, was zu Ihrem Projekt wirklich passt. @@ -145,6 +151,7 @@

+ {{ with .Params.about }} {{ if .enable }} @@ -161,7 +168,7 @@
{{ with .left_person }} -

{{ .name | markdownify }}

+

{{ .name | markdownify }}

{{ .description | $.Page.RenderString (dict "display" "block") }}
@@ -182,7 +189,7 @@
{{ with .right_person }} -

{{ .name | markdownify }}

+

{{ .name | markdownify }}

{{ .description | $.Page.RenderString (dict "display" "block") }}
@@ -226,11 +233,11 @@

- Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen. + Mehr Energie - Mit UNS!

- Bereit für Ihr Energieprojekt? - Kostenfreie Erstberatung sichern! + Ihr Weg zu nachhaltiger Energie beginnt hier. + Lassen Sie uns starten!

diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7647364..b44ac0e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -66,6 +66,9 @@ {{ template "_internal/opengraph.html" . }} + + + diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content index 860564e..b6fb7cc 100644 --- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content +++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content @@ -2595,7 +2595,6 @@ section { .service-content { flex: 1; } -.service-icon, .service-image { margin: 0; } @@ -2704,7 +2703,7 @@ section { font-size: 1rem; color: #333; } -/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ +/* ========== WHY AMPERION ========== */ .why-grid { display: grid; gap: 2rem; @@ -3344,7 +3343,6 @@ body { .cta__lead { margin: .9rem auto 0; color: #0f172a; - font-size: clamp(1.2rem, 2.8vw, 1.7rem); line-height: 1.55; max-width: 58rem; position: relative; @@ -3493,16 +3491,21 @@ body { border-radius: 999px; } /* About-Intro: Video ohne abgerundete Ecken */ +/* About-Intro: Video mit weichen Kanten */ .intro-video { width: 100%; height: 100%; object-fit: cover; - display: block; } + display: block; + border-radius: 12px; + /* Weiche Kanten */ } -.intro-media, .intro-video { - border-radius: 0 !important; } +.intro-media { + overflow: hidden; + /* sorgt dafür, dass der Radius auch das Video schneidet */ + border-radius: 12px; + /* gleicher Radius wie Video */ } -/* überschreibt evtl. globale Styles */ /* ======================================== ABOUT PAGE STYLES ======================================== */ @@ -3528,64 +3531,57 @@ body { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05); object-fit: cover; } -/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */ -.mission-section .mission-tabs { - border-bottom: 1px solid #eaeaea; - margin-bottom: 1rem; } - .mission-section .mission-tabs .nav-link { - border: 0; - padding: .5rem 1rem; - font-weight: 600; - color: #046e6e; - opacity: .7; } - .mission-section .mission-tabs .nav-link.active, .mission-section .mission-tabs .nav-link:hover { - opacity: 1; - border-bottom: 2px solid #046e6e; - background: transparent; } - -.mission-section .mission-tab-content .tab-inner { - background: #fff; - border: 1px solid #eee; - border-radius: .75rem; - padding: 1.25rem; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } - .mission-section .mission-tab-content .tab-inner p { - margin-bottom: .9rem; } - .mission-section .mission-tab-content .tab-inner p:last-child { - margin-bottom: 0; } - -/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */ -.why-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 1.25rem; } - @media (max-width: 992px) { - .why-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); } } - @media (max-width: 576px) { - .why-grid { - grid-template-columns: 1fr; } } -.service-card { - background: #fff; - border: 1px solid #eee; - border-radius: .75rem; - padding: 1.25rem; - height: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - text-align: center; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } - .service-card .service-icon { - width: 48px; - height: 48px; - margin: 0 auto .5rem; +/* =========================== + Mission / Vision / Ziel + =========================== */ +.mission-section { + /* Wrapper sauber mittig + schmaler */ + /* Tabs */ + /* Inhalt – sofortiger Wechsel, p-Standard */ } + .mission-section .mission-tabs-wrapper { + max-width: 920px; + margin-inline: auto; } + .mission-section .mission-tabs { + border-bottom: 1px solid #eaeaea; + margin-bottom: 1rem; + text-align: center; } + .mission-section .mission-tabs .nav-link { + border: 0; + padding: .45rem .9rem; + color: #046e6e; + opacity: .7; + background: transparent; + cursor: pointer; + transition: all .2s ease; } + .mission-section .mission-tabs .nav-link:hover { + opacity: 1; + color: #F5A623; + /* Hover Orange */ + border-bottom: 2px solid #F5A623; } + .mission-section .mission-tabs .nav-link.active { + opacity: 1; + color: #046e6e; + /* aktiv Türkis */ + border-bottom: 2px solid #046e6e; } + .mission-section .mission-tab-content .tab-pane { + display: none; } + .mission-section .mission-tab-content .tab-pane.active { display: block; } - .service-card .service-card-title { - font-weight: 700; - margin-bottom: .35rem; } - .service-card .service-card-description { - margin: 0; } + .mission-section .mission-tab-content .tab-inner { + background: #fff; + border: 1px solid #eee; + border-radius: .75rem; + padding: 1.25rem; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } + .mission-section .mission-tab-content .tab-inner p:last-child { + margin-bottom: 0; } + +/* Kleinere Bildschirme: etwas kompakter */ +@media (max-width: 576px) { + .mission-section .mission-tabs .nav-link { + padding: .4rem .7rem; } + .mission-section .mission-tabs-wrapper { + max-width: 100%; } } /* 4) Team-Block: Karten & Bild */ .team-image {