/* ═══════════════════════════════════════════════════════════
   Tennis- en padelvereniging C.C., richting A "Klei"
   Gekozen door de club op 6 oktober 2026, met hun eigen aanpassingen:
   gebroken wit als ondergrond en hun blauw als steunkleur.

   Eén blauw: het indigo van hun logo (#2E2F7D), voor alles wat de site
   kleurt, met blauw-diep voor hover en diepte. Gekozen door de club op
   12 oktober: eerst leek kobalt hun kleur, maar het moet hetzelfde
   blauw zijn als het logo.
   Terracotta komt alleen nog voor in de foto, op de gravelbanen.
   ═══════════════════════════════════════════════════════════ */

/* koppen: Source Serif 4 (OFL), zelf gehost. Iowan staat alleen op Apple-apparaten, waardoor Windows
   en Android andere koppen lieten zien. Variabel: gewicht en optische maat in twee bestanden. */
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/source-serif-latin-normal.woff2) format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/source-serif-latin-italic.woff2) format('woff2');
  font-weight:200 900;font-style:italic;font-display:swap}

/* broodletter: Schibsted Grotesk, een krantengrotesk (OFL), zelf gehost zodat er
   niets naar Google gaat. Variabel, dus alle gewichten in twee bestanden. */
@font-face{font-family:'Schibsted Grotesk';src:url(/assets/fonts/schibsted-latin-wght-normal.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/assets/fonts/schibsted-latin-wght-italic.woff2) format('woff2');
  font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --paper:#F7F4ED;
  --paper-2:#EFE9DD;
  --paper-3:#E6DFD0;
  --ink:#14161A;
  --ink-2:#4C5058;
  --ink-3:#6F6C63;
  --line:#DCD4C4;
  --line-soft:#E8E2D5;

  --blauw:#2E2F7D;      /* het indigo van hun logo */
  --blauw-diep:#222361;
  /* de tennisbal: het enige geel op de site, als opsommingsteken en in de scènes */
  --bal-geel:#D9E64C;
  --bal-rand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Ccircle r='9' fill='%23D9E64C' stroke='%2314161A' stroke-opacity='.35' stroke-width='1.1'/%3E%3Cpath d='M-6.3-6.3C-2.6-2.6-2.6 2.6-6.3 6.3M6.3-6.3C2.6-2.6 2.6 2.6 6.3 6.3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); /* op gebroken wit, waar het geel anders wegvalt */
  --bal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Ccircle r='9.3' fill='%23D9E64C'/%3E%3Cpath d='M-6.6-6.6C-2.7-2.7-2.7 2.7-6.6 6.6M6.6-6.6C2.7-2.7 2.7 2.7 6.6 6.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --gut:clamp(20px,4vw,64px);
  --maxw:1360px;

  /* één paar easings voor de hele site, zodat alles op dezelfde manier beweegt */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  /* subtiele papierkorrel als achtergrondlaag */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.022em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── typografie ───────────────────────────────────────── */
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;display:flex;align-items:center;gap:12px}
.eyebrow[data-num]::before{content:attr(data-num);font-family:var(--mono);letter-spacing:.05em;
  color:var(--blauw);font-weight:400}
.display{font-family:var(--serif);line-height:.98;letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:46ch}

.ulink{background-image:linear-gradient(var(--blauw),var(--blauw));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1px;transition:background-size .45s var(--ease);padding-bottom:2px}
.ulink:hover{background-size:100% 1px}

/* ── knoppen ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;border:1px solid var(--ink);
  transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.blauw{background:var(--blauw);border-color:var(--blauw);color:#fff}
.btn.blauw:hover{background:var(--blauw-diep);border-color:var(--blauw-diep)}
.btn.licht{border-color:#fff;color:#fff}
.btn.licht:hover{background:#fff;color:var(--blauw);border-color:#fff}

/* ── aankondiging ─────────────────────────────────────── */
.strip{background:var(--blauw);color:#fff;font-size:12.5px}
.strip .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;
  min-height:38px;padding-top:8px;padding-bottom:8px}
.strip b{font-weight:600;color:#fff}
.strip .dot{width:9px;height:9px;background:var(--bal) center/contain no-repeat;display:inline-block;
  margin-right:9px;vertical-align:-0.5px}
.strip a.u{border-bottom:1px solid rgba(255,255,255,.7)}
.strip a.u:hover{border-color:#fff;color:#fff}
.strip nav{display:flex;gap:22px;flex-shrink:0;color:#fff}
.strip nav a:hover{color:#fff}

/* ── header ───────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:120;background:rgba(247,244,237,.9);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:80px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:auto;height:50px}
.brand .txt{line-height:1.15}
.brand .txt b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.01em}
.brand .txt small{display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3)}

nav.main{display:flex;gap:clamp(10px,1.6vw,26px);margin-left:auto;align-items:center}
.dd{position:relative}
.dd>button{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2);padding:12px 0}
.dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease)}
.dd>button[aria-current="true"]{color:var(--blauw)}
.dd:hover>button,.dd:focus-within>button,.dd.open>button{color:var(--ink)}
.dd:hover>button::after,.dd.open>button::after{transform:rotate(225deg) translate(-2px,-1px)}
.dd ul{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:-22px;min-width:270px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 22px 40px -24px rgba(20,22,26,.35);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.dd:hover ul,.dd:focus-within ul,.dd.open ul{opacity:1;visibility:visible;transform:none;
  transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s}
.dd li a{display:flex;justify-content:space-between;gap:16px;padding:9px 22px;font-size:14.5px;color:var(--ink-2)}
.dd li a:hover,.dd li a[aria-current="page"]{color:var(--blauw);background:var(--paper-2)}
.dd li a .ext{font-size:12px;color:var(--ink-3)}

.actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.burger{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line)}
.burger i{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:var(--ink);transition:transform .35s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{transform:translateY(5px) rotate(45deg)}
.menu-open .burger i::after{transform:translateY(-5px) rotate(-45deg)}

/* mobiel menu: alle groepen open onder elkaar */
.mnav{display:none}

/* ── het motief: de twee C's uit hun schild ─────────────
   Twee sporten die in elkaar grijpen, één vereniging.
   Ze tekenen zichzelf één keer, bij het laden. */
.rings{display:block;overflow:visible}
.rings path{fill:none;stroke-linecap:round}
.rings.draw path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:teken 1.6s var(--ease-io) forwards}
.rings.draw path:nth-child(2){animation-delay:.35s}
@keyframes teken{to{stroke-dashoffset:0}}

/* ── home: hero ───────────────────────────────────────── */
.hero{position:relative;padding-top:clamp(40px,5vw,76px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(28px,5vw,72px);align-items:end}
.hero .est{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;margin-bottom:26px;display:flex;align-items:center;gap:14px}
.hero .est::after{content:"";height:1px;flex:1;background:var(--line);max-width:120px}
.hero h1{font-size:clamp(48px,6.4vw,100px)}
.hero h1 em{font-style:italic;color:var(--blauw)}
.hero .sub{margin-top:clamp(22px,2.4vw,32px)}
.hero .doel{margin-top:22px;padding-left:18px;border-left:2px solid var(--blauw);
  font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);line-height:1.4;color:var(--ink);max-width:40ch}
.hero .doel small{display:block;margin-top:8px;font-family:var(--sans);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hero-fig{position:relative;margin:0 calc(var(--gut) * -1) 0 0}
.hero-fig>img{width:100%;height:clamp(340px,44vw,600px);object-fit:cover;object-position:50% 45%}
.hero-fig figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:14px 22px 0 0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hero-fig figcaption b{color:var(--ink);font-weight:600}
.hero .rings{position:absolute;right:calc(100% - 4px);bottom:-30px;width:120px;opacity:.9}

/* ── elke week ────────────────────────────────────────── */
.week{margin-top:clamp(48px,5vw,80px);padding:clamp(26px,3vw,40px) 0;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.week .wrap{display:flex;gap:clamp(22px,3vw,48px);align-items:center;flex-wrap:wrap}
.week h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;flex-shrink:0;font-family:var(--sans)}
.week ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.4vw,40px);
  flex-wrap:wrap;flex:1;justify-content:space-between}
.week li{display:flex;gap:12px;align-items:baseline;font-size:14.5px}
.week li time{font-family:var(--mono);font-size:12.5px;color:var(--blauw);letter-spacing:.02em;white-space:nowrap}
.week li span{color:var(--ink-2)}
.week li b{font-weight:600;color:var(--ink)}

/* ── secties ──────────────────────────────────────────── */
section.blk{padding:clamp(72px,8vw,132px) 0}
.head2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4.4vw,62px)}
.head2 h2{font-size:clamp(34px,4.4vw,64px)}
.head2 .eyebrow{margin-bottom:20px}

/* spelen */
.play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,76px);align-items:start}
.play-fig{position:relative;margin:0}
.play-fig img{width:100%;height:clamp(400px,42vw,600px);object-fit:cover;object-position:88% 70%}
.play-fig .tag{position:absolute;top:22px;left:22px;background:var(--paper);padding:8px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.2vw,32px);align-items:baseline;
  padding:clamp(20px,2.3vw,28px) 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .4s var(--ease)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--paper-2);
  z-index:-1;transition:width .45s var(--ease)}
.row:hover{padding-left:18px}
.row:hover::before{width:calc(100% + 18px);left:-18px}
.row .n{font-family:var(--mono);font-size:11px;color:var(--blauw);letter-spacing:.06em;padding-top:6px}
.row h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.1}
.row p{margin-top:9px;font-size:14.5px;color:var(--ink-2);max-width:46ch;line-height:1.55}
.row .arw{font-size:19px;color:var(--ink-3);transition:transform .4s var(--ease),color .4s;padding-top:4px}
.row:hover .arw{transform:translateX(6px);color:var(--blauw)}

/* agenda */
.agenda{border-top:1px solid var(--ink)}
.ag{display:grid;grid-template-columns:132px minmax(0,1fr) 170px 160px;gap:clamp(14px,2vw,28px);
  align-items:center;padding:clamp(18px,2.1vw,26px) 0;border-bottom:1px solid var(--line);
  transition:background .35s,box-shadow .35s}
a.ag:hover{background:var(--paper-2);box-shadow:0 0 0 18px var(--paper-2)}
.ag .dt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.ag .dt b{display:block;font-family:var(--serif);font-size:26px;color:var(--blauw);letter-spacing:-.02em;
  font-weight:400;margin-bottom:3px}
.ag h3{font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);line-height:1.2}
.ag h3 small{display:block;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin-top:7px;
  letter-spacing:0;line-height:1.5}
.chip{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:5px 11px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.chip.k,.chip.chip-competitie,.chip.chip-toernooi{border-color:var(--blauw);color:var(--blauw)}
.chip.c,.chip.chip-vereniging{border-color:var(--blauw);background:var(--blauw);color:#fff} /* competitie: gevuld, zodat hij met één blauw toch te onderscheiden is */
.ag .st{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;font-weight:600;text-align:right}
.ag .st.open{color:var(--blauw)}
.agenda-foot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;flex-wrap:wrap;gap:16px}
.agenda-foot p{font-size:14.5px;color:var(--ink-2);max-width:56ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters button{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  padding:8px 14px;border:1px solid var(--line);color:var(--ink-2);transition:.25s}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--blauw);border-color:var(--blauw);color:#fff}
.maand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding:30px 0 10px;border-bottom:1px solid var(--ink)}
.maand:first-of-type{padding-top:0}
.ag[hidden],.maand[hidden]{display:none}

/* club: visie en historie */
.club{background:var(--paper-2);padding:clamp(72px,8vw,130px) 0;position:relative;overflow:hidden}
.club .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.club blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,3vw,42px);line-height:1.17;letter-spacing:-.026em}
.club blockquote .q{color:var(--blauw)}
.club cite{display:block;margin-top:26px;font-style:normal;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.club .body{margin-top:28px;font-size:15.5px;color:var(--ink-2);line-height:1.7;max-width:50ch}
.club .bg-rings{position:absolute;right:-140px;bottom:-160px;width:520px;opacity:.07;pointer-events:none}

/* de historie als tijdlijn: de lijn groeit mee met het scrollen */
.tijd{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.tijd::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tijd .groei{position:absolute;left:5px;top:8px;width:1px;background:var(--blauw);
  height:calc((100% - 16px) * var(--p,1))}
.tijd li{position:relative;padding:0 0 clamp(18px,2vw,26px)}
.tijd li:last-child{padding-bottom:0}
.tijd li::before{content:"";position:absolute;left:-30px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--paper-2);border:1.5px solid var(--blauw)}
.tijd time{display:block;font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1;color:var(--blauw)}
.tijd p{margin-top:6px;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:46ch}
.tijd.vol time{font-size:clamp(24px,2.2vw,32px)}

/* nieuws */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,46px)}
.news article{border-top:1px solid var(--ink);padding-top:22px}
.news .meta{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.news h3{font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.18;margin:16px 0 12px;transition:color .3s}
.news article:hover h3{color:var(--blauw)}
.news p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.news .go{margin-top:18px;display:inline-block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}

/* sponsors */
.sponsors{padding:clamp(46px,5vw,74px) 0;border-top:1px solid var(--line)}
.sponsors .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:center}
.sponsors .lbl{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);font-weight:600;max-width:24ch;line-height:1.5}
.sponsors ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,52px);flex-wrap:wrap;align-items:center;justify-content:center}
.sponsors li{font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);color:var(--ink-2);letter-spacing:-.01em}
.sponsors li small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* ── subpagina's ──────────────────────────────────────── */
.phero{padding:clamp(40px,5vw,78px) 0 clamp(30px,3.6vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.crumb a:hover{color:var(--blauw)}
.phero h1{font-size:clamp(40px,5.4vw,82px);max-width:16ch}
.phero .lede{margin-top:22px;max-width:56ch}
.phero .rings{position:absolute;right:var(--gut);bottom:-50px;width:150px;opacity:.12}

.pbody{padding:clamp(44px,5vw,84px) 0 clamp(70px,8vw,120px)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,90px);align-items:start}
.pgrid.breed{grid-template-columns:minmax(0,1fr)}

.prose{max-width:70ch;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.05em}
.prose h2{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);color:var(--ink);line-height:1.12;margin-top:1.9em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);color:var(--ink);line-height:1.2;margin-top:1.6em}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--blauw);border-bottom:1px solid rgba(46,47,125,.3);transition:border-color .25s}
.prose a:not(.btn):hover{border-color:var(--blauw)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--blauw)}
.prose ul:not(.namen){list-style:none;padding-left:1.45em}
.prose ul:not(.namen)>li{position:relative}
.prose ul:not(.namen)>li::before{content:"";position:absolute;left:-1.45em;top:.5em;width:10px;height:10px;
  background:var(--bal-rand) center/contain no-repeat}
