/* Kiteweer — warm, redactioneel, licht. Kleur betekent iets of hij staat er niet. */

:root{
  --papier:#FBF8F4;
  --kaart:#FFFFFF;
  --inkt:#17130F;
  --zacht:#6B6157;
  --flauw:#989086;
  --lijn:#E7DFD5;
  --lijn-2:#F1EBE3;

  /* vijf niveaus, één kleur per niveau */
  --perfect:#0E7A54;
  --goed:#3E9B6E;
  --matig:#C08315;
  --weinig:#A9A096;
  --aflandig:#CE4A1F;

  --perfect-v:#E3F3EC;
  --goed-v:#EAF5EF;
  --matig-v:#FBF0DA;
  --weinig-v:#F2EEE9;
  --aflandig-v:#FBE7DF;

  --r:16px; --r-s:10px; --r-pil:999px;
  --kop:"Bricolage Grotesque",Georgia,serif;
  --tekst:"Albert Sans",system-ui,-apple-system,sans-serif;
  --t:170ms cubic-bezier(.2,.8,.3,1);
  --schaduw:0 1px 2px rgba(23,19,15,.05), 0 8px 24px -12px rgba(23,19,15,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-weight:500;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--kop);font-weight:800;letter-spacing:-.025em;margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--inkt)}
:focus-visible{outline:2.5px solid var(--inkt);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:900px;margin:0 auto;padding:0 20px}
main{padding-bottom:64px}

/* ── kop ─────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 14px;
  border-bottom:1px solid var(--lijn)}
.merk{display:flex;align-items:center;gap:9px;margin-right:auto}
.merk h1{font-size:20px;letter-spacing:-.03em}
.mark{width:22px;height:22px;border-radius:50%;flex:none;border:2.5px solid var(--inkt);
  position:relative}
.mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--inkt)}

.seg{display:inline-flex;border:1px solid var(--lijn);border-radius:var(--r-pil);
  padding:3px;gap:2px;background:var(--kaart)}
.seg button{padding:7px 15px;border-radius:var(--r-pil);font-weight:700;font-size:14px;
  color:var(--zacht);transition:background var(--t),color var(--t);white-space:nowrap}
.seg button:hover{color:var(--inkt)}
/* Elke aanraakbare knop reageert op dezelfde manier: ingedrukt iets kleiner, en een zichtbare
   rand voor wie met het toetsenbord werkt. Nooit een hover die de hoogte verandert, dan springt
   de rij onder je cursor weg. */
.seg button:active,.invoer:active,.dagkaart:active,.wm:active,.uurtabel th .info:active{transform:scale(.98)}
:where(button,a,input,summary):focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.seg button.on{background:var(--inkt);color:var(--papier)}

/* ── nu gemeten ──────────────────────────────────── */
.nu{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--lijn-2)}
.nu-kop{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.nu-dot{width:8px;height:8px;border-radius:50%;background:var(--perfect);
  animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(14,122,84,0)}100%{box-shadow:0 0 0 0 rgba(14,122,84,0)}}
.nu-kop b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.nu-kop span{font-size:12.5px;color:var(--zacht);margin-left:auto}
.stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 18px}
.stn{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dotted var(--lijn-2)}
.stn:last-child{border-bottom:0}
.stn .snaam{font-size:13.5px;color:var(--zacht);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stn .swind{font-family:var(--kop);font-size:17px}
.stn .sdir{font-size:12px;color:var(--zacht);display:inline-flex;align-items:center;gap:3px}
.stn.hoofd .swind{color:var(--perfect)}

/* ── hero ────────────────────────────────────────── */
.hero{margin:16px 0 0;padding:26px;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--r);box-shadow:var(--schaduw);border-left:5px solid var(--tint,var(--lijn))}
.kicker{margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tint,var(--zacht))}
.verdict{font-size:clamp(30px,6vw,46px);line-height:1.02;margin-bottom:4px}
.onder-verdict{color:var(--zacht);font-size:15px}
.groot-rij{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.meet{min-width:0}
.meet .mv{font-family:var(--kop);font-size:34px;line-height:1;white-space:nowrap}
.meet .ml{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--zacht);margin-top:5px}
.meet .mv em{font-style:normal;font-size:17px;color:var(--zacht)}
.cta-rij{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.cta{display:inline-flex;align-items:center;gap:7px;background:var(--inkt);color:var(--papier);
  padding:12px 20px;border-radius:var(--r-pil);font-weight:700;font-size:14.5px;
  text-decoration:none;transition:opacity var(--t)}
.cta:hover{opacity:.86}
.cta.ghost{background:transparent;border:1px solid var(--lijn);color:var(--inkt)}
.cta.ghost:hover{background:var(--lijn-2);opacity:1}

/* ── secties ─────────────────────────────────────── */
.sec{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);
  margin:34px 0 12px;font-family:var(--tekst);font-weight:700}
/* De eerste sectie zit vlak onder de kiezers: daar was 34px lucht te veel (Daniel, 12-09). */
main.wrap>section:first-of-type>.sec{margin-top:18px}
.sec i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;opacity:.85}

