@font-face{font-family:Archivo;font-weight:400;font-display:swap;src:url(/fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(/fonts/archivo-800.woff2) format("woff2")}
:root{--bg:#f8f5f4;--vlak:#fff;--tekst:#17151a;--zacht:#675f63;--lijn:#e6dfdd;--rood:#a3121d;--fel:#d92633;--tint:#fbf1f0;--groen:#1c6b43;--amber:#94590b}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tekst);font:400 16px/1.5 Archivo,"Segoe UI",system-ui,sans-serif;min-height:100vh}
h1{font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.15}
h2{font-weight:800;font-size:18px;letter-spacing:-.01em}
a{color:var(--rood)}
.balk{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;background:linear-gradient(90deg,#740a13,#d92633);color:#fff;padding:10px clamp(16px,3vw,32px)}
.merk{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:20px;letter-spacing:-.03em;text-decoration:none}
.balk nav{display:flex;gap:4px;flex:1}
.balk nav a{color:#fff;text-decoration:none;padding:6px 12px;border-radius:8px;font-size:15px}
.balk nav a.aan{background:rgba(255,255,255,.2)}
.linkknop{background:none;border:0;color:#ffd9d9;font:inherit;font-size:14px;cursor:pointer;padding:6px}
main{max-width:1040px;margin:0 auto;padding:24px clamp(16px,3vw,32px) 80px}
.kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.tegel{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:14px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.tegel.aan{border-color:var(--rood);box-shadow:inset 0 0 0 1px var(--rood)}
.tegel small{display:block;color:var(--zacht);font-size:14px}
.tegel strong{display:block;font-weight:800;font-size:22px;letter-spacing:-.02em}
.tegel span{color:var(--zacht);font-size:14px}
.tegel.laat strong{color:var(--fel)}
.lijst{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;overflow:hidden}
.rij{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--lijn);color:inherit;text-decoration:none}
.rij:first-child{border-top:0}
a.rij:hover{background:var(--tint)}
.rij .wie{flex:1;min-width:0}
.rij .wie b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rij .wie small{color:var(--zacht);font-size:14px}
.rij .bedrag{font-weight:800;white-space:nowrap}
.label{font-size:13px;border-radius:99px;padding:2px 10px;white-space:nowrap;background:#efeaea;color:var(--zacht)}
.label.open{background:#fdf1dc;color:var(--amber)}
.label.telaat{background:#fde4e4;color:var(--rood)}
.label.betaald{background:#e2f2e9;color:var(--groen)}
.leeg{padding:28px 16px;color:var(--zacht);text-align:center}
.vak{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:18px;margin-bottom:14px}
.vak h2{margin-bottom:10px}
label{display:block;font-size:14px;color:var(--zacht);margin-bottom:10px}
input,select,textarea{display:block;width:100%;margin-top:3px;font:inherit;color:var(--tekst);background:#fff;border:1px solid #cfc7c5;border-radius:8px;padding:9px 10px;min-height:42px}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--fel);outline-offset:1px}
.schakel{display:flex;align-items:center;gap:8px;color:var(--tekst);font-size:15px}
.schakel input{width:20px;height:20px;min-height:0;margin:0;flex:none;accent-color:var(--rood)}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.regel{border-top:1px solid var(--lijn);padding-top:12px;margin-top:4px}
.regel:first-of-type{border-top:0;padding-top:0}
.regelrij{display:grid;grid-template-columns:90px 1fr 130px 44px;gap:10px;align-items:end}
.kruis{background:none;border:1px solid var(--lijn);border-radius:8px;min-height:42px;font:inherit;cursor:pointer;color:var(--zacht);margin-bottom:10px}
.som{margin:8px 0 0 auto;max-width:300px}
.som div{display:flex;justify-content:space-between;padding:2px 0;color:var(--zacht)}
.som .tot{color:var(--tekst);font-weight:800;font-size:19px;border-top:2px solid var(--rood);margin-top:5px;padding-top:6px}
.knop{display:inline-block;background:#fff;color:var(--tekst);border:1px solid #cfc7c5;border-radius:9px;padding:10px 16px;font:inherit;font-size:15px;cursor:pointer;text-decoration:none;min-height:42px;line-height:20px}
.knop.hoofd{background:var(--rood);border-color:var(--rood);color:#fff;font-weight:800}
.knop.weg{color:var(--rood);border-color:#e9c9c9}
.knop[disabled]{opacity:.55;cursor:default}
.knoppen{display:flex;gap:8px;flex-wrap:wrap}
.foutregel{color:var(--rood);font-size:14px;min-height:0}
.waarschuw{background:#fde4e4;color:var(--rood);border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:15px}
.gegevens{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:15px}
.gegevens dt{color:var(--zacht)}
.gegevens dd{margin:0}
.terug{display:inline-block;margin-bottom:8px;font-size:14px;text-decoration:none}
#melding{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--tekst);color:#fff;border-radius:10px;padding:10px 16px;z-index:9;max-width:calc(100vw - 32px)}
.inlog{display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(160deg,#740a13,#d92633 90%)}
.inlogvak{background:#fff;border-radius:16px;padding:28px;width:100%;max-width:360px}
.inlogvak h1{margin:12px 0 18px}
.inlogvak button{width:100%;margin-top:8px}
@media (max-width:680px){
  .balk{flex-wrap:wrap;gap:6px 12px}
  .balk nav{order:3;flex-basis:100%}
  .balk form{margin-left:auto}
  .tegels{grid-template-columns:1fr 1fr}
  .raster{grid-template-columns:1fr}
  .regelrij{grid-template-columns:70px 1fr 44px}
  .regelrij .tariefveld{grid-column:1/3}
  .regelrij .prijsveld{grid-column:2/4;grid-row:1}
  .regelrij .aantalveld{grid-row:1}
  .regelrij .kruis{grid-column:3;grid-row:2}
  .rij{flex-wrap:wrap}
  .rij .wie{flex-basis:60%}
}