*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--grond);color:var(--tekst);font:15px/1.4 var(--f-tekst);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-text-size-adjust:100%}
button,input,a{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:left;-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:2px}
.veilig{position:fixed;left:0;bottom:0;width:0;height:var(--veilig-onder);pointer-events:none}

/* Lay-out. De JS zet alleen de stand op #app (data-paneel: dicht|peek|half|vol, data-lijst: aan|uit, data-pop: geen|zoek|kalender, data-blad: aan|uit)
   en rekent --zicht uit (de hoogte van het venue-paneel op de telefoon). Wat die stand per breedte betekent staat in de twee blokken onderaan. */
.app{position:fixed;inset:0;overflow:hidden;background:var(--land);display:grid}

/* kaart */
.kaart{position:absolute;inset:0;z-index:0;background:var(--land);font:inherit;outline:0;-webkit-tap-highlight-color:transparent}
.kaart .leaflet-tile{max-width:none}
.leaflet-pane.stippen{z-index:650}
#stippen{position:absolute;left:0;top:0;transform-origin:0 0}
.stip,.cluster{position:absolute;left:0;top:0;display:grid;place-items:center}
.stip{width:var(--b);height:var(--b)}
.stip::before{content:"";width:var(--d);height:var(--d);border-radius:50%;background:var(--accent);border:3px solid var(--grond);transition:transform .12s}
.stip.gekozen::before{background:var(--tekst);border:5px solid var(--accent);box-shadow:0 0 0 3px var(--grond)}
.stip.hover::before{box-shadow:0 0 0 3px var(--grond),0 0 0 5px var(--tekst)}
.stip.leeg::before{width:16px;height:16px;background:var(--grond);border:2.5px solid var(--tekst-2)}
.stip .naam{
  position:absolute;left:calc(50% + var(--d)/2 + 7px);top:50%;transform:translateY(-52%);white-space:nowrap;
  font:700 14px/1 var(--f-display);letter-spacing:-.005em;color:var(--tekst);pointer-events:none;
  text-shadow:-2px 0 var(--land),2px 0 var(--land),0 -2px var(--land),0 2px var(--land),-1.5px -1.5px var(--land),1.5px 1.5px var(--land),-1.5px 1.5px var(--land),1.5px -1.5px var(--land);
}
.stip .naam.links{left:auto;right:calc(50% + var(--d)/2 + 7px)}
.cluster{width:var(--h);height:var(--h)}
.cluster .blok{
  display:grid;place-items:center;width:100%;height:100%;border-radius:calc(var(--h)/4);background:var(--accent-2);color:var(--op-accent-2);
  border:3px solid var(--grond);font-family:var(--f-display);font-weight:800;font-size:calc(var(--h)*.42);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cluster .blok.lang{font-size:calc(var(--h)*.34)}
@media (hover:hover){
  .stip:hover::before{background:color-mix(in srgb,var(--accent) 82%,var(--tekst))}
  .stip.gekozen:hover::before{background:var(--tekst)}
  .cluster:hover .blok{background:color-mix(in srgb,var(--accent-2) 82%,var(--tekst))}
}
.stip:active::before{transform:scale(.94)}
.cluster:active .blok{transform:scale(.96)}
.stip:focus-visible,.cluster:focus-visible{outline:0}
.stip:focus-visible::before{box-shadow:0 0 0 3px var(--grond),0 0 0 6px var(--tekst)}
.cluster:focus-visible .blok{box-shadow:0 0 0 3px var(--grond),0 0 0 6px var(--tekst)}
#stippen .stip,#stippen .cluster{pointer-events:auto}
.ik{
  position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--accent-2);border:3px solid var(--grond);
  box-shadow:0 0 0 2px var(--tekst);pointer-events:none;
}

