/* KZ-Pagina — een hele pagina uit vaste secties (kop, geleding-kop, intro, dag, tekst,
   tekst + foto, route, tickets, uitslagen, video, vakken, kaart, vragen, motto), beheerd in KZ-Studio (Website → Pagina's).

   Huisstijl: rood #E83F35 en wit als volle vlakken, koppen in Roboto Condensed
   (vet, hoofdletters, 80% breed, -0.04em), tekst in Work Sans, geen schaduwen
   of verlopen. Alles reageert op de breedte van het blok zelf (container
   queries), niet van het scherm, zodat het voorbeeld in KZ-Studio op
   "telefoon" precies zo breekt als de site op een telefoon.

   Houd gelijk met KZ-Studio: src/pages/website/pagina.css is een kopie. */

.kzp{--kzp-red:#e83f35;--kzp-white:#fff;--kzp-black:#111;
  --kzp-display:"Roboto Condensed",Impact,"Arial Narrow",sans-serif;--kzp-body:"Work Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  box-sizing:border-box;container-type:inline-size;container-name:kzp;width:100%;
  font-family:var(--kzp-body);color:var(--kzp-red);font-size:17px;line-height:1.5;text-align:left}
.kzp *,.kzp *::before,.kzp *::after{box-sizing:border-box}

/* Over de volle breedte van het venster, ook binnen een smalle themakolom.
   overflow-x:clip voorkomt een horizontale schuifbalk door de 100vw. */
html:has(.kzp--vol){overflow-x:clip}
.kzp--vol .kzp__sectie{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

.kzp .kzp__sectie{display:block;margin-top:0;margin-bottom:0;padding:60px 0}
.kzp .kzp__binnen{max-width:1235px;margin:0 auto;padding:0 24px}
.kzp .kzp__smal{max-width:948px}

/* Banden: op wit is alle tekst rood, op rood wit — zoals de oude pagina */
.kzp .kzp__band--rood{background:var(--kzp-red);color:var(--kzp-white)}
.kzp .kzp__band--wit{background:var(--kzp-white);color:var(--kzp-red)}

/* Koppen in Roboto Condensed 700, gewone hoofd- en kleine letters. De grote
   kop (en die boven de vragen) is precies de WPBakery-kop KZ-HEAD van de
   andere pagina's: 48px, regelhoogte 60px, #e83f35, in hoofdletters. */
.kzp .kzp__kop-titel,.kzp .kzp__titel,.kzp .kzp__groep-titel,.kzp .kzp__onderdeel-titel,.kzp .kzp__blok-titel,.kzp .kzp__stap-titel{font-family:var(--kzp-display);font-weight:700;letter-spacing:0;line-height:1.1;margin:0;padding:0;border:0;background:none;text-transform:none;color:inherit}
.kzp .kzp__kop-titel{font-size:48px;line-height:60px;font-style:normal;text-transform:uppercase;text-align:center;color:#e83f35;overflow-wrap:break-word;hyphens:auto}
.kzp .kzp__band--rood .kzp__kop-titel{color:var(--kzp-white)}
.kzp .kzp__titel{font-size:54px;margin-bottom:28px}
.kzp .kzp__groep-titel{font-size:44px;margin:48px 0 12px}

/* Kop: alleen een grote titel op wit, met evenveel ruimte erboven als eronder
   (het thema "Fullwidth w/o Title" zet zelf geen ruimte boven de inhoud).
   Staat er een sectie boven (kop midden op de pagina), dan meer. */
.kzp .kzp__kop{padding:16px 0;background:var(--kzp-white)}
.kzp .kzp__sectie + .kzp__kop{padding-top:40px}

/* Geleding-kop: bovenaan elke pagina van een geleding, zoals de oude pagina's
   (Het Hof, de Raad van Elf …). Op wit de knop terug naar het overzicht en de
   titel (KZ-HEAD), daaronder een rode band met de afbeelding van de geleding
   in een witte cirkel van 200px (kz-groep-afbeelding). */
.kzp .kzp__geleding{padding:0}
.kzp .kzp__geleding-kop{padding-top:16px;padding-bottom:35px;text-align:center}
.kzp .kzp__geleding-band{padding:30px 0}
.kzp .kzp__geleding-beeld{display:block;width:200px;height:200px;margin:0 auto;border:2px solid var(--kzp-white);border-radius:50%;background:var(--kzp-white);overflow:hidden}
.kzp .kzp__geleding-beeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0}
.kzp .kzp__geleding-beeld--logo img{object-fit:contain;padding:30px}

/* Rasters: tekst + beeld naast elkaar, op smal onder elkaar */
.kzp .kzp__raster{display:grid;gap:44px;align-items:start}
.kzp .kzp__raster--8-4{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center}
.kzp .kzp__raster--4-8{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kzp .kzp__raster--6-6{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.kzp .kzp__tekstkolom{min-width:0}
.kzp .kzp__beeldkolom{min-width:0}
.kzp--foto-links .kzp__beeldkolom{order:-1}
.kzp--foto-rechts.kzp__dag .kzp__raster--4-8,.kzp--foto-rechts.kzp__tekstsectie .kzp__raster--4-8,
.kzp--foto-rechts.kzp__uitslagen-sectie .kzp__raster--4-8{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* Tekst uit KZ-Studio: alinea's, tussenkopjes, opsommingen, vet, cursief, links */
.kzp .kzp__tekst{font-size:17px;line-height:1.5;color:inherit}
.kzp .kzp__tekst > *:first-child{margin-top:0}
.kzp .kzp__tekst > *:last-child{margin-bottom:0}
.kzp .kzp__tekst p{margin:0 0 1.2em;padding:0;color:inherit}
.kzp .kzp__tekst h4{font-family:var(--kzp-body);font-weight:400;font-size:26px;line-height:1.2;margin:1.3em 0 .6em;padding:0;color:inherit;text-transform:none;letter-spacing:0}
.kzp .kzp__tekst ul{margin:0 0 1.2em;padding:0 0 0 1.2em;list-style:disc}
.kzp .kzp__tekst li{margin:0 0 .3em;padding:0;color:inherit}
.kzp .kzp__tekst a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kzp .kzp__tekst strong{font-weight:700;color:inherit}

/* Intro */
.kzp .kzp__intro-tekst{font-weight:700;font-size:19px;line-height:1.5;margin:0 0 1em}
.kzp .kzp__logo{display:block;width:100%;max-width:300px;height:auto;margin:0 0 0 auto}

/* Datum + Sync: een Intro van een andere pagina met de datum erboven (als de
   tijd van een Dag, maar mag over twee regels), het beeld om en om links en
   rechts */
.kzp .kzp__datum{white-space:normal}
.kzp--foto-links.kzp__datum-sync .kzp__raster--8-4{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kzp--foto-links.kzp__datum-sync .kzp__logo{margin:0 auto 0 0}

/* Dag: onderdelen onder elkaar, zonder lijnen, met lucht ertussen */
.kzp .kzp__onderdeel{margin:0;padding:0;border:0}
.kzp .kzp__onderdeel + .kzp__onderdeel{margin-top:44px}
.kzp .kzp__onderdeel-titel{font-size:34px;margin:0 0 26px}
/* De tijd: een kleine contrastkop boven de titel, zoals de Contrastkop van
   KZ-Studio — effen blok, hoofdletters, versmald tot 80%. Rood op wit, wit
   op rood. */
.kzp .kzp__tijd{display:block;width:fit-content;margin:0 0 10px;padding:5px 10px 3px;background:var(--kzp-red);color:var(--kzp-white);
  font-family:var(--kzp-display);font-weight:700;font-size:18px;line-height:1;letter-spacing:-0.04em;text-transform:uppercase;white-space:nowrap;
  transform:scaleX(.8);transform-origin:left center}
.kzp .kzp__band--rood .kzp__tijd{background:var(--kzp-white);color:var(--kzp-red)}

/* Tekst: blokken met een tussenkop, zoals de onderdelen van een dag */
.kzp .kzp__blok + .kzp__blok{margin-top:40px}
.kzp .kzp__blok-titel{font-size:34px;margin:0 0 18px}
.kzp .kzp__intro-tekst + .kzp__blok{margin-top:36px}

/* Route: een tijdlijn. Een doorlopende lijn met bolletjes; een punt (start,
   tussenstop, einde) is een groot bolletje met een kop, een stap een klein
   bolletje met een pijltje. De afstand staat er klein onder. */
.kzp .kzp__stappen{list-style:none;margin:0;padding:0}
.kzp .kzp__stap{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;margin:0;padding:0 0 22px;list-style:none}
.kzp .kzp__stap::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;background:currentColor;opacity:.35}
.kzp .kzp__stap:first-child::before{top:20px}
.kzp .kzp__stap:last-child{padding-bottom:0}
.kzp .kzp__stap:last-child::before{bottom:auto;height:20px}
.kzp .kzp__stap:only-child::before{display:none}
.kzp .kzp__stap-teken{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--kzp-red);color:var(--kzp-white)}
.kzp .kzp__stap--punt .kzp__stap-teken::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--kzp-white)}
.kzp .kzp__stap--stap .kzp__stap-teken{width:30px;height:30px;margin:5px;background:var(--kzp-white);color:var(--kzp-red);border:2px solid var(--kzp-red)}
.kzp .kzp__stap-teken svg{display:block;width:18px;height:18px}
.kzp .kzp__band--rood .kzp__stap-teken{background:var(--kzp-white);color:var(--kzp-red)}
.kzp .kzp__band--rood .kzp__stap--punt .kzp__stap-teken::after{background:var(--kzp-red)}
.kzp .kzp__band--rood .kzp__stap--stap .kzp__stap-teken{background:var(--kzp-red);color:var(--kzp-white);border-color:var(--kzp-white)}
.kzp .kzp__stap-inhoud{min-width:0;padding-top:6px}
.kzp .kzp__stap--punt .kzp__stap-inhoud{padding-top:4px}
.kzp .kzp__stap-titel{font-size:26px;line-height:1.15;margin:0 0 6px}
.kzp .kzp__stap-tekst{margin:0 0 4px;padding:0;font-size:17px;line-height:1.4;color:inherit}
.kzp .kzp__stap-afstand{display:inline-block;font-family:var(--kzp-display);font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;opacity:.7}
.kzp .kzp__route .kzp__raster--6-6{align-items:start}
.kzp .kzp__kaart{display:block}
.kzp .kzp__kaart img{display:block;width:100%;height:auto;max-width:none;margin:0;border:0}

/* Uitslagen: zoals het KZ-Tab Widget. Jaren als pillen, categorieën als tabs
   en de uitslag in een rood vlak; op een rode band omgekeerd. */
.kzp .kzp__uitslagen{font-family:var(--kzp-display);font-weight:700;--kzp-u-voor:var(--kzp-red);--kzp-u-achter:var(--kzp-white)}
.kzp .kzp__band--rood .kzp__uitslagen{--kzp-u-voor:var(--kzp-white);--kzp-u-achter:var(--kzp-red)}
.kzp .kzp__jaren,.kzp .kzp__categorieen{display:flex;flex-wrap:wrap;gap:10px}
.kzp .kzp__jaren{margin:0 0 28px}
.kzp .kzp__categorieen{gap:4px}
.kzp .kzp__jaar,.kzp .kzp__categorie{appearance:none;margin:0;font-family:var(--kzp-display);font-weight:700;font-size:18px;line-height:1;letter-spacing:0;text-transform:uppercase;cursor:pointer;box-shadow:none;text-shadow:none}
.kzp .kzp__jaar{padding:12px 24px;border:2px solid var(--kzp-u-voor);border-radius:999px;background:var(--kzp-u-achter);color:var(--kzp-u-voor)}
.kzp .kzp__jaar[aria-pressed="true"]{background:var(--kzp-u-voor);color:var(--kzp-u-achter)}
.kzp .kzp__categorie{padding:14px 22px 12px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--kzp-u-voor)}
.kzp .kzp__categorie[aria-pressed="true"]{background:var(--kzp-u-voor);color:var(--kzp-u-achter)}
.kzp .kzp__jaar:focus-visible,.kzp .kzp__categorie:focus-visible{outline:3px solid var(--kzp-black);outline-offset:2px}
.kzp .kzp__jaar-paneel[hidden],.kzp .kzp__uitslag[hidden]{display:none}
.kzp .kzp__uitslag{list-style:none;margin:0;padding:22px 26px;border-radius:0 0 8px 8px;background:var(--kzp-u-voor);color:var(--kzp-u-achter)}
.kzp .kzp__uitslag-rij{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding:5px 0;font-size:19px;line-height:1.3;list-style:none}
.kzp .kzp__uitslag-rij::before{content:none}
.kzp .kzp__uitslag-rij:first-child{font-size:25px}
.kzp .kzp__uitslag-punten{flex:0 0 auto}
.kzp .kzp__uitslagen-sectie .kzp__raster--4-8{align-items:start}

