/* Clubmagazine
   ------------------------------------------------------------------
   Ontwerp in de traditie van de Amerikaanse sportredactie: zwarte
   masthead, doorlopende scoreticker, gecondenseerde koppen in kapitalen,
   haarlijnen in plaats van schaduwen, en tabellen die eruitzien als een
   boxscore. Geen afgeronde kaarten, geen gradients, geen zachte randen.

   Alle clubkleuren komen uit :root en worden per club ingespoten. In dit
   bestand staat nooit een hardcoded clubkleur. */

/* Afgeleide tokens. De generator spuit alleen de zes clubkleuren en de fonts in,
   de rest wordt hier berekend zodat een nieuwe club maar zes waarden hoeft te
   kiezen en het contrast overal klopt. */
:root {
  --zwart-zacht: color-mix(in srgb, var(--zwart) 88%, #ffffff);
  --inkt-zacht: color-mix(in srgb, var(--inkt) 74%, var(--papier));
  --inkt-vaag: color-mix(in srgb, var(--inkt) 50%, var(--papier));
  --lijn: color-mix(in srgb, var(--inkt) 16%, var(--papier));
  --vlak: color-mix(in srgb, var(--inkt) 4%, var(--papier));
  --primair-vaag: color-mix(in srgb, var(--primair) 14%, var(--papier));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--inkt);
  background: var(--papier);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primair-donker); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.smal { width: min(700px, 100% - 2.5rem); margin-inline: auto; }

/* ---------------------------------------------------------- masthead */

.site-header { background: var(--zwart); color: #fff; border-bottom: 3px solid var(--primair); }
.site-header .wrap { display: flex; align-items: stretch; gap: 0; min-height: 62px; }

.merk { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; padding-right: 1.6rem; }
.merk:hover { color: #fff; }
.embleem {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--primair); color: #fff;
  font-family: var(--font-kop); font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.merk-naam {
  font-family: var(--font-kop); font-weight: 800; font-size: 1.32rem;
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
}
.merk-sub {
  display: block; font-family: var(--font-tekst); font-weight: 600;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primair-licht); margin-top: .3rem;
}

.hoofdnav { margin-left: auto; display: flex; align-items: stretch; }
.hoofdnav a, .hoofdnav li a {
  display: flex; align-items: center; padding: 0 .95rem;
  color: rgba(255,255,255,.78); text-decoration: none;
  font-family: var(--font-kop); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.hoofdnav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.hoofdnav a[aria-current="page"], .hoofdnav .current-menu-item a { color: #fff; border-bottom-color: var(--primair); }
.hoofdnav ul { display: flex; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------- scoreticker */

.scorebalk {
  background: var(--zwart-zacht); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
}
.scorebalk .wrap { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.scorebalk .wrap::-webkit-scrollbar { display: none; }
.score-item {
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  padding: .55rem 1.15rem; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.1);
}
.score-item:first-child { padding-left: 0; }
.score-label {
  font-family: var(--font-kop); font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: var(--primair-licht);
}
.score-waarde { font-size: .92rem; font-weight: 600; color: #fff; }
.score-waarde a { color: #fff; text-decoration: none; }
.score-waarde a:hover { color: var(--primair-licht); }
.uitslag-cijfer {
  display: inline-block; background: var(--primair); color: #fff;
  font-family: var(--font-kop); font-weight: 800; font-size: .88rem;
  padding: .05rem .4rem; margin-left: .3rem; letter-spacing: .02em;
}

/* --------------------------------------------------------------- hero */

.hero {
  background: var(--zwart); color: #fff;
  padding: 3rem 0 3.4rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 22px, rgba(255,255,255,.014) 22px 44px);
}
.hero-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 3rem; align-items: start; }
.hero .kicker { color: var(--primair-licht); }
.hero h1 {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: .98;
  letter-spacing: -.005em; text-transform: uppercase;
  margin: .5rem 0 1rem; text-wrap: balance;
}
.hero h1 a { color: #fff; text-decoration: none; }
.hero h1 a:hover { color: var(--primair-licht); }
.hero p.samenvatting { font-size: 1.1rem; color: rgba(255,255,255,.78); margin: 0 0 1.2rem; max-width: 56ch; }
.hero-meta {
  font-family: var(--font-kop); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45);
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.15);
}

.zijkolom { border-top: 3px solid var(--primair); padding-top: .9rem; }
.zijkolom h2 {
  font-family: var(--font-kop); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .18em; color: var(--primair-licht); margin: 0 0 .9rem;
}
.zijkolom ol { margin: 0; padding: 0; list-style: none; counter-reset: wed; }
.zijkolom li {
  counter-increment: wed; display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.zijkolom li::before {
  content: counter(wed); font-family: var(--font-kop); font-weight: 800;
  font-size: .95rem; color: rgba(255,255,255,.3); line-height: 1.35;
}
.zijkolom a { color: #fff; text-decoration: none; font-weight: 650; font-size: .93rem; }
.zijkolom a:hover { color: var(--primair-licht); }
.zijkolom .wanneer { display: block; font-size: .74rem; color: rgba(255,255,255,.5); margin-top: .1rem; }

/* --------------------------------------------------------- typografie */

h1, h2, h3, h4 { font-family: var(--font-kop); font-weight: 800; line-height: 1.08; letter-spacing: -.005em; }
.kicker {
  display: inline-block;
  font-family: var(--font-kop); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .18em; color: var(--primair-donker);
}

.sectiekop {
  display: flex; align-items: center; gap: 1rem;
  margin: 3.2rem 0 1.4rem; padding-bottom: .55rem;
  border-bottom: 2px solid var(--inkt);
}
.sectiekop h2 {
  margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em;
}
.sectiekop a {
  margin-left: auto; font-family: var(--font-kop); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--primair-donker);
}
.sectiekop a:hover { color: var(--accent); }

/* ------------------------------------------------------------ kaarten */

.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; }
.kaart {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem 1.4rem 1.4rem 0;
  border-top: 1px solid var(--lijn);
  margin-right: 1.4rem;
}
.kaart-beeld { display: block; margin: 0 0 .3rem; overflow: hidden; background: var(--zwart); }
.kaart-beeld img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
                   transition: transform .25s ease; }
.kaart:hover .kaart-beeld img { transform: scale(1.03); }
.kaart h3 { margin: 0; font-size: 1.16rem; line-height: 1.15; }
.kaart h3 a { color: var(--inkt); text-decoration: none; }
.kaart h3 a:hover { color: var(--primair-donker); text-decoration: underline; text-decoration-thickness: 2px; }
.kaart p { margin: 0; font-size: .91rem; color: var(--inkt-zacht); line-height: 1.5; }
.kaart .meta {
  margin-top: auto; padding-top: .7rem;
  font-family: var(--font-kop); font-size: .63rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-vaag);
}

/* ------------------------------------------------------------ artikel */

.artikel { padding: 2.8rem 0 4rem; }
.artikel h1 {
  font-size: clamp(2rem, 4.4vw, 3.05rem); line-height: 1.02;
  text-transform: uppercase; margin: .55rem 0 .9rem; text-wrap: balance;
}
.artikel .intro {
  font-family: var(--font-artikel);
  font-size: 1.2rem; line-height: 1.5; color: var(--inkt-zacht);
  margin: 0 0 1.6rem;
}
.artikel-body { font-family: var(--font-artikel); font-size: 1.09rem; line-height: 1.66; }
.artikel-body p { margin: 0 0 1.25rem; }
.artikel-body h2 {
  font-size: 1.32rem; text-transform: uppercase; letter-spacing: .01em;
  margin: 2.4rem 0 .8rem; padding-left: .75rem; border-left: 4px solid var(--primair);
}
.artikel-body h3 { font-size: 1.1rem; margin: 1.9rem 0 .5rem; }
.artikel-body blockquote {
  margin: 2rem 0; padding: 1.2rem 1.4rem;
  background: var(--zwart); color: #fff;
  font-family: var(--font-kop); font-size: 1.24rem; font-weight: 700;
  line-height: 1.28; letter-spacing: -.01em;
}
.artikel-body blockquote p { margin: 0; }
.artikel-body ul, .artikel-body ol { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.artikel-body li { margin-bottom: .5rem; }
.artikel-body hr { border: 0; border-top: 2px solid var(--inkt); margin: 2.4rem 0; }
.artikel-beeld { margin: 0 0 1.8rem; }
.artikel-beeld img { width: 100%; height: auto; }
.artikel-beeld figcaption { font-size: .78rem; color: var(--inkt-vaag); margin-top: .5rem; }

.byline {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 0; margin-bottom: 2rem;
  border-top: 2px solid var(--inkt); border-bottom: 1px solid var(--lijn);
  font-size: .84rem; color: var(--inkt-zacht);
}
.byline .avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--primair-donker); color: #fff;
  font-family: var(--font-kop); font-weight: 800; font-size: .84rem;
}
.byline strong { color: var(--inkt); font-weight: 700; }

a.entiteit {
  color: var(--primair-donker); font-weight: 650; text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--primair-vaag);
}
a.entiteit:hover { color: var(--inkt); box-shadow: inset 0 -1.1em 0 var(--primair-vaag); }

/* ------------------------------------------------------------ bronblok */

.bronblok {
  margin: 3rem 0 0; padding: 1.3rem 1.5rem;
  background: var(--vlak); border-top: 3px solid var(--inkt);
  font-size: .89rem;
}
.bronblok h2 {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .18em;
  margin: 0 0 .8rem; color: var(--inkt);
}
.bronblok ul { margin: 0; padding: 0; list-style: none; }
.bronblok li { padding: .3rem 0; border-bottom: 1px dotted var(--lijn); }
.bronblok li:last-child { border-bottom: 0; }
.bronblok strong { font-family: var(--font-kop); font-weight: 800; letter-spacing: .01em; }
.transparantie {
  font-size: .78rem; color: var(--inkt-vaag); line-height: 1.5;
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--lijn);
}

/* ------------------------------------------------------------ tabellen */

.tabel-omhulsel { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.3rem 0 2.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .58rem .85rem; white-space: nowrap; }
thead th {
  background: var(--zwart); color: #fff;
  font-family: var(--font-kop); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  position: sticky; top: 0;
}
tbody tr { border-bottom: 1px solid var(--lijn); }
tbody tr:nth-child(even) { background: var(--vlak); }
tbody tr:hover { background: var(--primair-vaag); }
td.getal, th.getal { text-align: right; }
tr.gespeeld td { color: var(--inkt-zacht); }
.winst, .verlies, .gelijk { font-family: var(--font-kop); font-weight: 800; font-size: .95rem; }
.winst { color: var(--primair-donker); }
.verlies { color: var(--accent); }
.gelijk { color: var(--inkt-zacht); }

/* ------------------------------------------------------------ selectie */

.linie { margin-bottom: 2.6rem; }
.spelers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--lijn); }
.speler-kaart {
  background: var(--papier); display: flex; gap: .9rem; align-items: center;
  padding: .95rem 1.1rem; text-decoration: none; color: var(--inkt);
  transition: background .12s ease;
}
.speler-kaart:hover { background: var(--zwart); color: #fff; }
.speler-kaart:hover .positie { color: rgba(255,255,255,.6); }
.speler-kaart:hover .rugnummer { color: var(--primair-licht); }
.rugnummer {
  font-family: var(--font-kop); font-size: 1.85rem; font-weight: 800;
  color: var(--primair); min-width: 2.2rem; text-align: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.speler-kaart .naam { font-family: var(--font-kop); font-weight: 700; font-size: 1rem; line-height: 1.1; }
.speler-kaart .positie {
  display: block; font-size: .7rem; color: var(--inkt-vaag); margin-top: .2rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.badge {
  display: inline-block; font-family: var(--font-kop); font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--accent); color: #fff; padding: .12rem .35rem; margin-left: .35rem;
  vertical-align: 2px;
}

.feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--lijn); margin: 1.8rem 0 2.4rem;
  border-top: 3px solid var(--inkt); border-bottom: 1px solid var(--lijn);
}
.feit { background: var(--papier); padding: .95rem 1.1rem; }
.feit dt {
  font-family: var(--font-kop); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--inkt-vaag);
}
.feit dd { margin: .3rem 0 0; font-family: var(--font-kop); font-weight: 800; font-size: 1.15rem; }

/* ------------------------------------------------------------ tijdlijn */

.tijdlijn { list-style: none; margin: 2rem 0; padding: 0; }
.tijdlijn li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.4rem;
  padding: 1.15rem 0; border-top: 1px solid var(--lijn);
}
.tijdlijn .jaar {
  font-family: var(--font-kop); font-weight: 800; font-size: 1.5rem;
  color: var(--primair); line-height: 1; font-variant-numeric: tabular-nums;
}
.tijdlijn h3 { margin: 0 0 .3rem; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; }
.tijdlijn p { margin: 0; font-size: .93rem; color: var(--inkt-zacht); }

/* ------------------------------------------------------- video, social */

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.5rem; }
.video { margin: 0; }
.video-kader { position: relative; padding-top: 56.25%; background: #000; }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption {
  font-family: var(--font-kop); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--inkt-zacht); margin-top: .6rem;
}

.podcasts { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1px; background: var(--lijn); }
.podcast { background: var(--papier); padding: 1.2rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.podcast-kop { display: flex; align-items: baseline; gap: .6rem; }
.podcast-kop h3 { margin: 0; font-size: 1.14rem; text-transform: uppercase; letter-spacing: .01em; }
.podcast-kop h3 a { color: var(--inkt); text-decoration: none; }
.podcast-kop h3 a:hover { color: var(--primair-donker); }
.podcast-kop .soort {
  margin-left: auto; flex: none;
  font-family: var(--font-kop); font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--inkt); color: var(--papier); padding: .14rem .42rem;
}
.podcast-makers {
  font-family: var(--font-kop); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em; color: var(--inkt-vaag); margin: 0;
}
.podcast p { margin: 0; font-size: .89rem; color: var(--inkt-zacht); line-height: 1.5; }
.podcast-speler { margin-top: auto; padding-top: .9rem; }
.podcast-speler iframe { width: 100%; height: 152px; border: 0; display: block; }

.tijdlijn-strook { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.tijdlijn-kolom { border: 1px solid var(--lijn); background: var(--vlak); padding: .4rem; min-height: 200px; overflow: hidden; }

.social-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1px; background: var(--lijn); }
.social-kaart { background: var(--papier); padding: 1.05rem 1.2rem; }
.social-kaart .handle { font-family: var(--font-kop); font-weight: 800; font-size: 1rem; text-decoration: none; }
.social-kaart .soort {
  display: inline-block; font-family: var(--font-kop); font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--inkt); color: var(--papier); padding: .12rem .4rem; margin-left: .45rem; vertical-align: 2px;
}
.social-kaart p { font-size: .86rem; color: var(--inkt-zacht); margin: .55rem 0 0; line-height: 1.45; }

/* ------------------------------------------------- wedstrijdcentrum, status */

.live-score {
  background: var(--zwart); color: #fff; padding: 1.6rem 1.8rem;
  margin: 1.6rem 0 2rem; display: flex; flex-direction: column; gap: .9rem;
}
.live-badge {
  align-self: flex-start;
  font-family: var(--font-kop); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
  background: var(--accent); color: #fff; padding: .22rem .5rem;
}
.live-badge.rust { background: var(--primair); }
.live-teams {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--font-kop); font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  font-weight: 700; text-transform: uppercase;
}
.live-teams strong {
  font-size: clamp(1.7rem, 5vw, 2.8rem); font-weight: 800;
  background: var(--primair); padding: .1rem .7rem; font-variant-numeric: tabular-nums;
}

.status {
  display: inline-block; font-family: var(--font-kop); font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; padding: .16rem .45rem; color: #fff;
}
.status-bevestigd { background: var(--primair-donker); }
.status-afgeketst { background: var(--accent); }
.status-open { background: var(--inkt-vaag); }

.zuster {
  margin: 2rem 0; padding: 1.2rem 1.4rem;
  border: 1px solid var(--lijn); border-left: 4px solid var(--primair); background: var(--vlak);
}
.zuster p { margin: .4rem 0 0; font-size: .93rem; }

.rapportcijfers { margin-top: 2.5rem; }
.cijfer-formulier { display: grid; gap: .5rem; margin: 1.2rem 0; }
.cijfer-rij {
  display: grid; grid-template-columns: 1fr 4.5rem; gap: 1rem; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid var(--lijn);
}
.cijfer-rij label { font-weight: 600; font-size: .94rem; }
.cijfer-rij input {
  width: 100%; padding: .4rem .5rem; border: 1px solid var(--lijn);
  font-family: var(--font-kop); font-weight: 700; text-align: center; font-size: 1rem;
}
.knop {
  display: inline-block; background: var(--inkt); color: var(--papier);
  font-family: var(--font-kop); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .7rem 1.4rem; border: 0; cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--primair-donker); color: #fff; }

