forked from markus/AMPERION_Webpage
Update: Abschluss 29.07.2025
This commit is contained in:
Alexander-Stosic
parent
0db3bb9207
commit
4f1e5eddac
13 changed files with 698 additions and 760 deletions
|
|
@ -1,77 +1,95 @@
|
||||||
// Fonts
|
// ===========================
|
||||||
|
// TYPOGRAPHY – Schriftarten & Textstile
|
||||||
@font-face {
|
// ===========================
|
||||||
font-family: 'Open Sans';
|
|
||||||
src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans Semibold';
|
|
||||||
src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Using Variables for Font Families
|
|
||||||
$font-primary: 'Open Sans', sans-serif;
|
|
||||||
$font-secondary: 'Open Sans Semibold', sans-serif;
|
|
||||||
$color-heading-h2: #046e6e; // Türkis für h2
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1.5;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-family: $font-primary;
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #222;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
// ---------------------------
|
||||||
h3,
|
// Überschriften-Stile
|
||||||
h4,
|
// ---------------------------
|
||||||
h5,
|
|
||||||
h6 {
|
h1 {
|
||||||
font-family: $font-secondary;
|
font-size: 3rem; // Größere Hauptüberschrift
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
// keine Farbe, Standardfarbe übernehmen
|
line-height: 1.3;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #046e6e;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: $font-secondary;
|
font-size: 2rem; // Deutlich kleiner als H1
|
||||||
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: $color-heading-h2; // Nur h2 in Türkis
|
line-height: 1.4;
|
||||||
font-size: $h2;
|
margin-bottom: 1rem;
|
||||||
|
color: #222; // Normale Textfarbe
|
||||||
@include mobile {
|
|
||||||
font-size: $h2-sm;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: $h1;
|
|
||||||
|
|
||||||
@include tablet {
|
|
||||||
font-size: $h1-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
font-size: $h2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile-xs {
|
|
||||||
font-size: $h2-md;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: $h3;
|
font-size: 1.5rem;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: inherit; // wie Fließtext
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
// ---------------------------
|
||||||
font-size: $h4;
|
// Textausrichtung
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-justify { text-align: justify; }
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Text-Elemente
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
strong, b {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
em, i {
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: black;
|
margin-bottom: 1.25rem;
|
||||||
font-size: $font-size;
|
}
|
||||||
font-family: $font-secondary;
|
|
||||||
|
// ---------------------------
|
||||||
|
// Listen
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// Links
|
||||||
|
// ---------------------------
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #046e6e;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #F5A623;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* ========== Typografie & Basis ========== */
|
||||||
.title-custom {
|
.title-custom {
|
||||||
color: #046e6e;
|
color: #046e6e;
|
||||||
}
|
}
|
||||||
|
|
@ -11,14 +12,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome.section, #service.section {
|
/* ========== Sektionen Padding (Intro etc.) ========== */
|
||||||
|
#welcome.section,
|
||||||
|
#service.section {
|
||||||
padding-top: 90px;
|
padding-top: 90px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Beschreibung ========== */
|
||||||
.description {
|
.description {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -36,6 +40,7 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Fakten ========== */
|
||||||
.facts .fact-item {
|
.facts .fact-item {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -48,12 +53,29 @@ section {
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Hintergründe ========== */
|
||||||
.custom-background {
|
.custom-background {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gif-background {
|
||||||
|
background-image: url('/images/BackgroundAnimation.svg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center -220px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||||
.service-arrow .block {
|
.service-arrow .block {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -67,7 +89,8 @@ section {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-icon, .service-image {
|
.service-icon,
|
||||||
|
.service-image {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,32 +100,22 @@ section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
/* Farbvarianten für Services */
|
||||||
|
.bg-service1,
|
||||||
|
.bg-service3,
|
||||||
|
.bg-service5,
|
||||||
|
.bg-service7 {
|
||||||
background-color: #8bcfd6;
|
background-color: #8bcfd6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
.bg-service2,
|
||||||
|
.bg-service4,
|
||||||
|
.bg-service6,
|
||||||
|
.bg-service8 {
|
||||||
background-color: #6baeb5;
|
background-color: #6baeb5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-width {
|
/* Service-Gitter */
|
||||||
width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-text {
|
|
||||||
width: 600px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0;
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-grid {
|
.service-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
@ -129,31 +142,31 @@ section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.service-item-fixed:hover .zoom-wrap {
|
&:hover {
|
||||||
transform: scale(1.06);
|
transform: scale(1.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-wrap img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-wrap a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-wrap .overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0; right: 0; bottom: 0; left: 0;
|
top: 0; right: 0; bottom: 0; left: 0;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.overlay-text {
|
.overlay-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -166,26 +179,96 @@ section {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
|
||||||
|
.why-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
/* Desktop: 3 Spalten => 3×2 */
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
|
||||||
|
/* Jede Zeile passt sich der höchsten Karte an */
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet: 2 Spalten => 2×3 */
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
.why-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobil: 1 Spalte => 1×6 */
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
.why-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Karten sollen die Zellen voll ausfüllen */
|
||||||
|
.service-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%; /* gleiche Höhe pro Zeile */
|
||||||
|
background: #fff;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,.05);
|
||||||
|
transition: transform .25s ease, box-shadow .25s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon einheitlich */
|
||||||
|
.service-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 0 auto .75rem auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||||
|
.service-card-title {
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: .25rem 0 .5rem;
|
||||||
|
color: #0f2f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card-description {
|
||||||
|
font: inherit;
|
||||||
|
color: #444;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Container & Layout-Hilfen ========== */
|
||||||
.my-container {
|
.my-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gif-background {
|
.fixed-width {
|
||||||
background-image: url('/images/BackgroundAnimation.svg');
|
max-width: 1200px;
|
||||||
background-size: cover;
|
margin: 0 auto;
|
||||||
background-position: center -220px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gif-background::after {
|
.fixed-text {
|
||||||
|
max-width: 600px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Titel mit Hintergrund ========== */
|
||||||
|
.page-title::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
top: 0; left: 0;
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
width: 100%; height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Bildkomponenten & Icons ========== */
|
||||||
.custom-image {
|
.custom-image {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
|
|
@ -196,15 +279,16 @@ section {
|
||||||
color: #046e6e;
|
color: #046e6e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== Hover Links ========== */
|
||||||
.hover-link {
|
.hover-link {
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
|
||||||
|
|
||||||
.hover-link:hover {
|
&:hover {
|
||||||
color: #F5A623;
|
color: #F5A623;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Mehrwert */
|
/* ========== Mehrwerte ========== */
|
||||||
.mehrwerte-grid {
|
.mehrwerte-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
|
@ -219,7 +303,6 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.mehrwerte-box {
|
.mehrwerte-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -233,25 +316,43 @@ section {
|
||||||
background-color: lighten(#004d4d, 10%);
|
background-color: lighten(#004d4d, 10%);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
h4, p {
|
||||||
|
color: #000 !important;
|
||||||
}
|
}
|
||||||
h4,
|
}
|
||||||
p {
|
|
||||||
|
h4, p {
|
||||||
color: #000 !important;
|
color: #000 !important;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
&:hover h4,
|
|
||||||
&:hover p {
|
|
||||||
color: #000 !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mehrwert-icon {
|
.mehrwert-icon {
|
||||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
|
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Gründerteam Styling */
|
/* ========== Gründerteam & Intro-Text ========== */
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding-left: 5vw;
|
padding-left: 5vw;
|
||||||
padding-right: 5vw;
|
padding-right: 5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#about-intro .intro-text {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.85;
|
||||||
|
max-width: 200ch;
|
||||||
|
hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
/* 1) Container, z. B. 80% Seitenbreite */
|
|
||||||
.my-container {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 40px 0; /* Abstand oben & unten */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */
|
|
||||||
.why-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3) Warum-Blocks (linke + rechte Spalte) */
|
|
||||||
.why-block p {
|
|
||||||
text-align: justify;
|
|
||||||
margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-block h4 {
|
|
||||||
margin: 100px 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 4) Icon + Logo-Größen anpassen */
|
|
||||||
.why-icon {
|
|
||||||
width: 50px; /* Iconbreite */
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
margin: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-logo {
|
|
||||||
max-width: 500px; /* Logo in der Mitte */
|
|
||||||
height: auto;
|
|
||||||
margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier:
|
|
||||||
.why-title, .why-subtitle, .why-block, .why-logo {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.section-title1 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.why-title1 {
|
|
||||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-heading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-icon {
|
|
||||||
width: 10px;
|
|
||||||
flex: 0 0 10px;
|
|
||||||
max-width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-heading {
|
|
||||||
width: 100px; /* Beispiel: 100px für die Überschrift */
|
|
||||||
flex: 0 0 100px;
|
|
||||||
max-width: 100px;
|
|
||||||
|
|
||||||
white-space: nowrap; /* verhindert Zeilenumbruch */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.why-icon1 {
|
|
||||||
width: 10px; /* Breite des Icons */
|
|
||||||
height: auto; /* Höhe automatisch anpassen */
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading-text {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-block h4 {
|
|
||||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title1 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-icon1 {
|
|
||||||
width: 30px; /* Breite des Icons */
|
|
||||||
height: auto; /* Höhe automatisch anpassen */
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-title1 {
|
|
||||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-md-4.text-center .why-logo {
|
|
||||||
margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */
|
|
||||||
.why-amperion {
|
|
||||||
margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */
|
|
||||||
.about {
|
|
||||||
margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-fixed {
|
|
||||||
width: 10px;
|
|
||||||
flex: 0 0 10px;
|
|
||||||
max-width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -24,8 +24,7 @@ about:
|
||||||
enable: true
|
enable: true
|
||||||
title: "ÜBER AMPERION"
|
title: "ÜBER AMPERION"
|
||||||
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||||
content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. Mehr über uns </p>"
|
content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. [Mehr über uns.](/about/) </p>"
|
||||||
link_text: "Mehr über uns."
|
|
||||||
image: "images/ingenieurbuero.webp"
|
image: "images/ingenieurbuero.webp"
|
||||||
|
|
||||||
############################# About #################################
|
############################# About #################################
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Wir sind AMPERION"
|
title: "Wir sind AMPERION"
|
||||||
subtitle: "Technik mit Verantwortung. Planung mit Weitblick."
|
|
||||||
bg_image: ""
|
bg_image: ""
|
||||||
layout: "about"
|
layout: "about"
|
||||||
draft: false
|
draft: false
|
||||||
|
|
@ -8,10 +7,19 @@ draft: false
|
||||||
intro_section:
|
intro_section:
|
||||||
enable: true
|
enable: true
|
||||||
text: >
|
text: >
|
||||||
**AMPERION GmbH** 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. <br>
|
||||||
Wir entwickeln nachhaltige Energielösungen für Unternehmen, Gemeinden, Bauträger – und auch Privatpersonen, die auf Qualität und Zukunftssicherheit setzen.
|
|
||||||
Dabei begleiten wir Projekte von der Idee bis zur Inbetriebnahme – **unabhängig**, **technisch fundiert** und **zukunftsorientiert**.
|
<br>Wir unterstützen Unternehmen, Gemeinden, Bauträger und Privatpersonen bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit klarem Fokus auf **Photovoltaik**, **Speicherlösungen**, **Ladeinfrastruktur** und **smarte Gebäudetechnik**.<br>
|
||||||
|
|
||||||
|
Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br>
|
||||||
|
<br> Mit **Know‑how** und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zum Betrieb.<br><br>
|
||||||
image: "images/amperion_intro.webp"
|
image: "images/amperion_intro.webp"
|
||||||
|
tags:
|
||||||
|
- Unabhängig
|
||||||
|
- Technisch fundiert
|
||||||
|
- Zukunftsorientiert
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
################################## About #####################################
|
################################## About #####################################
|
||||||
about:
|
about:
|
||||||
|
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
---
|
|
||||||
title: "Leistungen"
|
|
||||||
description: "Beschreibung der angebotenen Dienstleistungen"
|
|
||||||
bg_image: "images/module_reflection_2.webp"
|
|
||||||
layout: "service"
|
|
||||||
draft: false
|
|
||||||
|
|
||||||
########################### About Service #############################
|
|
||||||
about:
|
|
||||||
enable: true
|
|
||||||
title: "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
|
|
||||||
|
|
||||||
########################## Featured Service ############################
|
|
||||||
featured_service:
|
|
||||||
enable: true
|
|
||||||
service_item:
|
|
||||||
- name: "Technische Planungskompetenz"
|
|
||||||
image: "icons/file-badge.svg"
|
|
||||||
|
|
||||||
content: "Langjährige Erfahrung mit komplexer Energieplanung – normgerecht, effizient & zukunftssicher."
|
|
||||||
|
|
||||||
- name: "Intelligente Energiesysteme"
|
|
||||||
image: "icons/plug-zap.svg"
|
|
||||||
|
|
||||||
content: "Von PV bis Speicher und Lastmanagement – für maximale Eigenversorgung und Netzverträglichkeit."
|
|
||||||
|
|
||||||
- name: "Persönliche Betreuung"
|
|
||||||
image: "icons/headset.svg"
|
|
||||||
|
|
||||||
content: "Kurze Wege, schnelle Antworten, direkte Ansprechpartner – auch nach Projektabschluss."
|
|
||||||
|
|
||||||
- name: " Reibungslose Projektabwicklung"
|
|
||||||
image: "icons/hard-hat.svg"
|
|
||||||
|
|
||||||
content: "Wir übernehmen die technische Koordination – von Einreichung bis Ausschreibung."
|
|
||||||
|
|
||||||
- name: " Vernetzte Energiezukunft"
|
|
||||||
image: "icons/network.svg"
|
|
||||||
|
|
||||||
content: "Wir denken Energie ganzheitlich – modular, digital und wachstumsfähig geplant."
|
|
||||||
|
|
||||||
- name: "Präzise Systemplanung"
|
|
||||||
image: "icons/circuit-board.svg"
|
|
||||||
|
|
||||||
content: "Alle Komponenten exakt aufeinander abgestimmt – wirtschaftlich und regelkonform."
|
|
||||||
|
|
||||||
############################# Service ###############################
|
|
||||||
service:
|
|
||||||
title: "Darum AMPERION"
|
|
||||||
description: "Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme."
|
|
||||||
service_item:
|
|
||||||
- picture: "images/services_main/energiekonzepte.webp"
|
|
||||||
name: "Energiekonzepte"
|
|
||||||
link: "/service/energiekonzepte"
|
|
||||||
|
|
||||||
- picture: "images/services_main/projektmanagement.webp"
|
|
||||||
name: "Projektmanagement"
|
|
||||||
link: "/service/projektmanagement"
|
|
||||||
|
|
||||||
- picture: "images/services_main/elektromobilitaet.webp"
|
|
||||||
name: "Elektromobilität"
|
|
||||||
link: "/service/elektromobilitaet"
|
|
||||||
|
|
||||||
############################# Call to Action #################################
|
|
||||||
cta:
|
|
||||||
enable: true
|
|
||||||
---
|
|
||||||
|
|
@ -2,48 +2,76 @@
|
||||||
|
|
||||||
{{ partial "page-title.html" . }}
|
{{ partial "page-title.html" . }}
|
||||||
|
|
||||||
<!-- Intro Section: Wir sind AMPERION -->
|
<!-- Intro + Mission/Vision Section -->
|
||||||
{{ with .Params.intro_section }}
|
{{ with .Params.intro_section }}
|
||||||
{{ if .enable }}
|
{{ if .enable }}
|
||||||
<section id="about-intro" class="section py-5">
|
<section id="about-intro" class="section py-5">
|
||||||
<div class="my-container">
|
|
||||||
|
|
||||||
<!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
|
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
|
||||||
<div class="text-center" style="margin-top: -25px; margin-bottom: 20px;">
|
|
||||||
<h3 class="services-description" style="margin-top: 0; font-weight: 400;">
|
|
||||||
Technik mit Verantwortung. Planung mit Weitblick.
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row align-items-center">
|
<!-- ROW 1: TEXT + BILD -->
|
||||||
|
<div class="row align-items-center gx-5 gy-4 mb-5">
|
||||||
|
|
||||||
<!-- TEXT (links, mobil oben) -->
|
<!-- TEXT -->
|
||||||
<div class="col-md-6 col-sm-12 text-left">
|
<div class="col-lg-6 order-2 order-lg-1 text-left">
|
||||||
<div class="content">
|
<div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
|
||||||
{{ .text | markdownify }}
|
{{ .text | markdownify }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Visual Tags -->
|
||||||
|
<div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
|
||||||
|
{{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
|
||||||
|
{{ range .tags }}
|
||||||
|
<span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
|
||||||
|
{{ index $icons . }} {{ . }}
|
||||||
|
</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BILD (rechts, mobil unten) -->
|
<!-- BILD -->
|
||||||
<div class="col-md-6 col-sm-12 text-center">
|
<div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
|
||||||
<img
|
<img
|
||||||
src="{{ .image | relURL }}"
|
src="{{ .image | relURL }}"
|
||||||
alt="AMPERION Intro"
|
alt="AMPERION – Erneuerbare Energie"
|
||||||
class="img-responsive"
|
loading="lazy"
|
||||||
style="max-width:420px; width:100%; height:auto; margin:0 auto;">
|
decoding="async"
|
||||||
|
class="img-fluid"
|
||||||
|
style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 2: MISSION / VISION / ZIEL -->
|
||||||
|
{{ with $.Params.mission_vision }}
|
||||||
|
{{ if .enable }}
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="tabCommon">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
{{ range $index, $elements := .tabs }}
|
||||||
|
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||||
|
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content pt-3">
|
||||||
|
{{ range $index, $elements := .tabs }}
|
||||||
|
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
||||||
|
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||||
</div>
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
||||||
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
||||||
<div class="container text-center mb-5">
|
<div class="container text-center mb-5">
|
||||||
|
|
@ -93,34 +121,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mission, Vision, Ziel -->
|
|
||||||
<div class="container py-5" style="padding-top: 6rem;">
|
|
||||||
<div class="row">
|
|
||||||
{{ with .Params.mission_vision }}
|
|
||||||
{{ if .enable }}
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="tabCommon">
|
|
||||||
<ul class="nav nav-tabs">
|
|
||||||
{{ range $index, $elements := .tabs }}
|
|
||||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
|
||||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
<div class="tab-content">
|
|
||||||
{{ range $index, $elements := .tabs }}
|
|
||||||
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
|
||||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- About Section (Gründerteam) -->
|
<!-- About Section (Gründerteam) -->
|
||||||
{{ with .Params.about }}
|
{{ with .Params.about }}
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,33 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<header id="mainHeader">
|
<header id="mainHeader">
|
||||||
|
|
||||||
|
|
||||||
{{ with .Params.banner }}
|
{{ with .Params.banner }}
|
||||||
{{ if .enable }}
|
{{ if .enable }}
|
||||||
<section
|
<!-- HERO / SLIDER -->
|
||||||
class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
<section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
||||||
style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"
|
style="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-Container mit 2 Frames (40% / 60%), 10% Rand links & rechts -->
|
|
||||||
|
<!-- *Logo-Zeile mit zwei Frames* -->
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<!-- Frame 1 -->
|
|
||||||
<div class="frame1">
|
<div class="frame1">
|
||||||
<img
|
<img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
|
||||||
src="{{ .logo_image1 | relURL }}"
|
|
||||||
alt="Logo Frame 1"
|
|
||||||
class="banner-logo"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Frame 2 -->
|
|
||||||
<div class="frame2">
|
<div class="frame2">
|
||||||
<img
|
<img src="{{ .logo_image2 | relURL }}" alt="Logo Frame 2" class="banner-logo">
|
||||||
src="{{ .logo_image2 | relURL }}"
|
|
||||||
alt="Logo Frame 2"
|
|
||||||
class="banner-logo"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- *Haupttitel + Button* -->
|
||||||
|
<div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box;">
|
||||||
<!-- Titel / Content / Button -->
|
|
||||||
<div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
|
|
||||||
{{ with .title }}
|
{{ with .title }}
|
||||||
<h1 class="title-custom title-custom-margin fade-in-title">
|
<h1 class="title-custom title-custom-margin fade-in-title">{{ . | markdownify }}</h1>
|
||||||
{{ . | markdownify }}
|
|
||||||
</h1>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ with .button }}
|
{{ with .button }}
|
||||||
{{ if .enable }}
|
{{ if .enable }}
|
||||||
<div
|
<div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
|
||||||
class='scrolldown'
|
style="--color: rgb(0, 0, 0); cursor: pointer;">
|
||||||
onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
|
|
||||||
style="--color: rgb(0, 0, 0); cursor: pointer;"
|
|
||||||
>
|
|
||||||
<div class="chevrons">
|
<div class="chevrons">
|
||||||
<div class='chevrondown'></div>
|
<div class='chevrondown'></div>
|
||||||
<div class='chevrondown'></div>
|
<div class='chevrondown'></div>
|
||||||
|
|
@ -60,121 +42,76 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!-- Scroll/Hide Header -->
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
var scrolldown = document.querySelector('.scrolldown');
|
var scrolldown = document.querySelector('.scrolldown');
|
||||||
scrolldown.addEventListener('click', function() {
|
scrolldown?.addEventListener('click', function () {
|
||||||
const serviceSection = document.getElementById('service');
|
const serviceSection = document.getElementById('service');
|
||||||
const offset = 100; // Der Offset in Pixeln
|
const offset = 100;
|
||||||
|
|
||||||
// Berechne die Position, zu der gescrollt werden soll
|
|
||||||
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||||
|
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
||||||
window.scrollTo({
|
|
||||||
top: targetPosition,
|
|
||||||
behavior: 'smooth' // Sanftes Scrollen
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener("scroll", function () {
|
window.addEventListener("scroll", function () {
|
||||||
if (window.scrollY > 100) {
|
if (window.scrollY > 100) {
|
||||||
scrolldown.classList.add('hide');
|
scrolldown?.classList.add('hide');
|
||||||
} else {
|
} else {
|
||||||
scrolldown.classList.remove('hide');
|
scrolldown?.classList.remove('hide');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
var header = document.getElementById('mainHeader');
|
var header = document.getElementById('mainHeader');
|
||||||
var lastScrollPosition = window.scrollY;
|
var lastScrollPosition = window.scrollY;
|
||||||
|
|
||||||
window.addEventListener('scroll', function () {
|
window.addEventListener('scroll', function () {
|
||||||
var currentScrollPosition = window.scrollY;
|
var currentScrollPosition = window.scrollY;
|
||||||
|
header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
|
||||||
// Wenn der Benutzer nach unten scrollt, verstecke den Header
|
if (currentScrollPosition === 0) header.style.top = '0';
|
||||||
if (currentScrollPosition > lastScrollPosition) {
|
|
||||||
header.style.top = '-100vh'; // Passe diesen Wert an die Höhe deines Headers an
|
|
||||||
}
|
|
||||||
// Wenn der Benutzer nach oben scrollt, zeige den Header wieder an
|
|
||||||
else {
|
|
||||||
header.style.top = '0';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Wenn der Benutzer ganz nach oben scrollt, zeige den Header an
|
|
||||||
if (currentScrollPosition === 0) {
|
|
||||||
header.style.top = '0';
|
|
||||||
}
|
|
||||||
|
|
||||||
lastScrollPosition = currentScrollPosition;
|
lastScrollPosition = currentScrollPosition;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div style="height: 200px;"></div>
|
<div style="height: 200px;"></div>
|
||||||
|
|
||||||
<!-- whyamperion -->
|
<!-- WHY AMPERION (Kompakte Version) -->
|
||||||
{{ if .Params.whyamperion.enable }}
|
{{ with site.GetPage "/whyamperion" }}
|
||||||
{{ partial "whyamperion.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
<!-- /whyamperion -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- services -->
|
|
||||||
{{ with site.GetPage "/service" }}
|
|
||||||
{{ with .Params.service }}
|
{{ with .Params.service }}
|
||||||
<section id="service" class="service">
|
<section class="whyamperion section">
|
||||||
<!-- container-fluid + my-container => um beides kombinieren zu können -->
|
<div class="container my-container">
|
||||||
<div class="container-fluid my-container">
|
<div class="row">
|
||||||
<!-- Block mit Titel und Beschreibung -->
|
<div class="section-title text-center">
|
||||||
<div class="services-title">
|
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="services-description">
|
|
||||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
<!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
|
<div class="row">
|
||||||
<div class="service-grid">
|
{{ range .service_item }}
|
||||||
{{ range first 3 .service_item }} <!-- Hier nur die ersten 3 Elemente nehmen -->
|
<div class="col-sm-6 col-md-3">
|
||||||
<div class="service-item-fixed">
|
<div class="service-item text-center">
|
||||||
<div class="zoom-wrap">
|
<i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
|
||||||
<a href="{{ .link | relURL }}">
|
<h3>{{ .name | markdownify }}</h3>
|
||||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
<p>{{ .content | markdownify }}</p>
|
||||||
<div class="overlay-text">
|
|
||||||
{{ .name }}
|
|
||||||
</div>
|
|
||||||
<div class="overlay"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div><!-- /service-grid -->
|
</div>
|
||||||
</div><!-- /container-fluid.my-container -->
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<!-- /services -->
|
|
||||||
|
|
||||||
<!-- focustopics -->
|
<!-- SERVICES -->
|
||||||
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
|
{{ with site.GetPage "/service" }}
|
||||||
{{ with .Params.service }}
|
{{ with .Params.service }}
|
||||||
<section id="service" class="service">
|
<section id="service" class="service">
|
||||||
<div class="container-fluid my-container">
|
<div class="container-fluid my-container">
|
||||||
<div class="services-title">
|
<div class="services-title">
|
||||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="services-description">
|
<div class="services-description">
|
||||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="service-grid">
|
<div class="service-grid">
|
||||||
{{ range first 3 .service_item }}
|
{{ range first 3 .service_item }}
|
||||||
|
|
@ -182,9 +119,7 @@
|
||||||
<div class="zoom-wrap">
|
<div class="zoom-wrap">
|
||||||
<a href="{{ .link | relURL }}">
|
<a href="{{ .link | relURL }}">
|
||||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||||
<div class="overlay-text">
|
<div class="overlay-text">{{ .name }}</div>
|
||||||
{{ .name }}
|
|
||||||
</div>
|
|
||||||
<div class="overlay"></div>
|
<div class="overlay"></div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -195,41 +130,104 @@
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<!-- /focustopics -->
|
|
||||||
|
|
||||||
<div style="height: 100px;"></div>
|
<!-- FOCUSTOPICS -->
|
||||||
|
{{ with site.GetPage "/focustopic" }}
|
||||||
<!-- why amperion -->
|
{{ with .Params.service }}
|
||||||
{{ with site.GetPage "/why-amperion" }}
|
<section id="focustopic" class="service">
|
||||||
<section class="services-section">
|
<div class="container-fluid my-container">
|
||||||
<h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
|
<div class="services-title">
|
||||||
<h3 class="services-description">{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}</h3>
|
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||||
<div class="services-grid">
|
</div>
|
||||||
{{ range first 6 .Params.featured_service.service_item }}
|
<div class="services-description">
|
||||||
<div class="service-card">
|
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||||
<img src="{{ .image | relURL }}" alt="{{ .name }}" class="service-icon">
|
</div>
|
||||||
<h3 class="service-card-title">{{ .name }}</h3>
|
<div class="service-grid">
|
||||||
<p class="service-card-description"><strong>{{ .content1 | markdownify }}</strong> {{ .content | markdownify }}</p>
|
{{ 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>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<!-- /why amperion -->
|
|
||||||
|
|
||||||
<div style="height: 100px;"></div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{ if .Params.contact.enable }}
|
|
||||||
{{ partial "cta.html" . }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
|
||||||
|
<section class="whyamperion section" style="background-color:#f3f3f3">
|
||||||
|
<div class="container my-container">
|
||||||
|
|
||||||
|
<!-- Titelblock – eigener Wrapper statt .section-title -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="why-title text-center">
|
||||||
|
<h1>Darum AMPERION</h1>
|
||||||
|
<h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karten -->
|
||||||
|
<div class="why-grid mt-5">
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||||
|
<h2 class="service-card-title">Technische Planungskompetenz</h2>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient & zukunftssicher.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||||
|
<h2 class="service-card-title">Intelligente Energiesysteme</h2>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||||
|
<h2 class="service-card-title">Persönliche Betreuung</h2>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||||
|
<h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||||
|
<h2 class="service-card-title">Vernetzte Energiezukunft</h2>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="service-card text-center">
|
||||||
|
<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>
|
||||||
|
<p class="service-card-description">
|
||||||
|
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ABOUT (unverändert) -->
|
||||||
<!-- about -->
|
|
||||||
{{ with .Params.about }}
|
{{ with .Params.about }}
|
||||||
{{ if .enable }}
|
{{ if .enable }}
|
||||||
<section id="about" class="about section">
|
<section id="about" class="about section">
|
||||||
|
|
@ -237,21 +235,20 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<div class="services-title">
|
<div class="services-title">
|
||||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="services-description">
|
<div class="services-description">
|
||||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<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 }}</div>
|
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||||
|
</div>
|
||||||
<div class="hover-link">
|
<div class="hover-link">
|
||||||
{{ with .link_text }}
|
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||||||
<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">
|
||||||
|
|
@ -264,17 +261,13 @@
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<!-- /about -->
|
|
||||||
|
|
||||||
|
<!-- CALL TO ACTION -->
|
||||||
<div style="height: 100px;"></div>
|
|
||||||
<!-- call to action -->
|
|
||||||
{{ if .Params.cta.enable }}
|
{{ if .Params.cta.enable }}
|
||||||
{{ partial "cta.html" . }}
|
{{ partial "cta.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<!-- /call to action -->
|
|
||||||
<div style="height: 100px;"></div>
|
<!-- FACTS -->
|
||||||
<!-- facts -->
|
|
||||||
{{ with .Params.facts }}
|
{{ with .Params.facts }}
|
||||||
{{ if .enable }}
|
{{ if .enable }}
|
||||||
<section class="facts">
|
<section class="facts">
|
||||||
|
|
@ -293,59 +286,4 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.testimonial-item .images-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px; /* Abstand zwischen den Bildern */
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-item .testimonial-image {
|
|
||||||
width: 10px; /* Anpassen der Breite nach Bedarf */
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<div style="height: 100px;"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
var scrollDownButton = document.querySelector('.scroll-down-button');
|
|
||||||
scrollDownButton.addEventListener('click', function() {
|
|
||||||
document.querySelector('#about').scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
var scrolled = false;
|
|
||||||
var initialScrollListener = function() {
|
|
||||||
if (!scrolled) {
|
|
||||||
window.removeEventListener('scroll', initialScrollListener);
|
|
||||||
document.getElementById('welcome').scrollIntoView({ behavior: 'smooth' });
|
|
||||||
scrolled = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('scroll', initialScrollListener);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("scroll", function() {
|
|
||||||
var scrolldown = document.querySelector('.scrolldown');
|
|
||||||
if (window.scrollY > 100) { // Adjust this value based on when you want to hide the icon
|
|
||||||
scrolldown.classList.add('hide');
|
|
||||||
} else {
|
|
||||||
scrolldown.classList.remove('hide');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,3 +15,11 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- AOS JS -->
|
||||||
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||||
|
<script>
|
||||||
|
AOS.init({
|
||||||
|
duration: 800,
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -66,4 +66,6 @@
|
||||||
|
|
||||||
{{ template "_internal/opengraph.html" . }}
|
{{ template "_internal/opengraph.html" . }}
|
||||||
|
|
||||||
|
<!-- AOS Animation CSS -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,17 @@
|
||||||
<section class="page-title" style="background-image: url('{{ .Params.bg_image | relURL }}');">
|
<section class="page-title"
|
||||||
|
style="background-image: url('{{ .Params.bg_image | relURL }}'); padding: 28px 0 12px;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12 text-center">
|
||||||
<div class="block">
|
<div class="services-title">
|
||||||
<h2 class="custom-title">{{ .Title }}</h2>
|
<h2 style="margin:0 0 6px 0; font-weight:600;">{{ .Title }}</h2>
|
||||||
|
</div>
|
||||||
{{ with .Params.description }}
|
{{ with .Params.description }}
|
||||||
<h3>{{ . }}</h3>
|
<div class="services-description">
|
||||||
|
<h3 style="margin:0; font-weight:400;">{{ . | markdownify }}</h3>
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
{{ with site.GetPage "/whyamperion" }}
|
|
||||||
{{ with .Params.service }}
|
|
||||||
<section class="whyamperion">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="section-title">
|
|
||||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
|
||||||
{{ with .description }}<p>{{ . | markdownify }}</p>{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
{{ range .service_item }}
|
|
||||||
<div class="col-sm-6 col-md-3">
|
|
||||||
<div class="service-item">
|
|
||||||
<i class="{{ .icon }}"></i>
|
|
||||||
<h4>{{ .name | markdownify }}</h4>
|
|
||||||
<p>{{ .content | markdownify }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
@ -1,59 +1,72 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*=== MEDIA QUERY ===*/
|
/*=== MEDIA QUERY ===*/
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
src: local("Open Sans"), local("OpenSans"), url("/static/fonts/OpenSans-SemiboldItalic.woff2") format("woff2");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans Semibold';
|
|
||||||
src: local("Open Sans Semibold"), local("OpenSansSemibold"), url("/static/fonts/OpenSans-Semibold.woff2") format("woff2");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1.5;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-family: "Open Sans", sans-serif;
|
font-size: 16px;
|
||||||
-webkit-font-smoothing: antialiased; }
|
line-height: 1.6;
|
||||||
|
color: #222;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale; }
|
||||||
|
|
||||||
h1,
|
h1 {
|
||||||
h3,
|
font-size: 3rem;
|
||||||
h4,
|
font-weight: 600;
|
||||||
h5,
|
line-height: 1.3;
|
||||||
h6 {
|
margin-bottom: 1rem;
|
||||||
font-family: "Open Sans Semibold", sans-serif;
|
color: #046e6e; }
|
||||||
font-weight: 400; }
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: "Open Sans Semibold", sans-serif;
|
font-size: 2rem;
|
||||||
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #046e6e;
|
line-height: 1.4;
|
||||||
font-size: 28px; }
|
margin-bottom: 1rem;
|
||||||
@media (max-width: 480px) {
|
color: #222; }
|
||||||
h2 {
|
|
||||||
font-size: 22px; } }
|
|
||||||
h1 {
|
|
||||||
font-size: 80px; }
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 34px; } }
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 28px; } }
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 26px; } }
|
|
||||||
h3 {
|
|
||||||
font-size: 20px; }
|
|
||||||
|
|
||||||
h4 {
|
h3 {
|
||||||
font-size: 25px; }
|
font-size: 1.5rem;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: inherit; }
|
||||||
|
|
||||||
|
.text-left {
|
||||||
|
text-align: left; }
|
||||||
|
|
||||||
|
.text-right {
|
||||||
|
text-align: right; }
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
|
.text-justify {
|
||||||
|
text-align: justify; }
|
||||||
|
|
||||||
|
strong, b {
|
||||||
|
font-weight: 700; }
|
||||||
|
|
||||||
|
em, i {
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: black;
|
margin-bottom: 1.25rem; }
|
||||||
font-size: 15px;
|
|
||||||
font-family: "Open Sans Semibold", sans-serif; }
|
ul, ol {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.6; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #046e6e;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease; }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #F5A623;
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -266,7 +279,7 @@ input[type="tel"] {
|
||||||
.section-title p {
|
.section-title p {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: #626262;
|
color: #626262;
|
||||||
font-family: "Open Sans Semibold", sans-serif;
|
font-family: "Open Sans Semibold", serif;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
/* Standard Schriftgröße für p */ }
|
/* Standard Schriftgröße für p */ }
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
@ -1210,7 +1223,7 @@ h2, h3 {
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
margin-bottom: 20px; }
|
margin-bottom: 20px; }
|
||||||
.testimonial .testimonial-carousel p {
|
.testimonial .testimonial-carousel p {
|
||||||
font-family: "Open Sans Semibold", sans-serif;
|
font-family: "Open Sans Semibold", serif;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
padding-bottom: 20px; }
|
padding-bottom: 20px; }
|
||||||
.testimonial .testimonial-carousel .user img {
|
.testimonial .testimonial-carousel .user img {
|
||||||
|
|
@ -2521,6 +2534,7 @@ h2, h3 {
|
||||||
.footer .copyright a {
|
.footer .copyright a {
|
||||||
font-weight: 600; }
|
font-weight: 600; }
|
||||||
|
|
||||||
|
/* ========== Typografie & Basis ========== */
|
||||||
.title-custom {
|
.title-custom {
|
||||||
color: #046e6e; }
|
color: #046e6e; }
|
||||||
|
|
||||||
|
|
@ -2531,12 +2545,15 @@ h2, h3 {
|
||||||
text-align: justify; }
|
text-align: justify; }
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: 0px; }
|
margin-bottom: 0; }
|
||||||
|
|
||||||
#welcome.section, #service.section {
|
/* ========== Sektionen Padding (Intro etc.) ========== */
|
||||||
|
#welcome.section,
|
||||||
|
#service.section {
|
||||||
padding-top: 90px;
|
padding-top: 90px;
|
||||||
padding-bottom: 4px; }
|
padding-bottom: 4px; }
|
||||||
|
|
||||||
|
/* ========== Beschreibung ========== */
|
||||||
.description {
|
.description {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -2550,6 +2567,7 @@ section {
|
||||||
.description {
|
.description {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding-top: 50px; } }
|
padding-top: 50px; } }
|
||||||
|
/* ========== Fakten ========== */
|
||||||
.facts .fact-item {
|
.facts .fact-item {
|
||||||
padding: 15px; }
|
padding: 15px; }
|
||||||
|
|
||||||
|
|
@ -2560,11 +2578,28 @@ section {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||||
|
|
||||||
|
/* ========== Hintergründe ========== */
|
||||||
.custom-background {
|
.custom-background {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat; }
|
background-repeat: no-repeat; }
|
||||||
|
|
||||||
|
.gif-background {
|
||||||
|
background-image: url("/images/BackgroundAnimation.svg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center -220px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: relative; }
|
||||||
|
.gif-background::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8); }
|
||||||
|
|
||||||
|
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||||
.service-arrow .block {
|
.service-arrow .block {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -2576,7 +2611,8 @@ section {
|
||||||
.service-content {
|
.service-content {
|
||||||
flex: 1; }
|
flex: 1; }
|
||||||
|
|
||||||
.service-icon, .service-image {
|
.service-icon,
|
||||||
|
.service-image {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
|
||||||
.service-image img {
|
.service-image img {
|
||||||
|
|
@ -2584,29 +2620,20 @@ section {
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
||||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
/* Farbvarianten für Services */
|
||||||
|
.bg-service1,
|
||||||
|
.bg-service3,
|
||||||
|
.bg-service5,
|
||||||
|
.bg-service7 {
|
||||||
background-color: #8bcfd6; }
|
background-color: #8bcfd6; }
|
||||||
|
|
||||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
.bg-service2,
|
||||||
|
.bg-service4,
|
||||||
|
.bg-service6,
|
||||||
|
.bg-service8 {
|
||||||
background-color: #6baeb5; }
|
background-color: #6baeb5; }
|
||||||
|
|
||||||
.fixed-width {
|
/* Service-Gitter */
|
||||||
width: 1200px; }
|
|
||||||
|
|
||||||
.fixed-text {
|
|
||||||
width: 600px;
|
|
||||||
margin-right: 15px; }
|
|
||||||
|
|
||||||
.page-title::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
z-index: -1; }
|
|
||||||
|
|
||||||
.service-grid {
|
.service-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
@ -2628,21 +2655,17 @@ section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
.zoom-wrap:hover {
|
||||||
.service-item-fixed:hover .zoom-wrap {
|
|
||||||
transform: scale(1.06); }
|
transform: scale(1.06); }
|
||||||
|
|
||||||
.zoom-wrap img {
|
.zoom-wrap img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
||||||
.zoom-wrap a {
|
.zoom-wrap a {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit; }
|
color: inherit; }
|
||||||
|
|
||||||
.zoom-wrap .overlay {
|
.zoom-wrap .overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -2663,26 +2686,84 @@ 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; }
|
||||||
|
|
||||||
|
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
|
||||||
|
.why-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
/* Desktop: 3 Spalten => 3×2 */
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
/* Jede Zeile passt sich der höchsten Karte an */
|
||||||
|
align-items: stretch; }
|
||||||
|
|
||||||
|
/* Tablet: 2 Spalten => 2×3 */
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
.why-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||||
|
|
||||||
|
/* Mobil: 1 Spalte => 1×6 */
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
.why-grid {
|
||||||
|
grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
/* Karten sollen die Zellen voll ausfüllen */
|
||||||
|
.service-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
/* gleiche Höhe pro Zeile */
|
||||||
|
background: #fff;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: transform .25s ease, box-shadow .25s ease;
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
|
/* Icon einheitlich */
|
||||||
|
.service-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 0 auto .75rem auto;
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||||
|
.service-card-title {
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: .25rem 0 .5rem;
|
||||||
|
color: #0f2f2f; }
|
||||||
|
|
||||||
|
.service-card-description {
|
||||||
|
font: inherit;
|
||||||
|
color: #444;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
/* ========== Container & Layout-Hilfen ========== */
|
||||||
.my-container {
|
.my-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto; }
|
margin: 0 auto; }
|
||||||
|
|
||||||
.gif-background {
|
.fixed-width {
|
||||||
background-image: url("/images/BackgroundAnimation.svg");
|
max-width: 1200px;
|
||||||
background-size: cover;
|
margin: 0 auto; }
|
||||||
background-position: center -220px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position: relative; }
|
|
||||||
|
|
||||||
.gif-background::after {
|
.fixed-text {
|
||||||
|
max-width: 600px;
|
||||||
|
margin-right: 15px; }
|
||||||
|
|
||||||
|
/* ========== Titel mit Hintergrund ========== */
|
||||||
|
.page-title::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
width: 100%;
|
||||||
bottom: 0;
|
height: 100%;
|
||||||
background-color: rgba(255, 255, 255, 0.8); }
|
background-color: #ffffff;
|
||||||
|
z-index: -1; }
|
||||||
|
|
||||||
|
/* ========== Bildkomponenten & Icons ========== */
|
||||||
.custom-image {
|
.custom-image {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
|
|
@ -2691,13 +2772,13 @@ section {
|
||||||
.custom-title {
|
.custom-title {
|
||||||
color: #046e6e; }
|
color: #046e6e; }
|
||||||
|
|
||||||
|
/* ========== Hover Links ========== */
|
||||||
.hover-link {
|
.hover-link {
|
||||||
transition: color 0.3s ease; }
|
transition: color 0.3s ease; }
|
||||||
|
|
||||||
.hover-link:hover {
|
.hover-link:hover {
|
||||||
color: #F5A623; }
|
color: #F5A623; }
|
||||||
|
|
||||||
/* Mehrwert */
|
/* ========== Mehrwerte ========== */
|
||||||
.mehrwerte-grid {
|
.mehrwerte-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
|
@ -2720,22 +2801,34 @@ section {
|
||||||
background-color: teal;
|
background-color: teal;
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
|
||||||
.mehrwerte-box h4,
|
|
||||||
.mehrwerte-box p {
|
|
||||||
color: #000 !important;
|
|
||||||
transition: color 0.3s ease; }
|
|
||||||
.mehrwerte-box:hover h4, .mehrwerte-box:hover p {
|
.mehrwerte-box:hover h4, .mehrwerte-box:hover p {
|
||||||
color: #000 !important; }
|
color: #000 !important; }
|
||||||
|
.mehrwerte-box h4, .mehrwerte-box p {
|
||||||
|
color: #000 !important;
|
||||||
|
transition: color 0.3s ease; }
|
||||||
|
|
||||||
.mehrwert-icon {
|
.mehrwert-icon {
|
||||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
|
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
|
||||||
|
|
||||||
/* Gründerteam Styling */
|
/* ========== Gründerteam & Intro-Text ========== */
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding-left: 5vw;
|
padding-left: 5vw;
|
||||||
padding-right: 5vw; }
|
padding-right: 5vw; }
|
||||||
|
|
||||||
|
#about-intro .intro-text {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.85;
|
||||||
|
max-width: 200ch;
|
||||||
|
hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
margin-bottom: 1rem; }
|
||||||
|
#about-intro .intro-text p, #about-intro .intro-text li {
|
||||||
|
margin-bottom: 1rem; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
#about-intro .intro-text {
|
||||||
|
font-size: 1.35rem; } }
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth; }
|
scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue