Enhance hero section styles and add FAQ page layout

assets/scss/_common.scss

@@ -612,7 +612,7 @@ span.cloaked-e-mail:before {
       float: none;
   }
 }
-/* copy from here */
+/* Maus und Mausrad*/
 .scrolldown {
   --sizeX: 30px;
   --sizeY: 50px;

assets/scss/custom.scss

@@ -1,8 +1,20 @@
 /* ========== Typografie & Basis ========== */
-.title-custom {
-  color: #046e6e;
+.hero-section {
+  width: 100%;
+  text-align: center;
+  padding: 0 1rem;
 }
 
+.hero-title {
+  font-size: clamp(2.5rem, 4vw, 6rem); // skaliert stark bei kleinen Screens
+  font-weight: 600;
+  line-height: 1.2;
+  color: #046e6e;
+  word-break: normal;
+  hyphens: none;
+}
+
+
 .text-center {
   text-align: center;
 }
@@ -82,6 +94,8 @@ section {
   }
 }
 
+
+
 /* ========== Service-Layout (Kacheln / Pfeile) ========== */
 
 .service-arrow .block {

content/german/_index.md

@@ -8,7 +8,7 @@ banner:
   logo_image1: "images/amperion_logo_color.png"  # Neuer Eintrag für das Logo
   logo_image2: "images/amperion_letters_color.webp"  # Neuer Eintrag für das Logo
   logo_image3: "images/"  # Neuer Eintrag für das Logo
-  title: "Ingenieur­büro und Elektro­technik­betrieb"
+  title: "INGENIEURBÜRO UND ELEKTROTECHNIKBETRIEB"
   content: "Wir entwickeln Energielösungen für die Zukunft"
   button:
     enable: true

faq.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+
+{{ partial "page-title.html" . }}
+
+<section class="page-wrapper">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4 sticky-top">
+        <h2>{{ .Title }}</h2>
+        {{ with .Params.subtitle }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
+        <p>{{ i18n "last_update" }}: {{ time.Format ":date_long" .Lastmod }}</p>
+        <h3>{{ i18n "faq_toc_title" }}</h3>
+        {{ .TableOfContents }}
+      </div>
+      <div class="col-md-8">
+        {{ .Content }}
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ end }}

layouts/index.html

@@ -19,11 +19,10 @@
       </div>
 
       <!-- *Haupttitel + Button* -->
-      <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box;">
+      <div class="hero-section">
         {{ with .title }}
-        <h1 class="title-custom title-custom-margin fade-in-title">{{ . | markdownify }}</h1>
+        <h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
         {{ end }}
-
         {{ with .button }}
         {{ if .enable }}
         <div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
@@ -76,7 +75,10 @@ document.addEventListener('DOMContentLoaded', function () {
       isScrolling = true;
       scrollTriggered = true;
       scrollToTarget();
-      setTimeout(() => isScrolling = false, 1000);
+      setTimeout(() => {
+        isScrolling = false;
+        scrollTriggered = false; // Reset scrollTriggered to prevent further jumps
+      }, 1000);
     }
   }, { passive: true });
 

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

@@ -502,7 +502,7 @@ span.cloaked-e-mail:before {
     display: table-cell;
     float: none; } }
 
-/* copy from here */
+/* Maus und Mausrad*/
 .scrolldown {
   --sizeX: 30px;
   --sizeY: 50px;
@@ -2525,8 +2525,18 @@ h2, h3 {
     font-weight: 600; }
 
 /* ========== Typografie & Basis ========== */
-.title-custom {
-  color: #046e6e; }
+.hero-section {
+  width: 100%;
+  text-align: center;
+  padding: 0 1rem; }
+
+.hero-title {
+  font-size: clamp(2.5rem, 4vw, 6rem);
+  font-weight: 600;
+  line-height: 1.2;
+  color: #046e6e;
+  word-break: normal;
+  hyphens: none; }
 
 .text-center {
   text-align: center; }