/* site.css -- what only wantzel.com has, on top of illustrative.css (shared look with florisknol).
   The structure of the site: websites/metadata/wantzel-site-plan.md (internal). 04-10-2026 */

/* the one button in the menu: the conversion, always in view; never more than this one in the header */
.menu ul { flex-wrap: nowrap; }
.menu .menu-knop { margin-left: auto; }
.menu .menu-knop .knop { margin: 0; padding: .45rem 1rem; font-size: .95rem; min-width: 0; color: #fff; border: 2.5px solid var(--inkt); font-weight: 800; }
.menu .menu-knop .knop:hover { border-color: var(--inkt); color: #fff; }

/* the footer is the map of the site */
.voet-kaart { display: grid; grid-template-columns: repeat(4, minmax(0, 12rem)); gap: 1rem 2.5rem; margin: .4rem 0 1.4rem; }
.voet-kaart ul { list-style: none; margin: 0; padding: 0; }
.voet-kaart li { margin: 0 0 .35rem; }
.voet-kaart a { color: var(--inkt); text-decoration: none; }
.voet-kaart a:hover { text-decoration: underline; text-decoration-color: var(--koraal); }
.voet-kop { font: 800 .8rem/1.2 var(--tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-zacht); margin: 0 0 .5rem !important; }
@media (max-width: 600px) { .voet-kaart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hero: the core message, one button and one quiet way further */
.held .knoppen { margin-top: 1.2rem; }
.held .onder-knop { font-size: .95rem; color: var(--inkt-zacht); margin: .8rem 0 0; }

/* who it is for: three modes side by side, quiet rows without cards */
.modi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 1.2rem 0 1.8rem; padding: 0; list-style: none; }
.modi li { margin: 0; }
.modi .modus { display: inline-block; font: 800 .85rem/1 var(--tekst); border: 2px solid var(--inkt); border-radius: 999px; padding: .35rem .8rem; margin-bottom: .6rem; }
.modi li:nth-child(1) .modus { background: #e5efe1; }
.modi li:nth-child(2) .modus { background: #e3eef7; }
.modi li:nth-child(3) .modus { background: #fcf2d3; }
.modi h3 { font: 800 1.2rem/1.3 var(--tekst); margin: 0 0 .4rem; }
.modi p { margin: 0; }
@media (max-width: 760px) { .modi { grid-template-columns: minmax(0, 1fr); } }

/* everything in it: groups of promises, each a short checked list -- the width shows it is complete */
.alles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.5rem; margin: 1.4rem 0 1rem; }
.alles h3 { font: 800 1.1rem/1.3 var(--tekst); margin: 0 0 .6rem; display: flex; align-items: center; gap: .55rem; }
.alles h3::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--inkt); background: var(--stip, var(--boter)); flex: 0 0 auto; }
.alles > div:nth-child(1) { --stip: #b9d3b0; }
.alles > div:nth-child(2) { --stip: #f6c3a5; }
.alles > div:nth-child(3) { --stip: #b8d4ea; }
.alles > div:nth-child(4) { --stip: #f7df9a; }
.alles > div:nth-child(5) { --stip: #d9d1ee; }
.alles > div:nth-child(6) { --stip: #e07a5f; }
.alles .vinkjes { margin: 0; }
.alles .vinkjes li { font-size: .97rem; }
.samen { max-width: 46rem; font-size: 1.05rem; }
@media (max-width: 900px) { .alles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .alles { grid-template-columns: minmax(0, 1fr); } }

/* the books: a way in, not a till -- a cover and two sentences */
.boeken-band { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1.2rem 2rem; align-items: center; margin: 2.5rem 0; }
.boeken-band img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 8px 22px rgba(52, 50, 74, .22); }
.boeken-band h2 { margin-top: 0; }
@media (max-width: 600px) { .boeken-band { grid-template-columns: 6.5rem minmax(0, 1fr); } }

/* the closing block: price, what is in it, and the form */
.afsluiter .prijs { font-size: 1.5rem; margin: .2rem 0 .6rem; }
.afsluiter .voordelen { margin: .4rem 0 1.2rem; padding-left: 1.2rem; line-height: 1.7; }

@media (max-width: 1080px) { .menu .menu-knop { margin-left: 0; } }

/* the steps of a story carry an h3 (the section has the h2): the same size the h2 had */
.verhaal:not(.usps) .stap h3 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--tekst); margin: .2rem 0 .6rem; }

/* pricing (04-10-2026) */
.prijs-groot, .held .prijs-groot { font-size: 1.9rem; line-height: 1.3; margin: .2rem 0 .8rem; }
.prijs-groot b { font-weight: 800; }
.prijsdelen { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2.5rem; }
.prijsdelen li { border-left: 4px solid var(--boter); padding: .1rem 0 .1rem .9rem; }
.prijsdelen li:nth-child(2) { border-color: #f6c3a5; }
.prijsdelen li:nth-child(3) { border-color: #b8d4ea; }
.prijsdelen li:nth-child(4) { border-color: #b9d3b0; }
.prijsdelen li:nth-child(5) { border-color: #d9d1ee; }
.prijsdelen li:nth-child(6) { border-color: #e07a5f; }
.prijsdelen b { display: block; font-weight: 800; margin-bottom: .2rem; }
.prijsdelen span { color: var(--inkt-zacht); }
.tweekolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.vragenlijst { max-width: 46rem; margin: 1rem 0 0; }
.vragenlijst dt { font-weight: 800; margin: 1.1rem 0 .3rem; }
.vragenlijst dd { margin: 0; }
@media (max-width: 760px) { .prijsdelen, .tweekolom { grid-template-columns: minmax(0, 1fr); } }

/* a story of steps without drawings: one column, the numbers carry the rhythm */
.verhaal.tekst .stap { grid-template-columns: minmax(0, 46rem); padding: 1.2rem 0; }
.verhaal.tekst .stap .vinkjes { margin-top: .6rem; }

/* read next: at most two related pages at the end of a page (the plan's button rule) */
.verder-lijst { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.verder-lijst a { display: block; text-decoration: none; color: var(--inkt); border-left: 4px solid var(--koraal); padding: .2rem 0 .2rem .9rem; }
.verder-lijst a:hover b { text-decoration: underline; text-decoration-color: var(--koraal); }
.verder-lijst b { display: block; font-weight: 800; }
.verder-lijst span { color: var(--inkt-zacht); }
@media (max-width: 600px) { .verder-lijst { grid-template-columns: minmax(0, 1fr); } }
.alles .groep-link { display: inline-block; margin: .5rem 0 0 1.8rem; font-weight: 700; font-size: .95rem; }
.alles .groep-link::after { content: " \2192"; }

/* a cut-out of the studio (one panel, not the whole window): narrower, with a plain frame */
.smal-echt { max-width: 46rem; margin-left: 0 !important; }
.smal-echt .plaat { border-radius: 10px; }
.echt-paar.dialogen { max-width: 46rem; align-items: start; }
/* on a cut-out the label sits under the picture, so it hides no button of the studio */
.smal-echt a.zoom { position: relative; display: block; padding-bottom: 2.3rem; }
.smal-echt a.zoom::after { right: 0 !important; bottom: 0 !important; }