Refactor button sizes and image max-width for improved responsiveness and layout consistency

Refactor logo container width and remove optional comment for social hover color
Refactor SCSS and HTML for improved layout, typography, and call-to-action sections
2025-08-09 13:16:50 +02:00 · 2025-08-09 13:16:41 +02:00 · 2025-08-09 12:38:57 +02:00
6 changed files with 284 additions and 37 deletions
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@ -6,7 +6,7 @@
 }

 .hero-title {
-  font-size: clamp(2.5rem, 4vw, 4rem);
+  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  color: #046e6e;
@ -290,7 +290,7 @@ section {
  cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */
 }

-/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
+/* dezentes Hover-Feedback */
 .service-card::after {
  content: '';
  position: absolute; inset: 0;
@ -409,6 +409,22 @@ section {
  }
 }

+.about-cta {
+  color: #046e6e; /* Türkis */
+  font-weight: 700;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.about-cta:hover,
+.about-cta:focus {
+  color: #F5A623; /* Orange */
+  border-bottom-color: #F5A623;
+}
+
+
+
 /* ========== Mehrwerte ========== */
 .mehrwerte-grid {
  display: grid;
@ -616,7 +632,7 @@ body {
 }
 #about .about-image {
  width: 100%;
-  max-width: clamp(260px, 38vw, 480px);
+  max-width: clamp(200px, 38vw, 300px);
  height: auto;
  object-fit: contain;
  margin-left: auto; /* rechtsbündig in Spalte */
@ -719,3 +735,84 @@ body {
  outline:2px dashed var(--amp-accent);
  outline-offset:4px;
 }
+
+/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
+.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-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“ */
+}
+
+.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 {
+  margin: 0;
+  color: var(--cta-primary);
+  font-weight: 700;
+  letter-spacing: .2px;
+  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
+}
+.cta__lead {
+  margin: .9rem auto 0;
+  color: #0f172a;
+  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
+  line-height: 1.55;
+  max-width: 58rem;
+}
+.cta__accent { color: var(--cta-accent); font-weight: 700; }
+
+/* Buttons – deutlich größer */
+.cta__actions {
+  display: flex; flex-wrap: wrap; justify-content: center;
+  gap: clamp(1rem, 2.4vw, 1.6rem);
+  margin-top: clamp(1.4rem, 3vw, 2.2rem);
+}
+.cta__btn {
+  display: inline-flex; align-items: center; gap: .7rem;
+  padding: var(--btn-py) var(--btn-px);
+  border-radius: 9999px;
+  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;
+  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,.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;
+  gap: clamp(.9rem, 2vw, 1.2rem);
+  margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
+}
+.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;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
+  text-decoration: none;
+}
+.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;
+}
+.cta__social-link:hover img { filter: invert(1); }
--- a/content/german/_index.md
+++ b/content/german/_index.md
@ -24,7 +24,7 @@ about:
  enable: true
  title: "ÜBER AMPERION"
  description: "Technik mit Verantwortung. Planung mit Weitblick."
-  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>"
+  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. </b> </p>"
  image: "images/ingenieurbuero.svg"

 ############################# About #################################
@ -74,6 +74,7 @@ cta:
    enable: true
    label: "Kontaktinformation"
    link: "contact/"
+  
 ############################# facts ###############################
 facts:
  enable: true
--- a/deploy.ps1
+++ b/deploy.ps1
--- a/layouts/index.html
+++ b/layouts/index.html
@ -261,18 +261,21 @@ document.addEventListener('DOMContentLoaded', function () {
    <div class="row mt-4 d-flex align-items-stretch about-row">

      <!-- Textbereich -->
-      <div class="col-md-7 col-sm-12 d-flex h-100" data-aos="fade-right" data-aos-delay="200">
+      <div class="col-md-7 col-sm-12 d-flex h-1000" data-aos="fade-right" data-aos-delay="200">
        <div class="text-left w-100 my-auto">
          {{ with .content }}{{ . | markdownify }}{{ end }}
        </div>
+          <a href="/about/" class="about-cta">MEHR ÜBER UNS</a>
      </div>

+      
      <!-- Bildbereich -->
-      <div class="col-md-5 col-sm-12 d-flex h-100" data-aos="zoom-in" data-aos-delay="300">
+      <div class="col-md-5 col-sm-12 d-flex h-10" data-aos="zoom-in" data-aos-delay="300">
        <div class="about-image-wrap">
          <img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
        </div>
      </div>
+      

    </div>
  </div>
@ -283,7 +286,48 @@ document.addEventListener('DOMContentLoaded', function () {


 <!-- CALL TO ACTION -->
+{{ $impressum := site.GetPage "page" "impressum" }}
+
 {{ if .Params.cta.enable }}
-{{ partial "cta.html" . }}
+<section id="cta" class="cta">
+  <!-- BG -->
+  <div class="cta__bg" aria-hidden="true">
+    <div class="cta__grad"></div>
+    <div class="cta__pan"></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 }}
--- a/layouts/partials/cta.html
+++ b/layouts/partials/cta.html
@ -1,27 +0,0 @@
-{{ $impressum := site.GetPage "page" "impressum" }}
-
-{{ with site.GetPage "/" }}
-{{ with .Params.cta }}
-<section class="call-to-action bg-1 section-sm overly" style="background-image: url('{{ .bg_image | relURL }}'); position: relative; background-attachment: fixed; background-size: cover;">
-  <div class="overlay-dark"></div> <!-- DAS NEUE OVERLAY --> 
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="block" style="position: relative; z-index: 1;">
-          {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
-          {{ with .content }}<p>{{ . | markdownify }}</p>{{ end }}
-          {{ with .button }}
-          {{ if .enable }}
-          <a class="btn btn-main btn-solid-border" href="mailto:{{ $impressum.Params.email }}">E-mail</a>
-        
-<br>
-          <a class="btn btn-main btn-solid-border" href="tel:{{ index $impressum.Params.telefon }}">TELEFON</a>
-          {{ end }}
-          {{ end }}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-{{ end }}
-{{ end }}
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover {
  padding: 0 1rem; }

 .hero-title {
-  font-size: clamp(2.5rem, 4vw, 4rem);
+  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  color: #046e6e;
@ -2750,7 +2750,7 @@ section {
  cursor: default;
  /* kein Hand-Cursor -> kein Link-Feeling */ }

-/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
+/* dezentes Hover-Feedback */
 .service-card::after {
  content: '';
  position: absolute;
@ -2866,6 +2866,20 @@ section {
  .hover-link:hover {
    color: #F5A623; }

+.about-cta {
+  color: #046e6e;
+  /* Türkis */
+  font-weight: 700;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease; }
+
+.about-cta:hover,
+.about-cta:focus {
+  color: #F5A623;
+  /* Orange */
+  border-bottom-color: #F5A623; }
+
 /* ========== Mehrwerte ========== */
 .mehrwerte-grid {
  display: grid;
@ -3032,7 +3046,7 @@ body {

 #about .about-image {
  width: 100%;
-  max-width: clamp(260px, 38vw, 480px);
+  max-width: clamp(200px, 38vw, 300px);
  height: auto;
  object-fit: contain;
  margin-left: auto;
@ -3133,6 +3147,124 @@ body {
  outline: 2px dashed var(--amp-accent);
  outline-offset: 4px; }

+/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
+.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-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“ */ }
+
+.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 {
+  margin: 0;
+  color: var(--cta-primary);
+  font-weight: 700;
+  letter-spacing: .2px;
+  font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
+
+.cta__lead {
+  margin: .9rem auto 0;
+  color: #0f172a;
+  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
+  line-height: 1.55;
+  max-width: 58rem; }
+
+.cta__accent {
+  color: var(--cta-accent);
+  font-weight: 700; }
+
+/* Buttons – deutlich größer */
+.cta__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: clamp(1rem, 2.4vw, 1.6rem);
+  margin-top: clamp(1.4rem, 3vw, 2.2rem); }
+
+.cta__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: .7rem;
+  padding: var(--btn-py) var(--btn-px);
+  border-radius: 9999px;
+  background: #fff;
+  color: var(--cta-primary);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  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; }
+
+/* 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); }
+
+.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;
+  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; }
+
+.cta__social-link:hover {
+  background: var(--cta-accent);
+  box-shadow: 0 6px 16px rgba(4, 110, 110, 0.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; }
+
+.cta__social-link:hover img {
+  filter: invert(1); }
+
 /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
 .logo-container {
  width: 80%;
Author	SHA1	Message	Date
astosic	0533ad4ea3	Refactor button sizes and image max-width for improved responsiveness and layout consistency	2025-08-09 13:16:50 +02:00
astosic	183ff408a9	Refactor logo container width and remove optional comment for social hover color	2025-08-09 13:16:41 +02:00
astosic	5083ef7e3c	Refactor SCSS and HTML for improved layout, typography, and call-to-action sections	2025-08-09 12:38:57 +02:00