/* Weetwat — kids' news. A news magazine for kids: masthead, section rules, one strong
   colour per category, Lexend throughout, Tijl the owl used sparingly.
   Two looks: the default (no level chosen, or "Lang 9-12") is the calmer editorial one;
   html.stijl-kort (6-8 chosen) is a little more playful: thicker lines, offset shadows, pills. */

@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/lexend-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/lexend-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1D2B53;
  --ink-2: #4A5578;
  --sky: #E9F1FF;
  --paper: #FFFFFF;
  --sun: #FFCF24;
  --sun-tint: #FFF4C7;
  --owl: #4B7BFF;
  --goed: #1E7A3C; --goed-bg: #D9F2E0;
  --fout: #B42318; --fout-bg: #FFE0DC;
  --rust: #E3F4EF;

  --page: #F4F6FA;          /* calm paper-blue page (9-12 look) */
  --regel: #C8CFDD;         /* hairline between list items (decorative, not text) */
  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --lijn: 2px solid var(--ink);
  --lijn-s: 1.5px solid var(--ink);
  --schaduw: 0 0 0 transparent;
  --schaduw-l: 3px 3px 0 var(--ink);
  --schaduw-hover: 3px 3px 0 var(--ink);
  --knop-schaduw: none;
  --gutter: clamp(16px, 4vw, 40px);
  --breed: 78rem;
  --tekst: 40rem;

  /* default category = wereld */
  --c: #5A9BFF; --ct: #DCE9FF; --cx: var(--ink);
}

.cat-dieren     { --c: #FF9F1C; --ct: #FFEBCC; --cx: var(--ink); }
.cat-natuur     { --c: #3DB55E; --ct: #D9F2E0; --cx: var(--ink); }
.cat-ruimte     { --c: #6C4DF0; --ct: #E3DDFF; --cx: #FFFFFF; }
.cat-wetenschap { --c: #18B4CF; --ct: #D3F2F8; --cx: var(--ink); }
.cat-sport      { --c: #FF6A5C; --ct: #FFE0DC; --cx: var(--ink); }
.cat-belgie     { --c: #FFCF24; --ct: #FFF4C7; --cx: var(--ink); }
.cat-wereld     { --c: #5A9BFF; --ct: #DCE9FF; --cx: var(--ink); }
.cat-cultuur    { --c: #F25CB4; --ct: #FDE0F0; --cx: var(--ink); }
.cat-school     { --c: #FF8A3D; --ct: #FFE6D4; --cx: var(--ink); }
.cat-klimaat    { --c: #8FD14F; --ct: #E9F7DA; --cx: var(--ink); }

/* 6-8 look: the chosen "Kort" level keeps the friendlier sticker accents (thinner than before) */
html.stijl-kort {
  --page: var(--sky);
  --r-s: 14px; --r-m: 18px; --r-l: 24px;
  --lijn-s: 2px solid var(--ink);
  --schaduw: 3px 3px 0 var(--ink);
  --schaduw-l: 4px 4px 0 var(--ink);
  --schaduw-hover: 5px 5px 0 var(--ink);
  --knop-schaduw: 3px 3px 0 var(--sun);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
html[data-size="2"] { font-size: 112.5%; }
/* Digibord is for big screens: on phones it falls back to about "Groot" so nothing runs off */
html[data-size="3"] { font-size: clamp(112.5%, 4.4vw, 137.5%); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--page); color: var(--ink);
  font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1.125rem; line-height: 1.6; font-weight: 400;
  overflow-x: hidden;
}
main { flex: 1; width: 100%; padding: 0 var(--gutter) 4rem; outline: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.015em; }
/* No hyphenation: children who are learning to read must see whole words ("Brus-/sel", "re-/serveren" was the
   final review's H3). A word longer than the whole line ("ruimtevaartagentschappen" on a phone with digibord
   letters) may still wrap, never push the page sideways. */
body { overflow-wrap: anywhere; hyphens: manual; -webkit-hyphens: manual; }
/* the 9-12 look on a narrow phone: a long compound in a HEADING may be hyphenated (never body text, never 6-8) */
@media (max-width: 600px) {
  html:not(.stijl-kort):not([data-level="kort"]) :is(h1, h2, h3, .kaart-titel, .topkaart-titel, .verhaal-titel) { hyphens: auto; -webkit-hyphens: auto; }
}
/* a tappable word is never split, not even in a heading */
.woord { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
small { font-size: .8em; font-weight: 400; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 8px var(--sun); border-radius: 6px; }
[hidden] { display: none !important; }

html.stijl-kort body { font-size: 1.1875rem; }
html[data-ruim="1"] body { letter-spacing: .05em; word-spacing: .16em; line-height: 1.9; }
html[data-ruim="1"] .verhaal-tekst p { margin-bottom: 1.4em; }

/* reading level: both versions are in the page, CSS shows one */
html:not([data-level="lang"]) .lv-lang { display: none !important; }
html[data-level="lang"] .lv-kort { display: none !important; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--sun); padding: .75rem 1rem; border: var(--lijn); border-radius: var(--r-s); font-weight: 700; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- buttons */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.3rem; border: var(--lijn); border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; box-shadow: var(--knop-schaduw);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.knop:hover { background: #2C3D6E; }
html.stijl-kort .knop:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sun); }
.knop:active { transform: translate(1px, 1px); }
.knop svg { width: 1.4em; height: 1.4em; flex: none; }
.knop-klein { min-height: 44px; padding: .45rem 1.1rem; font-size: 1rem; }
.knop-zacht { background: var(--paper); color: var(--ink); box-shadow: var(--schaduw); }
.knop-zacht:hover { background: var(--sky); box-shadow: var(--schaduw-hover); }

/* category kicker: colour mark + name (9-12), a pill in the category colour (6-8) */
.tab {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .82rem; font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: var(--ink); text-decoration: none;
}
.tab-stip { width: .7rem; height: .7rem; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink); flex: none; }
html.stijl-kort .tab { padding: .12rem .7rem; border: var(--lijn-s); border-radius: 999px; background: var(--c); color: var(--cx); font-size: .85rem; }
html.stijl-kort .tab-stip { display: none; }

.dag-nav { max-width: var(--breed); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }

/* ---------------------------------------------------------------- first visit: reading level */
.leeftijd-keuze { display: none; }
html[data-kies="1"] .leeftijd-keuze {
  display: flex; gap: 1rem; align-items: center; max-width: var(--breed); margin: 1.25rem auto 0;
  background: var(--sun-tint); border: var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw-l);
  padding: clamp(.9rem, 2.5vw, 1.4rem);
}
.leeftijd-uil { flex: none; }
.leeftijd-uil .tijl-klein { width: 4rem; }
.leeftijd-keuze h2 { font-size: clamp(1.35rem, 3.5vw, 1.8rem); margin: 0 0 .6rem; }
.leeftijd-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.leeftijd-knoppen .knop { font-size: 1.15rem; min-height: 56px; padding-inline: 1.5rem; }
.leeftijd-noot { margin: .6rem 0 0; font-size: .98rem; color: var(--ink-2); }
html[data-kies="1"] .home-niveau { display: none; }

/* ---------------------------------------------------------------- header: masthead + theme bar */
.top { background: var(--paper); border-bottom: 3px solid var(--ink); }
.top-in {
  position: relative; max-width: var(--breed); margin: 0 auto; padding: .9rem var(--gutter) .8rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; flex-wrap: wrap;
}
@media (min-width: 1300px) { .top-in { padding-inline: 0; } }
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; min-height: 48px; border-radius: 12px; min-width: 0; }
.logo-uil { width: 2.7rem; height: auto; flex: none; }
.logo-woord { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; overflow-wrap: normal; }
.top-datum {
  margin: 0 auto 0 0; padding-left: 1.25rem; border-left: var(--lijn-s);
  display: flex; flex-direction: column; line-height: 1.3;
}
.top-slogan { font-weight: 700; font-size: 1rem; }
.top-dag { font-size: .9rem; color: var(--ink-2); }
.top-nav { display: flex; align-items: center; gap: .6rem; flex: none; } /* the gear never leaves the screen */
.top-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .9rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none; border: var(--lijn-s); border-color: transparent;
}
.top-link:hover, .top-link.is-actief { border-color: var(--ink); background: var(--page); }
.top-link .kort-label { display: none; }
.gear {
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--paper); border: var(--lijn-s); border-radius: 50%; box-shadow: var(--schaduw);
}
.gear svg { width: 26px; height: 26px; }
.gear[aria-expanded="true"] { background: var(--sun); }

.themabalk { border-top: 1px solid var(--regel); }
.themabalk ul {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--breed);
  display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
}
@media (min-width: 1300px) { .themabalk ul { padding-inline: 0; } }
@media (max-width: 899px) { /* a soft fade at the edge says "there is more, swipe" */
  .themabalk ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); padding-right: 2.5rem; }
}
.themabalk li { flex: none; }
.thema-link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .3rem .75rem;
  font-size: .95rem; font-weight: 600; text-decoration: none; border-bottom: 4px solid transparent; white-space: nowrap;
}
.thema-link:first-child { padding-left: 0; }
.themabalk li:first-child .thema-link { padding-left: 0; }
.thema-stip { width: .65rem; height: .65rem; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink); }
.thema-link:hover { border-bottom-color: var(--c, var(--ink)); }
.themabalk li:first-child .thema-link:hover, .themabalk li:first-child .is-actief { border-bottom-color: var(--ink); }
.thema-link.is-actief { border-bottom-color: var(--c); font-weight: 800; }
.thema-link:focus-visible { outline-offset: -4px; box-shadow: none; }