.prose .intro{font-size:clamp(18px,1.4vw,20px);color:var(--ink);line-height:1.55}
.prose details{border-top:1px solid var(--line);padding:0}
.prose details:last-of-type{border-bottom:1px solid var(--line)}
.prose summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);color:var(--ink);line-height:1.3}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";position:absolute;right:4px;top:15px;font-family:var(--sans);
  font-size:22px;color:var(--blauw);transition:transform .35s var(--ease)}
.prose details[open] summary::after{transform:rotate(45deg)}
.prose details>div{padding:0 0 20px}
.prose details>div>*+*{margin-top:.8em}

.tabel{width:100%;border-collapse:collapse;font-size:15px;margin-top:1.4em}
.tabel th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:0 14px 12px 0;border-bottom:1px solid var(--ink)}
.tabel td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tabel td:first-child{color:var(--ink);font-weight:600}
.tabel td.bedrag{font-family:var(--serif);font-size:20px;color:var(--ink);white-space:nowrap}
.tabel td small{display:block;color:var(--ink-3);font-size:13px;margin-top:3px;font-weight:400}
.tabel-scroll{overflow-x:auto}

.mensen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:1.2em}
.mensen div{border-top:1px solid var(--line);padding:14px 0}
.mensen dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.mensen dd{margin:6px 0 0;color:var(--ink);font-size:16px;line-height:1.5}
.mensen dd a{color:var(--blauw);font-size:14.5px}

.namen{columns:2;column-gap:clamp(24px,3vw,48px);list-style:none;padding:0!important;margin-top:1.2em}
.namen li{break-inside:avoid;border-top:1px solid var(--line-soft);padding:9px 0;margin:0!important;display:flex;gap:16px}
.namen li b{font-family:var(--mono);font-size:12.5px;color:var(--blauw);font-weight:400;min-width:3.6em;padding-top:2px}

