/* ---------- BASIS ---------- */

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f9ff;      /* zeer licht blauw */
    color: #1f2a44;                 /* donkerblauw */
    line-height: 1.6;
}

/* Container om de content te centreren */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 50px;
}

/* ---------- LOGO-PLAATS ---------- */

header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 20px 0;
}

header .logo-placeholder {
    width: 150px;
    height: 60px;
    background-color: #e6eefc;     /* subtiel blauw vlak */
    border: 2px dashed #a6bce8;    /* lichte blauwe kader */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6d7fa8;
    font-size: 14px;
    font-style: italic;
}

/* ---------- TYPOGRAFIE ---------- */

h1, h2, h3 {
    font-weight: 600;
    color: #102040;   /* donker marineblauw */
}

h1 {
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

h2 {
    margin-top: 40px;
    border-bottom: 3px solid #bcd3ff;   /* zacht blauw accent */
    padding-bottom: 6px;
}

h3 {
    margin-top: 25px;
}

/* ---------- LIJSTEN ---------- */

ul {
    margin: 10px 0 20px 25px;
}

ul li {
    margin-bottom: 6px;
}

/* ---------- BELANGRIJK-BLOK ---------- */

.belangrijk {
    background-color: #fff3f3;      /* licht rood vlak */
    border-left: 5px solid #d62828; /* fel rood accent */
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 4px;
}

.belangrijk p {
    margin: 0;
    font-weight: 500;
    color: #8b1b1b;  /* donkerrood */
}

/* ---------- LINKS ---------- */

a {
    color: #245ec7;          /* blauw */
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
    color: #123a85;          /* donkerder blauw */
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {
    main {
        padding: 20px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
    }

    header .logo-placeholder {
        width: 100%;
        height: 70px;
    }
}