/* ============================================================
   Rivierenbuurt Verkeer — huisstijl v2 (strakker)
   Petrolblauw + signaaloranje · Archivo / Public Sans / IBM Plex Mono
   ============================================================ */

:root{
  --petrol:    #0B2B36;
  --petrol-2:  #123D4C;
  --inkt:      #14313C;
  --accent:    #F0640F;
  --accent-d:  #C94F06;
  --groen:     #2F7A57;
  --ijs:       #EEF4F6;
  --papier:    #F8FBFC;
  --wit:       #FFFFFF;
  --rand:      #E1EAEE;
  --grijs:     #5B7280;
  --schaduw:   0 1px 2px rgba(11,43,54,.05), 0 8px 28px -12px rgba(11,43,54,.16);

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw: 1120px;
  --r: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{font-family:var(--f-body);color:var(--inkt);background:var(--papier);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
a{color:#1E6580;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Navigatie ---------- */
header.site{background:var(--petrol);color:var(--wit);position:relative;z-index:5}
header.site.doorzichtig{background:transparent;position:absolute;inset:0 0 auto 0}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wit)}
.logo b{font-family:var(--f-display);font-weight:800;font-size:1.04rem;letter-spacing:.01em;line-height:1.15;display:block}
.logo span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;display:block}
nav.main{display:flex;gap:2px;flex-wrap:wrap;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:4px}
nav.main a{color:var(--wit);text-decoration:none;font-weight:600;font-size:.9rem;padding:8px 16px;border-radius:99px}
nav.main a:hover{background:rgba(255,255,255,.12);color:var(--wit)}
nav.main a[aria-current="page"]{background:var(--accent);color:var(--wit)}

/* ---------- Hero met foto ---------- */
.hero-foto{
  position:relative;color:var(--wit);
  background:linear-gradient(160deg, rgba(9,33,42,.88) 0%, rgba(11,43,54,.62) 55%, rgba(11,43,54,.88) 100%),
             url("hero.jpg") center/cover no-repeat;
  padding:150px 0 110px;
}
.hero{background:linear-gradient(150deg,var(--petrol) 0%,var(--petrol-2) 100%);color:var(--wit);padding:64px 0 70px;position:relative}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#FFA060;font-weight:600}
h1{font-family:var(--f-display);font-weight:900;letter-spacing:-.02em;font-size:clamp(2.1rem,5.4vw,3.7rem);line-height:1.04;margin:.35em 0 .45em;max-width:17ch}
.hero p.lede,.hero-foto p.lede{max-width:56ch;font-size:1.12rem;color:#D9E6EA}
.cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center}

