/* Basis-Klasse: Das Element ist unsichtbar und versetzt */
.fade-up {
  opacity: 0;
  transform: translateY(40px);

  /* Hardware-Beschleunigung für ruckelfreies Scrollen auf Handys */
  will-change: opacity, transform;
	
  /* Die Bewegung definieren */
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Aktiv-Klasse: Wird per JS hinzugefügt, wenn das Element sichtbar ist */
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* --- OPTIONAL: Verzögerungs-Klassen (für den Wasserfall-Effekt) --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }


/* ================================================
   Hover-Effekte — animations.css (ergänzen)
   ================================================ */

/* Lift */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.25s ease;
}
.hover-lift:hover,
.hover-lift:active {
  transform: translateY(-6px);
  border-color: var(--color-border-primary);
}

/* Scale */
.hover-scale {
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.hover-scale:hover,
.hover-scale:active {
  transform: scale(1.04);
}

/* Border */
.hover-border {
  transition: border-color 0.25s ease, background 0.25s ease;
}
.hover-border:hover,
.hover-border:active {
  border-color: #7F77DD; /* Akzentfarbe anpassen */
  background: var(--secondary);
}

/* Lift + Border (empfohlen für Cards) */
.hover-lift-border {
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.25s ease,
              background 0.25s ease;
}
.hover-lift-border:hover,
.hover-lift-border:active {
  transform: translateY(-5px);
  border-color: #7F77DD;
  background: var(--secondary);
}

/* Underline-Slide (für Navigations-Links) */
.hover-underline {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: #7F77DD; /* Akzentfarbe anpassen */
  transition: width 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.hover-underline:hover::after,
.hover-underline:active::after {
  width: 100%;
}

/* Button Fill */
.hover-btn {
  color: #534AB7;
  border: 1.5px solid #7F77DD;
  background: transparent;
  transition: background 0.25s ease,
              color 0.25s ease,
              transform 0.2s ease;
}
.hover-btn:hover,
.hover-btn:active {
  background: #7F77DD;
  color: #fff;
  transform: scale(0.98);
}