/* ==========================================================================
   KineMed Aartselaar: stylesheet van de app. Richting "De pas" (zie richtingen.md, merk.json, out/brandbook.html).
   Voorstel van de studio, niet door de praktijk goedgekeurd; een eigen huisstijl van de praktijk gaat voor.

   Plaats in de app: /static/merk.css. Geen externe bronnen, geen scripts nodig, geen style-attributen nodig.
   Werkt met: default-src 'self'; style-src 'self'; font-src 'self'; img-src 'self'.

   Regels voor wie erop bouwt
   - Kleur komt enkel uit de tokens. Zet een vlak met .op-gips, .op-geel of .op-pruim: dat zet ook tekst, links,
     focus en knoppen goed voor die achtergrond.
   - Geel is een vlak, nooit tekst op licht. Eén geel vlak per pagina, en enkel op de home de grote band.
   - Alle contrasten staan berekend in merk.json en in het brandbook.
   - Fontbestanden in /static/fonts/ (npm-pakket @fontsource/schibsted-grotesk, map files/):
       schibsted-grotesk-latin-400-normal.woff2
       schibsted-grotesk-latin-600-normal.woff2
       schibsted-grotesk-latin-800-normal.woff2
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Letters
   Terugval: Arial en verwanten, bijgesteld op de maten van Schibsted Grotesk, zodat de bladspiegel niet verspringt
   bij het wisselen (font-display: swap). Bron van de maten: @capsizecss/metrics 4.4.0, Schibsted Grotesk:
   ascent 2000, descent 528, lineGap 0, UPM 2048, xWidthAvg 954 (400) en 1023 (800). Arial: xWidthAvg 904.
   400: 954/904 = 105,5 %; ascent 97,66/1,055 = 92,5 %; descent 25,78/1,055 = 24,4 %.
   Vet: geschat op 104 % tegenover Arial Bold; in een browser nakijken. Niet getest.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "KM Terugval";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 105.5%;
  ascent-override: 92.5%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "KM Terugval";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  size-adjust: 104%;
  ascent-override: 93.9%;
  descent-override: 24.8%;
  line-gap-override: 0%;
}


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Merkkleuren */
  --kleur-pruim: #3F1D47;        /* knoppen, links, kop en voet, de lijnen van de pas */
  --kleur-pruim-licht: #57295F;  /* hover op pruim */
  --kleur-geel: #F6BE2C;         /* enkel vlak: de band op de home, knop op pruim */
  --kleur-geel-donker: #E6AB14;  /* hover op geel */

  /* Neutraal */
  --kleur-wit: #FFFFFF;          /* achtergrond, velden */
  --kleur-gips: #EFEEEB;         /* rustig tweede vlak */
  --kleur-inkt: #251A2B;         /* lopende tekst */
  --kleur-steen: #5B5360;        /* tweede tekst */
  --kleur-rand: #86808A;         /* rand van velden en lijnen, geen tekst; 3,84:1 op wit */

  /* Functie, altijd samen met tekst */
  --kleur-fout: #A8201A;
  --kleur-foutvlak: #FBE9E7;
  --kleur-gelukt: #1C6B45;
  --kleur-geluktvlak: #E4F2EA;
  --kleur-bleekgeel: #FDF0C8;    /* demo-melding en waarschuwing */

  /* Context: wordt per vlak overschreven */
  --achter: var(--kleur-wit);
  --tekst: var(--kleur-inkt);
  --tekst-2: var(--kleur-steen);
  --link: var(--kleur-pruim);
  --focus: var(--kleur-pruim);
  --lijn: var(--kleur-rand);
  --knop-achter: var(--kleur-pruim);
  --knop-achter-hover: var(--kleur-pruim-licht);
  --knop-tekst: var(--kleur-wit);
  --knop2-tekst: var(--kleur-pruim);
  --knop2-hover: var(--kleur-gips);

  /* Letter */
  --letter: "Schibsted Grotesk", "KM Terugval", Arial, "Liberation Sans", Roboto, Helvetica, sans-serif;
  --gewicht-tekst: 400;
  --gewicht-nadruk: 600;
  --gewicht-kop: 800;

  /* Type-schaal: basis 18 px, verhouding ongeveer 1,25. Waarden voor 360 px en 1280 px staan in merk.json. */
  --t-klein: 1rem;                                        /* 16 px, nooit kleiner */
  --t-basis: 1.125rem;                                    /* 18 px */
  --t-inleiding: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem); /* 20 tot 24 px */
  --t-h3: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);     /* 22 tot 26 px */
  --t-h2: clamp(1.625rem, 1.42rem + 0.9vw, 2.375rem);     /* 26 tot 38 px */
  --t-h1: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);      /* 30 tot 52 px */
  --t-toon: clamp(2.125rem, 1.35rem + 3.45vw, 5rem);      /* 34 tot 80 px: enkel de kop van de home */

  /* Ruimte */
  --r-1: 0.25rem;
  --r-2: 0.5rem;
  --r-3: 0.75rem;
  --r-4: 1rem;
  --r-5: 1.5rem;
  --r-6: 2rem;
  --r-7: 3rem;
  --r-8: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Maten */
  --pagina-rand: 1rem;
  --pagina-breed: 76rem;
  --regel: 40rem;
  --hoek: 0.375rem;
  --tik: 2.75rem;            /* 44 px: ondergrens voor elk tikdoel */
  --knop-hoogte: 3rem;       /* 48 px */
  --logo-breed: 7.5rem;      /* 120 px, verhouding 300:120 van het logo */
  --logo-hoog: 3rem;         /* 48 px */
  --belbalk-hoogte: 4.25rem;
  --pas-hoogte: clamp(9.5rem, 24vw, 21rem);
}


/* --------------------------------------------------------------------------
   3. Reset en basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--r-4);
  scroll-padding-bottom: calc(var(--belbalk-hoogte) + var(--r-4)); /* focus nooit onder de belbalk */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--achter);
  color: var(--tekst);
  font-family: var(--letter);
  font-size: var(--t-basis);
  font-weight: var(--gewicht-tekst);
  line-height: 1.55;
  font-synthesis: none;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

::selection { background: var(--kleur-geel); color: var(--kleur-inkt); }

.alleen-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   4. Vlakken: één klasse zet alle kleuren voor die achtergrond
   -------------------------------------------------------------------------- */
.op-wit, .op-gips, .op-geel, .op-pruim { background: var(--achter); color: var(--tekst); }

.op-wit {
  --achter: var(--kleur-wit);
  --knop2-hover: var(--kleur-gips);
}
.op-gips {
  --achter: var(--kleur-gips);
  --knop2-hover: var(--kleur-wit);
}
.op-geel {
  --achter: var(--kleur-geel);
  --tekst-2: var(--kleur-inkt);   /* Steen op geel is 4,32:1 en mag niet */
  --lijn: var(--kleur-pruim);     /* Rand op geel is 2,25:1 en mag niet */
  --knop2-hover: var(--kleur-bleekgeel);
}
.op-pruim {
  --achter: var(--kleur-pruim);
  --tekst: var(--kleur-wit);
  --tekst-2: var(--kleur-gips);
  --link: var(--kleur-wit);
  --focus: var(--kleur-geel);
  --lijn: var(--kleur-gips);
  --knop-achter: var(--kleur-geel);
  --knop-achter-hover: var(--kleur-geel-donker);
  --knop-tekst: var(--kleur-inkt);
  --knop2-tekst: var(--kleur-wit);
  --knop2-hover: var(--kleur-pruim-licht);
}


/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--gewicht-kop);
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: manual;
}
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.14; margin-top: var(--r-7); }
h3 { font-size: var(--t-h3); line-height: 1.22; margin-top: var(--r-6); font-weight: var(--gewicht-nadruk); letter-spacing: -0.008em; }
h4 { font-size: var(--t-basis); line-height: 1.35; margin-top: var(--r-5); font-weight: var(--gewicht-nadruk); letter-spacing: 0; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p, ul, ol, dl, blockquote, figure, table, pre { margin: var(--r-4) 0 0; }
p:first-child, ul:first-child, ol:first-child, dl:first-child { margin-top: 0; }
p, li, dd, dt { max-width: var(--regel); }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: var(--r-2); }
dt { font-weight: var(--gewicht-nadruk); margin-top: var(--r-3); }
dd { margin: 0; }

strong, b { font-weight: var(--gewicht-nadruk); }
em, i { font-style: normal; font-weight: var(--gewicht-nadruk); }  /* bewust geen cursief: minder bestanden, beter leesbaar */
small, .klein { font-size: var(--t-klein); }
.tweede-tekst { color: var(--tekst-2); }
.inleiding { font-size: var(--t-inleiding); line-height: 1.42; }
.getal { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--lijn); margin: var(--r-6) 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { text-decoration-thickness: 3px; }

/* Telefoon en e-mail: voldoende hoogte als tikdoel, ook midden in een lijst */
a[href^="tel:"]:not(.knop), a[href^="mailto:"]:not(.knop) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
}


/* --------------------------------------------------------------------------
   6. Focus: 3 px, altijd minstens 3:1 op het vlak eromheen
   Pruim op wit 14,21 / gips 12,24 / geel 8,33 / bleekgeel 12,50 / foutvlak 12,12; geel op pruim 8,33.
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
h1:focus-visible, h2:focus-visible, [tabindex="-1"]:focus { outline: none; } /* focus door script op een kop of melding */

.naar-inhoud {
  position: absolute;
  left: var(--r-3);
  top: -6rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  min-height: var(--knop-hoogte);
  padding: 0 var(--r-4);
  background: var(--kleur-geel);
  color: var(--kleur-inkt);
  border-radius: var(--hoek);
  font-weight: var(--gewicht-nadruk);
}
.naar-inhoud:focus { top: var(--r-3); outline: 3px solid var(--kleur-pruim); outline-offset: 2px; }


/* --------------------------------------------------------------------------
   7. Opbouw
   -------------------------------------------------------------------------- */
.binnen {
  width: min(100% - 2 * var(--pagina-rand), var(--pagina-breed));
  margin-inline: auto;
}
.smal { max-width: var(--regel); }
.sectie { padding-block: var(--r-8); }
.sectie--krap { padding-block: var(--r-7); }

/* Twee kolommen met een smalle en een brede kant, geen gelijke rijen */
.tweeluik { display: grid; gap: var(--r-6); }
.tweeluik > * { min-width: 0; }

@media (min-width: 48em) {
  :root { --pagina-rand: 2rem; }
  .tweeluik { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--r-7); align-items: start; }
  .tweeluik--omgekeerd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}


/* --------------------------------------------------------------------------
   8. Knoppen
   <a class="knop"> of <button class="knop">. Tekst zegt wat er gebeurt. Geen pijl erachter.
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  min-height: var(--knop-hoogte);
  min-width: var(--tik);
  max-width: 100%;
  padding: var(--r-2) var(--r-5);
  border: 2px solid var(--knop-achter);
  border-radius: var(--hoek);
  background: var(--knop-achter);
  color: var(--knop-tekst);
  font-weight: var(--gewicht-nadruk);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.knop:hover {
  background: var(--knop-achter-hover);
  border-color: var(--knop-achter-hover);
  color: var(--knop-tekst);
}
.knop:active { transform: translateY(1px); }

.knop--tweede {
  background: transparent;
  border-color: var(--knop2-tekst);
  color: var(--knop2-tekst);
}
.knop--tweede:hover {
  background: var(--knop2-hover);
  border-color: var(--knop2-tekst);
  color: var(--knop2-tekst);
}

/* Onomkeerbaar: annuleren, account verwijderen. Wit op fout 7,28:1. */
.knop--gevaar {
  background: var(--kleur-fout);
  border-color: var(--kleur-fout);
  color: var(--kleur-wit);
}
.knop--gevaar:hover { background: var(--kleur-inkt); border-color: var(--kleur-inkt); color: var(--kleur-wit); }

/* Ziet eruit als een link, gedraagt zich als een knop */
.knop--tekst {
  min-height: var(--tik);
  padding-inline: var(--r-1);
  background: transparent;
  border-color: transparent;
  color: var(--link);
  font-weight: var(--gewicht-tekst);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.knop--tekst:hover {
  background: transparent;
  border-color: transparent;
  color: var(--link);
  text-decoration-thickness: 3px;
}

.knop--breed { width: 100%; }

.knop[disabled], .knop[aria-disabled="true"] {
  background: var(--kleur-gips);
  border: 2px dashed var(--kleur-steen);
  color: var(--kleur-steen);
  cursor: not-allowed;
  transform: none;
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-3);
  margin-top: var(--r-5);
}


/* --------------------------------------------------------------------------
   9. Formulieren
   <div class="veld [veld--fout]">
     <label for="naam">Uw naam</label>
     <p class="veld__uitleg" id="naam-uitleg">...</p>
     <p class="veld__fout" id="naam-fout">Vul uw naam in.</p>
     <input id="naam" aria-describedby="naam-uitleg naam-fout" aria-invalid="true">
   </div>
   -------------------------------------------------------------------------- */
.formulier { max-width: 32rem; }
.formulier > * + * { margin-top: var(--r-5); }

label, legend {
  display: block;
  font-weight: var(--gewicht-nadruk);
  line-height: 1.35;
}
legend { padding: 0; }

.veld__uitleg {
  margin: var(--r-1) 0 0;
  font-size: var(--t-klein);
  color: var(--tekst-2);
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--knop-hoogte);
  margin-top: var(--r-2);
  padding: var(--r-2) var(--r-3);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  border: 2px solid var(--lijn);
  border-radius: var(--hoek);
  font-size: var(--t-basis);   /* 18 px: iOS zoomt dan niet in */
  line-height: 1.35;
}
textarea { min-height: 8rem; resize: vertical; }
select { padding-right: var(--r-2); }
::placeholder { color: var(--kleur-steen); opacity: 1; }

input:hover:not([type="checkbox"], [type="radio"]), select:hover, textarea:hover { border-color: var(--kleur-inkt); }

/* Focus op een veld: pruim ring rond het veld, ook op geel en gips */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--kleur-inkt);
  border-radius: var(--hoek);
}

