/* =========================================================
   BASIS
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #292929;

    background: #f5f5f5;

    line-height: 1.7;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(1100px, calc(100% - 32px));

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    background: #222;

    color: white;

    padding: 18px 0;
}

.header-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.logo {
    color: white;

    text-decoration: none;

    font-size: 1.4rem;

    font-weight: bold;
}


.navigation {
    display: flex;

    gap: 24px;
}


.navigation a {
    color: white;

    text-decoration: none;

    font-size: 0.95rem;
}


.navigation a:hover {
    text-decoration: underline;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb {
    padding: 22px 0 14px;

    color: #777;

    font-size: 0.9rem;
}


/* =========================================================
   ARTIKEL
========================================================= */

.content {
    background: white;

    padding: 45px clamp(22px, 5vw, 70px);

    margin-bottom: 50px;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   TITELS
========================================================= */

h1 {
    margin-top: 0;

    margin-bottom: 20px;

    font-size: clamp(2rem, 5vw, 3.3rem);

    line-height: 1.15;
}


h2 {
    margin-top: 50px;

    margin-bottom: 18px;

    font-size: 1.8rem;

    line-height: 1.3;
}


h3 {
    line-height: 1.3;
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    font-size: 1.2rem;

    color: #555;

    margin-bottom: 30px;
}


/* =========================================================
   AFBEELDING
========================================================= */

.main-image {
    margin: 30px 0 40px;

    padding: 0;
}


.main-image img {
    display: block;

    width: 100%;

    max-height: 550px;

    object-fit: cover;

    border-radius: 8px;
}


/* =========================================================
   KAARTEN
========================================================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    margin-top: 25px;
}


.card {
    padding: 25px;

    background: #f2f0eb;

    border-radius: 8px;
}


.card h3 {
    margin-top: 0;
}


.card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BEGRIPPEN
========================================================= */

.terms {
    margin-top: 20px;
}


.term {
    padding: 18px 0;

    border-bottom: 1px solid #ddd;
}


.term:first-child {
    border-top: 1px solid #ddd;
}


.term h3 {
    margin: 0 0 5px;
}


.term p {
    margin: 0;
}


/* =========================================================
   SAMENVATTING
========================================================= */

.summary {
    margin-top: 45px;

    padding: 25px 30px;

    background: #f1f1f1;

    border-left: 5px solid #777;

    border-radius: 3px;
}


.summary h2 {
    margin-top: 0;
}


.summary p {
    margin-bottom: 0;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding: 30px 0;

    background: #222;

    color: white;

    text-align: center;
}


.footer p {
    margin: 0;
}


/* =========================================================
   TABLET / MOBIEL
========================================================= */

@media (max-width: 800px) {

    .header-inner {
        flex-direction: column;

        align-items: flex-start;
    }


    .navigation {
        flex-wrap: wrap;

        gap: 12px 18px;
    }


    .cards {
        grid-template-columns: 1fr;
    }


    .content {
        padding: 32px 22px;
    }

}


/* =========================================================
   KLEINE TELEFOONS
========================================================= */

@media (max-width: 500px) {

    .container {
        width: min(
            100% - 22px,
            1100px
        );
    }


    .content {
        padding: 25px 17px;
    }


    h1 {
        font-size: 2.1rem;
    }


    h2 {
        font-size: 1.55rem;
    }


    .intro {
        font-size: 1.05rem;
    }


    .main-image img {
        max-height: 350px;
    }

}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.logo {
margin-right: auto;
}

.navigation {
display: flex;
align-items: center;
gap: 20px;
}

.language-navigation {
display: flex;
align-items: center;
gap: 15px;
}

.navigation a,
.language-navigation a {
text-decoration: none;
}

.main-navigation {
display: flex;
align-items: center;
gap: 20px;
margin-left: auto;
}

.header .navigation a {
    font-size: 1.2rem; /* ongeveer 19px */
}