/* ==========================================================================
   a força — proefvormgeving 2026, derde versie (10 november 2026)
   Laadt NA style.css op pagina's met "theme": "2026" (body.t2026).

   Kleur: crème met diep aubergine (de kleur van de bevindingenpagina) voor
   tekst en voettekst; het goud van het logo als enige accent. Donker is
   dezelfde aubergine als achtergrond, met warm crème voor tekst en licht goud
   voor knoppen en links. Standaard licht; de schakelaar in de topbar onthoudt
   de keuze van de bezoeker.
   Vorm: bento-kaarten per kolom, Fraunces (meegeleverd) voor koppen, Lato voor
   tekst, zachte micro-interacties, contrast ≥ 4,5:1 in beide modi.
   ========================================================================== */

.t2026 {
  /* licht */
  --cream:   #FDFBF7;  --card: #F4EFEA;  --card-2: #ECE7EE;  --card-3: #ffffff;
  --green:   #1F1923;  --green-s: rgba(31,25,35,.72);          /* aubergine: tekst */
  --wine:    #5A4466;  --wine-d: #3E2E48;                       /* paars voor tekstlinks en accenten */
  --btn:     #2E2733;  --btn-h: #1A161C;  --btn-ink: #F4EFEA;   /* knoppen in de aubergine van de donkere modus */
  --gold:    #A8803F;
  --line:    rgba(31,25,35,.12);
  --lift:    0 18px 40px rgba(31,25,35,.08);
  --overlay-a: rgba(31,25,35,.08); --overlay-b: rgba(31,25,35,.58);
  --foot:    #1F1923;  --foot-ink: #F4EFEA;
  --r: 22px;

  --ink: var(--green); --ink-soft: var(--green-s);
  --accent: var(--green); --accent-d: var(--wine);
  --link: var(--wine); --link-h: var(--wine-d);
  --paper: var(--cream); --white: var(--card-3);
  --shadow: none; --shadow-h: var(--lift);
  --radius: 14px; --divider-h: 0px;
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --head: 'Fraunces', Georgia, 'Times New Roman', serif;

  background: var(--cream); color: var(--green); font-family: var(--sans);
  transition: background-color .3s ease, color .3s ease;
}

/* donker: alleen als de bezoeker het kiest (standaard is licht) */
.t2026[data-theme="donker"] {
  --cream: #1A161C; --card: #221D25; --card-2: #28222C; --card-3: #2E2733;
  --green: #ECE6EE; --green-s: rgba(236,230,238,.70);
  --wine: #C9A25C; --wine-d: #DDB974;
  --btn: #C9A25C; --btn-h: #DDB974; --btn-ink: #1A161C;
  --gold: #C9A25C;
  --line: rgba(236,230,238,.12);
  --lift: 0 18px 40px rgba(0,0,0,.40);
  --overlay-a: rgba(26,22,28,.10); --overlay-b: rgba(26,22,28,.74);
  --foot: #120F14; --foot-ink: #ECE6EE;
}

/* ---------- letters: groot en rustig ---------- */
.t2026 h1, .t2026 h2, .t2026 h3 {
  font-family: var(--head); font-weight: 500; color: var(--green); font-style: normal;
  letter-spacing: -.012em; text-wrap: balance; font-variation-settings: 'opsz' 96;
}
.t2026 h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; margin-bottom: .4em; }
.t2026 h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; }
.t2026 h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.2; font-variation-settings: 'opsz' 40; }
.t2026 h4 { font-family: var(--sans); font-weight: 700; color: var(--green); }
.t2026 h5, .t2026 h6 { color: var(--green-s); }
.t2026 p, .t2026 li { color: var(--green); }
.t2026 .lead { color: var(--green); font-size: clamp(18px, 1.9vw, 22px); }
.t2026 strong { color: var(--green); }
.t2026 em { color: var(--green-s); }
.t2026 a { color: var(--wine); font-weight: 700; text-underline-offset: 3px; }
.t2026 a:hover, .t2026 a:focus-visible { color: var(--wine-d); }
.t2026 :focus-visible { outline-color: var(--wine); }
.t2026 blockquote { border-left-color: var(--wine); color: var(--green-s); }
.t2026 hr { border-top-color: var(--line); }
.t2026 th { background: var(--card-2); color: var(--green); }
.t2026 th, .t2026 td { border-color: var(--line); }

/* ---------- topbar, menu, kruimelpad ---------- */
.t2026 .topbar { background: var(--cream); color: var(--green-s); border-bottom: 1px solid var(--line); }
.t2026 .topbar a { color: var(--green-s); }
.t2026 .topbar a:hover { color: var(--wine); text-decoration: none; }
.t2026 .langs { border-left-color: var(--line); }
.t2026 .langs a { color: var(--green-s); font-family: var(--sans); }
.t2026 .langs a:hover, .t2026 .langs a:focus-visible { background: var(--card); }
.t2026 .langs a[aria-current="true"] { color: var(--btn-ink); background: var(--btn); }
.t2026 .kleur {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 10px;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--green-s); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.t2026 .kleur svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2026 .kleur:hover { background: var(--card); color: var(--wine); transform: rotate(15deg); }
.t2026 .kleur .zon { display: none; }
.t2026[data-theme="donker"] .kleur .zon { display: block; }
.t2026[data-theme="donker"] .kleur .maan { display: none; }
.t2026 .site-header { background: var(--cream); box-shadow: 0 1px 0 var(--line); }
.t2026 .nav > ul > li > a, .t2026 .nav > ul > li > button { font: 700 14px/1.2 var(--sans); color: var(--green); letter-spacing: 0; padding: 12px 10px; white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 981px) { .t2026 .nav > ul > li > a, .t2026 .nav > ul > li > button { padding: 12px 7px; font-size: 13.5px; } }
.t2026 .nav > ul > li > a:hover, .t2026 .nav > ul > li > button:hover { color: var(--wine); }
.t2026 .nav a[aria-current="page"], .t2026 .nav li.is-active > a { color: var(--wine); }
.t2026 .nav a[aria-current="page"]::after, .t2026 .nav li.is-active > a::after { background: var(--wine); }
.t2026 .nav .sub { background: var(--card-3); border-top-color: var(--wine); border-radius: 0 0 14px 14px; box-shadow: var(--lift); }
.t2026 .nav .sub a { color: var(--green); }
.t2026 .nav .sub a:hover, .t2026 .nav .sub a:focus-visible { background: var(--card); color: var(--wine); }
.t2026 .burger span { background: var(--green); }
@media (max-width: 980px) {
  .t2026 .nav { background: var(--cream); }
  .t2026 .nav .sub { background: var(--card); box-shadow: none; border-radius: 0; }
}
.t2026 .crumbs { background: var(--cream); border-bottom: 0; }
.t2026 .crumbs a, .t2026 .crumbs li { color: var(--green-s); }
.t2026 .crumbs [aria-current="page"] { color: var(--green); }
.t2026 .crumbs li + li::before { color: var(--wine); }
.t2026 .skip { background: var(--btn); color: var(--btn-ink); }