/* Video: een YouTube-video in 16:9, hooguit 1000px breed en gecentreerd */
.kzp .kzp__video-sectie .kzp__titel{text-align:center}
.kzp .kzp__video{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;background:var(--kzp-black)}
.kzp .kzp__video iframe{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0}

/* Vakken: tekst naast een KZ-Vindt Grid (het element zelf, kz-vindt.css),
   eventueel met een kaart eronder. Het grid volgt hier de kleuren van de
   pagina en blijft op een telefoon in zijn kolommen staan (de koppen
   VRIJDAG/ZATERDAG/ZONDAG moeten boven hun vakken blijven), alleen kleiner. */
.kzp .kzp__vakken-sectie .kzp__raster--6-6{align-items:start}
.kzp .kzp__vakken-titel{font-family:var(--kzp-display);font-weight:700;font-size:30px;line-height:1.1;margin:0 0 18px;padding:0;color:inherit;text-transform:uppercase;letter-spacing:0}
.kzp .kzp__vakken-titel small{font-size:15px;font-weight:700;letter-spacing:.02em;white-space:normal}
.kzp .kz-vindt-grid{grid-template-columns:repeat(var(--kz-columns,3),minmax(0,1fr))!important;gap:16px;font-family:var(--kzp-display)}
.kzp .kz-vindt-header{color:inherit;font-size:clamp(18px,3.2cqi,40px);overflow-wrap:anywhere}
.kzp .kz-vindt-item{padding:16px;background:var(--kzp-red);color:var(--kzp-white);min-width:0;overflow-wrap:anywhere}
.kzp .kz-vindt-date{font-size:clamp(26px,3.6cqi,50px);white-space:nowrap;overflow-wrap:normal}
.kzp .kz-vindt-time{font-size:clamp(14px,2cqi,24px);line-height:1.15}
.kzp .kz-vindt-grid.kz-vindt-inverted .kz-vindt-header{color:var(--kzp-white)}
.kzp .kz-vindt-grid.kz-vindt-inverted .kz-vindt-item{background:var(--kzp-white);color:var(--kzp-red)}
.kzp .kz-vindt-grid.kz-vindt-inverted .kz-vindt-item.kz-vindt-empty{background:transparent;border-color:rgba(255,255,255,.6)}
.kzp .kz-vindt-item.kz-vindt-empty{background:transparent;border:2px dashed rgba(232,63,53,.35)}
.kzp a.kz-vindt-item.kz-vindt-link,.kzp a.kz-vindt-item.kz-vindt-link:hover{color:var(--kzp-white)}
.kzp .kz-vindt-inverted a.kz-vindt-item.kz-vindt-link,.kzp .kz-vindt-inverted a.kz-vindt-item.kz-vindt-link:hover{color:var(--kzp-red)}
.kzp a.kz-vindt-item.kz-vindt-link:focus-visible{outline:3px solid var(--kzp-black);outline-offset:3px}

/* Kaart: Google Maps in een vlak met een balk eronder (adres + Route plannen),
   over de volle breedte van de sectie. */
.kzp .kzp__kaart-sectie .kzp__titel{text-align:center}
.kzp .kzp__kaartblok{border:3px solid var(--kzp-red);background:var(--kzp-red)}
.kzp .kzp__band--rood .kzp__kaartblok{border-color:var(--kzp-white);background:var(--kzp-white)}
.kzp .kzp__kaartvenster{position:relative;aspect-ratio:21/9;min-height:280px;background:rgba(17,17,17,.08)}
.kzp .kzp__kaartvenster iframe{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0}
.kzp .kzp__kaartbalk{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:16px 20px;color:var(--kzp-white)}
.kzp .kzp__band--rood .kzp__kaartbalk{color:var(--kzp-red)}
.kzp .kzp__adres{margin:0;padding:0;font-family:var(--kzp-display);font-weight:700;font-size:26px;line-height:1.1;text-transform:uppercase;color:inherit}
.kzp .kzp__kaartbalk .kz-button-wrapper{margin:0!important}

/* Foto's: vaste verhouding 3:2, uitsnede rond het focuspunt */
.kzp .kzp__fotos{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.kzp .kzp__foto{display:block;margin:0;padding:0;aspect-ratio:3/2;overflow:hidden;background:rgba(17,17,17,.08)}
.kzp .kzp__band--rood .kzp__foto{background:rgba(255,255,255,.15)}
.kzp .kzp__foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border:0}
/* Heel tonen (plattegrond, flyer): geen uitsnede, klikbaar om groot te openen */
.kzp .kzp__foto--heel{aspect-ratio:auto;background:none!important}
.kzp .kzp__foto--heel a{display:block}
.kzp .kzp__foto--heel img{height:auto;object-fit:contain}

