/* =====================================================================
   Website-module — publieke site-CSS (W1: template STADION volledig;
   clubhuis/tribune delen deze basis tot hun eigen varianten landen).
   Principes: semantische thema-vars + [data-mode=light]-palet · merk
   ALLEEN via --brand/--sub (app-vars.css.php per tenant) · mobile-first ·
   focus-ring altijd · reduced-motion-vriendelijk. Scope: .l2s-site.
   Canon: websiteplan §3.1/§3.3 + mockups 01/12.
   ===================================================================== */

:root{
  --l2s-bg:#0b0e13; --l2s-bg2:#0e1219; --l2s-surface:#12161d; --l2s-raise:#171c25;
  --l2s-ink:#eef1f6; --l2s-muted:#9aa3b0; --l2s-muted2:#6f7885;
  --l2s-line:rgba(238,241,246,.09); --l2s-line-s:rgba(238,241,246,.18);
  --l2s-media-a:#1a2029; --l2s-media-b:#12161d; --l2s-glow:.26;
  --l2s-shadow:0 10px 40px rgba(0,0,0,.45); --l2s-shadow-h:0 18px 60px rgba(0,0,0,.6);
  --l2s-focus:#7db3ff; --l2s-r:18px; --l2s-rs:12px;
}
/* ── LEESMAAT VAN DE CLUBSITE (27-09-2026, owner: "volledige comfort-pas") ────────────────────────
   Deze site droeg 38 tekstgroottes onder de 15px-vloer uit ui-ux-design-system §8 — datums van 11px,
   eyebrows van 12px, kaartteksten van 13px, een spelersbadge van 9,5px. Bevroren in de uxcheck-
   ratchet, dus machinaal bewaakt maar nooit opgelost. Een clubsite wordt gelezen door dezelfde 60+
   vrijwilligers en ouders als de app; dan hoort dezelfde vloer te gelden.
   Vijf tokens in plaats van 38 losse getallen, zodat de hiërarchie één plek heeft en niet opnieuw
   wegdrijft. De rangorde draagt vanaf nu vooral GEWICHT, KLEUR en HOOFDLETTERS — niet grootte:
   dat werkte toch al zo (eyebrows zijn uppercase + muted), alleen stond de maat te laag. */
:root{
  --l2s-fs-meta:15px;   /* datum, positie, telling, kruimelpad, bijschrift — was 11 t/m 12,5px */
  --l2s-fs-label:15px;  /* eyebrow/badge/chip, uppercase — was 9,5 t/m 12,5px (= --ui-fs-label) */
  --l2s-fs-nav:16px;    /* navigatie, knoppen, sectielinks, filterchips — was 13 t/m 14,5px */
  --l2s-fs-body:16px;   /* lopende tekst in kaarten, adres, intro — was 13 t/m 14px */
  --l2s-fs-name:17px;   /* namen: speler, staflid, sponsor, contactpersoon — was 13,5 t/m 14,5px */
}
:root[data-mode="light"]{
  --l2s-bg:#f4f6f9; --l2s-bg2:#eceff4; --l2s-surface:#fff; --l2s-raise:#fff;
  --l2s-ink:#10151d; --l2s-muted:#5b6570; --l2s-muted2:#8a93a1;
  --l2s-line:rgba(16,21,29,.1); --l2s-line-s:rgba(16,21,29,.2);
  --l2s-media-a:#e3e8ef; --l2s-media-b:#f2f4f8; --l2s-glow:.14;
  --l2s-shadow:0 8px 28px rgba(16,21,29,.08); --l2s-shadow-h:0 16px 44px rgba(16,21,29,.14);
  --l2s-focus:#2563eb;
}