/* ---------- foto bovenaan: grote afgeronde kaart ---------- */
.t2026 .hero {
  width: calc(100% - 48px); max-width: var(--wrap); margin: 18px auto 0;
  border-radius: var(--r); min-height: clamp(260px, 32vw, 420px);   /* lager dan de eerste proef; een foto zonder tekst hoeft het scherm niet te vullen */
}
.t2026 .hero::before { background: linear-gradient(180deg, var(--overlay-a) 0%, var(--overlay-b) 100%); border-radius: var(--r); }
.t2026 .hero--divtop .hero__inner, .t2026 .hero--divbot .hero__inner { padding: 48px 24px; }
.t2026 .hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.t2026 .hero p, .t2026 .hero .lead, .t2026 .hero em { color: #fff; }
.t2026 .hero--plain { background: transparent; min-height: 0; }
.t2026 .hero--plain h1, .t2026 .hero--plain p, .t2026 .hero--plain .lead { color: var(--green); text-shadow: none; }
.t2026 .band__divider { display: none; }

/* ---------- bento: de band verdwijnt, elke kolom wordt een kaart ---------- */
.t2026 main > .band {
  width: calc(100% - 48px); max-width: var(--wrap); margin: 22px auto 0;
  background: transparent; border-radius: 0;
}
.t2026 main > .band .band__inner,
.t2026 main > .band.band--divtop .band__inner,
.t2026 main > .band.band--divbot .band__inner,
.t2026 main > .band--white .band__inner { padding: 0; }
.t2026 main > .band--white { background: transparent; border: 0; }
.t2026 .row { gap: 22px; align-items: stretch; }
.t2026 .row + .row { margin-top: 22px; }
.t2026 .row > .col {
  background: var(--card); border-radius: var(--r); padding: 40px 40px;
  display: flex; flex-direction: column;   /* de knop staat in elke kaart onderaan, op gelijke hoogte */
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
.t2026 .row > .col:nth-child(even) { background: var(--card-2); }
.t2026 .row--4_4 > .col { padding: 48px clamp(28px, 5vw, 72px); }
/* een rij met één gevulde kolom (de andere was leeg) wordt één brede kaart */
.t2026 .row > .col:only-child { grid-column: 1 / -1; }
.t2026 .row > .col > .btnwrap { margin-top: auto; padding-top: 1.2em; }
/* twee kaarten in een rij van drie (de middelste was leeg) vullen samen de breedte */
.t2026 .row--1_3:has(> .col:nth-child(2):last-child) { grid-template-columns: 2fr 1fr; }
/* een kolom met alleen een foto: geen kaart, de foto ís de kaart */
.t2026 .row > .col:has(> .figure:only-child) { background: transparent; padding: 0; display: flex; }
.t2026 .row > .col:has(> .figure:only-child) .figure { width: 100%; display: flex; }
.t2026 .row > .col:has(> .figure:only-child) .figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); min-height: 100%; }
/* zachte micro-interactie, alleen op kaarten waar je iets kunt doen */
@media (hover: hover) {
  .t2026 .row > .col:has(a):hover { transform: translateY(-3px); box-shadow: var(--lift); }
}
/* de kop van een sectie staat los op de achtergrond, groot en gecentreerd */
.t2026 main > .band--accent { margin-top: 64px; }
.t2026 main > .band--accent + .band { margin-top: 24px; }
.t2026 main > .band--accent .row > .col,
.t2026 main > .band--accent .row--4_4 > .col { background: transparent; padding: 0 24px; box-shadow: none; transform: none; }
.t2026 .band--accent { --ink: var(--green); --ink-soft: var(--green-s); --link: var(--wine); --link-h: var(--wine-d); }
.t2026 .band--accent h1, .t2026 .band--accent h2, .t2026 .band--accent h3, .t2026 .band--accent h4,
.t2026 .band--accent p, .t2026 .band--accent li, .t2026 .band--accent strong { color: var(--green); }
.t2026 .band--accent h2 { color: var(--green); font-size: clamp(34px, 4.2vw, 56px); }
.t2026 .band--accent a { color: var(--wine); text-decoration: none; }
.t2026 .band--accent .lead { color: var(--green); }
/* in een kaart staan koppen links; alleen de losse sectiekoppen zijn gecentreerd */
.t2026 main > .band:not(.band--accent) .row--4_4 > .col > h2 { text-align: left; }

/* een volle foto als kaart */
.t2026 main > .band--image { border-radius: var(--r); background-size: cover; --img-pad: 130px; }
.t2026 main > .band--image::before { border-radius: var(--r); background: linear-gradient(180deg, var(--overlay-a), rgba(18,29,26,.30)); }
.t2026 main > .band--image .band__inner,
.t2026 main > .band--image.band--divtop .band__inner,
.t2026 main > .band--image.band--divbot .band__inner { padding: var(--img-pad) 0; }

