/* =========================================================================
   VvE-app — ontwerpsysteem

   Huisstijl: lichtblauw en wit. Rustige vlakken, dunne randen, weinig
   schaduw; kleur gebruiken we om betekenis te geven, niet ter versiering.

   Alles hangt aan de tokens onderin :root. Wil je de huisstijl veranderen,
   pas dan die waarden aan en niets anders. Gebruik in nieuwe schermen de
   bestaande klassen (.kaart, .knop, .tabel, .badge) voordat je nieuwe CSS
   schrijft — zie docs/ONTWERPSYSTEEM.md.
   ========================================================================= */

:root {
  /* merk — lichtblauw; --merk is donker genoeg voor witte tekst erop */
  --merk:            #0d6ca4;
  --merk-donker:     #0a5482;
  --merk-licht:      #3f9ad2;
  --accent:          #1583c4;
  --accent-zacht:    #e4f1fa;
  --accent-rand:     #bcddf3;

  /* vlakken */
  --achtergrond:     #f4f8fc;
  --vlak:            #ffffff;
  --vlak-zacht:      #f3f8fc;
  --vlak-blauw:      #eaf2fa;
  --rand:            #e3ecf4;
  --rand-sterk:      #cbdbe8;

  /* tekst */
  --tekst:           #16283a;
  --tekst-zwak:      #667f95;
  --tekst-omgekeerd: #ffffff;

  /* signalen */
  --groen:           #0f8158;
  --groen-zacht:     #e3f4ec;
  --groen-rand:      #bce3d1;
  --oranje:          #b96a0b;
  --oranje-zacht:    #fcf1de;
  --oranje-rand:     #f0d6a8;
  --rood:            #c4433a;
  --rood-zacht:      #fbeae8;
  --rood-rand:       #f0c7c3;
  --blauw:           #1a6fb0;
  --blauw-zacht:     #e6f1fa;
  --blauw-rand:      #c2dcf1;
  --paars:           #6a4fb5;
  --paars-zacht:     #eeeaf9;
  --paars-rand:      #d6cdf0;

  /* maatvoering — zachte hoeken, lichte diepte, veel wit */
  --straal:          12px;
  --straal-klein:    8px;
  --straal-rond:     999px;
  --schaduw:         0 1px 2px rgba(20, 60, 95, .05),
                     0 6px 18px -12px rgba(20, 60, 95, .28);
  --schaduw-hoog:    0 16px 34px -16px rgba(20, 60, 95, .38),
                     0 2px 6px rgba(20, 60, 95, .06);
  --zijbalk-breedte: 252px;
  --kopbalk-hoogte:  56px;
  --omgevingsband-hoogte: 28px;
  --inhoud-breedte:  1240px;

  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--ruimte-3);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.015em;
}
h1 { font-size: 25px; font-weight: 650; letter-spacing: -.022em; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }
p  { margin: 0 0 var(--ruimte-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--merk); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.icoon { flex: none; vertical-align: -.18em; }
.zwak { color: var(--tekst-zwak); }
.klein { font-size: 13px; }
.mini { font-size: 12px; }
.vet { font-weight: 600; }
.rechts { text-align: right; }
.midden { text-align: center; }
.verborgen { display: none !important; }
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Raamwerk -----------------------------------------------------------
   Eén doorlopende zijbalk over de volle hoogte; daarnaast het werkgebied.
   De naam van de VvE en het account staan in de zijbalk, niet in een balk
   bovenlangs. Op smalle schermen verschijnt daarvoor de .kopbalk.
   ----------------------------------------------------------------------- */

.romp { display: flex; min-height: 100vh; }

.zijbalk {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--zijbalk-breedte);
  display: flex; flex-direction: column;
  padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-3);
  background: var(--vlak-blauw);
  border-right: 1px solid var(--rand);
}

/* De beheerdersomgeving is herkenbaar anders (§5.4): één klasse die drie
   tokens overschrijft — de achtergrond, het merkteken en de streep naast het
   actieve item. Paars, omdat het ontwerpsysteem paars al aan *een rol of
   afscherming* geeft en dit precies dat is. Verder niets: dezelfde knoppen,
   dezelfde kaarten, dezelfde tabel, geen tweede stylesheet. */
.zijbalk-beheer { background: var(--paars-zacht); }
.zijbalk-beheer .zijbalk-merk .merkteken { background: var(--paars); }
.zijbalk-beheer .nav-item.actief { color: var(--paars); }
.zijbalk-beheer .nav-item.actief::before { background: var(--paars); }

/* De vaste weg terug naar de omgeving, bovenin de VvE-zijbalk (§5.3). Hij
   staat er als nav-item zodat hij dezelfde hoogte en hetzelfde gedrag heeft als
   de rest van de navigatie, maar in het paars van de omgeving waar hij heen
   gaat — en met een streep eronder, want hij hoort niet bij de VvE eronder. */
.nav-terug-naar-beheer {
  color: var(--paars); font-weight: 600;
  margin-bottom: var(--ruimte-2); padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
}
.nav-terug-naar-beheer .icoon { color: var(--paars); }
.nav-terug-naar-beheer:hover { color: var(--paars); }

/* *Feedback geven* op een demo-VvE: bovenin, onder de naam van de VvE, en in
   de accentkleur, zodat een kennis die rondkijkt hem ziet zonder te zoeken.
   Een omlijnd vlakje, want hij is geen module en hoort niet in de rij eronder. */
.nav-feedback {
  margin-bottom: var(--ruimte-4);
  background: var(--accent-zacht); border: 1px solid var(--accent-rand);
  color: var(--merk-donker); font-weight: 600;
}
.nav-feedback .icoon { color: var(--merk); }
.nav-feedback:hover { background: var(--vlak); color: var(--merk-donker); }

