Juli 2025

assets/scss (2)/style.scss

@@ -1,96 +0,0 @@
-// Color Variables
-{{ with site.Params.variables }}
-$color-primary: {{.color_primary | default "#777"}};
-$color-secondary: {{.color_secondary | default "#0AA8A7"}};
-$text-color: {{.text_color | default "#004753"}};
-$text-dark: {{.text_dark | default "#004753"}};
-$text-light: {{.text_light | default "#999"}};
-$body-bg: {{.body_color | default "#fff"}};
-$border-color: {{.border_color | default "#ECECEC"}};
-$black: {{.black | default "#777"}};
-$white: {{.white | default "#fff"}};
-$light: {{.light | default "#EDF6F5"}};
-
-
-// Font Variables
-$font-size: {{.font_size | default "16px"}};
-$font-scale: {{.font_scale | default "1.25"}};
-$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
-$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
-$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
-{{ end }}
-
-$h1: 80px;
-$h1-md: 34px;
-$h2: 28px;
-$h2-md: 26px;
-$h2-sm: 22px;
-$h3: 20px;
-$h4: 16px;
-
-@import 'mixins.scss';
-
-@import 'media-query.scss';
-
-@import 'typography.scss';
-
-@import 'common.scss';
-
-@import 'main.scss';
-
-@import 'templates/_header.scss';
-
-@import 'templates/_navigation.scss';
-
-@import 'templates/_slider.scss';
-
-@import 'templates/_call-to-action.scss';
-
-@import 'templates/_service.scss';
-
-@import 'templates/_feature.scss';
-
-@import 'templates/_portfolio.scss';
-
-@import 'templates/_testimonial.scss';
-
-@import 'templates/_contact.scss';
-
-@import 'templates/_pricing.scss';
-
-@import 'templates/_products.scss';
-
-@import 'templates/_single-product.scss';
-
-@import 'templates/_clients.scss';
-
-@import 'templates/_about.scss';
-
-@import 'templates/_instagram.scss';
-
-@import 'templates/_user-dashboard.scss';
-
-@import 'templates/_single-post.scss';
-
-@import 'templates/_backgrounds.scss';
-
-@import 'templates/_blog-sidebar.scss';
-
-@import 'templates/_blog.scss';
-
-@import 'templates/_coming-soon.scss';
-
-@import 'templates/_shopping.scss';
-
-@import 'templates/_404.scss';
-
-@import 'templates/_message-sent.scss';
-
-@import 'templates/_footer.scss';
-
-@import 'custom.scss';
-
-
-html {
-    scroll-behavior: smooth;
-  }

assets/scss/_common.scss

