/* Balie-overzicht van de inschrijftool, in de huisstijl van de GTR-site:
   Abel voor koppen, Inter voor tekst, GTR-blauw #1C3583 en lila #888BBE,
   ronding 14/22/32, zachte schaduwen. Eén blad, geen bibliotheken. */
@font-face { font-family: 'Abel'; src: url('/public/fonts/abel-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'InterVar'; src: url('/public/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --blauw: #1C3583; --lila: #888BBE; --link: #1E73BE; --inkt: #33373D; --grijs: #4F4F4F;
  --wit: #fff; --zacht: #F9F9F9; --licht: #F2F2F2;
  --blauw-05: rgba(28,53,131,.05); --blauw-10: rgba(28,53,131,.10); --blauw-20: rgba(28,53,131,.20);
  --lila-20: rgba(136,139,190,.20);
  --rood: #B4322E; --rood-10: rgba(180,50,46,.10); --groen: #2E7D4F; --groen-10: rgba(46,125,79,.12); --oranje: #B26A00; --oranje-10: rgba(178,106,0,.12);
  --display: 'Abel', 'Helvetica Neue', Arial, sans-serif;
  --tekst: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r-klein: 14px; --r: 22px; --r-groot: 32px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--tekst); font-size: 16px; line-height: 1.6; color: var(--inkt); background: var(--zacht); -webkit-font-smoothing: antialiased; }
h1, h2, h3, legend { font-family: var(--display); font-weight: 400; color: var(--blauw); line-height: 1.1; margin: 0; }
h1 { font-size: clamp(32px, 4vw, 46px); }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }

.testbanner { background: #FFF4D6; color: #7A4B00; font-size: 13.5px; text-align: center; padding: 8px 16px; border-bottom: 1px solid #F1DDA6; }
.kop { background: var(--wit); border-bottom: 1px solid var(--blauw-10); }
.kop__binnen { max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.kop__logo img { height: 42px; display: block; }
.kop__titel { font-family: var(--display); font-size: 20px; color: var(--blauw); }
.kop nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.kop nav a { padding: 8px 16px; border-radius: 999px; color: var(--grijs); font-size: 14.5px; }
.kop nav a:hover { background: var(--blauw-05); text-decoration: none; }
.kop nav a.aan { background: var(--blauw); color: var(--wit); }
.kop nav form { display: inline; }
.kop nav button { font: inherit; font-size: 14.5px; padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--grijs); cursor: pointer; }
.kop nav button:hover { background: var(--blauw-05); }

.pagina { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; }
.pagina--smal { max-width: 560px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lila); display: block; margin-bottom: 6px; }
.merkteken { display: block; width: 56px; height: 6px; color: var(--lila); margin-bottom: 12px; }
.intro { color: var(--grijs); max-width: 62ch; }
.paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }

.kaart { background: var(--wit); border-radius: var(--r); box-shadow: 0 14px 40px rgba(28,53,131,.07); padding: 28px 32px; margin-bottom: 22px; }
.kaart--vlak { box-shadow: none; border: 1px solid var(--blauw-10); }

.melding { border-radius: var(--r-klein); padding: 12px 18px; font-size: 14.5px; margin-bottom: 20px; }
.melding--ok { background: var(--groen-10); color: var(--groen); }
.melding--fout { background: var(--rood-10); color: var(--rood); }
.melding--info { background: var(--lila-20); color: var(--blauw); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs a { padding: 8px 18px; border-radius: 999px; background: var(--wit); border: 1px solid var(--blauw-10); color: var(--grijs); font-size: 14px; }
.tabs a.aan { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.tabs a:hover { text-decoration: none; border-color: var(--blauw-20); }
.tabs a b { font-weight: 600; margin-left: 6px; opacity: .8; }

table.lijst { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: var(--r); overflow: hidden; box-shadow: 0 14px 40px rgba(28,53,131,.07); }
table.lijst th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lila); font-weight: 600; padding: 16px 18px 12px; border-bottom: 1px solid var(--blauw-10); }
table.lijst td { padding: 14px 18px; border-bottom: 1px solid var(--blauw-05); font-size: 15px; vertical-align: top; }
table.lijst tr:last-child td { border-bottom: 0; }
table.lijst tr:hover td { background: var(--blauw-05); }
table.lijst td a.nummer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blauw); }
.leeg { padding: 48px; text-align: center; color: var(--grijs); background: var(--wit); border-radius: var(--r); }

.status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.status--nieuw { background: var(--blauw-10); color: var(--blauw); }
.status--in-behandeling { background: var(--oranje-10); color: var(--oranje); }
.status--afgerond { background: var(--groen-10); color: var(--groen); }
.status--concept { background: var(--lila-20); color: var(--blauw); }
.status--verzonden { background: var(--groen-10); color: var(--groen); }
.status--fout, .status--geen-adres { background: var(--rood-10); color: var(--rood); }
.vlag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--oranje-10); color: var(--oranje); }
.vlag--ok { background: var(--groen-10); color: var(--groen); }

.raster { display: grid; grid-template-columns: 1.4fr .9fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .raster { grid-template-columns: 1fr; } }

