/* Freedom & Flow – huisstijl (zie docs/huisstijl-moodboard.png).
   Bosgroen #234034 · Dennengroen #42665A · Saliegroen #A4B09A · Zand #D9C8B0 · Koper #BB734C
   Kleuren aanpassen? Doe dat hier bovenaan. */
@font-face { font-family: "Lexend Deca"; src: url("/fonts/LexendDeca-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend Deca"; src: url("/fonts/LexendDeca-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend Deca"; src: url("/fonts/LexendDeca-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --achtergrond: #f6f3ef;
  --kaart: #fcfaf7;
  --inkt: #234034; /* bosgroen */
  --zacht: #42665a; /* dennengroen */
  --salie: #a4b09a; /* saliegroen */
  --accent: #bb734c; /* koper */
  --lijn: #d9c8b0; /* zand */
  --licht: #e8ece3;
  --fout: #a8442a;
  --goed: #2f6b4f;
  --rond: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Lexend Deca", system-ui, sans-serif;
  background: var(--achtergrond);
  color: var(--inkt);
  line-height: 1.55;
  font-size: 16px;
}
h1, h2, h3 { line-height: 1.25; font-weight: 600; margin: 0 0 0.5rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; margin-top: 0.5rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

main { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.1rem 3rem; min-height: 70vh; }
section { margin: 2.5rem 0; }
.smal { max-width: 460px; margin: 0 auto; }
.midden { text-align: center; }
.zacht { color: var(--zacht); }
.groot { font-size: 1.1rem; }

.testbalk { background: var(--accent); color: #fff; text-align: center; font-size: 0.8rem; padding: 0.35rem 1rem; }
.testbalk a { color: #fff; }

/* Kop en menu */
.kop { display: flex; align-items: center; gap: 1rem; max-width: 1040px; margin: 0 auto; padding: 0.9rem 1.1rem; position: relative; }
.logo { display: block; line-height: 0; }
.logo img { height: 66px; width: auto; }
@media (max-width: 680px) { .logo img { height: 50px; } .bovenregel { letter-spacing: 0.1em; font-size: 0.75rem; } }
.kop nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.kop nav a { white-space: nowrap; }
.kop nav a { text-decoration: none; color: var(--zacht); }
.kop nav a.aan, .kop nav a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; }
.kop nav a.knop { color: #fff; text-decoration: none; }
.menuknop { display: none; margin-left: auto; background: none; border: 1px solid var(--lijn); border-radius: 10px; padding: 0.3rem 0.7rem; font-size: 1.2rem; cursor: pointer; }
/* Iets smallere schermen: menu compacter, zodat alles op één regel blijft */
@media (min-width: 841px) and (max-width: 1080px) {
  .kop nav { gap: 0.85rem; font-size: 0.95rem; }
  .logo img { height: 56px; }
}
@media (max-width: 840px) {
  .menuknop { display: block; }
  .kop nav { display: none; position: absolute; top: 100%; left: 0.8rem; right: 0.8rem; flex-direction: column; align-items: stretch; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 0.8rem; gap: 0.4rem; z-index: 10; box-shadow: 0 10px 30px rgba(35, 64, 52, 0.12); }
  .kop nav.open { display: flex; }
  .kop nav a, .kop nav .tekstknop { padding: 0.6rem 0.4rem; text-align: left; }
}

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--inkt); color: #fff; border: 2px solid var(--inkt); border-radius: 14px; padding: 0.75rem 1.4rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.1s, opacity 0.15s; }
.knop:hover { transform: translateY(-1px); }
.knop:disabled { opacity: 0.5; cursor: default; transform: none; }
.knop.licht { background: #fff; color: var(--inkt); border-color: var(--lijn); }
.knop.klein { padding: 0.5rem 1rem; font-size: 0.92rem; border-radius: 12px; }
.knop.vol { width: 100%; margin-top: 0.5rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }
.knoppen.kolom { flex-direction: column; align-items: stretch; }
.tekstknop { background: none; border: none; color: var(--zacht); text-decoration: underline; cursor: pointer; padding: 0.5rem 0; }
.label { display: inline-block; background: var(--licht); color: var(--zacht); font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; }

/* Kaarten */
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 18px; padding: 1.4rem; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.kaarten .kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.kaarten .kaart p { flex: 1; }
.icoon { color: var(--inkt); background: var(--licht); border-radius: 50%; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 0.4rem; }
.icoon svg { width: 38px; height: 38px; }
.sier { display: block; color: var(--salie); margin-bottom: 0.2rem; }
.kaarten .kaart:nth-child(2) .icoon { color: var(--accent); }

/* Home */
.hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: center; margin-top: 1rem; }
.hero h1 { font-size: 2.3rem; }
.bovenregel { color: var(--accent); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; }
.hero-beeld { width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  .hero-beeld { max-width: 360px; }
}
.stappen { padding-left: 1.3rem; display: grid; gap: 0.8rem; max-width: 680px; }
.stappen li::marker { color: var(--accent); font-weight: 600; }
h2 { color: var(--inkt); }
.kaart { box-shadow: 0 1px 0 rgba(35, 64, 52, 0.03); }

/* Formulieren */
.formulier h1 { margin-top: 0.8rem; }
label { display: block; font-weight: 500; margin: 0.9rem 0; font-size: 0.95rem; }
input { display: block; width: 100%; margin-top: 0.35rem; font: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--lijn); border-radius: 12px; background: #fff; color: var(--inkt); }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tabs { display: flex; background: var(--licht); border-radius: 12px; padding: 4px; gap: 4px; }
.tabs button { flex: 1; border: none; background: none; padding: 0.55rem; border-radius: 9px; cursor: pointer; color: var(--zacht); font-weight: 500; }
.tabs button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }

.melding { border-radius: 12px; padding: 0.75rem 0.95rem; margin: 0.9rem 0; font-size: 0.93rem; background: var(--licht); }
.melding.fout { background: #f6e3dc; color: var(--fout); }
.melding.goed { background: #e1efe6; color: var(--goed); }

/* Vragenlijst */
.vragenlijst { max-width: 760px; margin: 0 auto; }
.stapregel { text-align: center; color: var(--zacht); font-size: 0.85rem; margin-bottom: 0.4rem; }
.voortgang { display: flex; gap: 5px; margin-bottom: 0.8rem; }
.voortgang button { flex: 1; height: 7px; border: none; border-radius: 4px; background: var(--lijn); cursor: pointer; padding: 0; }
.voortgang button.aan { background: var(--salie); }
.voortgang button.aan:last-of-type, .voortgang button.aan:has(+ button:not(.aan)) { background: var(--accent); }
.vraag { margin-top: 1.4rem; }
.vraag-titel { font-weight: 600; margin-bottom: 0.2rem; }
.vraag-uitleg { color: var(--zacht); font-size: 0.9rem; margin-bottom: 0.3rem; }
.blok { margin-top: 1.8rem; }
.keuzes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.keuze { background: #fff; border: 2px solid var(--lijn); border-radius: 12px; padding: 0.5rem 0.8rem; font-size: 0.92rem; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.keuze:hover { border-color: var(--accent); }
.keuze.aan { background: var(--licht); border-color: var(--accent); }
.keuze.aan::before { content: "✓ "; color: var(--accent); font-weight: 600; }
.keuze.breed { padding: 0.55rem 1.3rem; }
.keuze.dicht { opacity: 0.4; cursor: not-allowed; }
.keuze.dicht:hover { border-color: var(--lijn); }
.eigen { display: flex; gap: 0.5rem; margin-top: 0.7rem; max-width: 420px; }
.eigen input { margin: 0; padding: 0.5rem 0.8rem; font-size: 0.92rem; }
/* Teller: hoeveel past er nog op de printpagina */
.teller { margin: 1rem 0 0.4rem; padding: 0.65rem 0.9rem; border-radius: 12px; background: var(--kaart); border: 1px solid var(--lijn); font-size: 0.9rem; display: grid; gap: 0.35rem; }
.teller.plak { position: sticky; top: 0.5rem; z-index: 2; box-shadow: 0 4px 14px rgba(35, 64, 52, 0.08); }
.teller small { color: var(--zacht); font-size: 0.8rem; }
.teller-balk { height: 6px; border-radius: 3px; background: var(--licht); overflow: hidden; }
.teller-balk span { display: block; height: 100%; background: var(--salie); border-radius: 3px; transition: width 0.2s; }
.teller.vol .teller-balk span { background: var(--accent); }
.teller.te-vol { background: #f6e3dc; border-color: var(--fout); color: var(--fout); }
.teller.te-vol .teller-balk span { background: var(--fout); }
.ruimte { margin-top: 1.2rem; padding: 0.7rem 0.95rem; border-radius: 12px; border: 1px dashed var(--accent); font-size: 0.92rem; position: sticky; top: 0.5rem; background: var(--kaart); z-index: 2; }
.ruimte.te-vol { background: #f6e3dc; color: var(--fout); border-style: solid; }
.navigatie { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.vul { flex: 1; }
.themas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: 1fr; gap: 0.7rem; margin-top: 1rem; }
@media (max-width: 420px) { .themas { grid-template-columns: 1fr 1fr; } }
.thema { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; height: 100%; width: 100%; text-align: left; background: #fff; border: 2px solid var(--lijn); border-radius: 16px; padding: 0.45rem 0.45rem 0.6rem; cursor: pointer; font: inherit; color: var(--inkt); }
.thema.aan { border-color: var(--accent); background: var(--licht); }
.thema img { display: block; flex: none; width: 100%; height: auto; aspect-ratio: 414 / 585; object-fit: cover; object-position: top; border-radius: 10px; }
.thema-leeg { display: flex; align-items: center; justify-content: center; background: var(--licht); color: var(--zacht); font-size: 0.85rem; }
.thema-naam { display: block; font-weight: 600; font-size: 0.92rem; padding: 0.5rem 0.2rem 0; line-height: 1.3; }
.thema-tekst { display: block; font-size: 0.78rem; color: var(--zacht); padding: 0.15rem 0.2rem 0; line-height: 1.35; white-space: normal; }

/* Mijn planner */
.lijst { list-style: none; padding: 0; margin: 0.3rem 0 1rem; width: 100%; }
.lijst li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--lijn); font-size: 0.93rem; }
.lijst li span { color: var(--zacht); }

.voet { text-align: center; color: var(--zacht); font-size: 0.85rem; padding: 2.2rem 1rem 1.5rem; border-top: 1px solid var(--lijn); }
.voet img { margin: 0 auto 0.6rem; }
.voet .tagline { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; color: var(--inkt); margin-bottom: 0.4rem; }
.voet p { margin: 0 0 0.3rem; }
.foutlijst { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.foutlijst .tekstknop { color: var(--fout); padding: 0.15rem 0; text-align: left; }
.download { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; text-align: left; }
.download small { font-size: 0.8rem; margin-bottom: 0.5rem; }
.links { text-align: left; margin-top: 1.2rem; }

/* Over de planner */
.over { max-width: 900px; margin: 0 auto; }
.over-kop { max-width: 720px; margin-top: 1rem; }
.over-kop h1 { font-size: 2.1rem; }
.verhaal { max-width: 720px; }
.verhaal h2 { margin-top: 1.6rem; }
.citaat { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--licht); border-radius: 16px; padding: 1rem 1.2rem; margin: 1.2rem 0; color: var(--inkt); }
.citaat svg { flex: none; color: var(--zacht); }
.citaat p { margin: 0; font-style: italic; }
.onderdelen { display: grid; gap: 1.6rem; margin-top: 1.2rem; }
.onderdeel { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: center; }
.onderdeel img { width: 100%; height: auto; }
.onderdeel h3 { margin: 0.5rem 0 0.4rem; }
.onderdeel:nth-child(even) { grid-template-columns: 1fr 300px; }
.onderdeel:nth-child(even) img { order: 2; }
@media (max-width: 640px) {
  .onderdeel, .onderdeel:nth-child(even) { grid-template-columns: 1fr; gap: 0.4rem; }
  .onderdeel img, .onderdeel:nth-child(even) img { order: 0; max-width: 320px; margin: 0 auto; }
  .over-kop h1 { font-size: 1.7rem; }
}
.slechte-dag { max-width: 720px; margin: 2.5rem auto; background: var(--kaart); }
.slechte-dag .afsluiter { font-weight: 600; color: var(--inkt); }
.verhaal-kort { display: grid; grid-template-columns: 1fr 180px; gap: 1.5rem; align-items: center; }
.verhaal-kort img { border-radius: 10px; box-shadow: 0 10px 28px rgba(35, 64, 52, 0.14); transform: rotate(-2deg); }
@media (max-width: 640px) { .verhaal-kort { grid-template-columns: 1fr; } .verhaal-kort img { max-width: 180px; margin: 0 auto; } }
.uitleg-ritme { max-width: 680px; margin-top: 1.2rem; background: var(--licht); border: none; }
.uitleg-ritme h3 { margin-bottom: 0.4rem; }
.uitleg-ritme p:last-child { margin-bottom: 0; }

/* ================= Digitale planner ================= */
.p-app { --p-rond: 18px; background: var(--p-bg); color: var(--p-inkt); margin: -1.5rem -1.1rem -3rem; padding: 1.4rem 1.1rem 3rem; min-height: 80vh; border-radius: 0; }
@media (min-width: 900px) { .p-app { margin: 0 -1rem; border-radius: 24px; padding: 1.8rem 2rem 2.5rem; } }
.p-kopregel { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.p-kopregel h1 { margin: 0; font-size: 1.6rem; color: var(--p-inkt); }
.p-stijlnaam { margin: 0 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-zacht); }
.p-tabs { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.2rem; padding-bottom: 0.2rem; }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tabs button { flex: 0 0 auto; display: flex; align-items: center; gap: 0.45rem; background: var(--p-kaart); border: 1px solid var(--p-lijn); color: var(--p-zacht); border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.9rem; cursor: pointer; }
.p-tabs button svg { width: 18px; height: 18px; }
@media (min-width: 761px) { .p-tabs { flex-wrap: wrap; overflow: visible; } }
.p-tabs button.aan { background: var(--p-pri); border-color: var(--p-pri); color: var(--p-oppri); font-weight: 600; }
@media (max-width: 760px) {
  .p-app { padding-bottom: 6.5rem; }
  .p-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom)); background: var(--p-kaart); border-top: 1px solid var(--p-lijn); gap: 0; box-shadow: 0 -6px 20px rgba(0,0,0,0.06); }
  .p-tabs button { flex-direction: column; gap: 0.15rem; border: none; background: none; border-radius: 12px; padding: 0.35rem 0.2rem; min-width: 72px; font-size: 0.68rem; }
  .p-tabs button svg { width: 22px; height: 22px; }
  .p-tabs button.aan { background: var(--p-licht); color: var(--p-pri); }
  .p-app ~ * , body:has(.p-app) .voet { display: none; }
}
.p-melding { background: var(--p-licht); border-radius: 14px; padding: 0.7rem 0.95rem; margin-bottom: 1rem; font-size: 0.92rem; }
.p-kaart { background: var(--p-kaart); border: 1px solid var(--p-lijn); border-radius: var(--p-rond); padding: 1.1rem 1.15rem; margin: 0 0 1rem; }
.p-titel { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--p-pri); }
.p-titel-icoon { display: inline-flex; align-items: center; gap: 0.5rem; }
.p-dagdeelicoon { display: inline-block; width: 30px; height: 30px; background: var(--p-pri); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.p-zacht { color: var(--p-zacht); }
.p-zacht.klein, .p-hint { font-size: 0.82rem; }
.p-hint { color: var(--p-zacht); margin: 0.4rem 0 0.6rem; }
.p-intro { margin-bottom: 1rem; }
.p-nadruk { color: var(--p-pri); font-weight: 600; }
.p-laden { color: var(--p-zacht); text-align: center; padding: 2rem 0; }
.p-opslag { font-size: 0.75rem; color: var(--p-zacht); text-align: right; margin: 0.3rem 0 0; min-height: 1em; }
.p-opslag.fout { color: #b53a3a; }
.p-vink { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.32rem 0; font-size: 0.95rem; cursor: pointer; }
.p-vink input { margin-top: 0.22rem; width: 18px; height: 18px; flex: none; accent-color: var(--p-pri); }
.p-tekstvak { width: 100%; font: inherit; font-size: 0.92rem; padding: 0.6rem 0.75rem; border: 1px solid var(--p-lijn); border-radius: 12px; background: var(--p-bg); color: var(--p-inkt); resize: vertical; margin: 0.3rem 0 0.5rem; }
.p-tekstvak:focus, .p-toevoegen input:focus, .p-zoeken input:focus { outline: 2px solid var(--p-pri); outline-offset: 1px; }
.p-knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; background: var(--p-pri); color: var(--p-oppri); border: 1.5px solid var(--p-pri); border-radius: 12px; padding: 0.55rem 1rem; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.p-knop.licht { background: transparent; color: var(--p-pri); }
.p-knop.klein { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.p-knop.breed { width: 100%; margin-top: 0.8rem; padding: 0.75rem; }
.p-knop:disabled { opacity: 0.5; cursor: default; }
.p-tekstknop { background: none; border: none; color: var(--p-pri); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.p-rond { background: var(--p-kaart); border: 1px solid var(--p-lijn); border-radius: 12px; padding: 0.45rem; cursor: pointer; color: var(--p-inkt); display: grid; place-items: center; }
.p-datumnav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.p-datumlabel { flex: 1; background: none; border: none; font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--p-inkt); cursor: pointer; }
.p-datumlabel::first-letter { text-transform: uppercase; }
.p-datumkies { font: inherit; font-size: 0.8rem; padding: 0.3rem; border: 1px solid var(--p-lijn); border-radius: 10px; background: var(--p-kaart); color: var(--p-inkt); max-width: 132px; }

/* Vandaag */
.p-dagraster { display: grid; gap: 1rem; }
@media (min-width: 860px) { .p-dagraster { grid-template-columns: 1.35fr 1fr; align-items: start; } .p-dag-basis { order: 2; } .p-dag-planning { order: 1; } }
.p-dagraster .p-kaart { margin-bottom: 0; }
.p-dag-basis { display: grid; gap: 1rem; }
.p-markeerbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.p-pen { width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; }
.p-pen.aan { outline: 3px solid var(--p-inkt); outline-offset: 1px; }
.p-tijden { position: relative; }
.p-tijdrij { display: flex; align-items: center; border-bottom: 1px dotted var(--p-lijn); }
.p-tijd { width: 44px; flex: none; font-size: 0.75rem; color: var(--p-zacht); }
.p-tijd.heel { font-weight: 700; }
.p-tijdruimte { width: 30px; flex: none; }
.p-tijdrij input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; font: inherit; font-size: 0.92rem; color: var(--p-inkt); outline: none; }
.p-markeerstrook { position: absolute; left: 44px; right: 0; top: 0; touch-action: none; cursor: crosshair; z-index: 3; }
.p-markeringen { position: absolute; left: 44px; width: 60px; top: 0; pointer-events: none; z-index: 4; }
.p-blok { position: absolute; left: 10px; width: 3px; border-radius: 3px; }
.p-blok.voorbeeld { opacity: 0.6; }
.p-blok-kap { position: absolute; left: 0; width: 12px; height: 3px; border-radius: 3px; }
.p-blok-kap.boven { top: 0; }
.p-blok-kap.onder { bottom: 0; }
.p-greep { position: absolute; left: -8px; width: 19px; pointer-events: auto; touch-action: none; }
.p-greep.midden { top: 8px; bottom: 8px; cursor: grab; }
.p-greep.boven { top: -8px; height: 16px; cursor: ns-resize; }
.p-greep.onder { bottom: -8px; height: 16px; cursor: ns-resize; }
.p-blok-weg { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 18px; background: #ffffffee; border: 1px solid; border-radius: 50%; font-size: 10px; pointer-events: auto; cursor: pointer; padding: 0; z-index: 5; }

/* Check-in */
.p-tijdkies { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 0.8rem; }
.p-tijdkies input { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--p-lijn); border-radius: 10px; background: var(--p-bg); color: var(--p-inkt); }
.p-uitkomst { background: var(--p-licht); border-radius: 14px; border-left: 6px solid; padding: 0.8rem 0.95rem; margin-bottom: 1rem; font-size: 0.92rem; }
.p-uitkomst p { margin: 0.2rem 0 0; }
.p-uitkomst-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 500; }
.p-label { color: #fff; border-radius: 10px; padding: 0.15rem 0.6rem; font-size: 0.8rem; font-weight: 600; }
.p-verdeling { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 0.6rem 0; }
.p-niveau { display: flex; gap: 0.8rem; align-items: center; border: 1px solid var(--p-lijn); border-left: 6px solid; border-radius: 14px; padding: 0.75rem 0.9rem; margin-bottom: 0.7rem; }
.p-niveau-tekst { flex: 1; min-width: 0; }
.p-niveau-kop { margin: 0 0 0.25rem; font-size: 0.9rem; }
.p-niveau-beeld { flex: none; width: clamp(64px, 18vw, 110px); height: auto; object-fit: contain; }
.p-historie { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0; font-size: 0.88rem; margin: 0; }
.p-historie i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }

/* Week */
.p-weektabel-wrap { overflow-x: auto; margin-bottom: 0.9rem; }
.p-weektabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.p-weektabel th { font-weight: 400; font-size: 0.75rem; color: var(--p-zacht); padding: 0.3rem 0.15rem; width: 34px; }
.p-weektabel th.links { text-align: left; font-weight: 600; font-size: 0.88rem; color: var(--p-pri); width: auto; }
.p-weektabel td { text-align: center; padding: 0.3rem 0.15rem; border-top: 1px dotted var(--p-lijn); }
.p-weektabel td.links { text-align: left; padding-right: 0.5rem; }
.p-weektabel input { width: 18px; height: 18px; accent-color: var(--p-pri); }
.p-gevoel { display: flex; justify-content: space-between; max-width: 360px; margin: 0.3rem 0 1rem; }
.p-gevoel button { font-size: 1.9rem; background: none; border: none; border-radius: 14px; padding: 0.2rem 0.35rem; cursor: pointer; }
.p-gevoel button.aan { background: var(--p-licht); }
.p-gevoel button.uit { opacity: 0.45; }
.p-vraag p { margin: 0.4rem 0 0; font-size: 0.92rem; }

/* Lijsten */
.p-toevoegen { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.p-toevoegen input { flex: 1; font: inherit; font-size: 0.92rem; padding: 0.55rem 0.75rem; border: 1px solid var(--p-lijn); border-radius: 12px; background: var(--p-bg); color: var(--p-inkt); }
.p-toevoegen.klein input { padding: 0.4rem 0.6rem; font-size: 0.88rem; }
.p-lijstregel { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px dotted var(--p-lijn); font-size: 0.94rem; }
.p-lijstregel input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--p-pri); flex: none; }
.p-lijstregel span { flex: 1; }
.p-lijstregel.klaar span { text-decoration: line-through; opacity: 0.5; }
.p-weg { background: none; border: none; color: var(--p-zacht); cursor: pointer; padding: 0.15rem; }
.p-twee { display: grid; gap: 1rem; }
@media (min-width: 760px) { .p-twee { grid-template-columns: 1fr 1fr; align-items: start; } .p-twee .p-kaart { margin-bottom: 0; } }

/* Mijn basis */
.p-basis { max-width: 560px; }
.p-regel { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0; }
.p-regel svg { color: var(--p-pri); width: 16px; height: 16px; flex: none; }
.p-basis-slot { text-align: center; font-style: italic; color: var(--p-zacht); margin: 1.2rem 0; }
.p-slechtedag { background: var(--p-licht); border-radius: 14px; padding: 0.8rem 1rem; font-size: 0.92rem; }
.p-slechtedag p { margin: 0.3rem 0 0; }

/* Review */
.p-keuzetegels { display: grid; gap: 0.5rem; }
.p-keuzetegels button { text-align: left; font: inherit; font-size: 0.95rem; padding: 0.8rem 0.95rem; background: var(--p-bg); border: 2px solid var(--p-lijn); border-radius: 14px; cursor: pointer; color: var(--p-inkt); }
.p-keuzetegels button.aan { border-color: var(--p-pri); background: var(--p-licht); }

/* Zoeken */
.p-zoeken { position: relative; display: flex; align-items: center; min-width: min(100%, 280px); }
.p-zoeken svg { position: absolute; left: 0.7rem; color: var(--p-zacht); }
.p-zoeken input { width: 100%; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.8rem 0.5rem 2.2rem; border: 1px solid var(--p-lijn); border-radius: 12px; background: var(--p-kaart); color: var(--p-inkt); }
.p-zoekresultaten { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--p-kaart); border: 1px solid var(--p-lijn); border-radius: 14px; padding: 0.4rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-height: 320px; overflow-y: auto; }
.p-zoekresultaten p { margin: 0.4rem; font-size: 0.88rem; }
.p-zoekresultaten button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 10px; padding: 0.45rem 0.55rem; font: inherit; font-size: 0.88rem; cursor: pointer; color: var(--p-inkt); }
.p-zoekresultaten button:hover { background: var(--p-licht); }
.p-zoekresultaten small { display: block; color: var(--p-zacht); font-size: 0.74rem; }
.p-zoekresultaten small::first-letter { text-transform: uppercase; }

/* Account, privacy, toestemming */
.toestemming { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.85rem; line-height: 1.45; background: var(--licht); border-radius: 12px; padding: 0.7rem 0.8rem; margin: 1rem 0; }
.toestemming input { width: 18px; height: 18px; margin: 0.15rem 0 0; flex: none; accent-color: var(--inkt); }
.smal > h1 { margin: 1rem 0; }
.smal .kaart { margin-bottom: 1rem; }
.kaart.gevaar { border-color: #e2b7a8; }
.knop.gevaar { background: var(--fout); border-color: var(--fout); color: #fff; }
.bevestig { background: #f6e3dc; border-radius: 12px; padding: 0.8rem 0.9rem; }
.klein-tekst { font-size: 0.85rem; margin-top: 0.8rem; }
.tekstpagina { max-width: 720px; margin: 0 auto; }
.tekstpagina h1 { margin-top: 1rem; }
.tekstpagina h2 { margin-top: 1.8rem; font-size: 1.15rem; }
.tekstpagina ul { padding-left: 1.2rem; }
.tekstpagina li { margin-bottom: 0.4rem; }
.voet-links a { color: var(--zacht); }

/* Laten drukken */
.drukken { max-width: 980px; margin: 0 auto; }
.drukken-kop { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem; align-items: center; margin-top: 1rem; }
.drukken-kop h1 { font-size: 2rem; }
.drukken-lijst { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.drukken-lijst li::marker { color: var(--accent); }
@media (max-width: 760px) { .drukken-kop { grid-template-columns: 1fr; } .drukken-kop h1 { font-size: 1.6rem; } }
.boek { position: relative; width: min(100%, 300px); margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(35, 64, 52, 0.22)); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.boek canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.boek-leeg { aspect-ratio: 595 / 842; display: grid; place-items: center; background: var(--licht); border-radius: 6px; color: var(--zacht); font-size: 0.9rem; text-align: center; padding: 1rem; }
.voorbeelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (max-width: 420px) { .voorbeelden { grid-template-columns: 1fr 1fr; gap: 0.7rem; } }
.voorbeeld { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.2rem; background: none; border: none; padding: 0; text-align: left; cursor: zoom-in; font: inherit; color: var(--inkt); }
.voorbeeld-blad { position: relative; display: block; overflow: hidden; border-radius: 8px; box-shadow: 0 6px 18px rgba(35, 64, 52, 0.14); background: var(--licht); aspect-ratio: 595 / 842; }
.voorbeeld-canvas { display: block; width: 100%; height: auto; }
.voorbeeld-laden { display: block; width: 100%; height: 100%; background: linear-gradient(100deg, var(--licht) 30%, #fff 50%, var(--licht) 70%) 0 0 / 300% 100%; animation: laden 1.4s infinite linear; }
@keyframes laden { to { background-position: -150% 0; } }
.voorbeeld-titel { font-weight: 600; font-size: 0.88rem; margin-top: 0.35rem; }
.voorbeeld-wanneer { font-size: 0.76rem; color: var(--zacht); }
.drukken canvas { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.drukken.verborgen .voorbeelden canvas, .drukken.verborgen .vergroot canvas { filter: brightness(0); }
.verborgen-melding { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 60; margin: 0; padding: 0.7rem 1.1rem; border-radius: 999px; background: #2d2a27; color: #fff; font-size: 0.9rem; text-align: center; width: max-content; max-width: calc(100vw - 2rem); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
@media print {
  .drukken .boek, .drukken .voorbeelden, .drukken .vergroot { display: none !important; }
}
.bestellen { max-width: 620px; margin: 2rem auto; }
.vergroot { position: fixed; inset: 0; z-index: 50; background: rgba(20, 30, 25, 0.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1rem; user-select: none; -webkit-user-select: none; }
.vergroot-blad { position: relative; border-radius: 8px; overflow: hidden; }
.vergroot-blad canvas { display: block; width: min(700px, calc(100vw - 2rem), calc((100vh - 9rem) * 0.707)); height: auto; }
.vergroot-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; }

/* Kopen: digitale planner, zelf printen, laten drukken */
.kopen { max-width: 1080px; margin: 0 auto; }
.kopen > .groot { max-width: 680px; }
.kopen-opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; align-items: start; }
.optie { display: flex; flex-direction: column; gap: 0.55rem; position: relative; }
.optie h2 { margin: 0; }
.optie.uitgelicht { border: 2px solid var(--inkt); box-shadow: 0 14px 32px rgba(35, 64, 52, 0.12); }
.optie-label { position: absolute; top: -0.8rem; left: 1.2rem; margin: 0; background: var(--inkt); color: #fff; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.65rem; border-radius: 999px; }
.prijs { font-size: 1.7rem; font-weight: 600; margin: 0; }
.prijs span { font-size: 0.9rem; font-weight: 400; color: var(--zacht); }
.vinkjes { list-style: none; padding: 0; margin: 0.2rem 0 0.4rem; display: grid; gap: 0.35rem; }
.vinkjes li { padding-left: 1.6rem; position: relative; line-height: 1.4; }
.vinkjes li::before { content: "✓"; position: absolute; left: 0; color: var(--inkt); font-weight: 700; }
.optie .toestemming { margin: 0.3rem 0; }
.optie .knop { align-self: stretch; text-align: center; }
.herroepen { border-top: 1px solid var(--lijn); margin-top: 1.1rem; padding-top: 0.9rem; }
.testercode { margin-top: 1.4rem; max-width: 640px; }
.code-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.code-form input { flex: 1 1 180px; text-transform: uppercase; letter-spacing: 0.05em; }