@@ -807,3 +807,4 @@ span.cloaked-e-mail:before {
 .why-title1 {
   margin: 0; /* Entfernt zusätzliche Ränder */
 }
+

assets/scss/custom.scss

@@ -197,7 +197,7 @@ section {
 
   .service-grid {
     display: grid;
-    gap: 20px;                 /* 40px Abstand sowohl horizontal als auch vertikal */
+    gap: 30px;                 /* 40px Abstand sowohl horizontal als auch vertikal */
     grid-template-columns: repeat(3, 1fr);
     /* => Standard: 3 Spalten für größere Bildschirme */
   }
@@ -233,7 +233,7 @@ section {
   }
   
   .service-item-fixed:hover .zoom-wrap {
-    transform: scale(1.2);
+    transform: scale(1.06);
   }
   
   .zoom-wrap a {
@@ -256,7 +256,7 @@ section {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.3); /* dunkler Schleier (30% schwarz) */
+  background: rgba(0, 0, 0, 0.4); /* dunkler Schleier (30% schwarz) */
   z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
   pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
 }
@@ -303,3 +303,20 @@ section {
   height: auto;
   max-width: 70%;
 }
+
+
+
+
+.custom-title {
+  color: #046e6e; /* Ersetze dies mit der Farbe deiner Wahl */
+}
+
+
+
+.hover-link {
+  transition: color 0.3s ease;
+}
+
+.hover-link:hover {
+  color: #F5A623;
+}

assets/scss/style.scss

@@ -2,7 +2,7 @@
 {{ with site.Params.variables }}
 $color-primary: {{.color_primary | default "#fff"}};
 $color-secondary: {{.color_secondary | default "#0AA8A7"}};
-$text-color: {{.text_color | default "#777"}};
+$text-color: {{.text_color | default "#fff"}};
 $text-dark: {{.text_dark | default "#222"}};
 $text-light: {{.text_light | default "#737373"}};
 $body-bg: {{.body_color | default "#fff"}};

content/german/_index.md

@@ -24,7 +24,8 @@ about:
   enable: true
   title: "ÜBER AMPERION"
   description: "Technik mit Verantwortung. Planung mit Weitblick."
-  content: "<h5> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </h5> <p> Wir haben uns darauf spezialisiert, Green-Tech-Projekte so zu gestalten, dass sie in der Praxis halten, was sie am Papier versprechen. Ob für Unternehmen, Gemeinden oder private Auftraggeber:innen. </p> <p> Wir bringen Struktur in komplexe Anforderungen, klären Schnittstellen und denken wirtschaftlich wie technisch voraus. Von der ersten Idee bis zur Umsetzung begleiten wir Energieprojekte mit Weitblick, Präzision und Umsetzungsstärke. Netzanschluss, Einreichung, Wirtschaftlichkeit, Normen, Schnittstellen und alles, was später entscheidend wird, berücksichtigen wir von Anfang an. </p> <p> Dabei verbinden wir klassische Ingenieursdisziplin mit systemischem Denken, technischer Planung, Koordination, digitale Lösungen und Erfahrung aus realen Projekten. </p> <p> AMPERION arbeitet unabhängig, strukturiert und mit dem Anspruch, Verantwortung zu übernehmen, damit Energieprojekte gelingen.</p>"
+  content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. Mehr über uns </p>"
+  link_text: "Mehr über uns."
   image: "images/ingenieurbuero.webp"
 
  ############################# About #################################

content/german/about.md

@@ -1,6 +1,7 @@
 ---
-title: "Über uns"
+title: "Wir sind AMPERION"
-description: "this is meta description"
+description: "Das AMPERION Gründerteam."
+descriptiontwo: "Zwei Ingenieure. Eine Vision."
 bg_image: ""
 layout: "about"
 draft: false
@@ -48,7 +49,7 @@ mission_vision:
   tabs:
   # tab item loop
   - name : "Unsere Vision"
-    content : "<h4> Wir ermöglichen Energieprojekte, die Sinn machen!</h4> <p> Wir sehen eine Zukunft, in der erneuerbare Energien die Grundlage einer verlässlichen, wirtschaftlichen und nachhaltigen Energieversorgung bilden.</p> <p> Was uns antreibt, ist der Anspruch, Energieprojekte nicht nur umzusetzen, sondern sinnvoll für Menschen, Systeme und Generationen zu gestalten. Mit technischer Präzision, unternehmerischem Denken und dem Blick fürs Ganze wollen wir die Energiewende mitgestalten.</p> <p> Nicht als Trend, sondern als Aufgabe.</p>"
+    content : "<h4> Unsere Vision ist kein Produkt, sondern ein Versprechen.</h4> <p> Ein Versprechen an die Umwelt, an kommende Generationen, an das Morgen: Dass wir Technik nie als Selbstzweck sehen, sondern als Werkzeug für Wandel. Für eine Welt, in der Energie nicht auf Raubbau basiert – sondern auf Respekt. Für eine Menschheit, die gelernt hat, mit dem zu leben, was sie braucht – und nicht mit dem, was sie verbraucht.</p>"
 
   # tab item loop
   - name : "Unsere Mission"

layouts/index.html

@@ -1,5 +1,10 @@
 {{ define "main" }}
-<header>
+Um den ersten Bereich der Seite beim Scrollen nach unten verschwinden zu lassen und beim Scrollen nach ganz oben wieder erscheinen zu lassen, kannst du JavaScript verwenden, um den Bereich zu verstecken oder anzuzeigen, basierend auf der Scroll-Position. Hier ist, wie du das machen kannst:
+Schritt 1: Füge eine ID oder Klasse zum Header hinzu
+
+Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit JavaScript ansprechen kannst.
+
+<header id="mainHeader">
 
 
   {{ with .Params.banner }}
@@ -89,6 +94,35 @@
   });
 </script>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var header = document.getElementById('mainHeader');
+    var lastScrollPosition = window.scrollY;
+
+    window.addEventListener('scroll', function() {
+      var currentScrollPosition = window.scrollY;
+
+      // Wenn der Benutzer nach unten scrollt, verstecke den Header
+      if (currentScrollPosition > lastScrollPosition) {
+        header.style.top = '-100vh'; // Passe diesen Wert an die Höhe deines Headers an
+      }
+      // Wenn der Benutzer nach oben scrollt, zeige den Header wieder an
+      else {
+        header.style.top = '0';
+      }
+
+      // Wenn der Benutzer ganz nach oben scrollt, zeige den Header an
+      if (currentScrollPosition === 0) {
+        header.style.top = '0';
+      }
+
+      lastScrollPosition = currentScrollPosition;
+    });
+  });
+</script>
+
+
+
 <div style="height: 200px;"></div>
 
 <!-- whyamperion -->
