.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-top: 32px;
}
.hero-buttons .btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
:root {
    --primary: #2563EB;
    --secondary: #1E293B;
    --bg: #FFFFFF;
    --text: #334155;
    --text-light: #64748B;
    --accent: #F8FAFC;
    --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: var(--bg); color: var(--text); line-height: 1.6; }

/* Scope frontpage container to content only, not navbar */
main .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* HEADER */
header { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.logo { font-weight: 800; font-size: 1.5rem; color: var(--primary); }
.btn { padding: 12px 24px; background: var(--primary); color: white; border-radius: var(--radius); text-decoration: none; font-weight: 600; display: inline-block; }

/* HERO */
.hero { padding: 80px 0 0; text-align: center; background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.hero h1 { font-size: 3rem; color: var(--secondary); margin-bottom: 20px; letter-spacing: -1px; }
.hero p { font-size: 1.2rem; color: var(--text-light); max-width: 700px; margin: 0 auto 30px; }
.hero-screenshot { margin-top: 60px; }
.hero-screenshot img { width: 100%; max-width: 960px; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 30px rgba(0,0,0,0.10); display: block; margin: 0 auto; }

/* PROCESS STEPS */
.steps { padding: 60px 0; background: white; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.step-num { width: 40px; height: 40px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold; }

/* DETAILED FEATURES (Alternating) */
.detail-section { padding: 80px 0; }
.detail-row { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
.detail-row:nth-child(even) { flex-direction: row-reverse; }
.detail-content { flex: 1; }
.detail-image { flex: 1; background: var(--accent); height: 300px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 4rem; border: 1px solid #e2e8f0; }

.detail-content h2 { font-size: 2rem; color: var(--secondary); margin-bottom: 15px; }
.detail-content ul { list-style: none; margin-top: 20px; }
.detail-content li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; }
.detail-content li::before { content: "✓"; color: var(--primary); font-weight: bold; }

/* FEATURE GRID */
.features-grid-section { padding: 80px 0; background: white; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.feature-card { padding: 30px; border-radius: var(--radius); border: 1px solid #eee; transition: transform 0.2s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.feature-icon { font-size: 2rem; margin-bottom: 20px; display: inline-block; padding: 12px; background: var(--accent); border-radius: 12px; }
.feature-card h3 { margin-bottom: 10px; color: var(--secondary); }
.feature-card p { color: var(--text-light); font-size: 0.95rem; }

/* FAQ / IN-DEPTH */
.faq { padding: 80px 0; background: var(--accent); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.faq-item { background: white; padding: 25px; border-radius: var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.faq-item h4 { margin-bottom: 10px; color: var(--secondary); }

.festkatalog-section { padding: 80px 0; background: var(--accent); }
.festkatalog-section .detail-row { margin-bottom: 0; }
.detail-screenshot { flex: 1; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.10); border: 1px solid #e2e8f0; }
.detail-screenshot img { width: 100%; display: block; }

@media (max-width: 768px) {
    .detail-row { flex-direction: column !important; gap: 30px; }
    .step-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.05rem; }
    .hero { padding: 60px 0; }
    
    /* Hide detail images on mobile */
    .detail-image { display: none; }
    .detail-screenshot { display: none; }
    .hero-screenshot img { border-radius: 0; }
    
    .detail-section { padding: 40px 0; }
    .detail-row { margin-bottom: 60px; }
    .detail-content h2 { font-size: 1.6rem; text-align: center; }
    .detail-content p { text-align: center; }
    .detail-content ul { margin-top: 15px; }
    
    /* FAQ grid to single column */
    .faq-grid { grid-template-columns: 1fr; gap: 20px; }
    
    /* Feature cards */
    .features-grid { grid-template-columns: 1fr; gap: 20px; }
    
    /* Steps section */
    .steps { padding: 40px 0; }

    /* Center hero-buttons */
    .hero-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }
    
    /* Button adjustments */
    .btn { padding: 14px 28px; font-size: 1rem; }
}