/* UPgolf gastflow, opmaak. Demo in aanbouw, geen live product.
Bron van de huisstijl: up-tokens.css, in index.html geladen VOOR dit bestand.
Regel: hier staan geen merkkleuren als hexcode. Alles komt uit een --up-token.
Er zijn drie roods en drie aqua's van UP in omloop die een teken verschillen,
dus overtypen is precies hoe die varianten zijn ontstaan.
Naslag: kennis/UP-STIJLGIDS-20260810.md en kennis/UP-VOORKANTEN-AI-TELLS-20260810.md */
/* Nabouw Daniels lay-out, ronde 3, 24 augustus 2026 (opdracht van Roy, letterlijk: "1 op 1
overnemen"). Bron: klanten/up-events/daniel-layout-20260821/, drie screenshots (homepage,
tee sheet, admin login). Alleen vorm, geen scherm/route/tekst gewijzigd, behalve waar hoofdletters
de vorm zelf zijn (nav-items).
Lettertype voor zware, smalle titels: Roboto Condensed. Gekozen omdat het dezelfde familie is als
de body (Roboto, via up-tokens.css) en dus geen stijlbreuk geeft, en omdat Daniels titels zwaar
EN smal ogen (condensed), wat kale Roboto op dat gewicht niet doet. Van Google Fonts, zelfde bron
als de body. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700;900&display=swap');
:root{
/* De bestaande eigen namen blijven staan en worden uit de tokens gevuld. */
--navy:var(--up-navy);
--red:var(--up-brand-rood);
--aqua:var(--up-aqua);
--paper:var(--up-bg-licht);
--lijn:var(--up-border);
--grijs:var(--up-tekst-sub);
--groen:var(--up-badge-def-tekst);
/* Twee waarden zonder token, bewust lokaal en met reden:
--wit is gewoon wit en hoort niet in een merkpalet.
--aqua-donker bestaat niet in de tokens, maar de merkaqua haalt op wit maar
2,9:1 en is dus onleesbaar als tekstkleur. Deze donkere variant haalt 4,6:1.
Openstaande vraag aan de bouwer van het systeem: zet een leesbare aqua in de tokenfile. */
--wit:#fff;
--aqua-donker:#14828f;
/* Derde lokale waarde, om dezelfde reden als de aqua hierboven en met dezelfde afspraak:
hij vervalt zodra de tokenfile zoiets krijgt.
De eigenaar wil de hoofdknop in de balk rood. Op het merkrood haalt witte tekst 3,44:1 en
dat is onder de 4,5:1 voor gewone tekst, en precies daarom stapten wij eerder over op navy.
Deze tint is het merkrood met alle drie de kanalen evenredig geschaald naar 84 procent, dus
de verhouding tussen rood, groen en blauw blijft gelijk en daarmee de warme koraal-inslag
van UP. Wit haalt hier 4,72:1, dus met marge boven de norm.
Waarom niet donkerder maken via de lichtheid in HSL: dan schuift het naar puur signaalrood
en dat leest niet meer als UP maar als een waarschuwing.
Waarom niet het token --up-fout, dat wel donker genoeg is: die kleur betekent in dit blad
al "er ging iets mis", en dezelfde kleur voor "ga verder" en "fout" maakt kleur betekenisloos.
Geen voorbeeldkleuren als hexcode in deze uitleg, want dan slaat een controle op het aantal
hexcodes in dit bestand aan op tekst die niets kleurt.
Het blijft bij deze ene nieuwe waarde: de hoverstand wordt eruit gerekend met color-mix in
plaats van als tweede hexcode overgetypt, zodat er maar op een plek een kleur staat. */
--rood-knop:#D53741;
--rood-knop-hover:color-mix(in srgb, var(--rood-knop) 92%, #000);
/* Drie hoekstralen, uit de tokens, en niet meer.
Knoppen en invoer 8, kaarten en vlakken 12, chips en pillen 20.
Ronde vormen (de vinkjes) staan op 50% en zijn een vorm, geen stap in deze schaal. */
--r-knop:var(--up-radius-button);
--r-kaart:var(--up-radius-card);
--r-pil:var(--up-radius-pill);
/* Een-regel-terugdraaiknop, ronde 4, 24 augustus 2026: bepaalt of de blokkoppen (.kaart h2)
in hoofdletters staan. Staat nu op "uppercase" (Daniels vorm, besluit van Roy via
hoofd-activiteiten), gaat in tegen de leesbaarheidsfix van 11 augustus 2026 die hoofdletters
daar juist wegnam. Verander ALLEEN dit ene woord naar "none" om terug te draaien naar de
stand van 11 augustus; niets anders in dit bestand hoeft dan aangepast te worden. */
--kop-hoofdletters:uppercase;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* De basisgrootte komt uit de tokenfile (--up-font-base, 14px) en wordt hier NIET overschreven.
Er stond eerder 15px, met als reden dat dit een gastflow op een telefoon is en geen baliescherm.
Teruggedraaid op 11 augustus 2026: de tokenfile is de bron, en dat is de regel die wij zelf
hebben vastgesteld nadat bleek dat er drie UP-roods in omloop waren die een teken schelen.
Loopt de leesbaarheid ergens tegen een grens aan, los dat dan op met gewicht of ruimte,
niet met een afwijkende maat. */
body{background:var(--paper); color:var(--up-tekst);
/* De tweede waarde is geen tweede lettertype, het is dezelfde Roboto-stack als in de
tokenfile, voor het geval de tokenfile niet aankomt. Kleuren krijgen bewust GEEN
terugvalwaarde: een gemiste tokenfile moet zichtbaar zijn, niet stilletjes met
overgetypte hexcodes worden gemaskeerd. */
font-family:var(--up-font, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
font-size:var(--up-font-base); line-height:var(--up-lijnhoogte); -webkit-font-smoothing:antialiased}
button{font-family:inherit; font-size:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select{font-family:inherit; font-size:16px}
/* Toetsenbord moet altijd zichtbaar zijn waar de aandacht is. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
outline:2px solid var(--aqua); outline-offset:2px}
/* ---------- hero ---------- */
/* Nabouw van de balievormtaal, 24 augustus 2026 (klanten/up-events/upgolf-balie-nieuw/stijl.css,
.top/.top-in/.brand). De balie is de bron en is niet aangepast; alleen deze site is gewijzigd.
Schermindeling en tekst blijven exact zoals ze waren, dit is uitsluitend vormgeving.
Verticale opbouw ongewijzigd: nog steeds een en dezelfde navy hero-doos met de kop, de badge,
de knoppenrij, de h1 en de kruislink erin en het logo-watermerk erachter (::after, verderop
ongewijzigd). Wat wel verandert: de dunne rode lijn onderaan de hero, zoals de balie die op
zijn .top heeft, en de kleuren van het merk (zie .merk hieronder). Geen sticky positionering
toegevoegd: de balie is sticky omdat hij een lange lijst bedient waar je doorheen scrolt, deze
pagina is een oplopende flow met een balk onderaan die al zijn eigen sticky/fixed gedrag heeft.
Sticky zou dus een gedragswijziging zijn die niet gevraagd is, geen vormwijziging. */
/* Herofoto, ronde 4, 24 augustus 2026, op verzoek van Roy ("die foto kunnen we denk ik wel ergens
vandaan toveren online"), aangeleverd via de manager: hero-clubhuis-weesp.jpg, van de eigen
website van UP (upevents.nl), zie HERKOMST-hero-fotos.md voor de bron en de voorwaarde voor
later (toestemming van UP nodig zodra dit ooit naar een publiek adres gaat). Dezelfde foto voor
golf EN footgolf: schermen.jsx deelt een en dezelfde .hero voor beide profielen, en Daniels
eigen ontwerp toont ook overal dezelfde clubhuisfoto, ongeacht welk scherm.
Donkere laag: een lineair verloop, subtiel gehouden zoals gevraagd (van 50% naar 78% zwart-navy,
niet een vlak dekkend vlak) zodat de foto zelf herkenbaar blijft maar de tekst er toch op leest.
Het CONTRAST is gemeten, niet aangenomen: zie mijn eindantwoord voor de exacte cijfers per
tekstdeel, op 1280 en op 390 breed, met de WCAG-uitkomst erbij. */
/* Onderpadding vergroot, ronde 7, 24 augustus 2026, om dezelfde reden als bij .hero h1 hierboven:
op Daniels screenshot loopt de foto/donkere laag door van net onder de navy navigatiebalk
(y=120, na de rode lijn) tot waar hij volledig overgaat in de effen achtergrondkleur van de
pagina eronder (y=590, gemeten op een kolom buiten de kaart om de kaartrand niet mee te tellen).
Dat is 470px op een schermhoogte van 736px NA aftrek van de browserbalk-melding bovenin (48px
van de 784px totaal, expliciet niet meegeteld): 470/736 = 63,9% van de zichtbare hoogte. Ter
vergelijking: het overlappende witte kaartblok begint al bij y=508 (388px vanaf het begin van
de foto, 52,7%), maar dat is waar de kaart OVER de hero heen valt, niet waar de foto zelf stopt;
ik gebruik het foto-uiteinde omdat dat de daadwerkelijk meetbare grens is, de kaartrand is een
interpretatie. clamp(74px, 22vh, 240px) i.p.v. een vaste px-waarde, want vh is de eenheid die
hier het gevraagde "aandeel van de beeldhoogte" het meest direct vertaalt (en dit bestand
gebruikt vh al elders, zie .blad max-height:92vh/86vh), met een minimum gelijk aan de oude 74px
zodat een zeer lage viewport (bijv. een breed en plat browservenster) niet krimpt onder wat er
al stond, en een maximum van 240px zodat een zeer hoge viewport de hero niet ongebreideld laat
doorgroeien. SPANNING gemeld aan Roy in mijn eindantwoord: een hogere hero duwt "BOEK JE
RONDJE" verder naar beneden op het scherm; ik kies hier bewust de kant van Daniel (expliciete
instructie), maar de vindbaarheid van het boekingsblok is dus wat ik ervoor opgeef. */
.hero{background:
linear-gradient(180deg, transparent 0%, transparent 78%, var(--paper) 100%),
linear-gradient(180deg, rgba(0,20,35,.50) 0%, rgba(0,20,35,.64) 45%, rgba(0,20,35,.80) 100%),
url("hero-clubhuis-weesp.jpg") center/cover no-repeat;
/* 18 september 2026: de onderrand was clamp(74px, 22vh, 240px) en op een breed scherm kwam dat
uit op 187px, tegenover 22px boven. Daardoor hing het tekstblok laag in de foto met een smalle
strook erboven en een brede eronder, en las het als een losse band. De onderrand gaat omlaag
zodat het blok omhoog schuift en aansluit op de menubalk; de bovenrand blijft klein. */
color:var(--wit); padding:14px 20px clamp(48px, 13vh, 150px); position:relative; overflow:hidden}
/* Vervaging naar de paginakleur onderaan de hero, ronde 7b, 24 augustus 2026, op melding uit ronde 7:
Daniels eigen screenshot (01-homepage-boek-je-rondje.jpeg) laat zijn foto zelf vervagen naar wit
voordat de boekingskaart begint, dat is een gradient in ZIJN ontwerp en niet alleen de kaart die
overlapt. Zelf gemeten met een pixelscan (Python/Pillow) op twee kolommen (x=30 en x=1500, buiten
tekst en kaart om) van Daniels afbeelding: de vervaging is geen abrupte knip maar een gladde,
monotone overgang die op BEIDE kolommen bij dezelfde y-waarden begint en eindigt, onafhankelijk van
wat er in de foto onder zit (op x=30 loopt hij over grasgroen, op x=1500 over een donkere
tent/boomsilhouet) -- dat is het bewijs dat het een laag is en geen natuurlijk lichteffect in de
foto zelf. Start van de vervaging (absolute y op de 1600x784 afbeelding): y=486. Einde/volledig
effen: y=589, daarna constant (250,251,253) tot de rand van de afbeelding. Transitiebreedte dus
103px. Tegen Daniels hero (die zelf loopt van y=120 tot y=590, vastgesteld in ronde 7): relatief
vanaf 366px in een hero van 470px hoog, dat is 77,9% -> 100%. Hier afgerond op 78% -> 100%, dus
ruim 20% van de herohoogte. Kleurdoel: het gemeten plateau (250,251,253, vrijwel zuiver wit) ligt
het dichtst bij --paper (--up-bg-licht, #F5F8FA), de kleur van de PAGINA onder de hero (body{
background:var(--paper)}), dus daar wordt naartoe vervaagd in plaats van naar een losse #fff, zodat
er geen naad ontstaat tussen het einde van de hero en het begin van de pagina eronder.
Layering: deze gradient staat als EERSTE laag (bovenop de bestaande donkere leesbaarheidslaag en de
foto), transparant tot 78% zodat hij de rest van de hero (waar de titel/slogan/functionele regel
staan, rond 30-55% van de herohoogte) volledig ongemoeid laat, en loopt pas in het onderste stuk
over in effen paginakleur. Contrast van titel/slogan/regel opnieuw gemeten na deze wijziging (zie
BOUWLOGBOEK.md, ronde 7b): geen van de tekstelementen ligt in de vervagingszone. */
/* Header losgemaakt van de hero, ronde 3, 24 augustus 2026: Daniels nabouw toont een aparte navy
balk (het logo, de nav, MIJN UP) met een dunne rode lijn eronder, en pas daarna begint de rest
van de hero. Bij ons was de header het bovenste stukje van dezelfde navy doos als de titel en
had de rode lijn onderaan de HELE hero (dus onder de tekst, niet onder de balk). Opgelost met
negatieve marges op .hero-top zelf: die trekken hem terug tot de rand van .hero (dat heeft
padding:22px 20px), zodat hij een volle-breedte balk wordt binnen dezelfde navy .hero-doos, met
zijn EIGEN rode onderlijn. Geen nieuwe wrapper of DOM-verandering nodig, dus geen ingrijpende
jsx-wijziging: de vorm gaat voor, zoals gevraagd. De rode lijn stond eerder op .hero zelf
(hierboven, nu weg): dat gaf op een pagina zonder een echte hero-foto (deze site heeft alleen de
navy vlakte met watermerk) een dubbele rode lijn als hij hier ook was blijven staan.
.hero-in is zelf max-width:720px en gecentreerd; een gewone negatieve marge van -20px trekt
.hero-top dan alleen tot de rand van DIE 720px-kolom, niet tot de rand van het browservenster,
en op een breed scherm zou de rode lijn dan los in het midden zweven met navy eromheen in
plaats van van rand tot rand te lopen zoals bij Daniel. Opgelost met de gangbare "full bleed
binnen een gecentreerde kolom"-truc: margin calc(-50vw + 50%) breekt uit tot de vensterrand,
en dezelfde afstand komt terug als padding zodat de INHOUD (logo, nav, MIJN UP) weer precies
even ver van de rand staat als de rest van de hero-inhoud eronder (20px, .hero's eigen
padding). background:var(--navy) is HIER, sinds ronde 4, wel expliciet nodig (eerder erfde
.hero-top de kleur gewoon door transparantie van de effen navy .hero; nu .hero een foto
draagt, moet de header-balk zelf ondoorzichtig navy blijven, anders schijnt de foto er ook
achter de nav en het logo doorheen). */
.hero-top{margin:-22px calc(-50vw + 50%) 20px; padding:16px calc(50vw - 50% + 20px);
background:var(--navy); border-bottom:3px solid var(--red);
display:flex; align-items:center; flex-wrap:wrap; gap:20px 20px}
/* Het UP-watermerk (de grote, halfdoorzichtige pijl) is VERVALLEN, ronde 4, 24 augustus 2026.
Eigen oordeel (dit was uitdrukkelijk aan mij gelaten): met een echte foto op de achtergrond
oogde de vage pijlvorm er als een render-fout overheen, niet als merk-decoratie. Hij was bedoeld
als enige visuele interesse op een vlak navy vlak; die rol vervalt zodra er een foto staat. Het
merk zelf blijft ruim voldoende aanwezig via het rode "UP" in de header-lockup. Nam ook de
footgolf-kleuroverride van dit element weg (hieronder stond `body.sport-footgolf .hero::after`),
want die stuurde alleen de kleur van een element dat nu niet meer bestaat. */
/* text-align:center TOEGEVOEGD, ronde 6, 24 augustus 2026, op bevinding van de anti-ai-poort
(POORT-antiai-daniel-layout-20260824-ronde5.md, deel 3): bij Daniel staat het hele hero-blok
(knop, titel, ondertitel, streepjes) gecentreerd op de pagina, bij ons stond het links uitgelijnd
omdat .hero-in wel als CONTAINER gecentreerd is (max-width+margin:0 auto) maar de tekst-elementen
daarbinnen gewone block-elementen zijn zonder eigen centrering, en dus tegen de linkerrand van
die (bijna volle-breedte) container vielen. De header (.hero-top, met de nav en het logo) staat
BUITEN .hero-in en blijft dus terecht links uitgelijnd zoals bij Daniel; alleen de hero-tekst
verandert. .kruislink ("Liever footgolf?"/"Liever golf?") centreert hierdoor mee: Daniel heeft
dit element niet in zijn ontwerp, dus er is geen tegenstrijdig signaal om het juist links te
houden, en het hele hero-blok als één gecentreerde eenheid oogt dichter bij Daniels compositie
dan een element dat als enige weer naar links springt. */
.hero-in{max-width:720px; margin:0 auto; position:relative; z-index:1; text-align:center}
/* De oude .hero-top-regel (display:flex, gap:12px) is samengevoegd in de nieuwe regel hierboven,
bij de header-splitsing. Twee regels voor dezelfde klasse was verwarrend en de gap moest naar
20px om ruimte te maken voor de nav ertussen. */
/* Logo-lockup herbouwd, ronde 4, 24 augustus 2026, op aanwijzing van hoofd-activiteiten: het oude
eenregelige "UPgolf" was geen nabouw van Daniels lockup, alleen een kleurwissel. Daniels lockup
(op alle drie zijn screenshots gelijk) is: een groot rood "UP", een dunne verticale scheidingslijn,
en rechts daarvan twee regels: "GOLF WEESP" wit/vet en daaronder "PREMIUM BOOKING" klein/rood met
ruime letterafstand. Zelf gemeten met een pixelcrop van screenshot 01 (kolom-thresholding op
rood/wit binnen de kopregel, gecontroleerd tegen een vergrote crop met rasterlijnen): UP-hoogte
circa 43px, "GOLF WEESP"-hoogte circa 17px, "PREMIUM BOOKING"-hoogte circa 10px, dus ruwweg
4,3 : 1,7 : 1. Op onze schaal (basislettergrootte 14px, oude .merk stond op 19px) vertaalt dat
naar 32 / 13 / 9px; de onderste regel is iets ruimer gehouden dan de kale verhouding (die zou op
ravel_bij 32px UP ongeveer 7,4px geven) omdat 7-8px in hoofdletters met brede letterafstand op een
telefoon te klein leest.
LET OP, dit voegt twee LETTERLIJKE tekststukken toe die nergens in deze codebase bestonden:
"WEESP" en "PREMIUM BOOKING". Dit is GEEN eigen invulling: hoofd-activiteiten gaf deze exacte
tekst expliciet door namens Roy ("1 op 1 overnemen, Daniel is de baas"). "WEESP" is inhoudelijk
niet verzonnen: de golfbaan heet in de database en in eerdere metingen al "Golfbaan Weesp" (zie
SPORTEN.golf in data.js en meerdere BOUWLOGBOEK-secties). Dezelfde lockuptekst staat nu op alle
drie de pagina's, ook footgolf.html: dit is het merk van de SITE, geen sportspecifieke tekst (die
staat al apart in het sportmerkje/de badge), en Daniels drie screenshots tonen ook overal dezelfde
lockuptekst, ongeacht welk scherm. */
.merk{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.merk-up{font-weight:900; font-size:32px; line-height:1; letter-spacing:-.02em; color:var(--red)}
.merk-scheiding{width:1px; align-self:stretch; min-height:32px; background:rgba(255,255,255,.35)}
.merk-tekst{display:flex; flex-direction:column; gap:3px; line-height:1}
.merk-naam{font-weight:900; font-size:15px; letter-spacing:-.01em; color:var(--wit); text-transform:uppercase}
.merk-sub{font-weight:700; font-size:9px; letter-spacing:.14em; color:var(--red); text-transform:uppercase}
/* Op kaart.html staat de balk niet op navy hero-achtergrond maar op de eigen navy kop-balk
(.wrap.smal .balk), en daar is .merk een : dezelfde valkuil als eerder (een link erft zijn
kleur niet). color:inherit hierboven plus text-decoration:none dekt dat nu voor de wrapper zelf;
.merk-naam en .merk-scheiding hebben toch hun EIGEN expliciete kleur (wit/lichtgrijs) nodig, want
die staat los van "erven" uberhaupt, dat is de bedoelde kleur op elke navy achtergrond in dit
bestand. .merk-up en .merk-sub zijn hier bewust NIET afhankelijk van de navy achtergrond: rood
oogt op elke ondergrond in dit blad hetzelfde. */
.login-knop{margin-left:auto; font-size:14px; font-weight:400; color:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.34); padding:7px 14px; border-radius:var(--r-knop)}
.login-knop:hover{background:rgba(255,255,255,.12)}
/* MIJN UP: toegevoegd 22 augustus 2026. header-acties duwt de knop(pen) naar rechts in de
navy header, zoals login-knop dat eerder alleen deed. login-knop staat nu binnen deze
groep en houdt zijn eigen margin-left:auto; die werkt hier niet meer, maar wegnemen was
een wijziging aan werkende code zonder noodzaak, dus die regel is met opzet ongemoeid
gelaten. De rode knop is Daniels MIJN UP-knop uit zijn nabouw (screenshot 01/02): rood,
rechts in de navy header. */
/* Nav toegevoegd, ronde 3, 24 augustus 2026: Daniels balk toont PRODUCTEN/TEE SHEET/ADMIN/TECHNIEK,
waarvan wij alleen echt bestaande, werkende gastschermen hebben. Besluit van de opdrachtgever
(hoofd-activiteiten, niet zelf ingevuld): alleen GOLF, FOOTGOLF en KAART KOPEN, geen dode links.
Vorm 1:1 van Daniel over: kleine vette hoofdletters, ruime letterafstand, rechts uitgelijnd vóór
de rode knop. Het actieve item krijgt een kader, zoals Daniel dat bij ADMIN doet in screenshot
03 (in plaats van een gevulde/andere kleur, die verschijnt pas bij hover-status hieronder). */
.hoofdnav{margin-left:auto; display:flex; align-items:center; gap:20px}
.hoofdnav a{color:var(--wit); font-size:12px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; text-decoration:none; padding:6px 10px; border-radius:3px;
border:1px solid transparent}
.hoofdnav a:hover{color:rgba(255,255,255,.75)}
.hoofdnav a.aan{border-color:rgba(255,255,255,.7)}
.header-acties{margin-left:0; display:flex; align-items:center; gap:8px}
/* Overloop-fix, ronde 3 (nagemeten op 390 breed): merk + drie nav-items + de MIJN UP-knop passen
niet naast elkaar op een telefoon (samen ruim 490px, tegen 350px beschikbaar binnen de
padding). Zonder wrap liep de MIJN UP-knop letterlijk het scherm af (nagemeten met een
screenshot op 390, zie mijn eindantwoord). .hero-top kreeg hierboven al flex-wrap:wrap; deze
regel duwt de nav op een smal scherm naar een VOLLE tweede regel, onder de merknaam en de
knop, in plaats van dat hij half van het scherm afvalt of de knop wegduwt. Geen nieuw
hamburgermenu of jsx-wijziging, puur een breakpoint op de bestaande structuur. */
@media (max-width:600px){
.hoofdnav{order:3; flex-basis:100%; margin-left:0; margin-top:2px; gap:14px}
/* header-acties (de MIJN UP-knop) moet op rij 1 rechts van de merknaam blijven staan nu de
nav naar rij 2 is verhuisd; zonder dit valt hij terug naar links, meteen naast "UPgolf". */
.header-acties{margin-left:auto}
}
/* Rondheid gecorrigeerd, ronde 4, 24 augustus 2026: eerder een volle pil (border-radius var(--r-pil),
20px). Zelf gemeten op een vergrote pixelcrop van Daniels MIJN UP-knop, op zowel screenshot 01 als
03: de hoeken zijn daar VOLLEDIG scherp, geen afronding zichtbaar op geen van beide schermen.
border-radius dus naar 0. text-decoration:none en display:inline-block toegevoegd: deze klasse
staat nu ook op een (kaart.html, zie kaartkopen.jsx), en die had zonder deze twee regels een
onderstreping en zou geen padding-doos vormen. */
.mijnup-knop{background:var(--red); color:var(--wit); font-size:14px; font-weight:700;
border:none; padding:7px 16px; border-radius:0; cursor:pointer; font-family:inherit;
text-decoration:none; display:inline-block}
.mijnup-knop:hover{filter:brightness(1.08)}
/* Typografisch contrast komt uit de gewichten die de tokens laden: 900 voor de kop,
400 voor de tekst eronder. Niet overal halfvet. */
/* font-family hier is Roboto Condensed, zie de @import bovenaan dit bestand: Daniels titel is
zwaar EN smal, en dat "smal" doet kale Roboto niet op geen enkel gewicht. Val terug op de
gewone var(--up-font)-stack als Condensed om wat voor reden dan ook niet laadt. */
/* CTA-knop boven de titel, ronde 4, 24 augustus 2026, nabouw van Daniels rode "BOEK JE STARTTIJD
BIJ UP GOLF"-knop. Scherpe hoeken (zelf gemeten op een pixelcrop, zie de toelichting bij
.mijnup-knop), rood, witte hoofdletters, ruime letterafstand. Zie schermen.jsx voor de
toelichting over de tekst (hergebruik van PROFIEL.kop, gemeld als open vraag) en het scrollgedrag.
Achtergrond is BEWUST var(--rood-knop) en niet het kale var(--red): eerst op het merkrood gezet
en zelf gemeten (wit op var(--red) haalt maar 3,44:1), en deze tekst is met 13px vet geen "grote
tekst" volgens WCAG (dat begint pas bij 18,66px vet), dus geldt de norm van 4,5:1 en niet 3:1.
var(--rood-knop) is precies de gedempte roodtint die elders in dit bestand al voor exact dezelfde
reden gebruikt wordt (zie de toelichting bij --rood-knop bovenaan): wit daarop haalt 4,72:1. */
.hero-cta{display:inline-block; background:var(--rood-knop); color:var(--wit); font-weight:700;
font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:11px 20px;
border:none; border-radius:0; margin-top:4px; font-family:inherit}
.hero-cta:hover{background:var(--rood-knop-hover)}
/* text-transform toegevoegd, ronde 5, 24 augustus 2026: Daniels titel ("UP GOLF") staat in
hoofdletters, net als zijn blokkoppen. Zelfde omzetbare regel als .kaart h2 hieronder gebruikt
(--kop-hoofdletters), dus ook deze titel gaat in één beweging mee terug naar gewone tekst als
Roy de leesbaarheidsfix van 11 augustus 2026 alsnog wil laten winnen: het ENE woord
"uppercase" -> "none" in de :root-regel bovenaan dit bestand raakt dan zowel de blokkoppen als
deze hero-titel, niets anders in dit bestand hoeft aangepast. */
/* Titelmaat herzien, ronde 7, 24 augustus 2026, op basis van een pixelmeting op Daniels eigen
screenshot (klanten/up-events/daniel-layout-20260821/01-homepage-boek-je-rondje.jpeg, 1600px
breed, browserbalk met foutopsporingsmelding bovenin NIET meegerekend). "UP GOLF" heeft daar
een kapitaalhoogte van 78-79px (wit "UP" 283-360, rood "GOLF" 282-360, beide op een consistente
volle rij, geen antialiasing-marge nodig gebleken bij een losser kleurdrempel). Roboto Condensed
deelt zijn metrics met Roboto: sCapHeight 1456 op unitsPerEm 2048, dus cap-hoogte/em = 0.7109.
Lettergrootte = 78,5 / 0,7109 = ongeveer 110,4px, oftewel 110,4 / 1600 = 6,9% van de
afbeeldingsbreedte. Bij 1280px venster komt dat uit op ongeveer 88px, tegen de oude 44px
(precies een factor 2). Dit wijkt AF van de schatting van de manager (circa 95px/5,9%/75px op
1280): mijn meting geeft een grotere kapitaalhoogte (78-79px, niet ~70px) en dus een grotere
afgeleide maat. De 30px-ondergrens op 390 breed blijft bewust ongewijzigd: een letterlijke
6,9vw zou op 390 juist KLEINER (27px) uitvallen dan de huidige 30px, wat averechts zou werken
op Daniels bedoeling dat de titel domineert. Bovengrens op 92px gezet (net boven de 88px die op
1280 daadwerkelijk gehaald wordt) zodat een breder venster dan 1280 niet ongebreideld doorgroeit. */
.hero h1{font-family:'Roboto Condensed', var(--up-font); font-size:clamp(30px, 6.9vw, 92px); font-weight:900;
letter-spacing:-.01em; margin:16px 0 6px; line-height:1.05; text-transform:var(--kop-hoofdletters)}
/* .hero-slogan (was .hero p), ronde 5, 24 augustus 2026: hernoemd van een kale `.hero p`-regel naar
een eigen klasse, want deze hero heeft sinds deze ronde TWEE alinea's met een verschillende rol
(de merkslogan hier, en de kleinere functionele regel hieronder in .hero-info) en een generieke
`p`-selector zou ze allebei hetzelfde behandelen. Verder ONGEWIJZIGD ten opzichte van ronde 4:
hoofdletters over twee regels, max-width:36ch zorgt voor de regelbreuk op de meeste
schermbreedtes, precies zoals Daniels "DE MEEST INFORMELE GOLFBAAN VAN AMSTERDAM & WEESP". */
/* margin:0 auto TOEGEVOEGD, ronde 6, 24 augustus 2026: text-align:center op .hero-in (hierboven)
centreert alleen TEKST binnen een element, niet het blok-element zelf. Deze alinea heeft een
eigen max-width in ch, dus zonder margin:0 auto bleef hij als blok tegen de linkerkant van
.hero-in staan (met alleen zijn eigen, toch al maar één-regel-brede tekst gecentreerd erin, wat
optisch bijna niets deed). Met margin:0 auto centreert de hele kolom, zoals bij Daniel. */
/* 18 september 2026, gemeten op de live site: deze stond op rgba(255,255,255,.78) en viel weg
tegen de lichte stukken van de foto. Nu vol wit, met een zachte donkere schaduw eronder in plaats
van de foto donkerder maken: de foto blijft zo zichtbaar en de tekst leest overal. */
.hero-slogan{margin:0 auto; font-weight:400; color:#fff; font-size:var(--up-font-base); max-width:36ch;
text-transform:uppercase; letter-spacing:.01em; text-shadow:0 1px 3px rgba(0,20,35,.55)}
/* .hero-info, nieuw, ronde 5, 24 augustus 2026: de functionele regel die eerder de enige onderkop
was ("Golfbaan Weesp, kies een dag en een tijd, de rest regelen we aan de balie."), nu klein en
gedempt onder de nieuwe slogan gezet zodat de twee elkaar niet beconcurreren. BEWUST geen
hoofdletters (dit is een instructie, geen merkzin) en een kleinere maat dan .hero-slogan.
margin:0 auto TOEGEVOEGD, ronde 6, 24 augustus 2026, zelfde reden als bij .hero-slogan hierboven:
dit is ook een blok-element met een eigen max-width, dat anders links tegen .hero-in bleef staan. */
/* Zelfde reden, 18 september 2026: stond op .62 en was daarmee de zwakste tekst op de pagina.
Nu .92 in plaats van vol wit, zodat hij nog steeds ONDER de slogan staat in de rangorde, maar
wel leesbaar is. Zelfde schaduw. */
.hero-info{margin:8px auto 0; font-weight:400; color:rgba(255,255,255,.92); font-size:12px; max-width:38ch;
text-shadow:0 1px 3px rgba(0,20,35,.55)}
/* Carrousel-indicator, ronde 5, 24 augustus 2026, nabouw van Daniels drie liggende streepjes onder
de hero-titel (screenshot 01). Puur decoratief, geen enkele interactie: dit scherm heeft één
hero-foto en wordt geen carrousel, zie de toelichting in schermen.jsx. De kleuren volgen Daniels
screenshot (rood, aqua, lichtgrijs), zelf afgelezen op een pixelcrop.
justify-content:center TOEGEVOEGD, ronde 6, 24 augustus 2026: dit is een flex-container, dus
text-align:center op de ouder heeft er geen grip op (flex-items volgen justify-content, niet
text-align). Zonder deze regel bleven de drie streepjes als groep links staan, ook al centreerde
de rest van de hero al mee. margin:0 auto liet ik BEWUST weg naast justify-content: het element
zelf is al full-width binnen zijn gecentreerde ouder (geen eigen max-width), dus margin:auto zou
niets doen; justify-content is hier de regel die het werk doet. */
.hero-indicator{display:flex; gap:8px; margin-top:20px; justify-content:center}
.hero-indicator span{width:26px; height:4px; border-radius:2px; background:rgba(255,255,255,.35)}
.hero-indicator span:nth-child(1){background:var(--red)}
.hero-indicator span:nth-child(2){background:var(--aqua)}
.welkom{margin:16px 0 4px; font-size:14px; font-weight:400; color:rgba(255,255,255,.9)}
.welkom b{color:var(--wit); font-weight:700}
/* ---------- tweede ingang: footgolf ----------
Het merk in de kop blijft UPgolf, want dat is het systeem waar de gast in zit. Welke sport hij
boekt staat als merkje ernaast en voluit in de kop eronder. Het merkje is aqua met navy tekst:
die combinatie haalt 5,0:1 en is dus ook als losse pil leesbaar, terwijl wit op aqua maar 2,9:1
haalt (dezelfde reden waarom de tijdtegels navy zijn en geen aqua).
Het woord is Footgolf en niet voetgolf. Dat is geen smaak: UP Events schrijft het zelf zo op
upevents.nl/evenement/footgolf/, en dat is de pagina waar de gast vandaan komt. */
.sportbadge{background:var(--aqua); color:var(--navy); font-weight:700; font-size:13px;
letter-spacing:.01em; padding:5px 13px; border-radius:var(--r-pil)}
/* De vier feiten onder de kop. Geen opsommingstekens, want het is een rij en geen lijst om te
lezen; de scheiding zit in de ruimte en de omlijning. Alle vier komen letterlijk van de
footgolfpagina van UP Events zelf, zie de toelichting in data.js. */
/* justify-content:center TOEGEVOEGD, ronde 6b, 24 augustus 2026: .feiten is een flex-container
(net als .hero-indicator hierboven) en spant zelf al de volle breedte van .hero-in, dus
text-align of margin:auto op het element zelf doet niets. justify-content is bij een
flex-container het equivalent van text-align op een blok: het centreert de items als groep
binnen de rij, zonder de items zelf of hun omlijning (de pil-vorm van elk feit) te vervormen. */
.feiten{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; justify-content:center}
.feiten li{font-size:13px; font-weight:500; color:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.30); border-radius:var(--r-pil); padding:5px 12px}
/* De link naar de andere ingang. Een gast die golf zocht en op footgolf uitkomt (of andersom)
moet niet terug hoeven naar de site van UP.
Was een onderstreepte tekstregel van 14px op 86 procent wit, en die viel weg onder het rijtje
feiten: hij las als een voetnoot in plaats van als een weg naar de andere sport. Nu een omlijnde
pil van 16px met een pijl erachter, dus hij leest als iets waar je op tikt.
BEWUST GEEN gevulde merkknop: de rode knop verderop is de hoofdroute (kiezen en boeken), en twee
gevulde knoppen naast elkaar laten een gast twijfelen over waar hij moet zijn. Dit blijft een
zijdeur, alleen een zijdeur die je ziet. Hoogte 48 omdat je er op een telefoon met een duim op
tikt (de norm is 44). */
/* Rondheid gecorrigeerd, ronde 4, 24 augustus 2026: was een volle pil. Ik heb op Daniels drie
screenshots gezocht naar een knop met die rondheid en niets gevonden: MIJN UP en de rode
hero-CTA ("BOEK JE STARTTIJD BIJ UP GOLF") zijn allebei volledig scherp, zelf gemeten op een
vergrote pixelcrop. Geen enkele knop bij Daniel is een pil. border-radius dus ook hier naar 0. */
.kruislink{display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:18px;
padding:0 18px; border-radius:0;
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.42);
color:var(--wit); font-size:16px; font-weight:700; text-decoration:none}
/* De pijl staat in de opmaak en niet in de tekst, want hij zegt niets extra's voor wie
voorleest; het is dezelfde aanwijzing als de omlijning, maar dan visueel. */
.kruislink::after{content:"→"; font-size:17px; line-height:1; opacity:.85;
transition:transform .15s ease}
.kruislink:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.70)}
.kruislink:hover::after{transform:translateX(3px)}
/* De regel die hier stond (body.sport-footgolf .hero::after) kleurde het UP-watermerk op de
footgolfingang. Dat watermerk is vervallen bij de herofoto, ronde 4, zie de toelichting bij
.hero-top hierboven. Dood geworden met dezelfde wijziging, dus hier weggehaald. */
/* ---------- vel en kaarten ---------- */
.vel{max-width:720px; margin:-56px auto 0; padding:0 14px 80px; position:relative; z-index:2}
/* De dragende tegelvorm is nagebouwd van de balie, 24 augustus 2026: dikke navy rand + een
verschoven navy vlak erachter als HARDE schaduw (geen vervaging). De balie heeft hier twee
varianten: .stat/.t-kaart (dikke rand, harde schaduw, gebruikt voor het hoofdscherm, de tee
sheet) en de eigen lichte .kaart (1px rand, radius 12, geen schaduw, gebruikt in
instellingenschermen en dialogen). Deze site heeft geen dashboard-achtig onderscheid tussen
hoofdscherm en instellingen: elke .kaart hier (starttijden kiezen, Mijn UP, kaart kopen,
saldo checken) IS het hoofdscherm van die stap. Daarom is .stat/.t-kaart hier de juiste
tegenhanger, niet de lichte balie-.kaart, en dat komt bovendien overeen met Daniels eigen
nabouw van deze gastpagina (daniel-layout-20260821/01-homepage-boek-je-rondje.jpeg): de
kaart "BOEK JE RONDJE" heeft daar ook een dikke rand met een verschoven kleurvlak erachter.
Kleur van dat vlak: navy, zoals de balie. Daniels eigen screenshot toont op die ene kaart een
aqua-getint schaduwvlak in plaats van navy (nagemeten met een pixelcrop), en dat is dus een
verschil tussen zijn losse mockup en de balie die daar later van gebouwd is. De balie is de
bron voor deze opdracht, dus navy, niet aqua. Zie dit als een open vraag aan Daniel/Stefan,
niet als iets wat ik hier zelf besloten heb: MELDEN, niet oplossen.
De schaduw is een echte box-shadow zonder blur (0 6 0 0), geen ::before-pseudo-element: dat
is precies de gedocumenteerde bugfix in de balie-css (zie het blok boven .stat aldaar) voor
een pseudo-element dat op een ondoorzichtige achtergrond de eigen inhoud kan overdekken. */
/* border-radius naar 0, ronde 3, 24 augustus 2026: op alle drie Daniels screenshots heeft deze
tegel (en de tee sheet-kaart en de admin-loginkaart, dezelfde vormtaal) scherpe hoeken, geen
afronding. var(--r-kaart) (12px) gold hier eerder net als bij de rest van de kaarten in dit
blad; deze ENE regel wijkt er nu bewust van af, alleen voor de dragende hoofdtegel. */
.kaart{background:var(--wit); border:2px solid var(--navy); border-radius:0; padding:18px 16px;
box-shadow:6px 6px 0 0 var(--navy); margin-bottom:14px}
/* Was een grijs hoofdletterlabel van 12px, en op 11 augustus 2026 bewust naar gewone tekst
teruggezet: "Wanneer wil je spelen" in kapitalen las minder goed dan in gewone tekst.
VRAAG in plaats van stille overschrijving: de balie-sectiekop (.sectiekop-titel) is juist
VOLLEDIG uppercase, 900, 26px. Die twee eisen staan hier tegenover elkaar.
font-family Roboto Condensed hier ook, ronde 3, 24 augustus 2026: dezelfde titel-vormtaal als
.hero h1, voor dezelfde reden (zwaar+smal, zie de @import bovenaan).
RONDE 4, 24 augustus 2026: Roy heeft dit conflict zelf beslecht ("1 op 1 overnemen, Daniel is de
baas") via hoofd-activiteiten, en dat besluit gaat boven de leesbaarheidsfix van 11 augustus. Op
uitdrukkelijk verzoek van hoofd-activiteiten is de knop hieronder een EIGEN, apart terug te draaien
regel: --kop-hoofdletters (gedeclareerd in :root, zie bovenaan dit bestand) staat nu op "uppercase".
Wil Roy de fix van 11 augustus terug, dan is de ENE regel om aan te passen
":root{--kop-hoofdletters:none}" (of gewoon dat ene woord "uppercase" -> "none"), verder niets
in dit bestand hoeft aangeraakt te worden. font-size van 17 naar 21px en border-left van 4 naar
6px, zodat de kop ook echt "dikke rode streep + zware titel" oogt zoals Daniels "BOEK JE RONDJE",
niet alleen een iets zwaardere versie van de oude kleine kop. */
.kaart h2{font-family:'Roboto Condensed', var(--up-font); font-size:21px; font-weight:900; letter-spacing:-.01em;
color:var(--navy); margin:0 0 14px; text-transform:var(--kop-hoofdletters);
border-left:6px solid var(--red); padding-left:12px}
/* Het rode deel van een blokkop (het laatste woord, zie de Kop-component in data.js), net als
Daniels "RONDJE" in "BOEK JE RONDJE". */
.kop-rood{color:var(--red)}
/* ---------- meldingen ---------- */
/* Een melding is nooit alleen een gekleurd streepje. Elke soort krijgt een woord dat
zegt wat het is, plus een achtergrond die bij de betekenis hoort. Het streepje mag
erbij staan, maar het is niet het verschil. */
.banner{border-radius:var(--r-kaart); padding:15px 16px; margin-bottom:14px;
display:flex; gap:12px; align-items:flex-start}
.banner.ok{background:var(--up-badge-def-bg); border:1px solid var(--up-succes); color:var(--up-badge-def-tekst)}
.banner.fout{background:var(--up-brand-rood-tint); border:1px solid var(--up-fout); color:var(--up-fout)}
.banner .ic{font-size:20px; flex:0 0 auto; line-height:1.2}
.banner .tt{font-weight:700; margin-bottom:2px}
/* Sluitknop had geen eigen maat en werd daardoor een doelwit van 20 bij 20.
WCAG 2.2 vraagt minimaal 24 bij 24; 32 is prettiger met een duim. */
.banner .sl{margin-left:auto; font-size:20px; color:inherit; opacity:.6; flex:0 0 auto;
width:32px; height:32px; border-radius:var(--r-knop); display:flex;
align-items:center; justify-content:center; line-height:1}
.banner .sl:hover{opacity:1; background:rgba(11,40,65,.06)}
/* De :not(.banner) staat er omdat de banner bovenaan de pagina de klasse "fout" deelt.
Die heeft zijn eigen titel en icoon en moet er geen tweede woord bij krijgen. */
/* text-align:left staat er omdat deze meldingen ook op het bonscherm verschijnen, en dat
scherm staat gecentreerd. Een gecentreerde alinea in een melding leest slecht. */
.let,.fout:not(.banner),.wl-fout{padding:11px 13px; font-size:14px; border-radius:var(--r-kaart);
margin-top:14px; text-align:left}
.let::before,.fout:not(.banner)::before,.wl-fout::before{display:block; font-weight:700; font-size:13px; margin-bottom:2px}
.let{background:var(--up-brand-licht); border-left:3px solid var(--aqua); color:var(--navy)}
.let::before{content:"Goed om te weten"}
.let.groen{background:var(--up-badge-def-bg); border-left-color:var(--up-succes); color:var(--groen)}
.let.groen::before{content:"Goed nieuws"}
/* Toegevoegd 22 augustus 2026: de stand van de reservering zelf (gaat hij door), apart van de
betaalstand. .fout.stand is voor "gaat niet door" (weegt zwaarder dan betaald/open/mislukt, dus
een eigen kop in plaats van "Dit lukt zo niet", dat hoort bij een formulierfout). .let.deels is
voor een groep die deels doorgaat: geen slecht nieuws, wel iets om even bij stil te staan. */
.fout.stand:not(.banner)::before{content:"Gaat niet door"}
.let.deels::before{content:"Let op"}
.fout:not(.banner),.wl-fout{background:var(--up-brand-rood-tint); border-left:3px solid var(--up-fout); color:var(--up-fout)}
.fout:not(.banner)::before,.wl-fout::before{content:"Dit lukt zo niet"}
.wl-fout{margin-top:12px}
/* Eén kopwoord per groep. Staan er twee toelichtingen onder elkaar (op het bonscherm en bij
het controleren gebeurt dat), dan las je twee keer hetzelfde woord boven elkaar. De tweede
sluit nu aan op de eerste en leest als één blok. */
.let + .let::before,.fout:not(.banner) + .fout:not(.banner)::before{content:none}
.let + .let,.fout:not(.banner) + .fout:not(.banner){margin-top:6px}
/* Hier stond tot 15 september 2026 de opmaak van de bel-link naar de balie (een omlijnd knopje binnen
een .let-melding). De bel-link is weg op besluit van Roy (geen telefoonnummer, besluiten.md blok
UPgolf punt 9), en er stond geen andere link in een .let-melding, dus de regel is mee weggehaald. */
/* ---------- kaarthouder-chips ---------- */
.lidbalk{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.lidchip{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-pil);
padding:10px 16px; flex:1; min-width:130px}
.lidchip .k{font-size:13px; font-weight:400; color:var(--grijs)}
.lidchip .v{font-size:16px; font-weight:700; margin-top:2px}
.lidchip.seiz .v{color:var(--groen)}
.lidchip.kaart-chip .v{color:var(--aqua-donker)}
/* ---------- dagenstrip ---------- */
/* De strip loopt door tot 31 dagen voor kaarthouders. Zonder scrollbalk is er geen enkel
teken dat er rechts nog meer staat, en dan scrolt niemand. De rand vervaagt daarom naar
rechts: dat is geen versiering maar het enige signaal dat er meer is.
Als progressive enhancement, want een browser zonder mask toont gewoon een harde rand. */
.strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none}
.strip::-webkit-scrollbar{display:none}
@supports (mask-image:linear-gradient(90deg,#000,transparent)){
.strip{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
}
.dag{flex:0 0 auto; width:60px; padding:9px 0; border-radius:var(--r-kaart);
border:1.5px solid var(--lijn); background:var(--wit); text-align:center; line-height:1.25}
.dag .wd{font-size:12px; font-weight:400; color:var(--grijs)}
.dag .nr{font-size:20px; font-weight:700; letter-spacing:-.02em}
.dag .mnd{font-size:12px; font-weight:400; color:var(--grijs)}
/* Het merkrood draagt sinds 11 augustus 2026 geen tekst meer (te weinig contrast), maar het
moet wel in beeld blijven, anders is dit een blauw scherm zonder UP erin. Het staat daarom
als streepje onder wat je gekozen hebt: het merk markeert je keuze. Puur een accent, want
de navy vulling zegt "gekozen" al, dus wie het streepje niet ziet mist geen informatie.
Rood op navy haalt 4,20:1, ruim boven de 3:1 voor een grafisch element. */
.dag.aan{background:var(--navy); border-color:var(--navy); color:var(--wit);
box-shadow:inset 0 -3px 0 var(--red)}
.dag.aan .wd,.dag.aan .mnd{color:rgba(255,255,255,.75)}
.dag.dicht{opacity:.4}
/* Een dag waarop deze sport niet gespeeld wordt. Bleek, net als een sluitingsdag, want het komt
voor de gast op hetzelfde neer: hier valt niets te kiezen. Wel aanklikbaar, zodat het scherm
eronder de reden kan uitleggen in plaats van dat er niets gebeurt. */
.dag.leeg{opacity:.45}
/* ---------- starttijden ---------- */
.dagdeel{font-size:var(--up-font-base); font-weight:700; color:var(--navy); margin:18px 0 9px; text-transform:none}
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:8px}
.tijd{border:1.5px solid var(--lijn); border-radius:var(--r-kaart); padding:9px 6px; text-align:center;
background:var(--wit); transition:border-color .15s, background .15s}
.tijd .t{font-size:17px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tijd .p{font-size:13px; font-weight:400; color:var(--grijs); margin-top:1px}
.tijd .v{font-size:12px; color:var(--aqua-donker); margin-top:2px; font-weight:500}
.tijd:hover{border-color:var(--aqua)}
/* Gekozen is navy, net als in de dagenstrip, zodat "gekozen" er in het hele scherm
hetzelfde uitziet. Wit op de merkaqua haalt maar 2,9:1 en is niet leesbaar. */
.tijd.aan{border-color:var(--navy); background:var(--navy); color:var(--wit);
box-shadow:inset 0 -3px 0 var(--red)}
.tijd.aan .p,.tijd.aan .v{color:rgba(255,255,255,.85)}
/* ---------- starttijden per uur samengevouwen ----------
Op een drukke dag staan er dertig bijna gelijke tegels onder elkaar en dan tel je af in
plaats van te kiezen. De uurrij is de tussenstap: eerst een blok, dan pas een tijd.
Het open en dicht zijn mag nooit alleen aan kleur hangen. Drie signalen tegelijk, en
alle drie zichtbaar zonder kleuronderscheid:
1. de vorm van de knop rechts, een plus die een min wordt,
2. het gewicht van het uur, 700 wordt 900,
3. de rij en de tegels eronder worden samen één omlijnd vlak.
Dat het bovendien lichter van achtergrond wordt, is de vierde en de minst belangrijke. */
.uurlijst{display:flex; flex-direction:column; gap:8px}
.uurrij{display:flex; align-items:center; gap:10px; width:100%; min-height:52px;
padding:12px 46px 12px 14px; text-align:left; position:relative;
background:var(--wit); border:1.5px solid var(--lijn); border-radius:var(--r-kaart);
transition:border-color .15s, background .15s}
.uurrij:hover{border-color:var(--aqua)}
.uurtijd{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--navy);
font-variant-numeric:tabular-nums}
.uuraantal{font-size:var(--up-font-base); font-weight:400; color:var(--grijs)}
/* De prijs staat rechts, los van het uur en het aantal, zodat de rij drie rustige zones
krijgt in plaats van een reeks van drie dingen achter elkaar. Ondergeschikt gehouden:
dezelfde maat en kleur als het aantal, alleen iets steviger van gewicht omdat het een
waarde is. Het uur blijft met 19px in navy het enige dat opvalt.
Tabellarische cijfers zodat de bedragen over de rijen heen onder elkaar uitlijnen; dan
leest het als een kolom en niet als losse rommel. Ontbreekt de prijs, omdat er binnen
het uur meer dan een geldt, dan valt de zone gewoon weg en verschuift er niets, want
het plusteken staat absoluut. */
.uurprijs{margin-left:auto; font-size:var(--up-font-base); font-weight:500; color:var(--grijs);
font-variant-numeric:tabular-nums; white-space:nowrap}
/* De plus bestaat uit twee streepjes: de staande verdwijnt bij open en dan staat er een min.
Een vormverschil dus, geen kleurverschil en geen draaiend pijltje. */
.uurrij::before,.uurrij::after{content:""; position:absolute; background:var(--navy);
transition:transform .18s}
.uurrij::before{right:14px; top:calc(50% - 1px); width:16px; height:2px}
.uurrij::after{right:21px; top:calc(50% - 8px); width:2px; height:16px}
.uurrij.open::after{transform:scaleY(0)}
.uurrij.open{background:var(--paper); border-color:var(--navy)}
.uurrij.open .uurtijd{font-weight:900}
/* Open uur: de rij en zijn tegels worden één vlak. De onderrand van de rij is meteen de
scheidslijn, dus de tegelbak krijgt zelf geen bovenrand. De negatieve marge haalt de
tussenruimte van de lijst weg, zodat er geen naad tussen de twee valt. */
.uurrij.open{border-bottom-left-radius:0; border-bottom-right-radius:0}
.uurlijst .raster{margin-top:-8px; padding:10px; background:var(--paper);
border:1.5px solid var(--navy); border-top:0;
border-radius:0 0 var(--r-kaart) var(--r-kaart)}
/* Binnen een open uur staan hooguit een handvol tegels in een smaller vlak, dus ze mogen
dichter op elkaar. Bewuste keuze, geen ander onderdeel raakt hieraan. */
.uurlijst .raster{grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px}
.uurlijst .tijd{padding:8px 5px}
.uurlijst .tijd .t{font-size:16px}
.niets{text-align:center; color:var(--grijs); padding:26px 10px; font-size:var(--up-font-base)}
/* ---------- wachtlijst ---------- */
.wl-lok{background:var(--paper); border-radius:var(--r-kaart); padding:16px; text-align:center; margin-top:4px}
.wl-tekst{color:var(--navy); font-size:var(--up-font-base); font-weight:400; margin-bottom:12px}
.wl-knop{background:var(--navy); color:var(--wit); border:0; padding:11px 20px; border-radius:var(--r-knop);
font-weight:500; font-size:var(--up-font-base); cursor:pointer; font-family:inherit;
text-transform:uppercase; letter-spacing:.03em}
.wl-knop:hover{background:var(--up-navy-light)}
/* Was rood, om dezelfde reden als de hoofdknop teruggezet naar navy. Deze knop is de
bevestiging van de wachtlijst en hoort er dus uit te zien als elke andere bevestiging.
.vol regelt nu alleen nog de breedte en het gewicht, geen tweede kleurtaal. */
.wl-knop.vol{width:100%; margin-top:16px; font-weight:700}
/* De wachtlijstknoppen op dezelfde maat als de gevulde knoppen in de flow (16px, 15px verticale
vulling). Reden van de poort, 11 augustus: op een volgeboekte dag is "Zet mij op de wachtlijst"
het enige dat een gast kan doen, dus dat is daar de hoofdknop en geen terzijde. En de knop
onderaan het wachtlijstformulier zat in deze aparte klassenboom en werd daardoor gemist toen de
maat naar .knop.vol ging; een formulier van vijf velden eindigde in een lichtere knop dan een
formulier van een veld. De zoekknop hieronder blijft bewust klein: die moet uitlijnen met het
invoerveld ernaast, en dat is een structurele reden die hier niet geldt. */
.wl-lok .wl-knop,.wl-knop.vol{font-size:16px; padding-block:15px}
.wl-form{background:var(--paper); border-radius:var(--r-kaart); padding:18px; margin-top:4px}
.wl-lab{display:block; font-size:14px; font-weight:500; color:var(--navy);
margin:12px 0 5px; text-transform:none; letter-spacing:normal}
.wl-in{width:100%; padding:10px 12px; border:1px solid var(--up-border-zacht); border-radius:var(--r-knop);
background:var(--wit); color:var(--up-tekst); font-size:var(--up-font-base); font-family:inherit}
.wl-in:focus{outline:2px solid var(--aqua); outline-offset:1px}
/* flex-end zodat een kolom zonder label toch met de onderkant van het invoerveld uitlijnt,
min-width:0 zodat een kolom mag krimpen op een smal scherm in plaats van uit te steken. */
.wl-rij{display:flex; gap:10px; align-items:flex-end}
.wl-rij>div{min-width:0}
.wl-rij .wl-knop{width:100%; padding-inline:8px}
.wl-klaar{display:flex; align-items:center; gap:13px; background:var(--up-badge-def-bg);
border-radius:var(--r-kaart); padding:16px 18px; margin-top:4px}
/* 50% is een ronde vorm, geen vierde stap in de hoekstraal-schaal. */
.wl-vink{width:34px; height:34px; border-radius:50%; background:var(--groen); color:var(--wit);
display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}
.wl-klaar b{color:var(--groen); font-weight:700}
.wl-sub{color:var(--grijs); font-size:14px; font-weight:400; margin-top:2px}
/* ---------- opzoeken ----------
Het reserveringsnummer en de zoekknop staan op een rij. Dezelfde opzet als .wl-rij,
maar de klassen hangen hier op het veld zelf en niet op een omhullend blokje, want
binnen deze rij staat geen label; dat staat erboven.
min-width:0 zodat het veld op een smal scherm mag krimpen in plaats van de knop van
het scherm af te duwen. De knop houdt zijn eigen breedte, gelijk aan de 110 die de
rij hiervoor had, met dezelfde ingekorte zijruimte als in .wl-rij zodat "Zoeken…"
met het beletselteken er nog naast past. */
.zoekrij{display:flex; gap:10px; align-items:flex-end}
.zoekveld{flex:1; min-width:0}
.zoekrij .wl-knop{flex:0 0 110px; padding-inline:8px}
/* ---------- mijn reserveringen ---------- */
.mijnboeking{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--lijn)}
.mijnboeking:last-child{border-bottom:0}
/* Laat het tekstblok krimpen op een smal scherm, anders duwt een lange referentie de
annuleerknop van het scherm af. */
.mijnboeking>div{min-width:0}
.mijnboeking .dt{font-weight:700; font-variant-numeric:tabular-nums}
.mijnboeking .sub{font-size:13px; font-weight:400; color:var(--grijs)}
.mijnboeking .ann{margin-left:auto; font-size:14px; font-weight:400; color:var(--grijs);
border:1px solid var(--lijn); padding:6px 12px; border-radius:var(--r-knop)}
.mijnboeking .ann:hover{color:var(--red); border-color:var(--red)}
/* ---------- vaste balk onderaan ----------
De balk zat los onderaan de pagina en staat sinds 11 augustus 2026 binnen de linkerkolom.
Daarmee werkt position:sticky hier niet meer, en dat is geen smaakkwestie maar gemeten:
een sticky element kan nooit buiten zijn eigen ouder plakken, dus zodra je voorbij de
linkerkolom scrolde gleed de balk mee omhoog. Op een venster van 390 bij 800 lag hij op
driekwart van de pagina al 141px boven de onderrand en onderaan 288px, terwijl hij in de
oude opzet op elke scrollpositie tot het einde bleef plakken.
Daarom op een smal scherm position:fixed. Dat geeft wel hetzelfde gedrag als de oude opzet,
want de balk hoort daar bij het venster en niet bij een kolom. Op een breed scherm staat hij
gewoon in de kolom, zie het blok onderaan dit bestand. */
.balk{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--wit);
border-top:1px solid var(--lijn);
padding:12px 14px calc(12px + env(safe-area-inset-bottom));
box-shadow:0 -2px 10px rgba(11,40,65,0.04)}
.balk-in{max-width:720px; margin:0 auto; display:flex; align-items:center; gap:12px}
.balk .info{font-size:14px; font-weight:400; color:var(--grijs); line-height:1.3}
.balk .info b{display:block; color:var(--navy); font-size:16px; font-weight:700}
/* De hoofdknop stond op het merkrood. Wit daarop haalt 3,44:1 en dat is onder de 4,5:1 die
WCAG voor gewone tekst vraagt, dus de knop die het hele scherm draagt was de minst leesbare.
Keuze van de eigenaar op 11 augustus 2026: navy als hoofdknop, rood als accent.
Gemeten in de browser op de echte knop: wit op --up-navy haalt 14,46:1, de hoverstand
op --up-navy-light haalt 11,97:1. Rood verdwijnt niet, het draagt geen tekst meer.
Zie de merknaam in de kop en het accentstreepje op de gekozen dag en tijd. */
/* Uppercase en letterspacing .03em komen uit de balieknoppen (.datumnav .vandaag, .agendaknop):
massief vlak, witte tekst, 700, uppercase, letterspacing .03em. Alleen deze twee eigenschappen
overgenomen, 24 augustus 2026; de achtergrondkleur en de contrastafweging hierboven (11
augustus 2026, navy in plaats van rood) blijven ongewijzigd, dat is geen vormkwestie. */
.knop{background:var(--navy); color:var(--wit); padding:13px 22px; border-radius:var(--r-knop);
font-weight:700; margin-left:auto; white-space:nowrap;
text-transform:uppercase; letter-spacing:.03em}
.knop:hover{background:var(--up-navy-light)}
/* Uitgeschakeld was een doorzichtig merkrood, en dat leest als een half geladen knop.
Nu duidelijk grijs: nog niet aan de beurt, in plaats van kapot. Blijft ook naast een
navy hoofdknop meteen te onderscheiden, want het verschil is licht tegen donker. */
.knop:disabled,.wl-knop:disabled{background:var(--lijn); color:var(--grijs); opacity:1; cursor:not-allowed}
/* Dezelfde maat als de knop in de balk. Die twee komen vlak na elkaar (je tikt een tijd aan en
het blad gaat open), en als de tweede kleiner is leest dat als twee schermen die niet op elkaar
aansluiten. Het KLEURverschil blijft wel: de balk-knop is rood en dit is de vervolgstap.
Bewust ook voor de stille variant en de inloglink-knop, want het verschil tussen een primaire
en een secundaire knop hoort in de vulling te zitten (gevuld tegenover omlijnd) en niet in de
maat. Twee knoppen op hetzelfde blad die verschillen in lettergrootte zien er niet secundair
uit, die zien er onaf uit. */
.knop.vol{width:100%; margin:16px 0 0; display:block; font-size:16px; padding-block:15px}
/* De rustige variant ("Sluiten", "Nog een tijd reserveren") was navy en werd door deze
wijziging precies dezelfde knop als de hoofdknop. Twee knoppen die er gelijk uitzien en
iets anders doen is erger dan een kleur minder, dus dit is nu een omlijnde knop:
zelfde vorm en zelfde hoekstraal, alleen niet gevuld. Navy op wit haalt 15,3:1. */
.knop.stil{background:var(--wit); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy)}
.knop.stil:hover{background:var(--paper)}
/* De knop in de vastgeplakte balk is de stap waarmee een gast doorgaat naar het boeken, en die
is op wens van de eigenaar rood en groter. Bewust ALLEEN deze knop: zou het hele .knop-blok
rood worden, dan is rood weer de dragende kleur van het scherm in plaats van een accent, en
dan komt de hele contrastafweging terug.
Wit op --rood-knop haalt 4,72:1, gemeten in de browser op het element zelf.
De hover gaat hier donkerder in plaats van lichter, anders dan de merkconventie: op een gevuld
vlak leest donkerder net zo goed als indruk-effect en het contrast gaat er omhoog (5,40:1)
in plaats van omlaag.
De maat staat expliciet op 16px. Dat is geen overschrijving van de basisgrootte uit de
tokenfile, die blijft 14px voor de pagina; dit is een enkel element dat groter moet zijn,
net als de koppen en de tijden dat al zijn. */
.balk .knop{background:var(--rood-knop); font-size:16px; padding:15px 30px}
.balk .knop:hover{background:var(--rood-knop-hover)}
/* Kop-balk op kaart.html, 24 augustus 2026. Alleen op deze pagina staat .balk niet onderaan
maar bovenaan (kaartkopen.jsx regel 183: de balk is het eerste kind van .wrap.smal, vóór
.kaart). De klasse .balk zelf blijft ongewijzigd voor index.html en footgolf.html, waar
dezelfde klasse de vaste onderbalk met de koopknop is; deze regel is daarom gescoped op
.wrap.smal .balk, de combinatie die alleen in KaartPagina (kaartkopen.jsx) voorkomt.
position:static in plaats van fixed: zo landt de balk in de normale leesvolgorde, dus
bovenaan boven .kaart, in plaats van vastgeplakt aan de onderrand van het venster.
border-bottom in plaats van border-top en geen schaduw naar boven: die twee hoorden bij een
onderbalk. Een kop krijgt in plaats daarvan een rand ONDER, in de balievorm (border-bottom:
3px solid var(--red)), dezelfde balievorm als elders in dit bouwspoor (schermen.jsx).
Padding zonder env(safe-area-inset-bottom): die inset hoort bij een balk die tegen de
onderrand van het scherm valt, niet bij een kop bovenaan. padding:12px 14px is dezelfde
maat als .top-in in de balie (schermen-beheer.jsx / schermen-dag.jsx).
De merknaam staat nu op een navy achtergrond; .merk-naam en .merk-scheiding dragen hun eigen
witte kleur al (zie de toelichting bij de lockup hierboven), dus hier is geen aparte
kleuroverschrijving meer nodig.
Full-bleed gemaakt, ronde 4, 24 augustus 2026, op melding van hoofd-activiteiten: bij Daniel loopt
de navy kop-balk op ELK scherm van rand tot rand, ook op zijn admin-login (een verder smalle
gecentreerde kaart). Onze kop-balk bleef binnen de 620px-kolom van .wrap.smal staan. Zelfde
"full bleed binnen een gecentreerde kolom"-truc als bij .hero-top: margin calc(-50vw + 50%) breekt
uit tot de vensterrand, en komt terug als padding zodat de inhoud op dezelfde 14px-inspringing
blijft staan als .wrap.smal's eigen padding (en dus als .kaart eronder). */
.wrap.smal .balk{position:static; background:var(--navy); border-top:none;
border-bottom:3px solid var(--red); box-shadow:none;
margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
padding:12px calc(50vw - 50% + 14px)}
/* Bug gevonden en gefixt, ronde 4, 24 augustus 2026, ZELF ontdekt bij het nameten (niet gemeld
door hoofd-activiteiten): de calc-truc hierboven berekent het percentage-deel van "50%" tegen de
BREEDTE VAN DE OUDER (.wrap.smal), niet tegen de eigen breedte van .balk. Bij .hero-top werkt
dezelfde truc wel goed, omdat de ouder daar (.hero-in) op een breed scherm zelf al verbreed is
naar 1120px door een bestaande desktop-regel. .wrap.smal blijft op ELKE breedte bij zijn eigen
max-width van 620px (dit scherm heeft geen tweekoloms-lay-out, dus geen tegenhanger van die
1120px-regel), en daardoor gaf de calc-formule op 1280 breed een padding van 358px per kant in
plaats van de bedoelde 14px: de merknaam, nav en MIJN UP-knop kregen zo nog maar 564px over en
weken alsnog naar een tweede regel uit, ook na de max-width:none-fix op .balk-in hierboven.
Nagemeten met getComputedStyle: paddingLeft "358px" vóór deze fix.
Oplossing: vanaf de breedte waarop .wrap.smal's eigen max-width (620px) gaat gelden (620+2×14px
padding = 648px, hier afgerond op 650px) een vaste, kleine padding van 20px in plaats van de
calc-formule. Onder de 650px is .wrap.smal zelf nog niet breedte-beperkt en werkt de calc-truc
wel correct (zelf nagemeten op 390 breed: geen probleem daar), dus die blijft voor smalle
schermen ongewijzigd staan. */
@media (min-width:650px){
.wrap.smal .balk{padding:12px 20px}
}
/* Zelfde overloop-risico als .hero-top hierboven. Op smal scherm mag de nav ook hier naar een
eigen regel onder het logo, in plaats van de balk te verbreden of de tekst te verdringen.
.balk-in is hier bewust NIET globaal gewijzigd: diezelfde klasse is ook de vaste ONDERbalk op
index/footgolf (info + de knop VERDER), en die twee mogen nooit wrappen. Daarom scoped op
.wrap.smal .balk .balk-in, de combinatie die alleen hier voorkomt (zelfde patroon als de
bestaande .wrap.smal .balk-scoping verderop in dit bestand).
max-width:none TOEGEVOEGD, ronde 4, 24 augustus 2026: nadat de kop-balk zelf full-bleed werd
(.wrap.smal .balk hierboven), bleef .balk-in zijn EIGEN max-width:720px houden (de gewone,
ongescopede regel elders in dit bestand) en centreerde zich middenin de nu brede balk. Op 1280
breed veroorzaakte dat een onnodige knik naar een tweede regel (merk+nav pasten niet in de
overgebleven ~692px), terwijl dezelfde onderdelen op index.html/footgolf.html (waar .hero-top
een vergelijkbare truc gebruikt om zijn EIGEN inhoud net zo breed te maken als de full-bleed
achtergrond) keurig op een regel staan. Zelf nagemeten: zonder deze regel wrapte MIJN UP naar
een tweede regel op 1280 breed, met deze regel niet meer, zie mijn eindantwoord. */
.wrap.smal .balk .balk-in{flex-wrap:wrap; max-width:none}
@media (max-width:600px){
.wrap.smal .balk .hoofdnav{flex-basis:100%; margin-left:0; margin-top:8px; gap:14px}
}
/* ---------- uitschuifblad ---------- */
.scrim{position:fixed; inset:0; background:rgba(11,40,65,.5); z-index:50;
display:flex; align-items:flex-end; justify-content:center}
/* overscroll-behavior:contain zodat doorscrollen in het blad niet stiekem de pagina
eronder meeneemt. Op een telefoon is dat het verschil tussen een blad en een lap tekst. */
.blad{background:var(--wit); border-radius:var(--r-kaart) var(--r-kaart) 0 0; width:100%; max-width:560px;
padding:22px 18px calc(22px + env(safe-area-inset-bottom)); max-height:92vh; overflow:auto;
overscroll-behavior:contain}
.greep{width:38px; height:4px; border-radius:var(--r-pil); background:var(--lijn); margin:0 auto 16px}
.blad h3{margin:0 0 4px; font-size:21px; font-weight:900; letter-spacing:-.02em}
.blad .bij{color:var(--grijs); font-size:14px; font-weight:400; margin:0 0 16px}
/* Formulierlabels waren grijze kapitalen van 11px. Nu gewoon leesbaar. */
label{display:block; font-size:14px; font-weight:500; color:var(--navy);
margin:14px 0 6px; text-transform:none; letter-spacing:normal}
input,select{width:100%; padding:12px; border:1.5px solid var(--lijn); border-radius:var(--r-knop);
background:var(--wit); color:var(--up-tekst)}
input:focus,select:focus{outline:2px solid var(--aqua); outline-offset:1px; border-color:var(--aqua)}
/* ---------- snelkeuze voor het aantal spelers ----------
Alleen op een ingang waar er veel plekken in één starttijd zitten. Bij golf zijn dat er vier en
is de teller sneller dan welke rij knoppen ook; bij footgolf zijn het er veertig en dan zijn
negenendertig tikken op de plusknop geen invoer maar een straf.
De rij loopt over als hij niet past, hij scrolt niet: op een smal scherm hoort de laatste knop
niet buiten beeld te vallen. Gekozen is navy met een rood streepje eronder, precies zoals een
gekozen dag en een gekozen tijd, zodat "gekozen" er in het hele scherm hetzelfde uitziet.
44 bij 44 is de duimmaat die de rest van dit blad ook aanhoudt. */
.snelkeuze{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.snelkeuze .sk{min-width:52px; min-height:44px; padding:0 12px;
border:1.5px solid var(--lijn); border-radius:var(--r-knop); background:var(--wit);
color:var(--navy); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.snelkeuze .sk:hover{border-color:var(--aqua)}
.snelkeuze .sk.aan{background:var(--navy); border-color:var(--navy); color:var(--wit);
box-shadow:inset 0 -3px 0 var(--red)}
.teller{display:flex; align-items:center; gap:14px}
.teller button{width:44px; height:44px; border-radius:var(--r-knop); border:1.5px solid var(--lijn);
font-size:21px; font-weight:700; color:var(--navy); background:var(--wit)}
.teller button:hover{border-color:var(--aqua)}
.teller .n{font-size:24px; font-weight:900; min-width:38px; text-align:center; font-variant-numeric:tabular-nums}
/* Twee keuzelijsten naast elkaar op 360 breed: zonder min-width:0 weigert een select te
krimpen onder zijn langste optie en steekt de rij buiten het scherm. */
.spelerrij{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.spelerrij .nr{width:22px; color:var(--grijs); font-size:14px; font-weight:400; flex:0 0 auto}
.spelerrij select{min-width:0; flex:1}
.som{display:flex; justify-content:space-between; align-items:baseline;
border-top:1.5px solid var(--lijn); margin-top:18px; padding-top:14px}
.som .lb{font-size:14px; font-weight:400; color:var(--grijs)}
.som .bd{font-size:24px; font-weight:900; letter-spacing:-.02em}
.terug{display:block; width:100%; text-align:center; color:var(--grijs); font-weight:400;
padding:12px; margin-top:6px; font-size:var(--up-font-base); border-radius:var(--r-knop)}
.terug:hover{color:var(--navy)}
/* ---------- bevestiging ---------- */
.klaar{text-align:center; padding:14px 6px 6px}
.vink{width:62px; height:62px; border-radius:50%; background:var(--groen); color:var(--wit);
font-size:31px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px}
.vink.letop{background:var(--up-fout)}
.klaar h3{font-size:23px; font-weight:900; margin-bottom:6px}
.code{font-size:30px; font-weight:900; letter-spacing:.09em; margin:18px 0 4px;
font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.codelb{font-size:13px; font-weight:400; color:var(--grijs); text-transform:none; letter-spacing:normal}
.details{background:var(--paper); border-radius:var(--r-kaart); padding:15px; margin-top:20px;
text-align:left; font-size:var(--up-font-base)}
.details div{display:flex; justify-content:space-between; gap:14px; padding:5px 0}
.details span:first-child{color:var(--grijs); font-weight:400; flex:0 0 auto}
/* Een e-mailadres is één lang woord. Zonder dit breekt het niet af en loopt de bon over
de rand op een smal scherm. */
.details span:last-child{font-weight:500; text-align:right; overflow-wrap:anywhere}
.mailmelding{font-size:13px; font-weight:400; color:var(--grijs); margin-top:12px}
.laden{text-align:center; padding:36px 0; color:var(--grijs)}
/* ---------- breed scherm ----------
Vanaf 720 is dit geen telefoon meer. Een blad dat onderaan het scherm plakt is dan een
telefoonpatroon op een plek waar het niet hoort: het staat ver van de aandacht en de
greep slaat nergens op. Op deze breedte wordt het een venster in het midden.
Tussen 720 en 960 blijft de gastflow één kolom: twee kolommen passen daar wel, maar dan
houdt het kiezen van een tijd te weinig breedte over en gaan de tegels op drie per rij. */
@media (min-width:720px){
/* padding-bottom aangepast, ronde 7, 24 augustus 2026, zelfde clamp en zelfde reden als bij de
basisregel van .hero hierboven: deze media-regel overschrijft die basisregel vanaf 720px en
zette de onderpadding zonder deze fix terug op een vaste 88px, waardoor de hero-hoogtefix bij
720px en breder onzichtbaar bleef. Ondergrens hier 88px (de oude vaste waarde van deze regel,
niet de 74px van de basisregel), zodat een venster net boven 720px niet krimpt. */
/* Zelfde correctie als bij de basisregel hierboven, 18 september 2026. Deze query geldt vanaf
720px; zonder deze regel zou het op de telefoon wel kloppen en op een breed scherm niet. */
.hero{padding:18px 20px clamp(56px, 13vh, 150px)}
.hero::after{width:250px; height:389px; right:-64px; top:-104px}
.vel{padding-bottom:96px}
.kaart{padding:22px 20px}
.scrim{align-items:center; padding:24px}
.blad{border-radius:var(--r-kaart); max-height:86vh;
padding:24px 22px; box-shadow:0 18px 50px rgba(11,40,65,.18)}
/* De greep is het handvat van een blad dat omhoog schuift. In een venster is er niets
te grijpen, dus dan hoort hij er niet te staan. */
.greep{display:none}
.balk{padding:14px}
}
/* ---------- twee kolommen vanaf 1060 ----------
Onder deze breedte staat alles onder elkaar, in de leesvolgorde die er al was.
Waarom precies 1060 en geen rond getal. De grens is gemeten aan wat er op het scherm
gebeurt, namelijk hoeveel starttijden er per rij passen, want dat is de hoofdtaak.
In één kolom toont het tijdenraster er 7 per rij. Zet je de tweede kolom eerder aan, dan
kost dat de hoofdtaak meteen tegels: bij 940 zakt het naar 5 per rij, bij 970 naar 6, en
pas bij 1060 haalt de linkerkolom 690px en dus weer diezelfde 7. Precies daar kost de
tweede kolom niets meer en levert hij wel iets op, namelijk dat het opzoekblok meteen in
beeld staat in plaats van onder de tijden. Eronder is de winst kleiner dan het verlies.
De zijkolom is vast 320px breed en geen fractie. Het opzoekblok heeft een vaste behoefte,
een invoerveld met een knop van 110px ernaast, en wordt niet beter van meer ruimte. Alles
wat een breder scherm extra biedt gaat dus naar het kiezen van een tijd. Boven 1120 loopt
de vel tegen zijn plafond en blijft de indeling stabiel, ook op 1440 en 1680 gemeten.
align-items:start zodat de rechterkolom zijn eigen hoogte houdt en niet meerekt met een
lange tijdenlijst links. */
@media (min-width:1060px){
.hero-in,.vel{max-width:1120px}
.reserveer-kolommen{display:grid; grid-template-columns:minmax(0,1fr) 320px;
gap:22px; align-items:start}
/* Allebei expliciet, ook al plaatst de grid ze vanzelf: min-width:0 zodat een lange
reserveringsreferentie of een brede tegel de kolom niet kan oprekken. */
.kolom-boeken,.kolom-opzoeken{min-width:0}
/* Het opzoekblok is ongeveer 200px hoog en de tijdenlijst ernaast loopt veel verder door,
dus zodra je voorbij de eerste twee kaarten scrolde was de rechterhelft een leeg vlak.
Het blok schuift daarom mee. De bovenmarge is dezelfde 22px als de ruimte tussen de
kolommen, zodat hij niet tegen de bovenrand van het venster plakt maar op hetzelfde ritme
blijft staan als de rest.
Dit werkt alleen doordat align-items hierboven op start staat: bij de standaardwaarde zou
de kolom net zo hoog worden als de tijdenlijst en dan valt er niets te plakken.
Wordt het blok zelf langer dan het venster, bijvoorbeeld met een gevonden reservering
eronder, dan scrolt het gewoon mee tot zijn eigen onderkant. Dat is precies wat je wilt,
want anders zou de onderkant van dat blok onbereikbaar worden. */
.kolom-opzoeken{position:sticky; top:22px}
/* Hier stond een uitzondering: op een breed scherm liep de balk mee in de kolom in plaats van
aan de onderrand te plakken. Die is er op 11 augustus 2026 uit gehaald, op besluit van de
eigenaar. Reden: hij stond dan onder de tijden, en dat was op 1280 bij 800 ruim tweehonderd
pixels onder de vouw. Je tikte een tijd aan en er gebeurde zichtbaar niets, want de knop om
verder te gaan stond buiten beeld. De balk plakt nu op elke breedte aan de onderrand, precies
zoals op een telefoon, dus het gedrag is overal hetzelfde zodra er iets gekozen is.
De inhoud van de balk stond nog op de oude 720px en zweefde daardoor los van de kolommen
erboven: de tijd begon ergens midden onder de linkerkolom. Hij krijgt hier dezelfde breedte
en dezelfde zijruimte als de vel, zodat de gekozen tijd precies onder de linkerkolom begint
en de knop uitlijnt met de rechterrand van het opzoekblok. */
.balk{padding-inline:0}
.balk-in{max-width:1120px; padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
/* Het codeveld bij een speler die met een kaart of abonnement betaalt. Groter dan een gewoon
veld en met ruimte tussen de tekens, want deze code wordt overgetypt van een briefje of
voorgelezen aan de telefoon, vaak door iemand die de kleine lettertjes niet meer leest. */
.codeveld{margin:10px 0 4px}
.codeveld label{display:block; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:5px}
.codeveld input{width:100%; font-size:19px; padding:13px 14px; min-height:52px}
/* Alleen het echte codeveld toont in hoofdletters en met extra tekenruimte: dat helpt bij het
overtypen van een kaartcode. De velden "Naam van de kaarthouder" en "E-mailadres" in dezelfde
.codeveld-rij (de code-kwijt-route) deelden eerder deze regel mee, met als gevolg dat een
ingetypte naam of e-mailadres in hoofdletters verscheen. Dat zag er raar uit en wekte ten
onrechte de indruk dat hoofdletters bij het zoeken uitmaken; de zoekfunctie zelf is daar niet
gevoelig voor. Gemeld door Roy tijdens zijn oefenrun, 21 augustus 2026: "het is ook gek met
capslock". Alleen opmaak aangepast, niets aan de zoeklogica. */
.codeveld input.code-in{letter-spacing:.09em; text-transform:uppercase}
.codeveld input.code-in::placeholder{letter-spacing:.06em; text-transform:none; opacity:.55}
.codeveld .let,.codeveld .fout{margin-top:8px}
/* De pagina waar je een kaart of abonnement koopt. Grote keuzeknoppen in plaats van een
keuzelijst: op een telefoon is een rij van drie regels makkelijker te raken dan een dropdown,
en je ziet alle prijzen tegelijk zonder ergens op te klikken. */
.kaartkoop h2{font-size:22px; margin:0 0 6px}
.kaartkoop h3{font-size:16px; margin:22px 0 4px}
.kaartlijst{display:flex; flex-direction:column; gap:9px; margin:10px 0 4px}
/* var(--up-lijn) stond hier tot 24 augustus 2026, en die naam bestaat nergens in up-tokens.css
of in het :root-blok bovenaan dit bestand (dat token heet --up-border, zie regel 15:
--lijn:var(--up-border)). Een ongeldige waarde in een shorthand maakt de HELE shorthand
ongeldig, dus border viel volledig terug op de standaard (0px none) en de rand rond elke
kaartkeuze ontbrak. Geen smaakkwestie, gemeten met getComputedStyle op .kaartkeuze vóór deze
fix (oude stijl.css apart geserveerd): border las 0px none rgb(11, 40, 65). Width en style
vielen dus wel degelijk allebei terug op hun initiële waarde (0px, none), niet alleen de
kleur. De kleur zelf las rgb(11, 40, 65), dat is --navy, niet zwart: border-color heeft als
eigen CSS-initiële waarde currentcolor (niet medium/none zoals width/style), en dat
resolveerde hier naar de geërfde tekstkleur van het element. Vandaar de indruk dat er nog iets
van een rand stond terwijl er zichtbaar niets was: width bleef 0px, dus de kleur deed er niet
toe. */
/* Scherpe hoeken en navy rand, ronde 4, 24 augustus 2026, op melding van hoofd-activiteiten (de
keuzerijen op kaart.html waren nog de oude zachte vorm, met afgeronde hoeken en een dunne
lichte rand). border-radius 0 en een navy rand van 2px, dezelfde dikte als .kaart en .kaartkeuze
had al 2px, dus dat cijfer bleef gelijk, alleen de kleur (van --up-border naar --navy) en de
afronding (van var(--r-kaart) naar 0) zijn nu gelijk aan Daniels vorm. */
.kaartkeuze{display:grid; grid-template-columns:1fr auto; gap:2px 12px; width:100%; text-align:left;
background:var(--wit); border:2px solid var(--navy); border-radius:0;
padding:14px 16px; cursor:pointer; min-height:60px; align-items:center}
.kaartkeuze:hover{border-color:var(--aqua)}
.kaartkeuze.aan{border-color:var(--up-brand-rood); background:var(--up-brand-licht)}
.kk-naam{font-size:17px; font-weight:600; color:var(--navy)}
.kk-bij{font-size:14px; color:var(--muted); grid-column:1}
.kk-prijs{font-size:19px; font-weight:700; color:var(--navy); grid-column:2; grid-row:1 / span 2; align-self:center}
.kaartkoop .terug{display:block; text-align:center; margin-top:14px; color:var(--navy); font-size:15px}
/* De labels en velden op kaart.html (Naam/E-mail/Telefoon) en het "Goed om te weten"-blokje eronder,
in Daniels vorm: labels klein/grijs/hoofdletters/ruime letterafstand, velden scherp met een dikke
navy rand en grote vette tekst. BEWUST gescoped op .kaartkoop (de wrapper van dit ene scherm) en
niet op de kale `label`/`input,select`-regels hierboven: die gelden voor het hele boekingsblad
(schermen.jsx, .wl-form, het uitschuifblad), en die vielen buiten deze opdracht. Daar bestaat
hetzelfde spanningsveld met de leesbaarheidsfix van 11 augustus als bij de blokkoppen, maar dat is
nu niet gevraagd: zie mijn eindantwoord voor deze afbakening als vraag aan Roy voor een vervolgronde. */
.kaartkoop label{font-size:11px; font-weight:700; color:var(--grijs); text-transform:uppercase;
letter-spacing:.09em; margin:14px 0 6px}
.kaartkoop input{border:2px solid var(--navy); border-radius:0; font-size:16px; font-weight:700;
color:var(--navy); padding:12px}
.kaartkoop input:focus{border-color:var(--navy); outline:2px solid var(--aqua); outline-offset:1px}
.kaartkoop input::placeholder{font-weight:400; color:var(--grijs)}
.kaartkoop .let{border-radius:0}
/* .opzoek-blok, ronde 5, 24 augustus 2026: de velden en labels in "Heb je al gereserveerd?" op
index.html en footgolf.html (schermen.jsx), zelfde Daniel-vorm als .kaartkoop hierboven al heeft
op kaart.html: labels klein/grijs/hoofdletters/ruime letterafstand, velden een dikke (2px) navy
rand met scherpe hoeken en grote vette tekst. BEWUST gescoped op deze ene kaart en niet op de
kale `label`/`.wl-in`-regels: die gelden ook voor de Wachtlijst, MijnUp, Saldo checken en
Verplaatsen-formulieren elders op dezelfde pagina's, en dat doortrekken is nu niet gevraagd (zie
mijn eindantwoord, open vraag voor Roy voor een vervolgronde, net als bij .kaartkoop hierboven). */
.opzoek-blok label{font-size:11px; font-weight:700; color:var(--grijs); text-transform:uppercase;
letter-spacing:.09em; margin:14px 0 6px}
.opzoek-blok input{border:2px solid var(--navy); border-radius:0; font-size:16px; font-weight:700;
color:var(--navy); padding:12px}
.opzoek-blok input:focus{border-color:var(--navy); outline:2px solid var(--aqua); outline-offset:1px}
.opzoek-blok input::placeholder{font-weight:400; color:var(--grijs)}
/* Rondheid van de laatste knoppenfamilie en de dagenstrip/tijdrijen, ronde 5, 24 augustus 2026, op
bevinding van de anti-ai-poort (POORT-antiai-daniel-layout-20260824.md, punt 8): Daniel heeft
nergens een afgeronde vorm, en deze klassen liepen nog op --r-knop/--r-kaart (8px/12px) uit het
GEDEELDE tokenbestand up-tokens.css. Die tokenfile zelf blijft ongemoeid (de balie gebruikt hem
ook), dit is een gescoopte override in DIT bestand, alleen voor deze site. Raakt "Kaart of
abonnement kopen", "Saldo checken" (beide .wl-knop), de dagchips (.dag) en de tijdrijen (.tijd)
op index.html en footgolf.html. .wl-knop wordt nergens in kaartkopen.jsx gebruikt en .dag/.tijd
ook niet, dus dit raakt kaart.html niet, ook al laadt die pagina hetzelfde stijl.css. */
.wl-knop,.dag,.tijd{border-radius:0}
.wrap.smal{max-width:620px; margin:0 auto; padding:0 14px 40px}
/* Ronde 7, 14 september 2026: het Recras-boekproces in een iframe op kaart.html (zie kaartkopen.jsx,
RecrasKaartKopen). De hoogte zet het script van Recras zelf via postMessage; dit is alleen de vorm. */
.kaartkoop .recras-venster{display:block; width:100%; border:2px solid var(--navy); border-radius:0;
margin:14px 0 0; background:var(--wit)}
.kaartkoop .recras-link{display:block; text-align:center; text-decoration:none; margin-top:14px}
/* Punt 6: akkoordvinkje en voettekst, 17 september 2026 */
.akkoordregel{display:flex;align-items:flex-start;gap:10px;margin:14px 0 12px;font-size:14px;line-height:1.45;text-align:left}
.akkoordregel input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:#FF424D}
.akkoordregel a{color:#FF424D}
/* Ronde 19, 18 september 2026. Hersteld nadat het live zichtbaar werd: de voorwaardentekst in het
venster op deze pagina stond volledig in HOOFDLETTERS. Oorzaak: het venster wordt in de DOM
binnen het