Voer de visuele audit door: fundament, donkere werkstand, kaart en schil

Achttien bevindingen uit de audit, met de metingen erbij in de betreffende
CSS-secties.

Fundament. Dertien tokens werden op 87 plaatsen aangeroepen zonder ooit
gedefinieerd te zijn; in de browser gaf getPropertyValue('--gi-text') een lege
string terug, dus die kleurregels vielen terug op overerving. Vorm en hoogte
zijn terug naar de schaal: radius via token van 17% naar 81%, unieke schaduwen
van 115 naar 71, losse kleurwaarden van 928 naar 352.

Typografie. De stylesheets declareerden negen gewichten terwijl er per familie
twee gezichten geladen werden, en font-synthesis-weight: none verbiedt
namaakvet. Alles van 650 tot 850 kwam dus als 600 op het scherm: 138 van de 148
declaraties rendereden identiek. Nu vier stappen die alle vier ook geladen
worden, en Manrope draagt de koppen zoals op de landingspagina.

Donkere werkstand. De werkbank staat tegen luchtbeelden aan; een lichte schil
daarnaast laat de kaart altijd verliezen. De landingspagina blijft licht.

Kaart. De ondergrond wordt ontkleurd en gedempt zodat alleen de eigen data nog
kleur draagt, en de symbologie staat niet langer als losse hexwaarden in
GeoMap. De zes zwevende vlakken zijn er drie: statuskaart, staprail en
resultaatchip bleken al één component te zijn die de opmaak over drie hoeken
van de kaart uiteentrok.

Schil. Eén kopbalk in plaats van drie (215px chroom naar 100px), het raster van
AI-vragen zonder botsingen, kapitalen op één niveau in plaats van 57
declaraties, en het leverancierslogo uit de navigatiebalk.

Van 47 echte !important naar 1, gemeten door telkens twee productiebuilds op
berekende stijlen te vergelijken. Contrast: nul tekstelementen onder AA op zes
werkbladen, in beide werkstanden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/detection/AiPipelineIllustration.test.tsx

@@ -17,10 +17,10 @@ describe('AiPipelineIllustration', () => {
       />,
     )
 
-    expect(screen.getByText('CUDA gereed')).toBeTruthy()
+    expect(screen.getByText('GPU gereed')).toBeTruthy()
     expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')
 
-    fireEvent.click(screen.getByRole('tab', { name: /NVIDIA GPU/ }))
-    expect(screen.getByRole('tabpanel').textContent).toContain('Lokale PyTorch-inferentie')
+    fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
+    expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
   })
 })

frontend/src/components/detection/AiPipelineIllustration.tsx

@@ -12,8 +12,8 @@ interface AiPipelineIllustrationProps {
 
 const pipelineStages = [
   { key: 'imagery', label: 'Orthofoto', title: 'Gegeorefereerd bronbeeld', detail: 'CRS, resolutie en ruimtelijke dekking blijven bij de dataset bewaard.', icon: Image },
-  { key: 'tiles', label: 'Beeldtegels', title: 'Controleerbare tilevoorbereiding', detail: 'Overlap en tile-identiteit houden detecties herleidbaar naar hun bronpixel.', icon: Boxes },
-  { key: 'gpu', label: 'NVIDIA GPU', title: 'Lokale PyTorch-inferentie', detail: 'GeoIntel gebruikt de server-GPU en faalt gesloten wanneer CUDA vereist maar niet beschikbaar is.', icon: Cpu },
+  { key: 'tiles', label: 'Beeldtegels', title: 'Beeld opgedeeld in controleerbare tegels', detail: 'Elke tegel houdt zijn overlap en herkomst bij, zodat elke detectie terug te voeren is op de bronpixel.', icon: Boxes },
+  { key: 'gpu', label: 'Berekening', title: 'De herkenning draait lokaal', detail: 'De analyse gebruikt de GPU van de server. Is die niet beschikbaar, dan stopt de analyse in plaats van een resultaat te maken waarop u niet kunt bouwen.', icon: Cpu },
   { key: 'detections', label: 'Detecties', title: 'Gegeorefereerde gebouwobjecten', detail: 'Confidence, modelversie, brontegel en geometrie worden als reproduceerbaar resultaat bewaard.', icon: ScanSearch },
   { key: 'quality', label: 'QA-bewijs', title: 'Controle vóór vrijgave', detail: 'Precision, recall, IoU en foutbewijs bepalen of een resultaat alleen verkennend of operationeel bruikbaar is.', icon: BadgeCheck },
 ] as const
@@ -36,15 +36,15 @@ export function AiPipelineIllustration({
       <div className="ai-pipeline-heading">
         <div>
           <p className="eyebrow">Van pixel naar bewijs</p>
-          <h3 id="ai-pipeline-title">PyTorch-keten op de NVIDIA-server</h3>
+          <h3 id="ai-pipeline-title">Van luchtbeeld naar controleerbare detectie</h3>
           <p>Open een schakel om te zien welke technische context GeoIntel door de volledige analyse bewaart.</p>
         </div>
         <span className={gpuReady ? 'ai-pipeline-gpu ai-pipeline-gpu-ready' : 'ai-pipeline-gpu'}>
-          <i /> {gpuReady ? 'CUDA gereed' : 'CUDA controleren'}
+          <i /> {gpuReady ? 'GPU gereed' : 'GPU controleren'}
         </span>
       </div>
 
-      <div className="ai-pipeline-track" role="tablist" aria-label="PyTorch-analysekten">
+      <div className="ai-pipeline-track" role="tablist" aria-label="Stappen in de analyseketen">
         <span className="ai-pipeline-flow" aria-hidden="true" />
         {pipelineStages.map(({ key, label, icon: Icon }, index) => (
           <button