/* Mijn werkomgeving — huisstijl van het kantoor.
   Opdracht: Times New Roman, familienamen in kleine kapitalen, logo van het kantoor, licht scherm,
   grote letters, één accentkleur. Rood enkel voor te doen of over tijd, groen voor gedaan.
   Typografie van een juridisch stuk: grote titels in gewone dikte, kopjes in kleine kapitalen,
   vet enkel voor dossiernummers. Geen kaders rond alles: lijsten en tabellen zijn geregeld met dunne lijnen. */
:root {
  --papier: #FFFFFF;
  --marge: #F3F4F6;           /* zijbalk en inlogscherm, koel grijs */
  --inkt: #1A1D21;
  --zacht: #5F6670;
  --lijn: #DDE0E5;
  --lijn-sterk: #B9BEC6;
  --accent: #1F3A5F;          /* de ene accentkleur: marineblauw */
  --accent-donker: #152A46;
  --accent-licht: #EEF2F7;
  --rood: #B42318;
  --groen: #2E6B34;
  --zitting: #1F3A5F;
  --kantoorgesprek: #7A5C12;  /* kantoorgesprek: eigen categorie in de agenda */
  --kantoorgesprek-licht: #F6F1E4;
  --letter: "Times New Roman", Tinos, Times, serif;
  --straal: 3px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font-family: var(--letter); font-size: 20px; line-height: 1.5;
  font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }

/* ---------- letter ---------- */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--inkt); }
h1 { font-size: 2.4rem; font-weight: 400; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; font-weight: 400; font-variant: small-caps; letter-spacing: .06em; margin-top: 1.8em; padding-bottom: .3em; border-bottom: 1px solid var(--lijn); }
h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.2em; }
p { margin: 0 0 .8em; max-width: 46em; }
b, strong { font-weight: 700; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-donker); }
.fn { font-variant: small-caps; letter-spacing: .04em; }
.zacht { color: var(--zacht); }
.klein { font-size: .82rem; line-height: 1.45; }
td, .week, .maand, .meta, .datum { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- velden ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  font-size: 1rem; border: 1px solid var(--lijn-sterk); background: var(--papier);
  border-radius: var(--straal); padding: 9px 12px; max-width: 100%; transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: #8F96A0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 58, 95, .14); }
textarea { width: 100%; min-height: 5em; resize: vertical; line-height: 1.45; }
label { display: block; font-size: .88rem; color: var(--zacht); margin: .9em 0 .3em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- knoppen ----------
   .knop            hoofdactie: marineblauw vlak
   .knop.zacht      tweede actie: omlijnd
   .knop.zacht.klein  actie in een regel of tabel: als tekst, in kleine kapitalen */
.knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--straal);
  padding: 9px 20px; cursor: pointer; font-size: 1rem; letter-spacing: .01em; line-height: 1.2;
  transition: background .12s, border-color .12s, color .12s;
}
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
.knop.zacht { background: transparent; color: var(--accent); border-color: var(--lijn-sterk); }
.knop.zacht:hover { border-color: var(--accent); background: var(--accent-licht); }
.knop.klein { padding: 5px 12px; font-size: .9rem; }
.knop.zacht.klein { border-color: transparent; padding: 2px 4px; font-size: .92rem; text-decoration: underline; text-decoration-color: rgba(31, 58, 95, .3); text-underline-offset: 4px; }
.knop.zacht.klein:hover { background: none; text-decoration-color: currentColor; }
.knop:disabled { opacity: .45; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 1em; align-items: center; }

/* ---------- inloggen ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--marge); }
.login form { background: var(--papier); border: 1px solid var(--lijn); border-top: 4px solid var(--accent); border-radius: var(--straal); padding: 40px 44px 36px; width: min(480px, 100%); }
.login h1 { font-size: 2rem; margin: 6px 0 .4em; }
.login input { width: 100%; }
.login .knoppen { margin-top: 1.4em; }
.login .knoppen .knop { width: 100%; justify-content: center; padding: 11px 20px; }
.demo { border-top: 1px solid var(--lijn); margin-top: 26px; padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.demo > span.klein { grid-column: 1 / -1; margin-bottom: 4px; }
.demo > span.demo-groep { margin: 10px 0 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; }
.demo .knop.zacht.klein { justify-content: flex-start; padding: 5px 0; font-size: 1rem; }
.fout { color: var(--rood); display: block; margin-top: .8em; }

/* ---------- briefhoofd ---------- */
.merk { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.gevel { width: 42px; height: 50px; flex: none; background: var(--inkt); -webkit-mask: url(img/gevel.svg) center / contain no-repeat; mask: url(img/gevel.svg) center / contain no-repeat; }
.woordmerk { display: flex; flex-direction: column; line-height: 1.2; }
.woordmerk .boven, .woordmerk .onder { font-size: .68rem; letter-spacing: .14em; font-variant: small-caps; text-transform: lowercase; color: var(--zacht); }
.woordmerk .naam { font-size: 1.05rem; font-variant: small-caps; letter-spacing: .03em; white-space: nowrap; }

/* ---------- opbouw ---------- */
.app { display: grid; grid-template-columns: 296px 1fr; min-height: 100vh; }
.balk { background: var(--marge); border-right: 1px solid var(--lijn); padding: 28px 20px 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
.balk .merk { padding-bottom: 20px; border-bottom: 1px solid var(--lijn); }
.balk .titel { font-size: .85rem; font-variant: small-caps; letter-spacing: .08em; color: var(--zacht); margin: 0 0 2px; max-width: none; }
.balk .wie { font-size: 1.05rem; margin-bottom: 18px; }
.balk label { margin-top: 0; }
.balk select { width: 100%; margin-bottom: 18px; background: var(--papier); }
.menu { list-style: none; margin: 0 -8px; padding: 0; }
.menu li { margin: 0; }
.menu button {
  display: flex; align-items: baseline; justify-content: space-between; width: 100%; text-align: left;
  background: none; border: 0; padding: 8px 12px; border-radius: var(--straal); cursor: pointer; font-size: 1.02rem; color: var(--inkt);
}
.menu button:hover { background: rgba(31, 58, 95, .06); }
.menu button[aria-current="page"] { background: var(--papier); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--lijn); }
.menu .sub { list-style: none; margin: 2px 0 8px 14px; padding: 0 0 0 10px; border-left: 1px solid var(--lijn-sterk); }
.menu .sub button { font-size: .94rem; padding: 6px 10px; }
.menu .pijl { color: var(--zacht); font-size: .8rem; }
.menu button.meer { color: var(--zacht); font-size: .95rem; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--lijn); border-radius: 0; }
.balk .onderaan { margin-top: auto; border-top: 1px solid var(--lijn); padding-top: 16px; }
.balk .onderaan p { margin-top: 10px !important; }
.inhoud { padding: 48px 56px 80px; max-width: 1000px; width: 100%; }
.kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--inkt); padding-bottom: 14px; margin-bottom: 28px; }
.kop > div:first-child { display: flex; flex-direction: column-reverse; }
.kop > div:first-child > .zacht { font-size: .9rem; font-variant: small-caps; letter-spacing: .07em; margin-bottom: 4px; }
.kop h1 { margin: 0; }
.menuknop { display: none; }

/* ---------- lijsten: geregeld, zonder kaders ---------- */
.lijst { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid var(--lijn); }
.lijst > li { border-bottom: 1px solid var(--lijn); padding: 14px 2px; margin: 0; }
.lijst > li.klaar { color: var(--zacht); }
.regel { display: flex; gap: 8px 16px; align-items: baseline; flex-wrap: wrap; }
.regel .rest { flex: 1; min-width: 220px; }
.leeg { color: var(--zacht); font-style: italic; }

table { border-collapse: collapse; width: 100%; margin: .4em 0 1.4em; }
th, td { border: 0; border-bottom: 1px solid var(--lijn); padding: 12px 14px 12px 0; text-align: left; vertical-align: top; }
th { font-weight: 400; font-size: .85rem; font-variant: small-caps; letter-spacing: .06em; color: var(--zacht); border-bottom: 1px solid var(--inkt); padding-top: 4px; padding-bottom: 8px; }
td:last-child, th:last-child { padding-right: 0; }
tr:hover td { background: rgba(31, 58, 95, .025); }

.vak { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 18px 22px; margin-bottom: 16px; }
.formulier { border-top: 1px solid var(--lijn-sterk); padding: 6px 0 4px; margin: 28px 0 16px; }
.formulier h3 { font-size: 1.05rem; font-weight: 700; margin: .9em 0 .2em; }
.formulier .rij { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: flex-end; }
.formulier .rij > div { flex: 1; min-width: 170px; }
.formulier input:not([type=checkbox]):not([type=radio]), .formulier select { width: 100%; }
td .formulier, li .formulier { border-top: 0; margin: 0; padding: 0; }

/* status: rood te doen of over tijd, groen gedaan */
.te-doen { color: var(--rood); font-weight: 700; }
.gedaan { color: var(--groen); font-weight: 700; }
.vinkje { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-size: 1rem; color: var(--inkt); margin: 0; font-variant: normal; letter-spacing: 0; }
.vinkje input { width: 20px; height: 20px; accent-color: var(--groen); flex: none; }

/* ---------- berichten ---------- */
.gesprek { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.gesprek > .zacht.klein { align-self: center; font-variant: small-caps; letter-spacing: .06em; margin-top: 8px; }
.bericht { max-width: 76%; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 12px 16px; }
.bericht.mijn { align-self: flex-end; background: var(--accent-licht); border-color: transparent; }
.bericht .meta { font-size: .78rem; color: var(--zacht); margin-top: 6px; }
.bericht .van { font-size: .9rem; margin-bottom: 4px; }
.melding { background: var(--accent-licht); border: 0; border-left: 3px solid var(--accent); border-radius: 0 var(--straal) var(--straal) 0; padding: 14px 18px; margin: 12px 0 20px; }
.melding p { margin-bottom: .5em; }

/* ---------- agenda ---------- */
.agendanav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.agendanav .periode { font-weight: 700; margin: 0 8px; }
.afspraak { border-left: 3px solid var(--lijn-sterk); padding-left: 14px !important; }
.afspraak.zitting { border-left-color: var(--zitting); }
.afspraak.kantoorgesprek { border-left-color: var(--kantoorgesprek); background: var(--kantoorgesprek-licht); }
.soortnaam { font-size: .82rem; font-variant: small-caps; letter-spacing: .06em; }
.soortnaam.zitting { color: var(--zitting); }
.soortnaam.kantoorgesprek { color: var(--kantoorgesprek); }
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; }
.week .dag { background: var(--papier); border-right: 1px solid var(--lijn); padding: 12px 10px; min-height: 180px; }
.week .dag:last-child { border-right: 0; }
.maand .dag { background: var(--papier); border: 1px solid var(--lijn); border-radius: 2px; padding: 6px 8px; min-height: 104px; }
.week .dag h3, .maand .dag h3 { font-size: .85rem; font-weight: 400; font-variant: small-caps; letter-spacing: .05em; color: var(--zacht); margin: 0 0 10px; }
.week .item, .maand .item { font-size: .86rem; line-height: 1.35; border: 0; border-left: 2px solid var(--lijn-sterk); padding: 3px 0 3px 8px; margin-bottom: 8px; cursor: pointer; background: none; text-align: left; width: 100%; display: block; }
.week .item:hover, .maand .item:hover { background: var(--accent-licht); }
.week .item.zitting, .maand .item.zitting { border-left-color: var(--zitting); }
.week .item.kantoorgesprek, .maand .item.kantoorgesprek { border-left-color: var(--kantoorgesprek); background: var(--kantoorgesprek-licht); }
.maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.maand .dag.anders { background: transparent; border-style: dashed; color: var(--zacht); }
.week .dag.vandaag { box-shadow: inset 0 3px 0 var(--accent); background: #FAFBFC; }
.week .dag.vandaag h3 { color: var(--accent); font-weight: 700; }
.maand .dag.vandaag { border: 2px solid var(--accent); }
.maand .kopdag { font-size: .8rem; font-variant: small-caps; letter-spacing: .05em; color: var(--zacht); text-align: center; }

/* ---------- welkom ---------- */
.welkom h1 { font-size: 2.8rem; margin-bottom: .15em; }
.welkom .datum { color: var(--zacht); font-size: 1rem; font-variant: small-caps; letter-spacing: .07em; margin-bottom: 1.6em; padding-bottom: 1.2em; border-bottom: 1px solid var(--inkt); }
.welkom .vandaag { font-size: 1.1rem; }
.dagoverzicht { list-style: none; margin: -.5em 0 1.4em; padding: 0; }
.dagoverzicht li { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.dagoverzicht .uur { font-variant-numeric: tabular-nums lining-nums; color: var(--zacht); }
.dagoverzicht .kantoorgesprek .uur { color: var(--kantoorgesprek); }
.dagoverzicht .zitting .uur { color: var(--zitting); font-weight: 700; }

.tekst ul, .tekst ol { padding-left: 1.3em; max-width: 46em; }
.tekst li { margin-bottom: .35em; }
.tekst table td { font-weight: 400; }
.tekst b.bk { font-size: 1.1rem; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--inkt); color: #fff; padding: 12px 20px; border-radius: var(--straal); font-size: .95rem; z-index: 10; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(26, 29, 33, .18); }

/* ---------- personen en accounts ---------- */
.wachtwoord { font-family: Consolas, "Courier New", monospace; font-size: 1.5rem; letter-spacing: .08em; background: var(--papier); border: 1px solid var(--lijn-sterk); border-radius: var(--straal); display: inline-block; padding: 6px 16px; margin: 4px 0 8px; }
.personen .knoppen { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; }

/* ---------- telefoon ---------- */
@media (max-width: 820px) {
  body { font-size: 18px; }
  h1 { font-size: 1.9rem; }
  .welkom h1 { font-size: 2.1rem; }
  .app { grid-template-columns: 1fr; }
  .balk { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 5; transform: translateX(-102%); transition: transform .2s; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .app.menu-open .balk { transform: none; box-shadow: 0 0 0 100vmax rgba(26,29,33,.3); }
  .menuknop { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--lijn-sterk) !important; padding: 6px 14px !important; text-decoration: none !important; }
  .inhoud { padding: 20px 16px 56px; }
  .kop { align-items: flex-start; }
  .week { grid-template-columns: 1fr; }
  .week .dag { min-height: 0; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .week .dag:last-child { border-bottom: 0; }
  .maand { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .maand .dag { min-height: 60px; font-size: .7rem; padding: 2px; }
  .maand .item { font-size: .7rem; padding: 1px 3px; }
  .bericht { max-width: 92%; }
  .login form { padding: 28px 22px; }
  .demo { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .balk, .knop, input, select, textarea { transition: none; } }

/* ---------- afdrukken ---------- */
@media print {
  body { background: #fff; font-size: 12pt; }
  .app { display: block; }
  .balk, .menuknop, .formulier, .knop, .knoppen, .toast, .geen-druk { display: none !important; }
  .inhoud { padding: 0; max-width: none; }
  .lijst > li, .vak, .week .dag, .maand .dag { break-inside: avoid; border-color: #999; }
  .week { grid-template-columns: repeat(5, 1fr); }
  tr:hover td { background: none; }
  .druk-kop { display: block !important; }
  a { color: inherit; text-decoration: none; }
}
.druk-kop { display: none; margin-bottom: 12px; font-size: 10pt; }

/* fijnafstelling */
h2 + .lijst, h2 + table { border-top: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 44px; }
input[type=file] { padding: 7px 10px; }
.kop + .formulier { border-top: 0; margin-top: 0; padding-top: 0; }

/* =========================================================================
   Eilanden: de zijbalk en de inhoud zijn elk een zwevend paneel op een getint
   canvas, samen het hele scherm. De inhoud scrolt binnen het eigen paneel,
   zoals in een platform. Binnen een paneel blijven de lijsten geregeld, zonder
   kaders in kaders; enkel de welkomstpagina heeft tegels.
   ========================================================================= */
:root { --canvas: #E6E9EE; --eiland-straal: 16px; --eiland-rand: #D6DAE1; --tegel: #F6F7F9; }
body { background: var(--canvas); }
.app { grid-template-columns: 288px minmax(0, 1fr); gap: 12px; padding: 12px; height: 100vh; min-height: 0; }
.balk {
  position: relative; top: auto; height: auto; min-height: 0;
  background: var(--papier); border: 1px solid var(--eiland-rand); border-radius: var(--eiland-straal);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
  padding: 22px 18px 18px;
}
.inhoud {
  max-width: none; height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C3C8D0 transparent;
  background: var(--papier); border: 1px solid var(--eiland-rand); border-radius: var(--eiland-straal);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
  padding: 0 48px 64px;
}
/* koptekst van de pagina: blijft bovenaan staan tijdens het scrollen */
.kop {
  position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  margin: 0 -48px 28px; padding: 28px 48px 16px; border-bottom: 1px solid var(--lijn);
}
.kop h1 { font-size: 2.1rem; }
.inhoud > .druk-kop + .welkom, .inhoud > .druk-kop + .menuknop + .welkom { padding-top: 40px; }
.welkom { padding-top: 40px; }

/* zijbalk: actief onderdeel als zachte pil */
.menu button[aria-current="page"] { background: var(--accent-licht); color: var(--accent); box-shadow: none; font-weight: 700; }
.menu .sub button[aria-current="page"] { background: transparent; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.balk .merk { margin-bottom: 18px; padding-bottom: 18px; }
.balk select { border-radius: 10px; }

/* velden en knoppen iets ronder, passend bij de panelen */
input, select, textarea { border-radius: 8px; }
.knop { border-radius: 8px; }

/* welkom: tegels die de breedte vullen */
.welkom h1 { font-size: 2.6rem; }
.welkom .datum { border-bottom: 0; padding-bottom: 0; margin-bottom: 1em; }
.welkom p { color: var(--zacht); }
.tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.tegel { background: var(--tegel); border-radius: 12px; padding: 18px 22px 16px; display: flex; flex-direction: column; min-height: 240px; }
.tegel h2 { margin: 0 0 12px; border-bottom: 0; padding-bottom: 0; font-size: 1.15rem; }
.tegel p { margin-bottom: .5em; }
.tegel .dagoverzicht { margin: 0; }
.tegel .dagoverzicht li { grid-template-columns: 3.6em 1fr; padding: 8px 0; border-bottom-color: #E4E7EC; }
.tegel .dagoverzicht li:last-child { border-bottom: 0; }
.tegel .waar { display: block; }
.tegel .kort { list-style: none; margin: 0; padding: 0; }
.tegel .kort li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid #E4E7EC; }
.tegel .kort li:last-child { border-bottom: 0; }
.tegel-voet { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tegel-voet .knop.zacht.klein { padding-left: 0; }

/* overzicht van kantoorhoofd en kantoormanager: lijst over de volle breedte */
.inhoud > .welkom + h2 { margin-top: 1.4em; }

/* inloggen op het canvas */
.login { background: var(--canvas); }
.login form { border-radius: var(--eiland-straal); border: 1px solid var(--eiland-rand); border-top: 1px solid var(--eiland-rand); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06); }
.login form::before { content: ""; display: block; height: 4px; margin: -40px -44px 32px; background: var(--accent); border-radius: var(--eiland-straal) var(--eiland-straal) 0 0; }

@media (max-width: 1100px) { .tegels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .app { padding: 0; gap: 0; height: auto; display: block; }
  .balk { position: fixed; border-radius: 0 var(--eiland-straal) var(--eiland-straal) 0; height: 100vh; }
  .inhoud { height: auto; min-height: 100vh; overflow: visible; border-radius: 0; border: 0; box-shadow: none; padding: 0 16px 56px; }
  .kop { margin: 0 -16px 20px; padding: 16px 16px 12px; }
  .welkom { padding-top: 16px; }
  .menuknop { margin-top: 16px; }
  .tegels { grid-template-columns: 1fr; }
  .tegel { min-height: 0; }
  .login form::before { margin: -28px -22px 24px; }
}
@media print {
  body { background: #fff; }
  .app { padding: 0; height: auto; display: block; }
  .inhoud { height: auto; overflow: visible; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .kop { position: static; margin: 0 0 16px; padding: 0 0 8px; backdrop-filter: none; }
  .tegel { background: none; border: 1px solid #999; }
}
.week { border-radius: 12px; }
.login form { overflow: hidden; }
.login form::before { border-radius: 0; }
@media (max-width: 820px) { .welkom { padding-top: 4px; } .welkom h1 { margin-top: 8px; } }
.bericht { border-radius: 12px; } .bericht.mijn { border-bottom-right-radius: 4px; } .bericht:not(.mijn) { border-bottom-left-radius: 4px; } .melding { border-radius: 0 12px 12px 0; }

/* =========================================================================
   Letter: STIX Two Text, op maat van Times getekend, met echte kleine
   kapitalen (SIL Open Font License, fonts/OFL.txt). Times New Roman blijft
   de terugvaloptie.
   ========================================================================= */
@font-face { font-family: "STIX Two Text"; src: url(fonts/stix2text-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/stix2text-italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/stix2text-bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/stix2text-bolditalic.woff) format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
:root { --letter: "STIX Two Text", "Times New Roman", Times, serif; }
body { font-size: 19px; }
/* echte kleine kapitalen: geen nagebootste */
* { font-synthesis: weight style; }
.fn { letter-spacing: .03em; }
h2, th, .kop > div:first-child > .zacht, .welkom .datum, .soortnaam, .balk .titel { letter-spacing: .05em; }

/* =========================================================================
   Briefhoofd als handtekening
   ========================================================================= */
/* zijbalk: gevel boven het woordmerk, zoals op het briefpapier */
.balk .merk { flex-direction: column; align-items: flex-start; gap: 10px; }
.balk .gevel { width: 76px; height: 48px; background: var(--accent); -webkit-mask-position: left center; mask-position: left center; }
.balk .woordmerk .naam { font-size: 1.12rem; }

/* inloggen: één kaart in het midden, het briefhoofd bovenaan op marineblauw */
.login { display: grid; grid-template-columns: min(420px, 100%); align-content: center; justify-content: center; place-items: stretch; padding: 24px 16px; gap: 0; font-size: 17px; }
.login-merk { background: var(--accent); border-radius: var(--eiland-straal) var(--eiland-straal) 0 0; padding: 28px 24px 24px; display: flex; color: #fff; }
.login-kader { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-merk .gevel { width: 150px; height: 96px; background: #fff; opacity: .95; }
.login-merk .woordmerk { align-items: center; margin-top: 14px; }
.login-merk .woordmerk .naam { font-size: 1.35rem; letter-spacing: .03em; color: #fff; }
.login-merk .woordmerk .boven, .login-merk .woordmerk .onder { color: rgba(255, 255, 255, .75); font-size: .72rem; letter-spacing: .18em; }
.login-vak { background: var(--papier); border-radius: 0 0 var(--eiland-straal) var(--eiland-straal); border: 1px solid var(--eiland-rand); border-top: 0; padding: 28px 32px 30px; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); }
.login .login-vak form { border: 0; box-shadow: none; padding: 0; width: 100%; overflow: visible; }
.login .login-vak form::before { display: none; }
.login .login-vak form .merk { display: none; }
.login h1 { font-size: 1.6rem; margin: 0 0 .7em; }
@media (max-width: 480px) {
  .login { padding: 0; align-content: start; }
  .login-merk { border-radius: 0; }
  .login-vak { border-radius: 0; border: 0; padding: 24px 16px; min-height: 60vh; }
}

/* =========================================================================
   Werkbladen: tabellen die je meteen bewerkt, zoals in Excel
   ========================================================================= */
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.raster-vak { overflow-x: auto; border: 1px solid var(--lijn-sterk); border-radius: 10px; background: var(--papier); margin: .4em 0 1em; }
table.raster { margin: 0; font-size: .9rem; min-width: 760px; }
.raster th, .raster td { border: 0; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 0; vertical-align: top; }
.raster th:last-child, .raster td:last-child { border-right: 0; }
.raster tbody tr:last-child td { border-bottom: 0; }
.raster th { background: #F3F5F8; color: var(--accent); padding: 8px 10px; border-bottom: 1px solid var(--lijn-sterk); white-space: nowrap; position: sticky; top: 0; }
.raster td.leeg, .raster td.tekstcel { padding: 9px 10px; }
.raster td > input, .raster td > textarea, .raster td > select {
  width: 100%; min-width: 8em; border: 0; border-radius: 0; background: transparent; padding: 9px 10px; margin: 0;
  font: inherit; font-size: .9rem; color: var(--inkt); box-shadow: none; resize: vertical; min-height: 40px; display: block;
}
.raster td > textarea { min-width: 14em; line-height: 1.35; }
.raster td > input:hover, .raster td > textarea:hover, .raster td > select:hover { background: #F7F9FC; }
.raster td > input:focus, .raster td > textarea:focus, .raster td > select:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.raster td > input::placeholder, .raster td > textarea::placeholder { color: #A3A9B2; font-style: italic; }
.raster td .knoppen { padding: 6px 8px; flex-wrap: nowrap; gap: 6px; }
.raster .status { padding: 9px 10px; white-space: nowrap; }
.raster .status .vinkje { margin: 4px 0 0; font-weight: 400; }
.knoppen .zacht.klein { align-self: center; }
@media print {
  .raster-vak { border: 0; overflow: visible; }
  table.raster { min-width: 0; }
  .raster td > input, .raster td > textarea, .raster td > select { appearance: none; -webkit-appearance: none; resize: none; min-height: 0; padding: 4px 6px; }
}
.lijst > li > .persoonknop { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: transparent; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lijst > li > .persoonknop .rest { flex: 1; font-size: 1.1rem; }
.lijst > li > .persoonknop:hover, .lijst > li > .persoonknop:focus-visible { background: #F3F5F8; color: var(--accent); }
.formulier.rijform { border-top: 0; margin: 10px 0 16px; padding: 0; }
.rijform .rij { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.rijform .rij > div { flex: 0 1 auto; }
.rijform .rij > .breed { flex: 1 1 280px; }
.rijform .rij > .breed input { width: 100%; }
.rijform .knopvak .knop { margin: 0; }
.raster tr.klaar td { background: #F5F9F5; }
.raster tr.klaar td.tekstcel { color: var(--zacht); }
.tekst.groot { font-size: 1.12rem; line-height: 1.65; max-width: 70ch; }
.tekst.groot li { margin-bottom: .35em; }
.vak.oplichten { animation: oplichten 1.6s ease-out; }
@keyframes oplichten { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }

/* Gevel in de zijbalk als echte vector (een CSS-mask wordt in Chrome op 1x gerasterd en oogt korrelig) */
.balk .gevel.gevel-img { width: 100%; max-width: 240px; height: auto; background: none; -webkit-mask: none; mask: none; object-fit: contain; object-position: left center; display: block; }

/* Vrouwe Justitia in de zijbalk: wiegt zacht bij hover; na 1,5 minuut verschijnt een ballonnetje */
.justitia { position: relative; width: 120px; margin: 4px auto 16px; outline: none; }
.justitia img { display: block; width: 120px; height: auto; transform-origin: 50% 100%; }
.justitia:hover img, .justitia:focus-visible img { animation: wegen 3.2s ease-in-out infinite; }
@keyframes wegen { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.3deg); } }
.justitia .ballon { position: absolute; top: -2px; left: -6px; background: var(--papier, #fff); color: var(--accent); border: 1px solid var(--accent); border-radius: 10px; padding: 1px 7px; font-size: .68rem; line-height: 1.5; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(16, 24, 40, .12); animation: ballon .5s ease-out; pointer-events: none; }
.justitia .ballon::after { content: ""; position: absolute; left: 18px; bottom: -5px; width: 8px; height: 8px; background: inherit; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(45deg); }
.justitia .ballon[hidden] { display: none; }
@keyframes ballon { from { opacity: 0; transform: translateY(4px) scale(.9); } to { opacity: 1; transform: none; } }

/* Licht bewegende achtergrond achter de panelen */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 28%, rgba(31, 58, 95, .20), transparent 70%),
    radial-gradient(34% 30% at 82% 72%, rgba(96, 132, 182, .26), transparent 70%),
    radial-gradient(28% 26% at 62% 12%, rgba(190, 160, 100, .18), transparent 70%),
    radial-gradient(30% 28% at 30% 85%, rgba(120, 170, 160, .18), transparent 70%);
  animation: drijven 36s ease-in-out infinite alternate;
}
@keyframes drijven { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(5%, -4%, 0) rotate(8deg); } }
.lijst > li { padding: 11px 2px; }
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .justitia img, .justitia .ballon { animation: none !important; }
}
@media print { body::before, .justitia { display: none; } }
table.raster.dossiers { table-layout: fixed; min-width: 900px; }
.raster.dossiers td > input, .raster.dossiers td > textarea, .raster.dossiers td > select { min-width: 0; }
.raster.dossiers td .knoppen { flex-wrap: wrap; }
.raster.dossiers td .knoppen .knop { white-space: normal; }
.raster.dossiers th { white-space: normal; line-height: 1.25; }
.raster td > textarea { field-sizing: content; }

/* =========================================================================
   Eén zijbalk: alles zichtbaar, met ademruimte, Justitia boven Afmelden
   ========================================================================= */
@media (min-width: 821px) {
  .balk { padding: 16px 16px 12px; overflow-y: auto; scrollbar-width: none; }
  .balk::-webkit-scrollbar { display: none; }
  .balk .merk { gap: 7px; margin-bottom: 10px; padding-bottom: 10px; }
  .balk .gevel.gevel-img { max-width: 136px; }
  .balk .woordmerk .naam { font-size: 1.02rem; }
  .balk .wie { font-size: .95rem; margin-bottom: 9px; }
  .balk label { font-size: .82rem; margin-bottom: 3px; }
  .balk select { margin-bottom: 12px; }
  .menu button { padding: 4px 10px; font-size: .93rem; line-height: 1.3; }
  .menu .sub { margin: 1px 0 5px 12px; padding-left: 8px; }
  .menu .sub button { padding: 2px 10px; font-size: .87rem; }
  .balk .onderaan { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; padding-top: 8px; }
  .balk .onderaan .justitia { flex: 1 1 auto; min-height: 78px; width: 100%; margin: 0 0 8px; display: flex; justify-content: center; align-items: flex-end; }
  .balk .onderaan .justitia img { height: 100%; max-height: 220px; min-height: 78px; width: auto; max-width: 124px; object-fit: contain; }
  .balk .onderaan .voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .balk .onderaan .voet .zacht { font-size: .75rem; }
}
/* het logo groeit mee met de schermhoogte: groter waar er plaats is */
@media (min-width: 821px) and (min-height: 900px) { .balk .gevel.gevel-img { max-width: 190px; } }
@media (min-width: 821px) and (min-height: 1000px) { .balk .gevel.gevel-img { max-width: 236px; } }