/* Prijzen, Overstappen, Over Morris en Demo aanvragen: de opzet van de
   modulepagina's (module.css), met de pakketkaarten, stappen, vragen, het
   formulier en de makerskaart zoals ze op de homepage staan. Alleen tokens: de
   kleuren volgen het thema van de sectie (nacht boven, ochtend onderaan). */

/* tussenkop binnen een sectie, en een regelbalk die niet op een blok volgt */
.blokkop{font-size:var(--m-tekst-2xl);font-weight:700;margin:var(--m-ruimte-32) 0 var(--m-ruimte-16)}
.regelbalk.los{margin-top:var(--m-ruimte-16)}
.prijsnoot{margin-top:var(--m-ruimte-16);font-size:var(--m-tekst-s);line-height:var(--m-regel-lang);color:var(--stil);max-width:98ch}
.prijsnoot.midden{text-align:center;margin-inline:auto;max-width:78ch}
.tekstlink{font-weight:600;color:var(--tekst);text-decoration:underline;text-underline-offset:3px}
.kop .knoppen .btn{display:inline-flex;align-items:center;min-height:44px}

/* de schakelaar per maand of per jaar staat in betaalkeuze.css (ook op de homepage) */
/* het jaarbedrag heeft centen en is breder: de toelichting staat er dan onder */
.prijskeuze:has([value="jaar"]:checked) small.per-jaar{display:block;flex-basis:100%}

/* ── pakketten: dezelfde kaart als op de homepage ── */
.pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m-ruimte-16);align-items:stretch}
.pakket{position:relative;display:flex;flex-direction:column;gap:var(--m-ruimte-16);min-width:0;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-32) var(--m-ruimte-24)}
.pakket h3{font-size:var(--m-tekst-3xl);font-weight:700}
.pakket .omzet{font-size:var(--m-tekst-m);color:var(--stil);min-height:3.2em}
.pakket .bedrag{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--m-ruimte-6) var(--m-ruimte-10);font-family:var(--f-display);font-weight:800;font-size:var(--m-tekst-6xl);line-height:var(--m-regel-strak);letter-spacing:var(--m-spatie-kop)}
.pakket .bedrag small{font-family:var(--f-body);font-size:var(--m-tekst-l);font-weight:600;color:var(--stil);letter-spacing:0}
/* drie kaarten naast elkaar: het bedrag krimpt mee, zodat €539,10 binnen de kaart blijft */
.pakket .bedrag span{white-space:nowrap}
@container inhoud (min-width:901px){.pakket .bedrag span.per-jaar{font-size:clamp(30px,3.3vw,44px)}}
.pakket .betaalregel{font-size:var(--m-tekst-m);color:var(--stil);margin-top:calc(-1 * var(--m-ruimte-6));min-height:3.2em}
.pakket hr{border:0;border-top:1px solid var(--lijn)}
.pakket ul{list-style:none;display:grid;gap:var(--m-ruimte-10);flex:1;align-content:start}
.pakket li{font-size:var(--m-tekst-l);color:var(--stil);display:flex;gap:var(--m-ruimte-10);align-items:baseline}
.pakket li::before{content:"";flex:none;width:12px;height:7px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg) translateY(-2px)}
.pakket .btn{display:flex;align-items:center;justify-content:center;min-height:46px;text-align:center}
.pakket.uitgelicht{border-color:color-mix(in srgb, var(--amber) 55%, var(--lijn));box-shadow:var(--schaduw-groot);z-index:1}
/* de lichtbundel om het middelste pakket, zoals op de homepage; wie minder
   beweging vraagt, houdt de vaste amber rand */
@property --beamhoek{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes beam{to{--beamhoek:360deg}}
@media (prefers-reduced-motion:no-preference){
  .pakket.uitgelicht{border-color:transparent}
  .pakket.uitgelicht::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:var(--m-ruimte-2);pointer-events:none;
    background:conic-gradient(from var(--beamhoek), var(--lijn) 0deg, var(--lijn) 250deg, var(--teal) 300deg, var(--amber) 350deg, var(--lijn) 360deg);
    -webkit-mask:linear-gradient(var(--tekst) 0 0) content-box, linear-gradient(var(--tekst) 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    animation:beam 6s linear infinite}
}

/* ── alle modules als tegels ── */
.modulelijst{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:var(--m-ruimte-10)}
.modulelijst a{display:flex;align-items:center;gap:var(--m-ruimte-12);min-height:50px;padding:0 var(--m-ruimte-16);background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);
  font-size:var(--m-tekst-l);font-weight:600;transition:border-color var(--m-duur-basis) var(--m-curve),transform var(--m-duur-basis) var(--m-curve)}
section.kader .modulelijst a{background:var(--kaart2)}
.modulelijst a:hover{border-color:var(--stil);transform:translateY(-1px)}
.modulelijst svg{flex:none;width:18px;height:18px;color:var(--amber)}

/* ── kaarten zonder link: wat er meegaat, welke apparaten ── */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--m-ruimte-12)}
.kaarten.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.kaartje{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-20)}
section.kader .kaartje{background:var(--kaart2)}
.kaartje .soort{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--teal);margin-bottom:var(--m-ruimte-10)}
.kaartje h3{font-size:var(--m-tekst-xl);font-weight:700;margin-bottom:var(--m-ruimte-8)}
.kaartje p{font-size:var(--m-tekst-m);color:var(--stil)}
.kaartje p + p{margin-top:var(--m-ruimte-10)}

/* ── stappen: de stapkaart van de homepage ── */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m-ruimte-16)}
.stapkaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-20)}
section.kader .stapkaart{background:var(--kaart2)}
.stapkaart .nr{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber-tekst);margin-bottom:var(--m-ruimte-10)}
.stapkaart h3{font-size:var(--m-tekst-xl);font-weight:700;margin-bottom:var(--m-ruimte-8)}
.stapkaart p{font-size:var(--m-tekst-m);color:var(--stil)}
.stappen.drie{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── het verhaal op Over Morris: kop links, tekst rechts ── */
.hoofdstuk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--m-ruimte-16) var(--m-ruimte-48);padding:var(--m-ruimte-32) 0;border-top:1px solid var(--lijn)}
.hoofdstuk:first-child{border-top:0;padding-top:0}
.hoofdstuk:last-child{padding-bottom:0}
.hoofdstuk h2{font-size:clamp(21px,2.3vw,27px);font-weight:700;line-height:var(--m-regel-kop);margin-top:var(--m-ruimte-12)}
.hoofdstuk p{font-size:var(--m-tekst-xl);color:var(--tekst2);max-width:62ch}
.hoofdstuk p + p{margin-top:var(--m-ruimte-16)}
.hoofdstuk .ondertekening{margin-top:var(--m-ruimte-24);padding-top:var(--m-ruimte-16);border-top:1px solid var(--lijn);font-size:var(--m-tekst-m);color:var(--stil)}

/* ── de makers: dezelfde kaart als op de homepage ── */
.makers{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24);box-shadow:var(--schaduw-groot)}
.makers .wie{display:flex;align-items:center;gap:var(--m-ruimte-12)}
.makers .wie + .wie{margin-top:var(--m-ruimte-12)}
.makers .wie i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:var(--m-radius-rond);background:var(--amber);color:var(--knop-tekst);
  font-style:normal;font-family:var(--f-display);font-weight:800}
.makers .wie b{display:block;font-size:var(--m-tekst-l)}
.makers .wie span{font-size:var(--m-tekst-s);color:var(--stil)}
.makers .voetnoot{margin-top:var(--m-ruimte-20);padding-top:var(--m-ruimte-16);border-top:1px solid var(--lijn-zacht);font-size:var(--m-tekst-s);color:var(--stil)}

/* ── demoformulier: de velden van de homepage, in een kaart naast de kop ── */
.kop .kop-grid.boven{align-items:start}
.kop .lede + .kenmerken{margin-top:var(--m-ruimte-20)}
.aanvraag{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24);box-shadow:var(--schaduw-groot)}
.aanvraag h2{font-size:var(--m-tekst-3xl);font-weight:700;margin-bottom:var(--m-ruimte-6)}
.aanvraag > p{font-size:var(--m-tekst-l);color:var(--stil);margin-bottom:var(--m-ruimte-20)}
.demo{display:grid;gap:var(--m-ruimte-16)}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-16)}
.veld{display:grid;gap:var(--m-ruimte-8);min-width:0}
.veld.breed{grid-column:1/-1}
.veld > span{font-size:var(--m-tekst-s);font-weight:600;color:var(--stil)}
.veld > span i{font-style:normal;color:var(--amber)}
/* 16px: op een iPhone zoomt het scherm in op een kleiner invoerveld */
.demo input,.demo select,.demo textarea{width:100%;min-width:0;min-height:46px;font:inherit;font-size:var(--m-tekst-xl);color:var(--tekst);
  background:var(--vlak);border:1px solid var(--stil);border-radius:var(--m-radius-s);padding:var(--m-ruimte-12) var(--m-ruimte-12)}
.demo textarea{resize:vertical;min-height:96px}
.demo input::placeholder,.demo textarea::placeholder{color:var(--stil);opacity:1}
.demo [aria-invalid="true"]{border:2px solid var(--rood)}
.verstuurrij{display:flex;align-items:center;gap:var(--m-ruimte-16);flex-wrap:wrap}
.verstuurrij .btn-primary{border:0;cursor:pointer;font-family:var(--f-body);min-height:46px}
.verstuurrij .btn-primary[disabled]{opacity:.6;cursor:progress}
.kleinelettertjes{flex:1;min-width:190px;font-size:var(--m-tekst-s);color:var(--stil)}
/* de klassen die site-paginas.js zelf zet: de melding en het bedankje */
.demo-form-message{font-size:var(--m-tekst-l);color:var(--tekst2);min-height:1.5em}
.demo-form-message.fout{color:var(--rood)}
.demo.verzonden{display:block}
.demo-success-title{font-size:var(--m-tekst-3xl);font-weight:700;margin-bottom:var(--m-ruimte-10)}
.demo.verzonden p{font-size:var(--m-tekst-xl);color:var(--stil)}

/* ── vergelijking met losse systemen ── */
.vergelijk{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);overflow:hidden}
.vergelijk table{width:100%;border-collapse:collapse;font-size:var(--m-tekst-l)}
.vergelijk th,.vergelijk td{padding:var(--m-ruimte-16) var(--m-ruimte-16);text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn-zacht)}
.vergelijk thead th{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--stil);
  background:var(--kaart2);border-bottom:1px solid var(--lijn);white-space:nowrap}
.vergelijk tbody th{font-weight:600;font-size:var(--m-tekst-l);white-space:nowrap}
.vergelijk .cel{display:block}
.vergelijk td b{display:block;font-weight:600}
.vergelijk td small{display:block;font-size:var(--m-tekst-s);font-weight:400;color:var(--stil)}
.vergelijk .num{text-align:right;white-space:nowrap;font-weight:600}
.vergelijk .num small{display:inline}
.vergelijk .morris{background:color-mix(in srgb, var(--amber) 9%, var(--kaart))}
.vergelijk td.morris{color:var(--amber-tekst)}
.vergelijk thead .morris{background:color-mix(in srgb, var(--amber) 16%, var(--kaart2));color:var(--amber-tekst)}
.vergelijk .voordeel{color:var(--stil);min-width:25ch}
.vergelijk .rest th,.vergelijk .rest td{border-bottom:0}
.vergelijk tfoot th,.vergelijk tfoot td{border-top:1px solid var(--lijn);border-bottom:0;background:var(--kaart2);font-weight:700;vertical-align:middle}
.vergelijk tfoot .morris{background:color-mix(in srgb, var(--amber) 16%, var(--kaart2))}
.vergelijk tfoot .num{font-family:var(--f-display);font-size:var(--m-tekst-3xl);letter-spacing:var(--m-spatie-kop)}
.vergelijk tfoot .num small{display:block;font-family:var(--f-body);font-size:var(--m-tekst-s);font-weight:600;letter-spacing:0;color:inherit}
.vergelijk tfoot .voordeel{color:var(--tekst);font-weight:600}

/* tegels met een lang woord in de kop ("aanspreekpunt"): breder dan de
   standaard-kpi, zodat het woord op een telefoon binnen de tegel blijft */
.kpis.ruim{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}

/* per pakket een voorbeeldzaak */
.zaken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m-ruimte-12)}
.zaak{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-20)}
.zaak h4{font-size:var(--m-tekst-xl);font-weight:700}
.zaak .wie{font-size:var(--m-tekst-m);color:var(--stil);margin:var(--m-ruimte-4) 0 var(--m-ruimte-12)}
.zaak dl{display:grid;gap:var(--m-ruimte-8)}
.zaak dl div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--m-ruimte-12);font-size:var(--m-tekst-l)}
.zaak dt{color:var(--stil)}
.zaak dd{font-weight:600;white-space:nowrap}
.zaak .verschil{margin-top:var(--m-ruimte-12);padding-top:var(--m-ruimte-12);border-top:1px solid var(--lijn-zacht);font-size:var(--m-tekst-m);font-weight:600;color:var(--amber-tekst)}

/* ── vragen: zoals op de homepage ── */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--lijn);padding:var(--m-ruimte-4) 0}
.faq details:first-of-type{border-top:1px solid var(--lijn)}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--m-tekst-xl);padding:var(--m-ruimte-16) var(--m-ruimte-32) var(--m-ruimte-16) 0;list-style:none;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--amber);font-size:var(--m-tekst-3xl);font-weight:600;transition:transform var(--m-duur-basis)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--m-ruimte-16);font-size:var(--m-tekst-l);color:var(--stil);max-width:64ch}
.faq details a{text-decoration:underline;text-underline-offset:3px}

@container inhoud (max-width:1000px){
  .stappen{grid-template-columns:1fr 1fr}
  .kaarten.drie{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
@container inhoud (max-width:900px){
  .hoofdstuk{grid-template-columns:minmax(0,1fr);padding:var(--m-ruimte-32) 0}
  .stappen.drie{grid-template-columns:minmax(0,1fr)}
  .pakketten,.zaken{grid-template-columns:minmax(0,1fr)}
  .pakket .omzet,.pakket .betaalregel{min-height:0}
  /* de tabel wordt per onderdeel een kaart, met de kolomkop voor elke waarde */
  .vergelijk{background:transparent;border:0;border-radius:0;overflow:visible}
  .vergelijk table,.vergelijk tbody,.vergelijk tfoot,.vergelijk tr,.vergelijk th,.vergelijk td{display:block}
  .vergelijk thead{position:absolute;width:1px;height:1px;margin:calc(-1 * var(--m-ruimte-2));overflow:hidden;clip:rect(0,0,0,0)}
  .vergelijk tr{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-16) var(--m-ruimte-16) var(--m-ruimte-12);margin-bottom:var(--m-ruimte-12)}
  .vergelijk tfoot tr{background:var(--kaart2);margin-bottom:0}
  .vergelijk th,.vergelijk td,.vergelijk tfoot th,.vergelijk tfoot td,.vergelijk .morris,.vergelijk tfoot .morris{padding:0;border:0;background:transparent}
  .vergelijk tbody th,.vergelijk tfoot th{font-size:var(--m-tekst-xl);white-space:normal;margin-bottom:var(--m-ruimte-8)}
  .vergelijk td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:var(--m-ruimte-12);align-items:baseline;padding:var(--m-ruimte-8) 0;border-top:1px solid var(--lijn-zacht);text-align:left}
  .vergelijk td::before{content:attr(data-kop);font-family:var(--f-body);font-size:var(--m-tekst-s);font-weight:600;letter-spacing:0;color:var(--stil)}
  .vergelijk .num{text-align:left;white-space:normal}
  .vergelijk .voordeel{min-width:0}
  .vergelijk tfoot .num{font-size:var(--m-tekst-2xl)}
}
@container inhoud (max-width:599px){
  .stappen{grid-template-columns:minmax(0,1fr)}
  .veldrij{grid-template-columns:minmax(0,1fr)}
  .aanvraag,.makers{padding:var(--m-ruimte-20) var(--m-ruimte-20)}
  .pakket{padding:var(--m-ruimte-24) var(--m-ruimte-20)}
  .pakket .bedrag{font-size:var(--m-tekst-5xl)}
  .pakket .bedrag span.per-jaar{font-size:var(--m-tekst-5xl)}
  .regelbalk.los{flex-direction:column;gap:var(--m-ruimte-4)}
  .modulelijst{grid-template-columns:1fr 1fr}
  .modulelijst a{padding:0 var(--m-ruimte-12);font-size:var(--m-tekst-m)}
}