/* Roundbook handleiding (/help). Tokens en letters van roundbook.eu (site/stijl.css); de nagebouwde
   schermen volgen de app (src/stijl.css), altijd in het lichte palet, zoals in de films.
   Geen inline stijl, geen externe verzoeken: dit bestand en letters/ komen van dezelfde oorsprong. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/letters/plex-sans-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/letters/plex-sans-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/letters/plex-sans-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/letters/plex-sans-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/letters/plex-mono-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/letters/plex-mono-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- Tokens: licht, donker volgt het systeem, de knop kiest zelf (data-thema op <html>) -------- */
:root {
  --papier: #f2eee3; --blad: #fbf9f4; --inkt: #1c1b19; --potlood: #5a564d;
  --groen: #1f4a3a; --op-groen: #fbf9f4; --koper: #8a5a12; --lijn: #e7e1d2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --papier: #141618; --blad: #1e2124; --inkt: #ece6d8; --potlood: #a39d90;
    --groen: #8cc2a4; --op-groen: #0f1a14; --koper: #d9a55a; --lijn: #2c3330;
    color-scheme: dark;
  }
}
:root[data-thema="donker"] {
  --papier: #141618; --blad: #1e2124; --inkt: #ece6d8; --potlood: #a39d90;
  --groen: #8cc2a4; --op-groen: #0f1a14; --koper: #d9a55a; --lijn: #2c3330;
  color-scheme: dark;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 17px/1.55 'IBM Plex Sans', system-ui, sans-serif; }
a { color: var(--groen); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--koper); outline-offset: 2px; border-radius: 4px; }
b, strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; }
[hidden] { display: none !important; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
.stil { color: var(--potlood); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.naar-inhoud { position: absolute; left: 16px; top: -60px; z-index: 40; padding: 10px 14px; background: var(--groen); color: var(--op-groen); border-radius: 8px; }
.naar-inhoud:focus { top: 8px; }

/* Zonder JS: geen zoekveld en geen themaknop (die doen niets zonder script). */
.geen-js .zoek, .geen-js .thema, .geen-js .opnieuw { display: none; }

/* --- Kop van de pagina ------------------------------------------------------------------------- */
.kop-van-pagina { position: sticky; top: 0; z-index: 30; background: var(--papier); border-bottom: 1px solid var(--lijn); }
.kop-binnen { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kop-van-pagina .woordmerk { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--groen); font-size: 20px; letter-spacing: -0.01em; }
.kop-van-pagina .woordmerk b { font-weight: 600; }
.kop-van-pagina .woordmerk .wat { color: var(--potlood); font-size: 15px; letter-spacing: 0; padding-left: 10px; border-left: 1px solid var(--lijn); }
.merkteken { flex: none; }
.thema { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--blad); color: var(--inkt); font: inherit; font-size: 15px; cursor: pointer; }
.thema svg { flex: none; }
.zoek { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--blad); border: 1.5px solid var(--potlood); border-radius: 10px; color: var(--potlood); }
.zoek:focus-within { border-color: var(--groen); }
.zoek input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--inkt); font: inherit; font-size: 17px; }
.zoek input::-webkit-search-cancel-button { display: none; }
/* Op de gsm scrolt de kop mee weg (meer plaats om te lezen) en is de themaknop enkel een icoon. */
@media (max-width: 959px) { .kop-van-pagina { position: static; } }
@media (max-width: 479px) {
  .thema { width: 44px; padding: 0; justify-content: center; }
  .thema .thema-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .kop-van-pagina .woordmerk .wat { font-size: 14px; padding-left: 8px; }
}

/* --- Raam: inhoud links (op gsm uitklapbaar), tekst rechts -------------------------------------- */
.raam { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.inhoud { margin: 12px 0 0; background: var(--blad); border: 1px solid var(--lijn); border-radius: 12px; }
.inhoud summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
.inhoud summary::-webkit-details-marker { display: none; }
.inhoud summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--potlood); border-bottom: 2px solid var(--potlood); transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.inhoud[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.inhoud nav { padding: 0 8px 10px; }
.inhoud .groep { margin: 10px 8px 2px; font-size: 14px; font-weight: 600; color: var(--potlood); letter-spacing: 0.02em; }
.inhoud ul { list-style: none; margin: 0; padding: 0; }
.inhoud a { display: flex; align-items: center; min-height: 44px; padding: 4px 8px; border-radius: 8px; color: var(--inkt); text-decoration: none; font-size: 16px; line-height: 1.3; }
.inhoud a:hover { background: var(--papier); }
.inhoud a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--koper); background: var(--papier); font-weight: 600; }
.inhoud .leeg { padding: 4px 8px; font-size: 15px; color: var(--potlood); }
main { min-width: 0; }

@media (min-width: 960px) {
  .kop-binnen { padding: 10px 40px; flex-wrap: nowrap; }
  .zoek { order: 0; flex: 0 1 340px; margin-left: auto; }
  .thema { margin-left: 0; }
  .raam { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 0 40px 64px; }
  .inhoud { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; margin-top: 28px; }
}

/* --- Held --------------------------------------------------------------------------------------- */
.held { padding: 32px 0 8px; max-width: 760px; }
.held > * { margin: 0 0 16px; }
.baseline { color: var(--koper); font-size: 15px; margin: 0 0 12px; }
.held h1 { font-size: 32px; letter-spacing: -0.015em; line-height: 1.12; }
.onderkop { font-size: 18px; color: var(--potlood); }
.rolchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.rolchips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--blad); color: var(--inkt); text-decoration: none; font-size: 15px; }
.rolchips a:hover { border-color: var(--potlood); }
.rolchips .mono { color: var(--potlood); font-size: 14px; }
@media (min-width: 960px) { .held { padding: 48px 0 12px; } .held h1 { font-size: 44px; } .onderkop { font-size: 19px; } }

/* --- Rollabels: planner groen, vakman koper, beheerder potlood (nooit enkel kleur: altijd het woord) */
.rol-label { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.rol-planner { background: var(--groen); color: var(--op-groen); }
.rol-vakman { background: var(--blad); color: var(--koper); border: 1.5px solid var(--koper); }
.rol-beheerder { background: var(--lijn); color: var(--inkt); }

/* --- Overzicht per rol ---------------------------------------------------------------------------- */
.overzicht { padding: 24px 0 8px; }
.sectietitel { font-size: 24px; margin: 0 0 14px; }
.rollen { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.rolkaart { background: var(--blad); border: 1px solid var(--lijn); border-radius: 12px; padding: 18px; }
.rolkaart h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 6px; }
.rolkaart p { margin: 0 0 8px; color: var(--potlood); font-size: 16px; }
.rolkaart ul { margin: 0; padding: 0; list-style: none; }
.rolkaart li { border-top: 1px solid var(--lijn); }
.rolkaart li a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; text-decoration: none; }
.rolkaart li a:hover { text-decoration: underline; }
.rolkaart .leeg { padding: 10px 0 2px; font-size: 15px; color: var(--potlood); }
@media (min-width: 700px) { .rollen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Rol en hoofdstuk ------------------------------------------------------------------------------ */
.rol { padding-top: 32px; scroll-margin-top: 120px; }
.rolkop { display: flex; align-items: center; gap: 10px; font-size: 26px; margin: 0 0 14px; }
.rolkop .rol-label { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 20px; font-weight: 600; }
.hoofdstuk {
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kop" "podium" "stappen" "kort" "film";
  margin: 0 0 20px; padding: 20px 16px; background: var(--blad); border: 1px solid var(--lijn); border-radius: 12px;
  scroll-margin-top: 120px;
}
.hoofdstuk-kop { grid-area: kop; }
.hoofdstuk > .podium { grid-area: podium; }
.hoofdstuk > .stappen { grid-area: stappen; }
.hoofdstuk > .kort { grid-area: kort; }
.hoofdstuk > .film { grid-area: film; }
.kruimel { font-size: 14px; color: var(--potlood); margin: 0 0 8px; }
.kruimel a { color: var(--potlood); }
.kruimel .sep { padding: 0 6px; }
.eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 14px; color: var(--koper); margin: 0 0 4px; }
.hoofdstuk h3 { font-size: 24px; margin: 0 0 8px; }
.doel { margin: 0; font-size: 18px; color: var(--potlood); }
.knoptekst { display: inline-block; padding: 0 6px; border: 1px solid var(--potlood); border-radius: 6px; background: var(--blad); font-weight: 600; white-space: nowrap; }
@media (max-width: 380px) { .knoptekst { white-space: normal; } }
@media (min-width: 1100px) {
  .hoofdstuk { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 32px; grid-template-areas: "kop podium" "stappen podium" "kort podium" "film film"; padding: 28px; align-items: start; }
  .hoofdstuk > .podium { position: sticky; top: 84px; }
}
/* Lage laptop: een plakkend scherm van 720 px zou onderaan wegvallen. */
@media (min-width: 1100px) and (max-height: 900px) { .hoofdstuk > .podium { position: static; } }

/* Stappen: genummerd in mono, zoals de bronregels op de site. */
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: flex; flex-direction: column; gap: 12px; }
.stappen > li { counter-increment: stap; position: relative; padding: 0 0 0 40px; min-height: 28px; }
.stappen > li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--groen); color: var(--op-groen); font: 500 14px/1 'IBM Plex Mono', ui-monospace, monospace; }
.stappen p { margin: 0; }
.stappen > li.zonder-nr { counter-increment: none; padding-left: 0; }
.stappen > li.zonder-nr::before { content: none; }
.tip { margin: 0; padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: 10px; font-size: 16px; color: var(--inkt); background: var(--papier); }

/* Kort: drie tot vijf regels, dezelfde tekst als de slotkaart van de film. Zoals het register op de site. */
.kort { margin: 0; padding: 0; background: var(--papier); border: 1px solid var(--lijn); border-left: 3px solid var(--koper); }
.kort h4 { margin: 0; padding: 10px 16px 0; font-size: 15px; font-weight: 600; color: var(--koper); letter-spacing: 0.02em; }
.kort ul { list-style: none; margin: 0; padding: 4px 0 0; }
.kort li { padding: 8px 16px; border-top: 1px solid var(--lijn); font-size: 16px; }
.kort li:first-child { border-top: 0; }

/* Film: video zonder vooraf laden; de bron vul je in als de film klaar is. */
.film { margin: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--papier); border: 1px solid var(--lijn); border-radius: 12px; }
.film figcaption { margin-top: 6px; font-size: 15px; color: var(--potlood); }
.film .volgt { display: none; }
.film:has(source[src=""]) .volgt { display: inline; }

/* --- Podium: het nagebouwde scherm in zijn kader ---------------------------------------------------- */
.podium { margin: 0; padding: 16px 12px 12px; background: var(--papier); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Kader zoals in de films (beslist door Peter): licht, met rand, potlood #5a564d, 3 px, hoek 28 px, geen schaduw. */
.kader { position: relative; width: 100%; max-width: 360px; border: 3px solid #5a564d; border-radius: 28px; overflow: hidden; background: #fbf9f4; }
.kader-hoog { height: 720px; }
.opnieuw { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--blad); color: var(--groen); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.podium figcaption { font-size: 14px; color: var(--potlood); text-align: center; }
/* Op de gsm loopt het podium tot de rand van de kaart: zo is het scherm in het kader zo breed als een kleine gsm. */
@media (max-width: 1099px) { .hoofdstuk > .podium { margin: 0 -16px; padding: 16px 8px 12px; border-radius: 0; } }

/* --- Het scherm: regels uit src/stijl.css, altijd het lichte palet, enkel binnen .scherm ------------ */
.scherm {
  --bg: #f2eee3; --card: #fbf9f4; --ink: #1c1b19; --pencil: #5a564d; --green: #1f4a3a; --on-green: #fbf9f4;
  --copper: #8a5a12; --field: #8c877b; --rule: #e7e1d2; --overlay: rgba(28, 27, 25, 0.45);
  position: relative; height: 100%; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 400 17px/1.35 'IBM Plex Sans', system-ui, sans-serif; color-scheme: light; text-align: left;
}
.scherm svg { flex: none; }
.scherm .i-groen { color: var(--green); }
.scherm .i-potlood { color: var(--pencil); }
.scherm .i-ink { color: var(--ink); }
.scherm .m { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-variant-numeric: tabular-nums; }
.scherm .ink { color: var(--ink); }
.scherm .potlood { color: var(--pencil); }
.scherm .vet { font-weight: 600; }
.scherm .stil { font-size: 15px; color: var(--pencil); line-height: 1.45; margin: 0 0 4px; }
.scherm .sub { font-size: 15px; color: var(--pencil); }
.scherm .h1 { font-size: 24px; font-weight: 600; }
.scherm .kopbalk { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); border-bottom: 1px solid var(--rule); }
.scherm .kopbalk-bel { padding-top: 16px; }
.scherm .terug { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; font-weight: 500; color: var(--green); align-self: flex-start; }
.scherm .titelrij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scherm .titelrij .h1 { font-size: 26px; }
.scherm .datum { font-size: 17px; }
.scherm .blok { padding: 0 16px 16px; }
.scherm .blok > .stil { padding-top: 12px; }

/* Knoppen */
.scherm .knop { position: relative; min-height: 56px; border-radius: 12px; background: var(--green); color: var(--on-green); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 600; width: 100%; padding: 0 16px; text-align: center; line-height: 1.2; }
.scherm .knop-rand { background: var(--card); color: var(--green); border: 2px solid var(--green); }
.scherm .knop-klein { min-height: 44px; font-size: 17px; width: auto; padding: 0 18px; border-radius: 10px; }
.scherm .linkknop { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--green); }

/* Afspraken bevestigen */
.scherm .bevestig-lijst { list-style: none; margin: 0; padding: 0; }
.scherm .bevestig-rij { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); }
.scherm .bevestig-kop { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.scherm .bevestig-naam { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; color: var(--ink); }
.scherm .besluit { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.scherm .besluit-knoppen { display: flex; justify-content: space-between; gap: 24px; }
.scherm .besluit-knoppen > .knop { flex: 0 1 42%; min-height: 48px; }
.scherm .besluit-vraag { margin: 0; font-size: 15px; font-weight: 500; }
.scherm .besluit-uitkomst { margin: 0; padding-top: 6px; font-size: 15px; }

/* Chips */
.scherm .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scherm .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.scherm .chip-aan-de-beurt { background: var(--green); color: var(--on-green); }
.scherm .chip-laat { background: var(--card); color: var(--copper); border: 1.5px solid var(--copper); }
.scherm .chip-rand { background: var(--card); color: var(--ink); border: 1px solid var(--field); }

/* Bellijst */
.scherm .lijst { padding: 0 16px; }
.scherm .lijst ul { list-style: none; margin: 0; padding: 0; }
.scherm .rij { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.scherm .rij:first-child { border-top: 0; }
.scherm .rij-midden { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scherm .rij-naam { color: var(--ink); font-size: 17px; font-weight: 600; align-self: flex-start; min-height: 24px; }
.scherm .rij-info { font-size: 15px; color: var(--pencil); }
.scherm .rij-status { font-size: 15px; color: var(--ink); min-height: 20px; }
.scherm .bel { position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); }
.scherm .afgewerkt { align-items: center; }
.scherm .afgewerkt .rij-midden { gap: 2px; }
.scherm .afgewerkt .rij-naam { color: var(--pencil); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }

/* Blad (bottom sheet) binnen het kader: absoluut in plaats van fixed */
.scherm .blad-achter { position: absolute; inset: 0; z-index: 5; background: var(--overlay); }
.scherm .blad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 92%; overflow: hidden; background: var(--card); color: var(--ink); border-radius: 16px 16px 0 0; padding: 10px 16px 20px; display: flex; flex-direction: column; }
.scherm .blad-greep { width: 40px; height: 4px; border-radius: 2px; background: var(--field); align-self: center; margin-bottom: 12px; flex: none; }
.scherm .blad-titel { font-size: 20px; font-weight: 600; }
.scherm .blad-sub { font-size: 15px; color: var(--pencil); padding-bottom: 10px; }
.scherm .formveld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.scherm .label { font-size: 15px; font-weight: 500; color: var(--pencil); }
.scherm .invoer { display: block; min-height: 88px; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; font-size: 17px; line-height: 1.4; color: var(--ink); overflow: hidden; }
.scherm .opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border-top: 1px solid var(--rule); font-size: 17px; font-weight: 500; color: var(--ink); flex: none; }
.scherm .opt-laatste { border-bottom: 1px solid var(--rule); }
.scherm .terugbelblok { border-top: 1px solid var(--rule); padding: 10px 20px 12px; margin: 0 -16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); flex: none; }
.scherm .terugbelkop { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
.scherm .snelrij { display: flex; gap: 8px; }
.scherm .snel { position: relative; flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; border: 1.5px solid var(--field); background: var(--card); font-size: 15px; font-weight: 500; color: var(--ink); padding: 0 6px; line-height: 1.15; }
.scherm .annuleer { align-self: center; margin-top: 12px; min-height: 52px; font-size: 17px; color: var(--pencil); flex: none; }

/* --- Tijdlijn van een nagebouwd scherm, enkel CSS ----------------------------------------------------
   Elk scherm (.tl) zet zijn momenten: --m1, --m2, ... in seconden vanaf de start.
   .van.vN   verschijnt op moment N        .tot.tN   verdwijnt op moment N
   .tik.kN   een tik (vinger en indruk) op moment N
   .wissel   legt zijn kinderen op elkaar, zodat een tekst of knoppenrij op dezelfde plek wisselt.
   De film speelt zonder JS meteen bij het laden; met JS (handleiding.js) telkens het scherm in beeld
   komt en bij Opnieuw afspelen. Wie minder beweging vraagt, ziet meteen de eindstand. */
.wissel { display: grid; }
.wissel > * { grid-area: 1 / 1; }
.tl .van { opacity: 0; visibility: hidden; }
:is(.geen-js, .speelt) .tl .van { animation: rb-toon .3s ease var(--van) both; }
:is(.geen-js, .speelt) .tl .tot { animation: rb-weg .25s ease var(--tot) forwards; }
:is(.geen-js, .speelt) .tl .van.tot { animation: rb-toon .3s ease var(--van) both, rb-weg .25s ease var(--tot) forwards; }
.tl .tik { position: relative; }
.tl .tik::after { content: ''; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(138, 90, 18, 0.22); border: 2px solid #8a5a12; opacity: 0; pointer-events: none; }
:is(.geen-js, .speelt) .tl .tik { animation: rb-druk .45s ease calc(var(--tik) - .4s) both; }
/* Een tik op een element dat ook verschijnt of verdwijnt: beide animaties samen, anders wint de laatste regel. */
:is(.geen-js, .speelt) .tl .tik.van { animation: rb-toon .3s ease var(--van) both, rb-druk .45s ease calc(var(--tik) - .4s) both; }
:is(.geen-js, .speelt) .tl .tik.tot { animation: rb-druk .45s ease calc(var(--tik) - .4s) both, rb-weg .25s ease var(--tot) forwards; }
:is(.geen-js, .speelt) .tl .tik.van.tot { animation: rb-toon .3s ease var(--van) both, rb-druk .45s ease calc(var(--tik) - .4s) both, rb-weg .25s ease var(--tot) forwards; }
/* Pauzeer: alles blijft staan waar het is. */
.pauze .tl *, .pauze .tl *::after, .pauze .stroom span { animation-play-state: paused !important; }
:is(.geen-js, .speelt) .tl .tik::after { animation: rb-vinger .9s ease-out calc(var(--tik) - .7s) both; }
.v1 { --van: var(--m1); } .v2 { --van: var(--m2); } .v3 { --van: var(--m3); } .v4 { --van: var(--m4); } .v5 { --van: var(--m5); } .v6 { --van: var(--m6); } .v7 { --van: var(--m7); } .v8 { --van: var(--m8); } .v9 { --van: var(--m9); }
.t1 { --tot: var(--m1); } .t2 { --tot: var(--m2); } .t3 { --tot: var(--m3); } .t4 { --tot: var(--m4); } .t5 { --tot: var(--m5); } .t6 { --tot: var(--m6); } .t7 { --tot: var(--m7); } .t8 { --tot: var(--m8); } .t9 { --tot: var(--m9); }
.k1 { --tik: var(--m1); } .k2 { --tik: var(--m2); } .k3 { --tik: var(--m3); } .k4 { --tik: var(--m4); } .k5 { --tik: var(--m5); } .k6 { --tik: var(--m6); } .k7 { --tik: var(--m7); } .k8 { --tik: var(--m8); } .k9 { --tik: var(--m9); }
@keyframes rb-toon { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes rb-weg { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes rb-druk { 0%, 100% { transform: none; } 45% { transform: scale(.94); filter: brightness(.85); } }
@keyframes rb-vinger { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* Een blad dat van onder inschuift (--m-in) en weer wegschuift (--m-uit). */
.tl .schuif { transform: translateY(105%); }
:is(.geen-js, .speelt) .tl .schuif { animation: rb-in .35s ease-out var(--m-in) both, rb-uit .3s ease-in var(--m-uit) forwards; }
@keyframes rb-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rb-uit { from { transform: none; } to { transform: translateY(105%); } }
/* Tekst die getypt wordt: --m-typ is de start, --typ-duur de duur, --typ-tekens het aantal tekens. */
.tl .typt { display: inline-block; white-space: nowrap; clip-path: inset(0 100% 0 0); }
:is(.geen-js, .speelt) .tl .typt { animation: rb-typ var(--typ-duur) steps(var(--typ-tekens)) var(--m-typ) both; }
@keyframes rb-typ { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Momenten per scherm */

/* --- De hele week: de stroom planner en vakman --------------------------------------------------------- */
.week { padding-top: 32px; scroll-margin-top: 120px; }
.week-kaart { padding: 20px 16px; background: var(--blad); border: 1px solid var(--lijn); border-radius: 12px; }
.week-kaart > p { margin: 0 0 14px; color: var(--potlood); }
.stroom { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.stroom li { display: inline-flex; align-items: center; gap: 4px; }
.stroom li + li::before { content: ''; width: 18px; height: 2px; margin: 0 4px 0 2px; background: var(--potlood); }
.stroom span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1.5px solid var(--lijn); border-radius: 8px; background: var(--papier); font-size: 15px; }
.stroom .rol-planner-rand { border-color: var(--groen); }
.stroom .rol-vakman-rand { border-color: var(--koper); }
:is(.geen-js, .speelt) .stroom span { animation: rb-licht 1s ease both; }
.stroom li:nth-child(2) span { animation-delay: .5s; } .stroom li:nth-child(3) span { animation-delay: 1s; }
.stroom li:nth-child(4) span { animation-delay: 1.5s; } .stroom li:nth-child(5) span { animation-delay: 2s; }
.stroom li:nth-child(6) span { animation-delay: 2.5s; }
@keyframes rb-licht { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.weekstappen { list-style: none; margin: 0; padding: 0; counter-reset: wk; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.weekstappen > li { counter-increment: wk; position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--papier); }
.weekstappen > li::before { content: counter(wk); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--groen); color: var(--op-groen); font: 500 14px/1 'IBM Plex Mono', ui-monospace, monospace; }
.weekstappen h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; }
.weekstappen p { margin: 0; font-size: 16px; }
@media (min-width: 700px) { .weekstappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week-kaart { padding: 28px; } }

/* --- Zoeken ------------------------------------------------------------------------------------------- */
.geen-treffer { margin: 24px 0; padding: 16px; border: 1.5px solid var(--koper); border-radius: 10px; background: var(--blad); }

/* --- Voet --------------------------------------------------------------------------------------------- */
.voet { margin-top: 48px; padding: 20px 0 8px; border-top: 1px solid var(--lijn); font-size: 15px; color: var(--potlood); }
.voet p { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Niets speelt vanzelf (zie handleiding.js); zonder JS meteen de eindstand. Opnieuw afspelen (.zelf) speelt gewoon. */
  [data-speel]:not(.zelf) .tl *, [data-speel]:not(.zelf) .tl *::after, [data-speel]:not(.zelf) .stroom span { animation-duration: 1ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* ==== Hoofdstukken per groep. Elke groep geldt enkel in haar eigen hoofdstukken (:where houdt de specificiteit gelijk). ==== */

/* ---- groep planner1 ---- */
/* Groep planner1: planner-aanmelden, planner-start, planner-bellen, planner-afspraak, planner-verzetten.
   Enkel nieuwe regels, altijd binnen .scherm. Namen en waarden uit src/stijl.css (licht palet).

   Nieuwe klassen:
   Algemeen   melding, melding-stil, melding-rand, melding-zaak, midden, i-veld, invoer-regel, invoer-twee, ww,
              linkknop-stil, h1-zaak
   Aanmelden  aanmelden, aanmelden-voet, merkrij, woordmerk, formulier
   Start      kop, kop-werkruimte, sectie, sectie-stand, sectiekop, kaart-groen (kaart-groen-midden, klein, groot, regel),
              kaart, kaart-tekst, kaart-getal, stand-rij, rij-tekst, teller, koper, stand-uitleg, start-onder,
              zoekblok, zoekrij, zoekveld, zoekveld-tekst, plek, icoonknop, voetmerk, voetmerk-deel, woordmerk-klein,
              nav, tab, tab-actief, treffers, hit, hit-midden, hit-naam
   Afspraak   blad-hoog, blad-scrol, kop-dag, kop-deel, dagstrook, dag (wd, nr, afw), dag-ronde, dag-aan, dag-dicht,
              dag-afwezig, dag-kies, dagscheiding, deelgroep, deel, deel-rand, bol, bol-aan, stippelknop, vinkregel,
              veld-uur, veld-notitie
   Zaak       adresrij, blokkop, legende, afspraakrij, afspraak-tekst, afspraak-actie, annuleer-vraag, annuleer-knoppen,
              onderbalk, knoppenrij
   Tijdlijn   .tl-planner-aanmelden, .tl-planner-start, .tl-planner-bellen, .tl-planner-afspraak, .tl-planner-verzetten,
              typt-a, typt-b, typt-c (eigen typmoment), blad-status en blad-afspraak (eigen schuifmomenten),
              blad-scrol met --m-scrol en --scrol-afstand (het blad scrolt naar onder, zoals op een gsm). */

/* --- Algemeen ----------------------------------------------------------------------------------- */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .melding { display: block; padding: 12px 14px; border: 1.5px solid var(--copper); border-radius: 10px; font-size: 15px; background: var(--card); color: var(--ink); line-height: 1.4; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .melding-stil { border-color: var(--rule); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .melding-rand { margin: 12px 16px 0; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .melding-zaak { margin-top: 12px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .midden { text-align: center; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .i-veld { color: var(--field); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .invoer.invoer-regel { display: flex; align-items: center; height: 52px; min-height: 52px; padding: 0 14px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .invoer.invoer-twee { min-height: 62px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .ww { letter-spacing: 3px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .linkknop-stil { color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .h1-zaak { font-size: 24px; }

/* --- Aanmelden ---------------------------------------------------------------------------------- */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .aanmelden { height: 100%; display: flex; flex-direction: column; gap: 22px; padding: 48px 16px 24px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .aanmelden-voet { margin-top: auto; font-size: 15px; color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .aanmelden-voet .linkknop { color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .merkrij { display: flex; align-items: center; gap: 12px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .woordmerk { color: var(--green); font-size: 30px; letter-spacing: -0.01em; line-height: 1; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .woordmerk b { font-weight: 600; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .formulier { display: flex; flex-direction: column; gap: 14px; }

/* --- Start -------------------------------------------------------------------------------------- */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kop { padding: 28px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kop-werkruimte { font-size: 22px; font-weight: 600; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .sectie { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .sectie-stand { padding-top: 22px; gap: 0; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .sectiekop { font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .sectie-stand .sectiekop { padding-bottom: 6px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-groen { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; background: var(--green); color: var(--on-green); border-radius: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-groen-midden { flex: 1; display: flex; flex-direction: column; gap: 2px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-groen .klein { font-size: 15px; opacity: 0.9; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-groen .groot { font-size: 20px; font-weight: 600; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-groen .regel { font-size: 15px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-tekst { flex: 1; font-size: 17px; font-weight: 500; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kaart-getal { font-size: 20px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .stand-rij { display: flex; align-items: center; gap: 10px; height: 64px; border-top: 1px solid var(--rule); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .rij-tekst { flex: 1; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .teller { font-size: 32px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .koper { color: var(--copper); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .stand-uitleg { border-top: 1px solid var(--rule); padding-top: 10px; }
/* Zoekblok en navigatie: in de app sticky onderaan, hier vast onderaan het kader. */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .start-onder { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .zoekblok { background: var(--bg); padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .zoekrij { display: flex; align-items: center; gap: 4px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .zoekveld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; font-size: 17px; color: var(--ink); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .zoekveld-tekst { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .plek { color: var(--pencil); overflow: hidden; text-overflow: ellipsis; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .icoonknop { position: relative; width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pencil); border-radius: 8px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .icoonknop.wissel { display: grid; place-items: center; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .voetmerk { font-size: 15px; color: var(--pencil); text-align: center; padding-top: 4px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .voetmerk-deel { display: inline-flex; align-items: center; gap: 6px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .woordmerk-klein { color: var(--green); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .woordmerk-klein b { font-weight: 600; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .nav { display: flex; height: 72px; border-top: 1px solid var(--rule); background: var(--card); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .tab-actief { color: var(--green); font-weight: 600; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .treffers { padding: 0 16px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .treffers ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .hit { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .hit-midden { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .hit-naam { font-size: 17px; font-weight: 600; }

/* --- Afspraakblad ------------------------------------------------------------------------------- */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .blad-hoog { min-height: 80%; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .blad-scrol { flex: none; display: flex; flex-direction: column; gap: 6px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kop-dag { padding-top: 8px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .kop-deel { padding-top: 14px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dagstrook { display: flex; gap: 8px; overflow: hidden; padding: 2px 2px 6px; margin: 0 -2px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag { position: relative; flex: none; width: 56px; height: 68px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1.5px solid var(--field); color: var(--ink); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag .wd { font-size: 15px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag .nr { font-size: 20px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag .afw { font-size: 11px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag-ronde { border-color: var(--green); border-width: 2px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag-aan { background: var(--green); border: 2px solid var(--green); color: var(--on-green); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag-dicht { background: var(--bg); border: 1px solid var(--rule); color: var(--pencil); text-decoration: line-through; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag-afwezig { background: var(--rule); border: 1px solid var(--rule); color: var(--pencil); }
/* De gekozen dag als laag over de knop, zodat de keuze in de tijdlijn kan wisselen. */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dag-kies { position: absolute; inset: -2px; border-radius: 10px; background: var(--green); color: var(--on-green); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .dagscheiding { flex: none; width: 1px; align-self: stretch; background: var(--field); margin: 0 2px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .deelgroep { display: flex; flex-direction: column; gap: 8px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .deel { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 10px; font-size: 17px; font-weight: 500; background: var(--card); border: 1.5px solid var(--field); color: var(--ink); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .deel-rand { position: absolute; inset: -1.5px; border: 2px solid var(--green); border-radius: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .bol { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--field); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .bol-aan { border: 6px solid var(--green); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .stippelknop { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1.5px dashed var(--field); border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .vinkregel { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--pencil); }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .veld-uur, :where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .veld-notitie { margin: 8px 0 0; }

/* --- Zaak --------------------------------------------------------------------------------------- */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .adresrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .blokkop { font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; padding: 16px 0 6px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .blokkop .legende { font-weight: 500; letter-spacing: 0; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .afspraakrij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 15px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .afspraak-tekst { flex: 1; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .afspraak-actie { width: 100%; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .annuleer-vraag { display: flex; flex-direction: column; gap: 4px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .annuleer-knoppen { display: flex; gap: 12px; }
/* Onderbalk: in de app sticky onderaan, hier vast onderaan het kader. */
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .onderbalk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 16px 20px; background: var(--card); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .knoppenrij { display: flex; gap: 10px; }
:where(#planner-aanmelden, #planner-start, #planner-bellen, #planner-afspraak, #planner-verzetten) .scherm .knoppenrij > * { flex: 1; }

/* --- Tijdlijn: het blad scrolt naar onder ------------------------------------------------------- */
:is(.geen-js, .speelt) .tl .blad-scrol { animation: rb-p1-scrol .6s ease var(--m-scrol) both; }
@keyframes rb-p1-scrol { from { transform: none; } to { transform: translateY(var(--scrol-afstand)); } }

/* --- Momenten per scherm ------------------------------------------------------------------------ */
.tl-planner-aanmelden { --m1: 2.2s; --m2: 5.8s; --m3: 6.6s; --m4: 8.8s; --m5: 11.6s; }
.tl-planner-aanmelden .typt-a { --m-typ: 3s; --typ-duur: 1s; --typ-tekens: 12; }
.tl-planner-aanmelden .typt-b { --m-typ: 4.3s; --typ-duur: 1s; --typ-tekens: 12; }
.tl-planner-aanmelden .typt-c { --m-typ: 9.6s; --typ-duur: 1.4s; --typ-tekens: 18; }
.tl-planner-start { --m1: 2s; --m2: 3.4s; --m3: 4.6s; --m-typ: 3.4s; --typ-duur: .8s; --typ-tekens: 4; }
.tl-planner-bellen { --m1: 1.8s; --m2: 2.3s; --m4: 6.8s; --m5: 7.2s; --m-in: 2.3s; --m-uit: 7.2s; --m-typ: 3.6s; --typ-duur: 1.8s; --typ-tekens: 26; }
.tl-planner-afspraak { --m1: 2s; --m3: 4.6s; --m4: 6.6s; --m5: 8.6s; --m6: 9.2s; --m-scrol: 5.6s; --m-typ: 7.1s; --typ-duur: .6s; --typ-tekens: 5; }
.tl-planner-afspraak .blad-status { --m-in: .2s; --m-uit: 2.4s; }
.tl-planner-afspraak .blad-afspraak { --m-in: 2.8s; --m-uit: 9.2s; }
.tl-planner-afspraak .blad-scrol { --scrol-afstand: -215px; }
.tl-planner-verzetten { --m1: 2s; --m2: 4s; --m3: 5.6s; --m4: 7.4s; --m5: 9.6s; --m6: 10.2s; --m7: 8.9s; --m-in: 5.9s; --m-uit: 10.2s; --m-scrol: 8.4s; }
.tl-planner-verzetten .blad-scrol { --scrol-afstand: -190px; }

/* ---- groep planner2 ---- */
/* --- Groep planner2: planner-past-niet, planner-kapper-belt, planner-zaak, planner-niet-bellen,
   planner-beoordelen, planner-hulp ---------------------------------------------------------------
   Nieuwe klassen, allemaal binnen .scherm (waarden uit src/stijl.css, licht palet):
   kolom, schermwissel, vul, i-koper, koper, doorstreept, gedimd,
   kop, kop-werkruimte, kop-klein, sectie, sectiekop, kaart, kaart-titel, kaart-getal, kaart-groen, klein, groot,
   aandacht, aandacht-kop, aandacht-lijst, aandacht-item, aandacht-tekst,
   zoekblok, zoekrij, zoekveld, zoekinvoer, icoonknop, hit, hit-naam, hit-tekst, lijst-eind, voetlinks,
   nav, tab, tab-actief,
   adresrij, blokkop, legende, feit, afspraakrij, lijn, lijn-midden, lijnknop, lijnvraag, invoer-kort, bron,
   inkbar, inkbar .titel, inkbar .sub2, inkbar-tekst, onderbalk, knoppenrij, melding, melding-stil, hulpregel,
   weekdagen, weekdag, weekdag-aan, leeg, bevestig-blok,
   gevalkaart, gevalnaam, kand, kand-gekozen, kand-info, kandlijst, kand-tekst, bol, duim, vraagblok, vraag
   Momenten: tl-past-niet, tl-kapper-belt, tl-zaak, tl-niet-bellen, tl-beoordelen, tl-qr, tl-hulp.
   planner-qr hergebruikt deze groep en heeft eigen regels voor de QR (qr, qr-veld, qr-oog, ...).
   ------------------------------------------------------------------------------------------------- */

:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm { --inkbar-bg: #1c1b19; --inkbar-fg: #fbf9f4; --inkbar-sub: #e7e1d2; }

/* Opbouw: een scherm als kolom, zodat de onderbalk en het hoofdmenu onderaan staan. */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kolom { display: flex; flex-direction: column; min-height: 100%; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .vul { flex: 1; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .i-koper { color: var(--copper); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .koper { color: var(--copper); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .doorstreept { text-decoration: line-through; text-decoration-thickness: 1px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .gedimd { opacity: 0.6; }

/* Start */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kop { padding: 28px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kop-werkruimte { font-size: 22px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kop-klein { font-size: 15px; color: var(--pencil); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .sectie { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .sectiekop { font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; display: flex; justify-content: space-between; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-titel { flex: 1; font-size: 17px; font-weight: 500; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-getal { font-size: 20px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-groen { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; background: var(--green); color: var(--on-green); border-radius: 10px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-groen > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-groen .klein { font-size: 15px; opacity: 0.9; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kaart-groen .groot { font-size: 20px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .aandacht { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--card); border-radius: 10px; border: 2px solid var(--copper); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .aandacht-kop { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .aandacht-lijst { list-style: none; margin: 0; padding: 0; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .aandacht-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink); font-size: 15px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .aandacht-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Zoeken onderaan Start */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .zoekblok { background: var(--bg); padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .zoekrij { display: flex; align-items: center; gap: 4px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .zoekveld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; color: var(--pencil); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .zoekinvoer { flex: 1; font-size: 17px; color: var(--ink); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .icoonknop { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pencil); border-radius: 8px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .hit { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .hit-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .hit-naam { font-size: 17px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijst-eind { list-style: none; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--rule); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .voetlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0 16px 8px; font-size: 15px; color: var(--pencil); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .voetlinks .linkknop { position: relative; }

/* Hoofdmenu onderaan */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .nav { display: flex; height: 72px; border-top: 1px solid var(--rule); background: var(--card); flex: none; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--pencil); min-height: 44px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .tab-actief { color: var(--green); font-weight: 600; }

/* De fiche van een zaak */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .adresrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .adresrij .linkknop { position: relative; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .blokkop { font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; padding: 16px 0 6px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .blokkop .legende { font-weight: 500; letter-spacing: 0; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .feit { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .feit > :last-child { text-align: right; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .afspraakrij { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 15px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .afspraakrij > span { flex: 1; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .afspraakrij > .linkknop { flex: none; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijn { display: grid; grid-template-columns: 92px minmax(0, 1fr) 22px; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijn-midden { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijnknop { position: relative; font-size: 15px; min-height: 32px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijnvraag { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .lijnvraag .knoppen { display: flex; gap: 16px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .invoer-kort { display: block; min-height: 44px; padding: 10px 12px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; font-size: 17px; color: var(--ink); overflow: hidden; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .bron { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 15px; color: var(--pencil); text-align: right; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .inkbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 8px; background: var(--inkbar-bg); color: var(--inkbar-fg); border-radius: 10px; list-style: none; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .inkbar .titel { font-size: 17px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .inkbar .sub2 { font-size: 15px; color: var(--inkbar-sub); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .inkbar-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .chip-niet-bellen { background: var(--inkbar-bg); color: var(--inkbar-fg); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .onderbalk { padding: 12px 16px 20px; background: var(--card); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; flex: none; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .knoppenrij { display: flex; gap: 10px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .knoppenrij > * { flex: 1; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .melding { padding: 12px 14px; border: 1.5px solid var(--copper); border-radius: 10px; font-size: 15px; background: var(--card); color: var(--ink); line-height: 1.4; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .melding-stil { border-color: var(--rule); margin-top: 12px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .hulpregel { margin: 6px 0 0; font-size: 15px; color: var(--pencil); }

/* Zaak aanpassen: de weekdagen bij Gesloten op */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .weekdagen { display: flex; gap: 6px; flex-wrap: wrap; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .weekdag { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--field); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .weekdag-aan { background: var(--inkbar-bg); color: var(--inkbar-fg); border-color: var(--inkbar-bg); text-decoration: line-through; }

/* Lege stand en foutblok */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .leeg { padding: 32px 16px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .leeg p { margin: 0; font-size: 17px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .bevestig-blok { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .bevestig-blok p { margin: 0; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .bevestig-blok .linkknop { align-self: center; }

/* Te beoordelen */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .gevalkaart { padding: 14px; border: 1.5px dashed var(--field); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .gevalnaam { font-size: 17px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .vraagblok { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .vraag { font-size: 15px; font-weight: 600; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kandlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kand { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 10px; background: var(--card); width: 100%; color: var(--ink); border: 1.5px solid var(--field); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kand-info { background: var(--bg); border-style: dashed; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kand-gekozen { border: 2px solid var(--green); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kand-tekst { display: flex; flex-direction: column; gap: 2px; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .bol { width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; flex: none; border: 2px solid var(--field); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .kand-gekozen > .bol { border: 7px solid var(--green); }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .duim { padding: 12px 16px 14px; background: var(--bg); flex: none; }

/* Momenten per scherm */
.tl-past-niet { --m1: 1.8s; --m2: 2.4s; --m3: 5s; }
.tl-kapper-belt { --m2: 3s; --m3: 4.4s; --m4: 5s; --m6: 7.4s; --m-typ: 1.4s; --typ-duur: 1s; --typ-tekens: 4; }
.tl-zaak { --m1: 1.6s; --m2: 3.6s; --m3: 5.2s; --m4: 5.6s; --m5: 7.6s; --m6: 10.4s; --m-in: 2s; --m-uit: 5.6s; --m-typ: 8.4s; --typ-duur: 1.2s; --typ-tekens: 11; }
.tl-niet-bellen { --m1: 1.6s; --m2: 3.8s; --m3: 5.6s; --m4: 6s; --m-in: 2s; --m-uit: 6s; }
.tl-beoordelen { --m1: 2s; --m2: 3.8s; --m3: 5.6s; --m4: 6.2s; }
.tl-hulp { --m1: 2.4s; --m2: 3s; --m3: 5.4s; }
.tl-qr { --m1: 1.8s; --m2: 6.2s; --m3: 8.6s; --m-in: 2.2s; --m-uit: 6.2s; }
/* planner-qr: de QR voor de kapper, een eenvoudig raster in CSS (geen echte code), en de brede knop. */
:where(#planner-qr) .scherm .knop-breed { width: 100%; }
:where(#planner-qr) .scherm .feit .wissel { display: inline-grid; }
:where(#planner-qr) .scherm .qr { position: relative; flex: none; align-self: center; width: 172px; height: 172px; margin: 8px 0 12px; padding: 10px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; }
:where(#planner-qr) .scherm .qr-veld { position: absolute; inset: 10px; background:
  repeating-conic-gradient(#1c1b19 0 25%, transparent 0 50%) 0 0 / 16px 16px,
  repeating-conic-gradient(#1c1b19 0 25%, transparent 0 50%) 4px 12px / 24px 24px; }
:where(#planner-qr) .scherm .qr-oog { position: absolute; width: 46px; height: 46px; background: #fff; border: 7px solid #1c1b19; box-shadow: 0 0 0 4px #fff; }
:where(#planner-qr) .scherm .qr-oog::after { content: ''; position: absolute; inset: 6px; background: #1c1b19; }
:where(#planner-qr) .scherm .qr-oog-lb { left: 10px; top: 10px; }
:where(#planner-qr) .scherm .qr-oog-rb { right: 10px; top: 10px; }
:where(#planner-qr) .scherm .qr-oog-lo { left: 10px; bottom: 10px; }
:where(#planner-qr) .scherm .qr-geldig { font-size: 17px; font-weight: 600; text-align: center; }
:where(#planner-qr) .scherm .qr-uitleg { font-size: 15px; text-align: center; padding: 8px 0 2px; }
:where(#planner-qr) .scherm .qr-midden { align-self: center; position: relative; }
:where(#planner-qr) .scherm .blad > .knop { margin-top: 6px; }
/* Twee schermen op dezelfde plek (Start en daarna de fiche): de kinderen van .schermwissel liggen op elkaar. */
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .schermwissel { height: 100%; grid-template-rows: 100%; }
:where(#planner-past-niet, #planner-kapper-belt, #planner-zaak, #planner-niet-bellen, #planner-beoordelen, #planner-qr, #planner-hulp) .scherm .schermwissel > .kolom { height: 100%; min-height: 0; overflow: hidden; }

/* ---- groep vakman ---- */
/* vakman.css: nieuwe regels voor de hoofdstukken van de vakman (vakman-gsm, vakman-bevestigen,
   vakman-afwezig, vakman-google, vakman-geen-melding, vakman-onderweg). Enkel wat nog niet in
   handleiding.css staat. Waarden uit src/stijl.css (lichte palet), inline stijlen uit de .tsx als klasse.

   Toegevoegde klassen, altijd onder .scherm:
     Start:      .kop .kop-werkruimte .sectie .sectiekop .kaart .kaart-groen (.klein .groot .kaart-regel)
                 .kaart-tekst .kaart-label .kaart-getal .nav .tab .tab-actief .tab-rij
                 .zoekblok .zoekrij .zoekveld .zoekveld-leeg .icoonknop .voetmerk .voetmerk-deel .woordmerk
     Kaart:      .vraagkaart .vraagkaart-titel .vraagkaart-knoppen .knop-vol .melding .melding-stil
                 .stappen (terugzetten van de paginastijl) .stap .stap-nr .stap-inhoud
     Meldingen:  .uitleg .blokkop .knoppen-onder .ontvangt .hulpregel
     Zaak:       .adresrij .beslis-kaart
     Afwezig:    .formulier .knoppenrij .invoer-regel .invoer-leeg .koper .groen .rij-periode .lijst-eind
     Algemeen:   .wissel-boven (kinderen bovenaan, niet uitgerekt)
     Toestel:    .pushbanier .pushbanier-kop .pushbanier-titel .pushbanier-tekst (de melding van het
                 toestel zelf, geen klasse uit de app)
   Op de pagina (buiten .scherm): .hoofdstuk-later .later-tekst
   Momenten: .tl-vakman-gsm .tl-vakman-bevestigen .tl-vakman-afwezig .tl-vakman-google .tl-vakman-geen-melding */

/* --- Start --------------------------------------------------------------------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kop { padding: 28px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kop-werkruimte { font-size: 22px; font-weight: 600; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .sectie { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .sectiekop { margin: 0; font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-groen { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; background: var(--green); color: var(--on-green); border-radius: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-groen .klein { font-size: 15px; opacity: 0.9; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-groen .groot { font-size: 20px; font-weight: 600; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-groen .kaart-regel { font-size: 15px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-groen .kaart-tekst { padding: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-label { flex: 1; font-size: 17px; font-weight: 500; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-tekst .kaart-label { flex: none; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .kaart-getal { font-size: 20px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .nav { display: flex; height: 72px; margin-top: 14px; border-top: 1px solid var(--rule); background: var(--card); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--pencil); min-height: 44px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .tab-actief { color: var(--green); font-weight: 600; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .tab-rij { display: inline-flex; gap: 4px; align-items: baseline; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .zoekblok { background: var(--bg); padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .zoekrij { display: flex; align-items: center; gap: 4px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .zoekveld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .zoekveld-leeg { font-size: 17px; color: var(--field); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .icoonknop { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pencil); border-radius: 8px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .voetmerk { font-size: 15px; color: var(--pencil); text-align: center; padding-top: 4px; display: flex; justify-content: center; align-items: center; gap: 0 6px; flex-wrap: wrap; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .voetmerk-deel { display: inline-flex; align-items: center; gap: 6px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .voetmerk .linkknop { min-height: 32px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .woordmerk { color: var(--green); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .woordmerk b { font-weight: 600; }

/* --- Kaart Meldingen en installeren (MeldingenKaart.tsx, Installeren.tsx) -------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .vraagkaart { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--card); border: 2px solid var(--green); border-radius: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .vraagkaart-titel { margin: 0; font-size: 17px; font-weight: 600; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .vraagkaart .stil { margin: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .vraagkaart-knoppen { display: flex; align-items: center; gap: 0 16px; flex-wrap: wrap; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .vraagkaart-knoppen > .knop-vol { flex: 1 1 100%; width: 100%; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .melding { margin: 0; padding: 12px 14px; border: 1.5px solid var(--copper); border-radius: 10px; font-size: 15px; background: var(--card); color: var(--ink); line-height: 1.4; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .melding-stil { border-color: var(--rule); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .melding p { margin: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .melding ul { margin: 0; padding-left: 18px; }
/* De paginastijl van .stappen (nummers in een groen blokje) geldt niet binnen het scherm. */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stappen > li { padding: 0; min-height: 0; counter-increment: none; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stappen > li::before { content: none; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stap { display: flex; gap: 8px; font-size: 15px; line-height: 1.4; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stap-nr { flex: none; width: 20px; color: var(--pencil); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .stap-inhoud { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* --- Meldingen (Meldingen.tsx) ----------------------------------------------------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .uitleg { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .uitleg p { margin: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .blokkop { margin: 0; font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; padding: 16px 0 6px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .knoppen-onder { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .ontvangt { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.5; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .hulpregel { margin: 6px 0 0; font-size: 15px; color: var(--pencil); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .hulpregel .groen { font-weight: 500; }

/* --- Zaak met de beslis-kaart (Zaak.tsx) ------------------------------------------------------------ */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .adresrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .beslis-kaart { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; background: var(--card); border: 2px solid var(--copper); border-radius: 10px; font-size: 17px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .beslis-kaart p { margin: 0; }

/* --- Afwezig (Afwezig.tsx) -------------------------------------------------------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .formulier { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .formulier .formveld { margin-bottom: 0; min-width: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .knoppenrij { display: flex; gap: 10px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .knoppenrij > * { flex: 1; }
/* Een invoerveld van één regel (input), niet het hoge tekstvak uit handleiding.css. */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .invoer-regel { display: flex; align-items: center; min-height: 0; height: 52px; padding: 0 14px; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .invoer-leeg { color: var(--field); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .koper { color: var(--copper); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .groen { color: var(--green); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .rij-periode { font-size: 17px; font-weight: 600; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .rij > .knop { align-self: center; flex: none; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .lijst-eind { list-style: none; margin: 0; padding: 0; }

/* --- Algemeen --------------------------------------------------------------------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .wissel-boven > * { align-self: start; }

/* --- De melding van het toestel (geen deel van de app) ---------------------------------------------- */
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .pushbanier { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 7; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #fbf9f4; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 6px 18px rgba(28, 27, 25, 0.18); font-size: 15px; line-height: 1.3; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .pushbanier-kop { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .pushbanier-titel { font-weight: 600; color: var(--ink); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .pushbanier-tekst { color: var(--ink); }
:where(#vakman-gsm, #vakman-bevestigen, #vakman-afwezig, #vakman-google, #vakman-geen-melding, #vakman-onderweg) .scherm .pushbanier .sub { font-size: 13px; letter-spacing: 0.02em; }

/* --- Hoofdstuk dat later komt: enkel kop en tekst ----------------------------------------------------- */
.hoofdstuk-later { grid-template-areas: "kop" "tekst"; }
.hoofdstuk-later .later-tekst { grid-area: tekst; margin: 0; }
@media (min-width: 1100px) {
  .hoofdstuk-later { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "tekst"; }
}

/* --- Momenten per scherm ---------------------------------------------------------------------------- */
.tl-vakman-gsm { --m1: 2s; --m2: 6s; --m3: 8.4s; --m4: 8.9s; --m5: 10s; }
.tl-vakman-bevestigen { --m1: 0.8s; --m2: 3s; --m3: 5.6s; --m4: 8s; --m5: 10.2s; }
.tl-vakman-afwezig { --m1: 2s; --m2: 3.6s; --m4: 7.6s; --m-typ: 4.6s; --typ-duur: 1.2s; --typ-tekens: 8; }
.tl-vakman-google { --m1: 2.4s; }
.tl-vakman-geen-melding { --m1: 2.4s; --m2: 4.6s; }

/* ---- groep beheerder ---- */
/* Beheerder: nieuwe regels voor de hoofdstukken beheerder-voorwaarden, beheerder-google, beheerder-team
   en beheerder-opstart. Enkel wat nog niet in handleiding.css staat. Waarden uit src/stijl.css (licht palet).

   Toegevoegde klassen
   Pagina:     .hoofdstuk-zonder-podium (hoofdstuk zonder nagebouwd scherm, bv. beheerder-opstart)
   Tijdlijn:   .laag (een volgend scherm dat bovenop verschijnt), .plek (verschijnt en neemt dan pas plaats in,
               samen met .van.vN), .omhoog (de pagina staat eerst wat naar onder gescrold en schuift terug naar
               boven op --m-op), .typ-mail (tweede getypt veld met eigen --m-typ)
   Start:      .kop, .kop-werkruimte, .vul, .zoekblok, .zoekrij, .zoekveld, .plaatshouder, .icoonknop,
               .voetmerk, .voetmerk-deel, .woordmerk, .nav, .tab, .tab-actief
   Aanmelden:  .aanmelden, .merkrij, .melding, .melding-stil, .knop-uit, .vakje, .vakje-aan, .vinkrij,
               .vinkrij-lang, .vinkrij-boven, .vink-tekst
   Voorwaarden:.voorwaarden-versie, .voorwaarden-tekst, .voorwaarden-code, .voorwaarden-aanvaard,
               .voorwaarden-kopie, .voorwaarden-lezen, .md-kop, .md-p
   Formulier:  .formulier, .invoer-regel, .knoppenrij, .sectie, .sectiekop, .lijst-eind, .gedimd,
               .rolkeuze, .blad-hoog, .h1-los, .blok-boven, .knop-los, .vakje-uit, .tik-boven
   Google:     .g-band, .g-scherm, .g-merk, .g-titel, .g-tekst, .g-link, .g-knoprij, .g-knop, .g-knop-rand,
               .g-account, .g-vinkrij, .g-vakje, .g-vakje-aan, .rb-pagina, en voor #beheerder-google: .g-hulp,
               .g-driehoek, .g-rij, .g-link-grijs, .g-knop-hoek, .g-open, .g-streep, .g-titel-groot, .g-info,
               .g-knoprij-gelijk, .g-scherm-rol, .g-schuif (--schuif), .g-wie, .g-let-op, .g-blauw, .g-strepen,
               .g-vinkrij-alles, .g-icoon, .g-pijl
   Momenten:   .tl-beheerder-voorwaarden, .tl-beheerder-google, .tl-beheerder-team */

/* --- Pagina: een hoofdstuk zonder podium gebruikt op brede schermen de volle breedte --------------- */
@media (min-width: 1100px) {
  .hoofdstuk.hoofdstuk-zonder-podium { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "stappen" "kort" "film"; }
}
.hoofdstuk-zonder-podium .stroom { margin: 14px 0 0; }

/* --- Tijdlijn: aanvullingen ------------------------------------------------------------------------ */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .laag { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .plek { max-height: 0; overflow: hidden; }
:is(.geen-js :where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team), :where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .speelt) .scherm .van.plek { animation: rb-toon .3s ease var(--van) both, bh-plek .35s ease var(--van) both; }
@keyframes bh-plek { from { max-height: 0; } to { max-height: 260px; } }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .omhoog { transform: translateY(var(--op-afstand, -100px)); }
:is(.geen-js :where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team), :where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .speelt) .scherm .omhoog { animation: bh-omhoog .5s ease var(--m-op) both; }
@keyframes bh-omhoog { from { transform: translateY(var(--op-afstand, -100px)); } to { transform: none; } }

/* --- Start: kop, zoekblok, voetmerk en onderbalk ----------------------------------------------------- */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .kop { padding: 28px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .kop-werkruimte { font-size: 22px; font-weight: 600; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vul { flex: 1; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .zoekblok { background: var(--bg); padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .zoekrij { display: flex; align-items: center; gap: 4px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .zoekveld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; font-size: 17px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .plaatshouder { color: var(--field); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .icoonknop { position: relative; width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--pencil); border-radius: 8px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voetmerk { font-size: 15px; color: var(--pencil); text-align: center; padding-top: 4px; display: flex; justify-content: center; align-items: center; gap: 0 6px; flex-wrap: wrap; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voetmerk-deel { display: inline-flex; align-items: center; gap: 6px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voetmerk .linkknop { min-height: 36px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .woordmerk { display: inline; min-height: 0; gap: 0; font-size: inherit; letter-spacing: 0; color: var(--green); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .woordmerk b { font-weight: 600; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .nav { display: flex; height: 72px; flex: none; border-top: 1px solid var(--rule); background: var(--card); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--pencil); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .tab-actief { color: var(--green); font-weight: 600; }

/* --- Volledig scherm met het merk (Melding in Kader.tsx): voorwaarden aanvaarden ---------------------- */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .aanmelden { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 48px 16px 24px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .merkrij { display: flex; align-items: center; gap: 12px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .merkrij .woordmerk { font-size: 30px; letter-spacing: -0.01em; line-height: 1; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .aanmelden .h1 { font-size: 22px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .melding { padding: 12px 14px; border: 1.5px solid var(--copper); border-radius: 10px; font-size: 15px; background: var(--card); color: var(--ink); line-height: 1.4; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .melding-stil { border-color: var(--rule); }
/* Uitgeschakelde knop: de kleur van opacity .55 op --bg, als vaste kleur (een .van-animatie zet opacity terug op 1). */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .knop-uit { background: #7e9486; color: #f7f4ec; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vakje { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--pencil); border-radius: 4px; background: var(--card); display: grid; place-items: center; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vakje-aan { background: var(--green); border-color: var(--green); color: var(--on-green); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vinkrij { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vinkrij-lang { align-items: flex-start; line-height: 1.4; padding: 4px 0; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vinkrij-boven { align-items: flex-start; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vinkrij-boven .wissel, :where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vinkrij-lang .wissel { margin-top: 1px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vink-tekst { display: flex; flex-direction: column; gap: 2px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-versie { margin: -12px 0 0; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-tekst { min-width: 0; padding: 4px 16px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; font-size: 15px; line-height: 1.45; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .md-kop { margin: 10px 0 4px; font-size: 17px; font-weight: 600; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .md-p { margin: 0 0 6px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-code { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-aanvaard { display: flex; flex-direction: column; gap: 12px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-kopie { margin: 0; text-align: center; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .voorwaarden-lezen { padding-top: 8px; font-size: 15px; line-height: 1.45; }

/* --- Formulieren, lijsten en het team --------------------------------------------------------------- */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .h1-los { display: block; font-size: 24px; font-weight: 600; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .formulier { display: flex; flex-direction: column; gap: 14px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .invoer-regel { display: flex; align-items: center; height: 52px; padding: 0 14px; background: var(--card); border: 1.5px solid var(--field); border-radius: 10px; font-size: 17px; color: var(--ink); overflow: hidden; white-space: nowrap; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .knoppenrij { display: flex; gap: 10px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .knoppenrij > * { flex: 1; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .sectie { padding: 18px 16px 0; display: flex; flex-direction: column; gap: 10px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .sectiekop { font-size: 15px; font-weight: 600; color: var(--pencil); letter-spacing: 0.02em; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .lijst-eind { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .gedimd { opacity: 0.6; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .rolkeuze { display: flex; flex-direction: column; gap: 6px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .blad.blad-hoog { min-height: 80%; max-height: 97%; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .blad .formulier { margin-top: 2px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .blad .linkknop { align-self: flex-start; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .kopbalk .knop-klein { align-self: flex-start; margin-top: 4px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .blok-boven { padding-top: 14px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .plek > .rij { border-top: 1px solid var(--rule); }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .knop-los { display: inline-flex; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .vakje-uit { opacity: 0.45; }
/* Een tik boven een blad (het blad sluit als je ernaast tikt): los punt in het donkere deel. */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .tik-boven { position: absolute; left: 50%; top: 64px; width: 2px; height: 2px; z-index: 7; }

/* --- Het scherm van Google, neutraal nagebouwd (geen logo, enkel de teksten) -------------------------- */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-band { align-self: stretch; padding: 6px 16px; background: var(--copper); color: var(--on-green); font-size: 14px; font-weight: 500; text-align: center; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-scherm { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; background: #ffffff; color: #1f1f1f; font-size: 15px; line-height: 1.45; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-merk { font-size: 15px; color: #444746; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-titel { font-size: 22px; font-weight: 500; line-height: 1.25; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-tekst { margin: 0; color: #444746; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-link { position: relative; align-self: flex-start; color: #0b57d0; font-weight: 500; min-height: 36px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-knoprij { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-knop { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 20px; background: #0b57d0; color: #ffffff; font-weight: 500; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-knop-rand { background: #ffffff; color: #0b57d0; border: 1px solid #747775; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-account { display: inline-flex; align-self: flex-start; padding: 4px 12px; border: 1px solid #c4c7c5; border-radius: 16px; font-size: 14px; color: #1f1f1f; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-vinkrij { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px solid #e3e3e3; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-vakje { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid #444746; border-radius: 3px; display: grid; place-items: center; background: #ffffff; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .g-vakje-aan { background: #0b57d0; border-color: #0b57d0; color: #ffffff; }
/* De eigen pagina van Roundbook na Google (roundbook-google-terug/pagina.ts): kop, zin, link terug. */
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .rb-pagina { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 40px 20px; background: #ffffff; color: var(--ink); font-size: 17px; line-height: 1.45; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .rb-pagina .h1 { font-size: 26px; }
:where(#beheerder-opstart, #beheerder-voorwaarden, #beheerder-google, #beheerder-team) .scherm .rb-pagina .g-link { color: var(--green); }
/* Google koppelen: nagebouwd naar de echte schermen van 1 nov 2026. Grijze balkjes staan voor tekst van Google
   (nu niet meer gebruikt in #beheerder-google: de Nederlandse teksten zijn nagemeten op 1 nov 2026). .g-schuif scrolt het rechtenscherm op --m6 naar onder. */
:where(#beheerder-google) .scherm .g-hulp { display: flex; width: fit-content; min-height: 32px; margin-top: 4px; }
:where(#beheerder-google) .scherm .blok > .knop-los { margin-top: 2px; }
:where(#beheerder-google) .scherm .g-driehoek { flex: none; }
:where(#beheerder-google) .scherm .g-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
:where(#beheerder-google) .scherm .g-link-grijs { color: #5f6368; font-weight: 400; font-size: 14px; }
:where(#beheerder-google) .scherm .g-knop-hoek { min-height: 36px; padding: 0 12px; border-radius: 4px; background: #4285f4; font-size: 13px; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
:where(#beheerder-google) .scherm .g-open { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
:where(#beheerder-google) .scherm .g-streep { display: block; flex: none; width: 100%; height: 10px; border-radius: 5px; background: #e3e3e3; }
:where(#beheerder-google) .scherm .g-streep-kort { width: 60%; }
:where(#beheerder-google) .scherm .g-streep-kop { width: 75%; height: 14px; margin-top: 6px; background: #d3d3d3; }
:where(#beheerder-google) .scherm .g-titel-groot { font-size: 26px; font-weight: 400; }
:where(#beheerder-google) .scherm .g-account { align-items: center; gap: 6px; }
:where(#beheerder-google) .scherm .g-info { display: flex; align-items: flex-start; gap: 12px; }
:where(#beheerder-google) .scherm .g-info svg { flex: none; }
:where(#beheerder-google) .scherm .g-info-tekst { display: flex; flex-direction: column; }
:where(#beheerder-google) .scherm .g-klein { font-size: 13px; color: #444746; }
:where(#beheerder-google) .scherm .g-kop { font-size: 16px; line-height: 1.3; color: #1f1f1f; margin-top: 6px; }
:where(#beheerder-google) .scherm .g-vinktekst { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: #1f1f1f; padding-top: 2px; }
:where(#beheerder-google) .scherm .g-let-op .g-tekst { flex: 1; min-width: 0; color: #1f1f1f; }
:where(#beheerder-google) .scherm .g-detail, :where(#beheerder-google) .scherm .g-blauwtekst { color: #0b57d0; }
:where(#beheerder-google) .scherm .g-detail { font-weight: 500; }
:where(#beheerder-google) .scherm .g-knoprij-gelijk { margin-top: 18px; }
:where(#beheerder-google) .scherm .g-knoprij-gelijk > * { flex: 1; justify-content: center; }
:where(#beheerder-google) .scherm .g-scherm-rol { position: relative; padding: 0; overflow: hidden; }
:where(#beheerder-google) .scherm .g-schuif { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 24px; }
:where(#beheerder-google) .scherm .g-wie { display: flex; align-items: center; gap: 8px; font-size: 14px; }
:where(#beheerder-google) .scherm .g-bol { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #c4c7c5; }
:where(#beheerder-google) .scherm .g-let-op { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: #feefc3; }
:where(#beheerder-google) .scherm .g-let-op svg { flex: none; margin-top: 1px; }
:where(#beheerder-google) .scherm .g-let-op .g-streep { background: #f0d690; }
:where(#beheerder-google) .scherm .g-blauw { background: #d3e3fd; }
:where(#beheerder-google) .scherm .g-blauw .g-streep { background: #a8c7fa; }
:where(#beheerder-google) .scherm .g-strepen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
:where(#beheerder-google) .scherm .g-vinkrij-alles { align-items: center; border-top: 0; }
:where(#beheerder-google) .scherm .g-icoon { flex: none; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
:where(#beheerder-google) .scherm .g-icoon-contact { background: #1a73e8; color: #ffffff; }
:where(#beheerder-google) .scherm .g-icoon-agenda { background: #ffffff; border: 2px solid #4285f4; color: #1a73e8; }
:where(#beheerder-google) .scherm .g-pijl { position: absolute; left: 50%; bottom: 14px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #c2e7ff; color: #0b57d0; display: grid; place-items: center; }
:is(.geen-js :where(#beheerder-google), :where(#beheerder-google) .speelt) .scherm .g-schuif { animation: g-schuif .6s ease var(--m6) both; }
@keyframes g-schuif { from { transform: none; } to { transform: translateY(var(--schuif, -110px)); } }
:where(#beheerder-google) .scherm .rb-pagina { background: #f5f3ee; }
:where(#beheerder-google) .scherm .rb-pagina .g-link { color: #24527a; font-weight: 400; }

/* --- Momenten per scherm ------------------------------------------------------------------------------- */
.tl-beheerder-voorwaarden { --m1: 2.4s; --m2: 4.6s; --m3: 5.8s; --m4: 7.8s; --m5: 8.5s; }
.tl-beheerder-google { --m1: 2s; --m2: 4s; --m3: 6s; --m4: 8.2s; --m5: 10.2s; --m6: 12s; --m7: 13.8s; --m8: 15.8s; --schuif: -240px; }
.tl-beheerder-team { --m1: 1.2s; --m2: 2.7s; --m3: 5.2s; --m4: 7s; --m5: 9.2s; --m6: 11.6s; --m7: 12.1s; --m8: 15.6s; --m9: 15.9s;
  --m-typ: 1.4s; --typ-duur: 1.1s; --typ-tekens: 5; --m-op: 9.4s; --op-afstand: -110px; --m-in: 12.1s; --m-uit: 15.9s; }
.tl-beheerder-team .typ-mail { --m-typ: 2.8s; --typ-duur: 1.8s; --typ-tekens: 18; }

/* ---- Hoofdstukken zonder nagebouwd scherm: "komt later" ---- */
.hoofdstuk-later { grid-template-areas: "kop" "tekst"; border-style: dashed; }
.hoofdstuk-later .later-tekst { grid-area: tekst; margin: 0; }
@media (min-width: 1100px) { .hoofdstuk-later { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "tekst"; } }

/* ---- Bijstellingen na het samenvoegen ---- */
/* Aanmeldscherm: de links onderaan op twee regels passen in het kader. */
:where(#planner-aanmelden) .scherm .aanmelden-voet .linkknop { min-height: 30px; }
/* Voorwaarden: het blad met de aanvaarding is langer dan een gewoon kader. */
#beheerder-voorwaarden .kader-hoog { height: 800px; }

/* ---- Woorden in Roundbook (overzicht) ---- */
.woorden { margin-top: 24px; padding: 20px; background: var(--blad); border: 1px solid var(--lijn); border-radius: 12px; }
.woorden h3 { margin: 0 0 12px; font-size: 20px; }
.woorden dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; }
.woorden dt { font-weight: 600; margin-top: 8px; }
.woorden dd { margin: 0; color: var(--potlood); }
@media (min-width: 720px) {
  .woorden dl { grid-template-columns: 220px minmax(0, 1fr); gap: 8px 20px; }
  .woorden dt { margin-top: 0; }
}
.rolkaart .ook { margin: 12px 0 4px; font-weight: 600; }
/* Team: de knop Sluiten onderaan het blad. */
.scherm .linkknop-stil { color: var(--pencil, #6b665c); }