/* zoomknoppen en bronvermelding */
.bediening{position:absolute;right:var(--marge);display:flex;flex-direction:column;gap:8px;z-index:3}
.rond{
  width:44px;height:44px;display:grid;place-items:center;background:var(--grond);border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-knop);
  font:700 22px/1 var(--f-display);text-align:center;
}
.rond:active{background:var(--vlak);transform:scale(.96)}
@media (hover:hover){.rond:hover{background:var(--vlak)}}
.hier i{display:block;width:18px;height:18px;border:2.5px solid var(--tekst);border-radius:50%;position:relative}
.hier i::after{content:"";position:absolute;inset:3.5px;background:var(--tekst);border-radius:50%}
.hier[aria-busy=true] i{border-style:dotted}
.attr{
  position:absolute;left:var(--marge);max-width:calc(100% - 2*var(--marge) - 56px);font-size:12px;line-height:1.2;color:var(--tekst-2);z-index:3;
  background:color-mix(in srgb,var(--land) 88%,transparent);padding:2px 5px;border-radius:3px;
}
.attr a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* previews */
.rij{display:flex;gap:8px;overflow-x:auto;min-height:128px;padding:0 var(--marge) 4px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:var(--marge);overscroll-behavior-x:contain}
.rij::-webkit-scrollbar{display:none}
.kaartmelding{
  position:absolute;left:var(--marge);right:var(--marge);top:calc(100% + 14px);z-index:3;background:var(--grond);border:var(--lijn-dun) solid var(--rand);
  border-radius:var(--r-knop);padding:8px 12px;font-weight:600;font-size:14px;
}
.tegel{
  position:relative;flex:0 0 168px;height:124px;display:flex;flex-direction:column;padding:10px 11px 9px;border-radius:var(--r-tegel);background:var(--vlak);color:var(--tekst);
  border:var(--lijn-dun) solid var(--rand);box-shadow:0 2px 10px color-mix(in srgb,var(--tekst) 14%,transparent);scroll-snap-align:start;overflow:hidden;
}
.tegel .tt{
  flex:none;font:800 20px/1 var(--f-display);letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-wrap:balance;overflow-wrap:anywhere;
}
.tegel .tv{flex:none;margin-top:5px;font-size:12px;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tegel .tb{display:none;flex:none;margin-top:4px;font-size:12px;line-height:15px;overflow:hidden;-webkit-box-orient:vertical;color:var(--tekst-2)}
.tegel .tm{flex:none;margin-top:auto;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tekst-2);font-variant-numeric:tabular-nums}
.tegel .tm b{color:var(--tekst);font:800 15px/1 var(--f-display);margin-right:4px}
.tegel .tm b.bezig{color:var(--accent)}
.tegel .ts{
  position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:center;padding:0 11px;background:var(--uitverkocht);color:var(--op-uitverkocht);
  font-size:11px;font-weight:700;
}
.tegel .ts.s-few-left{background:var(--grond);color:var(--tekst);border-top:var(--lijn-dun) solid var(--rand)}
.tegel.met-status{padding-bottom:28px}
.tegel.fest{flex-basis:188px}
.tegel.alle{background:var(--grond);flex-basis:120px;justify-content:space-between}
.tegel.alle .tt{font-size:22px}
.tegel.alle .tm{font-weight:600;font-size:13px}
.tegel.leeg{flex:1 0 calc(100% - 2*var(--marge));background:var(--grond);height:auto;min-height:100px;gap:10px}
.tegel.leeg p{font-weight:600}
.tegel.leeg .acties{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
@media (hover:hover){.tegel:hover{border-color:var(--tekst)}}
.tegel:active{transform:scale(.97)}
.tegel:focus-visible{outline-offset:-1px}
.pijl{display:none}

/* bediening: samenvatting en teller, zoekveld, Filters, Kaart | Lijst, en de filters zelf */
.merk{display:none}
.teller{grid-area:teller;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px;padding:0 var(--marge)}
.tinfo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--tekst-2)}
.tr{flex:none;display:flex;align-items:center;gap:12px}
.tc{font-size:13px;color:var(--tekst-2);white-space:nowrap}
.tc b{font:800 18px/1 var(--f-display);letter-spacing:-.01em;color:var(--tekst);font-variant-numeric:tabular-nums}
.wis{position:relative;font-size:13px;font-weight:700;color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.wis::after{content:"";position:absolute;inset:-12px -8px -6px -8px}
.bedien{grid-area:bedien;display:flex;gap:8px;padding:0 var(--marge)}
.zoek{
  flex:1;min-width:0;height:44px;border-radius:var(--r-knop);border:var(--lijn-dun) solid var(--rand);background:transparent;color:var(--tekst);
  padding:0 10px;font-size:16px;-webkit-appearance:none;appearance:none;
}
.zoek::placeholder{color:var(--tekst-2);opacity:1;font-size:15px;text-overflow:ellipsis}
.zoek::-webkit-search-cancel-button{-webkit-appearance:none}
.zoek:focus{border-color:var(--tekst)}
.fknop{
  flex:none;height:44px;padding:0 12px;border-radius:var(--r-knop);background:var(--tekst);color:var(--grond);display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;
}
.fknop i{
  font-style:normal;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--op-accent);
  font-size:12px;line-height:1;font-variant-numeric:tabular-nums;
}
.fknop:active{transform:scale(.97)}
.wissel{flex:none;display:flex;height:44px;border-radius:var(--r-knop);overflow:hidden;box-shadow:inset 0 0 0 var(--lijn-dun) var(--rand)}
.wissel button{display:grid;place-items:center;min-width:0;padding:0 10px;font-weight:600;font-size:14px;text-align:center}
.wissel button[aria-pressed=true]{background:var(--vlak);font-weight:700}
.wissel button:focus-visible{outline-offset:-3px}
@media (hover:hover){.wissel button[aria-pressed=false]:hover{background:var(--vlak)}}

