/* workbaseonline.nl — sobere basisopmaak, in dezelfde kleuren als de andere
   WorkBase-sites (#155FA8 / #1E90FF). Bewust klein gehouden: dit is een casco,
   de definitieve vormgeving komt bij het opnieuw opbouwen. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background: #f4f7fb;
    line-height: 1.55;
}

.binnen { max-width: 900px; margin: 0 auto; padding: 0 20px; }

.site-header { background: #155FA8; color: #fff; padding: 18px 0; }
.site-header .merk {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Het logo is zelf lichtblauw en zou op de blauwe balk wegvallen; daarom op
   een wit vlakje, de achtergrond waarvoor het ontworpen is. */
.site-header .merk img {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    height: 40px;
    width: auto;
}

main { padding: 48px 20px 60px; }

.intro h1 { color: #155FA8; font-size: 30px; margin: 0 0 12px; }
.intro .lead { font-size: 18px; color: #374151; max-width: 620px; }

.knop {
    display: inline-block;
    margin-top: 14px;
    background: #1E90FF;
    color: #fff;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 700;
}
.knop:hover { background: #155FA8; }

.blokken { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 44px; }
.blokken article { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; }
.blokken h2 { color: #155FA8; font-size: 18px; margin: 0 0 8px; }

/* Afsluitend blok: visie + contact */
.slot {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 26px;
    margin-top: 44px;
}
.slot h2 { color: #155FA8; font-size: 20px; margin: 0 0 10px; }
.slot .citaat { font-size: 17px; color: #374151; max-width: 640px; margin: 0; }

.kenmerken {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.kenmerken li {
    background: #eef4fb;
    color: #155FA8;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 700;
}

/* Juridische pagina's: leesbare lap tekst */
.juridisch {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 26px;
    max-width: 720px;
}
.juridisch h1 { color: #155FA8; font-size: 26px; margin: 0 0 8px; }
.juridisch h2 { color: #155FA8; font-size: 18px; margin: 22px 0 6px; }
.juridisch h2 .nr { color: #6b7280; font-weight: 400; }
.juridisch p { margin: 0 0 12px; }
.juridisch .bijgewerkt { color: #6b7280; font-size: 14px; margin-bottom: 18px; }

.site-footer { border-top: 1px solid #e5e7eb; background: #fff; padding: 18px 0; color: #6b7280; font-size: 14px; }
.site-footer p { margin: 0 0 4px; }
.site-footer p:last-child { margin-bottom: 0; }

/* Links op een eigen regel; liepen anders door achter de bedrijfsgegevens en
   braken dan midden in een naam af. */
.juridisch-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.juridisch-links a { color: #155FA8; }