.melding {
  border-left: 3px solid var(--inkt-vaag); background: var(--vlak);
  padding: .9rem 1.2rem; color: var(--inkt-zacht); font-size: .88rem; line-height: 1.5;
}

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--zwart); color: rgba(255,255,255,.7);
  margin-top: 4.5rem; padding: 3rem 0 2.2rem; font-size: .88rem;
  border-top: 3px solid var(--primair);
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }
.site-footer h2 {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--primair-licht); margin: 0 0 .9rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--primair-licht); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.disclaimer {
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .76rem; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 90ch;
}

/* ------------------------------------------------------------- responsief */

@media (max-width: 900px) {
  .hero-grid, .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .site-header .wrap { flex-wrap: wrap; }
  .hoofdnav { margin-left: 0; width: 100%; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.12); }
  .hoofdnav a { padding: .7rem .8rem; font-size: .76rem; }
  .kaart { margin-right: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==================================================================
   Ontwerpstijlen per club
   ------------------------------------------------------------------
   De basis hierboven is de stijl "sportdesk". Hieronder staan de vijf
   andere varianten. De generator zet data-stijl op het html-element en
   het WordPress-thema doet hetzelfde via language_attributes, zodat
   dezelfde css in beide werkt.

   Elke variant verandert de masthead, de koppen, de sectiekoppen en de
   kaarten. Twee clubsites met dezelfde variant hebben nog steeds een
   ander lettertype en een andere kleur, dus geen twee sites in het
   netwerk zien er hetzelfde uit.
   ================================================================== */

/* ---------------------------------------------------------- stadion
   Posterachtig en luid. Gekleurde masthead, enorme displaykoppen,
   diagonale accentbalk. Voor clubs met een groot stadion en een grote
   mond. */

[data-stijl="stadion"] .site-header { background: var(--primair-donker); border-bottom-color: var(--primair-licht); }
[data-stijl="stadion"] .embleem { clip-path: none; border-radius: 50%; background: var(--primair-licht); color: var(--zwart); }
[data-stijl="stadion"] .merk-naam { font-size: 1.5rem; letter-spacing: .04em; }
[data-stijl="stadion"] .scorebalk { background: var(--zwart); }
[data-stijl="stadion"] .hero {
  background: var(--primair-donker);
  background-image: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,.035) 40px 80px);
  border-bottom: 6px solid var(--primair-licht);
}
[data-stijl="stadion"] .hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .9; letter-spacing: .01em; }
[data-stijl="stadion"] .artikel h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: .95; }
[data-stijl="stadion"] .sectiekop { border-bottom: 0; }
[data-stijl="stadion"] .sectiekop h2 {
  background: var(--primair-donker); color: #fff; padding: .3rem .8rem; font-size: 1rem; letter-spacing: .1em;
}
[data-stijl="stadion"] .kaart { border-top: 6px solid var(--primair); }
[data-stijl="stadion"] .kaart h3 { font-size: 1.28rem; letter-spacing: .01em; }
[data-stijl="stadion"] .rugnummer { font-size: 2.3rem; }
[data-stijl="stadion"] .artikel-body blockquote { background: var(--primair-donker); }

/* ------------------------------------------------------------ krant
   Een krantenpagina. Licht van boven tot onder, serif koppen in
   onderkast, dunne kaderlijnen en een dubbele lijn onder de titelkop. */

[data-stijl="krant"] .site-header { background: var(--papier); color: var(--inkt); border-bottom: 1px solid var(--inkt); }
[data-stijl="krant"] .merk, [data-stijl="krant"] .merk:hover { color: var(--inkt); }
[data-stijl="krant"] .merk-naam { font-size: 1.6rem; text-transform: none; letter-spacing: -.02em; }
[data-stijl="krant"] .merk-sub { color: var(--inkt-vaag); }
[data-stijl="krant"] .embleem { background: var(--inkt); clip-path: none; }
[data-stijl="krant"] .hoofdnav a { color: var(--inkt-zacht); }
[data-stijl="krant"] .hoofdnav a:hover { background: var(--vlak); color: var(--inkt); }
[data-stijl="krant"] .hoofdnav a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--primair); }
[data-stijl="krant"] .scorebalk { background: var(--vlak); color: var(--inkt); border-bottom: 1px solid var(--lijn); }
[data-stijl="krant"] .score-label { color: var(--primair-donker); }
[data-stijl="krant"] .score-waarde, [data-stijl="krant"] .score-waarde a { color: var(--inkt); }
[data-stijl="krant"] .score-item { border-right-color: var(--lijn); }
[data-stijl="krant"] .hero {
  background: var(--papier); color: var(--inkt); background-image: none;
  border-bottom: 4px double var(--inkt); padding-bottom: 2.4rem;
}
[data-stijl="krant"] .hero h1 { font-family: var(--font-artikel); text-transform: none; font-weight: 700; letter-spacing: -.025em; }
[data-stijl="krant"] .hero h1 a, [data-stijl="krant"] .hero h1 a:hover { color: var(--inkt); }
[data-stijl="krant"] .hero p.samenvatting { color: var(--inkt-zacht); font-family: var(--font-artikel); }
[data-stijl="krant"] .hero .kicker, [data-stijl="krant"] .hero-meta { color: var(--primair-donker); }
[data-stijl="krant"] .hero-meta { border-top-color: var(--lijn); }
[data-stijl="krant"] .zijkolom { border-top-color: var(--inkt); }
[data-stijl="krant"] .zijkolom h2 { color: var(--primair-donker); }
[data-stijl="krant"] .zijkolom a { color: var(--inkt); }
[data-stijl="krant"] .zijkolom li { border-bottom-color: var(--lijn); }
[data-stijl="krant"] .zijkolom li::before, [data-stijl="krant"] .zijkolom .wanneer { color: var(--inkt-vaag); }
[data-stijl="krant"] .artikel h1, [data-stijl="krant"] .artikel-body h2 {
  font-family: var(--font-artikel); text-transform: none; font-weight: 700;
}
[data-stijl="krant"] .artikel-body h2 { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--lijn); padding-bottom: .3rem; }
[data-stijl="krant"] .sectiekop { border-bottom-width: 1px; }
[data-stijl="krant"] .sectiekop h2 { font-family: var(--font-artikel); text-transform: none; font-size: 1.3rem; letter-spacing: -.01em; }
[data-stijl="krant"] .kaart { border-top: 1px solid var(--inkt); }
[data-stijl="krant"] .kaart h3 { font-family: var(--font-artikel); font-weight: 700; }
[data-stijl="krant"] .artikel-body blockquote { background: transparent; color: var(--inkt); border-left: 3px solid var(--inkt); padding-left: 1.2rem; }

/* ---------------------------------------------------------- brutaal
   Blokkig en zonder verfijning. Dikke randen, harde schaduwen, vlakken
   in volle kleur. Voor clubs waar het publiek geen nuance verwacht. */

[data-stijl="brutaal"] .site-header { border-bottom: 5px solid var(--primair); }
[data-stijl="brutaal"] .embleem { clip-path: none; border: 3px solid #fff; border-radius: 0; }
[data-stijl="brutaal"] .hero { background-image: none; border-bottom: 5px solid var(--primair); }
[data-stijl="brutaal"] .hero h1 { line-height: .94; }
[data-stijl="brutaal"] .zijkolom { border: 3px solid var(--primair); border-top-width: 3px; padding: 1rem 1.1rem; }
[data-stijl="brutaal"] .sectiekop { border-bottom: 4px solid var(--inkt); }
[data-stijl="brutaal"] .kaart {
  border: 3px solid var(--inkt); padding: 1.1rem; margin: 0 1rem 1rem 0;
  box-shadow: 6px 6px 0 var(--primair);
}
[data-stijl="brutaal"] .kaart:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--primair); }
[data-stijl="brutaal"] .kaarten { gap: .6rem; }
[data-stijl="brutaal"] .speler-kaart { border: 2px solid var(--inkt); }
[data-stijl="brutaal"] .spelers { gap: .5rem; background: transparent; }
[data-stijl="brutaal"] .feiten { gap: .5rem; background: transparent; border: 0; }
[data-stijl="brutaal"] .feit { border: 3px solid var(--inkt); }
[data-stijl="brutaal"] .bronblok { border: 3px solid var(--inkt); box-shadow: 6px 6px 0 var(--primair); }
[data-stijl="brutaal"] thead th { background: var(--primair); color: #fff; }
[data-stijl="brutaal"] .tabel-omhulsel { border: 3px solid var(--inkt); }
[data-stijl="brutaal"] .knop { border: 3px solid var(--inkt); box-shadow: 5px 5px 0 var(--primair); }
[data-stijl="brutaal"] .artikel-body blockquote { border: 3px solid var(--primair); background: var(--zwart); }

/* --------------------------------------------------------- klassiek
   Erfgoed. Gecentreerde masthead, dubbele lijnen, serif door de hele
   site heen. Voor clubs die ouder zijn dan de Eredivisie zelf. */

[data-stijl="klassiek"] .site-header { border-bottom: 1px solid var(--primair-licht); }
[data-stijl="klassiek"] .site-header .wrap { flex-direction: column; align-items: center; gap: .2rem; padding-block: .9rem; }
[data-stijl="klassiek"] .merk { padding-right: 0; flex-direction: column; gap: .35rem; text-align: center; }
[data-stijl="klassiek"] .merk-naam { font-size: 1.75rem; letter-spacing: .06em; text-transform: uppercase; }
[data-stijl="klassiek"] .merk-sub { letter-spacing: .3em; }
[data-stijl="klassiek"] .embleem { clip-path: none; border-radius: 50%; }
[data-stijl="klassiek"] .hoofdnav { margin-left: 0; justify-content: center; border-top: 1px solid rgba(255,255,255,.18); padding-top: .4rem; width: 100%; }
[data-stijl="klassiek"] .hoofdnav a { font-weight: 600; letter-spacing: .16em; font-size: .74rem; }
[data-stijl="klassiek"] .hero { background-image: none; border-bottom: 3px double var(--primair-licht); }
[data-stijl="klassiek"] .hero h1 { font-family: var(--font-artikel); text-transform: none; font-weight: 700; letter-spacing: -.015em; }
[data-stijl="klassiek"] .artikel h1 { font-family: var(--font-artikel); text-transform: none; }
[data-stijl="klassiek"] .artikel-body h2 { font-family: var(--font-artikel); text-transform: none; border-left: 0; padding-left: 0; }
[data-stijl="klassiek"] .artikel-body h2::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--primair); margin-top: .45rem; }
[data-stijl="klassiek"] .sectiekop { border-bottom: 3px double var(--inkt); justify-content: center; position: relative; }
[data-stijl="klassiek"] .sectiekop::after { content: none; }
[data-stijl="klassiek"] .sectiekop h2 { font-family: var(--font-artikel); text-transform: uppercase; letter-spacing: .18em; font-size: .95rem; }
[data-stijl="klassiek"] .sectiekop a { position: absolute; right: 0; }
[data-stijl="klassiek"] .kaart h3 { font-family: var(--font-artikel); }
[data-stijl="klassiek"] .kaart { border-top: 1px solid var(--inkt-vaag); }
[data-stijl="klassiek"] .artikel-body blockquote { background: transparent; color: var(--inkt); font-family: var(--font-artikel); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); text-align: center; padding: 1.4rem 1rem; }

/* ----------------------------------------------------------- modern
   Rustig raster, veel wit, grote leesmaat, zachte hoeken. Voor clubs
   die zich presenteren als bedrijf en niet als volksbeweging. */