/* ── kit ─────────────────────────────────────────── */
.kit{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:18px}
.kitrij{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;
  padding-bottom:16px;border-bottom:1px solid var(--lijn-2);margin-bottom:16px}
.veld{display:flex;flex-direction:column;gap:7px}
.veld>span:first-child,.veld>label{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zacht)}
.invoer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--lijn);
  border-radius:var(--r-pil);padding:7px 14px;background:var(--papier)}
.invoer input{width:46px;background:none;border:0;color:var(--inkt);font:700 16px var(--tekst)}
.invoer b{font-size:13px;color:var(--zacht);font-weight:700}
.kites{display:flex;gap:8px;flex-wrap:wrap}
.kitepil{border:1px solid var(--lijn);border-radius:var(--r-pil);padding:7px 14px;
  font-weight:700;font-size:14px;background:var(--papier);transition:all var(--t)}
.kitepil.aan{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.advies{display:flex;gap:12px;flex-wrap:wrap}
.kadvies{flex:1;min-width:140px;border:1px solid var(--lijn);border-radius:var(--r-s);
  padding:13px 15px;background:var(--tint-v);border-left:4px solid var(--tint)}
.kadvies b{font-family:var(--kop);font-size:24px;display:block}
.kadvies span{font-size:12.5px;color:var(--zacht);display:block;margin-top:2px}
.kadvies .kwan{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tint);margin-bottom:5px;display:block}

/* ── detail ──────────────────────────────────────── */
.sheet{position:fixed;inset:0;background:rgba(23,19,15,.42);display:flex;
  align-items:flex-end;justify-content:center;z-index:5000;padding:14px}
.sheet[hidden]{display:none}
.sheet-in{background:var(--kaart);border-radius:var(--r);padding:24px;max-width:420px;
  width:100%;position:relative;box-shadow:0 20px 60px -20px rgba(23,19,15,.4)}
.sheet h3{font-size:21px;margin-bottom:14px;padding-right:30px}
.sheet .x{position:absolute;right:14px;top:11px;font-size:26px;line-height:1;color:var(--zacht)}
.rij{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--lijn-2);font-size:14.5px}
.rij:last-child{border-bottom:0}
.rij span:first-child{color:var(--zacht)}
.rij span:last-child{font-weight:700;text-align:right}
@media(min-width:600px){.sheet{align-items:center}}

/* Eén regel bovenin: hoe vers de twee dingen zijn waar de pagina op draait, de modellen en de
   meetpaal. Stroming en golven staan er bewust niet bij: die veranderen niet per bezoek. */
.vers{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:var(--flauw);
  letter-spacing:.02em;flex-wrap:wrap}
.vers b{color:var(--zacht);font-weight:700}
.vers .verspunt{color:var(--goed)}
.vers .verspunt.oud{color:var(--matig)}
.vers .info{font-style:normal;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--lijn);color:var(--flauw);display:inline-flex;align-items:center;justify-content:center;flex:none}
.vers .info:hover{border-color:var(--zacht);color:var(--zacht)}

/* ── de voet: vijf regels om te scannen, geen alinea's ── */
.voetlijst{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-width:62ch}
.voetlijst li{font-size:13.5px;line-height:1.45;color:var(--zacht)}
.voetlijst li b{color:var(--inkt)}

.voet{border-top:1px solid var(--lijn);padding:20px 0 40px;font-size:13px;color:var(--zacht)}
.voet p{margin:0 0 8px;max-width:70ch;line-height:1.5}
.voet .dank{font-size:14px;color:var(--inkt)}
.voet .disclaimer{color:var(--inkt)}
.uurtabel .tkite{font-weight:800;color:var(--tint);background:var(--tint-v);border-radius:4px;padding:5px 0}
.uurtabel .tkite b{font-size:15px;display:block}
.uurtabel .tkite small{display:block;font-size:10.5px;font-weight:700;color:var(--zacht)}
/* Absoluut tegen de rechterrand van de kop, niet achter de tekst aan: anders staat elke knop op
   een andere plek zodra het woord ervoor een letter langer is. */
.uurtabel th .info{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;background:none;cursor:pointer}
.uurtabel th .info:hover{border-color:var(--inkt);color:var(--inkt);background:var(--lijn-2)}
/* Rijkop met uitleg: tekst links, knop tegen de rechterrand. Alle knoppen staan zo onder elkaar. */
.uurtabel th .rk{display:block;padding-right:23px}
/* Kans per windsterkte in het uitlegvenster: drie kaartjes, één beslissing per kaartje. */
.drempels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
/* Te veel wind is geen kans om te gaan, dus geen kaartje: een regel eronder, en hij kleurt pas
   op zodra er echt kans op storm is. */