/* ---------- binnen de kaarten ---------- */
.t2026 .figure img { border-radius: 16px; box-shadow: none; }
.t2026 .figure figcaption { color: var(--green-s); }
.t2026 .btn {
  font: 700 15px/1.3 var(--sans); letter-spacing: .01em;
  color: var(--btn-ink); background: var(--btn); border: 2px solid var(--btn); border-radius: 999px;
  padding: 14px 30px; box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.t2026 .btn:hover, .t2026 .btn:focus-visible { background: var(--btn-h); border-color: var(--btn-h); color: var(--btn-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,25,35,.22); }
.t2026 .btn--onimage { background: rgba(253,251,247,.14); border-color: rgba(253,251,247,.9); color: #fff; backdrop-filter: blur(6px); }
.t2026 .btn--onimage:hover, .t2026 .btn--onimage:focus-visible { background: #FDFBF7; color: #1F1923; border-color: #FDFBF7; box-shadow: none; }
.t2026 .cta, .t2026 .quote { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.t2026 .quote__body { color: var(--green); font-family: var(--head); font-size: 19px; line-height: 1.6; font-variation-settings: 'opsz' 20; }
.t2026 .quote__author { font-family: var(--sans); color: var(--wine); }
.t2026 .quote__meta { color: var(--green-s); }
.t2026 .toggle { border-bottom-color: var(--line); }
.t2026 .toggle > summary { font: 700 17px/1.5 var(--sans); color: var(--green); transition: color .2s ease; }
.t2026 .toggle > summary::after { border-color: var(--wine); }
.t2026 .toggle > summary:hover { color: var(--wine); }
.t2026 .toggle__body { color: var(--green); }
.t2026 .cta-icon { color: var(--wine); align-self: center; margin: auto; }
.t2026 .cta-icon svg { width: 160px; height: 160px; }
.t2026 .cta-icon-wrap { height: 100%; display: grid; place-items: center; }
.t2026 .cta-icon__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t2026 .cta-icon__label { font: 700 14px/1.3 var(--sans); color: var(--green-s); }
.t2026 .cta-icon:hover, .t2026 .cta-icon:focus-visible { color: var(--wine-d); background: rgba(90,68,102,.10); }
.t2026 .embed-gate__card { border-radius: 16px; background: var(--card-3); color: var(--green); }
.t2026 .byline { border-top: 0; width: calc(100% - 48px); max-width: var(--wrap); margin: 10px auto 0; color: var(--green-s); }
.t2026 .byline__who, .t2026 .byline p { color: var(--green-s); }
.t2026 .byline__avatar { background: var(--card); }
.t2026 .lang-note { background: var(--card); color: var(--green); border-radius: 14px; }
.t2026 mark.todo { background: #f3e2a9; color: #3b3300; }
.t2026 img { transition: filter .3s ease; }
.t2026[data-theme="donker"] .figure img { filter: brightness(.94); }

/* ---------- voettekst ---------- */
.t2026 .site-footer { background: var(--foot); color: var(--foot-ink); margin-top: 72px; }
.t2026 .site-footer a, .t2026 .site-footer p, .t2026 .site-footer h2, .t2026 .site-footer li { color: var(--foot-ink); }
.t2026 .site-footer h2 { font-family: var(--head); font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.t2026 .site-footer a { opacity: .85; }
.t2026 .site-footer a:hover { opacity: 1; }
.t2026 .footer-social a { border-color: rgba(253,251,247,.35); }
.t2026 .footer-social a:hover { background: var(--foot-ink); color: var(--foot); }
.t2026 .footer-bottom { border-top-color: rgba(253,251,247,.18); }
.t2026 .footer-crkbo a { border-radius: 14px; }
.t2026 .cc-badge, .t2026 .footer-crkbo a.cc-badge { border-radius: 12px; padding: 10px 14px; font-weight: 400; }
.t2026 .cc-badge__s { color: #6b7280; }
.t2026 .cc-badge__n { color: #1f2d27; }

@media (max-width: 767px) {
  .t2026 .cta-icon svg { width: 110px; height: 110px; }
  .t2026 .hero, .t2026 main > .band, .t2026 .byline { width: calc(100% - 24px); }
  .t2026 .row > .col, .t2026 .row--4_4 > .col { padding: 28px 22px; }
  .t2026 .row, .t2026 .row + .row { gap: 14px; margin-top: 14px; }
  .t2026 main > .band { margin-top: 14px; }
  .t2026 h1 { font-size: clamp(34px, 9vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .t2026 .row > .col:has(a):hover { transform: none; }
}