/* ========================================================================== basis.css - de reset die het ouderthema leverde, nu van onszelf. WAAROM DIT BESTAAT. Op 2026-09-10 zijn de vier stijlbladen van Kadence uitgezet. Aanleiding: de opgeleverde HTML bevat nul Kadence-klassen, op geen enkele van de achttien pagina's. Dat klopte, en toch verschoof elke pagina een paar pixels. Het eerste wat in `global.min.css` staat is normalize.css v8.0.1, en dat werkt op element-selectors. "Geen klassen in gebruik" is dus niet hetzelfde als "dit blad doet niets". WAT HIER STAAT IS GEMETEN, NIET GEGOKT. `erika-stijlverschil.js` leest van elk element op de pagina de berekende stijl, hangt het Kadence-blad er dan vooraan bij en leest opnieuw. Alleen wat daadwerkelijk verschilde staat hieronder. Dat waren vier dingen: 1. `-webkit-text-size-adjust` op html. Raakt via overerving alle 948 elementen. Zonder dit blaast Safari op een telefoon in liggende stand de tekst op. 2. De knoppen in de navigatie vielen terug op Arial 13,3px. Zij hadden hun letter van de generieke knopregel van het ouderthema. 3. Diezelfde regel gaf ze hun binnenmarge, hun ronding en een doorzichtige achtergrond in plaats van de grijze knop van de browser. 4. Drie lijsten kregen hun inspringing van `ul,ol{margin:0 0 1.5em 1.5em}`. DE WAARDEN ZIJN LETTERLIJK OVERGENOMEN, ook waar ze vreemd ogen. `1.125rem` op een knop is een keuze van Kadence en niet van dit ontwerp, maar het doel van deze stap is nul zichtbaar verschil. Wie hier later opruimt: meet opnieuw. Kadence zette `color` en `background` op de knop met twee custom properties die na het uitzetten van hun eigen bladen niet meer bestonden. Een ongeldige var() maakt de eigenschap leeg: `color` erft dan (het is een erfelijke eigenschap) en `background` valt terug op doorzichtig. Vandaar dat het hier zo staat en niet met die variabelen. Laadt als eerste, vóór alle eigen bladen, want dat was ook de plek van de Kadence-bladen in de kop. Alles hieronder moet dus te overschrijven zijn. ========================================================================== */ /* normalize.css v8.0.1 (MIT) -- alleen de regels die hier iets deden. */ html{ -webkit-text-size-adjust:100% } /* De beeldreset. Hoorde bij het ouderthema en is hier onmisbaar geworden. ZO KWAM HIJ AAN HET LICHT. Bij het meten van de reset stonden er nog geen `width`/`height` op de beelden. Zolang die ontbreken doet `height:auto` niets, want auto is dan toch al de waarde; de meting zag daarom geen verschil en de regel bleef hier staan. Zodra de maten er wél op stonden -- de stap die het springen tijdens het scrollen moest verhelpen -- werd het logo in de kop ineens 65px breed in plaats van 95: de browser gebruikte het maatattribuut omdat er geen regel meer was die zei dat de hoogte automatisch is. Dat is de valkuil van een meting die één ding tegelijk verandert: een regel die vandaag niets doet, kan morgen het verschil maken. */ img{ display:block; height:auto; max-width:100% } main{ display:block; min-width:0 } a{ background-color:rgba(0,0,0,0) } b,strong{ font-weight:bold } dfn,cite,em,i{ font-style:italic } small{ font-size:80% } sub,sup{ font-size:75%;line-height:0;position:relative;vertical-align:baseline } sub{ bottom:-.25em } sup{ top:-.5em } hr{ box-sizing:content-box;height:0;overflow:visible;border:0 } button,input{ overflow:visible } button,select{ text-transform:none } button,[type=button],[type=reset],[type=submit]{ -webkit-appearance:button; appearance:button } textarea{ overflow:auto } /* De knop- en formulierregels van het ouderthema. */ button,input,optgroup,select,textarea{ font-family:inherit; font-size:100%; margin:0; } button{ display:inline-block; font-size:1.125rem; line-height:1.6; color:inherit; background:transparent; border:0; border-radius:3px; padding:.4em 1em; cursor:pointer; text-decoration:none; } /* De invoervelden. Zelfde verhaal als de knop: dit is wat het ouderthema deed, letterlijk. Kadence zet hier `border:1px solid var(--global-gray-400)` en `background:var(--global-palette9)`; die twee variabelen kwamen uit een blad dat wij ook hebben uitgezet, dus de eigenschap werd leeg en viel terug op de beginwaarde: geen rand, doorzichtige achtergrond. Zo stond het formulier op /contact/ er dus bij, en zo hoort het er nu weer bij te staan. OPGERUIMD MOET HET NOG WORDEN. Dat een formulier zijn vorm krijgt van een ouderthema dat we niet meer inladen, is precies de losse eindjes die deze stap opruimt. Maar de opdracht van vandaag is snelheid zonder zichtbaar verschil, dus dit is een getrouwe kopie en geen herontwerp. Wie de velden later bewust vormgeeft: doe dat in het formulierblad en haal deze regel dan weg. */ input[type=text],input[type=email],input[type=tel],input[type=url], input[type=password],input[type=search],input[type=number],input[type=range], input[type=date],input[type=month],input[type=week],input[type=time], input[type=datetime],input[type=datetime-local],input[type=color],textarea{ -webkit-appearance:none; appearance:none; color:inherit; background:transparent; border:0; border-radius:3px; padding:.4em .5em; max-width:100%; } select{ outline:0 } /* -------------------------------------------------------------------------- DE BASISTYPOGRAFIE. Dit is het deel dat het langst verborgen bleef. Kadence zet zijn eigen grondmaten niet in een bestand maar in een