.tehard{font-size:12.5px;color:var(--zacht);margin:0 0 14px;line-height:1.45}
.tehard b{color:var(--inkt)}
.tehard.op{background:var(--matig-v);color:var(--inkt);border-radius:var(--r-s,8px);padding:8px 10px}
.tehard.op b{color:var(--matig)}
.dr{background:var(--tint-v);border-radius:var(--r-s,8px);padding:10px 8px;text-align:center}
.dr b{display:block;font-family:var(--kop);font-size:24px;line-height:1.05;color:var(--tint)}
.dr span{display:block;font-size:12px;font-weight:700;margin-top:2px}
.dr small{display:block;font-size:11px;color:var(--zacht);margin-top:1px}
.uitleg-dr{font-size:12.5px;color:var(--zacht);margin:0 0 14px}
.voet a{color:var(--zacht);text-decoration:underline;text-underline-offset:3px}
.voet .dot{margin:0 8px;opacity:.5}

@media(max-width:600px){
  /* Safari zoomt de pagina in bij een invoerveld onder 16px en zoomt niet terug: alle velden minimaal 16px */
  input{font-size:16px}
  .invoer input{font-size:16px}
  html,body{overflow-x:hidden}
  .voet{padding:20px 24px 40px}
  .groot-rij{gap:18px}
  .meet .mv{font-size:27px}
  .blok{min-width:42px}
}


/* ── week in één blik ────────────────────────────── */
.weekstrip{display:flex;flex-wrap:wrap;gap:8px}
.weekstrip .dagkaart{flex:1 1 112px}
.dagkaart{display:block;background:var(--tint-v);border:1px solid var(--lijn);border-radius:var(--r-s);
  padding:12px 12px 10px;text-decoration:none;border-top:4px solid var(--tint);transition:transform var(--t)}
.dagkaart:hover{transform:translateY(-2px)}
.dagkaart .dk{display:block;font-size:12px;font-weight:700;color:var(--zacht)}
.dagkaart .dv{display:block;font-family:var(--kop);font-size:22px;margin:4px 0 2px;color:var(--tint);white-space:nowrap}
.dagkaart .dv em{font-style:normal;font-size:12px;color:var(--zacht)}
.dagkaart .dn{display:block;font-size:12px;font-weight:700;color:var(--tint);line-height:1.3}
.ind{display:block;font-size:10.5px;color:var(--flauw);margin-top:5px}
.kans-ens{color:var(--zacht);font-weight:700;margin-top:2px}

/* ── uur voor uur, per dag een tabel ──────────────── */
.dagen{display:flex;flex-direction:column;gap:14px}
.dag{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.dagkop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px 8px;border-left:5px solid var(--tint)}
.dagkop b{font-family:var(--kop);font-size:18px}
.dagkop .dagv{font-size:13px;font-weight:700;color:var(--tint)}
.dagkop .ind{margin:0;width:100%}
.scroll{overflow-x:auto;padding:0 10px 10px}
.uurtabel{border-collapse:separate;border-spacing:3px 0;width:100%;min-width:640px;table-layout:fixed}
.uurtabel th{font-size:11px;font-weight:700;color:var(--zacht);text-align:left;white-space:normal;width:88px;line-height:1.2;padding-right:6px;position:relative}
/* Elke rij dezelfde hoogte, inhoud verticaal gecentreerd: anders is de windrij twee keer zo hoog
   als de golvenrij en loopt de tabel ongelijk. */
.uurtabel td,.uurtabel th{height:56px;vertical-align:middle}
.uurtabel td{text-align:center;padding:2px 0;font-size:13.5px;position:relative}
.uurtabel td.aan{background:var(--lijn-2)}
/* Het uur waar de klok nu in staat. Gekozen = inkt gevuld, nu = een dunne inktring met een
   lichte was erachter: allebei zichtbaar, en je verwart ze niet met elkaar. */
.uurtabel td.nuur::before{content:"";position:absolute;inset:0 -1px;
  border-left:1px solid var(--inkt);border-right:1px solid var(--inkt);pointer-events:none}
.uurtabel tr:first-child td.nuur::before{border-top:1px solid var(--inkt);border-radius:7px 7px 0 0}
.uurtabel tr:last-child td.nuur::before{border-bottom:1px solid var(--inkt);border-radius:0 0 7px 7px}
.uurtabel .tu.nuur button{color:var(--inkt);padding:4px 0}
.uurtabel .tu.nuur button small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;line-height:1;margin-top:2px;color:var(--zacht);text-transform:uppercase}
.uurtabel .tu.nuur.aan button small{color:var(--papier);opacity:.75}

/* Wat het meetstation echt mat, met eronder hoeveel dat van het model afwijkt. Kleur alleen als
   het verschil ertoe doet: onder 1,5 kn is het model gewoon raak. */
.uurtabel .tmeet{padding:5px 0}
.uurtabel .tmeet b{display:block;font-family:var(--kop);font-size:15px;line-height:1}
.uurtabel .tmeet small{display:block;font-size:10.5px;font-weight:700;color:var(--zacht)}
.uurtabel th small{font-weight:600;font-size:10px;color:var(--zacht);line-height:1.15;display:block;margin-top:1px;padding-right:23px;white-space:nowrap}
.uurtabel .tmeet small.meer{color:var(--perfect)}
.uurtabel .tmeet small.minder{color:var(--matig)}
.uurtabel .tmeet small.raak{color:var(--zacht)}
/* Twee feiten die niet op een sessiekaartje passen: liep het vandaag hoger of lager dan het model
   zei, en wanneer draait de stroom. Stonden als twee alinea's; nu twee regels om te scannen. */