[data-stijl="modern"] { --straal: 14px; }
[data-stijl="modern"] body { font-size: 18px; }
[data-stijl="modern"] .site-header { background: var(--papier); color: var(--inkt); border-bottom: 1px solid var(--lijn); }
[data-stijl="modern"] .merk, [data-stijl="modern"] .merk:hover { color: var(--inkt); }
[data-stijl="modern"] .merk-naam { text-transform: none; letter-spacing: -.02em; font-size: 1.45rem; }
[data-stijl="modern"] .merk-sub { color: var(--inkt-vaag); letter-spacing: .1em; }
[data-stijl="modern"] .embleem { clip-path: none; border-radius: 12px; border: 0; }
[data-stijl="modern"] .hoofdnav a { color: var(--inkt-zacht); text-transform: none; letter-spacing: 0; font-size: .95rem; border-bottom: 0; }
[data-stijl="modern"] .hoofdnav a:hover { background: var(--vlak); color: var(--inkt); }
[data-stijl="modern"] .hoofdnav a[aria-current="page"] { background: var(--primair-vaag); color: var(--primair-donker); }
[data-stijl="modern"] .scorebalk { background: var(--vlak); color: var(--inkt); border-bottom: 1px solid var(--lijn); }
[data-stijl="modern"] .score-label { color: var(--inkt-vaag); }
[data-stijl="modern"] .score-waarde, [data-stijl="modern"] .score-waarde a { color: var(--inkt); }
[data-stijl="modern"] .score-item { border-right-color: var(--lijn); }
[data-stijl="modern"] .uitslag-cijfer { border-radius: 6px; }
[data-stijl="modern"] .hero { background: var(--vlak); color: var(--inkt); background-image: none; border-bottom: 1px solid var(--lijn); }
[data-stijl="modern"] .hero h1 { text-transform: none; letter-spacing: -.035em; }
[data-stijl="modern"] .hero h1 a, [data-stijl="modern"] .hero h1 a:hover { color: var(--inkt); }
[data-stijl="modern"] .hero p.samenvatting { color: var(--inkt-zacht); }
[data-stijl="modern"] .hero .kicker { color: var(--primair-donker); }
[data-stijl="modern"] .hero-meta { color: var(--inkt-vaag); border-top-color: var(--lijn); }
[data-stijl="modern"] .zijkolom { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 1.2rem; }
[data-stijl="modern"] .zijkolom h2 { color: var(--inkt-vaag); }
[data-stijl="modern"] .zijkolom a { color: var(--inkt); }
[data-stijl="modern"] .zijkolom li { border-bottom-color: var(--lijn); }
[data-stijl="modern"] .zijkolom li::before, [data-stijl="modern"] .zijkolom .wanneer { color: var(--inkt-vaag); }
[data-stijl="modern"] .sectiekop { border-bottom: 1px solid var(--lijn); }
[data-stijl="modern"] .sectiekop h2 { text-transform: none; letter-spacing: -.015em; font-size: 1.3rem; }
[data-stijl="modern"] .kaart {
  border: 1px solid var(--lijn); border-radius: var(--straal);
  padding: 1.3rem; margin-right: 0;
}
[data-stijl="modern"] .kaarten { gap: 1.1rem; }
[data-stijl="modern"] .kaart h3 { text-transform: none; }
[data-stijl="modern"] .kaart .kicker { color: var(--primair-donker); background: var(--primair-vaag); padding: .18rem .5rem; border-radius: 99px; align-self: flex-start; }
[data-stijl="modern"] .artikel h1 { text-transform: none; letter-spacing: -.035em; }
[data-stijl="modern"] .artikel-body h2 { text-transform: none; border-left: 0; padding-left: 0; }
[data-stijl="modern"] .artikel-body blockquote { background: var(--vlak); color: var(--inkt); border-radius: var(--straal); border-left: 4px solid var(--primair); }
[data-stijl="modern"] .speler-kaart, [data-stijl="modern"] .feit,
[data-stijl="modern"] .social-kaart, [data-stijl="modern"] .podcast { border-radius: var(--straal); }
[data-stijl="modern"] .spelers, [data-stijl="modern"] .feiten,
[data-stijl="modern"] .social-lijst, [data-stijl="modern"] .podcasts { gap: .8rem; background: transparent; }
[data-stijl="modern"] .speler-kaart, [data-stijl="modern"] .feit,
[data-stijl="modern"] .social-kaart, [data-stijl="modern"] .podcast { border: 1px solid var(--lijn); }
[data-stijl="modern"] .feiten { border-top: 0; border-bottom: 0; }
[data-stijl="modern"] thead th { background: var(--vlak); color: var(--inkt); border-bottom: 2px solid var(--lijn); }
[data-stijl="modern"] .tabel-omhulsel { border: 1px solid var(--lijn); border-radius: var(--straal); }
[data-stijl="modern"] .knop { border-radius: 99px; }
[data-stijl="modern"] .bronblok { border-radius: var(--straal); border-top: 1px solid var(--lijn); border-left: 4px solid var(--primair); }