/* Roosterklaar-app, huisstijl van 14 oktober 2026: dezelfde tokens als site/stijl.css (versie 2).
   Zand als achtergrond, witte kaarten zonder schaduw, zwart voor tekst, banden en "aan", grafiet voor
   bijzaken, en één signaalkleur (oranje) voor knoppen en voor alles wat om actie vraagt: open plekken,
   wachten op goedkeuring, te weinig uren. Letter: Helvetica, de letter van het beeldmerk.
   Geen emoji, geen iconen, geen kleurverlopen. Aangevinkte vakjes en gevulde cellen zijn zwart,
   zoals de balken in het beeldmerk. */
:root{
  --zand:#ECE6DA;--zand-d:#E1DACC;--zand-l:#F5F2EB;--wit:#FFFFFF;--zwart:#000000;--grafiet:#5A544C;
  --lijn:#CFC7B8;--lijn-l:#E6E0D4;
  --signaal:#F26A1B;--signaal-d:#D4560C;--signaal-z:#FBE3D3;
  --radius:28px;--radius-k:20px;--knop:12px;--breed:1400px;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--zwart);background:var(--zand);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:var(--zwart);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--signaal);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-.03em}
h1{font-size:1.9rem;letter-spacing:-.035em;margin-bottom:6px}
h2{font-size:1.2rem;margin-bottom:10px}
h3{font-size:1.02rem;margin-bottom:6px}
b,strong{font-weight:700}
small{font-size:.86em}
pre{white-space:pre-wrap;font-family:var(--font);font-size:.95rem}
code,.code{display:inline-block;background:var(--zwart);color:var(--wit);padding:4px 12px;border-radius:8px;
  font-family:var(--font);font-weight:700;letter-spacing:.04em}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 32px}
.sub{color:var(--grafiet);margin-bottom:22px;max-width:76ch}
.sub a,.kaart p a{color:var(--zwart)}
.klein{font-size:.86rem;color:var(--grafiet)}

/* Kop en voet */
.kop{position:sticky;top:0;z-index:10;background:rgba(236,230,218,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn)}
.balk{display:flex;align-items:center;gap:12px 28px;min-height:64px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.2rem;
  letter-spacing:-.035em;color:var(--zwart)}
.logo img{width:34px;height:34px}
.hoofdnav{display:flex;flex-wrap:wrap;gap:2px 18px;flex:1}
.hoofdnav a{text-decoration:none;font-weight:500;font-size:.97rem;padding:6px 0;border-bottom:2px solid transparent}
.hoofdnav a:hover{border-bottom-color:var(--lijn)}
.hoofdnav a.actief{font-weight:700;border-bottom-color:var(--zwart)}
.kop-rechts{display:flex;align-items:center;gap:16px;color:var(--grafiet);font-size:.92rem;margin-left:auto}
.kop-rechts a{color:var(--zwart)}
main{flex:1;padding:36px 0 40px}
.voet{margin-top:48px;border-top:1px solid var(--lijn);padding:22px 0 28px;color:var(--grafiet);font-size:.88rem}
.voet .wrap{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.voet a{color:var(--grafiet)}

/* Kaarten */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius-k);padding:24px 26px;margin-bottom:18px}
.kaart.band{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.kaart.band a{color:var(--wit)}
.kaart.band .sub{color:rgba(255,255,255,.78)}
.kaart.let{border-left:5px solid var(--signaal)}
.kaart.aan{border-left:5px solid var(--zwart)}
.kaart.smal{max-width:620px;margin:30px auto}
.kaart.midden{text-align:center}
.kaart.breed{overflow-x:auto}
.kaart-kop{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:flex-start}
.kaart-kop h2{margin-bottom:6px}
.kaart-kop .tag{margin:2px 2px 2px 0}
.kaart .kaart{margin-bottom:10px}
.kaart>p{max-width:76ch}
.kaart ul,.kaart ol{margin-left:22px}
.kaart li{margin-bottom:4px}
.scheiding{border:0;border-top:1px solid var(--lijn);margin:4px 0}
.blok-onder{margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.stappen{list-style:none;display:grid;gap:10px;margin:14px 0 0;counter-reset:stap}
.stappen li{position:relative;padding-left:40px;counter-increment:stap;margin:0;max-width:60ch}
.stappen li::before{content:counter(stap);position:absolute;left:0;top:-3px;font-weight:700;font-size:1.4rem;
  letter-spacing:-.04em;color:var(--signaal)}

/* Knoppen: oranje = de hoofdhandeling, wit = overige, onderstreept = weghalen en andere stille handelingen */
.knop{display:inline-block;background:var(--signaal);color:var(--zwart);border:0;cursor:pointer;font:inherit;
  font-weight:700;font-size:.97rem;padding:11px 20px;border-radius:var(--knop);text-decoration:none;line-height:1.2;
  transition:background .15s}
.knop:hover{background:var(--signaal-d);text-decoration:none}
.knop[disabled]{background:var(--zand-d);color:var(--grafiet);cursor:not-allowed}
.knop.donker{background:var(--zwart);color:var(--wit)}
.knop.donker:hover{background:#262626}
.knop-licht{display:inline-block;background:var(--wit);color:var(--zwart);border:1.5px solid var(--lijn);cursor:pointer;
  font:inherit;font-weight:600;font-size:.92rem;padding:9px 16px;border-radius:var(--knop);text-decoration:none;
  line-height:1.2;transition:border-color .15s}
.knop-licht:hover{border-color:var(--zwart);text-decoration:none}
.knop-licht.nu{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.knop-rood{background:transparent;border-color:transparent;color:var(--grafiet);text-decoration:underline;
  text-underline-offset:3px;padding-left:6px;padding-right:6px}
.knop-rood:hover{color:var(--zwart);border-color:transparent;text-decoration-thickness:2px}
summary.knop-licht{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary.stil{cursor:pointer;font-weight:700}
details[open]>summary.knop-licht{border-color:var(--zwart)}

/* Meldingen en labels */
.melding{background:var(--zwart);color:var(--wit);font-weight:600;padding:14px 20px;border-radius:14px;margin-bottom:18px}
.melding a{color:var(--wit)}
.melding.let,.fout{background:var(--signaal-z);color:var(--zwart);border-left:5px solid var(--signaal);
  font-weight:600;padding:12px 18px;border-radius:12px;margin-bottom:14px}
.tag{display:inline-block;border:1.5px solid var(--lijn);border-radius:999px;padding:2px 10px;font-size:.8rem;
  font-weight:600;color:var(--grafiet);background:var(--wit);line-height:1.4;vertical-align:middle;white-space:nowrap}
.tag-aan{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.tag-let{border-color:var(--signaal);color:var(--signaal-d)}
.tag-stil{border-style:dashed}
.tag.lang{white-space:normal}
.let-tekst{color:var(--signaal-d);font-weight:700}
.getallen{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:14px}
.getal b{display:block;font-size:1.9rem;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:4px}
.getal span{color:var(--grafiet);font-size:.88rem}

/* Formulieren */
input,select,textarea{font:inherit;font-size:.95rem;color:var(--zwart);background:var(--wit);border:1.5px solid var(--lijn);
  border-radius:10px;padding:9px 12px;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--zwart);outline:none}
input[type=checkbox],input[type=radio]{accent-color:var(--zwart);width:17px;height:17px;padding:0;border:0;
  vertical-align:-3px;margin-right:2px}
input[type=month],input[type=date]{font-variant-numeric:tabular-nums}
textarea{width:100%;min-height:110px;resize:vertical;line-height:1.5}
label{font-size:.92rem;color:var(--grafiet)}
label b{color:var(--zwart)}
.rij{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rij .sub{margin:0}
.stapel{display:grid;gap:12px}
.plak textarea{min-height:260px;padding:14px;font-size:.98rem}
.inlog{max-width:420px;margin:40px auto 0;text-align:center}
.inlog img{width:72px;height:72px;margin:0 auto 10px}
.inlog .merk{font-weight:700;font-size:1.5rem;letter-spacing:-.04em;margin-bottom:22px}
.inlog .kaart{text-align:left;padding:28px}
.inlog form.stapel .knop,.inlog form.stapel .knop-licht{width:100%}

/* Tabellen */
table{border-collapse:collapse;width:100%;background:var(--wit);font-size:.92rem}
th,td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn-l)}
th{background:var(--zand-d);font-weight:700;font-size:.85rem}
tr.weekend td{background:var(--zand-l)}
tr.sub td{color:var(--grafiet);font-size:.88rem}
table.raster th,table.raster td{border:1px solid var(--lijn-l);white-space:nowrap}
table.raster th{text-align:center}
td .rij{gap:6px}
td form{display:inline}
td .knop,td .knop-licht{white-space:nowrap}

/* Weekvorm (de indeling van de klant: dagen als kolommen, per post een blok) */
.wk th,.wk td{text-align:center;white-space:nowrap}
.wk th.dag{background:var(--zand-d)}
.wk th.dicht{background:var(--zand);color:var(--grafiet);font-weight:500}
.wk td.naam,.wk th.naam{text-align:left;font-weight:600;background:var(--wit);min-width:150px}
.wk tr.blok td{background:var(--zwart);color:var(--wit);font-weight:700;text-align:left;border-color:var(--zwart)}
.wk td.dicht{background:var(--zand)}
.wk td.dienst{font-weight:600;font-variant-numeric:tabular-nums}
.wk tr.openrij td{color:var(--signaal-d);font-weight:700}
.weekkiezer{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}

/* Beschikbaarheidsmatrix */
#matrix th.vast,#matrix td.vast{position:sticky;left:0;background:var(--wit);z-index:1;white-space:nowrap;text-align:left}
#matrix th.vast{background:var(--zand-d)}
#matrix th.weekend,#matrix td.weekend{background:var(--zand-l)}
#matrix td{text-align:center}
#matrix td.afwezig{background:var(--zand-d)}
#matrix td.afwezig input{opacity:.4}
.dagknop{border:0;background:none;font:inherit;font-weight:700;cursor:pointer;padding:0;color:var(--zwart);
  text-decoration:underline;text-underline-offset:3px}
.rijknop{border:1px solid var(--lijn);background:var(--wit);cursor:pointer;color:var(--grafiet);font:inherit;
  font-size:.72rem;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.rijknop:hover,.dagknop:hover{color:var(--signaal-d);border-color:var(--signaal)}

/* Uren tegen het contract: wit = binnen, oranje = te weinig, zwart = meer dan het contract */
td.u-goed{font-weight:700}
td.u-min{background:var(--signaal-z);color:var(--signaal-d);font-weight:700}
td.u-meer{background:var(--zwart);color:var(--wit);font-weight:700}
td.u-deel{color:var(--grafiet)}

@media (max-width:900px){
  .wrap{padding:0 20px}
  main{padding-top:24px}
  .kaart{padding:18px}
  .kaart.breed{padding:12px}
  .hoofdnav{order:3;flex-basis:100%;gap:2px 16px}
}
@media (max-width:600px){
  body{font-size:15px}
  h1{font-size:1.6rem}
  .getallen{gap:20px}
  .kaart-kop>.rij{width:100%}
  .knop,.knop-licht{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .knop,.knop-licht{transition:none}
}
/* Openbare demo "Probeer het zelf" (22-10-2026): berichten links, team en regels rechts */
.demo-raster{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.demo-raster textarea{min-height:330px;font-size:.95rem;padding:14px}
.demo-raster .kaart{margin-bottom:0}
@media (max-width:900px){.demo-raster{grid-template-columns:1fr}}