@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --primary: #00ff9d;
    --primary-glow: rgba(0, 255, 157, 0.4);
    --bg-dark: #0a0a0a;
    --bg-light: #f8f9fa;
}

* {
    transition-property: background-color, border-color, color, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.tail-container { font-family: 'Inter', system-ui, sans-serif; }
.logo-font { font-family: 'Space Grotesk', sans-serif; }

/* Theme Backgrounds */
.hero-bg { background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a1a 100%); }
html.light .hero-bg { background: linear-gradient(135deg, var(--bg-light) 0%, #e5e7eb 100%); }
html.light body { background-color: #ffffff; color: #111111; }
html.light .bg-black { background-color: #f3f4f6; }
html.light .bg-neutral-900, html.light .bg-neutral-950 { background-color: #ffffff; border: 1px solid #e5e7eb; }

/* Navigation & Buttons */
.nav-link { position: relative; }
.nav-link:after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -4px; left: 0; background-color: var(--primary); transition: width 0.3s ease;
}
.nav-link:hover:after { width: 100%; }

.btn-primary {
    background-color: #ffffff; color: #000000; font-weight: 600;
    padding: 1rem 2rem; border-radius: 9999px; display: inline-flex;
    align-items: center; justify-content: center; gap: 0.75rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); }

.btn-outline {
    border: 2px solid var(--primary); color: var(--primary); font-weight: 600;
    padding: 1rem 2rem; border-radius: 9999px; display: inline-flex;
    align-items: center; justify-content: center; gap: 0.75rem; background: transparent;
}
.btn-outline:hover {
    background-color: var(--primary); color: #000000;
    transform: translateY(-2px); box-shadow: 0 10px 25px var(--primary-glow);
}

/* Effekte */
.text-glow { text-shadow: 0 0 20px rgba(0, 255, 157, 0.2); }
.glow-box { box-shadow: 0 0 50px rgba(0, 255, 157, 0.1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(255,255,255,0.1); }

/* Formulare */
input:focus, textarea:focus, select:focus { box-shadow: 0 0 15px rgba(0, 255, 157, 0.2); outline: none; border-color: var(--primary); }

/* Animationen (Scroll Reveal) */
.reveal-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-up.active { opacity: 1; transform: translateY(0); }

/* Pfand-Clicker */
#pfandCanvas { filter: drop-shadow(0 0 20px var(--primary)); transition: transform 0.1s; }
#pfandCanvas:active { transform: scale(0.95); }
.particle { position: absolute; font-size: 24px; pointer-events: none; animation: flyUp 0.8s ease-out forwards; }
@keyframes flyUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-120px) scale(1.5); opacity: 0; }
}