/* Qoinomics Education – ontwerpsysteem (v690). Strak: rechte hoeken, dunne lijnen, grote getallen, kleur alleen met betekenis.
   Groen = goed/open/winst · amber = let op/eerste plaats · koraal = verlies/inflatie · blauw = geld/koopkracht · paars = omzet · navy = merk. */
:root { --qn-navy: #123C69; --qn-navy2: #0d2b4c; --qn-gold: #E8B830; --qn-green: #1D9E75; --qn-green-d: #0F6E56; --qn-amber: #EF9F27; --qn-amber-d: #854F0B;
  --qn-coral: #D85A30; --qn-coral-d: #993C1D; --qn-blue: #378ADD; --qn-blue-d: #185FA5; --qn-purple: #7F77DD; --qn-purple-d: #3C3489; --qn-line: #e2e6eb; --qn-bg: #f4f6f9;
  --qn-stripe: linear-gradient(90deg, #1D9E75 0 37%, #E8B830 37% 62%, #D85A30 62% 75%, #378ADD 75%); }
body { background: #fff; }
/* kopband over de volle breedte, met de kleurstreep eronder */
header { max-width: none !important; margin: 0 !important; background: var(--qn-navy); padding: 14px max(32px, calc((100vw - 1040px) / 2 + 32px)) !important; position: relative; align-items: center !important; }
header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--qn-stripe); }
header .brand { display: flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
header .brand .brand-name, header .brand .brand-name span { color: #fff !important; } header .brand .brand-name span { color: var(--qn-gold) !important; }
header .brand-logo { height: 30px; width: auto; display: block; }
header .brand-mark { width: 30px; height: 30px; background: var(--qn-gold); color: var(--qn-navy); align-items: center; justify-content: center; font-weight: 600; border-radius: 0 !important; }
header nav a, header nav span, header nav button { color: #b5d4f4 !important; } header nav a:hover { color: #fff !important; }
main { padding-top: 28px !important; }
/* titel en kerncijfers */
.top { border-bottom: 0 !important; padding-bottom: 6px !important; } .top h1 { font-size: 34px; color: var(--qn-navy); }
.stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; padding: 0 !important; border-top: 1px solid var(--qn-line); border-bottom: 1px solid var(--qn-line) !important; margin-top: 10px; }
.stats > * { padding: 14px 16px 14px 0; font-size: 11px !important; letter-spacing: .07em; text-transform: uppercase; color: #6b7684 !important; border-right: 1px solid var(--qn-line); }
.stats > *:not(:first-child) { padding-left: 16px; } .stats > *:last-child { border-right: 0; }
.stats b { display: block; font-size: 34px !important; line-height: 1.15; letter-spacing: -.02em; text-transform: none; margin: 0 0 2px !important; font-weight: 500; }
.stats > *:nth-child(1) b { color: var(--qn-navy) !important; } .stats > *:nth-child(2) b { color: var(--qn-blue-d) !important; } .stats > *:nth-child(3) b { color: var(--qn-amber-d) !important; } .stats > *:nth-child(4) b { color: var(--qn-green-d) !important; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tabbladen, labels, knoppen */
.tabs { border-bottom: 1px solid var(--qn-line) !important; } .tab.on { color: var(--qn-navy) !important; border-bottom: 3px solid var(--qn-gold) !important; }
.lbl { color: var(--qn-navy) !important; font-weight: 500; letter-spacing: .08em !important; border-left: 4px solid var(--qn-gold); padding-left: 10px; }
.btn { background: var(--qn-navy) !important; border-color: var(--qn-navy) !important; color: #fff !important; border-radius: 0 !important; text-transform: uppercase; letter-spacing: .06em; font-size: 12px !important; padding: 11px 22px !important; }
.btn:hover { background: var(--qn-navy2) !important; } .btn.ghost { background: #fff !important; color: var(--qn-navy) !important; }
.lnk { text-decoration-color: var(--qn-gold) !important; text-decoration-thickness: 2px !important; }
.meta h2 { font-size: 24px; color: var(--qn-navy); }
.simline { border-top: 1px solid var(--qn-line); border-bottom: 1px solid var(--qn-line) !important; padding: 12px 0 !important; }
.simline .run { color: var(--qn-green-d) !important; } .simline .run::before { background: var(--qn-green) !important; } .simline .stop::before { background: var(--qn-amber) !important; }
.opts .opt.on { color: var(--qn-navy) !important; border-bottom-color: var(--qn-gold) !important; }
th { color: #6b7684 !important; letter-spacing: .07em !important; border-bottom: 2px solid var(--qn-navy) !important; }
.explain { border-left: 4px solid var(--qn-line); padding-left: 14px; }
/* economie en drukte: segmentbalk en gekleurde meters */
.qe-panel { border-top: 4px solid var(--qn-navy); border-bottom: 1px solid var(--qn-line); padding: 16px 0 18px; margin: 18px 0; }
.qe-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .qe-head b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--qn-navy); }
.qe-head span { margin-left: auto; font-size: 13px; color: var(--qn-amber-d); border-left: 3px solid var(--qn-amber); padding-left: 8px; }
.qe-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--qn-line); margin-bottom: 16px; }
.qe-seg button { flex: 1 1 auto; min-width: 92px; font: inherit; font-size: 13px; padding: 10px 8px; background: #fff; color: #4a5562; border: 0; border-right: 1px solid var(--qn-line); cursor: pointer; }
.qe-seg button:last-child { border-right: 0; } .qe-seg button:hover { background: var(--qn-bg); }
.qe-seg button.on { background: var(--qn-navy); color: #fff; }
.qe-seg button.on[data-esc=hoog], .qe-seg button.on[data-esc=toerist] { background: var(--qn-green); color: #fff; }
.qe-seg button.on[data-esc=recessie] { background: var(--qn-amber); color: #412402; } .qe-seg button.on[data-esc=inflatie], .qe-seg button.on[data-esc=stagflatie] { background: var(--qn-coral); color: #fff; }
.qe-seg button.on[data-esc=energie] { background: #BA7517; color: #fff; } .qe-seg button.on[data-esc=rente] { background: var(--qn-blue); color: #fff; }
.qe-seg button.on[data-esc=deflatie] { background: var(--qn-purple); color: #fff; } .qe-seg button.on[data-esc=concurrentie] { background: #D4537E; color: #fff; }
.qe-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 90px; gap: 14px; align-items: center; margin: 6px 0; font-size: 13px; color: #4a5562; }
.qe-row input[type=range] { width: 100%; padding: 0; border: 0; } .qe-row b { font-weight: 500; font-size: 14px; }
.qe-row.crowd input { accent-color: var(--qn-green); } .qe-row.crowd b { color: var(--qn-green-d); } .qe-row.inflation input { accent-color: var(--qn-coral); } .qe-row.inflation b { color: var(--qn-coral-d); }
.qe-row.interest input, .qe-row.demand input { accent-color: var(--qn-blue); } .qe-row.interest b, .qe-row.demand b { color: var(--qn-blue-d); } .qe-row.energy input { accent-color: #BA7517; } .qe-row.energy b { color: var(--qn-amber-d); }
.qe-foot { display: flex; align-items: center; gap: 18px; margin-top: 14px; } .qe-foot label { display: flex; align-items: center; margin: 0; }
/* ranglijst: goud, zilver, brons */
.rk td:first-child { font-size: 22px; font-weight: 500; color: #8a94a0; width: 44px; border-left: 5px solid transparent; padding-left: 10px !important; }
.rk1 td:first-child { border-left-color: var(--qn-amber); color: #BA7517; } .rk1 { background: #fdf6e9; }
.rk2 td:first-child { border-left-color: #B4B2A9; color: #6f6e69; } .rk3 td:first-child { border-left-color: var(--qn-coral); color: var(--qn-coral-d); }
.rk:hover { background: #f4f7fb; } .rk1:hover { background: #fbf0dc; }
.scb { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .scb i { display: inline-block; width: 70px; height: 7px; background: #eef1f4; position: relative; }
.scb i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c, var(--qn-navy)); }
.srt { display: flex; gap: 18px; align-items: baseline; margin: 0 0 10px; font-size: 13px; } .srt button { font: inherit; background: none; border: 0; padding: 0 0 3px; color: #6b7684; cursor: pointer; border-bottom: 2px solid transparent; }
.srt button.on { color: var(--qn-navy); border-bottom-color: var(--qn-navy); font-weight: 500; }

/* ===================== v693: dashboard-indeling (zijbalk · hero · kaarten · tabbladen · rechterkolom) ===================== */
body { background: #f4f6f8 !important; }
header { background: #fff !important; border-bottom: 1px solid #e6e9ee; } header::after { display: none; }
header .brand, header .brand .brand-name { color: #14202e !important; } header .brand .brand-name span { color: #FF5A1F !important; }
header nav a, header nav span, header nav button { color: #4a5562 !important; }
main { max-width: 1440px !important; padding: 22px 24px 60px !important; }
.ql-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.ql-card, .ql-hero, .ql-info, .ql-kpi, .ql-side { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06); }
/* zijbalk */
.ql-side { position: sticky; top: 16px; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; min-height: calc(100vh - 120px); }
.ql-org { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; } .ql-org b { display: block; font-size: 13px; letter-spacing: .04em; } .ql-org small { color: #6b7684; font-size: 12px; }
.ql-orgi { width: 40px; height: 40px; border-radius: 10px; background: #1f5f4a; color: #fff; display: flex; align-items: center; justify-content: center; }
.ql-nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: 14px; color: #3b4654; cursor: pointer; text-align: left; }
.ql-nav:hover { background: #f1f4f6; } .ql-nav.on { background: #1f5f4a; color: #fff; }
.ql-brand { margin-top: auto; text-align: center; padding: 16px 8px 6px; } .ql-brand img { max-width: 120px; display: block; margin: 0 auto 4px; } .ql-brand small { color: #8a94a0; font-size: 11px; }
/* hero en info */
.ql-sup:empty { display: none; } .ql-sup { margin-bottom: 16px; }
.ql-hero { position: relative; min-height: 180px; background-size: cover; background-position: center bottom; display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 24px; overflow: hidden; }
.ql-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .78) 32%, rgba(255, 255, 255, 0) 60%); }
.ql-hero > * { position: relative; } .ql-hero h1 { font-size: 36px; line-height: 1.05; color: #14202e; letter-spacing: -.02em; margin: 0; } .ql-hero p { margin: 4px 0 10px; color: #3b4654; }
.ql-live { font-size: 13px; color: #1f7a4f; } .ql-live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22a06b; margin-right: 6px; } .ql-live.off { color: #a86a00; } .ql-live.off::before { background: #e8a33a; }
.ql-hb { display: inline-flex; gap: 6px; align-items: center; background: #fff; color: #14202e; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ql-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 16px; padding: 4px 0; }
.ql-info > div { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-right: 1px solid #eef0f3; color: #6b7684; } .ql-info > div:last-child { border-right: 0; }
.ql-info small { display: block; font-size: 12px; color: #8a94a0; } .ql-info span { color: #14202e; font-size: 14px; }
.ql-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22a06b; margin-right: 6px; } .ql-dot.off { background: #e8a33a; }
/* kerncijfers */
.ql-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ql-kpi { display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ql-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 24, 40, .1); } .ql-kpi b { display: block; font-size: 30px; font-weight: 600; color: #14202e; line-height: 1.1; } .ql-kpi small { color: #6b7684; font-size: 13px; }
.ql-ki { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.ql-ki.g { background: #e3f5ec; color: #1f7a4f; } .ql-ki.b { background: #e6f1fb; color: #185FA5; } .ql-ki.o { background: #fdeee4; color: #c4501e; } .ql-ki.t { background: #e1f5ee; color: #0F6E56; }
.ql-chev { margin-left: auto; color: #a3acb7; }
/* klassen kiezen + tabbladen */
.ql-classes .tabs { margin: 0 0 12px !important; border: 0 !important; gap: 8px !important; } .ql-classes .tab { background: #fff; border: 1px solid #e6e9ee !important; border-radius: 99px; padding: 6px 14px !important; font-size: 13px !important; }
.ql-classes .tab.on { background: #1f5f4a; color: #fff !important; border-color: #1f5f4a !important; }
.ql-tabcard { padding: 0 20px 20px; } .ql-tabs { display: flex; align-items: center; gap: 4px 26px; border-bottom: 1px solid #eef0f3; margin: 0 -20px 18px; padding: 0 20px; flex-wrap: wrap; }
.ql-tabs button { font: inherit; font-size: 14px; background: none; border: 0; padding: 16px 2px 13px; color: #6b7684; cursor: pointer; border-bottom: 3px solid transparent; }
.ql-tabs button.on { color: #14202e; font-weight: 600; border-bottom-color: #FF5A1F; } .ql-ext { margin-left: auto; font-size: 13px; color: #14202e; }
/* de klaskaart */
.ql-class { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 18px; }
.ql-cimg { height: 130px; border-radius: 12px; background: linear-gradient(135deg, #12324f, #1f5f4a); display: flex; align-items: center; justify-content: center; } .ql-cimg img { max-width: 70%; max-height: 80%; }
.ql-cbody .meta { margin: 0 0 6px !important; } .ql-cbody .meta h2 { font-size: 22px; } .ql-cbody .simline { border: 0 !important; padding: 4px 0 10px !important; margin: 0 !important; font-size: 13px; }
.ql-cbody .simline button.lnk { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; padding: 7px 12px; text-decoration: none !important; font-size: 13px; }
.ql-open { display: inline-flex; align-items: center; gap: 6px; background: #FF5A1F; color: #fff !important; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-top: 4px; }
.ql-open:hover { background: #e84c13; }
/* economie: als kaart, met tabjes en gekleurde schuiven */
.ql-econ .qe-panel { border: 1px solid #eef0f3 !important; border-radius: 12px; padding: 18px 20px !important; margin: 0 0 14px !important; }
.ql-econ .qe-head b { font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important; color: #14202e !important; } .ql-econ .qe-head span { border: 1px solid #e6e9ee !important; border-radius: 8px; padding: 6px 10px !important; color: #3b4654 !important; }
.ql-econ .qe-seg { border: 1px solid #eef0f3 !important; border-radius: 10px; overflow: visible; background: #fafbfc; }
.ql-econ .qe-seg button { background: none !important; color: #4a5562 !important; border-right: 0 !important; border-bottom: 3px solid transparent; font-size: 13px; padding: 10px 10px 8px !important; position: relative; }
.ql-econ .qe-seg button.on { color: #c4501e !important; border-bottom-color: #FF5A1F; font-weight: 600; background: #fff !important; }
.ql-econ .qe-row { grid-template-columns: 150px minmax(0, 1fr) 80px; } .ql-econ .qe-row input[type=range] { height: 6px; }
.ql-econ .qe-row.crowd input { accent-color: #22a06b; } .ql-econ .qe-row.inflation input { accent-color: #f05a3c; } .ql-econ .qe-row.interest input { accent-color: #2f7de1; } .ql-econ .qe-row.demand input { accent-color: #0f8f86; } .ql-econ .qe-row.energy input { accent-color: #e0a019; }
.ql-econ .btn, .ql-pane .btn { border-radius: 8px !important; background: #FF5A1F !important; border-color: #FF5A1F !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600; }
.ql-econ .explain { border: 0 !important; padding: 0 !important; font-size: 13px; color: #6b7684; }
/* tooltips (ⓘ en de economieën) */
.qtip { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: #e9edf2; color: #4a5562; font-size: 11px; font-style: normal; font-weight: 700; align-items: center; justify-content: center; cursor: help; position: relative; margin-left: 4px; }
[data-tip] { position: relative; } [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 270px; background: #14202e; color: #fff;
  font-size: 12.5px; line-height: 1.5; font-weight: 400; text-align: left; letter-spacing: 0; text-transform: none; padding: 10px 12px; border-radius: 8px; z-index: 60; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); white-space: normal; pointer-events: none; }
[data-tip]:hover::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #14202e; z-index: 61; }
/* panelen */
.ql-pane table th { border-bottom: 1px solid #e6e9ee !important; } .ql-pane .lbl { border: 0 !important; padding: 0 !important; color: #14202e !important; font-size: 13px !important; margin-top: 22px !important; }
/* rechterkolom */
.ql-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.ql-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: #FF5A1F; color: #fff; border: 0; border-radius: 10px; padding: 14px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ql-cta:hover { background: #e84c13; } .ql-card { padding: 16px 18px; } .ql-card h3 { font-size: 15px; margin: 0 0 10px; color: #14202e; }
.ql-qa { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-top: 8px; border: 1px solid #eef0f3; border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; color: #14202e; cursor: pointer; text-align: left; }
.ql-qa:hover { border-color: #d4dae1; background: #fafbfc; } .ql-qa span { flex: 1; }
.ql-dl { display: grid; grid-template-columns: 105px 1fr; gap: 8px 10px; font-size: 13px; margin: 0; } .ql-dl dt { color: #6b7684; } .ql-dl dd { margin: 0; color: #14202e; }
.ql-copy { border: 0; background: none; cursor: pointer; color: #6b7684; padding: 0 2px; vertical-align: -2px; } .ql-copy.ok { color: #22a06b; }
.ql-act { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13px; color: #14202e; border-bottom: 1px solid #f1f3f5; } .ql-act:last-child { border-bottom: 0; } .ql-act small { display: block; color: #8a94a0; font-size: 12px; }
.ql-ai { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; } .ql-ai.g { background: #e3f5ec; color: #1f7a4f; } .ql-ai.o { background: #fdeee4; color: #c4501e; } .ql-ai.r { background: #fdecea; color: #b3261e; }
@media (max-width: 1250px) { .ql-shell { grid-template-columns: 200px minmax(0, 1fr); } .ql-aside { grid-column: 2; position: static; } }
@media (max-width: 900px) { .ql-shell { grid-template-columns: 1fr; } .ql-side { display: none; } .ql-aside { grid-column: 1; } .ql-kpis, .ql-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ql-class { grid-template-columns: 1fr; } }
/* v693b: economie-tabs links uitgelijnd; schuiven als in het voorbeeld (gekleurd tot de waarde, lichtgrijs daarna) */
.ql-econ .qe-seg { justify-content: flex-start; padding: 0 6px; } .ql-econ .qe-seg button { flex: 0 0 auto !important; min-width: 0 !important; padding: 10px 12px 8px !important; }
.ql-econ .qe-row.crowd { --c: #22a06b; } .ql-econ .qe-row.inflation { --c: #f05a3c; } .ql-econ .qe-row.interest { --c: #2f7de1; } .ql-econ .qe-row.demand { --c: #0f8f86; } .ql-econ .qe-row.energy { --c: #e0a019; }
.ql-econ .qe-row input[type=range] { -webkit-appearance: none; appearance: none; height: 6px !important; border: 0 !important; border-radius: 99px; padding: 0 !important; margin: 0;
  background: linear-gradient(to right, var(--c) 0 var(--p, 50%), #e6e9ee var(--p, 50%) 100%) !important; cursor: pointer; }
.ql-econ .qe-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--c); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ql-econ .qe-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ql-econ .qe-row input[type=range]::-moz-range-track { background: transparent; }
.ql-econ .qe-row b { color: var(--c) !important; }
/* v693c: ranglijst ruim binnen het paneel */
.ql-pane #resbox { overflow-x: auto; } .ql-pane #resbox > table { min-width: 860px; } .ql-pane #resbox td, .ql-pane #resbox th { padding-right: 16px !important; white-space: nowrap; }
.ql-pane #resbox td.r, .ql-pane #resbox th.r { text-align: right; }

/* ===================== v698: strak tegen de rand, geen ronde hoeken, rustiger leesbaar ===================== */
main { max-width: none !important; padding: 0 !important; }
.ql-shell { grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 0; min-height: calc(100vh - 72px); }
.ql-shell, .ql-shell * { border-radius: 0 !important; }
.ql-shell .ql-dot, .ql-shell .ql-live::before, .ql-shell .qtip, .ql-shell .ql-ai, .ql-shell .ql-dot { border-radius: 50% !important; }
.ql-econ .qe-row input[type=range]::-webkit-slider-thumb { border-radius: 50% !important; } .ql-econ .qe-row input[type=range]::-moz-range-thumb { border-radius: 50% !important; }
.ql-card, .ql-hero, .ql-info, .ql-kpi, .ql-side, .ql-econ .qe-panel { box-shadow: none !important; }
.ql-side { position: sticky; top: 0; height: 100vh; min-height: 0; overflow-y: auto; border-right: 1px solid #e3e7ec; padding: 18px 12px; background: #fff; }
.ql-nav { padding: 11px 14px; } .ql-nav.on { background: #1f5f4a; }
.ql-main { padding: 26px 30px 60px; min-width: 0; }
.ql-aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #fff; border-left: 1px solid #e3e7ec; padding: 0; gap: 0; }
.ql-aside .ql-card { border: 0; border-bottom: 1px solid #eef0f3; padding: 20px 22px; background: #fff; }
.ql-cta { margin: 0; padding: 18px; font-size: 15px; letter-spacing: .02em; }
.ql-hero, .ql-info, .ql-kpi, .ql-tabcard, .ql-classes .section { border: 1px solid #e3e7ec; }
.ql-kpi:hover { transform: none; box-shadow: none !important; border-color: #c9d1da; background: #fbfcfd; }
.ql-ki { width: 48px; height: 48px; }
.ql-classes .tab { border-radius: 0 !important; } .ql-classes .section { background: #fff; padding: 20px 24px; margin-bottom: 16px; }
.ql-open, .ql-hb, .ql-qa, .ql-cta, .ql-econ .btn, .ql-pane .btn, .ql-cbody .simline button.lnk { border-radius: 0 !important; }
/* beheer van alle scholen: ingeklapt */
.ql-supd { background: #fff; border: 1px solid #e3e7ec; margin-bottom: 18px; } .ql-supd > summary { cursor: pointer; padding: 12px 16px; font-size: 14px; color: #14202e; display: flex; align-items: center; gap: 8px; list-style: none; }
.ql-supd > summary::-webkit-details-marker { display: none; } .ql-supd > summary span { margin-left: auto; font-size: 12px; color: #8a94a0; } .ql-supd > summary::after { content: '▾'; color: #8a94a0; }
.ql-supd[open] > summary { border-bottom: 1px solid #eef0f3; } .ql-supd .ql-sup { padding: 6px 16px 16px; margin: 0; }
/* lezen: rustiger koppen en ruimte */
.ql-tabs button { font-size: 15px; } .ql-pane { font-size: 15px; line-height: 1.6; } .ql-pane .lbl { font-size: 12px !important; letter-spacing: .08em !important; color: #6b7684 !important; text-transform: uppercase; }
.ql-how { margin-top: 6px; border-top: 1px solid #eef0f3; padding-top: 10px; } .ql-how > summary { cursor: pointer; font-size: 14px; color: #14202e; font-weight: 600; } .ql-how .explain { margin-top: 8px; }
/* economie in drie stappen, met afbeelding */
.qe-step { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; font-size: 14px; font-weight: 600; color: #14202e; }
.qe-step b { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; background: #14202e; color: #fff; font-size: 12px; } .qe-step span { font-weight: 400; font-size: 12.5px; color: #8a94a0; }
.qe-panel > .qe-step:first-of-type { margin-top: 4px; }
.qe-art { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; border: 1px solid #e3e7ec; border-left: 5px solid var(--sc); background: #fff; margin: 4px 0 6px; }
.qe-pic { background: #fafbfc; display: flex; align-items: center; } .qe-pic svg { display: block; }
.qe-txt { padding: 14px 18px; } .qe-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sc); font-weight: 700; } .qe-txt h3 { margin: 2px 0 6px; font-size: 20px; color: #14202e; }
.qe-txt p { margin: 0 0 8px; font-size: 14px; color: #3b4654; line-height: 1.55; } .qe-fx { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qe-fx span { font-size: 12.5px; padding: 4px 9px; background: #f4f6f8; color: #3b4654; } .qe-fx i { font-style: normal; margin-right: 5px; font-size: 10px; }
.qe-fx .up i { color: #c4501e; } .qe-fx .dn i { color: #2f7de1; } .qe-fx .eq i { color: #6b7684; } .qe-tipline { font-size: 13px !important; color: #14202e !important; border-top: 1px dashed #e3e7ec; padding-top: 8px; }
@media (max-width: 1250px) { .ql-shell { grid-template-columns: 220px minmax(0, 1fr); } .ql-aside { grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid #e3e7ec; } }
@media (max-width: 900px) { .ql-shell { grid-template-columns: 1fr; } .ql-aside { grid-column: 1; } .qe-art { grid-template-columns: 1fr; } }
.qe-pic { align-items: stretch; } .qe-pic svg { height: 100% !important; min-height: 150px; }

/* ===================== v700: losse pagina's per module, rustig, geen horizontaal scrollen ===================== */
html, body { overflow-x: hidden; } * { scroll-behavior: auto !important; }
.ql-views { grid-template-columns: 240px minmax(0, 1fr) !important; } .ql-views .ql-main { padding: 24px 32px 40px; max-width: 1280px; }
.ql-views .qv[hidden] { display: none !important; }
.qv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #e3e7ec; padding-bottom: 14px; margin-bottom: 20px; }
.qv-head h1 { font-size: 26px; margin: 0; color: #14202e; letter-spacing: -.01em; } .qv-head p { margin: 4px 0 0; color: #6b7684; font-size: 14px; } .qv-head p b { color: #14202e; font-weight: 600; }
.qv-cls .tabs { margin: 0 !important; border: 0 !important; gap: 6px !important; } .qv-cls .tab { background: #fff; border: 1px solid #e3e7ec !important; padding: 6px 12px !important; font-size: 13px !important; margin: 0 !important; }
.qv-cls .tab.on { background: #1f5f4a; color: #fff !important; border-color: #1f5f4a !important; }
/* het startscherm */
.qd-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding: 16px 22px; background-size: cover; background-position: center 70%; border: 1px solid #e3e7ec; position: relative; margin-bottom: 16px; }
.qd-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .1) 75%); } .qd-hero > * { position: relative; }
.qd-hero b { display: block; font-size: 22px; color: #14202e; }
.qd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qd-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; border: 1px solid #e3e7ec; padding: 16px 18px; font: inherit; color: #14202e; cursor: pointer; min-width: 0; }
.qd-tile:hover { border-color: #b9c3cd; } .qd-static { cursor: default; } .qd-static:hover { border-color: #e3e7ec; } .qd-wide { grid-column: span 2; }
.qd-h { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b7684; margin-bottom: 4px; }
.qd-big { font-size: 32px; font-weight: 600; line-height: 1.15; } .qd-sub { font-size: 13px; color: #6b7684; } .qd-link { margin-top: auto; padding-top: 10px; font-size: 13px; color: #c4501e; font-weight: 600; }
.qd-rk { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0 6px 10px; border-left: 4px solid #e3e7ec; margin: 3px 0; font-size: 14px; } .qd-rk b { width: 16px; } .qd-rk span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-rk small { color: #8a94a0; } .qd-rk em { font-style: normal; font-weight: 600; } .qd-rk.r1 { border-left-color: #EF9F27; } .qd-rk.r2 { border-left-color: #B4B2A9; } .qd-rk.r3 { border-left-color: #D85A30; }
#qtop { width: 100%; } #qwarn { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; } #qwarn li:empty { display: none; } #qwarn:not(:has(li:not(:empty)))::after { content: 'Alles loopt.'; color: #1f7a4f; margin-left: -18px; }
.qd-acts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; width: 100%; } .qd-acts small { color: #8a94a0; margin-right: 6px; }
/* pagina's */
.ql-views .ql-class { margin: 0 0 16px; } .ql-views .qk-new .section { background: #fff; border: 1px solid #e3e7ec; padding: 18px 22px; margin: 0 0 16px; }
.ql-views .qv[data-v=economie] .qe-panel { border: 1px solid #e3e7ec !important; background: #fff; padding: 18px 22px !important; margin: 0 0 12px !important; }
.ql-views .qv[data-v=studenten], .ql-views .qv[data-v=voortgang], .ql-views .qv[data-v=instellingen], .ql-views .qv[data-v=rapportages], .ql-views .qv[data-v=ondernemingen], .ql-views .qv[data-v=scholen] { background: #fff; border: 1px solid #e3e7ec; padding: 18px 22px; }
.ql-views .qv .lbl:first-child { margin-top: 0 !important; }
.ql-views table { width: 100%; table-layout: auto; } .ql-views td, .ql-views th { white-space: normal; word-break: break-word; }
.qt th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b7684; border-bottom: 1px solid #e3e7ec; padding: 8px 10px 8px 0; font-weight: 500; } .qt td { padding: 10px 10px 10px 0; border-bottom: 1px solid #f1f3f5; }
/* ranglijst: past altijd, minder kolommen op een smaller scherm (geen schuifbalk) */
.ql-views #resbox { overflow: visible !important; } .ql-views #resbox > table { min-width: 0 !important; } .ql-views #resbox td, .ql-views #resbox th { white-space: nowrap; padding-right: 12px !important; }
@media (max-width: 1350px) { .ql-views #resbox tr > :nth-child(5), .ql-views #resbox tr > :nth-child(7) { display: none; } }
@media (max-width: 1150px) { .ql-views #resbox tr > :nth-child(10) { display: none; } .ql-views #resbox .scb i { display: none; } }
@media (max-width: 1100px) { .qd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ql-views .ql-main { padding: 20px; } }
@media (max-width: 900px) { .ql-views { grid-template-columns: 1fr !important; } .qd-grid { grid-template-columns: 1fr; } .qd-wide { grid-column: auto; } }
.ql-views { min-height: calc(100vh - var(--hdr, 63px)); } .ql-views .ql-side { height: calc(100vh - var(--hdr, 63px)); top: 0; }

/* ===================== v701: opdrachten ===================== */
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; } .tk-grid h3 { margin: 0 0 8px; font-size: 16px; color: #14202e; }
.tk-card { border: 1px solid #e3e7ec; padding: 12px 14px; margin-bottom: 10px; background: #fff; } .tk-t { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; } .tk-t span { font-size: 12px; color: #6b7684; white-space: nowrap; }
.tk-card p { margin: 4px 0 6px; font-size: 13.5px; color: #3b4654; } .tk-card details summary { cursor: pointer; font-size: 13px; color: #14202e; } .tk-card details ol { margin: 6px 0 4px 18px; font-size: 13px; padding: 0; }
.tk-add { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .tk-add label { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; } .tk-add input { width: 70px; padding: 4px 6px; border: 1px solid #d4dae1; }
.tk-add .btn { padding: 7px 14px !important; font-size: 13px !important; background: #FF5A1F !important; border-color: #FF5A1F !important; text-transform: none !important; letter-spacing: 0 !important; }
.tk-on > td { background: #fdf6e9; } .tk-detail { background: #fafbfc; padding: 14px 16px !important; } .tk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.tk-ans { background: #fff; border: 1px solid #e3e7ec; padding: 10px 12px; font-size: 14px; line-height: 1.55; } .tk-ev { font-size: 13px; margin-bottom: 8px; } .tk-ev td, .tk-ev th { padding: 4px 8px 4px 0 !important; }
.tk-rub td { vertical-align: middle; } .tk-sc { width: 34px; height: 34px; margin-left: 4px; border: 1px solid #d4dae1; background: #fff; font: inherit; font-weight: 600; cursor: pointer; } .tk-sc:hover { border-color: #14202e; }
.tk-sc.on { background: #14202e; color: #fff; border-color: #14202e; }
.tk-detail textarea { border: 1px solid #d4dae1; padding: 8px; font: inherit; font-size: 14px; }
@media (max-width: 1150px) { .tk-grid, .tk-cols { grid-template-columns: 1fr; } }
.ql-views th { white-space: nowrap !important; word-break: normal !important; }

/* ===================== v704: "Aan de slag" en vrij verkennen ===================== */
.qs-start { background: #fff; border: 1px solid #e3e7ec; border-left: 5px solid #FF5A1F; padding: 14px 18px; margin-bottom: 14px; }
.qs-head { display: flex; align-items: baseline; gap: 12px; } .qs-head b { font-size: 16px; } .qs-head span { color: #6b7684; font-size: 13px; } .qs-head .lnk { margin-left: auto; font-size: 12px; }
.qs-bar { height: 6px; background: #eef1f4; margin: 10px 0 12px; } .qs-bar i { display: block; height: 6px; background: #FF5A1F; }
.qs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qs-step { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid #e3e7ec; background: #fff; color: #6b7684; cursor: pointer; }
.qs-step span { display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center; background: #eef1f4; color: #6b7684; font-size: 12px; font-weight: 700; }
.qs-step.done { color: #0F6E56; } .qs-step.done span { background: #E1F5EE; color: #0F6E56; }
.qs-step.next { color: #14202e; font-weight: 600; border-color: #FF5A1F; } .qs-step.next span { background: #FF5A1F; color: #fff; }
.qx-card { background: #fff; border: 1px solid #e3e7ec; border-left: 5px solid #1D9E75; padding: 14px 18px; margin-bottom: 16px; } .qx-card p { margin: 8px 0 0; font-size: 14px; color: #3b4654; }
.qx-sw { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; cursor: pointer; color: #14202e !important; font-size: 15px !important; } .qx-sw input { position: absolute; opacity: 0; width: 0; }
.qx-sw span { width: 42px; height: 24px; background: #cfd6de; position: relative; flex: none; } .qx-sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; }
.qx-sw input:checked + span { background: #1D9E75; } .qx-sw input:checked + span::after { left: 21px; } .qx-sw input:focus-visible + span { outline: 2px solid #14202e; outline-offset: 2px; }
@media (max-width: 1100px) { .qs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================== v706: het stappenplan van de docent, op elke pagina ===================== */
.qs-wrap { background: #fff; border: 1px solid #e3e7ec; border-left: 5px solid #FF5A1F; margin: -6px 0 18px; } .qs-wrap.all { border-left-color: #1D9E75; }
.qs-bar2 { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: none; font: inherit; font-size: 14px; color: #14202e; cursor: pointer; text-align: left; }
.qs-bar2 b { font-size: 15px; } .qs-n { color: #6b7684; white-space: nowrap; } .qs-blocks { display: flex; gap: 4px; flex: 1; min-width: 120px; } .qs-blocks i { flex: 1; height: 9px; background: #e3e7ec; }
.qs-blocks i.d { background: #1D9E75; } .qs-blocks i.n { background: #FF5A1F; } .qs-next { color: #c4501e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; } .qs-wrap.all .qs-next { color: #0F6E56; }
.qs-chev { color: #6b7684; font-size: 13px; white-space: nowrap; }
.qs-go { margin: -4px 16px 12px; font: inherit; font-size: 13px; padding: 7px 14px; background: #FF5A1F; color: #fff; border: 0; cursor: pointer; } .qs-go[hidden] { display: none; }
.qs-list { display: none; border-top: 1px solid #eef0f3; } .qs-wrap.open .qs-list { display: block; }
.qs-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 120px; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid #f1f3f5; } .qs-row:last-child { border-bottom: 0; }
.qs-num { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; background: #eef1f4; color: #6b7684; font-size: 12px; font-weight: 700; }
.qs-row.d .qs-num { background: #E1F5EE; color: #0F6E56; } .qs-row.n { background: #fdf3ec; } .qs-row.n .qs-num { background: #FF5A1F; color: #fff; }
.qs-lnk { font: inherit; font-size: 14px; text-align: left; background: none; border: 0; padding: 0; color: #14202e; cursor: pointer; } .qs-lnk small { color: #c4501e; font-size: 12.5px; } .qs-row.d .qs-lnk { color: #0F6E56; } .qs-row.d .qs-lnk small { color: #6b7684; }
.qs-row.n .qs-lnk { font-weight: 600; } .qs-lnk:hover { text-decoration: underline; } .qs-how { font-size: 12.5px; color: #8a94a0; }
.qs-sw { font-size: 13px !important; } .qs-sw span { width: 36px; height: 20px; } .qs-sw span::after { width: 14px; height: 14px; } .qs-sw input:checked + span::after { left: 19px; } .qs-sw em { font-style: normal; color: #6b7684; }
.qs-sw input:disabled + span { opacity: .55; cursor: default; }
@media (max-width: 1000px) { .qs-next { display: none; } .qs-row { grid-template-columns: 34px minmax(0, 1fr) 110px; } .qs-how { display: none; } }
.qs-next[data-go2] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .qs-next[data-go2]:hover { color: #9a3b12; }

/* ===================== v707: het stappenplan als compacte strook ===================== */
.qs-go { display: none !important; }
.qs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.qs-cell { position: relative; padding: 8px 12px 10px; border-right: 1px solid #eef0f3; border-top: 3px solid #e3e7ec; background: #fff; min-width: 0; }
.qs-cell:last-child { border-right: 0; } .qs-cell.d { border-top-color: #1D9E75; } .qs-cell.n { border-top-color: #FF5A1F; background: #fdf3ec; }
.qs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.qs-cell .qs-num { width: 22px; height: 22px; font-size: 11.5px; } .qs-cell.d .qs-num { background: #E1F5EE; color: #0F6E56; } .qs-cell.n .qs-num { background: #FF5A1F; color: #fff; }
.qs-cell .qs-lnk { display: block; width: 100%; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qs-cell.d .qs-lnk { color: #0F6E56; } .qs-cell.n .qs-lnk { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.qs-cell .qs-sw span { width: 28px; height: 16px; } .qs-cell .qs-sw span::after { width: 10px; height: 10px; } .qs-cell .qs-sw input:checked + span::after { left: 15px; }
.qs-cell[data-tip]:hover::after { bottom: auto; top: calc(100% + 10px); width: 260px; } .qs-cell[data-tip]:hover::before { bottom: auto; top: calc(100% - 2px); border-top-color: transparent; border-bottom-color: #14202e; }
.qs-cell:first-child[data-tip]:hover::after { left: 0; transform: none; } .qs-cell:last-child[data-tip]:hover::after { left: auto; right: 0; transform: none; }
@media (max-width: 1100px) { .qs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qs-cell:nth-child(3) { border-right: 0; } }
/* v708: geen banner meer; een vaste knop "Bezoek je klas in Qoinomics" naast de klaskeuze */
.qv-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.qv-visit { display: inline-flex; align-items: center; gap: 8px; background: #FF5A1F; color: #fff !important; text-decoration: none; padding: 9px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.qv-visit:hover { background: #e84c13; }

/* ===================== v709: oranje sectiekoppen met wit icoon, economie met iconen, minder tekst ===================== */
.qbar { display: flex !important; align-items: center; gap: 10px; background: #FF5A1F !important; color: #fff !important; border: 0 !important; padding: 9px 14px !important; margin: 0 0 14px !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase; min-height: 22px; }
.qbar * { color: #fff !important; } .qbar a, .qbar button { text-decoration-color: rgba(255, 255, 255, .7) !important; text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: auto; }
.qbar-ic { display: inline-flex; flex: none; } .qbar-i { margin-left: auto; width: 20px; height: 20px; border: 1.5px solid #fff; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-transform: none; cursor: help; flex: none; }
.qbar a ~ .qbar-i, .qbar button ~ .qbar-i { margin-left: 10px; } .qbar-i[data-tip]:hover::after { bottom: auto; top: calc(100% + 10px); left: auto; right: -8px; transform: none; width: 300px; font-weight: 400; letter-spacing: 0; }
.qbar-i[data-tip]:hover::before { bottom: auto; top: calc(100% - 2px); border-top-color: transparent; border-bottom-color: #14202e; }
.ql-views h3.qbar { font-size: 13px !important; } .qv .lbl.qbar:first-child, .qv h3.qbar:first-child { margin-top: 0 !important; } .ql-views .qv .lbl.qbar { margin-top: 18px !important; }
.qe-head.qbar b { color: #fff !important; font-size: 13px !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .qe-head.qbar span:not(.qbar-ic):not(.qbar-i) { margin-left: auto; background: rgba(255, 255, 255, .2) !important; border: 0 !important; color: #fff !important; padding: 3px 10px !important; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; }
.ql-views .qv[data-v=economie] .qe-panel { padding-top: 0 !important; } .ql-views .qv[data-v=economie] .qe-panel > .qe-head { margin: 0 -22px 14px !important; }
.ql-supd > summary.qbar { margin: 0 !important; list-style: none; } .ql-supd > summary.qbar::after { color: #fff; }
.qe-step span { display: none; }
.ql-econ .qe-seg { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; border: 0 !important; background: none !important; padding: 0 !important; }
.ql-econ .qe-seg button { display: flex !important; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #e3e7ec !important; background: #fff !important; padding: 10px 6px !important; font-size: 13px; color: #3b4654 !important; }
.ql-econ .qe-seg button .qe-ic { color: #6b7684; } .ql-econ .qe-seg button:hover { border-color: #b9c3cd !important; }
.ql-econ .qe-seg button.on { border: 2px solid #FF5A1F !important; background: #fdf3ec !important; color: #9a3b12 !important; font-weight: 600; } .ql-econ .qe-seg button.on .qe-ic { color: #FF5A1F; }
.qe-ic svg { display: block; }
@media (max-width: 1000px) { .ql-econ .qe-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qe-head.qbar { justify-content: flex-start !important; } .qe-head.qbar .qbar-ic { margin-left: 0 !important; border: 0 !important; padding: 0 !important; background: none !important; }
.ql-econ .qe-seg button.cur { border-color: #FF5A1F !important; position: relative; } .ql-econ .qe-seg button.cur::after { content: 'nu'; position: absolute; top: 4px; right: 6px; font-size: 10.5px; font-weight: 700; color: #FF5A1F; text-transform: uppercase; letter-spacing: .06em; }
.ql-econ .qe-seg button.cur .qe-ic { color: #FF5A1F; }

/* v738: het stappenplan als duidelijke volgorde (zes rondjes op een lijn, een vak met wat je nu doet) */
.qs-wrap.qs3 { border: 1px solid #e3e7ec !important; border-left: 1px solid #e3e7ec !important; background: #fff; margin: -6px 0 18px; }
.qs3 .qs-bar2 { padding: 14px 18px; gap: 12px; } .qs3 .qs-bar2 b { font-size: 16px; font-weight: 600; } .qs3 .qs-n { font-size: 13px; color: #6b7684; flex: 1; } .qs3 .qs-chev { font-size: 13px; color: #6b7684; }
.qs3 .qs-now3 { display: flex; align-items: center; gap: 10px; margin: -6px 18px 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #c4501e; cursor: pointer; }
.qs3 .qs-now3 span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #FF5A1F; color: #fff; font-size: 13px; }
.qs3 .qs-now3:hover { text-decoration: underline; } .qs3.open .qs-now3 { display: none; }
.qs3 .qs-list { border-top: 1px solid #eef0f3; }
.qs3 .qs-line { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 18px 16px 6px; }
.qs3 .qs-line::before { content: ''; position: absolute; left: calc(16px + (100% - 32px) / 12); right: calc(16px + (100% - 32px) / 12); top: 34px; height: 2px; background: #dfe3e8; }
.qs3 .qs-prog { position: absolute; left: calc(16px + (100% - 32px) / 12); top: 34px; height: 2px; background: #1D9E75; z-index: 0; }
.qs3 .qs-st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px 8px; border: 0; background: none; font: inherit; cursor: pointer; min-width: 0; }
.qs3 .qs-c { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #c9d0d8; background: #fff; color: #6b7684; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.qs3 .qs-st.d .qs-c { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.qs3 .qs-st.n .qs-c { width: 38px; height: 38px; margin-top: -3px; border: 2px solid #FF5A1F; background: #fdf0ea; color: #c4501e; font-size: 14px; }
.qs3 .qs-l { font-size: 13px; color: #6b7684; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qs3 .qs-st.d .qs-l, .qs3 .qs-st.n .qs-l { color: #14202e; } .qs3 .qs-st.n .qs-l { font-weight: 600; }
.qs3 .qs-t { font-size: 12px; color: #8a94a0; } .qs3 .qs-st.d .qs-t { color: #0F6E56; } .qs3 .qs-st.n .qs-t { color: #c4501e; font-weight: 600; }
.qs3 .qs-st.sel .qs-l { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.qs3 .qs-box { display: flex; align-items: center; gap: 16px; margin: 6px 16px 16px; padding: 14px 16px; background: #fdf0ea; }
.qs3 .qs-box[hidden] { display: none; } .qs3 .qs-box.d { background: #E1F5EE; }
.qs3 .qs-bn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FF5A1F; color: #fff; font-weight: 600; }
.qs3 .qs-box.d .qs-bn { background: #1D9E75; }
.qs3 .qs-bt { flex: 1; min-width: 0; } .qs3 .qs-bt small { font-size: 12px; color: #c4501e; letter-spacing: .04em; text-transform: uppercase; } .qs3 .qs-box.d .qs-bt small { color: #0F6E56; }
.qs3 .qs-bt h4 { margin: 2px 0; font-size: 16px; font-weight: 600; color: #14202e; } .qs3 .qs-bt p { margin: 0; font-size: 13px; color: #3b4654; }
.qs3 .qs-ba { display: flex; align-items: center; gap: 14px; flex: none; } .qs3 .qs-auto { font-style: normal; font-size: 12px; color: #6b7684; }
.qs3 .qs-do { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border: 0; background: #FF5A1F; color: #fff; cursor: pointer; white-space: nowrap; } .qs3 .qs-do:hover { background: #e84c13; }
.qs3 .qs-box.d .qs-do { background: #fff; color: #0F6E56; border: 1px solid #1D9E75; }
@media (max-width: 1000px) { .qs3 .qs-box { flex-wrap: wrap; } .qs3 .qs-l { font-size: 12px; } }

/* v740: ÉÉN STIJL voor het docentendashboard en het Business OS van de student (ui/schoolTown.js › qzCalmInit gebruikt dezelfde waarden).
   Strak: geen ronde vormen. Eén lettertype (DM Sans). Vaste maten: titel 24 · categorie 14 · onderdeel 13 · tekst 14 · labels 12 (hoofdletters) · kerncijfers 28.
   Kleuren: tekst #14202e · grijs #6b7684 · lijnen #e3e7ec · achtergrond #f4f6f8 · actief en knoppen #1f5f4a · nadruk #FF5A1F · koppelingen #c4501e · klaar #1D9E75. */
.ql-shell, .ql-shell * { font-family: 'DM Sans', Arial, sans-serif; }
.ql-shell *, .ql-shell *::before, .ql-shell *::after { border-radius: 0 !important; }
.ql-nav { font-size: 14px !important; } .ql-nav.on { background: #1f5f4a !important; color: #fff !important; }
.qv-head h1 { font-size: 24px !important; font-weight: 600 !important; } .qv-head p { font-size: 14px !important; }
.qd-h { font-size: 12px !important; } .qd-big { font-size: 28px !important; font-weight: 600 !important; } .qd-sub, .qd-link { font-size: 13px !important; }
.ql-tabs { display: inline-flex !important; gap: 0 !important; background: #e6e9ed; padding: 3px; border-bottom: 0 !important; margin: 0 0 16px !important; flex-wrap: wrap; }
.ql-tabs button { font-size: 13px !important; padding: 6px 14px !important; border-bottom: 0 !important; color: #6b7684 !important; font-weight: 400 !important; }
.ql-tabs button.on { background: #fff !important; color: #14202e !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(20, 32, 46, .12); }
.ql-tabs .ql-ext { margin-left: 12px; align-self: center; }
.ql-pane { font-size: 14px !important; }