/* Franz Liszt Kring – huisstijl
   Kleuren afgeleid van het schilderij van Guus Ong */
:root {
  --inkt: #141c33;        /* diep nachtblauw (haar, achtergrond) */
  --nacht: #1f2b52;
  --ultra: #33489a;       /* ultramarijn uit het schilderij */
  --oker: #c8913a;        /* warm oker (huid in licht) */
  --oker-licht: #e9c98f;
  --rood: #a5432f;        /* warm rood accent */
  --papier: #f7f2e8;      /* vergeeld papier, zoals de brief */
  --papier-2: #efe6d6;
  --tekst: #232633;
  --grijs: #5f6475;
  --wit: #fffdf8;
  --rand: rgba(20, 28, 51, .12);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breed: 1180px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tekst); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ultra); text-underline-offset: 3px; }
a:hover { color: var(--rood); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; color: var(--inkt); }
h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(var(--breed), 100% - 32px); margin-inline: auto; }

.testbalk { background: var(--rood); color: #fff; text-align: center; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px; }

/* Knoppen */
.knop { display: inline-block; background: var(--oker); color: var(--inkt); font-weight: 600; text-decoration: none; padding: .75em 1.4em; border-radius: 999px; border: 2px solid var(--oker); transition: background .2s, color .2s, transform .2s; }
.knop:hover { background: var(--oker-licht); border-color: var(--oker-licht); color: var(--inkt); transform: translateY(-1px); }
.knop-licht { background: transparent; color: var(--inkt); border-color: rgba(20,28,51,.25); }
.knop-licht:hover { background: var(--wit); border-color: var(--inkt); }
.knop-klein { padding: .45em 1.1em; }
.boventitel { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rood); margin-bottom: .6em; }