dl.gegevens { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; }
dl.gegevens dt { padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--blauw); border-bottom: 1px solid var(--blauw-05); }
dl.gegevens dd { margin: 0; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--blauw-05); font-size: 15.5px; white-space: pre-wrap; word-break: break-word; }
dl.gegevens dd.leegveld { color: #9a9a9a; }
@media (max-width: 640px) { dl.gegevens { grid-template-columns: 1fr; } dl.gegevens dt { border-bottom: 0; padding-bottom: 0; } dl.gegevens dd { padding-left: 0; } }
.gevoelig { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.gezinslid { border: 1px solid var(--blauw-10); border-radius: var(--r-klein); padding: 14px 18px; margin-top: 12px; }
.gezinslid h3 { margin-bottom: 6px; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 0; background: var(--blauw); color: var(--wit); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .25s, box-shadow .25s; }
.knop:hover { background: #16295f; text-decoration: none; box-shadow: 0 10px 24px rgba(28,53,131,.2); }
.knop--rand { background: transparent; color: var(--blauw); box-shadow: inset 0 0 0 1px var(--blauw-20); }
.knop--rand:hover { background: var(--blauw-05); box-shadow: inset 0 0 0 1px var(--blauw); }
.knop--gevaar { background: transparent; color: var(--rood); box-shadow: inset 0 0 0 1px rgba(180,50,46,.35); }
.knop--gevaar:hover { background: var(--rood-10); box-shadow: inset 0 0 0 1px var(--rood); }
.knop--klein { padding: 8px 16px; font-size: 13.5px; }
.acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acties form { display: inline; }

.veld { display: block; margin-bottom: 16px; font-size: 13.5px; font-weight: 600; color: var(--blauw); }
.veld input, .veld textarea, .veld select { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; font-size: 15.5px; color: var(--inkt); background: var(--wit); border: 1px solid var(--blauw-20); border-radius: var(--r-klein); padding: 12px 15px; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-10); }
.veld textarea { resize: vertical; min-height: 84px; }

.notities { list-style: none; padding: 0; margin: 0; }
.notities li { padding: 10px 0; border-bottom: 1px solid var(--blauw-05); font-size: 14.5px; }
.notities li time { display: block; font-size: 12px; color: var(--lila); }

.mail { background: var(--wit); border-radius: var(--r); padding: 22px 26px; margin-bottom: 14px; box-shadow: 0 14px 40px rgba(28,53,131,.06); }
.mail__kop { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--grijs); margin-bottom: 6px; }
.mail__kop strong { color: var(--blauw); font-weight: 600; }
.mail pre { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--zacht); border-radius: var(--r-klein); padding: 14px 18px; margin: 10px 0 0; max-height: 320px; overflow: auto; }
details summary { cursor: pointer; color: var(--link); font-size: 14px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--blauw); }
.login .kaart { width: 100%; max-width: 420px; padding: 40px 40px 34px; border-radius: var(--r-groot); }
.login img { height: 44px; margin-bottom: 22px; }

.start { max-width: 640px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.start img { height: 56px; margin-bottom: 26px; }

.klein { font-size: 13px; color: var(--grijs); }
.rechts { text-align: right; }

/* --- Printversie: A4 in de opmaak van het papieren inschrijfformulier -------- */
.print { background: var(--wit); color: #000; font-family: var(--tekst); }
.print .blad { max-width: 760px; margin: 0 auto; padding: 36px 40px; }
.print .blad__kop { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--blauw); padding-bottom: 14px; margin-bottom: 22px; }
.print .blad__kop img { height: 46px; }
.print .blad__kop .ref { text-align: right; font-size: 13px; color: var(--grijs); }
.print .blad__kop .ref strong { display: block; font-size: 18px; color: var(--blauw); font-family: var(--display); }
.print h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw); margin: 22px 0 8px; font-family: var(--tekst); font-weight: 600; }
.print table.formulier { width: 100%; border-collapse: collapse; }
.print table.formulier td { padding: 7px 6px; border-bottom: 1px dotted #999; font-size: 14px; vertical-align: top; }
.print table.formulier td:first-child { width: 220px; color: var(--grijs); }
.print table.formulier td:last-child { font-weight: 500; }
.print .extra { border: 1px solid #bbb; border-radius: 6px; padding: 12px 14px; min-height: 80px; font-size: 14px; white-space: pre-wrap; }
.print .baliestrook { margin-top: 28px; border-top: 2px solid var(--blauw); padding-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; font-size: 13px; }
.print .baliestrook div { border: 1px solid #bbb; border-radius: 6px; padding: 10px 12px; min-height: 64px; }
.print .baliestrook div b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin-bottom: 4px; }
.print .voetnoot { margin-top: 16px; font-size: 11.5px; color: var(--grijs); }
.print .printacties { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; }
@media print {
  .printacties, .testbanner { display: none !important; }
  .print .blad { padding: 0; max-width: none; }
  @page { size: A4; margin: 16mm; }
}

/* Kleine afstandsklassen (geen inline styles vanwege de CSP) */
.mt14 { margin-top: 14px; } .mt10 { margin-top: 10px; } .mt12 { margin: 12px 0 0; } .m8-12 { margin: 8px 0 12px; } .mb18 { margin-bottom: 18px; }
.intro--midden { margin: 18px auto 28px; } .acties--midden { justify-content: center; }