:root {
    --rood: #b3202e;
    --rood-donker: #8e1824;
    --antraciet: #2d2d2f;
    --blauw: #003a8c;
    --tekst: #1f1f22;
    --grijs: #6b6b72;
    --lijn: #dcdce0;
    --achtergrond: #f4f4f6;
    --kaart: #ffffff;
    --fout: #b3202e;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--tekst);
    background: var(--achtergrond);
}

a { color: var(--rood); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h2 { font-size: 1.35rem; }

/* Kop met logo's */
.kop {
    background: repeating-linear-gradient(90deg, var(--rood) 0 40px, #fff 40px 80px);
    border-bottom: 6px solid var(--antraciet);
}
.kop-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.kop-inner img {
    background: #fff;
    border-radius: var(--radius);
    padding: 8px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.logo-club { height: 96px; }
.logo-loterij { height: 70px; }
.plus { font-size: 2rem; font-weight: 700; color: var(--antraciet); background: #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; }

.pagina { max-width: 980px; margin: 0 auto; padding: 28px 16px 40px; }

.intro { margin-bottom: 24px; }
.lead { font-size: 1.1rem; max-width: 760px; }

.opties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }

.kaart {
    background: var(--kaart);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border-top: 5px solid var(--antraciet);
}
.kaart-accent { border-top-color: var(--rood); }
.label {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rood);
    margin-bottom: 6px;
}
.lijst { padding-left: 1.1em; }
.lijst li { margin-bottom: 4px; }
.klein { font-size: .9rem; color: var(--grijs); }

/* Formulier */
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; padding: 0; }
label { display: block; font-weight: 600; margin-bottom: 14px; }
input[type=text], input[type=email], input[type=password], textarea, select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 400;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--rood); outline-offset: 1px; border-color: transparent; }

.rij { display: grid; gap: 0 14px; }
.rij-3 { grid-template-columns: 1fr 1fr 2fr; }
.rij-straat { grid-template-columns: 3fr 1fr; }
.rij-plaats { grid-template-columns: 1fr 2fr; }

.lot-rij { display: flex; align-items: flex-end; gap: 10px; }
.lot-rij label { flex: 1; }
.knop-verwijder {
    margin-bottom: 14px;
    width: 44px; height: 44px;
    border: 1px solid var(--lijn);
    background: #fff;
    border-radius: 8px;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--grijs);
}
.knop-verwijder:hover { color: var(--rood); border-color: var(--rood); }

.vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.vink input { margin-top: 5px; width: 20px; height: 20px; flex: none; accent-color: var(--rood); }

.fout { color: var(--fout); font-size: .9rem; font-weight: 600; margin: 4px 0 0; }
.melding { background: #fbeaec; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.succes { background: #e8f5ec; color: #1d6b35; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.knop {
    display: inline-block;
    background: var(--rood);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.knop:hover { background: var(--rood-donker); }
.knop-licht { background: #fff; color: var(--rood); border: 1px solid var(--rood); margin-bottom: 18px; }
.knop-licht:hover { background: #fbeaec; }
.knop-groot { font-size: 1.1rem; padding: 14px 28px; }
.knop-donker { background: var(--antraciet); }
.knop-donker:hover { background: #000; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }

.bedankt { text-align: center; padding: 40px 24px; }

.voet { text-align: center; padding: 20px 16px 40px; color: var(--grijs); font-size: .9rem; }

@media (max-width: 720px) {
    body { font-size: 16px; }
    .opties { grid-template-columns: 1fr; }
    .rij-3, .rij-straat, .rij-plaats { grid-template-columns: 1fr; }
    .logo-club { height: 70px; }
    .logo-loterij { height: 48px; }
    .kaart { padding: 18px; }
}

/* ---------- Portal ---------- */
.portal .pagina { max-width: 1280px; }
.portal-kop { background: var(--antraciet); color: #fff; }
.portal-kop .kop-inner { justify-content: space-between; max-width: 1280px; }
.portal-kop img { height: 48px; padding: 4px; }
.portal-kop nav a { color: #fff; margin-left: 18px; text-decoration: none; font-weight: 600; }
.portal-kop nav a:hover, .portal-kop nav a.actief { text-decoration: underline; }
.portal-titel { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; }

.werkbalk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.werkbalk .ruimte { flex: 1; }
.stat { background: #fff; border-radius: 8px; padding: 8px 14px; font-size: .95rem; }

.tabel-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { background: #fafafb; font-weight: 700; white-space: nowrap; }
tr:hover td { background: #fcf6f7; }
td.nowrap { white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.badge-nieuw { background: #fff2cc; color: #7a5a00; }
.badge-verwerkt { background: #e8f5ec; color: #1d6b35; }

.brief-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.brief-layout textarea { min-height: 460px; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; line-height: 1.5; }
.variabelen code { display: inline-block; background: #f1f1f4; border-radius: 4px; padding: 1px 6px; margin: 2px 2px; cursor: pointer; font-size: .85rem; }
.variabelen code:hover { background: #fbeaec; }
.voorbeeld { background: #fff; border: 1px solid var(--lijn); border-radius: 4px; padding: 36px 40px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; min-height: 600px; white-space: pre-wrap; }
.voorbeeld .vb-kop { display: flex; justify-content: space-between; margin-bottom: 24px; white-space: normal; }
.voorbeeld img { height: 60px; }

@media (max-width: 900px) {
    .brief-layout { grid-template-columns: 1fr; }
}