:root {
    --bg-dark: #0f172a;
    --bg-dark-accent: #1e293b;
    --accent: #22c55e;
    --accent-hover: #16a34a;
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --border: #334155;
    --glass: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.7;
    /* Animated Gradient Background */
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 70%);
    background-attachment: fixed;
    /* Simple Parallax */
    overflow-x: hidden;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal.active {
    animation: fadeInUp 0.8s forwards;
}

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--accent);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
    z-index: 1000;
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#back-to-top:hover {
    transform: translateY(-5px);
    background: var(--accent-hover);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Nav */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links a {
    color: var(--text-dim);
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--accent);
}

/* Hero */
/* Hero Slider */
header.hero {
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 600px;
    /* Fixed height for slider */
    border-radius: 0 0 20px 20px;
    padding: 0;
    /* Remove padding as slides are absolute */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

/* Dark Overlay for Readability */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    /* Dark semi-transparent */
    z-index: -1;
}

.slide-content {
    position: relative;
    z-index: 3;
    padding: 0 20px;
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: var(--accent);
}

h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.subtitle {
    font-size: 1.5rem;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto 40px;
}

.hero-image {
    display: none;
    /* Hide old hero image */
}

/* Section Common */
section {
    padding: 100px 0;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.section-desc {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 60px;
    font-size: 1.2rem;
}

/* Full Width Feature Strips */
.feature-strip {
    padding: 80px 0;
    width: 100%;
}

/* Alternate Background for Strip */
.feature-strip.alt-bg {
    background: var(--bg-dark-accent);
    /* Slightly lighter dark */
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Detailed Features (Alternating) */
.feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    /* Removed Card Styling */
}

.feature-row:hover {
    /* No hover effect for full width layout */
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
}

.feature-text h3 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.feature-text p {
    font-size: 1.1rem;
    color: var(--text-dim);
}

/* Image container styling */
.feature-image {
    flex: 1;
    background: var(--bg-dark);
    /* Darker inner bg for contrast */
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Pricing */
.pricing-section {
    background: var(--bg-dark-accent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.price-card {
    background: var(--glass);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
}

.price-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
}

.price-card.popular {
    border: 2px solid var(--accent);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.1);
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}

.duration {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.savings {
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 30px;
    height: 24px;
}

.btn {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn:hover {
    background: var(--accent-hover);
}

/* Footer */
footer {
    padding: 60px 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* Utilities */
.text-gradient {
    background: linear-gradient(45deg, var(--accent), #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile Menu Button (Hidden on Desktop) */
#mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #mobile-menu-btn {
        display: block;
    }

    nav {
        position: relative;
    }

    .nav-links {
        display: none;
        /* Hidden by default */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px;
        border-bottom: 1px solid var(--border);
        text-align: center;
        gap: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }

    .nav-links.active {
        display: flex;
        /* Show when active */
    }

    .nav-links a {
        display: block;
        margin: 10px 0;
        font-size: 1.2rem;
    }

    header.hero {
        padding: 40px 0 20px;
    }

    h1 {
        font-size: 2.5rem;
    }

    /* Force Stacked Layout for Content */
    .feature-row,
    .feature-row.reverse {
        display: flex;
        flex-direction: column !important;
        /* Force stack */
        text-align: center;
        gap: 20px;
        margin-bottom: 80px;
    }

    /* Bring image to top or bottom? usually image visual first is nice, or text first. 
       Let's keep text first (default column) as it explains what you see, or image first? 
       User said "text und bild nebeneinander... nicht schön".
       Let's ensure they are stacked cleanly.
    */
    .feature-row.reverse {
        flex-direction: column !important;
    }

    .feature-text {
        order: 2;
        /* Text below image? or text above? Let's try Image Top (1), Text Bottom (2) for visual impact */
    }

    .feature-image {
        order: 1;
        width: 100%;
        height: auto;
        min-height: 200px;
        margin-bottom: 15px;
    }

    .feature-text h3 {
        margin-top: 10px;
    }

    /* Pricing Grid */
    .pricing {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }
}