Refactor SCSS styles in common and about templates

- Removed unused styles and nested selectors from _common.scss to streamline the code.
- Cleaned up the .about section in _about.scss by eliminating redundant styles for headings and paragraphs.
- Improved overall readability and maintainability of the SCSS files.

assets/scss/_common.scss

@@ -246,27 +246,6 @@ input[type="tel"] {
 .title {
   padding: 20px 0 30px;
 
-  h2 {
-    margin: 0;
-  }
-}
-
-.section-title {
-  margin-bottom: 20px;
-
-  @include tablet {
-    margin-bottom: 10px;
-  }
-
-  h2 {
-    margin: 0;
-    padding: 10px 0;
-  }
-
-   @media (max-width: 480px) {
-      font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
-    }
-
 }
 
  

assets/scss/_typography.scss

@@ -46,7 +46,7 @@ h2 {
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
-  margin-bottom: 1rem;
+  margin-bottom: 5rem; // Erhöht den Abstand nach h2
   color: #222;
 }
 

assets/scss/custom.scss

@@ -6,8 +6,8 @@
 }
 
 .hero-title {
-  font-size: clamp(2.5rem, 4vw, 6rem); // skaliert stark bei kleinen Screens
+  font-size: clamp(2.5rem, 4vw, 4rem); // skaliert stark bei kleinen Screens
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.2;
   color: #046e6e;
   word-break: normal;
@@ -81,16 +81,37 @@ section {
 
 .gif-background {
   background-image: url('/images/BackgroundAnimation.svg');
-  background-size: cover;
-  background-position: center 50%;
   background-repeat: no-repeat;
   position: relative;
 
+  // Desktop
+  background-size: cover;
+  background-position: center 50%;
+  
+  // Tablet
+  @media (max-width: 991px) {
+    background-size: 120% auto;
+    background-position: center 40%;
+  }
+  
+  // Mobile
+  @media (max-width: 575px) {
+    background-size: 180% auto;
+    background-position: center 50%;
+  }
+
   &::after {
     content: '';
     position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
+    top: 0; 
+    left: 0; 
+    right: 0; 
+    bottom: 0;
     background-color: rgba(255, 255, 255, 0.8);
+    
+    @media (max-width: 575px) {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
   }
 }
 
@@ -423,3 +444,5 @@ section {
     font-size: 1.35rem;
   }
 }
+
+

assets/scss/style.scss

@@ -1,24 +1,27 @@
 // Color Variables
-$color-primary: #fff;
+{{ with site.Params.variables }}
-$color-secondary: #0AA8A7;
+$color-primary: {{.color_primary | default "#fff"}};
-$text-color: #fff;
+$color-secondary: {{.color_secondary | default "#0AA8A7"}};
-$text-dark: #222;
+$text-color: {{.text_color | default "#fff"}};
-$text-light: #737373;
+$text-dark: {{.text_dark | default "#222"}};
-$body-bg: #fff;
+$text-light: {{.text_light | default "#737373"}};
-$border-color: #ECECEC;
+$body-bg: {{.body_color | default "#fff"}};
-$black: #000;
+$border-color: {{.border_color | default "#ECECEC"}};
-$white: #fff;
+$black: {{.black | default "#000"}};
-$light: #EDF6F5;
+$white: {{.white | default "#fff"}};
+$light: {{.light | default "#EDF6F5"}};
+
 
 // Font Variables
-$font-size: 16px;
+$font-size: {{.font_size | default "16px"}};
-$font-scale: 1.25;
+$font-scale: {{.font_scale | default "1.25"}};
-$font-primary: 'Lato', sans-serif;
+$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
-$font-secondary: 'Lato', sans-serif;
+$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
-$font-tertiary: 'Dosis', sans-serif;
+$font-tertiary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_tertiary | default "Dosis") "+" " "}}', {{.font_tertiary_type | default "sans-serif"}};
-$font-quaternary: 'Edu', sans-serif;
+$font-quaternary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_quaternary | default "Edu") "+" " "}}', {{.font_quaternary_type | default "sans-serif"}};
 
-$font-icon: 'Font Awesome 5 Free';
+$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
+{{ end }}
 
 $h1: 80px;
 $h1-md: 34px;

assets/scss/templates/_about.scss