/* Kop */
.kop { background: var(--inkt); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.kop-in { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.logo { color: #fff; display: block; }
.logo-beeld { display: block; width: 190px; aspect-ratio: 296.5 / 104.5; background: currentColor;
  -webkit-mask: url(../img/logo-liszt-kring.svg) no-repeat center / contain; mask: url(../img/logo-liszt-kring.svg) no-repeat center / contain; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a { color: #e7e9f2; text-decoration: none; font-size: .95rem; font-weight: 500; }
.menu a:hover { color: var(--oker-licht); }
.menu a.knop { color: var(--inkt); }
.menu-knop { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-knop span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: transform .2s, opacity .2s; }

/* Opening */
.held { background:
    radial-gradient(1200px 600px at 85% 30%, rgba(51,72,154,.55), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(165,67,47,.35), transparent 60%),
    var(--inkt);
  color: #e9ebf4; padding: 64px 0 80px; overflow: hidden; }
.held-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.held h1 { color: #fff; font-size: clamp(3.2rem, 7vw, 5.6rem); margin-bottom: .2em; letter-spacing: -.01em; }
.held .boventitel { color: var(--oker-licht); }
.held .intro { font-size: 1.15rem; max-width: 34em; color: #d3d7e6; margin-bottom: 36px; }

.concert-kaart { display: grid; grid-template-columns: 150px 1fr; gap: 22px; background: var(--papier); color: var(--tekst); border-radius: var(--radius); padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); border-top: 4px solid var(--oker); }
.concert-foto { width: 150px; height: 100%; min-height: 190px; object-fit: cover; border-radius: 10px; }
.concert-kaart .label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rood); margin: 0 0 .3em; }
.concert-kaart h2 { font-size: 1.75rem; margin-bottom: .15em; }
.concert-wie { margin-bottom: .7em; color: var(--grijs); }
.data { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.data li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; font-size: .95rem; border-left: 3px solid var(--oker); padding-left: 10px; }
.data b { font-weight: 600; color: var(--inkt); }
.data span { color: var(--grijs); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* Uitsnede van het schilderij: gezicht, smal en hoog */
.schilderij { margin: 0; position: relative; justify-self: end; width: min(100%, 380px); }
.schilderij img { width: 100%; aspect-ratio: 5 / 8; object-fit: cover; object-position: 64% 45%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.schilderij figcaption { font-size: .78rem; color: #aab0c6; margin-top: 14px; }

.marmer { height: 18px; background: url(../img/marmer.jpg) center / cover; }

/* Secties */
section { padding: 88px 0; }
.sectie-kop { max-width: 640px; margin-bottom: 40px; }
.sectie-kop.rij { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.sectie-kop p:last-child { color: var(--grijs); font-size: 1.08rem; }
.meer { font-weight: 600; text-decoration: none; white-space: nowrap; }
.meer::after { content: " →"; }

/* Luisteren */
.luister { background: var(--wit); }
.sporen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.spoor { position: relative; background: var(--papier); border-radius: var(--radius); padding: 22px 20px 26px; border: 1px solid var(--rand); display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, box-shadow .2s; overflow: hidden; }
.spoor:hover { border-color: var(--oker); }
.spoor.speelt { border-color: var(--ultra); box-shadow: 0 10px 30px rgba(51,72,154,.18); background: #fff; }
.spoor h3 { font-size: 1.3rem; margin-bottom: .3em; }
.spoor p { font-size: .92rem; color: var(--grijs); margin: 0; }
.spoor .genre { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rood); margin-bottom: .4em; }
.speel { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--inkt); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; }
.speel:hover { background: var(--ultra); transform: scale(1.05); }
.speel i { width: 0; height: 0; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.speelt .speel i { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.laadt .speel i { border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; width: 22px; height: 22px; margin: 0; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.voortgang { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; }
.voortgang span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ultra), var(--oker)); }
.bron { font-size: .78rem; color: var(--grijs); margin-top: 22px; max-width: 900px; }

/* Nieuws */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kaart { background: var(--wit); border-radius: var(--radius); padding: 28px; border-top: 3px solid var(--ultra); box-shadow: 0 1px 0 var(--rand); }
.kaart:nth-child(2) { border-top-color: var(--oker); }
.kaart:nth-child(3) { border-top-color: var(--rood); }
.kaart h3 a { color: var(--inkt); text-decoration: none; }
.kaart h3 a:hover { color: var(--ultra); }
.kaart p { color: var(--grijs); font-size: .97rem; }
.datum { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6em; }

/* Brief */
.brief { background: var(--papier-2); }
.brief-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.brief-beeld { margin: 0; }
.brief-beeld img { max-height: 620px; width: auto; margin-inline: auto; box-shadow: 0 20px 50px rgba(60,40,10,.25); transform: rotate(-1.5deg); }
.brief-tekst h2 { font-style: italic; }
blockquote { margin: 1.4em 0; padding: 0 0 0 22px; border-left: 3px solid var(--oker); font-family: var(--serif); font-size: 1.4rem; line-height: 1.4; color: var(--inkt); font-style: italic; }

/* Lezen */
.lezen-in { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 28px; align-items: start; }
.uitgelicht { display: grid; grid-template-columns: 150px 1fr; gap: 18px; text-decoration: none; color: var(--tekst); align-items: start; }
.uitgelicht img { border-radius: 4px; box-shadow: 0 12px 30px rgba(20,28,51,.25); transition: transform .25s; }
.uitgelicht:hover img { transform: translateY(-4px) rotate(-1deg); }
.uitgelicht b { display: block; font-family: var(--serif); font-size: 1.4rem; color: var(--inkt); margin-bottom: .3em; }
.uitgelicht span { font-size: .95rem; color: var(--grijs); }
.stapel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; border-radius: var(--radius); background: url(../img/marmer.jpg) center / cover; }
.stapel img { border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.35); aspect-ratio: 480 / 676; object-fit: cover; transition: transform .2s; }
.stapel a:hover img { transform: scale(1.04); }

/* Steun */
.steun { background: var(--nacht); color: #dfe3f0; }
.steun h2 { color: #fff; }
.steun .boventitel { color: var(--oker-licht); }
.steun-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.voordelen { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.voordelen li { background: rgba(255,255,255,.06); border-left: 3px solid var(--oker); padding: 16px 20px; border-radius: 8px; font-size: .95rem; }
.voordelen b { display: block; color: #fff; font-weight: 600; }

/* Voet */
.voet { background: var(--inkt); color: #b9bfd3; font-size: .92rem; padding: 56px 0 24px; }
.voet-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.voet h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); margin-bottom: 1em; }
.voet a { display: block; color: #d9ddea; text-decoration: none; margin-bottom: .45em; }
.voet a:hover { color: #fff; }
.voet-logo { color: #fff; width: 170px; margin-bottom: 14px; }
.voet-onder { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 18px; font-size: .8rem; }

/* ---------- Subpagina's ---------- */
.menu a[aria-current="page"] { color: var(--oker-licht); }
.pagina-kop { background:
    radial-gradient(900px 400px at 90% 0%, rgba(51,72,154,.5), transparent 60%),
    var(--inkt);
  color: #d3d7e6; padding: 56px 0 48px; position: relative; overflow: hidden; }
.pagina-kop h1 { color: #fff; font-size: clamp(2.6rem, 5.5vw, 4rem); margin-bottom: .15em; }
.pagina-kop .boventitel { color: var(--oker-licht); }
.pagina-kop p.intro { font-size: 1.12rem; max-width: 40em; margin: 0; }
.pagina-kop .uitsnede { position: absolute; right: max(16px, calc((100% - var(--breed)) / 2)); top: 0; bottom: 0; width: 220px;
  background: url(../img/schilderij-guus-ong.jpg) 64% 40% / cover; opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); }
.inhoud { padding: 64px 0 88px; }
.smal { max-width: 780px; }
.tussenkop { font-size: 1.9rem; margin: 0 0 24px; display: flex; align-items: baseline; gap: 14px; }
.tussenkop small { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--grijs); }
.noot { font-size: .85rem; color: var(--grijs); border-left: 3px solid var(--oker); padding: 6px 0 6px 14px; margin-top: 40px; }

/* Agenda */
.agenda-item { display: grid; grid-template-columns: 110px 1fr 300px; gap: 32px; background: var(--wit); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; border-top: 4px solid var(--oker); box-shadow: 0 1px 0 var(--rand); }
.agenda-item.elders { border-top-color: var(--ultra); grid-template-columns: 110px 1fr; }
.datumblok { text-align: center; background: var(--inkt); color: #fff; border-radius: 10px; padding: 14px 6px; align-self: start; }
.datumblok b { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.datumblok span { display: block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); margin-top: 4px; }
.datumblok small { display: block; font-size: .75rem; color: #aab0c6; margin-top: 6px; }
.datums { display: grid; gap: 10px; align-content: start; }
.agenda-item h2 { font-size: 2rem; margin-bottom: .2em; }
.agenda-item .wie { color: var(--grijs); margin-bottom: 1em; }
.feiten { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .95rem; margin: 0 0 1.2em; }
.feiten dt { font-weight: 600; color: var(--inkt); }
.feiten dd { margin: 0; color: var(--grijs); }
.programma { list-style: none; padding: 0; margin: 0 0 1.2em; border-top: 1px solid var(--rand); }
.programma li { padding: 8px 0; border-bottom: 1px solid var(--rand); font-size: .95rem; }
.programma em { color: var(--grijs); }
.agenda-foto img { border-radius: 10px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.agenda-foto figcaption { font-size: .78rem; color: var(--grijs); margin-top: 8px; }
.label-elders { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: #e6e9f5; color: var(--ultra); padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; }

/* Terugblik */
.jaar { display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--rand); }
.jaar:first-child { border-top: 0; padding-top: 0; }
.jaar > h2 { font-size: 3rem; color: var(--oker); position: sticky; top: 100px; align-self: start; }
.tijdlijn { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.tijdlijn li { background: var(--wit); border-radius: var(--radius); padding: 22px 26px; border-left: 4px solid var(--ultra); }
.tijdlijn li:nth-child(3n+2) { border-left-color: var(--oker); }
.tijdlijn li:nth-child(3n+3) { border-left-color: var(--rood); }
.tijdlijn time { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rood); font-weight: 600; }
.tijdlijn h3 { margin: .25em 0 .35em; }
.tijdlijn p { margin: 0; color: var(--grijs); font-size: .97rem; }
.tijdlijn .plek { font-size: .88rem; color: var(--tekst); margin-bottom: .4em; }

/* Nieuws */
.nieuws-lijst { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.bericht { background: var(--wit); border-radius: var(--radius); padding: 36px 40px; margin-bottom: 28px; scroll-margin-top: 100px; }
.bericht h2 { font-size: 2.1rem; }
.bericht .datum { color: var(--rood); font-weight: 600; }
.bericht .lead { font-size: 1.12rem; color: var(--inkt); }
.bericht figure { margin: 1.4em 0; }
.bericht figure img { border-radius: 8px; }
.bericht figcaption { font-size: .8rem; color: var(--grijs); margin-top: 6px; }
.bericht ul { padding-left: 1.2em; }
.bericht li { margin-bottom: .3em; }
.zijbalk { position: sticky; top: 100px; display: grid; gap: 20px; }
.zijbalk section { padding: 24px; background: var(--papier-2); border-radius: var(--radius); }
.zijbalk h3 { font-size: 1.3rem; }
.zijbalk ul { list-style: none; padding: 0; margin: 0; }
.zijbalk li { padding: 7px 0; border-bottom: 1px solid var(--rand); font-size: .92rem; }
.zijbalk li a { text-decoration: none; color: var(--inkt); }
.zijbalk li a:hover { color: var(--ultra); }

/* Over ons, Steun ons, Contact */
.twee-kol { display: grid; grid-template-columns: 1.3fr .9fr; gap: 56px; align-items: start; }
.lopend h2 { font-size: 2rem; margin-top: 1.2em; }
.lopend h2:first-child, .lopend .boventitel + h2 { margin-top: 0; }
.vinkjes { list-style: none; padding: 0; margin: 0 0 1.4em; }
.vinkjes li { position: relative; padding: 0 0 12px 30px; color: var(--grijs); }
.vinkjes li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--oker); }
.vinkjes b { color: var(--inkt); }
.kader-blok { background: var(--wit); border-radius: var(--radius); padding: 28px; border-top: 4px solid var(--oker); position: sticky; top: 100px; }
.kader-blok h3 { font-size: 1.35rem; }
.kader-blok p { font-size: .95rem; color: var(--grijs); }
.namen, .documenten { list-style: none; padding: 0; margin: 0; }
.namen li, .documenten li { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.documenten a { font-weight: 500; text-decoration: none; }
.documenten a::before { content: "PDF"; font-size: .65rem; font-weight: 600; letter-spacing: .08em; background: var(--rood); color: #fff; border-radius: 4px; padding: 2px 6px; margin-right: 10px; vertical-align: 2px; }
.bestuur-sectie { background: var(--papier-2); }
.bestuur { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.bestuur li { background: var(--wit); border-radius: var(--radius); padding: 22px 24px; border-left: 4px solid var(--ultra); }
.bestuur li.vacature { border-left-color: var(--rood); background: transparent; border: 2px dashed rgba(165,67,47,.4); }
.bestuur b { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--inkt); }
.bestuur span { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rood); margin: 2px 0 8px; }
.bestuur p { margin: 0; font-size: .93rem; color: var(--grijs); }
.linklijst { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; }
.linklijst li { padding: 12px 0; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; gap: 12px; }
.linklijst a { font-weight: 500; text-decoration: none; }
.linklijst span { color: var(--grijs); font-size: .88rem; }
.voordelen-licht { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: 16px; }
.voordelen-licht li { display: grid; grid-template-columns: 70px 1fr; gap: 18px; align-items: start; background: var(--wit); border-radius: var(--radius); padding: 16px; color: var(--grijs); font-size: .95rem; }
.voordelen-licht img { border-radius: 3px; box-shadow: 0 4px 12px rgba(20,28,51,.2); }
.voordelen-licht b { display: block; color: var(--inkt); font-size: 1.02rem; }
.voordeel-icoon { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--oker-licht); font-family: var(--serif); font-size: 2rem; }

.formulier { background: var(--wit); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 0 var(--rand); border-top: 4px solid var(--ultra); }
.formulier h2 { font-size: 2rem; }
.formulier fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.formulier legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--inkt); }
.veld { margin-bottom: 16px; }
.veld label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--inkt); }
.veld small { font-weight: 400; color: var(--grijs); }
.veld input, .veld select, .veld textarea { width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px; border: 1px solid rgba(20,28,51,.22); border-radius: 10px; background: #fff; color: var(--tekst); transition: border-color .15s, box-shadow .15s; }
.veld textarea { resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--ultra); box-shadow: 0 0 0 3px rgba(51,72,154,.15); }
[aria-invalid] { border-color: var(--rood) !important; box-shadow: 0 0 0 3px rgba(165,67,47,.12) !important; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.extra-reserveren { background: var(--papier); border-radius: 10px; padding: 16px !important; }
.bedragen { display: flex; flex-wrap: wrap; gap: 10px; }
.bedragen legend { width: 100%; }
.bedragen label { cursor: pointer; }
.bedragen input { position: absolute; opacity: 0; }
.bedragen span { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(20,28,51,.22); font-weight: 600; transition: background .15s, color .15s; }
.bedragen input:checked + span { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.bedragen input:focus-visible + span { outline: 3px solid var(--oker); outline-offset: 2px; }
.vinkje { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--grijs); margin: 6px 0 20px; }
.vinkje input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--inkt); }
.vinkje input[aria-invalid] { outline: 2px solid var(--rood); }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier .knop { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.formulier .knop:disabled { opacity: .6; cursor: wait; }
.formulier-melding { margin: 14px 0 0; font-weight: 500; min-height: 1.4em; }
.formulier-melding.goed { color: #2d6a3e; }
.formulier-melding.fout { color: var(--rood); }
.formulier .klein { font-size: .82rem; color: var(--grijs); margin-top: 16px; }
@media (max-width: 980px) {
  .twee-kol { grid-template-columns: 1fr; gap: 40px; }
  .kader-blok { position: static; }
}
@media (max-width: 560px) {
  .formulier { padding: 22px; }
  .veld-rij { grid-template-columns: 1fr; gap: 0; }
}

.pagina-404 { min-height: 62vh; display: flex; align-items: center; }

/* Tekstpagina's (privacy, disclaimer) */
.tekst h2 { font-size: 1.7rem; margin-top: 1.6em; }
.tekst ul { padding-left: 1.2em; color: var(--tekst); }
.tekst li { margin-bottom: .7em; }
.concept { display: inline-block; background: #fbeee9; color: var(--rood); font-size: .85rem; font-weight: 600; padding: 6px 14px; border-radius: 99px; }
.tabel-wrap { overflow-x: auto; margin: 0 0 1em; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--wit); border-radius: var(--radius); overflow: hidden; min-width: 560px; }
.tabel th { background: var(--inkt); color: #fff; text-align: left; font-weight: 600; padding: 10px 14px; }
.tabel td { padding: 10px 14px; border-bottom: 1px solid var(--rand); vertical-align: top; color: var(--grijs); }

/* Liszt-pagina */
.liszt-held { background:
    radial-gradient(1000px 600px at 80% 40%, rgba(51,72,154,.5), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(165,67,47,.3), transparent 60%),
    var(--inkt);
  color: #d3d7e6; padding: 64px 0 80px; }
.liszt-held-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.liszt-held h1 { color: #fff; font-size: clamp(3rem, 6vw, 5rem); margin-bottom: .2em; }
.liszt-held .boventitel { color: var(--oker-licht); }
.liszt-held .intro { font-size: 1.15rem; max-width: 34em; }
.feitjes { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feitjes li { border-top: 2px solid var(--oker); padding-top: 12px; font-size: .9rem; color: #b9bfd3; }
.feitjes b { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: #fff; margin-bottom: 6px; }
.schilderij-heel { margin: 0; }
.schilderij-heel img { border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.schilderij-heel figcaption { font-size: .82rem; color: #aab0c6; margin-top: 16px; }
.schilderij-heel figcaption b { color: #fff; font-weight: 600; }
.schilderij-heel a { color: var(--oker-licht); }
.levensloop { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: hoofdstuk; }
.levensloop li { display: grid; grid-template-columns: 170px 1fr; gap: 32px; align-items: start; background: var(--wit); border-radius: var(--radius); padding: 24px; }
.levensloop img, .levensloop .jaartal { width: 170px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 8px; filter: sepia(.25); }
.levensloop .jaartal { display: grid; place-items: center; font-family: var(--serif); font-size: 3.2rem; color: var(--inkt); background: linear-gradient(rgba(247,242,232,.82), rgba(247,242,232,.82)), url(../img/marmer.jpg) center / cover; filter: none; }
.levensloop .periode { font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: var(--rood); margin-bottom: .3em; }
.levensloop h3 { font-size: 1.8rem; }
.levensloop p:last-child { color: var(--grijs); margin: 0; }
.luistergids { margin-top: 40px; background: var(--papier); border-radius: var(--radius); padding: 28px 32px; }
.luistergids h3 { font-size: 1.5rem; }
.luistergids ul { margin: 0; padding: 0; list-style: none; columns: 2 320px; column-gap: 40px; }
.luistergids li { margin-bottom: .7em; break-inside: avoid; color: var(--grijs); font-size: .95rem; }
.luistergids b { color: var(--inkt); }
.vandaag { background: var(--papier-2); }
.lees-verder-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.boeken { list-style: none; padding: 0; margin: 0; }
.boeken li { padding: 14px 0; border-bottom: 1px solid var(--rand); color: var(--grijs); font-size: .97rem; }
.boeken b { color: var(--inkt); }
@media (max-width: 980px) {
  .liszt-held-in, .lees-verder-in { grid-template-columns: 1fr; gap: 40px; }
  .schilderij-heel { max-width: 520px; }
}
@media (max-width: 560px) {
  .feitjes { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .feitjes b { font-size: 1.8rem; }
  .feitjes li { font-size: .78rem; }
  .levensloop li { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .levensloop img, .levensloop .jaartal { width: 120px; }
  .luistergids { padding: 22px; }
}

/* Lezen: archief */
.sprong { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.knop-op-donker { color: #fff; border-color: rgba(255,255,255,.35); }
.knop-op-donker:hover { color: var(--inkt); }
.tussenkop[id] { scroll-margin-top: 100px; }
.archief { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 32px 24px; }
.archief-bulletin { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 20px; }
.tegel { scroll-margin-top: 110px; }
.tegel a { text-decoration: none; color: var(--tekst); display: block; }
.tegel img { width: 100%; aspect-ratio: 480 / 676; object-fit: cover; object-position: top; border-radius: 3px; box-shadow: 0 10px 26px rgba(20,28,51,.22); transition: transform .25s, box-shadow .25s; background: #fff; }
.tegel a:hover img { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 18px 36px rgba(20,28,51,.3); }
.tegel p { margin: 12px 0 0; font-size: .85rem; color: var(--grijs); line-height: 1.4; }
.tegel b { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--inkt); }
.tegel:target img, .tegel:target .leeg-omslag { outline: 3px solid var(--oker); outline-offset: 4px; }
.leeg-omslag { aspect-ratio: 480 / 676; border-radius: 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; padding: 16px;
  background: linear-gradient(rgba(247,242,232,.86), rgba(247,242,232,.86)), url(../img/marmer.jpg) center / cover; border: 1px dashed rgba(20,28,51,.25); }
.leeg-omslag span { font-family: var(--serif); font-size: 2.4rem; color: var(--inkt); line-height: 1; }
.leeg-omslag small { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rood); font-weight: 600; }

/* Lezen: leespagina met pdf */
body.lezer-pagina .kop { position: static; }
.lezer-balk { position: sticky; top: 0; z-index: 20; background: var(--wit); border-bottom: 1px solid var(--rand); }
.lezer-balk .wrap { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 0; }
.lezer-titel { flex: 1 1 260px; min-width: 0; line-height: 1.3; }
.lezer-titel h1 { font-size: 1.35rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lezer-titel .lezer-sub { display: block; font-size: .8rem; line-height: 1.4; color: var(--grijs); }
.lezer-knoppen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rand); background: #fff; color: var(--inkt); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.lk:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.lk[disabled] { opacity: .35; cursor: default; background: #fff; border-color: var(--rand); color: var(--inkt); }
.lk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paginakeuze { height: 36px; border-radius: 8px; border: 1px solid var(--rand); background: #fff; color: var(--inkt); font: inherit; font-size: .85rem; padding: 0 6px; }
.scheiding { width: 1px; height: 26px; background: var(--rand); margin: 0 2px; }
.lezer-kader { position: relative; background: radial-gradient(ellipse at 50% 40%, #f3ede2 0%, #e6dccb 75%, #d9cdb8 100%); }
.pdf-blad { position: relative; width: 100%; height: calc(100vh - var(--balk-h, 54px)); height: calc(100dvh - var(--balk-h, 54px)); overflow: hidden; outline: none; touch-action: pan-y pinch-zoom; }
.lezer-kader[data-modus="breedte"] .pdf-blad, .lezer-kader[data-modus="zoom"] .pdf-blad { overflow: auto; }
.lezer-kader:fullscreen .pdf-blad { height: 100vh; }
.pdf-spread { display: flex; gap: 8px; justify-content: center; }
.pdf-spread.pdf-heel { height: 100%; align-items: center; }
.pdf-spread.pdf-breed { padding: 12px 0; }
.pdf-pagina { position: relative; flex: none; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 14px 34px rgba(60,40,10,.22); }
.pdf-pagina canvas { display: block; width: 100%; height: 100%; }
.pdf-link { position: absolute; display: block; border-radius: 3px; }
.pdf-link:hover, .pdf-link:focus-visible { background: rgba(51,72,154,.12); outline: 2px solid rgba(51,72,154,.5); }
.lezer-kader.bezig::after { content: ""; position: absolute; top: 14px; right: 14px; z-index: 6; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--rood); animation: draai .8s linear infinite; pointer-events: none; }
.blad-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 54px; height: 54px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.95); color: var(--inkt); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .15s, color .15s, opacity .2s; }
.blad-pijl svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.blad-pijl:hover, .blad-pijl:focus-visible { background: var(--inkt); color: #fff; }
.blad-pijl[disabled] { opacity: 0; pointer-events: none; }
.blad-vorige { left: 14px; }
.blad-volgende { right: 14px; }
.lezer-kader:not([data-modus="pagina"]) .blad-pijl { width: 44px; height: 44px; opacity: .75; }
.lezer-kader:not([data-modus="pagina"]) .blad-volgende { right: 26px; }
.lezer-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--grijs); pointer-events: none; }
.lezer-laden[hidden] { display: none; }
.lezer-laden a { pointer-events: auto; }
.lezer-onder { padding: 48px 0 64px; background: var(--papier); }
.lezer-info { display: grid; grid-template-columns: 160px 1fr; gap: 36px; align-items: start; }
.lezer-info img { border-radius: 3px; box-shadow: 0 10px 26px rgba(20,28,51,.22); }
.lezer-info h2 { font-size: 2rem; }
.lezer-info h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rood); margin: 1em 0 .6em; }
.onderwerpen { margin: 0 0 1.2em; padding-left: 1.1em; columns: 2 280px; column-gap: 32px; }
.onderwerpen li { margin-bottom: .35em; break-inside: avoid; }
.lezer-uitleg { font-size: .88rem; color: var(--grijs); max-width: 46em; }

@media (max-width: 760px) {
  .lezer-balk .wrap { gap: 6px 8px; }
  .lk-tekst { display: none; }
  .lezer-titel { flex: 1 1 100%; order: -1; }
  .lezer-titel h1 { font-size: 1.15rem; }
  .lezer-knoppen { flex: 1 1 0; gap: 5px; flex-wrap: nowrap; min-width: 0; }
  .lk { min-width: 34px; height: 34px; padding: 0 7px; }
  .paginakeuze { height: 34px; flex: 1 1 auto; max-width: 150px; }
  .scheiding, #volledig, .lezer-knoppen [aria-label$="nummer"] { display: none; }
  .blad-pijl { width: 40px; height: 40px; background: rgba(255,255,255,.85); }
  .blad-pijl svg { width: 22px; height: 22px; }
  .blad-vorige { left: 6px; }
  .blad-volgende, .lezer-kader:not([data-modus="pagina"]) .blad-volgende { right: 6px; }
  .lezer-info { grid-template-columns: 1fr; }
  .lezer-info img { width: 130px; }
  .archief { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .archief-bulletin { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
  .archief-bulletin .tegel b { font-size: 1rem; }
}

@media (max-width: 980px) {
  .agenda-item { grid-template-columns: 90px 1fr; }
  .agenda-foto { grid-column: 1 / -1; max-width: 360px; }
  .nieuws-lijst { grid-template-columns: 1fr; }
  .zijbalk { position: static; }
  .pagina-kop .uitsnede { width: 140px; opacity: .35; }
}
@media (max-width: 560px) {
  .agenda-item, .agenda-item.elders { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .datums { grid-template-columns: 1fr 1fr; }
  .datumblok { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
  .datumblok b { font-size: 1.8rem; }
  .datumblok span, .datumblok small { margin: 0; }
  .feiten { grid-template-columns: 1fr; gap: 0 0; }
  .feiten dd { margin-bottom: 8px; }
  .jaar { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .jaar > h2 { position: static; font-size: 2.4rem; }
  .bericht { padding: 26px 22px; }
  .pagina-kop .uitsnede { display: none; }
}

/* Responsive */
@media (max-width: 980px) {
  .held-in, .brief-in, .steun-in { grid-template-columns: 1fr; gap: 40px; }
  .schilderij { justify-self: center; width: min(100%, 420px); }
  .schilderij img { aspect-ratio: 4 / 5; }
  .kaarten { grid-template-columns: 1fr; }
  .lezen-in { grid-template-columns: 1fr; }
  .voet-in { grid-template-columns: 1fr 1fr; }
  .menu-knop { display: block; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--inkt); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; display: none; }
  .menu.open { display: flex; }
  .menu a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu a.knop { margin-top: 14px; text-align: center; border-bottom: 0; }
  .kop[data-open] .menu-knop span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .kop[data-open] .menu-knop span:nth-child(2) { opacity: 0; }
  .kop[data-open] .menu-knop span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .held { padding: 36px 0 56px; }
  .logo-beeld { width: 150px; }
  .concert-kaart { grid-template-columns: 1fr; }
  .concert-foto { width: 100%; height: 200px; min-height: 0; object-position: center 30%; }
  .data li { grid-template-columns: 1fr; gap: 0; }
  .sectie-kop.rij { flex-direction: column; align-items: start; }
  .uitgelicht { grid-template-columns: 110px 1fr; }
  .voet-in { grid-template-columns: 1fr; }
  .voet-onder { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }