<style>
    /* ALGEMENE INSTELLINGEN */
    :root {
        --primary: #333;
        --accent: #007bff;
        --light: #f8f9fa;
        --text: #212529;
    }

    /* THEMA SPECIFIEKE KLEUREN */
    .theme-bb { --primary: #8B0000; --accent: #ffcc00; --bg-image: linear-gradient(135deg, #2b0000 0%, #8B0000 100%); }
    .theme-snooker { --primary: #006400; --accent: #d4af37; --bg-image: linear-gradient(135deg, #002b00 0%, #006400 100%); }
    
    body {
        font-family: 'Segoe UI', system-ui, sans-serif;
        margin: 0; padding: 0;
        color: var(--text);
        background: var(--light);
        line-height: 1.6;
    }

    /* HEADER & NAVIGATIE */
    header {
        background: white;
        padding: 1rem 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo { font-weight: bold; font-size: 1.2rem; text-decoration: none; color: #333; }
    .back-link { text-decoration: none; color: #666; font-size: 0.9rem; }
    .back-link:hover { color: #000; }

    /* HERO SECTIES */
    .hero {
        background: var(--primary);
        color: white;
        padding: 4rem 2rem;
        text-align: center;
    }
    
    /* Specifiek voor themapagina's */
    .themed-hero { background: var(--bg-image); }

    .hero h1 { margin: 0 0 1rem 0; font-size: 2.5rem; }
    .hero p { opacity: 0.9; font-size: 1.2rem; max-width: 600px; margin: 0 auto; }

    /* CONTAINER */
    .container { max-width: 1000px; margin: 0 auto; padding: 2rem; }

    /* HOME KEUZE BLOKKEN */
    .split-choice {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: -3rem; /* Overlap effect */
    }

    .choice-card {
        background: white;
        border-radius: 8px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        text-align: center;
        transition: transform 0.2s;
        border-top: 5px solid var(--card-color);
    }
    .choice-card:hover { transform: translateY(-5px); }
    
    /* DETAIL PAGINA SECTIES */
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin: 3rem 0;
    }
    
    .feature-item h3 { color: var(--primary); }
    
    .pricing-section {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        border: 1px solid #ddd;
        text-align: center;
    }
    
    .price { font-size: 2rem; color: var(--primary); font-weight: bold; }

    /* KNOPPEN */
    .btn {
        display: inline-block;
        padding: 0.8rem 1.5rem;
        background: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: 4px;
        margin-top: 1rem;
        font-weight: bold;
    }
    .btn:hover { opacity: 0.9; }

    /* FOOTER */
    footer { text-align: center; padding: 2rem; color: #777; font-size: 0.9rem; margin-top: 3rem; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .split-choice { grid-template-columns: 1fr; }
    }
</style>