@@ -20,7 +20,6 @@ h2 {
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
-  margin-bottom: 1rem;
   color: #222;
 }
 
@@ -73,9 +72,4 @@ p {
       opacity: 0;
     }
   }
-  
-
-  .section-title {
-    margin-bottom: 0px;
-  }
 }

assets/scss/templates/_service.scss

@@ -109,10 +109,6 @@
   }
 }
 
-h2, h3 {
-  margin-bottom: 10px; /* Passe den Wert nach Bedarf an */
-}
-
 .center-container {
   display: flex;
   flex-direction: column;

content/german/_index.md

@@ -24,7 +24,7 @@ about:
   enable: true
   title: "ÜBER AMPERION"
   description: "Technik mit Verantwortung. Planung mit Weitblick."
-  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. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
+  content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich.  <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><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><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. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
   image: "images/ingenieurbuero.webp"
 
  ############################# About #################################

content/german/about.md

@@ -8,7 +8,6 @@ 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>
 
     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> 

layouts/index.html

@@ -19,7 +19,7 @@
       </div>
 
       <!-- *Haupttitel + Button* -->
-      <div class="hero-section">
+      <div class="hero-section" style="margin-top: 10rem;">
         {{ with .title }}
         <h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
         {{ end }}
@@ -144,7 +144,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
 <!-- DARUM AMPERION – kompakt & detailliert -->
-<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 5rem; padding: 3rem 0;">
+<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
   <div class="container my-container">
 
     <!-- Titelblock -->
@@ -212,12 +212,12 @@ document.addEventListener('DOMContentLoaded', function () {
 <!-- ÜBER AMPERION -->
 {{ with .Params.about }}
 {{ if .enable }}
-<section id="about" class="about section" style="margin-top: 5rem; padding: 3rem 0;">
+<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;">
   <div class="container">
     <div class="row">
       <div class="col-12 text-center">
         <h1>Über AMPERION</h1>
-        {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
+        {{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
       </div>
     </div>
     <div class="row mt-4">

layouts/partials/page-title.html

@@ -15,6 +15,8 @@
 
 <style>
 
+
+
 .fade-in {
   animation: fadeInUp 1s ease-out
 }

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

@@ -250,35 +250,8 @@ input[type="tel"] {
 
 .title {
   padding: 20px 0 30px;
-
-  h2 {
-    font-size: 18px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
 }
 
-.section-title {
-  margin-bottom: 70px;
-
-  @include tablet {
-    margin-bottom: 20px;
-  }
-
-  h2 {
-    text-transform: uppercase;
-    font-weight: 600;
-    margin: 0px;
-    padding: 30px 0px;
-  }
-
-  p {
-    font-style: italic;
-    color: darken( $light, 57.64);
-    font-family: $font-secondary;
-  }
-}
 
 
 .section-subtitle {
@@ -303,13 +276,6 @@ input[type="tel"] {
   .block {
     text-align: center;
 
-    h1 {
-      color: $white;
-      font-weight: 200;
-      letter-spacing: 0.15em;
-      margin-top: 0;
-      text-transform: capitalize;
-    }
 
     p {
       color: $white;
@@ -321,20 +287,6 @@ input[type="tel"] {
 .heading {
   padding-bottom: 60px;
   text-align: center;
-
-  h2 {
-    color: $black;
-    font-size: 30px;
-    line-height: 40px;
-    font-weight: 400;
-  }
-
-  p {
-    font-size: 18px;
-    line-height: 40px;
-    color: lighten( $black, 16.078);
-    font-weight: 300;
-  }
 }
 
 

themes/airspace-hugo/assets/scss/templates/_about.scss

@@ -1,26 +1,5 @@
 .about{
-  .block{
-    h2 {
-      padding-top: 30px;
-      padding-bottom: 30px;
-      margin:0;
-    }
 
-    h3 {
-      padding-top: 30px;
-      padding-bottom: 30px;
-      margin:0;
-    }
-
-    p {
-      padding-top: 0px;
-      line-height:28px;
-    }
-
-    img {
-      width: 100%;
-    }
-  }
 
   .about-img {
     overflow:hidden;
@@ -35,7 +14,4 @@
     }
   }
 
-  .section-title {
-    margin-bottom: 0px;
-  }
 }