.knop{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;
  padding:13px 26px;border-radius:99px;text-decoration:none;font-size:1rem;
  border:2px solid transparent;cursor:pointer;transition:transform .12s ease, background .12s ease;
}
.knop:active{transform:scale(.98)}
.knop.primair{background:var(--accent);color:var(--wit)}
.knop.primair:hover{background:var(--accent-d);color:var(--wit)}
.knop.stil{background:rgba(255,255,255,.08);color:var(--wit);border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.knop.stil:hover{border-color:var(--wit);color:var(--wit)}
.knop.blauw{background:var(--petrol-2);color:var(--wit)}
.knop.blauw:hover{background:var(--petrol);color:var(--wit)}
.knop.klein{padding:9px 18px;font-size:.9rem}
.knop.rand{background:var(--wit);color:var(--inkt);border-color:var(--rand)}
.knop.rand:hover{border-color:var(--accent);color:var(--accent-d)}
.knop[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Secties ---------- */
section.blok{padding:72px 0}
section.blok.water{background:var(--ijs)}
h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.015em;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12;margin:.25em 0 .5em}
h3{font-family:var(--f-display);font-weight:700;font-size:1.12rem;margin-bottom:.35em}
section.blok > .wrap > p.intro{max-width:62ch;margin-bottom:1.6em;color:#33505C}

/* ---------- Kaarten ---------- */
.grid{display:grid;gap:20px;margin-top:28px}
.grid.k2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.grid.k3{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.kaartje{
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--schaduw);
}
.kaartje .nr{
  font-family:var(--f-display);font-weight:900;font-size:.92rem;color:var(--wit);
  background:var(--petrol);width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.kaartje.verandert .nr{background:var(--accent)}
.kaartje.klaar .nr{background:var(--groen)}
.kaartje .kop{display:flex;align-items:center;gap:12px}
.status{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:99px;align-self:flex-start;font-weight:600;
}
.status.oranje{background:#FDEBDD;color:var(--accent-d)}
.status.groen{background:#DFF0E7;color:#1F5A3E}
.status.blauw{background:#E2EEF3;color:#155066}
.kaartje ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.kaartje .voorjou{background:var(--ijs);border-radius:10px;padding:13px 15px;font-size:.94rem}
.kaartje .voorjou b{font-family:var(--f-display)}

/* ---------- Schetskaart ---------- */
.kaartkader{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:20px 20px 10px;margin-top:26px;box-shadow:var(--schaduw)}
.kaartkader figcaption{font-family:var(--f-mono);font-size:.72rem;color:var(--grijs);padding:10px 4px}
.kaart-legenda{display:flex;gap:18px;flex-wrap:wrap;padding:8px 4px 2px;font-size:.85rem}
.kaart-legenda span{display:inline-flex;align-items:center;gap:7px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.dot.oranje{background:var(--accent)}
.dot.groen{background:var(--groen)}
.lijntje{width:26px;height:0;border-top:3px solid var(--petrol);display:inline-block}
.lijntje.stippel{border-top-style:dashed;border-top-color:#1E6580}

/* ---------- Tijdlijn ---------- */
.route{list-style:none;margin-top:28px;position:relative;padding-left:36px}
.route::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;border-left:3px solid var(--rand)}
.route li{position:relative;padding:0 0 28px 10px}
.route li:last-child{padding-bottom:0}
.route li::before{content:"";position:absolute;left:-32px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--wit);border:4px solid #1E6580}
.route li.nu::before{border-color:var(--accent);background:#FDEBDD}
.route li.gedaan::before{border-color:var(--groen);background:#DFF0E7}
.route .wanneer{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;color:var(--grijs);text-transform:uppercase;font-weight:600}
.route p{max-width:64ch}

/* ---------- Enquête / QR ---------- */
.enq-flex{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start;margin-top:24px}
@media(max-width:760px){.enq-flex{grid-template-columns:1fr}}
.qr-vak{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:24px;text-align:center;box-shadow:var(--schaduw)}
.qr-vak img{width:100%;max-width:250px;height:auto;image-rendering:pixelated;border-radius:8px}
.qr-vak small{display:block;margin-top:12px;font-family:var(--f-mono);font-size:.7rem;color:var(--grijs)}

/* ---------- Formulieren & tabellen ---------- */
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--rand);border-radius:10px;
  font-size:.98rem;font-family:var(--f-body);background:var(--wit);
}
input:focus,select:focus,textarea:focus{border-color:#1E6580;outline:none}
label.veld{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}

.tabel{width:100%;border-collapse:separate;border-spacing:0;background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;margin-top:18px;box-shadow:var(--schaduw)}
.tabel th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;background:var(--petrol);color:var(--wit);padding:11px 15px;font-weight:600}
.tabel td{padding:13px 15px;border-top:1px solid var(--rand);vertical-align:top;font-size:.94rem}
.tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:var(--ijs);color:#155066;padding:3px 9px;border-radius:99px;white-space:nowrap}
.wie{font-family:var(--f-mono);font-size:.78rem;color:var(--grijs)}

.uitleg{background:#FFF6EE;border:1px solid #F5D5B8;border-radius:12px;padding:16px 18px;margin-top:18px;font-size:.93rem}
.uitleg code{font-family:var(--f-mono);font-size:.85em;background:#F8E5D2;padding:1px 6px;border-radius:5px}
.melding{color:var(--accent-d);font-weight:600;min-height:1.4em;font-size:.93rem}
.melding.ok{color:var(--groen)}

/* ---------- Inloggen & werkgroepbalk ---------- */
.slot{max-width:440px;margin:56px auto;background:var(--wit);border:1px solid var(--rand);border-radius:18px;padding:34px;box-shadow:var(--schaduw)}
.slot h2{font-size:1.5rem}
.wg-balk{
  position:sticky;top:0;z-index:20;background:var(--wit);border-bottom:1px solid var(--rand);
  padding:10px 0;box-shadow:0 2px 10px rgba(11,43,54,.05);
}
.wg-balk .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wg-balk .wie-ben-ik{font-size:.92rem}
.wg-balk .wie-ben-ik b{font-family:var(--f-display)}

/* ---------- Datumplanner ---------- */
.planner-week{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:24px;margin-top:22px;box-shadow:var(--schaduw)}
.planner-kop{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.planner-kop h3{margin:0}
.dag{margin-top:16px}
.dag-naam{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);font-weight:600;margin-bottom:7px}
.uren{display:flex;flex-wrap:wrap;gap:6px}
.uur{
  font-family:var(--f-mono);font-size:.8rem;padding:7px 0;width:52px;text-align:center;
  border:1.5px solid var(--rand);border-radius:8px;background:var(--wit);cursor:pointer;user-select:none;
  position:relative;
}
.uur:hover{border-color:#1E6580}
.uur.aan{background:var(--petrol-2);border-color:var(--petrol-2);color:var(--wit);font-weight:600}
.uur .telling{
  position:absolute;top:-7px;right:-6px;background:var(--accent);color:#fff;border-radius:99px;
  font-size:.62rem;min-width:17px;height:17px;line-height:17px;font-weight:700;
}
.uur.iedereen{box-shadow:0 0 0 2.5px var(--groen)}
.uur.gekozen{background:var(--groen);border-color:var(--groen);color:#fff}
.uur.leeg{opacity:.45}
.planner-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;margin-top:14px;color:var(--grijs)}
.planner-legenda span{display:inline-flex;align-items:center;gap:6px}
.gekozen-balk{background:#DFF0E7;border-radius:10px;padding:12px 15px;margin-top:14px;font-size:.95rem}

/* ---------- Footer ---------- */
footer.site{background:var(--petrol);color:#AFC6CE;margin-top:80px;padding:44px 0;font-size:.92rem}
footer.site a{color:#EAF3F5}
footer.site .kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
footer.site h3{color:var(--wit);font-size:.95rem}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:6px}
footer.site .disclaimer{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;font-family:var(--f-mono)}

@media(max-width:640px){
  .navbar{justify-content:center}
  nav.main{justify-content:center}
  .hero-foto{padding:130px 0 80px}
}
@media print{header.site,footer.site,.cta-row,nav.main,.wg-balk{display:none}body{background:#fff}}

/* ---------- Google Maps-kaart ---------- */
#gmap{width:100%;height:480px;border:0;border-radius:10px;display:block}
.kaart-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.kaart-chip{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;
  font-size:.88rem;padding:8px 14px;border-radius:99px;border:1.5px solid var(--rand);
  background:var(--wit);cursor:pointer;color:var(--inkt);
}
.kaart-chip:hover{border-color:#1E6580}
.kaart-chip.actief{background:var(--petrol-2);border-color:var(--petrol-2);color:var(--wit)}
.kaart-chip .cnr{
  font-family:var(--f-display);font-weight:900;font-size:.78rem;color:var(--wit);
  width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.kaart-chip .cnr.oranje{background:var(--accent)}
.kaart-chip .cnr.groen{background:var(--groen)}
@media(max-width:640px){#gmap{height:380px}}

/* brede tabellen scrollen binnen hun eigen kader op smalle schermen */
.tabel-schuif{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabel td{overflow-wrap:break-word}
.tabel td small{display:inline-block;margin-top:2px}

.kaart-chip small{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--wit);padding:2px 7px;border-radius:99px;margin-left:2px}
.kaart-chip.actief small{background:var(--wit);color:var(--petrol-2, #0F3D4E)}
/* lange woorden en e-mailadressen niet buiten beeld laten lopen */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.kaartje{min-width:0;overflow-wrap:break-word}
.kaartje a,.intro a{overflow-wrap:anywhere}

.tabel.breed{min-width:720px}
.tabel .knop,.tabel .status,.tabel .tag{white-space:nowrap}
.tabel .melding{overflow-wrap:anywhere}