/* de filters: een blad op de telefoon (zie de media query), altijd open bovenin op de laptop */
.fin{display:flex;flex-direction:column;gap:14px}
.fgroep{display:flex;flex-direction:column;gap:8px}
.frij{display:flex;flex-wrap:wrap;gap:8px}
.streep{flex:none;height:1px;background:var(--lijn)}
.chipgroep{display:contents}
.scheid{display:none;flex:none;width:1.5px;height:22px;background:color-mix(in srgb,var(--tekst) 30%,transparent)}
.chip{
  flex:none;height:36px;padding:0 13px;border-radius:var(--r-chip);border:var(--lijn-dun) solid var(--rand);color:var(--tekst);font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:transparent;
}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.chip[aria-pressed=mixed]{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip.soort{font-family:var(--f-display);font-weight:800}
.chip.twee{border-color:var(--accent-2);color:var(--accent-2)}
.chip.twee[aria-pressed=true]{background:var(--accent-2);color:var(--op-accent-2)}
.chip.pijl-chip::after{content:"";width:6px;height:6px;margin:0 0 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.chip.pijl-chip[aria-expanded=true]::after{margin:3px 0 0 8px;transform:rotate(225deg)}
.chip:disabled{opacity:.38;cursor:default}
.chip:not(:disabled):active{transform:scale(.97)}
@media (hover:hover){
  .chip:not(:disabled):not([aria-pressed=true]):hover{background:var(--vlak)}
  .chip[aria-pressed=true]:hover{background:color-mix(in srgb,var(--accent) 86%,var(--tekst))}
  .chip.twee[aria-pressed=true]:hover{background:color-mix(in srgb,var(--accent-2) 86%,var(--tekst))}
}
.kinderen{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 100%;padding-left:10px;border-left:2px solid var(--accent)}

/* prijs: de schuif loopt van gratis in stappen van vijf euro naar geen grens */
.groot{font:800 22px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.schuifvak{display:flex;flex-direction:column}
.schuif{--d:22px;-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;margin:0;background:transparent;cursor:pointer}
.schuif::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) calc(var(--d)/2 + (100% - var(--d))*var(--v)),var(--lijn) 0)}
.schuif::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) calc(var(--d)/2 + (100% - var(--d))*var(--v)),var(--lijn) 0)}
.schuif::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--d);height:var(--d);margin-top:calc((4px - var(--d))/2);border-radius:50%;background:var(--grond);border:3px solid var(--accent)}
.schuif::-moz-range-thumb{box-sizing:border-box;width:var(--d);height:var(--d);border-radius:50%;background:var(--grond);border:3px solid var(--accent)}
.schuif:focus-visible{outline:0}
.schuif:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--grond),0 0 0 6px var(--tekst)}
.schuif:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--grond),0 0 0 6px var(--tekst)}
.schaal{position:relative;height:16px;margin-top:-6px;color:var(--tekst-2);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.schaal span{position:absolute;top:0;white-space:nowrap;left:calc(11px + (100% - 22px)*var(--p));transform:translateX(-50%)}
.schaal .eerste{left:0;transform:none}
.schaal .laatste{left:auto;right:0;transform:none}
.vink{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.vink i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;border:var(--lijn-dun) solid var(--rand)}
.vink input:checked + i{background:var(--accent);border-color:var(--accent)}
.vink input:checked + i::after{content:"";width:5px;height:9px;border-right:2px solid var(--op-accent);border-bottom:2px solid var(--op-accent);transform:rotate(45deg) translate(-1px,-1px)}
.vink input:focus-visible + i{outline:var(--focus) solid var(--accent);outline-offset:2px}

/* venue-paneel */
.paneel{display:flex;flex-direction:column;overflow:hidden;background:var(--grond);border-top:var(--lijn-dun) solid var(--rand);z-index:6}
.paneel>.kop{flex:none;background:var(--vlak);padding:0 var(--marge) 10px;border-bottom:1px solid var(--lijn)}
.handvat{display:grid;place-items:center;width:100%;height:24px;position:relative}
.handvat::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.handvat i{width:44px;height:5px;border-radius:3px;background:var(--rand)}
.kop-rij{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.paneel .kop h2{font:800 28px/1 var(--f-display);letter-spacing:-.025em;padding:2px 0 6px;text-wrap:balance;overflow-wrap:anywhere}
.sluit{
  flex:none;width:44px;height:44px;margin:-4px -6px 0 0;display:grid;place-items:center;border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-knop);
  font-size:16px;font-weight:700;text-align:center;background:var(--grond);
}
@media (hover:hover){.sluit:hover{background:var(--vlak)}}
.paneel .kop p{font-size:14px;line-height:1.3}
.paneel .kop .m1{font-weight:700;font-size:15px}
.paneel .kop .m2,.paneel .kop .m2b,.paneel .kop .m3{color:var(--tekst-2)}
.paneel .kop .m2b:empty,.paneel .kop .m4:empty{display:none}
.paneel .kop .m4{margin-top:4px;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app[data-paneel=vol] .paneel .kop .m4{display:block}
.paneel .kop .m3 .status{display:inline-block}
#pfest .m3{margin-top:4px}
#pfest .acties{margin-top:10px}
.pfilters{display:flex;gap:6px;margin:6px 0 2px;flex-wrap:wrap}
.pfilters:empty{display:none}
.fchip{
  flex:none;height:44px;padding:0 0 0 14px;border-radius:var(--r-chip);background:var(--grond);color:var(--tekst);font-weight:600;font-size:14px;display:flex;align-items:center;
  gap:2px;border:var(--lijn-dun) solid var(--rand);max-width:260px;
}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip button{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:14px;font-weight:700;text-align:center}
.paneel .site{
  display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:14px;margin-bottom:-6px;color:var(--tekst);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.lijstvak{flex:1;min-height:0;overflow:hidden}
.app[data-paneel=vol] .lijstvak,.app[data-paneel=half] .lijstvak.heeft-open{overflow-y:auto;overscroll-behavior:contain}
.meer{display:flex;align-items:center;width:100%;min-height:48px;padding:0 var(--marge);font-weight:700;border-bottom:1px solid var(--lijn)}
.claim{flex:none;padding:10px var(--marge);font-size:13px;color:var(--tekst-2);border-top:1px solid var(--lijn)}
.claim a{color:var(--accent-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}

/* eventrijen: tijd, titel en prijs op één regel, daaronder de venue als link en het genre als label */
.dagkop{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:var(--grond);padding:18px var(--marge) 6px}
.dagkop h3{font:700 11px/1.2 var(--f-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2)}
.dagkop .n{flex:none;font-size:12px;font-weight:600;color:var(--tekst-2);font-variant-numeric:tabular-nums}
.ev{border-top:1px solid var(--lijn)}
.ev.open{background:color-mix(in srgb,var(--vlak) 55%,var(--grond))}
.ev-kop{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:6px 10px;align-items:start;padding:14px var(--marge)}
.ev-kop:has(.tk:focus-visible){outline:var(--focus) solid var(--accent);outline-offset:-3px}
.ev-kop .tijd{grid-column:1;grid-row:1 / span 2}
.ev-kop .tk{grid-column:2;grid-row:1}
.ev-kop .prijs{grid-column:3;grid-row:1}
.ev-kop .meta{grid-column:2 / span 3;grid-row:2}
@media (hover:hover){.ev:not(.open) .ev-kop:hover{background:color-mix(in srgb,var(--vlak) 55%,var(--grond))}}
.tijd{font:700 13px/1.25 var(--f-display);letter-spacing:-.005em;font-variant-numeric:tabular-nums;padding-top:2px}
.tijd.bezig{color:var(--accent)}
.tijd .t2{display:block;margin-top:3px;font:400 11px/1.1 var(--f-tekst);letter-spacing:0;color:var(--tekst-2)}
.tijd.voort{color:var(--tekst-2)}
.tk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;text-align:left}
button.tk:focus-visible{outline:0}
button.tk::after{content:"";position:absolute;inset:0}
.titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:800 15px/1.25 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
.ev.open .titel{display:block;overflow:visible;-webkit-line-clamp:unset}
.ev.afgelast .titel{text-decoration:line-through;text-decoration-thickness:2px}
.prijs{padding-top:2px;font:700 13px/1.25 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.prijs.gratis{color:var(--accent-2)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;font-size:13px;line-height:1.3;color:var(--tekst-2)}
.datum{font-weight:600;font-variant-numeric:tabular-nums}
.fest{font-weight:700;color:var(--tekst)}
.venue{position:relative;z-index:1;margin:-4px 0;padding:4px 0;color:var(--accent-2);font-weight:600;font-size:13px;line-height:1.3;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
span.venue{z-index:auto;text-decoration:none;color:var(--tekst-2)}
.genre{padding:3px 5px;border:1px solid var(--lijn);border-radius:4px;font:700 10px/1 var(--f-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2);white-space:nowrap}
.status{flex:none;padding:3px 6px;border-radius:var(--r-status);border:var(--lijn-dun) solid var(--rand);font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap}
.s-soldout{background:var(--uitverkocht);color:var(--op-uitverkocht);border-color:var(--uitverkocht)}
.s-few-left{background:var(--grond);color:var(--tekst)}
.s-cancelled{background:var(--tekst);color:var(--grond);border-color:var(--tekst)}
.s-postponed{background:var(--vlak);color:var(--tekst);border-style:dashed}
.uitklap{padding:0 var(--marge) 16px calc(var(--marge) + 64px);display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.35}
.uitklap .melding{align-self:flex-start;font-weight:700;background:var(--tekst);color:var(--grond);padding:4px 8px;border-radius:var(--r-status)}
.uitklap .tijden{font-weight:700;font-variant-numeric:tabular-nums}
.uitklap .tijden span{font-weight:400;color:var(--tekst-2);margin-right:2px}
.uitklap img{
  display:block;width:min(100%,284px);aspect-ratio:16/9;height:auto;max-height:160px;object-fit:cover;border-radius:var(--r-knop);
  border:var(--lijn-dun) solid var(--lijn);background:var(--vlak);
}
.label{display:inline-block;padding:3px 8px;border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-status);font-size:13px;font-weight:600;background:var(--grond);margin:0 4px 4px 0}
.acties{display:flex;gap:8px;margin-top:3px;flex-wrap:wrap}
.knop{
  display:grid;place-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-knop);border:var(--lijn-dun) solid var(--rand);font-weight:700;font-size:16px;line-height:1.1;
  text-align:center;background:var(--grond);color:var(--tekst);
}
.knop-prim{flex:1.15 1 120px;background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.knop-sec{flex:1 1 120px}
@media (hover:hover){.knop-prim:hover{background:color-mix(in srgb,var(--accent) 86%,var(--tekst))}.knop-sec:hover{background:var(--vlak)}}
.knop:active{transform:scale(.96)}
.leegregel{padding:16px var(--marge);font-weight:600}
.leegregel .acties{margin-top:10px}
.leegregel .naasten{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* lijstweergave */
.lijstview{background:var(--grond);flex-direction:column;z-index:5}
.lijstview>.kop{flex:none;padding:max(var(--veilig-boven),10px) var(--marge) 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-bottom:1px solid var(--lijn)}
.lijstview .inhoud{flex:1;overflow-y:auto;overscroll-behavior:contain}
.lijstview .wissel{margin:0}
.lijstview .wissel button{padding:0 9px}
.keuze{position:relative;display:block}
.keuze select{
  -webkit-appearance:none;appearance:none;height:44px;padding:0 24px 0 10px;border-radius:var(--r-chip);border:var(--lijn-dun) solid var(--rand);background:transparent;
  color:var(--tekst);font-weight:600;font-size:14px;cursor:pointer;
}
.keuze::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:2px solid var(--tekst);border-bottom:2px solid var(--tekst);transform:rotate(45deg);pointer-events:none}
@media (hover:hover){.keuze select:hover{background:var(--vlak)}}
.fstrook{display:flex;gap:8px;overflow-x:auto;padding:12px var(--marge);scrollbar-width:none;border-bottom:1px solid var(--lijn);overscroll-behavior-x:contain}
.fstrook::-webkit-scrollbar{display:none}
.fstrook .tegel{flex-basis:188px}
.festkop{background:var(--vlak);padding:8px var(--marge) 14px;border-bottom:1px solid var(--lijn)}
.festkop h2{font:800 28px/1 var(--f-display);letter-spacing:-.025em;padding:2px 0 6px;text-wrap:balance;overflow-wrap:anywhere}
.festkop p{font-size:14px;line-height:1.3}
.festkop .m1{font-weight:700;font-size:15px}
.festkop .m2,.festkop .m3{color:var(--tekst-2)}
.festkop .m3{margin-top:4px}
.festkop .acties{margin-top:10px}
.leegblok .acties{padding:0 var(--marge) 12px}

/* zoekresultaten en kalender */
.pop{
  display:none;position:absolute;z-index:9;background:var(--grond);border-top:var(--lijn-dun) solid var(--rand);border-radius:16px 16px 0 0;
  padding:12px var(--marge) 10px;overflow-y:auto;overscroll-behavior:contain;
}
.rkop{margin:0;padding:14px 2px 4px;font:700 11px/1.2 var(--f-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2)}
.rkop:first-child{padding-top:2px}
.res{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:8px 2px;border-bottom:1px solid var(--lijn)}
.res b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.25 var(--f-display);letter-spacing:-.005em}
.res span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tekst-2);font-size:13px}
.res em{font-style:normal;background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:2px}
.gchip{display:flex;align-items:center;min-height:44px;padding:4px 14px;border-radius:var(--r-chip);border:var(--lijn-dun) solid var(--rand);font-weight:600;background:transparent}
.pop .leegregel{padding:4px 0}
.kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kal-kop h3{margin:0;font:800 18px/1 var(--f-display);letter-spacing:-.015em}
.kal-kop button{width:44px;height:44px;display:grid;place-items:center;border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-knop);font-weight:700;text-align:center}
.kal-kop button[disabled]{opacity:.35}
.kal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.kal .wd{font-size:12px;font-weight:600;color:var(--tekst-2);padding:2px 0}
.kal button{height:44px;border-radius:var(--r-knop);font-weight:600;font-variant-numeric:tabular-nums;display:grid;place-items:center;position:relative;text-align:center}
.kal button i{position:absolute;bottom:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent)}
.kal button[aria-pressed=true]{background:var(--accent);color:var(--op-accent)}
.kal button[aria-pressed=true] i{background:var(--op-accent)}
.kal button[disabled]{color:var(--tekst-2);opacity:.45}
.kal .vandaag{box-shadow:inset 0 0 0 var(--lijn-dun) var(--rand)}
@media (hover:hover){
  .kal button:not([disabled]):hover,.gchip:hover,.res:hover{background:var(--vlak)}
  .kal button[aria-pressed=true]:hover{background:var(--accent)}
}

