/* Izegem Koers — huisstijl (navy + koersblauw, Barlow Condensed + Manrope) */
:root {
  --navy: #0f0e3d;
  --navy-2: #1c1b55;
  --teal: #85ccd4;
  --teal-soft: #dff1f3;
  --bg: #f8fafb;
  --wit: #ffffff;
  --lijn: #d9e1e6;
  --lijn-sterk: #bbc7cf;
  --tekst: #0f0e3d;
  --muted: #62667a;
  --muted-2: #53556c;
  --ok: #1f8a5b;
  --ok-soft: #e1f3ea;
  --warn: #b7791f;
  --warn-soft: #fbf0dc;
  --neg: #b4353b;
  --neg-soft: #f8e3e4;
  --info: #3b6fd8;
  --info-soft: #e5edfb;
  --display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --body: "Manrope", Arial, sans-serif;
  --r: 3px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.55 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }

.eyebrow { font: 700 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .95; text-wrap: balance; margin: 0; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--navy); background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: var(--r); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.knop:hover { background: var(--navy-2); }
.knop.teal { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.knop.teal:hover { background: #9bd6dc; }
.knop.lijn { background: transparent; color: var(--navy); border-color: var(--lijn-sterk); }
.knop.lijn:hover { border-color: var(--navy); }
.knop.klein { padding: 7px 11px; font-size: 13px; }
.knop:disabled { opacity: .5; cursor: default; }
.pijl::after { content: "↗"; font-weight: 400; }

.veld { display: grid; gap: 6px; min-width: 0; }
.veld label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.veld input, .veld select, .veld textarea { width: 100%; border: 1px solid var(--lijn-sterk); background: var(--wit); border-radius: var(--r); padding: 10px 12px; min-height: 44px; }
.veld textarea { min-height: 90px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--teal-soft); }

.segment { display: inline-flex; background: #eef2f5; border: 1px solid var(--lijn); border-radius: 3px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.segment button { border: 1px solid transparent; background: transparent; padding: 9px 16px; border-radius: 2px; font-size: 14px; color: var(--muted-2); cursor: pointer; }
.segment button[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segment button span { font-variant-numeric: tabular-nums; margin-right: 6px; opacity: .7; }

.melding { padding: 12px 14px; border-radius: var(--r); font-size: 14px; }
.melding.fout { background: var(--neg-soft); color: var(--neg); }
.melding.ok { background: var(--ok-soft); color: var(--ok); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* cursors: fietswiel overal, renner op koersfiets bij alles wat klikbaar is */
html { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13.5' fill='white' fill-opacity='.55' stroke='%230f0e3d' stroke-width='3'/><circle cx='16' cy='16' r='10.5' fill='none' stroke='%2385ccd4' stroke-width='1.2'/><g stroke='%230f0e3d' stroke-width='1'><line x1='26.0' y1='16.0' x2='6.0' y2='16.0'/><line x1='24.7' y1='21.0' x2='7.3' y2='11.0'/><line x1='21.0' y1='24.7' x2='11.0' y2='7.3'/><line x1='16.0' y1='26.0' x2='16.0' y2='6.0'/><line x1='11.0' y1='24.7' x2='21.0' y2='7.3'/><line x1='7.3' y1='21.0' x2='24.7' y2='11.0'/></g><circle cx='16' cy='16' r='2.6' fill='%230f0e3d'/></svg>") 16 16, auto; }
a, button, select, summary, label[for], [role="tab"], [data-kies], .rij, .chip, .tegel, input[type="range"], input[type="checkbox"], input[type="radio"], input[type="date"], .parcours-poi { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='24' r='5.5'/><circle cx='25' cy='24' r='5.5'/><path d='M7 24l6-9h9l3 9M13 15l4 9h-10M22 15l-1-3M11 13h3M13 14l6-6 5 4M17 10l2 8'/></g><g fill='none' stroke='%230f0e3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='24' r='5.5'/><circle cx='25' cy='24' r='5.5'/><path d='M7 24l6-9h9l3 9M13 15l4 9h-10M22 15l-1-3M11 13h3'/><path d='M13 14l6-6 5 4' stroke='%2385ccd4' stroke-width='2.6'/><path d='M17 10l2 8' stroke='%2385ccd4' stroke-width='2.4'/></g><circle cx='21.5' cy='5.5' r='3' fill='%230f0e3d' stroke='white' stroke-width='1.2'/></svg>") 29 24, pointer; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="date"]), textarea { cursor: text; }
button:disabled { cursor: not-allowed; }