/* Ergänzungen zum Original-Stylesheet: ersetzt die Framer-Motion-Animationen der React-Version */

:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Navigation fährt beim Laden von oben herein */
.nav-enter { animation: nav-in 0.8s var(--ease) 0.2s both; }
@keyframes nav-in { from { transform: translateY(-80px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hero: Einblenden beim Laden */
.load-up { animation: load-up var(--ld, 0.8s) ease-out var(--d, 0s) both; }
@keyframes load-up { from { opacity: 0; transform: translateY(var(--ly, 22px)); } to { opacity: 1; transform: none; } }
.load-fade { animation: load-fade 0.9s ease-out var(--d, 0s) both; }
@keyframes load-fade { from { opacity: 0; } to { opacity: 1; } }
.line-up { animation: line-up 0.95s var(--ease) var(--d, 0s) both; }
@keyframes line-up { from { transform: translateY(115%); } to { transform: none; } }
.hero-visual { animation: hero-in 1.1s var(--ease) 0.6s both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }
#hero-parallax { will-change: transform; }

/* Einblenden beim Scrollen */
.reveal {
  opacity: 0;
  transform: translateY(var(--ry, 32px));
  transition: opacity 0.75s var(--ease) var(--rd, 0s), transform 0.75s var(--ease) var(--rd, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Über-uns-Bild Parallax */
#about-img { will-change: transform; }

/* Mobiles Menü */
.mobile-menu { animation: fade-in 0.3s ease both; }
.mobile-menu.closing { animation: fade-out 0.3s ease both; }
.menu-link { animation: menu-link-in 0.5s var(--ease) calc(0.08s + var(--i) * 0.06s) both; }
@keyframes menu-link-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.menu-cta { animation: load-up 0.5s ease-out 0.45s both; --ly: 16px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Referenz-Karten */
.ref-card { animation: card-in 0.55s var(--ease) both; }
.ref-card.leaving { animation: card-out 0.3s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } }

/* Formular-Tabs */
.tab-panel { animation: panel-in 0.35s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tab-btn { color: #556458; }
.tab-btn:hover { color: #2F5233; }
.tab-btn.is-active { background-color: #2F5233; color: #fff; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

/* Eingabefelder (entspricht inputCls im Original) */
.field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #E2EAE4;
  background-color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #1A251C;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.field::placeholder { color: #9aa8a0; }
.field:focus { border-color: #A8D8B9; box-shadow: 0 0 0 4px rgb(168 216 185 / 0.25); }

/* Rechtliche Fenster */
.legal-modal { animation: fade-in 0.25s ease both; }
.legal-modal.closing { animation: fade-out 0.25s ease both; }
.legal-panel { animation: panel-pop 0.4s var(--ease) both; }
@keyframes panel-pop { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: none; } }

[hidden] { display: none !important; }

/* Hinweis-Meldungen (wie "sonner" im Original, oben mittig) */
.toaster {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px;
  width: min(356px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 8px;
  padding: 16px; border-radius: 8px; border: 1px solid; font-size: 13px; line-height: 1.45;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  animation: toast-in 0.4s var(--ease) both;
}
.toast.leaving { animation: toast-out 0.3s ease both; }
.toast svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.toast-success { background: #ecfdf3; border-color: #bffcd9; color: #008a2e; }
.toast-error { background: #fff0f0; border-color: #ffe0e1; color: #e60000; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee { animation-duration: 120s; }
}

/* Unsichtbares Lockfeld gegen Spam-Programme */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }