/* Gedeelde opmaak voor de urenstaat en de scope-pagina. */
  :root{
    --ink:#071522;
    --ground:#0b1e30;
    --panel:#102a41;
    --panel-2:#143650;
    --line:rgba(122,180,224,.20);
    --line-strong:rgba(122,180,224,.40);
    --text:#e6f0f8;
    --muted:#96b4cc;
    --accent:#f0913f;
    --accent-2:#ffb469;
    --accent-soft:rgba(240,145,63,.13);
    --blue:#74b6ea;
    --blue-soft:rgba(116,182,234,.13);
    --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --radius:3px;
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box}

  html{-webkit-text-size-adjust:100%}

  body{
    margin:0;
    min-height:100vh;
    background:var(--ground);
    color:var(--text);
    font:400 15px/1.55 var(--sans);
    letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;
  }

  /* Blauwdruk-raster + een lichte gloed vanaf de bovenrand */
  body::before{
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(122,180,224,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(122,180,224,.06) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 130% 85% at 50% -10%, #000 35%, transparent 100%);
    mask-image:radial-gradient(ellipse 130% 85% at 50% -10%, #000 35%, transparent 100%);
  }
  body::after{
    content:'';
    position:fixed; inset:0 0 auto 0; height:420px; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 90% 100% at 20% 0%, rgba(116,182,234,.10), transparent 70%),
               radial-gradient(ellipse 70% 100% at 88% 0%, rgba(240,145,63,.08), transparent 70%);
  }

  .wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:clamp(24px,5vw,60px) clamp(16px,4vw,40px) 80px}

  /* ---------- kop ---------- */
  .head{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between;
        padding-bottom:22px; border-bottom:1px solid var(--line-strong)}
  .eyebrow{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 12px}
  h1{margin:0; font:700 clamp(26px,4.4vw,40px)/1.1 var(--sans); letter-spacing:-.02em}
  .sub{margin:10px 0 0; color:var(--muted); max-width:56ch}
  .sub b{color:var(--text); font-weight:500}
  .head-meta{font:400 12px/1.7 var(--mono); color:var(--muted); text-align:right; white-space:nowrap}
  .head-meta span{color:var(--text)}

  /* ---------- tegels ---------- */
  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:14px; margin:28px 0 44px}
  .tile{position:relative; background:linear-gradient(160deg,var(--panel),rgba(16,42,65,.55));
        border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 18px; overflow:hidden}
  .tile::before{content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--blue); opacity:.65}
  .tile--som{background:linear-gradient(160deg,rgba(240,145,63,.12),rgba(16,42,65,.55)); border-color:rgba(240,145,63,.35)}
  .tile--som::before{background:var(--accent); opacity:1}
  .tile-label{font:500 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
  .tile--som .tile-label{color:var(--accent-2)}
  .tile-value{font:600 clamp(28px,3.6vw,34px)/1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .tile-range{margin-top:8px; font:400 13px/1.4 var(--mono); color:var(--accent-2)}
  .tile-range.exact{color:var(--muted)}
  .tile-meta{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
             font:400 12px/1.5 var(--mono); color:var(--muted)}

  /* ---------- secties ---------- */
  section{margin-bottom:44px}
  .sec-head{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:baseline; justify-content:space-between; margin-bottom:14px}
  h2{margin:0; font:600 19px/1.2 var(--mono); letter-spacing:-.01em}
  h2 .dot{color:var(--accent)}
  .sec-total{font:500 13px/1 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}
  .sec-total b{color:var(--text); font-weight:600}

  /* ---------- tabel ---------- */
  .table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,42,65,.42)}
  table{width:100%; border-collapse:collapse; min-width:720px}
  thead th{position:sticky; top:0; background:var(--panel-2); text-align:left; white-space:nowrap;
           font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
           padding:12px 14px; border-bottom:1px solid var(--line-strong)}
  tbody td{padding:13px 14px; border-top:1px solid var(--line); vertical-align:top}
  tbody tr:first-child td{border-top:none}
  tbody tr:hover{background:rgba(116,182,234,.05)}
  .c-datum{font:400 13px/1.5 var(--mono); white-space:nowrap; color:var(--text)}
  .c-tijdvak{font:400 12.5px/1.6 var(--mono); color:var(--muted); min-width:120px}
  .c-duur{font:500 13.5px/1.5 var(--mono); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}
  .c-duur .schatting{color:var(--accent-2)}
  .c-werk{font-size:14px; line-height:1.5; min-width:280px}
  .c-werk .device{display:block; margin-top:5px; font:400 11.5px/1 var(--mono); color:var(--muted)}
  .c-bron{white-space:nowrap}
  .pill{display:inline-block; padding:3px 9px; border-radius:2px;
        font:500 11px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase}
  .pill.gemeten{background:var(--blue-soft); color:var(--blue); border:1px solid rgba(116,182,234,.3)}
  .pill.geschat{background:var(--accent-soft); color:var(--accent-2); border:1px solid rgba(240,145,63,.35)}
  .rm{margin-left:8px; background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
      border-radius:2px; width:22px; height:22px; line-height:1; font:400 13px/1 var(--mono); padding:0}
  .rm:hover{border-color:var(--accent); color:var(--accent)}

  /* ---------- formulier ---------- */
  .form-panel{border:1px solid var(--line-strong); border-radius:var(--radius);
              background:linear-gradient(170deg,var(--panel),rgba(11,30,48,.7)); padding:clamp(20px,3vw,30px)}
  .form-panel h2{margin-bottom:6px}
  .form-intro{margin:0 0 22px; color:var(--muted); font-size:14px; max-width:62ch}
  form{display:grid; gap:16px 18px; grid-template-columns:repeat(4,1fr)}
  .f{display:flex; flex-direction:column; gap:7px}
  .f--werk{grid-column:1/-1}
  .f--project{grid-column:span 2}
  label,legend{font:500 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  input,select,textarea{
    font:400 14px/1.4 var(--sans); color:var(--text); background:rgba(7,21,34,.6);
    border:1px solid var(--line); border-radius:2px; padding:10px 11px; width:100%;
  }
  input[type=date],input[type=number],.mono-in{font-family:var(--mono); font-size:13.5px}
  textarea{min-height:84px; resize:vertical; line-height:1.5}
  input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,.switch:focus-within{
    outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)
  }
  .hint{font:400 11.5px/1.4 var(--mono); color:var(--muted)}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

  .switch-wrap{grid-column:1/-1; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
               padding:12px 14px; border:1px dashed var(--line-strong); border-radius:var(--radius);
               background:rgba(240,145,63,.05)}
  .switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer}
  .switch input{position:absolute; opacity:0; width:44px; height:24px; margin:0; cursor:pointer}
  .track{width:44px; height:24px; flex:0 0 44px; border-radius:12px; background:rgba(7,21,34,.8);
         border:1px solid var(--line-strong); position:relative; transition:background .16s, border-color .16s}
  .track::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
                background:var(--muted); transition:transform .16s, background .16s}
  .switch input:checked ~ .track{background:var(--accent-soft); border-color:var(--accent)}
  .switch input:checked ~ .track::after{transform:translateX(20px); background:var(--accent)}
  .switch-text{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text)}
  .switch-note{font-size:13px; color:var(--muted)}

  .actions{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
           padding-top:6px; border-top:1px solid var(--line); margin-top:2px}
  button.primary{background:var(--accent); color:#12212c; border:none; border-radius:2px; cursor:pointer;
                 font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:13px 22px}
  button.primary:hover{background:var(--accent-2)}
  button.primary:disabled{opacity:.5; cursor:progress}
  button.ghost{background:none; border:1px solid var(--line-strong); color:var(--muted); cursor:pointer;
               border-radius:2px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:9px 12px}
  button.ghost:hover{color:var(--text); border-color:var(--blue)}

  .msg{margin:0; font-size:13.5px; min-height:1.2em}
  .msg.ok{color:var(--blue)}
  .msg.err{color:var(--accent-2)}

  .banner{margin:0 0 26px; padding:13px 16px; border-radius:var(--radius);
          border:1px solid rgba(240,145,63,.4); background:var(--accent-soft);
          color:var(--accent-2); font-size:13.5px}
  .empty{padding:26px 16px; text-align:center; color:var(--muted); font:400 13px/1.5 var(--mono)}

  footer{margin-top:52px; padding-top:20px; border-top:1px solid var(--line);
         color:var(--muted); font-size:12.5px; line-height:1.7; max-width:74ch}
  footer code{font:400 12px/1 var(--mono); color:var(--blue)}

  @media (max-width:900px){
    .tiles{grid-template-columns:1fr}
    form{grid-template-columns:repeat(2,1fr)}
    .f--project{grid-column:1/-1}
  }
  @media (max-width:760px){
    .head-meta{text-align:left}
    /* tabel wordt een kaartenlijst — vijf kolommen met lange tekst leest niet op een telefoon */
    .table-scroll{border:none; background:none; overflow:visible}
    table{min-width:0}
    thead{display:none}
    tbody,tbody tr,tbody td{display:block; width:100%}
    tbody tr{border:1px solid var(--line); border-radius:var(--radius);
             background:rgba(16,42,65,.42); padding:14px; margin-bottom:10px}
    tbody td{border:none; padding:0 0 8px}
    tbody td:last-child{padding-bottom:0}
    tbody td::before{content:attr(data-label) ' '; display:block; margin-bottom:3px;
                     font:500 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
    .c-duur{text-align:left}
  }
  @media (max-width:560px){ form{grid-template-columns:1fr} .row-2{grid-template-columns:1fr} }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- tabbladen ---------- */
.tabs{display:flex; gap:2px; margin:22px 0 0; border-bottom:1px solid var(--line-strong)}
.tab{display:inline-block; padding:11px 20px; text-decoration:none;
     font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
     color:var(--muted); background:rgba(16,42,65,.5);
     border:1px solid var(--line); border-bottom:none; border-radius:3px 3px 0 0;
     position:relative; top:1px}
.tab:hover{color:var(--text); background:var(--panel-2)}
.tab[aria-current="page"]{color:var(--text); background:var(--ground);
     border-color:var(--line-strong); box-shadow:inset 0 2px 0 var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- tariefbalk ---------- */
.tarief{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
        margin:26px 0 0; padding:16px 18px; border-radius:var(--radius);
        border:1px solid var(--line-strong); background:linear-gradient(120deg,rgba(240,145,63,.10),rgba(16,42,65,.55))}
.tarief-veld{display:flex; align-items:center; gap:10px}
.tarief label{white-space:nowrap; color:var(--accent-2)}
.euro{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:2px;
      background:rgba(7,21,34,.6); overflow:hidden}
.euro span{padding:0 2px 0 11px; font:500 14px/1 var(--mono); color:var(--muted)}
.euro input{border:none; background:none; width:86px; padding:10px 11px 10px 4px;
            font-family:var(--mono); font-size:14px}
.euro:focus-within{border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px}
.euro input:focus-visible{outline:none}
.tarief-note{font-size:13px; color:var(--muted); flex:1 1 260px; min-width:0}
.tarief-note b{color:var(--text); font-weight:500}
.tarief button.ghost{flex:0 0 auto}

/* bedragen */
.tile-geld{margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
           font:600 16px/1.3 var(--mono); color:var(--accent-2); font-variant-numeric:tabular-nums}
.tile-geld.leeg{font-weight:400; font-size:12.5px; color:var(--muted)}
.c-duur .geld{display:block; margin-top:4px; font:400 11.5px/1 var(--mono); color:var(--accent-2)}
.sec-total .geld{color:var(--accent-2)}

/* ---------- scope-pagina ---------- */
.scope-grid{display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin:28px 0 40px}
.scope-card{position:relative; border:1px solid var(--line); border-radius:var(--radius);
            background:linear-gradient(160deg,var(--panel),rgba(16,42,65,.55)); padding:20px}
.scope-card::before{content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--blue); opacity:.65}
.scope-card--ik{background:linear-gradient(160deg,rgba(240,145,63,.12),rgba(16,42,65,.55));
                border-color:rgba(240,145,63,.35)}
.scope-card--ik::before{background:var(--accent); opacity:1}
.scope-card h3{margin:0 0 4px; font:600 15px/1.2 var(--sans)}
.scope-card .rol{margin:0 0 14px; font:400 11.5px/1.4 var(--mono); color:var(--muted)}
.scope-card .bedrag{font:600 clamp(24px,3.2vw,30px)/1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.scope-card .grondslag{margin:8px 0 0; font:400 12.5px/1.5 var(--mono); color:var(--muted)}
.besparing{border:1px solid rgba(240,145,63,.45); border-radius:var(--radius);
           background:var(--accent-soft); padding:22px; margin:0 0 40px}
.besparing p{margin:0}
.besparing .label{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); margin-bottom:12px}
.besparing .groot{font:600 clamp(28px,4vw,38px)/1 var(--mono); letter-spacing:-.02em; color:var(--accent-2)}
.besparing .uitleg{margin-top:12px; font-size:13.5px; color:var(--muted); max-width:70ch}
.c-num{font:400 13px/1.5 var(--mono); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.c-num.ik{color:var(--accent-2); font-weight:500}
tfoot td{padding:13px 14px; border-top:1px solid var(--line-strong); background:var(--panel-2);
         font:600 13px/1.5 var(--mono); font-variant-numeric:tabular-nums}
tfoot td:first-child{font-family:var(--sans); font-size:13.5px}

@media (max-width:900px){ .scope-grid{grid-template-columns:1fr} }
@media (max-width:760px){
  .tabs{margin-top:18px}
  .tab{flex:1 1 auto; text-align:center; padding:11px 12px; font-size:11px}
  tfoot,tfoot tr,tfoot td{display:block; width:100%}
  tfoot tr{border:1px solid var(--line-strong); border-radius:var(--radius); padding:12px; background:var(--panel-2)}
  tfoot td{border:none; padding:0 0 6px; background:none}
  tfoot td::before{content:attr(data-label) ' '; display:block; margin-bottom:3px;
                   font:500 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
}

/* geen dubbele scheidingslijn als er een bedrag boven de meta-regel staat */
.tile-geld + .tile-meta{border-top:none; padding-top:6px}

/* Achteraan, want .c-num wordt hierboven pas na de eerste mediaquery gedefinieerd:
   in de kaartweergave op telefoon horen de bedragen links, onder hun label. */
@media (max-width:760px){
  .c-num{text-align:left}
}

/* ---------- groep- en subtotaalrijen (rekenblad) ---------- */
tr.groep td{background:var(--accent-soft); color:var(--accent-2);
            font:600 11px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase;
            padding:9px 14px; border-top:1px solid var(--line-strong)}
tr.subtotaal td{background:rgba(116,182,234,.05); color:var(--muted);
                font:500 12.5px/1.5 var(--mono); padding:9px 14px;
                border-top:1px solid var(--line); border-bottom:1px solid var(--line-strong)}
tr.subtotaal td:first-child{font-family:var(--sans); font-style:italic}
.c-num.save,tfoot td.save{color:var(--accent-2)}
tbody tr.groep:hover,tbody tr.subtotaal:hover{background:var(--accent-soft)}
tr.subtotaal:hover td{background:rgba(116,182,234,.05)}

@media (max-width:760px){
  tr.groep,tr.groep td{display:block; width:100%}
  tr.groep{margin:16px 0 8px; padding:0; border:none; background:none}
  tr.groep td{border-radius:var(--radius)}
  tr.subtotaal{display:block; border:1px solid var(--line-strong); border-radius:var(--radius);
               padding:12px; margin-bottom:14px; background:rgba(116,182,234,.05)}
  tr.subtotaal td{display:block; border:none; padding:0 0 5px; background:none}
  tr.subtotaal td::before{content:attr(data-label) ' '; display:block;
                          font:500 10px/1.3 var(--mono); letter-spacing:.12em;
                          text-transform:uppercase; color:var(--muted)}
  tr.subtotaal td:first-child::before{content:''}
}