forked from markus/AMPERION_Webpage
Index + Über uns
This commit is contained in:
parent
0533ad4ea3
commit
6cd592a3ff
37 changed files with 1296 additions and 1705 deletions
|
|
@ -14,14 +14,6 @@
|
|||
hyphens: none;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* ========== Vereinheitlichte Section-Abstände ========== */
|
||||
section {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -34,18 +26,6 @@ section {
|
|||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Spezielle Section-Anpassungen */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.section-spacing {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
|
|
@ -319,7 +299,6 @@ section {
|
|||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #F5A623; /* CI-Orange bleibt */
|
||||
}
|
||||
.service-card-description {
|
||||
line-height: 1.65;
|
||||
|
|
@ -477,22 +456,16 @@ section {
|
|||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
|
|
@ -669,7 +642,6 @@ body {
|
|||
outline: 2px dashed var(--amp-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ===== Affiliations unter "Darum AMPERION" ===== */
|
||||
|
||||
.darum-aff-row{
|
||||
|
|
@ -687,39 +659,42 @@ body {
|
|||
gap:clamp(.75rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
/* Linker Block */
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption{
|
||||
margin:0 0 .5rem 0;
|
||||
font-size:clamp(.9rem, 1.2vw, 1rem);
|
||||
color:#6b7280;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.aff-logos{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:clamp(.5rem, 1.2vw, 1rem);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.aff-logos img{
|
||||
max-height:clamp(100px, 3.2vw, 180px);
|
||||
width:auto; height:auto; display:block;
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Rechter Block (PV Austria + Text) */
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
.aff-right{
|
||||
text-decoration:none; color:inherit;
|
||||
display:flex; /* zentriert das Logo im Link */
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-decoration:none;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.aff-right .aff-pva-logo{
|
||||
max-height:clamp(80px, 6vw, 140px);
|
||||
width:auto; height:auto; display:block;
|
||||
}
|
||||
.aff-text{
|
||||
margin:0;
|
||||
font-size:clamp(.95rem, 1.4vw, 1.1rem);
|
||||
line-height:1.5;
|
||||
max-width:42ch; /* gute Lesbarkeit */
|
||||
color:#374151;
|
||||
max-height:clamp(60px, 6vw, 120px); /* Logo-Größe hier steuern */
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
|
|
@ -730,29 +705,217 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Kleine Verfeinerungen */
|
||||
/* Mobil: keine Trennlinie / kein Einzug */
|
||||
@media (max-width: 899.98px){
|
||||
.aff-right{
|
||||
border-left:0;
|
||||
padding-left:0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fokus-Style für Tastaturbedienung */
|
||||
.aff-right:focus-visible{
|
||||
outline:2px dashed var(--amp-accent);
|
||||
outline-offset:4px;
|
||||
}
|
||||
|
||||
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||
|
||||
|
||||
/* ========================================
|
||||
CTA SECTION - HYBRID DESIGN
|
||||
======================================== */
|
||||
.cta {
|
||||
--cta-primary: #046e6e; /* Türkis */
|
||||
--cta-accent: #F5A623; /* Orange */
|
||||
|
||||
/* Button-Preset (hier zentral Größe steuern) */
|
||||
--btn-py: clamp(1.8rem, 2.8vw, 2.5rem); /* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem); /* Schriftgröße */
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.cta .my-container { position: relative; z-index: 1; }
|
||||
.cta__wrap { text-align: center; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
|
||||
/* ===== HINTERGRUND ANIMATIONEN ===== */
|
||||
.cta__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtiles Grid */
|
||||
.cta__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent; /* Explizit transparent */
|
||||
background-image:
|
||||
linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Energie-Linien Container */
|
||||
.cta__energy-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Horizontale Energie-Linie */
|
||||
.energy-line-h {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.energy-line-h1 { top: 20%; animation-duration: 6s; }
|
||||
&.energy-line-h2 { top: 40%; animation-duration: 7s; animation-delay: 2s; }
|
||||
&.energy-line-h3 { top: 60%; animation-duration: 8s; animation-delay: 4s; }
|
||||
&.energy-line-h4 { top: 80%; animation-duration: 6.5s; animation-delay: 1s; }
|
||||
}
|
||||
|
||||
@keyframes energyFlowH {
|
||||
0% {
|
||||
left: -200px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Vertikale Energie-Linie */
|
||||
.energy-line-v {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg,
|
||||
transparent 0%,
|
||||
var(--cta-primary) 10%,
|
||||
var(--cta-primary) 90%,
|
||||
transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.energy-line-v1 { left: 15%; animation-duration: 7s; animation-delay: 1s; }
|
||||
&.energy-line-v2 { left: 35%; animation-duration: 9s; animation-delay: 3s; }
|
||||
&.energy-line-v3 { left: 65%; animation-duration: 8s; animation-delay: 2s; }
|
||||
&.energy-line-v4 { left: 85%; animation-duration: 7.5s; animation-delay: 4s; }
|
||||
}
|
||||
|
||||
@keyframes energyFlowV {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Energie-Knoten (Kreuzungspunkte) */
|
||||
.energy-node {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
animation: nodePulse 2s ease-in-out infinite;
|
||||
|
||||
&.energy-node1 { top: 20%; left: 15%; animation-delay: 0s; }
|
||||
&.energy-node2 { top: 40%; left: 35%; animation-delay: 0.5s; }
|
||||
&.energy-node3 { top: 60%; left: 65%; animation-delay: 1s; }
|
||||
&.energy-node4 { top: 80%; left: 85%; animation-delay: 1.5s; }
|
||||
&.energy-node5 { top: 30%; left: 50%; animation-delay: 0.25s; }
|
||||
&.energy-node6 { top: 70%; left: 25%; animation-delay: 0.75s; }
|
||||
}
|
||||
|
||||
@keyframes nodePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== CONTENT STYLES ===== */
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
/* Große Typografie */
|
||||
.cta__title {
|
||||
|
|
@ -761,58 +924,359 @@ body {
|
|||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||
line-height: 1.55;
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.cta__accent { color: var(--cta-accent); font-weight: 700; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
.cta__actions {
|
||||
display: flex; flex-wrap: wrap; justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex; align-items: center; gap: .7rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
border-radius: 9999px;
|
||||
background: #fff; color: var(--cta-primary);
|
||||
background: #fff;
|
||||
color: var(--cta-primary);
|
||||
border: 1px solid rgba(0,0,0,.06);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
text-decoration: none; font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245,166,35,.35);
|
||||
|
||||
&::before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent); /* Hover = Orange */
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245,166,35,.35);
|
||||
}
|
||||
.cta__btn:active { transform: translateY(1px); }
|
||||
.cta__btn:focus-visible { outline: 2px dashed var(--cta-accent); outline-offset: 3px; }
|
||||
|
||||
/* Social-Icons (etwas größer, Teal-Hover) */
|
||||
.cta__social {
|
||||
display: flex; justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px); height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: #fff; border-radius: 9999px;
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s ease, height 0.4s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4,110,110,.25);
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: filter .2s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.cta__social-link:hover { background: var(--cta-accent); box-shadow: 0 6px 16px rgba(4,110,110,.25); }
|
||||
.cta__social-link:active { transform: translateY(1px); }
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px); height: auto; display: block; transition: filter .2s ease;
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.energy-line-h2,
|
||||
.energy-line-h4,
|
||||
.energy-line-v2,
|
||||
.energy-line-v4,
|
||||
.energy-node4,
|
||||
.energy-node5,
|
||||
.energy-node6 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px; /* statt 90px */
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Keine eigene Schriftgröße – erbt globales p-Design */
|
||||
#about-intro .intro-text { font-size: inherit; line-height: inherit; }
|
||||
#about-intro .intro-text p { margin-bottom: .8rem; }
|
||||
|
||||
/* Badges vereinheitlichen */
|
||||
#about-intro .intro-badge {
|
||||
font-size: 1rem;
|
||||
padding: .45em .9em;
|
||||
background: #006464;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.intro-media, .intro-video { border-radius: 0 !important; } /* überschreibt evtl. globale Styles */
|
||||
|
||||
|
||||
/* ========================================
|
||||
ABOUT PAGE STYLES
|
||||
======================================== */
|
||||
|
||||
/* 1) Intro: Bild rechts, Text links, konsistente Abstände */
|
||||
#about-intro {
|
||||
.intro-content {
|
||||
/* nutzt globale Typo; nur Abstände angleichen */
|
||||
.article-copy {
|
||||
p { margin-bottom: 1rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
strong { font-weight: 700; }
|
||||
}
|
||||
}
|
||||
|
||||
.intro-image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.intro-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem; /* wie Cards */
|
||||
box-shadow: 0 6px 30px rgba(0,0,0,.05);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */
|
||||
.mission-section {
|
||||
.mission-tabs {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.nav-link {
|
||||
border: 0;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
color: #046e6e;
|
||||
opacity: .7;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 2px solid #046e6e;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mission-tab-content {
|
||||
.tab-inner {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.04);
|
||||
|
||||
p { margin-bottom: .9rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.04);
|
||||
|
||||
.service-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto .5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: .35rem;
|
||||
}
|
||||
|
||||
.service-card-description {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4) Team-Block: Karten & Bild */
|
||||
.team-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 6px 30px rgba(0,0,0,.05);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.founder-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.04);
|
||||
|
||||
.founder-name {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.founder-description {
|
||||
p { margin-bottom: .8rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 5) Utilities: Badge-Row unter Intro-Text */
|
||||
#about-intro .badge {
|
||||
border: 1px solid #eaeaea;
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 6) Harmonisierung der Section-Spacings für About */
|
||||
#about-intro.section { padding-top: 90px; padding-bottom: 90px; }
|
||||
|
||||
.mission-section.section { padding-top: 0; padding-bottom: 90px; }
|
||||
/* ABOUT Intro – schmal & Blocksatz */
|
||||
#about-intro .intro-text.article-copy {
|
||||
max-width: 100ch; /* schmaler Textblock */
|
||||
margin: 0 auto;
|
||||
text-align: justify; /* „blocksartig“ */
|
||||
text-justify: inter-word;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#about-intro .intro-text.article-copy p {
|
||||
margin-bottom: .9rem; /* etwas kompakter als Standard */
|
||||
}
|
||||
|
||||
/* H2 optisch sauber zentrieren/ausbalancieren */
|
||||
#about-intro h2 {
|
||||
text-wrap: balance;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.cta__social-link:hover img { filter: invert(1); }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.footer {
|
||||
background: darken( $light, 1.5);
|
||||
background: #f3f3f3;
|
||||
min-height: 205px;
|
||||
text-align: center;
|
||||
padding-top: 67px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
title: "Energiespeicher"
|
||||
description: "Individuelle Konzepte für Stromspeicherlösungen – für mehr Autarkie und Netzunabhängigkeit."
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
draft: false
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
title: "Photovoltaik"
|
||||
description: "Planung, Beratung und Umsetzung nachhaltiger Photovoltaik-Lösungen für Unternehmen und Privatkunden."
|
||||
date: 2025-07-29
|
||||
layout: leistung
|
||||
draft: false
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
title: "Consulting & Energieberatung"
|
||||
description: "Beratung zu Energiekonzepten, Marktbeobachtung, Begutachtung von Bestandsanlagen, Förderberatung und Energiemanagement – unabhängige Beratung von AMPERION."
|
||||
title: "Consulting"
|
||||
slug: "consulting"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
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."
|
||||
title: "Planung"
|
||||
slug: "planung"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
title: "Projektmanagement & Baukoordination"
|
||||
description: "Baukoordination, begleitende Kontrolle, Bauherrnvertretung und Dokumentation – sicheres Projektmanagement für Elektrotechnik, PV, Speicher und Ladeinfrastruktur."
|
||||
title: "Projektmanagement"
|
||||
slug: "projektmanagement"
|
||||
layout: "leistung"
|
||||
date: 2025-07-29
|
||||
|
|
|
|||
|
|
@ -7,11 +7,18 @@ draft: false
|
|||
intro_section:
|
||||
enable: true
|
||||
text: >
|
||||
**AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. <br>
|
||||
<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>
|
||||
**AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich.
|
||||
Gegründet im Jahr 2024 von **Markus Wimmer, BSc**, und **Ing. Alexander Stosic, MSc**, steht unser Unternehmen für innovative, wirtschaftlich sinnvolle und technisch ausgereifte Lösungen im Bereich moderner Energiesysteme. <br><br>
|
||||
|
||||
Wir planen, prüfen und begleiten die Umsetzung von **Photovoltaik-Anlagen**, **Stromspeichersystemen**, **Ladeinfrastruktur** für E-Mobilität sowie **smarter Gebäudetechnik** – von der ersten Idee bis zur erfolgreichen Inbetriebnahme. Dabei arbeiten wir für **Unternehmen**, **Gemeinden**, **Bauträger** und **Privatkunden** gleichermaßen. <br><br>
|
||||
|
||||
Unser Ansatz ist **ganzheitlich**:
|
||||
Wir betrachten Projekte immer im Zusammenspiel von **Technik**, **Wirtschaftlichkeit** und **Nachhaltigkeit**. <br>
|
||||
Dank unserer **Herstellerunabhängigkeit** wählen wir ausschließlich Lösungen, die optimal zu den technischen Anforderungen, den finanziellen Rahmenbedingungen und den langfristigen Zielen unserer Auftraggeber passen.
|
||||
|
||||
Mit **fundiertem Fachwissen**, **praxisnaher Erfahrung** und einem klaren Blick für Details setzen wir Energieprojekte um, die langfristig überzeugen – **ökologisch**, **ökonomisch** und **gestalterisch**. <br>
|
||||
**AMPERION** – Ihr Partner für zukunftssichere und nachhaltige Energiekonzepte.
|
||||
|
||||
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"
|
||||
tags:
|
||||
- Unabhängig
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: "Neuigkeiten"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
bg_image: ""
|
||||
---
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: John Doe
|
||||
image : "images/blog/blog-post-1.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Company News"]
|
||||
tags: ["Advice","Technology"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere. </p>
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.</p>
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* hello
|
||||
* hello
|
||||
* hello
|
||||
* hello
|
||||
* hello
|
||||
|
||||
1. hello
|
||||
2. hello
|
||||
3. hello
|
||||
4. hello
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.</p>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: Mark Dinn
|
||||
image : "images/blog/blog-post-2.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Artificial Intelligence"]
|
||||
tags: ["Advice","Retro"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere. </p>
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.</p>
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.</p>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: Mark Dinn
|
||||
image : "images/blog/blog-post-3.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Legacy Support"]
|
||||
tags: ["Android","Retro"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere.
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: John Doe
|
||||
image : "images/blog/blog-post-4.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Legacy Support"]
|
||||
tags: ["Mechine","Retro"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere.
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: Mark Dinn
|
||||
image : "images/blog/blog-post-5.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Artificial Intelligence"]
|
||||
tags: ["Advice","AI"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere. </p>
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.</p>
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.</p>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: "How To Wear Bright Shoes"
|
||||
date: 2018-09-24T11:07:10+06:00
|
||||
author: John Doe
|
||||
image : "images/blog/blog-post-6.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Company News"]
|
||||
tags: ["News","Retro","AI","Company"]
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae placeat ad architecto nostrum asperiores
|
||||
vel aperiam, veniam eum nulla. Maxime cum magnam, adipisci architecto quibusdam cumque veniam fugiat quae. Lorem
|
||||
ipsum dolor sit amet, consectetur adipisicing elit. Odio vitae ab doloremque accusamus sit, eos dolorum officiis
|
||||
a perspiciatis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, facere.
|
||||
|
||||
> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes
|
||||
nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illo deserunt necessitatibus quibusdam sint,
|
||||
eos explicabo tenetur molestiae vero facere, aspernatur sit mollitia perferendis reiciendis. Deleniti magni
|
||||
explicabo sed alias fugit amet animi molestias ipsum maiores. Praesentium sint, id laborum quos. Tempora
|
||||
inventore est, dolor corporis quis doloremque nostrum, eos velit culpa quasi labore. Provident laborum porro
|
||||
nihil iste, magnam officia nemo praesentium autem, libero vel officiis. Omnis pariatur nam voluptatem voluptate
|
||||
at officia repellat ea beatae eligendi? Mollitia error saepe, aperiam facere. Optio maiores deleniti veritatis
|
||||
eaque commodi atque aperiam, debitis iste alias eligendi ut facilis earum! Impedit, tempore.
|
||||
|
||||
```
|
||||
.blog-classic {
|
||||
margin-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex error esse a dolore, architecto sapiente, aliquid
|
||||
commodi, laudantium eius nemo enim. Enim, fugit voluptatem rem molestiae. Sed totam quis accusantium iste
|
||||
nesciunt id exercitationem cumque repudiandae voluptas perspiciatis, consequatur quasi, molestias, culpa odio
|
||||
adipisci. Nesciunt optio fugiat iste quam modi, ex vitae odio pariatur! Corrupti explicabo at harum qui
|
||||
doloribus, sit dicta nemo, dolor, enim eum molestias fugiat obcaecati autem eligendi? Nisi delectus eaque
|
||||
architecto voluptatibus, unde sit minus quae quod eligendi soluta recusandae doloribus, officia, veritatis
|
||||
voluptatum eius aliquam quos. Consectetur, nisi? Veritatis totam, unde nostrum exercitationem tempora suscipit,
|
||||
molestias, deserunt ipsum laborum aut iste eaque? Vitae delectus dicta maxime non mollitia? Sapiente eos a quia
|
||||
eligendi deserunt repudiandae modi molestias tenetur autem pariatur ullam itaque, quas eveniet, illo quam rerum
|
||||
ex obcaecati voluptatum nesciunt incidunt culpa provident illum soluta. Voluptas possimus nesciunt inventore
|
||||
perspiciatis neque fugiat, magnam natus repellendus praesentium eum voluptatum, alias incidunt, tempora
|
||||
reprehenderit recusandae et numquam itaque ratione dolor voluptatibus in commodi ut! Neque deserunt nostrum
|
||||
commodi dolor natus quo, non vitae deleniti, vero voluptatem error aspernatur veniam expedita numquam amet quia
|
||||
in dolores velit esse molestiae! Iusto architecto accusantium quisquam recusandae quod vero quia.
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
---
|
||||
title: "Pretty-print dates"
|
||||
date: 2021-04-01T00:00:00+01:00
|
||||
author: John Doe
|
||||
image : "images/blog/blog-post-1.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
categories: ["Technical Assistance"]
|
||||
tags: ["How to", "Technology"]
|
||||
draft: false
|
||||
type: "post"
|
||||
---
|
||||
|
||||
Um einen [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601)-Zeitstempel in der aktuellen Sprache auszuschreiben, kann der Shortcode `date_l10n` verwendet werden:
|
||||
|
||||
Wenn
|
||||
|
||||
```
|
||||
{{%/* date_l10n "2020-10-20" */%}}
|
||||
```
|
||||
|
||||
geschrieben wird, resultiert
|
||||
|
||||
```
|
||||
{{% date_l10n "2020-10-20" %}}
|
||||
```
|
||||
|
||||
Optional kann ein anderes [Format-Layout](https://gohugo.io/functions/dateformat/#datetime-formatting-layouts) spezifiert werden:
|
||||
|
||||
Beispielsweise resultiert folgendes
|
||||
|
||||
```
|
||||
{{%/* date_l10n "2020-10-20" ":date_short" */%}}
|
||||
```
|
||||
|
||||
in
|
||||
|
||||
```
|
||||
{{% date_l10n "2020-10-20" ":date_short" %}}
|
||||
```
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
---
|
||||
title: "Unsere Preise"
|
||||
description: "this is meta description"
|
||||
bg_image: ""
|
||||
layout: "pricing"
|
||||
draft: false
|
||||
|
||||
################################ pricing ################################
|
||||
pricing:
|
||||
enable : true
|
||||
pricing_table:
|
||||
# pricing table loop
|
||||
- name : "Basic"
|
||||
price: "$99"
|
||||
content : "Perfect for single freelancers who work by themselves"
|
||||
link : "#"
|
||||
services:
|
||||
- Unlimited agents
|
||||
- 10 PSD Design
|
||||
- HTML5 Markup
|
||||
- Basic SEO
|
||||
- Email Marketing
|
||||
- 24/7 Tech Support
|
||||
|
||||
# pricing table loop
|
||||
- name : "Premium"
|
||||
price: "$199"
|
||||
content : "Suitable for small businesses with up to 5 employees"
|
||||
link : "#"
|
||||
services:
|
||||
- Unlimited agents
|
||||
- 10 PSD Design
|
||||
- HTML5 Markup
|
||||
- Basic SEO
|
||||
- Email Marketing
|
||||
- 24/7 Tech Support
|
||||
|
||||
# pricing table loop
|
||||
- name : "Advance"
|
||||
price: "$299"
|
||||
content : "Suitable for large businesses with unlimited employees"
|
||||
link : "#"
|
||||
services:
|
||||
- Unlimited agents
|
||||
- 10 PSD Design
|
||||
- HTML5 Markup
|
||||
- Basic SEO
|
||||
- Email Marketing
|
||||
- 24/7 Tech Support
|
||||
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
# call to action content comes from "_index.md"
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: "Unser Projekt"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
---
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work1.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: [ "UI/UX Design", "Video" ]
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work2.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: "Illustration"
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work3.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: "Video"
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work4.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: "UI/UX Design"
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work5.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: "Illustration"
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: "Rio Furniture"
|
||||
description: "this is meta description"
|
||||
draft: false
|
||||
image : "images/portfolio/work6.jpg"
|
||||
bg_image: "images/feature-bg.jpg"
|
||||
category: "Video"
|
||||
information:
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
- label : "What We Did"
|
||||
info : "Website Redesign"
|
||||
- label : "Tools Used"
|
||||
info : "Photoshop,Illustrator"
|
||||
- label : "Completed on"
|
||||
info : "17th March 2014"
|
||||
- label : "Skills"
|
||||
info : "HTML5 / PHP / CSS3"
|
||||
- label : "Client"
|
||||
info : "Jannie Kelonsky"
|
||||
---
|
||||
|
||||
## Behance Website Redesign
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas officiis cumque, harum dicta necessitatibus
|
||||
reprehenderit, delectus molestiae, impedit alias adipisci distinctio voluptas. Tempora modi amet voluptate
|
||||
at provident soluta consequatur.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quibusdam sed, neque recusandae, est
|
||||
odit. A facere tempore soluta laborum.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, rem eaque facilis. Sit, voluptas?
|
||||
Error soluta odio, harum tenetur, alias in iure ipsam blanditiis illo, ratione, magnam a minima incidunt!
|
||||
Suscipit facilis, ut maxime libero necessitatibus, rerum aut voluptates aliquam maiores iusto qui
|
||||
temporibus nesciunt, incidunt in quasi. Veniam aliquid ea aperiam, obcaecati voluptate ab, temporibus
|
||||
fugiat at, inventore molestiae quibusdam, modi numquam debitis libero aut eum. Architecto sit quia quidem
|
||||
odit, quasi eveniet reprehenderit rerum dolorem voluptate sed aspernatur numquam enim, adipisci iste optio
|
||||
ea libero laboriosam praesentium aperiam nobis vero tempore consequuntur sapiente eos at. Suscipit quis
|
||||
voluptatibus temporibus dolore consectetur ex excepturi adipisci sunt. Maxime aperiam eos illum minima
|
||||
aliquid voluptate autem qui at impedit recusandae earum possimus, alias, maiores sint, sed quia quis aut
|
||||
cupiditate voluptatem reiciendis. Facilis nobis assumenda totam officiis dicta autem dolorem quidem
|
||||
similique, delectus rerum laborum veritatis, cum magnam dignissimos necessitatibus possimus error, eius
|
||||
omnis veniam culpa, porro officia adipisci exercitationem minus hic. Ipsum veritatis repudiandae nulla quo
|
||||
dicta voluptates tenetur mollitia perferendis sequi, magnam doloremque odit similique, sit, voluptas unde
|
||||
iste molestias. Accusantium, corporis quibusdam quod in animi earum alias autem ipsum. Eaque rem numquam
|
||||
delectus veniam commodi doloribus consequatur deleniti?
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores neque vero quasi quisquam atque in,
|
||||
libero ab sunt eius! Nesciunt laboriosam alias corporis sit accusantium voluptate sapiente debitis quos
|
||||
mollitia saepe maxime ipsum facilis dolore voluptas inventore veniam deleniti, eligendi harum aperiam iusto
|
||||
culpa? Delectus dolorum facere quasi iure explicabo?
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
title: "Digitale Lösungen & IKT"
|
||||
date: 2023-10-01
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/dig_loes_ikt.webp"
|
||||
---
|
||||
|
||||
# Digitale Lösungen & IKT
|
||||
|
||||
##
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
title: "Elektrotechnik"
|
||||
date: 2025-04-03
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/elektrotechnik.webp"
|
||||
---
|
||||
|
||||
# Digitale Lösungen & IKT
|
||||
|
||||
##
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: "Neue Unternehmenssparte"
|
||||
date: 2023-10-01
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/elektromobilitaet.webp"
|
||||
---
|
||||
|
||||
# Neue Unternehmenssparte
|
||||
|
||||
##
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: "Energiekonzepte"
|
||||
date: 2023-10-01
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/energiekonzepte.webp"
|
||||
---
|
||||
|
||||
# Energiekonzepte
|
||||
|
||||
## Energiekonzepte für eine nachhaltige Energiezukunft
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: "Photovoltaik & Speicher"
|
||||
date: 2023-10-01
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/photovoltaik.webp"
|
||||
---
|
||||
|
||||
# Photovoltaik
|
||||
|
||||
## Energiekonzepte für eine nachhaltige Energiezukunft
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: "Projektmanagement"
|
||||
date: 2023-10-01
|
||||
draft: false
|
||||
layout: "service01"
|
||||
bg_image: "/images/services_main/energiekonzepte.webp"
|
||||
---
|
||||
|
||||
# Projektmanagement
|
||||
|
||||
## Energiekonzepte für eine nachhaltige Energiezukunft
|
||||
|
||||
Ein durchdachtes Energiekonzept ist die Grundlage jeder effizienten und zukunftssicheren Energieversorgung.
|
||||
|
||||
Wir analysieren, planen und optimieren Energiesysteme für Unternehmen, Gemeinden und Wohnprojekte – mit Fokus auf Wirtschaftlichkeit, Eigenverbrauch und Klimaschutz.
|
||||
|
||||
### Was wir bieten
|
||||
|
||||
#### Analyse & Bestandsaufnahme
|
||||
- Energieverbrauch, Lastgänge, Potenziale
|
||||
- Gebäude, Infrastruktur, technische Systeme
|
||||
|
||||
#### Technische & wirtschaftliche Planung
|
||||
- Photovoltaik, Speicher, Ladeinfrastruktur, Steuerung
|
||||
- Simulation von Energieflüssen und Eigenverbrauch
|
||||
- Kosten-Nutzen-Berechnungen (inkl. Förderungspotenziale)
|
||||
|
||||
#### Systemintegration & Zukunftssicherheit
|
||||
- Entwicklung ganzheitlicher Lösungen
|
||||
- Vorbereitung für spätere Erweiterungen
|
||||
- Schnittstellen zu Gebäudeautomation und Energie-Management-Systemen
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
---
|
||||
title: "Leistungen"
|
||||
description: ""
|
||||
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: "Consulting"
|
||||
icon: "fas fa-cogs"
|
||||
color : "service1"
|
||||
content: "Unser Expertenteam bietet umfassende Beratungsdienstleistungen, die auf Ihre individuellen Bedürfnisse zugeschnitten sind. Von der strategischen Planung bis zur praktischen Umsetzung stehen wir Ihnen mit unserer Erfahrung und unserem Fachwissen zur Seite, um optimale Lösungen für Ihre Herausforderungen zu entwickeln."
|
||||
image: "images/services/consulting.png"
|
||||
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Anlagenkonzepte"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service2"
|
||||
content : "Mit unserem maßgeschneiderten Ansatz entwickeln wir Anlagenkonzepte, die optimal auf Ihre individuellen Anforderungen und die örtlichen Gegebenheiten zugeschnitten sind. Von der ersten Idee bis zur Umsetzung stehen wir Ihnen mit unserer Fachkompetenz zur Seite."
|
||||
image: "images/services/anlagenkonzept.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ertragssimulationen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service3"
|
||||
content : "Mit unseren präzisen Ertragssimulationen bieten wir Ihnen verlässliche Prognosen über die Wirtschaftlichkeit Ihrer Projekte. Unsere Analysen berücksichtigen alle relevanten Faktoren, sodass Sie fundierte Entscheidungen treffen und Ihre Investitionen optimal planen können."
|
||||
image: "images/services/anlagensimulation.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Einreichplanungen"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service4"
|
||||
content : "Wir unterstützen Sie bei der Erstellung umfassender Einreichplanungen für die behördliche Anlagengenehmigung. Unsere Experten kennen die rechtlichen Anforderungen und sorgen dafür, dass Ihr Projekt reibungslos genehmigt wird."
|
||||
image: "images/services/einreichplanung.png"
|
||||
|
||||
|
||||
# featured service item loop
|
||||
- name : "Ausführungsplanung"
|
||||
icon : "fas fa-flask"
|
||||
color : "service5"
|
||||
content : "Mit unserer präzisen Ausführungsplanung stellen wir sicher, dass Ihr Projekt effizient umgesetzt wird. Wir erstellen detaillierte Pläne, die alle technischen Anforderungen erfüllen und die Grundlage für eine erfolgreiche Umsetzung bilden."
|
||||
image: "images/services/ausführungsplanung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Projektbetreuung"
|
||||
icon : "fas fa-leaf"
|
||||
color : "service6"
|
||||
content : "Unsere umfassende Projektbetreuung gewährleistet, dass Ihr Vorhaben von der Planung bis zur Fertigstellung reibungslos verläuft. Wir koordinieren alle Beteiligten und sorgen dafür, dass Zeitpläne und Budgets eingehalten werden, sodass Ihr Projekt erfolgreich abgeschlossen wird."
|
||||
image: "images/services/projektbetreuung.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Behördenwege"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service7"
|
||||
content : "Wir begleiten Sie durch alle behördlichen Prozesse und stellen sicher, dass alle notwendigen Genehmigungen rechtzeitig eingeholt werden. Unsere Experten kennen die gesetzlichen Vorgaben und sorgen dafür, dass Ihr Projekt ohne Verzögerungen vorankommt."
|
||||
image: "images/services/behördenwege.png"
|
||||
|
||||
# featured service item loop
|
||||
- name : "Energiekonzepte"
|
||||
icon : "fas fa-lightbulb"
|
||||
color : "service8"
|
||||
content : "Unsere Energiekonzepte zielen darauf ab, die optimale Nutzung erneuerbarer Energien zu ermöglichen und gleichzeitig den Energieverbrauch zu optimieren. Wir entwickeln ganzheitliche Strategien, die sowohl ökologische als auch wirtschaftliche Vorteile bieten."
|
||||
image: "images/services/energiekonzepte.png"
|
||||
|
||||
############################# Service ###############################
|
||||
service:
|
||||
enable : true
|
||||
title : "UNSERE SERVICES"
|
||||
description : "Wir entwickeln Energielösungen für die Zukunft"
|
||||
service_item:
|
||||
# service item loop
|
||||
- picture: "images/services_main/energiekonzepte.webp"
|
||||
name: Energiekonzepte
|
||||
link: "/service/energiekonzepte"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/projektmanagement.webp"
|
||||
name: Projektmanagement
|
||||
link: "/service/projektmanagement"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/elektromobilitaet.webp"
|
||||
name: Elektromobilität
|
||||
link: "/service/elektromobilitaet"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/photovoltaik.webp"
|
||||
name: Photovoltaik
|
||||
link: "/service/photovoltaik"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/dig_loes_ikt.webp"
|
||||
name: Digitale Lösungen & IKT
|
||||
link: "/service/dig_loes_ikt"
|
||||
|
||||
# service item loop
|
||||
- picture: "images/services_main/elektrotechnik.webp"
|
||||
name: Elektrotechnik
|
||||
link: "/service/elektrotechnik"
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/einreichplanung.svg"
|
||||
# name: Behördenwege
|
||||
# content: "Wir unterstützen Sie bei allen behördlichen Prozessen und sorgen dafür, dass Ihre Projekte reibungslos und ohne Verzögerungen vorankommen. Vertrauen Sie auf unsere #Erfahrung und Expertise."
|
||||
|
||||
# service item loop
|
||||
#- icon: "images/energiekonzepte.svg"
|
||||
# name: Energiekonzepte
|
||||
# content: "Wir erstellen innovative Energiekonzepte, die sowohl ökologisch als auch ökonomisch nachhaltig sind. Profitieren Sie von unseren zukunftsweisenden Lösungen für Ihre #Energieprojekte."
|
||||
|
||||
############################# call to action #################################
|
||||
cta:
|
||||
enable : true
|
||||
# call to action content comes from "_index.md"
|
||||
---
|
||||
|
|
@ -1,169 +1,191 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Intro + Mission/Vision Section -->
|
||||
<!-- Intro Section -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section id="about-intro" class="section">
|
||||
<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);">
|
||||
|
||||
<!-- ROW 1: TEXT + BILD -->
|
||||
<div class="row align-items-center gx-5 gy-4 mb-5">
|
||||
<section id="about-intro" class="section" style="background-color:#ffffff;">
|
||||
<div class="my-container">
|
||||
<div class="row align-items-center gx-5 gy-4">
|
||||
|
||||
<!-- TEXT -->
|
||||
<div class="col-lg-6 order-2 order-lg-1 text-left">
|
||||
<div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
|
||||
{{ .text | markdownify }}
|
||||
</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 class="col-lg-7 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="intro-content">
|
||||
<h2>Ihr Partner für nachhaltige Energielösungen</h2>
|
||||
<div class="intro-text article-copy">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BILD -->
|
||||
<div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
|
||||
<img
|
||||
src="{{ .image | relURL }}"
|
||||
alt="AMPERION – Erneuerbare Energie"
|
||||
loading="lazy"
|
||||
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>
|
||||
<!-- VIDEO (rechts, ohne abgerundete Ecken) -->
|
||||
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="600">
|
||||
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
|
||||
<video class="intro-video"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
preload="metadata"
|
||||
poster='{{ "images/brand_poster.jpg" | relURL }}'>
|
||||
<source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4">
|
||||
Ihr Browser unterstützt eingebettete Videos nicht.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
<!-- Mission/Vision/Ziel (grau, Heading + Tabs) -->
|
||||
{{ with .Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<section class="mission-section section pt-0" style="background-color:#f3f3f3;">
|
||||
<div class="my-container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<!-- Titelblock abgestimmt auf Index -->
|
||||
<div class="text-center mb-4" data-aos="fade-up">
|
||||
<h1>Mission · Vision · Ziel</h1>
|
||||
<h2><em>Wofür wir stehen und wo wir hinwollen.</em></h2>
|
||||
</div>
|
||||
|
||||
<div class="mission-tabs-wrapper">
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link {{ if eq $index 0 }}active{{ end }}"
|
||||
id="tab-{{ .name | urlize }}"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#content-{{ .name | urlize }}"
|
||||
type="button"
|
||||
role="tab">
|
||||
{{ .name }}
|
||||
</button>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content pt-3">
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mission-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 class="tab-pane fade {{ if eq $index 0 }}show active{{ end }}"
|
||||
id="content-{{ .name | urlize }}"
|
||||
role="tabpanel"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100">
|
||||
<div class="tab-inner">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- AMPERION Mehrwerte -->
|
||||
<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>
|
||||
<!-- Kompetenzen: Layout & Karten wie "Darum AMPERION" auf der Startseite -->
|
||||
<section class="section" style="background-color:#ffffff;">
|
||||
<div class="my-container">
|
||||
<div class="row">
|
||||
<div class="text-center" data-aos="fade-up" data-aos-delay="50">
|
||||
<h1>Was uns auszeichnet</h1>
|
||||
<h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2>
|
||||
</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>
|
||||
<!-- Karten (Re-Use der Service-Card Struktur von der Startseite) -->
|
||||
<div class="why-grid mt-5">
|
||||
{{ $delay := 0 }}
|
||||
{{ $step := 100 }}
|
||||
|
||||
<!-- 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>
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Staatlich geprüftes Ingenieurbüro</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Konzessionierter Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität & Sicherheit.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<!-- 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>
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Erfahrung & Innovation</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Unabhängige Beratung</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section (Gründerteam) -->
|
||||
|
||||
<!-- Team Section (grau, konsistent) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section">
|
||||
<div class="container-fluid">
|
||||
<section class="section" style="background-color:#f3f3f3;">
|
||||
<div class="my-container">
|
||||
|
||||
<!-- Ü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>
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<h1>Das AMPERION Gründerteam</h1>
|
||||
|
||||
<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">
|
||||
<!-- Markus Wimmer -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
|
||||
<div class="founder-card">
|
||||
{{ with .left_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||||
<div class="founder-description">
|
||||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ 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;">
|
||||
<!-- Team Bild -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-2 order-1" data-aos="zoom-in" data-aos-delay="200">
|
||||
<div class="team-image-wrapper">
|
||||
<img src="{{ .image | relURL }}"
|
||||
alt="AMPERION Gründerteam"
|
||||
class="team-image w-100 rounded-3 shadow-sm">
|
||||
</div>
|
||||
</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">
|
||||
<!-- Alexander Stosic -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
|
||||
<div class="founder-card">
|
||||
{{ with .right_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||||
<div class="founder-description">
|
||||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -174,9 +196,64 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Call to Action -->
|
||||
|
||||
<!-- CTA unverändert lassen (wie auf Startseite) -->
|
||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
<section id="cta" class="cta">
|
||||
<div class="cta__bg" aria-hidden="true">
|
||||
<div class="cta__grid"></div>
|
||||
<div class="cta__energy-lines">
|
||||
<div class="energy-line-h energy-line-h1"></div>
|
||||
<div class="energy-line-h energy-line-h2"></div>
|
||||
<div class="energy-line-h energy-line-h3"></div>
|
||||
<div class="energy-line-h energy-line-h4"></div>
|
||||
<div class="energy-line-v energy-line-v1"></div>
|
||||
<div class="energy-line-v energy-line-v2"></div>
|
||||
<div class="energy-line-v energy-line-v3"></div>
|
||||
<div class="energy-line-v energy-line-v4"></div>
|
||||
<div class="energy-node energy-node1"></div>
|
||||
<div class="energy-node energy-node2"></div>
|
||||
<div class="energy-node energy-node3"></div>
|
||||
<div class="energy-node energy-node4"></div>
|
||||
<div class="energy-node energy-node5"></div>
|
||||
<div class="energy-node energy-node6"></div>
|
||||
</div>
|
||||
<div class="cta__gradient-top"></div>
|
||||
<div class="cta__gradient-bottom"></div>
|
||||
</div>
|
||||
|
||||
<div class="my-container">
|
||||
<div class="cta__wrap">
|
||||
<h2 class="cta__title">
|
||||
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
|
||||
</h2>
|
||||
<p class="cta__lead">
|
||||
Bereit für Ihr Energieprojekt?
|
||||
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
|
||||
</p>
|
||||
<div class="cta__actions">
|
||||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||||
<span aria-hidden="true">✉️</span><span>E-Mail senden</span>
|
||||
</a>
|
||||
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}">
|
||||
<span aria-hidden="true">📞</span><span>Anrufen</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cta__social">
|
||||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<img src="/images/social/instagram.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<img src="/images/social/linkedin.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<img src="/images/social/facebook.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<header>
|
||||
<!-- banner -->
|
||||
{{ with .Params.banner }}
|
||||
{{ if .enable }}
|
||||
<section class="slider {{ if .bg_overlay }}overly{{ end }}" style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Scroll-Button unten -->
|
||||
<div class="scrolldown" style="position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%);">
|
||||
<a href="#about" class="btn btn-secondary" style="cursor: pointer;">
|
||||
<div class="chevrons">
|
||||
<div class='chevrondown'></div>
|
||||
<div class='chevrondown'></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /banner -->
|
||||
</header>
|
||||
|
||||
<!-- about -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section"> <!-- Add id="about" here -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="section-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-12">
|
||||
<div class="block">
|
||||
<img src="{{ .image | relURL }}" class="img-responsive" alt="Img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /about -->
|
||||
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="about-img">
|
||||
<img class="img-responsive" src="{{ .image | relURL }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{{ with .title }}<h2 class="mt-40">{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a href="{{ .link | relURL }}" class="btn btn-small mt-20">{{ .label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row counter-box text-center mt-50">
|
||||
{{ range .funfacts }}
|
||||
<div class="col-md-2">
|
||||
<div class="counter-item">
|
||||
{{ with .icon }}<i class="{{ . }}"></i>{{ end }}
|
||||
{{ with .count }}<h4 class="count" data-count="{{ . }}">0</h4>{{ end }}
|
||||
{{ with .name }}<span>{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="text-and-image-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Bild auf der linken Seite -->
|
||||
<div class="image-section">
|
||||
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Text auf der rechten Seite -->
|
||||
<div class="text-section" style="max-width: 100%;">
|
||||
<h2>Unser Angebot</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
|
||||
</div>
|
||||
<!-- Bild auf der linken Seite -->
|
||||
<div class="image-section">
|
||||
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Text auf der rechten Seite -->
|
||||
<div class="text-section" style="max-width: 100%;">
|
||||
<h2>Unser Angebot</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- portfolio -->
|
||||
{{ with .Params.portfolio }}
|
||||
{{ if .enable }}
|
||||
<section class="feature bg-2" style="background-image: url('{{ .bg_image | relURL }}')">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-6">
|
||||
{{ with .title }}<h2 class="section-subtitle">{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a href="{{ .link | relLangURL }}" class="btn btn-view-works">{{ .label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /portfolio -->
|
||||
|
||||
<!-- service -->
|
||||
{{ if .Params.service.enable }}
|
||||
{{ partial "service.html" . }}
|
||||
{{ end }}
|
||||
<!-- /service -->
|
||||
|
||||
<!-- call to action -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /call to action -->
|
||||
|
||||
<!-- funfacts -->
|
||||
{{ with .Params.funfacts }}
|
||||
{{ if .enable }}
|
||||
<section class="testimonial">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="section-title text-center">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="block">
|
||||
<ul class="counter-box clearfix">
|
||||
{{ range .funfact_item }}
|
||||
<li class="counter-item">
|
||||
<!-- Anstelle eines Icons, das Bild einbinden -->
|
||||
<img src="{{ .image | relURL }}" alt="{{ .name }}" style="width: 50px; height: auto;"> <!-- Stil nach Bedarf anpassen -->
|
||||
<h4 class="count" data-count="{{ .count }}">0</h4>
|
||||
<span>{{ .name | markdownify }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
<div class="testimonial-carousel text-center">
|
||||
<div class="testimonial-slider owl-carousel">
|
||||
{{ range .testimonial_slider }}
|
||||
<div>
|
||||
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
<div class="user">
|
||||
<img src="{{ .image | relURL }}" alt="client">
|
||||
<p><span>{{ .name | markdownify }}</span> {{ .designation | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
const canvas = document.getElementById('sinusCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const wave = {
|
||||
y: canvas.height / 2,
|
||||
length: 0.004,
|
||||
amplitude: 160,
|
||||
amplitudeVariation: 60,
|
||||
frequency: 0.007
|
||||
};
|
||||
|
||||
let increment = wave.frequency;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Setzt den Hintergrundfarbe, um den Kontrast zu erhöhen und die weiße Welle sichtbar zu machen
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; // Leichter Trail-Effekt mit dunklem Hintergrund
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-330, wave.y);
|
||||
|
||||
ctx.lineWidth = 1 + Math.abs(Math.sin(increment) * 10); // Dynamische Anpassung der Linienstärke
|
||||
|
||||
for (let i = 0; i < canvas.width; i++) {
|
||||
ctx.lineTo(
|
||||
i,
|
||||
wave.y +
|
||||
Math.sin(i * wave.length + increment) *
|
||||
wave.amplitude *
|
||||
Math.sin(increment)
|
||||
);
|
||||
}
|
||||
|
||||
ctx.strokeStyle = 'white'; // Stellt die Linienfarbe auf Weiß ein
|
||||
|
||||
ctx.stroke();
|
||||
increment += wave.frequency;
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var scrollDownButton = document.querySelector('.scroll-down-button');
|
||||
scrollDownButton.addEventListener('click', function() {
|
||||
document.querySelector('#about').scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
{{ define "main" }}
|
||||
<header id="mainHeader">
|
||||
{{ with .Params.banner }}
|
||||
|
|
@ -213,30 +214,27 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
<!-- Linker Block: Ingenieurbüros + Co. -->
|
||||
<div class="aff-group aff-left">
|
||||
<div class="aff-logos">
|
||||
<!-- Deine Logos hier (Beispiele) -->
|
||||
<img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
|
||||
<a href="https://www.ingenieurbueros.at/"
|
||||
target="_blank"
|
||||
rel="noopener external nofollow"
|
||||
aria-label="Ingenieurbüros Österreich – Website öffnen"
|
||||
title="Ingenieurbüros Österreich">
|
||||
<img src="images/logo-fusszeile-mitglieder-2018.webp" alt="Ingenieurbüros Österreich">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechter Block: PV Austria (klickbar) -->
|
||||
<a class="aff-group aff-right"
|
||||
href="https://pvaustria.at/"
|
||||
target="_blank"
|
||||
rel="noopener external nofollow"
|
||||
aria-label="Photovoltaic Austria – Website öffnen"
|
||||
title="Photovoltaic Austria">
|
||||
<p class="aff-text">
|
||||
AMPERION ist Mitglied bei Photovoltaic Austria und bietet normgerechte Planung, herstellerunabhängige Beratung und praxisnahe Innovation –
|
||||
damit jedes Projekt technisch, wirtschaftlich und langfristig überzeugt.
|
||||
</p>
|
||||
<img src="/images/mitglied-photovoltaic-austria.png" alt="Mitglied bei Photovoltaic Austria" class="aff-pva-logo">
|
||||
</a>
|
||||
|
||||
<!-- Rechter Block: Elektriker Österreich (klickbar, NUR Logo) -->
|
||||
<a class="aff-group aff-right"
|
||||
href="https://elektrikeroesterreich.at/"
|
||||
target="_blank"
|
||||
rel="noopener external nofollow"
|
||||
aria-label="Elektriker Österreich – Website öffnen"
|
||||
title="Elektriker Österreich">
|
||||
<img src="/images/logoelektrikeroedachmarke.png"
|
||||
alt="Mitglied bei Elektriker Österreich"
|
||||
class="aff-pva-logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -290,12 +288,35 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
{{ if .Params.cta.enable }}
|
||||
<section id="cta" class="cta">
|
||||
<!-- BG -->
|
||||
<!-- Animierter Hintergrund -->
|
||||
<div class="cta__bg" aria-hidden="true">
|
||||
<div class="cta__grad"></div>
|
||||
<div class="cta__pan"></div>
|
||||
<!-- Grid Pattern -->
|
||||
<div class="cta__grid"></div>
|
||||
|
||||
<!-- Energie-Linien -->
|
||||
<div class="cta__energy-lines">
|
||||
<!-- Horizontale Linien -->
|
||||
<div class="energy-line-h energy-line-h1"></div>
|
||||
<div class="energy-line-h energy-line-h2"></div>
|
||||
|
||||
|
||||
<!-- Vertikale Linien -->
|
||||
<div class="energy-line-v energy-line-v1"></div>
|
||||
<div class="energy-line-v energy-line-v2"></div>
|
||||
|
||||
|
||||
<!-- Energie-Knoten -->
|
||||
<div class="energy-node energy-node1"></div>
|
||||
<div class="energy-node energy-node2"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Gradient Overlays -->
|
||||
<div class="cta__gradient-top"></div>
|
||||
<div class="cta__gradient-bottom"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="my-container">
|
||||
<div class="cta__wrap">
|
||||
<h2 class="cta__title">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,34 @@
|
|||
<section class="page-title gif-background">
|
||||
<!-- page-title.html - Optimierte Version mit Wiederverwendung -->
|
||||
<section class="page-title">
|
||||
<!-- Animierter Grid-Hintergrund (nutzt CTA-Klassen) -->
|
||||
<div class="cta__bg page-title__bg" aria-hidden="true">
|
||||
<!-- Grid Pattern -->
|
||||
<div class="cta__grid"></div>
|
||||
|
||||
<!-- Energie-Linien (nur wenige für dezenten Effekt) -->
|
||||
<div class="cta__energy-lines">
|
||||
<!-- Nur 2 horizontale Linien -->
|
||||
<div class="energy-line-h energy-line-h1"></div>
|
||||
<div class="energy-line-h energy-line-h3"></div>
|
||||
<!-- Nur 2 vertikale Linien -->
|
||||
<div class="energy-line-v energy-line-v1"></div>
|
||||
<div class="energy-line-v energy-line-v3"></div>
|
||||
<!-- Nur 3 Knoten -->
|
||||
<div class="energy-node energy-node1"></div>
|
||||
<div class="energy-node energy-node3"></div>
|
||||
<div class="energy-node energy-node5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="container1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="servie-title fade-in">
|
||||
<div class="service-title fade-in">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
{{ with .Params.description }}
|
||||
</div>
|
||||
<p class="page-title-desc">{{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,29 +36,22 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
/* Page Title spezifische Styles */
|
||||
.page-title{position:relative;padding:80px 0;background:#fff;overflow:hidden;}
|
||||
.container1{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;}
|
||||
.service-title h1{color:#046e6e;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;margin:0;}
|
||||
.page-title-desc{color:#666;font-size:1.25rem;margin:1rem auto 0;max-width:700px;}
|
||||
.fade-in{animation:fadeInUp 1s ease-out;}
|
||||
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
/* Variablen – werden von CTA-CSS verwendet */
|
||||
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
|
||||
|
||||
|
||||
|
||||
.fade-in {
|
||||
animation: fadeInUp 1s ease-out
|
||||
}
|
||||
|
||||
.container1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Mobile: noch reduzierter */
|
||||
@media (max-width:768px){
|
||||
.page-title .energy-line-h3,
|
||||
.page-title .energy-line-v3,
|
||||
.page-title .energy-node5{display:none;}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2477,7 +2477,7 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
margin-bottom: 40px; }
|
||||
|
||||
.footer {
|
||||
background: #f1f1f1;
|
||||
background: #f3f3f3;
|
||||
min-height: 205px;
|
||||
text-align: center;
|
||||
padding-top: 67px; }
|
||||
|
|
@ -2517,12 +2517,6 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
word-break: normal;
|
||||
hyphens: none; }
|
||||
|
||||
.text-center {
|
||||
text-align: center; }
|
||||
|
||||
.text-justify {
|
||||
text-align: justify; }
|
||||
|
||||
/* ========== Vereinheitlichte Section-Abstände ========== */
|
||||
section {
|
||||
margin-bottom: 0; }
|
||||
|
|
@ -2533,17 +2527,6 @@ section {
|
|||
margin-top: 80px;
|
||||
margin-bottom: 80px; }
|
||||
|
||||
/* Spezielle Section-Anpassungen */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px; }
|
||||
|
||||
.section-spacing {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 5rem; }
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
font-size: 22px;
|
||||
|
|
@ -2780,9 +2763,7 @@ section {
|
|||
/* Titel & Text */
|
||||
.service-card-title {
|
||||
font-weight: 700;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #F5A623;
|
||||
/* CI-Orange bleibt */ }
|
||||
margin: .25rem 0 .5rem; }
|
||||
|
||||
.service-card-description {
|
||||
line-height: 1.65;
|
||||
|
|
@ -2919,18 +2900,16 @@ section {
|
|||
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; } }
|
||||
|
||||
#about-intro .intro-text p,
|
||||
#about-intro .intro-text li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
|
|
@ -3097,7 +3076,7 @@ body {
|
|||
align-items: center;
|
||||
gap: clamp(0.75rem, 2vw, 1.25rem); }
|
||||
|
||||
/* Linker Block */
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: clamp(0.9rem, 1.2vw, 1rem);
|
||||
|
|
@ -3116,38 +3095,42 @@ body {
|
|||
height: auto;
|
||||
display: block; }
|
||||
|
||||
/* Rechter Block (PV Austria + Text) */
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
.aff-right {
|
||||
display: flex;
|
||||
/* zentriert das Logo im Link */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
align-items: center; }
|
||||
color: inherit; }
|
||||
|
||||
.aff-right .aff-pva-logo {
|
||||
max-height: clamp(80px, 6vw, 140px);
|
||||
max-height: clamp(60px, 6vw, 120px);
|
||||
/* Logo-Größe hier steuern */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block; }
|
||||
|
||||
.aff-text {
|
||||
margin: 0;
|
||||
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
|
||||
line-height: 1.5;
|
||||
max-width: 42ch;
|
||||
/* gute Lesbarkeit */
|
||||
color: #374151; }
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
@media (min-width: 900px) {
|
||||
.aff-right {
|
||||
padding-left: clamp(1rem, 2.5vw, 3rem);
|
||||
border-left: 1px solid #e5e7eb; } }
|
||||
|
||||
/* Kleine Verfeinerungen */
|
||||
/* Mobil: keine Trennlinie / kein Einzug */
|
||||
@media (max-width: 899.98px) {
|
||||
.aff-right {
|
||||
border-left: 0;
|
||||
padding-left: 0; } }
|
||||
|
||||
/* Fokus-Style für Tastaturbedienung */
|
||||
.aff-right:focus-visible {
|
||||
outline: 2px dashed var(--amp-accent);
|
||||
outline-offset: 4px; }
|
||||
|
||||
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||
/* ========================================
|
||||
CTA SECTION - HYBRID DESIGN
|
||||
======================================== */
|
||||
.cta {
|
||||
--cta-primary: #046e6e;
|
||||
/* Türkis */
|
||||
|
|
@ -3157,14 +3140,187 @@ body {
|
|||
--btn-py: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||
/* links/rechts -> Breite */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* Schriftgröße */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
/* Section höher wie „Standard-Sektion“ */ }
|
||||
background: #ffffff00; }
|
||||
|
||||
/* ===== HINTERGRUND ANIMATIONEN ===== */
|
||||
.cta__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; }
|
||||
|
||||
/* Subtiles Grid */
|
||||
.cta__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
/* Explizit transparent */
|
||||
background-image: linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite; }
|
||||
|
||||
@keyframes gridMove {
|
||||
0% {
|
||||
transform: translate(0, 0); }
|
||||
100% {
|
||||
transform: translate(50px, 50px); } }
|
||||
|
||||
/* Energie-Linien Container */
|
||||
.cta__energy-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.6; }
|
||||
|
||||
/* Horizontale Energie-Linie */
|
||||
.energy-line-h {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
|
||||
width: 200px;
|
||||
animation: energyFlowH 8s linear infinite; }
|
||||
.energy-line-h::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
border-radius: 50%; }
|
||||
.energy-line-h.energy-line-h1 {
|
||||
top: 20%;
|
||||
animation-duration: 6s; }
|
||||
.energy-line-h.energy-line-h2 {
|
||||
top: 40%;
|
||||
animation-duration: 7s;
|
||||
animation-delay: 2s; }
|
||||
.energy-line-h.energy-line-h3 {
|
||||
top: 60%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 4s; }
|
||||
.energy-line-h.energy-line-h4 {
|
||||
top: 80%;
|
||||
animation-duration: 6.5s;
|
||||
animation-delay: 1s; }
|
||||
|
||||
@keyframes energyFlowH {
|
||||
0% {
|
||||
left: -200px;
|
||||
opacity: 0; }
|
||||
10% {
|
||||
opacity: 1; }
|
||||
90% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0; } }
|
||||
|
||||
/* Vertikale Energie-Linie */
|
||||
.energy-line-v {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
|
||||
height: 150px;
|
||||
animation: energyFlowV 10s linear infinite; }
|
||||
.energy-line-v::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--cta-primary);
|
||||
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
|
||||
border-radius: 50%; }
|
||||
.energy-line-v.energy-line-v1 {
|
||||
left: 15%;
|
||||
animation-duration: 7s;
|
||||
animation-delay: 1s; }
|
||||
.energy-line-v.energy-line-v2 {
|
||||
left: 35%;
|
||||
animation-duration: 9s;
|
||||
animation-delay: 3s; }
|
||||
.energy-line-v.energy-line-v3 {
|
||||
left: 65%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 2s; }
|
||||
.energy-line-v.energy-line-v4 {
|
||||
left: 85%;
|
||||
animation-duration: 7.5s;
|
||||
animation-delay: 4s; }
|
||||
|
||||
@keyframes energyFlowV {
|
||||
0% {
|
||||
top: -150px;
|
||||
opacity: 0; }
|
||||
10% {
|
||||
opacity: 1; }
|
||||
90% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0; } }
|
||||
|
||||
/* Energie-Knoten (Kreuzungspunkte) */
|
||||
.energy-node {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--cta-primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--cta-primary);
|
||||
animation: nodePulse 2s ease-in-out infinite; }
|
||||
.energy-node.energy-node1 {
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
animation-delay: 0s; }
|
||||
.energy-node.energy-node2 {
|
||||
top: 40%;
|
||||
left: 35%;
|
||||
animation-delay: 0.5s; }
|
||||
.energy-node.energy-node3 {
|
||||
top: 60%;
|
||||
left: 65%;
|
||||
animation-delay: 1s; }
|
||||
.energy-node.energy-node4 {
|
||||
top: 80%;
|
||||
left: 85%;
|
||||
animation-delay: 1.5s; }
|
||||
.energy-node.energy-node5 {
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
animation-delay: 0.25s; }
|
||||
.energy-node.energy-node6 {
|
||||
top: 70%;
|
||||
left: 25%;
|
||||
animation-delay: 0.75s; }
|
||||
|
||||
@keyframes nodePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6; }
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 1; } }
|
||||
|
||||
/* ===== CONTENT STYLES ===== */
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
|
|
@ -3181,18 +3337,24 @@ body {
|
|||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||
line-height: 1.55;
|
||||
max-width: 58rem; }
|
||||
max-width: 58rem;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700; }
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-top: 0.5rem; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
.cta__actions {
|
||||
|
|
@ -3200,7 +3362,9 @@ body {
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem); }
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex;
|
||||
|
|
@ -3215,27 +3379,42 @@ body {
|
|||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; }
|
||||
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent);
|
||||
/* Hover = Orange */
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
|
||||
|
||||
.cta__btn:active {
|
||||
transform: translateY(1px); }
|
||||
|
||||
.cta__btn:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px; }
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.cta__btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
z-index: -1; }
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
|
||||
.cta__btn:hover::before {
|
||||
width: 300%;
|
||||
height: 300%; }
|
||||
.cta__btn:active {
|
||||
transform: translateY(1px); }
|
||||
.cta__btn:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px; }
|
||||
|
||||
/* Social-Icons (etwas größer, Teal-Hover) */
|
||||
.cta__social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(0.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px);
|
||||
|
|
@ -3247,23 +3426,226 @@ body {
|
|||
border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.cta__social-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--cta-accent);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s ease, height 0.4s ease;
|
||||
z-index: -1; }
|
||||
.cta__social-link:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25);
|
||||
transform: translateY(-2px); }
|
||||
.cta__social-link:hover::before {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.cta__social-link:hover img {
|
||||
filter: invert(1); }
|
||||
.cta__social-link:active {
|
||||
transform: translateY(1px); }
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: filter .2s ease;
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
|
||||
.cta__social-link:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25); }
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.energy-line-h2,
|
||||
.energy-line-h4,
|
||||
.energy-line-v2,
|
||||
.energy-line-v4,
|
||||
.energy-node4,
|
||||
.energy-node5,
|
||||
.energy-node6 {
|
||||
display: none; } }
|
||||
|
||||
.cta__social-link:active {
|
||||
transform: translateY(1px); }
|
||||
/* Weniger Abstand zur vorherigen Überschrift */
|
||||
#about-intro.section.section-tight {
|
||||
padding-top: 28px;
|
||||
/* statt 90px */
|
||||
padding-bottom: 60px; }
|
||||
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
/* Keine eigene Schriftgröße – erbt globales p-Design */
|
||||
#about-intro .intro-text {
|
||||
font-size: inherit;
|
||||
line-height: inherit; }
|
||||
|
||||
#about-intro .intro-text p {
|
||||
margin-bottom: .8rem; }
|
||||
|
||||
/* Badges vereinheitlichen */
|
||||
#about-intro .intro-badge {
|
||||
font-size: 1rem;
|
||||
padding: .45em .9em;
|
||||
background: #006464;
|
||||
border-radius: 999px; }
|
||||
|
||||
/* About-Intro: Video ohne abgerundete Ecken */
|
||||
.intro-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block; }
|
||||
|
||||
.intro-media, .intro-video {
|
||||
border-radius: 0 !important; }
|
||||
|
||||
/* überschreibt evtl. globale Styles */
|
||||
/* ========================================
|
||||
ABOUT PAGE STYLES
|
||||
======================================== */
|
||||
/* 1) Intro: Bild rechts, Text links, konsistente Abstände */
|
||||
#about-intro .intro-content {
|
||||
/* nutzt globale Typo; nur Abstände angleichen */ }
|
||||
#about-intro .intro-content .article-copy p {
|
||||
margin-bottom: 1rem; }
|
||||
#about-intro .intro-content .article-copy p:last-child {
|
||||
margin-bottom: 0; }
|
||||
#about-intro .intro-content .article-copy strong {
|
||||
font-weight: 700; }
|
||||
|
||||
#about-intro .intro-image-wrapper {
|
||||
position: relative; }
|
||||
|
||||
#about-intro .intro-image {
|
||||
display: block;
|
||||
transition: filter .2s ease; }
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem;
|
||||
/* wie Cards */
|
||||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
|
||||
object-fit: cover; }
|
||||
|
||||
.cta__social-link:hover img {
|
||||
filter: invert(1); }
|
||||
/* 2) Mission/Vision/Ziel: Tabs & Inhalt wie auf Index */
|
||||
.mission-section .mission-tabs {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
margin-bottom: 1rem; }
|
||||
.mission-section .mission-tabs .nav-link {
|
||||
border: 0;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
color: #046e6e;
|
||||
opacity: .7; }
|
||||
.mission-section .mission-tabs .nav-link.active, .mission-section .mission-tabs .nav-link:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 2px solid #046e6e;
|
||||
background: transparent; }
|
||||
|
||||
.mission-section .mission-tab-content .tab-inner {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.mission-section .mission-tab-content .tab-inner p {
|
||||
margin-bottom: .9rem; }
|
||||
.mission-section .mission-tab-content .tab-inner p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* 3) „Was uns auszeichnet“: Grid andocken an bestehende Service-Cards */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.25rem; }
|
||||
@media (max-width: 992px) {
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 576px) {
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr; } }
|
||||
.service-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.service-card .service-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto .5rem;
|
||||
display: block; }
|
||||
.service-card .service-card-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: .35rem; }
|
||||
.service-card .service-card-description {
|
||||
margin: 0; }
|
||||
|
||||
/* 4) Team-Block: Karten & Bild */
|
||||
.team-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
|
||||
object-fit: cover; }
|
||||
|
||||
.founder-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: .75rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
|
||||
.founder-card .founder-name {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 700; }
|
||||
.founder-card .founder-description p {
|
||||
margin-bottom: .8rem; }
|
||||
.founder-card .founder-description p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* 5) Utilities: Badge-Row unter Intro-Text */
|
||||
#about-intro .badge {
|
||||
border: 1px solid #eaeaea;
|
||||
background: #fafafa;
|
||||
font-weight: 600; }
|
||||
|
||||
/* 6) Harmonisierung der Section-Spacings für About */
|
||||
#about-intro.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px; }
|
||||
|
||||
.mission-section.section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 90px; }
|
||||
|
||||
/* ABOUT Intro – schmal & Blocksatz */
|
||||
#about-intro .intro-text.article-copy {
|
||||
max-width: 100ch;
|
||||
/* schmaler Textblock */
|
||||
margin: 0 auto;
|
||||
text-align: justify;
|
||||
/* „blocksartig“ */
|
||||
text-justify: inter-word;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere; }
|
||||
|
||||
#about-intro .intro-text.article-copy p {
|
||||
margin-bottom: .9rem;
|
||||
/* etwas kompakter als Standard */ }
|
||||
|
||||
/* H2 optisch sauber zentrieren/ausbalancieren */
|
||||
#about-intro h2 {
|
||||
text-wrap: balance;
|
||||
margin-bottom: 4rem; }
|
||||
|
||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||
.logo-container {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue