/**
 * FS-TOOLS.CSS
 * Utility-Klassen für Bilder, Animationen und Effekte.
 * Prefix: fs- (Frontend Snippets / Frontend Studio)
 */

/* ==========================================================================
   GLOBALER FIX: KEIN HORIZONTALER SCROLLBAR BEI ANIMATIONEN
   ========================================================================== */
html,
body {
    overflow-x: hidden;
    position: relative; /* Hilft manchen Browsern, den Overflow sauber zu berechnen */
}


/* ==========================================================================
   BASIS-VARIABLEN (Einfach im Root überschreibbar)
   ========================================================================== */
:root {
  /* Farben */
  --fs-shadow-color: rgba(26, 91, 83, 0.25); /* Standard: Das Dunkelgrün aus dem Projekt */
  --fs-shadow-ambient: rgba(0, 0, 0, 0.15);
  
  /* Animation Timings */
  --fs-anim-speed: 0.6s;
  --fs-anim-easing: cubic-bezier(0.25, 1, 0.5, 1); /* Sanftes Ausgleiten (Ease-Out) */
  
  /* Staggering (Für Listen/Gruppen) */
  --fs-stagger-step: 0.15s;
}


/* ==========================================================================
   1. BILDER: FORMEN & BLOBS (fs-blob-...)
   ========================================================================== */

/* Animierter Blob */
.fs-blob-anim {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: fs-morph-blob 8s ease-in-out infinite;
}

@keyframes fs-morph-blob {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Statische Blobs (4 Varianten) */
.fs-blob-1 { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; } /* Bauchig */
.fs-blob-2 { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; } /* Eher oval/tropfenförmig */
.fs-blob-3 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } /* Flacher, in die Breite gezogen */
.fs-blob-4 { border-radius: 80% 20% 85% 15% / 85% 20% 80% 15%; } /* Stark asymmetrisch (fast Blattform) */


/* ==========================================================================
   2. BILDER: BEWEGUNG & TRANSFORMATION (fs-transform-...)
   ========================================================================== */

.fs-tilt {
  transform: rotate(-1.5deg) skewX(-1deg);
  /* Verhindert unscharfe Pixel-Treppchen bei CSS-Rotation */
  backface-visibility: hidden; 
}

.fs-3d {
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  backface-visibility: hidden;
}


/* ==========================================================================
   3. BILDER: SCHATTEN (fs-shadow-...)
   ========================================================================== */

.fs-shadow-float {
  box-shadow: 0 30px 60px var(--fs-shadow-color);
  border-radius: 3px; 
}

.fs-shadow-ambient {
  box-shadow: 0 0 50px var(--fs-shadow-ambient);
  border-radius: 2px;
}


/* ==========================================================================
   4. ANIMATIONEN: APPEAR-IN (fs-enter-...)
   ========================================================================== */

.fs-duration-fast  { --fs-anim-speed: 0.3s; }
.fs-duration-slow  { --fs-anim-speed: 1.0s; }
.fs-duration-xslow { --fs-anim-speed: 1.5s; }


/* Basis-Klasse: Animation ist definiert und PAUSIERT (NUR WENN JS AKTIV IST!) */
.fs-js-enabled [class*="fs-enter-"] {
  animation-duration: var(--fs-anim-speed);
  animation-timing-function: var(--fs-anim-easing);
  animation-fill-mode: both; 
  animation-delay: var(--fs-delay, 0s); 
  animation-play-state: paused; 
}

/* Sobald im Viewport: Animation läuft los */
.fs-js-enabled [class*="fs-enter-"].fs-in-view,
.fs-js-enabled .fs-stagger-group.fs-in-view > [class*="fs-enter-"] {
  animation-play-state: running;
}

