Über uns
Lernen Sie uns und unser Team kennen.

<!-- ============================================
     GSAP Infinite Marquee – Bricks Code Element
     Einfügen unter: Element > Code
     ============================================ -->

<style>
.marquee-outer {
  overflow: hidden;
  width: 100%;
  /* Gradient-Maske für sanften Aus-/Einblend-Effekt an den Seiten */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  gap: 24px;             /* Abstand zwischen den Bildern */
  width: max-content;
  will-change: transform;
}

.marquee-item {
  flex-shrink: 0;
  width: 280px;          /* ← Bildbreite anpassen */
  height: 180px;         /* ← Bildhöhe anpassen */
  border-radius: 12px;   /* ← Abrundung anpassen */
  overflow: hidden;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
</style>

<div class="marquee-outer" id="marqueeOuter">
  <div class="marquee-track" id="marqueeTrack">

    <!-- ↓↓↓ Hier deine Bilder eintragen ↓↓↓ -->
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/a1/560/360" alt="Bild 1" draggable="false">
    </div>
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/b2/560/360" alt="Bild 2" draggable="false">
    </div>
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/c3/560/360" alt="Bild 3" draggable="false">
    </div>
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/d4/560/360" alt="Bild 4" draggable="false">
    </div>
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/e5/560/360" alt="Bild 5" draggable="false">
    </div>
    <div class="marquee-item">
      <img src="https://picsum.photos/seed/f6/560/360" alt="Bild 6" draggable="false">
    </div>
    <!-- ↑↑↑ Beliebig viele weitere .marquee-item Blöcke einfügen ↑↑↑ -->

  </div>
</div>

<!-- GSAP aus CDN laden (entfernen falls GSAP bereits auf der Seite geladen ist) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>
(function () {
  /* ── Einstellungen ─────────────────────────── */
  var SPEED       = 80;    // px/s  ← höher = schneller
  var GAP         = 24;    // muss gleich dem CSS gap-Wert sein (px)
  var PAUSE_HOVER = true;  // bei Hover pausieren?
  /* ─────────────────────────────────────────── */

  var track  = document.getElementById('marqueeTrack');
  var tween  = null;

  function init() {
    var origItems = Array.from(track.children);
    if (origItems.length === 0) return;

    /* Klone anhängen, damit der Loop nahtlos wirkt */
    origItems.forEach(function (el) {
      track.appendChild(el.cloneNode(true));
    });

    /* Breite eines vollständigen Satzes (Originale) */
    var singleSetWidth = origItems.reduce(function (sum, el) {
      return sum + el.offsetWidth + GAP;
    }, 0);

    /* Animation starten */
    tween = gsap.to(track, {
      x: -singleSetWidth,
      duration: singleSetWidth / SPEED,
      ease: 'none',
      repeat: -1,
      modifiers: {
        x: gsap.utils.unitize(function (x) {
          return parseFloat(x) % singleSetWidth;
        })
      }
    });

    /* Pause bei Hover (optional) */
    if (PAUSE_HOVER) {
      var outer = document.getElementById('marqueeOuter');
      outer.addEventListener('mouseenter', function () { tween.pause(); });
      outer.addEventListener('mouseleave', function () { tween.resume(); });
    }
  }

  /* Nach vollständigem Laden initialisieren */
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

<!-- ============================================
     GSAP Scroll Animations – Bricks Code Element
     Einmalig einfügen (z.B. Header / Footer Bereich)
     ============================================

  VERWENDUNG:
  ───────────
  Klasse an beliebiges Bricks-Element anhängen:

    .fade-up          → von unten hochfaden (Standard)
    .fade-down        → von oben runterfaden
    .fade-left        → von links reinfaden
    .fade-right       → von rechts reinfaden
    .fade-scale       → kleiner → normale Größe
    .fade-in          → reines Opacity-Fade (ohne Bewegung)

  DELAY (kombinierbar):
  ─────────────────────
    .delay-1   →  150ms
    .delay-2   →  300ms
    .delay-3   →  450ms
    .delay-4   →  600ms
    .delay-5   →  750ms

  Oder direkt per data-Attribut (überschreibt Klasse):
    data-delay="0.8"  → 800ms Delay (Sekunden als Zahl)

  BEISPIELE:
  ──────────
    <div class="fade-up">Normales Fade</div>
    <div class="fade-up delay-2">Mit 300ms Delay</div>
    <div class="fade-left delay-3">Von links, 450ms</div>
    <div class="fade-scale" data-delay="1.2">Custom 1.2s Delay</div>

  EINSTELLUNGEN: siehe JS-Block unten
  ============================================ -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script>
(function () {

  /* ── Globale Einstellungen ─────────────────── */
  var DURATION    = 0.75;   // Animationsdauer in Sekunden
  var EASE        = 'power3.out'; // Easing (power2.out, expo.out, back.out(1.4) …)
  var DISTANCE    = 48;     // px Versatz (für fade-up / fade-down / fade-left / fade-right)
  var SCALE_FROM  = 0.88;   // Startgröße für fade-scale (0.88 = 88%)
  var TRIGGER_POS = 'top 88%'; // Wann wird ausgelöst (top 88% = kurz vor Sichtbarkeit)
  var ONCE        = true;   // true = nur einmal abspielen; false = bei Scroll rein/raus wiederholen

  /* Delay-Stufen für Klassen .delay-1 bis .delay-5 */
  var DELAY_STEPS = [0, 0.15, 0.30, 0.45, 0.60, 0.75];
  /* ─────────────────────────────────────────── */

  /* Animations-Definitionen pro Klasse */
  var ANIMATIONS = {
    'fade-up'    : { y: DISTANCE,  opacity: 0 },
    'fade-down'  : { y: -DISTANCE, opacity: 0 },
    'fade-left'  : { x: -DISTANCE, opacity: 0 },
    'fade-right' : { x: DISTANCE,  opacity: 0 },
    'fade-scale' : { scale: SCALE_FROM, opacity: 0 },
    'fade-in'    : { opacity: 0 }
  };

  function init() {
    gsap.registerPlugin(ScrollTrigger);

    Object.keys(ANIMATIONS).forEach(function (cls) {
      var elements = document.querySelectorAll('.' + cls);

      elements.forEach(function (el) {
        /* Delay ermitteln: data-delay > Klasse > 0 */
        var delay = 0;
        if (el.dataset.delay !== undefined) {
          delay = parseFloat(el.dataset.delay) || 0;
        } else {
          for (var i = DELAY_STEPS.length - 1; i >= 1; i--) {
            if (el.classList.contains('delay-' + i)) {
              delay = DELAY_STEPS[i];
              break;
            }
          }
        }

        /* Startzustand setzen (unsichtbar / verschoben) */
        gsap.set(el, ANIMATIONS[cls]);

        /* ScrollTrigger Animation */
        gsap.to(el, {
          x: 0,
          y: 0,
          scale: 1,
          opacity: 1,
          duration: DURATION,
          delay: delay,
          ease: EASE,
          scrollTrigger: {
            trigger: el,
            start: TRIGGER_POS,
            toggleActions: ONCE
              ? 'play none none none'
              : 'play none none reverse'
          }
        });
      });
    });
  }

  /* Warten bis DOM + GSAP bereit sind */
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>