/* ═══════════════════════════════════════════════════════════════
   SceneLooks · site.css · www.scenelooks.com
   De huisstijl van de app (beeldtaal A, 28 okt 2026) voor de site:
   crème en inkt, DM Sans en DM Mono (zelf gehost, fonts/fonts.css),
   memokaartjes met het pastelverloop, geel voor de hoofdknop en de
   focusring, dunne lijnen. Altijd licht, ook als de computer donker
   staat (keuze Luc, 3 nov 2026): geen donkere modus op de site.
   Geen externe bestanden. Elke pagina laadt eerst fonts/fonts.css,
   dan dit bestand, dan eventueel een eigen <style> voor de indeling.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --creme:#FCFAF6;
  --vlak:#ffffff;
  --vlak-zacht:#F5F2EC;
  --inkt:#282623;
  --inkt-2:#57534d;          /* 7,3:1 op crème */
  --inkt-3:#6b665e;          /* 5,4:1 op crème, de kleur van ACT 1 in de app */
  --lijn:rgba(40,38,35,.16);
  --lijn-sterk:rgba(40,38,35,.32);
  --geel:#FFE082;
  --geel-diep:#F6C94A;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --schaduw-memo:0 2px 8px rgba(11,15,20,.10);
  --schaduw-venster:0 1px 2px rgba(11,15,20,.06), 0 12px 32px rgba(11,15,20,.08);

  /* memo-pastels van de Muur */
  --m-geel:#fff2a8; --m-roze:#ffc5c5; --m-blauw:#c5d5ff; --m-groen:#c0e8cc;
  --m-paars:#ddd0f7; --m-oranje:#fde5b0; --m-blauwgroen:#b8edf5;
  /* de groepen van de zijbalk (styles.css, sl-tegel.css) */
  --g-project:#f2c4bd; --g-weergave:#c8d7f0; --g-schrijven:#ddcdf1; --g-tools:#f6e2a3;
  --g-labs:#c6e6d0; --g-plein:#f6d0b5; --g-info:#c2e4e8;
  --memo-licht:#ffffff;
  --memo-inkt:#282623;
  --tegel-licht:#ffffff;
  --tegel-inkt:#282623;
  /* de schil van de app in het voorproefje (body #f6f5f1) */
  --app-bg:#f6f5f1; --app-inkt:#282623; --app-inkt-3:#6b665e; --app-lijn:rgba(40,38,35,.12); --app-zij:#ffffff;

  --breed:1320px;             /* even breed als de bovenbalk: alles begint op de linkerlijn van het logo (4 nov 2026) */
  --leesbreed:46em;           /* lopende tekst leest slecht breder dan dit */
  --marge:clamp(16px, 4vw, 40px);
  color-scheme:light;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:light; background:var(--creme); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--creme); color:var(--inkt);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.08; }
p{ margin:0; }
strong{ font-weight:700; }

/* Focus: inktrand met de gele ring, zoals de tegels in de app */
:focus-visible{ outline:2px solid var(--inkt); outline-offset:2px; box-shadow:0 0 0 5px var(--geel); border-radius:6px; }
:focus:not(:focus-visible){ outline:none; }

.sr-only{ position:absolute !important; left:0; top:0; 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:12px; top:-60px; z-index:100; background:var(--geel); color:#282623; padding:10px 14px; border-radius:6px; font-weight:700; text-decoration:none; }
.naar-inhoud:focus{ top:12px; }

.binnen{ width:100%; max-width:var(--breed); margin:0 auto; padding:0 var(--marge); }
.binnen--breed{ max-width:var(--breed); }

/* Het label in DM Mono, zoals TOON DEZE PERSONAGES en ACT 1 in de app */
.label{ font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-3); }