/* Die spezifischen Animationen greifen ebenfalls nur mit JS */
.fs-js-enabled .fs-enter-fade { animation-name: fs-enter-fade-anim; }
@keyframes fs-enter-fade-anim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fs-js-enabled .fs-enter-slide-up { animation-name: fs-enter-slide-up-anim; }
@keyframes fs-enter-slide-up-anim {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fs-js-enabled .fs-enter-zoom { animation-name: fs-enter-zoom-anim; }
@keyframes fs-enter-zoom-anim {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   4b. ANIMATIONEN: APPEAR-IN COMPLEX (FANCY)
   ========================================================================== */

/* --- SWING IN TOP --- */
.fs-js-enabled .fs-enter-swing-top { animation-name: fs-enter-swing-top-anim; }
@keyframes fs-enter-swing-top-anim {
  0% { transform: rotateX(-100deg); transform-origin: top; opacity: 0; }
  100% { transform: rotateX(0deg); transform-origin: top; opacity: 1; }
}

/* --- BOUNCE IN TOP --- */
.fs-js-enabled .fs-enter-bounce-top { animation-name: fs-enter-bounce-top-anim; }
@keyframes fs-enter-bounce-top-anim {
  0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateY(-65px); animation-timing-function: ease-in; }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  81% { transform: translateY(-28px); animation-timing-function: ease-in; }
  90% { transform: translateY(0); animation-timing-function: ease-out; }
  95% { transform: translateY(-8px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}

/* --- BOUNCE IN BOTTOM --- */
.fs-js-enabled .fs-enter-bounce-bottom { animation-name: fs-enter-bounce-bottom-anim; }
@keyframes fs-enter-bounce-bottom-anim {
  0% { transform: translateY(500px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateY(65px); animation-timing-function: ease-in; }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  81% { transform: translateY(28px); animation-timing-function: ease-in; }
  90% { transform: translateY(0); animation-timing-function: ease-out; }
  95% { transform: translateY(8px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}

/* --- BOUNCE IN LEFT --- */
.fs-js-enabled .fs-enter-bounce-left { animation-name: fs-enter-bounce-left-anim; }
@keyframes fs-enter-bounce-left-anim {
  0% { transform: translateX(-600px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateX(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateX(-68px); animation-timing-function: ease-in; }
  72% { transform: translateX(0); animation-timing-function: ease-out; }
  81% { transform: translateX(-28px); animation-timing-function: ease-in; }
  90% { transform: translateX(0); animation-timing-function: ease-out; }
  95% { transform: translateX(-8px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); animation-timing-function: ease-out; }
}

/* --- BOUNCE IN RIGHT --- */
.fs-js-enabled .fs-enter-bounce-right { animation-name: fs-enter-bounce-right-anim; }
@keyframes fs-enter-bounce-right-anim {
  0% { transform: translateX(600px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateX(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateX(68px); animation-timing-function: ease-in; }
  72% { transform: translateX(0); animation-timing-function: ease-out; }
  81% { transform: translateX(32px); animation-timing-function: ease-in; }
  90% { transform: translateX(0); animation-timing-function: ease-out; }
  95% { transform: translateX(8px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); animation-timing-function: ease-out; }
}

/* --- SLIDE IN ELLIPTIC TOP --- */
.fs-js-enabled .fs-enter-slide-elliptic { animation-name: fs-enter-slide-elliptic-anim; }
@keyframes fs-enter-slide-elliptic-anim {
  0% { transform: translateY(-600px) rotateX(-30deg) scale(0); transform-origin: 50% 100%; opacity: 0; }
  100% { transform: translateY(0) rotateX(0) scale(1); transform-origin: 50% 1400px; opacity: 1; }
}

/* --- SLIDE IN FWD (Verschiedene Richtungen) --- */
.fs-js-enabled .fs-enter-slide-fwd-bl { animation-name: fs-enter-slide-fwd-bl-anim; }
@keyframes fs-enter-slide-fwd-bl-anim {
  0% { transform: translateZ(-1400px) translateY(800px) translateX(-1000px); opacity: 0; }
  100% { transform: translateZ(0) translateY(0) translateX(0); opacity: 1; }
}

.fs-js-enabled .fs-enter-slide-fwd-br { animation-name: fs-enter-slide-fwd-br-anim; }
@keyframes fs-enter-slide-fwd-br-anim {
  0% { transform: translateZ(-1400px) translateY(800px) translateX(1000px); opacity: 0; }
  100% { transform: translateZ(0) translateY(0) translateX(0); opacity: 1; }
}

.fs-js-enabled .fs-enter-slide-fwd-bottom { animation-name: fs-enter-slide-fwd-bottom-anim; }
@keyframes fs-enter-slide-fwd-bottom-anim {
  0% { transform: translateZ(-1400px) translateY(800px); opacity: 0; }
  100% { transform: translateZ(0) translateY(0); opacity: 1; }
}

.fs-js-enabled .fs-enter-slide-fwd-left { animation-name: fs-enter-slide-fwd-left-anim; }
@keyframes fs-enter-slide-fwd-left-anim {
  0% { transform: translateZ(-1400px) translateX(-1000px); opacity: 0; }
  100% { transform: translateZ(0) translateX(0); opacity: 1; }
}

.fs-js-enabled .fs-enter-slide-fwd-right { animation-name: fs-enter-slide-fwd-right-anim; }
@keyframes fs-enter-slide-fwd-right-anim {
  0% { transform: translateZ(-1400px) translateX(1000px); opacity: 0; }
  100% { transform: translateZ(0) translateX(0); opacity: 1; }
}

/* --- ROLL IN (Rotierende Einblendungen) --- */
.fs-js-enabled .fs-enter-roll-top { animation-name: fs-enter-roll-top-anim; }
@keyframes fs-enter-roll-top-anim {
  0% { transform: translateY(-800px) rotate(-540deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.fs-js-enabled .fs-enter-roll-bottom { animation-name: fs-enter-roll-bottom-anim; }
@keyframes fs-enter-roll-bottom-anim {
  0% { transform: translateY(800px) rotate(540deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.fs-js-enabled .fs-enter-roll-left { animation-name: fs-enter-roll-left-anim; }
@keyframes fs-enter-roll-left-anim {
  0% { transform: translateX(-800px) rotate(-540deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

.fs-js-enabled .fs-enter-roll-right { animation-name: fs-enter-roll-right-anim; }
@keyframes fs-enter-roll-right-anim {
  0% { transform: translateX(800px) rotate(540deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}


/* ==========================================================================
   5. ANIMATIONEN: EXIT (fs-exit-...)
   ========================================================================== */

[class*="fs-exit-"] {
  animation-duration: var(--fs-anim-speed);
  animation-timing-function: var(--fs-anim-easing);
  animation-fill-mode: both;
}

.fs-exit-fade { animation-name: fs-exit-fade-anim; }
@keyframes fs-exit-fade-anim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fs-exit-slide-down { animation-name: fs-exit-slide-down-anim; }
@keyframes fs-exit-slide-down-anim {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(40px); }
}


/* ==========================================================================
   6. DYNAMISCHES STAGGERING (Vererbung / Kaskade)
   ========================================================================== */
/* Setzt automatische Delays für Kind-Elemente in einer Gruppe */

.fs-stagger-group > *:nth-child(1)  { --fs-delay: calc(var(--fs-stagger-step) * 0); }
.fs-stagger-group > *:nth-child(2)  { --fs-delay: calc(var(--fs-stagger-step) * 1); }
.fs-stagger-group > *:nth-child(3)  { --fs-delay: calc(var(--fs-stagger-step) * 2); }
.fs-stagger-group > *:nth-child(4)  { --fs-delay: calc(var(--fs-stagger-step) * 3); }
.fs-stagger-group > *:nth-child(5)  { --fs-delay: calc(var(--fs-stagger-step) * 4); }
.fs-stagger-group > *:nth-child(6)  { --fs-delay: calc(var(--fs-stagger-step) * 5); }
.fs-stagger-group > *:nth-child(7)  { --fs-delay: calc(var(--fs-stagger-step) * 6); }
.fs-stagger-group > *:nth-child(8)  { --fs-delay: calc(var(--fs-stagger-step) * 7); }
.fs-stagger-group > *:nth-child(9)  { --fs-delay: calc(var(--fs-stagger-step) * 8); }
.fs-stagger-group > *:nth-child(10) { --fs-delay: calc(var(--fs-stagger-step) * 9); }


/* ==========================================================================
   7. SCROLL-DRIVEN ANIMATIONS (Modernstes CSS)
   ========================================================================== */
/* Löst Animationen aus, basierend auf der Scroll-Position im Viewport.
   Kein JavaScript benötigt! (Benötigt Chromium >115, Fallback greift sonst) */

@supports (animation-timeline: view()) {
  .fs-scroll-reveal-up {
    animation: fs-enter-slide-up-anim linear both;
    animation-timeline: view();
    /* Startet, wenn Element 10% im Viewport ist, ist fertig, wenn es 30% im Viewport ist */
    animation-range: entry 10% cover 30%; 
  }

  .fs-scroll-scale {
    animation: fs-enter-zoom-anim linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
}



/* ==========================================================================
   TEAM BEREICH (Schild-Effekt & Harmonisierung)
   ========================================================================== */

.fs-team-member {
    max-width: 320px; /* Hält das Ganze "nicht zu wuchtig" */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- BILD-HARMONISIERUNG --- */
.fs-team-photo-wrapper {
    width: 100%;
    /* Eine organische Form nimmt die Strenge. Alternativ: aspect-ratio: 1/1; */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    overflow: hidden;
    position: relative;
    /* Optional: Subtiler Umgebungs-Schatten aus deinen Tools */
    box-shadow: var(--fs-shadow-ambient); 
}

.fs-team-img {
    width: 100%;
    aspect-ratio: 4 / 5; /* Zwingt alle Bilder ins gleiche Format */
    object-fit: cover; /* Beschneidet das Bild automatisch füllend */
    
    /* Der Trick für Farbharmonie: Bilder sind entsättigt und wärmer, bis man hovert */
    filter: sepia(30%) grayscale(80%) contrast(110%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* Hover-Effekt: Bild wird farbig und zoomt minimal heran */
.fs-team-member:hover .fs-team-img {
    filter: sepia(0%) grayscale(0%) contrast(100%);
    transform: scale(1.05);
}

/* Hilfsklassen für den individuellen Zuschnitt pro Bild */
.fs-pos-top    { object-position: center top; }
.fs-pos-center { object-position: center center; }
.fs-pos-bottom { object-position: center bottom; }


/* --- DAS "SCHILD" (Kantig & Dynamisch) --- */
.fs-team-sign {
    background-color: #ffffff; 
    width: 85%;
    padding: 25px 20px;
    text-align: center;
    border-radius: 15px; 
    
    margin-top: -40px; 
    position: relative; 
    z-index: 2; 
    
    /* WICHTIG: Wenn wir fs-tilt nutzen, müssen wir den Hover speziell behandeln,
       da transform sonst die Rotation von fs-tilt löscht. */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Optionale Zusatzklasse für eine minimal schräge, kantige Papierform */
.fs-sign-cut {
    /* Schneidet rechts oben und links unten einen minimalen Winkel ab */
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

/* Der korrigierte Hover-Effekt für das Schild (inklusive Tilt-Erhalt) */
.fs-team-member:hover .fs-team-sign.fs-tilt {
    /* Hebt das Schild an (-5px) und behält die Neigung von fs-tilt bei */
    transform: translateY(-5px) rotate(-1.5deg) skewX(-1deg);
    /* Macht den Schatten beim Hovern etwas tiefer für mehr Dynamik */
    box-shadow: 0 25px 50px rgba(26, 91, 83, 0.15);
}

/* Falls jemand fs-tilt mal weglässt, greift dieser normale Hover: */
.fs-team-member:hover .fs-team-sign:not(.fs-tilt) {
    transform: translateY(-5px);
}

/* --- TYPOGRAFIE IM SCHILD --- */
.fs-team-name {
    margin: 0 0 5px 0;
    color: #1a5b53;
    font-size: 1.4rem;
}

.fs-team-role {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fs-team-quote {
    margin: 0;
    font-style: italic;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ==========================================================================
   DYNAMISCHE SCHILD-FORMEN (5er-Loop für asymmetrisches Grid)
   ========================================================================== */

/* Variante 1: Leicht nach links geneigter Schnitt */
.fs-team-member:nth-child(5n+1) .fs-sign-cut {
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

/* Variante 2: Schnitt oben links und unten rechts */
.fs-team-member:nth-child(5n+2) .fs-sign-cut {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 2% 100%);
}

/* Variante 3: Etwas breiterer Boden, Anschnitt oben rechts */
.fs-team-member:nth-child(5n+3) .fs-sign-cut {
    clip-path: polygon(0 0, 98% 2%, 100% 100%, 2% 98%);
}

/* Variante 4: Ecken links minimal "abgebrochen" */
.fs-team-member:nth-child(5n+4) .fs-sign-cut {
    clip-path: polygon(2% 2%, 98% 0, 100% 98%, 0 100%);
}

/* Variante 5: Breiter oben, verjüngt sich ganz leicht nach unten */
.fs-team-member:nth-child(5n+5) .fs-sign-cut {
    clip-path: polygon(0 0, 100% 2%, 98% 98%, 1% 100%);
}


/* ==========================================================================
   DYNAMISCHE FOTO-BLOBS (5er-Loop passend zu den Schildern)
   ========================================================================== */

.fs-team-member:nth-child(5n+1) .fs-team-photo-wrapper { 
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; 
}
.fs-team-member:nth-child(5n+2) .fs-team-photo-wrapper { 
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 
}
.fs-team-member:nth-child(5n+3) .fs-team-photo-wrapper { 
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; 
}
.fs-team-member:nth-child(5n+4) .fs-team-photo-wrapper { 
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; 
}
.fs-team-member:nth-child(5n+5) .fs-team-photo-wrapper { 
    border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; 
}

/* ==========================================================================
   PROFILBILD HOVER-EFFEKTE (Container-basiert)
   ========================================================================== */

/* --- BASIS SETUP --- */
/* Nur Zoom und Shine brauchen zwingend overflow: hidden, 
   damit das Bild/der Glanz nicht aus dem Container bricht. */
.fs-fx-zoom,
.fs-fx-shine {
    overflow: hidden;
    position: relative;
    border-radius: inherit; 
}

/* Bereitet alle Bilder innerhalb der FX-Container für die Animation vor */
.fs-fx-zoom img,
.fs-fx-bw-color img,
.fs-fx-blur img,
.fs-fx-lift img {
    transition: all 0.4s ease-in-out;
    will-change: transform, filter, box-shadow;
    display: block; /* Verhindert den typischen, winzigen Abstand unter Bildern */
}


/* --- 1. S/W ZU FARBE --- */
.fs-fx-bw-color img { filter: grayscale(100%); }
.fs-fx-bw-color:hover img { filter: grayscale(0%); }


/* --- 2. SCALE IN (Zoom) --- */
.fs-fx-zoom:hover img { transform: scale(1.1); }


/* --- 3. BLUR TO FOCUS --- */
.fs-fx-blur img { filter: blur(4px) grayscale(40%); }
.fs-fx-blur:hover img { filter: blur(0px) grayscale(0%); }


/* --- 4. LIFT & SHADOW --- */
/* Hebt das Bild leicht an und wirft einen Schatten */
.fs-fx-lift img { 
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
}
.fs-fx-lift:hover img {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.18);
}


/* --- 5. PREMIUM SHINE --- */
/* Zieht einen weißen Lichtreflex über das Bild */
.fs-fx-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 2;
    pointer-events: none; /* Blockiert keine Klicks */
}

.fs-fx-shine:hover::after {
    animation: fs-shine-wipe 0.8s ease forwards;
}

@keyframes fs-shine-wipe {
    100% { left: 200%; }
}

/* ==========================================================================
   MODIFIKATOR: NO-BLOB (Für cleane Team-Grids ohne Verzerrung/Formen)
   ========================================================================== */

/* 1. Überschreibt das 5er-Loop-System und macht das Bild normal eckig */
.fs-team-member.fs-no-blob .fs-team-photo-wrapper {
    /* Setzt die organischen Formen zurück. 
       Tipp: Du kannst hier auch 8px eintragen, wenn du dezent runde Ecken willst */
    border-radius: 0 !important; 
}

/* 2. Entfernt die Papierschnitt-Ecken vom Schild */
.fs-team-member.fs-no-blob .fs-sign-cut {
    clip-path: none !important;
}

/* 3. Deaktiviert die schräge Neigung (fs-tilt), falls sie im HTML vergeben wurde */
.fs-team-member.fs-no-blob .fs-tilt {
    transform: none !important;
}

/* 4. Korrigiert den Hover-Effekt: Das Schild hebt sich nur noch gerade an (-5px), ohne Neigung */
.fs-team-member.fs-no-blob:hover .fs-team-sign {
    transform: translateY(-5px) !important;
}