/* Legmaat: vormgeving.
   Huisstijl: koel gebroken wit, bijna-zwart met een vleug blauw, dunne haarlijnen, strakke hoeken en één helder blauw voor de hoofdknop.
   Letter: Geist (OFL, op de eigen server); getallen met tabular-nums, zodat ze onder elkaar staan.
   Beweging is klein en traag, losse knoppen schalen bij hover vanuit hun midden. */

@font-face {
  font-family: 'Geist';
  src: url('../vendor/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../vendor/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --letter: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;   /* een jasje kan een eigen letter zetten (jasje.js) */
  /* de schermhoogte; bij een groot scherm schaalt het dashboard mee en corrigeert --vh de hoogte (zie main.js) */
  --scherm: calc(100svh * var(--vh, 1));
  --accent: #151A2D;       /* Legmaat: geen kleur als accent, de inkt zelf */
  --accent-vlak: #151A2D;  /* knoppen met witte tekst */
  --accent-donker: #0B0F1E;
  --accent-zacht: #ECEEF2;
  --achtergrond: #F5F6F8;
  --vlak: #FFFFFF;
  --vlak-zacht: #F8F9FB;
  --vlak-diep: #E9EBF0;
  --inkt: #151A2D;
  --inkt-2: #3A4055;
  --grijs: #646B80;
  --grijs-licht: #9AA0B1;
  --hoofd: #2F5BFF;        /* de hoofdknop: helder blauw met witte tekst, net als op de website */
  --hoofd-donker: #1F45E0;
  --hoofd-zacht: #EAF0FF;
  --lijn: rgba(21, 26, 45, .11);
  --lijn-sterk: rgba(21, 26, 45, .2);
  --lint: #151A2D;
  --lint-zacht: #ECEEF2;
  --lint-inkt: #151A2D;
  --goed: #15803D;
  --goed-zacht: #DCF5E3;
  --let: #A15C07;
  --let-zacht: #FDF0D5;
  --fout: #B42318;
  --fout-zacht: #FDE7E5;
  --blauw: #3B5B92;
  --blauw-zacht: #E5ECF6;

  --r-s: 3px;
  --r-m: 4px;
  --r-l: 6px;
  --r-xl: 8px;
  --r-bediening: 4px;    /* knoppen, velden en keuzes: strakke hoeken */
  --hoogte: 32px;        /* knoppen en velden even hoog */

  --schaduw-1: 0 1px 2px rgba(21, 26, 45, .05);
  --schaduw-2: 0 1px 2px rgba(21, 26, 45, .04), 0 10px 28px -14px rgba(21, 26, 45, .16);
  --schaduw-3: 0 2px 6px rgba(21, 26, 45, .06), 0 28px 56px -24px rgba(21, 26, 45, .32);

  --veer: cubic-bezier(.22, 1, .36, 1);
  --rustig: .6s;
  --traag: .9s;

  --nav-hoogte: 0px;
  --zijbalk: 284px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font: 400 12px/1.5 var(--letter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.015em; }
p { text-wrap: pretty; }
.getal, td.getal, .tabulair { font-variant-numeric: tabular-nums; }
.verborgen-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icoon { width: 18px; height: 18px; flex: none; }

:focus-visible { outline: 2px solid var(--accent-vlak); outline-offset: 2px; }
::selection { background: var(--lint-zacht); }

.naar-inhoud {
  position: fixed; left: 16px; top: 12px; z-index: 60;
  padding: 10px 14px; border-radius: var(--r-m); background: var(--inkt); color: #fff; text-decoration: none;
  transform: scale(.9); opacity: 0; pointer-events: none;
}
.naar-inhoud:focus { opacity: 1; transform: none; pointer-events: auto; }

/* ------------------------------------------------------------------ beweging */

@keyframes opkomen { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes opkomen-groot { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vervagen { to { opacity: 0; transform: scale(.98); } }
@keyframes glans { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@keyframes draai { to { transform: rotate(360deg); } }


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

/* ------------------------------------------------------------------ knoppen */

.knop {
  --knop-vlak: var(--accent-vlak);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hoogte); padding: 0 18px; border: 0; border-radius: var(--r-bediening);
  background: var(--hoofd); color: #fff;
  font-weight: 550; font-size: 11px; line-height: 1; white-space: nowrap; text-decoration: none;
  transform-origin: center;
  transition: transform var(--rustig) var(--veer), background-color .4s var(--veer), box-shadow .4s var(--veer), color .4s var(--veer), opacity .4s var(--veer);
  box-shadow: inset 0 0 0 1px rgba(21, 26, 45, .10);
}
.knop:hover { transform: scale(1.04); background: var(--hoofd-donker); }
.knop:active { transform: scale(.97); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }
.knop .icoon { width: 17px; height: 17px; }
/* knop met een rondje: het rondje rechts tegen de rand. Een gewone knop houdt links een normale rand;
   alleen een brede knop zet de tekst in het midden, met links evenveel ruimte als het rondje rechts. */
.knop.met-bol { position: relative; padding: 0 calc(var(--hoogte) + 6px) 0 20px; }
.knop.breed.met-bol { padding: 0 calc(var(--hoogte) + 4px); }
.knop .bol {
  position: absolute; top: 5px; right: 5px; width: calc(var(--hoogte) - 10px); height: calc(var(--hoogte) - 10px); border-radius: var(--r-s);
  display: grid; place-items: center; background: rgba(255, 255, 255, .18); transition: transform var(--rustig) var(--veer);
}
.knop .bol .icoon { width: 15px; height: 15px; }
.knop.met-bol:hover .bol { transform: scale(1.08); }

.knop.zacht { background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn-sterk), var(--schaduw-1); }
.knop.zacht:hover { background: var(--vlak); box-shadow: 0 0 0 1px rgba(21, 26, 45, .26), var(--schaduw-2); }
.knop.zacht .bol { background: var(--vlak-diep); }
.knop.stil { background: transparent; color: var(--inkt-2); box-shadow: none; }
.knop.stil:hover { background: rgba(21, 26, 45, .05); }
.knop.gevaar { background: var(--fout); }
.knop.gevaar:hover { background: #9A1D14; }
.knop.gevaar-stil { background: transparent; color: var(--fout); box-shadow: 0 0 0 1px rgba(180, 35, 24, .25); }
.knop.gevaar-stil:hover { background: var(--fout-zacht); }
.knop.lint { background: var(--lint); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(21, 26, 45, .25); }
.knop.lint:hover { background: var(--accent-donker); }
.knop.klein { height: var(--hoogte); padding: 0 13px; font-size: 10px; gap: 6px; }
.knop.klein .icoon { width: 15px; height: 15px; }
.knop.breed { width: 100%; }
.knop.breed:hover { transform: scale(1.015); }
.knop.breed:active { transform: scale(.99); }
.knop[aria-busy="true"] { pointer-events: none; }
.knop[aria-busy="true"] .icoon-laden { animation: draai 1s linear infinite; }

.knop-icoon {
  width: var(--hoogte); height: var(--hoogte); border: 0; border-radius: var(--r-s); padding: 0;
  display: inline-grid; place-items: center; flex: none;
  background: transparent; color: var(--grijs);
  transform-origin: center;
  transition: transform var(--rustig) var(--veer), background-color .4s var(--veer), color .4s var(--veer);
}
.knop-icoon:hover { transform: scale(1.04); background: rgba(21, 26, 45, .06); color: var(--inkt); }
.app-kop .knop-icoon { width: 40px; height: 40px; }
.app-kop .knop-icoon[aria-current="page"] { background: var(--inkt); color: #fff; }
.knop-icoon:active { transform: scale(.94); }
.knop-icoon:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.knop-icoon.klein { width: calc(var(--hoogte) - 4px); height: calc(var(--hoogte) - 4px); border-radius: var(--r-s); }
.knop-icoon.klein .icoon { width: 16px; height: 16px; }
.knop-icoon.gevaar:hover { color: var(--fout); background: var(--fout-zacht); }

.tekstlink { border: 0; background: none; padding: 0; color: var(--inkt); font-weight: 500; text-decoration: underline; text-decoration-color: var(--lijn-sterk); text-underline-offset: 3px; transition: text-decoration-color .4s var(--veer); }
.tekstlink:hover { text-decoration-color: var(--inkt); }

/* segmenten: een keuze uit een paar opties */
.segment { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-bediening); background: rgba(21, 26, 45, .055); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segment::-webkit-scrollbar { display: none; }
.veld > .segment { align-self: flex-start; }
.segment button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 0; border-radius: var(--r-bediening); background: transparent; color: var(--grijs);
  font-size: 10px; font-weight: 500; white-space: nowrap; transform-origin: center;
  transition: transform var(--rustig) var(--veer), background-color .45s var(--veer), color .45s var(--veer), box-shadow .45s var(--veer);
}
.segment button:hover { color: var(--inkt); background: rgba(255, 255, 255, .6); }
.segment button[aria-pressed="true"], .segment button[aria-pressed="true"]:hover { background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn), 0 1px 3px rgba(21, 26, 45, .1); }
.segment .teller { color: var(--grijs-licht); font-variant-numeric: tabular-nums; }
.segment button[aria-pressed="true"] .teller { color: var(--grijs); }
.segment .icoon { width: 15px; height: 15px; }
.filter-keuze { display: contents; }
select.invoer.filter-select { display: none; padding-left: 12px; font-weight: 500; }
.segment.klein button { height: 28px; padding: 0 10px; font-size: 10px; border-radius: var(--r-bediening); }

/* schakelaar */
.schakel {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0;
  font-size: 10px; font-weight: 500; color: var(--inkt-2); white-space: nowrap;
}
.schakel .baan-knop {
  position: relative; width: 34px; height: 20px; border-radius: var(--r-bediening); background: #D3D7E0; flex: none;
  transition: background-color .45s var(--veer);
}
.schakel .baan-knop::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-s); background: #fff;
  box-shadow: 0 1px 2px rgba(21, 26, 45, .25); transition: transform .5s var(--veer);
}
.schakel[aria-checked="true"] .baan-knop { background: var(--accent-vlak); }
.schakel[aria-checked="true"] .baan-knop::after { transform: translateX(14px); }
.schakel:hover .baan-knop { background: #C9CED5; }
.schakel[aria-checked="true"]:hover .baan-knop { background: var(--accent-donker); }

/* ------------------------------------------------------------------ formulieren */

.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld > .label, .veld > label { font-size: 10px; font-weight: 500; color: var(--inkt-2); }
.veld .label-rij { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.invoer {
  width: 100%; height: var(--hoogte); padding: 0 16px;
  border: 1px solid #D3D7E0; border-radius: var(--r-bediening); background: var(--vlak);
  font-size: 11.5px; color: var(--inkt);
  transition: border-color .35s var(--veer), box-shadow .35s var(--veer), background-color .35s var(--veer);
}
.invoer::placeholder { color: var(--grijs-licht); }
.invoer:hover { border-color: #B8BDCA; }
.invoer:focus { outline: none; border-color: var(--accent-vlak); box-shadow: 0 0 0 3px rgba(21, 26, 45, .14); }
.invoer[aria-invalid="true"] { border-color: var(--fout); }
.invoer[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }
.invoer:disabled, .invoer[readonly] { background: var(--vlak-zacht); color: var(--inkt-2); }
textarea.invoer { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.5; resize: vertical; border-radius: 6px; }
select.invoer {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23646B75'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 14px;
}
.invoer.getal-invoer { font-variant-numeric: tabular-nums; }
.invoer.code {
  height: 52px; text-align: center; font-size: 18.5px; font-weight: 600; letter-spacing: .32em;
  font-variant-numeric: tabular-nums; padding-left: calc(12px + .32em);
}
input[type="color"].kleur-invoer {
  width: var(--hoogte); height: var(--hoogte); padding: 5px; border-radius: var(--r-s); border: 1px solid #D3D7E0; background: var(--vlak); cursor: pointer;
}
input[type="color"].kleur-invoer::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].kleur-invoer::-webkit-color-swatch { border: 0; border-radius: var(--r-s); }
input[type="color"].kleur-invoer::-moz-color-swatch { border: 0; border-radius: var(--r-s); }
.hulp { font-size: 10px; color: var(--grijs); line-height: 1.45; }
.fout-tekst { font-size: 10px; color: var(--fout); font-weight: 500; }
.wachtwoord { position: relative; }
.wachtwoord .invoer { padding-right: 44px; }
.wachtwoord .knop-icoon { position: absolute; right: 2px; top: 2px; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.velden .vol { grid-column: 1 / -1; }
.velden.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulier { display: flex; flex-direction: column; gap: 16px; }
.formulier-knoppen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sterkte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.sterkte span { height: 4px; border-radius: 2px; background: var(--vlak-diep); transition: background-color .5s var(--veer); }
.sterkte[data-niveau="1"] span:nth-child(-n+1) { background: var(--fout); }
.sterkte[data-niveau="2"] span:nth-child(-n+2) { background: var(--let); }
.sterkte[data-niveau="3"] span:nth-child(-n+3) { background: #65A30D; }
.sterkte[data-niveau="4"] span { background: var(--goed); }

/* ------------------------------------------------------------------ vlakken */

.kaart { background: var(--vlak); border-radius: var(--r-l); box-shadow: 0 0 0 1px rgba(21, 26, 45, .05), 0 1px 2px rgba(21, 26, 45, .03); min-width: 0; }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; min-height: 52px; }
.kaart-kop h2 { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.kaart-kop .hulp { margin-top: 2px; }
.kaart-inhoud { padding: 14px 18px 18px; }
.kaart-voet { padding: 12px 18px; border-top: 1px solid var(--lijn); display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* dubbele rand: een vlak in een iets donkerder bakje, voor de belangrijkste blokken */
.bezel { padding: 6px; border-radius: var(--r-xl); background: rgba(21, 26, 45, .04); box-shadow: inset 0 0 0 1px rgba(21, 26, 45, .05); }
.bezel > .kern { border-radius: calc(var(--r-xl) - 6px); background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), inset 0 1px 0 #fff, var(--schaduw-2); }

.scheiding { height: 1px; background: var(--lijn); border: 0; margin: 0; }

/* status-labels */
.status {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-bediening);
  font-size: 10px; font-weight: 500; white-space: nowrap; background: var(--vlak-diep); color: var(--inkt-2);
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.status.lead, .status.concept { background: var(--blauw-zacht); color: var(--blauw); }
.status.offerte, .status.definitief, .status.open { background: var(--let-zacht); color: var(--let); }
.status.klant, .status.betaald, .status.opdracht, .status.uitgevoerd { background: var(--goed-zacht); color: var(--goed); }
.status.inactief, .status.gefactureerd { background: var(--vlak-diep); color: var(--grijs); }
.status.te-laat { background: var(--fout-zacht); color: var(--fout); }
.status.factuur-concept { background: var(--vlak-diep); color: var(--inkt-2); }

/* materiaalstaal: kleur plus patroon, ook leesbaar zonder kleur */
.staal { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(21, 26, 45, .18); overflow: hidden; }
.staal svg { width: 100%; height: 100%; }
.staal.groot { display: block; width: var(--hoogte); height: var(--hoogte); border-radius: 4px; }

/* ------------------------------------------------------------------ navigatie */

.app { min-height: var(--scherm); display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); }
.app.smal { --zijbalk: 72px; }
.kolom { min-width: 0; display: flex; flex-direction: column; }
.demo-band { margin: 16px 32px 0; align-self: flex-start; }

/* ------------------------------------------------------------------ zijbalk */

/* donkere zijbalk, de inhoud ligt ernaast als licht vlak met ronde hoeken */
.app { --zij-vlak: #171513; background: var(--zij-vlak); }
.kolom { background: var(--achtergrond); margin: 10px 10px 10px 0; border-radius: 8px; min-height: calc(var(--scherm) - 20px); overflow: clip; }
.app .editor { height: calc(var(--scherm) - 20px); }
/* het banenplan ligt als groot vlak over het hele venster; de zijbalk schuift niet in maar is er even niet */
.app.werkvlak { grid-template-columns: minmax(0, 1fr); }
.app.werkvlak .zijbalk { display: none; }
.app.werkvlak .kolom { margin: 10px; animation: werkvlak-open .7s var(--veer) backwards; }
@keyframes werkvlak-open { from { opacity: 0; transform: scale(.985); } }

.zijbalk {
  position: sticky; top: 0; height: var(--scherm); display: flex; flex-direction: column; gap: 4px;
  padding: 47px 12px 12px; background: var(--zij-vlak); color: #fff; overflow-y: auto; z-index: 20;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.zij-nav { display: flex; flex-direction: column; gap: 24px; }
.zij-groep { display: flex; flex-direction: column; }
.zij-titel { padding: 0 14px 8px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.zij-blok { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, .045); }
.zij-link {
  position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px; border-radius: var(--r-bediening);
  color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.zij-link .icoon { width: 32px; height: 32px; padding: 7px; border-radius: var(--r-s); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .62); transition: color .3s ease, background-color .3s ease; }
.zij-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.zij-link:hover .icoon { color: #fff; }
.zij-link[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }
.zij-link[aria-current="page"] .icoon { background: #fff; color: var(--zij-vlak); }
.zij-link:focus-visible { outline-color: #fff; }
.zij-voet { margin-top: auto; padding-top: 14px; }
.zij-noot { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .045); font-size: 10px; line-height: 1.45; color: rgba(255, 255, 255, .55); }
.zij-noot b { color: #fff; font-size: 10px; font-weight: 600; }
.app.smal .zij-noot { display: none; }
.zij-account { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px 8px 8px; border-radius: 8px; background: rgba(255, 255, 255, .045); }
.zij-foto { position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-s); background: none; }
.zij-avatar, .avatar { width: 100%; height: 100%; border-radius: var(--r-s); display: grid; place-items: center; overflow: hidden; background: var(--lint-zacht); color: var(--lint-inkt); font-weight: 600; font-size: 10px; }
.zij-avatar img, .avatar img, .lid-avatar img, .profiel-knop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zij-foto-wijzig { position: absolute; inset: 0; border-radius: var(--r-s); display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .3s ease; }
.zij-foto-wijzig .icoon { width: 17px; height: 17px; }
.zij-foto:hover .zij-foto-wijzig, .zij-foto:focus-visible .zij-foto-wijzig { opacity: 1; }
.zij-wie { min-width: 0; display: flex; flex-direction: column; }
.zij-wie b { font-size: 10.5px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.zij-wie span { font-size: 10px; color: rgba(255, 255, 255, .55); overflow-wrap: anywhere; line-height: 1.35; }
.zij-account .knop-icoon { color: rgba(255, 255, 255, .55); }
.zij-account .knop-icoon:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ingeklapt: alleen iconen */
.app.smal .zijbalk { padding-inline: 10px; }
.app.smal .zij-titel, .app.smal .zij-tekst, .app.smal .zij-wie { display: none; }
.app.smal .zij-nav { gap: 10px; }
.app.smal .zij-link { justify-content: center; padding: 0; }
.app.smal .zij-blok { padding: 4px; }
.app.smal .zij-account { grid-template-columns: 38px; justify-content: center; justify-items: center; gap: 6px; padding: 8px 0; }

.menu.boven { transform-origin: bottom left; }
.merk-kort { display: none; }
.foto-rij { display: flex; align-items: center; gap: 16px; }
.foto-rij .avatar { width: 64px; height: 64px; font-size: 15.5px; flex: none; }

/* kruimelpad boven de titel van een detailpagina */
.kruimel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 10.5px; color: var(--grijs); }
.kruimel a { color: var(--grijs); text-decoration: none; transition: color .35s var(--veer); }
.kruimel a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.kruimel .scheider { color: var(--grijs-licht); }
/* het pijltje terug neemt geen extra hoogte, zodat de kruimelregel op één lijn blijft met de navigatie */
.kruimel .kruimel-terug {
  display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 6px -4px 0; border-radius: var(--r-s);
  background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn-sterk); color: var(--inkt-2); text-decoration: none;
  transform-origin: center; transition: transform var(--rustig) var(--veer), box-shadow .35s var(--veer), color .35s var(--veer);
}
.kruimel .kruimel-terug:hover { transform: scale(1.04); color: var(--inkt); box-shadow: 0 0 0 1px #B8BDCA; text-decoration: none; }
.kruimel .kruimel-terug:active { transform: scale(.96); }
.kruimel .kruimel-terug .icoon { width: 15px; height: 15px; }
.kruimel [aria-current] { color: var(--inkt-2); font-weight: 500; }
.app-kop {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  width: max-content; max-width: calc(100% - 32px); margin: 12px auto 0; padding: 6px;
  border-radius: var(--r-bediening); background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-2);
}
.merk { display: inline-flex; align-items: center; gap: 9px; padding: 0 16px 0 14px; text-decoration: none; color: var(--inkt); height: 40px; border-radius: var(--r-bediening); }
.merk-teken { width: 26px; height: 26px; }
.merk-naam { font-weight: 650; font-size: 13px; letter-spacing: -.03em; }
.merk-onder { font-weight: 500; font-size: 12px; letter-spacing: -.01em; color: var(--grijs); margin-left: -3px; }
.inlog-beeld .merk-onder { color: rgba(255, 255, 255, .8); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-bediening);
  color: var(--grijs); text-decoration: none; font-size: 11px; font-weight: 500; white-space: nowrap; transform-origin: center;
  transition: transform var(--rustig) var(--veer), background-color .45s var(--veer), color .45s var(--veer);
}
.nav-link:hover { color: var(--inkt); background: rgba(21, 26, 45, .05); transform: scale(1.04); }
.nav-link:active { transform: scale(.97); }
.nav-link[aria-current="page"] { background: var(--inkt); color: #fff; }
.nav-link .icoon { width: 17px; height: 17px; }
.nav-rechts { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--lijn); }
.profiel-knop {
  width: 40px; height: 40px; border: 0; border-radius: var(--r-s); overflow: hidden; padding: 0; display: grid; place-items: center;
  background: var(--lint-zacht); color: var(--lint-inkt); font-weight: 600; font-size: 10.5px; letter-spacing: .01em;
  transform-origin: center; transition: transform var(--rustig) var(--veer), box-shadow .4s var(--veer);
}
.profiel-knop:hover { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(47, 91, 255, .3); }

.menu {
  position: absolute; z-index: 40; min-width: 240px; padding: 6px; border-radius: 6px; background: var(--vlak);
  box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3);
}
.menu-kop { padding: 10px 12px 8px; }
.menu-kop b { display: block; font-weight: 600; font-size: 11px; }
.menu-kop span { font-size: 10px; color: var(--grijs); word-break: break-all; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 4px;
  background: none; text-align: left; font-size: 11px; color: var(--inkt-2); text-decoration: none;
  transition: background-color .35s var(--veer), color .35s var(--veer);
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(21, 26, 45, .05); color: var(--inkt); }
.menu-item.gevaar { color: var(--fout); }
.menu-item.gevaar:hover { background: var(--fout-zacht); }
.menu .scheiding { margin: 6px 4px; }

.onder-nav { display: none; }
.mobiel-kop { display: none; }

/* ------------------------------------------------------------------ pagina's */

.inhoud { flex: 1; min-width: 0; }
/* tot 1920 pixels schermbreedte vult de pagina het vlak; daarboven schaalt het hele dashboard mee (main.js) */
.pagina { width: 100%; max-width: 1640px; margin: 0 auto; padding: 36px 32px 56px; }
.pagina.smal { max-width: 1640px; }
.pagina-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.pagina-kop .titels { min-width: 0; }
.pagina-kop h1 { font-size: 22px; line-height: 1.15; font-weight: 650; letter-spacing: -.028em; }
.pagina-kop .sub { margin-top: 5px; font-size: 11.5px; color: var(--grijs); }
.pagina-kop .acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.terug {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--grijs); font-size: 10.5px; font-weight: 500;
  text-decoration: none; transform-origin: center; transition: color .4s var(--veer), transform var(--rustig) var(--veer);
}
.terug:hover { color: var(--inkt); transform: scale(1.03); }
.terug .icoon { width: 15px; height: 15px; }
.eyebrow { display: block; margin: 0 0 6px; font-size: 10px; font-weight: 600; color: var(--grijs); letter-spacing: .02em; }

.kaart-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--lijn); }
.kaart-balk .zoek { flex: 1 1 240px; max-width: 380px; }
.kaart-balk .filter-segment { margin-left: auto; }
.kruimel .kruimel-groep { color: var(--grijs-licht); }
.werkbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.zoek { position: relative; flex: 1 1 240px; max-width: 360px; }
.zoek .icoon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--grijs-licht); width: 16px; height: 16px; pointer-events: none; }
.zoek .invoer { padding-left: 40px; }

/* lijsten met rijen */
.rijen { display: flex; flex-direction: column; }
.rij-link {
  position: relative; display: grid; align-items: center; gap: 4px 16px; margin: 0 6px; padding: 13px 12px;
  border-radius: 4px; text-decoration: none; color: inherit; transition: background-color .4s var(--veer);
}
.rij-kop { display: grid; gap: 16px; margin: 0 18px; padding: 10px 0; font-size: 10px; font-weight: 500; color: var(--grijs); border-bottom: 1px solid var(--lijn); }
.rij-kop + .rij-link { margin-top: 4px; }
.rij-titel { font-weight: 550; font-size: 11.5px; min-width: 0; overflow-wrap: anywhere; }
.rij-sub { font-size: 10px; color: var(--grijs); min-width: 0; overflow-wrap: anywhere; }
.rechts { text-align: right; justify-self: end; }
.rijen.klanten .rij-link, .rijen.klanten .rij-kop { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.rijen.projecten .rij-link, .rijen.projecten .rij-kop { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.rijen.facturen .rij-link, .rijen.facturen .rij-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

.actie-datum { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--inkt-2); }
.actie-datum.te-laat { color: var(--fout); font-weight: 500; }
.actie-datum.vandaag { color: var(--let); font-weight: 500; }
.actie-datum .icoon { width: 15px; height: 15px; }

/* lege toestand */
.leeg-staat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 24px 40px; }
.leeg-icoon { width: 52px; height: 52px; border-radius: 6px; display: grid; place-items: center; background: var(--lint-zacht); color: var(--lint-inkt); margin-bottom: 6px; }
.leeg-icoon .icoon { width: 24px; height: 24px; }
.leeg-staat h3 { font-size: 12.5px; font-weight: 600; }
.leeg-staat p { max-width: 42ch; color: var(--grijs); font-size: 11px; }
.leeg-staat .knop { margin-top: 10px; }

/* laden */
.laden { border-radius: 4px; background: linear-gradient(90deg, #ECEEF1 0%, #F6F7F9 45%, #ECEEF1 90%); background-size: 220% 100%; animation: glans 2.4s ease-in-out infinite; }
.laden.regel { height: 14px; }
.laden.blok { height: 64px; border-radius: var(--r-m); }
.laad-rijen { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.laad-rijen .laden:nth-child(3n+2) { width: 82%; }
.laad-rijen .laden:nth-child(3n) { width: 64%; }

/* foutmelding in een blok */
.waarschuwing { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--let-zacht); color: #5B3A05; font-size: 10.5px; }
.waarschuwing.fout { background: var(--fout-zacht); color: #7A1810; }
.waarschuwing.info { background: var(--blauw-zacht); color: #1F3A63; }
.waarschuwing.goed { background: var(--goed-zacht); color: #0E4F27; }
.waarschuwing .icoon { width: 18px; height: 18px; margin-top: 1px; }
.waarschuwing a, .waarschuwing button.tekstlink { color: inherit; }

/* ------------------------------------------------------------------ overzicht */

.overzicht { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.overzicht > .groot { grid-column: span 7; }
.overzicht > .klein { grid-column: span 5; }
.overzicht > .half { grid-column: span 6; }
.overzicht > .vol { grid-column: 1 / -1; }
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cijfer { position: relative; isolation: isolate; padding: 18px 20px 20px; border-left: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; color: inherit; }
a.cijfer::before { content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 6px; background: rgba(21, 26, 45, .04); opacity: 0; transition: opacity .4s var(--veer); }
a.cijfer:hover::before { opacity: 1; }
a.cijfer:focus-visible { outline-offset: -6px; border-radius: 6px; }
.cijfer:first-child { border-left: 0; }
.cijfer .label { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--grijs); font-weight: 500; }
.cijfer .label .icoon { width: 16px; height: 16px; }
.cijfer .waarde { font-size: 22px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cijfer .toelichting { font-size: 10px; color: var(--grijs); }
.cijfer.accent .label::after { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lint); margin-left: 2px; }
.cijfer .waarde { white-space: nowrap; }
.cijfer .centen { color: var(--grijs-licht); }
.taak { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 6px; padding: 12px; border-radius: 4px; text-decoration: none; color: inherit; transition: background-color .4s var(--veer); }

/* Rijen in een lijst: bij hover een afgerond vlak binnen de kaart, net als de knoppen en menu's.
   De scheidingslijnen springen in tot de tekst en verdwijnen rond de rij waar de muis op staat. */
.rij-link::before, .taak::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--lijn);
  pointer-events: none; transition: opacity .4s var(--veer);
}
.rij-link:first-child::before, .taak:first-child::before, .rij-kop + .rij-link::before { display: none; }
.rij-link:hover, .taak:hover { background: rgba(21, 26, 45, .04); }
.rij-link:hover::before, .rij-link:hover + .rij-link::before, .taak:hover::before, .taak:hover + .taak::before { opacity: 0; }
.rij-link:last-child, .taak:last-child { margin-bottom: 6px; }
.rij-link:focus-visible, .taak:focus-visible { outline-offset: -2px; }
.taak-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--let); }
.taak-stip.te-laat { background: var(--fout); }
.groet h1 { font-size: 22px; }

/* ------------------------------------------------------------------ klantkaart en tijdlijn */

.twee-kolommen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.tijdlijn { display: flex; flex-direction: column; }
.moment { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; margin: 0 18px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.moment:first-child { border-top: 0; }
.moment-icoon { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; background: var(--vlak-diep); color: var(--inkt-2); }
.moment-icoon .icoon { width: 16px; height: 16px; }
.moment-icoon.telefoon { background: var(--goed-zacht); color: var(--goed); }
.moment-icoon.mail { background: var(--blauw-zacht); color: var(--blauw); }
.moment-icoon.afspraak { background: var(--lint-zacht); color: var(--lint-inkt); }
.moment-icoon.offerte, .moment-icoon.factuur { background: var(--let-zacht); color: var(--let); }
.moment-tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.moment-meta { font-size: 10px; color: var(--grijs); margin-top: 2px; }
.notitie-invoer { margin: 0 18px; padding: 14px 0 16px; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.notitie-invoer textarea { min-height: 72px; }
.notitie-invoer .rij { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gegevens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 11px; }
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; overflow-wrap: anywhere; }
.opslaan-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--grijs); transition: opacity .6s var(--veer); }
.opslaan-status .icoon { width: 14px; height: 14px; }
.opslaan-status.bezig .icoon { animation: draai 1s linear infinite; }

/* ------------------------------------------------------------------ factuur */

.factuur-regels { width: 100%; border-collapse: collapse; }
.factuur-regels th { font-size: 10px; font-weight: 500; color: var(--grijs); text-align: left; padding: 0 8px 8px; }
.factuur-regels th.getal { text-align: right; }
.factuur-regels td { padding: 4px 4px; vertical-align: top; }
.factuur-regels td:first-child { padding-left: 0; }
.factuur-regels .invoer { height: 40px; font-size: 11px; }
.factuur-regels .invoer.getal-invoer { text-align: right; }
.factuur-regels .bedrag { padding: 13px 8px 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.factuur-regels .kolom-omschrijving { width: 46%; }
.factuur-regels .kolom-aantal { width: 11%; }
.factuur-regels .kolom-eenheid { width: 10%; }
.factuur-regels .kolom-prijs { width: 13%; }
.factuur-regels .kolom-btw { width: 9%; }
.factuur-regels .kolom-bedrag { width: 11%; }
.factuur-totaal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 0; margin-left: auto; width: min(100%, 340px); font-variant-numeric: tabular-nums; font-size: 11px; }
.factuur-totaal .bedrag { padding-left: 24px; }
.factuur-totaal .label.totaal { color: var(--inkt); }
.factuur-totaal .label { color: var(--grijs); }
.factuur-totaal .bedrag { text-align: right; }
.factuur-totaal .totaal { font-size: 14px; font-weight: 650; letter-spacing: -.02em; padding-top: 8px; border-top: 1px solid var(--inkt); }
.regels-alleen-lezen td { padding: 10px 8px; border-top: 1px solid var(--lijn); font-size: 11px; }
.regels-alleen-lezen td.getal { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ materialen */

.materialen-lijst { display: flex; flex-direction: column; }
.materiaal-rij { display: grid; grid-template-columns: var(--hoogte) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) auto auto; gap: 12px; align-items: end; margin: 0 18px; padding: 16px 0; border-top: 1px solid var(--lijn); }
.materiaal-rij:first-child { border-top: 0; }
.materiaal-rij.uit { opacity: .55; }
.materiaal-rij .knop-icoon { margin-bottom: 2px; }

/* ------------------------------------------------------------------ dialoog en meldingen */

dialog.dialoog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(var(--scherm) - 48px); padding: 0; border: 0; border-radius: 8px;
  background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); overflow: auto;
}
dialog.dialoog[open] { animation: vervagen .2s ease-out reverse both; }
dialog.dialoog.sluit { animation: vervagen .3s var(--veer) both; }
dialog.dialoog::backdrop { background: rgba(21, 26, 45, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.dialoog.breed { width: min(640px, calc(100vw - 32px)); }
.dialoog-inhoud { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.dialoog-inhoud h2 { font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.dialoog-inhoud > p { color: var(--inkt-2); font-size: 11.5px; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; flex-wrap: wrap; }

/* de pop-up die de schaal van een blad laat controleren */
.schaal-vak { display: flex; flex-direction: column; gap: 12px; }
.schaal-groot { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: var(--vlak-zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
.schaal-groot-getal { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--inkt); }
.schaal-bron { display: flex; align-items: flex-start; gap: 6px; font-size: 10.5px; color: var(--inkt-2); line-height: 1.45; }
.schaal-bron .icoon { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--goed); }
.schaal-bron.let, .schaal-bron.let .icoon { color: var(--let); }
.schaal-bron.let { font-weight: 500; }
.schaal-controle { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.5; color: var(--inkt); }
.schaal-invoer { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--grijs); }
.schaal-invoer .label { font-weight: 500; color: var(--inkt-2); }
.schaal-invoer .invoer { width: 110px; height: var(--hoogte); font-size: 11px; }
.schaal-dialoog .dialoog-knoppen .knop { justify-content: center; }
dialog.dialoog.schaal-dialoog { width: min(560px, calc(100vw - 32px)); }
@media (max-width: 520px) {
  /* op de telefoon staan de knoppen onder elkaar, de hoofdknop bovenaan */
  .schaal-dialoog .dialoog-inhoud { padding: 18px 16px 14px; }
  .schaal-dialoog .dialoog-knoppen { flex-direction: column-reverse; padding: 0 16px 16px; }
  .schaal-dialoog .dialoog-knoppen .knop { width: 100%; height: 40px; }
}

.meldingen { position: fixed; left: 50%; bottom: 20px; z-index: 70; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.melding {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-bediening);
  background: var(--vlak); color: var(--inkt); font-size: 11px; box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); pointer-events: auto;
}
.melding.weg { animation: vervagen .35s var(--veer) both; }
.melding .icoon { width: 18px; height: 18px; color: var(--goed); }
.melding.fout .icoon { color: var(--fout); }
.melding.info .icoon { color: var(--accent-vlak); }

.tip { position: fixed; z-index: 50; pointer-events: none; padding: 7px 10px; border-radius: 4px; background: var(--vlak); color: var(--inkt); font-size: 10px; white-space: nowrap; box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-2); }

/* ------------------------------------------------------------------ inloggen */

.inlog { min-height: var(--scherm); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.inlog-beeld {
  position: relative; margin: 12px; border-radius: 8px; overflow: hidden; background: var(--inkt); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 36px 40px 40px;
}
.inlog-fotos { position: absolute; inset: 0; }
.inlog-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease-in-out; }
.inlog-foto.actief { opacity: 1; }
.inlog-fotos::after {
  /* donker verloop boven en onder, zodat de tekst leesbaar blijft op elke foto */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 12, 14, .55) 0%, rgba(12, 12, 14, 0) 22%, rgba(12, 12, 14, 0) 45%, rgba(12, 12, 14, .82) 100%);
}
.inlog-bijschrift {
  display: inline-flex; align-self: flex-start; margin-bottom: 14px; padding: 5px 11px; border-radius: var(--r-bediening);
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 500; color: #fff; transition: opacity .7s ease-in-out;
}
.inlog-bijschrift.wissel { opacity: 0; }
.inlog-beeld .merk { color: #fff; padding-left: 0; position: relative; }
.inlog-tekst { position: relative; max-width: 34ch; display: flex; flex-direction: column; }
.inlog-tekst h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.inlog-tekst p { margin-top: 12px; color: rgba(255, 255, 255, .78); font-size: 11.5px; max-width: 40ch; }
.inlog-vak { display: grid; place-items: center; padding: 32px 24px; }
.inlog-kaart { width: min(420px, 100%); }
.inlog-kaart .kern { padding: 26px 26px 24px; }
.inlog-kaart h1 { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.inlog-kaart .sub { margin-top: 6px; color: var(--grijs); font-size: 11px; }
.inlog-kaart form { margin-top: 20px; }
.inlog-voet { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10.5px; }
.inlog-stap { }
.qr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: var(--r-m); background: var(--vlak-zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
.qr img { width: 148px; height: 148px; border-radius: 4px; background: #fff; }
.qr .geheim { font-size: 10px; color: var(--grijs); overflow-wrap: anywhere; }
.qr .geheim code { display: block; margin-top: 4px; font-size: 10px; color: var(--inkt); letter-spacing: .04em; font-family: inherit; font-weight: 600; }
.mobiel-merk { display: none; }
.beveiligd-regel { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 10px; color: var(--grijs); justify-content: center; }
.beveiligd-regel .icoon { width: 15px; height: 15px; color: var(--goed); }
/* inlogscherm van de app: één kaart in het midden, zonder foto's of klantnaam */
.inlog-los { min-height: var(--scherm); display: grid; place-items: center; padding: 32px 16px; background: var(--achtergrond); }
.inlog-merk { display: block; box-sizing: content-box; width: 150px; height: calc(150px * 120 / 1025); padding: 1px; margin: 0 auto 21px; background: var(--inkt); -webkit-mask: url('../img/logo.png') center / contain no-repeat content-box; mask: url('../img/logo.png') center / contain no-repeat content-box border-box; overflow: hidden; text-indent: 200%; white-space: nowrap; }

/* ------------------------------------------------------------------ tekenmodule (banenplan) */

.editor { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 12px; height: calc(var(--scherm) - var(--nav-hoogte) - 24px); padding: 12px; }
.editor-paneel { display: flex; flex-direction: column; min-height: 0; background: var(--vlak); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-1); overflow: hidden; }
.editor-kop { padding: 14px 16px 12px; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.editor-kop .terug { margin: 0; }
/* de kop van het project: naam, klant en adres pas je aan door op de tekst te klikken. Elk veld heeft in
   rust, onder de muis en tijdens het typen dezelfde maat, dus er verspringt niets; de tekst staat op de
   lijn van de rest van het paneel (het vlak eromheen steekt 6 px uit) */
.project-naam, .project-gegeven { border: 0; border-radius: 4px; background: transparent; color: var(--inkt); transition: background-color .3s var(--veer), box-shadow .3s var(--veer); }
.project-naam { width: calc(100% + 12px); margin: 0 -6px; padding: 3px 6px; font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; }
.project-naam:hover, .project-gegeven:hover { background: rgba(21, 26, 45, .045); }
.project-naam:focus, .project-gegeven:focus { outline: none; background: rgba(21, 26, 45, .045); box-shadow: 0 0 0 1.5px rgba(21, 26, 45, .22); }
.project-gegevens { display: flex; flex-direction: column; gap: 1px; }
.project-regel { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; cursor: text; }
.project-regel-label { font-size: 10px; color: var(--grijs); }
.project-gegeven { width: calc(100% + 6px); min-width: 0; margin-right: -6px; margin-left: -6px; padding: 4px 6px; font-size: 10.5px; text-overflow: ellipsis; }
.project-gegeven::placeholder { color: var(--grijs-licht); }
/* een vaste strook voor een scrollbalk die ruimte inneemt (Windows), zodat de inhoud niet verschuift als de lijst langer of korter wordt */
.editor-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; }
.editor-blok { padding: 14px 16px; border-bottom: 1px solid var(--lijn); }
.editor-blok h2 { font-size: 10.5px; font-weight: 600; color: var(--inkt); }
.editor-blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.instellingen-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.instellingen-velden .veld > label { font-size: 10px; color: var(--grijs); font-weight: 500; }
.instellingen-velden .invoer { height: 38px; font-size: 10.5px; padding: 0 9px; }
details.inklap { -webkit-user-select: none; user-select: none; }
details.inklap input, details.inklap textarea { -webkit-user-select: text; user-select: text; }
details.inklap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
details.inklap > summary::-webkit-details-marker { display: none; }
details.inklap > summary > .icoon { transition: transform .24s cubic-bezier(.3, 0, .2, 1); color: var(--grijs); width: 16px; height: 16px; }
/* alleen het pijltje draait, niet een icoon in de tekst ervoor */
details.inklap[open]:not(.sluit) > summary > .icoon { transform: rotate(180deg); }
/* de ruimte onder de kop zit in de inhoud, zodat die meeschuift bij het open- en dichtgaan */
details.inklap .inklap-binnen { padding-top: 10px; }
details.inklap.beweegt > .inklap-inhoud { overflow: hidden; }

.totaal-groot { display: flex; align-items: baseline; gap: 8px; }
.totaal-groot b { font-size: 20px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.totaal-groot span { color: var(--grijs); font-size: 10px; }
.totaal-sub { color: var(--grijs); font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* wat het kost, onder de m²: het bedrag even groot als de m², met inkoop, marge en plinten eronder */
.totaal-kosten { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.kosten-bedrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.kosten-bedrag b, .totaal-groot b { white-space: nowrap; }
.kosten-bedrag b { font-size: 20px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kosten-bedrag span { color: var(--grijs); font-size: 10px; }
.per-materiaal { margin-top: 12px; display: flex; flex-direction: column; }
.per-materiaal .regel { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lijn); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.per-materiaal .regel span:nth-child(3), .per-materiaal .regel span:nth-child(4) { color: var(--grijs); text-align: right; }
.per-materiaal .regel .regel-extra { grid-column: 2 / -1; margin-top: -6px; color: var(--grijs); font-size: 10px; text-align: left; }
/* de vergelijking: een kopregel zoals bij de materialen (pijltjes op één lijn), het grijze vak pas bij openklappen */
.voordeel { font-size: 10px; color: var(--grijs); display: flex; flex-direction: column; }
.voordeel-inklap { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.voordeel-inklap .vergelijk { padding: 10px 12px; border-radius: var(--r-m); background: var(--vlak-zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
.voordeel .vergelijk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.voordeel .vergelijk span:nth-child(even) { text-align: right; color: var(--inkt-2); }
.voordeel .goed { color: var(--goed); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.voordeel .goed .icoon { width: 15px; height: 15px; }
.totaal-inklap { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.totaal-inklap-kop { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 550; color: var(--inkt); }
.totaal-inklap .staaltjes { display: inline-flex; gap: 4px; }
.totaal-inklap .per-materiaal { margin-top: 0; }
.totaal-materialen .per-materiaal { margin-top: 8px; }   /* de materialen staan altijd open onder hun kopregel */
.voordeel-kop { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 550; }
.voordeel .voordeel-kop { gap: 10px; }
.voordeel .voordeel-kop .icoon { width: 14px; height: 14px; flex: none; }
.voordeel-kop.let { color: var(--let); }
.voordeel-inklap .inklap-binnen > .knop { margin-top: 10px; }
/* restmateriaal als letterpaar: open rondje bij de baan met de rest, vol rondje bij de baan die eruit komt */
.rest-merk { pointer-events: none; filter: drop-shadow(0 1px 2px rgba(21, 26, 45, .35)); }
.rest-merk circle { stroke: var(--goed); }
.rest-merk.van circle { fill: #fff; }
.rest-merk.naar circle { fill: var(--goed); stroke: #fff; }
.rest-merk text { font-family: var(--letter); font-weight: 700; }
.rest-merk.van text { fill: var(--goed); }
.rest-merk.naar text { fill: #fff; }
.rest-letter { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: -1px; border-radius: var(--r-s); font-size: 10px; font-weight: 700; }
.rest-letter.van { background: #fff; color: var(--goed); box-shadow: inset 0 0 0 1.5px var(--goed); }
.rest-letter.naar { background: var(--goed); color: #fff; }

.lijst-kop { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px 16px 10px; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.lijst-kop .segment { align-self: flex-start; }
.ruimte-zoek-veld { position: relative; display: flex; align-items: center; }
.ruimte-zoek-veld .icoon { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--grijs); pointer-events: none; }
.ruimte-zoek { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--lijn-sterk, #D3D7E0); border-radius: var(--r-bediening); background: var(--vlak); font-size: 10.5px; color: var(--inkt); transition: border-color .3s var(--veer), box-shadow .3s var(--veer); }
.ruimte-zoek::placeholder { color: var(--grijs-licht); }
.ruimte-zoek:hover { border-color: #B8BDCA; }
.ruimte-zoek:focus { outline: none; border-color: var(--accent-vlak); box-shadow: 0 0 0 3px rgba(21, 26, 45, .14); }
.groep-kop { padding: 14px 16px 6px; font-size: 10px; font-weight: 600; color: var(--grijs); display: flex; justify-content: space-between; gap: 8px; }
.groep-kop > span:last-child { flex: none; }
.groep-naam { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.groep-naam b { flex: none; max-width: 100%; color: var(--inkt-2); font-weight: 600; overflow-wrap: anywhere; }
.groep-naam span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ruimte-rij { margin: 0 12px; padding: 10px 8px; border-radius: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; transition: background-color .4s var(--veer), box-shadow .4s var(--veer), opacity .4s var(--veer); }
.ruimte-rij + .ruimte-rij { margin-top: 6px; }
.ruimte-rij { cursor: pointer; }
/* muis erover: in de lijst en op de tekening iets donkerder */
.ruimte-rij:hover, .ruimte-rij.zweef { background: rgba(21, 26, 45, .06); }
.ruimte-rij.actief { background: var(--vlak); box-shadow: 0 0 0 1.5px var(--inkt), var(--schaduw-1); }
.ruimte-rij:not(.vloer) .ruimte-naam, .ruimte-rij:not(.vloer) .ruimte-m2 { color: var(--grijs); }
/* het klikbare veld is zo breed als de naam zelf, niet over het hele blok */
.ruimte-naam { align-self: flex-start; width: auto; max-width: 100%; min-width: 3ch; field-sizing: content; border: 0; padding: 2px 4px; margin-left: -4px; border-radius: 3px; background: transparent; font-weight: 550; font-size: 11px; }
.ruimte-naam:hover { background: rgba(21, 26, 45, .04); }
.ruimte-naam:focus { outline: none; background: var(--vlak); box-shadow: 0 0 0 2px rgba(47, 91, 255, .45); }
.ruimte-kop { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ruimte-maten { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 10px; color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.ruimte-maten .maat-woord { color: var(--grijs); margin-right: 1px; }
.ruimte-rij:not(.vloer) .ruimte-maten { color: var(--grijs); }
.ruimte-m2 { font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-top: 3px; white-space: nowrap; }
.label-m2 { font-size: 10px; color: var(--grijs-licht); }
.label-m2.afwijkend { color: var(--let); font-weight: 600; }
.ruimte-bediening { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ruimte-bediening .rechts-uit { margin-left: auto; }
.materiaal-kies { position: relative; display: inline-flex; align-items: center; }
.materiaal-kies .staal { position: absolute; left: 9px; pointer-events: none; width: 12px; height: 12px; border-radius: 3px; }
.materiaal-kies select { height: 30px; padding: 0 26px 0 27px; border: 0; border-radius: var(--r-bediening); background-color: rgba(21, 26, 45, .055); font-size: 10px; font-weight: 500; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23646B75'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; transition: background-color .4s var(--veer); }
.materiaal-kies select:hover { background-color: rgba(21, 26, 45, .09); }
.mini-knop { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-bediening); background: rgba(21, 26, 45, .055); font-size: 10px; font-weight: 500; color: var(--inkt-2); white-space: nowrap; transform-origin: center; transition: transform var(--rustig) var(--veer), background-color .4s var(--veer); }
.mini-knop:hover { transform: scale(1.04); background: rgba(21, 26, 45, .09); }
.mini-knop:active { transform: scale(.96); }
.mini-knop .icoon { width: 14px; height: 14px; }
.ruimte-uitkomst { grid-column: 1 / -1; font-size: 10px; color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.richting-hint { margin-top: 3px; color: var(--let); font-weight: 500; }
.richting-uitleg { margin-top: 3px; font-size: 10px; }
/* restmateriaal per ruimte: een eigen licht vlak in de rij, de regels met wat lucht eromheen */
/* restregels: geen eigen vlak, gewoon twee regels tekst */
.rest-blok { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rest-blok { align-items: flex-start; }
.rest-regel { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; color: var(--goed); font-size: 10px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color .4s var(--veer); }
.rest-regel { align-items: flex-start; }
.rest-regel .icoon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.rest-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rest-tekst > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-tekst b { font-weight: 600; }
.rest-tekst span { font-size: 10px; font-weight: 500; color: rgba(21, 128, 61, .78); }
.rest-regel:hover .rest-tekst b { text-decoration: underline; text-underline-offset: 2px; }
.rest-regel[aria-pressed="true"] { color: #0F5E2C; }
.totaal-rest { display: flex; align-items: center; gap: 8px; width: calc(100% + 16px); margin: 6px -8px 0; padding: 5px 8px; border: 0; border-radius: 4px; background: none; color: var(--goed); font-size: 10px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .4s var(--veer); }
.totaal-rest:hover, .totaal-rest[aria-pressed="true"] { background: rgba(21, 128, 61, .1); }
.totaal-rest .icoon { width: 15px; height: 15px; flex: none; }
.lijst-leeg { padding: 24px 16px; color: var(--grijs); font-size: 10.5px; }
.terugzet-knop { display: flex; align-items: center; gap: 6px; margin: 8px 16px 2px; padding: 4px 6px; margin-left: 10px; border: 0; border-radius: 4px; background: none; color: var(--inkt-2); font-size: 10px; font-weight: 500; cursor: pointer; transition: background-color .4s var(--veer); }
.terugzet-knop:hover { background: rgba(21, 26, 45, .045); }
.terugzet-knop .icoon { width: 14px; height: 14px; flex: none; }

.kijker { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--vlak); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-1); overflow: hidden; }
.kijker { container-type: inline-size; }
/* regel 1: het blad, zijn acties en Pdf toevoegen. Regel 2: de gereedschappen met hun naam links, de schaal, de zoom en
   ongedaan maken rechts; past dat niet, dan gaat het rechterdeel naar een derde regel, rechts uitgelijnd. Alles begint
   op dezelfde lijn links en eindigt op dezelfde lijn rechts. */
.kijkbalk { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.kijkrij { display: flex; align-items: center; gap: 6px 12px; min-width: 0; }
.kijkrij:last-child { flex-wrap: wrap; }
.kijkrij > :last-child { margin-left: auto; }
.kijk-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.blad-keuze { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
.blad-houder { position: relative; flex: 1 1 280px; width: 280px; min-width: 0; }
.blad-knop {
  width: 100%; height: var(--hoogte); display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px;
  border: 1px solid #D3D7E0; border-radius: var(--r-bediening); background: var(--vlak); color: var(--inkt); font-size: 10.5px; text-align: left;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.blad-knop:hover { border-color: #B8BDCA; }
.blad-knop[aria-expanded="true"] { border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(21, 26, 45, .14); }
.blad-knop:disabled { background: var(--vlak-zacht); color: var(--grijs); cursor: default; border-color: #D3D7E0; }
.blad-knop > .icoon { width: 15px; height: 15px; flex: none; color: var(--grijs); }
.blad-tekst { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
/* de bladnaam blijft heel; alleen de pdf-naam erachter mag korter worden */
.blad-naam { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.blad-pdf { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: var(--grijs); }
.blad-acties { display: flex; align-items: center; gap: 4px; }
.kijkbalk .gereedschap, .kijkbalk .schaal-veld, .blad-acties { justify-self: start; }
.blad-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max(100%, 340px); max-height: min(440px, 60svh); overflow-y: auto;
  padding: 6px; border-radius: 6px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); overscroll-behavior: contain;
}
.blad-menu-kop { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font-size: 10px; font-weight: 600; color: var(--inkt-2); }
.blad-menu-kop:not(:first-child) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.blad-menu-kop .icoon { width: 16px; height: 16px; flex: none; color: var(--grijs); }
.blad-menu-kop span:nth-of-type(1) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.blad-menu-aantal { flex: none; font-weight: 500; color: var(--grijs); white-space: nowrap; }
.blad-menu-item {
  width: 100%; min-height: 36px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px;
  border: 0; border-radius: 4px; background: none; color: var(--inkt); font-size: 10.5px; text-align: left; transition: background-color .3s ease;
}
.blad-menu-item:hover, .blad-menu-item:focus-visible { background: rgba(21, 26, 45, .05); outline: none; }
.blad-menu-item[aria-checked="true"] { font-weight: 600; }
.blad-menu-item .icoon { width: 15px; height: 15px; display: block; }
.blad-menu-naam { overflow-wrap: anywhere; }
.blad-menu-vloer { font-size: 10px; font-weight: 500; color: var(--grijs); white-space: nowrap; }
.blad-menu-item.terugzetten { color: var(--grijs); }
/* een rij in de bladkeuze: het blad, en rechts een prullenbakje */
.blad-menu-rij { display: flex; align-items: center; gap: 2px; }
.blad-menu-rij .blad-menu-item { flex: 1; min-width: 0; }
.knop-icoon.blad-menu-weg { width: 32px; height: 32px; color: var(--grijs); opacity: .5; transition: opacity .3s ease, color .3s ease, background-color .3s ease, transform .3s var(--veer); }
.blad-menu-rij:hover .blad-menu-weg, .blad-menu-kop:hover .blad-menu-weg, .knop-icoon.blad-menu-weg:focus-visible { opacity: 1; }
.knop-icoon.blad-menu-weg:hover { color: var(--fout); background: var(--fout-zacht); }
.blad-menu-kop .blad-menu-weg { margin: -6px -10px -6px 0; }   /* op één lijn met de prullenbakjes van de bladen */
.keuze-lijst { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.keuze-knop {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 14px 16px;
  border: 1px solid var(--lijn-sterk); border-radius: var(--r-m); background: var(--vlak); color: var(--inkt); text-align: left;
  transition: border-color .3s ease, background-color .3s ease;
}
.keuze-knop:hover { border-color: var(--inkt); }
.keuze-knop.gevaar:hover { border-color: var(--fout); background: var(--fout-zacht); }
.keuze-knop > .icoon { width: 20px; height: 20px; margin-top: 1px; color: var(--grijs); }
.keuze-knop.gevaar > .icoon { color: var(--fout); }
.keuze-knop b { display: block; font-size: 11.5px; font-weight: 600; overflow-wrap: anywhere; }
.keuze-knop span span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--grijs); }
.schaal-veld { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--grijs); font-weight: 500; white-space: nowrap; }
.schaal-veld.uit { opacity: .5; }
.schaal-veld .invoer { width: 72px; height: var(--hoogte); font-size: 10.5px; padding: 0 8px; }
/* het tekentje staat in het veld zelf, zodat de werkbalk niet breder wordt */
.schaal-invoer-vak { position: relative; display: inline-flex; }
.schaal-veld .schaal-invoer-vak .invoer { padding-right: 28px; }
.schaal-status { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--goed); cursor: pointer; }
.schaal-status .icoon { width: 15px; height: 15px; }
.schaal-status.let { color: var(--let); background: var(--let-zacht); }
.schaal-status:focus-visible { outline: 2px solid var(--accent-vlak); outline-offset: 1px; }
.schaal-status[hidden] { display: none; }
/* de gereedschappen: alleen een icoon, in groepjes met een dun streepje ertussen. De naam en wat het doet staan in de
   zweefkaart (.zweefkaart), die meteen bij aanwijzen verschijnt */
.gereedschap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border-radius: var(--r-bediening); background: rgba(21, 26, 45, .055); }
.tool-groep { display: inline-flex; align-items: center; gap: 2px; }
.tool-groep + .tool-groep::before { content: ""; width: 1px; height: 16px; margin: 0 3px; background: rgba(21, 26, 45, .16); }
.tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-bediening); background: none; font-size: 10px; font-weight: 500; color: var(--inkt-2); white-space: nowrap; transform-origin: center; transition: transform var(--rustig) var(--veer), background-color .45s var(--veer), color .45s var(--veer); }
.tool:hover { background: rgba(255, 255, 255, .7); color: var(--inkt); }
.tool[aria-pressed="true"], .tool[aria-pressed="true"]:hover { background: var(--accent-vlak); color: #fff; }
.tool .icoon { width: 16px; height: 16px; }
.tool-hoeken { width: auto; padding: 0 10px; }
/* de zweefkaart: naam, een klein label (erbij of eraf, zelf tekenen of door de app) en één zin. Geen wachttijd, een
   heel korte vervaging; hij vangt de muis niet */
.zweefkaart { position: fixed; z-index: 50; width: max-content; max-width: 260px; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: var(--r-bediening); background: var(--vlak); color: var(--inkt); font-size: 10px; line-height: 1.45; box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s var(--veer), visibility 0s .15s; }
.zweefkaart.aan { opacity: 1; visibility: visible; transition: opacity .15s var(--veer); }
.zweefkaart b { font-size: 11px; font-weight: 600; }
.zweefkaart-label { color: var(--grijs); font-weight: 500; }
.zweefkaart-tekst { color: var(--inkt-2); }
.kijk-rechts > .knop-icoon:disabled { opacity: .38; cursor: default; }
.zoom { display: inline-flex; align-items: center; gap: 2px; }
#zoom-waarde { font-size: 10px; font-variant-numeric: tabular-nums; width: 38px; text-align: center; color: var(--grijs); }
/* smalle kijker (telefoon of smal venster): twee vaste regels, de bladkeuze krijgt de ruimte en de knoppen worden iconen */
/* een kijker tot 860 px (een laptop met beide zijpanelen open): het zoompercentage valt weg, zodat de gereedschappen en
   de schaal met het zoomen op één regel blijven */
@container (max-width: 860px) { #zoom-waarde { display: none; } }
@container (max-width: 720px) {   /* telefoon: een eigen indeling */
  .kijkbalk { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .kijkrij { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .kijkrij > :last-child { margin-left: auto; }
  .blad-keuze { flex: 1; min-width: 0; }
  .blad-keuze > .knop-icoon { display: none; }
  .blad-houder { flex: 1; width: auto; position: static; }
  .blad-menu { top: 52px; left: 10px; right: 10px; width: auto; }
  .kijkbalk .knop span, .schaal-woord, #zoom-waarde { display: none; }
  .kijkbalk .knop.klein { width: 36px; padding: 0; justify-content: center; }
}

/* de uitleg bij een hulpmiddel ligt over de tekening, zodat de tekening niet naar beneden schuift */
.vel-vlak { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* de uitleg hangt bovenin over de tekening, iets doorzichtig, en laat kliks door naar de tekening: alleen de knop en het
   invulveld vangen de muis. Weg te klikken; het i-tje rechtsboven haalt hem terug */
.tool-balk { position: absolute; top: 6px; left: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-m); background: rgba(236, 238, 242, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--lint-inkt); pointer-events: none; box-shadow: 0 0 0 1px rgba(21, 26, 45, .14), var(--schaduw-2); font-size: 10px; }
.tool-balk .icoon { width: 16px; height: 16px; flex: none; }
.tool-balk .meet-form, .tool-balk .tool-balk-sluit { pointer-events: auto; }
.tool-balk .tool-balk-sluit { margin-left: auto; width: 26px; height: 26px; color: var(--grijs); }
.tool-balk .tool-balk-sluit:hover { color: var(--inkt); background: rgba(21, 26, 45, .08); }
.uitleg-knop { position: absolute; top: 8px; right: 10px; z-index: 5; width: 28px; height: 28px; background: rgba(255, 255, 255, .9); color: var(--grijs); box-shadow: 0 0 0 1px var(--lijn); }
.uitleg-knop:hover { color: var(--hoofd); background: #fff; }

/* ------------------------------------------------------------------ de AI kijkt mee */

/* een rustig label boven de lijst met ruimtes; met voorstellen klapt het uit */
.ai-plek[hidden] { display: none; }
.ai-label { display: flex; align-items: center; gap: 8px; min-height: var(--hoogte); padding: 6px 10px; border-radius: var(--r-bediening); background: var(--hoofd-zacht); color: var(--hoofd-donker); font-size: 10px; line-height: 1.4; animation: opkomen .5s var(--veer) both; }
.ai-label > .icoon { width: 15px; height: 15px; flex: none; }
.ai-label > span { flex: 1; min-width: 0; }
.ai-label b { font-weight: 600; }
.ai-label.bezig { background: var(--vlak-zacht); color: var(--inkt-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.ai-label.fout { background: var(--vlak-zacht); color: var(--grijs); box-shadow: inset 0 0 0 1px var(--lijn); }
/* de AI las het blad niet (of de app zocht zonder AI): de waarschuwingskleur, nooit het blauw van "gelezen" */
.ai-label.waarschuwing { background: var(--let-zacht); color: var(--let); box-shadow: inset 0 0 0 1px rgba(161, 92, 7, .22); }
.ai-label-knop { flex: none; height: 24px; padding: 0 9px; border: 0; border-radius: var(--r-bediening); background: rgba(161, 92, 7, .12); color: var(--let); font-size: 10px; font-weight: 600; transform-origin: center; transition: transform var(--rustig) var(--veer), background-color .4s var(--veer); }
.ai-label-knop:hover { background: rgba(161, 92, 7, .2); }
.ai-draai, .ai-label > .ai-draai { display: inline-grid; place-items: center; flex: none; }
.ai-draai .icoon { width: 15px; height: 15px; color: var(--hoofd); animation: draai 1.4s linear infinite; }
.ai-vak > summary { cursor: pointer; list-style: none; }
.ai-vak > summary::-webkit-details-marker { display: none; }
.ai-vak > summary .pijl { width: 13px; height: 13px; flex: none; transition: transform .4s var(--veer); }
.ai-vak[open] > summary { border-radius: var(--r-bediening) var(--r-bediening) 0 0; }
.ai-vak[open] > summary .pijl { transform: rotate(180deg); }
.ai-voorstellen { max-height: 260px; overflow: auto; overscroll-behavior: contain; border-radius: 0 0 var(--r-bediening) var(--r-bediening); box-shadow: inset 0 0 0 1px var(--lijn); animation: vervagen .4s var(--veer) reverse both; }
.ai-voorstellen ul { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.ai-rij { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 5px; cursor: pointer; transition: background-color .4s var(--veer); }
.ai-rij:hover, .ai-rij.actief { background: var(--vlak-zacht); }
.ai-rij-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 10px; line-height: 1.4; }
.ai-rij-tekst b { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 10.5px; color: var(--inkt); }
.ai-rij-tekst > span { color: var(--inkt-2); }
.ai-opm { color: var(--let) !important; }
.ai-knoppen { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.ai-knoppen .knop.klein { height: 28px; padding: 0 10px; }
.ai-mis { cursor: default; }
.ai-pin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hoofd); color: #fff; flex: none; }
.ai-pin .icoon { width: 11px; height: 11px; }
.ai-alles { padding: 2px 12px 8px; }
/* zolang de AI leest: de tekening gedimd, in het midden wat hij doet; een zachte glans gaat over de tekening */
.ai-lees { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px; background: rgba(245, 246, 248, .62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .5s var(--veer); overflow: hidden; }
.ai-lees[hidden] { display: none; }
.ai-lees.aan { opacity: 1; }
.ai-lees::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(47, 91, 255, .07) 50%, transparent 65%); background-size: 250% 100%; animation: glans 3.2s ease-in-out infinite; pointer-events: none; }
.ai-lees-blok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(340px, 100%); padding: 22px 22px 18px; border-radius: var(--r-l); background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); text-align: center; }
.ai-lees-blok > b { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.ai-lees-icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hoofd-zacht); color: var(--hoofd); animation: puls 2.4s ease-in-out infinite; }
.ai-lees-icoon .icoon { width: 20px; height: 20px; }
.ai-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-self: stretch; text-align: left; font-size: 10.5px; color: var(--grijs); }
.ai-stappen li { display: flex; align-items: center; gap: 8px; }
.ai-stappen li.bezig { color: var(--inkt); font-weight: 600; }
.ai-stappen li.klaar { color: var(--goed); }
.ai-stap-punt { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lijn-sterk); }
.ai-stappen li.bezig .ai-stap-punt { box-shadow: inset 0 0 0 1.5px var(--hoofd); background: radial-gradient(circle, var(--hoofd) 0 3px, transparent 3.5px); animation: puls 1.6s ease-in-out infinite; }
.ai-stappen li.klaar .ai-stap-punt { background: var(--goed); box-shadow: none; color: #fff; }
.ai-stap-punt .icoon { width: 10px; height: 10px; }
.ai-lees-tijd { font-size: 10px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.ai-herstel { margin: 0; padding: 6px 10px; border-radius: var(--r-bediening); background: var(--let-zacht); color: var(--let); font-size: 10.5px; font-weight: 500; }
/* de AI kon het blad niet lezen: de laag blijft staan als foutmelding, zonder glans */
.ai-lees.fout::before { content: none; }
.ai-fout-blok { width: min(380px, 100%); }
.ai-lees-icoon.fout { background: var(--let-zacht); color: var(--let); animation: none; }
.ai-fout-reden { margin: 0; font-size: 11px; line-height: 1.5; color: var(--inkt-2); }
.ai-fout-knoppen { display: flex; flex-direction: column; align-items: stretch; gap: 6px; align-self: stretch; margin-top: 4px; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.ai-groep { margin: 10px 12px 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grijs); }
.ai-voet { padding: 8px 12px 10px; border-top: 1px solid var(--lijn); color: var(--grijs); font-size: 9.5px; }

/* een ruimte die de AI zag en de app niet: een blauw punt met de naam, klikbaar */
.ai-gemist { cursor: pointer; }
.ai-gemist-zone { fill: rgba(47, 91, 255, .14); stroke: var(--hoofd); stroke-width: .8; stroke-dasharray: 2.4 1.6; vector-effect: non-scaling-stroke; }
.ai-gemist-punt { fill: var(--hoofd); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ai-gemist-naam { fill: var(--hoofd-donker); font-weight: 650; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ai-gemist:hover .ai-gemist-zone { fill: rgba(47, 91, 255, .24); }
/* een punt van een ruimte die je zelf hebt weggehaald: een open bolletje, één klik zet hem terug */
.ai-gemist.weg .ai-gemist-punt { fill: #fff; stroke: var(--hoofd); stroke-width: 2; }
.ai-gemist.weg .ai-gemist-zone { fill: rgba(47, 91, 255, .07); }
.ai-pin.weg { background: #fff; color: var(--hoofd); box-shadow: inset 0 0 0 1.5px var(--hoofd); }
.vel.modus .ai-gemist { pointer-events: none; }
.tool-balk > span { flex: 1 1 260px; min-width: 0; line-height: 1.45; }
.meet-form { display: flex; align-items: center; gap: 6px; }
.meet-form .invoer { width: 92px; height: 36px; font-size: 10.5px; }
.vel-houder { flex: 1; overflow: auto; position: relative; background-color: #F1F3F6; background-image: linear-gradient(rgba(21, 26, 45, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 26, 45, .055) 1px, transparent 1px); background-size: 24px 24px; overscroll-behavior: contain; }
.vel { position: relative; margin: 16px; background: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--lijn), 0 24px 60px -32px rgba(21, 26, 45, .4); }
.vel img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; opacity: var(--tekening-sterkte, 1); }
.vel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vel-laden { position: absolute; inset: 0; display: grid; place-items: center; color: var(--grijs); font-size: 10px; }
.leeg-vel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; max-width: 440px; margin: 56px auto; padding: 40px 28px; border-radius: 8px; background: var(--vlak); border: 1.5px dashed #CDD1DA; color: var(--grijs); cursor: pointer; transform-origin: center; transition: border-color .5s var(--veer), transform var(--rustig) var(--veer); }
.leeg-vel:hover { border-color: var(--inkt); transform: scale(1.01); }
.leeg-vel b { color: var(--inkt); font-weight: 600; font-size: 12.5px; }
.leeg-vel .leeg-icoon { margin-bottom: 4px; }
.sleep { position: absolute; inset: 10px; z-index: 6; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--inkt); border-radius: 6px; background: rgba(245, 246, 248, .93); color: var(--inkt); font-size: 12.5px; font-weight: 600; pointer-events: none; opacity: 0; transform: scale(.98); transition: opacity .5s var(--veer), transform var(--rustig) var(--veer); }
.kijker.slepen .sleep { opacity: 1; transform: none; }
.legenda { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-2); font-size: 10px; max-width: calc(100% - 28px); }
.legenda .regel { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legenda .regel span:last-child { color: var(--grijs); margin-left: auto; padding-left: 12px; }
.voortgang { position: absolute; left: 50%; top: 14px; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-bediening); background: var(--accent-vlak); color: #fff; font-size: 10.5px; font-weight: 600; box-shadow: var(--schaduw-3); white-space: nowrap; }
.voortgang .icoon { width: 17px; height: 17px; color: #fff; animation: draai 1s linear infinite; }

/* svg-laag op de tekening */
.r-vorm { fill: rgba(21, 26, 45, 0); stroke: #8E8E98; stroke-width: .8; stroke-dasharray: 3 2; cursor: pointer; transition: fill .4s var(--veer); }
.r-vorm:hover, .ruimte.zweef .r-vorm { fill: rgba(21, 26, 45, .12); }
.ruimte.vloer .r-vorm { stroke: var(--materiaal, var(--inkt)); stroke-width: 2; stroke-dasharray: none; }
/* een voorstel van de AI: oranje gestippeld met het woord Voorstel, telt pas mee na Overnemen */
.ruimte.voorstel .r-vorm { fill: rgba(217, 119, 6, .1); stroke: #D97706; stroke-width: 1.8; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.voorstel-tekst { font-family: var(--letter); font-weight: 650; fill: #B45309; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
/* de gekozen ruimte: de rest van het blad iets donkerder, de ruimte zelf met een rand in de accentkleur */
.keuze-sluier { fill: rgba(21, 26, 45, .22); pointer-events: none; }
/* het vlak rond het blad krijgt dezelfde sluier; een schaduw aan de binnenkant ligt onder het blad zelf */
.vel-houder { transition: box-shadow .45s var(--veer); }
.vel-houder.met-keuze { box-shadow: inset 0 0 0 100vmax rgba(21, 26, 45, .22); }
.keuze-rand { fill: none; stroke: var(--accent); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(0 0 4px rgba(21, 26, 45, .35)); }
.keuze-laag.nieuw { animation: keuze-in .45s var(--veer); }
@keyframes keuze-in { from { opacity: 0; } to { opacity: 1; } }
.met-keuze .baan-tekst:not(.van-keuze):not(.licht) { opacity: .45; }
.baan { stroke-width: .45; pointer-events: none; fill-opacity: min(1, calc(.42 * var(--kleur-sterkte, 1))); }
.baan.oneven { fill-opacity: min(1, calc(.58 * var(--kleur-sterkte, 1))); }
.baan.uit-rest { stroke-width: .9; }
/* tegels en stroken: dunne voegen in de kleur van het materiaal; een gesneden stuk is iets lichter */
.tegel-voeg { fill: none; stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-opacity: .85; pointer-events: none; }
.tegel-gesneden { fill: #fff; fill-opacity: .38; stroke: none; pointer-events: none; }
/* vloerverwarming: het vlak heel licht, de buis als doorlopende lijn met ronde bochten */
.buis-vlak { fill-opacity: min(1, calc(.18 * var(--kleur-sterkte, 1))); }
.buis-lijn { fill: none; stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-opacity: .9; pointer-events: none; }
.rest-pijl { fill: none; stroke: var(--goed); stroke-linecap: round; pointer-events: none; }
/* restbanen die oplichten: die twee banen sterk, de rest van de tekening zachter */
/* restmateriaal staat in dezelfde schijnwerper als een gekozen ruimte, met een hoekige lijn in de accentkleur ertussen */
/* in de inkt, met een brede witte rand eromheen zodat de lijn op elke baankleur te zien is */
.rest-lijn { fill: none; stroke: var(--inkt); stroke-width: 3.5px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-linecap: round; pointer-events: none;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(21, 26, 45, .45)); }
.rest-label { fill: var(--inkt); pointer-events: none; filter: drop-shadow(0 1px 3px rgba(21, 26, 45, .3)); }
.rest-label-tekst { fill: #fff; font-family: var(--letter); font-weight: 650; pointer-events: none; }
.rest-lijn-punt { fill: var(--inkt); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
/* de gum: alleen zelf getekende lijnen; onder de muis kleurt alleen die lijn rood en licht hij op */
.vel.modus.modus-gum .r-vorm { cursor: pointer; }
.vel.modus.modus-gum .ruimte.gum-ruimte .r-vorm { fill: rgba(180, 35, 24, .16); stroke: var(--fout); stroke-width: 2.5px; stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.gum-raak { fill: none; stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.gum-lijn { fill: none; stroke: var(--inkt); stroke-width: 2px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; transition: stroke .2s var(--veer); }
.gum-doelwit:hover .gum-lijn { stroke: var(--fout); stroke-width: 3.5px; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(180, 35, 24, .7)); }
@keyframes oplichten { from { opacity: .35; } to { opacity: 1; } }
.rest-punt { fill: var(--goed); pointer-events: none; }
.rest-pijl-rand { fill: #fff; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
path.rest-pijl-rand { fill: none; }
.rest-pijl-bron { fill: var(--goed); stroke: #fff; pointer-events: none; }
.baan-tekst { font-family: var(--letter); font-weight: 600; fill: var(--inkt); pointer-events: none; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: .9px; stroke-linejoin: round; }
.r-label { font-family: var(--letter); font-weight: 650; fill: var(--inkt); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2.6px; stroke-linejoin: round; }
.r-label.r-stuks { font-weight: 550; fill: var(--inkt-2, #3f4a55); opacity: .85; }
.vel.modus #vel-svg, .vel.modus .r-vorm { cursor: crosshair; }
/* slepen met de hand: het gereedschap Slepen, de spatiebalk ingedrukt, of de middelste muisknop */
.vel.modus-hand, .vel.modus-hand #vel-svg, .vel.modus-hand .r-vorm, .vel.spatie, .vel.spatie #vel-svg, .vel.spatie .r-vorm { cursor: grab; }
.vel.modus-hand .r-vorm:hover, .vel.spatie .r-vorm:hover { fill: rgba(21, 26, 45, 0); }
.vel-houder.sleept, .vel-houder.sleept * { cursor: grabbing !important; user-select: none; }
.vel.modus-verplaatsen .r-vorm, .vel.modus-verplaatsen #vel-svg { cursor: move; }
.vel.modus-samenvoegen .r-vorm { cursor: pointer; }
.meting-lijn { stroke-dasharray: none; stroke-width: 2; }
.vel.modus .r-vorm:hover { fill: rgba(21, 26, 45, 0); }
.vel.modus-verplaatsen .r-vorm:hover, .vel.modus-samenvoegen .r-vorm:hover { fill: rgba(47, 91, 255, 0.12); }
.hulp-vlak { fill: rgba(47, 91, 255, .2); stroke: none; pointer-events: none; }
.hulp-vlak.hulp-weg { fill: rgba(180, 35, 24, .18); }
.hulp-lijn { fill: none; stroke: var(--inkt); stroke-width: 1.6; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.hulp-punt { fill: var(--lint); stroke: var(--inkt); stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; }
/* het startpunt zodra de vorm dicht kan: groter en groen, en nog groter zodra de muis erbij is. Klik erop om af te sluiten */
.hulp-punt.hulp-start { fill: var(--goed); stroke: #fff; stroke-width: 2.2; transition: r .2s var(--veer); }
.hulp-punt.hulp-start-bij { fill: var(--hoofd); }
/* de loep bij het tekenen: rond venster naast de muis, met een kruisdraad op het klikpunt */
.loep { position: fixed; left: 0; top: 0; z-index: 55; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lijn), var(--schaduw-3); pointer-events: none; }
.loep-svg { display: block; width: 100%; height: 100%; }
.loep::before, .loep::after { content: ""; position: absolute; background: rgba(47, 91, 255, .7); pointer-events: none; }
.loep::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.loep::after { top: 50%; left: 0; right: 0; height: 1px; }
@media (hover: none) { .loep { display: none; } }
.hulp-handvat { stroke: var(--hoofd); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.hulp-handvat-punt { fill: #fff; stroke: var(--hoofd); stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: none; }
.snap-plek { fill: rgba(255, 255, 255, .85); stroke: var(--hoofd); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.rand-greep { cursor: move; touch-action: none; }
.rand-greep .rand-blok { fill: #fff; stroke: var(--hoofd); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: .8; transition: opacity .2s; }
.rand-greep:hover .rand-blok, .rand-greep.actief .rand-blok { opacity: 1; fill: var(--hoofd); }
.rand-greep.actief { cursor: grabbing; }
/* Punt verplaatsen: een blokje op elk hoekpunt van de gekozen ruimte; slepen verplaatst alleen dat punt */
.punt-greep { cursor: move; touch-action: none; }
.punt-greep .punt-blok { fill: #fff; stroke: var(--hoofd); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill .2s; }
.punt-greep:hover .punt-blok, .punt-greep.actief .punt-blok { fill: var(--hoofd); }
.punt-greep.actief { cursor: grabbing; }
.vel.modus-punt .r-vorm { cursor: pointer; }
.vel.modus-punt .r-vorm:hover { fill: rgba(47, 91, 255, 0.12); }
.hulp-tekst { font-family: var(--letter); font-weight: 600; fill: var(--inkt); paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
/* Weghalen: wat de app zelf vond dat niet klopt, rood met een streepjesrand; de klik gaat naar het blad eronder */
.verdacht-vlak { fill: rgba(180, 35, 24, .22); stroke: #B42318; stroke-width: 1.6; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.verdacht-tekst { font-family: var(--letter); font-weight: 650; fill: #8F1D14; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* ------------------------------------------------------------------ instellingen */

.instellingen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.instellingen > .sub-nav { display: none; }
.sub-nav { position: sticky; top: calc(var(--nav-hoogte) + 24px); display: flex; flex-direction: column; gap: 2px; }
.sub-nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 4px; color: var(--grijs); text-decoration: none; font-size: 11px; font-weight: 500; transform-origin: center; transition: background-color .4s var(--veer), color .4s var(--veer), transform var(--rustig) var(--veer); }
.sub-nav a:hover { color: var(--inkt); background: rgba(21, 26, 45, .05); transform: scale(1.03); }
.sub-nav a[aria-current="page"] { background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-1); }
.sub-nav .icoon { width: 17px; height: 17px; }
.instellingen-inhoud { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lid { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin: 0 18px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.lid:first-child { border-top: 0; }
.lid-avatar { width: 36px; height: 36px; border-radius: var(--r-s); overflow: hidden; display: grid; place-items: center; background: var(--vlak-diep); color: var(--inkt-2); font-weight: 600; font-size: 10px; }
.factor { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 18px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.factor:first-child { border-top: 0; }
.factor .lid-avatar { background: var(--goed-zacht); color: var(--goed); }
.logregel { display: grid; grid-template-columns: 140px 120px minmax(0, 1fr); gap: 12px; margin: 0 18px; padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 10px; }
.logregel:first-child { border-top: 0; }
.logregel span:first-child { color: var(--grijs); font-variant-numeric: tabular-nums; }
.maatregelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.maatregel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 18px; border-top: 1px solid var(--lijn); font-size: 10.5px; }
.maatregel:nth-child(-n+2) { border-top: 0; }
.maatregel:nth-child(even) { border-left: 1px solid var(--lijn); }
.maatregel .icoon { color: var(--goed); width: 18px; height: 18px; margin-top: 1px; }
.maatregel b { display: block; font-weight: 600; margin-bottom: 2px; }
.maatregel span { color: var(--grijs); }

/* ------------------------------------------------------------------ smalle schermen */

@media (max-width: 1080px) {
  .nav-link .nav-tekst { display: none; }
  .nav-link { padding: 0 12px; }
  .overzicht > .groot, .overzicht > .klein, .overzicht > .half { grid-column: 1 / -1; }
  .twee-kolommen { grid-template-columns: minmax(0, 1fr); }
  .editor { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --nav-hoogte: 56px; }
  .app { display: block; background: var(--achtergrond); }
  .kolom { margin: 0; border-radius: 0; min-height: 100svh; overflow: visible; }
  .app.werkvlak .kolom { margin: 0; animation: none; }
  .mobiel-titel { font-weight: 650; font-size: 13px; letter-spacing: -.02em; padding-left: 8px; }
  .zijbalk { display: none; }
  .demo-band { margin: 12px 16px 0; }
  .kaart-balk { padding: 12px 14px; }
  .kaart-balk .filter-segment { margin-left: 0; }
  .instellingen > .sub-nav { display: flex; }
  body { font-size: 12px; }
  .app-kop { display: none; }
  .mobiel-kop {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 12px 0 8px; background: rgba(245, 246, 248, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn);
  }
  .onder-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--lijn);
  }
  .onder-nav a, .onder-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; border: 0; border-radius: 4px;
    background: none; color: var(--grijs); text-decoration: none; font-size: 10px; font-weight: 500;
    transition: color .4s var(--veer), background-color .4s var(--veer);
  }
  .onder-nav .icoon { width: 22px; height: 22px; }
  .onder-nav [aria-current="page"] { color: var(--inkt); background: rgba(21, 26, 45, .05); }
  .inhoud { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .meldingen { bottom: calc(84px + env(safe-area-inset-bottom)); }

  .pagina { padding: 20px 16px 32px; }
  .pagina-kop { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
  .pagina-kop h1, .groet h1 { font-size: 18.5px; }
  .pagina-kop .acties { width: 100%; }
  .invoer, .invoer.code { font-size: 12.5px; }
  :root { --hoogte: 40px; }
  .velden, .velden.drie { grid-template-columns: minmax(0, 1fr); }
  .zoek { max-width: none; flex-basis: 100%; }
  .filter-segment { display: none; }
  select.invoer.filter-select { display: block; }

  .rij-kop { display: none; }
  .rijen.klanten .rij-link, .rijen.projecten .rij-link, .rijen.facturen .rij-link { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 10px; }
  .rij-link > .mobiel-weg { display: none; }
  .rij-link > .rechts, .rij-link > .rechts-mobiel { grid-column: 2; grid-row: 1; justify-self: end; }
  .rij-link > .actie-cel { grid-column: 1 / -1; }

  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfer:nth-child(3) { border-left: 0; }
  .cijfer:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .cijfer .waarde { font-size: 16.5px; }
  .cijfer { padding: 16px 16px 18px; }

  .inlog { grid-template-columns: minmax(0, 1fr); }
  .inlog-beeld { display: none; }
  .inlog-vak { align-items: start; padding: 28px 16px; }
  .mobiel-merk { display: flex; justify-content: center; margin-bottom: 18px; }
  .inlog-kaart .kern { padding: 22px 18px 20px; }
  .qr { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

  .editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, 58svh) auto; height: auto; padding: 8px; }
  .editor-paneel { order: 2; }
  .kijker { order: 1; }
  .editor-scroll { overflow: visible; }
  .lijst-kop { position: static; }
  .legenda { left: 10px; bottom: 10px; padding: 8px 10px; }

  .instellingen { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sub-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .sub-nav a { flex: none; }
  .materiaal-rij { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .materiaal-rij > .veld { grid-column: 1 / -1; }
  .materiaal-rij > .veld.naam-veld { grid-column: 2 / 3; }
  .maatregelen { grid-template-columns: minmax(0, 1fr); }
  .maatregel:nth-child(even) { border-left: 0; }
  .maatregel:nth-child(2) { border-top: 1px solid var(--lijn); }
  .logregel { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .factuur-regels, .factuur-regels tbody { display: block; width: 100%; }
  .factuur-regels thead { display: none; }
  .factuur-regels tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 10px 8px; padding: 14px 0; border-top: 1px solid var(--lijn);
    grid-template-areas: "oms oms oms oms" "aan een pri btw" "weg weg bed bed";
  }
  .factuur-regels tr:first-child { border-top: 0; padding-top: 2px; }
  .factuur-regels tr > td, .factuur-regels tr > td[class] { width: auto; min-width: 0; padding: 0; border-top: 0; }
  .factuur-regels .kolom-omschrijving { grid-area: oms; }
  .factuur-regels .kolom-aantal { grid-area: aan; }
  .factuur-regels .kolom-eenheid { grid-area: een; }
  .factuur-regels .kolom-prijs { grid-area: pri; }
  .factuur-regels .kolom-btw { grid-area: btw; }
  .factuur-regels .kolom-bedrag { grid-area: bed; text-align: right; align-self: center; padding: 0; }
  .factuur-regels .kolom-weg { grid-area: weg; align-self: center; }
  .factuur-regels td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 10px; font-weight: 500; color: var(--grijs); text-align: left; }
  .factuur-regels .kolom-bedrag[data-label]::before { text-align: right; }
  .regels-alleen-lezen .kolom-omschrijving { font-weight: 550; }
  .regels-alleen-lezen td.getal { text-align: left; }
  .regels-alleen-lezen tr { grid-template-areas: "oms oms oms oms" "aan een pri btw" ". . bed bed"; }
  .factuur-regels .invoer.getal-invoer { text-align: left; }
  .factuur-regels .invoer { padding: 0 10px; }
  .factuur-regels select.invoer { padding-right: 24px; background-position: right 8px center; background-size: 11px; }
}

@media print {
  .app-kop, .onder-nav, .mobiel-kop, .meldingen { display: none !important; }
}

/* ------------------------------------------------------------------ versie 2: balk bovenin en werkscherm */

/* geen zijbalk meer: bovenin een lichte balk, daaronder het werk */
.app, .app.werkvlak { display: flex; flex-direction: column; min-height: var(--scherm); background: var(--achtergrond); }
.kolom, .app.werkvlak .kolom { flex: 1; min-height: 0; margin: 0; border-radius: 0; background: transparent; overflow: visible; animation: none; }
.demo-band { margin: 0 16px 12px; }

/* het testadres: een donkere band bovenaan (LEGMAAT_OMGEVING=test), op legmaat.nl staat hij er nooit */
.test-band { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 16px; background: var(--inkt, #151A2D); color: #C9CCD6; font-size: 13px; font-weight: 520; text-align: center; }
.test-stip { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2F5BFF; }
@media print { .test-band { display: none; } }

.kop-balk { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 12px; background: var(--achtergrond); }
.kop-logo { display: block; flex: none; padding: 4px; border-radius: 4px; }
.kop-logo img { display: block; width: auto; height: 40px; }
/* de naam in de balk, net als op het inlogscherm */
.kop-merk { display: block; align-self: center; width: 116px; aspect-ratio: 1025 / 120; margin: 0 6px; padding: 0; background: var(--inkt); -webkit-mask: url('../img/logo.png') center / contain no-repeat; mask: url('../img/logo.png') center / contain no-repeat; overflow: hidden; text-indent: 200%; white-space: nowrap; }
/* het logo raakt in het bestand zelf alle vier de randen. De doos is daarom 2 px ruimer dan het logo (1 px rondom,
   mask-origin content-box) en heeft geen afgeronde hoeken: zo wordt er aan de hoeken en randen niets afgesneden.
   Het logo zelf blijft 116 px breed. */
.kop-logo.kop-merk { box-sizing: content-box; width: 116px; height: calc(116px * 120 / 1025); aspect-ratio: auto; margin: 0 5px; padding: 1px; border-radius: 0;
  -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: border-box; mask-clip: border-box; }
.kop-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-bediening); background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); }
.kop-nav a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px 0 14px; border-radius: var(--r-bediening); color: var(--grijs); font-size: 11.5px; font-weight: 600; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.kop-nav a .icoon { width: 18px; height: 18px; }
.kop-nav a:hover { color: var(--inkt); background: var(--vlak-diep); }
.kop-nav a[aria-current="page"] { background: var(--accent-vlak); color: #fff; }
.kop-uit { --hoogte: 40px; }
.kop-acties { --hoogte: 40px; display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }  /* de knoppen in de balk iets hoger dan in de rest van de app */
.kop-acties .opslaan-status { margin-right: 6px; white-space: nowrap; }

/* de projectkeuze: de naam van het open project, met de lijst van alle projecten eronder */
.project-keuze { position: relative; min-width: 0; }
/* instellingen rechtsboven: een ronde knop met een paneel eronder */
.instel-houder { position: relative; flex: none; }
.knop-icoon.instel-knop { width: var(--hoogte); height: var(--hoogte); background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn-sterk); }
.knop-icoon.instel-knop[aria-expanded="true"] { background: var(--inkt); color: #fff; box-shadow: none; }
.instel-paneel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 320px; max-width: calc(100vw - 32px); padding: 16px;
  display: grid; gap: 16px; border-radius: 8px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3);
}
.instel-titel { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.instel-regel { display: grid; gap: 8px; }
.instel-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; }
.instel-waarde { font-variant-numeric: tabular-nums; color: var(--grijs); font-size: 10px; }
.instel-uitleg { font-size: 10px; line-height: 1.45; color: var(--grijs); }
.instel-regel input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent, var(--inkt)); cursor: pointer; }
.instel-herstel { justify-self: start; padding: 0; border: 0; background: none; color: var(--grijs); font: inherit; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.instel-herstel:hover { color: var(--inkt); }
.project-knop {
  display: inline-flex; align-items: center; gap: 10px; height: var(--hoogte); max-width: 340px; padding: 0 14px 0 16px;
  border: 0; border-radius: var(--r-bediening); background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn-sterk); font-size: 11px;
  transition: box-shadow .3s ease;
}
.project-knop:hover { box-shadow: 0 0 0 1px var(--grijs-licht); }
.project-knop[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--accent-vlak), 0 0 0 4px rgba(21, 26, 45, .14); }
.project-knop > .icoon { width: 17px; height: 17px; flex: none; color: var(--grijs); }
.project-knop-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.project-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 360px; max-width: calc(100vw - 32px); padding: 8px;
  border-radius: 8px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3);
}
.project-menu-lijst { display: flex; flex-direction: column; gap: 4px; max-height: min(420px, 55svh); overflow-y: auto; margin: 6px 0; padding: 6px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); overscroll-behavior: contain; }
.project-menu-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; border-radius: 6px;
  color: var(--inkt); text-decoration: none; transition: background-color .3s ease;
}
.project-menu-item:hover, .project-menu-item:focus-visible { background: var(--vlak-zacht); outline: none; }
.project-menu-item[aria-checked="true"] { background: var(--accent-zacht); }
.project-vink .icoon { width: 16px; height: 16px; color: var(--accent-vlak); }
.project-menu-tekst { min-width: 0; display: flex; flex-direction: column; }
.project-menu-tekst b { font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.project-menu-tekst span { font-size: 10px; color: var(--grijs); }
.project-menu-nieuw, .project-menu-weg {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none;
  font-size: 11px; font-weight: 600; text-align: left; transition: background-color .3s ease;
}
.project-menu-nieuw { color: var(--accent-vlak); }
.project-menu-nieuw:hover { background: var(--accent-zacht); }
.project-menu-weg { color: var(--fout); font-weight: 500; }
.project-menu-weg:hover { background: var(--fout-zacht); }
.project-menu-nieuw .icoon, .project-menu-weg .icoon { width: 17px; height: 17px; }

/* het werkscherm: links het paneel, rechts de tekening, allebei een wit rond vlak */
.app .editor { height: calc(var(--scherm) - 56px); padding: 0 12px 12px; gap: 12px; grid-template-columns: 310px minmax(0, 1fr); }
.editor-paneel, .kijker { border-radius: 8px; box-shadow: 0 0 0 1px rgba(21, 26, 45, .04), 0 1px 2px rgba(21, 26, 45, .03); }
.editor-kop { padding: 18px 16px 14px; gap: 6px; }
.veld-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }

/* de pagina Materialen houdt dezelfde rand aan als het werkscherm */
.pagina { max-width: none; padding: 8px 16px 48px; }

@media (max-width: 1080px) {
  .app .editor { grid-template-columns: 290px minmax(0, 1fr); }
  .kop-acties .opslaan-status span { display: none; }
}

@media (max-width: 820px) {
  .kop-balk { position: static; flex-wrap: wrap; gap: 10px; min-height: 0; padding: 12px; }
  .kop-logo img { height: 30px; }
  .kop-nav { margin-left: auto; }
  .kop-nav a { height: 36px; padding: 0 14px; font-size: 10.5px; }
  .kop-nav a .icoon { display: none; }
  .kop-acties { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .kop-acties .opslaan-status { display: none; }
  .project-keuze { flex: 1 1 100%; }
  .project-knop { width: 100%; max-width: none; }
  .kop-acties > .knop { flex: 1 1 0; }
  .project-menu { left: 0; right: 0; width: auto; }
  .app .editor { height: auto; padding: 0 8px 12px; grid-template-columns: minmax(0, 1fr); }
  .pagina { padding: 4px 12px 32px; }
}

/* het blok Materialen in het paneel */
.materiaal-overzicht { display: flex; flex-direction: column; gap: 2px; }
.materiaal-overzicht-rij { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lijn); font-size: 10.5px; }
.materiaal-overzicht-rij:first-child { border-top: 0; }
.materiaal-overzicht-naam { font-weight: 500; overflow-wrap: anywhere; }
.materiaal-overzicht-rol { color: var(--grijs); font-variant-numeric: tabular-nums; }
.materiaal-beheer { display: inline-block; margin-top: 10px; font-size: 10.5px; }

/* de keuze voor het patroon even hoog als een invoerveld, zodat alle labels op één lijn staan */
.materiaal-rij .veld > .segment { height: var(--hoogte); align-items: center; padding: 4px; }
/* de gekozen knop vult het blok: boven, onder en opzij evenveel ruimte (4 px) */
.materiaal-rij .veld > .segment.klein button { height: calc(var(--hoogte) - 8px); padding: 0 12px; }

/* Materialen: het witte vlak begint op dezelfde hoogte als het paneel en de tekening van het banenplan */
.pagina.pagina-vlak { padding-top: 0; }
.materialen-kaart { border-radius: 8px; box-shadow: 0 0 0 1px rgba(21, 26, 45, .04), 0 1px 2px rgba(21, 26, 45, .03); }
.materialen-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 16px; border-bottom: 1px solid var(--lijn); }
.materialen-kop h1 { font-size: 17px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
.materialen-kop .sub { margin-top: 4px; font-size: 10.5px; color: var(--grijs); }
/* rechts in de kop (knop of margeveld) even breed op Materialen en Prijslijsten: dan breekt de tekst op dezelfde plek */
@media (min-width: 821px) {
  .materialen-kop > :last-child:not(.titels) { flex: none; min-width: 190px; }
}
.materialen-kaart .materiaal-rij:first-child { border-top: 0; }
@media (max-width: 820px) {
  .materialen-kop { flex-direction: column; align-items: stretch; }
}

/* het lege vlak laat zelf zien dat de plattegrond geladen wordt */
.leeg-vel.laadt, .leeg-vel.laadt:hover { cursor: progress; transform: none; border-style: solid; border-color: var(--accent-vlak); background: var(--accent-zacht); color: var(--inkt-2); }
/* laden goed zichtbaar: getint vlak, gevuld icoon en een duidelijke balk */
.leeg-vel.laadt b { color: var(--accent-donker); }
.leeg-vel.laadt .leeg-icoon { background: var(--accent-vlak); color: #fff; }
.leeg-vel.laadt .leeg-icoon .icoon { animation: draai 1s linear infinite; }
:is(.leeg-vel, .sleep-vak).laadt .laad-balk { height: 8px; background: rgba(21, 26, 45, .12); }
.laad-balk { display: block; width: 240px; max-width: 100%; height: 6px; margin-top: 10px; border-radius: var(--r-bediening); background: var(--vlak-diep); overflow: hidden; }
.laad-balk > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-vlak); transition: width .8s ease; }
.laad-balk.onbepaald > span { width: 35%; animation: laad-heen 1.8s ease-in-out infinite; }
@keyframes laad-heen { from { transform: translateX(-110%); } to { transform: translateX(300%); } }

/* projectkeuze bij veel projecten: zoeken, de recente projecten, en de rest per maand */
.project-zoek.invoer { height: 40px; margin: 6px 0 2px; font-size: 11px; }
.project-menu-kop { padding: 8px 12px 2px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.project-menu-kop:not(:first-child) { margin-top: 6px; }
.project-menu-noot { margin: 4px 12px 0; font-size: 10px; color: var(--grijs); }
.project-menu-meer { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--accent-vlak); font-size: 10.5px; font-weight: 600; text-align: left; transition: background-color .3s ease; }
.project-menu-meer:hover { background: var(--accent-zacht); }


/* lukt het berekenen niet, dan staat de reden er duidelijk bij */
.reken-fout { color: var(--fout); font-size: 10px; line-height: 1.45; }
.reken-status { padding: 10px 16px; border-bottom: 1px solid var(--lijn); background: var(--vlak-zacht); color: var(--inkt-2); font-size: 10px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ prijslijsten (11 okt 2026) */
.prijslijsten-inhoud { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 18px; }
.marge-vak { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.marge-label { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 550; color: var(--inkt-2); }
.marge-invoer { width: 72px; text-align: right; }
.sleep-vak {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 14px 14px 16px; text-align: left;
  border: 1.5px dashed var(--lijn-sterk); border-radius: 6px; background: var(--vlak-zacht); color: var(--inkt); font: inherit; cursor: pointer;
  transition: border-color .3s var(--veer), background-color .3s var(--veer), transform var(--rustig) var(--veer);
}
.sleep-vak:hover, .sleep-vak.erboven { border-color: var(--accent-vlak); background: var(--accent-zacht); }
.sleep-vak.erboven { transform: scale(1.01); }
.sleep-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sleep-vak b { font-size: 12px; font-weight: 600; }
.sleep-sub { font-size: 10.5px; color: var(--grijs); overflow-wrap: anywhere; }
.sleep-icoon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-s); background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); color: var(--accent-vlak); }
.sleep-icoon .icoon { width: 22px; height: 22px; }
.sleep-knop { flex: none; pointer-events: none; }
/* nog geen lijsten: het blok is de lege pagina zelf, groot en in het midden, zonder tweede blok eronder */
.sleep-vak.leeg { flex-direction: column; justify-content: center; gap: 8px; min-height: 300px; padding: 40px 24px; text-align: center; }
.sleep-vak.leeg .sleep-tekst { flex: none; align-items: center; }
.sleep-vak.leeg .sleep-icoon { width: 56px; height: 56px; margin-bottom: 6px; }
.sleep-vak.leeg .sleep-icoon .icoon { width: 26px; height: 26px; }
.sleep-vak.leeg .sleep-knop { margin-top: 12px; }
/* lezen: goed zichtbaar, zodat niemand denkt dat er niets gebeurt */
.sleep-vak.laadt, .sleep-vak.laadt:hover { cursor: progress; border-style: solid; border-color: var(--accent-vlak); background: var(--accent-zacht); }
.sleep-vak.laadt b { color: var(--accent-donker); }
.sleep-vak.laadt .sleep-sub { color: var(--inkt-2); }
.sleep-vak.laadt .sleep-icoon { background: var(--accent-vlak); box-shadow: none; color: #fff; }
.sleep-vak.laadt .sleep-icoon .icoon { animation: draai 1s linear infinite; }
.sleep-vak.laadt .sleep-knop { display: none; }
.sleep-vak .laad-balk { margin-top: 8px; }
.sleep-vak.leeg .laad-balk { align-self: center; }
@media (max-width: 820px) {
  /* smal scherm: icoon en tekst naast elkaar, de knop over de hele breedte eronder */
  .sleep-vak:not(.leeg) { flex-wrap: wrap; }
  .sleep-vak:not(.leeg) .sleep-knop { width: 100%; justify-content: center; }
}

.controle { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 6px; box-shadow: 0 0 0 1px var(--lijn-sterk), var(--schaduw-2); background: var(--vlak); }
.controle-kop { display: flex; gap: 12px; align-items: center; }
.controle-kop h2 { font-size: 13px; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.controle-icoon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--accent-zacht); color: var(--accent-vlak); }
.controle-icoon .icoon { width: 20px; height: 20px; }
.controle-knoppen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--lijn); padding-top: 14px; }
.vergelijk-vak { display: flex; flex-direction: column; gap: 10px; }
.vergelijk-kop { font-size: 10.5px; font-weight: 550; color: var(--inkt-2); }
.vergelijk-kop.let { color: var(--let); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: var(--r-bediening); background: var(--vlak-diep); color: var(--inkt-2); font-size: 10px; font-weight: 550; font-variant-numeric: tabular-nums; }
.chip.let { background: var(--let-zacht); color: var(--let); }
.chip.goed { background: var(--goed-zacht); color: var(--goed); }
.chip.blauw { background: var(--blauw-zacht); color: var(--blauw); }
.chip.grijs { color: var(--grijs); }
.chip.sterk { background: var(--inkt); color: #fff; }
.voorbeeld { display: flex; flex-direction: column; gap: 8px; }
.voorbeeld-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voorbeeld-kop h3 { font-size: 11.5px; font-weight: 600; }
.zoek-invoer { width: min(320px, 100%); height: 38px; }

.prijs-tabel { display: flex; flex-direction: column; font-size: 10px; font-variant-numeric: tabular-nums; }
.prijs-rij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(110px, auto) minmax(90px, auto) 52px; gap: 12px; align-items: baseline; padding: 7px 2px; border-top: 1px solid var(--lijn); }
.prijs-rij.kop { border-top: 0; font-size: 10px; font-weight: 600; color: var(--grijs); }
.prijs-rij .naam { font-weight: 550; color: var(--inkt); overflow-wrap: anywhere; }
.prijs-rij .details { color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prijs-rij .getal { text-align: right; white-space: nowrap; }
.prijs-tabel .grijs { color: var(--grijs); }
.prijs-tabel .let { color: var(--let); font-weight: 600; }
.prijs-tabel .goed { color: var(--goed); font-weight: 600; }
.prijs-rij .pagina-nr { color: var(--grijs-licht); text-align: right; white-space: nowrap; }
.prijs-tabel.klein .prijs-rij { grid-template-columns: minmax(0, 1fr) auto auto auto 52px; }

.leveranciers-lijst { display: flex; flex-direction: column; }
.leverancier-rij { border-top: 1px solid var(--lijn); }
.leverancier-rij:first-child { border-top: 0; }
.leverancier-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0; }
.leverancier-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leverancier-naam b { font-size: 12px; font-weight: 600; }
.leverancier-naam .hulp { overflow-wrap: anywhere; }
.korting-veld { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 550; color: var(--inkt-2); }
.klein-invoer { width: 70px; height: 36px; text-align: right; }
.leverancier-knoppen { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.leverancier-inhoud { display: flex; flex-direction: column; gap: 10px; }
.leverancier-rij.open .leverancier-inhoud { padding: 0 0 18px; }
.versies { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.versies h3 { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.versie-rij { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--inkt-2); min-height: 36px; }
.versie-rij .versie-knoppen { margin-left: auto; display: inline-flex; gap: 4px; }
.status-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--vlak-diep); box-shadow: inset 0 0 0 1px var(--lijn-sterk); flex: none; }
.status-stip[data-actief="true"] { background: var(--goed); box-shadow: none; }

/* materialen: waar de prijs vandaan komt */
.bron-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bron-tekst b { font-weight: 600; color: var(--inkt); overflow-wrap: anywhere; }
.bron-knoppen { display: flex; gap: 6px; flex: none; }
.regel-zoeken { display: flex; flex-direction: column; gap: 8px; }
.regel-keuze { display: flex; flex-direction: column; max-height: min(52vh, 460px); overflow-y: auto; margin: 0 -6px; }
.keuze-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 8px; border: 0; border-radius: 4px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--inkt); }
.keuze-rij:hover, .keuze-rij:focus-visible { background: var(--vlak-zacht); outline: none; }
.keuze-naam { display: flex; flex-direction: column; min-width: 0; font-size: 10.5px; }
.keuze-naam b { font-weight: 600; overflow-wrap: anywhere; }
.keuze-naam span { color: var(--grijs); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keuze-prijs { flex: none; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.keuze-prijs.grijs { color: var(--grijs-licht); font-weight: 500; }
@media (max-width: 820px) {
  .marge-vak { align-items: flex-start; }
  .leverancier-kop { grid-template-columns: 1fr; }
  .leverancier-knoppen { justify-content: flex-start; }
  .prijs-rij { grid-template-columns: minmax(0, 1fr) auto; }
  .prijs-rij .details, .prijs-rij > :nth-child(4), .prijs-rij .pagina-nr { display: none; }
}
.bron-tekst .bron-details { font-weight: 450; color: var(--grijs); }

/* ------------------------------------------------------------------ projectscherm: links het project, in het midden de tekening, rechts de ruimtes (15 okt 2026) */
.app .editor {
  grid-template-columns: clamp(236px, 18.5vw, 276px) minmax(0, 1fr) clamp(268px, 21.5vw, 316px);
  grid-template-areas: "project kijker ruimtes"; gap: 10px; padding: 0 12px 12px;
}
.project-paneel { grid-area: project; }
.kijker { grid-area: kijker; }
.ruimte-paneel { grid-area: ruimtes; }

/* de kop van beide panelen is gelijk opgebouwd: een label op dezelfde hoogte, daaronder een keuze van 32 px over de hele breedte.
   Alle tekst in de panelen staat op 12 px van de rand; een vlak eromheen (een gekozen ruimte, een veld) steekt erbuiten uit. */
.paneel-kop { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-bottom: 1px solid var(--lijn); }
.paneel-kop-regel { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.lijst-kop { position: static; z-index: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px; }
.lijst-kop .segment { align-self: stretch; }
.segment.paneel-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--hoogte); padding: 3px; overflow: visible; }
.paneel-tabs button { height: 100%; justify-content: center; padding: 0 6px; }
.segment button[aria-selected="true"], .segment button[aria-selected="true"]:hover { background: var(--vlak); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn), 0 1px 3px rgba(21, 26, 45, .1); }
.ruimte-zoek { height: var(--hoogte); }
.reken-status { padding: 8px 12px; }

/* links: de tabbladen */
.editor-paneel .editor-blok { padding: 12px; }
.project-blok { display: flex; flex-direction: column; gap: 6px; }
.project-blok .project-naam { font-size: 13.5px; }
.totaal-leeg { border-bottom: 0; color: var(--grijs); }
/* instellingen onder elkaar: links wat het is met de uitleg, rechts het getal */
.instellingen-velden { display: flex; flex-direction: column; gap: 0; }
.instel-veld { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px 64px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--lijn); }
/* het infoknopje naast een instelling, met het vak met de uitleg eronder */
.info-houder { display: inline-flex; }
.info-knop { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--grijs-licht); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s var(--veer), color .3s var(--veer); }
.info-knop .icoon { width: 14px; height: 14px; }
.stalen-blok { position: relative; }
/* elk label in het paneel even hoog, met of zonder infoknopje, zodat de velden ernaast op één lijn staan */
.stalen-paneel .veld > label, .stalen-paneel .veld > .label, .stalen-blok .label-rij { display: flex; align-items: center; min-height: 16px; line-height: 16px; }
.stalen-blok .label-rij { justify-content: space-between; }
.stalen-blok .label-rij .info-knop { width: 16px; height: 16px; margin: 0; }
.stalen-twee, .stalen-drie { align-items: end; }
.stalen-blok .label-rij .info-knop .icoon { width: 12px; height: 12px; }
.info-knop:hover, .info-knop[aria-expanded="true"] { background: var(--hoofd-zacht); color: var(--hoofd); }
/* het vak staat over de volle breedte van de instelling, onder de regel, zodat het nooit buiten het paneel valt */
.info-vak { position: absolute; top: calc(100% - 2px); left: 0; right: 0; z-index: 30; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 6px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); text-align: left; }
.info-vak b { font-size: 10.5px; font-weight: 600; color: var(--inkt); }
.info-vak p { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--inkt-2); }
.instel-veld:first-child { padding-top: 0; border-top: 0; }
.instel-veld-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: pointer; }
.instel-veld-tekst b { font-size: 10.5px; font-weight: 550; color: var(--inkt); }
.instel-veld-tekst span { font-size: 10px; line-height: 1.4; color: var(--grijs); }
.instel-veld .invoer { height: var(--hoogte); padding: 0 8px; font-size: 10.5px; text-align: right; }
.instel-noot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--lijn); }
.materiaal-overzicht-rij { padding: 8px 0; }
.materiaal-overzicht-rij:first-child { padding-top: 0; }
.materiaal-beheer { margin-top: 8px; }

/* rechts: de ruimtes, de tekst op dezelfde lijn als de kop */
.ruimte-paneel .groep-kop { padding: 12px 12px 6px; }
.ruimte-paneel .ruimte-rij { margin: 0 4px; padding: 8px; gap: 6px 8px; }
.ruimte-paneel .ruimte-rij + .ruimte-rij { margin-top: 4px; }
.ruimte-paneel .lijst-leeg { padding: 16px 12px; }
.ruimte-paneel .terugzet-knop { margin: 8px 6px 2px; }

/* een smal venster: de tekening links, het project en de ruimtes rechts onder elkaar */
@media (max-width: 1100px) and (min-width: 821px) {
  .app .editor { grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "kijker project" "kijker ruimtes"; }
  .project-paneel { max-height: 46svh; }
}
/* telefoon: eerst de tekening, dan de ruimtes, dan het project */
@media (max-width: 820px) {
  .app .editor { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); padding: 0 8px 12px; }
  .project-paneel, .kijker, .ruimte-paneel { grid-area: auto; }
  .kijker { order: 1; }
  .ruimte-paneel { order: 2; }
  .project-paneel { order: 3; }
}

/* de keuzes per ruimte in een raster: links de schakelaar en de richting, rechts het materiaal en waar de banen beginnen.
   Alles 30 px hoog en de rechterkolom begint op één lijn, zodat er per ruimte maar twee regels knoppen zijn. */
.ruimte-paneel .ruimte-bediening { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; }
.ruimte-paneel .ruimte-bediening > .schakel { grid-column: 1; grid-row: 1; height: 30px; }
.ruimte-paneel .ruimte-bediening > .materiaal-kies { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
.ruimte-paneel .ruimte-bediening > .rechts-uit { grid-column: 3; grid-row: 1; margin: 0; }
.ruimte-paneel .ruimte-bediening > .materiaal-kies:has(~ .rechts-uit) { grid-column: 2; }
.ruimte-paneel .materiaal-kies select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.ruimte-paneel .ruimte-bediening > .richting-keuze { grid-column: 1; grid-row: 2; justify-self: start; }
.ruimte-paneel .ruimte-bediening > .begin-keuze { grid-column: 2 / -1; grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ruimte-paneel .ruimte-bediening > .segment.klein { height: 30px; padding: 2px; overflow: visible; }
.ruimte-paneel .ruimte-bediening > .segment.klein button { height: 26px; padding: 0 8px; justify-content: center; }
.ruimte-paneel .richting-keuze button:not(:first-child) { width: 28px; padding: 0; }

/* een hoofdknop op de pagina's Materialen en Prijslijsten (Nieuw materiaal, Prijslijst toevoegen) heeft de maat van de
   tabbladen bovenin: 34 px hoog, dezelfde letter, het icoon links en zo breed als de tekst. De knoppen rechts in de balk
   (projectkeuze, Excel, Pdf met banen) houden hun eigen maat. */
.knop.kop-maat { height: 34px; width: fit-content; min-width: 0; padding: 0 18px 0 14px; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1; }
.knop.kop-maat .icoon { width: 18px; height: 18px; }
.materialen-kop > .knop.kop-maat:last-child { min-width: 0; }
@media (max-width: 820px) {
  .knop.kop-maat { height: 36px; padding: 0 14px; font-size: 10.5px; }
}

/* ------------------------------------------------------------------ materialen: elke rij één regel (15 okt 2026) */
/* staal, naam, patroon met de kleur ernaast, rolbreedte, prijs met het knopje voor de prijslijst, en rechts in gebruik
   en weggooien. Alle labels op dezelfde hoogte, alle velden en knoppen even hoog op één lijn. */
.materiaal-rij {
  /* de soort heeft een vaste breedte, gemeten op de langste naam ("Vloerverwarming · slakkenhuis"), zodat de
     kolommen in alle rijen op één lijn staan */
  grid-template-columns: var(--hoogte) minmax(0, 1.1fr) 196px auto auto minmax(0, .8fr) minmax(0, .9fr) auto;
  grid-template-areas: "staal naam soort patroon kleur rol prijs knoppen"; align-items: end; padding: 14px 0;
}
.materiaal-rij > .staal-plek { grid-area: staal; }
.materiaal-rij > .veld.naam-veld { grid-area: naam; }
.materiaal-rij > .veld.patroon-veld { grid-area: patroon; }
.materiaal-rij > .veld.soort-veld { grid-area: soort; }
.materiaal-rij > .veld.kleur-veld { grid-area: kleur; }
.materiaal-rij > .veld.rol-veld { grid-area: rol; }
.materiaal-rij > .veld.prijs-veld { grid-area: prijs; }
.materiaal-rij > .materiaal-knoppen { grid-area: knoppen; height: var(--hoogte); flex-wrap: nowrap; }
.materiaal-rij .knop-icoon { margin-bottom: 0; }
.prijs-regel { display: flex; align-items: center; gap: 6px; }
.prijs-regel > .invoer { flex: 1; min-width: 0; }
/* het knopje naast de prijs: zonder koppeling een omlijnd vakje, gekoppeld blauw, verdwenen uit de lijst oranje */
.knop-icoon.bron-knop { flex: none; width: var(--hoogte); height: var(--hoogte); border: 1px solid #D3D7E0; background: var(--vlak); color: var(--grijs); }
.knop-icoon.bron-knop .icoon { width: 17px; height: 17px; }
.knop-icoon.bron-knop:hover { border-color: #B8BDCA; background: var(--vlak); color: var(--inkt); }
.prijs-regel.gekoppeld .invoer { border-color: rgba(47, 91, 255, .35); }
.prijs-regel.gekoppeld .bron-knop, .prijs-regel.gekoppeld .bron-knop:hover, .prijs-regel.gekoppeld .bron-knop[aria-expanded="true"] { border-color: transparent; background: var(--hoofd-zacht); color: var(--hoofd); }
.prijs-regel.vervallen .invoer { border-color: rgba(161, 92, 7, .45); }
.prijs-regel.vervallen .bron-knop, .prijs-regel.vervallen .bron-knop:hover, .prijs-regel.vervallen .bron-knop[aria-expanded="true"] { border-color: transparent; background: var(--let-zacht); color: var(--let); }
/* het vak met de bron opent onder het knopje en ligt over de rijen eronder, zodat de lijst niet hoger wordt */
.bron-houder { position: relative; flex: none; }
.bron-vak {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 340px; max-width: calc(100vw - 32px); padding: 12px;
  display: flex; flex-direction: column; gap: 10px; border-radius: 6px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3);
  font-size: 10px; line-height: 1.45; color: var(--inkt-2);
}
.bron-kop { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: var(--inkt); }
.bron-kop .icoon { width: 16px; height: 16px; color: var(--hoofd); }
.bron-vak.vervallen .bron-kop .icoon { color: var(--let); }
.bron-vak .bron-knoppen { justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--lijn); }

@media (max-width: 820px) {
  /* telefoon: naam naast het staal, patroon met de kleur, rolbreedte en prijs naast elkaar, daaronder in gebruik */
  .materiaal-rij {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "staal naam naam naam" "soort soort soort soort" "patroon patroon patroon kleur" "rol rol prijs prijs" "knoppen knoppen knoppen knoppen";
  }
  .materiaal-rij > .veld.patroon-veld .segment { align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .materiaal-rij > .materiaal-knoppen { justify-content: space-between; }
}
/* weggooien even hoog als de velden ernaast */
.materiaal-knoppen .knop-icoon.klein { width: var(--hoogte); height: var(--hoogte); }

/* ------------------------------------------------------------------ uitsparingen (19 okt 2026) */
/* een uitsparing (kolom, schacht, keukeneiland, vide): wit met een grijze arcering en een gestreepte rand, geen vloer */
.gat { stroke: var(--grijs); stroke-width: 1.2px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; cursor: pointer; transition: stroke .3s var(--veer); }
/* klikken op een uitsparing opent het vak met de maat; met een hulpmiddel aan gaat de klik naar dat hulpmiddel */
.vel.modus .gat { pointer-events: none; }
.gat:hover { stroke: var(--inkt); }
.gat.bewerkt { stroke: var(--hoofd); stroke-width: 2px; stroke-dasharray: none; }
.gat-vlak { fill: #fff; fill-opacity: .88; }
.gat-lijn { stroke: var(--grijs-licht); }
/* tijdens het trekken een kruisje als cursor; op een tablet sleept de vinger de rechthoek en niet het blad */
.vel.modus-uitsparing #vel-svg, .vel.modus-uitsparing .r-vorm { cursor: crosshair; touch-action: none; }
.vel.modus-vlak #vel-svg, .vel.modus-vlak .r-vorm { cursor: crosshair; touch-action: none; }
/* met de gum: de hele uitsparing is klikbaar */
.gum-vlak { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.gum-gat:hover .gum-vlak { fill: rgba(180, 35, 24, .16); }
/* rechts bij de ruimte: elke uitsparing op een eigen regel, met een kruisje om hem weg te halen */
.gat-regels { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.gat-regel { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 10px; color: var(--inkt-2); }
.gat-staal { flex: none; width: 12px; height: 12px; border: 1px dashed var(--grijs); border-radius: 2px;
  background: repeating-linear-gradient(45deg, #fff 0 2px, var(--grijs-licht) 2px 3px); }
.gat-regel > span:nth-child(2) { flex: 1; min-width: 0; }
.knop-icoon.gat-weg { width: 24px; height: 24px; color: var(--grijs); }
.knop-icoon.gat-weg .icoon { width: 14px; height: 14px; }
.knop-icoon.gat-weg:hover { color: var(--fout); background: var(--fout-zacht); }
/* telefoon: past het gereedschap met de schaal en het zoomen niet op één regel, dan gaat het zoomen naar een eigen regel */
@container (max-width: 480px) {
  .kijkbalk > .kijkrij:last-child { flex-wrap: wrap; row-gap: 8px; }
}

/* het vak met de maat van een uitsparing: klein, naast het gat, en altijd binnen het scherm */
.gat-vak {
  position: fixed; z-index: 45; width: min(272px, calc(100vw - 24px)); padding: 12px;
  display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-l); background: var(--vlak);
  box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3); animation: gat-vak-in .3s var(--veer);
}
@keyframes gat-vak-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gat-vak { animation: none; } }
.gat-vak-kop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gat-vak-kop b { flex: none; font-size: 11px; font-weight: 600; }
.gat-vak-kop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--grijs); }
.gat-vak-form { display: flex; flex-direction: column; gap: 8px; }
.gat-vak-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.gat-vak .veld { gap: 4px; }
.gat-vak .invoer { height: var(--hoogte); padding: 0 10px; font-size: 11px; text-align: right; }
.gat-vak-uitkomst { min-height: 15px; font-size: 10px; font-weight: 500; color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.gat-vak-hulp { font-size: 10px; line-height: 1.4; color: var(--grijs); }
.gat-vak-knoppen { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--lijn); }
/* rechts bij de ruimte: de regel van een uitsparing opent hetzelfde vak */
.gat-maat { flex: 1; min-width: 0; padding: 2px 4px; margin-left: -4px; border: 0; border-radius: var(--r-s); background: none; color: inherit; font: inherit; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .3s var(--veer); }
.gat-maat:hover { background: rgba(21, 26, 45, .05); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ ronde hoeken (19 okt 2026) */
/* een puntje bij elke hoek van de gekozen vorm: wit met een blauwe rand, op een vaste schermgrootte; het tikvlak is groter */
.hoek-greep { cursor: grab; touch-action: none; opacity: 0; pointer-events: none; transition: opacity .4s var(--veer); }
/* alleen het puntje bij de muis, of alle puntjes na Hoeken op een aanraakscherm; vastgepakt blijft hij zichtbaar */
.hoek-greep.dichtbij, .hoek-greep.actief, .grepen.alle .hoek-greep { opacity: 1; pointer-events: auto; }
.tool-hoeken { display: none; }
@media (hover: none) { .tool-hoeken { display: inline-flex; } }
.hoek-greep.actief { cursor: grabbing; }
.greep-raak { fill: transparent; stroke: none; pointer-events: all; }
.greep { fill: #fff; stroke: var(--hoofd); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none;
  transform-box: fill-box; transform-origin: center; transition: transform .35s var(--veer); filter: drop-shadow(0 1px 1.5px rgba(21, 26, 45, .3)); }
.hoek-greep:hover .greep, .hoek-greep.actief .greep { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .greep, .hoek-greep { transition: none; } }
/* het vak met de straal: het vinkje Alle hoeken op de hoogte van het veld */
.hoek-alle { display: flex; align-items: center; gap: 8px; align-self: end; height: var(--hoogte); font-size: 10.5px; color: var(--inkt-2); cursor: pointer; }
.hoek-alle input { width: 15px; height: 15px; margin: 0; accent-color: var(--hoofd); }
.gat-vak-velden:has(.hoek-alle) { grid-template-columns: minmax(0, 1fr) auto; }
/* rechts bij de ruimte: het teken voor ronde hoeken */
.rond-staal { flex: none; width: 12px; height: 12px; border: 1.5px solid var(--grijs); border-radius: 0 6px 0 0; border-left-width: 0; border-bottom-width: 0; }

/* ------------------------------------------------------------------ prijs uit een prijslijst: de berekening onder het materiaal (19 okt 2026) */
/* één kleine grijze regel onder een gekoppeld materiaal, onder de velden; mist er iets, dan in de waarschuwingskleur */
.materiaal-rij > .prijs-uitleg { grid-column: 2 / -1; grid-row: 3; margin-top: -4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 10px; line-height: 1.45; color: var(--grijs); font-variant-numeric: tabular-nums; }
.materiaal-rij > .prijs-uitleg.let { color: var(--let); font-weight: 500; }
.prijs-uitleg-extra { color: var(--grijs-licht); }
.prijs-uitleg .eenheid-keuze { padding: 2px; }
.prijs-uitleg .eenheid-keuze button { height: 22px; padding: 0 8px; font-size: 10px; }
/* het keuzevenster: per leverancier de korting die geldt */
.keuze-kortingen { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border-radius: var(--r-m); background: var(--vlak-zacht); font-size: 10.5px; color: var(--inkt-2); }
.keuze-korting b { font-weight: 600; color: var(--inkt); }
/* de soort vloer: één knop die openklapt (21 okt 2026). Het vak ligt over de rijen eronder, zodat de rij één regel blijft */
.soort-houder { position: relative; }
/* het open vak ligt over de rijen eronder, ook over hun invoervelden */
.materiaal-rij { position: relative; }
.materiaal-rij:has(.soort-vak-pop:not([hidden])) { z-index: 40; }
.soort-knop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 150px; height: var(--hoogte);
  padding: 0 10px; font-size: 10.5px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; }
.soort-knop > span { overflow: hidden; text-overflow: ellipsis; }
.soort-knop .pijl { flex: none; width: 12px; height: 12px; color: var(--grijs); transition: transform .3s var(--veer); }
.soort-knop[aria-expanded="true"] .pijl { transform: rotate(180deg); }
.soort-knop:disabled { cursor: default; }
.soort-vak-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 330px; max-width: calc(100vw - 32px); padding: 6px;
  display: flex; flex-direction: column; gap: 6px; border-radius: 6px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-3);
}
.soort-lijst { display: flex; flex-direction: column; gap: 2px; }
.soort-optie { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border: 0; border-radius: var(--r-s); background: none;
  text-align: left; font: inherit; cursor: pointer; transition: background-color .3s var(--veer); }
.soort-optie b { font-size: 10.5px; font-weight: 600; color: var(--inkt); }
.soort-optie span { font-size: 9.5px; color: var(--grijs); }
.soort-optie:hover { background: var(--vlak-zacht); }
.soort-optie[aria-checked="true"] { background: var(--hoofd-zacht); }
.soort-optie[aria-checked="true"] b { color: var(--hoofd); }
.soort-extra { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 10px 6px 4px; border-top: 1px solid var(--lijn); }
.soort-extra > .veld { margin: 0; }
.doos-veld .invoer { width: 96px; }
.tegel-maten { display: flex; align-items: center; gap: 4px; }
.tegel-maten .invoer { width: 0; flex: 1 1 56px; min-width: 52px; padding: 0 8px; }
.tegel-maten .maal { color: var(--grijs); font-size: 11px; }
/* het legpatroon per ruimte (alleen bij tegels): dezelfde keuzelijst als het materiaal, op een eigen regel */
.patroon-kies { height: 30px; padding: 0 26px 0 10px; border: 0; border-radius: var(--r-bediening); background-color: rgba(21, 26, 45, .055); font-size: 10px; font-weight: 500; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23646B75'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; transition: background-color .4s var(--veer); }
.patroon-kies:hover { background-color: rgba(21, 26, 45, .09); }
.ruimte-paneel .ruimte-bediening > .patroon-kies { grid-column: 1 / -1; grid-row: 3; width: 100%; }
@media (max-width: 820px) {
  .materiaal-rij > .prijs-uitleg { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}

/* ------------------------------------------------------------------ soort van een prijslijst: vloer of niet (20 okt 2026) */
.prijs-tabel.met-soort .prijs-rij { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 118px minmax(110px, auto) minmax(90px, auto) 52px; }
.soort-cel { min-width: 0; }
/* een klein label per soort; geen vloer valt op, onbekend is grijs */
.soort-label { display: inline-flex; align-items: center; height: 20px; max-width: 100%; padding: 0 7px; border: 0; border-radius: var(--r-s);
  background: var(--vlak-diep); color: var(--inkt-2); font: inherit; font-size: 10px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
select.soort-label { appearance: none; -webkit-appearance: none; padding-right: 18px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23646B80'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 9px; }
.soort-label.soort-banen, .soort-label.soort-tegels { background-color: var(--goed-zacht); color: var(--goed); }
.soort-label.soort-toebehoren { background-color: var(--blauw-zacht); color: var(--blauw); }
.soort-label.soort-geen { background-color: var(--let-zacht); color: var(--let); }
.soort-label.soort-onbekend { background-color: var(--vlak-zacht); color: var(--grijs); }
.keuze-naam .soort-label { height: 17px; margin-left: 8px; vertical-align: 1px; font-size: 9.5px; }
.soort-filter { align-self: flex-start; margin-bottom: 8px; }
/* na het inlezen: de soort van de lijst met de uitleg of de waarschuwing ernaast */
.soort-vak { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: end; }
.soort-veld { display: flex; flex-direction: column; gap: 6px; }
.soort-veld.rij { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
.soort-veld .label { font-size: 10px; font-weight: 500; color: var(--inkt-2); }
.soort-keuze.invoer { height: var(--hoogte); padding: 0 28px 0 10px; font-size: 10.5px; }
.soort-veld.rij .soort-keuze { width: 250px; }
.soort-uitleg { align-self: center; }
.soort-vak .waarschuwing { align-self: stretch; }
.lijst-soort { align-self: flex-start; margin-top: 2px; font-size: 10px; font-weight: 550; color: var(--goed); }
.lijst-soort.soort-geen { color: var(--let); }
.lijst-soort.soort-onbekend, .lijst-soort.soort-toebehoren { color: var(--grijs); }
/* het keuzevenster: het aantal regels en het vinkje voor wat geen vloer is, op één regel */
.keuze-telling { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.keuze-ook-geen { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--inkt-2); cursor: pointer; }
.keuze-ook-geen input { width: 14px; height: 14px; margin: 0; accent-color: var(--hoofd); }
.prijs-uitleg-let { font-weight: 600; }
@media (max-width: 820px) {
  .soort-vak { grid-template-columns: minmax(0, 1fr); }
  .soort-veld.rij { margin-left: 0; }
  .prijs-tabel.met-soort .prijs-rij { grid-template-columns: minmax(0, 1fr) auto auto; }
  .prijs-tabel.met-soort .prijs-rij > :nth-child(4) { display: block; }
  .prijs-tabel.met-soort .prijs-rij > :nth-child(5), .prijs-tabel.met-soort .prijs-rij > :nth-child(2), .prijs-tabel.met-soort .prijs-rij > .pagina-nr { display: none; }
}

/* ------------------------------------------------------------------ inmeting: zelf opgemeten maten (20 okt 2026) */
/* het sleepvak en het plakvak samen; zonder eerdere inmetingen staat het sleepvak groot in het midden, net als bij de prijslijsten */
.inmeting-invoer { display: flex; flex-direction: column; gap: 12px; }
.inmeting-invoer[hidden] { display: none; }
.inmeting-invoer .sleep-vak.leeg { min-height: 240px; }
.plak-vak { display: flex; flex-direction: column; gap: 6px; }
.plak-label { font-size: 10px; font-weight: 500; color: var(--inkt-2); }
.plak-invoer.invoer { min-height: 104px; font-variant-numeric: tabular-nums; }
.plak-onder { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plak-onder .knop { flex: none; }

/* per verdieping een blok: de naam, de tabel met maten, en onderaan toevoegen en de plinten */
.inmeting-verdiepingen { display: flex; flex-direction: column; gap: 14px; }
.inmeting-verdieping { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 6px; background: var(--vlak-zacht); box-shadow: 0 0 0 1px var(--lijn); }
.verdieping-kop { display: flex; align-items: center; gap: 12px; }
.verdieping-naam.invoer { width: min(260px, 100%); font-weight: 600; padding: 0 12px; }
.verdieping-samen { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inmeting-tabel { display: flex; flex-direction: column; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.inmeting-rij { display: grid; grid-template-columns: minmax(0, 1.5fr) 92px 92px 64px 136px minmax(0, 1fr) 28px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--lijn); }
.inmeting-rij.kop { border-top: 0; padding: 0 0 2px; font-size: 10px; font-weight: 600; color: var(--grijs); }
.inmeting-rij.kop .getal { text-align: right; }
.inmeting-rij .invoer { padding: 0 10px; font-size: 10.5px; background-color: var(--vlak); }
.inmeting-rij select.invoer { padding-right: 28px; background-position: right 9px center; background-size: 11px; }
.inmeting-rij .getal-invoer { text-align: right; }
.inmeting-cel { display: flex; flex-direction: column; min-width: 0; }
.cel-label { display: none; }
.inmeting-m2 { text-align: right; font-weight: 550; color: var(--inkt); }
.cel-weg { align-items: flex-end; }
.verdieping-onder { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.plint-veld { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; font-weight: 550; color: var(--inkt-2); }
.plint-invoer.invoer { width: 92px; padding: 0 10px; text-align: right; }
.plint-veld .hulp { font-weight: 400; }
.inmeting-erbij { display: flex; margin-top: -6px; }
.inmeting-totaal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inmeting-totaal-label { font-size: 10.5px; font-weight: 600; color: var(--inkt-2); }

/* eerdere inmetingen: een rij per inmeting, met het project ernaast */
.inmeting-lijst { display: flex; flex-direction: column; }
.inmeting-lijst[hidden] { display: none; }
.inmeting-lijst-kop { font-size: 11.5px; font-weight: 600; margin: 4px 0 6px; }
.inmeting-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.inmeting-item-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inmeting-item-naam b { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.inmeting-item-naam .hulp { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.inmeting-item-knoppen { display: flex; align-items: center; gap: 6px; flex: none; }

@media (max-width: 820px) {
  .plak-onder { flex-direction: column; align-items: stretch; }
  .plak-onder .knop { width: 100%; }
  /* een regel wordt een klein blok: de naam, daaronder de maten, en daaronder soort en materiaal */
  .inmeting-rij.kop { display: none; }
  .inmeting-rij {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) 32px;
    grid-template-areas: "naam naam naam weg" "lengte breedte m2 m2" "soort soort materiaal materiaal";
    gap: 8px; padding: 10px 0;
  }
  .inmeting-rij:nth-child(2) { border-top: 0; }
  .cel-naam { grid-area: naam; }
  .cel-lengte { grid-area: lengte; }
  .cel-breedte { grid-area: breedte; }
  .cel-m2 { grid-area: m2; }
  .cel-soort { grid-area: soort; }
  .cel-materiaal { grid-area: materiaal; }
  .cel-weg { grid-area: weg; align-self: end; }
  .cel-label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 500; color: var(--inkt-2); }
  .cel-naam .cel-label { display: none; }
  .cel-m2 { align-self: stretch; justify-content: flex-end; }
  .cel-m2 .cel-label { text-align: right; }
  .inmeting-m2 { line-height: var(--hoogte); }
  .verdieping-kop { flex-wrap: wrap; }
  .verdieping-naam.invoer { flex: 1 1 160px; width: auto; }
  .verdieping-samen { order: 3; flex-basis: 100%; margin-left: 0; }
  .inmeting-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .inmeting-item-knoppen { justify-content: flex-start; }
}

/* vier tabbladen op een telefoon: ze delen de breedte, niets valt buiten beeld */
@media (max-width: 560px) {
  .kop-nav { width: 100%; margin-left: 0; }
  .kop-nav a { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
}

/* ---------------------------------------------------------------- jasje van de klant (jasje.js) */
/* een logo als plaatje op het inlogscherm, in plaats van de naam Legmaat */
.inlog-merk.beeld { display: flex; justify-content: center; width: auto; height: auto; padding: 0; background: none; -webkit-mask: none; mask: none; text-indent: 0; overflow: visible; }
.inlog-merk.beeld img { display: block; width: auto; height: 44px; max-width: 240px; }

/* ---------------------------------------------------------------- beheer (views/beheer.js) */
.beheer-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.beheer-tegel { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.beheer-label { font-size: 11px; color: var(--grijs); }
.beheer-tegel b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.beheer-schuif { overflow-x: auto; padding: 8px 6px 10px; }
.beheer-tabel { width: 100%; border-collapse: collapse; font-size: 11px; }
.beheer-tabel th { padding: 8px 12px; border-bottom: 1px solid var(--lijn); color: var(--grijs); font-weight: 500; text-align: left; white-space: nowrap; }
.beheer-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.beheer-tabel tr:last-child td { border-bottom: 0; }
.beheer-tabel .getal { text-align: right; white-space: nowrap; }
.beheer-soort { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px; background: var(--vlak-diep); color: var(--inkt-2); font-size: 10px; }
.beheer-totaal { color: var(--grijs-licht); }
.beheer-voet { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--grijs); font-size: 11px; }
.beheer-voet .icoon { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* ---------------------------------------------------------------- materialen als stalenkaart met paneel */
/* de filters blijven onder de bovenbalk staan bij het scrollen, met een witte achtergrond over de stalen heen */
.stalen-filters { position: sticky; top: 56px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 10px; background: var(--vlak); border-radius: var(--r-l) var(--r-l) 0 0; }
.filter-knop { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); font: inherit; font-size: 10.5px; font-weight: 500; color: var(--inkt-2); cursor: pointer; transition: background-color .3s var(--veer), border-color .3s var(--veer), color .3s var(--veer); }
.filter-knop:hover { border-color: #B8BDCA; }
.filter-knop[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.stalen-vlak { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; padding: 4px 18px 18px; }
.stalen-raster { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.staal-kaart { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border: 0; border-radius: 10px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); text-align: left; font: inherit; color: var(--inkt); cursor: pointer; transition: box-shadow .3s var(--veer); }
.staal-kaart:hover { box-shadow: 0 0 0 1px #B8BDCA; }
.staal-kaart[aria-pressed="true"], .staal-kaart[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--hoofd); }
.staal-kaart.uit { opacity: .55; }
.staal-vlak { position: relative; aspect-ratio: 160 / 84; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(21, 26, 45, .12); }
.staal-vlak svg, .stalen-staal svg { display: block; width: 100%; height: 100%; }
.staal-naam { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; }
/* de soort krijgt altijd twee regels ruimte en de prijs staat onderaan: zo staan naam, soort en prijs in alle kaarten op één lijn */
.staal-sub { margin: 0; min-height: calc(2 * 1.35 * 10.5px); font-size: 10.5px; line-height: 1.35; color: var(--grijs); }
.staal-prijs { margin: auto 0 0; padding-top: 4px; display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--grijs); }
.staal-prijs b { color: var(--inkt); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.staal-prijs .let { color: var(--let); font-weight: 500; white-space: nowrap; }
.staal-kaart.nieuw { justify-content: center; align-items: center; gap: 6px; min-height: 150px; box-shadow: none; border: 1px dashed #B8BDCA; background: transparent; color: var(--grijs); font-size: 11.5px; font-weight: 500; transition: color .3s var(--veer), border-color .3s var(--veer); }
.staal-kaart.nieuw:hover { color: var(--inkt); border-color: var(--inkt); box-shadow: none; }
.staal-kaart.nieuw .icoon { width: 18px; height: 18px; }
/* het paneel heeft een vaste breedte: wisselt de inhoud (banen, tegels, vloerverwarming), dan verschuift het raster niet */
.stalen-paneel { flex: 0 0 340px; width: 340px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; background: var(--vlak); border-radius: 10px; box-shadow: 0 0 0 1px var(--lijn); position: sticky; top: 120px; align-self: flex-start; --hoogte: 30px; }
/* past het paneel niet meer op een laag scherm, dan scrolt het van binnen; anders nooit */
@media (max-height: 720px) { .stalen-paneel { max-height: calc(100vh - 136px); overflow-y: auto; } }
.stalen-paneel .invoer, .stalen-paneel .getal-invoer { width: 100%; min-width: 0; box-sizing: border-box; }
.stalen-paneel .prijs-regel > .invoer { width: 0; flex: 1; }
.stalen-blok { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--lijn); }
.stalen-blok:last-child { border-bottom: 0; }
.stalen-blok > .veld-label { margin: 0; }
.stalen-kop { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; }
.stalen-staal { width: 44px; height: 44px; flex: none; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(21, 26, 45, .12); }
.stalen-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stalen-naam .invoer { font-weight: 600; }
.stalen-naam .sub { font-size: 10.5px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stalen-kop .schakel { flex: none; }
.stalen-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stalen-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stalen-tekening { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.stalen-paneel .veld { gap: 4px; }
.stalen-paneel .segment.klein { height: 30px; padding: 3px; }
.stalen-paneel .segment.klein button { height: 24px; }
.stalen-paneel .kleur-invoer { height: 30px; width: 36px; }
.stalen-tekening .segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.stalen-tekening .segment button, .stalen-paneel .segment button { justify-content: center; text-align: center; }
.stalen-waarde { height: var(--hoogte); display: flex; align-items: center; font-size: 12px; color: var(--inkt-2); }
.stalen-paneel .prijs-uitleg { margin: 0; }
.stalen-voet { flex-direction: row; justify-content: space-between; align-items: center; }
.stalen-voet .hulp { margin: 0; }
.stalen-weg { padding: 0; border: 0; background: none; font: inherit; font-size: 10.5px; font-weight: 500; color: var(--fout); cursor: pointer; }
.stalen-weg:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .stalen-paneel { flex: 1 1 100%; width: auto; position: static; }
  .stalen-filters { top: 0; }
  /* de naam krijgt de hele breedte; de schakelaar komt eronder, zodat een lange naam niet wordt afgekapt */
  .stalen-kop { flex-wrap: wrap; }
  .stalen-naam { flex-basis: calc(100% - 56px); }
  .stalen-kop .schakel { margin-left: 56px; }
  .stalen-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------------------------------------------------------------- de ruimtes als losse kaarten (optie 1, 3 november)
   een lichtgrijze ondergrond met per ruimte een witte kaart: ook zonder muis erover zie je waar een ruimte begint en eindigt */
.ruimte-paneel .editor-scroll { background: #F0F1F4; }
.ruimte-paneel .groep-kop { padding: 10px 12px 6px; }
.ruimte-paneel .ruimte-rij { margin: 0 8px; padding: 10px; border-radius: 8px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); }
.ruimte-paneel .ruimte-rij + .ruimte-rij { margin-top: 8px; }
.ruimte-paneel .ruimte-rij:hover, .ruimte-paneel .ruimte-rij.zweef { background: var(--vlak); box-shadow: 0 0 0 1px #B8BDCA; }
.ruimte-paneel .ruimte-rij.actief, .ruimte-paneel .ruimte-rij.actief:hover, .ruimte-paneel .ruimte-rij.actief.zweef { background: var(--vlak); box-shadow: 0 0 0 1.5px var(--inkt), var(--schaduw-1); }
.ruimte-paneel .ruimte-rij:not(.vloer) { background: #F7F8FA; }
.ruimte-paneel .lijst-leeg, .ruimte-paneel .terugzet-knop { margin-left: 8px; margin-right: 8px; }