.zijbalk-kop { padding-bottom: var(--ruimte-4); }

.zijbalk-merk {
  display: flex; align-items: center; gap: var(--ruimte-3);
  width: 100%; padding: var(--ruimte-2);
  border: 0; border-radius: var(--straal);
  background: none; color: var(--tekst); font: inherit; text-align: left;
  cursor: pointer;
}
.zijbalk-merk:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.zijbalk-merk .merknaam {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 650; letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zijbalk-merk .merkteken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--straal-klein);
  background: var(--merk); color: #fff;
}
.zijbalk-merk .chevron { color: var(--tekst-zwak); }

/* Alleen de lijst met modules scrollt; de zijbalk zelf niet, anders knipt
   hij de uitklapmenu's van de VvE-wisselaar en het account af. */
.zijbalk-nav { flex: 1; min-height: 0; overflow-y: auto; }

.zijbalk-groep { margin-bottom: var(--ruimte-5); }
.zijbalk-groep:last-child { margin-bottom: 0; }
.zijbalk-groep-kop {
  padding: 0 var(--ruimte-3) 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8aa5bd;
}

/* Navigatie: tekst zonder iconen; het actieve item is een wit vlak met een
   blauwe streep links. */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: 7px var(--ruimte-3);
  margin-bottom: 1px;
  border-radius: var(--straal-klein);
  color: var(--tekst); font-size: 14px; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .72); text-decoration: none; }
.nav-item .icoon { color: #8aa5bd; }
.nav-item.actief {
  background: var(--vlak);
  color: var(--merk-donker); font-weight: 650;
  box-shadow: 0 1px 2px rgba(20, 60, 95, .06), 0 4px 12px -8px rgba(20, 60, 95, .3);
}
.nav-item.actief::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--merk);
}
.nav-item.actief .icoon { color: var(--merk); }
.nav-item .teller {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--merk-donker); background: var(--accent-zacht);
  padding: 1px 7px; border-radius: var(--straal-rond);
}

.zijbalk-voet {
  display: flex; align-items: center; gap: var(--ruimte-1);
  margin-top: var(--ruimte-4); padding-top: var(--ruimte-3);
  border-top: 1px solid var(--rand);
}
.zijbalk-voet .menu { flex: 1; min-width: 0; }

.profielknop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  width: 100%; padding: 6px var(--ruimte-2);
  border: 0; border-radius: var(--straal-klein);
  background: none; color: var(--tekst); font: inherit; text-align: left;
  cursor: pointer;
}
.profielknop:hover { background: rgba(255, 255, 255, .72); }
.profielknop .naam {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profielknop .chevron { color: var(--tekst-zwak); }

/* Het versienummer onderin de zijbalk, en los rechtsonder op de schermen
   zonder zijbalk (inloggen). Onopvallend: het is voor wie een fout meldt. */
.versieregel {
  padding: var(--ruimte-2) var(--ruimte-2) 0;
  font-size: 12px; color: var(--tekst-zwak);
}
.versieregel-los {
  position: fixed; right: var(--ruimte-3); bottom: var(--ruimte-2);
  padding: 0;
}

/* De band op de testomgeving: bovenaan elke pagina, ook op de inlogpagina,
   zodat test en productie niet te verwarren zijn. Oranje want het vraagt
   aandacht; zacht want je werkt er de hele dag onder. Vast bovenaan en buiten
   de stroom, zodat het raster van de inlogpagina en de vaste zijbalk er
   niets van merken: die schuiven met --omgevingsband-hoogte op. */
.omgevingsband {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--omgevingsband-hoogte);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--oranje);
  background: var(--oranje-zacht);
  border-bottom: 1px solid var(--oranje-rand);
}
body.met-omgevingsband { padding-top: var(--omgevingsband-hoogte); }
.met-omgevingsband .zijbalk { top: var(--omgevingsband-hoogte); }
.met-omgevingsband .kopbalk { top: var(--omgevingsband-hoogte); }

/* Kopbalk: alleen op smalle schermen, als drager van het menuknopje. */
.kopbalk {
  display: none;
  position: sticky; top: 0; z-index: 20;
  height: var(--kopbalk-hoogte);
  align-items: center; gap: var(--ruimte-2);
  padding: 0 var(--ruimte-3);
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.kopbalk-titel {
  flex: 1; min-width: 0;
  font-weight: 650; letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopbalk-knop {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 36px; height: 36px; flex: none;
  border: 0; border-radius: var(--straal-klein);
  background: none; color: var(--tekst-zwak); cursor: pointer;
}
.kopbalk-knop:hover { background: var(--vlak-zacht); color: var(--tekst); text-decoration: none; }

.telbolletje {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--straal-rond);
  background: var(--rood); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.werkgebied {
  flex: 1; min-width: 0;
  margin-left: var(--zijbalk-breedte);
  display: flex; flex-direction: column;
}

/* De inhoud staat gecentreerd in het werkgebied; op brede schermen valt de
   ruimte dus aan beide kanten, niet alleen rechts. */
.inhoud {
  flex: 1;
  width: 100%; max-width: var(--inhoud-breedte);
  margin-inline: auto;
  padding: var(--ruimte-6) var(--ruimte-6) 48px;
}

/* Donker scherm achter de uitgeschoven zijbalk op smalle schermen. */
.zijbalk-scherm { display: none; }

.paginakop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-4); flex-wrap: wrap;
  margin-bottom: var(--ruimte-5);
}
.paginakop h1 { margin: 0; }
.paginakop .ondertitel { color: var(--tekst-zwak); margin-top: 4px; font-size: 14px; }
.paginakop-acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

