/* Voeg je CSS code hier toe.
Bijvoorbeeld:
.example {
    color: red;
}

Voor het opfrissen van je CSS kennis, kijk op http://www.w3schools.com/css/css_syntax.asp

Einde van de reactie */ 

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Vereenvoudigde en gescopen CSS om conflicten te minimaliseren -->
    <style>
        /* * ALLE klassen zijn nu gescoped met het voorvoegsel 'b-' 
         * Dit voorkomt conflicten met generieke namen zoals .grid, .text of .button.
         */
        
        /* === Basis & Algemene Layout === */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f9fb;
            padding: 16px;
        }
        .b-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* === Header === */
        .b-header {
            background-color: #059669; /* Emerald Green */
            color: white;
            padding: 24px;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 24px;
        }
        .b-header h1 {
            font-size: 1.875rem;
            font-weight: 800;
            margin: 0 0 4px 0;
        }
        .b-header p {
            color: #d1fae5;
            margin: 0;
        }

        /* === Sectie: Gedetailleerde Routes (Gebruikers Grid) === */
        .b-detail-section {
            margin-top: 40px;
            padding: 24px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
        }

        /* De gescopede grid definitie */
        .b-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            align-items: stretch;
            padding: 0;
            margin: 0;
        }

        .b-grid > article {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background-color: #fcfcfc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            display: flex; /* Zorgt ervoor dat de inhoud de hoogte vult */
            flex-direction: column;
            height: 100%;
        }
        .b-grid > article:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* De gescopede 'text' block */
        .b-card-text {
            padding: 16px;
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Neemt de beschikbare ruimte in */
        }

        /* De gescopede 'button' stijl */
        .b-card-text > .b-button {
            display: block;
            text-align: center;
            background: #059669;
            border: none;
            border-radius: 6px;
            color: white;
            padding: 10px;
            margin-top: auto; /* Push button naar de onderkant */
            font-weight: 600;
            text-decoration: none;
            transition: background 0.3s;
            width: 100%;
        }
        .b-card-text > .b-button:hover {
            background: #047857;
        }

        /* === Interne Card Elementen === */
        .b-route-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #059669;
            margin-bottom: 8px;
        }
        .b-meta-info {
            font-size: 0.875rem;
            color: #6B7280;
            margin-bottom: 12px;
        }
        .b-card-details {
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #4B5563;
        }
        .b-card-details strong {
            font-weight: 700;
            color: #1F2937;
        }
        .b-card-label {
            font-weight: 600;
            color: #1F2937;
            margin-top: 10px;
            margin-bottom: 5px;
            border-top: 1px solid #f3f4f6;
            padding-top: 8px;
        }
        .b-card-label:first-of-type {
            border-top: none;
            padding-top: 0;
        }
        
        /* De gescopede 'small' stijl */
        .b-card-text small { 
            font-style: italic;
            display: block;
            margin-top: 10px;
            color: #6B7280;
            line-height: 1.4;
            margin-bottom: 16px;
        }

        /* === Footer === */
        footer {
            margin-top: 24px;
            text-align: center;
            font-size: 0.875rem;
            color: #6B7280;
        }
        
        /* --- Styles voor de optionele Overzichtstabel (Minder belangrijk, maar gescoped) --- */
        .b-summary-container {
            background-color: white;
            border-radius: 0 0 12px 12px;
            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .b-summary-row {
            padding: 16px;
            border-radius: 8px;
            background-color: #ECFDF5;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 300ms ease;
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .b-summary-row:nth-child(even) {
            background-color: white;
            border: 2px solid #6ee7b7;
        }
        .b-summary-row .b-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #065F46;
        }
        @media (min-width: 768px) {
            .b-summary-header { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }
            .b-summary-row { grid-template-columns: repeat(10, 1fr); }
            .b-col-span-2 { grid-column: span 2 / span 2; }
            .b-col-span-3 { grid-column: span 3 / span 3; }
            .b-col-border { border-left: 1px solid #e5e7eb; padding-left: 16px; }
            .b-mobile-hide { display: none; }
            .b-desktop-show { display: block; }
        }