/* ═══════════════════════════════════════════════════════════════════════════
   Orivion Serviceplatform — huisstijl
   ───────────────────────────────────────────────────────────────────────────
   Eén stylesheet, geen build-stap. De tokens hieronder zijn overgenomen uit de
   huisstijl van orivioninstallatie.nl, zodat het serviceplatform en de website
   dezelfde taal spreken: navy als drager, blauw voor actie, volt-groen als
   spaarzaam hoogtepunt.

   Twee regels waar deze file zich aan houdt:
     1. De Content-Security-Policy staat geen inline stijl of externe bronnen
        toe (style-src 'self', font-src 'self'). Alle opmaak staat hier; de
        letters staan onder /static/fonts.
     2. Klassenamen zijn achterwaarts compatibel — bestaande templates blijven
        werken zonder aanpassing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Letters ─────────────────────────────────────────────────────────────────
   Archivo voor koppen, Instrument Sans voor lopende tekst — dezelfde twee als
   op de website. Variabele fonts: één bestand dekt alle diktes. SIL Open Font
   License; de licentieteksten staan naast de bestanden. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Merk */
  --merk:          #11233c;
  --merk-2:        #1a3354;
  --merk-donker:   #0d1c30;
  --merk-dieper:   #0a1626;
  --merk-diepst:   #060d18;
  --merk-tint:     #ebf3ff;
  --merk-tint-2:   #d7e8ff;

  /* Actie */
  --accent:        #007bff;
  --accent-donker: #0063d6;
  --accent-donkerder: #0054bc;
  --accent-dieper: #084a9e;
  --accent-tint:   #e6f1ff;
  --accent-licht:  #7dbdff;

  /* Hoogtepunt — spaarzaam, nooit als tekstkleur op wit */
  --volt:          #c8f542;
  --volt-zacht:    rgba(200, 245, 66, .14);
  --volt-lijn:     rgba(200, 245, 66, .32);

  /* Tekst en vlakken */
  --inkt:          #16212f;
  --gedempt:       #51606f;
  --lijn:          #e1e7f0;
  --lijn-zacht:    #ecf1f7;
  --vlak:          #ffffff;
  --vlak-zacht:    #f5f8fc;
  --vlak-zacht-2:  #e8eef6;
  --inkt-inv:      #b9c5d4;
  --inkt-inv-sterk:#dbe3ee;

  /* Signaalkleuren */
  --goed:          #0b6e4f;
  --goed-vlak:     #e6f5ee;
  --goed-lijn:     #a7d9c4;
  --zon:           #ffb52e;
  --zon-diep:      #8a5b00;
  --zon-vlak:      #fff4de;
  --zon-lijn:      #f0dcb0;
  --fout:          #b3271b;
  --fout-vlak:     #fbe6e3;
  --fout-lijn:     #e6b3ac;

  /* Vorm */
  --r-xs:   8px;
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   20px;
  --r-pill: 999px;
  --radius: 14px; /* alias voor oudere regels */

  /* Diepte */
  --schaduw-xs: 0 1px 2px rgba(10, 22, 38, .06);
  --schaduw-sm: 0 3px 12px rgba(10, 22, 38, .07);
  --schaduw:    0 16px 40px -12px rgba(10, 22, 38, .18);
  --schaduw-lg: 0 32px 70px -20px rgba(10, 22, 38, .30);
  --schaduw-merk: 0 22px 50px -12px rgba(6, 13, 24, .5);
  --ring:       0 0 0 3px rgba(0, 123, 255, .28);

  /* Maat en ritme */
  --breed:   1180px;
  --smal:    720px;
  --kop-h:   64px;

  /* Letters */
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --font-kop: 'Archivo', 'Instrument Sans', -apple-system, BlinkMacSystemFont,
              'Segoe UI', sans-serif;

  --soepel: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

/* ── Basis ──────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--vlak-zacht);
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }

a { color: var(--accent-donker); text-underline-offset: .18em; }
a:hover { color: var(--accent-dieper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  line-height: 1.18;
  letter-spacing: -.018em;
  color: var(--merk);
  margin: 0 0 .55rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); font-weight: 800; }
h2 { font-size: 1.16rem; font-weight: 700; }
h3 { font-size: 1rem;    font-weight: 700; }
h4 { font-size: .92rem;  font-weight: 700; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--lijn); margin: 1.25rem 0; }
::selection { background: var(--merk-tint-2); color: var(--merk); }

/* ── Kop van de pagina (topbar) ─────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, var(--merk-dieper) 0%, var(--merk) 100%);
  color: #fff;
  box-shadow: var(--schaduw-sm);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.topbar__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: .6rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .6rem 1.1rem;
  flex-wrap: wrap;
}

/* Merk-lockup: beeldmerk + woordmerk, precies zoals op de website. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  margin-right: auto;
  padding: .15rem;
  border-radius: var(--r-sm);
}
.merk:hover { color: #fff; }
.merk__teken { width: 32px; height: 32px; flex: none; display: block; }
.merk__tekst { display: flex; flex-direction: column; line-height: 1.05; }
.merk__naam {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.merk__naam b { color: var(--accent-licht); font-weight: 800; }
.merk__sub {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--inkt-inv);
  margin-top: .18rem;
}

/* Navigatie: pillen. Op smalle schermen schuift de rij horizontaal —
   geen uitklapmenu, dus ook geen JavaScript dat kan falen in een meterkast. */
.topbar__nav {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
  margin-bottom: -.15rem;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a {
  color: var(--inkt-inv);
  text-decoration: none;
  padding: .42rem .85rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .18s var(--soepel), color .18s var(--soepel);
}
.topbar__nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.topbar__nav a[aria-current="page"] {
  background: #fff;
  color: var(--merk);
  box-shadow: 0 1px 3px rgba(6, 13, 24, .35);
}

.topbar__rechts { display: flex; align-items: center; gap: .5rem; }

.topbar__gebruiker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--inkt-inv-sterk);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: .28rem .7rem .28rem .32rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.topbar__initiaal {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--accent-donker);
  color: #fff;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
  font-family: var(--font-kop);
}
.topbar__rol { color: var(--inkt-inv); }

.topbar .knop--stil {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.topbar .knop--stil:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* De contactnavigatie van het portaal is kort: die hoeft nooit op een eigen rij. */
.topbar__nav--kort { order: 0; flex: 0 1 auto; overflow: visible; }
.topbar__nav--kort a { font-weight: 600; }

@media (max-width: 61.99rem) {
  /* Fade rechts: laat zien dat er nog navigatie achter de rand zit. */
  .topbar__nav:not(.topbar__nav--kort) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
  }
}

@media (max-width: 47.99rem) {
  /* Kop laag houden: alleen de initiaal, naam blijft voor schermlezers. */
  .topbar__naam, .topbar__rol {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .topbar__gebruiker { padding: .22rem; gap: 0; }
  .merk__naam { font-size: .92rem; }
}

@media (min-width: 62rem) {
  .topbar__binnen { padding: .55rem 1.5rem; }
  .topbar__nav { order: 0; flex: 0 1 auto; overflow: visible; }
  .merk__teken { width: 34px; height: 34px; }
}

/* ── Romp ───────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1.6rem 1.15rem 3.5rem;
}
.wrap--smal { max-width: var(--smal); }

@media (min-width: 62rem) {
  .wrap { padding: 2rem 1.5rem 4rem; }
}

.kop {
  display: flex;
  align-items: flex-start;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
.kop h1 { margin: 0; }
.kop__acties { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.sub { color: var(--gedempt); margin: .25rem 0 0; font-size: .94rem; }
.sub a { color: var(--accent-donker); }

/* ── Kaarten en rasters ─────────────────────────────────────────────────── */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  box-shadow: var(--schaduw-xs);
  padding: 1.15rem 1.2rem;
  margin-bottom: 1.15rem;
}
.kaart > h2:first-child,
.kaart > h3:first-child { margin-top: 0; }
.kaart > h2 + .sub, .kaart > h3 + .sub { margin-top: -.25rem; margin-bottom: .9rem; }

.kaart--stap { display: flex; flex-direction: column; }
.kaart--stap > form:last-child, .kaart--stap > .knop:last-child { margin-top: auto; }

.kaart--gevaar {
  border-color: var(--fout-lijn);
  background: linear-gradient(0deg, rgba(179, 39, 27, .035), rgba(179, 39, 27, .035)), var(--vlak);
}
.kaart--gevaar h3 { color: var(--fout); }

.kaart--merk {
  background: linear-gradient(155deg, var(--merk) 0%, var(--merk-dieper) 100%);
  border-color: rgba(255, 255, 255, .09);
  color: var(--inkt-inv-sterk);
  box-shadow: var(--schaduw-merk);
}
.kaart--merk h1, .kaart--merk h2, .kaart--merk h3 { color: #fff; }
.kaart--merk .sub { color: var(--inkt-inv); }

.raster { display: grid; gap: 1.15rem; }
@media (min-width: 48rem) { .raster--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .raster--3 { grid-template-columns: repeat(3, 1fr); } }
.raster > .kaart { margin-bottom: 0; }

/* ── Kerncijfers ────────────────────────────────────────────────────────── */

.kpi {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi__vak {
  position: relative;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: .95rem 1rem 1rem;
  box-shadow: var(--schaduw-xs);
  overflow: hidden;
}
.kpi__vak::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: .85;
}
.kpi__vak--let::before { background: var(--zon); }
.kpi__vak--klaar::before { background: var(--goed); }
.kpi__getal {
  font-family: var(--font-kop);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--merk);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi__label {
  color: var(--gedempt);
  font-size: .82rem;
  margin-top: .15rem;
  text-wrap: balance;
}

/* ── Tabellen ───────────────────────────────────────────────────────────── */

.tabel-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -.25rem;
  padding: 0 .25rem;
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td {
  text-align: left;
  padding: .62rem .7rem;
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--vlak);
  z-index: 1;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gedempt);
  font-weight: 700;
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}
tbody tr { transition: background-color .12s linear; }
tbody tr:hover { background: var(--vlak-zacht); }
tbody tr:last-child td { border-bottom: none; }
td.nummer, th.nummer { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td a { font-weight: 600; }

/* Op een telefoon wordt een tabel met `tabel--stapel` een lijst kaartjes.
   De kolomnaam komt uit het data-label van de cel. */
@media (max-width: 47.99rem) {
  .tabel--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabel--stapel, .tabel--stapel tbody, .tabel--stapel tr, .tabel--stapel td { display: block; width: 100%; }
  .tabel--stapel tr {
    border: 1px solid var(--lijn);
    border-radius: var(--r-sm);
    padding: .7rem .85rem;
    margin-bottom: .6rem;
    background: var(--vlak);
  }
  .tabel--stapel tr:hover { background: var(--vlak); }
  .tabel--stapel td { border: none; padding: .2rem 0; text-align: left !important; }
  .tabel--stapel td[data-label] { padding: .3rem 0 .35rem; }
  .tabel--stapel td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--gedempt);
  }
  .tabel--stapel td:not([data-label]) { padding-top: .6rem; }
  .tabel--stapel td + td[data-label] { border-top: 1px solid var(--lijn-zacht); }
}

/* ── Formulieren ────────────────────────────────────────────────────────── */

.veld { margin-bottom: .9rem; }
.veld label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: .3rem; color: var(--merk); }
.veld .hint, .hint { color: var(--gedempt); font-size: .84rem; margin: .3rem 0 0; }
.hint a { color: var(--accent-donker); }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: .58rem .7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 16px;      /* voorkomt inzoomen op iOS */
  color: var(--inkt);
  background: var(--vlak);
  transition: border-color .15s var(--soepel), box-shadow .15s var(--soepel);
  min-height: 44px;      /* comfortabel raakvlak */
}
@media (min-width: 48rem) {
  input[type=text], input[type=email], input[type=tel], input[type=password],
  input[type=date], input[type=number], input[type=search], select, textarea { font-size: .95rem; }
}
input::placeholder, textarea::placeholder { color: #67768a; }
input:hover, select:hover, textarea:hover { border-color: #c3cfdf; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
input[aria-invalid="true"], .veld--fout input, .veld--fout select, .veld--fout textarea {
  border-color: var(--fout);
  background: #fffafa;
}
input[aria-invalid="true"]:focus { border-color: var(--fout); box-shadow: 0 0 0 3px rgba(179, 39, 27, .22); }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2351606f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 15px;
  padding-right: 2rem;
}
input[type=checkbox], input[type=radio] {
  accent-color: var(--accent);
  width: 1.05rem; height: 1.05rem;
  margin: 0 .15rem 0 0;
  vertical-align: -.15rem;
}

.veld-rij { display: grid; gap: .8rem; }
@media (min-width: 40rem) {
  .veld-rij--2 { grid-template-columns: 1fr 1fr; }
  .veld-rij--3 { grid-template-columns: repeat(3, 1fr); }
}

fieldset {
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1.15rem;
  background: var(--vlak-zacht);
}
legend {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: .95rem;
  color: var(--merk);
  padding: 0 .45rem;
  margin-left: -.45rem;
}

details {
  border: 1px solid var(--lijn);
  border-radius: var(--r-sm);
  padding: .1rem .9rem;
  background: var(--vlak);
}
details[open] { padding-bottom: .8rem; }
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--merk);
  padding: .7rem 0;
  list-style-position: inside;
}
summary:hover { color: var(--accent-donker); }

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--accent-donker);
  color: #fff;
  border: 1px solid var(--accent-donker);
  padding: .58rem 1.15rem;
  min-height: 42px;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(10, 22, 38, .12);
  transition: background-color .16s var(--soepel), border-color .16s var(--soepel),
              transform .16s var(--soepel), box-shadow .16s var(--soepel);
}
.knop:hover {
  background: var(--accent-donkerder);
  border-color: var(--accent-donkerder);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 99, 214, .55);
}
.knop:active { transform: translateY(1px); box-shadow: none; }

.knop--secundair {
  background: var(--vlak);
  color: var(--merk);
  border-color: var(--lijn);
  box-shadow: var(--schaduw-xs);
}
.knop--secundair:hover {
  background: var(--vlak-zacht);
  border-color: #c3cfdf;
  color: var(--merk);
  box-shadow: var(--schaduw-xs);
}

.knop--merk { background: var(--merk); border-color: var(--merk); }
.knop--merk:hover { background: var(--merk-2); border-color: var(--merk-2); }

.knop--gevaar { background: var(--vlak); color: var(--fout); border-color: var(--fout-lijn); box-shadow: none; }
.knop--gevaar:hover { background: var(--fout-vlak); border-color: var(--fout); color: var(--fout); box-shadow: none; }

.knop--stil { background: transparent; color: var(--merk); border-color: var(--lijn); box-shadow: none; }
.knop--stil:hover { background: var(--vlak-zacht); color: var(--merk); box-shadow: none; }

.knop--klein { padding: .32rem .8rem; min-height: 34px; font-size: .84rem; }
.knop--breed { width: 100%; }

.knop[disabled], .knop[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.knop-rij { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* ── Meldingen ──────────────────────────────────────────────────────────── */

.melding {
  border-radius: var(--r);
  padding: .85rem 1.05rem;
  margin-bottom: 1.15rem;
  border: 1px solid;
  border-left-width: 4px;
  font-size: .93rem;
}
.melding strong { font-weight: 700; }
.melding--ok   { background: var(--goed-vlak); border-color: var(--goed-lijn); border-left-color: var(--goed); color: #08462f; }
.melding--fout { background: var(--fout-vlak); border-color: var(--fout-lijn); border-left-color: var(--fout); color: #7a1c14; }
.melding--info { background: var(--zon-vlak);  border-color: var(--zon-lijn);  border-left-color: var(--zon);  color: var(--zon-diep); }
.melding--tip  { background: var(--accent-tint); border-color: #bcd9fb; border-left-color: var(--accent); color: var(--accent-dieper); }
.melding a { color: inherit; font-weight: 600; }

/* ── Statuslabels ───────────────────────────────────────────────────────── */

.label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .6rem;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--vlak-zacht-2);
  color: #445366;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: .05em;
}
.label::before {
  content: '';
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
  flex: none;
}
.label--concept      { background: var(--vlak-zacht-2); color: #445366; }
.label--uitgenodigd,
.label--herinnerd    { background: var(--zon-vlak); color: var(--zon-diep); border-color: var(--zon-lijn); }
.label--ingepland,
.label--bevestigd    { background: var(--accent-tint); color: var(--accent-dieper); border-color: #c6dffc; }
.label--uitgevoerd,
.label--afgerond,
.label--actief       { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed-lijn); }
.label--geen_reactie { background: var(--fout-vlak); color: var(--fout); border-color: var(--fout-lijn); }
.label--geannuleerd  { background: var(--vlak-zacht-2); color: #5d6879; text-decoration: line-through; }
.label--in_uitvoering{ background: var(--accent-tint); color: var(--accent-dieper); border-color: #c6dffc; }

/* Op donkere ondergrond mag volt schitteren. */
.label--volt {
  background: var(--volt-zacht);
  border-color: var(--volt-lijn);
  color: var(--volt);
}

/* ── Slotkiezer (klantportaal) ──────────────────────────────────────────── */

.slots {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.slot {
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  background: var(--vlak);
  padding: 0;
  transition: border-color .15s var(--soepel), box-shadow .15s var(--soepel), background-color .15s var(--soepel);
}
.slot:hover { border-color: var(--accent-licht); background: var(--vlak-zacht); }
.slot label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem .95rem;
  cursor: pointer;
  min-height: 44px;
}
.slot input { margin: .2rem 0 0; flex: none; }
.slot:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--ring);
}
.slot:has(input:focus-visible) { box-shadow: var(--ring); }
.slot__tekst { display: block; min-width: 0; }
.slot__dag { font-weight: 700; color: var(--merk); display: block; }
.slot__dag::first-letter { text-transform: uppercase; }
.slot__deel { color: var(--gedempt); font-size: .88rem; display: block; }

/* ── Afspraakkaart in het portaal ───────────────────────────────────────── */

.afspraak__datum {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.75rem);
  letter-spacing: -.025em;
  color: #fff;
  margin: .55rem 0 .1rem;
}
.afspraak__datum::first-letter { text-transform: uppercase; }
.afspraak__deel { color: var(--inkt-inv-sterk); margin: 0; }

.portaal-voetrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
  font-size: .9rem;
}

/* ── Stappenlijst ───────────────────────────────────────────────────────── */

.stap-lijst { counter-reset: stap; list-style: none; padding: 0; margin: 0 0 1rem; }
.stap-lijst li { position: relative; padding-left: 2.35rem; margin-bottom: .8rem; }
.stap-lijst li::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute; left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem;
  background: var(--accent-tint);
  color: var(--accent-dieper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-kop);
  font-weight: 800; font-size: .8rem;
}

/* Genummerde werkstappen in een kaartkop (1. Capaciteit, 2. Beurten, …) */
.stap-kop { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.stap-kop__nr {
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 50%;
  background: var(--merk); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-kop); font-weight: 800; font-size: .78rem;
}
.stap-kop h3 { margin: 0; }

/* ── Lege staten en voettekst ───────────────────────────────────────────── */

.leeg {
  color: var(--gedempt);
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--vlak-zacht);
  border: 1px dashed var(--lijn);
  border-radius: var(--r-sm);
  font-size: .93rem;
}
.leeg a { font-weight: 600; }

.voet {
  color: var(--gedempt);
  font-size: .84rem;
  text-align: center;
  padding: 1.75rem 1.15rem 2.5rem;
  border-top: 1px solid var(--lijn);
  background: var(--vlak);
  flex: none;
}
.voet a { color: var(--accent-donker); }
.voet__merk { font-weight: 600; color: var(--merk); }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.skip:focus {
  left: .75rem; top: .75rem;
  background: #fff; color: var(--merk);
  padding: .6rem 1rem;
  border-radius: var(--r-sm);
  box-shadow: var(--schaduw);
  font-weight: 600;
}

/* ── Inlogscherm ────────────────────────────────────────────────────────── */

.aanmelden {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.15rem 3rem;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(0, 123, 255, .16), transparent 65%),
    linear-gradient(175deg, var(--merk-dieper) 0%, var(--merk-diepst) 100%);
}
.aanmelden__blok { width: 100%; max-width: 27rem; }
.aanmelden .merk { margin: 0 0 1.35rem; justify-content: center; }
.aanmelden .merk__teken { width: 40px; height: 40px; }
.aanmelden .merk__naam { font-size: 1.15rem; }
.aanmelden__kaart {
  background: var(--vlak);
  border-radius: var(--r-lg);
  box-shadow: var(--schaduw-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
}
.aanmelden__kaart h1 { font-size: 1.4rem; }
.aanmelden__voet {
  text-align: center;
  color: var(--inkt-inv);
  font-size: .83rem;
  margin-top: 1.15rem;
}
.aanmelden__voet a { color: var(--accent-licht); }

.paginering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lijn-zacht);
}

.telling {
  display: inline-block;
  font-family: var(--font);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--gedempt);
  background: var(--vlak-zacht-2);
  border-radius: var(--r-pill);
  padding: .1rem .6rem;
  margin-left: .45rem;
  vertical-align: .12em;
}

/* ── Foutpagina's ───────────────────────────────────────────────────────── */

.foutcode {
  display: inline-block;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gedempt);
  background: var(--vlak-zacht-2);
  border-radius: var(--r-pill);
  padding: .16rem .7rem;
  margin-bottom: .7rem;
}

/* ── Blokken in de agenda ───────────────────────────────────────────────── */

.beurt-blok {
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: .95rem 1rem;
  margin-bottom: .75rem;
  background: var(--vlak);
  transition: border-color .15s var(--soepel), box-shadow .15s var(--soepel);
}
.beurt-blok:hover { border-color: #c9d6e6; box-shadow: var(--schaduw-xs); }
.beurt-blok:last-child { margin-bottom: 0; }
.beurt-blok__kop { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.beurt-blok__naam { font-family: var(--font-kop); font-weight: 700; font-size: 1.02rem; color: var(--merk); }

/* ── Hulpklassen ─────────────────────────────────────────────────────────
   De CSP staat geen style-attribuut toe. Alles wat anders inline zou staan,
   staat hier als klasse. */

.m0 { margin: 0; }
.mid { text-align: center; }
.groen { color: var(--merk); }
.fout-tekst, .veld .hint.fout-tekst { color: var(--fout); font-weight: 600; }
.pre { white-space: pre-wrap; }
.w-auto { width: auto; }
.inline { display: inline; }
.zelf-onder { align-self: end; }
.span-2 { grid-column: span 2; }
.nowrap { white-space: nowrap; }
.smal { max-width: 8rem; }
.verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.mt-xs { margin: .2rem 0 0; }
.mt-s  { margin: .5rem 0 0; }
.mt-s2 { margin-top: .6rem; }
.mt-m  { margin-top: 1rem; }
.mt-l  { margin-top: 1.5rem; }
.mb-xs { margin-bottom: .4rem; }
.mb-s  { margin-bottom: .5rem; }
.mb-m  { margin-bottom: 1rem; }
.mb-l  { margin-bottom: 1.4rem; }
.pt-xl { padding-top: 2.5rem; }

.rij       { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.rij-end   { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.rij-kort  { display: flex; gap: .35rem; align-items: center; }
.kol       { flex: 1 1 220px; }
.kol-breed { flex: 1 1 260px; }

.rij-scheiding { border-top: 1px solid var(--lijn-zacht); padding-top: .8rem; margin-bottom: .8rem; }
.rij-scheiding:first-of-type { border-top: none; padding-top: 0; }
.scheiding { border: none; border-top: 1px solid var(--lijn); margin: 1.1rem 0; }
.checkbox-regel { font-weight: 400 !important; display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; color: var(--inkt) !important; }
.textarea-klein { min-height: 86px; }

/* ── Bewegingsvoorkeur ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Afdrukken ──────────────────────────────────────────────────────────
   De dagplanning wordt uitgeprint of als PDF meegenomen naar de klant. */

@media print {
  body { background: #fff; font-size: 11pt; }
  .topbar, .voet, .kop__acties, .skip, form, .knop { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .kaart, .beurt-blok, .kpi__vak {
    box-shadow: none;
    border-color: #cbd3de;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a { color: inherit; text-decoration: none; }
  thead th { position: static; }
}