.feiten{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.feiten li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.35}
.feiten .info{margin-left:auto;align-self:center;font-style:normal;font-size:10px;font-weight:700;
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--lijn);color:var(--flauw);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.feiten .info:hover{border-color:var(--zacht);color:var(--zacht)}
.feiten .fp{flex:none;font-weight:800;font-size:12.5px;padding:2px 8px;border-radius:var(--r-pil);
  background:var(--tint-v);color:var(--tint);white-space:nowrap}
.feiten .fx{min-width:0}
.feiten .fx b{font-weight:700}
.uurtabel .tu button{font-weight:700;font-size:13px;color:var(--zacht);padding:6px 0;width:100%;border-radius:6px}
.uurtabel .tu button:hover{background:var(--lijn-2);color:var(--inkt)}
.uurtabel .tu.aan button{background:var(--inkt);color:var(--papier)}
.uurtabel .tw{height:64px;vertical-align:bottom;padding-bottom:0}
.uurtabel .tw b{display:block;font-family:var(--kop);font-size:15px;line-height:1;margin-bottom:3px}
.uurtabel .tw .staaf{display:block;width:100%;border-radius:3px 3px 0 0;min-height:3px}
.uurtabel .tw small{display:block;font-size:10.5px;color:var(--flauw);line-height:1.1;white-space:nowrap}
.uurtabel .tw small.onzeker{color:var(--matig)}
/* Het plusje staat dicht onder de piek. De kleur komt uit app.js en loopt van grijs via oker naar
   rood, zodat je ziet aankomen dat het vlagerig wordt in plaats van dat het ineens omslaat. */
.uurtabel .tv small{display:block;font-size:10.5px;color:var(--flauw);font-weight:600;margin-top:1px;white-space:nowrap}
/* De vlaagkleur komt nu uit app.js en loopt van grijs via oker naar rood, want een schakelaar
   liet je niet zien dat het erger werd. Hier staat alleen nog de rustige stand. */
.uurtabel .tv small{transition:color var(--t)}
.uurtabel .tv .vp{display:inline-block;min-width:34px;background:var(--tint-v);color:var(--tint);font-weight:700;padding:5px 8px;border-radius:6px}
.uurtabel .wijzer{width:16px;height:16px}

.wijzer{width:14px;height:14px;flex:none;vertical-align:middle}
.wijzer path{fill:currentColor}
.oordeel li b{display:inline;font-size:inherit;margin:0;color:var(--inkt)}

/* ── het strand, echte luchtfoto, noorden boven ──── */
.scenekaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.scene{position:relative;aspect-ratio:900/480;background:#7A8A96}
#kaart{position:absolute;inset:0}
#pijlen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:500}
.scene-label{position:absolute;left:14px;top:14px;z-index:600;background:rgba(251,248,244,.94);border-radius:var(--r-s);
  padding:10px 14px;display:flex;flex-direction:column;line-height:1.3}
.scene-label b{font-family:var(--kop);font-size:28px}
.scene-label span{font-size:12.5px;color:var(--zacht);font-weight:700}
.leaflet-container{font-family:var(--tekst)}
.leaflet-control-attribution{font-size:9px;opacity:.7}
.scene-uitleg{padding:16px 18px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.oordeel{display:flex;gap:11px;align-items:flex-start}
.oordeel .bol{width:11px;height:11px;border-radius:50%;background:var(--tint);margin-top:5px;flex:none}
.oordeel b{display:block;font-size:14.5px}
.oordeel span{display:block;font-size:13px;color:var(--zacht);line-height:1.45}

@media(max-width:600px){.scene-label b{font-size:22px}}

.dagkaart{text-align:left;width:100%;cursor:pointer;border:1.5px solid var(--lijn);border-top:4px solid var(--tint)}
.dagkaart.aan{border-color:var(--inkt);box-shadow:0 0 0 1px var(--inkt)}
.uurtabel .ts small,.uurtabel .tx small{display:block;font-size:11px;color:var(--zacht);font-weight:700}
.uurtabel .ts{padding-top:6px}
.uurtabel .tx span{font-size:16px;line-height:1.1;display:block}
.schuifrij{display:flex;align-items:center;gap:12px;padding:12px 18px 10px;border-top:1px solid var(--lijn-2)}
.schuifuur{font-family:var(--kop);font-size:18px;min-width:52px}
.schuifkolom{flex:1;min-width:0}
.schuiflabels{display:flex;gap:2px;height:6px;margin:0 8px 4px}
.schuiflabels i{flex:1;border-radius:2px}
/* De schuif was een kale systeembalk: je zag niet dat je hem kon pakken. Nu een dikke greep in de
   huisstijl, met een hint eronder en een knop die de dag zelf afspeelt. */
#schuif{width:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;height:24px;cursor:grab}
#schuif:active{cursor:grabbing}
#schuif::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--lijn)}
#schuif::-moz-range-track{height:6px;border-radius:999px;background:var(--lijn)}
#schuif::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--inkt);border:3px solid var(--kaart);box-shadow:0 1px 6px rgba(23,19,15,.35)}
#schuif::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--inkt);
  border:3px solid var(--kaart);box-shadow:0 1px 6px rgba(23,19,15,.35)}
.schuifhint{display:block;font-size:11px;color:var(--flauw);margin:1px 0 0 8px}
.speel{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--lijn);
  background:var(--kaart);color:var(--inkt);font-size:13px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:var(--t)}