.l2s-site{margin:0;background:var(--l2s-bg);color:var(--l2s-ink);line-height:1.55;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.l2s-site *{box-sizing:border-box}
.l2s-site img{display:block;max-width:100%}
.l2s-site a{color:inherit;text-decoration:none}
.l2s-site :focus-visible{outline:2px solid var(--l2s-focus);outline-offset:3px;border-radius:6px}
.l2s-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.l2s-skip{position:absolute;left:-999px;top:8px;background:var(--brand,#d2232a);color: var(--ui-on-brand, #ffffff);
  padding:10px 16px;border-radius:10px;z-index:99}
.l2s-skip:focus{left:8px}

/* ── header/nav ── */
.l2s-sitehead{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--l2s-line);
  background:color-mix(in srgb,var(--l2s-bg) 80%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.l2s-nav{display:flex;align-items:center;gap:10px;min-height:72px}
.l2s-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px;letter-spacing:-.01em;min-width:0}
.l2s-brand small{display:block;font-size:var(--l2s-fs-label);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--l2s-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2s-logo{width:44px;height:44px;flex:none;object-fit:contain}
.l2s-mainnav{margin-left:auto;display:flex;align-items:center;gap:2px}
.l2s-mainnav a{padding:10px 13px;border-radius:10px;font-size:var(--l2s-fs-nav);font-weight:600;
  color:var(--l2s-muted);transition:.15s;white-space:nowrap}
.l2s-mainnav a:hover{color:var(--l2s-ink);background:color-mix(in srgb,var(--l2s-ink) 6%,transparent)}
.l2s-mainnav a[aria-current="page"]{color:var(--l2s-ink);position:relative}
.l2s-mainnav a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
  height:2px;background:var(--brand,#d2232a);border-radius:2px}
/* dynamische subnavs (dropdown op hover/focus; .open = touch-toggle via site.js) */
.l2s-navi{position:relative}
/* Het pijltje was een teken van 8,5px. Een driehoekje van CSS heeft geen tekengrootte nodig, dus
   het valt niet langer onder de leesmaat — en het blijft even klein als het hoort. De <span> is
   aria-hidden en sinds 27-09 leeg (render.php), zodat er niets te clippen valt. */
.l2s-caret{display:inline-block;width:0;height:0;margin-left:7px;vertical-align:middle;opacity:.5;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.l2s-subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;
  opacity:0;visibility:hidden;transition:.14s;z-index:70}
.l2s-navi:hover .l2s-subnav,.l2s-navi:focus-within .l2s-subnav,.l2s-navi.open .l2s-subnav{
  opacity:1;visibility:visible}
.l2s-subnav__in{min-width:212px;display:grid;gap:2px;background:var(--l2s-surface);
  border:1px solid var(--l2s-line);border-radius:14px;padding:8px;box-shadow:var(--l2s-shadow-h)}
.l2s-mainnav .l2s-subnav__in a{display:block;padding:9px 12px;border-radius:9px;font-size:var(--l2s-fs-nav);
  white-space:normal}
/* min-height 44px = de raakvlakvloer (§8). De knop «Word lid van de club» was 33px hoog. */
.l2s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;min-height:44px;
  border-radius:var(--l2s-rs);padding:12px 20px;font-size:var(--l2s-fs-nav);font-weight:750;font-family:inherit;
  transition:.16s;white-space:nowrap}
.l2s-btn--primary{background:var(--brand,#d2232a);color: var(--ui-on-brand, #ffffff);
  box-shadow:0 6px 22px color-mix(in srgb,var(--brand,#d2232a) 35%,transparent)}
.l2s-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.07)}
.l2s-btn--ghost{background:transparent;border:1px solid var(--l2s-line-s);color:var(--l2s-ink)}
.l2s-btn--ghost:hover{border-color:var(--l2s-ink)}
.l2s-btn--inv{background:#fff;color:#111}
.l2s-btn--inv:hover{transform:translateY(-2px)}
.l2s-mode{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--l2s-line-s);
  background:none;color:var(--l2s-ink);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:.15s}
.l2s-mode:hover{border-color:var(--l2s-ink)}
.l2s-burger{display:none;background:none;border:1px solid var(--l2s-line-s);border-radius:10px;
  width:44px;height:44px;cursor:pointer;color:var(--l2s-ink);font-size:18px}
@media(max-width:980px){
  .l2s-mainnav{position:fixed;inset:72px 0 auto 0;background:var(--l2s-surface);
    border-bottom:1px solid var(--l2s-line);flex-direction:column;align-items:stretch;
    padding:14px 18px 22px;display:none;box-shadow:var(--l2s-shadow);
    max-height:calc(100dvh - 72px);overflow:auto}
  .l2s-mainnav.open{display:flex}
  .l2s-mainnav a{padding:14px;font-size:16px}
  .l2s-cta{display:none}
  .l2s-burger{display:grid;place-items:center;margin-left:auto}
  /* burger-menu: subnavs altijd uitgeklapt, ingesprongen onder het hoofditem */
  .l2s-navi{display:block}
  .l2s-caret{display:none}
  .l2s-subnav{position:static;transform:none;opacity:1;visibility:visible;padding:0}
  .l2s-subnav__in{min-width:0;border:0;box-shadow:none;background:transparent;
    padding:0 0 8px 16px;gap:0}
  .l2s-mainnav .l2s-subnav__in a{padding:10px 12px;font-size:var(--l2s-fs-nav)}
}

/* ── hero ── */
.l2s-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--l2s-line);background:
  radial-gradient(1100px 480px at 85% -12%,
    color-mix(in srgb,var(--brand,#d2232a) calc(var(--l2s-glow)*100%),transparent),transparent 62%),
  linear-gradient(180deg,var(--l2s-bg2),var(--l2s-bg))}
.l2s-hero__in{display:grid;gap:clamp(24px,4vw,54px);align-items:center;
  padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(40px,6vw,80px)}
/* hero-achtergrondmedia (slots hero.media/hero.video — video wint): laag achter de tekst + scrim */
.l2s-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size}
.l2s-hero__bg img,.l2s-hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.l2s-hero__bg iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100cqw,calc(100cqh * 1.7778));height:max(100cqh,calc(100cqw * .5625));
  transform:translate(-50%,-50%)}
.l2s-hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  color-mix(in srgb,var(--l2s-bg) 92%,transparent),
  color-mix(in srgb,var(--l2s-bg) 62%,transparent) 52%,
  color-mix(in srgb,var(--l2s-bg) 24%,transparent))}
.l2s-hero__in{position:relative;z-index:1}
.l2s-hero--media .l2s-lead{color:var(--l2s-ink)}
/* media-tray: alléén in bewerkmodus (afbeelding-slot + video-URL-slot) */
.l2s-hero-mediatray{display:none}
body.l2s-editing .l2s-hero-mediatray{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  margin-top:22px;border:1.5px dashed var(--l2s-line-s);border-radius:14px;padding:12px 16px;
  background:color-mix(in srgb,var(--l2s-surface) 80%,transparent)}
.l2s-hero-mediatray__lab{font-size:var(--l2s-fs-label);font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--l2s-muted2)}
.l2s-hero-mediatray .l2s-ed-img{width:88px;height:56px;object-fit:cover;border-radius:9px;
  border:1px solid var(--l2s-line-s);background:var(--l2s-bg2)}
