/* [plan: kn-css] Gedeelde opmaak van de behandelpagina's: elke pagina die dit bestand laadt (template_check.py telt ze; 12 op 31-10-2026).
   Stond tot 17-10-2026 als 4 byte-gelijke <style>-blokken in die pagina's (Michael: "Ja, het mag naar één CSS-bestand").
   De naam: structuur_check.py en dode_css.py zoeken al naar css/kalknagel.css. Elke pagina laadt dit bestand na
   styles.css, op de plek van het oude blok; bij gelijke specificiteit winnen deze regels daardoor, zoals toen.
   Iets voor één pagina gaat via een eigen klasse hier, zoals kn-h1-lang (alleen vergoeding). */

/* [plan: kn-grid] Het Over mij-grid (is-y-center): kop en tekst links, de foto's rechts
   verticaal gecentreerd over beide rijen. Op <=991px 1 kolom: kop, foto's, tekst. */
.kn-main { grid-template-rows: auto 1fr; row-gap: var(--_sizes---gap--sm-gap); }
.kn-intro { grid-column: 1; grid-row: 1; }
/* [plan: kn-h1-past] De kop schaalt mee met zijn eigen kolom: "Schimmelnagels" is 7,5x de lettergrootte breed en
   liep met de h0-maat buiten beeld op 320-375px (tot 41 px) en over de foto's op 992-1220px (1024: 118 px).
   12.5cqi houdt het woord binnen de kolom; nooit groter dan de h0-maat (1440: 88.8 in plaats van 89.76 px).
   Een browser zonder cqi slaat de regel over en toont de oude maat. */
.kn-intro { container-type: inline-size; }
.kn-intro h1 { font-size: min(var(--_typography---h0-heading--h0-size), 12.5cqi); }
/* [plan: kn-h1-lang] Voor een kop met een langere regel dan "Schimmelnagels" (7,52x de lettergrootte). Vergoeding:
   "medisch pedicure" is 8,21x, dus met 12.5cqi stonden de 3 woorden onder elkaar (Michael, 17-10-2026: "lelijk").
   11.4cqi vult de kolom even ver als kalknagel (94%); gemeten 2 regels op 320-2560px in Chromium en WebKit. Een
   breder tekstvak helpt niet: de kop schaalt mee met zijn kolom, en op <=991px is er maar 1 kolom. */
.kn-intro h1.kn-h1-lang { font-size: min(var(--_typography---h0-heading--h0-size), 11.4cqi); }
.kn-media { grid-column: 2; grid-row: 1 / span 2; }
.kn-body { grid-column: 1; grid-row: 2; }
/* [plan: kn-60-40] Tekst 60%, foto's 40% (de klant, via Michael, 13-10-2026). Gemeten op 1440: 69 tekens per regel
   (50/50: 54, 75/25: 87; WCAG 1.4.8 zegt maximaal 80) en de kleine foto 211 px (75/25: 132 px). Alleen vanaf
   992px: daaronder is het grid 1 kolom. De sizes-waarden van de foto's (41vw, 21vw) zijn voor 50/50 en dus te groot. */
