Update300820252359

assets/scss/custom.scss

@@ -445,10 +445,6 @@ section {
   }
 }
 
-.mehrwert-icon {
-  filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
-}
-
 /* ========== Gründerteam & Intro-Text ========== */
 .container-fluid {
   max-width: 100%;
@@ -649,21 +645,22 @@ body {
   display:flex;
   align-items:center;
   justify-content:center;
-  gap:clamp(1.25rem, 3vw, 3.5rem);
-  flex-wrap:wrap;                         /* bricht sauber um */
-  margin-top:clamp(4rem, 4vw, 6rem);
+  gap:clamp(1rem, 3vw, 3rem);  /* etwas enger */
+  flex-wrap:wrap;
+  margin-top:clamp(3rem, 3vw, 5rem); /* kompakter */
 }
 
 .aff-group{
   display:flex;
   align-items:center;
-  gap:clamp(.75rem, 2vw, 1.25rem);
+  justify-content:center;
+  gap:clamp(.5rem, 1.5vw, 1rem);
 }
 
 /* Linker Block (Ingenieurbüros etc.) */
 .aff-caption{
   margin:0 0 .5rem 0;
-  font-size:clamp(.9rem, 1.2vw, 1rem);
+  font-size:clamp(.85rem, 1vw, .95rem);
   color:#6b7280;
   text-align:left;
 }
@@ -671,37 +668,32 @@ body {
 .aff-logos{
   display:flex;
   align-items:center;
-  gap:clamp(.5rem, 1.2vw, 1rem);
+  gap:clamp(.5rem, 1vw, .75rem);
   flex-wrap:wrap;
 }
 
-.aff-logos img{
-  max-height:clamp(100px, 3.2vw, 180px);
+/* Beide Logos gleich groß machen */
+.aff-logos img,
+.aff-right .aff-pva-logo{
+  height:120px;       /* Desktop-Höhe */
   width:auto;
-  height:auto;
   display:block;
+  object-fit:contain;
 }
 
-/* Rechter Block: Nur Logo (klickbar) */
+/* Rechter Block: Nur Logo */
 .aff-right{
-  display:flex;                 /* zentriert das Logo im Link */
+  display:flex;
   align-items:center;
   justify-content:center;
   text-decoration:none;
   color:inherit;
 }
 
-.aff-right .aff-pva-logo{
-  max-height:clamp(60px, 6vw, 120px);  /* Logo-Größe hier steuern */
-  width:auto;
-  height:auto;
-  display:block;
-}
-
 /* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
 @media (min-width: 900px){
   .aff-right{
-    padding-left:clamp(1rem, 2.5vw, 3rem);
+    padding-left:clamp(0.75rem, 2vw, 2rem);
     border-left:1px solid #e5e7eb;
   }
 }
@@ -714,6 +706,15 @@ body {
   }
 }
 
+/* Mobile-Optimierung für sehr kleine Screens */
+@media (max-width: 480px){
+  .aff-logos img,
+  .aff-right .aff-pva-logo{
+    height:60px;  /* kleinere Höhe auf Handy */
+    width:auto;
+  }
+}
+
 /* Fokus-Style für Tastaturbedienung */
 .aff-right:focus-visible{
   outline:2px dashed var(--amp-accent);
@@ -722,6 +723,7 @@ body {
 
 
 
+
 /* ========================================
    CTA SECTION - HYBRID DESIGN
    ======================================== */

layouts/_default/about.html

@@ -24,6 +24,7 @@
   <div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
     <video id="aboutVideo"
        class="intro-video"
+       autoplay
        muted
        loop
        playsinline
@@ -34,28 +35,26 @@
   </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 srcWebm = '{{ "images/Imagevideo_Short.webm" | 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">
+          <source src="${srcWebm}" type="video/webm">
         `;
         vid.play().catch(() => {});
         observer.disconnect();
       }
     });
   }, { rootMargin: "200px" });
-
   observer.observe(vid);
 });
 </script>
@@ -142,7 +141,7 @@ document.addEventListener("DOMContentLoaded", () => {
       {{ $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(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
+        <img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3">
         <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.
@@ -150,7 +149,7 @@ document.addEventListener("DOMContentLoaded", () => {
       </article>
 
       <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%);">
+        <img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3">
         <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.
@@ -158,15 +157,16 @@ document.addEventListener("DOMContentLoaded", () => {
       </article>
 
       <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%);">
+        <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3">
         <h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
         <p class="service-card-description">
           <strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
         </p>
       </article>
       
+
       <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%);">
+        <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3">
         <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.

layouts/_default/leistung.html

@@ -167,9 +167,8 @@
 
 
 
-
 <!-- =========================
-     FEATURES CAROUSEL (Große Cards mit Auto-Play)
+     FEATURES CAROUSEL (Mobile-optimiert)
      Quelle: .Params.features (array of {title, text, icon?})
 ========================= -->
 {{ with .Params.features }}
@@ -198,19 +197,27 @@
       overflow: hidden;
       border-radius: 20px;
       position: relative;
+      /* Verhindert, dass andere Cards sichtbar sind */
+      margin: 0 auto;
+      max-width: 100%;
     }
     
     .sf-track {
       display: flex;
-      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: transform 0.3s ease-out;
       will-change: transform;
+      /* Touch-optimiert */
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
     }
     
-    /* Cards - Always one card visible */
+    /* Cards - Immer nur eine Card sichtbar */
     .sf-card {
       flex: 0 0 100%;
       padding: 10px;
       box-sizing: border-box;
+      min-width: 100%;
     }
     
     .sf-card-inner {
@@ -223,13 +230,9 @@
       flex-direction: column;
       align-items: center;
       text-align: center;
-      transition: transform 0.3s, box-shadow 0.3s;
-      cursor: grab;
-    }
-  
-    
-    .sf-carousel.is-dragging .sf-card-inner {
-      cursor: grabbing;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      /* Touch-Feedback entfernt für bessere Performance */
+      -webkit-tap-highlight-color: transparent;
     }
     
     /* Icon */
@@ -255,21 +258,25 @@
     .sf-card h3 {
       margin: 0 0 16px;
       line-height: 1.3;
+      /* font-size entfernt - verwendet Standard */
     }
     
     .sf-card p {
       margin: 0;
       line-height: 1.6;
+      /* font-size entfernt - verwendet Standard */
     }
     
     /* Navigation Dots */
     .sf-dots {
       display: flex;
       justify-content: center;
-      gap: 8px;
+      gap: 12px;
       margin-top: 32px;
       padding: 0;
       list-style: none;
+      /* Touch-Target vergrößert */
+      padding: 10px 0;
     }
     
     .sf-dot {
@@ -281,6 +288,17 @@
       cursor: pointer;
       transition: all 0.3s;
       padding: 0;
+      /* Touch-Target vergrößert */
+      position: relative;
+    }
+    
+    .sf-dot::before {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      right: -10px;
+      bottom: -10px;
     }
     
     .sf-dot:hover {
@@ -294,7 +312,7 @@
       border-radius: 6px;
     }
     
-    /* Arrow Navigation */
+    /* Arrow Navigation - nur Desktop */
     .sf-arrow {
       position: absolute;
       top: 50%;
@@ -306,7 +324,7 @@
       border-radius: 50%;
       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
       cursor: pointer;
-      display: flex;
+      display: none; /* Standardmäßig ausgeblendet */
       align-items: center;
       justify-content: center;
       z-index: 2;
@@ -321,6 +339,11 @@
       transform: translateY(-50%) scale(1.1);
     }
     
+    .sf-arrow:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    
     .sf-arrow.prev {
       left: 20px;
     }
@@ -329,40 +352,76 @@
       right: 20px;
     }
     
-    /* Hide arrows on mobile */
-    @media (max-width: 767px) {
+    /* Arrows nur auf Desktop anzeigen */
+    @media (min-width: 768px) {
       .sf-arrow {
-        display: none;
+        display: flex;
       }
     }
     
-    /* Touch feedback */
-    @media (hover: none) {
-      .sf-card-inner:active {
-        transform: scale(0.98);
+    /* Mobile-Optimierungen */
+    @media (max-width: 767px) {
+      .sf-carousel {
+        padding: 0 15px;
+      }
+      
+      .sf-card {
+        padding: 5px;
+      }
+      
+      .sf-card-inner {
+        padding: 30px 20px;
+        min-height: 280px;
+      }
+      
+      /* Schriftgrößen beibehalten - nicht verkleinern auf Mobile */
+      
+      .sf-icon {
+        width: 70px;
+        height: 70px;
+      }
+      
+      .sf-icon svg {
+        width: 35px;
+        height: 35px;
+      }
+      
+      /* Swipe-Indikator */
+      .sf-viewport::after {
+        content: '';
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 4px;
+        background: rgba(0,0,0,0.1);
+        border-radius: 2px;
+        pointer-events: none;
       }
     }
     
-    /* Progress bar for autoplay */
+    /* Progress bar für Autoplay */
     .sf-progress {
       position: absolute;
-      bottom: -4px;
+      bottom: 0;
       left: 0;
       height: 3px;
       background: #F5A623;
       border-radius: 3px;
       width: 0;
-      transition: width 8s linear;
       z-index: 3;
+      opacity: 0.7;
     }
     
-    .sf-carousel.autoplay .sf-progress {
-      width: 100%;
+    /* Dragging State */
+    .sf-carousel.is-dragging .sf-track {
+      transition: none;
+      cursor: grabbing;
     }
     
-    /* Pause on hover */
-    .sf-carousel:hover .sf-progress {
-      animation-play-state: paused;
+    .sf-carousel.is-dragging .sf-card-inner {
+      pointer-events: none;
     }
   </style>
 
@@ -440,100 +499,72 @@
     </div>
   </div>
 
+  
 <script>
-  (function () {
+(function() {
   const carousel = document.getElementById('sfCarousel');
   if (!carousel) return;
 
   const track = document.getElementById('sfTrack');
-    const cards = track.querySelectorAll('.sf-card');
+  const cards = Array.from(track.querySelectorAll('.sf-card'));
   const dots = carousel.querySelectorAll('.sf-dot');
   const prevBtn = carousel.querySelector('.sf-arrow.prev');
   const nextBtn = carousel.querySelector('.sf-arrow.next');
-    const progress = carousel.querySelector('.sf-progress');
+
+  const AUTOPLAY_DELAY = 5000; // 5Sekunden
+  const SWIPE_THRESHOLD = 50;
 
   let currentIndex = 0;
-    let autoplayInterval;
-    let touchStartX = 0;
-    let touchEndX = 0;
-    let isDragging = false;
-    let isAnimating = false; // blockiert neue Aktionen
-    const AUTOPLAY_DELAY = 20000;
+  let autoplayInterval = null;
 
-    function setupInfiniteLoop() {
+  let isDragging = false;
+  let startX = 0;
+  let currentTranslate = 0;
+  let prevTranslate = 0;
+
+  // --- Infinite Loop: Klone erste und letzte Karte ---
   const firstClone = cards[0].cloneNode(true);
   const lastClone = cards[cards.length - 1].cloneNode(true);
-      firstClone.setAttribute('aria-hidden', 'true');
-      lastClone.setAttribute('aria-hidden', 'true');
   track.appendChild(firstClone);
   track.insertBefore(lastClone, cards[0]);
-    }
+  const allCards = Array.from(track.children);
+  const totalSlides = allCards.length;
 
-    function updateCarousel(animate = true) {
-      const translateX = -(currentIndex + 1) * 100;
-      track.style.transition = animate
-        ? 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
-        : 'none';
-      track.style.transform = `translateX(${translateX}%)`;
-
-      const realIndex = (currentIndex + cards.length) % cards.length;
-      dots.forEach((dot, index) => {
-        dot.classList.toggle('active', index === realIndex);
-        dot.setAttribute('aria-selected', index === realIndex);
-      });
-
-      // Buttons während Animation blockieren
-      prevBtn.disabled = animate;
-      nextBtn.disabled = animate;
-    }
-
-    track.addEventListener('transitionend', () => {
-      if (currentIndex === cards.length) currentIndex = 0;
-      if (currentIndex === -1) currentIndex = cards.length - 1;
+  currentIndex = 1;
   updateCarousel(false);
-      isAnimating = false;
-      prevBtn.disabled = false;
-      nextBtn.disabled = false;
+
+  // --- Funktionen ---
+  function updateCarousel(animate = true) {
+    track.style.transition = animate ? 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none';
+    track.style.transform = `translateX(${-currentIndex * 100}%)`;
+
+    // Dots nur für echte Slides
+    dots.forEach((dot, i) => {
+      const slideIndex = (currentIndex - 1 + cards.length) % cards.length;
+      dot.classList.toggle('active', i === slideIndex);
+      dot.setAttribute('aria-selected', i === slideIndex);
     });
 
-    function goToSlide(index) {
-      if (isAnimating) return;
-      isAnimating = true;
+    prevTranslate = -currentIndex * 100;
+  }
+
+  function goToSlide(index, animate = true) {
     currentIndex = index;
-      updateCarousel();
-      resetAutoplay();
+    updateCarousel(animate);
   }
 
-    function nextSlide() {
-      if (isAnimating) return;
-      isAnimating = true;
-      currentIndex++;
-      updateCarousel();
-    }
-
-    function prevSlide() {
-      if (isAnimating) return;
-      isAnimating = true;
-      currentIndex--;
-      updateCarousel();
-    }
+  function nextSlide() { goToSlide(currentIndex + 1); }
+  function prevSlide() { goToSlide(currentIndex - 1); }
 
+  // --- Autoplay ---
   function startAutoplay() {
-      carousel.classList.add('autoplay');
-      progress.style.transition = 'none';
-      progress.style.width = '0%';
-      requestAnimationFrame(() => {
-        progress.style.transition = `width ${AUTOPLAY_DELAY}ms linear`;
-        progress.style.width = '100%';
-      });
+    if (autoplayInterval) return;
     autoplayInterval = setInterval(nextSlide, AUTOPLAY_DELAY);
   }
 
   function stopAutoplay() {
-      carousel.classList.remove('autoplay');
     clearInterval(autoplayInterval);
-      progress.style.transition = 'none';
-      progress.style.width = '0%';
+    autoplayInterval = null;
   }
 
   function resetAutoplay() {
@@ -541,54 +572,85 @@
     startAutoplay();
   }
 
-    // Touch/Swipe
-    function handleTouchStart(e) {
-      if (isAnimating) return;
-      touchStartX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+  // --- Buttons und Dots ---
+  dots.forEach((dot, i) => dot.addEventListener('click', () => goToSlide(i + 1)));
+  if (prevBtn) prevBtn.addEventListener('click', prevSlide);
+  if (nextBtn) nextBtn.addEventListener('click', nextSlide);
+
+  // --- Pointer Events für Drag/Swipe ---
+  carousel.addEventListener('pointerdown', pointerStart);
+  carousel.addEventListener('pointermove', pointerMove);
+  carousel.addEventListener('pointerup', pointerEnd);
+  carousel.addEventListener('pointercancel', pointerEnd);
+  carousel.addEventListener('pointerleave', pointerEnd);
+
+  function pointerStart(e) {
+    // Buttons und Dots sollen Drag nicht auslösen
+    if (e.target.closest('.sf-arrow') || e.target.closest('.sf-dot')) return;
+
     isDragging = true;
-      carousel.classList.add('is-dragging');
+    startX = e.clientX;
     stopAutoplay();
+    carousel.setPointerCapture(e.pointerId);
   }
 
-    function handleTouchEnd(e) {
+  function pointerMove(e) {
+    if (!isDragging) return;
+    const diffX = e.clientX - startX;
+    currentTranslate = prevTranslate + (diffX / carousel.offsetWidth) * 100;
+
+    // Sanfte Drag-Begrenzung für Looping
+    const maxTranslate = 0 + 20; // leichtes Stretch nach rechts
+    const minTranslate = -(totalSlides - 1) * 100 - 20; // leichtes Stretch nach links
+    currentTranslate = Math.max(minTranslate, Math.min(maxTranslate, currentTranslate));
+
+    track.style.transition = 'none';
+    track.style.transform = `translateX(${currentTranslate}%)`;
+  }
+
+  function pointerEnd(e) {
     if (!isDragging) return;
     isDragging = false;
-      carousel.classList.remove('is-dragging');
-      touchEndX = e.type.includes('mouse')
-        ? e.clientX
-        : e.changedTouches[0]?.clientX || touchStartX;
-      handleSwipe();
+
+    const diffX = startX - e.clientX;
+    if (Math.abs(diffX) > SWIPE_THRESHOLD) {
+      diffX > 0 ? nextSlide() : prevSlide();
+    } else {
+      updateCarousel();
+    }
+
     resetAutoplay();
   }
 
-    function handleSwipe() {
-      const diff = touchStartX - touchEndX;
-      if (Math.abs(diff) > 50) diff > 0 ? nextSlide() : prevSlide();
+  // --- Infinite Loop Adjustments ---
+  track.addEventListener('transitionend', () => {
+    if (currentIndex === 0) {
+      currentIndex = cards.length;
+      updateCarousel(false);
+    } else if (currentIndex === totalSlides - 1) {
+      currentIndex = 1;
+      updateCarousel(false);
     }
-
-    // Events
-    prevBtn.addEventListener('click', () => prevSlide());
-    nextBtn.addEventListener('click', () => nextSlide());
-    dots.forEach((dot, i) => dot.addEventListener('click', () => goToSlide(i)));
-
-    track.addEventListener('touchstart', handleTouchStart, { passive: true });
-    track.addEventListener('touchend', handleTouchEnd, { passive: true });
-    track.addEventListener('mousedown', handleTouchStart);
-    track.addEventListener('mouseup', handleTouchEnd);
-
-    carousel.addEventListener('mouseenter', stopAutoplay);
-    carousel.addEventListener('mouseleave', startAutoplay);
-    carousel.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowLeft') prevSlide();
-      if (e.key === 'ArrowRight') nextSlide();
   });
 
-    setupInfiniteLoop();
+  // --- Keyboard ---
+  carousel.addEventListener('keydown', e => {
+    if (e.key === 'ArrowLeft') prevSlide();
+    else if (e.key === 'ArrowRight') nextSlide();
+  });
+
+  // --- Visibility change ---
+  document.addEventListener('visibilitychange', () => {
+    document.hidden ? stopAutoplay() : startAutoplay();
+  });
+
+  // --- Init ---
   updateCarousel(false);
   startAutoplay();
-  })();
+})();
 </script>
 
+
 </section>
 {{ end }}
 

resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content

@@ -2896,9 +2896,6 @@ section {
     color: #000 !important;
     transition: color 0.3s ease; }
 
-.mehrwert-icon {
-  filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
-
 /* ========== Gründerteam & Intro-Text ========== */
 .container-fluid {
   max-width: 100%;
@@ -3072,55 +3069,52 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: clamp(1.25rem, 3vw, 3.5rem);
+  gap: clamp(1rem, 3vw, 3rem);
+  /* etwas enger */
   flex-wrap: wrap;
-  /* bricht sauber um */
-  margin-top: clamp(4rem, 4vw, 6rem); }
+  margin-top: clamp(3rem, 3vw, 5rem);
+  /* kompakter */ }
 
 .aff-group {
   display: flex;
   align-items: center;
-  gap: clamp(0.75rem, 2vw, 1.25rem); }
+  justify-content: center;
+  gap: clamp(0.5rem, 1.5vw, 1rem); }
 
 /* Linker Block (Ingenieurbüros etc.) */
 .aff-caption {
   margin: 0 0 .5rem 0;
-  font-size: clamp(0.9rem, 1.2vw, 1rem);
+  font-size: clamp(0.85rem, 1vw, 0.95rem);
   color: #6b7280;
   text-align: left; }
 
 .aff-logos {
   display: flex;
   align-items: center;
-  gap: clamp(0.5rem, 1.2vw, 1rem);
+  gap: clamp(0.5rem, 1vw, 0.75rem);
   flex-wrap: wrap; }
 
-.aff-logos img {
-  max-height: clamp(100px, 3.2vw, 180px);
+/* Beide Logos gleich groß machen */
+.aff-logos img,
+.aff-right .aff-pva-logo {
+  height: 120px;
+  /* Desktop-Höhe */
   width: auto;
-  height: auto;
-  display: block; }
+  display: block;
+  object-fit: contain; }
 
-/* Rechter Block: Nur Logo (klickbar) */
+/* Rechter Block: Nur Logo */
 .aff-right {
   display: flex;
-  /* zentriert das Logo im Link */
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: inherit; }
 
-.aff-right .aff-pva-logo {
-  max-height: clamp(60px, 6vw, 120px);
-  /* Logo-Größe hier steuern */
-  width: auto;
-  height: auto;
-  display: block; }
-
 /* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
 @media (min-width: 900px) {
   .aff-right {
-    padding-left: clamp(1rem, 2.5vw, 3rem);
+    padding-left: clamp(0.75rem, 2vw, 2rem);
     border-left: 1px solid #e5e7eb; } }
 
 /* Mobil: keine Trennlinie / kein Einzug */
@@ -3129,6 +3123,14 @@ body {
     border-left: 0;
     padding-left: 0; } }
 
+/* Mobile-Optimierung für sehr kleine Screens */
+@media (max-width: 480px) {
+  .aff-logos img,
+  .aff-right .aff-pva-logo {
+    height: 60px;
+    /* kleinere Höhe auf Handy */
+    width: auto; } }
+
 /* Fokus-Style für Tastaturbedienung */
 .aff-right:focus-visible {
   outline: 2px dashed var(--amp-accent);

static/icons/brain.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>

static/icons/briefcase-business.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>

static/icons/earth.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-earth-icon lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-earth-icon lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>

static/icons/stamp.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stamp-icon lucide-stamp"><path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13"/><path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/><path d="M5 22h14"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stamp-icon lucide-stamp"><path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13"/><path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/><path d="M5 22h14"/></svg>