.side{position:sticky;top:110px;display:grid;gap:18px}
.kaart{border:1px solid var(--line);padding:24px;background:var(--paper)}
.kaart.blauw{background:var(--blauw);border-color:var(--blauw);color:#fff}
.kaart h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  font-family:var(--sans);margin-bottom:14px}
.kaart.blauw h2{color:#fff}
.kaart p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.kaart.blauw p{color:#fff}
.kaart p+p{margin-top:10px}
.kaart a:not(.btn){color:var(--blauw)}
.kaart.blauw a:not(.btn){color:#fff;border-bottom:1px solid rgba(255,255,255,.7)}
.kaart .btn{margin-top:16px}
.kaart .groot{font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1.05}
.kaart.blauw .groot{color:#fff}
.kaart ul{list-style:none;margin:0;padding:0}
.kaart li{padding:9px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.kaart li:first-child{border-top:0;padding-top:0}
.kaart li a{color:var(--ink)!important;border:0!important}
.kaart li a:hover{color:var(--blauw)!important}

/* nieuwsarchief */
.berichten article{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,3vw,48px);
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.berichten article:first-child{border-top:1px solid var(--ink)}
.berichten time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;padding-top:6px}
.berichten time b{display:block;font-family:var(--serif);font-size:30px;color:var(--blauw);letter-spacing:-.02em;font-weight:400;text-transform:none;margin-bottom:2px}
.berichten h2{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.15;color:var(--ink)}
.berichten .tekst{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:68ch}
.berichten .tekst p+p{margin-top:.8em}
.berichten .tekst a{color:var(--blauw);border-bottom:1px solid rgba(46,47,125,.3);word-break:break-word}

/* ── inschrijfformulier ───────────────────────────────── */
.form{display:grid;gap:30px}
.form fieldset{border:0;margin:0;padding:0}
.form legend{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:16px;padding:0}
.form legend span{width:24px;height:24px;border-radius:50%;background:var(--blauw);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:0}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.veld label{font-size:13.5px;color:var(--ink-2)}
.veld label i{font-style:normal;color:var(--blauw)}
.veld input,.veld select,.veld textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--ink-3);padding:10px 2px;border-radius:0;transition:border-color .25s}
.veld textarea{border:1px solid var(--line);padding:12px;min-height:110px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-color:var(--blauw)}
.veld small{font-size:12.5px;color:var(--ink-3)}
.keuze{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keuze label{position:relative;border:1px solid var(--line);padding:16px;cursor:pointer;transition:border-color .25s,background .25s}
.keuze label:hover{border-color:var(--ink-3)}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink)}
.keuze small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.keuze label:has(input:checked){border-color:var(--blauw);background:#fff;box-shadow:inset 0 0 0 1px var(--blauw)}
.keuze label:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:2px}
.vink{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);padding:12px 0;border-top:1px solid var(--line-soft)}
.vink input{margin-top:4px;width:17px;height:17px;accent-color:var(--blauw);flex-shrink:0}
.vink a{color:var(--blauw);border-bottom:1px solid rgba(46,47,125,.3)}
.form .verstuur{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form .verstuur .btn{font-size:13px;padding:15px 26px}
.form[data-state="sending"] .verstuur .btn{opacity:.6;pointer-events:none}
.form-fout{display:none;color:#A12B2B;font-size:14px}
.form[data-state="error"] .form-fout{display:block}
.bedankt{border:1px solid var(--blauw);background:#fff;padding:clamp(24px,3vw,40px)}
.bedankt h2{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);color:var(--ink)}
.bedankt p{margin-top:12px;color:var(--ink-2)}
.hp{position:absolute;left:-9999px}

/* ── footer ───────────────────────────────────────────── */
footer.site{background:var(--blauw);color:#fff;padding:clamp(60px,7vw,100px) 0 0;position:relative;overflow:hidden}
footer.site a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,56px);
  padding-bottom:clamp(46px,5vw,72px);position:relative}
.fgrid h2{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:18px;font-family:var(--sans)}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{padding:5px 0;font-size:14.5px}
.fbrand .schild{width:64px;height:64px;border-radius:50%;background:var(--paper);display:grid;place-items:center;margin-bottom:22px}
.fbrand .schild img{height:44px;width:auto}
.fbrand .display{font-size:clamp(28px,3vw,40px);color:#fff;margin-bottom:18px}
.fbrand p{font-size:14.5px;line-height:1.7;max-width:34ch}
.fbot{border-top:1px solid rgba(255,255,255,.14);padding:24px 0;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:12.5px;color:#fff;position:relative}
.fbot .l{display:flex;gap:24px;flex-wrap:wrap}
footer.site .bg-rings{position:absolute;right:-90px;top:-70px;width:420px;opacity:.09;pointer-events:none}

/* ── reveal ───────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}


/* ═══ meer lef ═══════════════════════════════════════════
   Op verzoek: flitsender, binnen richting A. Elke beweging hier
   laat iets van de club zien, niets is decoratie om de decoratie. */

/* koppen: één woord cursief in blauw, zoals in de hero */
.display em{font-style:italic;color:var(--blauw)}

/* knoppen krijgen een pijl die meeloopt */
.btn .pijl{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .pijl{transform:translateX(4px)}

/* het schild opent zich: de foto van hun park verschijnt vanuit een
   ovaal en loopt open tot de volle breedte.
   Eén getal, --open, loopt van 0 naar 1; de vorm volgt daaruit. De hoeken
   zijn steeds de helft van het venster (dus een zuiver ovaal) maal
   1 - open³: rond zolang hij groeit, pas aan het eind vierkant. Met
   "round 999px" bleef de vorm een cirkel en klapte hij op het laatst in
   een rechthoek; dat oogde schokkerig. Vorm en zoom delen duur en curve. */
@property --open{syntax:'<number>';inherits:false;initial-value:1}
.js .hero-fig>img{--open:0;
  --hoek:calc(1 - var(--open) * var(--open) * var(--open));
  clip-path:inset(calc(16% * (1 - var(--open))) calc(24% * (1 - var(--open)))
    round calc((26% + 24% * var(--open)) * var(--hoek)) / calc((34% + 16% * var(--open)) * var(--hoek)));
  transform:scale(1.06);will-change:clip-path,transform;backface-visibility:hidden;
  transition:--open 1.7s cubic-bezier(.65,0,.35,1),transform 1.7s cubic-bezier(.65,0,.35,1)}
.js .geladen .hero-fig>img{--open:1;transform:none}

/* de badge rond het schild: hun eigen gegevens, langzaam draaiend */
.badge{position:absolute;left:clamp(-70px,-5vw,-40px);top:clamp(-46px,-3vw,-30px);width:clamp(118px,11vw,156px);
  aspect-ratio:1;z-index:3;filter:drop-shadow(0 14px 22px rgba(20,22,26,.18))}
.badge svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:draai 26s linear infinite}
.badge svg.ring text{font-family:var(--sans);font-size:9.4px;letter-spacing:2.3px;font-weight:700;fill:var(--blauw);text-transform:uppercase}
.badge .kern{position:absolute;inset:22%;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.badge .kern img{height:58%;width:auto}
.badge::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--paper)}
@keyframes draai{to{transform:rotate(360deg)}}

/* de lichtkrant: wat er aankomt, in blauw */
.tick{background:var(--blauw);color:#fff;overflow:hidden;position:relative;margin-top:clamp(48px,5vw,80px)}
.tick .spoor{display:flex;width:max-content;animation:rol 48s linear infinite}
.tick:hover .spoor{animation-play-state:paused}
.tick a,.tick span.item{display:flex;align-items:center;gap:14px;padding:17px 0;white-space:nowrap;
  font-size:14px;letter-spacing:.02em}
.tick time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#fff;text-transform:uppercase}
.tick b{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em}
.tick .sep{width:11px;height:11px;background:var(--bal) center/contain no-repeat;margin:0 34px;flex-shrink:0;
  animation:draai 6s linear infinite reverse} /* rolt mee met de lichtkrant, naar links */
.tick a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@keyframes rol{to{transform:translateX(-50%)}}

/* rijen lopen blauw vol */
.row::before{background:var(--blauw)}
.row:hover h3,.row:hover p,.row:hover .n,.row:hover .arw{color:#fff}
.row h3,.row p,.row .n{transition:color .35s var(--ease)}

/* de agenda op de home als volle blauwe band */
section.blk.blauw{background:var(--blauw);color:#fff;position:relative;overflow:hidden}
.blk.blauw .eyebrow{color:#fff}
.blk.blauw .eyebrow[data-num]::before{color:#fff}
.blk.blauw .display em{color:#fff}
.blk.blauw .lede{color:#fff}
.blk.blauw .agenda{border-top-color:#fff}
.blk.blauw .ag{border-bottom-color:rgba(255,255,255,.4)}
.blk.blauw a.ag:hover{background:var(--blauw-diep);box-shadow:0 0 0 18px var(--blauw-diep)}
.blk.blauw .ag .dt{color:#fff}
.blk.blauw .ag .dt b{color:#fff}
.blk.blauw .ag h3 small{color:#fff}
.blk.blauw .chip{border-color:#fff;color:#fff}
.blk.blauw .ag .st{color:#fff}
.blk.blauw .ag .st.open{color:#fff}
.blk.blauw .agenda-foot p{color:#fff}
.blk.blauw .bg-rings{position:absolute;left:-120px;top:-90px;width:460px;opacity:.13;pointer-events:none}

/* nieuws: kaartjes komen omhoog */
.news article{transition:transform .45s var(--ease)}
.news article:hover{transform:translateY(-6px)}

/* Op blauw is alle tekst helder wit, op verzoek van Ruben (7 oktober): de lichtblauwe
   tinten haalden het contrast niet. Verschil maken we met grootte en gewicht, niet met kleur. */

/* ── responsive ───────────────────────────────────────── */
@media(max-width:1180px){
  .actions .btn.wis{display:none}
}
@media(max-width:1080px){
  nav.main{display:none}
  .burger{display:grid}
  .actions{margin-left:auto}
  .mnav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
    max-height:calc(100vh - 80px);overflow:auto;padding:8px var(--gut) 28px;box-shadow:0 24px 40px -28px rgba(20,22,26,.4)}
  .menu-open .mnav{display:block}
  .mnav h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
    margin:22px 0 6px;font-family:var(--sans)}
  .mnav ul{list-style:none;margin:0;padding:0}
  .mnav li a{display:block;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
  .mnav li a[aria-current="page"]{color:var(--blauw)}
  .mnav .knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-fig{margin-left:calc(var(--gut) * -1)}
  .hero .rings{display:none}
  .badge{left:auto;right:12px;top:-34px;width:112px}
  .head2,.play,.club .wrap{grid-template-columns:1fr}
  .news{grid-template-columns:1fr 1fr}
  .ag{grid-template-columns:100px minmax(0,1fr);row-gap:12px}
  .ag .dt{white-space:normal}
  .ag .st{grid-column:2;text-align:left}
  .ag .cell-chip{grid-column:2;grid-row:2}
  .fgrid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr}
  .side{position:static}
}
@media(max-width:760px){
  .actions .btn:not(.blauw){display:none}
  .brand img{height:42px}
  .brand .txt b{font-size:16px}
  .brand .txt small{font-size:8.5px;letter-spacing:.15em}
  .btn.blauw{padding:9px 13px;font-size:10.5px}
  header.site .wrap{gap:10px;min-height:66px}
  .strip nav{display:none}
  .strip:has(p:empty){display:none} /* eigen pagina's hebben geen melding: geen lege balk */
  .week ul{flex-direction:column;gap:10px}
  .row{grid-template-columns:auto 1fr}
  .row .arw{display:none}
  .news{grid-template-columns:1fr}
  .sponsors .wrap{grid-template-columns:1fr;justify-items:start}
  .sponsors ul{justify-content:flex-start}
  .fgrid{grid-template-columns:1fr}
  .rij,.keuze{grid-template-columns:1fr}
  .mensen{grid-template-columns:1fr}
  .namen{columns:1}
  .berichten article{grid-template-columns:1fr;gap:10px}
}

/* ── de baan als decor ───────────────────────────────────────
   Twee scènes, elk met een reden, en geen andere:
   - Agenda: één tennisbal gaat in een lob over de kop van de band en komt
     onderaan in een lage lob terug. Het geel van de bal is het enige geel
     op de site.
   - Padel: de bal stuit en komt terug van de glazen achterwand, de slag
     die padel padel maakt. Speelt één keer na het laden.
   (De getekende banen bij Spelen zijn er op 12 oktober uit gegaan.)
   Alles volgt uit één getal (--p, 0 tot 1) uit scrollpositie of tijd. Zonder
   script of met "minder beweging" staat de eindstand er gewoon. */
.baan{display:block;overflow:visible;pointer-events:none}
.baan .lijn,.baan .vlucht{fill:none;stroke-linecap:round;stroke-linejoin:round}
.js .baan .lijn{stroke-dasharray:var(--l);
  stroke-dashoffset:calc(var(--l) * (1 - clamp(0, (var(--p, 1) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1)))}
.js .baan .merk{opacity:0;transition:opacity .5s var(--ease)}
.js .baan .merk.aan{opacity:1}
.baan .bal circle{fill:var(--bal-geel);stroke:rgba(20,22,26,.18);stroke-width:.8}
.baan .bal path{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round}
.js .baan .bal{opacity:0}
.js .baan .bal.aan{opacity:1}

section.blk:has(>.baan){position:relative;overflow:hidden}
section.blk>.baan~.wrap{position:relative;z-index:1}
.boog{position:absolute;left:0;top:0;width:100%;height:auto}
.js .boog.terug{top:auto;bottom:0}
.boog .vlucht{stroke:#fff;stroke-width:2;stroke-dasharray:1.5 11;opacity:.6}

.phero.met-wand .wand{position:absolute;right:var(--gut);bottom:clamp(26px,3vw,46px);width:min(38vw,540px);color:var(--blauw)}
.wand .vloer{stroke:var(--ink-3);stroke-width:1.2}
.wand .net{stroke:var(--ink-2);stroke-width:3;stroke-linecap:butt}
.wand .glas{stroke:var(--blauw);stroke-width:1.4}
.wand .ruit{fill:var(--blauw);fill-opacity:.12}
.wand .gaas{opacity:.45}
.wand .vlucht{stroke:var(--blauw);stroke-width:1.8;stroke-dasharray:1.5 8;opacity:.7}
.wand ellipse.merk{fill:var(--ink);fill-opacity:.22}
.wand .tik{fill:none;stroke:var(--blauw);stroke-width:1.6;stroke-linecap:round}
.wand .maat{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
@media(max-width:1100px){.phero.met-wand .wand{display:none}}

/* eigen pagina's van de club (_pagina.html): de blokken uit de websiteditor in hun eigen opmaak */
.phero .skp-intro{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-2)}
.skp-tekstvak{max-width:760px}
.skp-blok{margin-top:clamp(28px,3vw,44px)}
.skp-blok:first-child{margin-top:0}
.skp-blok>h2:first-child,.skp-bij>h2:first-child{margin-top:0}
.skp-blok>*+*,.skp-bij>*+*{margin-top:1.05em}
.skp-beeld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.skp-beeld.skp-links .skp-foto{order:2}
.skp-foto{margin:0}
.skp-foto img{width:100%;height:auto}
.skp-citaat{margin-left:0;margin-right:0;padding-left:18px;border-left:3px solid var(--blauw)}
.skp-citaat blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.25;color:var(--ink)}
.skp-citaat figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.prose a.skp-knop-a{display:inline-block;padding:13px 20px;background:var(--blauw);border:1px solid var(--blauw);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;transition:background .25s}
.prose a.skp-knop-a:hover{background:var(--blauw-diep);border-color:var(--blauw-diep)}
@media(max-width:760px){.skp-beeld{grid-template-columns:1fr}.skp-beeld.skp-links .skp-foto{order:0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .hero-fig>img{clip-path:none;transform:none}
  .tick .spoor{flex-wrap:wrap;width:auto;justify-content:center;padding:0 var(--gut)}
  /* de tweede kopie bestaat alleen voor de lus van de animatie; stilstaand is het een herhaling */
  .tick .spoor>span[aria-hidden]{display:none}
  .js .rv{opacity:1;transform:none}
  .rings.draw path{stroke-dashoffset:0}
  .tijd .groei{height:calc(100% - 16px)}
}

/* weeklijst op de agendapagina */
.weeklijst{margin-top:14px!important}
.weeklijst li{display:flex;gap:14px;align-items:baseline}
.weeklijst time{font-family:var(--mono);font-size:12.5px;color:var(--blauw);min-width:5.6em;white-space:nowrap}
.berichten .links{margin-top:10px;font-size:13.5px}

/* reparaties na de eerste render */
.fbrand p.display{line-height:1.04}
.tick .spoor{align-items:center}
/* de foto loopt door tot de rand van het scherm, ook als het venster breder is dan de wrap */
.hero-fig{margin-right:calc(-1 * var(--gut) - max(0px, (100vw - var(--maxw)) / 2))}
/* op de agendapagina draagt de maandkop de lijn, niet de lijst */
.agenda:has(.maand){border-top:0}

/* A news post with a photo (lijsten.json, the portal's website editor). */
.berichten .nfoto{margin:14px 0 6px}
.berichten .nfoto img{display:block;width:100%;max-width:640px;height:auto;border-radius:10px}

/* Attachments with a news post (notulen, a flyer, a form): one row per file, the name in their blue. */
.berichten ul.sk-bijlagen{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;max-width:68ch}
.berichten ul.sk-bijlagen>li::before{content:none}
.berichten .sk-bijlagen li{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;
  padding:11px 16px;background:var(--paper-2);border-radius:8px}
.berichten .sk-bijlagen a{color:var(--blauw);font-size:15px;font-weight:500;border-bottom:1px solid rgba(46,47,125,.3);word-break:break-word}
.berichten .sk-bijlagen a:hover{border-bottom-color:var(--blauw)}
.berichten .sk-bijlage-info{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}

/* "Let op" bij all-in: je kind schrijf je ook in bij Maximus (feedback van de club, 21 oktober) */
.let-op{border-left:3px solid var(--blauw);padding:2px 0 2px 12px;margin-top:12px}
.kaart.blauw .let-op{border-left-color:#fff}

/* Een bericht op een eigen pagina, en de links ernaartoe vanuit het overzicht. */
.bericht-kop{font-size:clamp(32px,4.4vw,60px);line-height:1.08;max-width:22ch}
.bericht-terug{margin-top:2em}
.bericht .nfoto{margin:0 0 24px}
.bericht .nfoto img{display:block;width:100%;max-width:640px;height:auto;border-radius:10px}
.bericht ul.sk-bijlagen{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;max-width:68ch}
.bericht ul.sk-bijlagen a{color:var(--blauw)}
.bericht .sk-bijlage-info{color:var(--ink-3);font-size:13px}
.berichten h2 a{color:inherit}
.berichten h2 a:hover{color:var(--blauw)}
.bericht-verder{margin-top:10px}