/* HYPERDAM — stijl
   Palet en typografie zijn ontleend aan Nederlandse netwerkkaarten en
   perronborden: koel papier, petrolblauw, en vijf regiokleuren die het
   enige kleursysteem in de interface vormen. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..800&display=swap');

:root {
  --papier:   #E4E8EC;
  --vlak:     #FFFFFF;
  --inkt:     #0F1720;
  --inkt-zwak:#5A6672;
  --petrol:   #0A3A52;
  --petrol-2: #0D4C6B;
  --lijn:     #C3CBD3;
  --lijn-zacht:#DFE4E9;
  --geel:     #FFCE00;
  --groen:    #1E8A6B;
  --rood:     #C8402B;

  --kern:  #E2542C;
  --noord: #E8A317;
  --west:  #1E8A6B;
  --zuid:  #3F5FBF;
  --oost:  #8A4A9B;

  --r: 3px;
  --schaduw: 0 1px 0 rgba(15,23,32,.06), 0 6px 18px -12px rgba(15,23,32,.35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.08; font-weight: 700; letter-spacing: -.018em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-stretch: 112%; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; max-width: 68ch; }
a  { color: var(--petrol-2); }
:focus-visible { outline: 3px solid var(--petrol-2); outline-offset: 2px; }

/* ---------------- chrome ---------------- */

.balk {
  background: var(--petrol);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
  border-bottom: 3px solid var(--geel);
}
.balk-in {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; min-height: 58px; flex-wrap: wrap;
}
.merk { font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; font-size: 1.15rem; color: #fff; text-decoration: none; }
.merk span { color: var(--geel); }
.balk nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.balk nav a {
  color: #C9D8E1; text-decoration: none; padding: 7px 12px; border-radius: var(--r);
  font-size: .92rem; font-weight: 600;
}
.balk nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.balk nav a[aria-current] { background: var(--geel); color: var(--inkt); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 34px 20px 90px; }
.smal { max-width: 760px; }

/* ---------------- generiek ---------------- */

.kaartje { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); }
.pad { padding: 20px; }
.rij { display: flex; gap: 14px; flex-wrap: wrap; }
.tussen { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.zwak { color: var(--inkt-zwak); }
.mini { font-size: .82rem; }
.mt { margin-top: 26px; }
.streep { border: 0; border-top: 1px solid var(--lijn); margin: 26px 0; }

.knop {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--petrol); color: #fff; border: 1px solid var(--petrol);
  padding: 11px 20px; border-radius: var(--r);
}
.knop:hover { background: var(--petrol-2); }
.knop[disabled] { opacity: .4; cursor: not-allowed; }
.knop.geel { background: var(--geel); border-color: #E0B500; color: var(--inkt); }
.knop.geel:hover { background: #FFD833; }
.knop.leeg { background: transparent; color: var(--petrol); }
.knop.leeg:hover { background: rgba(10,58,82,.08); }
.knop.klein { padding: 6px 12px; font-size: .85rem; }

input[type=text], input[type=password], textarea, select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--lijn);
  border-radius: var(--r); background: var(--vlak); color: var(--inkt); width: 100%;
}
label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 5px; }