/* Foutstaat: rand, tekst en teken, dus nooit enkel kleur */
.veld__fout {
  display: flex;
  gap: var(--r-2);
  margin: var(--r-2) 0 0;
  color: var(--kleur-fout);
  font-weight: var(--gewicht-nadruk);
}
.veld__fout::before {
  content: "!";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--kleur-fout);
  color: var(--kleur-wit);
  font-weight: var(--gewicht-kop);
  line-height: 1;
}
.veld--fout input:not([type="checkbox"], [type="radio"]),
.veld--fout select,
.veld--fout textarea,
[aria-invalid="true"]:not([type="checkbox"], [type="radio"]) {
  border: 3px solid var(--kleur-fout);
  background: var(--kleur-wit);
}

/* Keuzes: de hele regel is het tikdoel */
.keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--r-3);
  min-height: var(--tik);
  padding-block: var(--r-2);
  font-weight: var(--gewicht-tekst);
  cursor: pointer;
}
.keuze input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--kleur-pruim);
}

/* Wachtwoord met "Toon"-knop */
.veld__samen { display: flex; gap: var(--r-2); align-items: flex-end; margin-top: var(--r-2); }
.veld__samen input { margin-top: 0 !important; flex: 1 1 auto; min-width: 0; }
.veld__samen .knop { flex: none; padding-inline: var(--r-3); }

/* Lokveld tegen spam: onzichtbaar voor mensen, niet focusbaar (tabindex="-1" en autocomplete="off" in de HTML) */
.lokveld {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Vrije momenten: echte knoppen, minstens 44 x 44 px */
.uurraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: var(--r-2);
  margin-top: var(--r-3);
  padding: 0;
  list-style: none;
}
.uurraster > li { margin: 0; max-width: none; }
.uurknop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--knop-hoogte);
  padding: var(--r-1) var(--r-2);
  background: var(--kleur-wit);
  color: var(--kleur-pruim);
  border: 2px solid var(--kleur-pruim);
  border-radius: var(--hoek);
  font-weight: var(--gewicht-nadruk);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.uurknop:hover { background: var(--kleur-gips); color: var(--kleur-pruim); }
.uurknop[aria-pressed="true"], .uurknop[aria-current="true"] {
  background: var(--kleur-pruim);
  color: var(--kleur-wit);
}


/* --------------------------------------------------------------------------
   10. Tabellen in een schuifkader
   <div class="tabelkader" role="region" aria-label="Agenda van maandag" tabindex="0"><table>...</table></div>
   -------------------------------------------------------------------------- */
.tabelkader {
  position: relative; /* houdt .alleen-voorlezer binnen het schuifvak: anders verbreedt die de pagina */
  max-width: 100%;
  margin-top: var(--r-4);
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  overscroll-behavior-x: contain;
}
.tabelkader table { margin: 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
caption {
  padding: var(--r-3);
  text-align: left;
  font-weight: var(--gewicht-nadruk);
}
th, td {
  padding: var(--r-3);
  text-align: left;
  vertical-align: top;
}
thead th {
  border-bottom: 2px solid var(--kleur-inkt);
  font-weight: var(--gewicht-nadruk);
  white-space: nowrap;
}
tbody th { font-weight: var(--gewicht-nadruk); }
tbody tr + tr > * { border-top: 1px solid var(--kleur-gips); }
td.getal, th.getal { text-align: right; }


/* --------------------------------------------------------------------------
   11. Demo-melding: bovenaan, staat mee in de stroom, bedekt niets
   <p class="demo-melding">Demo: voer geen echte gegevens in.</p>
   -------------------------------------------------------------------------- */
.demo-melding {
  margin: 0;
  max-width: none;
  padding: var(--r-2) var(--pagina-rand);
  background: var(--kleur-bleekgeel);
  color: var(--kleur-inkt);
  font-size: var(--t-klein);
  font-weight: var(--gewicht-nadruk);
  line-height: 1.35;
  text-align: center;
}


/* --------------------------------------------------------------------------
   12. Kop en menu
   De kop is altijd pruim: het echte logo (ijsblauw) staat op een donkere grond en krijgt hier zijn plaats.

   LOGO: .logo-plaats ligt vast op 120 x 48 px (verhouding 300:120). Getypte naam = TIJDELIJKE stand-in:
   <a class="logo-plaats" href="/" aria-label="KineMed Aartselaar, naar de startpagina">
     <span class="logo-standin" data-tijdelijk="getypt in de plaats van het logo">
       <b>KineMed</b> <span>Aartselaar</span>
     </span>
   </a>
   Later, zonder dat er iets verschuift:
     <a class="logo-plaats" ...><img src="/static/logo.svg" width="120" height="48" alt="KineMed Aartselaar"></a>

   Menu: geen script. Op gsm <details class="menu-gsm">, op computer <nav class="menu-breed">. Maximaal 5 items.
   -------------------------------------------------------------------------- */
.kop {
  --achter: var(--kleur-pruim);
  --tekst: var(--kleur-wit);
  --link: var(--kleur-wit);
  --focus: var(--kleur-geel);
  --knop-achter: var(--kleur-geel);
  --knop-achter-hover: var(--kleur-geel-donker);
  --knop-tekst: var(--kleur-inkt);
  position: relative;
  z-index: 20;
  background: var(--achter);
  color: var(--tekst);
}
.kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-4);
  width: min(100% - 2 * var(--pagina-rand), var(--pagina-breed));
  min-height: 4.5rem;
  margin-inline: auto;
}

.logo-plaats {
  flex: none;
  display: flex;
  align-items: center;
  width: var(--logo-breed);
  height: var(--logo-hoog);
  color: var(--kleur-wit);
  text-decoration: none;
}
.logo-plaats img, .logo-plaats svg { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.logo-standin { display: block; line-height: 1; }
.logo-standin b {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--gewicht-kop);
  letter-spacing: -0.02em;
}
.logo-standin span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;   /* 15 px: deel van het woordmerk, geen lopende tekst */
  font-weight: var(--gewicht-tekst);
}

.menu-breed, .kop__actie { display: none; }

.menu-gsm > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tik);
  min-width: 5rem;
  padding-inline: var(--r-4);
  border: 2px solid var(--kleur-wit);
  border-radius: var(--hoek);
  color: var(--kleur-wit);
  font-weight: var(--gewicht-nadruk);
  cursor: pointer;
  list-style: none;
}
.menu-gsm > summary::-webkit-details-marker { display: none; }
.menu-gsm[open] > summary { background: var(--kleur-wit); color: var(--kleur-pruim); }
.menu-gsm__paneel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--r-2) var(--pagina-rand) var(--r-5);
  background: var(--kleur-pruim);
  border-top: 1px solid var(--kleur-pruim-licht);
}
.menu-lijst { margin: 0; padding: 0; list-style: none; }
.menu-lijst li { margin: 0; max-width: none; }
.menu-lijst a {
  display: flex;
  align-items: center;
  min-height: var(--knop-hoogte);
  color: var(--kleur-wit);
  text-decoration: none;
  font-size: var(--t-inleiding);
}
.menu-lijst a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.menu-lijst a[aria-current="page"] { font-weight: var(--gewicht-kop); text-decoration: underline; }

@media (min-width: 48em) {
  .kop__actie { display: inline-flex; flex: none; margin-left: auto; }
}
@media (min-width: 60em) {
  .menu-gsm { display: none; }
  .menu-breed { display: block; margin-left: auto; }
  .menu-breed .menu-lijst { display: flex; gap: var(--r-5); }
  .menu-breed .menu-lijst a { min-height: var(--tik); font-size: var(--t-basis); }
  .kop__actie { margin-left: 0; }
}

/* Kruimelpad */
.kruimels { margin-top: var(--r-4); font-size: var(--t-klein); }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 0 var(--r-2); margin: 0; padding: 0; list-style: none; }
.kruimels li { margin: 0; display: flex; align-items: center; gap: var(--r-2); }
.kruimels li + li::before { content: "/"; color: var(--tekst-2); }
.kruimels a { display: inline-flex; align-items: center; min-height: var(--tik); }


/* --------------------------------------------------------------------------
   13. Belbalk op gsm
   Staat als laatste in de body (basis.html). Zet class="met-belbalk" op de body. Drie acties uit site.json: afspraak,
   bellen, route. Op 360 px: elk vak ongeveer 104 px breed en 48 px hoog (--knop-hoogte). Niet tijdens het boeken.
   Op lage schermen of bij sterk inzoomen staat ze gewoon onderaan de pagina, zodat ze niets bedekt.
   -------------------------------------------------------------------------- */
.belbalk {
  --achter: var(--kleur-pruim);
  --tekst: var(--kleur-wit);
  --focus: var(--kleur-geel);
  --knop-achter: var(--kleur-geel);
  --knop-achter-hover: var(--kleur-geel-donker);
  --knop-tekst: var(--kleur-inkt);
  --knop2-tekst: var(--kleur-wit);
  --knop2-hover: var(--kleur-pruim-licht);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-2);
  padding: var(--r-2) var(--pagina-rand) calc(var(--r-2) + env(safe-area-inset-bottom, 0px));
  background: var(--achter);
}
.belbalk .knop { min-height: var(--knop-hoogte); padding-inline: var(--r-1); font-size: var(--t-klein); }

@media (max-width: 47.99em) and (min-height: 30em) {
  .belbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
  .met-belbalk { padding-bottom: calc(var(--belbalk-hoogte) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 48em) {
  .belbalk { display: none; }
  html { scroll-padding-bottom: var(--r-4); }
}


/* --------------------------------------------------------------------------
   14. HET MEMORABELE ELEMENT: DE PAS
   Eén pas, uiteengelegd in lijnen, zoals een kinesist naar stappen kijkt (en zoals Étienne-Jules Marey wandelaars
   vastlegde rond 1880). Elke lijn is een schouder-heup-knie-enkel-teen op een moment van de gangcyclus; om de tien
   lijnen begint dezelfde pas opnieuw. Eén figuur staat vet: dat is het moment waarop men kijkt.

   Herkomst van de vorm: nagerekend met dijbeen en onderbeen van 100 eenheden, stapcyclus van 320 eenheden, tien
   momenten, hoeken volgens de gewone gangcurves. De enkel van het steunbeen blijft binnen 4 eenheden op dezelfde plaats.
   Het is wandelen en niet lopen: het hoort bij iedereen, niet enkel bij sporters.
   Geen kopie van de lopende figuur in het logo; die blijft van het logo.

   Regels: enkel in pruim op geel. Grote band enkel op de home, onderaan .held, full-bleed: de onderrand van het gele vlak
   is de vloer. Nooit achter tekst, nooit als scheiding tussen secties, altijd aria-hidden: de tekst draagt de boodschap.

   Fragment om letterlijk in de template te zetten (geen style-attributen, werkt met strikte CSP):

   <div class="pas-band" aria-hidden="true">
     <svg viewBox="0 0 1920 352" preserveAspectRatio="xMinYMax slice" focusable="false">
       <defs>
         <g id="pas-cyclus" class="pas-cyclus">
           <polyline points="6,39 0,149 42,240 80,332 114,337"/>
           <polyline points="38,32 32,142 70,235 82,334 112,350"/>
           <polyline points="70,26 64,136 85,234 80,334 110,350"/>
           <polyline points="102,25 96,135 93,235 79,334 109,350"/>
           <polyline points="134,27 128,137 107,234 78,330 106,349"/>
           <polyline points="166,35 160,145 129,240 79,327 104,350"/>
           <polyline points="198,35 192,145 175,244 100,310 112,342"/>
           <polyline points="230,30 224,140 238,239 157,298 171,329"/>
           <polyline points="262,26 256,136 294,229 244,315 271,335"/>
           <polyline points="294,32 288,142 337,230 349,329 382,338"/>
         </g>
       </defs>
       <g class="pas-reeks">
         <use href="#pas-cyclus" x="0"/><use href="#pas-cyclus" x="320"/><use href="#pas-cyclus" x="640"/>
         <use href="#pas-cyclus" x="960"/><use href="#pas-cyclus" x="1280"/><use href="#pas-cyclus" x="1600"/>
       </g>
       <g class="pas-figuur">
         <circle cx="616" cy="14" r="12"/>
         <polyline points="614,32 608,142"/>
         <polyline points="608,142 657,230 669,329 702,338"/>
         <polyline points="608,142 587,238 558,331 586,350"/>
         <polyline points="614,36 596,84 588,134"/>
         <polyline points="614,36 630,84 660,118"/>
       </g>
     </svg>
   </div>

   Kleine vorm voor de boekingsstappen: dezelfde pas in vier momenten. Altijd samen met de tekst "Stap 2 van 4".
   Na de laatste stap: data-stap="5", dan staan alle vier de lijnen vol.

   <p class="stappenteller">
     <svg class="pas-stappen" data-stap="2" viewBox="-4 0 392 352" aria-hidden="true" focusable="false">
       <polyline class="p1" points="6,39 0,149 42,240 80,332 114,337"/>
       <polyline class="p2" points="102,25 96,135 93,235 79,334 109,350"/>
       <polyline class="p3" points="198,35 192,145 175,244 100,310 112,342"/>
       <polyline class="p4" points="294,32 288,142 337,230 349,329 382,338"/>
     </svg>
     <span>Stap 2 van 4</span>
   </p>
   -------------------------------------------------------------------------- */
.pas-band {
  height: var(--pas-hoogte);
  color: var(--kleur-pruim);
  overflow: hidden;
}
.pas-band svg { width: 100%; height: 100%; }
@media (min-width: 114rem) {
  /* Op zeer brede schermen groeit de band mee, anders vallen de hoofden buiten het kader (352/1920 = 18,4 %). */
  :root { --pas-hoogte: 18.4vw; }
}
.pas-cyclus polyline, .pas-figuur polyline {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pas-cyclus polyline { stroke-width: 1.5px; }
.pas-figuur polyline { stroke-width: 4.5px; }
.pas-figuur circle { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Het ene moment bij het laden: de pas tekent zich van links naar rechts op, daarna gebeurt er niets meer. */
  .pas-reeks use, .pas-figuur { animation: pas-op 0.5s ease-out both; }
  .pas-reeks use:nth-child(2) { animation-delay: 0.12s; }
  .pas-reeks use:nth-child(3) { animation-delay: 0.24s; }
  .pas-reeks use:nth-child(4) { animation-delay: 0.36s; }
  .pas-reeks use:nth-child(5) { animation-delay: 0.48s; }
  .pas-reeks use:nth-child(6) { animation-delay: 0.6s; }
  .pas-figuur { animation-delay: 0.3s; }
}
@keyframes pas-op { from { opacity: 0; } to { opacity: 1; } }

.stappenteller {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  margin: 0 0 var(--r-4);
  max-width: none;
  font-weight: var(--gewicht-nadruk);
}
.pas-stappen { flex: none; width: 3.5rem; height: 3.125rem; }
.pas-stappen polyline {
  fill: none;
  stroke: var(--kleur-rand);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pas-stappen[data-stap="1"] .p1,
.pas-stappen[data-stap="2"] .p1, .pas-stappen[data-stap="2"] .p2,
.pas-stappen[data-stap="3"] .p1, .pas-stappen[data-stap="3"] .p2, .pas-stappen[data-stap="3"] .p3,
.pas-stappen[data-stap="4"] .p1, .pas-stappen[data-stap="4"] .p2, .pas-stappen[data-stap="4"] .p3, .pas-stappen[data-stap="4"] .p4,
.pas-stappen[data-stap="5"] polyline { stroke: var(--kleur-pruim); }
.pas-stappen[data-stap="1"] .p1,
.pas-stappen[data-stap="2"] .p2,
.pas-stappen[data-stap="3"] .p3,
.pas-stappen[data-stap="4"] .p4 { stroke-width: 3px; }


/* --------------------------------------------------------------------------
   15. De opening van de home
   <section class="held op-geel">
     <div class="binnen held__tekst">
       <h1>Eerst kijken. <br>Dan pas behandelen.</h1>
       <p class="inleiding">Kine, personal training en psychologie in Aartselaar. U hoort wat we zien en wat de volgende stap is.</p>
       <div class="knoppen">...</div>
     </div>
     [fragment .pas-band]
   </section>
   -------------------------------------------------------------------------- */
.held__tekst { padding-block: var(--r-5) var(--r-4); }
.held h1 { font-size: var(--t-toon); line-height: 1.02; letter-spacing: -0.025em; }
.held .inleiding { margin-top: var(--r-3); }
.held .knoppen { margin-top: var(--r-4); }
@media (min-width: 48em) {
  .held__tekst { padding-block: var(--r-7) var(--r-5); }
  .held .inleiding { margin-top: var(--r-4); }
}


/* --------------------------------------------------------------------------
   16. De drie pijlers: grote woorden op eigen regels, geen kaartjes
   <ul class="pijlers"><li><a href="/kine"><span class="pijlers__woord">Kine</span>
     <span class="pijlers__zin">...</span></a></li></ul>
   -------------------------------------------------------------------------- */
.pijlers { margin: var(--r-5) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--kleur-inkt); }
.pijlers li { margin: 0; max-width: none; border-bottom: 1px solid var(--lijn); }
.pijlers a {
  display: grid;
  gap: var(--r-1);
  padding-block: var(--r-4);
  color: var(--tekst);
  text-decoration: none;
}
.pijlers__woord {
  font-size: var(--t-h2);
  font-weight: var(--gewicht-kop);
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}
.pijlers a:hover .pijlers__woord { text-decoration-thickness: 3px; }
.pijlers__zin { color: var(--tekst-2); max-width: var(--regel); }
@media (min-width: 48em) {
  .pijlers a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--r-7); align-items: baseline; }
}


/* --------------------------------------------------------------------------
   17. Regels: diensten, afspraken, "Over te nemen". Eén regel per item, knoppen rechts op computer.
   -------------------------------------------------------------------------- */
.regels { margin: var(--r-4) 0 0; padding: 0; list-style: none; }
.regels > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-2) var(--r-4);
  max-width: none;
  margin: 0;
  padding-block: var(--r-3);
  border-top: 1px solid var(--lijn);
}
.regels > li:last-child { border-bottom: 1px solid var(--lijn); }
.regels__hoofd { flex: 1 1 14rem; min-width: 0; }
.regels__acties { display: flex; flex-wrap: wrap; gap: var(--r-2); }

/* Afspraak: datum en uur groot */
.moment {
  font-size: var(--t-h3);
  font-weight: var(--gewicht-kop);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Teller in tekst, bijvoorbeeld in het beheer: "Over te nemen, 3" */
.teller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--r-2);
  border-radius: var(--hoek);
  background: var(--kleur-geel);
  color: var(--kleur-inkt);
  font-weight: var(--gewicht-nadruk);
  font-variant-numeric: tabular-nums;
}

/* Veelgestelde vragen */
.vraag { border-top: 1px solid var(--lijn); }
.vraag:last-of-type { border-bottom: 1px solid var(--lijn); }
.vraag > summary {
  display: flex;
  align-items: center;
  min-height: var(--knop-hoogte);
  padding-block: var(--r-3);
  font-weight: var(--gewicht-nadruk);
  cursor: pointer;
}
/* K4.01: display:flex haalt het standaardteken weg. Open en dicht verschillen in vorm, niet enkel in kleur. */
.vraag > summary::before {
  content: "+";
  flex: none;
  width: 1.5em;
  font-weight: var(--gewicht-nadruk);
}
.vraag[open] > summary::before {
  content: "\2212";
}
.vraag > div { padding-bottom: var(--r-4); }


/* --------------------------------------------------------------------------
   18. Meldingen
   <div class="melding melding--gelukt" role="status"><h2 class="melding__kop">Uw afspraak staat vast</h2><p>...</p></div>
   role="alert" bij fouten, role="status" bij bevestigingen.
   Altijd een kop of eerste woord dat zegt wat er aan de hand is; kleur alleen draagt niets.
   -------------------------------------------------------------------------- */
