@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-cyrillic-ext-v20.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-cyrillic-v20.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-greek-ext-v20.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-greek-v20.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-vietnamese-v20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-latin-ext-v20.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inter-latin-v20.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-cyrillic-ext-v20.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-cyrillic-v20.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-greek-ext-v20.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-greek-v20.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-vietnamese-v20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-latin-ext-v20.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/inter-latin-v20.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-cyrillic-ext-v20.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-cyrillic-v20.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-greek-ext-v20.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-greek-v20.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-vietnamese-v20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-latin-ext-v20.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/inter-latin-v20.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/poppins-600-devanagari-v24.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/poppins-600-latin-ext-v24.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/poppins-600-latin-v24.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--canvas:       #ffffff;
--surface:      #fafafa;
--surface-2:    #ffffff;
--band:         #f0f0f0;
--deep:         #141414;
--pitch:        #094a30;
--ink:          #313232;
--ink-soft:     #545454;
--ink-muted:    #949494;
--ink-heading:  #141414;
--ink-on-deep:  #ffffff;
--ink-on-deep-soft: rgba(255, 255, 255, .72);
--line:         #e6e6e6;
--line-strong:  #d6d6d6;
--line-on-deep: rgba(255, 255, 255, .14);
--accent:       #009959;
--accent-hover: #00b96c;
--accent-soft:  #00b96c;
--accent-wash:  #e6f7ef;
--ok-bg:      #e6f7ef;  --ok-tx:      #00713f;  --ok-ln:      #c9ebdb;
--warn-bg:    #fdf3dd;  --warn-tx:    #8a5f00;  --warn-ln:    #f0e0b8;
--danger-bg:  #fbe9e7;  --danger-tx:  #c0392b;  --danger-ln:  #f2d0cc;
--info-bg:    #e9f0f6;  --info-tx:    #3d6b8f;  --info-ln:    #d3e0ec;
--neutral-bg: #f0f0f0;  --neutral-tx: #545454;  --neutral-ln: #e6e6e6;
--doubt:      #e8c26a;
--doubt-ink:  #3d2c00;
--font-display: 'Poppins', 'Inter', system-ui, sans-serif;
--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
--s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
--s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
--r-sm:   6px;
--r-card: 10px;
--r-lg:   14px;
--r-pill: 10px;
--wrap: 1200px;
color-scheme: light;
}
[data-thema="donker"] {
--canvas:       #141414;
--surface:      #1c1d1d;
--surface-2:    #202121;
--band:         #1a1a1a;
--deep:         #000000;
--pitch:        #0d0f0e;
--ink:          #d6d6d6;
--ink-soft:     #949494;
--ink-muted:    #707070;
--ink-heading:  #f0f0f0;
--ink-on-deep:  #ffffff;
--ink-on-deep-soft: rgba(255, 255, 255, .66);
--line:         #313232;
--line-strong:  #3d3e3e;
--line-on-deep: rgba(255, 255, 255, .12);
--accent:       #00b96c;
--accent-hover: #00ff95;
--accent-soft:  #00ff95;
--accent-wash:  rgba(0, 185, 108, .14);
--ok-bg:      rgba(0, 185, 108, .16);   --ok-tx:      #4ade9f;  --ok-ln:      rgba(0, 185, 108, .3);
--warn-bg:    rgba(232, 194, 106, .14); --warn-tx:    #e8c26a;  --warn-ln:    rgba(232, 194, 106, .3);
--danger-bg:  rgba(224, 90, 74, .16);   --danger-tx:  #f08a7c;  --danger-ln:  rgba(224, 90, 74, .3);
--info-bg:    rgba(110, 160, 200, .16); --info-tx:    #8ab4d8;  --info-ln:    rgba(110, 160, 200, .3);
--neutral-bg: #262727;                  --neutral-tx: #b0b0b0;  --neutral-ln: #313232;
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0;
color: var(--ink-heading);
font-family: var(--font-display);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.025em;
}
p { margin: 0 0 var(--s4); }
a { color: var(--ink-heading); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
img, svg { max-width: 100%; }
.ov-wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--s5);
}
.ov-visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ov-skip {
position: absolute; left: -9999px;
background: var(--accent); color: #fff;
padding: var(--s3) var(--s5); border-radius: var(--r-card); z-index: 100;
}
.ov-skip:focus { left: var(--s4); top: var(--s4); }
.ov-logo {
display: inline-flex;
align-items: center;
gap: var(--s3);
text-decoration: none;
color: var(--ink-heading);
}
.ov-logo__mark {
display: block; flex: none;
--ov-gras: #022b1e;
--ov-krijt: #3ddf77;
}
.ov-logo__mark .ov-logo__gras { fill: var(--ov-gras); }
.ov-logo__mark .ov-logo__lijnen { stroke: var(--ov-krijt); }
.ov-logo__mark .ov-logo__spelers { fill: var(--ov-krijt); }
.ov-logo__word {
display: flex;
flex-direction: column;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0;
}
.ov-logo__line1 { color: var(--ink-heading); }
.ov-logo__line2 { color: var(--ink-muted); }
.ov-header__bar {
background: var(--canvas);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 40;
}
.ov-header__inner {
display: flex;
align-items: center;
gap: var(--s5);
min-height: 64px;
}
.ov-nav {
display: flex;
align-items: center;
gap: var(--s1);
flex: 1 1 auto;
min-width: 0;
}
.ov-nav__list {
display: flex;
align-items: center;
gap: var(--s1);
list-style: none;
margin: 0; padding: 0;
min-width: 0;
flex: 1 1 auto;
overflow-x: auto;
scrollbar-width: none;
}
.ov-nav__list::-webkit-scrollbar { display: none; }
.ov-nav__link,
.ov-nav__list a {
display: block;
padding: var(--s2) var(--s3);
border-radius: var(--r-card);
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
}
.ov-nav__link:hover,
.ov-nav__list a:hover { background: var(--band); color: var(--ink-heading); }
.ov-nav .current-menu-item > a { background: var(--accent); color: #fff; }
.ov-nav__item--meer { display: none; }
.ov-nav__meer { position: relative; flex: none; }
.ov-nav__meer__summary {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
list-style: none;
}
.ov-nav__meer__summary::-webkit-details-marker { display: none; }
.ov-nav__meer__summary::after {
content: "";
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
opacity: .55;
transform: translateY(-2px) rotate(45deg);
}
.ov-nav__meer[open] > .ov-nav__meer__summary::after { transform: translateY(1px) rotate(-135deg); }
.ov-nav__meer[open] > .ov-nav__meer__summary { background: var(--band); color: var(--ink-heading); }
.ov-nav__meer__lijst {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 41;
min-width: 210px;
display: grid;
gap: 1px;
list-style: none; margin: 0;
padding: var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
}
.ov-nav__meer__lijst a {
display: block;
padding: 6px var(--s3);
border-radius: var(--r-sm);
font-size: 14px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.ov-nav__meer__lijst a:hover { background: var(--band); color: var(--accent); }
.ov-search { flex: none; }
.ov-search__input {
font: inherit;
font-size: 14px;
padding: var(--s2) var(--s4);
width: 190px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--canvas);
color: var(--ink);
}
.ov-search__input::placeholder { color: var(--ink-muted); }
.ov-search__input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: transparent;
}
.ov-thema {
flex: none;
display: flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
}
.ov-thema__knop {
display: grid;
place-items: center;
width: 30px; height: 26px;
padding: 0;
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--ink-muted);
cursor: pointer;
}
.ov-thema__knop:hover { color: var(--ink-heading); background: var(--band); }
.ov-thema__knop svg { width: 15px; height: 15px; display: block; }
.ov-thema__knop[aria-pressed="true"] {
background: var(--canvas);
color: var(--accent);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
[data-thema="donker"] .ov-thema__knop[aria-pressed="true"] {
background: var(--surface-2);
box-shadow: none;
}
.ov-pill {
display: inline-flex;
align-items: center;
gap: var(--s1);
padding: 3px var(--s3);
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
line-height: 1.5;
}
.ov-pill--bevestigd { background: var(--accent);     color: #fff; }
.ov-pill--basis     { background: var(--ok-bg);      color: var(--ok-tx);      border-color: var(--ok-ln); }
.ov-pill--twijfel   { background: var(--warn-bg);    color: var(--warn-tx);    border-color: var(--warn-ln); }
.ov-pill--out       { background: var(--danger-bg);  color: var(--danger-tx);  border-color: var(--danger-ln); }
.ov-pill--geschorst { background: var(--info-bg);    color: var(--info-tx);    border-color: var(--info-ln); }
.ov-pill--neutraal  { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); }
.ov-pitch .ov-pill--neutraal,
.ov-hero .ov-pill--neutraal {
background: rgba(255, 255, 255, .14);
color: var(--ink-on-deep);
border-color: transparent;
}
.ov-btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s3) var(--s5);
border-radius: var(--r-card);
border: 1px solid transparent;
font-size: 15px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.ov-btn--primair,
.ov-btn--op-donker { background: var(--accent); color: #fff; }
.ov-btn--primair:hover,
.ov-btn--op-donker:hover { background: var(--accent-hover); color: #fff; }
[data-thema="donker"] .ov-btn--primair:hover,
[data-thema="donker"] .ov-btn--op-donker:hover { color: #05231a; }
.ov-btn--outline {
background: var(--surface);
color: var(--ink-heading);
border-color: var(--line-strong);
}
.ov-btn--outline:hover { background: var(--band); }
.ov-btn--spook {
background: transparent;
color: var(--ink-on-deep);
border-color: rgba(255, 255, 255, .35);
}
.ov-btn--spook:hover { background: rgba(255, 255, 255, .1); color: var(--ink-on-deep); }
.ov-section { padding-block: var(--s24); }
.ov-section--band { background: var(--band); }
.ov-section--donker { background: var(--deep); color: var(--ink-on-deep); }
.ov-section--donker h2,
.ov-section--donker h3 { color: var(--ink-on-deep); }
.ov-section--donker .ov-eyebrow { color: var(--accent-soft); }
.ov-section__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
margin-bottom: var(--s6);
flex-wrap: wrap;
}
.ov-section__title { font-size: clamp(20px, 5.2vw, 32px); }
.ov-section__link {
font-size: 15px; font-weight: 500;
text-decoration: none;
border-bottom: 2px solid var(--accent);
}
.ov-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--s2);
}
.ov-uitleg { display: grid; gap: var(--s8); grid-template-columns: 1.1fr 1fr; align-items: start; }
.ov-uitleg h3 { font-size: 19px; margin-bottom: var(--s3); }
.ov-uitleg p { color: var(--ink-on-deep-soft); font-size: 16px; margin: 0 0 var(--s3); line-height: 1.7; }
.ov-uitleg p:last-child { margin-bottom: 0; }
.ov-stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.ov-stappen li {
position: relative;
padding: 0 0 var(--s5) var(--s8);
counter-increment: stap;
}
.ov-stappen li:last-child { padding-bottom: 0; }
.ov-stappen li::before {
content: counter( stap );
position: absolute; left: 0; top: 1px;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 13px; font-weight: 600;
}
.ov-stappen strong { display: block; color: var(--ink-on-deep); font-size: 16px; }
.ov-stappen span { color: var(--ink-on-deep-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 780px) {
.ov-uitleg { grid-template-columns: 1fr; gap: var(--s6); }
}
.ov-hero {
background: var(--deep);
color: var(--ink-on-deep);
padding-block: var(--s20) var(--s24);
position: relative;
overflow: hidden;
}
.ov-hero::after {
content: "";
position: absolute;
right: -140px; top: 50%;
width: 420px; height: 420px;
transform: translateY(-50%);
border: 2px solid rgba(0, 185, 108, .18);
border-radius: 50%;
pointer-events: none;
}
.ov-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.ov-hero__title {
font-family: var(--font-display);
font-size: clamp(36px, 5.8vw, 64px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink-on-deep);
overflow-wrap: break-word;
margin-bottom: var(--s5);
}
.ov-hero__title em { font-style: normal; color: var(--accent-soft); }
.ov-hero__lead {
font-size: 18px;
color: var(--ink-on-deep-soft);
max-width: 56ch;
margin-bottom: var(--s8);
}
.ov-hero__acties { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ov-hero__meta {
display: flex; gap: var(--s6); flex-wrap: wrap;
margin-top: var(--s10);
padding-top: var(--s6);
border-top: 1px solid var(--line-on-deep);
}
.ov-hero__stat strong {
display: block;
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--accent-soft);
line-height: 1.1;
}
.ov-hero__stat span { font-size: 14px; color: var(--ink-on-deep-soft); }
.ov-grid {
display: grid;
gap: var(--s4);
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.ov-match {
display: block;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s5);
text-decoration: none;
color: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ov-match:hover {
border-color: var(--line-strong);
box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
[data-thema="donker"] .ov-match { box-shadow: none; }
[data-thema="donker"] .ov-match:hover { border-color: var(--accent); box-shadow: none; }
.ov-match__top {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
margin-bottom: var(--s4);
}
.ov-match__comp {
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
}
.ov-match__teams { display: grid; gap: var(--s2); }
.ov-match__wanneer {
display: block;
margin-bottom: var(--s3);
font-size: 13px; color: var(--ink-muted);
}
.ov-match__team {
display: flex; align-items: center; gap: var(--s3);
font-size: 16px; font-weight: 600; color: var(--ink-heading);
}
.ov-match__naam { flex: 1 1 auto; min-width: 0; }
.ov-match__doel { flex: none; font-variant-numeric: tabular-nums; }
.ov-crest {
width: 26px; height: 26px; flex: none;
border-radius: var(--r-sm);
display: grid; place-items: center;
font-size: 10px; font-weight: 600;
color: var(--ink-on-deep);
background: var(--deep);
}
[data-thema="donker"] .ov-crest { background: var(--accent); color: #05231a; }
.ov-crest--logo { background: none; object-fit: contain; padding: 0; }
[data-thema="donker"] .ov-crest--logo { background: none; }
.ov-match--stil { cursor: default; }
.ov-match__foot {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid var(--line);
font-size: 13px; color: var(--ink-muted);
}
.ov-leagues { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.ov-league {
display: flex; align-items: center;
gap: var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
text-decoration: none;
font-weight: 600; color: var(--ink-heading);
}
.ov-league:hover { background: var(--canvas); border-color: var(--accent); }
.ov-league img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.ov-league strong { display: block; font-size: 16px; }
.ov-league span { font-size: 13px; font-weight: 400; color: var(--ink-muted); white-space: nowrap; }
.ov-pitch {
position: relative;
background: var(--pitch);
border-radius: var(--r-lg);
padding: var(--s8) var(--s4);
aspect-ratio: 3 / 4;
max-height: 720px;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.ov-pitch::before {
content: "";
position: absolute; inset: var(--s3);
border: 1.5px solid rgba(0, 255, 149, .24);
border-radius: 10px;
pointer-events: none;
}
.ov-pitch::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 130px; height: 130px;
margin: -65px 0 0 -65px;
border: 1.5px solid rgba(0, 255, 149, .24);
border-radius: 50%;
pointer-events: none;
}
.ov-pitch__lijn {
position: absolute;
left: var(--s3); right: var(--s3); top: 50%;
height: 1.5px;
background: rgba(0, 255, 149, .24);
pointer-events: none;
}
.ov-pitch__rij {
position: relative; z-index: 1;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: var(--s2);
}
.ov-speler {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
width: 68px;
text-decoration: none;
}
.ov-speler__shirt {
width: 38px; height: 38px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--accent-soft);
color: #05231a;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
border: 2px solid var(--pitch);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.ov-speler--twijfel .ov-speler__shirt {
background: var(--doubt);
color: var(--doubt-ink);
box-shadow: 0 0 0 2px var(--doubt);
}
.ov-speler--keeper .ov-speler__shirt {
background: #f0f0f0;
color: var(--pitch);
box-shadow: 0 0 0 2px #f0f0f0;
}
.ov-speler__naam {
font-size: 11px;
font-weight: 500;
color: #ffffff;
line-height: 1.25;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
overflow-wrap: anywhere;
}
.ov-pitch__formatie {
position: absolute;
top: var(--s5); right: var(--s5);
z-index: 2;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--accent-soft);
}
.ov-legenda {
display: flex; flex-wrap: wrap; gap: var(--s4);
margin-top: var(--s4);
font-size: 13px; color: var(--ink-muted);
}
.ov-legenda span { display: inline-flex; align-items: center; gap: var(--s2); }
.ov-legenda i {
width: 14px; height: 14px; border-radius: 50%; display: inline-block;
border: 2px solid var(--ink-muted);
}
.ov-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
overflow: hidden;
min-width: 0;
}
.ov-panel__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
padding: var(--s4) var(--s5);
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.ov-panel__title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.ov-lijst { list-style: none; margin: 0; padding: 0; }
.ov-lijst li {
display: flex; align-items: center; gap: var(--s3);
padding: 10px var(--s5);
border-bottom: 1px solid var(--line);
font-size: 15px;
}
.ov-lijst li:last-child { border-bottom: 0; }
.ov-lijst__nr {
flex: none; width: 24px;
font-size: 13px; font-weight: 600; color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.ov-lijst__naam { flex: 1 1 auto; font-weight: 500; color: var(--ink-heading); }
.ov-lijst__pos { flex: none; font-size: 12px; color: var(--ink-muted); }
.ov-tabel-wrap { overflow-x: auto; min-width: 0; }
.ov-tabel {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 420px;
}
.ov-tabel th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-muted);
padding: var(--s3) var(--s5);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.ov-tabel td {
padding: 10px var(--s5);
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.ov-tabel tr:last-child td { border-bottom: 0; }
.ov-tabel tbody tr:hover { background: var(--canvas); }
.ov-tabel__naam { font-weight: 600; color: var(--ink-heading); }
.ov-tabel--selectie .ov-tabel__naam { overflow-wrap: break-word; }
.ov-tabel--vorm .ov-tabel__naam { white-space: nowrap; }
@media (max-width: 780px) {
.ov-tabel--vorm { font-size: 13px; }
.ov-tabel--vorm th,
.ov-tabel--vorm td { padding-inline: var(--s2); }
.ov-tabel--vorm .ov-portret { width: 26px; height: 26px; }
.ov-tabel--vorm .ov-speleercel { gap: var(--s2); }
.ov-tabel--vorm .ov-vormmerk { font-size: 10px; padding: 1px 5px; }
.ov-duo .ov-tabel--vorm .ov-tabel__naam { max-width: none; }
}
.ov-tabel td:nth-child(3) { white-space: nowrap; }
.ov-tabel td:last-child   { white-space: nowrap; }
.ov-kruimels {
font-size: 13px;
color: var(--ink-muted);
padding-top: var(--s6);
}
.ov-kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.ov-kruimels li::after { content: "/"; margin-left: var(--s2); color: var(--line-strong); }
.ov-kruimels li:last-child::after { content: ""; }
.ov-kruimels a { color: var(--ink-muted); text-decoration: none; }
.ov-kruimels a:hover { color: var(--accent); text-decoration: underline; }
.ov-notice {
display: flex;
gap: var(--s3);
align-items: flex-start;
background: var(--warn-bg);
color: var(--warn-tx);
border: 1px solid var(--warn-ln);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
font-size: 14px;
margin-top: var(--s5);
}
.ov-notice p { margin: 0; }
.ov-paginakop { padding-top: var(--s8); }
.ov-paginakop__titel {
font-family: var(--font-display);
font-size: clamp(30px, 4.4vw, 46px);
line-height: 1.08;
letter-spacing: -0.03em;
overflow-wrap: break-word;
margin-bottom: var(--s4);
}
.ov-paginakop__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s3);
align-items: center;
margin-bottom: var(--s5);
}
.ov-paginakop__bijgewerkt { font-size: 14px; color: var(--ink-muted); }
.ov-paginakop__lead { font-size: 18px; max-width: 62ch; color: var(--ink); }
.ov-duel {
display: flex;
align-items: center;
gap: var(--s5);
flex-wrap: wrap;
background: var(--band);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
margin-bottom: var(--s8);
}
.ov-duel__zijde { display: flex; align-items: center; gap: var(--s3); font-weight: 600; color: var(--ink-heading); }
.ov-duel__vs { font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.08em; }
.ov-duel__info { margin-left: auto; font-size: 14px; color: var(--ink-soft); text-align: right; }
.ov-opstelling {
display: grid;
gap: var(--s8);
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: start;
}
.ov-kolom { display: grid; gap: var(--s5); min-width: 0; }
.ov-tekst { max-width: 68ch; margin-top: var(--s16); }
.ov-tekst h2 { font-size: 26px; margin-bottom: var(--s4); }
.ov-tekst h3 { font-size: 19px; margin: var(--s8) 0 var(--s3); }
.ov-tekst p { font-size: 17px; }
.ov-footer {
background: var(--deep);
color: var(--ink-on-deep-soft);
padding-block: var(--s16) var(--s8);
font-size: 15px;
}
.ov-footer a { color: var(--ink-on-deep-soft); text-decoration: none; }
.ov-footer a:hover { color: var(--accent-soft); }
.ov-footer .ov-logo { color: var(--ink-on-deep); }
.ov-footer .ov-logo__mark { --ov-gras: #0b3b28; }
.ov-footer .ov-logo__line1 { color: var(--ink-on-deep); }
.ov-footer .ov-logo__line2 { color: #00b96c; }
.ov-footer__top {
display: grid;
gap: var(--s10);
grid-template-columns: minmax(min(240px, 100%), 1fr) 2fr;
padding-bottom: var(--s10);
}
.ov-footer__pitch { margin-top: var(--s4); max-width: 34ch; font-size: 14px; }
.ov-footer__cols {
display: grid;
gap: var(--s6);
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.ov-footer__heading {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-soft);
margin-bottom: var(--s4);
}
.ov-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ov-footer__list a { font-size: 14px; }
.ov-footer__bottom {
display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
padding-top: var(--s6);
border-top: 1px solid var(--line-on-deep);
font-size: 13px;
color: rgba(255, 255, 255, .5);
}
.ov-footer__bottom p { margin: 0; }
.ov-main > .ov-wrap { padding-bottom: var(--s20); }
@media (max-width: 980px) {
.ov-opstelling { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.ov-footer__top { grid-template-columns: 1fr; gap: var(--s8); }
.ov-section { padding-block: var(--s16); }
.ov-hero { padding-block: var(--s16); }
}
@media (max-width: 780px) {
.ov-header__inner { flex-wrap: wrap; min-height: 0; padding-block: var(--s3); gap: var(--s3); }
.ov-search { order: 3; flex: 1 1 auto; }
.ov-search__input { width: 100%; }
.ov-thema { order: 4; }
.ov-nav { order: 5; width: 100%; margin-inline: calc(var(--s5) * -1); padding-inline: var(--s5); }
.ov-pitch { aspect-ratio: auto; min-height: 560px; padding-inline: var(--s2); }
.ov-speler { width: 58px; }
.ov-speler__shirt { width: 34px; height: 34px; font-size: 13px; }
.ov-duel__info { margin-left: 0; text-align: left; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
.ov-legenda__basis   { background: var(--accent-soft); border-color: var(--accent-soft); }
.ov-legenda__twijfel { background: var(--doubt);       border-color: var(--doubt); }
.ov-legenda__keeper  { background: #f0f0f0;            border-color: var(--ink-muted); }
.ov-blok { padding-block: var(--s12) 0; }
.ov-blok:first-of-type { padding-top: var(--s10); }
.ov-bijschrift { font-size: 13px; color: var(--ink-muted); }
.ov-uitleg-kort {
font-size: 15px;
color: var(--ink-soft);
max-width: 62ch;
margin: var(--s2) 0 0;
}
.ov-leeg { padding: var(--s5); margin: 0; color: var(--ink-muted); font-size: 15px; }
.ov-bron {
margin: var(--s12) 0 0;
font-size: 13px;
color: var(--ink-muted);
}
.ov-notice--fout {
background: var(--danger-bg);
color: var(--danger-tx);
border-color: var(--danger-ln);
}
.ov-section__title--klein { font-size: 20px; }
.ov-hero--compact { padding-block: var(--s5) var(--s8); }
.ov-hero--compact .ov-kruimels { padding-top: 0; margin-bottom: var(--s5); }
.ov-hero--compact .ov-hero__merk { margin-bottom: 0; }
.ov-hero__merk { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.ov-hero__logo { width: 56px; height: 56px; object-fit: contain; flex: none; }
.ov-hero__titel {
font-family: var(--font-display);
font-size: clamp(28px, 3.8vw, 44px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink-on-deep);
margin: 0;
}
.ov-hero--compact .ov-eyebrow { color: var(--accent-soft); margin-bottom: 2px; }
.ov-hero--compact .ov-hero__lead { margin-bottom: 0; font-size: 17px; }
.ov-hero--compact .ov-hero__meta { margin-top: var(--s6); }
.ov-hero--compact .ov-hero__stat strong { font-size: 20px; }
.ov-num { text-align: right; font-variant-numeric: tabular-nums; }
th.ov-num { text-align: right; }
.ov-rang { color: var(--ink-muted); font-weight: 500; width: 34px; }
.ov-punten { font-weight: 700; color: var(--ink-heading); }
.ov-breed { width: 22%; min-width: 110px; }
.ov-tabel--stand td { padding-block: 8px; }
.ov-zone td:first-child { position: relative; }
.ov-zone td:first-child::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
}
.ov-zone--cl td:first-child::before           { background: var(--accent); }
.ov-zone--europa td:first-child::before       { background: var(--accent-soft); opacity: .55; }
.ov-zone--nacompetitie td:first-child::before { background: var(--warn-tx); }
.ov-zone--degradatie td:first-child::before   { background: var(--danger-tx); }
.ov-zone--promotie td:first-child::before     { background: var(--accent); }
.ov-zone--achtste td:first-child::before      { background: var(--accent); }
.ov-zone--tussenronde td:first-child::before  { background: var(--warn-tx); }
.ov-zone--promotie_playoffs td:first-child::before { background: var(--warn-tx); }
.ov-zone--uit td:first-child::before          { background: var(--danger-tx); }
.ov-legenda--zones {
list-style: none; margin: var(--s4) 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--s5);
font-size: 13px; color: var(--ink-muted);
}
.ov-legenda--zones li { display: flex; align-items: center; gap: var(--s2); }
.ov-zonekleur { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ov-zonekleur--cl           { background: var(--accent); }
.ov-zonekleur--europa       { background: var(--accent-soft); opacity: .55; }
.ov-zonekleur--nacompetitie { background: var(--warn-tx); }
.ov-zonekleur--degradatie   { background: var(--danger-tx); }
.ov-zonekleur--promotie     { background: var(--accent); }
.ov-zonekleur--achtste      { background: var(--accent); }
.ov-zonekleur--tussenronde  { background: var(--warn-tx); }
.ov-zonekleur--promotie_playoffs { background: var(--warn-tx); }
.ov-zonekleur--uit          { background: var(--danger-tx); }
.ov-clubcel {
display: inline-flex; align-items: center; gap: var(--s3);
text-decoration: none; color: var(--ink-heading); font-weight: 600;
white-space: nowrap;
}
.ov-clubcel img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-clubcel:hover { color: var(--accent); }
.ov-clubcel--klein { font-size: 13px; font-weight: 500; gap: var(--s2); }
.ov-clubcel--klein img { width: 18px; height: 18px; }
.ov-speleercel { display: inline-flex; align-items: center; gap: var(--s3); }
.ov-speleercel__sub { display: block; font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.ov-portret {
width: 28px; height: 28px; flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--band);
}
.ov-portret--leeg { display: inline-block; }
.ov-vorm { display: inline-flex; gap: 3px; }
.ov-vorm__winst, .ov-vorm__gelijk, .ov-vorm__verlies {
width: 18px; height: 18px;
border-radius: var(--r-sm);
display: grid; place-items: center;
font-size: 10px; font-weight: 700; font-style: normal;
flex: none;
}
.ov-vorm__winst   { background: var(--ok-bg);      color: var(--ok-tx); }
.ov-vorm__gelijk  { background: var(--neutral-bg); color: var(--neutral-tx); }
.ov-vorm__verlies { background: var(--danger-bg);  color: var(--danger-tx); }
.ov-clubs {
display: grid;
gap: var(--s3);
grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}
.ov-clubkaart {
display: flex; align-items: center; gap: var(--s3);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s4);
text-decoration: none;
color: var(--ink-heading);
}
.ov-clubkaart:hover { border-color: var(--accent); background: var(--canvas); }
.ov-clubkaart img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.ov-clubkaart__naam { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.ov-clubkaart__meta { display: block; font-size: 12px; color: var(--ink-muted); }
@media (max-width: 560px) {
.ov-clubs--tegels {
grid-template-columns: 1fr 1fr;
gap: var(--s3);
}
.ov-clubs--tegels .ov-clubkaart {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--s2);
padding: var(--s4) var(--s3);
}
.ov-clubs--tegels .ov-clubkaart img { width: 32px; height: 32px; }
.ov-clubs--tegels .ov-clubkaart__tekst { width: 100%; min-width: 0; }
.ov-clubs--tegels .ov-clubkaart__naam { font-size: 14px; }
.ov-clubs--tegels .ov-clubkaart__meta {
font-size: 11px;
line-height: 1.35;
min-height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.ov-duo {
display: grid;
gap: var(--s6);
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
align-items: start;
}
.ov-balk {
display: block;
height: 8px;
border-radius: 999px;
background: var(--band);
overflow: hidden;
}
.ov-balk i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ov-verschil { font-weight: 600; }
.ov-verschil--boven { color: var(--ok-tx); }
.ov-verschil--onder { color: var(--danger-tx); }
.ov-duels { list-style: none; margin: 0; padding: 0; }
.ov-duel-rij {
display: flex; align-items: center; gap: var(--s3);
padding: 11px var(--s5);
border-bottom: 1px solid var(--line);
font-size: 15px;
}
.ov-duel-rij:last-child { border-bottom: 0; }
.ov-duel-rij__team { flex: 1 1 0; min-width: 0; color: var(--ink); }
.ov-duel-rij__team strong { color: var(--ink-heading); font-weight: 600; }
.ov-duel-rij__team--uit { text-align: right; }
.ov-duel-rij__score {
flex: none;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink-heading);
background: var(--band);
border-radius: var(--r-sm);
padding: 2px 10px;
}
.ov-duel-rij__tijd {
flex: none; font-size: 13px; color: var(--ink-muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ov-duel-rij__ronde {
flex: none; width: 92px;
font-size: 12px; color: var(--ink-muted);
}
.ov-duel-rij .ov-vorm__winst,
.ov-duel-rij .ov-vorm__gelijk,
.ov-duel-rij .ov-vorm__verlies { margin-right: var(--s1); }
.ov-clubkop {
background: var(--band);
border-block: 1px solid var(--line);
padding-block: var(--s8);
margin-top: var(--s5);
}
.ov-clubkop__inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.ov-clubkop__logo { width: 84px; height: 84px; object-fit: contain; flex: none; }
.ov-clubkop__tekst { min-width: 0; }
.ov-clubkop__titel {
font-family: var(--font-display);
font-size: clamp(30px, 4.2vw, 46px);
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0 0 var(--s4);
}
.ov-clubkop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.ov-kerncijfers {
display: grid;
gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.ov-cijfer {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
}
.ov-cijfer__label {
display: block;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s2);
}
.ov-cijfer__waarde {
display: block;
font-family: var(--font-display);
font-size: 28px; line-height: 1.1;
color: var(--ink-heading);
}
.ov-cijfer__sub { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.ov-panel--los { margin-bottom: var(--s4); }
.ov-minuten {
display: flex;
align-items: flex-end;
gap: var(--s3);
padding: var(--s6) var(--s5) var(--s4);
height: 200px;
}
.ov-minuut { flex: 1 1 0; display: flex; flex-direction: column; height: 100%; }
.ov-minuut__staven {
flex: 1 1 auto;
display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.ov-minuut__voor, .ov-minuut__tegen {
width: 14px;
min-height: 2px;
border-radius: 3px 3px 0 0;
display: block;
}
.ov-minuut__voor  { background: var(--accent); }
.ov-minuut__tegen { background: var(--danger-tx); opacity: .55; }
.ov-minuut__label {
flex: none;
text-align: center;
font-size: 11px;
color: var(--ink-muted);
padding-top: var(--s2);
font-variant-numeric: tabular-nums;
}
.ov-minuten + .ov-legenda { padding: 0 var(--s5) var(--s5); margin-top: 0; }
.ov-legenda__voor, .ov-legenda__tegen {
width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 0;
}
.ov-legenda__voor  { background: var(--accent); }
.ov-legenda__tegen { background: var(--danger-tx); opacity: .55; }
@media (max-width: 780px) {
.ov-clubkop__inner { gap: var(--s4); }
.ov-clubkop__logo { width: 60px; height: 60px; }
.ov-duel-rij__ronde { width: auto; }
.ov-minuten { height: 160px; gap: var(--s2); }
.ov-minuut__voor, .ov-minuut__tegen { width: 10px; }
.ov-speleercel__sub { display: none; }
}
.ov-clubkaart__tekst { min-width: 0; }
:root {
--surface:      #f7faf8;
--surface-2:    #ffffff;
--band:         #eaf1ed;
--line:         #e1eae5;
--line-strong:  #cbd9d2;
--deep:         #0f2e1f;
--ink-on-deep-soft: rgba(255, 255, 255, .76);
--goud:  #c8961b;
--zilver: #8c9a94;
--brons: #a8703f;
--goud-bg:  #fdf4de;
--zilver-bg: #eef1f0;
--brons-bg: #f8ece2;
}
[data-thema="donker"] {
--surface:      #1a1d1b;
--surface-2:    #1f2321;
--band:         #171a18;
--line:         #2c322e;
--line-strong:  #3b423d;
--deep:         #082116;
--goud:  #e8c26a;
--zilver: #b4bfb9;
--brons: #cf9a6a;
--goud-bg:  rgba(232, 194, 106, .14);
--zilver-bg: rgba(180, 191, 185, .12);
--brons-bg: rgba(207, 154, 106, .14);
}
.ov-hero {
background: linear-gradient(158deg, #164430 0%, var(--deep) 58%, #07190f 100%);
}
[data-thema="donker"] .ov-hero {
background: linear-gradient(158deg, #0d3021 0%, var(--deep) 58%, #030d08 100%);
}
.ov-hero::after { border-color: rgba(0, 255, 149, .22); }
.ov-footer { background: var(--deep); }
.ov-section__title {
position: relative;
padding-left: var(--s4);
}
.ov-section__title::before {
content: "";
position: absolute; left: 0; top: .18em; bottom: .18em;
width: 4px;
border-radius: 2px;
background: var(--accent);
}
.ov-section__title--klein::before { width: 3px; }
.ov-section--donker .ov-section__title::before,
.ov-hero .ov-section__title::before { background: var(--accent-soft); }
.ov-panel__head { background: var(--accent-wash); }
.ov-panel__title { color: var(--ink-heading); }
.ov-cijfer {
border-left: 3px solid var(--accent);
background: linear-gradient(100deg, var(--accent-wash) 0%, var(--surface) 42%);
}
.ov-cijfer__waarde { color: var(--accent-donker, var(--ink-heading)); }
.ov-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--band) 45%, transparent); }
.ov-tabel tbody tr:hover { background: var(--accent-wash); }
.ov-index {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s5);
margin-top: var(--s6);
}
.ov-index__kop {
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s4);
}
.ov-index__lijst {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--s2);
}
.ov-index__lijst a {
display: inline-block;
padding: 5px var(--s3);
border-radius: var(--r-sm);
background: var(--canvas);
border: 1px solid var(--line);
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--ink);
}
.ov-index__lijst a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ov-ranglijsten {
display: grid;
gap: var(--s4);
grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}
.ov-ranglijst {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s5);
display: flex;
flex-direction: column;
}
.ov-ranglijst__kop { font-size: 17px; margin-bottom: 2px; }
.ov-ranglijst__kop a { text-decoration: none; color: var(--ink-heading); }
.ov-ranglijst__kop a:hover { color: var(--accent); }
.ov-ranglijst__vraag {
font-size: 13px;
color: var(--ink-muted);
margin: 0 0 var(--s4);
}
.ov-ranglijst__meer {
margin-top: auto;
padding-top: var(--s4);
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--accent);
}
.ov-ranglijst__meer:hover { text-decoration: underline; }
.ov-toplijst { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.ov-toplijst__rij {
display: flex; align-items: center; gap: var(--s3);
padding: 7px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.ov-toplijst__rij:last-child { border-bottom: 0; }
.ov-toplijst__clublogo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ov-toplijst__naam { flex: 1 1 auto; min-width: 0; color: var(--ink-heading); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-toplijst__waarde {
flex: none;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink-heading);
}
.ov-medaille {
flex: none;
width: 22px; height: 22px;
border-radius: 50%;
display: inline-grid; place-items: center;
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
background: var(--neutral-bg);
color: var(--neutral-tx);
}
.ov-medaille--1 { background: var(--goud-bg);   color: var(--goud); }
.ov-medaille--2 { background: var(--zilver-bg); color: var(--zilver); }
.ov-medaille--3 { background: var(--brons-bg);  color: var(--brons); }
.ov-leeg--klein { padding: var(--s3) 0; font-size: 14px; }
.ov-portret--klein { width: 22px; height: 22px; }
.ov-ranglijst--xg { background: var(--accent-wash); border-color: var(--accent); }
.ov-xg { list-style: none; margin: 0; padding: 0; }
.ov-xg li {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s3);
padding: 7px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.ov-xg li:last-child { border-bottom: 0; }
.ov-xg span { color: var(--ink-soft); }
.ov-xg strong { font-variant-numeric: tabular-nums; color: var(--ink-heading); }
.ov-blader {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4);
margin-top: var(--s10);
padding-top: var(--s6);
border-top: 1px solid var(--line);
font-size: 14px;
}
.ov-blader__knop, .ov-blader__alle {
text-decoration: none;
color: var(--ink);
font-weight: 500;
}
.ov-blader__knop:hover, .ov-blader__alle:hover { color: var(--accent); }
.ov-blader__alle { color: var(--ink-muted); }
.ov-duel-rij__tegen {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; gap: var(--s3);
text-decoration: none;
color: var(--ink);
}
.ov-duel-rij__tegen img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-duel-rij__tegen strong { display: block; color: var(--ink-heading); font-weight: 600; }
.ov-duel-rij__tegen:hover strong { color: var(--accent); }
.ov-duel-rij__waar { display: block; font-size: 11px; color: var(--ink-muted); }
.ov-clubkop { margin-top: 0; padding-block: var(--s5) var(--s8); }
.ov-clubkop .ov-kruimels { padding-top: 0; padding-bottom: var(--s5); }
@media (max-width: 780px) {
.ov-ranglijsten { grid-template-columns: 1fr; }
.ov-blader { flex-wrap: wrap; gap: var(--s3); }
}
.ov-hero__logo {
background: #fff;
border-radius: var(--r-card);
padding: 6px;
width: 56px; height: 56px;
box-sizing: content-box;
}
.ov-hero--compact .ov-hero__inner { max-width: none; }
.ov-toplijst__naam {
white-space: normal;
text-overflow: clip;
line-height: 1.25;
overflow-wrap: anywhere;
}
.ov-toplijst__rij { align-items: flex-start; }
.ov-medaille, .ov-toplijst__clublogo, .ov-portret--klein { margin-top: 1px; }
.ov-toplijst__waarde { margin-top: 1px; }
.ov-stapel { display: grid; gap: var(--s6); }
.ov-hero--compact {
background: var(--band);
color: var(--ink);
padding-block: var(--s8);
border-bottom: 1px solid var(--line);
}
.ov-hero--compact::after { display: none; }
.ov-hero--compact .ov-hero__titel { color: var(--ink-heading); }
.ov-hero--compact .ov-eyebrow { color: var(--ink-muted); }
.ov-hero--compact .ov-hero__logo { background: var(--canvas); }
.ov-hero--compact .ov-hero__inner { max-width: var(--wrap); }
.ov-panel__head {
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.ov-tabel tbody tr:hover { background: var(--band); }
.ov-cijfer {
background: var(--surface);
border-left: 3px solid var(--accent);
}
.ov-ranglijst--xg { background: var(--surface); border-color: var(--line); }
.ov-section__title { padding-left: var(--s3); }
.ov-section__title::before { width: 3px; opacity: .8; }
.ov-portret {
width: 40px; height: 40px;
border: 1px solid var(--line);
}
.ov-portret--klein { width: 30px; height: 30px; }
.ov-toplijst__clublogo { width: 22px; height: 22px; }
.ov-speleercel { gap: var(--s4); }
.ov-tabel--selectie td { padding-block: 8px; }
.ov-positie { color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.ov-tabel th:has( .ov-sorteer ) { padding: 0; }
.ov-sorteer {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
padding: var(--s3) var(--s5);
background: none;
border: 0;
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-muted);
cursor: pointer;
text-align: left;
}
.ov-num .ov-sorteer { justify-content: flex-end; }
.ov-sorteer:hover { color: var(--ink-heading); }
.ov-sorteer__pijl {
width: 8px; height: 8px; flex: none;
opacity: 0;
background: currentColor;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
[aria-sort="descending"] .ov-sorteer { color: var(--accent); }
[aria-sort="descending"] .ov-sorteer__pijl { opacity: 1; }
[aria-sort="ascending"] .ov-sorteer { color: var(--accent); }
[aria-sort="ascending"] .ov-sorteer__pijl { opacity: 1; transform: rotate(180deg); }
.ov-duel-rij__zijde {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; gap: var(--s3);
text-decoration: none;
color: var(--ink-heading);
font-weight: 600;
font-size: 15px;
}
.ov-duel-rij__zijde img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-duel-rij__zijde span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-duel-rij__zijde:hover { color: var(--accent); }
.ov-duel-rij__zijde--uit { flex-direction: row-reverse; text-align: right; }
@media (max-width: 780px) {
.ov-clubkop__inner { flex-wrap: nowrap; align-items: center; }
.ov-clubkop__logo { width: 52px; height: 52px; }
.ov-clubkop__titel { font-size: 26px; margin-bottom: var(--s3); }
.ov-clubkop__tekst { flex: 1 1 auto; }
.ov-hero__titel { font-size: 26px; }
.ov-hero--compact .ov-hero__merk { flex-wrap: nowrap; }
.ov-portret { width: 34px; height: 34px; }
}
.ov-menuknop { display: none; }
.ov-menu {
display: contents;
}
@media (max-width: 900px) {
.ov-header__inner { flex-wrap: nowrap; gap: var(--s3); min-height: 60px; }
.ov-menuknop {
display: grid;
place-items: center;
flex: none;
margin-left: auto;
width: 42px; height: 38px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
color: var(--ink-heading);
cursor: pointer;
}
.ov-menuknop:hover { background: var(--band); }
.ov-menuknop__streepjes { display: grid; gap: 3px; width: 16px; }
.ov-menuknop__streepjes i {
display: block; height: 2px; border-radius: 1px;
background: currentColor;
}
.ov-menu {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
z-index: 39;
flex-direction: column;
gap: var(--s4);
padding: var(--s5);
background: var(--canvas);
border-bottom: 1px solid var(--line);
box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}
.ov-menu-open .ov-menu { display: flex; }
.ov-header__bar { position: sticky; }
.ov-header__inner { position: relative; }
.ov-menu .ov-nav { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.ov-menu .ov-nav__list { width: 100%; flex-wrap: wrap; overflow: visible; gap: var(--s2); }
.ov-menu .ov-nav__item--meer { display: block; }
.ov-menu .ov-nav__meer { display: none; }
.ov-menu .ov-nav__link, .ov-menu .ov-nav__list a { font-size: 15px; padding: var(--s2) var(--s4); background: var(--surface); }
.ov-menu .ov-nav__meer__lijst { min-width: 200px; }
.ov-menu .ov-search { width: 100%; }
.ov-menu .ov-search__input { width: 100%; }
.ov-menu .ov-thema { align-self: flex-start; }
}
@media (max-width: 780px) {
.ov-tabel--stand { min-width: 0; }
.ov-tabel--stand th:nth-child(4),
.ov-tabel--stand td:nth-child(4),
.ov-tabel--stand th:nth-child(5),
.ov-tabel--stand td:nth-child(5),
.ov-tabel--stand th:nth-child(6),
.ov-tabel--stand td:nth-child(6),
.ov-tabel--stand th:nth-child(7),
.ov-tabel--stand td:nth-child(7),
.ov-tabel--stand th:nth-child(8),
.ov-tabel--stand td:nth-child(8),
.ov-tabel--stand th:nth-child(9),
.ov-tabel--stand td:nth-child(9) { display: none; }
.ov-tabel--stand .ov-clubcel span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 33vw; display: inline-block; vertical-align: middle;
}
.ov-tabel--stand th, .ov-tabel--stand td { padding-inline: var(--s2); }
.ov-tabel--stand td:first-child, .ov-tabel--stand th:first-child { padding-left: var(--s4); }
.ov-tabel--stand .ov-clubcel span { font-size: 14px; }
.ov-tabel--stand .ov-vorm { gap: 2px; }
.ov-tabel--stand .ov-vorm i { width: 15px; height: 15px; font-size: 9px; }
.ov-tabel th, .ov-tabel td { padding-inline: var(--s3); }
}
.ov-toplijst__rij { gap: var(--s3); }
.ov-toplijst__wie { flex: 1 1 auto; min-width: 0; }
.ov-toplijst__club {
display: flex; align-items: center; gap: 5px;
font-size: 12px; color: var(--ink-muted);
margin-top: 1px;
}
.ov-toplijst__club img { width: 14px; height: 14px; object-fit: contain; flex: none; }
.ov-portret--lijst { width: 30px; height: 30px; }
.ov-toplijst__rij--top { padding: var(--s3) 0; }
.ov-toplijst__rij--top .ov-portret--lijst { width: 44px; height: 44px; }
.ov-toplijst__rij--top .ov-toplijst__naam { font-size: 15px; font-weight: 600; }
.ov-toplijst__rij--top .ov-toplijst__waarde { font-size: 17px; }
.ov-toplijst__rij--top .ov-medaille { width: 24px; height: 24px; font-size: 12px; }
.ov-rij--top td { padding-block: var(--s3); }
.ov-rij--top .ov-portret { width: 44px; height: 44px; }
.ov-rij--top .ov-tabel__naam { font-size: 16px; }
.ov-rij--top .ov-punten { font-size: 17px; }
.ov-index {
display: grid;
gap: var(--s6) var(--s8);
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
background: none;
border: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: var(--s8) 0;
margin-top: var(--s6);
}
.ov-index__kop {
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s3);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--line);
}
.ov-index__kop a { text-decoration: none; color: inherit; }
.ov-index__kop a:hover { color: var(--accent); }
.ov-index__lijst {
display: grid;
gap: 3px;
list-style: none; margin: 0; padding: 0;
}
.ov-index__lijst a {
display: block;
padding: 2px 0;
border: 0;
border-radius: 0;
background: none;
font-size: 14px;
font-weight: 400;
color: var(--ink);
text-decoration: none;
}
.ov-index__lijst a:hover { background: none; color: var(--accent); text-decoration: underline; }
@media (max-width: 780px) {
.ov-tabel--stand th, .ov-tabel--stand td { padding-inline: 6px; }
.ov-tabel--stand td:first-child, .ov-tabel--stand th:first-child { padding-left: var(--s3); }
.ov-tabel--stand td:last-child, .ov-tabel--stand th:last-child { padding-right: var(--s3); }
.ov-tabel--stand .ov-vorm i:nth-last-child(n+4) { display: none; }
.ov-tabel--stand .ov-clubcel { gap: var(--s2); }
.ov-tabel--stand .ov-clubcel img { width: 20px; height: 20px; }
.ov-tabel--stand .ov-clubcel span { max-width: 38vw; }
.ov-tabel--stand .ov-rang { width: 22px; }
}
@media (max-width: 780px) {
.ov-tabel th .ov-sorteer { padding: var(--s3) 6px; }
.ov-tabel--stand th:first-child .ov-sorteer { padding-left: var(--s3); }
.ov-tabel--stand th:last-child .ov-sorteer { padding-right: var(--s3); }
}
@media (max-width: 400px) {
.ov-tabel--stand th:last-child,
.ov-tabel--stand td:last-child { display: none; }
.ov-tabel--stand .ov-clubcel span { max-width: 40vw; }
.ov-tabel--stand .ov-clubcel img { width: 18px; height: 18px; }
}
:root {
--surface:      #fafafa;
--surface-2:    #ffffff;
--band:         #f2f2f2;
--line:         #e6e6e6;
--line-strong:  #d6d6d6;
--accent-wash:  #f0f0f0;
}
[data-thema="donker"] {
--surface:      #1b1b1b;
--surface-2:    #212121;
--band:         #171717;
--line:         #2e2e2e;
--line-strong:  #3b3b3b;
--accent-wash:  #232323;
}
.ov-hero--compact {
background: var(--canvas);
border-bottom: 1px solid var(--line);
padding-block: var(--s6) var(--s8);
}
.ov-hero--compact .ov-hero__logo { background: var(--surface); border: 1px solid var(--line); }
.ov-cijfer { border-left-width: 2px; }
.ov-toplijst__rij--eerste { padding: var(--s4) 0; align-items: center; }
.ov-toplijst__rij--eerste .ov-portret--lijst { width: 56px; height: 56px; }
.ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 17px; font-weight: 600; }
.ov-toplijst__rij--eerste .ov-toplijst__club { font-size: 13px; }
.ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 22px; }
.ov-toplijst__rij--eerste .ov-medaille { width: 26px; height: 26px; font-size: 13px; }
.ov-rij--eerste td { padding-block: var(--s4); }
.ov-rij--eerste .ov-portret { width: 56px; height: 56px; }
.ov-rij--eerste .ov-tabel__naam { font-size: 17px; }
.ov-rij--eerste .ov-punten { font-size: 20px; }
@media (max-width: 780px) {
.ov-toplijst__rij--eerste .ov-portret--lijst { width: 66px; height: 66px; }
.ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 18px; }
.ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 24px; }
.ov-rij--eerste .ov-portret { width: 66px; height: 66px; }
}
.ov-index {
display: block;
padding: var(--s5) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-top: var(--s5);
}
.ov-index__regel {
display: flex;
align-items: baseline;
gap: var(--s2) var(--s4);
padding: 5px 0;
flex-wrap: wrap;
}
.ov-index__cat {
flex: none;
width: 168px;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
text-decoration: none;
}
.ov-index__cat:hover { color: var(--accent); }
.ov-index__lijst {
flex: 1 1 320px;
display: flex; flex-wrap: wrap;
gap: 2px var(--s3);
list-style: none; margin: 0; padding: 0;
}
.ov-index__lijst li { display: flex; align-items: center; }
.ov-index__lijst li + li::before {
content: "";
width: 3px; height: 3px; border-radius: 50%;
background: var(--line-strong);
margin-right: var(--s3);
}
.ov-index__lijst a {
padding: 0;
font-size: 14px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.ov-index__lijst a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 700px) {
.ov-index__cat { width: auto; }
.ov-index__regel { flex-direction: column; gap: 2px; padding-block: var(--s3); }
}
:root {
--canvas:       #f1f2f1;
--surface:      #ffffff;
--surface-2:    #fafafa;
--band:         #e6e8e6;
--line:         #e2e4e2;
--line-strong:  #cfd2cf;
--accent-wash:  #f4f5f4;
}
[data-thema="donker"] {
--canvas:       #111211;
--surface:      #1c1d1c;
--surface-2:    #232423;
--band:         #191a19;
--line:         #2e302e;
--line-strong:  #3c3e3c;
--accent-wash:  #232423;
}
.ov-hero--compact, .ov-clubkop { background: var(--surface); }
.ov-hero--compact .ov-hero__logo { background: var(--surface); }
.ov-header__bar { background: var(--surface); }
.ov-panel, .ov-match, .ov-cijfer, .ov-ranglijst, .ov-clubkaart, .ov-league {
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
[data-thema="donker"] .ov-panel,
[data-thema="donker"] .ov-match,
[data-thema="donker"] .ov-cijfer,
[data-thema="donker"] .ov-ranglijst,
[data-thema="donker"] .ov-clubkaart,
[data-thema="donker"] .ov-league { box-shadow: none; }
.ov-ranglijst, .ov-cijfer, .ov-clubkaart, .ov-league { background: var(--surface); }
.ov-tabel tbody tr:hover { background: var(--surface-2); }
.ov-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ov-index {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
padding: 0;
margin: var(--s5) 0 0;
border: 0;
position: relative;
}
.ov-menu-uit { position: relative; }
.ov-menu-uit > summary {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s4);
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
font-size: 14px;
font-weight: 500;
color: var(--ink-heading);
cursor: pointer;
list-style: none;
white-space: nowrap;
}
.ov-menu-uit > summary::-webkit-details-marker { display: none; }
.ov-menu-uit > summary::after {
content: "";
width: 7px; height: 7px;
border-right: 1.5px solid var(--ink-muted);
border-bottom: 1.5px solid var(--ink-muted);
transform: translateY(-2px) rotate(45deg);
}
.ov-menu-uit[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ov-menu-uit > summary:hover { border-color: var(--line-strong); }
.ov-menu-uit[open] > summary { border-color: var(--accent); color: var(--accent); }
.ov-menu-uit__aantal {
font-size: 11px;
font-weight: 600;
color: var(--ink-muted);
background: var(--band);
border-radius: var(--r-pill);
padding: 1px 6px;
}
.ov-menu-uit__lijst {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 30;
min-width: 210px;
display: grid;
gap: 1px;
list-style: none; margin: 0;
padding: var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
}
.ov-menu-uit__lijst a {
display: block;
padding: 6px var(--s3);
border-radius: var(--r-sm);
font-size: 14px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.ov-menu-uit__lijst a:hover { background: var(--band); color: var(--accent); }
@media (max-width: 700px) {
.ov-index { flex-direction: column; gap: var(--s1); }
.ov-menu-uit > summary { justify-content: space-between; }
.ov-menu-uit__aantal { margin-left: auto; }
.ov-menu-uit__lijst { position: static; box-shadow: none; margin-top: var(--s1); min-width: 0; }
}
.ov-filter {
display: flex; flex-wrap: wrap; gap: var(--s2);
margin-bottom: var(--s4);
}
.ov-filter__knop {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px var(--s3);
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
font: inherit; font-size: 13px; font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.ov-filter__knop img { width: 16px; height: 16px; object-fit: contain; }
.ov-filter__knop:hover { border-color: var(--line-strong); }
.ov-filter__knop.is-actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.ov-absenties { list-style: none; margin: 0; padding: 0; }
.ov-absentie {
display: flex; align-items: center; gap: var(--s3);
padding: 9px var(--s5);
border-bottom: 1px solid var(--line);
font-size: 15px;
}
.ov-absentie:last-child { border-bottom: 0; }
.ov-absentie[hidden] { display: none; }
.ov-absentie__club { flex: none; display: flex; }
.ov-absentie__club img { width: 22px; height: 22px; object-fit: contain; }
.ov-absentie__wie {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: baseline; gap: var(--s3);
}
.ov-absentie__naam { font-weight: 600; color: var(--ink-heading); }
.ov-absentie__reden { color: var(--ink-muted); font-size: 14px; }
@media (max-width: 620px) {
.ov-absentie { gap: var(--s3); padding: 7px var(--s4); }
.ov-absentie__wie { display: block; }
.ov-absentie__naam { display: block; }
.ov-absentie__reden { display: block; font-size: 13px; line-height: 1.3; }
}
.ov-toplijst__rij--eerste .ov-portret--lijst { width: 66px; height: 66px; }
.ov-rij--eerste .ov-portret { width: 66px; height: 66px; }
.ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 18px; }
.ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 24px; }
:root { --ink-heading: #122019; }
[data-thema="donker"] { --ink-heading: #eef2ef; }
.ov-tabel--stand th .ov-sorteer { padding-inline: var(--s3); }
.ov-tabel--stand td { padding-inline: var(--s3); }
.ov-tabel--stand th:first-child .ov-sorteer,
.ov-tabel--stand td:first-child {
padding-left: var(--s4);
padding-right: 4px;
}
.ov-tabel--stand .ov-rang { width: 20px; }
.ov-rij--eerste .ov-speleercel { gap: var(--s4); }
.ov-rij--eerste .ov-clubcel--klein { font-size: 14px; }
.ov-tabel--stand th:nth-child(2),
.ov-tabel--stand td:nth-child(2) { width: 100%; }
:root { --ink-heading: #1e4030; }
[data-thema="donker"] { --ink-heading: #e8f2ec; }
.ov-duel-rij__tegen img { width: 30px; height: 30px; }
.ov-duel-rij__tegen strong { font-size: 16px; }
.ov-duel-rij { padding-block: var(--s3); }
.ov-waar {
flex: none;
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: var(--r-pill);
border: 1px solid transparent;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ov-waar--thuis { background: var(--ok-bg);      color: var(--ok-tx);      border-color: var(--ok-ln); }
.ov-waar--uit   { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); }
.ov-duel-rij .ov-vorm__winst,
.ov-duel-rij .ov-vorm__gelijk,
.ov-duel-rij .ov-vorm__verlies {
width: 24px; height: 24px;
font-size: 12px;
}
.ov-search__input { width: 210px; }
@media (max-width: 900px) {
.ov-search__input { width: 100%; }
}
.ov-duel-rij__tegen strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 620px) {
.ov-duel-rij__ronde { display: none; }
.ov-duel-rij { gap: var(--s2); padding-inline: var(--s4); }
.ov-duel-rij__tijd { font-size: 12px; }
.ov-waar { padding-inline: 7px; }
}
.ov-duel-rij__ronde { width: 96px; }
.ov-duel-rij__tegen { flex: 1 1 auto; min-width: 0; }
.ov-waar {
min-width: 56px;
justify-content: center;
padding-inline: 6px;
}
.ov-duel-rij__tijd { width: 106px; text-align: right; }
.ov-duel-rij__score { width: 62px; justify-content: center; text-align: center; }
.ov-duel-rij__score--open {
width: auto;
min-width: 62px;
display: flex;
flex-direction: column;
line-height: 1.15;
padding-block: 3px;
}
.ov-duel-rij__vlag {
font-size: 10px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-muted);
}
@media (max-width: 620px) {
.ov-duel-rij__tijd { width: 86px; }
.ov-duel-rij__score { width: 54px; }
.ov-duel-rij__score--open { width: auto; min-width: 54px; }
}
.ov-status {
display: inline-grid;
place-items: center;
width: 26px; height: 26px;
flex: none;
}
.ov-status svg { width: 20px; height: 20px; display: block; }
.ov-status--out     { color: var(--danger-tx); }
.ov-status--twijfel { color: var(--warn-tx); }
.ov-status--rood    { color: #d42a2a; }
.ov-status--geel    { color: #e0a800; }
.ov-status--rood svg rect,
.ov-status--geel svg rect {
stroke: rgba(0, 0, 0, .35);
stroke-width: 1.2;
}
[data-thema="donker"] .ov-status--rood svg rect,
[data-thema="donker"] .ov-status--geel svg rect { stroke: rgba(255, 255, 255, .3); }
.ov-statuscel { width: 60px; }
.ov-filter {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--s2);
}
.ov-filter__knop {
display: grid;
place-items: center;
padding: 7px;
gap: 0;
}
.ov-filter__knop img { width: 28px; height: 28px; }
.ov-filter__knop--alle { font-size: 13px; font-weight: 600; }
@media (max-width: 700px) {
.ov-filter { grid-template-columns: repeat(6, 1fr); }
.ov-filter__knop { padding: 6px; }
.ov-filter__knop img { width: 24px; height: 24px; }
.ov-filter__knop--alle { font-size: 12px; }
}
.ov-tabel--stand th:first-child .ov-sorteer,
.ov-tabel--stand td:first-child {
padding-left: var(--s3);
padding-right: 2px;
}
.ov-tabel--stand .ov-rang { width: 18px; }
@media (max-width: 780px) {
.ov-tabel--stand th:first-child .ov-sorteer,
.ov-tabel--stand td:first-child {
padding-left: 6px;
padding-right: 2px;
}
.ov-tabel--stand .ov-rang { width: 15px; }
.ov-tabel--stand th .ov-sorteer { padding-inline: var(--s2); }
.ov-tabel--stand td { padding-inline: var(--s2); }
}
.ov-duel-rij__score--winst   { background: var(--ok-bg);      color: var(--ok-tx); }
.ov-duel-rij__score--gelijk  { background: var(--neutral-bg); color: var(--neutral-tx); }
.ov-duel-rij__score--verlies { background: var(--danger-bg);  color: var(--danger-tx); }
.ov-header .ov-logo__line2 { color: #00b96c; }
@media (max-width: 359px) {
.ov-tabel--stand .ov-clubcel span { max-width: 30vw; }
}
.ov-hero--compact { padding-block: var(--s8); }
.ov-hero--compact .ov-hero__merk { margin-bottom: 0; }
.ov-vooruit { padding: var(--s6) var(--s5); }
.ov-vooruit__duel {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s4);
padding-bottom: var(--s5);
border-bottom: 1px solid var(--line);
}
.ov-vooruit__zijde {
display: flex; align-items: center; gap: var(--s3);
flex: 1 1 0; min-width: 0;
font-size: 17px;
}
.ov-vooruit__zijde strong { color: var(--ink-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-vooruit__zijde img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.ov-vooruit__zijde--tegen { justify-content: flex-end; text-align: right; }
.ov-vooruit__xg { padding-block: var(--s5); }
.ov-vooruit__label {
display: block;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s3);
text-align: center;
}
.ov-vooruit__balk {
height: 10px;
border-radius: 999px;
background: var(--danger-bg);
overflow: hidden;
}
.ov-vooruit__eigen { display: block; height: 100%; background: var(--accent); }
.ov-vooruit__cijfers {
display: flex; justify-content: space-between;
margin-top: var(--s2);
font-family: var(--font-display);
font-size: 22px;
color: var(--ink-heading);
}
.ov-vooruit__kansen {
list-style: none; margin: 0; padding: var(--s5) 0 0;
border-top: 1px solid var(--line);
display: grid;
gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.ov-vooruit__kansen li {
display: flex; flex-direction: column; gap: 2px;
padding: var(--s3) var(--s4);
background: var(--surface-2);
border-radius: var(--r-card);
}
.ov-vooruit__kansen span { font-size: 12px; color: var(--ink-muted); }
.ov-vooruit__kansen strong {
font-family: var(--font-display);
font-size: 19px;
color: var(--ink-heading);
}
.ov-tabel--splitsing th:first-child,
.ov-tabel--splitsing td:first-child { width: 100%; }
.ov-tabel--splitsing { min-width: 0; }
@media (max-width: 780px) {
.ov-duo .ov-tabel { min-width: 0; }
.ov-duo .ov-tabel th .ov-sorteer { padding-inline: var(--s2); }
.ov-duo .ov-tabel td { padding-inline: var(--s2); }
.ov-duo .ov-tabel td:first-child { padding-left: var(--s3); }
.ov-duo .ov-tabel .ov-tabel__naam {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 44vw; display: inline-block; vertical-align: middle;
}
.ov-vooruit__cijfers { font-size: 19px; }
.ov-vooruit__zijde { font-size: 15px; }
.ov-vooruit__zijde img { width: 28px; height: 28px; }
}
.ov-duel-rij__score {
white-space: nowrap;
flex: none;
}
.ov-speleercel__club {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 2px;
font-size: 12px;
font-weight: 400;
color: var(--ink-muted);
text-decoration: none;
}
.ov-speleercel__club img { width: 15px; height: 15px; object-fit: contain; flex: none; }
.ov-speleercel__club:hover { color: var(--accent); }
.ov-speleercel__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 780px) {
.ov-duo .ov-speleercel { gap: var(--s3); }
.ov-duo .ov-portret { width: 34px; height: 34px; }
.ov-duo .ov-tabel .ov-tabel__naam { max-width: 40vw; }
.ov-duo .ov-speleercel__club { max-width: 40vw; }
}
@media (max-width: 780px) {
.ov-duo .ov-tabel th.ov-num .ov-sorteer { padding-inline: 5px; }
.ov-duo .ov-tabel td.ov-num { padding-inline: 5px; }
.ov-duo .ov-tabel td:last-child,
.ov-duo .ov-tabel th:last-child .ov-sorteer { padding-right: var(--s3); }
}
@media (max-width: 400px) {
.ov-duo .ov-tabel .ov-tabel__naam,
.ov-duo .ov-speleercel__club { max-width: 34vw; }
}
@media (max-width: 780px) {
.ov-duo .ov-tabel th:first-child .ov-sorteer,
.ov-duo .ov-tabel td:first-child { padding-left: var(--s2); padding-right: 2px; }
.ov-duo .ov-tabel .ov-rang { width: 16px; }
}
.ov-duo .ov-tabel th:nth-child(2),
.ov-duo .ov-tabel td:nth-child(2) { width: 100%; }
.ov-duo .ov-tabel { min-width: 0; }
.ov-ranglijsten--duo { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
a.ov-toplijst__club { text-decoration: none; }
a.ov-toplijst__club:hover { color: var(--accent); text-decoration: underline; }
.ov-duelkop {
background: var(--surface);
border-bottom: 1px solid var(--line);
padding-block: var(--s5) var(--s8);
}
.ov-duelkop__titel {
font-family: var(--font-display);
font-size: clamp(26px, 3.6vw, 40px);
line-height: 1.12;
letter-spacing: -0.03em;
max-width: 22ch;
margin: var(--s2) 0 var(--s6);
}
.ov-duelkop__ploegen {
display: flex;
align-items: center;
gap: var(--s5);
}
.ov-duelkop__ploeg {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; gap: var(--s4);
text-decoration: none;
color: var(--ink);
}
.ov-duelkop__ploeg img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.ov-duelkop__ploeg strong {
display: block; font-size: 20px; color: var(--ink-heading);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-duelkop__ploeg em { display: block; font-style: normal; font-size: 13px; color: var(--ink-muted); }
.ov-duelkop__ploeg:hover strong { color: var(--accent); }
.ov-duelkop__ploeg--uit { flex-direction: row-reverse; text-align: right; }
.ov-duelkop__tegen {
flex: none;
font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink-muted);
}
.ov-duelkop__stadion { margin: var(--s5) 0 0; font-size: 14px; color: var(--ink-muted); }
.ov-duelkop__bevestigd {
display: flex; align-items: center; gap: var(--s2);
margin: calc(-1 * var(--s6) + var(--s3)) 0 var(--s6);
font-size: 14px; font-weight: 600; color: var(--ok-tx);
}
.ov-duelkop__zone {
margin: calc(-1 * var(--s4)) 0 var(--s6);
font-size: 13px;
color: var(--ink-muted);
}
.ov-duelkop__bevestigd::before {
content: ""; flex: none;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
}
.ov-tabel--vergelijk { min-width: 0; }
.ov-tabel--vergelijk th:nth-child(2),
.ov-tabel--vergelijk td:nth-child(2) { width: 100%; text-align: center; }
.ov-tabel--vergelijk th:nth-child(2) { text-align: center; }
.ov-vergelijk__label { color: var(--ink-soft); font-size: 14px; }
.ov-tabel--vergelijk td:first-child { text-align: right; }
.ov-tabel--vergelijk td:last-child { text-align: left; }
.ov-tabel--vergelijk th:last-child .ov-sorteer { justify-content: flex-start; }
.ov-h2h { padding: var(--s6) var(--s5); }
.ov-h2h__balans {
display: flex;
align-items: stretch;
gap: var(--s2);
margin-bottom: var(--s5);
}
.ov-h2h__deel {
flex: 1 1 0;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: var(--s4) var(--s3);
border-radius: var(--r-card);
text-align: center;
}
.ov-h2h__deel strong { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.ov-h2h__deel em {
font-style: normal; font-size: 12px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ov-h2h__deel--thuis  { background: var(--ok-bg);      color: var(--ok-tx); }
.ov-h2h__deel--gelijk { background: var(--neutral-bg); color: var(--neutral-tx); }
.ov-h2h__deel--uit    { background: var(--info-bg);    color: var(--info-tx); }
.ov-h2h__cijfers {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.ov-h2h__cijfers li {
display: flex; flex-direction: column; gap: 2px;
padding: var(--s3) var(--s4);
background: var(--surface-2);
border-radius: var(--r-card);
}
.ov-h2h__cijfers span { font-size: 12px; color: var(--ink-muted); }
.ov-h2h__cijfers strong { font-family: var(--font-display); font-size: 19px; color: var(--ink-heading); }
.ov-duels--h2h { border-top: 1px solid var(--line); }
.ov-duels--h2h .ov-duel-rij__zijde { font-size: 14px; }
.ov-duels--h2h .ov-duel-rij__tijd { width: 74px; text-align: left; }
.ov-duel-rij__link {
text-decoration: none;
color: var(--accent);
font-weight: 600;
}
.ov-duel-rij__link:hover { text-decoration: underline; }
@media (max-width: 700px) {
.ov-duelkop__ploegen { gap: var(--s3); }
.ov-duelkop__ploeg img { width: 44px; height: 44px; }
.ov-duelkop__ploeg { gap: var(--s3); }
.ov-duelkop__ploeg strong { font-size: 16px; }
.ov-duelkop__tegen { font-size: 11px; }
.ov-h2h__deel strong { font-size: 22px; }
.ov-duels--h2h .ov-duel-rij__zijde span { display: none; }
}
.ov-duelkop__titel { max-width: 34ch; }
.ov-uitleg-kort { max-width: 68ch; }
.ov-duelkop { padding-top: var(--s5); }
.ov-duelkop .ov-kruimels { padding-top: 0; padding-bottom: var(--s5); }
.ov-tabel--spelers { min-width: 0; }
.ov-tabel--spelers th:first-child,
.ov-tabel--spelers td:first-child { width: 100%; }
@media (max-width: 780px) {
.ov-tabel--spelers th .ov-sorteer,
.ov-tabel--spelers td { padding-inline: var(--s2); }
.ov-tabel--spelers td:first-child { padding-left: var(--s3); }
.ov-tabel--spelers .ov-tabel__naam {
max-width: 34vw; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; display: inline-block; vertical-align: middle;
}
.ov-tabel--spelers .ov-portret { width: 34px; height: 34px; }
.ov-tabel--spelers .ov-rij--eerste .ov-portret { width: 48px; height: 48px; }
}
.ov-tabel--spelers .ov-tabel__naam { white-space: normal; }
@media (max-width: 780px) {
.ov-tabel--spelers th:last-child,
.ov-tabel--spelers td:last-child { display: none; }
}
@media (max-width: 400px) {
.ov-tabel--spelers .ov-tabel__naam { max-width: 26vw; }
.ov-tabel--spelers .ov-portret { width: 30px; height: 30px; }
.ov-tabel--spelers .ov-rij--eerste .ov-portret { width: 42px; height: 42px; }
.ov-tabel--spelers .ov-speleercel { gap: var(--s2); }
.ov-tabel--vergelijk th .ov-sorteer,
.ov-tabel--vergelijk td { padding-inline: var(--s2); }
.ov-vergelijk__label { font-size: 13px; }
}
.ov-toplijst--duel { padding: 0 var(--s5); }
.ov-duelstat { flex: none; display: flex; gap: var(--s4); }
.ov-duelstat__deel {
display: flex; flex-direction: column; align-items: center; gap: 0;
min-width: 34px;
}
.ov-duelstat__deel strong {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.1;
color: var(--ink-heading);
}
.ov-duelstat__deel em {
font-style: normal;
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-muted);
}
.ov-toplijst__rij--eerste .ov-duelstat__deel strong { font-size: 22px; }
@media (max-width: 400px) {
.ov-toplijst--duel { padding-inline: var(--s4); }
.ov-duelstat { gap: var(--s3); }
.ov-duelstat__deel { min-width: 30px; }
}
.ov-waar--thuis { background: var(--info-bg);    color: var(--info-tx);    border-color: var(--info-ln); }
.ov-waar--uit   { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); }
.ov-duelkop__uitslag {
flex: none;
font-family: var(--font-display);
font-size: 30px;
font-variant-numeric: tabular-nums;
color: var(--ink-heading);
background: var(--band);
border-radius: var(--r-card);
padding: 4px var(--s4);
white-space: nowrap;
}
.ov-goals { list-style: none; margin: 0; padding: 0; }
.ov-goal {
display: flex; align-items: center; gap: var(--s3);
padding: 10px var(--s5);
border-bottom: 1px solid var(--line);
font-size: 15px;
}
.ov-goal:last-child { border-bottom: 0; }
.ov-goal__minuut {
flex: none; width: 42px;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--ink-muted);
}
.ov-goal__logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-goal__wie { min-width: 0; }
.ov-goal__wie strong { color: var(--ink-heading); }
.ov-goal__wie em {
display: block; font-style: normal;
font-size: 12px; color: var(--ink-muted);
}
.ov-duel-rij { position: relative; }
.ov-duel-rij__strek::after {
content: "";
position: absolute;
inset: 0;
}
.ov-duel-rij:hover { background: var(--surface-2); }
.ov-duel-rij:hover .ov-duel-rij__strek strong,
.ov-duel-rij:hover .ov-duel-rij__strek span { color: var(--accent); }
.ov-duel-rij__score,
.ov-duel-rij__tijd,
.ov-waar { position: relative; }
@media (max-width: 700px) {
.ov-duelkop__ploegen {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--s3);
}
.ov-duelkop__ploeg {
flex-direction: column;
text-align: center;
gap: var(--s2);
min-width: 0;
}
.ov-duelkop__ploeg--uit { flex-direction: column-reverse; }
.ov-duelkop__ploeg img { width: 48px; height: 48px; }
.ov-duelkop__ploeg strong { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
.ov-duelkop__ploeg em { font-size: 12px; }
.ov-duelkop__uitslag { font-size: 26px; padding-inline: var(--s3); }
.ov-duelkop__tegen { writing-mode: horizontal-tb; }
}
@media (max-width: 700px) {
.ov-duels--h2h .ov-duel-rij { gap: var(--s2); }
.ov-duels--h2h .ov-duel-rij__zijde { flex: 1 1 0; justify-content: flex-end; }
.ov-duels--h2h .ov-duel-rij__zijde--uit { justify-content: flex-start; }
.ov-duels--h2h .ov-duel-rij__tijd { width: 66px; }
}
@media (max-width: 400px) {
.ov-tabel--splitsing th .ov-sorteer,
.ov-tabel--splitsing td { padding-inline: var(--s2); }
.ov-tabel--splitsing td:first-child { font-size: 14px; }
}
.ov-absentie__naam {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
@media (max-width: 700px) {
.ov-duels--h2h .ov-duel-rij__zijde,
.ov-duels--h2h .ov-duel-rij__zijde--uit { justify-content: flex-end; }
}
.ov-duel-rij--klik .ov-duel-rij__vlak {
position: absolute;
inset: 0;
z-index: 2;
border-radius: var(--r-sm);
}
.ov-duel-rij--klik:hover { background: var(--surface-2); }
.ov-duel-rij--klik:hover .ov-duel-rij__zijde span,
.ov-duel-rij--klik:hover .ov-duel-rij__tegen strong { color: var(--accent); }
.ov-duel-rij--klik:focus-within { background: var(--surface-2); }
.ov-duel-rij--klik .ov-duel-rij__vlak:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.ov-elftallen {
display: grid;
gap: var(--s4);
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.ov-elftallen__voet { margin: var(--s4) 0 0; }
.ov-elftal {
position: relative;
padding: var(--s5);
overflow: hidden;
}
.ov-elftal::after {
content: "";
position: absolute;
right: -30px; top: -30px;
width: 190px; height: 190px;
background: var(--ov-wapen) center / contain no-repeat;
opacity: .05;
pointer-events: none;
}
.ov-elftal > * { position: relative; z-index: 1; }
[data-thema="donker"] .ov-elftal::after { opacity: .08; }
.ov-elftal__kop {
display: flex; align-items: center; gap: var(--s3);
margin-bottom: var(--s4);
}
.ov-elftal__kop img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.ov-elftal__kop strong { display: block; color: var(--ink-heading); font-size: 16px; }
.ov-elftal__kop em {
display: block; font-style: normal;
font-size: 12px; color: var(--ink-muted);
}
.ov-veld {
position: relative;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
gap: var(--s3);
min-height: 470px;
padding: var(--s5) var(--s2);
border-radius: var(--r-card);
background: var(--pitch);
}
.ov-veld__gras {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
.ov-veld__gras::before {
content: "";
position: absolute; left: 0; right: 0; top: 50%;
border-top: 1px solid rgba(255, 255, 255, .13);
}
.ov-veld__cirkel {
position: absolute; left: 50%; top: 50%;
width: 92px; height: 92px; margin: -46px 0 0 -46px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 50%;
}
.ov-veld__zestien {
position: absolute; left: 50%; bottom: 0;
width: 46%; height: 62px; margin-left: -23%;
border: 1px solid rgba(255, 255, 255, .13);
border-bottom: 0;
}
.ov-veld__lijn {
position: relative;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
gap: var(--s1);
}
.ov-veld__speler {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 4px;
flex: 0 1 auto; min-width: 0;
text-align: center;
}
.ov-veld__portret {
position: relative;
display: block;
width: 56px; height: 56px;
}
.ov-veld__portret img,
.ov-veld__leeg {
display: block;
width: 56px; height: 56px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, .9);
box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.ov-veld__nr {
position: absolute;
right: -2px; bottom: -2px;
min-width: 20px; height: 20px;
padding: 0 4px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--deep);
color: var(--ink-on-deep);
border: 1px solid rgba(255, 255, 255, .55);
font-size: 11px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
.ov-veld__naam {
max-width: 92px;
font-size: 11px; line-height: 1.25;
color: var(--ink-on-deep);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-veld__speler.is-twijfel .ov-veld__portret img,
.ov-veld__speler.is-twijfel .ov-veld__leeg {
box-shadow: none;
border: 2px dashed rgba(255, 255, 255, .75);
}
.ov-tip {
position: absolute;
top: -4px;
right: calc(50% - 36px);
z-index: 3;
}
.ov-tip__punt {
display: grid; place-items: center;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--accent);
color: #04170e;
font-size: 10px; font-weight: 700; line-height: 1;
cursor: help;
}
.ov-tip__blok {
position: absolute;
top: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
width: max-content; max-width: 150px;
padding: 6px 9px;
border-radius: var(--r-sm);
background: var(--deep);
color: var(--ink-on-deep);
font-size: 11px; line-height: 1.35;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity .12s ease;
pointer-events: none;
}
.ov-tip__blok span {
display: block;
font-size: 10px;
color: rgba(255, 255, 255, .65);
text-transform: uppercase;
letter-spacing: .05em;
}
.ov-tip__blok strong { display: block; color: #fff; font-size: 12px; }
.ov-tip__blok::after {
content: "";
position: absolute;
bottom: 100%; left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-bottom-color: var(--deep);
}
.ov-tip--start .ov-tip__blok { left: -8px; transform: none; }
.ov-tip--start .ov-tip__blok::after { left: 22px; }
.ov-tip--eind .ov-tip__blok { left: auto; right: -8px; transform: none; }
.ov-tip--eind .ov-tip__blok::after { left: auto; right: 18px; }
.ov-tip:hover .ov-tip__blok,
.ov-tip:focus .ov-tip__blok,
.ov-tip:focus-visible .ov-tip__blok {
opacity: 1;
visibility: visible;
}
.ov-tip:focus-visible { outline: none; }
.ov-tip:focus-visible .ov-tip__punt { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 460px) {
.ov-veld { min-height: 420px; }
.ov-veld__portret,
.ov-veld__portret img,
.ov-veld__leeg { width: 46px; height: 46px; }
.ov-veld__nr { min-width: 18px; height: 18px; font-size: 10px; }
.ov-veld__naam { max-width: 70px; font-size: 10px; }
.ov-tip { right: calc(50% - 31px); }
}
.ov-wissels {
list-style: none; margin: var(--s4) 0 0; padding: 0;
display: grid; gap: 2px;
}
.ov-wissel {
display: grid;
grid-template-columns: 38px 1fr;
align-items: baseline;
gap: 2px var(--s2);
padding: var(--s2) 0;
border-bottom: 1px solid var(--line);
font-size: 13px;
}
.ov-wissel:last-child { border-bottom: 0; }
.ov-wissel__min {
grid-row: span 2;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.ov-wissel__in { color: var(--ok-tx); }
.ov-wissel__uit { color: var(--ink-muted); }
.ov-wissel__in::before,
.ov-wissel__uit::before {
display: inline-block;
width: 12px;
font-weight: 700;
}
.ov-wissel__in::before { content: "\2191"; }
.ov-wissel__uit::before { content: "\2193"; }
.ov-bank { margin-top: var(--s4); }
.ov-bank__kop {
display: block;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s2);
}
.ov-bank__lijst {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.ov-bank__speler {
display: flex; align-items: baseline; gap: var(--s2);
padding: 3px 0;
font-size: 13px; color: var(--ink-soft);
min-width: 0;
}
.ov-bank__nr {
flex: none; width: 20px;
font-size: 11px; color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.ov-bank__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-bank__min { flex: none; font-size: 11px; color: var(--ok-tx); }
.ov-bank__speler.is-ingevallen .ov-bank__naam { color: var(--ink-heading); }
.ov-panel--cijfers { padding: var(--s5); }
.ov-cijfers__kop {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
padding-bottom: var(--s4);
margin-bottom: var(--s3);
border-bottom: 1px solid var(--line);
}
.ov-cijfers__kop img { width: 26px; height: 26px; object-fit: contain; }
.ov-cijfers__kop span {
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
}
.ov-cijfers { list-style: none; margin: 0; padding: 0; }
.ov-cijfers__rij {
display: grid;
grid-template-columns: 3.5rem 1fr 3.5rem;
align-items: center;
gap: var(--s3);
padding: var(--s3) 0;
}
.ov-cijfers__waarde {
font-family: var(--font-display);
font-size: 16px;
color: var(--ink-heading);
font-variant-numeric: tabular-nums;
text-align: center;
}
.ov-cijfers__midden { min-width: 0; }
.ov-cijfers__label {
display: block;
text-align: center;
font-size: 12px; color: var(--ink-muted);
margin-bottom: 5px;
}
.ov-cijfers__balk {
display: flex;
gap: 2px;
height: 6px;
}
.ov-cijfers__thuis,
.ov-cijfers__uit {
display: block; height: 100%;
border-radius: 999px;
min-width: 2px;
}
.ov-cijfers__thuis { background: var(--accent); }
.ov-cijfers__uit   { background: var(--ink-soft); }
.ov-cijfers__rij.is-nul .ov-cijfers__thuis,
.ov-cijfers__rij.is-nul .ov-cijfers__uit { background: var(--band); }
.ov-duelkop__kant {
flex: 1 1 0;
min-width: 0;
}
.ov-duelkop__goals {
list-style: none;
margin: var(--s3) 0 0;
padding: 0;
display: grid;
gap: 3px;
}
.ov-duelkop__goals li {
display: flex;
align-items: baseline;
gap: var(--s2);
font-size: 13px;
min-width: 0;
}
.ov-duelkop__kant--uit .ov-duelkop__goals li { flex-direction: row-reverse; }
.ov-duelkop__min {
flex: none;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.ov-duelkop__wie {
color: var(--ink-heading);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-duelkop__wie i {
font-style: normal;
color: var(--ink-muted);
font-size: 12px;
}
@media (max-width: 700px) {
.ov-duelkop__goals li { font-size: 12px; gap: 5px; }
.ov-duelkop__wie i { display: none; }
}
.ov-afwezig {
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid var(--line);
}
.ov-afwezig__kop {
display: block;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
margin-bottom: 3px;
}
.ov-afwezig__lijst {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.ov-duel-rij__tijd--midden {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
line-height: 1.25;
min-width: 62px;
text-align: center;
}
.ov-duel-rij__tijd--midden i {
font-style: normal;
font-weight: 600;
color: var(--ink-heading);
}
@media (max-width: 700px) {
.ov-duel-rij { font-size: 13px; gap: var(--s2); }
.ov-duel-rij__zijde { font-size: 12.5px; gap: 6px; }
.ov-duel-rij__zijde img { width: 20px; height: 20px; }
.ov-duel-rij__score { padding: 2px 7px; }
.ov-duel-rij__tijd { font-size: 12px; }
.ov-duel-rij__tijd--midden { min-width: 54px; }
}
@media (max-width: 420px) {
.ov-duel-rij { padding-inline: 8px; gap: 4px; }
.ov-duel-rij__zijde { font-size: 11px; gap: 5px; }
.ov-duel-rij__zijde img { width: 16px; height: 16px; }
.ov-duel-rij__score { padding: 2px 5px; font-size: 12px; }
.ov-duel-rij__tijd { font-size: 11px; }
.ov-duel-rij__tijd--midden { min-width: 46px; }
}
.ov-duelkop__aftrap {
flex: none;
display: flex; flex-direction: column; align-items: center;
gap: 1px;
font-family: var(--font-display);
font-size: 26px; line-height: 1;
color: var(--ink-heading);
font-variant-numeric: tabular-nums;
background: var(--band);
border-radius: var(--r-card);
padding: var(--s3) var(--s4);
}
.ov-duelkop__aftrap i {
font-family: var(--font-body, inherit);
font-style: normal;
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-muted);
}
.ov-duelkop__uitslag--open {
display: flex; flex-direction: column; align-items: center;
gap: 1px; line-height: 1;
padding-block: var(--s3);
}
.ov-duelkop__vlag {
font-family: var(--font-body, inherit);
font-style: normal;
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-muted);
}
.ov-elftal__zin {
margin: var(--s4) 0 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--ink-soft);
}
.ov-elftal__zin strong { color: var(--ink-heading); font-weight: 600; }
.ov-bijgewerkt {
margin: var(--s4) 0 0;
font-size: 13px;
color: var(--ink-muted);
}
.ov-bijgewerkt time { color: var(--ink-soft); }
.ov-landgenoten { list-style: none; margin: 0; padding: 0; }
.ov-landgenoten > li + li { border-top: 1px solid var(--line); }
.ov-landgenoot {
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: var(--s4);
padding: var(--s4) var(--s5);
}
.ov-landgenoot .ov-portret { width: 42px; height: 42px; }
.ov-landgenoot__wie {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: var(--s2) var(--s3);
min-width: 0;
}
.ov-landgenoot__naam {
color: var(--ink-heading);
font-size: 16px; font-weight: 600;
line-height: 1.3;
}
.ov-landgenoot__club {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ink-muted);
font-size: 14px;
}
.ov-landgenoot__club img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.ov-landgenoot__oordeel {
justify-self: end;
text-align: right;
max-width: 20rem;
padding-right: var(--s3);
border-right: 3px solid var(--neutral-ln);
}
.ov-landgenoot__oordeel strong {
display: block;
font-size: 14px; font-weight: 700;
color: var(--ink-heading);
}
.ov-landgenoot__oordeel span {
font-size: 13px;
color: var(--ink-soft);
}
.ov-landgenoot__oordeel--in { border-right-color: var(--accent); }
.ov-landgenoot__oordeel--twijfel { border-right-color: var(--warn-tx); }
.ov-landgenoot__oordeel--uit { border-right-color: var(--danger-tx); }
@media (max-width: 620px) {
.ov-landgenoot {
grid-template-columns: 38px 1fr;
align-items: start;
gap: 3px var(--s3);
padding: var(--s3) var(--s4);
}
.ov-landgenoot .ov-portret {
width: 38px; height: 38px;
grid-row: 1 / span 2;
}
.ov-landgenoot__wie { gap: 0 var(--s2); }
.ov-landgenoot__naam { font-size: 15px; }
.ov-landgenoot__club { font-size: 13px; }
.ov-landgenoot__club img { width: 15px; height: 15px; }
.ov-landgenoot__oordeel {
grid-column: 2;
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 0 6px;
justify-self: start;
text-align: left;
max-width: none;
padding: 0;
border: 0;
}
.ov-landgenoot__oordeel::before {
content: "";
flex: none;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--neutral-ln);
transform: translateY(-1px);
}
.ov-landgenoot__oordeel strong { display: inline; font-size: 13px; }
.ov-landgenoot__oordeel span { font-size: 13px; }
.ov-landgenoot__oordeel--in::before { background: var(--accent); }
.ov-landgenoot__oordeel--twijfel::before { background: var(--warn-tx); }
.ov-landgenoot__oordeel--uit::before { background: var(--danger-tx); }
}
.ov-hero--kort { padding-block: var(--s10) var(--s10); }
.ov-hero--kort .ov-hero__title { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: var(--s3); }
.ov-hero--kort .ov-hero__lead { font-size: 16px; margin-bottom: 0; }
.ov-section--strak { padding-block: var(--s8); }
.ov-dagkop {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap;
margin-bottom: var(--s4);
}
.ov-dagacties {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--s2);
}
.ov-comprij {
display: flex; gap: var(--s2); flex-wrap: wrap;
margin-bottom: var(--s5);
}
.ov-chip {
display: inline-flex; align-items: center; justify-content: center;
position: relative;
width: 54px; height: 54px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
color: var(--ink-soft);
font-family: inherit;
font-size: 14px; font-weight: 600;
line-height: 1.15;
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, color .12s ease;
}
.ov-chip--alles {
width: auto; height: 54px;
padding: 8px var(--s4);
}
.ov-chip--alles-mobiel { display: none; }
.ov-chip--meer { display: none; }
.ov-chip img {
width: 40px; height: 40px;
padding: 1px;
box-sizing: border-box;
object-fit: contain; flex: none;
background: #fff;
border-radius: 4px;
}
.ov-chip:hover { border-color: var(--accent); color: var(--ink-heading); }
.ov-chip--alles.is-actief {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.ov-chip:not(.ov-chip--alles).is-actief {
background: var(--surface);
border-color: var(--accent);
box-shadow: 0 3px 10px rgba(0, 103, 69, .12);
}
.ov-chip:not(.ov-chip--alles).is-actief::after {
content: '';
position: absolute;
top: 5px; right: 5px;
width: 8px; height: 8px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--accent);
}
@media (max-width: 700px) {
.ov-comprij {
display: grid;
grid-template-columns: repeat( 4, 1fr );
gap: var(--s2);
}
.ov-chip {
width: 100%; height: 54px;
padding: 0;
min-width: 0;
}
.ov-chip img {
width: 40px; height: 40px;
}
.ov-chip--alles {
width: auto; height: 36px;
padding: 7px 10px;
font-size: 12px;
}
.ov-chip--alles-desktop { display: none; }
.ov-chip--alles-mobiel { display: inline-flex; }
.ov-chip--inklap { display: none; }
.ov-chip--meer { display: inline-flex; }
.ov-comprij.is-uitgeklapt .ov-chip--inklap { display: inline-flex; }
.ov-comprij.is-uitgeklapt .ov-chip--meer { display: none; }
.ov-chip--meer {
font-size: 15px;
font-weight: 700;
color: var(--ink-muted);
background: var(--surface-2, var(--surface));
}
@media (hover: hover) {
.ov-chip--meer:hover { color: var(--ink); }
}
.ov-dagacties { width: 100%; justify-content: space-between; gap: 6px; }
.ov-dagacties .ov-dagwissel__label { min-width: 6rem; }
.ov-dagacties .ov-dagwissel__knop { width: 34px; height: 34px; }
}
.ov-dagcomp {
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
overflow: hidden;
margin-bottom: var(--s4);
}
.ov-dagcomp__kop {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
padding: var(--s3) var(--s4);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.ov-dagcomp__naam { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ov-dagcomp__naam img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-dagcomp__naam h3 {
font-size: 15px; font-weight: 700;
color: var(--ink-heading);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.ov-dagcomp__naam { text-decoration: none; }
@media ( hover: hover ) {
a.ov-dagcomp__naam:hover h3 { color: var(--accent); }
}
a.ov-dagcomp__naam:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.ov-duellijst { list-style: none; margin: 0; padding: 0; }
.ov-duellijst > li + li { border-top: 1px solid var(--line); }
.ov-duelregel {
display: grid;
grid-template-columns: 58px 1fr auto;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s4);
color: var(--ink);
text-decoration: none;
}
a.ov-duelregel:hover { background: var(--accent-wash); }
.ov-duelregel__wanneer {
color: var(--ink-muted);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.ov-duelregel__wanneer strong { color: var(--ink-heading); font-size: 14px; }
.ov-duelregel__ploegen { display: grid; gap: 3px; min-width: 0; }
.ov-duelregel__ploeg {
display: flex; align-items: center; gap: var(--s3);
min-width: 0;
}
.ov-duelregel__ploeg img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ov-duelregel__ploeg span {
font-size: 15px; font-weight: 600;
color: var(--ink-heading);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-duelregel__staat { justify-self: end; }
@media (max-width: 560px) {
.ov-duelregel {
grid-template-columns: 42px minmax( 0, 1fr ) auto;
gap: var(--s2);
padding: var(--s2) var(--s3);
}
.ov-duelregel__staat { justify-self: end; }
.ov-duelregel__staat .ov-pill {
padding: 2px var(--s2);
font-size: 11px;
}
.ov-duelregel__ploeg span { font-size: 14px; }
.ov-duelregel__ploeg img { width: 20px; height: 20px; }
}
@media (max-width: 359px) {
.ov-duelregel { grid-template-columns: 42px minmax( 0, 1fr ); row-gap: var(--s1); }
.ov-duelregel__staat { grid-column: 2; justify-self: start; }
}
.ov-dagwissel {
display: inline-flex; align-items: center;
flex: none;
align-self: center;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
overflow: hidden;
}
.ov-dagwissel__knop {
width: 40px; height: 38px;
display: grid; place-items: center;
border: 0;
background: none;
color: var(--ink-muted);
cursor: pointer;
transition: color .12s ease, background .12s ease;
}
.ov-dagwissel__knop svg { width: 18px; height: 18px; }
.ov-dagwissel__knop:hover:not(:disabled) {
background: var(--accent);
color: #fff;
}
.ov-dagwissel__knop:disabled { opacity: .3; cursor: default; }
.ov-dagwissel__label {
min-width: 10.5rem;
padding-inline: var(--s2);
text-align: center;
color: var(--ink-heading);
font-size: 14px; font-weight: 700;
letter-spacing: -0.01em;
border-inline: 1px solid var(--line);
align-self: stretch;
display: grid; place-items: center;
}
@media (max-width: 780px) {
.ov-dagwissel__label { min-width: 7.5rem; font-size: 13px; }
.ov-dagwissel__knop { width: 36px; height: 36px; }
}
.ov-tekstblok { padding: var(--s6) var(--s6) var(--s5); max-width: 68ch; }
.ov-tekstblok p { margin: 0 0 var(--s4); color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.ov-tekstblok__lead { font-size: 18px !important; color: var(--ink-heading) !important; }
.ov-tekstblok h2 {
margin: var(--s6) 0 var(--s3);
color: var(--ink-heading);
font-size: 19px; font-weight: 600;
}
.ov-tekstblok h2:first-child { margin-top: 0; }
.ov-tekstblok__lijst {
margin: 0 0 var(--s4);
padding-left: var(--s5);
color: var(--ink-soft);
font-size: 16px; line-height: 1.9;
}
.ov-vragen { padding: var(--s2) var(--s5); }
.ov-vraag { border-bottom: 1px solid var(--line); }
.ov-vraag:last-child { border-bottom: 0; }
.ov-vraag__kop {
padding: var(--s4) var(--s6) var(--s4) 0;
position: relative;
color: var(--ink-heading);
font-size: 15px; font-weight: 600;
cursor: pointer;
list-style: none;
}
.ov-vraag__kop::-webkit-details-marker { display: none; }
.ov-vraag__kop::after {
content: "";
position: absolute; right: var(--s2); top: 50%;
width: 8px; height: 8px;
margin-top: -6px;
border-right: 2px solid var(--ink-muted);
border-bottom: 2px solid var(--ink-muted);
transform: rotate(45deg);
transition: transform .15s ease;
}
.ov-vraag[open] .ov-vraag__kop::after { transform: rotate(-135deg); margin-top: -2px; }
.ov-vraag__antwoord {
margin: 0;
padding: 0 var(--s6) var(--s4) 0;
color: var(--ink-soft);
font-size: 15px; line-height: 1.7;
}
.ov-section__head--tweede { margin-top: var(--s6); }
.ov-section__subtitel {
margin: 0;
color: var(--ink-heading);
font-size: 18px; font-weight: 600;
}
.ov-tabel--vorm td { vertical-align: middle; }
.ov-tabel--vorm .ov-portret { width: 34px; height: 34px; }
.ov-portret--leeg {
display: inline-block;
border-radius: 50%;
background: var(--neutral-bg);
}
.ov-leeg-cel { color: var(--ink-muted); }
.ov-vormmerk {
display: inline-block;
padding: 2px var(--s2);
border-radius: var(--r-sm);
font-size: 12px; font-weight: 600;
white-space: nowrap;
}
.ov-vormmerk--uitstekend { background: var(--ok-bg);      color: var(--ok-tx); }
.ov-vormmerk--sterk      { background: var(--ok-bg);      color: var(--ok-tx); }
.ov-vormmerk--degelijk   { background: var(--neutral-bg); color: var(--neutral-tx); }
.ov-vormmerk--wisselend  { background: var(--warn-bg);    color: var(--warn-tx); }
.ov-vormmerk--zwak       { background: var(--danger-bg);  color: var(--danger-tx); }
.ov-vooruitblikken {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--s4);
}
.ov-vooruitblik {
position: relative;
padding: var(--s6);
overflow: hidden;
}
.ov-vooruitblik::after {
content: "";
position: absolute;
right: -30px; top: -30px;
width: 190px; height: 190px;
background: var(--ov-wapen) center / contain no-repeat;
opacity: .05;
pointer-events: none;
}
.ov-vooruitblik > * { position: relative; z-index: 1; }
[data-thema="donker"] .ov-vooruitblik::after { opacity: .08; }
.ov-vooruitblik__club {
display: flex; align-items: center; gap: var(--s3);
margin: 0 0 var(--s4);
padding-bottom: var(--s3);
border-bottom: 2px solid var(--accent);
color: var(--ink-heading);
font-family: var(--font-display);
font-size: 19px; font-weight: 700;
letter-spacing: -0.01em;
}
.ov-vooruitblik__club img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.ov-vooruitblik__tekst {
margin: 0 0 var(--s4);
max-width: 62ch;
color: var(--ink);
font-size: 16px;
line-height: 1.75;
}
.ov-vooruitblik__tekst:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
.ov-vooruitblik { padding: var(--s5); }
.ov-vooruitblik__club { font-size: 17px; }
.ov-vooruitblik__tekst { font-size: 15px; }
}
.ov-voorspellingen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: var(--s4);
}
.ov-voorspelling { padding: var(--s5); }
.ov-voorspelling__kop {
display: flex; flex-direction: column; align-items: flex-start;
gap: 2px;
padding-bottom: var(--s3);
border-bottom: 1px solid var(--line);
color: var(--ink-heading);
text-decoration: none;
}
.ov-voorspelling__kop:hover .ov-voorspelling__duel span { text-decoration: underline; }
.ov-voorspelling__duel {
display: flex; align-items: center; gap: var(--s2);
min-width: 0;
font-weight: 600; font-size: 15px;
}
.ov-voorspelling__duel img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.ov-voorspelling__duel span { min-width: 0; }
.ov-voorspelling__tijd {
color: var(--ink-muted);
font-size: 12px; font-weight: 500;
letter-spacing: .02em;
}
.ov-voorspelling .ov-elftal__zin { margin-top: var(--s3); }
.ov-elftal__zin--leeg { font-style: italic; }
.ov-voorspelling__status {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
margin: var(--s3) 0 0;
font-size: 12px; color: var(--ink-muted);
}
.ov-melding {
margin: 0;
padding: var(--s3) var(--s5);
border-bottom: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink-muted);
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 700px) {
.ov-duelkop__aftrap { font-size: 20px; padding: var(--s2) var(--s3); }
.ov-duelkop__aftrap i { font-size: 10px; }
}
.ov-search { position: relative; }
.ov-zoeksug {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
min-width: 240px;
padding: var(--s1);
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--canvas);
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
overflow: hidden;
}
.ov-zoeksug__rij {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s2) var(--s3);
border-radius: var(--r-sm);
color: var(--ink);
text-decoration: none;
line-height: 1.3;
}
.ov-zoeksug__rij img {
flex: none;
width: 22px; height: 22px;
object-fit: contain;
}
.ov-zoeksug__naam {
flex: 1 1 auto;
min-width: 0;
font-weight: 500;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-zoeksug__rij:hover,
.ov-zoeksug__rij.is-actief {
background: var(--accent-wash);
color: var(--ink-heading);
}
[data-thema="donker"] .ov-zoeksug__rij:hover,
[data-thema="donker"] .ov-zoeksug__rij.is-actief {
background: rgba(255, 255, 255, .07);
}
.ov-zoeksug__leeg {
margin: 0;
padding: var(--s3);
color: var(--ink-muted);
font-size: 14px;
}
.ov-zoekuitslag {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--s5);
}
.ov-zoekuitslag__club {
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
overflow: hidden;
}
.ov-zoekuitslag__kop {
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s4) var(--s5);
border-bottom: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink-heading);
text-decoration: none;
}
.ov-zoekuitslag__kop img {
flex: none;
width: 34px; height: 34px;
object-fit: contain;
}
.ov-zoekuitslag__kop span {
display: flex;
flex-direction: column;
min-width: 0;
}
.ov-zoekuitslag__kop strong {
font-family: var(--font-display);
font-size: 18px;
line-height: 1.2;
}
.ov-zoekuitslag__kop small {
color: var(--ink-muted);
font-size: 13px;
}
.ov-zoekuitslag__kop:hover strong { color: var(--accent); }
.ov-zoekuitslag .ov-duels { margin: 0; }
.ov-zoekuitslag .ov-leeg { padding: 0; margin: 0; font-size: 14px; }
.ov-zoekaantal {
margin: var(--s2) 0 0;
color: var(--ink-soft);
font-size: 16px;
}
.ov-zoekknop { display: none; }
@media (max-width: 900px) {
.ov-zoekknop {
display: grid;
place-items: center;
flex: none;
margin-left: auto;
width: 42px; height: 38px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
color: var(--ink-heading);
cursor: pointer;
}
.ov-zoekknop svg { width: 18px; height: 18px; }
.ov-menuknop { margin-left: 0; }
.ov-menuknop:hover, .ov-zoekknop:hover { background: var(--surface); }
.ov-menuknop[aria-expanded="true"],
.ov-zoekknop[aria-expanded="true"] {
background: var(--accent);
border-color: var(--accent);
color: var(--ink-on-deep);
}
.ov-menuknop__streepjes {
display: block;
position: relative;
width: 16px; height: 12px;
}
.ov-menuknop__streepjes i {
position: absolute;
left: 0; right: 0;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform .18s ease, opacity .12s ease, top .18s ease;
}
.ov-menuknop__streepjes i:nth-child(1) { top: 0; }
.ov-menuknop__streepjes i:nth-child(2) { top: 5px; }
.ov-menuknop__streepjes i:nth-child(3) { top: 10px; }
.ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(2) { opacity: 0; }
.ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(3) { top: 5px; transform: rotate(-45deg); }
.ov-zoek-open .ov-menu { display: flex; }
.ov-menu {
gap: var(--s4);
padding: var(--s5);
background: var(--canvas);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line-strong);
box-shadow: 0 22px 44px rgba(0, 0, 0, .3);
}
[data-thema="donker"] .ov-menu { background: var(--surface); }
.ov-menu-open .ov-main::before,
.ov-zoek-open .ov-main::before {
content: '';
position: fixed;
inset: 0;
z-index: 35;
background: rgba(10, 10, 10, .5);
}
.ov-menu-open .ov-menu .ov-search { display: none; }
.ov-zoek-open .ov-menu .ov-nav,
.ov-zoek-open .ov-menu .ov-thema { display: none; }
.ov-menu .ov-nav { order: 1; }
.ov-menu .ov-thema { order: 2; }
}
@media (max-width: 900px) and (hover: hover) {
.ov-menuknop:hover, .ov-zoekknop:hover { background: var(--band); }
.ov-menuknop[aria-expanded="true"]:hover,
.ov-zoekknop[aria-expanded="true"]:hover { background: var(--accent-hover); }
}
.ov-nl__zin { max-width: 70ch; margin: 0 0 var(--s4); color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.ov-nl__h3 { font-size: 17px; margin: var(--s6) 0 var(--s3); color: var(--ink-heading); }
.ov-nl__comp { color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
.ov-nl__comp:hover { color: var(--accent); text-decoration: underline; }
.ov-nl__terug { margin: var(--s6) 0 var(--s10); }
.ov-nl__terug a { font-weight: 600; text-decoration: none; color: var(--ink-heading); }
.ov-nl__terug a:hover { color: var(--accent); }
.ov-tabel--nl-top th:first-child, .ov-tabel--nl-top td:first-child { width: 1%; }
.ov-tabel--nl-top .ov-speleercel__sub { display: block; }
.ov-nl-clubs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.ov-nl-club {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
}
.ov-nl-club__kop {
display: flex; align-items: center; gap: var(--s3);
margin: 0 0 var(--s3);
}
.ov-nl-club__kop h3 { margin: 0; font-size: 17px; min-width: 0; }
.ov-nl-club__kop h3 > a, .ov-nl-club__kop h3 > span {
display: inline-flex; align-items: center; gap: var(--s3);
color: var(--ink-heading); text-decoration: none; min-width: 0;
}
.ov-nl-club__kop h3 > a:hover { color: var(--accent); }
.ov-nl-club__kop img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.ov-nl-club__kop .ov-bijschrift { margin-left: auto; }
.ov-nl-club__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ov-nl-club__speler { display: flex; align-items: flex-start; gap: var(--s3); }
.ov-nl-club__speler .ov-portret { width: 34px; height: 34px; flex: none; margin-top: 1px; }
.ov-nl-club__speler > span { display: block; min-width: 0; line-height: 1.35; }
.ov-nl-club__speler strong { color: var(--ink-heading); }
.ov-nl-club__speler small { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 1px; }
.ov-nl-comps { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.ov-nl-comp {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
}
.ov-nl-comp__kop {
display: flex; align-items: center; gap: var(--s4);
color: var(--ink-heading); text-decoration: none;
padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2);
}
.ov-nl-comp__kop:hover strong { color: var(--accent); }
.ov-nl-comp__kop img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.ov-nl-comp__kop strong { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.ov-nl-comp__kop small { display: block; color: var(--ink-muted); font-size: 13px; }
.ov-nl-comp__top { list-style: none; margin: 0 0 var(--s2); padding: 0; flex: 1 1 auto; }
.ov-nl-comp__top li {
display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "foto naam min" "foto club min";
column-gap: var(--s3); align-items: center;
padding: var(--s2) 0; border-bottom: 1px solid var(--line);
}
.ov-nl-comp__top li:last-child { border-bottom: 0; }
.ov-nl-comp__top .ov-portret { grid-area: foto; width: 28px; height: 28px; }
.ov-nl-comp__naam { grid-area: naam; font-weight: 500; color: var(--ink-heading); font-size: 14px; }
.ov-nl-comp__club { grid-area: club; font-size: 12px; color: var(--ink-muted); }
.ov-nl-comp__min { grid-area: min; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.ov-filter__knop--tekst { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; padding-inline: var(--s3); }
.ov-filter__knop--tekst img { width: 20px; height: 20px; }
.ov-toplijst--nl { padding: var(--s2) var(--s5) 0; }
.ov-ranglijst__meer--nl { display: block; padding: var(--s3) var(--s5) var(--s4); }
.ov-tabel--nl-top .ov-tabel__naam { white-space: nowrap; }
.ov-nl__intro { font-size: 17px; max-width: 66ch; color: var(--ink); margin: 0 0 var(--s2); padding-top: var(--s10); line-height: 1.6; }
.ov-nl__bijgewerkt { margin: 0 0 var(--s4); font-size: 13px; color: var(--ink-muted); }
.ov-nl-duels { list-style: none; margin: 0; padding: 0; }
.ov-nl-duel { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.ov-nl-duel:last-child { border-bottom: 0; }
.ov-nl-duel__kop {
display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
color: var(--ink-heading); text-decoration: none;
}
.ov-nl-duel__kop:hover .ov-nl-duel__ploegen > span { color: var(--accent); }
.ov-nl-duel__ploegen { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; min-width: 0; }
.ov-nl-duel__ploegen img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ov-nl-duel__tijd { flex: none; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.ov-nl-duel__comp { color: var(--ink-muted); }
.ov-nl-duel__spelers { margin: var(--s1) 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.ov-nl-duel__groep { display: inline; margin-right: var(--s4); white-space: normal; }
.ov-nl-duel__groep i {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: 1px; background: var(--neutral-tx);
}
.ov-nl-duel__groep--in i { background: var(--accent); }
.ov-nl-duel__groep--twijfel i { background: var(--doubt); }
.ov-nl-duel__groep--uit i { background: var(--danger-tx); }
@media (max-width: 600px) {
.ov-nl-duel { padding-inline: var(--s4); }
.ov-nl-duel__kop { flex-wrap: wrap; }
.ov-nl-duel__tijd { flex-basis: 100%; }
.ov-nl-duel__groep { display: block; margin-right: 0; }
}
.ov-filter--nl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ov-filter--nl .ov-filter__knop { display: inline-flex; padding: 6px var(--s3); }
.ov-doorlink {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
padding: var(--s4) var(--s5);
font-weight: 500;
text-decoration: none;
color: var(--accent);
}
.ov-doorlink:hover { background: var(--surface-2, rgba(0, 0, 0, .02)); }
.ov-doorlink span { flex: none; }
.ov-bl__club { margin-bottom: 18px; }
.ov-bl__schors thead th { border-top: 0; }
.ov-bl__clubcel {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
font-size: .84rem;
font-weight: 400;
color: var(--ink-muted);
text-decoration: none;
}
.ov-bl__clubcel img { flex: none; }
a.ov-bl__clubcel:hover span { text-decoration: underline; }
.ov-bl__tweede,
.ov-section__head--tweede { margin-top: var(--s10); }
.ov-bl__kop {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
font-size: 1.02rem;
}
.ov-bl__logo { flex: 0 0 auto; }
.ov-bl__telling {
margin-left: auto;
font-weight: 400;
font-size: .82rem;
color: var(--ink-muted);
white-space: nowrap;
}
.ov-bl__twijfel td { color: var(--ink-muted); }
.ov-bl__tabel td:first-child { font-weight: 600; }
.ov-bl__twijfel td:first-child { font-weight: 500; }
.ov-bl__tabel th:first-child,
.ov-bl__tabel td:first-child { padding-left: 16px; }
.ov-bl__tabel th:last-child,
.ov-bl__tabel td:last-child { padding-right: 16px; }
.ov-bl__meta { display: none; }
@media (max-width: 720px) {
.ov-bl__tabel th:nth-last-child(-n+2),
.ov-bl__tabel td:nth-last-child(-n+2) { display: none; }
.ov-bl__meta {
display: block;
margin-top: 2px;
font-size: .78rem;
font-weight: 400;
color: var(--ink-muted);
}
.ov-bl__pill { display: none; }
.ov-bl__tabel td:first-child { line-height: 1.35; }
}
.ov-video {
aspect-ratio: 16 / 9;
background: var(--ov-gras);
border-radius: 10px;
overflow: hidden;
}
.ov-video iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.ov-hero__onder { margin: .35rem 0 0; max-width: 46rem; text-transform: none; letter-spacing: 0; }
.ov-poule__kop {
margin: 26px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--ink-heading);
}
.ov-section__head + .ov-poule__kop { margin-top: 4px; }