/* Syndle Radar — huisstijl uit het stijlboek: Arial Black kapitaal in rood/oranje/geel, bodytekst Century Gothic.
   Mobiel eerst; de desktopindeling staat onderaan in één media query. */

:root{
  --rood:#E52528;
  --oranje:#F08222;
  --amber:#F7A41F;
  --geel:#FAEA25;
  --inkt:#241F1C;
  --grond:#FBF8F4;
  --vlak:#FFFFFF;
  --lijn:#E4DCD2;
  --zacht:#7A6E64;
  --groen:#3F7A55;
  --schaduw:0 1px 2px rgba(36,31,28,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --rood:#F2554F; --oranje:#F79A45; --amber:#F7A41F; --geel:#FAEA25;
    --inkt:#F4EDE6; --grond:#191614; --vlak:#221E1B; --lijn:#3A322C; --zacht:#A2958A;
    --groen:#6FAE86; --schaduw:0 1px 2px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grond); color:var(--inkt);
  font-family:"Century Gothic",Futura,"Avant Garde","Trebuchet MS",sans-serif;
  font-size:16px; line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit}
.kop1,.kop2,.kop3{
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-weight:900;
  text-transform:uppercase; margin:0; letter-spacing:.01em; text-wrap:balance;
}
.kop1{font-size:22px; color:var(--rood); line-height:1.05}
.kop2{font-size:14px; color:var(--oranje); letter-spacing:.06em}
.kop3{font-size:11.5px; color:var(--zacht); letter-spacing:.09em}

/* ---------- kop ---------- */
.balk{
  position:sticky; top:0; z-index:20; background:var(--vlak); border-bottom:1px solid var(--lijn);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  display:flex; align-items:center; gap:12px;
}
.balk img{height:26px; width:auto; display:block}
.balk .kop1{padding-left:11px; border-left:2px solid var(--lijn); font-size:17px}
.balk nav{margin-left:auto; display:flex; gap:14px; font-size:13px}
.balk nav a{color:var(--zacht); text-decoration:none}
.balk nav a[aria-current]{color:var(--inkt)}

.wrap{max-width:1140px; margin:0 auto; padding:14px 14px 40px}
.intro{color:var(--zacht); font-size:13.5px; margin:0 0 12px}

/* ---------- delen ---------- */
.deelvak{margin-bottom:16px}
.deelvak summary{
  list-style:none; cursor:pointer; background:var(--vlak); border:1px solid var(--lijn);
  border-top:3px solid var(--geel); padding:13px 14px; box-shadow:var(--schaduw);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--zacht);
  display:flex; align-items:center; gap:8px;
}
.deelvak summary::-webkit-details-marker{display:none}
.deelvak summary::after{content:"+"; margin-left:auto; font-size:17px; color:var(--rood); line-height:1}
.deelvak[open] summary{border-bottom:0; box-shadow:none}
.deelvak[open] summary::after{content:"×"}
.deelvak[open] .deelbalk{border-top:0; margin-top:0}
.deelbalk{
  background:var(--vlak); border:1px solid var(--lijn); border-top:3px solid var(--geel);
  padding:12px 13px; box-shadow:var(--schaduw); display:grid; gap:8px; margin-bottom:16px;
}
.deelbalk .rij{display:grid; gap:8px}
.deelbalk label{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--zacht)}
input[type=url],input[type=text],input[type=password],select{
  width:100%; font-family:inherit; font-size:16px; color:var(--inkt); background:var(--grond);
  border:1px solid var(--lijn); padding:11px 12px; border-radius:2px;
}
button{font-family:inherit; border-radius:2px; cursor:pointer}
.knop{
  background:var(--rood); color:#fff; border:1px solid var(--rood); font-size:14px; padding:11px 18px;
  text-transform:uppercase; letter-spacing:.06em; width:100%;
}
.knop:active{background:var(--inkt); border-color:var(--inkt)}
.knop.smal{width:auto}
.plakknop{
  background:transparent; border:1px solid var(--lijn); color:var(--zacht); font-size:13px; padding:10px 14px;
}
:focus-visible{outline:2px solid var(--oranje); outline-offset:2px}
.hint{font-size:12px; color:var(--zacht); margin:0}

/* ---------- filters ---------- */
.filters{
  display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; background:var(--vlak); border:1px solid var(--lijn); color:var(--zacht);
  font-size:13px; padding:7px 13px; text-decoration:none; white-space:nowrap;
}
.chip[aria-current]{background:var(--inkt); border-color:var(--inkt); color:var(--grond)}

/* ---------- items ---------- */
.feed{display:grid; gap:10px}
.item{
  background:var(--vlak); border:1px solid var(--lijn); box-shadow:var(--schaduw);
  display:grid; grid-template-columns:96px minmax(0,1fr); overflow:hidden;
}
.item.gedeeld{border-left:4px solid var(--geel)}
/* Het beeld bij het bericht zelf, als de pagina er een meegeeft. */
.beeld{background:var(--lijn); min-height:104px}
.beeld img{width:100%; height:100%; object-fit:cover; display:block}
/* Zo niet, dan de tegel: één verloop in de huisstijlkleuren met het kernwoord uit de kop. */
.tegel{
  display:grid; place-items:center; min-height:104px; padding:10px 8px;
  background:linear-gradient(135deg,var(--rood),var(--amber) 55%,var(--geel));
}
.tegel span{
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; text-transform:uppercase; color:#fff;
  font-size:var(--tegelmaat,11px); line-height:1.25; letter-spacing:.06em; text-align:center;
  overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto;
  text-shadow:0 1px 3px rgba(0,0,0,.35); max-height:100%; overflow:hidden;
}
/* Hoe langer het woord, hoe kleiner de letter — zo blijft het binnen de tegel. */
.m-kort{--tegelmaat:12.5px}
.m-middel{--tegelmaat:11px}
.m-lang{--tegelmaat:9.5px}
.m-xlang{--tegelmaat:8.5px}
.inhoud{display:grid; gap:7px; padding:12px 13px; align-content:start}
.meta{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:11.5px; color:var(--zacht)}
.meta .bron{color:var(--inkt)}
.thema{font-size:10px; letter-spacing:.07em; text-transform:uppercase; padding:2px 6px; border:1px solid currentColor}
.t-zorg-voeding{color:var(--rood)}
.t-horeca-food{color:var(--oranje)}
.t-regelgeving{color:var(--groen)}
.t-ai-tooling{color:var(--zacht)}
.item h2{margin:0; font-size:16px; font-weight:400; line-height:1.32}
.item h2 a{text-decoration:none}
.item p{margin:0; font-size:13.5px; color:var(--zacht)}
.item p.eigen{color:var(--inkt); border-left:2px solid var(--geel); padding-left:9px}
.oordeel{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:8px; margin-top:2px;
  border-top:1px dotted var(--lijn); font-size:12px;
}
.mini{background:transparent; border:1px solid var(--lijn); color:var(--zacht); font-size:12.5px; padding:7px 12px}
.mini.aan{background:var(--groen); border-color:var(--groen); color:#fff}
.mini.uit{opacity:.45}
.oordeel form{display:inline}
.leeg{background:var(--vlak); border:1px dashed var(--lijn); padding:22px 16px; text-align:center; color:var(--zacht)}

/* ---------- panelen ---------- */
.paneel{background:var(--vlak); border:1px solid var(--lijn); padding:14px 15px; box-shadow:var(--schaduw); margin-top:16px}
.paneel h2{margin:0 0 9px}
.bronrij{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:9px 0; border-bottom:1px dotted var(--lijn); font-size:13.5px}
.bronrij:last-child{border-bottom:0}
.bronrij small{grid-column:1/-1; color:var(--zacht); font-size:11.5px}
.getal{font-variant-numeric:tabular-nums; color:var(--zacht); font-size:12.5px}
.getal.vol{color:var(--groen)}
.log{margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:12.5px; color:var(--zacht)}
.log li{display:grid; grid-template-columns:8px 1fr; gap:8px; align-items:start}
.punt{width:7px; height:7px; margin-top:6px; background:var(--oranje)}
.log b{color:var(--inkt); font-weight:400}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{text-align:left; padding:8px 8px 8px 0; border-bottom:1px dotted var(--lijn); vertical-align:top}
th{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--zacht); font-weight:400}
.tabelwrap{overflow-x:auto}
.fout{color:var(--rood); font-size:12px}

footer{margin-top:26px; padding-top:12px; border-top:1px solid var(--lijn); font-size:12px; color:var(--zacht)}

/* ---------- vanaf tablet ---------- */
@media (min-width:760px){
  /* Op een breed scherm is er ruimte zat: de deelbalk staat gewoon open, zonder uitklapkop. */
  .deelvak summary{display:none}
  .deelvak:not([open]) .deelbalk{display:grid}
  .deelvak .deelbalk{border-top:3px solid var(--geel)}
  .wrap{padding:20px 22px 60px}
  .balk{padding:12px 22px}
  .balk img{height:32px}
  .balk .kop1{font-size:20px}
  .kop1{font-size:26px}
  .deelbalk .rij{grid-template-columns:1fr 200px auto; align-items:center}
  .knop{width:auto}
  .item{grid-template-columns:158px minmax(0,1fr)}
  .m-kort{--tegelmaat:15px}
  .m-middel{--tegelmaat:13px}
  .m-lang{--tegelmaat:11.5px}
  .m-xlang{--tegelmaat:10px}
  .tegel,.beeld{min-height:132px}
  .item h2{font-size:17.5px}
}

/* ---------- vanaf laptopbreedte: feed en zijkolom naast elkaar ---------- */
@media (min-width:1024px){
  .kolommen{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start}
  .kolommen aside{position:sticky; top:76px; display:grid; gap:16px}
  .paneel{margin-top:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* --- Leesblad: het artikel als venster boven de feed --------------------- */
/* Een pop-up, geen pagina: de feed blijft eromheen zichtbaar, zodat duidelijk
   is dat je hem met het kruisje wegklikt en weer staat waar je was. Daarom ook
   niet schermvullend — er blijft aan alle kanten grond omheen staan. */

/* De link naar het origineel staat bij de herkomst, niet in de kop: in de
   kopregel brak hij het zetsel van lange titels. */
.meta .uit-app{text-decoration:none; color:var(--zacht); white-space:nowrap}
.meta .uit-app:hover{color:var(--rood)}

body.vast{overflow:hidden}

.lezer{position:fixed; inset:0; z-index:40; display:flex; justify-content:center; align-items:center; padding:20px}
.lezer[hidden]{display:none}
.lezer .scherm{position:absolute; inset:0; background:rgba(36,31,28,.62); backdrop-filter:blur(2px)}
.lezer .blad{
  position:relative; width:100%; max-width:620px; max-height:78vh; display:flex; flex-direction:column;
  background:var(--grond); border:1px solid var(--lijn); border-top:4px solid var(--rood);
  box-shadow:0 12px 40px rgba(36,31,28,.38);
  animation:opkomen .16s ease-out;
}
@keyframes opkomen{from{transform:scale(.97); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .lezer .blad{animation:none} }

/* De balk staat vast bovenin het venster; het kruisje is altijd bereikbaar,
   ook halverwege een lang artikel. */
.lezer .blad-balk{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 8px 8px 14px; border-bottom:1px solid var(--lijn); background:var(--vlak);
}
.lezer .sluit{
  width:40px; height:40px; flex:0 0 auto; font-size:26px; line-height:1;
  background:transparent; color:var(--inkt); border:1px solid var(--lijn); cursor:pointer;
}
.lezer .sluit:hover,.lezer .sluit:focus-visible{background:var(--rood); border-color:var(--rood); color:#fff}
.lezer .blad-inhoud{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));
}
.laden{color:var(--zacht); font-size:13.5px}

.leesblad header{border-bottom:1px solid var(--lijn); padding-bottom:12px; margin-bottom:14px}
.leesblad h1{font-size:19px; margin-top:8px; line-height:1.15}
/* Het kopbeeld krijgt een vaste band: veel sites geven als og:image hun logo
   mee, en dat vulde het halve leesvenster. */
.leesblad .prent{width:100%; height:200px; object-fit:cover; object-position:center;
  margin-bottom:14px; border:1px solid var(--lijn); background:var(--vlak)}
.leesblad .tekst{font-size:15.5px; line-height:1.68}
.leesblad .tekst p{margin:0 0 13px}
.leesblad .tekst h2,.leesblad .tekst h3,.leesblad .tekst h4{
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-weight:900;
  text-transform:uppercase; font-size:13px; color:var(--oranje); letter-spacing:.05em;
  margin:20px 0 9px;
}
.leesblad .tekst img{max-width:100%; height:auto; margin:6px 0; border:1px solid var(--lijn)}
.leesblad .tekst blockquote{
  margin:14px 0; padding:2px 0 2px 12px; border-left:3px solid var(--geel); color:var(--zacht);
}
.leesblad .tekst ul,.leesblad .tekst ol{margin:0 0 13px; padding-left:20px}
.leesblad .tekst li{margin-bottom:5px}
.leesblad .tekst a{color:var(--rood)}
.leesblad .muur{
  background:var(--vlak); border:1px dashed var(--lijn); color:var(--zacht);
  padding:20px 16px; font-size:13.5px;
}
.leesblad .voet{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:space-between; align-items:center;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--lijn);
}
.leesblad .voet .mini{text-decoration:none; display:inline-block}
.terug{font-size:13px; margin:0 0 12px}

/* De losse leespagina (/lezen/<id>/) is geen venster: daar mag het blad gewoon
   meelopen met de kolom. */
.wrap > .leesblad{background:var(--vlak); border:1px solid var(--lijn); padding:16px; box-shadow:var(--schaduw)}

@media (min-width: 760px){
  .lezer{padding:30px}
  .lezer .blad{max-width:660px; max-height:76vh}
  .lezer .blad-inhoud{padding:20px 26px 24px}
  .leesblad h1{font-size:23px}
}

/* --- Dagblokken: het overzicht van een dag, open te klikken ---------------- */
/* De feed begint met vandaag opengeklapt; oudere dagen staan dicht, anders
   scrol je bij het openen van de app eerst door een week heen. <details> doet
   het openklappen zelf — geen javascript, en het werkt ook offline. */

.dagblok{border-top:2px solid var(--inkt); margin-bottom:6px}
.dagblok + .dagblok{margin-top:18px}
.dagblok > summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding:12px 2px; cursor:pointer; list-style:none;
}
.dagblok > summary::-webkit-details-marker{display:none}
.dagblok > summary::after{
  content:"▾"; margin-left:auto; color:var(--zacht); font-size:13px; transition:transform .15s;
}
.dagblok[open] > summary::after{transform:rotate(180deg)}
.dagkop{
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-weight:900;
  text-transform:uppercase; font-size:13px; letter-spacing:.06em; color:var(--rood);
}
.dagtelling{font-size:11.5px; color:var(--zacht)}
.dagzin{flex:1 1 100%; font-size:14px; line-height:1.4; color:var(--inkt)}

.overzicht{
  background:var(--vlak); border:1px solid var(--lijn); border-left:3px solid var(--geel);
  padding:14px 16px; margin-bottom:14px;
}
.overzicht ul{margin:0; padding-left:18px; display:grid; gap:7px}
.overzicht li{font-size:14px; line-height:1.5; color:var(--inkt)}

/* Een samenvatting van het model leest als tekst, niet als bijschrift. */
.item p.gevat{color:var(--inkt)}