/* ════════════════════════════════════════════════════════════════════════ * ForMath — Studenttool werkblad — stylesheet * ════════════════════════════════════════════════════════════════════════ * Tokens en look-and-feel overgenomen uit de authortool (app.css), zodat * beide tools identiek aanvoelen: lichte paper-UI, dunne --rule-lijnen, * mosterd-oker accent, Fraunces/IBM Plex Sans/JetBrains Mono. * Ondersteunt licht/donker via [data-theme] op . * ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Tokens (gelijk aan authortool) ──────────────────────────────────── */ :root { --bg: #f6f4ed; --bg-panel: #fbfaf5; --bg-sunken: #ede9dd; --ink: #1c1f26; --ink-soft: #4d5260; --ink-dim: #87889a; --rule: #dcd7c6; --rule-strong: #b8b09a; --accent: #ae7a15; --accent-ink: #6a4807; --accent-soft: #efe0b6; --ok: #2f6d3f; --ok-soft: #dcead0; --warn: #a25d09; --warn-soft: #f5e4c4; --err: #983018; --err-soft: #f4d6ce; --fout-pijl: #d9a520; /* driehoekje van de foutharmonica */ --blue: #1a6fc4; /* de opgave-expressie op het werkblad */ /* Het opgavenummer in een tegel is in het lichte thema blauw; in het donkere thema is het gewoon tekst en dus wit — daar zijn alleen de EXPRESSIES gekleurd (blauw = gegeven, groen = goedgekeurd, wit = waar je nu werkt). */ --opg-nummer: var(--blue); /* Een goedgekeurde regel op het werkblad. Was --margin-green, maar dat is ook de kopstreep en de rand van een gekozen tegel; die moesten niet mee oplichten. In het donkere thema haalde dat groen maar 3.57:1. */ --regel-goed: var(--margin-green); --margin-red: #c98a8a; /* rode kantlijn op het schrift */ --margin-green: #5f9c5f; /* groene kopstreep */ --rule-line: #cdd9e6; /* liniaallijnen (blauwig, schrift) */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace; --radius: 4px; --radius-lg: 8px; --line-h: 44px; --header-h: 58px; --bar-h: 46px; --side-w: clamp(280px, 22vw, 380px); --side-wide-w: clamp(170px, 12vw, 220px); --shadow: 0 6px 22px -10px rgba(40,36,28,0.30); } /* Donker thema. * * Gemeten, niet geschat: elk tekst/achtergrond-paar hieronder haalt ten minste * 4.5:1 (WCAG AA). Dat was niet zo. De statuskleuren (--ok/--warn/--err en hun * -soft varianten) werden hier helemaal niet overschreven: een gekozen opgave * bleef een lichtgroen vlak met bijna-witte tekst erop (1.03:1) en een * foutmelding stond donkerrood op donkerbruin (2.13:1). * * De -soft kleuren zijn hier donker getint in plaats van licht pastel: ze zijn * een vlak ONDER lichte tekst, niet een vlak met donkere tekst erop. */ [data-theme="dark"] { --bg: #191813; --bg-panel: #24221a; --bg-sunken: #100f0b; --ink: #f3efe3; --ink-soft: #cbc6b6; --ink-dim: #a19c8c; --rule: #403c31; --rule-strong: #625c4a; --accent: #e2c069; --accent-ink: #f2dca6; --accent-soft: #463b1f; --ok: #7cc48a; --ok-soft: #24361f; --warn: #e0a850; --warn-soft: #3d2f14; --err: #f08a6c; --err-soft: #3d1f16; --fout-pijl: #e2c069; --blue: #9fd0ff; /* Het woordmerk van Edu-Suite. Zijn eigen #3c4f76 haalt op dit papier 2.03:1; het symbool ernaast (blauw en groen) blijft wel zichzelf. */ --edusuite-ink: #a8bde0; --opg-nummer: var(--ink); --regel-goed: #9fe0a8; /* MathLive tekent twee vlakken in het invoerveld, en beide zijn van huis uit licht — gemaakt voor een wit papier. Op donker papier verdwenen de cijfers erin: het cursorvlak is rgb(237,242,247), bijna wit, met witte cijfers erop (1.03:1). --cursorveld het vlak onder de cursor. De cijfers blijven wit, dus dit grijs moet donker genoeg zijn om ze te dragen: 6.58:1, en het vlak tekent zich met 2.10:1 af tegen het papier. --selectie-* een echte selectie draait om: lichtgrijs vlak met donkere cijfers, 10.41:1. */ --cursorveld: #57544b; --selectie-vlak: #c9c6bd; --selectie-tekst: #191813; --margin-red: #9a5a5a; --margin-green: #5c8060; --rule-line: #33404e; --shadow: 0 6px 22px -10px rgba(0,0,0,0.65); /* Het −spoor van de abc-splitsing: was een licht pastelvlak, dat lichtte in het donkere thema op als een lamp tussen de rest. */ --spoor-min-ink: #9fd8b4; --spoor-min-bg: #1e3428; --spoor-min-rand: #4f8a6a; } /* ── Reset & basis ───────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html, body { height: 100%; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow: hidden; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; } button { font-family: inherit; cursor: pointer; color: inherit; } /* ── App-frame ───────────────────────────────────────────────────────── */ .app { display: flex; flex-direction: column; height: 100vh; } /* ── Header (licht, zoals authortool) ────────────────────────────────── */ .app-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: baseline; padding: 16px 28px 13px; border-bottom: 1px solid var(--rule); background: var(--bg); z-index: 50; } .brand { display: flex; align-items: baseline; gap: 9px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; color: var(--accent); transform: translateY(4px); flex-shrink: 0; } .brand-mark svg { width: 36px; height: 32px; display: block; } .brand h1 { font-family: var(--font-display); font-weight: 500; /* Even hoog als het woordmerk Edu-Suite ernaast: dat heeft een kaphoogte van 21.05 px (96.6 van de 183.6 viewBox-eenheden, bij een logo van 40 px). Fraunces-500 haalt 0.719 x de fontgrootte, dus 21.05 / 0.719 = 29. Was 22px. */ font-size: 29px; letter-spacing: -0.01em; color: var(--ink); } .brand-sub { font-family: var(--font-ui); font-weight: 400; /* Groeit mee met de naam: 14/22 van de h1, nu in em zodat die verhouding vastligt als de naam ooit weer verandert. */ font-size: 0.636em; color: var(--ink-dim); margin-left: 4px; letter-spacing: 0.02em; } /* Taalkiezer in de header (i18n) */ .lang-select { align-self: center; margin-left: auto; margin-right: 10px; font-family: var(--font-ui); font-size: 12px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-panel); color: var(--ink); cursor: pointer; } .lang-select:hover { border-color: var(--rule-strong); } /* Knop 'Portal' naast de taalkiezer: terug naar het keuzescherm van het portaal. Zelfde vorm als de taalkiezer, maar zonder de margin-left:auto - anders duwen ze allebei naar rechts en valt er een gat tussen. Verborgen tot het script in werkblad.html hem aanzet: lokaal is er geen portaal. */ .portal-knop { align-self: center; margin-right: 10px; padding: 4px 10px; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-panel); color: var(--ink); text-decoration: none; cursor: pointer; } .portal-knop:hover { border-color: var(--rule-strong); background: var(--bg-sunken); } .header-settings-btn { align-self: center; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-dim); transition: color .15s, border-color .15s, background .15s; } .header-settings-btn svg { width: 19px; height: 19px; } .header-settings-btn:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--bg-sunken); } /* ── App body ────────────────────────────────────────────────────────── */ .app-body { flex: 1; display: flex; min-height: 0; } /* ── Zijbalken ───────────────────────────────────────────────────────── */ .side { width: var(--side-w); flex-shrink: 0; background: var(--bg-panel); color: var(--ink); border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; } .side-wide { width: var(--side-wide-w); } .side-right { border-right: none; border-left: 1px solid var(--rule); } /* Resultaat even breed als Opgaven (overschrijft side-wide) */ .side-right.side-wide { width: var(--side-w); } /* Versleepbare kolomgrens tussen Opgaven|schrift en schrift|Resultaat. De Batches-kolom heeft GEEN resizer en blijft dus vast. Een geslepen breedte wordt als inline-width op de aside gezet (overschrijft var(--side-w)). */ .col-resizer { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: transparent; transition: background .12s; z-index: 5; } .col-resizer:hover, .col-resizer.dragging { background: var(--accent-soft); } .side-head { padding: 15px 16px 11px; border-bottom: 1px solid var(--rule); flex-shrink: 0; } .side-head h2 { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .side-head p { font-size: 12px; color: var(--ink-dim); margin-top: 2px; } .side-empty, .side-loading, .opg-loading { padding: 18px 16px; font-size: 13px; color: var(--ink-dim); font-style: italic; } .side-foot { padding: 8px 16px; font-size: 11.5px; color: var(--ink-dim); border-top: 1px solid var(--rule); text-align: center; flex-shrink: 0; } /* Opgavenlijst: boxes met dunne rand, vulkleur = schermkleur, gelijke breedte */ .opg-list { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; } .opg { position: relative; /* positioneringscontext voor het klik-laagje .opg-hit */ width: 100%; padding: 6px 12px; margin-bottom: 15px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background .12s, transform .06s; } /* Transparant klik-laagje dat de hele box afdekt (incl. het MathLive-veld), zodat een klik overal in de box de opgave selecteert. */ .opg-hit { position: absolute; inset: 0; z-index: 5; cursor: pointer; background: transparent; } .opg:last-child { margin-bottom: 4px; } .opg:hover { border-color: var(--rule-strong); } .opg:active { transform: translateY(1px); } /* Geselecteerde opgave: heel licht groen tot een andere box wordt aangeklikt. De JS zet hiervoor de klasse 'on' (zie selectOpgave in werkblad.js). */ .opg.on { background: var(--ok-soft); border-color: var(--margin-green); box-shadow: inset 0 0 0 1px var(--margin-green); } .opg-head { margin-bottom: 8px; } /* Batch-rechthoeken in de linker kolom — zelfde stijl als opgave-boxes */ .batch-list { padding: 12px; } .batch-item { width: 100%; padding: 12px 12px; margin-bottom: 15px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--ink); transition: border-color .12s, background .12s, transform .06s; } .batch-item:hover { border-color: var(--rule-strong); } .batch-item:active { transform: translateY(1px); } .batch-item.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* nummer: klassiek (Fraunces), klein; blauw in het lichte thema, wit in het donkere — zie --opg-nummer */ .opg-id { font-family: var(--font-display); font-weight: 500; font-size: 12.5px; color: var(--opg-nummer); letter-spacing: 0.01em; } /* preview: links uitgelijnd, vaste breedte, schermkleur-achtergrond, afgekapt als de opgave breder is dan de box */ .opg-preview { display: block; width: 100%; overflow: hidden; background: var(--bg); padding: 4px 0; min-height: 40px; } .opg-preview math-field { display: block; background: transparent; border: none; max-width: 100%; font-size: 16px; /* Expliciet, niet alleen geërfd van de math-field-regel verderop: de som in een tegel is het enige wat de opgave laat zien, die mag niet wegvallen. */ color: var(--ink); --mf-color: var(--ink); --smart-fence-color: var(--ink); } .opg-preview svg, .opg-preview img { max-width: 100%; height: auto; display: block; } /* Op de GEKOZEN tegel is de tegel groen en de preview-strook --bg; in het donkere thema levert dat een zwarte balk midden in een groen vlak op, die eruitziet als een leeg vak. Laat de strook daar de tegelkleur aannemen. */ [data-theme="dark"] .opg.on .opg-preview { background: transparent; } .opg-preview-fallback { color: var(--ink-dim); font-size: 14px; } .refresh-btn { transition: background .12s, border-color .12s; } .refresh-btn:hover { background: var(--bg-sunken) !important; border-color: var(--rule-strong) !important; } /* ── Midden: scroll + paneel + balk ──────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-sunken); } .scroll { flex: 1; overflow-y: auto; padding: 24px; min-height: 0; } /* ── De "pagina" (schrift) — lijnen altijd zichtbaar via achtergrond ──── */ .page { position: relative; max-width: 1100px; margin: 0 auto; min-height: 100%; background-color: var(--bg-panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 40px 60px; overflow: hidden; } /* Liniaallijnen: liggen op een aparte laag binnen de page, beginnen 20px van de linkerrand, lopen tot de rechterrand, en starten verticaal pas op de eerste schrijfregel (--page-lines-top) zodat er GEEN lijnen boven de knoppenbalk verschijnen. */ .page::after { content: ""; position: absolute; left: 20px; right: 40px; top: var(--page-lines-top, 130px); bottom: 0; pointer-events: none; z-index: 1; /* Laag 1 (bovenop): de EERSTE lijn groen — een enkele 2px groene lijn op de onderrand van de eerste regel (knoppenbalk-regel), niet herhalend. Laag 2: de gewone grijze liniaallijnen, herhalend. */ background-image: linear-gradient(var(--margin-green), var(--margin-green)), repeating-linear-gradient( to bottom, transparent, transparent calc(var(--line-h) - 1px), var(--rule-line) calc(var(--line-h) - 1px), var(--rule-line) var(--line-h) ); background-position: 0 calc(var(--line-h) - 2px), 0 0; background-size: 100% 2px, 100% 100%; background-repeat: no-repeat, repeat-y; } /* ── PROBEERSEL: liniaallijnen laten MEEGROEIEN met de rijhoogte ────────── Terug te draaien in één stap: verwijder de class "lines-per-row" op
in werkblad.html (dan vallen de regels hieronder weg en keert de vaste-periode liniatuur terug). Probleem: de repeating-gradient hierboven heeft een VASTE periode (--line-h), maar de .rl-rijen groeien mee met hoge expressies → cumulatieve drift t.o.v. de lijnen. Oplossing: teken de grijze liniaallijn als onderrand PER .rl-rij (groeit mee), en laat .page::after alleen nog de groene kopstreep tekenen. De rode kantlijn (.page::before), de gaatjes (.holes) en de actieve-regel-highlight (.rl.active, mustard gradient) blijven ongemoeid. */ .page.lines-per-row::after { background-image: linear-gradient(var(--margin-green), var(--margin-green)); background-position: 0 calc(var(--line-h) - 2px); background-size: 100% 2px; background-repeat: no-repeat; } .page.lines-per-row .rl { border-bottom: 1px solid var(--rule-line); } /* Eerste regel (knoppenbalk): geen grijze onderrand — daar ligt de groene kopstreep van ::after al. */ .page.lines-per-row .rl:first-child { border-bottom: none; } /* Rode kantlijn: 2px vóór de linkerkant van de knoppenbalk (die op 92px t.o.v. de pagerand staat) → op 90px. Loopt mee vanaf de eerste regel. */ .page::before { content: ""; position: absolute; left: 90px; top: 50px; /* begin 50px vanaf de bovenkant van het werkblad */ bottom: 0; width: 0; border-left: 2px solid var(--margin-red); pointer-events: none; z-index: 2; } /* Perforatiegaatjes — gelijkmatig verdeeld: midden + symmetrisch boven/onder */ .holes { position: absolute; top: 12%; bottom: 12%; left: 24px; display: flex; flex-direction: column; justify-content: space-between; /* drie gaten: boven, midden, onder gelijk verdeeld */ pointer-events: none; z-index: 2; } .holes span { width: 13px; height: 13px; border-radius: 50%; background: var(--bg-sunken); box-shadow: inset 0 1px 2px rgba(0,0,0,0.20); } [data-theme="dark"] .holes span { background: #0e0d09; } /* Naam-veld — net boven de eerste schrijfregel, rechts uitgelijnd */ .naam-bar { position: absolute; z-index: 4; top: calc(var(--page-lines-top, 130px) - 34px); right: 40px; font-family: var(--font-display); font-size: 15px; color: var(--ink-soft); text-align: right; } /* Opgavenummer — op DEZELFDE regel als 'Naam:' (zelfde top), links uitgelijnd met de expressie-inhoud van de regels eronder. Absolute posities meten vanaf de padding-box van .page (padding-left 40px), maar de regel-inhoud (normale flow) begint ná die padding: 40 (.page) + 56 (.rules margin) + 6 (.rl padding) = 102px — dus 12px rechts van de rode kantlijn (op 90px), net als de expressies. */ .opgave-nr { position: absolute; z-index: 4; top: calc(var(--page-lines-top, 130px) - 34px); left: 102px; font-family: var(--font-display); font-size: 15px; color: var(--ink-soft); } /* Knoppenbalk — op de eerste schrijfregel, 3px ruimte boven en onder. De regelhoogte is --line-h (38px); de balk wordt 38 - 6 = 32px hoog. */ .quick-buttons { position: absolute; z-index: 4; top: calc(var(--page-lines-top, 130px) + 1px); left: 92px; right: 40px; height: calc(var(--line-h) - 6px); display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 0 6px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } /* Groene kop-streep — ligt mee als gewone scheidslijn (niet meer nodig als losse balk, maar we houden het element verborgen zodat de HTML klopt) */ .green-bar { display: none; } .qb { min-width: 28px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--bg-panel); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-display); font-size: 13px; color: var(--ink); flex-shrink: 0; transition: background .12s, border-color .12s, transform .06s; } .qb:hover { background: var(--accent-soft); border-color: var(--accent); } .qb:active { transform: translateY(1px); } .qb-icon { font-size: 14px; } .qb-sub { font-size: 9px; align-self: flex-end; color: var(--ink-soft); } .qb-base { font-size: 12px; } .qb-sup { font-size: 9px; align-self: flex-start; } .qb-pi { font-size: 14px; } .qb-pm { font-size: 17px; font-weight: 600; } .qb-op { font-size: 17px; font-weight: 600; } /* maaltekens · en × */ .qb-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: 9px; } .qb-frac-top { border-bottom: 1.5px solid currentColor; padding: 0 3px 1px; } .qb-frac-bot { padding: 1px 3px 0; } .qb-sep { width: 1px; height: 16px; background: var(--rule); margin: 0 3px; flex-shrink: 0; } /* ── Regels (notebook lines) ─────────────────────────────────────────── */ .rules { position: relative; z-index: 3; margin-left: 56px; padding-top: var(--page-lines-top, 130px); } .rl { position: relative; display: flex; align-items: center; min-height: var(--line-h); padding: 2px 0 2px 6px; box-sizing: border-box; } .rl.active { background: linear-gradient(90deg, rgba(174,122,21,0.07), transparent 60%); } /* Goedgekeurde (bevroren) regel: de EXPRESSIE zelf wordt groen (geen groene rij-achtergrond). Geldt voor het read-only MathLive-label én de fallback-span. */ .rl.regel-goed .label-mf { color: var(--regel-goed); --mf-color: var(--regel-goed); } .rl.regel-goed .label { color: var(--regel-goed); } /* De regel waar de student nu werkt: wit (in het donkere thema), zodat de drie toestanden op het werkblad uit elkaar te houden zijn — blauw is gegeven, groen is goedgekeurd, wit is waar je bent. */ .rl .editor { flex: 1; min-height: calc(var(--line-h) - 4px); font-size: 17px; border: none; background: transparent; outline: none; color: var(--ink); --mf-color: var(--ink); --mathfield-caret-color: var(--accent); } math-field, .editor { font-size: 17px; } /* De twee vlakken die MathLive in een invoerveld tekent. Alleen in het donkere thema: op wit papier voldoen zijn eigen kleuren. */ [data-theme="dark"] math-field { --contains-highlight-background-color: var(--cursorveld); --selection-background-color: var(--selectie-vlak); --selection-color: var(--selectie-tekst); } /* MathLive rendert in zijn shadow-root, maar erft de kleur van het -element zelf. Zonder deze regel valt het terug op zwart: in het donkere thema stond alle wiskunde daarmee op 1.22:1 — zwart op donkerbruin, praktisch onzichtbaar. Regels met een eigen kleur (.opgave-mf) winnen hiervan op specificiteit. */ math-field { color: var(--ink); } /* Regel 1 van de opgave: de begin-expressie gerenderd in blauw, READ-ONLY (alleen ter info; de student werkt op de kopie eronder). */ .opgave-mf { flex: 1; font-size: 17px; color: var(--blue); pointer-events: none; --mf-color: var(--blue); background: transparent; border: none; } .opgave-label { color: var(--blue); font-size: 17px; } /* Regel 5: opgavenummer (blauw) + opdracht + expressie, netjes op één regel */ .rl-title { font-family: var(--font-display); font-weight: 500; font-size: 12.5px; color: var(--blue); letter-spacing: 0.01em; margin-left: 4px; } .rl-opgave { font-family: var(--font-display); font-size: 12.5px; color: var(--accent-ink); margin-right: 4px; } .expr-mf { display: inline-block; background: transparent; border: none; font-size: 17px; vertical-align: middle; --smart-fence-color: var(--ink); } .lf-btn { flex-shrink: 0; margin-left: 8px; padding: 4px 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--bg); background: var(--ok); border: none; border-radius: var(--radius); transition: filter .12s, transform .06s; } .lf-btn:hover { filter: brightness(1.08); } .lf-btn:active { transform: translateY(1px); } /* Vast, onwijzigbaar '='-teken achter elke werk-regel (reken-opgaven, niet fork). Los element náást het bewerkbare veld → per definitie niet te selecteren of te wissen. Op bevroren regels zit het '=' in de LaTeX van het read-only label. */ .lock-eq { flex: 0 0 auto; width: max-content; min-width: 0; margin: 0; padding: 0; font-size: 17px; line-height: 1; color: var(--ink); --mf-color: var(--ink); background: transparent; border: none; user-select: none; pointer-events: none; } /* In lock-eq-modus groeit de actieve editor mee met zijn inhoud (width:max-content), zodat het '=' strak achter de formule blijft staan terwijl de student typt; de LF-knop schuift naar rechts. */ .lock-eq-modus .rl .editor { flex: 0 0 auto; width: max-content; max-width: calc(100% - 130px); min-width: 2ch; } .lock-eq-modus .rl.active .lf-btn { margin-left: auto; } /* Klaar-boodschap achter de uitkomst zodra de opgave voltooid is (geen LF meer). */ .klaar-badge { flex-shrink: 0; margin-left: 16px; padding: 4px 12px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: #f2d94e; /* gele letters */ background: #579a6b; /* lichter groen dan --ok (#2f6d3f) */ border-radius: var(--radius); white-space: nowrap; } /* abc-fork: badge op ELKE spoor-regel ("uitrekenen spoor +/−"). Absoluut gepositioneerd links-van-midden zodat hij op elke regel op dezelfde plek staat en zich per spoor herhaalt. +spoor goud, −spoor groen. */ .spoor-badge { position: absolute; left: 280px; top: 50%; transform: translateY(-50%); padding: 2px 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); white-space: nowrap; pointer-events: none; } .spoor-plus { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); } .spoor-min { color: var(--spoor-min-ink, #2f5d4a); background: var(--spoor-min-bg, #dcebe2); border-color: var(--spoor-min-rand, #4f8a6a); } /* abc-fork: hint-markering over het ±-teken bij de splitsing in twee sporen */ .split-hint-box { border: 2px solid var(--accent); background: rgba(174, 122, 21, 0.15); border-radius: 4px; } /* ── abc-fork: verticale split — twee kolommen naast elkaar (+ links, − rechts) ── */ .split-container { display: flex; align-items: flex-start; margin: 2px 0; position: relative; } .split-col { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 14px; } .split-col-head { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 2px 0 4px; } .split-plus .split-col-head { color: var(--accent-ink); } .split-min .split-col-head { color: var(--spoor-min-ink, #2f5d4a); } .split-divider { flex: 0 0 2px; align-self: stretch; background: var(--rule-strong); margin: 0 6px; } .split-row { display: flex; align-items: center; min-height: var(--line-h); padding: 2px 0 2px 22px; border-bottom: 1px solid var(--rule-line); position: relative; } /* Vinkje/kruisje links in de kolom-regel */ .split-check { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; } .split-check.goed { color: var(--ok); } .split-check.fout { color: var(--err); } .split-row.active { background: linear-gradient(90deg, rgba(174, 122, 21, 0.07), transparent 60%); } .split-min .split-row.active { background: linear-gradient(90deg, rgba(79, 138, 106, 0.10), transparent 60%); } .split-editor { flex: 1; min-height: calc(var(--line-h) - 4px); font-size: 17px; } /* knoppenbalk: "splits ±" (actie) en "S = { }" (insert) */ .qb-splits-label, .qb-set { font-family: var(--font-ui); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 0 4px; } .qb-splits { color: var(--accent-ink); } .margin-mark { position: absolute; left: -76px; /* gecentreerd in de kolom tussen lijnen-start en kantlijn */ top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; width: 70px; text-align: center; } .margin-mark.fout { color: var(--err); } .margin-mark.goed { color: var(--ok); } .empty-state { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 70px 20px; color: var(--ink-dim); font-size: 15px; font-style: italic; } .empty-state .icon { font-size: 32px; font-style: normal; } /* ── Toetsenbord-paneel ──────────────────────────────────────────────── */ .kb-panel { flex-shrink: 0; background: var(--bg-panel); border-top: 1px solid var(--rule); padding: 8px 12px; display: none; } .kb-panel.open { display: block; } .kb-grid { display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; margin: 0 auto; } .kb-key { min-width: 40px; height: 38px; padding: 0 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-display); font-size: 17px; user-select: none; transition: background .12s, transform .06s; } .kb-key:hover { background: var(--accent-soft); } .kb-key:active { transform: translateY(1px); } /* ── Statusbalk (licht) ──────────────────────────────────────────────── */ .bar { flex-shrink: 0; height: var(--bar-h); background: var(--bg-panel); color: var(--ink-soft); border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; gap: 12px; } .bar-l { display: flex; align-items: center; gap: 16px; font-size: 12.5px; } .bar-r { display: flex; align-items: center; gap: 8px; } .bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-dim); margin-right: 7px; flex-shrink: 0; } .bar .dot.ok { background: var(--ok); } .bar .dot.er { background: var(--err); } .bar .dot.warn { background: var(--warn); } #line-info, #block-info { font-family: var(--font-mono); font-size: 12px; } #block-info { color: var(--accent-ink); font-weight: 600; } .bar-btn { padding: 6px 12px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .bar-btn:hover { background: var(--bg-sunken); border-color: var(--rule-strong); color: var(--ink); } /* Niet #fff: in het donkere thema is --accent een lichte goudtint, en dan staat wit op wit. --bg draait mee met het thema en is altijd het contrast. */ .bar-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* Drie gekleurde hint-knoppen: kleuren gelijk aan de kaders (groen = nu belangrijk, grijs = nu/later, blauw = optionele vereenvoudiging). ● = kleurstip vóór het label. */ .bar-btn.hint-groen::before, .bar-btn.hint-grijs::before, .bar-btn.hint-blauw::before { content: '\25CF'; margin-right: 6px; font-size: 10px; } .bar-btn.hint-groen::before { color: rgb(70,150,90); } .bar-btn.hint-grijs::before { color: rgb(120,120,120); } .bar-btn.hint-blauw::before { color: rgb(45,110,205); } .bar-btn.hint-groen.active { background: rgba(120,190,130,0.30); border-color: rgb(70,150,90); color: var(--ink); } .bar-btn.hint-grijs.active { background: rgba(150,150,150,0.28); border-color: rgb(120,120,120); color: var(--ink); } .bar-btn.hint-blauw.active { background: rgba(70,140,220,0.26); border-color: rgb(45,110,205); color: var(--ink); } #hint-desc { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); font-style: italic; } /* Aantal hints achter de knop-naam. Bij 0 hints: naam lichtgrijs (leesbaar) en de kleurstip gedempt — de knop blijft zichtbaar maar duidelijk 'leeg'. */ .hint-count { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: 0.85; } .bar-btn.leeg .hint-naam { color: var(--ink-dim); } .bar-btn.leeg::before { opacity: 0.35; } .bar-btn.leeg { cursor: default; } /* Hint-omschrijving op de volgende werkblad-regel (i.p.v. in de statusbalk). */ .hint-regel-tekst { font-family: var(--font-ui); font-size: 13px; font-style: italic; color: var(--ink-soft); margin-left: 6px; } /* Foutboodschap: elke trede op een EIGEN werkbladregel onder de foute regel, rechts uitgelijnd en iets groter dan de UI-tekst eromheen. Trede 1 (de kop) is altijd zichtbaar; het gele driehoekje achter de laatste zichtbare regel klapt de volgende uit. Er is geen knop meer, en geen inklappen: de ladder verdwijnt vanzelf zodra de student de regel bewerkt. */ .rl.fout-rl { justify-content: flex-end; gap: 8px; padding: 0 10px 0 6px; } .fout-item { font-family: var(--font-ui); font-size: 15px; /* Precies een halve liniaalregel (min de 1px liniaallijn die .rl in de lines-per-row-modus zelf tekent). Een trede die op één regel past vult met min-height de hele band; een trede die naar twee regels omslaat vult hem óók exact — zo blijft de foutboodschap op de liniatuur staan. */ line-height: calc((var(--line-h) - 1px) / 2); text-align: right; color: var(--ink-soft); } /* De kop draagt de foutkleur; de treden eronder blijven rustig, zodat het uitklappen leest als toelichting en niet als een reeks nieuwe fouten. */ .fout-item.fout-titel { color: var(--err, #983018); font-weight: 600; } /* Het driehoekje is de enige bediening: het zegt "hier staat nog een regel onder" én klapt die uit. */ .fout-pijl { flex-shrink: 0; font-size: 12px; line-height: 1; color: var(--fout-pijl); cursor: pointer; user-select: none; } .fout-pijl:hover { color: var(--accent-ink); } /* Knop op de laatste regel van een foutboodschap (nu: 'Back to previous line' bij een niet-herleidbare fout). Blijft binnen de liniaalband — vandaar de lage hoogte; hij staat achter de tekst, dus aan de rechterkant van de regel. */ .fout-knop { flex-shrink: 0; padding: 3px 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--bg-panel); background: var(--err, #983018); border: none; border-radius: var(--radius); cursor: pointer; } .fout-knop:hover { background: var(--accent-ink); } .fout-code { display: inline-block; margin-right: 6px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--ink-dim); background: var(--bg-sunken); border: 1px solid var(--rule); border-radius: 3px; vertical-align: 1px; } /* ── Overlays (hints, schema) ──────────────────────────────── */ .hints-overlay, .svg-overlay { position: fixed; inset: 0; background: rgba(28,31,38,0.40); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; } .hints-overlay.open, .svg-overlay.open { display: flex; } .hints-popup, .svg-popup { background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 460px; width: 100%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; animation: pop-in .16s ease-out; } .svg-popup { max-width: 760px; } @keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .hints-header, .svg-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--bg-panel); } .hints-header h3, .svg-header h3 { font-size: 15px; flex: 1; color: var(--ink); } .step-badge, .hints-step-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 3px 9px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; } .hints-close, .svg-close, .dialog-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius); font-size: 18px; color: var(--ink-dim); transition: background .12s, color .12s; } .hints-close:hover, .svg-close:hover, .dialog-close:hover { background: var(--bg-sunken); color: var(--ink); } .hints-body, .svg-body { padding: 16px; overflow-y: auto; } .hint-sectie-titel { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 8px; } .hint-sectie-titel.hoog { color: var(--err); } .hint-sectie-titel.laag { color: var(--accent-ink); } .hint-item { padding: 10px 12px; margin-bottom: 8px; background: var(--bg-panel); border-left: 3px solid var(--ink-dim); border-radius: var(--radius); font-size: 13.5px; line-height: 1.4; } .hint-item.hoog { border-left-color: var(--err); background: var(--err-soft); } .hint-item.laag { border-left-color: var(--accent); background: var(--accent-soft); } .hint-leeg { color: var(--ink-dim); font-style: italic; font-size: 13px; } /* ── Settings-dialog ─────────────────────────────────────────────────── */ .dialog-overlay { position: fixed; inset: 0; background: rgba(28,31,38,0.40); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 24px; } .dialog { background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 440px; width: 100%; overflow: hidden; animation: pop-in .16s ease-out; } .dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--bg-panel); } .dialog-head h2 { font-size: 16px; color: var(--ink); } .dialog-body { padding: 18px; } .dialog-foot { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; background: var(--bg-panel); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .setting-label { font-size: 14px; font-weight: 500; } .setting-help { font-size: 12px; color: var(--ink-dim); margin-top: 2px; } .theme-toggle { display: flex; gap: 6px; } .theme-toggle button { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; background: var(--bg-panel); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-soft); transition: background .12s, border-color .12s, color .12s; } .theme-toggle button svg { width: 15px; height: 15px; } .theme-toggle button:hover { background: var(--bg-sunken); } .theme-toggle button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .btn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 8px 18px; border: 1px solid transparent; border-radius: var(--radius); background: var(--bg-panel); color: var(--ink); transition: background .15s, border-color .15s, transform .1s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } /* ── Scrollbars ──────────────────────────────────────────────────────── */ .opg-list::-webkit-scrollbar, .scroll::-webkit-scrollbar, .hints-body::-webkit-scrollbar { width: 9px; } .opg-list::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb, .hints-body::-webkit-scrollbar-thumb { background: rgba(140,135,120,0.4); border-radius: 6px; } .opg-list::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover { background: rgba(140,135,120,0.6); } /* ── Toegankelijkheid ────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ── Responsief ──────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .side-wide { display: none; } } @media (max-width: 820px) { .side { width: 200px; } .bar-btn { padding: 6px 9px; font-size: 11.5px; } } /* ══════════════════════════════════════════════════════════════════════════ SESSIE-OVERZICHT — de rechterkolom (#resultaat-side) ══════════════════════════════════════════════════════════════════════════ Toont van de lopende sessie: begintijd, duur, en per stap de opgevraagde hints (I/II/III) en gemaakte fouten, met een totaalregel. De uitlijning komt van drie dingen samen, niet van vaste breedtes: table-layout:fixed → de kolommen blijven staan waar ze staan, ook als er een getal bij komt; tabular-nums → elk cijfer even breed, dus 1 en 8 schuiven niet; text-align:right → getallen lijnen op hun laatste cijfer uit. Daardoor blijft de tabel rustig terwijl de tellers oplopen. */ .res-body { padding: 14px 16px 18px; } .res-kop { margin-bottom: 12px; } .res-opgave { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 13px; color: var(--ink); letter-spacing: .01em; } .res-tijd { font-size: 12px; color: var(--ink-dim); margin-top: 2px; } .res-tijd #res-duur { font-variant-numeric: tabular-nums; } .res-tabel { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12.5px; font-variant-numeric: tabular-nums; } .res-tabel th, .res-tabel td { padding: 4px 2px; text-align: right; color: var(--ink); } /* De stap-kolom draagt tekst ('Stap', 'Totaal'), de rest getallen. */ .res-tabel th.lbl, .res-tabel td.lbl { text-align: left; width: 34%; } .res-tabel thead th { font-size: 11px; font-weight: 500; color: var(--ink-dim); border-bottom: 1px solid var(--rule); padding-bottom: 5px; } .res-tabel tbody td { border-bottom: 1px solid var(--bg-sunken); } .res-tabel tbody tr:last-child td { border-bottom: none; } /* De stap waar de leerling nú aan werkt. */ .res-tabel tbody tr.nu td { background: var(--accent-soft); color: var(--accent-ink); } .res-tabel tbody tr.nu td:first-child { border-radius: 3px 0 0 3px; } .res-tabel tbody tr.nu td:last-child { border-radius: 0 3px 3px 0; } /* Een fout blijft in de foutkleur, ook op 0 — dan gedempt, zodat de kolom herkenbaar is zonder de aandacht te trekken als er niets mis is. */ .res-tabel td.fout { color: var(--err); } .res-tabel td.fout:not(.lbl) { font-weight: 500; } .res-tabel tfoot td { border-top: 1px solid var(--rule-strong); padding-top: 6px; font-weight: 600; } .res-legenda { margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--ink-dim); } .res-eind { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-soft); } .res-eind strong { color: var(--ink); font-weight: 600; } .res-eind.af strong { color: var(--ok); } /* Onderregel in een batch-item: de bron-expressie en het aantal opgaven. */ .batch-sub { margin-top: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-dim); } .batch-item.active .batch-sub { color: var(--accent-ink); } .batch-leeg { padding: 4px 2px; font-size: 12px; font-style: italic; color: var(--ink-dim); } /* ══════════════════════════════════════════════════════════════════════════ REKENMACHINE — onderaan de rechterkolom ══════════════════════════════════════════════════════════════════════════ Puur rekenkundig: twee getallen per bewerking, exacte breuken, geen expressieregel. `margin-top:auto` duwt hem naar de onderkant van de kolom (.side is al een flex-kolom), zodat het sessie-overzicht erboven de ruimte krijgt die het nodig heeft. */ .rekenmachine { margin-top: auto; flex-shrink: 0; border-top: 1px solid var(--rule); background: var(--bg-panel); padding: 10px 12px 12px; } .rm-kop { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } /* Het scherm groeit niet mee met de inhoud: een vaste hoogte houdt de toetsen op hun plek, ook als er een gestapelde breuk in staat. */ .rm-scherm { height: 52px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 10px; background: var(--bg-sunken); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink); overflow: hidden; } .rm-scherm .rm-melding { font-family: var(--font-ui); font-size: 11.5px; font-style: italic; color: var(--err); } /* De wachtende bewerking, links van het getal — zo zie je waar je in zit. */ .rm-scherm .rm-wacht { color: var(--accent-ink); font-size: 15px; } /* Gestapelde breuk in het scherm; dezelfde opbouw als op het werkblad, zodat 3/8 er hier hetzelfde uitziet als in de opgave. */ .rm-breuk { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 14px; } .rm-breuk .rm-n { border-bottom: 1.5px solid currentColor; padding: 0 3px; } .rm-breuk .rm-d { padding: 0 3px; } /* Halfvoltooide breuk: teller ingetikt, noemer nog leeg. */ .rm-breuk.rm-open .rm-d::after { content: '_'; opacity: .5; } .rm-toetsen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; } .rm-t { padding: 9px 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: 14px; cursor: pointer; transition: border-color .12s, background .12s, transform .06s; } .rm-t:hover { border-color: var(--rule-strong); } .rm-t:active { transform: translateY(1px); background: var(--bg-sunken); } .rm-t.rm-op { color: var(--accent-ink); font-weight: 600; } .rm-t.rm-fn { color: var(--ink-soft); font-size: 13px; } /* De actieve, wachtende bewerking blijft oplichten tot het tweede getal er is. */ .rm-t.rm-op.aan { background: var(--accent-soft); border-color: var(--accent); } .rm-t.rm-is { grid-column: 1 / -1; background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } /* Het a/b-teken op de toets: een minibreukje in plaats van een schuine streep, want die betekent in dit project iets anders dan een deling. */ .rm-ab { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: 10px; } .rm-ab i { width: 11px; height: 1.5px; background: currentColor; margin: 1.5px 0; } @media (max-height: 760px) { .rm-toetsen { gap: 4px; } .rm-t { padding: 6px 0; } .rm-scherm { height: 44px; } } /* Batch waarvan de map ontbreekt: batches.json wijst er nog naar, maar de index.json is niet op te halen. Zichtbaar gedempt, zodat het geen gewone keuze meer lijkt. */ .batch-item.stuk { opacity: .6; border-style: dashed; } .batch-item.stuk .batch-sub { color: var(--err); font-style: italic; } /* ── Edu-Suite: het koepelmerk vóór het productteken ────────────────── Het logo staat vóór het wortel-/integraalteken, niet in plaats daarvan: Edu-Suite is de suite, ForMath en ForQuest zijn de producten erin. Het symbool houdt zijn eigen blauw en groen — die werken op licht én donker papier. Het woordmerk niet: #3c4f76 haalt op het donkere papier maar 2.0:1, dus dat loopt via --edusuite-ink. De maat komt uit het viewBox (841.9 x 183.6): op 32 px hoog is het 146.7 px breed. Dat is 0.81 x de kaphoogte van de productnaam — het koepelmerk hoort onder het product te staan, niet ernaast. */ .suite-merk { /* Op de schrijflijn van de productnaam. Een negatieve margin werkt hier niet: een flex-item met een echte baseline (de SVG) laat zich daardoor niet verschuiven — de schrijflijn van 'Edu-Suite' kwam zo 13px te hoog te liggen. Wat wel werkt: de DOOS loopt tot de schrijflijn (19px = 109/183.6 van 32) en de SVG steekt er met zijn tagline onderuit. De baseline van het item is dan de onderkant van die doos, en dat is precies de schrijflijn. */ display: block; align-self: baseline; height: 19px; overflow: visible; flex: none; } .suite-merk svg { display: block; width: 146.7px; height: 32px; } .suite-merk .es-woord { fill: var(--edusuite-ink, #3c4f76); } /* Dun streepje tussen de suite en het product. */ .suite-scheiding { /* Ook op de schrijflijn, en zo geplaatst dat het streepje de naam omvat: 23px erboven, 7px eronder. */ align-self: baseline; width: 1px; height: 30px; background: var(--rule); margin: 0 5px -7px; flex: none; } /* ── De kopbalk in drie kolommen ───────────────────────────────────── Links de suite, in het midden het product, rechts de bediening. De twee buitenkolommen krijgen dezelfde flex-basis, dus het midden ligt op de helft van de BALK en verschuift niet mee met de breedte van wat er links of rechts staat. Het streepje tussen suite en product is vervallen: er staat nu niets meer naast om van te scheiden. .brand en .product-merk blijven twee items van dezelfde flex-regel, dus 'Edu-Suite' en de productnaam houden hun gedeelde schrijflijn — ook nu ze ver uit elkaar staan. */ .brand { flex: 1 1 0; min-width: 0; } .product-merk { flex: 0 0 auto; display: flex; align-items: baseline; gap: 9px; } .header-acties { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; align-self: center; gap: 10px; }