.speel:hover{border-color:var(--inkt);background:var(--lijn-2)}
.speel.aan{background:var(--inkt);color:var(--kaart);border-color:var(--inkt)}
.onder-verdict b{color:var(--tint)}
.flauw{color:var(--flauw);font-size:13px}
.uurtabel td{cursor:pointer}
.uurtabel td:hover{background:var(--lijn-2)}
.uurtabel .tb small,.uurtabel .tg small,.uurtabel .tk small{display:block;font-size:11px;color:var(--zacht);font-weight:700;line-height:1.25}
.uurtabel .tb .eens{background:linear-gradient(90deg,var(--goed) var(--p),var(--lijn) var(--p));background-size:100% 3px;background-repeat:no-repeat;background-position:bottom;padding-bottom:4px}
/* Elk getal in de tabel blijft op EEN regel. "0,8 m" brak af naar twee regels terwijl "0,7 m"
   ernaast op een regel paste, en dan staan de rijen niet meer op dezelfde hoogte (Daniel, 12-09). */
.uurtabel .tg span{font-weight:700;display:block;white-space:nowrap}
.uurtabel td{white-space:nowrap}
.uurtabel .tk{background:var(--tint-v);color:var(--tint);border-radius:4px;padding:5px 0}
.uurtabel .tk small{color:var(--tint);font-size:10.5px}
.dagkaart .dn{font-size:11.5px}

/* rider in de kop */
/* Twee eenvoudige controls in plaats van twee invulvelden: gewicht met min en plus, kitemaat uit
   een lijst. Zelfde hoogte, zelfde ronding, zelfde rand als de rest van de kop. */
/* De kitekiezer is EEN pil: de keuzelijst vult hem helemaal en heeft zelf geen rand, geen
   achtergrond en geen focusring. Zonder dit tekende Safari op de telefoon een zwarte afgeronde
   doos om de lijst heen, buiten de pil, omdat de algemene focusregel ook op een select slaat
   (Daniel, 12-09). Het pijltje hoort bij de pil, niet bij de lijst, anders staat het scheef zodra
   de hoogte verandert. */
.keuze{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);
  border-radius:var(--r-pil);background:var(--papier);padding:0 30px 0 14px;min-height:44px;transition:border-color var(--t)}
.keuze span{font-size:13px;font-weight:700;color:var(--zacht);white-space:nowrap}
.keuze select{appearance:none;-webkit-appearance:none;border:0;background:none;box-shadow:none;
  font:700 16px var(--tekst);color:var(--inkt);padding:8px 0;margin:0;cursor:pointer;text-align:right;
  flex:1;min-width:0;border-radius:var(--r-pil)}
.keuze select:focus,.keuze select:focus-visible{outline:none}
/* Het pijltje: twee lijntjes die samen een v vormen, altijd midden rechts in de pil. */
.keuze::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:2px solid var(--zacht);border-bottom:2px solid var(--zacht);transform:rotate(45deg);pointer-events:none}
.keuze:hover{border-color:var(--inkt)}
/* De focusring hoort om de hele pil, niet om de lijst erin, en alleen als je met het toetsenbord
   navigeert. Op :focus-within sprong er een dikke zwarte ring om de pil zodra je hem op de
   telefoon aantikte, en dat ziet eruit als een foutmelding. */
.keuze:has(select:focus){border-color:var(--inkt);box-shadow:0 0 0 3px rgba(23,19,15,.16)}

/* Gewicht, grootste kite en board zijn drie even zware keuzes, dus drie identieke pillen naast
   elkaar. Op een breed scherm label links en waarde rechts; op een telefoon label klein boven de
   waarde, want anders past "Directional" er niet naast zijn eigen label. */
.rider{display:flex;align-items:stretch;gap:8px}
.rider .keuze{min-height:48px}
/* vensters onder elkaar */
.vensters{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}
/* Een sessie is een kaartje: cijfer linksboven, tijd ernaast, daaronder de feiten en de som.
   Dezelfde vorm op elke breedte, want met een aparte mobiele volgorde stond het cijfer ineens
   midden in het kaartje (Daniel, 12-09). Op een breed scherm staan ze naast elkaar. */
.venster{border:1px solid var(--lijn);border-left:5px solid var(--tint);border-radius:var(--r-s);background:var(--tint-v)}
.venster{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;grid-auto-rows:min-content;
  align-content:start;gap:4px 10px;padding:12px 14px;cursor:pointer;list-style:none}
