astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

Änderungern11080046

Browse source
This commit is contained in:
astosic 2025-08-12 00:46:57 +02:00
parent 6cd592a3ff
commit 23aa8074ac
5 changed files with 194 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

122
assets/scss/custom.scss
View file

@ -111,9 +111,10 @@ section {
flex: 1; flex: 1;
} }
.service-icon,
.service-image { .service-image {
margin: 0; margin: 0;
} }
.service-image img { .service-image img {
@ -246,7 +247,7 @@ section {
color: #333; color: #333;
} }
} }
/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ /* ========== WHY AMPERION ========== */
.why-grid { .why-grid {
display: grid; display: grid;
gap: 2rem; gap: 2rem;
@ -931,7 +932,6 @@ body {
.cta__lead { .cta__lead {
margin: .9rem auto 0; margin: .9rem auto 0;
color: #0f172a; color: #0f172a;
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
line-height: 1.55; line-height: 1.55;
max-width: 58rem; max-width: 58rem;
position: relative; position: relative;
@ -1108,8 +1108,21 @@ body {
} }
/* About-Intro: Video ohne abgerundete Ecken */ /* About-Intro: Video ohne abgerundete Ecken */
.intro-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* About-Intro: Video mit weichen Kanten */
.intro-media, .intro-video { border-radius: 0 !important; } /* überschreibt evtl. globale Styles */ .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 { .mission-section {
/* Wrapper sauber mittig + schmaler */
.mission-tabs-wrapper{
max-width: 920px;
margin-inline: auto;
}
/* Tabs */
.mission-tabs { .mission-tabs {
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center; // Tabs mittig
.nav-link { .nav-link{
border: 0; border: 0;
padding: .5rem 1rem; padding: .45rem .9rem;
font-weight: 600;
color: #046e6e; color: #046e6e;
opacity: .7; opacity: .7;
&.active,
&:hover {
opacity: 1;
border-bottom: 2px solid #046e6e;
background: transparent; background: transparent;
cursor: pointer;
transition: all .2s ease;
&: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;
} }
} }
} }
.mission-tab-content { /* Inhalt – sofortiger Wechsel, p-Standard */
.tab-inner { .mission-tab-content{
background: #fff; .tab-pane{ display:none; }
border: 1px solid #eee; .tab-pane.active{ display:block; }
border-radius: .75rem;
padding: 1.25rem;
box-shadow: 0 8px 24px rgba(0,0,0,.04);
p { margin-bottom: .9rem; } .tab-inner{
p:last-child { margin-bottom: 0; } 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 */ /* Kleinere Bildschirme: etwas kompakter */
.why-grid { @media (max-width: 576px){
display: grid; .mission-section{
grid-template-columns: repeat(4, minmax(0, 1fr)); .mission-tabs .nav-link{ padding:.4rem .7rem; }
gap: 1.25rem; .mission-tabs-wrapper{ max-width: 100%; }
@media (max-width: 992px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 576px) {
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,.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 */ /* 4) Team-Block: Karten & Bild */
.team-image { .team-image {

49
content/german/about.md
View file

@ -10,14 +10,14 @@ intro_section:
**AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. **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. <br><br> 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. <br><br>
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. <br><br> 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. <br><br>
Unser Ansatz ist **ganzheitlich**: Unser Ansatz ist **ganzheitlich**:
Wir betrachten Projekte immer im Zusammenspiel von **Technik**, **Wirtschaftlichkeit** und **Nachhaltigkeit**. <br> Wir betrachten Projekte immer im Zusammenspiel von **Technik**, **Wirtschaftlichkeit** und **Nachhaltigkeit**. <br>
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. 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**. <br> Mit **fundiertem Fachwissen**, **praxisnaher Erfahrung** und einem klaren Blick für Details setzen wir Energieprojekte um, die langfristig überzeugen. <br>
**AMPERION** – Ihr Partner für zukunftssichere und nachhaltige Energiekonzepte. **AMPERION** – Energielösungen für die Zukunft.
image: "images/amperion_intro.webp" image: "images/amperion_intro.webp"
tags: tags:
@ -65,19 +65,48 @@ testimonial:
# testimonial content comes from "data/*/homepage.yml" file # testimonial content comes from "data/*/homepage.yml" file
mission_vision: mission_vision:
enable : true enable: true
tabs: tabs:
# tab item loop # tab item loop
- name : "Unsere Vision" - name: "Unsere Vision"
content : "<h4> Unsere Vision ist kein Produkt, sondern ein Versprechen.</h4> <p> 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.</p>" content: |
<p><strong>Unsere Vision ist kein Produkt, sondern ein Versprechen.</strong></p>
<p>
Ein Versprechen an die <strong>Umwelt</strong>, an <strong>kommende Generationen</strong>, an das <em>Morgen</em>:
Dass wir <strong>Technik</strong> nie als Selbstzweck sehen, sondern als Werkzeug für <strong>Wandel</strong>.
Für eine Welt, in der Energie nicht auf Raubbau basiert – sondern auf <strong>Respekt</strong>.
Für eine Menschheit, die gelernt hat, mit dem zu leben, was sie <em>braucht</em> – und nicht mit dem, was sie <em>verbraucht</em>.
</p>
# tab item loop # tab item loop
- name : "Unsere Mission" - name: "Unsere Mission"
content : "<h4>Energiewende ist kein Trend. Sie ist unsere Verantwortung.</h4> <p> Unsere Mission ist es, die Energiewende aktiv mitzugestalten. Mit technischem Know-how, sinnvollen Lösungen und einem klaren Anspruch an Umsetzbarkeit und Verantwortung.</p> <p> Wir planen Energiesysteme so, dass sie funktionieren und im Alltag wirtschaftlich sowie ökologisch sind.</p>" content: |
<p><strong>Energiewende ist kein Trend. Sie ist unsere Verantwortung.</strong></p>
<p>
Unsere Mission ist es, die <strong>Energiewende</strong> aktiv mitzugestalten –
mit <strong>technischem Know-how</strong>, <strong>sinnvollen Lösungen</strong>
und einem klaren Anspruch an <strong>Umsetzbarkeit</strong> und <strong>Verantwortung</strong>.
</p>
<p>
Wir planen <strong>Energiesysteme</strong> so, dass sie funktionieren
und im Alltag sowohl <strong>wirtschaftlich</strong> als auch <strong>ökologisch</strong> sind.
</p>
# tab item loop # tab item loop
- name : "Unser Ziel" - name: "Unser Ziel"
content : " <h4> Technik, die besteht. Planung, die trägt.</h4> <p> 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.</p> <p> Dafür verbinden wir technisches Know-how mit Struktur, Verantwortung und dem Anspruch, Projekte so zu planen, dass sie auch bestehen.</p>" content: |
<p><strong>Technik, die besteht. Planung, die trägt.</strong></p>
<p>
Unser Ziel ist es, <strong>nachhaltige Energielösungen</strong>
für <strong>Unternehmen</strong>, <strong>Gemeinden</strong> und <strong>Privatpersonen</strong>
realisierbar zu machen – und damit einen Beitrag zur <strong>nachhaltigen Energiezukunft</strong> zu leisten.
</p>
<p>
Dafür verbinden wir <strong>technisches Know-how</strong> mit <strong>Struktur</strong>,
<strong>Verantwortung</strong> und dem Anspruch, Projekte so zu planen,
dass sie auch <strong>bestehen</strong>.
</p>
############################# call to action ################################# ############################# call to action #################################

61
layouts/_default/about.html
View file

@ -41,21 +41,22 @@
<!-- Mission/Vision/Ziel (grau, Heading + Tabs) --> <!-- Mission/Vision/Ziel Section -->
{{ with .Params.mission_vision }} {{ with .Params.mission_vision }}
{{ if .enable }} {{ if .enable }}
<section class="mission-section section pt-0" style="background-color:#f3f3f3;"> <section class="mission-section section pt-0" style="background-color: #f8f9fa;">
<div class="my-container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-10"> <!-- Schlanker, mittiger Content-Bereich -->
<!-- Titelblock abgestimmt auf Index --> <div>
<div class="text-center mb-4" data-aos="fade-up"> <!-- Headings -->
<div class="text-center mb-3">
<h1>Mission · Vision · Ziel</h1> <h1>Mission · Vision · Ziel</h1>
<h2><em>Wofür wir stehen und wo wir hinwollen.</em></h2> <h2>Die Grundpfeiler unserer Arbeit.</h2>
</div> </div>
<div class="mission-tabs-wrapper"> <div class="mission-tabs-wrapper">
<!-- Tabs --> <!-- Tabs (zentriert) -->
<ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist"> <ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
{{ range $index, $elements := .tabs }} {{ range $index, $elements := .tabs }}
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
@ -71,14 +72,12 @@
{{ end }} {{ end }}
</ul> </ul>
<!-- Tab Content --> <!-- Inhalte (ohne fade, damit kein Flackern) -->
<div class="tab-content mission-tab-content"> <div class="tab-content mission-tab-content">
{{ range $index, $elements := .tabs }} {{ range $index, $elements := .tabs }}
<div class="tab-pane fade {{ if eq $index 0 }}show active{{ end }}" <div class="tab-pane {{ if eq $index 0 }}active{{ end }}"
id="content-{{ .name | urlize }}" id="content-{{ .name | urlize }}"
role="tabpanel" role="tabpanel">
data-aos="fade-up"
data-aos-delay="100">
<div class="tab-inner"> <div class="tab-inner">
{{ .content | $.Page.RenderString (dict "display" "block") }} {{ .content | $.Page.RenderString (dict "display" "block") }}
</div> </div>
@ -86,6 +85,7 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +94,9 @@
{{ end }} {{ end }}
<!-- Kompetenzen: Layout & Karten wie "Darum AMPERION" auf der Startseite -->
<!-- Was uns auszeichnet -->
<section class="section" style="background-color:#ffffff;"> <section class="section" style="background-color:#ffffff;">
<div class="my-container"> <div class="my-container">
<div class="row"> <div class="row">
@ -104,21 +106,25 @@
</div> </div>
</div> </div>
<!-- Karten (Re-Use der Service-Card Struktur von der Startseite) --> <div class="why-grid mt-5" style="
<div class="why-grid mt-5"> display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
justify-items: center;
">
{{ $delay := 0 }} {{ $delay := 0 }}
{{ $step := 100 }} {{ $step := 100 }}
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3"> <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Staatlich geprüftes Ingenieurbüro</h3> <h3 class="service-card-title">Staatlich geprüft & konzessioniert</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Konzessionierter Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit. <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
</p> </p>
</article> </article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3"> <img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Erfahrung &amp; Innovation</h3> <h3 class="service-card-title">Erfahrung &amp; Innovation</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools. <strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
@ -126,7 +132,7 @@
</article> </article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3"> <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Ganzheitlicher Ansatz</h3> <h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht. <strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
@ -134,7 +140,7 @@
</article> </article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}"> <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3"> <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Unabhängige Beratung</h3> <h3 class="service-card-title">Unabhängige Beratung</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt. <strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
@ -145,6 +151,7 @@
</section> </section>
<!-- Team Section (grau, konsistent) --> <!-- Team Section (grau, konsistent) -->
{{ with .Params.about }} {{ with .Params.about }}
{{ if .enable }} {{ if .enable }}
@ -161,7 +168,7 @@
<div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100"> <div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
<div class="founder-card"> <div class="founder-card">
{{ with .left_person }} {{ with .left_person }}
<h3 class="founder-name">{{ .name | markdownify }}</h3> <h4 class="founder-name">{{ .name | markdownify }}</h4>
<div class="founder-description"> <div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }} {{ .description | $.Page.RenderString (dict "display" "block") }}
</div> </div>
@ -182,7 +189,7 @@
<div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300"> <div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
<div class="founder-card"> <div class="founder-card">
{{ with .right_person }} {{ with .right_person }}
<h3 class="founder-name">{{ .name | markdownify }}</h3> <h4 class="founder-name">{{ .name | markdownify }}</h4>
<div class="founder-description"> <div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }} {{ .description | $.Page.RenderString (dict "display" "block") }}
</div> </div>
@ -226,11 +233,11 @@
<div class="my-container"> <div class="my-container">
<div class="cta__wrap"> <div class="cta__wrap">
<h2 class="cta__title"> <h2 class="cta__title">
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen. Mehr Energie - Mit UNS!
</h2> </h2>
<p class="cta__lead"> <p class="cta__lead">
Bereit für Ihr Energieprojekt? Ihr Weg zu nachhaltiger Energie beginnt hier.
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span> <span class="cta__accent">Lassen Sie uns starten!</span>
</p> </p>
<div class="cta__actions"> <div class="cta__actions">
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}"> <a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">

3
layouts/partials/head.html
View file

@ -66,6 +66,9 @@
{{ template "_internal/opengraph.html" . }} {{ template "_internal/opengraph.html" . }}
<!-- AOS Animation CSS --> <!-- AOS Animation CSS -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

100
resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
View file

@ -2595,7 +2595,6 @@ section {
.service-content { .service-content {
flex: 1; } flex: 1; }
.service-icon,
.service-image { .service-image {
margin: 0; } margin: 0; }
@ -2704,7 +2703,7 @@ section {
font-size: 1rem; font-size: 1rem;
color: #333; } color: #333; }
/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ /* ========== WHY AMPERION ========== */
.why-grid { .why-grid {
display: grid; display: grid;
gap: 2rem; gap: 2rem;
@ -3344,7 +3343,6 @@ body {
.cta__lead { .cta__lead {
margin: .9rem auto 0; margin: .9rem auto 0;
color: #0f172a; color: #0f172a;
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
line-height: 1.55; line-height: 1.55;
max-width: 58rem; max-width: 58rem;
position: relative; position: relative;
@ -3493,16 +3491,21 @@ body {
border-radius: 999px; } border-radius: 999px; }
/* About-Intro: Video ohne abgerundete Ecken */ /* About-Intro: Video ohne abgerundete Ecken */
/* About-Intro: Video mit weichen Kanten */
.intro-video { .intro-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; } display: block;
border-radius: 12px;
/* Weiche Kanten */ }
.intro-media, .intro-video { .intro-media {
border-radius: 0 !important; } 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 ABOUT PAGE STYLES
======================================== */ ======================================== */
@ -3528,64 +3531,57 @@ body {
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
object-fit: cover; } object-fit: cover; }
/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */ /* ===========================
.mission-section .mission-tabs { 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; border-bottom: 1px solid #eaeaea;
margin-bottom: 1rem; } margin-bottom: 1rem;
text-align: center; }
.mission-section .mission-tabs .nav-link { .mission-section .mission-tabs .nav-link {
border: 0; border: 0;
padding: .5rem 1rem; padding: .45rem .9rem;
font-weight: 600;
color: #046e6e; color: #046e6e;
opacity: .7; } opacity: .7;
.mission-section .mission-tabs .nav-link.active, .mission-section .mission-tabs .nav-link:hover { background: transparent;
cursor: pointer;
transition: all .2s ease; }
.mission-section .mission-tabs .nav-link:hover {
opacity: 1; opacity: 1;
border-bottom: 2px solid #046e6e; color: #F5A623;
background: transparent; } /* Hover Orange */
border-bottom: 2px solid #F5A623; }
.mission-section .mission-tab-content .tab-inner { .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; }
.mission-section .mission-tab-content .tab-inner {
background: #fff; background: #fff;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: .75rem; border-radius: .75rem;
padding: 1.25rem; padding: 1.25rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } 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 { .mission-section .mission-tab-content .tab-inner p:last-child {
margin-bottom: 0; } margin-bottom: 0; }
/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */ /* Kleinere Bildschirme: etwas kompakter */
.why-grid { @media (max-width: 576px) {
display: grid; .mission-section .mission-tabs .nav-link {
grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .4rem .7rem; }
gap: 1.25rem; } .mission-section .mission-tabs-wrapper {
@media (max-width: 992px) { max-width: 100%; } }
.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;
display: block; }
.service-card .service-card-title {
font-weight: 700;
margin-bottom: .35rem; }
.service-card .service-card-description {
margin: 0; }
/* 4) Team-Block: Karten & Bild */ /* 4) Team-Block: Karten & Bild */
.team-image { .team-image {