/* Knoppen: geen eigen opmaak. KZ-Pagina tekent ze met het element KZ-Knop
   zelf (KZ_Element_Button::render(): KZ-KNOP-ROOD op wit, KZ-KNOP-WIT op
   rood), dus ze zijn gelijk aan elke andere KZ-Knop op de site. */

/* Tickets (sjabloon "evenementen"): een kop zoals bij de vragen en 1, 2 of 3
   blokken KZ-Evenement Info naast elkaar. De blokken zelf zijn het element
   (kz-evenement-info.css); kz-evenement-info.js maakt blokken naast elkaar
   even hoog. */
.kzp .kzp__evenementen .kzp__kop-titel{margin-bottom:28px}
.kzp .kzp__evenementen-rij{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:stretch}
.kzp .kzp__evenementen--2 .kzp__evenementen-rij{grid-template-columns:repeat(2,minmax(0,1fr))}
.kzp .kzp__evenementen--3 .kzp__evenementen-rij{grid-template-columns:repeat(3,minmax(0,1fr))}
.kzp .kzp__evenement{min-width:0}
.kzp .kzp__evenement > .kz-evt{height:100%}
/* Op een rode band omgekeerd: rood en wit wisselen om (de tekst wordt wit),
   zodat een blok niet wegvalt tegen de achtergrond. Een Seizoenskaart, die
   al omgekeerd is, wordt dan juist gewoon wit. Het logo kleurt mee: wit op
   rood, en op een witte kop rood via het filter #kzp-rood. */