/* hover-popup (laptop) */
.popup,.flyout{
  position:fixed;z-index:12;background:var(--grond);border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-tegel);overflow:hidden;
  box-shadow:0 8px 28px color-mix(in srgb,var(--tekst) 22%,transparent);
}
.popup{width:var(--popup-b)}
.popup>.kop{background:var(--vlak);padding:10px 12px;border-bottom:1px solid var(--lijn)}
.popup>.kop h2{font:800 24px/1 var(--f-display);letter-spacing:-.025em;padding:0 0 4px}
.popup>.kop p{font-size:13px;font-weight:600;color:var(--tekst-2)}
.popup .lijst{max-height:340px;overflow-y:auto}
.popup .ev-kop{grid-template-columns:48px minmax(0,1fr) auto;padding:11px 12px}
.popup .ev.hover .ev-kop{background:var(--vlak)}
.flyout{width:var(--flyout-b);padding:0 0 14px}
.flyout .vkop{background:var(--vlak);border-bottom:1px solid var(--lijn);padding:9px 14px 8px;font:700 15px/1.1 var(--f-display);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flyout .ft{padding:12px 14px 0;font:800 24px/1 var(--f-display);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.flyout.afgelast .ft{text-decoration:line-through;text-decoration-thickness:2px}
.flyout .fl{padding:10px 14px 0;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.35}
.flyout .feiten{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.flyout .feiten dt{color:var(--tekst-2)}
.flyout .feiten dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.flyout .acties{padding:12px 14px 0;margin:0}
.flyout .knop{min-height:44px;font-size:15px;padding:0 10px}

/* telefoon: previews bovenin, de bediening onderin en het venue-paneel neemt haar plek in. Rij 1 is de ruimte boven de bediening, rij 2 de bediening zelf. */
@media (max-width:899px){
  .app{grid-template-rows:minmax(0,1fr) auto}
  .kolom{display:contents}

  .previews{position:absolute;left:0;right:0;top:0;padding:max(var(--veilig-boven),10px) 0 6px;z-index:4;transition:transform .25s var(--ease),opacity .2s}
  .app[data-paneel=half] .previews,.app[data-paneel=vol] .previews{transform:translateY(-20px);opacity:0;pointer-events:none;visibility:hidden}

  .dock{
    grid-row:2 / 3;position:relative;z-index:7;background:var(--grond);border-top:1px solid var(--lijn);padding:10px 0 calc(10px + var(--veilig-onder));
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"teller" "bedien";gap:8px;
    transition:transform .24s var(--ease),visibility 0s;
  }
  .app:not([data-paneel=dicht]) .dock{transform:translateY(105%);visibility:hidden;transition:transform .24s var(--ease),visibility 0s .24s}
  .app[data-pop=zoek] .teller{display:none}

  /* het filterblad: van onderen, bijna over het hele scherm; de knoppen zijn dezelfde als bovenin op de laptop */
  .filters{
    position:fixed;left:0;right:0;bottom:0;top:calc(var(--veilig-boven) + 16px);display:flex;flex-direction:column;background:var(--grond);border-radius:16px 16px 0 0;
    box-shadow:0 -6px 18px color-mix(in srgb,var(--tekst) 16%,transparent);visibility:hidden;transform:translateY(100%);
    transition:transform .24s var(--ease),visibility 0s .24s;
  }
  .filters:focus{outline:0}
  .app[data-paneel=dicht][data-blad=aan] .filters{visibility:visible;transform:none;transition:transform .24s var(--ease),visibility 0s}
  .bladkop{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px var(--marge) 0}
  .bladkop h2{font:800 20px/1 var(--f-display);letter-spacing:-.015em}
  .wisalles{min-height:44px;padding:0 4px;color:var(--accent);font-weight:700;font-size:15px}
  .fin{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px var(--marge) 14px}
  .filters .toon{
    flex:none;display:grid;place-items:center;min-height:48px;margin:8px var(--marge) calc(12px + var(--veilig-onder));border-radius:var(--r-knop);background:var(--accent);
    color:var(--op-accent);font-weight:700;font-size:16px;text-align:center;
  }

  .bediening{grid-row:2 / 3;bottom:calc(100% + 12px);transition:bottom .24s var(--ease)}
  .attr{grid-row:2 / 3;bottom:calc(100% + 8px);transition:bottom .24s var(--ease)}
  .app:not([data-paneel=dicht]) .bediening{bottom:calc(var(--zicht,0px) + var(--veilig-onder) + 12px)}
  .app:not([data-paneel=dicht]) .attr{bottom:calc(var(--zicht,0px) + var(--veilig-onder) + 8px)}
  .app[data-paneel=vol] .bediening{visibility:hidden}

  .lijstview{display:none;position:absolute;grid-row:1 / 2;inset:0}
  .app[data-lijst=aan] .lijstview{display:flex}

  .pop{grid-row:1 / 2;left:0;right:0;bottom:0;max-height:min(62dvh,480px)}
  .app[data-paneel=dicht][data-pop=zoek] #zoekpop,
  .app[data-paneel=dicht][data-pop=kalender] #kalpop{display:block}

  .paneel{
    position:absolute;left:0;right:0;bottom:0;height:calc(var(--zicht,0px) + var(--veilig-onder));padding-bottom:var(--veilig-onder);border-radius:16px 16px 0 0;
    transition:height .24s var(--ease),transform .24s var(--ease);
  }
  .app[data-paneel=dicht] .paneel{transform:translateY(105%);visibility:hidden;transition:transform .2s var(--ease),visibility 0s .2s}
  .app[data-paneel=peek] .lijstvak{visibility:hidden}
  .app[data-paneel=peek] .kop :is(.m2,.m2b,.m3,.m4,.site,.pfilters,#pfest .acties),.app[data-paneel=peek] .claim{display:none}
}

/* laptop: één balk bovenin met de filters altijd open, links de previews en de lijst of het venue-paneel, rechts de kaart */
@media (min-width:900px){
  .app{grid-template-columns:var(--lijst-b) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .kaart{grid-column:2 / 3;grid-row:2 / 3}
  .app[data-lijst=aan] .kaart{visibility:hidden}
  .kolom{grid-column:1 / 2;grid-row:2 / 3;position:relative;display:flex;flex-direction:column;min-height:0}
  .app[data-lijst=aan] .kolom{grid-column:1 / -1}

  .dock{
    grid-column:1 / -1;grid-row:1 / 2;position:relative;z-index:7;background:var(--grond);border-bottom:1px solid var(--lijn);padding:10px 16px 12px;display:grid;
    grid-template-columns:auto minmax(220px,340px) auto minmax(0,1fr) auto;grid-template-areas:"merk zoek wissel . teller" "filters filters filters filters filters";gap:10px 14px;align-items:center;
  }
  .merk{display:block;padding:13px 0;margin:-13px 0;grid-area:merk;font:800 18px/1 var(--f-display);letter-spacing:-.04em;color:var(--tekst);white-space:nowrap}
  .bedien{display:contents}
  .zoek{grid-area:zoek;height:40px}
  .wissel{grid-area:wissel;height:40px}
  .wissel button{min-width:52px}
  .fknop{display:none}
  .teller{padding:0;gap:14px;min-height:28px}
  .tinfo{display:none}
  .tr .tc{order:1}
  .tr .wis{order:2}

  .filters{grid-area:filters;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
  .bladkop,.streep,.filters .toon{display:none}
  .fin{display:contents}
  .fgroep{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .fgroep.periode{order:1}
  .fgroep.prijs{order:2;flex-wrap:nowrap;gap:12px}
  .fgroep.soort{order:3;flex:0 0 100%}
  .fgroep.soort .frij,.fgroep.soort .kinderen{display:contents}
  .frij{gap:6px}
  .scheid{display:block}
  .kinderen::before{content:"";flex:none;align-self:center;width:2px;height:20px;margin:0 2px;background:var(--accent)}
  .chip{height:32px;padding:0 11px;font-size:13px}
  .groot{min-width:5.7em;font-size:15px;letter-spacing:-.01em}
  .schuifvak{width:170px}
  .schuif{height:32px}
  .schaal{display:none}
  .vink{min-height:32px;font-size:13px}

  .previews{position:relative;flex:none;z-index:6;padding:12px 0 8px;background:var(--grond);border-bottom:1px solid var(--lijn);border-right:1px solid var(--lijn)}
  .app[data-lijst=aan] .previews{display:none}
  .rij{padding:0 16px 4px;gap:10px;scroll-padding:0 16px 0 46px;scroll-snap-type:x mandatory}
  .tegel{flex-basis:176px}
  .tegel.alle{display:none}
  .tegel.leeg{flex-basis:calc(100% - 32px)}
  .pijl{
    position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-22px;display:grid;place-items:center;border-radius:50%;background:var(--grond);
    border:var(--lijn-dun) solid var(--rand);font:700 24px/1 var(--f-display);text-align:center;padding-bottom:3px;
  }
  .pijl-l{left:3px}
  .pijl-r{right:5px}
  @media (hover:hover){.pijl:hover{background:var(--vlak)}}
  .pijl:active{transform:scale(.96)}

  .lijstview{display:flex;position:relative;flex:1;min-height:0;border-right:1px solid var(--lijn)}
  .lijstview>.kop{padding:10px 16px 8px}
  .keuze select{height:36px}
  .app[data-lijst=aan] .lijstview{border-right:0}
  .app[data-lijst=aan] .lijstview .inhoud>ul,
  .app[data-lijst=aan] .lijstview .inhoud>.meer,
  .app[data-lijst=aan] .lijstview .inhoud>.leegregel,
  .app[data-lijst=aan] .lijstview .inhoud>div{max-width:760px;margin-inline:auto}
  .app[data-lijst=aan] .lijstview>.kop{padding-inline:max(16px,calc((100% - 760px)/2 + 16px))}

  .paneel{position:absolute;inset:0;border-top:0;border-right:1px solid var(--lijn)}
  .app[data-paneel=dicht] .paneel{transform:translateX(-24px);opacity:0;visibility:hidden;transition:transform .2s var(--ease),opacity .2s,visibility 0s .2s}
  .paneel .lijstvak{overflow-y:auto}
  .handvat{display:none}
  .paneel>.kop{padding-top:14px}
  .paneel .kop h2{font-size:30px}
  .paneel .kop .m4{display:block}

  .bediening{right:16px;bottom:28px}
  .attr{left:calc(var(--lijst-b) + 8px);bottom:8px}

  .pop{
    left:var(--pop-x,16px);top:var(--pop-y,56px);width:min(460px,calc(100% - 32px));border:var(--lijn-dun) solid var(--rand);border-radius:var(--r-tegel);
    max-height:calc(100% - 96px);box-shadow:0 8px 28px color-mix(in srgb,var(--tekst) 22%,transparent);
  }
  #zoekpop{width:min(420px,calc(100% - 32px))}
  #kalpop{width:340px}
  .app[data-pop=zoek] #zoekpop,.app[data-pop=kalender] #kalpop{display:block}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.app.start *{transition:none!important}