/* settings panel (inside .top-in) */
.instellingen {
  position: absolute; z-index: 40; right: var(--gutter); top: calc(100% - .4rem);
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  background: var(--paper); border: var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw-l);
  padding: 1.25rem 1.4rem 1.4rem;
}
.instellingen h2 { font-size: 1.35rem; }
.inst-groep { border: 0; padding: 0; margin: 0 0 1.25rem; }
.inst-groep legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg-knop {
  min-height: 64px; padding: .4rem .3rem; border: var(--lijn); border-radius: var(--r-s); background: var(--paper);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font-size: .85rem; font-weight: 600; line-height: 1.2;
}
.seg-knop span { font-weight: 800; line-height: 1; }
.seg-knop .a1 { font-size: 1rem; } .seg-knop .a2 { font-size: 1.3rem; } .seg-knop .a3 { font-size: 1.65rem; }
.seg-knop[aria-pressed="true"] { background: var(--ink); color: #fff; }
.schakel { display: flex; align-items: center; gap: .8rem; cursor: pointer; font-weight: 600; font-size: 1rem; line-height: 1.35; min-height: 48px; }
.schakel small { display: block; color: var(--ink-2); }
.schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakel-baan { flex: none; width: 58px; height: 34px; border: var(--lijn); border-radius: 999px; background: var(--sky); position: relative; }
.schakel-baan::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .15s ease; }
.schakel input:checked + .schakel-baan { background: var(--sun); }
.schakel input:checked + .schakel-baan::after { transform: translateX(24px); }
.schakel input:focus-visible + .schakel-baan { outline: 4px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 8px var(--sun); }
.inst-noot { font-size: .9rem; color: var(--ink-2); margin: 1rem 0; }

/* ---------------------------------------------------------------- mascot */
.tijl { overflow: visible; }
.tijl-groot { width: clamp(7rem, 18vw, 11rem); height: auto; }
.tijl-mid { width: 7.5rem; height: auto; }
.tijl-klein { width: 5rem; height: auto; }
.tijl-mini { width: 3.4rem; height: auto; }
.tijl-vleugel { transform-origin: 102px 70px; animation: zwaai 1.1s ease-in-out .4s 2; }
@keyframes zwaai { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 65% { transform: rotate(10deg); } }

/* ---------------------------------------------------------------- home: greeting strip */
.groet {
  max-width: var(--breed); margin: 1.25rem auto 1.75rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem 1rem;
}
.groet-uil { flex: none; }
.groet-uil .tijl-mini { width: 2.9rem; }
.groet-tekst { margin: 0; flex: 1 1 18rem; min-width: 0; font-size: 1.05rem; line-height: 1.45; color: var(--ink-2); }
.groet-hallo { color: var(--ink); font-weight: 800; }
.home-niveau { flex: none; margin-left: auto; }
/* 9-12 look: no mascot in the greeting, just the line */
html:not(.stijl-kort) .groet-uil, html:not(.stijl-kort) .groet-ik { display: none; }
html.stijl-kort .groet-tekst { font-size: 1.15rem; }

/* ---------------------------------------------------------------- section heads */
.dag { max-width: var(--breed); margin: 0 auto 3rem; }
.sectie-kop {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem 1rem;
  border-top: 3px solid var(--ink); padding-top: .55rem; margin-bottom: 1.25rem;
}
.sectie-titel { font-size: clamp(1.55rem, 3.2vw, 2.25rem); margin: 0; letter-spacing: -0.03em; }
.sectie-info { margin: 0; color: var(--ink-2); font-size: .98rem; }
.sectie-link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: .98rem; text-underline-offset: .2em; text-decoration-thickness: 2px;
}
.sectie-link:hover { text-decoration-color: var(--sun); text-decoration-thickness: 4px; }
.tussenkop {
  font-size: 1.15rem; margin: 2.25rem 0 1rem; padding-top: .5rem; border-top: 1px solid var(--regel);
}

