/* Arc: kleuren, letters en maten uit het Figma-ontwerp "Peryton-ARC". */
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.54ef89211626.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.b770df7528a1.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.28a2cf182b19.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.a28521c77f4a.woff2") format("woff2"); }

:root {
  /* Figma-stijlen */
  --dark-01: #12284e;
  --dark-02: #394c6c;
  --dark-04: #8893a9;
  --light-01: #f2f3f7;
  --light-01-2: #e7e9f0;
  --light-02: #daddeb;
  --light-04: #b3bbca;
  --accent-01: #59e7ba;
  --accent-02: #20c591;
  --accent-licht: #d1f5e4;
  --wit: #ffffff;
  --reflex: 0 4px 4px rgba(89, 231, 186, .2), 0 6px 8px rgba(89, 231, 186, .2);
  /* Afgeleid, voor meldingen en status */
  --fout: #d64545;
  --fout-licht: #fdecec;
  --let-op: #9a5b00;
  --let-op-licht: #fff3dc;
  /* Oude namen, zodat bestaande schermen meegaan */
  --navy: var(--dark-01);
  --mint: var(--accent-01);
  --mint-licht: var(--accent-licht);
  --bg: var(--light-01);
  --vlak: var(--wit);
  --tekst: var(--dark-01);
  --tekst2: var(--dark-04);
  --lijn: var(--light-02);
  --goed: #128a63;
  --goed-licht: var(--accent-licht);
  --rond: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14px/1.45 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--dark-01); background: var(--light-01); }
a { color: var(--dark-01); }
h1 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 20px; line-height: 24px; font-weight: 700; margin: 24px 0 12px; }
h3 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 8px; }
.stil { color: var(--dark-04); }
.klein { font-size: 12px; line-height: 16px; }
:focus-visible { outline: 2px solid var(--accent-02); outline-offset: 2px; border-radius: 6px; }
.icoon { display: inline-block; flex: none; vertical-align: middle; stroke-width: 1.75; }

/* ---------- Kantoor: smalle navy menubalk links (64px) ---------- */
.kantoor { display: flex; min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; width: 64px; background: var(--dark-01); display: flex; flex-direction: column; align-items: center; padding: 24px 0; z-index: 20; }
.rail .merk img { width: 40px; height: auto; display: block; filter: brightness(0) invert(1); }
.rail nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.rail nav a { color: #fff; opacity: .55; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.rail nav a:hover { opacity: .9; }
.rail nav a.aan { opacity: 1; color: var(--accent-01); }
.rail .wie { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--dark-01); font-size: 11px; font-weight: 800; display: grid; place-items: center; text-decoration: none; }
.rail form button { background: none; border: 0; color: #fff; opacity: .55; cursor: pointer; padding: 8px; margin-top: 12px; }
.rail form button:hover { opacity: 1; }
.hoofd { margin-left: 64px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Paginakop: 80px hoog, titel H1 */
.paginakop { height: 80px; padding: 0 40px; display: flex; align-items: center; gap: 16px; background: var(--light-01); position: sticky; top: 0; z-index: 10; }
.paginakop h1 { margin: 0 24px 0 0; white-space: nowrap; }
.paginakop .ruimte { flex: 1; }
.inhoud { padding: 0 40px 48px; }
.inhoud.smal { max-width: 720px; }

/* Knoppen (Figma: Button/S, radius 40) */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 40px; border: 0; background: var(--accent-01); color: var(--dark-01); font: 700 12px/16px "Nunito", sans-serif; cursor: pointer; text-decoration: none; box-shadow: var(--reflex); white-space: nowrap; }
.knop:hover { filter: brightness(.96); }
.knop.mint { background: var(--accent-01); }
.knop.rand { background: transparent; box-shadow: none; border: 2px solid var(--accent-02); color: var(--accent-02); padding: 6px 14px; }
.knop.licht { background: var(--wit); box-shadow: none; color: var(--dark-02); }
.knop.licht:hover { color: var(--dark-01); filter: none; }
.knop.gevaar { background: var(--wit); box-shadow: none; color: var(--fout); border: 2px solid var(--fout-licht); padding: 6px 14px; }
.knop.klein { padding: 6px 12px; }
.knop.breed { width: 100%; }
form.inline { display: inline; }

/* Dag/Week-schakelaar (Content switcher) */
.schakelaar { display: inline-flex; background: var(--wit); border-radius: 40px; padding: 2px; }
.schakelaar a { min-width: 64px; text-align: center; padding: 8px 16px; border-radius: 40px; font: 700 12px/16px "Nunito", sans-serif; color: var(--dark-02); text-decoration: none; }
.schakelaar a.aan { background: var(--accent-01); color: var(--dark-01); box-shadow: var(--reflex); }

/* Weekkiezer: wit, radius 40, 216px */
.periode { display: inline-flex; align-items: center; gap: 8px; background: var(--wit); border-radius: 40px; padding: 8px; min-width: 216px; }
.periode a { color: var(--dark-01); display: grid; place-items: center; }
.periode span { flex: 1; text-align: center; font: 700 12px/16px "Nunito", sans-serif; white-space: nowrap; }

/* Invoer (Figma: Input, 32px, radius 16, rand light-02) */
.zoekveld { position: relative; }
.zoekveld input { width: 100%; height: 32px; border: 1px solid var(--light-02); border-radius: 16px; background: var(--wit); padding: 0 32px 0 16px; font: 400 12px/16px "Nunito", sans-serif; color: var(--dark-01); }
.zoekveld input::placeholder { color: var(--dark-04); }
.zoekveld input:focus { outline: none; border-color: var(--accent-02); }
.zoekveld .icoon { position: absolute; right: 8px; top: 8px; color: var(--dark-01); pointer-events: none; }

/* Formulieren */
.veld { margin-bottom: 16px; }
.veld label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 12px; line-height: 16px; }
.veld input, .veld select, .veld textarea { width: 100%; padding: 10px 16px; border: 1px solid var(--light-02); border-radius: 16px; font: 400 14px "Nunito", sans-serif; color: var(--dark-01); background: var(--wit); }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--accent-02); outline: none; }
.veld input[type=checkbox] { width: auto; accent-color: var(--accent-02); }
.veld .hulp { font-size: 12px; color: var(--dark-04); margin-top: 4px; }
.veld .fouten { color: var(--fout); font-size: 12px; margin-top: 4px; font-weight: 700; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Meldingen */
.melding { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 700; font-size: 12px; background: var(--wit); }
.melding.success { background: var(--accent-licht); color: var(--goed); }
.melding.error { background: var(--fout-licht); color: var(--fout); }
.melding.info, .melding.warning { background: var(--let-op-licht); color: var(--let-op); }

/* Kaarten en lijsten */
.kaart { background: var(--wit); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.kaart h3 { margin: 0 0 6px; }
.kaart .acties { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.leeg { color: var(--dark-04); padding: 20px; text-align: center; border: 1px dashed var(--light-04); border-radius: 8px; }
.label { display: inline-block; padding: 2px 10px; border-radius: 40px; font-size: 12px; font-weight: 700; background: var(--light-01-2); color: var(--dark-02); }
.label.goed { background: var(--accent-licht); color: var(--goed); }
.label.let-op { background: var(--let-op-licht); color: var(--let-op); }
.label.fout { background: var(--fout-licht); color: var(--fout); }
.label.accent { background: var(--dark-01); color: #fff; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--light-02); }
.lijst li:last-child { border-bottom: 0; }

/* ---------- Planning (Figma node 586:615) ---------- */
.planning { display: flex; align-items: flex-start; min-height: calc(100vh - 80px); padding-left: 40px; }
.filters { width: 136px; flex: none; position: sticky; top: 80px; max-height: calc(100vh - 80px); overflow-y: auto; padding-bottom: 24px; scrollbar-width: none; }
.filters h3 { margin: 0 0 8px; }
.filters .zoekveld { margin-bottom: 8px; }
.filters .groep { border-bottom: 1px solid var(--light-02); padding-bottom: 8px; margin-bottom: 8px; }
.filters .blok + .blok { margin-top: 24px; }
.keuze { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; font-size: 12px; line-height: 16px; cursor: pointer; color: var(--dark-01); }
.keuze.hoofdrij { font-weight: 700; }
.keuze .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.keuze.hoofdrij .naam { white-space: nowrap; }
.keuze input { appearance: none; -webkit-appearance: none; flex: none; width: 12px; height: 12px; margin: 2px; border: 1.333px solid var(--light-04); border-radius: 4px; background: var(--wit); cursor: pointer; display: grid; place-items: center; }
.keuze input:checked { background: var(--dark-04); border-color: var(--dark-04); }
.keuze input:checked::after { content: ""; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg); }
.keuze button { background: none; border: 0; padding: 0; color: var(--dark-01); cursor: pointer; display: grid; place-items: center; }
.groep.dicht .kinderen { display: none; }
.groep.dicht .omhoog-icoon { transform: rotate(180deg); }

.week { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--dagen, 7), minmax(144px, 1fr)); margin-left: 8px; overflow-x: auto; }
.dagkolom { border-left: 1px solid var(--light-02); padding: 0 4px 24px; min-height: calc(100vh - 80px); }
.dagkop { display: flex; align-items: center; gap: 8px; color: var(--dark-04); height: 32px; padding: 0 4px; border-bottom: 1px solid var(--light-02); margin: 0 -4px 16px; }
.dagkop b { font-size: 20px; line-height: 24px; font-weight: 700; }
.dagkop span { font-size: 12px; line-height: 16px; }
.dagkop.vandaag { color: var(--accent-02); }
.dagkop .toevoegen { margin-left: auto; color: var(--dark-04); opacity: 0; display: grid; place-items: center; }
.dagkolom:hover .toevoegen { opacity: 1; }
.dagkop .toevoegen:hover { color: var(--accent-02); }

/* Dienstkaart (Figma: BoxPlanning) */
.dienst { display: flex; flex-direction: column; gap: 8px; background: var(--wit); border-radius: 8px; padding: 8px; margin-bottom: 8px; text-decoration: none; color: var(--dark-01); }
.dienst:hover { box-shadow: 0 2px 8px rgba(18, 40, 78, .08); }
.dienst.vol { background: var(--accent-licht); }
.dienst.grijs { background: var(--light-01-2); }
.dienst.weg { background: var(--light-01-2); }
.dienst.weg .titel { text-decoration: line-through; }
.dienst .titel { font-size: 12px; line-height: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dienst .punten { display: flex; flex-direction: column; }
.dienst .punt { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--dark-04); }
.dienst .punt .icoon { margin-top: 0; }
.dienst .punt.open { color: var(--fout); font-weight: 700; }
.dienst .tijd { font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: .4px; color: var(--dark-04); text-align: right; }

/* ---------- App voor medewerkers (Figma-pagina iOS) ---------- */
.pagina { max-width: 480px; margin: 0 auto; padding: 0 20px 120px; }
.kop { background: var(--wit); }
.kop-in { max-width: 480px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 16px; }
.kop .logo img { height: 24px; display: block; }
.kop .gebruiker { margin-left: auto; }
body.app { background: var(--light-01); }
.appbalk { position: sticky; top: 0; z-index: 5; background: var(--light-01); max-width: 480px; margin: 0 auto; height: 64px; padding: 0 20px; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; }
.appbalk h1 { margin: 0; font-size: 20px; line-height: 24px; text-align: center; }
.appbalk .terug { color: var(--accent-02); display: grid; place-items: center; width: 32px; height: 32px; }
.tabs-balk { display: block; height: auto; padding: 16px 20px 8px; }
.schakelaar.breed { display: flex; width: 100%; }
.schakelaar.breed a { flex: 1; min-width: 0; padding: 8px 4px; }
.dagkop-app { height: 48px; display: flex; align-items: flex-end; padding-bottom: 12px; margin: 0 0 16px; font-size: 16px; line-height: 24px; color: var(--dark-04); }
.werkkaart { display: flex; flex-direction: column; gap: 8px; background: var(--wit); border: 2px solid var(--wit); border-radius: 16px; padding: 14px; margin-bottom: 16px; color: var(--dark-01); text-decoration: none; }
.werkkaart.bezig { border-color: var(--accent-01); }
.werkkaart .titel { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 24px; font-weight: 700; }
.werkkaart .regel { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.werkkaart .adres { font-size: 12px; line-height: 16px; }
.werkkaart .tekst { font-size: 16px; line-height: 24px; }
.werkkaart .pil { flex: none; }
.werkkaart .pil.donker { color: var(--accent-01); }
.werkkaart .notitie { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--dark-04); }
.werkkaart .notitie.actie { color: var(--accent-02); }
.werkkaart .wis { background: none; border: 0; padding: 0; color: var(--accent-02); cursor: pointer; display: grid; place-items: center; }
.tabbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--dark-01); display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.tabbalk a { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dark-04); font-size: 12px; line-height: 16px; font-weight: 700; text-decoration: none; }
.tabbalk a.aan { color: var(--accent-01); }
.leeg-app { text-align: center; padding: 64px 16px; color: var(--dark-04); font-size: 16px; line-height: 24px; }
.leeg-app .map { position: relative; width: 96px; height: 68px; margin: 0 auto 24px; border: 2px dashed var(--light-04); border-radius: 8px; background: var(--wit); }
.leeg-app .map::before { content: ""; position: absolute; left: 28px; top: -12px; width: 32px; height: 12px; border: 2px dashed var(--light-04); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--wit); }
.leeg-app .knop { margin-top: 8px; }

.dienst-app .boven { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pil.wit { background: var(--wit); }
.dienst-app .status { font-size: 16px; font-weight: 700; color: var(--accent-02); }
.dienst-app .status-aangemeld, .dienst-app .status-aangeboden { color: var(--dark-02); }
.dienst-app h2 { margin: 24px 0 16px; }
.dienst-app .omschrijving, .intro { font-size: 16px; line-height: 24px; margin: 0 0 16px; }
.dienst-app .feiten { font-size: 12px; line-height: 16px; color: var(--dark-04); font-weight: 700; margin: 0 0 24px; }
.dienst-app hr { border: 0; border-top: 1px solid var(--light-02); margin: 24px 0; }
.dienst-app .waar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dienst-app .waar b { font-size: 16px; line-height: 24px; }
.dienst-app .waar p { margin: 8px 0 0; font-size: 16px; line-height: 24px; }
.logo-rond { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--wit); display: grid; place-items: center; font-weight: 800; color: var(--dark-01); }
.acties-app { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.uitleg { font-size: 12px; line-height: 16px; color: var(--dark-02); margin: 0; }
.blok-app { margin-bottom: 24px; }
.schuif { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.schuif input { width: 20px; height: 20px; accent-color: var(--accent-02); }
.fab { position: fixed; right: max(16px, calc(50vw - 240px + 16px)); bottom: 88px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-01); color: var(--dark-01); display: grid; place-items: center; box-shadow: var(--reflex); }

.profielkop { text-align: center; margin: 32px 0 24px; }
.avatar-groot { width: 128px; height: 128px; border-radius: 50%; border: 8px solid var(--wit); background: var(--accent-licht); color: var(--dark-01); display: grid; place-items: center; margin: 0 auto 16px; font-size: 40px; font-weight: 800; }
.profielkop h2 { font-size: 32px; line-height: 40px; margin: 0 0 16px; }
.profielkop p { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.sectie { color: var(--dark-04); font-size: 14px; margin: 32px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-app { background: var(--wit); border-radius: 40px; padding: 8px 16px; font-size: 12px; font-weight: 700; }
.gegevens.app div { grid-template-columns: 110px 1fr; font-size: 14px; }
.gegevens.app { margin: 24px 0 32px; }

/* ---------- Inloggen ---------- */
body.inlogpagina { background: var(--dark-01); }
.inlog { max-width: 464px; margin: 9vh auto 0; background: var(--wit); border-radius: 16px; padding: 40px 64px; }
.inlog .logo { display: block; margin: 0 auto 24px; text-align: center; }
.inlog .logo img { height: 32px; margin: 0 auto; }
.inlog h1 { font-size: 20px; line-height: 24px; }
.inlog p { margin: 0 0 16px; }
.inlog label { display: block; font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.inlog input[type=email], .inlog input[type=password], .inlog input[type=text] { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--light-02); border-radius: 24px; font: inherit; color: var(--dark-01); }
.inlog input:focus { border-color: var(--accent-02); outline: none; }
.inlog button { display: inline-flex; height: 48px; align-items: center; border-radius: 40px; border: 0; background: var(--accent-01); color: var(--dark-01); font: 700 14px "Nunito", sans-serif; cursor: pointer; width: 100%; justify-content: center; margin-top: 8px; box-shadow: var(--reflex); }
.inlog img { display: block; margin: 12px auto; max-width: 220px; }
.inlog ul.errorlist { color: var(--fout); padding-left: 18px; font-size: 12px; }
.inlog .fouten { color: var(--fout); font-size: 12px; font-weight: 700; }

@media (max-width: 860px) {
  .rail { width: 56px; }
  .hoofd { margin-left: 56px; }
  .paginakop { padding: 0 16px; height: auto; min-height: 80px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; position: static; }
  .paginakop h1 { font-size: 24px; }
  .inhoud { padding: 0 16px 48px; }
  .planning { flex-direction: column; padding-left: 16px; }
  .filters { width: 100%; position: static; max-height: none; }
  .week { margin-left: 0; width: 100%; }
  .dagkop { top: 0; }
  .twee { grid-template-columns: 1fr; }
}

/* Inloggen en tweestapsverificatie zonder menubalk */
.inlogpagina .rail, .inlogpagina .paginakop { display: none; }
.inlogpagina .hoofd { margin-left: 0; }
.inlogpagina main.inhoud { padding: 0 16px; }
.balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.balk .ruimte { flex: 1; }
[hidden] { display: none !important; }
.inhoud.vol { padding: 0; }
.planning { padding-right: 24px; }
.week.een-dag .dagkolom { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 8px; align-content: start; }
.week.een-dag .dagkop { grid-column: 1 / -1; }

/* ---------- Venster "Dienst toevoegen" (Figma node 587:2056) ---------- */
.venster-dialoog { border: 0; padding: 0; background: transparent; max-height: calc(100vh - 80px); margin: 40px auto auto; overflow: visible; }
.venster-dialoog::backdrop { background: rgba(136, 147, 169, .5); }
.venster-los { display: flex; justify-content: center; padding: 0 0 40px; }
.venster { width: 464px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); overflow-y: auto; background: var(--wit); border-radius: 16px; box-shadow: 0 6px 20px rgba(18, 40, 78, .16); padding: 40px; }
.venster-dialoog .venster { max-height: calc(100vh - 80px); }
.venster-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.venster-kop h2 { margin: 0; font-size: 20px; line-height: 24px; }
.sluiten { width: 32px; height: 32px; border: 2px solid var(--accent-02); border-radius: 40px; color: var(--accent-02); display: grid; place-items: center; }
.sluiten:hover { background: var(--accent-licht); }
.velden { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.vakken2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Invoervak met label erin (Figma: Input, 64px, radius 16) */
.vak { position: relative; min-height: 64px; background: var(--wit); border: 1px solid var(--light-02); border-radius: 16px; }
.vak:focus-within { border-color: var(--accent-02); }
.vak.fout { border-color: var(--fout); }
.vak label { position: absolute; left: 16px; right: 16px; top: 12px; font: 700 12px/16px "Nunito", sans-serif; color: var(--dark-04); pointer-events: none; }
.vak input, .vak select, .vak textarea, .vak output { display: block; width: 100%; border: 0; background: transparent; padding: 32px 16px 11px; font: 400 16px/20px "Nunito", sans-serif; color: var(--dark-01); border-radius: 16px; outline: none; -webkit-appearance: none; appearance: none; min-height: 62px; }
.vak input::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.vak.keuzelijst select { padding-right: 48px; cursor: pointer; text-overflow: ellipsis; }
.vak .pijl { position: absolute; right: 22px; top: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--dark-01); margin-top: -2px; pointer-events: none; }
.vak.groot textarea { min-height: 198px; line-height: 24px; resize: vertical; }
.vak.alleen-lezen { background: var(--light-01); border-color: var(--light-01); }
.vak.alleen-lezen output { color: var(--dark-02); }
.vakfout { color: var(--fout); font-size: 12px; font-weight: 700; margin: -8px 0 0 16px; }
.vakhulp { color: var(--dark-04); font-size: 12px; margin: -8px 0 0 16px; }
.knop.groot { height: 48px; font-size: 14px; }
@media (max-width: 520px) { .venster { padding: 24px; } .vakken2 { grid-template-columns: 1fr; } }

/* ---------- Dienstdetail (Figma: Jobs - Offers, detailpaneel) ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 464px) minmax(0, 1fr); gap: 40px; align-items: start; }
.paneel { background: var(--wit); border-radius: 16px; padding: 40px; }
.paneel-boven { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.pil { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 40px; background: var(--light-01); font: 700 12px/16px "Nunito", sans-serif; color: var(--dark-01); }
.pil.donker { background: var(--dark-02); color: #fff; }
.pil.goed { background: none; color: var(--accent-02); font-size: 16px; padding: 0; }
.pil.open { background: none; color: var(--fout); font-size: 16px; padding: 0; }
.pil.fout { background: var(--fout-licht); color: var(--fout); }
.paneel h2 { margin: 40px 0 16px; }
.omschrijving { font-size: 16px; line-height: 24px; margin: 0 0 40px; }
.gegevens { margin: 24px 0 32px; }
.gegevens div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--light-02); font-size: 16px; line-height: 24px; }
.gegevens dt { color: var(--dark-04); }
.gegevens dd { margin: 0; color: var(--dark-01); }
.bezetting .kaart { border-radius: 16px; padding: 24px; }
.bezetting .kaart h3 { color: var(--dark-04); font-size: 16px; }
@media (max-width: 1100px) { .detail { grid-template-columns: 1fr; } }

/* Keuzes in het dienstformulier */
.keuzes { border: 1px solid var(--light-02); border-radius: 16px; padding: 12px 16px; margin: 0; }
.keuzes legend { font: 700 12px/16px "Nunito", sans-serif; color: var(--dark-04); padding: 0 4px; }
.keuzerij { display: flex; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; line-height: 20px; cursor: pointer; }
.keuzerij input { width: 18px; height: 18px; accent-color: var(--accent-02); margin: 0; flex: none; }
.keuzerij small { display: block; color: var(--dark-04); font-size: 12px; }
.keuzerij.vink { border-top: 1px solid var(--light-02); margin-top: 4px; padding-top: 12px; }
.dienst.concept { background: transparent; border: 1px dashed var(--light-04); }
.dienst .markering { align-self: flex-start; font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dark-02); background: var(--light-01-2); border-radius: 40px; padding: 0 8px; }
.let-op-kaart { border: 2px solid var(--fout-licht); }
.na-bevestiging { background: var(--accent-licht); border-radius: 16px; padding: 16px; margin: 0 0 16px; }
.na-bevestiging p { margin: 4px 0 0; font-size: 16px; line-height: 24px; }
details.afmelden summary { list-style: none; }
details.afmelden summary::-webkit-details-marker { display: none; }
details.afmelden[open] summary { display: none; }

/* ---------- Meldingen ---------- */
.bel { position: relative; color: #fff; opacity: .75; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; }
.bel:hover { opacity: 1; }
.teller { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-01); color: var(--dark-01); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.tabs-balk { display: flex; align-items: center; gap: 8px; }
.tabs-balk .schakelaar { flex: 1; }
.tabs-balk .bel { color: var(--dark-01); opacity: 1; margin: 0; flex: none; }
.alles-gelezen { text-align: right; margin: 8px 0 12px; }
.meldingen { list-style: none; padding: 0; margin: 0; }
.meldingen li { margin-bottom: 8px; }
.meldingen a { display: flex; gap: 12px; background: var(--wit); border-radius: 16px; padding: 14px 16px; color: var(--dark-01); text-decoration: none; }
.meldingen .punt-nieuw { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: transparent; }
.meldingen li.nieuw .punt-nieuw { background: var(--accent-02); }
.inhoud-melding { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; }
.inhoud-melding small { color: var(--dark-04); font-size: 12px; }
.meldingen li:not(.nieuw) b { font-weight: 600; }
.pushblok { background: var(--wit); border-radius: 16px; padding: 16px; margin-top: 24px; font-size: 14px; }
.pushblok p { margin: 0 0 12px; }

/* ---------- Uren (kantoor) ---------- */
.urenfilter { display: flex; gap: 8px; align-items: center; }
.urenfilter .zoekveld { width: 180px; }
.kiezer select { height: 32px; border: 1px solid var(--light-02); border-radius: 16px; background: var(--wit); padding: 0 12px; font: 400 12px "Nunito", sans-serif; color: var(--dark-01); }
.statusfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 16px; }
.statusfilters a { padding: 8px 14px; border-radius: 40px; background: var(--wit); font-size: 12px; font-weight: 700; color: var(--dark-02); text-decoration: none; }
.statusfilters a b { margin-left: 4px; color: var(--dark-04); }
.statusfilters a.aan { background: var(--accent-01); color: var(--dark-01); box-shadow: var(--reflex); }
.statusfilters a.aan b { color: var(--dark-01); }
.statusfilters .ruimte { flex: 1; }
.bulkbalk { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tabel-wrap { background: var(--wit); border-radius: 16px; overflow-x: auto; }
.urentabel { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; min-width: 980px; }
.urentabel th { text-align: left; font-size: 12px; color: var(--dark-04); font-weight: 700; padding: 14px 12px; border-bottom: 1px solid var(--light-02); }
.urentabel td { padding: 12px; border-bottom: 1px solid var(--light-01); vertical-align: top; }
.urentabel tr:last-child td { border-bottom: 0; }
.urentabel a { color: var(--dark-01); font-weight: 700; text-decoration: none; }
.urentabel input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-02); }
.opmerking { margin-top: 4px; font-size: 12px; color: var(--dark-02); font-style: italic; max-width: 260px; }
.verschil { font-weight: 700; }
.verschil.nul { color: var(--dark-04); }
.verschil.meer { color: var(--let-op); }
.verschil.minder { color: var(--fout); }
.urenstatus { display: inline-block; padding: 2px 10px; border-radius: 40px; font-size: 12px; font-weight: 700; background: var(--light-01-2); color: var(--dark-02); white-space: nowrap; }
.urenstatus.s-doorgegeven { background: var(--accent-licht); color: var(--goed); }
.urenstatus.s-doorgegeven.afwijkend { background: var(--let-op-licht); color: var(--let-op); }
.urenstatus.s-afgekeurd { background: var(--fout-licht); color: var(--fout); }
.urenstatus.s-goedgekeurd { background: var(--dark-01); color: var(--accent-01); }
.acties-cel { white-space: nowrap; text-align: right; }

/* Kaart (zoals het Figma-ontwerp: afgeronde kaart met mint speld) */
.kaartvak { height: 200px; border-radius: 16px; overflow: hidden; background: var(--light-01-2); margin: 0 0 24px; z-index: 0; cursor: pointer; }
.kaartvak .leaflet-tile-pane { filter: saturate(.75) hue-rotate(-12deg); }
.kaartvak .leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, .75); }
.arc-speld span { display: block; width: 32px; height: 32px; margin-left: 0; border-radius: 50% 50% 50% 0; background: var(--accent-02); transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(18, 40, 78, .25); position: relative; }
.arc-speld span::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; left: 10px; top: 10px; }
.statuspil { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 40px; background: var(--dark-02); color: var(--accent-01); font-weight: 700; font-size: 14px; margin-top: 16px; }
.statuspil.licht { background: var(--light-01-2); color: var(--dark-02); }

/* Opdrachtgevers en locaties (Figma: Branches / Workers: lijst links, paneel rechts) */
.paginakop .zoekveld { width: 280px; }
.tweekolom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.lijstkolom { display: flex; flex-direction: column; gap: 16px; }
.lijstkaart { display: flex; align-items: center; gap: 16px; background: var(--wit); border: 2px solid transparent; border-radius: 16px; padding: 16px; color: var(--dark-01); text-decoration: none; }
.lijstkaart:hover { border-color: var(--light-02); }
.lijstkaart.aan { border-color: var(--accent-01); }
.lijstkaart.uit { opacity: .6; }
.lijstkaart .logo-rond { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--light-01); display: grid; place-items: center; font-weight: 700; color: var(--dark-02); }
.lijstkaart-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lijstkaart-tekst b { font-size: 16px; line-height: 24px; }
.lijstkaart-tekst small, .locatiekaart-tekst small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--dark-02); }
.paneel-titel { margin: 0 !important; font-size: 20px; line-height: 24px; }
.sectiekop { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 16px; }
.sectiekop h3 { margin: 0; font-size: 16px; color: var(--dark-04); }
.locatiekaart { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--light-02); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.locatiekaart.uit { opacity: .55; }
.locatiekaart-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.locatiekaart-tekst b { font-size: 16px; line-height: 24px; }
.locatiekaart-tekst small { flex-basis: 100%; }
.locatiekaart-acties { display: flex; gap: 4px; flex: none; }
.locatiekaart-acties form { margin: 0; }
.let-op-tekst { color: var(--let-op); font-weight: 700; }
.vakken-adres { display: grid; grid-template-columns: 1fr 96px; gap: 16px; }
@media (max-width: 1000px) { .tweekolom { grid-template-columns: 1fr; } }
.opsomming { margin: 12px 0 16px; padding-left: 20px; line-height: 24px; }
.knoppenrij { display: flex; gap: 8px; flex-wrap: wrap; }
.gevaar-tekst { color: var(--fout) !important; }
.venster.breed-venster { width: 640px; }
.vak textarea { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* Arc-assistent: paneel rechts */
.assistent { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 50; background: var(--wit); box-shadow: 0 6px 20px rgba(18, 40, 78, .16); display: flex; flex-direction: column; }
.assistent[hidden] { display: none; }
.assistent-kop { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--light-02); }
.assistent-kop b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.assistent-kop .ruimte { flex: 1; }
.assistent-kop .sluiten { background: none; cursor: pointer; }
.assistent-berichten { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.assistent-berichten p { margin: 0 0 8px; }
.assistent-berichten p:last-child { margin-bottom: 0; }
.assistent-berichten ul { margin: 4px 0 8px; padding-left: 20px; }
.assistent-welkom { color: var(--dark-02); font-size: 14px; line-height: 20px; }
.bericht { max-width: 90%; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.bericht.ik { align-self: flex-end; background: var(--accent-licht); color: var(--dark-01); border-bottom-right-radius: 4px; }
.bericht.arc { align-self: flex-start; background: var(--light-01); color: var(--dark-01); border-bottom-left-radius: 4px; }
.bericht.bezig { color: var(--dark-04); font-style: italic; }
.bericht.fout { align-self: flex-start; background: var(--fout-licht); color: var(--fout); }
.assistent-invoer { display: flex; gap: 8px; align-items: flex-end; padding: 16px 20px; border-top: 1px solid var(--light-02); }
.assistent-invoer textarea { flex: 1; resize: none; border: 1px solid var(--light-02); border-radius: 16px; padding: 10px 14px; font: 400 14px/20px "Nunito", sans-serif; color: var(--dark-01); max-height: 200px; }
.assistent-invoer textarea:focus { outline: none; border-color: var(--accent-02); }
.assistent-invoer { flex-direction: column; align-items: stretch; gap: 8px; }
.assistent-invoer .uitleg { margin: 0; color: var(--dark-04); font-size: 11px; }
.assistent-rij { display: flex; gap: 8px; align-items: flex-end; }
.bijlage-knop { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--dark-02); cursor: pointer; border: 1px solid var(--light-02); }
.bijlage-knop:hover { border-color: var(--accent-02); color: var(--accent-02); }
.assistent-bijlagen { display: flex; flex-wrap: wrap; gap: 6px; }
.assistent-bijlagen[hidden] { display: none; }
.bijlage-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--light-01); border-radius: 40px; padding: 4px 6px 4px 12px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bijlage-chip button { border: 0; background: var(--light-02); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; }
.assistent.sleep { outline: 3px dashed var(--accent-02); outline-offset: -8px; }

/* Medewerkers (Figma: Workers) */
.zoekbalk { display: flex; gap: 8px; align-items: center; }
.zoekbalk .zoekveld { width: 240px; }
.zoekbalk select { height: 32px; border: 1px solid var(--light-02); border-radius: 16px; background: var(--wit); padding: 0 12px; font: 400 12px/16px "Nunito", sans-serif; color: var(--dark-01); }
.lijstkaart-rechts { margin-left: auto; flex: none; }
.profiel-boven { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.profiel-boven .avatar-groot { width: 96px; height: 96px; font-size: 32px; margin: 0; border-width: 4px; border-color: var(--light-01); flex: none; }
.profiel-boven a { color: var(--dark-02); text-decoration: none; font-size: 14px; }
.labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sectie-titel { margin: 28px 0 12px; font-size: 14px; color: var(--dark-04); }
.paneel .chip-app { background: var(--light-01); }
.paneel .gegevens { margin-top: 16px; }
.dienstregel { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border: 1px solid var(--light-02); border-radius: 12px; margin-bottom: 8px; color: var(--dark-01); text-decoration: none; font-size: 14px; }
.dienstregel span:not(.label) { grid-column: 1; color: var(--dark-02); font-size: 12px; }
.dienstregel .label { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.vinkchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.vinkchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--light-02); border-radius: 40px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.vinkchip:has(input:checked) { border-color: var(--accent-02); background: var(--accent-licht); }
.vinkchip input { accent-color: var(--accent-02); }
.vak.lijstkeuze select { min-height: 140px; padding-top: 32px; }
.terug-mobiel { display: none; }
.smal-blok { max-width: 760px; }

/* ---------- Kantoor op de telefoon ---------- */
.alleen-mobiel { display: none !important; }
@media (max-width: 768px) {
  .alleen-mobiel { display: inline-flex !important; }
  .knop-tekst { display: none; }

  /* Menu als tabbalk onderin */
  .rail { inset: auto 0 0 0; width: 100%; height: 64px; flex-direction: row; justify-content: space-around; padding: 0 4px env(safe-area-inset-bottom); }
  .rail .merk, .rail .wie, .rail > form { display: none; }
  .rail nav { flex: none; flex-direction: row; gap: 0; display: contents; }
  .rail nav a, .rail .bel { width: 44px; height: 44px; display: grid; place-items: center; }
  .rail .bel { color: #fff; opacity: .55; margin: 0; position: relative; }
  .hoofd { margin-left: 0; padding-bottom: 72px; }

  /* Paginakop compact */
  .paginakop { position: static; padding: 12px 16px; gap: 8px; min-height: 0; flex-wrap: wrap; }
  .paginakop h1 { font-size: 22px; line-height: 28px; margin: 0; flex-basis: 100%; }
  .paginakop .ruimte { display: none; }
  .paginakop .zoekveld, .zoekbalk, .zoekbalk .zoekveld, .paginakop .zoekveld input { width: 100%; }
  .zoekbalk { flex-wrap: wrap; flex-basis: 100%; }
  .zoekbalk select { flex: 1; }
  /* Volgorde op de telefoon: titel / weergave + acties / periode + vandaag / publiceren */
  .paginakop .knop { padding-left: 16px; padding-right: 16px; }
  .paginakop .schakelaar a { min-width: 0; padding: 8px 12px; }
  .periode { min-width: 0; flex: 1 1 60%; order: 3; }
  .paginakop .periode ~ .knop.rand[href] { order: 3; }
  .paginakop form.inline { order: 4; flex-basis: 100%; }
  .paginakop form.inline .knop { width: 100%; justify-content: center; }
  .paginakop form.inline .knop-tekst { display: inline; }
  .inhoud { padding: 0 12px 24px; }
  .melding { margin: 8px 0; }

  /* Planning: filters inklapbaar, dagen onder elkaar */
  .planning { padding: 0 12px; }
  .filters { display: none; }
  .filters.open { display: block; background: var(--wit); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
  .week { display: block; overflow: visible; }
  .dagkolom { border-left: 0; min-height: 0; padding: 0 0 8px; }
  .dagkop { position: sticky; top: 0; z-index: 2; background: var(--light-01); margin: 0 0 8px; height: 40px; }
  .dagkop .toevoegen { opacity: 1; }
  .dienst { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px; border-radius: 12px; }
  .dienst .titel { font-size: 14px; }
  .dienst .tijd { grid-column: 2; grid-row: 1; font-size: 12px; }
  .dienst .punten, .dienst .markering { grid-column: 1 / -1; }
  .week.een-dag .dagkolom { display: block; }

  /* Vensters schermvullend */
  .venster-dialoog { margin: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; }
  .venster, .venster.breed-venster, .venster-dialoog .venster { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 20px 16px 32px; }
  .venster-kop { position: sticky; top: -20px; background: var(--wit); z-index: 1; padding: 8px 0; margin-bottom: 16px; }

  /* Lijst + detail: op de telefoon één tegelijk */
  .tweekolom { gap: 16px; }
  .tweekolom.met-detail .lijstkolom { display: none; }
  .tweekolom:not(.met-detail) > .paneel { display: none; }
  .terug-mobiel { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-02); font-weight: 700; font-size: 14px; text-decoration: none; margin-bottom: 16px; }
  .paneel { padding: 20px 16px; border-radius: 16px; }
  .paneel-boven { flex-wrap: wrap; }
  .profiel-boven { gap: 14px; }
  .profiel-boven .avatar-groot { width: 64px; height: 64px; font-size: 22px; }
  .sectiekop { flex-wrap: wrap; gap: 8px; }
  .locatiekaart { flex-direction: column; align-items: stretch; }
  .locatiekaart-acties { justify-content: flex-end; flex-wrap: wrap; }
  .gegevens div { grid-template-columns: 110px 1fr; font-size: 14px; }

  /* Uren en detail */
  .urenfilter { flex-wrap: wrap; width: 100%; }
  .urenfilter .zoekveld { width: 100%; }
  .detail { gap: 16px; }

  /* Assistent schermvullend boven de tabbalk */
  .assistent { width: 100vw; bottom: 0; z-index: 60; }
}

/* Zijpaneel: details rechts, zonder van pagina te wisselen */
.zp-achter { position: fixed; inset: 0; z-index: 40; background: rgba(18, 40, 78, .18); }
.zp-achter[hidden] { display: none; }
.zijpaneel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 45; background: var(--wit); box-shadow: -8px 0 24px rgba(18, 40, 78, .14); overflow-y: auto; overscroll-behavior: contain; animation: zp-in .16s ease-out; }
.zijpaneel[hidden] { display: none; }
.zijpaneel.laden { cursor: progress; }
.zijpaneel.laden .zp-romp { opacity: .55; transition: opacity .1s; }
@keyframes zp-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.zp-laden { padding: 40px; color: var(--dark-04); }
.zp-kop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 14px 24px; background: var(--wit); border-bottom: 1px solid var(--light-02); }
.zp-kop .ruimte { flex: 1; }
.zp-kop .sluiten { background: none; cursor: pointer; }
.zp-romp { padding: 24px 32px 48px; }
.zp-titel { margin: 20px 0 6px; font-size: 24px; line-height: 30px; }
.zp-titel:focus { outline: none; }
.zp-sub { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 20px; color: var(--dark-02); font-size: 14px; line-height: 20px; }
.zp-sub .icoon { flex: none; margin-top: 2px; }
.zp-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.zp-acties form { margin: 0; }
.zp-kopie { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin: 12px 0 0; padding: 16px; background: var(--light-01); border-radius: 16px; }
.zp-kopie[hidden] { display: none; }
.zp-kopie .uitleg { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--dark-04); }
.zp-blok { margin-top: 28px; }
.zp-blok h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.zp-blok .teller-tekst { color: var(--dark-04); font-weight: 700; font-size: 14px; }
.zp-blok .lijst li { padding: 10px 0; }
.zp-blok .lijst li[hidden] { display: none; }
.let-op-blok { background: var(--let-op-licht); border-radius: 16px; padding: 16px; }
.let-op-blok .lijst li { border-color: rgba(154, 91, 0, .15); }
.persoon { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.persoon > span:last-child { min-width: 0; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--light-01-2); color: var(--dark-02); font: 800 11px/1 "Nunito", sans-serif; position: relative; }
.avatar.beschikbaar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-02); border: 2px solid var(--wit); }
.rij-acties { display: flex; gap: 6px; flex: none; }
.rij-acties form { margin: 0; }
.klein-zoek { display: block; margin-bottom: 4px; }
.zp-meer summary { cursor: pointer; font-weight: 800; font-size: 16px; color: var(--dark-01); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.zp-meer summary::-webkit-details-marker { display: none; }
.zp-meer summary::after { content: "+"; font-size: 20px; color: var(--accent-02); }
.zp-meer[open] summary::after { content: "–"; }
.zp-meer .gegevens { margin-top: 8px; }
.pil.goed-pil { background: var(--accent-licht); color: var(--goed); }
.pil.open-pil { background: var(--fout-licht); color: var(--fout); }
.ververs-vak { display: contents; }
.dienst.zp-gekozen { outline: 2px solid var(--accent-02); outline-offset: 1px; }
.zp-pagina { padding: 0; overflow: hidden; }
.zp-pagina .zp-kop { position: static; }
body.zp-open { overflow: hidden; }

@media (max-width: 768px) {
  .zijpaneel { width: 100vw; z-index: 60; animation: none; padding-bottom: env(safe-area-inset-bottom); }
  .zp-romp { padding: 16px 16px 40px; }
  .zp-kop { padding: 12px 16px; }
  .zp-blok .lijst li { flex-wrap: wrap; }
  .rij-acties { margin-left: 42px; }
}

/* Uren: totalen, weekstaat, paneel */
.urentotalen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
.urentotalen div { background: var(--wit); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.urentotalen span { font-size: 12px; font-weight: 700; color: var(--dark-04); }
.urentotalen b { font-size: 22px; line-height: 28px; color: var(--dark-01); }
.urentotalen .goed b { color: var(--goed); }
.urentotalen .let-op b { color: var(--let-op); }
.bulk-selectie { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-selectie[hidden] { display: none; }
.urentabel tr[data-rij] { cursor: pointer; }
.urentabel tr[data-rij]:hover td { background: #fafbfc; }
.urentabel tr.zp-gekozen td, .urentabel tr:has(a.zp-gekozen) td { background: var(--accent-licht); }
.urentabel .acties-cel { white-space: nowrap; text-align: right; }
.urentabel .acties-cel form { display: inline; }
.weekstaat { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.weekstaat th, .weekstaat td { padding: 10px 8px; border-bottom: 1px solid var(--light-01); text-align: center; vertical-align: middle; }
.weekstaat thead th { font-size: 12px; color: var(--dark-04); font-weight: 700; text-transform: capitalize; }
.weekstaat tbody th { text-align: left; font-weight: 700; min-width: 200px; }
.weekstaat td { min-width: 76px; }
.weekstaat .totaal { font-weight: 800; color: var(--dark-01); background: var(--light-01); }
.weekstaat tfoot th, .weekstaat tfoot td { font-weight: 800; border-bottom: 0; color: var(--dark-02); }
.weekstaat tfoot th { text-align: left; }
.urencel { display: inline-block; min-width: 52px; padding: 4px 8px; margin: 2px; border-radius: 8px; font-weight: 800; font-size: 12px; text-decoration: none; background: var(--light-01-2); color: var(--dark-04); border: 1px dashed var(--light-04); }
.urencel.s-doorgegeven { background: var(--accent-licht); color: var(--goed); border: 1px solid transparent; }
.urencel.s-doorgegeven.afwijkend { background: var(--let-op-licht); color: var(--let-op); }
.urencel.s-goedgekeurd { background: var(--dark-01); color: var(--accent-01); border: 1px solid transparent; }
.urencel.s-afgekeurd { background: var(--fout-licht); color: var(--fout); border: 1px solid transparent; }
.urencel.zp-gekozen { outline: 2px solid var(--accent-02); outline-offset: 1px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 0; }
.legenda .urencel { min-width: 0; font-weight: 700; }
.groot-persoon { gap: 14px; margin-top: 4px; }
.groot-persoon .avatar { width: 48px; height: 48px; font-size: 15px; background: var(--accent-licht); color: var(--dark-01); }
.groot-persoon .zp-titel { margin: 0; }
.zp-sub + .zp-sub { margin-top: -14px; }
.link-klein { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent-02); text-decoration: none; margin-bottom: 16px; }
.urenvergelijk { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 14px; }
.urenvergelijk th, .urenvergelijk td { padding: 9px 4px; border-bottom: 1px solid var(--light-02); text-align: left; }
.urenvergelijk thead th { font-size: 12px; color: var(--dark-04); }
.urenvergelijk tbody th { color: var(--dark-04); font-weight: 400; width: 30%; }
.urenvergelijk td.anders { color: var(--let-op); font-weight: 800; }
.urenvergelijk .som th, .urenvergelijk .som td { font-weight: 800; color: var(--dark-01); border-bottom: 0; }
.verschil-regel { font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.verschil-regel.meer { color: var(--let-op); }
.verschil-regel.minder { color: var(--fout); }
.citaat { background: var(--light-01); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.citaat p { margin: 4px 0 0; font-size: 14px; line-height: 20px; }
.fout-citaat { background: var(--fout-licht); color: var(--fout); }
.zp-acties-groot { margin-top: 20px; }
.zp-form { margin-top: 16px; padding: 16px; border: 1px solid var(--light-02); border-radius: 16px; }
.zp-form[hidden] { display: none; }
.zp-form h3 { margin: 0 0 12px; font-size: 16px; }
.zp-form .knop { margin-top: 12px; }
.zp-form .uitleg { font-size: 12px; color: var(--dark-04); margin: 8px 0 0; }
.historie { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 19px; }
.historie li { padding: 8px 0 8px 14px; border-left: 2px solid var(--light-02); position: relative; }
.historie li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-02); }

@media (max-width: 768px) {
  .urentotalen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .urentotalen b { font-size: 18px; }
  .statusfilters { flex-wrap: nowrap; overflow-x: auto; margin-left: -12px; margin-right: -12px; padding: 0 12px 4px; scrollbar-width: none; }
  .statusfilters a { white-space: nowrap; flex: none; }
  /* Urenlijst als kaarten */
  .tabel-wrap:has(.urentabel) { background: none; overflow: visible; }
  .urentabel { min-width: 0; display: block; }
  .urentabel thead { display: none; }
  .urentabel tbody { display: flex; flex-direction: column; gap: 8px; }
  .urentabel tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; background: var(--wit); border-radius: 16px; padding: 12px; }
  .urentabel td { padding: 0; border: 0; }
  .urentabel .kies { grid-row: 1 / span 2; padding-top: 2px; }
  .urentabel .wie { grid-column: 2; font-size: 15px; }
  .urentabel .status-cel { grid-column: 3; grid-row: 1; text-align: right; }
  .urentabel .wat { grid-column: 2 / -1; }
  .urentabel .gepland, .urentabel .gewerkt { grid-column: 2; font-size: 12px; }
  .urentabel .gepland::before { content: "Gepland "; color: var(--dark-04); }
  .urentabel .gewerkt::before { content: "Gewerkt "; color: var(--dark-04); }
  .urentabel .gepland br, .urentabel .gewerkt br { display: none; }
  .urentabel .gepland .stil::before, .urentabel .gewerkt > .stil::before { content: " · "; }
  .urentabel .verschil.nul { display: none; }
  .urentabel .verschil-cel { grid-column: 3; grid-row: 4; text-align: right; }
  .urentabel .acties-cel { grid-column: 2 / -1; text-align: left; margin-top: 8px; }
  .weekstaat tbody th { min-width: 150px; position: sticky; left: 0; background: var(--wit); z-index: 1; }
}
.vinkregel { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--dark-01); cursor: pointer; }
.vinkregel input { width: 18px; height: 18px; accent-color: var(--accent-02); }
.kopie-uitleg { margin: -12px 0 16px; font-size: 13px; line-height: 18px; color: var(--dark-02); }

/* ---- Overstap uit CleverGig ---- */
.overstap { max-width: 960px; }
.overstap h3 { margin: 24px 0 8px; }
.overstap-lijst { margin: 0; padding-left: 20px; font-size: 13px; line-height: 20px; }
.overstap-tabel { min-width: 0; }
.overstap details summary { cursor: pointer; }
.overstap details summary h3 { display: inline; }
.overstap hr { border: 0; border-top: 1px solid var(--light-02); margin: 24px 0; }
.overstap .knoppenrij { display: flex; gap: 8px; margin-top: 16px; }

/* Privacyverklaring (app en stores) */
.privacytekst h2 { font-size: 16px; line-height: 22px; margin: 20px 0 6px; }
.privacytekst ul { margin: 0 0 16px; padding-left: 18px; }
.privacytekst li { margin-bottom: 4px; }

/* ---------- Planningsbord: concept/open en ingepland gescheiden (issue #17) ---------- */
.week.banen { grid-template-rows: auto auto auto auto 1fr; align-items: start; }
.week.banen .dagkolom { display: contents; }
.week.banen .dagkop { grid-row: 1; grid-column: var(--kol); margin: 0; padding: 0 8px; border-left: 1px solid var(--light-02); }
.week.banen .vakje { grid-column: var(--kol); padding: 8px 4px; border-left: 1px solid var(--light-02); align-self: stretch; min-width: 0; }
.week.banen .vakje-open { grid-row: 3; min-height: 64px; }
.week.banen .vakje-ingepland { grid-row: 5; min-height: calc(100vh - 360px); }
.baan-kop { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 8px 8px 4px; font-size: 12px; line-height: 16px; color: var(--dark-04); border-left: 1px solid var(--light-02); }
.baan-kop b { font-size: 14px; line-height: 20px; color: var(--dark-01); }
.baan-open { grid-row: 2; }
.baan-ingepland { grid-row: 4; border-top: 1px solid var(--light-02); margin-top: 8px; padding-top: 12px; }
.vakje-naam { display: none; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dark-04); margin: 4px 0 6px; }
.week.banen.een-dag .vakje { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 8px; align-content: start; }
.week.banen.een-dag .vakje-naam { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .week.banen { display: block; }
  .week.banen .dagkolom { display: block; padding: 0 0 8px; }
  .week.banen .dagkop { margin: 0 0 8px; padding: 0 4px; border-left: 0; }
  .week.banen .vakje { display: block; padding: 0; border-left: 0; min-height: 0; }
  .week.banen .vakje-naam { display: block; }
  .baan-kop { border: 0; margin: 0; padding: 0 4px; gap: 8px; }
  .baan-kop b { font-size: 13px; }
  .baan-ingepland { margin-bottom: 12px; }
}

/* ---------- Planningsbord: banen inklappen, zijbalk wegklikken (issue #38) ---------- */
.filters { width: 224px; }
.planning.filters-weg .filters { display: none; }
.planning.filters-weg .week { margin-left: 0; }
.filters .wissen { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-02); margin: 0 0 12px; }
.filters .keuze .naam { white-space: nowrap; }
.keuze.hoofdrij button.naam { flex: 1; min-width: 0; text-align: left; display: block; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keuze.hoofdrij .aantal { flex: none; font-size: 11px; font-weight: 400; color: var(--dark-04); }
.filterknop .teller { position: static; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent-02); color: #fff; font-size: 11px; line-height: 1; }

button.baan-kop { background: none; border: 0; border-left: 1px solid var(--light-02); font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.baan-kop:hover b { color: var(--accent-02); }
.baan-kop .klap-icoon { align-self: center; color: var(--dark-04); transition: transform .15s; }
.baan-kop[aria-expanded="false"] .klap-icoon { transform: rotate(-90deg); }
.vakje-samenvatting { display: none; font-size: 12px; line-height: 16px; color: var(--dark-04); padding: 2px 4px; }

/* Ingeklapt: geen kaarten, wel per dag aantal en uren */
.planning.dicht-open .vakje-open > .dienst, .planning.dicht-open .vakje-open > .vakje-naam,
.planning.dicht-ingepland .vakje-ingepland > .dienst, .planning.dicht-ingepland .vakje-ingepland > .vakje-naam { display: none; }
.planning.dicht-open .vakje-open > .vakje-samenvatting,
.planning.dicht-ingepland .vakje-ingepland > .vakje-samenvatting { display: block; }
.planning.dicht-open .week.banen .vakje-open { min-height: 0; }
.planning.dicht-ingepland .week.banen .vakje-ingepland { min-height: 0; }
.planning.dicht-open .week.banen .vakje-ingepland { min-height: calc(100vh - 240px); }
.planning.dicht-ingepland:not(.dicht-open) .week.banen .vakje-open { min-height: calc(100vh - 260px); }
.week.banen.een-dag .vakje-samenvatting { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .filters { width: 100%; }
  .planning.filters-weg .filters.open { display: block; }
  button.baan-kop { border: 0; display: flex; padding: 4px; }
  .planning.dicht-open .vakje-open > .vakje-samenvatting,
  .planning.dicht-ingepland .vakje-ingepland > .vakje-samenvatting { padding: 0 4px 8px; }
}

/* ---------- Planningsbord: compacte weergave (issue #40) ---------- */
/* Regel 1: tijd en functie. Regel 2: locatie en open plekken. Regel 3: wie er staat. */
.toon-schakelaar a { min-width: 0; }
.planning.compact .dienst { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 0; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; font-size: 11px; line-height: 16px; }
.planning.compact .dienst .punten { display: contents; }
.planning.compact .dienst .tijd { grid-column: 1; grid-row: 1; text-align: left; font-size: 11px; color: var(--dark-01); }
.planning.compact .dienst .titel { grid-column: 2 / -1; grid-row: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.planning.compact .dienst .markering { display: none; }
.planning.compact .dienst .punt { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1 / -1; }
.planning.compact .dienst .punt .icoon { display: none; }
.planning.compact .dienst .punt.loc { grid-column: 1 / 3; grid-row: 2; }
.planning.compact .dienst .punt.plekken { grid-column: 3; grid-row: 2; }
.planning.compact .dienst .punt.mw { color: var(--dark-02); }
.planning.compact .dienst .punt.mw.open { color: var(--fout); }
.planning.compact .vakje-naam { margin: 2px 0 4px; }
.planning.compact .week.banen .vakje { padding: 4px; }

@media (max-width: 768px) {
  .planning.compact .dienst { padding: 6px 8px; border-radius: 8px; }
  .planning.compact .dienst .tijd, .planning.compact .dienst .titel, .planning.compact .dienst .punt { font-size: 12px; }
}

/* ---------- Planningsbord: lijstweergave (issue #41) ---------- */
.lijst-bord { flex: 1; min-width: 0; margin-left: 8px; padding-bottom: 48px; }
.planning.filters-weg .lijst-bord { margin-left: 0; }
.lijst-totaal { margin: 4px 0 12px; font-size: 13px; line-height: 20px; color: var(--dark-04); }
.lijst-totaal b { color: var(--dark-01); }
.lijst-dag { background: var(--wit); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.lijst-dagkop { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--light-02); font-size: 12px; color: var(--dark-04); }
.lijst-dagkop b { font-size: 14px; color: var(--dark-01); }
.lijst-dagkop.vandaag b { color: var(--accent-02); }
.lijst-dagkop .toevoegen { margin-left: auto; color: var(--dark-04); display: grid; place-items: center; align-self: center; }
.lijst-dagkop .toevoegen:hover { color: var(--accent-02); }
.lijstrij { display: grid; grid-template-columns: 96px minmax(120px, 1.2fr) minmax(140px, 1.6fr) 64px minmax(140px, 1.6fr) 104px; gap: 12px; align-items: center; padding: 8px 12px; font-size: 12px; line-height: 16px; color: var(--dark-01); text-decoration: none; border-bottom: 1px solid var(--light-02); }
.lijstrij:last-child { border-bottom: 0; }
a.lijstrij:hover, a.lijstrij.actief { background: var(--light-01); }
.lijstkop { font-size: 11px; font-weight: 700; color: var(--dark-04); text-transform: uppercase; letter-spacing: .4px; padding-top: 6px; padding-bottom: 6px; }
.lijstrij .tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
.lijstrij .functie { font-weight: 700; }
.lijstrij .plek { display: flex; flex-direction: column; min-width: 0; }
.lijstrij .plek .og { color: var(--dark-04); font-size: 11px; }
.lijstrij .loc, .lijstrij .og, .lijstrij .mws { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lijstrij .bezet { font-variant-numeric: tabular-nums; color: var(--dark-02); }
.lijstrij .mws .open { color: var(--fout); font-weight: 700; }
.lijstrij .status { text-align: right; }
.lijstrij.weg .functie, .lijstrij.weg .tijd { text-decoration: line-through; color: var(--dark-04); }

@media (max-width: 768px) {
  .lijst-bord { margin-left: 0; }
  .lijstkop { display: none; }
  .lijstrij { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 12px; }
  .lijstrij .tijd { grid-column: 1; grid-row: 1; }
  .lijstrij .functie { grid-column: 2; grid-row: 1; }
  .lijstrij .status { grid-column: 3; grid-row: 1; }
  .lijstrij .plek { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 6px; color: var(--dark-04); }
  .lijstrij .plek .og::before { content: "· "; }
  .lijstrij .bezet { display: none; }
  .lijstrij .mws { grid-column: 1 / -1; grid-row: 3; }
  .lijstrij .mws:has(.stil) { display: none; }
}

/* Koppelscherm */
.koppelkaart { color: inherit; text-decoration: none; }
.koppelrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.kiezer input { height: 32px; border: 1px solid var(--light-02); border-radius: 16px; background: var(--wit); padding: 0 12px; font: 400 12px "Nunito", sans-serif; color: var(--dark-01); }

/* App: ruimte voor de statusbalk (iPhone met notch/Dynamic Island) en soepeler wisselen tussen schermen */
body.app { padding-top: env(safe-area-inset-top); }
body.app::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--light-01); z-index: 20; }
body.app .appbalk { top: env(safe-area-inset-top); }
body.app .pagina { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
html:has(body.app) { overscroll-behavior: none; }
body.app { -webkit-tap-highlight-color: transparent; }
body.app a, body.app button { -webkit-touch-callout: none; touch-action: manipulation; }
body.app .tabbalk, body.app .schakelaar, body.app .knop { -webkit-user-select: none; user-select: none; }
body.app .tabbalk a:active, body.app .schakelaar a:active, body.app a.kaart:active, body.app .knop:active { opacity: .6; transition: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
body.app .tabbalk { view-transition-name: tabbalk; }
body.app::before { view-transition-name: statusbalk; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* App: zachte navigatie (static/js/zacht.js). Vooruit schuift van rechts, terug naar rechts, tabs faden. */
@keyframes app-in-rechts { from { transform: translateX(100%); } }
@keyframes app-uit-links { to { transform: translateX(-28%); opacity: .6; } }
@keyframes app-in-links { from { transform: translateX(-28%); opacity: .6; } }
@keyframes app-uit-rechts { to { transform: translateX(100%); } }
@keyframes app-fade-in { from { opacity: 0; } }
@keyframes app-fade-uit { to { opacity: 0; } }
html.vt-vooruit::view-transition-old(root) { animation: app-uit-links .28s cubic-bezier(.2, .8, .2, 1) both; }
html.vt-vooruit::view-transition-new(root) { animation: app-in-rechts .28s cubic-bezier(.2, .8, .2, 1) both; box-shadow: -8px 0 24px rgba(18, 40, 78, .12); }
html.vt-terug::view-transition-old(root) { animation: app-uit-rechts .26s cubic-bezier(.2, .8, .2, 1) both; z-index: 2; box-shadow: -8px 0 24px rgba(18, 40, 78, .12); }
html.vt-terug::view-transition-new(root) { animation: app-in-links .26s cubic-bezier(.2, .8, .2, 1) both; z-index: 1; }
html.vt-wissel::view-transition-old(root) { animation: app-fade-uit .12s ease-out both; }
html.vt-wissel::view-transition-new(root) { animation: app-fade-in .16s ease-out both; }
html.laadt body.app::after { content: ""; position: fixed; z-index: 30; top: env(safe-area-inset-top); left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, var(--accent-01), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: app-laad 1s linear infinite; }
@keyframes app-laad { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* App: venster dat onderin omhoog schuift */
.blad { position: fixed; inset: 0; z-index: 50; }
.blad-achter { position: absolute; inset: 0; background: rgba(18, 40, 78, .4); opacity: 0; transition: opacity .2s ease-out; }
.blad-in { position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; background: var(--wit); border-radius: 24px 24px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -8px 24px rgba(18, 40, 78, .14); max-height: 85vh; overflow-y: auto; }
.blad.open .blad-achter { opacity: 1; }
.blad.open .blad-in { transform: none; }
.blad-greep { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--light-01-2); margin: 0 auto 16px; }
.blad h3 { margin: 0 0 6px; font-size: 18px; line-height: 24px; }
.blad p { margin: 0 0 16px; color: var(--dark-02); }
.blad .knop { margin-top: 10px; }
.blad textarea { width: 100%; }