/* Welkomstformulier van het werkboek: één keer je gegevens, daarna staat het werkboek meteen klaar.
   De klasse op <html> (open of dicht, gezet in de head van shell-online.html) bepaalt welk deel je ziet. */

@font-face {
  font-family: "Handwritten";
  src: url("/fonts/missnoteworthy-loose.woff2") format("woff2"), url("/fonts/missnoteworthy-loose-webfont.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}

html.dicht main.werkboek, html.dicht .stapbalk { display: none; }
html.open main.poort { display: none; }

main.poort {
  max-width: 1000px; margin: 40px auto 64px; padding: 0 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start;
  background: none; box-shadow: none;
}
.poort-blad {
  background: var(--paper); padding: 48px 48px 40px;
  box-shadow: 0 1px 2px rgba(50,50,63,.05), 0 14px 40px rgba(50,50,63,.10);
  display: grid; gap: 18px;
}
.hand { font-family: "Handwritten", "Instrument Serif", cursive; font-size: 2.4rem; line-height: 1.1; color: var(--ink); margin-bottom: -6px; }
.poort-blad h1 { font-size: 2.6rem; line-height: 1.05; }
.poort-blad .lede { font-size: 1.1rem; line-height: 1.5; max-width: 34em; }
.poort-blad .lede b { font-weight: 600; }
.poort-blad .klein { font-size: 0.9rem; color: var(--muted); }
.poort-blad .klein a { color: var(--accent); }

#gegevens { display: grid; gap: 16px; margin-top: 8px; }
.velden-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld { display: grid; gap: 6px; }
.veld label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.veld input {
  font: inherit; font-size: 1.05rem; padding: 12px 16px; width: 100%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px;
  caret-color: var(--accent); transition: border-color .15s, box-shadow .15s;
}
.veld input::placeholder { color: var(--taupe); }
.veld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(219,105,51,.18); }
.veld input.mis { border-color: var(--accent); }
.veld-hint { font-size: 0.9rem; color: var(--accent); min-height: 1.3em; }
#gegevens .acties { margin-top: 4px; }

.poort-stappen { padding: 8px 0; display: grid; gap: 14px; }
.poort-stappen .eyebrow { font-size: 12px; }
.poort-stappen ol { list-style: none; padding: 0; margin: 0; }
.poort-stappen li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.poort-stappen li:last-child { border-bottom: 1px solid var(--line); }
.poort-stappen li span { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.poort-stappen .klein { font-size: 0.9rem; color: var(--muted); }

@media (max-width: 860px) {
  main.poort { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .poort-blad { padding: 32px 24px 28px; }
  .hand { font-size: 2rem; }
  .poort-blad h1 { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  .velden-rij { grid-template-columns: 1fr; }
}