/* Henry Houser: gedeelde huisstijl voor de boekingspagina, het beheer en het verkopersrapport.
   Overgenomen van henryhouser.be: crème achtergrond, zwart logo, oranje en aqua knoppen,
   salie als steunkleur en de boog (deur) als vorm. Poppins voor de interface (de site gebruikt
   Made Evolve Sans voor titels, Poppins voor knoppen), Bitter voor lopende tekst. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/poppins-latin-400-normal.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: 500; font-display: swap;
  src: url("/fonts/poppins-latin-500-normal.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-latin-600-normal.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: 700; font-display: swap;
  src: url("/fonts/poppins-latin-700-normal.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: 400; font-display: swap;
  src: url("/fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 500; font-display: swap;
  src: url("/fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Bitter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/bitter-latin-wght-normal.woff2") format("woff2-variations");
  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 {
  /* kleur, van henryhouser.be */
  --inkt: #0a0a0a;           /* logo, titels */
  --tekst: #1f1d1a;          /* lopende tekst */
  --zacht: #57524a;          /* secundaire tekst (≥ 4.5:1 op crème) */
  --vaag: #6e685b;           /* hulptekst, assen (≥ 4.5:1 op crème) */
  --creme: #f4eedd;          /* achtergrond van de site */
  --creme-licht: #faf6ec;
  --creme-diep: #e8dfc6;     /* sporen van meters, hover op crème */
  --kaart: #ffffff;
  --lijn: #e2d8bf;           /* randen op crème */
  --lijn-zacht: #ede6d6;     /* randen op wit */
  --oranje: #eb5d29;         /* hoofdknop, zoals "Meer info" */
  --oranje-hover: #d84e1c;
  --oranje-tekst: #b3400f;   /* oranje voor kleine tekst (≥ 4.5:1) */
  --oranje-zacht: #fbe3d8;
  --aqua: #c0dfdd;           /* tweede knop, zoals "Afspraak maken" */
  --aqua-hover: #a9d2cf;
  --aqua-zacht: #e4f1f0;
  --salie: #8d9b7f;          /* de boog */
  --salie-diep: #5b684f;
  --salie-zacht: #e5e9dd;
  --navy: #173261;
  --groen: #2f6a3f;
  --groen-zacht: #e0eddf;
  --rood: #b42318;
  --rood-zacht: #fbe4e0;
  --focus: #173261;

  /* vorm */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-tekst: "Bitter", Georgia, "Times New Roman", serif;
  --boog: 999px 999px 0 0;   /* bovenkant van een deur, zoals de salie boog op de site */
  --radius: 2px;
  --schaduw: 0 1px 2px rgba(10, 10, 10, .04), 0 10px 30px -18px rgba(10, 10, 10, .22);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tekst);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; color: var(--inkt); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.logo { display: block; height: 38px; width: auto; color: var(--inkt); }
.monogram { display: block; height: 100%; width: auto; }

/* De boog: foto's en vlakken met de bovenkant van een deur. */
.boog { border-radius: var(--boog); overflow: hidden; }
.boog-leeg {
  display: grid; place-items: center;
  background: var(--salie); color: var(--creme);
}
.boog-leeg .monogram { height: 30%; max-height: 120px; opacity: .9; }

.tekst { font-family: var(--font-tekst); font-weight: 350; font-size: 17px; line-height: 1.75; color: var(--tekst); }
.tekst p + p { margin-top: .9em; }
.tekst strong { font-weight: 600; color: var(--inkt); }

/* "KICK-OFF PRIJS", "HOMERUN": kleine kapitalen zoals op de site */
.label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--zacht);
}
/* De gemeente boven de straat, in oranje kapitalen ("KORTRIJK") */
.oog {
  font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oranje-tekst);
}

/* Knoppen: hoekig, zoals op henryhouser.be */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 0;
  background: var(--oranje); color: #fff;
  font: 600 15px/1.2 var(--font); letter-spacing: .01em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.knop:hover { background: var(--oranje-hover); }
