/* Basis = 1-op-1 de mock-up (docs/mockups/oer-vraag-landing.html), met onderaan
   de chat-overlay-aanvullingen die de POC nodig heeft. */
/* Self-hosted fonts — geen Google-Fonts-CDN, dus werkt ook met Brave Shields / Edge
   tracking-preventie (anders fallback naar systeemfont = dunne/fuzzy letters), en geen
   IP-lek naar Google (AVG). woff2 onder /static/fonts/. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/static/fonts/jetbrains-mono.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-italic.woff2") format("woff2"); }

:root {
  --paper:      #F2ECE0;
  --paper-card: #F8F3E9;
  --paper-deep: #E7DECC;
  --ink:        #211910;
  --ink-soft:   #5E5343;
  --ink-faint:  #6E6353;
  --vermilion:  #DA3A1E;
  --vermilion-d:#B22C12;
  --marker:     #FFD84D;
  --marker-was: rgba(255, 216, 77, 0.16);
  --green:      #27ae60;
  --line:       rgba(33,25,16,.14);
  --line-soft:  rgba(33,25,16,.08);
  --shadow:     22px 30px 60px -28px rgba(33,25,16,.45);
  --shadow-sm:  8px 12px 30px -16px rgba(33,25,16,.4);
  --ease:       cubic-bezier(.22,.61,.36,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.banner-warn { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--marker-was); border: 1px solid var(--marker); font-weight: 500; font-size: .92rem; line-height: 1.4; color: var(--ink); }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--marker); color: var(--ink); }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; font-weight: 500; }
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
.it { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.mark { background-image: linear-gradient(var(--marker), var(--marker)); background-repeat: no-repeat; background-size: 0% 42%; background-position: -2% 86%; padding: 0 .08em; transition: background-size .7s var(--ease); }
.mark.lit { background-size: 104% 42%; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(242,236,224,.72); border-bottom: 1px solid var(--line-soft); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; }
.brand .glyph { width: 30px; height: 30px; border-radius: 7px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "Instrument Serif", Georgia, serif; font-size: 1.25rem; line-height: 1; transform: rotate(-4deg); }
.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-right a.mono { color: var(--ink-soft); transition: color .2s; }
.nav-right a.mono:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--paper); padding: .55rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; transition: transform .25s var(--ease), background .25s; }
.nav-cta:hover { transform: translateY(-2px); background: var(--vermilion); }
@media (max-width: 720px) { nav:not(.appnav) .nav-right a.mono { display: none; } }
.rise { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rise.in { opacity: 1; transform: none; }
header.hero { padding: 150px 0 90px; position: relative; }
header.hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(20px, 5vw, 64px); width: 1px; background: var(--vermilion); opacity: .25; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }
.overline { color: var(--vermilion-d); margin-bottom: 1.6rem; display: flex; align-items: center; gap: .7rem; }
.overline::before { content: ""; width: 26px; height: 1px; background: var(--vermilion); }
h1.lede { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(3rem, 7vw, 5.7rem); line-height: .97; letter-spacing: -.015em; margin-bottom: 1.7rem; }
h1.lede .it { color: var(--vermilion); }
h1.lede .small { font-size: .56em; display: block; color: var(--ink-soft); margin-top: .25em; letter-spacing: -.01em; }
.sub { font-size: 1.18rem; color: var(--ink-soft); max-width: 30em; margin-bottom: 2.2rem; }
.sub b { color: var(--ink); font-weight: 600; }
.ask { background: var(--paper-card); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 6px 6px 6px 20px; display: flex; align-items: center; gap: 10px; max-width: 34em; }
.ask input { flex: 1; border: 0; background: transparent; font-family: inherit; font-size: 1.02rem; color: var(--ink); padding: 14px 0; }
.ask input::placeholder { color: var(--ink-faint); }
.ask input:focus { outline: none; }
.ask button { flex-shrink: 0; background: var(--vermilion); color: #fff; border: 0; border-radius: 11px; width: 48px; height: 48px; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease), background .2s; }
.ask button:hover { background: var(--vermilion-d); transform: translate(2px,-2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; max-width: 34em; }
.chip { font-size: .82rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .34rem .85rem; cursor: pointer; background: transparent; font-family: inherit; transition: all .2s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.artifact { position: relative; perspective: 1400px; }
.doc { background: var(--paper-card); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 30px 30px 34px; transform: rotate(2.4deg); transition: transform .5s var(--ease); position: relative; }
.doc::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; background: var(--vermilion); border-radius: 4px; }
.artifact:hover .doc { transform: rotate(0deg) translateY(-6px); }
.doc .stamp { position: absolute; top: -16px; right: -10px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .66rem; letter-spacing: .08em; color: var(--vermilion-d); border: 2px solid var(--vermilion-d); padding: .35rem .6rem; border-radius: 5px; transform: rotate(7deg); background: var(--paper-card); font-weight: 700; }
.doc h4 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: .15rem; }
.doc .docmeta { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .70rem; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 1.2rem; }
.doc .l { height: 8px; border-radius: 4px; background: var(--paper-deep); margin: 11px 0; }
.doc .l.w1 { width: 100%; } .doc .l.w2 { width: 92%; } .doc .l.w3 { width: 78%; } .doc .l.w4 { width: 96%; }
.doc .clause { font-size: .92rem; line-height: 1.55; color: var(--ink); margin: 14px 0 6px; font-weight: 500; }
.doc .arttag { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .70rem; color: var(--vermilion-d); letter-spacing: .08em; }
.float-quote { position: absolute; bottom: -28px; left: -36px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); max-width: 16em; transform: rotate(-2.5deg); font-size: .9rem; line-height: 1.4; }
.float-quote .mono { color: var(--marker); display: block; margin-bottom: .4rem; font-size: .64rem; }
@media (max-width: 940px) { .float-quote { left: auto; right: 0; bottom: -36px; } }
section { padding: clamp(70px, 9vw, 130px) 0; }
.seclabel { color: var(--vermilion-d); margin-bottom: 1rem; display: flex; align-items: center; gap: .7rem; }
.seclabel::before { content: ""; width: 26px; height: 1px; background: var(--vermilion); }
h2.sec { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 1.1rem; max-width: 16em; }
h2.sec .it { color: var(--vermilion); }
.sec-intro { color: var(--ink-soft); font-size: 1.12rem; max-width: 34em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 4rem; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 2.2rem 1.8rem 2.4rem; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: 0; }
@media (max-width: 820px) { .step { border-right: 0; border-bottom: 1px solid var(--line); } }
.step .num { font-family: "Instrument Serif", Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--vermilion); display: block; margin-bottom: 1rem; }
.step h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .5rem; }
.step p { color: var(--ink-soft); font-size: 1rem; }
.step .tag { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .72rem; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; margin-top: 1rem; display: inline-block; }
.demo-band { background: var(--ink); color: var(--paper); position: relative; }
.demo-band::before { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.demo-band .seclabel, .demo-band h2.sec .it { color: var(--marker); }
.demo-band h2.sec { color: var(--paper); }
.demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,5vw,72px); align-items: center; margin-top: 3rem; }
@media (max-width: 940px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-copy p { color: rgba(242,236,224,.72); font-size: 1.1rem; margin-bottom: 1.4rem; }
.demo-copy .promise { border-left: 3px solid var(--marker); padding-left: 1.2rem; color: var(--paper); font-size: 1.05rem; }
.convo { display: flex; flex-direction: column; gap: 16px; }
.bubble-q { align-self: flex-end; max-width: 80%; background: var(--vermilion); color: #fff; padding: 14px 18px; border-radius: 16px 16px 4px 16px; font-size: 1rem; font-weight: 500; }
.bubble-a { align-self: flex-start; max-width: 94%; background: rgba(248,243,233,.06); border: 1px solid rgba(248,243,233,.16); padding: 20px 22px; border-radius: 16px 16px 16px 4px; font-size: 1rem; line-height: 1.6; color: var(--paper); }
.bubble-a .src { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .70rem; letter-spacing: .08em; text-transform: uppercase; color: var(--marker); display: block; margin-bottom: .7rem; }
.bubble-a .cite { margin-top: 1rem; padding: 12px 16px; background: rgba(255,216,77,.08); border-left: 3px solid var(--marker); border-radius: 0 8px 8px 0; }
.bubble-a .cite .find { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .70rem; letter-spacing: .08em; color: var(--marker); text-transform: uppercase; display: block; margin-bottom: .35rem; }
.bubble-a .cite q { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.16rem; line-height: 1.4; color: #fff; }
.bubble-a .cite q::before, .bubble-a .cite q::after { content: '"'; }
.src-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 3.5rem; }
@media (max-width: 980px) { .src-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .src-grid { grid-template-columns: 1fr; } }
.srccard { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem 1.5rem 1.8rem; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.srccard:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.srccard .idx { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .72rem; color: var(--ink-faint); letter-spacing: .08em; }
.srccard h4 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; margin: .7rem 0 .5rem; }
.srccard p { font-size: .92rem; color: var(--ink-soft); }
.srccard .lead { position: absolute; top: 1.4rem; right: 1.3rem; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .66rem; letter-spacing: .08em; color: var(--vermilion-d); border: 1px solid var(--vermilion-d); border-radius: 4px; padding: .2rem .45rem; text-transform: uppercase; }
.srccard.primary { border-color: var(--ink); border-width: 1.5px; }
.closing { text-align: center; }
.closing h2.sec { margin: 0 auto 1.4rem; }
.closing .ask { margin: 2.4rem auto 0; }
.closing .chips { justify-content: center; margin-left: auto; margin-right: auto; }
.multi-note { margin-top: 1.6rem; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
footer { border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
footer .mono { color: var(--ink-faint); }
footer .fbrand { font-family: "Instrument Serif", Georgia, serif; font-size: 1.4rem; }

/* ══ CHAT-OVERLAY (POC-aanvulling) ══════════════════════════════════════════ */
.overlay { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: none; flex-direction: column; }
.overlay.open { display: flex; }
.overlay::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ov-head { position: relative; z-index: 1; border-bottom: 1px solid var(--line-soft); background: rgba(242,236,224,.85); backdrop-filter: blur(8px); }
.ov-head .wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; row-gap: 8px; padding: 8px 0; }
.ov-head .brand { margin-right: auto; }
.ov-labels { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-label { font-size: .72rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; }
.ov-pdfbtn, .ov-reset { font-family: inherit; font-size: .8rem; cursor: pointer; border-radius: 999px; padding: .4rem .9rem; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); transition: all .2s var(--ease); }
.ov-pdfbtn:hover, .ov-reset:hover { border-color: var(--ink); color: var(--ink); }
.ov-reset { border-color: var(--vermilion); color: var(--vermilion); }
.ov-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; }
.ov-body .wrap { max-width: 820px; padding-top: 2rem; padding-bottom: 2rem; }
.thread { display: flex; flex-direction: column; gap: 18px; }
/* chat-bubbels op licht papier (overlay) i.p.v. de donkere demo-band */
.thread .bubble-q { background: var(--vermilion); }
.thread .bubble-a { background: var(--paper-card); border: 1px solid var(--line); color: var(--ink); }
.thread .bubble-a h1, .thread .bubble-a h2, .thread .bubble-a h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: .6em 0 .2em; }
.thread .bubble-a p { margin: .5em 0; }
.thread .bubble-a ul, .thread .bubble-a ol { margin: .5em 0 .5em 1.3em; }
.thread .bubble-a table { border-collapse: collapse; margin: .6em 0; font-size: .92rem; }
.thread .bubble-a th, .thread .bubble-a td { border: 1px solid var(--line); padding: 4px 10px; text-align: left; }
.thread .bubble-a blockquote { margin: .8rem 0; padding: 12px 16px; background: var(--marker-was, rgba(255,216,77,.16)); border-left: 3px solid var(--marker); border-radius: 0 8px 8px 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.12rem; line-height: 1.4; color: var(--ink); }
.thread .bubble-a a { color: var(--vermilion); border-bottom: 1px solid var(--marker); }
.thinking { align-self: flex-start; color: var(--ink-faint); font-style: italic; }
.thinking::after { content: "▍"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ov-foot { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); background: rgba(242,236,224,.9); padding: 1rem 0 1.4rem; }
.ov-foot .wrap { max-width: 820px; }
.picker { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); }
.picker h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; margin-bottom: .3rem; }
.picker .hint { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1rem; }
.picker label { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .2rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: .95rem; }
.picker label:hover { color: var(--vermilion); }
.picker .opts { max-height: 46vh; overflow-y: auto; margin-bottom: 1rem; }
.pdf-frame { position: relative; z-index: 1; border-top: 1px solid var(--line); max-height: 72vh; overflow-y: auto; background: var(--paper-card); }
.pdf-frame iframe { width: 100%; height: 70vh; border: 0; background: var(--paper-deep); display: block; }
.pdf-frame canvas { width: 100%; height: auto; display: block; margin: 0 auto 12px; box-shadow: var(--shadow-sm); }
.pdf-acties { display: flex; gap: 10px; padding: 12px; position: sticky; top: 0; background: var(--paper-card); z-index: 2; }
.studiegids-fout { padding: 1.4rem; color: var(--ink-soft); }
.studiegids-doc { padding: 2rem 0 3rem; }
.studiegids-doc h1, .studiegids-doc h2, .studiegids-doc h3, .studiegids-doc h4 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; margin: 1.1em 0 .3em; }
.studiegids-doc h1 { font-size: 2.4rem; } .studiegids-doc h2 { font-size: 1.8rem; } .studiegids-doc h3 { font-size: 1.3rem; font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; }
.studiegids-doc p { margin: .6em 0; }
.studiegids-doc ul, .studiegids-doc ol { margin: .5em 0 .7em 1.4em; }
.studiegids-doc table { border-collapse: collapse; margin: .8em 0; font-size: .92rem; width: 100%; }
.studiegids-doc th, .studiegids-doc td { border: 1px solid var(--line); padding: 5px 11px; text-align: left; }
.studiegids-doc th { background: var(--paper-deep); }
.studiegids-doc a { color: var(--vermilion); border-bottom: 1px solid var(--marker); }
.studiegids-doc img { max-width: 320px; height: auto; margin: .5em 0; }
.iconbtn { background: var(--vermilion); color: #fff; border: 0; border-radius: 11px; min-width: 48px; height: 48px; padding: 0 14px; font-size: 1.1rem; cursor: pointer; transition: background .2s; }
.iconbtn:hover { background: var(--vermilion-d); }
.iconbtn:disabled { opacity: .5; cursor: default; }

/* ══ INGELOGDE PAGINA'S (POC-uitbreiding) ════════════════════════════════════ */
.groen { color: var(--green); } .oranje { color: #b07a18; } .rood { color: var(--vermilion-d); }
.fill.groen { background: var(--green); } .fill.oranje { background: #c9881c; } .fill.rood { background: var(--vermilion); }
.beheer-tabel { border-collapse: collapse; margin: .6em 0; font-size: .92rem; }
.beheer-tabel th, .beheer-tabel td { border: 1px solid var(--line); padding: 5px 12px; text-align: left; }
.beheer-tabel th { background: var(--paper-deep); }
.beheer-knoppen, .beheer-ingest { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: .6em 0; }
.beheer-output { background: var(--ink); color: var(--paper); padding: 14px; border-radius: 8px; max-height: 50vh; overflow-y: auto; white-space: pre-wrap; font-size: .82rem; }
.bar { height: 8px; border-radius: 4px; background: var(--paper-deep); overflow: hidden; margin: 8px 0; }
.bar .fill { height: 100%; border-radius: 4px; }
.terug { display: inline-block; color: var(--ink-soft); font-size: .9rem; margin-bottom: .6rem; }
.terug:hover { color: var(--vermilion); }
.linkbtn { background: none; border: 0; color: var(--vermilion); font-family: inherit; font-size: .85rem; cursor: pointer; padding: .4rem 0; }
.linkbtn:hover { color: var(--vermilion-d); }
.kicker { color: var(--vermilion-d); margin-bottom: .6rem; }
.labelrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .8rem; }

/* ── login ──────────────────────────────────────────────────────────────── */
.loginpage { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.loginbox { width: 100%; max-width: 400px; background: var(--paper-card); border: 1.5px solid var(--ink);
  border-radius: 18px; box-shadow: var(--shadow); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.loginbox h1 { font-size: 2.2rem; }
.loginbox .sub { margin: 0 0 .4rem; }
.loginbox input { border: 1.5px solid var(--line); border-radius: 11px; padding: 13px 15px; font-family: inherit; font-size: 1rem; background: var(--paper); }
.loginbox input:focus { outline: none; border-color: var(--ink); }
.rolradio { display: flex; gap: 1.4rem; font-size: .95rem; }
.rolradio label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.loginfout { background: rgba(218,58,30,.1); border-left: 3px solid var(--vermilion); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .9rem; }
.iconbtn.wide { width: 100%; height: 50px; border-radius: 12px; font-size: 1rem; font-weight: 600; }

/* ── ingelogde nav-shell ────────────────────────────────────────────────── */
body.app { padding-top: 60px; }
.appnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 60px;
  background: rgba(242,236,224,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.appnav .wrap { display: flex; align-items: center; height: 100%; gap: 1rem; }
.appnav .brand { margin-right: auto; }
.appnav .nav-right { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.appnav .nav-right a { color: var(--ink-soft); padding: 7px 11px; border-radius: 7px; letter-spacing: .04em;
  text-transform: none; font-size: .82rem; transition: background .15s, color .15s; }
.appnav .nav-right a:hover { background: var(--paper-deep); color: var(--ink); }
.appnav .nav-right a.actief { color: var(--ink); background: var(--paper-deep); }
.appnav .nav-right a.uit { color: var(--vermilion); }
.appmain { padding: 2.2rem 0 3rem; }
.appmain .wrap { max-width: 940px; }
.pagehead { margin-bottom: 1.4rem; }
.pagehead h1 { font-size: 2.6rem; }

/* ── inline chat-paneel ─────────────────────────────────────────────────── */
.chatpanel { display: flex; flex-direction: column; }
.chatpanel .thread { display: flex; flex-direction: column; gap: 16px; max-height: 56vh; overflow-y: auto;
  padding: 4px 2px 12px; }
.chatpanel.sessie .thread { max-height: 52vh; }
.chatfoot { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.chatfoot .ask { max-width: none; }
.thread:empty::before { content: "Stel je eerste vraag hieronder — je krijgt antwoord mét bron en citaat."; color: var(--ink-faint); font-style: italic; }

/* ── voortgang ──────────────────────────────────────────────────────────── */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.statcard { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.3rem; }
.statlabel { color: var(--ink-faint); margin-bottom: .5rem; }
.statbig { font-family: "Instrument Serif", Georgia, serif; font-size: 2.4rem; line-height: 1; }
.statsub { font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .9rem; color: var(--ink-faint); font-weight: 400; }
.sectie { margin: 2rem 0 .8rem; font-size: 1.8rem; }
.ktlijst { display: flex; flex-direction: column; gap: 2px; }
.ktrow { display: grid; grid-template-columns: minmax(0,1fr) 160px 38px; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.ktrow.sm { grid-template-columns: minmax(0,1fr) 80px 30px; gap: 8px; font-size: .9rem; }
.ktnaam { min-width: 0; }
.ktscore { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── mentor: studentenlijst ─────────────────────────────────────────────── */
.studentgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.studentcard { display: block; background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.studentcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.snaam { font-family: "Instrument Serif", Georgia, serif; font-size: 1.45rem; }
.sopl { color: var(--ink-faint); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin: .2rem 0 .4rem; }
.smeta { font-size: .82rem; color: var(--ink-soft); }

/* ── mentor: begeleidingssessie ─────────────────────────────────────────── */
.sessiegrid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.profiel { display: flex; flex-direction: column; gap: 16px; }
.profblok { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.profmeta { font-size: .92rem; margin-top: .5rem; }
.bespreek { border-color: var(--vermilion); }
.bespreekpunt { font-size: .88rem; color: var(--ink-soft); padding: .3rem 0; border-bottom: 1px solid var(--line-soft); }
.bespreekpunt:last-child { border-bottom: 0; }
.paneltabs { display: flex; gap: 6px; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ptab { background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: .9rem;
  color: var(--ink-soft); padding: .6rem .9rem; cursor: pointer; margin-bottom: -1px; }
.ptab.actief { color: var(--ink); border-bottom-color: var(--vermilion); font-weight: 600; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .sessiegrid { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .ktrow { grid-template-columns: minmax(0,1fr) 90px 32px; gap: 8px; }
  .appnav .nav-right a { font-size: .78rem; padding: 6px 8px; }
  .pagehead h1 { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  .appnav .wrap { gap: .4rem; }
  .appnav .brand span.glyph { margin-right: 0; }
}

/* Mobiele ingelogde nav: niet vastgeklikt op vaste hoogte → wrap naar 2 rijen,
   zodat de rol-links + uitloggen altijd bereikbaar blijven. */
@media (max-width: 560px) {
  body.app { padding-top: 0; }
  .appnav { position: static; height: auto; }
  .appnav .wrap { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
  .appnav .brand { margin-right: auto; }
  .appnav .nav-right { width: 100%; gap: 2px; justify-content: flex-start; }
  .appmain { padding-top: 1.4rem; }
}

/* Geneste werkprocessen onder een kerntaak (voortgang + mentor-profiel). */
.ktrow.wp { border-bottom: 1px solid var(--line-soft); }
.ktrow.wp .ktnaam { padding-left: 1.1rem; color: var(--ink-soft); font-size: .88rem; }
.ktrow.sm.wp .ktnaam { font-size: .82rem; }

/* ── opleidingskiezer ─────────────────────────────────────────────────────── */
.oplkiezer { margin-top: 1.1rem; }
.oplkiezer > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--ink-soft); list-style: none; user-select: none;
}
.oplkiezer > summary::-webkit-details-marker { display: none; }
.oplkiezer > summary::before { content: "▸"; transition: transform .2s; }
.oplkiezer[open] > summary::before { transform: rotate(90deg); }
.oplkiezer > summary:hover { color: var(--ink); }
.cascade-host { margin-top: .9rem; }
.cascade { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cascade select {
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .9rem; min-width: 0; flex: 1 1 180px; cursor: pointer;
}
.cascade select:disabled { opacity: .5; cursor: not-allowed; }
.cascade select:focus { outline: 2px solid var(--vermilion); outline-offset: 1px; }
.cascade .cas-start { flex: 1 1 200px; height: 48px; }
.cascade .cas-start:disabled { opacity: .45; cursor: not-allowed; }