@@ -101,7 +135,7 @@
 
 
 
-<!-- service -->
+<!-- services -->
 {{ with site.GetPage "/service" }}
 {{ with .Params.service }}
 <section id="service" class="service">
@@ -134,9 +168,9 @@
 </section>
 {{ end }}
 {{ end }}
-<!-- /service -->
+<!-- /services -->
 
-<!-- service -->
+<!-- focustopics -->
 {{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
 {{ with .Params.service }}
 <section id="service" class="service">
@@ -166,12 +200,11 @@
 </section>
 {{ end }}
 {{ end }}
-<!-- /service -->
+<!-- /focustopics -->
 
 <div style="height: 100px;"></div>
 
-<!-- Include the new services section -->
+<!-- why amperion -->
-
 {{ with site.GetPage "/why-amperion" }}
 <section class="services-section">
   <h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
@@ -188,7 +221,7 @@
 </section>
 {{ end }}
 
-
+<!-- /why amperion -->
 
 <div style="height: 100px;"></div>
 
@@ -214,14 +247,16 @@
         <div class="services-description">
           {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
         </div>
-
-        <div style="height: 20px;"></div>
       </div>
     </div>
     <div class="row">
       <div class="col-md-9 col-sm-12">
-        <div class="block">
+        <div class="text-left">
-          {{ with .content }}{{ . | markdownify }}{{ end }}
+          {{ with .content }}{{ . | markdownify }}{{ end }}</div>
+          <div class="hover-link"> 
+          {{ with .link_text }}
+            <a href="{{ "/about/" | relURL }}">{{ . }}</a>
+          {{ end }}
         </div>
       </div>
       <div class="col-md-3 col-sm-12">
@@ -236,6 +271,7 @@
 {{ end }}
 <!-- /about -->
 
+
 <div style="height: 100px;"></div>
 <!-- call to action -->
 {{ if .Params.cta.enable }}

layouts/partials/page-title.html

@@ -3,7 +3,10 @@
     <div class="row">
       <div class="col-md-12">
         <div class="block">
-          <h1>{{ .Title }}</h1>
+          <h2 class="custom-title">{{ .Title }}</h2>
+          {{ with .Params.description }}
+              <h3>{{ . }}</h3>
+          {{ end }}
         </div>
       </div>
     </div>

resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content

@@ -2713,7 +2713,7 @@ section {
 
 .service-grid {
   display: grid;
-  gap: 20px;
+  gap: 30px;
   /* 40px Abstand sowohl horizontal als auch vertikal */
   grid-template-columns: repeat(3, 1fr);
   /* => Standard: 3 Spalten für größere Bildschirme */ }
@@ -2745,7 +2745,7 @@ section {
   transition: transform 0.3s ease; }
 
 .service-item-fixed:hover .zoom-wrap {
-  transform: scale(1.2); }
+  transform: scale(1.06); }
 
 .zoom-wrap a {
   display: block;
@@ -2768,7 +2768,7 @@ section {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.4);
   /* dunkler Schleier (30% schwarz) */
   z-index: 1;
   /* Overlay unter dem Text, aber über dem Bild */
@@ -2820,6 +2820,16 @@ section {
   height: auto;
   max-width: 70%; }
 
+.custom-title {
+  color: #046e6e;
+  /* Ersetze dies mit der Farbe deiner Wahl */ }
+
+.hover-link {
+  transition: color 0.3s ease; }
+
+.hover-link:hover {
+  color: #F5A623; }
+
 html {
   scroll-behavior: smooth; }
 

resources/_gen/assets/scss/style.scss_f0dbc780e1c51d7c7ecd78ee0b7f5792.content

@@ -56,7 +56,7 @@ h4 {
   font-size: 16px; }
 
 p {
-  color: #777777;
+  color: #000777;
   font-size: 15px;
   font-family: "Open Sans Semibold", sans-serif; }
 

themes/airspace-hugo/assets/scss/style.scss

@@ -1,13 +1,13 @@
 // Color Variables
 {{ with site.Params.variables }}
-$color-primary: {{.color_primary | default "#777"}};
+$color-primary: {{.color_primary | default "#000"}};
 $color-secondary: {{.color_secondary | default "#0AA8A7"}};
-$text-color: {{.text_color | default "#777"}};
+$text-color: {{.text_color | default "#000"}};
 $text-dark: {{.text_dark | default "#222"}};
 $text-light: {{.text_light | default "#999"}};
 $body-bg: {{.body_color | default "#fff"}};
 $border-color: {{.border_color | default "#ECECEC"}};
-$black: {{.black | default "#777"}};
+$black: {{.black | default "#000"}};
 $white: {{.white | default "#fff"}};
 $light: {{.light | default "#EDF6F5"}};