/* ──────────────────────────────────────────────────────────────────────────
   StitchTracker — opmaak voor alle pagina's, Nederlands en Engels.
   Eén bestand voor index.html, en.html, privacybeleid.html en privacy.html,
   zodat een wijziging meteen overal doorwerkt.

   Het ontwerp leunt op twee dingen: vlakken in zachte kleuren met een
   "gestikte" binnenrand (een gestreepte lijn net binnen de rand, zoals een
   stiksel in stof), en Young Serif voor de koppen.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Lettertypen ───────────────────────────────────────────────────────────
   Zelf gehost, niet via Google Fonts. De app vraagt geen internettoegang en
   verzamelt niets; dan hoort de website niet het IP-adres van elke bezoeker
   naar een server van Google te sturen. Scheelt ook een externe verbinding
   die het tekenen van de pagina ophoudt.
   Beide lettertypen staan onder de SIL Open Font License, zie fonts/.       */

@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/youngserif-latin.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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/youngserif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}
/* Karla is één variabel bestand voor 400 tot 700. */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-latin.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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}

/* ── Kleuren en maten ──────────────────────────────────────────────────── */

:root {
  --papier:     #FBF6F1;
  --achtergrond:#F8F0E8;

  --tekst:      #36323A;
  --tekst-2:    #57515A;
  --tekst-3:    #4E474F;
  --voet:       #665F68;

  --koraal:     #E18780;
  --koraal-op:  #E8968F;
  --koraal-aan: #D47A73;
  --koraal-don: #A3443C;
  --koraal-don-op: #74302A;
  --knoptekst:  #2A2025;

  --roze:       #F3DAD5;
  --roze-licht: #FCE4E1;
  --roze-stik:  #D99A92;
  --roze-stik-l:#E3A8A1;

  --lavendel:   #E9E3F3;
  --lavendel-l: #ECE6F7;
  --lav-stik:   #A99BCF;
  --lav-stik-l: #B3A6D6;
  --lav-tekst:  #5E4E92;

  --mint:       #D8EDE2;
  --mint-licht: #DFF2EA;
  --mint-stik:  #9CCBB2;
  --mint-tekst: #2F6B51;

  --perzik:     #FFF0DC;
  --perzik-stik:#E2C08F;
  --perzik-tekst:#8A5A1E;

  --zijkant:    clamp(20px, 5vw, 64px);
  --sectie:     clamp(72px, 9vw, 120px);

  color-scheme: light;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--tekst);
  font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* Linnenweefsel: twee haarfijne rasters over elkaar. */
  background-color: var(--achtergrond);
  background-image:
    repeating-linear-gradient(0deg,  rgba(160,120,100,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(160,120,100,.035) 0 1px, transparent 1px 4px);
}

h1, h2, h3 {
  font-family: 'Young Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

a {
  color: var(--koraal-don);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--koraal-don-op); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; }

/* Verborgen tot je er met Tab op landt: springt over de kop heen naar de tekst. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papier);
  color: var(--tekst);
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 5;
}
.overslaan:focus { left: var(--zijkant); top: 12px; }

/* ── De draad ──────────────────────────────────────────────────────────────
   Eén garendraad die achter alles langs de hele pagina naar beneden slingert.
   Staat achter de inhoud en vangt geen muisklikken op.                      */

.pagina { position: relative; }

.draad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Navigatie ─────────────────────────────────────────────────────────── */

.balk {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px var(--zijkant);
  display: flex;
  align-items: center;
  gap: 14px;
}
.balk-naam {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.balk-naam:hover { color: inherit; }
.balk-naam img { width: 48px; height: 48px; border-radius: 14px; }
.balk-naam span { font-family: 'Young Serif', Georgia, serif; font-size: 21px; }

.talen {
  margin-left: auto;
  display: flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.talen a,
.talen span {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px dashed transparent;
  text-decoration: none;
  line-height: 1;
  color: var(--tekst);
}
.talen a:hover { color: var(--koraal-don); border-color: var(--roze-stik); }
.talen .nu { border-color: var(--koraal); }

/* ── Indeling ──────────────────────────────────────────────────────────── */

.inhoud {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--zijkant);
}
.sectie { padding-bottom: var(--sectie); }

/* ── Vlak met stiksel ──────────────────────────────────────────────────────
   Buitenvlak in een kleur, een paar pixels padding, en daarbinnen een
   gestreepte rand. De binnenradius is precies zoveel kleiner als de padding,
   anders lopen de rondingen niet gelijk.                                    */

.vlak {
  background: var(--lavendel);
  border-radius: 28px;
  padding: 10px;
}
.vlak > .stiksel {
  border: 2px dashed var(--lav-stik);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 56px);
}
.vlak.roze { background: var(--roze); }
.vlak.roze > .stiksel { border-color: var(--roze-stik); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(48px, 8vw, 104px) 0 var(--sectie);
}
.hero-tekst { display: flex; flex-direction: column; align-items: flex-start; }
.badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--koraal-don);
  padding: 6px 14px;
  border: 1.5px dashed var(--koraal);
  border-radius: 999px;
}
.hero h1 {
  /* 64px en niet de 72px uit het ontwerp: bij 72 past "Een handwerk-" niet
     meer op één regel en valt de kop in vijf regels uiteen, met "Een" alleen
     bovenaan. Bij 64 staan beide talen in drie regels. */
  font-size: clamp(42px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 24px 0 0;
  max-width: 13ch;
}
.lead {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  max-width: 38ch;
  margin: 26px 0 0;
  color: var(--tekst-2);
}
.knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

/* Het embleem: een rond lapje met een breisteekpatroon, een gestippelde ring
   en het woordmerk in het midden. */
.embleem {
  position: relative;
  justify-self: center;
  width: min(400px, 100%);
  aspect-ratio: 1;
}
.embleem-lap,
.embleem-ring,
.embleem-hart { position: absolute; border-radius: 50%; }
.embleem-lap {
  inset: 0;
  background-color: var(--roze);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2218%22%3E%3Cpath d=%22M3 2 Q7 14 11 16 Q15 14 19 2%22 fill=%22none%22 stroke=%22%23E18780%22 stroke-width=%222%22 stroke-linecap=%22round%22 opacity=%220.35%22/%3E%3C/svg%3E');
}
.embleem-ring { inset: 14px; border: 2px dashed rgba(169, 71, 63, .4); }
.embleem-hart {
  inset: 16%;
  background: var(--papier);
  box-shadow: 0 18px 40px -18px rgba(120, 60, 50, .35);
  display: grid;
  place-items: center;
}
.embleem-hart img { width: 78%; height: auto; }

/* ── Knoppen ───────────────────────────────────────────────────────────────
   De knop is een pil in koraal met een gestreept randje er net binnenin, zodat
   hij eruitziet alsof hij is vastgestikt.                                    */

.knop {
  display: inline-block;
  text-decoration: none;
  background: var(--koraal);
  color: var(--knoptekst);
  font-weight: 700;
  font-size: 16px;
  padding: 6px;
  border-radius: 999px;
}
.knop > span {
  display: block;
  padding: 10px 22px;
  border: 1.5px dashed rgba(42, 32, 37, .45);
  border-radius: 999px;
}
.knop:hover { background: var(--koraal-op); color: var(--knoptekst); }
.knop:active { background: var(--koraal-aan); }

/* Zachte variant op een roze vlak: licht pilletje met roze stiksel. */
.knop.zacht { background: var(--papier); color: var(--tekst); }
.knop.zacht > span { border-color: var(--roze-stik); }
.knop.zacht:hover { background: #fff; color: var(--tekst); }

/* Tweede knop in de hero: geen vlak maar een gegolfde onderstreping. */
.knop-tekst {
  color: var(--tekst);
  font-weight: 700;
  font-size: 16px;
  padding: 10px 2px;
  text-decoration: underline;
  /* Streepjes en geen golfje: een golvende lijn onder tekst leest in een
     browser als een spelfout. Streepjes sluiten bovendien aan op de
     gestikte randen van de vlakken. */
  text-decoration-style: dashed;
  text-decoration-color: var(--koraal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.knop-tekst:hover { color: var(--koraal-don); }

/* ── Nu beschikbaar ────────────────────────────────────────────────────── */

.status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px clamp(32px, 5vw, 72px);
  /* De telefoon maakt de linkerkolom een stuk hoger; zonder dit blijft rechts
     onderin een lap leeg paars over. */
  align-items: center;
}
.status h2 { font-size: clamp(30px, 3.2vw, 42px); }
/* Linkerkolom van het paarse vak: kop, de badge van Google en de telefoon. */
.status-kop { display: flex; flex-direction: column; align-items: flex-start; }
.playbadge {
  display: inline-block;
  margin-top: 22px;
  line-height: 0;          /* anders staat er een streep witruimte onder de afbeelding */
}
.playbadge img { display: block; width: 190px; height: auto; }
/* Een stukje van het beginscherm, recht van voren in een lijstje. Een
   gekantelde telefoonmockup wordt op deze maat alleen maar wazig. */
.status-beeld {
  align-self: flex-start;
  width: 100%;
  max-width: 330px;
  margin-top: 26px;
  background: var(--papier);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 16px 36px -24px rgba(90, 70, 130, .5);
}
.status-beeld > div {
  border: 2px dashed var(--lav-stik);
  border-radius: 14px;
  padding: 6px;
}
.status-beeld img { display: block; width: 100%; height: auto; border-radius: 9px; }
/* Het plaatje is ook een link naar Google Play; het komt bij aanwijzen iets
   omhoog zodat je ziet dat er iets te klikken valt. */
a.status-beeld { display: block; text-decoration: none; transition: box-shadow .16s ease, transform .16s ease; }
a.status-beeld:hover { box-shadow: 0 22px 46px -22px rgba(90, 70, 130, .6); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  a.status-beeld { transition: none; }
  a.status-beeld:hover { transform: none; }
}
.status-tekst { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; }
.status-tekst p { margin: 0; }
.status-tekst .klein { margin-top: 8px; font-size: 15px; color: var(--tekst-2); }

/* ── Wat StitchTracker bijhoudt ────────────────────────────────────────── */

/* Geen max-width hier: met 16ch viel "bijhoudt" op een eigen regel, en dat
   leest rommelig. Zo blijft de kop op een breed scherm op één regel en breekt
   hij pas af als hij echt niet meer past. */
.kenmerken h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  margin-bottom: 36px;
  text-wrap: balance;
}
.kenmerken ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 160px en niet de 210px uit het ontwerp: bij 210 passen er op een breed
     scherm maar vier naast elkaar en blijft de vijfde kaart alleen achter,
     en op een telefoon zou er maar één per regel passen. Bij 160 staan ze
     op een breed scherm met z'n vijven naast elkaar en op een telefoon twee
     aan twee; ze rekken zelf op tot de kolom vol is. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
}
.kenmerk { border-radius: 24px; padding: 8px; display: flex; }
.kenmerk > div {
  flex: 1;
  border: 2px dashed;
  border-radius: 17px;
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
/* Het labeltje "Rij 1" boven in elke kaart is eruit gehaald; de opmaak blijft
   staan zodat het terug kan door de <span class="rij"> weer in de HTML te
   zetten. */
.kenmerk .rij {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kenmerk h3 { font-size: 22px; line-height: 1.2; margin: 6px 0 0; }
.kenmerk p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tekst-3); }

/* Vijf kaarten, vier kleuren; de vijfde begint de reeks opnieuw. */
.kenmerk.k1, .kenmerk.k5 { background: var(--roze-licht); }
.kenmerk.k1 > div, .kenmerk.k5 > div { border-color: var(--roze-stik-l); }
.kenmerk.k1 .rij, .kenmerk.k5 .rij { color: var(--koraal-don); }

.kenmerk.k2 { background: var(--lavendel-l); }
.kenmerk.k2 > div { border-color: var(--lav-stik-l); }
.kenmerk.k2 .rij { color: var(--lav-tekst); }

.kenmerk.k3 { background: var(--mint-licht); }
.kenmerk.k3 > div { border-color: var(--mint-stik); }
.kenmerk.k3 .rij { color: var(--mint-tekst); }

.kenmerk.k4 { background: var(--perzik); }
.kenmerk.k4 > div { border-color: var(--perzik-stik); }
.kenmerk.k4 .rij { color: var(--perzik-tekst); }

/* ── Privacy ───────────────────────────────────────────────────────────── */

.privacy-vlak {
  border-radius: 28px;
  background-color: var(--mint);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2220%22%3E%3Cpath d=%22M3 2 Q7 15 12 18 Q17 15 21 2%22 fill=%22none%22 stroke=%22%2378B396%22 stroke-width=%222%22 stroke-linecap=%22round%22 opacity=%220.5%22/%3E%3C/svg%3E');
  padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: center;
}
.privacy-kaart {
  background: var(--papier);
  border-radius: 20px;
  padding: 8px;
  max-width: 620px;
  box-shadow: 0 18px 40px -22px rgba(40, 90, 65, .45);
}
.privacy-kaart > div {
  border: 2px dashed var(--mint-stik);
  border-radius: 14px;
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
}
.privacy-kaart h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.privacy-kaart p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst-2);
}

/* ── Hoe dit begon ─────────────────────────────────────────────────────── */

.verhaal {
  display: flex;
  flex-wrap: wrap;
  gap: 36px clamp(32px, 6vw, 88px);
  /* stretch, niet center: het lijstje loopt zo van de kop tot de laatste
     regel van de tekst ernaast. */
  align-items: stretch;
}
.verhaal-beeld {
  flex: 0 1 340px;
  min-width: 240px;
  background: var(--roze);
  border-radius: 28px;
  padding: 8px;
  display: flex;
}
.verhaal-beeld > div {
  flex: 1;
  display: flex;
  border: 2px dashed var(--roze-stik);
  border-radius: 21px;
  padding: 6px;
}
.verhaal-beeld img {
  display: block;
  width: 100%;
  /* height:100% valt vanzelf terug op de eigen hoogte van de foto zodra het
     lijstje niet meer naast de tekst staat maar erboven, op een telefoon.
     Naast de tekst rekt hij mee tot onderaan en snijdt object-fit bij. */
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.verhaal-tekst {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.72;
  max-width: 58ch;
}
.verhaal-tekst h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 8px; }
.verhaal-tekst p { margin: 0; }

/* ── Je eigen patroon schrijven ────────────────────────────────────────────
   Zelfde indeling als "Hoe dit begon", maar met het beeld rechts en niet
   links, zodat de twee blokken elkaar afwisselen. Rechts staat een uitsnede
   van het schrijfscherm, dus object-fit blijft hier weg: bijsnijden zou de
   regels doormidden hakken.                                                 */

.bouwer {
  display: flex;
  /* gewoon wrap en niet wrap-reverse: op een telefoon horen de kop en de tekst
     boven het schermpje te staan, niet eronder. */
  flex-wrap: wrap;
  gap: 36px clamp(32px, 6vw, 88px);
  align-items: center;
}
.bouwer-tekst {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.72;
  max-width: 58ch;
}
.bouwer-tekst h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 8px; }
.bouwer-tekst p { margin: 0; }
.bouwer-tekst ul {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--tekst-2);
}
.bouwer-tekst li::marker { color: var(--koraal-don); }

/* Het schermpje ernaast. De breedte hieronder is zo gekozen dat het op een
   breed scherm even hoog uitkomt als de kop met de tekst ernaast; de uitsnede
   is daarop afgestemd. Verander je de tekst, dan loopt dat uit de pas. */
.bouwer-beeld {
  flex: 0 1 440px;
  min-width: 260px;
  background: var(--lavendel-l);
  border-radius: 28px;
  padding: 8px;
  display: flex;
}
.bouwer-beeld > div {
  flex: 1;
  display: flex;
  border: 2px dashed var(--lav-stik-l);
  border-radius: 21px;
  padding: 6px;
}
.bouwer-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ── Tip ───────────────────────────────────────────────────────────────── */

.tip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
/* Mag krimpen zodat de knop ernaast blijft staan; pas op een smal scherm
   zakt hij eronder. */
.tip-tekst { flex: 1 1 320px; max-width: 56ch; }
.tip .knop { flex: 0 0 auto; }
/* Iets kleiner dan de andere koppen: bij 36px valt "Een bolletje wol voor de
   maker?" over twee regels en komt de knop ernaast in de lucht te hangen. */
.tip h2 { font-size: clamp(24px, 2.4vw, 31px); line-height: 1.2; }
.tip p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--tekst-3); }

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

.voet {
  position: relative;
  z-index: 1;
  padding: 28px 0 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1.6;
  color: var(--voet);
}
.voet-links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ── Privacybeleid (aparte pagina) ─────────────────────────────────────────
   Dezelfde taal als de voorpagina: één vel papier met een stiksel eromheen. */

.beleid { padding: clamp(28px, 5vw, 56px) 0 var(--sectie); }
.beleid-vel {
  /* Smaller dan de voorpagina: dit is een lap lopende tekst, en die leest
     niet prettig als de regels over de volle 1140px lopen. */
  max-width: 840px;
  margin: 0 auto;
  background: var(--papier);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 18px 40px -26px rgba(120, 60, 50, .3);
}
.beleid-vel > div {
  border: 2px dashed var(--roze-stik);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 64px);
}
.beleid h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 6px; }
.beleid h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 40px 0 10px; }
.beleid .datum { color: var(--tekst-2); font-size: 15px; margin: 0 0 32px; }
.beleid p { margin: 0 0 14px; max-width: 62ch; }
.beleid ul { padding-left: 1.2rem; margin: 0 0 14px; max-width: 62ch; }
.beleid li { margin-bottom: 6px; }
.beleid .kern {
  background: var(--mint-licht);
  border: 2px dashed var(--mint-stik);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 0 20px;
}
.beleid .kern p { margin: 0; }
.beleid .terug { display: inline-block; margin-top: 36px; font-weight: 700; }

/* Het tipblok staat vlak boven de voet; daar hoeft minder lucht onder. */
.sectie.kort { padding-bottom: 56px; }

/* ── Wachtlijst voor een iPhone-versie ─────────────────────────────────────
   Staat binnen het paarse vak, met een gestreepte lijn erboven zodat het een
   eigen blokje is zonder dat er nog een kader omheen hoeft.
   Het formulier wordt door Netlify opgevangen; de site blijft statisch.      */

.wachtlijst {
  border-top: 2px dashed var(--lav-stik);
  padding-top: 22px;
}
.wachtlijst-tekst { margin-bottom: 16px; }
.wachtlijst h3 { font-size: 20px; line-height: 1.2; margin: 0 0 6px; }
.wachtlijst p { margin: 0; }
.wachtlijst form { margin: 0; }

.veldnaam {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.veldrij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.veldrij input[type="email"] {
  /* 170px zodat het veld en de knop ook in het Nederlands, met een langere
     knoptekst, naast elkaar blijven passen in de kolom. */
  flex: 1 1 170px;
  min-width: 0;
  font: inherit;
  font-size: 16px;            /* onder 16px zoomt Safari op de iPhone in */
  color: var(--tekst);
  background: var(--papier);
  border: 1.5px dashed var(--lav-stik);
  border-radius: 999px;
  padding: 9px 16px;
  max-width: 240px;
}
.veldrij input[type="email"]::placeholder { color: #9A939B; }
.veldrij input[type="email"]:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 2px;
  border-color: var(--koraal);
}
/* De knop is normaal een link; als button moet hij zijn eigen randje en
   lettertype kwijt. */
button.knop {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
}

/* ── Bedankpagina na het aanmelden ─────────────────────────────────────── */

.bedankt { padding: clamp(48px, 9vw, 110px) 0 var(--sectie); display: flex; justify-content: center; }
.bedankt-vel {
  background: var(--papier);
  border-radius: 28px;
  padding: 10px;
  max-width: 620px;
  box-shadow: 0 18px 40px -22px rgba(120, 60, 50, .35);
}
.bedankt-vel > div {
  border: 2px dashed var(--roze-stik);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
}
.bedankt h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.bedankt p { margin: 16px 0 0; color: var(--tekst-2); }
.bedankt .knop { margin-top: 28px; }

/* ── Het bolletje wol op de draad ──────────────────────────────────────────
   Staat op dezelfde laag als de draad, dus het schuift netjes achter de
   gekleurde vlakken langs en duikt in de tussenruimtes weer op.
   De plaatsing gebeurt in draad.js; zonder JavaScript blijft het verborgen. */

.bolletje {
  position: absolute;
  top: 0;
  left: 0;
  margin: -15px 0 0 -15px;   /* het middelpunt op de draad, niet de hoek */
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ── Op een telefoon ───────────────────────────────────────────────────────
   Alles wat op een breed scherm links begint, staat op een smal scherm mooier
   gecentreerd: er is dan toch maar één kolom. Lopende tekst van meer dan een
   paar regels blijft links, want gecentreerde alinea's lezen vervelend.
   Het embleem gaat flink terug in formaat, zodat je sneller bij de
   downloadknop bent.                                                        */

@media (max-width: 720px) {
  .hero { text-align: center; }
  .hero-tekst { align-items: center; }
  .hero h1 { max-width: 100%; }
  .lead { max-width: 100%; }
  .knoppen { justify-content: center; }

  .embleem { width: min(230px, 62%); }

  .status-kop { align-items: center; text-align: center; }
  .status-beeld { align-self: center; }

  .status-tekst { text-align: center; }
  .status-tekst p { max-width: 100%; }

  .wachtlijst { text-align: center; }
  .veldnaam { text-align: center; }
  .veldrij { justify-content: center; }
  .veldrij input[type="email"] { max-width: 100%; }

  .kenmerken h2 { max-width: 100%; text-align: center; }

  .privacy-kaart p { max-width: 100%; }

  /* De foto staat op een eigen regel en blijft 340px breed; zonder dit kleeft
     hij aan de linkerkant terwijl de rest gecentreerd staat. */
  .verhaal { justify-content: center; }
  .verhaal-tekst h2 { text-align: center; }

  /* Hetzelfde als bij het verhaal: het schermpje staat dan onder de tekst en
     hoort midden op de regel, niet tegen de linkerrand aan. De opsomming
     blijft wel links uitgelijnd, anders zwemmen de bolletjes. */
  .bouwer { justify-content: center; }
  .bouwer-tekst h2 { text-align: center; }

  .tip { text-align: center; justify-content: center; }
  .tip-tekst { max-width: 100%; }

  .voet { justify-content: center; text-align: center; }
  .voet-links { justify-content: center; }
}