:root {
  
  --kleur-papier: #FBFAF6;
  --kleur-wit: #FDFDFB;
  --kleur-inkt: #26241F;      
  --kleur-stift: var(--kleur-inkt);   
  --kleur-potlood: #A9A499;   

  --kleur-vlam: #B9473B;      
  --kleur-zon: #D6A24A;       
  --kleur-hemel: #9FC3E8;     
  --kleur-kobalt: #165686;    
  --kleur-gras: #8EA64B;      
  --kleur-blad: #A3B56B;
  --kleur-oranje: #F5832D;    
  --kleur-lila: #DBD5F0;      
  --kleur-waterglas: #5E9B90; 
  --kleur-klei: #B0714E;      
  --kleur-haven: #2F5D86;     

  --kleur-terracotta: var(--kleur-vlam);
  --kleur-oker: var(--kleur-zon);
  --kleur-mos: var(--kleur-gras);

  --kleur-stempel: #C24A22;
  --kleur-blauwdruk: #5E82A0;
  --kleur-tape: rgba(244, 238, 200, 0.72);
  --grid-lijn-fijn: rgba(94, 130, 160, 0.13);
  --grid-lijn-grof: rgba(94, 130, 160, 0.22);
}

:root {
  --font-body: 'Karla', sans-serif;            
  --font-meta: 'Karla', sans-serif;            
  --font-technisch: 'Space Mono', monospace;   
  --font-hand: 'Shantell Sans', cursive;       
  --font-notitie: 'Caveat', cursive;           

}

:root {
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;
  --ruimte-8: 64px;
  --ruimte-9: 96px;

  --pagina-marge: 56px;
  --content-max: 1160px;
}

:root {
  --tekst-hero: 64px;        
  --tekst-kop-1: 44px;       
  --tekst-kop-2: 30px;       
  --tekst-kop-3: 22px;       
  --tekst-groot: 19px;       
  --tekst-normaal: 17px;     
  --tekst-klein: 14px;
  --tekst-meta-maat: 13px;   
}

:root {
  --radius-vel: 22px;
  --radius-pill: 999px;

  --lijn-dik: 2.5px solid var(--lijn);
  --lijn-normaal: 2px solid var(--lijn);
  --lijn-fijn: 1.5px solid var(--lijn);

  --schaduw-vel: 6px 6px 0 var(--lijn);
  --schaduw-knop: 3px 3px 0 var(--lijn);
  --schaduw-knop-hover: 4px 4px 0 var(--lijn);
  --schaduw-knop-actief: 1px 1px 0 var(--lijn);
}

:root {
  --radius-sticker: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --schaduw-sticker: 4px 4px 0 var(--lijn);
  --rotatie-1: rotate(-3deg);
  --rotatie-2: rotate(2deg);
  --rotatie-3: rotate(-1.5deg);
  --rotatie-4: rotate(4deg);
  --rotatie-rust: rotate(-0.6deg);
  --duur-zweef: 6.5s;
  --duur-klapper: 3.5s;
  --duur-badge: 4.5s;
}

:root {
  --ease-uit: cubic-bezier(.2,.7,.3,1);
  --ease-overshoot: cubic-bezier(.2,1.3,.35,1);
  --transitie-knop: transform .08s ease, box-shadow .08s ease;
  --duur-streep: .5s;   

  --bp-s: 640px;
  --bp-m: 900px;
  --bp-l: 1200px;
}

:root {
  --achtergrond-werf:
    repeating-linear-gradient(0deg, var(--grid-lijn-fijn) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--grid-lijn-fijn) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, var(--grid-lijn-grof) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--grid-lijn-grof) 0 1px, transparent 1px 48px);

  --korrel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
}

.korrel::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--korrel);
  mix-blend-mode: multiply;
  opacity: .5;
  pointer-events: none;
  z-index: 9;
}

.tape {
  position: absolute;
  width: 108px;
  height: 27px;
  background: var(--kleur-tape);
  border-left: 1px dashed rgba(38,36,31,.16);
  border-right: 1px dashed rgba(38,36,31,.16);
}

:root {
  
  --merk-kobalt: #2E4EA8;
  --merk-kleivlak: #C08D68;
  --merk-petrol: #16626B;

  --glazuurgroen: #5E9B90;
  --klei: #B0714E;
  --delfts: #2F5D86;
  --scherf: #F2EDE3;            

  --kleur-lila: #EDE3D3;        
  --kleur-vlam: #B9473B;        
  --kleur-zon: #D9A441;         
  --kleur-hemel: #BFD6CE;       
  --kleur-gras: var(--glazuurgroen);
  --kleur-kobalt: var(--delfts);

  --kleur-waterglas: var(--glazuurgroen);
  --kleur-klei: var(--klei);
  --kleur-delfts: var(--delfts);

  --accent: var(--kleur-vlam);
  --dominant: var(--glazuurgroen); 
  --surface-page: var(--kleur-lila);
  --surface-vel: var(--kleur-papier);
  --surface-card: var(--kleur-wit);
  --surface-zacht: #E6E9DD;
  --tekst-body: var(--kleur-inkt);
  --tekst-secundair: #5F5A50;
  --tekst-meta: #5F5A50;
  --tekst-notitie: var(--kleur-vlam);
  --actie-primair-bg: var(--kleur-inkt);
  --actie-primair-tekst: var(--kleur-zon);
  --actie-urgent-bg: var(--kleur-vlam);
  --actie-urgent-tekst: #FFFFFF;
  --lijn: var(--kleur-inkt);

  --vak1: var(--glazuurgroen);
  --vak2: var(--klei);
  --vak3: var(--delfts);
  --vak4: var(--kleur-zon);
}

:root {
  --font-display: 'Shantell Sans', cursive;
  --font-woordmerk: 'Shantell Sans', cursive;
}

:root {
  --naad-dikte: 1.5px;
  --naad-streep: 7px;
  --naad-gat: 5px;
  --naad: repeating-linear-gradient(
    90deg,
    var(--lijn) 0 var(--naad-streep),
    transparent var(--naad-streep) calc(var(--naad-streep) + var(--naad-gat))
  );

  --radius-bordje: 6px;
  --bordje-rand: 3px;      

  --rotatie-rust: rotate(-0.6deg);
  --rotatie-notitie: rotate(1.4deg);
  --duur-naad: .45s;
}

.naad { height: var(--naad-dikte); background: var(--naad); border: 0; margin: var(--ruimte-7) 0; }

.tegel {
  position: relative;
  display: inline-grid;
  place-content: center;
  width: 1.55em;
  height: 1.55em;
  font-size: 1em;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--scherf);
  background: var(--tk, var(--scherf));
  border: max(2px, 0.042em) solid var(--inkt);
  border-radius: 0.1em;
  box-shadow: 0.058em 0.058em 0 var(--inkt);
  flex: 0 0 auto;
}
.tegel .vul { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.tegel .ltr { position: relative; z-index: 2; }
.tegel.leeg { --tk: var(--scherf); color: var(--inkt); }

.tegel[data-mat="waterglas"] .vul {
  background:
    linear-gradient(112deg, transparent 14%, rgba(255,255,255,.62) 18%, rgba(255,255,255,.62) 24%, transparent 28%,
                    transparent 44%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.34) 52%, transparent 56%),
    linear-gradient(to top, rgba(18,52,46,.32) 0%, rgba(18,52,46,.1) 22%, transparent 38%);
}

.tegel[data-mat="emaille"] { border-radius: 0.14em; box-shadow: inset 0 0 0 0.062em var(--scherf), 0.058em 0.058em 0 var(--inkt); }
.tegel[data-mat="emaille"] .vul {
  background:
    radial-gradient(circle at 14% 15%, var(--scherf) 0 0.032em, transparent 0.033em),
    radial-gradient(circle at 86% 15%, var(--scherf) 0 0.032em, transparent 0.033em),
    radial-gradient(circle at 14% 85%, var(--scherf) 0 0.032em, transparent 0.033em),
    radial-gradient(circle at 86% 85%, var(--scherf) 0 0.032em, transparent 0.033em),
    linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%);
}

.tegel[data-mat="glazuur"] .vul { background: linear-gradient(155deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%); }

.tegel[data-mat="lapje"] { border: 0; border-radius: 0.06em; box-shadow: 0 0.05em 0.11em rgba(38,36,31,.4); outline: 0.028em dashed var(--scherf); outline-offset: -0.13em; }
.tegel[data-mat="lapje"] .vul {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 0.02em, transparent 0.02em 0.05em),
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 0.02em, transparent 0.02em 0.05em);
}

.tegel[data-mat="papier"] {
  border: 0; border-radius: 0; background: var(--scherf); box-shadow: none;
  clip-path: polygon(0 7%,13% 1%,31% 8%,49% 2%,67% 9%,85% 3%,100% 8%,97% 93%,79% 100%,58% 94%,38% 100%,18% 93%,2% 99%);
  filter: drop-shadow(0.028em 0.04em 0.035em rgba(38,36,31,.36));
}
.tegel[data-mat="papier"] .vul {
  inset: 0 0 0.13em 0; background: var(--tk);
  clip-path: polygon(0 6%,14% 0,32% 7%,50% 1%,68% 8%,86% 2%,100% 7%,100% 88%,78% 95%,57% 89%,37% 96%,17% 88%,0 94%);
}

.tegel[data-mat="misdruk"] { background: var(--tk2, var(--klei)); }
.tegel[data-mat="misdruk"] .vul { background: var(--tk); transform: translate(-5%,-5%); border-radius: inherit; }

.tegel[data-mat="ingedrukt"] { color: var(--tk); }
.tegel[data-mat="ingedrukt"] .ltr { text-shadow: 0 0.022em 0 rgba(255,255,255,.55), 0 -0.02em 0 rgba(0,0,0,.4); }
.tegel[data-mat="ingedrukt"] .vul { background: linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%); }

.tegel[data-mat="knipsel"] {
  border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(4% 3%,52% 0,97% 4%,100% 51%,96% 97%,49% 100%,3% 96%,0 49%);
  filter: drop-shadow(0.045em 0.052em 0 rgba(38,36,31,.9));
}

.tegel[data-mat="beton"] { background: #9C9A93; color: var(--tk); border-radius: 0.04em; box-shadow: inset 0 0.035em 0 rgba(255,255,255,.34), inset 0 -0.045em 0 rgba(0,0,0,.22), 0.058em 0.062em 0 rgba(38,36,31,.34); border-color: transparent; }
.tegel[data-mat="beton"] .ltr { text-shadow: 0 0.022em 0 rgba(255,255,255,.55), 0 -0.02em 0 rgba(0,0,0,.42); filter: saturate(1.25); }
.tegel[data-mat="beton"] .vul { background: repeating-linear-gradient(52deg, rgba(255,255,255,.05) 0 0.03em, rgba(0,0,0,.045) 0.03em 0.06em); }

.merk9b { display: inline-flex; align-items: center; gap: 0.14em; }
.merk9b .woord { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; line-height: 1; color: var(--inkt); }