.venster:hover{border-color:var(--inkt)}
.venster .vc{grid-row:1;grid-column:1;font-family:var(--kop);font-size:24px;background:var(--tint);color:#fff;border-radius:8px;padding:2px 10px;line-height:1.2;align-self:start}
.venster .vt{grid-row:1;grid-column:2;font-family:var(--kop);font-size:19px;white-space:nowrap;align-self:center}
/* Het beste uur binnen een sessie: zelfde kaartje, met een stippellijn zodat je ziet dat het
   ergens binnen valt en geen losse sessie is. */
.venster .vt small{display:block;font:700 10px var(--tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--tint);margin-top:1px}
.venster.topuur{border-style:dashed;border-left-style:solid}
.venster .info{grid-row:1;grid-column:3;font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;align-self:start}
/* De feiten als bullets: wind, kite, stroom, golven, en het beste stuk binnen die sessie. */
.venster .vlijst{grid-row:2;grid-column:1/-1;margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--inkt)}
.venster .vlijst li{padding-left:14px;position:relative}
.venster .vlijst li::before{content:"";position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--tint);opacity:.6}
/* De som. Zonder die regel kunnen twee sessies allebei op 6 uitkomen langs heel verschillende
   wegen, en dan lijkt het of de stroming niet meetelt (Daniel, 12-09). */
/* De som staat onder elkaar, een post per regel. Op EEN regel paste hij niet en viel het eind
   eraf met puntjes, en juist het eindcijfer stond daar (Daniel, 12-09). De woorden blijven kort:
   de volle uitleg staat in de bullets erboven en achter de i-knop. */
