/* Labee leerplatform — stijl volgens het prototype (ontwerp/prototype/Main.dc.html).
   Rood is voor handelen (knoppen, links, menukeuze); goud alleen voor wat iemand bereikt. */

@font-face{font-family:"Inter";src:url(lettertypen/Inter-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(lettertypen/Inter-Medium.woff) format("woff");font-weight:500 600;font-display:swap}
@font-face{font-family:"Inter";src:url(lettertypen/Inter-Bold.woff) format("woff");font-weight:700 900;font-display:swap}
@font-face{font-family:"Newsreader";src:url(lettertypen/Newsreader.woff) format("woff");font-weight:400 600;font-display:swap}

:root{
  --r:14px; --rs:10px;
  --btn-bg:#852020; --btn-ink:#FFFFFF; --btn-bd:1px solid #6B1818;
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(40,8,8,.30);
  --gold-bg:#D5932E; --gold-ink:#24130A; --gold-bd:1px solid #A9721D;
  --gold-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 1px 2px rgba(40,8,8,.30);
  --progress:#D5932E; --mark:#852020;
  /* licht */
  --bg:#F5F4F3; --nav-bg:#FFFFFF; --surface:#FFFFFF; --field:#FFFFFF; --stage:#FFFFFF;
  --line:#E4E0DE; --text:#1C1718; --text2:#3D3536; --muted:#665D5F; --input-bd:#8F8688;
  --ink:#852020; --tint:#F6E8E8;
  --btn2-bg:#FFFFFF; --btn2-ink:#1C1718; --btn2-bd:1px solid #8F8688;
  --panel-shadow:0 1px 3px rgba(28,23,24,.08);
  --logo-bg-opacity:.10; --hole-bg:#ECE8E6; --hole-edge:#CFC8C5; --hole-shade:.28;
  --ok-bg:#FBF0DC; --ok-ink:#6E460A; --fout-bg:#F6E8E8; --fout-ink:#9B1C1C;
  --badge-bg:rgba(0,0,0,.55); --badge-ink:#FFFFFF;
  --dot-off:#E6E1DF; --sel:rgba(133,32,32,.16); --sel-ink:#1C1718; --focus:#852020; --sb-thumb:#C9C2C0;
  color-scheme:light;
}
:root[data-thema="donker"]{
  --bg:#131112; --nav-bg:#191617; --surface:#1E1B1C; --field:#272324; --stage:#1E1B1C;
  --line:#353031; --text:#F5F2EF; --text2:#D8D2CD; --muted:#ABA49F; --input-bd:#7A7375;
  --ink:#F0B4B4; --tint:rgba(240,180,180,.12);
  --btn2-bg:#272324; --btn2-ink:#F5F2EF; --btn2-bd:1px solid #5A5355;
  --panel-shadow:0 20px 44px rgba(0,0,0,.40);
  --logo-bg-opacity:.22; --hole-bg:#151213; --hole-edge:#3A3436; --hole-shade:.7;
  --ok-bg:rgba(213,147,46,.18); --ok-ink:#F0C47A; --fout-bg:rgba(255,120,120,.12); --fout-ink:#FFA3A3;
  --dot-off:#3E393A; --sel:rgba(240,180,180,.25); --sel-ink:#FFFFFF; --focus:#F0B4B4; --sb-thumb:#4C4648;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;caret-color:var(--focus);scrollbar-color:var(--sb-thumb) transparent}
::selection{background:var(--sel);color:var(--sel-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--ink);text-underline-offset:3px}
h1,.serif{font-family:"Newsreader",Georgia,serif;font-weight:600;letter-spacing:-.01em}
h1{margin:0;font-size:34px;line-height:1.15}
h2{margin:0;font-size:19px;font-weight:600}
p{margin:0}
.gedempt{color:var(--muted)}
.verborgen{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* knoppen */
button{font-family:inherit;cursor:pointer;transition:filter 160ms cubic-bezier(.2,.8,.2,1),transform 160ms cubic-bezier(.2,.8,.2,1),box-shadow 160ms cubic-bezier(.2,.8,.2,1)}
button:hover:not(:disabled){filter:brightness(1.08)}
button:active:not(:disabled){transform:translateY(1px);filter:brightness(.96)}
button:disabled{cursor:not-allowed;opacity:.6}
.knop{min-height:48px;padding:0 22px;border:var(--btn-bd);border-radius:var(--rs);background:var(--btn-bg);color:var(--btn-ink);
  box-shadow:var(--btn-shadow);font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.knop--2{border:var(--btn2-bd);background:var(--btn2-bg);color:var(--btn2-ink);box-shadow:none;font-weight:500}
.knop--goud{border:var(--gold-bd);background:var(--gold-bg);color:var(--gold-ink);box-shadow:var(--gold-shadow)}
.knop--klein{min-height:40px;padding:0 16px;font-size:15px}
.link{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.link--stil{color:var(--text2);font-weight:400}

/* velden */
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:15px;font-weight:600}
.veld input{width:100%;min-height:46px;padding:0 14px;border:1px solid var(--input-bd);border-radius:var(--rs);background:var(--field);color:var(--text);font:inherit;font-size:17px}
.veld input.code{min-height:52px;font-size:24px;font-weight:600;letter-spacing:.3em}
.veld input.toegang{letter-spacing:.06em}
.veld .hulp{font-size:14px;color:var(--muted)}
.melding{padding:12px 16px;border-radius:var(--rs);font-weight:500}
.melding--ok{background:var(--ok-bg);color:var(--ok-ink)}
.melding--fout{background:var(--fout-bg);color:var(--fout-ink)}

/* kaarten */
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}

/* ───────────── inlogschermen ───────────── */
.auth{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.auth__kunst{position:absolute;z-index:-1;right:-180px;bottom:-140px;width:860px;height:838px;pointer-events:none;overflow:visible}
.auth__kunst g{opacity:var(--logo-bg-opacity)}
.auth__thema{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text2);font-size:15px;font-weight:500}
.merk{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:600}
.merk img{width:54px;height:52px;object-fit:contain}
.auth__kaart{width:100%;max-width:440px;padding:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--panel-shadow);display:flex;flex-direction:column;gap:20px}
.auth__kaart h1{font-size:28px}
.auth__kop{display:flex;flex-direction:column;gap:6px}
.auth__voet{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--muted);text-align:center;max-width:440px}
.scheiding{height:1px;background:var(--line)}

/* ───────────── schil: menu + werkvlak ───────────── */
.schil{min-height:100vh;display:flex;flex-wrap:wrap;align-items:stretch}
.menu{flex:1 1 250px;padding:24px 16px;background:var(--nav-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.menu .merk{gap:12px;padding:0 8px;font-size:16px;line-height:1.25}
.menu .merk img{width:42px;height:40px}
.menu__lijst{display:flex;flex-direction:column;gap:4px}
.menu__knop{white-space:nowrap;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--rs);background:transparent;color:var(--text);font-size:16px;font-weight:500;text-align:left}
.menu__knop:hover{box-shadow:inset 0 0 0 1px var(--line)}
.menu__knop[aria-current="page"]{background:var(--tint);color:var(--ink);font-weight:600}
.menu__rij{display:flex;align-items:center;gap:4px}
.menu__rij .menu__knop{flex-grow:1}
.menu__klap{width:44px;height:44px;flex-shrink:0;border:0;border-radius:var(--rs);background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center}
.menu__klap svg{transition:transform 200ms}
.menu__klap[aria-expanded="false"] svg{transform:rotate(-90deg)}
.menu__sub{display:flex;flex-direction:column;gap:2px}
.menu__sub button{min-height:44px;padding:6px 12px 6px 42px;border:0;border-radius:var(--rs);background:transparent;color:var(--text2);font-size:15px;line-height:1.3;text-align:left}
.menu__sub button:hover{box-shadow:inset 0 0 0 1px var(--line)}
.menu__onder{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.menu__account{min-height:52px;padding:6px 12px}
.menu__account span{display:flex;flex-direction:column;line-height:1.25}
.menu__account b{font-size:15px;font-weight:600}
.menu__account small{font-size:14px;color:var(--muted)}
.werk{flex:999 1 560px;min-width:0;padding:40px 36px 56px}
.werk__in{max-width:1120px;display:flex;flex-direction:column;gap:28px}
.kop{display:flex;flex-direction:column;gap:4px}
.apparaat{font-size:14px;color:var(--muted)}

/* welkom */
.welkom h1{font-size:38px}
.rij-kaarten{display:flex;flex-wrap:wrap;gap:24px}
.ring{flex:1 1 320px;padding:24px 28px;display:flex;align-items:center;gap:28px}
.ring__figuur{position:relative;width:128px;height:128px;flex-shrink:0}
.ring__getal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;padding-bottom:3px}
.lijst{display:flex;flex-direction:column;gap:12px}
.lijst__rij{padding:16px 20px;display:flex;align-items:center;gap:20px}
.lijst__midden{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.lijst__boven{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.lijst__titel{padding:0;border:0;background:none;color:var(--text);font-size:20px;text-align:left}
.lijst__status{font-size:15px;color:var(--muted)}
.balk{height:6px;border-radius:3px;background:var(--dot-off);overflow:hidden}
.balk>div{height:6px;border-radius:3px;background:var(--progress)}
.badge{width:56px;height:56px;flex-shrink:0}

/* tegels */
.tegels{display:flex;flex-wrap:wrap;gap:24px}
.tegel{flex:1 1 280px;max-width:356px;overflow:hidden;display:flex;flex-direction:column}
.omslag{position:relative;height:156px;overflow:hidden;background:linear-gradient(135deg,#5A1414 0%,#852020 55%,#AB3A2C 100%)}
.omslag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.omslag__vlak{position:absolute;border-radius:32px;transform:rotate(28deg)}
.omslag__label{position:absolute;left:16px;top:16px;padding:4px 10px;border-radius:999px;background:var(--badge-bg);color:var(--badge-ink);font-size:13px;font-weight:600}
.omslag__label--af{background:var(--ok-bg);color:var(--ok-ink)}
.tegel__body{padding:20px;display:flex;flex-direction:column;gap:16px;flex-grow:1}
.tegel__tekst{display:flex;flex-direction:column;gap:4px;flex-grow:1}
.tegel__tekst h2{font-family:"Newsreader",Georgia,serif;font-size:22px;line-height:1.25}
.tegel__meta{font-size:14px;color:var(--muted)}
.code-invullen{max-width:440px;padding:24px;display:flex;flex-direction:column;gap:12px}

/* startscherm */
.start{min-height:100vh;display:flex;flex-direction:column}
.held{position:relative;overflow:hidden;min-height:480px;padding:20px 40px 52px;color:#FFFFFF;display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(135deg,#5A1414 0%,#852020 55%,#AB3A2C 100%)}
.held__beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held__waas{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,8,8,.78) 0%,rgba(20,8,8,.55) 45%,rgba(20,8,8,.10) 100%)}
.held__terug{position:relative;align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:#FFFFFF;font-size:16px;font-weight:500}
.held__tekst{position:relative;margin-top:auto;max-width:700px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.held__tekst h1{font-size:56px;letter-spacing:-.025em;line-height:1.05}
.held__intro{font-size:19px;color:rgba(255,255,255,.88)}
.held__meta{display:flex;flex-wrap:wrap;gap:20px;font-size:16px;font-weight:500;color:rgba(255,255,255,.88)}
.held .knop{margin-top:8px;min-height:54px;padding:0 32px;font-size:18px}
.start__onder{width:100%;max-width:1200px;padding:32px 40px 56px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.voortgang{flex:1 1 300px;max-width:560px;padding:24px;display:flex;flex-direction:column;gap:14px}
.voortgang dl{margin:0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.voortgang dl div{display:flex;justify-content:space-between;gap:12px}
.voortgang dt{color:var(--muted)}
.voortgang dd{margin:0;font-weight:500;text-align:right}

/* spelen */
.spelen{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--stage)}
.spelen__balk{flex-shrink:0;min-height:48px;padding:2px 12px;background:var(--nav-bg);border-bottom:1px solid var(--line);display:flex;align-items:center}
.spelen__balk button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 6px;border:0;border-radius:var(--rs);background:transparent;color:var(--text2);font-size:16px;font-weight:500}
.spelen iframe{flex-grow:1;width:100%;border:0;background:var(--stage)}

/* account */
.account{max-width:640px}
.account .kaart{padding:24px;display:flex;flex-direction:column;gap:14px}
.gegeven{display:flex;flex-direction:column}
.gegeven span{font-size:14px;color:var(--muted)}
.gegeven b{font-weight:500;overflow-wrap:anywhere}
.knoppen{display:flex;flex-wrap:wrap;gap:10px}

/* laden */
.laden{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* animaties (prototype) */
@keyframes lpRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lpFly{from{transform:translateY(48px) scale(.96)}to{transform:none}}
@keyframes lpMoveSm{from{transform:translateY(16px)}to{transform:none}}
@keyframes lpFadeSoft{from{opacity:0}to{opacity:1}}
@keyframes lpFade{from{opacity:0}to{opacity:1}}
@keyframes lpPlane{from{opacity:0;transform:translate(48px,24px) rotate(28deg)}to{opacity:1;transform:rotate(28deg)}}
@keyframes lpRing{from{stroke-dashoffset:326.7}}
@keyframes lpBar{from{width:0}}
@keyframes lpBadge{0%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes lpZoom{from{transform:scale(1.06)}to{transform:none}}
.a-screen{animation:lpFade 180ms ease-out both}
.a-work{animation:lpFade 150ms ease-out both}
.a-tile-full{animation:lpFly 750ms cubic-bezier(.16,1,.3,1) both,lpFadeSoft 550ms cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
.a-tile-quick{animation:lpMoveSm 400ms cubic-bezier(.16,1,.3,1) both,lpFadeSoft 320ms cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
.a-title{animation:lpRise 480ms cubic-bezier(.16,1,.3,1) both;animation-delay:120ms}
.a-card{animation:lpRise 340ms cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
.a-ring{animation:lpRing 1100ms cubic-bezier(.16,1,.3,1) 300ms both}
.a-bar{animation:lpBar 900ms cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
.a-badge{animation:lpBadge 560ms cubic-bezier(.2,.8,.2,1) both;transform-origin:center;animation-delay:var(--d,0ms)}
.a-zoom{animation:lpZoom 1200ms cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

@media (min-width:860px){.menu{flex:0 0 264px}}
@media (max-width:640px){
  .werk{padding:28px 16px 40px}
  .auth__kaart{padding:28px 22px}
  .held{padding:16px 20px 36px;min-height:420px}
  .held__tekst h1{font-size:40px}
  .start__onder{padding:24px 16px 40px}
  .welkom h1{font-size:30px}
  .ring{gap:20px;padding:20px}
  .lijst__rij{flex-wrap:wrap}
}