/* ── knoppen ── */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 18px; border-radius:8px;
  font:700 15px/1.2 var(--font); text-decoration:none; white-space:nowrap; cursor:pointer;
  background:var(--vlak); color:var(--inkt); border:1.5px solid var(--lijn-sterk);
  transition:box-shadow .12s, background-color .12s, border-color .12s;
}
.knop:hover{ box-shadow:var(--schaduw-memo); text-decoration:none; border-color:var(--inkt); }
.knop--geel{ background:var(--geel); color:#282623; border-color:var(--geel); }
.knop--geel:hover{ background:var(--geel-diep); border-color:var(--geel-diep); }
.knop--inkt{ background:var(--inkt); color:var(--creme); border-color:var(--inkt); }
.knop--klein{ min-height:36px; padding:7px 12px; font-size:14px; }
.knop--tekst{ background:none; border-color:transparent; padding-left:4px; padding-right:4px; text-decoration:underline; }
.knop--tekst:hover{ box-shadow:none; border-color:transparent; }

/* ── de bovenbalk ── */
.balk{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--creme) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--lijn);
}
.balk__binnen{ display:flex; align-items:center; gap:14px; min-height:64px; max-width:1320px; margin:0 auto; padding:8px var(--marge); }
.merk{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.merk:hover{ text-decoration:none; }
.merk__logo{ width:36px; height:36px; border-radius:9px; background:#fff; border:1px solid var(--lijn); padding:3px; }
.merk__naam{ display:flex; flex-direction:column; line-height:1.1; }
.merk__naam b{ font:800 16px/1.1 var(--font); letter-spacing:-.2px; }
.merk__naam small{ font:400 11px/1.2 var(--font); color:var(--inkt-3); margin-top:2px; }
.balk__links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.balk__links a{ padding:8px 10px; border-radius:6px; text-decoration:none; font:500 15px/1 var(--font); color:var(--inkt-2); }
.balk__links a:hover{ color:var(--inkt); background:var(--vlak-zacht); }
.balk__links a[aria-current="page"]{ color:var(--inkt); font-weight:700; }
.balk__acties{ display:flex; align-items:center; gap:8px; }
.taal{ display:inline-flex; border:1px solid var(--lijn); border-radius:8px; overflow:hidden; }
.taal button{ border:0; background:transparent; padding:7px 9px; min-width:38px; min-height:36px; font:500 12px/1 var(--mono); letter-spacing:.06em; color:var(--inkt-2); cursor:pointer; }
.taal button[aria-pressed="true"]{ background:var(--inkt); color:var(--creme); }
.taal button:focus-visible{ border-radius:0; }

/* Telefoon: de links in een uitklapmenu (details, werkt zonder script) */
.menu{ display:none; position:relative; }
.menu > summary{ list-style:none; cursor:pointer; }
.menu > summary::-webkit-details-marker{ display:none; }
.menu__lijst{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--vlak); border:1px solid var(--lijn); border-radius:8px; box-shadow:var(--schaduw-venster); padding:6px; display:flex; flex-direction:column; }
.menu__lijst a{ padding:11px 12px; border-radius:6px; text-decoration:none; font-weight:500; }
.menu__lijst a:hover{ background:var(--vlak-zacht); }
.menu__lijst .taal{ margin:8px 6px 4px; align-self:flex-start; }

/* 1100 en niet 1040 (4 nov 2026): met Schrijflab erbij is de balk 1075 px breed en viel Open de app tussen 1041 en 1075 net buiten beeld. */
@media (max-width: 1100px){
  .balk__links{ display:none; }
  .menu{ display:block; margin-left:auto; }
  .balk__acties .taal, .balk__acties .alleen-breed{ display:none; }
}
@media (max-width: 460px){
  .merk__naam small{ display:none; }
  .balk__binnen{ gap:8px; }
  .balk__acties .knop{ padding:8px 12px; font-size:14px; }
}

/* ── secties ── */
/* ═══ De opbouw van elke pagina (4 nov 2026: een stijl, met de voorpagina als maat) ═══
   1. .pagina-kop met een .kopmemo: de memokaart met de h1 en de inleiding, zoals de notitie op de voorpagina
      (licht gedraaid op breed, recht op smal). Op de voorpagina heten ze .notitie-plek en .notitie.
   2. .verder: de rij knoppen eronder (geel voor de hoofdactie, de rest als gewone link).
   3. .sectie: de delen van de pagina, allemaal met dezelfde ruimte; .sectie--lijn met een dunne lijn erboven,
      .sectie--direct zonder ruimte erboven (meteen na de kop). De kop van een deel is .kop-mid. */
.pagina-kop, .notitie-plek{ padding:clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); }
.kopmemo, .notitie{ max-width:640px; padding:clamp(24px, 3.4vw, 36px) clamp(22px, 3.6vw, 40px) clamp(22px, 3vw, 30px); transform:rotate(-.6deg); }
.kopmemo h1, .notitie h1{ font:800 clamp(24px, 2.6vw, 30px)/1.2 var(--font); letter-spacing:-.02em; }
.kopmemo p, .notitie p{ margin-top:14px; font-size:clamp(17px, 1.6vw, 19px); line-height:1.6; color:#2f2c28; }
.kopmemo .label{ display:block; margin-bottom:12px; font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#57534d; }
.kopmemo p:empty{ display:none; }
.kopmemo .kopmemo__klein{ margin-top:10px; font:400 13px/1.5 var(--mono); color:#57534d; }
.kopmemo .kopmemo__extra{ font-weight:700; color:#282623; }
.kopmemo__naam, .notitie__naam{ text-align:right; font-weight:700; color:#282623; }
@media (max-width: 820px){ .kopmemo, .notitie{ transform:none; } }
.verder{ padding:0 0 clamp(36px, 5vw, 56px); }
.verder__rij, .knoppen{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; }
.knoppen{ margin-top:24px; }
.verder__rij a:not(.knop), .knoppen a:not(.knop){ font-weight:700; color:inherit; }
.sectie{ padding:clamp(40px, 6vw, 72px) 0; }
.sectie--lijn{ border-top:1px solid var(--lijn); }
.sectie--direct{ padding-top:0; }
.sectie--zacht{ background:var(--vlak-zacht); }
.kop-mid{ font:800 clamp(22px, 2.4vw, 26px)/1.25 var(--font); letter-spacing:-.015em; }
.inleiding{ font-size:clamp(17px, 1.6vw, 19px); color:var(--inkt-2); max-width:38em; }
.kop-mid + .inleiding{ margin-top:10px; }
.kop-mid + .beloftes, .kop-mid + .vragen, .inleiding + .vragen{ margin-top:28px; }

/* Lopende tekst (privacy, voorwaarden): rustig, niet breder dan --leesbreed. */
.tekst{ max-width:var(--leesbreed); }
.tekst h2{ font:800 20px/1.35 var(--font); letter-spacing:-.01em; margin:34px 0 8px; }
.tekst p{ margin:0 0 12px; color:var(--inkt-2); }
.tekst .memo p{ margin:0; color:var(--memo-inkt); }
.tekst__memo{ margin:0 0 8px; padding:18px 20px; }
.tekst__voet{ margin-top:40px; padding-top:16px; border-top:1px solid var(--lijn); font-size:14px; color:var(--inkt-3); }

/* Een rustige lijst met dunne lijnen, met een kleurvlakje per regel (Onderwijs: de vakken). */
.vak-lijst{ border-top:1px solid var(--lijn); }
.vak{ display:grid; grid-template-columns:28px minmax(0, 220px) minmax(0, 1fr); gap:8px 24px; padding:22px 0; border-bottom:1px solid var(--lijn); align-items:baseline; }
.vak__vlak{ width:22px; height:22px; border-radius:5px; align-self:center; background:linear-gradient(168deg, var(--z), color-mix(in srgb, var(--z) 86%, #fff)); }
.vak__naam{ font:800 20px/1.3 var(--font); letter-spacing:-.01em; }
.vak__wat{ color:var(--inkt-2); max-width:var(--leesbreed); }
@media (max-width: 900px){
  .vak{ grid-template-columns:22px minmax(0, 1fr); }
  .vak__wat{ grid-column:2; }
}

/* Notities als memoblokjes in een raster (Onderwijs: de lesopdracht), licht gedraaid zoals op een muur. */
.memoblokjes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:18px; list-style:none; margin:28px 0 0; padding:0; }
.memoblokje{ padding:16px 18px 18px; transform:rotate(var(--r, 0deg)); }
.memoblokje__soort{ display:block; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#57534d; }
.memoblokje__tekst{ display:block; margin-top:10px; font:700 19px/1.3 var(--font); letter-spacing:-.01em; }
.memoblokje__hint{ display:block; margin-top:10px; font:400 14px/1.4 var(--font); color:#57534d; }
@media (max-width: 640px){ .memoblokje{ transform:none; } }

/* De foutpagina's (401, 403, 404, 500): zo hoog dat de voet onderaan blijft. */
.fout{ min-height:calc(100vh - 260px); }
main > .pagina-kop:last-child{ padding-bottom:clamp(56px, 8vw, 96px); }

/* ── de memokaart (het recept van de Muur) ── */
.memo{
  --cc:var(--m-geel);
  --ccl:color-mix(in srgb, var(--cc) 86%, var(--memo-licht));
  background:linear-gradient(168deg, var(--cc), var(--ccl));
  color:var(--memo-inkt);
  border-radius:6px; border:0; box-shadow:none;
  transition:box-shadow .12s;
}
.memo:hover{ box-shadow:var(--schaduw-memo); }
.memo--geel{ --cc:var(--m-geel); } .memo--roze{ --cc:var(--m-roze); } .memo--blauw{ --cc:var(--m-blauw); }
.memo--groen{ --cc:var(--m-groen); } .memo--paars{ --cc:var(--m-paars); } .memo--oranje{ --cc:var(--m-oranje); }
.memo--blauwgroen{ --cc:var(--m-blauwgroen); }

/* De akte-kop van de Muur: ACT 1 met een lijn erachter */
.akte{ display:flex; align-items:center; gap:14px; font:400 12px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--inkt-3); }
.akte::after{ content:''; flex:1; height:1px; background:var(--lijn-sterk); }

/* ── vragen (details) ── */
.vragen{ display:flex; flex-direction:column; border-top:1px solid var(--lijn); }
.vraag{ border-bottom:1px solid var(--lijn); }
.vraag > summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 4px; font:700 18px/1.35 var(--font); letter-spacing:-.01em;
}
.vraag > summary::-webkit-details-marker{ display:none; }
.vraag > summary::after{ content:'+'; font:400 26px/1 var(--font); color:var(--inkt-3); transition:transform .2s; flex-shrink:0; }
.vraag[open] > summary::after{ transform:rotate(45deg); }
.vraag > summary:focus-visible{ border-radius:4px; }
.vraag__antwoord{ padding:0 4px 22px; color:var(--inkt-2); max-width:44em; }
.vraag__antwoord p + p{ margin-top:10px; }

/* ── voet ── */
.voet{ border-top:1px solid var(--lijn); padding:40px 0 48px; font-size:15px; }
.voet__binnen{ display:flex; flex-wrap:wrap; gap:24px 48px; align-items:flex-start; justify-content:space-between; }
.voet__merk{ display:flex; align-items:center; gap:10px; }
.voet__merk img{ width:32px; height:32px; border-radius:8px; background:#fff; border:1px solid var(--lijn); padding:3px; }
.voet__merk span{ color:var(--inkt-3); }
.voet__links{ display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0; padding:0; }
.voet__links a{ text-decoration:none; color:var(--inkt-2); padding:6px 0; display:inline-block; }
.voet__links a:hover{ color:var(--inkt); text-decoration:underline; }
.voet__klein{ width:100%; color:var(--inkt-3); font:400 13px/1.5 var(--mono); }

/* ── zacht verschijnen bij scrollen (alleen met script, en niet bij minder beweging) ── */
.js [data-verschijn]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js [data-verschijn].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js [data-verschijn]{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

@media print{
  .balk, .voet, .naar-inhoud{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ── de tegel (sl-tegel.css in de app): pastel in de kleur van de groep ── */
.tegel{
  --tg:var(--g-tools);
  display:block; padding:16px 18px; border-radius:6px; text-decoration:none;
  background:linear-gradient(168deg, var(--tg), color-mix(in srgb, var(--tg) 86%, var(--tegel-licht)));
  color:var(--tegel-inkt); transition:box-shadow .12s;
}
a.tegel:hover{ box-shadow:var(--schaduw-memo); text-decoration:none; }
.tegel[data-groep="project"]{ --tg:var(--g-project); }   .tegel[data-groep="weergave"]{ --tg:var(--g-weergave); }
.tegel[data-groep="schrijven"]{ --tg:var(--g-schrijven); } .tegel[data-groep="tools"]{ --tg:var(--g-tools); }
.tegel[data-groep="labs"]{ --tg:var(--g-labs); }         .tegel[data-groep="plein"]{ --tg:var(--g-plein); }
.tegel[data-groep="info"]{ --tg:var(--g-info); }
.tegel__naam{ display:block; font:800 17px/1.25 var(--font); letter-spacing:-.01em; }
.tegel__uitleg{ display:block; margin-top:6px; font-size:15px; line-height:1.45; opacity:.82; }

/* Beloftes als notitieblokjes, zonder nummers (4 nov 2026): zoals de drie kaartjes op de voorpagina. */
.beloftes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; align-items:stretch; }
.beloftes .belofte{ padding:22px 22px 24px; }
.belofte h3{ font:800 19px/1.3 var(--font); letter-spacing:-.01em; }
.belofte p{ margin-top:8px; font-size:16px; line-height:1.55; color:#3d3a35; }
@media (max-width: 820px){ .beloftes{ grid-template-columns:minmax(0, 1fr); max-width:520px; } }