From e77017c70a0e80bf0836201fa1c48331e7c56c37 Mon Sep 17 00:00:00 2001
From: astosic <alexander.stosic@amperion.at>
Date: Thu, 14 Aug 2025 22:28:22 +0200
Subject: [PATCH] SEO Optimierung + Leistungsscroll

---
 assets/scss/_typography.scss                  |  16 +-
 content/german/impressum.md                   |   2 +-
 content/german/karriere.md                    |   6 +-
 layouts/_default/about.html                   |  30 +--
 layouts/_default/contact.html                 |  37 ++--
 layouts/_default/datenschutz.html             |   6 -
 layouts/_default/impressum.html               |   6 -
 layouts/_default/karriere.html                |  18 +-
 layouts/_default/leistung.html                | 200 ++++++++++--------
 layouts/_default/render-image.html            |   8 +
 layouts/index.html                            |  28 +--
 layouts/partials/head.html                    |   2 +
 layouts/partials/page-title.html              |   2 +-
 layouts/partials/section-grid.html            |   6 +-
 layouts/partials/seo.html                     |  39 ++++
 ...s_d9077b5cab49df084fb1a39ad4b1e75d.content |  13 +-
 static/robots.txt                             |   5 +
 17 files changed, 259 insertions(+), 165 deletions(-)
 create mode 100644 layouts/_default/render-image.html
 create mode 100644 layouts/partials/seo.html
 create mode 100644 static/robots.txt

diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss
index bca4dea..bc00e32 100644
--- a/assets/scss/_typography.scss
+++ b/assets/scss/_typography.scss
@@ -31,7 +31,7 @@ h1 {
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
-  color: #046e6e;
+  color: black //#046e6e;
 }
 
 h1.page-title {
@@ -42,16 +42,23 @@ h1.page-title {
 
 
 h2 {
+  font-size: clamp(2.5rem, 5vw, 4rem); // ~32px auf Desktop
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  color: #046e6e;
+}
+
+h3 {
   font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
   margin-bottom: 5rem; // Erhöht den Abstand nach h2
-  color: #222;
+  color:black;
 }
 
-
-h3 {
+h4 {
   font-size: clamp(1.8rem, 1.8vw, 2rem);
   font-weight: normal;
   line-height: 1.6;
@@ -60,6 +67,7 @@ h3 {
   color: #F5A623;
 }
 
+
 p {
   font-style: normal;
   font-size: clamp(1.5rem, 1.5vw, 1.8rem);
diff --git a/content/german/impressum.md b/content/german/impressum.md
index 84932bf..9158b52 100644
--- a/content/german/impressum.md
+++ b/content/german/impressum.md
@@ -32,7 +32,7 @@ contents:
   - |
     FN 622219 d
   - |
-    Markus Wimmer BSc. & Ing. Alexander Stosic MSc.
+    Markus Wimmer BSc. & Ing. Alexander Stosic, MSc
   - |
     -- Ingenieurbüros (Beratende Ingenieure) auf dem Fachgebiet Urbane Erneuerbare Energietechnologien  
     -- Elektrotechnik unter Ausschluss der Errichtung von Alarmanlagen
diff --git a/content/german/karriere.md b/content/german/karriere.md
index 662dc50..c1df526 100644
--- a/content/german/karriere.md
+++ b/content/german/karriere.md
@@ -7,10 +7,6 @@ og_image: "/images/karriere/karriere_hero.webp"
 date: 2025-01-01
 draft: false
 
-menu:
-  main:
-    name: "Karriere"
-    weight: 50
 
 hero:
   title: "Karriere bei AMPERION"
@@ -38,6 +34,6 @@ cta:
   enable: true
 cta_text: "Gestalte die Energiewende mit uns."
 cta_label: "Jetzt bewerben"
-cta_href: "/kontakt/"
+cta_href: "/contact/"
 
 ---
\ No newline at end of file
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 70cbd67..ff73f18 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -5,7 +5,7 @@
 {{ with .Params.intro_section }}
 {{ if .enable }}
 <section id="about-intro" class="section" style="background-color:#ffffff; margin-top:-24px; padding-top:16px;">
-  <h2>Ihr Partner für nachhaltige Energielösungen</h2>
+  <h3>Ihr Partner für nachhaltige Energielösungen</h3>
   <div class="my-container">
     <div class="row align-items-center gx-5 gy-4">
 
@@ -77,8 +77,8 @@ document.addEventListener("DOMContentLoaded", () => {
       <div>
         <!-- Headings -->
         <div class="text-center mb-3">
-          <h1>Mission · Vision · Ziel</h1>
-          <h2>Die Grundpfeiler unserer Arbeit.</h2>
+          <h2>Mission · Vision · Ziel</h2>
+          <h3>Die Grundpfeiler unserer Arbeit.</h3>
         </div>
 
         <div class="mission-tabs-wrapper">
@@ -127,8 +127,8 @@ document.addEventListener("DOMContentLoaded", () => {
   <div class="my-container">
     <div class="row">
       <div class="text-center" data-aos="fade-up" data-aos-delay="50">
-        <h1>Was uns auszeichnet</h1>
-        <h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2>
+        <h2>Was uns auszeichnet</h2>
+        <h3><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h3>
       </div>
     </div>
 
@@ -143,7 +143,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
         <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
-        <h3 class="service-card-title">Staatlich geprüft & konessioniert</h3>
+        <h4 class="service-card-title">Staatlich geprüft & konessioniert</h4>
         <p class="service-card-description">
           <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
         </p>
@@ -151,7 +151,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
         <img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
-        <h3 class="service-card-title">Erfahrung &amp; Innovation</h3>
+        <h4 class="service-card-title">Erfahrung &amp; Innovation</h4>
         <p class="service-card-description">
           <strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
         </p>
@@ -159,7 +159,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
         <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
-        <h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
+        <h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
         <p class="service-card-description">
           <strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
         </p>
@@ -167,7 +167,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
         <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
-        <h3 class="service-card-title">Unabhängige Beratung</h3>
+        <h4 class="service-card-title">Unabhängige Beratung</h4>
         <p class="service-card-description">
           <strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
         </p>
@@ -186,7 +186,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     <!-- Header -->
     <div class="text-center mb-5" data-aos="fade-up">
-      <h1>Das AMPERION Gründerteam</h1>
+      <h2>Das AMPERION Gründerteam</h2>
 
     <div class="row gx-5 gy-5 align-items-center">
 
@@ -194,7 +194,7 @@ document.addEventListener("DOMContentLoaded", () => {
       <div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
         <div class="founder-card">
           {{ with .left_person }}
-            <h4 class="founder-name">{{ .name | markdownify }}</h4>
+            <h5 class="founder-name">{{ .name | markdownify }}</h5>
             <div class="founder-description">
               {{ .description | $.Page.RenderString (dict "display" "block") }}
             </div>
@@ -215,7 +215,7 @@ document.addEventListener("DOMContentLoaded", () => {
       <div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
         <div class="founder-card">
           {{ with .right_person }}
-            <h4 class="founder-name">{{ .name | markdownify }}</h4>
+            <h5 class="founder-name">{{ .name | markdownify }}</h5>
             <div class="founder-description">
               {{ .description | $.Page.RenderString (dict "display" "block") }}
             </div>
@@ -237,10 +237,10 @@ document.addEventListener("DOMContentLoaded", () => {
   <div class="cta__bg" aria-hidden="true">
     <div class="cta__grid"></div>
     <div class="cta__energy-lines">
-      <div class="energy-line-h energy-line-h1"></div>
       <div class="energy-line-h energy-line-h2"></div>
       <div class="energy-line-h energy-line-h3"></div>
       <div class="energy-line-h energy-line-h4"></div>
+      <div class="energy-line-h energy-line-h5"></div>
       <div class="energy-line-v energy-line-v1"></div>
       <div class="energy-line-v energy-line-v2"></div>
       <div class="energy-line-v energy-line-v3"></div>
@@ -258,9 +258,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
   <div class="my-container">
     <div class="cta__wrap">
-      <h2 class="cta__title">
+      <h3 class="cta__title">
         Mehr Energie - Mit UNS!
-      </h2>
+      </h3>
       <p class="cta__lead">
         Ihr Weg zu nachhaltiger Energie beginnt hier. 
         <span class="cta__accent">Lassen Sie uns starten!</span>
diff --git a/layouts/_default/contact.html b/layouts/_default/contact.html
index 8d30698..6d6c002 100644
--- a/layouts/_default/contact.html
+++ b/layouts/_default/contact.html
@@ -12,16 +12,17 @@
       (and $impressum $impressum.Params.email)
       (or site.Params.contact.email site.Params.email) }}
 
+  {{/* phone1: deckt sowohl phone als auch phone1 ab (alt & neu) */}}
   {{ $phone1 := or
       (and $impressum $impressum.Params.telefon)
-      (or site.Params.contact.phone1 site.Params.phone1) }}
+      (or site.Params.contact.phone site.Params.contact.phone1 site.Params.phone site.Params.phone1) }}
 
   {{ $phone2 := or
       (and $impressum $impressum.Params.telefon2)
       (or site.Params.contact.phone2 site.Params.phone2) }}
 
   <style>
-    /* Nur Hilfsstyles – keine Typo-Overrides */
+    /* Nur Layout-/Hilfsstyles – keine Typo-Overrides */
     .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
     .contact-wrap{padding:56px 0}
     .card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
@@ -32,7 +33,7 @@
     .info-item{display:flex;gap:.75rem;align-items:flex-start}
     .info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}
 
-    /* CTA-Buttons & Socials: wir nutzen eure Klassen, nur Layout-Hooks */
+    /* CTA-Buttons & Socials: nutzt eure bestehenden Klassen – nur Layout-Hooks */
     .cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
     .cta__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
     .cta__social-link{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.06)}
@@ -51,12 +52,12 @@
     .form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
     .form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
     .card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */
-
   </style>
 
   <section class="contact-wrap">
     <div class="container">
       <div class="row g-4">
+
         <!-- ===== Kontakt-Infos ===== -->
         <div class="col-lg-5" data-reveal>
           <div class="card card-pad stack-lg">
@@ -111,9 +112,14 @@
             method="POST"
             class="card card-pad stack"
             {{ if .use_netlify }}
-              name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}"
+              name="{{ $formName }}"
+              netlify
+              data-netlify="true"
+              netlify-honeypot="nhp"
+              action='{{ "/message_sent/" | relLangURL }}'
             {{ else }}
-              name="contact" action="{{ .action | safeURL }}"
+              name="contact"
+              action="{{ .action | safeURL }}"
             {{ end }}
           >
             {{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}
@@ -121,7 +127,7 @@
             <div class="form-grid">
               <div class="form-group">
                 <label for="name" class="visually-hidden">Name</label>
-                <input id="name" name="name" type="text" class="form-control" placeholder="Name" required>
+                <input id="name" name="name" type="text" autocomplete="name" class="form-control" placeholder="Name" required>
               </div>
               <div class="form-group">
                 <label for="email" class="visually-hidden">E-Mail</label>
@@ -129,11 +135,11 @@
               </div>
               <div class="form-group">
                 <label for="company" class="visually-hidden">Unternehmen</label>
-                <input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)">
+                <input id="company" name="company" type="text" autocomplete="organization" class="form-control" placeholder="Unternehmen (optional)">
               </div>
               <div class="form-group">
                 <label for="phone" class="visually-hidden">Telefon</label>
-                <input id="phone" name="phone" type="tel" class="form-control" placeholder="Telefon (optional)">
+                <input id="phone" name="phone" type="tel" autocomplete="tel" class="form-control" placeholder="Telefon (optional)">
               </div>
               <div class="form-group full">
                 <label for="subject" class="visually-hidden">Betreff</label>
@@ -153,19 +159,21 @@
 
               {{ if .use_recaptcha }}
               <input type="hidden" id="captchaResponse" name="g-recaptcha-response">
+              <div data-netlify-recaptcha="true"></div>
               {{ end }}
             </div>
 
             <p class="form-legal">
-                <input type="checkbox" required>
+              <label for="legal-consent">
+                <input id="legal-consent" name="legal_consented" type="checkbox" required>
                 Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
+              </label>
             </p>
 
             <div>
               <button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
                 <span aria-hidden="true">➜</span><span>Nachricht senden</span>
               </button>
-
             </div>
           </form>
           {{ end }}{{ end }}
@@ -181,7 +189,12 @@
       var els = document.querySelectorAll("[data-reveal]");
       if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
       var io = new IntersectionObserver(function(entries){
-        entries.forEach(function(entry){ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); }});
+        entries.forEach(function(entry){
+          if(entry.isIntersecting){
+            entry.target.classList.add('is-visible');
+            io.unobserve(entry.target);
+          }
+        });
       }, {threshold:.12});
       els.forEach(e=>io.observe(e));
     })();
diff --git a/layouts/_default/datenschutz.html b/layouts/_default/datenschutz.html
index 51ce99e..810f34c 100644
--- a/layouts/_default/datenschutz.html
+++ b/layouts/_default/datenschutz.html
@@ -19,10 +19,4 @@
   </div>
 </section>
 
-<!-- Call to action -->
-{{ if .Params.cta.enable }}
-{{ partial "cta.html" . }}
-{{ end }}
-<!-- /Call to action -->
-
 {{ end }}
diff --git a/layouts/_default/impressum.html b/layouts/_default/impressum.html
index 8847186..db0609a 100644
--- a/layouts/_default/impressum.html
+++ b/layouts/_default/impressum.html
@@ -25,10 +25,4 @@
   </div>
 </section>
 
-<!-- Call to action -->
-{{ if .Params.cta.enable }}
-{{ partial "cta.html" . }}
-{{ end }}
-<!-- /Call to action -->
-
 {{ end }}
diff --git a/layouts/_default/karriere.html b/layouts/_default/karriere.html
index c31109f..f3505b7 100644
--- a/layouts/_default/karriere.html
+++ b/layouts/_default/karriere.html
@@ -39,13 +39,13 @@
   <div class="container-wide">
     <div class="row align-items-center gx-5 gy-4">
       <div class="col-lg-7" data-reveal>
-        <h2>
+        <h3>
           {{ if $h }}
             {{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }}
           {{ else }}
             Karriere bei {{ .Site.Title }}
           {{ end }}
-        </h2>
+        </h3>
         {{ with $h }}{{ with .lead }}
           <div class="hero-lead">{{ . | markdownify }}</div>
         {{ end }}{{ end }}
@@ -66,7 +66,7 @@
 {{ with .Params.values }}
 <section class="section band">
   <div class="container-wide">
-    <h2 class="mb-3">Unsere Werte</h2>
+    <h3 class="mb-3">Unsere Werte</h3>
     <div class="row g-4">
       {{ range $i, $v := . }}
       <div class="col-md-4" data-reveal>
@@ -84,7 +84,7 @@
               <svg viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="currentColor" opacity=".14"/><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
             {{ end }}
           </div>
-          <h3 class="value-title">{{ $v.title }}</h3>
+          <h4 class="value-title">{{ $v.title }}</h4>
           <p class="value-text">{{ $v.text }}</p>
         </article>
       </div>
@@ -97,7 +97,7 @@
 <!-- ========= WAS WIR BIETEN ========= -->
 <section class="section">
   <div class="container-wide">
-    <h2 class="mb-3">Was wir bieten</h2>
+    <h3 class="mb-3">Was wir bieten</h3>
     <div class="row g-4">
       <div class="col-md-6" data-reveal>
         <ul class="val-list">
@@ -131,8 +131,8 @@
   <div class="cta__bg" aria-hidden="true">
     <div class="cta__grid"></div>
     <div class="cta__energy-lines">
-      <div class="energy-line-h energy-line-h1"></div>
       <div class="energy-line-h energy-line-h2"></div>
+      <div class="energy-line-h energy-line-h3"></div>
       <div class="energy-line-v energy-line-v1"></div>
       <div class="energy-line-v energy-line-v2"></div>
       <div class="energy-node energy-node1"></div>
@@ -144,16 +144,16 @@
 
   <div class="my-container">
     <div class="cta__wrap" data-reveal>
-      <h2 class="cta__title">
+      <h3 class="cta__title">
         {{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }}
-      </h2>
+      </h3>
       {{ with .Params.subtitle }}<p class="cta__lead">{{ . }}</p>{{ else }}
       <p class="cta__lead">Wir freuen uns über deine Initiativbewerbung!</p>
       {{ end }}
 
       <div class="cta__actions">
         {{ with .Params.cta_label }}
-          <a class="cta__btn" href="{{ ($.Params.cta_href | default "/kontakt/") | relURL }}">
+          <a class="cta__btn" href="{{ ($.Params.cta_href | default "/contact/") | relURL }}">
             <span aria-hidden="true">⚡</span><span>{{ . }}</span>
           </a>
         {{ end }}
diff --git a/layouts/_default/leistung.html b/layouts/_default/leistung.html
index a1812a6..36bbfeb 100644
--- a/layouts/_default/leistung.html
+++ b/layouts/_default/leistung.html
@@ -126,108 +126,136 @@
      Quelle: .Params.features (array of {title, text, icon?})
 ========================= -->
 {{ with .Params.features }}
-<section class="service-ticker section"  aria-label="Leistungen" style="background-color: #f8f9fa;">
+<section class="section service-features" aria-label="Leistungen">
   <style>
-    .service-ticker{padding-top:24px;padding-bottom:24px}
-    .service-ticker h2{margin:0 0 12px 0}
-
-    .ticker-viewport{position:relative;overflow:hidden;background: #f8f9fa;}
-    .ticker-viewport:before,.ticker-viewport:after{
-      content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:2
+    /* ===== Scroll-Snap Carousel – local styles ===== */
+    .sf-wrap{--gap:16px;--card-w:86vw}
+    @media (min-width:640px){.sf-wrap{--card-w:68vw}}
+    @media (min-width:992px){.sf-wrap{--card-w:420px}}
+    .sf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
+    .sf-title-h{margin:0}
+    .sf-controls{display:flex;gap:8px}
+    .sf-btn{
+      appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;
+      width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
+      font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:box-shadow .2s,transform .04s
     }
-    .ticker-viewport:before{left:0;background:linear-gradient(to right,#fff 40%,rgba(255,255,255,0))}
-    .ticker-viewport:after{right:0;background:linear-gradient(to left,#fff 40%,rgba(255,255,255,0))}
-
-    .ticker-track{
-      display:flex;gap:24px;align-items:center;width:max-content;
-      animation:marquee var(--dur,30s) linear infinite;
+    .sf-btn:hover{box-shadow:0 10px 24px rgba(245,166,35,.25);background:#FDF7EC}
+    .sf-btn:active{transform:translateY(1px)}
+    .sf-viewport{
+      overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
+      border-radius:14px;scrollbar-width:thin
     }
-    .ticker-viewport:hover .ticker-track{animation-play-state:running}
-    @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
-    @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
-
-    /* === Card-Ticks === */
-    .tick{
-      display:flex;align-items:center;gap:16px;
-      padding:14px 16px;border-radius:14px;background:#fff;
-      box-shadow:0 2px 14px rgba(0,0,0,.06);
-      flex:0 0 auto;          /* nicht schrumpfen */
-      width:clamp(280px,36vw,420px);  /* feste Kartenbreite für sauberes Scrolling */
+    .sf-viewport:focus-visible{outline:2px dashed #F5A623;outline-offset:4px}
+    .sf-track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-w);gap:var(--gap);padding:2px 2px 10px}
+    .sf-card{
+      scroll-snap-align:start;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;
+      box-shadow:0 6px 22px rgba(0,0,0,.06);padding:16px;display:flex;gap:14px;align-items:flex-start
     }
-    .tick-icon{
-      color:#F5A623;background:rgba(245,166,35,.12);
-      width:44px;height:44px;border-radius:12px;
-      display:flex;align-items:center;justify-content:center;flex:0 0 44px
+    .sf-ico{
+      flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
+      color:#F5A623;background:rgba(245,166,35,.12)
     }
-    .tick-icon svg{width:22px;height:22px;display:block}
-
-    .tick-text{display:flex;flex-direction:column;gap:2px;white-space:normal}
-    .tick-title{font-weight:700;font-size:inherit;line-height:1.3;margin:0}
-    .tick-desc{margin:0;opacity:.88}
+    .sf-ico svg{width:22px;height:22px;display:block}
+    .sf-body{display:flex;flex-direction:column;gap:4px}
+    .sf-card h3{margin:0;font-weight:700;line-height:1.3}
+    .sf-card p{margin:0;opacity:.9}
+    /* dezente Scrollbar */
+    .sf-viewport::-webkit-scrollbar{height:8px}
+    .sf-viewport::-webkit-scrollbar-track{background:transparent}
+    .sf-viewport::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:8px}
+    /* Drag cursor */
+    .sf-viewport.is-drag{cursor:grabbing;cursor:-webkit-grabbing}
   </style>
 
   <div class="container-wide">
-    <h2 class data-reveal>Leistungen</h2>
-  </div>
+    <div class="sf-wrap">
+      <div class="sf-head">
+        <h2 class="h3 sf-title-h">Leistungen</h2>
+        <div class="sf-controls" aria-label="Carousel-Steuerung">
+          <button class="sf-btn" data-dir="-1" type="button" aria-label="Zurück">‹</button>
+          <button class="sf-btn" data-dir="1"  type="button" aria-label="Weiter">›</button>
+        </div>
+      </div>
 
-  <div class="ticker-viewport">
-    <div class="ticker-track" style="--dur: {{ mul (len .) 15 }}s">
+      {{/* Daten vorbereiten */}}
       {{ $list := . }}
+      {{ $total := len $list }}
 
-      {{/* ===== 1. Durchlauf ===== */}}
-      {{ range $i, $f := $list }}
-      <div class="tick">
-        <span class="tick-icon" aria-hidden="true">
-          {{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
-          {{ if or (eq $icon "pv") (eq $icon "i-0") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M3 9h18v6H3z" fill="currentColor" opacity=".18"/><path d="M3 9h18v6H3M7 9v6M11 9v6M15 9v6M19 9v6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
-            <svg viewBox="0 0 24 24" role="img"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="10" width="2" height="4" fill="currentColor"/></svg>
-          {{ else if or (eq $icon "lade") (eq $icon "i-2") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M9 7v4a4 4 0 0 0 4 4h2v4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M14 3v4M10 3v4M17 7h2a2 2 0 0 1 2 2v2h-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else if or (eq $icon "study") (eq $icon "i-3") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" fill="currentColor" opacity=".14"/><path d="M14 3v6h6M9 14l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+      <div class="sf-viewport" id="sf-viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Leistungen Carousel">
+        <div class="sf-track" id="sf-track">
+          {{ range $i, $f := $list }}
+          <article class="sf-card" role="group" aria-roledescription="slide" aria-label='{{ printf "%d von %d" (add $i 1) $total }}'>
+            <div class="sf-ico" aria-hidden="true">
+              {{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
+              {{ if or (eq $icon "pv") (eq $icon "i-0") }}
+                <!-- PV -->
+                <svg viewBox="0 0 24 24"><path d="M3 9h18v6H3z" fill="currentColor" opacity=".18"/><path d="M3 9h18v6H3M7 9v6M11 9v6M15 9v6M19 9v6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+              {{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
+                <!-- Battery -->
+                <svg viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="10" width="2" height="4" fill="currentColor"/></svg>
+              {{ else if or (eq $icon "lade") (eq $icon "i-2") }}
+                <!-- EV -->
+                <svg viewBox="0 0 24 24"><path d="M9 7v4a4 4 0 0 0 4 4h2v4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M14 3v4M10 3v4M17 7h2a2 2 0 0 1 2 2v2h-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+              {{ else if or (eq $icon "study") (eq $icon "i-3") }}
+                <!-- Study -->
+                <svg viewBox="0 0 24 24"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+              {{ else }}
+                <!-- Doc/Check -->
+                <svg viewBox="0 0 24 24"><path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" fill="currentColor" opacity=".14"/><path d="M14 3v6h6M9 14l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+              {{ end }}
+            </div>
+            <div class="sf-body">
+              <h3 class="h5">{{ $f.title }}</h3>
+              {{ with $f.text }}<p>{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
+            </div>
+          </article>
           {{ end }}
-        </span>
-        <div class="tick-text">
-          <h3 class="tick-title">{{ $f.title }}</h3>
-          {{ with $f.text }}<p class="tick-desc">{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
         </div>
       </div>
-      {{ end }}
-
-      {{/* ===== 2. Durchlauf (Duplikat) ===== */}}
-      {{ range $i, $f := $list }}
-      <div class="tick">
-        <span class="tick-icon" aria-hidden="true">
-          {{ $icon := $f.icon | default (printf "i-%d" (mod $i 5)) }}
-          {{ if or (eq $icon "pv") (eq $icon "i-0") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M3 9h18v6H3z" fill="currentColor" opacity=".18"/><path d="M3 9h18v6H3M7 9v6M11 9v6M15 9v6M19 9v6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else if or (eq $icon "speicher") (eq $icon "i-1") }}
-            <svg viewBox="0 0 24 24" role="img"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="10" width="2" height="4" fill="currentColor"/></svg>
-          {{ else if or (eq $icon "lade") (eq $icon "i-2") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M9 7v4a4 4 0 0 0 4 4h2v4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M14 3v4M10 3v4M17 7h2a2 2 0 0 1 2 2v2h-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else if or (eq $icon "study") (eq $icon "i-3") }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M4 18V6m4 12V9m4 9v-6m4 6v-8m4 8V8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ else }}
-            <svg viewBox="0 0 24 24" role="img"><path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" fill="currentColor" opacity=".14"/><path d="M14 3v6h6M9 14l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
-          {{ end }}
-        </span>
-        <div class="tick-text">
-          <h3 class="tick-title">{{ $f.title }}</h3>
-           {{ with $f.text }}<p class="tick-desc">{{ . | $.Page.RenderString (dict "display" "inline") }}</p>{{ end }}
-        </div>
-      </div>
-      {{ end }}
-
     </div>
   </div>
+
+  <script>
+    (function(){
+      var wrap = document.querySelector('.service-features .sf-wrap');
+      if(!wrap) return;
+      var viewport = wrap.querySelector('.sf-viewport');
+      var track    = wrap.querySelector('.sf-track');
+      var btns     = wrap.querySelectorAll('.sf-btn');
+
+      function cardStep(){
+        var gap = parseFloat(getComputedStyle(track).gap) || 16;
+        var card = track.querySelector('.sf-card');
+        return card ? card.getBoundingClientRect().width + gap : 320;
+      }
+
+      btns.forEach(function(b){
+        b.addEventListener('click', function(){
+          var dir = this.getAttribute('data-dir') === '1' ? 1 : -1;
+          viewport.scrollBy({left: cardStep() * dir, behavior: 'smooth'});
+        });
+      });
+
+      // Keyboard navigation
+      viewport.addEventListener('keydown', function(e){
+        if(e.key === 'ArrowRight'){ viewport.scrollBy({left: cardStep(), behavior:'smooth'}); }
+        if(e.key === 'ArrowLeft'){  viewport.scrollBy({left:-cardStep(), behavior:'smooth'}); }
+      });
+
+      // Drag to scroll (desktop)
+      var down=false, startX=0, sl=0;
+      viewport.addEventListener('mousedown', function(e){ down=true; viewport.classList.add('is-drag'); startX=e.pageX; sl=viewport.scrollLeft; });
+      window.addEventListener('mouseup',   function(){ down=false; viewport.classList.remove('is-drag'); });
+      viewport.addEventListener('mousemove', function(e){ if(!down) return; e.preventDefault(); viewport.scrollLeft = sl - (e.pageX - startX); });
+    })();
+  </script>
 </section>
 {{ end }}
 
 
+
+
 <!-- =========================
      OUTCOMES (Nutzen/Ergebnisse)
      Quelle: .Params.outcomes (array of strings)
@@ -248,7 +276,7 @@
       
       <!-- Text links -->
       <div class="col-lg-6"  data-reveal>
-        <h2 class="mb-3">Ergebnis & Mehrwert</h2>
+        <h3 class="mb-3">Ergebnis & Mehrwert</h3>
         <ul class="checklist">
           {{ range . }}
           <li data-reveal>
@@ -297,8 +325,8 @@
   <div class="cta__bg" aria-hidden="true">
     <div class="cta__grid"></div>
     <div class="cta__energy-lines">
-      <div class="energy-line-h energy-line-h1"></div>
       <div class="energy-line-h energy-line-h2"></div>
+      <div class="energy-line-h energy-line-h3"></div>
       <div class="energy-line-v energy-line-v1"></div>
       <div class="energy-line-v energy-line-v2"></div>
       <div class="energy-node energy-node1"></div>
@@ -311,9 +339,9 @@
   <!-- Inhalt: jetzt dynamisch aus Front-Matter -->
   <div class="my-container">
     <div class="cta__wrap" data-reveal>
-      <h2 class="cta__title">
+      <h3 class="cta__title">
         {{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
-      </h2>
+      </h3>
 
       {{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}}
       {{ with .Params.subtitle }}
diff --git a/layouts/_default/render-image.html b/layouts/_default/render-image.html
new file mode 100644
index 0000000..896c22a
--- /dev/null
+++ b/layouts/_default/render-image.html
@@ -0,0 +1,8 @@
+{{- $alt := .Text | default .Title | default "AMPERION" -}}
+<img src="{{ .Destination | safeURL }}"
+     alt="{{ $alt }}"
+     loading="lazy"
+     decoding="async"
+     {{ with .PlainWidth }}width="{{ . }}"{{ end }}
+     {{ with .PlainHeight }}height="{{ . }}"{{ end }}>
+{{- if .Title }}<figcaption>{{ .Title }}</figcaption>{{ end -}}
diff --git a/layouts/index.html b/layouts/index.html
index 9ffcfa6..783aeb8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -21,7 +21,7 @@
       <!-- Haupttitel + Button -->
       <div class="hero-section" style="margin-top: 10rem;">
         {{ with .title }}
-        <h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
+        <h2 class="hero-title fade-in-title">{{ . | markdownify }}</h2>
         {{ end }}
         {{ with .button }}
         {{ if .enable }}
@@ -148,8 +148,8 @@ document.addEventListener('DOMContentLoaded', function () {
     <!-- Titelblock -->
     <div class="row">
       <div class="text-center" data-aos="fade-up" data-aos-delay="100">
-        <h1>Darum AMPERION</h1>
-        <h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
+        <h2>Darum AMPERION</h2>
+        <h3><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h3>
       </div>
     </div>
 
@@ -160,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Technische Planungskompetenz</h3>
+        <h4 class="service-card-title">Technische Planungskompetenz</h4>
         <p class="service-card-description">
           <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
         </p>
@@ -168,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Intelligente Energiesysteme</h3>
+        <h4 class="service-card-title">Intelligente Energiesysteme</h4>
         <p class="service-card-description">
           <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
         </p>
@@ -176,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Persönliche Betreuung</h3>
+        <h4 class="service-card-title">Persönliche Betreuung</h4>
         <p class="service-card-description">
           <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
         </p>
@@ -184,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
+        <h4 class="service-card-title">Reibungslose Projektabwicklung</h4>
         <p class="service-card-description">
           <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
         </p>
@@ -192,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Vernetzte Energiezukunft</h3>
+        <h4 class="service-card-title">Vernetzte Energiezukunft</h4>
         <p class="service-card-description">
           <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
         </p>
@@ -200,7 +200,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       <article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
         <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
-        <h3 class="service-card-title">Präzise Systemplanung</h3>
+        <h4 class="service-card-title">Präzise Systemplanung</h4>
         <p class="service-card-description">
           <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
         </p>
@@ -250,8 +250,8 @@ document.addEventListener('DOMContentLoaded', function () {
     <!-- Titelbereich -->
     <div class="row">
       <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
-        <h1>Über AMPERION</h1>
-        {{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
+        <h2>Über AMPERION</h2>
+        {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
       </div>
     </div>
 
@@ -296,8 +296,8 @@ document.addEventListener('DOMContentLoaded', function () {
     <!-- Energie-Linien -->
     <div class="cta__energy-lines">
       <!-- Horizontale Linien -->
-      <div class="energy-line-h energy-line-h1"></div>
       <div class="energy-line-h energy-line-h2"></div>
+      <div class="energy-line-h energy-line-h3"></div>
 
       
       <!-- Vertikale Linien -->
@@ -319,9 +319,9 @@ document.addEventListener('DOMContentLoaded', function () {
   <!-- Content -->
   <div class="my-container">
     <div class="cta__wrap">
-      <h2 class="cta__title">
+      <h3 class="cta__title">
         Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
-      </h2>
+      </h3>
       <p class="cta__lead">
         Bereit für Ihr Energieprojekt?
         <span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b44ac0e..0f4969c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,3 +1,5 @@
+{{ partial "seo.html" . }}
+
 <meta charset="utf-8">
 <title>{{.Title | default site.Title}}</title>
 
diff --git a/layouts/partials/page-title.html b/layouts/partials/page-title.html
index 9e9db82..986b63b 100644
--- a/layouts/partials/page-title.html
+++ b/layouts/partials/page-title.html
@@ -85,7 +85,7 @@
     <div class="row">
       <div class="col-md-12 text-center">
         <div class="service-title">
-          <h1 class="title-electric">{{ .Title }}</h1>
+          <h2 class="title-electric">{{ .Title }}</h2>
         </div>
         {{ with .Params.description }}
           <p class="page-title-desc">{{ . }}</p>
diff --git a/layouts/partials/section-grid.html b/layouts/partials/section-grid.html
index 965f6dc..83c4df8 100644
--- a/layouts/partials/section-grid.html
+++ b/layouts/partials/section-grid.html
@@ -2,8 +2,8 @@
   {{ with .Params.service }}
       <div class="my-container">
         <div class="section-title text-center">
-          <h1 data-aos="fade-up">{{ .title | markdownify }}</h1>
-          <h2 data-aos="fade-up">{{ .description | markdownify }}</h2>
+          <h2 data-aos="fade-up">{{ .title | markdownify }}</h2>
+          <h3 data-aos="fade-up">{{ .description | markdownify }}</h3>
         </div>
 
         <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
@@ -19,7 +19,7 @@
             {{ else }}
               <div class="info-card">
                 <i class="{{ .icon }}" aria-hidden="true"></i>
-                <h3>{{ .name | markdownify }}</h3>
+                <h4>{{ .name | markdownify }}</h4>
                 <p>{{ .content | markdownify }}</p>
               </div>
             {{ end }}
diff --git a/layouts/partials/seo.html b/layouts/partials/seo.html
new file mode 100644
index 0000000..7b7c7fe
--- /dev/null
+++ b/layouts/partials/seo.html
@@ -0,0 +1,39 @@
+{{- /* layouts/partials/seo.html */ -}}
+{{- $siteTitle := site.Title -}}
+{{- $sep := " | " -}}
+<title>
+{{- if .IsHome -}}
+  AMPERION – Ingenieurbüro & Elektrotechnikbetrieb für Photovoltaik, Speicher & Ladeinfrastruktur
+{{- else -}}
+  {{- .Title }}{{ $sep }}AMPERION – Photovoltaik, Energiespeicher, Ladeinfrastruktur
+{{- end -}}
+</title>
+
+{{- $desc := cond (isset .Params "description") .Params.description
+  "AMPERION ist Ihr staatlich geprüftes Ingenieurbüro & Elektrotechnikbetrieb: Planung, Projektmanagement & Consulting für Photovoltaik, Energiespeicher und Ladeinfrastruktur – von der Idee bis zur Inbetriebnahme." -}}
+<meta name="description" content="{{ $desc }}">
+
+<link rel="canonical" href="{{ .Permalink }}">
+
+{{- with .AlternativeOutputFormats }}{{ end -}}
+
+{{- /* hreflang (de/en) */ -}}
+{{- range .AllTranslations -}}
+<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
+{{- end -}}
+<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}">
+
+<meta name="robots" content="index,follow">
+
+<!-- Open Graph -->
+<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
+<meta property="og:title" content="{{ if .IsHome }}AMPERION – Ingenieurbüro & Elektrotechnik{{ else }}{{ .Title }}{{ end }}">
+<meta property="og:description" content="{{ $desc }}">
+<meta property="og:url" content="{{ .Permalink }}">
+{{- $ogimg := (resources.Get "images/og-default.jpg") | default (resources.Get "images/logo.png") -}}
+{{- with $ogimg -}}{{ $p := .Fit "1200x630" }}<meta property="og:image" content="{{ $p.RelPermalink }}">{{ end -}}
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ if .IsHome }}AMPERION – Ingenieurbüro & Elektrotechnik{{ else }}{{ .Title }}{{ end }}">
+<meta name="twitter:description" content="{{ $desc }}">
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index 6c55963..27c0fc3 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -22,7 +22,7 @@ h1 {
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
-  color: #046e6e; }
+  color: black; }
 
 h1.page-title {
   font-size: clamp(2.5rem, 6vw, 4rem);
@@ -30,14 +30,21 @@ h1.page-title {
   text-transform: capitalize; }
 
 h2 {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  color: #046e6e; }
+
+h3 {
   font-size: clamp(2rem, 3vw, 2.5rem);
   font-style: italic;
   font-weight: 400;
   line-height: 1.4;
   margin-bottom: 5rem;
-  color: #222; }
+  color: black; }
 
-h3 {
+h4 {
   font-size: clamp(1.8rem, 1.8vw, 2rem);
   font-weight: normal;
   line-height: 1.6;
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..4561750
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Disallow:
+
+Sitemap: https://www.amperion.at/sitemap.xml
+Sitemap: https://www.amperion.at/en/sitemap.xml