.melding { padding: 12px 14px; border-radius: var(--r); border-left: 4px solid; margin-bottom: 14px; font-size: .92rem; }
.melding.fout { background: #FBEBE8; border-color: var(--rood); }
.melding.goed { background: #E7F4EF; border-color: var(--groen); }
.melding.let  { background: #FFF6D9; border-color: #E0B500; }

/* ---------------- home ---------------- */

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.hero .lood { font-size: 1.12rem; max-width: 46ch; }
.opdracht { border-left: 4px solid var(--geel); padding-left: 18px; margin: 26px 0; }
.telblok { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 24px; }
.telblok div b { display: block; font-size: 1.9rem; font-stretch: 115%; line-height: 1; }
.telblok div span { font-size: .8rem; color: var(--inkt-zwak); }

.regels { counter-reset: r; list-style: none; padding: 0; margin: 0; }
.regels li { counter-increment: r; padding: 13px 0 13px 46px; border-top: 1px solid var(--lijn); position: relative; }
.regels li::before {
  content: counter(r); position: absolute; left: 0; top: 12px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--petrol); color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}

/* ---------------- kaart van de stad ---------------- */

.stadskaart { width: 100%; height: auto; display: block; }
.stadskaart .regio { cursor: default; transition: opacity .18s; }
.stadskaart .regio path { stroke: #fff; stroke-width: 3; }
.stadskaart.klikbaar .regio { cursor: pointer; }
.stadskaart.klikbaar .regio:hover path { filter: brightness(1.12); }
.stadskaart .regio.uit path { opacity: .22; }
.stadskaart .regio.aan path { opacity: 1; }
.stadskaart .rlabel { font-size: 21px; font-weight: 800; fill: #fff; letter-spacing: .02em; }
.stadskaart .sub { font-size: 12px; fill: rgba(255,255,255,.85); font-weight: 600; }
.stadskaart .poi { font-size: 11px; font-weight: 700; fill: #16202B; }
.stadskaart .infra { fill: none; }
.stadskaart .glyph { font-size: 17px; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .83rem; margin-top: 12px; }
.legenda i { width: 13px; height: 13px; border-radius: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* ---------------- regioprofielen ---------------- */

.regiogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 14px; }
.regiokop { border-top: 5px solid; padding-top: 12px; }
.regiokop h3 { margin-bottom: 2px; }
.cijfers { list-style: none; padding: 0; margin: 12px 0 0; font-size: .86rem; }
.cijfers li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--lijn-zacht); }
.cijfers b { font-weight: 700; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.tag { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: #EDF1F4; border: 1px solid var(--lijn); }

details.waarom { margin: 4px 0; border-top: 1px solid var(--lijn-zacht); }
details.waarom summary { cursor: pointer; padding: 9px 0; display: flex; justify-content: space-between; gap: 14px; font-size: .92rem; }
details.waarom summary::-webkit-details-marker { display: none; }
details.waarom summary b { font-weight: 700; }
details.waarom p { margin: 0 0 12px; font-size: .89rem; color: var(--inkt-zwak); }

/* ---------------- maatregelkaarten ---------------- */

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filters button {
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  padding: 7px 13px; border-radius: 20px; border: 1px solid var(--lijn); background: var(--vlak);
}
.filters button[aria-pressed=true] { background: var(--petrol); border-color: var(--petrol); color: #fff; }

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 14px; }
.m {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px;
}
.m header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.m h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.m .cat { font-size: .74rem; font-weight: 700; color: var(--inkt-zwak); }
.prijs { font-size: 1.12rem; font-weight: 800; white-space: nowrap; font-stretch: 112%; }
.prijs.op { color: var(--groen); }
.m .kort { font-size: .88rem; margin: 0; color: var(--inkt-zwak); }

.kpi { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.kpi div { text-align: center; background: #F3F6F8; border-radius: var(--r); padding: 6px 2px; }
.kpi span { display: block; font-size: .68rem; color: var(--inkt-zwak); font-weight: 700; }
.kpi b { font-size: .95rem; letter-spacing: -.5px; }
.kpi b.p3 { color: #12724F; } .kpi b.p2 { color: #2E8A62; } .kpi b.p1 { color: #66957F; }
.kpi b.p0 { color: #9AA5AF; }
.kpi b.n1 { color: #C08268; } .kpi b.n2 { color: #B5573C; } .kpi b.n3 { color: var(--rood); }

.sz { font-size: .84rem; display: grid; gap: 5px; }
.sz p { margin: 0; max-width: none; }
.sz b { font-weight: 700; }
.pijl { font-weight: 800; }
.pijl.op { color: var(--groen); } .pijl.neer { color: var(--rood); }

/* ---------------- planbouwer ---------------- */

.planlay { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.dashboard { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.dashboard div { background: var(--vlak); padding: 12px 14px; }
.dashboard span { font-size: .72rem; font-weight: 700; color: var(--inkt-zwak); display: block; }
.dashboard b { font-size: 1.35rem; font-stretch: 112%; line-height: 1.2; }
.dashboard b.rood { color: var(--rood); }

.slots { display: grid; gap: 9px; margin-top: 18px; }
.slot {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 13px; align-items: center;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 12px 14px 12px 0;
  overflow: hidden;
}
.slot .balkje { align-self: stretch; }
.slot .naam { font-weight: 800; font-size: .95rem; }
.slot .leeg { color: var(--inkt-zwak); font-style: italic; font-weight: 400; }
.slot .regio { font-size: .74rem; font-weight: 700; color: var(--inkt-zwak); }
.slot.actief { box-shadow: 0 0 0 2px var(--petrol); }
.slot .cap { background: var(--geel); font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; }
.slothint { font-size: .78rem; color: var(--inkt-zwak); }

.kiezer { max-height: 560px; overflow-y: auto; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); }
.kz { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--lijn-zacht); }
.kz:last-child { border-bottom: 0; }
.kz .t { font-weight: 700; font-size: .92rem; }
.kz .s { font-size: .76rem; color: var(--inkt-zwak); }
.kz.niet { opacity: .42; }
.fitbadge { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.fit-top { background: #D6F0E4; color: #0E6C4A; }
.fit-goed { background: #E4F2E9; color: #2C7355; }
.fit-ok { background: #EDF1F4; color: #56626D; }
.fit-zwak { background: #FBEEDC; color: #97621B; }
.fit-slecht { background: #FAE2DD; color: #A63924; }

/* ---------------- doorrekening (donker) ---------------- */

body.show {
  background: #060B11; color: #EEF3F7;
  font-feature-settings: 'tnum';
}
.show .wrap { max-width: 1500px; padding-top: 22px; }
.showkop { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.weekklok { display: flex; gap: 6px; }
.weekklok div {
  padding: 6px 13px; border-radius: 3px; background: #101A24; color: #56687A;
  font-weight: 700; font-size: .82rem; border: 1px solid #1B2836;
}
.weekklok div.nu { background: var(--geel); color: #0B121A; border-color: var(--geel); }
.weekklok div.geweest { color: #9FB3C4; }

.showlay { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: start; }

.gebkaart {
  background: linear-gradient(150deg,#12202C,#0B141D);
  border: 1px solid #22313F; border-left: 6px solid var(--geel);
  border-radius: 4px; padding: 26px 28px; min-height: 250px;
}
.gebkaart .dag { font-size: .84rem; color: var(--geel); font-weight: 800; letter-spacing: .06em; }
.gebkaart h2 { font-size: clamp(1.6rem,3.4vw,2.5rem); margin: 8px 0 12px; font-stretch: 115%; }
.gebkaart p { color: #B7C7D4; font-size: 1.02rem; max-width: 52ch; }
.intens { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.intensbalk { flex: 1; height: 8px; background: #1B2836; border-radius: 4px; overflow: hidden; max-width: 260px; }
.intensbalk i { display: block; height: 100%; background: var(--geel); }
.escal { margin-top: 14px; padding: 12px 14px; background: rgba(200,64,43,.16); border-left: 3px solid var(--rood); color: #FFD9D1; font-size: .93rem; }

.bord { background: #0B131B; border: 1px solid #1D2A37; border-radius: 4px; overflow: hidden; }
.bord .brij {
  display: grid; grid-template-columns: 44px 1fr auto 74px; gap: 12px; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid #151F29;
  transition: transform .65s cubic-bezier(.22,1,.36,1), background .3s;
}
.bord .brij:last-child { border-bottom: 0; }
.bord .pos { font-weight: 800; color: #56687A; font-size: .95rem; }
.bord .sp { font-weight: 700; font-size: 1rem; }
.bord .delta { font-weight: 800; font-size: .88rem; min-width: 54px; text-align: right; }
.bord .pt { font-weight: 800; font-size: 1.25rem; text-align: right; font-stretch: 112%; }
.bord .brij.op { background: rgba(30,138,107,.16); }
.bord .brij.neer { background: rgba(200,64,43,.14); }
.bord .brij.top1 .pos { color: var(--geel); }
.plus { color: #4FD1A0; } .min { color: #FF8B72; }

.callout { margin-top: 14px; display: grid; gap: 8px; }
.callout div { padding: 11px 15px; border-radius: 3px; font-size: .95rem; background: #101A24; border-left: 3px solid; }
.callout div.beste { border-color: #4FD1A0; }
.callout div.slechtste { border-color: #FF8B72; }
.callout b { font-stretch: 112%; }
.quote { margin-top: 14px; padding: 13px 16px; background: #101A24; border-left: 3px solid var(--geel); font-size: .95rem; color: #C7D6E2; }

.podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: end; margin: 26px 0; }
.podium div { background: #101A24; border: 1px solid #22313F; border-radius: 4px; padding: 20px; text-align: center; }
.podium .p1 { border-color: var(--geel); background: linear-gradient(180deg,rgba(255,206,0,.14),#101A24); }
.podium .medaille { font-size: 2rem; }
.podium .np { font-weight: 800; font-size: 1.15rem; margin-top: 6px; }
.podium .sc { font-size: 2rem; font-weight: 800; font-stretch: 115%; color: var(--geel); }

.prijzen { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 12px; }
.prijzen div { background: #101A24; border: 1px solid #22313F; border-radius: 4px; padding: 14px 16px; }
.prijzen span { font-size: .78rem; color: #7C90A2; font-weight: 700; display: block; }
.prijzen b { font-size: 1.05rem; }

.hostbalk { position: fixed; bottom: 0; left: 0; right: 0; background: #0B131B; border-top: 1px solid #22313F; padding: 12px 20px; display: flex; gap: 10px; align-items: center; z-index: 50; }
.hostbalk .rest { margin-left: auto; font-size: .84rem; color: #7C90A2; }

/* ---------------- tabellen ---------------- */

table.t { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--vlak); }
table.t th, table.t td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lijn-zacht); }
table.t th { font-size: .76rem; color: var(--inkt-zwak); font-weight: 700; border-bottom: 1px solid var(--lijn); }
table.t tbody tr:hover { background: #F5F8FA; }
td.num, th.num { text-align: right; }

/* ---------------- nieuws ---------------- */

.nieuws { display: grid; gap: 2px; }
.nieuws article { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px 18px; }
.nieuws .bron { font-size: .74rem; font-weight: 800; color: var(--petrol); }
.nieuws h3 { margin: 5px 0 6px; font-size: 1.06rem; line-height: 1.3; }
.nieuws p { margin: 0; font-size: .9rem; color: var(--inkt-zwak); }

@media (max-width: 900px) {
  .hero, .planlay, .showlay { grid-template-columns: 1fr; }
  .dashboard { grid-template-columns: repeat(2,1fr); }
  .podium { grid-template-columns: 1fr; }
  .wrap { padding: 22px 15px 80px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }