/* Vivadata huisstijl (12 nov 2026): kobalt + signaalgeel, Bricolage Grotesque + Source Serif 4.
   Gebruikt door /nieuws/, de edities, /privacy/ en /en/. De homepage heeft dezelfde regels inline.
   Klassennamen van de edities blijven gelijk: publish.mjs, send.mjs en opdracht.txt rekenen erop. */
:root{
  --kobalt:#1F3FD1;--kobalt-diep:#152C9A;--inkt:#141B2E;--grijs:#5B6275;--lijn:#DDE1EA;--wit:#FFFFFF;--mist:#F2F4F9;--geel:#FFD23F;
  --kop:'Bricolage Grotesque',system-ui,sans-serif;--tekst:'Source Serif 4',Georgia,serif;--mono:'Bricolage Grotesque',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--wit);color:var(--inkt);font-family:var(--tekst);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--geel);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--geel);color:var(--inkt);padding:8px 14px;font-family:var(--kop);font-weight:600;z-index:20}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap.smal{max-width:760px}
h1,h2,h3{font-family:var(--kop);font-weight:800;letter-spacing:-.025em;line-height:1.08}
p+p{margin-top:14px}

/* kop en voet */
.balk{background:var(--kobalt);color:#fff}
.balk .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:var(--kop);font-weight:800;font-size:1.45rem;letter-spacing:-.04em;text-decoration:none}
.logo span{color:var(--geel)}
.menu{display:flex;gap:30px;align-items:center;font-family:var(--kop);font-size:1rem}
.menu a{text-decoration:none;opacity:.9}
.menu a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.knop,.btn{display:inline-block;font-family:var(--kop);font-weight:600;font-size:1.05rem;text-decoration:none;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;background:var(--kobalt);color:#fff}
.btn:hover{background:var(--kobalt-diep)}
.knop-licht{background:#fff;color:var(--kobalt);padding:10px 20px;opacity:1!important}
footer.voet{background:var(--inkt);color:#AEB6CC;font-family:var(--kop);font-size:.95rem;padding:28px 0 40px}
footer.voet .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.voet a{color:#fff}

/* paginakop (edities, overzicht, privacy) */
.editie-kop{background:var(--kobalt);color:#fff;padding:44px 0 56px}
.editie-kop .terug{font-family:var(--kop);font-size:.98rem;margin-bottom:22px}
.editie-kop .terug a{text-decoration:none;color:#E3E8FF}
.editie-kop .terug a:hover{text-decoration:underline;text-underline-offset:4px}
.week-badge{display:inline-block;font-family:var(--kop);font-weight:600;font-size:.92rem;border:2px solid #fff;border-radius:999px;padding:3px 14px;margin-bottom:16px}
.editie-kop .eyebrow{font-family:var(--kop);font-size:1rem;color:#C9D2FF;margin-bottom:12px}
.editie-kop h1{font-size:clamp(2.2rem,5.4vw,3.9rem);letter-spacing:-.035em}
.regenboog{display:none}

/* inhoud */
.artikel > .wrap.smal{padding-top:44px;padding-bottom:72px}
.intro-kaart{margin-bottom:34px}
.intro{font-size:1.25rem;line-height:1.6}
.intro b{font-family:var(--kop)}
.inhoud{background:var(--mist);border-radius:14px;padding:20px 24px;margin-bottom:12px;font-family:var(--kop)}
.inhoud-kop{font-weight:600;margin-bottom:8px}
.inhoud ol{margin-left:1.3em}
.inhoud li{padding:3px 0}
.inhoud a{color:var(--kobalt);text-underline-offset:4px}
.rubriek-kop,.artikel h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:56px 0 20px}
.verhalen{counter-reset:verhaal}
.verhaal{border-top:2px solid var(--inkt);padding:26px 0 8px;margin-bottom:26px}
.verhaal h3{display:flex;gap:14px;align-items:flex-start;font-size:1.45rem;line-height:1.2;margin-bottom:14px}
.verhaal h3::before{counter-increment:verhaal;content:counter(verhaal);flex:none;width:38px;height:38px;border-radius:50%;background:var(--kobalt);color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;margin-top:-2px}
.item p{margin-bottom:10px}
.verhaal ul,.duiding ol{margin:4px 0 14px 22px}
.verhaal li,.duiding li{margin-bottom:6px}
.duiding{background:var(--mist);border-left:4px solid var(--kobalt);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:16px;font-size:1.04rem}
.duiding b:first-child{display:block;font-family:var(--kop);font-weight:600;color:var(--kobalt);margin-bottom:4px}
.lijst-kaart{border:2px solid var(--inkt);border-radius:18px;margin:48px 0 0;overflow:hidden}
.lijst-kaart .lijst-kop{font-size:1.5rem;margin:0;padding:20px 26px 6px}
.lijst-kaart .item.kort,.lijst-kaart .item.tip{margin:0 26px;padding:18px 0;border-top:1px solid var(--lijn)}
.lijst-kaart .item.kort:first-of-type{border-top:none}
.item.kort h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.item.kort p{color:var(--grijs);font-size:1.02rem}
.lijst-kaart .duiding{margin:8px 0 6px}
.lijst-kaart.mijn-tip{background:var(--geel);border-color:var(--geel)}
.lijst-kaart .item.tip{border-top:0;padding-top:4px}
.lijst-kaart .item.tip p{font-size:1.1rem}

/* aanmelden */
.aanmeld{background:var(--mist);border-radius:18px;padding:28px 30px;margin:48px 0 0}
.aanmeld h2{font-size:1.6rem;margin:0 0 10px}
.aanmeld>p{color:var(--grijs)}
.aanmeld-rij{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.aanmeld .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aanmeld .zichtbaar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.aanmeld input[type=email]{flex:1 1 240px;font:inherit;font-size:1.05rem;padding:13px 16px;border:2px solid var(--inkt);border-radius:999px;background:#fff}
.aanmeld .klein,.klein{font-family:var(--kop);font-size:.9rem;color:var(--grijs);margin-top:12px}
.aanmeld-melding{display:none;font-family:var(--kop);font-weight:600;margin-top:12px}
.aanmeld-kort{padding:20px 24px;margin:8px 0 0}
.aanmeld-kort h2{font-size:1.2rem;margin-bottom:6px}

/* oproep en bron */
.cta-blok{background:var(--inkt);color:#fff;border-radius:18px;padding:32px 30px;margin:56px 0 32px}
.cta-blok h2{color:#fff;margin:0 0 10px;font-size:1.7rem}
.cta-blok p{color:#AEB6CC;margin-bottom:22px}
.cta-blok .btn{background:var(--geel);color:var(--inkt)}
.bron{font-family:var(--kop);font-size:.92rem;color:var(--grijs);border-top:1px solid var(--lijn);padding-top:18px}

/* overzicht edities */
.edities-kop{margin-top:64px!important}
a.editie{display:block;text-decoration:none;border-top:2px solid var(--inkt);padding:22px 0 26px}
a.editie:last-child{border-bottom:2px solid var(--inkt)}
a.editie .datum{display:block;font-family:var(--kop);font-size:.95rem;color:var(--grijs);margin-bottom:6px}
a.editie h2{font-size:1.55rem!important;margin:0 0 8px!important;color:var(--inkt)}
a.editie:hover h2{color:var(--kobalt);text-decoration:underline;text-underline-offset:5px}
a.editie p{color:var(--grijs)}

/* privacy */
.privacy h2{font-size:1.5rem!important;margin:44px 0 12px!important}
.privacy p,.privacy li{margin-bottom:12px}
.privacy ul{margin-left:1.3em}
.privacy table{width:100%;border-collapse:collapse;font-size:.98rem;margin:12px 0 18px}
.privacy th{font-family:var(--kop);text-align:left;border-bottom:2px solid var(--inkt);padding:8px 10px 8px 0}
.privacy td{border-bottom:1px solid var(--lijn);padding:10px 10px 10px 0;vertical-align:top}
@media(max-width:700px){.privacy table,.privacy tbody,.privacy tr,.privacy td{display:block}.privacy thead{display:none}.privacy tr{border-bottom:2px solid var(--lijn);padding:10px 0}.privacy td{border:0;padding:3px 0}}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .menu{gap:18px}
  .menu a:not(.knop):not(.blijft){display:none}
  .editie-kop{padding:32px 0 40px}
  .aanmeld,.cta-blok{padding:22px 20px}
  .lijst-kaart .item.kort,.lijst-kaart .item.tip{margin:0 18px}
  .lijst-kaart .lijst-kop{padding:18px 18px 4px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}