@import url('[fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap)');
@font-face {
  font-family: "Optima";
  src: local("Optima"), local("Optima Regular");
  font-display: swap;
}

/* GLOBAL */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
  background-color: #F8F7F3;
  color: #111;
}
h1, h2, h3 {
  font-family: "Optima", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* HERO */
.hero {
  background: linear-gradient(120deg, rgba(140,29,64,0.12), rgba(93,58,155,0.12));
  background-size: 200% 200%;
  animation: heroGradient 15s ease infinite;
}
@keyframes heroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* FADE IN */
.fade-in { opacity:0; transform: translateY(20px);}
.fade-in.visible { opacity:1; transform: translateY(0); transition: all 1.2s ease; }
.fade-in-delay { transition-delay: .4s; }

/* BUTTON (wenn Tailwind ausfällt) */
.button-primary {
  background-color: #8C1D40;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.button-primary:hover { background-color: #5D3A9B; }

/* FOOTER */
footer { font-size: 0.875rem; color: #666; }

@media (max-width:768px){
  h1{font-size:2.5rem;}
  h2{font-size:2rem;}
  section{padding-top:4rem;padding-bottom:4rem;}
}