/* Schermen zoals het ontwerp (docs/ontwerp/schermen/nieuw, 29 okt 2026). Proef van 8 nov 2026: alleen de schermen met
   de klasse .s-ontwerp (leerling: opening, 07:40, 11:20; docent: 08:26, 08:40). Bij de uitrol krijgt elk scherm de
   klasse en gaat dit bestand naar style.css.
   Kern van het ontwerp: een raam met lucht achter alles (licht: ochtend, donker: avond), glas voor de bediening en de
   kaarten, papier (effen) voor lijsten; één accent, oranje alleen voor ander lokaal en toetsen, rood alleen voor
   "valt uit"; één soort stip (rood) voor "nieuw voor jou". Alles in em, zodat het met het toestel meeschaalt. */

.s-ontwerp {
  --s-grond: #f6f7f9; --s-paneel: rgba(255, 255, 255, .66); --s-papier: #ffffff; --s-papier-rij: #f6f7f9;
  --s-glasrand: rgba(255, 255, 255, .9); --s-tekst: #0f172a; --s-grijs: #3f4a5c; --s-zwak: #64748b;
  --s-lijn: rgba(15, 23, 42, .09); --s-label: rgba(15, 23, 42, .06); --s-accent: #2563eb; --s-accent-tekst: #1d4ed8;
  --s-accent-zacht: rgba(37, 99, 235, .12); --s-oranje: #a74d08; --s-oranje-zacht: rgba(234, 88, 12, .12);
  --s-rood: #b42318; --s-rood-zacht: rgba(217, 45, 32, .1); --s-groen-zacht: rgba(22, 163, 74, .12); --s-groen: #15803d;
  --s-donker: #0f172a; --s-op-donker: #ffffff; --s-stip: #d92d20; --s-ring: rgba(255, 255, 255, .95);
  --s-schaduw: 0 .9em 2.2em -.6em rgba(60, 72, 100, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
  --s-papierschaduw: 0 .5em 1.5em -.5em rgba(60, 72, 100, .18);
  --s-raam: rgba(250, 248, 245, .95); --s-zand: rgba(15, 23, 42, .04);
  /* Raam met ochtendlucht: zon rechtsboven, sponningen van het raam, de lucht van blauw naar zand */
  background:
    linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)),
    radial-gradient(circle at 94% -6%, rgba(255, 226, 190, .9) 0, rgba(255, 226, 190, 0) 34%),
    linear-gradient(180deg, transparent 21.5%, var(--s-raam) 21.5%, var(--s-raam) 23%, transparent 23%),
    repeating-linear-gradient(90deg, transparent 0 22.9%, var(--s-raam) 22.9% 24.4%),
    linear-gradient(180deg, #bcd3f0 0%, #dfe8f6 34%, #fbe9d7 56%, #f7dcc3 62%, #ece7e1 68%, #f4f1ec 100%);
}
@media (prefers-color-scheme: dark) {
  .s-ontwerp {
    --s-grond: #25201d; --s-paneel: rgba(28, 22, 20, .62); --s-papier: #1d1816; --s-papier-rij: #25201d;
    --s-glasrand: rgba(255, 255, 255, .14); --s-tekst: #ffffff; --s-grijs: rgba(255, 255, 255, .8); --s-zwak: rgba(255, 255, 255, .62);
    --s-lijn: rgba(255, 255, 255, .12); --s-label: rgba(255, 255, 255, .1); --s-accent: #2563eb; --s-accent-tekst: #bcd4ff;
    --s-accent-zacht: rgba(96, 165, 250, .2); --s-oranje: #f2c27b; --s-oranje-zacht: rgba(242, 194, 123, .16);
    --s-rood: #ffc4a8; --s-rood-zacht: rgba(249, 112, 102, .2); --s-groen-zacht: rgba(74, 222, 128, .16); --s-groen: #a7f3c0;
    --s-donker: rgba(255, 255, 255, .92); --s-op-donker: #1a1512; --s-stip: #f97066; --s-ring: #1d1816;
    --s-schaduw: 0 1em 2.5em -.6em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
    --s-papierschaduw: 0 .6em 1.6em -.5em rgba(0, 0, 0, .5);
    --s-raam: rgba(14, 11, 10, .92); --s-zand: rgba(255, 255, 255, .06);
    /* Raam met avondlucht */
    background:
      linear-gradient(rgba(8, 6, 5, .36), rgba(8, 6, 5, .36)),
      linear-gradient(180deg, transparent 21.5%, var(--s-raam) 21.5%, var(--s-raam) 23%, transparent 23%),
      repeating-linear-gradient(90deg, transparent 0 22.9%, var(--s-raam) 22.9% 24.4%),
      linear-gradient(180deg, #1f2a44 0%, #6b4a4f 34%, #d98b52 52%, #f2c27b 60%, #3a2a26 68%, #1b1412 100%);
  }
}
/* De telefoon: geen sponningen (te druk op een klein scherm), wel dezelfde lucht, zacht en schuin */
.scherm--telefoon.s-ontwerp {
  background:
    radial-gradient(70% 45% at 100% 30%, rgba(251, 222, 196, .9) 0, rgba(251, 222, 196, 0) 100%),
    radial-gradient(80% 40% at 0% 0%, rgba(188, 211, 240, .95) 0, rgba(188, 211, 240, 0) 100%),
    linear-gradient(180deg, #dfe8f6 0%, #f3ece4 45%, #f4f1ec 100%);
}
@media (prefers-color-scheme: dark) {
  .scherm--telefoon.s-ontwerp {
    background:
      radial-gradient(80% 30% at 85% 0%, rgba(217, 139, 82, .4) 0, rgba(217, 139, 82, 0) 100%),
      radial-gradient(90% 40% at 0% 10%, rgba(31, 42, 68, .95) 0, rgba(31, 42, 68, 0) 100%),
      linear-gradient(180deg, #1f2a44 0%, #3a2a2c 40%, #1b1412 100%);
  }
}

/* ---------------------------------------------------------------- glas en papier */
.s-ontwerp .s-paneel, .s-ontwerp .s-glas {
  background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw);
  -webkit-backdrop-filter: blur(1.4em) saturate(1.5); backdrop-filter: blur(1.4em) saturate(1.5);
}
.s-ontwerp .s-papier { background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: var(--s-papierschaduw); backdrop-filter: none; }
.s-ontwerp .s-kop { font-weight: 700; }
.s-ontwerp .s-label { background: var(--s-label); color: var(--s-tekst); }
.s-ontwerp .s-label--warm { background: var(--s-oranje-zacht); color: var(--s-oranje); }
.s-ontwerp .s-label--rood { background: var(--s-rood-zacht); color: var(--s-rood); }
.s-ontwerp .s-label--nu { background: var(--s-accent-zacht); color: var(--s-accent-tekst); }
.s-ontwerp .s-nieuw { background: var(--s-stip); }
.s-ontwerp .s-nu::before { background: #60a5fa; width: .6em; height: .6em; box-shadow: 0 0 0 .2em rgba(96, 165, 250, .25); }
.s-ontwerp .s-knop { background: var(--s-papier); border-color: var(--s-lijn); }
.s-ontwerp .s-knop--hoofd { background: var(--s-accent); color: #fff; border-color: transparent; box-shadow: 0 .5em 1.2em -.4em rgba(37, 99, 235, .55); }
.s-ontwerp .s-balkje { height: .35em; background: var(--s-label); }
.s-ontwerp .s-balkje i { width: var(--vol, 0%); background: var(--s-accent); }
.s-ontwerp .vol-10 { --vol: 10%; } .s-ontwerp .vol-36 { --vol: 36%; } .s-ontwerp .vol-58 { --vol: 58%; }
.s-ontwerp .oranje { color: var(--s-oranje); }

/* ---------------------------------------------------------------- gedeelde onderdelen op alle pagina's
   Wat over iets anders heen ligt (blad, melding, zijpaneel) of een losse rij is, krijgt effen papier: glas zonder
   vervaging eronder zou doorschijnend en onleesbaar zijn. --s-grond is in het ontwerp het lichte rijvlak op papier. */
.s-ontwerp :is(.s-blad, .s-melding, .s-zijpaneel, .s-toets, .s-inlogveld, .s-o-schrijf, .s-kind, .s-segment) { background: var(--s-papier); }
.s-ontwerp :is(.s-blad, .s-zijpaneel) { box-shadow: 0 -.6em 2.4em -.6em rgba(15, 23, 42, .28), 0 0 0 1px var(--s-lijn); }
.s-ontwerp .s-melding { box-shadow: 0 .8em 2em -.6em rgba(15, 23, 42, .35), 0 0 0 1px var(--s-lijn); }
.s-ontwerp .s-lijst li, .s-ontwerp .s-tegels--vier .s-tegel, .s-ontwerp .s-dagkaart { background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: var(--s-papierschaduw); }
.s-ontwerp .s-ballon { background: var(--s-papier); border: 1px solid var(--s-lijn); }
.s-ontwerp .s-ballon--eigen { background: var(--s-accent); color: #fff; border-color: transparent; }
.s-ontwerp .s-ballon--eigen small { color: #fff; }
.s-ontwerp .s-segment .is-actief { background: var(--s-donker); color: var(--s-op-donker); }
.s-ontwerp .s-sluit { background: var(--s-label); }
@media (prefers-color-scheme: dark) {
  .s-ontwerp :is(.s-blad, .s-zijpaneel, .s-melding) { box-shadow: 0 -.6em 2.4em -.6em rgba(0, 0, 0, .6), 0 0 0 1px var(--s-lijn); }
}

/* ---------------------------------------------------------------- laptop: de balk bovenin */
.s-ontwerp .s-balk { gap: .5em; }
.s-ontwerp .s-dagkaart-tel .s-lijst span .s-nieuw { order: 3; margin: 0 0 0 .45em; }
.s-ontwerp .s-merk .s-teken { box-shadow: 0 .3em .8em -.2em rgba(29, 78, 216, .5); }
.s-ontwerp .s-merk small { color: var(--s-grijs); }
.s-ontwerp .s-menu { background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw); padding: .3em; -webkit-backdrop-filter: blur(1.4em); backdrop-filter: blur(1.4em); }
.s-ontwerp .s-menu span { position: relative; display: inline-flex; align-items: center; gap: .4em; color: var(--s-grijs); font-weight: 500; font-size: .8125em; padding: .6em .72em; }
.s-ontwerp .s-merk, .s-ontwerp .s-merk small { white-space: nowrap; overflow-wrap: normal; flex: none; }
.s-ontwerp .s-menu .is-actief { background: var(--s-donker); color: var(--s-op-donker); font-weight: 600; }
.s-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* De rode stip op een menuknop: nieuw voor jou, nog niet gezien */
.s-menustip { position: absolute; top: .35em; right: .45em; width: .5em; height: .5em; border-radius: 50%; background: var(--s-stip); }
.s-acties { display: flex; align-items: center; gap: .4em; flex: none; }
.s-rond { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: var(--s-tekst); background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw); }
.s-rond .s-ico { width: 1.1em; height: 1.1em; }
.s-teller { position: relative; display: inline-grid; vertical-align: .1em; }
:is(.s-rond, .s-belknop) > .s-teller { position: absolute; top: .2em; right: .15em; }
.s-teller { min-width: 1.35em; height: 1.35em; padding: 0 .3em; border-radius: 999px; background: var(--s-accent); color: #fff; font-size: max(10.5px, .7em); font-weight: 700; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 .15em var(--s-ring); }
.s-wie { display: inline-flex; align-items: center; gap: .5em; height: 2.6em; padding: 0 .8em 0 .3em; border-radius: 999px; background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw); font-weight: 600; font-size: .875em; white-space: nowrap; }
.s-ontwerp .s-wie .s-avatar { width: 2.1em; height: 2.1em; background: #e8a15c; color: #1a1210; font-size: max(10px, .8em); }

/* ---------------------------------------------------------------- laptop: Je dag, de tijdlijn met verbonden punten */
.s-tijdlijn { display: flex; flex-direction: column; gap: .6em; min-width: 0; }
.s-tijdlijn > .s-kop { font-size: 1.125em; }
.s-tijdlijn ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: .75em; }
.s-tijdlijn .n3 { --n: 3; } .s-tijdlijn .n4 { --n: 4; } .s-tijdlijn .n6 { --n: 6; }
.s-tijdlijn li { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.s-tijdlijn time { padding-left: .6em; font-size: .9375em; font-weight: 600; color: var(--s-tekst); }
/* De punt met de lijn naar de volgende punt: de lijn loopt over de tussenruimte door tot het midden van de volgende */
.s-tpunt { position: relative; display: block; height: .9em; margin-left: .6em; }
.s-tpunt::before { content: ""; position: absolute; top: calc(50% - 1px); height: 2px; left: .45em; right: calc(-.75em - .6em - .45em); border-radius: 2px; background: var(--s-lijn); }
.s-tijdlijn li:last-child .s-tpunt::before { right: 0; }
.s-tpunt::after { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: .9em; height: .9em; border-radius: 50%; background: var(--s-zwak); box-shadow: 0 0 0 .2em var(--s-ring); }
.s-tijdlijn .is-geweest .s-tpunt::before { background: var(--s-zwak); opacity: .7; }
.s-tijdlijn .is-geweest + .is-nu .s-tpunt::before, .s-tijdlijn .is-nu .s-tpunt::before { background: linear-gradient(90deg, var(--s-accent) 0 45%, var(--s-lijn) 45%); opacity: 1; }
.s-tijdlijn .is-voor-nu .s-tpunt::before { background: linear-gradient(90deg, var(--s-zwak) 0 55%, var(--s-accent) 55%); opacity: 1; }
.s-tijdlijn .is-nu time { color: var(--s-accent-tekst); }
.s-tijdlijn .is-nu .s-tpunt::after { background: var(--s-accent); box-shadow: 0 0 0 .2em var(--s-ring), 0 0 0 .45em rgba(59, 130, 246, .25); }
.s-tijdlijn .is-uit .s-tpunt::after { background: var(--s-stip); }
.s-tijdlijn .is-straks .s-tpunt::after { background: var(--s-tekst); }
.s-tkaart { position: relative; flex: 1; display: flex; flex-direction: column; gap: .25em; padding: .8em .9em; border-radius: 1.05em; background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: var(--s-papierschaduw); min-width: 0; }
.s-tkaart > small { font-size: .8125em; font-weight: 600; color: var(--s-grijs); } /* niet --s-zwak: op het grijze kaartje van 'geweest' haalt dat geen 4,5:1 */
.s-tkaart > b { font-size: 1.0625em; letter-spacing: -.01em; line-height: 1.2; }
.s-tkaart > span { font-size: .8125em; color: var(--s-grijs); }
.s-tkaart .s-labels { margin-top: .3em; }
.s-tkaart .s-label { font-size: .75em; }
.s-tkaart > .s-nieuw { position: absolute; top: .8em; right: .8em; margin: 0; }
.is-geweest .s-tkaart { background: var(--s-papier-rij); box-shadow: none; }
.is-geweest .s-tkaart > b { color: var(--s-grijs); }
.is-nu .s-tkaart { border: 2px solid var(--s-accent); padding: calc(.8em - 1px) calc(.9em - 1px); }
.is-nu .s-tkaart > small { color: var(--s-accent-tekst); }
.s-tkaart > small.oranje { color: var(--s-oranje); }
.s-tkaart > small.rood { color: var(--s-rood); }

/* ---------------------------------------------------------------- laptop: Wacht op jou en lijsten op papier */
.s-ontwerp .s-taak { border-top-color: var(--s-lijn); }
.s-ontwerp .s-taak .s-knop--klein:not(.s-knop--hoofd) { background: var(--s-papier); }
.s-ontwerp .s-groot .s-titel { font-size: 2.9em; font-weight: 700; letter-spacing: -.035em; }
.s-ontwerp .s-groot .s-label { font-size: .875em; font-weight: 500; padding: .55em .8em; border-radius: .8em; background: var(--s-label); }
.s-ontwerp .s-klaarkop { font-size: .8125em; font-weight: 600; color: var(--s-grijs); }

/* ---------------------------------------------------------------- het lesscherm (na Start les) */
.s-ontwerp .s-lesbalk { background: var(--s-paneel); border: 1px solid var(--s-glasrand); -webkit-backdrop-filter: blur(1.4em); backdrop-filter: blur(1.4em); border-radius: 1.4em; padding: .7em .7em .7em 1.1em; }
.s-ontwerp .s-lesbalk .s-nu b { font-size: 1.2em; }
.s-ontwerp .s-dia { background: linear-gradient(135deg, #f8f4ee, #efe6d8); color: #1a1512; box-shadow: 0 .8em 2em -.6em rgba(60, 50, 40, .35); justify-content: center; }
.s-ontwerp .s-dia small { color: #9a3412; letter-spacing: .08em; text-transform: uppercase; font-size: max(10.5px, .7em); font-weight: 700; position: absolute; top: 1.4em; left: 1.6em; }
.s-ontwerp .s-dia span { color: #57534e; position: absolute; bottom: 1.2em; left: 1.4em; }
.s-ontwerp .s-dia b { font-size: 1.7em; }
.s-ontwerp .s-persoon { background: var(--s-papier-rij); }
.s-ontwerp .s-lesplan li { background: transparent; padding: .3em 0; border-radius: 0; font-size: .9375em; }
.s-ontwerp .s-lesplan li b { background: var(--s-accent-zacht); color: var(--s-accent-tekst); }
.s-ontwerp .s-view--les { grid-template-areas: "balk balk" "dia aanw" "ook hw" "plan handig"; grid-template-rows: auto auto auto 1fr; }
.s-ontwerp .s-ook { grid-area: ook; } .s-ontwerp .s-handig-paneel { grid-area: handig; }
.s-ontwerp .s-ook .s-taak { border-top: 0; padding-bottom: 0; }
.s-ontwerp .s-handig { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.s-ontwerp .s-handig span { display: grid; place-items: center; text-align: center; min-height: 2.6em; padding: .3em .5em; border-radius: 999px; background: var(--s-papier); border: 1px solid var(--s-lijn); font-size: .8125em; font-weight: 600; }

/* ---------------------------------------------------------------- telefoon */
.scherm--telefoon.s-ontwerp { gap: .65em; }
.s-ontwerp .s-telkop b { font-size: 1.75em; font-weight: 700; letter-spacing: -.03em; }
.s-ontwerp .s-telkop small { color: var(--s-grijs); }
/* De bel als ronde glazen knop, met het aantal nieuwe meldingen */
.s-belknop { position: absolute; right: 0; top: .1em; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw); }
.s-belknop .s-belicoon { position: static; width: 1.3em; height: 1.3em; }
.s-ontwerp .s-nukaart { border-radius: 1.5em; padding: 1.1em 1.2em; gap: .35em; }
.s-ontwerp .s-nukaart .s-vaktitel { font-size: 1.75em; letter-spacing: -.03em; }
.s-ontwerp .s-nukaart .s-vaktitel .vs { display: none; } /* in de grote kaart staat het vak zonder stip, zoals in het ontwerp */
.s-ontwerp .s-nukaart .s-meta { font-size: .9375em; }
.s-ontwerp .s-hierna { color: var(--s-tekst); font-size: .875em; margin-top: .4em; }
.s-ontwerp .s-hierna b.oranje { font-weight: 700; }

/* Je dag als één kaart: rijen zonder eigen vlak, met de vakstippen verbonden door één lijn */
.s-dagkaart-tel { padding: .9em 1.1em .7em; gap: .2em; }
.s-dagkaart-tel > .s-kop { margin-bottom: .2em; }
.s-ontwerp .s-dagkaart-tel .s-lijst { position: relative; gap: 0; }
.s-ontwerp .s-dagkaart-tel .s-lijst::before { content: ""; position: absolute; left: calc(3.1em * .9375 + .5em * .9375 + .25em * .9375 - 1px); top: 1.15em; bottom: 1.15em; width: 2px; border-radius: 2px; background: var(--s-lijn); }
.s-ontwerp .s-dagkaart-tel .s-lijst li { background: none; border: 0; box-shadow: none; border-radius: .7em; padding: .38em 0; }
.s-ontwerp .s-dagkaart-tel .s-lijst li span { font-weight: 600; }
.s-ontwerp .s-dagkaart-tel .s-lijst .vs { position: relative; z-index: 1; width: .55em; height: .55em; box-shadow: 0 0 0 .22em var(--s-ring); }
.s-ontwerp .s-dagkaart-tel .s-lijst time { color: var(--s-zwak); }
.s-ontwerp .s-dagkaart-tel .s-lijst em { color: var(--s-grijs); font-weight: 600; font-size: .875em; }
.s-ontwerp .s-dagkaart-tel .s-vouw > p { padding-left: 4.4em; }
.s-ontwerp .s-pil-uit { background: var(--s-rood-zacht); color: var(--s-rood) !important; }
.s-ontwerp .s-lijst .is-uit span { color: var(--s-grijs); }
.s-ontwerp .s-pil-nu { background: var(--s-accent-zacht); color: var(--s-accent-tekst); border-radius: 999px; padding: .15em .6em; }

/* Niet vergeten: losse kaartjes op papier met een dagteken (MA, DO) */
.s-ontwerp .s-sectiekop { font-size: 1.0625em; font-weight: 700; margin-top: .1em; }
.s-dagrijen { display: flex; flex-direction: column; gap: .4em; }
.s-dagrij { display: flex; align-items: center; gap: .8em; padding: .5em .7em; border-radius: 1.1em; background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: var(--s-papierschaduw); min-width: 0; }
.s-dagrij > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.s-dagrij b { font-size: .9375em; }
.s-dagrij small { font-size: .8125em; color: var(--s-grijs); }
.s-dagteken { flex: none; width: 2.4em; height: 2.4em; border-radius: .8em; display: grid; place-items: center; font-size: max(10.5px, .75em); font-weight: 700; background: var(--s-accent-zacht); color: var(--s-accent-tekst); }
.s-dagteken--toets { background: var(--s-oranje-zacht); color: var(--s-oranje); }
.s-dagteken--groen { background: var(--s-groen-zacht); color: var(--s-groen); }
.s-dagteken--uit { background: var(--s-rood-zacht); color: var(--s-rood); }

/* De tabbalk: glas, met iconen boven de woorden; de actieve tab donker */
.s-ontwerp .s-tabbalk { background: var(--s-paneel); border: 1px solid var(--s-glasrand); -webkit-backdrop-filter: blur(1.4em); backdrop-filter: blur(1.4em); padding: .35em; border-radius: 1.6em; left: .6em; right: .6em; bottom: .7em; }
.s-ontwerp .s-tabbalk span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .5em .1em .4em; border-radius: 1.2em; color: var(--s-grijs); font-size: max(10px, .72em); }
.s-ontwerp .s-tabbalk .s-ico { width: 1.6em; height: 1.6em; stroke-width: 1.8; }
.s-ontwerp .s-tabbalk .is-actief { background: var(--s-donker); color: var(--s-op-donker); }
.scherm--telefoon.s-ontwerp { padding-bottom: 6.4em; }

/* ---------------------------------------------------------------- laptop: je week (rooster) */
.s-ontwerp .s-wijziging { background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: var(--s-papierschaduw); border-radius: 999px; }
.s-ontwerp .s-wijziging .s-nieuw { background: var(--s-stip); }
.s-ontwerp .s-week { background: var(--s-paneel); border: 1px solid var(--s-glasrand); box-shadow: var(--s-schaduw); -webkit-backdrop-filter: blur(1.4em); backdrop-filter: blur(1.4em); border-radius: 1.4em; padding: .9em; }
.s-ontwerp .s-weekdag > p { display: flex; align-items: center; gap: .5em; }
.s-ontwerp .s-weekdag > p b { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: .6em; background: var(--s-papier); border: 1px solid var(--s-lijn); }
.s-ontwerp .s-weekdag.is-vandaag { background: var(--s-accent-zacht); border-radius: 1em; }
.s-ontwerp .s-weekdag.is-vandaag > p { color: var(--s-accent-tekst); }
.s-ontwerp .s-weekdag.is-vandaag > p b { background: var(--s-donker); color: var(--s-op-donker); border-color: transparent; }
.s-ontwerp .s-wles { background: var(--s-papier); border: 1px solid var(--s-lijn); box-shadow: none; }
.s-ontwerp .s-wles.is-geweest { background: var(--s-papier-rij); }
.s-ontwerp .s-wles.is-uit small { color: var(--s-rood); font-weight: 600; }
/* De nu-lijn in de kolom van vandaag: een punt met een lijn, net als op het Vandaag-scherm */
.s-nulijn { position: relative; display: flex; align-items: center; height: .2em; margin: .15em 0; }
.s-nulijn::before { content: ""; position: absolute; left: -.2em; width: .7em; height: .7em; border-radius: 50%; background: var(--s-accent); box-shadow: 0 0 0 .18em var(--s-ring); }
.s-nulijn::after { content: ""; flex: 1; height: 2px; margin-left: .4em; border-radius: 2px; background: var(--s-accent); }
.s-ontwerp .s-zijpaneel { background: var(--s-papier); border: 1px solid var(--s-lijn); }
.s-tkaart > .s-knop { margin-top: auto; align-self: flex-start; }
.s-ontwerp .s-minuten span { background: var(--s-papier-rij); }
.s-ontwerp .s-minuten .is-druk { background: var(--s-accent-zacht); }

/* ---------------------------------------------------------------- het digibord: de dia als vel papier op een donkere wand */
.scherm--bord.s-ontwerp { background: radial-gradient(70% 60% at 50% 40%, #1d1916 0, #0b0908 100%); color: #1a1512; }
.s-ontwerp .dc-dia { inset: 1.2em 1.6em; border-radius: .9em; background: linear-gradient(135deg, #f8f4ee, #efe6d8); box-shadow: 0 2em 5em -1em rgba(0, 0, 0, .6); }
.s-ontwerp .dc-dia-tekst small { color: #9a3412; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; font-size: max(10.5px, .8em); }
.s-ontwerp .dc-dia-tekst p { color: #44403c; }
.s-ontwerp .dc-glas { fill: rgba(255, 255, 255, .45); stroke: #8a7f73; }
.s-ontwerp .dc-buret { fill: #fbf8f3; stroke: #8a7f73; }
.s-ontwerp .dc-zwart { background: #050404; }
.s-ontwerp .dc-zwart span { color: rgba(255, 255, 255, .62); }
.s-ontwerp .dc-bordbalk { left: 50%; right: auto; transform: translateX(-50%); bottom: .8em; background: rgba(40, 34, 30, .86); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 .8em 2em -.6em rgba(0, 0, 0, .6); gap: .4em; padding: .3em; -webkit-backdrop-filter: blur(1em); backdrop-filter: blur(1em); }
.s-ontwerp .dc-bordknop { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); height: 2.4em; }
.s-ontwerp .dc-bordknop--volgende { background: #2563eb; border-color: transparent; }
.s-ontwerp .dc-bordknop--zwart.is-aan { background: #fff; color: #1a1512; }
.s-ontwerp .dc-bordstand { color: rgba(255, 255, 255, .86); font-weight: 500; padding: 0 .6em; }

/* ---------------------------------------------------------------- smal: de laptop in kaartvorm (onder 640 px) */
@media (max-width: 639px) {
  .toestel--laptop .scherm--laptop.s-ontwerp .s-acties { display: none; }
  .toestel--laptop .toestel-rand:has(.s-ontwerp) { background: var(--toestel); padding: 6px; }
  .scherm--laptop.s-ontwerp { border-radius: 18px; }
  .scherm--laptop.s-ontwerp .s-groot .s-titel { font-size: 28px; }
  .scherm--laptop.s-ontwerp .s-week { padding: 8px; }
}

/* De kolf blijft binnen het vel */
.s-ontwerp .dc-dia { overflow: hidden; }
.s-ontwerp .dc-kolf { width: auto; height: 72%; max-height: 72%; align-self: center; }