.l2s-hero-mediatray .l2s-ed{min-width:240px;min-height:20px;font-size:var(--l2s-fs-meta);word-break:break-all;
  border-bottom:1px dashed var(--l2s-line-s)}
.l2s-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--l2s-fs-label);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--l2s-muted)}
.l2s-eyebrow::before{content:"";width:26px;height:3px;background:var(--brand,#d2232a);border-radius:2px}
.l2s-h1{margin:14px 0 12px;font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.04;font-weight:875;letter-spacing:-.035em}
.l2s-h1--page{font-size:clamp(1.8rem,4vw,2.8rem);margin-top:0}
.l2s-h2{margin:5px 0 0;font-size:clamp(1.45rem,2.8vw,2rem);font-weight:850;letter-spacing:-.028em}
.l2s-lead{margin:0 0 24px;font-size:clamp(15px,1.6vw,17px);color:var(--l2s-muted);max-width:52ch}
.l2s-actions{display:flex;gap:12px;flex-wrap:wrap}
.l2s-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,160px));gap:10px;margin-top:30px}
.l2s-stat{background:color-mix(in srgb,var(--l2s-surface) 72%,transparent);
  border:1px solid var(--l2s-line);border-radius:14px;padding:13px 15px}
.l2s-stat b{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:875;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.l2s-stat span{font-size:var(--l2s-fs-label);color:var(--l2s-muted2);font-weight:750;letter-spacing:.07em;text-transform:uppercase}

/* ── secties & kaarten ── */
.l2s-blk{padding:clamp(36px,5.5vw,64px) 0}
.l2s-blk--alt{background:var(--l2s-bg2);border-block:1px solid var(--l2s-line)}
/* `flex-wrap` staat er sinds 27-09 (owner: mobiele ervaring). Zonder wrap stond de sectiekop
   («Onze sponsoren») met z'n link («Bekijk al onze sponsors», 270px) op één onbreekbare regel van
   405px in een kolom van 343px. Die 61px duwde de HELE pagina naar 420px breed, dus op een telefoon
   liep élke sectie rechts uit beeld — de lopende tekst, «Alle updates», de knop «Word lid» in de
   kopbalk. Eén ontbrekende regel, zichtbaar op de hele site. Bewust géén breakpoint: wrap grijpt
   precies wanneer het niet past, dus ook bij een langere clubnaam of een andere taal. */
.l2s-sechead{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-bottom:clamp(16px,2.6vw,26px)}
.l2s-link{margin-left:auto;flex:none;font-weight:750;font-size:var(--l2s-fs-nav);color:var(--l2s-ink);
  display:inline-flex;align-items:center;gap:7px;transition:.15s}
.l2s-link::after{content:"→";transition:.15s}
.l2s-link:hover::after{transform:translateX(3px)}
.l2s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.l2s-cards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.l2s-cards--4{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.l2s-cards{grid-template-columns:1fr}.l2s-cards--4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.l2s-cards--4{grid-template-columns:1fr}}
/* Op een telefoon staat de sectielink onder z'n kop in plaats van rechts ernaast (hij is daar toch
   gewrapt), en krijgt hij een raakvlak dat je kunt raken: 21px hoog was het, 44px is de vloer van
   ui-ux-design-system §8. Tekst mee omhoog naar 15px — dit is de leesmaat die de rest van het
   platform ook aanhoudt, en een clubsite wordt door dezelfde 60+ vrijwilligers gelezen. */
@media(max-width:640px){
  .l2s-sechead .l2s-link{margin-left:0}
  /* Élke sectielink, niet alleen die in een sectiekop: op de artikelpagina staat «Alle updates» in
     `.l2s-article__back` en die was 25px hoog. Gemeten op de live pagina, 27-09. */
  .l2s-link{min-height:44px;font-size:var(--ui-fs-sm,15px)}
  /* Kruimelpad-links waren 18px hoog: het zijn gewone <a>'s in een tekstregel, en `min-height`
     doet niets op een inline-element — vandaar ook `display:inline-flex`. */
  .l2s-crumbs a{display:inline-flex;align-items:center;min-height:44px}
}
.l2s-card{background:var(--l2s-surface);border:1px solid var(--l2s-line);border-radius:var(--l2s-r);
  overflow:hidden;transition:.16s;display:flex;flex-direction:column;box-shadow:var(--l2s-shadow)}
.l2s-card:hover{transform:translateY(-4px);box-shadow:var(--l2s-shadow-h);border-color:var(--l2s-line-s)}
.l2s-card__media{aspect-ratio:16/7.5;display:block;background:
  linear-gradient(150deg,color-mix(in srgb,var(--brand,#d2232a) 40%,var(--l2s-media-a)),var(--l2s-media-b) 72%);
  background-size:cover;background-position:center}
.l2s-card__media--sq{aspect-ratio:1/.82;background:
  linear-gradient(150deg,var(--l2s-media-a),var(--l2s-media-b));background-size:cover;background-position:center}
.l2s-card__body{padding:15px 17px 17px;display:grid;gap:5px;align-content:start}
.l2s-card__body time{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.l2s-card__body h3{margin:0;font-size:15.5px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.l2s-card__body p{margin:0;color:var(--l2s-muted);font-size:var(--l2s-fs-body)}
.l2s-price{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}

/* ── join-band ── */
.l2s-join{background:linear-gradient(135deg,var(--brand,#d2232a),
    color-mix(in srgb,var(--brand,#d2232a) 55%,#000));border-radius:calc(var(--l2s-r) + 5px);
  color:#fff;padding:clamp(26px,4.5vw,46px);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.l2s-join h2{color:#fff;flex-basis:100%;margin:0}
.l2s-join>div{flex:1;min-width:260px}
.l2s-join p{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:var(--l2s-fs-body);max-width:52ch}

/* ── partners-band ── */
.l2s-partnersband{border-top:1px solid var(--l2s-line);background:var(--l2s-bg2)}
.l2s-partners{display:flex;gap:14px 34px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:22px 0}
.l2s-plbl{font-size:var(--l2s-fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--l2s-muted2)}
.l2s-partner{display:inline-flex;align-items:center}
.l2s-pimg{height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.9;transition:.15s}
.l2s-pimg:hover{opacity:1}
.l2s-pimg--ondark{display:block}
.l2s-pimg--onlight{display:none}
:root[data-mode="light"] .l2s-pimg--ondark{display:none}
:root[data-mode="light"] .l2s-pimg--onlight{display:block}

/* ── copy/prose (tenant-pagina's) ── */
.l2s-copy{max-width:760px}
.l2s-prose{font-size:clamp(15px,1.6vw,17px);line-height:1.75;color:var(--l2s-muted)}

/* ── footer ── */
.l2s-sitefoot{border-top:1px solid var(--l2s-line);background:var(--l2s-bg2)}
.l2s-subft{padding:20px 0 28px;display:flex;gap:14px;align-items:center;font-size:var(--l2s-fs-meta);
  color:var(--l2s-muted2);flex-wrap:wrap}
.l2s-subft b{color:var(--l2s-muted)}
.l2s-sp{flex:1}

@media (prefers-reduced-motion:reduce){
  .l2s-site *{transition:none!important;animation:none!important}
}

/* ═════════════════════ TEMPLATE-VARIANT: CLUBHUIS (licht/fris — mockup 02) ═════════════════════
   Zelfde DOM, andere identiteit: pills, ronde knoppen, vlakke lichte hero, actieve nav = donkere pill. */
.l2s-site--clubhuis .l2s-btn{border-radius:999px}
.l2s-site--clubhuis .l2s-mainnav a{border-radius:999px}
.l2s-site--clubhuis .l2s-mainnav a[aria-current="page"]{background:var(--l2s-ink);color:var(--l2s-bg)}
.l2s-site--clubhuis .l2s-mainnav a[aria-current="page"]::after{display:none}
.l2s-site--clubhuis .l2s-hero{background:var(--l2s-surface)}
.l2s-site--clubhuis .l2s-eyebrow{background:color-mix(in srgb,var(--brand,#d2232a) 12%,transparent);
  color:var(--brand,#d2232a);border-radius:999px;padding:7px 14px;letter-spacing:.04em;text-transform:none;
  font-size:var(--l2s-fs-label);font-weight:750}
.l2s-site--clubhuis .l2s-eyebrow::before{display:none}
.l2s-site--clubhuis .l2s-h1{letter-spacing:-.03em}
.l2s-site--clubhuis .l2s-stat,.l2s-site--clubhuis .l2s-card{border-radius:18px}
.l2s-site--clubhuis .l2s-join{border-radius:24px}
.l2s-site--clubhuis .l2s-mode{border-radius:999px}

/* ═════════════════════ TEMPLATE-VARIANT: TRIBUNE (clubkrant — mockup 03) ═════════════════════
   Typografische identiteit: serif-koppen, paper-tint (licht), dubbele lijnen, kranten-nav. */
.l2s-site--tribune{
  --l2s-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
:root[data-mode="light"] .l2s-site--tribune{
  --l2s-bg:#f7f4ee; --l2s-bg2:#f2eee6; --l2s-surface:#fffdf9; --l2s-raise:#fffdf9;
  --l2s-ink:#191713; --l2s-muted:#6b655a; --l2s-muted2:#96907f;
  --l2s-line:rgba(25,23,19,.14); --l2s-line-s:rgba(25,23,19,.34);
  --l2s-media-a:#e9e4d8; --l2s-media-b:#f2eee6; --l2s-glow:.10;
  --l2s-shadow:0 6px 20px rgba(25,23,19,.07); --l2s-shadow-h:0 12px 34px rgba(25,23,19,.12);
}
.l2s-site--tribune .l2s-h1,.l2s-site--tribune .l2s-h2,
.l2s-site--tribune .l2s-card__body h3,.l2s-site--tribune .l2s-brand>span{font-family:var(--l2s-serif)}
.l2s-site--tribune .l2s-h1{font-weight:700;letter-spacing:-.015em}
.l2s-site--tribune .l2s-h2{font-weight:700}
.l2s-site--tribune .l2s-sitehead{border-bottom:3px double var(--l2s-line-s);background:var(--l2s-bg)}
.l2s-site--tribune .l2s-mainnav a{border-radius:0;font-size:var(--l2s-fs-nav);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.l2s-site--tribune .l2s-mainnav a[aria-current="page"]{box-shadow:inset 0 -2.5px 0 var(--brand,#d2232a)}
.l2s-site--tribune .l2s-mainnav a[aria-current="page"]::after{display:none}
.l2s-site--tribune .l2s-btn{border-radius:999px}
.l2s-site--tribune .l2s-btn--primary{background:var(--l2s-ink);box-shadow:none;color:var(--l2s-bg)}
.l2s-site--tribune .l2s-btn--primary:hover{background:var(--brand,#d2232a);color: var(--ui-on-brand, #ffffff)}
.l2s-site--tribune .l2s-hero{background:var(--l2s-bg)}
.l2s-site--tribune .l2s-eyebrow{letter-spacing:.2em}
.l2s-site--tribune .l2s-card{border-radius:6px;box-shadow:none;border-color:var(--l2s-line-s)}
.l2s-site--tribune .l2s-card:hover{transform:none;box-shadow:var(--l2s-shadow)}
.l2s-site--tribune .l2s-card__media{aspect-ratio:16/6.5}
.l2s-site--tribune .l2s-stat{border-radius:6px;border-color:var(--l2s-line-s)}
.l2s-site--tribune .l2s-sechead{border-bottom:2px solid var(--l2s-ink);padding-bottom:8px}
.l2s-site--tribune .l2s-join{border-radius:8px}
.l2s-site--tribune .l2s-sitefoot{border-top:3px double var(--l2s-line-s)}

/* ── sponsorstrook (klantgroep-slot, plan §3.5) ── */
.l2s-sponsorband{border-top:1px solid var(--l2s-line);background:var(--l2s-bg2)}
.l2s-sponsors{display:flex;gap:12px 30px;align-items:center;justify-content:center;flex-wrap:wrap;padding:20px 0}
/* De sponsortegels waren 34px hoog; het zijn links naar de sponsor, dus raakvlakvloer 44px. */
.l2s-sponsor{display:inline-flex;align-items:center;min-height:44px;gap:9px;font-weight:800;font-size:15px;color:var(--l2s-muted);transition:.14s}
a.l2s-sponsor:hover{color:var(--l2s-ink)}
.l2s-slogo{height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.92;transition:.15s}
a.l2s-sponsor:hover .l2s-slogo{opacity:1}
.l2s-sdot{width:9px;height:9px;border-radius:3px;background:var(--brand);opacity:.85;flex:none}
.l2s-ext{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2)}
/* lege groep: bezoekers zien niets; alléén in bewerkmodus blijft de shell + dropdown staan */
.l2s-sponsorband--empty{display:none}
body.l2s-editing .l2s-sponsorband--empty{display:block}
.l2s-sponsors-leeg{font-size:var(--l2s-fs-body);font-weight:600;color:var(--l2s-muted2);font-style:italic}

/* ── volledige site-pagina's (mockups 04–09): nieuws · teams · sponsorplein · kanaal-embed ── */
.l2s-crumbs{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:650;margin:0 0 14px}
.l2s-crumbs a:hover{color:var(--l2s-ink)}
.l2s-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px}
.l2s-fchip{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--l2s-line-s);border-radius:999px;padding:8px 15px;
  font-size:var(--l2s-fs-nav);font-weight:700;color:var(--l2s-muted);transition:.15s}
.l2s-fchip:hover{color:var(--l2s-ink);border-color:var(--l2s-ink)}
.l2s-fchip.is-actief{background:var(--l2s-ink);border-color:var(--l2s-ink);color:var(--l2s-bg)}
.l2s-newsgrid{margin-top:6px}
.l2s-card--pinned{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.l2s-card__media .l2s-chip{position:absolute;top:11px;left:11px}
.l2s-card__media{position:relative}
.l2s-chip{display:inline-flex;width:max-content;background:color-mix(in srgb,var(--l2s-bg) 55%,transparent);
  backdrop-filter:blur(6px);border:1px solid var(--l2s-line-s);color:var(--l2s-ink);border-radius:999px;
  padding:4px 11px;font-size:var(--l2s-fs-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* artikel */
.l2s-article__in{max-width:760px}
.l2s-article__meta{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:650;margin:2px 0 20px}
.l2s-article__body{color:var(--l2s-ink)}
.l2s-article__body p{margin:0 0 18px}
.l2s-article__body img{border-radius:12px;margin:14px 0}
.l2s-article__relhead{margin-top:34px;padding-top:22px;border-top:1px solid var(--l2s-line)}
.l2s-article__back{margin-top:24px}

/* teams */
.l2s-teamgrid .l2s-card__media{aspect-ratio:16/6.5}
.l2s-teammeta{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:650}
.l2s-sechd{margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.l2s-count{font-size:var(--l2s-fs-meta);font-weight:800;color:var(--l2s-muted2);background:color-mix(in srgb,var(--l2s-ink) 6%,transparent);
  border-radius:999px;padding:3px 10px}
.l2s-squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.l2s-speler{position:relative;background:var(--l2s-surface);border:1px solid var(--l2s-line);
  border-radius:var(--l2s-r);padding:18px 12px 14px;text-align:center;transition:.15s}
.l2s-speler:hover{transform:translateY(-3px);border-color:var(--l2s-line-s);box-shadow:var(--l2s-shadow-h)}
.l2s-speler__nr{position:absolute;top:9px;left:11px;font-size:16px;font-weight:900;
  color:color-mix(in srgb,var(--brand) 80%,var(--l2s-ink) 10%);font-variant-numeric:tabular-nums}
.l2s-speler__badge{position:absolute;top:9px;right:11px;font-size:var(--l2s-fs-label);font-weight:850;letter-spacing:.05em;
  text-transform:uppercase;color:var(--l2s-muted2);border:1px solid var(--l2s-line-s);border-radius:6px;padding:2px 6px}
.l2s-speler b{display:block;font-size:var(--l2s-fs-name);letter-spacing:-.01em;margin-top:8px}
.l2s-speler__pos{display:block;font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.l2s-pav{width:56px;height:56px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  font-weight:850;font-size:15px;color:var(--l2s-ink);border:1px solid var(--l2s-line-s);
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 30%,var(--l2s-media-a)),var(--l2s-media-b))}
img.l2s-pav{object-fit:cover}
.l2s-stafgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.l2s-staflid{display:flex;gap:12px;align-items:center;background:var(--l2s-surface);
  border:1px solid var(--l2s-line);border-radius:var(--l2s-r);padding:12px 14px}
.l2s-staflid .l2s-pav{width:44px;height:44px;margin:0;font-size:var(--l2s-fs-meta);flex:none}
.l2s-staflid b{display:block;font-size:var(--l2s-fs-name)}
.l2s-staflid small{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:650}
.l2s-teamfotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.l2s-teamfotos img{width:100%;border-radius:var(--l2s-r);border:1px solid var(--l2s-line)}
.l2s-privacynote{display:flex;gap:9px;align-items:baseline;border:1.5px dashed var(--l2s-line-s);
  border-radius:12px;padding:12px 14px;color:var(--l2s-muted);font-size:var(--l2s-fs-meta);margin-top:16px}

/* sponsorplein */
.l2s-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:10px}
.l2s-wall--klein{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.l2s-wallitem{display:grid;place-items:center;gap:6px;background:var(--l2s-surface);
  border:1px solid var(--l2s-line);border-radius:14px;min-height:92px;padding:14px;text-align:center;transition:.15s}
a.l2s-wallitem:hover{transform:translateY(-3px);border-color:var(--l2s-line-s);box-shadow:var(--l2s-shadow-h)}
.l2s-wallitem .l2s-slogo{height:40px;max-width:140px}
.l2s-wallitem .l2s-sname{font-weight:800;font-size:var(--l2s-fs-name)}
.l2s-wallitem small{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:600}
.l2s-join--klein{margin-top:34px;padding:clamp(20px,3vw,32px)}
/* sponsorplein: webmaster-rijen (keuze-slots) + lege/nieuwe-rij-shells alleen in bewerkmodus */
.l2s-wallrow{margin-top:6px}
.l2s-wallrow--leeg,.l2s-wallrow--nieuw{display:none}
body.l2s-editing .l2s-wallrow--leeg{display:block}
body.l2s-editing .l2s-wallrow--nieuw{display:block;border:1.5px dashed var(--l2s-line-s);
  border-radius:14px;padding:16px 18px;margin-top:26px}
/* uitgelichte producten: échte kanaalpagina in strip-modus (?ids=) — kaartstijl leeft dáár */
.l2s-uitgelicht-sectie{margin-top:34px}
.l2s-uitgelicht-sectie--leeg{display:none}
body.l2s-editing .l2s-uitgelicht-sectie--leeg{display:block;border:1.5px dashed var(--l2s-line-s);
  border-radius:14px;padding:16px 18px}
.l2s-uitgelicht-kies{display:none}
body.l2s-editing .l2s-uitgelicht-kies{display:grid;gap:8px;justify-items:start;margin:0 0 12px}
.l2s-embedframe--strip{min-height:460px;border:0;background:transparent}
/* open modal/cart-drawer in een embed → site-scroll op slot (het iframe meldt open/dicht) */
html.l2s-embed-lock,html.l2s-embed-lock body{overflow:hidden}

/* contact */
.l2s-contactwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media(max-width:860px){.l2s-contactwrap{grid-template-columns:1fr}}
.l2s-contactgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.l2s-contactcard{display:grid;gap:6px;background:var(--l2s-surface);border:1px solid var(--l2s-line);
  border-radius:var(--l2s-r);padding:16px 18px}
.l2s-contactcard b{font-size:var(--l2s-fs-name)}
.l2s-contactcard small{font-size:var(--l2s-fs-meta);color:var(--l2s-muted2);font-weight:600}
.l2s-contactcard .l2s-link{margin-left:0;font-size:var(--l2s-fs-nav);word-break:break-all}
.l2s-contactcard address{font-style:normal;font-size:var(--l2s-fs-body);color:var(--l2s-muted);line-height:1.55}
.l2s-contactcard--adres .l2s-btn{justify-self:start;margin-top:4px}
.l2s-contactlinks{display:flex;gap:16px;margin-top:2px}
.l2s-contactkvk{color:var(--l2s-muted2)}

/* kanaal-embed */
.l2s-embedwrap{padding-bottom:clamp(36px,5vw,64px)}
.l2s-embedframe{display:block;width:100%;min-height:640px;border:1px solid var(--l2s-line);
  border-radius:var(--l2s-r);background:var(--l2s-surface)}

/* template-voorbeeld (preview) — smalle balk bovenaan; alleen zichtbaar voor een beheerder die
   ?preview_template= opent. Nooit in de page-cache, dus nooit bij een bezoeker. */
.l2s-prevbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:10px clamp(14px,4vw,28px);background:var(--l2s-raise);border-bottom:1px solid var(--l2s-line-s);
  color:var(--l2s-ink);font-size:var(--ui-fs-sm,15px)}
.l2s-prevbar__dot{width:9px;height:9px;border-radius:50%;background:var(--l2s-focus);flex:none}
.l2s-prevbar__uitleg{color:var(--l2s-muted);margin-right:auto}
.l2s-prevbar__acties{display:flex;gap:10px;flex-wrap:wrap}
.l2s-prevbar a{display:inline-flex;align-items:center;min-height:var(--ui-target,44px);padding:0 14px;
  border-radius:var(--l2s-rs);border:1px solid var(--l2s-line-s);color:var(--l2s-ink);text-decoration:none;font-weight:600}
.l2s-prevbar a:hover{border-color:var(--l2s-focus)}
/* In het kiezer-iframe wordt de balk niet gerenderd (render.php) — dus hier ook geen verbergregel. */