.melding {
  margin-top: var(--r-4);
  padding: var(--r-4);
  border: 2px solid var(--kleur-rand);
  border-radius: var(--hoek);
  background: var(--kleur-gips);
  color: var(--kleur-inkt);
  --tekst: var(--kleur-inkt);
  --tekst-2: var(--kleur-inkt);
  --link: var(--kleur-pruim);
  --focus: var(--kleur-pruim);
}
.melding__kop { margin: 0; font-size: var(--t-basis); font-weight: var(--gewicht-kop); letter-spacing: 0; }
.melding__kop + * { margin-top: var(--r-2); }
.melding--fout { background: var(--kleur-foutvlak); border-color: var(--kleur-fout); }
.melding--fout .melding__kop { color: var(--kleur-fout); }
.melding--gelukt { background: var(--kleur-geluktvlak); border-color: var(--kleur-gelukt); }
.melding--gelukt .melding__kop { color: var(--kleur-gelukt); }
.melding--waarschuwing { background: var(--kleur-bleekgeel); border-color: var(--kleur-pruim); }
.melding ul { margin-top: var(--r-2); }


/* --------------------------------------------------------------------------
   19. Foto, enkel als die er is
   <figure class="foto-vlak"><img ...><figcaption>Bijschrift</figcaption></figure>
   Vaste verhouding, zodat er niets verschuift. Zonder foto blijft de plaats weg: geen leeg vak, geen nepbeeld.
   -------------------------------------------------------------------------- */
.foto-vlak {
  display: flex;
  align-items: flex-end;
  margin: var(--r-4) 0 0;
  aspect-ratio: 4 / 3;
  padding: var(--r-4);
  background: var(--kleur-gips);
  border-radius: var(--hoek);
  color: var(--kleur-inkt);
}
.foto-vlak figcaption { font-size: var(--t-klein); max-width: 26rem; }
.foto-vlak img { width: 100%; height: 100%; object-fit: cover; }
.foto-vlak:has(img) { padding: 0; overflow: hidden; }
/* Met bijschrift: de foto houdt 4:3, het bijschrift staat eronder op gips. */
.foto-vlak:has(figcaption) { display: block; aspect-ratio: auto; }
.foto-vlak:has(figcaption) img { display: block; height: auto; aspect-ratio: 4 / 3; }
.foto-vlak:has(figcaption) figcaption { padding: var(--r-2) var(--r-3); max-width: none; }


/* --------------------------------------------------------------------------
   20. Voet
   -------------------------------------------------------------------------- */
.voet {
  --achter: var(--kleur-pruim);
  --tekst: var(--kleur-wit);
  --tekst-2: var(--kleur-gips);
  --link: var(--kleur-wit);
  --focus: var(--kleur-geel);
  --lijn: var(--kleur-gips);
  background: var(--achter);
  color: var(--tekst);
  padding-block: var(--r-7) var(--r-6);
}
.voet__kolommen { display: grid; gap: var(--r-6); }
.voet__kolommen > * { min-width: 0; }
.voet h2 { margin: 0 0 var(--r-2); font-size: var(--t-basis); font-weight: var(--gewicht-nadruk); letter-spacing: 0; }
.voet ul { margin: 0; padding: 0; list-style: none; }
.voet li { margin: 0; }
.voet li a { display: inline-flex; align-items: center; min-height: var(--tik); }
.voet__klein {
  margin-top: var(--r-6);
  padding-top: var(--r-3);
  border-top: 1px solid var(--lijn);
  color: var(--tekst-2);
  font-size: var(--t-klein);
  max-width: none;
}
@media (min-width: 48em) {
  .voet__kolommen { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
}


/* --------------------------------------------------------------------------
   21. Beweging, hoog contrast, afdruk
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .knop:active { transform: none; }
}

@media (forced-colors: active) {
  .knop, .uurknop, .menu-gsm > summary { border: 2px solid ButtonText; }
  .uurknop[aria-pressed="true"], .uurknop[aria-current="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .pas-cyclus polyline, .pas-figuur polyline, .pas-stappen polyline { stroke: CanvasText; }
  .pas-figuur circle { fill: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

@media print {
  .belbalk, .menu-gsm, .menu-breed, .kop__actie, .naar-inhoud, .pas-band { display: none !important; }
  .met-belbalk { padding-bottom: 0; }
  .kop, .voet, .held { background: none; color: var(--kleur-inkt); }
  .logo-plaats { color: var(--kleur-inkt); }
  a { color: var(--kleur-inkt); }
}