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

:root {
    --green: #0D5C4A;
    --orange: #F36A21;
    --pink: #F24892;
    --cream: #FCFBF8;
    --text: #2B2B2B;
    --light-bg: #FAFAFA;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); line-height: 1.6; background-color: #fff; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; color: var(--green); font-weight: 600; }
.container { width: min(1180px, 90%); margin: auto; }
section { padding: 100px 0; }

.btn { padding: 14px 28px; border-radius: 4px; text-decoration: none; font-weight: 600; display: inline-block; cursor: pointer; font-family: 'Inter', sans-serif; transition: 0.3s; border: none; }
.btn-orange { background: var(--orange); color: #fff; border: 1px solid var(--orange); }
.btn-orange:hover { background: transparent; color: var(--orange); }

/* Navigation */
.main-nav { padding: 5px 0; position: sticky; top: 0; background: #fff; z-index: 1000; border-bottom: 1px solid #f0f0f0; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { height: 100px; align-items: center; display: flex; }
.nav-links { display: flex; gap: 35px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text); font-size: 0.95rem; font-weight: 400; transition: color 0.3s; }
.nav-links a:hover { color: var(--green); }
.nav-links .btn-orange:hover { color: var(--orange); }

/* Footer */
footer { background: var(--green); color: #fff; position: relative; }
.footer-gradient { height: 6px; width: 100%; background: linear-gradient(90deg, var(--green) 0%, var(--pink) 50%, var(--orange) 100%); }
.footer-content { display: flex; align-items: center; justify-content: space-between; padding: 40px 20px; }

.f-center { text-align: center; font-size: 0.9rem; opacity: 0.9; }
.f-center span { opacity: 0.7; font-size: 0.8rem; }

.footer-links a { color: #fff; text-decoration: none; margin-left: 20px; font-size: 0.9rem; opacity: 0.8; transition: 0.3s; }
.footer-links a:hover { opacity: 1; }

.footer-logo { border: 1px solid red; height: 80px; width: auto; }

/* Mobile Optimierung */
@media (max-width: 768px) { .footer-content { flex-direction: column; gap: 20px; } }


.fade-in { opacity: 0; transform: translateY(20px); transition: 0.8s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }