/* Zonsom, ontwerp stap 4: indeling van de schermen. Bouwt op /tokens.css en onderdelen.css;
   kleuren, letters en ruimte komen daar vandaan. Telefoon eerst; vanaf 1100px een eigen indeling per pagina. */
/* --k-lijn is de kleur van de haarlijn: een alias van --zs-haarkleur (stap 3 splitste de naam --zs-lijn, die kleur en dikte tegelijk was). */
:root { --k-lijn: var(--zs-haarkleur); }
.zs-kaart { border-left: var(--zs-haar) solid var(--k-lijn); border-right: var(--zs-haar) solid var(--k-lijn); border-bottom: var(--zs-haar) solid var(--k-lijn); }
.zs-grens { border-top: var(--zs-haar) solid var(--k-lijn); border-right: var(--zs-haar) solid var(--k-lijn); border-bottom: var(--zs-haar) solid var(--k-lijn); }
.zs-grens.sterk { border-color: var(--zs-oker); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; min-height: 100vh; }
img { max-width: 100%; height: auto; }
.vis-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--zs-inkt); color: var(--zs-opinkt); padding: var(--zs-r-3) var(--zs-r-4); }
.skip:focus { left: 8px; }
a { overflow-wrap: anywhere; }
code { font-size: var(--zs-maat-1); color: var(--zs-zacht); overflow-wrap: anywhere; }

/* Logo in licht en donker: de schakelaar (data-theme) wint van het toestel. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-licht { display: none; } :root:not([data-theme="light"]) .lg.lg-donker { display: block; } }
:root[data-theme="dark"] .lg-licht { display: none; }
:root[data-theme="dark"] .lg.lg-donker { display: block; }
:root[data-theme="light"] 
/* Kop */
.kop { border-bottom: 2px solid var(--zs-inkt); background: var(--zs-papier); }
.kop-in { max-width: var(--zs-breed-max); margin: 0 auto; padding: var(--zs-r-3) var(--zs-r-4); display: flex; align-items: center; justify-content: space-between; gap: var(--zs-r-4); position: relative; }
.merk { display: inline-flex; min-height: 44px; align-items: center; }
.lg { height: 40px; width: auto; display: block; }
.lg.lg-donker { display: none; }
.nav-breed { display: none; }
.menu summary { list-style: none; display: inline-flex; gap: var(--zs-r-2); align-items: center; min-height: 48px; padding: 0 var(--zs-r-3); border: var(--zs-lijn) solid var(--zs-inkt); border-radius: var(--zs-hoek); font-weight: 700; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.menu nav { position: absolute; right: var(--zs-r-4); top: calc(100% - 4px); z-index: 10; background: var(--zs-blad); border: var(--zs-lijn) solid var(--zs-inkt); display: grid; min-width: 15rem; }
.menu nav a { padding: var(--zs-r-3) var(--zs-r-4); min-height: 48px; display: flex; align-items: center; text-decoration: none; border-bottom: var(--zs-haar) solid var(--k-lijn); }
.menu nav a:last-child { border-bottom: 0; }
.nav-breed a { text-decoration: none; padding: var(--zs-r-2) var(--zs-r-3); min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; font-size: var(--zs-maat-2); border-bottom: 3px solid transparent; }
.nav-breed a[aria-current] { border-bottom-color: var(--zs-rood); }
.nav-breed a:hover { border-bottom-color: var(--zs-inkt); }

/* Pagina: telefoon een kolom; de kolomwrappers verdwijnen zodat de volgorde van data-o geldt. */
.pagina { max-width: var(--zs-breed-max); margin: 0 auto; padding: var(--zs-r-5) var(--zs-r-4) var(--zs-r-7); display: grid; gap: var(--zs-r-5); grid-template-columns: minmax(0, 1fr); outline: 0; }
.pagina > *, .links > *, .rechts > * { min-width: 0; }
.links, .rechts, .links > .plak { display: contents; }
.pagina > .kopblok { order: 0; }
.kopblok { display: grid; gap: var(--zs-r-3); }
.kopblok h1 { font-size: var(--zs-maat-5); line-height: 1.12; text-wrap: balance; }
.lead { font-size: var(--zs-maat-2); line-height: 1.4; max-width: 44em; }
.pagina h2 { font-size: var(--zs-maat-4); }
.pagina h3 { font-size: var(--zs-maat-4); display: flex; align-items: center; gap: var(--zs-r-2); }
.tussenkop { font-size: var(--zs-maat-5); }
/* volgorde op de telefoon */
.invoer { order: 10; } .antwoord { order: 20; } .balkenkaart { order: 30; } .garantie { order: 35; } .offerte { order: 40; }
.rekenwerk { order: 50; } .zs-grens { order: 60; } .ander { order: 85; } .advies { order: 95; } .toestem { order: 99; }
[data-o="5"] { order: 5; } [data-o="34"] { order: 34; } [data-o="35"] { order: 35; } [data-o="40"] { order: 40; } [data-o="45"] { order: 45; } [data-o="55"] { order: 55; } [data-o="72"] { order: 72; } [data-o="74"] { order: 74; } [data-o="76"] { order: 76; } [data-o="85"] { order: 85; } [data-o="88"] { order: 88; }
.pagina > .zs-advertentie, .pagina > .toestem { order: 95; }
.pagina > .toestem { order: 99; }
.span2 { grid-column: auto; }

/* Kaarten wat compacter op de telefoon */
.pagina .zs-kaart { padding: var(--zs-r-4); gap: var(--zs-r-3); }
.pagina .zs-grens { padding: var(--zs-r-3) var(--zs-r-4); }
.zs-kaart.kort p, .zs-kaart p { max-width: 44em; }
.zs-kaart > .zs-bron, .zs-bron { overflow-wrap: anywhere; }
.antwoord { border-top-width: var(--zs-bovenrand); }
.antwoord .zin, .antwoord .zs-oordeel .zin { font: 700 var(--zs-maat-5)/1.15 var(--zs-kop); text-wrap: balance; }
.zin-klein { font-weight: 600; }
.zs-oordeel .reden { font-size: var(--zs-maat-3); }
.zs-getal .groot.lang { font-size: 64px; }
.zs-getal .groot.inkt { color: var(--zs-inkt); }
.zs-getal .groot { font-size: 76px; }
.zs-getal .eenheid { font-size: var(--zs-maat-3); }
.tweegetallen { display: grid; gap: var(--zs-r-4); grid-template-columns: minmax(0, 1fr); border-top: var(--zs-haar) solid var(--k-lijn); padding-top: var(--zs-r-3); }
.tweegetallen .groot { font-size: 60px; }
.overschrijft, .eerlijk, .stempelvrij, .bewaardbalk { display: flex; gap: var(--zs-r-3); align-items: flex-start; font-size: var(--zs-maat-2); line-height: 1.4; }
.overschrijft { color: var(--zs-groen); font-weight: 600; }
.eerlijk { border-left: var(--zs-bovenrand) solid var(--zs-oker); padding-left: var(--zs-r-3); }
.eerlijk .zs-icoon, .overschrijft .zs-icoon, .stempelvrij .zs-icoon, .bewaardbalk .zs-icoon { flex: none; }
.stempelvrij { border: 2px dashed var(--zs-rand); padding: var(--zs-r-3); background: var(--zs-vlak); }
.antwoord.voorbeeld .groot { color: var(--zs-zacht); }
.antwoord.gedempt .groot { color: var(--zs-zacht); }
.bewaardbalk { padding: var(--zs-r-3) var(--zs-r-4); background: var(--zs-vlak); border: var(--zs-haar) solid var(--k-lijn); }
.zs-balken .staaf.neutraal { background: var(--zs-grafiek-neutraal); }
.zs-balken .kop { align-items: baseline; font-size: var(--zs-maat-2); font-weight: 600; flex-wrap: wrap; }
.zs-balken .kop b { font-size: var(--zs-maat-3); }
.zs-balken .spoor { height: 28px; background: var(--zs-vlak); }
.zs-balken .staaf { position: absolute; left: 0; top: 0; bottom: 0; }
.zs-balken .uitleg { margin-top: var(--zs-r-1); }
.zs-balken .slecht { color: var(--zs-rood); }
.zs-balken .verschil { border-top: var(--zs-lijn) solid var(--zs-inkt); padding-top: var(--zs-r-2); }
.kort ul.lijst, ul.lijst, ol.lijst { margin: 0; padding-left: 1.2em; display: grid; gap: var(--zs-r-2); font-size: var(--zs-maat-3); line-height: 1.4; }
.kort .lijst { font-size: var(--zs-maat-2); }
.knoplink { font: inherit; font-weight: 700; background: none; border: 0; padding: var(--zs-r-2) 0; color: var(--zs-inkt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.oker { color: var(--zs-oker); }
.vink { display: flex; gap: var(--zs-r-3); align-items: center; min-height: 48px; font-weight: 600; font-size: var(--zs-maat-2); cursor: pointer; }
.vink input { width: 28px; height: 28px; accent-color: var(--zs-inkt); flex: none; }

/* Uitklap "Zo rekenen we" */
.uitklap { border: var(--zs-lijn) solid var(--zs-inkt); background: var(--zs-blad); border-radius: var(--zs-hoek); }
.uitklap summary { display: flex; gap: var(--zs-r-3); align-items: center; min-height: var(--zs-aanraak); padding: 0 var(--zs-r-4); font: 700 var(--zs-maat-3)/1.2 var(--zs-kop); cursor: pointer; list-style: none; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after { content: ""; margin-left: auto; width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }
.uitklap[open] summary::after { transform: rotate(225deg); }
.uitklap-in { padding: 0 var(--zs-r-4) var(--zs-r-4); display: grid; gap: var(--zs-r-3); }
.zs-formule li span { overflow-wrap: anywhere; }

/* Keuze en velden */
.keuze { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zs-r-2); }
.keuze .zs-knop { min-height: var(--zs-aanraak); height: 100%; padding: var(--zs-r-2) var(--zs-r-3); font-size: var(--zs-maat-2); line-height: 1.2; }
.keuze .zs-knop[aria-pressed="true"] { background: var(--zs-inkt); color: var(--zs-opinkt); border-color: var(--zs-inkt); }
.velden2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--zs-r-3); align-items: start; }
.zs-veld label { font-size: var(--zs-maat-2); line-height: 1.2; }
.zs-veld .stap { width: 44px; min-height: var(--zs-aanraak); flex: none; }
.zs-veld input { padding: 0 var(--zs-r-3); min-width: 0; width: 100%; }
.zs-veld .eenheid { min-width: 0; font-size: var(--zs-maat-2); }
.zs-veld.aandacht input { border-color: var(--zs-rood); border-width: 3px; }
.zs-veld.aandacht label::after { content: " (nog invullen)"; color: var(--zs-rood); font-weight: 700; }
.voorbeeldveld input { font-style: italic; color: var(--zs-zacht); border-style: dashed; }
.meldingen:empty { display: none; }
.meldingen { display: grid; gap: var(--zs-r-2); }
.offerte .velden2, .velden2.onder { align-items: end; }
.velden2.onder { border-top: var(--zs-haar) solid var(--k-lijn); padding-top: var(--zs-r-3); }
.offerte h2 { font-size: var(--zs-maat-3); }

/* Leeg, laden, fout */
.leeg .zs-staat { gap: var(--zs-r-3); }
.plaatrij { display: flex; align-items: center; gap: var(--zs-r-4); }
.plaatrij svg.plaat { width: 80px; flex: none; }
.plaatrij .zin { font: 700 var(--zs-maat-4)/1.15 var(--zs-kop); }
.zs-staat svg.plaat { width: 150px; max-width: 100%; }
.grootsymbool .zs-icoon { width: 56px; height: 56px; }
.skelet { display: grid; gap: var(--zs-r-4); }
.skel { display: block; background: var(--zs-vlak); border: var(--zs-haar) solid var(--k-lijn); border-radius: var(--zs-hoek); animation: puls 1.6s ease-in-out infinite; max-width: 100%; }
@keyframes puls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Links en rijen */
.rijen { display: grid; gap: var(--zs-r-3); grid-template-columns: minmax(0, 1fr); }
.rijkaart { display: flex; align-items: center; gap: var(--zs-r-4); padding: var(--zs-r-3) var(--zs-r-4); min-height: 64px; background: var(--zs-blad); border: var(--zs-haar) solid var(--k-lijn); border-left: var(--zs-bovenrand) solid var(--zs-rood); text-decoration: none; border-radius: var(--zs-hoek); }
.rijkaart span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rijkaart small { font-size: var(--zs-maat-2); color: var(--zs-zacht); }
.rijkaart .pijl { transform: rotate(90deg); }
.knoppenrij { display: grid; gap: var(--zs-r-3); grid-template-columns: minmax(0, 1fr); }
.toestem { border-top-color: var(--zs-inkt); }
.toestem h3 { font-size: var(--zs-maat-3); }
.zs-advertentie.advies { min-height: 250px; }

/* Rooster per aantal panelen */
.rooster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--zs-r-2); }
.rooster a { display: grid; place-items: center; min-height: 48px; border: var(--zs-lijn) solid var(--zs-inkt); text-decoration: none; font-weight: 700; border-radius: var(--zs-hoek); }
.rooster a[aria-current] { background: var(--zs-inkt); color: var(--zs-opinkt); }

/* Aannames (Wim) */
.aannames { display: grid; gap: var(--zs-r-4); grid-template-columns: minmax(0, 1fr); }
.aanname { border-top-color: var(--zs-inkt); }
.aanname.anders { border-top-color: var(--zs-oker); }
.aanname .toel { font-size: var(--zs-maat-2); line-height: 1.4; }
.aanname h3 { font-size: var(--zs-maat-3); }
.live h2 { font-size: var(--zs-maat-3); }
.livebalk { display: flex; justify-content: space-between; gap: var(--zs-r-3); align-items: baseline; order: 98; position: sticky; bottom: 0; background: var(--zs-inkt); color: var(--zs-opinkt); padding: var(--zs-r-3) var(--zs-r-4); margin: 0 calc(var(--zs-r-4) * -1); font-size: var(--zs-maat-2); font-weight: 600; z-index: 4; }
.livebalk b { font: 700 var(--zs-maat-4)/1 var(--zs-kop); white-space: nowrap; }

/* Tabel */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--zs-maat-2); }
.tabel th, .tabel td { text-align: left; padding: var(--zs-r-2) var(--zs-r-3) var(--zs-r-2) 0; border-bottom: var(--zs-haar) solid var(--k-lijn); }
.tabel caption { text-align: left; padding-bottom: var(--zs-r-2); }
.tabel thead th { border-bottom: var(--zs-lijn) solid var(--zs-inkt); }

/* Uitleg */
.plaatje { margin: 0; display: grid; gap: var(--zs-r-2); background: var(--zs-blad); border: var(--zs-haar) solid var(--k-lijn); padding: var(--zs-r-3); }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zs-r-4); counter-reset: s; }
.stappen li { align-content: start; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--zs-r-3); align-items: start; padding: var(--zs-r-4); background: var(--zs-blad); border: var(--zs-haar) solid var(--k-lijn); border-left: var(--zs-bovenrand) solid var(--zs-rood); }
.stappen .zs-icoon { width: 40px; height: 40px; }
.stappen p { margin-top: var(--zs-r-1); }
.taken { list-style: none; padding: 0; display: grid; gap: var(--zs-r-3); }
.taak { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--zs-r-3); padding: var(--zs-r-4); background: var(--zs-blad); border: var(--zs-haar) solid var(--k-lijn); border-left: var(--zs-bovenrand) solid var(--zs-rood); cursor: pointer; }
.taak input { width: 28px; height: 28px; accent-color: var(--zs-inkt); margin-top: 2px; }
.taak span { display: grid; gap: var(--zs-r-1); }
.uitleg-regel { font-size: var(--zs-maat-2); line-height: 1.4; }
.groot-lijst li { margin-bottom: var(--zs-r-1); }

/* Bewaren en doorsturen */
.bewaarlijst { display: grid; gap: var(--zs-r-2); margin: 0; }
.bewaarlijst div { display: flex; justify-content: space-between; gap: var(--zs-r-3); border-bottom: 2px dotted var(--zs-rand); padding-bottom: var(--zs-r-2); }
.bewaarlijst dt { color: var(--zs-zacht); font-size: var(--zs-maat-2); }
.bewaarlijst dd { margin: 0; font: 700 var(--zs-maat-4)/1.2 var(--zs-kop); }
.status.ok { border-top-color: var(--zs-groen); }
.chat { display: grid; gap: var(--zs-r-2); }
.bel { background: var(--zs-blad); border: var(--zs-haar) solid var(--k-lijn); border-left: var(--zs-bovenrand) solid var(--zs-groen); overflow: hidden; max-width: 30em; }
.bel img { display: block; width: 100%; }
.bel-tekst { display: grid; gap: var(--zs-r-2); padding: var(--zs-r-3) var(--zs-r-4) var(--zs-r-4); font-size: var(--zs-maat-2); line-height: 1.4; }
.adres { color: var(--zs-zacht); }
#deellink { font-size: var(--zs-maat-2); font-weight: 600; }

/* Overzicht */
.loop ol { margin: 0; padding-left: 1.5em; display: grid; gap: var(--zs-r-2); font-size: var(--zs-maat-2); }
.loop li code { display: block; }
.alle { list-style: none; padding: 0; font-size: var(--zs-maat-2); }
.thema { border: 0; padding: 0; margin: 0; display: grid; gap: var(--zs-r-1); }
.thema label { display: flex; gap: var(--zs-r-3); align-items: center; min-height: 44px; font-weight: 600; }
.thema input { width: 24px; height: 24px; accent-color: var(--zs-inkt); }

/* Voet */
.voet { max-width: none; border-top: 2px solid var(--zs-inkt); padding: var(--zs-r-5) 0 var(--zs-r-7); margin-top: var(--zs-r-5); }
.voet { display: block; }
.voet-in { width: 100%; max-width: var(--zs-breed-max); margin: 0 auto; padding: 0 var(--zs-r-4); display: grid; gap: var(--zs-r-3); }
.voet p { max-width: 54em; }
.voet-links { display: flex; flex-wrap: wrap; gap: 0 var(--zs-r-5); }
.voet-links a { min-height: 44px; display: inline-flex; align-items: center; }
.ontwerpregel { color: var(--zs-zacht); }

/* Geen JavaScript */
noscript .pagina { padding-top: var(--zs-r-5); }

/* Groot lettertype (simulatie van "grote tekst" in het toestel) */
html.groot { --zs-maat-1: 22px; --zs-maat-2: 26px; --zs-maat-3: 30px; --zs-maat-4: 34px; --zs-maat-5: 38px; --zs-maat-6: 48px; --zs-aanraak: 64px; }
html.groot .zs-getal .groot { font-size: 64px; }
html.groot .zs-getal .groot.lang { font-size: 52px; }
html.groot .keuze { grid-template-columns: minmax(0, 1fr); }
html.groot .velden2 { grid-template-columns: minmax(0, 1fr); }
html.groot .rooster { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Smal: heel kleine schermen en groot lettertype */
@media (max-width: 359px) { .velden2 { grid-template-columns: minmax(0, 1fr); } .zs-getal .groot { font-size: 60px; } }

/* Tablet en breder dan de telefoon, nog een kolom maar ruimer */
@media (min-width: 640px) and (max-width: 1099px) {
  .pagina { padding-inline: var(--zs-r-6); }
  .kop-in { padding-inline: var(--zs-r-6); }
  .voet-in { padding-inline: var(--zs-r-6); }
  .knoppenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rijen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aannames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tweegetallen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Breed scherm: twee kolommen, links de invoer (vast), rechts het antwoord in twee kolommen. */
@media (min-width: 1100px) {
  .kop-in { padding: var(--zs-r-3) var(--zs-r-7); }
  .nav-breed { display: flex; gap: var(--zs-r-3); }
  .menu { display: none; }
  .pagina.twee { grid-template-columns: var(--zs-kolom-invoer) minmax(0, 1fr); column-gap: var(--zs-r-7); row-gap: var(--zs-r-5); padding: var(--zs-r-6) var(--zs-r-7) var(--zs-r-8); align-items: start; }
  .pagina.twee > .kopblok { grid-column: 1 / -1; max-width: 62rem; }
  .pagina.twee .kopblok h1 { font-size: var(--zs-maat-6); }
  .lead { font-size: var(--zs-maat-3); }
  .links { display: grid; gap: var(--zs-r-5); align-content: start; align-self: start; }
  /* Zo rekenen we: de kolom heeft de hoogte van de rij (hij kan er niet uit schuiven); de wikkel erin kleeft alleen als hij op het scherm past (Z.plak). */
  .s-rekenen .links { align-self: stretch; }
  .s-rekenen .links > .plak { display: grid; gap: var(--zs-r-5); align-content: start; }
  .s-rekenen .links > .plak.kleeft { position: sticky; top: var(--zs-r-5); }
  /* Past de kolom niet op het scherm, dan blijft alleen de uitkomst staan terwijl je langs de aannames scrolt (proef 6, Wim op 1440). */
  .s-rekenen .links { grid-template-rows: minmax(0, 1fr); }
  .s-rekenen .links > .plak:not(.kleeft) { display: block; }
  .s-rekenen .links > .plak:not(.kleeft) > * + * { margin-top: var(--zs-r-5); }
  .s-rekenen .links > .plak:not(.kleeft) > .live { position: sticky; top: var(--zs-r-5); z-index: 2; }
  .rechts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zs-r-5) var(--zs-r-6); align-items: start; align-content: start; grid-auto-flow: dense; }
  .rechts .span2, .rechts .rekenwerk, .rechts .aannames, .rechts .onzeker, .rechts .antwoord.leeg { grid-column: 1 / -1; }
  .rechts .rekenwerk:empty { display: none; }
  .pagina.twee > .zs-advertentie, .pagina.twee > .toestem, .pagina.twee > .ander { grid-column: 1 / -1; }
  .pagina .zs-kaart { padding: var(--zs-r-5); gap: var(--zs-r-4); }
  .pagina .zs-grens { padding: var(--zs-r-4) var(--zs-r-5); }
  .antwoord .zin, .antwoord .zs-oordeel .zin { font-size: var(--zs-maat-6); }
  .zs-getal .groot { font-size: 96px; }
  .zs-getal .groot.lang { font-size: 76px; }
  /* De twee grote getallen staan onder elkaar: het antwoordvak is op 1440 maar ~360 px breed (proef 4: overlap). */
  .tweegetallen .groot, .tweegetallen .groot.lang { font-size: 64px; }
  .rijen { grid-template-columns: minmax(0, 1fr); }
  .s-x404 .rijen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-x404 .zs-staat svg.plaat { width: 300px; }
  .aannames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toestem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--zs-r-7); }
  .toestem h3, .toestem p { grid-column: 1; }
  .toestem .knoppenrij { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(2, auto); }
  .rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .livebalk { display: none; }
  .zs-advertentie.advies { min-height: 120px; }
  .rechts .kort.breed2 { grid-column: 1 / -1; }
  .voet-in { padding: 0 var(--zs-r-7); }
  .stappen { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stappen li { grid-template-columns: minmax(0, 1fr); }
  .taken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina.s-overzicht .rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina.s-bewaar .rechts, .pagina.s-over .rechts, .pagina.s-regelen .rechts { align-content: start; }
}
/* Heel breed (1920): de pagina groeit mee, de huisstijl houdt de kolom voor de invoer vast. */
@media (min-width: 1700px) {
  :root { --zs-breed-max: 1640px; }
  .rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aannames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wat-nu { margin: var(--zs-r-3) 0 0; font-size: var(--zs-maat-2); line-height: 1.45; }

/* Wim: dynamisch contract toont het vaste bedrag klein en doorgestreept; formules als tekst */
.dynbedrag s { color: var(--zs-zacht); }
.delen textarea { width: 100%; font: 16px/1.5 ui-monospace, monospace; background: var(--zs-vlak, transparent); color: var(--zs-inkt); border: 1px solid var(--zs-haarkleur); border-radius: 8px; padding: 10px; resize: vertical; }
.delen .rij input { min-width: 0; flex: 1; }

/* De band bij het grote bedrag (Marjan: hoe zeker is dit getal) */
.bandregel { margin: var(--zs-r-3) 0 0; font-size: var(--zs-maat-2); line-height: 1.4; }