.knop:active { transform: translateY(1px); }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.knop.groot { min-height: 58px; padding: 0 30px; font-size: 19px; font-weight: 700; } /* groot genoeg voor 3:1 wit op oranje */
.knop.zwart { background: var(--inkt); color: #fff; }
.knop.zwart:hover { background: #2a2824; }
.knop.aqua { background: var(--aqua); color: var(--inkt); }
.knop.aqua:hover { background: var(--aqua-hover); }
.knop.lijn { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.knop.lijn:hover { background: rgba(10, 10, 10, .05); }
.knop.gevaar { background: var(--rood); color: #fff; }
.knop.gevaar:hover { background: #941b12; }
.knop.gevaar.lijn { background: transparent; color: var(--rood); box-shadow: inset 0 0 0 1.5px var(--rood); }
.knop.klein { min-height: 38px; padding: 0 16px; font-size: 14px; }
.knop.mini { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.knop svg { width: 18px; height: 18px; flex: none; }
.knop.klein svg, .knop.mini svg { width: 16px; height: 16px; }

.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--inkt); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }
.link.zacht { color: var(--zacht); }
.link.gevaar { color: var(--rood); }

/* Velden */
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld > label, .veld-label { font-weight: 500; font-size: 14px; color: var(--inkt); }
.veld .ster { color: var(--oranje-tekst); }
.veld .hulp { font-size: 13px; color: var(--vaag); line-height: 1.45; }
.veld .fout-tekst { font-size: 13px; color: var(--rood); }
.invoer, .veld input:not([type=checkbox]):not([type=radio]):not([type=file]), .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid #cfc4a8; border-radius: var(--radius);
  background: var(--kaart); color: var(--inkt);
  font: 400 16px/1.4 var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.veld textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.veld select {
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230a0a0a' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.invoer:hover, .veld input:hover, .veld select:hover, .veld textarea:hover { border-color: #b3a684; }
.invoer:focus, .veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px var(--aqua);
}
.veld [aria-invalid="true"] { border-color: var(--rood) !important; }
.veld [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--rood-zacht); }

.vinkje { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.vinkje input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border: 1.5px solid #b3a684; border-radius: var(--radius); background: var(--kaart); cursor: pointer;
  display: grid; place-content: center; transition: background-color .12s, border-color .12s;
}
.vinkje input::after {
  content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px;
  transform: translateY(-1px) rotate(-45deg); opacity: 0;
}
.vinkje input:checked { background: var(--inkt); border-color: var(--inkt); }
.vinkje input:checked::after { opacity: 1; }
.vinkje input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.vinkje input[aria-invalid="true"] { border-color: var(--rood); }

/* Badges: altijd met tekst, nooit kleur alleen */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: nowrap;
  background: var(--creme-diep); color: var(--inkt);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge.goed { background: var(--groen-zacht); color: var(--groen); }
.badge.aqua { background: var(--aqua-zacht); color: #1f5652; }
.badge.oranje { background: var(--oranje-zacht); color: var(--oranje-tekst); }
.badge.slecht { background: var(--rood-zacht); color: var(--rood); }
.badge.salie { background: var(--salie-zacht); color: var(--salie-diep); }
.badge.zwart { background: var(--inkt); color: #fff; }
.badge.kaal::before { display: none; }

.melding { color: var(--zacht); }
.melding.fout { color: var(--rood); }
.klein { font-size: 14px; color: var(--zacht); }

.kaart-vlak { background: var(--kaart); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 100; max-width: calc(100% - 32px);
  background: var(--inkt); color: #fff; padding: 13px 20px; font-weight: 500; font-size: 15px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
  animation: toast-in .2s ease-out;
}
.toast.fout { background: var(--rood); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.laad-balk { height: 3px; background: linear-gradient(90deg, transparent, var(--oranje), transparent); background-size: 200% 100%; animation: laden 1.1s linear infinite; }
@keyframes laden { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------------------
   Grafieken (js/grafieken.js): één reeks per grafiek, dunne kolommen met een
   afgeronde bovenkant, haarfijn raster, alleen de piek gelabeld, tooltip bij
   hover of focus en altijd een tabelweergave.
   --------------------------------------------------------------------------- */
.gr { --gr-inkt: var(--inkt); --gr-oranje: var(--oranje); --gr-spoor: var(--creme-diep); }
.gr-plot { position: relative; margin: 26px 0 0 30px; }
.gr-raster { position: absolute; inset: 0; pointer-events: none; }
.gr-lijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lijn-zacht); }
.gr-lijn:first-child { border-top-color: #cfc4a8; }
.gr-lijn span {
  position: absolute; right: calc(100% + 8px); top: -9px;
  font-size: 11.5px; color: var(--vaag); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gr-kolommen { position: absolute; inset: 0; display: grid; align-items: end; gap: 2px; }
.gr-kolom {
  position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  border: 0; padding: 0; background: none; cursor: default;
}
.gr-kolom:hover, .gr-kolom:focus-visible { background: rgba(10, 10, 10, .035); }
.gr-kolom i, .gr-kolom u {
  font-style: normal;
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(70%, 22px); min-height: 0; border-radius: 4px 4px 0 0;
}
.gr-kolom i { background: var(--gr-inkt); }
.gr-kolom.oranje i { background: var(--gr-oranje); }
.gr-kolom u { background: var(--gr-spoor); text-decoration: none; }
.gr-kolom i:empty { display: block; }
.gr-piek {
  font-style: normal;
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gr-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px; background: var(--inkt); color: #fff; font-size: 12.5px; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.gr-tip strong { font-weight: 600; font-size: 13.5px; }
.gr-tip span { color: #d9d2c0; }
.gr-x { display: grid; margin: 6px 0 0 30px; font-size: 11.5px; color: var(--vaag); }
.gr-x span { text-align: center; white-space: nowrap; overflow: visible; }
.gr-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 13px; color: var(--zacht); }
.gr-sleutel { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: -8px; vertical-align: -1px; }
.gr-sleutel.inkt { background: var(--inkt); }
.gr-sleutel.spoor { background: var(--creme-diep); }
.gr-tabel { margin-top: 12px; font-size: 13.5px; }
.gr-tabel summary { cursor: pointer; color: var(--zacht); width: max-content; }
.gr-tabel summary:hover { color: var(--inkt); }
.gr-tabel-wrap { max-height: 280px; overflow: auto; margin-top: 8px; border: 1px solid var(--lijn-zacht); }
.gr-tabel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gr-tabel th, .gr-tabel td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--lijn-zacht); }
.gr-tabel th { position: sticky; top: 0; background: var(--creme-licht); font-weight: 600; }
.gr-tabel td + td, .gr-tabel th + th { text-align: right; }

.gr-balken { display: flex; flex-direction: column; gap: 10px; }
.gr-balk { display: grid; grid-template-columns: minmax(90px, 42%) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.gr-balk-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); }
.gr-balk-spoor { height: 10px; background: var(--creme-licht); border-radius: 0 4px 4px 0; overflow: hidden; }
.gr-balk-spoor i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--inkt); }
.gr-balk-spoor i.oranje { background: var(--oranje); }
.gr-balk-spoor i.salie { background: var(--salie-diep); }
.gr-balk-waarde { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.gr-balk-waarde small { font-weight: 400; color: var(--vaag); font-size: 12.5px; }
.gr-leeg { color: var(--vaag); font-size: 14px; padding: 10px 0; }

.gr-meter { display: block; height: 8px; background: var(--creme-diep); border-radius: 4px; overflow: hidden; min-width: 60px; }
.gr-meter i { display: block; height: 100%; background: var(--inkt); border-radius: 4px; }
.gr-meter.vol i { background: var(--salie-diep); }

.gr-trechter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gr-trechter-kop { display: flex; align-items: baseline; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.gr-trechter-kop span { color: var(--tekst); }
.gr-trechter-kop strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gr-trechter-kop small { margin-left: auto; color: var(--vaag); font-size: 12.5px; }
.gr-trechter-spoor { display: block; height: 12px; background: var(--creme-licht); border-radius: 0 4px 4px 0; }
.gr-trechter-spoor i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--inkt); }
.gr-trechter-spoor i.oranje { background: var(--oranje); }

@media print {
  body { background: #fff; }
}

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