/* app.css — schil van Hillmond: upload, verwerking, fiche-weergave. Vormtaal: die van ramirezevaluation.com, niet nagebouwd maar overgenomen. Dezelfde tokens (inkt #1d1d1f, tegel #f5f5f7, accent diepgroen #1c5d48), dezelfde systeemletter, dezelfde maatvoering (radius 14/24, pilknoppen, sectieritme via clamp). Wit papier, ruime tegels, zachte hoeken. De schil is bewust sober: het werkstuk is de fiche, niet deze pagina's. De fiche zelf (public/fiche.css) is een drukwerkdocument en houdt daarom zijn eigen zetspiegel en zijn schreefletter — hij deelt met deze schil het palet en het accent, niet de vormtaal. Dat is opzet: een A4 dat naar de jury gaat is een ander medium dan een webpagina. Ramirez laadt geen webfont maar leunt op de systeemstack; die nemen we hier letterlijk over, zodat de schil op elk platform hetzelfde toont als de site. De lokale woff2's in fonts.css zijn er voor de fiche, waar de render headless in Docker gebeurt en een systeemletter niet bestaat. */ :root { --ink: #1d1d1f; --ink-soft: #424245; --muted: #6e6e73; --paper: #ffffff; --tile: #f5f5f7; --tile-deep: #e8e8ed; --line: #d2d2d7; --line-soft: #e8e8ed; --accent: #1c5d48; --accent-ink: #123e30; --accent-tint: #e7efe9; --dark: #101013; --on-ink: #f5f5f7; --on-ink-mut: #86868b; --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Eén kolom voor kop, inhoud en voet: alles ligt op dezelfde twee verticale assen. Was 1040px, maar de schil draagt geen 1040px aan inhoud — dat liet rechts een leeg halfscherm achter. */ --maxw: 736px; --pad-x: clamp(1.25rem, 5vw, 2.5rem); --section-y: clamp(3rem, 7vw, 5rem); --radius: 12px; --radius-lg: 18px; --radius-pill: 980px; /* Formulierfouten mogen wél rood zijn. Het verbod op verkeerslicht geldt de uitkomst van de analyse (fiche.css) — niet een ontbrekend bestand: dat is een bedieningsfout van de gebruiker, geen oordeel over een dossier. */ --fout: #a3382f; --fout-tint: #fdf2f1; } /* Paginasoorten verzetten alleen de kolombreedte; de rest van de schil is overal gelijk. Op , zodat kopbalk, inhoud en voetbalk meeschuiven en niets uit de as loopt. */ /* Het blad krijgt een ondergrond: grijs papier eromheen, wit papier eronder. */ body.breedte-blad { --maxw: 236mm; background: var(--tile); } body.breedte-blad .app-kop { background: rgba(245, 245, 247, 0.82); } /* Op de grijze ondergrond zou een grijze melding wegvallen. */ body.breedte-blad .melding:not(.demo-banner):not(.melding-fout) { background: var(--paper); border: 1px solid var(--line-soft); } body.breedte-breed { --maxw: 1120px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; } /* ---------- terugkerende typografie ---------- */ /* Het eyebrow-label: mono, gesperd, klein. Bij Ramirez markeert het elke sectie-aanhef; hier doet het hetzelfde werk voor veldgroepen en stappen. */ .microlabel { display: block; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- kop- en voetbalk ---------- */ .app-kop { border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(16px); position: sticky; top: 0; z-index: 10; } .app-kop-inner { max-width: var(--maxw); margin: 0 auto; padding: 0.72rem var(--pad-x); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .merk { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .merk .beta { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-pill); padding: 0.18rem 0.48rem; } .app-nav { display: flex; gap: 1.4rem; font-size: 0.875rem; } .app-nav a { color: var(--muted); text-decoration: none; padding: 0.15rem 0; border-bottom: 1.5px solid transparent; transition: color 0.15s, border-color 0.15s; } .app-nav a:hover { color: var(--ink); } /* Actief: een streep, niet extra gewicht. Gewicht laat de regel springen zodra je van pagina wisselt; een streep niet. */ .app-nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); } main.app-main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--pad-x) calc(var(--section-y) * 1.1); } main.app-main.is-blad { max-width: 236mm; padding-top: clamp(1.5rem, 4vw, 2.75rem); } .app-voet { border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--muted); margin-top: auto; } .app-voet-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem var(--pad-x) 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; } /* --on-ink-mut (#86868b) haalt op wit maar 3,62:1 — genoeg voor een rand, te weinig voor tekst (AA vraagt 4,5:1). Deze regel is bovendien 0,72rem, dus ook de uitzondering voor grote tekst geldt niet. --muted (#6e6e73) geeft 5,07:1 en verandert het beeld nauwelijks. */ .app-voet-inner .mono { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } /* De kleine lettertjes zijn geen verstopte tekst, maar ze mogen ook niet even luid staan als de rest: kleiner, smaller gemeten, meer lucht erboven. */ .app-voet-klein { padding: 1.1rem var(--pad-x) 2.25rem; } .app-voet-klein p { font-size: 0.71rem; line-height: 1.6; /* Was --on-ink-mut: 3,62:1 op wit. Dit is de aansprakelijkheidstekst — juist die mag niet onleesbaar zijn. --muted haalt 5,07:1. */ color: var(--muted); max-width: 68ch; } /* ---------- paginakop ---------- */ .pagina-kop { margin-bottom: clamp(2rem, 4vw, 2.75rem); } h1.pagina-titel { font-size: clamp(2rem, 4.4vw, 2.85rem); line-height: 1.06; letter-spacing: -0.022em; margin: 0.6rem 0 0; max-width: 17ch; text-wrap: balance; } p.pagina-intro { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); max-width: 58ch; margin-top: 0.9rem; text-wrap: pretty; } /* ---------- formulier: één gegroepeerde kaart ---------- Was: vier losse grijze tegels onder elkaar. Dat leest als de uitvoer van een formuliergenerator — vier keer hetzelfde blok, vier keer dezelfde afstand, geen hiërarchie. Nu: één witte kaart met haarlijnen ertussen (de gegroepeerde lijst uit iOS/macOS-instellingen). De drie documenten horen bij elkaar en zien er nu ook zo uit; het optionele deel staat in een eigen, stillere kaart eronder. De oude kantlijnklassen blijven bestaan zodat bestaande markup blijft werken, maar doen niets meer. */ .railblok { padding-left: 0; } .rail { position: static; width: auto; text-align: left; } .kaart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .kaart + .kaart { margin-top: 1.1rem; } .kaart-stil { background: var(--tile); border-color: transparent; } .veldrij { padding: 1.3rem 1.4rem 1.4rem; transition: background 0.2s; } .veldrij + .veldrij { border-top: 1px solid var(--line-soft); } /* Kop van een veld: volgnummer in de kantlijn, naam en toelichting ernaast. De toelichting staat boven de invoer, niet eronder — je leest wat gevraagd wordt vóór je het bestand kiest. */ .veldkop { display: flex; gap: 0.85rem; align-items: baseline; } .veldnr { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 1.4rem; flex: none; } .veldnaam { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .veld-hint { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); max-width: 52ch; margin: 0.2rem 0 0; } .veldkop + .bestandsveld, .veldkop + .tekstveld, .veldkop + .veld-fout { margin-top: 0.9rem; } /* De inspringing zet het bedieningsvlak onder de veldnaam, naast de nummerkolom. `width: 100%` op .bestandsveld rekent echter over de vólle contentbreedte van .veldrij — die 100% plus 2,25rem marge stak het vlak 2,25rem buiten de kaart, waar `overflow: hidden` de rechterhoek én de focusring afsneed (op elke schermbreedte, niet alleen smal). Daarom hier ook de breedte corrigeren; .tekstveld houdt zijn eigen max-width van 22rem. */ .veldrij .bestandsveld, .veldrij .tekstveld { margin-left: 2.25rem; width: calc(100% - 2.25rem); } /* ---------- bestandsveld ---------- De eigenlijke is verborgen maar niet weg: hij houdt de validatie, het formulier en de toetsenbordbediening. Wat je ziet is een neerzetvlak dat ook op klik de kiezer opent. Reden: de systeemknop ("Choose File / No file chosen", in het Engels, op elk platform anders) was het meest zichtbare stuk vreemde vormtaal op de pagina. */ .vw-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .bestandsveld { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; font: inherit; background: var(--tile); border: 1px solid transparent; border-radius: var(--radius); padding: 0.7rem 0.85rem 0.7rem 0.8rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .bestandsveld:hover { background: var(--tile-deep); } /* Op de donkerdere hoverachtergrond zakt --muted naar 4,15:1. Niet de achtergrond terugdraaien maar de tekst aanzetten: hover hoort duidelijker te zijn dan rust, niet minder leesbaar. */ .bestandsveld:hover .bestandsnaam, .bestandsveld:hover .bestandsmaat, .bestandsveld:hover .bestandsactie { color: var(--ink-soft); } .bestandsveld.sleep-over { background: var(--accent-tint); border-color: var(--accent); } .kaart-stil .bestandsveld { background: var(--paper); border-color: var(--line); } /* Merkteken links: leeg vierkantje vóór, gevuld vinkje ná de keuze — dezelfde inkt-logica als de fiche, geen kleurvlak. */ .bestandsteken { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; /* Dit rondje is de statusaanduiding (leeg / gekozen) en valt daarmee onder WCAG 1.4.11. Op de tegel haalde --line 1,38:1; --on-ink-mut haalt 3,33:1. */ border: 1px solid var(--on-ink-mut); background: var(--paper); position: relative; transition: background 0.15s, border-color 0.15s; } .bestandsveld.gevuld .bestandsteken { background: var(--accent); border-color: var(--accent); } .bestandsveld.gevuld .bestandsteken::after { content: ''; position: absolute; left: 0.34rem; top: 0.2rem; width: 0.28rem; height: 0.55rem; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(43deg); } .bestandstekst { flex: 1 1 auto; min-width: 0; } .bestandsnaam { display: block; font-size: 0.875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bestandsveld.gevuld .bestandsnaam { color: var(--ink); font-weight: 500; } .bestandsmaat { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 0.1rem; } .bestandsactie { flex: none; font: inherit; font-size: 0.8rem; color: var(--muted); background: none; border: 0; padding: 0.2rem 0.2rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); } .bestandsactie:hover { color: var(--ink); } .bestandsactie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } input[type='file']:focus-visible + .bestandsveld { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- tekstinvoer ---------- Stond er niet: viel terug op de systeemstijl en was daarmee het enige onopgemaakte element van de pagina. */ .tekstveld { display: block; width: 100%; max-width: 22rem; font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--paper); /* De rand is het enige wat dit veld als invoerveld aanwijst, dus valt hij onder WCAG 1.4.11 (3:1). --line haalde 1,51:1 op wit; --on-ink-mut haalt 3,62:1. Hier is #86868b wél de juiste kleur: te licht voor tekst, precies goed voor een rand. */ border: 1px solid var(--on-ink-mut); border-radius: var(--radius); padding: 0.62rem 0.8rem; transition: border-color 0.15s; } /* Placeholdertekst is tekst: 4,5:1. --on-ink-mut gaf 3,62:1. */ .tekstveld::placeholder { color: var(--muted); } /* Hover moet dónkerder worden dan de ruststand. #bcbcc2 (1,89:1) was lichter dan de nieuwe rand en draaide de aanwijzing dus om. */ .tekstveld:hover { border-color: var(--muted); } input:focus-visible, .tekstveld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- foutstand ---------- */ .veld-fout { display: none; font-size: 0.8125rem; color: var(--fout); margin: 0.55rem 0 0 2.25rem; } .veldrij.heeft-fout { background: var(--fout-tint); } .veldrij.heeft-fout .veld-fout { display: block; } .veldrij.heeft-fout .bestandsveld, .veldrij.heeft-fout .tekstveld { border-color: var(--fout); } /* Verouderd, blijft staan voor pagina's die het nog gebruiken. */ .veldgroep { background: var(--tile); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.65rem; margin-bottom: 0.85rem; } .veldgroep.heeft-fout { background: var(--fout-tint); } .veldgroep.heeft-fout .veld-fout { display: block; } .optioneel-label { font-weight: 400; color: var(--muted); } .formulier-voet { padding-top: 1.6rem; } .verwerking-noot { font-size: 0.78rem; line-height: 1.6; color: var(--muted); max-width: 62ch; margin-top: 1.2rem; } /* ---------- knoppen ---------- */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: inherit; font-size: 0.9375rem; font-weight: 500; padding: 0.7rem 1.4rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--ink); color: var(--paper); text-decoration: none; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; } /* Zwart wordt lichter zwart bij hover, niet groen: een knop die van kleur verschiet leest als een andere knop. */ .knop:hover { background: #35353a; } .knop:disabled { opacity: 0.35; cursor: default; } .knop:disabled:hover { background: var(--ink); } .knop-secundair { background: transparent; color: var(--ink); border-color: var(--line); } .knop-secundair:hover { background: var(--tile); color: var(--ink); border-color: var(--line); } .knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .actie-rij { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; } .laadtekst { color: var(--muted); font-size: 0.875rem; } /* ---------- meldingen ---------- */ .melding { background: var(--tile); border-radius: var(--radius); padding: 1rem 1.25rem 1.1rem; font-size: 0.9375rem; margin: 1.5rem 0; } .melding-fout { background: var(--fout-tint); } .melding-fout p:first-child { color: var(--fout); font-weight: 500; } .melding p + p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); } .melding a { color: var(--ink); text-underline-offset: 3px; } .melding .fout-acties { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; } .melding .fout-acties .knop { padding: 0.5rem 1.1rem; font-size: 0.85rem; } /* ---------- demo-blok ---------- */ .demo-blok { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--dark); color: var(--on-ink); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2rem); } .demo-blok h2 { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mut); margin-bottom: 0.7rem; } .demo-blok p { font-size: 0.9375rem; line-height: 1.55; color: var(--on-ink); max-width: 56ch; margin-bottom: 1.25rem; } .demo-blok .knop-secundair { font-size: 0.875rem; padding: 0.6rem 1.15rem; } /* #2e2e33 haalde op --dark maar 1,41:1: de knoprand was er wel, maar viel onder de 3:1 van WCAG 1.4.11 en verdween op een matig scherm helemaal. --muted haalt 3,75:1 op #101013. */ .demo-blok .knop-secundair { color: var(--on-ink); border-color: var(--muted); } .demo-blok .knop-secundair:hover { color: var(--on-ink); border-color: var(--on-ink-mut); } /* ---------- statuspagina ---------- Was: vier rijen waarvan de lopende stap een grijze pil kreeg. De pil sprong van rij naar rij en dat is precies de beweging die je níét wilt op een pagina waar je zit te wachten. Nu staat de lijst stil en beweegt alleen het merkteken links: open cirkel (wacht) → pulserende stip (bezig) → vinkje (klaar). Dezelfde inkt-logica als de fiche. */ .voortgang { height: 3px; background: var(--tile-deep); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 2rem; } .voortgang-balk { height: 100%; width: 0%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .stappen { list-style: none; margin: 0 0 2rem; border-top: 1px solid var(--line-soft); } .stap { display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem 0.15rem; border-bottom: 1px solid var(--line-soft); } .stap-rail { display: flex; align-items: baseline; gap: 0.7rem; min-width: 5.5rem; flex: none; } .stap-teken { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); /* was --on-ink-mut: 3,62:1 op wit, te weinig voor 0,75rem */ } /* Het merkteken. Eén element, drie standen, geen kleurvlak eromheen. */ .stap-merk { position: relative; width: 0.85rem; height: 0.85rem; border-radius: 50%; /* Zelfde reden als bij .bestandsteken: de open cirkel is de aanduiding van de stand "wacht", niet een decoratieve lijn. --line gaf 1,51:1 op wit — ver onder de 3:1 van WCAG 1.4.11, en op een laptop in de trein zag je hem domweg niet. --on-ink-mut geeft 3,62:1. */ border: 1px solid var(--on-ink-mut); align-self: center; flex: none; transition: background 0.25s, border-color 0.25s; } .stap.bezig .stap-merk { border-color: var(--accent); background: var(--accent); animation: pols 1.6s ease-in-out infinite; } .stap.klaar .stap-merk { border-color: var(--ink); background: var(--ink); } .stap.klaar .stap-merk::after { content: ''; position: absolute; left: 0.28rem; top: 0.14rem; width: 0.2rem; height: 0.42rem; border: solid var(--paper); border-width: 0 1.4px 1.4px 0; transform: rotate(43deg); } @keyframes pols { 0%, 100% { box-shadow: 0 0 0 0 rgba(28, 93, 72, 0.32); } 55% { box-shadow: 0 0 0 5px rgba(28, 93, 72, 0); } } @media (prefers-reduced-motion: reduce) { .stap.bezig .stap-merk { animation: none; } .voortgang-balk { transition: none; } } .stap-stand { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); /* was --on-ink-mut: 3,62:1, en dit is de enige tekstuele weergave van de stand — die moet leesbaar zijn */ } .stap-tekst { font-size: 1rem; color: var(--muted); } .stap-detail { display: block; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); margin-top: 0.15rem; } .stap.bezig .stap-tekst { color: var(--ink); font-weight: 500; } .stap.bezig .stap-stand { color: var(--accent); } .stap.klaar .stap-tekst { color: var(--ink); } .stap.klaar .stap-stand { color: var(--muted); } .status-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); /* was --on-ink-mut: 3,62:1 op wit */ padding-top: 0.5rem; } /* ---------- fiche-pagina ---------- */ .fiche-werkbalk { max-width: 212mm; margin: 0 auto 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; } .fiche-werkbalk .terug { color: var(--muted); text-decoration: none; } .fiche-werkbalk .terug:hover { color: var(--ink); } .fiche-werkbalk .knop { padding: 0.5rem 1.1rem; font-size: 0.85rem; } /* ---------- demo-markering op de fiche ---------- Een voorbeeldfiche mag nooit voor een echte analyse kunnen doorgaan: banner op scherm (.demo-banner), watermerk in de afdruk (.demo-watermerk.actief). Het watermerk staat position:fixed en herhaalt daardoor op elke geprinte pagina. Twee lagen: een diagonale (visueel dominant, maar poppler/pdftotext extraheert geroteerde tekst niet) en een horizontale randregel die wél in de tekstlaag van de PDF belandt. */ /* Slank en donker: het moet opvallen zonder de fiche te overstemmen. */ .demo-banner { background: var(--dark); border-radius: var(--radius); padding: 0.7rem 1rem; font-size: 0.8125rem; margin: 0 0 1.25rem; } .demo-banner p { color: var(--on-ink); line-height: 1.5; } .demo-watermerk { display: none; } /* ---------- print: alleen het blad ---------- */ @media print { body, body.breedte-blad { background: #fff; } .app-kop, .app-voet, .fiche-werkbalk, .no-print { display: none !important; } main.app-main, main.app-main.is-blad { max-width: none; padding: 0; } .demo-watermerk.actief { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; pointer-events: none; font-family: var(--mono, monospace); text-transform: uppercase; } .demo-watermerk-diagonaal { transform: rotate(-24deg); font-size: 26pt; font-weight: 600; letter-spacing: 0.22em; color: rgba(20, 20, 24, 0.10); } .demo-watermerk-rand { position: absolute; top: 2mm; right: 5mm; font-size: 6pt; font-weight: 600; letter-spacing: 0.14em; color: rgba(20, 20, 24, 0.55); } } /* ---------- smalle schermen ---------- Getoetst op 390x844 (iPhone) en 768x1024. Twee dingen gingen mis en zijn hier gerepareerd: 1. De kaartinspringing. Op een breed scherm zet `margin-left: 2.25rem` het bedieningsvlak netjes onder de veldnaam, in lijn met de nummerkolom. Op 390px kost dat 36 van de 303px die de veldrij binnen de kaart nog heeft — een achtste van de rij, weggegeven aan een uitlijning die je op die breedte toch niet als kolom leest. Op smal loopt het vlak dus gewoon van rand tot rand. 2. De stappenlijst. Het oude `.stap { padding: 0.9rem 1rem }` schoof de rijen 1rem naar binnen terwijl de scheidingslijnen én de paginakop op de buitenmarge bleven staan — de lijst stond zichtbaar uit de as. De verticale ruimte was het doel, de horizontale was een ongeluk. */ @media (max-width: 720px) { body { font-size: 16px; } /* Verouderd, maar blijft meelopen zolang de klassen bestaan. */ .veldgroep { padding: 1.25rem 1.15rem 1.4rem; } /* Kaart: krapper gezet, en de inspringing eraf. */ .veldrij { padding: 1.15rem 1.05rem 1.25rem; } .veldkop { gap: 0.65rem; } .veldnr { min-width: 1.2rem; } .veldrij .bestandsveld, .veldrij .tekstveld { margin-left: 0; width: 100%; } .veld-fout { margin-left: 0; } /* Een bestandsnaam is op deze breedte belangrijker dan een rechte onderrand: afkappen met een ellipsis verstopt juist het staartstuk (`...versie3.docx`) waaraan je ziet of je het goede bestand koos. Laat hem daarom over twee regels lopen in plaats van hem te verbergen. */ .bestandsnaam { white-space: normal; overflow: visible; overflow-wrap: anywhere; } .bestandsveld { align-items: flex-start; gap: 0.7rem; } .bestandsteken { margin-top: 0.1rem; } .bestandsactie { margin-top: 0.05rem; } /* Stappen: alleen de verticale ruimte krimpt, de as blijft staan. */ .stap { padding: 0.95rem 0.15rem; gap: 0.8rem; } .stap-rail { min-width: 0; gap: 0.55rem; } /* Werkbalk boven de fiche: knop onder de terugverwijzing in plaats van ernaast, zodat "Opslaan als PDF" niet op een halve regel eindigt. */ .fiche-werkbalk { gap: 0.75rem; } } /* Onder ~420px is er voor het stapnummer én het standlabel naast elkaar geen ruimte meer zonder dat de staptekst tot drie regels uitwaaiert. Het nummer gaat weg, niet het label: `01` herhaalt alleen de positie in de lijst (die een