/* ==========================================================================
   La Moon Portal — vormgeving voor het beheerportaal en het klantportaal
   --------------------------------------------------------------------------
   Staat los van style.css: dat is de vormgeving van de website, dit is een
   werkomgeving. De kleuren en letters zijn wel dezelfde, zodat het bij het
   merk blijft horen.
   ========================================================================== */

:root {
  /* Dezelfde tinten als de website (style.css); de donkerste drie zijn in
     oktober 2026 lichter gemaakt */
  --sage-950: #253229; --sage-900: #2E3E33; --sage-800: #394E41; --sage-700: #3A4B40;
  --sage-950-rgb: 37, 50, 41; --sage-900-rgb: 46, 62, 51;
  --sage-600: #4F6355; --sage-500: #6B7F72; --sage-400: #8B9B90; --sage-300: #A9B6AD;
  --sage-200: #C7D0CA; --sage-100: #E1E7E3; --sage-50:  #F0F4F1;

  --gold-700: #8A6420; --gold-600: #B0822C; --gold-500: #D6A23A; --gold-400: #FBC24F;
  --gold-300: #F8D585; --gold-200: #F5E3B6; --gold-100: #FBF4E2;

  --cream: #FAF7F1; --cream-alt: #F4EFE5; --paper: #FFFDF9;
  --ink: #1A1F1C; --ink-soft: #45514A; --ink-mute: #6E7C74;

  --rood: #8A3122; --rood-zacht: #FBEDEA; --rood-rand: #E8BDB5;
  --groen: #2F6B45; --groen-zacht: #ECF5EF;
  --blauw: #2A4E6B; --blauw-zacht: #EDF3F7;

  /* Cormorant Garamond alleen voor koppen en grote cijfers. Alles wat je
     snel moet kunnen lezen, zoals knoppen, labels en tabelkoppen, staat in
     Jost. Het kleinkapitaal van de website (Cormorant SC) is op die kleine
     maten te dun en te sierlijk voor een werkomgeving. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rand: 1px solid var(--sage-200);
  --rond: 3px;
  --schaduw: 0 1px 2px rgba(26, 31, 28, .05), 0 4px 16px rgba(26, 31, 28, .05);
  --schaduw-op: 0 2px 6px rgba(26, 31, 28, .08), 0 12px 32px rgba(26, 31, 28, .12);
  --zijbalk: 15rem;
  --soepel: .18s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 15px/1.6 var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.18; margin: 0; }
h1 { font-size: 1.95rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

a { color: var(--sage-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold-700); }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Raamwerk
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--zijbalk) 1fr;
  min-height: 100vh;
}

/* -------------------------------------------------------------- zijbalk -- */
.zijbalk {
  background: var(--sage-900);
  color: var(--sage-100);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zijbalk__merk {
  display: block;
  padding: 1.4rem 1.25rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
  transition: background var(--soepel);
}
.zijbalk__merk:hover { background: rgba(255, 255, 255, .04); }

.zijbalk__logo {
  width: 100%;
  max-width: 10.5rem;
  height: auto;
  display: block;
}

.zijbalk__sub {
  font: 500 .6rem/1.2 var(--font-body);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-top: .45rem;
  padding-left: .15rem;
  display: block;
}

.zijbalk__menu { padding: 1rem .7rem; flex: 1; }

.zijbalk__kop {
  font: 600 .64rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-400);
  padding: 1.1rem .6rem .4rem;
}

/* Alleen de echte menu-items. Het logo en de voet hebben hun eigen opmaak;
   zonder deze afbakening kregen die ook de gouden markering. */
.zijbalk__menu a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: var(--rond);
  color: var(--sage-200);
  text-decoration: none;
  font-size: .92rem;
  transition: background var(--soepel), color var(--soepel);
}
.zijbalk__menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.zijbalk__menu a.is-hier { background: var(--gold-400); color: var(--sage-950); font-weight: 500; }
.zijbalk__menu a.is-hier svg { color: var(--sage-900); }

.zijbalk__menu svg { width: 1.05rem; height: 1.05rem; flex: none; stroke-width: 1.5; color: var(--sage-400); }
.zijbalk__menu a:hover svg { color: var(--gold-300); }

.zijbalk__teller {
  margin-left: auto;
  background: var(--gold-400);
  color: var(--sage-950);
  font-size: .7rem;
  font-weight: 600;
  min-width: 1.35rem;
  text-align: center;
  padding: .05rem .35rem;
  border-radius: 999px;
}
.zijbalk__menu a.is-hier .zijbalk__teller { background: var(--sage-900); color: var(--gold-300); }

/* ------------------------------------------------------- voet: wie ben ik - */
.zijbalk__voet {
  padding: .9rem 1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.zijbalk__wie {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.zijbalk__bol {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: rgba(251, 194, 79, .16);
  color: var(--gold-300);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .02em;
}

.zijbalk__wie div { min-width: 0; }

.zijbalk__naam {
  display: block;
  color: var(--sage-100);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zijbalk__rol {
  display: block;
  font: 400 .76rem/1.3 var(--font-body);
  color: var(--sage-400);
  margin-top: .05rem;
}

.zijbalk__acties {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
}
.zijbalk__acties > * {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .36rem .5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--rond);
  background: transparent;
  color: var(--sage-300);
  font: 500 .78rem/1.3 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--soepel), color var(--soepel), border-color var(--soepel);
}
.zijbalk__acties > *:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.zijbalk__acties svg { width: .9rem; height: .9rem; stroke-width: 1.6; flex: none; }

/* ------------------------------------------------------------ hoofddeel -- */
.hoofd { min-width: 0; display: flex; flex-direction: column; }

.bovenbalk {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 247, 241, .92);
  backdrop-filter: blur(10px);
  border-bottom: var(--rand);
  padding: .8rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bovenbalk__titel { font-size: 1.35rem; margin-right: auto; }
.bovenbalk__titel small {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--ink-mute);
  margin-top: .1rem;
}

.blad { padding: 1.6rem; max-width: 1500px; width: 100%; }
.blad--smal { max-width: 900px; }

.burger {
  display: none;
  background: none;
  border: var(--rand);
  border-radius: var(--rond);
  padding: .45rem .55rem;
  cursor: pointer;
  color: var(--ink);
}
.burger svg { width: 1.2rem; height: 1.2rem; display: block; }

/* --------------------------------------------------------- meekijkbalk -- */
.meekijk {
  background: var(--gold-400);
  color: var(--sage-950);
  padding: .5rem 1.6rem;
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.meekijk strong { font-weight: 600; }
.meekijk button {
  margin-left: auto;
  background: var(--sage-900);
  color: var(--gold-300);
  border: 0;
  padding: .3rem .9rem;
  border-radius: var(--rond);
  font: 500 .8rem/1.4 var(--font-body);
  cursor: pointer;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */
/* In Jost en niet in het kleinkapitaal van de website: dit is een
   werkomgeving en geen etalage, en een knop moet je in één oogopslag lezen. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .42rem 1.05rem;
  border: 1px solid var(--sage-300);
  background: #fff;
  color: var(--ink);
  border-radius: var(--rond);
  font: 500 .88rem/1.35 var(--font-body);
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--soepel), border-color var(--soepel), color var(--soepel), box-shadow var(--soepel);
}
.knop:hover { background: var(--sage-50); border-color: var(--sage-500); color: var(--ink); }
.knop:active { transform: translateY(1px); }
.knop:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.knop svg { width: 1rem; height: 1rem; stroke-width: 1.6; flex: none; }

.knop--goud { background: var(--gold-400); border-color: var(--gold-500); color: var(--sage-950); font-weight: 600; }
.knop--goud:hover { background: var(--gold-300); border-color: var(--gold-600); }

.knop--donker { background: var(--sage-800); border-color: var(--sage-800); color: #fff; }
.knop--donker:hover { background: var(--sage-700); border-color: var(--sage-700); color: #fff; }

.knop--kaal { border-color: transparent; background: transparent; }
.knop--kaal:hover { background: var(--sage-100); border-color: transparent; }

.knop--rood { color: var(--rood); border-color: var(--rood-rand); }
.knop--rood:hover { background: var(--rood-zacht); border-color: var(--rood); }

.knop--klein { padding: .28rem .7rem; font-size: .8rem; }
.knop--klein svg { width: .88rem; height: .88rem; }

.knop--breed { width: 100%; }

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

/* ==========================================================================
   Kaarten
   ========================================================================== */
.kaart {
  background: var(--paper);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.kaart__kop {
  padding: .95rem 1.2rem;
  border-bottom: var(--rand);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.kaart__kop h3, .kaart__kop h2 { margin-right: auto; }
.kaart__lijf { padding: 1.2rem; }
.kaart__lijf--strak { padding: 0; }
.kaart__voet {
  padding: .8rem 1.2rem;
  border-top: var(--rand);
  background: var(--sage-50);
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}

.raster { display: grid; gap: 1.1rem; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--zij { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ==========================================================================
   Kerncijfers
   ========================================================================== */
.cijfer {
  background: var(--paper);
  border: var(--rand);
  border-radius: var(--rond);
  padding: 1rem 1.15rem;
  box-shadow: var(--schaduw);
}
.cijfer__waarde {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--sage-800);
}
.cijfer__naam {
  font: 600 .66rem/1.35 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .35rem;
}
.cijfer--goud .cijfer__waarde { color: var(--gold-700); }

/* ==========================================================================
   Labels en statussen
   ========================================================================== */
.label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .13rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .02em;
  background: var(--sage-100);
  color: var(--sage-800);
  white-space: nowrap;
}
.label--aanvraag    { background: var(--sage-100);  color: var(--sage-800); }
.label--ontwerp     { background: var(--blauw-zacht); color: var(--blauw); }
.label--goedkeuring { background: var(--gold-100);  color: var(--gold-700); }
.label--productie   { background: var(--gold-200);  color: var(--gold-700); }
.label--afwerking   { background: var(--gold-200);  color: var(--gold-700); }
.label--gereed      { background: var(--groen-zacht); color: var(--groen); }
.label--geleverd    { background: var(--groen-zacht); color: var(--groen); }
.label--geannuleerd { background: var(--rood-zacht); color: var(--rood); }

.label--open        { background: var(--sage-100);  color: var(--sage-800); }
.label--bezig       { background: var(--gold-200);  color: var(--gold-700); }
.label--klaar       { background: var(--groen-zacht); color: var(--groen); }

.label--gepland     { background: var(--sage-100);  color: var(--sage-800); }
.label--bevestigd   { background: var(--groen-zacht); color: var(--groen); }
.label--afgerond    { background: var(--sage-100);  color: var(--ink-mute); }
.label--verzet      { background: var(--gold-100);  color: var(--gold-700); }

.label--concept     { background: var(--sage-100);  color: var(--sage-800); }
.label--verzonden   { background: var(--blauw-zacht); color: var(--blauw); }
.label--gedeeltelijk{ background: var(--gold-200);  color: var(--gold-700); }
.label--betaald     { background: var(--groen-zacht); color: var(--groen); }
.label--vervallen   { background: var(--rood-zacht); color: var(--rood); }

.label--hoog        { background: var(--rood-zacht); color: var(--rood); }
.label--normaal     { background: var(--sage-100);  color: var(--sage-700); }
.label--laag        { background: var(--sage-50);   color: var(--ink-mute); }

.label--op-voorraad   { background: var(--groen-zacht); color: var(--groen); }
.label--bijna-op      { background: var(--gold-200);  color: var(--gold-700); }
.label--besteld       { background: var(--blauw-zacht); color: var(--blauw); }
.label--niet-leverbaar{ background: var(--rood-zacht); color: var(--rood); }
.label--nodig         { background: var(--sage-100);  color: var(--sage-800); }
.label--gereserveerd  { background: var(--gold-100);  color: var(--gold-700); }
.label--ontvangen     { background: var(--blauw-zacht); color: var(--blauw); }
.label--verwerkt      { background: var(--groen-zacht); color: var(--groen); }
.label--aangevraagd   { background: var(--sage-100);  color: var(--sage-800); }
.label--geaccepteerd  { background: var(--blauw-zacht); color: var(--blauw); }
.label--onderweg      { background: var(--gold-200);  color: var(--gold-700); }

.label--portaal     { background: var(--sage-100);  color: var(--sage-800); }
.label--whatsapp    { background: #E3F5E8;          color: #1E6B38; }
.label--email       { background: var(--blauw-zacht); color: var(--blauw); }

.label--lamoon      { background: var(--gold-100);  color: var(--gold-700); }
.label--klant       { background: var(--blauw-zacht); color: var(--blauw); }

/* Het offertetraject */
.label--prospect    { background: var(--gold-100);  color: var(--gold-700);
                      outline: 1px dashed var(--gold-500); outline-offset: -1px; }
.label--offerte     { background: var(--gold-100);  color: var(--gold-700); }
.label--akkoord     { background: var(--groen-zacht); color: var(--groen); }
.label--niet-akkoord{ background: var(--rood-zacht); color: var(--rood); }
.label--verlopen    { background: var(--rood-zacht); color: var(--rood); }
.label--offerte-concept   { background: var(--sage-100);  color: var(--sage-800); }
.label--offerte-verstuurd { background: var(--blauw-zacht); color: var(--blauw); }
.label--offerte-deels     { background: var(--gold-200);  color: var(--gold-700); }
.label--offerte-akkoord   { background: var(--groen-zacht); color: var(--groen); }
.label--offerte-afgewezen { background: var(--rood-zacht); color: var(--rood); }
.label--reparatie   { background: var(--blauw-zacht); color: var(--blauw); }
.label--vermaken    { background: var(--gold-100);  color: var(--gold-700); }
.label--nieuwwerk   { background: var(--groen-zacht); color: var(--groen); }
.label--anders      { background: var(--sage-100);  color: var(--sage-800); }
.label svg { width: .8rem; height: .8rem; }

.stip { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }

/* ==========================================================================
   Voortgang
   ========================================================================== */
.balk {
  height: .45rem;
  background: var(--sage-100);
  border-radius: 999px;
  overflow: hidden;
}
.balk__vul {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.balk--dun { height: .28rem; }

.voortgang { display: flex; align-items: center; gap: .6rem; }
.voortgang .balk { flex: 1; min-width: 3rem; }
.voortgang__cijfer { font-size: .8rem; color: var(--ink-mute); min-width: 2.4rem; text-align: right; }

/* ==========================================================================
   Tabellen
   ========================================================================== */
.tabelwrap { overflow-x: auto; }

.tabel { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabel th {
  text-align: left;
  font: 600 .66rem/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: .7rem 1rem;
  border-bottom: var(--rand);
  background: var(--sage-50);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabel td { padding: .75rem 1rem; border-bottom: 1px solid var(--sage-100); vertical-align: top; }
.tabel tbody tr { transition: background var(--soepel); }
.tabel tbody tr:hover { background: var(--sage-50); }
.tabel tbody tr.is-klikbaar { cursor: pointer; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .rechts { text-align: right; }
.tabel .smal { width: 1%; white-space: nowrap; }

.tabel__hoofd { font-weight: 500; color: var(--ink); }
.tabel__sub { font-size: .8rem; color: var(--ink-mute); }

/* ==========================================================================
   Formulieren
   ========================================================================== */
.veld { margin-bottom: 1rem; }
.veld:last-child { margin-bottom: 0; }

.veld > label, .veldnaam {
  display: block;
  font: 500 .8rem/1.4 var(--font-body);
  color: var(--sage-700);
  margin-bottom: .35rem;
}

.invoer, .keuze, .memo {
  width: 100%;
  padding: .55rem .75rem;
  font: 400 .92rem/1.5 var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--sage-300);
  border-radius: var(--rond);
  transition: border-color var(--soepel), box-shadow var(--soepel);
}
.invoer:focus, .keuze:focus, .memo:focus {
  outline: 0;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-100);
}
.invoer[aria-invalid="true"], .memo[aria-invalid="true"] { border-color: var(--rood); }
.memo { min-height: 5rem; resize: vertical; }
.keuze { appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7C74' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: .9rem;
}
.invoer[readonly] { background: var(--sage-50); color: var(--ink-mute); }

.hulp { font-size: .78rem; color: var(--ink-mute); margin-top: .3rem; }

/* De rij zelf houdt afstand tot wat eronder staat, niet de velden erin.
   Anders plakt de volgende veldnaam ertegenaan zodra de rij op een smal
   scherm onder elkaar valt. */
.veldrij { display: grid; gap: .9rem; margin-bottom: 1rem; }
.veldrij:last-child { margin-bottom: 0; }
.veldrij > .veld { margin-bottom: 0; }
.veldrij--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.veldrij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vink { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; cursor: pointer; }
.vink input { margin-top: .22rem; width: 1rem; height: 1rem; accent-color: var(--gold-500); flex: none; }
.vink--groot { font-size: .95rem; padding: .7rem .85rem; border: 1px solid var(--sage-200); border-radius: var(--rond); background: #fff; }
.vink--groot input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; }

/* Straat breder dan postcode en plaats */
.veldrij--adres { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }

/* --------------------------------------------------------- keuzeknoppen - */
/* Radioknoppen die eruitzien als labels om aan te tikken; groot genoeg voor
   een vinger op een tablet */
.keuzes { display: flex; flex-wrap: wrap; gap: .4rem; }
.keuzes__optie { position: relative; cursor: pointer; }
.keuzes__optie input {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.keuzes__optie span {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.5rem; padding: .45rem 1.05rem;
  border: 1px solid var(--sage-300); border-radius: 999px; background: #fff;
  font: 400 .92rem/1.25 var(--font-body); color: var(--ink-soft);
  transition: background var(--soepel), border-color var(--soepel), color var(--soepel);
  user-select: none;
}
.keuzes__optie:hover span { border-color: var(--sage-500); color: var(--ink); }
.keuzes__optie input:checked + span { background: var(--sage-800); border-color: var(--sage-800); color: #fff; }
.keuzes__optie input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.keuzes--klein .keuzes__optie span { min-height: 2.1rem; padding: .3rem .8rem; font-size: .84rem; }

/* -------------------------------------------------------------- zoekbalk - */
.gereedschap {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.1rem;
}
.zoek { position: relative; flex: 1; min-width: 12rem; max-width: 24rem; }
.zoek .invoer { padding-left: 2.2rem; }
.zoek svg {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--ink-mute); pointer-events: none;
}

.filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter {
  padding: .35rem .8rem;
  border: 1px solid var(--sage-200);
  background: #fff;
  border-radius: 999px;
  font: 400 .82rem/1.4 var(--font-body);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--soepel);
}
.filter:hover { border-color: var(--sage-400); }
.filter.is-aan { background: var(--sage-800); border-color: var(--sage-800); color: #fff; }

/* ==========================================================================
   Tabbladen
   ========================================================================== */
.tabs {
  display: flex;
  gap: .15rem;
  border-bottom: var(--rand);
  margin-bottom: 1.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  padding: .6rem 1rem;
  border: 0;
  background: none;
  border-bottom: 2px solid transparent;
  font: 400 .9rem/1.4 var(--font-body);
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tab:hover { color: var(--ink); }
.tab.is-aan { color: var(--sage-900); border-bottom-color: var(--gold-400); font-weight: 500; }
.tab__teller {
  background: var(--sage-100);
  color: var(--sage-700);
  font-size: .7rem;
  padding: .02rem .4rem;
  border-radius: 999px;
}
.tab.is-aan .tab__teller { background: var(--gold-200); color: var(--gold-700); }

/* ==========================================================================
   Meldingen
   ========================================================================== */
.melding {
  display: flex;
  gap: .65rem;
  padding: .8rem 1rem;
  border-radius: var(--rond);
  font-size: .89rem;
  border: 1px solid;
  align-items: flex-start;
}
.melding svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; }
.melding--ok   { background: var(--groen-zacht); border-color: #BFDCC9; color: var(--groen); }
.melding--fout { background: var(--rood-zacht);  border-color: var(--rood-rand); color: var(--rood); }
.melding--let  { background: var(--gold-100);    border-color: var(--gold-300); color: var(--gold-700); }
.melding--info { background: var(--blauw-zacht); border-color: #C3D6E3; color: var(--blauw); }

/* Zwevende bevestiging rechtsonder */
.toost {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toost__item {
  background: var(--sage-900);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: var(--rond);
  font-size: .88rem;
  box-shadow: var(--schaduw-op);
  animation: toostIn .28s cubic-bezier(.2, .9, .3, 1);
  max-width: 24rem;
}
.toost__item--fout { background: var(--rood); }
@keyframes toostIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Lege toestand
   ========================================================================== */
.leeg {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-mute);
}
.leeg svg { width: 2.4rem; height: 2.4rem; color: var(--sage-300); margin: 0 auto .8rem; stroke-width: 1.1; }
.leeg h3 { color: var(--ink-soft); margin-bottom: .35rem; }
.leeg p { font-size: .9rem; max-width: 26rem; margin: 0 auto; }

/* ==========================================================================
   Wachten
   ========================================================================== */
.tol {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: draai .7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.laden { padding: 3rem; text-align: center; color: var(--ink-mute); }

.skelet {
  background: linear-gradient(90deg, var(--sage-50) 25%, var(--sage-100) 37%, var(--sage-50) 63%);
  background-size: 400% 100%;
  animation: glijd 1.4s ease infinite;
  border-radius: var(--rond);
  height: 1rem;
}
@keyframes glijd { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   Venster (dialoog)
   ========================================================================== */
.venster {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(26, 31, 28, .45);
  backdrop-filter: blur(3px);
  animation: vervaag .18s ease;
}
@keyframes vervaag { from { opacity: 0; } to { opacity: 1; } }

.venster__blad {
  background: var(--paper);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-op);
  width: min(42rem, 100%);
  max-height: calc(100vh - 2.4rem);
  display: flex;
  flex-direction: column;
  animation: omhoog .24s cubic-bezier(.2, .9, .3, 1);
}
.venster__blad--breed { width: min(62rem, 100%); }
@keyframes omhoog { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }

.venster__kop {
  padding: 1.1rem 1.3rem;
  border-bottom: var(--rand);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.venster__kop h2 { margin-right: auto; font-size: 1.3rem; }
.venster__lijf { padding: 1.3rem; overflow-y: auto; }
.venster__voet {
  padding: .9rem 1.3rem;
  border-top: var(--rand);
  background: var(--sage-50);
  display: flex;
  gap: .55rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sluit {
  background: none; border: 0; cursor: pointer; padding: .3rem;
  color: var(--ink-mute); border-radius: var(--rond); line-height: 0;
}
.sluit:hover { background: var(--sage-100); color: var(--ink); }
.sluit svg { width: 1.2rem; height: 1.2rem; }

/* ==========================================================================
   Tijdlijn met updates
   ========================================================================== */
.tijdlijn { position: relative; padding-left: 1.6rem; }
.tijdlijn::before {
  content: ""; position: absolute; left: .32rem; top: .4rem; bottom: .4rem;
  width: 1px; background: var(--sage-200);
}
.tijdstip { position: relative; padding-bottom: 1.5rem; }
.tijdstip:last-child { padding-bottom: 0; }
.tijdstip::before {
  content: ""; position: absolute; left: -1.6rem; top: .35rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--gold-400); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--gold-300);
}
.tijdstip--stil::before { background: var(--sage-300); box-shadow: 0 0 0 1px var(--sage-200); }
.tijdstip__wanneer { font-size: .78rem; color: var(--ink-mute); }
.tijdstip__titel { font-family: var(--font-display); font-size: 1.1rem; margin: .1rem 0 .3rem; }

/* ==========================================================================
   Berichten
   ========================================================================== */
.gesprek { display: flex; flex-direction: column; gap: .9rem; }

.bericht { max-width: 42rem; }
.bericht__kop {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: var(--ink-mute); margin-bottom: .25rem;
}
.bericht__lijf {
  padding: .75rem 1rem;
  border-radius: var(--rond);
  background: var(--sage-50);
  border: 1px solid var(--sage-100);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
}
.bericht--uit { margin-left: auto; }
.bericht--uit .bericht__kop { justify-content: flex-end; }
.bericht--uit .bericht__lijf { background: var(--gold-100); border-color: var(--gold-200); }
.bericht--ongelezen .bericht__lijf { border-left: 3px solid var(--gold-500); }
.bericht__onderwerp { font-weight: 600; display: block; margin-bottom: .3rem; }

.inbox { display: grid; grid-template-columns: 22rem minmax(0, 1fr); min-height: 30rem; }
.inbox__lijst { border-right: var(--rand); overflow-y: auto; max-height: calc(100vh - 14rem); }
.inbox__item {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--sage-100);
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border-left: 3px solid transparent;
  font: inherit;
}
.inbox__item:hover { background: var(--sage-50); }
.inbox__item.is-aan { background: var(--gold-100); border-left-color: var(--gold-500); }
.inbox__item.is-nieuw .inbox__naam { font-weight: 600; }
.inbox__naam { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.inbox__naam time { margin-left: auto; font-size: .74rem; color: var(--ink-mute); font-weight: 400; }
.inbox__flard {
  font-size: .82rem; color: var(--ink-mute); margin-top: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox__paneel { display: flex; flex-direction: column; max-height: calc(100vh - 14rem); }
.inbox__stroom { flex: 1; overflow-y: auto; padding: 1.2rem; }
.inbox__antwoord { border-top: var(--rand); padding: 1rem 1.2rem; background: var(--sage-50); }

/* ==========================================================================
   Bestanden
   ========================================================================== */
.bestanden { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }

.bestand {
  border: var(--rand);
  border-radius: var(--rond);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--soepel), transform var(--soepel);
}
.bestand:hover { box-shadow: var(--schaduw-op); transform: translateY(-2px); }
.bestand__beeld {
  aspect-ratio: 4 / 3;
  background: var(--sage-50);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.bestand__beeld img, .bestand__beeld video { width: 100%; height: 100%; object-fit: cover; }
.bestand__beeld svg { width: 2rem; height: 2rem; color: var(--sage-400); stroke-width: 1.2; }
.bestand__info { padding: .6rem .7rem; font-size: .8rem; }
.bestand__naam {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; color: var(--ink);
}
.bestand__meta { color: var(--ink-mute); font-size: .74rem; margin-top: .2rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.bestand__acties { padding: 0 .7rem .7rem; display: flex; gap: .35rem; }

.neerzetvlak {
  border: 2px dashed var(--sage-300);
  border-radius: var(--rond);
  padding: 1.6rem;
  text-align: center;
  color: var(--ink-mute);
  font-size: .88rem;
  transition: all var(--soepel);
  cursor: pointer;
}
.neerzetvlak:hover, .neerzetvlak.is-over { border-color: var(--gold-500); background: var(--gold-100); color: var(--gold-700); }
.neerzetvlak svg { width: 1.6rem; height: 1.6rem; margin: 0 auto .5rem; stroke-width: 1.2; }

/* ==========================================================================
   Planning
   ========================================================================== */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }

.dag {
  background: var(--paper);
  border: var(--rand);
  border-radius: var(--rond);
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}
.dag--dicht { background: var(--sage-50); opacity: .75; }
.dag--vandaag { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }

.dag__kop { padding: .5rem .6rem; border-bottom: var(--rand); }
.dag__naam { font: 600 .64rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.dag__nummer { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.dag__lijf { padding: .45rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }

.dag__capaciteit { padding: .4rem .6rem; border-top: var(--rand); font-size: .72rem; color: var(--ink-mute); }
.dag__capaciteit.is-vol { color: var(--rood); font-weight: 500; }

.blokje {
  padding: .35rem .5rem;
  border-radius: var(--rond);
  font-size: .76rem;
  line-height: 1.35;
  border-left: 3px solid;
  background: var(--sage-50);
  border-left-color: var(--sage-400);
  cursor: pointer;
  text-align: left;
  border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  font-family: inherit;
  color: var(--ink);
}
.blokje:hover { filter: brightness(.97); }
.blokje--afspraak { background: var(--gold-100); border-left-color: var(--gold-500); }
.blokje--deadline { background: var(--rood-zacht); border-left-color: var(--rood); color: var(--rood); }
.blokje--mijlpaal { background: var(--blauw-zacht); border-left-color: var(--blauw); color: var(--blauw); }
.blokje strong { display: block; font-weight: 500; }
.blokje time { color: var(--ink-mute); font-size: .7rem; }

/* ==========================================================================
   Klantportaal: de fasen van het maakproces
   ========================================================================== */
.fasen {
  display: flex;
  gap: .3rem;
  margin: 1.4rem 0;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.fase {
  flex: 1;
  min-width: 6.2rem;
  text-align: center;
  position: relative;
  padding-top: 1.9rem;
}
.fase::before {
  content: "";
  position: absolute;
  top: .52rem;
  left: 0; right: 0;
  height: 2px;
  background: var(--sage-200);
}
.fase:first-child::before { left: 50%; }
.fase:last-child::before { right: 50%; }
.fase__bol {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--sage-300);
  z-index: 1;
}
.fase__naam { font-size: .8rem; color: var(--ink-mute); line-height: 1.3; }
.fase__uitleg { font-size: .72rem; color: var(--sage-400); margin-top: .1rem; }

.fase.is-gehad::before { background: var(--gold-400); }
.fase.is-gehad .fase__bol { background: var(--gold-400); border-color: var(--gold-500); }
.fase.is-gehad .fase__naam { color: var(--ink-soft); }

.fase.is-nu .fase__bol {
  background: var(--gold-400);
  border-color: var(--gold-600);
  box-shadow: 0 0 0 4px var(--gold-100);
  width: 1.3rem; height: 1.3rem;
  top: -.1rem;
}
.fase.is-nu .fase__naam { color: var(--sage-900); font-weight: 600; }

/* ==========================================================================
   Klantportaal: rustiger en ruimer dan het beheerportaal
   ========================================================================== */
.klantportaal { --zijbalk: 14rem; }
.klantportaal .blad { max-width: 1100px; }

.welkom {
  background: linear-gradient(135deg, var(--sage-800), var(--sage-900));
  color: #fff;
  border-radius: var(--rond);
  padding: 2rem 2.2rem;
  margin-bottom: 1.4rem;
}
.welkom h1 { color: #fff; font-size: 2.1rem; }
.welkom p { color: var(--sage-200); margin-top: .4rem; max-width: 40rem; }
.welkom .label { background: rgba(255, 255, 255, .14); color: var(--gold-300); }

.aanmeldblad {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(251, 194, 79, .10), transparent 60%),
    var(--cream);
}
.aanmeldkaart {
  width: min(26rem, 100%);
  background: var(--paper);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-op);
  padding: 2rem;
}
.aanmeldkaart h1 { font-size: 1.7rem; margin-bottom: .25rem; }
.aanmeldkaart .hulp { margin-bottom: 1.4rem; }

.aanmeldlogo {
  display: block;
  width: 11rem;
  max-width: 70%;
  height: auto;
  margin: 0 auto 1.6rem;
}

/* ==========================================================================
   Intake: het formulier tijdens de afspraak
   ========================================================================== */
.intake { max-width: 60rem; }

.sectienr {
  display: inline-grid; place-items: center;
  width: 1.65rem; height: 1.65rem; margin-right: .55rem;
  border-radius: 50%; background: var(--gold-100); color: var(--gold-700);
  font: 500 .98rem/1 var(--font-display); vertical-align: .08em;
}
.sectiekop { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }

.wensblok { border-left: 3px solid var(--gold-400); }
.wensblok .kaart__kop h3 { font-size: 1.12rem; margin-right: 0; }
.wensblok .kaart__kop [data-naamvoorstel] { margin-right: auto; }

.wens-erbij {
  border: 1px dashed var(--sage-400); background: transparent; color: var(--sage-700);
  padding: .85rem; font-size: 1.08rem;
}
.wens-erbij:hover { background: var(--gold-100); border-color: var(--gold-500); color: var(--gold-700); }

/* Klant zoeken */
.zoekvak { position: relative; }
.klantzoek .zoek { max-width: none; }
.veld.klantzoek { margin-bottom: 1.2rem; }
.zoeklijst {
  position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 40;
  background: var(--paper); border: var(--rand); border-radius: var(--rond);
  box-shadow: var(--schaduw-op); max-height: 19rem; overflow-y: auto;
}
.zoeklijst button {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .85rem; border: 0; border-bottom: 1px solid var(--sage-100);
  background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.zoeklijst button:last-child { border-bottom: 0; }
.zoeklijst button:hover, .zoeklijst button:focus { background: var(--gold-100); outline: 0; }
.zoeklijst__naam { font-weight: 500; }
.zoeklijst__sub { display: block; font-size: .78rem; color: var(--ink-mute); }
.zoeklijst__leeg { padding: .8rem .9rem; margin: 0; font-size: .85rem; color: var(--ink-mute); }

.gekoppeld {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--gold-300); border-radius: var(--rond); background: var(--gold-100);
}

/* Bestanden kiezen en alvast laten zien */
.bestandkiezer { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.voorbeelden { display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; }
.voorbeelden:empty { display: none; }
.voorbeeld { position: relative; width: 5.4rem; }
.voorbeeld__beeld {
  width: 5.4rem; height: 5.4rem; border: var(--rand); border-radius: var(--rond);
  background: var(--sage-50); display: grid; place-items: center; overflow: hidden;
}
.voorbeeld__beeld img { width: 100%; height: 100%; object-fit: cover; }
.voorbeeld__beeld svg { width: 1.6rem; height: 1.6rem; color: var(--sage-400); stroke-width: 1.2; }
.voorbeeld__naam { font-size: .7rem; color: var(--ink-mute); margin-top: .2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voorbeeld__weg {
  position: absolute; top: -.45rem; right: -.45rem; width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--sage-900); color: #fff; cursor: pointer; padding: 0;
}
.voorbeeld__weg svg { width: .75rem; height: .75rem; stroke-width: 2.2; }

/* Opslaan blijft altijd onder handbereik, ook onderaan een lang formulier */
.formvoet {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 247, 241, .95); backdrop-filter: blur(8px);
  border: var(--rand); border-radius: var(--rond) var(--rond) 0 0; box-shadow: var(--schaduw-op);
}
.formvoet__status { margin-right: auto; font-size: .8rem; color: var(--ink-mute); }

/* ==========================================================================
   Intake: de offertes
   ========================================================================== */
.offerte { overflow: hidden; }
.offerte__kop { background: var(--sage-50); align-items: flex-start; }
.offerte__kop > div:first-child { flex: 1 1 15rem; min-width: 0; }
.offerte__kop h3 { margin: 0; }
.offerte__titel { font-family: var(--font-body); font-size: .85rem; color: var(--ink-mute); font-weight: 400; }
.offerte__bedrag { font: 500 1.4rem/1.1 var(--font-display); color: var(--sage-900); text-align: right; white-space: nowrap; }
.offerte__post { padding: 1rem 1.2rem; border-bottom: 1px solid var(--sage-100); }
.offerte__post--niet { background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(138, 49, 34, .035) 12px 24px); }
.offerte__post--niet .offerte__naam { color: var(--ink-mute); text-decoration: line-through;
  text-decoration-color: rgba(138, 49, 34, .45); }
.offerte__naam { font: 500 1.1rem/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.offerte__naam:hover { color: var(--gold-700); text-decoration: underline; }
.offerte__details { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.offerte__toelichting { padding: .9rem 1.2rem; border-top: 1px solid var(--sage-100); background: var(--cream); }

.regels { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .7rem; }
.regels td { padding: .32rem 0; border-bottom: 1px dotted var(--sage-200); vertical-align: top; }
.regels td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; font-variant-numeric: tabular-nums; }
.regels tr:last-child td { border-bottom: 0; }
.regels tr.regels__totaal td { border-top: 1px solid var(--sage-300); border-bottom: 0; font-weight: 600; padding-top: .45rem; }
.regels--groot { font-size: 1rem; margin-top: 0; }
.regels--groot .regels__totaal td { font: 500 1.3rem/1.3 var(--font-display); border-top: 0; }

/* De prijs invullen */
.regeleditor__koppen, .regeleditor__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 2.2rem; gap: .5rem; align-items: center;
}
.regeleditor__koppen { font: 600 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  margin: .8rem 0 .4rem; }
.regeleditor__rij { margin-bottom: .45rem; }
.regeleditor__som { display: flex; justify-content: space-between; margin-top: .9rem; padding-top: .7rem;
  border-top: var(--rand); font-weight: 600; }
.invoer--bedrag { text-align: right; font-variant-numeric: tabular-nums; }

.akkoordrij { padding: .8rem .9rem; border: var(--rand); border-radius: var(--rond); background: #fff; }
.akkoordrij .rij { margin-bottom: .55rem; }

.bestanden--klein { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.bestanden--klein .bestand__info { padding: .45rem .55rem; }
.bestanden--klein .bestand__acties { padding: 0 .55rem .55rem; }

/* ==========================================================================
   Klantportaal: offertes en het gesprek
   ========================================================================== */
.uitgelicht { display: block; text-decoration: none; color: inherit; border-color: var(--gold-300);
  background: linear-gradient(135deg, var(--gold-100), var(--paper) 70%); }
.uitgelicht:hover { box-shadow: var(--schaduw-op); color: inherit; }
.uitgelicht--stil { border-color: var(--sage-200); background: var(--paper); }
.uitgelicht__ikoon {
  width: 2.8rem; height: 2.8rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold-200); color: var(--gold-700);
}
.uitgelicht--stil .uitgelicht__ikoon, .kaartlink .uitgelicht__ikoon { background: var(--sage-100); color: var(--sage-700); }
.uitgelicht__ikoon svg { width: 1.3rem; height: 1.3rem; }

.kaartlink { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--soepel); }
.kaartlink:hover { box-shadow: var(--schaduw-op); color: inherit; }
.kaartlink__pijl { width: 1.1rem; height: 1.1rem; color: var(--sage-400); }
.kaartlink .rechts { text-align: right; }

.post { transition: border-color var(--soepel), box-shadow var(--soepel); }
.post--akkoord { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); }
.post--niet_akkoord { border-color: var(--rood-rand); }
.post--weg { opacity: .7; }

.keuzeknoppen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.keuzeknop { flex: 1; min-width: 9rem; min-height: 2.75rem; }
.keuzeknop--ja.is-gekozen { background: var(--groen); border-color: var(--groen); color: #fff; }
.keuzeknop--nee.is-gekozen { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood); }

.reactiebalk {
  position: sticky; bottom: 0; z-index: 20; margin-top: 1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 247, 241, .96); backdrop-filter: blur(8px);
  border: var(--rand); border-radius: var(--rond) var(--rond) 0 0; box-shadow: var(--schaduw-op);
}
.reactiebalk__stand { margin-right: auto; font-size: .88rem; color: var(--ink-soft); }

.keuzelijst { list-style: none; margin: 0 0 .4rem; padding: 0; }
.keuzelijst li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
  border-bottom: 1px dotted var(--sage-200); }
.keuzelijst li span:last-child { white-space: nowrap; }
.keuzelijst__som { font-weight: 600; border-bottom: 0 !important; }

/* ==========================================================================
   Kleine hulpklassen
   ========================================================================== */
.stil { color: var(--ink-mute); }
.klein { font-size: .82rem; }
.kleiner { font-size: .75rem; }
.vet { font-weight: 600; }
.rechtsuit { margin-left: auto; }
.mt0 { margin-top: 0; } .mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.6rem; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: .5rem; } .mb2 { margin-bottom: 1rem; } .mb3 { margin-bottom: 1.6rem; }
.geenwrap { white-space: nowrap; }
.rij { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.kolom { display: flex; flex-direction: column; gap: .6rem; }
.scheiding { height: 1px; background: var(--sage-100); margin: 1.2rem 0; border: 0; }

.paar { display: grid; grid-template-columns: 9rem 1fr; gap: .45rem .9rem; font-size: .9rem; }
.paar dt { color: var(--ink-mute); font-size: .82rem; }
.paar dd { margin: 0; }

.foto {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  object-fit: cover; background: var(--sage-100); flex: none;
}
.foto--groot { width: 5rem; height: 5rem; }
.letters {
  display: grid; place-items: center;
  background: var(--sage-700); color: #fff;
  font-family: var(--font-display); font-size: .95rem;
}
.foto--groot.letters { font-size: 1.8rem; }

/* ==========================================================================
   Smallere schermen
   ========================================================================== */
@media (max-width: 1100px) {
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--zij { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox__lijst { border-right: 0; border-bottom: var(--rand); max-height: 18rem; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .zijbalk {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(17rem, 84vw);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--schaduw-op);
  }
  .zijbalk.is-open { transform: none; }

  .schaduwlaag {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(26, 31, 28, .45);
    animation: vervaag .18s ease;
  }

  .burger { display: inline-flex; }
  .blad { padding: 1.1rem; }
  .bovenbalk { padding: .7rem 1.1rem; }
  .bovenbalk__titel { font-size: 1.15rem; }
  .meekijk { padding: .5rem 1.1rem; }

  .raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
  .veldrij--2, .veldrij--3 { grid-template-columns: minmax(0, 1fr); }
  .veldrij--adres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .veldrij--adres > :first-child { grid-column: 1 / -1; }

  .week { grid-template-columns: minmax(0, 1fr); }
  .dag { min-height: auto; }

  .paar { grid-template-columns: minmax(0, 1fr); gap: .1rem .9rem; }
  .paar dd { margin-bottom: .6rem; }

  .welkom { padding: 1.4rem 1.3rem; }
  .welkom h1 { font-size: 1.6rem; }
}

@media (max-width: 560px) {
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfer__waarde { font-size: 1.6rem; }
  .bestanden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venster { padding: 0; align-items: flex-end; }
  .venster__blad { width: 100%; max-height: 92vh; border-radius: var(--rond) var(--rond) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Afdrukken: alleen de inhoud, geen menu's */
@media print {
  .zijbalk, .bovenbalk, .meekijk, .gereedschap, .knoprij, .toost,
  .formvoet, .reactiebalk, .kopvak, .timerbalk, .verbinding, .uploadstand { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .kaart { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ==========================================================================
   Een offerte of intake op papier

   LM.afdrukken zet het document in een eigen blok onderaan de pagina en
   drukt alleen dat af. Op het scherm is het niet te zien.
   ========================================================================== */
.afdruk { display: none; }

@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  body.drukt-af > *:not(.afdruk) { display: none !important; }
  body.drukt-af .afdruk { display: block; }
}

.document { font: 10.5pt/1.5 var(--font-body); color: #1A1F1C; }
.document h1, .document h2, .document h3 { font-family: var(--font-display); font-weight: 500; }
.document__kop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm;
  padding-bottom: 7mm; margin-bottom: 8mm; border-bottom: 1px solid #C7D0CA;
}
.document__logo { width: 44mm; height: auto; }
.document__afzender { text-align: right; font-size: 9pt; line-height: 1.5; color: #45514A; }
.document__afzender strong { color: #1A1F1C; font-weight: 600; }
.document__aan { display: flex; justify-content: space-between; gap: 10mm; margin-bottom: 8mm; }
.document__aan p { margin: 0; }
.document__etiket { font: 600 6.5pt/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #6E7C74; margin-bottom: 2mm !important; }
.document__gegevens { display: grid; grid-template-columns: auto auto; gap: 1mm 6mm; margin: 0; font-size: 9.5pt; }
.document__gegevens dt { color: #6E7C74; }
.document__gegevens dd { margin: 0; text-align: right; }
.document__titel { font-size: 22pt; margin: 0 0 6mm; }
.document__titel span { display: block; font: 400 10.5pt/1.4 var(--font-body); color: #6E7C74; margin-top: 1mm; }
.document__post { padding: 4mm 0; border-top: 1px solid #E1E7E3; break-inside: avoid; }
.document__post h2, .document__post h3 { font-size: 13pt; margin: 0 0 1.5mm; }
.document__post h2 span, .document__post h3 span {
  font: 400 8.5pt/1 var(--font-body); color: #6E7C74; margin-left: 3mm; letter-spacing: .02em;
}
.document__post p { margin: 0 0 1.5mm; }
.document__post.is-niet { color: #6E7C74; }
.document__regels { width: 100%; border-collapse: collapse; margin-top: 2mm; font-size: 10pt; }
.document__regels td { padding: 1.2mm 0; border-bottom: 1px dotted #C7D0CA; }
.document__regels td:last-child { text-align: right; white-space: nowrap; padding-left: 6mm; }
.document__regels .is-som td { font-weight: 600; border-bottom: 0; }
.document__stempel {
  display: inline-block; margin-top: 2mm !important; padding: .6mm 2.5mm;
  border: 1px solid #2F6B45; border-radius: 1mm; color: #2F6B45; font-size: 8.5pt;
}
.document__stempel.is-niet { border-color: #8A3122; color: #8A3122; }
.document__totaal { width: 100%; border-collapse: collapse; margin: 3mm 0 2mm; border-top: 1.5px solid #1A1F1C; }
.document__totaal th { text-align: left; font: 500 14pt/1.4 var(--font-display); padding-top: 2mm; }
.document__totaal td { text-align: right; font: 500 14pt/1.4 var(--font-display); padding-top: 2mm; }
.document__klein { font-size: 8.5pt; color: #6E7C74; }
.document__toelichting { margin: 4mm 0; padding: 3mm 4mm; background: #F0F4F1; border-radius: 1mm; }
.document__blok { margin-bottom: 5mm; break-inside: avoid; }
.document__blok > h2 { font: 600 7pt/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #6E7C74;
  margin: 0 0 2.5mm; padding-bottom: 1.5mm; border-bottom: 1px solid #E1E7E3; }
.document__blok .document__post { border-top: 0; padding: 1.5mm 0 3mm; }
.document__lijst { display: grid; grid-template-columns: 48mm 1fr; gap: 1.5mm 5mm; margin: 0; }
.document__lijst dt { color: #6E7C74; }
.document__lijst dd { margin: 0; }
.document__tekenen { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10mm; margin: 12mm 0 6mm; break-inside: avoid; }
.document__tekenen div { border-bottom: 1px solid #1A1F1C; height: 16mm; position: relative; }
.document__tekenen span { position: absolute; bottom: -5.5mm; left: 0; font-size: 8pt; color: #6E7C74; }

/* ==========================================================================
   Werkplaats: tablet en telefoon aan de werkbank
   ========================================================================== */

/* Bovenbalk, timer en verbinding blijven samen bovenaan */
.kopvak { position: sticky; top: 0; z-index: 30; }
.kopvak .bovenbalk { position: relative; top: auto; }

/* --------------------------------------------------------- de timerbalk - */
.timerbalk {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .45rem 1.6rem; background: var(--sage-900); color: var(--sage-100);
  font-size: .88rem; border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.timerbalk__stip {
  width: .62rem; height: .62rem; border-radius: 50%; flex: none;
  background: var(--gold-400); box-shadow: 0 0 0 3px rgba(251, 194, 79, .22);
  animation: klop 1.8s ease-in-out infinite;
}
.timerbalk--pauze .timerbalk__stip { background: var(--sage-400); box-shadow: none; animation: none; }
@keyframes klop { 50% { opacity: .35; } }
.timerbalk__klok {
  font: 500 1.15rem/1 var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--gold-300); letter-spacing: .02em; min-width: 4.6rem;
}
.timerbalk--pauze .timerbalk__klok { color: var(--sage-300); }
.timerbalk__wat {
  color: #fff; text-decoration: none; min-width: 0; flex: 1 1 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timerbalk__wat span { color: var(--sage-300); }
.timerbalk__wat:hover { color: var(--gold-300); }
.timerbalk__knoppen { display: flex; gap: .4rem; margin-left: auto; }
.timerbalk .knop { background: transparent; color: var(--sage-100); border-color: rgba(255, 255, 255, .28); }
.timerbalk .knop:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .5); }
.timerbalk .timerknop--hervat { background: var(--gold-400); color: var(--sage-950); border-color: var(--gold-500); }
.timerbalk .timerknop--hervat:hover { background: var(--gold-300); color: var(--sage-950); }

/* ----------------------------------------------- verbinding en uploads - */
.verbinding {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 1.6rem; background: var(--rood); color: #fff; font-size: .88rem;
}
.verbinding svg { width: 1.1rem; height: 1.1rem; flex: none; }
.verbinding .knop { margin-left: auto; background: #fff; color: var(--rood); border-color: #fff; }

.uploadstand {
  display: flex; align-items: center; gap: .55rem; padding: .35rem 1.6rem;
  background: var(--blauw-zacht); color: var(--blauw); font-size: .82rem; border-bottom: 1px solid #C3D6E3;
}
.uploadstand svg { width: 1rem; height: 1rem; flex: none; }
.uploadstand a { margin-left: auto; color: inherit; font-weight: 500; }
.uploadstand--fout { background: var(--rood-zacht); color: var(--rood); border-color: var(--rood-rand); }

/* ------------------------------------------- grotere knoppen aan de bank - */
.werkplaatsmodus .blad .knop { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .95rem; }
.werkplaatsmodus .blad .knop--klein { min-height: 2.35rem; padding: .4rem .85rem; font-size: .86rem; }
.werkplaatsmodus #bovenActies .knop { min-height: 2.5rem; }
.werkplaatsmodus #bovenActies { flex-wrap: nowrap; }
.werkplaatsmodus .timerbalk .knop { min-height: 2.35rem; }
.werkplaatsmodus .keuzes__optie span { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .95rem; }
.werkplaatsmodus .keuzes--klein .keuzes__optie span { min-height: 2.4rem; }
.werkplaatsmodus .keuze, .werkplaatsmodus .invoer { min-height: 2.75rem; font-size: 1rem; }
.werkplaatsmodus .blad .knop.wp-groot, .knop.wp-groot { min-height: 3.4rem; font-size: 1.05rem; padding: .7rem 1.5rem; }
.wp-groot svg { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------ indeling scherm - */
.wp-raster, .wp-dossier {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.1rem; align-items: start;
}
.wp-kolom { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.wp-kaart { overflow: hidden; }

/* ----------------------------------------------------- kleur met woorden - */
.label--wp-groen  { background: var(--groen-zacht); color: var(--groen); }
.label--wp-oranje { background: #FCEBD2; color: #8A4B0F; }
.label--wp-rood   { background: var(--rood-zacht); color: var(--rood); }
.label--wp-grijs  { background: var(--sage-100); color: var(--ink-mute); }

.wp-kleuren { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.wp-kleur { border-radius: var(--rond); padding: .6rem .7rem; background: var(--sage-50); border-left: 4px solid var(--sage-300); }
.wp-kleur__getal { display: block; font: 400 1.7rem/1 var(--font-display); color: var(--sage-900); }
.wp-kleur__naam { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: .2rem; }
.wp-kleur--rood { background: var(--rood-zacht); border-left-color: var(--rood); }
.wp-kleur--oranje { background: #FDF3E3; border-left-color: #D98A1E; }
.wp-kleur--groen { background: var(--groen-zacht); border-left-color: var(--groen); }
.wp-kleuren__uitleg { grid-column: 1 / -1; }

.wp-teller {
  margin-left: auto; background: var(--sage-100); color: var(--sage-800);
  font-size: .74rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px;
}

/* ------------------------------------------------------------ de lijsten - */
.wp-lijst { display: flex; flex-direction: column; }
.wp-rij {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 1.1rem; border-bottom: 1px solid var(--sage-100); min-height: 3.6rem;
}
.wp-rij:last-child { border-bottom: 0; }
.wp-rij__hoofd {
  display: flex; align-items: center; gap: .75rem; flex: 1 1 14rem; min-width: 0;
  text-decoration: none; color: inherit; padding: .35rem 0;
}
.wp-rij__hoofd:hover strong { color: var(--gold-700); }
.wp-rij__hoofd > svg { width: 1.1rem; height: 1.1rem; color: var(--sage-400); flex: none; }
.wp-rij__stip { width: .8rem; height: .8rem; border-radius: 50%; flex: none; background: var(--sage-300); }
.wp-rij--groen .wp-rij__stip, .wb-kort--groen .wp-rij__stip { background: var(--groen); }
.wp-rij--oranje .wp-rij__stip, .wb-kort--oranje .wp-rij__stip { background: #D98A1E; }
.wp-rij--rood .wp-rij__stip, .wb-kort--rood .wp-rij__stip { background: var(--rood); }
.wp-rij__tekst { min-width: 0; flex: 1; line-height: 1.35; }
.wp-rij__tekst strong { font-weight: 600; }
.wp-rij__tekst .label { margin-left: .3rem; vertical-align: .05em; }
.wp-rij__klant { color: var(--ink-mute); font-size: .86rem; }
.wp-rij__sub { display: block; font-size: .82rem; color: var(--ink-mute); margin-top: .1rem; }
.wp-rij__datum { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.wp-rij__knoppen { display: flex; gap: .4rem; margin-left: auto; }
.knop.wp-start { border-color: var(--gold-500); color: var(--gold-700); font-weight: 600; }
.knop.wp-start svg { fill: currentColor; }
.knop.wp-start:hover { background: var(--gold-100); border-color: var(--gold-600); color: var(--gold-700); }

.wp-zoek .zoek { max-width: none; }
.wp-zoek .invoer { font-size: 1.02rem; min-height: 3rem; }
#wpZoekUit .wp-rij { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------- "nu bezig" kaart - */
.wp-nu { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.wp-nu > svg { width: 1.8rem; height: 1.8rem; color: var(--sage-400); flex: none; }
.wp-nu__klok { font: 300 2.5rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--sage-900); min-width: 8.5rem; }
.wp-nu--pauze .wp-nu__klok { color: var(--ink-mute); }
.wp-nu__wat { flex: 1 1 12rem; min-width: 0; }
.wp-nu__wat a { color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.wp-nu__wat a:hover { color: var(--gold-700); }
.wp-nu__sub { display: block; font-size: .85rem; color: var(--ink-mute); }
.wp-nu__knoppen { display: flex; gap: .5rem; flex-wrap: wrap; }

.wp-vergeten { display: flex; flex-direction: column; gap: .5rem; }
.wp-vergeten__rij { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------- de timerkaart - */
.wp-timer__stand { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .88rem; color: var(--ink-soft); margin-bottom: .2rem; }
.wp-timer__stip { width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold-500); animation: klop 1.8s ease-in-out infinite; }
.wp-timer--pauze .wp-timer__stip { background: var(--sage-400); animation: none; }
.wp-timer--actief, .wp-timer--pauze { text-align: center; }
.wp-timer__klok {
  font: 300 3.4rem/1.05 var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--sage-900); margin: .1rem 0 .9rem; letter-spacing: .01em;
}
.wp-timer--pauze .wp-timer__klok { color: var(--ink-mute); }
.wp-timer__knoppen { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
.wp-timer__knoppen .knop { flex: 1 1 9rem; max-width: 16rem; }
.wp-timer__wissel { text-align: left; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--sage-100); }
.wp-timer__wissel .veld { margin-top: .8rem; }
.wp-timer .keuzes { margin-bottom: .2rem; }

/* ---------------------------------------------------------- de opdracht - */
.wp-redenen, .wp-acties { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .88rem; }
.wp-redenen li { color: var(--rood); }
.wp-acties li { color: var(--ink-soft); }
.wp-acties li::marker { content: "→  "; }
.wp-omschrijving { max-height: 7.5rem; overflow: auto; }

.wp-stappen { display: flex; flex-direction: column; }
.wp-stap { padding: .9rem 1.2rem; border-bottom: 1px solid var(--sage-100); }
.wp-stap:last-child { border-bottom: 0; }
.wp-stap.is-volgende { background: var(--gold-100); box-shadow: inset 4px 0 0 var(--gold-500); }
.wp-stap--klaar { opacity: .62; }
.wp-stap__kop { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.wp-stap__nr {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--sage-100); color: var(--sage-800); font-weight: 600; font-size: .86rem;
}
.wp-stap__nr svg { width: 1rem; height: 1rem; }
.wp-stap--klaar .wp-stap__nr { background: var(--groen-zacht); color: var(--groen); }
.wp-stap--bezig .wp-stap__nr { background: var(--gold-200); color: var(--gold-700); }
.wp-stap__titel { flex: 1 1 10rem; min-width: 0; }
.wp-stap__titel strong { font-weight: 600; }
.wp-stap__sub { display: block; font-size: .8rem; color: var(--ink-mute); }
.wp-stap__info { font-size: .86rem; color: var(--ink-soft); margin: .45rem 0 0 2.7rem; }
.wp-stap__knoppen { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0 2.7rem; }
.wp-stap__knoppen:empty { display: none; }

.wp-redenknoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.werkplaatsmodus .wp-redenknoppen .filter { min-height: 2.4rem; padding: .4rem .9rem; }
.wp-notities { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.wp-notitie { padding: .6rem .8rem; background: var(--sage-50); border-radius: var(--rond); border-left: 3px solid var(--sage-300); }
.wp-notitie p { font-size: .9rem; }

.wp-tijd__totaal { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.wp-tijd__totaal span { font: 400 1.6rem/1 var(--font-display); color: var(--sage-900); margin-right: .25rem; }
.wp-staaf { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .84rem; margin-bottom: .35rem; }
.wp-staaf__naam { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-staaf__balk { height: .5rem; background: var(--sage-100); border-radius: 999px; overflow: hidden; }
.wp-staaf__balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); border-radius: 999px; }
.wp-staaf__waarde { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ foto's en video's - */
.wp-mediaknoppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.wp-mediaknoppen .knop { flex-direction: column; gap: .35rem; white-space: normal; text-align: center; min-height: 5rem; line-height: 1.25; }
.wp-mediaknoppen .knop svg { width: 1.6rem; height: 1.6rem; }
.werkplaatsmodus .blad .wp-mediaknoppen .knop { min-height: 5.2rem; }

.wp-wachtrij { display: flex; flex-direction: column; gap: .5rem; }
.wp-wachtrij:empty { display: none; }
.wp-upload {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  padding: .55rem .65rem; border: var(--rand); border-radius: var(--rond); background: #fff;
}
.wp-upload--fout { border-color: var(--rood-rand); background: var(--rood-zacht); }
.wp-upload--klaar { border-color: #BFDCC9; background: var(--groen-zacht); }
.wp-upload--gestopt { opacity: .75; }
.wp-upload__beeld {
  width: 3.4rem; height: 3.4rem; flex: none; border-radius: var(--rond); overflow: hidden;
  background: var(--sage-50); display: grid; place-items: center;
}
.wp-upload__beeld img { width: 100%; height: 100%; object-fit: cover; }
.wp-upload__beeld svg { width: 1.4rem; height: 1.4rem; color: var(--sage-400); }
.wp-upload__info { flex: 1 1 10rem; min-width: 0; }
.wp-upload__naam { font-size: .86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-upload__stand { font-size: .8rem; color: var(--ink-mute); margin-top: .25rem; }
.wp-upload--fout .wp-upload__stand { color: var(--rood); }
.wp-upload--klaar .wp-upload__stand { color: var(--groen); }
.wp-upload .balk { margin-top: .35rem; }
.wp-upload__knoppen { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }

.wp-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; margin-top: 1rem; }
.wp-beelden > p { grid-column: 1 / -1; }
.wp-beeld {
  position: relative; aspect-ratio: 1 / 1; border: var(--rand); border-radius: var(--rond); overflow: hidden;
  background: var(--sage-50); padding: 0; cursor: pointer; display: grid; place-items: center; font: inherit;
}
.wp-beeld img { width: 100%; height: 100%; object-fit: cover; }
.wp-beeld > svg { width: 1.8rem; height: 1.8rem; color: var(--sage-400); }
.wp-beeld:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.wp-beeld__labels { position: absolute; left: .3rem; top: .3rem; right: .3rem; display: flex; gap: .2rem; flex-wrap: wrap; }
.wp-beeld__labels .label { font-size: .64rem; padding: .05rem .4rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.wp-beeld__proces {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem .45rem .3rem;
  background: linear-gradient(transparent, rgba(var(--sage-950-rgb),.78)); color: #fff; font-size: .68rem; text-align: left;
}
.wp-beeld__speel {
  position: absolute; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(var(--sage-950-rgb),.6);
  display: grid; place-items: center; color: #fff;
}
.wp-beeld__speel svg { width: .95rem; height: .95rem; fill: currentColor; }
.wp-groot-beeld { background: var(--sage-950); border-radius: var(--rond); overflow: hidden; margin-bottom: .6rem; display: grid; place-items: center; }
.wp-groot-beeld img, .wp-groot-beeld video { max-height: 44vh; width: auto; max-width: 100%; display: block; }

/* ---------------------------------------------------------- het label -- */
.etiket {
  box-sizing: border-box; display: flex; gap: 2mm; align-items: center;
  background: #fff; color: #000; font-family: var(--font-body); overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.etiket__qr { flex: none; }
.etiket__qr svg { width: 100%; height: 100%; display: block; }
.etiket__tekst { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.etiket__nummer { font-weight: 600; font-size: calc(12pt * var(--etiket, 1)); line-height: 1.05; letter-spacing: .01em; }
.etiket__naam {
  font-size: calc(8.5pt * var(--etiket, 1)); line-height: 1.2; margin-top: .6mm;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.etiket__voet { display: flex; flex-direction: column; gap: .4mm; font-size: calc(7pt * var(--etiket, 1)); line-height: 1.15; white-space: nowrap; }
.etiket__code, .etiket-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; }
.etiket-voorbeeld { overflow: auto; padding: 1.2rem; background: var(--sage-100); border-radius: var(--rond); display: flex; justify-content: center; margin-bottom: .6rem; }
.etiket-voorbeeld__maat { flex: none; }
.etiket-voorbeeld .etiket { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); outline: 1px dashed var(--sage-400); }

@media print {
  .afdruk--etiket .etiket-pagina { break-after: page; page-break-after: always; overflow: hidden; }
  .afdruk--etiket .etiket-pagina:last-child { break-after: auto; page-break-after: auto; }
  .afdruk--etiket .etiket { outline: 0; box-shadow: none; }
}

/* ------------------------------------------------ werk-tabblad (beheer) - */
.tabel tr.is-klaar td { color: var(--ink-mute); }
.tabel tr.is-klaar .tabel__hoofd { text-decoration: line-through; text-decoration-color: var(--sage-300); }
.tabel tr.is-weg td { opacity: .5; }
.wb-log { border-top: var(--rand); padding: .8rem 1.2rem; font-size: .86rem; }
.wb-log summary { cursor: pointer; color: var(--sage-700); font-weight: 500; }
.wb-log ul { margin: .6rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }

.wb-kleuren { display: flex; gap: .4rem; flex-wrap: wrap; }
.wb-kort { display: flex; gap: .6rem; align-items: flex-start; text-decoration: none; color: inherit; font-size: .88rem; }
.wb-kort .wp-rij__stip { margin-top: .35rem; }
.wb-kort:hover strong { color: var(--gold-700); }

.wb-planningkop { display: flex; gap: 1rem 1.6rem; align-items: center; flex-wrap: wrap; }
.wb-planningkop > div:first-child { flex: 1 1 18rem; }
.wb-tellers { display: flex; gap: .45rem; flex-wrap: wrap; }
.wb-teller { background: var(--sage-50); border: var(--rand); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; color: var(--ink-soft); }
.wb-teller strong { color: var(--ink); }
.wb-teller.is-rood { background: var(--rood-zacht); border-color: var(--rood-rand); color: var(--rood); }
.wb-teller.is-rood strong { color: var(--rood); }

.dag__werkbank { margin-top: .3rem; padding-top: .35rem; border-top: 1px dashed var(--sage-200); display: flex; flex-direction: column; gap: .3rem; }
.dag__kopje { font: 600 .62rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.blokje--wp { text-decoration: none; display: block; background: var(--sage-50); border-left-color: var(--sage-500); }
.blokje--wp-groen { border-left-color: var(--groen); }
.blokje--wp-oranje { border-left-color: #D98A1E; background: #FDF3E3; }
.blokje--wp-rood { border-left-color: var(--rood); background: var(--rood-zacht); }

/* ----------------------------------------------- werkplaatsinstellingen - */
.wi-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.wi-dag { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.wi-dag .invoer { padding: .45rem .4rem; text-align: center; }
.wi-vrij { display: grid; grid-template-columns: 9.5rem 9.5rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.wi-sjabloon td { padding: .4rem .45rem; }
.wi-sjabloon .invoer, .wi-sjabloon .keuze { padding: .35rem .5rem; font-size: .84rem; }
.wi-sjabloon td:nth-child(4) .invoer, .wi-sjabloon td:nth-child(5) .invoer { width: 5rem; }
.wi-sjabloon td:first-child .invoer { min-width: 10rem; }

/* ------------------------------------------------------ smalle schermen - */
@media (max-width: 1100px) {
  .wp-raster, .wp-dossier { display: flex; flex-direction: column; align-items: stretch; }
  .wp-kolom { display: contents; }
  .wp-orde-1 { order: 1; } .wp-orde-2 { order: 2; } .wp-orde-3 { order: 3; } .wp-orde-4 { order: 4; }
  .wp-orde-5 { order: 5; } .wp-orde-6 { order: 6; } .wp-orde-7 { order: 7; } .wp-orde-8 { order: 8; } .wp-orde-9 { order: 9; }
}

@media (max-width: 900px) {
  .timerbalk, .verbinding, .uploadstand { padding-left: 1.1rem; padding-right: 1.1rem; }
  .wi-vrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .wi-vrij [data-reden] { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .timerbalk { gap: .5rem; }
  .timerbalk__wat { order: 3; flex-basis: 100%; }
  .timerbalk__knoppen .knop span, .werkplaatsmodus #bovenActies .knop span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .wp-kleuren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-mediaknoppen { grid-template-columns: minmax(0, 1fr); }
  .wp-mediaknoppen .knop { flex-direction: row; min-height: 3.4rem; justify-content: flex-start; padding-left: 1.2rem; }
  .werkplaatsmodus .blad .wp-mediaknoppen .knop { min-height: 3.6rem; }
  .wp-timer__klok { font-size: 2.9rem; }
  .wp-nu__klok { font-size: 2.1rem; min-width: 0; }
  .wp-stap { padding: .85rem .9rem; }
  .wp-stap__info, .wp-stap__knoppen { margin-left: 0; }
  .wp-rij { padding: .45rem .9rem; }
  .wp-rij__knoppen { width: 100%; justify-content: flex-end; }
  .wi-dagen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Social media: contentbak, toestemming en concepten
   ========================================================================== */
.ct-bak { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; }
.ct-kaart { display: block; text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow var(--soepel); }
.ct-kaart:hover { box-shadow: var(--schaduw-op); color: inherit; }
.ct-strook { display: flex; gap: 2px; background: var(--sage-100); height: 5.2rem; overflow: hidden; }
.ct-duim { position: relative; flex: 1 1 0; min-width: 0; background: var(--sage-50); display: grid; place-items: center; }
.ct-duim img { width: 100%; height: 100%; object-fit: cover; }
.ct-duim > svg { width: 1.4rem; height: 1.4rem; color: var(--sage-400); }
.ct-duim--nee img, .ct-duim--nee > svg { opacity: .35; filter: grayscale(1); }
.ct-duim--nee::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(138, 49, 34, .08) 8px 16px); }
.ct-meer { flex: none; width: 2.6rem; display: grid; place-items: center; font-size: .78rem; color: var(--ink-mute); background: var(--sage-50); }
.ct-video { position: absolute; right: .2rem; bottom: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(var(--sage-950-rgb),.6); display: grid; place-items: center; color: #fff; }
.ct-video svg { width: .6rem; height: .6rem; fill: currentColor; }
.ct-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-geen { color: var(--rood); }
.ct-ja { color: var(--groen); display: inline-flex; gap: .25rem; align-items: center; }
.ct-ja svg, .ct-kaart .klein svg { width: .9rem; height: .9rem; vertical-align: -.12em; }
.ct-signaal { color: var(--rood); display: flex; gap: .3rem; align-items: flex-start; }
.ct-signaal svg { width: .9rem; height: .9rem; flex: none; margin-top: .15rem; }

.ct-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ct-kolom { background: var(--sage-50); border: var(--rand); border-radius: var(--rond); padding: .8rem; display: flex; flex-direction: column; gap: .5rem; min-height: 8rem; }
.ct-kolom__kop { font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.ct-concept { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem; background: var(--paper); border: var(--rand); border-radius: var(--rond); text-decoration: none; color: inherit; }
.ct-concept:hover { border-color: var(--gold-500); color: inherit; }
.ct-concept--signaal { border-color: var(--rood-rand); background: var(--rood-zacht); }

.ct-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; }
.ct-beeld { border: var(--rand); border-radius: var(--rond); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.ct-beeld__plaat { position: relative; aspect-ratio: 4 / 3; background: var(--sage-50); display: grid; place-items: center; overflow: hidden; }
.ct-beeld__plaat img { width: 100%; height: 100%; object-fit: cover; }
.ct-beeld__plaat > svg { width: 1.8rem; height: 1.8rem; color: var(--sage-400); }
.ct-beeld__info { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: .2rem; }
.ct-vlaggen { display: flex; gap: .8rem; margin-top: .25rem; }
.ct-vlaggen .vink input { margin-top: .1rem; }

.ct-lijst { display: flex; flex-direction: column; }
.ct-rij { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .75rem 1.2rem; border: 0; border-bottom: 1px solid var(--sage-100); background: none; font: inherit; color: inherit; cursor: pointer; }
.ct-rij:last-child { border-bottom: 0; }
.ct-rij > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ct-rij:hover { background: var(--sage-50); }
.ct-rij--signaal { background: var(--rood-zacht); }

.ct-afspraak { padding: .7rem .8rem; border: var(--rand); border-radius: var(--rond); background: #fff; margin-bottom: .6rem; display: flex; flex-direction: column; gap: .15rem; }
.ct-afspraak--weg { background: var(--sage-50); opacity: .8; }

.ct-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.ct-keuze__beeld { position: relative; display: flex; flex-direction: column; gap: .25rem; cursor: pointer; }
.ct-keuze__beeld input { position: absolute; top: .4rem; left: .4rem; width: 1.2rem; height: 1.2rem; accent-color: var(--gold-500); z-index: 1; }
.ct-keuze__plaat { position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--sage-200); border-radius: var(--rond); overflow: hidden; background: var(--sage-50); display: grid; place-items: center; }
.ct-keuze__plaat img { width: 100%; height: 100%; object-fit: cover; }
.ct-keuze__beeld input:checked + .ct-keuze__plaat { border-color: var(--gold-500); box-shadow: 0 0 0 2px var(--gold-200); }
.ct-keuze__beeld.is-uit { cursor: not-allowed; }
.ct-keuze__beeld.is-uit .ct-keuze__plaat { opacity: .35; filter: grayscale(1); }

.ct-tekst { padding: .8rem 1rem; background: var(--sage-50); border-radius: var(--rond); white-space: pre-wrap; font-size: .92rem; }
.ct-shots { display: flex; flex-direction: column; gap: .5rem; }
.ct-shot { display: flex; gap: .7rem; align-items: center; }
.ct-shot__plaat { position: relative; width: 3.6rem; height: 3.6rem; flex: none; border-radius: var(--rond); overflow: hidden; background: var(--sage-50); display: grid; place-items: center; }
.ct-shot__plaat img { width: 100%; height: 100%; object-fit: cover; }
.ct-shot__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

@media (max-width: 1100px) { .ct-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ct-kolommen { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Klantportaal in de stijl van de website
   --------------------------------------------------------------------------
   Alles hieronder geldt alleen voor body.klantportaal; het beheer blijft een
   werkomgeving. Koppen licht in Cormorant, zoals op de website. Kleine tekst,
   knoppen en labels in Jost: het kleinkapitaal van de website is op die maten
   te dun (zie de afspraak bovenaan). Goud als accent, en veel lucht.
   ========================================================================== */
.bovenbalk__merk { display: none; }
.bovenbalk__logo { display: block; height: 2.3rem; width: auto; }

.klantportaal {
  --kp-breed: 1180px;
  --kp-gat: clamp(1.1rem, 4vw, 2.5rem);
  --kp-lijn: rgba(26, 31, 28, .08);
  --kp-rond: 14px;
  --kp-zacht: cubic-bezier(.16, 1, .3, 1);
  --kp-schaduw: 0 1px 2px rgba(26, 31, 28, .04), 0 12px 32px rgba(26, 31, 28, .06);
  --kp-schaduw-op: 0 4px 12px rgba(26, 31, 28, .07), 0 26px 60px rgba(26, 31, 28, .12);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
}
.klantportaal strong, .klantportaal b, .klantportaal .vet { font-weight: 500; }
.klantportaal h1, .klantportaal h2, .klantportaal h3 { color: var(--ink); letter-spacing: -.01em; }
.klantportaal h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 300; line-height: 1.05; }
.klantportaal h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); font-weight: 300; line-height: 1.12; }
.klantportaal h3 { font-size: 1.42rem; font-weight: 400; line-height: 1.2; }
.klantportaal h1 em, .klantportaal h2 em { font-style: italic; color: var(--gold-600); }
.klantportaal a { color: var(--sage-800); }
.klantportaal a:hover { color: var(--gold-700); }
.klantportaal a.kaart, .klantportaal a.kaart:hover { color: inherit; }
.klantportaal ::selection { background: var(--gold-300); color: var(--sage-950); }

/* Het kopje boven een titel, met het gouden lijntje van de website */
.kp-oog {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0 0 1.1rem;
  font: 400 .68rem/1.2 var(--font-body);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.kp-oog::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .55; }

/* ------------------------------------------------------------- de kop -- */
@media (min-width: 1081px) {
  .klantportaal .app { display: block; }

  .klantportaal .zijbalk {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.2rem, 2.4vw, 2.6rem);
    padding: .8rem max(var(--kp-gat), calc((100% - var(--kp-breed)) / 2));
    background: rgba(250, 247, 241, .9);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--kp-lijn);
    color: var(--ink);
  }
  .klantportaal .zijbalk__merk {
    display: flex; align-items: center; gap: .9rem;
    padding: 0; border: 0;
  }
  .klantportaal .zijbalk__merk:hover { background: none; }
  .klantportaal .zijbalk__logo { width: auto; max-width: none; height: 2.9rem; }
  .klantportaal .zijbalk__sub {
    margin: 0; padding: .1rem 0 .1rem .9rem;
    border-left: 1px solid rgba(26, 31, 28, .14);
    color: var(--gold-600); font-size: .6rem; letter-spacing: .3em;
  }

  .klantportaal .zijbalk__menu {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(.9rem, 1.7vw, 1.8rem);
    padding: 0;
  }
  .klantportaal .zijbalk__menu a {
    position: relative;
    gap: .45rem;
    padding: .55rem 0;
    border-radius: 0;
    background: none;
    color: var(--ink-soft);
    font: 400 .7rem/1.2 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .klantportaal .zijbalk__menu a svg { display: none; }
  .klantportaal .zijbalk__menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .15rem;
    height: 1px; background: var(--gold-500);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--kp-zacht);
  }
  .klantportaal .zijbalk__menu a:hover { background: none; color: var(--ink); }
  .klantportaal .zijbalk__menu a.is-hier { background: none; color: var(--ink); font-weight: 500; }
  .klantportaal .zijbalk__menu a:hover::after,
  .klantportaal .zijbalk__menu a.is-hier::after { transform: scaleX(1); }
  .klantportaal .zijbalk__teller,
  .klantportaal .zijbalk__menu a.is-hier .zijbalk__teller { background: var(--gold-400); color: var(--sage-950); }

  .klantportaal .zijbalk__voet { display: flex; align-items: center; gap: 1.1rem; padding: 0; border: 0; }
  .klantportaal .zijbalk__bol { background: transparent; border: 1px solid var(--gold-500); color: var(--gold-700); }
  .klantportaal .zijbalk__naam { color: var(--ink); font-weight: 400; max-width: 9rem; }
  .klantportaal .zijbalk__rol { display: none; }
  .klantportaal .zijbalk__acties { margin: 0; gap: .2rem; }
  .klantportaal .zijbalk__acties > * {
    flex: none; padding: .35rem .5rem; border: 0; background: none;
    color: var(--ink-mute); font: 400 .66rem/1.2 var(--font-body);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .klantportaal .zijbalk__acties > *:hover { background: none; color: var(--gold-700); }
  /* De website staat in de voet; hier is daar geen plek voor */
  .klantportaal .zijbalk__acties a { display: none; }

  .klantportaal .bovenbalk { display: none; }
}
@media (min-width: 1081px) and (max-width: 1399px) {
  .klantportaal .zijbalk__wie div { display: none; }
}

/* Smaller dan een laptop: de kop wordt een balk met het logo, en het menu
   schuift van links in, net als op de telefoon */
@media (max-width: 1080px) {
  .klantportaal .app { grid-template-columns: 1fr; }
  .klantportaal .zijbalk {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(19rem, 86vw);
    height: 100%;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  }
  .klantportaal .zijbalk.is-open { transform: none; }
  .klantportaal .schaduwlaag {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(26, 31, 28, .45);
    animation: vervaag .18s ease;
  }
  .klantportaal .zijbalk__menu a {
    gap: .9rem; padding: .7rem .9rem;
    font: 400 1.28rem/1.2 var(--font-display);
    color: var(--sage-100);
  }
  .klantportaal .zijbalk__menu a.is-hier { background: rgba(251, 194, 79, .12); color: var(--gold-300); font-weight: 400; }
  .klantportaal .zijbalk__menu a.is-hier svg { color: var(--gold-300); }
  .klantportaal .burger { display: inline-flex; border-radius: 999px; border-color: rgba(26, 31, 28, .16); padding: .55rem; }
  .klantportaal .bovenbalk { padding: .65rem var(--kp-gat); }
  .klantportaal .bovenbalk__titel { display: none; }
  .klantportaal .bovenbalk__merk { display: block; margin-right: auto; }
}

/* ---------------------------------------------------- inhoud en voet -- */
.klantportaal .hoofd { min-height: 100vh; }
@media (min-width: 1081px) { .klantportaal .hoofd { min-height: calc(100vh - 4.6rem); } }
.klantportaal .blad {
  flex: 1;
  max-width: var(--kp-breed);
  margin-inline: auto;
  padding: 0 var(--kp-gat) clamp(3rem, 7vw, 5.5rem);
}
.klantportaal .blad > h2, .kp-tussenkop { margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.3rem; }

.kp-voet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sage-950);
  color: var(--sage-300);
}
.kp-voet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 100% at 50% 0%, rgba(251, 194, 79, .1), transparent 70%);
}
.kp-voet__binnen {
  max-width: var(--kp-breed);
  margin-inline: auto;
  padding: clamp(2.2rem, 5vw, 3.2rem) var(--kp-gat) 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
}
.kp-voet__logo { width: 8.5rem; height: auto; }
.kp-voet p { margin: 0; font-size: .88rem; }
.kp-voet a { color: var(--sage-200); text-decoration: none; }
.kp-voet a:hover { color: var(--gold-400); }
.kp-voet__contact { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.kp-voet__regel {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(250, 247, 241, .1);
  font-size: .78rem !important;
  color: var(--sage-400);
}

/* -------------------------------------------------- kop van een pagina -- */
.kp-kop { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(1.3rem, 3vw, 2.1rem); }
.kp-kop h1 { margin: 0; max-width: 24ch; }
.kp-kop__intro { margin: 1rem 0 0; max-width: 40rem; font-size: 1.07rem; color: var(--ink-soft); }
.kp-kop__rij { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.klantportaal .kp-kop + h2, .klantportaal .kp-kop + .kp-tussenkop { margin-top: .4rem; }
.klantportaal .kp-terug {
  display: flex; align-items: center; gap: .5rem;
  width: max-content;
  margin-bottom: 1.5rem;
  font: 500 .66rem/1.2 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: none;
}
.kp-terug svg { width: .95rem; height: .95rem; stroke-width: 1.5; }
.klantportaal .kp-terug:hover { color: var(--gold-700); }

/* De welkomstband op het overzicht: het donkergroen met gouden gloed van de website */
.kp-held {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem);
  padding: clamp(2.4rem, 6vw, 4.4rem) clamp(1.6rem, 5.5vw, 4.4rem);
  border-radius: calc(var(--kp-rond) + 4px);
  background: var(--sage-900);
  color: var(--sage-100);
}
.kp-held::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 75% at 88% 0%, rgba(251, 194, 79, .2), transparent 70%),
    radial-gradient(ellipse 45% 60% at 0% 100%, rgba(139, 155, 144, .3), transparent 70%);
}
.kp-held .kp-oog { color: var(--gold-400); }
.kp-held h1 { margin: 0; color: var(--cream); }
.kp-held h1 em { color: var(--gold-400); }
.kp-held__intro { margin: 1.1rem 0 0; max-width: 38rem; font-size: 1.08rem; color: var(--sage-200); }
.klantportaal .kp-held__afspraak {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.8rem;
  padding: .65rem 1.25rem;
  border: 1px solid rgba(251, 194, 79, .38);
  border-radius: 999px;
  color: var(--cream);
  font-size: .92rem;
  text-decoration: none;
  transition: background .3s, border-color .3s;
}
.klantportaal .kp-held__afspraak:hover { background: rgba(251, 194, 79, .1); border-color: var(--gold-400); color: var(--cream); }
.kp-held__afspraak svg { width: 1.05rem; height: 1.05rem; color: var(--gold-400); }

/* ------------------------------------------------------------ kaarten -- */
.klantportaal .kaart {
  border: 1px solid var(--kp-lijn);
  border-radius: var(--kp-rond);
  box-shadow: var(--kp-schaduw);
  overflow: hidden;
}
.klantportaal .kaart__kop { padding: 1.5rem 1.7rem 0; border-bottom: 0; }
.klantportaal .kaart__kop h2, .klantportaal .kaart__kop h3 { font-size: 1.5rem; font-weight: 400; }
.klantportaal .kaart__lijf { padding: 1.25rem 1.7rem 1.7rem; }
.klantportaal .kaart__lijf--strak { padding: .4rem 0 .7rem; }
.klantportaal a.kaart, .klantportaal .kaartlink {
  transition: transform .5s var(--kp-zacht), box-shadow .5s var(--kp-zacht), border-color .5s var(--kp-zacht);
}
.klantportaal a.kaart:hover, .klantportaal .kaartlink:hover {
  transform: translateY(-4px);
  box-shadow: var(--kp-schaduw-op);
  border-color: rgba(214, 162, 58, .45);
}
.klantportaal .raster { gap: clamp(1rem, 2vw, 1.6rem); }
.klantportaal .kolom { gap: 1rem; }
.klantportaal .scheiding { border: 0; border-top: 1px solid var(--kp-lijn); margin: 1.6rem 0; }

/* Het sieraad dat nu in de maak is, met de laatste foto ernaast */
.kp-nu { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.kp-nu--zonder { grid-template-columns: minmax(0, 1fr); }
.kp-nu__beeld { position: relative; display: block; min-height: 19rem; overflow: hidden; background: var(--sage-100); }
.kp-nu__beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--kp-zacht);
}
.kp-nu:hover .kp-nu__beeld img { transform: scale(1.04); }
.kp-nu__tekst { padding: clamp(1.6rem, 3.5vw, 2.6rem); min-width: 0; }
.kp-nu__tekst h2 { margin: 0 0 .7rem; }
.kp-nu__tekst > p { color: var(--ink-soft); }
.klantportaal .kp-nu .fase { min-width: 4.4rem; }

/* Een sieraad in een overzicht */
.kp-sieraad { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.kp-sieraad:hover { color: inherit; }
.kp-sieraad__beeld {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sage-50), var(--cream-alt));
}
.kp-sieraad__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kp-zacht); }
.kp-sieraad:hover .kp-sieraad__beeld img { transform: scale(1.06); }
.kp-sieraad__beeld svg { width: 2.4rem; height: 2.4rem; color: var(--gold-500); stroke-width: 1; opacity: .75; }
.kp-sieraad__lijf { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.5rem 1.5rem; }
.kp-sieraad__lijf h3 { margin: 0; }
.kp-sieraad__soort { margin: 0; font-size: .88rem; color: var(--ink-mute); }
.kp-sieraad__voet { margin-top: auto; padding-top: .5rem; }

/* ------------------------------------------------- knoppen en labels -- */
.klantportaal .knop {
  gap: .6rem;
  padding: .8rem 1.55rem;
  border: 1px solid rgba(26, 31, 28, .24);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 .7rem/1.2 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .2s;
}
.klantportaal .knop:hover {
  background: var(--gold-400); border-color: var(--gold-400); color: var(--sage-950);
  box-shadow: 0 10px 26px rgba(251, 194, 79, .3);
}
.klantportaal .knop svg { width: .95rem; height: .95rem; stroke-width: 1.5; }
.klantportaal .knop--goud { background: var(--gold-400); border-color: var(--gold-400); color: var(--sage-950); }
.klantportaal .knop--goud:hover {
  background: var(--sage-900); border-color: var(--sage-900); color: var(--gold-400);
  box-shadow: 0 10px 26px rgba(var(--sage-900-rgb), .25);
}
.klantportaal .knop--klein { padding: .58rem 1.15rem; font-size: .64rem; }
.klantportaal .knop--kaal { border-color: transparent; background: none; padding-inline: .3rem; }
.klantportaal .knop--kaal:hover { background: none; border-color: transparent; box-shadow: none; color: var(--gold-700); }
.klantportaal .keuzeknop { min-height: 3rem; }
.klantportaal .keuzeknop--ja.is-gekozen { background: var(--groen); border-color: var(--groen); color: #fff; box-shadow: none; }
.klantportaal .keuzeknop--nee.is-gekozen { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood); box-shadow: none; }

.klantportaal .label {
  padding: .32rem .78rem;
  font: 500 .64rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ------------------------------------------- voortgang en de fasen -- */
.klantportaal .voortgang { gap: .9rem; }
.klantportaal .balk { height: 3px; background: var(--sage-100); }
.klantportaal .balk__vul { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.klantportaal .voortgang__cijfer { min-width: 2.9rem; font: 400 1.2rem/1 var(--font-display); color: var(--gold-700); }

.klantportaal .fasen { gap: 0; margin: 1.7rem 0 1.5rem; }
.klantportaal .fase { min-width: 5.6rem; padding-top: 1.7rem; }
.klantportaal .fase::before { top: .4rem; height: 1px; background: var(--sage-200); }
.klantportaal .fase__bol { width: .82rem; height: .82rem; border: 1px solid var(--sage-300); }
.klantportaal .fase.is-gehad::before { background: var(--sage-700); }
.klantportaal .fase.is-gehad .fase__bol { background: var(--sage-700); border-color: var(--sage-700); }
.klantportaal .fase.is-nu .fase__bol {
  width: .96rem; height: .96rem; top: -.07rem;
  background: var(--gold-400); border-color: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(251, 194, 79, .2);
}
.klantportaal .fase__naam { font: 400 .64rem/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.klantportaal .fase.is-gehad .fase__naam { color: var(--ink-soft); }
.klantportaal .fase.is-nu .fase__naam { color: var(--ink); font-weight: 500; }
.klantportaal .fase__uitleg { margin-top: .35rem; font: italic 400 1rem/1.3 var(--font-display); color: var(--gold-700); }
.fase-nu { margin: -.4rem 0 1.3rem; font: italic 400 1.12rem/1.35 var(--font-display); color: var(--gold-700); }
/* De naam staat op een breed scherm al in de rij; op een smal scherm alleen hier */
.fase-nu__naam { display: none; margin-right: .5rem; font: 500 .64rem/1.4 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 560px) {
  .klantportaal .fasen { overflow: visible; margin-bottom: 1.1rem; }
  .klantportaal .fase, .klantportaal .kp-nu .fase { min-width: 0; padding-top: 1rem; }
  .klantportaal .fase__naam { display: none; }
  .fase-nu { margin-top: 0; }
  .fase-nu__naam { display: inline; }
}

/* ------------------------------------------------- het verhaal (updates) -- */
.klantportaal .tijdlijn { padding-left: 2rem; }
.klantportaal .tijdlijn::before { left: .34rem; background: linear-gradient(to bottom, var(--gold-300), var(--sage-200) 60%); }
.klantportaal .tijdstip { padding-bottom: 2.2rem; }
.klantportaal .tijdstip::before {
  left: -2rem; top: .28rem; width: .72rem; height: .72rem;
  background: var(--paper); border: 1px solid var(--gold-500);
  box-shadow: 0 0 0 4px var(--paper);
}
.klantportaal .tijdstip:first-child::before { background: var(--gold-400); }
.klantportaal .tijdstip__wanneer { font: 400 .66rem/1.4 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--gold-700); }
.klantportaal .tijdstip__titel { margin: .35rem 0 .45rem; font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.klantportaal .tijdstip p.klein { font-size: .97rem; color: var(--ink-soft); }
.klantportaal .tijdstip .bestanden { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }

.kp-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .9rem; margin-top: 1rem; }
.kp-beelden--een { grid-template-columns: minmax(0, 27rem); }
.kp-beeld { margin: 0; }
.kp-beeld a { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--sage-50); }
.kp-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kp-zacht); }
.kp-beeld a:hover img { transform: scale(1.04); }
.kp-beeld video { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--sage-950); }
.kp-beeld figcaption { margin-top: .45rem; font: italic 400 1.02rem/1.3 var(--font-display); color: var(--ink-mute); }

/* ------------------------------------------------------------ beelden -- */
.klantportaal .bestanden { gap: 1.1rem; }
.klantportaal .bestand { border: 1px solid var(--kp-lijn); border-radius: 12px; background: var(--paper); }
.klantportaal .bestand:hover { box-shadow: var(--kp-schaduw-op); transform: translateY(-3px); }
.klantportaal .bestand__beeld img { transition: transform 1s var(--kp-zacht); }
.klantportaal .bestand:hover .bestand__beeld img { transform: scale(1.05); }
.klantportaal .bestand__beeld svg { color: var(--gold-500); }
.klantportaal .bestand__info { padding: .8rem .95rem .95rem; }
.klantportaal .bestand__naam { font: 400 1.08rem/1.3 var(--font-display); }
.klantportaal .bestand__meta { font-size: .76rem; }

/* ----------------------------------------------- offertes en gesprekken -- */
.klantportaal .uitgelicht {
  background: linear-gradient(115deg, var(--gold-100), var(--paper) 72%);
  border-color: rgba(214, 162, 58, .35);
  margin-bottom: clamp(1.4rem, 3vw, 2rem) !important;
}
.klantportaal .uitgelicht h3 { font-size: 1.55rem; }
.klantportaal .uitgelicht__ikoon { width: 3.1rem; height: 3.1rem; background: var(--gold-400); color: var(--sage-950); }
.klantportaal .uitgelicht--stil { background: var(--paper); border-color: var(--kp-lijn); }
.klantportaal .uitgelicht--stil .uitgelicht__ikoon,
.klantportaal .kaartlink .uitgelicht__ikoon { background: var(--sage-50); color: var(--sage-700); }
.klantportaal .offerte__bedrag { font-size: 1.6rem; font-weight: 400; }
.klantportaal .regels td { border-bottom-color: var(--kp-lijn); padding: .45rem 0; }
.klantportaal .reactiebalk { border-radius: 16px 16px 0 0; border-color: var(--kp-lijn); }

/* ---------------------------------------------------- gegevens in rijen -- */
.klantportaal .paar { grid-template-columns: 8.5rem 1fr; gap: .55rem 1rem; font-size: .97rem; }
.klantportaal .paar dt { font: 400 .66rem/1.9 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }

/* ----------------------------------------------------------- formulieren -- */
.klantportaal .veld > label, .klantportaal .veldnaam {
  margin-bottom: .5rem;
  font: 500 .66rem/1.4 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.klantportaal .invoer, .klantportaal .keuze, .klantportaal .memo {
  padding: .8rem 1rem;
  border: 1px solid rgba(26, 31, 28, .16);
  border-radius: 10px;
  background: var(--paper);
  font-size: .98rem;
  font-weight: 300;
}
.klantportaal .invoer:focus, .klantportaal .keuze:focus, .klantportaal .memo:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(251, 194, 79, .2);
}
.klantportaal .hulp { font-size: .84rem; }
.klantportaal .melding { border-radius: 12px; }

/* ------------------------------------------------------------ berichten -- */
/* Voor de klant: zijn eigen berichten rechts, die van La Moon links */
.klantportaal .gesprek { gap: 1.3rem; }
.klantportaal .bericht { max-width: 36rem; margin-left: auto; }
.klantportaal .bericht--uit { margin-left: 0; margin-right: auto; }
.klantportaal .bericht__kop { justify-content: flex-end; }
.klantportaal .bericht--uit .bericht__kop { justify-content: flex-start; }
.klantportaal .bericht__lijf {
  padding: .95rem 1.2rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--gold-100);
  border: 1px solid rgba(214, 162, 58, .25);
  font-size: .97rem;
}
.klantportaal .bericht--uit .bericht__lijf {
  border-radius: 16px 16px 16px 4px;
  background: var(--sage-50);
  border-color: rgba(var(--sage-900-rgb), .1);
  color: var(--ink);
}

/* ------------------------------------------------------ als het leeg is -- */
.klantportaal .leeg {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--paper);
  border: 1px dashed rgba(214, 162, 58, .4);
  border-radius: var(--kp-rond);
}
.klantportaal .leeg svg { color: var(--gold-500); }
.klantportaal .leeg h3 { font-size: 1.65rem; font-weight: 300; color: var(--ink); }

/* -------------------------------------------------------------- aanmelden -- */
.klantportaal .aanmeldblad {
  padding: clamp(1rem, 4vw, 3rem);
  background:
    linear-gradient(120deg, rgba(var(--sage-950-rgb), .94) 0%, rgba(var(--sage-950-rgb), .78) 45%, rgba(var(--sage-950-rgb), .5) 100%),
    url("/assets/img/werkbank.jpg") center / cover no-repeat,
    var(--sage-950);
}
.klantportaal .aanmeldkaart {
  width: min(28rem, 100%);
  padding: clamp(2rem, 5vw, 3rem);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
}
.klantportaal .aanmeldkaart h1 { margin: 0 0 .4rem; font-size: clamp(2.2rem, 6vw, 2.8rem); }
.klantportaal .aanmeldkaart .kp-oog { margin-bottom: .9rem; }
.klantportaal .aanmeldkaart .hulp { font-size: .92rem; }
.klantportaal .aanmeldlogo { width: 9rem; margin-bottom: 2rem; }

/* ---------------------------------------------------------- smalle schermen -- */
@media (max-width: 900px) {
  .kp-nu { grid-template-columns: minmax(0, 1fr); }
  .kp-nu__beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .klantportaal .kaart__kop { padding: 1.3rem 1.3rem 0; }
  .klantportaal .kaart__lijf { padding: 1.1rem 1.3rem 1.4rem; }
  .kp-held { padding: 2.2rem 1.5rem; }
  .kp-voet__binnen { flex-direction: column; align-items: flex-start; }
}

@media print {
  .kp-voet, .bovenbalk__merk { display: none !important; }
}