From b6fe872a807b679a48b6a6d0ef5c3a462b2c5a7e Mon Sep 17 00:00:00 2001
From: astosic <alexander.stosic@amperion.at>
Date: Tue, 12 Aug 2025 11:05:32 +0200
Subject: [PATCH] 12082025-1105

---
 assets/scss/custom.scss                       | 11 +++--
 layouts/_default/about.html                   | 40 +++++++++++++++----
 ...s_d9077b5cab49df084fb1a39ad4b1e75d.content | 10 ++---
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 7d24e10..ecc454f 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -1107,24 +1107,23 @@ body {
   border-radius: 999px;
 }
 
-/* About-Intro: Video ohne abgerundete Ecken */
-/* About-Intro: Video mit weichen Kanten */
+/* About-Intro: Video  */
 .intro-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  border-radius: 12px; /* Weiche Kanten */
+  border-radius: 12px; // Weiche Kanten
 }
 
 .intro-media {
-  overflow: hidden; /* sorgt dafür, dass der Radius auch das Video schneidet */
-  border-radius: 12px; /* gleicher Radius wie Video */
-  
+  overflow: hidden; // sorgt dafür, dass der Radius auch das Video schneidet
+  border-radius: 12px;
 }
 
 
 
+
 /* ========================================
    ABOUT PAGE STYLES 
    ======================================== */
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 155041d..11df3a9 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -19,20 +19,44 @@
       </div>
 
 <!-- VIDEO (rechts, ohne abgerundete Ecken) -->
-<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="600">
+<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
   <div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
-    <video class="intro-video"
-           autoplay
+    <video id="aboutVideo"
+           class="intro-video"
            muted
            loop
            playsinline
-           preload="metadata"
+           preload="none"
            poster='{{ "images/brand_poster.jpg" | relURL }}'>
-      <source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4">
-      Ihr Browser unterstützt eingebettete Videos nicht.
+      <!-- Quellen werden per JS gesetzt -->
     </video>
   </div>
 </div>
+
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  const vid = document.getElementById("aboutVideo");
+  if (!vid) return;
+
+  const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
+  const srcMp4  = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
+
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        vid.innerHTML = `
+          <source src="${srcWebm}" type="video/webm">
+          <source src="${srcMp4}" type="video/mp4">
+        `;
+        vid.play().catch(() => {});
+        observer.disconnect();
+      }
+    });
+  }, { rootMargin: "200px" });
+
+  observer.observe(vid);
+});
+</script>
     </div>
   </div>
 </section>
@@ -116,8 +140,8 @@
       {{ $step := 100 }}
 
       <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(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
-        <h3 class="service-card-title">Staatlich geprüft & konzessioniert</h3>
+        <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>
         <p class="service-card-description">
           <strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
         </p>
diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
index b6fb7cc..23dac36 100644
--- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
+++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
@@ -3490,21 +3490,17 @@ body {
   background: #006464;
   border-radius: 999px; }
 
-/* About-Intro: Video ohne abgerundete Ecken */
-/* About-Intro: Video mit weichen Kanten */
+/* About-Intro: Video  */
 .intro-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  border-radius: 12px;
-  /* Weiche Kanten */ }
+  border-radius: 12px; }
 
 .intro-media {
   overflow: hidden;
-  /* sorgt dafür, dass der Radius auch das Video schneidet */
-  border-radius: 12px;
-  /* gleicher Radius wie Video */ }
+  border-radius: 12px; }
 
 /* ========================================
    ABOUT PAGE STYLES