/* MEO Magazine tool: rustige, lichte interface in de kleuren van MEO. Alle kleuren staan als variabelen in :root. */

:root {
  /* == Kleurenschema van de tool, in de kleuren van MEO (wijzijnmeo.nl) ==================================
     Merk: --global-palette1 #2daae1 (hemelsblauw) en --global-palette2 #032f50 (diep marineblauw) van de site;
     grijzen uit dezelfde palette (#1A202C, #4A5568, #EDF2F7, #F7FAFC). Knoppen op de site zijn pillen (border-radius 100px).
     Contrast (WCAG): wit op marine 13,8:1; marine op hemelsblauw 5,2:1; donker hemelsblauw #1678a6 op wit 4,9:1;
     wit op #0e2132 16,4:1; --zacht #5a6b80 op wit 5,5:1. Wit op het lichte hemelsblauw zelf (2,6:1) gebruiken we niet voor tekst. */
  --merk-marine: #032f50;          /* bovenbalk, primaire knoppen */
  --merk-marine-hover: #0a4a74;
  --merk-nacht: #0e2132;           /* rail, de donkerste vlakken */
  --merk-blauw: #2daae1;           /* accent: focus, actieve standen, markeringen (alleen met marine tekst) */
  --merk-blauw-donker: #1678a6;    /* accent als tekst of link op wit */
  --merk-blauw-licht: #e8f6fc;     /* zachte accentvlakken */
  --merk-blauw-lijn: #a9dcf2;
  --merk-op-donker: #cfe9f6;       /* zachte tekst op marine/nacht */
  --logo-url: none;                /* eventueel een logo-afbeelding van MEO; leeg = woordmerk met beeldmerk */
  --pil: 100px;                    /* knoppen als pil, zoals op de site */

  --achter: #f7fafc;
  --vlak: #ffffff;
  --vlak-2: #fafcfd;
  --lijn: #e2e8f0;
  --lijn-sterk: #cbd5e0;
  --tekst: #1a202c;
  --tekst-2: #4a5568;
  --zacht: #5a6b80;
  --heel-zacht: #8a97a8;
  --accent: var(--merk-marine);
  --accent-hover: var(--merk-marine-hover);
  --accent-zacht: var(--merk-blauw-licht);
  --accent-lijn: var(--merk-blauw-lijn);
  --accent-tekst: var(--merk-blauw-donker);
  --canvas: #e6ebf0;
  --goed: #13612e;
  --goed-zacht: #e5f3ea;
  --letop: #9a4a06;
  --letop-zacht: #fdf2e2;
  --stop: #b82105;
  --stop-zacht: #fcece8;
  --info-zacht: var(--merk-blauw-licht);
  --mijn: var(--merk-blauw-donker);
  --focus: 0 0 0 3px rgba(45, 170, 225, .45);
  --r: 8px;
  --r-klein: 6px;
  --schaduw-1: 0 1px 2px rgba(3, 47, 80, .06), 0 1px 1px rgba(3, 47, 80, .04);
  --schaduw-2: 0 4px 16px rgba(3, 47, 80, .08), 0 1px 3px rgba(3, 47, 80, .06);
  --schaduw-3: 0 16px 48px rgba(3, 47, 80, .18), 0 2px 8px rgba(3, 47, 80, .08);
  --pagina-schaduw: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 22px rgba(3, 30, 50, .13);
  --font: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tekst);
  background: var(--achter);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 15px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
kbd {
  font: 500 11px/1 var(--font); padding: 3px 5px; border: 1px solid var(--lijn-sterk); border-bottom-width: 2px;
  border-radius: 4px; background: var(--vlak); color: var(--tekst-2); min-width: 18px; text-align: center; display: inline-block;
}
.zacht { color: var(--zacht); }
.klein { font-size: 12.5px; }
.rood { color: var(--stop); }
.pad { padding: 12px 16px; }
.vul { flex: 1; }
.ico { flex: none; display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); }