.venster .vsom{grid-row:3;grid-column:1/-1;margin-top:auto;padding-top:7px;border-top:1px solid var(--lijn-2);
  font-size:11.5px;color:var(--zacht);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.venster .vsom b{font-weight:700;color:var(--inkt)}
/* Plus groen, min rood, maar rustig: een lichte achtergrond in plaats van gekleurde letters, want
   rode tekst leest als een foutmelding (Daniel, 12-09). */
.venster .vsom .r{display:block}
.venster .vsom .tot{margin-top:1px}
.venster .vsom .op{background:var(--perfect-v);color:var(--perfect);border-radius:4px;padding:1px 5px;font-weight:600}
.venster .vsom .af{background:var(--aflandig-v);color:var(--aflandig);border-radius:4px;padding:1px 5px;font-weight:600}
.venster ul{margin:0;padding:0 14px 12px 34px;font-size:13.5px;color:var(--zacht)}
.venster li.p::marker{content:"+ ";color:var(--perfect)}
.venster li.m::marker{content:"\2212 ";color:var(--aflandig)}
@media(min-width:900px){.vensters{flex-direction:row;align-items:stretch}.venster{flex:1 1 0;min-width:0}}
/* scene-kaarten */
.scene-uitleg{gap:12px}
.oordeel{display:block;background:var(--tint-v);border-left:5px solid var(--tint);border-radius:var(--r-s);padding:12px 14px}
.oordeel .okop{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tint);margin-bottom:3px}
.oordeel b{font-size:15px;display:block;margin-bottom:6px}
.oordeel ul{margin:0;padding-left:18px;font-size:13px;color:var(--zacht);line-height:1.45}
.oordeel li::marker{color:var(--tint)}
/* regen */
.uurtabel .tr .drup{font-size:10px;letter-spacing:-2px;display:block;line-height:1.3}
.uurtabel .tr small{display:block;font-size:11px;font-weight:700;color:#41607A}
.uurtabel .tr .droog{color:var(--flauw);font-weight:500}

.venster{margin:0}
.sheet-een{font-size:15px;margin:0 0 10px}
.redenen{margin:0 0 12px;padding-left:22px;font-size:14px;color:var(--zacht)}
.redenen li.p::marker{content:"+ ";color:var(--perfect)}
.redenen li.m::marker{content:"− ";color:var(--aflandig)}
.nu-kop a{color:var(--perfect);font-weight:700}
/* venster-rij in de tabel */
.uurtabel .vrij td{padding:0 0 4px}
.vpil{display:block;background:var(--tint);color:#fff;font-size:11.5px;font-weight:700;border-radius:6px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* mobiel: eerste kolom blijft staan, kop wrapt netjes */
.uurtabel th{position:sticky;left:0;background:var(--kaart);z-index:1}
@media(max-width:600px){
  .top{gap:10px}
  .merk{width:100%}
  /* Drie even brede pillen op een regel. Label boven de waarde, want naast elkaar past het niet
     op 390 px. Elke pil even hoog en even breed, en niets binnenin mag afbreken. */
  .rider{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .rider .keuze{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    min-width:0;min-height:54px;padding:6px 22px 6px 11px;border-radius:14px}
  .rider .keuze span{font-size:10.5px;letter-spacing:.04em;color:var(--flauw)}
  .rider .keuze select{width:100%;text-align:left;font-size:15px;padding:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rider .keuze::after{right:9px;width:6px;height:6px;margin-top:-4px}
  .hero{padding:18px 16px}
  .verdict{font-size:28px}
  .venster .vt{font-size:19px}
  .scene-uitleg{grid-template-columns:1fr}
  .schuifrij{padding:10px 12px 4px}
}
.venster .vc{justify-self:start}

/* modellen */
.modellen{margin-top:14px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 16px}
.mkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mkop b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.mkop>span:not(.mknoppen){font-size:12px;color:var(--zacht);flex:1;min-width:200px}
.mknoppen{display:inline-flex;gap:4px}
.mknoppen button{font-size:12px;font-weight:700;color:var(--zacht);padding:5px 10px;border-radius:var(--r-pil);border:1px solid var(--lijn)}
.mknoppen button.on{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.mchips{display:flex;gap:6px;flex-wrap:wrap}
.mchip{border:1px solid var(--lijn);border-radius:var(--r-pil);padding:5px 12px;font-size:13px;font-weight:700;color:var(--flauw);background:var(--papier);display:inline-flex;gap:6px;align-items:baseline}
.mchip small{font-size:10.5px;font-weight:500}
.mchip.aan{background:var(--perfect-v);color:var(--perfect);border-color:var(--perfect)}
.voet a{color:var(--inkt)}
.uurtabel .tm small{white-space:nowrap}
/* De pil moet BINNEN zijn cel blijven: met 7px lucht links en rechts werd "29%" 39px breed in een
   cel van 36 en liep hij over de buurman heen (gemeten op 390px, 12-09). */
.uurtabel .tm .kans{display:inline-block;max-width:100%;background:var(--tint-v);color:var(--tint);font-weight:700;font-size:12.5px;border-radius:6px;padding:2px 5px}
.uurtabel .tm small{display:block;font-size:10.5px;color:var(--flauw);margin-top:2px}
.mkop>span:not(.mknoppen){line-height:1.4}
.mkop>span:not(.mknoppen) b{font-size:inherit;letter-spacing:0;text-transform:none;color:var(--inkt)}
.dagkaart.leeg{--tint:var(--lijn);--tint-v:var(--papier);color:var(--flauw);cursor:default}
.dagkaart[data-grof]{border-style:dashed}
.mkop .info{font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:4px}
.mkop>span:not(.mknoppen){min-width:0}
.dagkaart .dvl{display:block;font-size:11px;color:var(--zacht);margin:-1px 0 4px}
.venster .vk small{font-size:11.5px;color:var(--zacht);font-family:var(--tekst);font-weight:700;margin-left:4px}
.redenen li{margin-bottom:5px}
.redenen li b{color:var(--inkt)}
/* scheiding fijn/grof in de dagenrij: breed scherm een kopregel over de hele breedte */
.dsep{flex:1 0 100%;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht);padding-bottom:6px;border-bottom:1.5px dashed var(--lijn)}
.dsep.grof{margin-top:6px;color:var(--flauw)}
.dsep i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;opacity:.8;margin-left:6px}
.dsep.grof~.dagkaart{border-style:dashed}
/* mini-overzicht van de week: zelfde balk op telefoon en op breed scherm. Per dag een staafje per
   uur, zo zie je in één blik waar de wind zit; klik springt naar die dag. */
/* De uitleg onder de weekbalk is een venster achter de i-knop in de kop geworden. */
.sec .info{margin-left:8px;vertical-align:2px;font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;
  border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center}
.sec .info:hover{border-color:var(--inkt);color:var(--inkt)}
.weekmini{display:flex;gap:2px;margin-bottom:14px;padding:10px 10px 8px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r-s)}
.wm{flex:1 1 0;min-width:0;padding:4px 4px 3px;border-radius:6px;cursor:pointer;background:none}
.wm:hover{background:var(--lijn-2)}
.wm.aan{background:var(--lijn-2);box-shadow:0 0 0 1.5px var(--inkt) inset}
.wm.grof{border-left:1.5px dashed var(--lijn);border-radius:0 6px 6px 0}
/* dagnaam links, hardste wind van die dag rechts */
.wmk{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:11.5px;font-weight:700;color:var(--tint);margin-bottom:5px}
.wmk em{font-style:normal;font-size:11px;color:var(--zacht)}
/* De streep op --grens staat op 12 kn: erboven kun je varen. */
.wmb{position:relative;display:flex;align-items:flex-end;gap:1px;height:62px}
.wmb::before{content:"";position:absolute;left:0;right:0;bottom:var(--grens,40%);border-top:1px dashed var(--lijn);pointer-events:none}
.wmb i{flex:1 1 0;border-radius:1.5px 1.5px 0 0;min-width:1px}

/* samenvatting onder de tabel */
.hero{padding:18px 18px 14px}
.hero .kicker{margin-bottom:10px}
.samenvatting{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.sv{margin:0;font-size:14.5px;line-height:1.45}
.sv.flauw{color:var(--flauw);font-size:13px}
.link{text-decoration:underline;text-underline-offset:3px;color:inherit;padding:0}
details.modellen summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline}
details.modellen summary::-webkit-details-marker{display:none}
details.modellen summary::before{content:"▸";color:var(--zacht);font-size:12px}
details.modellen[open] summary::before{content:"▾"}
details.modellen summary b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
details.modellen summary span{font-size:12.5px;color:var(--zacht)}
details.modellen>div{margin-top:12px}
.nu{margin:14px 0 0;padding:12px 16px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r)}
.dagen .dag{box-shadow:none;border:0;border-radius:0}
.dagen .dagkop{padding-left:0;border-left:0}
.dagen .scroll{padding:0 0 6px}
[hidden]{display:none!important}
.seg{flex-wrap:wrap}

/* Kopknoppen: één maat, één hoogte, en tekst die te lang is krijgt puntjes in plaats van over de
   rand te lopen. Op een telefoon liep "10 van 10 modellen" buiten zijn pil en was de kite-pil twee
   keer zo hoog als de kg-pil (gemeten op 402 px, iPhone 17 Pro-breedte). */
.filter{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  border:1px solid var(--lijn);border-radius:var(--r-pil);padding:6px 14px;background:var(--kaart);
  line-height:1.2;min-height:44px;overflow:hidden}
.filter b,.filter span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter b{font-size:13px}
.filter span{font-size:11px;color:var(--zacht)}
.filter:hover{border-color:var(--inkt)}
.filter:active{transform:scale(.98)}
.mixen{display:grid;gap:8px;margin-bottom:14px}
.mixknop{text-align:left;border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mixknop.aan{border-color:var(--perfect);background:var(--perfect-v)}
.mixknop b{font-size:15px}
.mixknop span{font-size:12.5px;color:var(--zacht)}
.sheet-in{max-width:520px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.rider{width:100%;border-top:1px solid var(--lijn-2);padding-top:10px}
.filter b{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spotzoek{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:var(--r-s);margin-bottom:10px;background:var(--papier);color:var(--inkt)}
#spotzoek:focus{outline:2px solid var(--inkt);border-color:var(--inkt)}
.spotlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;max-height:50vh;overflow:auto;margin-bottom:8px}
.spotkeus{text-align:left;border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:9px 11px;display:flex;flex-direction:column}
.spotkeus.aan{border-color:var(--perfect);background:var(--perfect-v)}
.spotkeus b{font-size:14px}
.spotkeus span{font-size:11.5px;color:var(--zacht)}
@media(max-width:600px){.filters{margin-left:0;width:100%;flex-wrap:nowrap}.filter{flex:1 1 0;min-width:0}}

/* label boven de kaart, niet erover */
.scene-label{position:static;background:var(--kaart);border-radius:0;padding:12px 18px 10px;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--lijn-2)}
.scene-label b{font-size:24px}
/* paneel: kop blijft staan, alleen de inhoud scrolt; op mobiel bovenaan zodat het toetsenbord niets wegschuift */
.sheet-in{max-height:85dvh;display:flex;flex-direction:column;overflow:hidden}
#sheet-b{overflow:auto;min-height:0;-webkit-overflow-scrolling:touch}
@media(max-width:600px){.sheet{align-items:flex-start;padding:10px}.sheet-in{padding:18px 16px}}
#spotzoek{font-size:16px}
.spotlijst{max-height:none}
.laadtekst{padding:14px 0}
.filter{max-width:48%}
.filter b,.filter span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media(max-width:600px){
  .filters{gap:6px}.filter{flex:1 1 0;max-width:none;padding:6px 10px}
  .filter b{font-size:12.5px}.filter span{font-size:10.5px}
  /* dagkaarten: één rij, swipen, geen weeskaart */
  .weekstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .weekstrip .dagkaart{flex:0 0 44%;scroll-snap-align:start}
  .weekstrip .dsep{flex:0 0 auto;writing-mode:vertical-rl;padding:8px 0;border-bottom:0;border-left:1.5px dashed var(--lijn);font-size:10.5px;text-align:center}
  .weekstrip .dsep.eerste{display:none}
  .weekstrip .dsep i{display:none}
  .weekstrip .kans-ens{display:none}
  .weekmini{gap:2px;margin-bottom:10px;padding:7px 6px 5px}
  .wm{padding:3px 2px 2px}
  .wmk{font-size:10px;margin-bottom:3px}
  .wmk em{font-size:9.5px}
  .wmb{height:34px}
  .scene-label b{font-size:20px}
}

body.modal-open{overflow:hidden}
.scene{isolation:isolate;z-index:0}
.pk{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;border:1.5px solid rgba(23,19,15,.4)}
.pk.wit{background:#fff}.pk.blauw{background:#4FC3F7}.pk.geel{background:#F2D27A}
.scene-label span{font-weight:600}

.filter.meet{text-decoration:none;color:var(--inkt)}
.filter.meet b{color:var(--perfect)}
.sv a{color:var(--zacht)}

/* De legenda is een venster achter een i-knop geworden, geen muur tekst onder de tabel.
   De regel eronder is alleen nog de knop met zijn naam ernaast. */
.legenda-knop{margin-top:14px;border-top:1px solid var(--lijn-2);padding-top:12px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--zacht)}
.lgv{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:8px;vertical-align:-1px;flex:none}

/* Beste uren: het cijfer met de titel op een regel, de rest eronder als lijstje. Stond eerst
   als een lange zin achter elkaar met punten ertussen, en dat las niemand (Daniel, 12-09). */