@media screen and (min-width: 992px) {
  .kn-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* [plan: kn-collage] Tweede foto kleiner rechtsonder over de eerste, zoals de collage in Over mij
   (Michael, 01-10-2026). Maten van daar: 9 kolommen, klein 4 breed en 1 kolom buiten de grote,
   overlap de helft van zijn eigen hoogte (Over mij gemeten, parallax eraf: 87 en 96 van 175 px). -33.333% is die
   helft: een procentmarge rekent met de breedte van het grid-vak, en 3:2 maakt de hoogte 2/3
   daarvan. Klein moet na groot in de HTML staan: beide zijn position: relative (.image-ratio_3x2),
   dus de laatste ligt bovenop. */
.kn-media { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.kn-foto-groot { grid-column: 1 / span 8; grid-row: 1; }
.kn-foto-klein { grid-column: 6 / span 4; grid-row: 2; margin-top: -33.333%; }
/* [plan: kn-cert] "Aangesloten bij" onder de foto's, rechts uitgelijnd zoals in Over mij (Michael,
   06-10-2026). Over mij hangt het blok absoluut onder de kolom (styles.css:7187, top: 100%), met
   .is-overmij-col als anker; .kn-media is geen anker, dus hier in de flow als derde rij.
   De parallax (IX2, a-40) schuift de foto's tot 10vh omlaag (gemeten 84/102/77/90 px op 390/768/1024/1440);
   met alleen 1.5rem schoof de kleine foto 45-66 px over kop en logo's. 10vh erbij houdt hem eruit. */
.kn-cert { grid-column: 1 / -1; grid-row: 3; justify-self: end; position: static; margin-top: calc(1.5rem + 10vh); }

/* [plan: kn-foto-fade] De 2 foto's faden in zodra ze geladen zijn (Michael, 04-11-2026; site.js zet kn-foto-in na img.decode()). Op
   de img, niet op de wrapper: daar zit de parallax (a-40). Zonder JavaScript geen w-mod-js, dus zichtbaar. Laadt site.js niet,
   dan maakt kn-foto-nood ze na 4 s alsnog zichtbaar. Bij "beweging verminderen" geen verbergen en geen fade. */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .kn-foto-groot img, html.w-mod-js .kn-foto-klein img { transition: opacity .9s ease; }
  html.w-mod-js .kn-foto-klein img { transition-delay: .2s; }
  html.w-mod-js .kn-foto-groot img:not(.kn-foto-in), html.w-mod-js .kn-foto-klein img:not(.kn-foto-in) { opacity: 0; animation: kn-foto-nood 0s 4s forwards; }
}
@keyframes kn-foto-nood { to { opacity: 1; } }

/* [plan: kn-tekst] Typografie van de Over mij-tekst (.subheading), maar in .rich-text: de
   IX3-fade-in splitst .subheading en .header p in woorden met aria-hidden. */
.kn-text { max-width: var(--_sizes---container--container-sm-width); color: var(--_colors---current-color--current-a70); font-size: var(--_typography---text-lg--lg-text-size); line-height: var(--_typography---text-lg--lg-text-line-height); }
/* [plan: kn-h2] Zonder hero (die is alleen voor de homepage, Michael 01-10-2026) is "Kalknagel"
   de h1 en zijn de tussenkoppen h2; als h3 slaat de kopvolgorde een niveau over. Ze houden de
   h3-maat: die is op <=479px 0.91rem, kleiner dan de tekst (1.1rem), dus hier minstens 1.25x de
   tekst; op 390px gaf 1.2rem tegen 1.1rem geen zichtbaar verschil. */
.kn-text h2, .kn-cta h2 { margin: var(--_sizes---spacing--2x) 0 var(--_sizes---spacing--0-75x); color: var(--_colors---text-color--text-primary); font-size: max(var(--_typography---h3-heading--h3-size), calc(var(--_typography---text-lg--lg-text-size) * 1.25)); font-weight: 500; line-height: 1.2; }
.kn-cta h2 { margin-top: 0; }
.kn-text .button-group { margin-top: var(--_sizes---spacing--1x); }
.kn-card { margin: var(--_sizes---spacing--1-5x) 0; }
.kn-card p { margin-bottom: 0; }
/* [plan: kn-kaart-alineas] Meer alinea's in één kaart (vergoeding, likdoorn en de kaarten "Wat is een …?", 17-10-2026)
   krijgen dezelfde ruimte als erbuiten; zonder deze regel plakken ze aan elkaar (.kn-card p heeft margin-bottom 0). De
   kaart "Een basisbehandeling bestaat uit" heeft één alinea, dus daar verandert niets. */
.kn-card p + p { margin-top: var(--_typography---base-typography--base-margin-bottom); }
/* [plan: kn-bullets] Opsommingen met bolletjes in plaats van een lijn onder elk punt (Michael,
   07-10-2026). De lijn is .rich-text li (styles.css:1655, border-bottom); de witruimte tussen de
   punten blijft. Bolletjes staan buiten de tekst en hebben dus ruimte links nodig: zonder die padding
   vallen ze buiten .kn-body, dat op >=992px overflow-y: auto heeft en ze afknipt. */
.kn-text ul { list-style-type: disc; padding-left: 1.25em; }
.kn-text li { border-bottom: 0; }

/* [plan: kn-cta] De "CtA knop" uit de schets: een gecentreerde kaart. Op mint is hij wit met de
   mint knop (zie kn-mint). */
.kn-cta { max-width: 40rem; margin: 0 auto; padding: var(--_sizes---spacing--2x); text-align: center; font-size: var(--_typography---text-lg--lg-text-size); line-height: var(--_typography---text-lg--lg-text-line-height); }
/* [plan: kn-cta-anim] De kaarttekst verschijnt woord voor woord, zoals "Goed om te weten" op de
   homepage (Michael, 01-10-2026): dezelfde IX3-animatie uit site.js, dus .header om de kaart en
   geen .rich-text. Hij start per .section zodra de bovenkant op 80% van het scherm komt (gemeten:
   op de homepage al met de kaart 1299px omlaag, buiten beeld). Daarom een eigen sectie: de
   tekstsectie zonder padding onder, 4x erboven = de oude 4x marge. Van .rich-text raakte alleen
   ".rich-text p { font-size: inherit }" de kaart; die staat hier. Afwijking van het plan:
   SplitText zet aria-hidden op elk woord. */
.kn-cta-sectie { padding-top: var(--_sizes---spacing--4x); }
.kn-cta p { font-size: inherit; }

/* [plan: kn-mint] Kleuren omgedraaid t.o.v. Over mij (Michael, 01-10-2026): mint tussen de witte
   nav en footer, zoals de homepage wit en mint afwisselt (Behandelingen is mint). Kop, tussenkoppen
   en fotorand wit; de lopende tekst blijft donker. De tussenkoppen krijgen de schaduw van de h1
   (styles.css:6592): elke witte kop op mint heeft er een (gemeten: 3 van 3). De afspraakkaart
   wordt wit met de mint knop: een mint kaart valt weg op mint. */
.kn-mint { background-color: var(--_colors---background-color--bg-accent-primary); }
.kn-mint .kn-intro h1, .kn-mint .kn-text h2 { color: var(--_colors---text-color--text-on-accent-primary); }
.kn-mint .kn-text h2 { text-shadow: 0 1px #0003; }
/* [plan: kn-kaart-kop] Een kop in een witte kaart is zwart: de tekstkleur van de kaart (#041011, .vw-card-white in
   styles.css), zonder de schaduw voor wit op mint en zonder ruimte erboven, want de kaart heeft al padding (Michael,
   17-10-2026: "het witte vlak om de alinea's daar hoort hun titel er bij"). Even zwaar als de 2 regels hierboven, dus
   hij moet erna staan: ervoor wint wit, en wit op wit is onzichtbaar. */
.kn-mint .kn-card h2 { margin-top: 0; color: inherit; text-shadow: none; }
/* [plan: kn-kaart-link] Een link in een witte kaart (kn-kruislinks) heeft de tekstkleur van de kaart en blijft onderstreept.
   Zonder deze regel is hij mint (a in styles.css:445): mint op wit is nauwelijks te lezen. Bij hover dikker onderstreept,
   geen andere kleur (styles.css:450 maakt hem anders blauw). */
.kn-card a, .kn-card a:hover { color: inherit; }
.kn-card a:hover { text-decoration-thickness: 2px; }
/* [plan: kn-mint-link] Zelfde regel voor een tekstlink op mint, buiten een kaart (kn-basis-link, vg-kruislinks): die
   was mint op mint, rgb(179,222,203) op dezelfde achtergrond, dus onzichtbaar (gemeten 23-10-2026: 10 links op 8
   pagina's, Chromium en WebKit). Knoppen niet: die hebben hun eigen kleuren (kn-bekijk, kn-hover-wit). */
.kn-mint .kn-text a:not(.button), .kn-mint .kn-text a:not(.button):hover { color: inherit; }
.kn-mint .kn-text a:not(.button):hover { text-decoration-thickness: 2px; }
/* [plan: kn-link-vet] Elke tekstlink vet, even vet als strong in dezelfde tekst (bold), verder de kleur en maat van de
   tekst (Michael, 23-10-2026: "maak die link-tekst ook vet gedrukt. zelfde waarde als de rest op de pagina"). Op mint en
   in een witte kaart; knoppen niet. */
.kn-text a:not(.button) { font-weight: bold; }
.kn-mint .kn-media .image.image_cover.shadow_xlarge { border-color: var(--_colors---text-color--text-on-accent-primary); }
.kn-mint .kn-cta { background-color: var(--_colors---background-color--bg-primary); }
/* [plan: kn-bekijk] "Bekijk behandelingen en tarieven" wit met de donkere rand, zoals "Bel" op de
   witte kaart (Michael, 01-10-2026). .is-secondary is doorzichtig (styles.css:749), dus op mint
   werd hij mint; gemeten was dat het enige verschil met "Bel", in alle 4 de staten. Deze regel weegt
   zwaarder dan .button.is-secondary:active, anders wordt hij bij indrukken weer mint. */
.kn-mint .kn-body .button.is-secondary { background-color: var(--_colors---background-color--bg-primary); }
/* [plan: kn-hover-wit] Mint knoppen in de pagina (de kaartknop) krijgen bij hover witte tekst, nooit blauw
   (Michael, 07-10-2026). Het blauw kwam uit a:hover (styles.css:450, #01a3c5). Alleen de mint knoppen: de
   witte (.is-secondary, .beh-cta-white) zouden wit op wit worden. Alleen binnen .section: de nav-knop is
   omgekeerd (wit, hover zwart; nav-cta-hover in styles.css) en deze regel zou hem overschrijven. */
.section .button:not(.is-secondary):not(.beh-cta-white):hover { color: var(--_colors---text-color--text-on-accent-primary); }
/* [plan: kn-knop-vet] "Afspraak maken" in de tekst en "Bekijk behandelingen en tarieven" zijn zwaarder; de
   "Afspraak maken" in het Eerste afspraak-blok (.kn-cta) niet (Michael, 13-10-2026: 510 oogt beter dan 700).
   Instrument Sans laadt alleen 400/500/600/700, dus 510 tekent als 600 (gemeten in Chromium: pixel-gelijk).
   Eigen klasse: "Bel" en de nav-knop blijven normaal. */
.button.kn-vet { font-weight: 510; }
/* [plan: kn-scroll] Op >=992px scrolt de lange tekst in een eigen vak en blijven kop en foto
   staan (Michael, 01-10-2026). Het grid is hoogstens het scherm min de nav (75px, gemeten op
   1440 en 390) en de sectie-padding. Een vervaging boven en onder laat zien dat er meer tekst
   is; de padding eronder houdt de vervaging uit de laatste regel. */
@media screen and (min-width: 992px) {
  .kn-main { max-height: max(30rem, calc(100vh - 75px - var(--_sizes---section--section-padding-vertical) - var(--_sizes---spacing--2x))); grid-template-rows: auto minmax(0, 1fr); row-gap: 0; }
  .kn-body { align-self: stretch; min-height: 0; overflow-y: auto; margin: -1rem -1.5rem 0; padding: 1rem 1.5rem 3rem; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 3rem), transparent); }
  /* [plan: kn-balk] Een smalle witte scrollbalk naast de tekst (Michael, 01-10-2026): de eigen balk
     van het vak, dus de duim loopt altijd gelijk met de tekst. De baan loopt van 1rem onder de bovenrand
     tot 3rem boven de onderrand, buiten de vervaging; anders vervaagt de balk mee. Chrome negeert
     ::-webkit-scrollbar zodra scrollbar-width of -color staat, dus die alleen voor Firefox. */
  .kn-body::-webkit-scrollbar { width: 4px; }
  .kn-body::-webkit-scrollbar-track { margin: 1rem 0 3rem; border-radius: 2px; background-color: color-mix(in srgb, var(--_colors---text-color--text-on-accent-primary) 35%, transparent); }
  .kn-body::-webkit-scrollbar-thumb { border-radius: 2px; background-color: var(--_colors---text-color--text-on-accent-primary); }
  @supports not selector(::-webkit-scrollbar) {
    .kn-body { scrollbar-width: thin; scrollbar-color: var(--_colors---text-color--text-on-accent-primary) transparent; }
  }
}
/* [plan: kn-mobiel] Op <=991px staat de foto boven de tekst, dus er valt niets naast de tekst
   vast te houden: gewone paginascroll, geen tekstvak. De 10vh die de parallax de foto omlaag
   schuift, vangt sinds 06-10-2026 de marge boven .kn-cert op (zie kn-cert); het blok staat
   tussen foto en tekst, dus een tweede 10vh onder het fotoblok zou alleen lege ruimte zijn. */