.kzp .kzp__band--rood .kz-evt{--kz-evt-red:#fff;--kz-evt-white:#e83f35;--kz-evt-black:#fff;--kz-evt-red-dark:#f1e4e3;--kz-evt-red-darker:#e6d0ce}
.kzp .kzp__band--rood .kz-evt.kz-evt--seizoen{--kz-evt-black:#111}
.kzp .kzp__band--rood .kz-evt:not(.kz-evt--seizoen) .kz-evt__logo{filter:url(#kzp-rood)}
.kzp .kzp__band--rood .kz-evt--seizoen .kz-evt__logo{filter:brightness(0) invert(1)}
.kzp .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__feiten li{border-bottom-color:rgba(232,63,53,.7)}
.kzp .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__knop:hover{background:#b82a22;border-color:#b82a22}
.kzp .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__knop:active{background:#8f1f19;border-color:#8f1f19}

/* Vragen: lijnen en vragen in de kleur van de tekst, dus rood op wit en wit op rood */
.kzp .kzp__faq .kzp__kop-titel{margin-bottom:8px}
.kzp .kzp__vraag{margin:0;padding:0;border-bottom:2px solid currentColor}
.kzp .kzp__groep-titel + .kzp__vraag{border-top:2px solid currentColor}
.kzp .kzp__vraag summary{display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;padding:16px 0;margin:0;
  font-family:var(--kzp-display);font-weight:700;font-size:26px;line-height:1.2;color:inherit}
.kzp .kzp__vraag summary::-webkit-details-marker{display:none}
.kzp .kzp__vraag summary::marker{content:""}
.kzp .kzp__vraag summary > span{flex:1 1 auto}
.kzp .kzp__vraag summary::after{content:"+";flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--kzp-red);color:var(--kzp-white);font-family:var(--kzp-body);font-size:22px;line-height:1;margin-top:1px}
.kzp .kzp__band--rood .kzp__vraag summary::after{background:var(--kzp-white);color:var(--kzp-red)}
.kzp .kzp__vraag[open] summary::after{content:"−"}
.kzp .kzp__vraag summary:focus-visible{outline:3px solid var(--kzp-black);outline-offset:3px}
.kzp .kzp__antwoord{padding:0 0 20px}
.kzp .kzp__slot{margin-top:40px;text-align:center}
.kzp .kzp__slot p{margin-bottom:.4em;line-height:1.3}

/* Motto: een band die meedoet met om en om. De svg's zijn wit; op een witte
   band maakt het filter #kzp-rood (in de sectie zelf) ze rood. */
.kzp .kzp__motto{padding:40px 0}
.kzp .kzp__motto .kz-motto{margin:0!important}
.kzp .kzp__motto .kz-motto img{display:inline-block}
.kzp .kzp__band--wit.kzp__motto .kz-motto img{filter:url(#kzp-rood)}
.kzp .kzp__filter{position:absolute;width:0;height:0;overflow:hidden}

/* HJC: een pagina van de jeugdafdeling De Krössels (naam "hjc" of "hjc-…")
   krijgt kzp--hjc. Wat rood is wordt om en om geel en groen: elke sectie
   heeft een accent (kzp--accent-geel/-groen, zie kleuren()) dat de plaats van
   --kzp-red inneemt, ook in knoppen, ticketblokken en het Vakken-grid. Alle
   tekst is zwart, ook op geel en groen; het KZ-logo en het motto ook. */
.kzp.kzp--hjc{--kzp-geel:#ffdd18;--kzp-groen:#0ea14b;--kzp-black:#111}
.kzp--hjc .kzp--accent-geel{--kzp-red:var(--kzp-geel)}
.kzp--hjc .kzp--accent-groen{--kzp-red:var(--kzp-groen)}
.kzp--hjc .kzp__sectie{--kleur-rood:var(--kzp-red);--kleur-wit:#fff}
.kzp.kzp--hjc,.kzp.kzp--hjc *,.kzp.kzp--hjc *::before,.kzp.kzp--hjc *::after,
.kzp.kzp--hjc .kz-evt .kz-evt__knop{color:var(--kzp-black)!important}
.kzp--hjc .kzp__logo--standaard,.kzp--hjc .kz-evt__logo,.kzp--hjc .kzp__motto .kz-motto img{filter:brightness(0)!important}
.kzp.kzp--hjc .kz-vindt-item.kz-vindt-empty{border-color:rgba(17,17,17,.3)}
.kzp--hjc .kz-evt{--kz-evt-red:var(--kzp-red);--kz-evt-red-dark:color-mix(in srgb,var(--kzp-red) 85%,#000);--kz-evt-red-darker:color-mix(in srgb,var(--kzp-red) 70%,#000)}
.kzp--hjc .kzp__band--rood .kz-evt{--kz-evt-red:#fff;--kz-evt-white:var(--kzp-red);--kz-evt-red-dark:#f2f2f2;--kz-evt-red-darker:#e6e6e6}
.kzp.kzp--hjc .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__feiten li{border-bottom-color:rgba(17,17,17,.4)}
.kzp.kzp--hjc .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__knop:hover{background:color-mix(in srgb,var(--kzp-red) 85%,#000);border-color:color-mix(in srgb,var(--kzp-red) 85%,#000)}
.kzp.kzp--hjc .kzp__band--rood .kz-evt.kz-evt--seizoen .kz-evt__knop:active{background:color-mix(in srgb,var(--kzp-red) 70%,#000);border-color:color-mix(in srgb,var(--kzp-red) 70%,#000)}

/* Smal (telefoon): alles onder elkaar, tekst eerst en de foto's eronder */
@container kzp (max-width: 760px){
  .kzp .kzp__sectie{padding:36px 0}
  .kzp .kzp__kop{padding:8px 0}
  .kzp .kzp__sectie + .kzp__kop{padding-top:28px}
  .kzp .kzp__geleding{padding:0}
  .kzp .kzp__geleding-kop{padding-top:8px;padding-bottom:24px}
  .kzp .kzp__geleding-band{padding:24px 0}
  .kzp .kzp__binnen{padding:0 18px}
  .kzp .kzp__raster,.kzp .kzp__raster--8-4,.kzp .kzp__raster--4-8,.kzp .kzp__raster--6-6,
  .kzp--foto-rechts.kzp__dag .kzp__raster--4-8,.kzp--foto-rechts.kzp__tekstsectie .kzp__raster--4-8,
  .kzp--foto-rechts.kzp__uitslagen-sectie .kzp__raster--4-8,
  .kzp--foto-links.kzp__datum-sync .kzp__raster--8-4{grid-template-columns:minmax(0,1fr);gap:28px}
  .kzp--foto-links .kzp__beeldkolom{order:0}
  .kzp .kzp__titel{font-size:38px;margin-bottom:20px}
  .kzp .kzp__groep-titel{font-size:32px;margin-top:36px}
  .kzp .kzp__onderdeel-titel{font-size:27px;margin-bottom:16px}
  .kzp .kzp__blok-titel{font-size:27px;margin-bottom:14px}
  .kzp .kzp__blok + .kzp__blok{margin-top:30px}
  .kzp .kzp__stap-titel{font-size:22px}
  .kzp .kzp__jaren{gap:6px;margin-bottom:20px}
  .kzp .kzp__jaar{padding:9px 16px;font-size:16px}
  .kzp .kzp__categorie{padding:11px 12px 9px;font-size:15px}
  .kzp .kzp__uitslag{padding:16px 18px}
  .kzp .kzp__uitslag-rij{font-size:17px}
  .kzp .kzp__uitslag-rij:first-child{font-size:21px}
  .kzp .kzp__onderdeel + .kzp__onderdeel{margin-top:32px}
  .kzp .kzp__tekst{font-size:16px}
  .kzp .kzp__tekst h4{font-size:22px}
  .kzp .kzp__intro-tekst{font-size:17px}
  .kzp .kzp__logo,.kzp--foto-links.kzp__datum-sync .kzp__logo{max-width:180px;margin:0 auto}
  .kzp .kzp__dag .kzp__fotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kzp .kzp__dag .kzp__foto--heel{grid-column:1/-1}
  .kzp .kzp__vraag summary{font-size:21px}
  .kzp .kzp__evenementen--2 .kzp__evenementen-rij,
  .kzp .kzp__evenementen--3 .kzp__evenementen-rij{grid-template-columns:minmax(0,1fr)}
  .kzp .kz-vindt-grid{gap:8px}
  .kzp .kz-vindt-item{padding:10px}
  .kzp .kz-vindt-header{font-size:clamp(15px,5.4cqi,30px);margin-bottom:4px}
  .kzp .kz-vindt-date{font-size:clamp(22px,8cqi,44px);letter-spacing:-1px}
  .kzp .kz-vindt-label{font-size:12px}
  .kzp .kz-vindt-time{font-size:clamp(12px,3.6cqi,18px)}
  .kzp .kzp__vakken-titel{font-size:24px}
  .kzp .kzp__kaartvenster{aspect-ratio:4/3;min-height:0}
  .kzp .kzp__adres{font-size:21px}
}
/* Heel smal (kleine telefoon): de grote kop iets kleiner, zodat een lang woord
   als CARNAVALSOPTOCHT binnen beeld blijft. */
@container kzp (max-width: 420px){
  .kzp .kzp__kop-titel{font-size:38px;line-height:46px}
}