Refactor SCSS and HTML for improved layout, typography, and call-to-action sections

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;
@@ -3133,6 +3147,156 @@ 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(2rem, 2.8vw, 3rem);
+  /* oben/unten -> Höhe */
+  --btn-px: clamp(2rem, 3.6vw, 3em);
+  /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
+  --btn-fs: clamp(2rem, 2vw, 3rem);
+  /* Schriftgröße */
+  position: relative;
+  overflow: hidden;
+  padding: clamp(6rem, 10vw, 12rem) 0;
+  /* Section höher wie „Standard-Sektion“ */
+  background: #f3f3f3; }
+
+/* Hintergrund dezent + optional animiert */
+.cta__bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0; }
+
+.cta__grad {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #fff, #f6f9f9, #fff); }
+
+@keyframes cta-pan {
+  from {
+    background-position: 0% 0%; }
+  to {
+    background-position: 200% 200%; } }
+
+.cta__pan {
+  position: absolute;
+  inset: 0;
+  opacity: .08;
+  background-size: 200% 200%;
+  background-image: radial-gradient(40% 40% at 20% 10%, rgba(4, 110, 110, 0.25), transparent 60%), radial-gradient(35% 35% at 85% 35%, rgba(245, 166, 35, 0.25), transparent 55%);
+  animation: cta-pan 24s linear infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cta__pan {
+    animation: none !important; } }
+
+.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(56px, 6.2vw, 64px);
+  height: clamp(56px, 6.2vw, 64px);
+  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); }
+
+/* Optional: Wenn du Social-Hover auch Orange willst, tausche oben var(--cta-primary) -> var(--cta-accent) */
 /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
 .logo-container {
   width: 80%;