/* Health Stars · healthstars.nl
   ---------------------------------------------------------------------------
   Museaal en stil. Papierwit, veel wit eromheen, een schreefletter die het werk
   doet en verder zo min mogelijk. Geen kaders om dingen heen tenzij ze echt
   iets afbakenen, geen iconen, geen kleurvlakken.

   De site bestaat uit losse pagina's die elk schoon laden. Er is dus geen
   scroll-logica en geen ankernavigatie meer. */

:root {
  --papier: #F8F6F3;
  --inkt: #0E0807;
  --grijs: #6B655F;
  --lijn: rgba(14, 8, 7, 0.18);
  --lijn-licht: rgba(14, 8, 7, 0.09);

  /* Libre Caslon Display houdt de dunne delen zichtbaar, ook op groot
     formaat. Hier stond eerder Bodoni Moda, en die had zo veel contrast dat de
     haarlijnen wegvielen. Dat las niet. */
  --display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --marge: clamp(1.6rem, 5vw, 5.5rem);
  --breed: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Elke pagina komt rustig op. Dit is een css-animatie en geen klasse die
   javascript moet zetten, zodat de pagina ook zonder javascript zichtbaar is. */
@keyframes komt-op {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

main {
  flex: 1 0 auto;
  animation: komt-op 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Op de voorpagina neemt de binnenkomst het over: main komt daar niet zelf op
   maar vervaagt in terwijl de laag wegvalt. */
.intro main {
  animation: none;
}

/* Bij het weggaan van een pagina fade't de boel uit. Javascript zet de klasse;
   gebeurt dat niet, dan navigeert de browser gewoon meteen. */
body.gaat-weg {
  opacity: 0;
  transition: opacity 0.28s ease;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* ── Kop, op elke pagina hetzelfde ───────────────────────────────────────── */

.kop {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding: 2rem var(--marge) 1.6rem;
  border-bottom: 1px solid var(--lijn-licht);
}

.kop__merk {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.kop nav {
  display: flex;
  gap: clamp(1.4rem, 3vw, 3rem);
}

.kop nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grijs);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.kop nav a:hover,
.kop nav a:focus-visible {
  color: var(--inkt);
  border-bottom-color: var(--inkt);
}

.kop nav a[aria-current="page"] {
  color: var(--inkt);
  border-bottom-color: var(--lijn);
}

/* ── Voet ────────────────────────────────────────────────────────────────── */

.voet {
  font-family: var(--mono);
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.5rem;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--marge) 2.2rem;
  margin-top: 6rem;
  border-top: 1px solid var(--lijn-licht);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grijs);
}

.voet a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 0.15rem;
}

.voet a:hover { color: var(--inkt); }

/* ── Voorpagina ──────────────────────────────────────────────────────────── */

.portaal {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 7rem) var(--marge) 0;
}


/* De claim vult de breedte. Dat is waar het karakter vandaan komt: een
   didone laat zijn haarlijnen pas zien op groot formaat. */
.portaal__claim {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 10.5vw, 11rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}


/* De drie ingangen. Bewust geen kaartjes naast elkaar maar een index, zoals de
   inhoudsopgave van een catalogus: een volgnummer, een naam en een regel die
   zegt waar het heen gaat. */

.ingang {
  margin: clamp(4rem, 10vh, 7rem) 0 0;
  border-top: 1px solid var(--lijn-licht);
}

.ingang__rij {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.15fr) 2rem;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid var(--lijn-licht);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.14, 1, 0.34, 1);
}

/* Transform en niet padding: padding laat de browser de hele rij opnieuw
   opmeten, transform handelt de grafische kaart af. */
.ingang__rij:hover,
.ingang__rij:focus-visible {
  transform: translateX(0.9rem);
  outline: none;
}

.ingang__nr {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--grijs);
}

.ingang__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.ingang__bij {
  color: var(--grijs);
  font-size: 0.95rem;
  line-height: 1.55;
}

.ingang__pijl {
  justify-self: end;
  color: var(--grijs);
  font-size: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease;
}

.ingang__rij:hover .ingang__pijl,
.ingang__rij:focus-visible .ingang__pijl {
  transform: translateX(0.5rem);
  color: var(--inkt);
}

/* ── De binnenkomst ──────────────────────────────────────────────────────────
   De naam komt in twee delen op en loopt daarna naar de kop.

   Alleen transform en opacity. Dat zijn de twee eigenschappen die de grafische
   kaart afhandelt zonder herberekening, en dus de enige twee die op elk
   apparaat gelijk lopen. Hier heeft eerst een schrijfanimatie gestaan, in drie
   uitvoeringen; die haperde overal omdat de techniek maximaal zo'n zeventig
   standen oplevert. Bouw dat niet terug. */

.binnenkomst { display: none; }

/* De laag houdt zijn eigen zichtbaarheid vast, los van de klasse op html.
   Hing hij daaraan, dan viel hij bij het weghalen van die klasse meteen terug
   op display:none en verdween hij op slag, midden in zijn eigen vervaging. */
.intro .binnenkomst,
.binnenkomst--zichtbaar {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: var(--papier);
}

/* Eén vervaging en niet twee: bij twee zie je het product van twee krommen en
   dat versnelt aan het eind. Lineair, want elke kromme versnelt ergens en over
   een heel scherm zie je dat. */
.binnenkomst {
  transition: opacity 620ms linear;
}

.binnenkomst--afgelopen {
  opacity: 0;
  pointer-events: none;
}

.binnenkomst__naam {
  width: min(86vw, 1000px);
  height: auto;
  overflow: visible;
  will-change: transform, opacity;
  /* Een zachte aanloop. Een kromme die meteen wegschiet laat de naam in één
     beeldje aan zijn reis naar de kop beginnen, en dat is een schok. */
  transition: transform var(--duur, 0ms) cubic-bezier(0.5, 0, 0.2, 1),
              opacity var(--duur-vaag, 0ms) ease var(--wacht-vaag, 0ms);
}

/* De letters zelf. Ze staan in een clipPath, dus je ziet ze pas waar de pen
   eroverheen is gegaan. */
.binnenkomst__tekst {
  font-family: 'Pinyon Script', cursive, serif;
  font-size: 205px;
}

/* De pen. Elke streek tekent zichzelf uit; de duur komt uit een variabele die
   javascript per letter zet, want de regel voor 'verminder beweging' zet een
   harde transition-duration met !important op nul. */
.binnenkomst__streek {
  fill: none;
  stroke: var(--inkt);
  /* Een rechte punt en geen ronde. Een ronde punt kijkt een halve lijndikte
     vooruit, en alles binnen die halve cirkel verschijnt tegelijk. Dat kost
     onderscheidbare standen, en standen zijn hier precies wat vloeiendheid
     bepaalt. De clipPath zorgt toch dat er niets buiten de letters komt. */
  stroke-linecap: butt;
  stroke-linejoin: round;
  transition: stroke-dashoffset var(--duur, 0ms) var(--soepel, linear);
}

/* ── Binnenpagina's ──────────────────────────────────────────────────────── */

.blad {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--marge) 0;
}

.blad--breed { max-width: var(--breed); }

.blad__soort {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 1.2rem;
}

.blad__titel {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.9vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  /* Manual en niet none: none schakelt ook de eigen breekpunten uit de html
     uit, en dan loopt ZORGDETACHERING op een smal scherm buiten beeld. */
  hyphens: manual;
  margin: 0;
}

.blad__lead {
  margin: 1.8rem 0 0;
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  line-height: 1.62;
  color: var(--grijs);
}

.blad p { max-width: 62ch; }

/* Een tak of een hoofdstuk. Het kopje staat in de linkerkolom, de tekst
   ernaast, zodat het oog een vaste kolom houdt. */

.deel {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 1.4rem clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.6rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--lijn-licht);
}

.deel:first-of-type { margin-top: clamp(3rem, 7vw, 5rem); }
.deel:last-of-type { border-bottom: 1px solid var(--lijn-licht); }

.deel__kop { margin: 0; }

.deel__nr {
  font-family: var(--mono);
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--grijs);
  margin-bottom: 0.7rem;
}

.deel__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  /* Kort genoeg gehouden om op één regel te passen. Op een smal scherm staat
     het kopje boven de tekst en mag het wel omlopen, anders valt het eruit. */
  hyphens: manual;
  white-space: nowrap;
}

.deel__tekst > p:first-child { margin-top: 0; }
.deel__tekst > p:last-child { margin-bottom: 0; }

.deel__tekst p { margin: 0 0 1.1rem; }

/* De naam van een pijler, boven de uitleg. */
.pijler__naam {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt);
  margin: 2rem 0 0.5rem !important;
}

/* Een verwijzing naar een eigen site van een tak. */
.naar {
  margin: 1.6rem 0 0.4rem !important;
}

.naar a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 0.3rem;
  transition: border-color 0.25s ease;
}

.naar a:hover,
.naar a:focus-visible { border-bottom-color: var(--inkt); }

.bij {
  font-size: 0.88rem !important;
  color: var(--grijs);
}

.bij a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* ── Tegels op de dienstenpagina ─────────────────────────────────────────────
   Drie ingangen naar een eigen pagina. Groot en typografisch, met alleen een
   volgnummer en de naam. Geen iconen. */

.tegels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: clamp(3rem, 7vw, 5rem) 0 0;
}

.tegel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: clamp(15rem, 26vw, 21rem);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  transition: background 0.4s cubic-bezier(0.14, 1, 0.34, 1),
              border-color 0.4s cubic-bezier(0.14, 1, 0.34, 1);
}

.tegel:hover,
.tegel:focus-visible {
  background: rgba(14, 8, 7, 0.035);
  border-color: var(--inkt);
  outline: none;
}

.tegel__nr {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--grijs);
}

.tegel__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  line-height: 1.04;
  text-transform: uppercase;
  /* Alleen breken waar in de html een breekpunt staat. Automatisch afbreken
     hakte ZORGDETACHERING in drie stukken met koppeltekens ertussen. */
  hyphens: manual;
}

.tegel__bij {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* ── Een dienst in het lang ──────────────────────────────────────────────────
   Eén kolom, geen kopje in de zijmarge. Dat liep bij een lang woord als
   Zorgdetachering over de tekst heen en dat las niet. */

.verhaal {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--lijn-licht);
}

.verhaal p {
  margin: 0 0 1.3rem;
  max-width: 64ch;
  font-size: 1.05rem;
  line-height: 1.75;
}

.verhaal p:last-child { margin-bottom: 0; }

.blad__soort a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 0.15rem;
}

.blad__soort a:hover { color: var(--inkt); }

.verder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--lijn-licht);
}

.verder a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grijs);
  transition: color 0.3s ease;
}

.verder a:hover,
.verder a:focus-visible { color: var(--inkt); }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--lijn-licht);
}

.gegevens h2,
.formulier h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 1.8rem;
}

.gegevens dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}

.gegevens dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 0.4rem;
}

.gegevens dd {
  margin: 0;
  line-height: 1.65;
  /* Een adres als esther.eijgenstein@zorgdetacheringen.nl past niet op een
     telefoon en heeft geen spaties om op te breken. */
  overflow-wrap: anywhere;
}

.gegevens dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

.veld { margin-bottom: 1.5rem; }

.veld label {
  font-family: var(--mono);
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 0.55rem;
}

.veld input,
.veld textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--inkt);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  padding: 0.55rem 0;
  transition: border-color 0.25s ease;
}

.veld textarea {
  resize: vertical;
  min-height: 7rem;
}

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-bottom-color: var(--inkt);
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor een bot. */
.val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* De Turnstile-widget. In de modus Invisible staat hier niets en valt deze
   regel weg tegen een leeg element; kiest Cloudflare toch voor een zichtbaar
   blokje, dan hangt het niet tegen de knop aan. */
.cf-turnstile {
  margin-bottom: 1.6rem;
}

/* ── Frankeren ──────────────────────────────────────────────────────────────
   Voor het versturen sleep je een postzegel op zijn plek. Dat is geen captcha
   maar een gebaar; het weert wel de bots die alleen standaardvelden invullen,
   want de waarde in het veld gefrankeerd ontstaat pas door de handeling zelf.
   Het blok staat op hidden in de html en wordt door script.js getoond, want
   zonder javascript valt er niets te slepen. */

.frankeer {
  margin-bottom: 1.8rem;
  user-select: none;
  -webkit-user-select: none;
}

.frankeer__label {
  font-family: var(--mono);
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 0.55rem;
}

.frankeer__bij {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--grijs);
  margin-top: 0.7rem;
  min-height: 1.2em;
}

.frankeer--klaar .frankeer__bij { color: var(--inkt); }

.post {
  position: relative;
  border: 1px solid var(--lijn-licht);
  background: var(--papier);
  padding: 1.1rem;
  height: 9rem;
}

.post__aan {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--grijs);
  letter-spacing: 0.02em;
}

.post__streep {
  margin-top: 0.6rem;
  width: 58%;
  height: 1px;
  background: var(--lijn-licht);
}

.post__plek {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.6rem;
  height: 4.3rem;
  border: 1px dashed var(--lijn);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.post__plek--dichtbij {
  border-color: var(--inkt);
  background: rgba(14, 8, 7, 0.05);
}

.postzegel {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 3.6rem;
  height: 4.3rem;
  background: var(--inkt);
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  /* De rafelrand, in drie lagen: een strook met halve cirkels uitgespaard
     bovenaan, dezelfde onderaan, en het volle midden ertussen. De lagen tellen
     bij elkaar op. Twee stroken met mask-composite: intersect werkt niet, want
     die overlappen elkaar nergens en dan blijft er niets over. */
  --tand: radial-gradient(circle at 50% 0, #0000 0 4px, #000 4.5px) top / 12px 12px repeat-x,
          radial-gradient(circle at 50% 100%, #0000 0 4px, #000 4.5px) bottom / 12px 12px repeat-x,
          linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat;
  -webkit-mask: var(--tand);
  mask: var(--tand);
}

.postzegel svg { width: 64%; height: 64%; }
.postzegel--sleept { cursor: grabbing; z-index: 5; }
.postzegel--vast { cursor: default; }

.postzegel:focus-visible {
  outline: 1px solid var(--inkt);
  outline-offset: 5px;
}

.knop {
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--inkt);
  border: 1px solid var(--inkt);
  border-radius: 0;
  padding: 0.95rem 2.2rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.knop:hover,
.knop:focus-visible {
  background: transparent;
  color: var(--inkt);
}

.knop[disabled] {
  opacity: 0.45;
  cursor: default;
}

.bericht {
  margin: 1.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid var(--lijn);
}

.bericht:empty { display: none; }

.bericht--fout { border-left-color: #9B2C2C; }
.bericht--goed { border-left-color: #2F6B4F; }

.bericht a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ── Versiestempel ───────────────────────────────────────────────────────── */

.versie {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--marge) 1.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--grijs);
  opacity: 0.5;
}

/* ── Smalle schermen ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .kop {
    padding-top: 1.4rem;
    padding-bottom: 1.1rem;
  }

  .kop nav { gap: 1.2rem; }

  .kop nav a { font-size: 0.66rem; letter-spacing: 0.14em; }

  /* De index krijgt twee regels per ingang in plaats van vier kolommen. */
  .ingang__rij {
    grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem;
    grid-template-areas:
      "nr naam pijl"
      ".  bij  .";
    row-gap: 0.5rem;
    align-items: baseline;
  }

  .ingang__nr { grid-area: nr; }
  .ingang__naam { grid-area: naam; }
  .ingang__bij { grid-area: bij; font-size: 0.9rem; }
  .ingang__pijl { grid-area: pijl; align-self: center; }

  .deel { grid-template-columns: minmax(0, 1fr); }

  .deel__naam { white-space: normal; }

  .tegels { grid-template-columns: minmax(0, 1fr); }

  .tegel {
    min-height: 0;
    gap: 1.6rem;
  }

  .contact { grid-template-columns: minmax(0, 1fr); }

  .voet { margin-top: 4rem; }
}

/* ── Wie beweging liever niet ziet ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  main { animation: none; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* De binnenkomst draait ook hier, want die hoort bij de voorpagina. De regel
     hierboven zet alle transities op nul, en dat gold ook voor het gordijn:
     dan springen de letters er instant in plaats van te lopen. De duren komen
     uit variabelen die javascript per stap zet, dus die kunnen hier gewoon
     terug. De rest van de site blijft rustig. */
  .binnenkomst { transition-duration: 620ms !important; }

  .binnenkomst__streek {
    transition-duration: var(--duur, 0ms) !important;
  }

  .binnenkomst__naam {
    transition-duration: var(--duur, 0ms), var(--duur-vaag, 0ms) !important;
  }

}

/* ---------------------------------------------------------------------------
   Documentpagina's: tarieven, voorwaarden, privacy.

   Deze drie zijn langer dan de rest en hebben tussenkoppen en opsommingen
   nodig, wat de andere pagina's niet hebben. Ze staan er omdat Mollie ze eist
   voordat het betaalaccount opengaat: prijs en omschrijving, voorwaarden, en
   een privacyverklaring.

   Ze blijven in dezelfde toon als de rest: geen kaders, geen vlakken, geen
   accentkleur. Een tussenkop is een kleine kapitaal in de schreefletter en
   verder doet wit het werk. */

.verhaal h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: clamp(2.6rem, 5vw, 3.4rem) 0 1.1rem;
  max-width: 30ch;
}

.verhaal h2:first-child { margin-top: 0; }

/* Een genummerd artikel in de voorwaarden. Het nummer staat in de mono-letter
   boven de kop, zoals de volgnummers op de dienstentegels. */
.verhaal h2 .nr {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--grijs);
  margin-bottom: 0.55rem;
}

.verhaal h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 2rem 0 0.7rem;
}

.verhaal ul {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  max-width: 64ch;
}

.verhaal li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Een liggend streepje en geen bolletje: dat laatste is een vorm en die staan
   er verder nergens op deze site. */
.verhaal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.7rem;
  height: 1px;
  background: var(--lijn);
}

.verhaal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* De datumregel onder aan een document. */
.stand {
  margin-top: clamp(2.6rem, 6vw, 3.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--lijn-licht);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* Een tarief: naam, wat je krijgt, en wat het kost. Het bedrag staat in de
   mono-letter, zodat het als getal leest en niet als zin. */
.tarief {
  margin: 0 0 clamp(2.2rem, 5vw, 3rem);
  padding-bottom: clamp(2.2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--lijn-licht);
  max-width: 64ch;
}

.tarief:last-of-type { border-bottom: 0; }

.tarief__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.tarief__prijs {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 1rem 0 0;
}

.tarief__bij {
  font-size: 0.92rem;
  color: var(--grijs);
  margin: 0.5rem 0 0;
}

/* De staffel van de Onderwijsengine. Naam links, bedrag rechts in de
   mono-letter, met een dunne lijn ertussen zodat het oog het bedrag vindt
   zonder dat er een tabel omheen hoeft. Op een smal scherm valt het bedrag
   onder de naam, want anders breekt "per maand of per jaar" midden in. */
.staffel {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}

.staffel li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--lijn-licht);
}

.staffel li:last-child { border-bottom: 0; }

.staffel__naam {
  font-size: 0.95rem;
}

.staffel__prijs {
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-align: right;
}

/* Op een telefoon past "€ 25 per maand of € 250 per jaar" niet naast de naam.
   Daar zet de naam zich boven het bedrag, allebei links. */
@media (max-width: 34rem) {
  .staffel li {
    display: block;
  }

  .staffel__prijs {
    display: block;
    text-align: left;
    margin-top: 0.15rem;
  }
}

/* De voettekst draagt nu ook de verplichte links. Op een telefoon vallen ze
   onder elkaar, op een breed scherm staan ze naast de regel met het jaartal. */
.voet__regels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: baseline;
  justify-content: space-between;
}

.voet__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

/* In de opsommingen op de privacypagina staat het onderwerp vet voorop. De
   lopende tekst is Inter op 300, dus 700 zou daar naast slaan. */
.verhaal strong { font-weight: 500; }

/* Afdrukken en de pdf. De voorwaarden en de privacyverklaring moeten te
   bewaren zijn (artikel 6:234 BW), en scripts/documenten-pdf.sh maakt daar een
   pdf van door deze pagina's af te drukken. Wat op papier niets doet gaat er
   hier af: het menu, de doorklikken onderaan en de voettekst. De versieregel
   blijft juist wel staan, want die zegt welke versie je in handen hebt. */
@media print {
  .kop,
  .verder,
  .voet,
  .bewaar,
  .intro-laag {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .blad {
    padding-top: 0;
  }

  .verhaal h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .verhaal p,
  .verhaal li {
    orphans: 3;
    widows: 3;
  }

  a {
    color: inherit;
  }
}