markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update: Abschluss 31.07.2025

Browse source
This commit is contained in:
astosic 2025-07-31 01:33:44 +02:00
parent 4f1e5eddac
commit b18d1e9169
8 changed files with 350 additions and 443 deletions
Download patch file Download diff file Expand all files Collapse all files

61
assets/scss/_common.scss
View file

@ -154,12 +154,6 @@ input[type="tel"] {
.mt-10 { .mt-10 {
margin-top: 20px; margin-top: 20px;
} }
@ -253,13 +247,11 @@ input[type="tel"] {
padding: 20px 0 30px; padding: 20px 0 30px;
h2 { h2 {
font-size: 18px; margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
} }
} }
.section-title { .section-title {
margin-bottom: 20px; margin-bottom: 20px;
@ -268,20 +260,14 @@ input[type="tel"] {
} }
h2 { h2 {
text-transform: uppercase; margin: 0;
font-weight: 400; padding: 10px 0;
margin: 0px; }
padding: 10px 0px; }
font-size: 3em; /* Standard Schriftgröße für h2 */
@media (max-width: 768px) {
font-size: 1.5em; /* Kleinere Schriftgröße für mobile Geräte */
}
@media (max-width: 480px) { @media (max-width: 480px) {
font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */ font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
} }
}
p { p {
font-style: italic; font-style: italic;
@ -297,7 +283,6 @@ input[type="tel"] {
font-size: 0.8em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */ font-size: 0.8em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
} }
} }
}
@ -324,18 +309,6 @@ input[type="tel"] {
.block { .block {
text-align: center; text-align: center;
h1 {
color: $white;
font-weight: 200;
letter-spacing: 0.5em;
margin-top: 20;
margin-bottom: 10;
text-transform: capitalize;
}
p {
color: $white;
}
} }
} }
@ -343,30 +316,9 @@ input[type="tel"] {
.heading { .heading {
padding-bottom: 60px; padding-bottom: 60px;
text-align: center; text-align: center;
h2 {
color: $black;
font-size: 30px;
line-height: 40px;
font-weight: 400;
}
p {
font-size: 18px;
line-height: 40px;
color: lighten( $black, 16.078);
font-weight: 300;
}
} }
.page-wrapper { .page-wrapper {
padding: 70px 0; padding: 70px 0;
@ -807,4 +759,3 @@ span.cloaked-e-mail:before {
.why-title1 { .why-title1 {
margin: 0; /* Entfernt zusätzliche Ränder */ margin: 0; /* Entfernt zusätzliche Ränder */
} }

40
assets/scss/_typography.scss
View file

@ -11,35 +11,61 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.hero-subtitle {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
text-align: center;
color: $text-dark;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.4;
margin-top: 1rem;
}
// --------------------------- // ---------------------------
// Überschriften-Stile // Überschriften-Stile
// --------------------------- // ---------------------------
h1 { h1 {
font-size: 3rem; // Größere Hauptüberschrift font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #046e6e; color: #046e6e;
} }
h1.page-title {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-top: 2rem;
text-transform: capitalize;
}
h2 { h2 {
font-size: 2rem; // Deutlich kleiner als H1 font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #222; // Normale Textfarbe color: #222;
} }
h3 { h3 {
font-size: 1.5rem; font-size: clamp(1.2rem, 1.8vw, 1.5rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
color: inherit; // wie Fließtext color: inherit;
} }
p {
font-size: clamp(1rem, 1.5vw, 1.125rem);
margin-bottom: 1.25rem;
line-height: 1.6;
}
// --------------------------- // ---------------------------
// Textausrichtung // Textausrichtung
// --------------------------- // ---------------------------
@ -57,10 +83,6 @@ strong, b {
font-weight: 700; font-weight: 700;
} }
em, i {
font-style: italic;
}
p { p {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }

77
assets/scss/custom.scss
View file

@ -22,6 +22,13 @@ section {
padding-bottom: 4px; padding-bottom: 4px;
} }
.section-spacing {
padding-top: 4rem;
padding-bottom: 4rem;
margin-top: 5rem;
}
/* ========== Beschreibung ========== */ /* ========== Beschreibung ========== */
.description { .description {
font-size: 22px; font-size: 22px;
@ -76,6 +83,7 @@ section {
} }
/* ========== Service-Layout (Kacheln / Pfeile) ========== */ /* ========== Service-Layout (Kacheln / Pfeile) ========== */
.service-arrow .block { .service-arrow .block {
display: flex; display: flex;
align-items: center; align-items: center;
@ -118,18 +126,16 @@ section {
/* Service-Gitter */ /* Service-Gitter */
.service-grid { .service-grid {
display: grid; display: grid;
gap: 30px; gap: 1.5rem;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
justify-content: center;
@media (max-width: 992px) { align-items: stretch;
grid-template-columns: repeat(2, 1fr); margin: 0 auto;
} max-width: 1200px;
padding: 0 1rem;
@media (max-width: 576px) {
grid-template-columns: 1fr;
}
} }
.service-item-fixed { .service-item-fixed {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
@ -179,6 +185,57 @@ section {
z-index: 2; z-index: 2;
} }
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
.spacer-lg {
height: 0px;
}
.service-item {
position: relative;
overflow: hidden;
border-radius: 8px;
img {
width: 100%;
display: block;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
}
.overlay-text {
font-size: clamp(2rem, 2vw, 3rem);
}
}
.info-card {
text-align: center;
padding: 1rem;
i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
h3 {
font-weight: 600;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
font-size: 1.2rem;
color: #046e6e;
}
p {
font-size: 1rem;
color: #333;
}
}
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ /* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
.why-grid { .why-grid {
display: grid; display: grid;

67
assets/scss/style.scss
View file

@ -94,13 +94,6 @@ $h4: 25px;
@import 'custom.scss'; @import 'custom.scss';
html {
scroll-behavior: smooth;
}
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */ /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
.logo-container { .logo-container {
width: 80%; width: 80%;
@ -201,63 +194,3 @@ body {
margin: 0; margin: 0;
padding: 20px; padding: 20px;
} }
.services-title {
margin-top: 50px;
color: #046e6e;
}
.services-description {
color: black;
margin-bottom: 50px;
}
/* Standard-Desktop-Layout */
.services-section {
background-color: #f1f1f1; /* Hintergrundfarbe der Sektion auf Schwarz setzen */
padding: 40px 0; /* Padding für die Sektion */
width: 100%; /* Volle Breite */
box-sizing: border-box; /* Padding in der Breite berücksichtigen */
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Drei Spalten für Desktop */
gap: 20px;
max-width: 1200px;
margin: 0 auto; /* Zentriert das Raster */
padding: 0 20px; /* Optional: Padding für kleinere Bildschirme */
}
.service-card {
background-color: #f1f1f1; /* Hintergrundfarbe der Boxen auf Schwarz setzen */
color: white; /* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
padding: 20px;
box-sizing: border-box;
}
.service-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.service-card-title {
color: black; /* Titel-Textfarbe auf Weiß setzen */
margin-bottom: 10px;
}
.service-card-description {
color: black; /* Hellgraue Farbe für den Beschreibungstext */
font-size: 14px;
}
/* Anpassungen für Mobilgeräte */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr; /* Eine Spalte für Mobilgeräte */
}
}

292
layouts/index.html
View file

@ -4,8 +4,8 @@
{{ with .Params.banner }} {{ with .Params.banner }}
{{ if .enable }} {{ if .enable }}
<!-- HERO / SLIDER --> <!-- HERO / SLIDER -->
<section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background" <section id="hero" class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"> style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
<div class="my-container" style="position: relative; z-index: 2;"> <div class="my-container" style="position: relative; z-index: 2;">
<!-- *Logo-Zeile mit zwei Frames* --> <!-- *Logo-Zeile mit zwei Frames* -->
@ -44,216 +44,166 @@
<!-- Scroll/Hide Header --> <!-- Scroll/Hide Header -->
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var scrolldown = document.querySelector('.scrolldown'); const hero = document.getElementById('hero');
scrolldown?.addEventListener('click', function () { const targetSection = document.getElementById('leistungen');
const serviceSection = document.getElementById('service'); const scrolldown = document.querySelector('.scrolldown');
const offset = 100; const header = document.getElementById('mainHeader');
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset; let lastScroll = window.scrollY;
window.scrollTo({ top: targetPosition, behavior: 'smooth' }); let isScrolling = false;
}); let scrollTriggered = false;
const offset = 120;
window.addEventListener("scroll", function () { function scrollToTarget() {
if (window.scrollY > 100) { if (!targetSection) return;
scrolldown?.classList.add('hide'); const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
} else { window.scrollTo({ top: y, behavior: 'smooth' });
scrolldown?.classList.remove('hide'); }
}
});
var header = document.getElementById('mainHeader'); // Klick auf Chevron → scrollen
var lastScrollPosition = window.scrollY; scrolldown?.addEventListener('click', () => {
scrollTriggered = true;
window.addEventListener('scroll', function () { scrollToTarget();
var currentScrollPosition = window.scrollY;
header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
if (currentScrollPosition === 0) header.style.top = '0';
lastScrollPosition = currentScrollPosition;
});
}); });
// Scrollrad nach unten → am Ende von Hero → scrollen
window.addEventListener('wheel', function (e) {
if (isScrolling || e.deltaY <= 0 || scrollTriggered || !hero || !targetSection) return;
const heroBottom = hero.getBoundingClientRect().bottom;
const threshold = 50;
if (heroBottom <= window.innerHeight + threshold) {
isScrolling = true;
scrollTriggered = true;
scrollToTarget();
setTimeout(() => isScrolling = false, 1000);
}
}, { passive: true });
// Scroll-Verhalten (Chevron + Header + Reset)
window.addEventListener('scroll', function () {
// Chevron ausblenden
if (window.scrollY > 100) {
scrolldown?.classList.add('hide');
} else {
scrolldown?.classList.remove('hide');
}
// Header verstecken beim Runterscrollen
const currentScroll = window.scrollY;
header.style.top = (currentScroll > lastScroll) ? '-100vh' : '0';
if (currentScroll === 0) header.style.top = '0';
lastScroll = currentScroll;
// ✅ Reset der Scroll-Aktion, wenn man wieder im Hero ist
const heroTop = hero.getBoundingClientRect().top;
if (heroTop >= 0) {
scrollTriggered = false;
}
});
});
</script> </script>
<div style="height: 200px;"></div> <!-- Leistungen -->
<section id="leistungen" class="section">
<!-- WHY AMPERION (Kompakte Version) --> {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
{{ with site.GetPage "/whyamperion" }}
{{ with .Params.service }}
<section class="whyamperion section">
<div class="container my-container">
<div class="row">
<div class="section-title text-center">
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
</div>
</div>
<div class="row">
{{ range .service_item }}
<div class="col-sm-6 col-md-3">
<div class="service-item text-center">
<i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
<h3>{{ .name | markdownify }}</h3>
<p>{{ .content | markdownify }}</p>
</div>
</div>
{{ end }}
</div>
</div>
</section> </section>
{{ end }}
{{ end }}
<!-- SERVICES --> <!-- Fokusthemen -->
{{ with site.GetPage "/service" }} <section id="fokusthemen" class="section">
{{ with .Params.service }} {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
<section id="service" class="service">
<div class="container-fluid my-container">
<div class="services-title">
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
</div>
<div class="services-description">
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
</div>
<div class="service-grid">
{{ range first 3 .service_item }}
<div class="service-item-fixed">
<div class="zoom-wrap">
<a href="{{ .link | relURL }}">
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
<div class="overlay-text">{{ .name }}</div>
<div class="overlay"></div>
</a>
</div>
</div>
{{ end }}
</div>
</div>
</section> </section>
{{ end }}
{{ end }}
<!-- FOCUSTOPICS -->
{{ with site.GetPage "/focustopic" }}
{{ with .Params.service }}
<section id="focustopic" class="service">
<div class="container-fluid my-container">
<div class="services-title">
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
</div>
<div class="services-description">
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
</div>
<div class="service-grid">
{{ range first 3 .service_item }}
<div class="service-item-fixed">
<div class="zoom-wrap">
<a href="{{ .link | relURL }}">
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
<div class="overlay-text">{{ .name }}</div>
<div class="overlay"></div>
</a>
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) --> <!-- DARUM AMPERION – kompakt & detailliert -->
<section class="whyamperion section" style="background-color:#f3f3f3"> <section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 5rem; padding: 3rem 0;">
<div class="container my-container"> <div class="container my-container">
<!-- Titelblock – eigener Wrapper statt .section-title --> <!-- Titelblock -->
<div class="row"> <div class="row">
<div class="why-title text-center"> <div class="text-center">
<h1>Darum AMPERION</h1> <h1>Darum AMPERION</h1>
<h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2> <h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
</div> </div>
</div> </div>
<!-- Karten --> <!-- Karten -->
<div class="why-grid mt-5"> <div class="why-grid mt-5">
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3"> <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
<h2 class="service-card-title">Technische Planungskompetenz</h2> <h3 class="service-card-title">Technische Planungskompetenz</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher. <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3"> <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
<h2 class="service-card-title">Intelligente Energiesysteme</h2> <h3 class="service-card-title">Intelligente Energiesysteme</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit. <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3"> <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
<h2 class="service-card-title">Persönliche Betreuung</h2> <h3 class="service-card-title">Persönliche Betreuung</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss. <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3"> <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
<h2 class="service-card-title">Reibungslose Projektabwicklung</h2> <h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung. <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3"> <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
<h2 class="service-card-title">Vernetzte Energiezukunft</h2> <h3 class="service-card-title">Vernetzte Energiezukunft</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant. <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
</p> </p>
</article> </article>
<article class="service-card text-center"> <article class="service-card text-center">
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3"> <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
<h2 class="service-card-title">Präzise Systemplanung</h2> <h3 class="service-card-title">Präzise Systemplanung</h3>
<p class="service-card-description"> <p class="service-card-description">
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform. <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
</p> </p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
<!-- ÜBER AMPERION -->
<!-- ABOUT (unverändert) -->
{{ with .Params.about }} {{ with .Params.about }}
{{ if .enable }} {{ if .enable }}
<section id="about" class="about section"> <section id="about" class="about section" style="margin-top: 5rem; padding: 3rem 0;">
<div class="my-container"> <div class="my-container">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<div class="services-title"> <h1>Über AMPERION</h1>
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }} {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
</div>
<div class="services-description">
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row mt-4">
<div class="col-md-9 col-sm-12"> <div class="col-md-9 col-sm-12">
<div class="text-left"> <div class="text-left">
{{ with .content }}{{ . | markdownify }}{{ end }} {{ with .content }}{{ . | markdownify }}{{ end }}
</div> </div>
<div class="hover-link"> <div class="hover-link mt-3">
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }} {{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
</div> </div>
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<div class="block"> <div class="block text-center">
<img src="{{ .image | relURL }}" class="custom-image" alt="Img"> <img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
</div> </div>
</div> </div>
</div> </div>
@ -262,6 +212,7 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- CALL TO ACTION --> <!-- CALL TO ACTION -->
{{ if .Params.cta.enable }} {{ if .Params.cta.enable }}
{{ partial "cta.html" . }} {{ partial "cta.html" . }}
@ -285,5 +236,4 @@
</section> </section>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}

32
layouts/partials/section-grid.html Normal file
View file

@ -0,0 +1,32 @@
{{ with site.GetPage .page }}
{{ with .Params.service }}
<section class="section">
<div class="my-container">
<div class="section-title text-center">
<h1>{{ .title | markdownify }}</h1>
<h2>{{ .description | markdownify }}</h2>
</div>
<div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}">
{{ range .service_item }}
{{ if eq $.type "zoom" }}
<div class="service-item zoom-wrap">
<a href="{{ .link | relURL }}">
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
<div class="overlay"></div>
<div class="overlay-text responsive-text">{{ .name }}</div>
</a>
</div>
{{ else }}
<div class="info-card">
<i class="{{ .icon }}" aria-hidden="true"></i>
<h3>{{ .name | markdownify }}</h3>
<p>{{ .content | markdownify }}</p>
</div>
{{ end }}
{{ end }}
</div>
</div>
</section>
{{ end }}
{{ end }}

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

@ -8,15 +8,29 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
.hero-subtitle {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
text-align: center;
color: #004753;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.4;
margin-top: 1rem; }
h1 { h1 {
font-size: 3rem; font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #046e6e; } color: #046e6e; }
h1.page-title {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-top: 2rem;
text-transform: capitalize; }
h2 { h2 {
font-size: 2rem; font-size: clamp(1.25rem, 2vw, 1.5rem);
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
@ -24,12 +38,17 @@ h2 {
color: #222; } color: #222; }
h3 { h3 {
font-size: 1.5rem; font-size: clamp(1.2rem, 1.8vw, 1.5rem);
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
color: inherit; } color: inherit; }
p {
font-size: clamp(1rem, 1.5vw, 1.125rem);
margin-bottom: 1.25rem;
line-height: 1.6; }
.text-left { .text-left {
text-align: left; } text-align: left; }
@ -45,9 +64,6 @@ h3 {
strong, b { strong, b {
font-weight: 700; } font-weight: 700; }
em, i {
font-style: italic; }
p { p {
margin-bottom: 1.25rem; } margin-bottom: 1.25rem; }
@ -251,10 +267,7 @@ input[type="tel"] {
.title { .title {
padding: 20px 0 30px; } padding: 20px 0 30px; }
.title h2 { .title h2 {
font-size: 18px; margin: 0; }
text-align: center;
text-transform: uppercase;
letter-spacing: 2px; }
.section-title { .section-title {
margin-bottom: 20px; } margin-bottom: 20px; }
@ -262,34 +275,27 @@ input[type="tel"] {
.section-title { .section-title {
margin-bottom: 10px; } } margin-bottom: 10px; } }
.section-title h2 { .section-title h2 {
text-transform: uppercase; margin: 0;
font-weight: 400; padding: 10px 0; }
margin: 0px;
padding: 10px 0px; @media (max-width: 480px) {
font-size: 3em; font-size: 1.2em;
/* Standard Schriftgröße für h2 */ } /* Noch kleinere Schriftgröße für sehr kleine Geräte */ }
@media (max-width: 768px) {
.section-title h2 { p {
font-size: 1.5em; font-style: italic;
/* Kleinere Schriftgröße für mobile Geräte */ } } color: #626262;
@media (max-width: 480px) { font-family: "Open Sans Semibold", serif;
.section-title h2 { font-size: 1em;
font-size: 1.2em; /* Standard Schriftgröße für p */ }
/* Noch kleinere Schriftgröße für sehr kleine Geräte */ } } @media (max-width: 768px) {
.section-title p { p {
font-style: italic; font-size: 0.9em;
color: #626262; /* Kleinere Schriftgröße für mobile Geräte */ } }
font-family: "Open Sans Semibold", serif; @media (max-width: 480px) {
font-size: 1em; p {
/* Standard Schriftgröße für p */ } font-size: 0.8em;
@media (max-width: 768px) { /* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
.section-title p {
font-size: 0.9em;
/* Kleinere Schriftgröße für mobile Geräte */ } }
@media (max-width: 480px) {
.section-title p {
font-size: 0.8em;
/* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
.section-subtitle { .section-subtitle {
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
@ -306,29 +312,10 @@ input[type="tel"] {
padding: 85px 0; } padding: 85px 0; }
.page-title .block { .page-title .block {
text-align: center; } text-align: center; }
.page-title .block h1 {
color: #ffffff;
font-weight: 200;
letter-spacing: 0.5em;
margin-top: 20;
margin-bottom: 10;
text-transform: capitalize; }
.page-title .block p {
color: #ffffff; }
.heading { .heading {
padding-bottom: 60px; padding-bottom: 60px;
text-align: center; } text-align: center; }
.heading h2 {
color: #000000;
font-size: 30px;
line-height: 40px;
font-weight: 400; }
.heading p {
font-size: 18px;
line-height: 40px;
color: #292929;
font-weight: 300; }
.page-wrapper { .page-wrapper {
padding: 70px 0; } padding: 70px 0; }
@ -2553,6 +2540,11 @@ section {
padding-top: 90px; padding-top: 90px;
padding-bottom: 4px; } padding-bottom: 4px; }
.section-spacing {
padding-top: 4rem;
padding-bottom: 4rem;
margin-top: 5rem; }
/* ========== Beschreibung ========== */ /* ========== Beschreibung ========== */
.description { .description {
font-size: 22px; font-size: 22px;
@ -2636,14 +2628,14 @@ section {
/* Service-Gitter */ /* Service-Gitter */
.service-grid { .service-grid {
display: grid; display: grid;
gap: 30px; gap: 1.5rem;
grid-template-columns: repeat(3, 1fr); } grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@media (max-width: 992px) { justify-content: center;
.service-grid { align-items: stretch;
grid-template-columns: repeat(2, 1fr); } } margin: 0 auto;
@media (max-width: 576px) { max-width: 1200px;
.service-grid { padding: 0 1rem; }
grid-template-columns: 1fr; } }
.service-item-fixed { .service-item-fixed {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
@ -2686,6 +2678,40 @@ section {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
z-index: 2; } z-index: 2; }
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
.spacer-lg {
height: 0px; }
.service-item {
position: relative;
overflow: hidden;
border-radius: 8px; }
.service-item img {
width: 100%;
display: block; }
.service-item .overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3); }
.service-item .overlay-text {
font-size: clamp(2rem, 2vw, 3rem); }
.info-card {
text-align: center;
padding: 1rem; }
.info-card i {
font-size: 2rem;
margin-bottom: 0.5rem; }
.info-card h3 {
font-weight: 600;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
font-size: 1.2rem;
color: #046e6e; }
.info-card p {
font-size: 1rem;
color: #333; }
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */ /* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
.why-grid { .why-grid {
display: grid; display: grid;
@ -2829,9 +2855,6 @@ section {
@media (min-width: 992px) { @media (min-width: 992px) {
#about-intro .intro-text { #about-intro .intro-text {
font-size: 1.35rem; } } font-size: 1.35rem; } }
html {
scroll-behavior: smooth; }
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */ /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
.logo-container { .logo-container {
width: 80%; width: 80%;
@ -2920,64 +2943,3 @@ body {
background-color: #ffffff; background-color: #ffffff;
margin: 0; margin: 0;
padding: 20px; } padding: 20px; }
.services-title {
margin-top: 50px;
color: #046e6e; }
.services-description {
color: black;
margin-bottom: 50px; }
/* Standard-Desktop-Layout */
.services-section {
background-color: #f1f1f1;
/* Hintergrundfarbe der Sektion auf Schwarz setzen */
padding: 40px 0;
/* Padding für die Sektion */
width: 100%;
/* Volle Breite */
box-sizing: border-box;
/* Padding in der Breite berücksichtigen */ }
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Drei Spalten für Desktop */
gap: 20px;
max-width: 1200px;
margin: 0 auto;
/* Zentriert das Raster */
padding: 0 20px;
/* Optional: Padding für kleinere Bildschirme */ }
.service-card {
background-color: #f1f1f1;
/* Hintergrundfarbe der Boxen auf Schwarz setzen */
color: white;
/* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
padding: 20px;
box-sizing: border-box; }
.service-icon {
width: 60px;
height: 60px;
margin-bottom: 15px; }
.service-card-title {
color: black;
/* Titel-Textfarbe auf Weiß setzen */
margin-bottom: 10px; }
.service-card-description {
color: black;
/* Hellgraue Farbe für den Beschreibungstext */
font-size: 14px; }
/* Anpassungen für Mobilgeräte */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
/* Eine Spalte für Mobilgeräte */ } }

2
resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content
View file

@ -258,7 +258,7 @@ input[type="tel"] {
font-weight: 400; font-weight: 400;
margin: 0px; margin: 0px;
padding: 10px 0px; padding: 10px 0px;
font-size: 3em; font-size: 2em;
/* Standard Schriftgröße für h2 */ } /* Standard Schriftgröße für h2 */ }
@media (max-width: 768px) { @media (max-width: 768px) {
.section-title h2 { .section-title h2 {