/* De opmaak van rsz.nl, overgenomen van de live site op 14 september 2026.
   Gemeten met de browser op de pagina zelf, niet nagemaakt uit het hoofd:
   kleuren, maten, letterafstanden en de eventkaart (.rsz-ec) komen letterlijk
   uit de stylesheet van de site. */
:root{
  --rood:#D6001D; --rood-donker:#B00017;
  --ink:#232323; --ink-kop:#141414; --ink-2:#555; --ink-3:#777; --ink-4:#888; --ink-5:#666;
  --lijn:#E8E8E8; --vlak:#FFF; --grond:#FFF;
  --kop:'Rohn','Rohn Bold',Oswald,Arial,sans-serif;
  /* De site zet Rohn Bold op de body maar Jost in de tekstkolommen; de
     lopende tekst is dus Jost 300, de koppen zijn Rohn Bold. */
  --body:'Jost','Rohn','Rohn Bold',Arial,sans-serif;
  --breed:1370px;
}
@font-face{font-family:'Rohn';src:url('fonts/Rohn-Bold.woff2') format('woff2');font-weight:400 700;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--grond);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--rood)}
.binnen{max-width:var(--breed);margin:0 auto;padding-left:20px;padding-right:20px}

/* koppen zoals op de site: gecentreerd, in kapitalen, met de rode // ervoor */
h1,h2,h3{font-family:var(--kop);margin:0;text-transform:uppercase;font-weight:500}
h1{font-size:42px;line-height:1.3}
h2.sectie{font-size:25.6px;line-height:1.3;text-align:center;color:var(--ink);margin:0 0 26px}
h2.sectie i{font-style:normal;color:var(--rood)}
@media(max-width:700px){ h1{font-size:30px} h2.sectie{font-size:21px} }

/* de rode balk met de categorieen, zoals de tweede navigatiebalk op de site */
.balk{background:var(--rood);color:#fff}
.balk .binnen{display:flex;gap:0;flex-wrap:wrap;align-items:center;padding-top:0;padding-bottom:0}
.balk a{color:#fff;text-decoration:none;font-size:14px;letter-spacing:.4px;text-transform:uppercase;
        padding:13px 16px;display:block;white-space:nowrap}
.balk a + a{border-left:1px solid rgba(255,255,255,.35)}
.balk a:hover{background:var(--rood-donker)}
.balk a[aria-current="true"]{background:var(--rood-donker)}

/* de zwarte kop met het logo */
.top{background:#fff;border-bottom:1px solid var(--lijn)}
.top .binnen{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.top img.logo{height:54px;width:auto;display:block}
.top .naam{font-family:var(--kop);font-size:15px;letter-spacing:1.4px;text-transform:uppercase}
.top .tel{margin-left:auto;font-size:13px;color:var(--ink-3);text-decoration:none;white-space:nowrap}

/* de held: foto over de volle breedte met donkere sluier en witte kop */
.held{position:relative;background:#141414;overflow:hidden}
.held img.achter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
                 transition:opacity .5s ease;border:0}
.held img.achter.er{opacity:.62}
.held .sluier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.6))}
.held .binnen{position:relative;z-index:1;padding-top:64px;padding-bottom:104px;text-align:center}
.held h1{color:#fff;display:inline-flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap}
.held h1{color:#fff;display:inline-block;position:relative;padding:28px 45px;
         background:url('https://www.rsz.nl/wp-content/uploads/2021/02/gekleurde-ring-rechts-open.png') 0 0/100px auto no-repeat;
         font-size:42px;line-height:1.3;font-weight:500}
@media(max-width:700px){ .held h1{font-size:27px;padding:20px 26px;background-size:66px auto} }
/* De schuine witte rand onder de kopband, zoals op de site. */
.held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:#fff;
             clip-path:polygon(100% 0,100% 100%,0 100%)}
@media(max-width:700px){ .held::after{height:34px} }
.held p{margin:14px auto 0;max-width:62ch;color:#EDEDED;font-size:16.5px}
.held p.onder{margin-top:6px;font-family:var(--kop);font-size:13px;letter-spacing:1.6px;
              text-transform:uppercase;color:#CFCFCF}
@media(max-width:700px){ .held .binnen{padding-top:40px;padding-bottom:70px} }

/* de eventkaart, letterlijk de .rsz-ec van de site */
.kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 20px}
@media(max-width:1100px){ .kaarten{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .kaarten{grid-template-columns:1fr} }
.ec{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--lijn);
    border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;text-align:left;padding:0;
    font-family:inherit;cursor:pointer;
    transition:transform .2s, box-shadow .2s, border-color .2s}
.ec:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:var(--rood)}
.ec-img{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#E4E4E4}
.ec-cat{position:absolute;top:12px;left:12px;z-index:3;display:inline-block;padding:5px 12px;
        font-family:var(--kop);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:500;
        border-radius:3px;background:var(--rood);color:#fff}
.ec-cat.vrij_rijden{background:#000;color:#fff}
.ec-cat.trainingsdag{background:#FF6600;color:#fff}
.ec-cat.driften{background:#fff;color:#000;border:1px solid #DDD}
.ec-cat.open_pitlane{background:#F3CE00;color:#000}
.ec-cat.overig{background:#232323;color:#fff}
.ec-datum{font-family:var(--kop);position:absolute;bottom:-10px;right:14px;background:#fff;padding:8px 12px;
          text-align:center;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:60px;
          color:var(--ink-5);font-size:12px;line-height:1.25;z-index:3}
.ec-datum .dag{display:block;font-size:22px;line-height:1;color:var(--rood);font-weight:600}
.ec-body{flex:1;display:flex;flex-direction:column;padding:20px 18px 16px}
.ec-titel{font-family:var(--kop);font-size:17px;line-height:1.2;letter-spacing:.5px;text-transform:uppercase;
          color:var(--ink-kop);margin:0 0 6px}
.ec-loc{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:500;margin-bottom:12px}
.ec-loc b{color:var(--ink);font-weight:600}
.ec-lijst{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.ec-lijst li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:12px;color:var(--ink-2);line-height:1.3}
.ec-lijst li .bol{width:6px;height:6px;border-radius:50%;background:var(--rood);opacity:.65;flex:none}
.ec-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ec-prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;line-height:1.15;min-width:0}
.ec-prijs .bedrag{font-family:var(--kop);font-size:20px;font-weight:600;color:var(--rood);letter-spacing:.5px}
.ec-prijs .per{font-size:11px;color:var(--ink-4)}
.ec-boek{font-family:var(--kop);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:10px 18px;
         border-radius:3px;border:none;background:var(--rood);color:#fff;transition:background .15s;white-space:nowrap;flex:none}
.ec:hover .ec-boek{background:var(--rood-donker)}
.ec-vol .ec-boek{background:#999}

.voet{margin-top:54px;border-top:1px solid var(--lijn);background:#fff}
.voet .binnen{padding-top:22px;padding-bottom:34px;font-size:13px;color:var(--ink-3)}

/* De menubalk van rsz.nl (gemeten op de live site, 15 oktober 2026).
   Bovenbalk rood 34px met de kleine links in kapitalen; daaronder een witte
   balk van 99px met het logo links en het hoofdmenu in Rohn 16px; de lijntjes
   tussen de menu-items zijn zoals de "nav-divided" van het thema. */
.sitebovenbalk{background:#D6001D;color:#fff;height:34px}
.sitebovenbalk .binnen{display:flex;align-items:center;height:34px;gap:18px;max-width:none;padding-left:35px;padding-right:35px}
.sitebovenbalk .sociaal{display:flex;align-items:center;gap:10px}
.sitebovenbalk .sociaal a{color:#fff;display:inline-flex;padding:5px;opacity:1}
.sitebovenbalk .sociaal a:hover{opacity:.8}
.bovenmenu{display:flex;align-items:center}
.bovenmenu a{font-family:var(--kop);font-size:12.8px;font-weight:500;letter-spacing:.256px;text-transform:uppercase;
             color:rgba(255,255,255,.8);text-decoration:none;padding:0 11px;line-height:20px}
.bovenmenu a + a{border-left:1px solid rgba(255,255,255,.3)}
.bovenmenu a:hover{color:#fff}
.sitekop{background:#fff;position:relative;z-index:30}
.sitekop .binnen{display:flex;align-items:center;height:99px;gap:30px;max-width:none;padding-left:50px;padding-right:50px}
.sitelogo{display:block;flex:none;align-self:flex-start;margin-top:6px}
.sitelogo img{height:90px;width:auto;display:block}
.hoofdmenu{display:flex;align-items:center;flex-wrap:wrap}
.hoofdmenu a{font-family:var(--kop);font-size:16px;font-weight:500;color:#232323;text-decoration:none;text-transform:uppercase;
             padding:4px 8px;line-height:25.6px}
.hoofdmenu > a + a{border-left:1px solid rgba(0,0,0,.1)}
.hoofdmenu a:hover{color:#D6001D}
.hoofdmenu .alleenmobiel{display:none}
.kopicoon{margin-left:auto;display:flex;align-items:center}
.kopicoon a{color:#232323;display:inline-flex;padding:10px}
.kopicoon a:hover{color:#D6001D}
.menuknop{display:none;background:none;border:0;color:#232323;padding:10px 0;cursor:pointer}
@media(max-width:1100px){
  .hoofdmenu a{font-size:14px;padding:4px 6px}
  .sitekop .binnen{gap:18px;padding-left:24px;padding-right:24px}
}
/* Telefoon en tablet: zoals de site. Rode bovenbalk leeg, wit met de
   menuknop links, het logo in het midden en het icoon rechts. */
@media(max-width:849px){
  .sitebovenbalk .binnen > *{display:none}
  .sitekop .binnen{height:98px;padding-left:18px;padding-right:18px;position:relative;justify-content:space-between}
  .menuknop{display:inline-flex}
  .sitelogo{position:absolute;left:50%;transform:translateX(-50%);top:0;margin-top:6px}
  .sitelogo img{height:84px}
  .hoofdmenu{display:none;position:absolute;left:0;right:0;top:98px;background:#fff;flex-direction:column;align-items:stretch;
             border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);box-shadow:0 10px 24px rgba(0,0,0,.08);padding:6px 0}
  .hoofdmenu.open{display:flex}
  .hoofdmenu a,.hoofdmenu .alleenmobiel a{padding:12px 20px;border-left:0 !important;border-bottom:1px solid #F1F1F1;font-size:16px}
  .hoofdmenu .alleenmobiel{display:flex;flex-direction:column}
  .hoofdmenu .alleenmobiel a{font-size:13px;color:var(--ink-3)}
  .kopicoon{margin-left:0}
}
/* De soortenbalk schuift op de telefoon opzij in plaats van drie regels hoog te worden. */
@media(max-width:700px){
  .balk .binnen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-left:0;padding-right:0}
  .balk .binnen::-webkit-scrollbar{display:none}
}

/* Uitlijning zoals het origineel (feedback Marth 15 oktober): de kleine links
   in de rode balk in het midden met zoeken rechts, het hoofdmenu in het midden
   van de witte balk, Over RSZ en Programma's met een uitklapmenu, en de
   soortenbalk in de letter van de site. */
.sitebovenbalk .binnen{display:grid;grid-template-columns:1fr auto 1fr;gap:18px}
.sitebovenbalk .sociaal{justify-self:start}
.bovenmenu{justify-self:center}
.bovenzoek{justify-self:end;color:#fff;display:inline-flex;padding:5px}
.bovenzoek:hover{opacity:.8}
.bovenmenu > a,.bovenmenu > .heeftsub{border-left:1px solid rgba(255,255,255,.3)}
.bovenmenu > a:first-child{border-left:0}
.bovenmenu a + a{border-left:0}
.bovenmenu > a + a,.bovenmenu > a + .heeftsub{border-left:1px solid rgba(255,255,255,.3)}
.heeftsub{position:relative;display:inline-flex}
.heeftsub > a svg{vertical-align:-1px;margin-left:2px}
.heeftsub .sub{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#fff;z-index:60;
               box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px 0;flex-direction:column}
.heeftsub:hover .sub,.heeftsub:focus-within .sub{display:flex}
.heeftsub .sub a{color:#232323 !important;font-family:var(--body);font-size:15px;font-weight:400;text-transform:none;letter-spacing:0;
                 padding:8px 18px !important;border:0 !important;line-height:1.4;text-decoration:none}
.heeftsub .sub a:hover{color:#D6001D !important;background:#F7F7F7}
.sitekop .binnen{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding-left:60px;padding-right:60px}
.sitelogo{justify-self:start}
.sitelogo img{height:96px}
.hoofdmenu{justify-self:center;flex-wrap:nowrap}
.hoofdmenu > a + a,.hoofdmenu > a + .heeftsub{border-left:1px solid rgba(0,0,0,.1)}
.hoofdmenu .heeftsub .sub{top:calc(100% + 8px)}
.kopicoon{justify-self:end;margin-left:0}
.geenlink{cursor:default}
.balk a{font-family:var(--kop);font-weight:500;font-size:14px;letter-spacing:.4px;padding:11px 18px}
@media(max-width:1250px){
  .sitekop .binnen{grid-template-columns:auto 1fr auto}
  .hoofdmenu a{font-size:14px;padding:4px 6px}
}
@media(max-width:849px){
  .sitebovenbalk .binnen{display:flex}
  .sitekop .binnen{display:flex;padding-left:18px;padding-right:18px}
  .hoofdmenu{flex-wrap:nowrap;justify-self:stretch;left:0;right:0}
  .hoofdmenu > a,.hoofdmenu .heeftsub .sub a,.hoofdmenu .alleenmobiel a{font-size:16px;padding:12px 20px !important;border-left:0 !important}
  .hoofdmenu .alleenmobiel a{font-size:13px}
  .hoofdmenu > .heeftsub{border-left:0 !important}
  .hoofdmenu .heeftsub{display:flex;flex-direction:column}
  .hoofdmenu .heeftsub > a{display:none}
  .hoofdmenu .heeftsub .sub{display:flex;position:static;box-shadow:none;padding:0;min-width:0}
  .hoofdmenu .heeftsub .sub a{font-family:var(--kop);font-size:16px;font-weight:500;text-transform:uppercase;padding:12px 20px !important;
                              border-bottom:1px solid #F1F1F1 !important}
  .sitelogo img{height:84px}
}