-
{{ .Title }}
+
+
{{ .Title }}
{{ with .Params.description }}
{{ . }}
@@ -36,22 +96,447 @@
+
+.container1 {
+ position: relative;
+ z-index: 10;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Titel mit elektrischem Effekt */
+.title-electric {
+ color: #046e6e;
+ font-size: clamp(2.5rem, 5vw, 3.5rem);
+ font-weight: 700;
+ margin: 0;
+ position: relative;
+ display: inline-block;
+ animation: powerOn 2s ease-out;
+ text-shadow: 0 0 30px rgba(4, 110, 110, 0.1);
+}
+
+.title-electric::before {
+ content: attr(data-text);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ animation: electricGlitch 3s ease-in-out infinite;
+ color: #F5A623;
+ z-index: -1;
+}
+
+.page-title-desc {
+ color: #666;
+ font-size: 1.25rem;
+ margin: 1rem auto 0;
+ max-width: 700px;
+ animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+/* Stromkreis-Animation */
+.circuit-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.15;
+ pointer-events: none;
+}
+
+.circuit-main {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+.circuit-path {
+ stroke: #046e6e;
+ stroke-width: 2;
+ fill: none;
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: drawCircuit 3s ease-out forwards;
+}
+
+.circuit-path-2 {
+ animation-delay: 0.5s;
+}
+
+.circuit-path-3 {
+ animation-delay: 1s;
+}
+
+.circuit-node {
+ fill: #F5A623;
+ opacity: 0;
+ animation: nodeGlow 2s ease-in-out infinite;
+}
+
+.circuit-component {
+ fill: #046e6e;
+ opacity: 0;
+ animation: componentFade 1s ease-out 2s forwards;
+}
+
+/* Energie-Pulse */
+.energy-pulse {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background: #F5A623;
+ border-radius: 50%;
+ box-shadow: 0 0 20px #F5A623;
+ opacity: 0;
+}
+
+.pulse-1 {
+ animation: energyFlow1 4s ease-in-out infinite;
+}
+
+.pulse-2 {
+ animation: energyFlow2 4s ease-in-out infinite 1.3s;
+}
+
+.pulse-3 {
+ animation: energyFlow3 4s ease-in-out infinite 2.6s;
+}
+
+/* Blitz-Effekte */
+.lightning-effect {
+ position: absolute;
+ color: #F5A623;
+ opacity: 0;
+ animation: lightningStrike 6s ease-in-out infinite;
+}
+
+.lightning-1 {
+ top: 10%;
+ right: 15%;
+ transform: scale(0.6) rotate(-15deg);
+}
+
+.lightning-2 {
+ bottom: 20%;
+ left: 10%;
+ transform: scale(0.4) rotate(25deg);
+ animation-delay: 3s;
+}
+
+/* Voltmeter */
+.voltmeter {
+ position: absolute;
+ top: 20%;
+ right: 5%;
+ color: #046e6e;
+ opacity: 0.3;
+ animation: fadeIn 2s ease-out 1s forwards;
+}
+
+.voltmeter-needle {
+ transform-origin: 60px 60px;
+ animation: voltmeterSwing 4s ease-in-out infinite;
+}
+
+/* Schaltkreis-Symbole */
+.circuit-symbols {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+.symbol {
+ position: absolute;
+ color: #046e6e;
+ opacity: 0;
+ animation: symbolFloat 8s ease-in-out infinite;
+}
+
+.symbol-diode {
+ top: 15%;
+ left: 20%;
+ animation-delay: 0s;
+}
+
+.symbol-transistor {
+ bottom: 25%;
+ right: 25%;
+ animation-delay: 2.5s;
+}
+
+.symbol-capacitor {
+ top: 60%;
+ left: 40%;
+ animation-delay: 5s;
+}
+
+/* Elektrisches Feld (Elektronen) */
+.electric-field {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+.electron {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ background: #F5A623;
+ border-radius: 50%;
+ opacity: 0.6;
+ animation: electronFlow 10s linear infinite;
+}
+
+.electron:nth-child(1) { top: 20%; animation-delay: 0s; }
+.electron:nth-child(2) { top: 30%; animation-delay: 1.2s; }
+.electron:nth-child(3) { top: 40%; animation-delay: 2.4s; }
+.electron:nth-child(4) { top: 50%; animation-delay: 3.6s; }
+.electron:nth-child(5) { top: 60%; animation-delay: 4.8s; }
+.electron:nth-child(6) { top: 70%; animation-delay: 6s; }
+.electron:nth-child(7) { top: 80%; animation-delay: 7.2s; }
+.electron:nth-child(8) { top: 35%; animation-delay: 8.4s; }
+
+/* Animationen */
+@keyframes powerOn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.9);
+ filter: blur(4px);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.05);
+ filter: blur(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes electricGlitch {
+ 0%, 90%, 100% { opacity: 0; }
+ 92% { opacity: 0.8; transform: translate(2px, -2px); }
+ 94% { opacity: 0.6; transform: translate(-1px, 1px); }
+ 96% { opacity: 0.8; transform: translate(1px, 0); }
+}
+
+@keyframes drawCircuit {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes nodeGlow {
+ 0%, 100% { opacity: 0.3; r: 4; }
+ 50% { opacity: 1; r: 6; }
+}
+
+@keyframes componentFade {
+ to {
+ opacity: 0.6;
+ }
+}
+
+@keyframes energyFlow1 {
+ 0% {
+ left: 0;
+ top: 50%;
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ top: 50%;
+ opacity: 0;
+ }
+}
+
+@keyframes energyFlow2 {
+ 0% {
+ left: 10%;
+ top: 25%;
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ left: 90%;
+ top: 25%;
+ opacity: 0;
+ }
+}
+
+@keyframes energyFlow3 {
+ 0% {
+ left: 20%;
+ top: 75%;
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ left: 80%;
+ top: 75%;
+ opacity: 0;
+ }
+}
+
+@keyframes lightningStrike {
+ 0%, 95%, 100% {
+ opacity: 0;
+ transform: scale(0.6) rotate(-15deg);
+ }
+ 96% {
+ opacity: 0.8;
+ transform: scale(1) rotate(-15deg);
+ }
+ 97% {
+ opacity: 0.4;
+ transform: scale(0.8) rotate(-15deg);
+ }
+}
+
+@keyframes voltmeterSwing {
+ 0%, 100% {
+ transform: rotate(-45deg);
+ }
+ 50% {
+ transform: rotate(45deg);
+ }
+}
+
+@keyframes symbolFloat {
+ 0%, 100% {
+ opacity: 0.2;
+ transform: translateY(0) rotate(0deg);
+ }
+ 50% {
+ opacity: 0.5;
+ transform: translateY(-20px) rotate(180deg);
+ }
+}
+
+@keyframes electronFlow {
+ 0% {
+ left: -10px;
+ transform: translateX(0);
+ }
+ 100% {
+ left: 100%;
+ transform: translateX(10px);
+ }
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 0.3;
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .page-title {
+ padding: 80px 0 60px;
+ }
+
+ .circuit-bg {
+ opacity: 0.08;
+ }
+
+ .voltmeter,
+ .lightning-effect,
+ .symbol-transistor {
+ display: none;
+ }
+
+ .title-electric {
+ font-size: 2rem;
+ }
+
+ .page-title-desc {
+ font-size: 1rem;
+ }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+
+ .title-electric {
+ text-shadow: 0 0 40px rgba(245, 166, 35, 0.3);
+ }
+
+ .circuit-path {
+ stroke: #F5A623;
+ }
+
+ .circuit-bg {
+ opacity: 0.25;
+ }
+
+ .page-title-desc {
+ color: #aaa;
+ }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+ .title-electric,
+ .circuit-path,
+ .energy-pulse,
+ .electron,
+ .symbol,
+ .voltmeter-needle {
+ animation: none;
+ }
+
+ .circuit-path {
+ stroke-dashoffset: 0;
+ }
+
+ .circuit-node,
+ .circuit-component {
+ opacity: 0.5;
+ }
+}
+
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index 23dac36..66c07ff 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -3136,15 +3136,17 @@ body {
--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 */
- --btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
- /* Schriftgröße */
+ /* ÄNDERUNG: deutlich kleinere Buttons (Höhe, Breite, Schrift) */
+ --btn-py: clamp(1rem, 1.2vw, 1.5rem);
+ /* vorher 1.8–2.5rem -> jetzt kompakter */
+ --btn-px: clamp(1rem, 1.6vw, 1.5rem);
+ /* vorher 1.8–2.5rem -> schmaler */
+ --btn-fs: clamp(1.5rem, 1.15vw, 1.5rem);
+ /* vorher 1.8–2.5rem -> p-nahe Größe */
position: relative;
overflow: hidden;
padding: clamp(6rem, 10vw, 12rem) 0;
+ /* belassen; nur Buttons werden kleiner */
background: #ffffff00; }
/* ===== HINTERGRUND ANIMATIONEN ===== */
@@ -3156,25 +3158,6 @@ body {
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;
@@ -3188,7 +3171,7 @@ body {
.energy-line-h {
position: absolute;
height: 1px;
- background: linear-gradient(90deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
+ background: linear-gradient(90deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
width: 200px;
animation: energyFlowH 8s linear infinite; }
.energy-line-h::after {
@@ -3199,8 +3182,8 @@ body {
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);
+ background: var(--cta-accent);
+ box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
border-radius: 50%; }
.energy-line-h.energy-line-h1 {
top: 20%;
@@ -3234,7 +3217,7 @@ body {
.energy-line-v {
position: absolute;
width: 1px;
- background: linear-gradient(180deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
+ background: linear-gradient(180deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
height: 150px;
animation: energyFlowV 10s linear infinite; }
.energy-line-v::after {
@@ -3245,8 +3228,8 @@ body {
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);
+ background: var(--cta-accent);
+ box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
border-radius: 50%; }
.energy-line-v.energy-line-v1 {
left: 15%;
@@ -3282,9 +3265,9 @@ body {
position: absolute;
width: 6px;
height: 6px;
- background: var(--cta-primary);
+ background: var(--cta-accent);
border-radius: 50%;
- box-shadow: 0 0 10px var(--cta-primary);
+ box-shadow: 0 0 10px var(--cta-accent);
animation: nodePulse 2s ease-in-out infinite; }
.energy-node.energy-node1 {
top: 20%;
@@ -3322,11 +3305,22 @@ body {
/* ===== CONTENT STYLES ===== */
.cta .my-container {
position: relative;
- z-index: 1; }
+ z-index: 1;
+ /* NEU: zentral breiter Container für diese Section
+ -> mehr Zeilenbreite, damit die H1 ab Desktop in 1 Zeile bleibt */
+ width: 100%;
+ max-width: 1360px;
+ /* vorher kein Limit hier – jetzt groß/“breit in der Mitte“ */
+ margin-inline: auto;
+ /* zentriert */
+ padding-inline: clamp(16px, 3vw, 24px);
+ /* etwas Innenabstand links/rechts */ }
.cta__wrap {
text-align: center;
- max-width: 72rem;
+ /* ÄNDERUNG: mehr Inhaltsbreite, H1 bekommt mehr Platz */
+ max-width: 90rem;
+ /* vorher 72rem */
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem); }
@@ -3336,14 +3330,18 @@ body {
color: var(--cta-primary);
font-weight: 700;
letter-spacing: .2px;
- font-size: clamp(2.2rem, 4.8vw, 3.6rem);
- position: relative;
- z-index: 2; }
-
+ position: center;
+ z-index: 2;
+ /* NEU: ab Desktop nicht umbrechen -> bleibt einzeilig, wenn Platz da ist */ }
+ @media (min-width: 1200px) {
+ .cta__title {
+ white-space: nowrap;
+ /* einzeilig erzwingen */ } }
.cta__lead {
margin: .9rem auto 0;
color: #0f172a;
line-height: 1.55;
+ /* optional etwas breiter, wenn du willst – hier schon groß genug */
max-width: 58rem;
position: relative;
z-index: 2; }
@@ -3354,7 +3352,7 @@ body {
display: block;
margin-top: 0.5rem; }
-/* Buttons – deutlich größer */
+/* Buttons */
.cta__actions {
display: flex;
flex-wrap: wrap;
@@ -3369,6 +3367,7 @@ body {
align-items: center;
gap: .7rem;
padding: var(--btn-py) var(--btn-px);
+ /* nutzt die kleineren Presets oben */
border-radius: 9999px;
background: #fff;
color: var(--cta-primary);
@@ -3377,6 +3376,7 @@ body {
text-decoration: none;
font-weight: 700;
font-size: var(--btn-fs);
+ /* nutzt die kleinere Schrift */
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
position: relative;
overflow: hidden; }
@@ -3490,17 +3490,20 @@ body {
background: #006464;
border-radius: 999px; }
-/* About-Intro: Video */
+/* About-Intro: Video ohne abgerundete Ecken */
.intro-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
- border-radius: 12px; }
+ border-radius: 12px;
+ /* Weiche Kanten */ }
.intro-media {
overflow: hidden;
- border-radius: 12px; }
+ /* sorgt dafür, dass der Radius auch das Video schneidet */
+ border-radius: 12px;
+ /* gleicher Radius wie Video */ }
/* ========================================
ABOUT PAGE STYLES
diff --git a/static/images/leistungen/consulting1.webp b/static/images/leistungen/consulting1.webp
new file mode 100644
index 0000000..51e2d74
Binary files /dev/null and b/static/images/leistungen/consulting1.webp differ
diff --git a/static/images/leistungen/consulting2.webp b/static/images/leistungen/consulting2.webp
new file mode 100644
index 0000000..bf9369f
Binary files /dev/null and b/static/images/leistungen/consulting2.webp differ
diff --git a/static/images/leistungen/emobilitaet1.webp b/static/images/leistungen/emobilitaet1.webp
new file mode 100644
index 0000000..8d657a0
Binary files /dev/null and b/static/images/leistungen/emobilitaet1.webp differ
diff --git a/static/images/leistungen/emobilitaet2.webp b/static/images/leistungen/emobilitaet2.webp
new file mode 100644
index 0000000..003a91b
Binary files /dev/null and b/static/images/leistungen/emobilitaet2.webp differ
diff --git a/static/images/leistungen/energiespeicher1.webp b/static/images/leistungen/energiespeicher1.webp
new file mode 100644
index 0000000..8b301fa
Binary files /dev/null and b/static/images/leistungen/energiespeicher1.webp differ
diff --git a/static/images/leistungen/energiespeicher2.webp b/static/images/leistungen/energiespeicher2.webp
new file mode 100644
index 0000000..9b4051e
Binary files /dev/null and b/static/images/leistungen/energiespeicher2.webp differ
diff --git a/static/images/leistungen/photovoltaik1.webp b/static/images/leistungen/photovoltaik1.webp
new file mode 100644
index 0000000..2844761
Binary files /dev/null and b/static/images/leistungen/photovoltaik1.webp differ
diff --git a/static/images/leistungen/photovoltaik2.webp b/static/images/leistungen/photovoltaik2.webp
new file mode 100644
index 0000000..589ea66
Binary files /dev/null and b/static/images/leistungen/photovoltaik2.webp differ
diff --git a/static/images/leistungen/planung1.webp b/static/images/leistungen/planung1.webp
new file mode 100644
index 0000000..0bb9e08
Binary files /dev/null and b/static/images/leistungen/planung1.webp differ
diff --git a/static/images/leistungen/planung2.webp b/static/images/leistungen/planung2.webp
new file mode 100644
index 0000000..435dd30
Binary files /dev/null and b/static/images/leistungen/planung2.webp differ
diff --git a/static/images/leistungen/projektmanagement1.webp b/static/images/leistungen/projektmanagement1.webp
new file mode 100644
index 0000000..6699cd0
Binary files /dev/null and b/static/images/leistungen/projektmanagement1.webp differ
diff --git a/static/images/leistungen/projektmanagement2.webp b/static/images/leistungen/projektmanagement2.webp
new file mode 100644
index 0000000..ea9dfb1
Binary files /dev/null and b/static/images/leistungen/projektmanagement2.webp differ
+{{ partial "page-title.html" . }}
+
+{{/* ==== BILDER SAMMELN (Front-Matter oder Auto-Discovery) ==== */}}
+{{ $photos := .Params.images }}
+{{ if not $photos }}
+ {{ $slug := .Params.slug | default .File.TranslationBaseName }}
+ {{ $cands := slice
+ (printf "static/images/leistungen/%s1.webp" $slug)
+ (printf "static/images/leistungen/%s2.webp" $slug)
+ }}
+ {{ $auto := slice }}
+ {{ range $cands }}
+ {{ if fileExists . }}
+ {{ $auto = $auto | append (dict "src" (replace . "static" "") "alt" $slug ) }}
+ {{ end }}
+ {{ end }}
+ {{ $photos = $auto }}
+{{ end }}
+
+{{/* Erstes Bild für Hero, zweites fürs Ergebnis vormerken */}}
+{{ $heroPhoto := cond (gt (len $photos) 0) (index $photos 0) nil }}
+{{ $ergebnisPhoto := cond (gt (len $photos) 1) (index $photos 1) nil }}
+{{ $.Scratch.Set "ergebnisPhoto" $ergebnisPhoto }}
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+