Änderungern11080046
This commit is contained in:
parent
6cd592a3ff
commit
23aa8074ac
5 changed files with 194 additions and 161 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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. <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**:
|
||||
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.
|
||||
|
||||
Mit **fundiertem Fachwissen**, **praxisnaher Erfahrung** und einem klaren Blick für Details setzen wir Energieprojekte um, die langfristig überzeugen – **ökologisch**, **ökonomisch** und **gestalterisch**. <br>
|
||||
**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. <br>
|
||||
**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 : "<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>"
|
||||
- name: "Unsere Vision"
|
||||
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
|
||||
- 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>"
|
||||
- name: "Unsere Mission"
|
||||
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
|
||||
- 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>"
|
||||
- name: "Unser Ziel"
|
||||
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 #################################
|
||||
|
|
|
|||
|
|
@ -41,21 +41,22 @@
|
|||
|
||||
|
||||
|
||||
<!-- Mission/Vision/Ziel (grau, Heading + Tabs) -->
|
||||
<!-- Mission/Vision/Ziel Section -->
|
||||
{{ with .Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<section class="mission-section section pt-0" style="background-color:#f3f3f3;">
|
||||
<div class="my-container">
|
||||
<section class="mission-section section pt-0" style="background-color: #f8f9fa;">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<!-- Titelblock abgestimmt auf Index -->
|
||||
<div class="text-center mb-4" data-aos="fade-up">
|
||||
<!-- Schlanker, mittiger Content-Bereich -->
|
||||
<div>
|
||||
<!-- Headings -->
|
||||
<div class="text-center mb-3">
|
||||
<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 class="mission-tabs-wrapper">
|
||||
<!-- Tabs -->
|
||||
<!-- Tabs (zentriert) -->
|
||||
<ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li class="nav-item" role="presentation">
|
||||
|
|
@ -71,14 +72,12 @@
|
|||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<!-- Inhalte (ohne fade, damit kein Flackern) -->
|
||||
<div class="tab-content mission-tab-content">
|
||||
{{ 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 }}"
|
||||
role="tabpanel"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100">
|
||||
role="tabpanel">
|
||||
<div class="tab-inner">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
|
|
@ -86,6 +85,7 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,9 @@
|
|||
{{ end }}
|
||||
|
||||
|
||||
<!-- Kompetenzen: Layout & Karten wie "Darum AMPERION" auf der Startseite -->
|
||||
|
||||
|
||||
<!-- Was uns auszeichnet -->
|
||||
<section class="section" style="background-color:#ffffff;">
|
||||
<div class="my-container">
|
||||
<div class="row">
|
||||
|
|
@ -104,21 +106,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karten (Re-Use der Service-Card Struktur von der Startseite) -->
|
||||
<div class="why-grid mt-5">
|
||||
<div class="why-grid mt-5" style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
justify-items: center;
|
||||
">
|
||||
{{ $delay := 0 }}
|
||||
{{ $step := 100 }}
|
||||
|
||||
<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">
|
||||
<h3 class="service-card-title">Staatlich geprüftes Ingenieurbüro</h3>
|
||||
<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üft & konzessioniert</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Konzessionierter Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität & Sicherheit.
|
||||
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität & Sicherheit.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<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 & Innovation</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
|
||||
|
|
@ -126,7 +132,7 @@
|
|||
</article>
|
||||
|
||||
<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>
|
||||
<p class="service-card-description">
|
||||
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
|
||||
|
|
@ -134,7 +140,7 @@
|
|||
</article>
|
||||
|
||||
<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>
|
||||
<p class="service-card-description">
|
||||
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
|
||||
|
|
@ -145,6 +151,7 @@
|
|||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Team Section (grau, konsistent) -->
|
||||
{{ with .Params.about }}
|
||||
{{ 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="founder-card">
|
||||
{{ with .left_person }}
|
||||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||||
<h4 class="founder-name">{{ .name | markdownify }}</h4>
|
||||
<div class="founder-description">
|
||||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||||
</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="founder-card">
|
||||
{{ with .right_person }}
|
||||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||||
<h4 class="founder-name">{{ .name | markdownify }}</h4>
|
||||
<div class="founder-description">
|
||||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
|
|
@ -226,11 +233,11 @@
|
|||
<div class="my-container">
|
||||
<div class="cta__wrap">
|
||||
<h2 class="cta__title">
|
||||
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
|
||||
Mehr Energie - Mit UNS!
|
||||
</h2>
|
||||
<p class="cta__lead">
|
||||
Bereit für Ihr Energieprojekt?
|
||||
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
|
||||
Ihr Weg zu nachhaltiger Energie beginnt hier.
|
||||
<span class="cta__accent">Lassen Sie uns starten!</span>
|
||||
</p>
|
||||
<div class="cta__actions">
|
||||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||||
|
|
|
|||
|
|
@ -66,6 +66,9 @@
|
|||
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
|
||||
|
||||
|
||||
<!-- AOS Animation 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue