/* De online naslag. Mobiel eerst. */

html { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { line-height: 1.55; background: #F5F2EF; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Kop, nagebouwd naar de kop van hannekevanbemmel.nl */
.site-kop {
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
  position: relative; z-index: 20;
  padding: 0 3%;
}
.kop-binnen {
  max-width: 1400px; margin: 0 auto; padding: 0 10px;
  min-height: 100px;
  display: flex; align-items: center; gap: 8px;
}
.kop-binnen .logo { flex: 0 0 21%; }
.kop-binnen .logo img { display: block; width: calc(100% - 18px); max-width: 303px; height: auto; }
.menu { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.menu a {
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px;
  color: #363644; text-decoration: none; white-space: nowrap; padding: 6px 0;
}
.menu a:hover { color: var(--accent); }
.knoppen { display: flex; gap: 8px; align-items: center; margin-left: 12px; }
.siteknop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 12px; font-size: 13px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  text-decoration: none; color: #fff; background: var(--accent); transition: background-color .25s;
}
.siteknop:hover { background: #D86027; color: #fff; }
.werkboekknop { background: var(--ink); }
.werkboekknop svg { color: var(--accent); transition: color .25s; }
.werkboekknop:hover { background: var(--accent); }
.werkboekknop:hover svg { color: #fff; }
.burger { display: none; }
@media (min-width: 1366px) {
  .kop-binnen .logo { flex-basis: 25%; }
  .menu { gap: 10px; }
  .knoppen { margin-left: 24px; }
}
@media (min-width: 1440px) {
  .menu { gap: 16px; }
}
@media (min-width: 1600px) {
  .kop-binnen .logo { flex-basis: 25.5%; }
  .menu a { font-size: 14px; }
}

@media (max-width: 1024px) {
  .site-kop { padding: 0; }
  .kop-binnen { flex-wrap: wrap; padding: 10px 10px 12px; gap: 10px 12px; min-height: 0; }
  .siteknop { padding: 13px 18px; font-size: 14px; }
  .kop-binnen .logo { flex: 0 0 100%; width: 100%; margin: 0 0 4px; padding: 0; }
  .kop-binnen .logo img { width: 303px; max-width: 100%; }
  .burger {
    display: grid; gap: 7px; width: 40px; height: 40px; padding: 8px 0; margin: 0 auto 0 10px;
    background: none; border: 0; cursor: pointer; align-content: center;
  }
  .burger span { display: block; height: 2px; background: var(--ink); }
  .menu {
    display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: #F6F5F4; margin: 8px -10px 0; padding: 8px 10px; margin-left: -10px;
  }
  .menu a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .menu { margin-left: -10px; }
  .menu a:last-child { border-bottom: 0; }
  body.menu-open .menu { display: flex; }
  .knoppen { margin-left: auto; }
}
@media (max-width: 480px) {
  .siteknop { padding: 13px 14px; font-size: 13px; }
}

/* Stappenbalk */
.stapbalk {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.stapbalk-binnen { max-width: 760px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stapbalk-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stapnav a.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.stapnav { display: flex; gap: 4px; }
.stapnav a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--serif); font-size: 19px; line-height: 1;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper);
}
.stapnav a:hover { border-color: var(--accent); color: var(--accent); }

/* De bladzijde: witte pagina op een warme ondergrond, als een opengeslagen boek */
main {
  max-width: 760px; margin: 28px auto 56px; padding: 8px 40px 48px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(50,50,63,.05), 0 14px 40px rgba(50,50,63,.10);
}
@media (max-width: 800px) { main { margin: 16px 12px 40px; padding: 0 20px 40px; } }
@media (max-width: 480px) { main { margin: 0; padding: 0 20px 40px; box-shadow: none; } }

/* Hero */
.hero { padding: 48px 0 32px; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.hero .eyebrow { font-size: 12px; color: var(--accent); }
.hero h1 { font-size: 2.6rem; line-height: 1.05; }
.hero .lede { font-size: 1.15rem; line-height: 1.45; max-width: 32em; }
.hero .welkom { font-size: 0.95rem; color: var(--muted); }
.hero .welkom b { font-weight: 600; color: var(--ink); }
.hero .welkom a { color: var(--accent); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.knop {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 500;
}
.knop.secundair { background: var(--ground); color: var(--ink); }
.knop:hover { background: var(--accent); color: #fff; }

/* Inhoud, zoals de inhoudsopgave van een boek: de basis, de stappen (met nummer en kernzin), de bijlagen */
.overzicht { padding: 28px 0 8px; }
.overzicht > .eyebrow { font-size: 12px; margin-bottom: 8px; }
.overzicht h2 { font-size: 1.3rem; margin: 22px 0 2px; }
.overzicht ol, .overzicht ul { list-style: none; padding: 0; margin: 0; }
.overzicht li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.overzicht ul li { grid-template-columns: 1fr; padding: 10px 0; }
.overzicht li a { color: inherit; text-decoration: none; display: grid; gap: 2px; }
.overzicht li a:hover, .overzicht li a:hover b { color: var(--accent); }
.overzicht .n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
.overzicht b { font-weight: 600; }
.overzicht span.kv { color: var(--muted); font-size: 0.95rem; }

/* Hoofdstukken, stappen en bijlagen. Elk begint met de streep uit de huisstijl in donker (oranje lijn,
   donkere band), over de volle breedte van de bladzijde, zodat de hoofdstukken niet in elkaar overlopen. */
.hoofdstuk, .stap, .bijlage { padding: 0 0 24px; }
.hoofdstuk::before, .stap::before, .bijlage::before {
  content: ""; display: block; height: 18px; margin: 0 -40px 48px;
  background: linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 8px, var(--ink) 8px 100%);
}
@media (max-width: 800px) { .hoofdstuk::before, .stap::before, .bijlage::before { margin-left: -20px; margin-right: -20px; } }

/* Bladeren onderaan elke stap: vorige, volgende en in het midden terug naar het overzicht */
.bladeren { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.bladeren.alleen-overzicht { grid-template-columns: 1fr; justify-items: center; }
.blad { display: grid; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; }
.blad.volgende { text-align: right; }
.blad-richting { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.blad-titel { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; }
.blad:hover .blad-titel { color: var(--accent); }
.bladeren .midden { display: grid; gap: 10px; justify-items: center; align-self: center; }
.bladeren .naar-overzicht { font-size: 0.9rem; padding: 10px 16px; }
.folio { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); font-weight: 600; white-space: nowrap; align-self: center; }
@media (max-width: 600px) {
  .bladeren { grid-template-columns: 1fr; }
  .blad.volgende { text-align: left; }
  .bladeren .midden { order: 2; justify-items: start; margin-top: 8px; }
  .blad.leeg { display: none; }
}
.kop { margin-bottom: 24px; }
.kop .eyebrow { font-size: 12px; margin-bottom: 10px; }
.kop h1 { font-size: 1.9rem; line-height: 1.15; }
.stapkop { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
.stapkop .eyebrow { grid-column: 1 / -1; }
.stapkop .stapnr { font-family: var(--serif); font-size: 64px; line-height: 0.9; color: var(--accent); }

.blok { margin-bottom: 24px; max-width: 62ch; }
.blok > .label { font-size: 12px; margin-bottom: 8px; }
.blok p + p, .blok p + ul, .blok ul + p, .blok p + ol, .blok ol + p, .blok ul + ul { margin-top: 12px; }
.blok li + li { margin-top: 5px; }
.blok h3 { font-size: 1.3rem; margin: 20px 0 8px; }
.blok h3:first-child { margin-top: 0; }
.blok .kader-voorbeeld { border-left: 1px solid var(--line); padding-left: 16px; margin-top: 12px; }
.blok blockquote { margin: 12px 0 0; padding-left: 16px; border-left: 1px solid var(--line); font-style: italic; }
.blok .lees { font-size: 0.95rem; color: var(--muted); }

.letop { padding: 18px 22px 20px; margin: 0 0 24px; max-width: 62ch; }
.letop .label { font-size: 12px; margin-bottom: 6px; }
.letop p + p { margin-top: 8px; }

/* Geen oefeningen online (die staan in het praktijkboek); open plekken voor Hanneke blijven ook onzichtbaar. */
.schrijf, .invullen { display: none; }

.vragen { columns: 1; }

table { font-size: 0.95rem; }
th { padding: 0 12px 8px 0; }
td { padding: 8px 12px 8px 0; }

.casus { margin-bottom: 24px; }
.casus h3 { font-size: 1.3rem; margin-bottom: 8px; }
.casus dl { margin: 0; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; row-gap: 6px; }
.casus dt { font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.casus dd { margin: 0; }

/* De knop van het welkomstformulier is een echte button */
.knop { border: 0; font: inherit; cursor: pointer; }

/* Voet, nagebouwd naar de voet van hannekevanbemmel.nl */
.site-voet { background: #2D2D39; color: #F6F5F4; font-size: 16px; }
.voet-streep { height: 18px; background: url("/werkinstructies/assets/voetstreep.svg") repeat-x; background-size: 111px auto; background-color: #fff; }
.voet-binnen { max-width: 1220px; margin: 0 auto; padding: 100px 0 50px; display: grid; gap: 40px; }
.site-voet .voet-binnen { box-sizing: content-box; padding-left: 3%; padding-right: 3%; }
.voet-kolommen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.voet-naam { font-size: 20px; line-height: 1.5; }
.voet-naam b { font-weight: 600; }
.voet-menu { display: grid; gap: 10px; align-content: start; }
.voet-menu a, .voet-contact a, .voet-onder a { color: #F6F5F4; text-decoration: none; }
.voet-menu a:hover, .voet-contact a:hover, .voet-onder a:hover { color: var(--accent); }
.voet-contact { display: grid; gap: 10px; align-content: start; justify-items: start; }
.voet-contact .linkedin { margin-top: 10px; display: inline-flex; }
.voet-onder { display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 14px; }
.voet-onder .hart { color: #E0245E; }
@media (max-width: 767px) {
  .site-voet .voet-binnen { padding: 50px 5%; gap: 30px; }
  .voet-kolommen { grid-template-columns: 1fr; gap: 30px; }
  .voet-onder { gap: 6px 30px; }
}

@media (max-width: 420px) {
  .stapnav { gap: 3px; }
  .stapnav a { width: 30px; height: 30px; font-size: 17px; }
  .stapbalk-label { display: none; }
}

@media (min-width: 720px) {
  html { font-size: 18px; }
  .hero { padding-top: 72px; }
  .hero h1 { font-size: 3.2rem; }
}