.archief { max-width: var(--breed); margin: 0 auto; }
.archief-titel {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem); letter-spacing: -0.03em; margin: 0 0 1.5rem;
  padding-top: .55rem; border-top: 3px solid var(--ink);
}
.archief-titel::after { /* double rule: the newspaper section break */
  content: ""; display: block; height: 0; margin-top: .55rem; border-top: 1px solid var(--ink);
}
.dag-rij { margin-bottom: 2.25rem; }
.dag-rij .sectie-kop { border-top: 2px solid var(--ink); padding-top: .35rem; margin-bottom: .9rem; }
.dag-rij .sectie-titel { font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- front page: top story + side column */
.voorpagina { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.zij-titel { font-size: 1rem; margin: 0 0 .25rem; padding-bottom: .4rem; border-bottom: 2px solid var(--ink); }
.zijlijst { list-style: none; margin: 0; padding: 0; display: grid; }
.zijlijst li + li { border-top: 1px solid var(--regel); }
.klein { display: flex; gap: .9rem; padding: .85rem 0; text-decoration: none; align-items: flex-start; }
.klein-illus { flex: none; width: 7.5rem; aspect-ratio: 16 / 10; border: var(--lijn-s); border-radius: var(--r-s); overflow: hidden; background: var(--ct); }
.klein-illus img { width: 100%; height: 100%; object-fit: cover; }
.klein-tekst { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.klein-titel { font-size: 1.05rem; line-height: 1.28; margin: 0; font-weight: 700; letter-spacing: -0.005em; }
.klein-intro {
  margin: 0; font-size: .9rem; line-height: 1.4; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
html.stijl-kort .klein-intro { display: none; }
.klein:hover .klein-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
@media (min-width: 640px) and (max-width: 1099px) {
  .zijlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .zijlijst li + li { border-top: 0; }
  .zijlijst li { border-bottom: 1px solid var(--regel); }
  .zijlijst li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .voorpagina { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .voorpagina-alleen { grid-template-columns: 1fr; }
  .zijkolom { padding-left: 2rem; border-left: 1px solid var(--regel); align-self: stretch; }
  .klein-illus { width: 8.5rem; }
}

/* ---------------------------------------------------------------- top story */
.topkaart {
  display: grid; grid-template-columns: 1fr; text-decoration: none; overflow: hidden;
  background: var(--paper); border: var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw-l);
  transition: transform .14s ease, box-shadow .14s ease;
}
html.stijl-kort .topkaart:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.topkaart:hover .topkaart-titel { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; text-decoration-color: var(--sun); }
.topkaart:focus-visible { border-radius: var(--r-l); }
.topkaart-illus { display: block; background: var(--ct); aspect-ratio: 16 / 10; max-height: 360px; overflow: hidden; border-bottom: var(--lijn); }
.topkaart-illus img { width: 100%; height: 100%; object-fit: cover; }
.topkaart-tekst { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.1rem, 2.6vw, 1.9rem); justify-content: center; }
.topkaart-soort { margin: 0; align-self: flex-start; font-size: .9rem; font-weight: 700; color: var(--ink-2); }
.is-belangrijk .topkaart-soort { color: #fff; background: var(--ink); padding: .2rem .7rem; border-radius: 6px; }
.topkaart-titel { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.topkaart-intro { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.5; }
.topkaart-voet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: .3rem; }
.knop-lees { min-height: 44px; padding: .45rem 1.15rem; font-size: .98rem; }
/* photo framing fix: the picture stays on top (a side-by-side card cut landscape photos to a tall strip)
   and is at most 360 px tall, so the title is on the first screen */
@media (min-width: 760px) { .topkaart-illus { aspect-ratio: 16 / 7; } }

/* ---------------------------------------------------------------- story grid (mosaic) */
.raster { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); grid-auto-flow: dense; }
@media (min-width: 640px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kaart {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden; min-width: 0;
  background: var(--paper); border: var(--lijn-s); border-radius: var(--r-m); box-shadow: var(--schaduw);
  transition: transform .14s ease, box-shadow .14s ease;
}
html.stijl-kort .kaart:hover { transform: translate(-2px, -2px); box-shadow: var(--schaduw-hover); }
.kaart:hover .kaart-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.kaart:focus-visible { border-radius: var(--r-m); }
.kaart-illus { display: block; aspect-ratio: 16 / 10; background: var(--ct); border-bottom: var(--lijn-s); overflow: hidden; }
.kaart-illus img { width: 100%; height: 100%; object-fit: cover; }
.kaart-tekst { display: flex; flex-direction: column; gap: .45rem; padding: .8rem 1rem 1.05rem; }
.kaart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; }
.kaart-titel { font-size: 1.1rem; font-weight: 700; line-height: 1.27; margin: 0; letter-spacing: -0.008em; }
.kaart-intro {
  margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.kaart-dag { font-size: .85rem; color: var(--ink-2); }
html.stijl-kort .kaart-titel { font-size: 1.2rem; }
html.stijl-kort .kaart:not(.kaart-breed) .kaart-intro { display: none; } /* 6-8: title only, less to read */
.rij .kaart-intro { display: none; }
.rij .kaart-illus { aspect-ratio: 16 / 9; }
.rij .kaart-titel { font-size: 1.02rem; }
html.stijl-kort .rij .kaart-titel { font-size: 1.1rem; }

@media (min-width: 640px) {
  .kaart-breed { grid-column: span 2; flex-direction: row; }
  .kaart-breed .kaart-illus { flex: 0 0 50%; aspect-ratio: auto; min-height: 13rem; border-bottom: 0; border-right: var(--lijn-s); }
  .kaart-breed .kaart-tekst { justify-content: center; padding: 1.1rem 1.3rem; gap: .6rem; }
  .kaart-breed .kaart-titel { font-size: 1.4rem; line-height: 1.18; letter-spacing: -0.015em; }
  .kaart-breed .kaart-intro { font-size: 1rem; -webkit-line-clamp: 4; color: var(--ink); }
}

/* ---------------------------------------------------------------- weetje */
.weetje {
  max-width: var(--breed); margin: 0 auto 3rem; display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.5rem);
  background: var(--sun-tint); border: var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw-l);
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1.1rem, 3.5vw, 2.2rem);
}
html:not(.stijl-kort) .weetje-uil { display: none; }
html.stijl-kort .weetje { background: var(--sun); }
.weetje-uil { flex: none; }
.weetje h2 { font-size: .95rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: 0; }
.weetje-feit { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: -0.015em; max-width: 52rem; }
.weetje-link { font-size: .95rem; font-weight: 600; text-underline-offset: .2em; display: inline-block; padding: .3rem 0; }

/* ---------------------------------------------------------------- themes */
.themas-blok { max-width: var(--breed); margin: 3rem auto 1rem; padding-top: .55rem; border-top: 3px solid var(--ink); }
.themas-blok h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.themas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .45rem 1.1rem .45rem .85rem;
  background: var(--paper); border: var(--lijn-s); border-radius: 999px; text-decoration: none; font-weight: 600;
  box-shadow: var(--schaduw); transition: transform .12s ease, box-shadow .12s ease;
}
.chip:hover { background: var(--ct); }
html.stijl-kort .chip:hover { transform: translate(-1px, -1px); box-shadow: var(--schaduw-hover); }
.chip-stip { width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink); }
html.stijl-kort .chip-stip { border-radius: 50%; width: 16px; height: 16px; }
.chip.is-actief { background: var(--c); color: var(--cx); }

/* ---------------------------------------------------------------- empty states */
.leeg { max-width: 34rem; margin: 2rem auto 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.leeg h1, .leeg h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: .5rem; }
.leeg-404 { margin-top: 3rem; }

/* ---------------------------------------------------------------- listings (day + theme) */
.lijst-kop { max-width: var(--breed); margin: 1.75rem auto 1.75rem; padding-top: .55rem; border-top: 3px solid var(--ink); }
.lijst-kop[class*="cat-"] { border-top-color: var(--c); border-top-width: 8px; }
.lijst-kop h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -0.04em; margin: 0; }
.lijst-soort { font-weight: 700; color: var(--ink-2); margin: 0 0 .2rem; font-size: 1rem; }
.lijst-sub { color: var(--ink-2); font-size: 1.05rem; margin: .35rem 0 0; }
.lijst-top { max-width: var(--breed); margin: 0 auto 1.75rem; }
.raster-lijst { max-width: var(--breed); margin: 0 auto 3rem; }

/* ---------------------------------------------------------------- article */
.artikel { max-width: 62rem; margin: 0 auto; }
.artikel-kop, .verhaal > * { max-width: var(--tekst); margin-left: auto; margin-right: auto; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem auto 1.25rem; }
.artikel-meta .tab { font-size: .95rem; min-height: 44px; }
html.stijl-kort .artikel-meta .tab { padding: .3rem 1rem; min-height: 0; }
.artikel-dag { color: var(--ink-2); font-weight: 500; text-decoration: none; }
.artikel-dag:hover { text-decoration: underline; }

.werkbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.niveau { display: inline-flex; padding: 5px; gap: 4px; background: var(--paper); border: var(--lijn); border-radius: 999px; box-shadow: var(--schaduw); }
.niveau-knop {
  min-height: 58px; min-width: 7.5rem; padding: .35rem 1.3rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
}
.niveau-naam { font-size: 1.2rem; font-weight: 800; }
.niveau-leeftijd { font-size: .78rem; font-weight: 500; }
.niveau-knop[aria-pressed="true"] { background: var(--ink); color: #fff; }
html:not(.stijl-kort) .niveau { padding: 3px; box-shadow: none; border: var(--lijn-s); }
html:not(.stijl-kort) .niveau-knop { min-height: 46px; min-width: 6.5rem; padding: .25rem 1rem; }
html:not(.stijl-kort) .niveau-naam { font-size: 1.02rem; }
html:not(.stijl-kort) .niveau-leeftijd { font-size: .74rem; }
.niveau-knop:not([aria-pressed="true"]):hover { background: var(--sky); }
.voorlees { display: flex; gap: .6rem; }
.knop-voorlees { background: var(--sun); color: var(--ink); box-shadow: var(--schaduw); min-height: 58px; padding-inline: 1.4rem 1.6rem; font-size: 1.1rem; }
.knop-voorlees:hover { box-shadow: var(--schaduw-hover); }
.knop-voorlees.is-bezig { background: var(--paper); }
.knop-stop { background: var(--paper); color: var(--ink); box-shadow: var(--schaduw); min-height: 58px; }

/* the article picture sits under title + intro; at most 35rem wide and 45vh tall (16:10 -> 72vh wide),
   so title + intro + the top of the picture fit the first screen of a 1366x768 laptop */
.verhaal > .artikel-illus, .verhaal > .artikel-foto { max-width: min(35rem, 72vh, 100%); }
.artikel-illus { margin: 0 auto 2rem; border: var(--lijn); border-radius: var(--r-l); overflow: hidden; background: var(--ct); box-shadow: var(--schaduw-l); aspect-ratio: 16 / 10; }
.artikel-illus img { width: 100%; height: 100%; object-fit: cover; }

/* real photos (pipeline/images.py) in the frames of the illustrations (photo framing fix).
   Landscape: cover, object-position = the subject's focus point (classes fx-N fy-N set custom properties;
   CSP style-src 'self' forbids inline styles). Square + portrait (.foto-staand): the whole photo
   (contain) on a blurred, darkened copy of itself, never cut to a strip; tiny thumbnails keep cover. */
.foto-vak { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
/* not a photo of this story itself (match_level related/generic): say so on the card too (final review M2) */
.foto-label { position: absolute; right: .4rem; bottom: .4rem; z-index: 2; padding: .1rem .5rem; border-radius: 999px;
  background: rgba(20, 24, 40, .78); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4; letter-spacing: .01em;
  pointer-events: none; }
.klein-illus .foto-label { display: none; } /* too narrow beside the drawing: said under the intro instead */
@media (max-width: 639px) { .kaart-illus .foto-label { display: none; } }
@media (min-width: 640px) { .kaart-foto-noot { display: none; } }
.klein-foto-noot { margin: .2rem 0 0; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.foto-pic { display: block; width: 100%; height: 100%; --fx: 50%; --fy: 40%; }
.foto-pic img, img.foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; object-position: var(--fx) var(--fy); }
.fx-0 { --fx: 0%; } .fy-0 { --fy: 0%; }
.fx-10 { --fx: 10%; } .fy-10 { --fy: 10%; }
.fx-20 { --fx: 20%; } .fy-20 { --fy: 20%; }
.fx-30 { --fx: 30%; } .fy-30 { --fy: 30%; }
.fx-40 { --fx: 40%; } .fy-40 { --fy: 40%; }
.fx-50 { --fx: 50%; } .fy-50 { --fy: 50%; }
.fx-60 { --fx: 60%; } .fy-60 { --fy: 60%; }
.fx-70 { --fx: 70%; } .fy-70 { --fy: 70%; }
.fx-80 { --fx: 80%; } .fy-80 { --fy: 80%; }
.fx-90 { --fx: 90%; } .fy-90 { --fy: 90%; }
.fx-100 { --fx: 100%; } .fy-100 { --fy: 100%; }
.foto-vak .foto-achter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-filter: blur(14px) brightness(.62) saturate(1.1); filter: blur(14px) brightness(.62) saturate(1.1);
  -webkit-transform: scale(1.15); transform: scale(1.15); pointer-events: none; }
.foto-staand .foto-pic { position: relative; }
.foto-staand .foto-pic img { object-fit: contain; object-position: 50% 50%; }
/* tiny thumbnails: a strip around the face reads better than a small whole photo */
.klein-illus .foto-achter { display: none; }
.klein-illus .foto-staand .foto-pic img { object-fit: cover; object-position: var(--fx) var(--fy); }
.heeft-foto { background: var(--ink); }
.artikel-foto { margin: 0 auto 2rem; }
.artikel-foto-kader { border: var(--lijn); border-radius: var(--r-l); overflow: hidden; background: var(--ink); box-shadow: var(--schaduw-l); aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .artikel-foto-kader { aspect-ratio: auto; height: min(36vh, 24rem); } }
.foto-onderschrift { margin-top: .55rem; font-size: .92rem; line-height: 1.4; color: var(--ink-2); }

/* Compare slider (article): drawing left, real photo right, a draggable divider (vergelijk.js).
   Both layers share one 16:10 frame (the drawings are 16:10). Landscape photo: cover, the photo layer is
   clipped from the left at --pos. Square/portrait photo: the photo box runs from the line to the right
   edge and the whole photo sits in it (contain, on its blurred copy), so a face is never cut by the line. */
.vergelijk-label { position: absolute; top: .6rem; z-index: 2; padding: .2rem .6rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em;
  pointer-events: none; transition: opacity .2s ease; }
.vergelijk-label-tekening { left: .6rem; }
.vergelijk-label-foto { right: .6rem; }
.vergelijk-tekening { background: var(--ct); }
.vergelijk-laag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vergelijk-laag img, .vergelijk-laag picture { -webkit-user-drag: none; -webkit-touch-callout: none; }
.vergelijk-schuif, .vergelijk-lijn, .vergelijk-hint { display: none; }
/* without JS: the two pictures side by side, each with its label */
html:not(.js) .vergelijk-kader { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
html:not(.js) .vergelijk-laag { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: var(--lijn-s); border-radius: var(--r-m); }
/* with JS: one frame, the photo layer clipped from the left at --pos */
html.js .vergelijk-kader { --pos: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: var(--lijn);
  border-radius: var(--r-l); background: var(--ct); box-shadow: var(--schaduw-l); touch-action: pan-y; -ms-touch-action: pan-y; cursor: ew-resize;
  -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
@supports not (aspect-ratio: 16 / 10) { html.js .vergelijk-kader { height: 0; padding-top: 62.5%; } }
html.js .vergelijk-laag { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } /* own stacking context: labels clip with their layer */
html.js .vergelijk-foto { -webkit-clip-path: inset(0 0 0 var(--pos)); clip-path: inset(0 0 0 var(--pos)); background: var(--ink); }
html.js .vergelijk-staand .vergelijk-foto .foto-pic { position: absolute; top: 0; bottom: 0; right: 0; left: var(--pos); width: auto; height: auto; }
html.js .vergelijk-schuif { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  pointer-events: none; z-index: 1; }
html.js .vergelijk-lijn { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 4px;
  margin-left: -2px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); pointer-events: none; }
.vergelijk-greep { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 2px 6px rgba(29, 43, 83, .35); }
.vergelijk-greep svg { width: 26px; height: 26px; }
html.stijl-kort .vergelijk-greep { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: var(--sun); box-shadow: 3px 3px 0 var(--ink); }
.vergelijk-schuif:focus-visible ~ .vergelijk-lijn .vergelijk-greep { outline: 4px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 8px var(--sun); }
.vergelijk-kader.is-sleep .vergelijk-greep { -webkit-transform: scale(1.08); transform: scale(1.08); }
.vergelijk-kader.weinig-tekening .vergelijk-label-tekening, .vergelijk-kader.weinig-foto .vergelijk-label-foto { opacity: 0; }
/* hint under the frame until the child has used the slider once (vergelijk.js + prefs.js "schuif-gekend") */
html.js .vergelijk-hint { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .6rem;
  margin: .5rem 0 0; font-size: .95rem; font-weight: 700; color: var(--ink); transition: opacity .3s ease; }
.vergelijk-hint-streep { color: var(--ink-2); font-weight: 400; }
.vergelijk-hint-uitleg { flex-basis: 100%; text-align: center; font-size: .82rem; font-weight: 500; color: var(--ink-2); }
html.schuif-gekend .vergelijk-hint, html.js .vergelijk.is-gebruikt .vergelijk-hint { display: none; }
html.js .vergelijk .foto-onderschrift { padding-inline: .1rem; }
/* compare slider in cards (home, day, theme pages; _cards.html beeld()): fills the card's picture box,
   no range input (the card link is the tab stop), smaller handle; the top story (vk-groot) keeps the
   article's handle + labels and shows the hint on the picture */
.vk-kaart { display: block; width: 100%; height: 100%; }
html.js .vergelijk-kader.vk-kaart { width: 100%; height: 100%; aspect-ratio: auto; padding-top: 0; border: 0; border-radius: 0; box-shadow: none; cursor: inherit; }
html.js .vergelijk-kader.vk-groot { cursor: ew-resize; }
html.js .vk-kaart .vergelijk-lijn { width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1px var(--ink); }
.vk-kaart .vergelijk-greep, html.stijl-kort .vk-kaart .vergelijk-greep { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-width: 1.5px; box-shadow: 0 1px 4px rgba(29, 43, 83, .35); }
.vk-kaart .vergelijk-greep svg { width: 20px; height: 20px; }
.vk-klein .vergelijk-greep, html.stijl-kort .vk-klein .vergelijk-greep { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.vk-klein .vergelijk-greep svg { width: 15px; height: 15px; }
.vk-groot .vergelijk-greep { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-width: 2px; }
.vk-groot .vergelijk-greep svg { width: 26px; height: 26px; }
html.stijl-kort .vk-kaart .vergelijk-greep { background: var(--sun); }
html.stijl-kort .vk-groot .vergelijk-greep { width: 54px; height: 54px; margin: -27px 0 0 -27px; box-shadow: 3px 3px 0 var(--ink); }
html.js .vergelijk-hint.vk-hint { position: absolute; left: 50%; bottom: .6rem; z-index: 4; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  margin: 0; padding: .2rem .75rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; white-space: nowrap; pointer-events: none; }
.vk-hint .vergelijk-hint-streep { color: rgba(255, 255, 255, .6); }
html.js .vk-kaart.is-gebruikt .vk-hint { display: none; }
/* tiny thumbnails: cover around the focus point, also for portraits, revealed from the left like landscape */
html.js .klein-illus .vergelijk-staand .vergelijk-foto .foto-pic { left: 0; width: 100%; height: 100%; }
/* without JS a card shows just the photo */
html:not(.js) .vergelijk-kader.vk-kaart { display: block; }
html:not(.js) .vk-kaart .vergelijk-tekening { display: none; }
html:not(.js) .vk-kaart .vergelijk-laag { display: block; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
@media (max-width: 420px) { .vergelijk-label { font-size: .72rem; top: .45rem; } .vergelijk-label-tekening { left: .45rem; } .vergelijk-label-foto { right: .45rem; } }
.foto-wat { font-weight: 600; color: var(--ink); }
.foto-credit { display: block; font-size: .78rem; margin-top: .1rem; }
.fotos-lijst { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.fotos-lijst li { border: var(--lijn-s); border-radius: var(--r-m); overflow: hidden; background: var(--paper); }
.fotos-beeld { aspect-ratio: 16 / 10; background: var(--ink); }
.fotos-tekst { padding: .7rem .9rem .9rem; font-size: .9rem; line-height: 1.45; }
.fotos-tekst h2 { font-size: 1rem; margin: 0 0 .3rem; }
.fotos-tekst p { margin: .15rem 0; }

.verhaal-titel { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.07; letter-spacing: -0.035em; margin-bottom: .6em; }
.verhaal-intro { font-size: clamp(1.25rem, 2.6vw, 1.45rem); font-weight: 600; line-height: 1.5; margin-bottom: 1.4em; }
/* AI transparency line under each title (EU AI Act art. 50 spirit): small, but always there */
.ai-noot { margin-top: -.2rem; margin-bottom: 1rem; padding: .35rem 0 .35rem .8rem; border-left: 4px solid var(--sun);
  color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.ai-noot a { color: var(--ink); font-weight: 700; text-underline-offset: .18em; white-space: nowrap; margin-left: .3rem; }
.beleid-lijst { margin: 0 0 1rem; padding-left: 1.2rem; }
.beleid-lijst li { margin: .15rem 0; }
.bronnen-ander-titel { font-size: 1.05rem; margin-top: 1rem; }
.bronnen-ander { font-size: .95rem; color: var(--ink-2); }
.verhaal-tekst p { margin-bottom: 1.1em; }
html[data-level="kort"] .verhaal-tekst, html:not([data-level]) .verhaal-tekst { font-size: 1.12em; line-height: 1.7; }

.lv-zin { border-radius: .25em; transition: background-color .15s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lv-zin.leest, .quiz-tekst.leest, .optie-tekst.leest { background: var(--sun); box-shadow: 0 0 0 .12em var(--sun); }
/* "Toon waar het staat" (quiz, after a wrong answer): the sentence with the answer; read-aloud still wins */
.lv-zin.is-bron {
  background: var(--sun-tint); box-shadow: 0 0 0 .14em var(--sun-tint);
  text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: .2em; text-underline-offset: .22em;
  animation: bron-flits 1.2s ease-out 1;
}
.lv-zin.is-bron:focus, .lv-zin.is-bron:focus-visible { outline: none; box-shadow: 0 0 0 .14em var(--sun-tint); border-radius: .25em; }
.lv-zin.is-bron.leest { background: var(--sun); box-shadow: 0 0 0 .12em var(--sun); }
@keyframes bron-flits { 0%, 40% { background: var(--sun); box-shadow: 0 0 0 .14em var(--sun); } }
@media (prefers-reduced-motion: reduce) { .lv-zin.is-bron { animation: none; } }
/* "Terug naar de vraag": right after the marked sentence (site.js), back to the quiz */
/* on its own line, so the rest of the paragraph starts fresh below it */
.bron-terug { display: flex; width: fit-content; margin: .5rem 0 .6rem; font-size: 1rem; line-height: 1.2; }
.bron-terug span { font-size: 1.15em; line-height: 1; }
.voorlees-noot { margin: 0; align-self: center; padding: .5rem 1rem; border: 2.5px dashed var(--ink-2); border-radius: var(--r-s); background: var(--paper); font-size: 1rem; font-weight: 600; }

.woord {
  text-decoration: underline dotted var(--ink); text-decoration-thickness: .14em; text-underline-offset: .2em;
  background: var(--ct); border-radius: .3em; padding: 0 .12em; cursor: pointer; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.woord:hover, .woord[aria-expanded="true"] { background: var(--c); color: var(--cx); text-decoration-color: currentColor; }

.woord-pop {
  position: absolute; z-index: 60; width: min(23rem, calc(100vw - 32px));
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--paper); border: var(--lijn); border-radius: var(--r-m); box-shadow: var(--schaduw-l);
  padding: 1rem 3.4rem 1.1rem 1rem; outline: none;
}
.woord-pop.cat-ruimte { --c: #6C4DF0; }
.woord-pop-uil { flex: none; }
.woord-pop-titel { font-weight: 800; font-size: 1.25rem; margin: 0 0 .2rem; }
.woord-pop-uitleg { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.woord-pop-sluit {
  position: absolute; top: .45rem; right: .45rem; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--sky); border: var(--lijn-s); border-radius: 50%; cursor: pointer; padding: 0;
}
.woord-pop-sluit svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .woord-pop { position: fixed; left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
}

/* boxes under the story */
.kader { border: var(--lijn); border-radius: var(--r-l); padding: clamp(1.1rem, 3vw, 1.75rem); margin-top: 2rem; background: var(--paper); }
.kader h2 { font-size: 1.4rem; }
.kader p:last-child { margin-bottom: 0; }
.kader-waarom { background: var(--sun-tint); }
.kader-waarom p { font-size: 1.15rem; }

.woordenlijst { margin: 0; display: grid; gap: .75rem; }
.woordenlijst-item { padding: .75rem 1rem; border-radius: var(--r-s); background: var(--ct); scroll-margin-top: 2rem; }
.woordenlijst-item:target { outline: 3px solid var(--ink); }
.woordenlijst dt { font-weight: 800; font-size: 1.1rem; }
.woordenlijst dd { margin: .1rem 0 0; font-size: 1.02rem; line-height: 1.5; }

.bron-telling:empty { display: none; }
.bron-telling { display: inline-block; margin: -.25rem 0 1rem; padding: .15rem .8rem; border: var(--lijn-s); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: .95rem; }
.weten-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 1.75rem; }
.weten-kol h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .5rem; }
.weten-kol h3 svg { width: 30px; height: 30px; padding: 4px; border-radius: 50%; border: var(--lijn-s); flex: none; }
.weten-zeker h3 svg { background: var(--goed-bg); color: var(--goed); }
.weten-zeggen h3 svg { background: var(--sun-tint); }
.weten-kol ul { margin: 0; padding-left: 1.2rem; font-size: 1.02rem; line-height: 1.5; }
.weten-kol li { margin-bottom: .45rem; }
.bronnen { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 2px dashed var(--ink-2); }
.bronnen h3 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.bronnen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bronnen-lijst li { padding: .25rem .85rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--sky); font-size: .95rem; font-weight: 600; }

.zorgbox {
  display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2rem;
  background: var(--rust); border: var(--lijn); border-radius: var(--r-l); padding: clamp(1.1rem, 3vw, 1.75rem);
}
.zorgbox-uil { flex: none; }
.zorgbox h2 { font-size: 1.35rem; }
.zorgbox p { font-size: 1.1rem; }
.zorgbox-uren { margin: 0; font-size: 1rem !important; }
.awel-nr {
  display: inline-block; padding: 0 .45rem; border-radius: 999px; background: var(--paper);
  border: var(--lijn-s); font-weight: 800; white-space: nowrap;
}

/* quiz */
.quiz {
  margin-top: 2.5rem; background: var(--ct); border: var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw-l);
  padding: clamp(1.1rem, 3.5vw, 2rem);
}
.quiz-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.quiz-kop h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin: 0 0 1rem; }
.quiz-teller { font-weight: 700; margin: 0; background: var(--paper); border: var(--lijn-s); border-radius: 999px; padding: .15rem .8rem; font-size: .95rem; }
.quiz-vragen { list-style: none; margin: 0; padding: 0; }
.quiz.is-actief .quiz-vraag:not(.is-huidig) { display: none; }
.quiz-tekst { font-size: clamp(1.2rem, 2.6vw, 1.4rem); font-weight: 700; line-height: 1.35; }
.quiz-vraagrij { display: flex; align-items: flex-start; gap: .75rem; }
.quiz-vraagrij .quiz-tekst { flex: 1; min-width: 0; }
.quiz-voorlees {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--sun); border: var(--lijn); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
.quiz-voorlees svg { width: 24px; height: 24px; }
.quiz-opties { display: grid; gap: .7rem; }
.optie {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 60px; text-align: left; cursor: pointer;
  padding: .6rem 1rem; background: var(--paper); border: var(--lijn); border-radius: var(--r-m); font-size: 1.1rem; font-weight: 500; line-height: 1.35;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .1s ease, box-shadow .1s ease;
}
.optie:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.optie-letter { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: var(--lijn-s); background: var(--sky); font-weight: 800; font-size: 1rem; }
.optie:disabled { cursor: default; }
.optie.is-goed { background: var(--goed-bg); }
.optie.is-goed .optie-letter { background: var(--goed); color: #fff; border-color: var(--goed); }
.optie.is-fout { background: var(--fout-bg); }
.optie.is-fout .optie-letter { background: var(--fout); color: #fff; border-color: var(--fout); }
.optie.is-uit { opacity: .55; }
.quiz-feedback { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1rem; background: var(--paper); border: var(--lijn); border-radius: var(--r-m); padding: 1rem 1.1rem; }
.quiz-feedback .fb-goed, .quiz-feedback .fb-fout { display: none; flex: none; }
.quiz-feedback.is-goed .fb-goed, .quiz-feedback.is-fout .fb-fout { display: block; }
.fb-titel { font-weight: 800; font-size: 1.2rem; margin: 0 0 .25rem; }
.quiz-feedback.is-goed .fb-titel { color: var(--goed); }
.quiz-feedback.is-fout .fb-titel { color: var(--fout); }
.fb-uitleg { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.fb-bron { margin: .5rem 0 0; font-size: 1.05rem; line-height: 1.5; font-weight: 600; }
.fb-bron-link { font-weight: 700; text-decoration-thickness: .12em; text-underline-offset: .18em; text-decoration-color: var(--fout); }
.fb-bron-link:hover { text-decoration-thickness: .2em; }
.quiz-verder { margin-top: 1rem; }
.quiz-score { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.score-groot { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 .2rem; line-height: 1.1; }
.score-tekst { font-size: 1.15rem; }

.meer { max-width: var(--breed); margin: 4rem auto 0; }
.meer h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: .2em; text-underline-offset: .14em; }

/* ---------------------------------------------------------------- parents page */
.ouders { max-width: 50rem; margin: 0 auto; }
.ouders-kop { display: flex; align-items: center; gap: 1.5rem; margin: 1rem 0 2rem; }
.ouders-kop h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.035em; }
.ouders-lead { font-size: 1.2rem; }
.ouders-blok { background: var(--paper); border: var(--lijn); border-radius: var(--r-l); padding: clamp(1.1rem, 3.5vw, 2rem); margin-bottom: 1.75rem; }
.ouders-blok h2 { font-size: 1.6rem; }
.ouders-blok p:last-child { margin-bottom: 0; }
.ouders-noot { color: var(--ink-2); font-size: 1rem; }
.stappen { list-style: none; counter-reset: stap; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1.1rem; }
.stappen li { counter-increment: stap; position: relative; padding-left: 3.5rem; }
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: -.1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--sun); border: var(--lijn); font-weight: 800; font-size: 1.05rem;
}
.stappen h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.stappen p { margin: 0; font-size: 1.02rem; }
.bronnen-tabel { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem; }
.bronnen-tabel li { display: flex; flex-direction: column; padding: .7rem .9rem; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--sky); }
.bronnen-tabel li > * { min-width: 0; overflow-wrap: anywhere; }
.bronnen-tabel a { font-weight: 700; text-underline-offset: .18em; min-height: 32px; display: inline-flex; align-items: center; }
.bron-typering { font-size: .9rem; color: var(--ink-2); }
.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vinkjes li { position: relative; padding-left: 2.2rem; font-size: 1.05rem; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--goed-bg); border: var(--lijn-s); }
.vinkjes li::after { content: ""; position: absolute; left: .45rem; top: .45rem; width: .4rem; height: .7rem; border: solid var(--goed); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.contact { background: var(--sun-tint); border-radius: var(--r-s); padding: .75rem 1rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer */
.voet { background: var(--ink); color: #fff; padding: 2.25rem var(--gutter) 2.5rem; margin-top: 2rem; }
.voet-in { max-width: var(--breed); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
.voet p { margin: 0; max-width: 38rem; font-size: 1rem; }
.voet a { color: var(--sun); font-weight: 700; text-underline-offset: .2em; display: inline-flex; min-height: 48px; align-items: center; }
.voet :focus-visible { outline-color: var(--sun); box-shadow: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  /* masthead: tagline + date become a slim second line under the logo */
  .top-datum { order: 3; flex: 1 0 100%; flex-direction: row; justify-content: space-between; gap: 1rem;
    margin: 0; padding: .45rem 0 0; border-left: 0; border-top: 1px solid var(--regel); }
  .top-slogan { font-size: .92rem; }
  .top-dag { font-size: .85rem; text-align: right; }
}
@media (max-width: 600px) {
  .top-link .lang-label { display: none; }
  .top-link .kort-label { display: inline; }
  .logo-woord { font-size: min(1.8rem, 7.5vw); }
  .logo-uil { width: 2.3rem; }
  .top-in { gap: .5rem; padding-block: .6rem .55rem; }
  .top-link { padding: .35rem .7rem; }
  .groet { margin-top: 1rem; }
  .home-niveau { flex: 1 1 100%; margin-left: 0; }
  .werkbalk { flex-direction: column; align-items: stretch; }
  .niveau { display: flex; }
  .niveau-knop { flex: 1; min-width: 0; }
  .voorlees .knop { flex: 1; }
  .weetje { flex-direction: column; align-items: flex-start; }
  .sectie-link { margin-left: 0; }
  .zorgbox { flex-direction: column; }
  html[data-kies="1"] .leeftijd-keuze { flex-direction: column; align-items: flex-start; }
  .leeftijd-knoppen .knop { flex: 1; padding-inline: .8rem; white-space: nowrap; font-size: 1.1rem; }
  .ouders-kop .tijl { display: none; }
}
@media (max-width: 639px) {
  /* compact cards on phones: picture left, title right (a list, not a wall of pictures) */
  .raster { gap: .75rem; }
  .kaart { flex-direction: row; align-items: stretch; }
  .kaart-illus { flex: none; width: 6.75rem; aspect-ratio: auto; min-height: 6.25rem; border-bottom: 0; border-right: var(--lijn-s); }
  .kaart-illus .foto-achter { display: none; }
  .kaart-illus .foto-staand .foto-pic img { object-fit: cover; object-position: var(--fx) var(--fy); }
  html.js .kaart-illus .vergelijk-staand .vergelijk-foto .foto-pic { left: 0; width: 100%; height: 100%; }
  .kaart-tekst { padding: .7rem .85rem .8rem; gap: .35rem; min-width: 0; }
  .kaart-titel, html.stijl-kort .kaart-titel, .rij .kaart-titel { font-size: 1.04rem; }
  .kaart-intro { display: none; }
  .klein-illus { width: 6.75rem; }
  .klein-intro { display: none; }
  .rij .kaart:nth-child(n+4) { display: none; } /* phones: three per earlier day, the link has the rest */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 5W+H (PLAN "quiz = 5W+H method"): one colour per W, the same in the quiz and on the nieuwskaart.
   Ink text on a tint, the strong colour only as a mark (all pairs >= 7:1 ink-on-tint). */
.w-wie { --w: #FF6A5C; --wt: #FFE0DC; }
.w-wat { --w: #5A9BFF; --wt: #DCE9FF; }
.w-waar { --w: #3DB55E; --wt: #D9F2E0; }
.w-wanneer { --w: #E0A800; --wt: #FFF4C7; }
.w-waarom { --w: #6C4DF0; --wt: #E3DDFF; }
.w-hoe { --w: #F25CB4; --wt: #FDE0F0; }
.w-label { display: inline-block; font-size: .8em; font-weight: 700; line-height: 1.2; padding: .15em .6em .15em .5em;
  border-radius: 999px; background: var(--paper); border: 2px solid var(--w); color: var(--ink); vertical-align: .1em; margin-right: .2em; white-space: nowrap; }
.w-label::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--w);
  margin-right: .35em; vertical-align: .02em; }
.nk-toon-rij { margin-top: 1.4rem; margin-bottom: 0; }
.nieuwskaart { margin: 2rem 0; border: var(--lijn); border-radius: var(--r-l); background: var(--paper); padding: 1.2rem 1.2rem 1rem; box-shadow: var(--schaduw-l); }
.nieuwskaart-kop h2 { margin: 0; font-size: 1.5rem; }
.nieuwskaart-titel { margin: .2rem 0 1rem; font-weight: 600; color: var(--ink-2); }
.nieuwskaart-vakken { display: grid; gap: .75rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 600px) { .nieuwskaart-vakken { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .nieuwskaart-vakken { grid-template-columns: repeat(3, 1fr); } .nieuwskaart { font-size: 1.12rem; } }
.nk-vak { background: var(--wt); border-radius: var(--r-m); padding: .7rem .85rem .8rem; border-top: .35rem solid var(--w); }
.nk-vak dt { margin-bottom: .3rem; }
.nk-vak .w-label { background: var(--paper); font-size: 1rem; }
.nk-vak dd { margin: 0; font-size: 1.05em; line-height: 1.45; }
.nieuwskaart-voet { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-2); }

@media print {
  .top, .voet, .werkbalk, .quiz, .meer, .woord-pop { display: none !important; }
  body { background: #fff; }
  .nieuwskaart[hidden] { display: block !important; }
  .nieuwskaart { box-shadow: none; break-inside: avoid; }
  .nk-vak, .w-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------ proefversie banner + /over (export round) */
.proefbalk { margin: 0; padding: .45rem var(--gutter); background: var(--sun); color: var(--ink); font-size: .95rem; text-align: center; line-height: 1.4; }
.proefbalk a { color: var(--ink); font-weight: 700; text-underline-offset: .2em; }
@media print { .proefbalk { display: none; } }

/* ---------------------------------------------------------------- archief + theme pages */
.thema-archief { font-weight: 700; }
.archief-maanden { max-width: var(--breed); margin: 0 auto 1.5rem; }
.archief-maanden ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.archief-maand { max-width: var(--breed); margin: 2rem auto 0; padding-top: .55rem; border-top: 3px solid var(--ink); scroll-margin-top: 1rem; }
.archief-maand h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.archief-tal { font-size: 1rem; font-weight: 400; color: var(--ink-2); }
.archief-week { margin-top: 1.25rem; }
.archief-week h3 { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--ink-2); }
.archief-dagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.archief-dagen a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 48px; padding: .6rem 1rem;
  background: var(--paper); border: var(--lijn-s); border-radius: var(--r-s); box-shadow: var(--schaduw); color: var(--ink); text-decoration: none; }
.archief-dagen a:hover { box-shadow: var(--schaduw-hover); background: var(--sun-tint); }
.archief-dag { font-weight: 700; }
.archief-n { color: var(--ink-2); font-size: .95rem; white-space: nowrap; }
.paginas { max-width: var(--breed); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; }
.paginas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pagina { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 .6rem;
  border: var(--lijn-s); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
a.pagina:hover { background: var(--sun-tint); }
.pagina.is-actief { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- search (masthead box + /zoek) */
.top-zoek { position: relative; display: flex; align-items: center; flex: 0 1 15rem; min-width: 0; }
.top-zoek-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-zoek-veld {
  width: 100%; min-width: 0; min-height: 46px; padding: .4rem 3rem .4rem 1rem; font: inherit; font-size: .98rem;
  color: var(--ink); background: var(--page); border: var(--lijn-s); border-radius: 999px; -webkit-appearance: none; appearance: none;
}
.top-zoek-veld::placeholder { color: var(--ink-2); opacity: 1; }
.top-zoek-veld:focus { background: var(--paper); }
.top-zoek-knop {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer;
}
.top-zoek-knop svg { width: 22px; height: 22px; }
.page-zoek .top-zoek { display: none; } /* the big box on the page itself */
@media (max-width: 600px) {
  /* phones: just a round magnifier (like the gear) that opens /zoek */
  .top-zoek { flex: none; margin-left: auto; }
  .top-zoek-veld { display: none; }
  .top-zoek-knop { position: static; transform: none; width: 46px; height: 46px; background: var(--paper); color: var(--ink); border: var(--lijn-s); }
  .top-zoek + .top-nav { margin-left: 0; }
}

.zoek-pagina { max-width: var(--breed); margin: 0 auto; }
.zoek-kop { margin-bottom: 1rem; }
.zoek-kop h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.zoek-groot { max-width: 46rem; }
.zoek-label { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--ink-2); }
.zoek-label em { font-style: normal; font-weight: 700; color: var(--ink); }
.zoek-rij { display: flex; gap: .6rem; }
.zoek-veld {
  flex: 1; min-width: 0; min-height: 56px; padding: .5rem 1.1rem; font: inherit; font-size: 1.25rem; color: var(--ink);
  background: var(--paper); border: var(--lijn); border-radius: var(--r-m); -webkit-appearance: none; appearance: none;
}
.zoek-veld:focus { outline: 3px solid var(--sun); outline-offset: 2px; }
.zoek-knop { min-height: 56px; }
.zoek-status { min-height: 1.5em; margin: 1.1rem 0 .9rem; font-weight: 600; color: var(--ink-2); }
.zoek-resultaten:empty { display: none; }
.zoek-hit { background: var(--sun-tint); color: inherit; padding: 0 .08em; border-radius: 3px; box-shadow: inset 0 -.18em 0 var(--sun); }
.zoek-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoek-leeg { margin-top: 1rem; }
.zoek-leeg h2 { font-size: clamp(1.35rem, 3.5vw, 1.8rem); }
.zoek-zonder-js { max-width: 46rem; margin: 1rem 0; padding: 1rem 1.2rem; background: var(--sun-tint); border: var(--lijn-s); border-radius: var(--r-m); }
html.js .zoek-zonder-js { display: none; }
html:not(.js) .zoek-groot, html:not(.js) .zoek-status { display: none; }
.zoek-themas { margin-top: 2.5rem; }
.zoek-archief { margin-top: 1rem; font-weight: 600; }
@media (max-width: 600px) { .zoek-knop span { display: none; } .zoek-knop { padding-inline: 1rem; } .zoek-veld { font-size: 1.1rem; } }

/* ---------------------------------------------------------------- video (self-hosted + YouTube facade) */
.video-blok { margin-top: 2rem; }
.video-blok h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: 0 0 .75rem; }
.video { margin: 0 0 1.5rem; max-width: 46rem; }
.video-vak { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border: var(--lijn); border-radius: var(--r-m); overflow: hidden; }
.video-vak video, .video-vak .yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ink); color: var(--ink); font: inherit; }
.yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-knop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55rem;
  max-width: calc(100% - 2rem); padding: .75rem 1.2rem .75rem .9rem; background: var(--sun); border: var(--lijn); border-radius: 999px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.2; box-shadow: 3px 3px 0 var(--ink); text-align: left;
}
.yt-knop svg { width: 1.6em; height: 1.6em; flex: none; }
.yt-facade:hover .yt-knop, .yt-facade:focus-visible .yt-knop { background: #FFE066; }
.yt-facade:focus-visible { outline: 4px solid var(--sun); outline-offset: -6px; }
.yt-noot { margin: .45rem 0 0; font-size: .9rem; color: var(--ink-2); }
.yt-geen-js { display: none; margin: .45rem 0 0; font-size: .9rem; font-weight: 600; }
html:not(.js) .yt-geen-js { display: block; }
html:not(.js) .yt-noot { display: none; }
.video-onderschrift { margin-top: .45rem; font-size: .9rem; color: var(--ink-2); }
.video-titel { font-weight: 700; color: var(--ink); }
@media (max-width: 420px) { .yt-knop { font-size: .92rem; padding: .6rem .9rem .6rem .7rem; } }
@media print { .video-blok, .top-zoek { display: none; } }

/* ------------------------------------------------------------ curriculum (PLAN "curriculum features 1-4") */
/* kennisanker: one friendly line after the story */
.anker { margin-top: 1.5rem; margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem; font-size: 1.1rem; line-height: 1.5; }
.anker-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .75rem .2rem .55rem; border: var(--lijn-s); border-radius: 999px;
  background: var(--ct); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.anker-chip svg { width: 1.2em; height: 1.2em; flex: none; }
.anker-tekst { flex: 1 1 16rem; min-width: 0; }

/* quiz skill chips, next to the W-label */
.vh-label { display: inline-block; font-size: .8em; font-weight: 700; line-height: 1.2; padding: .15em .6em .15em .45em; border-radius: 999px;
  background: var(--paper); border: 2px dashed var(--ink); color: var(--ink); vertical-align: .1em; margin-right: .2em; white-space: nowrap; }
.vh-icoon { margin-right: .3em; }
.vh-beoordelen { background: var(--sun-tint); }

/* Feit of mening? */
.fm h2 { font-size: 1.4rem; }
.fm-noot { font-size: 1.05rem; }
.fm-tik { display: none; }
.fm.is-actief .fm-tik { display: inline; }
.fm-zinnen { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.fm-zin { border: var(--lijn-s); border-radius: var(--r-m); padding: .8rem 1rem .9rem; background: var(--page); }
.fm-zin.is-goed { background: var(--goed-bg); }
.fm-zin.is-fout { background: var(--fout-bg); }
.fm-tekst { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.fm-knoppen { display: none; gap: .6rem; flex-wrap: wrap; }
.fm.is-actief .fm-knoppen { display: flex; }
.fm-knop { flex: 1 1 7rem; min-height: 52px; padding: .4rem 1rem; border: var(--lijn); border-radius: var(--r-m); background: var(--paper);
  font: inherit; font-size: 1.1rem; font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.fm-knop:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.fm-knop:disabled { cursor: default; opacity: .55; }
.fm-knop.is-juist { opacity: 1; background: var(--goed); border-color: var(--goed); color: #fff; }
.fm-knop.is-gekozen:not(.is-juist) { opacity: 1; background: var(--fout); border-color: var(--fout); color: #fff; }
.fm-feedback { margin-top: .7rem; }
.fm-fb-titel { margin: 0 0 .15rem; font-weight: 800; font-size: 1.1rem; }
.fm-zin.is-goed .fm-fb-titel { color: var(--goed); }
.fm-zin.is-fout .fm-fb-titel { color: var(--fout); }
.fm-fb-uitleg { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.fm.is-actief .fm-antwoord { display: none; }
.fm-antwoord summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.fm-antwoord p { margin: .2rem 0 0; font-size: 1.02rem; line-height: 1.5; }
.fm-score { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px dashed var(--ink-2); }
.fm-score[hidden] { display: none; }

/* Voor de klas (teachers): closed, small, clearly not for the child */
.klas { margin-top: 2rem; margin-bottom: 0; border: 2px dashed var(--ink-2); border-radius: var(--r-m); background: var(--paper); font-size: .98rem; }
.klas summary { cursor: pointer; padding: .7rem 1rem; min-height: 48px; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.klas-titel { font-weight: 800; }
.klas-sub { font-size: .85rem; color: var(--ink-2); }
.klas-in { padding: 0 1rem 1rem; }
.klas-in h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.klas-in p { margin: 0 0 .4rem; line-height: 1.5; }
.klas-doelen, .klas-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; line-height: 1.45; }
.klas-code { display: inline-block; font-weight: 700; font-size: .85rem; padding: 0 .45rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--sky); white-space: nowrap; color: var(--ink); }
a.klas-code { text-decoration: none; min-height: 28px; }
a.klas-code:hover { background: var(--sun-tint); }
.klas-vak { font-size: .85rem; color: var(--ink-2); }
.klas-noot { font-size: .88rem; color: var(--ink-2); }
@media print { .fm-knoppen, .fm-score, .klas { display: none !important; } }

/* /leerkrachten + /doel */
.vakken { display: grid; gap: 1.25rem; }
.vak h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.doelen-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.doelen-lijst li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .35rem 0; border-bottom: 1px solid var(--regel); }
.doelen-lijst .doel-label { flex: 1 1 14rem; min-width: 0; }
.doel-n { font-size: .9rem; white-space: nowrap; }
.doel-n a { font-weight: 700; text-underline-offset: .18em; min-height: 32px; display: inline-flex; align-items: center; }
.doel-geen { color: var(--ink-2); }
.doel-tekst { font-style: italic; }
.fm-score > div { flex: 1 1 14rem; min-width: 0; }
/* flex summaries lose the native triangle: draw one */
.fm-antwoord summary, .klas summary { list-style: none; }
.fm-antwoord summary::-webkit-details-marker, .klas summary::-webkit-details-marker { display: none; }
.fm-antwoord summary::before, .klas summary::before { content: ""; flex: none; width: 0; height: 0; margin-right: .1rem;
  border-style: solid; border-width: .35em 0 .35em .55em; border-color: transparent transparent transparent currentColor; transition: transform .15s ease; }
.fm-antwoord[open] > summary::before, .klas[open] > summary::before { transform: rotate(90deg); }
/* "Feit, mening of bewering?" (lang): the three definitions + three buttons (Fix round final C) */
.fm-uitleg { margin: 0 0 .5rem; padding-left: 1.2rem; font-size: 1.05rem; line-height: 1.5; }
.fm-uitleg li { margin: .1rem 0; }
.fm-knop { min-width: 0; }

/* ---------------------------------------------------------------- Digibord: a calm page for the class
   (promised on /leerkrachten: "grote letters, rustige pagina"). Big letters come from html[data-size="3"];
   here the clutter goes: banner, search, theme bar, age picker, "Meer nieuws", theme chips, the drag hint.
   The gear stays (to switch back). One column, more air between paragraphs. The article itself keeps its
   AI line, so the banner's AI note is not lost. */
html[data-size="3"] :is(.proefbalk, .top-zoek, .themabalk, .top-link, .top-slogan, .leeftijd-keuze, .meer,
  .vergelijk-hint-uitleg) { display: none !important; }
html[data-size="3"] .top-in { padding-block: .6rem; }
html[data-size="3"] .verhaal-tekst p, html[data-size="3"] .verhaal-intro { line-height: 1.7; margin-bottom: 1.4em; }
html[data-size="3"] .verhaal > * + * { margin-top: 1.6rem; }
html[data-size="3"] .kader, html[data-size="3"] .quiz, html[data-size="3"] .nieuwskaart { margin-block: 2.4rem; }
html[data-size="3"] .raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }