/* Huisstijl van de website: twee kleuren uit het logo, HWT Artz voor koppen. */
:root{
  --blue:#0066AE; --blue-700:#005794; --blue-900:#003357;
  --ink:#002E4E; --grey:#1A75B6; --line:#E0EDF5; --sand:#F2F7FB; --mist:#EBF3F9;
  --orange:#E1984A; --orange-dark:#A97238; --orange-mist:#FBF2E9;
  --groen:#2E7D5B; --groen-mist:#E6F2EC; --rood:#B3453A; --rood-mist:#F8EAE8;
  --kop:'hwt-artz','Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
body{font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--mist)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--kop);line-height:1.1;font-weight:700}

/* kop */
.kop{background:var(--blue);color:#fff;padding:16px 0 0;position:relative}
.kop-rij,.kop-titel,.tabs,.inhoud,.smal{max-width:1180px;margin:0 auto;padding-inline:22px}
.kop-rij{display:flex;align-items:center;justify-content:space-between;gap:16px}
.merk{font-family:var(--kop);font-size:16px;letter-spacing:.03em}
.kop-rechts{display:flex;align-items:center;gap:14px}
.wie{font-size:13.5px;line-height:1.25;text-align:right}
.wie small{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.7)}
.uit{background:rgba(255,255,255,.16);border:0;color:#fff;font:inherit;font-size:13.5px;
  padding:7px 14px;border-radius:8px;cursor:pointer}
.uit:hover{background:rgba(255,255,255,.26)}
.kop-titel{font-size:clamp(26px,4vw,36px);text-transform:uppercase;margin:14px auto 22px}
.golf{display:block;width:100%;height:20px;opacity:.45}

/* tabbladen */
/* De witte balk loopt door tot de rand van het scherm, maar de tabbladen zelf
   beginnen op dezelfde lijn als de inhoud eronder (1180px, gecentreerd). */
.tabs{display:flex;gap:2px;background:#fff;max-width:none;
  padding-inline:max(22px, calc((100% - 1180px) / 2));
  border-bottom:1px solid var(--line);overflow-x:auto}
.tabs > *{white-space:nowrap}
.tabs a{padding:15px 18px;font-family:var(--kop);font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey);border-bottom:3px solid transparent}
.tabs a:hover{color:var(--blue)}
.tabs a.aan{color:var(--blue);border-bottom-color:var(--orange)}
.bel{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:12px;font-family:Inter,sans-serif;text-align:center}

.inhoud{padding-block:26px 70px}
.melding{padding:13px 16px;border-radius:10px;margin-bottom:20px;font-size:15px}
.melding.ok{background:var(--groen-mist);color:var(--groen)}
.melding.fout{background:var(--rood-mist);color:var(--rood)}

.kaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px}
.kaart h2{font-size:20px;color:var(--blue);margin-bottom:14px}
.kaart h3{font-size:17px;color:var(--blue);margin-bottom:10px}
.label{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}

/* cijferblokken */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.cijfer{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cijfer b{display:block;font-family:var(--kop);font-size:34px;color:var(--blue);line-height:1.05}
.cijfer b.min{color:var(--rood)}
.cijfer span{font-size:13.5px;color:var(--grey)}

/* tabellen */
.tabel-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--blue);padding:12px 14px;font-weight:700;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--sand)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.nummer{font-variant-numeric:tabular-nums;color:var(--grey);width:74px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--groen-mist);color:var(--groen)}
.chip.open{background:var(--orange-mist);color:var(--orange-dark)}
.chip.uit{background:var(--sand);color:var(--grey)}
.chip.min{background:var(--rood-mist);color:var(--rood)}

/* Knoppen
   -------
   Alle varianten even hoog, wat er ook in staat. Dat lukt alleen als ze
   allemaal dezelfde rand hebben: de oranje knop had border:0 en de stille een
   rand van 2px, en dat maakte die laatste vier pixels hoger. Naast elkaar op
   een rij zag je dat meteen.

   Vandaar een doorzichtige rand op de basisknop, inline-flex zodat de tekst
   gecentreerd staat in plaats van op de tekstregel te balanceren, en een
   minimale hoogte van 44px -- de maat waarop een vinger een knop betrouwbaar
   raakt. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:var(--orange);color:#fff;font-family:var(--kop);font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;padding:9px 18px;line-height:1.25;
  min-height:44px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  vertical-align:middle}
.btn:hover{background:var(--orange-dark)}
.btn.stil{background:#fff;color:var(--blue);border-color:var(--line)}
.btn.stil:hover{background:var(--sand)}
.btn.klein{padding:6px 13px;font-size:13.5px;min-height:36px}
/* De knoppen staan vaak elk in een eigen <form>, omdat ze een eigen doel
   hebben. Dat hoeft niets te verstoren: met een gelijke minimale hoogte is elk
   formulier net zo hoog als zijn knop, en staan ze vanzelf op een lijn. */

/* formulier */
.veld{margin-bottom:15px}
.veld label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.veld input,.veld select,.veld textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.veld input[readonly]{background:var(--sand);color:var(--grey)}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rij3{display:grid;grid-template-columns:1fr 110px 1fr;gap:14px}
.fout-tekst{color:var(--rood);font-size:13.5px;margin-top:5px}

.zoek{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.zoek input,.zoek select{padding:10px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.zoek input{flex:1;min-width:180px}

.leeg{padding:40px 20px;text-align:center;color:var(--grey)}

/* inloggen */
.inlog{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--blue)}
.inlog .doos{background:#fff;border-radius:16px;padding:32px;max-width:400px;width:100%}
.inlog h1{font-size:26px;color:var(--blue);text-transform:uppercase;margin-bottom:6px}
.inlog p.sub{color:var(--grey);font-size:14.5px;margin-bottom:22px}

@media(max-width:700px){
  .rij2,.rij3{grid-template-columns:1fr}
  .kop-titel{margin-bottom:18px}
}

/* ===== Ledenportaal ===== */
.mijn-tabs{display:flex;gap:4px;margin-bottom:22px;overflow-x:auto;padding-bottom:2px}
.mijn-tabs a{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:10px;
  background:#fff;border:1px solid var(--line);font-size:14.5px;color:var(--grey);white-space:nowrap}
.mijn-tabs a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mijn-tabs a.aan{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}

.mijn-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.groot{font-family:var(--kop);font-size:44px;line-height:1.05;color:var(--blue);margin:4px 0 10px}
.groot.min{color:var(--rood)}
.btn.breed{display:block;width:100%;text-align:center;margin-top:6px}
.voetnoot{font-size:13px;color:var(--grey);margin-top:12px;line-height:1.55}
.regel{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line)}
.regel > span{min-width:0}
.regel:last-of-type{border-bottom:0}
.regel small{color:var(--grey);font-size:12.5px}
.regel b{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;padding-top:1px}
.regel b.af{color:var(--rood)} .regel b.bij{color:var(--groen)}
.bezit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bezit .vak{background:var(--sand);border-radius:11px;padding:14px 16px}
.bezit .nr{font-family:var(--kop);font-size:28px;color:var(--blue);line-height:1.1;margin-top:3px}
.let{background:var(--orange-mist);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;
  padding:13px 15px;font-size:14px;color:var(--orange-dark);margin-top:14px;line-height:1.6}

/* sorteerbare kolomkoppen */
thead th a{color:#fff;display:inline-block;white-space:nowrap}
thead th a:hover{text-decoration:underline}

/* details/summary als knop */
summary::-webkit-details-marker{display:none}
summary{cursor:pointer}
.terug-naar-beheer{max-width:1180px;margin:0 auto;padding:14px 22px 0;font-size:14px}
.terug-naar-beheer a{color:var(--blue)}

/* paginering */
.paginering{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pg{padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-size:14.5px;color:var(--blue);white-space:nowrap}
.pg:hover{background:var(--sand)}
.pg.uit{color:#A9C3D6;background:transparent;border-color:transparent}
.pg-tel{font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums}

/* logo */
.merk img{height:46px;width:auto;display:block}
.kop{overflow:hidden}
.kop-kite{position:absolute;right:-40px;top:-30px;width:230px;height:auto;opacity:.10;
  pointer-events:none;z-index:0}
.kop-rij,.kop-titel{position:relative;z-index:2}
.inlog-logo{height:70px;width:auto;margin:0 auto 18px;display:block}
.inlog-logo.op-blauw{background:var(--blue);border-radius:10px;padding:10px}
@media(max-width:600px){
  .merk img{height:36px}
  .kop-kite{width:150px;right:-30px;top:-20px}
}
.akkoordregel{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink);
  margin:6px 0 18px;cursor:pointer}
.akkoordregel input{width:17px;height:17px;margin-top:3px;accent-color:var(--blue);flex:none}

/* aanklikbare regels en cijferblokken */
table.klikbaar tr{cursor:pointer}
table.klikbaar tr:hover{background:var(--sand)}
table.klikbaar a{color:var(--blue)}
a.cijfer{display:block;transition:.15s}
a.cijfer:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,102,174,.10)}
.tabs .naar-mijn{margin-left:auto;color:var(--orange-dark)}
.linkveld{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);background:var(--sand)}
tr.inactief-rij{opacity:.55}

/* ledenfoto's */
.avatar-foto{border-radius:50%;object-fit:cover;display:block;background:var(--sand);flex:none}
.avatar-letters{border-radius:50%;background:var(--mist);color:var(--blue);font-family:var(--kop);
  display:inline-grid;place-items:center;flex:none;line-height:1}
.naamcel{display:flex;align-items:center;gap:11px;min-width:0}
.naamcel > span,.naamcel > a{min-width:0}
.foto-blok{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.foto-blok .knoppen{display:flex;flex-direction:column;gap:9px;min-width:180px}
.foto-kiezer{font-size:14px}
.op-zee{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.op-zee .kiter{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;text-align:center}
.op-zee .kiter small{font-size:11.5px;color:var(--grey);line-height:1.25;overflow-wrap:anywhere}
.op-zee.veel .kiter{width:48px}
.op-zee.veel .kiter small{display:none}
.kop-rechts .avatar-foto{border:2px solid rgba(255,255,255,.55)}
.kop-rechts .avatar-letters{background:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.35)}

/* ===================================================================
   Inlogscherm

   Gecentreerd, zonder beeld. De elementen komen na elkaar op via CSS-animaties
   met oplopende vertraging (.op-1 t/m .op-5) — vijftien regels CSS in plaats
   van een animatiepakket dat je jarenlang moet blijven bijwerken.
   =================================================================== */
.welkom-body{background:var(--mist);min-height:100vh}
.welkom{min-height:100vh;display:grid;place-items:center;padding:32px 22px calc(32px + env(safe-area-inset-bottom))}

.welkom-inhoud{width:100%;max-width:412px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,5vw,38px) clamp(22px,5vw,34px);
  box-shadow:0 18px 50px rgba(0,51,87,.09)}

.welkom-logo{height:clamp(58px,12vw,76px);width:auto;margin:0 auto 18px;display:block}
.welkom-inhoud h1{font-family:var(--kop);font-size:clamp(25px,6vw,32px);line-height:1.1;
  text-transform:uppercase;color:var(--blue)}
.welkom-inhoud h1 .or{color:var(--orange)}
.welkom-golf{width:150px;height:22px;margin:12px auto 6px;display:block}
.welkom-lead{color:var(--grey);font-size:15.5px;line-height:1.6;margin-bottom:24px}

.welkom-form{text-align:left}
.welkom-form .veld{margin-bottom:14px}
.onthoud{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--grey);
  margin:2px 0 18px;cursor:pointer}
.onthoud input{width:17px;height:17px;accent-color:var(--blue);flex:none}
.welkom-hulp{font-size:13.5px;color:var(--grey);margin-top:20px;line-height:1.6}
.welkom-hulp a{color:var(--blue);font-weight:600;text-decoration:underline}
.welkom .melding{text-align:left}

/* de trapsgewijze binnenkomst */
@keyframes op-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.op-1,.op-2,.op-3,.op-4,.op-5{animation:op-in .5s cubic-bezier(.2,.7,.3,1) both}
.op-1{animation-delay:.06s} .op-2{animation-delay:.16s} .op-3{animation-delay:.26s}
.op-4{animation-delay:.36s} .op-5{animation-delay:.46s}

/* Wie beweging heeft uitgezet in zijn systeem, krijgt het scherm gewoon stil. */
@media (prefers-reduced-motion:reduce){
  .op-1,.op-2,.op-3,.op-4,.op-5{animation:none}
}

/* voorbeeldweergave van uitgaande mail
   Het iframe houdt de opmaak van de mail bij de mail: die stijlen zijn met opzet
   grof (tabellen, vaste breedtes) en zouden dit scherm slopen. */
.mailvoorbeeld{width:100%;height:640px;border:1px solid var(--line);border-radius:12px;
  background:var(--mist);display:block}

/* ------------------------------------------------------------- smoelenboek ---
   Drie zones, want 120 leden met 25 foto's passen niet in één raster: vier
   vijfde zou een lege cirkel zijn. Bovenaan je eigen kaart, dan de gezichten,
   en onderaan klein wie er nog niet op staat. */

.ik-kaart{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.ik-kaart.nog-leeg{border-left:4px solid var(--orange)}
.ik-portret{flex:0 0 auto}
.ik-tekst{flex:1 1 260px;min-width:0}
.ik-tekst h2{margin-bottom:6px}
.ik-tekst p{color:var(--grey);font-size:15px;margin-bottom:14px;max-width:52ch}
.ik-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.ik-form input[type=file]{flex:1 1 200px;min-width:0;font-size:14px}
.knop-kaal{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--grey);text-decoration:underline;cursor:pointer}
.knop-kaal:hover{color:var(--rood)}

.smoel-balk{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.smoel-balk .label{margin:0}
.smoel-balk input[type=search]{flex:1 1 220px;min-width:0;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.smoel-balk input[type=search]:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.smoel-telling{color:var(--grey);font-size:14.5px;margin:0}

.smoel-raster{display:grid;gap:18px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.smoel{margin:0;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 10px 14px}
.smoel .avatar-foto,.smoel .avatar-letters{margin:0 auto 10px;display:block}
.smoel figcaption{line-height:1.3;min-width:0}
.smoel figcaption b{display:block;font-size:15px}
.smoel figcaption span{display:block;font-size:13.5px;color:var(--grey);
  overflow-wrap:anywhere}
.smoel figcaption small{display:block;margin-top:5px;font-size:11.5px;color:var(--grey);
  text-transform:uppercase;letter-spacing:.05em}

.telling{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--mist);color:var(--grey);font-size:14px;font-family:Inter,sans-serif;
  font-weight:600;vertical-align:middle}

.smoel-namen{display:flex;flex-wrap:wrap;gap:9px}
.smoel-naam{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--sand)}
.smoel-naam .avatar-letters{flex:0 0 auto}

@media (max-width:520px){
  .smoel-raster{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .ik-kaart{gap:16px}
}

/* sleutels en stalling op de ledenpagina */
.bezit-regel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.bezit-regel:last-of-type{border-bottom:0}
.bezit-regel small{display:block;font-size:12px;color:var(--grey)}
.sleutel-uit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sleutel-uit label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.sleutel-uit > div{display:flex;gap:8px}
.sleutel-uit input{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit}
.sleutel-uit input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.sleutel-uit .voetnoot{margin-top:8px}

/* ------------------------------------------------------- stallingplattegrond ---
   De vorm komt uit de tekening van Stan: vier banken met het clubhuis boven en
   de zee onder, plus twee rijen langs de zijkant. De gaten in de banken zijn
   echt — daar zit het bordes, de trap en de wateraansluiting. */
.plan{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:16px;
  overflow-x:auto}
.plan-kop,.plan-voet{display:flex;gap:10px;justify-content:center;padding:6px 0}
.plan-merk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.plan-merk.zee{color:var(--blue)}
.plan-vloer{display:flex;gap:14px;align-items:flex-start;min-width:660px}
.plan-banken{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;min-width:0}
.plan-bank{display:grid;grid-template-columns:repeat(19,1fr);gap:4px}
.plan-zij{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;
  padding-left:14px;border-left:2px dashed var(--line)}
.plan-zijrij{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}

.plan-plek{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:34px;aspect-ratio:3/4;border-radius:6px;padding:2px 1px;overflow:hidden;
  font-size:10px;line-height:1.1;text-align:center;cursor:default}
.plan-plek b{font-size:12px;font-weight:700}
.plan-plek small{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:8.5px;opacity:.85}
.plan-plek.bezet{background:var(--blue);color:#fff}
.plan-plek.vrij{background:#fff;border:1px dashed var(--grey);color:var(--grey)}
.plan-plek.ikzelf{background:var(--orange);color:var(--blue-900);outline:2px solid var(--blue-900)}
.plan-gat{min-width:34px;aspect-ratio:3/4}

.plan-legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;
  font-size:13px;color:var(--grey)}
.plan-legenda i{display:inline-block;width:13px;height:13px;border-radius:3px;
  margin-right:5px;vertical-align:-2px}
.plan-legenda .vlak.bezet{background:var(--blue)}
.plan-legenda .vlak.vrij{background:#fff;border:1px dashed var(--grey)}
.plan-legenda .vlak.ikzelf{background:var(--orange)}

@media (max-width:700px){
  .plan{padding:10px}
  .plan-vloer{min-width:600px}
  .plan-plek,.plan-gat{min-width:28px}
  .plan-plek small{display:none}
}

/* eigen plek uitlichten in het ledenportaal */
.kaart.mijn-plek{border-left:4px solid var(--orange)}
.sleutel-uit select{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;background:#fff;width:100%}

/* ------------------------------------------------------- tabbladen mobiel ---
   Beide balken staan al op overflow-x:auto, maar flexitems krimpen standaard
   tot onder hun inhoud. Op een telefoon werden zes tabbladen daardoor over
   elkaar heen geperst in plaats van dat de balk ging schuiven. flex:none
   verbiedt dat krimpen; dan doet het schuiven zijn werk. */
.tabs > *,
.mijn-tabs a{flex:0 0 auto}

/* Een randje dat verraadt dat er meer naast staat. Zonder zo'n hint schuift
   niemand, want de balk ziet er compleet uit. */
.tabs,.mijn-tabs{
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  background-image:linear-gradient(to left, rgba(0,51,87,.10), rgba(0,51,87,0) 24px);
  background-position:right center;
  background-repeat:no-repeat;
  background-size:24px 100%;
  background-attachment:local;
}

@media (max-width:700px){
  .mijn-tabs a{padding:10px 13px;font-size:14px}
  .mijn-tabs a svg{width:16px;height:16px}
  .tabs a{padding:13px 14px;font-size:14px}

  /* kop: logo, naam en uitloggen passen krap; iets minder lucht ertussen */
  .kop-rij{gap:10px}
  .wie{font-size:12.5px}
  .wie small{font-size:10.5px}
  .uit{padding:6px 11px;font-size:12.5px}
  .kop-titel{font-size:clamp(22px,6vw,30px)}
}

/* de pot */
.pot-form{display:flex;flex-direction:column;gap:7px;min-width:190px}
.pot-form input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px}
.pot-knoppen{display:flex;gap:6px}
.pot-knoppen .btn{padding:6px 11px;font-size:13px;min-height:36px}

/* --------------------------------------------- tabellen als kaartjes (mobiel) ---
   Een tabel van vijf kolommen past niet op een telefoon. Zijwaarts schuiven kan,
   maar dan lees je een rij nooit in één keer — en een formulier in een schuivende
   cel is helemaal geen doen. Onder de 700 wordt elke rij daarom een kaartje, met
   de kolomnaam ervoor. Alleen bij tabellen met .stapel; lange lijsten zoals de
   ledenlijst blijven schuiven, want honderd kaartjes is ook geen overzicht. */
@media (max-width:700px){
  .tabel-wrap.stapel{overflow-x:visible;border:0;background:none}
  .tabel-wrap.stapel table,
  .tabel-wrap.stapel tbody,
  .tabel-wrap.stapel tr,
  .tabel-wrap.stapel td{display:block;width:auto}
  .tabel-wrap.stapel thead{position:absolute;left:-9999px}
  .tabel-wrap.stapel tr{background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-bottom:12px}
  .tabel-wrap.stapel td{border:0;padding:5px 0;text-align:left !important}
  .tabel-wrap.stapel td::before{
    content:attr(data-label);
    display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--grey);margin-bottom:2px;
  }
  /* het nummer als kopje van het kaartje, zonder eigen label */
  .tabel-wrap.stapel td.nummer{position:absolute;right:14px;margin-top:-4px;
    font-size:12px;color:var(--grey)}
  .tabel-wrap.stapel td.nummer::before{display:none}
  .tabel-wrap.stapel tr{position:relative}
  .tabel-wrap.stapel td.leeg::before{display:none}

  .pot-form{min-width:0}
  .pot-knoppen{flex-wrap:wrap}
  .pot-knoppen .btn{flex:1 1 auto}
}

/* -------------------------------------------------- menubalken op een telefoon ---
   Twee balken, twee oplossingen, omdat ze niet hetzelfde zijn.

   Het beheer heeft negen tabbladen. Die schoven zijwaarts, en dat is de
   slechtste van de mogelijkheden: je ziet er vier en moet maar raden dat er
   meer naast staat. Daar komt een keuzelijst — één regel hoog, laat zien waar
   je bent, en de telefoon tekent er zelf een nette kiezer bij.

   Het ledenportaal heeft er zes, kort en met een pictogram. Die breken gewoon
   af over twee regels: alles zichtbaar, alles met één tik raak. Dat is voor het
   scherm dat honderdtwintig leden gebruiken beter dan een lijst waar je eerst
   op moet tikken om te zien wat er is. */

.tabs-kiezer{display:none}

@media (max-width:760px){
  .tabs{display:none}

  .tabs-kiezer{display:block;position:relative;z-index:40;background:#fff;
    border-bottom:1px solid var(--line);padding:9px 18px}

  .tabs-kiezer summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
    font-family:var(--kop);font-size:15px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--blue);cursor:pointer;list-style:none;
  }
  .tabs-kiezer summary::-webkit-details-marker{display:none}
  .tabs-kiezer summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .tabs-kiezer summary svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--blue);
    stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
  .tabs-kiezer[open] summary{border-color:var(--blue);border-bottom-left-radius:0;border-bottom-right-radius:0}
  .tabs-kiezer[open] summary svg{transform:rotate(180deg)}

  .tabs-lijst{
    position:absolute;left:18px;right:18px;top:calc(100% - 10px);
    background:#fff;border:1px solid var(--blue);border-top:0;
    border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(0,51,87,.16);
    overflow:hidden;
  }
  .tabs-lijst a{
    display:flex;align-items:center;gap:8px;padding:13px 14px;
    font-family:var(--kop);font-size:15px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--grey);border-top:1px solid var(--line);
  }
  .tabs-lijst a:first-child{border-top:0}
  .tabs-lijst a.aan{color:var(--blue);background:var(--sand);
    box-shadow:inset 3px 0 0 var(--orange)}
  .tabs-lijst a.apart{color:var(--orange-dark);border-top:2px solid var(--line)}
  .tabs-lijst a:active{background:var(--mist)}

  /* Ledenportaal: afbreken in plaats van schuiven. De pictogrammen gaan eraf —
     met zes labels naast elkaar breekt het anders over drie regels, en dat is
     net zoveel hoogte als de paginakop zelf. Zonder pictogram passen ze op twee. */
  .mijn-tabs{flex-wrap:wrap;overflow-x:visible;background-image:none;gap:6px}
  .mijn-tabs a{flex:0 1 auto;padding:9px 13px;font-size:14px}
  .mijn-tabs a svg{display:none}
}

/* Zonder dit is het label voor schermlezers gewoon zichtbaar. */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Instellingen — verzamelpagina
   ---------------------------- */
.instel-rooster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.instel-kaart{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:12px;padding:22px 22px 20px;transition:.15s}
.instel-kaart:hover{border-left-color:var(--orange);box-shadow:0 6px 18px rgba(0,46,78,.08)}
.instel-kaart h2{font-size:19px;color:var(--blue)}
.instel-kaart p{font-size:14.5px;color:var(--grey);line-height:1.55;flex:1}
.instel-kaart .bij{font-size:13px;color:var(--ink);opacity:.55}