/* De publieke site van schilderplanning.nl.
   Huisstijl volgens het brand book v1.0. Oker is het accent voor de ene actie
   waar een scherm om draait: per sectie hooguit één okerknop, de rest is
   Grondverf. Als tekst op Kalk is oker te licht; daar staat de donkere oker. */
:root{
  --grondverf:#1E2530; --oker:#E8A73A; --steen:#D6D2CA; --kalk:#F8F5EF;
  --getint:oklch(0.94 0.012 85);
  --gedempt:oklch(0.45 0.015 250);
  --oker-donker:oklch(0.5 0.12 65);
  --oker-sterk:oklch(0.72 0.15 72);
  --op-donker:oklch(0.85 0.012 250);
  --staal-donker:oklch(0.5 0.02 250);
  /* Status, zoals in de app */
  --g:oklch(0.45 0.11 150); --g-zacht:oklch(0.92 0.05 150);
  --o:oklch(0.47 0.11 65);  --o-zacht:oklch(0.93 0.07 82);
  --r:oklch(0.48 0.15 30);  --r-zacht:oklch(0.92 0.045 30);
  --b:oklch(0.45 0.015 250); --b-zacht:oklch(0.92 0.008 250);
  --font:"Schibsted Grotesk",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rand:clamp(16px,5vw,80px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--kalk);color:var(--grondverf);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--oker-donker)}
a:hover{color:var(--grondverf)}
:focus-visible{outline:2px solid var(--oker-donker);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:var(--mono)}
.klein{font-size:14px;line-height:1.5;color:var(--gedempt)}
.label,.nummer{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt)}

/* ---------- kop ---------- */
.balk{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:12px var(--rand);background:var(--kalk);border-bottom:1px solid var(--steen)}
.merk{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--grondverf);text-decoration:none;white-space:nowrap}
.merk .licht{font-weight:400}
.waaier{width:32px;height:27px;flex:none}
.waaier .w1{fill:var(--steen)}.waaier .w2{fill:var(--oker)}.waaier .w3{fill:var(--grondverf)}
.waaier.donker .w1{fill:var(--staal-donker)}.waaier.donker .w3{fill:var(--kalk)}
.nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.nav a{color:var(--grondverf);text-decoration:none}
.nav a:hover{color:var(--oker-donker)}
.balk-acties{display:flex;align-items:center;gap:16px}
.tekstlink{font-size:15px;font-weight:700;color:var(--grondverf)}
.tekstlink.op-donker{color:var(--kalk)}
.tekstlink.op-donker:hover{color:var(--oker)}

.knop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;border:0;background:var(--oker);color:var(--grondverf);font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer}
.knop:hover{background:var(--oker-sterk);color:var(--grondverf)}
.knop.donker{background:var(--grondverf);color:var(--kalk)}
.knop.donker:hover{background:oklch(0.33 0.02 250);color:var(--kalk)}
.knop.klein{min-height:40px;padding:0 16px;font-size:14px;border-radius:7px}

/* ---------- held ---------- */
.held{background:var(--grondverf);color:var(--kalk);padding:clamp(48px,8vw,96px) var(--rand);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.held .label{color:oklch(0.75 0.015 250)}
.held h1{font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin-top:20px}
.intro{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--op-donker);margin-top:24px;max-width:34em}
.held-acties{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.held .klein{margin-top:16px}
.klein.op-donker{color:oklch(0.75 0.015 250)}

/* het getekende planbord */
.bord{background:var(--kalk);color:var(--grondverf);border-radius:10px;overflow:hidden;font-size:13px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.bord-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--steen);font-size:12px}
.legenda{display:flex;align-items:center;gap:6px;color:var(--gedempt);flex-wrap:wrap}
.legenda .chip{margin-left:6px}
.rooster{display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr))}
.rooster > *{border-bottom:1px solid var(--steen)}
.rooster > *:nth-last-child(-n+3){border-bottom:0}
.dag,.cel{border-left:1px solid var(--steen)}
.dag{padding:8px 10px;font-family:var(--mono);font-size:11px;color:var(--gedempt)}
.dag.vandaag{background:oklch(0.78 0.15 75 / .2);color:var(--grondverf);font-weight:500}
.naam{padding:14px 12px;font-weight:700;display:flex;align-items:center}
.cel{padding:6px;min-height:68px}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}
.blok{position:relative;height:100%;border-radius:6px;padding:7px 26px 7px 9px;display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--c);background:var(--cs);min-width:0}
.blok b{font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blok .mono{font-size:10.5px;color:var(--gedempt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blok .chip{position:absolute;top:6px;right:6px}
.blok.g{--c:var(--g);--cs:var(--g-zacht)}
.blok.o{--c:var(--o);--cs:var(--o-zacht)}
.blok.r{--c:var(--r);--cs:var(--r-zacht)}
.blok.b{--c:var(--b);--cs:var(--b-zacht)}
.blok.leeg{border:1.5px dashed var(--steen);background:none;color:var(--gedempt);justify-content:center;padding:7px 10px}
/* De letter draagt de status, zodat hij ook zonder kleur leesbaar is. */
.chip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:500;font-style:normal;color:#fff;flex:none}
.chip.g{background:var(--g)}.chip.o{background:var(--o)}.chip.r{background:var(--r)}.chip.b{background:var(--b)}
.chip.groot{width:36px;height:36px;border-radius:8px;font-size:17px}

/* ---------- secties ---------- */
.sectie{padding:clamp(56px,8vw,96px) var(--rand);border-bottom:1px solid var(--steen)}
.sectie.getint{background:var(--getint)}
.sectie-kop{display:grid;gap:10px;max-width:640px;margin-bottom:clamp(28px,4vw,48px)}
.sectie-kop h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sectie-kop p:last-child{color:var(--gedempt)}

.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--steen);border-left:1px solid var(--steen)}
.kaart{padding:24px;border-right:1px solid var(--steen);border-bottom:1px solid var(--steen);display:grid;gap:8px;align-content:start}
.kaart h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.kaart p{font-size:16px;color:var(--gedempt)}

.weer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.weer-uitleg{display:grid;gap:16px;max-width:36em}
.lijst{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--steen)}
.lijst li{padding:11px 0;border-bottom:1px solid var(--steen)}
.oordelen{display:grid;gap:12px}
.oordeel{display:flex;gap:16px;align-items:flex-start;background:var(--kalk);border:1px solid var(--steen);border-radius:10px;padding:16px}
.oordeel b{display:block}
.oordeel span{font-size:15px;color:var(--gedempt)}

.prijs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,48px);align-items:start}
.prijs-kaart{background:var(--grondverf);color:var(--kalk);border-radius:12px;padding:clamp(24px,3vw,36px);display:grid;gap:14px;justify-items:start}
.prijs-kaart .label{color:oklch(0.75 0.015 250)}
.prijs-kaart p:not(.label):not(.bedrag){color:var(--op-donker)}
.bedrag{font-size:clamp(44px,6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1}
.prijs-uitleg{display:grid;gap:14px}
.regels{margin:0;display:grid;border-top:1px solid var(--steen)}
.regels div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--steen)}
.regels dt{font-weight:700}
.regels dd{margin:0;font-size:15px}
.regels .som dt{font-weight:400;color:var(--gedempt)}

.nieuw{margin:0;padding:0;list-style:none;display:grid;max-width:820px;border-top:1px solid var(--steen)}
.nieuw li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--steen)}
.nieuw time{font-family:var(--mono);font-size:13px;color:var(--gedempt);padding-top:3px}
.nieuw b{display:block}
.nieuw span{color:var(--gedempt);font-size:16px}

/* ---------- contact ---------- */
.formulier{display:grid;gap:16px;max-width:680px}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-size:14px;font-weight:700}
.optie{font-weight:400;color:var(--gedempt)}
input,textarea{font:inherit;font-size:16px;font-weight:400;color:var(--grondverf);background:#fff;border:1px solid oklch(0.76 0.012 85);border-radius:7px;padding:11px 12px;width:100%}
textarea{resize:vertical;min-height:140px}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier-voet{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.uitkomst{font-weight:700;color:var(--g)}
.uitkomst.fout{color:var(--r)}

/* ---------- juridische teksten ---------- */
.document{max-width:760px;margin-inline:auto;padding:clamp(40px,6vw,72px) var(--rand) clamp(56px,8vw,96px)}
/* Eén lang woord als kop ("Verwerkersovereenkomst") moet op een telefoon passen. */
.document h1{font-size:clamp(26px,7vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;overflow-wrap:break-word;hyphens:auto}
.document .versie{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt);margin-top:12px}
.document .inleiding{font-size:19px;line-height:1.5;margin-top:28px}
.document h2{font-size:22px;font-weight:700;letter-spacing:-.015em;margin-top:44px;padding-top:20px;border-top:1px solid var(--steen)}
.document p,.document ol,.document ul,.document table{margin-top:14px}
.document ol,.document ul{padding-left:1.4em;display:grid;gap:10px}
.document table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.document th,.document td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--steen)}
.document thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt)}
.document tbody th{font-weight:700;white-space:nowrap}
.document .concept{background:var(--o-zacht);color:var(--o);border-radius:8px;padding:12px 16px;margin:0 0 28px}
.document mark.open{background:var(--o-zacht);color:var(--o);padding:0 4px;border-radius:3px}

/* ---------- voet ---------- */
.voet{background:var(--grondverf);color:var(--kalk);padding:40px var(--rand);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.voet .merk{color:var(--kalk)}
.voet-links{display:flex;gap:24px;flex-wrap:wrap;font-size:15px}
.voet-links a{color:var(--op-donker)}
.voet-links a:hover{color:var(--oker)}

/* ---------- smal ---------- */
@media (max-width:980px){
  .nav{display:none}
  .balk-acties{margin-left:auto}
  .held,.weer,.prijs{grid-template-columns:minmax(0,1fr)}
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  body{font-size:16px}
  .balk{gap:12px}
  .balk .tekstlink{display:none}
  .veld-rij{grid-template-columns:1fr}
  .kaarten{grid-template-columns:minmax(0,1fr)}
  .nieuw li{grid-template-columns:1fr;gap:4px}
  /* Het bord is te breed voor een telefoon: binnen het kader schuiven, de pagina zelf niet. */
  .bord{overflow-x:auto}
  .rooster,.bord-kop{min-width:520px}
}