Initial commit – lokale Dateien hochgeladen
This commit is contained in:
Alexander-Stosic
parent
5bdf649ce1
commit
0db3bb9207
21 changed files with 907 additions and 616 deletions
|
|
@ -14,38 +14,36 @@
|
|||
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 {
|
||||
line-height: 1.5;
|
||||
font-family: $font-primary;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-secondary;
|
||||
font-weight: 400;
|
||||
// keine Farbe, Standardfarbe übernehmen
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h2 {
|
||||
font-family: $font-secondary;
|
||||
font-weight: 400;
|
||||
color: $color-heading-h2; // Nur h2 in Türkis
|
||||
font-size: $h2;
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2-sm;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -64,14 +62,6 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h2;
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2-sm;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h3;
|
||||
}
|
||||
|
|
@ -81,7 +71,7 @@ h4 {
|
|||
}
|
||||
|
||||
p {
|
||||
color: darken( $light, 49.41);
|
||||
color: black;
|
||||
font-size: $font-size;
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,322 +1,257 @@
|
|||
// Add your custom code
|
||||
|
||||
.title-custom {
|
||||
color: #046e6e;
|
||||
color: #046e6e;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Reduziert den Abstand zwischen den Sections */
|
||||
section {
|
||||
margin-bottom: 0px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
/* Zusätzliche optionale Stile für eine bessere Darstellung */
|
||||
#welcome.section, #service.section {
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 4px; /* Anpassung nach Bedarf */
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#welcome.section, #service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 1px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 22px; /* Standard Schriftgröße */
|
||||
line-height: 1.5;
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px; /* Kleinere Schriftgröße für Tablets */
|
||||
padding-top: 70px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px; /* Noch kleinere Schriftgröße für Handys */
|
||||
padding-top: 50px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
.facts .fact-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
||||
.fact-image {
|
||||
height: 250px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
|
||||
.fact-image {
|
||||
height: 250px; /* Einheitliche Höhe für alle Bilder */
|
||||
width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
|
||||
object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
|
||||
border-radius: 8px; /* Abgerundete Ecken für die Bilder */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
|
||||
}
|
||||
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-radius: 100px;
|
||||
color: #8a0909;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 150px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
}
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-icon, .service-image {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bg-service1 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service2 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service3 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service4 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service5 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service6 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.service-image img {
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px; /* Feste Breite, die du anpassen kannst */
|
||||
height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */
|
||||
}
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px; /* Optional: Padding hinzufügen */
|
||||
border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */
|
||||
color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
||||
background-color: #8bcfd6;
|
||||
}
|
||||
|
||||
|
||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
||||
background-color: #6baeb5;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.fixed-text {
|
||||
width: 600px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
.fixed-text {
|
||||
width: 600px; /* Feste Breite für den Text */
|
||||
margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */
|
||||
}
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 600px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
margin: 0; /* Entfernt zusätzliche Margins */
|
||||
padding: 0; /* Entfernt zusätzliches Padding */
|
||||
border: none; /* Entfernt jegliche Standardrahmen */
|
||||
display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */
|
||||
}
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff; /* Weiß als Hintergrundfarbe */
|
||||
z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 30px; /* 40px Abstand sowohl horizontal als auch vertikal */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* => Standard: 3 Spalten für größere Bildschirme */
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* => mittlere Screens: nur 2 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* => kleine Screens: 1 Spalte */
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
height: auto; /* Oder "auto" falls die Höhe flexibel sein soll */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px; /* Abgerundete Ecken */
|
||||
}
|
||||
|
||||
.zoom-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.zoom-wrap a {
|
||||
display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
|
||||
text-decoration: none; /* Entfernt die Unterstreichung des Links */
|
||||
color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
@media (max-width: 576px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Das "dunkle Overlay" */
|
||||
}
|
||||
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zoom-wrap {
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zoom-wrap a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.zoom-wrap .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.4); /* dunkler Schleier (30% schwarz) */
|
||||
z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
|
||||
pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2; /* Höher als das Overlay */
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */
|
||||
background-size: cover; /* Deckt den gesamten Hintergrund ab */
|
||||
background-position: center -220px; /* Positioniert das GIF oben in der Mitte */
|
||||
background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */
|
||||
position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */
|
||||
}
|
||||
|
||||
.gif-background::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */
|
||||
pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
|
||||
}
|
||||
|
||||
.custom-image {
|
||||
.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);
|
||||
}
|
||||
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
max-width: 70%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.custom-title {
|
||||
color: #046e6e; /* Ersetze dies mit der Farbe deiner Wahl */
|
||||
color: #046e6e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hover-link {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-link:hover {
|
||||
color: #F5A623;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mehrwert */
|
||||
.mehrwerte-grid {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mehrwerte-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#004d4d, 10%);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
h4,
|
||||
p {
|
||||
color: #000 !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
&:hover h4,
|
||||
&:hover p {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
|
||||
}
|
||||
|
||||
/* Gründerteam Styling */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,30 @@
|
|||
############# German navigation ##############
|
||||
|
||||
# main menu
|
||||
|
||||
# Hauptmenü
|
||||
|
||||
[[main]]
|
||||
name = "Leistungen"
|
||||
url = "service/"
|
||||
url = "leistungen/"
|
||||
weight = 1
|
||||
identifier = "service"
|
||||
identifier = "leistungen"
|
||||
|
||||
[[main]]
|
||||
name = "Planung"
|
||||
url = "service/planung/"
|
||||
weight = 1
|
||||
parent = "service"
|
||||
|
||||
[[main]]
|
||||
name = "Projektmanagement"
|
||||
url = "service/projektmanagement/"
|
||||
weight = 2
|
||||
parent = "service"
|
||||
|
||||
[[main]]
|
||||
name = "Consulting"
|
||||
url = "service/consulting/"
|
||||
weight = 3
|
||||
parent = "service"
|
||||
[[main]]
|
||||
name = "Planung"
|
||||
url = "leistungen/planung/"
|
||||
weight = 1
|
||||
parent = "leistungen"
|
||||
|
||||
[[main]]
|
||||
name = "Projektmanagement"
|
||||
url = "leistungen/projektmanagement/"
|
||||
weight = 2
|
||||
parent = "leistungen"
|
||||
|
||||
[[main]]
|
||||
name = "Consulting"
|
||||
url = "leistungen/consulting/"
|
||||
weight = 3
|
||||
parent = "leistungen"
|
||||
|
||||
[[main]]
|
||||
name = "Fokusthemen"
|
||||
|
|
@ -35,25 +32,23 @@ url = "fokusthemen/"
|
|||
weight = 2
|
||||
identifier = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "Photovoltaik"
|
||||
url = "service/photovoltaik/"
|
||||
weight = 1
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "Energiespeicher"
|
||||
url = "service/energierspeicher/"
|
||||
weight = 2
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "E-Mobilität"
|
||||
url = "service/emobilität/"
|
||||
weight = 3
|
||||
parent = "fokusthemen"
|
||||
[[main]]
|
||||
name = "Photovoltaik"
|
||||
url = "fokusthemen/photovoltaik/"
|
||||
weight = 1
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "Energiespeicher"
|
||||
url = "fokusthemen/energiespeicher/"
|
||||
weight = 2
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "E-Mobilität"
|
||||
url = "fokusthemen/emobilitaet/"
|
||||
weight = 3
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "Über AMPERION"
|
||||
|
|
@ -67,15 +62,16 @@ weight = 4
|
|||
|
||||
[[main]]
|
||||
name = "Karriere"
|
||||
url = "contact/"
|
||||
url = "karriere/"
|
||||
weight = 5
|
||||
|
||||
|
||||
|
||||
# footer menu
|
||||
# Footer-Menü
|
||||
|
||||
[[footer]]
|
||||
name = "Leistungen"
|
||||
url = "service/"
|
||||
url = "leistungen/"
|
||||
weight = 1
|
||||
|
||||
[[footer]]
|
||||
|
|
@ -101,4 +97,4 @@ weight = 5
|
|||
[[footer]]
|
||||
name = "Datenschutz"
|
||||
url = "datenschutz/"
|
||||
weight = 6
|
||||
weight = 6
|
||||
|
|
|
|||
|
|
@ -1,59 +1,54 @@
|
|||
############# English navigation ##############
|
||||
|
||||
# main menu
|
||||
|
||||
# Main menu
|
||||
|
||||
[[main]]
|
||||
name = "Services"
|
||||
url = "service/"
|
||||
url = "leistungen/"
|
||||
weight = 1
|
||||
identifier = "service"
|
||||
identifier = "services"
|
||||
|
||||
[[main]]
|
||||
name = "Planning"
|
||||
url = "service/planung/"
|
||||
weight = 1
|
||||
parent = "service"
|
||||
|
||||
[[main]]
|
||||
name = "Project Management"
|
||||
url = "service/projektmanagement/"
|
||||
weight = 2
|
||||
parent = "service"
|
||||
|
||||
[[main]]
|
||||
name = "Consulting"
|
||||
url = "service/consulting/"
|
||||
weight = 3
|
||||
parent = "service"
|
||||
[[main]]
|
||||
name = "Planning"
|
||||
url = "leistungen/planung/"
|
||||
weight = 1
|
||||
parent = "services"
|
||||
|
||||
[[main]]
|
||||
name = "Project Management"
|
||||
url = "leistungen/projektmanagement/"
|
||||
weight = 2
|
||||
parent = "services"
|
||||
|
||||
[[main]]
|
||||
name = "Consulting"
|
||||
url = "leistungen/consulting/"
|
||||
weight = 3
|
||||
parent = "services"
|
||||
|
||||
[[main]]
|
||||
name = "Focus Topics"
|
||||
url = "fokusthemen/"
|
||||
weight = 2
|
||||
identifier = "fokusthemen"
|
||||
identifier = "focustopics"
|
||||
|
||||
[[main]]
|
||||
name = "Photovoltaic"
|
||||
url = "service/photovoltaik/"
|
||||
weight = 1
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "Energy storage"
|
||||
url = "service/energierspeicher/"
|
||||
weight = 2
|
||||
parent = "fokusthemen"
|
||||
|
||||
[[main]]
|
||||
name = "E-mobility"
|
||||
url = "service/emobilität/"
|
||||
weight = 3
|
||||
parent = "fokusthemen"
|
||||
[[main]]
|
||||
name = "Photovoltaics"
|
||||
url = "fokusthemen/photovoltaik/"
|
||||
weight = 1
|
||||
parent = "focustopics"
|
||||
|
||||
[[main]]
|
||||
name = "Energy Storage"
|
||||
url = "fokusthemen/energiespeicher/"
|
||||
weight = 2
|
||||
parent = "focustopics"
|
||||
|
||||
[[main]]
|
||||
name = "E-Mobility"
|
||||
url = "fokusthemen/emobilitaet/"
|
||||
weight = 3
|
||||
parent = "focustopics"
|
||||
|
||||
[[main]]
|
||||
name = "About AMPERION"
|
||||
|
|
@ -67,15 +62,15 @@ weight = 4
|
|||
|
||||
[[main]]
|
||||
name = "Career"
|
||||
url = "contact/"
|
||||
url = "karriere/"
|
||||
weight = 5
|
||||
|
||||
|
||||
# Footer menu
|
||||
|
||||
# footer menu
|
||||
[[footer]]
|
||||
name = "Services"
|
||||
url = "service/"
|
||||
url = "leistungen/"
|
||||
weight = 1
|
||||
|
||||
[[footer]]
|
||||
|
|
@ -89,7 +84,7 @@ url = "about/"
|
|||
weight = 3
|
||||
|
||||
[[footer]]
|
||||
name = "Impressum"
|
||||
name = "Imprint"
|
||||
url = "impressum/"
|
||||
weight = 4
|
||||
|
||||
|
|
@ -99,6 +94,6 @@ url = "agb/"
|
|||
weight = 5
|
||||
|
||||
[[footer]]
|
||||
name = "Data protection"
|
||||
name = "Data Protection"
|
||||
url = "datenschutz/"
|
||||
weight = 6
|
||||
weight = 6
|
||||
|
|
|
|||
21
content/german/Fokusthemen/emobilitaet.md
Normal file
21
content/german/Fokusthemen/emobilitaet.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: "E-Mobilität"
|
||||
description: "Kompetente Begleitung bei Ladeinfrastruktur, Standortplanung und technischen Umsetzungen für E-Mobilität."
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Ladeinfrastruktur effizient planen
|
||||
|
||||
E-Mobilität ist mehr als nur Ladestationen. Wir helfen Ihnen, technische, wirtschaftliche und regulatorische Anforderungen in Einklang zu bringen – für zukunftssichere Mobilitätslösungen.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Standortanalyse & Netzanschlussplanung
|
||||
- Auswahl geeigneter Ladesysteme & Hersteller
|
||||
- Unterstützung bei MS-/NS-Zuleitungen
|
||||
- Integration in bestehende Energiekonzepte
|
||||
- Begleitung bei Behördenverfahren & Förderungen
|
||||
|
||||
**Warum AMPERION?** Weil wir Elektrotechnik und Mobilität ganzheitlich denken.
|
||||
21
content/german/Fokusthemen/energiespeicher.md
Normal file
21
content/german/Fokusthemen/energiespeicher.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: "Energiespeicher"
|
||||
description: "Individuelle Konzepte für Stromspeicherlösungen – für mehr Autarkie und Netzunabhängigkeit."
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Energie speichern, wenn sie verfügbar ist
|
||||
|
||||
Energiespeicher ermöglichen maximale Eigenverbrauchsquote und höhere Netzunabhängigkeit. Ob Lithium-Ionen-Speicher oder Redox-Flow-Technologien – wir beraten Sie technologieoffen und unabhängig.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Systemauslegung & Integration in bestehende Anlagen
|
||||
- Wirtschaftlichkeitsrechnungen & ROI-Analysen
|
||||
- Dimensionierung & Regelstrategien
|
||||
- Unterstützung bei Förderungen & Ausschreibungen
|
||||
- Konzepte für Notstrom- & Inselbetrieb
|
||||
|
||||
**Ziel:** Volle Kontrolle über Ihren Energiehaushalt – heute und in Zukunft.
|
||||
21
content/german/Fokusthemen/photovoltaik.md
Normal file
21
content/german/Fokusthemen/photovoltaik.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: "Photovoltaik"
|
||||
description: "Planung, Beratung und Umsetzung nachhaltiger Photovoltaik-Lösungen für Unternehmen und Privatkunden."
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Effizient zur Sonnenenergie
|
||||
|
||||
Die Nutzung von Solarenergie ist ein zentraler Bestandteil der Energiewende. Wir unterstützen Sie bei der Planung, Dimensionierung und Umsetzung Ihrer Photovoltaikanlage – von der Dachanalyse über die Netzanfrage bis hin zur fertigen Anlage.
|
||||
|
||||
**Unsere Leistungen:**
|
||||
|
||||
- Technische & wirtschaftliche Machbarkeitsanalysen
|
||||
- Ertrags- & Verschattungsberechnungen
|
||||
- Unterstützung bei Netzanschluss & Förderungen
|
||||
- Begleitung bei Ausschreibungen & Vergabe
|
||||
- Lastprofiloptimierung & Energiemonitoring
|
||||
|
||||
**Ihr Vorteil:** Maßgeschneiderte Lösungen, die langfristig Energie und Kosten sparen.
|
||||
67
content/german/Leistungen/consulting.md
Normal file
67
content/german/Leistungen/consulting.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: "Consulting & Energieberatung"
|
||||
description: "Beratung zu Energiekonzepten, Marktbeobachtung, Begutachtung von Bestandsanlagen, Förderberatung und Energiemanagement – unabhängige Beratung von AMPERION."
|
||||
slug: "consulting"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
draft: false
|
||||
tags: ["Consulting", "Energieberatung", "Energiekonzept", "Förderberatung", "Energiemanagement", "Bestandsanlagen", "Marktbeobachtung"]
|
||||
categories: ["Leistungen"]
|
||||
---
|
||||
|
||||
# Unabhängige Beratung, die Entscheidungen erleichtert.
|
||||
|
||||
Wir beraten **herstellerneutral** zu Technik, Wirtschaftlichkeit und Umsetzung – von der **Bestandsanalyse** bis zur **Förderstrategie**. Ziel: **bessere Entscheidungen**, geringere Risiken, schnellere Umsetzung.
|
||||
|
||||
---
|
||||
|
||||
## Unsere Consulting‑Leistungen
|
||||
|
||||
### Beratung zu Energiekonzepten
|
||||
- Strategie für **PV, Speicher, EMS, Ladeinfrastruktur, WP**
|
||||
- Eigenverbrauch, Peak‑Shaving, Tarif‑/Marktmodell‑Bewertung
|
||||
- Roadmap & Priorisierung (Quick‑Wins vs. Invest)
|
||||
|
||||
### Marktbeobachtung
|
||||
- Technologietrends, Komponentenverfügbarkeit, Preisniveaus
|
||||
- Auswirkungen regulatorischer Änderungen und Netzentgelte
|
||||
- Chancen‑/Risikobewertung für Invests
|
||||
|
||||
### Begutachtung von Bestandsanlagen
|
||||
- Technische Due Diligence (Zustand, Norm, Betriebssicherheit)
|
||||
- Performance‑Analyse, OPEX‑Optimierung, Retrofit‑Empfehlungen
|
||||
- Mess‑/Schutz‑/Dokumentationscheck
|
||||
|
||||
### Förderberatung
|
||||
- Förderfähigkeit & Kombinierbarkeit (investiv/operativ)
|
||||
- Erforderliche Nachweise & Zeitplan
|
||||
- Begleitung von Antrag bis Verwendungsnachweis
|
||||
|
||||
### Energiemanagement
|
||||
- Zielsysteme (ISO 50001 optional), KPI‑Definition
|
||||
- Monitoring‑Konzept (Messstellen, Daten, Dashboards)
|
||||
- Last‑/Energieberichte, Maßnahmenkatalog mit Amortisation
|
||||
|
||||
---
|
||||
|
||||
## Ergebnis & Mehrwert
|
||||
- **Entscheidungsvorlagen** mit technischer & wirtschaftlicher Bewertung
|
||||
- **Roadmaps** inkl. Milestones und Verantwortlichkeiten
|
||||
- **Risiko‑ und Maßnahmenkatalog** für Planung & Betrieb
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Consulting
|
||||
**Ist die Beratung herstellerneutral?**
|
||||
Ja. Wir empfehlen ausschließlich **bedarfsgerechte** Lösungen.
|
||||
|
||||
**Gibt es auch Workshops?**
|
||||
Ja – Strategie‑, Technologie‑ oder Förder‑Workshops (½–1 Tag).
|
||||
|
||||
**Unterstützen Sie bei Förderanträgen?**
|
||||
Ja – von der Prüfung bis zur Einreichung und Dokumentation.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Kurztermin buchen: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
89
content/german/Leistungen/planung.md
Normal file
89
content/german/Leistungen/planung.md
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: "Planung Elektrotechnik & Energie"
|
||||
description: "Einreichplanung, Entwurfs- und Ausführungsplanung, Energieausweis, Energiekonzepte und Studien – AMPERION ist staatlich geprüftes Ingenieurbüro & konzessionierter Elektrotechnikbetrieb aus Niederösterreich."
|
||||
slug: "planung"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
draft: false
|
||||
tags: ["Elektrotechnik Planung", "Einreichplanung", "Ausführungsplanung", "Energieausweis", "Energiekonzept", "Studie", "Photovoltaik", "Ladeinfrastruktur"]
|
||||
categories: ["Leistungen"]
|
||||
---
|
||||
|
||||
# Planung mit Verantwortung. Technik mit Weitblick.
|
||||
|
||||
Als **staatlich geprüftes Ingenieurbüro** und **konzessionierter Elektrotechnikbetrieb** planen wir elektrische Anlagen **normkonform, wirtschaftlich und zukunftssicher** – vom Konzept bis zur genehmigungsfähigen Ausführungsplanung. Unser Fokus: **Photovoltaik, Energiespeicher, Ladeinfrastruktur, Gebäudetechnik** und **Netzintegration** (inkl. Mittelspannungsanschlüsse).
|
||||
|
||||
---
|
||||
|
||||
## Unsere Planungsleistungen
|
||||
|
||||
### Einreichplanung
|
||||
- Genehmigungsfähige Pläne und Unterlagen (Behörden, Netzbetreiber)
|
||||
- Dimensionierung, Schutzkonzepte, Leitungs- und Kabeltrassen
|
||||
- Netzanschlussanfrage (NS/MS), Lastfluss- & Kurzschlussbetrachtungen
|
||||
- Brandschutz- und Fluchtwegbezug, Überspannungs- & Blitzschutzkonzept
|
||||
|
||||
### Entwurfs- und Ausführungsplanung
|
||||
- Schaltpläne, Detail- und Montagepläne, Kabellisten, Klemmpläne
|
||||
- GAEB/Leistungsverzeichnisse, Massenermittlungen, Kostenschätzung
|
||||
- Betreiber- & Wartungsanforderungen, Normenprüfung (ÖVE/ÖNORM/EN)
|
||||
- Schnittstellenplanung PV ↔ Speicher ↔ WP ↔ EMS ↔ Ladeinfrastruktur
|
||||
|
||||
### Energieausweis (Nichtwohn- & Wohngebäude)
|
||||
- Bedarfsermittlung nach geltenden Normen
|
||||
- Variantenvergleich (Hülle/Technik) inkl. **CO₂**- und Betriebskosteneffekte
|
||||
- Dokumentation für **Förderstellen** und Behörden
|
||||
|
||||
### Energiekonzepte
|
||||
- PV‑Potenzial, Speicherstrategie, Eigenverbrauchsoptimierung
|
||||
- Lastganganalyse, **Peak‑Shaving**, Tarifsimulation (fix/variabel)
|
||||
- Elektromobilität: Lade- und Lastmanagement, Zähler- & Abrechnungslogik
|
||||
- Roadmap zur **Dekarbonisierung** und TCO‑Optimierung
|
||||
|
||||
### Studien
|
||||
- Machbarkeits‑ & Standortstudien (Technik, Recht, Wirtschaftlichkeit)
|
||||
- Netzrückwirkungen, Blindleistungs- & Transformatorauslegung
|
||||
- Szenarien (Erweiterbarkeit, Redundanz, Black‑Start/Backup)
|
||||
|
||||
---
|
||||
|
||||
## So arbeiten wir (Ablauf)
|
||||
1. **Kick‑off & Zielbild** – Anforderungen, Daten, Randbedingungen
|
||||
2. **Vorplanung** – Varianten, Grobdimensionierung, Budgetrahmen
|
||||
3. **Einreichplanung** – genehmigungsfähige Unterlagen
|
||||
4. **Ausführungsplanung** – Detailunterlagen & LV
|
||||
5. **Vergabe & Umsetzung** – Unterstützung bei Ausschreibung, Bau, Inbetriebnahme
|
||||
|
||||
---
|
||||
|
||||
## Ergebnisse (Deliverables)
|
||||
- Pläne (DWG/PDF), Schemata, **LV/GAEB**, Berechnungen, Protokolle
|
||||
- **Energieausweis** / Konzeptdokumentation
|
||||
- Betreiber‑/Wartungsanforderungen & Abnahmechecklisten
|
||||
|
||||
---
|
||||
|
||||
## Warum AMPERION?
|
||||
- **Unabhängig & herstellerneutral**
|
||||
- **Netzbetreiber‑erfahren** (NS/MS, Ladeparks, PV‑Großanlagen)
|
||||
- **Skalierbar & zukunftssicher** geplant
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Planung
|
||||
**Welche Unterlagen brauchen Sie zu Beginn?**
|
||||
Bestandspläne, Lastgänge (falls vorhanden), Standortdaten, Ziele/Budgetrahmen.
|
||||
|
||||
**Planen Sie auch Mittelspannung?**
|
||||
Ja. Von der **Netzanschlussanfrage** bis zur Trafostation inkl. Schutzkonzept.
|
||||
|
||||
**Übernehmen Sie die Ausschreibung?**
|
||||
Ja, inkl. LV, Bieterfragen, Angebotsprüfung und Vergabeempfehlung.
|
||||
|
||||
**Begleiten Sie die Bauphase?**
|
||||
Gerne – siehe **Projektmanagement**.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Kurzgespräch vereinbaren: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
72
content/german/Leistungen/projektmanagement.md
Normal file
72
content/german/Leistungen/projektmanagement.md
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
title: "Projektmanagement & Baukoordination"
|
||||
description: "Baukoordination, begleitende Kontrolle, Bauherrnvertretung und Dokumentation – sicheres Projektmanagement für Elektrotechnik, PV, Speicher und Ladeinfrastruktur."
|
||||
slug: "projektmanagement"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
draft: false
|
||||
tags: ["Projektmanagement", "Baukoordination", "begleitende Kontrolle", "Bauherrnvertretung", "Dokumentation", "Ladeinfrastruktur", "Photovoltaik"]
|
||||
categories: ["Leistungen"]
|
||||
---
|
||||
|
||||
# Projektmanagement, das trägt.
|
||||
|
||||
Wir führen Ihre Energie‑ und Elektrotechnikprojekte **termintreu, kostensicher und regelkonform** zum Ziel – von der Vergabe bis zur Abnahme. Dabei vertreten wir konsequent die **Interessen des Bauherrn** und sichern Qualität durch **begleitende Kontrolle**.
|
||||
|
||||
---
|
||||
|
||||
## Unsere Leistungen
|
||||
|
||||
### Baukoordination
|
||||
- Termin‑, Kosten‑ und Ressourcensteuerung
|
||||
- Schnittstellenmanagement (Gewerke, Netzbetreiber, Behörden)
|
||||
- Bauaufsicht & Sicherheitskoordination (SiGe, sofern beauftragt)
|
||||
|
||||
### Begleitende Kontrolle
|
||||
- Qualitäts‑, Normen‑ und Ausführungsprüfung
|
||||
- Prüf‑ und Messprotokolle, FAT/SAT, **Inbetriebnahmesupport**
|
||||
- Abweichungs‑ & Mängelmanagement, Abnahmevorbereitung
|
||||
|
||||
### Bauherrnvertretung
|
||||
- Interessenvertretung gegenüber AN/Planern/Netzbetreiber
|
||||
- Vergabeunterstützung, Bietergespräche, **Change‑Request‑Steuerung**
|
||||
- Kostencontrolling, Fortschritts‑ und Statusberichte
|
||||
|
||||
### Dokumentation
|
||||
- As‑built‑Unterlagen, Revisionspläne, Schaltschrank‑/Klemmenpläne
|
||||
- Mess‑ und Prüfprotokolle, Abnahme‑/Übergabeunterlagen
|
||||
- Betriebs‑ & Wartungsdokumentation
|
||||
|
||||
---
|
||||
|
||||
## Ablauf & Tools
|
||||
1. **Projektstruktur & Ziele** (Kick‑off)
|
||||
2. **Termin‑ & Kostenplan** (Basislinie)
|
||||
3. **Steuerung & Kontrolle** (Jour‑Fixe, Status, Risiko‑Log)
|
||||
4. **Abnahmen & Übergabe** (Mängelfreiheit, Doku vollständig)
|
||||
|
||||
Wir arbeiten transparent (z. B. **Bau‑/Qi‑Log**, Abweichungsberichte) und integrieren Ihre Tools.
|
||||
|
||||
---
|
||||
|
||||
## Nutzen
|
||||
- **Plan‑/Ist‑Sicherheit** bei Budget, Qualität, Termin
|
||||
- **Reibungsfreie Koordination** komplexer Schnittstellen
|
||||
- **Dokumentierte Abnahme** & störungsarmer Betrieb
|
||||
|
||||
---
|
||||
|
||||
## FAQ – Projektmanagement
|
||||
**Übernehmen Sie auch die Ausschreibung?**
|
||||
Ja. LV‑Erstellung, Bieterfragen, Angebotsprüfung, Vergabeempfehlung.
|
||||
|
||||
**Arbeiten Sie mit Generalunternehmern?**
|
||||
Sowohl **GU** als auch Einzelvergabe – wir steuern die Schnittstellen.
|
||||
|
||||
**Unterstützen Sie MS‑Anlagen & Ladeparks?**
|
||||
Ja – inkl. Trafostation, Schutzprüfung, EMS/LMS‑Integration.
|
||||
|
||||
---
|
||||
|
||||
> **Nächster Schritt:**
|
||||
> Projekt besprechen: **+43 677 620 90426** oder über [Kontakt](/kontakt/).
|
||||
|
|
@ -1,11 +1,17 @@
|
|||
---
|
||||
title: "Wir sind AMPERION"
|
||||
description: "Das AMPERION Gründerteam."
|
||||
descriptiontwo: "Zwei Ingenieure. Eine Vision."
|
||||
subtitle: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||
bg_image: ""
|
||||
layout: "about"
|
||||
draft: false
|
||||
|
||||
intro_section:
|
||||
enable: true
|
||||
text: >
|
||||
**AMPERION GmbH** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich.
|
||||
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**.
|
||||
image: "images/amperion_intro.webp"
|
||||
|
||||
################################## About #####################################
|
||||
about:
|
||||
|
|
|
|||
|
|
@ -2,52 +2,109 @@
|
|||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
{{ with .Params.about }}
|
||||
<!-- Intro Section: Wir sind AMPERION -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section class="about section">
|
||||
<div class="custom-container">
|
||||
<section id="about-intro" class="section py-5">
|
||||
<div class="my-container">
|
||||
|
||||
<!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
|
||||
<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">
|
||||
<div class="col-md-4">
|
||||
<div class="person-info">
|
||||
{{ with .left_person }}
|
||||
{{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<p>{{ . | $.Page.RenderString (dict "display" "block") }}</p>{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- TEXT (links, mobil oben) -->
|
||||
<div class="col-md-6 col-sm-12 text-left">
|
||||
<div class="content">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="about-img">
|
||||
<img src="{{ .image | relURL }}" alt="Standard Image">
|
||||
<img src="{{ .hover_image | relURL }}" alt="Hover Image" class="hover-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="person-info">
|
||||
{{ with .right_person }}
|
||||
{{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<p>{{ . | $.Page.RenderString (dict "display" "block") }}</p>{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- BILD (rechts, mobil unten) -->
|
||||
<div class="col-md-6 col-sm-12 text-center">
|
||||
<img
|
||||
src="{{ .image | relURL }}"
|
||||
alt="AMPERION Intro"
|
||||
class="img-responsive"
|
||||
style="max-width:420px; width:100%; height:auto; margin:0 auto;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<section class="testimonial section-sm">
|
||||
<div class="container">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
||||
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
||||
<div class="container text-center mb-5">
|
||||
<h3 class="mb-4">
|
||||
Was uns auszeichnet: <strong>AMPERION</strong> bietet <em>echte Mehrwerte</em> für Ihr Projekt
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid px-0;">
|
||||
<div class="mehrwerte-grid">
|
||||
|
||||
<!-- Kachel 1 -->
|
||||
<div class="mehrwerte-box" style="background-color: #006464;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/stamp.svg" alt="Staatlich geprüft Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Staatlich geprüftes Ingenieurbüro</h4>
|
||||
<p class="mb-0">Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 2 -->
|
||||
<div class="mehrwerte-box" style="background-color: #007979;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/brain.svg" alt="Innovation Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Erfahrung & Innovation</h4>
|
||||
<p class="mb-0">Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 3 -->
|
||||
<div class="mehrwerte-box" style="background-color: #008c8c;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Ganzheitlicher Ansatz</h4>
|
||||
<p class="mb-0">Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 4 -->
|
||||
<div class="mehrwerte-box" style="background-color: #009292;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Unabhängige Beratung</h4>
|
||||
<p class="mb-0">Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.</p>
|
||||
</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>
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
|
@ -65,10 +122,65 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to action -->
|
||||
<!-- About Section (Gründerteam) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section pt-0">
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Überschrift -->
|
||||
<p class="lead text-center mb-3" style="margin-top: 40px;">Das AMPERION Gründerteam</p>
|
||||
|
||||
<!-- Zentraler Einleitungstext -->
|
||||
<p class="text-center px-3" style="margin-bottom: 40px;">
|
||||
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="row gx-5 gy-5 align-items-center">
|
||||
|
||||
<!-- Markus Wimmer (LINKS) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-1 order-2 d-flex justify-content-center">
|
||||
<div class="w-100">
|
||||
{{ with .left_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bild (MITTE) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-2 order-1 d-flex justify-content-center">
|
||||
<img src="{{ .image | relURL }}"
|
||||
alt="AMPERION Gründerteam"
|
||||
class="img-fluid founder-img rounded shadow"
|
||||
style="max-width: 100%; height: auto;">
|
||||
</div>
|
||||
|
||||
<!-- Alexander Stosic (RECHTS) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-3 order-3 d-flex justify-content-center">
|
||||
<div class="w-100">
|
||||
{{ with .right_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Call to Action -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /Call to action -->
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
44
layouts/_default/leistung.html
Normal file
44
layouts/_default/leistung.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Intro-Abschnitt (optional über Frontmatter "about") -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="service-about section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}
|
||||
<div class="mt-30">{{ . | $.Page.RenderString (dict "display" "block") }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ with .image }}
|
||||
<div class="col-md-6">
|
||||
<img class="img-responsive" src="{{ . | relURL }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Hauptinhalt aus der Markdown-Datei -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call-to-Action (optional, falls in Frontmatter aktiviert) -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
{{ define "main" }}
|
||||
Um den ersten Bereich der Seite beim Scrollen nach unten verschwinden zu lassen und beim Scrollen nach ganz oben wieder erscheinen zu lassen, kannst du JavaScript verwenden, um den Bereich zu verstecken oder anzuzeigen, basierend auf der Scroll-Position. Hier ist, wie du das machen kannst:
|
||||
Schritt 1: Füge eine ID oder Klasse zum Header hinzu
|
||||
|
||||
Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit JavaScript ansprechen kannst.
|
||||
|
||||
<header id="mainHeader">
|
||||
|
||||
|
||||
|
|
@ -352,4 +347,5 @@ Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit Jav
|
|||
</script>
|
||||
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,21 +18,21 @@ body {
|
|||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Open Sans Semibold", sans-serif; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-weight: 400; }
|
||||
|
||||
h2 {
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #046e6e;
|
||||
font-size: 28px; }
|
||||
@media (max-width: 480px) {
|
||||
h2 {
|
||||
font-size: 22px; } }
|
||||
h1 {
|
||||
font-size: 80px; }
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -44,11 +44,6 @@ h1 {
|
|||
@media (max-width: 400px) {
|
||||
h1 {
|
||||
font-size: 26px; } }
|
||||
h2 {
|
||||
font-size: 28px; }
|
||||
@media (max-width: 480px) {
|
||||
h2 {
|
||||
font-size: 22px; } }
|
||||
h3 {
|
||||
font-size: 20px; }
|
||||
|
||||
|
|
@ -56,7 +51,7 @@ h4 {
|
|||
font-size: 25px; }
|
||||
|
||||
p {
|
||||
color: #777777;
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
font-family: "Open Sans Semibold", sans-serif; }
|
||||
|
||||
|
|
@ -2535,169 +2530,72 @@ h2, h3 {
|
|||
.text-justify {
|
||||
text-align: justify; }
|
||||
|
||||
/* Reduziert den Abstand zwischen den Sections */
|
||||
section {
|
||||
margin-bottom: 0px;
|
||||
/* Anpassung nach Bedarf */ }
|
||||
margin-bottom: 0px; }
|
||||
|
||||
/* Zusätzliche optionale Stile für eine bessere Darstellung */
|
||||
#welcome.section, #service.section {
|
||||
padding-top: 90px;
|
||||
/* Anpassung nach Bedarf */
|
||||
padding-bottom: 4px;
|
||||
/* Anpassung nach Bedarf */ }
|
||||
|
||||
.text-justify {
|
||||
text-align: justify; }
|
||||
padding-bottom: 4px; }
|
||||
|
||||
.description {
|
||||
font-size: 22px;
|
||||
/* Standard Schriftgröße */
|
||||
line-height: 1.5;
|
||||
padding-top: 90px;
|
||||
/* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px;
|
||||
/* Anpassung nach Bedarf */ }
|
||||
padding-bottom: 1px; }
|
||||
@media (max-width: 768px) {
|
||||
.description {
|
||||
font-size: 18px;
|
||||
/* Kleinere Schriftgröße für Tablets */
|
||||
padding-top: 70px;
|
||||
/* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px;
|
||||
/* Anpassung nach Bedarf */ } }
|
||||
padding-top: 70px; } }
|
||||
@media (max-width: 480px) {
|
||||
.description {
|
||||
font-size: 16px;
|
||||
/* Noch kleinere Schriftgröße für Handys */
|
||||
padding-top: 50px;
|
||||
/* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px;
|
||||
/* Anpassung nach Bedarf */ } }
|
||||
padding-top: 50px; } }
|
||||
.facts .fact-item {
|
||||
padding: 15px;
|
||||
/* Abstand um die Bilder */ }
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px;
|
||||
/* Abstand um die Bilder */ }
|
||||
padding: 15px; }
|
||||
|
||||
.fact-image {
|
||||
height: 250px;
|
||||
/* Einheitliche Höhe für alle Bilder */
|
||||
width: auto;
|
||||
/* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
|
||||
object-fit: contain;
|
||||
/* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
|
||||
border-radius: 8px;
|
||||
/* Abgerundete Ecken für die Bilder */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
/* Leichter Schatten */ }
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat; }
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; }
|
||||
|
||||
.service-content {
|
||||
flex: 1; }
|
||||
|
||||
.service-icon {
|
||||
margin-right: 15px;
|
||||
/* Abstand nach Bedarf anpassen */ }
|
||||
|
||||
.service-image {
|
||||
margin-left: 15px;
|
||||
/* Abstand nach Bedarf anpassen */ }
|
||||
|
||||
.service-image img {
|
||||
max-width: 150px;
|
||||
/* Maximale Breite des Bildes anpassen */
|
||||
height: auto; }
|
||||
|
||||
.bg-service1 {
|
||||
background-color: #8bcfd6;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service2 {
|
||||
background-color: #6baeb5;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service3 {
|
||||
background-color: #8bcfd6;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service4 {
|
||||
background-color: #6baeb5;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service5 {
|
||||
background-color: #8bcfd6;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service6 {
|
||||
background-color: #6baeb5;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5;
|
||||
/* Beispielhafte Farbe für primary-dark */ }
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px;
|
||||
/* Feste Breite, die du anpassen kannst */
|
||||
height: auto;
|
||||
/* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */ }
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
/* Optional: Padding hinzufügen */
|
||||
border-radius: 100px;
|
||||
/* Optional: Abgerundete Ecken hinzufügen */
|
||||
color: #8a0909;
|
||||
/* Optional: Textfarbe auf Weiß setzen */ }
|
||||
|
||||
.service-icon {
|
||||
margin-right: 0px;
|
||||
/* Abstand nach Bedarf anpassen */ }
|
||||
color: #8a0909; }
|
||||
|
||||
.service-content {
|
||||
flex: 1; }
|
||||
|
||||
.service-image {
|
||||
margin-left: 0px;
|
||||
/* Abstand nach Bedarf anpassen */ }
|
||||
|
||||
.fixed-text {
|
||||
width: 600px;
|
||||
/* Feste Breite für den Text */
|
||||
margin-right: 15px;
|
||||
/* Optional: Abstand nach Bedarf anpassen */ }
|
||||
.service-icon, .service-image {
|
||||
margin: 0; }
|
||||
|
||||
.service-image img {
|
||||
max-width: 600px;
|
||||
/* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
margin: 0;
|
||||
/* Entfernt zusätzliche Margins */
|
||||
padding: 0;
|
||||
/* Entfernt zusätzliches Padding */
|
||||
border: none;
|
||||
/* Entfernt jegliche Standardrahmen */
|
||||
display: block;
|
||||
/* Verhindert zusätzliche Ränder bei inline-block-Elementen */ }
|
||||
display: block; }
|
||||
|
||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
||||
background-color: #8bcfd6; }
|
||||
|
||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
||||
background-color: #6baeb5; }
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px; }
|
||||
|
||||
.fixed-text {
|
||||
width: 600px;
|
||||
margin-right: 15px; }
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
|
|
@ -2707,61 +2605,44 @@ section {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
/* Weiß als Hintergrundfarbe */
|
||||
z-index: -1;
|
||||
/* Sicherstellen, dass es hinter dem Inhalt liegt */ }
|
||||
z-index: -1; }
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
/* 40px Abstand sowohl horizontal als auch vertikal */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* => Standard: 3 Spalten für größere Bildschirme */ }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* => mittlere Screens: nur 2 Spalten */ } }
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* => kleine Screens: 1 Spalte */ } }
|
||||
|
||||
/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
|
||||
grid-template-columns: repeat(3, 1fr); }
|
||||
@media (max-width: 992px) {
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (max-width: 576px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr; } }
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Oder "auto" falls die Höhe flexibel sein soll */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
/* Abgerundete Ecken */ }
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
|
||||
.zoom-wrap {
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease; }
|
||||
position: relative; }
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
transform: scale(1.06); }
|
||||
|
||||
.zoom-wrap a {
|
||||
display: block;
|
||||
/* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
|
||||
text-decoration: none;
|
||||
/* Entfernt die Unterstreichung des Links */
|
||||
color: inherit;
|
||||
/* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */ }
|
||||
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block; }
|
||||
|
||||
/* Das "dunkle Overlay" */
|
||||
.zoom-wrap a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
||||
.zoom-wrap .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -2769,11 +2650,7 @@ section {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
/* dunkler Schleier (30% schwarz) */
|
||||
z-index: 1;
|
||||
/* Overlay unter dem Text, aber über dem Bild */
|
||||
pointer-events: auto;
|
||||
/* Stellt sicher, dass das Overlay klickbar ist */ }
|
||||
z-index: 1; }
|
||||
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
|
|
@ -2784,8 +2661,7 @@ section {
|
|||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
/* Höher als das Overlay */ }
|
||||
z-index: 2; }
|
||||
|
||||
.my-container {
|
||||
width: 80%;
|
||||
|
|
@ -2793,36 +2669,27 @@ section {
|
|||
|
||||
.gif-background {
|
||||
background-image: url("/images/BackgroundAnimation.svg");
|
||||
/* Pfad zu Ihrem GIF */
|
||||
background-size: cover;
|
||||
/* Deckt den gesamten Hintergrund ab */
|
||||
background-position: center -220px;
|
||||
/* Positioniert das GIF oben in der Mitte */
|
||||
background-repeat: no-repeat;
|
||||
/* Verhindert die Wiederholung des GIFs */
|
||||
position: relative;
|
||||
/* Stellt sicher, dass das Overlay korrekt positioniert wird */ }
|
||||
position: relative; }
|
||||
|
||||
.gif-background::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
/* Weißer Overlay mit 70% Deckkraft */
|
||||
pointer-events: none;
|
||||
/* Stellt sicher, dass das Overlay keine Interaktionen blockiert */ }
|
||||
background-color: rgba(255, 255, 255, 0.8); }
|
||||
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
max-width: 70%; }
|
||||
max-width: 70%;
|
||||
height: auto; }
|
||||
|
||||
.custom-title {
|
||||
color: #046e6e;
|
||||
/* Ersetze dies mit der Farbe deiner Wahl */ }
|
||||
color: #046e6e; }
|
||||
|
||||
.hover-link {
|
||||
transition: color 0.3s ease; }
|
||||
|
|
@ -2830,6 +2697,45 @@ section {
|
|||
.hover-link:hover {
|
||||
color: #F5A623; }
|
||||
|
||||
/* Mehrwert */
|
||||
.mehrwerte-grid {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: repeat(1, 1fr); }
|
||||
@media (min-width: 768px) {
|
||||
.mehrwerte-grid {
|
||||
grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (min-width: 1200px) {
|
||||
.mehrwerte-grid {
|
||||
grid-template-columns: repeat(4, 1fr); } }
|
||||
.mehrwerte-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.mehrwerte-box:hover {
|
||||
background-color: teal;
|
||||
transform: translateY(-4px);
|
||||
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 {
|
||||
color: #000 !important; }
|
||||
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
|
||||
|
||||
/* Gründerteam Styling */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw; }
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth; }
|
||||
|
||||
|
|
|
|||
1
static/icons/brain.svg
Normal file
1
static/icons/brain.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>
|
||||
|
After Width: | Height: | Size: 594 B |
1
static/icons/briefcase-business.svg
Normal file
1
static/icons/briefcase-business.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
|
||||
|
After Width: | Height: | Size: 423 B |
1
static/icons/earth.svg
Normal file
1
static/icons/earth.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-earth-icon lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
|
||||
|
After Width: | Height: | Size: 478 B |
1
static/icons/stamp.svg
Normal file
1
static/icons/stamp.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stamp-icon lucide-stamp"><path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13"/><path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/><path d="M5 22h14"/></svg>
|
||||
|
After Width: | Height: | Size: 423 B |
BIN
static/images/amperion_intro.webp
Normal file
BIN
static/images/amperion_intro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
|
|
@ -1 +1,17 @@
|
|||
// Add your custom code
|
||||
.hover-tile {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-tile:hover {
|
||||
filter: brightness(1.15);
|
||||
cursor: default;
|
||||
}
|
||||
.hover-tile {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-tile:hover {
|
||||
filter: brightness(1.15);
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue