/* ceeme-scherm.css — HET TOESTEL IS EEN FOTO, HET SCHERM IS ONS DASHBOARD. ================================================================================================ HERSCHREVEN op 10 augustus 2026 tegen de markup in `lib/scherm.js` (taak J19), en dezelfde dag nog een tweede keer — zie "Wat er de eerste keer mis ging" onderaan deze kop. Wat er mis was: `lib/scherm.js` is teruggezet naar de vorm uit `bewijs-9aug-de/` — `sch-toestel` met een `` erin en `sch-vlak` daaroverheen. Deze stylesheet is bij dezelfde `git reset --hard` teruggerold naar de vórige vorm, waarin het toestel zélf in CSS getekend werd: `sch-deksel`, `sch-voet`, een notch, een verloop. Drie klassen bestonden nog (`sch-glas`, `sch-balk`, `sch-inhoud`), twee waren dood en drie bestonden niet. Dit bestand is de enige reparatie van het herstel die het ijkpunt NIET kon geven, want een stylesheet staat niet in een pagina. Het is daarom geschreven tegen drie dingen die er wél zijn: de markup in `lib/scherm.js`, de foto zelf, en `public/dashboard.html`. ── Waarom er ook `ks-*` in staat ──────────────────────────────────────────────────────────── `lib/klantscherm.js` — wat er ín het scherm komt — draagt vijftien klassen die in geen enkele stylesheet van de site voorkwamen: `grep -rn "ks-tegel" public/*.css` gaf niets. Zelfde reset, zelfde bestand. Zonder deze regels is het scherm een kale opsomming. Die markup ligt vast: ze staat letterlijk in `bewijs-9aug-de/demo.html` (44 `ks-`klassen). Alles hieronder moet dus met CSS alleen, zonder één tag te verplaatsen. Dat is een beperking en een zegen: het scherm kan er niet anders uitzien dan wat er werkelijk in staat. ── De meetkunde, en waarom ze nu EXACT is ─────────────────────────────────────────────────── De foto is 1448 × 1086. Het witte schermvlak erin is een vierhoek in perspectief; de hoeken zijn uit het beeld zelf gemeten (grootste samenhangende witte vlak, drempel 225): linksboven 247, 195 rechtsboven 908, 144 linksonder 330, 733 rechtsonder 989, 619 De eerste versie legde daar een AFFIENE transform op — een `matrix()` naar het best passende parallellogram. Dat is de fout die Njusja meteen zag: nagemeten met een tweede opname waarin het vlak magenta gekleurd was, zat élke hoek er twintig pixels naast, systematisch, omdat een affiene afbeelding het perspectief per definitie niet kán volgen. Nu staat er een ECHTE projectieve transform, en die is exact: `perspective()` met een 3D-rotatie. De acht parameters zijn numeriek gepast op de vier gemeten hoeken; de gemiddelde hoekfout is 0,25 px op een beeld van 1448. Zie Dc19 in `docs/TAKEN.md`. En hij schaalt mee, wat de reden is dat het déze vorm is en geen `matrix3d`. `matrix3d` rekent in kale getallen waarvan er twee de eenheid 1/px dragen — dat gaat stuk zodra de kolom smaller wordt. `perspective()` neemt een LENGTE, en een lengte mag `cqw` zijn: 1cqw is één procent van de breedte van het toestel. Alles hieronder is dus uitgedrukt in de foto zelf. ── Wat er de eerste keer mis ging, en het was niet alleen de meetkunde ─────────────────────── Njusja, 10 augustus, over de eerste versie: *"en trouwens zeer lelijk, ziet ons dashboard er zo saai en donker uit?"* Nee. Ik had een donker paneel bedacht in plaats van te kijken wat er staat. `public/dashboard.html` draait op `body.app2026` en dat is warm papier met witte kaarten: `--canvas` #FDFCFA, `--surface` wit, de neutrale trap n1–n12, amber als enige accent. Een verzonnen productscherm in een mock-up die er juist is om het echte product te tonen — dat is exact de fout waar `docs/CEEME-WEBSITE-HERBOUW.md` over gaat, en ze staat bovenaan die tabel als "verzonnen productbeelden". Alle waarden hieronder komen daarom uit de tokens van `ceeme-2026.css` en zijn niet opnieuw gekozen. ── Waarom er geen groen of rood in de SCORES staat ────────────────────────────────────────── Die vraag kwam er in één adem achteraan, en het antwoord staat in `ceeme-2026.css` zelf: "Geen rood in scores (regel uit de briefing + rood/groen is het slechtste paar voor kleurenblinden). Scores lopen door de neutrale trap van licht naar donker; het statuswoord, de balklengte en het doel-streepje dragen de betekenis. Rood bestaat alleen nog voor wat écht kapot is." Dat geldt onverkort voor de STAVEN op dit scherm: de lengte draagt de betekenis, en amber verschijnt precies één keer per scherm — op de tegel die aan staat. Een score is een oordeel over een getal, en dat oordeel hoort niet in een tint te zitten. ── GECORRIGEERD 10 AUGUSTUS 2026 (J71 · J75) — twee dingen klopten hier niet ───────────────── Hier stond: *"Het groen dat in dashboard.html 65 keer in de markup staat, wordt door de redesign uitgezet … Het is overblijfsel van vóór 2026, geen levende kleur."* Allebei de helften waren fout. 1. **Groen mag, voor STATUS.** Njusja, 10 augustus: *"groen en rood mogen wel gebruikt worden: waar gepast!!!! hier is groen ideaal en moet ook zo in het dashboard voor dit soort dingen. bij admin idem"*. De grens loopt niet tussen kleuren maar tussen wat ze dragen: een TOESTAND (draait / staat stil / is kapot) mag een lampje hebben, een SCORE niet. De tokens `--st-*` en de klassen `.st` / `.st-dot` in `ceeme-2026.css` zijn daarvoor, en ze dragen kleur nooit alleen: er staat altijd een klop én een woord bij. 2. **Die regel zette bijna niets uit.** Van de 65 keer `#5B7B39` in `dashboard.html` zijn er 62 een INLINE `style`-attribuut, en daar komt een class-selector niet bij. Er werden er drie geneutraliseerd — en die ene `.text-[#5B7B39]` was uitgerekend een statusstipje met een woord ernaast, dus precies het geval dat groen hoort te zijn. Het groen was nooit dood; het stond 62 van de 65 keer gewoon op het scherm. Zie J75 voor de opruiming die daar nog uit volgt. Rood blijft hier zeldzaam: er is op dit scherm niets kapot, er is iets te winnen. ── De engine-logo's, en de motoren die er NIET meer in staan ──────────────────────────────── Njusja, 10 augustus: *"ik wil ook paars zien en de logo's van de engines! geen engines die we niet gebruiken"*. Het tweede was het belangrijkste, en het was een echte fout. `lib/marktaandeel.js` is de marktaandeeltabel van AI-chatbots en bevat er meer dan wij meten: `copilot` en `phind` staan in geen enkele regel van `engineStatus()` in `lib/engines.js`. Dit scherm stond dus op `/demo` en `/platformen` twee motoren te tonen die ceeme niet kan meten. Dat is geen smaakkwestie maar een overclaim op een live pagina, en regel 5 van `AGENTS.md` verbiedt hem met zoveel woorden. `lib/klantscherm.js` filtert de rijen nu op de motorenlijst zelf, en draagt `data-engine` met de id — dat laatste is wat de logo's hieronder mogelijk maakt. Zonder dat attribuut kan het niet: CSS kiest geen element op zijn TEKST, en `:nth-child()` zou het fout doen omdat de volgorde per markt verschilt (`nl`/`fr` België, `en` Europa, `de` Duitsland). Dat betekent wél dat de Duitse pagina's veranderd zijn en de byte-toets tegen `bewijs-9aug-de/` dus van 1 naar 3 verschillen gaat. Dat is een BESLISSING en geen breuk — zie Dc24 in `docs/TAKEN.md`, waar precies staat welke drie het zijn en waarom. */ /* ── Het geheel ──────────────────────────────────────────────────────────────────────────────── */ .cmp-scherm { margin: 0; display: block } .cmp-scherm figcaption { margin-top: 14px; text-align: center; font: 500 11px/1.4 "Space Mono", ui-monospace, monospace; letter-spacing: .08em; color: #858079; } /* ── Het toestel: de foto, en het vlak dat erop ligt ───────────────────────────────────────── `container-type: inline-size` maakt van dit blok de maatstaf voor álles in het scherm — de perspectiefafstand én de tekstmaat. Zonder dat klopt de mock-up bij één breedte en verder nergens. */ .sch-toestel { position: relative; container-type: inline-size; line-height: 0; /* geen witruimte onder de foto */ } .sch-toestel picture { display: block } .sch-foto { display: block; width: 100%; height: auto; border-radius: 4px; } /* Het schermvlak. De acht getallen hieronder zijn de passing uit de kop van dit bestand; ze horen bij elkaar en hebben los van elkaar geen betekenis. Wie er één verandert, moet opnieuw passen. */ .sch-vlak { position: absolute; left: 18.5002%; top: 14.9302%; width: 51.1753%; height: 47.1916%; transform: perspective(187.419cqw) rotateY(25.895deg) rotateX(7.921deg) rotateZ(-6.415deg); transform-style: preserve-3d; line-height: 1.45; /* De maat van alles in het scherm. Het schermvlak is 51,18cqw breed; bij de ware breedte van 741 px hoort een basis van 15,4 px, dus 1,04% van de toestelbreedte. Alleen een bovengrens, geen ondergrens: een ondergrens laat de tekst groeien terwijl het vlak krimpt, en dan loopt de inhoud uit het scherm. Bij een venster van 700 px gebeurde dat ook echt — 57 px eruit. Voor smalle kolommen is er de containervraag onderaan dit bestand. */ font-size: min(1.145cqw, 18px); font-family: "Manrope", system-ui, -apple-system, sans-serif; } /* ── Het glas ──────────────────────────────────────────────────────────────────────────────── `--canvas` en `--tx` uit de app-tokens: dit IS het dashboard, geen nabootsing ervan. ── Het violet, en waarom het een LICHT is ─────────────────────────────────────────────────── Njusja, 10 augustus: "ik wil ook paars zien". Het staat er, en het staat er op de enige manier waarop het mag. AGENTS.md, regel 4: *"Violet #6B3FD4 is het tweede licht en nooit een tweede accent: het belicht, het duidt nooit iets aan."* Dus geen violet vlak, geen violette staaf, geen violet cijfer — een schijnsel dat rechtsboven het scherm binnenvalt, aan dezelfde kant als het licht in de foto. En dezelfde kleur nog een keer in de schaduw onder de kaarten, want een violette kamer geeft violette schaduwen. Wie het wegdenkt verliest sfeer en geen enkele betekenis — dat is precies de toets voor een licht. */ .sch-glas { position: absolute; inset: 0; overflow: hidden; color: #221E18; background: radial-gradient(120% 92% at 92% -14%, rgba(107, 63, 212, .34) 0%, rgba(107, 63, 212, .13) 34%, rgba(107, 63, 212, .03) 58%, rgba(107, 63, 212, 0) 74%), radial-gradient(95% 66% at 2% 106%, rgba(107, 63, 212, .18) 0%, rgba(107, 63, 212, .04) 42%, rgba(107, 63, 212, 0) 66%), #FDFCFA; display: flex; flex-direction: column; } /* De veeg over het glas. Op een licht scherm is een glans wit en bijna niets — meer maakt er een plastic speelgoedje van. */ .sch-glas::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(112deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%); } /* De balk bovenaan het venster: drie stipjes en een adres. Dat maakt er een scherm van in plaats van een kader met tekst. */ .sch-balk { flex: 0 0 auto; display: flex; align-items: center; gap: .48em; padding: .48em .8em; border-bottom: 1px solid rgba(34, 30, 24, .08); background: linear-gradient(180deg, rgba(107, 63, 212, .07), rgba(107, 63, 212, .02)), #F2EFEA; } .sch-balk i { width: .5em; height: .5em; border-radius: 50%; display: block; background: #D0CCC5; } .sch-balk i:first-child { background: #BEB9B2 } .sch-balk span { margin-left: .55em; font: 500 .68em/1 "Space Mono", ui-monospace, monospace; color: #858079; letter-spacing: .03em; } .sch-inhoud { flex: 1 1 auto; min-height: 0; padding: .8em .95em .55em } /* ── Het klantscherm — lib/klantscherm.js ──────────────────────────────────────────────────── Alles in em, zodat het geheel één blok is dat met het scherm meeschaalt en dus bij élke kolombreedte even vol staat. ── Waarom de reset in `:where()` staat en de rest niet ────────────────────────────────────── Twee keer op rij ging het hier mis op specificiteit, en beide keren onzichtbaar. Eerst: `.ks-h` is een `

`, en de pagina eromheen draagt `.hw-sec p { font-size: 16px }` uit `ceeme-hoe.css`. Dat is (0,1,1) tegen (0,1,0) — de paginaregel wint, en dan staat er in een scherm van 450 px een kopje van 16 px dat over de tegels heen valt. Daarna, na het repareren van de eerste: de reset zelf, geschreven als `.sch-glas .ks p`, weegt (0,2,1) en versloeg `.sch-glas .ks-h` (0,2,0) — mijn eigen componentregel. Gevolg: marge nul en de basismaat, en elke poging om die marge te verkleinen deed niets, want de regel kwam nooit aan. `:where()` telt niet mee voor de specificiteit. De reset weegt daardoor nul en élke echte regel hieronder wint — precies wat een reset hoort te doen. */ :where(.sch-glas .ks) :where(p, ul, li, b, em, small, span) { margin: 0; padding: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; font-family: inherit; } :where(.sch-glas .ks) ul { list-style: none } :where(.sch-glas .ks) li::before, :where(.sch-glas .ks) li::marker { content: none } .sch-glas .ks { display: block } /* De paginakop, zoals in het dashboard: titel plus één label dat zegt waar de cijfers vandaan komen. Dat label is geen versiering — het is de reden dat dit blok op de site mag staan. */ .sch-glas .ks-kop { display: flex; align-items: center; gap: .5em; padding-bottom: .5em; margin-bottom: .1em; border-bottom: 1px solid rgba(34, 30, 24, .08); } .sch-glas .ks-kop b { font-size: 1.22em; font-weight: 800; letter-spacing: -.02em; color: #16150F; } .sch-glas .ks-demo { font: 700 .56em/1 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #885700; background: #F9EEE0; border-radius: .35em; padding: .42em .55em; } /* De tussenkopjes: mono, klein, in hoofdletters — de labelstijl van het dashboard. Het deel achter het punt is de bron of de legende en staat een trap lichter. */ .sch-glas .ks-h { margin: .8em 0 .42em; font: 500 .6em/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; color: #858079; } .sch-glas .ks-h span { color: #918C84; text-transform: none; letter-spacing: .04em } /* ── De zes tegels van het Command center ──────────────────────────────────────────────────── Witte kaarten op de warme bodem, diepte uit lichtheid in plaats van randen — de regel die in ceeme-2026.css boven de app-tokens staat. ⛔ HERZIEN 31 AUGUSTUS 2026 — J162. Hier stonden VIER tegels (gekozen · geciteerd · genoemd · niet gevonden) met een vulstreepje eronder en één amberen "aan"-tegel. Dat scherm bestond niet: het echte overzicht draagt het Command center met zes standen. De tegels tonen nu een STAND en geen deel-van-geheel, dus het spoor en de vulling zijn weg — een balk onder "Watch Market" zou een verhouding suggereren die er niet is. Het dashboard zet er zelf ook geen. */ .sch-glas .ks-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .42em } .sch-glas .ks-tegels.ks-zes { grid-template-columns: repeat(3, 1fr) } .sch-glas .ks-tegel { position: relative; overflow: hidden; padding: .5em .55em .62em; border-radius: .5em; background: #ffffff; border: 1px solid rgba(34, 30, 24, .08); box-shadow: 0 1px 2px rgba(52, 30, 104, .05), 0 6px 16px rgba(107, 63, 212, .07); } .sch-glas .ks-tegel .ks-k { display: block; font: 500 .55em/1.25 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #858079; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sch-glas .ks-tegel b { display: block; margin-top: .12em; font-size: 1.5em; font-weight: 800; letter-spacing: -.02em; color: #221E18; } .sch-glas .ks-tegel b small { font-size: .5em; font-weight: 600; color: #918C84 } /* ── Het spoor en de vulling: ALLEEN in het telblok op /platformen ──────────────────────────── Het streepje onderaan is de breedte uit de telling — geen versiering. Het loopt over een spoor, want een balk zonder spoor toont een deel zonder geheel. ⚠ Deze drie regels stonden op 31 augustus 2026 een half uur lang GESCHRAPT, en dat was fout: ik verving het vier-tegelscherm door het Command center (J162) en nam aan dat niemand ze nog nodig had. `lib/meetscherm.js` op /platformen tekent ze wél — vier tegels met een vulling en één amberen tegel. De gebouwde HTML van /platformen veranderde niet, dus geen enkele toets zou dit gezien hebben; het zou alleen op het scherm te zien geweest zijn. Ze staan nu op `.ks-tegels:not(.ks-zes)`, zodat het Command center ze niet krijgt en het telblok wel. */ .sch-glas .ks-tegels:not(.ks-zes) .ks-tegel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .2em; background: #E4E0DA; } .sch-glas .ks-tegel i { position: absolute; left: 0; bottom: 0; height: .2em; display: block; z-index: 1; background: #858079; } /* Het ene merkmoment per scherm: de tegel die aan staat. Amber is hier zeldzaam en dus leesbaar — dat is de reden die in de tokens zelf staat. */ .sch-glas .ks-tegel.ks-aan { background: #F9EEE0; border-color: rgba(198, 137, 43, .32); } .sch-glas .ks-tegel.ks-aan .ks-k { color: #885700 } .sch-glas .ks-tegel.ks-aan::after { background: rgba(198, 137, 43, .22) } .sch-glas .ks-tegel.ks-aan i { background: #C6892B } /* Eén tegel draagt geen getal maar de PAKKETNAAM, en 1.5em vet loopt dan uit het kaartje. Een naam hoeft ook niet zo groot te staan als een cijfer: het cijfer is wat je scant, de naam is wat je één keer leest. Dit is dezelfde ingreep als in het dashboard zelf, waar de pakketnaam in een kleinere graad staat dan de vijf standen ernaast. */ .sch-glas .ks-zes .ks-tegel b { font-size: .92em; line-height: 1.3 } .sch-glas .ks-zes .ks-tegel b small { font-size: .8em } /* De amberen notitie onder de tegels. Ze staat er omdat ze in het dashboard staat, en ze zegt wat dit pakket NIET doet — precies de zin die dit product verkoopt zonder iets te beloven. */ .sch-glas .ks-note { margin: .5em 0 0; padding: .42em .6em; border-radius: .45em; background: rgba(198, 137, 43, .08); border: 1px solid rgba(198, 137, 43, .27); font-size: .64em; line-height: 1.45; color: #7E5512; } /* ── De lijsten: drivers, en het marktaandeel ──────────────────────────────────────────────── Allebei één witte kaart met regels erin, zoals de Playbook- en Design-Trust-kaarten in het dashboard. De `