:root{
  --ground:#E9EDEA; --paper:#F6F8F6; --raise:#FFFFFF;
  --ink:#131E1A; --ink-2:#42544D; --ink-3:#71847C;
  --line:#C9D3CD; --line-2:#DFE6E1;
  --accent:#0F6E63; --accent-wash:rgba(15,110,99,.10);
  --hot:#C24A16; --hot-wash:rgba(194,74,22,.12);
  --schaduw:0 1px 2px rgba(19,30,26,.06), 0 10px 30px -14px rgba(19,30,26,.30);
  --veilig-boven:env(safe-area-inset-top,0px);
  --veilig-onder:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0D1512; --paper:#141E1A; --raise:#1A2622;
    --ink:#E4EBE6; --ink-2:#A3B4AC; --ink-3:#7A8C84;
    --line:#28352F; --line-2:#1F2B26;
    --accent:#4FD1BE; --accent-wash:rgba(79,209,190,.13);
    --hot:#FF7A45; --hot-wash:rgba(255,122,69,.15);
    --schaduw:0 1px 2px rgba(0,0,0,.5), 0 12px 34px -14px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
/* Onze eigen display-regels winnen anders van het hidden-attribuut. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

#kaart{position:absolute;inset:0;background:var(--paper)}
.maplibregl-ctrl-attrib{font-size:10px}

/* ── filterbalk ───────────────────────────────────────────────────────── */
.balk{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:calc(10px + var(--veilig-boven)) 10px 8px;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.balk > *{pointer-events:auto}
.zoekrij{display:flex;gap:8px;align-items:center}
.zoekveld{
  flex:1;display:flex;align-items:center;gap:9px;background:var(--raise);
  border:1px solid var(--line);border-radius:24px;padding:0 16px;height:46px;
  box-shadow:var(--schaduw);
}
.zoekveld svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round}
.zoekveld input{flex:1;border:0;background:none;outline:none;min-width:0;font-size:15px}
.zoekveld input::-webkit-search-cancel-button{-webkit-appearance:none}
.rond{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--raise);
  border:1px solid var(--line);box-shadow:var(--schaduw);display:grid;place-items:center;
}
.rond svg{width:19px;height:19px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.rond.aan{background:var(--accent);border-color:var(--accent)}
.rond.aan svg{stroke:var(--raise)}

.chiprij{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chiprij::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--raise);border:1px solid var(--line);
  border-radius:20px;padding:8px 14px;font-size:13px;font-variation-settings:"wght" 550;
  white-space:nowrap;box-shadow:var(--schaduw);color:var(--ink-2);
}
.chip.aan{background:var(--accent);border-color:var(--accent);color:var(--raise)}
.chip.uit{opacity:.45}
.chip.scheiding.uit{opacity:.45}
.chip.scheiding{margin-left:6px;border-left:1px solid var(--line)}

.adresbalk{position:relative;background:var(--raise);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--schaduw);padding:10px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adresbalk input{flex:1;border:0;background:none;outline:none;min-width:120px;height:26px}
.tekstknop{font-size:13px;color:var(--accent);font-variation-settings:"wght" 600;padding:4px 6px}
.adreslijst{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column}
.adreslijst li{border-top:1px solid var(--line-2)}
.adreslijst button{display:block;width:100%;text-align:left;padding:10px 4px;font-size:13px;color:var(--ink-2);line-height:1.35}

/* ── markers ──────────────────────────────────────────────────────────── */
/* GEEN position hier. MapLibre zet zelf position:absolute op de marker via
   .maplibregl-marker; zetten wij daar position:relative overheen, dan valt de
   pin terug in de documentstroom en schuift hij niet meer mee met de kaart.
   De pin is door die absolute positionering nog steeds een positioned ancestor,
   dus .merk en .naam hangen er gewoon aan vast. */
.pin{cursor:pointer}
.pin .bol{
  width:40px;height:40px;border-radius:50%;background:var(--raise);
  border:2px solid var(--line);display:grid;place-items:center;
  font-size:13px;font-variation-settings:"wght" 660;color:var(--ink);
  box-shadow:var(--schaduw);transition:transform .12s ease;
}
.pin:hover .bol,.pin.actief .bol{transform:scale(1.12);border-color:var(--accent)}
.pin .bol.leeg{width:26px;height:26px;font-size:0}
/* Logo vult de pin. Wit eronder omdat veel logo's doorzichtig zijn. */
.pin .bol.met-logo{background-size:cover;background-position:center;background-color:#fff;font-size:0}
.pin .score-pil{
  position:absolute;bottom:-5px;right:-5px;background:var(--raise);
  border:1.5px solid var(--line);border-radius:9px;padding:0 5px;
  font-family:"Archivo",sans-serif;font-size:10px;font-variation-settings:"wght" 700;
  color:var(--ink);line-height:1.5;
}
.pin .bol.leeg::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pin .naam{
  position:absolute;top:44px;left:50%;transform:translateX(-50%);
  background:var(--raise);border:1px solid var(--line);border-radius:5px;
  padding:2px 7px;font-size:11px;font-variation-settings:"wght" 600;
  white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:var(--schaduw);display:none;
}
.pin.met-label .naam{display:block}
/* ── randkleur per reviewscore ─────────────────────────────────────────
   De randen zijn dikker dan de neutrale pin, want kleur alleen is te zwak op
   een bolletje van 40 pixels — en voor wie kleuren slecht onderscheidt is de
   dikte het echte signaal. Goud krijgt daarnaast een kroontje, zilver een
   lichte gloed: drie manieren om hetzelfde te zeggen. */
.pin.band-goud   .bol{border-color:#C9971F;border-width:3px;box-shadow:0 0 0 3px rgba(201,151,31,.22),var(--schaduw)}
.pin.band-zilver .bol{border-color:#8C93A0;border-width:3px;box-shadow:0 0 0 2px rgba(140,147,160,.20),var(--schaduw)}
.pin.band-groen  .bol{border-color:#3E8E5A;border-width:2.5px}
.pin.band-oranje .bol{border-color:#C98A2E;border-width:2px}
.pin.band-rood   .bol{border-color:#B4523C;border-width:2px}
.pin .kroon{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:12px;line-height:1;color:#C9971F;text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Drie labels, drie stemvolumes: vuur schreeuwt, nieuw praat, ster fluistert. */
.pin.met-vuur  .bol{border-color:var(--hot);box-shadow:0 0 0 4px var(--hot-wash),var(--schaduw)}
.pin.met-nieuw .bol{border-color:var(--accent)}
.pin .merk{
  position:absolute;top:-7px;right:-7px;display:grid;place-items:center;
  line-height:1;border:2px solid var(--raise);border-radius:9px;
}
.pin .merk-vuur{width:19px;height:19px;border-radius:50%;background:var(--hot);font-size:10px}
.pin .merk-nieuw{
  padding:2px 5px;background:var(--accent);color:var(--raise);
  font-size:9px;font-variation-settings:"wght" 700;letter-spacing:.05em;
}
.pin .merk-ster{
  padding:2px 5px;background:var(--raise);color:var(--ink-2);
  font-size:9px;font-variation-settings:"wght" 700;letter-spacing:.05em;
  border-color:var(--line);
}
.pin.verborgen{display:none}

/* ── onderbalk ────────────────────────────────────────────────────────── */
.onderbalk{
  position:absolute;left:0;right:0;bottom:calc(var(--tabhoogte) + 10px);z-index:4;
  display:flex;justify-content:center;pointer-events:none;
}
.telling{
  background:var(--raise);border:1px solid var(--line);border-radius:20px;
  padding:8px 15px;font-size:13px;box-shadow:var(--schaduw);
  font-variation-settings:"wght" 550;color:var(--ink-2);
}

/* ── tabbalk onderaan ─────────────────────────────────────────────────── */
:root{--tabhoogte:calc(62px + env(safe-area-inset-bottom,0px))}
.tabbalk{
  position:absolute;left:0;right:0;bottom:0;z-index:11;height:var(--tabhoogte);
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--raise);border-top:1px solid var(--line);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-variation-settings:"wght" 600;color:var(--ink-3);
  letter-spacing:.01em;padding:0;
}
.tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round}
.tab.aan{color:var(--accent)}
.tablabel{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tab .teller{
  font-size:10px;background:var(--accent);color:var(--raise);border-radius:9px;
  padding:1px 6px;font-variation-settings:"wght" 700;line-height:1.5;
}
.tab.aan .teller{background:var(--accent)}

/* ── volledige panelen: feed en favorieten ────────────────────────────── */
.paneel{
  position:absolute;left:0;right:0;top:0;bottom:var(--tabhoogte);z-index:10;
  background:var(--ground);overflow-y:auto;
}
.paneel-inhoud{
  max-width:640px;margin:0 auto;padding:calc(22px + var(--veilig-boven)) 18px 32px;
  display:flex;flex-direction:column;gap:16px;
}
.paneel h2{
  margin:0;font-size:24px;font-variation-settings:"wdth" 108,"wght" 660;
  letter-spacing:-.02em;
}
.paneel .uitleg{margin:0;font-size:14px;line-height:1.6;color:var(--ink-3)}
.kaartje{
  display:flex;gap:12px;align-items:center;width:100%;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
}
.kaartje .bol-klein{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--accent-wash);
  display:grid;place-items:center;font-size:13px;font-variation-settings:"wght" 680;
  color:var(--accent);
}
.kaartje .tekst{min-width:0;flex:1}
.kaartje .tekst b{display:block;font-size:15px;font-variation-settings:"wght" 620;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaartje .tekst span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.leegregel{
  border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center;
  color:var(--ink-3);font-size:13.5px;line-height:1.6;
}

/* ── openklap ─────────────────────────────────────────────────────────── */
.sheet-scherm{position:absolute;left:0;right:0;top:0;bottom:var(--tabhoogte);z-index:8;background:rgba(19,30,26,.28)}
.sheet{
  position:absolute;left:0;right:0;bottom:var(--tabhoogte);z-index:9;max-height:76vh;overflow-y:auto;
  background:var(--raise);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:8px 18px calc(22px + var(--veilig-onder));
  box-shadow:0 -10px 40px -14px rgba(0,0,0,.4);
  animation:omhoog .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes omhoog{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
@media (min-width:760px){
  .sheet{left:auto;right:14px;bottom:calc(var(--tabhoogte) + 14px);width:400px;
    border-radius:18px;border:1px solid var(--line);max-height:70vh}
}
.greep{width:38px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 12px}
.sheet-sluit{position:absolute;top:10px;right:12px;font-size:26px;line-height:1;color:var(--ink-3);padding:2px 8px}

.kop{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.kop .cijfer{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--accent-wash);
  display:grid;place-items:center;font-size:14px;font-variation-settings:"wght" 680;color:var(--accent);
}
.kop .cijfer.met-logo{background-size:cover;background-position:center;background-color:#fff}
.bol-klein.met-logo{background-size:cover;background-position:center;background-color:#fff;font-size:0}
.kop .cijfer.is-vuur{background:var(--hot-wash);color:var(--hot)}
.kop .cijfer.is-nieuw{background:var(--accent-wash);color:var(--accent);font-size:11px}
.kop .cijfer.is-ster{background:var(--paper);color:var(--ink-2)}
.kop h2{margin:0 0 3px;font-size:19px;font-variation-settings:"wght" 640;line-height:1.2;
  display:flex;align-items:center;gap:8px}

/* Favoriet. Geel is hier de enige plek waar het voorkomt, zodat een gele ster
   altijd "dit is van mij" betekent en nooit iets over kwaliteit zegt. */
.ster{
  font-size:20px;line-height:1;color:var(--line);padding:2px 4px;
  transition:color .15s ease, transform .15s ease;
}
.ster:hover{color:var(--ink-3);transform:scale(1.12)}
.ster.aan{color:#E8B21F}
.ster.aan:hover{color:#D9A417}
@media (prefers-reduced-motion:reduce){.ster{transition:none}}
.kop .meta{font-size:12px;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase;line-height:1.45}
.label-vuur{color:var(--hot);font-variation-settings:"wght" 620}
.label-nieuw{color:var(--accent);font-variation-settings:"wght" 620}
.label-ster{color:var(--ink-2);font-variation-settings:"wght" 620}
.open-nu{color:var(--accent);font-variation-settings:"wght" 620}
.dicht{color:var(--hot);font-variation-settings:"wght" 620}

.fotos{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:0 18px;scrollbar-width:none}
.fotos::-webkit-scrollbar{display:none}
.fotos img{width:180px;height:126px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--paper)}
.geen-fotos{
  background:var(--paper);border:1px dashed var(--line);border-radius:10px;
  padding:16px;margin-bottom:14px;font-size:13px;color:var(--ink-3);line-height:1.5;
}
.geen-fotos b{display:block;color:var(--ink-2);font-variation-settings:"wght" 620;margin-bottom:3px}

.knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.knop{
  border:1px solid var(--line);border-radius:20px;padding:9px 15px;font-size:13px;
  font-variation-settings:"wght" 600;background:var(--paper);color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
/* Merktekens nemen de kleur van de knop over, zodat ze in beide thema's kloppen. */
.knop .ico{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.knop .ico .vol{fill:currentColor;stroke:none}
.knop .ico.vol-svg{fill:currentColor;stroke:none}
.alle-recensies{margin-top:2px;align-self:flex-start}
.knop.primair{background:var(--accent);border-color:var(--accent);color:var(--raise)}
.knop.bewaard{background:var(--hot-wash);border-color:var(--hot);color:var(--hot)}

/* ── recensies ────────────────────────────────────────────────────────── */
.recensies{margin:4px 0 14px;display:flex;flex-direction:column;gap:10px}
.recensies-kop{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-variation-settings:"wght" 600;
}
.recensie{
  margin:0;background:var(--paper);border:1px solid var(--line-2);
  border-radius:10px;padding:11px 13px;
}
.recensie-kop{
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
  font-size:11px;color:var(--ink-3);margin-bottom:5px;
}
.recensie-ster{color:#E8B21F;letter-spacing:-1px}
.recensie p{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

.rijen{border-top:1px solid var(--line-2);font-size:14px}
.rij{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.rij span:first-child{color:var(--ink-3);flex:0 0 92px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.rij span:last-child{flex:1}
.rij a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-wash)}

.melding{
  position:absolute;left:50%;bottom:calc(var(--tabhoogte) + 16px);transform:translateX(-50%);z-index:20;
  background:var(--ink);color:var(--ground);padding:9px 16px;border-radius:20px;
  font-size:13px;box-shadow:var(--schaduw);
}

/* ── eenmalige privacymelding ─────────────────────────────────────────── */
/* Staat in de filterbalk, niet los onderin: daar zou hij over de openklap vallen. */
.privacy{
  background:var(--raise);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:var(--schaduw);display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;
}
.privacy p{margin:0;flex:1;min-width:190px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.privacy .knop{padding:7px 14px}
.privacy-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.privacy-link{font-size:12px;color:var(--ink-3);text-decoration:underline;
  align-self:center;margin-left:2px}
@media (min-width:760px){.privacy{max-width:520px}}

/* ── claimen door de eigenaar ─────────────────────────────────────────── */
.claim-link{
  display:block;width:100%;text-align:left;margin-top:14px;padding:11px 0 2px;
  font-size:13px;color:var(--accent);font-variation-settings:"wght" 600;
  border-top:1px solid var(--line-2);
}
.geclaimd-regel{
  margin-top:14px;padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12px;color:var(--ink-3);
}
.claimform{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.claim-uitleg{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.claimform input,.claimform textarea{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  background:var(--paper);color:var(--ink);font-size:14px;font-family:inherit;
  outline:none;resize:vertical;
}
.claimform input:focus,.claimform textarea:focus{border-color:var(--accent)}
.claimform button{align-self:flex-start;border:0}

/* ── twee reviewtabs in de openklap ───────────────────────────────────── */
.rtabs{display:flex;gap:6px;margin:2px 0 12px;border-bottom:1px solid var(--line-2)}
.rtab{
  padding:9px 2px;margin-right:16px;font-size:13px;color:var(--ink-3);
  font-variation-settings:"wght" 600;border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.rtab.aan{color:var(--ink);border-bottom-color:var(--accent)}
.rtab small{font-variation-settings:"wght" 400;color:var(--ink-3)}
.eigen-score{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.eigen-score b{font-size:22px;font-variation-settings:"wght" 700}
.eigen-score span{font-size:12px;color:var(--ink-3)}
.beoordeel{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:10px;margin-top:4px;
}
.beoordeel .kop{font-size:13px;font-variation-settings:"wght" 620}
.sterrenkeuze{display:flex;gap:4px}
.sterrenkeuze button{font-size:26px;line-height:1;color:var(--line);padding:0 2px}
.sterrenkeuze button.aan{color:#E8B21F}
.beoordeel textarea,.beoordeel input{
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--raise);
  color:var(--ink);font:inherit;font-size:13.5px;outline:none;resize:vertical;
}
.beoordeel textarea:focus,.beoordeel input:focus{border-color:var(--accent)}
.beoordeel .knop{align-self:flex-start;border:0}
.recensie.van-mij{border-color:var(--accent)}
.recensie .mijnlabel{color:var(--accent);font-variation-settings:"wght" 620}

/* ── feed: één video per scherm, doorscrollen ─────────────────────────── */
/* Alleen de binnenste laag scrollt. Twee geneste scrollgebieden boven elkaar
   betekent dat de buitenste de beweging opvangt en het vastklikken niet werkt. */
#paneel-feed{background:#000;overflow:hidden}
#paneel-feed .paneel-inhoud{
  /* Niet flex: in een kolom-flexbox delen de items de hoogte in plaats van
     elk het scherm te vullen. */
  display:block;
  max-width:none;margin:0;padding:0;gap:0;
  height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.feeditem{
  position:relative;height:100%;min-height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.feedvideo{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* Instagram-vensters kunnen we niet vormgeven en niet laten autoplayen; die
   zetten we netjes gecentreerd neer in plaats van te doen alsof het hetzelfde is. */
/* Een Instagram-venster kunnen we niet vormgeven en niet laten autoplayen.
   We zetten het gecentreerd op zwart neer, zodat het in dezelfde ritmiek past. */
.feedembed{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* Ruimte vrijhouden onderaan: daar staat onze eigen balk met de restaurantnaam,
   en die hoort niet over Instagram's likebalk heen te vallen. */
.feedembed iframe{width:100%;max-width:420px;height:min(100% - 120px,660px);
  border:0;background:#000;margin-bottom:96px}

/* Donkere sluier onderaan zodat witte tekst leesbaar blijft op elk beeld. */
.feedwaas{
  position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 45%,transparent);
}
.feedvlam{
  position:absolute;top:calc(14px + var(--veilig-boven));left:14px;z-index:3;
  background:var(--hot);color:#fff;border-radius:16px;padding:6px 13px;font-size:12px;
  font-variation-settings:"wght" 700;box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.feedover{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:18px 16px 22px;
  display:flex;align-items:flex-end;gap:14px;color:#fff;
}
.feedinfo{flex:1;min-width:0;display:flex;gap:11px;align-items:center}
.feedlogo{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#fff;
  background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.55);
}
.feedlogo.leeg{background:rgba(255,255,255,.16)}
.feedinfo b{display:block;font-size:17px;font-variation-settings:"wght" 660;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.feedinfo span{display:block;font-size:12.5px;color:rgba(255,255,255,.82);margin-top:1px;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.feedmaker{font-size:11.5px !important;color:rgba(255,255,255,.6) !important}
.feedknoppen{display:flex;flex-direction:column;gap:12px}
.feedknop{
  width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;
  font-size:20px;line-height:1;backdrop-filter:blur(6px);
}
.feedknop.aan{color:#E8B21F;border-color:#E8B21F}
.feedknop svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round}
.feedknop .ico{width:20px;height:20px;stroke:currentColor}
/* Weigert de browser automatisch afspelen, dan een duidelijke afspeelknop. */
.feeditem.wacht-op-tik::after{
  content:"\25B6";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  width:74px;height:74px;border-radius:50%;background:rgba(0,0,0,.45);
  color:#fff;font-size:28px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);
}
.feedleeg{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:rgba(255,255,255,.72);font-size:14px;text-align:center;padding:32px;
  line-height:1.6;
}
.feedleeg b{color:#fff;font-size:17px;font-variation-settings:"wght" 640}