/* -- knoppen ---------------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-klein);
  border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--tekst);
  font-weight: 500; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--schaduw-1); transition: background .12s, border-color .12s, color .12s;
}
.knop:hover:not(:disabled) { background: var(--vlak-2); border-color: #c4c4cb; }
.knop:active:not(:disabled) { transform: translateY(.5px); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.primair:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.knop.zacht-primair { background: var(--accent-zacht); border-color: var(--accent-lijn); color: var(--accent); }
.knop.zacht-primair:hover:not(:disabled) { background: #e2e7f3; }
.knop.goed { color: var(--goed); border-color: #b9dcc9; background: var(--goed-zacht); }
.knop.goed:hover:not(:disabled) { background: #d8eee2; }
.knop.gevaar { background: var(--stop); border-color: var(--stop); color: #fff; }
.knop.gevaar:hover:not(:disabled) { background: #9d1d24; }
.knop.klein { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.knop.groot { height: 40px; padding: 0 18px; font-size: 14.5px; }
.knop.vol { width: 100%; }
.knop.actief { background: var(--accent-zacht); border-color: var(--accent-lijn); color: var(--accent); }
.ico-knop {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none;
  border-radius: var(--r-klein); cursor: pointer; color: var(--tekst-2); flex: none;
}
.ico-knop:hover:not(:disabled) { background: rgba(0, 0, 0, .055); color: var(--tekst); }
.ico-knop:disabled { opacity: .35; cursor: not-allowed; }
.link-knop {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  color: var(--accent); font-weight: 500; font-size: 13px; text-decoration: none;
}
.link-knop:hover { text-decoration: underline; }
.link-knop.gevaar { color: var(--stop); }
.knoppenrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.knoppengroep { display: flex; align-items: center; gap: 4px; }

/* -- velden ------------------------------------------------------------------------ */
input[type=text], input[type=email], input[type=password], input[type=date], input:not([type]), textarea, select {
  width: 100%; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak);
  padding: 8px 10px; font-size: 14px; transition: border-color .12s, box-shadow .12s;
}
select { height: 34px; padding: 0 30px 0 10px; appearance: none; cursor: pointer;
  background: var(--vlak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c6c78' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
textarea { resize: vertical; line-height: 1.5; min-height: 64px; }
input:hover, textarea:hover, select:hover { border-color: #c2c2c9; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mijn); box-shadow: var(--focus); }
input:disabled, textarea:disabled { background: var(--vlak-2); color: var(--tekst-2); }
input::placeholder, textarea::placeholder { color: var(--heel-zacht); }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld > label, .veld-kop label, .eig-label { font-weight: 550; font-size: 13px; color: var(--tekst-2); }
.veld-kop { display: flex; justify-content: space-between; align-items: center; }
.veld-hulp { font-size: 12.5px; color: var(--zacht); line-height: 1.45; }
.velden { display: flex; flex-direction: column; gap: 16px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--r); cursor: pointer; }
.keuze:has(input:checked) { border-color: var(--accent); background: var(--accent-zacht); }
.keuze input { margin: 3px 0 0; accent-color: var(--accent); }
.keuze > span { display: flex; flex-direction: column; }
.formulier-fout { background: var(--stop-zacht); color: var(--stop); padding: 9px 12px; border-radius: var(--r-klein); font-size: 13.5px; }

/* -- labels en meldingen ------------------------------------------------------------- */
.label {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; font-weight: 550; background: #f0f0f2; color: var(--tekst-2); white-space: nowrap; flex: none;
}
.label.goed { background: var(--goed-zacht); color: var(--goed); }
.label.wacht { background: var(--letop-zacht); color: var(--letop); }
.label.opm { background: var(--accent-zacht); color: var(--accent); }
.melding {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border-radius: var(--r-klein);
  font-size: 13px; line-height: 1.45; background: var(--info-zacht); color: var(--tekst-2);
}
.melding .ico { margin-top: 1px; }
.melding.stop { background: var(--stop-zacht); color: #8e1a20; }
.melding.let-op { background: var(--letop-zacht); color: #7c4106; }
.melding.goed { background: var(--goed-zacht); color: #0e5838; }
.melding.info { background: var(--info-zacht); }
.ernst { display: inline-flex; flex: none; }
.ernst.stop { color: var(--stop); }
.ernst.letop { color: var(--letop); }

/* -- avatars ------------------------------------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: var(--kleur); color: #fff; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 0 0 2px var(--vlak); user-select: none;
}
.avatar.agent {
  border-radius: 30%;
  background: linear-gradient(135deg, var(--kleur), #d97757);
  background: #d97757;
}
.avatar.leeg { background: #efeff1; color: var(--zacht); box-shadow: none; }
.avatar-knop { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: flex; }
.gebruiker { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--r); box-shadow: var(--schaduw-2); padding: 6px; z-index: 50;
}
.menu-kop { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--lijn); margin-bottom: 6px; font-size: 13px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-klein); cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--achter); }

/* -- kopbalk ------------------------------------------------------------------------- */
.kopbalk {
  height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 18px;
  background: var(--vlak); border-bottom: 1px solid var(--lijn); position: relative; z-index: 20;
}
.merk { display: flex; align-items: center; gap: 9px; font-weight: 650; text-decoration: none; letter-spacing: -0.01em; font-size: 14.5px; }
.nav { display: flex; gap: 2px; margin-left: 10px; }
.nav-link { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-klein); text-decoration: none; color: var(--zacht); font-weight: 500; }
.nav-link:hover { color: var(--tekst); background: var(--achter); }
.nav-link.actief { color: var(--tekst); background: var(--achter); }
.kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* -- start en mensen ------------------------------------------------------------------- */
.pagina-scherm { min-height: 100vh; display: flex; flex-direction: column; }
.start-lijf { width: 100%; max-width: 1180px; margin: 0 auto; padding: 36px 32px 72px; }
.start-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.start-kop h1 { font-size: 26px; margin-bottom: 4px; }
.blad-blok { margin-bottom: 40px; }
.blad-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.blad-kop h2 { font-size: 17px; display: inline; margin-right: 10px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.editie-kaart {
  display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px;
  overflow: hidden; text-decoration: none; box-shadow: var(--schaduw-1); transition: box-shadow .15s, transform .15s, border-color .15s;
}
.editie-kaart:hover { box-shadow: var(--schaduw-2); border-color: var(--lijn-sterk); transform: translateY(-1px); }
.omslag { background: var(--canvas); padding: 18px 18px 0; display: flex; justify-content: center; align-items: flex-end; aspect-ratio: 1 / 1.08; overflow: hidden; }
.omslag img { width: 78%; aspect-ratio: 210 / 297; object-fit: cover; box-shadow: var(--pagina-schaduw); background: #fff; }
.omslag-leeg { width: 78%; aspect-ratio: 210/297; background: #fff; box-shadow: var(--pagina-schaduw); display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; color: var(--heel-zacht); font-size: 12px; }
.kaart-tekst { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--lijn); }
.kaart-titel { font-weight: 600; }
.kaart-regels { display: flex; gap: 6px; flex-wrap: wrap; }
.kaart-deadline { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--zacht); }
.kaart-deadline.krap { color: var(--letop); }
.kaart-deadline.laat { color: var(--stop); }
.stand-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 550; background: #f0f0f2; color: var(--tekst-2); }
.stand-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; opacity: .8; }
.stand-label.s-aanleveren { background: #fdf2e2; color: #8a4a06; }
.stand-label.s-opmaak { background: #eef0fb; color: #3442a0; }
.stand-label.s-proef { background: #f4ecfb; color: #6a2f9a; }
.stand-label.s-druk { background: var(--goed-zacht); color: var(--goed); }
.leeg-rij { color: var(--zacht); padding: 14px 0; font-size: 13.5px; }
.leeg-staat { text-align: center; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto; }
.leeg-staat.klein { padding: 36px 20px; }
.leeg-staat p { color: var(--zacht); }
.leeg-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--vlak); border: 1px solid var(--lijn); display: flex; align-items: center; justify-content: center; color: var(--zacht); margin-bottom: 4px; }
.leeg-ico.goed { color: var(--goed); background: var(--goed-zacht); border-color: transparent; }
.laden-blok { display: flex; justify-content: center; padding: 60px; }
.laden-blok.klein { padding: 20px; }
.laden-scherm { height: 100vh; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; }
.draaier { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--lijn-sterk); border-top-color: var(--accent); animation: draai .8s linear infinite; }
.draaier.klein { width: 14px; height: 14px; border-width: 2px; }
.draaier.wit { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; display: inline-block; }
@keyframes draai { to { transform: rotate(360deg); } }

.mensen .rollen-uitleg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 28px; }
.rollen-uitleg > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--zacht); }
.rollen-uitleg b { color: var(--tekst); font-size: 13px; }
.org-blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; margin-bottom: 20px; box-shadow: var(--schaduw-1); }
.org-kop { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--lijn); }
.org-naam { display: flex; gap: 12px; align-items: center; }
.org-naam .zacht { font-size: 12.5px; }
.org-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-zacht); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tabel-rij { display: grid; grid-template-columns: 32px 1fr 130px auto; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--lijn); }
.tabel-rij:last-child { border-bottom: 0; }
.tabel-naam { display: flex; flex-direction: column; min-width: 0; }
.tabel-naam .zacht { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabel .leeg-rij { padding: 14px 18px; }
.uitgenodigd { background: var(--vlak-2); }
.rol-label { font-size: 12.5px; font-weight: 550; color: var(--tekst-2); }
.rol-label::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: #b8b8c0; vertical-align: 1px; }
.rol-label.r-beheerder::before { background: var(--accent); }
.rol-label.r-vormgever::before { background: var(--merk-blauw); }
.rol-label.r-redactie::before { background: #c2571a; }
.rol-label.r-eindredactie::before { background: #8a3a0e; }
.org-ico.agent { background: #fbeee9; color: #d97757; }
.rol-label.r-meelezer::before { background: #9a9aa5; }
.link-vak { display: flex; flex-direction: column; gap: 12px; }
.link-rij { display: flex; gap: 8px; }
.link-veld { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px !important; background: var(--vlak-2) !important; }

/* -- aanmelden ------------------------------------------------------------------------ */
.aanmeld-scherm { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--merk-blauw-licht), var(--achter)); }
.aanmeld-merk { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 18px; letter-spacing: -0.01em; }
.aanmeld-kaart { width: 100%; max-width: 400px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: var(--schaduw-2); padding: 30px 30px 26px; }
.formulier { display: flex; flex-direction: column; gap: 16px; }
.formulier h1 { font-size: 21px; }
.formulier > .zacht { margin-top: -8px; }
.aanmeld-voet { color: var(--zacht); font-size: 13px; }

/* -- vensters en meldingen -------------------------------------------------------------- */
.laag { position: fixed; inset: 0; background: rgba(18, 20, 32, .38); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; animation: infaden .14s ease-out; }
@keyframes infaden { from { opacity: 0; } }
.venster { width: 100%; max-width: 480px; background: var(--vlak); border-radius: 12px; box-shadow: var(--schaduw-3); display: flex; flex-direction: column; max-height: calc(100vh - 48px); animation: omhoog .16s ease-out; }
.venster.breed { max-width: 640px; }
@keyframes omhoog { from { transform: translateY(8px); opacity: .6; } }
.venster-kop { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 6px 22px; }
.venster-kop h2 { font-size: 17px; }
.venster-lijf { padding: 8px 22px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.venster-tekst { color: var(--tekst-2); }
.venster-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--lijn); background: var(--vlak-2); border-radius: 0 0 12px 12px; }
.vinklijst, .mist-lijst { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--tekst-2); }
.vinklijst { list-style: none; padding: 0; }
.vinklijst li::before { content: "✓"; color: var(--goed); font-weight: 700; margin-right: 8px; }
.mini-draden { display: flex; flex-direction: column; gap: 8px; }
.mini-draad { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }

.toasts { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 560px;
  padding: 9px 8px 9px 14px; border-radius: 10px; background: var(--merk-nacht); color: #fff; box-shadow: var(--schaduw-3);
  font-size: 13.5px; animation: toastIn .2s ease-out;
}
.toast.weg { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.toast-tekst { flex: 1; }
.toast.t-fout { background: #fff; color: #8e1a20; border: 1px solid #f2c4c7; }
.toast.t-fout .ico { color: var(--stop); }
.toast.t-goed .ico { color: #7ddca8; }
.toast.t-ander { background: #fff; color: var(--tekst); border: 1px solid var(--lijn); }
.toast .avatar { box-shadow: none; }
.toast-dicht { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
.toast-dicht:hover { opacity: 1; }

/* -- panelen --------------------------------------------------------------------------------- */
.paneel { background: var(--vlak); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.paneel.links { border-right: 1px solid var(--lijn); }
.paneel.rechts { border-left: 1px solid var(--lijn); }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; flex: none; }
.paneel-kop h2 { font-size: 13.5px; }
.paneel-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--lijn); flex: none; }
.paneel-tab { border: 0; background: none; padding: 8px 10px 10px; font-weight: 550; font-size: 13px; color: var(--zacht); cursor: pointer; display: flex; gap: 6px; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.paneel-tab:hover { color: var(--tekst); }
.paneel-tab.actief { color: var(--tekst); border-bottom-color: var(--accent); }
.paneel-lijf { overflow: auto; flex: 1; min-height: 0; }
.leeg-paneel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 18px 18px; color: var(--zacht); }
.leeg-paneel b { color: var(--tekst); }

.segment { display: inline-flex; background: #f0f0f2; border-radius: 7px; padding: 2px; gap: 2px; }
.segment button { border: 0; background: none; padding: 5px 12px; border-radius: 5px; font-size: 13px; font-weight: 550; color: var(--zacht); cursor: pointer; min-width: 38px; }
.segment button:hover { color: var(--tekst); }
.segment button.actief { background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw-1); }
.segment.klein button { padding: 3px 8px; font-size: 12px; min-width: 0; }

/* -- het blad: pagina's, vlakken en speldjes --------------------------------------------------------- */
.blad { position: relative; }
.blad.m-stapel { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 44px 48px 80px; min-width: max-content; }
.blad.m-enkel { display: flex; justify-content: center; }
.blad.m-raster { display: flex; flex-wrap: wrap; gap: 24px 18px; align-content: flex-start; justify-content: center; }
.blad.m-los { display: flex; justify-content: center; }
.spread { display: flex; align-items: flex-start; }
.pagina-plek { flex: none; }
.pagina-wrap { position: relative; flex: none; }
.pagina { position: relative; background: #fff; box-shadow: var(--pagina-schaduw); user-select: none; }
.spread .pagina-wrap + .pagina-wrap .pagina { box-shadow: var(--pagina-schaduw), inset 1px 0 0 rgba(0, 0, 0, .05); }
.pagina-beeld { width: 100%; height: 100%; display: block; pointer-events: none; }
.pagina.laadt { background: linear-gradient(100deg, #fff 30%, #f3f3f5 50%, #fff 70%) 0 0 / 300% 100%; animation: glans 1.4s linear infinite; }
.pagina.laadt .pagina-beeld { opacity: 0; }
@keyframes glans { from { background-position: 100% 0; } to { background-position: 0 0; } }
.pagina.fout::after { content: "Deze pagina kon niet getoond worden"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--zacht); font-size: 12px; }
.pagina-nr { position: absolute; top: calc(100% + 8px); left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.m-raster .pagina-nr { top: calc(100% + 4px); font-size: 10.5px; }
.zet-label {
  position: absolute; top: 10px; right: 10px; display: none; align-items: center; gap: 6px; z-index: 4;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--lijn); border-radius: 12px; padding: 3px 9px 3px 8px;
  font-size: 11.5px; color: var(--tekst-2); box-shadow: var(--schaduw-1);
}
.pagina.bezig .zet-label, .pagina.nieuw .zet-label { display: inline-flex; }
.pagina.bezig .pagina-beeld, .pagina.nieuw .pagina-beeld { opacity: .72; transition: opacity .3s; }
.m-raster .zet-label { top: 4px; right: 4px; font-size: 0; padding: 4px; gap: 0; }
.vlakken { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kader { position: absolute; }
.kader.zweef { outline: 1.5px solid var(--mijn); outline-offset: 0; }
.kader.gekozen { outline: 2px solid var(--mijn); background: color-mix(in srgb, var(--mijn) 6%, transparent); }
.kader.gemarkeerd { outline: 2px solid #e8590c; background: rgba(232, 89, 12, .07); }
.kader-naam { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; background: var(--mijn); color: #fff; font-size: 11px; font-weight: 550; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.speldjes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.speld {
  position: absolute; pointer-events: auto; width: 26px; height: 26px; margin: -26px 0 0 0;
  border-radius: 50% 50% 50% 2px; background: var(--kleur); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28); display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 0; transition: transform .12s;
  transform-origin: 0 100%;
}
.speld:hover, .speld.actief { transform: scale(1.18); z-index: 2; }
.speld.actief { box-shadow: 0 0 0 3px rgba(23, 35, 63, .25), 0 2px 6px rgba(0, 0, 0, .28); }
.speld.opgelost { background: #fff; color: var(--zacht); border-color: var(--lijn-sterk); opacity: .85; }
.speld.nieuw { background: var(--kleur); animation: plop .18s ease-out; }
.speld.puls { animation: pulsSpeld .9s ease-out 2; }
@keyframes plop { from { transform: scale(.4); } }
@keyframes pulsSpeld { 40% { transform: scale(1.4); } }
.m-raster .speld { width: 16px; height: 16px; margin-top: -16px; font-size: 8.5px; border-width: 1.5px; }
.opmerk-modus .pagina { cursor: crosshair; }
.blad-leeg { margin: 80px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--zacht); max-width: 320px; }
.blad-leeg p:first-of-type { color: var(--tekst); font-weight: 550; }

/* -- popover (opmerkingen) -------------------------------------------------------------------------- */
.popover { position: fixed; z-index: 90; width: 340px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: var(--schaduw-3); padding: 14px; animation: infaden .12s; max-height: calc(100vh - 80px); overflow: auto; }
.pop-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pop-kop .zacht { margin-left: auto; font-size: 12px; }
.pop-over { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--zacht); margin-bottom: 8px; }
.pop-voet { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pop-voet .knoppenrij { flex-wrap: nowrap; }
.pop-voet > .zacht { font-size: 11.5px; }
.opm-nieuw textarea, .opm-antwoord textarea { min-height: 56px; }
.draad { display: flex; flex-direction: column; gap: 8px; }
.draad-kop { display: flex; align-items: center; gap: 10px; }
.draad-nr { width: 24px; height: 24px; border-radius: 50% 50% 50% 2px; background: var(--kleur); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.draad-wie { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.draad-wie .zacht { font-size: 12px; }
.draad-plek { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.draad-tekst { white-space: pre-wrap; color: var(--tekst); }
.draad-tekst.kort { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.antwoord { display: flex; gap: 9px; padding-top: 8px; border-top: 1px solid var(--lijn); }
.antwoord .avatar { box-shadow: none; }
.antwoord-kop { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.antwoord-kop .zacht { font-size: 11.5px; }
.antwoord p { white-space: pre-wrap; font-size: 13.5px; }
.opm-antwoord { margin-top: 4px; }

/* -- Opmaak ----------------------------------------------------------------------------------------- */
.aantal-pag { font-weight: 400; }
.sectie-rij { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 8px; border-radius: var(--r); cursor: pointer; text-align: left; position: relative; }
.sectie-rij:hover { background: var(--achter); }
.sectie-rij.actief { background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent-lijn); }
.sectie-rij.in-beeld::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); }
.sectie-tekst { min-width: 0; flex: 1; }
.sectie-titel { font-weight: 550; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sectie-tekst .zacht { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sectie-meld { color: var(--letop); flex: none; }
.sectie-meld.stop { color: var(--stop); }
.eigenschappen { padding-bottom: 24px; }
.paneel-groep { display: flex; flex-direction: column; }
.eig-kop { padding: 16px 16px 14px; border-bottom: 1px solid var(--lijn); }
.eig-soort { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); margin-bottom: 4px; }
.eig-soort .link-knop { text-transform: none; letter-spacing: 0; font-size: 12px; }
.eig-kop h3 { font-size: 15px; }
.eig-meldingen { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 0; }
.eig-groep { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--lijn); }
.eig-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.schuif-waarde { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tekst); }
.schuif { display: flex; align-items: center; gap: 8px; }
input[type=range] { flex: 1; accent-color: var(--accent); }
.opzetten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opzet { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding: 8px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); cursor: pointer; font-size: 12px; text-align: left; line-height: 1.3; color: var(--tekst-2); }
.opzet:hover { border-color: var(--lijn-sterk); background: var(--vlak-2); }
.opzet.actief { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--tekst); background: var(--accent-zacht); }
.opzet-schets { height: 44px; background: #fff; border: 1px solid var(--lijn); border-radius: 3px; position: relative; overflow: hidden; display: block; }
.opzet-schets i { position: absolute; display: block; background: #d9dce4; }
.opzet-schets i:nth-child(1) { left: 6px; right: 6px; top: 5px; height: 16px; background: #b9c0d2; }
.opzet-schets i:nth-child(2) { left: 6px; width: 60%; top: 25px; height: 4px; background: #8892aa; }
.opzet-schets i:nth-child(3) { left: 6px; right: 6px; top: 32px; height: 7px; background: repeating-linear-gradient(#d9dce4 0 2px, transparent 2px 4px); }
.opzet-schets.kop-eerst i:nth-child(1) { top: 13px; height: 14px; }
.opzet-schets.kop-eerst i:nth-child(2) { top: 5px; }
.opzet-schets.foto-zij i:nth-child(1) { left: 6px; right: auto; width: 34%; height: 34px; }
.opzet-schets.foto-zij i:nth-child(2) { left: 44%; top: 7px; width: 44%; }
.opzet-schets.foto-zij i:nth-child(3) { left: 44%; top: 15px; height: 24px; }
.opzet-schets.foto-vol i:nth-child(1) { inset: 0; height: auto; }
.opzet-schets.foto-vol i:nth-child(2) { top: 26px; background: #fff; }
.opzet-schets.foto-vol i:nth-child(3) { display: none; }
.opzet-schets.foto-kader i:nth-child(1) { left: 5px; right: 5px; top: 5px; bottom: 5px; height: auto; outline: 3px solid #b9c0d2; background: #d9dce4; }
.opzet-schets.foto-kader i:nth-child(2), .opzet-schets.foto-kader i:nth-child(3) { display: none; }
.opzet-schets.inhoud-rechts i:nth-child(1) { left: auto; right: 5px; width: 30%; top: 5px; height: 34px; background: #e3e6ee; }
.opzet-schets.inhoud-rechts i:nth-child(2) { width: 50%; top: 6px; }
.opzet-schets.inhoud-rechts i:nth-child(3) { right: 40%; top: 14px; height: 24px; }
.opzet-schets.inhoud-onder i:nth-child(1) { top: auto; bottom: 4px; height: 10px; background: #e3e6ee; }
.opzet-schets.inhoud-onder i:nth-child(2) { top: 6px; }
.opzet-schets.inhoud-onder i:nth-child(3) { top: 13px; height: 14px; }
.opzet-schets.kaders i:nth-child(1) { right: 52%; height: 15px; }
.opzet-schets.kaders i:nth-child(2) { left: 52%; right: 6px; width: auto; top: 5px; height: 15px; background: #b9c0d2; }
.opzet-schets.kaders i:nth-child(3) { top: 24px; height: 15px; right: 52%; background: #b9c0d2; }
.opzet-schets.kolommen i:nth-child(1) { height: 5px; width: 50%; background: #8892aa; }
.opzet-schets.kolommen i:nth-child(2) { top: 14px; width: 40%; height: 26px; background: repeating-linear-gradient(#d9dce4 0 2px, transparent 2px 4px); }
.opzet-schets.kolommen i:nth-child(3) { top: 14px; left: 52%; height: 26px; }
.opzet-schets.vlak { background: #dfe7f0; }
.opzet-schets.colofon i:nth-child(1) { top: auto; bottom: 5px; height: 12px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); width: max-content; padding: 1px; }
.stepper-waarde { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.lijst-knop { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: var(--r-klein); cursor: pointer; text-align: left; font-size: 13px; color: var(--tekst-2); }
.lijst-knop:hover { background: var(--achter); color: var(--tekst); }
.kv { display: flex; justify-content: space-between; padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--lijn); }
.kv span { color: var(--zacht); }
.kv b { font-weight: 550; }
.paneel-groep > .melding { margin: 12px 16px 0; }
.toetsen-uitleg { padding: 16px; display: grid; gap: 8px; font-size: 12.5px; color: var(--zacht); }
.toetsen-uitleg div { display: flex; gap: 6px; align-items: center; }
.focus-vak { position: relative; border-radius: var(--r-klein); overflow: hidden; cursor: crosshair; background: #f0f0f2; touch-action: none; }
.focus-vak img { width: 100%; height: auto; display: block; user-select: none; }
.focus-lijnen { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to right, transparent calc(var(--fx) - .5px), rgba(255, 255, 255, .8) calc(var(--fx) - .5px), rgba(255, 255, 255, .8) calc(var(--fx) + .5px), transparent calc(var(--fx) + .5px)),
  linear-gradient(to bottom, transparent calc(var(--fy) - .5px), rgba(255, 255, 255, .8) calc(var(--fy) - .5px), rgba(255, 255, 255, .8) calc(var(--fy) + .5px), transparent calc(var(--fy) + .5px)); }
.focus-stip { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; background: var(--mijn); box-shadow: 0 1px 6px rgba(0, 0, 0, .45); cursor: grab; }
.focus-stip:focus-visible { box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 1px 6px rgba(0, 0, 0, .45); }
.rechts-uit { display: flex; justify-content: flex-end; }
.tekst-voorbeeld { max-height: 160px; overflow: auto; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--vlak-2); font-size: 13px; color: var(--tekst-2); white-space: pre-wrap; }
.slot-label { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; font-size: 11.5px; color: var(--zacht); }
.correctie { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r-klein); background: var(--vlak-2); border: 1px solid var(--lijn); font-size: 13px; }
.correctie del { color: var(--stop); text-decoration-color: rgba(184, 35, 43, .5); }
.correctie ins { color: var(--goed); text-decoration: none; }
.geschiedenis { padding: 6px 0 20px; }
.gesch-rij { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--lijn); }
.gesch-rij .avatar { box-shadow: none; }
.gesch-wat { font-size: 13px; line-height: 1.4; word-break: break-word; }
.gesch-terug { position: absolute; right: 12px; bottom: 8px; opacity: 0; transition: opacity .12s; box-shadow: var(--schaduw-2); }
.gesch-rij:hover .gesch-terug, .gesch-terug:focus-visible { opacity: 1; }
.gesch-nu { font-size: 11px; font-weight: 650; color: var(--goed); background: var(--goed-zacht); padding: 2px 7px; border-radius: 9px; }

/* -- Aanleveren -------------------------------------------------------------------------------------- */
.deadline-blok { display: flex; gap: 7px; align-items: center; padding: 7px 12px; border-radius: var(--r); background: var(--vlak); border: 1px solid var(--lijn); font-size: 13px; white-space: nowrap; flex: none; }
.deadline-blok.krap { background: var(--letop-zacht); border-color: #f2d6ad; color: #7c4106; }
.deadline-blok.laat { background: var(--stop-zacht); border-color: #f2c4c7; color: #8e1a20; }
.voortgang-tekst { font-size: 14px; }
.voortgang .vbalk { grid-column: 1; height: 8px; border-radius: 4px; background: #ececef; overflow: hidden; }
.balk-vul { height: 100%; background: var(--goed); border-radius: 4px; transition: width .4s ease; }
.rubrieken { display: flex; flex-direction: column; gap: 16px; }
.rubriek { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-1); overflow: hidden; }
.rubriek-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; }
.rubriek-kop h2 { font-size: 16px; margin-bottom: 3px; }
.rubriek-plek { font-weight: 450; color: var(--zacht); }
.rubriek-kop p { font-size: 13.5px; }
.rubriek.compleet .rubriek-kop h2::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--goed); border-radius: 50%; margin-right: 8px; vertical-align: 2px; }
.artikelen { border-top: 1px solid var(--lijn); }
.artikel-rij { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--lijn); background: none; cursor: pointer; text-align: left; color: var(--tekst-2); }
.artikel-rij:hover { background: var(--vlak-2); }
.artikel-rij:last-child { border-bottom: 0; }
.artikel-duim { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex: none; background: #f0f0f2; }
.artikel-duim.leeg { display: flex; align-items: center; justify-content: center; color: var(--heel-zacht); }
.artikel-tekst { flex: 1; min-width: 0; }
.artikel-titel { font-weight: 600; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toevoegen { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 0; border-top: 1px dashed var(--lijn-sterk); background: var(--vlak-2); cursor: pointer; color: var(--accent); font-weight: 550; font-size: 14px; }
.toevoegen:hover { background: var(--accent-zacht); }
.editor { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; background: #fcfcfd; border-bottom: 1px solid var(--lijn); box-shadow: inset 3px 0 0 var(--accent); }
.editor:last-child { border-bottom: 0; }
.editor-kop { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.editor-voet { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.bewaar-status { white-space: nowrap; }
.tekst-vak { position: relative; }
.tekst-vak textarea.groot { min-height: 220px; font-size: 14.5px; line-height: 1.6; }
.sleep-hint { position: absolute; inset: 0; display: none; flex-direction: column; gap: 6px; align-items: center; justify-content: center; border: 2px dashed var(--mijn); border-radius: var(--r-klein); background: rgba(238, 242, 251, .94); color: var(--accent); pointer-events: none; }
.tekst-vak.sleept .sleep-hint { display: flex; }
.woordteller { font-size: 13px; color: var(--zacht); display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.woordteller b { color: var(--tekst); }
.woordteller.goed b { color: var(--goed); }
.woordteller.goed::before { content: "●"; color: var(--goed); font-size: 9px; margin-right: 3px; }
.woordteller.kort b { color: var(--letop); }
.woordteller.kort::before { content: "●"; color: #e3a008; font-size: 9px; margin-right: 3px; }
.woordteller.lang { color: #8e1a20; }
.woordteller.lang b { color: var(--stop); }
.woordteller.lang::before { content: "●"; color: var(--stop); font-size: 9px; margin-right: 3px; }
.foto-zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding: 12px; border: 1.5px dashed var(--lijn-sterk); border-radius: var(--r); background: var(--vlak); cursor: pointer; transition: border-color .12s, background .12s; }
.foto-zone:hover { border-color: #b4b4bd; }
.foto-zone.sleept { border-color: var(--mijn); background: var(--info-zacht); }
.foto-zone.leeg { grid-template-columns: 1fr; }
.foto-toevoegen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 150px; color: var(--zacht); text-align: center; border-radius: var(--r-klein); padding: 10px; }
.foto-toevoegen b { color: var(--tekst); font-weight: 550; margin-top: 4px; }
.foto-zone.leeg .foto-toevoegen { min-height: 120px; }
.foto-kaart { display: flex; flex-direction: column; gap: 6px; cursor: default; }
.foto-beeld { position: relative; aspect-ratio: 4/3; border-radius: var(--r-klein); overflow: hidden; background: #f0f0f2; display: flex; align-items: center; justify-content: center; }
.foto-beeld img { width: 100%; height: 100%; object-fit: cover; }
.foto-weg { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(20, 20, 28, .62); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.foto-kaart:hover .foto-weg, .foto-weg:focus-visible { opacity: 1; }
.foto-kaart input { font-size: 12.5px; padding: 6px 8px; }
.scherpte { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 550; color: var(--zacht); }
.scherpte.goed { color: var(--goed); }
.scherpte.let-op { color: var(--letop); }
.scherpte.stop { color: var(--stop); }
.scherpte-uitleg { margin-top: -3px; line-height: 1.35; }

/* == Thuisschermen, zoals de home van Canva ============================================================ */
.thuis { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: 100vh; }
.thuis-nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; background: var(--vlak); border-right: 1px solid var(--lijn); }
.thuis-merk { margin-bottom: 10px; display: flex; }
.nieuw-knop { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer; margin-bottom: 12px; color: var(--tekst); }
.nieuw-plus { width: 40px; height: 40px; border-radius: 50%; background: var(--merk-blauw); color: var(--merk-marine); display: flex; align-items: center; justify-content: center; box-shadow: var(--schaduw-2); transition: transform .12s, background .12s; }
.nieuw-knop:hover .nieuw-plus { background: #5cc0ea; transform: scale(1.05); }
.nav-item { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 7px; border-radius: 10px; text-decoration: none; color: var(--tekst-2); }
.nav-ico { width: 40px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.nav-item:hover .nav-ico { background: #efeff2; }
.nav-item.actief .nav-ico { background: var(--accent-zacht); color: var(--accent); }
.nav-item.actief { color: var(--accent); font-weight: 600; }
.nav-naam { font-size: 11.5px; font-weight: 550; text-align: center; line-height: 1.2; }
.thuis-rechts { min-width: 0; display: flex; flex-direction: column; }
.thuis-boven { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: rgba(245, 245, 246, .92); backdrop-filter: blur(8px); }
.zoek { flex: 1; max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; box-shadow: var(--schaduw-1); color: var(--zacht); }
.zoek:focus-within { border-color: var(--mijn); box-shadow: var(--focus); }
.zoek-veld { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; font-size: 14.5px !important; }
.thuis-lijf { width: 100%; max-width: 1240px; margin: 0 auto; padding: 8px 36px 80px; }
.held { background: linear-gradient(135deg, var(--merk-nacht), var(--merk-marine) 55%, var(--merk-marine-hover)); color: #fff; border-radius: 16px; padding: 38px 36px; margin: 6px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.held h1 { font-size: 28px; letter-spacing: -0.02em; }
.held-knoppen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.held .knop.primair { background: #fff; color: var(--accent); border-color: #fff; }
.held .knop.primair:hover { background: #eef1f8; }
.held .knop:not(.primair) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.held .knop:not(.primair):hover { background: rgba(255, 255, 255, .2); }
.sectie-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sectie-kop h2 { font-size: 17px; }
.pagina-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 12px 0 26px; }
.pagina-kop h1 { font-size: 26px; margin-bottom: 4px; }
.kaarten { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.editie-kaart { border-radius: 12px; }
.omslag { position: relative; aspect-ratio: 4 / 3.4; background: #ececef; padding: 16px 16px 0; }
.omslag img, .omslag-leeg { width: 66%; }
.omslag-labels { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.omslag-labels .label, .omslag-labels .stand-label { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.kaart-tekst { gap: 3px; }
.kaart-tekst .kaart-regels { margin-top: 6px; align-items: center; }
.kaart-sub { font-size: 13px; color: var(--tekst-2); }
.kaart-meta { font-size: 12.5px; color: var(--zacht); margin-top: 4px; }
.leeg-staat.breed { grid-column: 1 / -1; }
.klant-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.klant-kaart { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; text-decoration: none; box-shadow: var(--schaduw-1); }
.klant-kaart:hover { box-shadow: var(--schaduw-2); border-color: var(--lijn-sterk); }
.klant-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-zacht); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }

/* == Editor, zoals de editor van Canva ================================================================= */
.werkplek { position: fixed; inset: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; background: var(--canvas); }
.balk { position: relative; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--merk-marine); color: #fff; }
.balk-links, .balk-rechts { display: flex; align-items: center; gap: 4px; min-width: 0; }
.balk-links { flex: 1; }
.balk-rechts { flex: 1; justify-content: flex-end; gap: 8px; }
.balk-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; text-decoration: none; flex: none; }
.balk-ico:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.balk-ico:disabled { opacity: .35; cursor: default; }
.balk-ico .teller { position: absolute; top: 1px; right: -2px; }
.balk-ico.licht { color: var(--tekst-2); }
.balk-ico.licht:hover { background: #efeff2; }
.balk-ico.licht.actief { background: var(--accent-zacht); color: var(--accent); }
.balk-knop { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 0; cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: rgba(255, 255, 255, .14); color: #fff; }
.balk-knop:hover { background: rgba(255, 255, 255, .22); }
.balk-knop.tekst { background: none; font-weight: 550; padding: 0 10px; }
.balk-knop.tekst:hover { background: rgba(255, 255, 255, .14); }
.balk-knop.delen { background: #fff; color: var(--accent); }
.balk-knop.delen:hover { background: #eef1f8; }
.balk-knop.primair { background: var(--merk-blauw); color: var(--merk-marine); }
.balk-knop.primair:hover { background: #5cc0ea; }
.balk-knop.gegeven { background: rgba(125, 220, 168, .2); color: #c9f2db; }
.balk-streep { width: 1px; height: 22px; background: rgba(255, 255, 255, .22); margin: 0 6px; flex: none; }
.balk-streep.licht { background: var(--lijn-sterk); }
.balk-titel { min-width: 0; line-height: 1.2; padding-left: 4px; }
.balk-naam { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk-sub { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk-standen { display: flex; gap: 2px; padding: 3px; border-radius: var(--pil); background: rgba(0, 0, 0, .25); flex: none; }
.balk-stand { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 600; font-size: 13px; }
.balk-stand:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.balk-stand.actief { background: var(--merk-blauw); color: var(--merk-marine); }
.fase-stip { width: 6px; height: 6px; border-radius: 50%; background: #ffb057; }
.balk-ik .avatar-knop .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.menu-vak { position: relative; }
.menu.links { left: 0; right: auto; color: var(--tekst); }
.menu a.menu-item { text-decoration: none; color: inherit; font-size: 14px; }
.menu-streep { height: 1px; background: var(--lijn); margin: 6px 0; }
.gebruiker .menu { color: var(--tekst); }
.aanwezig { display: flex; align-items: center; margin-right: 4px; }
.aanwezig-wie { margin-left: -7px; display: flex; }
.aanwezig-wie:first-child { margin-left: 0; }
.aanwezig-wie .avatar { box-shadow: 0 0 0 2px var(--merk-marine); }
.aanwezig-wie.agent .avatar { animation: agentGloed 2.4s ease-in-out infinite; }
@keyframes agentGloed { 50% { box-shadow: 0 0 0 2px var(--merk-marine), 0 0 0 5px rgba(217, 119, 87, .5); } }
.aanwezig-meer { margin-left: 6px; font-size: 12px; opacity: .8; }
.teller { background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; }
.editor-lijf { display: grid; grid-template-columns: 76px auto minmax(0, 1fr); min-height: 0; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; background: var(--merk-nacht); color: var(--merk-op-donker); overflow-y: auto; }
.rail-item { position: relative; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.rail-ico { width: 40px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.rail-item:hover { color: #fff; }
.rail-item:hover .rail-ico { background: rgba(255, 255, 255, .08); }
.rail-item.actief { color: #fff; }
.rail-item.actief .rail-ico { background: var(--merk-blauw); color: var(--merk-marine); }
.rail-naam { font-size: 11px; font-weight: 550; }
.rail-stip { position: absolute; top: 8px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--merk-blauw); box-shadow: 0 0 0 2px var(--merk-nacht); }
.rail-stip.stop { background: #e5484d; }
.uitklap-vak { position: relative; display: flex; }
.uitklap { width: 360px; background: var(--vlak); border-right: 1px solid var(--lijn); min-height: 0; overflow: hidden; display: flex; flex-direction: column; transition: width .18s ease; }
.werkplek[data-stand="aanleveren"] .uitklap { width: 420px; }
.paneel-dicht .uitklap { width: 0 !important; border-right: 0; }
.inklap-knop { position: absolute; z-index: 6; right: -14px; top: 50%; transform: translateY(-50%); width: 14px; height: 56px; border: 1px solid var(--lijn); border-left: 0; border-radius: 0 8px 8px 0; background: var(--vlak); color: var(--zacht); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.inklap-knop:hover { color: var(--tekst); }
.paneel-dicht .inklap-knop .ico { transform: rotate(180deg); }
.paneel-scroll { overflow-y: auto; flex: 1; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 10px; }
.paneel-titel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paneel-titel h2 { font-size: 16px; }
.paneel-sub { font-size: 13px; color: var(--tekst-2); margin-top: 10px; }
.werkvlak { display: grid; grid-template-rows: auto auto minmax(0, 1fr) 44px; min-width: 0; min-height: 0; }
.canvas-vak { position: relative; min-height: 0; }
.canvas { position: absolute; inset: 0; overflow: auto; outline: none; }
.blad.m-stapel { gap: 36px; padding: 28px 56px 90px; }
.spread-blok { display: flex; flex-direction: column; gap: 8px; }
.spread-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.spread-titel { border: 0; background: none; padding: 2px 4px; margin-left: -4px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--tekst-2); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.spread-titel:hover { background: rgba(0, 0, 0, .05); color: var(--tekst); }
.spread-knoppen { display: flex; gap: 2px; flex: none; }
.mini-knop { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--zacht); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mini-knop:hover:not(:disabled) { background: rgba(0, 0, 0, .07); color: var(--tekst); }
.mini-knop:disabled { opacity: .3; cursor: default; }
.m-stapel .pagina-nr { display: none; }
.modus-pil { position: absolute; z-index: 8; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 20px; background: var(--accent); color: #fff; box-shadow: var(--schaduw-2); font-size: 13.5px; }
.link-knop.wit { color: #fff; text-decoration: underline; }
.raster-laag { position: absolute; inset: 0; z-index: 9; background: var(--canvas); overflow: auto; padding: 20px 32px 60px; }
.raster-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.raster-laag .blad.m-raster { justify-content: flex-start; }
.raster-laag .pagina { cursor: pointer; }
.raster-laag .pagina:hover { outline: 2px solid var(--mijn); }
.contextbalk { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; background: var(--vlak); border-bottom: 1px solid var(--lijn); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.cb-hint { display: flex; align-items: center; gap: 8px; color: var(--zacht); font-size: 13px; }
.cb-chip { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: color-mix(in srgb, var(--mijn) 12%, #fff); color: color-mix(in srgb, var(--mijn) 80%, #000); font-weight: 600; font-size: 12.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.cb-streep { width: 1px; height: 24px; background: var(--lijn); flex: none; }
.cb-knop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-weight: 550; font-size: 13px; color: var(--tekst); flex: none; }
.cb-knop:hover { background: #f0f0f3; }
.cb-knop.nadruk { background: var(--accent-zacht); color: var(--accent); }
.cb-knop.nadruk:hover { background: #e2e7f3; }
.cb-knop .opzet-schets { width: 30px; height: 22px; }
.cb-ico { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--zacht); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cb-ico:hover { background: #f0f0f3; color: var(--tekst); }
.cb-groep { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; flex: none; }
.cb-label { font-size: 12.5px; color: var(--zacht); }
.cb-schuif { width: 100px; }
.cb-waarde { font-size: 12.5px; font-weight: 600; min-width: 48px; font-variant-numeric: tabular-nums; }
.cb-select { height: 32px; width: auto; font-size: 13px; }
.cb-melding { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 550; padding: 0 8px; height: 26px; border-radius: 6px; }
.cb-melding.stop { background: var(--stop-zacht); color: var(--stop); }
.cb-melding.let-op { background: var(--letop-zacht); color: var(--letop); }
.stepper-waarde.afwijkend { color: var(--stop); }
.uitklap-pop { position: fixed; z-index: 95; width: 280px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: var(--schaduw-3); padding: 12px; animation: infaden .12s; }
.uitklap-pop.breed { width: 360px; }
.pop-titel { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.cb-form { display: flex; flex-direction: column; gap: 8px; }
.focus-pop { display: flex; flex-direction: column; gap: 8px; }
.onderbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--vlak); border-top: 1px solid var(--lijn); }
.onder-links, .onder-rechts { display: flex; align-items: center; gap: 8px; }
.zet-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--heel-zacht); }
.zet-status.bezig { color: var(--tekst-2); }
.zet-stip { width: 7px; height: 7px; border-radius: 50%; background: #e8590c; animation: puls 1.1s ease-in-out infinite; flex: none; }
@keyframes puls { 50% { opacity: .3; } }
.pagina-teller { font-size: 12.5px; color: var(--tekst-2); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.zoom-schuif { width: 130px; }
.zoom-waarde { border: 0; background: none; cursor: pointer; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 46px; padding: 4px 6px; border-radius: 5px; color: var(--tekst-2); }
.zoom-waarde:hover { background: #efeff2; }
.zweef-opm { position: absolute; pointer-events: auto; width: 30px; height: 30px; margin: -15px 0 0 6px; border-radius: 50%; border: 0; background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw-2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.zweef-opm:hover { background: var(--mijn); color: #fff; }
.speld { width: 30px; height: 30px; margin-top: -30px; font-size: 11px; letter-spacing: .02em; }
.oplos-knop { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--lijn-sterk); background: var(--vlak); color: var(--zacht); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.oplos-knop:hover { border-color: var(--goed); color: var(--goed); background: var(--goed-zacht); }
.oplos-knop.is-opgelost { background: var(--goed); border-color: var(--goed); color: #fff; }
.delen-vak { display: flex; flex-direction: column; gap: 10px; }
.delen-kop { font-size: 13px; margin-top: 6px; }
.delen-uitnodigen { display: flex; flex-direction: column; gap: 8px; }
.delen-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.delen-rij:last-child { grid-template-columns: 1fr auto; }
.delen-lijst { display: flex; flex-direction: column; max-height: 240px; overflow: auto; border: 1px solid var(--lijn); border-radius: 8px; }
.delen-persoon { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.delen-persoon:last-child { border-bottom: 0; }
.delen-persoon .avatar { box-shadow: none; }
.gesch-vak { max-height: 60vh; overflow: auto; margin: 0 -22px; border-top: 1px solid var(--lijn); }

/* -- panelen in de editor --------------------------------------------------------------------- */
.rubrieken-paneel { gap: 14px; background: var(--achter); }
.rubrieken-paneel .voortgang { display: flex; flex-direction: column; gap: 8px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; padding: 12px 14px; }
.rubrieken-paneel .vbalk { height: 8px; border-radius: 4px; background: #ececef; overflow: hidden; padding: 0; display: block; }
.deadline-blok { padding: 3px 9px; font-size: 12px; gap: 5px; border-radius: 12px; }
.rubrieken-paneel .rubrieken { gap: 12px; }
.rubrieken-paneel .rubriek-kop { flex-direction: column; gap: 6px; padding: 14px 14px 12px; }
.rubrieken-paneel .rubriek-kop h2 { font-size: 15px; }
.rubrieken-paneel .editor { padding: 14px; }
.rubrieken-paneel .twee { grid-template-columns: 1fr; gap: 12px; }
.rubrieken-paneel .foto-zone { grid-template-columns: repeat(2, 1fr); }
.rubrieken-paneel .foto-zone.leeg { grid-template-columns: 1fr; }
.rubrieken-paneel .artikel-rij { padding: 10px 14px; }
.rubrieken-paneel .tekst-vak textarea.groot { min-height: 200px; font-size: 14px; }
.editor-voet { flex-wrap: wrap; }
.sjablonen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sjabloon { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.sjabloon-beeld { display: flex; padding: 10px; border-radius: 10px; background: #f2f2f4; border: 2px solid transparent; transition: border-color .12s; }
.sjabloon-beeld .opzet-schets { width: 100%; height: auto; aspect-ratio: 210 / 297; }
.sjabloon:hover .sjabloon-beeld { border-color: var(--lijn-sterk); }
.sjabloon.actief .sjabloon-beeld { border-color: var(--mijn); }
.sjabloon-naam { font-size: 12.5px; color: var(--tekst-2); line-height: 1.3; }
.sjabloon-vink { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--mijn); color: #fff; display: flex; align-items: center; justify-content: center; }
.sectie-lijst { display: flex; flex-direction: column; gap: 2px; }
.sectie-rij { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.sectie-rij:hover { background: var(--achter); }
.sectie-rij.actief { background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent-lijn); }
.sectie-schets { width: 34px; flex: none; }
.sectie-schets .opzet-schets { width: 34px; height: 46px; }
.sectie-tekst { display: flex; flex-direction: column; min-width: 0; }
.sectie-titel { font-weight: 550; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opzet-schets { position: relative; overflow: hidden; display: block; background: #fff; border: 1px solid var(--lijn); border-radius: 3px; }
.blok-lijst { display: flex; flex-direction: column; gap: 4px; }
.blok-rij { border-radius: 8px; border: 1px solid transparent; }
.blok-rij.actief { border-color: var(--mijn); background: color-mix(in srgb, var(--mijn) 5%, #fff); padding-bottom: 6px; }
.blok-rij .link-knop { margin-left: 10px; }
.blok-knop { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.blok-knop:hover { background: var(--achter); }
.blok-rol { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.blok-tekst { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--tekst-2); }
.blok-tekst.r-kop { font-size: 16px; font-weight: 700; color: var(--tekst); }
.blok-tekst.r-tussenkop, .blok-tekst.r-intro { font-weight: 600; color: var(--tekst); }
.blok-tekst.r-quote { font-style: italic; font-size: 14px; }
.upload-groep { border-radius: 10px; padding: 8px; margin: 0 -8px; border: 2px dashed transparent; }
.upload-groep.sleept { border-color: var(--mijn); background: var(--info-zacht); }
.upload-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.upload-kop b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.upload-tegel { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #eee; }
.upload-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.upload-tegel:hover img { transform: scale(1.04); }
.upload-tegel.actief { outline: 3px solid var(--mijn); outline-offset: -3px; }
.tegel-label { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; font-weight: 650; padding: 2px 6px; border-radius: 5px; background: rgba(20, 20, 28, .7); color: #fff; }
.tegel-label.stop { background: var(--stop); left: auto; right: 5px; top: 5px; bottom: auto; }
.tegel-label.let-op { background: #c27a0e; left: auto; right: 5px; top: 5px; bottom: auto; }
.stalen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.staal-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.staal-rond { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); display: inline-block; flex: none; }
.staal-rond.groot { width: 44px; height: 44px; }
.gevonden-stalen .staal-rond { width: 22px; height: 22px; }
.letter-mini { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--achter); border-radius: 8px; }
.logo-raster.klein { grid-template-columns: repeat(2, 1fr); }
.draden { display: flex; flex-direction: column; gap: 8px; }
.draad-kaart { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; border: 1px solid var(--lijn); background: var(--vlak); border-radius: 10px; padding: 11px 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.draad-kaart:hover { border-color: var(--lijn-sterk); box-shadow: var(--schaduw-1); }
.draad-kaart.open { cursor: default; border-color: var(--accent-lijn); box-shadow: 0 0 0 1px var(--accent-lijn), var(--schaduw-1); }
.draad-kaart.opgelost { opacity: .72; }
.draad-kop .avatar { box-shadow: none; }
.draad-antw { display: flex; gap: 5px; align-items: center; }
.inklap { align-self: flex-start; font-size: 12px; }
.ctl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ctl-stat { display: flex; flex-direction: column; padding: 9px 10px; border-radius: 8px; background: var(--achter); font-size: 11.5px; color: var(--zacht); }
.ctl-stat b { font-size: 14.5px; color: var(--tekst); }
.ctl-stat.stop b { color: var(--stop); }
.ctl-stat.goed b { color: var(--goed); }
.ctl-stat.wacht b { color: var(--letop); }
.ctl-groep { border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.ctl-kop { display: flex; align-items: center; gap: 8px; padding: 9px 12px 2px; }
.ctl-groep.stop .ctl-kop, .ctl-groep.stop .ctl-uitleg { background: var(--stop-zacht); }
.ctl-groep.letop .ctl-kop, .ctl-groep.letop .ctl-uitleg { background: var(--letop-zacht); }
.ctl-kop .telling { font-size: 11.5px; font-weight: 650; background: rgba(0, 0, 0, .07); padding: 0 7px; border-radius: 9px; }
.ctl-uitleg { padding: 0 12px 9px; border-bottom: 1px solid var(--lijn); }
.ctl-item { display: flex; gap: 10px; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--lijn); background: none; padding: 10px 12px; cursor: pointer; text-align: left; font-size: 13px; }
.ctl-item:last-child { border-bottom: 0; }
.ctl-item:hover { background: var(--vlak-2); }
.ctl-soort { display: block; font-size: 11px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.ctl-pag { flex: none; font-size: 12px; color: var(--zacht); }
.correcties-lijst { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; }
.correcties-lijst summary { cursor: pointer; font-weight: 550; font-size: 13px; }
.correcties-lijst .correctie { margin-top: 8px; }

/* == Huisstijl, zoals de merkset van Canva ============================================================= */
.merk-kop { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 22px; align-items: flex-start; }
.merk-kop h1 { font-size: 28px; }
.merk-bladen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.merk-volgende { margin-bottom: 18px; }
.merk-sectie { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px 22px 22px; margin-bottom: 18px; box-shadow: var(--schaduw-1); }
.merk-sectie-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.merk-sectie-kop h2 { font-size: 17px; margin-bottom: 2px; }
.logo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.logo-tegel { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--vlak); }
.logo-tegel img, .logo-pdf { height: 110px; width: 100%; object-fit: contain; padding: 14px; background: repeating-conic-gradient(#f4f4f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.logo-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--zacht); font-size: 12px; }
.logo-naam { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; font-size: 12.5px; border-top: 1px solid var(--lijn); }
.logo-naam span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-tegel.toevoegen { align-items: center; justify-content: center; gap: 6px; min-height: 146px; border-style: dashed; border-width: 1.5px; cursor: pointer; color: var(--zacht); font-weight: 550; font-size: 13px; }
.logo-tegel.toevoegen:hover { border-color: var(--mijn); color: var(--mijn); }
.stalen-groot { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 14px; }
.staal { display: flex; flex-direction: column; gap: 2px; border: 0; background: none; padding: 0; text-align: left; cursor: default; }
button.staal { cursor: pointer; }
.staal-vlak { position: relative; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); margin-bottom: 6px; transition: transform .12s, box-shadow .12s; }
button.staal:hover .staal-vlak { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), var(--schaduw-2); }
.staal-std { position: absolute; left: 8px; bottom: 8px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.staal-std.donker { color: rgba(0, 0, 0, .45); }
.staal-naam { font-weight: 600; font-size: 13px; }
.staal-rol { font-size: 12px; color: var(--zacht); }
.staal-cmyk { font-size: 11.5px; color: var(--heel-zacht); font-variant-numeric: tabular-nums; }
.kleur-bewerk { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.staal-voorbeeld { aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cmyk-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cmyk { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--zacht); }
input.getal { width: 100%; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 7px 8px; font-variant-numeric: tabular-nums; }
input.getal::placeholder { color: var(--heel-zacht); }
.letter-families { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.letter-familie { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); text-align: left; }
button.letter-familie { cursor: pointer; }
button.letter-familie:hover, button.stijl-rij:hover { border-color: var(--lijn-sterk); background: var(--vlak-2); }
.letter-naam { font-size: 24px; line-height: 1.2; }
.stijl-lijst { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.stijl-rij { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--lijn); background: var(--vlak); text-align: left; width: 100%; }
.stijl-rij:last-child { border-bottom: 0; }
button.stijl-rij { cursor: pointer; }
.stijl-naam { font-size: 12.5px; color: var(--zacht); font-weight: 550; }
.stijl-voorbeeld { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stijl-maat { font-size: 12px; color: var(--tekst-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stijl-live { padding: 16px; border: 1px dashed var(--lijn-sterk); border-radius: 10px; background: #fff; min-height: 70px; }
.geupload { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.geupload p { flex-basis: 100%; margin: 4px 0 0; }
.letter-uitkomsten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.letter-uitkomsten li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.letter-uitkomsten li.geweigerd { color: var(--fout, #b3261e); }
.regels-tabel { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.regel-kop, .regel-rij { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; padding: 9px 14px; align-items: center; }
.regels-tabel.bewerk .regel-kop, .regels-tabel.bewerk .regel-rij { grid-template-columns: 1fr 1fr 2fr 32px; }
.regel-kop { background: var(--vlak-2); font-size: 12px; font-weight: 600; color: var(--zacht); border-bottom: 1px solid var(--lijn); }
.regel-rij { border-bottom: 1px solid var(--lijn); font-size: 13.5px; }
.regel-rij:last-child { border-bottom: 0; }
.regel-rij .fout { color: var(--stop); text-decoration: line-through; text-decoration-color: rgba(184, 35, 43, .4); }
.regel-rij .goed { color: var(--goed); font-weight: 550; }
.regels-tabel.bewerk > .link-knop { margin: 8px 14px 10px; }
.leeg-sectie { padding: 4px 0; }
.vast-blok { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--vlak-2); border-radius: 10px; }

/* == Binnenhalen: wizard ================================================================================ */
.wizard { max-width: 940px; }
.wizard-stappen { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: stap; }
.wizard-stap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 0; font-weight: 550; font-size: 13.5px; color: var(--zacht); position: relative; }
.wizard-stap::after { content: ""; flex: 1; height: 2px; background: var(--lijn); margin: 0 12px; border-radius: 1px; }
.wizard-stap:last-child::after { display: none; }
.wizard-stap.klaar::after { background: var(--goed); }
.stap-nr { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ececef; font-size: 12.5px; font-weight: 700; flex: none; }
.wizard-stap.actief { color: var(--tekst); }
.wizard-stap.actief .stap-nr { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-zacht); }
.wizard-stap.klaar .stap-nr { background: var(--goed); color: #fff; }
.wizard-inhoud { display: flex; flex-direction: column; gap: 16px; }
.wizard-twee { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; }
.wizard-uitleg, .wizard-blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px 22px; box-shadow: var(--schaduw-1); display: flex; flex-direction: column; gap: 12px; }
.wizard-blok h2, .wizard-uitleg h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.wizard-blok.aandacht { background: var(--letop-zacht); border-color: #f2d6ad; }
.wizard-blok.aandacht ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.stappen-uitleg { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sleepvlak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; border: 2px dashed var(--lijn-sterk); border-radius: 14px; background: var(--vlak); cursor: pointer; color: var(--zacht); text-align: center; padding: 20px; transition: border-color .12s, background .12s; }
.sleepvlak:hover, .sleepvlak.sleept { border-color: var(--mijn); background: var(--info-zacht); color: var(--accent); }
.sleepvlak b { color: var(--tekst); font-size: 15px; }
.sleepvlak.bezig { cursor: progress; }
.wizard-voet { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.kleur-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kleur-keuze { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; padding: 10px; border: 1px solid var(--lijn); border-radius: 10px; }
.kleur-keuze select { grid-column: 1 / -1; }
.gevonden-stalen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.letter-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.letter-keuze { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px; border: 1px solid var(--lijn); border-radius: 10px; }
.gevonden-letters { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; }
.gevonden-letter { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--lijn); font-size: 13.5px; }
.gevonden-letter:last-child { border-bottom: 0; }
.stijl-keuzes { display: flex; flex-direction: column; gap: 8px; }
.stijl-keuze { display: grid; grid-template-columns: 110px 1fr 220px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.stijl-keuze:last-child { border-bottom: 0; }
.maten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.maat { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--zacht); font-weight: 550; }
.vraag { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.vraag:last-child { border-bottom: 0; }
.vraag .keuze > span { flex-direction: row; gap: 8px; align-items: center; flex: 1; }
.vraag .keuze input[type=text] { flex: 1; }
.blok-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.voorbeeld-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 16px; background: var(--canvas); border-radius: 10px; }
.voorbeeld-pagina { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.voorbeeld-pagina img { width: 100%; box-shadow: var(--pagina-schaduw); background: #fff; }
.voorbeeld-pagina figcaption { font-size: 11.5px; color: var(--zacht); }
.samenvatting { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* -- smallere schermen (1280) ------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .uitklap { width: 320px; }
  .werkplek[data-stand="aanleveren"] .uitklap { width: 380px; }
  .balk-sub { display: none; }
  .balk-stand { padding: 6px 10px; }
  .cb-schuif { width: 90px; }
}
@media (max-width: 1100px) {
  .mensen .rollen-uitleg { grid-template-columns: repeat(2, 1fr); }
  .wizard-twee { grid-template-columns: 1fr; }
}

/* Niets in de werkplek mag de pagina zelf laten verschuiven (focus scrolt anders ook verborgen randen). */
.werkplek, .editor-lijf { overflow: clip; }
.editor-lijf > *, .uitklap-vak, .uitklap, .paneel-scroll { min-height: 0; }
.uitklap-vak { overflow: clip; overflow-clip-margin: 20px; }
.ms-vak { display: flex; flex-direction: column; gap: 10px; }
.ms-knop { height: 40px; gap: 10px; }
.of { display: flex; align-items: center; gap: 10px; color: var(--zacht); font-size: 12.5px; }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }
.slot-balk { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #fff4e0; border-bottom: 1px solid #f0d9ae; color: #6b4a0e; font-size: 13.5px; }
.slot-balk[hidden] { display: none; }
.stand-label.s-verschenen { background: #ececef; color: var(--tekst-2); }
.werkvlak > .slot-balk { grid-row: 1; }
.werkvlak > .contextbalk { grid-row: 2; }
.werkvlak > .canvas-vak { grid-row: 3; }
.werkvlak > .onderbalk { grid-row: 4; }
.vg { width: 80%; height: 6px; border-radius: 3px; background: #e2e2e7; overflow: hidden; }
.vg-vul { height: 100%; width: 0; background: var(--mijn); transition: width .15s; }
.foto-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--tekst-2); }
.foto-meta .nog { display: inline-flex; gap: 4px; align-items: center; color: var(--letop); }
.link-knop.klein { font-size: 12px; align-self: flex-start; }
.keuze-rij { display: flex; flex-wrap: wrap; gap: 6px; }
.keuze-pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--lijn-sterk); border-radius: 18px; cursor: pointer; font-size: 13.5px; }
.keuze-pil:has(input:checked) { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent); font-weight: 550; }
.keuze-pil input { accent-color: var(--accent); margin: 0; }
.ctl-item { display: flex; flex-direction: column; gap: 2px; cursor: default; }
.ctl-item:hover { background: none; }
.ctl-klik { display: flex; gap: 10px; justify-content: space-between; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-size: 13px; }
.ctl-klik:hover .ctl-tekst { color: var(--accent); }
.ctl-uitleg-tekst { background: var(--info-zacht); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hulp-zweef { position: fixed; right: 20px; bottom: 20px; z-index: 40; }
.hulp-knop { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--tekst); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--schaduw-1); }
.hulp-zweef .hulp-knop { width: 44px; height: 44px; font-size: 18px; box-shadow: var(--schaduw-2); }
.hulp-knop:hover, .hulp-knop[aria-expanded="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.hulp-paneel { position: fixed; right: 16px; bottom: 60px; z-index: 96; width: 360px; max-height: min(640px, calc(100vh - 90px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: var(--schaduw-3); animation: omhoog .16s ease-out; }
.thuis ~ .hulp-paneel, .hulp-paneel { }
.hulp-kop { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.zoek.klein { height: 38px; max-width: none; margin: 0; border-radius: 19px; }
.hulp-lijf { overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.hulp-sub { font-size: 12px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 4px; }
.hulp-item { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.hulp-item:hover { background: var(--achter); }
.hulp-titel { font-size: 15px; margin: 6px 0; }
.hulp-tekst { font-size: 13.5px; margin-bottom: 8px; color: var(--tekst-2); }
.hulp-vraag { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--lijn); padding-top: 10px; margin-top: 8px; }
.vink { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.vink input { accent-color: var(--accent); }
.rondleiding { position: fixed; z-index: 97; left: 50%; bottom: 70px; transform: translateX(-50%); width: 400px; background: var(--accent); color: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: var(--schaduw-3); display: flex; flex-direction: column; gap: 8px; animation: omhoog .2s ease-out; }
.rondleiding h3 { font-size: 16px; }
.rondleiding p { color: #dfe4f2; font-size: 14px; }
.rl-kop { display: flex; justify-content: space-between; align-items: center; }
.rl-teller { font-size: 12px; opacity: .7; }
.rondleiding .ico-knop { color: #fff; }
.rondleiding .ico-knop:hover { background: rgba(255, 255, 255, .12); }
.rl-voet { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.rondleiding .link-knop { color: var(--merk-op-donker); }
.rondleiding .knop.primair { background: #fff; color: var(--accent); border-color: #fff; }
.rondleiding .knop:not(.primair) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.segment.tabs { align-self: flex-start; }
.tegel-label.aanvullen { background: #c27a0e; left: auto; right: 5px; top: 5px; bottom: auto; }
.stock-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stock-tegel { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #eee; aspect-ratio: 4/3; }
.stock-tegel img { width: 100%; height: 100%; object-fit: cover; }
.stock-tegel:hover { outline: 3px solid var(--mijn); outline-offset: -3px; }
.stock-maker { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.online-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--achter); }
.online-status.aan { background: var(--goed-zacht); color: #0e5838; }
.online-lijst { display: flex; flex-direction: column; gap: 8px; }
.online-art { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.online-beelden { display: flex; flex-wrap: wrap; gap: 8px; }
.online-beeld { display: flex; flex-direction: column; gap: 3px; width: 86px; font-size: 11.5px; }
.online-beeld img { width: 86px; height: 64px; object-fit: cover; border-radius: 6px; }
.online-beeld .vink { font-size: 11.5px; gap: 4px; }
.online-knoppen { margin-top: 6px; }
.schakel-rij { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--lijn); cursor: pointer; }
.schakel-rij > span { display: flex; flex-direction: column; }
.schakel { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: #d5d5da; position: relative; cursor: pointer; flex: none; transition: background .15s; }
.schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.schakel:checked { background: var(--goed); }
.schakel:checked::after { left: 21px; }
.code-vak { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--achter); }
.code { font: 600 20px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.berichten-lijst { display: flex; flex-direction: column; }
.bericht-rij { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.regels-tabel.cijfers .regel-kop, .regels-tabel.cijfers .regel-rij { grid-template-columns: 2fr 1fr 90px 120px; }
.hulp-stappen { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--tekst-2); }
.hulp-mis { padding: 8px 10px; background: var(--achter); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.rl-doel { outline: 3px solid var(--merk-blauw) !important; outline-offset: 2px; border-radius: 8px; position: relative; z-index: 5; }
.zoek input { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; outline: none; }
.canvas:focus-visible { box-shadow: none; }
.wat-betekent { display: flex; flex-direction: column; gap: 2px; } .melding .wat-betekent .link-knop { color: inherit; text-decoration: underline; }

/* -- vormtaal van MEO: knoppen als pil, accent in hemelsblauw ----------------------------------------- */
.knop, .balk-knop, .held .knop { border-radius: var(--pil); }
.knop { padding: 0 16px; }
.knop.klein { padding: 0 12px; }
.link-knop { color: var(--accent-tekst); }
.balk-stand { border-radius: var(--pil); }
.balk-stand.actief .fase-stip { background: var(--merk-marine); }
.nav-item.actief .nav-ico { background: var(--merk-blauw-licht); color: var(--merk-marine); }
.nav-item.actief { color: var(--merk-marine); }
.rail-item:hover .rail-ico { background: rgba(45, 170, 225, .16); }
.paneel-tab.actief { border-bottom-color: var(--merk-blauw); }
.segment button.actief { color: var(--merk-marine); box-shadow: var(--schaduw-1), inset 0 -2px 0 var(--merk-blauw); }
.held .knop.primair { color: var(--merk-marine); }
.held .knop.primair:hover { background: var(--merk-blauw-licht); }
.hulp-knop:hover, .hulp-knop[aria-expanded="true"] { background: var(--merk-blauw); color: var(--merk-marine); border-color: var(--merk-blauw); }
.rondleiding { background: var(--merk-marine); }
.rondleiding .knop.primair { color: var(--merk-marine); }
.modus-pil { background: var(--merk-marine); }
.wizard-stap.actief .stap-nr { box-shadow: 0 0 0 4px var(--merk-blauw-licht); }
.toast.t-goed .ico { color: var(--merk-blauw); }
.merk-woord { display: flex; flex-direction: column; line-height: 1.1; }
.merk-woord b { font-weight: 700; letter-spacing: -0.01em; color: var(--merk-marine); }
.merk-woord span { font-size: 12px; font-weight: 500; color: var(--merk-blauw-donker); letter-spacing: .02em; }
.merk-beeld { width: 36px; height: 36px; background: var(--logo-url) center / contain no-repeat; }
.aanmeld-kaart { border-top: 4px solid var(--merk-blauw); }
.thuis-merk { flex-direction: column; align-items: center; gap: 4px; text-decoration: none; text-align: center; }
.merk-woord.klein b { font-size: 12px; } .merk-woord.klein span { font-size: 9.5px; }
/* schetsjes per opzet (svg) */
.opzet-schets { background: none; border: 0; }
.opzet-schets .schets { display: block; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 0 0 1px var(--lijn), 0 1px 2px rgba(3, 47, 80, .08); }
.sjabloon-beeld .opzet-schets { aspect-ratio: 42 / 60; height: auto; }
.cb-knop .opzet-schets { width: 18px; height: 26px; }
.sectie-schets .opzet-schets { width: 32px; height: 46px; }
.opzet .opzet-schets { height: 60px; width: 42px; margin: 0 auto; }
.cb-knop.klein { height: 26px; padding: 0 9px; font-size: 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--pil); }
.cb-knop.klein.aan { background: var(--merk-blauw-licht); border-color: var(--merk-blauw); color: var(--merk-marine); }
.stock-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stock-item .stock-maker { position: static; background: none; color: var(--zacht); padding: 0; font-size: 11px; text-decoration: none; }
.stock-item .stock-maker:hover { color: var(--accent-tekst); text-decoration: underline; }
.stock-totaal { grid-column: 1 / -1; }
.rubriek-uitleg { margin: 0 14px 12px; }
.pdf-info { display: flex; flex-direction: column; gap: 4px; }
.pdf-letop { display: flex; gap: 5px; align-items: flex-start; font-size: 11.5px; color: var(--letop); line-height: 1.35; }
.pdf-letop .ico { margin-top: 2px; }
.pdf-vak { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--merk-marine); background: var(--merk-blauw-licht); padding: 4px 7px; border-radius: 6px; }
.agenda-invoer { display: flex; flex-direction: column; gap: 4px; }
.agenda-rij { display: grid; grid-template-columns: 1fr 0.7fr 1.4fr 1.2fr 28px; gap: 4px; align-items: center; }
.agenda-rij.kop span { font-size: 11.5px; font-weight: 600; color: var(--zacht); }
.agenda-rij input { padding: 6px 7px; font-size: 13px; }
.tabel-raster { overflow-x: auto; padding: 0 6px 6px; }
.tabel-raster table { border-collapse: collapse; font-size: 12px; width: 100%; }
.tabel-raster th, .tabel-raster td { border: 1px solid var(--lijn); padding: 0; text-align: left; vertical-align: top; }
.tabel-raster th { background: var(--vlak-2); font-weight: 600; }
.tabel-raster .cel { width: 100%; border: 0; background: none; text-align: left; padding: 4px 6px; font: inherit; cursor: pointer; }
.tabel-raster .cel:hover { background: var(--merk-blauw-licht); }
.hoofdactie { display: flex; gap: 8px; align-items: center; }
/* -- drukwerk: exportvenster, weergave zoals de drukker -------------------------------------------------- */
.venster.zeer-breed { max-width: 980px; }
.export { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.export-links { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.export-drukker { display: flex; flex-direction: column; gap: 6px; }
.export-tabs { align-self: flex-start; flex-wrap: wrap; }
.export-lijf { min-height: 300px; }
.schakel-rij.klein { padding: 9px 0; }
.export-rechts { display: flex; flex-direction: column; gap: 8px; }
.export-voorbeeld { background: var(--canvas); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.export-blad { width: 100%; max-width: 330px; box-shadow: var(--pagina-schaduw); }
.export-blad svg { display: block; width: 100%; height: auto; }
.export-legenda { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.leg-afloop, .leg-snij { width: 12px; height: 8px; display: inline-block; }
.leg-afloop { background: #f6d7d7; }
.leg-snij { border: 1px dashed var(--merk-blauw); margin-left: 8px; }
.regels-tabel.drukkers .regel-kop, .regels-tabel.drukkers .regel-rij { grid-template-columns: 1.3fr 0.8fr 1.3fr 0.5fr 1.4fr 110px; }
.regel-rij.blad-drukker { grid-template-columns: 1fr 1fr 220px; }
.keuring { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.druk-weergave { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.weergave-knop { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--lijn-sterk); border-radius: var(--pil); background: var(--vlak); font-size: 12px; font-weight: 550; cursor: pointer; color: var(--tekst-2); }
.weergave-knop.aan { background: var(--merk-blauw-licht); border-color: var(--merk-blauw); color: var(--merk-marine); }
.weergave-plaat { height: 28px; width: auto; font-size: 12px; border-radius: var(--pil); padding-left: 10px; }
.druk-beeld .m-stapel .pagina-beeld { object-fit: contain; background: #fff; }
.druk-beeld .m-stapel .vlakken { display: none; }
.weergave-plaat.aan { background: var(--merk-blauw-licht); border-color: var(--merk-blauw); }
.weergave-dekking { font-size: 12px; color: var(--tekst-2); white-space: nowrap; }
.drukker-kaart { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; }
.drukker-kaart.leeg { background: var(--letop-zacht); border-color: #f2d6ad; }
.export-drukker { gap: 8px; align-items: flex-start; }
.toch-vak { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #f2c4c7; background: var(--stop-zacht); border-radius: 10px; cursor: pointer; }
.toch-vak > span { display: flex; flex-direction: column; }

.weergave-knop, .zet-status, .balk-knop { white-space: nowrap; }
@media (max-width: 1360px) {
  .balk-rechts .knop-tekst { display: none; }
  .zet-status { font-size: 0; gap: 0; }
  .zet-status .zet-stip { margin-right: 0; }
  .balk-stand { padding: 6px 9px; }
  .druk-weergave { margin-left: 4px; }
  .export { grid-template-columns: 1fr 0.9fr; }
}
.systeem-balk { position: fixed; z-index: 300; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: var(--pil); background: var(--merk-marine); color: #fff; box-shadow: var(--schaduw-3); font-size: 13.5px; }
#mmt-offline { background: #7c2d12; }
.systeem-balk .knop { background: var(--merk-blauw); color: var(--merk-marine); border-color: var(--merk-blauw); box-shadow: none; }
.balk-knop.uit { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); cursor: help; }
.rl-links { display: flex; gap: 14px; }
.nav-ico { position: relative; }
.nav-teller { position: absolute; top: -4px; right: -2px; }
.uitleg-rechts { max-width: 260px; text-align: right; }
.vragen { display: flex; flex-direction: column; gap: 14px; }
.vraag-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--schaduw-1); }
.vraag-kaart.af { opacity: .8; }
.vraag-kop { display: flex; gap: 12px; align-items: center; }
.vraag-kop .label { margin-left: auto; }
.vraag-plek { display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; padding: 5px 10px; border-radius: var(--pil); background: var(--merk-blauw-licht); color: var(--merk-marine); text-decoration: none; font-size: 13px; font-weight: 550; }
.vraag-plek:hover { background: #d3eefa; }
.vraag-tekst { white-space: pre-wrap; font-size: 14.5px; }
.vraag-antwoord { background: var(--goed-zacht); border-radius: 8px; padding: 10px 12px; }
.vraag-form { display: flex; flex-direction: column; gap: 8px; }

/* == Tablet (tot 1100 breed): smalle rail, het paneel als la over het canvas, canvas volle breedte ============= */
@media (max-width: 1100px) {
  .editor-lijf { grid-template-columns: 64px minmax(0, 1fr); position: relative; }
  .rail-item { width: 58px; }
  .rail-naam { font-size: 10px; }
  .uitklap-vak { position: absolute; left: 64px; top: 0; bottom: 0; z-index: 25; box-shadow: var(--schaduw-3); }
  .paneel-dicht .uitklap-vak { box-shadow: none; }
  .uitklap, .werkplek[data-stand="aanleveren"] .uitklap { width: min(400px, calc(100vw - 80px)); }
  .inklap-knop { display: none; }
  .werkvlak { grid-column: 2; }
  .blad.m-stapel { padding: 18px 16px 70px; gap: 26px; }
  .balk { gap: 6px; padding: 0 8px; }
  .balk-links { flex: 0 1 auto; min-width: 0; }
  .balk-rechts { flex: 0 0 auto; gap: 6px; }
  .balk-sub, .menu-vak, .balk-links .balk-streep, .balk-links [aria-label="Ongedaan maken"], .balk-links [aria-label="Opnieuw"], .aanwezig { display: none; }
  .balk-titel { max-width: 140px; }
  .balk-stand { padding: 6px 9px; font-size: 12.5px; }
  .balk-knop { padding: 0 10px; }
  .balk-rechts .knop-tekst { display: none; }
  .zoom-schuif, .pagina-teller + .balk-streep, .onder-links .zet-status { display: none; }
  .onderbalk { padding: 0 8px; }
  .contextbalk { padding: 0 8px; }
  .cb-hint { white-space: normal; font-size: 12.5px; }
  .rondleiding { width: min(400px, calc(100vw - 32px)); }
  .hulp-paneel { width: min(360px, calc(100vw - 32px)); }
  .popover { width: min(340px, calc(100vw - 16px)); }
  .venster.zeer-breed .export { grid-template-columns: 1fr; }
  .export-rechts { order: -1; }
  .export-blad { max-width: 220px; }
  /* thuisschermen */
  .thuis-lijf { padding: 8px 20px 80px; }
  .thuis-boven { padding: 12px 16px; }
  .held { padding: 26px 20px; }
  .regels-tabel.drukkers .regel-kop { display: none; }
  .regels-tabel.drukkers .regel-rij { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) and (orientation: portrait) {
  .balk-standen { order: 3; }
}

/* == Telefoon (tot 640 breed): rail onderaan, paneel als la van onderen, één pagina tegelijk ================== */
@media (max-width: 640px) {
  .werkplek { grid-template-rows: 52px minmax(0, 1fr); }
  .editor-lijf { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 58px; }
  .werkvlak { grid-column: 1; grid-row: 1; }
  .rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 2px 4px; overflow-x: auto; overflow-y: hidden; }
  .rail-item { width: auto; min-width: 56px; padding: 4px 2px; gap: 1px; }
  .rail-ico { height: 28px; width: 36px; }
  .rail-stip { top: 4px; right: 8px; }
  .uitklap-vak { left: 0; right: 0; top: auto; bottom: 58px; height: 62vh; }
  .uitklap, .werkplek[data-stand="aanleveren"] .uitklap { width: 100% !important; border-radius: 16px 16px 0 0; }
  .paneel-dicht .uitklap-vak { height: 0; }
  .balk-standen, .balk-knop.delen, .balk-ik, .contextbalk { display: none; }
  .balk-titel { max-width: 46vw; }
  .balk-naam { font-size: 13px; }
  .hoofdactie .balk-knop { padding: 0 10px; font-size: 12.5px; }
  .onderbalk { height: 44px; }
  .weergave-vak, .onder-rechts .balk-ico.licht { display: none; }
  .blad.m-stapel { padding: 12px 14px 60px; gap: 20px; min-width: 0; }
  .spread-kop { font-size: 12px; }
  .modus-pil { left: 10px; right: 10px; transform: none; font-size: 12.5px; }
  .telefoon-stand-weg .rail, .telefoon-stand-weg .uitklap-vak { display: none; }
  .telefoon-stand-weg .editor-lijf { grid-template-rows: minmax(0, 1fr); }
  .telefoon-melding { position: absolute; inset: 0; z-index: 20; background: var(--achter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
  .venster { max-height: calc(100vh - 24px); }
  .laag { padding: 10px; }
  .toasts { bottom: 70px; width: calc(100vw - 20px); }
  .toast { min-width: 0; max-width: 100%; }
  /* thuisschermen: navigatie onderaan */
  .thuis { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .thuis-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; top: auto; height: 62px; flex-direction: row; justify-content: space-around; padding: 4px; border-right: 0; border-top: 1px solid var(--lijn); }
  .thuis-merk, .nieuw-knop .nav-naam { display: none; }
  .nieuw-knop { margin: 0; }
  .nav-item { width: auto; min-width: 56px; padding: 2px; }
  .thuis-boven { gap: 10px; }
  .held h1 { font-size: 21px; }
  .held-knoppen .knop { width: 100%; }
  .kaarten { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pagina-kop { flex-direction: column; align-items: flex-start; }
  .hulp-zweef { bottom: 76px; right: 12px; }
}
.telefoon-melding[hidden] { display: none !important; }
.toch-details summary { cursor: pointer; } .toch-details[open] summary { margin-bottom: 8px; }
.telefoon-stand-weg .hoofdactie { display: none; }
/* == agent als collega ===================================================================================== */
.inbox { margin-bottom: 30px; }
.inbox-lijst { display: flex; flex-direction: column; gap: 10px; }
.inbox-leeg { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px dashed var(--lijn-sterk); border-radius: 12px; color: var(--zacht); background: var(--vlak); }
.inbox-leeg .ico { color: var(--goed); }
.taak { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: var(--schaduw-1); }
.taak:hover { border-color: var(--merk-blauw); }
.taak-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--merk-blauw-licht); color: var(--merk-marine); display: flex; align-items: center; justify-content: center; flex: none; }
.taak-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.voorstel { display: grid; grid-template-columns: 180px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid #d97757; border-radius: 12px; box-shadow: var(--schaduw-1); }
.voorstel.compact, .agent-paneel .voorstel { grid-template-columns: 1fr; }
.voorstel.actief { box-shadow: 0 0 0 2px var(--merk-blauw); }
.voorstel-beeld { padding: 0; border: 0; background: #eef1f4; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.voorstel-beeld img { width: 100%; height: 100px; object-fit: contain; display: block; }
.voorstel-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.voorstel-van { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tekst-2); }
.voorstel-van .avatar { box-shadow: none; }
.voorstel-knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.knop.licht { box-shadow: none; }
.bezig-lijst { display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; margin-bottom: 30px; }
.bezig-regel { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--lijn); text-decoration: none; color: inherit; font-size: 13.5px; }
.bezig-regel:last-child { border-bottom: 0; }
.bezig-regel .zacht:not(.klein) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-paneel .verslag { background: #fdf4f0; border: 1px solid #f3d8cc; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.verslag-kop { display: flex; align-items: center; gap: 8px; }
.verslag-blok h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); margin-bottom: 4px; }
.verslag-blok ul, .agent-rij, .agent-eerder { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.agent-toestand { font-size: 12px; color: #a24a28; }
.agent-kop { display: flex; justify-content: space-between; align-items: center; }
.voorstellen { display: flex; flex-direction: column; gap: 8px; }
.agent-acties { margin-top: 6px; }
.voor-na { position: absolute; z-index: 15; left: 16px; right: 16px; top: 16px; max-height: calc(100% - 32px); overflow: auto; background: var(--vlak); border-radius: 12px; box-shadow: var(--schaduw-3); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.voor-na-kop { display: flex; align-items: center; gap: 10px; }
.voor-na-kop .ico-knop { margin-left: auto; }
.voor-na-beeld img { width: 100%; height: auto; display: block; background: #eef1f4; border-radius: 8px; }
.agent-collega { display: flex; align-items: center; gap: 6px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: var(--pil); padding: 2px 10px 2px 2px; margin-left: 6px; cursor: pointer; }
.agent-collega .avatar { box-shadow: 0 0 0 2px var(--merk-marine); }
.agent-collega.bezig .avatar { animation: agentGloed 2.4s ease-in-out infinite; }
.agent-chip { font-size: 12px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.speld.voor-agent { --kleur: #d97757 !important; background: #d97757; }
.agent-label { background: #fbeee9; color: #a24a28; align-self: flex-start; }
.agent-vink { margin-top: 6px; font-size: 13px; }
.agent-uitleg { margin-top: 4px; }
.gesch-rij.door-agent { box-shadow: inset 3px 0 0 #d97757; }
.niveaus { display: flex; flex-direction: column; gap: 8px; }
.niveau { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 10px; cursor: pointer; }
.niveau.actief { border-color: var(--merk-blauw); background: var(--merk-blauw-licht); }
.niveau > span { display: flex; flex-direction: column; }
.regel-rij.les { grid-template-columns: 1fr 120px 32px; }
.agent-vragen { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1100px) { .voorstel { grid-template-columns: 1fr; } .agent-chip { display: none; } }
.voor-na-beeld img { max-height: calc(100vh - 300px); object-fit: contain; }
.voorstel.zonder-beeld { grid-template-columns: 1fr auto; } .voorstel.compact.zonder-beeld, .agent-paneel .voorstel { grid-template-columns: 1fr; }
.delen-tabs { align-self: flex-start; margin-bottom: 6px; } .menu-item.gevaar { color: var(--stop); }
.zoek-treffers { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-2); margin: 0 0 24px; overflow: hidden; }
.zoek-treffer { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--lijn); text-decoration: none; color: inherit; }
.zoek-treffer:last-child { border-bottom: 0; }
.zoek-treffer:hover { background: var(--merk-blauw-licht); }
.zoek-tekst { display: flex; flex-direction: column; min-width: 0; }
.zoek-tekst .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
mark { background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.regels-tabel.prullenbak .regel-kop, .regels-tabel.prullenbak .regel-rij { grid-template-columns: 2fr 1fr 1fr 130px; }
/* == openbare proef ======================================================================================== */
.bekijk { min-height: 100vh; background: var(--canvas); }
.bekijk-kop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--merk-marine); color: #fff; }
.bekijk-titel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bekijk-titel > div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bekijk-titel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bekijk-titel span { font-size: 12px; color: var(--merk-op-donker); }
.bekijk-kop .knop.primair { background: var(--merk-blauw); color: var(--merk-marine); border-color: var(--merk-blauw); }
.bekijk-proef { display: flex; gap: 8px; align-items: flex-start; max-width: 760px; margin: 14px auto 0; padding: 10px 14px; background: #fff4e0; border: 1px solid #f0d9ae; border-radius: 10px; color: #6b4a0e; font-size: 13.5px; }
.bekijk-proef .ico { margin-top: 2px; flex: none; }
.bekijk-modus { position: sticky; top: 56px; z-index: 19; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; background: var(--merk-marine); color: #fff; font-size: 13.5px; }
.bekijk-modus[hidden] { display: none; }
.bekijk-paginas { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 12px 40px; }
.bekijk-fig { margin: 0; width: min(760px, 100%); display: flex; flex-direction: column; gap: 6px; }
.bekijk-fig figcaption { text-align: center; font-size: 12px; color: var(--zacht); }
.bekijk-pagina { width: 100%; height: auto; }
.bekijk-pagina .pagina-beeld { width: 100%; height: 100%; object-fit: cover; }
.bekijk-opmerken .bekijk-pagina { cursor: crosshair; }
.bekijk-voet { text-align: center; color: var(--zacht); font-size: 12px; padding: 0 16px 30px; }
@media (max-width: 640px) { .bekijk-kop .knop span { display: none; } .bekijk-proef { margin: 10px 10px 0; } }
.label.gast { background: #eef0f3; color: var(--tekst-2); }
.speld.wens, .draad-kaart.wens { --kleur: #8a5cc2 !important; }
.speld.wens { background: #8a5cc2; border-radius: 6px; }
.wens-label { background: #f1eafa; color: #6a3fa0; align-self: flex-start; }
.rub-lijst { display: flex; flex-direction: column; gap: 6px; }
.rub-rij { border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); }
.rub-rij.open { border-color: var(--merk-blauw); }
.rub-rij.sleept { opacity: .5; }
.rub-rij.erboven { box-shadow: 0 -3px 0 var(--merk-blauw); }
.rub-kop { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.greep { cursor: grab; color: var(--heel-zacht); letter-spacing: -2px; user-select: none; }
.rub-schets .opzet-schets { width: 30px; height: 42px; display: block; }
.rub-naam { flex: 1; display: flex; flex-direction: column; text-align: left; border: 0; background: none; cursor: pointer; padding: 2px 4px; min-width: 0; }
.rub-bewerk { padding: 6px 14px 16px; border-top: 1px solid var(--lijn); }
.rub-bewerk .opzetten { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.rub-kop input[type=text] { flex: 1; } .rub-kop select { width: 200px; }
/* bouwsteen kiezen: kleine schetsen in een raster (contextbalk, pagina toevoegen) */
.bouwsteen-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.uitklap-pop .bouwsteen-keuze { max-height: min(60vh, 460px); overflow-y: auto; padding: 2px; }
.bouwsteen-keuze .sjabloon-beeld { padding: 6px; }
.bouwsteen-keuze .sjabloon-naam { font-size: 12.5px; line-height: 1.25; }
.agent-antwoord { display: flex; gap: 6px; margin-top: 6px; }
.agent-antwoord input { flex: 1; min-width: 0; }
.agent-vraag .draad-tekst { margin: 4px 0; }
.beantwoord { display: inline-flex; gap: 6px; align-items: center; }

/* -- wat is er veranderd (proeven vergelijken) -- */
.verschil-kies { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.verschil-kies span { font-weight: 600; }
.verschil-kies select { width: auto; min-width: 260px; }
.verschil-samen { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--info-zacht); margin-bottom: 8px; }
.verschil-samen.niets { background: var(--goed-zacht); }
.verschil-samen ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.verschil-samen > svg { flex: none; margin-top: 2px; }
.verschil-kop { font-size: 15px; margin: 20px 0 10px; }
.verschil-paginas { display: flex; flex-direction: column; gap: 18px; }
.vn-pagina { margin: 0; padding: 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); }
.vn-pagina figcaption { margin-bottom: 8px; }
.vn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vn-paar > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vn-paar img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; border: 1px solid var(--lijn); border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vn-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.vn-na .vn-label, .vn-paar > div:last-child .vn-label { color: var(--merk-blauw-donker); }
.verschil-art { padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.verschil-art-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verschil-blok { display: flex; flex-direction: column; gap: 6px; }
.voor-na-tekst { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voor-na-tekst p { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--achter); line-height: 1.5; white-space: pre-wrap; }
.vn-voor mark { background: #fde2e1; color: inherit; text-decoration: line-through; text-decoration-color: rgba(176, 32, 32, .5); }
.vn-na mark { background: #fff1a8; color: inherit; }
.verschil-opmaak { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 700px) { .vn-paar, .voor-na-tekst { grid-template-columns: 1fr; } }

/* -- link voor meelezers zonder account -- */
.deellink { display: flex; flex-direction: column; gap: 12px; }
.deellink > .knop { align-self: flex-start; }
.deellink-nieuw:empty { display: none; }
.deellink-nieuw { display: flex; flex-direction: column; gap: 8px; }
.deellink-lijst { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1100px) { .verschil-knop { display: none !important; } }

/* -- kwaliteit: melden, meldingen, versie, testomgeving, logboek -- */
.thuis-nav { overflow-y: auto; scrollbar-width: none; }
.nav-vul { flex: 1; min-height: 8px; }
.versie-regel { font-size: 11px; color: var(--heel-zacht, var(--zacht)); text-align: center; line-height: 1.3; padding: 4px 2px; max-width: 76px; word-break: break-word; }
.menu .versie-regel { max-width: none; text-align: left; padding: 8px 14px 4px; border-top: 1px solid var(--lijn); margin-top: 4px; }
.aanmeld-scherm .versie-regel { max-width: none; margin-top: 6px; }
.test-balk { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; background: #ffd43b; color: #3d2e00; font-size: 13px; line-height: 1.3; text-align: center; }
.test-balk svg { flex: none; }
/* De testbalk bedekt niets: alle schermen beginnen eronder (--testbalk = de hoogte van de balk, gezet in kwaliteit.js). */
body.met-testbalk .werkplek { top: var(--testbalk, 26px); }
body.met-testbalk .thuis, body.met-testbalk .pagina-scherm, body.met-testbalk .aanmeld-scherm, body.met-testbalk .bekijk { min-height: calc(100vh - var(--testbalk, 26px)); }
body.met-testbalk .laden-scherm { height: calc(100vh - var(--testbalk, 26px)); }
body.met-testbalk .thuis-boven, body.met-testbalk .bekijk-kop { top: var(--testbalk, 26px); }
body.met-testbalk .bekijk-modus { top: calc(56px + var(--testbalk, 26px)); }
body.met-testbalk .systeem-balk { top: calc(12px + var(--testbalk, 26px)); }
@media (min-width: 641px) { body.met-testbalk .thuis-nav { top: var(--testbalk, 26px); height: calc(100vh - var(--testbalk, 26px)); } }
.toast-actie { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: var(--pil, 999px); padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast-actie:hover { background: rgba(255, 255, 255, .15); }
.hulp-meld { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.hulp-meld .link-knop { align-self: flex-start; }
.soort-keuze { align-self: flex-start; flex-wrap: wrap; }
.meld-nummer { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--info-zacht); }
.meld-nummer b { font-size: 22px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.meld-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.meld-filters .segment { align-self: flex-start; flex-wrap: wrap; }
.meld-filter-rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.meld-filter-rij select, .meld-filter-rij input[type=search] { width: auto; min-width: 160px; }
.meld-filter-rij .maat { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--zacht); }
.meld-tabel .regel-kop, .meld-tabel .regel-rij { grid-template-columns: 130px minmax(0, 1fr) 130px 110px 150px; }
.meld-tabel a.regel-rij { color: inherit; text-decoration: none; }
.meld-tabel a.regel-rij:hover { background: var(--achter); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.label.status-nieuw { background: var(--info-zacht); color: var(--merk-blauw-donker); }
.label.status-beoordeeld, .label.status-in-behandeling { background: var(--letop-zacht); color: #7a4b00; }
.label.status-opgelost { background: var(--goed-zacht); color: var(--goed); }
.label.ernst-blokkeert { background: var(--stop-zacht); color: var(--stop); }
.label.ernst-hinderlijk { background: var(--letop-zacht); color: #7a4b00; }
.meld-detail { display: flex; flex-direction: column; gap: 12px; }
.meld-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meld-kolommen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.meld-veld { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.meld-veld > div { white-space: pre-wrap; }
.meld-beeld { max-width: 100%; max-height: 280px; border: 1px solid var(--lijn); border-radius: 6px; }
.meld-wijzig { padding: 12px; border: 1px solid var(--lijn); border-radius: 10px; margin-bottom: 14px; }
.meld-wijzig > .knop { align-self: flex-start; }
.meld-log-lijst { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fout-stapel { max-height: 50vh; overflow: auto; font-size: 11.5px; background: var(--achter); padding: 10px; border-radius: 8px; white-space: pre; }
.audit-tabel .regel-kop, .audit-tabel .regel-rij { grid-template-columns: 150px 170px 140px minmax(0, 1fr) minmax(0, 1.4fr); }
.fouten-tabel .regel-kop, .fouten-tabel .regel-rij { grid-template-columns: 70px minmax(0, 1fr) 150px 80px 150px; }
.audit-tabel .regel-rij > span, .fouten-tabel .regel-rij > span { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .meld-kolommen { grid-template-columns: 1fr; }
  .meld-tabel .regel-kop, .audit-tabel .regel-kop, .fouten-tabel .regel-kop { display: none; }
  .meld-tabel .regel-rij, .audit-tabel .regel-rij, .fouten-tabel .regel-rij { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .thuis-nav .nav-vul, .thuis-nav .versie-regel, .thuis-nav a[href="#/logboek"], .thuis-nav a[href="#/prullenbak"], .thuis-nav a[href="#/hulpvragen"] { display: none; }
}
.meld-tabel.mijn .regel-kop, .meld-tabel.mijn .regel-rij { grid-template-columns: 130px minmax(0, 1fr) 130px 150px; }
.fout-tekst { display: flex; flex-direction: column; align-items: center; gap: 8px; } .melding .fout-tekst { align-items: flex-start; }
.meld-filter-rij input[type=search], .meld-filter-rij input[type=number] { border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); padding: 0 10px; height: 34px; font-size: 14px; }
.meld-filter-rij select, .meld-filter-rij input[type=date] { height: 34px; }
@media (max-width: 820px) and (min-width: 641px) { .hoofdactie .actie-tekst { display: none; } }

/* == Herstel na de browsertest van 14 november 2026 ========================================================= */
/* Akkoord vervallen of ingetrokken: uitleg boven de proef */
.akkoord-balk { grid-row: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; background: var(--letop-zacht); border-bottom: 1px solid #f2d6ad; color: #6b4a0e; font-size: 13.5px; }
.akkoord-balk[hidden] { display: none; }
.akkoord-balk .ico { flex: none; }
.akkoord-balk .link-knop { color: inherit; text-decoration: underline; }
.wens-noot { margin: 10px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.wens-uitleg { margin: 0 0 4px; }
.wens-verwijs { align-self: flex-start; }
.leeg-paneel .wens-verwijs { align-self: center; }
/* Twee rubrieken die in dezelfde spread beginnen: elk zijn eigen pijltjes, met de naam erbij */
.verplaats-groep { display: inline-flex; align-items: center; gap: 1px; padding-left: 4px; margin-right: 4px; border-radius: 7px; background: rgba(0, 0, 0, .045); }
.verplaats-naam { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--tekst-2); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; border-radius: 5px; }
.verplaats-naam:hover { color: var(--tekst); background: rgba(0, 0, 0, .06); }
.is-bezig .spread-knoppen .mini-knop:not([aria-label="Opmerking plaatsen"]) { pointer-events: none; opacity: .35; }
/* Contextbalk: korte naam van de opzet, een Meer-menu voor wat niet past, en zichtbaar bezig */
.cb-opzet-naam { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.opzet .opzet-naam { display: block; color: var(--tekst); font-size: 12.5px; }
.opzet .opzet-uitleg { display: block; font-size: 11.5px; color: var(--zacht); margin-top: 2px; }
.cb-meer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; white-space: normal; }
.cb-meer .cb-groep { flex-wrap: wrap; padding: 0; }
.cb-meer .cb-knop { height: auto; min-height: 34px; text-align: left; white-space: normal; }
.cb-bezig { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 28px; padding: 0 10px; border-radius: var(--pil); background: var(--accent-zacht); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.cb-bezig[hidden] { display: none; }
.contextbalk.bezig .cb-knop, .contextbalk.bezig .cb-ico, .contextbalk.bezig .cb-groep, .cb-meer :disabled { opacity: .5; cursor: progress; }
.contextbalk.bezig { cursor: progress; }
.sjablonen .sjabloon { transition: opacity .12s; }
.is-bezig .sjablonen .sjabloon:not(.actief) { opacity: .55; cursor: progress; }
.wacht-op-server button:disabled { cursor: progress; }
/* Toetsenbord: de onderdelen van een pagina als knoppen (voor de muis doorzichtig) */
.toets-vlakken { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.toets-vlak { position: absolute; pointer-events: none; border: 0; padding: 0; margin: 0; background: none; border-radius: 2px; }
.toets-vlak:focus-visible { outline: 3px solid var(--mijn); outline-offset: 2px; background: color-mix(in srgb, var(--mijn) 10%, transparent); box-shadow: 0 0 0 5px rgba(255, 255, 255, .7); z-index: 4; }
.toets-vlak:focus-visible::after { content: attr(data-naam) " · Enter om te kiezen"; position: absolute; left: 0; top: 100%; margin-top: 5px; background: var(--mijn); color: #fff; font-size: 11px; font-weight: 550; padding: 2px 7px; border-radius: 3px; white-space: nowrap; z-index: 5; }
.druk-beeld .m-stapel .toets-vlakken { display: none; }
/* Focusrand die ook zichtbaar is op knoppen met een eigen schaduw (K19) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--mijn); outline-offset: 2px; }
.balk a:focus-visible, .balk button:focus-visible { outline-color: #fff; }
.zoek:focus-within { outline: 2px solid var(--mijn); outline-offset: 2px; }
.canvas:focus-visible { outline: none; }
.veld-fout { color: var(--stop); font-size: 12.5px; margin-top: 4px; }
.veld-fout[hidden] { display: none; }
input.ongeldig { border-color: var(--stop) !important; }
.vn-geen { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 120px; padding: 12px; border: 1px dashed var(--lijn-sterk); border-radius: 6px; }
.sjabloon-naam b { display: block; color: var(--tekst); }
.sjabloon-uitleg { display: block; font-size: 11.5px; color: var(--zacht); font-weight: 400; margin-top: 2px; }
.cb-chip { max-width: 200px; }
.stop-lijst { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
/* Mensen: acties bij een openstaande uitnodiging */
.uitn-acties { justify-content: flex-end; flex-wrap: nowrap; }
/* Uitleg 'Wat betekent dit?' bij een foto: over de volle breedte van het fotovak, niet in de smalle kolom (K18) */
.foto-kaart:has(.ctl-uitleg-tekst:not([hidden])) { grid-column: 1 / -1; }
.foto-kaart:has(.ctl-uitleg-tekst:not([hidden])) > .foto-beeld { max-width: 220px; }
/* Telefoon: Aanleveren is het paneel Rubrieken op het hele scherm; de standen staan als tweede regel in de bovenbalk */
@media (max-width: 640px) {
  .werkplek { grid-template-rows: auto minmax(0, 1fr); }
  .balk { flex-wrap: wrap; min-height: 52px; row-gap: 0; }
  .balk-standen { display: flex; order: 5; flex: 1 0 100%; justify-content: center; border-radius: 0; margin: 0 -8px; padding: 3px 8px 5px; background: rgba(0, 0, 0, .18); }
  .balk-stand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 4px; font-size: 12.5px; min-height: 32px; }
  .balk-links { flex: 1 1 0; min-width: 0; min-height: 52px; }
  .balk-titel { flex: 1 1 0; min-width: 0; max-width: none; }
  .balk-rechts { flex: none; min-height: 52px; }
  .werkplek[data-stand="aanleveren"]:not(.paneel-dicht) .uitklap-vak { top: 0; height: auto; box-shadow: none; }
  .werkplek[data-stand="aanleveren"] .uitklap { border-radius: 0; }
  .werkplek[data-stand="aanleveren"] .rubrieken-paneel { padding-bottom: 28px; }
  .rubrieken-paneel .editor { padding: 12px 10px; }
  .rubrieken-paneel input[type=text], .rubrieken-paneel textarea, .venster input[type=text], .venster input[type=email], .venster textarea, .popover textarea { font-size: 16px !important; }      /* iOS zoomt anders in bij het typen */
  .rubrieken-paneel .foto-zone { grid-template-columns: 1fr; }
  .rubrieken-paneel .foto-toevoegen { min-height: 96px; }
  .rubrieken-paneel .foto-weg { opacity: 1; }
  .rubrieken-paneel .editor-voet .knop { min-height: 42px; }
  .rubrieken-paneel .toevoegen { min-height: 46px; }
  .rubrieken-paneel .agenda-rij { grid-template-columns: 1fr 1fr; }
  .telefoon-melding .knoppenrij { justify-content: center; }
  .keuze-rij { flex-wrap: wrap; }
  .hoofdactie .actie-tekst { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}
/* Telefoon: de stappen van 'Blad binnenhalen' passen in beeld, keuzelijsten blijven binnen het scherm, en knoppen om te
   filteren of een spread te kiezen zijn hoog genoeg om te raken (K16) */
@media (max-width: 640px) {
  .wizard-stappen { flex-wrap: wrap; row-gap: 4px; }
  .wizard-stap { flex: 1 1 45%; min-width: 0; padding: 6px 0; font-size: 12.5px; }
  .wizard-stap::after { display: none; }
  .thuis-lijf select { max-width: 100%; min-width: 0; }
  .thuis-lijf .regel-rij, .thuis-lijf .regels-tabel { min-width: 0; }
  .thuis-lijf .regel-rij > * { min-width: 0; }
  .segment.klein button { min-height: 34px; padding: 6px 10px; }
  .meld-filters .segment button { min-height: 36px; }
  .spread-titel { min-height: 34px; }
  .thuis-lijf .knop.klein { min-height: 36px; }
  .uitn-acties { flex-wrap: wrap; }
  .tabel-rij.uitgenodigd { flex-wrap: wrap; }
}

/* == Koppelingen: sleutels van externe diensten (web/koppelingen.js) ================================== */
.koppelingen { max-width: 860px; }
.kop-veilig { margin-bottom: 8px; }
.kop-groep { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); margin: 28px 0 6px; }
.kop-groep-uitleg { margin-bottom: 12px; }
.kop-groep + .koppeling { margin-top: 10px; }
.koppeling .merk-sectie-kop { align-items: center; margin-bottom: 12px; }
.koppeling .merk-sectie-kop h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.koppeling .label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.koppeling > .melding { margin-bottom: 12px; }
.label.kop-fout { background: var(--stop-zacht); color: var(--stop); }
.kop-uitleg { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; }
.kop-uitleg dt { color: var(--zacht); font-weight: 550; }
.kop-uitleg dd { margin: 0; overflow-wrap: anywhere; }
.kop-uitleg a, .kop-veilig a { color: var(--accent); text-decoration: underline; }
.kop-code { font: 12.5px/1.4 ui-monospace, Menlo, monospace; background: var(--achter); padding: 1px 6px; border-radius: 5px; user-select: all; }
.kop-form { display: flex; flex-direction: column; gap: 14px; }
.kop-velden { display: grid; grid-template-columns: 1fr; gap: 14px; }
.kop-velden.meer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kop-form input { width: 100%; }
.kop-form input[type=password] { font-family: ui-monospace, Menlo, monospace; }
.kop-form + .zacht { margin-top: 10px; }
.kop-uitslag:not(:empty) { margin-top: 14px; }
.kop-standaard select { max-width: 460px; }
@media (max-width: 700px) {
  .kop-uitleg { grid-template-columns: 1fr; gap: 2px; }
  .kop-uitleg dd { margin-bottom: 8px; }
  .kop-velden.meer { grid-template-columns: 1fr; }
}

/* == Werk hieraan in Claude (web/claude.js) en de twee routes voor AI-hulp (web/agent.js) ============== */
.balk-knop.claude { background: rgba(217, 119, 87, .92); }
.balk-knop.claude:hover { background: #d97757; }
@media (max-width: 1500px) { .balk-knop.claude .claude-tekst { display: none; } .balk-knop.claude { padding: 0 10px; } }
@media (max-width: 640px) { .balk-knop.claude { display: none; } }
.claude-venster .stappen-uitleg li { line-height: 1.5; }
.claude-venster a { color: var(--accent); text-decoration: underline; }
.claude-venster a.knop { text-decoration: none; }
.claude-venster a.knop.primair { color: #fff; }
.claude-adres { margin-top: 6px; }
.claude-adres .link-veld { flex: 1; min-width: 0; }
.claude-vraag { width: 100%; min-height: 96px; resize: vertical; font-size: 14.5px; line-height: 1.5; }
.claude-keuze { flex-wrap: wrap; align-self: flex-start; }
.claude-gedaan { padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; cursor: pointer; }
.claude-meer summary { cursor: pointer; font-size: 13px; color: var(--zacht); }
.claude-code { display: block; margin-top: 4px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; background: var(--vlak-2); padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.claude-regel { border-left: 3px solid #d97757; padding-left: 10px; }
.route { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.route-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; width: 100%; }
.route-kop .label { white-space: nowrap; }
.agent-paneel .route { border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.agent-paneel .route h3 { font-size: 14px; }
.agent-paneel .route.aanbevolen { border-color: #f3d8cc; background: #fdf4f0; }
.agent-paneel .route .verslag, .agent-paneel .route ul { width: 100%; }
.agent-paneel .route.optie .verslag { background: var(--vlak); }
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.routes .merk-sectie { margin-bottom: 0; }
.routes .route.aanbevolen { border-color: #f3d8cc; }
.routes .route-kop h2 { font-size: 16px; }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; } }
.paneel-claude, .draad-claude { margin: 6px 0; }
.sectie-kop .claude-link { margin-left: auto; }
.label.via-claude { background: #fdf4f0; color: #b4532f; margin-left: 6px; font-weight: 550; white-space: nowrap; }
.label.niet-gekozen { margin-left: 8px; font-weight: 500; }
.voorstel-wie { font-weight: 600; }
.claude-tip { margin: 2px 0; }
.voorstel-van { flex-wrap: wrap; }
.voorstel-van > * { white-space: nowrap; }

/* == Planning, overzicht over alle bladen, drukorder en uren (planning.js) ================================== */
.kop-balken { grid-row: 1; min-width: 0; }
.drukker-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; background: var(--stop-zacht); border-bottom: 1px solid #f2c4bb; color: #7a1a08; font-size: 13.5px; }
.drukker-balk[hidden] { display: none; }
.drukker-balk .ico { flex: none; }
.drukker-balk .link-knop { color: inherit; text-decoration: underline; }
.label.plan-laat { background: var(--stop-zacht); color: var(--stop); }
.plan-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-lijst li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
.plan-lijst.compact { gap: 4px; } .plan-lijst.compact li { font-size: 13.5px; gap: 8px; }
.plan-stip { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lijn-sterk); display: inline-flex; align-items: center; justify-content: center; }
.plan-lijst li.gehaald .plan-stip { background: var(--goed); border-color: var(--goed); color: #fff; }
.plan-lijst li.gehaald .plan-zin { color: var(--zacht); }
.plan-lijst li.laat .plan-stip { border-color: var(--stop); }
.plan-venster { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plan-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-tabs { align-self: flex-start; flex-wrap: wrap; }
.plan-rijen { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.plan-rij { display: grid; grid-template-columns: minmax(0, 1.3fr) 170px minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--lijn); }
.plan-rij:last-child { border-bottom: 0; }
.plan-rij.laat { background: var(--stop-zacht); }
.plan-naam { font-weight: 550; }
.plan-stand { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-sjabloon { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 14px; }
.plan-sjabloon summary { cursor: pointer; font-weight: 550; }
.plan-sjabloon[open] summary { margin-bottom: 8px; }
.plan-sjabloon-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.plan-sjabloon-velden .maat, .plan-uren-invoer .maat { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tekst-2); }
.plan-sjabloon-velden input { width: 90px; }
.plan-klant { padding: 12px 14px; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 10px; }
.plan-klant .paneel-sub, .plan-venster section > .paneel-sub { margin: 0 0 10px; }
.plan-notities, .plan-log { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-notities li { padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: #fffdf5; }
.plan-notitie { white-space: pre-wrap; overflow-wrap: anywhere; }
.plan-log { gap: 4px; font-size: 13.5px; }
.plan-getallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.plan-getal { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; }
.plan-getal b { font-size: 20px; }
.plan-uren-invoer { display: grid; grid-template-columns: 150px 1fr 150px 110px; gap: 10px; align-items: end; margin: 8px 0 12px; }
.plan-uren-invoer .maat.breed { grid-column: 1 / 4; }
.plan-uren-invoer input, .plan-uren-invoer select { width: 100%; min-width: 0; }
.plan-uren { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; }
.plan-uur { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--lijn); }
.plan-uur:last-child { border-bottom: 0; }
/* het overzicht */
.ovz-tabs { margin-bottom: 18px; }
.ovz-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ovz-tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); cursor: pointer; text-align: left; font: inherit; color: var(--tekst-2); }
.ovz-tegel b { font-size: 24px; color: var(--tekst); line-height: 1.1; }
.ovz-tegel:hover { border-color: var(--lijn-sterk); }
.ovz-tegel.actief { border-color: var(--merk-marine); box-shadow: inset 0 0 0 1px var(--merk-marine); }
.ovz-tegel.laat b { color: var(--stop); }
.ovz-rol { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); margin-bottom: 26px; }
.ovz-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ovz-tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--zacht); background: var(--vlak-2); padding: 9px 12px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.ovz-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.ovz-tabel tr:last-child td { border-bottom: 0; }
.ovz-tabel tr.laat td:first-child { box-shadow: inset 3px 0 0 var(--stop); }
.ovz-tabel td .label { margin-left: 6px; } .ovz-tabel td .label:first-child { margin-left: 0; }
.ovz-actie { text-align: right; white-space: nowrap; }
.ovz-archief details { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--vlak); }
.ovz-archief summary { cursor: pointer; }
.ovz-jaar { display: flex; gap: 14px; padding: 10px 0 2px; }
.ovz-jaartal { flex: none; width: 46px; font-weight: 650; color: var(--zacht); }
.ovz-jaar-lijst { display: flex; flex-wrap: wrap; gap: 8px; }
.ovz-oud { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--lijn); border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: 13.5px; }
.ovz-oud:hover { border-color: var(--lijn-sterk); background: var(--vlak-2); }
.ovz-cijfer-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ovz-cijfer-kop p { max-width: 640px; }
/* op Start */
.start-planning:empty { display: none; }
.start-planning { margin-bottom: 26px; }
.start-overzicht { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); color: var(--tekst); text-decoration: none; }
.start-overzicht:hover { border-color: var(--lijn-sterk); box-shadow: var(--schaduw-1); }
.start-overzicht-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-zacht); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.start-overzicht-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.start-plannen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.start-plan { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); color: var(--tekst); text-decoration: none; }
.start-plan:hover { border-color: var(--lijn-sterk); }
@media (max-width: 760px) {
  .ovz-rol { border: 0; background: none; overflow: visible; }
  .ovz-tabel, .ovz-tabel tbody { display: block; }
  .ovz-tabel thead { display: none; }
  .ovz-tabel tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); }
  .ovz-tabel tr.laat { border-color: #f2c4bb; box-shadow: inset 3px 0 0 var(--stop); }
  .ovz-tabel tr.laat td:first-child { box-shadow: none; }
  .ovz-tabel td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .ovz-tabel td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .03em; }
  .ovz-tabel td.ovz-actie { grid-column: 1 / -1; text-align: left; }
  .ovz-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ovz-tegel { padding: 8px 8px; font-size: 11.5px; min-width: 0; } .ovz-tegel b { font-size: 19px; }
  .ovz-cijfer-kop { flex-direction: column; }
  .plan-rij { grid-template-columns: 1fr; gap: 6px; }
  .plan-venster .twee { grid-template-columns: minmax(0, 1fr); }
  .plan-venster input, .plan-venster select, .plan-venster textarea { max-width: 100%; min-width: 0; }
  .plan-uren-invoer { grid-template-columns: 1fr 1fr; } .plan-uren-invoer .maat.breed { grid-column: 1 / -1; }
  .plan-venster input, .plan-venster select, .plan-venster textarea { font-size: 16px; }
  .start-overzicht { flex-wrap: wrap; }
}

/* Mensen: stand en beheer van een account (laatst aangemeld, geblokkeerd, uitgeschakeld) */
.tabel-rij:has(.account-acties) { grid-template-columns: 32px 1fr 130px auto auto; }
.account-stand { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.account-acties { flex-wrap: wrap; justify-content: flex-end; }
.label.stop { background: var(--stop-zacht, #fde8e8); color: var(--stop, #b42318); }
@media (max-width: 760px) { .tabel-rij:has(.account-acties) { grid-template-columns: 32px 1fr auto; } .tabel-rij .account-acties { grid-column: 2 / -1; justify-content: flex-start; } }
/* Telefoon: met Overzicht erbij past de navigatie van het bureau niet meer; Koppelingen (instellen doe je aan een bureau) valt daar weg */
@media (max-width: 640px) { .thuis-nav a[href="#/koppelingen"] { display: none; } }

/* Opmerkingen: advies tegenover 'moet eerst opgelost', en namens iemand anders */
.label.advies-label { background: #eef0f3; color: var(--tekst-2); }
.label.moet-label { background: var(--letop-zacht); color: var(--letop); }
.draad-gewicht { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.draad-namens { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; background: #f4f5f7; border-radius: 6px; padding: 6px 8px; margin: 4px 0; }
.draad-namens svg { flex: none; margin-top: 2px; }
.namens-vak { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 6px; }
.namens-vak label { display: grid; gap: 3px; font-size: 12px; color: var(--tekst-2); }
.namens-vak input, .namens-vak select { width: 100%; min-width: 0; }
.advies-noot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }

/* Aanleveren: "Zo lezen wij dit bestand", keuze kopij of notitie, opmerkingen uit Word */
.zo-lezen h3, .hele-aanlevering h3 { font-size: 14px; margin: 16px 0 4px; }
.zo-kern { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.zo-titel { display: block; padding: 8px 0; font-size: 15px; }
.zo-titel.rood, .rood { color: var(--stop, #b42318); }
.zo-meldingen, .zo-niet ul, .zo-splits ul, .uit-word-meer ul { margin: 0; padding-left: 18px; }
.zo-splits label { display: flex; gap: 8px; margin-top: 4px; }
.zo-blokken { display: grid; gap: 4px; max-height: 320px; overflow: auto; border: 1px solid var(--lijn); border-radius: 8px; padding: 8px; }
.zo-blok { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; font-size: 13px; }
.zo-blok.rol-kop .zo-tekst { font-weight: 700; }
.zo-blok.rol-tussenkop .zo-tekst { font-weight: 600; }
.zo-blok.rol-weg .zo-tekst { text-decoration: line-through; color: var(--tekst-2); }
.zo-blok.twijfel .zo-tekst { background: #fff6d6; }
.zo-rol { width: 100%; font-size: 12px; }
.zo-alles summary, .uit-word-opm summary, .uit-word-meer summary { cursor: pointer; padding: 6px 0; }
.twijfel-kaart { border: 1px solid var(--letop, #b7791f); background: #fffaf0; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.twijfel-kaart.beslist { border-color: var(--lijn); background: none; }
.twijfel-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.twijfel-tekst { margin: 6px 0 8px; padding: 6px 10px; border-left: 3px solid var(--letop, #b7791f); background: #fff; font-size: 14px; white-space: pre-wrap; }
.uit-word { margin: 10px 0; display: grid; gap: 6px; }
.word-opm { border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.word-opm.klaar { opacity: .7; }
.word-opm p { margin: 4px 0; }
.word-opm-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uit-word-opm summary { display: flex; gap: 8px; align-items: center; }
/* Een hele aanlevering in één keer */
.hele-aanlevering-knop { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0 4px; }
.ha-zone { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--lijn); border-radius: 12px; cursor: pointer; text-align: center; margin: 10px 0; }
.ha-zone.sleept, .ha-zone:hover { border-color: var(--accent, #0d7a5f); background: #f3faf7; }
.ha-tabel { display: grid; gap: 0; max-height: 56vh; overflow: auto; border: 1px solid var(--lijn); border-radius: 10px; margin: 10px 0 14px; }
.ha-rij { display: grid; grid-template-columns: 56px 1fr 250px; gap: 12px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
.ha-rij:last-child { border-bottom: 0; }
.ha-rij.soort-overslaan { opacity: .55; }
.ha-rij.soort-onbekend { background: #fffaf0; }
.ha-duim { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #f1f2f4; display: grid; place-items: center; }
.ha-keuze { display: grid; gap: 6px; }
.ha-keuze select { width: 100%; min-width: 0; }
.ha-melding { display: flex; gap: 6px; align-items: flex-start; color: var(--letop, #8a5a00); margin-top: 3px; }
.ha-melding svg { flex: none; margin-top: 2px; }
.ha-waarom { color: var(--tekst-2); margin-top: 3px; }
.ha-bericht { white-space: pre-wrap; font: inherit; font-size: 13px; background: #f6f7f9; border-radius: 8px; padding: 10px; max-height: 300px; overflow: auto; }
.ha-notitie { border-bottom: 1px solid var(--lijn); padding: 10px 0; }
@media (max-width: 720px) { .ha-rij { grid-template-columns: 44px 1fr; } .ha-keuze { grid-column: 1 / -1; } .zo-kern, .zo-blok { grid-template-columns: 1fr; } }
/* rubrieken per nummer, omvang en advertenties (planning.js) */
.plan-omvang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.plan-rubrieken, .plan-advertenties { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 10px; }
.plan-rubriek, .plan-adv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--lijn); }
.plan-rubriek:last-child, .plan-adv:last-child { border-bottom: 0; }
.plan-rubriek.vervalt { background: var(--vlak-2); } .plan-rubriek.vervalt b { text-decoration: line-through; color: var(--zacht); }
.plan-rubriek .label { margin-left: 8px; }
.plan-adv.vervalt .plan-adv-tekst > b { text-decoration: line-through; color: var(--zacht); }
.plan-adv-tekst { flex: 1; min-width: 0; }
.plan-adv .knoppenrij { flex: none; flex-wrap: nowrap; }
@media (max-width: 640px) { .plan-rubriek, .plan-adv { flex-wrap: wrap; } }

/* == Wat Claude doet, en het bladplan (web/plank.js) ====================================================== */
:root { --claude: #d97757; --claude-zacht: #fdf4f0; --claude-lijn: #f3d8cc; }
.claude-balk { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--claude-zacht); border-bottom: 1px solid var(--claude-lijn); color: #7a3a22; font-size: 13.5px; }
.claude-balk[hidden] { display: none; }
.claude-puls, .claude-stip { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--claude); }
.claude-puls { animation: claude-puls 1.4s ease-in-out infinite; }
@keyframes claude-puls { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .claude-puls { animation: none; } }
.pagina.via-claude { outline: 3px solid var(--claude); outline-offset: 3px; }
.pagina-wrap.via-claude { position: relative; }
.pagina-wrap.via-claude::before { content: "Aangepast via Claude"; position: absolute; left: 0; top: -24px; z-index: 3; background: var(--claude); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px 6px 6px 0; white-space: nowrap; pointer-events: none; }
.raster-laag .pagina-wrap.via-claude::before { content: "Claude"; top: -18px; font-size: 10px; padding: 1px 6px; }
.claude-melding { position: absolute; right: 18px; bottom: 18px; z-index: 11; max-height: calc(100% - 36px); overflow: auto; width: min(380px, calc(100% - 36px)); background: var(--vlak); border: 1px solid var(--claude-lijn); border-left: 4px solid var(--claude); border-radius: 12px; box-shadow: var(--schaduw-2, 0 8px 28px rgba(0, 0, 0, .16)); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.claude-melding-kop { display: flex; align-items: center; gap: 8px; }
.claude-melding-kop b { flex: 1; }
.claude-melding p { margin: 0; }
.plank-knop.actief { background: var(--accent-zacht); }
.plank-laag { z-index: 10; }
.plank-kop { align-items: flex-start; gap: 16px; }
.plank-merk { display: flex; align-items: center; gap: 8px; background: var(--claude-zacht); border: 1px solid var(--claude-lijn); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; font-size: 13px; }
.plank-rij { display: flex; flex-wrap: wrap; gap: 26px 14px; align-items: stretch; }
.plank-kaart { position: relative; display: flex; flex-direction: column; gap: 8px; width: calc(var(--paginas) * 78px + 24px); min-width: 150px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 12px; box-shadow: var(--schaduw-1); }
.plank-kaart[draggable=true] { cursor: grab; }
.plank-kaart.sleept { opacity: .45; }
.plank-kaart.doel-voor { box-shadow: -4px 0 0 var(--merk-blauw); }
.plank-kaart.doel-na { box-shadow: 4px 0 0 var(--merk-blauw); }
.plank-kaart.loopt-over { border-color: var(--stop); }
.plank-kaart.via-claude { border-color: var(--claude); box-shadow: 0 0 0 2px var(--claude-lijn); }
.plank-vlag { position: absolute; top: -11px; left: 10px; background: var(--claude); color: #fff; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.plank-paginas { display: flex; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; }
.plank-pagina { position: relative; width: 74px; aspect-ratio: 210 / 297; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.plank-pagina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plank-pagina.via-claude { outline: 2px solid var(--claude); }
.plank-nr { position: absolute; right: 2px; bottom: 2px; background: rgba(255, 255, 255, .9); border-radius: 4px; font-size: 10.5px; font-weight: 600; padding: 0 4px; }
.plank-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.plank-tekst b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plank-rubriek { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.plank-let { align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--letop-zacht); color: #6b4a0e; }
.plank-let.stop { background: var(--stop-zacht); color: var(--stop); }
.plank-knoppen { display: flex; align-items: center; gap: 4px; margin-top: auto; }
.plank-knoppen .vul { flex: 1; }
.plank-aantal { min-width: 16px; text-align: center; font-weight: 600; font-size: 13px; }
@media (max-width: 640px) { .plank-knop { display: none; } }
.eerste-keuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.keuze-knop { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); cursor: pointer; font: inherit; }
.keuze-knop b { display: flex; align-items: center; gap: 8px; }
.keuze-knop:hover { border-color: var(--merk-blauw); }
.keuze-knop.claude { border-color: var(--claude-lijn); background: var(--claude-zacht); }
.eerste-uit:not(:empty) { display: flex; flex-direction: column; gap: 12px; }
.eerste-som.goed b { color: var(--goed, #0a7a4b); }
.eerste-plank { gap: 10px; }
.plank-pagina.schets { width: 34px; font-size: 11px; color: var(--zacht); }
.eerste-plank .plank-kaart { width: auto; min-width: 120px; }
@media (max-width: 640px) { .eerste-keuze { grid-template-columns: 1fr; } }

/* Vangnet (fout.js): een fout in de editor geeft een melding met foutnummer, geen leeg scherm. */
.fout-scherm .fout-nummer { font-size: 15px; padding: 8px 14px; border-radius: 8px; background: var(--info-zacht, #eef4fa); }
.fout-scherm .fout-nummer b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.systeem-balk.fout-balk { background: #8a1c1c; max-width: min(92vw, 760px); border-radius: 14px; }
.systeem-balk.lang { max-width: min(92vw, 760px); border-radius: 14px; align-items: flex-start; line-height: 1.4; }
/* Een lege editie: de uitleg in de balk boven de pagina's mag opvallen en over twee regels lopen. */
.cb-hint.cb-leeg { white-space: normal; line-height: 1.35; padding: 6px 10px; border-radius: 8px; background: #fff4d6; color: #4a3800; }
.eerste-verslag summary { cursor: pointer; font-size: 13px; color: var(--zacht); }
.eerste-verslag ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.eerste-plank .plank-kaart { width: calc(var(--paginas) * 78px + 24px); }

/* Hele aanlevering: bron SharePoint, keuzes per regel, focuspunt */
.ha-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sp-adres { display: flex; gap: 8px; }
.sp-adres input { flex: 1; min-width: 0; }
.sp-fout { margin: 8px 0; }
.sp-tabel { max-height: 38vh; overflow: auto; border: 1px solid var(--lijn); border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.sp-map + .sp-map { margin-top: 8px; border-top: 1px solid var(--lijn); padding-top: 6px; }
.sp-mapkop { padding: 4px 0; }
.sp-rij { display: flex; gap: 8px; align-items: baseline; padding: 2px 0 2px 18px; flex-wrap: wrap; }
.sp-rij.uit { color: var(--tekst-2); }
.sp-naam { word-break: break-word; }
.sp-waarom { flex-basis: 100%; padding-left: 24px; }
.ha-acties { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; }
.ha-bijschrift { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.ha-naam .label { margin-left: 6px; }
.ha-plank { margin: 8px 0; }
.ha-plank summary { cursor: pointer; padding: 4px 0; }
.ha-plank-tabel { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.ha-plank-tabel th, .ha-plank-tabel td { text-align: left; padding: 3px 10px 3px 0; border-bottom: 1px solid var(--lijn); }
.ha-plankregel { color: var(--tekst-2); margin-top: 3px; display: flex; gap: 4px; align-items: center; }
.ha-groep-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ha-groep-rij input { flex: 1 1 200px; min-width: 0; }
.ha-focus-venster { display: grid; justify-items: center; gap: 8px; }
.ha-focus-vak { position: relative; display: inline-block; cursor: crosshair; line-height: 0; border-radius: 8px; overflow: hidden; outline-offset: 2px; }
.ha-focus-vak img { display: block; max-width: min(100%, 420px); max-height: 50vh; width: auto; height: auto; min-width: 240px; image-rendering: auto; user-select: none; }
.ha-focus-stip { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #0b3a5c, 0 1px 6px rgba(0, 0, 0, .5); pointer-events: none; }
.ha-focus-stip[hidden] { display: none; }
.aanlevering-start { display: grid; gap: 8px; margin: 10px 0 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--lijn); background: #f4faff; }
.aanlevering-start .knop { justify-self: start; }
.balk-knop.aanlevering { background: #fff; color: var(--accent); }
.balk-knop.aanlevering:hover { background: #eef1f8; }
@media (max-width: 1500px) { .balk-knop.aanlevering .actie-tekst { display: none; } .balk-knop.aanlevering { padding: 0 10px; } }

/* Instellingen van een sectie met een eigen bediening (web/opties.js) */
.cb-melding.info { background: var(--merk-blauw-licht); color: var(--merk-marine); }
.opt-lijst { display: grid; gap: 4px; max-height: min(52vh, 380px); overflow-y: auto; }
.opt-rij { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.opt-rij:hover { background: #f4f6f9; }
.opt-rij.actief { border-color: var(--merk-blauw); background: var(--merk-blauw-licht); }
.opt-rij .vink { flex: 1; min-width: 0; }
.opt-tekst { display: grid; gap: 1px; min-width: 0; flex: 1; font-size: 13px; }
.opt-tekst b { font-weight: 600; overflow-wrap: anywhere; }
.opt-beeld { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; flex: none; background: #f0f0f2; }
.opt-volgorde { display: inline-flex; align-items: center; gap: 2px; }
.opt-acties { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.opt-kop { display: grid; gap: 4px; margin-bottom: 8px; }
.opt-kopregel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.opt-kopregel input { flex: 1 1 100%; min-width: 0; }
.opt-fout { color: var(--stop, #b42318); }
.opt-uitsnede { display: grid; gap: 8px; justify-items: start; }
.opt-beeldkeuze { display: flex; gap: 6px; flex-wrap: wrap; }
.opt-mini { position: relative; padding: 0; width: 48px; height: 48px; border: 2px solid transparent; border-radius: 7px; overflow: hidden; cursor: pointer; background: #f0f0f2; }
.opt-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-mini.actief { border-color: var(--merk-blauw); }
.opt-punt { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--merk-blauw); border: 2px solid #fff; }
.opt-groot { max-width: 100%; }
.opt-groot img { min-width: 0; max-width: 100%; max-height: 34vh; }
.opt-voorbeeld { display: flex; gap: 10px; align-items: flex-end; }
.opt-kader { overflow: hidden; border: 1px solid var(--lijn-sterk); border-radius: 4px; background: #f0f0f2; line-height: 0; flex: none; }
.opt-kader img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stijlfamilie van de huisstijl */
.stijl-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.stijl-kaart { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); }
.stijl-kaart.huidig { border-color: var(--merk-blauw); box-shadow: 0 0 0 2px var(--merk-blauw-licht); }
.stijl-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stijl-kaart-kop h3 { margin: 0; font-size: 16px; }
.stijl-kaart .knop { justify-self: start; }
.stijl-paginas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stijl-paginas img { width: 100%; height: auto; border: 1px solid var(--lijn); border-radius: 3px; background: #fff; display: block; }
.stijl-gevorderd { margin-top: 12px; }
.stijl-gevorderd summary { cursor: pointer; padding: 6px 0; }
.stijl-mini { display: grid; gap: 3px; margin-bottom: 6px; }

/* Mensen: zoeken en per organisatie in- en uitklappen */
.mensen-zoek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.mensen-zoek input { flex: 1 1 260px; max-width: 420px; min-height: 40px; }
.org-klap { margin-right: 6px; transform: rotate(90deg); transition: transform .12s; }
.org-blok.ingeklapt .org-klap { transform: none; }
.org-blok.ingeklapt .org-kop { border-bottom: 0; }
/* de zoekbalk op een tablet: de tekst in het veld wordt niet afgekapt (het veld mag krimpen, het zoekpictogram niet) */
.zoek .zoek-veld { flex: 1 1 auto; min-width: 0; width: 100%; text-overflow: ellipsis; }
.zoek svg { flex: none; }
.zoek { min-width: 0; }