/* De terugknop linksboven — één plek, uit basis.html. Stil, zodat hij niet
   met de acties rechts in de paginakop concurreert; wel groot genoeg om te
   raken. */
.terugknop {
  display: inline-flex; align-items: center; gap: var(--ruimte-1);
  margin: -6px 0 var(--ruimte-4) -8px; padding: 6px 10px 6px 8px;
  border-radius: var(--straal-klein);
  font-size: 13px; font-weight: 600; color: var(--tekst-zwak);
  text-decoration: none;
}
.terugknop:hover { background: var(--vlak-zacht); color: var(--tekst); text-decoration: none; }

/* --- Homepage: welkomstrook en tegels ------------------------------------
   De homepage kent geen brede/smalle kolom: bovenaan één strook met de VvE en
   de kerngetallen, daaronder gelijkwaardige tegels in een raster.
   ------------------------------------------------------------------------ */

.welkomstrook {
  margin-bottom: var(--ruimte-5);
  background: linear-gradient(150deg, #ffffff 0%, #f4faff 55%, var(--accent-zacht) 100%);
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.welkomstrook-kop {
  display: flex; align-items: center; gap: var(--ruimte-5);
  padding: var(--ruimte-5);
}
.welkomstrook-foto {
  width: 168px; flex: none;
  aspect-ratio: 4 / 3;
  border-radius: var(--straal-klein);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 60, 95, .12);
}
.welkomstrook-foto img,
.welkomstrook-foto .foto-plaatshouder {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
}
.welkomstrook-tekst { flex: 1; min-width: 0; }
.welkomstrook-tekst h1 { margin: 2px 0 4px; }
.welkomstrook-contact {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-4);
  margin-top: var(--ruimte-3);
}

.kerngetallen {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rand);
  background: rgba(255, 255, 255, .55);
}
.kerngetal-tegel {
  display: grid; gap: 2px; align-content: center;
  padding: var(--ruimte-3) var(--ruimte-5);
  border-left: 1px solid var(--rand);
  color: var(--tekst);
}
.kerngetal-tegel:first-child { border-left: 0; }
a.kerngetal-tegel:hover { background: #fff; text-decoration: none; }
.kerngetal-tegel .waarde {
  font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--merk-donker);
}
.kerngetal-tegel .label { font-size: 13px; color: var(--tekst-zwak); }
/* De twee getallen die ergens naar wijzen (§6.2 van ONTWERP-BEHEERDERSOMGEVING):
   dezelfde betekenis als de badges in de tabel eronder — rood is *geen
   sitebeheerder*, oranje is *loopt, vraagt aandacht*. Alleen boven nul; bij nul
   vraagt het getal niets en houdt het de gewone kleur. */
.kerngetal-tegel .waarde-rood { color: var(--rood); }
.kerngetal-tegel .waarde-oranje { color: var(--oranje); }

/* Tegels verschillen in hoogte. Kolommen (in plaats van een raster) laten ze
   in metselverband lopen, zodat er geen gaten vallen onder een korte tegel. */
.tegelrooster { column-count: 3; column-gap: var(--ruimte-5); }
.tegelrooster > * {
  break-inside: avoid;
  margin-bottom: var(--ruimte-5);
}

/* --- Roosters ---------------------------------------------------------- */

.rooster { display: grid; gap: var(--ruimte-5); }
.rooster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rooster-hoofd-zij { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
.kolom { display: grid; gap: var(--ruimte-5); align-content: start; }

/* --- Kaarten ----------------------------------------------------------- */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
/* De kaartkop is wit: alleen een haarlijn scheidt hem van de inhoud. */
.kaart-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-3);
  padding: var(--ruimte-4) var(--ruimte-5) var(--ruimte-3);
  border-bottom: 1px solid var(--rand);
}
.kaart-kop h2, .kaart-kop h3 { margin: 0; letter-spacing: -.01em; }
.kaart-kop-acties { display: flex; align-items: center; gap: var(--ruimte-1); }
.kaart-lijf { padding: var(--ruimte-5); }
.kaart-lijf-strak { padding: 0; }
.kaart-voet {
  padding: var(--ruimte-3) var(--ruimte-5);
  border-top: 1px solid var(--rand);
  background: var(--vlak-zacht);
}
.kaart-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto-plaatshouder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ruimte-2);
  background: linear-gradient(160deg, #f4fafe 0%, var(--accent-zacht) 55%, #d9eaf8 100%);
  color: var(--merk-licht);
  aspect-ratio: 21 / 9;
}
.kaart-foto-houder { position: relative; }
.kaart-foto-houder .zwevende-knop { position: absolute; top: var(--ruimte-3); right: var(--ruimte-3); }

/* --- Knoppen ----------------------------------------------------------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ruimte-2);
  padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--straal-klein);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25;
  cursor: pointer; white-space: nowrap;
  background: var(--merk); color: #fff;
  box-shadow: 0 1px 2px rgba(13, 60, 95, .18);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.knop:hover { background: var(--merk-donker); text-decoration: none; color: #fff; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }

.knop-rand {
  background: var(--vlak); color: var(--tekst); border-color: var(--rand-sterk);
  box-shadow: 0 1px 2px rgba(20, 60, 95, .05);
}
.knop-rand:hover {
  background: var(--accent-zacht); color: var(--merk-donker);
  border-color: var(--accent-rand);
}

.knop-stil { background: none; color: var(--tekst-zwak); box-shadow: none; }
.knop-stil:hover { background: var(--vlak-zacht); color: var(--tekst); }

.knop-gevaar { background: var(--rood); }
.knop-gevaar:hover { background: #a5352d; }

.knop-klein { padding: 4px 10px; font-size: 13px; }
.knop-vol { width: 100%; }

.icoonknop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--straal-klein);
  background: none; color: var(--tekst-zwak); cursor: pointer;
}
.icoonknop:hover { background: var(--accent-zacht); color: var(--merk-donker); text-decoration: none; }
.zwevende-knop {
  background: rgba(255, 255, 255, .94); color: var(--tekst);
  box-shadow: var(--schaduw-hoog); border: 1px solid var(--rand);
  width: 34px; height: 34px;
}
.zwevende-knop:hover { background: #fff; }

/* --- Badges en statussen ------------------------------------------------
   Rechthoekjes met een kleine hoek — geen pillen; kleur zegt iets.
   ----------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--straal-klein);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--vlak-zacht); color: var(--tekst-zwak);
  border: 1px solid var(--rand);
}
.badge-grijs  { background: var(--vlak-zacht);   color: var(--tekst-zwak); border-color: var(--rand); }
.badge-paars  { background: var(--paars-zacht);  color: var(--paars);  border-color: var(--paars-rand); }
.badge-groen  { background: var(--groen-zacht);  color: var(--groen);  border-color: var(--groen-rand); }
.badge-oranje { background: var(--oranje-zacht); color: var(--oranje); border-color: var(--oranje-rand); }
.badge-rood   { background: var(--rood-zacht);   color: var(--rood);   border-color: var(--rood-rand); }
.badge-blauw  { background: var(--blauw-zacht);  color: var(--blauw);  border-color: var(--blauw-rand); }

.bolletje { width: 8px; height: 8px; border-radius: var(--straal-rond); flex: none; background: var(--tekst-zwak); }
.bolletje-oranje { background: var(--oranje); }
.bolletje-groen  { background: var(--groen); }
.bolletje-rood   { background: var(--rood); }
.bolletje-blauw  { background: var(--blauw); }

/* Legenda onder de agenda: hetzelfde bolletje als in de lijst, met het woord erbij. */
.agenda-legenda {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4);
  font-size: 13px; color: var(--tekst-zwak);
}
.agenda-legenda span { display: inline-flex; align-items: center; gap: 7px; }

/* --- Avatars ------------------------------------------------------------
   Afgeronde vierkanten; ronde vormen houden we voor bolletjes en tellers.
   ----------------------------------------------------------------------- */

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 11px; object-fit: cover;
  background: var(--accent-zacht); color: var(--merk-donker);
  box-shadow: inset 0 0 0 1px rgba(13, 108, 164, .12);
  font-size: 13px; font-weight: 650; letter-spacing: .02em;
}
.avatar-leeg { background: var(--vlak-zacht); color: var(--tekst-zwak); box-shadow: inset 0 0 0 1px var(--rand); }
.avatar-rij { display: flex; align-items: center; gap: var(--ruimte-3); }

/* --- Lijsten ----------------------------------------------------------- */

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst-item {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-5);
  border-bottom: 1px solid var(--rand);
  color: inherit; line-height: 1.45;
}
.lijst-item:last-child { border-bottom: 0; }
a.lijst-item { position: relative; }
a.lijst-item:hover { background: var(--vlak-zacht); text-decoration: none; }
a.lijst-item:hover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--merk-licht);
}
/* De regel waar de URL naar wijst (#afspraak-12): na het opslaan van een
   afspraak landt het overzicht hier, en de nieuwe regel licht op. */
a.lijst-item:target { background: var(--accent-zacht); scroll-margin-top: 80px; }
a.lijst-item:target::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.lijst-item-inhoud { flex: 1; min-width: 0; }
.lijst-item-titel { font-weight: 600; }
.lijst-item-meta { color: var(--tekst-zwak); font-size: 13px; }
.lijst-item .chevron { color: var(--rand-sterk); flex: none; }

/* --- Tabellen ---------------------------------------------------------- */

.tabel-omhulsel { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th {
  text-align: left; font-size: 13px; font-weight: 600;
  color: var(--tekst-zwak);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand-sterk);
  background: var(--vlak);
  white-space: nowrap;
}
.tabel td {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--vlak-zacht); }
.tabel .kolom-smal { width: 1%; white-space: nowrap; }

/* --- Formulieren ------------------------------------------------------- */

.formulier { display: grid; gap: var(--ruimte-4); }
.formulier-rij { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.veldgroep { display: grid; gap: 5px; }
.veldgroep > label { font-size: 13px; font-weight: 600; color: var(--tekst); }
.veldgroep .hulptekst { font-size: 12px; color: var(--tekst-zwak); }
.veldgroep .foutmelding { font-size: 13px; color: var(--rood); }

.veld {
  width: 100%;
  padding: 8px 11px;
  font: inherit; font-size: 14px; color: var(--tekst);
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--straal-klein);
}
.veld:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-zacht);
}
.veld[type="file"] { padding: 6px 9px; }
textarea.veld { min-height: 120px; resize: vertical; }
select.veld { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c7186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}

.vinkjerij { display: flex; align-items: flex-start; gap: var(--ruimte-2); }
.vinkjerij label { font-size: 14px; font-weight: 500; }
.vinkje { accent-color: var(--merk); }
input.vinkje { width: 16px; height: 16px; margin: 3px 0 0; flex: none; }

/* Een keuzeveld met meerdere vinkjes zet de klasse ook op het omhulsel;
   dat mag geen 16×16 vakje worden. */
div.vinkje { display: grid; gap: 5px; }
div.vinkje label { display: flex; align-items: center; gap: var(--ruimte-2); font-size: 14px; font-weight: 500; }
div.vinkje input { margin: 0; }

/* Radio's. `basisformulieren.py` zet deze klasse al op elke RadioSelect, maar
   er stond nooit een regel bij — de eerste module die er serieus op leunt is
   stemmen. De labels mogen meerdere regels lang zijn, want ze dragen hier de
   uitleg.

   `div.radio` en niet `.radio`, om dezelfde reden als bij div.vinkje hierboven:
   Django's RadioSelect zet de klasse uit `attrs` op de omhullende <div> én op
   elke <input>. Een kale `.radio { display: grid }` maakt het bolletje zelf dus
   nul pixels breed — je stemt dan blind. */
div.radio { display: grid; gap: var(--ruimte-2); }
div.radio label { display: flex; align-items: flex-start; gap: var(--ruimte-2); font-size: 14px; font-weight: 500; }
div.radio > div { display: contents; }
input.radio { margin: 3px 0 0; flex: none; }

/* Eén keuze in een meerkeuzestemming, in het beheerformulier. */
.optieregel {
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--ruimte-2);
  align-items: end; padding: var(--ruimte-2) 0;
  border-top: 1px solid var(--rand);
}
.optieregel .veldgroep { margin: 0; }
@media (max-width: 640px) { .optieregel { grid-template-columns: 1fr; } }

.formulier-voet {
  display: flex; gap: var(--ruimte-2); justify-content: flex-end;
  padding-top: var(--ruimte-2);
}

.filterbalk {
  display: flex; gap: var(--ruimte-2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--ruimte-5);
}
.filterbalk .veld { width: auto; min-width: 200px; }
.zoekveld { position: relative; }
.zoekveld .icoon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tekst-zwak); }
.zoekveld .veld { padding-left: 36px; }

/* --- Meldingen ----------------------------------------------------------
   Een gekleurde streep links; de rest van het vlak blijft rustig.
   ----------------------------------------------------------------------- */

.meldingen { display: grid; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
.melding {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--rand); border-left: 3px solid var(--rand-sterk);
  border-radius: var(--straal-klein);
  background: var(--vlak);
}
.melding-success { background: var(--groen-zacht);  border-color: var(--groen-rand);  border-left-color: var(--groen);  color: #0b5c3f; }
.melding-error   { background: var(--rood-zacht);   border-color: var(--rood-rand);   border-left-color: var(--rood);   color: #8f2a21; }
.melding-warning { background: var(--oranje-zacht); border-color: var(--oranje-rand); border-left-color: var(--oranje); color: #7d4708; }
.melding-info    { background: var(--blauw-zacht);  border-color: var(--blauw-rand);  border-left-color: var(--blauw);  color: #124e7c; }

.leegstaand {
  display: grid; justify-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-6) var(--ruimte-5);
  text-align: center; color: var(--tekst-zwak);
}
.leegstaand .icoon { color: var(--merk-licht); opacity: .55; }
.leegstaand h3 { color: var(--tekst); margin: 0; }

/* --- Paginering -------------------------------------------------------- */

.paginering {
  display: flex; align-items: center; justify-content: center; gap: var(--ruimte-2);
  padding: var(--ruimte-4);
}
.paginering .huidig { font-size: 13px; color: var(--tekst-zwak); }

/* --- Uitklapbare kaart (details/summary) --------------------------------
   Een <summary> met display:flex verliest het driehoekje van de browser, en
   dan ziet niemand dat er iets uit te klappen is (testsessie 04-09-2026,
   "Meer instellingen" op het stemrondeformulier). Daarom een eigen chevron,
   die meedraait. */

details.kaart > summary { list-style: none; cursor: pointer; }
details.kaart > summary::-webkit-details-marker { display: none; }
details.kaart:not([open]) > summary.kaart-kop { border-bottom: 0; }
details.kaart > summary .uitklap-teken {
  display: inline-flex; color: var(--tekst-zwak);
  transition: transform .15s ease;
}
details.kaart[open] > summary .uitklap-teken { transform: rotate(180deg); }

/* --- Agenda: hele dag → alleen een datum --------------------------------
   Staat het vinkje aan, dan verdwijnen de twee momenten en verschijnt het
   datumveld; staat het uit, andersom. Zonder JavaScript, met :has(). Een
   browser die :has() niet kent toont alle drie de velden, en het formulier
   (AfspraakFormulier.clean) redt zich daar ook mee. */

.formulier:has(#id_hele_dag:checked) .veldgroep-begint_op,
.formulier:has(#id_hele_dag:checked) .veldgroep-eindigt_op { display: none; }
.formulier:not(:has(#id_hele_dag:checked)) .veldgroep-datum { display: none; }

/* --- Menu (details/summary) -------------------------------------------- */

.menu { position: relative; display: inline-block; }
.menu-blok { display: block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-paneel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 220px; padding: 5px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--straal); box-shadow: var(--schaduw-hoog);
}
.menu-paneel.links { right: auto; left: 0; }
/* Voor menu's onderin het scherm: klap omhoog in plaats van omlaag. */
.menu-paneel.omhoog { top: auto; bottom: calc(100% + 6px); }
.menu-item {
  display: flex; align-items: center; gap: var(--ruimte-2);
  width: 100%; padding: 7px 10px;
  border: 0; border-radius: var(--straal-klein); background: none;
  font: inherit; font-size: 14px; color: var(--tekst); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--accent-zacht); color: var(--merk-donker); text-decoration: none; }
.menu-item.gevaar { color: var(--rood); }
.menu-item.gevaar:hover { background: var(--rood-zacht); color: var(--rood); }
.menu-scheiding { height: 1px; margin: 5px 0; background: var(--rand); }

/* --- Losse onderdelen -------------------------------------------------- */

.gegevensrij { display: flex; gap: var(--ruimte-3); padding: 5px 0; }
.gegevensrij dt { min-width: 150px; color: var(--tekst-zwak); flex: none; }
.gegevensrij dd { margin: 0; }

.kerngetal { display: grid; gap: 2px; }
.kerngetal .waarde { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kerngetal .label { font-size: 13px; color: var(--tekst-zwak); }

.voortgang { height: 6px; border-radius: var(--straal-rond); background: var(--vlak-blauw); overflow: hidden; }
.voortgang > span { display: block; height: 100%; background: var(--merk-licht); border-radius: inherit; }

.tekstinhoud img { max-width: 100%; height: auto; border-radius: var(--straal-klein); }
.tekstinhoud { overflow-wrap: anywhere; }

/* Voor een titel die van een gebruiker komt: een naam zonder spaties loopt
   anders dwars door de kaart heen. */
.afbreken { overflow-wrap: anywhere; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Fotoalbum ----------------------------------------------------------
   Een raster van vierkante miniaturen. auto-fill met een minimum laat het
   aantal kolommen meebewegen met de breedte, zonder mediaquery per maat. Het
   minimum staat op 140px en niet hoger: bij 180px valt een telefoon van 375px
   terug op één kolom, en dan wordt een album van dertig foto's een eindeloze
   stapel schermvullende vierkanten. */

.fotorooster {
  display: grid;
  gap: var(--ruimte-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fotovak {
  position: relative; display: block;
  border-radius: var(--straal-klein); overflow: hidden;
  background: var(--vlak-zacht);
}
.fotovak img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fotovak:hover img { filter: brightness(1.05); }

/* Wit op een foto is wit op een onbekende achtergrond. Het verloop wordt daarom
   snel donker (op een derde van de hoogte al .45) en de tekstschaduw vangt op
   wat er overblijft; zonder dat haalt een bijschrift over een lichte lucht geen
   enkel leesbaar contrast. Twee regels is het maximum — het hele bijschrift
   staat op de fotopagina, en anders bedekt de tekst de foto die hij beschrijft. */
.fotovak-bijschrift {
  position: absolute; inset: auto 0 0 0;
  padding: 20px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45) 34%, rgba(0, 0, 0, .82));
  color: #fff; font-size: 12px; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fotonavigatie { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); }

/* De foto op zijn eigen pagina: zo groot als de kaart toelaat, nooit hoger dan
   het scherm — anders moet je scrollen om één foto te zien. */
.fotoblad { margin: 0; }
.fotoblad img {
  display: block; width: 100%; height: auto;
  max-height: 78vh; object-fit: contain;
  background: var(--vlak-zacht);
}

/* De strook in de homepagetegel: één rij miniaturen die meebeweegt. */
.fotostrook {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: 1px solid var(--rand);
}
.fotostrook .fotovak { border-radius: 0; }

/* --- Het gebouw ---------------------------------------------------------
   De tekening staat in de browser: een canvas dat static/js/gebouw.js met
   three.js vult vanuit het endpoint gebouw:model (ADR-0063). Wat hier staat
   is alleen de plek van dat canvas, de knoppen erop, de lijst ernaast en de
   vaantjes met hun kaartjes. Kleuren ín de tekening komen niet uit dit
   bestand maar uit `beeld.KLEUREN`, via json_script.

   Het vaantje zegt wát er speelt (het icoon) en hoe dringend (de kleur):
   rood vraagt aandacht, oranje loopt, blauw is informatie. In de lijst staat
   het achter de regel; in het 3D-beeld hangt een kopie boven de gevel of het
   dak. Beide openen hetzelfde kaartje.
   ----------------------------------------------------------------------- */

.gebouw-vlak { position: relative; }
.gebouw-kaartlijf { padding: 0; }

.gebouw-3d { position: relative; }
.gebouw-3d canvas {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--straal) var(--straal) 0 0;
  touch-action: none;               /* slepen draait het gebouw, niet de pagina */
}
.gebouw-3d-klein canvas { aspect-ratio: 5 / 4; max-height: 220px; border-radius: 0; }
.gebouw-zonder-script { margin: 0; padding: var(--ruimte-5) var(--ruimte-4); color: var(--tekst-zwak); }
/* De knoppen die het script neerzet: links de laagkeuze (een kolom, van
   boven naar beneden zoals het gebouw), rechts de knop Buurt. Het vak zelf
   laat de muis door naar het canvas; alleen de knoppen vangen hem. */
.gebouw-knoppen {
  position: absolute; top: var(--ruimte-3); left: var(--ruimte-3); right: var(--ruimte-3);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ruimte-2);
  pointer-events: none;
}
.gebouw-knoppen .knop { background: var(--vlak); pointer-events: auto; }
.gebouw-knoppen .knop[aria-pressed="true"] { background: var(--accent-zacht); color: var(--merk-donker); }
.gebouw-knoppen .gebouw-knop-buurt { margin-left: auto; }
.gebouw-lagenkeuze { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gebouw-lagenkeuze .knop { text-align: left; }
.gebouw-lijst .gebouw-lijst-kop.is-gekozen { color: var(--merk-donker); background: var(--accent-zacht); }

/* --- Het vaantje -------------------------------------------------------- */

.vaantje {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 24px; height: 24px;
  border-radius: 8px;
  color: var(--tekst-omgekeerd);
  box-shadow: 0 0 0 1.5px var(--vlak);
}
.vaantje .icoon { overflow: visible; }
.vaantje.merk-rood   { background: var(--rood); }
.vaantje.merk-oranje { background: var(--oranje); }
.vaantje.merk-blauw  { background: var(--blauw); }
a.vaantje:hover { filter: brightness(1.12); text-decoration: none; }
a.vaantje:focus-visible { outline: none; box-shadow: 0 0 0 2.5px var(--merk-donker); }

/* Waar een klik op een speldje in de tekening zijn kaartje opent: een
   onzichtbaar punt op de plek van de klik (gebouw.js, ADR-0101). Het kaartje
   komt daar, zoals het bij een vaantje in de lijst naast dat vaantje komt. */
.gebouw-anker {
  position: absolute; width: 0; height: 0; pointer-events: none;
}

/* De naam van wat je aanwijst, bij de aanwijzer (gebouw.js). Eén plaatje
   voor de hele tekening: zonder aanwijzen staat er niets. */
.gebouw-label {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, -160%);
  padding: 2px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .92); color: var(--tekst);
  box-shadow: var(--schaduw);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* --- De lijst naast de tekening ---------------------------------------- */

.gebouw-lijst .gebouw-lijst-kop {
  margin: 0; padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-1);
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-zwak);
  border-top: 1px solid var(--rand);
}
.gebouw-lijst .gebouw-lijst-gebouw {
  margin: 0; padding: var(--ruimte-3) var(--ruimte-4) 0;
  font-size: 15px;
}
.gebouw-lijst .lijst { margin: 0; }
.gebouw-item { align-items: center; gap: var(--ruimte-3); }

/* --- Het kaartje bij een vaantje ---------------------------------------
   Opent bij een klik of de muis eroverheen (static/js/gebouw-kaartjes.js) en
   staat in .gebouw-vlak, het vlak dat de tekening en de lijst omvat. Zonder
   JavaScript blijft het verborgen en is het vaantje gewoon een link. */
.gebouw-kaartje {
  position: absolute; z-index: 40;
  width: min(300px, calc(100% - 16px));
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--straal); box-shadow: var(--schaduw-hoog);
  font-size: 13px; line-height: 1.45;
}
/* Het puntje naar het vaantje; --punt zet het op de juiste plek. */
.gebouw-kaartje::after {
  content: ""; position: absolute; left: var(--punt, 50%);
  bottom: -7px; width: 12px; height: 12px;
  margin-left: -6px; transform: rotate(45deg);
  background: var(--vlak); border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.gebouw-kaartje.is-onder::after {
  bottom: auto; top: -7px;
  border: 0; border-left: 1px solid var(--rand); border-top: 1px solid var(--rand);
}
.kaartje-kop {
  display: flex; align-items: center; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
}
.kaartje-kop strong { flex: 1; min-width: 0; }
.kaartje-sluit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -4px -6px -4px 0;
  border: 0; border-radius: var(--straal-klein); background: none;
  color: var(--tekst-zwak); cursor: pointer;
}
.kaartje-sluit:hover { background: var(--vlak-zacht); color: var(--tekst); }
.kaartje-regels { list-style: none; margin: 0 0 var(--ruimte-3); padding: 0; display: grid; gap: 4px; }
.kaartje-regels:empty { display: none; }
.kaartje-regels li { padding-left: 14px; position: relative; }
.kaartje-regels li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rand-sterk);
}

/* --- De legenda -------------------------------------------------------- */

.gebouw-legenda {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ruimte-3) var(--ruimte-5);
  font-size: 13px; color: var(--tekst-zwak);
}
/* Hetzelfde vaantje als in de lijst, zodat de legenda laat zien waar je
   naar kijkt en niet iets wat erop lijkt. */
.legenda-merk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  margin-right: 7px; vertical-align: -5px;
  border-radius: 6px;
  color: var(--tekst-omgekeerd);
}
.legenda-merk.merk-rood   { background: var(--rood); }
.legenda-merk.merk-oranje { background: var(--oranje); }
.legenda-merk.merk-blauw  { background: var(--blauw); }
.gebouw-naamsvermelding { border-top: 1px solid var(--rand); }

/* --- De miniatuur op de homepage en de deelpagina ---------------------- */

.gebouw-miniatuur { display: block; }
.gebouw-miniatuur:hover { text-decoration: none; }
.gebouw-naamsvermelding-kort { display: block; margin-top: var(--ruimte-1); color: var(--tekst-zwak); }

/* --- Inlogscherm --------------------------------------------------------
   Twee vlakken naast elkaar: links het merk in lichtblauw, rechts het
   formulier op wit. Op smalle schermen valt het linkervlak weg.
   ----------------------------------------------------------------------- */

.inlogpagina {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--vlak);
}
.inlogpaneel {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--ruimte-4);
  padding: var(--ruimte-6) 8%;
  color: var(--merk-donker);
  background: linear-gradient(155deg, #f6fbfe 0%, var(--accent-zacht) 45%, #cfe4f6 100%);
  border-right: 1px solid var(--rand);
}
.inlogpaneel .merkteken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--straal); background: var(--merk); color: #fff;
}
/* Het vlak was een leeg blauw verloop ("nu is het gewoon een blauw vlak",
   04-09-2026). Het gebouw uit het eigen icoon staat er nu groot en licht in,
   als tekening en niet als knop: geen hover, geen cursor, buiten de tab-volgorde. */
.inlogpaneel { position: relative; overflow: hidden; }
.inlogpaneel > * { position: relative; z-index: 1; }
.inlogpaneel .inlogfiguur {
  position: absolute; right: -6%; bottom: -10%; z-index: 0;
  color: var(--merk); opacity: .09; pointer-events: none;
}
.inlogpaneel .inlogfiguur .icoon { width: min(56vh, 34vw); height: auto; }
.inlogpaneel h1 { font-size: 30px; margin: 0; }
.inlogpaneel p { max-width: 34ch; color: var(--merk-donker); opacity: .85; }

/* Eén kaart zonder merkvlak (uitnodiging, wachtwoord vergeten): één kolom,
   anders staat de kaart in de linkerhelft van een leeg raster. */
.inlogpagina-enkel { grid-template-columns: minmax(0, 1fr); }
.inlogkaart {
  align-self: center; justify-self: center;
  width: 100%; max-width: 380px;
  padding: var(--ruimte-6) var(--ruimte-5);
}
.inlogkaart h1 { font-size: 21px; margin-bottom: var(--ruimte-1); }
.inlogkaart .ondertitel { color: var(--tekst-zwak); margin-bottom: var(--ruimte-5); }

/* --- Smallere schermen ------------------------------------------------- */

@media (max-width: 1180px) {
  .rooster-hoofd-zij, .rooster-2, .rooster-3 { grid-template-columns: minmax(0, 1fr); }
  .tegelrooster { column-count: 2; }
  .inhoud { padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6); }
}

@media (max-width: 860px) {
  .kopbalk { display: flex; }
  .werkgebied { margin-left: 0; }
  .inhoud { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-6); }
  .formulier-rij { grid-template-columns: minmax(0, 1fr); }

  .tegelrooster { column-count: 1; }
  .welkomstrook-kop {
    flex-wrap: wrap; align-items: flex-start;
    gap: var(--ruimte-4); padding: var(--ruimte-4);
  }
  .welkomstrook-foto { width: 100%; aspect-ratio: 21 / 9; }
  /* De knop krijgt een eigen regel; naast de adresregel wordt het te krap. */
  .welkomstrook-kop > .knop { flex-basis: 100%; }
  .kerngetallen { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kerngetal-tegel:nth-child(odd) { border-left: 0; }
  .kerngetal-tegel:nth-child(n + 3) { border-top: 1px solid var(--rand); }

  .zijbalk {
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--schaduw-hoog);
  }
  body.zijbalk-open .zijbalk { transform: none; }
  body.zijbalk-open .zijbalk-scherm {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(13, 40, 62, .35);
    border: 0; padding: 0;
  }

  .inlogpagina { grid-template-columns: minmax(0, 1fr); }
  .inlogpaneel { display: none; }
}

@media (min-width: 861px) {
  .zijbalk-schakelaar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- MJOP: de reservegrafiek -------------------------------------------- */

/* Server-side SVG, net als de gebouwtekening. Kleur betekent hier hetzelfde
   als elders: blauw is informatie, rood vraagt aandacht. De saldolijn is het
   dominante element — daar lees je in tien seconden of het plan houdbaar is. */

.mjop-antwoord {
  font-size: 20px; line-height: 1.35; margin: 0 0 var(--ruimte-3);
}
.mjop-antwoord strong { color: var(--merk-donker); white-space: nowrap; }

.mjop-grafiek { margin: 0; }
.mjop-grafiek svg { width: 100%; height: auto; display: block; }

.mjop-raster { stroke: var(--rand); stroke-width: 1; }
.mjop-as     { stroke: var(--rand-sterk); stroke-width: 1; }

/* De staven zijn ondergeschikt aan de lijn: zachter blauw, met een dunne
   scheiding tussen de segmenten zodat je losse maatregelen kunt onderscheiden
   zonder dat er een kleurenschema per categorie bij hoeft. */
.mjop-staaf {
  fill: var(--accent-rand);
  stroke: var(--vlak);
  stroke-width: .75;
}
.mjop-staaf:hover { fill: var(--merk-licht); }

.mjop-saldo {
  stroke: var(--merk); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.mjop-buffer {
  stroke: var(--rood); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8;
}

.mjop-aslabel, .mjop-jaarlabel {
  font-size: 11px; fill: var(--tekst-zwak); font-family: inherit;
}
.mjop-aslabel-links  { text-anchor: end; }
.mjop-aslabel-rechts { text-anchor: start; }
.mjop-jaarlabel      { text-anchor: middle; }

.mjop-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: var(--ruimte-3); font-size: 13px; color: var(--tekst-zwak);
}
.mjop-legenda span { display: inline-block; margin-right: 4px; }
.mjop-legenda-staaf {
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--accent-rand); vertical-align: -1px;
}
.mjop-legenda-lijn   { width: 16px; height: 3px; background: var(--merk); }
.mjop-legenda-buffer { width: 16px; height: 0; border-top: 2px dashed var(--rood); }

/* Het jaar waarin het saldo de ondergrens raakt. Dat is het jaar dat het hele
   plan bepaalt, dus het mag opvallen in de tabel. */
.tabel tbody tr.mjop-krap td,
.tabel tbody tr.mjop-krap th { background: var(--oranje-zacht); }

/* De tooltip bij de reservegrafiek.

   Vervangt de native <title>-tooltip van SVG. Die kwam pas na ongeveer een
   seconde en verdween bij de kleinste muisbeweging — voor een grafiek waar je
   langs de jaren wilt strijken precies verkeerd, en er valt niets aan af te
   stellen. Deze verschijnt meteen, en het hoverdoel is de volle kolom in plaats
   van een staafje dat maar een paar pixels hoog kan zijn. */

.mjop-zone { fill: transparent; }
.mjop-kolom:hover .mjop-zone { fill: var(--vlak-blauw); opacity: .55; }

.mjop-tip { opacity: 0; pointer-events: none; }
.mjop-kolom:hover .mjop-tip { opacity: 1; }

.mjop-tip rect {
  fill: var(--tekst);
  opacity: .95;
}
.mjop-tip-regel {
  font-size: 12px; fill: #fff; font-family: inherit;
  paint-order: stroke;
}
.mjop-tip-kop { font-weight: 600; }

/* Wie liever geen bewegende dingen ziet, krijgt hem net zo goed — hij heeft
   geen overgang, dus hier valt niets uit te zetten. Wel de vulling van de zone
   iets rustiger. */
@media (prefers-reduced-motion: reduce) {
  .mjop-kolom:hover .mjop-zone { opacity: .35; }
}