:root{ --bg:oklch(97% 0.004 260); --card:oklch(100% 0 0); --card-hoog:oklch(96% 0.006 260); --line:oklch(90% 0.006 260); --text:oklch(22% 0.014 260); --muted:oklch(45% 0.014 260); --dim:oklch(60% 0.012 260); --strength:oklch(58% 0.19 300); --cardio:oklch(58% 0.19 265); --fout:oklch(50% 0.19 25); --schaduw:0 1px 2px oklch(20% 0.014 260 / .05),0 1px 8px oklch(20% 0.014 260 / .06); color-scheme:light; } /** * Donker thema, aan te zetten via — het schakelscript * staat in /mijn/thema.js. Zelfde opzet als het adminpaneel: één plek die de * custom properties op runtime herdefinieert, geen tweede stylesheet. */ :root[data-theme="donker"]{ color-scheme:dark; --bg:oklch(15% 0.012 260); --card:oklch(22% 0.012 260); --card-hoog:oklch(26% 0.012 260); --line:oklch(30% 0.014 260); --text:oklch(97% 0.006 260); --muted:oklch(68% 0.014 260); --dim:oklch(55% 0.012 260); --fout:oklch(72% 0.17 25); --schaduw:none; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font-family:"Manrope",system-ui,sans-serif;line-height:1.6} h1,h2,h3{font-family:"Bebas Neue","Manrope",sans-serif;letter-spacing:.02em; line-height:1.15;margin:0 0 .4em} h1{font-size:2.4rem} h2{font-size:1.6rem} h3{font-size:1.15rem} a{color:var(--cardio)} .wrap{max-width:52rem;margin:0 auto;padding:1.5rem 1rem 4rem} .kop{display:flex;align-items:center;justify-content:space-between;gap:1rem; border-bottom:1px solid var(--line);padding:1rem;margin-bottom:1.5rem;flex-wrap:wrap} .kop-acties{display:flex;align-items:center;gap:.5rem} .merk{font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.5rem} .icoon{width:1.15rem;height:1.15rem;flex:none} .kaart{background:var(--card);border:1px solid var(--line);border-radius:.25rem; padding:1.25rem;margin-bottom:1.25rem;box-shadow:var(--schaduw)} /* Zoveel kaarten op een rij als er van 18rem passen (besluit Navarre 2026-09-26): op een telefoon is dat er één, op de bredere wrap-breed van deze pagina schuift dat vanzelf door naar twee, drie of meer, zonder vaste vensterbreedtes die ergens tussenin een lege kolom overlaten. 18rem is de ondergrens waarop een kaart zijn knop en tekst nog prettig kwijt kan. .kaart verliest zijn eigen margin in het raster, want gap doet dat werk al. Eén kaart alleen (bijvoorbeeld "je hebt nu geen schema") vult vanzelf de volle breedte: auto-fit maakt er dan één kolom van in plaats van een kaart naast een lege ruimte. */ .kaarten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.25rem;margin-bottom:1.25rem} .kaarten-raster .kaart{margin-bottom:0} .muted{color:var(--muted)} .dim{color:var(--dim);font-size:.85rem} .chip{display:inline-block;border:1px solid var(--line);border-radius:999px; padding:.15rem .7rem;font-size:.8rem;background:var(--card-hoog)} .chip-kracht{border-color:color-mix(in oklch,var(--strength) 40%,transparent); color:var(--strength)} .chip-voeding{border-color:color-mix(in oklch,var(--cardio) 40%,transparent); color:var(--cardio)} .knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:2.75rem;padding:.6rem 1.1rem;border-radius:.25rem;border:1px solid var(--line); background:var(--card-hoog);color:var(--text);font:inherit;font-size:.9rem; text-decoration:none;cursor:pointer} .knop-primair{background:var(--strength);color:var(--bg);border-color:transparent;font-weight:600} .veld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem} .veld label{font-size:.9rem;font-weight:600} .veld input{min-height:2.75rem;padding:.6rem .8rem;border-radius:.25rem; border:1px solid var(--line);background:var(--card-hoog);color:var(--text); font:inherit;width:100%} .fout{border:1px solid color-mix(in oklch,var(--fout) 45%,transparent); background:color-mix(in oklch,var(--fout) 12%,transparent); color:var(--fout);border-radius:.25rem;padding:.7rem .9rem;margin-bottom:1rem;font-size:.9rem} .goed{border:1px solid color-mix(in oklch,var(--cardio) 45%,transparent); background:color-mix(in oklch,var(--cardio) 12%,transparent); color:var(--cardio);border-radius:.25rem;padding:.7rem .9rem;margin-bottom:1rem;font-size:.9rem} table{width:100%;border-collapse:collapse;font-size:.92rem} th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--muted);font-weight:600} .blok{margin-bottom:1.5rem} .blok-kop{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; border-bottom:1px solid var(--line);padding-bottom:.35rem;margin-bottom:.6rem} .balk{display:block;width:100%;height:.6rem;border-radius:999px;overflow:hidden;margin:.6rem 0} .seg-0{fill:var(--strength)} .seg-1{fill:var(--cardio)} .seg-2{fill:oklch(55% 0.02 260)} .download{display:flex;flex-wrap:wrap;gap:.5rem} .centreer{max-width:24rem;margin:3rem auto;padding:0 1rem} :focus-visible{outline:2px solid var(--cardio);outline-offset:2px;border-radius:3px} /* Kleine opmaakhulpjes. Stonden eerder als style=""-attribuut in de HTML; die worden door de CSP geweigerd (zie de toelichting bij /mijn/stijl.css). */ .vol{width:100%} .nowrap{white-space:nowrap} .mt-s{margin-top:.5rem} .mt-m{margin-top:.6rem} .kol-smal{width:7rem} .kol-dag{width:8rem} .kol-breed{width:11rem} /* Alleen voor de schermlezer. Met display:none zou hij hem ook niet voorlezen. */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* De waarschuwing vóór het automatisch uitloggen. Native : focus vasthouden en de top layer zitten er al in. */ .dialoog{margin:auto;width:min(28rem,calc(100vw - 2rem));padding:0; border:1px solid var(--line);border-radius:.25rem;background:var(--card);color:var(--text)} .dialoog::backdrop{background:oklch(10% 0.01 260 / .7)} .dialoog-inhoud{padding:1.5rem} .dialoog-knoppen{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1.5rem} .teller{font-variant-numeric:tabular-nums} /* --- Zelf iets veranderen (fase 10) ------------------------------------- Uitgangspunt uit AGENTS.md: overzichtelijk genoeg voor een kind van 12+. Dat betekent hier grote raakvlakken (minimaal 44 px), keuzes onder elkaar in plaats van naast elkaar, en nooit een knop zonder woorden erbij. */ .rij-actie{width:1%;white-space:nowrap} .mini{min-height:2.25rem;padding:.35rem .7rem;font-size:.8rem} .let-op{border:1px solid color-mix(in oklch,var(--strength) 45%,transparent); background:color-mix(in oklch,var(--strength) 10%,transparent); border-radius:.25rem;padding:.7rem .9rem;margin:.6rem 0;font-size:.9rem} .keuzes{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0} /* Het hele vlak is klikbaar, niet alleen het bolletje. Een radioknop van 13 px raken is op een telefoon voor niemand prettig en voor een deel van deze doelgroep niet te doen. */ .keuze{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem; border:1px solid var(--line);border-radius:.25rem;background:var(--card-hoog);cursor:pointer} .keuze:has(input:checked){border-color:var(--strength); background:color-mix(in oklch,var(--strength) 12%,var(--card-hoog))} .keuze input{margin-top:.25rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--strength)} .keuze-tekst{display:flex;flex-direction:column;gap:.15rem} .keuze-titel{font-weight:600} .huidig{border:1px dashed var(--line);border-radius:.25rem;padding:.9rem 1rem;margin-bottom:1rem} .knoppenrij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.25rem} .knop-stil{background:transparent} .knop-gevaar{border-color:color-mix(in oklch,var(--fout) 50%,transparent);color:var(--fout)} .vraag{font-weight:600;margin:0 0 .3rem} /* --- "Hoe gaat het?" (fase 11a) ----------------------------------------- Eén kaart op het overzicht: afvinken en meten. Geen nieuw menu-item — dit is iets wat je in twee tikken doet en daarna weer wegklikt, geen plek waar je naartoe navigeert. Alle raakvlakken minimaal 44 px. De bolletjesrij is het enige onderdeel dat kleiner lijkt; die knoppen zijn 2.75rem en het bolletje erin is puur opmaak. */ .vandaag-knop{width:100%;min-height:3.5rem;font-size:1.05rem;font-weight:600} /* Aangevinkt: rustiger dan de oproep om te tikken. Een knop die schreeuwt terwijl het al gelukt is, leest als "er moet nog iets". */ .vandaag-knop[data-gedaan="ja"]{background:color-mix(in oklch,var(--cardio) 18%,var(--card-hoog)); border-color:color-mix(in oklch,var(--cardio) 50%,transparent);color:var(--text)} .vink{flex:none;width:1.4rem;height:1.4rem} .vink-cardio{color:var(--cardio)} .week{display:flex;gap:.35rem;justify-content:space-between;margin:1rem 0 .4rem; list-style:none;padding:0} .week li{flex:1 1 0;min-width:0} /* Knop én span krijgen dezelfde vorm, zodat de rij niet verspringt tussen de dagen die je nog kunt aanpassen en de dagen die alleen informatie zijn. */ .dag{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%; min-height:2.75rem;padding:.4rem .1rem;border:0;background:none;color:var(--muted); font:inherit;font-size:.75rem;cursor:pointer;border-radius:.25rem} .dag[disabled],.dag.dag-vast{cursor:default} .dag-bol{width:1.6rem;height:1.6rem;border-radius:999px;border:2px solid var(--line); display:block} .dag-aan .dag-bol{background:var(--cardio);border-color:var(--cardio)} /* Vandaag krijgt een ring, ook als hij nog niet aan staat: zonder dat merkteken is de laatste bol in de rij niet te onderscheiden van de dag ervoor. En het werkt zonder kleur te hoeven zien. */ .dag-vandaag .dag-bol{outline:2px solid var(--strength);outline-offset:2px} .dag-vandaag{color:var(--text);font-weight:600} .dag-vast .dag-bol{opacity:.75} .meet-rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-top:.6rem} .meet-veld{flex:1 1 8rem;min-width:8rem;display:flex;flex-direction:column;gap:.35rem} .meet-veld label{font-size:.9rem;font-weight:600} .meet-invoer{display:flex;align-items:center;gap:.5rem} .meet-invoer input{min-height:2.75rem;padding:.6rem .8rem;border-radius:.25rem; border:1px solid var(--line);background:var(--card-hoog);color:var(--text); font:inherit;width:100%;font-size:1.1rem} .eenheid{color:var(--muted);font-size:1rem} /* Op smal scherm staat er maar één blok per rij, dus blijft de scheidingslijn nodig; in de grid hieronder (.meet-blokken, ≥40rem) doet de gap dat al en zou de lijn een halve rand tussen twee naast elkaar staande kaarten geven. */ .meet-blok{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem} .meet-blok:first-of-type{border-top:0;padding-top:0;margin-top:0} @media(min-width:40rem){ .meet-blokken{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .meet-blok{border-top:0;padding-top:0;margin-top:0} } /* De datum staat standaard dicht: negen van de tien keer is het vandaag, en een veld dat je nooit gebruikt is een veld dat je toch leest. */ .andere-dag{margin-top:.6rem;font-size:.85rem;color:var(--muted)} .andere-dag summary{cursor:pointer;min-height:2.25rem;display:flex;align-items:center} .andere-dag input{min-height:2.75rem;padding:.5rem .7rem;border-radius:.25rem; border:1px solid var(--line);background:var(--card-hoog);color:var(--text); font:inherit;margin-top:.4rem} .laatste-metingen{list-style:none;padding:0;margin:1rem 0 0;font-size:.92rem} .laatste-metingen li{display:flex;justify-content:space-between;gap:1rem; padding:.45rem 0;border-bottom:1px solid var(--line)} .laatste-metingen li:last-child{border-bottom:0} /* --- Voortgangsgrafieken (fase 11c) ------------------------------------- Twee lijngrafieken naast elkaar op een breed scherm, onder elkaar op een telefoon; de weekbalken altijd over de volle breedte. De SVG's hebben een viewBox en width:100%/height:auto, dus hun verhouding blijft staan — de x-aslabels zitten binnen die viewBox en vallen nooit buiten de kaart. */ .grafieken{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.25rem} @media(min-width:40rem){.grafieken{grid-template-columns:1fr 1fr} .grafiek-breed{grid-column:1/-1}} .grafiek{margin:0} .grafiek-kop{margin:0 0 .15em} .grafiek-zin{margin:0 0 .5rem} /* Geen overflow:visible. Een label dat buiten de viewBox valt hoort zichtbaar afgeknipt te worden, niet stilletjes over de kaartrand te lopen — dan zie je in een screenshot dat de marge te krap is. */ /* De max-width is de hoogtebegrenzing (2026-09-25). Zonder CSS-hoogte volgt de hoogte uit breedte × verhouding, dus een grafiek in een volle-breedte-slot (.grafiek-breed, ~790px in deze kaart) werd 2× uitvergroot: te hoog, en letters van 11 die als 22 landden. Hier stoppen op 560px houdt de schaal onder 1,4× en de weekbalken op ~146px in plaats van ~290px. Een telefoon (~328px) zit hier ruim onder en merkt er niets van. */ .grafiek-svg{display:block;width:100%;max-width:560px;height:auto} /* Assen en gridlines: hairline, solid, recessief. Gestreept trekt aandacht naar het raster, en de lijn is waar het over gaat. */ .gr-grid{stroke:var(--line);stroke-width:1} /* Tekst draagt nooit de seriekleur: dan leest een label als data. */ .gr-as-tekst{fill:var(--muted);font-family:inherit} .gr-waarde{fill:var(--text);font-family:inherit;font-weight:600} .gr-lijn-strength{stroke:var(--strength)} .gr-lijn-cardio{stroke:var(--cardio)} .gr-vlak-strength{fill:var(--strength);opacity:.1} .gr-vlak-cardio{fill:var(--cardio);opacity:.1} .gr-stip-strength{fill:var(--strength)} .gr-stip-cardio{fill:var(--cardio)} /* De ring om het eindpunt is de kaartkleur en snijdt de lijn eronder weg. */ .gr-punt-strength{fill:var(--strength);stroke:var(--card)} .gr-punt-cardio{fill:var(--cardio);stroke:var(--card)} /* Eén kleur voor alle kolommen. Donkerder-naarmate-hoger zegt hetzelfde als de hoogte zelf en zet de lezer aan het rekenen over iets dat er al staat. */ .gr-kolom{fill:var(--cardio)} /* Een week zonder training krijgt geen streepje maar een onzichtbaar raakvlak, alleen om de tooltip aan op te hangen. */ .gr-kolom-leeg{fill:transparent} .getallen{margin-top:.6rem;font-size:.9rem} .getallen summary{cursor:pointer;color:var(--muted);padding:.35rem 0} .getallen table{margin-top:.3rem} .getallen th[scope="row"]{font-weight:400} .getallen td{text-align:right} /* --- Weekdashboard (fase 12) --------------------------------------------- Eén scherm, geen tabs. Breder dan de rest van het portaal (72rem tegen 52rem): een weekstrip van zeven kolommen heeft ruimte nodig, en dit is de enige pagina die hem heeft. */ .wrap-breed{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 3rem} .dash-kop{display:flex;justify-content:space-between;align-items:flex-end; gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem} .dash-kop h1{margin:0} .chips{display:flex;flex-wrap:wrap;gap:.4rem} .chip-kracht-vol{background:color-mix(in oklch,var(--strength) 18%,var(--card-hoog)); border-color:color-mix(in oklch,var(--strength) 50%,transparent);color:var(--strength)} .chip-conditie-vol{background:color-mix(in oklch,var(--cardio) 18%,var(--card-hoog)); border-color:color-mix(in oklch,var(--cardio) 50%,transparent);color:var(--cardio)} /* De weekstrip. Zeven kolommen op een breed scherm, zeven RIJEN eronder — geen horizontale scroll, want wegvegen naar een dag die je niet ziet is precies de interactie die deze doelgroep mist. */ .strip{display:grid;gap:.6rem;grid-template-columns:1fr;list-style:none;padding:0;margin:0} @media (min-width:62rem){.strip{grid-template-columns:repeat(7,minmax(0,1fr))}} .strip-dag{background:var(--card-hoog);border:1px solid var(--line); border-top:3px solid var(--dim);border-radius:.25rem;padding:.7rem .75rem; display:flex;flex-direction:column;gap:.4rem;min-width:0} /* Het accent is een rand bovenaan en nooit het enige verschil: in de kolom staat altijd ook het woord. */ .strip-dag[data-accent="training"]{border-top-color:var(--strength)} .strip-dag[data-accent="rust"]{border-top-color:oklch(55% 0.02 260)} .strip-naam{font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.15rem; letter-spacing:.03em;line-height:1} .strip-tekst{font-size:.8rem;line-height:1.4} .strip-leeg{font-size:.8rem;color:var(--dim)} .strip-kcal{font-size:.8rem;color:var(--muted);margin-top:auto; border-top:1px solid var(--line);padding-top:.4rem} .strip-kcal strong{color:var(--text);font-size:1rem} .mini-chip{display:inline-block;border:1px solid var(--line);border-radius:999px; padding:.05rem .5rem;font-size:.7rem;background:var(--card)} .mini-chip.toon-kracht{color:var(--strength); border-color:color-mix(in oklch,var(--strength) 45%,transparent)} .mini-chip.toon-conditie{color:var(--cardio); border-color:color-mix(in oklch,var(--cardio) 45%,transparent)} /* Dagdoelen: vier grote getallen plus twee kleine. */ .doelen{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); list-style:none;padding:0;margin:0} .doel{background:var(--card-hoog);border:1px solid var(--line);border-radius:.25rem; padding:.7rem .8rem} .doel-getal{font-family:"Bebas Neue","Manrope",sans-serif;font-size:2rem;line-height:1; letter-spacing:.02em} .doel-eenheid{font-size:1rem;color:var(--muted)} .doel-label{font-size:.85rem;color:var(--muted)} .doel-nuance{font-size:.75rem;color:var(--dim)} /* Tijdlijnbalk en donut naast elkaar op breed, onder elkaar op smal. */ .training-grid{display:grid;gap:1.25rem;grid-template-columns:1fr} @media (min-width:48rem){.training-grid{grid-template-columns:1fr 14rem}} .tijdbalk{display:block;width:100%;height:1.5rem} .seg-kracht{fill:var(--strength)} .seg-conditie{fill:var(--cardio)} .seg-neutraal{fill:oklch(55% 0.02 260)} .seg-neutraal-licht{fill:oklch(45% 0.018 260)} .balk-legenda{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.8rem; color:var(--muted);margin-top:.4rem;list-style:none;padding:0} .legenda-stip{display:inline-block;width:.65rem;height:.65rem;border-radius:2px; margin-right:.35rem;vertical-align:baseline} .stip-kracht{background:var(--strength)} .stip-conditie{background:var(--cardio)} .stip-neutraal{background:oklch(55% 0.02 260)} .stip-neutraal-licht{background:oklch(45% 0.018 260)} .donut{display:block;width:100%;max-width:11rem;margin:0 auto} .ring-kracht{stroke:var(--strength)} .ring-conditie{stroke:var(--cardio)} .ring-neutraal{stroke:oklch(55% 0.02 260)} .ring-neutraal-licht{stroke:oklch(45% 0.018 260)} .ring-spoor{stroke:var(--line)} .donut-midden{fill:var(--text);font-family:"Bebas Neue","Manrope",sans-serif; font-size:7px;letter-spacing:.02em} .donut-midden-klein{fill:var(--muted);font-size:3px;font-family:"Manrope",sans-serif} /* Kaarten-grid voor de trainingsblokken en de maaltijden. */ .kaarten{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); list-style:none;padding:0;margin:0} .mini-kaart{background:var(--card-hoog);border:1px solid var(--line); border-radius:.25rem;padding:.9rem 1rem;break-inside:avoid} .mini-kaart-kop{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem} .mini-kaart-kop h3{margin:0;flex:1;min-width:0} .icoon{width:1.25rem;height:1.25rem;flex:none;stroke-width:1.75;fill:none; stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .icoon-kracht{color:var(--strength)} .icoon-conditie{color:var(--cardio)} .icoon-neutraal{color:var(--muted)} .duur{font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.1rem;color:var(--muted)} .oefeningen{list-style:none;padding:0;margin:0;font-size:.88rem} /* flex-wrap is hier geen detail: op een smal scherm moeten de naam en de belasting onder elkaar kunnen, anders duwen ze de pagina breder dan het venster. min-width:0 laat de naam afbreken in plaats van zijn kolom op te rekken - zonder dat negeert een flexitem zijn container. */ .oefeningen li{display:flex;justify-content:space-between;gap:.2rem .6rem; flex-wrap:wrap;padding:.3rem 0;border-bottom:1px solid var(--line)} .oefeningen li:last-child{border-bottom:0} .oefeningen li>span:first-child{min-width:0;flex:1 1 9rem} /* Alleen de korte belasting ("3 x 8-10", "AMRAP", "10 min") blijft op een regel; dat is een eenheid en leest verkeerd als hij afbreekt. */ .oefening-belasting{color:var(--muted);white-space:nowrap;font-size:.82rem} /* De toelichting erachter (RPE plus gewichtsrichtlijn) is een zin en hoort juist wel af te breken. Stond die in dezelfde nowrap-span, dan werd de pagina zo breed als de langste zin - op 375 px gemeten 697 px. */ .oefening-extra{color:var(--dim);font-size:.78rem;flex:1 1 100%; overflow-wrap:anywhere} .regel{font-size:.82rem;color:var(--muted);margin:.6rem 0 0} /* De maaltijdtabel op een telefoon. Vier kolommen naast elkaar passen niet op 375 px: gemeten kwam de tabel op 432 px uit. Een echte table blijft het wel - een schermlezer krijgt daar rij- en kolomcontext van, en dat is precies wat deze gegevens nodig hebben. Alleen de maten gaan mee met het scherm: krappere padding, en de getallen mogen afbreken zodra het niet anders kan. table-layout:fixed houdt de naamkolom in toom, die anders alle ruimte opeist. */ .eten-tabel{table-layout:fixed} .eten-tabel th:first-child{width:42%} /* Onder 30rem worden calorieen en eiwit EEN cel ("615 kcal - 60 g eiwit"). Vier kolommen op 375 px gaven de naamkolom ongeveer 114 px, en daar moet "Eerste maaltijd - kipwrap met volkoren tortilla" plus de tijdregel in: een tot twee woorden per regel. Drie kolommen geven die kolom ruwweg het dubbele. De samenvoeging gebeurt met display, niet met colspan - colspan is niet te schakelen vanuit CSS, en JavaScript is hier geen optie (CSP, en het moet ook zonder werken). De cel houdt daarom headers= met BEIDE kolomkoppen, zodat een schermlezer hem aan calorieen en eiwit blijft koppelen ook al staat de tweede kop niet meer op het scherm. */ .kol-samen{display:none} @media (max-width:30rem){ .eten-tabel{font-size:.82rem} .eten-tabel th,.eten-tabel td{padding:.45rem .3rem} .eten-tabel .nowrap{white-space:normal} .eten-tabel th:first-child{width:46%;overflow-wrap:anywhere} .kol-eiwit{display:none} .kol-samen{display:inline} } /* Varianten en opbouw. */ .varianten{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); list-style:none;padding:0;margin:0} .opbouw-strook{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); list-style:none;padding:0;margin:.5rem 0 0} .fase{border:1px solid var(--line);border-radius:.25rem;padding:.5rem .6rem; font-size:.8rem;background:var(--card-hoog)} .fase[data-nu="ja"]{border-color:var(--strength); background:color-mix(in oklch,var(--strength) 12%,var(--card-hoog))} .fase-label{font-weight:600;display:block} .fase-nu{color:var(--strength);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em} .dash-voet{border-top:1px solid var(--line);margin-top:2rem;padding-top:.8rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.8rem;color:var(--dim)} /* De merknaam onderaan elke portaalpagina. Klein en gedempt: dit vertelt van wie de app is, het is geen kop. De weekpagina heeft zijn eigen voetregel met dezelfde signatuur en zet deze uit. */ .merk-voet{max-width:44rem;margin:2.5rem auto 1.5rem;padding:0 1rem; text-align:right;font-size:.78rem;color:var(--dim)} @media print{ body{background:#fff;color:#111} .kop,.download,.geen-print{display:none!important} .kaart{background:#fff;border-color:#ccc;break-inside:avoid} .muted,.dim{color:#555} a{color:#111} /* De weekstrip moet ook op papier zeven kolommen zijn: dat is het hart van het dashboard, en zeven rijen onder elkaar duwen de rest van een pagina af. */ .strip{grid-template-columns:repeat(7,minmax(0,1fr))} .strip-dag,.mini-kaart,.doel,.fase{background:#fff;border-color:#ccc} .strip-dag{break-inside:avoid} } /* --- Oefeningenbibliotheek (fase 13a-2) ---------------------------------- */ .zoekform{background:var(--card);border:1px solid var(--line);border-radius:.25rem; padding:1rem 1.25rem;margin-bottom:1.25rem} .zoekform .veld{margin-bottom:.6rem} .zoekform input[type=search]{min-height:2.75rem;padding:.6rem .8rem;border-radius:.25rem; border:1px solid var(--line);background:var(--card-hoog);color:var(--text); font:inherit;font-size:1.05rem;width:100%} .zoekknoppen{display:flex;flex-wrap:wrap;gap:.6rem} .filterblok{margin-bottom:1rem} .filterkop{font-size:1rem;font-family:"Manrope",sans-serif;font-weight:600; letter-spacing:0;color:var(--muted);margin:0 0 .45rem} .chip-rij{display:flex;flex-wrap:wrap;gap:.45rem} /* Raakvlak minimaal 44 px hoog: dit zijn de knoppen waar de hele pagina op draait, en een chip van 26 px is op een telefoon voor een deel van deze doelgroep niet te raken. */ .filterchip{display:inline-flex;align-items:center;min-height:2.75rem; padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px; background:var(--card-hoog);color:var(--text);text-decoration:none;font-size:.92rem} .filterchip:hover{border-color:var(--muted)} /* Aan-staan is nooit alleen kleur: de rand wordt dikker en de tekst vetter, zodat het verschil ook zonder kleurwaarneming leesbaar blijft. */ .filterchip-aan{background:color-mix(in oklch,var(--strength) 18%,var(--card-hoog)); border-color:var(--strength);border-width:2px;color:var(--strength);font-weight:600} .meer-filters{margin:0 0 1.25rem} .meer-filters>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center; gap:.4rem;color:var(--cardio);font-size:.92rem} .meer-filters[open]>summary{margin-bottom:.6rem} .telling{color:var(--muted);font-size:.92rem;margin:1rem 0 .6rem} .oef-lijst{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .oef-kaart{display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem; background:var(--card);border:1px solid var(--line);border-radius:.25rem; color:var(--text);text-decoration:none;min-height:4.5rem} .oef-kaart:hover{border-color:var(--strength);background:var(--card-hoog)} /* Vaste maat, ook bij de letterplaceholder: anders verspringt de hele lijst terwijl de plaatjes een voor een binnenkomen. */ .oef-beeld{flex:none;width:4rem;height:4rem;border-radius:.25rem;overflow:hidden; background:var(--card-hoog);border:1px solid var(--line); display:flex;align-items:center;justify-content:center} .oef-plaatje{width:100%;height:100%;object-fit:contain;background:oklch(97% 0.006 260)} .oef-letter{font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.8rem; line-height:1;color:var(--muted)} .oef-tekst{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1} .oef-naam{font-weight:600;overflow-wrap:anywhere} .oef-categorie{font-size:.82rem;color:var(--muted)} .oef-pijl{flex:none} .taalmerk{display:inline-block;margin-left:.4rem;font-size:.7rem;font-weight:400; color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:0 .4rem; vertical-align:middle} .bladeren{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.6rem;margin:1.25rem 0} .bladeren-stand{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums} .knop-uit{opacity:.4;cursor:default} /* De uitleg komt uit de gesaneerde HTML van de bron: p, ul, ol, li, strong, em. */ .uitleg{font-size:.95rem} .uitleg p{margin:0 0 .7rem} .uitleg p:last-child{margin-bottom:0} .uitleg ul,.uitleg ol{margin:0 0 .7rem;padding-left:1.3rem} .uitleg li{margin-bottom:.25rem} .plaatjes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))} .plaatje{margin:0} /* Witte achtergrond onder de plaatjes: de bron levert lijntekeningen met een transparante of witte achtergrond, en die verdwijnen op een donker vlak. */ .plaatje img{width:100%;height:auto;border-radius:.25rem;background:oklch(97% 0.006 260); border:1px solid var(--line)} .vermelding{font-size:.78rem;color:var(--dim);margin:.4rem 0 0} .vermelding a{color:var(--dim)} .oef-video{width:100%;height:auto;border-radius:.25rem;border:1px solid var(--line); margin-bottom:1rem;background:#000} .bronvoet{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem; font-size:.82rem;color:var(--muted)} .bronvoet p{margin:0 0 .3rem} /* Ingang naar de bibliotheek vanaf de startpagina's. */ .oef-ingang{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap} .oef-ingang .icoon{width:1.75rem;height:1.75rem} /* --- Kiezen vanuit een eigen schema (fase 13b) --------------------------- De balk gebruikt het kracht-accent en niet de gewone kaartrand: hij moet in één oogopslag te onderscheiden zijn van de gewone bibliotheek, want dat is het enige verschil tussen "ik kijk rond" en "ik ben aan het bouwen". */ .bouwbalk{border:1px solid color-mix(in oklch,var(--strength) 45%,transparent); background:color-mix(in oklch,var(--strength) 10%,transparent); border-radius:.25rem;padding:.8rem 1rem;margin:0 0 1.25rem} .bouwbalk p{margin:0} .bouwbalk-titel{font-weight:600;overflow-wrap:anywhere} .bouwbalk p+p{margin-top:.25rem;font-size:.9rem} /* De knop staat ónder de kaart en over de volle breedte: naast de kaart zou hij op 420 px de naam van de oefening in een kolom van twee woorden duwen. */ .oef-toevoegen{margin-top:.4rem} .oef-toevoegen .knop{width:100%} /* --- Zelf een schema samenstellen (fase 13b) ----------------------------- */ .eigen-lijst{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;gap:.6rem} .eigen-kaart{display:flex;align-items:center;justify-content:space-between;gap:.9rem; padding:.9rem 1rem;background:var(--card);border:1px solid var(--line); border-radius:.25rem;color:var(--text);text-decoration:none;min-height:3.5rem} .eigen-kaart:hover{border-color:var(--strength);background:var(--card-hoog)} .eigen-tekst{display:flex;flex-direction:column;gap:.15rem;min-width:0} .eigen-naam{font-weight:600;overflow-wrap:anywhere} .eigen-onder{font-size:.82rem;color:var(--muted)} .bouw-lijst{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;gap:.6rem; counter-reset:none} .bouw-item{background:var(--card);border:1px solid var(--line);border-radius:.25rem; padding:.9rem 1rem} .bouw-kop{display:flex;gap:.8rem;align-items:flex-start} /* Het nummer is de enige plek waar de volgorde zichtbaar is; zonder cijfer is "derde oefening" alleen te tellen. Vaste breedte, anders verspringt de tekst zodra je bij tien komt. */ .bouw-nr{flex:none;width:1.9rem;height:1.9rem;border-radius:999px; background:var(--card-hoog);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.05rem;color:var(--muted)} .bouw-tekst{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1} .bouw-naam{font-weight:600;overflow-wrap:anywhere;color:var(--text);text-decoration:none; border-bottom:1px solid var(--line)} .bouw-notitie{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere} /* Twee knoppen naast elkaar, elk minimaal 44 px hoog. Onder de tekst en niet ernaast: naast de naam blijft er op 420 px een kolom van twee woorden over. */ .bouw-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem} .bouw-knoppen .knop{min-height:2.75rem} .bouw-aanpassen{margin-top:.7rem;border-top:1px solid var(--line);padding-top:.6rem} .bouw-aanpassen>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center; color:var(--cardio);font-size:.92rem} .bouw-aanpassen[open]>summary{margin-bottom:.6rem} .bouw-aanpassen .veld{margin-bottom:.8rem} /* De twee uitklappers onderaan zien eruit als kaarten, zodat ze niet als een voetnoot lezen — het zijn echte handelingen. */ details.kaart>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center; font-family:"Bebas Neue","Manrope",sans-serif;font-size:1.3rem;letter-spacing:.02em}