@media screen and (max-width: 991px) {
  .kn-main { grid-template-rows: auto; }
  .kn-intro, .kn-media, .kn-body { grid-column: auto; grid-row: auto; }
  .kn-media { justify-self: center; width: 100%; max-width: 36rem; }
}

/* [plan: kn-spiegel] Gespiegelde pagina: foto's links, tekst rechts, kleine foto links, balk links (de klant, via
   e-mail, 23-10-2026: "dit gaat niet over een klacht"). Alleen op een pagina met kn-spiegel op .kn-main, dus de
   andere behandelpagina's blijven zoals ze zijn. direction: rtl op het scrollvak zet de balk links (gemeten in
   Chromium 153 en WebKit 26.6: inhoud begint 12 px verder, balk 12 px); .kn-body > * zet de tekst terug op ltr. */
.kn-spiegel .kn-foto-groot { grid-column: 2 / span 8; }
.kn-spiegel .kn-foto-klein { grid-column: 1 / span 4; }
.kn-spiegel .kn-cert { justify-self: start; }
@media screen and (min-width: 992px) {
  .kn-main.kn-spiegel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .kn-spiegel .kn-media { grid-column: 1; }
  .kn-spiegel .kn-intro, .kn-spiegel .kn-body { grid-column: 2; }
  .kn-spiegel .kn-body { direction: rtl; }
  .kn-spiegel .kn-body > * { direction: ltr; }
}
/* [plan: kn-rand-mint] Mint fotorand in plaats van wit (Michael, 23-10-2026): de risicovoeten-foto's hebben zelf een
   wit vlak, en een witte rand liet de kleine foto in de grote overlopen. Mint op wit scheidt ze waar ze elkaar kruisen.
   Daarna ook op diabetes (zelfde dag). Alleen met kn-rand-mint op .kn-main; 6 klassen in de selector, tegen de 5 van de
   witte rand (kn-mint hierboven). */
.kn-mint .kn-rand-mint .kn-media .image.image_cover.shadow_xlarge { border-color: var(--_colors---background-color--bg-accent-primary); }
/* [plan: kn-pdf-icoon] A4-icoon voor een downloadlink naar een PDF (nagelbeugel; Michael, 23-10-2026). Twee regels
   tekst hoog, midden op de regel, met ruimte tot de linktekst. Het PNG is 3x de weergave (99x140 px). Dekking 0.7: de
   tekst is de inktkleur op 70% (--_colors---current-color--current-a70, gemeten 23-10-2026), het icoon dezelfde inkt.
   border-radius 0: styles.css geeft elke img 16px, meer dan de halve breedte, en knipt dan hoek en randen weg. */
.kn-text .kn-pdf-icoon { display: inline-block; width: auto; height: 2.4em; margin-right: 0.6em; vertical-align: middle; opacity: 0.7; border-radius: 0; }