.container {
    max-width: 1600px;  /* of 95% van scherm */
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Cards onder elkaar links */
.container>.card-rooster,
.container>.card-locaties,
.container>.card-vakanties {
    margin: 2rem 0;
    /* ruimte tussen de cards */
    width: 100%;
    text-align: left;
    /* tekst links */

}

.card,
.card-rooster,
.card-locaties,
.card-vakanties {
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgb(218, 195, 153);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.65),
        0 5px 15px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease;
    width: 100%;
    /* vult de hele grid-kolom */
    overflow-x: auto;
    font-size: 1.1rem;
}

.card:hover {
    transform: translateY(-5px);
}


/* Cards onder elkaar */
/* ===============================
   Cards onder elkaar
================================= */
.grid {
    display: flex;
    flex-direction: column;
    /* blijf onder elkaar */
    gap: 2rem;
    width: 100%;
    /* neem volledige breedte van parent */
    max-width: 1600px;
    /* kies gewenste max breedte */
    margin: 0 auto;
}

/* Hover effect voor alle cards */
.card-rooster:hover,
.card-locaties:hover,
.card-vakanties {
    transform: translateY(-5px);
}

/* Koppen in cards */
.card h3,
.card-rooster h3,
.card-locaties h3,
.card-vakanties h3 {
    margin-bottom: 1rem;
}

/* Tabel styling */
.rooster-table {
    width: 100%;
    border-collapse: collapse;

}

.rooster-table th,
.rooster-table td {
    border: 1px solid rgb(218, 195, 153);
    padding: 0.5rem;
    text-align: left;
}

.rooster-table th {
    background: rgba(165, 145, 105, 0.884);
    color: var(--text);
}

.rooster-table td {
    background-color: rgba(82, 72, 52, 0.884);
}

/* Rand weg */
.card,
.card-rooster,
.card-locaties,
.card-vakanties {
    border: none;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.870rem;
}

.badge.open {
    background-color: green;
}

.badge.closed {
    background-color: red;
}

.vinkjes-lijst {
    list-style: none;
    /* verwijdert standaard bolletjes */
    padding-left: 0;
    /* optioneel, verwijdert linker padding */
}

.vinkjes-lijst li::before {
    content: "✔";
    /* vinkje */
    color: rgb(199, 178, 139);
    /* kleur van het vinkje */
    margin-right: 0.5rem;
    /* ruimte tussen vinkje en tekst */
}
.highlight {
    color: rgb(199, 178, 139);         
    font-size: 1.8rem;        /* groter dan normale tekst */
    font-weight: bold;         /* optioneel, voor extra nadruk */
    font-family: 'Arial', sans-serif; /* voorbeeld lettertype */
}


/* ===============================
   WEERBAARHEIDSTRAINING SECTION
================================= */
.weerbaarheidstraining-sections {
    position: relative;
    padding: 5rem 2rem;

    background-image: url("images/Logo Erik Batstra schets v3.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    color: #f5f3ee;
    overflow: hidden;

    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    font-size: 1.3rem;
    
}

/* Overlay boven de afbeelding */
.weerbaarheidstraining-sections::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(67, 60, 37, 0.85);
    /* jouw background kleur */
    z-index: 0;
}

/* Content boven overlay */
.weerbaarheidstraining-sections>* {
    position: relative;
    z-index: 1;
}
.weerbaarheidstraining-sections .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 2rem;
    max-width: 1200px; /* voorkomt dat de cards te ver uit elkaar staan op grote schermen */
    margin: 0 auto;    /* centreren van de grid */
}
.weerbaarheidstraining-sections .card {
    font-size: 1.5rem;  /* tekst groter maken */
    line-height: 1.6;   /* prettige regelafstand */
}