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/auth/LandingPage.tsx

@@ -33,21 +33,18 @@ interface LandingPageProps {
 const capabilityItems = [
   {
     icon: MapPinned,
-    number: '01',
     title: 'Eén kaartgerichte werkruimte',
     description:
       'Selecteer een gebied in België of de Belgische Noordzee en werk verder vanuit dezelfde ruimtelijke context.',
   },
   {
     icon: Database,
-    number: '02',
     title: 'Bronnen blijven herkenbaar',
     description:
       'Autoriteit, meetmoment, dekking, CRS en beperkingen blijven zichtbaar in plaats van achter één generieke kaartlaag te verdwijnen.',
   },
   {
     icon: ShieldCheck,
-    number: '03',
     title: 'Kwaliteit vóór resultaat',
     description:
       'Vergelijk referentie- en kandidaatgegevens, controleer bewijs en exporteer pas wanneer de context klopt.',
@@ -70,6 +67,7 @@ export function LandingPage({
   const [password, setPassword] = useState('')
   const [pendingAction, setPendingAction] = useState<'operator' | 'guest' | null>(null)
   const [authError, setAuthError] = useState<string | null>(null)
+  const [attempted, setAttempted] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
   const usernameRef = useRef<HTMLInputElement | null>(null)
@@ -84,6 +82,7 @@ export function LandingPage({
   const submitLogin = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     setPendingAction('operator')
+    setAttempted(true)
     setAuthError(null)
     try {
       const session = await login(username.trim(), password)
@@ -98,6 +97,7 @@ export function LandingPage({
   const submitGuestLogin = async () => {
     setMenuOpen(false)
     setPendingAction('guest')
+    setAttempted(true)
     setAuthError(null)
     if (typeof accessPanelRef.current?.scrollIntoView === 'function') {
       accessPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -278,7 +278,7 @@ export function LandingPage({
                     </button>
                   </div>
 
-                  {authError || serviceError ? (
+                  {authError || (serviceError && attempted) ? (
                     <p className="landing-login-error" role="alert">{authError ?? serviceError}</p>
                   ) : null}
 
@@ -290,6 +290,13 @@ export function LandingPage({
                     <LogIn aria-hidden="true" />
                     {pendingAction === 'operator' ? 'Veilig aanmelden…' : 'Inloggen als operator'}
                   </button>
+
+                  {/* De storingsmelding stond als rood blok midden in de hero,
+                      voordat de bezoeker iets gedaan had. Zolang er nog niets
+                      geprobeerd is, is het een mededeling en geen fout. */}
+                  {serviceError && !attempted && !authError ? (
+                    <p className="landing-login-note">{serviceError}</p>
+                  ) : null}
                 </form>
 
                 {guestAccessEnabled ? (
@@ -326,11 +333,10 @@ export function LandingPage({
           </div>
 
           <div className="landing-capability-grid">
-            {capabilityItems.map(({ icon: Icon, number, title, description }) => (
+            {capabilityItems.map(({ icon: Icon, title, description }) => (
               <article key={title} className="landing-capability">
                 <div className="landing-capability-topline">
                   <span className="landing-capability-icon" aria-hidden="true"><Icon /></span>
-                  <small>{number}</small>
                 </div>
                 <h3>{title}</h3>
                 <p>{description}</p>