/* 1. Box sizing overal gelijk trekken */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Margins resetten en scroll-gedrag soepel maken */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
     font-family: "Manrope", sans-serif;
}

/* 3. Body instellingen voor een solide basis */
body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-color: #f8f9fa; /* Lichte achtergrond, erg 'system'achtig */
    color: #222;
}

/* 4. Maak afbeeldingen makkelijker om mee te werken */
img, picture {
    max-width: 100%;
    display: block;
}

.special-header {
    margin-top: 30px;
    font-size: 60px;
    line-height: 62px;
}

/* 5. Inputs en buttons erven het font van de body */
input, button, textarea, select {
    font: inherit;
}

/* 6. Verwijder animaties voor mensen die dat liever niet hebben (toegankelijkheid) */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 7. Focus-ring stijl (belangrijk voor usability) */
:focus-visible {
    outline: 3px solid var(--my-card-accent, #007bff);
    outline-offset: 2px;
}



/* Basis typo */

h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 55px;
    margin-bottom: 30px;
}

h2 {
    font-size: 26px;
    line-height: 27px;
    font-weight: 300;
    margin-bottom: 20px;
}

h3 {
    font-size: 30px;
    line-height: 33px;
    font-weight: 700;
    margin-bottom: 20px;
}


p {
    font-size: 22px;
    line-height: 28px;
    font-weight: 300;
    margin-bottom: 30px;
}

.menu p {
    font-size: 23px!important;
    line-height: 28px;
    font-weight: 300;
    margin-bottom: 30px;
}

.mob {
    margin-bottom: 30px;
    margin-left: -30px;
    margin-top: -30px;
    min-width: calc(100% + 60px);
    display: block;
}

.mobiel {
    display: block;
}


body {
    background-color: #ccc;
}


hr {
    border: none;
    height: 3px;
    background: #000;
    margin: 40px 0;
}

/* Of specifiek voor een class */
my-knop.gevaar {
    --knop-kleur: red;
}

.card-grid {
    display: grid;
    /* Maak kolommen van minimaal 300px, vul de rest van de ruimte op */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Optioneel: geef ze allemaal een andere kleur via de variabelen die we maakten */
my-card:nth-child(even) {
    --my-card-accent: #007bff;
}

.special-header {
    margin-top: 0px;
    font-size: 85px;
    line-height: 78px;
    color: white;
}

.special-slogan {
        font-size: 40px;
        line-height: 45px;
        margin-bottom: 20px;
}

.spotlogo {
    width: 80px;
}

.cover-container {
    transform: translateY(-180px);
    text-decoration: none;
    color: #333;
}

@media (min-width: 600px) {

    .menu p {
    font-size: 40px!important;
    line-height: 45px;
    font-weight: 300;
    margin-bottom: 30px;
}

    .spotlogo {
    width: 150px;
}

    hr {
        border: none;
        height: 3px;
        background: #000;
        margin: 40px 0;
        transform: auto;
    }


    .special-header {
        margin-top: 150px;
        font-size: 140px;
        line-height: 125px;
        color: white;
        transform: auto;
    }

    .special-slogan {
        font-size: 80px;
        line-height: 85px;
        margin-bottom: 20px;
        transform: auto;
}


    h1 {
        font-size: 85px;
        line-height: 85px;
        margin-bottom: 30px;
    }
    h2 {
        font-size: 40px;
        line-height: 45px;
        margin-bottom: 20px;
    }

    .mob {
        display: none;
    }

    .mobiel {
    display: none;
}

}