/* ismijnnaammarginaal.be */

@font-face{
  font-family:"Saira Condensed";
  src:url("fonts/SairaCondensed-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Courier Prime";
  src:url("fonts/CourierPrime-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
    --paper:#e6eae2;
    --card:#fbfaf5;
    --ink:#1c241f;
    --ink-soft:#5c675e;
    --rule:#c3ccc2;
    --stamp-red:#a8281f;
    --stamp-green:#2c6a4a;
    --stamp-amber:#9a6c12;
    --mono:"Courier Prime","Courier New",monospace;
    --cond:"Saira Condensed","Arial Narrow",sans-serif;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    padding:32px 16px 64px;
    background:var(--paper);
    background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(28,36,31,.045) 27px 28px);
    color:var(--ink);
    font-family:var(--mono);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .sheet{
    max-width:560px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--ink);
    box-shadow:6px 6px 0 rgba(28,36,31,.14);
    padding:28px 26px 32px;
    position:relative;
  }

  .kop{
    border-bottom:3px double var(--ink);
    padding-bottom:14px;
    margin-bottom:22px;
  }
  .dienst{
    font-family:var(--cond);
    font-weight:600;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 6px;
  }
  h1{
    font-family:var(--cond);
    font-weight:800;
    font-size:clamp(30px,8vw,46px);
    line-height:.95;
    letter-spacing:-.01em;
    text-transform:uppercase;
    margin:0;
  }
  .ondertitel{
    font-size:13px;
    color:var(--ink-soft);
    margin:8px 0 0;
  }

  label{
    display:block;
    font-family:var(--cond);
    font-weight:600;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:8px;
  }

  .invoer{display:flex;gap:10px;flex-wrap:wrap}

  input[type=text]{
    flex:1 1 200px;
    min-width:0;
    font-family:var(--mono);
    font-size:19px;
    padding:11px 12px;
    border:1px solid var(--ink);
    border-radius:0;
    background:#fff;
    color:var(--ink);
  }
  input[type=text]:focus-visible,button:focus-visible{
    outline:3px solid var(--stamp-amber);
    outline-offset:2px;
  }

  button{
    font-family:var(--cond);
    font-weight:700;
    font-size:15px;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:11px 20px;
    border:1px solid var(--ink);
    border-radius:0;
    background:var(--ink);
    color:var(--card);
    cursor:pointer;
    transition:transform .08s ease;
  }
  button:hover{background:#2f3b33}
  button:active{transform:translateY(1px)}
  button.secundair{background:transparent;color:var(--ink)}
  button.secundair:hover{background:rgba(28,36,31,.07)}

  .fout{
    color:var(--stamp-red);
    font-size:13px;
    margin:10px 0 0;
    min-height:1.2em;
  }

  .attest{margin-top:26px;border-top:1px solid var(--rule);padding-top:20px}
  .attest[hidden]{display:none}

  .meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    font-size:12px;
    color:var(--ink-soft);
    margin-bottom:18px;
  }

  .criteria{list-style:none;margin:0 0 20px;padding:0}
  .criteria li{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:5px 0;
    border-bottom:1px dotted var(--rule);
    font-size:14px;
    color:var(--ink-soft);
  }
  .criteria li.raak{color:var(--ink);font-weight:700}
  .vak{
    flex:0 0 auto;
    width:1.35em;
    text-align:center;
    border:1px solid currentColor;
    line-height:1.3;
  }
  .omschrijving{flex:1 1 auto}
  .punten{flex:0 0 auto;font-variant-numeric:tabular-nums}

  .totaal{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    border-top:2px solid var(--ink);
    padding-top:10px;
    margin-bottom:24px;
  }
  .totaal .etiket{
    font-family:var(--cond);
    font-weight:600;
    font-size:13px;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .totaal .cijfer{font-family:var(--cond);font-weight:800;font-size:38px;line-height:1}

  .stempelzone{text-align:center;padding:6px 0 4px}
  .stempel{
    display:inline-block;
    font-family:var(--cond);
    font-weight:800;
    font-size:clamp(24px,7vw,38px);
    letter-spacing:.04em;
    text-transform:uppercase;
    border:4px solid currentColor;
    padding:8px 18px;
    transform:rotate(-4deg);
    opacity:.92;
  }
  .stempel.rood{color:var(--stamp-red)}
  .stempel.groen{color:var(--stamp-green)}
  .stempel.amber{color:var(--stamp-amber)}
  .slaan{animation:slaan .32s cubic-bezier(.2,1.5,.4,1) both}
  @keyframes slaan{
    from{transform:rotate(-14deg) scale(2.1);opacity:0}
    to{transform:rotate(-4deg) scale(1);opacity:.92}
  }

  .oordeel{font-size:17px;margin:16px 0 4px;text-align:center}
  .advies{font-size:13px;color:var(--ink-soft);margin:0 0 22px;text-align:center}

  .acties{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

  .top{
    max-width:560px;
    margin:22px auto 0;
    background:var(--card);
    border:1px solid var(--ink);
    padding:18px 26px 20px;
  }
  .top h2{
    font-family:var(--cond);
    font-weight:600;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 10px;
  }
  .top ol{margin:0;padding:0;list-style:none;counter-reset:plek}
  .top li{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:4px 0;
    border-bottom:1px dotted var(--rule);
    font-size:14px;
    counter-increment:plek;
  }
  .top li:last-child{border-bottom:none}
  .top li::before{content:counter(plek) ".";color:var(--ink-soft);min-width:1.6em}
  .top .naamplek{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .pt{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}

  .voet{
    max-width:560px;
    margin:18px auto 0;
    font-size:11px;
    line-height:1.7;
    color:var(--ink-soft);
    text-align:center;
  }

  @media (prefers-reduced-motion:reduce){
    .slaan{animation:none}
    button{transition:none}
  }

  @media print{
    body{background:#fff;padding:0}
    .sheet{box-shadow:none;border:none}
    .invoer,.acties,.fout{display:none}
  }

/* ---- tekstblokken en over-pagina ---- */

.uitleg,.tekst{
  max-width:560px;
  margin:22px auto 0;
  background:var(--card);
  border:1px solid var(--ink);
  padding:22px 26px 24px;
}
.uitleg h2,.tekst h2{
  font-family:var(--cond);
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.tekst h2:not(:first-child){margin-top:26px}
.tekst h3{
  font-family:var(--cond);
  font-weight:600;
  font-size:17px;
  margin:20px 0 4px;
}
.uitleg p,.tekst p{margin:0 0 12px;font-size:14px}
.uitleg p:last-child,.tekst p:last-child{margin-bottom:0}
.tekst ul{margin:0 0 12px;padding-left:20px;font-size:14px}
.tekst li{margin-bottom:4px}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--stamp-red)}
.voet a{color:var(--ink-soft)}

.regels{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 12px}
.regels th{
  text-align:left;
  font-family:var(--cond);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--ink);
  padding:6px 8px 6px 0;
}
.regels td{padding:6px 8px 6px 0;border-bottom:1px dotted var(--rule)}
.regels td.pt{text-align:right;font-weight:700;white-space:nowrap}

.terug{max-width:560px;margin:22px auto 0;text-align:center;font-size:14px}